0:00:00.556,0:00:03.450
I've got this webpage with a[br]picture of Winston.

0:00:03.450,0:00:06.556
It's getting cold here,[br]and Winston is getting old,

0:00:06.556,0:00:08.646
so he wishes he had a beard.

0:00:08.646,0:00:10.750
I could draw the beard myself.

0:00:10.750,0:00:13.523
But I think it'd be way cooler if[br]the user could draw the beard

0:00:13.523,0:00:16.412
on Winston themselves,[br]however they want it to look--

0:00:16.412,0:00:20.380
a long beard, some stubble,[br]whatever they're into.

0:00:20.380,0:00:22.711
So how could we do that?

0:00:22.711,0:00:28.693
One way is to add an event listener[br]for the `mouseMove` event on the image,

0:00:28.693,0:00:33.031
so that our function would get called[br]whenever the user moved their mouse

0:00:33.031,0:00:34.386
over the face.

0:00:34.386,0:00:37.614
Let's set that up, using [br]what we just learned.

0:00:37.614,0:00:41.412
The first step is to find[br]the element, the image.

0:00:41.412,0:00:43.231
[typing]

0:00:47.009,0:00:50.281
..."face", since I had that nice ID.

0:00:50.281,0:00:53.866
The second step is to define[br]the callback function.

0:00:53.866,0:00:58.267
And we're going to start with a simple one[br]just to make sure that it worked,

0:00:58.267,0:01:01.546
and we'll make it do more later.

0:01:01.546,0:01:05.347
[typing]

0:01:11.720,0:01:13.182
Okay.

0:01:13.182,0:01:17.946
And the final step is to[br]connect this to this,

0:01:17.946,0:01:21.941
to make sure that this gets called[br]when this gets the `mouseMove` event.

0:01:21.941,0:01:27.854
So we'll write[br]`face.addEventListener("mousemove",`

0:01:27.854,0:01:32.070
and then pass it the name[br]of the function, `onMouseMove`.

0:01:32.070,0:01:36.590
Now, pause the talk-through, and try[br]moving your mouse over the face.

0:01:36.590,0:01:38.405
Do you see the message?

0:01:39.885,0:01:43.856
Okay, hopefully you saw that[br]we've got that event working.

0:01:43.856,0:01:47.344
But it's not what we want[br]our event listener to do.

0:01:47.344,0:01:50.450
We want it to draw, not to write text.

0:01:50.450,0:01:53.356
How can we draw in a webpage?

0:01:53.356,0:01:58.596
We could bring in the `` tag[br]and draw pixels on it, like we do

0:01:58.596,0:02:00.732
with ProcessingJS programs here.

0:02:00.732,0:02:06.502
But all we're drawing is a beard,[br]which is really a bunch of black dots.

0:02:06.502,0:02:11.566
So we could just create a `` for[br]each dot, and position that ``

0:02:11.566,0:02:13.551
with absolute positioning.

0:02:13.551,0:02:18.310
Here, let me show you with[br]one beard follicle.

0:02:18.310,0:02:24.524
So I'll make a `` with class `beard`,[br]and then I've got some nice CSS

0:02:24.524,0:02:29.741
to style that beard,[br]which I'll just stick in here.

0:02:29.741,0:02:31.750
And let's just fix that up.

0:02:31.750,0:02:36.471
So you can see our beard is a[br]black background, it's 5 by 5 pixels,

0:02:36.471,0:02:40.525
it's got this 2 pixel border radius[br]to make it a little bit round,

0:02:40.525,0:02:44.684
and it's using absolute[br]positioning scheme.

0:02:44.684,0:02:48.488
Currently, the ``[br]shows up under the image.

0:02:48.488,0:02:51.473
How do we get it to show up[br]on top of the face?

0:02:51.473,0:02:55.271
We're using absolute positioning,[br]so that means that we should use

0:02:55.271,0:02:59.827
the `top` and `left` properties[br]to say where it should actually

0:02:59.827,0:03:02.073
get positioned,[br]now that it's absolute.

0:03:02.073,0:03:07.923
So let's say `top: 80px;`,[br]and then `left:15px;`.

0:03:07.923,0:03:09.422
Beautiful.

0:03:09.422,0:03:13.750
Now that we've got that working in HTML,[br]let's make it work in JavaScript,

0:03:13.750,0:03:18.865
so that the user dynamically creates this[br]`` every time they move their mouse.

0:03:18.865,0:03:22.778
We'll go back down to our[br]JavaScript callback function.

0:03:22.778,0:03:25.534
The first thing is to create a ``,

0:03:25.534,0:03:31.406
which we can do with our[br]`document.createElement()` function--

0:03:31.406,0:03:33.590
it's going to be a `div`.

0:03:33.590,0:03:39.580
Second thing to do is to add that class:[br]`beard.className = "beard";`.

0:03:39.580,0:03:42.198
So we've got this ``,[br]it's floating off in space.

0:03:42.198,0:03:47.072
Final step, append it to the body.

0:03:47.072,0:03:52.103
All right, so now we've basically done[br]in JavaScript what we had done in HTML,

0:03:52.103,0:03:54.666
so we can delete this HTML.

0:03:54.666,0:03:58.764
Now you should pause the talk-through,[br]and try clicking Winston.

0:03:58.764,0:04:00.312
See what happens.

0:04:02.412,0:04:04.933
Did you see the beard follicle show up?

0:04:04.933,0:04:07.191
And did you try clicking multiple times?

0:04:07.191,0:04:11.090
If you did, you probably noticed that[br]your second click did nothing--

0:04:11.090,0:04:13.525
or at least it appeared to do nothing.

0:04:13.525,0:04:17.863
That's because every `` has[br]the same `top` and `left` properties,

0:04:17.863,0:04:21.081
so new ones just pile[br]on top of the old ones.

0:04:21.081,0:04:25.493
We want the `` to show up[br]wherever the user's mouse is instead.

0:04:25.493,0:04:30.386
How do we actually find out[br]where the user's mouse is?

0:04:30.386,0:04:34.317
As it turns out, the browser[br]records a lot of information

0:04:34.317,0:04:38.082
every time any user event happens,[br]like where it happens.

0:04:38.082,0:04:41.018
And the browser gives you[br]that information every time

0:04:41.018,0:04:43.224
it calls your event listener function.

0:04:43.224,0:04:46.804
But where, how, can we get this[br]amazing information?

0:04:46.804,0:04:51.412
I'll type one letter, to give you a hint.

0:04:51.412,0:04:56.074
That `e` here, is the event[br]information object.

0:04:56.074,0:04:59.609
And the browser sends it as the first[br]argument whenever it calls

0:04:59.609,0:05:02.129
an event listener callback function.

0:05:02.129,0:05:06.178
We didn't need it before, so I didn't[br]bother writing out the arguments list.

0:05:06.178,0:05:09.002
But now that we're going to use it,[br]I'm giving it a name, to make it

0:05:09.002,0:05:11.594
easy to reference inside the function.

0:05:11.594,0:05:14.966
Remember that in JavaScript, a function[br]can be called with any number

0:05:14.966,0:05:18.588
of arguments, even if the function[br]doesn't use or refer to any of them.

0:05:18.588,0:05:22.701
So we were always getting this[br]information, we just didn't know it.

0:05:22.701,0:05:28.278
Now I'm going to log out `e`:[br]`console.log(e)`.

0:05:28.278,0:05:32.162
Pause the talk-through, click Winston,[br]and check your console.

0:05:32.162,0:05:34.410
You should see the[br]event object logged out,

0:05:34.410,0:05:37.151
and you can skim through[br]all the properties on it.

0:05:38.580,0:05:43.267
There are two event properties in[br]particular that we're very interested in:

0:05:43.267,0:05:45.594
`clientX` and `clientY`.

0:05:45.594,0:05:49.314
They record the x and y of the event,[br]and that's what we're going to use

0:05:49.314,0:05:51.155
to position the beard.

0:05:51.155,0:06:02.015
Let's set the top of the beard equal to[br]e.clientY, plus "px", for the units.

0:06:02.015,0:06:10.323
And set the left equal to[br]e.clientX, plus "px" for units.

0:06:10.323,0:06:14.320
Now pause and try mousing over.

0:06:14.320,0:06:16.027
Draw Winston a beard.

0:06:17.973,0:06:19.454
Pretty cool, huh?

0:06:19.454,0:06:23.157
I bet you can imagine all sorts of fun[br]painting apps that you can make,

0:06:23.157,0:06:25.559
using clientX and clientY.

0:06:25.559,0:06:28.793
And as you saw in the console,[br]there were a bunch of other properties

0:06:28.793,0:06:31.251
on the event object[br]that you could use as well.

0:06:31.251,0:06:35.354
The most useful, I think, are[br]the keyboard-related ones.

0:06:35.354,0:06:38.107
So that you can find out[br]what keys the user was pressing

0:06:38.107,0:06:40.541
when the event happened,[br]and use that to make a

0:06:40.541,0:06:44.352
keyboard-accessible interface, [br]or a really fun game.

0:06:44.352,0:06:47.206
Oh, and one more thing:

0:06:47.206,0:06:49.700
you don't have to call this argument `e`.

0:06:49.700,0:06:57.312
That's typical, but some developers[br]call it `evt`, or `event`.

0:06:57.312,0:07:00.602
It doesn't matter what you call it,[br]as long as it's referring to

0:07:00.602,0:07:03.695
the first argument that the browser[br]passes to your function,

0:07:03.695,0:07:09.485
and as long as you then[br]refer to it that way later as well.

0:07:09.485,0:07:13.281
If you're having trouble with it,[br]make sure you use console.log

0:07:13.281,0:07:15.639
to help you debug what's going on.

0:07:15.639,0:07:17.235
When you're a web developer,

0:07:17.235,0:07:21.897
the console is pretty much[br]your best friend ever-- use it!