Le blog d'Arcade Village

Javascript est un langage orienté prototype. Qu'est ce que cela veut dire ?
Je vais m'appuyer sur des notions de langage objet pour l'expliquer. Je vous rappelle que vous m'avez promis de posséder les prérequis demandés, aussi, si je vous surprend à faire de grands yeux perdus, ce n'est pas la peine de continuer de lire.

Dans un langage orienté objet, la définition des objets, qu'on appelle classe, est d'abord définie, puis on crée des instances de ces objets, c'est à dire des variables sur le modèle de cette classe.

Dans un langage orienté prototype, on crée une variable à laquelle se rattachent des propriétés (elles-mêmes des variables) et des méthodes (des fonctions). Cet variable peut servir de prototype pour créer d'autres variables possédants les mêmes propriétés et méthodes. Mais à l'inverse du langage objet, cette variable peut être modifié au cours du programme. Ces modifications peuvent être l'ajout ou la modification des propriétés et méthodes.

Dans ma programmation, j'appliquerai les méthodes des langages orientés objet :
- Les prototypes seront définis dans un fichier javascript réservé et portant le nom de l'objet.
- Je ne me permettrai pas de modifier le prototype pendant le programme. J'utiliserai l'équivalent des classes dérivées. Nous le verrons dans les exemples de programme.
Javascript n'est pas un langage typé. Que faire ?
Deuxième gros problème de javascript : on peut déclarer les variables n'importe où et leur attribuer n'importe quelle valeur. Cette possibilité est pratique lorsqu'on veut écrire des script, qui étaient la raison d'être du langage, mais une source inépuisable d'erreurs et de perte de temps.
Dans ma programmation :
- Je définirai toutes les variables en début de fonction.
- J'attribuerai à la définition des variables une valeur qui permettra de connaître son type.

Exemple

function test()

{

  var i = 0; // int

  var s = '' ;  // String



  i = 1 ;

  s = 'salut'

}

Dernier point : Toute ligne sera terminée par un point-virgule.

« Bon, on commence à en avoir marre de ton programme politique, si tu passais à la programmation ? »
En deux pages, je sais déjà ce que vous avez dans la tête. Nous allons donc voir notre premier objet : CCGraphics.

CCGraphics

Puisque vous avez faim, je vous montre directement le code. Je le commente après.

function CCGraphics(ictx)

{

 this.ctx = ictx;

} 



// Certains langage, comme javascript utilisent un begin path / end path



CCGraphics.prototype.beginPaint = function()

{

};



CCGraphics.prototype.endPaint = function()

{

};



CCGraphics.prototype.setColor = function(color)

{

 this.ctx.fillStyle = color;

 this.ctx.strokeStyle = color;

};



CCGraphics.prototype.clearRect = function(x,y,width,height)

{

 this.ctx.clearRect(x,y,width,height);

}



CCGraphics.prototype.drawRect = function(x,y,width,height)

{

 this.ctx.rect(x,y,width,height);

 this.ctx.stroke();

};



CCGraphics.prototype.drawCircle = function(x,y,rayon)

{

 this.ctx.arc(x,y,rayon,0,Math.PI*2,false);

};



CCGraphics.prototype.fillCircle = function(x,y,rayon)

{

 this.ctx.beginPath();

 this.ctx.arc(x,y,rayon,0,Math.PI*2,false);

 this.ctx.fill();

};



CCGraphics.prototype.fillRect = function(x,y,width,height)

{

 this.ctx.fillRect(x,y,width,height);

};



CCGraphics.prototype.clearRect = function(x,y,width,height)

{

 this.ctx.clearRect(x,y,width,height);

};





CCGraphics.prototype.drawLine = function(x1,y1,x2,y2)

{

 this.ctx.beginPath();

 this.ctx.moveTo(x1,y1);

 this.ctx.lineTo(x2,y2);

 this.ctx.stroke();

};





CCGraphics.prototype.drawImage = function(img, x, y )

{

 this.ctx.drawImage(img, x, y);

};



CCGraphics.prototype.drawImage = function(img, x, y, width, height )

{

 this.ctx.drawImage(image, x, y,width,height)

};



CCGraphics.prototype.drawImage = function(img, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)

{

 this.ctx.drawImage(img, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);

};





CCGraphics.prototype.setFont = function( font_family, font_size )

{

 this.ctx.font = font_family+' '+font_size+'px'

};



CCGraphics.prototype.drawString = function(str, x, y )

{

 this.ctx.strokeText(str, x, y);

};

Bienvenue en javascript !
Dès la première fonction, vous comprenez que ce langage est dégueulasse. Mais je vais vous l'expliquer.

function CCGraphics(ictx)

{

 this.ctx = ictx;

}

C'est donc une fonction. Mais c'est aussi pour javascript le moyen de définir un objet qui s'appelle CCGraphics. Pour nous, ce sera le constructeur de la classe. Je laisse les spécialistes du javascript vous expliquer le fonctionnement exact. Moi, je ne vous fais pas perdre votre temps et je vous dis :
« A Rome, fais comme les Romains !».
C'est une citation d'Ambrosius de Milan qui date du 4eme siècle. Elle a fait ses preuves.

Nous avons donc maintenant un objet qui s'appelle CCGraphics. Nous devons maintenant créer ses méthodes. Pour cela nous allons les associer à son prototype.

Au fait, comment créé-t-on une variable du même schéma que CCGraphics ? Comme ça :

var g = new CCGraphics(ctx) ;

Désormais, g possède toutes les propriétés et toutes les méthodes de CCGraphics. Cela ne vous rappelle pas la programmation objet ?
Juste une petite précision. Vous vous demandez sans doute quel est ce paramètre ctx ?
Dans la plupart des système, existent des contextes graphiques. En gros, un contexte graphique est l'endroit où vous pourrez dessiner et les primitives qui vous permettront de le faire. Il paraît donc opportun de se servir de ce contexte pour la portabilité de notre classe (allez, on utilise classe) CCGraphics.

La classe CCGraphics ne contient pour l'instant que les fonctions dont j'ai eu besoin pour réaliser mon Sokoban et un jeu de survie sur lequel je travaille. Elle sera enrichie pour suivant mes besoins.

Je vous explique juste une petite fonction.

CCGraphics.prototype.fillRect = function(x,y,width,height)

{

 this.ctx.fillRect(x,y,width,height);

};

Ces lignes définissent la méthode fillRect de la classe CCGraphics. Cette méthode permet de remplir un rectangle. Comme vous pouvez le voir, elle appelle une fonction javascript qui porte le même nom. C'est le hasard. Dans une autre langage elle pourrait appeler une autre fonction. Mais nous n'aurions pas à modifier le code de notre jeu. Juste celui de la classe CCGraphics. Vous pourrez noter aussi la présence de this.ctx. C'est le fameux contexte graphique que nous avons copié dans une variable lors de la création de notre classe.

La classe CCGraphics se trouve dans un fichier appelé cc_graphics.js. Pour être puriste, j'aurais du appeler ce fichier CCGraphics.js.

Javascript connaît le mot classe et propose de créer des classes à la manière des langages objets. Mais cette notation est juste un habillage du mécanisme que nous venons de voir et je pensais important de l'utiliser en premier.

Vous avez noté sans doute que j'ai parlé de mon Sokoban. A la fin de ce cours, vous serez capable de le refaire, de le pomper sur votre site et, à force d'en faire la publicité sur les réseaux sociaux, de devenir millionnaire.