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.