JavaScript/Boîtes de dialogues

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

JavaScript et les "Dialog Box"

Introduction

Comme beaucoup le savent déjà ou l’on déjà remarqué; JavaScript met a disposition de ses utilisateurs un moyen d'échanger des informations entre l'interface et l'internaute que sont les boîtes de dialogues. Il en existe en tout trois différentes. Nous allons les étudier une par une et voir comment elles fonctionnent. Nous verrons aussi qu’il ne faut surtout pas en mettre trop au risque de lasser les visiteurs.

Définition

Une boîte de dialogue est une petite fenêtre rectangulaire qu'est capable d'afficher n’importe quel navigateur pourvu de JavaScript. Cette boîte permet soit de demander une confirmation au visiteur (confirm), soit de prévenir le visiteur (alert) ou soit de demander quelque chose au visiteur (prompt). Une telle boîte n'est nullement compliquée à mettre en place. Chacune de ces boîtes s'ouvre en faisant appel à des fonctions de JavaScript.

Notez aussi que chacune des boîtes de dialogue de JavaScript a le focus bloqué par le navigateur. C'est-à-dire qu’il faudra cliquer sur un des boutons pour pouvoir continuer.

Boîte d'alerte

Une boîte d'alerte sur Firefox

Il existe une boîte de dialogue qui a pour principal objectif d'alerter le visiteur de quelque chose. Il s'agit de la boîte d'alerte.

Caractéristiques:

• Nom : alert()
• Boutons : "OK" (et la croix de fermeture)
• Code :

window.alert (texte d'alerte);

Le window devant la fonction alert est facultatif. Exemple :

alert('Bonjour, bienvenue sur mon site.\nIl est tout neuf !');

Notez l'emploi du caractère spécial \n pour sauter une ligne dans une alerte JavaScript.

Boîte confirmation

Une boîte de confirmation sur Firefox

JavaScript met aussi a disposition des codeurs une fonction nommée confirm qui permet d'afficher une boîte de dialogue demandant une confirmation au visiteur. Par exemple : Voulez-vous supprimer tous les messages ?.

Caractéristiques:

• Nom: confirm()
• Boutons : "OK", "ANNULER" (et la croix de fermeture)
• Code :

window.confirm(texte de confirmation);

Exemple :

var choix = confirm("Voulez-vous supprimer tous les messages ?");
if (choix) alert("Vous avez cliqué sur OK");
else alert("Vous avez cliqué sur ANNULER ou vous avez fermé");

On comprend donc sur cet exemple que confirm peut renvoyer deux valeurs :

1. TRUE si le visiteur a cliqué sur OK.
2. FALSE si le visiteur a cliqué sur ANNULER ou a cliqué sur la croix rouge de fermeture.

Boîte de saisie

Une boîte de saisie sur Firefox

C'est la dernière boîte de dialogue que nous allons voir. Celle-ci permet de demander une saisie au visiteur. Elle contient donc un champs de texte.

Caractéristiques:

• Nom: prompt
• Boutons : "OK", "ANNULER" (et la croix de fermeture)
• Code :

window.prompt(texte de demande, valeur par défaut du textfield);

Exemple :

do
{
  choix = prompt("Veuillez entrer un nombre supérieur à zéro :", 0);
} while (isNaN(choix) || !choix || Number(choix) < 0);

document.write("Le nombre que vous avez entré est : "+choix);

Le code est certes plus compliqué que précédemment mais il est tout à fait compréhensible. Explication :

• En premier lieu, on utilise la boucle do-while car nous voulons être sûr que celle-ci sera parcourue au moins une fois (on aurait aussi pu initialiser choix à null avant une boucle while simple).
• Dans la boucle, on demande d'entrer un nombre positif via le prompt.
• Ensuite, il y a le while et sa condition : les || veulent dire OU. isNaN (is Not a Number) permet de vérifier si la saisie est bien un nombre. Puis on vérifie que le visiteur n'a pas cliqué sur ANNULER (!choix ou choix == false) et enfin, on vérifie que le nombre est supérieur à 0 (avec Number(choix) > 0).