JavaScript Básico
Fundamentos
DOM
Almacenamiento
Variables y Tipos
// Declaración de variables
let nombre = "Juan"; // String
const edad = 30; // Number
let esMayor = true; // Boolean
// Arrays
const frutas = ["manzana", "banana", "naranja"];
// Objetos
const persona = {
nombre: "María",
edad: 25,
profesion: "Desarrolladora"
};Funciones y Control
// Función declarada
function saludar(nombre) {
return `Hola, ${nombre}!`;
}
// Arrow function
const sumar = (a, b) => a + b;
// Condicionales
if (edad >= 18) {
console.log("Mayor de edad");
} else {
console.log("Menor de edad");
}
// Bucle for
for (let i = 0; i < frutas.length; i++) {
console.log(frutas[i]);
}Manipulación del DOM
// Seleccionar elementos
const titulo = document.getElementById('titulo');
const items = document.querySelectorAll('.item');
// Modificar contenido
titulo.textContent = 'Nuevo título';
titulo.style.color = 'blue';
// Crear elementos
const nuevoDiv = document.createElement('div');
nuevoDiv.className = 'nuevo';
document.body.appendChild(nuevoDiv);Título Original
- Item 1
- Item 2
Manejo de Eventos
// Evento click
const boton = document.getElementById('miBoton');
boton.addEventListener('click', function() {
console.log('Botón clickeado!');
});
// Evento formulario
const formulario = document.getElementById('miForm');
formulario.addEventListener('submit', (e) => {
e.preventDefault();
const datos = new FormData(formulario);
console.log(Object.fromEntries(datos));
});Clicks: 0
Web Storage API
// localStorage - Persistente
localStorage.setItem('usuario', 'JuanPerez');
const usuario = localStorage.getItem('usuario');
// sessionStorage - Temporal
sessionStorage.setItem('token', 'abc123');
// JSON
const datos = { nombre: 'María', edad: 25 };
localStorage.setItem('datos', JSON.stringify(datos));
const datosGuardados = JSON.parse(localStorage.getItem('datos'));Depuración
// Console.log
console.log('Mensaje normal');
console.warn('Advertencia');
console.error('Error');
// Debugger
function funcionCompleja() {
debugger; // Pausa la ejecución
// Código a depurar
}
// Medición de performance
console.time('miFuncion');
miFuncion(); // Función a medir
console.timeEnd('miFuncion');