Frontend Master

JavaScript Curriculum

BOM — Window & Location
+60 XP

BOM — Window & Location

medium
~25 min·60 XP

The coffee shop menu needs URL-based filtering — sharing a link to '/menu?category=coffee' should pre-filter the page. The History API lets you update the URL without reloading, keeping the back button working correctly.

BOM — Window & Location

The DOM is the document tree. The BOM (Browser Object Model) is everything else — the window, URL, history, navigator, and screen. window is the global object in the browser — every variable you declare at the top level becomes a property of it.

The Window Object

Explore dimensions, scroll position, navigator info, and the classic dialog methods:

window-explorer.js
window.innerWidth

Viewport width including scrollbar

Example value1280
// In browser console:
console.log(window.innerWidth)
// → 1280
💡window is the global scope
In the browser, `window.innerWidth` and `innerWidth` are identical — `window.` is optional. Every built-in like `document`, `console`, `fetch`, `setTimeout` is a property of window. That is why you can call them without a prefix.

location & URLSearchParams

The current URL, broken into pieces — and how to read query parameters cleanly:

location-navigator.js
Try a URL
location properties
location.hrefhttps://thegrind.com/menu?category=coffee&sort=price#featured
location.originhttps://thegrind.com
location.protocolhttps:
location.hostthegrind.com
location.pathname/menu
location.search?category=coffee&sort=price
location.hash#featured
URLSearchParams
const params = new URLSearchParams(location.search)
params.get('category')  // → 'coffee'
params.get('sort')  // → 'price'
History API
history.pushState()Add to history without reload
history.replaceState()Replace current entry, no reload
history.back()Go back one step
history.forward()Go forward one step
history.go(-2)Go back/forward N steps
ℹ️URLSearchParams is the clean way to read query strings
Never parse location.search manually with split and string operations. `new URLSearchParams(location.search)` gives you a proper object with `.get()`, `.has()`, `.set()`, and `.toString()`. Use `.get('category')` to read a single param, `Object.fromEntries(params)` to get all at once.

History API — URL without Reload

Update the URL and manage the back button without page reloads — the foundation of single-page apps:

history-api.js
thegrind.com/
Page: {"page":"home"}history.length: 1
History stack
▶/{"page":"home"}
Path
State value
// History stack ready
⚠️pushState vs replaceState
`pushState` adds a new entry — the back button takes the user to the previous URL. `replaceState` modifies the current entry — back goes to the page before this one entirely. Use `pushState` for meaningful navigation (filtering, pagination). Use `replaceState` for minor state changes (sorting, view mode).

Your Challenge

On page load: read new URLSearchParams(location.search).get('category') and filter cards. Wire the category dropdown's change event to call history.pushState({category: val}, '', \?category=${val}`). Listen for window.addEventListener('popstate', e => applyFilter(e.state.category))` so the back button works.

Challenge

Read location.search and use URLSearchParams to get the 'category' query parameter. Apply it as a filter on page load. When the user changes the filter dropdown, use history.pushState to update the URL without a reload.

windowlocationlocation.hreflocation.searchURLSearchParamshistory.pushStatehistory.replaceStatenavigatorscreenwindow.scrollY
BOM — Window & Location | Nexus Learn