¿Qué es JavaScript?

JavaScript es el lenguaje que le da vida a la web. Si HTML es el esqueleto de una página y CSS es su ropa, JavaScript es el sistema nervioso: hace que las cosas reaccionen, se muevan y cambien sin recargar la página. En esta lección vas a entender qué es, de dónde viene, dónde se ejecuta y qué puedes construir con él.

Concepto

JavaScript (o JS) es un lenguaje de programación. A diferencia de HTML y CSS, que describen cómo se ve algo, JavaScript da instrucciones: "cuando el usuario haga clic aquí, muestra este mensaje", "si el carrito está vacío, desactiva el botón de pagar", "pide los datos del clima a un servidor y muéstralos".

Una analogía sencilla con una casa:

Tecnología	En la casa	En la web
HTML	Paredes, puertas, ventanas	Títulos, párrafos, botones, formularios
CSS	Pintura, muebles, decoración	Colores, tipografías, layouts
JavaScript	Electricidad, timbre, interruptores	Interacción, lógica, datos en tiempo real

Algunas características importantes de JavaScript:

• Es interpretado (y compilado al vuelo): no necesitas compilar nada antes de ejecutarlo. Escribes el código y el navegador lo ejecuta. Internamente, los motores modernos lo compilan "justo a tiempo" (JIT) para que sea muy rápido.
• Es dinámico: una variable puede guardar un número y luego un texto. Esto da flexibilidad, pero también puede causar errores (por eso existe TypeScript).
• Es multiparadigma: puedes programar con funciones, con objetos y clases, o mezclando estilos.
• Tiene un solo hilo con un ciclo de eventos: ejecuta una cosa a la vez, pero puede esperar respuestas (como datos de internet) sin congelar la página. Lo verás en Asincronía.

JavaScript no es Java

A pesar del nombre, JavaScript y Java no tienen nada que ver. El nombre fue una estrategia de marketing en los 90, cuando Java estaba de moda. Es como "carro" y "carrusel": se parecen en el nombre, nada más.

Historia breve

• 1995: Brendan Eich crea JavaScript en 10 días trabajando en Netscape. Primero se llamó Mocha, luego LiveScript y finalmente JavaScript.
• 1997: Para que no dependiera de una sola empresa, se estandarizó con el nombre ECMAScript a través de la organización ECMA International.
• 2005: Aparece el término AJAX: páginas como Gmail y Google Maps cargan datos sin recargar. JavaScript deja de ser "un juguete" y se toma en serio.
• 2009: Nace Node.js, que permite ejecutar JavaScript fuera del navegador (en servidores).
• 2015: Sale ES6 (ES2015), la actualización más grande: let, const, funciones flecha, clases, módulos, promesas y mucho más.
• Hoy: cada año sale una nueva versión (ES2016, ES2017... ES2025) con mejoras pequeñas y constantes.

¿Qué es ECMAScript?

ECMAScript es la especificación: el documento oficial que dice cómo debe comportarse el lenguaje. JavaScript es la implementación más famosa de esa especificación.

Piénsalo así: ECMAScript es la receta oficial del pastel y JavaScript es el pastel que hornea cada navegador siguiendo esa receta.

Por eso vas a ver nombres como:

• ES5 (2009): el JavaScript "clásico".
• ES6 / ES2015: el JavaScript "moderno". Todo lo que aprenderás en este curso parte de aquí.
• ES2020, ES2022...: añadidos como ?., ??, Array.prototype.at() y más.

Buena práctica

Aprende JavaScript moderno (ES6 en adelante). Todos los navegadores actuales lo soportan y es lo que te pedirán en cualquier trabajo. Si encuentras tutoriales que usan var para todo, probablemente son antiguos.

¿Dónde se ejecuta JavaScript?

Para ejecutar código JavaScript se necesita un motor (engine): un programa que lee tu código y lo convierte en instrucciones que la computadora entiende.

Motor	Lo usa
V8	Google Chrome, Microsoft Edge, Node.js, Deno
SpiderMonkey	Mozilla Firefox
JavaScriptCore	Safari, Bun

1. En el navegador

Es el lugar original. Cada navegador trae su motor y además te da acceso a APIs del navegador:

• El DOM: para leer y modificar el HTML de la página (lección del DOM).
• Eventos: clics, teclas, scroll (Eventos).
• fetch: para pedir datos a servidores (Fetch y APIs).
• localStorage: para guardar datos en el navegador (Storage y JSON).

2. En el servidor con Node.js

Node.js toma el motor V8 de Chrome y lo pone a funcionar en tu computadora o en un servidor. Ahí no hay DOM ni ventanas, pero sí puedes leer archivos, crear servidores web, conectarte a bases de datos, etc.

3. En muchos otros lugares

• Apps móviles: React Native, Ionic.
• Apps de escritorio: Electron (VS Code, Discord y Slack están hechos así).
• Herramientas de desarrollo: Vite, ESLint, Prettier están escritas en JS (o se usan desde él).
• Hasta en dispositivos IoT y en hojas de cálculo (Google Apps Script).

Ejemplo

Este es tu primer programa. Puedes copiarlo en un archivo index.html y abrirlo en el navegador:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primer JavaScript</title>
</head>
<body>
  <h1 id="titulo">Hola</h1>
  <button id="boton">Saludar</button>

  <script>
    // Buscamos el botón y el título en la página
    const boton = document.getElementById('boton');
    const titulo = document.getElementById('titulo');

    // Cuando alguien haga clic en el botón...
    boton.addEventListener('click', () => {
      // ...cambiamos el texto del título
      titulo.textContent = '¡Hola desde JavaScript! 👋';

      // y mostramos un mensaje en la consola (F12 para verla)
      console.log('El usuario hizo clic en Saludar');
    });
  </script>
</body>
</html>

No te preocupes si aún no entiendes cada línea. La idea es que veas el flujo: buscar un elemento → escuchar un evento → cambiar algo. Ese patrón lo vas a usar cientos de veces.

Y este es el mismo lenguaje ejecutándose en Node.js (sin navegador), en un archivo saludo.js:

// saludo.js — ejecútalo con: node saludo.js
const nombre = 'Erick';
const hora = new Date().getHours();

// Elegimos un saludo según la hora del día
const saludo = hora < 12 ? 'Buenos días' : 'Buenas tardes';

console.log(`${saludo}, ${nombre}. Esto corre en Node.js`);

node saludo.js
# Buenas tardes, Erick. Esto corre en Node.js

Casos de uso reales

¿Qué puedes construir con JavaScript? Prácticamente todo lo que ves en la web moderna:

1. Interacciones en sitios de clientes: menús hamburguesa, carruseles, acordeones de preguntas frecuentes, modales, pestañas.
2. Validación de formularios: avisar al usuario que su correo está mal escrito antes de enviarlo.
3. Tiendas en línea: carritos de compra que suman totales, filtros de productos, buscadores en tiempo real.
4. Aplicaciones web completas (SPA): como Gmail, Trello o Spotify Web, normalmente con frameworks como React, Vue o Svelte.
5. Consumir APIs: mostrar el clima, tipos de cambio, mapas, pagos con Stripe o Mercado Pago.
6. Backends y APIs propias con Node.js y Express.
7. Juegos en el navegador con Canvas o WebGL.
8. Automatizaciones: scripts que renombran archivos, envían correos o generan reportes.

En este curso construirás tres proyectos reales: una lista de tareas, un buscador con API y un carrito de compras.

Error común

Pensar que necesitas aprender un framework (React, Vue) desde el día uno. Los frameworks son JavaScript; si no dominas el lenguaje base, te vas a atorar con cada error. Primero JavaScript sólido, luego frameworks.

Qué necesitas para empezar

• Un navegador moderno (Chrome, Edge o Firefox).
• Un editor de código: te recomendamos VS Code.
• Conocimientos básicos de HTML y CSS.
• Opcional por ahora: Node.js instalado (lo usaremos más adelante en Herramientas: npm y Vite).

Buena práctica

Programa todos los días aunque sea 20 minutos. Escribir código (no sólo leerlo) es lo que realmente te hace aprender. Copia los ejemplos, rómpelos a propósito y observa qué pasa.

Ejercicios

1. Abre cualquier página web (por ejemplo, Google), presiona F12 y entra a la pestaña Console. Escribe 2 + 2 y presiona Enter. Luego escribe alert('Hola').
2. Crea un archivo index.html con el primer ejemplo de esta lección y cambia el texto del saludo por tu nombre.
3. Responde: ¿qué motor de JavaScript usa tu navegador? ¿Qué diferencia hay entre ECMAScript y JavaScript?

Ver solución

1. En la consola verás 4 como resultado y luego una ventanita con el texto "Hola". La consola es un lugar para probar JavaScript al instante.

2. Sólo cambia esta línea:

titulo.textContent = '¡Hola, soy Erick! 👋';

3. Chrome y Edge usan V8, Firefox usa SpiderMonkey y Safari usa JavaScriptCore. ECMAScript es el estándar (las reglas del lenguaje) y JavaScript es la implementación que siguen los navegadores y Node.js.

Resumen

• JavaScript es el lenguaje de programación de la web: agrega lógica e interactividad a HTML y CSS.
• Fue creado en 1995 por Brendan Eich; su estándar oficial se llama ECMAScript.
• ES6 (2015) marcó el inicio del JavaScript moderno; desde entonces hay una versión nueva cada año.
• Se ejecuta gracias a motores como V8 (Chrome, Node.js), SpiderMonkey (Firefox) y JavaScriptCore (Safari).
• Corre en el navegador, en servidores (Node.js), en apps móviles, de escritorio y más.
• Con JavaScript puedes construir desde un botón interactivo hasta aplicaciones completas.

Siguiente: Incluir JS y la consola