X+

Javascript para aplicaciones web y móviles Boletín de prácticas UNIVERSIDADE DE VIGO

2019

Amador Rodríguez Diéguez momentum@uvigo.es Universidade de Vigo

1. PRÁCTICA DE HTML

A. Crear una página HTML con título “momentum” y codificación UTF-8 similar a la que se ve en la imagen. Contendrá los siguientes elementos:

• Un título • Un párrafo explicativo de la página • Cuatro imágenes con sus respectivos enlaces a las siguientes páginas:

o http://momentum.uvigo.es/cursos/javascript.html o http://momentum.uvigo.es/cursos/diseno-web.html o http://momentum.uvigo.es/cursos/bases-de-datos.html o http://momentum.uvigo.es/cursos/java.html

Las imágenes se pueden descargar de momentum.uvigo.es

• Una sección de fechas de los cursos que consta de un título de nivel 3 y una lista multinivel (números en el nivel externo y viñetas en el interno) con las fechas de preinscripción, matrícula y docencia de cada curso

• Una tabla donde se indique el aula donde se imparte cada curso • Un enlace de correo electrónico a momentum@uvigo.es • Un ancla que llevará al inicio del documento

B. Crear un formulario como el mostrado en la imagen adjunta. Además de las características evidentes, debe tenerse en cuenta lo siguiente:

• El título de la página será de tipo h1. • En el apartado de sexo, aparecerá preseleccionada la opción no especificado (atributo checked). • La nacionalidad será un desplegable con los elementos: española, unión europea, Europa no UE,

no europea. • El resumen del CV será de 4 filas y 50 columnas. • Obviamente, las contraseñas no serán visibles • El botón de Reestablecer borrará los contenidos de los campos.

C. Crear una página con un iframe de 450 píxeles de ancho y 500 de alto. Sobre el iframe habrá dos enlaces a los diarios La voz de Galicia (https://www.lavozdegalicia.es") y La Región (https://www.laregion.es/). Los enlaces mostrarán el periódico seleccionado en el iframe.

PÁGINA DEL PRIMER APARTADO

PÁGINA DEL SEGUNDO APARTADO

2. PRÁCTICA DE CSS Añadir los siguientes estilos al fichero html creado en el primer apartado de la página anterior (buscar información acerca del elemento th de las tablas):

1. Los encabezados h1 se mostrarán con texto azul y centrados.

2. Los párrafos se mostrarán con un tamaño de letra de 20px.

3. Las listas ordenadas tendrán un color de fondo gris claro.

4. Se definirá una clase llamada ancho_estandar que impondrá un ancho de 500px. Modificar el código HTML para que la lista ordenada pertenezca a esta clase.

5. Los ítems de la lista ordenada y los encabezados h3 se mostrarán en negrita. Escribir esto en una única regla CSS.

6. Los ítems de la lista sin orden se mostrarán en cursiva (itálica) y ancho normal (font-weight).

7. Los encabezados h3 se mostrarán en color azul.

8. El color de fondo de las tablas será gris claro.

9. Las celdas de la tabla tendrán un relleno de 20px a derecha e izquierda.

10. Las celdas de la cabecera de la tabla, se mostrarán alineadas a la izquierda, con color de fondo azul oscuro, el texto en blanco y de ancho normal.

11. Se modificará el HTML para que el enlace que desplaza al inicio de la página tenga un atributo id con valor “alinicio”.

12. Los elementos con el anterior id, se mostrarán en color gris con un tamaño de letra de 10px.

3. PRÁCTICA DE JAVASCRIPT

A. ESTRUCTURAS DE CONTROL

1. Pedir dos números enteros al usuario (prompt) y escribir en la página html el valor de la suma y el producto (document.write). Para convertir texto en valor numérico entero, se debe usar la función parseInt.

2. Pedir dos números enteros distintos al usuario y mostrar un texto en la página que indique cuál es mayor.

3. Modificar el ejemplo anterior para que en caso de que sean iguales, escriba el texto correspondiente.

4. Solicitar un año y, usando el operador %, escribir en la página un mensaje que indique si se trata de un año bisiesto o no. Son bisiestos los años múltiplos de 400 o múltiplos de 4 pero no de 100.

5. Solicitar un valor entero al usuario y escribir el día de la semana al que corresponde: 1: Lunes, 2: Martes, etc. En caso de introducir un valor inferior a uno o superior a siete, escribir un mensaje de error.

6. Usando el bucle while, escribir en una página los números del 1 al 100, cambiando de línea tras cada uno.

7. Usando dos bucles for anidados, crear una tabla de tres filas y dos columnas con un borde de ancho 1px en cada celda (atributo de td: style="border:1px solid;"). Dentro de cada celda de la tabla, se escribirá el número de filas y de columna de dicha celda, separados por comas:

B. FUNCIONES

1. Escribir e invocar una función que escriba en la página un mensaje de error.

2. Escribir una función que reciba como argumentos dos valores enteros y escriba en la página todos los valores comprendidos entre ellos.

3. Modificar el ejercicio anterior para que la función no escriba nada en la página y devuelva la suma de todos los valores comprendidos entre los dos pasados como argumentos.

4. Escribir una función que reciba un número cualquiera de argumentos numéricos y devuelva su suma.

5. Escribir una función operacion que recibirá tres argumentos: dos valores numéricos y una función. Devolverá el resultado de aplicar dicha función sobre los dos primeros argumentos. Se crearán cuatro funciones que realicen la suma, resta, multiplicación y división, para realizar estas operaciones llamando a la función operacion.

C. INTRODUCCIÓN A LOS OBJETOS PROPIOS: DATE, STRING, ARRAY, MATH

1. Escribir e invocar una función use la clase Date para mostrar la fecha en formato numérico (por ejemplo, 21/11/2013) y la hora (por ejemplo, 18:10:05)

2. Preguntar cuántos valores quiere introducir el usuario y solicitarlos, guardándolos en un array. Posteriormente, se escribirán en la página todos los valores así como la suma de todos ellos.

3. Generar un número entero aleatorio entre 1 y 50 con la clase Math (función random). Preguntar al usuario de forma repetida por valores, indicándole (alert) si su número es menor o mayor. Esta información también se tiene que escribir en la página. El programa termina si acierta o tras 10 intentos fallidos.

4. Pedir un número al usuario y escribir en la página el valor de su raíz cuadrada.

5. Solicitar al usuario una frase y escribir en la página la cadena introducida, el número de caracteres que la forma, el primer carácter de la frase, los primeros tres caracteres, la frase traducida a mayúsculas y a minúsculas y, finalmente, si contiene el texto ‘hola’ o no.

D. FORMULARIOS

1. Crear un formulario con dos controles para introducir un nombre y una contraseña. Añadir un botón que, al hacer clic en él, llame a una función que muestre (alert) ambos datos.

2. Crear un formulario que permita especificar el nivel de estudios del usuario. Se añadirá un botón que, al hacer clic en él, llame a una función que muestre (alert) el nivel de estudios seleccionado. En caso de no seleccionar ninguno, se sacará un mensaje (alert) que pida que se seleccione alguno.

3. Crear un formulario con cuatro checkboxes que permitan indicar qué lenguajes de programación se conocen. Se añadirá un botón que, al hacer clic en él, llame a una función que muestre (alert) el número de lenguajes seleccionados por el usuario.

4. Crear un formulario con un desplegable (select) con tres valores: Rojo, Verde y Azul. El valor asociado a cada uno de ellos será su representación hexadecimal (0xff0000, 0x00ff00 y 0x0000ff, respectivamente). Cada vez que se seleccione un nuevo color, se escribirá en la página el índice (posición), el texto y el valor asociado del elemento seleccionado. Estos tres valores se mostrarán en tres elementos <p>.

E. EVENTOS

1. Crear un formulario con dos campos de texto (nombre y edad) y un botón. Cuando se seleccione (ganar el foco) un campo, se borrará su contenido. Cuando se abandone el control (perder el foco), se comprobará que haya algo escrito en él. En caso contrario se saca un mensaje de error con la función alert.

2. Crear una página con tres párrafos <p> con el texto rojo, verde y azul respectivamente. Cuando el cursor pase sobre alguno de ellos, cambiará el color de fondo de la página.

3. Crear un formulario con dos campos de texto. En el primero se pide el nombre al usuario y en el segundo el año de alta en el sistema. Por defecto, al cargarse la página, una función javascript escribirá el año actual, obtenido a través de la clase Date.

4. Crear un formulario con dos cuadros de texto para que el usuario introduzca su nombre y su contraseña. Crear además una función javascript (validar) que en caso de que alguno de los cuadros de texto esté vacío, mostrará un mensaje (alert) avisando de la situación. En la etiqueta del formulario se asociará esta función al evento correspondiente.

5. Repetir el ejercicio anterior, pero asociando la función de validación al evento por medio del método addEventListener dentro de una función llamada inicio. Dicha función inicio, se asociará al evento load de la página, por medio del método addEventListener del objeto window.

6. Mostrar dos divs de 200x200px cada uno de un color. Cuando se haga clic en el primero se mostrará una alerta que indique que se ha hecho clic. De modo similar, el segundo div avisará cuando se haga doble clic.

7. Crear un div cuadrado ( 200px de lado) de color azul. A continuación, crear un párrafo (<p>) con el valor 0. Cada vez que el puntero se mueva sobre el div, se incrementará el valor que muestra el párrafo anterior.

8. Definir un cuadro de texto de 40 caracteres. A continuación, un texto que diga el número de caracteres que se pueden introducir. Cada vez que se pulse una letra en el control, se actualizará dicho número.

9. Mostrar 10 botones con los valores del 0 al 9. A continuación, mostrar un elemento div donde se irán concatenando los valores seleccionados por el usuario al pulsar los botones. Se asignará la misma función de respuesta al evento onClick para todos los botones. Para que la función sepa cuál botón se ha pulsado, se usará el evento recibido por la función como argumento.

F. EL OBJETOS DEL NAVEGADOR

1. Escribir un enlace que al hacer clic en él llame a una función que pida confirmación y redirija a una página determinada o bien saque un mensaje de ‘Redirección cancelada’ si el usuario no confirma.

2. Escribir una página que muéstrelos valores de las propiedades del objeto screen.

3. Escribir una página que muéstrelos valores de las propiedades del objeto navigator.

G. DEFINICIÓN DE OBJETOS

1. Definir una clase Cliente cuyos atributos serán el nombre y el saldo de su cuenta bancaria. El constructor recibirá dos argumentos para inicializar ambos atributos.

Esta clase tendrá dos métodos. El primero permitirá hacer ingresos en la cuenta (incrementará el saldo) y el segundo permitirá retirar dinero (decrementará el saldo).

En la misma página, crear un objeto de esta clase y mostrar el valor del balance tras algunos ingresos y retiradas de dinero.

2. Definir una clase Hipervinculo que contendrá una dirección de destino y el texto asociado (por ejemplo ‘http://www.google.com’ y ‘Google’. Añadir un método a la clase que devuelva una string con el enlace html. Por ejemplo: <a href=’http://www.google.com’>Google</a>

Crear tres objetos de la clase anterior y guardarlos en un Array. Recorrer el array con un bucle for, para mostrar en pantalla los tres enlaces, de modo que el usuario pueda clicar en cualquiera de ellos.

3. Repetir el ejercicio 1 de este apartado, creando el objeto de modo literal.

H. ARRAYS

1. Preguntar (prompt) de forma repetida al usuario por un número de cliente y su saldo bancario. Dicho saldo se guardará en una posición de un array cuyo índice será el número de cliente.

Recorrer el array y mostrar la suma de todos los saldos. Ha de tenerse en cuenta que algunos índices no existirán. Usar la palabra reservada undefined para detectar esta situación.

2. Generar un array con 10 valores enteros aleatorios y ordenarlo (orden creciente) por medio de la función sort. A continuación invertir el orden de los elementos usando la función reverse.

3. Inicializar un array con diez valores y, usando la función splice, eliminar tres elementos desde la segunda posición (incluida) y añadir tras esa misma posición otros cinco valores.

4. Crear dos vectores de números y concatenarlos. En la página se debe mostrar cada uno de los tres vectores: los dos primeros convirtiéndolos a strings con la función join y el vector resultante de la concatenación, recorriéndolo con un bucle for in.

4. PRÁCTICA DE APIS

A. VÍDEO

Escribir un programa que permita reproducir el vídeo adjunto en cualquier navegador. Tendrá cuatro botones: el primero permitirá pausar y continuar la reproducción y los otros tres permitirán escoger el tamaño del vídeo: grande (ancho de 640px), normal (420px) y pequeño (320px). El vídeo se descargará en los formatos mp4 y ogv en las siguientes direcciones:

• Formato mp4: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 • Formato ogg: http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv

B. CANVAS

Crear un canvas como La siguiente imagen:

C. DRAG AND DROP

Crear dos divs de 300px de ancho y 120px de alto y un borde de 1px, sólido y gris. En el primero de ellos insertar el logotipo de la Universidad de Vigo. Permitir arrastrar y soltar la imagen entre ambos divs: la imagen se elimina del div en el que estaba y se muestra en el div de destino.

D. GEOLOCALIZACIÓN

Crear una página con un botón que al pulsarlo abra un mapa de Google centrado en nuestra ubicación. Además, se mostrarán nuestras coordenadas bajo el mapa. En caso de ocurrir un error se mostrará el mensaje correspondiente (permiso denegado, no existe información de posición, tiempo de espera excedido o error desconocido).

La imagen del mapa con el enlace (atributo src de la etiqueta img), suponiendo unas coordenadas de latitud de 42.240599 y de longitud de -8.720727:

http://maps.googleapis.com/maps/api/staticmap?center=42.240599,-8.720727&zoom=14&size=400x300&sensor=false

E. WEB STORAGE: ALMACENAMIENTO LOCAL

Situar un botón en una página de forma que cuente cuantas veces hace clic en él el usuario. Si se cierra la ventana (o la pestaña) y se vuelve a abrir, la cuenta continúa desde el último valor alcanzado.

F. WEB STORAGE: ALMACENAMIENTO DE SESIÓN

Modificar el ejemplo anterior para que el valor de número de clics sólo se mantenga durante la sesión.

G. FILE

Crear una página con un control input de tipo file. Cuando se seleccione un fichero de texto con él, mostrar su contenido en la página.

H. WEB WORKERS

Crear una página con dos botones. Cuando se pulse el primero, mostrará los segundos que van transcurriendo. Cuando se pulsa el segundo, se termina de contar y se inhabilitan ambos botones.

I. OFFLINE

Escribir una página que funcione fuera de línea (se puede recargar aunque no esté en el servidor) y muestre la fecha y hora. Se dispondrá de un fichero que contenga el código javascript necesario para obtener y mostrar la fecha y hora (por medio de la clase Date) cada segundo.

J. INDEXED DB

Crear un formulario con dos campos para introducir el nombre y el email de un empleado. Añadir un botón que permita insertar estos datos (con un id autoincremental) en una base de datos (indexedDB). El formulario tendrá otro elemento de entrada donde se indicará un identificador, de modo que al hacer clic en un botón, se elimine el registro correspondiente. También se dispondrá de otros tres botones: uno que borre todos los registros, otro que muestre todos los resgistros en la base de datos y, finalmente, otro que limpie la visualización de la lista.

K. AJAX NIVEL 2

Se dispone de una página PHP (http://momentum.uvigo.es/material/javascript/intermedio.php) que recibe el nombre de un lugar (ciudad, región, país, etc.) y consulta a la Wikipedia para devolver su superficie en kilómetros cuadrados. La consulta a esta página se debe hacer por el método GET y usando "lugar" como nombre del parámetro. Por ejemplo: http://momentum.uvigo.es/material/javascript/intermedio.php?lugar=Galicia

Crear una página HTML con un botón y un campo de texto de forma que, usando Ajax de nivel 2 (XMLHttpRequest con el método GET), se conecte a la página del párrafo anterior y reciba la superficie del lugar incluido en la llamada. Una vez recibida la respuesta, se mostrará en un div situado al final de la página.

L. FORMULARIOS

Crear un formulario donde sea obligatorio introducir los siguientes campos: nombre, correo electrónico, teléfono (número), país, número de tarjeta de crédito, nombre del titular de la tarjeta. Para cada campo debe usarse el tipo de elemento de entrada más adecuado.

5. PRÁCTICA DE JQUERY

1. Crear una página y usar jQuery para las siguientes acciones:

• Crear un div con id de 200x200px y asignarle el color gris claro al fondo (usar el id del div).

• Dentro del div anterior crear un elemento span sin identificador ni clase. Sabiendo el id del div, insertar un texto dentro del elemento span.

• Clonar el span anterior y posicionarlo a continuación de él.

2. Crear una página con con tres divs y asignarles la clase target a los tres. Cambiar el color de fondo del segundo de ellos.

3. Crear una página con un div de la clase target e incluir dentro de él un botón. Dishabilitar el botón por medio de jQuery.

4. Crear una página con un div de la clase target e incluir dentro de él cinco casillas de verificación marcadas. Con una única sentencia jQuery, desmarcarlos todos.

5. Crear dos divs con ids padre1 y padre2. Crear dentro del primero un tercer div con hijo como id. Moverlo al interior del segundo div.

6. Dentro de un div con target como id, crear un campo de texto. Escribir la sentencia jQuery que haga dicho cuadro de texto de solo lectura (atributo readonly)

7. En el ejemplo anterior, sustituir el cuadro de texto por una caja de selección (elemento select option) con tres elementos. Escribir la sentencia jQuery que seleccione el segundo de ellos (atributo selected

8. En el ejemplo anterior, escribir la sentencia jQuery que duplica el tamaño del div.

9. Crear un div con target como id. Crear cuatro div en su interior. escribir la sentencia jQuery que elimina todo el contenido del primer div (target).

10. Mostrar una alerta con un segundo de retraso (steTimeout).

11. Crear un div con target como id. Crear varios div en su interior con clase hijo. Escribir la sentencia jQuery que indique cuántos elementos de clase hijo hay dentro del div target.

12. Modificar el ejercicio 8 para que el tamaño se duplique por medio de una animación.

13. Crear un div con target como id y una lista desplegable (list box) con cuatro opciones. Escribir la sentencia jQuery que cambie el fondo a gris a las opciones en posición impar.

14. Crear un div con target como id y un encabezado h2. Escribir la sentencia jQuery que convierta la etiqueta de h2 a h3.

15. Crear un div con target como id y un texto donde aparezca la palabra “gato”. Escribir la sentencia jQuery que reemplace todas a apariciones de “gato” por “perro”.

16. Crear un div con target como id y un encabezado de cada tipo, desde h1 hasta h5. Escribir la sentencia jQuery que elimine todo los contenidos del div el h2.

17. Escribir una página con varios div, donde algunos de ellos tengan elementos internos (hijos) y otros no. Escribir la sentencia jQuery que elimine los div sin hijos.

18. Modificar el ejercicio 7 escribiendo la sentencia jQuery que ordene alfabéticamente el contenido de la lista.

19. Mostrar un diálogo que pida confirmación (aceptar / confirmar). Si la respuesta es positiva, mostrar de nuevo el diálogo.

20. Crear un div con target como id y un texto dentro de él. Escribir la sentencia jQuery que incremente el contador en una unidad cada segungo.

21. Crear un div con target como id y un las palabras ”rojo”, “verde” y “azul” dentro de él. Escribir las sentencias jQuery que cambie el color de cada una de esas palabras, de acuerdo con su nombre.

22. Crear un div con target como id y tres cuadros de texto con contenido dentro de él. Escribir las sentencias jQuery que ponga en verde el borde de los cuadros que sólo contengan números y en rojo los que no.

23. Crear un div con target como id y una tabla de dos filas y dos columnas. Intercambiar ambas filas con jQuery.

24. Crear un div con target como id y una tabla de múltiples filas y tres columnas. La primera fila es de encabezado, en el resto de ellas, habrá números en las dos primeras columnas y la tercera estará vacía. Escribir el código jQuery necesario para recorrer todas las filas, guardando en la tercera columna la suma de las dos primeras.

25. Crear un div con target como id y una tabla de tres filas y tres columnas con valores numéricos. Escribir el código jQuery necesario para cambiar el color de las celdas con valor superior a 10.

26. Crear un div con target como id. Escribir el código jQuery necesario para que el color del div alterne entre dos colores cada medio segundo.

6. PRÁCTICA DE JQUERY MOBILE

Crear un sitio web como el que se muestra en las siguientes imágenes. La segunda representa la imagen de la página a la que se llega desde la primera opción de la primera página. Del mismo modo, a la tercera página mostrada, se llega desde la primera opción de la segunda. Todas las características visuales corresponden al tema “C” de jQuery Mobile.