0
1
00:00:00,590 --> 00:00:02,150
All right. Welcome back guys.
1

2
00:00:02,150 --> 00:00:08,400
In this module we're going to talk all about Javascript, the language that powers the web.
2

3
00:00:08,510 --> 00:00:16,180
Now I reckon I can guess your age based on whether if you recognize this logo.
3

4
00:00:16,280 --> 00:00:21,860
So the people who recognize it or may have even used it, I reckon that you're probably over the age of
4

5
00:00:21,860 --> 00:00:26,070
30 or you're just really savvy with your internet history.
5

6
00:00:26,300 --> 00:00:33,020
Now for those of you guys who don't recognize the symbol, this is the logo for Netscape Navigator, the browser
6

7
00:00:33,080 --> 00:00:35,160
that dominated the 90s.
7

8
00:00:35,240 --> 00:00:37,150
Now what about these logos?
8

9
00:00:37,340 --> 00:00:44,480
I'm willing to guess that almost everybody will know at least one of these logos if not all of them.
9

10
00:00:44,520 --> 00:00:46,480
And what do they all have in common?
10

11
00:00:46,550 --> 00:00:53,180
Well, there was one company that invested in all of these startups, and that's Andreessen Horowitz. And
11

12
00:00:53,180 --> 00:01:00,230
the Andreessen in this case refers to Marc Andreessen who was one of the principle makers of the Netscape
12

13
00:01:00,230 --> 00:01:01,060
Navigator.
13

14
00:01:01,130 --> 00:01:08,510
So, in the beginning, way before Chrome or Firefox, Safari, or even Internet Explorer, there was a browser
14

15
00:01:08,510 --> 00:01:14,020
called Mosaic. And Mosaic was something that Marc worked on even while he was at university.
15

16
00:01:14,150 --> 00:01:18,390
And when he finished university he began to work on Netscape.
16

17
00:01:18,490 --> 00:01:26,680
And at one point Netscape Navigator held over 80 percent of the market share in terms of browser usage.
17

18
00:01:26,690 --> 00:01:31,970
Subsequently there was a huge browser war and there was a big kerfuffle between 
18

19
00:01:32,000 --> 00:01:37,320
Netscape, which was the dominant force, and Internet Explorer.
19

20
00:01:37,370 --> 00:01:42,810
And the result was the death of Netscape and the Netscape Communications company.
20

21
00:01:42,950 --> 00:01:50,260
But a lot of that technology was transported and incorporated into the modern day Firefox.
21

22
00:01:50,270 --> 00:01:56,420
So when we talk about Mosaic and Netscape, this really was the beginning of web browsing as we know it
22

23
00:01:56,420 --> 00:01:57,190
today.
23

24
00:01:57,440 --> 00:01:58,780
So I want to take you back.
24

25
00:01:58,790 --> 00:02:06,950
We're going to time travel to 1995, and this was a time before Tupac was killed and 'N Sync was plastered
25

26
00:02:06,980 --> 00:02:14,770
all over my room, and a time when people would fight each other for the latest version of Windows 95.
26

27
00:02:15,020 --> 00:02:22,580
At this point in time HTML web sites were all form and no function, and when a web site did in fact need
27

28
00:02:22,580 --> 00:02:28,280
some functionality such as retrieving a piece of data that you searched for, or just calculating something,
28

29
00:02:28,310 --> 00:02:30,290
or converting between different units,
29

30
00:02:30,320 --> 00:02:37,430
the web site had to send that request to the data server, and it was in the data server where all of this
30

31
00:02:37,430 --> 00:02:39,910
computation and business logic happened,
31

32
00:02:40,070 --> 00:02:45,110
and then it would return the web page that contained the new data.
32

33
00:02:45,110 --> 00:02:48,330
Now the team at Netscape wanted something a little bit different.
33

34
00:02:48,350 --> 00:02:56,330
They envisioned a future where the web was more dynamic, with animations and real time user interaction.
34

35
00:02:56,330 --> 00:03:03,470
And in order to enable this you need to take away the server and have the code be able to run on the
35

36
00:03:03,470 --> 00:03:04,510
browser.
36

37
00:03:04,520 --> 00:03:08,480
So in order to do this they wanted to create a small scripting language.
37

38
00:03:08,510 --> 00:03:16,090
The requirements were that this language had to be simple and had to be really easy so that even non-developers
38

39
00:03:16,130 --> 00:03:21,010
and non-programmers could use it to add functionality to web sites.
39

40
00:03:21,050 --> 00:03:26,270
So they contracted this guy, Brendan Eich, to create that programming language.
40

41
00:03:26,390 --> 00:03:33,470
And, as internet history and internet lore goes, Brendan proceeded to sit down with the team, and while
41

42
00:03:33,470 --> 00:03:40,790
there were other people who tried to lose a guy in 10 days, Brendan was able to create Javascript in
42

43
00:03:40,790 --> 00:03:47,540
10 days. And now we can't even imagine what the world would look like without Javascript.
43

44
00:03:47,540 --> 00:03:53,150
So let's try and turn off Javascript in our Chrome browser and see what we end up with.
44

45
00:03:53,150 --> 00:03:59,480
So if you want to play along with me you can go into your settings and search for Javascript, and then
45

46
00:03:59,480 --> 00:04:05,630
it will highlight Content Settings, and if you click on that you can navigate to Javascript Allowed,
46

47
00:04:05,660 --> 00:04:07,280
and we're going to switch it off.
47

48
00:04:07,310 --> 00:04:11,130
Now let's go onto Twitter and let's see what that looks like.
48

49
00:04:11,300 --> 00:04:16,790
So, we're getting the mobile version of Twitter that doesn't require Javascript, but you'll see that the
49

50
00:04:16,790 --> 00:04:21,140
design looks completely different from the Twitter that you get on your phone.
50

51
00:04:21,170 --> 00:04:27,080
And also, if you go onto the Compose section and you try to write a tweet, you're missing that really
51

52
00:04:27,080 --> 00:04:33,950
key bit of Javascript that tells you how many characters you've written and how many you have left.
52

53
00:04:33,950 --> 00:04:39,810
So if you tweeted all of this you'll get some part of your tweet cut off and you won't even be able
53

54
00:04:39,810 --> 00:04:41,200
to know which part.
54

55
00:04:41,210 --> 00:04:44,320
So this is Twitter without Javascript.
55

56
00:04:44,330 --> 00:04:50,300
Now if I load up the New York Times while I have Javascript enabled, you can see that we've got all of
56

57
00:04:50,300 --> 00:04:51,860
these ads showing up.
57

58
00:04:52,040 --> 00:04:58,040
So an interesting side effect of disabling Javascript is, you actually end up having an ad free
58

59
00:04:58,070 --> 00:05:04,040
web site, where you can see it's trying to load up the ads but because it requires Javascript to do so
59

60
00:05:04,400 --> 00:05:08,080
we end up with an ad free browsing experience.
60

61
00:05:08,090 --> 00:05:13,700
So there are even people who choose to switch off Javascript for reasons such as this.
61

62
00:05:13,850 --> 00:05:16,900
But you'll end up running into a huge amount of problems as well.
62

63
00:05:16,940 --> 00:05:23,240
For example sites like YouTube just simply won't even load up with Javascript disabled, and it's the
63

64
00:05:23,240 --> 00:05:25,640
same problem on Netflix.
64

65
00:05:25,640 --> 00:05:31,760
So the world is actually quite a scary place without Javascript, and it goes to show just how reliant
65

66
00:05:31,790 --> 00:05:35,360
we've become on this single programming language.
66

67
00:05:35,570 --> 00:05:38,760
The web certainly is dominated by it. Now
67

68
00:05:38,780 --> 00:05:42,220
Javascript wasn't even always called Javascript.
68

69
00:05:42,230 --> 00:05:48,320
In fact when Brendan first created it, it was actually called Livescript, and then the people at Microsoft
69

70
00:05:48,470 --> 00:05:54,000
decided to try and reverse engineer the program and they ended up with something called Jscript.
70

71
00:05:54,000 --> 00:06:00,080
And so there were all the slightly different versions of Javascript that was being run on the web and
71

72
00:06:00,080 --> 00:06:02,340
it was starting to get quite confusing.
72

73
00:06:02,360 --> 00:06:08,750
So the Europeans did what Europeans do best and they decided to standardize the language.
73

74
00:06:08,870 --> 00:06:12,110
And that's where you get the ECMAscript from.
74

75
00:06:12,140 --> 00:06:19,520
And that stands for the European Computer Manufacturers Association Script. And the only reason why this
75

76
00:06:19,520 --> 00:06:26,860
is interesting is that often you'll see different versions of Javascript not referred to as JS5
76

77
00:06:26,870 --> 00:06:35,000
or JS6 but as ES6 or ES7, and the ES comes of course from ECMAscript.
77

78
00:06:35,000 --> 00:06:36,550
All right so enough history.
78

79
00:06:36,560 --> 00:06:38,660
Why is it called Javascript anyways?
79

80
00:06:38,690 --> 00:06:40,710
What does the script stand for?
80

81
00:06:40,850 --> 00:06:48,890
Well, just as you have scripts in plays where it tells the actors what they should do, the scripting languages
81

82
00:06:48,950 --> 00:06:52,580
does much the same thing with regards to web sites.
82

83
00:06:52,580 --> 00:06:59,650
So for example let's say that we have a script and we have some actors, Gwyneth Paltrow and Brad Pitt.
83

84
00:06:59,840 --> 00:07:02,950
So obviously we're making a very high end movie here.
84

85
00:07:03,140 --> 00:07:09,070
So in the script you might tell your actors that after Gwyneth appears on stage for one second, Brad
85

86
00:07:09,100 --> 00:07:09,840
should appear.
86

87
00:07:10,190 --> 00:07:12,240
And then Gwyneth should say hello.
87

88
00:07:12,440 --> 00:07:16,130
And then there's a delay of one second when Brad needs to say hello.
88

89
00:07:16,130 --> 00:07:17,750
So this is the script.
89

90
00:07:17,810 --> 00:07:19,630
So this is how it would play out.
90

91
00:07:21,740 --> 00:07:28,370
So by writing these instructions and telling the actors what they should say we're able to determine
91

92
00:07:28,430 --> 00:07:29,740
how our play should work.
92

93
00:07:29,780 --> 00:07:36,860
Now, in our world of web development, the script is Javascript and the actors are, for example, the HTML
93

94
00:07:36,860 --> 00:07:44,550
elements, and Gwyneth would be, say, for example, an h1 element, and Brad could be a paragraph element.
94

95
00:07:44,690 --> 00:07:52,190
So clearly the web developers version of a play is much less sexy, but nonetheless it still can do exactly
95

96
00:07:52,190 --> 00:07:53,180
the same things.
96

97
00:07:53,180 --> 00:08:00,440
So in this case our script looks more like this. First unhide h1, then after one second delay unhide
97

98
00:08:00,440 --> 00:08:05,000
the paragraph tag, then the h1 should change its text to the word Hello,
98

99
00:08:05,300 --> 00:08:09,230
and the paragraph tag should change its text to the word World.
99

100
00:08:09,230 --> 00:08:10,810
So let's give that a go.
100

101
00:08:14,400 --> 00:08:14,960
There we go.
101

102
00:08:15,000 --> 00:08:21,840
So in this case we're using our Javascript to tell our players or elements what it should do.
102

103
00:08:21,960 --> 00:08:24,440
And this is how scripting languages work.
103

104
00:08:24,450 --> 00:08:30,020
So the other question I tend to get from students is, is Javascript similar to Java?
104

105
00:08:30,170 --> 00:08:34,370
And what exactly is their relationship? And to those students
105

106
00:08:34,380 --> 00:08:41,010
I often refer to something that a computer science professor once told me, which is Java and Javascript
106

107
00:08:41,010 --> 00:08:49,470
have about as much in common as car and carpet. And the only reason why Javascript was called javascript
107

108
00:08:49,620 --> 00:08:54,870
was because in the 90s the word Java was about as hot as the word blockchain
108

109
00:08:54,900 --> 00:09:01,320
in today's world. And you may or may not have read the story about the Long Island Iced Tea company which
109

110
00:09:01,320 --> 00:09:08,880
had its stock doubled in price almost overnight by simply changing its name to Long Blockchain company.
110

111
00:09:08,880 --> 00:09:11,820
So that was exactly what happened in the 90s,
111

112
00:09:11,820 --> 00:09:18,720
everybody wanted the word Java in their name. But Javascript and Java actually have some big differences.
112

113
00:09:18,720 --> 00:09:24,630
And the main difference is that Javascript is an interpreted programming language whereas Java is a
113

114
00:09:24,630 --> 00:09:30,930
compiled programming language. So I'll defer to this brilliant cartoon from a TV show called Bits and
114

115
00:09:30,930 --> 00:09:34,160
Bytes from the 1980s to explain this.
115

116
00:09:34,200 --> 00:09:39,480
It's from a really awesome Canadian series and I'll include a link to the video in the resources section
116

117
00:09:39,510 --> 00:09:40,430
of this lesson.
117

118
00:09:40,470 --> 00:09:46,650
Now whereas in the olden days interpreted languages tend to be seen as almost like toy languages.
118

119
00:09:46,650 --> 00:09:48,040
They weren't so powerful.
119

120
00:09:48,060 --> 00:09:55,230
They were very slow and they had to execute all the instructions line by line whereas compiled languages
120

121
00:09:55,230 --> 00:09:59,740
were seen as the more serious languages and you end up with very fast running programs.
121

122
00:09:59,820 --> 00:10:07,560
Now today modern Javascript is used in all sorts of places, whereas traditionally it was a front end
122

123
00:10:07,560 --> 00:10:14,330
language that was meant to add some animations to your web site or allow a little bit of user interaction.
123

124
00:10:14,400 --> 00:10:21,930
But nowadays Javascript can be seen in frameworks ranging from the front end to the back end and everything
124

125
00:10:21,930 --> 00:10:22,940
in between.
125

126
00:10:23,070 --> 00:10:27,490
And later in this course we're going to learn about a lot of those frameworks. Now
126

127
00:10:27,540 --> 00:10:33,210
the other great thing about Javascript is that it's the one language that is supported by all of the
127

128
00:10:33,210 --> 00:10:40,860
major browsers. While you can use other languages that can be compiled into Javascript and run on the
128

129
00:10:40,860 --> 00:10:42,030
browser,
129

130
00:10:42,090 --> 00:10:48,870
it is still the language that powers the web, and this is evident from the popularity of Javascript.
130

131
00:10:48,870 --> 00:10:56,100
So this is a graph that is compiled by RedMonk, and this is for January 2018, and you can see that, at
131

132
00:10:56,100 --> 00:10:57,580
the top right corner,
132

133
00:10:57,780 --> 00:11:05,030
the most popular language of 2018 is still Javascript, closely followed by Java.
133

134
00:11:05,040 --> 00:11:11,730
So whenever students ask me what is the language that I should learn first or what is the best programming
134

135
00:11:11,730 --> 00:11:14,220
language to become skilled in,
135

136
00:11:14,220 --> 00:11:18,060
I tend to tell them that, well, that depends on what you want to build.
136

137
00:11:18,240 --> 00:11:23,110
If you want to build an iOS app then that means you should learn Swift.
137

138
00:11:23,250 --> 00:11:26,950
If you want to build an Android app then you need to know about Java.
138

139
00:11:27,150 --> 00:11:33,720
But if you want to build web sites and web apps then Javascript is going to be your close ally, although
139

140
00:11:33,720 --> 00:11:36,410
if you're not careful it can also be your enemy.
140

141
00:11:36,420 --> 00:11:42,300
So in the coming lessons we're going to learn about best practice in terms of using Javascript and all
141

142
00:11:42,300 --> 00:11:45,140
of the good parts that this language offers.
142

143
00:11:45,360 --> 00:11:48,520
So for all of that and more, I'll see you on the next lesson.