The location Object

The location object, a property of window, exposes the current page's URL and lets you redirect the browser. Common properties include href, hostname, port, pathname, and hash. You can navigate programmatically by assigning a new URL to location.href, using location.assign(), or by replacing the current entry with location.replace().

<button id="showLocation">Show Details & Redirect</button>
<script>
  document.getElementById('showLocation').addEventListener('click', () => {
    console.log('Hostname:', location.hostname);
    console.log('Port:', location.port);
    console.log('Full URL:', location.href);
    // Redirect after 2 seconds
    setTimeout(() => {
      location.assign('https://example.com');
    }, 2000);
  });
</script>

The history Object

The history object provides an interface to the browser's session history. It allows moving back and forth through visited pages using methods like back(), forward(), and go(). Modern single‑page applications can also use pushState() and replaceState() to modify history without a page reload.

<button id="goBack">Back</button>
<button id="goForward">Forward</button>
<button id="goSpecific">Go -2 pages</button>
<script>
  document.getElementById('goBack').addEventListener('click', () => history.back());
  document.getElementById('goForward').addEventListener('click', () => history.forward());
  document.getElementById('goSpecific').addEventListener('click', () => history.go(-2));
</script>

The screen and navigator Objects

screen describes the user's display, offering dimensions like width, height, availWidth (excluding taskbars), and colorDepth. The navigator object identifies the browser and underlying system, providing properties such as userAgent, language, platform, and feature‑detection helpers like navigator.onLine.

<script>
  window.addEventListener('load', () => {
    console.log('Screen resolution:', screen.width + 'x' + screen.height);
    console.log('Available area:', screen.availWidth + 'x' + screen.availHeight);
    console.log('Browser language:', navigator.language);
    console.log('User agent:', navigator.userAgent);
    console.log('Platform:', navigator.platform);
  });
</script>