Afficher la valeur de la variable dans une boîte d'alerte en JavaScript

Muhammad Muzammil Hussain 12 octobre 2023

JavaScript JavaScript Alert

Dans cet article, nous allons apprendre à utiliser la méthode alert() en JavaScript. Nous allons apprendre à utiliser une boite d’alerte pour afficher un message ou toute autre information utile sous forme de popup à l’utilisateur sur une page web.

Afficher la valeur de la variable dans une boîte d’alerte en JavaScript

Pour afficher n’importe quelle valeur dans la popup, nous devons utiliser une boîte d’alerte. Par défaut, il contient le bouton OK pour masquer et fermer la boîte de dialogue contextuelle.

Lorsqu’un utilisateur interagit avec une page Web, la plupart du temps, les développeurs doivent transmettre un message utile à l’utilisateur à l’aide d’une boîte d’alerte. Par exemple, lorsque les utilisateurs téléchargent leurs données sur le serveur depuis le côté client, les pages Web affichent un message de réussite ou d’échec dans la boîte de dialogue contextuelle après validation.

La boîte d’alerte retire le focus de l’utilisateur de la page Web active, forçant l’utilisateur à lire le message d’alerte.

En JavaScript, la méthode par défaut alert() peut afficher un message d’alerte, une valeur de variable et du texte avec une variable à l’aide de l’opérateur de concaténation +.

Syntaxe de base :

let data = 'hello world'
alert(data);

Comme indiqué ci-dessus, nous n’avons qu’à passer une valeur ou une variable à la méthode alert() en tant qu’argument.

Exemple:

<html>
    <head>
        <title> display JavaScript alert </title>
    </head>
    <script>
    function showPopup()
    {
        var data = document.getElementById("value").value;
        //check empty data field
        if(data == "")
        {
           alert("Please enter any value..");
        }
        else
        {
            alert("Your entered value is: "+data); //display variable along with the string
        }
    }
    </script>
    <body>

        <h1 style="color:blueviolet">DelftStack</h1>
        <h3>JavaScript display alert box</h3>

        <form onsubmit ="return showPopup()">
            <!-- data input -->
            <td> Enter Value: </td>
            <input id = "value" value = "">
            <br><br>
            <input type = "submit" value = "Submit">
        </form>
    </body>
</html>

Nous avons utilisé l’élément form dans le code source HTML ci-dessus pour créer le champ de saisie utilisateur et le bouton Submit. L’utilisateur insérera une valeur, et lorsque l’utilisateur cliquera sur le bouton Submit, la fonction showPopup() sera déclenchée.

Dans les balises de script, nous avons déclaré la fonction showPopup(), où nous obtenons la valeur d’entrée de l’utilisateur dans la variable data et utilisons l’instruction conditionnelle if pour vérifier si data est vide ou non.

Si la variable data est vide, il affichera une alerte avec un message d’erreur. Sinon, il affichera un message de réussite avec la variable data.