Calling Javascripts From The Support-Files

I see a lot of web pages that have the javascripts in the head section of their pages, rather than in the support-files folder. Why? Well, possibly because it's easier, or the webmaster just doesn't know how to call a script from that folder correctly. So for those of you that DON'T know how to do it, this page should help.

There are definite advantages to having your javascripts stored in the support-files folder.....

• Less code on the web page. Some scripts can be quite hefty in size.
• Faster. The browser caches a script when it first encounters it. So if it's one that's used multiple times (say a "print this page" function)on different pages, it only grabs the code the first time, and reuses it. Much quicker!
• Ease of modifying. Some scripts have parameters that you can change. Having the script stored in the support-files folder means you only need to change it in one place, rather than every occurence on multiple pages. Just the same as using an external stylesheet really.

Do An Example

I think after you have done this once, then you are going to see how it works, so lets use an actual working example. On the Free Javascripts page, there is a script for listing your links in another window. I have placed this in the head of the page, so you can see what it looks like, and how we are going to get it to work from our support-files folder.

So take a look at the source code for that page, and note what I have put in the head section. You will see all the code for the link script. Now, that would be quite inefficient, if I wanted to have that code on EVERY page of my site.

So firstly, grab the entire code for the script, and paste it into notepad or some other plain text editor. You will have this.

<script type="text/javascript"> <!-- Begin function showlinks() { text = "The following links are available on this page:<hr>"; windowprops = "menubars=no,location=no,toolbars=no," +"scrollbars=yes,width=350,height=350,top=100,left=100"; self.name="main"; for (i=0; i<document.links.length; i++) text += "<p><a target='_new' href="+document.links[i]+">"+document.links[i]+"</a>"; linkswin = window.open("","",windowprops); with (linkswin.document) { open(); write(text); close(); } } // End --> </script>

Now, you need to remove the script opening and closing tags. These will be used on the actual page later. The actual script starts from the word Function. And it finishes with the last curly brace. The begin and end that you see on javascripts are there as comments to hide the script from browsers that aren't compatable....so dont remove those bits. Now save it as a .js file to the support-files folder. Call it what you like, lets say xyz.js. Next thing is the part that needs to appear on your page, in this case its a button.

important note! The javascript name has to be all lowercase, as SBI will convert capitals to lower case. You may have also noticed the original function was called "showLinks"...I changed it to "showlinks" So if you get a script from the internet, ensure you change any capitalization in the file name.

<form> <input type="button" value="View a List of Links" onClick="javascript:showlinks()"> </form>

This isn't meant to be a technical description of how javascripts work, but we need to understand a few things. The "onClick" is whats known as an event handler. In other words, it will trigger an event. In this case, the event is to grab a javascript function called "showlinks", when the button is clicked, and then execute that function. Okay, so that part is fine, but how does the onClick know where the showlinks function is located?

One Last Part To Add

We need to add one little line of code to the page, just above the button code will be fine. Those that upload their own HTML can place this in the head section if they prefer.

<script language="JavaScript" script src="support-files/xyz.js" type="text/javascript"> </script>

Now you have everything needed to make that button work! It will be visible on your page, and will work just fine. Notice three things were specified in that last piece of code. The language, the script source, and the type. Now if you wanted to add the show links to every page, it's easy. And no clogging up the head of your pages anymore with javascripts. I hope that helped those of you that didn't know how to do this....no more excuses.

Note that when the javascript code was in the head of our page, we made no reference to the location of the script. There was no need to, it was on the page already. However, as soon as we moved it to the support-files, we needed to tell the onClick code where the js was. Quite logical really, if you think about it.

A Recap

You find a script that you like on the internet, and want to run it from your support files. Most have two parts. One that goes in the head of your page, and the second part to go in the body of your page.

*Take the head section of the code, copy into notepad, remove the start and end script tags, then save as a .js file using a name of your choice. This is placed in your support-files folder.

*Next place the body section of the script on the page where its needed.

*Above this, (or in the head section of your page, depending on where it works best) place the

<language="JavaScript" script src="support-files/xyz.js" type="text/javascript"></script>

and change the xyz to the name of your script.

If you found this, or any other pages to be useful to you, why not let me know? Also, anything else you would like to see, let me know that too.
(for those who want to be pedantic about such things, the script language="javascript" is actually optional, as long as the script src is specified. However, for validation purposes it should be included.)