Scribd Logo
Upload

Welcome to Scribd!

  • 33 views

    Browser Object Model

    Uploaded by

    suchita
    The Browser Object Model (BOM) allows interaction with the browser via objects like window and navigator. The window object represents a browser window/tab and has methods like alert(), confirm(), prompt(), open(), close(), and setTimeout(). The alert() method displays a popup, confirm() displays a confirmation dialog, and prompt() gets user input. The history object tracks visited pages and has methods like back(), forward(), and go() to navigate. The navigator object provides browser details like name, version, and plugins.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Browser Object Model

    Uploaded by

    suchita
    33 views18 pages
    The Browser Object Model (BOM) allows interaction with the browser via objects like window and navigator. The window object represents a browser window/tab and has methods like alert(), confirm(), prompt(), open(), close(), and setTimeout(). The alert() method displays a popup, confirm() displays a confirmation dialog, and prompt() gets user input. The history object tracks visited pages and has methods like back(), forward(), and go() to navigate. The navigator object provides browser details like name, version, and plugins.

    Original Description:

    Original Title

    Browser Object Model.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The Browser Object Model (BOM) allows interaction with the browser via objects like window and navigator. The window object represents a browser window/tab and has methods like alert(), confirm(), prompt(), open(), close(), and setTimeout(). The alert() method displays a popup, confirm() displays a confirmation dialog, and prompt() gets user input. The history object tracks visited pages and has methods like back(), forward(), and go() to navigate. The navigator object provides browser details like name, version, and plugins.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    33 views18 pages

    Browser Object Model

    Uploaded by

    suchita
    The Browser Object Model (BOM) allows interaction with the browser via objects like window and navigator. The window object represents a browser window/tab and has methods like alert(), confirm(), prompt(), open(), close(), and setTimeout(). The alert() method displays a popup, confirm() displays a confirmation dialog, and prompt() gets user input. The history object tracks visited pages and has methods like back(), forward(), and go() to navigate. The navigator object provides browser details like name, version, and plugins.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 18

    Browser Object Model

    The Browser Object Model (BOM) is used to


    interact with the browser.
    The default object of browser is window means
    you can call all the functions of window by
    specifying window or directly. For example:
    window.alert("hello javatpoint"); 
    alert("hello javatpoint"); 
    Following are the properties
    (other objects)
    Window Object
    •The window object represents a window in
    browser.
    •An object of window is created automatically
    by the browser.
    •Window is the object of browser, it is not the
    object of javascript.
    •The javascript objects are string, array, date etc.
    Methods of window object
    • The important methods of window object are as follows:
    MethodDescription
    alert() displays the alert box containing message with ok button.
    confirm() displays the confirm dialog box containing message
    with ok and cancel
    button.
    prompt() displays a dialog box to get input from the user.
    open() opens the new window.
    close() closes the current window.
    setTimeout() performs action after specified time like calling
    function, evaluating expressions etc.
    alert() box
    alert() function is used to display a popup message to the user.
    This popup will have OK button to close the popup.
    Eg:-
    <script type="text/javascript">  
    function msg()
    {  
     alert("Hello Alert Box");  
    }  
    </script>  
    <input type="button" value="click" onclick="msg()"/>  
    confirm() box
    • A confirmation dialog box is mostly used to take user's consent on any option. It
    displays a dialog box with two buttons: OK and Cancel.
    • If the user clicks on the OK button, the window method confirm() will return true. If
    the user clicks on the Cancel button, then confirm() returns false.
    <html>
    <head>
    <script>
    function msg()
    {
    confirm("Press a button!");
    }
    </script>
    </head>
    <body>
    <p>Click the button to display a confirm box.</p>
    <form>
    <input type=“button” value=“Click me” onclick=“msg()”>
    </form>
    </body>
    </html>
    <html>
    <head>
    <script>
    function getConfirmation()
    {
    var a = confirm("Do you want to save data ?");
    if( a == true )
    {
    document.write ("Data saved successfully!");
    }
    else
    {
    document.write ("Data got cancelled!");
    }
    }
    </script>
    </head>
    <body>
    <h1> Example of the confirm box with the use of function
    <form>
    <input type = "button" value = "Click Me" onclick = "getConfirmation();">
    </form>
    </body>
    </html>
    Prompt() box
    • Sometimes you may need to take the user's input to do further actions in a web
    page.
    • The prompt dialog box is very useful when you want to pop-up a text box to
    get user input. Thus, it enables you to interact with the user. The user needs to
    fill in the field and then click OK.
    • This dialog box is displayed using a method called prompt() which takes two
    parameters:
    (i) a label which you want to display in the text box and
    (ii) a default string to display in the text box.
    • This dialog box has two buttons: OK and Cancel.
    • If the user clicks the OK button, the window method prompt() will return the
    entered value from the text box.
    • If the user clicks the Cancel button, the window
    method prompt() returns null.
    <html>
    <head>
    <script type="text/javascript">

    function msg()
    {
    var a= prompt("Who are you?");
    alert("Welcome " +a);

    }
    </script>
    <body>
    <h1> Example of the Prompt box with the use of function
    <form>
    <input type="button" value="click" onclick="msg()"/>
    </form>
    </body>
    </html>
    Note:
    • The alert, confirm and prompt functions are
    global functions.
    • So it can be called using window object like
     window.alert()
     window.confirm()
     window.prompt()
    Points to Remember :
    • Popup message can be shown using global functions -
    alert(), confirm() and prompt().
    • alert() function displays popup message with 'Ok' button.
    • confirm() function display popup message with 'Ok' and
    'Cancel' buttons. Use confirm() function to take user's
    confirmation to proceed.
    • prompt() function enables you to take user's input with
    'Ok' and 'Cancel' buttons. prompt() function returns
    value entered by the user. It returns null if the user does
    not provide any input value.
    Example of open() in javascript
    <html>
    <head>
    <script type="text/javascript">  
    function msg()
    {
    open("https://www.javatpoint.com/window-object");
    }

    </script>  
    <body>
    <h1> example of open() function</h1>
    <form>
    <input type="button" value="javatpoint" onclick="msg()">
    </form>
    </body>
    </html>
    Example of setTimeout() in javascript
    It performs its task after the given milliseconds.
    <script type="text/javascript">  
    function msg()
    {  
    setTimeout( 
    function()
    {  
    alert("Welcome to Javatpoint after 2 seconds")  
    },2000);  
      
    }  
    </script>  
      
    <input type="button" value="click" onclick="msg()"/>  
    JavaScript History Object
    • The JavaScript history object represents an
    array of URLs visited by the user.
    • By using this object, you can load previous,
    forward or any particular page.
    • The history object is the window property, so
    it can be accessed by:
    window.history   or
    history  
    Property of JavaScript history object
    There is only 1 property of history object.
    No. Property Description
    1 length returns the length of the
    history URLs.
    Methods of JavaScript history object
    There are only 3 methods of history object.
    No. Method Description
    1 forward() loads the next page.
    2 back() loads the previous page.
    3 go() loads the given page number.
    Example of history object

    • history.back();//for previous page  
    • history.forward();//for next page  
    • history.go(2);//for next 2nd page  
    • history.go(-2);//for previous 2nd page  
    JavaScript Navigator Object
    • The JavaScript navigator object is used for browser detection.
    • It can be used to get browser information such as appName,
    appCodeName, userAgent etc.
    • The navigator object is the window property, so it can be
    accessed by:
    window.navigator  
    Navigator
    Property of JavaScript navigator object
    There are many properties of navigator object that returns
    information of the browser.
    Property of JavaScript navigator object
    There are many properties of navigator object that returns information of the browser.
    No. Property Description
    1 appName returns the name
    2 appVersion returns the version
    3 appCodeName returns the code name
    4 cookieEnabled returns true if cookie is enabled otherwise false
    5 userAgent returns the user agent
    6 language returns the language. It is supported in Netscape
    and Firefox only.
    7 userLanguage returns the user language. It is supported in IE only
    8 Plugins returns the plugins. It is supported in Netscape and Firefox only.
    9 systemLanguage returns the system language. It is supported in IE only.
    10 mimeTypes[] returns the array of mime type. It is supported in Netscape
    and Firefox only.
    11 Platform returns the platform e.g. Win32
    12 online returns true if browser is online otherwise false.

    You might also like