Tema 4.0: Recuerda - Tu Estructura de Proyecto

Antes de comenzar a escribir JavaScript, es fundamental que organices tu proyecto correctamente. Aquí te recordamos cómo hacerlo.

🎯 Estructura Base de tu Proyecto Web

Para que tu página web funcione correctamente con HTMLRecordatorio: HTML es la estructura/esqueleto de tu página. Lo aprendiste en Módulo 2, CSSRecordatorio: CSS es el diseño/ropa de tu página. Lo aprendiste en Módulo 2 y JavaScriptRecordatorio: JavaScript es el cerebro/músculos de tu página. Lo estás aprendiendo ahora en Módulo 3, necesitas crear una carpeta general con esta estructura exacta:

Mi-Proyecto/ ├── index.html ├── css/ │ └── style.css └── js/ └── script.js

📁 ¿Por qué esta estructura?

Carpeta principal (Mi-Proyecto): Es el contenedor de todo tu proyecto. Organiza tu trabajo en un solo lugar.
index.html: Es la página principal de tu sitio web. Los navegadores buscan este archivo primero. Aquí va toda tu estructura HTMLRecordatorio: Las etiquetas como <h1>, <p>, <button> van aquí. Módulo 2.
Carpeta css/: Contiene todos tus archivos de estilos. Mantiene separado el diseño del contenido. Aquí va tu código CSSRecordatorio: Los estilos, colores, tamaños van aquí. Lo aprendiste en Módulo 2.
style.css: Tu archivo de estilos. Se enlaza en el index.html con <link rel="stylesheet" href="css/style.css">
Carpeta js/: Contiene todos tus archivos JavaScript. Mantiene la lógica separada. Aquí irá tu código interactivo.
script.js: Tu archivo JavaScript. Se enlaza en el index.html con <script src="js/script.js"></script>

✅ Ventajas de esta organización:

Claridad: Sabes dónde encontrar cada tipo de código
Escalabilidad: Cuando crezca tu proyecto, es fácil agregar más archivos
Mantenimiento: Si necesitas cambiar el diseño, todo está en css/; si cambias la lógica, todo está en js/
Profesionalismo: Así organizan sus proyectos los desarrolladores reales
Rutas relativas correctas: Las carpetas seperadas facilitan el uso de rutas relativas (ej: href="css/style.css")

📝 Pasos para crear tu estructura:

Crea una carpeta en tu computadora llamada Mi-Proyecto (o el nombre de tu proyecto)
Dentro, crea dos carpetas: css y js
En la raíz (dentro de Mi-Proyecto), crea el archivo index.html
Dentro de la carpeta css/, crea el archivo style.css
Dentro de la carpeta js/, crea el archivo script.js
En tu index.html, enlaza los archivos:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Proyecto</title> <link rel="stylesheet" href="css/style.css"> </head> <body>  <script src="js/script.js"></script> </body> </html>

⚠️ Importante - Rutas relativas:

Note que en el paso 6, usamos rutas relativasRecordatorio: Las rutas relativas son caminos dentro de tu proyecto. Las aprendiste en Módulo 2 (Tema 2.3):

href="css/style.css" → Busca en la carpeta css/ el archivo style.css
src="js/script.js" → Busca en la carpeta js/ el archivo script.js

Esto es mucho mejor que rutas absolutasRecordatorio: Las rutas absolutas incluyen "https://..." Módulo 2 porque tu proyecto funciona en cualquier computadora.

🎓 Checklist antes de continuar:

Antes de avanzar a los temas 3.1, 3.2, etc., verifica que hayas completado esto:

☐ Creé mi carpeta principal (Mi-Proyecto o similar)
☐ Creé la subcarpeta css/ dentro de mi proyecto
☐ Creé la subcarpeta js/ dentro de mi proyecto
☐ Creé el archivo index.html en la raíz
☐ Creé el archivo style.css dentro de css/
☐ Creé el archivo script.js dentro de js/
☐ Enlacé correctamente el CSS y JS en mi index.html
☐ Probé que pueda escribir en los 3 archivos (HTML, CSS, JS)

Si no has completado todo esto, hazlo ahora. Los siguientes temas asumen que tienes esta estructura lista. No podrás ver resultados si los archivos no están bien organizados.

Tema 4.1: Hola Mundo y Consola

Objetivo: Escribir tu primer programa en JavaScript y aprender a comunicarte con la consola para ver qué está pasando "detrás de cámaras".

Step 1: Te Explico

¿Qué es JavaScript y para qué sirve?

Hasta ahora hemos aprendido que HTML es el esqueleto de una página web (estructura) y CSS es la ropa (diseño). Pero un esqueleto y ropa bonita no pueden hacer nada. Ahí entra JavaScript: el cerebro y los músculos de tu página web.

JavaScript te permite hacer que tu página web sea inteligente e interactiva. Por ejemplo:

Cuando haces clic en un botón, algo sucede (aparece un mensaje, se abre un menú, etc.)
Cuando escribes en un campo de texto, la página "escucha" lo que escribes
Tu página puede hacer cálculos, tomar decisiones, y guardar información

La Consola es como tener una "ventana secreta" en tu navegador donde puedes ver mensajes, errores, y hablar directamente con JavaScript. Es tu mejor aliada para aprender y solucionar problemas.

Step 2: Te Enseño

Tu primer programa: "Hola Mundo"

Abre tu editor de código (VS Code) y ve a tu carpeta js/script.js (recuerda la estructura que creaste en 3.0). Escribe lo siguiente:

console.log("Hola Mundo");

Ahora abre tu página index.html en el navegador, y luego abre la consola presionando F12 o Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac). Deberías ver:

Hola Mundo

Step 3: Te Explico (Análisis Detallado)

¿Qué acabamos de hacer?

1. console.log( ) es como un "megáfono" para JavaScript. Le dice al navegador: "Oye, muéstrame esto en la consola para que pueda verlo".

2. "Hola Mundo" es un mensaje de texto (en JavaScript se llama "string"). Todo texto debe ir entre comillas (pueden ser comillas simples 'Hola' o dobles "Hola", ambas funcionan igual).

3. Los paréntesis ( ) significan que estamos ejecutando una acción. console.log es una herramienta que toma lo que le pones adentro y lo muestra.

4. El punto y coma (;) le dice a JavaScript "esta línea terminó". Es como un punto final en una frase.

5. El archivo script.js está dentro de tu carpeta js/. Tu index.html lo enlaza con <script src="js/script.js"></script>.

¿Por qué la consola y no ver el mensaje en la página?

console.log() es principalmente para desarrolladores - para que veamos información técnica. Más adelante aprenderás a mostrar mensajes directamente en la página web que ven los usuarios.

Step 4: Prácticas (Guiado)

Practica paso a paso:

Abre VS Code y navega a tu carpeta Mi-Proyecto
Abre el archivo js/script.js
Escribe: console.log("Hola Mundo");
Guarda (Ctrl + S)
Abre tu index.html en el navegador
Presiona F12 para abrir la consola
Verás tu mensaje "Hola Mundo"

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 1: Múltiples Mensajes

Objetivo: Ahora que sabes usar console.log(), escribe más mensajes en tu consola.

Instrucciones: En tu js/script.js, añade tres líneas más debajo de tu primer console.log():

console.log("Hola Mundo");
console.log("Mi nombre es...");
console.log("Estoy aprendiendo JavaScript");
console.log("¡Esto es emocionante!");

Guarda, recarga la página (F5), abre la consola (F12) y verás 4 mensajes.

Step 6: Lo Expones

Sube una captura de pantalla de tu consola mostrando los 4 mensajes. Comparte también tu código script.js en el foro.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 4.2: Variables - El Almacén de la Información

Objetivo: Entender qué son las variables, cómo crearlas y cómo usarlas para guardar y reutilizar información.

Step 1: Te Explico

¿Qué es una variable?

Imagina que tu navegador tiene una caja de almacenamiento donde puede guardar cosas. Una variable es esa caja.

En la vida real:

Si quiero guardar dinero, lo meto en un sobre y escribo "Mi Dinero" en él
Más tarde, abro el sobre con ese nombre y recupero mi dinero

En JavaScript:

Si quiero guardar un nombre, lo meto en una variable y le doy un nombre
Más tarde, cuando necesito ese nombre, le pido a JavaScript "dame lo que hay en esa variable"

¿Por qué necesito variables?

Reutilizar información: Guardo un valor una vez y lo uso 100 veces sin reescribirlo
Guardar información que cambia: La edad de una persona cambia cada año, la variable puede actualizarse
Hacer el código más limpio: En lugar de escribir el mismo número 20 veces, lo guardo en una variable
Hacer cálculos: Puedo tomar dos variables (como dos números) y sumarlas, restarlas, multiplicarlas, etc.

Step 2: Te Enseño

Creando tu primera variable

En tu archivo js/script.js, escribe:

let nombre = "Juan";
let edad = 25;
let estatura = 1.75;
let esEstudiante = true;

console.log(nombre);
console.log(edad);
console.log(estatura);
console.log(esEstudiante);

Si ejecutas esto, verás en la consola:

Juan
25
1.75
true

Step 3: Te Explico (Análisis Detallado)

Desglosando la sintaxis de variables

Estructura básica:

let nombreVariable = valor;

Elemento por elemento:

1. "let" = La palabra mágica que le dice a JavaScript "voy a crear una caja de almacenamiento".

2. "nombreVariable" = El nombre que le das a tu caja. Puede ser cualquier nombre que tenga sentido. Ejemplos buenos: edad, nombre, ciudad. Ejemplos malos: x, abc.

3. "=" = El signo igual. No significa "es igual a" como en matemáticas. Significa "guarda en la variable".

4. "valor" = Lo que guardas. Puede ser:

Un texto (String): "Juan" (entre comillas)
Un número (Number): 25, 3.14 (sin comillas)
Un verdadero/falso (Boolean): true o false (sin comillas)

Cambiar una variable después

Puedes actualizar una variable así:

let edad = 25;
console.log(edad);  // Muestra: 25

edad = 26;          // La actualizamos (sin "let" la segunda vez)
console.log(edad);  // Muestra: 26

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Crea tus primeras variables

En tu js/script.js:

let miNombre = "Tu Nombre Aquí";
let miEdad = 15;
let miCiudad = "Mi Ciudad";

console.log(miNombre);
console.log(miEdad);
console.log(miCiudad);

Reemplaza los valores con información real tuya.

Ejercicio 2: Operaciones con números

let numero1 = 10;
let numero2 = 5;

console.log(numero1 + numero2);  // Suma: 15
console.log(numero1 - numero2);  // Resta: 5
console.log(numero1 * numero2);  // Multiplicación: 50
console.log(numero1 / numero2);  // División: 2

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 2: Calcula tu Información Personal

Objetivo: Crear variables y hacer cálculos con ellas.

En tu script.js:

let miEdad = [TU EDAD];
let miAñoDeNacimiento = 2024 - miEdad;
let enCincuentaAños = miEdad + 50;

console.log(miAñoDeNacimiento);
console.log(enCincuentaAños);

Reemplaza [TU EDAD] con tu edad real. Guarda y recarga la página.

Step 6: Lo Expones

Sube tu código y una captura de la consola al foro.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 4.3: Condicionales - La Inteligencia de tu Código

Objetivo: Aprender a tomar decisiones en tu código usando if, else if y else.

Step 1: Te Explico

¿Qué son los condicionales?

Hasta ahora, tu código JavaScript siempre hace lo mismo. Pero la vida real no funciona así. Nosotros tomamos decisiones según circunstancias:

En la vida real:

"Si tengo hambre, como"
"Si no tengo dinero, no puedo comprar comida"
"Si hace frío, me pongo un abrigo"

En JavaScript:

"Si el usuario tiene más de 18 años, déjalo ver el contenido"
"Si la respuesta es correcta, muestra '¡Correcto!'"

Los condicionales hacen tu código inteligente porque puede elegir qué hacer según la situación.

Step 2: Te Enseño

Ejemplos simples de condicionales

Ejemplo 1: IF básico

let edad = 18;

if (edad >= 18) {
    console.log("Eres mayor de edad");
}

Ejemplo 2: IF + ELSE

let edad = 15;

if (edad >= 18) {
    console.log("Eres mayor de edad");
} else {
    console.log("Eres menor de edad");
}

Ejemplo 3: IF + ELSE IF + ELSE

let calificacion = 7;

if (calificacion >= 9) {
    console.log("¡Excelente!");
} else if (calificacion >= 7) {
    console.log("Muy bien");
} else {
    console.log("Necesitas estudiar más");
}

Step 3: Te Explico (Análisis Detallado)

Desglose de la sintaxis

Estructura básica:

if (condición) {
    // código si es verdadero
}

Operadores de comparación:

> = Mayor que
< = Menor que
>= = Mayor o igual
<= = Menor o igual
== = Igual a
!= = No igual a

Operadores lógicos:

&& = Y (ambas condiciones verdaderas)
|| = O (al menos una verdadera)

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Tu primer IF

let edad = 20;

if (edad >= 18) {
    console.log("Eres un adulto");
}

Ejercicio 2: IF + ELSE

let calificacion = 6;

if (calificacion >= 7) {
    console.log("¡Aprobaste!");
} else {
    console.log("Necesitas estudiar más");
}

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 3: Sistema de Descuentos

Objetivo: Calcular el precio final según el monto.

let precioProducto = 100;
let precioFinal;

if (precioProducto > 500) {
    precioFinal = precioProducto * 0.8;
    console.log("Descuento 20%: $" + precioFinal);
} else if (precioProducto > 200) {
    precioFinal = precioProducto * 0.9;
    console.log("Descuento 10%: $" + precioFinal);
} else {
    precioFinal = precioProducto;
    console.log("Sin descuento: $" + precioFinal);
}

Prueba con diferentes valores: 50, 250, 600.

Step 6: Lo Expones

Sube tu código y una captura de la consola mostrando 3 ejemplos diferentes.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 4.4: Ciclos (Loops) - Repetir sin Escribir

Objetivo: Aprender a usar bucles para repetir código múltiples veces.

Step 1: Te Explico

¿Qué es un ciclo o loop?

Imagina que tu maestro te pide: "Escribe 'Debo concentrarme' 100 veces".

Con un ciclo, es como decirle: "Repite esta acción 100 veces automáticamente". Los ciclos automatizan la repetición.

¿Por qué necesito ciclos?

Reutilización: Imprimir "Hola" 10 veces sin escribir 10 console.log()
Procesar listas: Si tienes 1000 estudiantes, un ciclo los procesa a todos
Automatizar: El código hace el trabajo pesado

Step 2: Te Enseño

Ejemplos de ciclos

Ejemplo 1: FOR básico

for (let i = 1; i <= 5; i++) {
    console.log(i);
}
// Resultado: 1, 2, 3, 4, 5

Ejemplo 2: FOR con mensaje

for (let i = 1; i <= 3; i++) {
    console.log("Intento número " + i);
}

Ejemplo 3: WHILE

let contador = 5;

while (contador > 0) {
    console.log(contador);
    contador = contador - 1;
}
// Resultado: 5, 4, 3, 2, 1

Step 3: Te Explico (Análisis Detallado)

Desglose sintaxis FOR

for (inicialización; condición; incremento) {
    // Código que se repite
}

1. "inicialización": Creas una variable contadora que empieza en un valor (ej: i = 1)

2. "condición": La pregunta que se hace cada vuelta (ej: i <= 5)

3. "incremento": Qué hacer con la variable cada vuelta (ej: i++)

Flujo paso a paso (for(let i=1; i<=3; i++))

i = 1, ¿1 <= 3? SÍ → Ejecuta código
i++ → i = 2, ¿2 <= 3? SÍ → Ejecuta código
i++ → i = 3, ¿3 <= 3? SÍ → Ejecuta código
i++ → i = 4, ¿4 <= 3? NO → Sal del ciclo

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Contar del 1 al 10

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Ejercicio 2: Tabla de multiplicar del 7

let tabla = 7;

for (let i = 1; i <= 10; i++) {
    let resultado = tabla * i;
    console.log(tabla + " x " + i + " = " + resultado);
}

Ejercicio 3: Suma de números

let suma = 0;

for (let i = 1; i <= 5; i++) {
    suma = suma + i;
}

console.log("La suma de 1 a 5 es: " + suma);

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 4: Números Pares e Impares

Parte 1: Números pares del 0 al 20

for (let i = 0; i <= 20; i = i + 2) {
    console.log(i);
}

Parte 2: Números impares del 1 al 20

for (let i = 1; i <= 20; i = i + 2) {
    console.log(i);
}

Step 6: Lo Expones

Sube tu código y una captura de la consola mostrando ambas secuencias.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 4.5: Funciones - Código Reutilizable

Objetivo: Crear tus propias funciones para agrupar código y reutilizarlo.

Step 1: Te Explico

¿Qué es una función?

Una función es un conjunto de instrucciones agrupadas que puedes reutilizar múltiples veces. Es como crear tu propio "botón personalizado".

En la vida real:

Una licuadora es una función: le das ingredientes (entrada), presionas un botón, y obtienes un jugo (salida)
Una receta es una función: tienes pasos (instrucciones), ingredientes (entrada), y un platillo (salida)

¿Por qué usar funciones?

Reutilización: Escribe código una vez, úsalo 100 veces
Organización: Tu código es más limpio y fácil de entender
Mantenimiento: Si necesitas cambiar algo, cambias en un solo lugar

Step 2: Te Enseño

Ejemplos de funciones

Ejemplo 1: Función simple

function saludar() {
    console.log("¡Hola a todos!");
}

saludar();
saludar();
saludar();

Ejemplo 2: Función con parámetros

function saludarPersona(nombre) {
    console.log("¡Hola " + nombre + "!");
}

saludarPersona("Juan");
saludarPersona("María");

Ejemplo 3: Función que devuelve un valor

function multiplicar(a, b) {
    return a * b;
}

let resultado = multiplicar(5, 4);
console.log("5 x 4 = " + resultado);

Step 3: Te Explico (Análisis Detallado)

Desglose de la sintaxis de funciones

function nombreFuncion(parámetro1, parámetro2) {
    // Código
    return valor;
}

nombreFuncion(argumento1, argumento2);

1. "function": Palabra clave que define una función

2. "nombreFuncion": El nombre descriptivo

3. Parámetros: Lo que la función recibe

4. "return": Devuelve un valor (opcional)

5. Llamar la función: nombreFuncion()

Parámetros vs Argumentos

Parámetros: Variables que la función espera (en la definición)

Argumentos: Los valores reales que pasas (al llamarla)

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Tu primera función

function decirHola() {
    console.log("¡Hola mundo!");
}

decirHola();
decirHola();

Ejercicio 2: Función con parámetro

function saludarPorNombre(nombre) {
    console.log("Buenos días, " + nombre);
}

saludarPorNombre("Ana");
saludarPorNombre("Pedro");

Ejercicio 3: Función que calcula

function duplicar(numero) {
    return numero * 2;
}

let resultado = duplicar(5);
console.log(resultado);

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 5: Calculadora Personal

function sumar(a, b) {
    return a + b;
}

function restar(a, b) {
    return a - b;
}

function multiplicar(a, b) {
    return a * b;
}

function dividir(a, b) {
    if (b == 0) {
        return "No se puede dividir entre 0";
    }
    return a / b;
}

console.log("10 + 5 = " + sumar(10, 5));
console.log("10 - 5 = " + restar(10, 5));
console.log("10 x 5 = " + multiplicar(10, 5));
console.log("10 / 5 = " + dividir(10, 5));

Step 6: Lo Expones

Sube tu código y una captura de consola con los 4 resultados.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 4.6: DOM Básico - JavaScript Interactúa con tu Página

Objetivo: Aprender a seleccionar elementos HTML desde JavaScript y cambiarlos.

Step 1: Te Explico

¿Qué es el DOM?

DOM = Document Object Model. Es la representación de tu página HTMLRecordatorio: HTML es la estructura de tu página. Módulo 2 que JavaScript puede manipular.

El DOM es el árbol de elementos HTML de tu página. JavaScript puede:

Seleccionar: "Dame el párrafo con id='miTexto'"
Cambiar: "Cambia el color de ese párrafo a rojo"
Escuchar: "Cuando hagan clic en ese botón, ejecuta esta función"

¿Cómo funciona?

Sin DOM: Tu página es estática. No reacciona a clics.

Con DOM: JavaScript "habla" con la página. Puede cambiar colores, mostrar/esconder cosas, responder a clics.

Step 2: Te Enseño

Ejemplos de uso del DOM

En tu index.html, necesitas elementos con id:

<h1 id="titulo">Mi Página</h1>
<button id="miBoton">Haz clic</button>

Ejemplo 1: Seleccionar un elemento

let titulo = document.getElementById("titulo");
console.log(titulo);

Ejemplo 2: Cambiar el texto

let titulo = document.getElementById("titulo");
titulo.textContent = "Nuevo Título";

Ejemplo 3: Cambiar estilos CSS

let titulo = document.getElementById("titulo");
titulo.style.color = "red";
titulo.style.fontSize = "30px";

Ejemplo 4: Escuchar un clic

let boton = document.getElementById("miBoton");

boton.addEventListener("click", function() {
    console.log("¡Alguien hizo clic!");
});

Step 3: Te Explico (Análisis Detallado)

Métodos importantes del DOM

1. document.getElementById("id") = Busca un elemento por su id

let elemento = document.getElementById("miId");

2. .textContent = Lee o cambia el texto

elemento.textContent = "Nuevo texto";

3. .style = Cambia estilos CSS

elemento.style.color = "red";
elemento.style.display = "none";  // Esconde

4. .addEventListener(evento, función) = Escucha eventos

elemento.addEventListener("click", function() {
    // Código que se ejecuta al hacer clic
});

5. .value = Lee o cambia el valor de inputs

let input = document.getElementById("email");
console.log(input.value);

⚠️ Importante: El script debe estar después del HTML

En tu index.html, el script debe estar ANTES de cerrar el </body> para que encuentre los elementos.

Step 4: Prácticas (Guiado)

Ejercicios paso a paso

Ejercicio 1: Cambiar texto

En tu index.html:

<h1 id="titulo">Hola Mundo</h1>

En tu js/script.js:

let titulo = document.getElementById("titulo");
titulo.textContent = "¡Hola JavaScript!";

Ejercicio 2: Cambiar estilos

HTML:

<p id="parrafo">Este texto cambiará</p>

JS:

let parrafo = document.getElementById("parrafo");
parrafo.style.color = "blue";
parrafo.style.fontSize = "25px";

Ejercicio 3: Reaccionar a un clic

HTML:

<button id="miBoton">Haz clic</button>
<p id="mensaje"></p>

JS:

let boton = document.getElementById("miBoton");
let mensaje = document.getElementById("mensaje");

boton.addEventListener("click", function() {
    mensaje.textContent = "¡Hiciste clic!";
    mensaje.style.color = "green";
});

Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 6: Validador de Entrada

HTML:

<input type="text" id="nombre" placeholder="Escribe tu nombre">
<button id="enviar">Enviar</button>
<p id="resultado"></p>

JS:

let input = document.getElementById("nombre");
let boton = document.getElementById("enviar");
let resultado = document.getElementById("resultado");

boton.addEventListener("click", function() {
    let nombre = input.value;
    
    if (nombre == "") {
        resultado.textContent = "Por favor, escribe tu nombre";
        resultado.style.color = "red";
    } else {
        resultado.textContent = "¡Hola, " + nombre + "!";
        resultado.style.color = "green";
    }
});

Step 6: Lo Expones

Sube tu código y capturas de tu validador funcionando (con y sin nombre).

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

M4: Lógica (JavaScript)

Tema 4.0: Recuerda - Tu Estructura de Proyecto

🎯 Estructura Base de tu Proyecto Web

📁 ¿Por qué esta estructura?

✅ Ventajas de esta organización:

📝 Pasos para crear tu estructura:

⚠️ Importante - Rutas relativas:

🎓 Checklist antes de continuar:

Tema 4.1: Hola Mundo y Consola

¿Qué es JavaScript y para qué sirve?

Tu primer programa: "Hola Mundo"

¿Qué acabamos de hacer?

¿Por qué la consola y no ver el mensaje en la página?

Practica paso a paso:

🚀 Reto Progresivo Nivel 1: Múltiples Mensajes

Tema 4.2: Variables - El Almacén de la Información

¿Qué es una variable?

Creando tu primera variable

Desglosando la sintaxis de variables

Cambiar una variable después

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 2: Calcula tu Información Personal

Tema 4.3: Condicionales - La Inteligencia de tu Código

¿Qué son los condicionales?

Ejemplos simples de condicionales

Desglose de la sintaxis

Operadores lógicos:

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 3: Sistema de Descuentos

Tema 4.4: Ciclos (Loops) - Repetir sin Escribir

¿Qué es un ciclo o loop?

Ejemplos de ciclos

Desglose sintaxis FOR

Flujo paso a paso (for(let i=1; i<=3; i++))

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 4: Números Pares e Impares

Tema 4.5: Funciones - Código Reutilizable

¿Qué es una función?

Ejemplos de funciones

Desglose de la sintaxis de funciones

Parámetros vs Argumentos

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 5: Calculadora Personal

Tema 4.6: DOM Básico - JavaScript Interactúa con tu Página

¿Qué es el DOM?

¿Cómo funciona?

Ejemplos de uso del DOM

Métodos importantes del DOM

⚠️ Importante: El script debe estar después del HTML

Ejercicios paso a paso

🚀 Reto Progresivo Nivel 6: Validador de Entrada

Configuración avanzada