¿Necesitas copiar texto al portapapeles con soporte amplio. Qué estrategia es más robusta?

APIs modernas con fallback controlado reducen fallos en compatibilidad.

Integrar APIs del navegador (Clipboard, URL, etc.)

Domina APIs modernas del navegador (Clipboard, URL, History, IntersectionObserver) con foco en compatibilidad y UX real.

¿Cuánto sabes de JavaScript?

📘 Teoría

Elegir API correcta según problema

No todo se resuelve con la misma API del navegador.

Clipboard API para copiar/pegar con permiso explícito.
URL y URLSearchParams para query params robustos.
IntersectionObserver para visibilidad sin listeners costosos.
History API para navegaci?n sin recarga completa.

Compatibilidad y degradación progresiva

Diseña para que funcione incluso sin API moderna.

Errores comunes con APIs del navegador

Permisos y contexto inseguro suelen ser el bloqueo real.

Probar Clipboard fuera de HTTPS.
No gestionar denegación de permiso.
Asumir soporte completo en todos los navegadores.
No contemplar estado inicial de APIs asíncronas.

Conexión con render y eventos

Estas APIs viven dentro del mismo ciclo UI/estado.

1 Elegir API correcta según problema 2 Compatibilidad y degradación progresiva 3 Errores comunes con APIs del navegador 4 Conexión con render y eventos

🧪 Aprende probando

Ejemplo Ejemplo guiado: parsear query params de forma segura Extrae filtros de URL sin parseo manual frágil.

⌄

Ejemplo Ejemplo guiado: redirección según idioma del navegador Usa `navigator.language` para detectar locale y redirigir a una ruta adecuada con fallback explícito.

⌄

🏁 Retos

Reto Reto: función copiar con fallback Implementa `copyText` con Clipboard API y plan B.

⌄

🧰 Recursos

Enlaces útiles

MDN: JavaScript MDN: Guía de JavaScript javascript.info MDN: Referencia de JavaScript MDN: Guide web.dev: Learn JavaScript

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

CodePen: asincronía con promesas

Abrir en CodePen

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 39

Usar Promise.all / allSettled / race / any

Lección 41

Introducción a tiempo real

›