From the course: JavaScript: Scope

Setup for this course - JavaScript Tutorial

From the course: JavaScript: Scope

Start my 1-month free trial

Setup for this course

- [Instructor] As we work through our examples, we'll need to test our code on the browser and see it in action. If you're using VS Code, and would like to have the same tools I'm using, follow along. Otherwise, feel free to skip this video or install similar tools in your editor of choice. Open up Visual Studio Code and go to the extensions tab. Find the extension Live Server. This is the one we need to install. When you have the extension Live Server all you have to do is click on the little button at the bottom of your screen here to start a Live Server right away, without doing anything like NPM servers and stuff like that. It will start your server directly from VS Code. Let's go ahead and install this and then reload. That's going to create a new folder on our desktop so let's get out of VS Code, create a new folder and we'll call this scope. We'll open that inside VS Code, so let's go back to VS Code go to Explorer, click on Open Folder, go to Desktop and open scope. Inside of that directory we'll create two new files. One will be the index.html and the second one will be a JavaScript file, so let's call this the index.js. Let's call this welcome. What we'll do inside of the index we'll create a new HTML document and we can use the Emmet shortcut doing doc, and then do a tab, and we'll get our HTML template completely done for us. What we could do after that is at a script tag, right here, inside of the body, you can add a script tag like that and leverage Emmet one more time. What we'll do is put the source as the index.js and let's put a little title here so Javascript scope. And save all this and then let's do a console.log to validate that everything is working fine. Inside of our index, we'll do, Hello. Let's save that. Let's go to the index and do Shift + Command + p and type live, and click on Open Live Server. To bring up the developer tools in Chrome for Mac it's Command + Shift + i, and for Windows it's it's Control + Shift + i. Once you have that, let's take a look at the console, that's okay. Them we have our Hello, so this means that our server is working. If you wanna close the server all we have to do is click on the port below, here. If you wanna start it, usually you should have something to start it here. So let's stop it, now you have the go live. The first time you install the Live Server, it's a possibility that you're not going to see this here if you don't, simply do Shift + Command + p to bring up the commands inside of VS Code and then look for live and then open with Live Server and it's going to start your server again. Awesome, so now we're fully set up with Live Server and ready to learn how JavaScript scoping works.

Contents