• alert()
• confirm()
• prompt()

alert()

The simplest to direct output to a dialog box is to use the alert() method.

alert("Click Ok to continue.");

NOTICE: that the alert() method doesn’t have an object name in front of it. This is because the alert() method is part of the window Object. As the top-level object in the Navigator Object Hierarchy, the window Object is assumed when it isn’t specified.

The script alert("Click Ok to continue."); and HTML holding the script will not continue or execute until the user clicks the OK button.

Generally, the alert() method is used for exactly that – to warn the user or alert him or her to something. Examples of this type of use include:

• Incorrect information in a form
• An invalid result from a calculation
• A warning that a service is not available on a given date

Nonetheless, the alert() method can still be used for friendlier messages.

NOTICE: that Netscape alert boxes include the phrase "<url> [JavaScript Application]" in the title bar of the alert while IE has "Microsoft Internet Explorerin the title bar of the alert. Both have yellow triangles to "alert" you. This done in order to distinguish them form those generated by the operating system or the browser. This done for security reasons so that malicious programs cannot trick users into doing things they don’t want to do.

<INPUT TYPE="button" VALUE="alert" onClick="alert('This is an alert!!')">

OR

<INPUT TYPE="button" VALUE="alert" onClick="window.alert('This is an alert!!')">

prompt()

The alert() method still doesn't enable you to interact with the user. The addition of the OK button provides you with some control over the timing of events, but it still cannot be used to generate any dynamic output or customize output based on user input.

The simplest way to interact with the user is with the prompt() method. The user needs to fill in the field and then click OK.

prompt("Enter Your Name:", "Name");

• Note 1: you are providing two "arguments" to the method in the parenthesis. The prompt() method "requires two pieces of information". The first is text to be displayed, and the second is the default data in the entry field.

• Note 2: In JavaScript, when a method requires more than one argument, they are separated by commas.

<INPUT TYPE="button" VALUE="prompt" onClick="respPrompt()">

With function code:

<SCRIPT LANGUAGE="JavaScript">

function respPrompt() {
     var favorite = prompt('What is your favorite color?', 'RED');
     // OR var favorite = window.prompt('What is your favorite color?', 'RED');

     // if (favorite) equivalent to if (favorite != null && favorite != "");
     if (favorite) alert("Your favorite color is: " +  favorite);
     else alert("You pressed Cancel or no value was entered!");
}

</SCRIPT>

NOTE: What happens when you press Cancel? The value null is returned.

confirm()

Confirm displays a dialog box with two buttons: OK and Cancel. If the user clicks on OK the window method confirm() will return true. If the user clicks on the Cancel button confirm() returns false.

<INPUT TYPE="button" VALUE="confirm" onClick="respConfirm()">

With function code:

<SCRIPT LANGUAGE="JavaScript">

function respConfirm () {
     var response = confirm('Confirm Test: Continue?');
     // OR var response = window.confirm('Confirm Test: Continue?');

     if (response) alert("Your response was OK!");
     else alert("Your response was Cancel!");
}

</SCRIPT>

NOTE: response will be:

1. true if OK is pressed

2. false if Cancel is pressed