JavaScript OOP Tutorial: Classes

This is a JavaScript DOM exercise from Chapter 3 of Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.

Not only that JavaScript functions can contain other functions, but they can also be instantiated. This makes JavaScript functions a good candidate for implementing the concept of class from traditional object-oriented programming. This is very helpful feature indeed, because JavaScript doesn’t support the notion of class in the classic sense of the word. Functions can be instantiated using the new operator, such as in this example:

var myHelloWorld = new ShowHelloWorld();

This line of code effectively creates an object named myHelloWorld, which represents an instance of the ShowHelloWorld() function. When the object is instantiated, the function code is executed, so creating the object has the same effect as calling ShowHelloWorld() like in the previous examples.

Here are a few facts that will help you port your C# OOP knowledge into the JavaScript world:

We’ll demonstrate these concepts by transforming the ShowHelloWorld() function that you saw earlier into a “real” class. We will:

TIP. Why are we changing the name of the function? Remember, OOP is a style of coding, not a list of technical requirements that a language must support. JavaScript is considered as an OOP-capable language because it supports an object-based programming style. In the OOP paradigm, a class should represent an entity, and not an action. Since we intend now to use ShowHelloWorld() as a class, we are changing its name to one that reflects this purpose.

Once your new class is created, you use it just like you’d use a C# class. For example, this is how you’d create a new class instance, and call its DisplayGreeting() method:

// create class instance
var myHello = new HelloWorld();

// call method
myHello.DisplayGreeting();

A possible implementation of the HelloWorld class is the following.

// "Hello, World" class
function HelloWorld(hour)
{
  // class "constructor" initializes this.hour field
  if (hour)
  {
    // if the hour parameter has a value, store it as a class field
    this.hour = hour;
  }
  else
  {
    // if the hour parameter doesn't exist, save the current hour
    var date = new Date();
    this.hour = date.getHours();
  }

  // display greeting
  this.DisplayGreeting = function()
  {
    if (this.hour >= 22 || this.hour <= 5) 
      document.write("Goodnight, world!");
    else
      document.write("Hello, world!");
  }  
}

The HelloWorld class is formed of the constructor code that initializes the hour field (this.hour), and of the DisplayGreeting method – this.DisplayGreeting(). Fans of the ternary operator can rewrite the constructor using this shorter form, which also makes use of the object detection feature that was discussed in Chapter 2:

  // define and initialize this.hour
  hour = (hour) ? hour : (new Date()).getHours();

TIP: The ternary operator is supported both by C# and JavaScript. It has the form (condition ? valueA : valueB). In case the condition is true, the expression returns valueA, otherwise it returns valueB. In the shown example, object detection is used to test if a value was supplied for the hour parameter. If it was not, the current hour is used instead.

Implement the exercise step by step and find detailed explanations in our book, Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.