3 consejos para aprender JavaScript que me hubiera gustado escuchar al empezar

Me crucé con esta pregunta y me pareció muy interesante traerla al podcast. A mi nadie me contó estas cosas antes de meterme con JavaScript y, si alguien lo hizo, lo olvidé.

Te voy a proponer esto en formato “consejo” en tres partes:

1. ¿Qué aprender de JavaScript?
2. ¿Cómo aprender JS?
3. ¿Dónde seguir aprendiendo JavaScript?

🤩 Espero que te sea útl y tu camino sea propicio gracias a estas “recomendaciones caseras”.

1. ¿Qué aprender en JavaScript? ¶

Elementos básicos de programación ¶

Para dominar JavaScript, debes tener un buen dominio de cinco elementos básicos de programación que son comunes en cualquier lenguaje: variables, funciones, arrays, condicionales y el manejo de objetos.

Variables

Las variables son como cajas donde puedes guardar cualquier cosa que necesites para tu programa. Puedes asignarles cualquier tipo de dato: números, strings, booleanos, objetos, etc. Aquí tienes un ejemplo de cómo declarar y usar variables en JavaScript:

let nombre = "Pedro";
let edad = 32;
let esProgramador = true;

Funciones

Las funciones son bloques de código que realizan una tarea específica. Puedes definir una función y luego llamarla cuantas veces quieras en tu código. Aquí tienes un ejemplo de una función que suma dos números en JavaScript:

function suma(a, b) {
  return a + b;
}

let resultado = suma(5, 3);  // resultado es 8

Arrays

Los arrays son estructuras de datos que te permiten guardar múltiples valores en una sola variable. Puedes acceder a los valores de un array mediante un índice numérico. Aquí tienes un ejemplo de un array de nombres en JavaScript:

let nombres = ["Pedro", "Ana", "Carlos"];
console.log(nombres[0]);  // imprime "Pedro"

Estructuras de condición

Los condicionales te permiten controlar el flujo de tu programa. Con ellos, puedes hacer que tu programa haga una cosa u otra dependiendo de si se cumple una condición. Aquí tienes un ejemplo de un condicional en JavaScript:

if (edad > 18) {
  console.log("Eres mayor de edad");
} else {
  console.log("Eres menor de edad");
}

Objetos

El manejo de objetos es una característica clave de JavaScript. Los objetos te permiten agrupar datos y funciones relacionados en una sola estructura. Aquí tienes un ejemplo de un objeto que representa a una persona en JavaScript:

let persona = {
  nombre: "Pedro",
  edad: 32,
  saludar: function() {
    console.log("Hola, mi nombre es " + this.nombre);
  }
};

persona.saludar();  // imprime "Hola, mi nombre es Pedro"

Modelo de objetos en JavaScript ¶

El manejo de objetos en JavaScript se refiere a su particular modelo de objetos como datos. Es fundamental aclarar que este concepto no se refiere a la orientación a objetos en sí, aunque JavaScript sí soporta conceptos de orientación a objetos como la herencia y el polimorfismo.

🔥 En JavaScript, los objetos son fundamentalmente colecciones de pares de clave-valor, también conocidos como propiedades.

Estas propiedades pueden contener cualquier tipo de dato, incluyendo funciones, lo cual es una de las características más potentes de JavaScript.

👆 Mira el ejemplo de más arriba sobre la persona para ver un ejemplo de objeto en JavaScript

Importancia del DOM ¶

Otro aspecto crucial para dominar JavaScript es comprender la importancia del Document Object Model (DOM) y cómo este interactúa con los eventos en JavaScript.

El DOM es una interfaz que proporciona JavaScript para interactuar con los elementos de una página web. Es a través del DOM que puedes cambiar el contenido de un elemento, modificar su estilo, crear nuevos elementos, eliminar elementos existentes, y mucho más.

Por ejemplo, el siguiente código utiliza el DOM para cambiar el contenido de un elemento con el id “miElemento”:

document.getElementById("miElemento").textContent = "Nuevo contenido";

Dificultades en la captura de eventos y sincronización ¶

Capturar eventos y manejar la sincronización en JavaScript puede ser desafiante, pero es una habilidad esencial para dominar para lograr un funcionamiento óptimo del lenguaje.

👉 Un evento es algo que sucede en la página web, como un clic de ratón, una pulsación de tecla, la carga de la página, etc. Puedes asignar funciones a estos eventos para que se ejecuten cuando ocurran.

Por ejemplo, el siguiente código asigna una función al evento de clic del botón con el id miBoton:

document.getElementById("miBoton").addEventListener("click", function() {
  console.log("El botón fue clickeado");
});

En cuanto a la sincronización, JavaScript es un lenguaje de programación de un solo hilo, lo que significa que solo puede hacer una cosa a la vez.

Sin embargo, gracias a su modelo de eventos y a las promesas, JavaScript puede manejar tareas asincrónicas como las peticiones fetch, las animaciones, o las operaciones de tiempo.

2. Cómo aprender: Ejemplos de proyectos en JavaScript ¶

La importancia de crear proyectos ¶

La clave para aprender JavaScript es la práctica, y la creación de proyectos, especialmente proyectos pequeños, es fundamental. Al igual que en la cocina, siempre hay algo más que añadir al software, y es la práctica la que te pone en situaciones reales de toma de decisiones.

Vamos con una lista de 8 proyectos para JavaScript para novatos.

1. Cambiar el color de fondo ¶

Actualizar el fondo de color de una web.

Requisitos

• Que cambie con un contador de tiempo.
• Que recorra la gama de colores del rojo, luego del verde, luego del azul.
• Que se detenga si pulsas un botón. Arranque de nuevo al volver a pulsar.

Ver ejemplo de Cambiar el color de fondo

2. Contador ¶

Añadir y quitar una unidad con un botón.

Requisitos

• Botón para sumar una unidad
• Botón para restar una unidad
• Que no permita números negativos
• Que tenga un máximo

Ver ejemplo de Contador

3. Cuenta atrás ¶

Mostrar el tiempo que queda hasta tu cumpleaños

Requisitos

• Solo con segundos
• Con segundos, minutos, horas
• Añadir días
• Que pase algo cuando el contador llegue a cero (un sonido, confetti…)

Ver ejemplo de Cuenta atrás

4. Generador de Lorem Ipsum ¶

Selecciona el número de párrafos o palabras y genera el lorem ipsum.

Requisitos

• Generar un número concreto de párrafos
• Generar un número concreto de palabras
• Utilizar textos que no sean Lorem Ipsum
• Botón de copiar todo junto al texto

Ver ejemplo de Generador de Lorem Ipsum

5. Juego de piedra, papel o tijera ¶

Juega contra la máquina al típico “piedra, papel o tijera”

Requisitos

• Incluir un contador de tiempo
• Añadir más elementos al juego
• Poner límite al número de jugadas

Ver ejemplo de Juego de piedra, papel o tijera

6. Modal ¶

Abrir una ventana sobre el contenido de la web. Botón de cerrar en el propio modal.

Requisitos

• Botón de apertura en la web
• Botón de cierre en el modal
• Posicionar el modal en la parte superior o en la inferior.
• Al pulsar fuera del modal, se cierra

Ver ejemplo de Modal

7. Menú responsive ¶

Barra de menú responsive: se oculta en pantallas más estrechas pero puede mostrarse como desplegable

Requisitos

• Menú con título y tres enlaces de menú
• Añadir al menú un logotipo
• Cambiar los colores del menú cuando se abre el desplegable

Ver ejemplo de Menú responsive

8. Conecta 4 ¶

El típico juego donde tienes que conseguir colocar 4 piezas del mismo color alineadas

Requisitos

• Es el más difícil de todos los retos, así que, ¡usa tu imaginación!

Ver ejemplo de Conecta 4

3. ¿Dónde aprender JavaScript? ¶

El aprendizaje es una constante en la vida de cualquier persona, pero para los programadores se vuelve indispensable, ya que están en un campo que evoluciona y cambia a gran velocidad. El lenguaje de programación JavaScript, como otros, también sigue este patrón de cambio y evolución constante. En este contexto, uno de los aspectos más importantes es dónde aprender y cómo obtener la información que se necesita para mejorar como programador.

Internet como principal fuente de aprendizaje ¶

Internet se ha convertido en la principal fuente de conocimiento en el mundo contemporáneo, siendo particularmente valioso en el campo de la programación. Existen plataformas gratuitas y de pago que ofrecen cursos para aprender a programar en JavaScript. Pero, aprender a programar no sólo se trata de aprender la sintaxis del lenguaje, sino también de aprender a solucionar problemas.

Google y Stack Overflow como recursos para resolver problemas ¶

Google es un poderoso motor de búsqueda, y Stack Overflow es una comunidad en línea donde los programadores hacen y responden preguntas.

Incluso los programadores más experimentados utilizan estas herramientas para buscar respuestas o soluciones a los desafíos que enfrentan.

¿Pensabas que solo es cosa de aprendices?

Para nada, los programadores seniors también necesitan resolver sus dudas.

Saber cómo formular preguntas o buscar en Google requiere cierta experiencia. Necesitas saber qué palabras clave usar para encontrar la solución a tu problema de manera eficiente.

¡Practica y lo lograrás!

ChatGPT como alternativa para aprender JavaScript ¶

Además de Google y Stack Overflow, también puedes hacer uso de herramientas de inteligencia artificial como ChatGPT para aprender JavaScript.

ChatGPT es capaz de responder a tus preguntas de manera interactiva, lo que puede ser una gran ventaja al aprender un nuevo lenguaje de programación.

Simplemente lanza preguntas sobre las dudas concretas que tengas y ChatGPT te proporcionará respuestas útiles y claras.

TIp: Pídele “código de ejemplo” para que te resuelva las dudas que tengas más allá de contarte cómo se hace.

La interpretación de errores en el navegador o el editor de código ¶

Finalmente, una de las habilidades más importantes que debes desarrollar como programador es aprender a interpretar los errores en el navegador o en tu editor de código.

Los errores son una parte inherente del proceso de programación, y aprender a leer y comprender estos errores puede ahorrarte mucho tiempo y frustración.

No sólo debes aprender a corregir estos errores, sino también a entender qué los causó en primer lugar.

🔥 Leer el log de errores es una inversión de tiempo valiosa que te permitirá mejorar y progresar en tu camino como programador.

Recursos para aprender JavaScript ¶

1. MDN Web Docs - JavaScript
2. JavaScript.info
3. Eloquent JavaScript - libro
4. You Don’t Know JS - libro
5. FreeCodeCamp
6. Codecademy - JavaScript
7. The Odin Project - JavaScript
8. LeetCode - Practicar problemas de JavaScript

En Web Reactiva ¶

Consulta nuestro mapa de aprendizaje para conocer todo el contenido que hemos publicado en Web Reactiva sobre JavaScript y otras tecnologías de frontend.

Hemos creado contenido premium para ponerte en marcha:

⭐️ Lo que siempre quisiste saber de JavaScript ES6
⭐️ Calculadora de presupuestos con JavaScript 
⭐️ Formulario Atrapahumanos con JavaScript.

Preguntas Frecuentes ¶

¿Por qué es importante aprender JavaScript nativo?
JavaScript nativo es la base para entender y utilizar eficazmente cualquier framework o librería de JavaScript.

¿Cómo puedo mejorar mis habilidades para buscar en Google y Stack Overflow?
La práctica constante es la mejor manera de mejorar tus habilidades. Intenta buscar respuestas a preguntas o problemas complejos.

¿Qué tipo de proyectos pequeños debería crear para aprender JavaScript?
Puedes empezar con proyectos simples como un temporizador, una calculadora o un juego sencillo.

¿Cómo puedo interpretar los errores en JavaScript?
Los mensajes de error en JavaScript suelen indicar la línea y el tipo de error. Intenta entender lo que cada tipo de error significa y cómo se puede solucionar.

¿Qué recursos en línea son útiles para aprender JavaScript?
Además de Google y Stack Overflow, sitios web como FreeCodeCamp, MDN Web Docs y YouTube son excelentes recursos para aprender JavaScript.

Te espero el domingo en la Reactivísima.

¡Hasta el próximo episodio!