Cambiar una página con JavaScript

JavaScript es el lenguaje que hace que una página reaccione: filtra una lista, abre un menú o cambia de tema. Funciona porque el navegador guarda la página como un árbol de objetos, el DOM, que JavaScript puede leer y cambiar.

Piensa en la página de la cafetería. Pulsas un botón y los colores cambian, sin pedir nada al servidor. Alguien ha cambiado el árbol de la página.

Cuando el navegador lee el HTML, construye el DOM, el modelo de objetos del documento. Cada elemento es un nodo con un padre y, a veces, hijos.

JavaScript no toca el archivo HTML. Toca este árbol, que vive en la memoria del navegador. Si cambias un nodo, la página se redibuja al momento.

document.querySelector devuelve el primer elemento que cumple un selector CSS. document.querySelectorAll devuelve todos, en una lista. getElementById busca por identificador.

Para cambiar lo que el elemento muestra, se asigna a su propiedad textContent. La página se actualiza en cuanto termina esa línea.

var titulo = document.querySelector("h1");
titulo.textContent = "Menú del jueves";

var platos = document.querySelectorAll(".plato");
console.log(platos.length);

Para cambiar cómo se ve un elemento, lo más limpio es cambiar sus clases y dejar que el CSS haga el resto. classList.add pone una clase, remove la quita y toggle la pone o la quita según esté.

Un script también reacciona a lo que pasa en la página. addEventListener dice qué evento se espera y qué función se ejecuta cuando llega.

var lista = document.getElementById("lista");
lista.classList.add("oculta");
lista.classList.remove("oculta");
lista.classList.toggle("oculta");

El archivo site/app.js es el script de la página del menú. El laboratorio tiene un script que lo lee y escribe qué funciones define y qué eventos espera. Escribe en inglés: listens for es "escucha" y looks up id es "busca el identificador".

Verás dos funciones, tres oyentes y cuatro identificadores. Después, un grep muestra las dos líneas con classList: una oculta un plato y otra cambia el tema.

docker exec jupyter python3 steps/js.py

docker exec jupyter grep -n "classList" site/app.js

function toggleTheme() {
  var dark = document.body.classList.toggle("dark");
  themeButton.textContent = dark ? "Light theme" : "Dark theme";
}

themeButton.addEventListener("click", toggleTheme);