Tutorial Completo de JavaScript

// const para valores que no cambian
const nombre = 'Juan';
const PI = 3.14159;

// let para valores que cambian
let edad = 25;
edad = 26; // Válido

// Destructuring
const persona = { nombre: 'Ana', edad: 30 };
const { nombre: personaNombre, edad: personaEdad } = persona;

// Template literals
const saludo = `Hola, ${nombre}!`;

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

// Arrow function
const sumar = (a, b) => a + b;

// Con un solo parámetro
const doble = x => x * 2;

// Función más compleja
const procesarDatos = (datos) => {
    const filtrados = datos.filter(x => x > 10);
    return filtrados.map(x => x * 2);
};

const numeros = [1, 2, 3, 4, 5];

// map - transformar cada elemento
const dobles = numeros.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter - filtrar elementos
const pares = numeros.filter(n => n % 2 === 0);
// [2, 4]

// reduce - reducir a un solo valor
const suma = numeros.reduce((acc, n) => acc + n, 0);
// 15

// find - encontrar un elemento
const encontrado = numeros.find(n => n > 3);
// 4

// Spread operator
const masNumeros = [...numeros, 6, 7];
// [1, 2, 3, 4, 5, 6, 7]

// Seleccionar elementos
const elemento = document.querySelector('.clase');
const elementos = document.querySelectorAll('div');

// Modificar contenido
elemento.textContent = 'Nuevo texto';
elemento.innerHTML = 'Texto en negrita';

// Modificar estilos
elemento.style.color = 'blue';
elemento.classList.add('activo');
elemento.classList.toggle('visible');

// Event listeners
elemento.addEventListener('click', (e) => {
    console.log('Click!', e.target);
});

// Crear elementos
const nuevoDiv = document.createElement('div');
nuevoDiv.textContent = 'Nuevo elemento';
document.body.appendChild(nuevoDiv);

// Función asíncrona
async function obtenerDatos() {
    try {
        const respuesta = await fetch('https://api.ejemplo.com/datos');
        const datos = await respuesta.json();
        console.log(datos);
        return datos;
    } catch (error) {
        console.error('Error:', error);
    }
}

// Promise tradicional (comparación)
fetch('https://api.ejemplo.com/datos')
    .then(res => res.json())
    .then(datos => console.log(datos))
    .catch(error => console.error(error));

// GET request
async function obtenerUsuarios() {
    const response = await fetch('https://api.ejemplo.com/usuarios');
    const usuarios = await response.json();
    return usuarios;
}

// POST request
async function crearUsuario(usuario) {
    const response = await fetch('https://api.ejemplo.com/usuarios', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(usuario)
    });
    return await response.json();
}

// Uso
const nuevoUsuario = { nombre: 'María', edad: 28 };
crearUsuario(nuevoUsuario)
    .then(data => console.log('Usuario creado:', data));