JavaScript para Principiantes: Variables, Funciones y DOM

¿Qué es JavaScript?

JavaScript es el lenguaje de programación que da vida e interactividad a las páginas web. Mientras HTML define la estructura y CSS el estilo, JavaScript controla el comportamiento dinámico.

Agregar JavaScript a HTML

1. JavaScript Inline (no recomendado)

<button onclick="alert('Hola!')">Clic aquí</button>

2. JavaScript Interno

<!DOCTYPE html>
<html>
<body>
    <h1 id="titulo">Hola Mundo</h1>
    
    <script>
        document.getElementById('titulo').style.color = 'blue';
    </script>
</body>
</html>

3. JavaScript Externo (recomendado)

<!-- Al final del body -->
<script src="script.js"></script>

Variables

// var (antigua forma - evitar)
var nombre = "Ana";

// let (valor puede cambiar)
let edad = 25;
edad = 26;  // OK

// const (valor constante)
const PI = 3.14159;
// PI = 3.14;  // Error!

// Tipos de datos
let texto = "Hola";           // String
let numero = 42;              // Number
let decimal = 3.14;           // Number
let booleano = true;          // Boolean
let nulo = null;              // Null
let indefinido;               // Undefined
let objeto = {nombre: "Ana"}; // Object
let arreglo = [1, 2, 3];      // Array

Operadores

// Aritméticos
let suma = 5 + 3;        // 8
let resta = 10 - 4;      // 6
let multiplicacion = 3 * 4;  // 12
let division = 10 / 2;   // 5
let modulo = 10 % 3;     // 1
let potencia = 2 ** 3;   // 8

// Incremento/Decremento
let x = 5;
x++;  // 6
x--;  // 5

// Comparación
5 == "5"   // true (compara valor)
5 === "5"  // false (compara valor y tipo)
5 != "5"   // false
5 !== "5"  // true
5 > 3      // true
5 < 3      // false
5 >= 5     // true

// Lógicos
true && false  // false (AND)
true || false  // true (OR)
!true          // false (NOT)

Strings

let nombre = "Ana";
let apellido = "García";

// Concatenación
let nombreCompleto = nombre + " " + apellido;

// Template literals (mejor)
let saludo = `Hola, ${nombre} ${apellido}`;
let multilinea = `
    Esta es una cadena
    de múltiples líneas
`;

// Métodos de strings
let texto = "JavaScript";
texto.length           // 10
texto.toUpperCase()    // "JAVASCRIPT"
texto.toLowerCase()    // "javascript"
texto.indexOf("Script")  // 4
texto.slice(0, 4)      // "Java"
texto.split("")        // ["J","a","v","a","S","c","r","i","p","t"]
texto.replace("Java", "Type")  // "TypeScript"

Arrays

// Crear array
let frutas = ["manzana", "pera", "uva"];
let numeros = [1, 2, 3, 4, 5];
let mixto = [1, "texto", true, {nombre: "Ana"}];

// Acceder a elementos
frutas[0]  // "manzana"
frutas[2]  // "uva"

// Modificar
frutas[1] = "naranja";

// Métodos de arrays
frutas.push("melón");      // Agregar al final
frutas.pop();              // Eliminar del final
frutas.unshift("fresa");   // Agregar al inicio
frutas.shift();            // Eliminar del inicio
frutas.length;             // 3
frutas.indexOf("pera");    // 1
frutas.includes("uva");    // true
frutas.join(", ");         // "manzana, pera, uva"

// Métodos avanzados
let numeros = [1, 2, 3, 4, 5];

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

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

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

Objetos

// Crear objeto
let persona = {
    nombre: "Ana",
    edad: 25,
    ciudad: "Madrid",
    saludar: function() {
        return `Hola, soy ${this.nombre}`;
    }
};

// Acceder a propiedades
persona.nombre        // "Ana"
persona["edad"]       // 25

// Modificar propiedades
persona.edad = 26;
persona.profesion = "Ingeniera";

// Llamar métodos
persona.saludar();    // "Hola, soy Ana"

// Object methods
Object.keys(persona);    // ["nombre", "edad", "ciudad", "saludar"]
Object.values(persona);  // ["Ana", 26, "Madrid", function]
Object.entries(persona); // [["nombre", "Ana"], ...]

Condicionales

// if-else
let edad = 18;

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

// if-else if-else
let nota = 85;

if (nota >= 90) {
    console.log("Excelente");
} else if (nota >= 80) {
    console.log("Muy bien");
} else if (nota >= 70) {
    console.log("Bien");
} else {
    console.log("Necesita mejorar");
}

// Operador ternario
let mensaje = edad >= 18 ? "Mayor" : "Menor";

// switch
let dia = 3;
let nombreDia;

switch(dia) {
    case 1:
        nombreDia = "Lunes";
        break;
    case 2:
        nombreDia = "Martes";
        break;
    case 3:
        nombreDia = "Miércoles";
        break;
    default:
        nombreDia = "Día inválido";
}

Bucles

// for
for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

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

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

// for...of (arrays)
let frutas = ["manzana", "pera", "uva"];
for (let fruta of frutas) {
    console.log(fruta);
}

// for...in (objetos)
let persona = {nombre: "Ana", edad: 25};
for (let clave in persona) {
    console.log(`${clave}: ${persona[clave]}`);
}

// forEach
frutas.forEach(fruta => {
    console.log(fruta);
});

Funciones

// Declaración de función
function saludar(nombre) {
    return `Hola, ${nombre}`;
}

// Llamar función
let mensaje = saludar("Ana");  // "Hola, Ana"

// Expresión de función
const sumar = function(a, b) {
    return a + b;
};

// Arrow function (función flecha)
const multiplicar = (a, b) => a * b;

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

// Sin parámetros
const obtenerFecha = () => new Date();

// Parámetros por defecto
function saludarPersona(nombre = "Usuario") {
    return `Hola, ${nombre}`;
}

saludarPersona();      // "Hola, Usuario"
saludarPersona("Ana"); // "Hola, Ana"

DOM (Document Object Model)

Seleccionar Elementos

// Por ID
let elemento = document.getElementById('miId');

// Por clase
let elementos = document.getElementsByClassName('miClase');

// Por etiqueta
let parrafos = document.getElementsByTagName('p');

// Query selector (más flexible)
let primero = document.querySelector('.miClase');
let todos = document.querySelectorAll('.miClase');

Manipular Contenido

let elemento = document.getElementById('titulo');

// Cambiar texto
elemento.textContent = "Nuevo texto";
elemento.innerText = "Otro texto";

// Cambiar HTML
elemento.innerHTML = "<strong>Texto en negrita</strong>";

// Cambiar atributos
elemento.setAttribute('class', 'destacado');
elemento.id = 'nuevoId';

// Cambiar estilos
elemento.style.color = 'blue';
elemento.style.fontSize = '24px';
elemento.style.backgroundColor = 'yellow';

// Agregar/quitar clases
elemento.classList.add('activo');
elemento.classList.remove('inactivo');
elemento.classList.toggle('visible');
elemento.classList.contains('activo');  // true/false

Crear y Eliminar Elementos

// Crear elemento
let nuevoDiv = document.createElement('div');
nuevoDiv.textContent = 'Contenido nuevo';
nuevoDiv.classList.add('caja');

// Agregar al DOM
document.body.appendChild(nuevoDiv);

// Insertar antes de otro elemento
let referencia = document.getElementById('ref');
document.body.insertBefore(nuevoDiv, referencia);

// Eliminar elemento
let elemento = document.getElementById('eliminar');
elemento.remove();

// O desde el padre
let padre = elemento.parentElement;
padre.removeChild(elemento);

Eventos

// Onclick
let boton = document.getElementById('miBoton');
boton.onclick = function() {
    alert('Clic!');
};

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

// Con arrow function
boton.addEventListener('click', () => {
    console.log('Clic con arrow function');
});

// Event object
boton.addEventListener('click', (event) => {
    console.log('Tipo de evento:', event.type);
    console.log('Elemento:', event.target);
});

// Tipos de eventos comunes
// click - clic del mouse
// dblclick - doble clic
// mouseenter - mouse entra al elemento
// mouseleave - mouse sale del elemento
// keydown - tecla presionada
// keyup - tecla liberada
// submit - envío de formulario
// change - cambio en input
// focus - elemento enfocado
// blur - elemento desenfocado

Formularios

<!-- HTML -->
<form id="miFormulario">
    <input type="text" id="nombre" placeholder="Nombre">
    <input type="email" id="email" placeholder="Email">
    <button type="submit">Enviar</button>
</form>
<div id="resultado"></div>

// JavaScript
let formulario = document.getElementById('miFormulario');

formulario.addEventListener('submit', function(e) {
    e.preventDefault();  // Prevenir envío por defecto
    
    // Obtener valores
    let nombre = document.getElementById('nombre').value;
    let email = document.getElementById('email').value;
    
    // Validar
    if (!nombre || !email) {
        alert('Completa todos los campos');
        return;
    }
    
    // Mostrar resultado
    let resultado = document.getElementById('resultado');
    resultado.innerHTML = `Nombre: ${nombre}, Email: ${email}`;
    
    // Limpiar formulario
    formulario.reset();
});

Ejemplo Completo: To-Do List

<!-- HTML -->
<div class="container">
    <h1>Lista de Tareas</h1>
    <input type="text" id="nuevaTarea" placeholder="Nueva tarea">
    <button id="agregarBtn">Agregar</button>
    <ul id="listaTareas"></ul>
</div>

// JavaScript
const input = document.getElementById('nuevaTarea');
const boton = document.getElementById('agregarBtn');
const lista = document.getElementById('listaTareas');

// Agregar tarea
function agregarTarea() {
    const textoTarea = input.value.trim();
    
    if (textoTarea === '') {
        alert('Escribe una tarea');
        return;
    }
    
    // Crear elementos
    const li = document.createElement('li');
    li.textContent = textoTarea;
    
    // Botón eliminar
    const btnEliminar = document.createElement('button');
    btnEliminar.textContent = 'Eliminar';
    btnEliminar.onclick = function() {
        li.remove();
    };
    
    // Marcar como completada
    li.addEventListener('click', function() {
        li.classList.toggle('completada');
    });
    
    // Agregar a la lista
    li.appendChild(btnEliminar);
    lista.appendChild(li);
    
    // Limpiar input
    input.value = '';
}

// Eventos
boton.addEventListener('click', agregarTarea);

input.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        agregarTarea();
    }
});

Console Methods

// Logging
console.log('Mensaje normal');
console.info('Información');
console.warn('Advertencia');
console.error('Error');

// Agrupar mensajes
console.group('Mi Grupo');
console.log('Mensaje 1');
console.log('Mensaje 2');
console.groupEnd();

// Tabla
let usuarios = [
    {nombre: 'Ana', edad: 25},
    {nombre: 'Luis', edad: 30}
];
console.table(usuarios);

// Tiempo
console.time('operacion');
// ... código
console.timeEnd('operacion');

Buenas Prácticas

Usa const y let: Evita var
Nombres descriptivos: nombreUsuario en vez de x
Usa === en lugar de ==: Comparación estricta
Scripts al final del body: O usa defer/async
Evita variables globales: Usa módulos o IIFE
Comenta tu código: Especialmente lógica compleja
Maneja errores: Usa try-catch cuando sea necesario

Conclusión

JavaScript es esencial para crear páginas web interactivas y dinámicas. Dominar variables, funciones, manipulación del DOM y eventos te permitirá dar vida a tus proyectos web. Practica creando pequeños proyectos y gradualmente aumenta la complejidad.