CodeS-SourceS
Rechercher un code, un tuto, une réponse

Presentation de la programmation orientée objet (p2o)

Juin 2017


Javascript - Présentation de la programmation orientée objet



Description


Voici un tutoriel qui vous expliquera pourquoi et comment programmer objet en javascript.

Pourquoi la programmation orientée objet


La programmation orientée objet n'est que peu utilisée en javascript, mais de nombreux langages l'utilisent (C++, Java, PHP...). La Programmation Orientée Objet (ou POO ou P2O) nous permet :
  • d'obtenir un code plus clair et plus facilement modifiable,
  • d'utiliser les classes pour plusieurs script.

Définitions

Qu'est ce qu'une classe?


Une classe est une structure. Elle détermine l'ensemble des propriétés qui composeront l'objet. Ainsi la programmation orientée objet permet de créer des modèles appelés classe.
Concrètement, une classe est une structure regroupant des variables et des fonctions. Chacune de ces fonctions aura accès aux variables de cette structure.

Dès que l'on utilise ce modèle (la classe) on dit que l'on crée un objet de cette classe.

Qu'est ce qu'un objet


On parle d'un objet en tant qu'instance d'une classe. Un objet possède les propriétés de la classe.
Un objet (comme une voiture) a des caractéristiques : une forme, une taille, une couleur etc.
Toutes les caractéristiques de ce modèle ("une forme, une taille, une couleur.") s'appellent membres.

Exemple


Je définis une classe appelée voiture. Dans cette classe, nous pouvons définir des propriétés : une marque, un modèle, une couleur, un kilométrage. Ces propriétés seront communes aux objets instances de cette classe. Dans l'exemple de la classe voiture, nous pouvons aussi bien instancier une Renault Mégane Verte de 121 000 Kms, qu'une Citroën DS noire de 325 002 Kms qu'une Ferrari 250 GTO bleue de 12 516 Kms...

En lignes de codes


<script language=javascript>
function clvoiture (){
// remarquez que l'on utilise function pour créer une classe et c'est pour cela 
// que je rajoute cl et ainsi présenter que c'est une classe ....

var modele;
var marque;
var couleur;
var kilometres;
}
</script>

Intégrer des déplacements


Imaginons que notre voiture soit en état de marche ...

Je veux bien que le modèle, la marque, la couleur (quoique) ne change pas lorsqu'on avance, mais les kilomètres... C'est ainsi qu'il faut une fonction, appelée méthode, pour ajouter des kilomètres au compteur.

Exemple codé


<script language=javascript>
function mclavance (durée, vitesse)
// et oui (faisons simple : vitesse en km/h et la durée en h)
{
this.kilometres += durée * vitesse;
}

function clvoiture (){
var modele;
var marque;
var couleur;
var kilometres;
var avance ;
this.avance = mclavance; // pas de parenthèse ici...
}
</script>

Une classe, je connais, mais comment l'utiliser


Sachez que vous faites des classes depuis que vous faites du javascript.
Et oui n'avez vous jamais écrit :

tab = new Array(8,16);// cela crée un tableau avec un 8 et un 16 ...
longueurtab = tab.lenght;


mais aussi :

var chaine = "la classe";
longueurchaine = chaine.lenght;


Pour plus de connaissances sur les arrays : http://www.commentcamarche.net/javascript/jsarray.php3

Exemple de la voiture


<script language=javascript>
function mclavance (durée, vitesse)// notez le  mcl.. (membres d'une classe)
{
    this.kilometres += durée * vitesse;
};

function clvoiture ()
{
    var modele;
    var marque;
    var couleur;
    var kilometres;
    var avance 
    this.avance = mclavance; // pas de parenthèse ici...
};
voiture1  =  new clvoiture;
voiture1.modele = "espace";
voiture1.marque = "renault";
voiture1.couleur= "rouge";
voiture1.kilometres = 0; // elle est surement neuve...
voiture1.avance(1.5,30); // elle roule 1.5 h et a 30 ... 
</script>

Quelques trucs utiles


clvoiture est une fonction vous pouvez ainsi lui passer des arguments ("new Array(8,16);");

Exemple codé


<script language=javascript>
function mclavance (durée, vitesse)
{
    this.kilometres += durée * vitesse;
};

function clvoiture (modele,marque,couleur,kilometres)
{
    // var modele = modele; NE MARCHE PAS donc:
    var modele;
    this.modele = modele;
    var marque;
    this.marque = marque;
    var couleur;
    this.couleur = couleur;
    // le javascript étant très tolérant : on peut faire ceci :
    this.kilometres = kilometres;
    var avance 
    this.avance = mclavance; // pas de parenthèse ici...
};

voiture1  =  new clvoiture("espace","marque","grise",0);
voiture1.avance(1.5,30);// elle roule 1.5 h et a 30 ... ET des parenthèses ET on dit avance;
// sachez que la voiture a maintenant 45 kilomètres....
</script>


Sachez que les objets sont des variables donc passable en arguments ...

Une hiérarchie


Pensez qu'il existe des camions (et des cars (au sens français)). Pour eux, il faut ajouter des caractéristiques en plus (chauffeur,...).

Ainsi les classes ont une hiérarchie et peuvent ainsi récupérer des propriétés de leurs aînées...

<script language=javascript>
function mclavance (durée, vitesse)
{
    this.kilometres += durée * vitesse;
};

function clvoiture (modele,marque,couleur,kilometres)
{
    this.modele = modele;
    this.marque = marque;
    this.couleur = couleur;
    this.kilometres = kilometres;
    this.avance = mclavance; // pas de parenthèse ici...
};

sclcamion.prototype = new clvoiture();

function sclcamion (modele,marque,couleur,kilometres,chauffeur)
{
    this.parent = clvoiture;
    this.parent(modele,marque,couleur,kilometres); 
    this.chauffeur =chauffeur;
};
</script>

Voila je pense que le problème a été traité; bonne classification ...

N'hésitez pas à rajouter des commentaires...

A voir également

Publié par rrk275.
Ce document intitulé «  Presentation de la programmation orientée objet (p2o)  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Imprimer une page sans ses boutons
Tutoriel sur window.open