Conectar JavaScript con HTML es el paso que transforma una página estática en una experiencia interactiva. Aquí aprenderás a enlazar tu archivo .js al HTML, entender qué es el DOM y modificar elementos en tiempo real con querySelector y textContent, usando como ejemplo el contador de tazas del proyecto Okini.
¿Por qué tu HTML y tu JavaScript no se hablan todavía?
En un proyecto real conviven dos mundos que parecen independientes. Por un lado, el HTML y el CSS de Okini definen la estructura visual: una sección con id reservas, un contador que muestra 50 tazas disponibles y un botón para reservar. Por el otro, las funciones que ya escribiste en funciones.js, como calcularPrecio y puedeReservar, contienen la lógica que toma decisiones y devuelve resultados.
El problema es que ninguno de los dos sabe que el otro existe. Tu JavaScript no conoce la página y tu página no carga el JavaScript. Construir ese puente es justo lo que vamos a hacer [02:15].
¿Cómo se enlaza un archivo JavaScript al HTML?
Antes de conectar nada, necesitas un archivo dedicado al proyecto. No uno de práctica, sino uno de producción.
¿Qué diferencia hay entre un archivo de práctica y uno de producción?
Los archivos de práctica son tu cuaderno de borrador: ahí experimentas, pruebas y rompes cosas. El archivo de producción, en cambio, es el que la página realmente usa para funcionar. Por eso creamos script.js dentro de la carpeta de Okini y movemos ahí las funciones que ya conoces, sin los console.log de prueba. El código no cambia, lo que cambia es el contexto donde vive [03:40].
¿Dónde debo colocar la etiqueta script en el HTML? Justo antes del cierre de </body>, no en el <head>. Así el navegador construye toda la página antes de ejecutar el JavaScript y evitas que el script intente manipular elementos que aún no existen.
El orden importa. Si el script corre antes de que existan los elementos del HTML, va a fallar porque intentará tocar cosas que todavía no están en pantalla [05:10].
¿Qué es el DOM y por qué JavaScript lo necesita?
Cuando el navegador lee tu HTML, no lo deja como texto plano. Lo convierte en una estructura de objetos llamada DOM, que viene de Document Object Model. Cada etiqueta HTML se transforma en un objeto que JavaScript puede leer y modificar.
Una analogía útil: el HTML es como el guion de una obra de teatro, un texto fijo escrito en un archivo. El DOM es la puesta en escena, los actores y el escenario reales. Si cambias algo en la puesta en escena, el guion no cambia. Por eso, cuando recargas la página, todo vuelve a como estaba escrito originalmente [06:30].
¿Cómo manipular el DOM con querySelector y textContent?
Para modificar un elemento desde JavaScript usamos un patrón que vas a repetir mil veces. Abre la consola del navegador con clic derecho e Inspeccionar, ve a la pestaña Consola y prueba esta instrucción:
javascript
document.querySelector("#tazas-disponibles").textContent = "45";
Desglosemos qué hace cada parte:
document es el objeto que representa toda la página.querySelector es el método que busca un elemento dentro del documento."#tazas-disponibles" es el selector, escrito con la misma sintaxis del CSS donde el numeral indica un ID.textContent es la propiedad que contiene el texto visible del elemento.
Al ejecutar esa línea, el contador cambia de 50 a 45 sin recargar la página, sin tocar el HTML y sin tocar el CSS. JavaScript entró al DOM, encontró el elemento por su ID y modificó su contenido [08:20].
¿Qué es querySelector? Es un método que busca el primer elemento del DOM que coincida con un selector CSS. Puedes buscar por id con #, por clase con . o por etiqueta directamente.
¿Por qué los cambios desaparecen al recargar la página?
Porque lo que modificas vive en memoria, no en el archivo fuente. Si recargas, el HTML original sigue diciendo 50 y el navegador reconstruye el DOM desde cero. Esto puede recordarte a cuando editaste el precio de una suscripción de Platzi directamente en el inspector y también desaparecía al recargar.
La diferencia es clave: allá editaste a mano una sola vez con el mouse. Aquí escribiste una instrucción que JavaScript puede ejecutar automáticamente cada vez que ocurra una acción del usuario. El resultado visible es idéntico, lo que cambia es la capacidad de automatización [10:05].
¿Cómo cambiar el texto de un botón con JavaScript?
El mismo patrón aplica para cualquier elemento. Si el botón tiene id boton-reservar y queremos que diga Agotado en lugar de Reservar una taza, escribimos:
javascript
document.querySelector("#boton-reservar").textContent = "Agotado";
Si pruebas con otro elemento y no funciona a la primera, revisa estos detalles:
- Que el selector tenga el numeral
# para indicar id.
- Que el id esté escrito exactamente igual al del HTML, incluyendo guiones.
- Que el archivo
script.js esté enlazado antes del cierre del body.
Cuando uses inteligencia artificial para generar código que manipula una página, vas a ver este mismo patrón una y otra vez: querySelector para encontrar, propiedades del DOM como textContent para modificar. Con este modelo mental ya puedes leer ese código y entender qué toca y qué no [12:40].
En la próxima clase haremos que el cambio no ocurra desde la consola, sino cuando el usuario haga clic en el botón. Ahí las funciones del módulo dos por fin entran en escena. ¿Ya probaste cambiar el contador en tu propia página? Cuéntame en los comentarios qué elemento modificaste primero.
