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 <i>window</i>

variable. Here, I will

<i>console.log(window)<i> and you can</i></i>

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 <i>window.location</i> 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

<i>textContent += "The URL of this page</i>

<i>is " + window.location</i> and then that's

an object, so we need to reach inside and

say <i>.href</i> and there you go. That's

actually the URL of the iFramed web page

on this side.

Another property, is <i>window.navigator.userAgent</i>

which tells you about the browser of

the user. Say <i>"The user agent is " +</i>

<i>window.navigator.userAgent;</i>. Okay,

that <i>userAgent</i> 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, <i>window.outerWidth</i> and <i>window.outerHeight</i>.

So let's say, <i>"This web page is " +</i>

<i>window.outerWidth + " by " + window.outerHeight;</i>

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

<i>window</i> part of this line of code.

What happens is that it still works, that

is because <i>window</i> 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 <i>window</i>

object. And when you create a new global

variable, the <i>window</i> object will

actually store it as a property. That

means you should not declare your own

variables named <i>outerWidth and outerHeight</i>

because then they'll override <i>window.outerWidth</i>

and <i>window.outHeight</i>. 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 <i>window</i>. To be extra safe, you

can prefix your global variables. Like at

Khan Academy, we write <i>KA_</i> in front

of any global variables that we have to have.

Okay, so that's the <i>window</i> object,

now we are going to see how you can use

two functions on it to make animations.