JavaScript es el lenguaje de programación de la web: todos los navegadores lo entienden sin instalar nada. Con él las páginas responden (menús, filtros, juegos, animaciones, visualizaciones de datos). Primero lo usarás para aprender a programar; después, para que tus páginas reaccionen a lo que hace el usuario (lección Eventos).

📌 Nota. JavaScript no tiene nada que ver con Java, aunque se llamen parecido. Su nombre oficial como estándar es ECMAScript; cada año sale una versión nueva (ES2024, ES2025…). Aprenderás la sintaxis moderna.

Abre las DevTools (F12 o Ctrl + Mayús + J; en Mac, Cmd + Opción + J) y ve a la pestaña Consola. Escribe esto y pulsa Intro:

console.log("Hola, soy un programa");
2 + 3 * 4

• console.log(...) escribe en la consola lo que le pases. Será tu forma principal de ver qué está pasando dentro de un programa.
• Si escribes una expresión suelta (2 + 3 * 4), la consola muestra su resultado (14).
• Con la flecha ↑ recuperas lo último que escribiste.

La consola sirve para probar ideas pequeñas. Para programas completos, el código va en un fichero.

El código se enlaza desde el HTML con la etiqueta <script>. Lo habitual es guardarlo en un fichero aparte, igual que el CSS:

cartel-generativo/
├── index.html
├── css/
│   └── estilos.css
└── js/
    └── main.js

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primer programa</title>
  <link rel="stylesheet" href="css/estilos.css">
  <script src="js/main.js" defer></script>
</head>
<body>
  <h1>Paletas</h1>
</body>
</html>

El atributo defer hace que el script se ejecute cuando el HTML ya se ha leído entero; así el código puede usar cualquier elemento de la página. Es la forma recomendada de cargar tus scripts.

// js/main.js
console.log("El script se ha cargado");

Abre index.html en el navegador y mira la consola: ahí aparece el mensaje.

• Cada instrucción termina en punto y coma ;. JavaScript a veces lo pone por ti, pero escríbelo siempre: evita errores raros.
• JavaScript distingue mayúsculas y minúsculas: color y Color son cosas distintas.
• Los comentarios no se ejecutan: // una línea y /* varias líneas */. Úsalos para explicar el porqué, no el qué.
• Los bloques se delimitan con llaves { } y se sangran dos espacios.
• Los textos van entre comillas: "hola", 'hola' o ` hola `.

Cuando algo falla, la consola muestra un mensaje en rojo. Léelo entero: dice qué pasó y en qué línea (a la derecha, main.js:7). Los tres que más verás:

💡 Consejo. Método para depurar: 1) lee el error y ve a la línea; 2) añade console.log() antes y después para ver el valor de las variables; 3) cambia una sola cosa y vuelve a probar. En la pestaña Fuentes puedes además poner un punto de interrupción (clic en el número de línea) y ejecutar el programa paso a paso.

Mientras aprendes, puedes usar dos funciones del navegador muy sencillas:

const nombre = prompt("¿Cómo te llamas?");   // pide un texto en una ventana
alert("Hola, " + nombre);                      // muestra un aviso

Son útiles para practicar, pero bloquean la página y no se pueden personalizar: en proyectos reales se usan formularios y el DOM (lección El DOM).

• Escribir el <script> sin defer en el <head>: el código se ejecuta antes de que exista el HTML.
• Rutas mal escritas en src (mira la pestaña Red: un 404 significa que no encuentra el fichero).
• No abrir la consola: los errores están ahí aunque la página "parezca" funcionar.
• Copiar comillas tipográficas (“ ”) desde un documento de texto: el código necesita comillas rectas (" ").