No cache version.

Caching disabled. Default setting for this page:enabled (code LNG204)
If the display is too slow, you can disable the user mode to view the cached version.

Objets JavaScript

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).

Contents 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 |

Contents 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.

Contents 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.

Contents 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.
  • English translation

    You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

    If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

    Thank you in advance.

    Document created the 19/03/2002, last modified the 06/11/2018
    Source of the printed document:https://www.gaudry.be/en/javascript-objets.html

    The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.