Advanced JavaScript tutorials

http://www.pixelcompany.co.uk/

Hi Reader!

This is my attempt to write a blog about something serious, I just hope this helps anyone who wants to Learn Serious Side of Java Script.
I would like everyone to know that "This is a Series of Tutorials"
So I choose the topic of “Prototype Object” as first lesson.

Lesson One :

[The Prototype Object]

Before we begin lets See what sort of people are suitable for this type of tutorial.

If you have the following:

• Working knowledge of HTML
• Basic or working knowledge of JavaScript/DOM Scripting

then let’s just dive into this otherwise I would advise to cover the prerequisite first.

Question: The Prototype Object , what is it ?

Answer :

Prototype is an object available since JavaScript version 1.1. The reason and the purpose of this object is to simplify the process of adding custom properties/ methods to all instances of an object. Now the word “all instances of an object” can be tricky for some of my friends reading my blog.

Don’t Worry:

just like the famous actor Shahrukh Khan's dialogue, I would say “Main Hoon Naa” [means: Dont worry i am here"].

So here is the Example to help you understand:
If you use an image in your HTML with the help of JavaScript and use it many times in the same HTML page by storing it into a variable [for example: var mySpacerImg=”spacer.gif” ] and calling/ referencing the same variable again and again. Technically you are making instances of the same variable or image and reusing it.
So if we have an Object and we want to reuse it we create an instance of that object , like we do with Arrays and Strings.
Since JavaScript allows you to add custom properties to both prebuilt [available in JavaScript by default] and custom objects [our custom object].

Here's an example of prebuilt and custom object (each) :

----Example for prebuilt object----

var mySpacerimage=new Image()
mySpacerimage.extention="gif"

----Example for Custom object----

function square(){
}
var smallsquare =new square()
smallsquare.corners=4

So now in the case of custom object, we have created a custom property of “corners”, but adding it this way, it only exists for that instance of the object. Which means as long as we are using the reference same variable [means: smallsquare.corners]. What If I want to spit out another instance of square(), called "bigsquare ", for example, bigsquare.corners would by default return "undefined" until I go over the process again of first defining bigsquare.corners as with smallsquare.
There are times when you'll want to add a custom property that's only reflected on a particular instance of an object, and times, when you just wished all instances of the object would recognize or inherit the custom property, For example, all square- and not just small square - have a corners, so it's reasonable to assume you'd like the custom property "corners or area" added in a way so that it's available in all instances of the object.
Hmmm…That's exactly where the” prototype object” comes in.

Now if you remember :

“prototype object” is used to add a custom property to an object that is available on all instances of that object. This means that now you can use the object freely as it will have your personalized property or method available universally.

Now Here comes the question, How to use “Prototype Object”?

Answer: It’s simple: Use prototype object, on the object before adding the custom property to it.

Let’s redo the previous example in the Prototype way:

----Example for Custom object----

function square (){
}
square.prototype.corners=4

Note:
Now, all instances of square() now has the corners property comes as a prebuilt into them.
However there are certain limitations apply:

1: You are free to use prototype object on any custom objects.
2: You are NOT free to use prototype object on any prebuilt objects, but you can use it with the prebuilt objects like:

• The date object
• The Array object
• The image object
• The string object

Important Note:
In other words we can say that, JavaScript only allows you to "prototype" prebuilt objects that are created with the “new“ keyword.

What are the best ways to use “ Prototype Object”?

Well the answer is “Many” everyone is free to use it as a word in a dictionary of a language.
Lets show you one good example of how to make use of it.

// Create custom object "Square" like before

function Square (){
}
square.prototype.corners=4

// Create a method which works like the getter of the object
function alertSquareCorners (){

alert(this.corners)
}
square.prototype.getCorners=alertSquareCorners

Huraay …….Finally , all instances of the square object contain a alertSquareCorners() method!

I think that’s enough to start with , I will try to write more examples in my next blog entry.
In the meanwhile please keep me posted and don’t forget to post your comments.


- M.Zeeshan Khan
http://www.pixelcompany.co.uk/

Hi everyone!
Thanks for appreciating the blog.
Since today is a weekend and like most of us i have a lot more in my plate of work, so i keep it nice, short and simple.

Based on the feedback. My focus today is to give you guys a few examples of Prototype Object:
Here i one nice and practical example of it:

---- Example ----

String.prototype.addToLeft = function (length, character) { 
     return new Array(length - this.length + 1).join(character || ' ') + this; 
}

----How To Use This Code-----

'shani'.addToLeft(7, 'X'); // output : 'XXshani'

'shani'.addToLeft(7);      // output : '  shani'

---- Another Example ----

String.prototype.addToRight = function (length, character) { 
     return this + new Array(length - this.length + 1).join(character || ' '); 
}

----How To Use This Code-----

'shani'.addToRight(7, 'X'); // output : 'shaniXX'

'shani'.addToRight(7);      // output : 'shani'

---- Yet Another Example ------

Array.prototype.indexOf = Array.prototype.indexOf || function (item) {
    for (var i=0; i < this.length; i++) {
        if(this[i] === item) return i;
    }
    return -1;
};

----How To Use This Code-----

var list = ["my", "array", "contents"];
alert(list.indexOf("contents"));     // outputs 2

I hope this has answered a few questions about how to practically use this object.
Tomorrow i am more likely playing squash , so i might not be able to add anything tomorrow.
But please don't hesitate to ask anything.

Keep Posting.

-M Zeeshan Khan

http://www.pixelcompany.co.uk/