Aprender JavaScript: guía para principiantes con plan de 30 días

JavaScript es el único lenguaje de programación que todos los navegadores ejecutan de forma nativa. Aprender JavaScript es, por tanto, aprender a dar vida a una página web: reaccionar a un clic, validar un formulario, cargar datos sin recargar la página. Esta guía es la puerta de entrada al tutorial de JavaScript de Gekkode: te dice por dónde empezar, en qué orden avanzar, cuánto tiempo reservar y cómo comprobar que progresas.

Está pensada tanto para principiantes absolutos como para quienes ya han copiado y pegado JavaScript sin entenderlo de verdad. No hace falta ningún conocimiento previo de programación. El curso es gratuito y cada capítulo termina con un ejercicio.

Por qué aprender JavaScript hoy

Tres razones prácticas, sin discurso comercial:

• Está en toda la web. Una web corporativa, una tienda online, una aplicación de gestión: en cuanto una página hace algo más que mostrar texto, hay JavaScript detrás. Es el lenguaje del navegador, y el navegador es el entorno de ejecución más extendido del mundo.
• No se queda en el navegador. Con Node.js, el mismo lenguaje sirve para escribir servidores, herramientas de línea de comandos y scripts de automatización. No aprendes un lenguaje para el front y otro para el resto.
• El ciclo de aprendizaje es inmediato. Escribes tres líneas, recargas la página y ves el resultado. Sin compilación ni instalaciones complicadas: para empezar bastan un archivo de texto y un navegador.

Los asistentes de código han cambiado una cosa: escriben rápido un JavaScript pasable. No han cambiado nada en el hecho de que hay que entender ese código para corregirlo, revisarlo y hacerlo evolucionar. Las bases siguen siendo la mejor inversión.

Qué necesitas saber antes de empezar

Lo estrictamente necesario, nada más:

• Un poco de HTML y CSS. Saber qué es una etiqueta, un atributo, una clase. Si no es tu caso, un día dedicado a las bases de HTML basta para seguir este curso; no necesitas dominar la maquetación.
• Un editor de código. Visual Studio Code es gratuito y colorea el JavaScript sin configurar nada. Cualquier editor de texto plano también sirve.
• Un navegador reciente con su consola de desarrollo (tecla F12). La consola es tu primera herramienta: muestra los resultados y, sobre todo, los errores, con el número de la línea que falla.

No necesitas instalar Node.js, npm ni ningún framework para los doce capítulos. Esas herramientas llegan cuando ya sabes programar.

El curso paso a paso: doce capítulos en orden

El programa sigue una progresión deliberada: cada capítulo solo usa lo que introdujeron los anteriores. Calcula entre veinte y cuarenta minutos por capítulo, ejercicio incluido.

1. Introducción a JavaScript: dónde colocar un script en una página HTML, la etiqueta script, un primer «Hello World» y la consola.
2. Variables y tipos de datos: let, const, cadenas, números, booleanos, undefined y null.
3. Operadores y expresiones: aritmética, comparación (=== en lugar de ==), lógica, concatenación y plantillas de cadena.
4. Las condiciones: if, else, switch y el operador ternario.
5. Los bucles: for, while, for…of y forEach sobre arrays.
6. Las funciones: declaración, parámetros, valor de retorno, funciones flecha y ámbito de las variables.
7. Los objetos: crear, leer, modificar, recorrer y eliminar propiedades.
8. El objeto Math: redondeos, números aleatorios, mínimo y máximo.
9. Manipular la página HTML: seleccionar un elemento, cambiar su texto y sus clases, crear y eliminar elementos (el DOM).
10. Los eventos: reaccionar a un clic, a lo que se teclea o al envío de un formulario con addEventListener.
11. Los módulos ES6: dividir el código en archivos con import y export.
12. Proyecto final: un juego de adivinar un número: todo lo anterior, reunido en un pequeño juego que se juega en el navegador.

El índice completo, con tu progreso, queda visible en la columna izquierda de cada capítulo.

Tu primer programa JavaScript, comentado

Antes del capítulo 1, así es un programa JavaScript completo. No intentes entenderlo todo: localiza solo las cinco ideas que el curso va a detallar.

// 1. Datos: un array de objetos
const panier = [
  { nom: 'Clavier', prix: 49.9, quantite: 1 },
  { nom: 'Souris', prix: 19.5, quantite: 2 },
];

// 2. Una función: un cálculo reutilizable
function totalHT(articles) {
  let total = 0;
  for (const article of articles) {        // 3. Un bucle
    total += article.prix * article.quantite;
  }
  return total;
}

// 4. Una condición
const ht = totalHT(panier);
const fraisDePort = ht >= 50 ? 0 : 4.9;

// 5. Una salida por pantalla
console.log(`Total HT : ${ht.toFixed(2)} €`);
console.log(`Frais de port : ${fraisDePort.toFixed(2)} €`);
console.log(`Total TTC : ${((ht + fraisDePort) * 1.2).toFixed(2)} €`);

Resultado en la consola:

Total HT : 88.90 €
Frais de port : 0.00 €
Total TTC : 106.68 €

Datos, una función, un bucle, una condición, una salida por pantalla: todo programa, por enorme que sea, está hecho de estos ladrillos. El capítulo 2 empieza por el primero, las variables.

Un plan de aprendizaje de treinta días

Este plan supone una hora al día, cinco días a la semana. No tiene nada de obligatorio: es un ritmo que deja tiempo para practicar sin olvidar lo visto el día anterior.

Dos reglas hacen que este plan funcione: repetir el ejercicio del capítulo anterior antes de abrir el siguiente, y escribir cada ejemplo por tu cuenta en lugar de copiarlo.

Cinco ejercicios para principiantes

Para hacer en la consola del navegador o en un archivo exercices.js. Las soluciones solo usan los capítulos 1 a 7.

1. Conversor: escribe una función celsiusVersFahrenheit(c) que devuelva la temperatura convertida (fórmula: c * 9 / 5 + 32). Comprueba que celsiusVersFahrenheit(100) devuelve 212.
2. Par o impar: para cada número del 1 al 20, muestra «par» o «impar» en la consola. Pista: el operador % devuelve el resto de una división.
3. El mayor: escribe maximum(tableau), que devuelva el valor más alto de un array de números, sin usar Math.max.
4. Contar las vocales: escribe compterVoyelles(texte); «JavaScript» debe dar 3.
5. Agenda de contactos: crea un array de tres objetos { nom, ville } y muestra una frase por persona con una plantilla de cadena.

Solución de los ejercicios 1, 3 y 4:

function celsiusVersFahrenheit(c) {
  return c * 9 / 5 + 32;
}
console.log(celsiusVersFahrenheit(100)); // 212

function maximum(tableau) {
  let max = tableau[0];
  for (const valeur of tableau) {
    if (valeur > max) {
      max = valeur;
    }
  }
  return max;
}
console.log(maximum([3, 17, 8, 42, 5])); // 42

function compterVoyelles(texte) {
  let total = 0;
  for (const lettre of texte.toLowerCase()) {
    if ('aeiouy'.includes(lettre)) {
      total += 1;
    }
  }
  return total;
}
console.log(compterVoyelles('JavaScript')); // 3

Si el ejercicio 3 se te ha resistido, es normal: pide guardar un valor en memoria durante un bucle. Es exactamente la habilidad que asienta el capítulo 5.

¿Cuánto se tarda en aprender JavaScript?

La pregunta aparece en cada comienzo, y la respuesta honesta depende de lo que entendamos por «aprender»:

• Leer y modificar un script existente: de una a dos semanas a una hora al día.
• Escribir por tu cuenta un pequeño programa interactivo (formulario, calculadora, juego sencillo): de tres a cuatro semanas; es el objetivo de este curso.
• Ser autónomo en un proyecto real, con datos remotos y un framework: varios meses de práctica regular.

Lo que marca la diferencia no es el número de horas, sino su regularidad. Treinta minutos cada día valen más que cuatro horas el domingo.

¿JavaScript, Python o TypeScript?

Python es más fácil de leer al principio y excelente para datos y scripts. Pero si tu objetivo es la web, JavaScript es imprescindible: ningún otro lenguaje se ejecuta en el navegador. No se excluyen; empieza por el que corresponda a lo que quieres construir.

TypeScript es JavaScript con tipos. Se aprende después, no en su lugar: todo lo que verás aquí sigue siendo válido en TypeScript, y los tipos se entienden mucho mejor una vez que has topado con los errores que evitan.

Recursos gratuitos para continuar

• La documentación de MDN: la referencia que conviene tener siempre abierta; cada método viene explicado con ejemplos.
• javascript.info, en inglés: el curso online más completo, útil en cuanto quieras profundizar en algún punto.
• Los artículos de JavaScript de Gekkode para seguir: las clases, bind, call y apply, convertir una cadena en número, validar un e-mail con una regex.
• Y cuando domines el lenguaje, el tutorial de Vue 3 para descubrir un framework.

Para un método de trabajo, el artículo 5 consejos para aprender de forma eficaz completa esta guía.

Preguntas frecuentes

¿Hay que instalar algo? No. Con un editor de texto y un navegador basta para los doce capítulos.

¿Java y JavaScript son lo mismo? No. Son dos lenguajes sin relación; el nombre es un accidente histórico de 1995.

¿Se puede aprender JavaScript sin saber HTML? Los capítulos 1 a 8 casi no requieren HTML. A partir del capítulo 9, saber leer una página HTML se vuelve necesario.

¿Qué navegador usar? Chrome, Firefox, Edge o Safari en una versión reciente. Todos tienen consola de desarrollo y ejecutan el JavaScript moderno de este curso.

¿Por dónde empezar? Por el capítulo 1, Introducción a JavaScript: veinte minutos para mostrar tu primer mensaje en una página web.