Aprende diseño y desarrollo web

Cursos gratuitos interactivos

Curso de JavaScript

Curso de JavaScript para llevar a código real la lógica aprendida en Fundamentos de Programación: variables, flujo, funciones, DOM, eventos y desarrollo frontend.

Recursos (PDF, imágenes, tests, vídeos...) Recursos

Tests

Pon a prueba tus conocimientos de JavaScript.

Javascript | Frontend | Desarrollo Web | CulTest

Lecciones

62

Introducción a JavaScript: pensar en comportamiento, no en magia

Aprende qué resuelve JavaScript en una aplicación real, cómo se ejecuta en el navegador y cuál es el modelo mental base para pasar de datos a comportamiento.

Herramientas de JavaScript: tu entorno de trabajo real

Aprende a montar un entorno técnico sólido con VS Code y DevTools para ejecutar, inspeccionar y depurar JavaScript desde el primer bloque del curso.

Consola del navegador: depuración práctica desde el primer día

Domina la consola como herramienta de trabajo real: logs con intención, lectura de errores, tablas, tiempos y un flujo de debugging aplicable a cualquier lección.

Sintaxis JavaScript: escribe código legible y mantenible

Aprende a estructurar sentencias, bloques y comentarios con criterio para evitar errores básicos y preparar una base sólida para todo el curso.

Variables en JavaScript: modelar datos con criterio

Aprende a usar `const` y `let` correctamente, entender tipos básicos y evitar errores comunes de conversión para escribir lógica más segura desde el inicio.

Tipos y coerción en JavaScript: evita bugs silenciosos

Entiende cómo JavaScript trata los tipos y cuándo convierte valores automáticamente para escribir operaciones y comparaciones predecibles.

Operadores en JavaScript: pensar como la máquina para decidir mejor

Domina operadores aritméticos, de comparación, lógicos y de asignación para construir condiciones fiables, evitar bugs de coerción y escribir reglas de negocio claras.

Control de flujo: diseña decisiones claras con if, else if y switch

Aprende a modelar decisiones de negocio con ramas limpias, evitar anidaciones caóticas y depurar condiciones para que tu código tome la ruta correcta siempre.

Bucles en JavaScript: repetir sin romper lógica ni rendimiento

Aprende a usar for y while con seguridad, evitar bucles infinitos, recorrer datos reales y construir patrones de acumulación, conteo y filtrado paso a paso.

Funciones en JavaScript: encapsular lógica con intención

Domina la base de funciones para evitar duplicación, mejorar legibilidad y construir piezas reutilizables con parámetros, retorno y sintaxis moderna.

Scope, hoisting y TDZ: por qué tu variable existe (o falla) en cada línea

Domina alcance léxico, elevación y zona temporal muerta para evitar ReferenceError, corregir sombras de variables y escribir funciones más predecibles.

Debug en JavaScript: encuentra el bug exacto antes de tocar código

Aprende depuración profesional con breakpoints, trazas de consola y lectura de stack trace para corregir errores con método en lugar de adivinar.

Arrays en JavaScript: listas con estructura y control

Aprende a crear, leer, recorrer y modificar arrays entendiendo índices, longitud y mutación para construir lógica de listas sin errores comunes.

Objetos en JavaScript: representar entidades reales

Aprende a modelar datos con objetos, acceder a propiedades, crear métodos con `this` y trabajar de forma segura con claves dinámicas y acceso opcional.

Clases en JavaScript: constructor, métodos e instancias

Aprende a usar la sintaxis class para crear objetos con la misma estructura, inicializar propiedades con constructor y encapsular comportamiento en métodos.

Destructuring en arrays y objetos: leer datos complejos con código limpio

Aprende destructuring en escenarios reales de frontend para extraer propiedades, renombrar variables, usar valores por defecto y trabajar con respuestas de API sin ruido.

Spread y rest: copiar, fusionar y agrupar datos sin mutaciones peligrosas

Domina los operadores spread (`...`) y rest para trabajar con arrays/objetos de forma inmutable, construir funciones flexibles y evitar bugs por referencia compartida.

Métodos de array en producción: map, filter y reduce con criterio

Aprende a transformar, filtrar y agregar colecciones con `map`, `filter` y `reduce` en flujos reales de frontend, manteniendo código legible y fácil de depurar.

Strings y números sin sorpresas: parseo, formato y precisión

Aprende a convertir y formatear datos de formularios y APIs sin caer en coerciones accidentales ni errores de redondeo, con un flujo de trabajo robusto para frontend real.

Fechas e internacionalización con Intl

Aprende a trabajar con fechas y dinero sin errores silenciosos: crea objetos Date fiables, formatea por locale con Intl y evita bugs típicos de zona horaria.

Array vs Object vs Set vs Map: elegir estructura correcta

Aprende a seleccionar la estructura de datos adecuada según tu objetivo: listas ordenadas, diccionarios simples, claves únicas o claves de cualquier tipo.

Manejo de errores con try/catch sin romper la UX

Aprende a detectar, capturar y comunicar errores de forma profesional usando `try/catch`, `throw` y `finally`, manteniendo una interfaz estable para la persona usuaria.

Módulos ESM: organizar JavaScript por responsabilidades

Aprende a dividir código en archivos reutilizables con export/import, evitando dependencias ocultas y mejorando mantenibilidad, pruebas y escalabilidad.

DOM aplicado: renderizar, actualizar y depurar interfaces sin caos

Domina el trabajo real con DOM: selección fiable de nodos, render dinámico de listas, actualización de estados visuales y patrones para evitar manipulaciones frágiles.

Eventos en interfaces reales: del click básico a la delegación inteligente

Aprende a diseñar interacciones mantenibles con `addEventListener`, objeto `event`, `preventDefault`, gestión de propagación y delegación para listas dinámicas.

Delegación de eventos: menos listeners, más escalabilidad

Aprende a manejar eventos de listas dinámicas usando un único listener en el contenedor con `event.target`, `closest` y guard clauses.

Render dinámico: pintar listas y tarjetas desde datos

Aprende a transformar arrays en UI real de forma mantenible: plantillas de render, estados de carga/vacío/error, actualización incremental y prevención de problemas comunes.

DOM performance: evita reflows y trabajo innecesario

Aprende a reducir coste de renderizado agrupando cambios y minimizando lecturas/escrituras conflictivas del layout.

Accesibilidad en interacciones DOM con JavaScript

Implementa componentes interactivos que funcionen con teclado, lector de pantalla y gestión correcta del foco.

Canvas 2D con JavaScript: dibujar datos en un lienzo

Aprende a usar el elemento canvas y su contexto 2D para limpiar, dibujar y repintar formas desde datos controlados por JavaScript.

Formularios de producción: validación multicapa, UX y envío confiable

Construye formularios robustos de extremo a extremo con `submit`, `FormData`, validación declarativa por campo, feedback accesible y envío HTTP controlado con `fetch`.

Persistencia en navegador: localStorage y sessionStorage

Guarda estado útil en cliente con criterio: qué persistir, cómo serializar y cómo evitar inconsistencias.

Detectar el idioma del usuario y redirigir a la versión correcta

Aprende a leer el idioma del navegador, normalizar locales y redirigir de forma segura a la versión web adecuada sin crear bucles ni romper la experiencia del usuario.

Fundamentos de asincronía: event loop, call stack y colas

Entiende por qué el código asíncrono se ejecuta en cierto orden y evita bugs de sincronización.

Promesas en JavaScript: encadenado limpio y manejo de errores

Domina `then/catch/finally`, composición de promesas y patrones para evitar callback hell.

Async/Await avanzado: asincronía clara, segura y escalable

Domina async/await en escenarios reales: flujo secuencial vs paralelo, manejo de errores por capas, estados de UI y patrones para mantener código asíncrono legible.

Fetch profesional: contratos HTTP claros y UX resistente

Domina `fetch` en escenarios reales: validación de `response.ok`, parseo seguro, envío de JSON, cancelación de peticiones y manejo de estados UI sin inconsistencias.

Fetch avanzado: cancelar, reintentar y evitar carreras

Aprende a construir peticiones HTTP resistentes con AbortController, timeouts, retry con backoff y protección contra respuestas fuera de orden en interfaces dinámicas.

Usar Promise.all / allSettled / race / any

Domina los combinadores de promesas para coordinar múltiples tareas asíncronas con criterio de producto: rapidez, tolerancia a errores o primer resultado útil.

Integrar APIs del navegador (Clipboard, URL, etc.)

Domina APIs modernas del navegador (Clipboard, URL, History, IntersectionObserver) con foco en compatibilidad y UX real.

Introducción a tiempo real

Compara WebSocket y SSE con criterios técnicos claros para implementar actualizaciones en tiempo real sin sobrecoste innecesario.

Escribir código mantenible y legible

Aplica principios de código limpio en JavaScript para mejorar lectura, mantenibilidad y velocidad de cambio en equipos.

Aplicar patrones prácticos de diseño

Aplica patrones de diseño útiles en JavaScript sin sobreingeniería: módulo, fábrica, estrategia y composición.

Reducir bugs por mutación accidental

Reduce bugs de estado compartido aplicando inmutabilidad práctica en objetos y arrays en flujos UI y lógica de negocio.

Medir y optimizar rendimiento JS

Mide rendimiento con datos reales y aplica optimizaciones de alto impacto antes de microajustes irrelevantes.

Prevenir XSS y malas prácticas comunes

Aprende a prevenir XSS, fugas de datos y errores de validación en frontend con prácticas defendibles en producción.

Tests unitarios y de integración básicos

Escribe tests unitarios y de integración en JavaScript para evitar regresiones y documentar comportamiento esperado.

Gestionar dependencias y scripts npm

Gestiona scripts y dependencias npm con disciplina para evitar entornos frágiles y builds inconsistentes.

Entender bundling, módulos y build

Entiende cómo empaquetar JavaScript con criterio para reducir peso, mejorar cach? y acelerar carga inicial.

Cómo piensa el motor y optimizaciones reales

Comprende cómo V8 optimiza y desoptimiza código para escribir JavaScript más estable y rápido en producción.

Transición de JS a TypeScript

Haz la transición de JavaScript a TypeScript sin frenar el desarrollo, empezando por tipado progresivo de valor real.

Entender runtime de Node.js

Entiende cómo ejecuta Node.js tu código, cómo funciona el event loop y cómo organizar scripts backend simples sin acoplamiento.

CommonJS vs ESM y estructura backend

Aprende a separar código con CommonJS y ESM para evitar dependencias circulares y mantener un backend escalable.

Leer/escribir archivos de forma segura

Trabaja con archivos en Node sin bloquear el event loop, validando rutas y controlando errores de lectura y escritura.

Crear API básica con Node

Construye una API HTTP con Node nativo entendiendo rutas, status codes, parseo de JSON y manejo de errores.

API REST con Express + middlewares

Implementa una API REST con Express usando middlewares, validación de entrada y manejo centralizado de errores.

Fundamentos de auth y sesiones/JWT

Comprende autenticación y autorización en Node para implementar sesiones o JWT con validaciones y caducidad controlada.

Retos de integración (1): pensar, construir y depurar como en trabajo real

Consolida fundamentos resolviendo retos compuestos que combinan lógica, arrays, DOM, eventos y validación incremental con enfoque de ingeniería práctica.

Retos de integración (2): asincronía, API y estados de interfaz

Resuelve escenarios de frontend real combinando `fetch`, `async/await`, validación HTTP, transformación de datos y render dinámico con control de errores.

Dashboard con consumo de API y filtros

Construye un dashboard real con consumo de API, filtros y estados de carga/error aplicando todo el bloque de frontend JS.

Mini app CRUD frontend + backend

Entrega una mini app CRUD full stack conectando frontend JS con backend Node, validación y flujo básico de autenticación.

Despedida PRO: de curso terminado a perfil profesional

Convierte lo aprendido en resultados visibles: plan de 60 días, métricas de progreso, portfolio con criterio y transición ordenada hacia React/TypeScript.

Página 1 de 1

Roadmap

Desarrollo Web

Ruta principal de frontend, frameworks y stack de desarrollo web profesional.

Lenguajes pilares del desarrollador frontend