Cuando abres un sitio web pasan varias cosas invisibles: la página carga, detecta tu cursor, responde a un clic. Aprender a manipular esos momentos con JavaScript empieza por entender el DOM (Document Object Model), la estructura interna que el navegador usa para que puedas tocar el HTML desde código.
Esta guía es para quien empieza con JavaScript y quiere conectar HTML con interactividad real, sin saltarse los fundamentos.
Qué es el DOM y por qué importa en JavaScript
El DOM es la forma en la que el navegador organiza por dentro las etiquetas HTML para que puedas manipularlas con JavaScript. Sin él, tu código no podría leer ni modificar lo que aparece en pantalla.
Dentro del navegador hay dos objetos clave que conviene separar desde el inicio.
Cuál es la diferencia entre window y document
Cada pestaña abierta de tu navegador es un window. Ahí vive la barra de direcciones y los eventos que afectan a la pestaña completa, como cargar una página o cambiar el tamaño de la ventana.
Dentro de ese window vive el document, que es todo lo que está dentro de la etiqueta HTML: títulos, párrafos, botones y cualquier elemento visible.
¿Qué es el DOM? Es la representación en objetos del HTML de tu página. JavaScript lo usa para leer y modificar etiquetas, atributos y contenido en tiempo real.
Cómo funcionan los eventos del navegador
Un evento es algo que ocurre en el navegador y que tu código puede detectar. Hay muchísimos, pero los más comunes son fáciles de identificar:
- click: cuando el usuario presiona un botón o elemento.
- load: cuando la página termina de cargar.
- resize: cuando cambias el tamaño de la ventana.
- mouseover: cuando el cursor pasa encima de un elemento.
Esos sitios web que reorganizan su diseño cuando los achicas o estiras funcionan gracias a una función conectada al evento resize [02:00].
Qué es un event listener y para qué sirve
Un event listener, o escuchador de eventos, es una función que el navegador deja en espera hasta que ocurra el evento que le indicaste. Cuando el evento sucede, la función se dispara.
La lógica es directa: tú le dices a JavaScript "cuando le den clic a este botón, ejecuta esta función". El navegador queda atento, y en el momento exacto del clic, invoca el código.
¿Qué hace un event listener en JavaScript? Espera a que ocurra un evento específico (como un clic) sobre un elemento y, cuando sucede, ejecuta la función que le asignaste.
Cómo crear el scaffolding de un proyecto web
Para practicar, conviene partir de cero con un proyecto nuevo. En la clase se construye un juego inspirado en piedra, papel o tijera, pero con monstruos de fuego, agua y tierra, llamado Moquepón [04:30].
El primer paso es crear una carpeta nueva con ese nombre y, dentro, un archivo moquepon.html. Ese archivo arranca con la misma estructura básica de cualquier proyecto: etiquetas de apertura y cierre de HTML, una sección head y un body.
A esa estructura repetitiva que aparece en casi todo proyecto se le llama scaffolding o andamio [05:30]. Son las piezas comunes que sostienen el código antes de que agregues lo específico.
Cómo agregar un botón con buenas prácticas en HTML
Dentro del body va un h1 con el título del juego y unos emojis de fuego, agua y una planta para representar a los monstruos. Hasta ahí, contenido visible normal.
El detalle importante viene con el botón. No basta con escribir una etiqueta button suelta: lo correcto es envolverla en un contenedor, en este caso un párrafo con la etiqueta p. Esa práctica mejora la semántica del HTML y la accesibilidad.
- Crea la carpeta del proyecto.
- Genera el archivo HTML con su estructura mínima.
- Añade un h1 con el nombre y emojis temáticos.
- Inserta un button dentro de un párrafo contenedor.
- Ábrelo en el navegador para verificar que carga.
Con el botón ya en pantalla, tienes la estructura mínima para empezar a disparar eventos desde JavaScript y conectar la interfaz con la lógica del juego.
El trabajo real en programación se hace en equipo, con personas que piensan distinto a ti, y eso suma. Cuéntame en los comentarios qué evento te gustaría conectar primero a tu botón.
