Les modèles d'objets JavaScript

JavaScript est basé sur une programmation simple, orientée objet et paradigmatique. Un objet est une suite de propriétés qui sont des variables JavaScript. Ces propriétés peuvent-être des procédés d'objets.

En plus des objets qui sont inclus dans le client Navigateur, et dans le serveur LiveWire, vous pouvez définir vos propres objets.

Propriétés et Objets
Fonctions et Procédés
Créer de nouveaux objets

Propriétés et Objets

Un objet JavaScript est associé à des propriétés. Vous accedez aux propriétés d'un objet avec une simple notation du type:


NomObjet.NomPropriete

Aussi bien les noms d'objets que les noms de propriétés réspectent la casse (diferenciation MAJUSCULES-minuscules). Vous définissez une propriété en lui assignant une valeur. Par exemple, supposons qu'il y ait un objet nommé maVoiture (nous verrons plus loin comment créer cet objet, pour le moment, considerez qu'il est créé). Vous pouvez lui assigner des propriétés nommées constructeur, modele et annee comme ceci:


maVoiture.constructeur = "VolksWagen"
maVoiture.modele = "Cox"
maVoiture.annee = 76;

Un ensemble est un groupe de valeurs ordonnées associées à un seul nom de variable. Propriétés et ensembles dans JavaScript sont étroitement liés; en fait ce sont des interfaces pour la même structure de données. Donc, par exemple, vous pouvez acceder aux propriétés de maVoiture, objet décris au dessus, comme suis:

maVoiture["constructeur"] = "VolksWagen"
maVoiture["modele"] = "Cox"
maVoiture["annee"] = 76;

De même, vous pouvez acceder à chacun de ces élements par leurs index, comme le montre l'exemple suivant:

maVoiture[0] = "VolksWagen"
maVoiture[1] = "Cox"
maVoiture[2] = 76;

Ce type d'ensemble est appelé ensemble associatif, parceque chaque index est associé à une chaîne de valeurs. Pour illustrer comment ça marche, les fonctions suivantes affichent les propriétés de l'objet, quand vous passez l'objet et le nom de l'objet comme arguments de la fonction:

function show_props(obj, obj_nom) { 
    var result = ""; 
    for (var i in obj) 
        result += obj_nom + "" + i + " = " + obj[i] + "\n"; 
    return result; 
}

Donc, la fonction appelant show_props(maVoiture, "maVoiture") devrait retourner ceci:

maVoiture.constructeur = VolksWagen
maVoiture.modele = Cox
maVoiture.annee = 76

Les Fonctions et les Méthodes

Les Fonctions sont une des bases du JavaScript. Une fonction est une procédure JavaScript, une suite de déclarations qui execute une tache définie.

Une définition de fonction a le schéma suivant: elle est introduite par le mot clé function, suivi:

du nom de la fonction
d'une liste des parametres de la fonction, encadrée par des parenthèses, et séparée par des apostrophes
de déclarations JavaScript qui définissent la tache de la fonction, encadrées elles par des accolades, {...}

Dans une application client (Navigateur), vous pouvez utiliser n'importe quelle fonction qui est définie dans la page. Il est généralement conséillé de défibnir toutes les fonctions dans le HEAD d'une page. Quand un utilisateur charge la page, les fonctions sont chargées en premier.

Les déclarations dans une fonction peuvent appeler d'autres fonctions déjà définies dans la même page.

Par exemple, voici le script d'une fonction trés simple nommée pretty_print:

function pretty_print(chaine) { document.write("<HR><P>" + chaine) }

Cette fonction prends comme argument une chaîne, ajoute du HTML avec le signe d'enchainement (+), et affiche le résultat dans le même document.

Definir une fonction ne l'éxecute pas. Vous devez appeler une fonction pour qu'elle s'éxecute. Par exemple, vous pourriez apeler la fonction pretty_print comme cela:

<SCRIPT> pretty_print("Ceci est le texte a afficher") </SCRIPT>

Les paramètres d'une fonction ne sont pas seulement limitées aux chaînes et aux nombres. Vous pouvez aussi passer un objet entier dans une fonction. La fonction show_props de la section précédente est un éxemple de fonctions qui prend un objet comme argument.

Une fonction peut aussi être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Par exemple, voici une fonction qui calcule les facteurs:

function factorial(n) {
  if ((n == 0) || (n == 1))
    return 1
  else {
    result = (n * factorial(n-1) )
    return result
  }
}

vous pouvez appeler cette fonction avec un argument de un à cinq dans une boucle comme ceci:

for (x = 0; x < 5; x++) {
   document.write(x, " le facteur est ", factorial(x))
   document.write("
")
}

Le résultat devrait-être:
0 le facteur est 1
1 le facteur est 1
2 le facteur est 2
3 le facteur est 6
4 le facteur est 24
5 le facteur est 120

Les Procedures

Une procédure est une fonction associée à un objet. Vous définissez une procédure comme vous définissez une fonction standard. Ensuite, vous utilisez la syntaxe suivante pour associer la fonction à un objet existant:

objet.nomdelaprocedure = nom_fonction

ou objet est un objet existant, nomdelaprocedure est le nom que vous assignez au procédé, et nom_fonction est le nom de la fonction.

Vous pouvez ensuite appeler la procédure dans le contexte d'un objet, comme ceci:

objet.nomdelprocedure(parametres);

Utiliser this pour les références d'objets

JavaScript a un mot clef special, this, que vous pôuvez utiliser pour vous referrer à l'objet courant. Par exemple, supposez que vous ayez une fonction nommée validate qui valide la propriété de la valeur d'un objet en donnant l'objet et ses valeurs hautes et basses:

function validate(obj, lowval, hival) {
   if ((obj.value < lowval) || (obj.value > hival))
      alert("Invalid Value!")
}

Ensuite vous pouvez appeler validate dans chaque lien d'évenement onChange d'élément de formulaire, en utilisant this pour le passer dans l'élement de formulaire, comme dans l'exemple qui suit:

En général, dans une procédure, this réfère à l'objet appelant.

Créer de nouveaux objets

Aussi bien le javaScript client que le JavaScript serveur à un nombre prédéfini d'objets. En plus, vous pouvez créer vos propres objets. Créer votre propre objet demande deux étapes:

Définir le type d'objet en écrivant une fonction.
Créer une circonstance de l'objet avec new.

Pour définir un type d'objet, créez une fonction pour le type d'objetsque spécifie son nom, et ses propriétés et procédés. Par exemple, supposez que vous vouliez créer un type d'objets pour les voitures. Vous voulez que ce type d'objets soit appelé voiture, et qu'il ait les propriétés suivantes: constructeur, modele, année, couleur. Pour faire cela, vous devrez écrire la fonction suivante:

function voiture(constructeur, modele, annee) {
   this.constructeur = constructeur; 
   this.modele = modele;
   this.annee = annee;
}

Notez l'utilisation de this pour assigner les valeurs aux propriétées de l'objet basés sur les valeurs passées à la fonction.

Maintenant vous pouvez créer un objet appelé mycar comme ça:

mycar = new car("Eagle", "Talon TSi", 1993);

Cette définition crée mycar et lui assigne les valeurs spécifiées pour ses propriétés. Ensuite la valeur de myCar.constructeur est al chane "Eagle", mycar.annee est l'entier 1993, et ainsi de suite.

Vous pouvez créer autant d'objets car par un simple appel à new. Par exemple,

kenscar = new car("Nissan", "300ZX", 1992)

Un objet peut avoir une propriété qui est elle-même un objet. Par exemple, supposez que je définisse un objet aqppelé person comme ceci:
function person(nom, age, sexe) { this.nom = nom; this.age = age; this.sexe = sexe; }

Et ensuite que je crée deux nouveaux objets person comme ça:
rand = new person("Rand McNally", 33, "M") ken = new person("Ken Jones", 39, "M")

Ensuite, nous pouvons réecrire la définition de car pour inclure une propriété proprietaire qui prends un objet person comme ça:
function car(constructeur, modele, annee, proprietaire) { this.constructeur = constructeur; this.modele = modele; this.annee = annee; this.proprietaire = proprietaire; }

Pour insérer les nouveaux objets, vous utilisez ceci:
car1 = new car("Eagle", "Talon TSi", 1993, rand); car2 = new car("Nissan", "300ZX", 1992, ken)

Notez qu'au lieu de mettre une chaîne ou un nombre entier pour créer un nouvel objet, cette déclaration passe les objets rand et ken comme parametres pour proprietaires. Ensuite, si vous voulez trouver le nom du propriétaire de car2, vous pouvez acceder à cette propriété:
car2.proprietaire.name

Notez que vous pouvez toujours ajouter une propriété à un objet prédéfini. Par exemple, la déclaration:
car1.color = "black"
ajoute une propriété color à car1, et lui assigne une valeur "black". Cependant, cela n'affecte aucun autre objet. Pour ajouter la nouvelle propriété à tous les autres objets du même type, vous devez ajouter la propriété à la définition du type d'objet car.
Définir des procédés

Vous pouvez définir des procédés pour un type d'objets en incluant une définition de procédé dans la définition du type d'objet. Par exemple, supposez que vous ayez un groupe d'images GIF, et que vous vouliez définir un procédé qui afficherai des informations sur la voiture à coté de l'image. Vous pourriez définir une fonction comme ceci:
function displayCar() { var result = "Une magnifique " + this.year + " " + this.make + " " + this.model; pretty_print(result) }
ou pretty_print est la fonction précédement définie, pour imprimer une chaîne. Notez encore l'utilisation de this pour réferer à l'objet auquel appartient le procédé.
Vous pouvez transformer cette fonction en procédé de car en ajoutant la déclaration
this.displayCar = displayCar;
à la définition de l'objet. Alors, la définition complète de car devrait maintenant ressembler à:
function car(constructeur, modele, annee, proprietaire) { this.constructeur = constructeur; this.modele = modele; this.annee = annee; this.proprietaire = proprietaire; this.displayCar = displayCar; }

Ensuite vous pouvez appeler ce nouveau procédé comme ceci:
car1.displayCar() car2.displayCar()
Ceci devrait ressembler à:

Une magnifique 1993 Eagle Talon TSi

Une magnifique 1992 Nissan 300ZX