---

Fundamentos JS

Variables

let - variable reasignable

const - constante (no reasignable)

var - vieja forma (evitar)

let nombre = "Juan";
const edad = 30;
var antiguo = "no usar";

Tipos de Datos

Primitivos: string, number, boolean, null, undefined, symbol

Referencia: object, array, function

let texto = "Hola";
let numero = 42;
let booleano = true;
let nulo = null;
let indefinido = undefined;

Operadores

Aritméticos: + - * / % **

Comparación: == === != !== > < >= <=

Lógicos: && || !

Estructuras de Control

Condicionales

if, else if, else

switch para múltiples casos

if (edad >= 18) {
    console.log("Mayor de edad");
} else {
    console.log("Menor de edad");
}

Bucles

for - número conocido de iteraciones

while - mientras condición sea true

do while - ejecuta al menos una vez

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

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

Manejo de Errores

try - intenta ejecutar código

catch - captura errores

finally - siempre se ejecuta

try {
    // código que puede fallar
} catch (error) {
    console.error("Error:", error);
} finally {
    console.log("Finalizado");
}

Funciones & Objetos

Funciones

Declaración: function nombre() {}

Expresión: const nombre = function() {}

Flecha: const nombre = () => {}

// Función tradicional
function sumar(a, b) {
    return a + b;
}

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

Objetos

Colección de pares clave-valor

const persona = {
    nombre: "Ana",
    edad: 25,
    saludar: function() {
        return `Hola, soy ${this.nombre}`;
    }
};

console.log(persona.nombre); // Ana
console.log(persona.saludar()); // Hola, soy Ana

Arrays

Lista ordenada de elementos

Métodos: push, pop, map, filter, reduce

const numeros = [1, 2, 3, 4, 5];
numeros.push(6); // añade al final

const dobles = numeros.map(num => num * 2);
// [2, 4, 6, 8, 10, 12]

DOM & Eventos

Manipulación del DOM

document.querySelector() - selecciona elemento

document.createElement() - crea elemento

element.textContent - establece texto

// Seleccionar elemento
const div = document.querySelector('#miDiv');

// Crear nuevo elemento
const p = document.createElement('p');
p.textContent = 'Hola Mundo';

// Añadir al DOM
div.appendChild(p);

Eventos

addEventListener - escucha eventos

Tipos: click, submit, keydown, mouseover, etc.

const boton = document.querySelector('#miBoton');

boton.addEventListener('click', function() {
    console.log('Botón clickeado!');
});

Probar Evento

ES6+ Features

Template Strings: `Hola ${nombre}`

Destructuring: const {prop} = obj

Spread Operator: [...array]

// Template Strings
const mensaje = `Hola, ${persona.nombre}`;

// Destructuring
const { nombre, edad } = persona;

// Spread Operator
const nuevosNumeros = [...numeros, 6, 7, 8];