Browser environment, specs

JavaScript was born in the browser. It has since spread far beyond that — servers, build tools, embedded devices — but the browser is still where most people meet it first, and where a huge amount of code runs today.

Here’s the mental split that makes everything else click: the language and the environment it runs in are two separate things. The language gives you variables, functions, objects, loops, Array, Math, JSON, and the rest of the core. On its own, that core has no idea what a “web page” or a “button” is. The surrounding platform supplies that.

The spec has a name for such a platform: a host environment. A host can be a browser, a web server, another runtime, or even a coffee machine with a JavaScript chip inside. Each host layers its own objects and functions on top of the shared language core.

The rest of this chapter is about the browser as a host. Here’s the bird’s-eye view of what shows up when JavaScript runs on a web page:

The window object wears two hats

At the top sits a “root” object named window. It plays two roles at once, and keeping them straight saves a lot of confusion.

Role one: it’s the global object. Every global variable and global function you declare with var, plus the built-ins, live as properties of window. This is the same global object covered in the chapter Global object — in the browser it just happens to be called window.

function sayHi() {
  alert("Hello");
}

// a global function is a method of the global object:
window.sayHi();

Role two: it represents the actual browser window. It carries methods and properties for controlling and measuring that window — for example, its viewport height:

alert(window.innerHeight); // inner window height, in pixels

There’s a lot more on window — sizing, scrolling, popups, timers — which later chapters cover. For now, the two roles are the takeaway.

Here’s role two in action. This preview runs inside its own little window, and window.innerWidth / window.innerHeight report that window’s viewport. Click the button, then try dragging the preview’s bottom edge (or editing the code) and measuring again — the numbers track the real size.

<button id="measure">Measure this window</button>
<p id="out">Not measured yet.</p>

button {
font: inherit;
padding: 8px 14px;
border: 1px solid #7c5cff;
background: #7c5cff;
color: #fff;
border-radius: 8px;
cursor: pointer;
}
button:hover { background: #6a49f2; }
#out {
margin-top: 14px;
font-family: ui-monospace, monospace;
font-size: 15px;
}

const btn = document.getElementById("measure");
const out = document.getElementById("out");

btn.addEventListener("click", () => {
const w = window.innerWidth;
const h = window.innerHeight;
out.textContent = "innerWidth: " + w + "px  ·  innerHeight: " + h + "px";
});

DOM (Document Object Model)

The Document Object Model represents everything on the page as objects you can read and change. HTML text goes in; a live tree of objects comes out.

The document object is your entry point to that tree. Through it you can reach any element, alter its content, restyle it, or build brand-new nodes from scratch.

// change the background color to red
document.body.style.background = "red";

// change it back after 1 second
setTimeout(() => document.body.style.background = "", 1000);

Setting style.background to an empty string removes the inline override, so the element falls back to whatever the stylesheet says — here, the original background.

The demo below is document at work: one button restyles an existing element through style, the other builds a brand-new node from scratch and appends it to the tree. Nothing here is HTML you wrote by hand — it’s all created in code and inserted live.

<div id="stage">
<h3 id="title">A live DOM tree</h3>
</div>
<button id="paint">Restyle the title</button>
<button id="add">Add a new node</button>

#stage {
border: 1px dashed #c9c9d4;
border-radius: 8px;
padding: 14px;
margin-bottom: 12px;
}
h3 { margin: 0; }
button {
font: inherit;
padding: 7px 12px;
margin-right: 8px;
border: 1px solid #7c5cff;
background: #fff;
color: #7c5cff;
border-radius: 8px;
cursor: pointer;
}
button:hover { background: #f2effe; }

const title = document.getElementById("title");
const stage = document.getElementById("stage");
let count = 0;

document.getElementById("paint").addEventListener("click", () => {
title.style.color = "#7c5cff";
title.style.background = "#f2effe";
title.style.padding = "6px 10px";
title.style.borderRadius = "6px";
});

document.getElementById("add").addEventListener("click", () => {
count += 1;
const p = document.createElement("p");
p.textContent = "New node #" + count + " built in JavaScript.";
p.style.margin = "8px 0 0";
stage.appendChild(p);
});

document.body.style is one small corner. The full set of properties and methods is enormous, and it’s all pinned down in the DOM Living Standard.

BOM (Browser Object Model)

The Browser Object Model is the grab bag of browser-provided objects for everything outside the document — the window’s surroundings, the address bar, the user’s device, and dialogs.

A couple of the workhorses:

• The navigator object carries background facts about the browser and OS. Two well-known properties: navigator.userAgent identifies the current browser, and navigator.platform reports the platform, which can help you tell Windows from Linux from Mac.
• The location object lets you read the current URL and send the browser to a new one.

alert(location.href); // shows the current URL
if (confirm("Go to Wikipedia?")) {
  location.href = "https://wikipedia.org"; // redirect the browser to another URL
}

The navigator object is read-only background info, not something you set. Click below to pull the real values your browser reports right now — the same strings any BOM code on this page would see.

<button id="reveal">Show what navigator reports</button>
<dl id="out"></dl>

button {
font: inherit;
padding: 8px 14px;
border: 1px solid #7c5cff;
background: #7c5cff;
color: #fff;
border-radius: 8px;
cursor: pointer;
}
button:hover { background: #6a49f2; }
dl { margin: 14px 0 0; font-family: ui-monospace, monospace; font-size: 13px; }
dt { color: #7c5cff; margin-top: 8px; }
dd { margin: 2px 0 0; word-break: break-all; }

document.getElementById("reveal").addEventListener("click", () => {
const rows = {
  "navigator.language": navigator.language,
  "navigator.platform": navigator.platform,
  "navigator.userAgent": navigator.userAgent
};
const out = document.getElementById("out");
out.innerHTML = "";
for (const key in rows) {
  const dt = document.createElement("dt");
  dt.textContent = key;
  const dd = document.createElement("dd");
  dd.textContent = rows[key];
  out.append(dt, dd);
}
});

The dialog trio — alert, confirm, and prompt — also belongs to the BOM. They don’t touch the document; they’re plain browser methods for talking to the user.

The specs, and how they fit together

Three standards carry most of the weight for browser JavaScript. They stack: each builds on the one below it.

DOM specification

Describes the document structure, manipulations, and events. See https://dom.spec.whatwg.org.

CSSOM specification

Describes stylesheets and style rules, how to manipulate them, and how they bind to documents. See https://www.w3.org/TR/cssom-1/.

HTML specification

Describes the HTML language (tags and so on) and the BOM — browser functions like setTimeout, alert, and location. It takes the DOM specification and extends it with many extra properties and methods. See https://html.spec.whatwg.org.

Some classes are described separately at https://spec.whatwg.org/.

You won’t remember all of this, and you’re not meant to. Bookmark the links. There’s far more surface area here than anyone keeps in their head — the skill is knowing where to look, not memorizing it.

When you want to understand a specific property or method, the MDN reference is a friendly place to start. The relevant spec goes deeper: harder to read and longer, but it’s where the exact, complete behavior is defined. Reach for the spec when MDN leaves you unsure about an edge case.

Next up: the DOM in depth. The document sits at the center of nearly every user interface, so that’s where the real work begins.