Original subtitles

1 1

Let's now make our application actually do something 2

2

when we click on the Check button. 3

3

So this is going to be the first time that our code 4

4

reacts to something that happens in the DOM. 5

5

And for that, 6

6

we need to use an event listener. 7

7

Now, an event is something that happens on the page. 8

8

For example, a mouse click, 9

9

or a mouse moving, 10

10

or a key press, 11

11

or many other events. 12

12

Then, with an event listener, 13

13

we can wait for a certain event to happen, 14

14

and then react to it. 15

15

So let's try it out now. 16

16

And let's actually start by getting rid of this code 17

17

because this has actually nothing yet to do 18

18

with the application. 19

19

But now we will actually start developing 20

20

the application step by step. 21

21

Anyway, in order to listen for events, 22

22

we first need to select the element 23

23

where the event should happen. 24

24

And in this case, 25

25

we want to listen to the event on this 26

26

button element here, 27

27

so this Check button. 28

28

Because this is where the click 29

29

that we're interested in will happen. 30

30

So when we click on this button, 31

31

something should happen. 32

32

So let's select that button element. 33

33

So querySelector. 34

34

And then once more, we need to go ahead 35

35

and grab the class name of this button. 36

36

And so here it is. 37

37

Now here, we actually have two class names, 38

38

we have button and check. 39

39

But the button class here is the more generic one, 40

40

which also applies to this other button, 41

41

this Again button here. 42

42

So the class that we are interested in 43

43

is just the check class. 44

44

So again, the dot for the class selector, 45

45

and then check. 46

46

And so this will select the button element itself. 47

47

So just as before, 48

48

this here will then return an element. 49

49

And now on that element, 50

50

we can call the addEventListener method. 51

51

So addEventListener. 52

52

And this is a method 53

53

and so we need to call it once more using the parenthesis. 54

54

Now, there are actually multiple ways 55

55

to listen for events in JavaScript. 56

56

But using this addEventListener method 57

57

is the best one and also the most used one. 58

58

Okay. 59

59

Now into this addEventListener method, 60

60

we first need to pass in the type of the event. 61

61

And in this case, it's just a simple click. 62

62

So the name of the event is actually Click, 63

63

and so that is the first argument 64

64

that we pass here into this function. 65

65

But now, we actually need 66

66

to tell the event listener what to do. 67

67

So basically, we need to specify the reaction 68

68

to the Click event. 69

69

And we do that by defining a function. 70

70

And that function will contain exactly the code 71

71

that should be executed whenever this click event happens 72

72

on this Check button. 73

73

And that function is going to be called the event handler. 74

74

Now, this method, this addEventListener method here 75

75

is a special kind of function. 76

76

That's because as a second argument, 77

77

it expects this event handler function 78

78

that we just talked about. 79

79

So again, here as the second argument, 80

80

we now need to pass in a function value as an argument. 81

81

And that's probably quite confusing, I know. 82

82

But that's no problem at this point. 83

83

This will make more sense, 84

84

as we do this over and over again. 85

85

For now, just remember what you learned 86

86

in the fundamental section, 87

87

which is that a function is also just a value. 88

88

And if a function is just a value, 89

89

then we can also pass it into another function 90

90

as an argument, 91

91

just like any other value, like a string or a number. 92

92

So let's create that function here. 93

93

And just like before, we do that writing function, 94

94

and then the curly braces for the function body. 95

95

Okay. 96

96

And now all we have to do is to specify what should happen. 97

97

And to start, what we want to happen 98

98

is to simply log to the console, 99

99

the value that is here in this input field. 100

100

So console.log, 101

101

document.querySelector. 102

102

And actually, we already have this code up there, 103

103

but let's just write it again. 104

104

So remember that this element here has the class guess. 105

105

And then from this element, we take the value. 106

106

Okay? 107

107

And that's it. 108

108

So let's save it. 109

109

Let's test it, and then we will just go over this again. 110

110

So I will write nine. 111

111

And now when I click this button, 112

112

this nine should appear down here in the console. 113

113

And it does. 114

114

Okay, great. 115

115

Great job. 116

116

So let's quickly go over this again. 117

117

So we selected this button here using querySelector. 118

118

And then we use the addEventListener method on that element 119

119

to attach an event handler. 120

120

And that event handler is this function here. 121

121

Okay, so this is, again, just a function expression. 122

122

So it's similar to when we do just, for example, 123

123

this and then just log something to the console. 124

124

So this is also just a function value, right? 125

125

And then we can assign that to a variable. 126

126

And then we call all of this a function expression. 127

127

You will remember that, right? 128

128

And so here, basically, we did the exact same thing. 129

129

So we wrote here a function 130

130

that has a similar format as this. 131

131

We simply did not assign it to any variable. 132

132

Instead, we passed it directly here 133

133

into the addEventListener method. 134

134

So as the first argument, 135

135

we had the name of the event that we're listening for, 136

136

which is a click. 137

137

And then as the second argument, 138

138

we have this function value. 139

139

And this function simply contains the code 140

140

that we want to execute whenever the event happens. 141

141

Also, note that we do not call 142

142

this function here anywhere, right? 143

143

We only define the function here, 144

144

and then pass it into the event handler. 145

145

But it is the JavaScript engine 146

146

who will call this function as soon as the event happens. 147

147

Okay? 148

148

That's important to understand. 149

149

So again, this function will not be called immediately 150

150

once the script here is executed. 151

151

This function will only be called 152

152

as soon as the event happens. 153

153

And you can also see that here in the code, 154

154

because, well, we don't call the function anywhere 155

155

using the parenthesis, right? 156

156

And so, now, again, we're just really passing it 157

157

into the addEventListener function. 158

158

So this works just fine. 159

159

Now, let's try here, another number. 160

160

So now we get 99. 161

161

And of course, we can also do some DOM manipulation here. 162

162

For example, let's just, for example, 163

163

grab this piece of code here and paste it here as well. 164

164

Give it a save. 165

165

And now when I click this here, 166

166

not only the value from this input field 167

167

will get logged to the console, 168

168

but also this message here will change. 169

169

So the text content of this element. 170

170

So you see, correct number and now 22. 171

171

Now, of course, this has nothing to do with the game yet. 172

172

So I just wanted to show you that. 173

173

But let me get rid of this, actually. 174

174

But now let's actually start to slowly build up the game. 175

175

So in the real game, 176

176

when we click on this button here, 177

177

of course, this number from this input field 178

178

will have to get retrieved. 179

179

So let's start with that. 180

180

And so we already did this here, 181

181

but instead of just logging it to the console, 182

182

let's actually save it into a variable. 183

183

So const, guess, and then equal this. 184

184

Okay? 185

185

And now let's log it to the console just so we see it. 186

186

And so this should now do the exact same thing. 187

187

But we first stored that value into a variable, 188

188

and then we log it afterwards. 189

189

All right. 190

190

Now, remember how I said in the fundamental section, 191

191

that usually whenever we get something 192

192

from the user interface, for example, from an input field, 193

193

it usually always is a string. 194

194

So let me show that to you here now. 195

195

So again, we use the type of operator 196

196

that we already learned before. 197

197

And now when I put this here, we indeed get a string. 198

198

However, we will eventually have to compare this number here 199

199

with a randomly generated number. 200

200

So that's going to be basically the secret number 201

201

that we will have to guess. 202

202

And so if we want to compare numbers with numbers, 203

203

we need to first convert this string to a number. 204

204

So let's do that here, using the number of function 205

205

that we also already used before. 206

206

And so now, let's print both here. 207

207

So the guess and then the type. 208

208

And now we get five. 209

209

And now it's also here in purple, 210

210

and we get that it's a number. 211

211

And now, let's start to implement the game logic 212

212

here a little bit. 213

213

But just the simplest case, 214

214

which is the case that there's a actually no guess. 215

215

So usually in an application like this, 216

216

which has an input value from the user, 217

217

the first thing to do 218

218

is to check if there actually is a value. 219

219

And if there is no value, well, 220

220

then we can print something to the console as a response. 221

221

So we can say, if there is no guess. 222

222

And let me actually show you how that would look like. 223

223

So if I click on the button now, indeed, we get zero, 224

224

and zero is a false value. 225

225

Okay? 226

226

And so guess our here, in this logical context 227

227

of the FL statement, will be false. 228

228

So that's what we learned in the fundamental section, right? 229

229

So any value that is here in this condition part 230

230

will always get evaluated to a Boolean. 231

231

And so since this guess, is zero, in this case, 232

232

and zero is a false value, it will be converted to false. 233

233

But we want something to happen whenever this is false. 234

234

And so here, we actually want a true value, right? 235

235

And so we simply use the negation operator 236

236

to then invert this Boolean from false to true. 237

237

So in this case, we can then print some sort of message 238

238

here to our message field, or message element. 239

239

And so let me, again, go ahead and copy it from here 240

240

because we already did that before. 241

241

So let's say no number. 242

242

And then as always an emoji here. 243

243

Let's do this one. 244

244

Or actually, it's more like forbidden. 245

245

So that's the one I used. 246

246

Let's save it. 247

247

And so now whenever I click this button, let's check it, 248

248

then indeed, we get no number. 249

249

Okay? 250

250

So again, this works because zero is false 251

251

And so guess here is false now. 252

252

But then we use the NOT operator to convert it to true. 253

253

And like this, we can then make this block of code execute. 254

254

Because remember, it only executes 255

255

whenever this whole condition here is true. 256

256

Okay. 257

257

And so with this, we implemented the first scenario. 258

258

So again, usually, the first scenario 259

259

is always to assume that there is actually no input, 260

260

and then we need to respond to that somehow. 261

261

Now, in the next video, 262

262

we will then implement all the other scenarios, 263

263

for example, where this guess here is actually correct. 264

264

So where it's equal to the secret number. 265

265

So we will have to generate that secret number then 266

266

and compare it to the guess. 267

267

But let's leave that to the next video.