All right. Welcome back guys. 1
In this module we're going to talk all about Javascript, the language that powers the web. 2
Now I reckon I can guess your age based on whether if you recognize this logo. 3
So the people who recognize it or may have even used it, I reckon that you're probably over the age of 4
30 or you're just really savvy with your internet history. 5
Now for those of you guys who don't recognize the symbol, this is the logo for Netscape Navigator, the browser 6
that dominated the 90s. 7
Now what about these logos? 8
I'm willing to guess that almost everybody will know at least one of these logos if not all of them. 9
And what do they all have in common? 10
Well, there was one company that invested in all of these startups, and that's Andreessen Horowitz. And 11
the Andreessen in this case refers to Marc Andreessen who was one of the principle makers of the Netscape 12
Navigator. 13
So, in the beginning, way before Chrome or Firefox, Safari, or even Internet Explorer, there was a browser 14
called Mosaic. And Mosaic was something that Marc worked on even while he was at university. 15
And when he finished university he began to work on Netscape. 16
And at one point Netscape Navigator held over 80 percent of the market share in terms of browser usage. 17
Subsequently there was a huge browser war and there was a big kerfuffle between 18
Netscape, which was the dominant force, and Internet Explorer. 19
And the result was the death of Netscape and the Netscape Communications company. 20
But a lot of that technology was transported and incorporated into the modern day Firefox. 21
So when we talk about Mosaic and Netscape, this really was the beginning of web browsing as we know it 22
today. 23
So I want to take you back. 24
We're going to time travel to 1995, and this was a time before Tupac was killed and 'N Sync was plastered 25
all over my room, and a time when people would fight each other for the latest version of Windows 95. 26
At this point in time HTML web sites were all form and no function, and when a web site did in fact need 27
some functionality such as retrieving a piece of data that you searched for, or just calculating something, 28
or converting between different units, 29
the web site had to send that request to the data server, and it was in the data server where all of this 30
computation and business logic happened, 31
and then it would return the web page that contained the new data. 32
Now the team at Netscape wanted something a little bit different. 33
They envisioned a future where the web was more dynamic, with animations and real time user interaction. 34
And in order to enable this you need to take away the server and have the code be able to run on the 35
browser. 36
So in order to do this they wanted to create a small scripting language. 37
The requirements were that this language had to be simple and had to be really easy so that even non-developers 38
and non-programmers could use it to add functionality to web sites. 39
So they contracted this guy, Brendan Eich, to create that programming language. 40
And, as internet history and internet lore goes, Brendan proceeded to sit down with the team, and while 41
there were other people who tried to lose a guy in 10 days, Brendan was able to create Javascript in 42
10 days. And now we can't even imagine what the world would look like without Javascript. 43
So let's try and turn off Javascript in our Chrome browser and see what we end up with. 44
So if you want to play along with me you can go into your settings and search for Javascript, and then 45
it will highlight Content Settings, and if you click on that you can navigate to Javascript Allowed, 46
and we're going to switch it off. 47
Now let's go onto Twitter and let's see what that looks like. 48
So, we're getting the mobile version of Twitter that doesn't require Javascript, but you'll see that the 49
design looks completely different from the Twitter that you get on your phone. 50
And also, if you go onto the Compose section and you try to write a tweet, you're missing that really 51
key bit of Javascript that tells you how many characters you've written and how many you have left. 52
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
to know which part. 54
So this is Twitter without Javascript. 55
Now if I load up the New York Times while I have Javascript enabled, you can see that we've got all of 56
these ads showing up. 57
So an interesting side effect of disabling Javascript is, you actually end up having an ad free 58
web site, where you can see it's trying to load up the ads but because it requires Javascript to do so 59
we end up with an ad free browsing experience. 60
So there are even people who choose to switch off Javascript for reasons such as this. 61
But you'll end up running into a huge amount of problems as well. 62
For example sites like YouTube just simply won't even load up with Javascript disabled, and it's the 63
same problem on Netflix. 64
So the world is actually quite a scary place without Javascript, and it goes to show just how reliant 65
we've become on this single programming language. 66
The web certainly is dominated by it. Now 67
Javascript wasn't even always called Javascript. 68
In fact when Brendan first created it, it was actually called Livescript, and then the people at Microsoft 69
decided to try and reverse engineer the program and they ended up with something called Jscript. 70
And so there were all the slightly different versions of Javascript that was being run on the web and 71
it was starting to get quite confusing. 72
So the Europeans did what Europeans do best and they decided to standardize the language. 73
And that's where you get the ECMAscript from. 74
And that stands for the European Computer Manufacturers Association Script. And the only reason why this 75
is interesting is that often you'll see different versions of Javascript not referred to as JS5 76
or JS6 but as ES6 or ES7, and the ES comes of course from ECMAscript. 77
All right so enough history. 78
Why is it called Javascript anyways? 79
What does the script stand for? 80
Well, just as you have scripts in plays where it tells the actors what they should do, the scripting languages 81
does much the same thing with regards to web sites. 82
So for example let's say that we have a script and we have some actors, Gwyneth Paltrow and Brad Pitt. 83
So obviously we're making a very high end movie here. 84
So in the script you might tell your actors that after Gwyneth appears on stage for one second, Brad 85
should appear. 86
And then Gwyneth should say hello. 87
And then there's a delay of one second when Brad needs to say hello. 88
So this is the script. 89
So this is how it would play out. 90
So by writing these instructions and telling the actors what they should say we're able to determine 91
how our play should work. 92
Now, in our world of web development, the script is Javascript and the actors are, for example, the HTML 93
elements, and Gwyneth would be, say, for example, an h1 element, and Brad could be a paragraph element. 94
So clearly the web developers version of a play is much less sexy, but nonetheless it still can do exactly 95
the same things. 96
So in this case our script looks more like this. First unhide h1, then after one second delay unhide 97
the paragraph tag, then the h1 should change its text to the word Hello, 98
and the paragraph tag should change its text to the word World. 99
So let's give that a go. 100
There we go. 101
So in this case we're using our Javascript to tell our players or elements what it should do. 102
And this is how scripting languages work. 103
So the other question I tend to get from students is, is Javascript similar to Java? 104
And what exactly is their relationship? And to those students 105
I often refer to something that a computer science professor once told me, which is Java and Javascript 106
have about as much in common as car and carpet. And the only reason why Javascript was called javascript 107
was because in the 90s the word Java was about as hot as the word blockchain 108
in today's world. And you may or may not have read the story about the Long Island Iced Tea company which 109
had its stock doubled in price almost overnight by simply changing its name to Long Blockchain company. 110
So that was exactly what happened in the 90s, 111
everybody wanted the word Java in their name. But Javascript and Java actually have some big differences. 112
And the main difference is that Javascript is an interpreted programming language whereas Java is a 113
compiled programming language. So I'll defer to this brilliant cartoon from a TV show called Bits and 114
Bytes from the 1980s to explain this. 115
It's from a really awesome Canadian series and I'll include a link to the video in the resources section 116
of this lesson. 117
Now whereas in the olden days interpreted languages tend to be seen as almost like toy languages. 118
They weren't so powerful. 119
They were very slow and they had to execute all the instructions line by line whereas compiled languages 120
were seen as the more serious languages and you end up with very fast running programs. 121
Now today modern Javascript is used in all sorts of places, whereas traditionally it was a front end 122
language that was meant to add some animations to your web site or allow a little bit of user interaction. 123
But nowadays Javascript can be seen in frameworks ranging from the front end to the back end and everything 124
in between. 125
And later in this course we're going to learn about a lot of those frameworks. Now 126
the other great thing about Javascript is that it's the one language that is supported by all of the 127
major browsers. While you can use other languages that can be compiled into Javascript and run on the 128
browser, 129
it is still the language that powers the web, and this is evident from the popularity of Javascript. 130
So this is a graph that is compiled by RedMonk, and this is for January 2018, and you can see that, at 131
the top right corner, 132
the most popular language of 2018 is still Javascript, closely followed by Java. 133
So whenever students ask me what is the language that I should learn first or what is the best programming 134
language to become skilled in, 135
I tend to tell them that, well, that depends on what you want to build. 136
If you want to build an iOS app then that means you should learn Swift. 137
If you want to build an Android app then you need to know about Java. 138
But if you want to build web sites and web apps then Javascript is going to be your close ally, although 139
if you're not careful it can also be your enemy. 140
So in the coming lessons we're going to learn about best practice in terms of using Javascript and all 141
of the good parts that this language offers. 142
So for all of that and more, I'll see you on the next lesson.