Ejercicios Unidad 5
EJERCICIO: u5e1_formulario
Prepara un formulario diseñado para almacenar los discos con los que trabajamos en el ejercicio u4e4_discos. Recuerda qué elementos se almacenaban, y elije el componente de formulario más adecuado:
- Nombre del disco.
- Grupo de música o cantante.
- Año de publicación.
- Tipo de música (podrá ser “rock”, “pop”, “punk” o “indie”);
- Localización: almacenará un número de estantería.
- Prestado: almacenará un valor booleano. Por defecto será false.
EJERCICIO: u5e2_parejas
Vas a crear un juego que consiste en encontrar parejas en 12 cartas con 6 parejas de los personajes de los Simpson. El juego consistirá en lo siguiente:
- La aplicación deberá tener una tabla con 3 filas y cuatro columnas de un color. Además habrá un cuadro de texto con el valor 0 pero no modificable.
- Cuando el usuario haga clic sobre una celda, se mostrará una imagen.
- Cuando el usuario haga clic sobre otra celda, se mostrará otra imagen.
- Si las dos imágenes son iguales, se cambiará el color de la celda y se añadirá 1 al cuadro de texto.
- Si las dos imágenes son diferentes, se ocultarán mostrando nuevamente el color inicial.
En primer lugar, crea un esquema en una hoja con el arbol DOM del documento html y en otra indica los métodos que vas a crear asociados a qué evento.
Trata de utilizar el menor número de variables posibles: utiliza las propiedades de los elementos para cambiar su comportamiento.
EJERCICIO: u5e3_formulario2
A partir del formulario creado en la actividad 1, realiza las funciones necesarias para validarlo teniendo en cuenta:
- Nombre del disco: 20 caracteres, obligatorio.
- Grupo de música o cantante: 20 caracteres, obligatorio.
- Año de publicación: 4 caracteres numéricos.
- Tipo de música (podrá ser “rock”, “pop”, “punk” o “indie”): sin comprobación.
- Localización: almacenará un número de estantería: vacío o numérico.
- Prestado: sin comprobación.
Tendrás que tener en cuenta, además:
- Que utilizarás un método window.onload.
- Que la validación se asignará al formulario mediante un AddEventListener.
- Que los campos nombre del disco y grupo de música se validarán en la misma función (campo20).
Ampliación:
- Modifica las funciones de tal manera que, en caso de que se produzca un error en la validación, el campo implicado tenga el reborde rojo, y la etiqueta que lo acompaña también aparezca de color rojo.
- Para ello deberás crear las clases css necesarias (puedes incluirlas en el propio html si lo deseas) para que se visualice correctamente.
- Ten en cuenta que si el usuario mete correctamente el nombre, deberá volver a su color habitual.
EJERCICIO: u5e4_expresionesregulares
Walter White y Jesse Pinkman tienen que controlar las bolsas de producto azul que cocinan para distribuir en Alburquerque. Para ello tienen que crear un formulario que almacene la información de cada bolsa y validarlo teniendo en cuenta lo siguiente:
- Fecha de creación: obligatorio y con formato dd/mm/aaaa.
- Cocinero: será un nombre en clave formado por dos letras en mayúscula, un símbolo y cuatro dígitos (ej. WW$1234)
- Destinatario: estará formado por dos o tres letras mayúsculas correspondientes al estado, un guión bajo, el nombre de la ciudad en minúsculas, dos puntos, y el código de distrito de 4 digitos (ej. NM_alburquerque:1234).
- Gramos: será un número del 100 al 5000.
- Composición: estará formado por una cantidad en gramos seguida de dos conjuntos de una o dos letras seguidas o no de un número. (ej. 200gC3OH7)
- Número de cuenta de EEUU: supongamos que un número de cuenta estadounidense tiene el siguiente formato:
- Dos letras: suponemos que el valor de cada letra es del 1 al 26 (no hay ñ ni ll).
- Dos dígitos: debe corresponderse con la suma de la primera letra y la segunda: en caso de que sea menor que 10 se pone el 0 delante.
- Un guión.
- Doce dígitos de cuenta.
- Un guión.
- Dos dígitos de control: los dos primeros deben ser la suma de los 6 primeros dígitos de la cuenta dividido entre 6 y extrayendo solamente su parte entera; y los dos últimos exactamente igual, pero con los 6 siguientes.
- Si el número está correcto se colocará en un campo de texto al lado del anterior, pero sin guiones: solamente los números y las letras.
EJERCICIO: u5e5_cookies:
- Crea un fichero que se llame “cookies.js” y que permita trabajar con las cookies de manera que puedas crear, borrar y consultar una cookie. Consulta los métodos tratados en clase y recuerda que el método borrar no ha sido creado aún así que deberás crearlo tú mismo.
- Modifica el archivo anterior u5e4_expresionesregulares de la siguiente manera:
- Cada vez que el usuario trate de enviar el formulario y haya algún error, una variable contador (almacenada en una cookie) se incrementará.
- El resultado del número de intentos se reflejará en un campo de texto que se encontrará al final del formulario.
- Si el usuario sale del programa y vuelve a entrar, el campo de texto mostrará el número almacenado en la cookie.
- Junto al campo de texto habrá un botón que, al pulsarlo, permitirá reiniciar el valor de la cookie a 0.