The window object (Video Version)

Another fun way to use JavaScript on

web pages is to animate properties over

time. Before we can do that however, I

need to make sure that you know about

another global variable that is available

on every web page, the window

variable. Here, I will

console.log(window) and you can

pause, check out your dev tools and see

what's inside it.

Did you see? It is huge. It contains so

much, it is overwhelming. To make it a

little less overwhelming I will tell you

some of my favorite properties and methods

that you can access on it.

There is window.location which has

a bunch of information about the URL of

the page. Actually, let's go and just

write that out to the page so that you

don't have to keep pausing. So

textContent += "The URL of this page

is " + window.location and then that's

an object, so we need to reach inside and

say .href and there you go. That's

actually the URL of the iFramed web page

on this side.

Another property, is window.navigator.userAgent

which tells you about the browser of

the user. Say "The user agent is " +

window.navigator.userAgent;. Okay,

that userAgent string probably looks

pretty crazy to you. It's not really meant

to be human readable and it doesn't

always make a lot of sense for historical

reasons. So, most web developers use

libraries to actually understand what that

string means and what browser they're on,

and what OS and all that, because it is

very weird. Here is one that's not so

weird, window.outerWidth and window.outerHeight.

So let's say, "This web page is " +

window.outerWidth + " by " + window.outerHeight;

To me it says, 1280 by 715, but maybe it

says something different to you depending

on what your page looks like when you are

viewing this talk-through.

Now, let me show you something a little

surprising. I'm going to delete, the

window part of this line of code.

What happens is that it still works, that

is because window is the default

global variable on web pages. When the

browser looks for a variable that you use,

it will look for it on the window

object. And when you create a new global

variable, the window object will

actually store it as a property. That

means you should not declare your own

variables named outerWidth and outerHeight

because then they'll override window.outerWidth

and window.outHeight. Generally,

you should avoid global variables all

together since it is so easy for them to

collide with each other or existing variables

on the window. To be extra safe, you

can prefix your global variables. Like at

Khan Academy, we write KA_ in front

of any global variables that we have to have.

Okay, so that's the window object,

now we are going to see how you can use

two functions on it to make animations.