<< Retour au sommaire

 

 

Les fonctions événementielles

 

 

 

Le sommaire :

  1. Présentation.
  2. La fonction OnClick.
  3. Onclick traitement d’un champ de saisie exemple 1.
  4. Onclick traitement d’un champ de saisie exemple 2.
  5. OnClick traitement d’un champ de saisie exemple 3.
  6. OnClick traitement d’un bouton radio exemple 4.
  7. OnClick traitement d’une case à cocher exemple 5.
  8. Liste des événements javascript.

 

 

Présentation

 

Une fonction événementielle est un attribut de balise qui exécute un code JavaScript lorsqu’un certain événement est réalisé.

Le nom de l’attribut est lui-même le nom de l’événement…

La fonction événementielle étudiée dans ce document est :

 

OnClick, associée aux balises « A » pour un lien hypertexte et « input » pour un bouton de type « button ».

Remarque :

En XHTML, le bouton « submit » valide le formulaire en exécutant le fichier spécifié dans l’attribut « action », tandis que le bouton « button » exécute un événement en « JavaScript ».

 

 


La fonction OnClick

 

Cette fonction est exécutée lorsque l’élément auquel elle est rattachée est sollicité par un click de la souris ou par une validation (touche entrée.)

Vous devez placer OnClick comme attribut dans une balise, par exemple dans un bouton ou dans un lien.

 


OnClick traitement d’un champ de saisie Exemple 1

 

La page contient un formulaire de saisie et un bouton.

Le formulaire est intitulé « formulaire ».

Le nom du champ de saisie est intitulé « Nom ».

Le bouton quant à lui est intitulé « Afficher ».

 

Lorsque l’utilisateur aura saisi son nom est validé le bouton, une fenêtre de type « alert » s’affichera à l’écran en affichant un message et le nom.

La méthode « alert » sera exécutée par la fonction événementielle « OnClick ».

 

Voici le code :

 

<html>

<head>

<title> bonjour </title>

</head>

<body>

<form name="formulaire">

<label for="nom">

Quel est votre nom ?<br />

</label>

<input type="text" id="nom" name="Nom" />

<input type="button" value="Afficher" OnClick="alert('votre nom est '+document.formulaire.Nom.value);" />

</form>

</body>

</html>

 

 


OnClick traitement d’un champ de saisie Exemple 2

 

Dans l’exemple qui suit, nous allons créer une page qui affichera dans « alert » le texte saisi par l’utilisateur dans un champ de formulaire.

Nous allons appeler le formulaire « formulaire ».

Nous allons appeler le champ de saisie « TonNom ».

Dans le bouton intitulé « Valider », l’attribut « OnClick » exécutera la fonction intitulée « afficher » en lui passant en paramètre le formulaire.

La fonction « afficher » est déclarée dans le bloc <head »>, elle utilise donc un paramètre pour accueillir le formulaire, ce paramètre sera une variable intitulée « formulaire ».

Ensuite, la fonction affectera dans la variable « Nom » l’extraction du champ de saisie du formulaire.

Pour finir, la variable « Nom » qui contiendra le contenu de la saisie sera affiché par la méthode « alert ».

 

Voici le code :

 

<html>

<head>

<title> bonjour </title>

<script type=«text/javascript»>

function afficher(formulaire)

{ // Affectation de la valeur saisie dans la variable Nom

  var Nom = document.formulaire.TonNom.value;

alert("Votre nom est "+Nom); }

</script>

</head>

<body>

<form name="formulaire">

<label for="nom">

Veuillez saisir votre nom :<br />

</label>

<input type="text" id="nom" name="TonNom" />

<input type="button" value="Valider" OnClick="afficher(formulaire)" />

</form>

</body>

</html>

 

 


OnClick traitement d’un champ de saisie Exemple 3

 

Voici un exemple qui déplace la chaîne de caractères saisie dans le premier champ de formulaire vers le deuxième champ.

Le formulaire s’intitule : « formulaire ».

Le premier champ s’intitule : « champ1 ».

Le deuxième champ s’intitule : « champ2 ».

Le bouton s’intitule : « Déplacer » et exécute la fonction intitulée « deplace ».

 

Le code :

 

<html>

<head>

<title> bonjour </title>

<script type=«text/javascript»>

function deplace(formulaire) {

// récupération de la valeur de champ1 dans la variable LeTexte

var LeTexte = document.formulaire.champ1.value;

// Affectation de la valeur de la variable dans champ2

document.formulaire.champ2.value = LeTexte;

// Effacement de champ1

document.formulaire.champ1.value=""; }

</SCRIPT>

</head>

<body>

<form name="formulaire">

<label for="chaine">

Veuillez saisir la chaîne de caractères à déplacer :<br />

</label>

<input type="text" <id="chaine" name="champ1" value="" /><br />

<input type="button" value="déplacer" OnClick="deplace(formulaire)" /><br />

Vous avez saisi le texte suivant :<br />

<input type="text" name="champ2" value="" />

</form>

</body>

</html>

 

 


OnClick exemple 4 :

 

Ici, nous allons élaborer 2 pages « XHTML ».

 

La première, « index.html », demande à l’utilisateur de saisir un mot de passe.

Entre nous, le mot de passe est « bonjour »…

Si l’utilisateur saisit le bon mot de passe, la page « accueil.html » est ouverte.

Dans le cas contraire, un message d’erreur est affiché suivi du réaffichage de la page « index.html ».

 

Voici le code du premier fichier, index.html :

 

<html>

<head>

<title>identification</title>

<script type=«text/javascript»>

function verifier(formulaire) {

// affectation du contenu du champ MotDePasse dans la variable LeMot

var LeMot = document.formulaire.MotDePasse.value;

// vérifie si le mot de passe est bien bonjour

if (LeMot=="bonjour")

// l'utilisateur a saisi le bon mot de passe

// ouverture de la page accueil.html

{ window.location="accueil.html"; }

else {

// le mot de passe est incorrect,

alert ("Erreur, le mot de passe n'est pas "+LeMot); }}

</SCRIPT>

</head>

<body>

<h1>Vous devez vous identifier</h1>

<pre>

<form name="formulaire">

<label for="motDePasse>

Veuillez saisir le mot de passe :

<input type="password" <id="motDePasse" nam="MotDePasse" value="" />

<input type="button" value="Valider" OnClick="verifier(formulaire)" />

</form>

</body>

</html>

 

Voici le code du deuxième fichiers, accueil.html :

 

<html>

<head>

<title>Page d'accueil</title>

</head>

<body>

<h1>Gagné</h1>

<pre>

Bienvenue sur la page d'accueil.

Vous avez saisi le bon mot-de-passe, vous pouvez être fière de vous !

Bon, maintenant passons aux choses sérieuses, voici une question :

combien font 6 fois 7098788

<a href="index.html">Je suis dégoûté je veux revenir à la page précédente...</a>

</pre>

</body>

</html>

 

 


OnClick traitement d’un bouton radio exemple 4

 

Ici, nous allons élaborer une page qui traitera le choix réalisé par l’utilisateur sur un bouton radio contenant 3 propositions, LA France, LA CHINE et LA COLOMBIE.

Lorsque l’utilisateur validera le bouton intitulé « Valider », la fonction « VerifieFrance » sera exécutée.

Dans cette fonction, un seul traitement…

Si le choix de l’utilisateur est « LA France », un message de satisfaction sera affiché, sinon, rien ne se passera…

 

Remarque :

Dans la fonction, nous utiliserons la propriété « checked » pour connaître le choix de l’utilisateur.

 

Voici le code :

<html>

<head>

<title> bonjour </title>

<script type=«text/javascript»>

function VerifieFrance(formulaire) {

if (document.formulaire.pays[0].checked)

{ // le choix est LA FRANCE

alert ("Merci, ça m'arange, je ne parle que le français..."); }}

</SCRIPT>

</head>

<body>

<p>

<form name="formulaire">

Veuillez réaliser votre choix :<br / />

<input type="radio" name="pays" id="LaFrance" value="0">

<label for="LaFrance>LA FRANCE</label>

<input type="radio" id="LaChine" name="pays" value="1">

<label for="LaChine">LA CHINE</label>

<input type="radio" id="LaColombie" name="pays" value="2">

<label for="LaColombie">LA COLOMBIE</label>

<input type="button" value="Valider" OnClick="VerifieFrance(formulaire)" />

</form>

</p>

</body>

</html>

 


OnClick traitement d’une case à cocher exemple 5

 

Maintenant nous allons faire joujou avec des cases à cocher…

La page XHTML va afficher une question qui est la suivante :

« Dans quelle île se trouve la ville de POINTAPITRE ? »

 

Au-dessous de la question, sera proposées 4 réponses sous la forme de 4 cases à cocher.

 

La bonne réponse est bien sûr la deuxième case à cocher, « LA GUADELOUPE ».

<html>

<head>

<title>Le jeu de la géographie</title>

<script type=«text/javascript»>

function Reponse(formulaire) {

if (document.formulaire.guadeloupe.checked==true)

{ alert("Super ! Vous avez gagné..."); }}

</script>

</head>

<body>

<h1>Répondez à cette question</h1>

<form name="formulaire">

<pre>

Dans quelle île se trouve la ville de POINTAPITRE ?

(Veuillez cocher la bonne réponse avant de valider le bouton "Go"...

<input type="checkbox" id="Lamartinique" name="martinique" value="1" />

<label for="LaMartinique">LA MARTINIQUE</label>

<input type="checkbox" id="LaGuadeloupe" name="guadeloupe" value="2" />

<label for="LaGuadeloupe">LA GUADELOUPE</label>

<input type="checkbox" id="LaReunion" name="reunion" value="3" /> 

<label for="LaReunion">LA RÉUNION</label>

<input type="checkbox" id="Tahiti" name="tahiti" value="4" />

<label for="Tahiti">TAHITI</label>

<input type="button" value="Go" OnClick="Reponse(formulaire)" />

</pre>

</form>

</body>

</html>

 

 


Liste des événements javascript

 

Description Evénement

Clik

 

Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément.

Load

Lorsque la page est chargée par le browser ou le navigateur.

Unload

Lorsque l'utilisateur quitte la page.

MouseOver

Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément. MouseOut

Lorsque le pointeur de la souris quitte un lien ou tout autre élément.

Focus

Lorsque un élément de formulaire a le focus c'est-à-dire devient la zone d'entrée active.

Blur

Lorsque un élément de formulaire perd le focus c'est-à-dire que l'utilisateur clique hors

du champs et que la zone d'entrée n'est plus active.

Change

Lorsque la valeur d'un champ de formulaire est modifiée.

Select

Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire.

Submit

Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire.

 

Philippe BOULANGER