<< Retour au sommaire

 

 

Les évènements VBscript

 

 

 

Le sommaire :

  1. Introduction.
  2. Les évènements en tant que procédures.
  3. Les évènements en tant qu’attributs.

 

 

Introduction

 

La gestion des évènements d’une page est un peu la grande puissance des langages script tels que VBscript ou JavaScript…

 

En effet, de différentes manières, nous pouvons associer du code VBscript à des évènments qui surviennent dans une page WEB.

 

Liste des évènements

Évènements

Descriptions

OnClick

Évènement d’un clic souris sur un bouton de type « button ».

OnFocus

Évènement de prise de focus sur un champ de formulaire.

OnBlur

Évènement de perte de focus sur un champ de formulaire.

OnSelect

Évènement de sélection d’un élément de formulaire.

 

 


Les évènements en tant que procédures

 

Il s’agit ici de vous présenter les procédures évènementielles.

 

Une procédure évènementielle doit être définie le plus haut possible dans une page, et ce, afin qu’elle soit définie avant le champ de formulaire auquel elle se rattache.

 

En effet, une procédure évènementielle est une procédure qui se rattache à un évènement réalisé sur un champ de formulaire tel qu’un bouton, une zone d’édition etc.

 

Cette procédure sera automatiquement exécutée dès lors que l’évènement surgira sur le champ de formulaire.

 

Cependant, pour qu’un évènement puisse être associé à un bouton, vous devez définir le type du bouton en tant que « button », et non pas choisir le type « submit » qui lui, permet de valider le formulaire en exécutant l’attribut « action » de la balise « form ».

 

La syntaxe :

 

Rien de bien compliqué, vous devez élaborer des procédures évènementielles dont le nom des procédures doit être composées du nom du champ concerné, celui qui sera défini dans l'attribut "name", puis du signe souligné, le caractère "8" du pavé alphanumérique en minuscule, et le nom de l'évènement, parmi l'un de ceux que vous venez de découvrir dans le tableau précédent.

 

Par exemple, pour dire bonjour lorsqu'un clic est réalisé sur le bouton "DireBonjour" :

 

<script type="text/VBscript">

Sub DireBonjour_OnClick()

MsgBox ("Bonjour !")

End Sub

</script>

 

Puis, dans le formulaire bien sûr...

<form>

<input type=)"button" name="DireBonjour" value="Tester maintenant" />

</form>

 

Voici un exemple.

 

Dans la page qui suit, 3 évènements sont prévus…

 

  1. L’évènement OnFocus pour le champ « Nom ».
  2. L’évènement OnBlur pour le champ « Nom ».
  3. L’évènement OnClick pour le bouton « tester ».

 

Afficher la page >>

 

Le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<script type="text/VBscript">

' définition de la procédure évènementielle pour le clic sur le bouton "tester"

Sub tester_OnClick()

MsgBox ("Salut ! ça roule !")

End Sub

' définition de la procédure évènementielle pour la prise de focus sur le champ "nom"

Sub nom_OnFocus()

MsgBox ("Attention à ne pas mentir !"&CHR(13)&"Tu dois réellement saisir ton nom !")

End Sub

' définition de la procédure évènementielle pour la perte de focus sur le champ "nom"

Sub nom_OnBlur()

MsgBox ("Merci d'avoir eu le courage de donner ton nom...")

End Sub

</script>

<title>La gestion des évènements</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<body>

<table border="1">

<caption>La gestion des procédures évènementielles</caption>

<tr><td>

Bienvenue l'ami,<br />

<ol>

<li>- Si tu veux tester la procédure évènementielle "tester_OnClick", rien de plus simple, clique sur le bouton intitulé "tester" !</li>

<li>- Si tu veux tester la procédure évènementielle "nom_OnFocus", tu doit sélectionner la zone d'édition "nom".<b/li>

<li>- Si tu veux tester la procédure évènementielle "nom_OnBlur", tu dois quitter la zone d'édition "Nom".</li>

</td></tr>

<tr><td>

<form>

<label for="nom">

Quel est ton nom ? <br />

</label>

<input type="text" name="nom" id="nom" size="25" maxlength="25" /><br />

<input type="button" name="tester" value="Tester la procédure" />

</form>

</td></tr>

</table>

</body>

</html>

 


 

Les évènements en tant qu’attributs

 

Et oui, nous pouvons aussi activer du code évènementiel directement dans la balise du champ de formulaire, et ce, par l’intermédiaire de l’attribut dont le nom est celui de l’évènement même.

 

Par exemple, pour associer l’évènement « OnClick » dans un bouton : 

 

<input type="button" value="NomDuBouton" OnClick='InstructionVBscript' />

 

Si vous désirez placer plusieurs lignes d'instructions dans le code de l'évènement, il conviendra de séparer chaque ligne de code par un point virgule.

 

<input type="button" value="NomDuBouton" OnClick='Instruction1;Instruction2;Instruction3;etc.' />

 

Voici un exemple.

En reprenant le même exemple que dans le chapitre précédent, l’évènement « OnClick » du bouton « tester » n’est plus une procédure évènementielle, mais un attribut dans le code XHTML du bouton.

 

Afficher la page >>

 

Le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<script type="text/VBscript">

' définition de la procédure évènementielle pour la prise de focus sur le champ "nom"

Sub nom_OnFocus()

MsgBox ("Attention à ne pas mentir !"&CHR(13)&"Tu dois réellement saisir ton nom !")

End Sub

' définition de la procédure évènementielle pour la perte de focus sur le champ "nom"

Sub nom_OnBlur()

MsgBox ("Merci d'avoir eu le courage de donner ton nom...")

End Sub

</script>

<title>La gestion des évènements</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<body>

<table border="1">

<caption>La gestion des procédures évènementielles</caption>

<tr><td>

Bienvenue l'ami,<br />

<ol>

<li>- Si tu veux tester la procédure évènementielle "tester_OnClick", rien de plus simple, clique sur le bouton intitulé "tester" !</li>

<li>- Si tu veux tester la procédure évènementielle "nom_OnFocus", tu doit sélectionner la zone d'édition "nom".<b/li>

<li>- Si tu veux tester la procédure évènementielle "nom_OnBlur", tu dois quitter la zone d'édition "Nom".</li>

</td></tr>

<tr><td>

<form>

<label for="nom">

Quel est ton nom ? <br />

</label>

<input type="text" name="nom" id="nom" size="25" maxlength="25" /><br />

<input type="button" name="tester" value="Tester la procédure" OnClick='MsgBox ("Salut ! ça roule !")' />

</form>

</td></tr>

</table>

</body>

</html>

 

Philippe BOULANGER