1
00:00:00,556 --> 00:00:03,450
I've got this webpage with a
picture of Winston.

2
00:00:03,450 --> 00:00:06,556
It's getting cold here,
and Winston is getting old,

3
00:00:06,556 --> 00:00:08,646
so he wishes he had a beard.

4
00:00:08,646 --> 00:00:10,750
I could draw the beard myself.

5
00:00:10,750 --> 00:00:13,523
But I think it'd be way cooler if
the user could draw the beard

6
00:00:13,523 --> 00:00:16,412
on Winston themselves,
however they want it to look--

7
00:00:16,412 --> 00:00:20,380
a long beard, some stubble,
whatever they're into.

8
00:00:20,380 --> 00:00:22,711
So how could we do that?

9
00:00:22,711 --> 00:00:28,693
One way is to add an event listener
for the `mouseMove` event on the image,

10
00:00:28,693 --> 00:00:33,031
so that our function would get called
whenever the user moved their mouse

11
00:00:33,031 --> 00:00:34,386
over the face.

12
00:00:34,386 --> 00:00:37,614
Let's set that up, using 
what we just learned.

13
00:00:37,614 --> 00:00:41,412
The first step is to find
the element, the image.

14
00:00:41,412 --> 00:00:43,231
[typing]

15
00:00:47,009 --> 00:00:50,281
..."face", since I had that nice ID.

16
00:00:50,281 --> 00:00:53,866
The second step is to define
the callback function.

17
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,

18
00:00:58,267 --> 00:01:01,546
and we'll make it do more later.

19
00:01:01,546 --> 00:01:05,347
[typing]

20
00:01:11,720 --> 00:01:13,182
Okay.

21
00:01:13,182 --> 00:01:17,946
And the final step is to
connect this to this,

22
00:01:17,946 --> 00:01:21,941
to make sure that this gets called
when this gets the `mouseMove` event.

23
00:01:21,941 --> 00:01:27,854
So we'll write
`face.addEventListener("mousemove",`

24
00:01:27,854 --> 00:01:32,070
and then pass it the name
of the function, `onMouseMove`.

25
00:01:32,070 --> 00:01:36,590
Now, pause the talk-through, and try
moving your mouse over the face.

26
00:01:36,590 --> 00:01:38,405
Do you see the message?

27
00:01:39,885 --> 00:01:43,856
Okay, hopefully you saw that
we've got that event working.

28
00:01:43,856 --> 00:01:47,344
But it's not what we want
our event listener to do.

29
00:01:47,344 --> 00:01:50,450
We want it to draw, not to write text.

30
00:01:50,450 --> 00:01:53,356
How can we draw in a webpage?

31
00:01:53,356 --> 00:01:58,596
We could bring in the `` tag
and draw pixels on it, like we do

32
00:01:58,596 --> 00:02:00,732
with ProcessingJS programs here.

33
00:02:00,732 --> 00:02:06,502
But all we're drawing is a beard,
which is really a bunch of black dots.

34
00:02:06,502 --> 00:02:11,566
So we could just create a `` for
each dot, and position that ``

35
00:02:11,566 --> 00:02:13,551
with absolute positioning.

36
00:02:13,551 --> 00:02:18,310
Here, let me show you with
one beard follicle.

37
00:02:18,310 --> 00:02:24,524
So I'll make a `` with class `beard`,
and then I've got some nice CSS

38
00:02:24,524 --> 00:02:29,741
to style that beard,
which I'll just stick in here.

39
00:02:29,741 --> 00:02:31,750
And let's just fix that up.

40
00:02:31,750 --> 00:02:36,471
So you can see our beard is a
black background, it's 5 by 5 pixels,

41
00:02:36,471 --> 00:02:40,525
it's got this 2 pixel border radius
to make it a little bit round,

42
00:02:40,525 --> 00:02:44,684
and it's using absolute
positioning scheme.

43
00:02:44,684 --> 00:02:48,488
Currently, the ``
shows up under the image.

44
00:02:48,488 --> 00:02:51,473
How do we get it to show up
on top of the face?

45
00:02:51,473 --> 00:02:55,271
We're using absolute positioning,
so that means that we should use

46
00:02:55,271 --> 00:02:59,827
the `top` and `left` properties
to say where it should actually

47
00:02:59,827 --> 00:03:02,073
get positioned,
now that it's absolute.

48
00:03:02,073 --> 00:03:07,923
So let's say `top: 80px;`,
and then `left:15px;`.

49
00:03:07,923 --> 00:03:09,422
Beautiful.

50
00:03:09,422 --> 00:03:13,750
Now that we've got that working in HTML,
let's make it work in JavaScript,

51
00:03:13,750 --> 00:03:18,865
so that the user dynamically creates this
`` every time they move their mouse.

52
00:03:18,865 --> 00:03:22,778
We'll go back down to our
JavaScript callback function.

53
00:03:22,778 --> 00:03:25,534
The first thing is to create a ``,

54
00:03:25,534 --> 00:03:31,406
which we can do with our
`document.createElement()` function--

55
00:03:31,406 --> 00:03:33,590
it's going to be a `div`.

56
00:03:33,590 --> 00:03:39,580
Second thing to do is to add that class:
`beard.className = "beard";`.

57
00:03:39,580 --> 00:03:42,198
So we've got this ``,
it's floating off in space.

58
00:03:42,198 --> 00:03:47,072
Final step, append it to the body.

59
00:03:47,072 --> 00:03:52,103
All right, so now we've basically done
in JavaScript what we had done in HTML,

60
00:03:52,103 --> 00:03:54,666
so we can delete this HTML.

61
00:03:54,666 --> 00:03:58,764
Now you should pause the talk-through,
and try clicking Winston.

62
00:03:58,764 --> 00:04:00,312
See what happens.

63
00:04:02,412 --> 00:04:04,933
Did you see the beard follicle show up?

64
00:04:04,933 --> 00:04:07,191
And did you try clicking multiple times?

65
00:04:07,191 --> 00:04:11,090
If you did, you probably noticed that
your second click did nothing--

66
00:04:11,090 --> 00:04:13,525
or at least it appeared to do nothing.

67
00:04:13,525 --> 00:04:17,863
That's because every `` has
the same `top` and `left` properties,

68
00:04:17,863 --> 00:04:21,081
so new ones just pile
on top of the old ones.

69
00:04:21,081 --> 00:04:25,493
We want the `` to show up
wherever the user's mouse is instead.

70
00:04:25,493 --> 00:04:30,386
How do we actually find out
where the user's mouse is?

71
00:04:30,386 --> 00:04:34,317
As it turns out, the browser
records a lot of information

72
00:04:34,317 --> 00:04:38,082
every time any user event happens,
like where it happens.

73
00:04:38,082 --> 00:04:41,018
And the browser gives you
that information every time

74
00:04:41,018 --> 00:04:43,224
it calls your event listener function.

75
00:04:43,224 --> 00:04:46,804
But where, how, can we get this
amazing information?

76
00:04:46,804 --> 00:04:51,412
I'll type one letter, to give you a hint.

77
00:04:51,412 --> 00:04:56,074
That `e` here, is the event
information object.

78
00:04:56,074 --> 00:04:59,609
And the browser sends it as the first
argument whenever it calls

79
00:04:59,609 --> 00:05:02,129
an event listener callback function.

80
00:05:02,129 --> 00:05:06,178
We didn't need it before, so I didn't
bother writing out the arguments list.

81
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

82
00:05:09,002 --> 00:05:11,594
easy to reference inside the function.

83
00:05:11,594 --> 00:05:14,966
Remember that in JavaScript, a function
can be called with any number

84
00:05:14,966 --> 00:05:18,588
of arguments, even if the function
doesn't use or refer to any of them.

85
00:05:18,588 --> 00:05:22,701
So we were always getting this
information, we just didn't know it.

86
00:05:22,701 --> 00:05:28,278
Now I'm going to log out `e`:
`console.log(e)`.

87
00:05:28,278 --> 00:05:32,162
Pause the talk-through, click Winston,
and check your console.

88
00:05:32,162 --> 00:05:34,410
You should see the
event object logged out,

89
00:05:34,410 --> 00:05:37,151
and you can skim through
all the properties on it.

90
00:05:38,580 --> 00:05:43,267
There are two event properties in
particular that we're very interested in:

91
00:05:43,267 --> 00:05:45,594
`clientX` and `clientY`.

92
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

93
00:05:49,314 --> 00:05:51,155
to position the beard.

94
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.

95
00:06:02,015 --> 00:06:10,323
And set the left equal to
e.clientX, plus "px" for units.

96
00:06:10,323 --> 00:06:14,320
Now pause and try mousing over.

97
00:06:14,320 --> 00:06:16,027
Draw Winston a beard.

98
00:06:17,973 --> 00:06:19,454
Pretty cool, huh?

99
00:06:19,454 --> 00:06:23,157
I bet you can imagine all sorts of fun
painting apps that you can make,

100
00:06:23,157 --> 00:06:25,559
using clientX and clientY.

101
00:06:25,559 --> 00:06:28,793
And as you saw in the console,
there were a bunch of other properties

102
00:06:28,793 --> 00:06:31,251
on the event object
that you could use as well.

103
00:06:31,251 --> 00:06:35,354
The most useful, I think, are
the keyboard-related ones.

104
00:06:35,354 --> 00:06:38,107
So that you can find out
what keys the user was pressing

105
00:06:38,107 --> 00:06:40,541
when the event happened,
and use that to make a

106
00:06:40,541 --> 00:06:44,352
keyboard-accessible interface, 
or a really fun game.

107
00:06:44,352 --> 00:06:47,206
Oh, and one more thing:

108
00:06:47,206 --> 00:06:49,700
you don't have to call this argument `e`.

109
00:06:49,700 --> 00:06:57,312
That's typical, but some developers
call it `evt`, or `event`.

110
00:06:57,312 --> 00:07:00,602
It doesn't matter what you call it,
as long as it's referring to

111
00:07:00,602 --> 00:07:03,695
the first argument that the browser
passes to your function,

112
00:07:03,695 --> 00:07:09,485
and as long as you then
refer to it that way later as well.

113
00:07:09,485 --> 00:07:13,281
If you're having trouble with it,
make sure you use console.log

114
00:07:13,281 --> 00:07:15,639
to help you debug what's going on.

115
00:07:15,639 --> 00:07:17,235
When you're a web developer,

116
00:07:17,235 --> 00:07:21,897
the console is pretty much
your best friend ever-- use it!