🧭 Navigator and Location Objects

Two Objects on the Window

The global window hangs several helper objects off itself. Two you'll touch constantly are window.navigator and window.location (you can drop the window. prefix and write navigator or location directly).

💡 A useful analogy: navigator is the ship's captain — it knows the vessel's capabilities and status. location is the navigation chart — it knows exactly where you are (the URL), what its parts mean, and can set a new course (redirect).

The Navigator Object

The navigator object exposes information about the browser and device, plus entry points to many APIs (Geolocation, Clipboard, Media Devices, Service Workers). The most useful, reliable properties are the small factual ones:

console.log(navigator.language);            // 'en-US' — user's preferred language
console.log(navigator.languages);           // ['en-US', 'en'] — ordered list
console.log(navigator.onLine);              // true / false — network reachable?
console.log(navigator.cookieEnabled);       // are cookies allowed?
console.log(navigator.hardwareConcurrency); // logical CPU cores (e.g. 8)
console.log(navigator.maxTouchPoints);      // > 0 on touch devices

The Network Information API (navigator.connection) hints at connection quality so you can adapt — serve lighter images on a slow link, defer prefetching when the user has data-saver on. It's not in every browser, so detect it first:

if ('connection' in navigator) {
  const c = navigator.connection;
  console.log(c.effectiveType); // '4g' | '3g' | '2g' | 'slow-2g'
  console.log(c.saveData);      // true if the user requested reduced data

  c.addEventListener('change', () => {
    console.log('Connection changed to', c.effectiveType);
  });
}

A common, sensible use is adaptive loading — reading a few navigator signals on start-up and tailoring the experience:

function adapt() {
  const lowPower = (navigator.hardwareConcurrency || 4) < 4;
  const slowNet  = navigator.connection?.effectiveType === '2g'
                || navigator.connection?.saveData === true;

  if (lowPower) document.body.classList.add('reduce-motion');
  if (slowNet)  loadLowResImages(); else loadHighResImages();
  if (!navigator.onLine) showOfflineBanner();
}

window.addEventListener('online',  () => hideOfflineBanner());
window.addEventListener('offline', () => showOfflineBanner());

User-Agent vs. Feature Detection

navigator.userAgent is a long, historically messy string like:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36

It's tempting to parse it to decide "is this Chrome?" — but this is fragile. User-agent strings are routinely spoofed, deliberately frozen by browser vendors, and full of legacy tokens (notice a Chrome UA claims to be Mozilla and Safari). Basing behaviour on it leads to sites that break the moment a string changes.

// ❌ Brittle — breaks when UA strings change or are spoofed
if (navigator.userAgent.includes('Chrome')) { /* ... */ }

// ✅ Robust — ask whether the capability exists
if ('share' in navigator) {
  await navigator.share({ url: location.href });
}

Reserve user-agent inspection for coarse analytics or logging, never for deciding whether a capability is available. When you truly need device class, the modern, structured replacement is the User-Agent Client Hints API (navigator.userAgentData) where supported.

The Location Object

The location object represents the current URL and lets you both read its parts and navigate. Consider this URL:

https://shop.example.com:8080/products/shoes?color=red&size=10#reviews

location.href;     // full URL string
location.protocol; // 'https:'
location.host;     // 'shop.example.com:8080'
location.hostname; // 'shop.example.com'
location.port;     // '8080'
location.pathname; // '/products/shoes'
location.search;   // '?color=red&size=10'
location.hash;     // '#reviews'
location.origin;   // 'https://shop.example.com:8080'

Navigating

location.assign('/checkout');   // go to a new page (adds a history entry)
location.href = '/checkout';    // identical to assign()
location.replace('/login');     // navigate WITHOUT a history entry (no "back")
location.reload();              // reload the current page

Query Strings with URLSearchParams

location.search gives you the raw query string, but you rarely want to slice it by hand. The URLSearchParams API parses, reads, edits, and re-serialises query strings correctly — including URL-encoding — so you never hand-roll string splitting again.

// For ?name=Ray&hobby=coding&hobby=music
const params = new URLSearchParams(location.search);

params.get('name');     // 'Ray'
params.get('missing');  // null
params.has('hobby');    // true
params.getAll('hobby'); // ['coding', 'music'] — repeated keys

// Iterate every pair
for (const [key, value] of params) {
  console.log(key, '=', value);
}

// Build a query string safely (encoding handled for you)
const q = new URLSearchParams({ q: 'red shoes', page: 2 });
q.toString(); // 'q=red+shoes&page=2'

URL-Driven UI State

Here's a powerful pattern: store your UI's filter/sort/page state in the URL. The payoff is huge — the state becomes bookmarkable, shareable, and Back-button friendly. Paste the link to a coworker and they see the exact same filtered view.

The trick is history.pushState(), which updates the address bar without reloading the page. Combine it with URLSearchParams:

// Read state from the URL on load
function readState() {
  const p = new URLSearchParams(location.search);
  return {
    category: p.get('category') || 'all',
    sort:     p.get('sort')     || 'newest',
    page:     Number(p.get('page') || '1')
  };
}

// Write one value back into the URL — no reload
function setParam(key, value) {
  const p = new URLSearchParams(location.search);
  if (value === '' || value == null) p.delete(key);
  else p.set(key, value);
  const qs = p.toString();
  history.pushState({}, '', qs ? `${location.pathname}?${qs}` : location.pathname);
  render(readState());
}

// Re-render when the user presses Back/Forward
window.addEventListener('popstate', () => render(readState()));

// Wire up a control
document.querySelector('#sort').addEventListener('change', (e) => {
  setParam('sort', e.target.value);
});

render(readState()); // initial paint

Security: XSS & Open Redirects

URL values come from the outside — anyone can craft a link with any query string. Treat them as untrusted input. Two classic bugs come from getting this wrong.

const name = new URLSearchParams(location.search).get('name');

// ❌ XSS hole
welcome.innerHTML = `Welcome, ${name}!`;

// ✅ textContent escapes automatically
welcome.textContent = `Welcome, ${name}!`;

const target = new URLSearchParams(location.search).get('redirect');

function isSafe(url) {
  try {
    const u = new URL(url, location.origin);
    return u.origin === location.origin; // same-site only
  } catch {
    return false; // not a valid URL
  }
}

// ✅ Only redirect to trusted destinations
if (target && isSafe(target)) location.assign(target);
else location.assign('/'); // safe default

The theme across both: output-encode anything from a URL before it hits the DOM, and validate anything from a URL before it drives navigation.

Hands-on Exercise

const cat  = document.querySelector('#category');
const sort = document.querySelector('#sort');
const echo = document.querySelector('#echo');

function render() {
  const p = new URLSearchParams(location.search);
  const state = { category: p.get('category') || 'all', sort: p.get('sort') || 'newest' };
  cat.value = state.category;
  sort.value = state.sort;
  echo.textContent = `Showing ${state.category}, sorted by ${state.sort}`;
}

function update(key, value) {
  const p = new URLSearchParams(location.search);
  value === 'all' || value === 'newest' ? p.delete(key) : p.set(key, value);
  const qs = p.toString();
  history.pushState({}, '', qs ? `?${qs}` : location.pathname);
  render();
}

cat.addEventListener('change',  (e) => update('category', e.target.value));
sort.addEventListener('change', (e) => update('sort', e.target.value));
window.addEventListener('popstate', render);

document.querySelector('#clear').addEventListener('click', () => {
  history.replaceState({}, '', location.pathname);
  render();
});

render();

Summary & Quiz

📚 Further Reading

• MDN — Navigator
• MDN — Location
• MDN — URLSearchParams
• MDN — History API (pushState)

🚀 What's Next?

You've now covered the DOM, events, forms, storage, and the core browser objects. It's time to put it all together — next is the module weekend project, where you'll build a small app that leans on everything from this module.