1 00:00:00,120 --> 00:00:06,120 Now hopefully, you're now excited to get started and so am I. Before we get started, we just have to make 2 00:00:06,120 --> 00:00:09,290 sure that we have a proper development environment, 3 00:00:09,390 --> 00:00:16,800 so a good environment where we can write code and dive into Javascript because writing code in a 4 00:00:16,800 --> 00:00:24,180 system text editor as we did it earlier in this module is really too cumbersome, not really a great experience. 5 00:00:24,210 --> 00:00:25,470 If we have a look at that, 6 00:00:25,470 --> 00:00:30,780 well this is really hard to read and if we write a lot of code there, that's not fun at all. 7 00:00:30,780 --> 00:00:36,570 So we need a better code editor which makes working on our code easier, which takes some work off us 8 00:00:37,020 --> 00:00:40,270 and makes it more pleasant in general 9 00:00:40,380 --> 00:00:45,780 and we also need an environment where we can test our web page and our code. 10 00:00:45,780 --> 00:00:49,710 Now for the editor, I strongly recommend using Visual Studio Code, 11 00:00:49,830 --> 00:00:56,900 this is not the only code editor or IDE, for integrated development environment, which you can use 12 00:00:56,970 --> 00:01:00,010 but it is free and it's really really great. 13 00:01:00,010 --> 00:01:05,500 It's super fast, very modern, under active development, really extensible and customizable, 14 00:01:05,520 --> 00:01:11,260 it's my strong recommendation to use Visual Studio Code and we'll install it together in just a second. 15 00:01:11,310 --> 00:01:16,080 You can combine it with a lot of extensions which you can install from inside Visual Studio Code and 16 00:01:16,080 --> 00:01:18,930 you can configure it to suit your needs 17 00:01:18,930 --> 00:01:24,150 and I have a module where we'll dive deeper into that but I'll also show you a basic setup which I use 18 00:01:24,360 --> 00:01:29,970 right in this lecture. Now for testing and seeing our code in action, 19 00:01:29,970 --> 00:01:31,790 we also need a browser and there, 20 00:01:31,830 --> 00:01:33,740 I recommend using Google Chrome. 21 00:01:33,900 --> 00:01:37,220 Of course we will write code that runs in all browsers 22 00:01:37,220 --> 00:01:44,210 we want to support, more on that in the browser support module but for development, Chrome is really amazing, 23 00:01:44,220 --> 00:01:47,340 It has a lot of features that make development easier 24 00:01:47,340 --> 00:01:52,530 and my strong recommendation therefore is to use Chrome for development even if you normally use a different 25 00:01:52,530 --> 00:01:53,060 browser. 26 00:01:53,100 --> 00:01:58,590 Really use Chrome to have the same result as I do here and to follow along smoothly. Again, 27 00:01:58,590 --> 00:02:03,880 later you will learn how to make sure that the code runs in all browsers where it needs to run. 28 00:02:04,140 --> 00:02:10,320 Now in Chrome, we will also use the developer tools which are built into Chrome, to have a look at our code, 29 00:02:10,350 --> 00:02:13,740 debug it and so on and I'll also have a look at that 30 00:02:13,740 --> 00:02:17,340 in the development and debugging section later in the course. 31 00:02:17,340 --> 00:02:23,610 But with that, let's get started with the code editor, with the IDE, with Visual Studio Code. For that, you 32 00:02:23,610 --> 00:02:28,560 can simply google for Visual Studio Code and you should find this page, code.visualstudio.com, 33 00:02:28,860 --> 00:02:34,950 there you can learn more about this code editor and you can always check out the docs if you're interested 34 00:02:34,950 --> 00:02:40,200 in diving deeper and of course you can also download an installer. Here it should already pick the right one 35 00:02:40,200 --> 00:02:46,170 for your operating system, otherwise choose one from the dropdown, Visual Studio Code is available for 36 00:02:46,170 --> 00:02:52,920 Mac, for Windows, for Linux. Simply download the installer from this page where you then also see some 37 00:02:52,920 --> 00:02:59,540 getting started instructions and run through the installation process once you did so. It's a straightforward 38 00:02:59,630 --> 00:03:05,090 installation process, nothing fancy about that, you can just go through the download and installer and install 39 00:03:05,090 --> 00:03:12,220 Visual Studio Code on your system. Once you did that, you can open the editor and it should look something 40 00:03:12,220 --> 00:03:13,240 like this. 41 00:03:13,240 --> 00:03:19,390 Now if it doesn't have this dark mode look here, you can change the theme by going to your options here, 42 00:03:19,900 --> 00:03:27,010 preferences and then color theme or using the shortcuts you see there, under windows you will find the 43 00:03:27,020 --> 00:03:32,590 preferences under file. When you choose color theme, you can pick a theme and you see a bunch of themes 44 00:03:32,590 --> 00:03:38,890 available. You can simply cycle through these themes with the arrow keys and check out which theme you 45 00:03:38,890 --> 00:03:39,600 want to use. 46 00:03:39,610 --> 00:03:45,760 Now I like this dark plus theme but of course you can go with the theme you like. You also see a 47 00:03:45,760 --> 00:03:48,490 bunch of elements here at the start, 48 00:03:48,490 --> 00:03:53,200 you can also customize this under view, appearance and there for example, you could get rid of that status 49 00:03:53,200 --> 00:03:55,710 bar at the bottom if you wanted to. 50 00:03:55,720 --> 00:04:00,700 Now I will add it back but you can tweak this to your likings to make sure that you see the information 51 00:04:00,700 --> 00:04:01,950 you want to see. 52 00:04:02,260 --> 00:04:09,610 Now as you see, we don't see our code here, so we can click open folder here or choose file open and then 53 00:04:09,610 --> 00:04:11,720 choose the folder you do want to open 54 00:04:11,740 --> 00:04:17,170 and here, I chose the folder with the starting code we saw earlier in this course, you'll find it 55 00:04:17,170 --> 00:04:23,740 attached to this lecture again. Simply open the whole folder and now this will load this project into 56 00:04:23,740 --> 00:04:25,940 Visual Studio Code here. 57 00:04:25,990 --> 00:04:28,480 Now the colors of these files might look different, 58 00:04:28,480 --> 00:04:31,360 that has something to do with version control, 59 00:04:31,360 --> 00:04:35,890 something we don't have to worry about right now but you should see these files and folders here. 60 00:04:35,890 --> 00:04:38,880 Again you won't see the gitignore and vscode file here, 61 00:04:38,950 --> 00:04:42,030 these are folders and files only I have here for my configuration, 62 00:04:42,130 --> 00:04:46,750 you should see the assets, info and index.html folders and file though. 63 00:04:46,760 --> 00:04:52,080 Now what might also be different for you however is the icons you see here. 64 00:04:52,150 --> 00:04:57,460 Now that's coming from a so-called extension I added, extensions are plugins you can add into your editor 65 00:04:57,460 --> 00:05:00,370 to change it and tweak it to your likings. 66 00:05:00,490 --> 00:05:05,060 You can add plugins and extensions by going here to these extensions part, 67 00:05:05,230 --> 00:05:09,040 you can also get there by clicking on view extensions 68 00:05:09,040 --> 00:05:14,890 and that's actually how I will navigate and I will remove that activity bar here on the left and just 69 00:05:14,890 --> 00:05:16,540 navigate around with view 70 00:05:16,540 --> 00:05:18,900 and then here, these shortcuts or these options 71 00:05:18,970 --> 00:05:20,780 and now we're on the extensions part. 72 00:05:20,780 --> 00:05:26,230 Now I already got a bunch of extensions installed, most of them are not required here for this development 73 00:05:26,290 --> 00:05:30,610 but there are some which I do recommend using and one is the material 74 00:05:30,610 --> 00:05:35,020 icon extension. You can just search for material icon and you should find the material 75 00:05:35,020 --> 00:05:36,490 icon theme package. 76 00:05:36,580 --> 00:05:42,010 Now this is totally optional but you can install it, you will have an install button here to get the same 77 00:05:42,010 --> 00:05:43,420 file icons as I do, 78 00:05:43,420 --> 00:05:51,040 so you can install it and then load the extension with the buttons you see here too add the same icons. 79 00:05:51,040 --> 00:05:52,000 Another extension 80 00:05:52,000 --> 00:05:55,090 I recommend using is prettier. 81 00:05:55,090 --> 00:06:00,680 You can search for prettier, written like this and install and enable this extension, 82 00:06:00,730 --> 00:06:04,600 this is an extension which helps us with code formatting. 83 00:06:04,600 --> 00:06:10,390 Now code formatting allows us to write clean and well-readable code because as you will see, a lot of 84 00:06:10,390 --> 00:06:15,100 code is valid from a technical perspective but can be hard to read, 85 00:06:15,100 --> 00:06:17,800 I'll show you an example in a second. 86 00:06:17,890 --> 00:06:20,200 With that, we have all the core extensions 87 00:06:20,200 --> 00:06:21,520 I would recommend here, 88 00:06:21,610 --> 00:06:26,600 you don't need the other extensions I have here, they are not even related Javascript development necessarily 89 00:06:26,800 --> 00:06:29,330 and therefore we should be good here. 90 00:06:29,380 --> 00:06:34,150 You can now go back to the explorer view here to see your files again 91 00:06:34,150 --> 00:06:40,480 and now let me show you how you should basically configure your project and what this code formatting 92 00:06:40,480 --> 00:06:41,270 is all about. 93 00:06:41,290 --> 00:06:46,900 For that, let's open the assets folder, scripts in there, app.js and there you see the script I'm giving to 94 00:06:46,900 --> 00:06:47,900 you. Now 95 00:06:48,160 --> 00:06:55,570 you already see here why we're using a code editor, this and also in the HTML file is much more readable 96 00:06:55,690 --> 00:06:56,900 than this here, 97 00:06:56,950 --> 00:06:57,530 right. 98 00:06:57,550 --> 00:06:58,780 It's much more readable, 99 00:06:58,780 --> 00:07:01,030 keywords are highlighted, 100 00:07:01,060 --> 00:07:09,040 we also get information if we hover over something, we get useful auto completion if we type and so on 101 00:07:09,060 --> 00:07:13,150 and you'll see all of that throughout this course as we write code. 102 00:07:13,150 --> 00:07:17,380 You don't need to understand this code here of course, we'll learn all about that throughout this course 103 00:07:17,380 --> 00:07:22,350 but I want to show you this auto formatting. Let's say here in line 6, 104 00:07:22,510 --> 00:07:27,300 I don't have this whitespace at the beginning or I even have code like that. 105 00:07:27,340 --> 00:07:32,650 Technically this is valid code, I can already tell you that, Javascript is able to understand and execute 106 00:07:32,650 --> 00:07:39,440 this code but to us humans, it's a bit harder to read and that's where we can use so-called auto formatting. 107 00:07:39,670 --> 00:07:48,850 If you go to code, preferences, keyboard shortcuts and there you search for format document, you will find 108 00:07:48,850 --> 00:07:53,740 this shortcut with a certain shortcut attached to it, if you don't have one here, you can right click 109 00:07:53,740 --> 00:07:57,940 on this and change the key binding to assign a shortcut 110 00:07:57,940 --> 00:08:03,910 and this is a shortcut you can then press to auto format your code. You saw that, the code magically 111 00:08:03,910 --> 00:08:05,930 changed to a more readable version, 112 00:08:05,940 --> 00:08:13,630 this is something where prettier helps us. Now in general of course, you can tweak your keyboard shortcuts 113 00:08:13,630 --> 00:08:19,100 here, not just the format document but any shortcut you might be using here in these settings 114 00:08:19,110 --> 00:08:23,560 and you got a lot of shortcuts can use, of course you can use the official documentation to learn all 115 00:08:23,560 --> 00:08:26,320 about Visual Studio Code already if you want to. 116 00:08:26,320 --> 00:08:31,930 I will also share some useful hints with you in the development and debugging section later in the course. 117 00:08:32,590 --> 00:08:37,480 One thing which I would recommend that you do is that you also dive into preferences settings right now 118 00:08:37,480 --> 00:08:41,590 though and there, you can switch between user and workspace settings. 119 00:08:41,680 --> 00:08:47,800 Basically user settings are settings that apply to all projects you manage with Visual Studio Code, workspace 120 00:08:47,860 --> 00:08:50,220 settings only apply to this project, 121 00:08:50,290 --> 00:08:55,200 for example here I got a workspace setting and that's where this .vscode folder is coming from, where 122 00:08:55,260 --> 00:08:59,180 I set the zoom level to 6 so that this is more readable to you, 123 00:08:59,230 --> 00:09:01,400 that's all I have in there. Now 124 00:09:01,420 --> 00:09:08,440 under preferences settings, you can tweak your user or your project specific settings and there for example, 125 00:09:08,440 --> 00:09:14,610 you can search for prettier and configure prettier here as you see and the various options it offers 126 00:09:14,610 --> 00:09:18,100 to you to format code as you want, 127 00:09:18,100 --> 00:09:24,470 for example some things I have set up there is that I want to add semicolons at the end of every line, 128 00:09:24,480 --> 00:09:25,530 I have this checked. 129 00:09:25,530 --> 00:09:31,570 I have single quote check to use single quotes for text and I have a tab width of two. 130 00:09:31,620 --> 00:09:32,970 Now this is not something you have to do, 131 00:09:32,970 --> 00:09:37,770 these are just my settings in case you want to have the same code output as I have it here. 132 00:09:37,920 --> 00:09:44,910 And with that, we have a basic editor setup which we can use to write our code throughout this course. 133 00:09:44,910 --> 00:09:46,480 Now let's come back to the browser. 134 00:09:46,590 --> 00:09:52,380 As I said, I recommend that you use Chrome there and you might want to use incognito mode to avoid any 135 00:09:52,380 --> 00:09:58,110 distractions by any Chrome extensions you might have installed which might interfere with your web page 136 00:09:58,410 --> 00:10:04,950 and maybe do something which is not caused by your code but by some extension. Also important in Chrome 137 00:10:05,040 --> 00:10:11,490 are the developer tools. You can get there by using view, developer, developer tools or the shortcut which 138 00:10:11,490 --> 00:10:17,330 is shown there and these are the developer tools we'll also spend a lot of time in, I'll zoom in a bit 139 00:10:17,330 --> 00:10:23,520 here to make it bit bigger and there for example, we have this console where we can output some development 140 00:10:23,520 --> 00:10:28,590 log messages, something we'll do throughout the course. We have the elements tab where we can see the 141 00:10:28,590 --> 00:10:31,200 rendered HTML content and so on. 142 00:10:31,200 --> 00:10:35,640 Now one important setting I want you to make here in the developer tools to also have the same output 143 00:10:35,640 --> 00:10:39,420 and behavior here as I have it, in a console area 144 00:10:39,420 --> 00:10:43,120 if you click on the gear icon here, make sure preserve log is not check. 145 00:10:43,140 --> 00:10:47,760 This simply makes sure that whenever you reload the page, this log will be emptied and we see a new 146 00:10:47,760 --> 00:10:50,210 log output for the currently running page, 147 00:10:50,260 --> 00:10:54,790 now that's all. Now we'll have a close look at the developer tools in a separate module, 148 00:10:54,840 --> 00:11:00,720 I just already want you to be aware of them and I want you to make sure that you use Chrome and have a 149 00:11:00,720 --> 00:11:04,650 properly setup editor and with that, we're all set, 150 00:11:04,770 --> 00:11:10,620 we can now dive into Javascript, its basics and get started learning this amazing language.