1
00:00:01,095 --> 00:00:02,997
Another fun way to use JavaScript on
2
00:00:02,997 --> 00:00:05,620
web pages is to animate properties over
3
00:00:05,620 --> 00:00:08,830
time. Before we can do that however, I
4
00:00:08,837 --> 00:00:10,379
need to make sure that you know about
5
00:00:10,379 --> 00:00:12,032
another global variable that is available
6
00:00:12,032 --> 00:00:14,934
on every web page, the window
7
00:00:14,934 --> 00:00:18,334
variable. Here, I will
8
00:00:18,334 --> 00:00:20,978
console.log(window) and you can
9
00:00:20,978 --> 00:00:23,145
pause, check out your dev tools and see
10
00:00:23,145 --> 00:00:24,897
what's inside it.
11
00:00:26,887 --> 00:00:30,643
Did you see? It is huge. It contains so
12
00:00:30,643 --> 00:00:34,113
much, it is overwhelming. To make it a
13
00:00:34,113 --> 00:00:36,519
little less overwhelming I will tell you
14
00:00:36,519 --> 00:00:38,436
some of my favorite properties and methods
15
00:00:38,436 --> 00:00:40,675
that you can access on it.
16
00:00:40,675 --> 00:00:44,184
There is window.location which has
17
00:00:44,184 --> 00:00:46,194
a bunch of information about the URL of
18
00:00:46,194 --> 00:00:50,132
the page. Actually, let's go and just
19
00:00:50,132 --> 00:00:52,082
write that out to the page so that you
20
00:00:52,082 --> 00:00:55,145
don't have to keep pausing. So
21
00:00:55,145 --> 00:00:59,995
textContent += "The URL of this page
22
00:00:59,995 --> 00:01:04,097
is " + window.location and then that's
23
00:01:04,097 --> 00:01:06,803
an object, so we need to reach inside and
24
00:01:06,803 --> 00:01:09,460
say .href and there you go. That's
25
00:01:09,460 --> 00:01:12,608
actually the URL of the iFramed web page
26
00:01:12,608 --> 00:01:14,887
on this side.
27
00:01:14,887 --> 00:01:18,466
Another property, is window.navigator.userAgent
28
00:01:18,466 --> 00:01:21,675
which tells you about the browser of
29
00:01:21,675 --> 00:01:28,308
the user. Say "The user agent is " +
30
00:01:28,308 --> 00:01:33,653
window.navigator.userAgent;. Okay,
31
00:01:33,653 --> 00:01:36,972
that userAgent string probably looks
32
00:01:36,972 --> 00:01:40,339
pretty crazy to you. It's not really meant
33
00:01:40,339 --> 00:01:43,176
to be human readable and it doesn't
34
00:01:43,176 --> 00:01:45,116
always make a lot of sense for historical
35
00:01:45,116 --> 00:01:48,313
reasons. So, most web developers use
36
00:01:48,313 --> 00:01:51,127
libraries to actually understand what that
37
00:01:51,127 --> 00:01:53,287
string means and what browser they're on,
38
00:01:53,287 --> 00:01:56,169
and what OS and all that, because it is
39
00:01:56,169 --> 00:02:00,544
very weird. Here is one that's not so
40
00:02:00,544 --> 00:02:05,332
weird, window.outerWidth and window.outerHeight.
41
00:02:05,332 --> 00:02:12,583
So let's say, "This web page is " +
42
00:02:12,583 --> 00:02:21,544
window.outerWidth + " by " + window.outerHeight;
43
00:02:21,544 --> 00:02:24,787
To me it says, 1280 by 715, but maybe it
44
00:02:24,787 --> 00:02:26,426
says something different to you depending
45
00:02:26,426 --> 00:02:29,656
on what your page looks like when you are
46
00:02:29,656 --> 00:02:31,859
viewing this talk-through.
47
00:02:31,859 --> 00:02:33,928
Now, let me show you something a little
48
00:02:33,928 --> 00:02:37,778
surprising. I'm going to delete, the
49
00:02:37,778 --> 00:02:40,552
window part of this line of code.
50
00:02:43,472 --> 00:02:48,215
What happens is that it still works, that
51
00:02:48,215 --> 00:02:50,543
is because window is the default
52
00:02:50,543 --> 00:02:53,242
global variable on web pages. When the
53
00:02:53,242 --> 00:02:56,531
browser looks for a variable that you use,
54
00:02:56,531 --> 00:02:58,687
it will look for it on the window
55
00:02:58,687 --> 00:03:02,043
object. And when you create a new global
56
00:03:02,043 --> 00:03:05,181
variable, the window object will
57
00:03:05,181 --> 00:03:08,025
actually store it as a property. That
58
00:03:08,025 --> 00:03:10,482
means you should not declare your own
59
00:03:10,482 --> 00:03:13,318
variables named outerWidth and outerHeight
60
00:03:13,318 --> 00:03:16,050
because then they'll override window.outerWidth
61
00:03:16,050 --> 00:03:18,847
and window.outHeight. Generally,
62
00:03:18,847 --> 00:03:21,156
you should avoid global variables all
63
00:03:21,156 --> 00:03:23,218
together since it is so easy for them to
64
00:03:23,218 --> 00:03:26,090
collide with each other or existing variables
65
00:03:26,090 --> 00:03:29,266
on the window. To be extra safe, you
66
00:03:29,266 --> 00:03:31,956
can prefix your global variables. Like at
67
00:03:31,956 --> 00:03:35,921
Khan Academy, we write KA_ in front
68
00:03:35,921 --> 00:03:39,979
of any global variables that we have to have.
69
00:03:39,979 --> 00:03:42,007
Okay, so that's the window object,
70
00:03:42,007 --> 00:03:44,457
now we are going to see how you can use
71
00:03:44,457 --> 00:03:47,815
two functions on it to make animations.