Skip to main content

Building Blocks in JS

Alerts, prompt and confirm

Understanding how to correctly use and trigger alerts, prompts, and confirm can come in handy while writing Javascript code. In this article let's dive deeper into the syntax and working of Alerts, Prompts, and confirm.

For most of this readable series, we will be leaning toward the browser as our JS environment, hence let's start looking at some of the useful methods it provides us with.

Alerts

Alert is the small box that appears on the window showing a particular message. This allows the developer to inform the user about useful and critical information as needed. Also helps the user to receive a blocking message so that they do not miss out on the information.

Let's run an alert in the browser now, and would be great for you to follow along with me.

  1. Open a new tab on your browser ( if you are on the laptop/desktop)
  2. Run the code in your console (We have discussed how to use the console in one of our previous articles in detail, I would recommend reading it first if you are not familiar with using a console).
alert("Hello Javascript!");
  1. Once you do so, you should be able to receive an alert like in the above image! I am sure you have received this at some point in your life, right? Yeah, this is how it was done under the hood.
  2. Assignment: Try using another message and run it using the code like we have seen in our previous examples. Hint-hint: Create a .js file first.

Prompts

Now that we are familiar with alerts, let's learn what prompts are, shall we?

A prompt almost looks like an alert but serves another purpose, this helps you collect user inputs right from the screen, isn't that amazing? So let's see how that works. To understand this better let's take an example of a small app.

Say you are building an app where you want to take the age of the user and simply alert a suitable message.

let age = 18;

prompt("Enter your age below", age);

Running this code in the browser will result in something like this.

So let's understand what happened here.

prompt takes two inputs, one is the message to be shown, and the second parameter is the default value. In the code above we have defined the default age to be 18, but we let the user fill in their age too.

The prompt comes with two default buttons, "cancel" and "ok" for the user to either cancel the operation or proceed to continue with the operation.

So now let's show the user a message based on their age. If the user is below the age of 18, let's show "You are not eligible to vote", and if they are above the age of 18 let's show a message, "You can vote"; What comes to mind? Yes, the if the condition we learned about in the previous section, right?

Let's put it into action and see how it works.

let age = 18;

age = prompt("Enter your age below", age);

if(age>= 18){
  alert("You can vote");
} else {
    alert("You are not eligible to vote");

}

With that when I enter a value below 18, we get the below message!

And if we enter 18 or above, we get the below message:

Great, I am sure the concept of alert and prompt is clear now. Before we wrap up, we have one last topic to learn, that is the confirm.

Confirm

Confirm is a lot like the prompt but it does not return the value entered rather, it does not even show the option for the user to enter a value, it provides the user with an "ok" button and "cancel" button, the result is saved in the code as a boolean ( true or false ).

Hence, confirm is mostly used when we need the user to confirm a certain operation, an example could be: Collecting a cookie dialog, deleting an operation ( destructive operations as we call it technically ), or simply just confirming a certain action before it happens.

Let us see confirm in action.

Note: Always good to code along so fire up the new tab and copy-paste the code from here! Typing it out yourself is even better.

let isDeleteConfirmed = false;

isDeleteConfirmed = confirm("Are you sure you want to proceed to delete?");

Running the above code in the console will display you a dialog as below:

Here let us now have a look at what the code has stored, let us print the value of isDeleteConfirmed using alerts.

let isDeleteConfirmed = false;

isDeleteConfirmed = confirm("Are you sure you want to proceed to delete?");

alert(isDeleteConfirmed);

Let's run the code in the browser:

Click on "OK"

Hence we know that it does indeed store a boolean value for the button we click.

Why do we need this?

We can use the boolean value to let the code do the necessary action such as gating the deletion behind the boolean flag etc. So much can be done with gating, the above is just a simple example.

Conclusion and Summary

We covered 3 browser functions to interact with the users who need to interact with the program:

prompt, alertand confrim. We have understood how these work and saw practical examples of how to use them in certain situations.

I hope the concepts of interactive alerts are clear, we will be using them in our further lectures and articles!