Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

The JavaScript window object has quite a few properties and methods, but beware because many of them are not supported in all major browsers. However, the information you can obtain using the window object can be extremely important depending on what you want to do. For example, maybe for some reason you want to know the size of the user's window. Using the window object is the primary way you would get this information.

The JavaScript window object isn't used very often, but it is quite powerful. For example, one of the window object's methods is a print(). So, you could create a button on the page that would trigger an event that called the window.print() rather than the user having to search in the browser for the hidden print option. One cool distinction about the window that you may notice is that you can directly type something like alert() and not window.alert() and JavaScript will completely know what you are talking about. That is because window is the primary object of a browser, which means you don't need to declare it before the method unlike the other objects.

Common Window Object Properties

innerHeight - gets or sets the inner height of the actual content area

Example document.write(window.innerHeight);
Result
473

innerWidth - gets or sets the inner width of the actual content area

Example document.write(window.innerWidth);
Result
662

navigator - we discuss this in the Navigator Object tutorial

outerHeight - gets or sets the outer height of a window (This includes tabs, toolbars, and scrollbars)

Example document.write(window.outerHeight);
Result
728

outerWidth - gets or sets the outer width of a window (This includes tabs, toolbars, and scrollbars)

Example document.write(window.outerWidth);
Result
680

Common Window Object Methods

alert() - shows an annoying alert box (Please never use this)

print() - prints the window's contents (Many users don't know how to print a web page. Make it easy for them.)

Example function exampleFunction3()
{
window.print();
}
<input name="" type="button" onclick="exampleFunction3()" value="I Print"/>
Result

scrollTo() - scrolls to specified x and y coordinates

Example function exampleFunction4()
{
window.scroll(0,30)
}
</script>
<input name="" type="button" onclick="exampleFunction4()" value="I Scroll"/>
Result

Timers

Timers are a method of the window object. They can be very tricky, but often very useful when dealing with a variety of issues. While a good amount of timers are used correctly, JQuery's animate can often do your job much more efficiently. Please be sure to check out a few of JQuery's functions before using timers.

Example var timeoutTimer=setTimeout("alert('10 seconds!')",30000);// This fires once
var intervalTimer=self.setInterval("intervalTimerFunction()",10000); // This fires every 10 seconds
function intervalTimerFunction() // intervalTimer calls this function
{
alert('intervalTimer timer happened');
}
<input name="" type="button" onclick="clearTimeout(timeoutTimer)" value="Stop timeoutTimer"/>
<input name="" type="button" onclick="clearInterval(intervalTimer)" value="Stop intervalTimer"/>

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments

No comments yet... Be the first!



Advertisement