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