Teórico Javascript

Introducción

Realizaremos una breve guía teórica básica del lenguaje de progración javascript para darle dinamismo a nuestros documentos web.

JavaScript (JS) es el lenguaje de programación que le da vida y dinamismo a las páginas web. Mientras que HTML crea la estructura y CSS el diseño visual, JavaScript permite que la página reaccione a las acciones del usuario de forma inteligente

¿Para qué sirve JavaScript?

• ◆ Crear interactividad: Responder a clics de botones, abrir menús desplegables o validar formularios antes de enviarlos.
• ◆ Modificar la página en tiempo real: Cambiar textos, colores o imágenes sin necesidad de recargar el navegador.
• ◆ Controlar contenido multimedia: Reproducir videos, pausar audios o arrancar animaciones complejas.
• ◆ Comunicarse con servidores: Cargar datos nuevos en segundo plano (como mensajes nuevos en un chat o productos en una tienda).

🏠 El DOM

A continuación, tienes las sentencias y métodos más importantes para dominar el DOM, divididos por su función.

🔍 1.Sentencias para Seleccionar Elementos (Buscar)

Antes de cambiar algo, debes decirle a JavaScript qué elemento quieres modificar.

document.querySelector()

Es la herramienta definitiva. Busca y devuelve el primer elemento que coincida con un selector de CSS (clase, ID o etiqueta).

const boton = document.querySelector('.mi-boton'); // Busca por clase
const titulo = document.querySelector('#titulo-principal'); // Busca por ID

document.querySelectorAll()

Busca y devuelve una lista completa con todos los elementos que coincidan con el selector CSS.

const todasLasTarjetas = document.querySelectorAll('.tarjeta');

✏️ 2.Sentencias para Modificar Contenido y Atributos (Cambiar)

Una vez que seleccionaste el elemento, puedes cambiar lo que tiene adentro o sus propiedades.

element.textContent

Lee o reemplaza el texto limpio que está dentro de una etiqueta.

titulo.textContent = "¡Hola Mundo desde JS!";

element.innerHTML

Lee o reemplaza el contenido interno incluyendo etiquetas HTML.

contenedor.innerHTML = "<p>Este es un párrafo <strong>nuevo</strong></p>";

element.setAttribute()

Modifica el valor de cualquier atributo HTML (como el src de una imagen o el href de un enlace).

imagen.setAttribute('src', 'foto-nueva.jpg');

🖌️ 3.Sentencias para Modificar Estilos y Clases (Diseño)

Permite alterar el aspecto visual manipulando el CSS directamente o agregando clases predefinidas.

element.classList.add() / .remove()

Añade o quita una clase de CSS al elemento de forma limpia.

tarjeta.classList.add('activa');    // Aplica los estilos de la clase .activa
tarjeta.classList.remove('oculta'); // Quita los estilos de la clase .oculta

element.classList.toggle()

Funciona como un interruptor. Si la clase ya existe la quita, si no existe la pone. Excelente para menús desplegables.

menu.classList.toggle('desplegado');

element.style.propiedad

Cambia un estilo CSS directamente en la etiqueta (estilo en línea).

boton.style.backgroundColor = "red"; // Nota: En JS se usa camelCase (backgroundColor) en vez de guiones

🔊 4.Sentencias para Escuchar Eventos (Acciones)

Los eventos son las acciones que ocurren en la página (un clic, mover el mouse, presionar una tecla).

element.addEventListener()

Le asigna un “oyente” al elemento para que ejecute una función de código exacta cuando el usuario realice la acción indicada.

boton.addEventListener('click', function() {
    alert("¡Hiciste clic en el botón!");
});

🛠️ 5.Sentencias para Crear y Eliminar Elementos (Estructura)

Permite generar código HTML desde cero o desaparecer elementos existentes.

document.createElement()

Crea una nueva etiqueta HTML en la memoria del navegador.

const nuevoParrafo = document.createElement('p');
nuevoParrafo.textContent = "Texto generado con JS.";

element.appendChild()

Introduce el elemento creado como el último hijo dentro de otra etiqueta para que aparezca visiblemente en la pantalla.

contenedor.appendChild(nuevoParrafo);

element.remove()

Elimina por completo el elemento de la página web.

tarjeta.remove();