Introducing DOCJSLIB, Part I: Writing DHTML Applications - Doc JavaScript

Writing DHTML 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:

• imgID. Each square must have a unique ID. For example, you can concatenate the "box" string with the square's i and j. The top left square will be ID'd as box11, the second square on the top line will be ID'd as box12, etc.
• imgURL. This is the URL of the initial GIF that will be loaded in each square. The URL is "initialbutton.gif".
• imgHeight. This is the height of the image's GIF. Since we don't want to distort the GIF appearance, we specify the original size of the GIF which is 100.
• imgWidth. This is the width of the image's GIF. Since we don't want to distort the GIF appearance, we specify the original size of the GIF which is 100.
• imgAlt. This is the alternative text that will appear in the area of the image, until it is fully loaded. Just pick any message that makes sense. We used "game box".
• posFromLeft. This is the absolute horizontal coordinate of the image's top left corner. As explained above, it should be xBase + (i-1) * 108.
• posFromTop. This is the absolute vertical coordinate of the image's top left corner. As explained above, it should be yBase + (j-1) * 108.
• clickParam1. This is the first of two parameters that you can pass to the handleImageClick() event handler. For reasons explained later in this page, we decided to pass the i coordinate of the image.
• clickParam2. This is the second of two parameters that you can pass to the handleImageClick() event handler. For reasons explained later in this page, we decided to pass the j coordinate of the image.

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
  }
}

Created: October 12, 1998
Revised: October 12, 1998

URL: https://www.webreference.com/js/column27/appbody.html