Difference between revisions of "JS - How to define a Javascript Class"

From GUILLARD WIKI
Jump to navigation Jump to search
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
<syntaxhighlight lang="javascript">
<script>
<script>


function minivileClass(){  
function minivileClass(){  


// # Variables
  // # Variables
this.message = "Welcome on the amazing JS world !";
    this.message = "Welcome on the amazing JS world !";
this.cards = [
    this.cards = [
{number:"1",colorRule:"blue",actionRule:"+1piece",label:"Champs de ble",price:"1"},
    {number:"1",colorRule:"blue",actionRule:"+1piece",label:"Champs de ble",price:"1"},
{number:"2-3",colorRule:"green",actionRule:"+1piece",label:"Boulangerie",price:"1"},
    {number:"2-3",colorRule:"green",actionRule:"+1piece",label:"Boulangerie",price:"1"},
{number:"3",colorRule:"red",actionRule:"-1pieceToCurrentPlayer",label:"Cafe",price:"2"},
    {number:"3",colorRule:"red",actionRule:"-1pieceToCurrentPlayer",label:"Cafe",price:"2"},
{number:"5",colorRule:"blue",actionRule:"+1piece",label:"Foret",price:"3"},
    {number:"5",colorRule:"blue",actionRule:"+1piece",label:"Foret",price:"3"},
{number:"6",colorRule:"violet",actionRule:"+2piecesFromOtherPlayers",label:"Stade",price:"6"}
    {number:"6",colorRule:"violet",actionRule:"+2piecesFromOtherPlayers",label:"Stade",price:"6"}
];
    ];
// # Variables
  // # Variables
 
// # Constructor
  // # Constructor
    if(typeof minivileClass.initialized == "undefined"){  
  if(typeof minivileClass.initialized == "undefined"){  
       
// # Functions
        // # Functions
minivileClass.prototype.newGame = function(){  
        minivileClass.prototype.newGame = function(){  
alert(this.message);
          alert(this.message);
         };
         };
        minivileClass.prototype.updateHtml = function(){  
minivileClass.prototype.updateHtml = function(){  
          for (var i in this.cards)
for (var i in this.cards)
              document.getElementById("allCards").innerHTML =  
document.getElementById("allCards").innerHTML = document.getElementById("allCards").innerHTML + '<span style="border:1px solid black; align:center; margin: 5px; color:white; background-color:'+this.cards[i]['colorRule']+'";>'+this.cards[i]['number']+" "+this.cards[i]['label']+"</span>";
              document.getElementById("allCards").innerHTML + ''+this.cards[i]['number']+" "+this.cards[i]['label']+"";
};
        };
// # Functions
        // # Functions
 
        minivileClass.initialized = true;  
  minivileClass.initialized = true;  
    }
  }
// # Constructor
  // # Constructor
 
}  
}  


window.onload = function(){
window.onload = function(){
var game = new minivileClass();  
    var game = new minivileClass();  
game.newGame();
    game.newGame();
game.updateHtml();
    game.updateHtml();
}
}


Line 42: Line 44:


<body>
<body>
<fieldset><legend>Available cards</legend>
    <fieldset><legend>Available cards</legend>
<span id="allCards"></span>
        <spa n id="allCards"></spa n>
</fieldset><br/>
    </fieldset>
</body>
</body>
</syntaxhighlight>

Latest revision as of 10:56, 18 May 2018

<script>

 function minivileClass(){ 

   // # Variables
    this.message = "Welcome on the amazing JS world !";
    this.cards = [
     {number:"1",colorRule:"blue",actionRule:"+1piece",label:"Champs de ble",price:"1"},
     {number:"2-3",colorRule:"green",actionRule:"+1piece",label:"Boulangerie",price:"1"},
     {number:"3",colorRule:"red",actionRule:"-1pieceToCurrentPlayer",label:"Cafe",price:"2"},
     {number:"5",colorRule:"blue",actionRule:"+1piece",label:"Foret",price:"3"},
     {number:"6",colorRule:"violet",actionRule:"+2piecesFromOtherPlayers",label:"Stade",price:"6"}
    ];
   // # Variables

   // # Constructor
   if(typeof minivileClass.initialized == "undefined"){ 
        
        // # Functions
        minivileClass.prototype.newGame = function(){ 
          alert(this.message);
        };
        minivileClass.prototype.updateHtml = function(){ 
           for (var i in this.cards)
               document.getElementById("allCards").innerHTML = 
               document.getElementById("allCards").innerHTML + ''+this.cards[i]['number']+" "+this.cards[i]['label']+"";
        };
        // # Functions

   minivileClass.initialized = true; 
   }
   // # Constructor	

} 

window.onload = function(){
    var game = new minivileClass(); 
    game.newGame();
    game.updateHtml();
}

</script>

<body>
    <fieldset><legend>Available cards</legend>
         <spa n id="allCards"></spa n>
    </fieldset>
</body>