Desarrollo Web Semana 2 Uch

Desarrollo Web

Comprende los Fundamentos de JavaScript como lenguaje de programación web dinámica Mg. Jorge Santiago Nolasco Valenzuela [email protected]

Desarrollo Web

Manejo de Ventanas y Eventos

Eventos JavaScript Eventos y Manejadores  JavaScript utiliza eventos para interaccionar con el entorno  Hay eventos de muchos tipos

• Temporizadores, cliks de botón, tocar en pantalla, pulsar  Manejador o Callback de teclas. evento  Función que se ejecuta al ocurrir el evento

 El Script debe configurar los manejadores (callback)  a ejecutar cuando ocurra cada evento que deba ser atendido

Event oA Manejador

Carga de A Página HTML

Event oB Manejador B

Eventos JavaScript Eventos y Manejadores Evento blur change click dblclick focus keydown keypress keyup load

Descripción El elemento pierde el foco. El contenido del elemento cambia. El usuario hace clic sobre el elemento. El usuario hace doble clic sobre el elemento. El elemento gana el foco. El usuario presiona una tecla. El usuario presiona una tecla y la mantiene pulsada. El usuario libera la tecla. 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 submit

El usuario selecciona el texto de un elemento. 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

Funciones JavaScript En Línea

Funciones JavaScript En Línea

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  Bloque de código con parámetros, invocable (ejecutable) a través del nombre  La ejecución finaliza con la sentencia “return + expr” o al final del bloque

 Opcionalmente la función puede devolver un valor de

retorno

 Se le puede pasar argumentos

Ejemplo Declaración de una función

function foo(argumentos) { /* hacer algo */ } Declaración de una función nombrada

var foo = function(args) { /* hacer algo */ } Es preferible el método de función nombrada debido a algunas profundas razones técnicas.

Funciones Jave Script Valor de Retorno  Resultado de evaluar la expresión: Se utiliza la expresión:

“return + expr”  Undefinided : si se alcanza el final del bloque sin haber ejecutado “return”

Ejemplo

var foo = function(args) { x = /* hacer algo */ Return x ; }

Funciones JavaScript Estructura Definición

de la función

Invocació n o

ejecución de la función

Nombre

de la función

Parámetro s de la

función

function comer (persona, comida) { Return (persona+ “come” + comida); } comer (‘Jose’, ‘Paella’); => ‘José come Paella’ Retorno

de la función

Bloque de código delimitado por{……}

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|| <parámetro_por_defecto>  Si x es “undefined”, será false y devolverá parámetro ” por defecto  Los parámetros son variables y se les puede asignar un valor Function comer(persona,comida) { persona =(persona||’Alguien’); Comida =(comida|| ‘algo’); return (persona + “come” + comida); }

comer(“Jo sé”, );

comer ();

‘José come algo’ ‘Alguien come

algo’

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 <script type="text/javascript"> function mostrarMensaje() { document.write("Cuidado
"); document.write("Ingrese su documento correctamente
"); } mostrarMensaje(); mostrarMensaje(); mostrarMensaje();



Ejercicios Funciones JavaScript Ejercicio 1 <script type="text/javascript"> var mostrarMensaje = function() { document.write("Cuidado
"); document.write("Ingrese su documento correctamente
"); } mostrarMensaje(); mostrarMensaje(); mostrarMensaje();



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);

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+'
'); mostrarMenor(valor1,valor2,valor3);



Desarrollo Web

Laboratorio 2

Mg. Jorge Santiago Nolasco Valenzuela [email protected]

Laboratorio 2 1.

2.

3.

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. 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. 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.

2.

3.

4.

5.

6.

7.

8. 9. 10.

Crear un programa que determine si un número introducido en un Prompt es par o no, la respuesta será mostrada en una alerta. 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 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 Crear un programa que le pida al usuario dos números en un Prompt y luego muestre en un alerta el número mayor. 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. Crear un programa que determine si un string introducido por un usuario empieza con un número o con una letra. 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. Determinar si una palabra empieza con mayúscula o no. Determinar si un año dado es bisiesto. 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 [email protected]

Estructura de Nuestro Juego

Index.html

Analizando Nuestro Estilo

Al cargar en memoria el Archivo: <script src="js1/boot1.js"> 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