0
1
00:00:00,570 --> 00:00:07,140
So up till now we've been learning about Javascript and using it inside the Chrome Developer Tools console.
1

2
00:00:07,200 --> 00:00:10,140
Now this is the purest form of Javascript.
2

3
00:00:10,140 --> 00:00:15,640
We're seeing the code as it is and seeing what it does. But it's no use learning about it
3

4
00:00:15,660 --> 00:00:17,620
if we're not going to apply it to our web site,
4

5
00:00:17,640 --> 00:00:17,970
right?
5

6
00:00:18,060 --> 00:00:22,920
So in this lesson, I want to show you how we can incorporate Javascript into our web sites.
6

7
00:00:22,920 --> 00:00:27,630
So firstly I'm going to create a new folder alongside my other web development projects, and I'm going
7

8
00:00:27,630 --> 00:00:33,810
to call this one the DOM. And we're going to explain what the DOM or the Document Object Model is all
8

9
00:00:33,810 --> 00:00:34,290
about
9

10
00:00:34,440 --> 00:00:36,150
coming up really really soon.
10

11
00:00:36,270 --> 00:00:42,450
But we're going to add this into Atom, and I'm going to create a new HTML file called index.html.
11

12
00:00:42,480 --> 00:00:48,240
Now we're going to go through our traditional process of adding in the html boilerplate, giving our
12

13
00:00:48,240 --> 00:00:56,640
web site a title, which I'm just going to call My Website, and then I'm going to link it up with a 
13

14
00:00:56,640 --> 00:01:03,200
stylesheet as well, which I'll just call styles.css, and we can create that in here as well,
14

15
00:01:04,380 --> 00:01:05,350
styles.
15

16
00:01:05,360 --> 00:01:06,190
css.
16

17
00:01:06,220 --> 00:01:11,230
Now it's completely blank and that's totally fine because we're not going to be using it for a while. And
17

18
00:01:11,260 --> 00:01:16,200
we're going to head back into our HTML, and we're just going to add a heading that says Hello.
18

19
00:01:16,350 --> 00:01:19,910
And this is all we have as our simple web site.
19

20
00:01:20,180 --> 00:01:23,590
And you can see it doesn't look very exciting at the moment.
20

21
00:01:23,600 --> 00:01:27,870
Now what if we wanted to insert some Javascript?
21

22
00:01:27,880 --> 00:01:33,940
So previously we've been working a lot with alerts, and what if we can get our web site to load up a
22

23
00:01:33,940 --> 00:01:35,290
Javascript alert?
23

24
00:01:35,290 --> 00:01:41,120
Now in the CSS module we explored all the various ways that you can inject CSS into your HTML web
24

25
00:01:41,120 --> 00:01:41,820
sites.
25

26
00:01:42,010 --> 00:01:45,690
And if you remember there were three ways that we can go about doing that.
26

27
00:01:45,700 --> 00:01:51,030
One is inline CSS, the next is internal, and the last one is external
27

28
00:01:51,110 --> 00:01:53,410
CSS, as we have over here.
28

29
00:01:53,650 --> 00:01:58,150
Now if you don't remember any of that or if you skipped over and you want to refresh yourself then you
29

30
00:01:58,150 --> 00:02:01,750
can head back to the CSS module where we talk about these things.
30

31
00:02:01,960 --> 00:02:04,420
Now Javascript works really similarly.
31

32
00:02:04,480 --> 00:02:11,630
So we can add inline Javascript by simply adding an attribute into the HTML tag.
32

33
00:02:11,830 --> 00:02:17,510
So, for example, in the body, I'm going to add an attribute called onload.
33

34
00:02:17,620 --> 00:02:25,030
And what this means is that when the body of our web site gets loaded up, then whatever Javascript we
34

35
00:02:25,030 --> 00:02:29,260
place inside these two quotation marks will get carried out.
35

36
00:02:29,260 --> 00:02:36,400
So what I'm going to say is that when our body is loaded up I'm going to create an alert, and the alert
36

37
00:02:36,430 --> 00:02:38,420
is going to say Hello.
37

38
00:02:38,710 --> 00:02:44,800
Now there's a bit of a problem here because you can see that the Javascript that gets created inline
38

39
00:02:45,170 --> 00:02:49,750
in our HTML has to be included inside some quotation marks.
39

40
00:02:49,870 --> 00:02:56,260
But in our alert we also want to have the string “Hello”, which is also enclosed by quotation marks.
40

41
00:02:56,410 --> 00:03:02,890
So you can see how this is confusing, because to the browser it might think that this is a string, and
41

42
00:03:03,040 --> 00:03:09,310
this is a string, and you can see it in fact is highlighting it exactly that way, because the green parts
42

43
00:03:09,350 --> 00:03:14,160
are the things that it thinks is a string and the orange part it's interpreting as code.
43

44
00:03:14,170 --> 00:03:20,410
So, in these situations, when we've got a quotation mark inside another set of quotation marks, what we
44

45
00:03:20,410 --> 00:03:24,880
have to do is we have to downgrade our quotation marks to a single quote.
45

46
00:03:25,120 --> 00:03:29,650
So instead of having double quotes we change it to a single quote and now it knows what we're talking
46

47
00:03:29,650 --> 00:03:30,290
about.
47

48
00:03:30,310 --> 00:03:35,110
This is one pair and this is another pair, and this makes perfect sense
48

49
00:03:35,110 --> 00:03:42,070
now. When the body element gets loaded up it's going to look inside these quotation marks to carry out
49

50
00:03:42,160 --> 00:03:45,550
all of the Javascript that's in here, and, to be complete,
50

51
00:03:45,580 --> 00:03:49,760
we should also just add a semi-colon there to close off that line of code.
51

52
00:03:50,050 --> 00:03:55,390
And this line of code is very familiar to us because we've been using it a lot in the previous modules
52

53
00:03:55,690 --> 00:03:58,680
and all it does is it creates an alert that says Hello.
53

54
00:03:58,690 --> 00:04:06,220
So now if I save my web page and I head over to Chrome and I hit refresh, then you can see, as soon as
54

55
00:04:06,220 --> 00:04:13,360
the body gets loaded up, we get an alert that says Hello. Now inline Javascript has a lot of the downsides
55

56
00:04:13,450 --> 00:04:16,570
of inline CSS. It’s not very modular,
56

57
00:04:16,580 --> 00:04:21,270
it’s difficult to debug, and it's also not good practice as well,
57

58
00:04:21,310 --> 00:04:23,610
so try to avoid that if you can.
58

59
00:04:23,620 --> 00:04:30,040
Now the next way of incorporating Javascript is internal Javascript. So can add it by simply using
59

60
00:04:30,100 --> 00:04:37,630
a script tag, and everything in between the script can simply be Javascript code. So we can write script
60

61
00:04:37,660 --> 00:04:39,460
type javascript,
61

62
00:04:39,460 --> 00:04:41,320
alert (“Hello”).
62

63
00:04:41,920 --> 00:04:44,710
And you can see this is just normal old Javascript,
63

64
00:04:44,710 --> 00:04:47,740
it doesn't have to be contained inside quotation marks this time,
64

65
00:04:47,740 --> 00:04:52,700
so we can go back to our default way of putting strings inside quotation marks.
65

66
00:04:52,930 --> 00:04:57,580
And now if I hit save you can see it does exactly the same thing.
66

67
00:04:57,670 --> 00:05:02,980
The browser will read through this web site line by line and, once it hits this script tag, it'll carry
67

68
00:05:02,980 --> 00:05:08,270
out the Javascript that's inside, which in this case is simply an alert that says Hello.
68

69
00:05:08,620 --> 00:05:13,860
Now finally we can also incorporate Javascript as an external file.
69

70
00:05:13,900 --> 00:05:21,010
So instead of having a simple script tag we can have a script tag that has an external source and we
70

71
00:05:21,010 --> 00:05:26,030
specify the location of that file inside the attribute src.
71

72
00:05:26,240 --> 00:05:29,720
And so let's go ahead and create a new file,
72

73
00:05:29,740 --> 00:05:34,170
and let's just call index.js to create the new Javascript file.
73

74
00:05:34,510 --> 00:05:38,490
And now we can point to it by saying index.js.
74

75
00:05:38,500 --> 00:05:46,440
So now if we hit save we can add our Javascript code in here and we can say again, same thing,
75

76
00:05:46,450 --> 00:05:48,070
create an alert that says Hello.
76

77
00:05:48,430 --> 00:05:49,890
So now when I refresh,
77

78
00:05:50,170 --> 00:05:51,540
exactly the same thing,
78

79
00:05:51,580 --> 00:05:56,620
even though there's no Javascript inside our HTML code at all.
79

80
00:05:56,710 --> 00:06:02,000
So this should be pretty familiar especially if you've already completed the CSS module.
80

81
00:06:02,020 --> 00:06:08,930
Now the thing that is interesting though is that the position inside the HTML document where we place the
81

82
00:06:08,930 --> 00:06:13,250
script tag matters a huge deal. With CSS,
82

83
00:06:13,250 --> 00:06:20,360
we tend to put it inside the head element so that it gets loaded up first before any of the content
83

84
00:06:20,390 --> 00:06:23,300
of our web site, which tends to be inside the body.
84

85
00:06:23,300 --> 00:06:31,550
And this is important because if we placed this CSS code right up the bottom of our web site, say just
85

86
00:06:31,610 --> 00:06:41,790
as our web site ends, let's say that we go into styles.css and we change the h1's color to red.
86

87
00:06:41,880 --> 00:06:49,560
Now what happens when we run our code is that the browser will go from top to bottom line by line and
87

88
00:06:49,650 --> 00:06:55,840
when it gets to the h1 it'll create a normal bog standard h1, black text, Serif font,
88

89
00:06:56,010 --> 00:07:04,380
and it's only much later on, once it hits the stylesheet, does it actually apply these styles, changing
89

90
00:07:04,380 --> 00:07:09,090
the color to red. So now, if I run.
90

91
00:07:09,150 --> 00:07:15,690
So now if I go back to my web site and I refresh it, you can see the first thing that happens is I get
91

92
00:07:15,780 --> 00:07:18,210
a h1 that gets generated
92

93
00:07:18,220 --> 00:07:19,540
that's black,
93

94
00:07:20,010 --> 00:07:21,530
so we're at this line.
94

95
00:07:21,680 --> 00:07:28,400
The next thing that happens is our script gets carried out which if you remember is to create the alert.
95

96
00:07:28,470 --> 00:07:30,250
So we're at the alert at this point.
96

97
00:07:30,410 --> 00:07:38,460
And now if I dismiss the script it goes onto the next line which is carrying out the instructions inside
97

98
00:07:38,830 --> 00:07:41,590
our stylesheet namely changing the color to red.
98

99
00:07:41,820 --> 00:07:49,500
So that's why, with CSS, you always want to put it right at the top, just below the title usually. But with
99

100
00:07:49,500 --> 00:07:57,690
Javascript it's the opposite story, because if inside our script we tried to change an HTML element that
100

101
00:07:57,750 --> 00:08:01,410
does not yet exist then it will fail.
101

102
00:08:01,410 --> 00:08:07,410
So I'm going to go inside my index.js and I'm going to write some Javascript code that looks
102

103
00:08:07,410 --> 00:08:16,050
inside our HTML document, looks for the selector that's h1, and then when it finds that element, I'm
103

104
00:08:16,050 --> 00:08:20,700
going to change its inner HTML, which is basically the text that's inside.
104

105
00:08:20,700 --> 00:08:22,770
So currently the inner HTML,
105

106
00:08:22,800 --> 00:08:30,330
so between the html elements, says Hello, but I'm going to change it to the string that's Good Bye instead.
106

107
00:08:30,330 --> 00:08:35,130
Don't worry if this looks unfamiliar, we're going to be digging much deeper into this in the coming lessons.
107

108
00:08:35,130 --> 00:08:36,800
Now here's the interesting part.
108

109
00:08:36,900 --> 00:08:46,380
If my script, which is trying to look for an h1 to change its text to Good Bye, is below the h1,
109

110
00:08:46,380 --> 00:08:51,990
so after the h1 has already been created, then you can see that it works.
110

111
00:08:51,990 --> 00:08:54,650
It found the h1 and it changed
111

112
00:08:54,680 --> 00:08:58,800
it's inner HTML, or rather the text, to Good Bye. But,
112

113
00:08:58,830 --> 00:09:04,050
if I move this script into the head which will get loaded up first,
113

114
00:09:04,110 --> 00:09:11,370
so as the browser reads from top to bottom it will hit the script and it will look inside our index.js
114

115
00:09:11,370 --> 00:09:17,440
and try to look for an h1 to change its text to Good Bye.
115

116
00:09:17,490 --> 00:09:21,560
But at this stage we don't have an h1 on the screen yet,
116

117
00:09:21,630 --> 00:09:23,940
so what is it going to change?
117

118
00:09:23,970 --> 00:09:25,330
So let's check this out.
118

119
00:09:25,380 --> 00:09:32,070
If I hit refresh you can see that we actually get an error in the console and it says that Cannot set
119

120
00:09:32,070 --> 00:09:34,760
property 'innerHTML' of null.
120

121
00:09:34,920 --> 00:09:40,620
And that's because, at the time point when we tried to run this script to look for an h1, there were
121

122
00:09:40,620 --> 00:09:41,610
no h1s.
122

123
00:09:41,610 --> 00:09:42,780
It didn't exist yet.
123

124
00:09:42,870 --> 00:09:44,410
So this was null,
124

125
00:09:44,580 --> 00:09:46,600
and that's why it didn't work.
125

126
00:09:46,740 --> 00:09:54,170
So best practice is always to put the script right at the end just before the closing body tag.
126

127
00:09:54,510 --> 00:10:00,150
And the added benefit of this is, if you have a lot of Javascript code, which usually is a little bit
127

128
00:10:00,150 --> 00:10:06,870
more time consuming to run, then at least all of the content of your web site will have been loaded up
128

129
00:10:06,870 --> 00:10:12,970
for the users to see, and the parts that they can't perceive, like the script code, happens afterwards,
129

130
00:10:12,990 --> 00:10:15,580
so your website looks like it loads faster,
130

131
00:10:15,810 --> 00:10:21,060
whereas if you put the script right at the top, and the browser has to go through all of the code before
131

132
00:10:21,070 --> 00:10:26,580
it can display all of the elements, then it might look like your web site is taking a long time to load
132

133
00:10:26,580 --> 00:10:29,370
up, which nobody has the patience for, right? Now,
133

134
00:10:29,400 --> 00:10:33,980
in the next lesson, we're going to learn more about this Document Object Model,
134

135
00:10:34,140 --> 00:10:40,090
and the technology that's enabling us to select and manipulate the HTML elements.
135

136
00:10:40,090 --> 00:10:43,460
So for all of that and more, I'll see you on the next lesson.