Original subtitles

1 1

All right now that we know 2

2

what JavaScript actually is, 3

3

let's not learn how to write code 4

4

in a special JavaScript file 5

5

and then how to run the code in the browser. 6

6

Now to get started with the section and with this course, 7

7

you need to start by downloading the starter code 8

8

from this GitHub repository that I created for this course. 9

9

So this repository is at this URL here, 10

10

which in case you missed it 11

11

is at the very beginning of the course. 12

12

It's on the first text lecture of the first section. 13

13

And in order to now actually download 14

14

all of the starter code, 15

15

all you need to do is to click on this green button here 16

16

and then download zip, okay? 17

17

Now, by the time you're watching this video GitHub 18

18

which is this website where developers basically host code, 19

19

so later this website might look a little bit different 20

20

but just what probably for a green button, 21

21

which then says, download zip, all right? 22

22

Now, if you're on a smaller screen or maybe on mobile 23

23

then this green button will actually not be visible here. 24

24

So in that case, just scroll down a little bit here 25

25

to the FAQ section 26

26

and then here you have this link. 27

27

So you can also download all the code 28

28

by simply clicking this link here. 29

29

And by the way, since we're already here in the FAQs, 30

30

please make sure to also read all of them 31

31

before you actually move on in the course. 32

32

So you will probably have 33

33

one of these questions at some point. 34

34

And so it's easier 35

35

to then simply find the answer right here, now okay? 36

36

But that's it here for GitHub. 37

37

Now let's go ahead and extract all of this data 38

38

that we just downloaded. 39

39

And so here we go. 40

40

So this is the starter code 41

41

and here you have basically one folder 42

42

for each section or each project 43

43

that we're building in the course. 44

44

Then inside of each of these folders, 45

45

you will always have one final folder 46

46

and one starter folder. 47

47

So you'll see that happens in all of these folders here. 48

48

Now the final folder is basically the final version 49

49

of the code as it looks by the end of the section 50

50

or by the end of the project. 51

51

And so in case something goes wrong in your code, 52

52

while you're following the section 53

53

please then compare your code with the final code 54

54

that is included for each of the sections. 55

55

And that will then allow you to find 56

56

and fix any mistake that you might've made in your code 57

57

so that you can keep going in the section. 58

58

But anyway, what we're most interested in in the beginning 59

59

is the starter code. 60

60

So each of these folders has the starter code 61

61

and that's basically the starting point 62

62

of each of these sections or projects. 63

63

So let's now actually direct this folder here 64

64

onto the desktop 65

65

and then I'm gonna open it up here separately. 66

66

And in my case here 67

67

since I'm actually the one writing the code first 68

68

it doesn't make a lot of sense 69

69

to have these two folders here. 70

70

So I will actually go ahead and take the index out, 71

71

but you should not do that. 72

72

So you should use this starter folder here 73

73

as your project folder in VS code, okay? 74

74

But again, I will now delete these two 75

75

because I don't need them here 76

76

to build this course basically. 77

77

But anyway, let's now open up a new VS code window. 78

78

So new window and then here we click on open folder. 79

79

And then we are already in the desktop. 80

80

Let's just make the window a bit bigger here. 81

81

And then I will select my project folder here. 82

82

So in my case, that's going to be this folder. 83

83

But again you should now use that starter folder 84

84

that's in here as your project folder. 85

85

So I think that's the best way for you to approach this. 86

86

So with that project folder a selected, hit open. 87

87

And then here we see the index.html file 88

88

that we already had in our starter code. 89

89

And this is an HTML file 90

90

because usually JavaScript is attached to web pages. 91

91

At least when we're building front end applications 92

92

as we learned in the last video. 93

93

So to start, we always need an HTML document like this 94

94

because our JavaScript needs to be attached 95

95

to an HTML document. 96

96

Now in HTML, there is a script tag 97

97

where we can write JavaScript. 98

98

So let's do that here and a hat right beneath the style. 99

99

And if you're completely new to HTML 100

100

and have no idea how it works 101

101

there is a very short crash course on HTML and CSS 102

102

in section five of this course I believe. 103

103

So if you want you can take that 104

104

just to learn about the very basics 105

105

of HTML and CSS in like 30 minutes or so. 106

106

Anyway, let's not create this script tag here 107

107

in which we will write or JavaScript now, 108

108

because in the first video we wrote JavaScript 109

109

in the console. 110

110

Remember, but that's not how real development works. 111

111

So instead of course we write the code in files. 112

112

So let's just right for now the same code 113

113

that we wrote in the first video. 114

114

So let JS equal amazing. 115

115

And then in JavaScript, we usually add a semi colon 116

116

to the end of each line. 117

117

And this will then let JavaScript know 118

118

that we are done with this line. 119

119

And it's actually not really mandatory. 120

120

And you will see some people omit the semi-colons 121

121

but I still consider it a good coding practice 122

122

and I believe it makes the code a bit cleaner. 123

123

So just like before we are then saying 124

124

if JavaScript is amazing, 125

125

then alert.JavaScript is fun. 126

126

And once again don't worry yet about how 127

127

this code here works, okay? 128

128

Just type it for now 129

129

and just have a general idea of what it does. 130

130

Now to actually execute this code, 131

131

so in this example to show this alert window, 132

132

all we have to do is to open up index.html in the browser, 133

133

because again this is where our JavaScript 134

134

is now attached to, right? 135

135

So let's do that. 136

136

And so I'm going back to my desktop 137

137

and then open this file with Google Chrome. 138

138

And indeed right away 139

139

we get this alert saying JavaScript is fun. 140

140

And so that is coming from our index.html. 141

141

We can click OK and then it finishes. 142

142

And we see a starter file which is actually this text. 143

143

So if you see in VS code, 144

144

Java's good fundamentals part one in this H1 tag, 145

145

is exactly what we see here. 146

146

And so we opened up the right page and also, 147

147

or JavaScript is working. 148

148

So if we reload this page now 149

149

we should see that alert window again. 150

150

And indeed here it is. 151

151

Okay, let's push this to the side. 152

152

Here is the code from our previous lecture VS code 153

153

and push it to the other side, okay? 154

154

We can then get rid of this sidebar here that we don't need 155

155

by hitting Command or Control + B 156

156

or by clicking this file icon. 157

157

And with this, we have enough space to see the editor 158

158

and a browser here on the other side. 159

159

So let me show you something very important now 160

160

which is how to see results from our code 161

161

here back in the browser. 162

162

So let's take this math operations 163

163

that we did in the previous lecture. 164

164

So that was 40 plus eight plus 23 minus 10. 165

165

Let's give it a save. 166

166

And you see that JavaScript 167

167

actually automatically formatted this code. 168

168

And I will show you later 169

169

how you can set that up for yourself. 170

170

Anyway, if we now reload this page here 171

171

where do you think this result will appear? 172

172

So clearly it's not in this alert 173

173

and it's also nowhere on this page 174

174

because we didn't tell JavaScript to put it on the page. 175

175

So let's open up the inspector here 176

176

and that will do inspect and then the console. 177

177

And then again increase the text command plus plus, 178

178

and plus again. 179

179

And just see that the result is also not in the console. 180

180

So why is that? 181

181

Why is this result not in a console like it was before? 182

182

Well it's because the console 183

183

is just an environment that was built 184

184

to execute small pieces of code 185

185

and then show results immediately. 186

186

So just like we did in a previous lecture. 187

187

But it doesn't show results 188

188

of our operations in code by default. 189

189

Now, if we still want to display results, 190

190

for example from a calculation like this here in the console 191

191

we need to tell JavaScript to explicitly output that result 192

192

to the console. 193

193

And we can do that using a special function 194

194

called console.log, okay? 195

195

And then if we take this code here and copy and paste it 196

196

and then save it and then reload, 197

197

we need to click OK 198

198

so that JavaScript can move on to the next line. 199

199

And then we actually get the results 200

200

printed to the console here. 201

201

And it actually says 202

202

that it's coming from index.html at line 31. 203

203

And so that's exactly the line 204

204

where we did to this computation. 205

205

Okay, But let's recap here 206

206

because I know that this is confusing for many beginners. 207

207

So in the last lecture we were already in the console. 208

208

And so then there was no need for using console.log. 209

209

We also needed to no script tag 210

210

when we were in the console, right? 211

211

But now we are actually in a script 212

212

and no longer in the console. 213

213

And so now we need to explicitly say console.log 214

214

whenever we want to access the developer console 215

215

like we did here, okay? 216

216

So basically this is like building a bridge 217

217

between script here and to develop a console 218

218

on the other side that lives in the browser. 219

219

And now to finish this lecture 220

220

let's actually take this JavaScript code 221

221

out of the HTML file 222

222

and put it into its own separate JavaScript file. 223

223

So what we have right now 224

224

this script here is an inline script. 225

225

And the only advantage of an inline script 226

226

is that we don't have to load another file. 227

227

But on the other hand 228

228

it's pretty bad for separating the website content 229

229

from the JavaScript logic. 230

230

And so usually we use external JavaScript files 231

231

as I just mentioned, okay? 232

232

So let's come back to the sidebar here 233

233

and create a new file 234

234

which I'm gonna call script.js. 235

235

And that's a pretty standard name 236

236

for a JavaScript script, okay? 237

237

So let's take that back, 238

238

come here, copy this code 239

239

and paste it here. 240

240

And then once more VS code 241

241

actually formatted the code here nicely. 242

242

If it didn't on your computer, then just do that manually 243

243

and I will show you later how to set that up, okay? 244

244

And now we can get rid of this script here. 245

245

Great, now we have a better separation of concerns 246

246

between presentation and logic. 247

247

And this also makes it easier 248

248

to maintain code in the long run. 249

249

All there is to do now is to link this JavaScript file 250

250

to the HTML file 251

251

because right now, HTML has no way of knowing 252

252

where the code is actually located. 253

253

So if we execute this code by reloading the browser, 254

254

now nothing will happen. 255

255

Again because this HTML file right now does not know 256

256

where to find the JavaScript code. 257

257

So let's do that connection. 258

258

And we usually do that at the end of the body tag, okay? 259

259

And actually we will use script again. 260

260

All right, but now at this time 261

261

we're not gonna put any code inside this script element 262

262

but instead we are gonna specify the source attribute. 263

263

So here all we need to do is to then specify 264

264

the name of the script and the location. 265

265

Now, in this case descript, 266

266

so it descript.js file 267

267

is in the same folder as index.html. 268

268

So all we have to do here 269

269

is to just write the file name like this. 270

270

We don't have to specify the entire path to the file, okay? 271

271

So if we save this now and reload, 272

272

then you see that it's back to working. 273

273

So we have this popup here again 274

274

and then result of this computation. 275

275

Now, if you didn't get the alert window 276

276

or this output here, 277

277

then that means that your script file 278

278

is probably not correctly linked to the HTML file. 279

279

So in that case, please make 100% sure 280

280

that descript file 281

281

is in the exact same folder as the HTML file. 282

282

Also make sure that you correctly spelt script SRC 283

283

just as they have it here in my HTML. 284

284

And finally also make sure 285

285

that you have no errors in your Java script code. 286

286

So these are some common mistakes that I see people make 287

287

which then leads to their script not being correctly linked. 288

288

Okay, but anyway at this point, 289

289

we no longer need index.html open here. 290

290

And here we have only our code logic. 291

291

The rest of the presentation is gone. 292

292

And so this is much cleaner and much easier to work with. 293

293

Great, so now you know how to link a JavaScript file 294

294

to an HTML file and then how to run it all in the browser. 295

295

And that means that you're now finally able 296

296

to really start learning the JavaScript language. 297

297

So see you in the next lecture 298

298

where we're gonna start doing just that.