8 min JavaScript

¿Qué es JavaScript?

Ya sabes construir la estructura de una web con HTML. Le diste estilo con CSS. En la sección de Lógica de Programación aprendiste a pensar como un programador: variables, condicionales, bucles, funciones y estructuras de datos — todo en pseudocódigo, sin depender de ningún lenguaje. La landing de Café Estelar tiene buena pinta y Vinyl Paradise tiene personalidad. Pero hay un problema: son páginas estáticas. No reaccionan. No responden. Es como tener un escaparate bonito donde no puedes entrar ni tocar nada.

JavaScript es el lenguaje que hace que la web esté viva. Cada vez que un menú se despliega, un formulario valida tus datos antes de enviar, un carrito de compras se actualiza sin recargar la página, o una notificación aparece en tiempo real — eso es JavaScript. Es el tercer pilar del desarrollo web, y el más poderoso.

¿Qué es JavaScript exactamente?

JavaScript es un lenguaje de programación que el navegador entiende de forma nativa. No necesitas instalar nada, no necesitas compilar nada. Escribes código, el navegador lo ejecuta. Así de directo.

A diferencia de HTML (que describe estructura) y CSS (que describe apariencia), JavaScript describe comportamiento. Le dice a la página qué hacer cuando pasan cosas: cuando el usuario hace clic, cuando se carga la página, cuando pasa el tiempo, cuando llegan datos del servidor.

HTML: "Aquí hay un botón."
CSS: "El botón es azul, redondeado y con sombra."
JavaScript: "Cuando el usuario haga clic en el botón, añade el producto al carrito y muestra una animación."

¿Dónde se ejecuta JavaScript?

Originalmente, JavaScript solo funcionaba en el navegador. Pero en 2009 apareció Node.js, que permite ejecutar JavaScript fuera del navegador: en servidores, herramientas de terminal, aplicaciones de escritorio, incluso robots.

En este curso nos centramos en JavaScript en el navegador, que es donde vas a usarlo el 90% del tiempo como desarrollador web. Pero es bueno que sepas que el mismo lenguaje sirve para el backend también.

Cómo añadir JavaScript a tu HTML

Igual que con CSS, hay varias formas. Te las enseño todas para que sepas reconocerlas, pero solo una es la correcta para proyectos reales.

1. JavaScript inline (evitar)

Directamente en un atributo del HTML:

<!-- ❌ No hagas esto -->
<button onclick="alert('Has añadido el producto')">Comprar</button>

El problema es el mismo que con CSS inline: mezclas comportamiento con estructura. Imposible de mantener cuando tu proyecto crece.

2. JavaScript interno (para pruebas rápidas)

Dentro de una etiqueta <script> en tu HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página con JS</title>
</head>
<body>
    <h1>Hola JavaScript</h1>

    <script>
        console.log("JavaScript está funcionando");
    </script>
</body>
</html>

Útil para experimentar, pero en proyectos reales quieres separar tu código JavaScript del HTML.

3. JavaScript externo (la forma correcta)

Un archivo .js separado, enlazado con <script src>:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Café Estelar — Ahora con JavaScript</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Café Estelar</h1>
    <p id="saludo"></p>

    <script src="app.js"></script>
</body>
</html>

console.log("JavaScript cargado correctamente");

Fíjate que el <script> va justo antes de cerrar el </body>. ¿Por qué? Porque el navegador lee el HTML de arriba a abajo. Si pones el script en el <head>, se ejecutará antes de que existan los elementos del <body> y no podrás interactuar con ellos. Ponerlo al final es la forma más simple de evitar ese problema.

Tu primera herramienta: la consola del navegador

Pulsa F12 (o Cmd+Option+I en Mac) y ve a la pestaña Console. Esta es tu mejor amiga para aprender JavaScript. Puedes escribir código directamente ahí y se ejecuta al instante.

Prueba escribir esto directamente en la consola:

2 + 2

La consola te devuelve 4. Acabas de ejecutar JavaScript. Prueba más:

"Hola" + " " + "mundo"
// → "Hola mundo"

Math.random()
// → Un número aleatorio entre 0 y 1

Date.now()
// → Milisegundos desde el 1 de enero de 1970

La consola es un sandbox donde puedes experimentar sin miedo. Si algo falla, recargas la página y como nuevo. Úsala constantemente mientras aprendes.

console.log: tu herramienta de depuración

console.log() escribe mensajes en la consola del navegador. Es la forma principal de ver qué está pasando en tu código:

console.log("Esto aparece en la consola del navegador");
console.log(42);
console.log("El resultado es:", 10 + 5);

No lo confundas con alert(). El alert muestra una ventana emergente al usuario (y es bastante molesto). El console.log escribe en la consola de DevTools, que solo tú como desarrollador ves:

// ✅ Para depurar: usa console.log
console.log("Valor recibido:", 100);

// ⚠️ Para el usuario: alert funciona pero es intrusivo
alert("¡Bienvenido a Café Estelar!");

// ✅ Mejor que alert para el usuario: modificar el HTML (lo veremos pronto)
document.querySelector("#saludo").textContent = "¡Bienvenido a Café Estelar!";

También tienes variantes útiles:

console.warn("Cuidado: el descuento no puede ser negativo");
console.error("Error: no se encontró el producto");
console.table(["Espresso", "Latte", "Cappuccino"]);

console.warn() muestra un aviso amarillo, console.error() muestra un error rojo, y console.table() muestra datos en formato tabla. Todos aparecen en la consola de DevTools.

Tu primer programa real

Vamos a hacer algo útil: un script que saluda al usuario según la hora del día. Si es por la mañana dice "Buenos días", por la tarde "Buenas tardes" y por la noche "Buenas noches".

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Café Estelar — Saludo dinámico</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Café Estelar</h1>
        <p id="saludo"></p>
    </header>

    <main>
        <section>
            <h2>Nuestro menú de hoy</h2>
            <ul>
                <li>Espresso Galáctico — 2,50 €</li>
                <li>Latte de Nebulosa — 3,80 €</li>
                <li>Cappuccino Interestelar — 3,50 €</li>
            </ul>
        </section>
    </main>

    <script src="app.js"></script>
</body>
</html>

// Obtener la hora actual (0-23)
const horaActual = new Date().getHours();

// Decidir el saludo según la hora
let saludo;

if (horaActual < 12) {
    saludo = "☀️ Buenos días, bienvenido a Café Estelar";
} else if (horaActual < 20) {
    saludo = "🌤️ Buenas tardes, bienvenido a Café Estelar";
} else {
    saludo = "🌙 Buenas noches, bienvenido a Café Estelar";
}

// Mostrar el saludo en la página
const elementoSaludo = document.querySelector("#saludo");
elementoSaludo.textContent = saludo;

// También lo mostramos en la consola para depurar
console.log("Hora actual:", horaActual);
console.log("Saludo:", saludo);

Abre esta página en el navegador. Verás un saludo que cambia según la hora real de tu ordenador. Eso es JavaScript haciendo su trabajo: tomando datos (la hora), tomando una decisión (qué saludo usar) y modificando la página (cambiando el texto del párrafo).

Vamos a desglosar lo que acaba de pasar:

new Date().getHours() — obtiene la hora actual del sistema (un número del 0 al 23).
const y let — son formas de crear variables (las verás en detalle en la siguiente lección).
if / else if / else — estructura para tomar decisiones según una condición.
document.querySelector("#saludo") — busca un elemento del HTML con el id "saludo".
.textContent = saludo — cambia el texto de ese elemento.

No te preocupes si no entiendes cada línea todavía. En las siguientes lecciones vamos a cubrir variables, condiciones y manipulación del DOM en profundidad. Lo importante ahora es que entiendas el flujo: JavaScript lee datos, toma decisiones y modifica la página.

JavaScript modifica el HTML en vivo

Una de las cosas más potentes de JavaScript es que puede cambiar el HTML y el CSS de la página después de que se haya cargado. Prueba esto en la consola:

// Cambiar el texto de un elemento
document.querySelector("h1").textContent = "Café Estelar 2.0";

// Cambiar el estilo de un elemento
document.querySelector("h1").style.color = "#F7DF1E";

// Añadir un nuevo elemento
const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este párrafo no existía en el HTML original";
document.querySelector("main").appendChild(nuevoParrafo);

Ejecuta esas tres líneas una por una en la consola y mira cómo la página cambia en tiempo real. El HTML original no se modifica en tu archivo — JavaScript lo modifica en la memoria del navegador. Si recargas la página, vuelve al estado original.

Errores: no les tengas miedo

Cuando algo falla en JavaScript, la consola te muestra un error en rojo. Prueba esto:

// Esto va a fallar
console.log(variableQueNoExiste);
// → ReferenceError: variableQueNoExiste is not defined

El error te dice exactamente qué pasó y en qué línea. Los errores no son tu enemigo — son tu GPS. Te dicen dónde estás equivocándote. Aprender a leer errores es una de las habilidades más importantes de un programador.

Los errores más comunes que vas a ver al principio:

ReferenceError: usaste una variable que no existe.
SyntaxError: escribiste algo que JavaScript no entiende (falta una comilla, un paréntesis, etc.).
TypeError: intentaste hacer algo con un tipo de dato incorrecto (como llamar a una función que no existe).

Comentarios en JavaScript

Los comentarios son notas para ti (o para tu equipo). El navegador los ignora completamente:

// Esto es un comentario de una línea

/*
   Esto es un comentario
   de varias líneas.
   Útil para explicar bloques de código.
*/

const precio = 3.50; // También puedes comentar al final de una línea

Usa comentarios para explicar el por qué, no el qué. Si tu código necesita un comentario para explicar qué hace, probablemente deberías reescribirlo para que sea más claro.

// ❌ Comentario inútil: describe lo obvio
const precio = 3.50; // Asigna 3.50 a precio

// ✅ Comentario útil: explica el por qué
const precio = 3.50; // IVA incluido según normativa UE 2025

Resumen

En esta lección has aprendido:

JavaScript es el lenguaje que da comportamiento a las páginas web.
Se ejecuta en el navegador (y también en servidores con Node.js).
Se añade con <script src="archivo.js"> antes del cierre de </body>.
La consola del navegador (F12) es tu herramienta principal para aprender y depurar.
console.log() muestra información en la consola.
JavaScript puede leer datos, tomar decisiones y modificar la página en tiempo real.

En la siguiente lección vamos a profundizar en las variables y tipos de datos — la base para almacenar y trabajar con información en JavaScript.

Crea una página HTML con un archivo JavaScript externo que haga lo siguiente:

Muestra un saludo personalizado basado en la hora del día (mañana/tarde/noche) dentro de un elemento de la página (no con alert).
Muestra la hora actual en formato "Son las HH:MM" en otro elemento de la página.
Cambia el color de fondo del body según la hora: un tono cálido por la mañana (como #FFF8E7), neutro por la tarde (#F0F0F0) y oscuro por la noche (#1a1a2e).
Escribe en la consola un resumen: "Hora: X, Saludo: Y, Tema: Z".

Bonus: haz que el color del texto también cambie para que sea legible sobre cada fondo.

Pistas

Para obtener los minutos usa new Date().getMinutes(). Si el número es menor que 10, necesitarás añadir un "0" delante para que se vea bien (por ejemplo "09" en vez de "9"). Puedes hacerlo con: String(minutos).padStart(2, "0"). Para cambiar el fondo usa document.body.style.backgroundColor.

Anterior Ejercicio final

Siguiente Variables y tipos