Traduction
Tutoriel sur Javascript
Recherche dans ce tuto
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans le chapitre précédent j'ai évoqué les modèles prédéfinies d'objets et leurs méthodes :
Dates, String, Math, Array, Set, Map, RegExp, etc.
Dans ce chapitre je vous montre comment créer vos propres modèles d'objets puis des instances de ces modèles.
La POO en JavaScript présentait plusieurs particularités qui la distinguait des langages classiques comme Java ou C++.
Mais progressivement JS se rapproche des autres langages en matière de POO.
Ainsi le concept de classe a été introduit par la version majeure de 2015.
Un constructeur est simplement une fonction définissant un modèle d'objet avec des propriétés et des méthodes.
Dans ce premier exemple le modèle ne comprend que des propriétés.
Une seule instruction !
<button onclick ="f1()" >Appelez le script </button >
Le modèle d'objet créé se nomme "voiture" et comprend quatre propriétés.
Je crée ensuite deux instances du modèle "voiture" : auto_jean & auto_paul.
Notez la syntaxe pour créer des objets (instances) du modèle "voiture : var nomObjet = new NomModèle(propriétés)
On peut donc dire qu'un objet est une séquence de paires propriété:valeur.
Notez l'emploi de la notation pointée : objet.propriété pour afficher la valeur d'une propriété.
Dans la dernière instruction du script j'utilise la notation template strings pour éviter une concaténation fastidieuse de
l'instruction précédente.
Dans l'exemple précédent les objets ne comprenaient que des propriétés.
Or si on veut manipuler un objet, le modèle d'objet doit proposer aussi des méthodes.
Une méthode est en fait une fonction.
Un bouton de commande appele la fonction f1().
Le script :
Le modèle d'objet créé se nomme voiture et comprend 4 propriétés et une méthode.
La méthode se nomme presenter() qui affiche ici toutes les propriétés de l'objet concerné.
Pour décrire une méthode il faut employer les mots réservés function et return.
Pour appeler une méthode il faut employer la syntaxe : objet.methode() ;
n'oubliez pas les parenthèses, une méthode c'est une fonction !
Je procède ensuite à un changement de propriétés pour l'instance "mavoiture".
Notez la syntaxe pour modifier la valeur d'une propriété : objet.propriété ="nouvelle valeur".
On dit que l'on utilise la notation pointée.
Je peux accéder directement aux propriétés de l'objet pour les modifier. On dit que ces propriétés sont publiques
car je n'ai pas procédé à l'encapsulation.
Plus loin dans ce chapitre je vous montrerai comment réaliser l'encapsulation en JS-POO.
En POO classique, une modèle d'objet est appelé classe.
La classe définit donc les propriétés et les méthodes applicables aux instances de cette classe.
Pour se rapprocher de la syntaxe POO des autres langages, la version ECMAScript de 2015 introduit les mots clé "class", & "extend" (pour l'héritage).
Dans l'exemple qui suit je définit une classe ; puis je crée une deuxième classe héritant de la première ;
je crée ensuite des instances de la classe mère et
des instances la classe fille.
J'évoque aussi la notation pointée optionnelle.
Le script :
Je définis donc la classe "Auto" ; il est d'usage que la première lettre de la classe soit une majuscule.
La fonction constructor() initialise les propriétés et méthodes.
Notez que la classe "Auto" ne comprend que des propriétés.
À partir de la classe "Auto" je définis la classe "Tacot" par héritage avec l'instruction class Tacot extends Auto.
La fonction super() reprend les attributs de la classe mère.
Dans cette nouvelle classe je définis deux nouvelles propriétés (annee & etat) et une méthode nommée "presenter()".
Je crée deux instances de la classe "Tacot" et j'affiche toutes leurs propriétés via la méthode "presenter()".
Pour la dernière instruction j'utilise la notation pointée optionnelle.
Pour prévenir de tentatives d'injections (de HTML ou JS), les propriétés d'un objet doivent être privées c'est à dire qu'elles ne sont pas accessibles directement ; il faut passer par une méthode, qui elle est publique. C'est le principe de l'encapsulation.
Dans cet exemple, nous avons créé une classe BanqueCompte à l’aide du mot-clé class.
Cette classe définit trois propriétés privées : _num, _nom et _solde.
Notez les sécurités prévues dans la fonction constructor() pour neutraliser les tentatives d'injections
de code et les saisies maladroites.
this._num = num.trim(); // supprimer espace
this._nom = nom.replaceAll('<','').replaceAll('>','').trim();
// rendre inoffensive une injection HTML
this._solde = parseInt(solde); // convertir la chaine en entier
Ces propriété sont précédées d’un trait de soulignement pour les rendre privées.
Je crée une instance de cette classe nommée "monCompte" via la fonction constructor() ;
je saisis des chaines avec des caractères non autorisés (parenthèses angulaires, espaces) ; heureusement le constructeur corrige.
On ne peut modifier cet objet qu'au travers de la méthode publique deposer()
Si vous tentez d'accéder directement à une propriété privée de l'objet, l'instruction n'est pas prise en compte.
Mais le script ne 'plante' pas ; c'est transparent. Ainsi le solde ne change pas (reste à 1500 suite au dépôt de 500).
Trois instructions qui tentaient de modifier les valeurs des trois attributs n'ont pas été exécutées.
Le polymorphisme en POO permet à des objets de classes différentes de répondre différemment à la même méthode, prolongeant ainsi les capacités de l'héritage et optimisant la réutilisation du code.
Les classes Singe & Humain héritent de la classe Primate.
Dans chaque classe une méthode nommée "communiquer()".
Cette méthode n'aura pas le même retour selon le type de l'objet auquel on l'applique.
Emploi de la méthode forEach() pour parcourir un tableau indicé.
La propriété constructor.name indique de façon très précise le type d'objet ; voir plus loin
dans ce chapitre.
Cette technique permet de créer rapidement un objet isolé.
Pour créer un objet avec seulement des propriétés :
nomObjet = {propriété : "valeur", propriété : "valeur" , ... , propriété:valeur}
La description de l'objet est encadrée par des accolades.
Pour créer un objet avec propriétés et méthode :
nomObjet = {propriété : "valeur", propriété : "valeur" , ... , nomMéthode: function(){liste instructions} }
N'oubliez pas le mot clé function pour décrire la méthode.
La création d'un objet JS de façon littérale est très proche de la création d'une chaine au format JSON.
Vous verrez plus loin qu'il est possible de convertir un objet JS en chaine au format JSON et vice-versa.
Ci-dessous je crée un objet JS avec trois propriétés et une méthode.
Dans une chaine au format JSON les clés sont aussi délimitées par des guillemets doubles.
Dans un script je crée un objet nommé "bar" avec des propriétés et une méthode de façon littérale.
Pour certaines propriétés il peut y avoir plusieurs valeurs.
Je rappelle que le "Bar" (ou "loup de mer") est un poisson très apprécié des gastronomes.
La méthode "fiche" génère du code HTML.
L'objet bar décrit ce poisson osseux à la chaire succulente.
L'objet comprend 5 propriétés et une méthode fiche().
Attention la propriété "vernaculaires" (vernaculaire ou commun) a deux valeurs d'où l'emploi des crochets pour indiquer
que la valeur est un "array".
La méthode "fiche" génère du code HTML pour afficher toutes les propriétés y compris l'image.
Comme dans l'exemple précédent, j'affiche le détail de l'objet JS avec la méthode JSON.stringify().
Observez très attentivement les trois dernières instructions du script :
Affichez la console !
Dans le paragraphe précédent j'ai évoqué la méthode JSON.stringify(objetJS) mais sans donner beaucoup d'explications.
La méthode JSON.stringify() convertit un objet JS en une chaine au format JSON.
Après cette conversion on peut afficher l'objet telle une chaine.
Cette méthode convertit une chaine au format JSON en un objet JS.
Après cette conversion on peut appliquer la notation pointée pour accéder aux différentes propriétés de l'objet.
Dans les chapitre précédents je vous ai montré comment créer des objets à partir de modèles prédéfinis : String, Date, Array, Map,
Set, RegExp,Intl,etc.
Dans ce chapitre je viens de vous montrer comment créer vos propres objets
à partir d'une classe que vous avez défini ou plus simplement via la notation JSON pour un objet isolé.
Il peut être utile de connaitre de façon précise le type d'un objet.
Ainsi vous saurez quelles méthodes et propriétés lui appliquer.
Pour connaitre le type d'un objet vous pensez naturellement à l'opérateur typeof mais il y a beaucoup mieux ...
Typeof n'est guère précis. Ainsi pour une chaine il peut retourner "string" ou "objet" selon que la chaine a
été créée avec le constructeur String ou de façon littérale.
Appliqué à une date, un array, un set, un objet JSON il retourne "objet" ...
La propriété constructor.name appliquée est beaucoup plus efficace comme je le montre
dans l'exemple ci-dessous.
Pour créer des objets date, set, map, intl, regExp il faut obligatoirement utiliser le constructeur ad hoc.
Je rappelle ensuite les trois techniques pour créer des objets perso : construteur, classe, JSON.
Ensuite pour chacun de ces objets je demande le type via l'opérateur typeof puis via la propriété constructor.name.
Notez que la propriété constructor.name retourne "Object" uniquement lorsqu'il s'agit d'un objet produit de façon littérale.
Je vous montre maintenant comment produire une séquence d'objets ayant tous la même structure.
On définit une classe puis on crée des instances de cette classe et enfin on regroupe tous ces objets dans un tableau indicé.
Un 'array' est une structure itérable donc je peux parcourir cette structure avec la boucle for ... of.
On crée un tableau indicé contenenant plusieurs objets créés de façon littérale mais avec la même structure.
Membres est un tableau indicé d'objets JS.