External Javascript

There are different situations when you may want to use an external javascript file. One idea may be to reference a single script from different web pages. Another idea may to be to conform closer to the W3C standards. Perhaps the reason is "just because".

Having an external JavaScript page is similar to having an external CSS page. It helps when you have many pages requiring the same information on them. It also helps when you have to edit that particular script. Replacing one page is much faster than editing many pages.

For those people who wish they had SSI available from their host, using an external javascript could be a very good alternative for them as it creates the same effect.

To show how to do an external javascript, this will be an example to show an image onto the page calling the script. This is a very simplified example, but it will show you how an external javascript works.

Right now there is an IMG tag on some of my pages that look like this:

The first step is to create the external JavaScript page. This can be done the exact same way as creating a new HTML page.

FILE > SAVE AS... and give the page a js extension type.

The coding you place on this new page will be similar to what you find in any JavaScript area in the HEAD area of a web page with one exception : you need to include some coding that will "write" the specified data to your web page. Here is the external JS page coding for this example:

No other coding is needed on the external JavaScript page. Just the comment tags and the actual JavaScript coding. The example above will go to the document in use and write the following HTML tags (being the original image tag). Notice the use of single quotes around the filename. These are used since double quotes are already in use around the main tag. Alternating between single and double quotes will prevent browser reading confusion.

Now that the external JavaScript page is created and saved (for example as MyFile.js) in the same area as the HTML web page documents, you can enter the link in the regular HTML documents that will be using it. Replace the regular IMG tag in the regular HTML page with a small script that accesses the external JavaScript page.

Chage this:

To this:

That script line tells the browser to find the external JavaScript file and apply what it finds there to this spot in the page coding.

Seems like a lot of work just to get the image to show up doesn't it? Well, for this example it was, but if it comes down to many pages using the same script which may change frequently, an external JavaScript page is the way to go.