Drawing a Chessboard: Object-Oriented flavor

JavaScript is really interesting because it has some Object-Oriented capabilities. Here is a small explanation through our classical Drawing a Chessboard example.

1- Class, properties, methods,...

A chessboard is an array of cells. Each cell is defined by its top left corner, size, and color. It can be interesting to pre-calculate all the properties of the 64 cells of our chessboard.
From a programming point of view, the cells can be defined as objects. First, we need to determine the blueprints required to construct our objects. In Object-Oriented programming languages, these blueprints are called  classes.
Thus, we plan to write a class entitled Cell and define its properties and functions (here called methods).

Here we go...

In JavaScript, there is no specific keyword to define a class (contrary to Java).

The initialization and creation of the object is done via a specific method: the constructor which must have the same name as the class.

  function Cell() {
    // Do some initialization of properties
  }


The attributes (or properties of the class) are always declared and used with the  keyword this like that:

  this.x = 4;
  this.color = 128;

Note: It can be translated as "... the value '128' is assigned to the variable 'color' of this object (an instance of the class Cell in our example)...".

Finally to define methods for that class, the syntax is the following ...
  ClassName.prototype.MethodName = function (arguments) {
    //code, here
  }

2- Implementation

In this 'Drawing a Chessboard' script, a class Cell is defined by:

• its four attributes: x, y, size, and color. 
• a constructor Cell(x,y) with two arguments corresponding to the X-, Y-coordinates of the top left corner.
• two methods: setColor(value) and fill(ImageProcessor) for assigning the (black or white) color and drawing the square, respectively.

Here is the script composed of three parts.

1. Definition and declaration of the class Cell
2. Main
1. The initialization of the array containing the 64 cells.
2. Drawing of each cell.

Here is the final script ...

+++ IJ JavaScript Snippet: chessOO.js  +++ +++ End of IJ JavaScript Snippet +++

About the implementation, three remarks:

First, in line #41, the following code (used to choose between black (v=0) and white (v=255) ) ....

  a_cell.setColor(( (x+y)%2==0 ) ? 255 : 0);

is equivalent to ...

  if ((x+y) % 2 == 0)
    a_cell.setColor(255);
  else
    a_cell.setColor(0);

Note: This shortcut is available in many other programming languages like Java, C/C++, etc.

Second, the final loop is written as

  for (var i in cells) {...}(1)

and is identical to ...

  for (var i=0; i< cells.length; i++) {...} (2)

In certain circumstances, this way of iterating through an array (1) is faster than the classical writing (2). This syntax is specific of JavaScript (Java has something similar using a ':' ).

Third, don't forget the last line 'imp.show()' to display the window otherwise nothing happens.

Please feel free to check out the code and share your comments below.

Further readings

Table of Contents of the Drawing a Chessboard series [Link]