Teoría: Repaso 2. Variables y tipos de datos

¡Felicidades! Ahora sabes guardar información, hacer cálculos, construir mensajes dinámicos y entender los tipos de datos. ¡Mira todo lo que puedes hacer!

Ejemplo: un programa de resumen de compra

Abre la consola (clic derecho → Inspeccionar → pestaña Consola) y copia este código:

// Datos del pedido
let producto = 'Café';
let precio = 6000;
let cantidad = 2;
let total = precio * cantidad;
let cliente = 'Lucía';

// Mostrar saludo personalizado
console.log(`Hola, ${cliente}`);

// Mostrar resumen del pedido
console.log(`Producto: ${producto}`);
console.log(`Cantidad: ${cantidad}`);
console.log(`Total: $${total} COP`);

// Mensaje final
console.log('¡Gracias por tu compra!');

Verás cómo el programa combina texto, variables y cálculos para dar una experiencia completa.

Vamos línea por línea

✅ Variables: guardas datos como el nombre del producto, precio y cliente.

✅ Cálculos: multiplicas precio por cantidad con una expresión.

✅ Interpolación de texto: construyes frases como Hola, Lucía sin concatenar manualmente.

✅ Tipos de datos: sabes que producto es un texto (string), precio es un número (number) y puedes detectarlo con typeof.

✅ Mensajes claros: muestras información útil para el usuario, como lo haría una tienda real.

¿Quieres verlo en acción con diseño?

También creamos una versión en HTML, CSS y JavaScript para que puedas ver cómo este mismo ejemplo se vería en una página web. Puedes probarlo en CodePen y cambiar el nombre del cliente, la cantidad o el producto para ver cómo se actualiza todo automáticamente.

👉 Mira el ejemplo en CodePen

Nota: En el código original usamos console.log() para mostrar los mensajes en la consola del navegador. Pero en esta versión usamos document.getElementById().textContent para mostrar los datos directamente en la pantalla. No te preocupes si no entiendes esto todavía: más adelante lo aprenderás.

¿Qué sigue?