Advertisement

Advertisement


JavaScript Browser Object Model

The Browser Object Model (BOM) is a way to interact with browser. It deals with browser components aside from the document, like history, location, navigator, frame and screen.

The default object is window i.e. it is not necessary to use window object with function, the browser automatically uses it.

For example:
Syntax
window.prompt("hello coderepublics");
It is same as :
prompt("hello coderepublics");

Window Object

If a window is open in a browser then browser uses a window object to represent that window. Every opened window/frame/dialog box has a window object. It is created automatically by the browser.

Window Object Methods

Property Description
alert() It displays the alert box.
confirm() It displays a confirm dialog box.
prompt() It displays a dialog box.
setTimeout() It performs action after a specified time.
open() It opens the new window.
close() It closes the window.

We'll learn about the dialog boxes later. Below are some examples of other functions.


JavaScript open() Method

It displays the content in a new window.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Object Open() Method </title>
</head>
<body>
<script type="text/javascript">
function msg(){
open("http://www.coderepublics.com");
}
</script>
<input type="button" value="CodeRepublics" onclick="msg()"/>
</body>
</html>

Output

JavaScript Object Open() Method

JavaScript setTimeout() Method

It performs any given task after some specified time interval.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Object setTimeout Method </title>
</head>
<body>
<script>
function msg(){
setTimeout(
function(){
alert("Alert after 5 seconds")
},5000);
}
</script>
<input type="button" value="Click Here !" onclick="msg()"/>
</body>
</html>

Output

JavaScript Object setTimeout Method

Width and Height Properties Of Window Object

The innerWidth and innerHeight property is used to find out the width and height of any browser window.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Viewport Dimension </title>
</head>
<body>
<script>
function windowSize(){
var w = window.innerWidth;
var h = window.innerHeight;
alert("Width: " + w + ", " + "Height: " + h);
}
</script>
<button type="button" onclick="windowSize();">Get Window Size</button>
</body>
</html>

Output

JavaScript Viewport Dimension

The width and height of any element can also be calculated by clientWidth and clientHeight but this length will be excluding the scrollbars(if any) unlike previous ones which includes the scrollbar length too.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Viewport Dimension </title>
</head>
<body>
<script>
function windowSize(){
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
alert("Width: " + w + ", " + "Height: " + h);
}
</script>
<button type="button" onclick="windowSize();">Get Window Size</button>
</body>
</html>

Output

JavaScript Viewport Dimension









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.