- Citer et donner le rôle des évènements javascript
- Utiliser l’évènement onclick
- Utiliser les zones de saisie en javascript
Introduction
Le langage JavaScript associé au langage HTML permet de rendre les pages web interactives. Les
boites de dialogues comme nous l’avons déjà vu permettent par exemple d’envoyer des messages
aux utilisateurs ou d’obtenir des informations des utilisateurs ; cette nouvelle leçon sera consacrée à
l’étude d’un autre élément d’interactivité dans JavaScript : les évènements
I- DEFINITION ET SYNTAXE
Les événements sont des actions de l’utilisateur qui vont pouvoir donner lieu à une interactivité.
L’événement par excellence est le clic de souris. Il est possible d’associer des actions à des
événements aux moyens des gestionnaires d’événements. Le nom d’un gestionnaire d’événement
commence toujours par le mot « on » ; on peut par exemple citer :onclick / ondbclick : lorsqu’on clique ou double clique avec la sourisonfocus : lorsqu’un champ est actif ou sollicitéonchange : lorsqu’ un champ perd le focusonsubmit : lorsqu’on clique sur un bouton du type submit
onkeydown/onkeyup : lorsqu’on presse / relâche une touche du clavier etc.
Les gestionnaires d’événements sont associés à des objets, et leur code s’insère dans la balise de
ceux-ci ; la syntaxe d’utilisation d’un gestionnaire d’événement est la suivante :
onEvenement= "Action_Javascript ;" Ex : onclick= "alert("Bonjour");"
II- ACCES AUX ELEMENTS DE LA PAGE
1- Accès aux éléments par l’attribut « id »
L’attribut « id » permet de donner un identifiant à une balise. A partir de cet identifiant, il est
possible de mieux manipuler cette balise en CSS et en javascript. Pour accéder à un élément de la
page par l’attribut « id » on utilise la syntaxe suivante : document.getElementById("valeur_id") ;Exemple :
document.getElementById("lienProduits").href="products.html";
document.getElementById("img").scr = "AUINFO.jpg";
document.getElementById("txt").value= "le meilleur site";
2- Accès aux éléments par l’attribut « name »
La syntaxe d’accès à un élément à partir de l’attribut name n’est pas standard. On utilise
généralement un formulaire et une fonction qui prend en paramètre le name du formulaire pour le
faire. Nous prendrons un exemple de code qui permet de vérifier les valeurs tapées sur le clavier
avec une boite de dialogue après un clic.
<html>
<head>
<script language="javascript">
function controle(form1) {
var test = document.form1.input.value;
alert("Vous avez tapé : " + test);
}
</script>
</head>
<body>
<h1>Ceci est une page qui contrôle les valeurs que vous entrez</h1><hr>
<form name="form1">
<h3>Tapez une valeur ici</h3>
<input type="text" NAME="input" VALUE=""><BR>
<input type="button" NAME="bouton" VALUE="Contrôler"
onClick="controle(form1)">
</form>
</body>
</html>
Ce code permet de donner les rendus suivants
Précédent
Suivant
Aucun commentaire:
Enregistrer un commentaire
Posez votre question ici