Introduction
au paradigme objet
Le paradigme objet
* Paradigme objet = ensemble de concepts de modélisation
* Modélisation = représentation simplifiée d'un système
* Plusieurs modèles possibles pour un système
* Ne sont représentés que les éléments pertinents pour l'étude
* Types de systèmes
* Organisationnels: entreprise, école...
* Biologiques: organisme, écosystème...
* Informatiques: réseaux, logiciel, système d'information...
* ...
* Modélisation orientée objet
* Modélisation reposant sur les concepts du paradigme objet
* Un formalisme universel: UML
* Programmation orientée objet
* Programmation intégrant les concepts du paradigme objet
* Langages généralistes orientés objet: C++, Java, C#...
* Pour le Web: JavaScript et PHP intègrent des concepts objet
Les principes fondateurs (1/3)
* Encapsulation
* Variables et fonctions réunies dans une même entité: la classe
* L'accès à ces éléments peut être contrôlé
* Permet de masquer les détails non nécessaires à l'utilisation
* Exemple
* Eléments nécessaires pour dessiner une forme géométrique
* Des coordonnées et une couleur
* Une fonction qui permet de tracer la forme
* Définition d'une classe "Forme"
* Trois variables: x, y et couleur
* Une fonction: tracer
Les principes fondateurs (2/3)
* Héritage
* Permet de définir une hiérarchie entre classes
* Classe fille hérite des variables et fonctions de sa mère
* Classe fille possède ses propres variables et fonctions
* Exemple
* Un rectangle est une forme géométrique
* Définition d'une classe "Rectangle"
* Hérite de la classe "Forme"
* Trois variables: x, y, et couleur
* Une fonction: tracer
* Possède ses propres caractéristiques
* Deux variables: largeur et hauteur
* Une fonction "tracer" différente
Les principes fondateurs (3/3)
* Polymorphisme
* Possibilité pour une fonction de prendre plusieurs formes
* Souvent utilisé en combinaison avec l'héritage
* Possibilité de redéfinir une fonction héritée: "redéfinition"
* Accès par la classe mère ==> polymorphisme
* Exemple
* Un rectangle et un cercle sont des formes géométriques
* Chacun a des variables et fonctions propres
* Fonctions "tracer" différentes
* Manipulation d'une forme par la classe "Forme"
* Que fait l'appel à la fonction "tracer" de la classe mère ?
* Rectangle ==> appel à "tracer" de "Rectangle"
* Cercle ==> appel à "tracer" de "Cercle"
Classes et objets
* Un objet est une entité
* Chose concrète ou abstraite
* Ayant un intérêt pour notre étude
* Pouvant être reconnu distinctement
* Exemple: une voiture Clio 2 DCI, un stylo bleu...
* Classe = objets d'un même type
* Décrit un ensemble d'objets similaires
* Exemple
* Classe = voiture
* Objets = Clio 2 DCI, Punto S55...
Membres d'une classe
* Une classe possède des "membres"
* Des attributs
* Des méthodes
* Attributs = état
* Caractéristiques de l'objet
* Exemple: la couleur de la voiture
* couleur sera un attribut de la classe voiture
* bleu sera la valeur de cet attribut pour un objet précis
* Ensemble des valeurs des attributs = état de l'objet
* Programmation: attribut = variable propre à l'objet
* Méthodes = comportement
* Fonctionnalités de l'objet
* Exemple: la voiture se déplace
* se déplacer sera une méthode de la classe voiture
* Une méthode permet de changer l'état de l'objet
* Programmation: méthode = fonction propre à l'objet
Objets en JavaScript (1/2)
* Possibilité de créer ses propres classes en JavaScript
* Mais on utilisera plutôt des classes existantes
* var mon_image = new Image();
* "new" = création d'un objet d'une classe donnée
* Possibilité d'utiliser des objets existants
* Tout élément d'une page HTML est un objet
* DOM: Document Object Model
* "document" est l'objet qui représente le document HTML
* Opérateur "." permet d'accéder aux membres d'un objet
* document.images
* Attribut "images" de l'objet "document"
* Tableau des images qui composent le document
* document.write
* Méthode "write" de l'objet "document"
* Méthode qui génère du HTML dans le document
Objets en JavaScript (2/2)
* Tableau = classe "Array"
* var tab = new Array();
* Attribut: length
* taille_tab = tab.length;
* Chaînes de caractères = classe "String"
* var chaine = new String();
* Méthodes
* indexOf(sousChaine): position d'une sous-chaîne
* chemin = "images/pingouin.gif";
pos_slash = chemin.indexOf("/");
* substring(debut,fin): création d'une sous-chaîne
* dossier = chemin.substring(0,pos_slash-1);
* charAt(position): caractère à une position donnée
* premier_caractere = chemin.charAt(pos_slash+1);
Formalisme UML
* UML = Unified Modeling Language
* Formalisme international pour la modélisation
* Permet de modéliser tout type de système
* Utilisé en particulier pour modéliser des logiciels
* Programmes informatiques
* Bases de données
* Sites Web
* Principaux types de schémas
* Diagramme des cas d'utilisation
* Analyse des besoins
* Diagramme de classes
* Structure statique du système
* Diagramme d'interactions
* Structure dynamique du système
* On présente ici le diagramme de classes
Diagramme de classes
* Décrit des relations entre types d'entités
* Une classe regroupe des entités (objets) ayant
* Des propriétés (des attributs) similaires
* Un comportement (des méthodes) commun
* Des relations communes avec d'autres objets
Relations entre les classes (1/2)
* Une classe peut être en relation avec d'autres
* Un objet d'une classe peut manipuler un objet d'une autre classe
* Relation d'association
* Exemple: une voiture circule sur une route
* Un objet d'une classe peut contenir un objet d'une autre classe
* Relation d'agrégation
* Exemple: une voiture est composée de 4 roues
* Une classe peut représenter un sous-ensemble d'objets
d'une autre classe qui sont plus spécifiques
* Relation d'héritage
* Exemple: les berlines sont une catégorie de voitures
Relations entre les classes (2/2)
* Relation d'association
* Une classe B est associée à une classe A
* Relation d'agrégation
* Une classe B possède des objets d'une classe A
* Relation d'héritage
* Une classe B hérite des caractéristiques d'une classe A
Exemple de diagramme de classes
JavaScript et les classes
* Possibilité de définir des classes en JavaScript
function Voiture(marq,coul) {
this.marque = marq;
this.couleur = coul;
this.vitesse = 0;
this.accelerer = function(i) { this.vitesse += i; }
this.ralentir = function(i) { this.vitesse -= i; }
}
* "this" représente l'objet en cours de manipulation
* Utilisation d'une classe
* var clio = new Voiture("Clio 2 DCI","bleu");
* clio.accelerer(20);
* document.write(clio.vitesse);
* Possibilité d'agrégation
* this.immatriculation = new String();
* Possibilité d'héritage
* N'est pas natif au langage ==> Mise en place complexe
* Mécanisme de délégation
* Mécanisme de prototype