JavaScript, jQuery, and DOM model interaction

Higher Orders

Private and public attributes, objects of a class in any number of instances, and inheritance all can be implemented in JavaScript, albeit with a completely different functionality than classic object-oriented languages. Such languages generate classes with the class keyword, and new handles object instances that all get the same methods and data attributes from the class definition. JavaScript also recognizes the new keyword, but with class , the function keyword plays an entirely different role.

The last two lines of Listing 2 have the sayHello method to handle two different instances of greeter and encapsulate different values for the greeting that are not accessible from the outside – classic object orientation out of the box.

01 var Greeter = function(who){
02   var toGreet = who;
03
04    this.sayHello = function(){
05     alert("Hello, "+ toGreet + "!");
06   }
07 };
08
09 var greeter1 = new Greeter("World");
10 var greeter2 = new Greeter("John");
11 greeter1.sayHello(); //-> Hello World!
12 greeter2.sayHello(); //-> Hello John!

Incidentally, to execute the code example, there's no need to write it in a file that you open in the browser. All modern browsers provide a console that runs directly entered code as a test. With Firefox, as of version 4, you can do so using Ctrl+Shift+K.

The Firebug [7] add-on, which includes a helpful debugger, is still better than the built-in Firefox console for larger projects (Figure 3). It stops the program at marked places and shows the value of all variables at the breakpoint. Using console.log(<value>) , you provide a value for the error search at the console. For objects, the add-on shows the attributes in JSON notation.

Figure 3: Even though Firefox from version 4 provides a JavaScript console (top) to test short code blocks, the Firebug add-on can do much more, such as provide a debugger that pauses the code on demand.

Functionality

Those who don't know JavaScript well enough might ask how a function takes on the role of a class definition. The answer is that functions in JavaScript are like objects. Just as with JSON-defined objects, you can give them new attributes via <object-name>.<attribute-name> . The same notation applies to reads.

These attributes can take simple values as well as functions (e.g., sayHello() ) because JavaScript basically handles both types the same. Attributes with the "function" type behave just like methods in other object-oriented languages:

<Object>.<Name>(<Parameter>)

The this keyword in the sample code behaves as in other languages: It points to the object it is in. The this.sayHello method therefore sets the value for the sayHello attribute of the function. The sayHello() attribute then behaves with the object instances formed by new Greeter like a public method in C++ or Java objects.