Scribd Logo
Upload

Welcome to Scribd!

  • 7 views

    Lecture 8 - JS_BOM

    Uploaded by

    mohammadaqbalrezaie

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Lecture 8 - JS_BOM

    Uploaded by

    mohammadaqbalrezaie
    7 views10 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    7 views10 pages

    Lecture 8 - JS_BOM

    Uploaded by

    mohammadaqbalrezaie

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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