DEV Community

Cover image for Navigate Your Way Through Web Development
Aniket Batabyal
Aniket Batabyal

Posted on

Navigate Your Way Through Web Development

The Power of JavaScript’s Navigator Object


"Have you ever gone on a treasure hunt? Sometimes, you need a map to find your treasure. A navigator in JavaScript is like a map for your computer. It helps your computer find things on the internet, like websites and pictures. It’s like a guide that shows your computer where to go!”


What the hell is a navigator?

The navigator object is a built-in object in JavaScript that provides information about the user’s web browser and operating system. This object is available in all modern web browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge.

Some of the most common properties and methods of the navigator object include:

  • userAgent: This property returns a string that contains information about the user’s web browser, such as its name and version.
console.log(navigator.userAgent);
Enter fullscreen mode Exit fullscreen mode
  • platform: This property returns a string that describes the user’s operating system, such as Windows or macOS.
console.log(navigator.platform);
Enter fullscreen mode Exit fullscreen mode
  • cookieEnabled: This property returns a Boolean value indicating whether or not the user’s web browser is set up to accept cookies.
console.log("Cookies enabled: " + navigator.cookieEnabled);
Enter fullscreen mode Exit fullscreen mode
  • geolocation: This property provides access to the user’s current location, if the user has granted permission to access their geolocation.
navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Latitude: " + position.coords.latitude);
  console.log("Longitude: " + position.coords.longitude);
});
Enter fullscreen mode Exit fullscreen mode
  • language: This property returns a string that specifies the user’s preferred language for web content.
// languages: gives all of the supported languages (list)
// language: give the current set language
console.table({ languages: navigator.languages, language: navigator.language})
Enter fullscreen mode Exit fullscreen mode

screen: This will display the dimensions of the user’s screen, in pixels.

console.log("Screen resolution: " + screen.width + "x" + screen.height);
Enter fullscreen mode Exit fullscreen mode

Conclusion

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.A Navigator object can be retrieved using the read-only window.navigator property.

The most common uses are in service workers & to check if the internet connection is available or not.

P.S: check out

Navigator - Web APIs | MDN

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

favicon developer.mozilla.org

(SUPRISE!!)

Top comments (0)