Scribd
Upload
83 views

Browser Object Model

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.

Uploaded by

suchita
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
83 views

Browser Object Model

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.

Uploaded by

suchita
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 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