Variables y Tipos de Datos

En JavaScript, las variables se utilizan para almacenar datos que pueden cambiar durante la ejecución del programa. Puedes declarar variables usando var (forma antigua), let (moderna y recomendada para variables que cambian) y const (para valores constantes). Los principales tipos de datos son:

  • Number: Números, tanto enteros como decimales (let edad = 25;).
  • String: Cadenas de texto (let nombre = "Ana";).
  • Boolean: Valores verdadero o falso (let activo = true;).
  • Null: Valor nulo o vacío (let vacio = null;).
  • Undefined: Variable declarada pero sin valor (let x;).
  • Object: Colección de datos (let persona = {nombre: "Ana", edad: 30};).
  • Array: Lista ordenada de elementos (let numeros = [1,2,3];).
// Ejemplo de declaración
                    let nombre = "Juan";
                    const PI = 3.1416;
                    var edad = 30;
                    let activo = true;
                    let vacio = null;
                    let x; // undefined

Fuente: MDN Web Docs

Operadores

Los operadores permiten realizar operaciones sobre variables y valores. Los principales tipos son:

  • Aritméticos: + (suma), - (resta), * (multiplicación), / (división), % (módulo).
  • Asignación: =, +=, -=, etc.
  • Comparación: == (igualdad), === (igualdad estricta), !=, !==, >, <, >=, <=.
  • Lógicos: && (AND), || (OR), ! (NOT).
// Ejemplos
                    let suma = 5 + 3;        // 8
                    let esIgual = (10 === 10); // true
                    let resultado = (5 > 3) && (2 < 4); // true
                    let texto = "Hola" + " Mundo"; // "Hola Mundo"

Fuente: w3schools

Estructuras de Control

Permiten controlar el flujo de ejecución del código, tomando decisiones o repitiendo acciones:

  • Condicionales: if, else, else if, switch.
  • Bucles: for, while, do...while.
// Condicional
                    if (edad >= 18) {
                        console.log("Eres mayor de edad");
                    } else {
                        console.log("Eres menor de edad");
                    }

                    // Bucle for
                    for (let i = 0; i < 5; i++) {
                        console.log(i);
                    }

Fuente: MDN Web Docs

Funciones

Las funciones son bloques de código que realizan una tarea específica y pueden ser reutilizadas. Se pueden declarar de varias formas:

  • Declaración tradicional: function nombre() { ... }
  • Expresión de función: const suma = function(a, b) { ... }
  • Función flecha (arrow): const suma = (a, b) => a + b;
// Declaración tradicional
                    function saludar(nombre) {
                        return "Hola, " + nombre;
                    }

                    // Función flecha
                    const sumar = (a, b) => a + b;

                    console.log(saludar("Ana")); // "Hola, Ana"
                    console.log(sumar(2, 3));    // 5

Fuente: MDN Web Docs

Objetos

Los objetos permiten agrupar datos y funcionalidades. Cada propiedad tiene un nombre (clave) y un valor. Los métodos son funciones dentro de objetos. 

const persona = {
                        nombre: "Ana",
                        edad: 30,
                        saludar: function() {
                            console.log("Hola, soy " + this.nombre);
                        }
                    };

                    persona.saludar(); // "Hola, soy Ana"

Fuente: MDN Web Docs

Arrays

Los arrays son listas ordenadas de elementos. Puedes acceder a cada elemento por su índice y usar métodos como push, pop, map, filter, etc. 

let numeros = [1, 2, 3, 4, 5];
                numeros.push(6); // [1,2,3,4,5,6]
                let primero = numeros[0]; // 1

                // Recorrer un array
                numeros.forEach(function(num) {
                    console.log(num);
                });

                // Mapear un array
                let dobles = numeros.map(n => n * 2); // [2,4,6,8,10,12]

Fuente: MDN Web Docs

Eventos

Los eventos permiten ejecutar código cuando el usuario interactúa con la página (clics, teclas, etc.). Se usan con addEventListener. 

// HTML: <button id="miBoton">Haz clic</button>

                document.getElementById("miBoton").addEventListener("click", function() {
                    alert("¡Botón clickeado!");
                });

Fuente: MDN Web Docs

DOM

El DOM (Document Object Model) es la representación estructurada del HTML de una página. JavaScript puede modificar el DOM para cambiar el contenido, estructura o estilos. 

// Cambiar el texto de un elemento
                document.getElementById("titulo").textContent = "Nuevo título";

                // Cambiar el color de un elemento
                document.querySelector(".clase").style.color = "red";

Fuente: MDN Web Docs