Conceptos básicos

🚀 Clases en Vivo — Inicio: Domingo 6 de Septiembre ($200 MXN / clase). Aprende a programar desde cero con acompañamiento directo y construye el proyecto ShortURL.

Apartar mi Lugar en las Clases en Vivo

En la Lección 1: Antes de empezar (L1) dimos nuestros primeros pasos abriendo la consola del navegador y ejecutando instrucciones interactivas. Hoy nos adentraremos en el corazón de la programación: los 5 bloques constructivos con los que se crea cualquier aplicación en el mundo.

Esta sesión de 4 horas está diseñada para que entiendas la teoría a través de analogías claras y la apliques inmediatamente con retos de programación en vivo.

🗺️ Estructura de la Sesión

Cada una de nuestras sesiones semanales sigue una metodología pedagógica dividida en 5 fases:

Estructura de la Sesión
├── ☕ Fase 1: Revisión del Tema Anterior y Conclusiones
├── 🎯 Fase 2: Introducción al Tema y Fundamentos
├── 💻 Fase 3: Práctica Asistida en Vivo
├── 🗣️ Fase 4: Exposición, Debate y Debugging
└── 🏠 Fase 5: Reto Semanal y Práctica en Casa

☕ Fase 1: Revisión del Tema Anterior y Conclusiones

Comenzamos la sesión revisando el proyecto realizado en casa y conectándolo con los temas de hoy.

1. Puesta en Común del Reto de la Lección 1

En la sesión anterior construimos un calculador interactivo de tiempo de vida con prompt(), alert() y Number().

Discusión en grupo: ¿Qué ocurrió cuando ingresaste letras o dejaste el campo vacío en lugar de escribir un año numérico?
(Apareció NaN o “Not a Number”, porque JavaScript no puede restar letras de un número).
¿Qué aprendimos? Las computadoras son extremadamente estrictas con los tipos de datos que reciben.

2. El Puente Conceptual: ¿Por qué necesitamos variables y lógica?

En la Lección 1 escribimos instrucciones sueltas en la consola interactiva. Como descubrimos, la consola es un laboratorio fantástico para probar ideas al instante, pero el código desaparece en cuanto cerramos la pestaña.

Para construir aplicaciones reales y prepararnos para cuando guardemos nuestro código en archivos definitivos, necesitamos que el programa aprenda a razonar mediante 5 pilares fundamentales:

Recordar datos a lo largo del tiempo (Variables y Memoria).
Clasificar la información correctamente (Tipos de datos).
Calcular y comparar valores (Operadores).
Tomar caminos distintos según la situación (Condicionales).
Automatizar repeticiones sin cansarse (Bucles).
Empaquetar tareas para reutilizarlas una y otra vez (Funciones).

🎯 Fase 2: Introducción al Tema y Fundamentos Teóricos

En esta fase exploraremos los 5 pilares fundamentales de la programación mediante analogías y ejemplos directos en JavaScript.

1. Variables: Las Cajas Etiquetadas de la Memoria

Imagina que la memoria RAM de tu computadora es un almacén gigante con millones de estanterías numeradas. Para no tener que recordar que tu dato está en la estantería #0x7FFF5FBFFD98, el lenguaje te permite tomar una caja, pegarle una etiqueta con un nombre claro y guardar un valor dentro.

{/* 1. Declaración */} let {/* 2. Nombre */} puntosJugador {/* 3. Asignación */} = {/* 4. Valor */} 100;

La diferencia moderna: `let` vs `const`

let (Variable reasignable): Se utiliza cuando el valor puede cambiar con el tiempo.
```
let vidas = 3;
vidas = 2; // ¡Correcto! El jugador perdió una vida.
```

const (Constante inmutable): Se utiliza cuando el valor es fijo y nunca debe cambiar accidentalmente.

const pi = 3.1416;
const fechaNacimiento = "15/08/1995";
// Si intentas hacer: fechaNacimiento = "otra fecha"; -> JavaScript arrojará un error.

Reglas para nombrar variables:

Usa camelCase (comienza en minúscula y cada nueva palabra empieza con mayúscula): nombreCompleto, precioTotal.
Sé descriptivo: es mejor precioConDescuento que solo p o x.
Prohibido usar espacios, guiones o tildes en los nombres de variables.

2. Tipos de Datos: La Naturaleza de la Información

No todos los datos se procesan igual en la memoria. JavaScript clasifica la información en categorías fundamentales:

// 1. String (Cadena de texto): Siempre entre comillas dobles "" o simples ''
const saludo = "Bienvenido a Desde0";

// 2. Number (Número): Enteros o decimales, siempre sin comillas
const precioCafe = 45.50;
const cantidad = 2;

// 3. Boolean (Booleano): Solo dos valores posibles (true o false)
const estaDisponible = true;
const esFinDeSemana = false;

// 4. Array (Arreglo o Lista): Una colección ordenada de elementos entre corchetes []
const listaCompras = ["Manzanas", "Pan", "Leche", "Huevos"];

// 5. Object (Objeto o Ficha): Un conjunto de propiedades organizadas entre llaves {}
const usuario = {
  nombre: "Diana",
  edad: 28,
  rol: "Estudiante"
};

3. Operadores: El Motor de Cálculo y Comparación

Los operadores nos permiten combinar, transformar y evaluar variables:

Aritméticos (Cálculos):

+ (Suma y concatenación de texto)
- (Resta)
* (Multiplicación)
/ (División)
% (Módulo o residuo: Devuelve lo que sobra de una división entera. Ej: 10 % 3 da 1 porque 3 cabe tres veces en 10 y sobra 1).

Comparación (Preguntas lógicas que devuelven `true` o `false`):

=== (Igualdad estricta: ¿es exactamente el mismo valor y tipo?).
!== (Desigualdad estricta: ¿es diferente?).
>, <, >=, <= (Mayor, menor, mayor o igual, menor o igual).

Lógicos (Combinación de decisiones):

&& (AND / Y además: Da true solo si ambas condiciones son verdaderas).
|| (OR / O bien: Da true si al menos una condición es verdadera).
! (NOT / Negación: Invierte el valor; !true se convierte en false).

4. Estructuras de Control y Funciones

La Toma de Decisiones (`if`, `else if`, `else`)

Permite que el código elija qué camino seguir según la situación:

const edadCliente = 20;

if (edadCliente >= 18) {
  console.log("Acceso autorizado al recinto 🟢");
} else {
  console.log("Acceso denegado: Se requiere ser mayor de edad 🔴");
}

La Automatización con Bucles (`for` y `while`)

Permite repetir una tarea tantas veces como sea necesario en un abrir y cerrar de ojos:

// Bucle FOR: Ideal cuando sabemos cuántas veces queremos repetir algo
for (let vuelta = 1; vuelta <= 3; vuelta++) {
  console.log("Dando la vuelta número:", vuelta);
}

Funciones: Mini-fábricas reutilizables

Una función es un bloque de instrucciones que recibe entradas (parámetros), hace un cálculo interno y devuelve una salida (return):

function calcularPrecioFinal(precio, porcentajeIva) {
  const impuesto = precio * (porcentajeIva / 100);
  return precio + impuesto;
}

const totalProducto1 = calcularPrecioFinal(100, 16); // 116
const totalProducto2 = calcularPrecioFinal(250, 16); // 290

💻 Fase 3: Práctica Semanal Asistida en Vivo

Abriremos la consola de nuestro navegador y construiremos juntos 4 retos guiados paso a paso.

🧩 Reto 1: La Calculadora de Cuentas y Propinas

Objetivo: Combinar variables const, operadores matemáticos y formateo de texto para resolver un problema cotidiano.

Imagina que saliste a cenar con 3 amigos y quieren calcular la cuenta total con propina incluida y saber cuánto debe aportar cada uno.

Escribe y ejecuta en tu consola:

// 1. Variables base
const cuentaComida = 680;
const porcentajePropina = 15; // 15%
const totalComensales = 4;

// 2. Operaciones lógicas
const valorPropina = cuentaComida * (porcentajePropina / 100);
const granTotal = cuentaComida + valorPropina;
const cuotaIndividual = granTotal / totalComensales;

// 3. Imprimimos el desglose
console.log("--- 🧾 CUENTA DEL RESTAURANTE ---");
console.log("Consumo: $" + cuentaComida);
console.log("Propina (" + porcentajePropina + "%): $" + valorPropina);
console.log("Total con propina: $" + granTotal);
console.log("Cada persona aporta: $" + cuotaIndividual);

🧩 Reto 2: El Portero Virtual / Control de Acceso con `if/else`

Objetivo: Dominar condicionales anidados y operadores lógicos booleanos (&&, ||).

Vamos a programar las reglas de acceso de un club nocturno:

Debe tener al menos 18 años.
Si tiene boleto VIP o está en la lista de invitados, entra directo a la zona preferencial.
Si es mayor de edad pero no tiene VIP, entra a la zona general.
Si es menor de 18 años, acceso denegado.

let edadUsuario = 19;
let tieneBoletoVip = false;
let estaEnListaInvitados = true;

console.log("--- 🚪 CONTROL DE ACCESO ---");

if (edadUsuario >= 18) {
  if (tieneBoletoVip || estaEnListaInvitados) {
    console.log("🟢 ¡Bienvenido! Acceso a ZONA VIP.");
  } else {
    console.log("🟡 ¡Bienvenido! Acceso a ZONA GENERAL.");
  }
} else {
  console.log("🔴 Acceso denegado: Eres menor de edad.");
}

Prueba cambiar los valores de edadUsuario, tieneBoletoVip y estaEnListaInvitados en la consola para ver cómo reacciona el portero virtual.

🧩 Reto 3: El Generador Automático de Tablas y Conteo con Bucles

Objetivo: Automatizar repeticiones con bucles for y recorrer arreglos de datos.

Ejercicio 3.1: Tabla de multiplicar instantánea con `for`

const tablaDel = 8;

console.log("--- TABLA DEL " + tablaDel + " ---");
for (let i = 1; i <= 10; i++) {
  const resultado = tablaDel * i;
  console.log(tablaDel + " x " + i + " = " + resultado);
}

Ejercicio 3.2: Recorrer una lista de alumnos con un bucle

const alumnos = ["Sebastián", "Valeria", "Mateo", "Camila", "Lucía"];

console.log("--- LISTA DE ASISTENCIA (" + alumnos.length + " alumnos) ---");
for (let i = 0; i < alumnos.length; i++) {
  console.log("Alumno #" + (i + 1) + ": " + alumnos[i]);
}

🧩 Reto 4: La Fábrica de Funciones Reutilizables

Objetivo: Aprender a modularizar código para que sea limpio, mantenible y profesional.

Vamos a transformar nuestras fórmulas en funciones reutilizables:

// 1. Función para calcular el descuento de cualquier producto
function calcularDescuento(precioOriginal, porcentajeDescuento) {
  const ahorro = precioOriginal * (porcentajeDescuento / 100);
  return precioOriginal - ahorro;
}

// 2. Función para determinar si una persona es mayor de edad
function esMayorDeEdad(edad) {
  return edad >= 18;
}

// Probamos nuestras funciones con diferentes valores
console.log("Laptop con 15% de descuento: $" + calcularDescuento(12000, 15));
console.log("Audífonos con 30% de descuento: $" + calcularDescuento(1500, 30));
console.log("¿Una persona de 17 años es mayor de edad?", esMayorDeEdad(17)); // false
console.log("¿Una persona de 25 años es mayor de edad?", esMayorDeEdad(25)); // true

🗣️ Fase 4: Exposición de Resultados, Debate y Debugging

En esta fase los estudiantes muestran sus consolas, comparan cómo resolvieron los retos y analizamos las trampas más comunes del código en vivo.

🐞 Las 4 Trampas Clásicas de Principiantes (y cómo solucionarlas)

1. La trampa del igual solitario: `=` vs `===`

El error: Escribir if (edad = 18) en lugar de if (edad === 18).
Consecuencia: Un solo = asigna el valor a la variable en vez de compararla, haciendo que la condición siempre se evalúe como verdadera.
Regla mnemotécnica: = es para guardar; === es para preguntar.

2. El bucle infinito con `while`

El error: Escribir un bucle while (contador <= 5) y olvidar poner contador++ dentro del bloque.
Consecuencia: El contador nunca sube, la condición jamás se apaga y el navegador se congela consumiendo el 100% de la CPU.
Cómo salir: Presiona Shift + Esc en Chrome para abrir el Administrador de Tareas del navegador y finalizar la pestaña congelada.

3. El alcance de las variables (Scope)

El error: Crear una variable con let dentro de un if { let mensaje = "Hola"; } e intentar usarla fuera del if.
Principio: Las variables que nacen dentro de llaves { ... } mueren al salir de esas llaves. Si necesitas usarla afuera, declárala antes del bloque.

4. El fantasma del `NaN` (Not-a-Number)

El error: Multiplicar una variable que contiene texto inválido ("hola" * 5).
Solución: Valida siempre que tus variables numéricas contengan números reales antes de operar con ellas.

🏠 Fase 5: Definición de Práctica en Casa / Reto Semanal

Para consolidar tu pensamiento lógico y preparar el terreno para la Lección 3, desarrollarás tu primer sistema comercial interactivo.

🏆 Proyecto Semanal: “El Asistente de Facturación del Minimarket”

Descripción del Reto: Crea un programa en la consola de JavaScript que calcule la factura de compra de un cliente en una tienda de abarrotes aplicando descuentos e impuestos según las siguientes especificaciones:

Especificaciones Técnicas:

La canasta de compras: Crea un arreglo llamado preciosProductos con los precios de 4 artículos (ej. [45, 120, 85, 90]).
El cálculo del subtotal: Usa un bucle for para recorrer el arreglo y sumar el valor de todos los productos en una variable subtotal.
La función de descuento: Crea una función llamada aplicarDescuento(monto) con estas reglas:
- Si el monto es mayor a $300, aplica un 15% de descuento.
- Si el monto está entre $150 y $300, aplica un 5% de descuento.
- Si el monto es menor a $150, no aplica descuento (0%).
La función de impuestos: Crea una función llamada calcularIva(montoConDescuento) que calcule el 16% de IVA sobre el valor descontado.
Salida final formateada: Imprime en la consola un ticket de compra con este formato:

========================================
🛒 MINIMARKET DESDE0 - TICKET DE COMPRA
========================================
• Subtotal de 4 productos: $340.00
• Descuento especial: -$51.00
• Subtotal con descuento: $289.00
• IVA (16%): +$46.24
----------------------------------------
💳 TOTAL FINAL A PAGAR: $335.24
========================================
¡Gracias por su compra en Minimarket Desde0!

📚 Recursos y Videos Recomendados

Para reforzar los conceptos aprendidos hoy con explicaciones visuales y amenas:

¿Qué son VARIABLES en PROGRAMACIÓN? Explicación detallada de variables, tipos de datos (int, string, char) y convenciones de nombres.

Condicionales y Bucles explicados para principiantes Toma de decisiones en programas mediante lógica booleana y estructuras condicionales.

Gramática y Tipos de Datos Documentación oficial sobre declaraciones de variables (let, const, var) y tipos primitivos.

Funciones en JavaScript (MDN) Guía completa de Mozilla sobre declaración, parámetros, retornos y alcance (scope) de funciones.

🚀 Conclusión y Próximos Pasos

¡Extraordinario trabajo! En esta sesión intensiva de 4 horas has dominado los cinco pilares con los que se construye todo el software moderno: variables, tipos de datos, operadores, estructuras de control y funciones.

En la próxima sesión exploraremos el catálogo completo de herramientas y sintaxis de JavaScript en nuestra Lección 3: Language Tour (L3).