2. Variables y Mutabilidad

En el pasado (antes de 2015), usábamos var. Era caótico. Olvídalo.
Hoy usamos dos sabores:

// const: CONSTANTE. No cambia.
const pi = 3.1416;
pi = 5; // Error! Protege tu código de ti mismo.

// let: VARIABLE. Puede cambiar.
let vidas = 3;
                    
            

                
2. Variables: Cajas con Etiquetas
                

                    
                
                

                    Una variable es un espacio en memoria para guardar datos.
                

                    
let: Para datos que cambian (ej. puntaje).
                    
const: Para datos fijos (ej. valor de Pi).
                    
var: La forma antigua (¡evítala!).
                
                
let edad = 25;
const nombre = "Cristian";
// nombre = "David"; // ¡Error! No puedes cambiar una constante.
                        

                    

                    
                    

                        
Evaluación 1: Buenas Prácticas
                        

                            
¿Por qué casi no usamos 'var' hoy en día?
                            

                                
Porque es muy lento.
                                
Porque tiene problemas de alcance (scope)
                                    que causan bugs difíciles de rastrear.
                                
Porque es una palabra muy corta.
                            
                        
                    

                    
                    

                        
3. Tipos y "Tipado Débil"
                        

                            JavaScript es "débilmente tipado". Significa que no es estricto con los tipos de datos.
                        
let caja = 5;       // Número
caja = "Cinco";     // Ahora es Texto. ¡JS te deja hacerlo!
                        Esto es cómodo al principio, pero peligroso en proyectos grandes.
                        

                        Tip: Ten cuidado con la coerción automática. 1 + "1" es
                        "11" (Texto), no 2.
                        

                    

                    
                    

                        
4. Lógica Booleana (If/Else)
                        

                            El cerebro del programa. Tomar decisiones.
                        
const edad = 17;

if (edad >= 18) {
    console.log("Cerveza 🍺");
} else {
    console.log("Jugo 🧃");
}
                        Usa siempre la triple igualdad ===. La doble igualdad == es
                        traicionera (0 == false es true, ¡pero no son lo mismo!).
                        

                    

                    
                    

                        
5. Funciones (Modernas)
                        

                            Las funciones son recetas reutilizables.
                            

                            La sintaxis moderna (Arrow Functions) es más limpia:
                        
// Función Flecha
const saludar = (nombre) => {
    return `Hola, ${nombre}`; // Template String (con backticks `)
};

console.log(saludar("Cristian"));
                        Las Template Strings `${}` nos salvaron de concatenar con `+` eternamente.
                        

                    

                    
                    

                        
Evaluación 2: Operadores
                        

                            
¿Qué imprime `console.log(1 === "1")`?
                            

                                
true
                                
false (Son de tipo diferente: Número vs
                                    String)
                            
                        
                    

                    
                    

                        
6. Arrays y Objetos
                        

                            Cómo organizamos datos complejos.
                        
// Objeto (Entidad con propiedades)
const usuario = {
    nombre: "Ana",
    activo: true,
    roles: ["Admin", "Editor"] // Array dentro de objeto
};

console.log(usuario.roles[0]); // "Admin"
                        JSON (JavaScript Object Notation), el formato universal de datos de internet, se basa en esta
                        sintaxis.
                        

                    

                    
                    

                        
7. Bucles (Loops)
                        

                            
                        
                        

                            Para repetir tareas. Aunque el for clásico existe, los profesionales usan
                            métodos modernos de arrays:
                        
const frutas = ["Manzana", "Pera"];

// forEach: Para cada elemento...
frutas.forEach(fruta => {
    console.log("Me gusta la " + fruta);
});
                        Es más legible y menos propenso a errores de "off-by-one".
                        

                    

                    
                    

                        
8. El DOM (Document Object Model)
                        

                            Aquí es donde JS toca el HTML. El DOM es el árbol de elementos de tu página.
                        
// Seleccionar
const titulo = document.querySelector('h1');

// Modificar
titulo.textContent = "¡Hackeado por JS!";
titulo.style.color = "red";
                        Todo lo que ves en una web interactiva (modales, menús, chats) es manipulación del DOM.
                        

                    

                    
                    

                        
9. Eventos (Escuchar)
                        

                            Tu web no solo habla, también escucha.
                        
const boton = document.querySelector('#miBoton');

boton.addEventListener('click', () => {
    alert("¡Me tocaste!");
});
                        Puedes escuchar clicks, movimiento del mouse, teclas, scroll, batería baja... casi todo.
                        

                    

                    
                    

                        
Evaluación 3: DOM
                        

                            
¿Cuál es el método moderno preferido para seleccionar elementos?
                            
                            

                                
getElementById
                                
querySelector (Más flexible, acepta
                                    selectores CSS)
                            
                        
                    

                    
                    

                        
10. Asincronía y Fetch
                        

                            JS es "single-threaded" (una sola mano), pero puede hacer malabares.
                            

                            fetch permite pedir datos externos sin congelar la página.
                        
// Pide datos a una API
fetch('https://api.clima.com')
    .then(respuesta => respuesta.json()) // Espera...
    .then(datos => console.log(datos));  // ¡Llegó!
                        Hoy en día usamos Async/Await, que se ve aún más limpio.
                        

                    

                    
                    

                        
11. El Ecosistema
                        

                            JS vainilla es genial, pero el ecosistema es inmenso.
                            

                            Librerías: React, Vue, Angular (ayudan a construir UIs complejas).
                            

                            Herramientas: TypeScript (JS con tipos estrictos), Webpack, Babel.
                            

                            Aprender las bases firmes de JS hará que aprender cualquier Framework sea fácil.
                        
                    

                    
                    

                        
¡Eres un Programador!
                        

                            Ya conoces la tríada sagrada: HTML (Estructura), CSS (Estilo) y JS (Lógica).
                            


                            Ya puedes construir casi cualquier cosa en la web. Pero, ¿qué pasa si queremos guardar
                            usuarios, contraseñas y datos reales? Necesitamos salir del navegador e ir al servidor.
                            Necesitamos Node.js.