Premiers pas en POO

bonjour !

La programmation orientée objet (ses amis l’appellent POO) ! Voila une expression troublante et un peu effrayante au premier abord (…et qui le reste encore!).

Il y a maintenant 5 mois je suis curieusement allé voir sur notre bon vieux wikipédia de quoi il en retournait et comme vous vous en doutez il me fût impossible d’en comprendre quoi que ce soit, en fait sans m’en rendre compte je faisais les choses complètement à l’envers. Le peu de chemin que j’ai parcouru sur la longue et facétieuse route de la programmation m’a appris qu’il fallait toujours commencer par de petites choses simples pour ensuite disposer de briques de plus en plus complexes, partant de ce principe lire un traité théorique sur une élaboration complexe, fruit d’années de réflexion, ne pouvait que laisser perplexe.

Tout récemment j’ai fini mon premier projet orienté objet, et je vais éssayer tant bien que mal d’expliciter mon raisonnement, ce que j’ai accompli est assez simple il s’agit d’un petit code (moins de 300 lignes) et je pense qu’il permet de comprendre le cheminement parcouru. J’ai choisi d’utiliser du Javascript moderne afin de disposer d’outils plus intuitifs dans la conception des classes ( la gestion des classes en javascript classique repose sur une syntaxe très déroutante).

Tout d’abord le résultat final du projet est visible ici
Il s’agit d’un automate cellulaire, une grille recalculera les positions de ses éléments suivant quelques règles simples (le plus compliqué est une multiplication je crois^^)

Je vais seulement commenter le code en ES6 et une partie du code HTML (avec des morceaux de Bootstrap dedans !). Commençons par le commencement.


let sTimer
let cellsNumb
let config
let validTab = 0
let comptage
let renderTab = []
let initialiseur = 0;
let gridSize
let containerSize
let canvasGrid;
let mecanics
let v = 1
let comptageTab = []

function init(){
config = new Config;
canvasGrid = new CanvasGrid;
mecanics = new Mecanics;
gridSize = document.getElementById('celullarGrid')
canvasGrid.setup()

Voila les premières lignes de mon code ES6, on déclare le maximum de variables dès le départ afin de simplifier la lecture. Pour utiliser des classes on doit les instancier, j’ai donc déclaré des variables avant de les assigner aux classes qui seront afficher plus bas. J’ai essayé de donner du sens aux noms de mes variables pour éviter de se perdre totalement.

La function init() se lance au chargement de la page comme on peut le voir ici


<body onload = "init()"></body>

en plus d’instancier les classes elle lancera canvasgrid.setup(), une méthode (c’est à dire fonction au sein d’une classe) qui remplira la grille. le premier terme correspond à l’instance de la classe (ici canvasgrid) et le deuxième est le nom de la fonction tout simplement. voyons voir un peu de quoi est fait cette classe ( ou objet)

class CanvasGrid {
constructor(cells1) {
this.cells1 = cells1
}
setup(){
/* cadre externe */
comptage = 0;
cellsNumb = document.getElementById('cellsNum').value
let contain = document.getElementById('canvasContainer')
let cadre = document.getElementById('celullarGrid');
let ctx = cadre.getContext("2d");
let heightC = (contain.offsetHeight)
let widthC = contain.offsetWidth
cadre.width = contain.offsetWidth
cadre.height = (contain.offsetHeight)
ctx.beginPath();
ctx.lineWidth = 0.5
ctx.moveTo(0,0);
ctx.lineTo(widthC,0);
ctx.lineTo(widthC,heightC);
ctx.lineTo(0,heightC);
ctx.lineTo(0,0);
ctx.fillStyle = "white";
ctx.fillStroke = "black";
ctx.stroke();
ctx.fill();
ctx.closePath();

Dans cette première partie de la classe canvasgrid on va tout d’abord définir les propriétés

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s