Les objets

Créé le 11 Juin 2008, par Anis Safine

Bonjour à tous !

Dans un précédent chapitre, nous avons découvert les différents types de données qui existaient en JavaScript, ainsi que quelques opérations (très) simples. Nous avons également découvert un moyen de stocker temporairement ces données : les variables !

Dans ce chapitre, nous allons apprendre à effectuer des manipulations plus complexes sur les types de données, à l'aide d'une arme redoutable : les objets !

1. Correction de l'exercice

Avant de commencer, nous allons examiner en détail la correction de l'exercice que je vous avais donné à la fin du chapitre précédent.

Vous aviez le code suivant :

Et je vous avais demandé d'écrire des instructions entre la déclaration et l'affichage du contenu des variables pour inverser le contenu de "a" et de "b".

Cet exercice n'a rien de compliqué mais il est très utile pour vérifier que l'on a bien compris comment fonctionnent les variables. Si vous n'avez eu aucun problème, vous pouvez passer à la suite, sinon ouvrez grands vos oreilles (enfin vos yeux...) !

Tout d'abord, voici qu'il ne fallait pas faire :

Il est fort probable que certains d'entre vous, ceux qui démarrent dans la programmation procédurale surtout, aient fait exactement ce code en s'attendant à ce que "a" vaille 2 et "b" vaille 5 à l'affichage (ce qui n'est bien sûr par le cas).

L'erreur dans cet exemple, c'est de raisonner de façon "humaine", c'est à dire de lire le code de "façon générale" au lieu de le lire instruction par instruction.

Si je vous dis : je donne la valeur de "b" à "a" et la valeur de "a" à "b", vous allez comprendre que je vous demande d'inverser les valeurs de "a" et "b", pas l'ordinateur !

Observez bien l'évolution des valeurs de "a" et de "b" après chaque instruction :

Vous voyez bien que lorsque l'on demande à assigner la valeur de "a" à "b", "a" ne vaut plus 5 mais 2, à cause de l'assignation précédente.

Pour contourner ce problème, il suffit de passer par une variable intermédiaire dans laquelle on va stocker la valeur de "a" pour qu'elle la garde en mémoire, même après l'assignation d'une nouvelle valeur à "a".

Je vous mettais un peu sur la bonne voie, en déclarant la variable "c" qui doit jouer le rôle de variable intermédiaire :

Vous aurez donc compris qu'après ces 3 petites assignations, "a" vaut 2 et "b" vaut 5 !

Gagné ! C'est exactement ce que l'on voulait ! Les valeurs de "a" et "b" sont inversées ! Vous pouvez bien sûr changer les valeurs initiales de "a" et "b" si vous n'êtes pas convaincu, et vous verrez qu'à chaque fois, les valeurs sont inversées !

Bon, pas besoin de s'attarder sur cet exercice plus longtemps. Bien sûr, si vous n'aviez pas trouvé la solution et que vous ne la comprenez pas encore tout à fait, je vous conseille de la relire jusqu'à ce que vous soyez au point.

2. Utiliser un objet

Si vous avez bonne mémoire, je vous avais évoqué à un moment qu'il existe en JavaScript (pas qu'en JavaScript en fait...) deux types de programmation : la programmation dite procédurale qui consiste à aligner des instructions bout à bout et la Programmation Orientée Objet qui se base sur l'utilisation... des objets !

Dans ce chapitre, nous n'allons pas apprendre à créer nos propres objets, mais uniquement à utiliser ceux qui existent déjà en JavaScript.

Quoi ? Il existe déjà des objets JavaScript ?

Oui et j'ai encore plus fort pour vous : vous en avez déjà utilisé un ! La vérité, c'est que vous ne pourrez jamais vous passer de l'utilisation des objets lorsque vous programmerez en JavaScript : c'est strictement impossible !

Alors c'est quoi un objet ? A quoi ça ressemble et à quoi ça sert ? Pour vous expliquer tout cela, je vais vous demander de penser à... une voiture ! Votre voiture, elle a plein de caractéristiques : le nombre de roues, une couleur particulière, un nombre de places, une hauteur, une largeur, une marque...

Mais elle est également capable de faire des choses : avancer, reculer, klaxonner...

Et bien comme notre voiture, les objets JavaScript sont définis par des caractéristiques que l'on appelle des propriétés et des capacités que l'on appelle des méthodes.

Et concrètement, c'est quoi une propriété ? et une méthode ?

Une propriété est représentée sous la forme d'une variable. Dans le cas de l'objet "Voiture" (oui, un objet a un identifiant !), on aurait les variables "couleur", "nombre_de_roues", "nombre_de_places", etc. par exemple.

Quant aux méthodes, ce sont tous simplement des fonctions ! Toujours pour notre objet "Voiture", on aurait une fonction "avancer", "reculer", "klaxonner" qui contiendraient les instructions permettant de faire avancer, reculer ou klaxonner l'objet.

Attention, j'insiste bien sur un fait : l'objet "Voiture" n'existe pas réellement, il s'agit juste d'un exemple pour vous aider à comprendre le fonctionnement des objets JavaScript !

Ah bah c'est super ça... mais est-ce que c'est vraiment utile les objets ?

En effet, un objet "Voiture" en JavaScript n'a pas grand intérêt et de façon générale, créer ses objets en JavaScript n'est pas très utile (du moins pour la majorité des scripts). Si je vous les présente dans ce chapitre, c'est parce qu'à partir de maintenant, nous n'allons pas arrêter de découvrir ceux que le JavaScript a déjà fait pour nous, et vous verrez par la pratique que vous ne pourrez plus vous en passer !

Bon, maintenant que vous avez la théorie, si on voyait comment accéder aux propriétés et méthodes d'un objet ? Supposons qu'il existe déjà un objet "Voiture" et étudions le code suivant :

Comme vous pouvez le constater, c'est simple comme bonjour ! Il suffit d'utiliser l'identifiant de l'objet à utiliser, suivi d'un point puis de l'identifiant de la propriété ou méthode à laquelle on veut accéder !

Et tiens, maintenant que vous êtes au point, revenons sur notre toute première instruction :

Gagné ! "document" est un objet et write() est une méthode de cet objet qui permet d'afficher du texte à l'écran !

3. Les objets String et Math

Vous savez maintenant de quoi est constitué un objet (des propriétés et des méthodes) et vous savez les utiliser. Nous allons maintenant découvrir 2 objets très utilisés en JavaScript et qui vous serviront sans aucun doute par la suite !

L'objet Math

Je vous le disais en introduction, les objets vous nous permettre entre autre de faire des opérations plus "compliquées" que de simples additions ou soustractions.

Certains d'entre vous se sont peut-être déjà demandé comment faire une racine carrée, une valeur absolue, ou un arrondi... tout ça, c'est possible et sans problème avec l'objet Math !

Calculer une racine carrée, la méthode sqrt() :

Elle permet de calculer une racine carrée et s'utilise comme suit :

Si vous essayez ce code, vous verrez que le résultat 2 (qui est la racine carrée de 4) s'affiche à l'écran. Peut-on faire plus simple ?

Calculer une valeur absolue, la méthode abs() :

Elle permet de calculer la valeur absolue d'un nombre. Pour ceux qui ne sauraient pas ce qu'est une valeur absolue, par ici !

Elle s'utilise toujours de la même manière que sqrt() :

Et voilà !

Faire un arrondi, les méthodes ceil(), floor() et round() :

Si vous voulez faire un arrondi, vous avez le choix entre 3 méthodes :
- pour obtenir l'entier supérieur, il faut utiliser ceil()
- pour obtenir l'entier inférieur, il faut utiliser floor()
- pour obtenir l'entier le plus proche, il faut utiliser round()

Voyons voir cet exemple :

Je pense que le code parle de lui-même, pas besoin d'en rajouter.

Calculer une puissance, la méthode pow() :

Si je vous demande de calculer 3 à la puissance 5, je pense que vous seriez bien embêtés... plus avec la méthode pow() ! Dans les parenthèses, on met d'abord le nombre que l'on veut élever à la puissance, puis la puissance !

Attention à bien séparer les deux nombres par une virgule ! Exemple :

Et voilà, toujours aussi simple !

Générer un nombre aléatoire, la méthode random() :

Cette méthode n'est pas très évoluée, car elle ne permet "que" d'obtenir un nombre aléatoire entre 0 et 1. Impossible de changer l'intervalle : ce sera toujours un nombre entre 0 et 1 !

Et ca donne :

Vous pouvez actualiser la page plusieurs fois, vous verrez que le nombre qui s'affiche n'est jamais le même.

Bon, si on continue comme ça, on aura fini dans quelques heures, étant donné le nombre de méthodes supportées par l'objet Math. Si vous tenez vraiment à en savoir plus, une annexe est disponible.

L'objet String

Vous avez plus d'outils de calculs dans vos bagages grâce à l'objet Math, il est grand temps maintenant pour vous d'en apprendre plus sur les chaînes de caractères !

Vous l'aurez compris, pour manipuler des chaînes de caractères, on utilise l'objet String ! Nous allons nous intéresser à une propriété et trois méthodes de cet objet !

La longueur d'une chaîne, la propriété length :

Si vous désirez connaître le nombre de caractères qui composent une chaîne de caractère, il faut utiliser la propriété length, comme ceci :

Si vous testez ce code, vous voyez un joli 28 s'afficher : c'est le nombre de caractères de la variable "chaine", espaces compris.

Hey mais attends un peu ! "chaine" est une chaîne de caractère, pas un objet ! Comment peux-tu utiliser une propriété sur une chaîne ?

Sur ce coup-ci, l'ordinateur est intelligent, car il comprend que l'on veut utiliser String. Il transforme donc de lui-même la chaîne de caractère en objet, avant d'en exploiter la propriété ou la méthode désirée.

Tout mettre en minuscule, la méthode toLowerCase() :

Si vous voulez n'avoir que des minuscules dans une chaîne de caractère, vous pouvez utiliser la méthode toLowerCase(), comme ceci :

Comme vous pouvez le constater, toutes les majuscules ont disparues !

Tout mettre en majuscule, la méthode toUpperCase() :

Si vous voulez n'avoir que des majuscules dans une chaîne de caractère, vous pouvez utiliser la méthode toUpperCase(), comme ceci :

Cette fois-ci, tout est en majuscule !

Extraire une partie d'une chaîne de caractère, la méthode substr() :

Vous aurez sûrement besoin un jour de récupérer une partie d'une chaîne de caractère. Par exemple, dans la chaîne "Bonjour, je m'appelle Anis !", vous aurez peut-être envie de récupérer "Bonjour". Pour ce faire, on utilise la méthode substr() !

Entre les parenthèses, on met d'abord la position du premier caractère à extraire, puis la longueur de la chaîne que l'on veut extraire... séparés par une virgule évidemment ! Ce qui donne :

Vous remarquerez que le premier caractère d'une chaîne a comme position 0 ! Voilà, vous savez tout !

Je vous conseille de vous amuser à faire vos petits tests de votre côté pour être bien sûr de savoir utiliser chaque méthode et d'avoir bien tout saisi... Et nous en avons fini (ou presque) avec les objets !

Conclusion

Ce chapitre fût très intéressant et nous a permis d'en apprendre plus sur la manipulation de données mais je ne vous ai présenté que l'essentiel. Pour en savoir plus, je vous invite à aller voir les annexes : l'objet String, l'objet Math.

Prochain chapitre : les tableaux !