Scribd
Upload
27 views10 pages

Lecture 8 - JS - BOM

Uploaded by

mohammadaqbalrezaie
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
27 views10 pages

Lecture 8 - JS - BOM

Uploaded by

mohammadaqbalrezaie
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
You are on page 1/ 10

Kabul Polytechnic University

Computer Science Faculty


Information System Department

Lecture 8: JS Browser Object Model (BOM)

04 November – 2024

Lectures & other related materials are available here: https://github.com/mujtabaSultani01/web_design


Contents
 JavaScript Browser Object Model (BOM)
 Window
 History
 Navigator
 Screen
 Conclusion

2 Asst. Prof. Mujtaba Sultani Web Design


Introduction to BOM
 BOM represents the browser environment, enabling JavaScript
to interact with the browser.
 Main Objects in BOM:
 Window
 History
 Navigator
 Screen

 BOM Facilitates dynamic control of the browser window,


history, user information, and screen display properties.

3 Asst. Prof. Mujtaba Sultani Web Design


BOM: Window Object
 Represents the browser window or a frame.
 Window is global object in BOM, contains properties and
methods to interact with the browser.
 Common Properties and Methods:
 alert("Hello!"): Displays an alert box.
 window.innerHeight / window.innerWidth: Gets the window's
dimensions.
 open() / close(): Opens and closes a new browser window.

4 Asst. Prof. Mujtaba Sultani Web Design


BOM: History Object
 Provides control over the browser's session history.
 History allows navigation between pages the user visited.
 Common Methods:
 history.back(): Navigates to the previous page.
 history.forward(): Moves to the next page in the history.
 history.go(n): Goes n steps forward or backward in history.

5 Asst. Prof. Mujtaba Sultani Web Design


BOM: Navigation Object
 Represents information about the browser.
 Navigation accesses information about the user's browser and
system.
 Key Properties:
 navigator.appName: Browser name.
 navigator.appVersion: Browser version.
 navigator.language: User's language.
 navigator.onLine: Checks if the user is online.

6 Asst. Prof. Mujtaba Sultani Web Design


BOM: Screen Object
 Provides information about the user's screen.
 Usage: Retrieves screen properties, useful for optimizing web
layouts.
 Common Properties:
 screen.width / screen.height: Screen dimensions.
 screen.availWidth / screen.availHeight: Available screen dimensions
(excluding interface features like the taskbar).
 screen.colorDepth: Color depth of the screen.

7 Asst. Prof. Mujtaba Sultani Web Design


Summary
 Summary of BOM Core Objects:

8 Asst. Prof. Mujtaba Sultani Web Design


References
 Learning Web Design: A beginner’s guide to HTML, CSS, Java -
Script, and web graphics.

9 Asst. Prof. Mujtaba Sultani Web Design


Questions …?

10 Asst. Prof. Mujtaba Sultani Web Design

You might also like