Create my own Javascript Library

[gunnarflax]

I 'm trying to create my own Javascript library which I want to be able to access in the same way as you do with Jquery (by writing Jquery.something or $.something). But I can't figure out how that is done. The object Jquery must in someway be created and have access to all window objects, right?

If anyone have any experience in creating your own APIs then any information would be helpful because I've been searching for answers on google the whole day without any luck. Nowhere can I find a tutorial or forum thread on how to do this, how can the information be so limited? Anyway, thank you for your time!

[wrivera]

in order to do this you need to create an object that will contain all your methods that you are planning to use for example.

$={
    getElemById:function(){
        here you write the code to retrieve elements
    }
}

if you wish to chain methods you will need to return your object so you can continue adding on otherwise each call will have to be attached to a new object instance

[gunnarflax]

Thank you very much! Do you have any Idea how to be able to use both a symbol and a word like in Jquery they use both the dollar sign ($) and the name Jquery?

[wrivera]

yep you do this

//keep your object named the same 
myobj={
    method:function(){

   }

}

//here you create the variable $ which is a representation of the myobj so now you can use either or when referencing.
window.$=myobj
//making

[gunnarflax]

Thanks for all your help this far!

I'm not that familiar with javascript yet and I'm still learning so I still have a few questions:

example={	
	example:function(tSource){
		var tName;
		var tTag;
		var tType;
		
		var tArray = new Array();
		tArray['id'] = '#';
		tArray['class'] = '.';
		
		for (i in tArray){
			tTypeTemp = tSource.indexOf(tArray[i]);	
			if (tTypeTemp >= 0){
				tType = i;
				if (tTypeTemp != 0){
					tTag = tSource.substring(0, tTypeTemp);
					tName = tSource.substring(tTypeTemp + 1);
				}
			}
		}
		
		//create an object with the variables
		return target = new tObject(tName, tType, tTag);
	}
}

//Associating eg to example
window.eg=example;

I haven't been able to test if the code above works to get information from the chosen target yet because I'm having some trouble creating the class. Don't I need to create the class somewhere? Or does it get created automatically when I write eg("div#id").get();? I also don't really know how to work with constructors in Javascript, will the function inside the example object be executed automatically - so that the target object is there automatically?

[wrivera]

Thanks for all your help this far!

I'm not that familiar with javascript yet and I'm still learning so I still have a few questions:

example={	
	example:function(tSource){
		var tName;
		var tTag;
		var tType;
		
		var tArray = new Array();
		tArray['id'] = '#';
		tArray['class'] = '.';
		
		for (i in tArray){
			tTypeTemp = tSource.indexOf(tArray[i]);	
			if (tTypeTemp >= 0){
				tType = i;
				if (tTypeTemp != 0){
					tTag = tSource.substring(0, tTypeTemp);
					tName = tSource.substring(tTypeTemp + 1);
				}
			}
		}
		
		//create an object with the variables
		return target = new tObject(tName, tType, tTag);
	}
}

//Associating eg to example
window.eg=example;

I haven't been able to test if the code above works to get information from the chosen target yet because I'm having some trouble creating the class. Don't I need to create the class somewhere? Or does it get created automatically when I write eg("div#id").get();? I also don't really know how to work with constructors in Javascript, will the function inside the example object be executed automatically - so that the target object is there automatically?

javascript does not support classes but it does support objects you can create objects in two ways literal object notation which is what I showed you and the new object constructor works too. If you are use to java or c# you may find that style easier to work with visually speaking.

funciton myObj(name1){
     this.name=name1;
     this.func=function(){
}
}
//you can reference your object using var x=new myObj();
//you can reference your property/method using the dot syntax such //as myObj.func()

since you are working with DOM you will need to create a property that holds the element you are planning to work with. So you will need o loop through all the elements on the page to find the one you want to work with for example

example={
		var elem=[] // or var elem=new Array();
		get:function(elemID){
                     elem.push(document.getElementById(elemID));
                     return this;
                 }
                 Pos:function(x,y){
                      for (var i=0; i<elem.length; i++){
                           elem[i].left=x+"px";
                           elem[i].top=y+"px"
                      }
                      return this;
	         }
	}
//Associating eg to example
window.eg=example;

//example on page
<div id='test' style="position:absolute">

</div>

<script>
eg.get("test").Pos(20,20); 

/* since at the end of each function you return the reference to the object (return this)you can chain additional methods. you should use an array to hold your elements so you can apply methods on multiple dom elements. in this example i use id which should only refer to one object but you could loop through all elements with similar class names and store them in your array.*/
</script>

[gunnarflax]

I'm trying to test what you just told me but I can't write anything between example={ and the first function. I cant create an array there without getting a syntax error in DW, should I just ignore it?

[gunnarflax]

Since you haven't answered yet - I was also wondering how they manage to get the same name for the variables when they send information by POST or GET to a php script? What differs Jquery from other libraries is the variables that are sent are submitted through an object instead of a string as they are in other libraries (compare: "lorem=ipsum" and {lorem: ipsum}). I think it is a much more professional approach and it looks better in the code. But as far as I know it's impossible to retrieve variable names in javascript so how can they get lorem as a variable name in $_POST[] in php?

[gunnarflax]

Many questions...

does

example={
example:function(){}
}

equal an object with a constructor?

[gunnarflax]

Please can anyone help me? I've now Identified the problem and it lies in the part "elem.push(...)". Somehow, I don't know why, I cant push a variable into the array even though it is a "global" variable inside of my library!