Voyons le JS dans la page HTML.
Pour JS, tous les éléments HTML sont des objets (images, liens, etc.) : on va donc pouvoir s'en servir pour en connaître ou en modifier les caractéristiques (comme l'adresse de l'image ou ses dimensions).
Cela se révèlera particulièrement pratique, notamment dans le cas des formulaires, qui nous serviront à communiquer avec notre cher utilisateur.

On va voir, au fil de ce chapitre, comment accéder à ces objets issus de notre page, et comment les exploiter.

On va rapidement voir qu'en JS, la plupart des fonctions qu'on utilise sont en fait… des méthodes de certains objets !

Prenons nos trois fonctions qui font apparaître des boîtes de dialogues, alert(), prompt() et confirm().

Ce ne sont pas des méthodes, car on ne retrouve pas la syntaxe objet.methode() !?

En fait, si on voulait tout écrire, il faudrait employer window.alert(), window.prompt() et window.confirm()… ce sont donc bel et bien des méthodes, d'un certain objet appelé "window" !

L'objet window "représente" la fenêtre du navigateur. Ce sera un objet très utilisé, car il possède de nombreux sous-objets.

On l'utilisera souvent, car c'est un objet de base, pour ne pas dire l'objet de base : c'est pour cela qu'il est facultatif de préciser son nom, comme on l'a toujours fait en écrivant alert() (le programmeur est un animal très fainéant).
Mais, c'est le seul objet qu'on peut ne pas écrire quand on l'utilise.

Toutes les fonctions ne sont pas des méthodes de window ! En fait, parmi les fonctions qu'on a vues, seules les trois citées plus haut en sont. Par exemple, isNaN() est une fonction qui n'appartient à aucun objet.

L'objet document est un sous-objet de window. Cet objet représente la page HTML affichée dans le navigateur. C'est un objet assez important, qu'il est impératif d'écrire ! On ne peut pas l'omettre comme window.

Nous allons passer par ses méthodes pour accéder aux éléments de la page.

Il est possible d'atteindre (comprendre accéder à) tous les éléments de la page HTML avec deux méthodes de l'objet document :

• document.getElementById("id");
• document.getElementsByTagName("balise");

Cette méthode permet d'accéder très facilement à l'élément dont l'id est id. Rappel : dans une page html, deux éléments différents doivent avoir des ids différents. Cette fonction nous donne donc bien un élément.

Cette méthode retourne sous forme de tableau tous les éléments HTML dont on donne la balise en argument.
Cet exemple va retourner un tableau contenant tous les éléments <textarea> de la page.

Puisque la méthode retourne un tableau, il est bien sûr possible d'accéder à chacun des éléments. Si on veut accéder au second <textarea> de la page, on procédera donc ainsi (rappel, on commence à compter à partir de 0) :

Mais, à quoi peut bien servir cette méthode ? On ne doit pas utiliser ça tous les jours !

Effectivement ! Cela dit, le tableau retourné peut astucieusement être utilisé avec une boucle, de manière à récupérer des éléments particuliers repérés par exemple par leur attribut class ; on pourra ainsi appliquer des changements (comme les masquer) uniquement à ces éléments là.

On écrit getElementsByTagName, car on récupère un tableau d'éléments. Avec getElementById, on récupère un élément unique, donc pas de s.

Ces deux méthodes font partie du JS depuis sa version 1.5.
Supportée par les version 5 et supérieures de Internet Explorer : seuls les très vieux navigateurs seront incompatibles…

Il existe un moyen de savoir si la méthode "getElementById" fonctionne sur le navigateur qui exécute le script.
On effectue pour cela ce test : Comprendre ce code ainsi : si document.getElementById n'est pas défini, alors […].

Nous n'allons pas étudier tous les attributs de tous les objets, il faut savoir qu'on retrouve presque toujours les mêmes attributs qu'en HTML.
On peut citer les attributs id (encore lui) et className (qui correspond à l'attribut HTML "class").

Ce dernier est l'un des rares attributs dont le nom n'est pas le même qu'en HTML. La cause : le mot-clé "class" est réservé en JS (on n'a pas le droit de l'utiliser pour des noms de variables ou autres). Donc il a fallu trouver un autre nom, d'où className.

Voici quelques exemples…

Modifier l'adresse d'une image et ses dimensions :
Afficher la destination d'un lien :

Il existe une autre façon de modifier un attribut d'un objet HTML, en utilisant un truc nommé DOM, mais on en reparlera en temps voulu.

Voici une liste d'évènements qui s'appliquent à la plupart des objets.
Pour les évènements plus spécifiques, ils seront cités lorsqu'on abordera l'objet en question, dans les chapitres qui suivent.

Rappel : les évènements doivent se noter en minuscule, même si on les écrit onEvent pour plus de lisibilité.

• onClick et onDblClick : lors d'un clic / double clic sur l'élément en question
• onKeyPress : lorsqu'on appuie sur une touche avec cet élément sélectionné
• onKeyDown et onKeyUp : lorsqu'une touche est enfoncée / relâchée avec cet élément sélectionné
• onMouseOver et onMouseOut : lorsque le pointeur de la souris arrive sur l'élément / sort de cet élément
• onMouseMove : lors d'un déplacement de la souris au-dessus de cet élément
• onMouseDown et onMouseUp : lorsque le bouton de la souris est enfoncé / relâché sur cet élément

La première façon de déclencher un script lors d'un évènement, c'est d'utiliser l'attribut HTML, comme nous l'avons vu dans l'un des premiers chapitres :
Mais il est également possible d'indiquer cet évènement directement en JS.
Voici une image (qu'on va repérer grâce à son id) : Et voici le même exemple que ci-dessus, mais directement en JS :

Ce code JS doit être placé dans la page, après l'image ! S'il se trouve dans l'en-tête de la page, l'image n'aura pas encore été créée lors de son exécution (qui se fait au fil du chargement de la page), et JS ne pourra donc pas lui associer un évènement.

On associe bien une fonction à l'évènement ! On peut également le faire de cette manière : Code : JavaScript 1     function quoi() 2     { 3         alert("Oui ?"); 4     }; 5     document.getElementById("uneImage") .onclick = quoi; // on parle de la fonction elle-meme : pas de parentheses

En revanche, ceci est faux : Code : JavaScript 1     document.getElementById("uneImage") .onclick = alert("Oui ?");

En partant d'un formulaire (balise form), il est possible d'accéder à chacun des champs en utilisant leur attribut name.
Regardons le code HTML suivant :
Admettons que nous voulons agir sur le champ de texte qui s'appelle pseudo.
On va commencer par accéder au formulaire comme nous l'avons vu, par son id :
Voyons maintenant comment accéder au champ nommé "pseudo" à partir de notre formulaire, sans utiliser son id.

On utilise directement pseudo, qui est en fait un sous-objet de notre formulaire :
Dans le cas des éléments de formulaires, on accède donc aux sous-objets directement par leur nom (l'attribut name).

On peut également accéder aux éléments du formulaire en sachant que notre formulaire contient un tableau elements regroupant justement tous ses éléments.

Ainsi, pour accéder au premier champ du formulaire :

Cette façon d'accéder aux éléments est déconseillé : si on insére un champ, les indices (les numéros) changent, et il faut modifier le script en conséquence.

Cette façon d'accéder aux éléments est semblable à la précédente, sauf qu'on utilise pour les indices non pas les numéros, mais les noms.
C'est un peu plus long que la première façon de faire, mais on comprend lors de la lecture que pseudo est un élément de formulaire.

L'utilisation des formulaires : c'est un excellent moyen de communiquer avec le visiteur (plus agréable que les boîtes de dialogue).
Voir prochain chapitre qui y est entièrement consacré.

Pour accéder à un élément, on va généralement utiliser la méthode getElemementById de l'objet document.
Si on veut récupérer un tableau contenant toutes les balises ayant un nom donné (toutes les images, par exemple),
on va utiliser la méthode getElementsByTagName.
Pour les éléments de formulaires : on peut utiliser le tableau elements du formulaire lui-même, ou bien directement le nom de l'élément.
Par exemple, pour accéder au champ nommé "pseudo" de notre formulaire d'id "idForm" :
ou bien :

Il existe cependant un cas où accéder à un élément est particulièrement simple : c'est lorsque le code se trouve dans la balise HTML de l'objet en question. On utilise dans ce cas le mot-clé this, qui désigne cet élément (d'où son nom).

Exemple, changer d'image lorsqu'on clique dessus :
Ici, l'utilisation de this nous évite d'avoir à repérer l'image par son id.

Autre exemple, en utilisant une fonction avec un argument :


Quand on cliquera sur le lien, une boîte de dialogue nous en affichera la destination.