Login

Save Password - Forgot Pass? 		Not a member?
Become a DC
member now!



         DHTML library
  • Object Oriented Programming (OOP) and DHTML
  • Move method
  • The code
  • Library page
      Rate this tutorial:
    This tutorial have been read 90216 times.

    Print-friendly version

    		•

    DHTML library
    Written 07/03/2001 by Thomas Brattli and Sergi Meseguer. Last updated 07/10/2001.


    Object Oriented Programming (OOP) and DHTML

    We'll divide these lessons in 3 pages guiding you through the building of objects and association of funtions to them. At the beginning we'll just use pointer variables to explain what objects do, and then we'll explain how to properly build objects to assign functions and properties to them, in order to save up some space and make the code reusable. Finally, before we start to discuss the library code, we'll show you a simple, usable, example to move objects around the window. So here we go.

    Basically, just for starting, you can see an object like a pointer to a layer. For instance, if you have layerA, using an object constructor you would avoid having to refer to that layerA as: document.layerA for ns4, document.all.layerA for ie4+ or document.getElementById('layerA') for ns5 and ie5+ depending on the browser, everytime you want to use or do anything to that layer.

    Once you get this, everything is easier. :-) As an example, a simple (very improveable) object constructor could be: 

    if(bw.ns4) {lyrAObj= document.layerA}
if (bw.ie4 || bw.ie5) {document.all.layerA}
if (bw.ns5 || bw.ie55 || bw.ie6) {document.getElementById('layerA')}
    But this is too long, so we could use booleans to shorten this a little. A boolean is a way to compare different values in a true/false condition, giving different results depending on the comparison result. The basic use are as follow: varA=(a==3)?1:0 will return varA being true if a is equal to 3 and false if not. To link different comparisons, we can use: 
    varA=(a==1)?"case one":(a==2)?"case two":(a==3)?"case three":0
    and so on. In the first case, if a==3 varA will be true, whereas in case two will be "case three". This way we can now look at the constructor again: 
    lyrAObj= (bw.ns4)?document.layerA:(bw.ie4 || bw.ie5)?document.all.layerA:
  (bw.ns5 || bw.ie55 || bw.ie6)?document.getElementById('layerA'):0;
    or 
    lyrAObj= (bw.ns4)?document.parentLayer.document.layers.layerA:
  (bw.ie4 || bw.ie5)?document.all.layerA:(bw.ns5 || bw.ie55 || bw.ie6)?
  document.getElementById('layerA'):0;
    for nested layers (very important issue in netscape 4), assuming of course you are using Thomas browsercheck function (more on this later).

    As we can see, the comparison test would be "Is the object bw.ns4 true?". If it's true, then the new object lyrAObj will have the value document.layerA, and so on.

    Well, the example above tried to do a simple introduction to defining and using objects. But as I said before, the object constructor is a simple one. As you guessed it, if you want to make a new object you will have to write these lines for any object you would need. The solution is using a true object constructor that automatically retrieves all these informations and lets you use any object with any associated function easily.

    Move method »

    Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved.