Creating DHTML Applications - (5/8) | WebReference

Creating DHTML Applications - (5/8)

To page 1To page 2To page 3To page 3acurrent pageTo page 4To page 4aTo page 5
[previous][next]

Creating DHTML Applications

BEHAVIOR Scripting

Now that we have solved (or know how to solve) all the DOM and PROPERTY related problems, we can concentrate on the most exciting part of a project: "How are we going to solve the 'algorithm,' the core problem?"

Consider this simple example (opens in a new window): the objective is to animate the layer on the page that we used in the previous example. Every time you click a link, the layer should move 50px to the right, become 5% smaller, the image inside it should toggle to the alternative image, and we also want to count the amount of clicks.

We know that DHTML is about changing properties of layers, so let's analyse the problem (actions are in bold):

  • Move 50px to the right:
    Before we can move it to the right, we have to know the position (1), add 50 (2), and set a new left-position(3).
  • 5% smaller:
    We have to find out the initial width (4), divide it by 20 (5), subtract from original (6),
    and set the new width property (7).
  • Toggle the image:
    We have 2 images, so we need to know which one is displaying currently(8) and then set the source-property(9) of the image to the other value.
  • Count the clicks:
    We want to know the amount of previous clicks(10), add 1(11) to it, and display it. To display it, we decide to write the value in 'countLayer'(12).

Now that we know what to do, we can translate this algorithm to syntax (note that this is an example only and there are many ways of solving a problem - this is merely a way of illustrating the process):

//set a few initial values as global variables:
var mainLayerPos = 10; //know the position (1)
var clicks = 0         //amount of past clicks(10) -> set to 0 to start with
	
function example() {
   //add 50 to the position(2):
   mainLayerPos += 50;//we store the value in the same variable, 
                      //so we can 'save it for later'
   //set a new left-position(3):
   moveLayer('mainLayer',mainLayerPos,10);//we use a function we already
                                          //know to set the left-property of 
                                          //the mainlayer. Therefore we don't 
                                          //need to think about browser 
                                          //incompatibilities etc.
   //initial width (4), we already know how to measure the width of a layer:
   var tempWidth = getWidth('mainLayer');
   //divide it by 20(5), subtract(6). This is just math:
   tempWidth = tempWidth - (tempWidth/20);
   //set new width property(7):
   //We don't know yet how to do that, so instead of doing this 
   //in this function, we can develop a general function (setWidth) 
   //that sets the width of a layer, so we can add it to our 
   //'library':
   setWidth('mainLayer',tempWidth);
   //which one is displaying(8):
   var tempSource = mElement('myImage2','mainLayer','iMageZ').src;
   //this returns a full path, we only want the filename, not the path:
   var re = /\/|\\/ //regular expression, matches / or \
   var tmpArray = tempSource.split(re);
   var tempFile = tmpArray[tmpArray.length-1];//this is the last string in 
                                              //the array, which is the file 
                                              //we're after
   //set the source-property(9), we could build a new function for that, 
   //but the mElement function solves all the exceptional coding already:
   if (tempFile == "shades.gif") {
      mElement('myImage2','mainLayer','iMageZ').src = "shades2.gif";
   } else {
      mElement('myImage2','mainLayer','iMageZ').src = "shades.gif";
   }
   //this previous bit of code is quite long, so it would be 
   //a good idea to make that a separate function
		
   //add 1(11):
   clicks++;
   //write the value in 'secondLayer'(12):
   //we don't have a function to change to content-property 
   //of a layer, so we make one:
   writeDiv('countLayer',clicks);
}

Final result: example (opens in a new window).

We see now that we were able to translate our thoughts into syntax fairly easily.

Other advantages of this method are that the code should now work on all the platforms that we wrote the property functions for (because there is no exceptional coding in the business logic), and the code will be easy to 'read' because we used mostly existing 'assets.' We developed new assets (property scripts) using the same methodology.

Contents:


To page 1To page 2To page 3To page 3acurrent pageTo page 4To page 4aTo page 5
[previous][next]


Created: July 23, 2001
Revised: July 23, 2001

URL: http://webreference.com/programming/javascript/dhtmlapps/3b.html