Guide JavaScript 1.5:Utilisation d'objets

Un article de MDC.

[modifier] Objets et propriétés

Un objet JavaScript dispose de propriétés associées. On peut accéder à celles-ci à l'aide d'une notation simple :

nomObjet.nomPropriété

Tant le nom de l'objet que celui de la propriété sont sensibles à la casse. Une propriété est définie en lui assignant une valeur. Par exemple, supposons qu'on dispose d'un objet appelé voiture (pour l'instant, supposons simplement que cet objet existe déjà). On peut lui donner des propriétés comme marque, modèle et année de la manière suivante :

voiture.marque = "Ford";
voiture.modèle = "Mustang";
voiture.année = 1969;

Un tableau est un ensemble de valeurs associées avec un seul nom de variable. Les propriétés et les tableaux sont intimement liés en JavaScript ; en fait ce sont même des interfaces différentes vers la même structure de données. Donc, par exemple, on pourrait accéder aux propriétés de l'objet voiture de la façon suivante :

voiture["marque"] = "Ford";
voiture["modèle"] = "Mustang";
voiture["année"] = 1967;

Ce type de tableau est appelé tableau associatif, parce que chaque élément d'index est également associé avec une valeur chaîne. Pour illustrer le fonctionnement de ce type de tableau, la fonction suivante affiche les propriétés d'un objet lorsque celui-ci et son nom sont passés en paramètres :

function affiche_props(obj, nom_obj) {
  var resultat = "";
  for (var i in obj)
     resultat += nom_obj + "." + i + " = " + obj[i] + "\n";
  return resultat;
}

Donc, l'appel à la fonction affiche_props(voiture, "voiture") renverrait le résultat suivant :

voiture.marque = Ford
voiture.modèle = Mustang
voiture.année = 1967

[modifier] Création d'objets

JavaScript dispose d'un certain nombre d'objets préféfinis. En plus de ceux-ci, vous pouvez créer vos propres objets. En JavaScript 1.2 et supérieur, ceux-ci peuvent être créés à l'aide d'un initialisateur d'objet. Ou alors, vous pouvez d'abord créer une fonction constructeur et instancier ensuite un objet à l'aide de cette fonction et de l'opérateur new.

• Utilisation des initialisateurs d'objets
• Utilisation d'une fonction constructeur
• Indexation des propriétés d'un objet
• Définitions de propriétés pour un type d'objet
• Définition de méthodes
• Utilisation de this pour référencer un objet
• Définition d'accesseurs et de mutateurs
• Suppression de propriétés

[modifier] Utilisation des initialisateurs d'objets

En plus de la création d'objets avec un constructeur, il est possible de créer des objets à l'aide d'un initialisateur d'objet. Cette méthode est parfois appelée notation littérale. Initialisateur d'objet est la terminologie utilisée par C++.

La syntaxe pour déclarer un objet avec un initialisateur d'objet est :

nomObjet = {propriété_1: valeur_1, propriété_2: valeur_2, ..., propriété_n: valeur_n}

où nomObjet est le nom du nouvel objet, tandis que chaque propriété_I est un identifiant (qui peut être un nom, un nombre ou une chaîne), et chaque valeur_I est une expression dont la valeur est assignée à la propriété_I. L'assignation à nomObjet est optionnelle. Si vous n'avez pas besoin de faire référence à l'objet ailleurs, il n'est pas nécessaire de l'assigner à une variable.

Si un objet est créé de cette manière dans un script de premier niveau, JavaScript l'interprétera chaque fois qu'il évalue une expression contenant le nom de l'objet. De plus, un initialisateur utilisé dans une fonction est créé à chaque fois que la fonction est appelée.

L'instruction suivante crée un objet et l'assigne à la variable x uniquement dans le cas où l'expression cond vaut true.

if (cond) x = {salut: "tout le monde"};

L'exemple suivant crée l'objet maHonda avec trois propriétés. Notez que la propriété moteur est elle-même un objet avec ses propres propriétés.

maHonda = {couleur: "rouge", roues: 4, moteur: {cylindres: 4, taille: 2.2}};

Vous pouvez également utiliser les initialisateurs d'objets pour créer des tableaux. Consultez le paragraphe sur la déclaration littérale de tableaux.

En JavaScript 1.1 et plus ancien, il n'est pas possible d'utiliser les initialisateurs d'objets. Vous pouvez y créer des objets uniquement à l'aide de leur constructeur ou avec une fonction fournie par un autre objet dans ce but. Consultez Utilisation d'une fonction constructeur.

[modifier] Utilisation d'une fonction constructeur

Une alternative aux initialisateurs pour la création d'un objet est de suivre ces deux étapes :

1. Définir le type d'objet en écrivant une fonction constructeur.
2. Créer une instance de l'objet avec l'opérateur new.

Pour définir un type d'objet, créez une fonction pour celui-ci qui spécifie son nom, ses propriétés et ses méthodes. Par exemple, supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet se nomme voiture, et qu'il dispose de propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :

function voiture(marque, modèle, année) {
  this.marque = marque;
  this.modèle = modèle;
  this.année = année;
}

Remarquez qu'on utilise this pour assigner des valeurs aux propriétés de l'objet à partir des valeurs passées à la fonction.

À présent, il est possible de créer un objet appelé ma_voiture comme ceci :

ma_voiture = new voiture("Ford", "Escort", 1993);

Cette instruction crée ma_voiture et assigne les valeurs spécifiées à ses propriétés. La valeur de ma_voiture.marque est donc la chaîne "Ford", ma_voiture.année est l'entier 1993, etc.

Vous pouvez créer autant d'objet voiture que vous voulez en appelant new. Par exemple,

voiture_de_ken = new voiture("Nissan", "300ZX", 1992);
voiture_du_boss = new voiture("Mazda", "Miata", 1990);

Un objet peut avoir une propriété qui est elle-même un autre objet. Par exemple, supposons que vous définissiez un objet appelé personne de la manière suivante :

function personne(nom, age, sexe) {
  this.nom = nom;
  this.age = age;
  this.sexe = sexe;
}

et instanciez ensuite deux nouveaux objets personne comme suit :

robert = new personne("Robert Dubois", 33, "M");
ken = new person("Ken Jones", 39, "M");

Vous pouvez ensuite réécrire la définition de voiture pour qu'une nouvelle propriété contenant un objet personne en fasse partie :

function voiture(marque, modèle, année, propriétaire) {
  this.marque = marque;
  this.modèle = modèle;
  this.année = année;
  this.propriétaire = propriétaire;
}

Pour instancier les nouveaux objets, vous utiliserez ceci :

voiture1 = new voiture("Ford", "Escort", 1993, robert);
voiture2 = new voiture("Nissan", "300ZX", 1992, ken);

Remarquez qu'au lieu de passer une chaîne littérale ou une valeur entière à la création de nouveaux objets, ces instructions utilisent les objets robert et ken comme paramètres pour les propriétaires. Ensuite, si vous voulez connaître le nom du propriétaire de la voiture 2, vous pouvez consulter la propriété suivante :

voiture2.propriétaire.nom

Notez qu'il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction

voiture1.couleur = "noir";

ajoute une propriété couleur à la première voiture, et lui assigne une valeur de "noir". Cependant, cela n'affecte pas les autres objets. Pour ajouter une propriété à tous les objets du même type, celle-ci doit être ajoutée à la définition du type voiture.

[modifier] Indexation des propriétés d'un objet

En JavaScript 1.0, on peut accéder aux propriétés d'un objet par leur nom ou par leur index numérique. En JavaScript 1.1 ou supérieur, cependant, si une propriété est définie par son nom, il faut toujours y accéder par son nom, et si elle est définie par un index, il faut toujours y accéder par son index.

Ceci s'applique à la création d'un objet et de ses propriétés avec un constructeur, comme dans l'exemple précédent avec le type voiture, et lorsque des propriétés individuelles sont définies explicitement (par exemple, ma_voiture.couleur = "rouge"). Donc, si vous définissez les propriétés d'un objet avec un index, comme ma_voiture[5] = "12 l/100", vous pouvez ensuite accéder à cette propriété avec ma_voiture[5].

Les objets issus d'un document HTML, comme le tableau forms, forment une exception à cette règle. Les objets dans ces tableaux peuvent toujours être appelés tant par leur index numérique (basé sur leur ordre d'apparition dans le document) que par leur nom (si défini). Par exemple, si le second élément FORM d'un document a un attribut NAME de "mon_formulaire", on peut y faire référence par document.forms[1], par document.forms["mon_formulaire"] ou encore par document.mon_formulaire.

[modifier] Définition de propriétés pour un type d'objet

Il est possible d'ajouter une propriété à un type d'objet défini précédemment à l'aide de la propriété prototype. Cela définit une propriété que partageront tous les objets du type spécifié, plutôt que juste une seule instance de l'objet. Le code qui suit ajoute une propriété couleur à tous les objets de type voiture, et assigne ensuite une valeur à cette propriété pour l'objet voiture1.

voiture.prototype.couleur = null;
voiture.couleur = "noir";

Consultez la propriété prototype de l'objet Function dans la référence de JavaScript Core pour plus d'informations.

[modifier] Définition de méthodes

Une méthode est une fonction associée à un objet. Elle est définie de la même manière qu'une fonction classique. On peut ensuite utiliser la syntaxe suivante pour associer la fonction à un objet existant :

objet.nom_de_méthode = nom_de_fonction;

où objet est un objet existant, nom_de_méthode est le nom donné à la méthode, et nom_de_function le nom de la fonction existante.

La méthode peut ensuite être appelée dans le contexte de l'objet de la manière suivante :

objet.nom_de_méthode(paramètres);

Il est possible de définir des méthodes pour un objet en donnant leur définition dans la fonction constructeur de l'objet. Par exemple, on pourrait définir une fonction formatant et affichant les propriétés des objets voiture définis précédemment :

function afficheVoiture() {
  var resultat = "Une belle " + this.marque + " " + this.modèle
     + " de " + this.année;
  pretty_print(resultat);
}

où la fonction pretty_print est une fonction affichant une ligne horizontale et une chaîne. Remarquez l'utilisation de this pour se référer à l'objet auquel la méthode appartient.

Cette fonction peut devenir une méthode en ajoutant l'instruction

this.afficheVoiture = afficheVoiture;

à la définition de l'objet voiture. Et donc, la définition complète de cet objet ressemblerait à ceci :

function voiture(marque, modèle, année, propriétaire) {
  this.marque = marque;
  this.modèle = modèle;
  this.année = année;
  this.propriétaire = propriétaire;
  this.afficheVoiture = afficheVoiture;
}

Vous pourrez ensuiet appeler la méthode afficheVoiture pour chacun des objets :

voiture1.afficheVoiture();
voiture2.afficheVoiture();

Ce qui produira un affichage similaire à l'image suivante.

Figure 7.1 : résultat de la méthode d'affichage

[modifier] Utilisation de this pour référencer un objet

JavaScript dispose d'un mot-clé spécial, this, qui peut être utilisé au sein d'une méthode pour se référer à l'objet courant. Par exemple, supposons que vous ayez une fonction appelée valider qui vérifie que la valeur d'une propriété d'un objet donné se trouve entre deux bornes minimum et maximum :

function valider(obj, valmin, valmax) {
  if ((obj.value < valmin) || (obj.value > valmax))
     alert("Valeur invalide !")
}

Ensuite, vous appelleriez valider dans le gestionnaire d'évènement onchange de chaque élément d'un formulaire, en utilisant this pour passer l'élément form lui-même, comme dans l'exemple qui suit :

<input type="text" name="age" size="3"
   onchange="valider(this, 18, 99)">

En général, this se réfère à l'objet appelant dans une méthode.

Lorsqu'il est combiné avec la propriété form, this peut se référer au formulaire parent de l'objet courant. Dans l'exemple suivant, le formulaire monFormulaire contient un objet Text et un bouton. Lorsqu'on clique sur le bouton, la valeur de l'objet Text devient le nom du formulaire. Le gestionnaire d'évènement onclick du bouton utilise this.form pour se référer au formulaire parent monFormulaire.

<form name="monFormulaire">
<p><label>Nom du formulaire :<input type="text" name="text1" value="Beluga"></label>
<p><input name="button1" type="button" value="Afficher le nom du formulaire"
   onclick="this.form.text1.value=this.form.name">
</p>
</form>

[modifier] Définition d'accesseurs et de mutateurs

Un accesseur est une méthode qui permet d'obtenir la valeur d'une propriété particulière. Un mutateur est une méthode qui permet de définir la valeur d'une propriété particulière. De telles méthodes peuvent être définies pour n'importe quel objet prédéfini du langage, ou pour des objets nouvellement créés permettant d'ajouter de nouvelles propriétés. La syntaxe pour définir des accesseurs et des mutateurs est semblable à celle utilisée par les déclarations littérales d'objets.

La session de shell JavaScript suivante illustre comment les accesseurs et les mutateurs fonctionneraient pour un objet o créé par l'utilisateur. Le shell JavaScript est une application permettant aux développeurs de tester du code JavaScript en mode batch ou interactif.

Les propriétés de l'objet o sont les suivantes :

• o.a - un nombre
• o.b - un accesseur renvoyant o.a plus 1
• o.c - un mutateur définissant la valeur de o.a à la moitié de sa valeur précédente

js> o = new Object;
[object Object]
js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}};
[object Object]
js> o.a
7
js> o.b
8
js> o.c = 50
js> o.a
25
js>

La session de shell JavaScript qui suit illustre comment l'on peut étendre le prototype de l'objet Date avec des accesseurs et des mutateurs pour ajouter une propriété year à toutes les instances de la classe prédéfinie Date. Elle utilise les méthodes existantes getFullYear et setFullYear de la classe Date pour définir l'accesseur et le mutateur de la nouvelle propriété year.

js> var d = Date.prototype;
js> d.__defineGetter__("year", function() { return this.getFullYear(); });
js> d.__defineSetter__("year", function(y) { this.setFullYear(y); });

Ces instructions utilisent l'accesseur et le mutateur définis ci-dessus sur un objet Date :

js> var now = new Date;
js> print(now.year);
2000
js> now.year=2001;
987617605170
js> print(now);
Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001

[modifier] Résumé

En principe, les accesseurs et mutateurs peuvent être soit

• définis à l'aide d'initialisateurs d'objets, soit
• ajoutés par la suite à un type d'objet existant à l'aide d'une méthode d'ajout d'accesseur ou de mutateur.

Lorsque des accesseurs et mutateurs sont définis à l'aide d'initialisateurs d'objets, tout ce que vous avez à faire est ajouter un préfixe get aux méthodes qui sont des accesseurs et un préfixe set aux méthodes qui sont des mutateurs. Évidemment, la méthode qui est un accesseur ne doit pas recevoir de paramètre, tandis que le mutateur doit prendre exactement un paramètre (la nouvelle valeur à définir). Par exemple :

o = {
  a : 7,
  get b() { return this.a + 1; },
  set c(x) { this.a = x/2; }
};

Des accesseurs et mutateurs peuvent égalemet être ajoutés à un objet à n'importe quel moment après sa création à l'aide de deux méthodes spéciales appelées __defineGetter__ (pour les accesseurs) et __defineSetter__ (pour les mutateurs). Ces deux méthodes reçoivent le nom de l'accesseur ou du mutateur comme premier paramètre, sous la forme d'une chaîne. Le second paramètre est la fonction à appeler comme accesseur ou mutateur. Par exemple, en suivant l'exemple précédent :

o.__defineGetter__("b", function() { return this.a + 1; });
o.__defineSetter__("c", function(x) { this.a = x/2; });

Le choix de l'une de ces deux formes dépendra de votre style de programmation et de la tâche à accomplir. Si vous avez déjà choisi d'utiliser les initialisateurs d'objets pour définir un prototype, vous utiliserez probablement la plupart du temps la première forme. Elle est en effet plus compacte et naturelle. Cependant, si vous avez besoin d'ajouter des accesseurs et des mutateurs par la suite, parce que vous n'avez pas écrit le prototype ou l'objet particulier, alors la seconde forme est la seule possible. Elle représente sans doute mieux la nature dynamique de JavaScript, mais peut rendre le code difficile à lire et à comprendre.

[modifier] Suppression de propriétés

Il est possible de supprimer une propriété à l'aide de l'opérateur delete. Le code suivant vous montre comment faire.

// Crée un nouvel objet, monobj, avec deux propriétés, a et b.
monobj = new Object;
monobj.a = 5;
monobj.b = 12;

// Supprime la propriété a, ce qui fait que monobj n'a plus qu'une propriété b.
delete monobj.a;

Vous pouvez également utiliser delete pour supprimer une variable globale si le mot-clé var n'a pas été utilisé pour la déclarer :

g = 17;
delete g;

Consultez la page sur l'opérateur delete pour plus d'informations.

[modifier] Objets prédéfinis

Cette section décrit les objets prédéfinis du langage JavaScript :

• L'objet Array
• L'objet Boolean
• L'objet Date
• L'objet document
• L'objet elements
• L'objet forms
• L'objet frames
• L'objet event
• L'objet Function
• L'objet history
• L'objet images
• L'objet layers
• L'objet links
• L'objet location
• L'objet Math
• L'objet mimeTypes
• L'objet navigator
• L'objet options
• L'objet number
• L'objet String
• L'objet RegExp
• L'objet screen
• L'objet String
• L'objet style
• L'objet windows

[modifier] L'objet Array

JavaScript ne dispose pas d'un type de données explicite pour les tableaux. Cependant, il est possible d'utiliser l'objet prédéfini Array et ses méthodes pour travailler avec des tableaux dans vos applications. L'objet Array dispose de méthodes pour manipuler des tableaux de diverses manières, comme des fusions, des inversions et des tris. Une de ses propriétés permet de déterminer la longueur du tableau et d'autres peuvent être combinées avec des expressions rationnelles.

Un tableau (array) est un ensemble ordonné de valeurs auxquelles on peut se référer avec un nom et un index. Par exemple, vous pourriez avoir un tableau appelé emp contenant des noms d'employés indexés par leur numéro d'employé. Ainsi, emp[1] serait l'employé numéro un, emp[2] l'employé numéro deux, et ainsi de suite.

[modifier] Création d'un objet Array

Pour créer un objet Array :

1. nomObjetArray = new Array(element0, element1, ..., elementN)
2. nomObjetArray = new Array(longueur)

nomObjetArray est soit le nom d'un nouvel objet, soit la propriété d'un objet existant. Lors de l'utilisation des propriétés et méthodes de Array, nomObjetArray est soit le nom d'un objet Array existant, soit une propriété d'un objet existant.

element0, element1, ..., elementN est une liste de valeurs pour les éléments du tableau. Lorsque cette forme est utilisée, le tableau est initialisé avec les valeurs spécifiées comme éléments, et la propriété length du tableau est positionnée au nombre de paramètres.

longueur est la longueur initiale du tableau. Le code suivant crée un tableau de cinq éléments :

modeDePaiement = new Array(5);

Les déclarations littérales de tableaux sont également des objets Array ; par exemple la déclaration suivante est un objet Array. Consultez Tableaux pour plus de détails sur les déclarations littérales de tableaux.

cafés = ["Arabica", "Expresso", "Cappuccino"];

[modifier] Remplissage d'un tableau

Il est possible de remplir un tableau en assignant des valeurs à ses éléments. Par exemple,

emp[1] = "Carine Dumas";
emp[2] = "Philippe Legrand";
emp[3] = "Adrien West";

Vous pouvez également remplir un tableau lors de sa création:

monTableau = new Array("Hello", maVariable, 3.14159);

[modifier] Références aux éléments d'un tableau

On se réfère aux éléments d'un tableau à l'aide des index ordinaux de ces éléments. Par exemple, supposons que vous définissiez le tableau suivant :

monTableau = new Array("Vent", "Pluie", "Feu");

Vous ferez alors référence au premier élément du tableau en appelant monTableau[0] et au second élément en appelant monTableau[1].

Les index des éléments commencent à zéro (0), mais la longueur du tableau (par exemple, monTableau.length) reflète le nombre d'éléments dans le tableau. Cette longueur est obtenue en ajoutant un au plus grand index du tableau.

[modifier] Méthodes de l'objet Array

L'objet Array dispose des méthodes suivantes :

• concat fusionne deux tableaux et renvoie un nouveau tableau.

      monTableau = new Array("1", "2", "3");
      monTableau = myArray.concat("a", "b", "c"); // monTableau est maintenant ["1", "2", "3", "a", "b", "c"]
  

• join(deliminateur = ",") liste tous les éléments d'un tableau dans une chaîne.

      monTableau = new Array("Vent", "Pluie", "Feu");
      liste = monTableau.join(" - "); // liste est "Vent - Pluie - Feu"
  

• pop retire le dernier élément d'un tableau et renvoie cet élément.

      monTableau = new Array("1", "2", "3");
      dernier = monTableau.pop(); // monTableau devient ["1", "2"], dernier = "3"
  

• push ajoute un ou plusieurs éléments en fin de tableau et renvoie le dernier élément ajouté.

      monTableau = new Array("1", "2");
      monTableau.push("3"); // monTableau devient ["1", "2", "3"]
  

• reverse transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier.

      monTableau = new Array ("1", "2", "3");
      monTableau.reverse(); // transpose le tableau monTableau en [ "3", "2", "1" ]
  

• shift retire le premier élément d'un tableau et renvoie cet élément

      monTableau = new Array ("1", "2", "3");
      premier = monTableau.shift(); // monTableau devient ["2", "3"], premier vaut "1"
  

• slice (start_index, upto_index) extrait une section d'un tableau et renvoie un nouveau tableau.

      monTableau = new Array ("a", "b", "c", "d", "e");
      monTableau = monTableau.slice(1,4); //commence à l'index 1 et extrait tous les éléments jusqu'à 4, renvoie [ "b", "c", "d" ]
  

• splice(index, nombre_suppr, ajelement1, ajelement2, ...) ajoute et/ou supprime des éléments d'un tableau.

      monTableau = new Array ("1", "2", "3", "4", "5");
      monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau devient ["1", "a", "b", "c", "d", "5"]
      // le code commence à l'index un (où se trouve "2"), retire trois éléments à cet endroit et insère ensuite les éléments qui suivent à la place
  

• sort trie les éléments d'un tableau.

      monTableau = new Array("Vent", "Pluie", "Feu");
      monTableau.sort(); // trie le tableau de sorte que monTableau = [ "Feu", "Pluie", "Vent" ]
  

  sort peut également recevoir une fonction de callback pour déterminer la façon dont le contenu du tableau sera trié. La fonction compare les deux valeurs et renvoie une de ces trois valeurs :

  • Si a est inférieur à b selon le système de tri, renvoie -1 (ou n'importe quel nombre négatif)
  • Si a est supérieur à b selon le système de tri, renvoie 1 (ou n'importe quel nombre positif)
  • Si a et b sont considérés comme équivalents, renvoie 0.

  Par exemple, le code suivant triera un tableau par la dernière lettre des éléments :

      var sortFn = function(a,b){
          if (a[a.length - 1] < b[b.length - 1]) return -1;
          if (a[a.length - 1] > b[b.length - 1]) return 1;
          if (a[a.length - 1] == b[b.length - 1]) return 0;
          }
      monTableau.sort(sortFn); // trie le tableau de sorte que monTableau = ["Pluie", "Vent", "Feu"]
  

• unshift ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.

[modifier] Tableaux bidimensionnels

Le code suivant crée un tableau bidimensionnel.

a = new Array(4)
for (i=0; i < 4; i++) {
   a[i] = new Array(4)
   for (j=0; j < 4; j++) {
      a[i][j] = "["+i+","+j+"]"
   }
}

Cet exemple crée un tableau contenant les lignes suivantes :

Ligne 0 : [0,0][0,1][0,2][0,3]
Ligne 1 : [1,0][1,1][1,2][1,3]
Ligne 2 : [2,0][2,1][2,2][2,3]
Ligne 3 : [3,0][3,1][3,2][3,3]

[modifier] Tableaux et expressions rationnelles

Lorsqu'un tableau est le résultat d'une correspondance entre une expression régulière et une chaîne, le tableau renvoie des propriétés et des éléments fournissant des informations concernant les correspondances. Les valeurs de retour de RegExp.exec, String.match et String.split sont des tableaux. Pour plus d'informations sur l'utilisations de tableaux avec des expressions rationnelles, consultez Expressions rationnelles.

« Précédent Suivant »

[modifier] L'objet Boolean

L'objet Boolean est un conteneur du type de données primitif Boolean. Utilisez la syntaxe suivante pour créer un objet Boolean :

nomObjetBoolean = new Boolean(valeur);

Ne confondez pas les valeurs booléennes primitives true et false avec les valeurs true et false de l'objet Boolean. Tout objet dont la valeur n'est pas undefined , null, 0, NaN, ou une chaîne vide, en ce compris un objet Boolean dont la valeur est false, est évalué à true lorsqu'il est utilisé dans une instruction conditionnelle. Consultez L'instruction if...else pour plus d'informations.

[modifier] L'objet Date

JavaScript ne dispose pas d'un type de données pour les dates. Cependant, il est possible d'utiliser l'objet Date et ses méthodes pour travailler avec des dates et des heures dans vos applications. L'objet Date propose un grand nombre de méthodes permettant de définir, obtenir et manipuler des dates. Il ne possède aucune propriété.

JavaScript gère les dates d'une manière similaire à Java. Les deux langages ont de nombreuses méthodes en commun, et stockent les dates sous la forme du nombre de millisecondes écoulées depuis le 1er janvier 1970, 00:00:00.

Les limites de l'objet Date correspondent à -100 000 000 jours avant et 100 000 000 jours après le 1er janvier 1970 (UTC).

Pour créer un objet Date :

nomObjetDate = new Date([paramètres])

où nomObjetDate est le nom de l'objet Date qui sera créé ; il peut s'agir d'un nouvel objet ou d'une propriété d'un objet existant.

Les paramètres possibles dans cette syntaxe sont :

• Aucun paramètre : crée la date et l'heure actuelles. Par exemple, today = new Date().
• Une chaîne représentant une date en anglais dans la forme suivante : "Month day, year hours:minutes:seconds." Par exemple, Noel95 = new Date("December 25, 1995 13:30:00"). Si les heures, minutes ou secondes ne sont pas précisées, elles seront initialisées à zéro.
• Un ensemble de valeurs entières pour l'année, le mois et le jour. Par exemple, Noel95 = new Date(1995,11,25).
• Un ensemble de valeurs entières pour l'année, le mois, le jour, l'heure, les minutes et les secondes. Par exemple, Noel95 = new Date(1995,11,25,9,30,0).

JavaScript 1.2 et antérieur
L'objet Date fonctionne de la manière suivante :

• Les dates antérieures à 1970 ne sont pas permises.
• JavaScript dépend des infrastructures et fonctions de dates de la plateforme utilisée ; le comportement de l'objet Date varie d'une plateforme à l'autre.

[modifier] Méthodes de l'objet Date

Les méthodes de l'objet Date permettant de gérer dates et heures peuvent être séparés en quelques grandes catégories :

• les méthodes de définition, pour définir des valeurs de date et d'heure dans des objets Date.
• les méthodes de consultation, pour obtenir des valeurs de date et d'heure depuis des objets Date.
• les méthodes de formatage, pour renvoyer des chaînes de caractères depuis des objets Date.
• les méthodes d'analyse et les méthodes UTC, pour analyser des chaînes et les transformer en objets Date.

Avec les méthodes de définition et de consultation, il est possible de changer et d'obtenir les secondes, minutes, heures, jours du mois ou de la semaine, mois et années séparément. Il existe une méthode getDay qui renvoie le jour de la semaine, mais pas de méthode correspondante setDay, car le jour de la semaine est calculé automatiquement. Ces méthodes utilisent des nombres entiers pour représenter ces valeurs de la manière suivante :

• Secondes (Seconds) et minutes (Minutes) : de 0 à 59
• Heures (Hours) : de 0 à 23
• Jour de la semaine (Day) : 0 (dimanche) à 6 (samedi)
• Date (Date) : 1 à 31 (jour du mois)
• Mois (Month) : 0 (janvier) à 11 (décembre)
• Année (Year) : années écoulées depuis 1900

Par exemple, supposons que vous avez défini la date suivante :

Noel95 = new Date("December 25, 1995")

Dans ce cas, Noel95.getMonth() renvoie 11, et Noel95.getFullYear() renvoie 1995.

Les méthodes getTime et setTime sont utiles pour les comparaisons de dates. La méthode getTime renvoie le nombre de millisecondes écoulées depuis le 1er janvier 1970, 00:00:00 pour un objet Date.

Par exemple, le code suivant affiche le nombre de jours restants pour l'année courante :

aujourdhui = new Date();
findannee = new Date(1995,11,31,23,59,59,999); // définit le jour et le mois
findannee.setFullYear(today.getFullYear()); // choisit l'année courante
msParJour = 24 * 60 * 60 * 1000; // Nombre de millisecondes par jour
joursRestants = (findannee.getTime() - aujourdhui.getTime()) / msParJour;
joursRestants = Math.round(joursRestants); //renvoie le nombre de jours restants dans l'année

Cet exemple crée un objet Date appelé aujourdhui contenant la date du jour. Il crée ensuite un second objet Date appelé findannee et le positionne sur l'année courante. Ensuite, grâce au nombre de millisecondes par jour qui est facilement calculable, il calcule le nombre de jours entre aujourdhui et findannee à l'aide de getTime et l'arrondit à un nombre entier de jours.

La méthode parse est pratique pour assigner des valeurs provenant de chaînes contenant des dates à des objets Date existants. Par exemple, le code suivant utilise parse et setTime pour assigner une valeur à l'objet IPOdate :

IPOdate = new Date();
IPOdate.setTime(Date.parse("Aug 9, 1995"));

[modifier] Utilisation de l'objet Date : un exemple

Dans l'exemple qui suit, la fonction JSClock() renvoie l'heure sous la forme d'une horloge digitale AM/PM.

function JSClock() {
  var time = new Date();
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();
  var temp = "" + ((hour > 12) ? hour - 12 : hour);
  if (hour == 0)
     temp = "12";
  temp += ((minute < 10) ? ":0" : ":") + minute;
  temp += ((second < 10) ? ":0" : ":") + second;
  temp += (hour >= 12) ? " P.M." : " A.M.";
  return temp;
}

La fonction JSClock crée tout d'abord un nouvel objet Date appelé time ; comme aucun paramètre n'est fourni, il contient la date et l'heure courantes. La fonction appelle ensuite les méthodes getHours, getMinutes et getSeconds pour assigner les valeurs des heures, minutes et secondes courantes aux variables hour, minute et second.

Les quatre instructions suivantes construisent une chaîne basée sur l'heure ainsi obtenue. La première crée une variable temp en lui assignant une valeur à l'aide d'une expression conditionnelle ; si hour est supérieur à 12, la valeur de (hour - 12), sinon simplement la valeur hour, à moins que celle-ci soit zéro, auquel cas elle devient 12.

L'instruction qui suit ajoute une valeur minute à la chaîne temp. Si la valeur de minute est inférieure à 10, l'expression conditionnelle ajoute une chaîne avec un zéro significatif ; sinon elle ajoute des points de démarcation. Une instruction similaire ajoute ensuite la valeur issue de seconds.

Pour terminer, une expression conditionnelle ajoute "PM" à temp si hour est supérieure ou égale à 12 ; "AM" dans les autres cas.

[modifier] L'objet Function

L'objet prédéfini Function spécifie une chaîne de code JavaScript compilable sous la forme d'une fonction.

Pour créer un objet Function :

objetFunction = new Function ([arg1, arg2, ... argn], corpsDeFonction)

objetFunction est le nom d'une variable ou d'une propriété d'un objet existant. Il peut également s'agir d'un objet suivi par un nom de gestionnaire d'évènement en minuscules, comme window.onerror.

arg1, arg2, ... argn sont les noms formels des paramètres utilisables par la fonction. Chacun d'eux doit être une chaîne correspondant à un identifiant JavaScript valide ; par exemple "x" ou "formulaire".

corpsDeFonction est une chaîne spécifiant le code JavaScript qui doit être interprété comme le corps de la fonction.

Un objet Function est évalué à chacune de ses utilisations. Ce qui est moins efficient que la déclaration initiale d'une fonction et son appel répété au sein du code, car les fonctions déclarées sont compilées une fois pour toutes.

Outre la définition de fonctions telle que décrite ici, il est également possible d'utiliser l'instruction function suivie de l'expression de la fonction. Consultez la Référence de JavaScript 1.5 Core pour plus d'informations.

Le code qui suit code assigne une fonction à la variable setBGColor. Cette fonction modifie la couleur de fond du document courant.

var setBGColor = new Function("document.bgColor='antiquewhite'");

Pour appeler l'objet Function, il suffit de spécifier le nom de la variable comme s'il s'agissait d'une fonction. Le code suivant exécute la fonction spécifiée par la variable setBGColor :

var choixCouleur = "antiquewhite";
if (choixCouleur == "antiquewhite") { setBGColor(); }

La fonction peut être assignée à un gestionnaire d'évènement d'une de ces deux manières :

document.form1.colorButton.onclick = setBGColor;

ou

<input name="couleur" type="button"
     value="Changer la couleur de fond"
     onclick="setBGColor()">

La création de la variable setBGColor telle que présentée ci-dessous est similaire à la déclaration de la fonction suivante :

function setBGColor() {
  document.bgColor = 'antiquewhite';
}

L'assignation d'une fonction à une variable est similaire à la déclaration d'une fonction, mais certaines différences existent :

• Lorsqu'une fonction est assignée à une variable en utilisant setBGColor = new Function("..."), setBGColor est une variable dont la valeur est une référence à la fonction créée avec new Function().
• Lorsqu'une fonction est créée en utilisant function setBGColor() {...}, setBGColor n'est pas une variable, c'est le nom de la fonction.

Il est possible d'intégrer une fonction au sein d'une autre fonction. La fonction interne est privée et accessible uniquement par sa fonction parente :

• La fonction interne est uniquement accessible depuis des instructions de la fonction parente.
• La fonction interne peut utiliser les paramètres et variables de la fonction parente. La fonction parente ne peut pas utiliser les paramètres et variables de sa fonction interne.

[modifier] L'objet Math

L'objet prédéfini Math fournit des propriétés et méthodes liées à des fonctions et constantes mathématiques. Par exemple, la propriété PI de l'objet Math fournit la valeur de pi (3.14159...), qui peut être utilisée dans une application comme ceci

Math.PI

De façon similaire, les fonctions mathématiques standards sont des méthodes de Math. Parmi celles-ci, on peut entre autres retrouver les fonctions trigonométriques, logarithmiques et exponentielles. Par exemple, pour utiliser la fonction trigonométrique sinus, on écrira

Math.sin(1.56)

Notez que toutes les méthodes trigonométriques de Math reçoivent leurs paramètres en radians.

Le tableau suivant résume les méthodes de l'objet Math.

Tableau 7.1 : Méthodes de Math

Contrairement à beaucoup d'autres objets, on ne crée jamais un nouvel objet Math. On utilise toujours l'objet Math prédéfini.

[modifier] L'objet Number

L'objet Number fournit des propriétés correspondant à des constantes numériques comme une valeur maximale, l'absence de nombre (not-a-number), et les infinités. Les valeurs de ces propriétés ne peuvent être changées et sont utilisables de la manière suivante :

plusGrandNombre = Number.MAX_VALUE
plusPetitNombre = Number.MIN_VALUE
nombreInfini = Number.POSITIVE_INFINITY
infinitéNégative = Number.NEGATIVE_INFINITY
pasUnNombre = Number.NaN

On se réfèrera toujours à une propriété de l'objet Number prédéfini comme ci-dessus, et non à une propriété d'un objet Number qu'on créerait soi-même.

Le tableau suivant résume les propriétés de l'objet Number.

Tableau 7.2 : Propriétés de Number

Le prototyle de Number fournit des méthodes permettant d'obtenir des informations depuis des objets Number dans divers formats. Le tableau suivant résume les méthodes de Number.prototype.

Tableau 7.3 : Méthodes de Number.prototype

[modifier] L'objet RegExp

L'objet RegExp permet de travailler avec des expressions rationelles (ou expressions régulières). Il est décrit en détail dans le Chapitre 4, Expressions rationelles.

[modifier] L'objet String

L'objet String enveloppe le type de données primitif string. Ne confondez pas une chaîne littérale avec l'objet String. Par exemple, le code suivant crée la chaîne littérale s1 ainsi que l'objet String s2 :

s1 = "toto"; //crée une nouvelle valeur chaîne littérale
s2 = new String("toto"); //crée un nouvel objet String

Il est possible d'appeler n'importe quelle méthode de l'objet String sur une valeur chaîne littérale : JavaScript convertit automatiquement la chaîne littérale en un objet String temporaire, appelle la méthode puis détruit l'objet String temporaire. Vous pouvez également utiliser la propriété String.length avec une chaîne littérale.

Il est conseillé d'utiliser les chaînes littérales à moins que vous ayez spécifiquement besoin d'utiliser un objet String, parce que ceux-ci peuvent avoir un comportement contre-intuitif. Par exemple :

s1 = "2 + 2"; // crée une valeur chaîne littérale
s2 = new String("2 + 2"); // crée un objet String
eval(s1); // renvoie le nombre 4
eval(s2); // renvoie la chaîne "2 + 2"

Un objet String dispose d'une seule propriété, length, qui indique le nombre de caractères dans la chaîne. Par exemple, le code suivant assigne à x la valeur 21, puisque "Salut tout le monde !" fait 21 caractères :

myString = "Salut tout le monde !";
x = mystring.length;

Un objet String dispose de deux types de méthodes : celles qui renvoient une variation de la chaîne elle-même, comme substring et toUpperCase, et celles qui renvoient une version formatée en HTML de la chaîne, comme bold et link.

Par exemple, dans l'exemple précédent, tant mystring.toUpperCase() que "Salut tout le monde !".toUpperCase() renverraient la chaîne "SALUT TOUT LE MONDE !".

La méthode substring reçoit deux paramètres de position et renvoie un sous-ensemble de la chaîne situé entre ces deux positions. Dans l'exemple précédent, mystring.substring(4, 9) renverrait la chaîne "t tou". Consultez la méthode substring de l'objet String dans la Référence de JavaScript Core pour plus d'informations.

L'objet String dispose également d'un certain nombre de méthodes destinées au formatage HTML, comme bold pour passer le texte en caractères gras et link pour créer un hyperlien. Par exemple, il est possible de créer un lien vers une adresse hypothétique à l'aide de la méthode link de la manière suivante :

machaine.link("http://www.saluttoutlemonde.com");

Le tableau suivant reprend les méthodes des objets String.

Tableau 7.4 : Méthodes des instances String