All you need to know About javascript

This is one of the best tutorials I've found about javascript out there, its a compilation of the best techniques important for our everyday work.

I should've put this video instead of my last 2 posts ¬¬ hahaha

It's one hour long, but it's worth it!!!

How to structure your javascript. Part 2

Hi and welcome to the second edition of this javascript tutorial =)

In this tutorial I'm going to show Object Oriented capabilities (emulation) in javascript.
As you may know, javascript is an interpreted language and was not conceived to be object oriented for many reasons, actually nobody though it would be used as it is right now.

You can probably be wondering, why would I need this in js? well, I you like to become a javascript ninja, this is were you need to start.

In all of the next examples we're going to be using JSON (javascript object notation). If you have no clue what this is, take a look at this tutorial.

Let's begin =)

One of the neat features of the OO paradigm is to create "objects" which have methods and properties that "encapsulate" this characteristics within the object. In our first example we will create a car.

//car object first approach
var car = {
   speed : 0
   ,accelerate : function(){
      this.speed++;
   }
   ,tachometer : function(){
      alert(this.speed);
   }
}

//Accelerate the car
for(var i = 0; i<=100; i++){        
     car.accelerate();  
}  

//How fast am I going?        
car.tachometer();         

In this example we created a car object which has properties (speed) and methods (accelerate, tachometer), using this approach we can only have one car, the one we just created and that's it, it is like a super variable (Singleton) with methods and properties and that's not too object oriented :S.
I use this approach as my application entry point were I initialize all of my components.

The second approach is as follows:

//car object second approach
var car = function(){
    //Private Variables
    var speed = 0;

    return{
       //Prublic variables
       doors : 4
       //Public functions with access to private variables
       ,accelerate : function(){
             speed++;
       }
       ,tachometer : function(){
             alert(speed);
       }
   }
};

//create car instances
var bmw = new car();
var audi = new car();

//Accelerate the car
for(var i = 0; i<=100; i++){      
     bmw.accelerate(); 
}  
//Notice that we haven't move our audi from the garage =P
bmw.tachometer(); // alerts 99
audi.tachometer(); // alerts 0  

This example has more OO properties that the first one, here we have public and private variables and also methods plus with this approach we can create instances of the object and use it several times.

Important Note: Notice how some variables are declared using var and others not, when we use "var" inside a function the variable is "trapped" inside the scope of that function and any other that might be inside of it. I you declare variables without the "var" you're creating global variables attached to the "window" namespace.

I know i raised the bar a little bit in this post, so if I confuse any of you, let me know and I will modify the post.

Thanx for reading =)

How to structure your javascript. Part 1

Hi everyone, today i'll talk about javascript coding practices and how to structure your code to avoid variable collisions when making big js applications.

Every time a page is loaded, the client (browser) creates a variable/namespace called "window" which is like a little native framework provided on any page by the browser.
This namespace contains basic information about the client like view port width and height, the document variable, and many others. The naming of each variable can change from browser to browser and that's the primarily reason why javascript frameworks are created.

When we declare a js variable it is "stored" within the window namespace:

//run this code in Firebug console
foo = 1;
alert(window.foo);
alert(foo);

//Alerts 1 two times

As we can see, everything we declare this way is going to be saved withing the window namespace. Right now everything works perfect because we are using only one foo var, but what happen if we start creating a javascript widget which has a lot of functions and variables, we will "pollute" this namespace and ran out of names sooner or later.

If we want to keep our global namespace (window) clean, we can use an "anonymous" function to create a "closure" and encapsulate our variables inside. If you dont know what a javascript closure is, what are you waiting? take a look at this link.

Example:

//delete the foo variable from last example
delete foo;

(function(){
   var foo = 1;

})();

//undefined uh?
alert(foo);

After running this snippet, we can take a look to the window variable in firebug and see that there's no "foo" variable listed inside, which means we can only use our foo variable inside that closure. Anonymous functions are very useful, it is also important to remember that a function in javascript is also a variable type along with strings, ints, arrays and objects:

var foo = function(){
 alert("Function as a variable =)");
}

alert(typeof(foo));

//use it like this
foo();

This examples are very basic but i've found that no so many web developers know about 'em.

In part 2 we will continue with JSON classes and how they help us to emulate Object Oriented capabilities in javascript =) its going to be interesting and hopefully by the end of this series we will be able to start writing our own javascript framework =)

Thanx for reading!