1
00:00:02,230 --> 00:00:05,960
Now as we continue writing JavaScript code,

2
00:00:05,960 --> 00:00:10,370
we add more and more code to this HTML file.

3
00:00:10,370 --> 00:00:12,590
And that's important to keep in mind.

4
00:00:12,590 --> 00:00:16,230
We are still in a HTML file in here.

5
00:00:16,230 --> 00:00:18,940
And just as with the CSS code

6
00:00:18,940 --> 00:00:22,010
between the style tax earlier in the course,

7
00:00:22,010 --> 00:00:25,870
we also don't want to add too much JavaScript code

8
00:00:25,870 --> 00:00:27,870
to the HTML file.

9
00:00:27,870 --> 00:00:32,280
Instead The HTML filed should stay focused on HTML

10
00:00:32,280 --> 00:00:35,293
and should not be bloated with all our script code.

11
00:00:36,140 --> 00:00:39,150
Because of course this hear is a simple file.

12
00:00:39,150 --> 00:00:42,710
It has basically no real HTML content,

13
00:00:42,710 --> 00:00:45,193
since I want to focus on Java script here,

14
00:00:46,050 --> 00:00:48,950
but that's not realistic in a reality,

15
00:00:48,950 --> 00:00:51,820
we would probably have a lot of HTML content.

16
00:00:51,820 --> 00:00:54,840
And then also having a lot of script code in here

17
00:00:54,840 --> 00:00:57,330
can make it harder to work with that file

18
00:00:57,330 --> 00:00:59,423
and manage this file efficiently.

19
00:01:00,520 --> 00:01:03,350
Therefore, instead of having that script code in here,

20
00:01:03,350 --> 00:01:05,440
we typically want to outsource that code

21
00:01:05,440 --> 00:01:06,800
into a separate file

22
00:01:06,800 --> 00:01:09,193
and that's something we can easily do.

23
00:01:10,130 --> 00:01:13,940
We can add a new file here in our project folder,

24
00:01:13,940 --> 00:01:16,780
and we can give this file. Any name of our choice,

25
00:01:16,780 --> 00:01:19,053
for example, app dot JS.

26
00:01:19,940 --> 00:01:24,610
The only thing which is not up to you is the file extension.

27
00:01:24,610 --> 00:01:26,870
That should be dot JS,

28
00:01:26,870 --> 00:01:28,970
which stands for JavaScript.

29
00:01:28,970 --> 00:01:30,680
And since we're going to the store,

30
00:01:30,680 --> 00:01:32,730
some Java script code in that file,

31
00:01:32,730 --> 00:01:34,593
that's the extension we should use.

32
00:01:35,610 --> 00:01:38,360
But the part in front of the extension is up to you.

33
00:01:38,360 --> 00:01:42,410
That could be scripts dot JS, or site dot JS.

34
00:01:42,410 --> 00:01:46,283
And here I'll just choose app dot JS, but it is up to you.

35
00:01:48,300 --> 00:01:51,916
Now we can grab our JavaScript code and only the code

36
00:01:51,916 --> 00:01:56,916
between the script tags, not including the script texts,

37
00:01:57,060 --> 00:02:00,480
just as we did it with the CSS code before as well.

38
00:02:00,480 --> 00:02:03,550
We took the CSS code between the style tags,

39
00:02:03,550 --> 00:02:05,890
not including the style tax.

40
00:02:05,890 --> 00:02:08,759
And then we cut that JavaScript code,

41
00:02:08,759 --> 00:02:13,760
from the HTML file and paste it into our app JS file.

42
00:02:15,520 --> 00:02:18,830
And here I'll press that format document shortcut

43
00:02:18,830 --> 00:02:21,040
to quickly format this appropriately

44
00:02:21,040 --> 00:02:23,680
and get rid of that extra white space.

45
00:02:23,680 --> 00:02:25,970
If I would leave the white space here,

46
00:02:25,970 --> 00:02:27,437
the code would still work,

47
00:02:27,437 --> 00:02:30,290
but it's harder to read and then over here,

48
00:02:30,290 --> 00:02:31,510
I want to get rid of it

49
00:02:31,510 --> 00:02:34,980
kind of the opposite of what we had with HTML,

50
00:02:34,980 --> 00:02:36,599
There we added indentation

51
00:02:36,599 --> 00:02:40,380
to make our code easier to read with JavaScript.

52
00:02:40,380 --> 00:02:42,179
Since we have a line after line

53
00:02:42,179 --> 00:02:46,800
and not really this nesting, which we have in HTML,

54
00:02:46,800 --> 00:02:50,870
we typically don't add redundant white space like this

55
00:02:50,870 --> 00:02:55,040
Though we'll see some use cases for white space later on.

56
00:02:55,040 --> 00:02:56,290
Now as a side note,

57
00:02:56,290 --> 00:03:01,080
hitting that format document shortcuts did add double quotes

58
00:03:01,080 --> 00:03:03,704
here around the dispersed string for me.

59
00:03:03,704 --> 00:03:06,189
And it did add those double quotes

60
00:03:06,189 --> 00:03:09,880
because I had this escaped single quote in there

61
00:03:10,810 --> 00:03:15,810
and keep in mind what I had here before was this,

62
00:03:16,770 --> 00:03:21,030
this kind of string, and that was valid code,

63
00:03:21,030 --> 00:03:23,160
but the prettier extension,

64
00:03:23,160 --> 00:03:25,261
which I'm using for formatting here

65
00:03:25,261 --> 00:03:27,890
actually changes this slightly

66
00:03:27,890 --> 00:03:30,440
so that we don't have to escape the single quote

67
00:03:30,440 --> 00:03:31,560
character anymore.

68
00:03:31,560 --> 00:03:35,960
As it wraps this overall string with double quotes,

69
00:03:35,960 --> 00:03:38,050
that's an alternative way of doing it.

70
00:03:38,050 --> 00:03:40,310
And even though I'm a fan of consistency,

71
00:03:40,310 --> 00:03:43,350
that's what the auto format shortcut does for me here.

72
00:03:43,350 --> 00:03:45,520
And we could change the configuration,

73
00:03:45,520 --> 00:03:47,930
but we can also just stick to that behavior.

74
00:03:47,930 --> 00:03:50,073
I just wanted to highlight it here,

75
00:03:52,040 --> 00:03:53,990
but now we got our JavaScript code in

76
00:03:53,990 --> 00:03:56,012
here and then index HTML.

77
00:03:56,012 --> 00:03:59,023
We can now get rid of these script tax.

78
00:03:59,970 --> 00:04:02,328
And now to question just as how we can

79
00:04:02,328 --> 00:04:07,160
link this HTML file to this Java script file

80
00:04:07,160 --> 00:04:11,033
so that this code still is executed in our browser.

81
00:04:12,100 --> 00:04:15,990
And you could think that you again, use this link element,

82
00:04:15,990 --> 00:04:20,990
which we used for style sheets. So for a CSS files as well,

83
00:04:21,060 --> 00:04:24,873
maybe we need to add scripts here for derail attribute,

84
00:04:25,920 --> 00:04:29,210
but unfortunately that's not the case.

85
00:04:29,210 --> 00:04:32,730
It would make sense, but it's simply not how HTML works

86
00:04:32,730 --> 00:04:35,670
when it comes to linking scripts.

87
00:04:35,670 --> 00:04:39,440
And for that, it's always important to keep in mind that

88
00:04:39,440 --> 00:04:44,340
HTML is a language with a lot of history.

89
00:04:44,340 --> 00:04:48,260
It was not written and invented on one day.

90
00:04:48,260 --> 00:04:51,430
Instead it evolved over many, many years

91
00:04:51,430 --> 00:04:54,440
and new features were added and improved.

92
00:04:54,440 --> 00:04:57,950
And that's why we don't have to as uniform way of

93
00:04:57,950 --> 00:05:01,970
linking to external resources.

94
00:05:01,970 --> 00:05:05,530
And for linking to scripts, we therefore indeed,

95
00:05:05,530 --> 00:05:09,473
again, used to script tax opening and closing,

96
00:05:10,320 --> 00:05:12,910
and we use them differently now

97
00:05:12,910 --> 00:05:16,360
instead of putting our script code between those tacks,

98
00:05:16,360 --> 00:05:21,310
we now add the SRC attribute here.

99
00:05:21,310 --> 00:05:24,730
So does source attribute not ref,

100
00:05:24,730 --> 00:05:27,640
but source as we did it on the image.

101
00:05:27,640 --> 00:05:32,640
And then here we specify a Poff 2d Java script file we want

102
00:05:33,520 --> 00:05:37,453
to include here. And that that can be a URL,

103
00:05:37,453 --> 00:05:42,453
a link to an external server with some exposed to JavaScript

104
00:05:42,700 --> 00:05:47,140
file, or like we have it in this case to a local file,

105
00:05:47,140 --> 00:05:51,860
which is our project directory and here it's app JS.

106
00:05:51,860 --> 00:05:54,180
So I'll just point at this file,

107
00:05:54,180 --> 00:05:56,653
including the file extension hear,

108
00:05:58,580 --> 00:06:01,380
with that, we are telling the browser

109
00:06:01,380 --> 00:06:05,520
to link, to import this JavaScript file

110
00:06:05,520 --> 00:06:09,203
and to load that JavaScript code and also execute it.

111
00:06:10,290 --> 00:06:12,410
Now, one thing is very important here,

112
00:06:12,410 --> 00:06:15,770
even though we have no code between the opening and closing

113
00:06:15,770 --> 00:06:20,770
script tag, it's not allowed to use this as a white element.

114
00:06:21,230 --> 00:06:24,880
So removing the closing script tag is not allowed

115
00:06:24,880 --> 00:06:26,430
as you can already tell,

116
00:06:26,430 --> 00:06:28,793
by the errors I'm getting here in my IDE,

117
00:06:29,990 --> 00:06:32,603
you have to have that closing script tag,

118
00:06:33,500 --> 00:06:37,400
and you also should not add any JavaScript code.

119
00:06:37,400 --> 00:06:39,560
If you have that source attribute

120
00:06:39,560 --> 00:06:43,380
and you are linking to an external file.

121
00:06:43,380 --> 00:06:46,232
If you want to use code between the script tags,

122
00:06:46,232 --> 00:06:49,163
you should not add the source attribute,

123
00:06:50,010 --> 00:06:50,990
but here, of course,

124
00:06:50,990 --> 00:06:53,600
I don't want to write code between the script tax.

125
00:06:53,600 --> 00:06:57,000
I want to link to the external JavaScript file instead.

126
00:06:57,000 --> 00:06:59,695
And that's now how we can do that.

127
00:06:59,695 --> 00:07:03,690
If we save all of this, we again get these alerts,

128
00:07:03,690 --> 00:07:06,030
which we got before as well.

129
00:07:06,030 --> 00:07:09,423
But now through that external JavaScript file.