Lógica e Interacción

Variables y tipos de datos

Las variables almacenan valores. En JS moderno usamos const (no reasignable) y let (reasignable). Evita var.

// Declaración de variables
const nombre = "Kevin";        // string
const edad = 21;               // number
const activo = true;           // boolean
let   contador = 0;            // reasignable
const notas = [4.5, 3.8, 5.0]; // array
const usuario = {              // object
  nombre: "Kevin",
  carrera: "Ingeniería",
};

// typeof para conocer el tipo
console.log(typeof nombre);   // "string"
console.log(typeof edad);     // "number"
JS

Funciones

Las funciones encapsulan código reutilizable. Hay tres formas principales de declararlas:

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

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

// 3. Arrow function (más común en JS moderno)
const multiplicar = (a, b) => a * b;

// Con múltiples líneas
const calcularPromedio = (notas) => {
  const total = notas.reduce((acc, n) => acc + n, 0);
  return total / notas.length;
};

console.log(saludar("Kevin"));         // "Hola, Kevin!"
console.log(multiplicar(3, 4));       // 12
console.log(calcularPromedio([4,5,3])); // 4
JS

Estructuras de control

// Condicionales
const nota = 3.5;

if (nota >= 3.0) {
  console.log("Aprobado ✅");
} else if (nota >= 2.0) {
  console.log("Recuperación ⚠️");
} else {
  console.log("Reprobado ❌");
}

// Ternario (if corto)
const estado = nota >= 3.0 ? "Aprobado" : "Reprobado";

// Bucles
for (let i = 0; i < 5; i++) {
  console.log(`Iteración ${i}`);
}

const frutas = ["🍎", "🍌", "🍇"];
frutas.forEach(fruta => console.log(fruta));

// while
let x = 0;
while (x < 3) { console.log(x); x++; }
JS

Manipulación del DOM

El DOM (Document Object Model) es la representación del HTML como un árbol de objetos que JavaScript puede leer y modificar.

// Seleccionar elementos
const titulo = document.querySelector("h1");
const btn    = document.getElementById("mi-boton");
const items  = document.querySelectorAll(".item");

// Modificar contenido
titulo.textContent = "Nuevo título";
titulo.innerHTML   = "Texto con <strong>negrita</strong>";

// Modificar estilos
titulo.style.color    = "#ff7b54";
titulo.style.fontSize = "2rem";

// Clases
titulo.classList.add("activo");
titulo.classList.remove("oculto");
titulo.classList.toggle("visible");

// Atributos
btn.setAttribute("disabled", "");
const src = img.getAttribute("src");

// Crear e insertar elementos
const parrafo = document.createElement("p");
parrafo.textContent = "Nuevo párrafo";
document.body.appendChild(parrafo);
JS

Eventos

// addEventListener(evento, función)
btn.addEventListener("click", () => {
  console.log("¡Click!");
});

// Eventos del input
input.addEventListener("input", (e) => {
  console.log(e.target.value);  // valor actual
});

// Eventos del teclado
document.addEventListener("keydown", (e) => {
  if (e.key === "Enter") enviar();
});

// Prevenir comportamiento default
form.addEventListener("submit", (e) => {
  e.preventDefault();
  procesarFormulario();
});
JS

Demos Interactivos

Demo 1 — Contador

Un ejemplo clásico de DOM + eventos:

let contador = 0;
const display = document.getElementById("display");

document.getElementById("inc").addEventListener("click", () => {
  contador++;
  display.textContent = contador;
});
document.getElementById("dec").addEventListener("click", () => {
  contador--;
  display.textContent = contador;
});
JS

Demo 2 — Consola JS en vivo

Escribe código JS y presiona Ejecutar. Usa print() para ver la salida:

Demo 3 — Quiz interactivo

¿Cuál es el resultado de typeof null en JavaScript?

Arrays y Objetos

// Arrays — métodos esenciales
const nums = [1, 2, 3, 4, 5];

nums.push(6);               // añadir al final
nums.pop();                 // eliminar el último
nums.unshift(0);           // añadir al inicio

const dobles = nums.map(n => n * 2);         // transformar
const pares  = nums.filter(n => n % 2 === 0);  // filtrar
const suma   = nums.reduce((a, b) => a + b, 0); // reducir
const inc    = nums.includes(3);              // true/false
const idx    = nums.indexOf(3);               // posición

// Objetos
const estudiante = {
  nombre: "Kevin",
  codigo: 20231234,
  materias: ["Álgebra", "POO"],
  estaActivo: true,
  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
};

// Acceso
console.log(estudiante.nombre);         // "Kevin"
console.log(estudiante["codigo"]);      // 20231234
console.log(estudiante.saludar());      // "Hola, soy Kevin"

// Desestructuración
const { nombre, codigo } = estudiante;
const [primera] = estudiante.materias;
JS

Tareas