⚡ Laboratorio Práctico de JavaScript

Estructura de aprendizaje interactiva. Explora los contenedores de código y presiona los botones.

🚀 0. ¿Qué es JavaScript?

JavaScript (JS) es el lenguaje de programación que le da vida, movimiento e interactividad a las páginas web. Mientras que otros lenguajes definen el contenido o el diseño estático, JavaScript se encarga del comportamiento inteligente en tiempo real.

Para entenderlo de forma sencilla, piensa en una página web como si fuera un edificio:

🧱 HTML (Estructura) Son los ladrillos, las paredes y las columnas. Define qué texto, imágenes o formularios van en el sitio.
🎨 CSS (Presentación) Es la pintura, las ventanas decorativas y los acabados estilizados. Controla los colores y el diseño visual.
⚡ JavaScript (Comportamiento) Es el sistema eléctrico, el ascensor y las puertas automáticas. Hace que las cosas respondan cuando interactúas con ellas.

Gracias a JavaScript podemos detectar clics, validar formularios al instante, hacer animaciones, crear contadores y calcular datos directamente en la pantalla, tal y como lo experimentarás en los siguientes módulos.

📦 1. Variables y Tipos de Datos

Todo bloque de instrucciones en JavaScript que conviva dentro de un archivo HTML debe estar encapsulado en sus etiquetas correspondientes:

<script> // ← Etiqueta de apertura de JavaScript
    let nombre = "Juan"; // Variable modificable (String)
    const edad = 28;     // Variable fija con candado (Number)
</script> // ← Etiqueta de cierre de JavaScript

🔍 2. Scope de Bloque (Alcance de una variable)

El "paréntesis" de color delimita con total precisión las fronteras de aislamiento en memoria donde tus datos cargados en las variables permanecen con vida:

<script> // ← Etiqueta de apertura de JavaScript
let global = "Disponible en todo el script";

if (true) {
let local = "Solo existo aquí adentro";
console.log(local); // ✅ Éxito de lectura
}
console.log(local); // ❌ ¡ERROR! Fuera del paréntesis rosa, la variable local ha muerto.
</script> // ← Etiqueta de cierre de JavaScript

🚦 3. Sentencias Condicionales (Flujos Excluyentes)

Las bifurcaciones lógicas (grupo de bloques if, else if,else), crean rutas aisladas. El motor del navegador solo se adentrará en un único bloque condicional según la opción ingresada:

<script> // ← Etiqueta de apertura de JavaScript

let semaforo = "Amarillo";

if (semaforo === "Rojo") {
console.log("🛑 ¡Detenerse por completo!");
} else if (semaforo === "Amarillo") {
console.log("⚠️ ¡Precaución! Fase intermedia.");
} else {
console.log("🍏 ¡Avanzar libremente!");
}
</script> // ← Etiqueta de cierre de JavaScript

🔁 4. Ciclos (Loops)

Los bucles repiten fragmentos de código de forma iterativa. Analiza las diferencias cruciales de comportamiento en sus comentarios internos:

A. Ciclo For (Ideal si sabes cuántas vueltas vas a dar):

<script>
// DIFERENCIA CLAVE: Todo se configura en su cabecera (Inicio; Condición; Paso).
// Se usa cuando conoces de antemano el número exacto de iteraciones.
for (let i = 1; i <= 3; i++) {
alert("Vuelta FOR: " + i); // Se procesa exactamente 3 veces
}
</script>

B. Ciclo While (Evalúa al inicio - Puede dar 0 vueltas):

<script>
let contadorW = 1; // Inicialización externa

// DIFERENCIA CLAVE: Si la condición fuera falsa al inicio, el bucle da 0 vueltas.
// Se usa cuando dependes de una condición externa y no sabes cuántas vueltas darás.
while (contadorW <= 3) {
alert("Vuelta WHILE: " + contadorW);
contadorW++; // Obligatorio: si olvidas incrementarlo, el navegador colapsará
}
</script>

C. Ciclo Do...While (Evalúa al final - Garantiza mínimo 1 vuelta):

<script>
let contadorDo = 1; // Inicialización externa

// DIFERENCIA CLAVE: Primero ejecuta la acción y DESPUÉS evalúa la condición al final.
// Garantiza que el código de adentro se ejecute al menos 1 vez, aunque la condición sea falsa.
do {
alert("Vuelta DO...WHILE: " + contadorDo);
contadorDo++; // Incremento manual del estado interno
} while (contadorDo <= 3);
</script>

🛠️ 5. Funciones Tradicionales y Funciones Flecha

Una función es una máquina de código que se define una vez, pero no hace nada hasta que tú la activas (la llamas). Mira el proceso completo:

Sintaxis Tradicional (Declaración y Llamada):

<script>
    // 1. DECLARACIÓN: Creamos la máquina y definimos qué parámetros recibe
    function calcularDoble(numero) {
        return numero * 2; // Devuelve el resultado al exterior
    }

    // 2. LLAMADA O INVOCACIÓN: Activamos la función pasándole un valor (5)
    // El resultado retornado se guarda dentro de la variable 'resultado1'
    let resultado1 = calcularDoble(5);

    // 3. USO DEL RESULTADO: Mostramos el valor obtenido en la consola (Imprime: 10)
    console.log(resultado1); 
</script>

Sintaxis Flecha / Arrow Function (Declaración y Llamada):

<script>
    // 1. DECLARACIÓN: Estructura moderna y compacta guardada en una constante
    const calcularDobleFlecha = (numero) => {
        return numero * 2;
    };

    // 2. LLAMADA O INVOCACIÓN: Despertamos la función flecha enviándole un (10)
    let resultado2 = calcularDobleFlecha(10);

    // 3. USO DEL RESULTADO: Enviamos el valor final a la consola (Imprime: 20)
    console.log(resultado2);
</script>

🔌 6. Buenas Prácticas: ¿Dónde incluir JavaScript?

Se puede enlazar código dinámico en múltiples sectores de la estructura. Analiza sus vertientes de inyección directa u optimizada:

A. Scripts Internos (Distribución Embebida en el Body)

Metodología ágil que añade scripts directamente dentro del cuerpo del archivo. Lo ideal es ubicarlos abajo de todos los elementos visuales.

<body>
    <h1>Mi Portal Web</h1>

    <script> // ← Etiqueta de apertura de JavaScript
        let usuario = "Juan";
        console.log(usuario);
    </script> // ← Etiqueta de cierre de JavaScript
</body>

B. Scripts Externos (Vinculados de forma eficiente en el Head)

Para arquitecturas reales, delegamos la lógica en ficheros independientes aislados `.js` e implementamos modificadores de rendimiento:

<!-- Se descarga paralelamente y se ejecuta estrictamente al completarse el árbol HTML -->
<script src="app.js" defer></script>

<!-- Descarga asíncrona inmediata que congela el renderizado HTML para procesarse -->
<script src="analiticas.js" async></script>