Difference between revisions of "JS - How to define a Javascript Class"
| Line 1: | Line 1: | ||
<code><script></code> | <code><script></code><br/> | ||
<code>function minivileClass(){ </code><br/><br/> | |||
<code>// # Variables</code><br/> | |||
<code>this.message = "Welcome on the amazing JS world !";</code><br/> | |||
<code> // # Variables</code> | <code>this.cards = [</code><br/> | ||
<code> this.message = "Welcome on the amazing JS world !";</code> | <code>{number:"1",colorRule:"blue",actionRule:"+1piece",label:"Champs de ble",price:"1"},</code><br/> | ||
<code> this.cards = [</code> | <code>{number:"2-3",colorRule:"green",actionRule:"+1piece",label:"Boulangerie",price:"1"},</code><br/> | ||
<code> | <code>{number:"3",colorRule:"red",actionRule:"-1pieceToCurrentPlayer",label:"Cafe",price:"2"},</code><br/> | ||
<code> | <code>{number:"5",colorRule:"blue",actionRule:"+1piece",label:"Foret",price:"3"},</code><br/> | ||
<code> | <code>{number:"6",colorRule:"violet",actionRule:"+2piecesFromOtherPlayers",label:"Stade",price:"6"}</code><br/> | ||
<code> | <code>];</code><br/> | ||
<code> | <code>// # Variables</code><br/><br/> | ||
<code> ];</code> | |||
<code> // # Variables</code> | |||
<code> // # Constructor</code> | <code>// # Constructor</code><br/> | ||
<code> | <code>if(typeof minivileClass.initialized == "undefined"){ </code><br/> | ||
<code>// # Functions</code><br/> | |||
<code> | <code>minivileClass.prototype.newGame = function(){ </code><br/> | ||
<code> | <code>alert(this.message);</code><br/> | ||
<code> | <code>};</code><br/> | ||
<code> | |||
<code> | <code>minivileClass.prototype.updateHtml = function(){ </code><br/> | ||
<code> | <code>for (var i in this.cards)</code><br/> | ||
<code> // # Constructor </code> | <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/> | ||
<code>} </code> | <code>};</code><br/> | ||
<code>// # Functions</code><br/> | |||
<code>minivileClass.initialized = true; </code><br/> | |||
<code>}</code><br/> | |||
<code>// # Constructor </code><br/><br/> | |||
<code>} </code><br/> | |||
<code>window.onload = function(){</code> | <code>window.onload = function(){</code><br/> | ||
<code> var game = new minivileClass(); </code> | <code> var game = new minivileClass(); </code><br/> | ||
<code> game.newGame();</code> | <code> game.newGame();</code><br/> | ||
<code> game.updateHtml();</code> | <code> game.updateHtml();</code><br/> | ||
<code>}</code> | <code>}</code><br/> | ||
<code></script></code> | <code></script></code><br/><br/> | ||
<code><body></code> | <code><body></code><br/> | ||
<code> <fieldset><legend>Available cards</legend></code> | <code> <fieldset><legend>Available cards</legend></code><br/> | ||
<code> <span id="allCards"></span></code> | <code> <span id="allCards"></span></code><br/> | ||
<code> </fieldset>< | <code> </fieldset></code><br/> | ||
<code></body></code> | <code></body></code><br/> | ||
Revision as of 12:15, 22 December 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>