DOM window IN JavaScript

JavaScript Tutorial / By
Window is the top most level object in the JavaScript hierarchy as we saw in DOM topic, window object represents a browser window. Every <body> tag creates an window object. As we know that an object can have properties and methods or functions. Window object have man properties and methods listed below to know about any property click on that property.
 
Properties:
 
document
History
Location
Name
closed
toolbar
scrollbars
 
Methods
 
Open()
print()
alert()
confirm()
close()
moveTo()
prompt()
 
 
Properties
Name
 
This window property is used to set or get the name of the window in use. When we are working with many windows it becomes very necessary to know the name of the window we are working with. The below given example shows how to get the name of the window in use.
 
Example:
 
<html>

<head>

<script>

function nm()

{

document.write(“<br> Current Window Name is : “+win.name)

}

</script>

</head>

<body><script>

win=window.open(”,’Sandeep’,’width=150,height=150′)

win.document.write(“This is a new window created by sandeep , it’s name is sandeep, move the window & click on the button “)

</script><input type=”button” value=”Hit me to know name of window” onclick=”nm()”></body>

</html>
Click here to view result of this program on browser
 
 
Closed
 
This window property is used to know whether the specified window is closed or not many times a processing is to be done but before that it becomes necessary to check whether the page is open or not we can use this window property to know the status of the window. The below given example shows how to get the status of the window in use.
 
Example:
 
<html>

<head>

<script>

function nm()

{

if (win.closed)

{

document.write(“<br> Sorry.. The window has been closed”)

}

else

{

document.write(“<br> The window is open enjoy.. it”)

}

}

</script>

</head>

<body><script>

win=window.open(”,’Sandeep’,’width=150,height=150′)

win.document.write(“This is a new window created by sandeep , it’s name is sandeep, move the window & click on the button “)

</script><input type=”button” value=”Hit me to know name of window” onclick=”nm()”></body>

</html>
Click here to view result of this program on browser
 
 
Toolbar
 
This window property is used to add the toolbar to the window at the time of creation of window , Standard toolbar appears which can be used to move forward or back , go or refresh etc. properties of the toolbar could be accessed. The below given example shows how to set the toolbar to the window.
 
Example:
 
<html>

<head>

</head>

<body>

<script>

win=window.open(”,’Sandeep’,’width=450,height=350,toolbar’)

win.document.write(“This is a new window created by sandeep , it’s name is sandeep, move the window & click on the button “)

</script>

</body>

</html>
Click here to view result of this program on browser
 
 
Scrollbars
 
This window property is used to add the scrollbars to the window at the time of creation of window , scrollbars are used to move up or down on the page having matter more than the window size. The below given example shows how to set the scrollbars to the window.
 
Example:
 
<html>

<head>

</head>

<body>

<script>

win=window.open(”,’Sandeep’,’width=450,height=350,toolbar,scrollbars’)

win.document.write(“This is a new window created by sandeep , it’s name is sandeep, move the window & click on the button “)

</script>

</body>

</html>
Click here to view result of this program on browser
 
 
Methods
Open()
 
This window method is used to open the specified window. Using this method we can open any window from code as and when required. The below given example shows how to open a window using JavaScript code.
 
Example:
 
<html>

<head>

</head>

<body>

<script>

var i=0

var winname=”sandeep”

for(i=0;i<5;i++)

{

winname=winname+i

win=window.open(”,”+winname,’width=450,height=350,toolbar,scrollbars’)

win.document.write(“This is a new window created by sandeep , it’s name is sandeep, move the window & click on the button “)

}

</script>

</body>

</html>
Click here to view result of this program on browser
 
 
print()
 
This window method is used to print the specified window contents on printer. We can activate the printer control panel using this method and set desired print settings. The below given example shows how to print a widow contents.
 
Example:
 
<html>

<head>

<script>

function ff()

{

window.print()

}

</script>

</head>

<body>

<input type=button name=b1 value= “hit me to print the page ” onclick=”ff()”>

<script>

win=window.open(”,’Sandeep’,’width=450,height=350,toolbar’)

win.document.write(“This is a new window created by sandeep , it’s name is sandeep, move the window & click on the button “)

</script>

</body>

</html>
Click here to view result of this program on browser
 
 
Alert Box
 
Alert box is a dialog box which displays a message in a small window with an OK button, user have to click on the ok button to proceed.
 
Example:
 
<html>

<head>

</head>

<body>

<script type=”text/JavaScript”>

alert(“Hit me to proceed”)

document.write(” Have a nice day “);

</script >

</body>

</html>
 
Understanding the program:
user can type his desired message with the alert box in the quotes like alert(“what ever text user want “). This message will be displayed with the alert window to guide the user.
 
output is:
Have a nice day
Click here to view result of this program on browser
 
 
Confirm Box
 
Confirm box is a dialog box which displays a message in a small window with two buttons. One Ok and other Cancel. This method can be used to get the response of user in positive by clicking on ok and in negative by clicking on cancel. The value returned by the confirm method in case of OK is true and in case of Cancel is false. A programmer can program the code for positive and negative situations depending on the response returned by the user.
 
Example:
 
<html>

<head>

</head>

<body>

<script type=”text/JavaScript”>

a=confirm(” Want to Proceed ? “);

document.write(“Your have clicked on : “+a);

</script >

</body>

</html>
 
understanding the program:
If user will clicks on Ok then you have clicked on true will appear
If user will clicks on Cancel then you have clicked on false will appear
Click here to view result of this program on browser
 
 
Close
 
This window method is used to close the specified window. Using this method we can closed any window from code as and when required. The below given example shows how to close a window after clicking on a button.
 
Example:
 
<html>

<head>

<script>

function ff()

{

win.close()

}

</script>

</head>

<body>

<input type=button name=b1 value= “hit me to Close the window ” onclick=”ff()”>

<script>

win=window.open(”,’Sandeep’,’width=450,height=350,toolbar’)

win.document.write(“This is a new window created by sandeep , it’s name is sandeep, move the window & click on the button “)

</script>

</body>

</html>
Click here to view result of this program on browser
 
 
moveTo()
 
This window method is used to move the specified window to desired location on screen. The two parameter s are passed with this function one for x coordinate and other for y coordinate. Using this method we can position window to our desired position using code. The below given example shows how to position a window using JavaScript code.
 
Example:
 
<html>

<head>

</head>

<body>

<script>

var i=0

var winname=”sandeep”

for(i=0;i<5;i++)

{

winname=winname+i

win=window.open(”,”+winname,’width=450,height=350,toolbar,scrollbars’)

win.document.write(“This is a new window created by sandeep , it’s name is sandeep, move the window & click on the button “)

}

</script>

</body>

</html>
Click here to view result of this program on browser
 
 
Prompt Box
 
Prompt box is a dialog box which displays a message in a small window with a text box along with two buttons . One OK and other Cancel. Prompt method has ability to return the text kept with the prompt method’s text box , this value can be assigned to some variable and can be used as and when require.
 
Example:
 
<html>

<head>

</head>

<body>

<script type=”text/JavaScript”>

prompt (“Enter your name”, “”)

</script >

</body>

</html>
 
understanding the program :
A dialog box with a text box and two buttons will appear, the message typed with prompt method will be displayed on the dialog box the text box will appear blank , if any text is typed at the place of blank (“ ”), that text will appear in the text box on dialog box.
 
Click here to view result of this program on browser
 
Example
 
<html>

<head>

</head>

<body>

<script type=”text/javascript”>

prompt (“Enter your name”, ” enter your name here”)

</script >

</body>

</html>
 
understanding the program :
A dialog box with a text box and two buttons will appear, the message typed with prompt method will be displayed on the dialog box the text box will appear filled with “ enter your name here “ text.
Click here to view result of this program on browser
 
Storing value accepted from a prompt box in variables :
 
<html>

<head>

</head>

<body>

<script type=”text/javascript”>

var name,address

name=prompt (“Enter your name”, ” enter your name here”)

address = prompt (“Enter your address”, “Address Please “)

document.write(“Your Name : “+name);

document.write(“<br>Your Address : “+address);

</script >

</body>

</html>
 
understanding program :
As we know that prompt method has the ability to return the text stored in it’s text box, so the name fed by the user will be stored in the name variable and address of user in address variable, which will be displayed on the screen by document.write method.
 
Output is :
Your Name : Rhythm
Your Address : A -45, Preet Vihar, Delhi – 110092
Scroll to Top