Please navigate to the bottom of the page for Table of Contents

Saturday, June 4, 2011

Differentiate between alert(), prompt() and confirm() methods

Although jQuery is the new craze, traditional javascript knowledge is still required and forms a core part of a web developer interview. One of the common questions is about making sure the interviewee understands the different mechanisms of communicating with the user. The javascript window object uses dialog boxes to interact with the user. The dialog boxes are created with three methods:
• alert()
• prompt()
• confirm()

alert() dialog

The alert() dialog box is used to communicate a message to the user (generally warnings of missed actions). For example, if the email address entered is wrong, you can use the alert() message to warn the user about it. Developers also use alerts() as a quick and dirty way to debug their applications.

// warning
alert("Invalid email address. Please enter again.");
// debugging
alert(currentCounter);



The alert() method creates a new pop-up window (dialog box) which contains the user message and an
OK button. This is a modal window and all execution is stopped until the user clicks the OK button in the pop-up box.


image


prompt() dialog


The prompt() method asks the user for some small input such as a password, completion of a form input, or personal information, such as nickname or title. The prompt dialog box pops up with a simple text box. After the user enters text into the prompt dialog box, its value is returned (or null in case the user hit cancel).


prompt("Please enter your nickname", "nickname");



The prompt method takes in 2 arguments – the prompt message and a default value. The default value is optional and if provided is filled in the text box and is selected by default.


image


confirm() dialog


The confirm dialog box is used to confirm a user’s answer to a question. This method takes only one argument, the question you will ask the user. A question mark will appear in the box with an OK button and a Cancel button. If the user clicks the OK button, true is returned; if he or she clicks the Cancel button, false is returned. This is also a modal dialog  - the user must agree before the action is completed. You often see this in shopping cart applications just before placing the order or on file sharing sites just before you delete a file.  


if (confirm("Are you sure you want to delete your profile photo?") == true) {
alert("Deleting photo...");
}
else {
alert("Glad you decided against deleting the photo!");
}


image

To summarize, the different mechanisms that javascript provides you to interact with the user are alert, prompt and confirm. Hopefully with the explanation, code and screenshots, this is clear to you.

4 comments:

  1. this is easy to understand and useful!

    thank you very much!

    ReplyDelete
  2. thank you sir ,its really helpful for my vivas examination ! if possible then plz make some more notes like this. thanku.....

    ReplyDelete