? JavaScript Location, History, Navigator & Popups

⚡ Quick Overview

JavaScript provides several built-in browser objects that let you work with the current page, browser history, environment, and small popup dialogs:

• location – works with the current URL and redirects.
• history – moves backward/forward through the session history.
• navigator – gives information about the browser, OS, and capabilities.
• popups – built-in dialogs: alert(), confirm(), and prompt().

? Key Concepts

• Location Object
  • location.href – full URL (read/write).
  • location.hostname – domain name (e.g. example.com).
  • location.pathname – path after the domain (e.g. /docs/page1.html).
  • location.protocol – protocol (e.g. https:).
  • location.port – port number (e.g. 8080).
  • location.hash – fragment part (e.g. #top).
  • location.search – query string (e.g. ?id=1).
  • location.assign() – redirects and adds to history.
  • location.replace() – redirects and replaces current history entry.
  • location.reload() – reloads the current page.
• History Object
  • history.length – number of URLs in the session history.
  • history.back() – go to previous URL.
  • history.forward() – go to next URL.
  • history.go(n) – move n steps forward or backward.
• Navigator Object
  • navigator.appName – browser name (legacy).
  • navigator.appVersion – browser version info.
  • navigator.userAgent – user agent string.
  • navigator.platform – OS platform (e.g. Win32).
  • navigator.language – user language (e.g. en-US).
  • navigator.onLine – true if online, else false.
  • navigator.cookieEnabled – true if cookies are enabled.
• Popup Boxes
  • alert() – simple message + OK button.
  • confirm() – OK/Cancel, returns true or false.
  • prompt() – asks for user input, returns string or null.

? Syntax & Theory

? Location Object

Use the location object to inspect or change the current page URL. Changing location.href or using assign()/replace() will navigate to another page.

? History Object

The history object controls navigation through the tab’s history list. It cannot read URLs directly (for security) but can move the user backward or forward.

? Navigator Object

The navigator object exposes environment information like browser version, language, platform, and online status. It’s handy for feature detection and basic customization, but should not be used for strict browser detection.

? Popup Boxes

Popup dialogs block script execution until the user responds. They are useful for simple feedback or confirmation but should be used sparingly in modern UIs.

? Quick Summary Table

? Code Examples

? Location Example

<script>
console.log(location.href);
console.log(location.search);
location.assign("https://example.com/contact");
</script>

? History Example

<button onclick="history.back()">Go Back</button>
<button onclick="history.forward()">Go Forward</button>
<button onclick="history.go(-2)">Go 2 Pages Back</button>

? Navigator Example

<script>
console.log("Language: " + navigator.language);
console.log("Cookies Enabled: " + navigator.cookieEnabled);
console.log("Online Status: " + navigator.onLine);
</script>

? Popup Examples

<script>
alert("Welcome to our website!");
</script>

<script>
let result = confirm("Delete this file?");
if (result) {
  alert("File deleted");
} else {
  alert("Operation cancelled");
}
</script>

<script>
let city = prompt("Enter your city:");
if (city) {
  alert("You live in " + city);
}
</script>

? Live Output & Explanation