Desarrollo Frontend · FRO-105

JavaScript en el navegador: DOM y eventos

Selección, modificación y escucha del documento para que una página deje de ser estática.

Bajo demanda Iniciación 6 módulos · 30 clases

Formato asíncrono Alumnado, Desarrollo, Docentes FP JavaScript

DESARROLLO FP

Lo que aprenderás

Seleccionar elementos con querySelector y querySelectorAll y recorrer el resultado.
Modificar contenido, atributos y clases de un elemento sin reescribir el HTML entero.
Registrar escuchadores de eventos y aprovechar la delegación para listas dinámicas.
Leer y validar datos de un formulario antes de enviarlo, mostrando mensajes de error accesibles.
Crear, insertar y eliminar nodos del documento manteniendo el orden de lectura.
Depurar con la consola, los puntos de interrupción y el inspector de eventos del navegador.

Contenido del curso

6 módulos · 30 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · JavaScript en el navegador 5 clases

Dónde se ejecuta el código de una página
Consola del navegador como banco de pruebas
Variables, tipos y operadores
Condicionales, bucles y funciones
Incluir un script sin bloquear la carga

Módulo 2 · Datos en memoria 5 clases

Arrays y métodos de recorrido
Objetos y acceso a propiedades
map, filter y find aplicados a una lista
Plantillas de cadena para construir texto
Errores frecuentes con tipos y comparaciones

Módulo 3 · El DOM 5 clases

Qué es el DOM y cómo lo construye el navegador
querySelector y querySelectorAll
Leer y cambiar texto, atributos y clases
Crear, insertar y eliminar nodos
Recorrer padres, hijos y hermanos

Módulo 4 · Eventos 5 clases

addEventListener y el objeto evento
Clic, teclado y foco
Propagación, captura y detención
Delegación de eventos para listas dinámicas
Eventos de formulario y prevención del envío

Módulo 5 · Formularios y validación 5 clases

Leer valores de campos de todo tipo
Validación en cliente sin sustituir a la del servidor
Mensajes de error accesibles y foco correcto
Deshabilitar y habilitar controles según el estado
Guardar preferencias con almacenamiento local

Módulo 6 · Proyecto de cierre 5 clases

Enunciado: lista filtrable con formulario de alta
Estructura HTML accesible de partida
Renderizar la lista a partir de datos
Filtrado, orden y borrado con delegación
Depuración final y repaso con teclado

Requisitos

Conocer HTML a nivel de estructura y formularios.
Nociones básicas de CSS: clases y selectores.
No se necesita experiencia previa en programación.
Basta con un navegador y un editor de texto.

Descripción

Una página bien maquetada sigue siendo un documento que no responde: el menú no se abre, el formulario no avisa de un campo vacío y la lista no se filtra. Todo eso ocurre en el navegador, sobre el DOM, y se resuelve con una parte muy concreta de JavaScript que conviene aprender antes de acercarse a cualquier marco de trabajo.

El curso enseña el lenguaje justo y lo aplica de inmediato al documento. Variables, funciones, arrays y objetos aparecen al servicio de tareas reales: seleccionar elementos, cambiar clases, escuchar eventos, validar un formulario y construir listas a partir de datos. Cada bloque termina con un componente terminado y con una sesión de depuración en las herramientas del navegador.

Al acabar se puede añadir comportamiento a cualquier página propia y, sobre todo, se entiende qué hacen por dentro los marcos de trabajo cuando actualizan la interfaz. Es el paso previo lógico al curso de consumo de APIs desde el frontend y a los itinerarios de React o Vue, que dan por sabido este terreno.

¿Para quién es este curso?

Alumnado de desarrollo web que ya maqueta y quiere que sus páginas respondan a la interacción.
Profesorado de FP que necesita ejemplos autocontenidos de DOM y eventos para el aula.
Desarrolladores de otros ámbitos que deben retocar el comportamiento de una página existente.