Objets JavaScript

Inhaltsverzeichnis

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

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

Inhaltsverzeichnis 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

Informationen

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.

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

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

    • Deutsche Übersetzung

    Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

    Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

    Vielen Dank im Voraus.

    Dokument erstellt 19/03/2002, zuletzt geändert 06/11/2018
    Quelle des gedruckten Dokuments:https://www.gaudry.be/de/javascript-objets.html

    Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.