-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
The JavaScript Navigator Object is part of the Browser Object Model (BOM). It provides information about the user’s browser, operating system, and device.
In simple words, it helps your website know which browser or device a user is using, which can be useful for customizing features, detecting compatibility issues, or improving user experience.
The navigator
object is a property of the window object, so you can access it using window.navigator
or just navigator
.
It contains details like:
Browser name and version
Operating system
Whether the user is online
Language preferences
console.log(window.navigator);
console.log(navigator); // Both are the same
You might want to use the navigator object to:
Detect the browser and show browser-specific messages.
Check if the user is online or offline.
Customize the website language based on user preferences.
Access device and platform details for analytics or optimization.
Here are the commonly used properties:
Property | Description | Example |
---|---|---|
navigator.appName |
Browser name | "Netscape" |
navigator.appVersion |
Browser version and OS info | "5.0 (Windows)" |
navigator.userAgent |
Full browser user agent string | "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" |
navigator.platform |
Operating system/platform | "Win32" |
navigator.language |
Browser language | "en-US" |
navigator.onLine |
Boolean indicating online/offline | true or false |
navigator.cookieEnabled |
Boolean indicating if cookies are enabled | true or false |
<p id="info"></p>
<script>
let info = `
Browser Name: ${navigator.appName}<br>
Browser Version: ${navigator.appVersion}<br>
User Agent: ${navigator.userAgent}<br>
Platform: ${navigator.platform}<br>
Language: ${navigator.language}<br>
Online: ${navigator.onLine}<br>
Cookies Enabled: ${navigator.cookieEnabled}
`;
document.getElementById("info").innerHTML = info;
</script>
Explanation:
This code prints all important navigator properties on the page.
It helps to debug or customize behavior based on browser or platform.
Sometimes, you may need to check the browser to apply specific fixes or features.
if(navigator.userAgent.indexOf("Chrome") !== -1){
alert("You are using Google Chrome!");
} else if(navigator.userAgent.indexOf("Firefox") !== -1){
alert("You are using Mozilla Firefox!");
} else {
alert("Your browser is not recognized!");
}
userAgent
contains a string that identifies the browser and OS.
You can detect if a user is online or offline using navigator.onLine
.
if(navigator.onLine){
console.log("User is online");
} else {
console.log("User is offline");
}
// Listen for online/offline changes
window.addEventListener('online', () => console.log("Back online"));
window.addEventListener('offline', () => console.log("Lost connection"));
This is useful for web apps that work offline, like notes or chat apps.
You can detect the browser’s preferred language:
console.log("Browser Language:", navigator.language);
if(navigator.language.startsWith("en")){
alert("English is your preferred language");
} else if(navigator.language.startsWith("hi")){
alert("Hindi is your preferred language");
}
You can use this information to show content in the user’s language automatically.
Some websites rely on cookies for login or preferences. You can check if cookies are enabled:
if(navigator.cookieEnabled){
console.log("Cookies are enabled");
} else {
console.log("Cookies are disabled");
}
<script>
let browser;
if(navigator.userAgent.indexOf("Chrome") !== -1){
browser = "Google Chrome";
} else if(navigator.userAgent.indexOf("Firefox") !== -1){
browser = "Mozilla Firefox";
} else if(navigator.userAgent.indexOf("Safari") !== -1){
browser = "Apple Safari";
} else {
browser = "Unknown Browser";
}
alert("You are using: " + browser);
</script>
This code alerts the user about their browser.
It’s useful for guiding users to supported browsers.
Use navigator properties mainly for informational purposes or minor tweaks.
Avoid blocking functionality for specific browsers — most modern browsers work similarly.
Use navigator.onLine
to improve offline experiences.
Don’t rely solely on userAgent
for browser detection — it can be spoofed.
The JavaScript Navigator Object gives you information about the user’s browser and device.
With it, you can:
Detect browser name and version.
Find out the operating system.
Check if the user is online or offline.
Get preferred language.
Check if cookies are enabled.
Mastering the navigator object helps you enhance user experience, provide browser-specific guidance, and build smarter web applications.
How can you display the browser name and version using the navigator
object?
Write a script to log the full user agent string of the browser.
How can you detect the user’s operating system using navigator.platform
?
Write code to check if the browser is online or offline and display a message.
How can you detect the user’s preferred language and display it on the page?
Write a program to alert the user if cookies are disabled using navigator.cookieEnabled
.
How can you use the navigator.userAgent
to detect if the browser is Chrome, Firefox, or Safari?
Write code to listen for changes in online/offline status and log messages accordingly.
How can you combine multiple navigator properties to show a summary of the browser, OS, language, and online status?
Create a function that alerts users about their browser and suggests switching if it is not Chrome or Firefox.
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts