Nous avons vaguement vu dans la page précédente comment changer le contenu d'un objet, il s'agissait en l'occurrence d'une image, mais on peut aussi bien obtenir l'état d'un bouton, ou le contenu d'un champ de texte (et le modifier) ou du document contenu dans une zone de texte.

Pour ce faire, il faut savoir que pour Javascript l'objet le plus élevé de la hiérarchie de la page web, le chef, c'est la fenêtre, en anglais (et donc en Javascript) "window". Comme tous les chefs, c'est un objet qui ne travaille pas (ou pas beaucoup) mais surtout qui est implicite, on n'a donc pas besoin de le mentionner sauf si on aime taper du texte sur un clavier, faire de la lèche, ou si on travaille avec plusieurs fenêtres ou des frames.

L'objet suivant, c'est le document HTML, en anglais "document", mais si vous avez une fenêtre avec des frames, il est donc nécessaire d'indiquer dans quelle fenêtre ou dans quel document vous voulez lire, écrire ou modifier un objet.

Ensuite ça se complique un peu, car il peut exister toutes sortes d'objets, des images (en anglais images), des liens, des formulaires, des boutons, du texte, etc...

Supposons, un instant que l'on veuille atteindre un bouton à l'intérieur d'un formulaire, la hiérarchie pour l'atteindre (autrement que par son nom) serait:

Ce qui donne: window.document.forms[0].checkbox[0] pour les puristes (ou la compatibilité maximum), et pour les fainéants: document.forms[0].checkbox[0], certains navigateur acceptent même: forms[0].checkbox[0], mais il vaut mieux éviter cela à tout prix.

Pourquoi [0] ? Et pourquoi pas partout ? Et bien tout simplement parce qu'il peut y avoir plusieurs formulaires dans un document et plusieurs boutons à cocher dans un formulaire, mais pas plusieurs documents en même temps dans la même fenêtre ou la même frame.

Nous avons utilisé une autre méthode dans l'exemple précédent pour atteindre une image, mais cette méthode implique que l'on donne un nom à l'objet voulu avec NAME="", ce qui à comme énorme avantage de permettre au script de continuer à fonctionner correctement si on déplace cette image par rapport à d'autres, mais nécessite de nommer tous les objets que l'on veut utiliser, à vous de voir ce que vous préférez.

On peut aussi utiliser le nom de l'objet directement, par exemple, si le formulaire s'appelle "enquete" (évitez les accents dans les noms d'objets) et le bouton s'appelle "courrier":

window.document.enquete.courrier (mais il n'est pas possible sous cette forme d'utiliser une variable contenant le nom de l'objet).

Et pour "simplifier" encore les choses on peut utiliser aussi depuis Javascript 1.2:

window.document.form["enquête"].button["courrier"] (ou: ...button[variable_x], variable_x contenant le nom de l'objet).

Pour la première image du document: document.images[0]

Pour la troisième: document.images[2] et oui, comme les tableaux partent de zéro, c'est comme ça !

Si ça ne vous plaît pas, donnez des noms aux objets et utilisez-les, de toutes façons, c'est bien plus simple et plus sûr dans le cas fréquent d'une mise à jour qui déplacerait l'ordre ou augmenterait le nombre des objets dans la page.

Le moment est venu de voir une liste d'objets Javascript (version indéterminée et variable, sujette de toute façon à modifications) et leur hiérarchie pour savoir ce que le javascript permet de lire, écrire, tester ou modifier.

Pour changer par exemple la couleur de fond du document (propriété bgColor):

document.bgColor="black";

Pour écrire dans le document (méthode write):

document.write("Bonjour !");

Les seules différences entre une propriété et une méthode, c'est que la propriété utilise le signe "=" et ne permet que de lire ou d'écrire qu'une seule valeur, alors que la méthode utilise les parenthèses "()" et permet éventuellement d'envoyer plusieurs paramètres.

Beaucoup de propriétés de l'objet document (par exemple) peuvent être ainsi lues et changées, et si je vous donne encore les propriétés suivantes, linkColor (couleur des liens) , vlinkColor (couleurs des liens visités), fgColor (couleur du texte), et que je vous dis (car je suis ignoble et que j'aime ça) que vous pouvez écrire un petit programme pour faire changer les couleurs du document à intervalle régulier, hein ?

Bon, on est pas obligé de passer du vert fluo au rouge incendie toutes les 0,5 secondes, on peut aussi passer graduellement du lever de soleil à la lumière du matin en une ou deux minutes, mais ici nous parlons encore des objets et de leur propriétés, je vous donnerai le mode d'emploi des timers (compteurs) plus loin.

La liste (présumée) complète (version "courante") des propriétés et méthodes des objets est du genre fastidieuse et interminable, mais la maison ne recule devant aucun sacrifice et la voici donc, cette liste permet de savoir tout ce que l'on peut théoriquement faire avec un objet, en lecture, écriture et comme changements (création, taille, position et autres). Beaucoup de propriétés pourront vous sembler de prime abord mystérieuses (à moi aussi d'ailleurs au début, si ça peut vous rassurer), mais ici ce n'est qu'une liste, pour les détails il faudra regarder plus loin dans le guide, dans les exemples, ou dans une référence.

Pour savoir si le deuxième bouton à cocher du formulaire "formulaireA" est coché on utilisera quelque chose comme:

if (document.formulaireA.checkbox2.checked) {alert("Le bouton2 est coché")};

ou encore (les deux formes sont valides et le double signe "=" n'est pas une coquille):

if (document.formulaireA.checkbox2.checked==true) {alert("Le bouton2 est coché")};

Ce que l'on peut traduire comme cela: Si (if) l'objet "document.formulaireA.checkbox2" à comme propriété "checked" (coché) d'être vraie (true), alors on affiche un message qui le dit (fonction alert et texte). Pour information, le mot clef "false" (faux) vous permet de tester l'état contraire de la condition...

La fonction "if ( condition ) { exécution };" est une fonction vitale en programmation elle permet de prendre des décisions en relation avec l'environnement. Vous l'utiliserez souvent si vous voulez écrire des pages interactives, je suis même certain que les idées se bousculent déjà dans votre tête et que vous mourrez d'impatience de les réaliser.

Autre exemple: <SCRIPT LANGUAGE="Javascript">document.write("Bonjour, bienvenue sur ma page web.");</SCRIPT>

Cette phrase sera affichée dans le document à l'endroit où se trouve le script (par rapport à ce qui précède et suit), mais uniquement par les navigateur qui ont javascript actif. Elle ne sera même pas imprimée par des vieilles version de navigateur. Il faut donc éviter d'écrire des choses importantes en javascript pour préserver la compatibilité avec tout le monde. Pour le moment javascript devrait rester un plus par rapport au langage HTML, mais ne pas devenir indispensable.