JavaScript · Sección 9

Eventos, formularios y almacenamiento

Propagación, delegación, formularios accesibles, validación por capas, JSON y almacenamiento local con versiones.

3: lecciones
3: ejercicios resueltos

CONTENIDO ORIGINAL

Avanza en orden. Cada lección está redactada para Palta es Cool, utiliza ejemplos propios y termina con una actividad cuya respuesta puedes desplegar.

ANTES DE EMPEZAR

Ubícate antes de avanzar

01 / PUNTO DE PARTIDA

Necesitas seleccionar y modificar elementos del DOM. Trabajarás eventos, validación y persistencia local como responsabilidades separadas.

02 / META OBSERVABLE

Al terminar deberías poder relacionar Eventos y delegación con Formularios y validación y resolver un caso nuevo.

03 / TIEMPO SUGERIDO

Reserva entre 75 y 120 minutos o divide el laboratorio en dos sesiones.

04 / PREPARA EL LABORATORIO

Utiliza un navegador con herramientas de desarrollo y una versión LTS de Node.js con npm. Angular y MongoDB se preparan cuando llegues a esos bloques.

Abrir la guía de herramientas →

Diagnóstico rápido: ¿cómo se relacionan Eventos y delegación y Formularios y validación? ＋

No necesitas acertar todavía. Escribe una hipótesis de dos líneas y compárala con tu respuesta al finalizar; si puedes corregirla y justificar el cambio, hubo aprendizaje.

Ruta guiada · 3 lecciones

Aprende el tema paso a paso

Diseñarás interacciones predecibles con propagación, formularios validados y almacenamiento local limitado.

Al terminar podrás

Un listener recibe un evento que viaja por el árbol
Valida significado, no solo presencia
localStorage guarda texto, no confianza

Eventos

Un listener recibe un evento que viaja por el árbol

addEventListener registra una función y puede retirarla con la misma referencia. Los eventos atraviesan captura, objetivo y burbujeo. La delegación escucha en un ancestro estable y usa closest para descubrir el control; funciona bien en listas dinámicas y evita listeners duplicados.

preventDefault cancela la acción predeterminada.

stopPropagation no debe usarse por reflejo.

Retira listeners de componentes con ciclo de vida.

Ejemplo cotidiano

Una lista con botones que aparecen después

El listener vive en la lista y reconoce el botón por data-accion. Los elementos nuevos funcionan sin registrar otro listener.

lista.addEventListener("click", (evento) => {
  const boton = evento.target.closest("button[data-id]");
  if (!boton || !lista.contains(boton)) return;
  eliminar(boton.dataset.id);
});

Comprueba lo aprendido · 01

¿Qué propiedad del evento permite la delegación?

Mostrar respuesta ＋

El burbujeo: el evento originado en un descendiente llega a sus ancestros, donde puede inspeccionarse target.

Formularios

Valida significado, no solo presencia

FormData recupera controles con name. La validación HTML cubre requisitos básicos, pero JavaScript debe comprobar reglas entre campos y el servidor debe validar nuevamente. El error debe explicar cómo corregir, quedar asociado al control y no borrar la entrada innecesariamente.

El evento submit cubre teclado y botón.

trim elimina espacios exteriores, no valida contenido.

Deshabilitar el envío no reemplaza la protección contra duplicados.

Ejemplo cotidiano

Una fecha final posterior a la inicial

Ambas fechas pueden ser válidas por separado y aun así violar la regla conjunta. La interfaz señala el campo y conserva los valores.

form.addEventListener("submit", (evento) => {
  evento.preventDefault();
  const datos = new FormData(form);
  const titulo = String(datos.get("titulo") ?? "").trim();
  if (!titulo) mostrarError("Escribe un título");
});

Comprueba lo aprendido · 02

¿Por qué escuchar click del botón no reemplaza submit?

Mostrar respuesta ＋

Porque un formulario puede enviarse con Enter u otros mecanismos. submit representa la acción completa del formulario.

Persistencia local

localStorage guarda texto, no confianza

localStorage persiste por origen y sus operaciones son síncronas. JSON.stringify y JSON.parse permiten guardar estructuras compatibles, pero al recuperar debes validar forma y versión. No se usa para contraseñas, tokens sensibles ni grandes volúmenes; tampoco reemplaza sincronización o respaldo.

Puede fallar por cuota o políticas del navegador.

Dos pestañas pueden cambiar el mismo dato.

Incluye versión si el formato evolucionará.

Ejemplo cotidiano

Preferencias recuperables

Tema y tamaño de texto son preferencias apropiadas. Un carrito crítico o credenciales requieren un diseño más robusto.

localStorage.setItem("preferencias", JSON.stringify({ version: 1, tema: "oscuro" }));
const crudo = localStorage.getItem("preferencias");
const preferencias = crudo ? JSON.parse(crudo) : null;

Comprueba lo aprendido · 03

¿Por qué JSON.parse debe estar protegido y seguido de validación?

Mostrar respuesta ＋

El texto puede estar corrupto, ser antiguo o haber sido modificado. Parsear solo comprueba sintaxis JSON, no que la forma cumpla tu contrato.

Resumen de la sección

Tu recorrido en tres ideas

Un listener recibe un evento que viaja por el árbol
Valida significado, no solo presencia
localStorage guarda texto, no confianza

CIERRE DE LA SECCIÓN

Comprueba que puedes usarlo

Antes de continuar, revisa estos tropiezos frecuentes y resuelve un caso sin copiar los ejemplos.

ERROR 01

Registrar listeners repetidos en cada render.

ERROR 02

Guardar secretos o datos críticos en localStorage.

DESAFÍO INTEGRADOR

Ahora hazlo sin guía

Construye un formulario de notas con validación, delegación de eventos, persistencia versionada y recuperación ante JSON corrupto.

Mostrar pauta de corrección ＋

Una respuesta sólida:

Submit funciona con teclado.
Los errores están asociados a controles.
La carga inválida usa una salida segura sin perder diagnóstico.