Blog

Javascript Object oriented programming

Aug 22, 2012

*JavaScript is a prototype-based language which contains no class statement. Instead JavaScript uses functions as classes. Defining a class is as easy as defining a function.

*An object constructor/object constructor function is a function that’s used to define a new object. In this function, we declare the initial properties/methods of the new object, and usually assign them a pre-defined value.

*To create an instance of an object, we use the keyword “new”, followed by an object constructor. We can either use JavaScript’s built-in constructors to create a native object, or we can build our own constructors to create a user-defined object.

*Every object method has a variable – this – which refers to the current instance of that object from which the method is called. Example

function Computer(name) {
      this.name=name;
      this.getName=function() {
         return this.name;
      }
}

var computer1 = new Computer("Desktop-1");
alert(computer1.getName());//alerts Desktop-1

var computer2 = new Computer("Desktop-2");
alert(computer2.getName());//alerts Desktop-2

References

Categories : JavaScript   Programming

Javascript Closures

Aug 17, 2012

A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

Categories : JavaScript

Javascript Module Pattern

Aug 8, 2012

Module Pattern - It stays out of the global namespace, provides publicly addressable API methods, and supports protected or “private” data and methods along the way.

var myFunc = (function() {
    var privateProperty = 10;

    return {
        print: function() {
            console.log(privateProperty);
        },
        assign: function(a) {
            privateProperty = a;
        }
    }
})();

myFunc.print(); //10
myFunc.assign(100);
myFunc.print(); //100

The private variables can only be accessed from within the anonymous function itself or from within a member of the returned object. This is through the power of closuers.

References

Categories : JavaScript

javascript void(0) for HTML link

May 27, 2012

To create a HTML link which does nothing when user clicks it,  use  like below

Click here to do nothing

When the user clicks the link,  void(0) evaluates to undefined, which has no effect in JavaScript.

References -

https://developer.mozilla.org/en/JavaScript/Guide/Expressions_and_Operators#void

Here is a stackoverflow.com link, which answers why   void(0)  is better than using

 for this requirement

http://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0

Categories : JavaScript   HTML

Referencing variables in setTimeout function - Javascript Closures

May 26, 2012

Requirement

  • Reference For loop variable i  in setTimeout function

Wrong way

for(var i = 1 ; i <= 10; i++) {
    console.log('i in for :: ' + i);
    setTimeout(function() {
        console.log(' i in timeout :: ' + i);
    }, 2000);
}

Ouput

i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11

Right way using Closures

for(var i = 1 ; i <= 10; i++) {
    console.log('i in for :: ' + i);
    setTimeout(function(j) {
        return function() {
        console.log(' j in timeout :: ' + j);
    }
    }(i), 2000);
}

Ouput

i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
j in timeout :: 1
j in timeout :: 2
j in timeout :: 3
j in timeout :: 4
j in timeout :: 5
j in timeout :: 6
j in timeout :: 7
j in timeout :: 8
j in timeout :: 9
j in timeout :: 10

References:

Categories : JavaScript