Javascript has got three different inbuilt popup boxes to notify, confirm and take user input data. These popup boxes are very handy for prototyping, teaching, and accepting or printing out the data instantly without the need to create popups from scratch.
JavaScript popup message boxes
The different Javascript popup boxes or methods are:
- Alert
- Confirm
- Prompt
How to use the alert box in JS?
alert is a global method in Javascript which means we can use it in any part of our code. Often it is used with the window object window.alert but calling alert method directly without prefixing window means the same, as every window property and method can be accessed directly without the prefix.
alert('Welcome to the DevApt');The alert method:
- takes an optional input as a message to display to the user.
- prevents users from accessing other parts of the browser window until the alert box is closed
- can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly
- returns nothing or
undefined
Few examples of alert popup:
alert(); // Shows empty dialog box
alert("Hi,\nYou clicked I'm feeling lucky button"); // Show the message in two lines
alert(2+2); // Calculates and shows 4
alert(localStorage.getItem('token')); // Show the value of 'token' if stored in local storage else null
const result = alert('Your form submitted');
console.log(result); // undefinedHow to use the confirm box in Javascript?
Just like alert, confirm is also a global method that can be accessed in any part of the Javascript code. The main difference is that on popping out the alert it returns a boolean value, eithor true or false based on the user action.
confirm('Do you want to leave the page without saving?');The confirm method:
- takes an optional input as a message to display it to the user for the confirmation
- prevents users from accessing other parts of the browser window until the confirm box is closed
- can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly
- returns
truewhen user clicksOKandfalsewhen user clicksCancelbutton on the confirm box
Few examples of confirm popup:
const result = confirm('Do you like to cancel the request?');
if(result) console.log('You request is cancelled');
else console.log('Your request is processing');
if(confirm("Is 2 + 2 = 4")) location.href = '/dashboard'; // If confirmed redirected to the /dashboard pageHow to use the prompt box in JS?
prompt is a global method similar to the alert and confirm popup methods. By using alert and confirm popup methods we cannot let the user enter/send the data, and to fulfil that case we have this prompt method. Whenever user enters any data in the popup box, the same gets returned on clicking the OK button else null.
prompt('Enter your name');The prompt method:
- takes an optional input as a message to display the same to the user
- prevents users from accessing other parts of the browser window until the prompt box is closed
- can run any valid Javascript code passed as an argument, which means you should never pass user entered data directly
- returns user entered data as a string when user clicks
OKandnullwhen user clicksCancelbutton on the prompt box
Few examples of prompt popup:
const result = prompt("Enter something");
if(Boolean(result)) console.log(`You entered ${result}`); // Logs the input if user enters any data
const result = prompt('What is 2 + 2?');
if(Number(result) === 4) alert("You are right!"); // Shows an alert if it's 4
else alert('You are wrong!'); // Shows an alert for input or action other than 4There are few points to note before you use these popup methods in your code. These methods should not be used when you want to have a very good user experience.
The alert method has a history of being used in XSS(Cross Site Scripting) attacks, so you should never use alert method with user entered data directly.
The most general use of alert and confirm boxes is, when users are about to leave your site or when something is not saved or incomplete, showing these popups feels normal. Sites like Facebook uses this type of popup alert when you try to go back or leave the site in between uploading or publishing the post.
@dev_apt
