JavaScript — Window

window is the browser context

console.log(window);

It hosts the other globals:

window.document    // same as document
window.location
window.history
window.navigator

The window. prefix is optional for these.

Viewport dimensions

window.innerWidth;    // visible page width
window.innerHeight;   // visible page height

window.addEventListener("resize", () => {
    console.log(window.innerWidth);   // fires continuously while dragging!
});

These are the viewport, not the physical screen (that's screen).

Scrolling

window.scrollY;                 // current vertical position
window.scrollX;

window.scrollTo(0, 0);          // jump to top
window.scrollTo({ top: 0, behavior: "smooth" });
window.scrollBy({ top: 500, behavior: "smooth" });

window.addEventListener("scroll", () => {
    // keep handlers cheap — this fires constantly
    console.log(window.scrollY);
});

Classic uses: back-to-top buttons, "load more" when near bottom, sticky header shrink.

Timers live here too

const id = setTimeout(() => console.log("Done"), 5000);
clearTimeout(id);

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

(The window. prefix is conventionally omitted.)

Dialogs — blocking popups

alert("Hello");
const ok = confirm("Are you sure?");     // true/false
const name = prompt("Your name?", "Ada"); // string or null

All three freeze the page until dismissed — fine for demos, hostile in polished apps.

Windows, print & focus

window.open("https://example.com", "_blank");   // popup blockers may intervene
window.print();                                  // print dialog — great for receipts
window.close();                                  // only windows script-opened

matchMedia — JS meets CSS breakpoints

const mobile = window.matchMedia("(max-width: 600px)");
mobile.matches;    // true/false right now

mobile.addEventListener("change", e => {
    console.log("small screen?", e.matches);
});

Responsive behavior (not layout — that's CSS) driven by the same queries your stylesheet uses.

Device pixel ratio

window.devicePixelRatio;   // 2 on retina — matters for canvas sharpness

Page lifecycle events

window.addEventListener("load", () => { … });            // images etc. all done
window.addEventListener("beforeunload", e => {           // warn before leaving
    if (unsavedChanges) event.preventDefault();
});
window.addEventListener("error", e => console.log(e.message));
window.addEventListener("unhandledrejection", e => console.log(e.reason));

Prefer defer/DOMContentLoaded for init; reserve beforeunload for genuine data-loss risk.

window vs document

window  → the browser tab itself
└── document → the loaded HTML page

Gotcha: innerWidth is viewport width, not physical screen width — use screen.width there.

Mini Practice

1. Log innerWidth/innerHeight; resize and watch via the resize event.
2. Smooth-scroll to top from a floating button.
3. Infinite-scroll trigger: fetch more when scrollY + innerHeight ≈ document height.
4. Create/cancel a timeout and an interval.
5. matchMedia: log when crossing the 600px boundary.
6. Print this page programmatically.
7. Explain window vs document in one sentence each.

Next: screen →