Tabla de contenido

Introducción: Por qué JavaScript es el lenguaje de la Web

JavaScript es el único lenguaje de programación que los navegadores entienden nativamente. Esto significa que si quieres que una página web haga algo más que mostrar texto estático — como validar un formulario, cargar datos sin recargar la página, crear animaciones o construir una aplicación completa — necesitas JavaScript.

Pero JavaScript ya no vive solo en el navegador. Con Node.js, JavaScript también se ejecuta en servidores. Con React Native, creas apps móviles. Con Electron, aplicaciones de escritorio. Con TypeScript, un superset tipado de JavaScript, construyes aplicaciones empresariales.

En 2026, JavaScript sigue siendo:

  • El lenguaje más usado en el mundo del desarrollo web
  • El primer lenguaje que aprenden la mayoría de los desarrolladores frontend
  • La base de los frameworks más populares: React, Vue, Svelte, Angular, Astro
  • Esencial para el backend con Node.js, Express, NestJS
  • El lenguaje de automatización con scripts para testing, build tools y CI/CD

Aprender JavaScript no es opcional si quieres ser desarrollador web. Es el pilar central sobre el que se construye todo lo demás.

Si quieres empezar con los fundamentos desde cero, te recomiendo nuestra guía de fundamentos de JavaScript.

Parte 1: Fundamentos del Lenguaje

1.1 Variables: var, let y const

Las variables son contenedores que almacenan datos. En JavaScript moderno tienes dos formas de declararlas:

// const: valor que NO cambiará (usa este por defecto)
const nombre = "8devmx";
const year = 2026;

// let: valor que SÍ puede cambiar
let contador = 0;
contador = 1; // válido
contador = contador + 1; // válido

// var: NO usar en código moderno
var viejo = "evita esto";

¿Por qué evitar var?

// var tiene "scope de función" — se filtra fuera de bloques
if (true) {
  var x = 10;
}
console.log(x); // 10 — ¡se escapó del if!

// let y const tienen "scope de bloque" — se quedan dentro
if (true) {
  let y = 10;
}
console.log(y); // ReferenceError: y is not defined — correcto

Regla de oro: Usa const siempre que puedas. Usa let solo cuando necesites reasignar. Nunca uses var.

1.2 Tipos de datos

JavaScript tiene 7 tipos de datos primitivos y 2 tipos de referencia:

// === Primitivos ===

// String (texto)
const saludo = "Hola mundo";
const nombre = '8devmx';

// Number (enteros y decimales)
const edad = 25;
const precio = 19.99;

// Boolean (verdadero/falso)
const esActivo = true;
const estaVacio = false;

// Undefined (declarado sin valor)
let sinValor;
console.log(sinValor); // undefined

// Null (valor intencionalmente vacío)
const resultado = null;

// BigInt (números enormes)
const numeroGigante = 9007199254740991n;

// Symbol (identificador único)
const id = Symbol("id");

// === Referencia ===

// Object (colección de clave-valor)
const usuario = {
  nombre: "Abraham",
  edad: 30,
  activo: true
};

// Array (lista ordenada)
const lenguajes = ["JavaScript", "PHP", "Python"];

1.3 Operadores

// Aritméticos
10 + 5   // 15 (suma)
10 - 5   // 5  (resta)
10 * 5   // 50 (multiplicación)
10 / 5   // 2  (división)
10 % 3   // 1  (módulo/residuo)
10 ** 2  // 100 (potencia)

// Comparación
5 === 5    // true (igualdad estricta — usa SIEMPRE ===)
5 == "5"   // true (igualdad débil — NUNCA uses ==)
5 !== 3    // true (desigualdad estricta)
5 > 3      // true
5 <= 5     // true

// Lógicos
true && true   // true (AND — ambos deben ser verdaderos)
true || false  // true (OR — al menos uno verdadero)
!true          // false (NOT — invierte el valor)

// Ternario (if/else en una línea)
const acceso = edad >= 18 ? "Adulto" : "Menor";

// Nullish coalescing (?? — usa el valor de la derecha si el izquierdo es null o undefined)
const nombre = usuario.nombre ?? "Anónimo";

// Optional chaining (?. — no falla si la propiedad no existe)
const ciudad = usuario?.direccion?.ciudad;

Para más detalle sobre estos operadores modernos, revisa nuestro artículo sobre Optional Chaining y Nullish Coalescing.

1.4 Condicionales

// if / else if / else
const nota = 85;

if (nota >= 90) {
  console.log("Excelente");
} else if (nota >= 70) {
  console.log("Aprobado");
} else {
  console.log("Reprobado");
}

// Switch (para múltiples valores de una variable)
const dia = "lunes";

switch (dia) {
  case "lunes":
  case "martes":
  case "miércoles":
  case "jueves":
  case "viernes":
    console.log("Día laboral");
    break;
  case "sábado":
  case "domingo":
    console.log("Fin de semana");
    break;
  default:
    console.log("Día inválido");
}

1.5 Funciones

Las funciones son bloques de código reutilizables que realizan una tarea específica.

// Declaración clásica
function saludar(nombre) {
  return `Hola, ${nombre}!`;
}

// Arrow function (moderna y concisa)
const sumar = (a, b) => a + b;

// Con cuerpo
const procesarUsuario = (usuario) => {
  const nombre = usuario.nombre.toUpperCase();
  const edad = usuario.edad;
  return `${nombre} tiene ${edad} años`;
};

// Con valores por defecto
const crearSaludo = (nombre = "mundo") => `Hola, ${nombre}!`;

crearSaludo();           // "Hola, mundo!"
crearSaludo("8devmx");  // "Hola, 8devmx!"

1.6 Arrays y objetos

// ===== ARRAYS =====
const frutas = ["Manzana", "Banana", "Naranja"];

// Acceder por índice (empieza en 0)
frutas[0]; // "Manzana"
frutas[frutas.length - 1]; // "Naranja" (último)

// Métodos más usados
frutas.push("Uva");           // Agregar al final
frutas.pop();                 // Eliminar el último
frutas.unshift("Fresa");      // Agregar al inicio
frutas.shift();               // Eliminar el primero
frutas.includes("Banana");    // true
frutas.indexOf("Naranja");    // 2

// Métodos funcionales (no modifican el original)
const numeros = [1, 2, 3, 4, 5];

numeros.filter(n => n > 3);           // [4, 5]
numeros.map(n => n * 2);              // [2, 4, 6, 8, 10]
numeros.reduce((total, n) => total + n, 0);  // 15
numeros.find(n => n > 3);             // 4 (primero que cumpla)
numeros.every(n => n > 0);            // true (todos cumplen)
numeros.some(n => n > 4);             // true (alguno cumple)

// ===== OBJETOS =====
const producto = {
  nombre: "Laptop",
  precio: 999,
  disponible: true,
  specs: {
    ram: "16GB",
    almacenamiento: "512GB SSD"
  }
};

// Acceder a propiedades
producto.nombre;           // "Laptop"
producto["precio"];        // 999
producto.specs.ram;        // "16GB"
producto.specs?.cpu;       // undefined (no falla gracias a optional chaining)

// Modificar
producto.precio = 899;
producto.descuento = 10;  // Agregar nueva propiedad

// Destructuring
const { nombre, precio } = producto;
console.log(nombre); // "Laptop"

// Spread (crear copia con cambios)
const productoConEnvio = { ...producto, envio: "gratis" };

Para profundizar en el manejo de arrays, te recomiendo Arrays y Objetos en JavaScript y para funciones, Funciones en JavaScript.

1.7 Loops

// for clásico
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// for...of (para arrays — el más recomendado)
const colores = ["rojo", "verde", "azul"];
for (const color of colores) {
  console.log(color);
}

// for...in (para objetos — itera sobre las claves)
const persona = { nombre: "Ana", edad: 28 };
for (const clave in persona) {
  console.log(`${clave}: ${persona[clave]}`);
}

// forEach (método de array)
colores.forEach((color, index) => {
  console.log(`${index}: ${color}`);
});

// while (cuando no sabes cuántas iteraciones)
let intentos = 0;
while (intentos < 3) {
  console.log(`Intento ${intentos + 1}`);
  intentos++;
}

Parte 2: JavaScript y el DOM

2.1 ¿Qué es el DOM?

El DOM (Document Object Model) es la representación de tu HTML como un árbol de objetos que JavaScript puede manipular. Cuando el navegador carga tu HTML, crea este modelo en memoria. JavaScript puede leerlo, modificarlo, crear nuevos elementos y eliminar existentes.

Sin manipulación del DOM, JavaScript no puede cambiar lo que el usuario ve en pantalla. Es la habilidad más importante para cualquier desarrollador frontend.

Para una explicación detallada, visita nuestra guía de ¿Qué es el DOM y cómo manipularlo?.

2.2 Seleccionar elementos

// querySelector — el más versátil (devuelve el primero)
const titulo = document.querySelector("#titulo");
const primerParrafo = document.querySelector("p");
const btnPrimario = document.querySelector(".btn-primary");

// querySelectorAll — devuelve TODOS los que coincidan
const todosLosParrafos = document.querySelectorAll("p");
const items = document.querySelectorAll(".menu li");

// Iterar sobre NodeList
items.forEach(item => {
  item.style.color = "white";
});

Para entender la diferencia completa entre estos métodos, lee querySelector vs querySelectorAll.

2.3 Modificar contenido y estilos

const titulo = document.querySelector("#titulo");

// Cambiar texto (seguro — escapa HTML)
titulo.textContent = "Nuevo título";

// Cambiar HTML (cuidado con XSS si el contenido viene del usuario)
titulo.innerHTML = '<span class="highlight">Nuevo título</span>';

// Cambiar estilos (no recomendado para muchos estilos)
titulo.style.color = "#E53E3E";
titulo.style.fontSize = "2rem";

// Usar clases CSS (RECOMENDADO)
titulo.classList.add("destacado");
titulo.classList.remove("oculto");
titulo.classList.toggle("activo");
titulo.classList.contains("activo"); // true o false

// Crear y agregar elementos
const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Párrafo creado dinámicamente";
nuevoParrafo.classList.add("nota");
document.body.appendChild(nuevoParrafo);

// Eliminar elementos
const viejo = document.querySelector(".viejo");
viejo.remove();

2.4 Eventos

Los eventos son acciones que ocurren en la página: clics, teclas, scroll, envío de formularios, etc. JavaScript puede “escuchar” estos eventos y ejecutar código cuando ocurren.

// Escuchar un clic
const boton = document.querySelector("#mi-boton");

boton.addEventListener("click", (evento) => {
  console.log("¡Clic detectado!", evento);
});

// Envío de formulario
const formulario = document.querySelector("#mi-form");

formulario.addEventListener("submit", (evento) => {
  evento.preventDefault(); // Evita el envío tradicional

  const datos = new FormData(formulario);
  const nombre = datos.get("nombre");
  const email = datos.get("email");

  console.log("Formulario enviado:", nombre, email);
});

// Teclado
document.addEventListener("keydown", (evento) => {
  if (evento.key === "Escape") {
    console.log("Escape presionado");
    cerrarModal();
  }
});

// Scroll (con debounce para rendimiento)
let scrollTimeout;
window.addEventListener("scroll", () => {
  if (scrollTimeout) return;
  scrollTimeout = setTimeout(() => {
    console.log("Scroll:", window.scrollY);
    scrollTimeout = null;
  }, 100);
});

Para optimizar eventos como scroll con debounce, revisa Debounce en JavaScript.

Eventos más comunes:

EventoCuándo se disparaUso típico
clickClic en elementoBotones, enlaces
submitEnvío de formularioFormularios
inputCambio en inputBúsqueda en tiempo real
changeCambio de valor confirmadoSelects, checkboxes
keydownTecla presionadaAtajos de teclado
scrollDesplazamientoNavbar sticky
loadCarga completaInicialización
mouseover / mouseoutMouse entra/saleTooltips, hover effects

Parte 3: JavaScript Moderno (ES6+)

3.1 Arrow Functions

Las arrow functions son una sintaxis más corta para definir funciones, introducida en ES6:

// Función clásica
function sumar(a, b) {
  return a + b;
}

// Arrow function equivalente
const sumar = (a, b) => a + b;

// Con un solo parámetro (sin paréntesis)
const doble = n => n * 2;

// Sin parámetros
const saludar = () => "Hola!";

// Con cuerpo (cuando hay más de una instrucción)
const procesar = (a, b) => {
  const resultado = a + b;
  console.log(`Resultado: ${resultado}`);
  return resultado;
};

3.2 Template Literals

Permiten insertar variables y expresiones dentro de strings usando backticks:

const nombre = "8devmx";
const year = 2026;

// Forma antigua
console.log("Bienvenido a " + nombre + " en " + year);

// Template literal
console.log(`Bienvenido a ${nombre} en ${year}`);

// Con expresiones
console.log(`En 5 años será ${year + 5}`);

// Multilínea
const html = `
  <article>
    <h2>${nombre}</h2>
    <p>Fundado en ${year}</p>
  </article>
`;

3.3 Destructuring

Extraer valores de objetos y arrays de forma concisa:

// Destructuring de objetos
const usuario = { nombre: "Ana", edad: 28, ciudad: "CDMX" };
const { nombre, edad } = usuario;
console.log(nombre); // "Ana"

// Con alias
const { nombre: userName } = usuario;

// Con valores por defecto
const { pais = "México" } = usuario;

// Destructuring de arrays
const colores = ["rojo", "verde", "azul"];
const [primero, segundo] = colores;
console.log(primero); // "rojo"

// Destructuring en parámetros de función
const mostrarInfo = ({ nombre, edad }) => {
  console.log(`${nombre} tiene ${edad} años`);
};

mostrarInfo(usuario); // "Ana tiene 28 años"

3.4 Spread y Rest

El operador ... tiene dos usos distintos:

// SPREAD: expandir un array u objeto
const base = [1, 2, 3];
const extendido = [...base, 4, 5];  // [1, 2, 3, 4, 5]

const config = { tema: "oscuro", idioma: "es" };
const completo = { ...config, notificaciones: true };

// REST: agrupar argumentos restantes
const sumarTodo = (...numeros) => {
  return numeros.reduce((total, n) => total + n, 0);
};

sumarTodo(1, 2, 3, 4, 5); // 15

3.5 Métodos de Array

Los métodos funcionales de array son herramientas poderosísimas en JavaScript moderno:

const productos = [
  { nombre: "Laptop", precio: 999, categoria: "tech" },
  { nombre: "Libro", precio: 25, categoria: "educacion" },
  { nombre: "Mouse", precio: 49, categoria: "tech" },
  { nombre: "Curso", precio: 199, categoria: "educacion" },
];

// filter: crear un nuevo array con elementos que cumplan una condición
const tech = productos.filter(p => p.categoria === "tech");
// [{ nombre: "Laptop" ... }, { nombre: "Mouse" ... }]

// map: transformar cada elemento
const nombres = productos.map(p => p.nombre);
// ["Laptop", "Libro", "Mouse", "Curso"]

// reduce: acumular valores en uno solo
const total = productos.reduce((acc, p) => acc + p.precio, 0);
// 1272

// find: encontrar el primer elemento que cumpla
const libro = productos.find(p => p.nombre === "Libro");

// some/every: verificar condición
const hayTech = productos.some(p => p.categoria === "tech");  // true
const todosBaratos = productos.every(p => p.precio < 50);      // false

// Encadenamiento (la verdadera potencia)
const techBaratos = productos
  .filter(p => p.categoria === "tech")
  .filter(p => p.precio < 100)
  .map(p => p.nombre);
// ["Mouse"]

Parte 4: JavaScript Asíncrono

4.1 Callbacks y el problema del Callback Hell

Un callback es una función que se pasa como argumento a otra función para que se ejecute después:

// Callback simple
setTimeout(() => {
  console.log("Esto se ejecuta después de 2 segundos");
}, 2000);

// Callback en eventos
document.querySelector("#btn").addEventListener("click", () => {
  console.log("Botón clickeado");
});

El problema: Cuando necesitas hacer operaciones secuenciales (como pedir datos al servidor y luego procesarlos), los callbacks se anidan profundamente:

// Callback Hell — NO HACER
obtenerUsuario(function(usuario) {
  obtenerPedidos(usuario.id, function(pedidos) {
    obtenerDetalles(pedidos[0].id, function(detalles) {
      obtenerHistorial(detalles.clienteId, function(historial) {
        console.log(historial);
        // ¡Cuatro niveles de indentación!
      });
    });
  });
});

Para evitar esto, JavaScript moderno ofrece Promesas y async/await.

4.2 Promesas

Una Promesa es un objeto que representa una operación que terminará en el futuro:

const pedirDatos = new Promise((resolve, reject) => {
  // Simular petición al servidor
  setTimeout(() => {
    const exito = true;
    if (exito) {
      resolve({ nombre: "8devmx", curso: "JavaScript" });
    } else {
      reject("Error al conectar");
    }
  }, 1000);
});

pedirDatos
  .then(datos => console.log("Éxito:", datos))
  .catch(error => console.error("Error:", error));

4.3 Async/Await

async/await hace que el código asíncrono se lea como síncrono:

// async marca la función como asíncrona
// await espera a que la promesa se resuelva

async function cargarDatos() {
  try {
    const usuario = await obtenerUsuario();
    const pedidos = await obtenerPedidos(usuario.id);
    const detalles = await obtenerDetalles(pedidos[0].id);
    console.log(detalles);
  } catch (error) {
    console.error("Algo falló:", error);
  }
}

Para más información sobre este patrón, revisa Evitar Callback Hell con Promesas y Async/Await.

4.4 Fetch API

La forma moderna de hacer peticiones HTTP:

// GET — obtener datos
async function cargarUsuarios() {
  try {
    const respuesta = await fetch("https://jsonplaceholder.typicode.com/users");

    // Verificar que la respuesta sea exitosa
    if (!respuesta.ok) {
      throw new Error(`HTTP ${respuesta.status}: ${respuesta.statusText}`);
    }

    const usuarios = await respuesta.json();
    console.log(usuarios);
    return usuarios;
  } catch (error) {
    console.error("Error al cargar:", error);
  }
}

// POST — enviar datos
async function crearUsuario(datos) {
  try {
    const respuesta = await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(datos),
    });

    const nuevoUsuario = await respuesta.json();
    console.log("Creado:", nuevoUsuario);
  } catch (error) {
    console.error("Error al crear:", error);
  }
}

// Usar las funciones
cargarUsuarios();
crearUsuario({ nombre: "Abraham", email: "hola@8devmx.com" });

Para errores específicos como 404 y 500, revisa Manejo de errores en Fetch API.

Parte 5: Proyecto Práctico Completo

Vamos a construir una lista de tareas (to-do app) que combine todo lo aprendido:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Lista de Tareas</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: #111213;
      color: #E8E6E1;
      max-width: 500px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    h1 {
      font-family: 'Space Grotesk', sans-serif;
      text-align: center;
      margin-bottom: 1.5rem;
    }
    .form-container {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
    }
    #nueva-tarea {
      flex: 1;
      padding: 0.75rem;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 0.5rem;
      background: #1A1B1D;
      color: #E8E6E1;
      font-size: 1rem;
    }
    #nueva-tarea:focus {
      outline: none;
      border-color: #E53E3E;
    }
    .btn-agregar {
      padding: 0.75rem 1.5rem;
      background: #E53E3E;
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-weight: 600;
      cursor: pointer;
    }
    .btn-agregar:hover { background: #C53030; }
    .stats {
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;
      color: #8A8A8E;
      margin-bottom: 1rem;
    }
    .lista-tareas {
      list-style: none;
    }
    .tarea {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem;
      background: #1A1B1D;
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .tarea.completada .tarea-texto {
      text-decoration: line-through;
      color: #8A8A8E;
    }
    .tarea-texto {
      flex: 1;
      cursor: pointer;
    }
    .btn-eliminar {
      background: none;
      border: none;
      color: #E53E3E;
      cursor: pointer;
      font-size: 1.2rem;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .tarea:hover .btn-eliminar { opacity: 1; }
    .vacio {
      text-align: center;
      padding: 2rem;
      color: #8A8A8E;
    }
  </style>
</head>
<body>

  <h1>Mi Lista de Tareas</h1>

  <form class="form-container" id="form-tarea">
    <input type="text" id="nueva-tarea" placeholder="¿Qué necesitas hacer?" required>
    <button type="submit" class="btn-agregar">Agregar</button>
  </form>

  <div class="stats">
    <span id="contador">0 tareas</span>
    <button id="limpiar-completadas" class="btn-limpiar" style="display:none;">Limpiar completadas</button>
  </div>

  <ul class="lista-tareas" id="lista"></ul>

  <script>
    // ===== ESTADO =====
    let tareas = JSON.parse(localStorage.getItem("tareas")) || [];

    // ===== SELECCIONES =====
    const form = document.querySelector("#form-tarea");
    const input = document.querySelector("#nueva-tarea");
    const lista = document.querySelector("#lista");
    const contador = document.querySelector("#contador");
    const btnLimpiar = document.querySelector("#limpiar-completadas");

    // ===== FUNCIONES =====
    const guardar = () => {
      localStorage.setItem("tareas", JSON.stringify(tareas));
    };

    const actualizarContador = () => {
      const total = tareas.length;
      const completadas = tareas.filter(t => t.completada).length;
      contador.textContent = `${completadas}/${total} tareas`;
      btnLimpiar.style.display = completadas > 0 ? "inline" : "none";
    };

    const renderizar = () => {
      lista.innerHTML = "";

      if (tareas.length === 0) {
        lista.innerHTML = '<li class="vacio">No hay tareas. ¡Agrega una!</li>';
        actualizarContador();
        return;
      }

      tareas.forEach(tarea => {
        const li = document.createElement("li");
        li.className = `tarea ${tarea.completada ? "completada" : ""}`;
        li.dataset.id = tarea.id;

        li.innerHTML = `
          <input type="checkbox" ${tarea.completada ? "checked" : ""}>
          <span class="tarea-texto">${escapeHTML(tarea.texto)}</span>
          <button class="btn-eliminar" aria-label="Eliminar tarea">✕</button>
        `;

        lista.appendChild(li);
      });

      actualizarContador();
    };

    const escapeHTML = (str) => {
      const div = document.createElement("div");
      div.textContent = str;
      return div.innerHTML;
    };

    const agregarTarea = (texto) => {
      const nueva = {
        id: Date.now(),
        texto: texto.trim(),
        completada: false,
      };
      tareas.push(nueva);
      guardar();
      renderizar();
    };

    const toggleTarea = (id) => {
      const tarea = tareas.find(t => t.id === id);
      if (tarea) {
        tarea.completada = !tarea.completada;
        guardar();
        renderizar();
      }
    };

    const eliminarTarea = (id) => {
      tareas = tareas.filter(t => t.id !== id);
      guardar();
      renderizar();
    };

    const limpiarCompletadas = () => {
      tareas = tareas.filter(t => !tarea.completada);
      guardar();
      renderizar();
    };

    // ===== EVENTOS =====
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      if (input.value.trim()) {
        agregarTarea(input.value);
        input.value = "";
        input.focus();
      }
    });

    lista.addEventListener("click", (e) => {
      const tarea = e.target.closest(".tarea");
      if (!tarea) return;

      const id = Number(tarea.dataset.id);

      if (e.target.matches("input[type='checkbox']")) {
        toggleTarea(id);
      } else if (e.target.matches(".btn-eliminar")) {
        eliminarTarea(id);
      } else if (e.target.matches(".tarea-texto")) {
        toggleTarea(id);
      }
    });

    btnLimpiar.addEventListener("click", limpiarCompletadas);

    // ===== INICIALIZAR =====
    renderizar();
  </script>

</body>
</html>

Este proyecto demuestra:

  • Variables const y let apropiadamente
  • Funciones arrow y con cuerpo
  • Arrays con filter, find, forEach, push
  • Objetos como datos
  • DOM con querySelector, createElement, innerHTML, appendChild
  • Eventos con addEventListener y delegación de eventos
  • localStorage para persistencia
  • Validación de formularios
  • Prevención de XSS con escapeHTML
  • CSS con variables, flexbox, transiciones y hover effects

Parte 6: Siguientes Pasos

1. Profundiza en JavaScript

2. Aprende un framework

Una vez que domines JavaScript vanilla, el siguiente paso natural es un framework:

  • React — El más demandado en el mercado laboral
  • Vue.js — Curva de aprendizaje más suave
  • Svelte — Sin virtual DOM, rendimiento superior
  • Astro — Ideal para sitios de contenido (el que usa 8devmx)

3. Aprende TypeScript

TypeScript es JavaScript con tipos. Te ayuda a encontrar errores antes de ejecutar el código y es el estándar en proyectos profesionales:

// JavaScript
const sumar = (a, b) => a + b;

// TypeScript
const sumar = (a: number, b: number): number => a + b;

4. Construye proyectos

La mejor forma de aprender es haciendo. Ideas de proyectos por nivel:

NivelProyectoConceptos que practica
PrincipianteCalculadoraVariables, funciones, eventos
PrincipianteLista de tareasDOM, arrays, localStorage
IntermedioApp del climaFetch API, async/await, JSON
IntermedioQuiz interactivoCondicionales, arrays, score
AvanzadoChat en tiempo realWebSockets, eventos, state
AvanzadoE-commerceAPIs, carrito, filtros

5. Sigue la Ruta del Ninja

En 8devmx tenemos una ruta estructurada para aprender JavaScript paso a paso:

Resumen de esta guía:

ConceptoImportanciaTiempo estimado
Variables (let/const)Esencial1-2 días
Tipos de datosEsencial2-3 días
FuncionesEsencial3-5 días
Arrays y objetosEsencial1 semana
DOMEsencial1-2 semanas
EventosEsencial3-5 días
Arrow functionsEsencial1 día
Template literalsEsencial1 día
DestructuringMuy importante2-3 días
Métodos de arrayEsencial1 semana
PromesasMuy importante3-5 días
async/awaitEsencial1 semana
Fetch APIEsencial3-5 días
localStorageImportante1-2 días
Manejo de erroresImportante2-3 días

Total estimado: 2-4 meses con práctica diaria de 1-2 horas.

Recuerda: la programación no se aprend leyendo — se aprende escribiendo código. Cada concepto que veas, ponlo en práctica inmediatamente. Crea archivos .js, abre la consola del navegador y experimenta. Los errores son tu mejor maestro.