1
00:00:02,100 --> 00:00:04,130
Now with NodeJS installed,

2
00:00:04,130 --> 00:00:05,770
let's now see how we use it

3
00:00:05,770 --> 00:00:08,570
by writing our first, very simple

4
00:00:08,570 --> 00:00:11,800
piece of NodeJS driven JavaScript code

5
00:00:11,800 --> 00:00:15,670
that we will then execute with NodeJS.

6
00:00:15,670 --> 00:00:18,700
And for this, I'm in a brand new, empty folder

7
00:00:18,700 --> 00:00:22,010
opened here in visual studio code.

8
00:00:22,010 --> 00:00:25,450
And in this folder, I will create a new file

9
00:00:25,450 --> 00:00:27,830
and I will name it app.js,

10
00:00:27,830 --> 00:00:29,550
but you can name it however you want.

11
00:00:29,550 --> 00:00:31,569
You can also name it site.js,

12
00:00:31,569 --> 00:00:34,670
but I'll just go with app JS here,

13
00:00:34,670 --> 00:00:35,503
since it holds

14
00:00:35,503 --> 00:00:39,930
my main demo JavaScript application

15
00:00:39,930 --> 00:00:41,450
that I want to build here.

16
00:00:41,450 --> 00:00:44,120
But app is a pretty big word here, actually,

17
00:00:44,120 --> 00:00:46,010
because we are going to start

18
00:00:46,010 --> 00:00:47,700
with a very, very simple

19
00:00:47,700 --> 00:00:49,633
demo application right now.

20
00:00:51,050 --> 00:00:52,838
Now here in this app JS file,

21
00:00:52,838 --> 00:00:54,720
let me zoom in a bit,

22
00:00:54,720 --> 00:00:56,260
we are now going to write

23
00:00:56,260 --> 00:00:58,720
some basic JavaScript code.

24
00:00:58,720 --> 00:01:01,513
I'll start by adding a constant,

25
00:01:01,513 --> 00:01:04,150
which I'll name userName,

26
00:01:04,150 --> 00:01:06,080
and in there I'll store a string

27
00:01:06,980 --> 00:01:07,830
Maximilian

28
00:01:07,830 --> 00:01:10,620
So the text Maximilian

29
00:01:10,620 --> 00:01:13,310
and then I'll add a semi-colon.

30
00:01:13,310 --> 00:01:15,170
This is JavaScript code,

31
00:01:15,170 --> 00:01:16,260
which we could have written

32
00:01:16,260 --> 00:01:18,440
for the browser as well.

33
00:01:18,440 --> 00:01:20,181
We are defining a constant here.

34
00:01:20,181 --> 00:01:22,620
Alternatively, as you learned,

35
00:01:22,620 --> 00:01:25,640
we could also create a variable with let.

36
00:01:25,640 --> 00:01:28,078
That's also supported in NodeJS,

37
00:01:28,078 --> 00:01:33,078
and in general, NodeJS is just JavaScript.

38
00:01:33,090 --> 00:01:34,070
So what you'll learn

39
00:01:34,070 --> 00:01:37,060
about JavaScript still applies.

40
00:01:37,060 --> 00:01:39,691
It's the same syntax, the same rules.

41
00:01:39,691 --> 00:01:42,610
There only are some differences,

42
00:01:42,610 --> 00:01:45,510
like for example, in NodeJS,

43
00:01:45,510 --> 00:01:48,660
since it does not execute in a browser,

44
00:01:48,660 --> 00:01:52,150
there is no DOM with which you could interact.

45
00:01:52,150 --> 00:01:55,690
You can select and change HTML elements

46
00:01:55,690 --> 00:01:57,330
because it's now decoupled

47
00:01:57,330 --> 00:01:59,910
from an HTML driven website.

48
00:01:59,910 --> 00:02:03,160
You must never forget that with NodeJS,

49
00:02:03,160 --> 00:02:05,340
we write code that executes

50
00:02:05,340 --> 00:02:08,267
stand-alone on a computer, on a server.

51
00:02:08,267 --> 00:02:10,530
And whilst we might also

52
00:02:10,530 --> 00:02:12,480
be dealing with HTML files,

53
00:02:12,480 --> 00:02:13,550
to some extent,

54
00:02:13,550 --> 00:02:15,470
there is no tight coupling

55
00:02:15,470 --> 00:02:17,830
as we have it in a browser.

56
00:02:17,830 --> 00:02:19,520
So there are differences like this,

57
00:02:19,520 --> 00:02:22,930
but the core is syntax, like Latin, const,

58
00:02:22,930 --> 00:02:25,181
and the kind of values you can work with.

59
00:02:25,181 --> 00:02:26,763
That's the same.

60
00:02:27,620 --> 00:02:30,190
And different now, we have this username.

61
00:02:30,190 --> 00:02:31,810
And then, in another line,

62
00:02:31,810 --> 00:02:34,873
I will console log username.

63
00:02:36,130 --> 00:02:37,520
And that is also something

64
00:02:37,520 --> 00:02:39,760
we did before in the course already,

65
00:02:39,760 --> 00:02:42,000
we also locked something

66
00:02:42,000 --> 00:02:44,150
in the console of the browser.

67
00:02:44,150 --> 00:02:47,690
Now we will not execute this code with a browser,

68
00:02:47,690 --> 00:02:50,940
but we will execute it with NodeJS instead,

69
00:02:50,940 --> 00:02:52,840
but as you will see with NodeJS,

70
00:02:52,840 --> 00:02:56,370
we will also be able to lock this to a console.

71
00:02:56,370 --> 00:02:59,210
It will just not be in the browser dev tools,

72
00:02:59,210 --> 00:03:01,063
but instead in a different place.

73
00:03:02,750 --> 00:03:05,260
Now with all that, if we save that file,

74
00:03:05,260 --> 00:03:07,200
we got this JavaScript file.

75
00:03:07,200 --> 00:03:11,360
How can we now execute that with NodeJS?

76
00:03:11,360 --> 00:03:13,690
Well, as I emphasized multiple times,

77
00:03:13,690 --> 00:03:16,340
we don't execute it in a browser.

78
00:03:16,340 --> 00:03:19,200
Instead, we installed that NodeJS tool,

79
00:03:19,200 --> 00:03:21,850
and therefore we now will use that tool

80
00:03:21,850 --> 00:03:25,861
to invoke and execute this code with it.

81
00:03:25,861 --> 00:03:28,600
Now, NodeJS is not a tool

82
00:03:28,600 --> 00:03:32,660
like Word or Excel or PowerPoint

83
00:03:32,660 --> 00:03:34,980
that you install on your system

84
00:03:34,980 --> 00:03:37,670
and then open by clicking on some icon

85
00:03:37,670 --> 00:03:39,780
or anything like that.

86
00:03:39,780 --> 00:03:41,950
Instead it is a tool that you invoke

87
00:03:41,950 --> 00:03:44,060
through the command line,

88
00:03:44,060 --> 00:03:45,160
and that is something

89
00:03:45,160 --> 00:03:47,270
you might've never worked with before.

90
00:03:47,270 --> 00:03:49,473
So let me quickly introduce you to it.

91
00:03:50,330 --> 00:03:53,510
No matter if you are on macOS or Windows,

92
00:03:53,510 --> 00:03:55,890
you will have a command line utility

93
00:03:55,890 --> 00:03:59,190
installed on your system, because a command line

94
00:03:59,190 --> 00:04:01,800
is the most basic and primitive form

95
00:04:01,800 --> 00:04:04,731
of sending commands and actions

96
00:04:04,731 --> 00:04:07,010
to your operating system.

97
00:04:07,010 --> 00:04:09,320
So the command line is an interface

98
00:04:09,320 --> 00:04:12,080
that allows you, as a computer user,

99
00:04:12,080 --> 00:04:13,670
to talk to your computer

100
00:04:13,670 --> 00:04:15,780
and give it instructions.

101
00:04:15,780 --> 00:04:17,950
You do the same if you launch a program

102
00:04:17,950 --> 00:04:19,279
like PowerPoint,

103
00:04:19,279 --> 00:04:21,940
but there you have a graphical interface.

104
00:04:21,940 --> 00:04:23,230
A command line is basically

105
00:04:23,230 --> 00:04:25,210
the very primitive version of it

106
00:04:25,210 --> 00:04:28,270
where you don't have a graphical interface,

107
00:04:28,270 --> 00:04:30,490
but where you instead write your own commands

108
00:04:30,490 --> 00:04:32,960
that will then be executed.

109
00:04:32,960 --> 00:04:35,531
Now on macOS, you can open spotlight search

110
00:04:35,531 --> 00:04:38,440
and type terminal in there

111
00:04:38,440 --> 00:04:40,420
to open the built in terminal,

112
00:04:40,420 --> 00:04:43,343
which is your macOS command line interface.

113
00:04:44,460 --> 00:04:46,270
On Windows, you can open

114
00:04:46,270 --> 00:04:48,500
the command prompt application

115
00:04:48,500 --> 00:04:49,829
that's installed on Windows,

116
00:04:49,829 --> 00:04:52,367
out of the box, by default

117
00:04:52,367 --> 00:04:55,410
on every Windows version.

118
00:04:55,410 --> 00:04:58,010
And it's this command prompt, or terminal,

119
00:04:58,010 --> 00:04:59,220
which you opened here,

120
00:04:59,220 --> 00:05:01,520
that can then be used for running commands

121
00:05:01,520 --> 00:05:04,930
that will be executed by the operating system.

122
00:05:04,930 --> 00:05:07,650
Now, because we installed NodeJS,

123
00:05:07,650 --> 00:05:10,990
Node will be a command that is recognized

124
00:05:10,990 --> 00:05:12,940
by the operating system.

125
00:05:12,940 --> 00:05:15,311
So we can execute our JavaScript code

126
00:05:15,311 --> 00:05:17,150
with NodeJS,

127
00:05:17,150 --> 00:05:19,933
through this terminal or command prompt.

128
00:05:20,990 --> 00:05:22,360
Now, doing it here,

129
00:05:22,360 --> 00:05:24,900
in this default command prompt, or terminal,

130
00:05:24,900 --> 00:05:26,250
is a bit cumbersome,

131
00:05:26,250 --> 00:05:27,740
because you would, first of all,

132
00:05:27,740 --> 00:05:30,412
have to navigate into the folder

133
00:05:30,412 --> 00:05:32,722
where your code is stored

134
00:05:32,722 --> 00:05:35,630
inside of that terminal.

135
00:05:35,630 --> 00:05:36,610
Because by default,

136
00:05:36,610 --> 00:05:38,210
this terminal will be navigated

137
00:05:38,210 --> 00:05:40,170
into some folder on your system

138
00:05:40,170 --> 00:05:42,010
and you need to change to the folder

139
00:05:42,010 --> 00:05:44,003
that contains your recode files.

140
00:05:44,960 --> 00:05:46,950
Now, it might be interesting to learn a bit more

141
00:05:46,950 --> 00:05:49,150
about this terminal and command prompt

142
00:05:49,150 --> 00:05:50,780
and therefore attached you find a link

143
00:05:50,780 --> 00:05:52,850
that allows you to dive a bit deeper,

144
00:05:52,850 --> 00:05:54,804
but it's not the focus of this course,

145
00:05:54,804 --> 00:05:57,670
because we also have a way easier way

146
00:05:57,670 --> 00:05:59,130
of executing our code

147
00:05:59,130 --> 00:06:02,090
and of running our terminal or command prompt

148
00:06:02,090 --> 00:06:04,970
focused on this project folder.

149
00:06:04,970 --> 00:06:08,230
And for this, we go back to visual studio code.

150
00:06:08,230 --> 00:06:12,150
In there, you will have this terminal option

151
00:06:12,150 --> 00:06:13,510
here in your menu.

152
00:06:13,510 --> 00:06:17,110
And in there, you can click on new terminal,

153
00:06:17,110 --> 00:06:19,263
both on Windows and macOS.

154
00:06:21,030 --> 00:06:22,400
Now, if you click there,

155
00:06:22,400 --> 00:06:26,310
this opens up an integrated terminal,

156
00:06:26,310 --> 00:06:27,760
or a command prompt,

157
00:06:27,760 --> 00:06:30,930
which is your default system command prompt,

158
00:06:30,930 --> 00:06:32,020
or terminal.

159
00:06:32,020 --> 00:06:33,600
So the tool we just opened

160
00:06:33,600 --> 00:06:35,090
a couple of minutes ago,

161
00:06:35,090 --> 00:06:38,014
but integrated into visual studio code,

162
00:06:38,014 --> 00:06:39,550
which is convenient,

163
00:06:39,550 --> 00:06:41,762
because now you can see your code

164
00:06:41,762 --> 00:06:44,764
and issue operating system commands

165
00:06:44,764 --> 00:06:47,010
from the same screen.

166
00:06:47,010 --> 00:06:48,460
And it's also convenient,

167
00:06:48,460 --> 00:06:50,800
because if you open this terminal

168
00:06:50,800 --> 00:06:52,601
here in visual studio code,

169
00:06:52,601 --> 00:06:54,802
it will already be navigated

170
00:06:54,802 --> 00:06:57,560
into your project folder.

171
00:06:57,560 --> 00:06:59,862
So if you want to invoke the Node tool

172
00:06:59,862 --> 00:07:02,222
to execute the app JS file,

173
00:07:02,222 --> 00:07:04,260
we can just type the command

174
00:07:04,260 --> 00:07:05,950
in here in this terminal,

175
00:07:05,950 --> 00:07:07,670
and it will automatically

176
00:07:07,670 --> 00:07:09,880
be in this folder already.

177
00:07:09,880 --> 00:07:12,031
So, interacting with our code file here

178
00:07:12,031 --> 00:07:13,524
will be very easy

179
00:07:13,524 --> 00:07:17,150
if we use this integrated terminal.

180
00:07:17,150 --> 00:07:18,564
And to show you what I mean,

181
00:07:18,564 --> 00:07:21,650
let's now use this terminal,

182
00:07:21,650 --> 00:07:23,510
which we just opened up here,

183
00:07:23,510 --> 00:07:25,120
and in there type

184
00:07:25,120 --> 00:07:26,210
node

185
00:07:26,210 --> 00:07:27,380
blank

186
00:07:27,380 --> 00:07:28,853
app.js.

187
00:07:29,840 --> 00:07:32,920
So the Node command, which is a command

188
00:07:32,920 --> 00:07:35,710
I want to send to my operating system,

189
00:07:35,710 --> 00:07:38,643
and then after a blank, the file name.

190
00:07:39,660 --> 00:07:42,570
Now, the Node command will be available

191
00:07:42,570 --> 00:07:46,410
because we installed NodeJS, this tool.

192
00:07:46,410 --> 00:07:47,730
And this file name

193
00:07:47,730 --> 00:07:49,603
is simply the file name I chose here.

194
00:07:50,580 --> 00:07:52,290
If you now hit enter,

195
00:07:52,290 --> 00:07:54,960
you should see your username here

196
00:07:54,960 --> 00:07:56,760
in this terminal.

197
00:07:56,760 --> 00:07:59,950
So we see the username we chose here,

198
00:07:59,950 --> 00:08:04,193
here in our terminal because of console log.

199
00:08:05,040 --> 00:08:06,520
And that's now the result

200
00:08:06,520 --> 00:08:09,410
of us executing this JavaScript code

201
00:08:09,410 --> 00:08:13,520
with this Node tool through this default system

202
00:08:13,520 --> 00:08:15,004
command prompt, or terminal,

203
00:08:15,004 --> 00:08:18,170
and we're using the integrated terminal here,

204
00:08:18,170 --> 00:08:20,054
so that we see it all in one screen,

205
00:08:20,054 --> 00:08:22,070
and we run this command,

206
00:08:22,070 --> 00:08:24,953
already navigated into this project folder.

207
00:08:25,870 --> 00:08:28,390
Because if I would run the same command

208
00:08:28,390 --> 00:08:31,080
in my default terminal, or a command prompt,

209
00:08:31,080 --> 00:08:33,414
open outside of visual studio code,

210
00:08:33,414 --> 00:08:36,350
this will most likely fail

211
00:08:36,350 --> 00:08:38,120
if I execute this.

212
00:08:38,120 --> 00:08:39,374
You see here, I'm getting an error

213
00:08:39,374 --> 00:08:43,799
that it essentially can't find this app JS file.

214
00:08:43,799 --> 00:08:45,230
It might succeed for you,

215
00:08:45,230 --> 00:08:47,400
if you did store your code file

216
00:08:47,400 --> 00:08:48,473
in the same folder

217
00:08:48,473 --> 00:08:51,670
as the terminal is navigated in, by default,

218
00:08:51,670 --> 00:08:54,390
but most likely, that's not the case.

219
00:08:54,390 --> 00:08:55,510
So here you would have to

220
00:08:55,510 --> 00:08:57,473
switch to your project folder first,

221
00:08:57,473 --> 00:08:59,254
with the CD command.

222
00:08:59,254 --> 00:09:01,530
More on that can be learned

223
00:09:01,530 --> 00:09:03,182
with help of the attached link,

224
00:09:03,182 --> 00:09:05,390
but that's a bit cumbersome,

225
00:09:05,390 --> 00:09:09,240
And hence, we use this built in terminal instead.

226
00:09:09,240 --> 00:09:11,000
Now, you can also always close

227
00:09:11,000 --> 00:09:12,430
this integrated terminal

228
00:09:12,430 --> 00:09:14,530
by clicking here on close panel

229
00:09:14,530 --> 00:09:15,940
or the trash icon.

230
00:09:15,940 --> 00:09:18,453
And then you can always reopen it if you want to.