JavaScript Avanzado: Lógica y Datos

¡Has tomado una excelente decisión! Profundizar en **JavaScript** es clave para pasar de páginas estáticas a **aplicaciones web interactivas y dinámicas**. Aquí veremos cómo JavaScript maneja la lógica (tomar decisiones, repetir tareas) y cómo organiza datos complejos.

—

1. Estructuras de Control: Tomar Decisiones y Repetir Acciones

Las estructuras de control permiten que tu código JavaScript tome decisiones o repita bloques de código, haciendo que los programas sean mucho más potentes.

a. `if`, `else if`, `else` (Condicionales)

Ejecutan un bloque de código si una condición es verdadera. Si no, pueden ejecutar otro bloque.

let temperatura = 25;

if (temperatura >= 30) {
    console.log("¡Hace mucho calor!");
} else if (temperatura >= 20) {
    console.log("La temperatura es agradable.");
} else {
    console.log("Hace frío.");
}

b. `for` Loop (Bucle `for`)

Repite un bloque de código un número específico de veces.

// i (índice) empieza en 0, se repite mientras i sea menor que 5, e i aumenta en 1 cada vez
for (let i = 0; i < 5; i++) {
    console.log("Número: " + i);
}
/* Salida:
Número: 0
Número: 1
Número: 2
Número: 3
Número: 4
*/

c. `while` Loop (Bucle `while`)

Repite un bloque de código mientras una condición sea verdadera.

let contador = 0;
while (contador < 3) {
    console.log("Contador en: " + contador);
    contador++;
}
/* Salida:
Contador en: 0
Contador en: 1
Contador en: 2
*/

—

2. Tipos de Datos Compuestos: Arreglos y Objetos

Más allá de números y texto, JavaScript nos permite organizar datos complejos.

a. Arrays (Arreglos o Listas)

Una colección **ordenada** de elementos. Cada elemento tiene un **índice** numérico que empieza en 0.

const frutas = ["Manzana", "Banana", "Cereza"];

console.log(frutas[0]); // Salida: "Manzana"
console.log(frutas.length); // Salida: 3

frutas.push("Naranja"); // Añade "Naranja" al final
console.log(frutas); // Salida: ["Manzana", "Banana", "Cereza", "Naranja"]

// Iterar sobre un arreglo
for (let i = 0; i < frutas.length; i++) {
    console.log("Me gusta " + frutas[i]);
}

b. Objects (Objetos)

Una colección de pares **clave-valor** (propiedades). No tienen un orden específico.

const persona = {
    nombre: "Ana",
    edad: 28,
    ciudad: "México",
    intereses: ["leer", "viajar"]
};

console.log(persona.nombre); // Salida: "Ana"
console.log(persona["edad"]); // Salida: 28 (otra forma de acceder)

persona.edad = 29; // Modificar una propiedad
persona.profesion = "Diseñadora"; // Añadir una nueva propiedad

console.log(persona);
/* Salida:
{
  nombre: 'Ana',
  edad: 29,
  ciudad: 'México',
  intereses: [ 'leer', 'viajar' ],
  profesion: 'Diseñadora'
}
*/

—

3. Manipulación Avanzada del DOM

Ya sabes cómo seleccionar elementos. Ahora, veamos cómo modificarlos y crear nuevos dinámicamente.

• document.createElement('tagName'): Crea un nuevo elemento HTML.
• element.appendChild(childElement): Añade un elemento hijo al final de otro.
• element.removeChild(childElement): Elimina un elemento hijo.
• element.textContent = 'nuevo texto': Cambia el texto dentro de un elemento.
• element.innerHTML = '<b>HTML</b> nuevo': Cambia el contenido HTML dentro de un elemento (¡usar con precaución por seguridad!).
• element.style.propertyName = 'value': Cambia estilos CSS directamente.
• element.classList.add('className'), .remove(), .toggle(): Gestiona clases CSS para aplicar o quitar estilos predefinidos.

const contenedor = document.getElementById("miContenedor");

// Crear un nuevo párrafo
const nuevoParrafo = document.createElement("p");
nuevoParrafo.textContent = "Este es un párrafo añadido dinámicamente.";
nuevoParrafo.style.color = "lightgreen";

// Añadirlo al contenedor
contenedor.appendChild(nuevoParrafo);

// Quitar una clase de un elemento
const miTitulo = document.querySelector("h1");
miTitulo.classList.remove("algun-estilo");

— —

¡Esto es solo el comienzo del poder de JavaScript! Con estas herramientas, puedes empezar a construir funcionalidades realmente interesantes en tus páginas web.

¿Qué te gustaría explorar a continuación?

• **Más sobre JavaScript:** Eventos avanzados, manejo de errores, asincronía (promesas, async/await), módulos.
• **El Modelo de Caja (Box Model) a fondo y posicionamiento clásico:** Para dominar completamente el layout y la depuración de CSS.
• **Control de Versiones con Git y GitHub:** Esencial para organizar tu código, colaborar y mostrar tus proyectos.
• **Formularios en HTML:** Crear formularios más complejos y aprender a procesar su entrada.

¡El camino del desarrollo web es vasto y emocionante!