1
00:00:08,140 --> 00:00:14,620
Hey, everyone, in this lesson, we are going to talk about events, I have to tell you, I've been

2
00:00:14,620 --> 00:00:22,450
anxious to talk about this because now this is going to open a new door for us, as now we'll be able

3
00:00:22,450 --> 00:00:24,390
to interact with the user.

4
00:00:24,520 --> 00:00:30,950
So when we talk about events in JavaScript, it's about actions that happen inside the browser.

5
00:00:31,300 --> 00:00:33,460
So here we have a few examples.

6
00:00:33,820 --> 00:00:42,430
So we have an event called UNCLICK and this is going to be fired when the user clicks something or if

7
00:00:42,430 --> 00:00:50,650
we are talking about a mobile device, when the user touches some element in the page, we also have

8
00:00:50,650 --> 00:00:56,380
the on change event, which is fired when some e-mail element changes.

9
00:00:56,650 --> 00:00:59,100
This is commonly used with form fuds.

10
00:00:59,380 --> 00:01:06,850
So if we have a form filled and then the user starts writing something on it, this event is going to

11
00:01:06,850 --> 00:01:10,570
be fired because this input field is changing.

12
00:01:10,870 --> 00:01:13,890
We have the on mouseover on mouse out.

13
00:01:14,260 --> 00:01:16,450
We also have the on key down.

14
00:01:16,930 --> 00:01:22,630
These are just some examples that we are going to use in this lesson.

15
00:01:24,240 --> 00:01:32,190
So let's start out with the unclick on mouseover and on miles out, so here we have three buttons.

16
00:01:32,460 --> 00:01:36,690
So as you can see, this is the age TML for these buttons.

17
00:01:37,050 --> 00:01:40,950
So let's create some events for each of these buttons.

18
00:01:41,110 --> 00:01:43,560
So the first one is going to do something.

19
00:01:43,560 --> 00:01:51,530
If we click on it, this next one is going to do something just by moving the cursor over it.

20
00:01:51,900 --> 00:01:59,340
And this last one is just going to execute something after we move the cursor over it.

21
00:01:59,340 --> 00:02:03,660
When we move the cursor out of it, we're going to do something.

22
00:02:04,210 --> 00:02:09,840
So let's just copy all this so we can see the HTML for the buttons.

23
00:02:10,350 --> 00:02:12,450
Let's go to Visual Studio Code.

24
00:02:13,360 --> 00:02:16,660
And I'm just going to comment all this.

25
00:02:19,570 --> 00:02:21,630
So we don't have any errors.

26
00:02:26,780 --> 00:02:34,610
And now we can see that we have these buttons on our page, so let's try to monitor some events on these

27
00:02:34,610 --> 00:02:35,290
elements.

28
00:02:35,540 --> 00:02:44,360
So the first thing I'm going to do, as always, is using the document that gets element by I.D. So

29
00:02:45,140 --> 00:02:48,720
we're always going to do this to select elements.

30
00:02:48,920 --> 00:02:52,160
So the idea of the first button is click me.

31
00:02:54,250 --> 00:03:02,140
So now, instead of using the inner HDMI property, which is what we've been doing so far now we're

32
00:03:02,140 --> 00:03:04,740
going to create an event for this button.

33
00:03:04,750 --> 00:03:09,160
And the name of this event is on Click.

34
00:03:11,440 --> 00:03:14,830
So now we need to assign a function to it.

35
00:03:16,820 --> 00:03:26,330
So function open and close, parentheses, open and close, curly braces, and inside here we're going

36
00:03:26,330 --> 00:03:31,350
to write all the code that needs to be executed when this event happens.

37
00:03:31,700 --> 00:03:37,980
So when someone clicks this button, we can choose what needs to be executed.

38
00:03:38,180 --> 00:03:41,270
So in this case, let's just do an alert.

39
00:03:44,950 --> 00:03:49,570
And let's send a message like you collect.

40
00:03:51,660 --> 00:03:52,470
The button.

41
00:03:53,500 --> 00:03:54,610
Let's save this.

42
00:03:55,750 --> 00:04:04,510
And now refreshing the page, we have this button here, if we click it, then we can see that our code

43
00:04:04,510 --> 00:04:05,920
has been executed.

44
00:04:06,830 --> 00:04:07,580
Pretty cool.

45
00:04:07,760 --> 00:04:13,940
Now, let's do the same thing for the other two buttons, so I'm just going to copy this.

46
00:04:16,640 --> 00:04:21,560
So the second example of event is going to be the on.

47
00:04:23,960 --> 00:04:24,740
Mou's.

48
00:04:26,970 --> 00:04:37,140
Over event, and now let's just right, you move the cursor over me and the ID of this button is hovering

49
00:04:37,140 --> 00:04:37,410
me.

50
00:04:39,810 --> 00:04:46,500
If you want, you can assign different events for the same element, but this is not what I'm trying

51
00:04:46,500 --> 00:04:52,380
to do right now, right now I'm going to define different events for three different buttons.

52
00:04:54,430 --> 00:05:03,670
So the third element is going to be the leave me button, and now the name of the event is on mouthes.

53
00:05:05,000 --> 00:05:05,600
Out.

54
00:05:11,200 --> 00:05:15,940
Let me just adjust this so you move the cursor out.

55
00:05:17,460 --> 00:05:18,060
Of me.

56
00:05:19,100 --> 00:05:20,180
Let's save this.

57
00:05:20,360 --> 00:05:26,880
Let's go back to our page, refresh it, and now we have three different events.

58
00:05:27,170 --> 00:05:36,740
So for this first button, when we clicked, then we fired the alert statement, then this next one

59
00:05:37,220 --> 00:05:39,410
when we move the cursor over it.

60
00:05:39,420 --> 00:05:40,900
So let's try it out.

61
00:05:41,210 --> 00:05:42,410
So I just did it.

62
00:05:42,590 --> 00:05:45,440
And then we can see that the alert has been fired.

63
00:05:47,060 --> 00:05:51,660
And in the last one, I'm just going to move my cursor over it.

64
00:05:51,950 --> 00:05:57,200
Nothing is happening and when I move out, then the event is fired.

65
00:05:59,470 --> 00:06:06,460
So dealing with events is really going to change everything, because now let's just go to Apple Dotcom.

66
00:06:09,390 --> 00:06:17,880
And now I'm just going to inspect this page, I'm going to use this mobile simulator, so let's simulate

67
00:06:17,880 --> 00:06:22,200
a, I don't know, iPhone six, seven or eight.

68
00:06:22,530 --> 00:06:26,220
So this is how this website looks on mobile.

69
00:06:26,460 --> 00:06:33,450
And we can see that when we click this menu icon, then we have the full menu.

70
00:06:33,630 --> 00:06:38,020
When we click this close icon, the menu is closed.

71
00:06:38,370 --> 00:06:41,370
So this is done using events.

72
00:06:41,700 --> 00:06:48,690
When we have a click event on this button, then we are going to change the success of this menu.

73
00:06:49,020 --> 00:06:56,410
When we click this other close button, then we're going to change the success of this menu again.

74
00:06:56,880 --> 00:07:02,310
So this is the starting point of what we need to do to make our page interactive.

75
00:07:02,700 --> 00:07:08,520
So now one more interesting thing I want to talk about is the on key down event.

76
00:07:09,060 --> 00:07:14,270
This event is going to be fired when we press a key on our keyboard.

77
00:07:15,060 --> 00:07:17,130
So this is an example.

78
00:07:17,310 --> 00:07:18,960
Let's just copy this.

79
00:07:19,150 --> 00:07:21,210
Let's go to Visual Studio Code.

80
00:07:22,300 --> 00:07:24,510
I can just erase this now.

81
00:07:28,480 --> 00:07:36,430
So here we can see that we can apply these events to specific elements, so in this case, we are just

82
00:07:36,430 --> 00:07:45,640
selecting an element with the idea of click me, but we can also apply these events to the document

83
00:07:45,640 --> 00:07:46,450
object.

84
00:07:46,780 --> 00:07:53,380
So no matter where I am on the page, I'm always going to monitor this event.

85
00:07:53,950 --> 00:08:03,070
So I'm just monitoring a on key down event and any time it happens, I'm just going to send this alert.

86
00:08:03,340 --> 00:08:04,540
So let's save this.

87
00:08:05,630 --> 00:08:09,140
Going back there, I just refreshed the page.

88
00:08:09,320 --> 00:08:14,300
Nothing is happening, and now I'm just going to press a key on my keyboard.

89
00:08:14,900 --> 00:08:18,050
So I just did it and now I can see the alert.

90
00:08:18,260 --> 00:08:22,540
I'm going to click, OK, I'm going to press another key.

91
00:08:22,760 --> 00:08:27,800
And now every time I press a key, I'm going to get this.

92
00:08:29,830 --> 00:08:36,750
So this is cool, but it would be much better if we could monitor a specific key.

93
00:08:36,940 --> 00:08:42,730
So this is possible because we can pass an event argument.

94
00:08:44,790 --> 00:08:51,750
So any time this happens, any time the on key down happens, we can just do.

95
00:08:57,600 --> 00:09:06,120
Console that log event because we want to see what this event argument is going to bring.

96
00:09:06,660 --> 00:09:07,920
So let's do this.

97
00:09:08,310 --> 00:09:11,490
Let's save and refresh the page.

98
00:09:12,090 --> 00:09:14,550
Let me just open the inspector.

99
00:09:15,180 --> 00:09:17,080
So here we have the console.

100
00:09:17,280 --> 00:09:19,980
So now I'm just going to press any key.

101
00:09:20,730 --> 00:09:22,040
So I just did it.

102
00:09:22,230 --> 00:09:33,090
And as you can see, this event object has a lot of properties and one very important property.

103
00:09:33,120 --> 00:09:40,260
If we want to identify which key has been pressed is this key code property.

104
00:09:40,800 --> 00:09:43,800
So now let's go back to Visual Studio.

105
00:09:44,070 --> 00:09:51,510
And instead of printing the event, I just wanted to show you this, that any time an event happens,

106
00:09:51,870 --> 00:09:59,290
if you pass the event as an argument, then you have a lot of information of what just happened.

107
00:09:59,610 --> 00:10:06,060
So in this case, what's interesting for us is knowing what is the key code so key.

108
00:10:08,650 --> 00:10:09,220
Code.

109
00:10:13,150 --> 00:10:14,680
Refreshing the page.

110
00:10:15,430 --> 00:10:18,040
Let me just take this mobile.

111
00:10:19,860 --> 00:10:21,240
Simulator out.

112
00:10:21,390 --> 00:10:29,820
OK, now I'm just going to press letter A, as you can see, this is the code for a letter A. I'm just

113
00:10:29,820 --> 00:10:33,120
going to press letter B, so six to six.

114
00:10:33,360 --> 00:10:35,250
I'm just going to press No.

115
00:10:35,280 --> 00:10:35,910
One.

116
00:10:37,050 --> 00:10:45,450
Now I'm going to press Latapy, so here we have the codes for each of the keys on our keyboard, if

117
00:10:45,450 --> 00:10:51,830
you want to know more about it, I just left the link to all the Unicode characters.

118
00:10:51,840 --> 00:10:54,060
So let me just click this.

119
00:10:57,730 --> 00:11:07,600
So now let's click on the A and as you can see, we have the HTML code of 65, so that's what we are

120
00:11:07,600 --> 00:11:11,050
looking for when we are monitoring the event.

121
00:11:11,230 --> 00:11:16,220
So any time we press a we want to do something, how can we do it?

122
00:11:16,900 --> 00:11:18,460
Let's go back to the code.

123
00:11:18,970 --> 00:11:23,310
So instead of doing this, we are just going to start an if statement.

124
00:11:23,920 --> 00:11:26,400
So we're going to talk more about conditionals.

125
00:11:26,830 --> 00:11:29,500
But this part we already know how to do.

126
00:11:29,710 --> 00:11:30,610
So if.

127
00:11:32,520 --> 00:11:35,550
Event, dot key.

128
00:11:37,630 --> 00:11:38,200
Code.

129
00:11:40,460 --> 00:11:41,840
Is 65.

130
00:11:44,720 --> 00:11:46,520
Then we can do something.

131
00:11:47,900 --> 00:11:50,030
So let's send an alert.

132
00:11:53,270 --> 00:11:55,100
That says you've.

133
00:12:01,100 --> 00:12:02,330
Just pressed.

134
00:12:04,080 --> 00:12:05,130
The key.

135
00:12:06,800 --> 00:12:08,450
All right, let's save this.

136
00:12:11,300 --> 00:12:17,870
And now I'm just going to press any other key on my keyboard, so I'm going to press be nothing is happening.

137
00:12:18,200 --> 00:12:19,910
Oh, nothing happened.

138
00:12:20,150 --> 00:12:21,740
Why nothing happened.

139
00:12:22,490 --> 00:12:32,030
And when I click a then we can see that the code is being executed because now the event is being monitored.

140
00:12:32,030 --> 00:12:40,580
Actually, any time we press a key, this event is being monitored because we are just asking JavaScript

141
00:12:40,670 --> 00:12:43,060
to monitor this on key down.

142
00:12:43,490 --> 00:12:48,800
So any time we press any key is just going to execute this function.

143
00:12:49,160 --> 00:12:56,780
But since we have this conditional, if this is not true, so if the latter is not a, then we are not

144
00:12:56,780 --> 00:12:57,920
going to do anything.

145
00:12:58,640 --> 00:13:02,450
We can do a test using an else statement.

146
00:13:04,060 --> 00:13:09,040
So this time, let's let's just send the console, the log.

147
00:13:19,420 --> 00:13:21,590
That's right, you've just pressed.

148
00:13:25,650 --> 00:13:28,830
A different key, so let's save this.

149
00:13:30,310 --> 00:13:38,090
Let's refresh the page, so now I'm just going to press letter P, we can see the message on the console.

150
00:13:38,530 --> 00:13:43,440
Now, I'm going to press you another message to the council.

151
00:13:43,540 --> 00:13:49,110
Now I'm going to press a and now we can see the alert being fired.

152
00:13:49,120 --> 00:13:54,120
So now we are monitoring a specific key of our keyboard.

153
00:13:54,880 --> 00:13:59,140
So this is just the starting point of working with events.

154
00:13:59,530 --> 00:14:11,590
So we know that we can use the get element by method to select an element and then just monitor an event

155
00:14:11,920 --> 00:14:13,180
to this element.

156
00:14:13,390 --> 00:14:16,720
So this is one way of monitoring events.

157
00:14:17,020 --> 00:14:24,840
So I want to show you a different way of doing this, which is by using an e-mail attribute.

158
00:14:25,270 --> 00:14:29,830
So let's go to Visual Studio Code and now let's just comment.

159
00:14:30,980 --> 00:14:32,870
This lines of code.

160
00:14:37,860 --> 00:14:45,510
So now we are not monitoring anything on this click me button, let's go back there, let's refresh

161
00:14:45,510 --> 00:14:46,170
the page.

162
00:14:46,350 --> 00:14:51,090
So if I click on this button, we can see that nothing is happening.

163
00:14:52,050 --> 00:14:53,430
So going back there.

164
00:14:55,200 --> 00:15:04,350
If we go to the HTML page, so this is the click me button, and now we can start an attribute that

165
00:15:04,350 --> 00:15:07,280
has the same name of the event.

166
00:15:07,500 --> 00:15:11,010
So the attribute is going to be called on Click.

167
00:15:15,220 --> 00:15:16,540
Then we just.

168
00:15:17,570 --> 00:15:25,520
Do it like any other attributes, so the equals sign and then quotation marks and then inside here we

169
00:15:25,520 --> 00:15:32,070
can just tell the name of the function that should be executed when this button is clicked.

170
00:15:32,420 --> 00:15:36,140
So in this case, let's create a function called show.

171
00:15:39,430 --> 00:15:47,890
Alert, then we just need to open and close parentheses, so by doing this, nothing is going to happen

172
00:15:47,890 --> 00:15:52,170
yet because we don't have a function called show alert.

173
00:15:52,360 --> 00:15:56,200
So what we need to do in our code is just create one.

174
00:15:56,450 --> 00:15:59,200
So let's create a function called show.

175
00:16:00,340 --> 00:16:01,120
Alert.

176
00:16:04,360 --> 00:16:06,520
And now we can just to alert.

177
00:16:13,240 --> 00:16:18,640
I just forgot the function, key word, so now this is good.

178
00:16:21,320 --> 00:16:24,830
So let's ride you collect the button.

179
00:16:26,090 --> 00:16:27,650
So saving this.

180
00:16:29,310 --> 00:16:36,650
And refreshing the page now when we click the button, we can see that this function is being executed.

181
00:16:36,780 --> 00:16:42,170
So this is another way of monitoring events on specific elements.

182
00:16:42,450 --> 00:16:49,820
We can just get the names of the events, use them as attributes and then assign a function.

183
00:16:50,220 --> 00:16:51,660
So that was it for now.

184
00:16:51,660 --> 00:16:57,200
In the next videos, we are going to have opportunities to explore more about events.

185
00:16:57,900 --> 00:16:59,010
So I'll see you then.