0:00:01.095,0:00:02.997
Another fun way to use JavaScript on
0:00:02.997,0:00:05.620
web pages is to animate properties over
0:00:05.620,0:00:08.830
time. Before we can do that however, I
0:00:08.837,0:00:10.379
need to make sure that you know about
0:00:10.379,0:00:12.032
another global variable that is available
0:00:12.032,0:00:14.934
on every web page, the window
0:00:14.934,0:00:18.334
variable. Here, I will
0:00:18.334,0:00:20.978
console.log(window) and you can
0:00:20.978,0:00:23.145
pause, check out your dev tools and see
0:00:23.145,0:00:24.897
what's inside it.
0:00:26.887,0:00:30.643
Did you see? It is huge. It contains so
0:00:30.643,0:00:34.113
much, it is overwhelming. To make it a
0:00:34.113,0:00:36.519
little less overwhelming I will tell you
0:00:36.519,0:00:38.436
some of my favorite properties and methods
0:00:38.436,0:00:40.675
that you can access on it.
0:00:40.675,0:00:44.184
There is window.location which has
0:00:44.184,0:00:46.194
a bunch of information about the URL of
0:00:46.194,0:00:50.132
the page. Actually, let's go and just
0:00:50.132,0:00:52.082
write that out to the page so that you
0:00:52.082,0:00:55.145
don't have to keep pausing. So
0:00:55.145,0:00:59.995
textContent += "The URL of this page
0:00:59.995,0:01:04.097
is " + window.location and then that's
0:01:04.097,0:01:06.803
an object, so we need to reach inside and
0:01:06.803,0:01:09.460
say .href and there you go. That's
0:01:09.460,0:01:12.608
actually the URL of the iFramed web page
0:01:12.608,0:01:14.887
on this side.
0:01:14.887,0:01:18.466
Another property, is window.navigator.userAgent
0:01:18.466,0:01:21.675
which tells you about the browser of
0:01:21.675,0:01:28.308
the user. Say "The user agent is " +
0:01:28.308,0:01:33.653
window.navigator.userAgent;. Okay,
0:01:33.653,0:01:36.972
that userAgent string probably looks
0:01:36.972,0:01:40.339
pretty crazy to you. It's not really meant
0:01:40.339,0:01:43.176
to be human readable and it doesn't
0:01:43.176,0:01:45.116
always make a lot of sense for historical
0:01:45.116,0:01:48.313
reasons. So, most web developers use
0:01:48.313,0:01:51.127
libraries to actually understand what that
0:01:51.127,0:01:53.287
string means and what browser they're on,
0:01:53.287,0:01:56.169
and what OS and all that, because it is
0:01:56.169,0:02:00.544
very weird. Here is one that's not so
0:02:00.544,0:02:05.332
weird, window.outerWidth and window.outerHeight.
0:02:05.332,0:02:12.583
So let's say, "This web page is " +
0:02:12.583,0:02:21.544
window.outerWidth + " by " + window.outerHeight;
0:02:21.544,0:02:24.787
To me it says, 1280 by 715, but maybe it
0:02:24.787,0:02:26.426
says something different to you depending
0:02:26.426,0:02:29.656
on what your page looks like when you are
0:02:29.656,0:02:31.859
viewing this talk-through.
0:02:31.859,0:02:33.928
Now, let me show you something a little
0:02:33.928,0:02:37.778
surprising. I'm going to delete, the
0:02:37.778,0:02:40.552
window part of this line of code.
0:02:43.472,0:02:48.215
What happens is that it still works, that
0:02:48.215,0:02:50.543
is because window is the default
0:02:50.543,0:02:53.242
global variable on web pages. When the
0:02:53.242,0:02:56.531
browser looks for a variable that you use,
0:02:56.531,0:02:58.687
it will look for it on the window
0:02:58.687,0:03:02.043
object. And when you create a new global
0:03:02.043,0:03:05.181
variable, the window object will
0:03:05.181,0:03:08.025
actually store it as a property. That
0:03:08.025,0:03:10.482
means you should not declare your own
0:03:10.482,0:03:13.318
variables named outerWidth and outerHeight
0:03:13.318,0:03:16.050
because then they'll override window.outerWidth
0:03:16.050,0:03:18.847
and window.outHeight. Generally,
0:03:18.847,0:03:21.156
you should avoid global variables all
0:03:21.156,0:03:23.218
together since it is so easy for them to
0:03:23.218,0:03:26.090
collide with each other or existing variables
0:03:26.090,0:03:29.266
on the window. To be extra safe, you
0:03:29.266,0:03:31.956
can prefix your global variables. Like at
0:03:31.956,0:03:35.921
Khan Academy, we write KA_ in front
0:03:35.921,0:03:39.979
of any global variables that we have to have.
0:03:39.979,0:03:42.007
Okay, so that's the window object,
0:03:42.007,0:03:44.457
now we are going to see how you can use
0:03:44.457,0:03:47.815
two functions on it to make animations.