Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Location
    Orlando, FL
    Posts
    159
    Thanks
    4
    Thanked 8 Times in 8 Posts

    Question Looking for advice on object design

    I am looking for advice on the best approach at accomplishing some OOP using javascript.

    I have a page where the user will build/design their own cake. They can give the cake a name, decide how many tiers the cake will have, pick a type of cake to use for each tier, etc. Originally, I made the cake itself the object and had the number of tiers it will have as an array of that cake object. But, since the tiers themselves will have properties to them (a filling, frosting, color) I thought that each tier would need to be their own object, making a cake with three tiers actually be made up of four objects, 1 for the cake and 1 for each tier. Or, would I just have the cake object with an array of tier objects inside it?

    Which is the best approach? I want to know because I want to do it right and I want to do it the way a master programmer would do it. I apologize if all that sounded convoluted.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    in principle

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div id="cake" >
      Name <input name="" /> <input type="button" name="" value="Start" />
      <br />
      <select size="1">
      <option>name</option>
      </select>
    
      <select size="1">
       <option>layers</option>
       <option value="layer 1" >layer 1</option>
       <option value="layer 2" >layer 2</option>
       <option value="layer 3" >layer 3</option>
      </select>
    
      <select size="1">
       <option value="" >filling</option>
       <option value="none" >none</option>
       <option value="filling 1" >filling 1</option>
       <option value="filling 2" >filling 2</option>
       <option value="filling 3" >filling 3</option>
      </select>
    
      <select size="1">
       <option value="" >frosting</option>
       <option value="none" >none</option>
       <option value="frosting 1" >frosting 1</option>
       <option value="frosting 2" >frosting 2</option>
       <option value="frosting 3" >frosting 3</option>
      </select>
    
      <select size="1">
       <option value="" >color</option>
       <option value="none" >none</option>
       <option value="color 1" >color 1</option>
       <option value="color 2" >color 2</option>
       <option value="color 3" >color 3</option>
      </select>
    
      <div></div>
    
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Cake(o){
     var d=document.getElementById(o.DisplayID);
     if (d){
      this.txt=o.text;
      this.ips=d.getElementsByTagName('INPUT');
      this.sel=d.getElementsByTagName('SELECT');
      this.ds=d.getElementsByTagName('DIV');
      this.addevt(this.ips[1],'click','name');
      for (var z0=0;z0<this.sel.length;z0++){
       this.addevt(this.sel[z0],'change','make',z0);
      }
     }
    }
    
    Cake.prototype={
    
     name:function(){
      var nme=this.ips[0].value,s=this.sel,z0=1;
      if (nme){
       if (!this[nme]){
        this[nme]={
         n:s[0].options.length,
         i:[],
         layers:[[]]
        }
        s[0].options[s[0].options.length]=new Option(nme,nme);
       }
       if (this[nme]){
        s[0].selectedIndex=this[nme].n;
        this.make(0);
       }
      }
     },
    
     make:function(n){
      var nme=this.sel[0].value,o=this[nme],s=this.sel,i,txt='',z0=1,z1=1,z1a;
      if (o){
       if (o!=this.o){
        for (;z0<s.length;z0++){
         s[z0].selectedIndex=0;
        }
       }
       i=s[1].selectedIndex;
       o.layers[i]=o.layers[i]||[];
       o.layers[i][0]=nme;
       o.layers[i][n]=this.sel[n].value||o.layers[i][n];
       for (;z1<o.layers.length;z1++){
        if (o.layers[z1]){
         txt+='<br>';
         for (z1a=0;z1a<this.txt.length;z1a++){
          txt+=this.txt[z1a]+(o.layers[z1][z1a]||'')+'<br>';
         }
        }
       }
       this.ds[0].innerHTML=txt;
       this.o=o;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    new Cake({
     DisplayID:'cake',
     text:['name: ','layer: ','filling: ','frosting: ','color: ']
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •