1
00:00:00,050 --> 00:00:07,220
This is where we left in the previous video whereby we wrote our first JavaScript code.

2
00:00:07,730 --> 00:00:17,750
In this video we are going to learn a couple of ways to include JavaScript in HTML code and I will show

3
00:00:17,750 --> 00:00:22,910
you the recommended one back to Visual Studio code.

4
00:00:23,270 --> 00:00:26,720
I forgot to explain this syntax.

5
00:00:26,960 --> 00:00:37,490
This is what we call comment in JavaScript and comments are ignored by the browser, meaning it is not

6
00:00:37,490 --> 00:00:44,810
visible to the end user, but instead it gives more details about our code.

7
00:00:45,080 --> 00:00:53,060
So we use what is called double forward slash and you can enter or type anything here.

8
00:00:54,060 --> 00:00:54,600
Great.

9
00:00:54,600 --> 00:00:57,330
So I'll be using comments a lot.

10
00:00:57,540 --> 00:00:59,850
So back to business.

11
00:01:00,330 --> 00:01:07,530
How are we going to link or how many ways we can link JavaScript in HTML?

12
00:01:08,070 --> 00:01:15,600
And I'm going to add the options or the types inside the HTML as comment.

13
00:01:16,330 --> 00:01:21,040
And we can add comment by using this syntax.

14
00:01:21,340 --> 00:01:24,250
And I'm going to have multi-line comment.

15
00:01:24,580 --> 00:01:28,960
And the first method is called inline scripting.

16
00:01:31,090 --> 00:01:32,350
What does it mean?

17
00:01:32,590 --> 00:01:43,030
This simply means that including your JavaScript code directly in your HTML file using the script tag.

18
00:01:43,300 --> 00:01:46,340
And that is what we have implemented.

19
00:01:46,360 --> 00:01:50,140
So this is what you call the inline scripting.

20
00:01:50,830 --> 00:01:57,220
And this method is useful for small pieces of JavaScript code.

21
00:01:57,580 --> 00:02:01,270
But in real world applications, we don't use this.

22
00:02:01,840 --> 00:02:06,790
And let's say that we're going to have more lines of JavaScript code.

23
00:02:07,210 --> 00:02:15,400
As you can see, this file will have more codes, including the JavaScript and then the HTML and it

24
00:02:15,400 --> 00:02:20,230
will be very difficult for debugging and maintaining.

25
00:02:20,530 --> 00:02:23,860
So this approach is not the ideal way.

26
00:02:24,250 --> 00:02:30,340
The next option is using what is called the external JavaScript.

27
00:02:30,550 --> 00:02:35,170
So inside the head tag, this is the first option.

28
00:02:35,500 --> 00:02:38,380
And the second option I'm going to add the comment.

29
00:02:38,380 --> 00:02:46,390
And as that which goes like this JavaScript external file inside the head tag.

30
00:02:46,950 --> 00:02:56,760
Meaning that we are going to write our JavaScript code in a separate file and we link the JavaScript

31
00:02:56,760 --> 00:02:58,350
to the HTML.

32
00:02:59,000 --> 00:03:01,880
So I'm going to remove this comment.

33
00:03:03,030 --> 00:03:05,580
And now let me comment out this.

34
00:03:06,780 --> 00:03:13,800
And let me show you how we are going to use the external method.

35
00:03:14,040 --> 00:03:15,810
And it goes like this.

36
00:03:16,020 --> 00:03:23,640
Inside the folder structure here, we can create one folder for our JavaScript files.

37
00:03:24,120 --> 00:03:29,950
But since we are getting started, I'm going to create the file in line with the HTML.

38
00:03:29,970 --> 00:03:31,650
And it goes like this.

39
00:03:32,070 --> 00:03:34,500
I'm going to make use of script.

40
00:03:34,890 --> 00:03:45,180
The script here is the name of my JavaScript file and dot the extension in this case JS, which represents

41
00:03:45,210 --> 00:03:46,290
JavaScript.

42
00:03:46,560 --> 00:03:49,890
And the name here it can be anything.

43
00:03:51,440 --> 00:03:58,880
But make sure that the name is descriptive, so I'll go for script dot js.

44
00:03:59,410 --> 00:04:03,550
And over here we can write any JavaScript code.

45
00:04:03,550 --> 00:04:07,990
So let's write our first line of JavaScript as.

46
00:04:08,530 --> 00:04:12,010
This is another method.

47
00:04:13,140 --> 00:04:14,460
Now, save it.

48
00:04:14,460 --> 00:04:16,500
And let's have a look here.

49
00:04:16,500 --> 00:04:20,760
As you can see, we don't see our JavaScript code.

50
00:04:21,240 --> 00:04:26,760
So how are we going to connect the JavaScript, which is this?

51
00:04:26,760 --> 00:04:35,140
And then the HTML as is done right now, these two files are independent, meaning they are not related.

52
00:04:35,160 --> 00:04:37,350
So how are we going to connect?

53
00:04:37,500 --> 00:04:47,670
And inside the head tag we are going to use the same script tag and it goes like this script and inside

54
00:04:47,670 --> 00:04:55,050
the first angle bracket we are going to pass in couple of attributes and that is the Urswick, which

55
00:04:55,050 --> 00:04:57,450
represents the source of the file.

56
00:04:57,570 --> 00:05:02,520
And the file is located in the same file as the HTML.

57
00:05:02,520 --> 00:05:10,230
So I can use period and forward slash and I have the file if I save this and check it out.

58
00:05:10,230 --> 00:05:16,300
And now I can see my JavaScript code are being run inside the browser.

59
00:05:16,720 --> 00:05:23,140
And for this approach it is not the recommended way of using JavaScript.

60
00:05:23,260 --> 00:05:31,900
Let me show you what I mean here to better understand that unless you know how the browsers displaces

61
00:05:31,900 --> 00:05:40,180
or render our HTML and JavaScript and any other files before we are going to see our application.

62
00:05:40,630 --> 00:05:48,970
First of all, the browser will load the HTML and it will start from top to bottom.

63
00:05:49,150 --> 00:05:57,130
So it will start to load these ones, these ones, and come down here and going to load the JavaScript.

64
00:05:57,810 --> 00:06:05,880
And for this approach, in case you're going to have more lines of code of JavaScript, as you can see,

65
00:06:05,880 --> 00:06:10,290
is going to slow down the rendering of the application.

66
00:06:10,800 --> 00:06:18,750
And also it can happen that our JavaScript file will rely on the HTML document.

67
00:06:18,930 --> 00:06:25,740
For example, if you want to perform some operations like deleting using the Dom and other operations,

68
00:06:26,040 --> 00:06:34,170
unless the HTML load first before our JavaScript can operate on the HTML.

69
00:06:34,890 --> 00:06:43,320
And if you look inside the console here, if you click on Element, as you can see, this is our HTML.

70
00:06:43,740 --> 00:06:47,070
The browser has loaded our HTML.

71
00:06:47,160 --> 00:06:49,800
Likewise our JavaScript.

72
00:06:50,190 --> 00:06:55,650
So how are we going to avoid this calamities or problems?

73
00:06:56,280 --> 00:07:01,050
Again, let me show you how the browser renders our application.

74
00:07:01,820 --> 00:07:12,380
First of all, the browser will parses the HTML as we see here and it will halt or stop rendering when

75
00:07:12,380 --> 00:07:14,870
it encounters a script tag.

76
00:07:15,540 --> 00:07:24,870
Meaning that it will wait for the JavaScript to load, then execute the JavaScript file and then continue

77
00:07:24,900 --> 00:07:27,330
to parse the HTML.

78
00:07:27,690 --> 00:07:32,880
And this can lead to slower perceived load time for the user.

79
00:07:32,880 --> 00:07:37,680
If the script is large or the network is slow.

80
00:07:38,160 --> 00:07:41,310
So how are we going to improve this?

81
00:07:41,820 --> 00:07:49,170
Well, that is why we have another option called using the external method.

82
00:07:49,260 --> 00:07:53,700
But instead we are going to use additional attributes on the script tag.

83
00:07:54,000 --> 00:08:03,540
Now let me copy that and comment that and here paste it here and I will say head tag, wait, defer

84
00:08:03,570 --> 00:08:04,440
attribute.

85
00:08:04,860 --> 00:08:08,700
So here I'm going to pass in the defer.

86
00:08:09,420 --> 00:08:14,430
As the name implies, we are going to defer the JavaScript.

87
00:08:15,020 --> 00:08:23,450
And this attribute indicates that the script in this case, the Java script, should be fetched asynchronously

88
00:08:23,690 --> 00:08:31,310
while the HTML document is passing and be executed as soon as it is available.

89
00:08:31,820 --> 00:08:39,320
And even if the person is not yet complete, this can lead to HTML passing pauses.

90
00:08:39,350 --> 00:08:44,630
If the script loads and executes before the passing is complete.

91
00:08:45,050 --> 00:08:53,240
So this defer attribute helps the file to load asynchronously whilst passing the HTML.

92
00:08:53,990 --> 00:08:55,670
So if I save this.

93
00:08:56,670 --> 00:08:57,900
Click on console.

94
00:08:58,170 --> 00:09:03,390
I still see the JavaScript code here that has been displayed.

95
00:09:04,080 --> 00:09:12,270
Well, for this method, we can improve upon it by passing additional attribute to the script.

96
00:09:12,510 --> 00:09:20,100
So this brings us to another important option called using defer attribute.

97
00:09:20,550 --> 00:09:22,680
So I'm going to copy this.

98
00:09:23,220 --> 00:09:28,320
And down here, paste it, make sure you are inside the head tag.

99
00:09:28,440 --> 00:09:30,960
And let me comment out this one.

100
00:09:31,410 --> 00:09:36,670
And here the next option is going to be using the external file.

101
00:09:36,690 --> 00:09:41,700
But instead, wait, defer attribute.

102
00:09:43,110 --> 00:09:43,960
Great.

103
00:09:43,980 --> 00:09:48,120
So here we are going to pass in defer attribute.

104
00:09:48,300 --> 00:09:49,770
What does it mean?

105
00:09:50,190 --> 00:10:00,030
This indicates that the script or the JavaScript should be executed only after the HTML document has

106
00:10:00,030 --> 00:10:01,830
been fully parsed.

107
00:10:02,480 --> 00:10:07,970
Unlike the previous method, the passing of HTML is not blocked.

108
00:10:08,270 --> 00:10:14,060
The script is fetched asynchronously while the HTML is passing.

109
00:10:14,270 --> 00:10:21,500
So for this one, the browser is not going to stop loading the HTML while waiting for the JavaScript

110
00:10:21,500 --> 00:10:22,190
to load.

111
00:10:22,310 --> 00:10:28,610
So if I save this, as you can see, we still see the JavaScript code.

112
00:10:29,280 --> 00:10:35,940
Then another option is using the same external method but with different attributes.

113
00:10:35,970 --> 00:10:41,670
So comment out this and here wait async attribute.

114
00:10:41,940 --> 00:10:45,120
Now I'm going to pass in here as async.

115
00:10:45,720 --> 00:10:46,950
What does it mean?

116
00:10:47,130 --> 00:10:56,370
This indicates that the script should be fetched asynchronously while the HTML document is passing and

117
00:10:56,370 --> 00:11:03,750
be executed as soon as it is available, even if the person is not yet complete.

118
00:11:04,140 --> 00:11:11,880
So this means that it's going to work asynchronously, meaning it will not block other operation.

119
00:11:12,980 --> 00:11:14,180
But for they defer.

120
00:11:15,310 --> 00:11:21,880
It will wait until the estimate document are loaded before the JavaScript file.

121
00:11:21,970 --> 00:11:25,960
If I save this one, everything remains the same.

122
00:11:26,380 --> 00:11:34,690
The next option is using inside the body tag, so I will copy that and let me comment out this.

123
00:11:35,140 --> 00:11:38,280
Now we are moving away from the head tag.

124
00:11:38,290 --> 00:11:40,960
Now inside the body tag.

125
00:11:41,260 --> 00:11:47,230
So here I'm going to use external method with the body tag.

126
00:11:49,850 --> 00:11:56,630
And for this we are going to place the JavaScript below all the HTML.

127
00:11:57,110 --> 00:12:00,650
And like I said, it loads from top to bottom.

128
00:12:01,070 --> 00:12:09,140
So by the time it will get here, all our HTML code here will finish loading and let me remove the async

129
00:12:09,140 --> 00:12:09,620
here.

130
00:12:10,010 --> 00:12:13,940
So if I save it, everything remains the same.

131
00:12:14,240 --> 00:12:23,270
So this method and then the with async and with defer work in the same way, but it depends on some

132
00:12:23,270 --> 00:12:24,200
use cases.

133
00:12:24,500 --> 00:12:32,980
So we will go by placing it below the body or placing it inside the head tag.

134
00:12:32,990 --> 00:12:37,670
But instead we are going to use defer or async.

135
00:12:38,120 --> 00:12:47,060
And let me show you a couple of ways we can use JavaScript inside HTML and we have what is called using

136
00:12:47,060 --> 00:12:51,680
the event handler attribute inside the body tag here.

137
00:12:52,220 --> 00:12:53,750
I'm going to add a comment.

138
00:12:55,080 --> 00:13:01,650
Meaning that I'm going to write JavaScript in line with HTML attribute.

139
00:13:01,980 --> 00:13:07,500
For this, if I provide a button here and I will say click me.

140
00:13:08,570 --> 00:13:10,550
And on the button.

141
00:13:10,580 --> 00:13:13,070
We're going to pass in a couple of attributes.

142
00:13:13,400 --> 00:13:16,430
And the first one, we're going to be the onClick.

143
00:13:16,880 --> 00:13:21,650
And inside here, I can provide any JavaScript code.

144
00:13:22,250 --> 00:13:25,550
For the meantime, let's console dot log.

145
00:13:27,760 --> 00:13:29,710
And I will say.

146
00:13:30,810 --> 00:13:37,110
This is from the button or button clicked.

147
00:13:37,470 --> 00:13:39,060
If I save this one.

148
00:13:39,680 --> 00:13:40,700
Let's have a look.

149
00:13:40,730 --> 00:13:42,680
If I click on click Me.

150
00:13:43,130 --> 00:13:48,080
As you can see, we have the JavaScript code here.

151
00:13:48,800 --> 00:13:53,720
The next option is using JavaScript URL.

152
00:13:54,380 --> 00:13:55,520
What do I mean?

153
00:13:55,730 --> 00:13:57,080
Let me show you here.

154
00:13:57,560 --> 00:14:09,490
Let me put it here below this one and I will say JavaScript in the URL and we are going to use the a

155
00:14:09,560 --> 00:14:17,330
link here or a attribute or a tag here and inside we are now going to provide any path, but instead

156
00:14:17,330 --> 00:14:23,740
we are going to write JavaScript by providing JavaScript and colon.

157
00:14:23,750 --> 00:14:28,010
After that we can write any JavaScript code.

158
00:14:28,660 --> 00:14:38,320
And I will say from a tag and I'll provide something like register.

159
00:14:38,770 --> 00:14:39,430
All right.

160
00:14:39,430 --> 00:14:41,470
And the value I will say.

161
00:14:42,580 --> 00:14:44,590
Registered successfully.

162
00:14:44,620 --> 00:14:46,420
Oh, let me say registered.

163
00:14:46,450 --> 00:14:47,050
Great.

164
00:14:47,050 --> 00:14:50,800
So now let's see if we're going to have this message inside the console.

165
00:14:51,100 --> 00:14:53,900
If I click on that, I have registered.

166
00:14:53,920 --> 00:14:56,620
If I click on, click Me, I have it.

167
00:14:56,830 --> 00:15:05,170
So these are a couple of ways we can use JavaScript in HTML, but the recommended ones are using inside

168
00:15:05,170 --> 00:15:11,830
the body and using inside the head tag by using defer or async attribute.