Web APIs en JavaScript

¿Quieres que tus proyectos cobren vida? Las Web APIs en JavaScript son el puente esencial entre tu código y el navegador. Descubre cómo potenciar la interactividad, manejar la asincronía y dominar herramientas clave como Fetch o el DOM. ¡Lleva tu desarrollo web al siguiente nivel con esta guía definitiva!

1. ¿Qué son las Web APIs?

Para entenderlo de forma sencilla, debemos tener en cuenta estos dos cponceptos:

1. Que JavaScript puro es el «cerebro» (la lógica)
2. Las Web APIs son los «sentidos y herramientas» (interactuar con el mundo exterior).

1.1. JavaScript puro (ECMAScript)?

Es el lenguaje en sí mismo, definido por el estándar ECMAScript. Es lo que funciona igual tanto en un navegador como en un servidor (Node.js) o incluso en un robot.

Lo que incluye:
Variables, ciclos (for, while), condicionales (if), funciones, objetos, arreglos y operaciones matemáticas.

Su alcance:
Solo sabe manipular datos en memoria. No tiene idea de que existe una pantalla, un mouse o una base de datos.

1.2. ¿Qué son las Web APIs?

No son parte del lenguaje JavaScript, sino herramientas adicionales que el navegador (Chrome, Firefox, Safari) le «presta» a JavaScript para que pueda hacer cosas interesantes.

El navegador expone estas herramientas a través de objetos que JavaScript puede manipular.

• DOM API: Permite a JavaScript cambiar el color de un botón o leer un texto de la página.
• Fetch API: Permite pedir datos a un servidor.
• Storage API: Permite guardar datos en el disco local (localStorage).
• Timer API: Funciones como setTimeout o setInterval.

1.3. Las diferencias Clave

JavaScript no sabe hacer cosas externas por sí solo

No puede:

• Esperar tiempo ⛔
• Hacer peticiones HTTP ⛔
• Manipular el DOM ⛔

Para eso usa las Web APIs

1.4. ¿Cómo trabajan juntos? (El Event Loop)

Aquí es donde entra el concepto de Asincronía y los Event Loop.

Cuando usas una Web API como setTimeout(callback, 2000), JavaScript no se queda «congelado» esperando 2 segundos.

Lo que hace es:

1. JavaScript le dice al Navegador: «Oye, encárgate de este temporizador».
2. El Navegador (Web API) cuenta los 2 segundos por fuera.
3. Cuando termina, el Navegador pone la función callback en una fila (Task Queue).
4. JavaScript, cuando termina lo que estaba haciendo, toma esa función y la ejecuta.

CONCLUSIÓN: JavaScript pone la lógica y el orden, mientras que las Web APIs ponen el poder para interactuar con el usuario, la red y el hardware.

2. ¿Para qué sirven las Web APIs?

Las Web APIs tienen tres funciones principales que permiten que una página web deje de ser un documento estático y se convierta en una aplicación:

2.1. Interacción con el entorno (El «Mundo Exterior»)

JavaScript por sí solo no puede «ver» ni «oír». Las Web APIs le dan acceso al hardware y al software del dispositivo del usuario, para ello usa herramientas (que pertenecen al navegador como ya dijimos) como estas:

1. DOM API:
   • Es la más importante. Permite que JS «toque» el HTML. Sin ella, no podrías cambiar un texto, ocultar un menú o reaccionar a un clic.
2. Geolocalización:
   • Permite saber dónde está el usuario.
3. Cámara y Micrófono:
   • Permite aplicaciones de videollamada.

2.2. Comunicación y Datos (El «Mensajero»)

Permiten que la página hable con otros servidores o guarde información sin necesidad de que el usuario refresque la pantalla, usando herramientas como:

1. Fetch API:
   • Es la función principal para pedir datos a una base de datos externa (como ver el precio del dólar en tiempo real o cargar nuevos posts en redes sociales).
2. Web Storage (localStorage):
   • Permite que la web «recuerde» quién eres o qué tienes en el carrito aunque cierres la pestaña.

2.3. Gestión del Tiempo y Asincronía (El «Cronómetro»)

Como JavaScript es monohilo (solo puede hacer una cosa a la vez), si tuviera que esperar a que una imagen cargue, la página se congelaría, por ello realiza estas tareas en segundo plano permitiendo al usuario seguir interactuando con la página sin problema, para ello usa herramientas como:

1. Timers (setTimeout, setInterval):
   • Permiten programar tareas para el futuro.
2. Event Loop:
   • Las Web APIs gestionan las tareas pesadas de fondo y le avisan a JavaScript cuando terminan, permitiendo que la interfaz siga siendo fluida.

Resumen: ¿Para qué sirven?

La función principal es extender las capacidades de JavaScript.

Sin las Web APIs, JavaScript solo serviría para resolver problemas matemáticos en una consola negra. Gracias a las Web APIs, JavaScript puede:

1. Modificar lo que ves (DOM).
2. Recordar lo que haces (Storage).
3. Traer información de internet (Fetch).
4. Esperar sin trabarse (Timers/Asincronía).

3. Casos reales donde usamos estas Web APIs

Aquí tienes los casos más reales y comunes. Estas son las situaciones donde las Web APIs entran en acción para que la web no sea solo un documento de texto.

3.1. El «Carrito de Compras» (Web Storage API)

Imagina que estás en una tienda online, agregas un par de zapatillas al carrito, cierras la pestaña por error y, al volver a entrar, las zapatillas siguen ahí.

• API involucrada: localStorage o sessionStorage.
• CASO REAL: El navegador usa esta API para guardar pequeños trozos de texto (como el ID del producto) en el disco duro de tu computadora. JavaScript recupera esos datos apenas recargas la página.

3.2. El «Scroll Infinito» de Instagram o TikTok (Fetch API + DOM API)

Cuando navegas hacia abajo y aparecen nuevas publicaciones mágicamente sin que la página se recargue.

• APIs involucradas: Fetch API (para traer los datos) y DOM API (para crear los nuevos elementos visuales).
• CASO REAL: Mientras haces scroll, una Web API detecta tu posición. Cuando te acercas al final, JavaScript usa fetch para pedirle al servidor las siguientes 10 fotos. Una vez que llegan, la DOM API las «dibuja» en la pantalla.

3.3. Notificaciones de mensajes (Notifications API)

Estás trabajando en una pestaña y, de repente, suena un «ding» y aparece un cuadrito en la esquina de tu pantalla avisándote que tienes un nuevo mensaje en WhatsApp Web o Slack.

• API involucrada: Notifications API.
• CASO REAL: Esta API permite que el sitio web pida permiso al sistema operativo (Windows, macOS, Android) para mostrar un mensaje fuera del navegador.

3.4. El botón de «Usar mi ubicación actual» (Geolocation API)

Entras a Google Maps o a una app de clima y, con un solo clic, el mapa se centra exactamente donde estás parado.

• API involucrada: Geolocation API.
• CASO REAL: JavaScript le pide al navegador las coordenadas. El navegador, por seguridad, te pregunta: «¿Quieres compartir tu ubicación?». Si aceptas, la API le entrega a JavaScript la latitud y longitud exacta.

3.5. Juegos en el navegador (Canvas API + Web Audio API)

Si alguna vez jugaste al dinosaurio de Google cuando no tienes internet o algún juego más complejo en la web.

• APIs involucradas: Canvas (para dibujar los gráficos cuadro por cuadro) y Web Audio (para los efectos de sonido).
• CASO REAL:Estas APIs permiten que JavaScript maneje gráficos 2D/3D y sonido de alta calidad con un rendimiento muy alto, casi como si fuera una aplicación instalada en tu PC.

4. Ejemplo real de asincronía y uso de Web API

ESCENARIO REAL: El Buscador de una tienda (Amazon, Mercado Libre)

Imagina que estás en una web de ropa. Tienes un buscador y, mientras escribes, la página debe traerte sugerencias de productos.

Si esto fuera sincrónico:
Cada vez que escribes una letra, la página se «congelaría» por 2 segundos mientras busca en la base de datos. No podrías mover el mouse, no podrías hacer scroll, parecería que la PC se trabó.

Usando una Web API (fetch):
Tú escribes, JavaScript le da la orden al navegador de ir por los datos y sigue libre para que tú puedas seguir moviendo el mouse o viendo otras fotos.

El código que hace realidad este ejemplo:

Usaremos fetch, que es la Web API reina de la asincronía.

console.log("1. El usuario empieza a escribir en el buscador...");

// Usamos la Web API 'fetch' para pedir datos a un servidor externo
// Esta acción es ASÍNCRONA: JavaScript delega la tarea al navegador
fetch('https://api.tienda.com/productos?q=zapatillas')
    .then(respuesta => respuesta.json())
    .then(datos => {
        // 3. Esta parte solo se ejecuta cuando el servidor responde (la campana suena)
        console.log("3. ¡Datos recibidos! Mostrando sugerencias en pantalla.");
    });

// 2. JavaScript NO ESPERA al fetch. Sigue ejecutando lo que viene abajo inmediatamente.
console.log("2. El usuario sigue haciendo scroll y viendo el banner principal.");

// RESULTADO EN CONSOLA:
// 1. El usuario empieza a escribir...
// 2. El usuario sigue haciendo scroll... (La página NUNCA se bloqueó)
// 3. ¡Datos recibidos! (Aparece segundos después)Lenguaje del código: JavaScript (javascript)

¿Por qué esto es vital?

Si no usáramos la Web API para esto, la experiencia del usuario sería un desastre.

1. El Navegador:
   • Se encarga de la conexión de red, de esperar los paquetes de datos y de verificar la seguridad. Todo esto sucede en un «hilo» diferente al que usa JavaScript para dibujar la página.
2. JavaScript:
   • Se queda en el «hilo principal» (Main Thread) asegurándose de que las animaciones se vean fluidas y los clics funcionen.

NOTA!!! Nunca dejes que JavaScript haga tareas que «tarden» (como peticiones a internet o temporizadores largos). Delégale eso a las Web APIs para que tu página vuele.

5. Principales Web APIs en JavaScript

Principales Web APIs que todo desarrollador debe conocer para crear aplicaciones web dinámicas, eficientes y modernas:

5.1. DOM API (Document Object Model)

(manipulación de elementos, selección de nodos, eventos del DOM)

// Seleccionar y modificar un elemento del DOM
const titulo = document.querySelector("h1"); // selecciona el primer <h1>
titulo.textContent = "Nuevo título"; // cambia el contenido del textoLenguaje del código: JavaScript (javascript)

5.2. Timers API (setTimeout y setInterval)

(control del tiempo, ejecución diferida, tareas repetitivas)

// Ejecutar una función después de 2 segundos
setTimeout(() => {
  console.log("Ejecutado después de 2 segundos");
}, 2000);Lenguaje del código: JavaScript (javascript)

5.3. Fetch API

(peticiones HTTP, consumo de APIs, manejo de promesas)

// Obtener datos de una API y mostrarlos en consola
fetch("https://jsonplaceholder.typicode.com/posts")
  .then(res => res.json()) // convierte la respuesta en JSON
  .then(data => console.log(data)); // muestra los datosLenguaje del código: JavaScript (javascript)

5.4. Web Storage API (localStorage y sessionStorage)

(persistencia de datos, almacenamiento en el navegador)

// Guardar y recuperar datos en localStorage
localStorage.setItem("usuario", "Manuel"); // guarda un dato
const usuario = localStorage.getItem("usuario"); // lo recupera
console.log(usuario);Lenguaje del código: JavaScript (javascript)

5.5. Events API

(interacción con el usuario, manejo de eventos)

// Detectar un click en un botón
const boton = document.querySelector("button");

boton.addEventListener("click", () => {
  console.log("Botón clickeado");
});Lenguaje del código: JavaScript (javascript)

5.6. Console API

(depurar código, mostrar mensajes)

console.log("Mensaje informativo"); // muestra información
console.error("Error"); // muestra erroresLenguaje del código: JavaScript (javascript)

5.7. Geolocation API

(ubicación del usuario, coordenadas, permisos)

navigator.geolocation.getCurrentPosition((posicion) => {
  console.log(posicion.coords.latitude, posicion.coords.longitude);
});Lenguaje del código: JavaScript (javascript)

5.8. History API

(navegación del historial, rutas dinámicas)

// Cambiar la URL sin recargar la página
history.pushState({}, "", "/nueva-ruta");Lenguaje del código: JavaScript (javascript)

5.9. Canvas API

(gráficos, animaciones, renderizado 2D)

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

// Dibujar un rectángulo
ctx.fillRect(10, 10, 100, 50);Lenguaje del código: JavaScript (javascript)

5.10. WebSockets API

(comunicación en tiempo real con el servidor)

const socket = new WebSocket("wss://example.com");

socket.onmessage = (event) => {
  console.log("Mensaje recibido:", event.data);
};Lenguaje del código: JavaScript (javascript)