Programmation orientée objet et événementielle en JavaScript Département SRC Pôle Universitaire de Vichy Bruno Bachelet
«PARTIE IV Introduction au paradigme objet Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 2
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 Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 3
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 Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 4
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 Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 5
Polymorphisme Les principes fondateurs (3/3) Possibilité pour une fonction de prendre plusieurs formes Souvent utilisé en combinaison avec l'héritage Exemple Possibilité de redéfinir une fonction héritée: «surcharge» Accès par la classe mère polymorphisme 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» Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 6
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 Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 7
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 Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 8
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 Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 9
Tableau = classe «Array» var tab = new Array(); Attribut: length taille_tab = tab.length; Objets en JavaScript (2/2) 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); Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 10
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 Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 11
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 Formalisme Nom classe + attribut 1: type + attribut 2: type + méthode 1 (paramètres) + méthode 2 (paramètres) Voiture + puissance: entier + couleur: chaîne + accélérer() + ralentir() Exemple Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 12
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 Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 13
Relations entre les classes (2/2) Relation d'association Une classe B est associée à une classe A B action > A Relation d'agrégation Une classe B possède des objets d'une classe A B min..max A Relation d'héritage Une classe B hérite des caractéristiques d'une classe A B A Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 14
Exemple de diagramme de classes Université Cardinalité 1..n Agrégation Personne Héritage Administratif Enseignant Etudiant Par défaut, cardinalité = 1 (incorrect pour notre exemple d'ailleurs!) 1 enseigne > 1..n Association Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 15
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 Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 16