Módulo 3 · Interacción web
JavaScript es el lenguaje que permite crear lógica, interacción y comportamiento dinámico. Con él, una página puede responder a clics, mostrar mensajes, validar formularios y modificar contenido en tiempo real.
JavaScript es un lenguaje de programación que permite ejecutar instrucciones, procesar datos y cambiar el comportamiento de una página.
let nombre = "Ana";
function saludar() {
console.log("Hola " + nombre);
}JavaScript permite declarar variables con var, let y const.
let edad = 18;
const nombre = "Luis";
var activo = true;let suma = 2 + 3;
let resta = 10 - 4;
let comparacion = 5 === 5;function saludar() {
console.log('Hola');
}const sumar = (a, b) => a + b;
const mensaje = function() { return 'Hola'; };Son funciones que reciben otras funciones como parámetros o devuelven funciones.
const numeros = [1, 2, 3];
const duplicados = numeros.map(n => n * 2);document.querySelector("h1").textContent = "Nuevo título";document.querySelector("button").addEventListener("click", () => {
alert("¡Hola!");
});El navegador analiza el HTML, construye el DOM y ejecuta los scripts. Cuando encuentra un archivo JavaScript, lo interpreta y luego puede modificar nodos del árbol.
JavaScript puede crear un elemento img y agregarlo al DOM.
const imagen = document.createElement('img');
imagen.src = 'foto-webp.webp';
imagen.alt = 'Paisaje en formato WebP';
imagen.width = 600;
document.querySelector('#galeria').appendChild(imagen);Esto es útil cuando la imagen depende de una selección del usuario o de datos recibidos por API.
También se puede crear un elemento video y añadir varias fuentes de video.
const video = document.createElement('video');
video.controls = true;
video.width = 640;
const sourceMp4 = document.createElement('source');
sourceMp4.src = 'video.mp4';
sourceMp4.type = 'video/mp4';
const sourceWebm = document.createElement('source');
sourceWebm.src = 'video.webm';
sourceWebm.type = 'video/webm';
video.appendChild(sourceMp4);
video.appendChild(sourceWebm);
document.querySelector('#videos').appendChild(video);El navegador selecciona la primera fuente compatible que pueda reproducir.
innerHTMLSi necesitas añadir varios elementos a la vez, puedes usar innerHTML con código HTML.
const contenedor = document.querySelector('#media');
contenedor.innerHTML = `
<img src="avatar.png" alt="Avatar">
<video controls width="320">
<source src="clip.mp4" type="video/mp4">
</video>
`;Usa esta técnica con cuidado si el contenido viene de usuarios para evitar riesgos de seguridad.
Un evento ocurre cuando el usuario interactúa. JavaScript escucha ese evento y ejecuta una función.
document.addEventListener('click', () => {
console.log('Se hizo clic');
});HTML crea la estructura, CSS define la apariencia y JavaScript agrega el comportamiento. El navegador renderiza todo como una interfaz visual.
Los objetos agrupan datos relacionados. Los arreglos almacenan listas. JSON es un formato de intercambio de datos muy usado en APIs.
const producto = {
nombre: 'Laptop',
precio: 1200,
disponible: true
};
const colores = ['rojo', 'azul', 'verde'];"Hola".toLowerCase()."hola".toUpperCase()." hola ".trim()."JavaScript".includes("Script")."programar".slice(0, 4).frutas.push("mango").frutas.pop().frutas.shift().frutas.unshift("pera").numeros.map(n => n * 2).numeros.filter(n => n > 2).numeros.find(n => n > 2).frutas.length.Object.keys(producto).Object.values(producto).boton.addEventListener('click', hacerAlgo).elemento.classList.add('activo').elemento.classList.remove('activo').Los operadores lógicos permiten combinar condiciones y tomar decisiones.
edad >= 18 && tieneDni.esEstudiante || esDocente.!estaActivo.if (edad >= 18 && tieneDni) {
console.log('Puede entrar');
}La consola sirve para depurar y mostrar información mientras el programa se ejecuta.
console.log('Mensaje normal');
console.warn('Advertencia');
console.error('Error');Para mostrar texto dentro de una página, se puede modificar un elemento del DOM.
document.getElementById('mensaje').textContent = 'Hola desde JavaScript';También se puede usar innerHTML, aunque debe usarse con cuidado si el contenido viene de usuarios.
document.getElementById('mensaje').innerHTML = 'Texto en negrita';JavaScript puede agregar o quitar clases para cambiar la apariencia de un elemento.
document.querySelector('button').classList.add('activo');
document.querySelector('button').classList.remove('activo');
document.querySelector('button').classList.toggle('activo');Esto es muy útil para mostrar estados como activo, oculto o destacado.
Un id es un nombre único que se asigna a un solo elemento HTML.
<h2 id="titulo-principal">Hola</h2>Se usa para identificar un elemento de forma específica con JavaScript o CSS.
document.getElementById('titulo-principal');
#titulo-principal { color: blue; }${}.const nombre = 'Ana';
console.log(`Hola, ${nombre}`);Una URL es la dirección que indica dónde está un recurso en la web. Por ejemplo:
https://example.com/products?id=1https://example.com/products?id=1La URL sirve para localizar y pedir información a un servidor.
Los protocolos definen cómo viajan los datos entre navegador y servidor.
Una petición HTTP viaja desde el navegador hacia un servidor con una línea de solicitud, cabeceras y, a veces, un cuerpo.
GET /productos HTTP/1.1
Host: ejemplo.comEl servidor devuelve una respuesta con un código de estado, cabeceras y un cuerpo con datos.
fetch('https://api.ejemplo.com/usuarios', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ nombre: 'Ana' })
});Es la forma antigua de declarar variables. Tiene un alcance más amplio y puede causar problemas en scripts más grandes.
var edad = 20;Se usa cuando la variable puede cambiar de valor. Tiene alcance de bloque.
let contador = 0;
contador = 1;Se usa para valores que no deben cambiar. También tiene alcance de bloque.
const nombre = 'María';boton.addEventListener('click', () => {
console.log('Se hizo clic');
});const item = document.createElement('li');
item.textContent = 'Nuevo item';
document.querySelector('ul').appendChild(item);document.querySelector('#mensaje').remove();Los template strings permiten crear cadenas de texto de forma más clara y flexible usando comillas invertidas ` `.
const nombre = 'Ana';
const saludo = `Hola, ${nombre}`;
console.log(saludo);Se usan para:
const producto = 'Laptop';
const mensaje = `El producto seleccionado es ${producto}`;JavaScript usa operadores matemáticos básicos y el objeto global Math para operaciones más avanzadas.
const suma = 2 + 3;
const resta = 10 - 4;
const multiplicacion = 5 * 6;
const division = 12 / 3;
const modulo = 10 % 3; // resto de la división
const exponente = 2 ** 3; // 8JavaScript respeta el orden matemático: paréntesis, exponentes, multiplicación/división, suma/resta.
const resultado = 2 + 3 * 4; // 14
const correcto = (2 + 3) * 4; // 20let contador = 1;
contador++; // 2
contador--; // 1
let doble = contador * 2;Math incluye funciones y constantes útiles para cálculos.
const pi = Math.PI;
const valorAbsoluto = Math.abs(-5);
const redondeo = Math.round(3.2);
const mayor = Math.max(1, 5, 3);
const aleatorio = Math.random();Se usa Math para calcular distancias, generar valores aleatorios, animaciones, validaciones numéricas y gráficos.
También sirve para obtener valores exactos y trabajar con porcentajes y valores de interfaz.
fetch permite pedir datos a un servidor desde JavaScript. Esto es fundamental para trabajar con APIs, cargar información dinámica y actualizar una página sin recargarla por completo.
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => res.json())
.then(data => console.log(data));{
"userId": 1,
"id": 1,
"title": "Ejemplo de título",
"body": "Este es el contenido que llega desde el servidor"
}El JSON es un formato de texto muy usado para enviar información entre un navegador y un servidor. JavaScript puede leerlo y transformarlo en objetos reales.
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(respuesta => {
if (!respuesta.ok) {
throw new Error('Hubo un problema con la petición');
}
return respuesta.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
En este ejemplo, respuesta.ok indica si la petición fue exitosa. Si no lo fue, se muestra un error.
Luego se convierte la respuesta en JSON con respuesta.json().
Las peticiones y respuestas permiten que una web se conecte con servicios reales, recupere datos, envíe formularios, consulte productos, usuarios, noticias o información en tiempo real. Sin este proceso, una página sería estática y no podría interactuar con el resto del mundo.
El navegador ofrece varias formas de guardar datos en el cliente. Las más importantes son localStorage, sessionStorage y cookies.
localStorage es un espacio de almacenamiento que permanece incluso después de cerrar el navegador. Los datos se guardan en el navegador y solo se pueden leer desde el mismo origen (protocolo, dominio y puerto).
Se usa para guardar configuraciones, preferencias de usuario y datos que deben mantenerse entre sesiones.
// Guardar datos en localStorage
localStorage.setItem('tema', 'oscuro');
localStorage.setItem('usuario', JSON.stringify({ nombre: 'Ana', email: 'ana@example.com' }));
// Leer datos
const tema = localStorage.getItem('tema');
const usuario = JSON.parse(localStorage.getItem('usuario'));
// Eliminar datos
localStorage.removeItem('tema');
// Limpiar todo el almacenamiento local
localStorage.clear();sessionStorage guarda datos solo mientras la pestaña o ventana está abierta. Cuando se cierra, esos datos se eliminan automáticamente. Es útil para datos temporales como borradores de formularios, pasos de un flujo o información que no debe persistir al cerrar la pestaña.
// Guardar datos en sessionStorage
sessionStorage.setItem('pasoActual', '2');
// Leer datos
const paso = sessionStorage.getItem('pasoActual');
// Eliminar datos
sessionStorage.removeItem('pasoActual');Las cookies son pequeños archivos de texto que el navegador guarda y envía automáticamente al servidor en cada petición al mismo dominio. Por eso se usan mucho para mantener sesiones de usuario, recordar preferencias en el servidor y manejar autenticación.
Las cookies pueden tener una fecha de caducidad, un alcance de ruta o dominio, y opciones de seguridad como Secure y SameSite.
// Crear o actualizar una cookie
const valor = 'oscuro';
document.cookie = `tema=${valor}; path=/; max-age=${60 * 60 * 24 * 7}; secure; samesite=strict`;
// Leer una cookie
function obtenerCookie(nombre) {
return document.cookie
.split('; ')
.find(fila => fila.startsWith(nombre + '='))
?.split('=')[1];
}
const temaCookie = obtenerCookie('tema');
// Eliminar una cookie
document.cookie = 'tema=; path=/; max-age=0';HttpOnly.HttpOnly y Secure en el servidor.