Aprender JavaScript desde Cero

¿Qué es JavaScript?

JavaScript (JS) es un lenguaje de programación que ejecuta las computadoras. Fue creado en 1995 para hacer las páginas web interactivas. Hoy en día, es el lenguaje más importante de la web.

¿Por qué aprender JavaScript?

Web: Puedes crear sitios web interactivos
Apps: Desarrollar aplicaciones móviles y de escritorio
Demanda: Es uno de los lenguajes más solicitados en el mercado
Comunidad: Millones de programadores usando JavaScript

📌 Dato importante

JavaScript se ejecuta en tu navegador (Chrome, Firefox, Safari, etc.). No necesitas instalar nada especial para empezar a aprender.

Antes de Empezar

Solo necesitas:

Un navegador web (ya tienes uno)
Un editor de texto (Notepad, VS Code, etc.)
Disposición a aprender

¿Cómo ejecutar JavaScript?

Existen 3 formas principales:

1. En la consola del navegador

Presiona F12 en tu navegador, ve a "Console" y escribe código directamente.

2. En un archivo HTML

<script>
    console.log("¡Hola JavaScript!");
</script>

3. En un archivo .js separado

<script src="archivo.js"></script>

Los Conceptos Básicos

Declaraciones y Expresiones

Una declaración es una instrucción que le dices al navegador que haga algo.

Ejemplo: Mostrar un mensaje

console.log("Hola, mundo!");

Resultado en la consola: Hola, mundo!

💡 Explicación

console.log() es una función que muestra mensajes en la consola. Es perfecta para aprender y depurar código.

Comentarios

Los comentarios son notas que escribes para ti mismo. JavaScript los ignora.

Tipos de comentarios

// Esto es un comentario de una línea

/* Esto es un comentario
   de múltiples líneas */

Variables: Guardando Datos

Una variable es como una caja donde guardas información. Puedes darle un nombre y acceder a ella cuando la necesites.

¿Por qué necesitamos variables?

Imagina que quieres guardar el nombre de una persona y luego usarlo varias veces. Sin variables, tendrías que escribir el nombre cada vez.

Tipos de variables: var, let y const

1. var (antiguo, no recomendado)

var nombre = "Juan";
console.log(nombre); // Juan

Funciona, pero es mejor usar let o const.

2. let (recomendado para valores que cambian)

let edad = 25;
edad = 26; // Puedo cambiar el valor
console.log(edad); // 26

let permite cambiar el valor después de crearlo.

3. const (recomendado para valores que no cambian)

const pi = 3.14159;
// pi = 3.14; // Esto daría error
console.log(pi); // 3.14159

const no permite cambiar el valor. Úsalo por defecto.

✅ Regla de oro

Usa const por defecto. Si necesitas cambiar el valor, usa let. Evita var.

Tipos de Datos

String (texto)

const nombre = "Diego";
const saludo = 'Hola'; // También funciona con comillas simples
console.log(nombre); // Diego

Number (número)

const edad = 30;
const precio = 19.99;
const negativo = -5;
console.log(edad + precio); // 49.99

Boolean (verdadero o falso)

const esMayorDeEdad = true;
const tieneAuto = false;
console.log(esMayorDeEdad); // true

Array (lista de elementos)

const frutas = ["manzana", "plátano", "naranja"];
console.log(frutas[0]); // manzana (primer elemento)
console.log(frutas.length); // 3 (cantidad de elementos)

Los arrays empiezan a contar desde 0, no desde 1.

Object (colección de propiedades)

const persona = {
    nombre: "Carlos",
    edad: 28,
    ciudad: "Madrid"
};
console.log(persona.nombre); // Carlos
console.log(persona["edad"]); // 28

📌 Accediendo a propiedades de objetos

Hay dos formas: objeto.propiedad o objeto["propiedad"]

Operadores Básicos

Matemáticos

console.log(10 + 5);   // 15 (suma)
console.log(10 - 5);   // 5 (resta)
console.log(10 * 5);   // 50 (multiplicación)
console.log(10 / 5);   // 2 (división)
console.log(10 % 3);   // 1 (residuo)

Comparación

console.log(10 > 5);    // true (10 es mayor que 5)
console.log(10 < 5);    // false (10 no es menor que 5)
console.log(10 === 10); // true (es igual)
console.log(10 !== 10); // false (no es diferente)
console.log(10 >= 10);  // true (es mayor o igual)

Nota: === compara el valor Y el tipo. == solo compara el valor.

Lógicos

const edad = 25;
const tieneCarnet = true;

console.log(edad >= 18 && tieneCarnet); // true (AND: ambos verdaderos)
console.log(edad >= 18 || tieneCarnet); // true (OR: al menos uno verdadero)
console.log(!tieneCarnet); // false (NOT: niega el valor)

💡 Operadores lógicos (AND, OR, NOT)

&& (AND): ambos deben ser verdaderos

|| (OR): al menos uno debe ser verdadero

! (NOT): invierte el valor

Estructuras de Control

Las estructuras de control te permiten tomar decisiones en tu código. "Si pasa esto, haz eso."

if - else (Condicionales)

Decisión simple

const edad = 20;

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

Resultado: Eres mayor de edad

Múltiples condiciones

const calificacion = 8;

if (calificacion >= 9) {
    console.log("Excelente");
} else if (calificacion >= 7) {
    console.log("Bueno");
} else if (calificacion >= 5) {
    console.log("Aprobado");
} else {
    console.log("Desaprobado");
}

Resultado: Bueno

switch (Múltiples opciones)

Elegir entre varias opciones

const dia = "lunes";

switch (dia) {
    case "lunes":
        console.log("Es lunes");
        break;
    case "viernes":
        console.log("¡Es viernes!");
        break;
    default:
        console.log("Otro día");
}

Resultado: Es lunes

El break detiene el switch. Sin break, continúa ejecutando.

Bucles (Repeticiones)

for - Repetir un número específico de veces

for (let i = 1; i <= 5; i++) {
    console.log("Número: " + i);
}

// Resultado:
// Número: 1
// Número: 2
// Número: 3
// Número: 4
// Número: 5

i++ significa "suma 1 a i". Se ejecuta 5 veces.

while - Repetir mientras una condición sea verdadera

let contador = 1;

while (contador <= 5) {
    console.log("Contador: " + contador);
    contador++; // Aumentar el contador
}

// Resultado: impulsa del 1 al 5

for...of - Recorrer elementos de un array

const colores = ["rojo", "azul", "verde"];

for (const color of colores) {
    console.log("Color: " + color);
}

// Resultado:
// Color: rojo
// Color: azul
// Color: verde

Perfecto para recorrer listas sin preocuparte del índice.

forEach - Otra forma de recorrer arrays

const numeros = [10, 20, 30];

numeros.forEach((numero) => {
    console.log("Número: " + numero);
});

forEach es más moderno que for...of.

Funciones: Código Reutilizable

Una función es un bloque de código que hace algo específico. Puedes crear una función y usarla múltiples veces sin repetir el código.

¿Por qué usar funciones?

Reutilización: Escribes una vez, usas muchas veces
Organización: Tu código es más limpio
Mantenimiento: Cambiar algo es más fácil
Depuración: Encontrar errores es más sencillo

Función básica sin parámetros

function saludar() {
    console.log("Hola, bienvenido");
}

saludar(); // Llamar la función
saludar(); // Usarla de nuevo

Resultado: Se imprime "Hola, bienvenido" dos veces

Función con parámetros (inputs)

function sumar(a, b) {
    console.log(a + b);
}

sumar(5, 3);  // Resultado: 8
sumar(10, 20); // Resultado: 30

Los parámetros (a, b) reciben valores cuando llamas la función.

Función con retorno (output)

function multiplicar(a, b) {
    return a * b;
}

const resultado = multiplicar(4, 5);
console.log(resultado); // 20

return devuelve un valor que la función calcula.

Función completa con lógica

function calcularDescuento(precio, descuento) {
    const precioFinal = precio - (precio * descuento / 100);
    return precioFinal;
}

const miPrecio = calcularDescuento(100, 20);
console.log("Precio final: $" + miPrecio); // Precio final: $80

Arrow Functions (Funciones modernas)

Una forma más moderna de escribir funciones usando =>

Sintaxis moderna

const saludar = () => {
    console.log("Hola");
};

saludar(); // Resultado: Hola

Arrow function con parámetros

const sumar = (a, b) => {
    return a + b;
};

console.log(sumar(5, 3)); // 8

Arrow function simplificada

const multiplicar = (a, b) => a * b;

console.log(multiplicar(4, 5)); // 20

Si solo hay una línea, puedes omitir las llaves y return.

💡 Ventajas de arrow functions

✓ Sintaxis más limpia

✓ Código más legible

✓ Comportamiento con "this" es diferente (aprenderás más adelante)

DOM: Interacción con HTML

El DOM (Document Object Model) es la forma en que JavaScript accede y modifica los elementos HTML de una página web. Es lo que hace que las páginas web sean interactivas.

¿Qué es el DOM?

Imagina el HTML como un árbol. JavaScript puede navegar por este árbol y cambiar lo que ve.

Ejemplo HTML

<div id="contenedor">
    <h1>Hola Mundo</h1>
    <p class="texto">Esto es un párrafo</p>
</div>

Seleccionar elementos

Por ID (getElementById)

const elemento = document.getElementById("contenedor");
console.log(elemento);

Selecciona el elemento con id="contenedor"

Por clase (getElementsByClassName)

const elementos = document.getElementsByClassName("texto");
console.log(elementos[0]);

Selecciona todos los elementos con class="texto"

Selector CSS moderno (querySelector)

const elemento = document.querySelector("#contenedor");
const elementos = document.querySelectorAll(".texto");
console.log(elemento);

querySelector es más flexible y moderno.

Modificar contenido HTML

Cambiar el texto (textContent)

const titulo = document.getElementById("mi-titulo");
titulo.textContent = "Nuevo título";
// El título en la página ahora dice "Nuevo título"

Cambiar HTML (innerHTML)

const contenedor = document.getElementById("contenedor");
contenedor.innerHTML = "<p>Nuevo contenido</p>";

innerHTML permite insertar HTML completo.

Modificar estilos CSS

Cambiar estilos directamente

const elemento = document.getElementById("caja");
elemento.style.backgroundColor = "blue";
elemento.style.fontSize = "20px";
elemento.style.color = "white";

Nota: las propiedades CSS con guión se escriben en camelCase.

Eventos: Reaccionar a acciones del usuario

Un evento es algo que pasa (click, escribir, pasar el ratón, etc.). JavaScript puede reaccionar a estos eventos.

Evento click

<button id="mi-boton">Haz clic aquí</button>

<script>
    const boton = document.getElementById("mi-boton");
    
    boton.addEventListener("click", function() {
        console.log("¡El botón fue presionado!");
    });
</script>

addEventListener escucha un evento y ejecuta código cuando ocurre.

Eventos comunes

// Click del ratón
elemento.addEventListener("click", function() { });

// El ratón entra en el elemento
elemento.addEventListener("mouseover", function() { });

// El ratón sale del elemento
elemento.addEventListener("mouseout", function() { });

// Cuando se carga la página
document.addEventListener("DOMContentLoaded", function() { });

// Cuando escribes en un input
input.addEventListener("input", function() { });

// Cuando envías un formulario
formulario.addEventListener("submit", function() { });

Ejemplo completo interactivo

Contador simple

<!-- HTML -->
<p>Contador: <span id="numero">0</span></p>
<button id="aumentar">+</button>
<button id="disminuir">-</button>

<!-- JavaScript -->
<script>
    let contador = 0;
    const numeroSpan = document.getElementById("numero");
    const botonAumentar = document.getElementById("aumentar");
    const botonDisminuir = document.getElementById("disminuir");
    
    botonAumentar.addEventListener("click", function() {
        contador++;
        numeroSpan.textContent = contador;
    });
    
    botonDisminuir.addEventListener("click", function() {
        contador--;
        numeroSpan.textContent = contador;
    });
</script>

Este es un ejemplo completo que demuestra cómo el JavaScript hace reactiva una página.

Consejos para Aprender JavaScript

✅ Practica constantemente

La mejor forma de aprender programación es practicando. Escribe código todos los días, aunque sea poco.

✅ Usa la consola del navegador

Presiona F12 y prueba pequeños fragmentos de código en la consola. Es tu mejor amigo al aprender.

✅ Lee documentación

La documentación oficial de JavaScript (MDN Web Docs) es excelente. No tengas miedo de consultarla.

✅ Crea proyectos pequeños

Después de cada concepto, crea un pequeño proyecto. Una calculadora, un juego simple, una todolist, etc.

✅ Lee código de otros

Ver cómo otros resuelven problemas te enseña nuevas formas de pensar. Lee código en GitHub.

✅ No memorices, entiende

No necesitas memorizar toda la sintaxis. Entiende los conceptos, la sintaxis la aprenderás con la práctica.

✅ Sé paciente contigo mismo

Aprender a programar toma tiempo. No es fácil al principio, pero cada día entenderás más. ¡Persevera!

Próximos Pasos en tu Aprendizaje

1. Domina los Básicos

Asegúrate de entender variables, funciones, condicionales y bucles. Estos son fundamentales.

2. Manipula el DOM

Crea proyectos pequeños que cambien la página según acciones del usuario.

3. Aprende Objetos y Arrays avanzado

Entiende cómo trabajar con estructuras de datos más complejas.

4. Fetch API

Aprende a obtener datos de internet y mostrarlos en tu página.

5. Frameworks (React, Vue)

Una vez que domine JS, aprende un framework moderno.

Resumen

Has aprendido los conceptos fundamentales de JavaScript. Desde variables y funciones hasta la manipulación del DOM. Este es el inicio de tu viaje como programador.

Recuerda: la consistencia es la clave. Practica todos los días, construye proyectos pequeños y no tengas miedo de cometer errores. Cada error es una lección.

¡Ahora es tiempo de programar! 🚀