Ici nous allons voir comment réer des intéractions avec JavaScript. Avec JavaScript a trois types de fenêtres contextuelles : une boîte d’alerte, une boîte de confirmation et une boîte d’invite.
Alert
Une boîte d’alerte est souvent utilisée si vous voulez vous assurer que les informations parviennent à l’utilisateur. Lorsqu’une boîte d’alerte apparaît, l’utilisateur devra cliquer sur « OK » pour continuer.
Syntaxe
window.alert("votre texte");
La méthode window.alert() peut être écrite sans le préfixe de fenêtre.
Exemple :
alert("Votre texte");
Boîte de confirmation
Une boîte de confirmation est souvent utilisée si vous souhaitez que l’utilisateur vérifie ou accepte quelque chose. Lorsqu’une boîte de confirmation apparaît, l’utilisateur devra cliquer sur « OK » ou « Annuler » pour continuer. Si l’utilisateur clique sur « OK », la case renvoie vrai. Si l’utilisateur clique sur « Annuler », la case renvoie false.
Syntax
window.confirm("votre texte");
La méthode window.confirm() peut être écrite sans le préfixe de fenêtre.
Exemple
<button onclick="maFonction()">Valider</button> <p id="exemple"></p> <script> function maFonction() { var txt; if (confirm("Confirmer")) { txt = "Réussi"; } else { txt = "Annuler"; } document.getElementById("exemple").innerHTML = txt; } </script>
Boîte d’invite
Une boîte de dialogue est souvent utilisée si vous souhaitez que l'utilisateur saisisse une valeur avant de saisir une page. Lorsqu'une boîte de dialogue apparaît, l'utilisateur devra cliquer sur "OK" ou "Annuler" pour continuer après avoir entré une valeur d'entrée. Si l'utilisateur clique sur "OK", la boîte renvoie la valeur saisie. Si l'utilisateur clique sur "Annuler", la boîte renvoie null.
Syntaxe
window.prompt("sometext","defaultText");
La méthode window.prompt() peut être écrite sans le préfixe de fenêtre.
Exemple
let person = prompt("Entrer votre nom", "Adrien"); let text; if (nom == null || nom == "") { text = "Annulé"; } else { text = "Bonjour" + nom + "! Passez une bonne journée"; }
Sauts de ligne
Pour afficher les sauts de ligne dans une boîte contextuelle, utilisez une barre oblique inverse suivie du caractère n.
alert("Bonjour\nIl faut beau aujourd'hui?");