JavaScript Web APIs — A Tour

The browser ships an enormous standard library of “Web APIs”. You won’t memorize them all — and you don’t need to. This lesson is a map of the most commonly useful ones, so you know what’s there when you reach for a library.

Timers

const id = setTimeout(() => console.log("later"), 1000);
clearTimeout(id);   // cancel

const t = setInterval(() => console.log("tick"), 1000);
clearInterval(t);

For animation, prefer requestAnimationFrame — it syncs with the display’s refresh rate.

URL Parsing

Don’t parse URLs with regex. The URL class handles it.

const u = new URL("https://jsschools.com/js/strings?ref=hn#top");

console.log(u.host);       // "jsschools.com"
console.log(u.pathname);   // "/js/strings"
console.log(u.searchParams.get("ref"));  // "hn"

u.searchParams.set("page", "2");
console.log(u.toString());  // adds "&page=2"

URLSearchParams standalone is great for building query strings.

Clipboard

await navigator.clipboard.writeText("copied!");
const text = await navigator.clipboard.readText();

Requires user gesture (a click or keypress) on most browsers.

Geolocation

navigator.geolocation.getCurrentPosition(
  pos => console.log(pos.coords.latitude, pos.coords.longitude),
  err => console.log("denied:", err.message),
);

User has to grant permission.

Observers

IntersectionObserver is what powers lazy-loading and reveal-on-scroll without firing on every scroll event.

const io = new IntersectionObserver(entries => {
  for (const e of entries) {
    if (e.isIntersecting) {
      e.target.classList.add("visible");
      io.unobserve(e.target);
    }
  }
});
for (const el of document.querySelectorAll(".reveal")) io.observe(el);

History and the Back Button

history.pushState({ page: 2 }, "", "/p/2");
window.addEventListener("popstate", e => {
  console.log("user hit back/forward, state:", e.state);
});

This is the foundation of SPA routers.

Workers — Off the Main Thread

A Worker runs JavaScript on a background thread. No DOM access, but no UI blocking either.

// main.js
const w = new Worker("/heavy.js", { type: "module" });
w.postMessage({ task: "factor", n: 1234567 });
w.onmessage = e => console.log("result:", e.data);

// heavy.js (the worker)
self.onmessage = e => {
  const result = doExpensiveWork(e.data);
  self.postMessage(result);
};

Service Workers are a related but distinct API — they sit between your page and the network, enabling offline support and caching.

Crypto

crypto.getRandomValues gives secure randomness. crypto.subtle gives hashes and encryption.

const bytes = new Uint8Array(8);
crypto.getRandomValues(bytes);
const hex = [...bytes].map(b => b.toString(16).padStart(2, "0")).join("");
console.log(hex);   // 16 hex chars, cryptographically random

More You Might Meet

When you need any of these, MDN is the canonical reference. Most APIs follow the same shape: a constructor or a navigator.* object, an event-based or promise-based API, and permissions for sensitive things.

You’ve Reached the End

That wraps the JavaScript course. You started with console.log and finished with workers, observers, and crypto. The language is big; the platform is bigger. Build something with it.