JS Básico III

01

Sección 01

Objetos {}

Crear y acceder

OBJETO

const persona = {
  nombre: "Ana",
  edad: 28,
  ciudad: "Madrid",
  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
};

persona.nombre;       // "Ana" (dot)
persona["edad"];    // 28   (bracket)
persona.saludar();  // "Hola, soy Ana"

▶ Construye tu objeto

Object methods

OBJETO

const obj = { a:1, b:2, c:3 };

Object.keys(obj);
// ["a", "b", "c"]

Object.values(obj);
// [1, 2, 3]

Object.entries(obj);
// [["a",1],["b",2],["c",3]]

Object.assign({}, obj, {d:4});
// {a:1, b:2, c:3, d:4}

▶ clave:valor, clave:valor ...

02

Sección 02

Clases class

Definir e instanciar

CLASE

class Animal {
  constructor(nombre, sonido) {
    this.nombre = nombre;
    this.sonido = sonido;
  }
  hablar() {
    return `${this.nombre} dice: ${this.sonido}!`;
  }
}

class Perro extends Animal {
  constructor(nombre) {
    super(nombre, "Guau");
  }
  traer() { return "🎾 ¡Lo traje!"; }
}

const rex = new Perro("Rex");
rex.hablar(); // Rex dice: Guau!
rex.traer();  // 🎾 ¡Lo traje!

▶ Crea un animal

03

Sección 03

Destructuring { }

Objetos

OBJETO

const user = {
  nombre: "Carlos",
  edad: 32,
  rol: "admin"
};

// Extraer en variables:
const { nombre, edad, rol } = user;

// Con alias:
const { nombre: n, edad: e } = user;

// Con valor por defecto:
const { pais = "España" } = user;

▶ Desestructura un objeto

Arrays

ARRAY

const coords = [40.4, -3.7, 650];

// Posición exacta:
const [lat, lng, alt] = coords;

// Saltar elementos:
const [lat, , alt] = coords;

// Swap de variables:
let a = 1, b = 2;
[a, b] = [b, a];

▶ Desestructura un array

04

Sección 04

String methods

Laboratorio de strings

STRING

const s = "  Hola, Mundo!  ";

s.trim();          // "Hola, Mundo!"
s.toUpperCase();   // "  HOLA, MUNDO!  "
s.toLowerCase();   // "  hola, mundo!  "
s.includes("Mundo"); // true
s.replace("Mundo", "JS"); // "Hola, JS!"
s.split(",");       // ["  Hola", " Mundo!  "]
s.slice(2, 6);      // "Hola"
s.padStart(20, "*"); // "****  Hola, Mundo!  "

▶ Escribe un texto y aplica métodos

05

Sección 05

Math objeto

Funciones Math

MATH

Math.round(4.6);   // 5
Math.floor(4.9);   // 4
Math.ceil(4.1);    // 5
Math.abs(-7);      // 7
Math.sqrt(16);    // 4
Math.pow(2,10);   // 1024
Math.max(1,5,3); // 5
Math.random();    // 0..1

▶ Ingresa un número

Número aleatorio en rango

MATH

// Entero aleatorio entre min y max:
function randomInt(min, max) {
  return Math.floor(
    Math.random() * (max - min + 1) + min
  );
}

randomInt(1, 6); // dado 🎲

▶ Genera números aleatorios

–

06

Sección 06

Async / Await

Promise básica

ASYNC

const promesa = new Promise((resolve, reject) => {
  setTimeout(() => {
    const ok = Math.random() > 0.3;
    if (ok) resolve("✅ Éxito");
    else   reject("❌ Error");
  }, 1500);
});

promesa
  .then(res => console.log(res))
  .catch(err => console.error(err));

▶ Simula una promesa (70% éxito)

async / await

ASYNC

const perfilesDemo = {
  1: { name: "Ana", email: "ana@demo.local", city: "Madrid", company: "Estudio Norte" },
  2: { name: "Luis", email: "luis@demo.local", city: "Bilbao", company: "Pixel Lab" }
};

async function cargarPerfil(id) {
  await delay(600);
  if (!perfilesDemo[id]) throw new Error("Perfil no encontrado");
  return perfilesDemo[id];
}

▶ Carga un perfil local simulado

// resultado aparecerá aquí...

07

Sección 07

DOM manipulation

Crear, modificar y eliminar elementos

DOM

// Seleccionar:
const el = document.querySelector("#miDiv");

// Crear y agregar:
const li = document.createElement("li");
li.textContent = "Nuevo ítem";
lista.appendChild(li);

// Modificar estilo:
el.style.color = "red";
el.classList.add("activo");

// Eliminar:
li.remove();

▶ Mini lista interactiva

// lista vacía

08

Sección 08

Try / Catch / Finally

Manejo de errores

ERROR

function dividir(a, b) {
  if (b === 0) {
    throw new Error("No se puede dividir entre 0");
  }
  return a / b;
}

try {
  const resultado = dividir(10, 0);
  console.log(resultado);
} catch (e) {
  console.error("Error:", e.message);
} finally {
  console.log("Siempre se ejecuta");
}

▶ Prueba la división

÷

Tipos de error

ERROR

// ReferenceError — variable no existe:
console.log(noExiste);

// TypeError — tipo incorrecto:
null.toString();

// SyntaxError — código malformado:
eval("{");

// RangeError — valor fuera de rango:
new Array(-1);

// Error personalizado:
throw new Error("Mi error custom");

▶ Dispara distintos errores

// haz clic en un error...