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.