Está en la página 1de 47

Desarrollo Web

Comprende los Fundamentos de JavaScript


como lenguaje de programación web dinámica

Mg. Jorge Santiago Nolasco Valenzuela


jsnv57@hotmail.com
Desarrollo Web

Manejo de Ventanas y Eventos


Eventos JavaScript
Eventos y Manejadores

 JavaScript utiliza eventos  El Script debe configurar


para interaccionar con el los manejadores
entorno (callback)
 Hay eventos de muchos  a ejecutar cuando ocurra
tipos cada evento que deba ser
• Temporizadores, cliks atendido
de botón, tocar en
pantalla, pulsar Event Event
 Manejador o Callback de oA oB
teclas.
evento
 Función que se ejecuta al Manejador Manejador
ocurrir el evento Carga de
A B

Página
HTML
Eventos JavaScript
Eventos y Manejadores

Evento Descripción
blur El elemento pierde el foco.
change El contenido del elemento cambia.
click El usuario hace clic sobre el elemento.
dblclick El usuario hace doble clic sobre el elemento.
focus El elemento gana el foco.
keydown El usuario presiona una tecla.
keypress El usuario presiona una tecla y la mantiene
pulsada.
keyup El usuario libera la tecla.
load El documento termina su carga.
Eventos JavaScript
Eventos y Manejadores
mousedown El usuario presiona el botón del ratón en un elemento.

mousemove El usuario mueve el puntero del ratón sobre un elemento.

mouseout El usuario mueve el puntero fuera de un elemento.

mouseover El usuario mantiene el puntero sobre un elemento.

mouseup El usuario libera el botón pulsado del ratón sobre un elemento.

reset El usuario presiona el botón de restablecer de un formulario.

select El usuario selecciona el texto de un elemento.


submit El usuario presiona el botón de envío de un formulario.

unload El documento se descarga, bien porque se cierra la ventana, bien


porque se navega a otra página, bien porque el documento se
recarga.
Funciones JavaScript
Estructura

Existen tres formas diferentes de registrar un evento para


un elemento HTML:

• podemos agregar un nuevo atributo al elemento,

• registrar un manejador de evento como una propiedad


del elemento o

• usar el nuevo método estándar addEventListener().


Funciones JavaScript
En Línea

Los manejadores de eventos más usados son, en general, los


relacionados con el ratón, como por ejemplo :

• Onclick = Hacer click sobre el enlace


• onMouseOver = Ubicarse por encima del enlace
• onMouseOut = Ubicarse por encima del enlace y sacar el
foco.
Otros eventos están relacionados con cambios en el
navegador :
• onload
• onfocus
Eventos JavaScript
En Línea

<!DOCTYPE html>
<html lang=”es”>
<head>
<title>Este texto es el título del documento</title>
</head>
<body>
<div id=”principal”>
<p onclick=”alert(‘hizo clic!’)”>Hacer Clic</p>
<p>No puede hacer clic</p>
</div>
</body>
</html>
Funciones JavaScript
En Línea

<html lang=”es”>
<head>
<title>Este texto es el título del documento</title>
</head>
<body>
<div id=”principal”>
<p onMouseover =“alert(‘Estas sobre el enlace’)”>Hacer Clic</p>
<p>No puede hacer clic</p>
</div>
</body>
</html>
Funciones JavaScript
En Línea

<html lang=”es”>
<head>
<title>Este texto es el título del documento</title>
</head>
<body>
<div id=”principal”>
<p onMouseout =“alert(‘Estas sobre el enlace’)”>Hacer Clic</p>
<p>No puede hacer clic</p>
</div>
</body>
</html>
Funciones JavaScript
En Línea - Consideraciones

El uso de Javascript dentro de etiquetas HTML está permitido en


HTML5, pero por las mismas razones que en CSS, esta clase de práctica
no es recomendable.

El código HTML se extiende innecesariamente y se hace difícil de


mantener y actualizar. Así mismo, el código distribuido sobre todo el
documento complica la construcción de aplicaciones útiles.

Nuevos métodos y técnicas fueron desarrollados para referenciar


elementos HTML y registrar manejadores de eventos sin tener que usar
código en línea (inline).
Manejo de Ventanas
Manejo de Ventanas
Manejo de Ventanas
Manejo de Ventanas
Desarrollo Web

Mas Sobre Funciones


Funciones Jave Script
Función Ejemplo
 Bloque de código con Declaración de una función
parámetros, invocable
(ejecutable) a través del nombre function foo(argumentos)
 La ejecución finaliza con la { /* hacer algo */ }
sentencia “return + expr” o al
final del bloque Declaración de una función nombrada

 Opcionalmente la función var foo = function(args)


puede devolver un valor de { /* hacer algo */ }
retorno
 Se le puede pasar argumentos Es preferible el método de
función nombrada debido a
algunas profundas razones
técnicas.
Funciones Jave Script
Valor de Retorno Ejemplo

 Resultado de evaluar la
expresión:
Se utiliza la expresión: var foo = function(args)
“return + expr”
{ x = /* hacer algo */
 Undefinided : si se Return x ;
alcanza el final del
bloque sin haber }
ejecutado “return”
Funciones JavaScript
Estructura
Nombre Parámetro
Definición
de la de la s de la
función función función

function comer (persona, comida) Bloque de


{ código
Invocació Return (persona+ “come” + comida); delimitado
n o } por{……}
ejecución comer (‘Jose’, ‘Paella’);
de la
función => ‘José come Paella’
Retorno
de la
función
Funciones JavaScript
Parámetros de una función

 Los parámetros de la función son variables utilizables


en el cuerpo de la función
• Al invocarlas se asignan los valores de la invocación
 La función se puede invocar con un número variable de
parámetros
• Un parámetro inexistente esta undefined

Function comer(persona,comida) { return (persona +


“come” + comida); }
comer(“José”,”paell ‘José come
a”); paella’
comer(“José”,”paella” ‘José come
,”carne” ); paella’
‘José come
comer(“José”); undefined’
Funciones JavaScript
Parámetros por defecto

 Funciones invocadas con un número variable de


parámetros
• Suelen definir parámetros por defecto con el operador ||
• “x||
 Si x es “undefined”, será false y devolverá parámetro
<parámetro_por_defecto>

por defecto
 Los parámetros son variables y se les puede asignar un valor
Function comer(persona,comida) comer(“Jo ‘José come
{ sé”, ); algo’
persona =(persona||’Alguien’);
Comida =(comida|| ‘algo’); comer ‘Alguien come
return (persona + “come” + (); algo’
comida); }
Ejercicios Funciones JavaScript
Problema 1

Confeccionar una función que muestre un


mensaje de advertencia en pantalla de
forma reiterada.
Ejercicios Funciones JavaScript
Ejercicio 1
<html>
<head>
</head>
<body>
<script type="text/javascript">
function mostrarMensaje()
{
document.write("Cuidado<br>");
document.write("Ingrese su documento
correctamente<br>");
}
mostrarMensaje();
mostrarMensaje();
mostrarMensaje();
</script>
</body>
</html>
Ejercicios Funciones JavaScript
Ejercicio 1
<html>
<head>
</head>
<body>
<script type="text/javascript">
var mostrarMensaje = function()
{
document.write("Cuidado<br>");
document.write("Ingrese su documento
correctamente<br>");
}
mostrarMensaje();
mostrarMensaje();
mostrarMensaje();
</script>
</body>
</html>
Ejercicios Funciones JavaScript
Problema 1

Confeccionar una función que reciba dos


números y muestre en la página los valores
comprendidos entre ellos de uno en uno.
Cargar por teclado esos dos valores.
Ejercicios Funciones JavaScript
Solución
<script type="text/javascript">
function mostrarComprendidos(x1,x2) {
var inicio;
for(inicio=x1;inicio<=x2;inicio++) {
document.write(inicio+' '); } }
var valor1,valor2;
valor1=prompt('Ingrese valor inferior:','');
valor1=parseInt(valor1);
valor2=prompt('Ingrese valor
superior:',''); valor2=parseInt(valor2);
mostrarComprendidos(valor1,valor2);
</script>
Ejercicios Funciones JavaScript
Problema 2

1 Elaborar una función a la cual le


enviemos tres enteros y muestre el
menor.
2 Confeccionar una función a la cual
le envíe tres enteros y los muestre
ordenados de menor a mayor.
Ejercicios Funciones JavaScript
Solución Problema 2.1
<script type="text/javascript"> //Elaborar una función
a la cual le enviemos tres enteros y muestre el menor.
function mostrarMenor(x1,x2,x3)
{ if (x1<x2 && x1<x3) { document.write('El menor de
los tres valores es :'+x1); } else { if (x2<x3) {
document.write('El menor de los tres valores es :'+x2); }
else { document.write('El menor de los tres valores es
:'+x3); } } }
var valor1,valor2,valor3;
valor1=prompt('Ingrese primer valor:',''); valor1=parseInt(valor1);
valor2=prompt('Ingrese segundo valor:',''); valor2=parseInt(valor2);
valor3=prompt('Ingrese tercer valor:',''); valor3=parseInt(valor3);
document.write('Los tres valores ingresados son '+valor1+' '+valor2+'
'+valor3+'<br>');
mostrarMenor(valor1,valor2,valor3); </script>
Desarrollo Web

Laboratorio 2

Mg. Jorge Santiago Nolasco Valenzuela


jsnv57@hotmail.com
Laboratorio 2
1. Escribir un programa que muestre un prompt donde el
usuario ingresa un número, luego muestra otro prompt
pidiendo otro número, finalmente el programa muestra
una alerta con el resultado de la suma.
2. Crear un programa donde el usuario ingrese en un
prompt la temperatura en Celcius y el programa
muestre en una alerta la temperatura en Fahrenheit.
3. Pedir un número a un usuario a través de un prompt y
luego dividirlo por 10, ejemplo: 5 / 10 igual 0.5
Laboratorio 2
1. Crear un programa que determine si un número introducido en un Prompt es
par o no, la respuesta será mostrada en una alerta.
2. Crear un programa que determine si un número introducido en un Prompt es
divisible por 5 o no, mostrar el resultado con console.log
3. Crear un programa que determine si un número introducido en un popup es
divisible por 11 y 5 o no, mostrar el resultado con console.log
4. Crear un programa que le pida al usuario dos números en un Prompt y luego
muestre en un alerta el número mayor.
5. Crear un programa que le pida al usuario primero un números al usuario a
través de un prompt y luego un segundo número para luego mostrar en un
alerta el número mayor, esta vez realizar el ejercicio ocupando un if ternario.
6. Crear un programa que determine si un string introducido por un usuario
empieza con un número o con una letra.
7. Crear un programa donde se introduzcan los tres ángulos internos de un
triángulo y se determine si el triángulo es válido o no.
8. Determinar si una palabra empieza con mayúscula o no.
9. Determinar si un año dado es bisiesto.
10. Escribir un programa JavaScript en el que el programa escoge al azar un entero
entre 1 y 10, el usuario , luego a el usuario se le pedirá que introduzca un
número en un popup para intentar adivinarlo. Si la entrada del usuario coincide
con el número de conjetura, el programa mostrará un mensaje de "buen
trabajo" de lo contrario mostrará un mensaje de "No corresponde"
Laboratorio 2
4.- Crear un Reproductor de Música aplicando HTML + CSS +
JAVASCRIPT
Laboratorio 2

Breves alcances para la pregunta 4


Laboratorio 2

Algo sobre estilos


Laboratorio 2
Laboratorio 2
Laboratorio 2
Laboratorio 2
Laboratorio 2
Desarrollo Web

Explicación Juego

Mg. Jorge Santiago Nolasco Valenzuela


jsnv57@hotmail.com
Estructura
de Nuestro Juego
Index.html
Analizando Nuestro Estilo
Al cargar en memoria el
Archivo:
<script src="js1/boot1.js"></script>

Y al encontrar la siguiente function

Se ejecuta automaticamente la function


anterior
Analizando Nuestro Javascrip
Analizando Nuestro Javascrip

No es recomendable todavía usar


el método Play del audio aun
Gracias