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.