UD3 · Guía y taller práctico
JavaScript: el lenguaje
La tercera capa de la web empieza por el lenguaje. Antes de tocar la página aprendemos a razonar con datos, decisiones, funciones y estructuras, porque un botón que no funciona casi nunca es un problema del botón: es un problema de lógica que todavía no sabes leer.
Antes de empezar
- Necesitas
- El sitio de la UD1 y la UD2, con su HTML validado y su hoja de estilos.
- Visual Studio Code.
- Un navegador moderno con DevTools y su consola.
- Un servidor local sencillo, porque los módulos ES no funcionan abriendo el fichero directamente.
- Debes saber
- Escribir HTML semántico válido y enlazar recursos con rutas relativas (UD1).
- Enlazar una hoja de estilos y diagnosticar por qué un recurso no carga (UD2).
- Abrir DevTools y moverse entre sus pestañas (UD1 y UD2).
¿Qué vas a aprender?
Tu sitio ya dice lo que las cosas son, y ya se presenta bien en cualquier pantalla. Lo que todavía no hace es decidir.
En las dos primeras unidades escribiste documentos. Un documento describe algo: esto es un título, esto es una tabla, esto es un formulario. Un documento no puede comprobar si un correo es válido, filtrar un catálogo por precio, recordar lo que elegiste ni pedir datos a otro servidor.
Para eso hace falta un lenguaje de programación, y en la web ese lenguaje es JavaScript.
- HTML · qué existe
- CSS · cómo se presenta
- JavaScript · qué ocurre
Por qué esta unidad casi no toca la página
Cuando alguien empieza con JavaScript, la tentación es ir directamente a lo vistoso: que este botón abra ese menú. El resultado funciona hasta el día en que deja de funcionar. Entonces aparece la escena de siempre: se mira el botón, se cambia el nombre de la clase, se prueba otro evento, se copia otro fragmento, y sigue sin funcionar.
El problema casi nunca está en el botón.
Un fallo de interfaz suele ser un fallo de lógica disfrazado
Si un filtro no filtra, casi siempre es porque la comparación estaba mal, porque el valor era texto y no número, o porque la función devolvía undefined. Nada de eso se ve mirando el HTML.
Por eso esta unidad se dedica al lenguaje: datos, decisiones, funciones y estructuras. Cuando en la UD4 conectemos todo con la página, sabrás distinguir «el evento no salta» de «el evento salta, pero mi función está mal».
La idea que gobierna la unidad
Predecir antes de ejecutar
Durante seis semanas, antes de ejecutar vas a escribir qué esperas que salga. Cuando aciertes, has entendido. Cuando falles, acabas de encontrar el punto exacto en el que tu modelo mental no coincide con el lenguaje, que es lo único que de verdad se aprende.
- Escribo código
- Ejecuto a ver qué pasa
- No es eso
- Cambio algo al azar
- Escribo código
- Predigo el resultado
- Ejecuto
- Comparo
- Explico la diferencia
El proyecto continúa
Seguimos con el mismo sitio. Le añadimos una carpeta:
mi-web/
│
├── index.html
├── productos.html
├── acerca.html
├── contacto.html
│
├── css/
│ └── styles.css
│
├── js/ ← nuevo
│ ├── datos.js
│ ├── catalogo.js
│ └── main.js
│
└── img/
└── ...El entregable de la unidad no es una página interactiva: eso llega en la UD4. Es un módulo de catálogo que funciona por sí solo y que se comprueba desde la consola.
Un fichero datos.js con el catálogo de tu tema, un fichero catalogo.js con las funciones que lo consultan —buscar, filtrar, ordenar, resumir— y un main.js que las usa y escribe el resultado en la consola. Sin tocar el documento.
Condición 1 · nada de librerías
Ni jQuery, ni Lodash, ni utilidades descargadas. Todo lo que necesitas está en el lenguaje. Usar una librería ahora te ahorraría escribir diez líneas y te costaría entender qué hacen esas diez líneas.
Condición 2 · la IA, para entender, no para entregar
- Antes de preguntar: escribe qué esperabas que ocurriera y qué ocurre en realidad, con el valor concreto que ves en consola.
- Pregunta: pide una explicación o una pista, no la función terminada. Ejemplo: «Mi filtro por precio devuelve el array entero. He comprobado que el valor llega como texto. Explícame qué debería revisar sin darme el código».
- Después: cierra la respuesta y resuelve una variante distinta sin volver a preguntar.
La prueba es la de siempre: si no puedes cambiar una decisión pequeña de tu propia solución —invertir el orden, añadir un criterio, tratar el caso vacío— todavía no controlas lo que has entregado.
Herramientas
La herramienta central de esta unidad es una que ya conoces, usada de otra manera:
La consola de DevTools
En la UD2 la abrías para inspeccionar estilos. Ahora es donde vive tu programa: escribes expresiones y te responde, imprimes valores, lees errores y detienes la ejecución para mirar dentro.
Además usaremos dos cosas de VS Code que ya estaban ahí: el subrayado de errores, porque JavaScript avisa de mucho antes de ejecutar nada, y el depurador, para poner puntos de interrupción sin salir del editor.
No todo pesa lo mismo
try/catch.
Map y Set, encadenamiento opcional, Intl y funciones de orden superior propias.
Si vas justo de tiempo, prioriza lo esencial. Un reduce elegante no compensa no saber por qué "3" + 1 vale "31".
Plan de trabajo semanal
| Semana | Bloque temático | Práctica central | Horas |
|---|---|---|---|
| Semana 1 | Datos, tipos y expresiones | Consola, variables, conversión y comparaciones | 3 h |
| Semana 2 | Decisiones y repeticiones | Condicionales, bucles y programas con reglas | 3 h |
| Semana 3 | Funciones y depuración | Descomponer un problema y depurar con criterio | 3 h |
| Semana 4 | Arrays y objetos | El catálogo en memoria y sus consultas | 3 h |
| Semana 5 | Organizar y proteger el código | Módulos, errores y validación | 3 h |
| Semana 6 | Integración y entrega | Reto acumulativo, refactorización y revisión por pares | 3 h |
| Total | Un módulo de catálogo en JavaScript puro | 18 h |
Cada sesión dura una hora y mantiene el ritmo de las unidades anteriores:
- Recupera · 5 min
- Aprende y predice · 10–20 min
- Practica · 30–40 min
- Cierra · 5 min
El reparto real del tiempo es este:
| En qué se va la unidad | Horas |
|---|---|
| Explicación y predicción de resultados | 4–5 h |
| Ejercicios guiados | 7–8 h |
| Proyecto incremental | 3–4 h |
| Depuración y revisión por pares | 2 h |
Sesiones de la unidad
Cada sesión es una clase, con su propia página.
18 sesiones
Semana 1 · Datos, tipos y expresiones
Semana 2 · Decisiones y repeticiones
Semana 3 · Funciones y depuración
Semana 4 · Arrays y objetos
Semana 5 · Organizar y proteger el código
Semana 6 · Integración y entrega