Scribd Logo
Upload

Welcome to Scribd!

  • 283 views

    Javascript: Bom and Dom

    Uploaded by

    justadityabist
    The document discusses the Browser Object Model (BOM) and Document Object Model (DOM) in JavaScript. It provides information on the window object, location object, history object, navigator object, and screen object that are part of the BOM. It also discusses methods like setTimeout(), clearTimeout(), location.assign(), etc. The DOM allows programming and dynamic access to documents.

    Copyright:

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

    Javascript: Bom and Dom

    Uploaded by

    justadityabist
    283 views16 pages
    The document discusses the Browser Object Model (BOM) and Document Object Model (DOM) in JavaScript. It provides information on the window object, location object, history object, navigator object, and screen object that are part of the BOM. It also discusses methods like setTimeout(), clearTimeout(), location.assign(), etc. The DOM allows programming and dynamic access to documents.

    Original Title

    9.Module3_BOM_7

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses the Browser Object Model (BOM) and Document Object Model (DOM) in JavaScript. It provides information on the window object, location object, history object, navigator object, and screen object that are part of the BOM. It also discusses methods like setTimeout(), clearTimeout(), location.assign(), etc. The DOM allows programming and dynamic access to documents.

    Copyright:

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

    Javascript: Bom and Dom

    Uploaded by

    justadityabist
    The document discusses the Browser Object Model (BOM) and Document Object Model (DOM) in JavaScript. It provides information on the window object, location object, history object, navigator object, and screen object that are part of the BOM. It also discusses methods like setTimeout(), clearTimeout(), location.assign(), etc. The DOM allows programming and dynamic access to documents.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 16

    JavaScript

    BOM and DOM

    17-Feb-20
    BOM vs DOM

    2
    The “window” Object
     It is the highest-level object in the JavaScript browser
    object hierarchy.
     It is the default object and is created automatically when
    a page is loaded.
     Since it is the default object, we may omit writing
    window explicitly.
     document.write(“a test message”);
     window.document.write(“a test message”);
     It also includes several properties and methods for us to
    manipulate the webpage.
    5
    Window Object
     Methods :- alter(), blur(), clearInterval(),
    clearTimeout(), close(), conform(), focus(), moveBy(),
    moveTo(), open(), prompt(), resizeTo(), scroll(),
    scrollTo(), scrollBy(), setInterval(), setTimeout().
     Properties:- closed, defaultStatus, document, frames
    array, history property, location, name, navigator,
    opener, parent, screen , status, top.

    6
    OPEN URL
    <script type="text/javascript">
    function msg(){
    open("http://www.w3school.com");
    }
    </script>
    <input type="button" value=“w3" onclick="msg()"/>

    7
    8
    9
    setTimeout/clearTimeout
     setTimeout(function, milliseconds) -Executes a function,
    after waiting a specified number of milliseconds.
     setInterval(function, milliseconds) - Same as setTimeout(),
    but repeats the execution of the function continuously.
    <input type="button" value="click" onclick=“var t =
    setTimeout( function(){alert("Welcome msg after 2s")
    },2000)”>
    <input type="button" value=“stop" onclick =
    "clearTimeout(t)”>

    10
    Window object

    11
    Location
     location.assign("http://www.w3schools.com");
     location.replace("http://www.w3schools.com");
     location.reload();

    Method Description
    assign() Loads a new document
    reload() Reloads the current document
    replace() Replaces the current document with a new one

    12
    History
     history.back();//for previous page
     history.forward();//for next page

     history.go(2);//for next 2nd page

     history.go(-2);//for previous 2nd page

    <button onclick="goBack()">Go Back 2 Pages</button>


    <script>
    function goBack() {
    window.history.go(-2);
    }
    </script>

    13
    Navigator
    <script>
    document.writeln("<br/>navigator.appCodeName: "+navigator.appCodeName);
    document.writeln("<br/>navigator.appName: "+navigator.appName);
    document.writeln("<br/>navigator.appVersion: "+navigator.appVersion);
    document.writeln("<br/>navigator.cookieEnabled: "+navigator.cookieEnabled);
    document.writeln("<br/>navigator.language: "+navigator.language);
    document.writeln("<br/>navigator.userAgent: "+navigator.userAgent);
    document.writeln("<br/>navigator.platform: "+navigator.platform);
    document.writeln("<br/>navigator.onLine: "+navigator.onLine);
    </script>

    14
    Screen

    Property Description

    availHeight Returns the height of the screen (excluding the Windows Taskbar)
    availWidth Returns the width of the screen (excluding the Windows Taskbar)
    colorDepth Returns the bit depth of the color palette for displaying images
    height Returns the total height of the screen
    pixelDepth Returns the color resolution (in bits per pixel) of the screen
    width Returns the total width of the screen

    15
    <html>
    <body>
    <h3>Your Screen:</h3>
    <div id="demo"></div>
    <script>
    var txt = "";
    txt += "<p>Total width/height: " + screen.width + "*" + screen.height + "</p>";
    txt += "<p>Available width/height: " + screen.availWidth + "*" + screen.availHeight +
    "</p>";
    txt += "<p>Color depth: " + screen.colorDepth + "</p>";
    txt += "<p>Color resolution: " + screen.pixelDepth + "</p>";
    document.getElementById("demo").innerHTML = txt;
    </script>
    </body>
    </html>

    16

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy