Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,310 --> 00:00:03,420
All right now that we know
2
00:00:03,420 --> 00:00:05,720
what JavaScript actually is,
3
00:00:05,720 --> 00:00:07,960
let's now learn how to write code
4
00:00:07,960 --> 00:00:10,290
in a special JavaScript file
5
00:00:10,290 --> 00:00:13,333
and then how to run the code in the browser.
6
00:00:14,630 --> 00:00:18,660
Now to get started with the section and with this course,
7
00:00:18,660 --> 00:00:22,020
you need to start by downloading the starter code
8
00:00:22,020 --> 00:00:26,900
from this GitHub repository that I created for this course.
9
00:00:26,900 --> 00:00:31,020
So this repository is at this URL here,
10
00:00:31,020 --> 00:00:33,040
which in case you missed it
11
00:00:33,040 --> 00:00:35,223
is at the very beginning of the course.
12
00:00:35,223 --> 00:00:39,227
It's on the first text lecture of the first section.
13
00:00:39,227 --> 00:00:42,000
And in order to now actually download
14
00:00:42,000 --> 00:00:43,770
all of the starter code,
15
00:00:43,770 --> 00:00:47,470
all you need to do is to click on this green button here
16
00:00:47,470 --> 00:00:51,600
and then download zip, okay?
17
00:00:51,600 --> 00:00:55,350
Now, by the time you're watching this video GitHub
18
00:00:55,350 --> 00:01:00,150
which is this website where developers basically host code,
19
00:01:00,150 --> 00:01:03,520
so later this website might look a little bit different
20
00:01:03,520 --> 00:01:07,140
but just what probably for a green button,
21
00:01:07,140 --> 00:01:11,510
which then says, download zip, all right?
22
00:01:11,510 --> 00:01:15,910
Now, if you're on a smaller screen or maybe on mobile
23
00:01:15,910 --> 00:01:19,253
then this green button will actually not be visible here.
24
00:01:20,090 --> 00:01:23,490
So in that case, just scroll down a little bit here
25
00:01:23,490 --> 00:01:25,960
to the FAQ section
26
00:01:25,960 --> 00:01:28,570
and then here you have this link.
27
00:01:28,570 --> 00:01:31,280
So you can also download all the code
28
00:01:31,280 --> 00:01:33,063
by simply clicking this link here.
29
00:01:33,970 --> 00:01:38,730
And by the way, since we're already here in the FAQs,
30
00:01:38,730 --> 00:01:41,600
please make sure to also read all of them
31
00:01:41,600 --> 00:01:44,670
before you actually move on in the course.
32
00:01:44,670 --> 00:01:46,160
So you will probably have
33
00:01:46,160 --> 00:01:48,680
one of these questions at some point.
34
00:01:48,680 --> 00:01:50,280
And so it's easier
35
00:01:50,280 --> 00:01:54,690
to then simply find the answer right here, now okay?
36
00:01:54,690 --> 00:01:57,120
But that's it here for GitHub.
37
00:01:57,120 --> 00:02:01,470
Now let's go ahead and extract all of this data
38
00:02:01,470 --> 00:02:02,743
that we just downloaded.
39
00:02:03,690 --> 00:02:05,423
And so here we go.
40
00:02:06,720 --> 00:02:09,830
So this is the starter code
41
00:02:09,830 --> 00:02:12,380
and here you have basically one folder
42
00:02:12,380 --> 00:02:14,890
for each section or each project
43
00:02:14,890 --> 00:02:17,070
that we're building in the course.
44
00:02:17,070 --> 00:02:19,870
Then inside of each of these folders,
45
00:02:19,870 --> 00:02:23,140
you will always have one final folder
46
00:02:23,140 --> 00:02:24,723
and one starter folder.
47
00:02:25,700 --> 00:02:30,700
So you'll see that happens in all of these folders here.
48
00:02:30,707 --> 00:02:35,330
Now the final folder is basically the final version
49
00:02:35,330 --> 00:02:38,550
of the code as it looks by the end of the section
50
00:02:38,550 --> 00:02:41,060
or by the end of the project.
51
00:02:41,060 --> 00:02:44,290
And so in case something goes wrong in your code,
52
00:02:44,290 --> 00:02:46,470
while you're following the section
53
00:02:46,470 --> 00:02:49,803
please then compare your code with the final code
54
00:02:49,803 --> 00:02:53,282
that is included for each of the sections.
55
00:02:53,282 --> 00:02:55,660
And that will then allow you to find
56
00:02:55,660 --> 00:02:59,600
and fix any mistake that you might've made in your code
57
00:02:59,600 --> 00:03:02,927
so that you can keep going in the section.
58
00:03:02,927 --> 00:03:06,920
But anyway, what we're most interested in in the beginning
59
00:03:06,920 --> 00:03:09,260
is the starter code.
60
00:03:09,260 --> 00:03:12,430
So each of these folders has the starter code
61
00:03:12,430 --> 00:03:14,560
and that's basically the starting point
62
00:03:14,560 --> 00:03:17,763
of each of these sections or projects.
63
00:03:18,720 --> 00:03:22,120
So let's now actually direct this folder here
64
00:03:22,120 --> 00:03:23,540
onto the desktop
65
00:03:24,400 --> 00:03:27,293
and then I'm gonna open it up here separately.
66
00:03:28,200 --> 00:03:29,600
And in my case here
67
00:03:29,600 --> 00:03:32,863
since I'm actually the one writing the code first
68
00:03:32,863 --> 00:03:35,430
it doesn't make a lot of sense
69
00:03:35,430 --> 00:03:37,800
to have these two folders here.
70
00:03:37,800 --> 00:03:41,370
So I will actually go ahead and take the index out,
71
00:03:41,370 --> 00:03:43,760
but you should not do that.
72
00:03:43,760 --> 00:03:46,610
So you should use this starter folder here
73
00:03:46,610 --> 00:03:51,000
as your project folder in VS code, okay?
74
00:03:51,000 --> 00:03:53,560
But again, I will now delete these two
75
00:03:53,560 --> 00:03:55,430
because I don't need them here
76
00:03:55,430 --> 00:03:57,763
to build this course basically.
77
00:03:59,090 --> 00:04:02,773
But anyway, let's now open up a new VS code window.
78
00:04:04,290 --> 00:04:08,753
So new window and then here we click on open folder.
79
00:04:09,810 --> 00:04:12,950
And then we are already in the desktop.
80
00:04:12,950 --> 00:04:15,990
Let's just make the window a bit bigger here.
81
00:04:15,990 --> 00:04:19,650
And then I will select my project folder here.
82
00:04:19,650 --> 00:04:22,180
So in my case, that's going to be this folder.
83
00:04:22,180 --> 00:04:25,160
But again you should now use that starter folder
84
00:04:25,160 --> 00:04:28,410
that's in here as your project folder.
85
00:04:28,410 --> 00:04:31,743
So I think that's the best way for you to approach this.
86
00:04:32,770 --> 00:04:37,143
So with that project folder a selected, hit open.
87
00:04:38,380 --> 00:04:41,983
And then here we see the index.html file
88
00:04:41,983 --> 00:04:45,870
that we already had in our starter code.
89
00:04:45,870 --> 00:04:48,120
And this is an HTML file
90
00:04:48,120 --> 00:04:52,050
because usually JavaScript is attached to web pages.
91
00:04:52,050 --> 00:04:54,570
At least when we're building front end applications
92
00:04:54,570 --> 00:04:56,930
as we learned in the last video.
93
00:04:56,930 --> 00:05:01,480
So to start, we always need an HTML document like this
94
00:05:01,480 --> 00:05:04,240
because our JavaScript needs to be attached
95
00:05:04,240 --> 00:05:06,880
to an HTML document.
96
00:05:06,880 --> 00:05:10,150
Now in HTML, there is a script tag
97
00:05:10,150 --> 00:05:12,350
where we can write JavaScript.
98
00:05:12,350 --> 00:05:17,350
So let's do that here and a hat right beneath the style.
99
00:05:18,760 --> 00:05:21,070
And if you're completely new to HTML
100
00:05:21,070 --> 00:05:23,100
and have no idea how it works
101
00:05:23,100 --> 00:05:27,090
there is a very short crash course on HTML and CSS
102
00:05:27,090 --> 00:05:30,300
in section five of this course I believe.
103
00:05:30,300 --> 00:05:32,330
So if you want you can take that
104
00:05:32,330 --> 00:05:34,370
just to learn about the very basics
105
00:05:34,370 --> 00:05:37,993
of HTML and CSS in like 30 minutes or so.
106
00:05:39,630 --> 00:05:42,790
Anyway, let's not create this script tag here
107
00:05:42,790 --> 00:05:45,730
in which we will write or JavaScript now,
108
00:05:45,730 --> 00:05:48,920
because in the first video we wrote JavaScript
109
00:05:48,920 --> 00:05:50,050
in the console.
110
00:05:50,050 --> 00:05:53,950
Remember, but that's not how real development works.
111
00:05:53,950 --> 00:05:58,530
So instead of course we write the code in files.
112
00:05:58,530 --> 00:06:01,043
So let's just right for now the same code
113
00:06:01,043 --> 00:06:04,590
that we wrote in the first video.
114
00:06:04,590 --> 00:06:09,560
So let JS equal amazing.
115
00:06:09,560 --> 00:06:12,870
And then in JavaScript, we usually add a semi colon
116
00:06:12,870 --> 00:06:14,690
to the end of each line.
117
00:06:14,690 --> 00:06:16,610
And this will then let JavaScript know
118
00:06:16,610 --> 00:06:19,100
that we are done with this line.
119
00:06:19,100 --> 00:06:21,186
And it's actually not really mandatory.
120
00:06:21,186 --> 00:06:24,560
And you will see some people omit the semi-colons
121
00:06:24,560 --> 00:06:27,870
but I still consider it a good coding practice
122
00:06:27,870 --> 00:06:30,313
and I believe it makes the code a bit cleaner.
123
00:06:32,470 --> 00:06:35,260
So just like before we are then saying
124
00:06:35,260 --> 00:06:38,263
if JavaScript is amazing,
125
00:06:41,920 --> 00:06:44,373
then alert.JavaScript is fun.
126
00:06:50,520 --> 00:06:53,530
And once again don't worry yet about how
127
00:06:53,530 --> 00:06:55,793
this code here works, okay?
128
00:06:57,140 --> 00:06:58,540
Just type it for now
129
00:06:58,540 --> 00:07:02,140
and just have a general idea of what it does.
130
00:07:02,140 --> 00:07:04,490
Now to actually execute this code,
131
00:07:04,490 --> 00:07:08,070
so in this example to show this alert window,
132
00:07:08,070 --> 00:07:12,730
all we have to do is to open up index.html in the browser,
133
00:07:12,730 --> 00:07:15,740
because again this is where our JavaScript
134
00:07:15,740 --> 00:07:18,860
is now attached to, right?
135
00:07:18,860 --> 00:07:20,780
So let's do that.
136
00:07:20,780 --> 00:07:23,090
And so I'm going back to my desktop
137
00:07:25,200 --> 00:07:28,803
and then open this file with Google Chrome.
138
00:07:30,000 --> 00:07:32,140
And indeed right away
139
00:07:32,140 --> 00:07:35,840
we get this alert saying JavaScript is fun.
140
00:07:35,840 --> 00:07:39,510
And so that is coming from our index.html.
141
00:07:39,510 --> 00:07:43,010
We can click OK and then it finishes.
142
00:07:43,010 --> 00:07:48,010
And we see a starter file which is actually this text.
143
00:07:48,090 --> 00:07:50,953
So if you see in VS code,
144
00:07:51,900 --> 00:07:55,920
Java's good fundamentals part one in this H1 tag,
145
00:07:55,920 --> 00:07:58,020
is exactly what we see here.
146
00:07:58,020 --> 00:08:01,050
And so we opened up the right page and also,
147
00:08:01,050 --> 00:08:03,520
or JavaScript is working.
148
00:08:03,520 --> 00:08:05,530
So if we reload this page now
149
00:08:05,530 --> 00:08:07,643
we should see that alert window again.
150
00:08:08,850 --> 00:08:10,453
And indeed here it is.
151
00:08:12,460 --> 00:08:14,823
Okay, let's push this to the side.
152
00:08:16,519 --> 00:08:19,637
Here is the code from our previous lecture VS code
153
00:08:20,930 --> 00:08:24,770
and push it to the other side, okay?
154
00:08:24,770 --> 00:08:28,330
We can then get rid of this sidebar here that we don't need
155
00:08:28,330 --> 00:08:31,880
by hitting Command or Control + B
156
00:08:31,880 --> 00:08:34,073
or by clicking this file icon.
157
00:08:35,480 --> 00:08:38,230
And with this, we have enough space to see the editor
158
00:08:38,230 --> 00:08:40,840
and a browser here on the other side.
159
00:08:40,840 --> 00:08:44,150
So let me show you something very important now
160
00:08:44,150 --> 00:08:46,780
which is how to see results from our code
161
00:08:46,780 --> 00:08:49,290
here back in the browser.
162
00:08:49,290 --> 00:08:51,350
So let's take this math operations
163
00:08:51,350 --> 00:08:53,990
that we did in the previous lecture.
164
00:08:53,990 --> 00:08:58,990
So that was 40 plus eight plus 23 minus 10.
165
00:08:59,950 --> 00:09:01,360
Let's give it a save.
166
00:09:01,360 --> 00:09:03,120
And you see that JavaScript
167
00:09:03,120 --> 00:09:05,700
actually automatically formatted this code.
168
00:09:05,700 --> 00:09:06,840
And I will show you later
169
00:09:06,840 --> 00:09:10,040
how you can set that up for yourself.
170
00:09:10,040 --> 00:09:13,160
Anyway, if we now reload this page here
171
00:09:13,160 --> 00:09:15,743
where do you think this result will appear?
172
00:09:17,610 --> 00:09:20,580
So clearly it's not in this alert
173
00:09:20,580 --> 00:09:23,220
and it's also nowhere on this page
174
00:09:23,220 --> 00:09:26,763
because we didn't tell JavaScript to put it on the page.
175
00:09:27,620 --> 00:09:30,590
So let's open up the inspector here
176
00:09:30,590 --> 00:09:34,403
and that will do inspect and then the console.
177
00:09:35,430 --> 00:09:39,650
And then again increase the text command plus plus,
178
00:09:39,650 --> 00:09:40,823
and plus again.
179
00:09:41,970 --> 00:09:45,610
And just see that the result is also not in the console.
180
00:09:45,610 --> 00:09:46,790
So why is that?
181
00:09:46,790 --> 00:09:51,180
Why is this result not in a console like it was before?
182
00:09:51,180 --> 00:09:52,970
Well it's because the console
183
00:09:52,970 --> 00:09:55,350
is just an environment that was built
184
00:09:55,350 --> 00:09:57,800
to execute small pieces of code
185
00:09:57,800 --> 00:09:59,900
and then show results immediately.
186
00:09:59,900 --> 00:10:02,690
So just like we did in a previous lecture.
187
00:10:02,690 --> 00:10:04,200
But it doesn't show results
188
00:10:04,200 --> 00:10:07,610
of our operations in code by default.
189
00:10:07,610 --> 00:10:10,130
Now, if we still want to display results,
190
00:10:10,130 --> 00:10:13,940
for example from a calculation like this here in the console
191
00:10:13,940 --> 00:10:17,720
we need to tell JavaScript to explicitly output that result
192
00:10:17,720 --> 00:10:19,260
to the console.
193
00:10:19,260 --> 00:10:22,170
And we can do that using a special function
194
00:10:22,170 --> 00:10:26,330
called console.log, okay?
195
00:10:26,330 --> 00:10:31,330
And then if we take this code here and copy and paste it
196
00:10:31,410 --> 00:10:34,703
and then save it and then reload,
197
00:10:36,420 --> 00:10:38,320
we need to click OK
198
00:10:38,320 --> 00:10:40,863
so that JavaScript can move on to the next line.
199
00:10:41,730 --> 00:10:43,630
And then we actually get the results
200
00:10:43,630 --> 00:10:45,980
printed to the console here.
201
00:10:45,980 --> 00:10:47,370
And it actually says
202
00:10:47,370 --> 00:10:51,260
that it's coming from index.html at line 31.
203
00:10:51,260 --> 00:10:53,340
And so that's exactly the line
204
00:10:53,340 --> 00:10:55,633
where we did to this computation.
205
00:10:56,750 --> 00:10:58,900
Okay, But let's recap here
206
00:10:58,900 --> 00:11:02,770
because I know that this is confusing for many beginners.
207
00:11:02,770 --> 00:11:06,560
So in the last lecture we were already in the console.
208
00:11:06,560 --> 00:11:10,700
And so then there was no need for using console.log.
209
00:11:10,700 --> 00:11:12,800
We also needed to no script tag
210
00:11:12,800 --> 00:11:15,200
when we were in the console, right?
211
00:11:15,200 --> 00:11:17,880
But now we are actually in a script
212
00:11:17,880 --> 00:11:19,650
and no longer in the console.
213
00:11:19,650 --> 00:11:23,520
And so now we need to explicitly say console.log
214
00:11:23,520 --> 00:11:26,420
whenever we want to access the developer console
215
00:11:26,420 --> 00:11:29,000
like we did here, okay?
216
00:11:29,000 --> 00:11:31,830
So basically this is like building a bridge
217
00:11:31,830 --> 00:11:35,300
between script here and to develop a console
218
00:11:35,300 --> 00:11:38,700
on the other side that lives in the browser.
219
00:11:38,700 --> 00:11:40,620
And now to finish this lecture
220
00:11:40,620 --> 00:11:43,620
let's actually take this JavaScript code
221
00:11:43,620 --> 00:11:46,100
out of the HTML file
222
00:11:46,100 --> 00:11:49,850
and put it into its own separate JavaScript file.
223
00:11:49,850 --> 00:11:51,430
So what we have right now
224
00:11:51,430 --> 00:11:54,980
this script here is an inline script.
225
00:11:54,980 --> 00:11:57,920
And the only advantage of an inline script
226
00:11:57,920 --> 00:12:00,720
is that we don't have to load another file.
227
00:12:00,720 --> 00:12:01,970
But on the other hand
228
00:12:01,970 --> 00:12:05,340
it's pretty bad for separating the website content
229
00:12:05,340 --> 00:12:07,210
from the JavaScript logic.
230
00:12:07,210 --> 00:12:10,510
And so usually we use external JavaScript files
231
00:12:10,510 --> 00:12:13,270
as I just mentioned, okay?
232
00:12:13,270 --> 00:12:15,918
So let's come back to the sidebar here
233
00:12:15,918 --> 00:12:17,880
and create a new file
234
00:12:17,880 --> 00:12:21,510
which I'm gonna call script.js.
235
00:12:21,510 --> 00:12:23,550
And that's a pretty standard name
236
00:12:23,550 --> 00:12:27,710
for a JavaScript script, okay?
237
00:12:27,710 --> 00:12:30,320
So let's take that back,
238
00:12:30,320 --> 00:12:32,540
come here, copy this code
239
00:12:35,010 --> 00:12:36,720
and paste it here.
240
00:12:36,720 --> 00:12:38,700
And then once more VS code
241
00:12:38,700 --> 00:12:41,670
actually formatted the code here nicely.
242
00:12:41,670 --> 00:12:45,570
If it didn't on your computer, then just do that manually
243
00:12:45,570 --> 00:12:49,570
and I will show you later how to set that up, okay?
244
00:12:49,570 --> 00:12:52,223
And now we can get rid of this script here.
245
00:12:54,180 --> 00:12:57,430
Great, now we have a better separation of concerns
246
00:12:57,430 --> 00:12:59,770
between presentation and logic.
247
00:12:59,770 --> 00:13:01,420
And this also makes it easier
248
00:13:01,420 --> 00:13:04,400
to maintain code in the long run.
249
00:13:04,400 --> 00:13:08,140
All there is to do now is to link this JavaScript file
250
00:13:08,140 --> 00:13:09,610
to the HTML file
251
00:13:09,610 --> 00:13:13,127
because right now, HTML has no way of knowing
252
00:13:13,127 --> 00:13:16,110
where the code is actually located.
253
00:13:16,110 --> 00:13:19,670
So if we execute this code by reloading the browser,
254
00:13:19,670 --> 00:13:21,642
now nothing will happen.
255
00:13:21,642 --> 00:13:26,070
Again because this HTML file right now does not know
256
00:13:26,070 --> 00:13:28,670
where to find the JavaScript code.
257
00:13:28,670 --> 00:13:30,710
So let's do that connection.
258
00:13:30,710 --> 00:13:35,710
And we usually do that at the end of the body tag, okay?
259
00:13:35,890 --> 00:13:38,893
And actually we will use script again.
260
00:13:41,110 --> 00:13:43,000
All right, but now at this time
261
00:13:43,000 --> 00:13:46,970
we're not gonna put any code inside this script element
262
00:13:46,970 --> 00:13:50,393
but instead we are gonna specify the source attribute.
263
00:13:51,230 --> 00:13:54,340
So here all we need to do is to then specify
264
00:13:54,340 --> 00:13:58,350
the name of the script and the location.
265
00:13:58,350 --> 00:14:01,290
Now, in this case descript,
266
00:14:01,290 --> 00:14:03,310
so it descript.js file
267
00:14:03,310 --> 00:14:06,380
is in the same folder as index.html.
268
00:14:06,380 --> 00:14:07,787
So all we have to do here
269
00:14:07,787 --> 00:14:11,700
is to just write the file name like this.
270
00:14:11,700 --> 00:14:16,700
We don't have to specify the entire path to the file, okay?
271
00:14:16,740 --> 00:14:19,603
So if we save this now and reload,
272
00:14:20,670 --> 00:14:24,270
then you see that it's back to working.
273
00:14:24,270 --> 00:14:27,040
So we have this popup here again
274
00:14:27,040 --> 00:14:30,900
and then result of this computation.
275
00:14:30,900 --> 00:14:33,430
Now, if you didn't get the alert window
276
00:14:33,430 --> 00:14:35,510
or this output here,
277
00:14:35,510 --> 00:14:37,950
then that means that your script file
278
00:14:37,950 --> 00:14:42,710
is probably not correctly linked to the HTML file.
279
00:14:42,710 --> 00:14:46,720
So in that case, please make 100% sure
280
00:14:46,720 --> 00:14:48,330
that descript file
281
00:14:48,330 --> 00:14:52,870
is in the exact same folder as the HTML file.
282
00:14:52,870 --> 00:14:57,673
Also make sure that you correctly spelt script SRC
283
00:14:58,900 --> 00:15:01,780
just as they have it here in my HTML.
284
00:15:01,780 --> 00:15:04,080
And finally also make sure
285
00:15:04,080 --> 00:15:07,486
that you have no errors in your Java script code.
286
00:15:07,486 --> 00:15:11,820
So these are some common mistakes that I see people make
287
00:15:11,820 --> 00:15:15,573
which then leads to their script not being correctly linked.
288
00:15:16,640 --> 00:15:19,870
Okay, but anyway at this point,
289
00:15:19,870 --> 00:15:23,703
we no longer need index.html open here.
290
00:15:24,720 --> 00:15:27,410
And here we have only our code logic.
291
00:15:27,410 --> 00:15:30,120
The rest of the presentation is gone.
292
00:15:30,120 --> 00:15:33,453
And so this is much cleaner and much easier to work with.
293
00:15:34,530 --> 00:15:38,290
Great, so now you know how to link a JavaScript file
294
00:15:38,290 --> 00:15:42,730
to an HTML file and then how to run it all in the browser.
295
00:15:42,730 --> 00:15:45,140
And that means that you're now finally able
296
00:15:45,140 --> 00:15:48,540
to really start learning the JavaScript language.
297
00:15:48,540 --> 00:15:50,300
So see you in the next lecture
298
00:15:50,300 --> 00:15:52,613
where we're gonna start doing just that.
23275
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.