Interaction en JavaScript avec alert, invite, confirm

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?");

Nos autres cours