Browser & Web APIs

In the browser, window is the global object. alert, setTimeout, fetch, and document all live on window.

window — the browser global

In the browser, window is the global object. alert, setTimeout, fetch, and document all live on window.

Real-life example: window is like the whole classroom — everything you can use without asking permission is already in the room.

window properties

console.log(window.innerWidth, window.innerHeight);
window.open("https://rishtaara.com", "_blank"); // open new tab
// document === window.document

navigator and location

navigator tells you about the browser and device. location holds the current URL — change it to navigate or read query params.

Real-life example: navigator is your phone's settings screen (language, online/offline). location is the address bar showing where you are on the map.

navigator and location

navigator.language;       // e.g. "en-IN"
navigator.onLine;         // true if connected

location.href;            // full URL
location.pathname;        // /learn/javascript
location.search;          // ?tab=lessons
history.back();           // go to previous page

localStorage and sessionStorage

Both store key-value strings in the browser. localStorage stays until cleared. sessionStorage clears when the tab closes.

Real-life example: localStorage is a school locker — your stuff stays all year. sessionStorage is a desk drawer — emptied when class ends (tab closes).

Save and load data

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

sessionStorage.setItem("quizStep", "3");

// Store objects — always stringify
localStorage.setItem("progress", JSON.stringify({ lesson: 20, done: true }));
const progress = JSON.parse(localStorage.getItem("progress") || "{}");

fetch — HTTP from the browser

fetch talks to servers over HTTP. You used it in async lessons — here it sits with other browser APIs that go beyond core JavaScript language.

Real-life example: fetch is the post office of your browser — send letters (requests), receive packages (JSON responses).

POST JSON to an API

async function saveScore(name, score) {
  const res = await fetch("/api/scores", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name, score }),
  });
  return res.json();
}

Geolocation (brief)

navigator.geolocation gets the user's location with permission. Used for maps, nearby shops, and weather.

Real-life example: Your phone asks "Allow location?" so Uber knows where to pick you up — same idea in the browser.

Get current position

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

Notification API (brief)

The Notification API shows desktop alerts if the user allows. Useful for reminders — "Your lesson is ready!"

Real-life example: A doorbell notification on your phone — you opted in, and now the app can ping you even when the tab is in the background.

Request permission and notify

async function notifyUser() {
  if (Notification.permission === "default") {
    await Notification.requestPermission();
  }
  if (Notification.permission === "granted") {
    new Notification("Rishtaara", { body: "Time for your JS lesson!" });
  }
}