How To Link an External JavaScript File to an HTML Document
Articles,  Blog

How To Link an External JavaScript File to an HTML Document


– [Instructor] It’s
very common to keep all of your JavaScript files
separate from your HTML files. This helps you organize everything, especially once your files
start to get really big. Make sure that when you
create your JavaScript file, you don’t put your HTML, CSS,
or anything else in there. Just use JavaScript for now. We can see here in this document, I inserted some JavaScript
at the top here. You have a document.write command. If we save this page and open it, we can see that our
JavaScript will be opened up at the very top of our page here, for our webpage content. Now, what we’re gonna do in this lesson is we’re gonna take this JavaScript code, and make it into a separate file, and import that file
into our HTML document. So, the first thing I’m gonna do is here is I’m gonna create the
JavaScript we had before, and I’m gonna create a new file and call it js. We’re then going to open
up that Notepad file, and we’re going to file save as js.js. It is important you have that
JavaScript file extension for this file in order
for our computer to know that it is, indeed, a JavaScript file. We see here that now
that file is different, and we can delete our old
Notepad file we had before. We are now gonna open up and
edit our new JavaScript file in our Notepad++, or whatever
code editor you have. We’re then gonna take our command here, we’re gonna copy and paste it, and we’re gonna paste it
into our new JavaScript file. We’re gonna delete what we have here. And, next up, we are going
to add some new tags. We’re gonna add a head tag here, and basically, the head tags you don’t need to worry about now, we will explain it later. But, just for now, in the head tags, we are actually gonna
import our JavaScript. So, let’s look at this
command a little bit deeper. Now with this command, in the quotations, what we do is write the file path to our external JavaScript file. You remember, I named our file js.js, so, as long as our file here is in the same folder
as our HTML document, all we have to do is
put the name of a file, plus the extension,
which, in our case, is js. Before you preview this, make sure that you save
your HTML document, as well as your external JavaScript file. We can see here that our JavaScript code is now displaying correctly
in our external sheet. One thing that I’m going
to point out really quickly is that the placement that we have our JavaScript on our webpage can dramatically affect performance and the loadability of our webpage. Generally speaking, you
want to put your JavaScript at the bottom of your
webpage, if possible, so I’m gonna add some footer tags here, and I’m gonna place my
JavaScript source file in here. So, now what happens here, is that the webpage
content will load first, and then our JavaScript
file will load right after. We can see here that
now our JavaScript code is placed at the end of the document, instead of appearing at the top. If at all possible, you always
want to place it at the end. So, for the rest of this course, I’m going to be creating all our lectures, and all of the coding content using external JavaScript files. If you need help with this, or you just can’t get this to work, then please consult the teacher files that I will add to
download that you can do. So, to sum things up for this lecture, try to keep your
JavaScript an external file that is separate from your HTML and CSS. This will help you a lot as
your projects get bigger. If possible, inserting
your source code at the end of your HTML document will
let the HTML load first, and the JavaScript separate, increasing performance and page load speed of your website. Try linking your own external JavaScript file for practice, and see if you can get
it working correctly. Once you are finished this, I will be waiting for you in
the next lecture of the course.

15 Comments

  • Landon Mennemeyer

    so I'm a new programmer and have been wondering. do I need a separate is file for each piece of code? like if I make a picture slideshow with js do I need a seperste file for a signup menu? or can I use multiple references in a single file?

  • MakerJake

    Hey Robin, somehow this video is most of the reason my video on the same topic got so many views cause it's in the suggestions! Thx.

  • Aprishiela Hartono

    Thank you. i use your advice <script src="js.js"></script> now the Javascript file works:) i used to follow <script src="scripts/js.js"></script> and the javascript file wasn't working, a bit confusing because src="scripts/js.js" works for other people

  • reaperqnu

    Thanks for the tips. An extension: are you aware of any hosting service where we can put our external .js and .css files? I need to refer to these from my blogger post for example, but as of the moment, both Google drive and Dropbox hostings and links do not work as I've tried them. Any suggestion is much appreciated!

  • Pro Gamer

    Great video <3 I would like to thank you very much I was struggling with trying putting the code before </body> but it doesn't work but inside footer it works thanks bro!

  • Cecil D. Blount

    Hello sir,
    I have a very large file i use, that displays 8 clocks across the top of my web page. Can I save the html as a *.js and run it as a script. I notice you said to place it at the bottom, but it needs to be at the top. So using the info presented in you video my clock file gets renamed from clock.html to clock.js and then follow the instructions in your file.

    I hope that is correct.

    thank you

  • Techno Vedant

    Hi…i have a share java script code <script>Website2APK.shareIntent();</script>…..can you guide me how this script put into my html page

Leave a Reply

Your email address will not be published. Required fields are marked *