Categories:

General syntax for creating JavaScript libraries

All JavaScript libraries consists of two parts 1) The library itself, which is simply a file, saved with the extension .js, that contains some JavaScript code, and 2) A <script> tag, defined on the page(s) that uses the library, used to "connect" to the library. For the sake of our discussion, let's pretend you've just created a fabulous code that writes out today's date:

<script>
function todaydate(){
var today_date= new Date()
var myyear=today_date.getYear()
var mymonth=today_date.getMonth()+1
var mytoday=today_date.getDate()
document.write(myyear+"/"+mymonth+"/"+mytoday)
}
</script>

Using the above code, lets create a library out of it, so multiple pages can all display a nice date without having to physically include the above code on that page.

Step 1: Open up your text editor (such as notepad), type out the above code, and save it as an individual file with the extension .js (ie: displaydate.js). Type out everything above, except the surrounding <script> tags.

Step 2: On all pages that use the above library, create a reference to it by using the below code. It consist of a <script> tag with the optional src property included inside:

<script src="displaydate.js">
</script>

By including the above reference, your browser will now download the code stored inside displaydate.js, and run it as if the code was physically typed onto the page. The library file does not have to be stored in the same directory as the page using it. In fact, you can even reference a library that's on a distant domain!

<script src="http://www.yahoo.com/displaydate.js">
</script>

Now, as mentioned in the beginning of this tutorial, NS 2 and IE 3 do not support external JavaScript libraries. So what do you think will happen when these browsers sees the above reference to a library? Absolutely nothing! To them, its just a no-good script that contains no code inside of it, which works to our advantage (degrades well).

While the biggest reason for using JavaScript libraries is obvious (allows you to easily distribute one code for use on many pages), a secondary reason is not. A JavaScript library, when used on multiple pages, is actually more efficient than directly embedding the code inside the library on each page. Once the browser encounters the library the first time around, it saves the containing code in cache. Subsequent requests for the library on other pages will result in the library being loaded from cache, or the speed demon!