Scribd
Upload
504 views16 pages

Javascript: Bom and Dom

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.

Uploaded by

justadityabist
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
504 views16 pages

Javascript: Bom and Dom

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.

Uploaded by

justadityabist
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/ 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