Use browser APIs with intent: Clipboard, URL, History and observers

Work with modern browser APIs such as Clipboard, URL, History and IntersectionObserver while keeping compatibility, permissions and real UX in mind.

How much do you know about JavaScript?

📘 Theory

Choose the API according to the problem

Not every browser problem should be solved with the same API.

Use Clipboard API for copy and paste flows with explicit permission requirements.
Use `URL` and `URLSearchParams` to read and build query parameters robustly.
Use `IntersectionObserver` when visibility matters and scroll listeners would be too noisy or expensive.
Use History API for navigation state that should update the URL without a full page reload.

Compatibility, permissions and progressive fallback

A good browser API integration still works when the newest path is unavailable.

Modern APIs often require secure contexts, explicit user gestures or specific browser support conditions.

That means your implementation should start with capability detection and then fall back gracefully instead of assuming success.

URL and History are state tools, not just utility objects

They become especially useful when the UI has filters, tabs or shareable views.

`URLSearchParams` is far safer than parsing query strings manually, especially once parameters start to grow.

The History API lets the UI evolve while the address bar still reflects the current state, which is valuable for bookmarks and back-button behavior.

1 Choose the API according to the problem 2 Compatibility, permissions and progressive fallback 3 URL and History are state tools, not just utility objects

🧪 Learn by doing

Example Guided example: parse query parameters safely Read filters from a URL without brittle string parsing.

⌄

🏁 Challenges

Challenge Challenge: implement `copyText()` with a fallback Write a robust copy helper that prefers the modern Clipboard API and falls back when needed.

⌄

🧰 Resources

Useful links

MDN: Clipboard API MDN: URL API MDN: Intersection Observer API MDN: History API MDN: URLSearchParams web.dev: Learn JavaScript

Test

Check your knowledge with a test about JavaScript.

Test for JavaScript

Course resources 62

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 39

Use `Promise.all`, `allSettled`, `race` and `any` with intent

Lesson 41

Real-time basics: WebSocket versus SSE

›