[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.10,0:00:02.100,Default,,0000,0000,0000,,Another fun way to use JavaScript on
Dialogue: 0,0:00:02.100,0:00:05.62,Default,,0000,0000,0000,,web pages is to animate properties over
Dialogue: 0,0:00:05.62,0:00:08.83,Default,,0000,0000,0000,,time. Before we can do that however, I
Dialogue: 0,0:00:08.84,0:00:10.38,Default,,0000,0000,0000,,need to make sure that you know about
Dialogue: 0,0:00:10.38,0:00:12.03,Default,,0000,0000,0000,,another global variable that is available
Dialogue: 0,0:00:12.03,0:00:14.93,Default,,0000,0000,0000,,on every web page, the {\i1}window{\i0}
Dialogue: 0,0:00:14.93,0:00:18.33,Default,,0000,0000,0000,,variable. Here, I will
Dialogue: 0,0:00:18.33,0:00:20.98,Default,,0000,0000,0000,,{\i1}console.log(window){\i1} and you can{\i0}{\i0}
Dialogue: 0,0:00:20.98,0:00:23.14,Default,,0000,0000,0000,,pause, check out your dev tools and see
Dialogue: 0,0:00:23.14,0:00:24.90,Default,,0000,0000,0000,,what's inside it.
Dialogue: 0,0:00:26.89,0:00:30.64,Default,,0000,0000,0000,,Did you see? It is huge. It contains so
Dialogue: 0,0:00:30.64,0:00:34.11,Default,,0000,0000,0000,,much, it is overwhelming. To make it a
Dialogue: 0,0:00:34.11,0:00:36.52,Default,,0000,0000,0000,,little less overwhelming I will tell you
Dialogue: 0,0:00:36.52,0:00:38.44,Default,,0000,0000,0000,,some of my favorite properties and methods
Dialogue: 0,0:00:38.44,0:00:40.68,Default,,0000,0000,0000,,that you can access on it.
Dialogue: 0,0:00:40.68,0:00:44.18,Default,,0000,0000,0000,,There is {\i1}window.location{\i0} which has
Dialogue: 0,0:00:44.18,0:00:46.19,Default,,0000,0000,0000,,a bunch of information about the URL of
Dialogue: 0,0:00:46.19,0:00:50.13,Default,,0000,0000,0000,,the page. Actually, let's go and just
Dialogue: 0,0:00:50.13,0:00:52.08,Default,,0000,0000,0000,,write that out to the page so that you
Dialogue: 0,0:00:52.08,0:00:55.14,Default,,0000,0000,0000,,don't have to keep pausing. So
Dialogue: 0,0:00:55.14,0:00:59.100,Default,,0000,0000,0000,,{\i1}textContent += "The URL of this page{\i0}
Dialogue: 0,0:00:59.100,0:01:04.10,Default,,0000,0000,0000,,{\i1}is " + window.location{\i0} and then that's
Dialogue: 0,0:01:04.10,0:01:06.80,Default,,0000,0000,0000,,an object, so we need to reach inside and
Dialogue: 0,0:01:06.80,0:01:09.46,Default,,0000,0000,0000,,say {\i1}.href{\i0} and there you go. That's
Dialogue: 0,0:01:09.46,0:01:12.61,Default,,0000,0000,0000,,actually the URL of the iFramed web page
Dialogue: 0,0:01:12.61,0:01:14.89,Default,,0000,0000,0000,,on this side.
Dialogue: 0,0:01:14.89,0:01:18.47,Default,,0000,0000,0000,,Another property, is {\i1}window.navigator.userAgent{\i0}
Dialogue: 0,0:01:18.47,0:01:21.68,Default,,0000,0000,0000,,which tells you about the browser of
Dialogue: 0,0:01:21.68,0:01:28.31,Default,,0000,0000,0000,,the user. Say {\i1}"The user agent is " +{\i0}
Dialogue: 0,0:01:28.31,0:01:33.65,Default,,0000,0000,0000,,{\i1}window.navigator.userAgent;{\i0}. Okay,
Dialogue: 0,0:01:33.65,0:01:36.97,Default,,0000,0000,0000,,that {\i1}userAgent{\i0} string probably looks
Dialogue: 0,0:01:36.97,0:01:40.34,Default,,0000,0000,0000,,pretty crazy to you. It's not really meant
Dialogue: 0,0:01:40.34,0:01:43.18,Default,,0000,0000,0000,,to be human readable and it doesn't
Dialogue: 0,0:01:43.18,0:01:45.12,Default,,0000,0000,0000,,always make a lot of sense for historical
Dialogue: 0,0:01:45.12,0:01:48.31,Default,,0000,0000,0000,,reasons. So, most web developers use
Dialogue: 0,0:01:48.31,0:01:51.13,Default,,0000,0000,0000,,libraries to actually understand what that
Dialogue: 0,0:01:51.13,0:01:53.29,Default,,0000,0000,0000,,string means and what browser they're on,
Dialogue: 0,0:01:53.29,0:01:56.17,Default,,0000,0000,0000,,and what OS and all that, because it is
Dialogue: 0,0:01:56.17,0:02:00.54,Default,,0000,0000,0000,,very weird. Here is one that's not so
Dialogue: 0,0:02:00.54,0:02:05.33,Default,,0000,0000,0000,,weird, {\i1}window.outerWidth{\i0} and {\i1}window.outerHeight{\i0}.
Dialogue: 0,0:02:05.33,0:02:12.58,Default,,0000,0000,0000,,So let's say, {\i1}"This web page is " +{\i0}
Dialogue: 0,0:02:12.58,0:02:21.54,Default,,0000,0000,0000,,{\i1}window.outerWidth + " by " + window.outerHeight;{\i0}
Dialogue: 0,0:02:21.54,0:02:24.79,Default,,0000,0000,0000,,To me it says, 1280 by 715, but maybe it
Dialogue: 0,0:02:24.79,0:02:26.43,Default,,0000,0000,0000,,says something different to you depending
Dialogue: 0,0:02:26.43,0:02:29.66,Default,,0000,0000,0000,,on what your page looks like when you are
Dialogue: 0,0:02:29.66,0:02:31.86,Default,,0000,0000,0000,,viewing this talk-through.
Dialogue: 0,0:02:31.86,0:02:33.93,Default,,0000,0000,0000,,Now, let me show you something a little
Dialogue: 0,0:02:33.93,0:02:37.78,Default,,0000,0000,0000,,surprising. I'm going to delete, the
Dialogue: 0,0:02:37.78,0:02:40.55,Default,,0000,0000,0000,,{\i1}window{\i0} part of this line of code.
Dialogue: 0,0:02:43.47,0:02:48.22,Default,,0000,0000,0000,,What happens is that it still works, that
Dialogue: 0,0:02:48.22,0:02:50.54,Default,,0000,0000,0000,,is because {\i1}window{\i0} is the default
Dialogue: 0,0:02:50.54,0:02:53.24,Default,,0000,0000,0000,,global variable on web pages. When the
Dialogue: 0,0:02:53.24,0:02:56.53,Default,,0000,0000,0000,,browser looks for a variable that you use,
Dialogue: 0,0:02:56.53,0:02:58.69,Default,,0000,0000,0000,,it will look for it on the {\i1}window{\i0}
Dialogue: 0,0:02:58.69,0:03:02.04,Default,,0000,0000,0000,,object. And when you create a new global
Dialogue: 0,0:03:02.04,0:03:05.18,Default,,0000,0000,0000,,variable, the {\i1}window{\i0} object will
Dialogue: 0,0:03:05.18,0:03:08.02,Default,,0000,0000,0000,,actually store it as a property. That
Dialogue: 0,0:03:08.02,0:03:10.48,Default,,0000,0000,0000,,means you should not declare your own
Dialogue: 0,0:03:10.48,0:03:13.32,Default,,0000,0000,0000,,variables named {\i1}outerWidth and outerHeight{\i0}
Dialogue: 0,0:03:13.32,0:03:16.05,Default,,0000,0000,0000,,because then they'll override {\i1}window.outerWidth{\i0}
Dialogue: 0,0:03:16.05,0:03:18.85,Default,,0000,0000,0000,,and {\i1}window.outHeight{\i0}. Generally,
Dialogue: 0,0:03:18.85,0:03:21.16,Default,,0000,0000,0000,,you should avoid global variables all
Dialogue: 0,0:03:21.16,0:03:23.22,Default,,0000,0000,0000,,together since it is so easy for them to
Dialogue: 0,0:03:23.22,0:03:26.09,Default,,0000,0000,0000,,collide with each other or existing variables
Dialogue: 0,0:03:26.09,0:03:29.27,Default,,0000,0000,0000,,on the {\i1}window{\i0}. To be extra safe, you
Dialogue: 0,0:03:29.27,0:03:31.96,Default,,0000,0000,0000,,can prefix your global variables. Like at
Dialogue: 0,0:03:31.96,0:03:35.92,Default,,0000,0000,0000,,Khan Academy, we write {\i1}KA_{\i0} in front
Dialogue: 0,0:03:35.92,0:03:39.98,Default,,0000,0000,0000,,of any global variables that we have to have.
Dialogue: 0,0:03:39.98,0:03:42.01,Default,,0000,0000,0000,,Okay, so that's the {\i1}window{\i0} object,
Dialogue: 0,0:03:42.01,0:03:44.46,Default,,0000,0000,0000,,now we are going to see how you can use
Dialogue: 0,0:03:44.46,0:03:47.82,Default,,0000,0000,0000,,two functions on it to make animations.