Netscape 6, Part V: DOCJSLIB 1.1: Guidelines for Writing Applications - Doc Javascript | WebReference

Netscape 6, Part V: DOCJSLIB 1.1: Guidelines for Writing Applications - Doc Javascript


Netscape 6, Part V: DOCJSLIB 1.1

Guidelines for Writing Applications

Imagine now that you don't know the internals of DOCJSLIB. We want to give you some guidelines on how to use DOCJSLIB for writing DHTML applications, without knowing much about the library itself. We have already stressed that the main idea behind DOCJSLIB is to let you focus on your specific idea and have DOCJSLIB solve the generic problems of platform inconsistencies. We will walk you through our implementation of Connect-Three board game, and demonstrate to you that building applications with DOCJSLIB is straightforward and recommended for novice programmers as well as experienced ones.

Play around with the the Connect-Three board game. The first thing that comes to mind is that you need nine identical squares, arranged in a 3 by 3 grid. Let's compute the coordinates of these nine squares. Suppose we want to leave an 8-pixel border around each one of them. DOCJSLIB positioning is absolute, and is based on the coordinates of the positioned element's top left corner. Assuming the boxes are squares of 100-pixel sides, each square is distanced 108 pixels from the one above it and from the one to its left. The top left square is placed in the absolute coordinates (8,8). Schematically, we create the nine squares in a doubly-nested loop:

var xBase = 8;
var yBase = 8;
for (var i = 1; i <= 3; i++) {
  for (var j = 1; j <= 3; j++) {
    makeImage() with x = xBase + (i-1) * 108
                     y = yBase + (j-1) * 108
  }
}

Now we have to take care of the makeImage() line above. The procedural interface of makeImage() requires the following parameters:

The event handler programming is probably the most tricky part of DOCJSLIB. You must define the handleImageClick() function somewhere in your script. Put an empty one if you don't want anything to happen when the user clicks inside the image area. In our Connect-Three game, we do want to respond to user's clicks. The game is for two people taking turns in clicking squares. Whenever there is a valid click, we want to change the image's GIF and check if the game is over. Later in this column we explain this function in detail. For now, it is quite obvious that the i and j indices of the clicked image will be useful inside the event handler. Therefore, we pass the i and j indices as clickParam1 and clickParam2, respectively. Here is the complete call to the makeImage() function:

var xBase = 8;
var yBase = 8;
for (var i = 1; i <= 3; i++) {
  for (var j = 1; j <= 3; j++) {
    makeImage("box" + i + "" + j,      // id
              "initialbutton.gif",     // URL
              100,                     // height
              100,                     // width
              "game box",              // alternative
               xBase + (i-1) * 108,    // position from left
               yBase + (j-1) * 108,    // position from top
               i,          // parameter passed to onclick handler
               j);         // parameter passed to onclick handler
  }
}

Next: How to write the event handler

http://www.internet.com


Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: January 29, 2001
Revised: January 29, 2001

URL: http://www.webreference.com/js/column76/7.html