Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
client's os
os details

How to detect the operating system of the client machine using JS

Abdul Muizz

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

Overview

To detect the client machine's operating system, we can use the navigator object provided by JavaScript. The navigator object provides us with methods such as navigator.appVersion & navigator.userAgent to help us achieve our goal.

Both methods mentioned above return a string, which is then used to extract the user's operating system.

Note: To refer to the official documentation of the navigator object, please visit this link.

Syntax


//Syntax for the first method
navigator.appVersion

//Syntax for the second method
navgiator.userAgent

The navigator object is mainly used to represent the state and the user's identity. It is used to detect the version of the browser and the operating system of the user.

Return value

The return values for both the methods are as follows:

  • navigator.appVersion: It returns a string that specifies the browser version of the user.
  • navigator.userAgent: This method returns a string that represents the browser's user agent header.

Note: The method of navigator.appVersion is now deprecated and is not supported in many modern-day browsers, so we’ll use the navigator.userAgent method to detect users’ OS.

Example

Explanation

The explanation for the code in the HTML file is given below:

  • Line 7: This is a placeholder <div>, which has the id attribute set to os, so this <div> tag will get populated by the clients' OS.
  • Line 8: This line of code contains an HTML <button> with the onclick attribute, which triggers the osfunction(), which is a piece of JS code required to detect the OS.

The code in the JS file is explained as follows:

  • Line 3: We use the navigator.userAgent method and assign the string returned to an os variable.
  • Lines 4–16: We initialize an empty string and assign it to a variable named finalOs .Next, we decide on the users' OS by the use of conditional statements (if-else) and the search method, which searches through the string for the operating system and returns -1 if the OS given in the parameter is not found.
  • Line 18: Finally, we use DOM and its document.getElementById() method to populate the <div> tag in the HTML document with the clients' OS.

To explore more related to the search method provided by JS, please refer to this link.

RELATED TAGS

javascript
client's os
os details

CONTRIBUTOR

Abdul Muizz
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring