JavaScript — Web APIs

JavaScript + browser = superpowers

The language provides syntax; the browser provides extra capabilities — collectively called Web APIs:

DOM · Fetch · Timers · Storage · Geolocation
Clipboard · Notifications · History · Location

[1,2,3].map(n => n * 2);              // pure JavaScript
document.querySelector("button");      // browser API

DOM & Fetch (covered in depth separately)

document.querySelector("h1").textContent = "Updated";
const users = await (await fetch("/api/users")).json();

Web Storage

Two string-only key-value stores:

localStorage.setItem("theme", "dark");
localStorage.getItem("theme");        // "dark"
localStorage.removeItem("theme");
localStorage.clear();

sessionStorage.setItem("step", "2");  // dies with the tab session

localStorage persists across browser restarts; sessionStorage doesn't.

Objects need JSON

Storing an object directly stringifies it uselessly ("[object Object]"):

const user = { name: "Alice", age: 25 };

localStorage.setItem("user", JSON.stringify(user));

const saved = JSON.parse(localStorage.getItem("user"));
saved.name;   // "Alice"

Timers

setTimeout(() => console.log("Done"), 1000);
const id = setInterval(() => console.log("Tick"), 1000);
clearInterval(id);

Full treatment in the Timing lesson.

Geolocation (permission-gated)

navigator.geolocation.getCurrentPosition(
    position => console.log(position.coords.latitude),
    error => console.error(error)
);

Clipboard

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

Online status

if (navigator.onLine) console.log("Online");

window.addEventListener("offline", () => showBanner("You're offline"));
window.addEventListener("online",  () => hideBanner());

URL helpers

const url = new URL("https://example.com/search?q=js");
url.hostname;    // "example.com"
url.pathname;    // "/search"

new URLSearchParams({ page: "2", q: "js" }).toString();
// "page=2&q=js"   ← safe encoding built-in

Notifications (permission-gated)

const permission = await Notification.requestPermission();
if (permission === "granted") new Notification("Hello");

Async by nature

Many APIs return promises (fetch, clipboard) while others use callbacks (geolocation) — the API defines its style.

Feature detection, not assumptions

if ("geolocation" in navigator) { … }
if ("clipboard" in navigator)   { … }

Never assume presence; check, then fall back. Note also that several powerful APIs require a secure context (https://) and explicit user permission (location, camera, mic, notifications).

Gotcha: window, document, navigator are browser globals — none exist in Node.js. Web APIs live in the browser environment only.

Mini Practice

1. Save/read/remove a theme in localStorage; reload to prove persistence.
2. Store + retrieve an object via JSON round-trip.
3. Detect offline/online transitions with a banner.
4. Build a search URL with URL + URLSearchParams.
5. Feature-detect clipboard before offering a copy button.
6. List which Web APIs one of your pages depends on.

Next: window →