|
21.2 onClick sur un bouton ou bouton radio |
  copyleftSee You Why? |
| Avec un peu de JavaScript, n'oubliez pas de rendre vos pages plus dynamiques et plus interactives. |
|
|
Reprenons l'exemple donné dans la section précédente. Un bouton au centre de la page avec la question "Compris ?" et, si l'on clique sur ce bouton, le message "J'espère bien !" apparaît dans une fenêtre pop-up.
<form>
<center>
<input name="button" type="button" onClick="alert('J\'espère bien !')" value="Compris ?">
</center>
</form>
Puisqu'un bouton se place dans un formulaire, il y a lieu d'ouvrir et de fermer la balise <form> ;
puisque dans un formulaire, il n'existe pas de paramètre align="...", je dois bien ouvrir et fermer la balise <center> ;
en HTML, nous savons qu'un bouton est un <input type="button"> dont le paramètre value indique le texte affiché sur le bouton, j'ajoute le paramètre value="Compris ?" ;
reste à ajouter l'instruction souhaitée en cas de clic sur ce bouton, d'où ce onClick="xxx" ;
<input name="button" type="button" onClick="xxx" value="Compris ?">
mais xxx n'est pas du JS, je dois y noter une instruction JS... j'y note un message dans une fenêtre popup alert(); avec, entre guillemets le message que je veux voir affiché ;
je suis donc tenté de noter entre les parentèses "J'espère bien !", message entre guillemets ;
<input name="button" type="button" onClick="alert("J'espère bien !")" value="Compris ?">
Mais... les guillemets ouvrants de mon message pourraient être confondus avec les guillemets fermants de l'instruction onClick...
<input name="button" type="button" onClick="alert("J'espère bien !")" value="Compris ?">
je peux donc utiliser de simples quotes en lieu et place des guillemets (doubles quotes)...
mon message devient donc 'J'espère bien !' que je serais tenté de noter entre mes parenthèses, mais...
<input name="button" type="button" onClick="alert('J'espère bien !')" value="Compris ?">
... malheureusement, rien ne ressemble plus à une apostrophe que les simples quotes dans lesquelles j'ai décidé de placer mon message...
peu importe, un vague souvenir des caractères d'échappement (cf. les échappements) me permet de savoir que noter \' au lieu de ' permet à JS de se rendre compte qu'il doit considérer le caractère pour ce qu'il est (apostrophe) et non pour un caractère de syntaxe (quote fermant).
Enfin, le paramètre name n'a d'autre utilité que de pouvoir distinguer ce bouton des éventuels autres boutons qui seraient présents sur cette page... aucune utilité ici, mais parfois très utile.
D'où l'instruction finalisée à écrire :
<input name="button" type="button" onClick="alert('J\'espère bien !')" value="Compris ?">
Ouf ! Heureusement que toutes les programmations d'évènements JS n'amènent pas autant de difficultés... Mais cet exemple est un bon exemple concernant le fait que toutes les règles JS doivent être connues, susceptibles d'être utilisées, voire même d'être maitrisées pour éviter des erreurs qui ne seraient même pas perçues par un 'non initié' ou un 'mal initié'.
L'évènement onClick est probablement un des plus fréquents et le plus facilement traitable en JS. Une autre utilisation est la réaction immédiate à une réponse donnée à un QCM, comme illustré ci-après.
Si le lecteur a oublié ou ne sait pas comment créer un formulaire avec des boutons de type radio, nous l'invitons à lire notre tutoriel relatif au langage HTML. Rappelons-en l'essentiel :
La création d'un formulaire doit être encadrée par les balises <form> et </form>.
Un texte à l'intérieur d'un formulaire se note comme un texte ordinaire, via les balises de paragraphes <p> et </p>.
Chaque bouton d'option (=radio button) sera engendré par :
<input type="radio" name="choix" value="r">
où choix sera le nom de la variable et r la valeur que prendra la variable choix si le lecteur coche cette option... le lecteur attentif aura compris que le nom de la variable sera le même pour chacune des options à la même question, mais que le paramètre value sera différent pour distinguer la réponse cochée.
Ici, il ne nous semble pas utile de retenir la valeur cochée par le lecteur, puisque notre intention est de lui donner une indication, quelle que soit l'option cochée. Par contre, il nous parait important de prévoir le message adapté à chaque réponse donnée... message que l'on veut voir apparaitre dans une fenêtre 'pop up'...
d'où le paramètre onClick pour chaque bouton,
suivi d'un signe =,
lui-même suivi de l'instruction JS entre guillemets qui est l'instruction alert avec entre parenthèses le message noté entre entre guillemets ou entre simples quotes.
Nous n'illustrons ici que le message affecté à un 'clic' sur le premier bouton radio.
<input type="radio" name="choix" onClick="alert('Faux.\n\n20 volumes x 2500 pages/volume x 3000 caractères/page = \n150.000.000 caractères\nsoit environ 150 Mo.\nOr, un DVD double face, double couche a une capacité de 17 Go ou 17 000 Mo.\n\n20 volumes, \nc\'est beaucoup trop peu.')"> .
Nous ne rappellerons pas ici les exigences relatives à l'emploi des guilles, des simples quotes, des caractères d'échappement du genre \n pour nouvelle ligne, \' pour une apostrophe à ne pas confondre avec celles nécessaires pour la syntaxe, etc.
Dans les deux exemples ci-dessus, l'évènement onClick n'a été associé qu'à deux types d'objets : un bouton classique et un bouton de type radio (case unique à cocher).
D'autres objets peuvent être associés à l'évènement onClick :
À vos crayons... ou à votre ordi pour tester ces différentes possibilités.
Quelques autres exercices ou exemples et leur source, tous utilisant un ou plusieurs boutons et l'évènement onClick seront abordés dans les exercices de ce chapitre, mais aussi ci-après :
voir suite >>>
voir suite >>>
voir suite >>>
MERCI