¡Perfecto! Antes de comenzar, asegúrate de tener todo listo:

1️⃣ Descargar y preparar el entorno
- Extrae el contenido del zip en una carpeta y ábrelo en tu editor de código favorito (VS Code, Sublime Text, etc.). - Estructura bien los archivos para facilitar su acceso.

2️⃣ Configuración de PHP
- Verifica que tienes un servidor PHP en funcionamiento. Puedes usar herramientas como XAMPP, WAMP o configurar PHP directamente en tu máquina. - Asegúrate de que el archivo posts.php está correctamente accesible para recibir peticiones AJAX.

3️⃣ Cronometrar el tiempo
- Antes de empezar, dale al reloj y mide cuánto tardas en completar cada ejercicio. - Puedes llevar un registro de mejoras en velocidad y eficiencia a medida que practicas.

Examen

1. Ajax DOM

Dispones de un archivo HTML denominado listado.html que se encarga de mostrar al usuario una serie de posts almacenados en una base de datos. El archivo PHP encargado de realizar la consulta es posts.php, el cual devuelve un JSON con la información. A continuación, se detalla lo que has de implementar en visualizar.js:

1. Petición AJAX:
   Cuando se haga clic en el botón con id solicitar, se deberá enviar una petición AJAX utilizando el objeto XMLHttpRequest de tipo GET a posts.php, pasándole la variable numero con el valor que el usuario haya introducido en el input con id numero.

2. Indicador de carga:
   Mientras se procesa la petición, el div con id posts mostrará la imagen loading.gif y, debajo, un párrafo con el texto:
   "Cargando usuarios…"

3. Visualización de la respuesta:
   Una vez recuperada la respuesta en formato JSON, se mostrará en el div con id posts el contenido completo de cada post, incluyendo los campos userId, id, title y body, con la siguiente estructura HTML:

   <article class="post" id="id">
       <h2>title</h2>
       <p>body</p>
       <p>Usuario: userId</p>
   </article>

   Ejemplo:
   Para el siguiente post:

   {"userId":1, "id":1, "title":"provident", "body":"quia et suscipit suscipit"}

   El HTML generado debe ser:

   <article class="post" id="1">
       <h2>provident</h2>
       <p>quia et suscipit suscipit</p>
       <p>Usuario: 1</p>
   </article>

2. Validación de Formularios

Utilizando JavaScript (sin tener en cuenta validaciones nativas del navegador o HTML), se deben implementar las siguientes validaciones basado en el formulario facilitado:

• Campos vacíos:
  Ningún campo podrá estar vacío (esto incluye aceptar las condiciones, seleccionar rama, especialidad y horas de programación).

• Nombre de usuario:
  Solo podrá contener minúsculas y números.

• Contraseña:
  El campo contraseña deberá tener más de 8 caracteres y, al menos, contener:

  • Una letra mayúscula
    
  • Una letra minúscula
    
  • Un número
    
  • Un carácter especial
    (Cada restricción se puede validar de manera independiente).

• DNI:

  • Debe tener el formato NNNNNNNN-L (donde N representa un dígito y L una letra mayúscula).
    
  • Si el usuario introduce el DNI sin guion, el sistema lo insertará automáticamente.
    
  • La letra del DNI será validada usando la función validaDNI, la cual deberás completar.

• Fecha de nacimiento:
  Debe ser válida y, además, el usuario debe ser mayor de edad.

Eventos en el Formulario

• La validación se ejecutará una vez que la página se haya cargado y se intente enviar el formulario o se pierda el foco en alguno de sus campos.
• Antes de enviar o borrar el formulario, se pedirá confirmación al usuario.
• Para cada error de validación, se mostrará debajo del campo el motivo del error. Para ello, dispones de un <td> con id infoX (donde X es el id del campo en cuestión).
  En caso de un error general, se utilizará un <p> con id mensajeError.
• Si existe un error de validación, el campo afectado se resaltará aplicándole la clase error.
• Una vez corregido, el mensaje de error deberá eliminarse y el campo dejará de estar resaltado.

3. Ejercicios

3.1. Cadenas de Texto (Carpeta: cadena)

Dispone de un array de cadenas de texto con el siguiente formato:

Usuarios = [
  "Manolo$Lama Sánchez$999000000$lama@cope.es$28200$04/03/1969",
  "Manu$Carreño López$666000000$carreno@ser.es$12001$04/12/1975",
  "Maria Teresa$Molina Fernández$666000000$mteresa@extra.es$12001$21/08/1982"
];

Se pide:

• Extracción de datos:
  Recorrer el array y extraer cada campo, almacenándolo en variables individuales:
  nombre, apellido1, apellido2, teléfono, email, cp y fecha_nacimiento.

• Creación del nombre de usuario:
  Generar un nombre de usuario (todo en minúsculas) que se componga de:

  • La primera letra del nombre.
    
  • Las tres últimas letras del primer apellido.
    
  • El número de letras del nombre y de los apellidos (sin contar espacios).
    Imprimir el resultado por consola.

• Generación de clave de usuario:
  Crear una clave de usuario que consista en:

  • El primer nombre en mayúsculas (en nombres compuestos, únicamente se tomará el primer nombre).
    
  • Un número aleatorio de 4 dígitos.
    Mostrar el resultado por consola.

• Función de validación de la fecha de nacimiento:
  Escribir una función que reciba la fecha de nacimiento de un usuario como objeto Date y devuelva true en caso de que el usuario sea mayor de edad y cumpla años en lunes durante el presente año.
  Utiliza la función y muestra su resultado por consola.

3.2. Quiniela (Carpeta: quiniela)

El ejercicio se compone de dos partes:

1. Plantilla HTML para la Quiniela:
   Generar una tabla que incluya:

   • Encabezado:
     Una fila con una celda en blanco, seguida de las columnas: 1, X y 2.

   • Encuentros:
     14 filas, cada una correspondiente a un encuentro (del 1 al 14), con un checkbox para marcar la opción deseada (1, X o 2).

   • Pleno al 15:
     Una fila adicional para el “Pleno al 15”, también con las opciones de marcar 1, X o 2.

2. Generación de combinación aleatoria de resultados:

   • Crear un array asociativo que contenga, para cada encuentro (del 1 al 14) y para el “Pleno al 15”, un resultado aleatorio (valor: 1, X o 2).
     Las claves del array serán "Encuentro N" (para N = 1 a 14) y "Pleno al 15".
   • Utilizar un bucle for in para recorrer este array y generar una tabla que muestre el resultado obtenido.
     Se recomienda el uso de un checkbox con el atributo checked para marcar el resultado en la tabla.

puedes ver las respuestas