10 octobre 2020

Interaction: alert, prompt, confirm

Comme nous allons utiliser le navigateur comme environnement de démonstration, voyons quelques fonctions pour interagir avec l’utilisateur : alert, prompt et confirm.

alert

Celui-ci, nous l’avons déjà vu. Il affiche un message et attend que l’utilisateur appuie sur “OK”.

Par exemple :

alert("Hello");

La mini-fenêtre avec le message s’appelle une fenêtre modale. Le mot “modal” signifie que le visiteur ne peut pas interagir avec le reste de la page, appuyer sur d’autres boutons, etc., tant qu’il n’a pas traité la fenêtre. Dans ce cas – jusqu’à ce qu’ils appuient sur “OK”.

prompt

La fonction prompt accepte deux arguments :

result = prompt(title, [default]);

Elle affiche une fenêtre modale avec un message texte, un champ de saisie pour le visiteur et les boutons OK/Annuler.

title
Le texte à afficher au visiteur.
default
Un deuxième paramètre facultatif, la valeur initiale du champ d’entrée.
Les crochets dans la syntaxe [...]

Les crochets autour de default dans la syntaxe ci-dessus indiquent que le paramètre est facultatif, non requis.

Le visiteur peut taper quelque chose dans le champ de saisie d’invite et appuyer sur OK. Ensuite, nous obtenons ce texte dans le result. Ou ils peuvent annuler l’entrée en appuyant sur Annuler ou en appuyant sur la touche Esc, puis nous obtenons null comme result.

L’appel à prompt renvoie le texte du champ de saisie ou null si l’entrée a été annulée.

Par exemple :

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!
Dans IE : fournissez toujours un default

Le second paramètre est facultatif, mais si nous ne le fournissons pas, Internet Explorer insérera le texte "undefined" dans l’invite.

Exécutez ce code dans Internet Explorer pour voir :

let test = prompt("Test");

Donc, pour que les invites semblent bonnes dans IE, nous vous recommandons de toujours fournir le deuxième argument :

let test = prompt("Test", ''); // <-- pour IE

confirm

La syntaxe :

result = confirm(question);

La fonction confirm affiche une fenêtre modale avec une question et deux boutons : OK et Annuler.

Le résultat est true si vous appuyez sur OK et false dans le cas contraire.

Par exemple :

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true si OK est pressé

Résumé

Nous avons couvert 3 fonctions spécifiques au navigateur pour interagir avec les visiteurs :

alert
affiche un message.
prompt
affiche un message demandant à l’utilisateur de saisir du texte. Il renvoie le texte ou null, si vous cliquez sur le bouton Annuler ou sur Esc.
confirm
affiche un message et attend que l’utilisateur appuie sur “OK” ou “Annuler”. Il retourne true pour OK et false pour Annuler/Esc.

Toutes ces méthodes sont modales: elles suspendent l’exécution du script et ne permettent pas au visiteur d’interagir avec le reste de la page tant que la fenêtre n’a pas été fermée.

Il existe deux limitations partagées par toutes les méthodes ci-dessus :

  1. L’emplacement exact de la fenêtre modale est déterminé par le navigateur. Habituellement, c’est au centre.
  2. L’aspect exact de la fenêtre dépend également du navigateur. Nous ne pouvons pas le modifier.

C’est le prix de la simplicité. Il existe d’autres moyens d’afficher des fenêtres plus jolies et une interaction plus riche avec le visiteur, mais si l’aspect graphique n’ont pas beaucoup d’importance, ces méthodes fonctionnent très bien.

Exercices

importance: 4

Créez une page Web qui demande un nom et l’affiche

Exécuter la démo

JavaScript-code:

let name = prompt("What is your name?", "");
alert(name);

La page complète :

<!DOCTYPE html>
<html>
<body>

  <script>
    'use strict';

    let name = prompt("What is your name?", "");
    alert(name);
  </script>

</body>
</html>
Carte du tutoriel

Commentaires

lire ceci avant de commenter…
  • Si vous avez des améliorations à suggérer, merci de soumettre une issue GitHub ou une pull request au lieu de commenter.
  • Si vous ne comprenez pas quelque chose dans l'article, merci de préciser.
  • Pour insérer quelques bouts de code, utilisez la balise <code>, pour plusieurs lignes -- enveloppez-les avec la balise <pre>, pour plus de 10 lignes - utilisez une sandbox (plnkr, jsbin, codepen…)