Resumen y siguientes pasos
Esta página no añade sintaxis nueva. Pone el curso entero en un pedido: bebida tea, tamaño regular. La línea que debes poder explicar es tea / regular.
De dónde salió esa línea
La página de accesibilidad la escribió con un botón real button type=button. Mouse, Enter y Space ejecutan el mismo clic. aria-live="polite" habla después de la frase actual. Si falta size, button.disabled es true y el botón se queda. El foco se queda en el botón.
Dos líneas anteriores
En la depuración se leyó order.cup sobre { drink: "tea", size: "regular" }. El objeto tiene size, no cup. console.error no lanza, así que el script sigue. Esa línea fue fixed / tea / regular.
throw new Error("missing size") detiene label antes de return. catch lee error.message, que es missing size. error.name es Error. finally corre de las dos maneras. Esa línea fue caught / missing size.
Siete filas, un mismo pedido
Cada fila es un trozo del mismo pedido. Abre la sesión correspondiente solo si el resultado se siente flojo.
📊 Qué hace el curso con un pedido
| Grupo | Puedes | Un resultado |
|---|---|---|
| Valores y flujo | guardar, elegir con if y recorrer una lista | tea / regular |
| Funciones | recibir el pedido y devolver una línea | tea / regular |
| Objetos y arrays | leer el campo, leer JSON y copiar | { drink: "tea", size: "regular" } |
| La página | encontrar el botón y escribir la línea | tea / regular |
| Espera | pausar una función async; fetch da una Response | response.ok y luego response.json() |
| Sintaxis más nueva | sacar nombres, armar el texto y construir la clase | tea / regular |
| Cuidado | leer la propiedad real, lanzar a propósito y conservar el botón | fixed / tea / regular, luego caught / missing size, luego tea / regular |
El mapa es un recordatorio. No es un segundo curso y no tiene preguntas.
Valores y decisiones
Guardas tea y regular, los comparas y repites. if elige. break sale de un bucle. continue salta un elemento y sigue.
Funciones
Una función devuelve tea / regular. Una función flecha es una función más corta. Un closure sigue viendo el enlace después de que la función exterior regresa.
Objetos, JSON y arrays
JSON.parse convierte el texto en un objeto. map construye un array nuevo. find devuelve una coincidencia. spread copia. rest reúne lo que no nombraste. La copia es superficial.
La página
querySelector encuentra el botón. textContent escribe la línea. setTimeout corre más tarde y no sustituye al botón.
La espera
await pausa solo esa función async. El resto de la página sigue. Una función async siempre devuelve una Promise. fetch se resuelve en una Response, no en un cuerpo ya leído. response.json() devuelve otra Promise. Un HTTP 404 normalmente no rechaza fetch. Revisa response.ok. Un fallo de red puede rechazar.
Sintaxis más nueva
La desestructuración saca drink y size por nombre. Un objeto anidado que falta puede lanzar. Las plantillas rellenan ${...} en tiempo de ejecución. Los módulos no están en window y se cargan por HTTP. Una clase hija llama a super antes de this. Un campo privado se queda dentro de la clase.
Cuando el pedido está mal
Lee size, no una propiedad que no está. console.error no lanza y la línea siguiente sigue. throw detiene la función y solo catch continúa. Pon la acción en un botón. Deja visible el contorno del foco.
Qué sigue
La página siguiente es una lista de tareas corta: añadir, marcar como hecho y quitar. Sigue en el camino central.
Después, opcional: strict mode, Map y Set, expresiones regulares, web storage, cookies y herencia de clases. No hacen falta para terminar el camino central.
Di estas cinco líneas en voz alta
- El botón escribe tea / regular y aria-live="polite" habla después de la frase actual
- console.error no lanza; la línea de depuración fue fixed / tea / regular
- throw new Error("missing size") detiene label antes de return; catch lee missing size; esa línea fue caught / missing size
- fetch se resuelve en una Response; revisa response.ok antes de response.json()
- La página siguiente es la lista de tareas