Javascript

Boîtes de dialogue en Javascript

Boîtes de dialogue en Javascript - Avec les méthodes ALERT, CONFIRM et PROMPT

La plupart des langages de programmation utilisent les boîtes de messages du système et la programmation Web n’y échappe pas. Il y a 3 méthodes, l’alerte ou " Alert dialog box " qui permet d’afficher un simple message avec un bouton fermé, la confirmation ou " Confirm dialog box " qui retourne une valeur booléenne selon un choix " oui ou non " du visiteur et finalement la méthode " Prompt " qui permet la saisie et le retour d’une valeur entrée par le visiteur.

Noter que l’apparence des boîtes de dialogue change selon le système d’exploitation et le navigateur. Il n’est pas possible de changer le texte des boutons. Le texte sur les boutons sera affiché dans la langue du navigateur du visiteur.

ATTENTION de toujours utiliser des minuscules, l’erreur la plus fréquente…

" Alert dialog box "
Afficher un message dynamique dans une boîte de dialogue avec un bouton " fermer " est souvent utilisé pour souhaiter la bienvenue aux visiteurs ou encore indiquer une erreur dans la saisie d’un formulaire. L’interaction de cette méthode avec le visiteur à l’avantage d’être contextuelle, c’est-à-dire que son usage est spécifique à une action du visiteur. Un autre usage de l’alerte est l’affichage de valeurs ou variables quand on teste un script.

Syntaxe
alert("message") ou alert(variable)

Message : une chaîne de caractères ou encore une variable.

Exemples :

alert("erreur!")

ou

var temp = "Erreur!"
Alert(temp)

Exemple complet avec résultat

<script type="text/javascript" language="javascript">
  var temp = "Erreur!"
  alert(temp)
</script>

" Confirm dialog box "
Quand vous avez besoin d’une confirmation, la boîte de dialogue de confirmation vous permet de poser une question et de récupérer si le choix oui/non du visiteur par le biais de deux boutons. La valeur booléenne retournée sera " true ou false ".

Syntaxe
confirm("message") ou confirm(variable)

Message : une chaîne de caractères ou encore une variable.

Exemples :

if (confirm("Vous désirez vraiment quitter?")) {
  // Action à entreprendre.
  // Code ou appel de fonction
}

ou

var temp = "Vous désirez vraiment quitter?"
if (confirm(temp))
{
  // Action à entreprendre.
  // Code ou appel de fonction
}

Exemple complet avec résultat

<script type="text/javascript" language="javascript">
  if (confirm("Vous désirez vraiment quitter?")) {
    alert("oui")
  }
  else {
    alert("non")
  }
</script>

" Prompt dialog box "
Fréquemment utilisée pour demander le nom d’un visiteur ou encore un mot de passe, cette méthode à l’avantage d’être bien sûr contextuelle et événementielle mais aussi le pouvoir de demander des données avant l’affichage de la page, données qui pourront être utilisées pour créer une page dynamique adapté aux choix du visiteur.

Syntaxe
prompt("message", [valeurParDéfaut]) ou prompt(variable, [valeurParDéfaut])

Message : une chaîne de caractères ou encore une variable.
ValeurParDéfaut : Optionnelle, la valeur (caractère ou nombre) qui sera proposée par défaut au visiteur. Si vous n’indiquez pas de valeur par défaut, aucune donnée ne sera proposée dans la boîte de saisie et la valeur sera <undefined>. Si le visiteur annule " cancel " la saisie, la valeur retournée sera " null "

Exemples :

nVarNom = prompt("Quel est votre nom?")

ou

nVarNom = prompt("Quel est votre nom?", "Espion")

Exemple complet avec résultat

<script type="text/javascript" language="javascript">
  nVarNom = prompt("Quel est votre nom?", "Espion")
  alert(nVarNom)
</script>

Note importante
La manipulation ou construction de la chaîne de caractères en Javascript a quelques détails qu’il faut savoir.

1. Pour jumeler deux chaînes ensemble, utiliser le symbole " + "
   Exemple :
   NChaine = "allo" + "le monde! "
   
   ou
   
   nChaine = "allo"
   nChaine += "le monde"
   
2. Caractères spéciaux. Pour changer de ligne, utiliser le symbole ou caractère spécial " \n "
   Exemple :
   NChaine = "allo" + "\nle monde! "
   
   Voir le tutoriel " Les caractères spéciaux en Javascript " pour plus d’information. "
   
   
3. " Escaping " ATTENTION aux apostrophes, qui devront être précédées du symbole " \
   Exemple :
   NChaine = "allo" + "le monde d\’ici!"