[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.56,0:00:03.45,Default,,0000,0000,0000,,I've got this webpage with a\Npicture of Winston.
Dialogue: 0,0:00:03.45,0:00:06.56,Default,,0000,0000,0000,,It's getting cold here,\Nand Winston is getting old,
Dialogue: 0,0:00:06.56,0:00:08.65,Default,,0000,0000,0000,,so he wishes he had a beard.
Dialogue: 0,0:00:08.65,0:00:10.75,Default,,0000,0000,0000,,I could draw the beard myself.
Dialogue: 0,0:00:10.75,0:00:13.52,Default,,0000,0000,0000,,But I think it'd be way cooler if\Nthe user could draw the beard
Dialogue: 0,0:00:13.52,0:00:16.41,Default,,0000,0000,0000,,on Winston themselves,\Nhowever they want it to look--
Dialogue: 0,0:00:16.41,0:00:20.38,Default,,0000,0000,0000,,a long beard, some stubble,\Nwhatever they're into.
Dialogue: 0,0:00:20.38,0:00:22.71,Default,,0000,0000,0000,,So how could we do that?
Dialogue: 0,0:00:22.71,0:00:28.69,Default,,0000,0000,0000,,One way is to add an event listener\Nfor the `mouseMove` event on the image,
Dialogue: 0,0:00:28.69,0:00:33.03,Default,,0000,0000,0000,,so that our function would get called\Nwhenever the user moved their mouse
Dialogue: 0,0:00:33.03,0:00:34.39,Default,,0000,0000,0000,,over the face.
Dialogue: 0,0:00:34.39,0:00:37.61,Default,,0000,0000,0000,,Let's set that up, using \Nwhat we just learned.
Dialogue: 0,0:00:37.61,0:00:41.41,Default,,0000,0000,0000,,The first step is to find\Nthe element, the image.
Dialogue: 0,0:00:41.41,0:00:43.23,Default,,0000,0000,0000,,[typing]
Dialogue: 0,0:00:47.01,0:00:50.28,Default,,0000,0000,0000,,..."face", since I had that nice ID.
Dialogue: 0,0:00:50.28,0:00:53.87,Default,,0000,0000,0000,,The second step is to define\Nthe callback function.
Dialogue: 0,0:00:53.87,0:00:58.27,Default,,0000,0000,0000,,And we're going to start with a simple one\Njust to make sure that it worked,
Dialogue: 0,0:00:58.27,0:01:01.55,Default,,0000,0000,0000,,and we'll make it do more later.
Dialogue: 0,0:01:01.55,0:01:05.35,Default,,0000,0000,0000,,[typing]
Dialogue: 0,0:01:11.72,0:01:13.18,Default,,0000,0000,0000,,Okay.
Dialogue: 0,0:01:13.18,0:01:17.95,Default,,0000,0000,0000,,And the final step is to\Nconnect this to this,
Dialogue: 0,0:01:17.95,0:01:21.94,Default,,0000,0000,0000,,to make sure that this gets called\Nwhen this gets the `mouseMove` event.
Dialogue: 0,0:01:21.94,0:01:27.85,Default,,0000,0000,0000,,So we'll write\N`face.addEventListener("mousemove",`
Dialogue: 0,0:01:27.85,0:01:32.07,Default,,0000,0000,0000,,and then pass it the name\Nof the function, `onMouseMove`.
Dialogue: 0,0:01:32.07,0:01:36.59,Default,,0000,0000,0000,,Now, pause the talk-through, and try\Nmoving your mouse over the face.
Dialogue: 0,0:01:36.59,0:01:38.40,Default,,0000,0000,0000,,Do you see the message?
Dialogue: 0,0:01:39.88,0:01:43.86,Default,,0000,0000,0000,,Okay, hopefully you saw that\Nwe've got that event working.
Dialogue: 0,0:01:43.86,0:01:47.34,Default,,0000,0000,0000,,But it's not what we want\Nour event listener to do.
Dialogue: 0,0:01:47.34,0:01:50.45,Default,,0000,0000,0000,,We want it to draw, not to write text.
Dialogue: 0,0:01:50.45,0:01:53.36,Default,,0000,0000,0000,,How can we draw in a webpage?
Dialogue: 0,0:01:53.36,0:01:58.60,Default,,0000,0000,0000,,We could bring in the `` tag\Nand draw pixels on it, like we do
Dialogue: 0,0:01:58.60,0:02:00.73,Default,,0000,0000,0000,,with ProcessingJS programs here.
Dialogue: 0,0:02:00.73,0:02:06.50,Default,,0000,0000,0000,,But all we're drawing is a beard,\Nwhich is really a bunch of black dots.
Dialogue: 0,0:02:06.50,0:02:11.57,Default,,0000,0000,0000,,So we could just create a `` for\Neach dot, and position that ``
Dialogue: 0,0:02:11.57,0:02:13.55,Default,,0000,0000,0000,,with absolute positioning.
Dialogue: 0,0:02:13.55,0:02:18.31,Default,,0000,0000,0000,,Here, let me show you with\None beard follicle.
Dialogue: 0,0:02:18.31,0:02:24.52,Default,,0000,0000,0000,,So I'll make a `` with class `beard`,\Nand then I've got some nice CSS
Dialogue: 0,0:02:24.52,0:02:29.74,Default,,0000,0000,0000,,to style that beard,\Nwhich I'll just stick in here.
Dialogue: 0,0:02:29.74,0:02:31.75,Default,,0000,0000,0000,,And let's just fix that up.
Dialogue: 0,0:02:31.75,0:02:36.47,Default,,0000,0000,0000,,So you can see our beard is a\Nblack background, it's 5 by 5 pixels,
Dialogue: 0,0:02:36.47,0:02:40.52,Default,,0000,0000,0000,,it's got this 2 pixel border radius\Nto make it a little bit round,
Dialogue: 0,0:02:40.52,0:02:44.68,Default,,0000,0000,0000,,and it's using absolute\Npositioning scheme.
Dialogue: 0,0:02:44.68,0:02:48.49,Default,,0000,0000,0000,,Currently, the ``\Nshows up under the image.
Dialogue: 0,0:02:48.49,0:02:51.47,Default,,0000,0000,0000,,How do we get it to show up\Non top of the face?
Dialogue: 0,0:02:51.47,0:02:55.27,Default,,0000,0000,0000,,We're using absolute positioning,\Nso that means that we should use
Dialogue: 0,0:02:55.27,0:02:59.83,Default,,0000,0000,0000,,the `top` and `left` properties\Nto say where it should actually
Dialogue: 0,0:02:59.83,0:03:02.07,Default,,0000,0000,0000,,get positioned,\Nnow that it's absolute.
Dialogue: 0,0:03:02.07,0:03:07.92,Default,,0000,0000,0000,,So let's say `top: 80px;`,\Nand then `left:15px;`.
Dialogue: 0,0:03:07.92,0:03:09.42,Default,,0000,0000,0000,,Beautiful.
Dialogue: 0,0:03:09.42,0:03:13.75,Default,,0000,0000,0000,,Now that we've got that working in HTML,\Nlet's make it work in JavaScript,
Dialogue: 0,0:03:13.75,0:03:18.86,Default,,0000,0000,0000,,so that the user dynamically creates this\N`` every time they move their mouse.
Dialogue: 0,0:03:18.86,0:03:22.78,Default,,0000,0000,0000,,We'll go back down to our\NJavaScript callback function.
Dialogue: 0,0:03:22.78,0:03:25.53,Default,,0000,0000,0000,,The first thing is to create a ``,
Dialogue: 0,0:03:25.53,0:03:31.41,Default,,0000,0000,0000,,which we can do with our\N`document.createElement()` function--
Dialogue: 0,0:03:31.41,0:03:33.59,Default,,0000,0000,0000,,it's going to be a `div`.
Dialogue: 0,0:03:33.59,0:03:39.58,Default,,0000,0000,0000,,Second thing to do is to add that class:\N`beard.className = "beard";`.
Dialogue: 0,0:03:39.58,0:03:42.20,Default,,0000,0000,0000,,So we've got this ``,\Nit's floating off in space.
Dialogue: 0,0:03:42.20,0:03:47.07,Default,,0000,0000,0000,,Final step, append it to the body.
Dialogue: 0,0:03:47.07,0:03:52.10,Default,,0000,0000,0000,,All right, so now we've basically done\Nin JavaScript what we had done in HTML,
Dialogue: 0,0:03:52.10,0:03:54.67,Default,,0000,0000,0000,,so we can delete this HTML.
Dialogue: 0,0:03:54.67,0:03:58.76,Default,,0000,0000,0000,,Now you should pause the talk-through,\Nand try clicking Winston.
Dialogue: 0,0:03:58.76,0:04:00.31,Default,,0000,0000,0000,,See what happens.
Dialogue: 0,0:04:02.41,0:04:04.93,Default,,0000,0000,0000,,Did you see the beard follicle show up?
Dialogue: 0,0:04:04.93,0:04:07.19,Default,,0000,0000,0000,,And did you try clicking multiple times?
Dialogue: 0,0:04:07.19,0:04:11.09,Default,,0000,0000,0000,,If you did, you probably noticed that\Nyour second click did nothing--
Dialogue: 0,0:04:11.09,0:04:13.52,Default,,0000,0000,0000,,or at least it appeared to do nothing.
Dialogue: 0,0:04:13.52,0:04:17.86,Default,,0000,0000,0000,,That's because every `` has\Nthe same `top` and `left` properties,
Dialogue: 0,0:04:17.86,0:04:21.08,Default,,0000,0000,0000,,so new ones just pile\Non top of the old ones.
Dialogue: 0,0:04:21.08,0:04:25.49,Default,,0000,0000,0000,,We want the `` to show up\Nwherever the user's mouse is instead.
Dialogue: 0,0:04:25.49,0:04:30.39,Default,,0000,0000,0000,,How do we actually find out\Nwhere the user's mouse is?
Dialogue: 0,0:04:30.39,0:04:34.32,Default,,0000,0000,0000,,As it turns out, the browser\Nrecords a lot of information
Dialogue: 0,0:04:34.32,0:04:38.08,Default,,0000,0000,0000,,every time any user event happens,\Nlike where it happens.
Dialogue: 0,0:04:38.08,0:04:41.02,Default,,0000,0000,0000,,And the browser gives you\Nthat information every time
Dialogue: 0,0:04:41.02,0:04:43.22,Default,,0000,0000,0000,,it calls your event listener function.
Dialogue: 0,0:04:43.22,0:04:46.80,Default,,0000,0000,0000,,But where, how, can we get this\Namazing information?
Dialogue: 0,0:04:46.80,0:04:51.41,Default,,0000,0000,0000,,I'll type one letter, to give you a hint.
Dialogue: 0,0:04:51.41,0:04:56.07,Default,,0000,0000,0000,,That `e` here, is the event\Ninformation object.
Dialogue: 0,0:04:56.07,0:04:59.61,Default,,0000,0000,0000,,And the browser sends it as the first\Nargument whenever it calls
Dialogue: 0,0:04:59.61,0:05:02.13,Default,,0000,0000,0000,,an event listener callback function.
Dialogue: 0,0:05:02.13,0:05:06.18,Default,,0000,0000,0000,,We didn't need it before, so I didn't\Nbother writing out the arguments list.
Dialogue: 0,0:05:06.18,0:05:09.00,Default,,0000,0000,0000,,But now that we're going to use it,\NI'm giving it a name, to make it
Dialogue: 0,0:05:09.00,0:05:11.59,Default,,0000,0000,0000,,easy to reference inside the function.
Dialogue: 0,0:05:11.59,0:05:14.97,Default,,0000,0000,0000,,Remember that in JavaScript, a function\Ncan be called with any number
Dialogue: 0,0:05:14.97,0:05:18.59,Default,,0000,0000,0000,,of arguments, even if the function\Ndoesn't use or refer to any of them.
Dialogue: 0,0:05:18.59,0:05:22.70,Default,,0000,0000,0000,,So we were always getting this\Ninformation, we just didn't know it.
Dialogue: 0,0:05:22.70,0:05:28.28,Default,,0000,0000,0000,,Now I'm going to log out `e`:\N`console.log(e)`.
Dialogue: 0,0:05:28.28,0:05:32.16,Default,,0000,0000,0000,,Pause the talk-through, click Winston,\Nand check your console.
Dialogue: 0,0:05:32.16,0:05:34.41,Default,,0000,0000,0000,,You should see the\Nevent object logged out,
Dialogue: 0,0:05:34.41,0:05:37.15,Default,,0000,0000,0000,,and you can skim through\Nall the properties on it.
Dialogue: 0,0:05:38.58,0:05:43.27,Default,,0000,0000,0000,,There are two event properties in\Nparticular that we're very interested in:
Dialogue: 0,0:05:43.27,0:05:45.59,Default,,0000,0000,0000,,`clientX` and `clientY`.
Dialogue: 0,0:05:45.59,0:05:49.31,Default,,0000,0000,0000,,They record the x and y of the event,\Nand that's what we're going to use
Dialogue: 0,0:05:49.31,0:05:51.16,Default,,0000,0000,0000,,to position the beard.
Dialogue: 0,0:05:51.16,0:06:02.02,Default,,0000,0000,0000,,Let's set the top of the beard equal to\Ne.clientY, plus "px", for the units.
Dialogue: 0,0:06:02.02,0:06:10.32,Default,,0000,0000,0000,,And set the left equal to\Ne.clientX, plus "px" for units.
Dialogue: 0,0:06:10.32,0:06:14.32,Default,,0000,0000,0000,,Now pause and try mousing over.
Dialogue: 0,0:06:14.32,0:06:16.03,Default,,0000,0000,0000,,Draw Winston a beard.
Dialogue: 0,0:06:17.97,0:06:19.45,Default,,0000,0000,0000,,Pretty cool, huh?
Dialogue: 0,0:06:19.45,0:06:23.16,Default,,0000,0000,0000,,I bet you can imagine all sorts of fun\Npainting apps that you can make,
Dialogue: 0,0:06:23.16,0:06:25.56,Default,,0000,0000,0000,,using clientX and clientY.
Dialogue: 0,0:06:25.56,0:06:28.79,Default,,0000,0000,0000,,And as you saw in the console,\Nthere were a bunch of other properties
Dialogue: 0,0:06:28.79,0:06:31.25,Default,,0000,0000,0000,,on the event object\Nthat you could use as well.
Dialogue: 0,0:06:31.25,0:06:35.35,Default,,0000,0000,0000,,The most useful, I think, are\Nthe keyboard-related ones.
Dialogue: 0,0:06:35.35,0:06:38.11,Default,,0000,0000,0000,,So that you can find out\Nwhat keys the user was pressing
Dialogue: 0,0:06:38.11,0:06:40.54,Default,,0000,0000,0000,,when the event happened,\Nand use that to make a
Dialogue: 0,0:06:40.54,0:06:44.35,Default,,0000,0000,0000,,keyboard-accessible interface, \Nor a really fun game.
Dialogue: 0,0:06:44.35,0:06:47.21,Default,,0000,0000,0000,,Oh, and one more thing:
Dialogue: 0,0:06:47.21,0:06:49.70,Default,,0000,0000,0000,,you don't have to call this argument `e`.
Dialogue: 0,0:06:49.70,0:06:57.31,Default,,0000,0000,0000,,That's typical, but some developers\Ncall it `evt`, or `event`.
Dialogue: 0,0:06:57.31,0:07:00.60,Default,,0000,0000,0000,,It doesn't matter what you call it,\Nas long as it's referring to
Dialogue: 0,0:07:00.60,0:07:03.70,Default,,0000,0000,0000,,the first argument that the browser\Npasses to your function,
Dialogue: 0,0:07:03.70,0:07:09.48,Default,,0000,0000,0000,,and as long as you then\Nrefer to it that way later as well.
Dialogue: 0,0:07:09.48,0:07:13.28,Default,,0000,0000,0000,,If you're having trouble with it,\Nmake sure you use console.log
Dialogue: 0,0:07:13.28,0:07:15.64,Default,,0000,0000,0000,,to help you debug what's going on.
Dialogue: 0,0:07:15.64,0:07:17.24,Default,,0000,0000,0000,,When you're a web developer,
Dialogue: 0,0:07:17.24,0:07:21.90,Default,,0000,0000,0000,,the console is pretty much\Nyour best friend ever-- use it!