Browser Environment & Specs in JavaScript

JavaScript runs inside a browser environment, which provides various objects and APIs to interact with the web page and the browser itself.

🔹 1. The window Object

The window object is the global object in the browser. It represents the browser window and provides methods and properties to interact with it.

✔ Example: Accessing the window object

console.log(window); // Logs all properties and methods of window
console.log(window.innerWidth, window.innerHeight); // Get viewport size

🔹 2. The navigator Object (Browser Info)

The navigator Object provides information about the browser and device.

✔ Example: Getting Browser Information

console.log(navigator.userAgent); // Browser user agent string
console.log(navigator.platform); // OS platform (Windows, Mac, Linux)
console.log(navigator.language); // Browser language
console.log(navigator.onLine); // Check if the browser is online

✔ Detecting if the user is on Mobile

const isMobile = /Mobi|Android/i.test(navigator.userAgent);
console.log("Is Mobile:", isMobile);

🔹 3. The screen Object (Screen Info)

The screen object provides details about the user's screen.

✔ Example: Getting Screen Dimensions

console.log(screen.width, screen.height); // Full screen width and height
console.log(screen.availWidth, screen.availHeight); // Available width & height (excluding taskbars)
console.log(screen.colorDepth); // Color depth (bits per pixel)

🔹 4. The location Object (URL Info)

The location object provides details about the current page URL.

✔ Example: Getting the Current URL

console.log(location.href); // Full URL
console.log(location.hostname); // Domain name (e.g., example.com)
console.log(location.pathname); // Path after domain (e.g., /about.html)
console.log(location.search); // Query string (?id=123)
console.log(location.hash); // Fragment (#section1)

✔ Redirecting to Another Page

location.href = "https://www.google.com";

✔ Reloading the Page

location.reload(); // Refresh the page

🔹 5. The history Object (Browsing History)

The history object allows interaction with the browser's history.

✔ Example: Navigating Back and Forward

history.back(); // Go back one page
history.forward(); // Go forward one page

✔ Moving to a Specific History Entry

history.go(-2); // Go back two pages

⚠ Note: Due to security reasons, JavaScript cannot access the user's full browsing history.

🔹 6. The document Object (DOM Access)

The document object represents the webpage loaded in the browser.

✔ Example: Modifying Page Content

document.title = "New Page Title"; // Change the page title
document.body.style.backgroundColor = "lightblue"; // Change background color

✔ Example: Selecting Elements

let heading = document.getElementById("title");
console.log(heading.innerText);

✔ Example: Changing Content Dynamically

document.getElementById("title").innerText = "Hello, JavaScript!";

🔹 7. Detecting Browser Features (Modernizr Alternative)

Instead of detecting browser types, it's better to check feature availability.

✔ Example: Checking for geolocation Support

if ("geolocation" in navigator) {
    console.log("Geolocation is supported");
} else {
    console.log("Geolocation is NOT supported");
}

✔ Example: Checking for Local Storage

if ("localStorage" in window) {
    console.log("Local Storage is available");
} else {
    console.log("Local Storage is NOT available");
}

🔹 8. The console Object (Debugging)

The console Object helps debug JavaScript.

✔ Example: Logging Different Messages

console.log("This is a log message");
console.warn("This is a warning");
console.error("This is an error");

✔ Measuring Time for Execution

console.time("myTimer");
for (let i = 0; i < 100000; i++) {} // Some code
console.timeEnd("myTimer");

✔ Displaying Objects in a Table

console.table([{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }]);

🔹 Summary

Object	Purpose
window	Global browser object
navigator	Browser & device info
screen	User's screen info
location	Current page URL details
history	Navigation history
document	DOM manipulation
console	Debugging tools

🚀 Use these browser objects to create dynamic and interactive web applications!