Window Object

The window object represents a Web browser window. It has several properties and methods, which helps us to extract information about the Web browser and enhance our web pages.


Property


Property Description
closed A boolean value tells us whether the window has been closed
defaultStatus The text that appears on the status bar
document A reference to the document object
history A reference to the history object
location A reference to the location object
navigator A reference to the navigator object
opener Refers to the window that opened the current window
screen.availWidth Returns the available width of the browser window
screen.availHeight Returns the available height of the browser window
window A reference to the current window object



Examples

<script>:
//screen available width and height
var sw=window.screen.availWidth;
var sh=window.screen.availHeight;
document.write("screen w:"+ sw);
document.write("screen h:"+ sh);
</script>

Displays





//defaultStatus on status bar
window.defaultStatus="Look at the status bar!";
</script>

Displays





Method


Method Description
alert() Shows a pop up message
back() Takes you back to the previous window
blur() Removes the focus from a window
clearInterval() Cancels the timer set with the setInterval()
clearTimeout() Cancels the timer set with the setTimeout()
close() Closes the browsers window
confirm() A dialogue box is displayed, which allows the user to click the OK button or Cancel button
forward() Moves forward one window
open() Opens a new browser window
print() Pints the content shown on the window
prompt() A prompt dialogue box is displayed, which allows the user to input data
setInterval() Calls a function each time the specified time (millisecond) passes
setTimeout() Calls a function after a specified time (millisecond) has passed



Examples


alert()

<script>
<form>
<input type="button" value="click me"
onclick="javascript:windows.alert('hello');"/>
</form>
</script>

Displays




confirm()

<script>:
<head>
function confirmation()
{
var answer = confirm("Do you want to learn html5?")

if (answer)
{
window.open = "../html/html5";
}
else
{
alert("Bye Bye!")
}
}
</script>
</head>

<body>
<form>
<input type="button" onclick="confirmation()"
value="confirm"/>
</form>
</body>

Displays





prompt()

<script>:
<head>
function number()
{
var number=prompt("enter a number", "");
alert("You have entered : " + number );
}
</script>
</head>

<body>
<form>
<input type="button" onclick="number()"
value="Enter Number"/>
</form>
</body>

Displays





print()

<form>
<input type="button" value="Print"
onclick="print();"/>
</form>

Displays



open()

The open() method requires three string arguments. The first argument is the URL address, the second argument is a name for the window and the third argument contains a list of features (see the table below).

Features Description Values
height Sets the windows height in pixels
left Sets the x coordinate of the window in pixels
resizable Allows the window to be resized yes/no
scrollbars Adds the scrolbars yes/no
status Adds the status bar yes/no
toolbar Adds the Forward and Back buttons bar yes/no
top Sets the y coordinate of the window in pixels
width Sets the windows width in pixels



You can also use the values "1" for yes and "2" for no.

<form>
<input type="button" value="Open Form"
onclick="open('forms.html','name','width=500, height=400, resizable=yes')"/>
</form>

Displays



Location

The window object has a property called location, which refers to the location object. The location object is the child of the window object.

The location displays the full URL address of the document that is currently loaded in the browser window.


<body>
<input type="button" value="Location"
onclick="alert(location.href)"/>
</body>

Displays



If you click the button it will take you to the top of this web page.

<form>
<input type="button" value="Go to Top" onclick="location='#top';"/>
</form>

Displays




History

The history object stores a list of history of all the pages that have been visited in the current session. The history object is the child of the window object.

The example below shows the methods: back(), forward() and go(). The go() method takes an integer as a parameter - a positive number goes forward and a negative number goes backwards.

Inside the parentheses you can enter the number of pages you want to go back or forward.


//methods: back(), forward() and go()

<form>
<input type="button" value="Back"
onclick="history.back();"/>

<input type="button" value="Forward"
onclick="history.forward();"/>

// go back 2 pages
<input type="button" value="Go"
onclick="history.go(-2);"/>






Displays



The history object has a propety called length, it returns the number of URLs that are in the history list.


<script>
document.write("History list is:");
document.write(history.length);
</script>

Displays




Navigator

The navigator object contains the information about the current Web browser. The navigator object is the child of the window object.

It has several properties and methods but we are only going to look at the appCodeName property and the javaEnable() method.

The appCodeName property gives us the code name of the browser.

The javaEnable() method allows us to check if the java has been enabled in the browser; it returns a boolean value true.


<form>
//property: appCodeName
<input type="button" value="Browser" onclick="window.alert('Code name of browser is: '+ navigator.appCodeName);"/>

//method:javaEnabled
<input type="button" value="Java Enabled" onclick="window.alert('Enabled=' + navigator.javaEnabled());"/>
</form>


Displays






Screen

The screen object provides information about the user's monitor resolution and the size of the display. The screen object is also the child of the window object.


Property

   Property Description
availHeight Returns the available height of the display screen - excludes the desktop task bar
availWidth Returns the available width of the display screen - excludes the desktop task bar
colorDepth Returns the bit value of the ranges of colors that can be displayed
height Returns the height of the display screen
width Returns the width of the display screen


<script>
var asw=screen.availWidth;
var ash=screen.availHeight;
var w=screen.width:
var h=screen.height;

document.write("Available screen size:" + asw +"x" + ash);

document.write("Full screen size:");
document.write(w + "x" + h);

document.write("Screen colour:" + screen.colorDepth);
</script>



Displays




Document Object

The document object is also a child of the window object. It provides access to the HTML document. The document object has so many properties and methods but we are only going to look at the property innerHTML and a few of the methods.


Property:innerHTML

The innerHTML property is used when you want to change or insert content inside an HTML element.

<script>
function change()
{
document.getElementById("text").innerHTML="Tomorrow, I am going to the circus to see the clowns.";
document.getElementById("picture").innerHTML=img src="images/star.jpg;
}
</script>

</body>
<p>
<span id="text"> Today, I saw a big lion at the zoo.</span>
<span id="picture"></span>
</p>

<input type="button" value="click me" onclick="change()"/>


Displays

Today, I saw a big lion at the zoo.





Method

Method Description
getElementById(id) Returns the first element that is represented by the id
getElementByClassName(class name) Returns references to the elements with the class name
getElementByName(name) Returns a collection of elements represented by the name
getElementByTagName(tag name) Returns a collection of elements represented by the tag name
write() The write method is used when you want to write text in a HTML document
writeln() The writeln method writes text in a HTML document and adds a new line after each statement



Examples


getElementById()

<script>
function getId()
{
document.getElementById("say").innerHTML="hello";
}
</script>

<body>
<p id="say"></p>
<input type="button" value="click me" onclick=
"getId()"/>
</body>

Displays





getElementByClassName()

<script>
function getClassName()
{
var i;
for(i=0; i<=2;i++)
{
document.getElementsByClassName("news")[i].innerHTML
="(class name:[" + [i] + "])";
}
}
</script>
<body>
<p class="news"></p>
<p class="news"></p>
<p class="news"></p>
<input type="button" value="click me"
onclick="getElement()"/>

Displays





getElementByTagName()

<script>
function getTagName()
{
var header=document.getElementsByTagName("h3");
for(i=0; i<=3 i++)
{
header[i].innerHTML="h3 index " + i;
}
}
</script>

<body>
<h3>one</h3>
<h3>two</h3>
<h3>three</h3>
<h3>four</h3>
<input type="button" value= "click me" onclick=
"getTagName()";/>
</body>

Displays

one

two

three

four





getElementByName()

<input type="radio" value="tea" name="box" checked="true"/>Tea
<input type="radio" value="coffee" name="box" />Coffee
<input type="radio" value="chocolate" name="box"/>Hot Chocolate

<input type="button" value= "click me" onclick="alert('The element is:<'+ document.getElementsByName('box')[2].tagName +'>');"/>


Displays

Tea Coffee Hot Chocolate





Now do the Exercise!