INFOTEP Técnico en Programación de Páginas Web: JavaScript: sintaxis, DOM, eventos y asincronía

El examen evalúa JavaScript del navegador: declaración de variables y alcance, manipulación del DOM, modelo de eventos y manejo de operaciones asíncronas con promesas, async/await y fetch. También aparecen preguntas de depuración: qué se ejecuta antes y por qué.

Sintaxis y alcance

• const impide reasignar la referencia; let permite reasignar y tiene alcance de bloque; var tiene alcance de función y se eleva. Prefiere const por defecto.
• === compara sin conversión de tipo; == aplica coerción y produce resultados sorprendentes. El examen suele marcar == como error.
• Una función declarada se eleva; una expresión asignada a const no se puede usar antes de la línea de asignación.
• this depende de cómo se invoca la función; una función flecha captura el this léxico.

DOM y eventos

• Selección con querySelector y querySelectorAll; modificación con textContent para texto y classList para clases. innerHTML con datos externos abre la puerta a XSS.
• Los eventos burbujean desde el objetivo hasta ancestros. La delegación coloca un listener en un contenedor y usa event.target.closest(selector).
• preventDefault() cancela la acción nativa; stopPropagation() detiene el burbujeo. No son intercambiables.

Asincronía

El event loop ejecuta la pila síncrona, luego microtareas (promesas) y después macrotareas (setTimeout). fetch devuelve una promesa que resuelve con la respuesta aunque el estado sea 404; hay que revisar response.ok. async/await permite escribir código secuencial y capturar fallos con try/catch.

Ejemplo trabajado

Una lista de estudiantes carga datos con async function cargar(){try{const r=await fetch('/api/estudiantes');if(!r.ok)throw new Error('HTTP '+r.status);const datos=await r.json();lista.innerHTML='';datos.forEach(e=>{const li=document.createElement('li');li.textContent=e.nombre;lista.append(li);});}catch(err){console.error(err);}}. Razonamiento: se espera la respuesta, se comprueba ok, se espera el JSON, se limpia la lista y se crea cada nodo con textContent para evitar inyección. Sin await en r.json() se trabajaría con una promesa.

Errores que cuestan puntos

Usar ==; confiar en fetch y no comprobar ok; olvidar await; creer que setTimeout(...,0) corre antes que una promesa; usar innerHTML con nombres de usuario; manipular el DOM antes de DOMContentLoaded; confundir preventDefault con stopPropagation.