Writing your own JavaScript without frameworks
Most people today aren’t really writing their own JavaScript, they are just using frameworks such as jQuery, Dojo or YUI. I’ve been doing the same thing for a long time but I have decided it is the time to learn how to write my own JavaScript during this summer. I bought a book from John Resig and have already dived into it.
I’m a long time PHP developer and I understand the principles of OOP so I thought it would be quite easy to just apply them in another object oriented language. It turned out to be a little more difficult than I thought initially.
A major difference between PHP (and other server side languages such as Python or Ruby) and JavaScript is that there are no classes. You are working directly with objects all the time. Everything in JavaScript is an object: variables, functions etc. Every part of a webpage is represented as an object in the DOM, too.
So how to create an object when there are no classes? You can create an object in JavaScript by defining a constructor. For example, let’s create a Car object:
-
// create the Car object by defining its constructor
-
function Car(brand, model) {
-
this.brand = brand;
-
this.model = model;
-
}
As you can see, ‘this’ keyword works similarly as in C# or as ‘$this’ in PHP – it points to a current object. You can add methods and properties to the object through its prototype:
-
// add few methods to the Car prototype
-
Car.prototype.getBrand = function() {
-
return this.brand;
-
}
-
Car.prototype.getModel = function() {
-
return this.model;
-
}
By adding a method to Car’s prototype all Car objects will have access to it.
One more big difference between PHP and JavaScript is inheritance. In PHP, an object can extend (be derived from) another object (or interface). You define the inheritance in class definitions. In JavaScript, the inheritance is achieved through prototypes:
-
// create an AudiA6 object by defining its constructor
-
function AudiA6(color) {
-
// call Car's constructor on this object with 'Audi', 'A6' arguments
-
Car.call(this, 'Audi', 'A6');
-
this.color = color;
-
}
-
// AudiA6 inherits all methods of the Car
-
AudiA6.prototype = new Car();
-
// add a getColor() method to the AudiA6
-
AudiA6.prototype.getColor = function() {
-
return this.color;
-
}
The getColor() method is available only to AudiA6 objects:
-
var car = new Car('Skoda', 'Fabia');
-
var audiA6 = new AudiA6('blue');
-
-
alert(audiA6.getColor());
-
alert(car.getColor()); // returns null
That’s it for today. I will write few more articles about JavaScript and also AJAX later in the summer as I progress through John Resig’s book 
