Pourquoi parle-t'on d'objets?

Le but de cette section n'a pas pour ambition de vous faire connaître la programmation orientée objet (POO) mais de vous donner une idée de ce qu'est un objet, concept nécessaire à la création de scripts Javascript.

Le Javascript traite les éléments qui s'affichent dans votre navigateur comme des objets, c'est-à-dire des éléments

  • classés selon une hiérarchie pour pouvoir les désigner précisément
  • auxquels on associe des propriétés

Cette notion semble floue pour l'instant mais voyons voir cela sur un exemple concret:
Imaginez un arbre dans un jardin comportant une branche sur laquelle se trouve un nid. On suppose la hiérarchie d'objets est définie comme ceci:
  • jardin
    • arbre
      • branche
        • feuille
        • nid
          • largeur: 20
          • couleur: jaune
          • hauteur: 4
      • tronc
      • racine
    • salade
    • balançoire
      • trapèze
      • corde
      • nid
        • largeur: 15
        • couleur: marron
        • hauteur: 6
Le nid sur l'arbre est donc désigné comme suit:
jardin.arbre.branche.nid
Contrairement au nid situé sur la balançoire:
jardin.balançoire.nid

Imaginez maintenant que l'on veuille changer la couleur du nid (dans l'arbre) pour le peindre en vert, il suffirait de taper une commande du genre:
jardin.arbre.branche.nid.couleur= vert;

C'est donc ainsi que l'on représente les objets en Javascript, à la seule différence que ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre de votre navigateur...

Les objets du navigateur

Javascript divise la page du navigateur en objets, afin de vous permettre d'accèder à n'importe lequel d'entre-eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés.

On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu!

  • L'objet le plus grand est l'objet fenêtre (les objets en javascript ont leur dénomination en anglais, donc dans le cas présent window)
  • Dans la fenêtre s'affiche une page, c'est l'objet document
  • Cette page peut contenir plusieurs objets, comme des formulaires, des images, ...
Pour accéder à un objet il faut donc partir de l'objet le plus grand (l'objet window pour descendre à l'objet que l'on veut atteindre.
Prenez par exemple le bouton (appelé checkbox) et le champ de texte suivants:



  • Le formulaire (auquel on a donné le nom form1, pour le distinguer des autres formulaires de la page tels que le moteur de recherche CCM) est repéré par le code suivant:
    window.document.forms["form1"]
  • Le bouton checkbox (auquel on a donné le nom checkbox) est repéré par le code suivant:
    window.document.forms["form1"].checkbox
  • Le champ de texte (auquel on a donné le nom champ_text) est repéré par le code suivant:
    window.document.forms["form1"].champ_text

Le bouton checkbox a entre autre une propriété checked, qui retourne la valeur 1 si le bouton est coché, 0 dans le cas contraire. Cliquez sur le bouton checkbox pour comprendre ce qu'il est possible de faire grâce à ces propriétés.

Ainsi le formulaire form1 a comme code HTML : 


<form name="form1">
<br><input type="checkbox" name="checkbox" onClick="ModifChamp();return true;">
<br><input type='TEXT' name='champ_text' value='Essai du javascript' size='24'></form>

Et la fonction javascript associée au bouton checkbox est : 


<script language="Javascript">
<!--
function ModifChamp()
{
	if (document.forms["form1"].checkbox.checked)
	{document.forms["form1"].champ_text.value='Bouton coché'}

	else
	{document.forms["form1"].champ_text.value='bouton non coché'}

}
// -->

Le champ de texte a par exemple comme propriétés:

  • name: le nom du champ de texte
  • value: le texte contenu dans le champ
  • size: la taille du champ de texte

Par exemple, l'appui sur les boutons suivants permet de modifier la propriété suivante: window.document.forms["form1"].text.value (c'est-à-dire le texte associé au champ de texte que l'on a nommé champ_text)

© Copyright 2001 Jean-François Pillou
Ce document issu de CommentCaMarche.net est soumis à la licence GNU FDL. Permission vous est donnée de distribuer, modifier des copies de cette page tant que cette note apparaît clairement.