WEBVTT 0 00:00.590 --> 00:02.150 All right. Welcome back guys. 1 00:02.150 --> 00:08.400 In this module we're going to talk all about Javascript, the language that powers the web. 2 00:08.510 --> 00:16.180 Now I reckon I can guess your age based on whether if you recognize this logo. 3 00:16.280 --> 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 00:21.860 --> 00:26.070 30 or you're just really savvy with your internet history. 5 00:26.300 --> 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 00:33.080 --> 00:35.160 that dominated the 90s. 7 00:35.240 --> 00:37.150 Now what about these logos? 8 00:37.340 --> 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 00:44.520 --> 00:46.480 And what do they all have in common? 10 00:46.550 --> 00:53.180 Well, there was one company that invested in all of these startups, and that's Andreessen Horowitz. And 11 00:53.180 --> 01:00.230 the Andreessen in this case refers to Marc Andreessen who was one of the principle makers of the Netscape 12 01:00.230 --> 01:01.060 Navigator. 13 01:01.130 --> 01:08.510 So, in the beginning, way before Chrome or Firefox, Safari, or even Internet Explorer, there was a browser 14 01:08.510 --> 01:14.020 called Mosaic. And Mosaic was something that Marc worked on even while he was at university. 15 01:14.150 --> 01:18.390 And when he finished university he began to work on Netscape. 16 01:18.490 --> 01:26.680 And at one point Netscape Navigator held over 80 percent of the market share in terms of browser usage. 17 01:26.690 --> 01:31.970 Subsequently there was a huge browser war and there was a big kerfuffle between 18 01:32.000 --> 01:37.320 Netscape, which was the dominant force, and Internet Explorer. 19 01:37.370 --> 01:42.810 And the result was the death of Netscape and the Netscape Communications company. 20 01:42.950 --> 01:50.260 But a lot of that technology was transported and incorporated into the modern day Firefox. 21 01:50.270 --> 01:56.420 So when we talk about Mosaic and Netscape, this really was the beginning of web browsing as we know it 22 01:56.420 --> 01:57.190 today. 23 01:57.440 --> 01:58.780 So I want to take you back. 24 01:58.790 --> 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 02:06.980 --> 02:14.770 all over my room, and a time when people would fight each other for the latest version of Windows 95. 26 02:15.020 --> 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 02:22.580 --> 02:28.280 some functionality such as retrieving a piece of data that you searched for, or just calculating something, 28 02:28.310 --> 02:30.290 or converting between different units, 29 02:30.320 --> 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 02:37.430 --> 02:39.910 computation and business logic happened, 31 02:40.070 --> 02:45.110 and then it would return the web page that contained the new data. 32 02:45.110 --> 02:48.330 Now the team at Netscape wanted something a little bit different. 33 02:48.350 --> 02:56.330 They envisioned a future where the web was more dynamic, with animations and real time user interaction. 34 02:56.330 --> 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 03:03.470 --> 03:04.510 browser. 36 03:04.520 --> 03:08.480 So in order to do this they wanted to create a small scripting language. 37 03:08.510 --> 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 03:16.130 --> 03:21.010 and non-programmers could use it to add functionality to web sites. 39 03:21.050 --> 03:26.270 So they contracted this guy, Brendan Eich, to create that programming language. 40 03:26.390 --> 03:33.470 And, as internet history and internet lore goes, Brendan proceeded to sit down with the team, and while 41 03:33.470 --> 03:40.790 there were other people who tried to lose a guy in 10 days, Brendan was able to create Javascript in 42 03:40.790 --> 03:47.540 10 days. And now we can't even imagine what the world would look like without Javascript. 43 03:47.540 --> 03:53.150 So let's try and turn off Javascript in our Chrome browser and see what we end up with. 44 03:53.150 --> 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 03:59.480 --> 04:05.630 it will highlight Content Settings, and if you click on that you can navigate to Javascript Allowed, 46 04:05.660 --> 04:07.280 and we're going to switch it off. 47 04:07.310 --> 04:11.130 Now let's go onto Twitter and let's see what that looks like. 48 04:11.300 --> 04:16.790 So, we're getting the mobile version of Twitter that doesn't require Javascript, but you'll see that the 49 04:16.790 --> 04:21.140 design looks completely different from the Twitter that you get on your phone. 50 04:21.170 --> 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 04:27.080 --> 04:33.950 key bit of Javascript that tells you how many characters you've written and how many you have left. 52 04:33.950 --> 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 04:39.810 --> 04:41.200 to know which part. 54 04:41.210 --> 04:44.320 So this is Twitter without Javascript. 55 04:44.330 --> 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 04:50.300 --> 04:51.860 these ads showing up. 57 04:52.040 --> 04:58.040 So an interesting side effect of disabling Javascript is, you actually end up having an ad free 58 04:58.070 --> 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 05:04.400 --> 05:08.080 we end up with an ad free browsing experience. 60 05:08.090 --> 05:13.700 So there are even people who choose to switch off Javascript for reasons such as this. 61 05:13.850 --> 05:16.900 But you'll end up running into a huge amount of problems as well. 62 05:16.940 --> 05:23.240 For example sites like YouTube just simply won't even load up with Javascript disabled, and it's the 63 05:23.240 --> 05:25.640 same problem on Netflix. 64 05:25.640 --> 05:31.760 So the world is actually quite a scary place without Javascript, and it goes to show just how reliant 65 05:31.790 --> 05:35.360 we've become on this single programming language. 66 05:35.570 --> 05:38.760 The web certainly is dominated by it. Now 67 05:38.780 --> 05:42.220 Javascript wasn't even always called Javascript. 68 05:42.230 --> 05:48.320 In fact when Brendan first created it, it was actually called Livescript, and then the people at Microsoft 69 05:48.470 --> 05:54.000 decided to try and reverse engineer the program and they ended up with something called Jscript. 70 05:54.000 --> 06:00.080 And so there were all the slightly different versions of Javascript that was being run on the web and 71 06:00.080 --> 06:02.340 it was starting to get quite confusing. 72 06:02.360 --> 06:08.750 So the Europeans did what Europeans do best and they decided to standardize the language. 73 06:08.870 --> 06:12.110 And that's where you get the ECMAscript from. 74 06:12.140 --> 06:19.520 And that stands for the European Computer Manufacturers Association Script. And the only reason why this 75 06:19.520 --> 06:26.860 is interesting is that often you'll see different versions of Javascript not referred to as JS5 76 06:26.870 --> 06:35.000 or JS6 but as ES6 or ES7, and the ES comes of course from ECMAscript. 77 06:35.000 --> 06:36.550 All right so enough history. 78 06:36.560 --> 06:38.660 Why is it called Javascript anyways? 79 06:38.690 --> 06:40.710 What does the script stand for? 80 06:40.850 --> 06:48.890 Well, just as you have scripts in plays where it tells the actors what they should do, the scripting languages 81 06:48.950 --> 06:52.580 does much the same thing with regards to web sites. 82 06:52.580 --> 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 06:59.840 --> 07:02.950 So obviously we're making a very high end movie here. 84 07:03.140 --> 07:09.070 So in the script you might tell your actors that after Gwyneth appears on stage for one second, Brad 85 07:09.100 --> 07:09.840 should appear. 86 07:10.190 --> 07:12.240 And then Gwyneth should say hello. 87 07:12.440 --> 07:16.130 And then there's a delay of one second when Brad needs to say hello. 88 07:16.130 --> 07:17.750 So this is the script. 89 07:17.810 --> 07:19.630 So this is how it would play out. 90 07:21.740 --> 07:28.370 So by writing these instructions and telling the actors what they should say we're able to determine 91 07:28.430 --> 07:29.740 how our play should work. 92 07:29.780 --> 07:36.860 Now, in our world of web development, the script is Javascript and the actors are, for example, the HTML 93 07:36.860 --> 07:44.550 elements, and Gwyneth would be, say, for example, an h1 element, and Brad could be a paragraph element. 94 07:44.690 --> 07:52.190 So clearly the web developers version of a play is much less sexy, but nonetheless it still can do exactly 95 07:52.190 --> 07:53.180 the same things. 96 07:53.180 --> 08:00.440 So in this case our script looks more like this. First unhide h1, then after one second delay unhide 97 08:00.440 --> 08:05.000 the paragraph tag, then the h1 should change its text to the word Hello, 98 08:05.300 --> 08:09.230 and the paragraph tag should change its text to the word World. 99 08:09.230 --> 08:10.810 So let's give that a go. 100 08:14.400 --> 08:14.960 There we go. 101 08:15.000 --> 08:21.840 So in this case we're using our Javascript to tell our players or elements what it should do. 102 08:21.960 --> 08:24.440 And this is how scripting languages work. 103 08:24.450 --> 08:30.020 So the other question I tend to get from students is, is Javascript similar to Java? 104 08:30.170 --> 08:34.370 And what exactly is their relationship? And to those students 105 08:34.380 --> 08:41.010 I often refer to something that a computer science professor once told me, which is Java and Javascript 106 08:41.010 --> 08:49.470 have about as much in common as car and carpet. And the only reason why Javascript was called javascript 107 08:49.620 --> 08:54.870 was because in the 90s the word Java was about as hot as the word blockchain 108 08:54.900 --> 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 09:01.320 --> 09:08.880 had its stock doubled in price almost overnight by simply changing its name to Long Blockchain company. 110 09:08.880 --> 09:11.820 So that was exactly what happened in the 90s, 111 09:11.820 --> 09:18.720 everybody wanted the word Java in their name. But Javascript and Java actually have some big differences. 112 09:18.720 --> 09:24.630 And the main difference is that Javascript is an interpreted programming language whereas Java is a 113 09:24.630 --> 09:30.930 compiled programming language. So I'll defer to this brilliant cartoon from a TV show called Bits and 114 09:30.930 --> 09:34.160 Bytes from the 1980s to explain this. 115 09:34.200 --> 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 09:39.510 --> 09:40.430 of this lesson. 117 09:40.470 --> 09:46.650 Now whereas in the olden days interpreted languages tend to be seen as almost like toy languages. 118 09:46.650 --> 09:48.040 They weren't so powerful. 119 09:48.060 --> 09:55.230 They were very slow and they had to execute all the instructions line by line whereas compiled languages 120 09:55.230 --> 09:59.740 were seen as the more serious languages and you end up with very fast running programs. 121 09:59.820 --> 10:07.560 Now today modern Javascript is used in all sorts of places, whereas traditionally it was a front end 122 10:07.560 --> 10:14.330 language that was meant to add some animations to your web site or allow a little bit of user interaction. 123 10:14.400 --> 10:21.930 But nowadays Javascript can be seen in frameworks ranging from the front end to the back end and everything 124 10:21.930 --> 10:22.940 in between. 125 10:23.070 --> 10:27.490 And later in this course we're going to learn about a lot of those frameworks. Now 126 10:27.540 --> 10:33.210 the other great thing about Javascript is that it's the one language that is supported by all of the 127 10:33.210 --> 10:40.860 major browsers. While you can use other languages that can be compiled into Javascript and run on the 128 10:40.860 --> 10:42.030 browser, 129 10:42.090 --> 10:48.870 it is still the language that powers the web, and this is evident from the popularity of Javascript. 130 10:48.870 --> 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 10:56.100 --> 10:57.580 the top right corner, 132 10:57.780 --> 11:05.030 the most popular language of 2018 is still Javascript, closely followed by Java. 133 11:05.040 --> 11:11.730 So whenever students ask me what is the language that I should learn first or what is the best programming 134 11:11.730 --> 11:14.220 language to become skilled in, 135 11:14.220 --> 11:18.060 I tend to tell them that, well, that depends on what you want to build. 136 11:18.240 --> 11:23.110 If you want to build an iOS app then that means you should learn Swift. 137 11:23.250 --> 11:26.950 If you want to build an Android app then you need to know about Java. 138 11:27.150 --> 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 11:33.720 --> 11:36.410 if you're not careful it can also be your enemy. 140 11:36.420 --> 11:42.300 So in the coming lessons we're going to learn about best practice in terms of using Javascript and all 141 11:42.300 --> 11:45.140 of the good parts that this language offers. 142 11:45.360 --> 11:48.520 So for all of that and more, I'll see you on the next lesson.