1. Technology
Send to a Friend via Email

Learn Javascript

External Javascripts

Join the Discussion

Questions? Comments?

More of this Tutorial

Using Noscript Quiz Yourself

Introduction

So far all of the Javascripts that we have coded have been placed directly into the file containing the HTML for the web page. This is ideal for the short scripts that we have been working with so far while learning Javascript but when you start creating scripts to provide significant functionality for your web page the quantity of Javascript can become quite large.

Including large Javascripts directly into the web page has two problems. Firstly, it will affect the ranking of your page with the various search engines since the Javascript forms part of the page content which therefore lowers the frequency on your page of the key phrases which identify what your page is about. It also makes it much harder to reuse the same Javascript on multiple pages on your web site as the code would need to be copied to each page and so would any changes made to the script.

It would be much better if we could make the Javascript independent of the web page that uses it.

Moving the Javascript

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>

Some people include the Javascripts coded into their page inside of HTML comment tags to stop older browsers from displaying the code. I haven't covered how to do this in the tutorials so far because the new HTML standards say that browsers should treat the code inside of HTML comment tags as comments which will result in the next generation of browsers ignoring your Javascript. If you do have such tags around Javascripts in pages you have inherited from someone else then you don't need to include them in the Javascript code that you select and copy. Here is an example of this:

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

// --></script>

Once you have selected the Javascript code you paste it into a new file. I suggest that you give the file a name that gives an indication of what the script does or alternatively identifies the page to which the script belongs. You should also give the file a .js suffix so that you know that the file contains Javascript. For example we might use hello.js as the name of the file into which we save the above Javascript example.

Linking to the External Script

So now that we have our Javascript extracted into a separate file all we need to do is to amend our web page to reference the external script instead of code specified in the page itself.

The first thing to do is to delete everything between the script tags. This takes us back to the code that we started with in our first tutorial when we were first learning how to attach Javascripts to our web page.

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

Of course this doesn't tell the page what Javascript to run since there is nothing between the tags. What we do is 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 identifies to the browser both that the Javascript code is to be read from an external file (ignoring the content between the script tags if there is any) and also the name and location of the file that containsd the script (in this example - hello.js).

Of course you may not wish to put all of the Javascripts into the same location as where your web page source is stored. Perhaps you want to put them into a separate Javascript folder. In this case you just modify the value used for the src attribute to indicate the location of the file. You can specify any relative or absolute web address for the location of the javascript source.

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 convert it from being coded into the page into an externally referenced Javascript file.

You can also take any script that you have externalized from one page and use it on a second page just by adding the appropriate HTML tags to that second page.

Past Lessons

  1. Introduction
  2. Decision Making
  3. Functions
  4. Maintain and Test

©2014 About.com. All rights reserved.