Lo que aprenderás en este curso de JavaScript

Resumen del curso: dónde se ejecuta JavaScript, en el navegador y en Node.js, y el orden de sus 4 categorías.

Este curso es material gratuito para llegar a escribir, a nivel profesional, el JavaScript que se ejecuta en el navegador. Empezarás por lo básico (variables y arrays) y avanzarás hacia condicionales, bucles, funciones y programación orientada a objetos con clases, hasta terminar con el DOM (la estructura del navegador para leer y escribir elementos HTML desde JavaScript) y fetch para las peticiones de red, siempre con diagramas y ejercicios prácticos.

En este artículo veremos dónde se ejecuta realmente JavaScript y qué trata este curso, en qué orden.

Por qué aprender JavaScript — el navegador lo ejecuta directamente

Un botón que cambia lo que se ve al pulsarlo. Un campo que se valida mientras escribes. Datos de productos que llegan de un servidor y se muestran en una lista. Todos esos comportamientos de una página web los hace posibles JavaScript.

JavaScript es el único lenguaje que un navegador web puede ejecutar directamente desde el código fuente, de modo que, si vas a construir algo que se vea en pantalla, acabarás escribiendo JavaScript.

Además, Node.js (software que ejecuta JavaScript fuera del navegador) se ha extendido tanto que hoy la lógica del servidor y las herramientas de compilación se escriben en el mismo lenguaje. Con aprender JavaScript una sola vez, puedes trabajar tanto en el frontend como en el backend.

Dónde se ejecuta JavaScript — navegador, Node.js y la consola de este sitio

Con el mismo JavaScript, las funciones disponibles cambian según dónde lo ejecutes. El lenguaje en sí (variables, arrays, objetos, funciones y clases) no cambia, lo ejecutes donde lo ejecutes.

Lo que cambia es lo que cada entorno ofrece además. El navegador aporta la pantalla (el DOM) y una forma de guardar datos localmente; Node.js aporta la lectura y escritura de archivos y la posibilidad de levantar un servidor. Tener clara esta diferencia facilita mucho localizar la causa cuando un código no funciona.

El ejemplo de código de abajo todavía no tiene que entenderse: fíjate solo en qué cambia entre los tres entornos.

Los 3 entornos donde se ejecuta JavaScript
Sintaxis de JSvariables, clasesNavegadorNode.jsConsola deeste sitioPantalla (DOM)eventos, storageLeer/escribirarchivos, servidorSin pantallasalida por consoleañadeañadelimitado
El lenguaje en sí es idéntico en los tres: solo cambia lo que cada entorno añade. La consola de este sitio no tiene pantalla, de modo que los resultados se muestran como texto.
// Igual en todas partes: el lenguaje en sí
const cart = [
  { name: "Taza", price: 1200 },
  { name: "Posavasos", price: 400 },
];
console.log(cart.length);   // 2

// Solo en el navegador: modificar lo que se ve en pantalla
document.querySelector("#total").textContent = "1600 dólares";

// Solo en Node.js: leer un archivo
const fs = require("node:fs");
console.log(fs.readFileSync("orders.csv", "utf-8"));

La consola de este sitio no tiene pantalla

La consola de los ejercicios ejecuta tu código en un entorno de navegador sin pantalla. Aunque crees un elemento, no aparecerá en ninguna parte, de modo que los resultados se comprueban leyendo el texto que muestras con console.log. Tampoco están disponibles los diálogos como alert. Incluso en el capítulo sobre las APIs del navegador, comprobarás el comportamiento imprimiendo como texto el contenido de los elementos que crees.

Qué cubre este curso — 4 categorías

Este curso se organiza en 4 categorías. Empezarás por los valores y las estructuras de datos básicas, pasarás al control de flujo y las funciones, seguirás con la programación orientada a objetos con clases y terminarás con las APIs del navegador (manipulación del DOM, eventos, red y almacenamiento) para trabajar con la pantalla y los datos.

Si las recorres de arriba abajo, cada artículo se apoya en lo que enseñó el anterior. La única excepción es if, que sirve para comprobar una condición: aparece en su forma más simple incluso en los artículos básicos que tratan la comparación de valores.

Orden de aprendizaje y qué cubre cada categoría
1. Básicos2. Sintaxis3. POO4. APIsdel navegadorvalores, arrays,objetosif / for / func.asincroníaclass / herenciathisDOM, eventos,fetch
La fila superior es el orden; la inferior, lo que trata cada categoría. Cada categoría solo usa lo visto en las anteriores.
CategoríaQué aprenderásTemas clave
1. BásicosValores y estructuras de datoslet y const, números, cadenas, arrays, objetos, JSON
2. SintaxisControl de flujo y funcionesif / for, funciones, funciones flecha, map / filter / reduce, manejo de excepciones, asincronía
3. POODiseño de clasesclass, constructor, herencia, getters / setters, this
4. APIs del navegadorPantalla y redobtener y crear elementos, eventos, formularios, fetch, localStorage

Cada artículo sigue el mismo recorrido: explicación → diagrama → ejercicio → cuestionario. Los ejercicios se ejecutan directamente en la consola de la página, de modo que no hay que instalar ningún editor ni preparar ningún entorno.

La idea no es que te quedes solo en la lectura: en cada artículo escribes y ejecutas código real mientras avanzas.

Por qué los fundamentos siguen importando en la era de la IA — leer y corregir errores

Cada vez son más las situaciones en las que la IA escribe el código por ti. Pero leer ese código, ejecutarlo y corregirlo cuando falla sigue siendo trabajo de una persona.

En JavaScript los valores se pasan sin declarar su tipo, de manera que un valor distinto del esperado no detiene la ejecución en ese momento: el error salta más adelante, en una línea completamente distinta. Poder rastrear en qué punto el valor dejó de ser el correcto marca directamente la diferencia de velocidad al trabajar.

Cuando algo falla, lo primero que hay que leer es el mensaje de error. La mayoría de los errores de JavaScript reúnen en una sola línea el tipo, la situación y el elemento afectado. Si lees esos tres por separado, puedes acotar la corrección hasta "el valor que se maneja una línea antes de la que falló".

La propiedad (la pareja de nombre y valor que guarda un objeto) y undefined (un valor que indica que aún no se ha asignado nada), que aparecen en el siguiente ejemplo, se explican en detalle en los artículos 8 y 9.

const user = { name: "Alice", age: 34 };

// user no tiene ninguna propiedad llamada profile
console.log(user.profile.age);
// TypeError: Cannot read properties of undefined (reading 'age')
Leer el mensaje de error en 3 partes
TypeErrorCannot readprops of undefinedreading 'age'Tipomal uso del tipoSituaciónse leía sobreundefinedSobre quéintentaba leer ageCorregir antes:user.profile
La fila superior son los fragmentos del mensaje; la del medio, lo que significa cada uno. Lo que hay que corregir no es age, sino user.profile, un paso antes.

Este curso incluye a propósito ejercicios en los que salta un error, para que practiques leer el mensaje y corregir el código por tu cuenta. Si recorres las 4 categorías en orden, llegarás a escribir el JavaScript que se usa de verdad en el trabajo y a corregirlo tú mismo cuando algo se rompa.

En el siguiente artículo aprenderás let y const, las dos formas de declarar variables, escribiendo código con las dos.