ecriture de classes javascript

Ecriture de classeen javascriptThierry GAYET - [email protected] opyright Eurogiciel RENNES

Introduction

On peut crer de nouveau objets, dans la terminologie des langages orients-objets, on dit des instances de ces classes.Si la syntaxe et le vocabulaire sont proches de la programmtion objet, JS n'est pas un langage orient objet car il n'en admet pas les principaux concepts comme l'hritage, le polymorphisme ...Les objets JS sont surtout utiliss pour crer des structures de donnes plus complexes et plus souples que les tableaux de variables.Pourquoi dfinir une classe de personne ?

Pour reprsenter et grer un ensemble de N personnes, dotes d'un ensemble d'attributs comme nom, prnom, num tel, adresse complte, sexe, age, profession ...Actuellement, il est invitable de crer autant de tableaux de taille N que d'attributs. var tabNom = new Array(N); var tabPrenom = new Array(N); var tabAnnee_naissance = new Array(N); L'miettement des donnes relatives une personne dans de nombreux tableaux complique les traitements et apparait artificiel : que reprsente au fond le tableau des annes de naissance ? et l'unit d'une personne tient au choix du mme numro d'indice dans tous les tableaux !Dans la conception objet, la personne redevient le centre des proccupations. On en fait une description gnrale dans la dclaration d'une classe d'objets, qui se compose de 2 parties qui dcrivent ses proprits et ses actions.

Dfinition d'une classe d'objet

On choisit tout d'abord un nom identifiant la classe de l'objet, souvent commenant par une majuscule. Par exemple Personne, Voiture, Maison, Article ...Les lments de ces classes autrement dit les objets, seront identifis en minuscules Proprits:Puis, les noms des proprits (ou variables d'objet) qui dcrivent les caractristiques stables des objets, mme si les valeurs de ces proprits changent.Ainsi pour Personne, les proprits retenues peuvent tre nommes : nom, prnom, adresse, codePostal, ville, numTel, anne_naissance, solde ...A tout moment un objet, c'est--dire une personne particulire, possde une valeur pour chaque proprit, valeur qui peut varier au cours du temps, comme son adresse ou le solde de son compte bancaire. Mthodes:A cot de ces caractristiques, les mthodes de l'objet dcrivent son comportement, plus prcisment les traitements auxquels tout objet est soumis.Par exemple, une personne peut calculer son ge, dmnager, changer de N de tlphone, avoir son compte crdit ou dbit ...et avoir un nouveau-n !Le plus souvent, ces mthodes d'objet agissent sur les proprits et en modifient les valeurs. Elles sont donc dcrites par du code de fonction, intgr la dfinition de l'objet. Constructeur d'objets:En JS, la classe d'un objet est compltement dcrite par une (seule) fonction particulire appele constructeur de l'objetLa classe de l'objet et son constructeur portent le mme nom.Son criture va contenir 2 parties : les dclarations des proprits et des mthodes.

Schma d'un constructeur

Le mot this, comme dans tous les langages orients objets, permet de rfrencer les futurs objets de la classe.

// constructeur de la classe:function nom-classe(param1, param2 ) {// Dclaration et initialisation des propritsthis.proprit1 = param1 ;this.proprit2 = param2 ;........// Affectation des mthodes implmentes en externethis.mthode1 = fonction1 ;

// Affectation des mthodes implmentes en fonction inline ou lambda(dclares en interne) :this.mthode2 = function() {// Implmentation inline}........}

Exemple de constructeur

Exemple de constructeur de Personne:

// dclaration des fonctions-mthodes, elles peuvent suivre la fonction-constructeur:

function calculer_age()
{.....}

function mouvement_compte()
{.....}

function nouvelle_naissance()
{.....}

Exemple de constructeur

// Constructeur de l'objet Personnefunction Personne(n, p, ad, cp, v, t, a, nb)
{// Definition des propritsthis.nom = n ; this.prenom = p ;this.adresse = ad ; this.codePostal = cp; this.ville = v; this.numTel = t;this.annee_naissance = a; this.nb_enfant = nb ;

// Dfinition des mthodesthis.age = calculer_age ;this.compte = mouvement_compte ;this.naissance = nouvelle_naissance;}

Utilisation de la classe:

Construction d'objets:On doit distinguer 2 tapes concernant l'utilisation d'une classe javascript:cration des objets

accs, modification de leurs proprits, appel leurs mthodes

Cette classe est une sorte de modle selon lequel on va pouvoir crer des objets concrets, manipulables. La cration d'un objets s'appellent instances de classe. Pour crer une telle instance, on effectue un appel l'aide de l'oprateur new:var instance1 = new nom-classe(liste de valeurs)Les valeurs passes en paramtre vont affecter les proprits de l'instance (et ainsi les initialiser), conformment au code du constructeur : ils doivent donc correspondre exactement, en place et en nombre, aux paramtres formels du constructeur.Mais on peut alternativement appeler le constructeur par dfaut, sans paramtre, reportant plus tard l'initialisation des proprits. Exemple de cration ET d'initialisation d'une instance de classe Personne:var p = new Personne('Toto','Jules',1,'10 rue V.Hugo','93000','Bobigny','01222222',1950,3); Exemple de cration PUIS initialisation d'une instance de classe Personne:var p = new Personne();p.prenom = "Jules";p.nom = "Toto"; .........

Utilisation inter classe:

Soient 2 classes ClasseA et ClasseB. On suppose que :L'objet ClasseB contient une proprit de "type" ClasseA, ou plus exactement qu'une de ses proprits soit construite par affectation d'une instance de ClasseA.function ClasseA( n, ........) {// Dfinition des proprits de ClasseA:this.nom = n;...........}function ClasseB( a, b, objetA, ....) {// Dfinition des proprits de Classe2:this.ppa = a;this.ppb = b;// objetA sera remplac la construction par une instance existante de la ClasseA:this.ppc = objetA;...........}


var instA = new ClasseA( ...);var instB = new ClasseB( aa, bb, instA, ...);document.write('La valeur de la proprit ppc de instB est : ', instB.instA.ppc);


Soit une classe Voiture dote des proprits suivantes :function Voiture(ma, mo, a, p) {this.marque = ma;this.modele = mo;this.annee = a;// le propritaire est implicitement un "objet" de type Personne !this.proprietaire = p; // p sera une instance de Personnethis.presenter = presenter_voiture;}

// Par cette construction, la proprit propritaire devient une instance de Personne:var toto = new Personne('Toto', 'Jules', ); toto.presenter();

var auto = new Voiture('Renault','Clio',1997, toto); auto.proprietaire.presenter();


// Maintenant posons quelques questions importantes ! // toto et auto se prsentent avec leur mthodes particulires:toto.presenter();auto.presenter();

// combien d'enfants a le propritaire de auto ?document.write('Le propritaire de la voiture auto a ', auto1.proprietaire.nb_enfant ,' enfant(s)');

// quel est l'ge du propritaire de (l') auto ?document.write('Voici l\'ge du propritaire de la voiture auto : ', auto.proprietaire.age());

// mais laissons le propritaire de auto se prsenter lui-mme !document.write('Prsentons l\'heureux propritaire de la voiture auto');auto1.proprietaire.presenter();

La proprit prototype

Cette proprit spciale s'applique une classe dj construite et permet de lui ajouter de nouvelles proprits et mthodes. On peut effectuer ces ajouts sur des classes prdfinies ou dfinies par le programmeurIl faudra ensuite attribuer une valeur cette proprit, car on ne dispose pas d'un constructeur d'objet qui lintgre.Syntaxe: nomClasse.prototype.nomProprit = valeurInitiale ;

Exemples:Ajout d'une proprit sexe la classe Personne:Personne.prototype.sexe = "f" ;Ajout d'une mthode la classe String:

// ajout d'une mthode la classe Stringfunction fin() {return this.charAt(this.length-1);}String.prototype.fin = fin ;

La proprit prototype

var ch1 = "Bonjour tous"var ch2 = "et demain !"document.write("Le dernier caractre de "+ "\""+ ch1+ "\"" + " : "+ch1.fin()+"
");document.write("Le dernier caractre de "+ "\""+ ch2+ "\"" + " : "+ch2.fin()+"
");

RESUME

Rsume

Dclaration d'un classe JS:function Classe(param){ this.member = param; this.methode1 = methode1; this.methode2 = methode2;}Implmentation des mthodes:function methode1( ){ this.member -- ; // exemple arbitraire}function mthode2(){ return (this.member == 0);}

La classe sera mise dans une section ..... dans la partie HEADER.

Rsume

Instanciation:Elle peut se faire dans la partie BODY toujours dans une section ..... document.write ("Instanciation d'un objet de type classe
");nb = 10;objet = new Classe(nb);while (objet.methode2 () == false){objet.methode1();document.write ("appel mthode mthode1
");}document.write ("fin script
");

Exemple d'un classe RECTANGLE

Exemple d'une classe Rectangle 1/2

// La classe Rectangle possde 2 proprits; voici son constructeurfunction Rectangle(L, l)
{this.largeur = l;this.longueur = L ;}

// rect1 et rect2 sont des instances de la classe Rectangle; les objets sont cres avec l'oprateur new:var rect1 = new Rectangle(10 , 6)var rect2 = new Rectangle(15 , 10.5)

// Lors de la cration de rect1 par new, this est "remplac" par rect1:document.write("largeur = " + rect1.largeur)document.write("longueur = " + rect2.longueur)

// la fonction suivante calcule l'aire du rectangle function calcule_aire()
{return this.largeur * this.longueur}

// On peut se servir de la fonction calcule_aire() pour intgrer une mthode dans la dfinition de la classe Rectangle// la mthode est appele aire function Rectangle(L , l)
{this.largeur = l ;this.longueur = L ; this.aire = calcule_aire ; }

// utilisation de la mthodevar a2 = rect2.aire())document.write("L'aire du rectangle rect1 = " + rect1.aire() );


/** * On peut se servir de la fonction calcule_aire() pour intgrer * une mthode dans la dfinition de la classe Rectangle * la mthode est appele aire */function Rectangle(L , l)
{this.largeur = l ;this.longueur = L ; this.aire = calcule_aire ; }

// utilisation de la mthodevar a2 = rect2.aire())document.write("L'aire du rectangle rect1 = " + rect1.aire() );


http://www.javascriptkit.com/javatutors/oopjs.shtml

DES QUESTIONS ?

FORMATION LINUX

Cliquez pour diter le format du texte-titreCliquez et modifiez le titre

Cliquez pour diter le format du plan de texteSecond niveau de planTroisime niveau de planQuatrime niveau de planCinquime niveau de planSixime niveau de planSeptime niveau de planHuitime niveau de plan

Neuvime niveau de planCliquez pour modifier les styles du texte du masque

Deuxime niveau

Troisime niveau

Quatrime niveau

Cinquime niveau

FORMATION LINUX




Deuxime niveau

Troisime niveau

Quatrime niveau

Cinquime niveau

FORMATION LINUX


FORMATION LINUX

Cliquez pour diter le format du texte-titreClick to edit Master title style


Neuvime niveau de planClick to edit Master text styles

Second level

Third level

Fourth level

Fifth level

EUROGICIEL 21/03/2014

FORMATION LINUX




Deuxime niveau

Troisime niveau

Quatrime niveau

Cinquime niveau



Deuxime niveau

Troisime niveau

Quatrime niveau

Cinquime niveau

FORMATION LINUX


ecriture de classes javascript

Technology