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

From GUILLARD WIKI
Jump to navigation Jump to search
Line 1: Line 1:
<script>
<code><script>


function minivileClass(){  
<code>function minivileClass(){ </code>


// # Variables
<code>&nbsp;// # Variables</code>
this.message = "Welcome on the amazing JS world !";
<code>&nbsp;this.message = "Welcome on the amazing JS world !";</code>
this.cards = [
<code>&nbsp;this.cards = [</code>
{number:"1",colorRule:"blue",actionRule:"+1piece",label:"Champs de ble",price:"1"},
<code>&nbsp;&nbsp;{number:"1",colorRule:"blue",actionRule:"+1piece",label:"Champs de ble",price:"1"},</code>
{number:"2-3",colorRule:"green",actionRule:"+1piece",label:"Boulangerie",price:"1"},
<code>&nbsp;&nbsp;{number:"2-3",colorRule:"green",actionRule:"+1piece",label:"Boulangerie",price:"1"},</code>
{number:"3",colorRule:"red",actionRule:"-1pieceToCurrentPlayer",label:"Cafe",price:"2"},
<code>&nbsp;&nbsp;{number:"3",colorRule:"red",actionRule:"-1pieceToCurrentPlayer",label:"Cafe",price:"2"},</code>
{number:"5",colorRule:"blue",actionRule:"+1piece",label:"Foret",price:"3"},
<code>&nbsp;&nbsp;{number:"5",colorRule:"blue",actionRule:"+1piece",label:"Foret",price:"3"},</code>
{number:"6",colorRule:"violet",actionRule:"+2piecesFromOtherPlayers",label:"Stade",price:"6"}
<code>&nbsp;&nbsp;{number:"6",colorRule:"violet",actionRule:"+2piecesFromOtherPlayers",label:"Stade",price:"6"}</code>
];
<code>&nbsp;];</code>
// # Variables
<code>&nbsp;// # Variables</code>
// # Constructor
<code>&nbsp;// # Constructor</code>
    if(typeof minivileClass.initialized == "undefined"){  
<code>&nbsp;&nbsp;if(typeof minivileClass.initialized == "undefined"){ </code>
// # Functions
<code>&nbsp;&nbsp;// # Functions</code>
minivileClass.prototype.newGame = function(){  
<code>&nbsp;&nbsp;minivileClass.prototype.newGame = function(){ </code>
alert(this.message);
<code>&nbsp;&nbsp;&nbsp;alert(this.message);</code>
        };
<code>&nbsp;&nbsp;};
minivileClass.prototype.updateHtml = function(){  
<code>&nbsp;&nbsp;minivileClass.prototype.updateHtml = function(){ </code>
for (var i in this.cards)
<code>&nbsp;&nbsp;&nbsp;for (var i in this.cards)</code>
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>";
<code>&nbsp;&nbsp;&nbsp;&nbsp;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>";</code>
};
<code>&nbsp;&nbsp;};</code>
// # Functions
<code>&nbsp;&nbsp;// # Functions</code>
        minivileClass.initialized = true;  
<code>&nbsp;&nbsp;&nbsp;minivileClass.initialized = true; </code>
    }
<code>&nbsp;&nbsp;}</code>
// # Constructor
<code>&nbsp;// # Constructor </code>
}  
<code>} </code>


window.onload = function(){
<code>window.onload = function(){</code>
var game = new minivileClass();  
<code>&nbsp;var game = new minivileClass(); </code>
game.newGame();
<code>&nbsp;game.newGame();</code>
game.updateHtml();
<code>&nbsp;game.updateHtml();</code>
}
<code>}</code>


</script>
<code></script></code>


<body>
<code><body></code>
<fieldset><legend>Available cards</legend>
<code>&nbsp;<fieldset><legend>Available cards</legend></code>
<span id="allCards"></span>
<code>&nbsp;&nbsp;<span id="allCards"></span></code>
</fieldset><br/>
<code>&nbsp;</fieldset><br/></code>
</body>
<code></body></code>&nbsp;

Revision as of 16:26, 14 November 2016

<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>     </fieldset>
 </body> 

Retrieved from "http://thomasguillard.fr/wiki/index.php?title=JS_-_How_to_define_a_Javascript_Class&oldid=46"