WEBVTT 1 00:00:00.930 --> 00:00:04.230 So you've already written a line or two of JavaScript, 2 00:00:04.230 --> 00:00:08.890 but what exactly is JavaScript and what can we do with it? 3 00:00:08.890 --> 00:00:10.660 Well, that's exactly what 4 00:00:10.660 --> 00:00:12.750 we're gonna find out in this video. 5 00:00:12.750 --> 00:00:14.280 And so in this lecture, 6 00:00:14.280 --> 00:00:17.230 we will set the stage for the rest of the course. 7 00:00:17.230 --> 00:00:19.150 And so it's really important that you 8 00:00:19.150 --> 00:00:20.883 follow this one until the end. 9 00:00:22.160 --> 00:00:25.680 So we can define JavaScript in many different ways. 10 00:00:25.680 --> 00:00:27.440 But, my definition is that 11 00:00:27.440 --> 00:00:30.050 it's a high level object-oriented, 12 00:00:30.050 --> 00:00:32.950 multi-paradigm programming language. 13 00:00:32.950 --> 00:00:34.290 And with that being said, 14 00:00:34.290 --> 00:00:36.810 can we move on to the next lecture now? 15 00:00:36.810 --> 00:00:39.210 Well, probably not because 16 00:00:39.210 --> 00:00:41.980 what does any of that actually mean? 17 00:00:41.980 --> 00:00:44.740 So let's deconstruct this just a little bit 18 00:00:44.740 --> 00:00:47.830 to at least make some sense out of this. 19 00:00:47.830 --> 00:00:50.660 And starting with programming language itself, 20 00:00:50.660 --> 00:00:53.580 a programming language is basically just a tool 21 00:00:53.580 --> 00:00:55.270 that allows us to write code 22 00:00:55.270 --> 00:00:58.910 that will instruct a computer to do something. 23 00:00:58.910 --> 00:01:00.800 And of course, that's our main goal 24 00:01:00.800 --> 00:01:03.550 of using JavaScript, right? 25 00:01:03.550 --> 00:01:05.100 Then I go on and say that 26 00:01:05.100 --> 00:01:07.460 JavaScript is a high-level language, 27 00:01:07.460 --> 00:01:09.780 which means that we don't have to think 28 00:01:09.780 --> 00:01:12.930 about a lot of complex stuff such as managing 29 00:01:12.930 --> 00:01:16.360 the computer's memory while it runs or program. 30 00:01:16.360 --> 00:01:17.460 So in JavaScript, 31 00:01:17.460 --> 00:01:20.090 there are a lot of so-called abstractions 32 00:01:20.090 --> 00:01:21.870 over all these small details 33 00:01:21.870 --> 00:01:23.920 that we don't want to worry about. 34 00:01:23.920 --> 00:01:25.040 And this makes the language 35 00:01:25.040 --> 00:01:28.260 a lot easier to write and to learn. 36 00:01:28.260 --> 00:01:31.760 Next, I say that JavaScript is object oriented. 37 00:01:31.760 --> 00:01:33.910 And all that means is that the language 38 00:01:33.910 --> 00:01:37.100 is mostly based on the concept of objects 39 00:01:37.100 --> 00:01:39.600 for storing most kinds of data. 40 00:01:39.600 --> 00:01:41.280 And of course, we will learn all about 41 00:01:41.280 --> 00:01:44.690 object-oriented programming throughout this course. 42 00:01:44.690 --> 00:01:48.490 Finally, JavaScript is also a multi-paradigm language, 43 00:01:48.490 --> 00:01:51.680 meaning that it's so flexible and versatile, 44 00:01:51.680 --> 00:01:54.940 that we can use all kinds of different programming styles, 45 00:01:54.940 --> 00:01:58.250 such as imperative and declarative programming. 46 00:01:58.250 --> 00:01:59.990 And these different styles are just 47 00:01:59.990 --> 00:02:03.760 different ways of structuring our code, basically. 48 00:02:03.760 --> 00:02:07.540 Again, you will learn all about this throughout the course. 49 00:02:07.540 --> 00:02:10.670 This just a first, very high level overview, 50 00:02:10.670 --> 00:02:13.113 but I hope it's been making sense so far. 51 00:02:14.640 --> 00:02:18.100 Anyway, now that we know what JavaScript actually is, 52 00:02:18.100 --> 00:02:20.620 at least kind of, what is the role 53 00:02:20.620 --> 00:02:22.720 that it plays in web development, 54 00:02:22.720 --> 00:02:26.340 or in other words, what do we actually use it for? 55 00:02:26.340 --> 00:02:27.830 And to answer that question, 56 00:02:27.830 --> 00:02:31.940 let's actually look at a three core technologies of the web, 57 00:02:31.940 --> 00:02:36.240 HTML, CSS and of course, JavaScript. 58 00:02:36.240 --> 00:02:39.140 So these three technologies all work together 59 00:02:39.140 --> 00:02:41.520 to create beautiful, interactive 60 00:02:41.520 --> 00:02:44.860 and dynamic websites or web applications. 61 00:02:44.860 --> 00:02:49.130 Now the HTML is responsible for the content of the page. 62 00:02:49.130 --> 00:02:51.880 So the text, the images, the buttons, 63 00:02:51.880 --> 00:02:54.480 and all the contents that you see on the webpage 64 00:02:54.480 --> 00:02:57.150 is always written in HTML. 65 00:02:57.150 --> 00:03:00.040 Then the CSS is responsible for the 66 00:03:00.040 --> 00:03:02.160 line:15% presentation of that content. 67 00:03:02.160 --> 00:03:05.000 So basically for styling and for laying out 68 00:03:05.000 --> 00:03:07.330 the elements on a webpage. 69 00:03:07.330 --> 00:03:10.300 And then, finally, JavaScript is the real 70 00:03:10.300 --> 00:03:12.920 line:15% programming language of the internet. 71 00:03:12.920 --> 00:03:15.540 And it allows developers to add dynamic 72 00:03:15.540 --> 00:03:19.470 and interactive effects to any webpage. 73 00:03:19.470 --> 00:03:23.110 We also use it to manipulate the content or the CSS, 74 00:03:23.110 --> 00:03:25.420 load data from remote servers 75 00:03:25.420 --> 00:03:29.310 and really build entire applications in the browser, 76 00:03:29.310 --> 00:03:32.530 which we then call web applications. 77 00:03:32.530 --> 00:03:35.340 Now, we can also use the analogy of nouns, 78 00:03:35.340 --> 00:03:38.300 adjectives, and verbs to make this separation 79 00:03:38.300 --> 00:03:40.783 of roles a bit easier to understand. 80 00:03:41.670 --> 00:03:45.290 So in this analogy, HTML represents the nouns. 81 00:03:45.290 --> 00:03:49.870 For example, saying that the P element is a paragraph. 82 00:03:49.870 --> 00:03:53.070 And so paragraph is the noun here. 83 00:03:53.070 --> 00:03:55.390 The CSS then, is the adjective, 84 00:03:55.390 --> 00:03:57.660 because it describes the noun. 85 00:03:57.660 --> 00:04:02.510 Like this piece of CSS saying the paragraph text is red. 86 00:04:02.510 --> 00:04:06.470 And so here, red is the adjective describing the noun. 87 00:04:06.470 --> 00:04:10.110 And finally JavaScript is, of course, the verb, 88 00:04:10.110 --> 00:04:12.910 like saying hide the paragraph. 89 00:04:12.910 --> 00:04:16.960 And so here we are doing something and so we have a verb. 90 00:04:16.960 --> 00:04:17.800 Okay? 91 00:04:17.800 --> 00:04:19.390 Does that make sense? 92 00:04:19.390 --> 00:04:21.140 Now, since we've been talking a lot 93 00:04:21.140 --> 00:04:24.580 about dynamic effects and web applications here, 94 00:04:24.580 --> 00:04:27.640 let's now actually take a look at a real example 95 00:04:27.640 --> 00:04:31.463 to make it even more clear what JavaScript is capable of. 96 00:04:33.060 --> 00:04:36.760 And so this is the Twitter web application on twitter.com 97 00:04:36.760 --> 00:04:38.440 and there is a lot happening 98 00:04:38.440 --> 00:04:41.480 as we open a profile page like this one. 99 00:04:41.480 --> 00:04:45.290 And so I thought that this was a very cool example. 100 00:04:45.290 --> 00:04:46.850 So right off the bat, 101 00:04:46.850 --> 00:04:48.080 you see that there are these 102 00:04:48.080 --> 00:04:50.450 two rotating spinners on the page, 103 00:04:50.450 --> 00:04:53.770 meaning that JavaScript is probably loading some data 104 00:04:53.770 --> 00:04:56.880 from the Twitter service in the background. 105 00:04:56.880 --> 00:04:59.150 Then, as the data arrives, 106 00:04:59.150 --> 00:05:01.370 JavaScript hides these spinners, 107 00:05:01.370 --> 00:05:03.703 and instead show us the loaded content. 108 00:05:04.570 --> 00:05:06.350 So this is a very cool example 109 00:05:06.350 --> 00:05:10.370 of manipulating styles and content, right? 110 00:05:10.370 --> 00:05:14.100 But there's also some simpler dynamic effect on this page, 111 00:05:14.100 --> 00:05:16.560 like JavaScript showing the tweet box 112 00:05:16.560 --> 00:05:18.530 whenever we hit the tweet button 113 00:05:18.530 --> 00:05:22.630 and then hides it as we click outside of that box. 114 00:05:22.630 --> 00:05:24.900 And finally, JavaScript also displays 115 00:05:24.900 --> 00:05:27.180 this really nice user information 116 00:05:27.180 --> 00:05:30.610 as we hover our mouse over any user on Twitter. 117 00:05:30.610 --> 00:05:34.440 And it probably also loads this data on the fly. 118 00:05:34.440 --> 00:05:37.040 So a lot of cool stuff going on here, 119 00:05:37.040 --> 00:05:39.640 and it's all powered by JavaScript. 120 00:05:39.640 --> 00:05:41.450 How cool is that? 121 00:05:41.450 --> 00:05:43.830 And in fact, by the end of the course, 122 00:05:43.830 --> 00:05:45.550 you will actually know how to use 123 00:05:45.550 --> 00:05:48.340 all of these techniques that we just saw here. 124 00:05:48.340 --> 00:05:50.040 And so I hope that this makes you 125 00:05:50.040 --> 00:05:53.143 even more excited about all the content ahead. 126 00:05:54.770 --> 00:05:56.670 Alright, now that we saw what 127 00:05:56.670 --> 00:06:00.730 JavaScript is really capable of, let's quickly recap, 128 00:06:00.730 --> 00:06:03.090 and also look at other cool stuff 129 00:06:03.090 --> 00:06:06.720 that we can build with the power of JavaScript. 130 00:06:06.720 --> 00:06:08.460 So as you already know, 131 00:06:08.460 --> 00:06:12.230 Java script allows us to add dynamic effects to pages. 132 00:06:12.230 --> 00:06:14.600 And in fact, to build entire 133 00:06:14.600 --> 00:06:17.220 web applications in the browser, 134 00:06:17.220 --> 00:06:19.920 and these applications feel almost like the apps 135 00:06:19.920 --> 00:06:23.960 that we use on our computers and phones every single day. 136 00:06:23.960 --> 00:06:25.550 So we can say that JavaScript 137 00:06:25.550 --> 00:06:28.160 is what made modern web development, 138 00:06:28.160 --> 00:06:30.380 and really the whole modern web itself 139 00:06:30.380 --> 00:06:32.750 possible in the first place. 140 00:06:32.750 --> 00:06:34.690 Now, if you're already somewhat familiar 141 00:06:34.690 --> 00:06:37.170 with the web development industry, 142 00:06:37.170 --> 00:06:39.830 you probably heard of modern JavaScript libraries 143 00:06:39.830 --> 00:06:44.830 and frameworks such as React, Angular or Vue, right? 144 00:06:45.180 --> 00:06:48.500 And if you didn't, that's absolutely no problem. 145 00:06:48.500 --> 00:06:51.650 All you need to know is that these are basically tools 146 00:06:51.650 --> 00:06:54.970 that make writing modern, large scale web applications, 147 00:06:54.970 --> 00:06:57.350 a lot easier and faster. 148 00:06:57.350 --> 00:07:00.270 Now what matters here, is that all these frameworks 149 00:07:00.270 --> 00:07:05.260 and libraries are still 100% based on JavaScript. 150 00:07:05.260 --> 00:07:07.980 And what this means is that you should become really, 151 00:07:07.980 --> 00:07:09.802 really good at JavaScript before learning 152 00:07:09.802 --> 00:07:13.100 and using any of these frameworks, 153 00:07:13.100 --> 00:07:16.000 and not just jump into your first framework 154 00:07:16.000 --> 00:07:19.880 after you know how to write, like, 10 lines of JavaScript. 155 00:07:19.880 --> 00:07:21.200 Okay? 156 00:07:21.200 --> 00:07:23.340 Also your library of choice 157 00:07:23.340 --> 00:07:26.670 might not always be as popular as it is today. 158 00:07:26.670 --> 00:07:30.450 And the best way to be prepared is, you guessed it, 159 00:07:30.450 --> 00:07:33.400 becoming really good at JavaScript, 160 00:07:33.400 --> 00:07:37.520 because then you can easily learn whatever is popular next. 161 00:07:37.520 --> 00:07:39.740 So no matter what anyone tells you, 162 00:07:39.740 --> 00:07:41.610 learning JavaScript properly 163 00:07:41.610 --> 00:07:44.650 is the single best investment that you can make 164 00:07:44.650 --> 00:07:47.980 in your web development career right now. 165 00:07:47.980 --> 00:07:50.950 Now the JavaScript language and the web browser 166 00:07:50.950 --> 00:07:53.260 are actually two separate things. 167 00:07:53.260 --> 00:07:55.500 And what that means is that JavaScript 168 00:07:55.500 --> 00:07:58.740 can also run outside of web browsers. 169 00:07:58.740 --> 00:08:02.970 For example, it's possible to use JavaScript on a web server 170 00:08:02.970 --> 00:08:06.770 using a very popular technology called Node.js, 171 00:08:06.770 --> 00:08:09.430 which doesn't need any browser at all. 172 00:08:09.430 --> 00:08:13.330 And this allows us to create so-called backend applications, 173 00:08:13.330 --> 00:08:16.390 which are simply applications that run on a web server 174 00:08:16.390 --> 00:08:20.150 and interact with databases and stuff like that. 175 00:08:20.150 --> 00:08:23.450 On the other hand, when we use JavaScript in the browser, 176 00:08:23.450 --> 00:08:27.000 we create so-called front end applications. 177 00:08:27.000 --> 00:08:30.040 So in this course, we will learn the ins and outs 178 00:08:30.040 --> 00:08:32.410 of the JavaScript language itself, 179 00:08:32.410 --> 00:08:35.710 and of course also how to use it in the browser 180 00:08:35.710 --> 00:08:38.400 in order to create all these amazing effects 181 00:08:38.400 --> 00:08:40.260 that we've been talking about. 182 00:08:40.260 --> 00:08:41.530 So basically we're going to be 183 00:08:41.530 --> 00:08:44.720 building front-end web applications. 184 00:08:44.720 --> 00:08:45.730 And in the future, 185 00:08:45.730 --> 00:08:48.860 I might also add a section about Node.js 186 00:08:48.860 --> 00:08:50.380 at the end of this course, 187 00:08:50.380 --> 00:08:53.410 so that you can get a sense of how we can use JavaScript 188 00:08:53.410 --> 00:08:56.573 outside of the browser environment as well. 189 00:08:57.550 --> 00:08:58.383 All right. 190 00:08:58.383 --> 00:09:00.233 And now, just to finish, I want to mention 191 00:09:00.233 --> 00:09:03.110 that we can actually also use JavaScript 192 00:09:03.110 --> 00:09:06.070 line:15% to build kind of native mobile applications, 193 00:09:06.070 --> 00:09:08.820 line:15% as well as native desktop applications 194 00:09:08.820 --> 00:09:12.500 line:15% for any phone and computer operating system out there. 195 00:09:12.500 --> 00:09:15.600 That's because of modern tools like React Native, 196 00:09:15.600 --> 00:09:19.350 the Ionic framework and tools like Electron. 197 00:09:19.350 --> 00:09:22.500 These have completely changed the whole development industry 198 00:09:22.500 --> 00:09:24.070 over the last couple of years, 199 00:09:24.070 --> 00:09:27.960 making things possible that were never possible before. 200 00:09:27.960 --> 00:09:30.900 So as you can see, there's almost nothing 201 00:09:30.900 --> 00:09:33.070 that you can't build after becoming 202 00:09:33.070 --> 00:09:35.020 really good at JavaScript, 203 00:09:35.020 --> 00:09:39.260 which if you think about it, is really kind of mind-blowing. 204 00:09:39.260 --> 00:09:43.233 It's just amazing, because the possibilities are so endless. 205 00:09:44.200 --> 00:09:45.033 Okay. 206 00:09:45.033 --> 00:09:46.540 And now to finish this lecture, 207 00:09:46.540 --> 00:09:49.840 I want to briefly talk about JavaScript releases 208 00:09:49.840 --> 00:09:52.400 or versions, as you might call them. 209 00:09:52.400 --> 00:09:55.120 We will come back to this topic by the end of the section 210 00:09:55.120 --> 00:09:57.240 because it's super important, 211 00:09:57.240 --> 00:10:00.360 but it's also a good idea to get a first overview 212 00:10:00.360 --> 00:10:03.470 of JavaScript releases at this point. 213 00:10:03.470 --> 00:10:06.140 Anyway, to make a long story short, 214 00:10:06.140 --> 00:10:10.280 there has been a huge update to the language in 2015, 215 00:10:10.280 --> 00:10:13.020 which is officially called ES2015, 216 00:10:13.020 --> 00:10:15.440 but most people just call it ES6, 217 00:10:15.440 --> 00:10:19.100 simply because it was released after ES5. 218 00:10:19.100 --> 00:10:23.090 And by the way, E. S stands for ECMAScript. 219 00:10:23.090 --> 00:10:25.180 Now after ES2015, 220 00:10:25.180 --> 00:10:27.410 there is now a yearly new release 221 00:10:27.410 --> 00:10:29.940 with a couple of new JavaScript features. 222 00:10:29.940 --> 00:10:32.870 In all of these new releases or versions, 223 00:10:32.870 --> 00:10:37.870 starting from ES2015, is what we call modern JavaScript. 224 00:10:38.100 --> 00:10:40.530 But, why am I telling you all this? 225 00:10:40.530 --> 00:10:42.870 Well, it's simply because in this course, 226 00:10:42.870 --> 00:10:44.890 I'm gonna teach you a modern JavaScript, 227 00:10:44.890 --> 00:10:46.400 right from the beginning. 228 00:10:46.400 --> 00:10:49.860 And I wanted to make that very clear right from the start. 229 00:10:49.860 --> 00:10:51.840 However, I'm also convinced that 230 00:10:51.840 --> 00:10:56.840 you need to understand what came before ES2015, so ES5. 231 00:10:57.360 --> 00:11:01.750 And so I will also show you what's important of ES5. 232 00:11:01.750 --> 00:11:03.880 The reason for that is in a complete video 233 00:11:03.880 --> 00:11:07.690 about JavaScript releases at the end of this section, 234 00:11:07.690 --> 00:11:11.830 because now I no longer want to bore you with theory. 235 00:11:11.830 --> 00:11:15.383 So instead, let's now finally get started.