Módulo 00: Introducción
Objetivos del módulo
- Entender qué es JavaScript y qué no es (no tiene nada que ver con Java)
- Conocer todo lo que puedes construir con JavaScript: web, servidores, apps móviles y de escritorio, IoT
- Recorrer la historia del lenguaje, desde 1995 hasta ECMAScript 2026
- Distinguir entre ECMAScript (el estándar) y JavaScript (el lenguaje que usas)
- Saber cómo evoluciona el lenguaje: el comité TC39 y sus stages (etapas)
- Conocer los motores (V8, SpiderMonkey, JavaScriptCore) y los entornos (navegador, Node.js, Deno, Bun)
- Comprender las características del lenguaje: interpretado con JIT, dinámico, multiparadigma y de un solo hilo con event loop
- Situar JavaScript junto a HTML y CSS
- Leer tu primer programa en JavaScript y entender cada línea
1. ¿Qué es JavaScript?
JavaScript (abreviado JS) es un lenguaje de programación creado para dar vida a las páginas web. Con HTML defines el contenido de una página y con CSS su aspecto, pero es JavaScript el que hace que la página reaccione: que un botón haga algo al pulsarlo, que un formulario te avise de que el correo está mal escrito antes de enviarlo, que aparezcan nuevos mensajes sin recargar la página o que un mapa se desplace al arrastrarlo con el ratón.
📘 Concepto: Un lenguaje de programación es un idioma con reglas muy estrictas que sirve para dar instrucciones a un ordenador. Tú escribes esas instrucciones en un fichero de texto (el código fuente) y un programa especial las lee y las ejecuta paso a paso.
Hoy JavaScript es mucho más que “el lenguaje del navegador”. Es el único lenguaje que entienden de forma nativa todos los navegadores del mundo, y además se usa en servidores, aplicaciones de escritorio, móviles y hasta en pequeños dispositivos electrónicos. Durante más de una década ha aparecido en lo más alto de las encuestas de lenguajes más utilizados por los desarrolladores.
JavaScript NO es Java
Es la confusión número uno de cualquier principiante, así que la aclaramos cuanto antes: JavaScript y Java son lenguajes completamente distintos. Se parecen tanto como “coche” y “cochinilla”: comparten las primeras letras y poco más.
| Aspecto | JavaScript | Java |
|---|---|---|
| Creador | Brendan Eich (Netscape), 1995 | James Gosling (Sun Microsystems), 1995 |
| Dónde se ejecuta | Navegadores, Node.js, Deno, Bun… | Máquina virtual de Java (JVM) |
| Tipado | Dinámico (las variables no declaran tipo) | Estático (cada variable tiene un tipo fijo) |
| Compilación | Se distribuye como código fuente y el motor lo compila al vuelo | Se compila antes a bytecode (.class) |
| Orientación a objetos | Basada en prototipos (con sintaxis class desde 2015) | Basada en clases |
| Uso principal | Web (cliente y servidor) | Aplicaciones empresariales, Android, backend |
📘 Concepto: ¿Por qué se llama entonces “JavaScript”? Por puro marketing. En 1995 Java estaba de moda y Netscape firmó un acuerdo con Sun Microsystems. Cambiar el nombre del lenguaje de “LiveScript” a “JavaScript” lo hacía sonar como el “hermano pequeño” de Java. La marca “JavaScript” pertenece hoy a Oracle (que compró Sun en 2010), y por eso el estándar oficial tiene otro nombre: ECMAScript.
Lo que JavaScript tampoco es
- No es un lenguaje “de juguete”: aunque nació para pequeños scripts, hoy con él se construyen aplicaciones gigantescas como Gmail, Google Docs, Figma o el propio Visual Studio Code.
- No es solo para el navegador: gracias a Node.js y otros entornos se ejecuta en servidores y en tu propio ordenador.
- No es lo mismo que TypeScript: TypeScript es un lenguaje creado por Microsoft que añade tipos a JavaScript y se convierte (transpila) a JavaScript. Lo verás en el módulo 21.
- No es un framework: React, Angular, Vue o Svelte son herramientas escritas en JavaScript. Primero aprendes el lenguaje (este curso) y después cualquier framework te resultará mucho más fácil.
2. ¿Para qué sirve JavaScript?
📘 Concepto: Piensa en JavaScript como un idioma que se habla en muchos países. Nació en “el navegador”, pero ha emigrado a servidores, móviles, ordenadores de escritorio y electrodomésticos. Si lo dominas, puedes trabajar en todos esos “países” sin aprender un idioma nuevo.
2.1 Páginas web interactivas (el frontend)
Es su uso original y sigue siendo el más importante. Todo lo que “se mueve” en una web es JavaScript:
- Menús desplegables, ventanas modales, carruseles de imágenes
- Validación de formularios en tiempo real
- Cargar datos de un servidor sin recargar la página (lo que se llamó AJAX y hoy se hace con
fetch) - Aplicaciones completas en el navegador (las llamadas SPA, Single Page Applications): correo web, hojas de cálculo, editores de diseño, juegos
2.2 Servidores y APIs (el backend)
Con Node.js (y más recientemente Deno y Bun) JavaScript se ejecuta fuera del navegador. Eso permite escribir servidores web, APIs REST, herramientas de línea de comandos, scripts de automatización… Muchas empresas usan JavaScript tanto en el cliente como en el servidor, lo que se conoce como desarrollo full stack con un único lenguaje.
2.3 Aplicaciones móviles
Frameworks como React Native o Ionic permiten crear aplicaciones para Android e iOS escribiendo JavaScript (o TypeScript).
2.4 Aplicaciones de escritorio
Electron empaqueta un navegador y Node.js para crear programas de escritorio para Windows, macOS y Linux. Visual Studio Code, Slack o Discord están hechos así. Tauri es una alternativa más ligera que usa la vista web del propio sistema operativo.
2.5 Internet de las cosas (IoT) y más
Proyectos como Espruino ejecutan JavaScript directamente en microcontroladores, Johnny-Five controla placas Arduino desde Node.js y Node-RED permite conectar sensores y servicios con flujos visuales. JavaScript también se usa para programar extensiones de navegador, bots, funciones en la nube (serverless) e incluso para automatizar hojas de cálculo (Google Apps Script).
| Ámbito | Herramientas típicas |
|---|---|
| Frontend web | JavaScript del navegador, React, Vue, Angular, Svelte |
| Backend | Node.js, Deno, Bun, Express, Fastify, Hono |
| Móvil | React Native, Ionic, Capacitor |
| Escritorio | Electron, Tauri |
| IoT | Espruino, Johnny-Five, Node-RED |
| Herramientas | Vite, ESLint, Prettier, npm (todas escritas en JS o para JS) |
💡 Consejo: No te agobies con esta lista de nombres. En este curso aprenderás JavaScript puro (a veces llamado vanilla JavaScript), que es la base común de todas esas herramientas.
3. Historia de JavaScript
Conocer la historia explica muchas de las “rarezas” que verás en el curso: algunas decisiones se tomaron con prisa en 1995 y no se pueden cambiar sin romper millones de páginas web.
3.1 El nacimiento: diez días de 1995
En mayo de 1995, Brendan Eich, programador de Netscape Communications, recibió el encargo de crear un lenguaje sencillo para el navegador Netscape Navigator, el más usado en aquella época. Debía ser fácil para diseñadores y aficionados, y “parecerse a Java” por motivos comerciales.
Eich escribió el primer prototipo en unos diez días. El lenguaje se llamó primero Mocha, después LiveScript y, en diciembre de 1995, JavaScript. Llegó al público con Netscape Navigator 2.0 a comienzos de 1996.
📘 Concepto: Eich tomó ideas de varios lenguajes: la sintaxis con llaves y punto y coma de Java y C, las funciones como valores de Scheme y los prototipos de Self. Esa mezcla explica por qué JavaScript es tan flexible… y a veces tan sorprendente.
3.2 La guerra de los navegadores
Microsoft respondió en 1996 con JScript, su propia versión del lenguaje para Internet Explorer 3. Cada navegador añadía funciones propias y una misma página podía funcionar en uno y fallar en otro. Los desarrolladores tenían que escribir código distinto para cada navegador. Esta época se conoce como la primera guerra de los navegadores.
Para poner orden, Netscape entregó el lenguaje a Ecma International, una organización de estándares. En junio de 1997 se publicó la primera edición del estándar ECMA-262, al que se llamó ECMAScript.
3.3 De ES1 a ES5: estándares y un fracaso
| Año | Versión | Qué supuso |
|---|---|---|
| 1997 | ES1 | Primera versión del estándar |
| 1998 | ES2 | Cambios editoriales para alinearse con la norma ISO |
| 1999 | ES3 | Expresiones regulares, try/catch, mejor manejo de cadenas. Fue la base del JavaScript durante una década |
| 2008 | ES4 (abandonada) | Proyecto demasiado ambicioso (clases, tipos, módulos…). Hubo tanto desacuerdo que se canceló |
| 2009 | ES5 | Modo estricto ("use strict"), JSON, métodos de array (forEach, map, filter, reduce), Object.create, getters y setters |
| 2011 | ES5.1 | Revisión menor para alinearse con ISO |
Mientras tanto, la web cambiaba. En 2004 llegó Gmail y en 2005 Google Maps: aplicaciones que cargaban datos sin recargar la página. A esa técnica se la bautizó como AJAX. En 2006 apareció jQuery, una biblioteca que simplificaba el trabajo con distintos navegadores y que dominó la web durante años.
En 2008 Google lanzó el navegador Chrome con su motor V8, muchísimo más rápido que los anteriores. Y en 2009 Ryan Dahl usó V8 para crear Node.js, que sacó JavaScript del navegador y lo llevó al servidor.
3.4 ES2015 (ES6): la gran actualización
En junio de 2015 se publicó ECMAScript 2015, conocido popularmente como ES6. Es la actualización más grande de la historia del lenguaje y marca la frontera entre el “JavaScript antiguo” y el JavaScript moderno que aprenderás en este curso:
letyconstpara declarar variables- Funciones flecha (arrow functions)
=> - Clases (
class,extends) - Módulos (
import/export) - Promesas (
Promise) - Plantillas de texto (template literals) con comillas invertidas
- Desestructuración, parámetros por defecto, operadores rest y spread
Map,Set,Symbol, iteradores y generadores, buclefor...of
3.5 Versiones anuales: de ES2016 a ES2026
Tras ES2015, TC39 decidió publicar una versión nueva cada año, más pequeña, con las propuestas que estén listas. Así el lenguaje evoluciona poco a poco y sin esperar diez años. Desde entonces las versiones se nombran por el año (ES2016, ES2017…), aunque mucha gente sigue diciendo “ES7”, “ES8”…
| Versión | Novedades clave |
|---|---|
| ES2015 (ES6) | let/const, arrow functions, clases, módulos, promesas, template literals, desestructuración, Map/Set, Symbol |
| ES2016 | Operador de potencia **, Array.prototype.includes |
| ES2017 | async/await, Object.values/Object.entries, padStart/padEnd |
| ES2018 | Rest/spread en objetos, for await...of, Promise.prototype.finally, grupos con nombre en RegExp |
| ES2019 | flat/flatMap, Object.fromEntries, trimStart/trimEnd, catch sin variable |
| ES2020 | BigInt, ?? (nullish coalescing), ?. (encadenamiento opcional), Promise.allSettled, globalThis, import() dinámico |
| ES2021 | replaceAll, Promise.any, asignación lógica (&&=, \|\|=, ??=), separadores numéricos 1_000_000 |
| ES2022 | Campos y métodos privados #, bloques static {}, at(), Object.hasOwn, cause en errores, await de nivel superior |
| ES2023 | toSorted, toReversed, toSpliced, with, findLast, findLastIndex |
| ES2024 | Object.groupBy/Map.groupBy, Promise.withResolvers, flag v en RegExp, isWellFormed/toWellFormed |
| ES2025 | Iterator helpers, métodos de Set (union, intersection…), Promise.try, RegExp.escape, módulos JSON con import ... with { type: 'json' }, Float16Array |
| ES2026 | Array.fromAsync, Error.isError, Math.sumPrecise, base64/hex en Uint8Array, Iterator.concat, texto fuente en JSON.parse, Map.prototype.getOrInsert/getOrInsertComputed |
⚠️ Importante: No tienes que memorizar esta tabla. Su objetivo es que, cuando leas un artículo de internet de 2014 que usa
vary funciones antiguas, sepas que es código “pre-ES6” y que hoy existen formas mejores. Todo lo de la tabla lo irás aprendiendo a lo largo del curso.
💡 Consejo: Que una novedad esté en el estándar no significa que funcione en todos los navegadores el mismo día. Para comprobar el soporte de una función concreta usa las tablas de compatibilidad de MDN Web Docs o la web caniuse.com.
3.6 Línea temporal resumida
Línea temporal de JavaScript
═══════════════════════════════════════════════════════════
1995 ── Brendan Eich crea JavaScript en Netscape (Mocha → LiveScript → JavaScript)
1996 ── Microsoft lanza JScript en Internet Explorer 3
1997 ── ECMAScript 1: nace el estándar ECMA-262
1999 ── ES3: la versión que dominará una década
2005 ── Se populariza AJAX (Gmail, Google Maps)
2006 ── jQuery
2008 ── Chrome y el motor V8 · ES4 se abandona
2009 ── ES5 · Node.js
2015 ── ES2015 (ES6): el JavaScript moderno
2016+── Una versión nueva cada año
2018 ── Ryan Dahl presenta Deno
2023 ── Bun 1.0
2026 ── ECMAScript 2026 (aprobado en junio) ← este curso
4. ECMAScript, JavaScript y el comité TC39
4.1 ECMAScript frente a JavaScript
📘 Concepto: ECMAScript es la especificación: un documento (el estándar ECMA-262) que describe con precisión cómo debe comportarse el lenguaje. JavaScript es la implementación más conocida de esa especificación, la que incluyen navegadores y entornos como Node.js.
Una analogía: ECMAScript es la receta oficial de la paella publicada por un comité de cocineros; JavaScript es la paella que cocina cada restaurante (Chrome, Firefox, Safari, Node.js) siguiendo esa receta. Todas deben saber igual en lo esencial, aunque cada restaurante añada su guarnición.
Esa “guarnición” son las APIs del entorno, que NO forman parte de ECMAScript:
| Parte | ¿Dónde se define? | Ejemplos |
|---|---|---|
| El lenguaje en sí | ECMAScript (ECMA-262) | let, if, function, class, Array, Math, Promise, JSON |
| Internacionalización | ECMA-402 | Intl.NumberFormat, Intl.DateTimeFormat |
| APIs del navegador | Estándares web (WHATWG, W3C) | document, window, fetch, localStorage, eventos |
| APIs de Node.js | Documentación de Node.js | fs (ficheros), http, process, path |
⚠️ Importante: Por eso
document.querySelector(...)funciona en el navegador pero no en Node.js (allí no hay página web), yimport fs from 'node:fs'funciona en Node.js pero no en el navegador. El lenguaje es el mismo; lo que cambia es el entorno.
4.2 TC39: quién decide el futuro del lenguaje
TC39 (Technical Committee 39) es el comité de Ecma International que mantiene ECMAScript. Lo forman representantes de empresas (Google, Mozilla, Apple, Microsoft, Igalia, Bloomberg y muchas más), universidades y expertos invitados. Se reúnen varias veces al año y trabajan en abierto: las propuestas se publican en GitHub, en github.com/tc39/proposals.
4.3 El proceso de stages (etapas)
Cualquier idea nueva debe superar varias etapas antes de entrar en el estándar:
| Stage | Nombre | Qué significa |
|---|---|---|
| 0 | Idea | Alguien propone algo. Todavía no hay compromiso del comité |
| 1 | Propuesta | El comité acepta estudiar el problema. Hay un “campeón” que la defiende |
| 2 | Borrador | Se elige una solución y se escribe un primer texto de la especificación |
| 2.7 | Aprobada en principio | La especificación está completa y revisada; faltan los tests |
| 3 | Candidata | Hay tests (en la batería oficial test262) y los navegadores la implementan |
| 4 | Terminada | Al menos dos implementaciones la soportan. Entra en la siguiente versión anual |
flowchart LR
S0["Stage 0<br/>Idea"] --> S1["Stage 1<br/>Propuesta"]
S1 --> S2["Stage 2<br/>Borrador"]
S2 --> S27["Stage 2.7<br/>Aprobada en principio"]
S27 --> S3["Stage 3<br/>Candidata"]
S3 --> S4["Stage 4<br/>Terminada"]
S4 --> ES["ECMAScript<br/>del año siguiente"]
📘 Concepto: Cada año, hacia febrero o marzo, se “congela” la lista de propuestas que han llegado a stage 4 y en junio la Asamblea General de Ecma aprueba la nueva edición. Así ocurrió con ECMAScript 2026, aprobado en junio de 2026.
💡 Consejo: Las propuestas en stage 3 a menudo ya funcionan en algunos navegadores. Si lees que algo está “en stage 2”, tómalo como experimental: puede cambiar o incluso desaparecer. Un ejemplo es Temporal, la nueva API de fechas, que no forma parte de ES2026; la estudiaremos con detalle en el módulo 19.
5. Motores y entornos de ejecución
5.1 ¿Qué es un motor de JavaScript?
📘 Concepto: Un motor de JavaScript (JavaScript engine) es el programa que lee tu código y lo ejecuta. Es como el traductor simultáneo que convierte lo que escribes en instrucciones que el procesador del ordenador entiende.
Los tres motores más importantes son:
| Motor | Creado por | Dónde se usa |
|---|---|---|
| V8 | Chrome, Edge, Opera, Brave, Node.js, Deno | |
| SpiderMonkey | Mozilla | Firefox (es el descendiente directo del primer motor de Brendan Eich) |
| JavaScriptCore | Apple | Safari y todos los navegadores de iOS, Bun |
📘 Concepto: Microsoft Edge usó su propio motor (Chakra) hasta 2020; desde entonces está basado en Chromium y usa V8. Por eso hoy, en la práctica, si tu código funciona en Chrome, Firefox y Safari, funciona en casi todos los navegadores.
5.2 ¿Qué es un entorno de ejecución?
Un motor solo entiende el lenguaje (ECMAScript). Para hacer algo útil necesita un entorno de ejecución (runtime) que le dé acceso al mundo exterior: la página web, los ficheros, la red…
flowchart TB
subgraph Navegador
M1["Motor JS<br/>(V8, SpiderMonkey, JSC)"]
A1["APIs web:<br/>DOM, fetch, eventos,<br/>localStorage..."]
end
subgraph NodeJS["Node.js / Deno / Bun"]
M2["Motor JS<br/>(V8 o JSC)"]
A2["APIs de sistema:<br/>ficheros, red,<br/>procesos..."]
end
T["Tu código JavaScript"] --> Navegador
T --> NodeJS
| Entorno | Motor | Características |
|---|---|---|
| Navegador | Depende del navegador | Acceso a la página (DOM), eventos, red con fetch, almacenamiento. Sin acceso libre a tus ficheros por seguridad |
| Node.js | V8 | El más usado fuera del navegador (desde 2009). Enorme ecosistema de paquetes con npm. Este curso usa Node.js 24 LTS |
| Deno | V8 | Creado en 2018 por Ryan Dahl (el autor de Node.js) para corregir errores de diseño de Node. Seguro por defecto y con soporte nativo de TypeScript |
| Bun | JavaScriptCore | Centrado en la velocidad. Incluye gestor de paquetes, bundler y ejecutor de tests en un solo programa |
💡 Consejo: Para aprender, con el navegador y Node.js tienes todo lo que necesitas. Deno y Bun ejecutan casi todo el código de este curso, pero no los necesitarás.
5.3 Cada motor va a su ritmo: detección de características
Cuando una versión de ECMAScript se aprueba, la mayoría de sus novedades ya funcionan en algunos motores (es requisito del stage 4), pero no necesariamente en todos ni en todas las versiones. Por ejemplo, Math.sumPrecise (ES2026) está disponible en las versiones recientes de Chrome, Edge, Firefox y Safari, pero Node.js 24 todavía no la incluye, porque su versión de V8 es anterior.
La forma profesional de saber si algo existe no es mirar el nombre del navegador, sino preguntar directamente por la función. A esto se le llama detección de características (feature detection):
// ¿Existe Math.sumPrecise en este entorno?
if (typeof Math.sumPrecise === 'function') {
console.log('Math.sumPrecise disponible');
} else {
console.log('Math.sumPrecise no disponible: usa otra solución');
}
// En Node.js 24 la salida es:
// Math.sumPrecise no disponible: usa otra solución
📘 Concepto: Cuando una función no existe en un entorno, se puede añadir con un polyfill: un trozo de código que la implementa “a mano” con lo que el entorno sí tiene. Lo verás en módulos posteriores.
6. Características del lenguaje
6.1 Interpretado… y compilado al vuelo (JIT)
En lenguajes compilados como C, un programa (el compilador) traduce todo el código a lenguaje máquina antes de ejecutarlo. En los lenguajes interpretados, el código se va traduciendo y ejecutando sobre la marcha.
JavaScript empezó siendo interpretado, pero los motores modernos usan compilación JIT (Just-In-Time, “justo a tiempo”):
- El motor empieza interpretando el código para arrancar rápido.
- Mientras se ejecuta, vigila qué funciones se usan mucho (“código caliente”).
- Esas funciones las compila a código máquina optimizado para que vayan mucho más rápido.
- Si una suposición deja de cumplirse (por ejemplo, una función que siempre recibía números de repente recibe textos), desoptimiza y vuelve a empezar.
📘 Concepto: V8, por ejemplo, tiene un intérprete llamado Ignition y varios compiladores progresivamente más agresivos (Sparkplug, Maglev y TurboFan). Tú no tienes que hacer nada: el motor decide solo. Pero saberlo explica por qué JavaScript, siendo “interpretado”, es hoy uno de los lenguajes dinámicos más rápidos.
6.2 Dinámico y de tipado débil
En JavaScript no declaras el tipo de una variable: el tipo lo tiene el valor, no la variable. Una misma variable puede guardar un número y después un texto:
let dato = 42; // ahora es un número
dato = 'cuarenta y dos'; // ahora es un texto (cadena)
console.log(typeof dato); // string
Además, JavaScript intenta convertir tipos automáticamente cuando los mezclas, lo que se llama coerción:
console.log('5' + 1); // '51' (convierte el número 1 en texto y concatena)
console.log('5' - 1); // 4 (convierte el texto '5' en número y resta)
⚠️ Importante: Esta flexibilidad es cómoda pero peligrosa: muchos errores de principiante vienen de conversiones inesperadas. En el módulo 02 aprenderás a controlarlas, y en el 21 verás TypeScript, que añade tipos para detectar estos fallos antes de ejecutar.
6.3 Multiparadigma
Un paradigma es un estilo de programar. JavaScript permite varios:
| Paradigma | Idea | Ejemplo en JS |
|---|---|---|
| Imperativo | Das órdenes paso a paso | Bucles for, variables que cambian |
| Orientado a objetos | Modelas el mundo con objetos que tienen datos y comportamiento | class Usuario { ... } (módulo 09) |
| Funcional | Combinas funciones pequeñas sin modificar datos | precios.map(p => p * 1.21) (módulos 05 y 06) |
| Orientado a eventos | El código reacciona a cosas que pasan | boton.addEventListener('click', ...) (módulo 15) |
6.4 Un solo hilo con event loop
📘 Concepto: Un hilo (thread) es una línea de ejecución: una lista de instrucciones que se ejecutan una detrás de otra. JavaScript ejecuta tu código en un solo hilo: solo hace una cosa a la vez.
¿Cómo puede entonces una página descargar datos, reproducir una animación y responder a tus clics “a la vez”? Gracias al bucle de eventos (event loop).
Imagina a un camarero que atiende él solo un restaurante. No se queda esperando en la cocina a que se haga cada plato: toma la comanda, la pasa a la cocina (que trabaja por su cuenta) y sigue atendiendo mesas. Cuando un plato está listo, la cocina lo deja en la barra y el camarero lo recoge en cuanto queda libre.
- El camarero es el hilo de JavaScript (la pila de llamadas o call stack).
- La cocina son las APIs del entorno (temporizadores, red, disco), que trabajan en segundo plano.
- La barra es la cola de tareas (task queue).
- El event loop es la regla: “cuando no tengas nada que hacer, recoge lo siguiente de la barra”.
flowchart LR
P["Pila de llamadas<br/>(tu código, de una en una)"] -- "pide algo lento:<br/>temporizador, red..." --> W["APIs del entorno<br/>(trabajan en segundo plano)"]
W -- "cuando termina,<br/>deja la respuesta" --> C["Cola de tareas"]
C -- "event loop: si la pila<br/>está vacía, pasa la siguiente" --> P
console.log('1. Pido un café');
setTimeout(() => {
console.log('3. ¡El café está listo!');
}, 1000); // la "cocina" tardará 1 segundo
console.log('2. Mientras tanto, leo el periódico');
// Salida:
// 1. Pido un café
// 2. Mientras tanto, leo el periódico
// 3. ¡El café está listo! (un segundo después)
⚠️ Importante: Si escribes un bucle que tarda diez segundos en terminar, durante esos diez segundos la página se congela: el camarero está ocupado y no puede atender clics. Por eso JavaScript se apoya tanto en operaciones asíncronas. Lo estudiarás a fondo en el módulo 12.
7. JavaScript junto a HTML y CSS
En una página web cada tecnología tiene su papel. Una analogía clásica es una casa:
| Tecnología | Papel | En la casa |
|---|---|---|
| HTML | Estructura y contenido | Los muros, las habitaciones, las puertas |
| CSS | Presentación y diseño | La pintura, los muebles, la decoración |
| JavaScript | Comportamiento | La electricidad: el timbre suena, las luces se encienden, la puerta del garaje se abre |
flowchart LR
H["HTML<br/>¿Qué hay?"] --> P["Página web"]
C["CSS<br/>¿Cómo se ve?"] --> P
J["JavaScript<br/>¿Qué hace?"] --> P
JavaScript puede leer y modificar tanto el HTML como el CSS de una página mientras se está mostrando. Lo hace a través del DOM (Document Object Model), una representación de la página en forma de objetos que el navegador pone a disposición de tu código (módulo 14).
💡 Consejo: Una buena regla profesional es la separación de responsabilidades: el HTML en ficheros
.html, el diseño en.cssy el comportamiento en.js. Evita mezclar estilos dentro de JavaScript si una clase CSS puede hacer el trabajo.
8. Primer vistazo a un programa
Todavía no sabes programar, y no pasa nada. El objetivo de esta sección es que leas un programa real y reconozcas sus piezas. En el módulo 01 lo ejecutarás tú.
8.1 Un programa en el navegador
💻 Ejemplo: Una página con un botón que cuenta cuántas veces lo pulsas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primer JavaScript</title>
</head>
<body>
<h1>Contador de clics</h1>
<button id="boton">Púlsame</button>
<p id="mensaje">Todavía no has pulsado el botón.</p>
<script type="module">
// 1. Buscamos en la página el botón y el párrafo
const boton = document.querySelector('#boton');
const mensaje = document.querySelector('#mensaje');
// 2. Una variable para contar los clics
let clics = 0;
// 3. Cuando se haga clic en el botón...
boton.addEventListener('click', () => {
clics = clics + 1; // ...sumamos uno
// ...y cambiamos el texto del párrafo
mensaje.textContent = `Has pulsado el botón ${clics} veces.`;
});
</script>
</body>
</html>
Vamos a leerlo por partes:
| Código | Qué hace |
|---|---|
<script type="module"> | Abre un bloque de JavaScript dentro del HTML (verás las opciones en el módulo 01) |
// 1. Buscamos... | Un comentario: texto para personas que el motor ignora |
const boton = ... | Declara una constante llamada boton y guarda en ella el botón de la página |
document.querySelector('#boton') | Pide al DOM el elemento cuyo id es boton |
let clics = 0; | Declara una variable que puede cambiar, con valor inicial 0 |
boton.addEventListener('click', ...) | “Cuando pase un clic en el botón, ejecuta esta función” |
() => { ... } | Una función flecha: un bloque de código que se ejecutará más tarde |
`Has pulsado... ${clics}...` | Una plantilla de texto que inserta el valor de clics |
mensaje.textContent = ... | Cambia el texto del párrafo en la página |
📘 Concepto: Fíjate en el
;al final de cada instrucción. En JavaScript el punto y coma es casi siempre opcional porque existe un mecanismo llamado inserción automática de punto y coma (ASI). Aun así, en este curso lo escribiremos siempre: es más claro y evita algunos errores raros.
8.2 El mismo espíritu en Node.js
Fuera del navegador no hay botones ni párrafos, pero sí hay consola, ficheros y sistema operativo:
// saludo.mjs
import os from 'node:os';
const nombre = 'Ana';
const hora = new Date().getHours();
let saludo;
if (hora < 14) {
saludo = 'Buenos días';
} else if (hora < 21) {
saludo = 'Buenas tardes';
} else {
saludo = 'Buenas noches';
}
console.log(`${saludo}, ${nombre}.`);
console.log(`Tu ordenador tiene ${os.cpus().length} núcleos.`);
// Salida (depende de la hora y de tu ordenador):
// Buenas tardes, Ana.
// Tu ordenador tiene 8 núcleos.
Aquí reconoces piezas nuevas: import (traer código de un módulo, en este caso uno propio de Node.js), una decisión con if / else if / else y console.log, la instrucción que muestra texto en la consola y que usarás constantemente.
✏️ Ejercicio: Sin ejecutar nada, intenta predecir qué mostraría el programa anterior si lo ejecutaras a las 22:00 y si tu nombre fuera “Luis” en lugar de “Ana”. ¿Qué línea tendrías que cambiar?
8.3 Anatomía mínima del código JavaScript
| Elemento | Ejemplo | Para qué sirve |
|---|---|---|
| Comentario de línea | // texto | Explicar el código |
| Comentario de bloque | /* texto */ | Comentarios de varias líneas |
| Instrucción | console.log('Hola'); | Una orden; termina en ; |
| Bloque | { ... } | Agrupa varias instrucciones |
| Variable / constante | let x = 1; / const y = 2; | Guardar datos con un nombre |
| Cadena de texto | 'Hola', "Hola", `Hola` | Representar texto |
| Llamada a función | alert('Hola') | Ejecutar un bloque de código con nombre (aquí, alert muestra un aviso en el navegador) |
⚠️ Importante: JavaScript distingue mayúsculas y minúsculas (case sensitive):
nombre,NombreyNOMBREson tres cosas distintas, yConsole.logdará error porque lo correcto esconsole.log.
9. Cómo aprender JavaScript con este curso
9.1 Recursos de referencia
| Recurso | Para qué |
|---|---|
| MDN Web Docs | La referencia de cabecera: documentación de cada función, con ejemplos y compatibilidad |
| ECMA-262 | La especificación oficial (muy técnica; para consultas avanzadas) |
| Propuestas de TC39 | Qué novedades vienen en camino |
| Documentación de Node.js | Referencia de las APIs de Node |
| caniuse.com | Compatibilidad de funciones entre navegadores |
9.2 Hábitos que marcan la diferencia
💡 Consejo: Escribe tú todos los ejemplos, aunque puedas copiarlos. Teclear el código te obliga a fijarte en cada símbolo, y los errores que cometas (y corrijas) son los que más te enseñan.
- Experimenta: cambia valores, rompe el código a propósito y lee el mensaje de error.
- Lee los errores: el mensaje de error dice qué ha pasado y en qué línea. Es tu mejor amigo, no tu enemigo.
- Practica a diario, aunque sean 20 minutos. La constancia vale más que los atracones.
- Haz los ejercicios de cada módulo antes de pasar al siguiente.
- No memorices: entiende. Los profesionales consultan MDN todos los días.
9.3 Errores de mentalidad comunes
| Error | Realidad |
|---|---|
| “Primero aprendo React y luego JavaScript” | Sin una base sólida de JavaScript, cualquier framework se vuelve un misterio |
| “Si copio un código de internet y funciona, ya está” | Si no lo entiendes, no podrás arreglarlo cuando falle |
| “JavaScript es un lenguaje mal hecho” | Tiene rarezas históricas, pero el JavaScript moderno es potente y coherente si sigues buenas prácticas |
| “Tengo que saberlo todo de memoria” | Lo importante es saber qué buscar y dónde |
10. Ejercicios
Ejercicio 1: JavaScript frente a Java
Escribe en un documento de texto cinco diferencias entre JavaScript y Java con tus propias palabras. Añade una frase que explique por qué se llaman de forma tan parecida.
Ejercicio 2: Detective de la web
Abre tres webs que uses a menudo (por ejemplo, tu correo, una tienda online y un periódico). Para cada una, anota al menos tres cosas que creas que están hechas con JavaScript (un menú que se despliega, un buscador con sugerencias, un carrito que se actualiza…). Justifica por qué no pueden hacerse solo con HTML y CSS.
Ejercicio 3: Línea temporal
Sin mirar el módulo, dibuja en papel una línea temporal con estos hitos en el orden correcto y su año aproximado: ES5, creación de JavaScript, Node.js, ES2015, primera edición de ECMAScript, ES2026, lanzamiento de V8. Después compruébala con la sección 3.
Ejercicio 4: ¿Lenguaje o entorno?
Clasifica cada elemento en “ECMAScript (lenguaje)”, “API del navegador” o “API de Node.js”: Math.round, document.querySelector, fs.readFile, Array, localStorage, Promise, process.argv, fetch en el navegador, JSON.parse, addEventListener.
Ejercicio 5: Sigue una propuesta
Entra en github.com/tc39/proposals, elige una propuesta que esté en stage 2 o stage 3 y escribe un pequeño resumen: qué problema intenta resolver, quién la defiende y un ejemplo de código si lo hay. Indica en qué etapa del proceso se encuentra y qué le falta para llegar a stage 4.
Ejercicio 6: El camarero del event loop
Sin ejecutarlo, escribe en qué orden aparecerán los mensajes de este programa y explica por qué usando la analogía del camarero:
console.log('A');
setTimeout(() => console.log('B'), 2000);
setTimeout(() => console.log('C'), 0);
console.log('D');
(Pista: aunque C tenga un retraso de 0 milisegundos, tiene que pasar por la “barra”. Comprobarás tu respuesta en el módulo 01, cuando aprendas a ejecutar código.)
Ejercicio 7: Lectura de código
Vuelve al contador de clics de la sección 8.1 y responde: ¿qué cambiarías para que el contador empiece en 10? ¿Y para que el mensaje diga “clics” en lugar de “veces”? ¿Por qué clics se declara con let y boton con const?
Resumen
| Concepto | Idea clave |
|---|---|
| JavaScript | Lenguaje de programación de la web; también en servidores, móvil, escritorio e IoT |
| JavaScript ≠ Java | Lenguajes distintos; el nombre fue una decisión de marketing de 1995 |
| Brendan Eich | Creó JavaScript en Netscape en 1995, en unos diez días |
| ECMAScript | El estándar (ECMA-262) que define el lenguaje; JavaScript es su implementación |
| ES2015 (ES6) | La gran actualización que inauguró el JavaScript moderno |
| Versiones anuales | Desde 2016, una edición por año; la actual es ES2026 |
| TC39 | Comité que evoluciona el lenguaje mediante stages 0, 1, 2, 2.7, 3 y 4 |
| Motores | V8 (Chrome, Edge, Node, Deno), SpiderMonkey (Firefox), JavaScriptCore (Safari, Bun) |
| Entornos | Navegador, Node.js, Deno, Bun: mismo lenguaje, distintas APIs |
| JIT | Se interpreta para arrancar y se compila al vuelo el código que más se usa |
| Dinámico | El tipo lo tiene el valor, no la variable; hay coerción automática |
| Multiparadigma | Imperativo, orientado a objetos, funcional y orientado a eventos |
| Un solo hilo + event loop | Una cosa a la vez; lo lento se delega y su resultado espera en una cola |
| HTML / CSS / JS | Estructura / presentación / comportamiento |