How to Easily Create a JavaScript Framework, Part 3
June 23rd, 2009 by How to Easily Create a JavaScript Framework, Part 3
In “How to Easily Create a JavaScript Framework, Part 2,” I discussed some DOM navigation methods, such as the “getByName,” “getByTag,” and “getByClass” techniques. Furthermore, I also showed how to do some extra methods just for fun, such as the “even and odd” and the “setOpacity” methods. In this week’s post, I will continue with my “VOZ” JavaScript Framework tutorial series, and we are going to continue to add new methods for dealing with a JavaScript Framework. Therefore, I will take the Framework one step farther, and I will add more useful methods for dealing with JavaScript before a page loads and other useful techniques. Please continue reading below to follow the Framework! Please remember to comment, and Enjoy!
What is on Topic for Today?
- Waiting Until the DOM Loaded
- To Modify “setStyle()”
- Set and Get Values from Input Elements
- Fun Effects: “fadeIn()” and “fadeOut()”
1. Waiting Until the DOM Loaded
To continue with our simple JavaScript Framework, we need to talk about page loads. One of the biggest problems that a developer faces is the use of JavaScript before the page is loaded completely. In many web applications, the JavaScript starts working when the page is fully loaded. That is a big problem because the application does no function until all the images and files are fully loaded into the page. To explain this, I am going to give an example.
Let’s say that we have a page with 20 images for a thumbnail to show the products of the company, and you are using the JavaScript to create a pop up window with the clicked image in real size. The problem is that your application is not going to work until all the document elements have been loaded in the page. Your page would look like this:
function popUpImagen(imagen){ … Code here … } window.onload = popUpImagen;
This script waits for the page to load to start working with the images in your thumbnail. If the user has a poor internet connection, your page would not work until all elements are loaded in your page.
To solve that problem we can create a small method to check continually if the DOM is loaded because if the markup is loaded then we are ready to work with it.
//Verify when the DOM is ready. //Callback is the anonymous function to execute when the dom is ready domReady:function(callback){ var done = false; //Create a variable called done with false as value; //Checking every 10 milliseconds if the document.body and document.getElementById are ready to work with them //If the they are ready to work then we change done to true; var checkLoaded = setInterval(function(){ if(document.body && document.getElementById){done = true;}},10); //Checking every 10 milliseconds if done == true //If it is true then execute the callback var checkInter = setInterval(function(){if(done){clearInterval(checkLoaded);clearInterval(checkInter);callback();}},10); },
Therefore, use this method of our framework in order to execute your code when the DOM is ready. Example:
$$.domReady(function(){ alert('Hello World'); });
2. Modifying “setStyle()”
Now let’s modify the setStyle() method to take an object as parameter. It is always hard to remember the order of the parameters of a function. Using an object is very useful, because we do not have to be concerned about the parameters order. Moreover, it is more organized in order to understand what we are doing.
Example of a function to insert data by AJAX
//Using literal parameters function insertCustomer(name,lastname,address,birthday,gender,phone){ …. code here … }
That could be tedious if we don’t remember the order of the parameters. For example, we can use the function like this:
insertCustomer('Teylor','Feliz','My address','Male','09/15/1978','555-555-5555');
We immediately get an error, because we are sending the gender as parameter at the place of birthday. An excellent way to avoid this issue is creating an object and sending it as a parameter to a function. With this style, we just need to know the names of the parameters, rather than the order.
Example of the same function using an object as parameter:
insertCustomer({name:'Teylor',lastname:'Feliz',gender:'Male',phone:'555-555-5555',birthday:'09/15/1978',address:'My address'});
To use the object inside the function, we should modify it like the next example:
function insertCustomer(args){ //An example of use the function is args.name; var name = args.name; var lastname = args.lastname; …Code here … }
Back to the “setStyle” method, let’s now modify the method to accept an object as parameter.
//Updated Method setStyle //Now it takes an object as parameter //e.g. var mystyle ={color:'red',background:'black'}; // .setStyle(mystyle) OR we can passit directly AS .setStyle({color:'red',background:'black'}); //We should know that the name of the styles are as used in javascript //e.g. background-color is backgroundColor, margin-left is marginLeft, etc. setStyle:function(objStyle){ for(var i = 0;i < this.elems.length;i++){//Going across all the elements and add them all the styles for(var k in objStyle){ //Walk the ObjStyle Object using te property name as style name and the value as the style value //E. g. {top:20px} is elem.style.top = 20px; this.elems[i].style[k] = objStyle[k]; } } return this; //Return this to chaing },
That helps to send more than one style properties at once. Example:
$$.getById(‘myid').setStyle({color:'red',border:'1px solid blue'});
3. Set and get values from Input Elements
Input elements are the most important part of a web page for a web developer, because it is the way we get information from the user to work with them in the backend. That's why we should create two functions: one to insert data into the inputs and the other one to retrieve data from them.
//Return the value of the elements or an array with all the values found //This function does not chain getValue:function(){ var elemstemp = [];//Create a temporary array to save the elements found for(var i=0;i < this.elems.length;i++){//Walk through all the elements cheking for their value if(this.elems[i].getAttribute('type') == 'checkbox' || this.elems[i].getAttribute('type') == 'radio'){ //If the form element is checkbox or an radio we verify if it is checked //If it is true then we save the value if(this.elems[i].checked === true){ elemstemp.push(this.elems[i].value); } } else{ elemstemp.push(this.elems[i].value); } } //elemstemp.push(if(this.elems[i].getAttribute)this.elems[i].value); //Adding the value into the temporary Array if(elemstemp.length === 1){ //If the temporary array just have one element then we return like a single value return elemstemp[0]; } return elemstemp; //Here we return the temporary array with all the values found }, //Set value for the elements found //Val is the value for the elements found setValue:function(val){ for(var i=0;i < this.elems.length;i++){ //Walk through all the elements adding a value //If the form element is checkbox or an radio we verify if val == elem.value //If it is true then check it if(this.elems[i].getAttribute('type') == 'checkbox' || this.elems[i].getAttribute('type') == 'radio'){ if(this.elems[i].value === val){ this.elems[i].checked = true; } } else{ this.elems[i].value = val; //Set the val to value attribute of the element } } return this;////Return this in order to chain },
4. Fun Effects: "fadeIn()" and "fadeOut()"
Great effects of DHTML are expected in a JavaScript Framework, so we are going to create the "fadeIn" and "fadeOut" methods. However, before that, we have to create a helper object called "Helpers." The Helpers object is going to have the key methods or our effects functions. In addition, it would have some AJAX methods that we are going to work in the next chapter. The Object is clearly commented, so I won't give you all the details about it.
The Helpers Method is:
var Helpers={ //Method to set the opacity of the element //It is almost the same than setOpacity //elem is the element affected by the opacity //level de amount of opacity, the percent: the values are between 0 and 100 setOpa:function(elem,level){ if(level>=0 && level< =100){//The opacity should be between 0 and 100 elem.style.opacity = (level/100); //Set The opacity for Firefox, Safari, Opera, Chrome,etc. elem.style.filter = 'alpha(opacity='+level+')'; //Set opacity for IE :( } }, //Method to create the Fade Out effect //Using the method setOpa //elem is the element affected by the effect //time is the duration of the effect fadeOut:function(elem,time){ var level = 100; //Set the level at 100 var interval = setInterval(function(){ //Create an interval using the setOpa method Helpers.setOpa(elem,--level); //Using seOpa Method decrementing level by one if(level==0){ //If level has the value of 0 then stop the interval clearInterval(interval); } },time/100); }, //Method to create the Fade In effect //Using the method setOpa //elem is the element affected by the effect //time is the duration of the effect fadeIn:function(elem,time){ var level = 0;//Set the level at 0 var interval = setInterval(function(){//Create an interval using the setOpa method Helpers.setOpa(elem,++level); //Using seOpa Method decrementing level by one if(level==100){//If level has the value of 100 then stop the interval clearInterval(interval); } },time/100); } }
Now add the "fadeIn" and "fadeOut" methods to the "VOZ" Object.
//Fade Out Method //Using the Helpers Object //Time is in milliseconds e.g. 8 secons = 8000 fadeOut:function(time){ for(var i=0; i < this.elems.length;i++){//Going across all the elements and execute FadeIn In the Helpers Object Helpers.fadeOut(this.elems[i],time) } return this;//Return this to chaing }, //Fade In Method //Using the Helpers Object //Time is in milliseconds e.g. 8 secons = 8000 fadeIn:function(time){ for(var i=0; i < this.elems.length;i++){ Helpers.fadeIn(this.elems[i],time) } return this;//Return this to chaing },
VOZ JavaScript Framework Examples Part 3
As in Parts 1 and 2, I made a page that puts Part 3 of the "VOZ" JavaScript Framework into action, so please visit the link above. Also, I will be making the fourth part this JavaScript Framework series, were we are going to create some AJAX Methods, and I will instruct you how to use them. As always, I hope you found this tutorial enjoyable and easy to follow! Please feel free to comment.
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!
The for loop to walk the setStyle properties is undeclared e.g.
for(k in objStyle){ //Walk the ObjStyle Object using te property name as style name and the value as the style value //E. g. {top:20px} is elem.top = 20px; this.elems[i].style[k] = objStyle[k]; }You should change k to var k as I’m sure you’re aware the k being undeclared will resolve to a global variable and that’s bad.
Script Fixed.
Thanks Ryan!
It is completely unnecessary to have 2 intervals polling for domReady ready.
Of course that it is unnecessary; however, this post is a tutorial used for education. I did it that way so that people could understand. I chose to make it longer and to use variables in order to help the framework to be more explanatory. Then, I think people can improve their code by themselves by doing this, for example:
function domReady(callback){
var checkLoaded = setInterval(function(){
if(document.body){
clearInterval(checkLoaded);
callback();
}
},10);
}
Thanks for your comment!
Great article.
Learn a lot
Thanks
jaan leva maar hie dala mast hai baba ultimate
How can I make the object creation like jQuery?
$(document)
instead of $$
@James Brooks
Yes, it is possible. I will cover that in the next post about the framework. The function created would be $$.byObject(elem);
Thanks for your comment.
Thanks admin! Nice work by the way!
How many posts do you think we will see? Also, you should try to implement sizzlejs.com for selectors and a like.
It will definitely make this more fun! I started writing my own framework a few months back, just looking to see others around
@James Brooks
1) I think there will be one more post covering some new methods and AJAX for the Javascript Framework.
2) The use of sizzle is a good idea because it would save tons of code. The problem is that I am just trying to help new coders with how to build their own JS framework. If I used sizzle, then I would have to cover beyond in order for them to understand. I am excited about the selector API coming in browsers next years with JavaScript. Especially, the querySelector() and querySelectorAll() methods because people will be able to write professional code more easily.
Thanks for your comment, and check back for Part 4!!!!
3) Good idea about making your own framework because even if you use JQuery or YUI for your professional coding, it is good to know what is going on inside a framework.
Check out my work so far GUM
I’m starting to add some animation effects.
I really need to implement Sizzle, but it looks like a lot of work.
AJAX will be later.
Can’t wait for your next tutorial!
John Resig has a very good book; there he includes some animations effects used in JQuery. The book’s name is Pro JavaScript Techniques.
Thanks for you time!
I will take a look into that. I can’t wait for the Secrets of a JavaScript Ninja.
Hi, how many articles in this series are you planning on doing? I’d like to post links to them on my site, but want to group all of them together.
@cancel bubble
Thanks for posting it on your site. As this is a tutorial for beginners in Pro JavaScript Coding, I am planning to do one more post covering AJAX. But, we just relocated to Louisiana, so we have not had as much time to write. I am organizing everything now for that post. Check back in two or three weeks. I look forward to seeing the post on your site.
Thanks for your time.
Admin, any motion into part 4 yet? I’m quite intrigued!
Yes, it is in the works! Sorry for the delay, but it will be posted in the next week or so, hopefully!
sigh i keep on revisit this page everyday but yet still no new on part 4…sigh admin
greate tutorial….thanks..i’m waiting for part 4 too…
seems like there is actually no part 4 coming
hope that next part will come.
great articles. keep it coming!
what happen lol
other article keep on coming like windows 7..
but yet still no article about js fraemwork part 4?
this is start to annoy me
@Slier,
Sorry, my wife has been writing most of the posts, because I have been so busy with work and school. That is why there have been more on design and tech news, rather than programming. I promise to post the Framework #4 this week!!! It is 99% done! Count on it!
hi !
I would like to know if it’s possible to get a real duration for fadeIn/Out functions ? because actually, for fadeIn/Out(2000), it’s executing in 2000 – 2300 ms and if fadeIn(1000) it’s done in 1600 ms.
Hi, very great tutorial ! thanks for this ! I’m a very beginner in js an I understand all.
Just a little question. The “helpers” object is a part of the VOZ object or is it out of this ? I think it’s a part of it … so declared IN this, but not sure.