Antes de escribir una sola línea de código conviene entender qué estás a punto de aprender y por qué merece la pena. JavaScript es hoy el lenguaje de programación más extendido del planeta: está en prácticamente todas las páginas web que visitas, en servidores, en aplicaciones móviles y hasta en aplicaciones de escritorio. En esta lección verás qué tipo de lenguaje es, dónde se ejecuta, de dónde viene (lo cual explica muchas de sus rarezas), qué relación tiene con HTML y CSS, y qué tipo de cosas podrás construir con él. Al final tendrás una idea clara del terreno de juego antes de empezar a jugar.

1. Qué es JavaScript y para qué sirve
2. Las características del lenguaje, explicadas sin jerga
3. Dónde se ejecuta JavaScript
4. JavaScript, ECMAScript y las versiones del lenguaje
5. Una breve historia que explica sus rarezas
6. JavaScript junto a HTML y CSS
7. Qué se puede construir: el caso de Nómada Tareas
8. Errores Comunes y Consejos
9. Ejercicios
10. Conclusión

JavaScript es un lenguaje de programación: un conjunto de palabras y reglas con las que le das instrucciones a un ordenador. Su especialidad histórica es dar comportamiento a las páginas web. Cuando pulsas un botón y algo se despliega, cuando escribes en un buscador y aparecen sugerencias sin recargar la página, cuando arrastras una tarjeta de una columna a otra en un tablero: eso es JavaScript trabajando.

Piensa en una diferencia muy práctica:

Pero JavaScript hace tiempo que se escapó del navegador. Hoy también se usa para escribir el servidor que atiende esas páginas, para crear aplicaciones móviles, herramientas de línea de comandos, automatizaciones y programas de escritorio. Es, en la práctica, un lenguaje de propósito general con un origen web.

Vas a leer estas cuatro etiquetas mil veces. Conviene entenderlas desde el principio, aunque sea a grandes rasgos.

Hay lenguajes que exigen un paso previo de compilación: escribes el código, una herramienta lo traduce a un fichero ejecutable y luego lo ejecutas. JavaScript no funciona así desde tu punto de vista: escribes el código y se ejecuta directamente. No hay un "botón de compilar" que tengas que pulsar.

Por debajo, sin embargo, los motores modernos hacen algo más listo que interpretar línea a línea: usan compilación JIT (Just In Time, "justo a tiempo"). El motor empieza interpretando, observa qué partes del código se ejecutan muchas veces y las traduce a código máquina optimizado sobre la marcha.

• Para ti, ahora: significa que puedes escribir una línea, guardar, recargar el navegador y ver el resultado. El ciclo de aprendizaje es rapidísimo.
• Consecuencia importante: muchos errores no se detectan hasta que la línea se ejecuta. Si tienes una errata en una parte del programa a la que nunca llegas, nadie te avisa.

En JavaScript las variables no tienen tipo, los valores sí. Una misma variable puede guardar hoy un número y dentro de tres líneas un texto. No declaras "esto es un número entero"; simplemente guardas un valor.

• Ventaja: escribes muy rápido y con muy poca ceremonia.
• Riesgo: nada te impide sumar un texto con un número por accidente. Este es el origen de una parte enorme de los errores de los principiantes, y por eso hay una lección entera dedicada al tema en Conversión de Tipos y Comparaciones.

Un paradigma es un estilo de organizar el código. JavaScript no te obliga a elegir uno:

Esto es una gran libertad, pero también una responsabilidad: tú decides cómo estructurar. Por eso este curso insiste desde el principio en convenciones y buenas prácticas.

JavaScript ejecuta una sola cosa a la vez. No hay dos partes de tu código corriendo en paralelo pisándose los datos. Esto simplifica muchísimo la vida... siempre que ninguna instrucción se quede bloqueada, porque mientras algo bloquea, todo lo demás espera (incluida la interfaz, que se queda congelada).

Como esto sería insoportable para tareas lentas (pedir datos a un servidor, esperar un temporizador), JavaScript resuelve el problema con un mecanismo llamado asincronía: encarga la tarea lenta, sigue con lo suyo y atiende el resultado cuando llega. Es una de las ideas más potentes del lenguaje y se estudia a fondo en el Módulo 5.

JavaScript no se ejecuta "solo": necesita un programa que lo entienda. Ese programa se llama motor de JavaScript.

Un detalle clave que ahorra confusiones: el lenguaje es el mismo, lo que cambia es lo que hay a su alrededor. En el navegador tienes acceso a la página, a la ventana y al almacenamiento local; en el servidor tienes acceso al sistema de ficheros y a la red. Sumar dos números funciona igual en los dos sitios; leer un fichero del disco duro solo tiene sentido en el servidor.

En este curso trabajarás sobre todo en el navegador, que es donde JavaScript brilla y donde los resultados se ven de inmediato, y usarás Node.js como herramienta auxiliar para ejecutar scripts sueltos y, más adelante, las pruebas automáticas.

Aquí hay una confusión clásica que conviene resolver hoy mismo.

• ECMAScript es la especificación: el documento oficial que define cómo debe comportarse el lenguaje. Lo mantiene un comité llamado TC39.
• JavaScript es la implementación de esa especificación que usan navegadores y Node.js.

Dicho en corto: ECMAScript es la ley, JavaScript es el lenguaje que la cumple. En el día a día se usan casi como sinónimos.

Las versiones importantes que oirás nombrar:

Desde 2015 el comité publica una revisión cada año, con el nombre del año (ES2016, ES2017... ES2026). Ya no hay saltos gigantes: hay una corriente continua de mejoras pequeñas.

"JavaScript moderno" es la expresión coloquial para referirse a escribir código de ES2015 en adelante: let y const en lugar de var, funciones flecha, template literals, módulos, promesas y async/await. Este curso enseña JavaScript moderno desde la primera lección, y solo menciona la sintaxis antigua cuando es necesario para que entiendas código que te encontrarás por ahí.

En 1995 Netscape necesitaba un lenguaje sencillo para que las páginas web dejaran de ser documentos estáticos. El encargo recayó en Brendan Eich, que —según la historia que se cuenta desde entonces— tuvo unos diez días para producir un prototipo funcional.

La secuencia resumida:

1. 1995: nace con el nombre Mocha, pasa a LiveScript y acaba llamándose JavaScript por una decisión puramente comercial (Java estaba de moda). JavaScript y Java son lenguajes distintos y sin parentesco, igual que un coche y una alfombra.
2. 1996-1999: Microsoft crea su propia versión para Internet Explorer. Cada navegador se comporta de forma distinta y programar para la web se convierte en un infierno de excepciones.
3. 1997: se estandariza como ECMAScript para poner orden.
4. 2009: ES5 moderniza el lenguaje y aparece Node.js, que lo saca del navegador.
5. 2015: ES6 transforma el lenguaje y arranca el ciclo anual de versiones.
6. Hoy: es el lenguaje más usado del mundo y el estándar de facto de la web.

¿Por qué importa esta historia? Porque explica dos hechos que te van a chocar:

• Tiene rarezas heredadas. Diseñado en semanas y con compatibilidad hacia atrás sagrada (romper la web no es una opción), JavaScript arrastra comportamientos extraños que nunca se han podido eliminar: typeof null devuelve 'object', '5' == 5 es verdadero, existen a la vez null y undefined. No son fallos tuyos: son cicatrices históricas.
• Casi nada se elimina, se añade. Cuando algo sale mal, el comité añade una alternativa mejor y desaconseja la anterior. Por eso conviven var y let, o == y ===. Aprender JavaScript moderno consiste, en buena medida, en saber qué parte del lenguaje usar y cuál evitar.

Una página web se construye con tres tecnologías que hacen tres trabajos distintos y complementarios. La analogía clásica es la de una casa:

Fíjate en las flechas discontinuas: JavaScript puede modificar el HTML y el CSS mientras la página está abierta. Ahí está su poder. Puede añadir una tarea nueva a la lista sin recargar nada, o cambiar el color de una fila cuando pasa su fecha límite. Ese mecanismo se llama DOM y es todo el Módulo 6.

Una advertencia útil para no frustrarte: este curso es de JavaScript, no de HTML ni de CSS. Usarás algo de HTML porque es imprescindible para que el JavaScript tenga dónde vivir, pero será HTML sencillo y explicado. No necesitas saber CSS avanzado para seguirlo.

Con JavaScript puedes construir, entre muchas otras cosas:

• Interfaces interactivas: formularios que validan al escribir, filtros instantáneos, menús, tableros arrastrables.
• Aplicaciones web completas que funcionan como programas de escritorio (correo, hojas de cálculo, editores).
• Visualizaciones de datos: gráficos que se actualizan solos.
• Servidores y APIs con Node.js.
• Aplicaciones móviles y de escritorio con el mismo código base.
• Automatizaciones: scripts que renombran ficheros, procesan datos o generan informes.

A lo largo de este curso construirás una de esas cosas, paso a paso: Nómada Tareas.

Taller Nómada es un pequeño espacio de coworking y taller creativo (una empresa ficticia creada para este curso). Lo llevan tres personas: Marta, que coordina; Iván, diseñador; y Lucía, desarrolladora. Hoy gestionan su trabajo con notas adhesivas en la pared y un grupo de mensajería, y el resultado es predecible: tareas que se pierden, nadie sabe quién hace qué y las fechas límite se descubren tarde.

Nómada Tareas será la aplicación web que resuelva ese problema. Su unidad básica será la tarea: un dato con un título, una persona responsable, una prioridad, un estado, unas etiquetas, unas horas estimadas y una fecha límite. Por ejemplo, algo como esto (no hace falta que entiendas la sintaxis todavía, solo la idea):

El recorrido, en una frase por módulo: empezarás guardando los datos de una tarea en variables sueltas; después aprenderás a decidir y repetir sobre ellas; a agrupar la lógica en funciones; a manejar listas de tareas; a modelarlas como objetos y clases; a mostrarlas en pantalla; a guardarlas y sincronizarlas; y finalmente a probar, optimizar y desplegar la aplicación completa.

La lección El Proyecto del Curso: Nómada Tareas presenta el proyecto en detalle. Hasta entonces, quédate con el nombre y con la idea: todo lo que aprendas tendrá un sitio donde aplicarse.

Errores comunes al empezar

• Confundir JavaScript con Java. Son lenguajes distintos, de empresas distintas, con usos distintos. El nombre fue una decisión de marketing de 1995. Si buscas ayuda en internet, busca siempre "JavaScript", nunca "Java".
• Creer que JavaScript solo sirve para el navegador. Es su hábitat natural, pero hoy también es un lenguaje de servidor, de móvil y de escritorio.
• Pensar que hay que aprender HTML y CSS a fondo antes de empezar. No es cierto. Con unas nociones básicas de HTML puedes empezar con JavaScript perfectamente; este curso te dará lo que necesites.
• Obsesionarse con la versión de ECMAScript. No necesitas memorizar qué llegó en ES2019. Aprende JavaScript moderno y consulta la referencia cuando dudes.
• Copiar código antiguo de internet sin darse cuenta. Hay muchísimo material de antes de 2015 circulando. Si ves var por todas partes y ninguna función flecha, probablemente estés leyendo código viejo.

Consejos

• Escribe el código, no lo leas. Programar es una habilidad motriz además de intelectual. Teclear los ejemplos, equivocarte y corregir es lo que fija el aprendizaje.
• Acostúmbrate a la documentación oficial. MDN Web Docs es la referencia de facto de JavaScript y de las APIs del navegador. Buscar "MDN" seguido del nombre de lo que sea es un hábito excelente.
• Acepta las rarezas sin pelearte con ellas. Muchas cosas de JavaScript son como son por motivos históricos. Aprende la regla práctica y sigue adelante.
• No te saltes los ejercicios. Están diseñados para que descubras los errores en un entorno seguro.

Indica si cada afirmación es verdadera o falsa y justifica la respuesta en una frase.

1. JavaScript y Java son versiones distintas del mismo lenguaje.
2. Para ejecutar JavaScript hace falta compilarlo antes con una herramienta externa.
3. ECMAScript es la especificación que define cómo debe comportarse JavaScript.
4. JavaScript solo puede ejecutarse dentro de un navegador.
5. JavaScript ejecuta varias instrucciones a la vez en paralelo.
6. let y const forman parte de lo que se llama "JavaScript moderno".

Para cada requisito de Nómada Tareas, decide si lo resuelve principalmente HTML, CSS o JavaScript:

1. La lista de tareas de Taller Nómada aparece como una lista con un elemento por tarea.
2. Las tareas de prioridad alta se muestran con el borde izquierdo en rojo.
3. Al escribir "Iván" en el buscador, la lista muestra solo las tareas de Iván.
4. Cada tarjeta de tarea tiene un título y un texto con la fecha límite.
5. Al pulsar "Marcar como hecha", la tarea cambia de columna sin recargar la página.
6. En pantallas pequeñas las tarjetas se apilan en una sola columna.

Lee estas dos afirmaciones sobre JavaScript:

• '5' == 5 devuelve true.
• typeof null devuelve 'object'.

Sin saber todavía cómo funcionan esos operadores, explica con tus palabras por qué el lenguaje puede tener comportamientos así y por qué no se han corregido. Escribe entre tres y cinco líneas.

Ejercicio 1

1. Falso. Son lenguajes independientes, sin relación técnica. El nombre "JavaScript" se eligió en 1995 por razones comerciales, porque Java estaba de moda.
2. Falso. No hay un paso de compilación previo a cargo del programador: el código se ejecuta directamente. El motor sí compila internamente con JIT, pero eso es invisible para ti.
3. Verdadero. ECMAScript, mantenida por el comité TC39, es la especificación; JavaScript es la implementación que la cumple.
4. Falso. También se ejecuta en servidores con Node.js, en aplicaciones móviles y en aplicaciones de escritorio. Lo que cambia entre entornos no es el lenguaje, sino las APIs disponibles a su alrededor.
5. Falso. JavaScript es de un solo hilo: ejecuta una instrucción a la vez. Gestiona las tareas lentas mediante asincronía, no mediante paralelismo del código que tú escribes.
6. Verdadero. Ambas llegaron en ES6 (ES2015) y son parte del núcleo del estilo moderno, frente a var.

Ejercicio 2

Observación importante: en los casos 3 y 5 JavaScript acaba tocando el HTML y el CSS. Esa es exactamente su función: modificar la estructura y el estilo mientras la página está abierta.

Ejercicio 3

Respuesta orientativa: JavaScript se diseñó en muy poco tiempo, en 1995, con el objetivo de ser un lenguaje sencillo y tolerante para no programadores. Varias decisiones tomadas con prisa (como convertir tipos automáticamente al comparar, o un fallo en la representación interna de null) se quedaron en el lenguaje. Corregirlas ahora rompería millones de páginas web que dependen de ese comportamiento, y la compatibilidad hacia atrás es una regla casi sagrada en la web. Por eso, en lugar de eliminar lo defectuoso, el comité añade alternativas mejores (=== frente a ==) y recomienda usar estas últimas.

En esta lección has situado JavaScript en el mapa. Sabes que es un lenguaje interpretado con compilación JIT, dinámico, multiparadigma y de un solo hilo; que se ejecuta en el navegador gracias a motores como V8 o SpiderMonkey, pero también en el servidor con Node.js y en móvil y escritorio; que ECMAScript es su especificación y que "JavaScript moderno" significa ES2015 en adelante. Has visto que muchas de sus rarezas se explican por sus diez días de diseño en 1995 y por el compromiso de no romper la web. Y has entendido su papel junto a HTML y CSS: estructura, presentación y comportamiento, siendo JavaScript quien puede modificar a los otros dos en caliente.

También conoces ya el destino del viaje: Nómada Tareas, la aplicación de gestión de tareas de Taller Nómada, que irás construyendo módulo a módulo con Marta, Iván y Lucía como protagonistas de todos los ejemplos.

Ahora toca preparar las herramientas. En la siguiente lección, Configuración de tu Entorno de Desarrollo, montarás tu puesto de trabajo: navegador y DevTools, editor de código, Node.js y npm, y el esqueleto de carpetas del proyecto. Sin entorno no hay práctica, y sin práctica no hay aprendizaje.