How To Link an External JavaScript Files to an HTML Document

Robin Haney
A free video tutorial from Robin Haney
Professional Freelance Web Developer and Instructor
4.4 instructor rating • 4 courses • 165,268 students

Lecture description

So far we have been including our JavaScript directly into our HTML document which is fine but it's best to keep our JavaScript in an external file, just to keep things organized.

In this lesson I am going to show you how to create an external JavaScript file and connect it to your HTML document.

Learn more from the full course

JavaScript For Beginners - Learn JavaScript From Scratch

Learn The JavaScript Programming Language Completely From Scratch Without Frameworks

03:05:09 of on-demand video • Updated December 2019

  • JavaScript Variables and Strings
  • How To Work With Numbers in JavaScript
  • Conditional Statements
  • JavaScript Functions
  • JavaScript Loops
  • JavaScript Arrays
  • JQuery
English [Auto] It's very common to keep all of you kept secret files separate from each other. This helps you organize everything especially once you start to get really bad. Make sure that when you create your javascript file you don't it the most useless in the US and there just use javascript for the we can see here in this document. So it's just to get at the top here. We have a document directed at you we save this page and open it we can see that or just will be aware up at the very top of our pager for a web page at now. Well we're going to do even this lesson is we're going to take this job search code and make it into a separate file and import that file in one document. So the first thing I want to do here is only read the transcript we had before. Now when to create a new file and Code Geass we're then going to open up that note pad file and we're going to file C as. Yes it is important to have the javascript file extension this file appear to know that it is indeed a script file. We see now that it was different. We can do the. Oh no. We had before. We are now going to open up an already javascript file in our notepad plus plus or whatever editor you have We're going to take our command here. We're going to copy paste it and get it fixed into a new javascript and delete what we have here. And next up we're going to add some new takes to add a head take here. And basically the hash tags you don't need to worry about now. We will explain that later. But just for now in the head case we are actually going to import our deficit. So let's look at this comment a little bit deeper. There was this command and the quotations. What we do is write the file path to our external javascript file. You remember I need a file. G s g s. So as long as our file here is in the same folder as the document we have to do is put the name of a file the extension which is our case. Yes. Before you preview this. Make sure that you save your HMO document as well as your external Jobs file. We can see here that are just the code is not the same correctly in our system she. One thing that I'm going to point out really quickly is that the placement that we have our javascript on our web page can dramatically affect performance and the ability of that web page. Generally speaking you want to put your Jeffcott at the bottom of your vocation if possible so we can add some takes here and I'm going to place my javascript source file in there. So now what happens here is that the web page content will first in the air rescue file or right and you can see here that now our code is placed at the end of the document the period at the top. At all possible you always want to place it at the end. So first of course I'm going to be treating our lectures all the coding content using external javascript facts. If you hope at this you just can't get this to work then please consult the teacher files to Delon. You can be of so something's up. Try to keep your script an external file separate from it each time out in S. This will help you a lot as your pots get bigger if possible your source code at the end of your issue will document that is Tomales first obscurer cruising performance and pictures of your website. Try linking your own excitement as you prefer. Practice is leaving it at work correctly when you finish. As we wait for you in the next lecture of the course.