Scribd
Upload
5 views4 pages

JavaScript BOM: Screen & Navigator Objects

The document explains the Browser Object Model (BOM) in JavaScript, focusing on the screen and navigator objects that provide information about the user's display and browser/system details. It includes examples of how to access properties like screen resolution and browser version, as well as real-world use cases for detecting screen resolution, online status, and browser language. The document emphasizes the importance of feature detection over browser detection for accuracy and security.

Uploaded by

Mishita Ingawale
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views4 pages

JavaScript BOM: Screen & Navigator Objects

The document explains the Browser Object Model (BOM) in JavaScript, focusing on the screen and navigator objects that provide information about the user's display and browser/system details. It includes examples of how to access properties like screen resolution and browser version, as well as real-world use cases for detecting screen resolution, online status, and browser language. The document emphasizes the importance of feature detection over browser detection for accuracy and security.

Uploaded by

Mishita Ingawale
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JavaScript Lesson: Screen and Navigator

Objects
1. Introduction to BOM
The Browser Object Model (BOM) allows JavaScript to interact with the web browser.
Among BOM objects, two important ones are:
- screen object → gives details about the user’s display/monitor.
- navigator object → gives details about the browser and system.

These objects are part of the window object, so you can access them as [Link] or
simply screen.

2. The screen Object


The screen object represents the physical screen (monitor) of the user.

Property Description Example

[Link] Full width of the screen in 1920


pixels

[Link] Full height of the screen in 1080


pixels

[Link] Available width (excluding 1850


taskbars, etc.)

[Link] Available height 1050

[Link] Number of bits used to 24


display colors

[Link] Similar to colorDepth 24

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Screen Object Example</h2>
<p id="info"></p>
<script>
let details = `
Screen Width: ${[Link]} <br>
Screen Height: ${[Link]} <br>
Available Width: ${[Link]} <br>
Available Height: ${[Link]} <br>
Color Depth: ${[Link]} <br>
Pixel Depth: ${[Link]}
`;
[Link]("info").innerHTML = details;
</script>
</body>
</html>

3. The navigator Object


The navigator object contains information about the browser and system being used.

Property Description Example

[Link] Name of the browser (not Netscape


reliable, returns 'Netscape'
for most)

[Link] Browser version info 5.0 (Windows)

[Link] Full user agent string Mozilla/5.0 (Windows NT


10.0; Win64; x64)...

[Link] User’s preferred language en-US

[Link] Whether the browser is true/false


online

[Link] Whether cookies are true/false


enabled

[Link] OS platform Win32

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Navigator Object Example</h2>
<p id="browser"></p>
<script>
let details = `
App Name: ${[Link]} <br>
App Version: ${[Link]} <br>
User Agent: ${[Link]} <br>
Language: ${[Link]} <br>
Platform: ${[Link]} <br>
Cookies Enabled: ${[Link]} <br>
Online: ${[Link]}
`;
[Link]("browser").innerHTML = details;
</script>
</body>
</html>

4. Using navigator for Feature Detection


Instead of checking browser name (not reliable), check for features.

Example: Check if Geolocation API is supported


if ("geolocation" in navigator) {
[Link]("Geolocation is supported!");
} else {
[Link]("Geolocation not supported.");
}

5. Real-World Use Cases


1. Detect Screen Resolution

if([Link] < 768){


[Link] = "lightblue";
}else{
[Link] = "lightgreen";
}

2. Detect Online/Offline Mode

[Link]("online", () => alert("You are online!"));


[Link]("offline", () => alert("You are offline!"));

3. Detect Browser Language


if([Link]("fr")){
alert("Bienvenue! (Welcome in French)");
}

6. Limitations & Security


- Some properties may not be 100% accurate (like [Link]).
- User can fake the userAgent string.
- Modern web apps prefer feature detection over browser detection.

Summary
- screen object → gives details of screen resolution, available width/height, color depth.
- navigator object → provides browser/system info like version, platform, user agent,
language, cookies, online status.
- Useful for responsive design, browser detection, feature detection, and user analytics.
- Always prefer feature detection (like checking for geolocation) instead of relying only on
browser name/version.

You might also like