Creating a handsome custom JavaScript library

jQuery, ExtJS, etc are some of the most sophisticated javascript libraries used current days.  But If you are as passionate as I am at some moment of your life you could wish to have your very own independent js library that can be used at any site.

Suppose you have created a custom library named js and want to use it like this ..

js("#id").hide();

You interested?.. keep reading.

Lets go and see how we can accomplish that –

Step 1: Create the foundation

JavaScript is an object oriented language and thus everything we do will be regarding objects. If you are reading this post, then you are already familiar with js and thus know that there are some browser object that javascript uses with DOM. We will need two of them to create our library one is the window and the other is the document object. Every single library or js obejct that you need to used must be registered as a property or field of window  object. So first we need to register our library. I will call my library js and the code that is needed to register the library is like this –

(function() {
   var window = this,
   undefined, _js = window.js;
})();

Lets see what this does. (Between you and me, I got this idea from jQuery) –

  1. The first and last line just defined the closure of the library
  2. The second line just saves the window object ( ofcourse when the library is loaded the this object would be the window itself) for later use
  3. The third line defines the undefined object in case it throws an exception if we use it in codes
  4. The second half says that I have a js names library that is to be used as window.js or simply js. The _js is used just an extra caution incase we need to use the library function inside it.

Step 2: Complete the definition

Uptil now our library js has only been declared, but we can’t use it just yet. We need to add functions and methods inside it so that we can manipulate them as library and also to access our DOM object like a jQuery type syntax we need to have a selector defined. Lets just complete our library as following –

//object initializarion
js = window.js = function(selector) {
    return new jsObject(selector);
};
//the custom javascript object
jsObject = function(selector) {
};

I will explaing what happended here. I just created an object protoype and initialized the js as an object of that type. Therefore js is now a valid javascript object and is ready to be implemented.

Step 3: Add Some features and Hook up with events.

Now before we move forward we have one little thing to care about, our library needs to be called when javascript is initialized. So we have to hook up a load event to the window load event and also bubble any event hooked up by other libraries. You don’t wanna mess up other libraries to create your own one. The code will look like this –

this.jsReady = function(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        };
    }
};

What we did here? We first checked that if there is already a function hooked up to be call when the window loaded, if yes we called it first then ours and if not then just hook our function with it that will be called automatically.

Step 4: Putting it all together.

Thats it! We just created our very own js library. Don’t believe me? Lets have a test. But for that we need some functions that we are going to use to test. Lets just add two more function hide() and show(). I will use jQuery as internal library for easy test and also use jQuery selectors to pass the dom objects to the library. So our library will look like this –

(function() {
    var window = this,
    undefined, _js = window.js;

    //object initializarion
    js = window.js = function(selector) {
        return new jsObject(selector);
    };

    //the custom javascript object
    jsObject = function(selector) {
        this.jsReady = function(func) {
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = func;
            } else {
                window.onload = function() {
                    if (oldonload) {
                        oldonload();
                    }
                    func();
                };
            }
        };

        //the hide function to test our code
        this.hide = function (){
            $(selector).hide();
        };

        //the showfunction to test our code
        this.show = function(){
            $(selector).show();
        };
    };
})();

Step 5: Using the library.

Its simple to use the library, just make sure you include jQuery before including our library and try to use the codes as this –

js(document).jsReady(function(){
   js($("< your selector id, class or anything>")).hide();
});

Have fun….

Chapter 1: JavaScript – A Client-Side Scripting Language

Its been long since my last post. After a long time I have got this day a little free time myself so does for you. Many a time peoples ask me of teaching them JavaScript, well then I thought why not write a tutorial for them! Well here we go. If any of you find anything wrong let me know. I am not the inventor of JavaScript, so I don’t know all. Okay, enough with the chatting, lets start …

JavaScript is probably the most sophisticated client-side scripting language I have ever seen. We have VBScript, we have C#, we have PHP, but none of them can match the functionality, features and dynamism that JavaScript possesses.

If you are intermediate to JavaScript, you can skip this post and go forward, but if you need to know about what is a client-side scripting language, read it. A client-side scripting language is different from a programming language in so many ways –

  • Firstly, unlike a programming language, a scripting language is never ever compiled to build an output binary file, instead they are executed one statement at a time and execution breaks if any errors occur or the code finishes.
  • Secondly, a client-side scripting language run in a specific environment, in other words, inside a browser and is fully dependent on the browser to give it all kinds of supports. Whereas, a programming language output runs on an operating system.

You might have notice the fact that I am saying client-side scripting language not simply scripting language. Thats because a scripting language normally runs in a script host on the server machine. All the codes of the scripting language is run and the output is sent back as mere HTML markup to the client side. But JavaScript is never run in the server, instead it is sent as it is to the client side with the HTML markup. Then it is the client’s responsibility to run the code and show the output to the user and by clients I mean, your browser –  Internet Explorer, FireFox, Opera, Chrome, Safari; whatever that might be.
But beware of that fact that, not all these browsers user the same JavaScript engine, and thus you might need to check if the browser support your specific JavaScript codes. But don’t be alarmed, almost all the browser support almost all kinds of functionalities, there are few exceptions, but they are not so frequently used.