Javascript para el dinamismo de la web

1. ¿Qué es JavaScript?

Es un lenguaje de programación interpretado, orientado a objetos y basado en prototipos. Su función principal en la web es crear interactividad: desde validar formularios hasta actualizar contenido sin recargar la página (AJAX/Fetch) y controlar animaciones complejas. 

---

2. Fundamentos Esenciales

A. Variables (Contenedores de datos)

En el JS moderno, ya no se usa var. Usamos: 

• let: Para variables que pueden cambiar de valor.
• const: Para valores constantes que no cambiarán. 

javascript

let puntuacion = 10;
const nombreWeb = "Mi Web Pro";

Usa el código con precaución.

B. Tipos de Datos y Objetos

• Primitivos: String (texto), Number (número), Boolean (true/false), Null, Undefined.
• Objetos: Colecciones de propiedades (llave: valor). 

javascript

const usuario = {
    nombre: "Juan",
    edad: 30,
    saludar: function() { console.log("Hola!"); }
};

Usa el código con precaución.

• Arrays (Arreglos): Listas ordenadas de datos. 

javascript

const lenguajes = ["HTML", "CSS", "JS"];
console.log(lenguajes[0]); // HTML

Usa el código con precaución.

C. Funciones (Bloques de código reutilizables)

La forma moderna más usada es la Arrow Function (Función de flecha): 

javascript

const sumar = (a, b) => a + b;
console.log(sumar(5, 3)); // 8

Usa el código con precaución.

D. Ciclos y Control de Flujo

• If/Else: Toma de decisiones.
• Ciclos (Loops): Para repetir acciones. El más usado para arrays es .forEach o for...of.

javascript

lenguajes.forEach(lang => console.log("Aprendiendo " + lang));

Usa el código con precaución.

E. Clases (Programación Orientada a Objetos)

Permiten crear «plantillas» para objetos. 

javascript

class Producto {
    constructor(nombre, precio) {
        this.nombre = nombre;
        this.precio = precio;
    }
    mostrarInfo() {
        return `${this.nombre} cuesta ${this.precio}€`;
    }
}

Usa el código con precaución.

---

3. El DOM (Document Object Model)

El DOM es la interfaz que permite a JavaScript «leer» y «modificar» el HTML y CSS. El navegador transforma el HTML en un árbol de nodos que JS puede manipular. 

Acciones comunes con el DOM:

1. Seleccionar elementos:
   • document.getElementById('id')
   • document.querySelector('.clase') (El más versátil, usa selectores CSS).
2. Modificar contenido:
   • .innerHTML o .textContent para cambiar el texto.
   • .style.property para cambiar CSS.
3. Eventos: Escuchar lo que hace el usuario (clics, teclas, scroll). 

javascript

const boton = document.querySelector('#miBoton');

boton.addEventListener('click', () => {
    alert("¡Has hecho clic!");
    document.body.style.backgroundColor = "yellow";
});

Usa el código con precaución.

---

4. Conceptos Avanzados de 2026

Para que tu artículo sea de alto nivel, menciona estos puntos:

• Asincronía (Promises y Async/Await): Fundamental para pedir datos a servidores externos (APIs) sin bloquear la web.
• Módulos (ES Modules): Importar y exportar funciones entre diferentes archivos JS (import/export).
• LocalStorage: Guardar datos en el navegador del usuario para que no se borren al cerrar la pestaña. 

---

Ejemplo de Aplicación Real (Dinamismo)

Este código cambia el modo oscuro/claro de una página:

javascript

const btnToggle = document.querySelector('#dark-mode-btn');

btnToggle.addEventListener('click', () => {
    // Alterna una clase de CSS en el body
    document.body.classList.toggle('dark-theme');
    
    // Cambia el texto del botón dinámicamente
    if (document.body.classList.contains('dark-theme')) {
        btnToggle.textContent = "Cambiar a Modo Claro";
    } else {
        btnToggle.textContent = "Cambiar a Modo Oscuro";
    }
});

Usa el código con precaución.

Recursos para ampliar JavaScript

Puedes recomendar a tus lectores la Guía de JavaScript de MDN o plataformas de práctica como JavaScript.info.