Hi everybody. Welcome back. Today, we're going to talk not about new concepts, but really, putting our code in the best place to make it easier for you to follow what's going on. So up to this point, we've been putting our JavaScript into the HTML body tag. Now, it's fine to start off that way, but as we get more and more complex, it's going to make your life easier if we separate our content from our other style in JavaScript functions. So, in order to do that, we need to think about where we can put our JavaScript code. And where you can put it, is you can leave it in the body, as we've been doing, you can put your functions into the head section of your HTML code, or you can use an external file. If you decide to put your JavaScript functions in the head section, that's a really great idea, because they're separated from the content and it makes it a little bit easier for you to follow the code that you're writing. It doesn't make any difference to the actual execution, but it just might make the debugging easier. If you're going to use this method, you need to remember that you have to use a script tag. Just as a style tag, tells the browser that your about to add some style to your page. The script tag says. Wait, this isn't content, this is going to be some JavaScript code. If you do this. If you put your code into the head section, don't worry, all of your function will still have access to all the document information, the ID's, the classes, etc. So, let's take a quick look at an example. So as you can see, I've here have my head section and inside there, I have this script ending, script in ending head. You need to make sure that you have the proper tags, if you want your code to validate. Inside this script, I put a very simple function called message. Now, what you need to understand, is when I talk about putting your JavaScript code into the head, I'm only really talking about your JavaScript functions. It's still necessary, down here in the body of your code to call the functions. But still, it's a lot cleaner than having the entire function written down here. Plus, for code reuse, you can now call the function multiple times, but only write it once up here. If instead, you decide to put your JavaScript functions in an external file, then you can use that code multiple times in multiple files. The one thing that's important to remember right from the start is again, when you're using external file, don't use the script tag. It's just the JavaScript, without any script tag. So, let's go ahead and look an example here. Here you can see, that inside the head section, I've gone in and I'm done with my script. But instead of writing the actual function, I've gone ahead and give it a source saying up, all my JavaScript is inside my JS folder, and here's the name of the file that I wanna use. So, if for some reason this doesn't work, you wanna make sure that you're very careful about what you put right in here, you wanna make sure that this is exactly correct, because if the browser can't find the file, then it's not going to be able to run your JavaScript. So let's say, you do have a typo in your link to your external JavaScript file. Well, the problem with this, is that, it's actually harder to realize what's going on. If you mess up in your HTML code or your CSS code, it's usually pretty easy to figure out that you did something wrong, because the colors aren't the way you wanted or your text just isn't there. But with JavaScript, sometimes the changes you re making are so slight, you don't even realize that you have a problem. So, it's very important, as your code becomes more and more complex, that you're using the console to debug your code. The console really is your friend. I can't stress enough how much you always want to have it,on while you're coding. Myself, sometimes I forget to turn it on and I'm annoyed later, when I could have found my errors so much more easily. Another way that we can talk about separating your code into this external file from your HTML, is to use these different types of software options, such as CodePen. When you use CodePen, you're able to separate, have a separate window for your HTML, your CSS, and your JavaScript. What's great about this is, it lets you see all of your code at once and see in real time what's happening as you change that code. The downfall of this, for when you're first getting started, is that, I find that sometimes people don't realize that they don't understand how to link their code, out there in the real world. So, if you're going to use CodePen, I always recommend that once you're done, go ahead and take that code and put it into three separate files, so that you're sure you know how to link them together. Let's take a look. So as you can see here,I have one window for my HTML code. One, for my CSS and one for my JavaScript. And code pen, takes care of all the work of making sure that they're all together. If this is your first time ever using code pen, I did wanna point out,that there's this handy little function, that you can re-size the windows. So, if you're not too concerned with your CSS right now, you know it's the way you want it to be, you can kinda make that smaller. And really kinda focus, on what you're working on, in the html and the JS. All right, so let's go ahead and review what we talked about today. The first thing, is that you need to feel comfortable with the idea that your JavaScript code can appear in the head. Or the body of your code, or very often in both. Code, can also be placed in an external JavaScript file. If you do this, just make sure that you've linked the files correctly together, otherwise you might have some issues trying to figure out why your code isn't working. Luckily, the console can tell you, if it can't find that file and it leads you down the right path to fixing your code. Personally, I always develop in the same file. I tend to have my HTML and my JS in the same file, while I'm doing my testing. Once I'm done, I move it out into an external style sheet. It's really up to you to determine which style you like best. Whether you like your JavaScript in the same file or in a separate file. There are benefits to both. And the most important thing for you right now, is to develop the confidence that you can get your JavaScript working, in whatever way, it best suits you. Good luck.