La page HTML

La page HTML se trouve dans Exemple/ExempleNouvClasse.html. En ouvrant ce fichier vous constaterez que :

• les fonctions javascript se trouvent dans ExempleNouvClasse.js.
• le chargement de la page déclenche l'appel de la fonction Initialiser.
• les trois cellules du tableaux, initialement vides, possèdent les identifiants "0", "1" et "2".
• un clic sur la cellule d'identifiant "i" provoque l'appel de fonction ClicSurCase(i).

La classe Case

Pour réaliser cet exemple nous avons créé une nouvelle classe, nommée Case, représentant le contenu d'une des trois cellules du tableau.

Propriétés de la classe Case

Méthodes de la classe Case

Définition d'une classe en Javascript

Une manière de définir une nouvelle classe en Javascript consiste à en définir un constructeur.

Voici la définition du constructeur de la classe Case:

function Case (id)
{
  this.identifiant = id;  
  this.piece = "";        
  this.couleur = "";      
  
  this.ImagePiece= 
    function () { code de la méthode ImagePiece } 
    
  this.ChangerCouleur=
    function () { code de la méthode ChangerCouleur }
}
         

pour des raisons de lisibilité nous avons ommis le code des méthodes ImagePiece() et ChangerCouleur().

A l'intérieur d'un constructeur, le mot clef this représente la nouvelle instance qui sera créé lorsque ce constructeur sera appelé.

Création d'une instance avec un constructeur

Avant d'aborder le code des méthodes ImagePiece() et ChangerCouleur(), voyons comment une instance de la classe Case peut être crée.

Si on veut par exemple créer une case d'identifiant "0", on pourra écrire:

  var  c = new Case("0"); 

L'exécution de cette instruction génère une nouvelle instance c de la classe Case avec les valeurs de propriétés suivantes:

• c.identifiant = "0" (par l'instruction this.identifiant=id)
• c.couleur="" (par l'instruction this.couleur="")
• c.piece="" (par l'instruction this.piece="")

Ecriture des méthodes

La méthode ImagePiece()

Voici le code de la méthode ImagePiece():

this.ImagePiece=
function ()
{
  var HTML="<img src=\"../../Images/Echecs/"
            +this.piece+this.couleur+
            ".gif\" />";
  document.getElementById(this.identifiant).innerHTML=HTML;      
} 

A l'intérieur d'une méthode, le mot clef this représente l'instance à laquelle on appliquera cette méthode.

Par exemple, si c est une instance de l'objet Case, l'instruction

  c.ImagePiece();

est équivalente à:

  var HTML="<img src=\"../../Images/Echecs/"
            +c.piece+c.couleur+
            ".gif\" />";
  document.getElementById(c.identifiant).innerHTML=HTML;      

Supposons que c contiennent une tour blanche (donc que c.piece="Fou" et c.couleur="Blanc"). Supposons de plus que l'identifiant de la cellule représenté par c soit "1" (donc que c.identifiant="1"). Dans ce cas l'application de la méthode ImagePiece() à c aura exactement l'effet suivant:

• la chaine de caractères
  "<img src="../../Images/Echecs/FouBlanc.gif"/>"
  est affectée à la variable HTML. Cette variable contient donc à présent une balise image faisant référence à l'image du fou blanc contenue dans le fichier FouBlanc.gif du répertoire Echecs.
• cette balise image est insérée à l'intérieur de la cellule d'identifiant "1". Ceci aura donc pour effet d'afficher cette image dans la deuxième cellule du tableau.

La méthode ChangerCouleur()

Voilà le code de la méthode ChangerCouleur():

  this.ChangerCouleur=
    function ()
    {
      if (this.couleur=="Blanc")
      {
        this.couleur="Noir";
      }
      else
      {
        this.couleur="Blanc";
      }      
      this.ImagePiece ();
    }

Elle fonctionne de la manière suivante:

• si la case à laquelle est appliquée cette méthode contient une pièce de couleur blanche, sa couleur est remplacée par "Noir" (par this.couleur="Noir") dans le cas contraire, elle est remplacée par "Blanc" .
• après avoir modifié la couleur de la pièce, la méthode ImagePiece() est appliquée à cette case de manière à mettre à jour la balise image qu'elle contient (et donc son affichage).

La fonction Initialiser

La fonction Initialiser est appelée au chargement de la page. Voici son code:

function Initialiser ()
{
   var i;
   
   t= new Array (3);
   
   for (i=0; i<=2; i++) t[i]= new Case (i);
   
   t[0].piece="Tour"; t[0].couleur="Blanc";
   t[1].piece="Fou"; t[1].couleur="Blanc";
   t[2].piece="Cavalier"; t[2].couleur="Blanc";
   
   for (i=0; i<=2; i++) t[i].ImagePiece();

}

et voilà ce que fait cette fonction:

• elle créé un tableau t de trois éléments (instance de la classe préféfinie Array).
• à chaque élément de ce tableau est affecté une instance de la classe Case. t est donc un tableau de cases.
• les propriétés piece et couleur de chaque case sont initialisées de manière à avoir la tour blanche dans t[0], le fou blanc dans t[1] et le cavalier blanc dans t[2].
• finalement les balises image de ces pièces sont générées dans les cellules du tableau HTML en appliquant la méthode ImagePiece à chaque élément de t.

La fonction ClicSurCase

L'appel de fonction ClicSurCase(i) est appelée lorsque l'utilisateur clique sur une la cellules numéro i tableau. Voici son code:

function ClicSurCase (i)
{
  t[i].ChangerCouleur();
}

ClicSurCase(i) consiste donc simplement à appliquer la méthode ChangerCouleur au ième élément de t, ce qui aura l'effet désiré.