Conectar JavaScript con HTML es el paso que transforma una página estática en una experiencia interactiva. Aquí aprendes a unir ambos mundos en tu proyecto Okini, usando un archivo script.js y manipulando el DOM con querySelector para que tu página reaccione en tiempo real.
Por qué necesitas un archivo script.js en tu proyecto
Hasta este punto, tu proyecto vive en dos mundos paralelos que no se conocen. Por un lado, el HTML y el CSS de Okini ya tienen estructura y estilos, incluyendo un contador que muestra 50 tazas disponibles y un botón para reservar [02:00]. Por otro lado, en funciones.js viven las funciones calcularPrecio y puedeReservar que escribiste antes, código que razona y devuelve resultados.
El problema: tu JavaScript no sabe que existe la página, y tu página no sabe que existe el JavaScript.
El primer paso es crear un archivo nuevo dentro de la carpeta de Okini llamado script.js. Este ya no es un archivo de práctica como los del módulo dos, sino el archivo de producción del proyecto [02:50]. La diferencia importa: los archivos de práctica son tu cuaderno borrador, mientras que aquí va a vivir el código real que la página utilizará para funcionar.
Dentro de script.js pegas las dos funciones que ya conoces, sin los console.log de prueba. El código no cambió, solo cambió el contexto donde vive.
¿Para qué sirve script.js en un proyecto web? Es el archivo donde vive el código JavaScript que tu página usa para funcionar. Separa el comportamiento del contenido (HTML) y los estilos (CSS).
Cómo enlazar tu archivo JavaScript al HTML
Un archivo .js no se conecta solo. Tienes que enlazarlo de manera explícita, parecido a como enlazas el CSS con la etiqueta link, pero con su propia sintaxis.
En tu index.html agregas esta línea antes del cierre del body:
html
<script src="script.js"></script>
Va al final del body y no en el head, y esto es intencional. Quieres que el navegador lea y construya toda la página antes de ejecutar el JavaScript [04:20]. Si el script corre antes de que existan los elementos HTML, va a intentar manipular cosas que todavía no están ahí y va a fallar. El orden importa.
Qué es el DOM y por qué JavaScript lo necesita
Para que JavaScript pueda modificar algo de la página necesita el DOM. Cuando el navegador lee tu HTML no lo deja como texto, lo convierte en una estructura de objetos que JavaScript puede leer y modificar. Cada etiqueta HTML se vuelve un objeto, y al conjunto de esos objetos se le llama DOM, de Document Object Model [05:10].
Una analogía útil: el HTML es como el guion de una obra, texto fijo escrito en un archivo. Cuando el navegador lo lee, construye la puesta en escena, y a esa puesta en escena se le llama el DOM. Si cambias algo en escena, el guion no cambia. Por eso, cuando recargas la página, los elementos vuelven a su estado original.
¿Qué es el DOM en JavaScript? Es el modelo de objetos que el navegador construye a partir de tu HTML. Cada etiqueta se vuelve un objeto que JavaScript puede leer, modificar o eliminar.
Cómo usar querySelector para encontrar elementos
La instrucción que vas a ver una y otra vez para manipular el DOM es document.querySelector. Aquí, document es el objeto que representa toda la página, y querySelector es el método que busca un elemento dentro de ella usando el mismo lenguaje de selectores que ya conoces de CSS.
Desde la consola del navegador puedes probar:
javascript
document.querySelector("#tazas-disponibles")
El numeral significa que estás buscando por id. Al ejecutar, el navegador te devuelve el elemento completo, el objeto que representa ese span en el DOM [06:40]. Y como es un objeto, tiene propiedades que puedes leer y modificar.
La propiedad textContent contiene el texto visible del elemento. Si la lees, te devuelve 50. Y si la cambias:
javascript
document.querySelector("#tazas-disponibles").textContent = "45"
La página cambia al instante: ahora dice 45 tazas disponibles, sin recargar, sin tocar el HTML, sin tocar el CSS [07:30]. Eso es lo que hace que la web sea interactiva.
Por qué los cambios en el DOM no son permanentes
Una advertencia importante: estos cambios viven solo en memoria. Si recargas la página, el contador vuelve a 50, porque el HTML original sigue diciendo 50. Lo que modificas es el DOM en memoria, no el archivo fuente.
Quizá te recuerda a cuando, en las primeras clases, cambiaste el precio de una suscripción directamente desde el inspector del navegador y también desaparecía al recargar. La diferencia es clave: allá editaste a mano una sola vez con el mouse. Aquí estás escribiendo una instrucción que JavaScript puede ejecutar automáticamente cada vez que algo ocurra, sin que tengas que intervenir [08:40].
Ese mismo patrón lo aplicas al botón con id boton-reservar:
javascript
document.querySelector("#boton-reservar").textContent = "Agotado"
El botón pasa de decir Reservar una taza a Agotado al instante.
Errores comunes al manipular el DOM
Si probaste con otro elemento y no te funcionó a la primera, revisa estos puntos:
- El selector debe llevar el numeral
# cuando buscas por id.
- El id debe estar escrito exactamente igual al del HTML, incluyendo guiones.
- Las mayúsculas y minúsculas cuentan.
Cuando la inteligencia artificial te genere código que manipula una página, va a usar este mismo patrón: querySelector, textContent y otras propiedades del DOM. Ahora puedes leer ese código y entender qué toca y qué no toca.
En la próxima clase, ese cambio dejará de ocurrir desde la consola y empezará a dispararse cuando el usuario haga clic en el botón. ¿Qué elemento de tu propio proyecto te gustaría modificar primero con querySelector? Cuéntalo en los comentarios.
