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.