¡A por el día 21!

---

Objetivo:
Hoy aprenderemos a capturar eventos, trabajar con formularios, modificar el DOM de forma dinámica y realizar validaciones básicas de datos, sentando las bases para crear interfaces web interactivas y seguras.

---

📚 Formación Teórica

1. ¿Qué son los eventos en JavaScript?

Los eventos son acciones que ocurren en el navegador (clics, envíos de formulario, movimientos de ratón, etc.) que podemos capturar y gestionar con JavaScript para hacer nuestras páginas dinámicas.

2. Formularios y validación

Los formularios son la principal vía de entrada de datos de usuarios. Aprenderemos a:

• Capturar envíos (submit).
• Validar campos de entrada.
• Mostrar mensajes de error de manera adecuada.

3. Manipulación avanzada del DOM

Modificaremos no solo el texto o los atributos, sino también:

• Estilos (style).
• Clases CSS (classList).
• Crear y eliminar elementos dinámicamente (createElement, remove).

---

🎥 Vídeos de hoy

• ✅ Métodos de cadenas, arrays, Math y consola en JavaScript (Desde 5:12:52 hasta 7:21:33)
• ✅ Introducción avanzada al DOM (Desde 7:42:26 hasta 8:29:46)

Instrucciones para el vídeo:
Concéntrate en:

• Cómo capturar eventos click, submit, input.
• Cómo recorrer y modificar elementos del DOM.
• Cómo añadir o quitar clases CSS dinámicamente.
• Cómo validar datos básicos en formularios.

---

🧠 Apuntes Técnicos del Día

📌 Captura de eventos

let boton = document.getElementById("miBoton");
boton.addEventListener("click", function() {
  alert("¡Botón clicado!");
});

• Usamos addEventListener para capturar eventos.
• Podemos escuchar eventos como click, submit, change, input, etc.

---

📌 Validación de formularios

let formulario = document.getElementById("formulario");

formulario.addEventListener("submit", function(event) {
  event.preventDefault(); // Evita el envío real
  let nombre = document.getElementById("nombre").value;
  if(nombre.length < 3){
    alert("El nombre debe tener al menos 3 caracteres.");
  } else {
    alert("Formulario enviado correctamente.");
  }
});

• Evitamos el envío tradicional con event.preventDefault().
• Validamos los datos antes de procesarlos.

---

📌 Manipulación avanzada del DOM

// Cambiar estilos
document.getElementById("titulo").style.color = "blue";

// Añadir y quitar clases
document.getElementById("titulo").classList.add("activo");
document.getElementById("titulo").classList.remove("activo");

// Crear y añadir elementos
let nuevoParrafo = document.createElement("p");
nuevoParrafo.innerText = "Nuevo párrafo creado dinámicamente.";
document.body.appendChild(nuevoParrafo);

• Puedes modificar el estilo de cualquier elemento directamente.
• classList permite manipular clases CSS fácilmente.
• Crear elementos de forma dinámica es fundamental para interfaces modernas.

---

🛠️ Tareas prácticas del Día 21

Tarea 1 — Capturar eventos:

• Crea un botón que, al hacer clic, cambie su propio texto a «¡Clicado!» y su color de fondo.

Tarea 2 — Crear un formulario y validar:

• Crea un formulario con un campo de nombre y un email.
• Valida:
  • Que el nombre tenga al menos 3 caracteres.
  • Que el email contenga un @ y un dominio válido.
• Muestra mensajes de error si los datos no son válidos.

Tarea 3 — Manipulación del DOM avanzada:

• Crea dinámicamente una lista (ul) con 5 elementos (li) y agrégala al body usando JavaScript.

Entrega:

• Crea un documento PDF donde adjuntes:
  • Código utilizado.
  • Capturas de pantalla del formulario validado y la manipulación de elementos del DOM.

---

🚀 Resultado esperado al finalizar el día

• Saber capturar y reaccionar a eventos del usuario.
• Validar formularios antes de enviarlos.
• Manipular el DOM de forma avanzada creando, modificando y eliminando elementos dinámicamente.

---