JavaScript desde cero: haz interactiva tu página web

Si HTML es el contenido de una página y CSS su aspecto, JavaScript es su comportamiento: lo que pasa cuando pulsas un botón, escribes en un formulario o se cargan datos nuevos sin recargar. Es el único lenguaje de programación que entienden todos los navegadores sin instalar nada, y también se usa fuera de ellos, en servidores, con Node.js. Las herramientas de esta misma web, como el conversor de imágenes, están hechas con JavaScript que se ejecuta en tu navegador.

Probar JavaScript en la consola

Abre cualquier página, pulsa F12 y entra en la pestaña Consola. Escribe y pulsa Intro:

2 + 2
"Hola".toUpperCase()
alert("¡Funciona!")

La consola ejecuta cada línea al momento. También es donde aparecen los errores de tu código, en rojo, así que acostúmbrate a tenerla abierta mientras programas.

Añadir JavaScript a tu página

Lo recomendable es escribir el código en un archivo aparte, por ejemplo app.js, y enlazarlo al final del <head> con defer, que hace que se ejecute cuando la página ya está construida:

<script src="app.js" defer></script>

Variables, funciones y decisiones

La lógica es la misma que en cualquier lenguaje (repásala en variables, condiciones y bucles); solo cambia la forma de escribirla:

const iva = 21;          // const: no se va a reasignar
let total = 0;           // let: puede cambiar

function conIva(precio) {
  return precio * (1 + iva / 100);
}

const precios = [10, 25, 4.5];
for (const p of precios) {
  total += conIva(p);
}

if (total > 40) {
  console.log("Envío gratis");
} else {
  console.log(`Te faltan ${(40 - total).toFixed(2)} € para el envío gratis`);
}

Usa const por defecto y let cuando la variable tenga que cambiar. Verás código antiguo con var, pero hoy no hace falta.

El DOM: cambiar la página desde el código

El navegador convierte tu HTML en un árbol de objetos llamado DOM, y JavaScript puede leerlo y modificarlo. Con este HTML:

<button id="saludar">Saludar</button>
<p id="mensaje"></p>

Este código reacciona al clic:

const boton = document.querySelector("#saludar");
const mensaje = document.querySelector("#mensaje");
let veces = 0;

boton.addEventListener("click", () => {
  veces++;
  mensaje.textContent = `Has pulsado ${veces} veces`;
});

• querySelector busca un elemento con la misma sintaxis que los selectores de CSS (#id, .clase, p).
• addEventListener ejecuta una función cuando ocurre un evento: click, input (al escribir), submit (al enviar un formulario), keydown…
• textContent cambia el texto. Para meter texto que escribe el usuario usa siempre textContent y no innerHTML: así el navegador no interpreta como código lo que alguien escriba, un error de seguridad muy común.

Errores típicos

• Cannot read properties of null: querySelector no encontró el elemento. Revisa el selector o que el script tenga defer.
• x is not defined: has escrito mal un nombre (JavaScript distingue mayúsculas: Total y total son variables distintas).
• El código no hace nada y no hay errores: comprueba en la pestaña Red de F12 que app.js se está cargando.
• "5" + 1 da "51": igual que en Python, sumar texto y número concatena. Convierte con Number().

Siguientes pasos

Cuando domines los eventos y el DOM, aprende a pedir datos a otros servicios con APIs y JSON. La guía de JavaScript de MDN, en español, es la referencia para todo lo demás.