Backend y Frameworks

Tabla de Contenidos

Tabla de Contenidos

Tabla de Contenidos

API web

Las API web (interfaces de programación de aplicaciones) proporcionan funcionalidades integradas que permiten que JavaScript interactúe con el navegador y servicios externos. Esta sección abarca las principales API del navegador, incluyendo LocalStorage, SessionStorage, Fetch API y Geolocation API.

Almacenamiento Local y Almacenamiento de Sesión

La API de Almacenamiento Web permite almacenar pares clave-valor en el navegador.

Almacenamiento Local (Almacenamiento Persistente)

Los datos almacenados usando localStorage persisten incluso después de que se cierra el navegador.

Estableciendo y Obteniendo Datos

// Store data
localStorage.setItem("username", "Alice");
  
// Retrieve data
let user = localStorage.getItem("username");
console.log(user); // Outputs: Alice

Eliminando Datos

localStorage.removeItem("username"); // Removes a specific item
localStorage.clear(); // Clears all stored data

Almacenamiento de Sesión (Almacenamiento Temporal)

El almacenamiento de sesión funciona como el almacenamiento local, pero borra los datos cuando se cierra la sesión (pestaña).

sessionStorage.setItem("sessionUser", "Bob");
console.log(sessionStorage.getItem("sessionUser"));
sessionStorage.removeItem("sessionUser");

API Fetch (Realizando Solicitudes HTTP)

La API Fetch permite que JavaScript realice solicitudes de red de manera asíncrona, comúnmente utilizada para recuperar datos de APIs.

Obteniendo Datos de una API

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(response => response.json()) // Convert response to JSON
  .then(data => console.log(data)) // Handle retrieved data
.catch(error => console.error("Error:", error)); // Handle errors

Usando async/await para Solicitudes Fetch

async function getUserData() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Error fetching data:", error);
  }
}
  
getUserData();

Enviando Datos Usando Solicitud POST

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "New Post", body: "Post content", userId: 1 })
})
  .then(response => response.json())
  .then(data => console.log("Post created:", data))
  .catch(error => console.log("Error:", error));

API de Geolocalización (Obteniendo la Ubicación del Usuario)

La API de Geolocalización recupera la ubicación actual del usuario.

Verificando si la Geolocalización es Compatible

if ("geolocation" in navigator) {
  console.log("Geolocation is supported!");
} else {
  console.log("Geolocation is not supported.");
}

Obteniendo la Ubicación Actual del Usuario

navigator.geolocation.getCurrentPosition(
  position => {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
  },
  error => console.log("Error getting location:", error.message)
);

Rastreo de la Ubicación del Usuario en Tiempo Real

navigator.geolocation.watchPosition(
  position => {
    console.log("Updated Location:", position.coords.latitude, position.coords.longitude);
  }
);

API del Portapapeles (Copiando y Pegando Datos)

La API del Portapapeles permite copiar y pegar texto programáticamente.

Copiando Texto al Portapapeles

navigator.clipboard.writeText("Copied text!").then(() => {
  console.log("Text copied to clipboard!");
});

Lectura de Texto desde el Portapapeles

navigator.clipboard.readText().then(text => {
  console.log("Clipboard content:", text);
});

API de Notificaciones (Mostrando Notificaciones en el Navegador)

La API de Notificaciones permite a las aplicaciones web enviar notificaciones a los usuarios.

Solicitando Permiso para Notificaciones

if (Notification.permission !== "granted") {
  Notification.requestPermission().then(permission => {
    console.log("Notification permission:", permission);
  });
}

Enviando una Notificación

new Notification("Hello!", {
  body: "This is a notification from JavaScript.",
  icon: "icon.png"
});

API de Intersection Observer (Detectando la Visibilidad de Elementos)

La API de Intersection Observer detecta cuándo un elemento entra o sale del área visible, útil para la carga diferida de imágenes o para disparar animaciones.

let observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log("Element is in view:", entry.target);
    }
  });
});
  
let targetElement = document.getElementById("observe-me");
observer.observe(targetElement);

Conclusión

Las APIs Web extienden las capacidades de JavaScript al permitir el almacenamiento de datos, realizar solicitudes HTTP, acceder a la ubicación del usuario, manejar interacciones con el portapapeles y mostrar notificaciones. La próxima sección explorará la compatibilidad con navegadores y técnicas de optimización de rendimiento para asegurar una ejecución fluida en diferentes dispositivos y entornos.

Formas y manejo de entradas

Formas y manejo de entradas

Formas y manejo de entradas

Compatibilidad y Rendimiento

Compatibilidad y Rendimiento

Compatibilidad y Rendimiento