Repaso de JavaScript

Todos los conceptos básicos organizados por secciones. Léelos, prueba los ejemplos interactivos y llega al examen preparado.

// 13 secciones · ejemplos funcionales · interactivo
01

Variables y tipos

Las variables son cajitas con nombre donde guardamos información. En JS moderno usamos let (puede cambiar) y const (no puede cambiar). var existe pero es antiguo y tiene comportamientos raros, así que lo evitamos. Los tipos de datos principales son: número, texto (string), booleano, null, undefined, objeto y array.
variables_tipos.js
let   nombre   = "Ada"          // string: texto entre comillas
const edad     = 25             // number: número entero
let   activo   = true           // boolean: verdadero o falso
let   vacio    = null           // null: vacío intencionado
let   sinDef   // undefined: no se ha asignado nada

console.log(typeof nombre)      // "string"
console.log(typeof edad)        // "number"
console.log(typeof activo)      // "boolean"
console.log(typeof sinDef)      // "undefined"
typeof nos dice el tipo de cualquier valor. Útil para depurar. Fíjate que typeof null devuelve "object" — es un bug histórico de JS que no se ha podido corregir sin romper la web.
02

Operadores

Los operadores nos permiten hacer cálculos y comparaciones. Los aritméticos (+, -, *, /, %) operan con números. Los de comparación (===, !==, >, <, >=, <=) devuelven true/false. El === compara valor Y tipo (usa siempre este, no ==). Los lógicos (&&, ||, !) combinan condiciones.
operadores.js
// Aritméticos
10 + 3   // 13
10 % 3   // 1  (resto de la división)
2 ** 8   // 256 (potencia)

// Comparación (siempre ===)
"5" ==  5   // true  ← peligroso, convierte tipos
"5" === 5   // false ← correcto, compara tipo también

// Lógicos
true && false   // false (ambos deben ser true)
true || false   // true  (basta uno)
!true           // false (negación)

// Ternario: condición ? siTrue : siFalse
const msg = edad >= 18 ? "mayor" : "menor"
El operador ternario es un if/else en una sola línea: muy útil para asignar valores según una condición. El % (módulo) te da el resto de dividir, perfecto para saber si un número es par (n % 2 === 0).

▶ Prueba la calculadora

// resultado aquí
03

Condicionales

Los condicionales permiten tomar decisiones: si pasa esto, haz aquello; si no, haz lo otro. La estructura básica es if / else if / else. Para comparar un valor contra muchas opciones, switch es más limpio que encadenar muchos if.
condicionales.js
const nota = 7.5

if (nota >= 9) {
    console.log("Sobresaliente")
} else if (nota >= 7) {
    console.log("Notable")       // ← se ejecuta este
} else if (nota >= 5) {
    console.log("Aprobado")
} else {
    console.log("Suspenso")
}

// Switch: ideal para valores exactos
const dia = "lunes"
switch (dia) {
  case "lunes":
    console.log("Inicio de semana")
    break
  case "viernes":
    console.log("¡Por fin viernes!")
    break
  default:
    console.log("Un día normal")
}
JS evalúa los if de arriba a abajo y ejecuta el primero que se cumpla. En el switch, el break es imprescindible para que no caiga al siguiente case. El default equivale al else.

▶ Comprueba tu nota

// calificación aquí
04

Bucles

Los bucles repiten código mientras se cumpla una condición. for es ideal cuando sabes cuántas veces repetir. while repite mientras algo sea verdad. for...of recorre arrays elemento a elemento. for...in recorre las propiedades de un objeto.
bucles.js
// for clásico
for (let i = 0; i < 5; i++) {
    console.log(i)  // 0, 1, 2, 3, 4
}

// while
let contador = 10
while (contador > 0) {
    console.log(contador)
    contador -= 2   // 10, 8, 6, 4, 2
}

// for...of (para arrays)
const frutas = ["🍎", "🍌", "🍊"]
for (const fruta of frutas) {
    console.log(fruta)
}

// break y continue
for (let n = 0; n < 10; n++) {
    if (n === 3) continue  // salta el 3
    if (n === 7) break     // para en el 7
    console.log(n)
}
El for clásico tiene tres partes: inicio (let i=0), condición (i<5) e incremento (i++). break sale del bucle y continue salta a la siguiente iteración sin ejecutar el resto del bloque.

▶ Genera la tabla de multiplicar

// tabla aquí
05

Arrays

Un array es una lista ordenada de elementos. Se declara con corchetes [] y cada elemento tiene un índice que empieza en 0. Tienen métodos muy potentes: push añade al final, pop elimina el último, splice borra por índice, filter filtra, map transforma, find busca el primero que cumpla la condición.
arrays.js
const nums = [3, 1, 4, 1, 5, 9, 2]

nums.push(6)              // añade 6 al final
nums.pop()               // elimina el último (6)
nums.splice(2, 1)        // elimina 1 elemento desde índice 2

// map: transforma cada elemento
const dobles = nums.map(n => n * 2)

// filter: devuelve los que cumplan la condición
const mayores = nums.filter(n => n > 3)

// find: el primero que cumple
const primero = nums.find(n => n > 5)

// forEach: recorrer sin devolver nada
nums.forEach((n, i) => console.log(`[${i}] = ${n}`))

// includes / indexOf
nums.includes(9)         // true
nums.indexOf(9)          // posición

// sort y reverse
[...nums].sort((a,b) => a - b)    // orden ascendente
map y filter devuelven nuevos arrays sin modificar el original. forEach recorre pero no devuelve nada. Al hacer sort numérico, debes pasar una función comparadora (a,b) => a-b, de lo contrario ordena como texto.
06

Funciones

Una función es un bloque de código reutilizable al que le pones nombre. Le puedes pasar parámetros (datos de entrada) y puede retornar un resultado. Hay varias formas de escribirlas: declaración clásica, expresión de función y arrow function (la más moderna y compacta).
funciones.js
// Declaración clásica (se puede usar antes de definirla)
function saludar(nombre) {
    return `Hola, ${nombre}!`
}

// Expresión de función
const despedir = function(nombre) {
    return `Adiós, ${nombre}!`
}

// Arrow function
const doble = (n) => n * 2            // una línea, return implícito
const sumar = (a, b) => {             // varias líneas, return explícito
    const resultado = a + b
    return resultado
}

// Parámetros por defecto
const presentar = (nombre, rol = "alumno") => {
    return `${nombre} es ${rol}`
}

presentar("Ada")              // "Ada es alumno"
presentar("Tim", "profesor") // "Tim es profesor"
Las arrow functions son la forma preferida hoy. Si solo hay un return de una expresión, puedes omitir las llaves y el return. Los parámetros por defecto (con =) evitan tener que comprobar si el argumento llegó o no.
07

DOM

El DOM (Document Object Model) es la representación del HTML como un árbol de objetos que JS puede leer y modificar. Con él podemos seleccionar elementos, cambiar su contenido, su estilo, añadir o borrar nodos y mucho más.
dom.js
// Seleccionar elementos
const caja  = document.getElementById('miCaja')
const items = document.querySelectorAll('.item')
const btn   = document.querySelector('button')

// Leer y cambiar contenido
caja.textContent = "Hola mundo"
caja.innerHTML   = "<strong>Negrita</strong>"

// Cambiar estilos
caja.style.color      = "red"
caja.style.fontSize   = "20px"
caja.classList.add('activo')
caja.classList.remove('activo')
caja.classList.toggle('activo')   // añade o quita

// Leer valores de inputs
const valor = document.getElementById('miInput').value

// Crear y añadir elementos
const p = document.createElement('p')
p.textContent = "Nuevo párrafo"
document.body.appendChild(p)

// Eliminar elemento
p.remove()
querySelector y querySelectorAll aceptan cualquier selector CSS. textContent es más seguro que innerHTML porque no interpreta HTML (evita ataques XSS). classList.toggle es muy cómodo para activar/desactivar clases CSS.

▶ Manipula el DOM en tiempo real

Este texto cambiará...
08

Eventos

Los eventos son acciones del usuario (clic, tecla pulsada, ratón encima, scroll…) a las que podemos reaccionar con JavaScript. La forma recomendada es addEventListener, que añade una función (listener) que se ejecuta cuando ocurre el evento.
eventos.js
const btn = document.getElementById('miBoton')

// addEventListener(tipo, función)
btn.addEventListener('click', () => {
    console.log('¡Hiciste clic!')
})

// El objeto 'event' tiene info del evento
btn.addEventListener('click', (event) => {
    console.log(event.target)    // el elemento clicado
    console.log(event.type)      // "click"
})

// Eventos de teclado
document.addEventListener('keydown', (e) => {
    console.log(e.key)           // "Enter", "a", "Escape"...
})

// Eventos de formulario
const input = document.getElementById('miInput')
input.addEventListener('input', (e) => {
    console.log(e.target.value)  // valor en tiempo real
})

// Prevenir comportamiento por defecto
form.addEventListener('submit', (e) => {
    e.preventDefault()          // evita que recargue la página
})
e.preventDefault() es esencial en formularios para evitar que la página se recargue. event.target apunta al elemento exacto que disparó el evento. Puedes añadir varios listeners al mismo elemento.

▶ Detector de eventos

// eventos aquí
09

Math

El objeto Math de JS tiene constantes y métodos matemáticos ya listos para usar. No necesitas hacer new Math(), se usa directamente. Los más útiles: Math.random() genera un número entre 0 y 1, Math.floor/ceil/round redondean, y Math.max/min devuelven el mayor o menor.
math.js
// Constantes
Math.PI         // 3.14159...
Math.E          // 2.71828...

// Redondeo
Math.floor(4.9)   // 4  (hacia abajo)
Math.ceil(4.1)    // 5  (hacia arriba)
Math.round(4.5)  // 5  (el más cercano)

// Valor absoluto, raíz, potencia
Math.abs(-7)      // 7
Math.sqrt(25)     // 5
Math.pow(2, 10)   // 1024

// Max y min
Math.max(3, 9, 1)  // 9
Math.min(3, 9, 1)  // 1

// Número aleatorio entre min y max (entero)
function aleatorio(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
}
aleatorio(1, 6)   // simula un dado
Math.random() devuelve un decimal entre 0 (incluido) y 1 (excluido). La fórmula Math.floor(Math.random() * (max - min + 1)) + min es el patrón estándar para enteros aleatorios en un rango.

▶ Lanza el dado

—
10

Strings

Los strings (cadenas de texto) tienen métodos para buscar, cortar, transformar y combinar texto. Los template literals (comillas invertidas `` ` ``) permiten insertar variables directamente con ${variable}.
strings.js
const texto = "  Hola Mundo  "

texto.length              // 14 (longitud)
texto.trim()              // "Hola Mundo" (quita espacios)
texto.toUpperCase()      // "  HOLA MUNDO  "
texto.toLowerCase()      // "  hola mundo  "
texto.includes("Mundo")  // true
texto.startsWith("Ho")  // false (tiene espacios)
texto.trim().startsWith("Ho")  // true

// Extraer
texto.slice(2, 6)         // "Hola"
texto.split(" ")          // array de palabras

// Reemplazar
texto.replace("Mundo", "JS")   // "  Hola JS  "
texto.replaceAll("o", "0")    // reemplaza todas

// Template literal
const nombre = "Ana"
const saludo = `Hola, ${nombre}! Tienes ${2024 - 2000} años`

// Rellenar con ceros
String(5).padStart(2, "0")   // "05"
Los métodos de string no modifican el original, devuelven uno nuevo. Es muy común encadenarlos: texto.trim().toLowerCase(). split convierte un string en array y join hace lo contrario.
11

Fechas

El objeto Date de JS maneja fechas y horas. new Date() crea la fecha y hora actual. Puedes extraer partes como el día, mes o año con métodos get.... Ojo: los meses van de 0 (enero) a 11 (diciembre).
fechas.js
const ahora = new Date()

ahora.getFullYear()   // 2025
ahora.getMonth()      // 0-11  ← ojo, enero=0
ahora.getDate()       // día del mes (1-31)
ahora.getDay()        // día semana (0=domingo)
ahora.getHours()      // hora (0-23)
ahora.getMinutes()    // minutos
ahora.getTime()       // milisegundos desde 1 ene 1970

// Crear una fecha concreta
const navidad = new Date(2025, 11, 25)  // mes 11 = diciembre

// Calcular diferencia en días
const hoy  = new Date()
const fin  = new Date(2025, 5, 20)  // 20 junio
const diff = fin - hoy               // diferencia en ms
const dias = Math.ceil(diff / (1000 * 60 * 60 * 24))

// Formatear con toLocaleDateString
ahora.toLocaleDateString('es-ES')  // "12/05/2025"
Para calcular diferencias de fechas, JS trabaja en milisegundos. La fórmula diff / (1000 * 60 * 60 * 24) convierte milisegundos a días. toLocaleDateString formatea la fecha según el idioma/región.

▶ Calculadora de días

// días aquí
12

Formularios

Los formularios HTML permiten recoger datos del usuario. Con JS los hacemos dinámicos: leemos los valores con .value, validamos que no estén vacíos con .trim() y los procesamos sin recargar la página. A continuación hay un gestor de préstamos CRUD completo (Crear, Leer, Actualizar, Borrar).
formularios.js — lectura de campos
// Leer diferentes tipos de input
const nombre  = document.getElementById('nombre').value.trim()
const opcion  = document.getElementById('select').value
const marcado = document.getElementById('check').checked
const radio   = document.querySelector('input[name="turno"]:checked')

// Validación básica
if (nombre === "") {
    alert("El nombre es obligatorio")
    return
}
if (!radio) {
    alert("Selecciona un turno")
    return
}
.trim() elimina los espacios al inicio y final — así evitas que alguien envíe solo espacios. .checked devuelve true/false para checkboxes y radios. El selector input[name="turno"]:checked busca el radio seleccionado de ese grupo.

▶ Gestor de préstamos (CRUD completo)

Alumno Material Turno Devuelto Acciones
No hay préstamos registrados
13

Errores típicos

En JS hay errores que todo el mundo comete al empezar. Conocerlos de antemano te ahorra mucho tiempo. Aquí están los más frecuentes con su solución. También existe try/catch para capturar errores en tiempo de ejecución sin que el programa explote.
errores_tipicos.js
// ❌ ERROR 1: = en vez de === en if
if (x = 5) { }    // asigna, no compara
if (x === 5) { }  // ✅ correcto

// ❌ ERROR 2: var en vez de let/const
// var tiene scope de función, no de bloque → comportamientos raros

// ❌ ERROR 3: olvidar break en switch
switch(n) {
  case 1: console.log("uno")  // sin break cae al case 2
  case 2: console.log("dos")
}

// ❌ ERROR 4: meses de Date empiezan en 0
new Date(2025, 12, 25) // ❌ mes 12 no existe → enero 2026
new Date(2025, 11, 25) // ✅ mes 11 = diciembre

// ❌ ERROR 5: comparar con == en vez de ===
"0" == false  // true  ← trampa
"0" === false // false ← correcto

// ✅ try/catch para capturar errores
try {
    const data = JSON.parse(textoInvalido)  // puede fallar
} catch (error) {
    console.log("Error:", error.message)     // lo capturamos
} finally {
    console.log("Esto siempre se ejecuta")
}

// ❌ ERROR 6: .innerHTML en bucle (lento)
lista.innerHTML += "..."      // ❌ repinta el DOM cada iteración
// ✅ Construye primero, luego asigna una vez
let html = ""
items.forEach(i => html += `<li>${i}</li>`)
lista.innerHTML = html            // ✅ una sola vez
El try/catch envuelve código que podría lanzar un error y lo atrapa sin romper la ejecución. El bloque finally se ejecuta siempre, haya error o no (útil para cerrar recursos). El error 6 es muy habitual en la práctica de préstamos.