Appel des fonctions JavaScript

Les techniques pour appeler une fonctions JavaScript sont nombreuses avec pour chacune des avantages et des inconvénients.

Appel des fonctions dans le code HTML

La fonction doit forcément être nommée !
Donc la structure de la fonction décrite dans le script doit être la suivante :

function nomfonction() { instruction1 ; instruction2 ; ... instruction n ; } // fin fonction

N'oubliez surtout pas le mot réservé function ainsi que la paire de parenthèses après le nom de la fonction même si il n'y a pas passage de paramètre.

Mais comment appeler cette fonction nommée ?

Il y a deux solutions : une mauvaise et une autre bonne

Appel de la fonction avec la balise A

<a href ="javascript:nomfonction()">Cliquez ici</a>

Technique qui date des origines du JavaScript est qui fortement déconseillée.
La balise A doit être utilisée pour créer des liens et rien d'autres.

Emploi du gestionnaire d'événements de HTML

La fonction est appelée via la balise début sur un événement toujours préfixé par "on".
Quelques exemples :

<body onload ="nomfonction()" ...> <select onchange="nomfonction()" ...> <button onclick ="nomfonction()" ...> <input type ="..." onfocus ="nomfonction()" ... /> <input type ="..." onblur ="nomfonction()" ... />

Cette solution présente un petit inconvénient. Elle suppose que la personne qui code en HTML connaisse aussi le JavaScript ...

Emploi du DOM

L'appel des fonctions est faite dans le script !

Dans le code HTML plus aucune référence au JavaScript. Ce qui facilite la division du travail dans le cadre de la production.
Autre avantage est qu'il n'est plus nécessaire de nommer les fonctions. On peut utiliser des fonctions anonymes !

Il faut donc sélectionner des noeuds du DOM (éléments HTML ou SVG). Il faut donc utiliser une méthode de sélection de l'API DOM.

Emploi de la méthode document.getElementByID

C'est la méthode de sélection d'un noeud la plus connue.
Exemple :

HTML : <img id ="image1" src = ... /> <img id ="image2" src = ... /> Script : document.getElementById("image1").onmouseover = function() { this.style.opacity = "1" ; this.style.height = "100px";} document.getElementById("image2").onmouseover = function() { this.style.opacity = "1" ; this.style.height = "100px";} ...

On peut bien sûr utiliser le mot magique this dans la fonction si les modifications sur l'objet sélectionné.

Emploi des nouveaux sélecteurs de l'objet document

La méthode getElementByID présente un inconvénient. Lors de l'écriture du HTML il faut idenfier chaque élément susceptible d'être manipulé par le JavaScript : emploi de l'attribut ID.

Avec les nouveaux sélecteurs on peut écrire :

HTML : <img src = ... /> <img src = ... /> Script : document.querySelector('img').onclick = function() { this.style.opacity = "1" ; this.style.height = "100px";} document.querySelectorAll('img')[1].onclick = function() { this.style.opacity = "1" ; this.style.height = "100px";} ...

Remarque : dans la première ligne on aurait pu écrire : document.querySelectorAll('img')[0].onclick
L'emploi de ces nouveaux sélecteurs simplifie le code HTML (disparition de l'attribut ID).

Utiliser dans le script les événements onclick, onchange, onmouseover, etc. C'est faire du DOM-0.

Utilisation du DOM-2

Si vous utilisez le gestionnaire d'événements addEventListener vous faites du DOM-2.

Premier exemple

Le code de la page (extraits)

... <button>cliquez ici ! </button> <script> var bouton = document.querySelector('button'); bouton.addEventListener('click',function() {var vnom = prompt('tapez votre nom') ; alert("bonjour " + vnom );},false); ...

On suppose bien sûr que dans la page il n'y a qu'un noeud de type button.

Observez bien le script. Il faut utiliser la méthode addEventListener avec trois arguments:

Essayez ce premier exemple !

Exemple 2

L'emploi du DOM-2 est un peu plus compliqué. Mais il offre un gros avantage : possibilité de pouvoir associer à un même événement sur le même noeud plusieurs fonctions.

Et bien sûr (mais c'était déjà possible avec le DOM-0) il permet de manipuler l'objet "event".
C'est ce que je vais vous montrer dans l'exemple 2.

Le code de la page (extraits) de l'exemple 2

... <button>cliquez ici ! </button> <script> var vnom,vprenom ; var bouton = document.querySelector('button'); bouton.addEventListener('click',function() {vnom = prompt('tapez votre nom') ;vprenom = prompt('tapez votre prénom') },false); bouton.addEventListener('click',function() {alert("bonjour " + vnom );alert("prénommé " + vprenom )},false); bouton.addEventListener('click',f3,false) ; function f3(event) {alert("type évènement : " + event.type) ; alert("cible évènement : " + event.target);} ...

On associe au noeud button sur l'événement clic trois fonctions : une pour la saisie dans des variables, la deuxième pour l'affichage de ces variables et une troisième fonction pour afficher des propriétés de l'objet "event".

Remarquez la fonction f3 est décrite à part.

Je pense que vous avez compris l'intérêt de l'emploi de addEventListener.
Supposons que l'on vous demande de rajouter des actions à un clic sur un noeud. Si vous n'utilisez pas le DOM ou simplement le DOM-0 vous êtes obligé de réécrire toute la fonction JavaScript. Tandis si vous employer le DOM-2 (c'est à dire addEventListener) il suffit de rajouter une fonction sur le même noeud pour le même événement.
Pratique, n'est-ce pas ... Testez le code de ce deuxième exemple ! Retour menu