TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer des boîtes de dialogue d’alerte, d’invite et de confirmation à l’aide de JavaScript ?

1

Boîte de dialogue Créer une alerte à l’aide de JavaScript

La boîte de dialogue d’alerte est une fenêtre contextuelle apparaissant sur le navigateur uniquement avec un bouton "OK" pour informer un très petit message aux utilisateurs. La boîte d’alerte doit être utilisée pour afficher un message d’avertissement ou un message d’information. Par exemple :

  • Un message de bienvenue à l’utilisateur lors du chargement du site
  • Résultat de validation d’un résultat invalide
  • Une information concernant le temps d’arrêt du site ou le temps de maintenance.

Ici, nous discutons de la création d’une boîte de dialogue d’alerte à l’aide de JavaScript avec un exemple de code. En savoir plus sur la création d’ alertes dans Bootstrap 4.

Comment ça fonctionne?

La fonction JavaScript alert() est déclenchée lorsqu’un script est invoqué dans une page qui affichera l’argument de chaîne dans une boîte d’alerte contextuelle. Jusqu’à ce que la boîte d’alerte soit répondue, le navigateur ne continuera pas à charger la page Web.

Syntaxe

alert("Your Message Here");

Exemple

Vous trouverez ci-dessous un exemple de code d’une boîte d’alerte en JavaScript. Cette boîte apparaîtra lorsque la page sera chargée en tant que boîte de bienvenue et aura la possibilité de cliquer sur le bouton "OK" ou de fermer la boîte de dialogue dans les navigateurs comme Google Chrome. Dès que l’utilisateur clique sur « OK » (ou ferme), une image sera chargée. Le navigateur arrêtera le traitement de la page jusqu’à ce qu’une boîte d’alerte soit répondue.

<HTML> <HEAD> <TITLE>ALERT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> alert("Welcome to Our Website!!!"); document.write('<IMG SRC=""/>'); </SCRIPT> </BODY> </HTML>

Vous trouverez ci-dessous l’image d’une boîte d’alerte dans le navigateur Chrome lorsque le code ci-dessus est exécuté.

Comment créer des boîtes de dialogue d'alerte, d'invite et de confirmation à l'aide de JavaScript ?

Boîte d’alerte JavaScript dans Google Chrome

Créer une boîte de dialogue d’invite à l’aide de JavaScript

La boîte de dialogue d’invite est utilisée pour afficher la sortie personnalisée sur une page Web en fonction de l’entrée de l’utilisateur. Contrairement à une boîte d’alerte qui permet d’afficher un court message avec un seul bouton « OK », la boîte d’invite présente les caractéristiques suivantes :

  • Afficher un message prédéterminé sur la boîte
  • L’utilisateur peut saisir une entrée dans la zone de texte
  • L’entrée utilisateur est renvoyée au script
  • La boîte d’invite a deux boutons « OK » et « Annuler »

Comment ça fonctionne?

La boîte d’invite arrête également le chargement de la page Web jusqu’au moment où une réponse est reçue de l’utilisateur. Il a besoin des deux ensembles d’informations suivants :

  • Un message à afficher dans la boîte d’invite
  • Texte par défaut à afficher dans la zone de texte – ceci est facultatif ; vous pouvez laisser le texte par défaut vide
  • Lorsque le bouton « OK » est cliqué, le texte saisi dans la boîte est transmis au script
  • Lorsque le bouton « Annuler » est cliqué, la valeur NULL est renvoyée au script

Syntaxe

prompt ("Message", "Default Value");

Exemple

prompt ("What is the color you like?", "Green");

Exemple pratique pour créer une boîte de dialogue d’invite à l’aide de JavaScript

La boîte d’invite peut être utilisée dans de nombreux scénarios pratiques et un tel exemple est de saluer l’utilisateur avec le nom. Le code suivant demandera le nom d’utilisateur lors du chargement de la page, puis ajoutera le nom avec le message d’accueil pour l’afficher dans le navigateur.

<HTML> <HEAD> <TITLE>PROMPT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> document.write("<h1>Greetings</h1>"); document.write(prompt("Enter Your Name: ", "Name")); document.write(" Welcome to Our Site!</h1>"); </SCRIPT> </BODY> </HTML>

À quoi ça ressemble?

Vous trouverez ci-dessous l’image d’une boîte de dialogue dans le navigateur Chrome lorsque le code ci-dessus est exécuté.

Comment créer des boîtes de dialogue d'alerte, d'invite et de confirmation à l'aide de JavaScript ?

Boîte d’invite JavaScript dans Google Chrome

Lorsque l’utilisateur entre le nom et appuie sur le bouton « OK », le nom est transmis au script et tous les messages sont affichés selon la fonction document.write. L’espace vide dans la zone de saisie est également considéré comme un nom valide par la boîte d’invite JavaScript.

Affichage de la boîte d’invite avec le nom d’utilisateur

Lorsque l’utilisateur clique sur le bouton « Annuler », la valeur nulle est transmise et affichée dans le navigateur à la place du nom.

Affichage de la boîte d’invite avec valeur nulle

Créer une boîte de dialogue de confirmation à l’aide de JavaScript

Il s’agit d’un troisième type de boîte de dialogue fourni dans JavaScript en plus des boîtes d’invite et d’alerte. Cette section explique comment créer une boîte de dialogue de confirmation à l’aide de JavaScript qui est utilisé pour confirmer l’action entreprise par l’utilisateur.

La boîte de dialogue de confirmation présente les fonctionnalités suivantes :

  • Un message prédéterminé à afficher sur la boîte
  • Deux boutons – OK et Annuler

Comment ça fonctionne?

La boîte de confirmation comme les autres boîtes de dialogue arrête également l’exécution jusqu’à ce que la réponse de l’utilisateur soit reçue. L’action de l’utilisateur peut être OK ou Annuler.

  • La valeur true est transmise au programme appelant lorsque le bouton OK est enfoncé
  • La valeur false est transmise au programme appelant lorsque le bouton Annuler est enfoncé

Syntaxe

confirm ("Message");

Exemple

confirm ("Do you want to close this window?");

Exemple pratique

Le code JavaScript suivant utilise la méthode d’invite pour poser une question à l’utilisateur. Une boîte de confirmation s’affiche pour indiquer que la réponse est correcte ou incorrecte.

<HTML> <HEAD> <TITLE>CONFIRM BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> var q = "What is 5+5?"; var a = 10; var c = "<h2>You are a Genius</h2>"; var ic = "<h2>Reload to Try Again</h2>"; var response = prompt(q,"0"); if (response != a) { alert("Wrong, Better Luck Next Time!!!"); } else { alert("Correct! Well done!!!"); } var o = (response == a)? c: ic; document.write("<BR/>"); document.write(o); </SCRIPT> </BODY> </HTML>

À quoi ça ressemble?

Vous trouverez ci-dessous l’image d’une boîte de dialogue dans le navigateur Chrome lorsque le code ci-dessus est exécuté et la boîte de confirmation s’affiche en fonction de l’exactitude de la réponse fournie dans la zone de texte de l’invite.

Comment créer des boîtes de dialogue d'alerte, d'invite et de confirmation à l'aide de JavaScript ?

JavaScript confirmant la bonne réponse

Comment créer des boîtes de dialogue d'alerte, d'invite et de confirmation à l'aide de JavaScript ?

JavaScript confirmant la mauvaise réponse

Source d’enregistrement: webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails