Window Object

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

Result

473

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

Example

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

Result

728

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

Example

Result

680

Common Window Object Methods

alert() – shows an annoying alert box

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

Example

Result

scrollTo() – scrolls to specified x and y coordinates

Example

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

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on Google+
Google+
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.