COURS JavaScript


Accueil | Emplacement du code JavaScript : Appel de fonction dans Href

Appel d'une fonction JavaScript dans un lien Href


Généralités

Comme chacun le sait (c'est du HTML), le lien hypertexte définit par les balises <A Href=" ..... "> ... et .... </A>, sert à aller à une autre page HTML ou à un autre endroit de la même page HTML. Ce qui est la base même de l'Internet. Pouvoir naviguer grâce à des liens hypertextes.

Ce que l'on sait moins, c'est que l'on peut appeler directement une fonction JavaScript (écrite par nous ou pré existante dans le langage) dans un lien Href, sans pour autant que l'utilisateur change de page lorsqu'il clique sur ce lien. C'est encore un des emplacements où l'on peut placer du code JavaScript.

Bien sûr, ce code sera exécuté seulement et seulement si l'utilisateur clique sur le lien en question. Cette technique s'apparente à un script à exécution différée, puisqu'il ne s'exécute que sur action de l'utilisateur.
Cette manière de faire peut s'avérer très utile pour donner une information à l'utilisateur, ou pour lui permettre d'obtenir de l'aide sur un point particulier du site. C'est ce que nous utiliserons pour ouvrir des aides modales comme on peut le voir dans le chapitre Truc et astuce de la leçon sur les fenêtres modales.




Comment ça marche

D'ordinaire, dans un lien HTML écrit avec les balises <A Href=" ..... "> ... et .... </A>, on donne derrière le Href, l'adresse de la page HTML à laquelle on désire que l'utilisateur aille s'il clique sur le lien. Par exemple, dans ce site, pour créer un lien qui conduit à la page d'accueil, on écrirait :

<A Href="jsaccueil.htm">Retour à la page d'accueil</A>, et lorsque l'utilisateur cliquerait sur la phrase Retour à la page d'accueil, il retournerait effectivement à la dite page. Par contre, si l'on veut qu'en cliquant sur cette phrase, il ne retourne pas à la page d'accueil, mais qu'il voit apparaître un avertissement quelconque, on peut remplacer l'adresse "jsaccueil.htm" par un appel à une fonction JavaScript écrite par ailleurs, ou même par une suite d'instructions JavaScript.

Par exemple, supposons que nous voulions donner une explication particulière concernant un point de la phrase affichée à l'écran, sans que l'utilisateur quitte la page qu'il est en train de lire. Nous pourrions écrire :

"Nous savons que nous pouvons incrémenter (aide?) ou décrémenter (aide?) les compteurs de boucles."

Cliquez sur les aides pour voir le résultat. Le message qui apparaît à l'écran, est l'appel à une fonction JavaScript toute faite, qui est la fonction alert(), et qui ouvre une fenêtre modale dont nous avons garni le contenu. Pour les fenêtres modales, voir la leçon correspondante : Les fenêtres modales.




Syntaxe

Reprenons l'exemple ci dessus :

"Nous savons que nous pouvons incrémenter (aide?) ou décrémenter (aide?) les compteurs de boucles."

Dans le code HTML, pour obtenir que les mots (aide?) soient des liens hyper texte (en bleu soulignés), nous avons écrit :

<A Href="adresse">(aide?)</A>.

Nous savons (leçon sur les fenêtres modales) que le code JavaScript permettant d'afficher la phrase "Incrémenter veut dire augmenter" s'écrit :

alert("Incrémenter veut dire augmenter")

Par ailleurs, pour faire en sorte que ces liens (aide?) ne conduisent pas à une autre page, mais ouvrent une aide, il suffit de remplacer "adresse" dans le Tag HTML, par le code JavaScript correspondant, précédé de javascript: (ne pas oublier les ":" deux points). Ce qui fait que le code entier pour obtenir l'effet désiré serait :

javascript:alert("Incrémenter veut dire augmenter") en théorie !!! Mais en théorie seulement, car HTML exige que l'adresse soit elle même entre guillemets (si l'on respecte les spécifications de HTML). Nous devons donc modifier le code et remplacer les guillemets de la fonction alert() par des apostrophes. Ce qui donne en définitive :

<A Href="javascript:alert('Incrémenter veut dire augmenter')">(aide?)</A> et ça, ça marche !

Nous avons donc écrit du code JavaScript à l'intérieur d'un Tag HTML. C'est encore un autre endroit où peut se trouver le code JavaScript dans la page HTML.



Plus fort encore

Non seulement on peut écrire du code HTML dans le Tag Href (tous les Tags HTML n'admettent pas de code JavaScript) comme nous venons de le faire, c'est-à-dire en faisant appel à une fonction prédéfinie de JavaScript, mais on peut aussi faire appel à une fonction que nous avons écrite nous même et placée entre <Head> ... et ... </Head> comme nous savons déjà le faire. Si la fonction que nous avons créée s'appelle MaFonction() (original non ? Je suis débordant d'imagination...), la syntaxe devient alors :

<A Href="javascript:MaFonction()">(aide?)</A>

Nous verrons que c'est très utile pour créer des aides personnalisées dans le corps d'une page HTML, sans alourdir le texte, et en utilisant des tables d'aides indexées, dont le contenu est stocké ailleurs que dans le corps de la page HTML, dans des fichiers externes, sur le disque.

Encore plus fort, toujours de plus en plus fort, si nous voulons faire appel à deux voire trois fonctions JavaScript ou plus de cette manière, il suffit de séparer les appels par des ";" (points virgules). Par exemple, essayez cette aide là :

"Nous savons que nous pouvons incrémenter ou décrémenter (aide?) les compteurs de boucles."

La syntaxe est :

<A Href="javascript:alert('Incrémenter veut dire augmenter');alert('Décrémenter veut dire diminuer')">(aide?)</A>

Et ça, marche, la preuve ! Bon ! Ceci dit, il ne faut pas non plus en abuser, car à la longue, ça lasse l'utilisateur. Mais avec cette technique, on peut faire appel à autant de fonctions personnelles que nécessaire, et aussi, même écrire un petit (ou gros) programme JavaScript dans le Tag Href, qui s'exécutera lorsque l'utilisateur cliquera sur le lien en question. Seule votre imagination peut être une limite à l'utilisation de cette méthode. Nous verrons plus tard que ça peut efficacement remplacer l'usage des boutons ou autre événement JavaScript.



 


Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.