How to Easily Create a JavaScript Framework, Part 2
June 5th, 2009 by How to Easily Create a JavaScript Framework, Part 2
Last week, I discussed the importance of the JavaScript programming language, and how it has become increasingly popular among programmers, because its diverse capabilities. As I have previously mentioned, programmers can now more easily create web applications with JavaScript, which is why it is continuing to be learned and utilized. Also last week, I went step-by-step in creating our own JavaScript Framework, in which I entitled “VOZ.” In this week’s post, I will continue with my JavaScript Framework, and add the “legs” to the “feet” of last week’s framework. Essentially, I will take the Framework one step farther, and I add more useful methods, and even some extra fun methods. Please continue reading below to follow the Framework! Please remember to comment, and Enjoy!
What is on topic for today?
- DOM Navigation Part 2
- Extra Methods Just for Fun
1. DOM Navigation Part 2
In the previous part of the series, we introduced the “$$.getById()” method, but for today we are going to create a few more methods in order to deal with DOM in a easier way. Those straightforward techniques are “getByName,” “getByTag,” and “getByClass.”
“getByName” Method
The “getByName” method can take more than one parameter and get all the elements with an specific name.
//Get Elements By Name //It could take more than one parameter getByName:function(){ var tempElems = [];//temp Array to save the elements found for(var i = 0; i < arguments.length;i++){ if(typeof arguments[i] === 'string'){//Verify if the parameter is an string var e = document.getElementsByName(arguments[i]); for(var j=0;j < e.length;j++){ tempElems.push(e[j]); } } } this.elems = tempElems; //All the elements are copied to the property named elems return this;//Return this in order to chain },
“getByTag” Method
The “getByTag” method has the ability of finding all elements with a specific tag name.
//Get Elements By TagName //It could take more than one parameter getByTag:function(){ var tempElems = [];//temp Array to save the elements found for(var i = 0;i < arguments.length;i++){ if(typeof arguments[i] === 'string'){//Verify if the parameter is an string var e = document.getElementsByTagName(arguments[i]); //look for the elemes by the specific tag name and save them in e array for(var j=0;j < e.length;j++){ tempElems.push(e[j]); //Add the element to tempElems } } } this.elems = tempElems; //All the elements are copied to the property named elems return this;//Return this in order to chain },
“getByClass” Method
The "getByClass" method looks for all the elements inside a parent element, or it has the ability to locate elements in the entire page that has a specific class name supplied by the user.
//Get Elements By ClassName //Name is the className //Type is the tag elements we are looking for //Parent is the parent of the specific group getByClass:function(name,type,parent){ var tempElems = [];//temp Array to save the elements found var pattern = new RegExp("(^| )" + name + "( |$)"); //Regular expression to check if the elements have the class //Look for the elements by tagName with the condition of we can chose the parent,select one specific tag or all of them var e = (parent || document).getElementsByTagName(type || '*') for(var i=0;i < e.length;i++){ if(pattern.test(e[i].className)){//if the elements has the className then... tempElems.push(e[i]); //Add the element to tempElems } } this.elems = tempElems; //All the elements are copied to the property named elems return this;//Return this in order to chain },
"checked" Method
This method just checks or unchecks the radio buttons or checkboxes found.
//Check radio buttons or checkbox //Bol could be true or false; checked:function(bol){ for(var i=0;i < this.elems.length;i++){ //Verify if the element is an input type chekbox or radio because they are the object that have that property. if(this.elems[i].nodeName.toLowerCase()==='input' && (this.elems[i].getAttribute('type') == 'checkbox' || this.elems[i].getAttribute('type') == 'radio')){ this.elems[i].checked = bol; //Asigns true or false; } } return this; },
2. Extra Methods Just for Fun
"even and odd" Methods
The "Even" method matches the elements based on their array index e.g 0,2,4,6,8,10.....
The "Odd" method also matches the elements based on their array index e.g. 1,3,5,7,9......
//Match the elements based in their array index e.g. 0,2,4,6,8,10….. //Pretty cool method for stripe tables even:function(){ var tempElems = []; for(var i=2; i < this.elems.length;i+=2){ tempElems.push(this.elems[i]); } this.elems = tempElems; return this; }, //Match the elements based in their array index e.g 1,3,5,7,9... //Pretty cool method for stripe tables odd:function(){ var tempElems = []; for(var i=1; i < this.elems.length;i+=2){ tempElems.push(this.elems[i]); } this.elems = tempElems; return this; },
"setOpacity" Method
The "setOpacity" methods sets the percent or amount of opacity a element could have.
//Pretty cool function to set the opacity of our elements //Level is the percent of opacity we are going set setOpacity: function(level){ for(var i = 0; i < this.elems.length;i++){ if(this.elems[0].filters){ //If the browser is ie, then set the opacity this.elems[i].style.filter='alpha(opacity='+level+')'; } else{ //all the other browsers then ... this.elems[i].style.opacity=level/100; } } return this;//Return this in order to chain },
VOZ JavaScript Framework Examples Part 2
Please visit the above link in order to view the second part of our VOZ framework put into action! Also, stay tuned for the third part this JavaScript Framework series, which I am currently working on. I hope you found this tutorial enjoyable and easy to follow! Please feel free to comment, because as always I love to hear from web lovers!
Recommended Books
- The Art & Science of Javascript
- Javascript: The Definitive Guide
- AdvancED DOM Scripting: Dynamic Web Design Techniques
- Accelerated DOM Scripting with Ajax, APIs, and Libraries
- Beginning JavaScript with DOM Scripting and Ajax
Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Santo Domingo, Dominican Republic. He has more than 10 years experience in the computer programming and development world, including 2 years teaching computer science. He is currently living in Louisiana, where he plans to complete his degree in Computer Science, and begin a Masters in the field.
Subscribe to our RSS
Please help us to promote this article.
Sponsors
A Leading B2B platform with 10 years history. Compare & Inquire with Trusted China Suppliers (SGS certified). Log on & Order now!
i hope u will come out with part 3 for event handling
how can i achieve something similar to jquery ready() event
eg:
$(document).read(function(){
//do some stuff
})
ill be glad if u can elighten me
That is a very good question. JQuery does not wait for the window.onload, it just starts working when the DOM is loaded. I am going to talk about this in the third part. In theory, when a DOM method is ready to use, it is because the DOM had loaded already, for example, document.getElementById, document.getElementsbyTagName, etc.
I have a short function to achieve this task:
//The callback is the anonymous function with all the code inside
//Example: domReady(function(){alert(‘Hello World’)});
function domReady(callback){
var done = false;
var checkLoaded = setInterval(function(){
if(document.body && document.getElementById){
done = true;
}
},10);
var checkInter = setInterval(function(){
if(done){
clearInterval(checkLoaded);
clearInterval(checkInter);
callback();
}
},10);
}
A good way to test this function is trying to use it in a page that has a really huge image. Let me know if you have any other questions!
thank you for ur code
so that mean we have to repeatedly run the anonymous function to check wether the DOM has ready right?is this the approach jQuery use
and can we just minimize the code to something like this
function domReady(callback){
var checkLoaded = setInterval(function(){
if(document.body && document.getElementById){
clearInterval(checkLoaded);
callback();
}
},10);
Yes, that is what JQuery does. For example, John Resig (JQuery creator) shows this tip in his book Pro JavaScript Techniques in the next function:
function domReady( f ) {
if ( domReady.done ) return f();
if ( domReady.timer ) {
domReady.ready.push( f );
}
else {
addEvent( window, “load”, isDOMReady );
domReady.ready = [ f ];
domReady.timer = setInterval( isDOMReady, 13 );
}
}
function isDOMReady() {
if ( domReady.done ) return false;
if ( document && document.getElementsByTagName && document.getElementById && document.body ) {
clearInterval( domReady.timer );
domReady.timer = null;
for ( var i = 0; i < domReady.ready.length; i++ )
domReady.ready[i]();
domReady.ready = null;
domReady.done = true;
}
}
Of course, this function is so far more complicated, because it is a function for production work and not for studying how to create a framework; however, what we have works well.
PS I recommend his book because it has tons of good code to use in your sites.
Wow that code way over my head..
Might take some time to digest it
Cuurently im reading Javascript Defenitive Guide..will look into his book indeed
Thanks bro for ur effort
Good Book, Douglas Crockford recommend it!.
Very good !
But 7 is not even…
@ Bim
Thanks, it is fixed.