Home
/
Blog
/
Interaction using Alert, Prompt, and Confirm using JS

Interaction using Alert, Prompt, and Confirm using JS

JavaScript and User Interaction

JavaScript is one of the well-known programming languages. Developers mainly use JS in Web browsers to create an interactive and dynamic environment. This interaction helps enhance the user experience, and the end-users feel involved in the whole process. Therefore, most of modern technology’s essential functions and applications implement JavaScript to boost user interaction.

User Interaction Functions

JavaScript provides the developers with the opportunity to engage with the users effectively. It provides various functions that help interact with users and respond to that particular interaction. Some essential user interface functions for user interaction are the following:

alert
prompt
confirm

alert() in JavaScript

The alert() function is a primary interactive method in JavaScript. It displays a virtual alert box or a message box for the user. The alert box contains whatever the developer writes in it. Therefore, the box might contain a specified content in it. In most cases, the developers use this virtual alert box to provide a warning message to the user. The virtual box might not contain any specified text depending on the situation. The alert box contains a specific message and an OK button. The user must click the OK or Close button to process after the alert box shows up.

Importance of alert() Function

Although using an alert box seems unnecessary in certain conditions. The reason is that it forces the users to distract from the actual work they are performing and put their focus on it. However, in specific scenarios, the alert boxes play a vital role. Minimizing the alert box use is necessary to avoid overdoing it. An alert box restricts the users from using the rest of the web page until the box is closed. The eligible circumstances to show an alert box include a warning to fill the required fields, asking the user to meet specific conditions, and validating a condition to move forward.

Example of alert() Function

The alert() function displays a message for the user with an OK or Close button. This function stops executing the script until the user attends to it and presses the button. There is a mini-window that pops ups after triggering the alert function. This mini window is known as the modal window. Following is a simple example of writing an alert box:

<script>
alert('HI. This is a sample alert box.');
alert();
</script>

Here, the first alert() shows a virtual box with specified content, and the second alert() shows a virtual box without any content. This example explains that the alert() function can be used for warnings and regular messages. Similarly, the developers can create an alert box for displaying a pop-up to the user or utilizing the alert function for debugging.

prompt() in JavaScript

The prompt() function in JavaScript works by displaying a box to the users asking for their input. Usually, users can see a prompt box before entering a specific web page or starting to interact with it. The prompt() function displays a message box or a pop-up to the user to take their input. The prompt box has buttons like OK and Cancel in it. The users must click one of the buttons after the prompt box pops up to proceed further. Prompt is a user interface function that usually takes two arguments. Here, the first argument is the label the developer wants to display in the text box. The second argument is a string that displays in the prompt box.

Importance of prompt() Function

The prompt() function needs to be according to the dire need of the situation. The prompt box asks users for their input, and until they provide the input, the function does not let them interact with the rest of the web page. The wait could frustrate the users and harm them. However, using the prompt box comes with its benefits. The prompt box can take input from the user, such as their name, a specific number, a date, a word, or a phrase. The developers can perform any operation based on the input data. The developers can build something using the input according to their requirements.

Example of prompt() Function

The prompt() function is a user interface function that helps developers take any input data from the user. It is the most commonly used interface as the developers can save the input from benefiting from it later on. The prompt() has two arguments: the text and the default value. The default value argument is optional. It acts as a placeholder in the text field. The function returns null or the string a user enters. If the user clicks OK, the prompt returns the input value. However, if the user clicks Close or Cancel, the function returns null. Following is a simple example of using the prompt() function in JavaScript:

<script>
let age = prompt('What is your age', 20);
alert('You are ${age} years old!`);
</script>

confirm() in JavaScript

The confirm() function in JavaScript is helpful when the developers want the user to confirm specific actions. The confirm() function displays a modal window or a dialogue box asking the user when the user needs to verify something. The function uses a predefined message to show the user. There are two buttons in the dialogue box, OK and Cancel, in the confirm() function. If the user chooses the OK button, the function returns true. However, if the user chooses the Cancel button, the function returns false.

Importance of confirm() Function

The confirm() function in JavaScript holds particular importance. There is often a need for user verification in terms of yes and no to perform certain operations. Some sensitive operations can not be reverted, and the developers must warn the user of the choice they would make. Therefore, warning the users or verifying with them reduces the chance of accidentally verifying something that might cause problems in the future.

Example of confirm() Function

The confirm() function takes a single string as an argument. The developers can pass any message or warning they want to display in the dialogue box. This synchronous function stops the execution of other code scripts, so it must be a meaningful question for the user. Some practical examples include asking the user before deleting or agreeing to something. The boolean variable returns the user’s choice to proceed with the program further. A simple example of using confirm() function is the following:

<script>
let isChoice  = confirm('Are you Sure you want to delete this?');
alert('You Chose ${isChoice}`);
</script>

The developers can create a dialogue box to ask for the user’s permission, proceed to perform specific actions, lead them with a URL, or perform any other important task which needs user interaction.