Using External ".js" Files

You may have noticed that all the scripts on this site are installed by adding lines like

<SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Layer.js"></SCRIPT>

Well what this is is an external ".js" file. It is just a text file that contains functions to execute the code of the script as opposed to having all the script in the document itself.

The reason this is done is twofold.

The first is that certain files contain "core" functions. These provide cross browser functions that are the same in all scripts. Instead of writing the same code over again in different scripts all you have to do is link to the file containing the functions needed.

The second is download times. If you have several scripts on several pages then just as web pages are cached, external script files are cached. If you use the script(s) on several pages and the pages are "linked" to the same ".js" files then the download times of the pages should be quicker.


Linking to external ".js" files is very similar to including an image in your web page. Consider the following image tag.

<IMG SRC="images/home.gif" WIDTH="100" HEIGHT="30">

The SRC="some image" tells the browser where to look for the image. This SRC= is looking for an image called "home.gif" in a folder called "images". This is known as a relative reference. The image is defined relative to the HTML page that contains the link. For example if HTML the file is

http://www.myweb.com/my_folder/index.html

then the browser will look for the file in

http://www.myweb.com/my_folder/images/home.gif

When you upload the file from your PC to your WEB host you must also upload the image file to the correct folder on your WEB host.


External ".js" files work in the same way except the tag to link to them is slightly different. Take a look again.

<SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Layer.js"></SCRIPT>

The thing to note is there is a <SCRIPT> tag and a closing </SCRIPT> tag. It is very important you do not miss the closing tag as anything between the <SCRIPT> and </SCRIPT> tag will be ignored by the browser.

<SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Layer.js"> This is Ignored </SCRIPT>

This is why the closing </SCRIPT> tag is important. If you forget it you could end up with nothing at all appearing in your page.

In the above link there is LANGUAGE="javascript" This tells the browser to interpret the text in the file as JavaScript functions (as opposed to say VBScript).

The SRC="javascript/JSFX_Layer" is the same as for the img SRC. It is telling the browser to look for the file "JSFX_Layer" in a folder called "javascript".

You do not have to use the name "javascript" for the folder. For example

<SCRIPT LANGUAGE="javascript" SRC="my_scripts/JSFX_Layer.js"></SCRIPT> will look for the file "JSFX_Layer" in the folder "my_scripts".

Again the references are relative, so if your page (that contains the link) is at

http://www.myweb.com/my_folder/index.html

Then the browser will look for the file in

http://www.myweb.com/my_folder/my_scripts/JSFX_Layer.js

Just like for images, when you upload a file from your PC to your WEB host you must also upload the ".js" file the the correct folder as well.


All the url's we have used so far are "relative". The link is relative to the page in which they are defined. Sometimes you need to use an "absolute" reference. This may be because you want to place all the scripts in one folder and be able to reference them regardless of the folder the containing web page is located.

For example

http://www.myweb.com/my_folder/index.html
http://www.myweb.com/another_folder/index.html

If you want both files to link to the exact same file you could use an absolute URL (note the LANGUAGE= has been omitted for readability and should be in the tag).

<SCRIPT SRC="http://www.myweb.com/javascript/JSFX_Layer.js"></SCRIPT>

If you place this link in both files they will refer to the exact same file. Again, if you upload HTML files that contain links, you must also upload the ".js" files to the correct folder.


Another reason for using absolute URL's is if you are using a service such as ezboard where you want to install a script but you are not allowed to upload files directly to the ezboard web server. In this case you would upload the file to your own web server and then make the link from the ezboard HTML file to the file on your web hosting server. For example, if your link looked like this.

<SCRIPT SRC="http://www.myweb.com/ez_scripts/JSFX_Layer.js"></SCRIPT>

Then you would have to upload the file "JSFX_Layer" to the folder "ez_scripts" to your web server at "www.myweb.com"