Geen cache-versie.

Caching uitgeschakeld. Standaardinstelling voor deze pagina:ingeschakeld (code LNG204)
Als het scherm te langzaam is, kunt u de gebruikersmodus uitschakelen om de cacheversie te bekijken.

Objets JavaScript

Inhoudsopgave

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

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

Inhoudsopgave 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

Informatie

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.

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

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

    • Nederlandse vertaling

    U hebt gevraagd om deze site in het Nederlands te bezoeken. Voor nu wordt alleen de interface vertaald, maar nog niet alle inhoud.

    Als je me wilt helpen met vertalingen, is je bijdrage welkom. Het enige dat u hoeft te doen, is u op de site registreren en mij een bericht sturen waarin u wordt gevraagd om u toe te voegen aan de groep vertalers, zodat u de gewenste pagina's kunt vertalen. Een link onderaan elke vertaalde pagina geeft aan dat u de vertaler bent en heeft een link naar uw profiel.

    Bij voorbaat dank.

    Document heeft de 19/03/2002 gemaakt, de laatste keer de 06/11/2018 gewijzigd
    Bron van het afgedrukte document:https://www.gaudry.be/nl/javascript-objets.html

    De infobrol is een persoonlijke site waarvan de inhoud uitsluitend mijn verantwoordelijkheid is. De tekst is beschikbaar onder CreativeCommons-licentie (BY-NC-SA). Meer info op de gebruiksvoorwaarden en de auteur.