Most Popular Tutorials
-
What is Javascript
-
BOM (Browser object model)
-
DOM (Document object model)
-
Variable
-
Variable is empty or Not
-
Javascript output
-
Function
-
Events
-
Array
-
Get text value
-
Get Form field value
-
Pattern validation
-
Form validation
-
Checkbox validation
-
Inner Html form validation
-
Form validation on php server
-
Window and window location
-
Get Text Value
-
get javascript value in php
-
Date Format
-
Get php variable in javascript
-
Redirect page in javascript
-
Auto Refresh page and DIV
-
Get text value from dropdown
-
Clear Browser History
-
Get Checkbox value
-
select (Dropdown)
-
PopUp Contact Form
-
sidebar contact form
-
Show modal on page load
-
Auto calculate price GST
-
print html and Div content
-
Calculate Discount prince
-
Checked single or all checkbox
-
Auto Fill form data on click checkbox
-
Show subcategory (Dependent Dropdown)
-
country, state, city (Dependent Dropdown)
-
Image upload with preview image
-
Filter table data
-
Character Limit Validation
-
uploading file size validation
-
Special Character validation
-
multiple file upload (Add more)
-
function call after page load
-
Disable Submit Button After Form Submission
-
disable browser back button
-
Remove selected item from second & third dropdown list
-
Interview Question
-
Active Tab Menu
-
String methods
Most Popular Tutorials :-
Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List
What is BOM (Browser object model)?
Browser Object Model
The BOM consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM, the document object model, which represents the contents of the page. You can manipulate it using javascript.
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 itechtuto");
is same as:
alert("hello itechtuto");
You can use a lot of properties (other objects) defined underneath the window object like document, history, screen, navigator, location, innerHeight, innerWidth,
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 itechtuto");
is same as:
alert("hello itechtuto");
You can use a lot of properties (other objects) defined underneath the window object like document, history, screen, navigator, location, innerHeight, innerWidth,
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:
Method Description
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.
Example of alert() in javascript
It displays alert dialog box. It has message and ok button.
<script type="text/javascript">
function msg(){
alert("Hello Alert Box");
}
</script>
<input type="button" value="click" onclick="msg()"/>
Example of confirm() in javascript
It displays the confirm dialog box. It has message with ok and cancel buttons.
<script type="text/javascript">
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
Example of prompt() in javascript
It displays prompt dialog box for input. It has message and textfield.
Example of open() in javascript
It displays the content in a new window.
<script type="text/javascript">
function msg(){
open("http://www.itechtuto.com");
}
</script>
<input type="button" value="itechtuto" onclick="msg()"/>
Example of setTimeout() in javascript
It performs its task after the given milliseconds.
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to itechtuto after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
JavaScript History 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.
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:
Method Description
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.
Example of alert() in javascript
It displays alert dialog box. It has message and ok button.
<script type="text/javascript">
function msg(){
alert("Hello Alert Box");
}
</script>
<input type="button" value="click" onclick="msg()"/>
Example of confirm() in javascript
It displays the confirm dialog box. It has message with ok and cancel buttons.
<script type="text/javascript">
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
Example of prompt() in javascript
It displays prompt dialog box for input. It has message and textfield.
Example of open() in javascript
It displays the content in a new window.
<script type="text/javascript">
function msg(){
open("http://www.itechtuto.com");
}
</script>
<input type="button" value="itechtuto" onclick="msg()"/>
Example of setTimeout() in javascript
It performs its task after the given milliseconds.
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to itechtuto after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
JavaScript History Object
The important methods of window object are as follows:
Method Description
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.
Method Description
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.
Example of alert() in javascript
It displays alert dialog box. It has message and ok button.
<script type="text/javascript">
function msg(){
alert("Hello Alert Box");
}
</script>
<input type="button" value="click" onclick="msg()"/>
Example of confirm() in javascript
It displays the confirm dialog box. It has message with ok and cancel buttons.
<script type="text/javascript">
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
Example of prompt() in javascript
It displays prompt dialog box for input. It has message and textfield.
Example of open() in javascript
It displays the content in a new window.
<script type="text/javascript">
function msg(){
open("http://www.itechtuto.com");
}
</script>
<input type="button" value="itechtuto" onclick="msg()"/>
Example of setTimeout() in javascript
It performs its task after the given milliseconds.
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to itechtuto after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
JavaScript History Object
It displays alert dialog box. It has message and ok button.
<script type="text/javascript">
function msg(){
alert("Hello Alert Box");
}
</script>
<input type="button" value="click" onclick="msg()"/>
<script type="text/javascript">
function msg(){
alert("Hello Alert Box");
}
</script>
<input type="button" value="click" onclick="msg()"/>
Example of confirm() in javascript
It displays the confirm dialog box. It has message with ok and cancel buttons.
<script type="text/javascript">
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
Example of prompt() in javascript
It displays prompt dialog box for input. It has message and textfield.
Example of open() in javascript
It displays the content in a new window.
<script type="text/javascript">
function msg(){
open("http://www.itechtuto.com");
}
</script>
<input type="button" value="itechtuto" onclick="msg()"/>
Example of setTimeout() in javascript
It performs its task after the given milliseconds.
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to itechtuto after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
JavaScript History Object
It displays the confirm dialog box. It has message with ok and cancel buttons.
<script type="text/javascript">
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
<script type="text/javascript">
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
Example of prompt() in javascript
It displays prompt dialog box for input. It has message and textfield.
Example of open() in javascript
It displays the content in a new window.
<script type="text/javascript">
function msg(){
open("http://www.itechtuto.com");
}
</script>
<input type="button" value="itechtuto" onclick="msg()"/>
Example of setTimeout() in javascript
It performs its task after the given milliseconds.
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to itechtuto after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
JavaScript History Object
It displays prompt dialog box for input. It has message and textfield.
Example of open() in javascript
It displays the content in a new window.
<script type="text/javascript">
function msg(){
open("http://www.itechtuto.com");
}
</script>
<input type="button" value="itechtuto" onclick="msg()"/>
Example of setTimeout() in javascript
It performs its task after the given milliseconds.
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to itechtuto after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
JavaScript History Object
It displays the content in a new window.
<script type="text/javascript">
function msg(){
open("http://www.itechtuto.com");
}
</script>
<input type="button" value="itechtuto" onclick="msg()"/>
<script type="text/javascript">
function msg(){
open("http://www.itechtuto.com");
}
</script>
<input type="button" value="itechtuto" onclick="msg()"/>
Example of setTimeout() in javascript
It performs its task after the given milliseconds.
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to itechtuto after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
JavaScript History Object
It performs its task after the given milliseconds.
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to itechtuto after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
<script type="text/javascript">
function msg(){
setTimeout(
function(){
alert("Welcome to itechtuto after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
JavaScript History Object
This function will accept an integer or a string. If an integer is used, the browser will go forward or back (if the value is negative) the number of specified pages in the history object (if the requested entry exists in the history object). The following example will move the browser back one page.
The history object contains the URLs visited by the user (within a browser window). The history object is part of the window object and is accessed through the window.history property.
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
window.history
Or
history
The JavaScript History Object is property of the window object.
Properties
Example of history object
Let’s see the different usage 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
Example
Example of history object
Let’s see the different usage 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
Example
Let’s see the different usage 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
history.back();//for previous page
history.forward();//for next page
history.go(2);//for next 2nd page
history.go(-2);//for previous 2nd page
Example
File name : index.php
back() - Go to the previous URL entry in the history list. This does the same thing as the browser back button. The following HTML code creates a back button:
File name : index.php
forward()- Go to the next URL entry in the history list. This does the same thing as the browser forward button. This is only effective when there is a next document in the history list. The back function or browser back button must have previously been used for this function to work. The following HTML code creates a forward button:
File name : index.php
go(relPos | string) - This function will accept an integer or a string. If an integer is used, the browser will go forward or back (if the value is negative) the number of specified pages in the history object (if the requested entry exists in the history object). The following example will move the browser back one page.
JavaScript Screen Object
File name : index.php
The JavaScript screen object holds information of browser screen. It can be used to display screen width, height, colorDepth, pixelDepth etc.
The navigator object is the window property, so it can be accessed by:
window.screen
Or,
screen
The navigator object is the window property, so it can be accessed by:
window.screen
Or,
screen
Property of JavaScript Screen Object
There are many properties of screen object that returns information of the browser.
File name : index.php
No. Property Description
1 width returns the width of the screen
2 height returns the height of the screen
3 availWidth returns the available width
4 availHeight returns the available height
5 colorDepth returns the color depth
6 pixelDepth returns the pixel depth.
1 width returns the width of the screen
2 height returns the height of the screen
3 availWidth returns the available width
4 availHeight returns the available height
5 colorDepth returns the color depth
6 pixelDepth returns the pixel depth.
Example of JavaScript Screen Object
File name : index.php
Let’s see the different usage of screen object.
<script>
document.writeln("<br/>screen.width: "+screen.width);
document.writeln("<br/>screen.height: "+screen.height);
document.writeln("<br/>screen.availWidth: "+screen.availWidth);
document.writeln("<br/>screen.availHeight: "+screen.availHeight);
document.writeln("<br/>screen.colorDepth: "+screen.colorDepth);
document.writeln("<br/>screen.pixelDepth: "+screen.pixelDepth);
</script>
Previous Next
Trending Tutorials
Review & Rating
0.0 / 5
0 Review
5
(0)
4
(0)
3
(0)
2
(0)
1
(0)
Write Review Here
Most Popular Tutorials
-
Get Text Value
-
Array
-
Remove selected item from second & third dropdown list
-
Form validation
-
Events
-
Special Character validation
-
Auto Fill form data on click checkbox
-
Function
-
disable browser back button
-
Variable
-
Window and window location
-
Disable Submit Button After Form Submission
-
Get Checkbox value
-
Clear Browser History
-
Checked single or all checkbox
-
function call after page load
-
DOM (Document object model)
-
PopUp Contact Form
-
String methods
-
select (Dropdown)
Important Link
-
How to manage Session in php Tutorials.
More ....... -
upcomming codeigniter and angular js tutorials.
Click here to see More ...
