Ruta de aprendizaje de javaScript amateur

La siguiente ruta de aprendizaje te llevará desde los fundamentos básicos , incluyendo recursos y ejercicios para cada etapa del proceso.

1. ¿Qué es JavaScript?

Definición: JavaScript es un lenguaje de programación que se utiliza principalmente para crear interactividad en sitios web. Permite a los desarrolladores agregar dinámicas a las páginas web, como animaciones, formularios interactivos y respuestas a eventos de usuario.

Ejemplo:

console.log('¡Hola, mundo!');

Recursos:

MDN Web Docs: JavaScript
JavaScript.info: The Modern JavaScript Tutorial

2. Historia de JavaScript (Opcional)

Definición: JavaScript fue creado por Brendan Eich en 1995 y ha evolucionado significativamente desde entonces. Originalmente llamado Mocha, luego LiveScript, y finalmente JavaScript, el lenguaje ha pasado por varias versiones que han ampliado su funcionalidad.

Recursos:

Historia de JavaScript en MDN
Evolución de JavaScript en JavaScript.info

3. Instalación de un Editor de Código (VS Code)

Definición: Visual Studio Code (VS Code) es un editor de código fuente gratuito y altamente configurable que soporta múltiples lenguajes de programación, incluyendo JavaScript.

Ejercicio: Instala VS Code desde y familiarízate con su interfaz.

Recursos:

Guía de inicio rápido de VS Code
Extensiones recomendadas para JavaScript en VS Code

4. Uso de la Consola del Navegador

Definición: La consola del navegador permite a los desarrolladores ejecutar código JavaScript y ver resultados, mensajes de error y otros datos.

Ejercicio: Abre la consola del navegador ( F12 o Ctrl+Shift+I en la mayoría de los navegadores) y ejecuta el siguiente código:

console.log('¡Hola desde la consola!');

Recursos:

MDN Web Docs: La consola del navegador
Guía para usar la consola en Chrome

5. Variables (var, let, const)

Definición: Las variables se utilizan para almacenar datos. var, let y const son palabras clave para declarar variables con diferentes comportamientos de alcance y mutabilidad.

Ejercicio:

var nombre = 'Juan';
let edad = 30;
const pais = 'España';

Recursos:

MDN Web Docs: Variables
JavaScript.info: Variables

6. Tipos de Datos

Definición: JavaScript tiene varios tipos de datos, incluyendo números, cadenas (strings), booleanos, null y undefined.

Ejercicio:

let numero = 42; // Número
let texto = 'Hola'; // Cadena
let esVerdadero = true; // Booleano
let nada = null; // Null
let indefinido; // Undefined

Recursos:

MDN Web Docs: Tipos de datos
JavaScript.info: Data Types

7. Operadores (Aritméticos, de Comparación, Lógicos)

Definición: Los operadores realizan operaciones sobre variables y valores. Los operadores aritméticos realizan cálculos matemáticos, los de comparación comparan valores, y los lógicos combinan valores booleanos.

Ejercicio:

// Operadores aritméticos
let suma = 5 + 3;
let resta = 10 - 2;
let producto = 4 * 3;
let division = 12 / 4;

// Operadores de comparación
let esIgual = (5 == 5); // true
let esMayor = (10 > 5); // true

// Operadores lógicos
let yLogico = (true && false); // false
let oLogico = (true || false); // true

Recursos:

MDN Web Docs: Operadores
JavaScript.info: Operators

8. Condicionales (if, else, switch)

Definición: Las estructuras condicionales permiten ejecutar bloques de código diferentes basados en condiciones.

Ejercicio:

let edad = 18;

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

let dia = 3;
switch (dia) {
  case 1:
    console.log('Lunes');
    break;
  case 2:
    console.log('Martes');
    break;
  default:
    console.log('Otro día');
}

Recursos:

MDN Web Docs: Sentencias de control
JavaScript.info: If...else

9. Bucles (for, while, do...while)

Definición: Los bucles permiten repetir un bloque de código mientras se cumpla una condición.

Ejercicio:

// Bucle for
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// Bucle while
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// Bucle do...while
let j = 0;
do {
  console.log(j);
  j++;
} while (j < 5);

Recursos:

MDN Web Docs: Bucles
JavaScript.info: Loops

10. Declaración de Funciones

Definición: Las funciones son bloques de código que se pueden definir una vez y luego ejecutar múltiples veces.

Ejercicio:

function saludar(nombre) {
  return `Hola, ${nombre}!`;
}

console.log(saludar('Carlos'));

Recursos:

MDN Web Docs: Funciones
JavaScript.info: Functions

11. Parámetros y Argumentos

Definición: Los parámetros son las variables que se definen en la declaración de una función, mientras que los argumentos son los valores que se pasan a la función cuando se llama.

Ejercicio:

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

let resultado = sumar(5, 3); // 8

Recursos:

MDN Web Docs: Parámetros y argumentos
JavaScript.info: Function Parameters

12. Funciones Anónimas y Funciones Flecha

Definición: Las funciones anónimas no tienen nombre y se pueden asignar a variables. Las funciones flecha son una forma más concisa de escribir funciones.

Ejercicio:

// Función anónima
let suma = function(a, b) {
  return a + b;
};

// Función flecha
let multiplicar = (a, b) => a * b;

Recursos:

MDN Web Docs: Funciones anónimas
MDN Web Docs: Funciones flecha
JavaScript.info: Arrow Functions

13. Selección de Elementos (getElementById, querySelector)

Definición: Estos métodos se utilizan para seleccionar elementos del DOM (Document Object Model) en una página web.

Ejercicio:

// Selección por ID
let elemento = document.getElementById('miElemento');

// Selección con querySelector
let primerParrafo = document.querySelector('p');

Recursos:

MDN Web Docs: getElementById
MDN Web Docs: querySelector
JavaScript.info: DOM Manipulation

14. Modificación de Contenido (innerHTML, textContent)

Definición: Estos métodos se utilizan para modificar el contenido de un elemento en la página web.

Ejercicio:

// Modificación con innerHTML
let miElemento = document.getElementById('miElemento');
miElemento.innerHTML = '<p>Nuevo contenido</p>';

// Modificación con textContent
let miParrafo = document.querySelector('p');
miParrafo.textContent = 'Texto actualizado';

Recursos:

MDN Web Docs: innerHTML
MDN Web Docs: textContent
JavaScript.info: DOM Manipulation

15. Eventos (addEventListener)

Definición: Los eventos permiten ejecutar código en respuesta a acciones del usuario, como clics o teclas presionadas.

Ejercicio:

// Añadir un listener de clic a un botón
let boton = document.getElementById('miBoton');
boton.addEventListener('click', function() {
  alert('¡Botón clickeado!');
});

Recursos:

MDN Web Docs: addEventListener
JavaScript.info: Events