JavaScript Is Everywhere: September 2012

Tuesday, September 25, 2012

Callback Function

Callback function is very important into javascript. As we know we can pass different type of variable, object as function's parameter . In javascript if a function is passed as parameter then it is called Callback funbction.

The callback function is called on some event/condition till then the program can execute other code. We can say its uses the concept of asyncrhonous function. The callback function would executed only when the particular event is occurred or particular condition is satisfied.

Note:- Please don't forget to create a folder named image and place the image named(you can do rename) sham1.jpg inside that created folder. And of-course the below code and that folder should be exist into same directory.

Here is the exmaple, if there is any problem to understand code please share it with me.

<html>

<head>
<title>Call Back function</title>

<script type="text/javascript">
window.onload = function (){
loadImages(
//this functio runs only when the image would be
// loaded into window
function (images, total){
for(var i=0; i<total; i++){
alert(images.src);
}
}
);

function loadImages(callback){
var imgload = function (){
callback(myimage, 1);
}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');

var myimage = document.createElement('img');
myimage.onload = function (){
ctx.drawImage(myimage, 0, 10, 100, 100);
imgload();
}
myimage.src = "images/sham1.jpg";
}
}
</script>

</head>

<body>
<canvas id="myCanvas">
The canvas is missing in your browser
</canvas>
</body>

</html>

Monday, September 3, 2012

Prototype Introduction

Every object is an object of object. If we want to make the complex web application then we need to use prototype concept with Object Oritented at javascript in one level.

Object.prototype is an object whose properties and methods are inherited to new object when the new object is creating by using that constructor. The consctructor name would be same as for use to create new object.

Here we go for example.
var mydate = new Date();

Here via the Date.prototype, all the methods and properties of Date constructor would inherited to mydate object like getMonths() and getSeconds(). If you want to get month then you can simply do.
mydate.getMonths().
The getMonths() method is not user defined it is inherited from Date.prototype.

How do you use the prototype concept in your custom object.
var mercidies = new Car();
function Car(name){
this.name = name;
}

Now if you want to add custom method to Car class then you can do.

Car.prototype.getValue = function (val){
var total = val + 100*(12.3/100);
}

For properites
Car.prototype.color = 'gray';

Now Every object is made by using Car() cunstroctur inherited getValue() method and color property.

So we can say prototype concept shares the information(properties and methods) to all those object which are created by using Car() cunstroctur.

So what is the main benfit of it?
It's main advantage is when we create the method and property by using object's prototype concept, methods and properties are shared to each instance made by using that paritcular cunstructor. Which means there is no need to make a copy of methods and properites for each instance.

And the result would be it uses less memory and the speed would be increase obviously.

What if the prototype concept is not exist?
For example simple class
function Car(){
this.name = name;
this.color = 'gray';
this.getValue = function (){
var total = val + 100*(12.3/100);
}
}

When you make the instances by using that Car cunstructor then each instance/object copy those all properties and methods. Which is not good into complex web application.
If we use the concept of prototype then cunsctructor shares proprites and methods to each object. That's how its increase the speed.

Prototype Chains
By default every simple object has inherited the properties and methods from Object.prototype.
When the method and properties are accessing of objects, it travels through child to parent object.
For example

function Car(name){
this.name = name;
}

var myCar = new Car();
myCar.toString();

When the toString () is called first of all it sees that is it available in Car's prototype if yes then it returns particular value otherwise it heads to check for Object.prototype methods and returns the particular value if found the method otherwise returns null.