Teoría: Repaso 3. Usar funciones y métodos

¡Felicidades! Aprendiste a combinar texto, números, funciones, propiedades y métodos. Ahora puedes hacer cosas útiles como calcular pedidos, transformar textos y mostrar mensajes claros. 🛒

Ejemplo: resumen automático de un pedido

Este pequeño programa simula algo que hacen miles de negocios reales cada día: procesar y mostrar un resumen de un pedido. Veamos los problemas que resuelve:

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

// Datos del pedido
let producto = 'Chocolate';
let precio = 4500;
let cantidad = 3;
let cliente = 'andrés';

// Procesar datos
let total = precio * cantidad;
let nombreFormateado = cliente.trim().toUpperCase();
let resumen = `🧾 Pedido de ${producto.toUpperCase()} x${cantidad}`;

// Mostrar en consola
console.log(`👋 Hola, ${nombreFormateado}`);
console.log(resumen);
console.log(`💰 Total a pagar: $${total.toFixed(2)} COP`);
console.log('✅ ¡Gracias por tu compra!');

Línea por línea

✅ Guardas datos como el nombre del producto, precio, cantidad y cliente.

✅ Multiplicas el precio por la cantidad para obtener el total a pagar.

✅ Usas .trim(), .toUpperCase() y .toFixed() para limpiar el nombre, ponerlo en mayúsculas y redondear números.

✅ Construyes mensajes como Hola, ANDRÉS y Total a pagar: $13.500 con interpolación.

✅ Tipos de datos: sabes que cliente es un texto (string), precio es un número (number) y que .toFixed() devuelve una cadena (string).

✅ Mensajes claros: presentas la información como lo haría una app de compras real: saludo, detalle del pedido, total y mensaje final.

¿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 o precio para ver cómo se actualiza todo automáticamente.

👉 Mira el ejemplo en CodePen

Nota: En CodePen no usamos console.log porque no queremos mostrar el resultado en la consola del navegador. En lugar de eso, usamos document.getElementById().textContent para mostrar los mensajes directamente en la pantalla. Pero no te preocupes por eso ahora. Este es solo un ejemplo con fines educativos, para ayudarte a entender cómo funcionan las variables, los cálculos y la salida de información.

¿Y ahora?