How to Create and Use External JavaScript Files

Placing JavaScript in an external file is an efficient web best practice

Placing JavaScripts directly into the file containing the HTML for a web page is ideal for short scripts used while learning JavaScript. When you start creating scripts to provide significant functionality for your web page, however, the quantity of JavaScript can become quite large, and including these large scripts directly in the web page poses two problems:

  • It may affect the ranking of your page with the various search engines if the JavaScript takes up a majority part of the page content. This lowers the frequency of use of keywords and phrases that identify what the content is about.
  • It makes it harder to reuse the same JavaScript feature on multiple pages on your website. Each time you want to use it on a different page, you will need to copy it and insert it into each additional page, plus any changes the new location requires. 

It is much better if we make the JavaScript independent of the web page that uses it.

Selecting JavaScript Code to Be Moved

Fortunately, the developers of HTML and JavaScript have provided a solution to this problem. We can move our JavaScripts off of the web page and still have it function exactly the same.

The first thing that we need to do to make a JavaScript external to the page that uses it is to select the actual JavaScript code itself (without the surrounding HTML script tags) and copy it into a separate file.

For example, if the following script is on our page we would select and copy the part in bold:

<script type="text/javascript">
var hello = 'Hello World';
document.write(hello);

</script>

There used to be a practice placing JavaScript in an HTML document inside of comment tags to stop older browsers from displaying the code; however, new HTML standards say that browsers should automatically treat the code inside of HTML comment tags as comments, and this results in browsers ignoring your Javascript.

 

If you have inherited HTML pages from someone else with JavaScript inside of comment tags, then you don't need to include the tags in the JavaScript code that you select and copy.

For example, you would only copy the bold code, leaving out the HTML comment tags <!-- and --> in the code sample below:

<script type="text/javascript"><!--
var hello = 'Hello World';
document.write(hello);

// --></script>

Saving JavaScript Code as a File

Once you have selected the JavaScript code you want to move, paste it into a new file. Give the file a name that suggests what the script does or identifies the page where the script belongs.

Give the file a .js suffix so that you know the file contains JavaScript. For example we might use hello.js as the name of the file for saving the JavaScript from the example above.

Linking to the External Script

Now that we have our JavaScript copied and saved into a separate file, all we need to do is reference the external script file on our HTML web page document.

First, delete everything between the script tags:

<script type="text/javascript">
</script>

This doesn't yet tell the page what JavaScript to run, so we next need to add an extra attribute to the script tag itself that tells the browser where to find the script.

Our example will now look like this:

<script type="text/javascript"
src="hello.js">
</script>

The src attribute tells the browser the name of the external file from where the JavaScript code for this web page should be read (which is hello.js in our example above). 

You do not have to put all of your JavaScripts into the same location as your HTML web page documents. You may want to put them into a separate JavaScript folder. In this case, you just modify the value in the src attribute to include the file's location. You can specify any relative or absolute web address for the location of the JavaScript source file.

Using What You Know

You can now take any script that you have written or any script that you have obtained from a script library and move it from the HTML web page code into an externally referenced JavaScript file.

You may then access that script file from any web page simply by adding the appropriate HTML script tags that call that script file.