WEBVTT 1 00:00:01.380 --> 00:00:02.550 So let's now write 2 00:00:02.550 --> 00:00:05.733 our very first line of JavaScript code. 3 00:00:07.200 --> 00:00:11.260 And for now we will do that in the browser developer tools. 4 00:00:11.260 --> 00:00:14.600 So just to get started as quick as possible. 5 00:00:14.600 --> 00:00:16.700 We will then switch to the code editor 6 00:00:16.700 --> 00:00:20.220 that we just installed before in the next video. 7 00:00:20.220 --> 00:00:22.640 So make sure to open up Google Chrome, 8 00:00:22.640 --> 00:00:24.080 and then there are three ways 9 00:00:24.080 --> 00:00:27.610 in which we can open up the Chrome developer tools. 10 00:00:27.610 --> 00:00:31.310 First, we can hit command option J on the keyboard. 11 00:00:31.310 --> 00:00:32.440 And that's on Mac. 12 00:00:32.440 --> 00:00:35.643 So on Windows, that's gonna be ctrl+alt+J. 13 00:00:36.610 --> 00:00:40.830 And so this will then open up this console that we see here. 14 00:00:40.830 --> 00:00:45.110 So all of these tabs here are basically the developer tools. 15 00:00:45.110 --> 00:00:48.920 but we are just interested in the console, okay? 16 00:00:48.920 --> 00:00:52.100 Now another way of opening the developer tools 17 00:00:52.100 --> 00:00:55.440 is by right clicking and then inspect, 18 00:00:55.440 --> 00:00:58.200 which will bring us here to the elements tab, 19 00:00:58.200 --> 00:01:00.450 and then from there we can go to the console. 20 00:01:01.390 --> 00:01:03.090 And the third way, 21 00:01:03.090 --> 00:01:04.690 and I'm showing you all of them, 22 00:01:04.690 --> 00:01:06.590 because I know that are different people 23 00:01:06.590 --> 00:01:08.233 like to do it in different ways. 24 00:01:09.210 --> 00:01:13.290 So the third way is to come here to the Chrome menu, 25 00:01:13.290 --> 00:01:17.670 and then in there we go to view, developer 26 00:01:17.670 --> 00:01:21.470 and then JavaScript console, okay? 27 00:01:21.470 --> 00:01:24.260 And so we're back to the JavaScript console. 28 00:01:24.260 --> 00:01:26.070 And I'm increasing to font here a little bit 29 00:01:26.070 --> 00:01:27.563 by hitting command plus, 30 00:01:30.610 --> 00:01:32.840 and give it some more space. 31 00:01:32.840 --> 00:01:34.970 Now this JavaScript developer console 32 00:01:34.970 --> 00:01:38.480 allows us to write and test JavaScript code. 33 00:01:38.480 --> 00:01:40.710 So it's very useful during development, 34 00:01:40.710 --> 00:01:42.880 for example, to fix errors. 35 00:01:42.880 --> 00:01:45.690 Now we don't write real applications, of course, 36 00:01:45.690 --> 00:01:46.920 using this console. 37 00:01:46.920 --> 00:01:48.520 But now just to get started, 38 00:01:48.520 --> 00:01:51.640 let's use the console because it's a good and easy way 39 00:01:51.640 --> 00:01:54.360 to just write some JavaScript here. 40 00:01:54.360 --> 00:01:57.150 So let's write alert, 41 00:01:57.150 --> 00:01:59.960 which is a so-called JavaScript function, 42 00:01:59.960 --> 00:02:01.900 then open up parenthesis 43 00:02:01.900 --> 00:02:05.640 and without a space between alert and the parenthesis, 44 00:02:05.640 --> 00:02:08.020 and then we write a so-called string. 45 00:02:08.020 --> 00:02:09.930 So which is basically text, 46 00:02:09.930 --> 00:02:12.690 and let's write "Hello world." 47 00:02:12.690 --> 00:02:14.660 So that's the standard way 48 00:02:14.660 --> 00:02:18.240 of learning programming in any programming language. 49 00:02:18.240 --> 00:02:20.820 Then, we write the closing parenthesis 50 00:02:20.820 --> 00:02:23.393 and then let's hit return, or enter. 51 00:02:24.920 --> 00:02:25.860 And you'll see, 52 00:02:25.860 --> 00:02:28.890 that JavaScript gave us this popup window here 53 00:02:28.890 --> 00:02:32.330 which has "Hello world" just as we typed here 54 00:02:32.330 --> 00:02:34.003 in our string, in our code. 55 00:02:35.000 --> 00:02:37.520 Great, so that's your very first line 56 00:02:37.520 --> 00:02:40.150 of JavaScript code right there. 57 00:02:40.150 --> 00:02:43.530 So any code that we write here and then hit return 58 00:02:43.530 --> 00:02:45.683 will immediately get evaluated. 59 00:02:47.780 --> 00:02:50.750 Okay, but of course we can do a lot more. 60 00:02:50.750 --> 00:02:53.540 So let's write some more JavaScript code, 61 00:02:53.540 --> 00:02:56.380 which of course you do not need to understand yet. 62 00:02:56.380 --> 00:02:59.470 I just wanted to show some stuff that we can do. 63 00:02:59.470 --> 00:03:01.900 We will go into how everything works 64 00:03:01.900 --> 00:03:05.570 as we progress through this section, okay? 65 00:03:05.570 --> 00:03:07.560 So just to experiment a little bit, 66 00:03:07.560 --> 00:03:10.560 let's write a so-called variable. 67 00:03:10.560 --> 00:03:15.283 So let's say let JS equals, amazing. 68 00:03:17.330 --> 00:03:21.400 And so once more, we are basically writing a string here, 69 00:03:21.400 --> 00:03:22.363 so a text, 70 00:03:23.260 --> 00:03:24.740 and then we will do if 71 00:03:26.640 --> 00:03:28.983 and open parenthesis, JS, 72 00:03:30.370 --> 00:03:32.143 is equal to amazing, 73 00:03:34.370 --> 00:03:38.860 then we want an alert window like we saw before 74 00:03:38.860 --> 00:03:40.400 saying JavaScript 75 00:03:41.840 --> 00:03:43.610 is fun. 76 00:03:43.610 --> 00:03:45.590 And if I hit, now return 77 00:03:45.590 --> 00:03:47.330 we get this window which says 78 00:03:47.330 --> 00:03:50.350 JavaScript is fun, okay? 79 00:03:50.350 --> 00:03:52.930 So again, I will explain all these concepts 80 00:03:52.930 --> 00:03:56.850 and how all of this works here as we go through the section. 81 00:03:56.850 --> 00:03:59.150 But for now I hope that you can see the logic 82 00:03:59.150 --> 00:04:03.007 that we basically defined JS as being amazing. 83 00:04:03.007 --> 00:04:04.620 And then here in the next line, 84 00:04:04.620 --> 00:04:09.160 we said that if JS is equal to amazing, 85 00:04:09.160 --> 00:04:11.920 then JavaScript should show us this alert window 86 00:04:11.920 --> 00:04:14.777 with this text, okay? 87 00:04:14.777 --> 00:04:19.777 And now we can also change JS to, boring, 88 00:04:22.240 --> 00:04:23.800 hit return again. 89 00:04:23.800 --> 00:04:26.100 And now let's copy this text here again. 90 00:04:26.100 --> 00:04:27.750 So we want to run it again. 91 00:04:27.750 --> 00:04:32.710 So I'm just copying it and pasting it here, okay? 92 00:04:32.710 --> 00:04:33.973 So let's try that again. 93 00:04:34.900 --> 00:04:37.242 And this time nothing happened. 94 00:04:37.242 --> 00:04:40.820 And so that's because JS is now no longer amazing. 95 00:04:40.820 --> 00:04:42.630 It is boring. 96 00:04:42.630 --> 00:04:44.360 And so, in this case, 97 00:04:44.360 --> 00:04:49.160 if JavaScript is amazing is not actually true, right? 98 00:04:49.160 --> 00:04:50.720 Because it's boring now. 99 00:04:50.720 --> 00:04:53.743 And so in this case, the alert window is not shown. 100 00:04:54.640 --> 00:04:56.080 Now, there's also another way 101 00:04:56.080 --> 00:04:58.260 of going to the previous command, 102 00:04:58.260 --> 00:05:01.400 which is by hitting the up arrow on the keyboard. 103 00:05:01.400 --> 00:05:02.810 So just like this. 104 00:05:02.810 --> 00:05:05.890 And so we can see all the previous commands 105 00:05:05.890 --> 00:05:06.890 that we used before. 106 00:05:09.580 --> 00:05:10.550 Great. 107 00:05:10.550 --> 00:05:12.310 Now another thing that we can do 108 00:05:12.310 --> 00:05:15.270 is to do simple math operations. 109 00:05:15.270 --> 00:05:20.270 Let's say just 40, plus eight, plus 23, minus 10, let's say. 110 00:05:23.840 --> 00:05:24.850 Hit return, 111 00:05:24.850 --> 00:05:27.240 and then here we get the result. 112 00:05:27.240 --> 00:05:30.350 So basically we can use this as a calculator. 113 00:05:30.350 --> 00:05:32.240 And I hope that you can see how useful 114 00:05:32.240 --> 00:05:35.320 this is gonna become later down the road. 115 00:05:35.320 --> 00:05:37.340 Okay, and that's it for now. 116 00:05:37.340 --> 00:05:40.470 So I hope that this gave you a nice first taste 117 00:05:40.470 --> 00:05:44.160 of the language and of everything that is ahead. 118 00:05:44.160 --> 00:05:44.993 So if you want, 119 00:05:44.993 --> 00:05:47.840 you can experiment a little bit more with this, 120 00:05:47.840 --> 00:05:50.290 or you can move on right to the next lecture 121 00:05:50.290 --> 00:05:53.750 where we will learn what JavaScript actually is. 122 00:05:53.750 --> 00:05:55.163 So, see you there.