WEBVTT

00:00:01.095 --> 00:00:02.997
Another fun way to use JavaScript on

00:00:02.997 --> 00:00:05.620
web pages is to animate properties over

00:00:05.620 --> 00:00:08.830
time. Before we can do that however, I

00:00:08.837 --> 00:00:10.379
need to make sure that you know about

00:00:10.379 --> 00:00:12.032
another global variable that is available

00:00:12.032 --> 00:00:14.934
on every web page, the <i>window</i>

00:00:14.934 --> 00:00:18.334
variable. Here, I will

00:00:18.334 --> 00:00:20.978
<i>console.log(window)<i> and you can</i></i>

00:00:20.978 --> 00:00:23.145
pause, check out your dev tools and see

00:00:23.145 --> 00:00:24.897
what's inside it.

00:00:26.887 --> 00:00:30.643
Did you see? It is huge. It contains so

00:00:30.643 --> 00:00:34.113
much, it is overwhelming. To make it a

00:00:34.113 --> 00:00:36.519
little less overwhelming I will tell you

00:00:36.519 --> 00:00:38.436
some of my favorite properties and methods

00:00:38.436 --> 00:00:40.675
that you can access on it.

00:00:40.675 --> 00:00:44.184
There is <i>window.location</i> which has

00:00:44.184 --> 00:00:46.194
a bunch of information about the URL of

00:00:46.194 --> 00:00:50.132
the page. Actually, let's go and just

00:00:50.132 --> 00:00:52.082
write that out to the page so that you

00:00:52.082 --> 00:00:55.145
don't have to keep pausing. So

00:00:55.145 --> 00:00:59.995
<i>textContent += "The URL of this page</i>

00:00:59.995 --> 00:01:04.097
<i>is " + window.location</i> and then that's

00:01:04.097 --> 00:01:06.803
an object, so we need to reach inside and

00:01:06.803 --> 00:01:09.460
say <i>.href</i> and there you go. That's

00:01:09.460 --> 00:01:12.608
actually the URL of the iFramed web page

00:01:12.608 --> 00:01:14.887
on this side.

00:01:14.887 --> 00:01:18.466
Another property, is <i>window.navigator.userAgent</i>

00:01:18.466 --> 00:01:21.675
which tells you about the browser of

00:01:21.675 --> 00:01:28.308
the user. Say <i>"The user agent is " +</i>

00:01:28.308 --> 00:01:33.653
<i>window.navigator.userAgent;</i>. Okay,

00:01:33.653 --> 00:01:36.972
that <i>userAgent</i> string probably looks

00:01:36.972 --> 00:01:40.339
pretty crazy to you. It's not really meant

00:01:40.339 --> 00:01:43.176
to be human readable and it doesn't

00:01:43.176 --> 00:01:45.116
always make a lot of sense for historical

00:01:45.116 --> 00:01:48.313
reasons. So, most web developers use

00:01:48.313 --> 00:01:51.127
libraries to actually understand what that

00:01:51.127 --> 00:01:53.287
string means and what browser they're on,

00:01:53.287 --> 00:01:56.169
and what OS and all that, because it is

00:01:56.169 --> 00:02:00.544
very weird. Here is one that's not so

00:02:00.544 --> 00:02:05.332
weird, <i>window.outerWidth</i> and <i>window.outerHeight</i>.

00:02:05.332 --> 00:02:12.583
So let's say, <i>"This web page is " +</i>

00:02:12.583 --> 00:02:21.544
<i>window.outerWidth + " by " + window.outerHeight;</i>

00:02:21.544 --> 00:02:24.787
To me it says, 1280 by 715, but maybe it

00:02:24.787 --> 00:02:26.426
says something different to you depending

00:02:26.426 --> 00:02:29.656
on what your page looks like when you are

00:02:29.656 --> 00:02:31.859
viewing this talk-through.

00:02:31.859 --> 00:02:33.928
Now, let me show you something a little

00:02:33.928 --> 00:02:37.778
surprising. I'm going to delete, the

00:02:37.778 --> 00:02:40.552
<i>window</i> part of this line of code.

00:02:43.472 --> 00:02:48.215
What happens is that it still works, that

00:02:48.215 --> 00:02:50.543
is because <i>window</i> is the default

00:02:50.543 --> 00:02:53.242
global variable on web pages. When the

00:02:53.242 --> 00:02:56.531
browser looks for a variable that you use,

00:02:56.531 --> 00:02:58.687
it will look for it on the <i>window</i>

00:02:58.687 --> 00:03:02.043
object. And when you create a new global

00:03:02.043 --> 00:03:05.181
variable, the <i>window</i> object will

00:03:05.181 --> 00:03:08.025
actually store it as a property. That

00:03:08.025 --> 00:03:10.482
means you should not declare your own

00:03:10.482 --> 00:03:13.318
variables named <i>outerWidth and outerHeight</i>

00:03:13.318 --> 00:03:16.050
because then they'll override <i>window.outerWidth</i>

00:03:16.050 --> 00:03:18.847
and <i>window.outHeight</i>. Generally,

00:03:18.847 --> 00:03:21.156
you should avoid global variables all

00:03:21.156 --> 00:03:23.218
together since it is so easy for them to

00:03:23.218 --> 00:03:26.090
collide with each other or existing variables

00:03:26.090 --> 00:03:29.266
on the <i>window</i>. To be extra safe, you

00:03:29.266 --> 00:03:31.956
can prefix your global variables. Like at

00:03:31.956 --> 00:03:35.921
Khan Academy, we write <i>KA_</i> in front

00:03:35.921 --> 00:03:39.979
of any global variables that we have to have.

00:03:39.979 --> 00:03:42.007
Okay, so that's the <i>window</i> object,

00:03:42.007 --> 00:03:44.457
now we are going to see how you can use

00:03:44.457 --> 00:03:47.815
two functions on it to make animations.