JavaScript Window

The tab object

window is the global object in a page. The current tab’s size, the URL, and the timer functions all live on it. In the browser you can write setTimeout without a prefix — that is still window.setTimeout.

document is window.document. You already used the document tree. This chapter is the tab around that tree.

Size

window.innerWidth and window.innerHeight are the viewport in pixels — the area your page can paint, not including browser chrome. They change when the visitor resizes the tab. Listen to resize if you need to react.

<p id="out"></p>
<script>
  const out = document.getElementById("out");
  function showSize() {
    out.textContent = window.innerWidth + " × " + window.innerHeight;
  }
  showSize();
  window.addEventListener("resize", showSize);
</script>

location

window.location is the current URL. location.href is the full string. location.pathname is the path. Assigning location.hrefnavigates. location.reload() reloads the tab.

<p id="out"></p>
<script>
  const out = document.getElementById("out");
  out.textContent =
    "path: " + window.location.pathname +
    " — host: " + window.location.host;
  console.log(window.location.href);
</script>

In the StudyGrid editor the path belongs to the preview frame, not necessarily to the chapter URL. Log it to see what this tab thinks “here” is.

setTimeout

setTimeout(fn, ms) runs fn once after a delay in milliseconds.1000 is one second. It returns an id you can pass toclearTimeout if you need to cancel before it fires.

<p id="out">Wait…</p>
<script>
  const out = document.getElementById("out");
  setTimeout(function () {
    out.textContent = "Done.";
    console.log("timeout fired");
  }, 1000);
</script>

setInterval

setInterval(fn, ms) runs fn again and again. Always keep the id and call clearInterval when you should stop — a clock, a poll, a short animation. Forgetting to clear leaves the function running after the visitor left that screen.

<p id="out">0</p>
<button id="stop">Stop</button>
<script>
  const out = document.getElementById("out");
  const stop = document.getElementById("stop");
  let n = 0;
  const id = setInterval(function () {
    n += 1;
    out.textContent = String(n);
    if (n >= 5) {
      clearInterval(id);
    }
  }, 500);
  stop.addEventListener("click", function () {
    clearInterval(id);
  });
</script>

Other window names

Global names you declare with var used to become properties ofwindow. let and const do not. Prefer not to park app data on window by hand.

What to remember

• window is the tab: size, location, timers.
• setTimeout runs once. setInterval repeats until you clear it.
• innerWidth / innerHeight are the viewport.
• location is the URL of this tab (or this frame).

Next: storage — strings that survive a reload, and strings that last only for the tab.