1
00:00:01,820 --> 00:00:08,120
All right, and lecture for we're going to set up a visual studio code in other aspects of what we need,

2
00:00:08,340 --> 00:00:13,850
other elements, we're going to build a Hello World Program and use live server to run it.

3
00:00:15,870 --> 00:00:17,670
So let's first talk about JavaScript.

4
00:00:19,360 --> 00:00:27,610
So JavaScript was developed by Netscape in 1995 to allow more dynamic websites, Netscape was the preeminent

5
00:00:27,610 --> 00:00:33,190
browser at the time and they wanted to have some more dynamic content and not everything be so flat

6
00:00:33,190 --> 00:00:33,790
and boring.

7
00:00:35,050 --> 00:00:37,600
So today, all browsers supported JavaScript engine.

8
00:00:39,850 --> 00:00:45,800
So initially we would embed code snippets in the original files to give a more dynamic feel to the pages,

9
00:00:45,800 --> 00:00:47,380
so we're going to do some of that in this course.

10
00:00:48,570 --> 00:00:53,580
And then Jay Querrey came along to had a more structured approach to using JavaScript to manipulate

11
00:00:53,580 --> 00:00:59,550
what's called the document object model, which document object model is just the object model of all

12
00:00:59,550 --> 00:01:01,500
the tags and HTML file.

13
00:01:03,830 --> 00:01:09,400
And then JavaScript frameworks started emerging in the 2010s, which included like Knock-Out Ember of

14
00:01:09,710 --> 00:01:10,820
Angular and React.

15
00:01:12,740 --> 00:01:17,270
So JavaScript, natural environments, the browser, but it's also moving onward with Web surfers like

16
00:01:17,270 --> 00:01:20,600
no jass to handle server side code.

17
00:01:22,700 --> 00:01:24,260
All right, here's a couple of definitions.

18
00:01:25,820 --> 00:01:30,860
So JavaScript is a programming language as a scripting language that gets built into the browser.

19
00:01:32,560 --> 00:01:40,330
Visual Studio Code is the editor that I'm going to use to edit the JavaScript and NEHTA himself to support

20
00:01:40,330 --> 00:01:40,480
it.

21
00:01:41,050 --> 00:01:46,900
You can use any other any editor, but I'd recommend that you just stick with Visual Studio code and

22
00:01:46,900 --> 00:01:47,950
follow along with the.

23
00:01:50,700 --> 00:01:55,980
So there's some small things in here, generally speaking, you might have a file called Index that

24
00:01:55,980 --> 00:02:02,940
each HTML, which it can be called something else, that's fine, but it's made up of things like a

25
00:02:02,940 --> 00:02:04,890
DOCTYPE and duct tape.

26
00:02:04,950 --> 00:02:08,100
Generally, each HTML and then different elements.

27
00:02:08,120 --> 00:02:13,500
We'll talk about these as we go along, like e-mail and body and each one in a indiv and so on.

28
00:02:16,190 --> 00:02:22,340
And then the live server extension is an extension that we build individual studio code to be able to

29
00:02:22,340 --> 00:02:23,570
run the programs.

30
00:02:26,160 --> 00:02:32,010
So we're going to do a couple of downloads to do this, so first we're going to a visual studio code

31
00:02:33,720 --> 00:02:36,390
and that's at this link and I'll put the link in the lecture.

32
00:02:40,400 --> 00:02:45,020
So when you click on that link, it takes you to this page and you download and install it installed

33
00:02:45,020 --> 00:02:50,960
for Windows, who installed for Macintosh can be installed for the Linux system.

34
00:02:53,190 --> 00:02:58,140
The second thing we need is Google Chrome, you can use any browser, but I'll be using Google Chrome

35
00:02:58,140 --> 00:02:58,890
in this course.

36
00:02:58,950 --> 00:03:02,050
So that might make more sense for you to follow along with that as well.

37
00:03:03,540 --> 00:03:09,840
So Chrome is a Google dot com slash chrome, so once Fiasco's installed, just launched it from your

38
00:03:09,840 --> 00:03:16,230
start menu or your program execution, however you do it on your particular computer and that's going

39
00:03:16,230 --> 00:03:19,070
to bring up an empty editor.

40
00:03:19,710 --> 00:03:22,980
Now, since I've done some use of this, there's some recent in here.

41
00:03:23,880 --> 00:03:27,340
So generally speaking, what you do with code is to open a folder.

42
00:03:28,110 --> 00:03:35,550
Now, I've put a zip file into the into this lecture and download that zip file and unzip it.

43
00:03:36,450 --> 00:03:38,220
And that will be our starter project.

44
00:03:40,350 --> 00:03:45,480
So when that Zippos downloaded see the downloads folder, another folder.

45
00:03:47,780 --> 00:03:51,860
And so we have this foul started that said, if you double click on it.

46
00:03:53,560 --> 00:03:59,500
At least some windows, you know, open up the zip and then give you some compressed forward tools.

47
00:04:01,000 --> 00:04:04,000
And if I click on that to extract and click extract all.

48
00:04:06,650 --> 00:04:07,880
And you pick a folder.

49
00:04:11,910 --> 00:04:18,060
And now it's extracted, so if I double click into that, I could see there's a whole world, that jass

50
00:04:18,570 --> 00:04:23,670
in a startup that e you know, so with Visual Studio Code, you open folders.

51
00:04:23,700 --> 00:04:25,440
So what we want to do is open this folder.

52
00:04:26,820 --> 00:04:32,280
So I want to open this folder in the easiest way to do it, at least, and Windows is just right, click

53
00:04:32,280 --> 00:04:33,390
and say open with code.

54
00:04:35,680 --> 00:04:37,210
That's going to open up another code.

55
00:04:37,390 --> 00:04:39,240
That's OK, I'm going to close this one.

56
00:04:43,090 --> 00:04:50,400
And now this folder is opened up in Visual Studio Code second, have two files, stalactite e-mail and

57
00:04:50,410 --> 00:04:51,070
whoever wrote that?

58
00:04:51,220 --> 00:04:51,550
Yes.

59
00:04:52,480 --> 00:04:55,060
So let's take a look at Visual Studio code and what it can do.

60
00:04:58,800 --> 00:05:05,820
So, as I said, this could works on Folder's, but similar to a editor at work, similar to Notepad,

61
00:05:05,820 --> 00:05:09,510
Microsoft Word for other files where you write and edit text.

62
00:05:10,410 --> 00:05:15,420
So you load a folder on your computer and then you load all the files, that folder in all the folders

63
00:05:15,420 --> 00:05:17,240
and files below that folder.

64
00:05:17,640 --> 00:05:20,940
So loads and a whole hierarchy of files and folders.

65
00:05:24,770 --> 00:05:30,740
So there's a file explorer on the left that lets you explore the files and you can open up multiple

66
00:05:30,740 --> 00:05:33,680
files and shows them on the top and a ribbon.

67
00:05:34,310 --> 00:05:38,470
So right now of testing three, that text and testing dash.

68
00:05:38,480 --> 00:05:40,310
Copy that text open.

69
00:05:44,610 --> 00:05:50,760
So when you make changes, it shows you which ones have changed with a little white that says open EDS

70
00:05:51,090 --> 00:05:58,920
in the Explorer that show you which editors are currently open and which files have been changed.

71
00:06:01,660 --> 00:06:02,620
There's a search.

72
00:06:03,640 --> 00:06:09,310
And that lets you search all the files you do have control after search in one file, but this lets

73
00:06:09,310 --> 00:06:13,660
you search all the files and then you can click on it to show that file.

74
00:06:14,920 --> 00:06:21,190
And then finally, there's an extension button that allows you to install or remove extensions, so

75
00:06:21,190 --> 00:06:23,820
we're going to be installing the live server extension.

76
00:06:25,630 --> 00:06:30,310
And then finally, the little guy at the bottom lets you see settings and let you get updates from Visual

77
00:06:30,310 --> 00:06:31,120
Studio Code.

78
00:06:34,350 --> 00:06:36,040
So let's take a look at our example.

79
00:06:36,060 --> 00:06:38,010
We're going to run the hello world example.

80
00:06:38,700 --> 00:06:42,480
So what we're going to do is just to buy Hello World as a text.

81
00:06:43,860 --> 00:06:45,640
And then we do some other variations.

82
00:06:45,840 --> 00:06:51,060
There's a console, there's a prompter to confirm and there's an alert that will try out.

83
00:06:52,590 --> 00:06:58,230
So here's our folder open in LVS code again, I'm going to go to the extension's and install live server

84
00:06:58,530 --> 00:07:04,140
and already have some extensions installed there, probably not important for this class, but you can

85
00:07:04,140 --> 00:07:05,760
store lots of different extensions.

86
00:07:06,270 --> 00:07:13,080
So I'll type in live server and the one we want is this one by Ritwik Day.

87
00:07:13,740 --> 00:07:14,910
So I click install.

88
00:07:19,290 --> 00:07:24,390
And it's possible after it installs is set in stone right now that you have to reload visual studio

89
00:07:24,390 --> 00:07:29,330
code, which means you need to shut it down and restart it, but it looks like mine installed.

90
00:07:29,340 --> 00:07:34,770
OK, so now I can go back and then in another file I can.

91
00:07:34,770 --> 00:07:35,070
Right.

92
00:07:35,070 --> 00:07:37,110
Click and say open with live server.

93
00:07:41,600 --> 00:07:46,940
In this will load the the program up in Chrome

94
00:07:50,240 --> 00:07:54,720
in just a little bit bigger, and when I click, he'll run Hello World.

95
00:07:54,740 --> 00:07:55,640
Nothing happens.

96
00:07:56,630 --> 00:07:57,540
And why is that?

97
00:07:57,960 --> 00:08:04,130
Is because this program runs the output into the console of the browser.

98
00:08:04,790 --> 00:08:10,280
So what we do is it says at the top, even if 12, so we have 12.

99
00:08:10,280 --> 00:08:11,130
It brings up the browser.

100
00:08:11,130 --> 00:08:12,980
And you can see up here it already rented hello.

101
00:08:12,980 --> 00:08:14,270
World Council was cleared.

102
00:08:16,580 --> 00:08:21,800
We can take this console we conducted in different places, like, for example, the doctor on the right

103
00:08:21,800 --> 00:08:22,130
side.

104
00:08:23,070 --> 00:08:29,700
Well, I can pop it out as its own window, but for now, we'll just leave it down at the bottom.

105
00:08:30,840 --> 00:08:34,900
So every time I click run Hello World, it's going to run that in there.

106
00:08:35,370 --> 00:08:37,500
So let's take a look at the program that's doing this.

107
00:08:38,880 --> 00:08:40,050
So there's two parts.

108
00:08:40,060 --> 00:08:41,610
There's the start of today's HTML.

109
00:08:42,240 --> 00:08:46,300
The JavaScript needs to be embedded into an HTML file so that it will run.

110
00:08:48,450 --> 00:08:54,480
So when I look at this, I can see there's some channel tags like HTML and Body and each one you can

111
00:08:54,480 --> 00:08:57,120
see the most examples here of 12.

112
00:08:57,810 --> 00:09:04,570
The important part for us is where it says script and script means to load a JavaScript script.

113
00:09:04,770 --> 00:09:09,240
It could be a different type of script, but it's usually a JavaScript because it says here at the type

114
00:09:09,240 --> 00:09:14,700
of text JavaScript and that's kind of load a source file called Hello World that.

115
00:09:14,700 --> 00:09:16,230
Yes, we can see that right here.

116
00:09:16,380 --> 00:09:17,090
Hello, Robert.

117
00:09:17,130 --> 00:09:17,450
Yes.

118
00:09:18,660 --> 00:09:22,290
And then there's a button in the button has an unclick evet.

119
00:09:23,580 --> 00:09:26,610
And in the event it says hello.

120
00:09:27,540 --> 00:09:29,580
Opened and closed parenthetical.

121
00:09:31,370 --> 00:09:33,230
And then there's Textron, hello, world.

122
00:09:34,740 --> 00:09:40,800
So if we look at the contents of Hello World, that, yes, it has the hello right here and that's what

123
00:09:40,800 --> 00:09:45,580
it's going to run and it does two things consider clear world.

124
00:09:45,630 --> 00:09:46,380
Hello, world.

125
00:09:47,010 --> 00:09:48,000
And we saw that run.

126
00:09:48,000 --> 00:09:49,230
Let's add another message to it.

127
00:09:51,360 --> 00:09:55,230
Council that dialogue now for the messages.

128
00:09:55,650 --> 00:09:57,540
I can use single quotes with double quotes.

129
00:09:57,540 --> 00:09:58,920
I can use double quotes instead.

130
00:10:00,300 --> 00:10:01,350
It just doesn't matter.

131
00:10:05,900 --> 00:10:08,880
So once I save it, it's going to reload it right away.

132
00:10:09,980 --> 00:10:13,820
So let's bring that up so you can see that happen.

133
00:10:13,980 --> 00:10:20,300
I will turn it to the right and open that to the left so I can save this a couple of ways.

134
00:10:20,990 --> 00:10:24,200
I can go to the file menu and click save.

135
00:10:24,290 --> 00:10:31,250
I can do control s and then but then in open eds, there's little save all button here.

136
00:10:31,800 --> 00:10:33,230
And so that's usually kind of handy.

137
00:10:33,540 --> 00:10:38,260
You can also set up a visual studio codes that every time you make a changes, saves automatically.

138
00:10:39,020 --> 00:10:39,910
But I'm not going to do that.

139
00:10:40,610 --> 00:10:44,450
So going to click save all and then it reloads.

140
00:10:45,020 --> 00:10:45,920
And now when I run.

141
00:10:45,920 --> 00:10:46,490
Hello Rob.

142
00:10:46,490 --> 00:10:47,450
It's this whole world.

143
00:10:47,450 --> 00:10:48,110
How are you.

144
00:10:49,870 --> 00:10:56,230
All right, let's do a couple of the changes I mentioned that we can do a confirmed, we can do a prompt

145
00:10:56,680 --> 00:10:57,750
and so on.

146
00:10:58,450 --> 00:11:00,040
So I'm going to.

147
00:11:01,480 --> 00:11:04,720
Shrink this down a little bit, add a couple of things to this.

148
00:11:05,310 --> 00:11:07,750
So for the confirm, we're going to get back an answer.

149
00:11:08,260 --> 00:11:08,980
So do that.

150
00:11:08,980 --> 00:11:12,910
We're going to Tetun Aulet, confirm this is variables.

151
00:11:12,910 --> 00:11:14,380
We're going to get that into that.

152
00:11:14,380 --> 00:11:15,040
Into that.

153
00:11:16,150 --> 00:11:17,710
We'll get into that in the next section.

154
00:11:18,860 --> 00:11:23,560
And I'll say prompt and then perhaps parentheses.

155
00:11:23,560 --> 00:11:25,300
I'm going to specify a prompt

156
00:11:28,720 --> 00:11:36,850
what is your favorite color at the end and put it in a circle.

157
00:11:38,770 --> 00:11:45,160
So let me say, and now when I run, how overall it's going to prompt me.

158
00:11:46,030 --> 00:11:47,170
It's already put out the whole world.

159
00:11:47,170 --> 00:11:47,770
How are you?

160
00:11:49,630 --> 00:11:51,910
It's going to prompt me with what is your favorite color?

161
00:11:54,580 --> 00:11:55,620
So I'll tap and read.

162
00:11:59,700 --> 00:12:05,070
And it does nothing with it, so if you want to do something with it, we need to log it out at this

163
00:12:05,070 --> 00:12:05,390
point.

164
00:12:06,300 --> 00:12:07,260
So I'm going to say.

165
00:12:09,930 --> 00:12:23,040
Council that log your favorite color is and then after the the quote, I can put more things, so I'm

166
00:12:23,040 --> 00:12:26,190
going to put the confirms, I said comma confirmed.

167
00:12:27,480 --> 00:12:30,530
And then again, I have to go at the end and put a semicolon,

168
00:12:33,660 --> 00:12:34,530
so I'll save.

169
00:12:35,220 --> 00:12:42,450
And now I'm using controls to save run red again.

170
00:12:43,410 --> 00:12:44,840
And this is done here at the bottom.

171
00:12:44,850 --> 00:12:47,760
Your favorite color is red there.

172
00:12:47,790 --> 00:12:58,380
Nothing we can do is called a a confirm I but confirm up here and that should be like answer or something.

173
00:12:59,310 --> 00:13:01,560
But let me show you a quick visual studio trick.

174
00:13:01,860 --> 00:13:07,680
Why I made a mistake is there's a way that you can rename it everywhere and you just hit the F2 button

175
00:13:07,680 --> 00:13:08,250
to do that.

176
00:13:09,390 --> 00:13:18,390
So I have to and then I can rename it and hit return or enter and you can see that it also renamed it

177
00:13:18,390 --> 00:13:18,810
out here.

178
00:13:21,000 --> 00:13:34,440
Some would do the same thing and we say, let us just call to go equals confirm, keep going.

179
00:13:35,080 --> 00:13:39,120
Questionmark, you don't really need space and semicolon.

180
00:13:39,920 --> 00:13:41,040
Let's go ahead and log that out.

181
00:13:46,770 --> 00:13:47,550
Keep going.

182
00:13:49,110 --> 00:13:49,500
Go.

183
00:13:50,700 --> 00:13:51,060
All right.

184
00:13:51,060 --> 00:13:55,830
So we collected a confirmation and then we are writing out the response.

185
00:13:56,820 --> 00:14:03,780
So save I'm going to use controllers to save run they read.

186
00:14:04,350 --> 00:14:06,120
And that is going to give us a confirmation.

187
00:14:06,420 --> 00:14:07,020
Keep going.

188
00:14:07,020 --> 00:14:07,740
Questionmark.

189
00:14:08,340 --> 00:14:10,110
If I say, OK, it's going to return.

190
00:14:10,110 --> 00:14:12,500
True, if I say cancels can return false.

191
00:14:13,380 --> 00:14:15,480
So I'll say, OK, true.

192
00:14:18,490 --> 00:14:25,660
And then the last of this is an alert, so you can say just stay alert all that.

193
00:14:32,220 --> 00:14:41,190
So now when I run in red, this time, I'll say cancel this is false and then a turns out a message

194
00:14:41,190 --> 00:14:46,680
up here in a pop up that says, all done and you just click, OK, you can't do anything else until

195
00:14:46,680 --> 00:14:47,460
you click, OK?

196
00:14:48,510 --> 00:14:50,270
And that's true with the prompt and the confirm.

197
00:14:50,280 --> 00:14:51,450
You have to complete them.

198
00:14:52,720 --> 00:14:57,640
Most of these are just used for debugging and things like that, they're not used for real applications.

199
00:14:59,290 --> 00:15:05,830
So these fields are what I call simple input and output with the council that log with councils are

200
00:15:05,830 --> 00:15:07,540
clear, which clears the council.

201
00:15:08,920 --> 00:15:11,680
We say let X equals prompt.

202
00:15:11,680 --> 00:15:15,820
We have prompt an alert and we have confirmation.

203
00:15:18,290 --> 00:15:27,470
So a short e-mail overview we have our teno has matching elements, so we have each channel as a starting

204
00:15:27,470 --> 00:15:36,730
element and then slash HTML is the ending element with div div and I almost have a browser to do something,

205
00:15:36,740 --> 00:15:38,010
for example, each one.

206
00:15:38,060 --> 00:15:43,160
This is a big header slash H1 and we could see that in our application.

207
00:15:46,040 --> 00:15:51,350
So back here, if we look in the start of that east, you know, we have our H1 right here and we could

208
00:15:51,350 --> 00:15:55,910
see that when we ran it that the H1 element.

209
00:15:57,450 --> 00:15:59,040
Which is this is really big.

210
00:16:01,080 --> 00:16:03,840
And then we been able to eliminate down here, which is a little bit smaller.

211
00:16:06,670 --> 00:16:08,710
So whole world examples a little bit smaller.

212
00:16:10,930 --> 00:16:17,380
And Visual Studio, when you've highlighted Element Visual Studio Code, it highlights the closing element,

213
00:16:18,190 --> 00:16:25,360
so highlight each one says there's the ending element and so almost all beginning elements should have

214
00:16:25,360 --> 00:16:26,280
an ending element.

215
00:16:31,120 --> 00:16:37,030
There almost can have attributes, for example, get into this later, there's an anchor tag, which

216
00:16:37,030 --> 00:16:41,090
is a hyperlink that that tells it to go somewhere.

217
00:16:41,110 --> 00:16:46,810
So this example just says go to Google and it provides that Google you URL as an address.

218
00:16:47,920 --> 00:16:49,540
And elements can also have style.

219
00:16:50,260 --> 00:16:57,310
So, for example, this div has a style that has color red, a font size of two ram.

220
00:16:58,500 --> 00:17:02,490
And REM is just a font or a size specification.

221
00:17:03,950 --> 00:17:10,010
So let's copy these out of my PowerPoint and put them into our e-mail and see what they do.

222
00:17:11,890 --> 00:17:17,200
So here I have them in the e-mail and I copied them from Microsoft PowerPoint and it used the smart,

223
00:17:17,200 --> 00:17:19,400
quote, characters, and that's not going to work for you.

224
00:17:19,510 --> 00:17:20,820
Now you see the difference.

225
00:17:20,830 --> 00:17:22,390
These are straight and these are curly.

226
00:17:23,200 --> 00:17:24,960
So I'm going to just erase them.

227
00:17:25,660 --> 00:17:33,190
And this is strictly from copying them from PowerPoint and then back here and we do the same thing.

228
00:17:39,990 --> 00:17:40,950
The next one for me.

229
00:17:42,360 --> 00:17:47,250
So now look for me to see that the color red is kind of put in there for me to see.

230
00:17:47,940 --> 00:17:49,110
So let's save this.

231
00:17:53,520 --> 00:17:59,100
Now on our screen, you can see that next to the Ron Howard world, there's a go to Google and there's

232
00:17:59,100 --> 00:18:01,620
a hello again enlarger read text.

233
00:18:02,400 --> 00:18:03,930
So if I click and go to Google.

234
00:18:04,970 --> 00:18:06,830
It's just going to go to the Google Web page.

235
00:18:10,640 --> 00:18:17,510
So here's a little bit of an update on the format of a JavaScript function, so there is a function

236
00:18:17,510 --> 00:18:23,150
keyword and we could see that in our our whole world that James has its function.

237
00:18:23,160 --> 00:18:23,690
Hello.

238
00:18:25,640 --> 00:18:29,840
And then functions begin with a left calibration and with a right curly brace.

239
00:18:29,870 --> 00:18:31,790
And this is referred to as a code block.

240
00:18:33,830 --> 00:18:35,840
And the statements end with a semicolon.

241
00:18:39,840 --> 00:18:47,280
So we can see here we have our function keyword, we have our left curly brace and aligns with the right

242
00:18:47,280 --> 00:18:48,030
curly brace.

243
00:18:49,570 --> 00:18:55,840
And then all these folks are all these statements and Cenacle on the curly braces, do not.

244
00:19:00,230 --> 00:19:07,040
So I have a couple of resources that I'll put the links in the in the lecture, Mozilla, which is the

245
00:19:07,040 --> 00:19:11,480
creator of Firefox, has a great JavaScript reference.

246
00:19:12,170 --> 00:19:17,290
And then there's three schools, there's a tutorial and then there's a reference there as well.

247
00:19:19,050 --> 00:19:24,950
So that covers are introduction to JavaScript with the Hello World Program.

248
00:19:25,510 --> 00:19:27,880
Next, we're going to get into primitive data types.