Setting Up VS Code0:00
So far, we've been working within DevTools, which is great for learning and for instant feedback. Now, we'll still make heavy use of DevTools, but I think it's a good time to start getting used to writing code in a dedicated coding environment. I personally use Visual Studio Code, but any other editor or IDE should be just fine. So I have an empty folder here. Let's go ahead and open this up in VS Code. So I'll just drag this into the VS Code icon. And we can create a new index.html file in here, index.html. Now VS Code comes with Emmet by default.
And we can create a new index.html file in here, index.html. Now VS Code comes with Emmet by default. So if I type ! and hit tab or enter, that will scaffold out some HTML for us. So let's just update the title, let's say JavaScript, the first steps, and let's put some content within the body. So I'll just put a <p> tag, and I'll just put this is some content. Okay. Now to preview this in the browser, we can go back to Finder and just double click it. So let's go ahead and do that.
Adding Script Tags0:56
Now to preview this in the browser, we can go back to Finder and just double click it. So let's go ahead and do that. And it should open up in our default browser, which is Chrome in my case. So every time we make a change in our code, we have to refresh this page here to see the changes. And I'll show you an extension at the end of this video, which can do that automatically for you. So now to execute any JavaScript code that we write, we have to make use of a <script> tag. Let's go back to Visual Studio Code here, we have to add a <script> tag.
tag. Let's go back to Visual Studio Code here, we have to add a <script> tag. And that can be either in the <head>, so somewhere within this <head> tag, or we can put it before the closing </body> tag. So somewhere down here. So for now, I'll put it here, and I'll explain the differences in a second. So let's put a <script> tag here. And we can either do an inline script, or we can point to an external file. For now, let's do an inline script. So we have the <script> tag, and anything you write in between the <script> tag will be executed.
For now, let's do an inline script. So we have the script tag, and anything you write in between the script tag will be executed by the browser. So how about we just make a new variable here, say const name equals my name. And I'm going to put a ; here, and a ; represents the end of a statement. And so far in DevTools, we haven't been adding ;. But now that we're within a coding environment, I'll try to make sure to add them at the end of each line. Now, they are optional. So if you don't add them, your code will still run fine.
Now, they are optional. So if you don't add them, your code will still run fine. But if you're just starting out, I think it's a good idea to add them. And then later on, when you have more experience, you can decide whether or not you want to use them. And how about we just alert our name here, so we can see a pop-up in the browser. So alert name, and again, I'll add my semicolon here. So if I save that, let's go back to the browser here. Let's refresh this. So on a Mac, I'm hitting Command R, and we can see our JavaScript execute.
Using External Scripts3:06
external scripts with inline scripts. So let's just create a new script here. And we'll make use of script. And this time, we'll put a source attribute on it, so src. And then we can reference our external file here. So I'll just name it script.js. And we can create that file here, new file script.js. And now anything we write in here will get executed as well. So how about we console.log external script. Save that.
So let's check that out in the browser. Let's refresh. And we get external script and then the inline script here. And if you actually look on the right, you'll see where it executed from. So this one comes from script.js, and this one comes from the inline style or inline script. And we also have the option to pull in external scripts from anywhere on the internet. So this is a common way to pull in external libraries or packages so we can make use of them in our project. So I have an example here for lodash, which is a utility library, which has a bunch of
And you can see we have script source. It's pulling it in from this URL here. And don't worry too much about these other attributes here. It's just for added security. So now we should have access to lodash within either this script here or this script here. So let's just put it in our inline script here. Let's make another variable called camelCase. And I'll make use of one of lodash's methods here. So to use lodash, after you imported it, you can use the underscore and then make use of any of its methods.
So this one should be string. And this one too, let's put a semicolon here, and this string within here should be converted to camelCase. So let's save that, go back to our browser. Let's refresh this. And you can see it does work here. And just to show you that it won't work, if I were to remove this import up here, let's get rid of this, let's save and let's refresh this, you'll see underscore is not defined. So as you saw, if you have scripts that depend on other scripts, then make sure to import those first.
Script Order and DOM6:23
So I'll put it after the title. So let's paste in that external script. And let's put an inline script as well. Let's just console.log inline script. Okay, let's save that. And this should still work. So if I go back to the browser, refresh, and we get our external script and our inline script. However, if I had any code in here, that depended on the DOM, and remember, the DOM is the document object model.
However, if I had any code in here, that depended on the DOM, and remember, the DOM is the document object model. So basically any HTML within here, then it won't work. So let me show you an example. Let's go to our script.js. And let's write some code here that depends on the DOM. So again, I forgot to add a semicolon here. And if we look at our DOM, we only have one element in here, our paragraph tag. And again, we'll have a whole section on DOM manipulation. But for now, let's just select that one element document.querySelector.
And again, we'll have a whole section on DOM manipulation. But for now, let's just select that one element document.querySelector. And it's just a <p> tag. And how about we add an inline style to it. So element.style, let's just give it a color of 'red'. Okay, let's save that. And what do you think is going to happen here? So if you go back to index.html, within our script, we are trying to reference this down here. So what do you think is going to happen?
here. So what do you think is going to happen? Go back to the browser. Let's refresh. And you can see we get cannot read properties of null. So again, what's happening here is the browser parses the HTML from top to bottom. So it starts at the top. It parses all of this, and it gets to our script tag here. So downloads this, and it tries to execute it. And within our script tag, we're trying to select our paragraph element.
Auto-Reload with Live Server9:30
And let's go ahead and save this. I'm also going to make use of a VS Code extension, which automatically reloads this page whenever we make changes to our HTML or our JavaScript. So if you go to your Extensions tab, and if you go to Live Server or search for Live Server, it's this one here. You can see it's extremely popular with this many downloads. And I already have it installed. So go ahead and install this. And once you have it installed, go back to your index.html. Now if you right-click anywhere here, you'll see this new option with Open with Live Server.
And once you have it installed, go back to your index.html. Now if you right-click anywhere here, you'll see this new option with Open with Live Server. Let's do that. You'll see it opens up our index.html here, but now it's running on an actual server. You can see here, as opposed to just opening it up from our file system. And the advantage of this is we don't have to manually reload. So if I were to make a change in here, change, and if I save it and go back here, you'll see that it automatically updated here without me having to refresh manually. And I believe this should work for JavaScript as well. So if I were to change, let's go back to our file system here, let's change this, change,