Actividad 26: Introducción a los objetos

Objetivo

Comprender las características básicas de los objetos.

De forma esencial, un objeto en JavaScript es una caja que sirve para guardar información organizada en parejas de clave: valor.
En lugar de tener un montón de variables sueltas por ahí, las metes todas dentro de un objeto para que estén agrupadas y tengan sentido entre sí. Piensa en él como la ficha técnica de algo.

// Un objeto que describe a un usuario
const usuario = {
nombre: «Carlos»,
edad: 28,
activo: true
};

Para sacar la información de esa caja y usarla, simplemente usas el nombre del objeto seguido de un punto y la clave que buscas (por ejemplo: usuario.nombre).

¿Qué ganamos con esto? 
Que si mañana decides que la alerta debe ser azul y llamarse «Éxito», no tienes que tocar el código que modifica el HTML; solo cambias las propiedades dentro de tu objeto infoAlerta. Tus datos controlan lo que se ve en la pantalla.
Instrucciones
Imagina que quieres cambiar el diseño de una tarjeta de alerta en tu página web usando JavaScript. Podemos meter toda la información de esa alerta dentro de un objeto y luego usarla para modificar el DOM.
Crea un archivo html y sigue los pasos:

// 1. HTML
<div id=»alerta»></div>

// 2. JavaScript

//2. 1. Creamos el objeto con los datos de la alerta 
const infoAlerta = {
titulo: «¡Cuidado!»,
colorFondo: «red»,
textoBoton: «Cerrar»
}; 

// 2.2 Seleccionamos el elemento del DOM (el HTML) 
const cajaAlerta = document.getElementById(‘alerta’); 

// 2.3. Usamos el objeto para modificar el DOM
cajaAlerta.style.backgroundColor = infoAlerta.colorFondo; // Cambia el color a rojo 
cajaAlerta.innerHTML = `
<h2>${infoAlerta.titulo}</h2>
<p>Ha ocurrido un error inesperado.</p>
<button>${infoAlerta.textoBoton}</button>
`;