In this lesson, we're going to explore some of the tools you can use to write, edit, and run your JavaScript. And we'll look at a couple online and a few that you would install locally. And the first one I've got up here already is the simplest one you can find. This is JS.do. You can go here and create an account, but you don't have to have an account in order to be able to do anything. It's designed to be simple here. All the code is in one window. That's the only option that you've got here. So if you notice on my page, I've got, for example, some CSS up here at the top in a style section, I've got HTML separate, and I've got my script down on the bottom there. So I can go ahead and run this. And of course, if there's any errors, it'll let me know. And you can save whatever you need. Now I've got a link here to the jQuery content delivery network, but you can also add frameworks right from here and save the file with whatever extension you want that that is unique to your account. So that's handy if you want to share that with somebody else, but a pretty simple editor to start with. If you want to go a little bit more sophisticated, we can look at jsfiddle.net and you can create an account here as well, where this one shines is you've got this editor with boxes for each kind of code. This on the upper left, I've got my HTML over on the right CSS, and down on the bottom, I've got JavaScript, which I have actually added the jQuery framework to, which you can just do in a dropdown. So this is kind of nice. You can edit each one by itself. And this layout is configurable from settings here. So if you want something that looks a little different, certainly go right ahead. And the CSS supports other CSS types as well. Now you can also use this fork to do a new version. So if you've got some code you like, but you want to take off and make some changes but not get rid of that original, fork will let you do that. This is also collaboration capable. So if you want someone else to be able to look at your screen while you're working on it, they can collaborate with you in real time. So that's a pretty nice one for something that that is free and online. Now we're going to look at a couple of locally installed editors. One is sublime text. Notice here that I've got just my JavaScript file there. This will give you a list of open files. You can choose your file type to get the correct code completion features if you notice down here at the bottom. Now this one picked up automatically that it was JavaScript. But if for some reason that's not recognized, you can just click on that and that will show you all the file types that are supported by this IDE. Now you can also add packages into this to get sublime text to do what you want it to do. There's one called Emmet, for example, that auto completes CSS and HTML. There's one called console wrap if you're going to write a lot of console logs, which is pretty handy for us as JavaScript developers. Now you can run code from this app, but you have to create what they call a build system and that's beyond what we're going to do here. But if you look in there getting started documents, pretty easy to find out how to do that. The next one I've got for you to install locally is one called Adam. Notice also it's got a file list on the left and we can see all three of these here color coded correctly. Again, if it's not recognized, just click on that little taskbar icon down on the bottom and it should recognize it, which is important because then you get the code completion features and the coloring that you see there. We can also use Visual Studio Code. This is a free one from Microsoft. If you're starting to notice how these IDEs are kind of about the same, that's by design because people like the features they like. And same thing in this one. If you want to add other things to the application itself, this works on a system called extension. I have one installed here called view in browser, which enables you to be able with HTML files to just right click on those and choose view in browser. And this should pop it up and run our code in whatever our default browser is. So that's the result of the code that we had in Visual Studio Code. Now those are okay, but for this class, what we're going to use is Visual Studio Community. And the current edition out there is the 2019 edition. This is absolutely free. It's a full featured IDE. So when we do the download there, what we're getting is just the little local file that we can work with and you do need to still be connected to the internet when we run this. So I'm going to open the installer locally here and let it do what it's going to do. Now this part is important. Once it gets ready to install, you want to choose the workloads that Visual Studio is going to have locally. For what we're going to do in this class, make sure to check ASP.NET and web development. Now if you want to use this application to do other types of development, you want to choose some other workloads. For example, if you work in the cloud, you would choose Azure Development or Node.js if you do that. There's a whole list of individual workloads right here. Notice that there's also a tab for individual components. So this tends to be certain tools that are part of other types of development. Now if you don't get this right the first time you install, don't worry. You can always go back through the Visual Studio installer and add or get rid of certain features later on. But for what we're going to do, just make sure that we've got ASP.NET and web development checked and hit our install button down on the bottom and we'll let that go through and do what it does. And when it's through, we'll come back and look at what the IDE should look like when we launch it. Alright, so once Visual Studio installs, you should be presented with this screen that invites you to connect to your developer services. Now it's not required, but if you do, the great thing about this is this syncs your installs over all the devices you work on. So if you have a particular way you like the Windows setup or a particular font or font size or any of that about the configuring of the IDE itself, you can sign in and that's automatic. It also gives you access to your Azure services if you have an Azure account. Just for simplicity though, at this point, I'm just going to say maybe later and then you have the option on how to set the color theme. This is also changeable later. So I'm just going to leave the default and we'll let Visual Studio bring itself up. So here's our welcome screen and you can see the options under get started. Now we just want to make sure that we can create the kind of project that we want here. So I'm going to go here and look for my templates and search for web and yes we do have web applications. So that's going to allow us in this class to work on the front end piece. But notice there's also choices of backend languages and backend frameworks. So we have a good Visual Studio install. Thanks for watching. Stay tuned for the next lesson. We're going to explore using the browser's F12 tools to dig into the code that makes up our web page.
