Objets JavaScript

Table des matières

Objet ?

Un objet peut représenter tout élément de la page HTML, la page en elle-même, ou bien d'autres choses encore. Chaque objet est identifié de manière unique, et est influencé par certains facteurs:

  • Les propriétés (ce qu'il est).
  • Les méthodes (ce qu'il fait).
  • Les manipulateurs d'évènements (manière dont il est contrôlé par les scripts).

Table des matières Haut

Propriétés de l'objet

Une propriété d'un objet est un des éléments qui le définissent.
Par exemple, l'objet personne peut être définit par un certain nombre de propriétés auxquelles sont affectées des valeurs.

Objet Personne 
Propriétés | Nom | Prénom | Age | Profession |
Valeurs | Milan | Martin | 25 | Pilote |

Table des matières Haut

Méthodes de l'objet JavaScript

Une méthode définit une action effectuée avec ou sur l'objet.
Des parenthèses placées après le nom de l'objet permettent de spécifier les arguments nécessaires. Dans le cas où un argument n'est pas requis, les parenthèses sont vides.

Créer nos objets JavaScript

Information

Cette partie date de la première versiion du site en 2001. Elle reste à titre informatif, mais la structure est depuis longtemps stockée dans une base de données, et les pages générées sont ensuite mises en chache.

Les objets existant en JavaScript et les objets de document ne nous suffisent pas toujours. Nous pouvons donc créer nos propres objets, avec leurs propriétés et leurs méthodes.

Chaque page possède des boutons de navigation "précédent" et "suivant" afin de donner un fil conducteur au visiteur. De plus, pour chaque chapitre, un sommaire permet de d'atteindre directement chaque page, accompagnée d'un descriptif. Il serait quand-même préférable de réunir ces informations en un seul fichier, dont les modifications se répercuteraient sur l'ensemble du site…

Une fonction devrait donc utiliser d'autres petites fonctions pour générer automatiquement le haut de page qui comprend les boutons "précédent" et "suivant" avec leurs effets (onMouseOver, etc.), le titre de chapitre, le titre de page, les effets de style (barre horizontale, etc.), et les boîtes de sélection (celle vers les pages du chapitre, plus celle vers les différentes ancres de la page).
Cette fonction comprendrait aussi une fonction pour générer le bas de page.

Table des matières Haut

Données nécessaires

Afin d'automatiser la navigation, nous allons instancier (créer un objet du type demandé) un objet pour chaque page, qui contiendra toutes les données nécessaires.
Nous devons donc nous demander quelles sont les propriétés dont nous aurons besoin :

  • Adresse du fichier.
  • Nom du fichier (adresse + nom sont nécessaires pour établir le lien).
  • Chapitre concerné (qui servira pour constituer les sommaires particuliers)
  • Titre de la page (détermine le texte sur lequel cliquer).
  • Description de la page (pour une description dans le sommaire, et pour constituer la valeur de l'attibut alt des boutons "précédent" et "suivant").
  • Page précédente.
  • Page suivante.

Maintenant que nous avons définis nos besoins, nous devons trouver un nom significatif pour l'objet. Le nom doit rappeler directement sa nature, afin de rendre le programme compréhensible. J'ai nommé cet objet NavPge, car il constitue les propriétés de la page nécessaires à la navigation.

Table des matières Haut

Une fonction pour créer l'objet

La fonction NavPge() est un constructeur qui, par l'utilisation du mot clé thisnous permet d'assigner en tant que paramètres pour l'instance en cours les valeurs entrantes. Un objet est une sorte de recette, un contrat qui définit ce que l'on peut faire. Une instance est un objet construit selon cette recette.

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. //création de la structure de l'objet
  4. function NavPge(rep, nom, chap, titre, desc, pre, sui){
  5.   this.rep=rep;
  6.   this.nom=nom;
  7.   this.chap=chap;
  8.   this.titre=titre;
  9.   if (desc.length==0) {desc=titre;}
  10.   this.desc=desc;
  11.   this.pre=pre;
  12.   this.sui=sui;
  13. }
  14. //]]>
  15. </script>
  • L'instruction if (desc.length==0) {desc=titre;} permet de composer la description avec la valeur du titre si aucune description n'est prévue.
  • Les valeurs affectées peuvent aussi être des fonctions, le nom de fonction n'étant plus suivi de ses parenthèses.

Ensuite, nous devons créer les différents objets selon la structure établie par NavPge(), et les ranger dans des variables.

  1. var page1 = new NavPge(
  2. 	dossier_pages,
  3. 	"page1.htm",
  4. 	"Chapitre1: Informatique",
  5. 	"Première page",
  6. 	"Cette page est la première du chapitre",
  7. 	" ",
  8. 	"page2"
  9. 	);
  10. var page2 = new NavPge(
  11. 	dossier_pages,
  12. 	"page2.htm","Chapitre1: Informatique",
  13. 	"Deuxième page",
  14. 	"Cette page est la deuxième du chapitre",
  15. 	"page1",
  16. 	"page3"
  17. 	);
  18. var page3 = new NavPge(
  19. 	dossier_pages,
  20. 	"page3.htm",
  21. 	"Chapitre1: Informatique",
  22. 	"Troisième page",
  23. 	"Cette page est la troisième du chapitre",
  24. 	"page2",
  25. 	" "
  26. 	);

Un ensemble de données sous cette forme nous fait de suite penser à l'utilisation de tableaux, nettement plus faciles à manipuler que toute une série de variables.

Nous devons alors créer un tableau d'objets, auxquels il sera aisé d'accéder selon les index (la position dans le tableau, à partir de 0).

  1. navPges["page 1"]=new NavPge(
  2. 	dossier_pages,
  3. 	"page1",
  4. 	1,
  5. 	"titre 1",
  6. 	"Description 1",
  7. 	"",
  8. 	"page 2"
  9. 	);
  10. navPges["page 2"]=new NavPge(
  11. 	dossier_pages,
  12. 	"page2",
  13. 	1,
  14. 	"titre 2",
  15. 	"Description 2",
  16. 	"page 1",
  17. 	"page 3"
  18. 	);
  19. navPges["page 3"]=new NavPge(
  20. 	dossier_pages,
  21. 	"page3",
  22. 	1,
  23. 	"titre 3",
  24. 	"Description 3",
  25. 	"page 2",
  26. 	""
  27. 	);
Les titres de chapitres sont remplacés par un numéro, qui est en fait l'index d'un tableau qui reprend les différents chapitres.
  • dossier_pages reprend seulement l'adresse depuis la racine du site. C'est en modifiant la valeur d'une variable dans les variables globales, que toutes les adresses sont modifiées.

    • Version en cache

    21/12/2024 13:41:19 Cette version de la page est en cache (à la date du 21/12/2024 13:41:19) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.

    Document créé le 19/03/2002, dernière modification le 06/11/2018
    Source du document imprimé : https://www.gaudry.be/javascript-objets.html

    L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.