02. The Window Object

The window object represents the current open window on a browser.

Properties

The window object has a slew of properties that can tell you (the programmer) about its properties. Skim through these properties and try clicking on their names to see output in the JavaScript console.

closed
Returns True if window is closed.
defaultStatus
Set the text on the status bar.
innerHeight
The inner height of the page (not including toolbar, other tabs, etc).
innerWidth
The inner width (excludes toolbar, other tabs, etc.).
outerHeight
The outer height of a window (including toolbar, other tabs, etc).
outerWidth
The outer width of a window.
location
Window's current URL.
name
Name of the window.
parent
Used with frames to refer to the window that created a particular window or is one level up from the frame.
parent
Reference to the window that the current window came from.
pageXOffset
The number of pixels user has scrolled horizontally from the upper-left corner of document.
pageYOffset
The number of pixels the user has been scrolled vertically.
screenX
Horizontal coordinate of the window relative to the screen.
screenY
Vertical coordinate of the window relative to the screen.
top
The top-most parent window.

Some properties such as top and parent return a reference to another window object.

Additionally, you can access its child elements - document document, frames, history, andnavigator. We'll cover this in the next lesson.

Methods

window contains a good number of methods. In fact, we have already looked at one of them - alert(), which outputs an popup dialog message to the user.

Some of these methods require a parameters, so Google the methods if you want to see exactly how a method works.

alert()
Opens a popup window. User must click OK to close.
prompt()
Prompts user for an input
open()
Opens new browser window with specified URL.
close()
Closes window.
print()
Opens print dialog.

Moving a window object

There are also functions you can use to move the window object.

moveBy()
Move the window relative.
moveTo()
Moves the window to a specific location.
resizeBy()
Change size of window relative to current size.
resizeTo()
Change size of window to specified size.

Build modern and responsive webpages

HTML & CSS

Build modern and responsive webpages Try Front-end

This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.

$ Check price
29.9929.99Amazon 4.5 logo(926+ reviews)

More Front-end resources

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Ad