Free Web Hosting by Netfirms
Web Hosting by Netfirms | Free Domain Names by Netfirms

Javascript Tutorial: Libraries


Welcome to Xpounded no frills tutorials
In this tutorial I will talk about JavaScript Libraries
Libraries ARE NOT traditional JavaScript Class Collections,
but they ARE resource repositories.

Want to make the most of reusable code?
Build JavaScript libraries and then when you want functionality it's ready to run.
A JavaScript Library is a Single Instance Object in respect to its execution space.
I mean, it is an object, but it is not a tradtional class induced object (it is not instantiated from a general class) and as such a library dose not support the new keyword.

A traditional JavaScript class (an object factory, not a library)
function math(){
	this.fib=fib
	this.fact=fact
	function fib(N){		//fibonacci
		var ret=1
		if(N>2){
			ret=this.fib(N-1)+this.fib(N-2)
		}
		return ret
	}
	function fact(N){	//factorial
		var ret=1
		if(N>1){
			ret=N*this.fact(N-1)
		}
		return ret
	}
}
Usage: 
	var m = new math()
	alert(m.fib(3))

Notice that you have to create a variable to hold the object, 
	then you have to instantiate the object using the
	new keyword BEFORE you can use it, 
	and you only have access to the object through the variable 
	that you used to instantiate the object.
Also notice that you can instantiate as many copies as the system 
	will allow, which dose not make sense when you have a situation 
	where you will never need more than one copy of the object.


Enter the Library.

A JavaScript Library (an object)
math = {
	fib: function(N){		//fibonacci
		var ret=1
		if(N>2){
			ret=this.fib(N-1)+this.fib(N-2)
		}
		return ret
	},
	fact: function(N){	//factorial
		var ret=1
		if(N>1){
			ret=N*this.fact(N-1)
		}
		return ret
	}
}
Usage: 
	alert(math.fib(3))

Notice that you DO NOT instantiate the object before you use it.
	The object is already instatiated and ready to go.
Also notice that you have only one copy - the object itself.


The physiollogy of a JavaScript Library

The library must have a name, and the name should give you a hint as to what the libray holds.
Library Skeleton:
	math = {

	}
Library member elements:
	Every member element of a library is a library resource (or simply a resource).
	A resource is any name-value pair held in the library.

	A Library can hold all kinds of resources - 
		strings, functions, values, even objects.
		(each resource must have a unique name)

	For example, lets add the value of PI to the math library 
		(We will borrow the actual value from the Math object)

	math={
		PI: Math.PI
	}
	Examine the resource (member element) PI in the math Library,
	The resource is called PI, and the resource name (PI) is seperated 
		from its value (Math.PI) by a colon.

	Every resource in a Library must have both a unique name and a value.
	Every name-value pair must have a colon seperating the name and value.

	Let's add a simple message resource to the Library
	math={
		about: 'The simple math library made for informational purposes only',
		PI: Math.PI
	}
	Here we have added a string resource to the math library
	Did you notice that when there is more than one resource in a library, the
		resources are seperated by commas?

	Library resources (name-value pairs) are always seperated from each other by commas.

	Add a fuction to the library (a function is just another resource),
	math={
		about: 'The simple math library made for informational purpose only',
		PI: Math.PI,
		fact: function(N){	//factorial
			var ret=1
			if(N>1){
				ret=N*this.fact(N-1)
			}
			return ret
		}
	}
	Notice that the resource name is the functions name, 
		and the this keyword (used at this level) refers to the library.

	By now you see how easy it is to add resources to a library.

	Lets add one more function:
	math={
		about: 'The simple math library made for informational purpose only',
		PI: Math.PI,
		fact: function(N){	//factorial
			var ret=1
			if(N>1){
				ret=N*this.fact(N-1)
			}
			return ret
		},
		fib: function(N){		//fibonacci
			var ret=1
			if(N>2){
				ret=this.fib(N-1)+this.fib(N-2)
			}
			return ret
		}
	}
	The thing to notice is that the functions fact and fib are 
		resources (name-value pairs) seperated from each other by a comma.
	
	With the slightest bit of simple vodoo,
	you can easily add an object factory to the library if you want.
	math={
		about: 'The simple math library made for informational purpose only',
		PI: Math.PI,
		fact: function(N){	//factorial
			var ret=1
			if(N>1){
				ret=N*this.fact(N-1)
			}
			return ret
		},
		fib: function(N){		//fibonacci
			var ret=1
			if(N>2){
				ret=this.fib(N-1)+this.fib(N-2)
			}
			return ret
		}
		point: function(x,y){
			var mypoint=new function(){
				this.d="op"
				this.radix=Math.sqrt(Math.exp(x,2)+Math.exp(y,2))
				this.theta=Math.tan(y/x)
			}
			return mypoint
		}
	}
	Here the resource point is really an object factory 
	(a traditional JavaScript Class Object).

	Notice that the keyword this now refers to the function, and not
	the library while control is inside the function constructor
	routine.

	In the case of an object factory, you would call the library resource
	just like you would any other class using the new keyword.

	Example: var g = new math.point(2,3)

	While there is only one math library, there can be multiple point objects
	created from the point resource (it is an object factory).

Ok, I have a Library, now what? Now you can save the library with a *.js extension and include it any time you want to use its functionality. (Its easier to remember what a file does if you give the file the library name.) Using the simple Library: (You use the library by using its resources) <script language='javascript' src='somepath/math.js' ></script> alert(math.about) //dispays the about message alert(math.PI) //displays the value of pi alert(math.fact(5)) //displays the 5th factorial alert(math.fib(6)) //displays the 6th fibonacci number var g = new math.point(2,3) //creates a point object alert(g.radix) //displays the point radix All in all, JavaScript libraries are easy to use and maintain. You can use them like any other javascript, either internally or from an extrnal file. Well, thats it for Libraries. If you like this let me know and I'll make more tutorials.

All spelling and grammatical errors you may find are a reflection of my laziness and your anal-retentive nature
- Copyright 2003 Xpounded -
All JS code developed by Xpounded is developed in RHSCoder.
All VBS code developed by Xpounded is developed in VBS QuickDev IDE, or RHSCoder.
Privacy Statement
Feedback