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

From GUILLARD WIKI
Jump to navigation Jump to search
Line 1: Line 1:
<code><script></code><br/>
<syntaxhighlight lang="sql">
&nbsp;<code>function minivileClass(){ </code><br/><br/>


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


<code>window.onload = function(){</code><br/>
  // # Variables
&nbsp;&nbsp;<code> var game = new minivileClass(); </code><br/>
    this.message = "Welcome on the amazing JS world !";
&nbsp;&nbsp;<code> game.newGame();</code><br/>
    this.cards = [
&nbsp;&nbsp;<code> game.updateHtml();</code><br/>
    {number:"1",colorRule:"blue",actionRule:"+1piece",label:"Champs de ble",price:"1"},
<code>}</code><br/>
    {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


<code></script></code><br/><br/>
  // # 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


<code><body></code><br/>
}
&nbsp;&nbsp;<code><fieldset><legend>Available cards</legend></code><br/>
window.onload = function(){
&nbsp;&nbsp;<code><spa n id="allCards"></spa n></code><br/>
  var game = new minivileClass();  
&nbsp;&nbsp;<code> </fieldset></code><br/>
  game.newGame();
<code></body></code><br/>
  game.updateHtml();
}
</script>


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

Revision as of 16:53, 19 April 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>
Retrieved from "http://thomasguillard.fr/wiki/index.php?title=JS_-_How_to_define_a_Javascript_Class&oldid=187"