WEBVTT

00:00:00.556 --> 00:00:03.450
I've got this webpage with a
picture of Winston.

00:00:03.450 --> 00:00:06.556
It's getting cold here,
and Winston is getting old,

00:00:06.556 --> 00:00:08.646
so he wishes he had a beard.

00:00:08.646 --> 00:00:10.750
I could draw the beard myself.

00:00:10.750 --> 00:00:13.523
But I think it'd be way cooler if
the user could draw the beard

00:00:13.523 --> 00:00:16.412
on Winston themselves,
however they want it to look--

00:00:16.412 --> 00:00:20.380
a long beard, some stubble,
whatever they're into.

00:00:20.380 --> 00:00:22.711
So how could we do that?

00:00:22.711 --> 00:00:28.693
One way is to add an event listener
for the `mouseMove` event on the image,

00:00:28.693 --> 00:00:33.031
so that our function would get called
whenever the user moved their mouse

00:00:33.031 --> 00:00:34.386
over the face.

00:00:34.386 --> 00:00:37.614
Let's set that up, using 
what we just learned.

00:00:37.614 --> 00:00:41.412
The first step is to find
the element, the image.

00:00:41.412 --> 00:00:43.231
[typing]

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

00:00:50.281 --> 00:00:53.866
The second step is to define
the callback function.

00:00:53.866 --> 00:00:58.267
And we're going to start with a simple one
just to make sure that it worked,

00:00:58.267 --> 00:01:01.546
and we'll make it do more later.

00:01:01.546 --> 00:01:05.347
[typing]

00:01:11.720 --> 00:01:13.182
Okay.

00:01:13.182 --> 00:01:17.946
And the final step is to
connect this to this,

00:01:17.946 --> 00:01:21.941
to make sure that this gets called
when this gets the `mouseMove` event.

00:01:21.941 --> 00:01:27.854
So we'll write
`face.addEventListener("mousemove",`

00:01:27.854 --> 00:01:32.070
and then pass it the name
of the function, `onMouseMove`.

00:01:32.070 --> 00:01:36.590
Now, pause the talk-through, and try
moving your mouse over the face.

00:01:36.590 --> 00:01:38.405
Do you see the message?

00:01:39.885 --> 00:01:43.856
Okay, hopefully you saw that
we've got that event working.

00:01:43.856 --> 00:01:47.344
But it's not what we want
our event listener to do.

00:01:47.344 --> 00:01:50.450
We want it to draw, not to write text.

00:01:50.450 --> 00:01:53.356
How can we draw in a webpage?

00:01:53.356 --> 00:01:58.596
We could bring in the `` tag
and draw pixels on it, like we do

00:01:58.596 --> 00:02:00.732
with ProcessingJS programs here.

00:02:00.732 --> 00:02:06.502
But all we're drawing is a beard,
which is really a bunch of black dots.

00:02:06.502 --> 00:02:11.566
So we could just create a `` for
each dot, and position that ``

00:02:11.566 --> 00:02:13.551
with absolute positioning.

00:02:13.551 --> 00:02:18.310
Here, let me show you with
one beard follicle.

00:02:18.310 --> 00:02:24.524
So I'll make a `` with class `beard`,
and then I've got some nice CSS

00:02:24.524 --> 00:02:29.741
to style that beard,
which I'll just stick in here.

00:02:29.741 --> 00:02:31.750
And let's just fix that up.

00:02:31.750 --> 00:02:36.471
So you can see our beard is a
black background, it's 5 by 5 pixels,

00:02:36.471 --> 00:02:40.525
it's got this 2 pixel border radius
to make it a little bit round,

00:02:40.525 --> 00:02:44.684
and it's using absolute
positioning scheme.

00:02:44.684 --> 00:02:48.488
Currently, the ``
shows up under the image.

00:02:48.488 --> 00:02:51.473
How do we get it to show up
on top of the face?

00:02:51.473 --> 00:02:55.271
We're using absolute positioning,
so that means that we should use

00:02:55.271 --> 00:02:59.827
the `top` and `left` properties
to say where it should actually

00:02:59.827 --> 00:03:02.073
get positioned,
now that it's absolute.

00:03:02.073 --> 00:03:07.923
So let's say `top: 80px;`,
and then `left:15px;`.

00:03:07.923 --> 00:03:09.422
Beautiful.

00:03:09.422 --> 00:03:13.750
Now that we've got that working in HTML,
let's make it work in JavaScript,

00:03:13.750 --> 00:03:18.865
so that the user dynamically creates this
`` every time they move their mouse.

00:03:18.865 --> 00:03:22.778
We'll go back down to our
JavaScript callback function.

00:03:22.778 --> 00:03:25.534
The first thing is to create a ``,

00:03:25.534 --> 00:03:31.406
which we can do with our
`document.createElement()` function--

00:03:31.406 --> 00:03:33.590
it's going to be a `div`.

00:03:33.590 --> 00:03:39.580
Second thing to do is to add that class:
`beard.className = "beard";`.

00:03:39.580 --> 00:03:42.198
So we've got this ``,
it's floating off in space.

00:03:42.198 --> 00:03:47.072
Final step, append it to the body.

00:03:47.072 --> 00:03:52.103
All right, so now we've basically done
in JavaScript what we had done in HTML,

00:03:52.103 --> 00:03:54.666
so we can delete this HTML.

00:03:54.666 --> 00:03:58.764
Now you should pause the talk-through,
and try clicking Winston.

00:03:58.764 --> 00:04:00.312
See what happens.

00:04:02.412 --> 00:04:04.933
Did you see the beard follicle show up?

00:04:04.933 --> 00:04:07.191
And did you try clicking multiple times?

00:04:07.191 --> 00:04:11.090
If you did, you probably noticed that
your second click did nothing--

00:04:11.090 --> 00:04:13.525
or at least it appeared to do nothing.

00:04:13.525 --> 00:04:17.863
That's because every `` has
the same `top` and `left` properties,

00:04:17.863 --> 00:04:21.081
so new ones just pile
on top of the old ones.

00:04:21.081 --> 00:04:25.493
We want the `` to show up
wherever the user's mouse is instead.

00:04:25.493 --> 00:04:30.386
How do we actually find out
where the user's mouse is?

00:04:30.386 --> 00:04:34.317
As it turns out, the browser
records a lot of information

00:04:34.317 --> 00:04:38.082
every time any user event happens,
like where it happens.

00:04:38.082 --> 00:04:41.018
And the browser gives you
that information every time

00:04:41.018 --> 00:04:43.224
it calls your event listener function.

00:04:43.224 --> 00:04:46.804
But where, how, can we get this
amazing information?

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

00:04:51.412 --> 00:04:56.074
That `e` here, is the event
information object.

00:04:56.074 --> 00:04:59.609
And the browser sends it as the first
argument whenever it calls

00:04:59.609 --> 00:05:02.129
an event listener callback function.

00:05:02.129 --> 00:05:06.178
We didn't need it before, so I didn't
bother writing out the arguments list.

00:05:06.178 --> 00:05:09.002
But now that we're going to use it,
I'm giving it a name, to make it

00:05:09.002 --> 00:05:11.594
easy to reference inside the function.

00:05:11.594 --> 00:05:14.966
Remember that in JavaScript, a function
can be called with any number

00:05:14.966 --> 00:05:18.588
of arguments, even if the function
doesn't use or refer to any of them.

00:05:18.588 --> 00:05:22.701
So we were always getting this
information, we just didn't know it.

00:05:22.701 --> 00:05:28.278
Now I'm going to log out `e`:
`console.log(e)`.

00:05:28.278 --> 00:05:32.162
Pause the talk-through, click Winston,
and check your console.

00:05:32.162 --> 00:05:34.410
You should see the
event object logged out,

00:05:34.410 --> 00:05:37.151
and you can skim through
all the properties on it.

00:05:38.580 --> 00:05:43.267
There are two event properties in
particular that we're very interested in:

00:05:43.267 --> 00:05:45.594
`clientX` and `clientY`.

00:05:45.594 --> 00:05:49.314
They record the x and y of the event,
and that's what we're going to use

00:05:49.314 --> 00:05:51.155
to position the beard.

00:05:51.155 --> 00:06:02.015
Let's set the top of the beard equal to
e.clientY, plus "px", for the units.

00:06:02.015 --> 00:06:10.323
And set the left equal to
e.clientX, plus "px" for units.

00:06:10.323 --> 00:06:14.320
Now pause and try mousing over.

00:06:14.320 --> 00:06:16.027
Draw Winston a beard.

00:06:17.973 --> 00:06:19.454
Pretty cool, huh?

00:06:19.454 --> 00:06:23.157
I bet you can imagine all sorts of fun
painting apps that you can make,

00:06:23.157 --> 00:06:25.559
using clientX and clientY.

00:06:25.559 --> 00:06:28.793
And as you saw in the console,
there were a bunch of other properties

00:06:28.793 --> 00:06:31.251
on the event object
that you could use as well.

00:06:31.251 --> 00:06:35.354
The most useful, I think, are
the keyboard-related ones.

00:06:35.354 --> 00:06:38.107
So that you can find out
what keys the user was pressing

00:06:38.107 --> 00:06:40.541
when the event happened,
and use that to make a

00:06:40.541 --> 00:06:44.352
keyboard-accessible interface, 
or a really fun game.

00:06:44.352 --> 00:06:47.206
Oh, and one more thing:

00:06:47.206 --> 00:06:49.700
you don't have to call this argument `e`.

00:06:49.700 --> 00:06:57.312
That's typical, but some developers
call it `evt`, or `event`.

00:06:57.312 --> 00:07:00.602
It doesn't matter what you call it,
as long as it's referring to

00:07:00.602 --> 00:07:03.695
the first argument that the browser
passes to your function,

00:07:03.695 --> 00:07:09.485
and as long as you then
refer to it that way later as well.

00:07:09.485 --> 00:07:13.281
If you're having trouble with it,
make sure you use console.log

00:07:13.281 --> 00:07:15.639
to help you debug what's going on.

00:07:15.639 --> 00:07:17.235
When you're a web developer,

00:07:17.235 --> 00:07:21.897
the console is pretty much
your best friend ever-- use it!