Cómo conectar JavaScript al HTML con el DOM

Contenido del curso

Descubrir que ya puedes dirigir máquinas

El vocabulario para pensar computacionalmente

La anatomía de una página

Hacer que la página reaccione

El terreno donde vive tu código

Publicar en el mundo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:38

Cómo conectar JavaScript al HTML con el DOM

Curso Gratis de Programación Básica

Clase 17 de 27

Clase 17 / 27

Recursos

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.

Andres Camilo Bernal Segura

Hace 18 días

Codigo completo para los cambios que no se observan en la clase:

index.html:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ookini</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Ookini</h1>
        <h2>Café de especialidad</h2>
        <nav>
            <a href="#nosotros">Nosotros</a>
            <a href="#metodos">Metodos</a>
            <a href="#contacto">Contacto</a>
            <a href="#reservas">Reservas</a>
        </nav>
    </header>
    <main>
        <section id="nosotros">
            <p>Ookini significa gracias en Kansai, la región de Japón donde están Kioto y Osaka, y donde nació el método
                Kyoto drip que prepararemos en barra. Es una palabra muy común y se dice rápido, una forma de agradecer
                que no necesita ceremonia. Nos quedamos con ella porque resume algo de cómo entendemos este oficio: el
                café es un acto de gratitud hacia quien cultivó el grano, hacia quien lo tostó, y hacia quien se sienta
                a tomarlo sin prisa. Servimos café de especialidad preparado con métodos lentos, granos seleccionados de
                productores que conocemos por nombre, y la atención que cada taza merece. Nada se hace de prisa, y nada
                se hace en piloto automático.</p>
        </section>
        <section id="metodos">
            <h2>Métodos de preparación</h2>

            <h3 class="metodo-titulo">V60</h3>
            <p>Filtrado por goteo con molienda media. El agua cae despacio sobre el café durante tres minutos y arrastra
                notas limpias y brillantes. Es el método más versátil de la barra y el mejor para descubrir la
                personalidad de un grano nuevo.<span class="precio">$5</span></p>
            <h3 class="metodo-titulo">Kyoto drip</h3>
            <p>Extracción en frío gota a gota durante ocho horas. Molienda media gruesa, agua a temperatura ambiente,
                paciencia japonesa. El resultado es un café denso, dulce y con muy poca acidez. Lo dejamos preparándose
                desde la noche anterior.<span class="precio">$7</span></p>
            <h3 class="metodo-titulo">Siphon japones</h3>
            <p>Método de vacío con molienda media fina. El agua sube por presión, se mezcla con el café durante un
                minuto, y baja filtrada cuando se apaga la llama. Tarda cuatro minutos en total y produce una taza
                limpia y aromática.<span class="precio">$8</span></p>
            <h3 class="metodo-titulo">Prensa francesa</h3>
            <p>Inmersión total con molienda gruesa durante cuatro minutos. Sin filtro de papel, los aceites del café
                pasan a la taza y construyen un cuerpo redondo y robusto. Es nuestro único método sin reserva, listo
                apenas lo pides.<span class="precio">$3</span></p>
        </section>
        <section id="reservas">
            <p>Tazas disponibles hoy: <span id="contador-tazas">50</span></p>
            <button id="boton-reservar">Reservar una taza</button>
        </section>
    </main>
    <footer id="contacto">
        <img src="ookini-barra.png" alt="Barra de Ookini, cafe de especialidad" width="250">
        <p>Abierto todos los dias, de 8 a.m. a 8 p.m.</p>
    </footer>
    <script src="script.js"></script>
</body>

</html>

styles.css:

body {
    background-color: #F2F0EA;
    font-family: Georgia, serif;
    color: #1A1A1A;
}
h1 {
    color: #589B8E;
    font-size: 2.5rem;
}
header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #1A1A1A;
}
nav a {
    color: #589B8E;
}
main {
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}
.metodo-titulo{
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: #589B8E;
}
.precio{
    font-weight: bold;
    color: #589B8E;
}
#reservas {
    /* No encontre explicitamente su configuracion de esta clase, asi que saque lo que pude y lo alinee con el contador-tazas y con lo que pude observar */
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#contador-tazas {
    font-size: 1.5rem;
    font-weight: bold;
    color: #589B8E;
}
#boton-reservar {
    display: block;
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    background-color: #5B9B8E;
    color: #F2F0EA;
    border: none;
    font-family: Georgia, serif;
    font-size: 1rem;
    cursor: pointer;
}

script.js:

function calcularPrecio(precioUnitario, cantidad){
    const total = precioUnitario * cantidad;
    return total;
}
function puedeReservar(cantidad){
    return cantidad <= 2;
}

Comentarios (15)15 comentarios

Mateo Osorio

Hace 4 meses

Martín Vélez

Hace 4 meses•editado

Kenneth Angulo L

Hace 2 meses

Joel Dominguez Merino

Hace 5 meses

Yaritza Jazmin Sanchez Rosa

Ruben Galindo

Andres Felipe Cogollo Hincapie

Hace 3 meses

Gilberto Barrón López

Sebastián Sánchez Guadir

Hace un mes

YARETH OSAEL GARAY ALVARADO

Hace 15 días

Steven Aguilera

Hace 17 días

Maria Rubi Hurtado Morales

Deyoces Ricardez

Andrés Soret Chacin

Descubrir que ya puedes dirigir máquinas

Construye tu primer sitio web con HTML, CSS y JS

Tres ideas que usan todos los lenguajes

Tu primera página web desde el bloc de notas

Cómo la IA te entrevista para crear tu web

Por qué programar importa más con IA

El vocabulario para pensar computacionalmente

Instala VS Code y Node para tu primer proyecto

const vs let en JavaScript: cuándo usar cada uno

Tipos de datos en JavaScript explicados

Cómo el if/else decide qué hace tu código

Bucles for of para recorrer listas en JS

Qué son las funciones en JavaScript

La anatomía de una página

HTML desde cero en VS Code con Live Server

Etiquetas semánticas que organizan tu HTML

Cómo darle estilo visual a tu página con CSS

Box model de CSS explicado con dev tools

Hacer que la página reaccione

Cómo funciona una petición web

Cómo conectar JavaScript al HTML con el DOM

addEventListener en JavaScript para botones

Las Devtools, tu mejor amigo para solucionar Bugs

Cómo depurar código que genera la IA

El terreno donde vive tu código

Cliente vs servidor: quién hace qué en la web

Dónde viven los datos de tu app

Qué es una API y cómo funciona

Publicar en el mundo

Qué es Git y cómo versionar tu proyecto

Cómo subir tu repositorio local a GitHub

Publica tu sitio web con Vercel y GitHub

De 2+2 a un sitio web publicado

Cómo conectar JavaScript al HTML con el DOM