reptile7's JavaScript blog: Confirm It, or Else

Saturday, January 28, 2006

Confirm It, or Else
Blog Entry #28

So far, we've discussed two types of JavaScript pop-up message/dialog boxes:

(1) Alert boxes (introduced in the Primer #4 Assignment and in "The end-of-primer assignment and its answer" section of Blog Entry #7), popped up by the alert( ) method of the window object:

(2) Prompt boxes (introduced in Primer #6 and in Blog Entry #11), popped up by the prompt( ) method of the window object:

In this entry, we examine HTML Goodies' JavaScript Primers #13, which introduces a third such type of box: the confirm box, which is popped up by the confirm( ) method of the window object. The syntax of the confirm( ) method is identical to that of the alert( ) method:

window.confirm("This is the confirm box message.");
// this command can be placed in a script or assigned to an event handler

Output:

Unlike an alert box but like a prompt box, a confirm box solicits input from the user. Specifically, a confirm box presents to the user a Boolean true/false choice with respect to its message: clicking the "OK" button represents true, whereas clicking the "Cancel" button represents false. We can verify this directly with the following code:

var bool = window.confirm("This is the confirm box message.");
window.alert(bool);
/* the alert box displays "true" or "false" depending on whether the user chooses "OK" or "Cancel" on the confirm box */

As is done in the Primer #13 Script, we can tie the confirm box's true/false choice to the execution of JavaScript code with an if...else statement, a conditional whose "if" part, corresponding to true, executes one unit (≥1 commands) of code, and whose "else" part, corresponding to false, executes an alternate unit of code, via the following syntax:

if (an expression that can be true or false)
// if the expression is true
{
command_statement_A;
command_statement_B; etc.
}
else
// if the expression is false
{
command_statement_X;
command_statement_Y; etc.
}

Note the function-like use of punctuating enclosure marks: the if/else commands are delimited by braces (which, à la functions, do not need to be on their own lines), whereas the conditional expression itself is surrounded by parentheses - "Because in reality, they [if and else] are functions," Joe tells us in the primer. Upon reading this, I initially thought, "No, Joe, they are not functions." And then I recalled Wikipedia's subroutine definition (which has been recently updated) from Blog Entry #23 - "a sequence of code that performs a specific task, as part of a larger program, and is grouped as one or more statement blocks" - which applies rather accurately to an if...else statement. If...else blocks of code are not necessarily "called" as are functions, but on the other hand, a function can be followed by a calling function_name( ); command that enables the function to execute without any input on the user's part. So perhaps I am splitting hairs here.

As should be clear at this point, an if...else statement serves as a type of branching technique within a script. For example, consider the Primer #13 Script below:

<SCRIPT type="text/javascript">
if (confirm("Are you sure you want to enter HTML Goodies?") )
{
parent.location='http://www.htmlgoodies.com';
alert("Good choice");
}
else
{
alert("Then you'll stay right here");
}
</SCRIPT>

We can illustrate the script's effect, and the if...else concept more generally, with the following flowchart:

With respect to if...else branching, note in the syntax on DevGuru's if...else statement page

if (condition) {statements1} [else {statements2}]

that the "else" part is in square brackets, indicating that it is optional. Indeed, we'll see later in the HTML Goodies JavaScript Primers series examples of "if...else" statements consisting only of one or more "if" units of code.

Joe's take on the "if" conditional statement:

It means, If (Here is your chance to make a choice)

is correct as far as the Primer #13 Script goes, because the confirm( ) method does require the user to make a true/false choice. In fact, if...else statements are much more commonly used to compare two expressions and determine whether they are equal (=true) or not (=false), as we'll again see in future primers.

In case you were wondering, the "OK" and "Cancel" buttons of a prompt box do not also correspond respectively to true and false. When I substituted "prompt" for "confirm" in the Primer #13 Script:

if (prompt("Are you sure you want to enter HTML Goodies?") )

the "OK" and "Cancel" buttons of the resulting prompt box both triggered the "else" part of the script; clicking "OK" did not take me to the HTML Goodies home page.

A couple of niggling points relating to the "Deconstructing the Script" section of Primer #13:

(1) "If you remember back a couple of primers [actually, it was eight primers ago, in "The onSubmit Command" section of Primer #5], 'parent.location' is the command that creates a link." Uh, "parent.location" is A command that creates a link, and is OK as a substitute for "window.location" outside of a frames situation, but either window.location='http://www.htmlgoodies.com'; or location.href='http://www.htmlgoodies.com'; would be better form than parent.location='http://www.htmlgoodies.com'; in the Primer #13 Script.

(2) "Please notice the semicolons." I was going to mention, per Blog Entry #5, that command statements that do not share their source code lines with other commands do not need to end with semicolons; nonetheless, it's good form to follow a command with a semicolon, so scratch that.

We wrap up this entry with a few remarks about...

The end-of-primer assignment and its answer

In the Primer #13 Assignment, Joe asks the reader to functionize the Primer #13 Script, write a message ("Chicken!") to the status bar in the "else" part of the script, and open the HTML Goodies home page link in the "if" part of the script in a new window. Joe's assignment answer is uneventful until we get to its ending bullet point, which reads:

• If you wanted to get fancy and have the page open in a new window, you only had to change out two words. Exchange "parent.location" with "window.open" and you're done.

Red flag! I instantly wondered, "Is window.open='http://www.htmlgoodies.com'; really a legitimate command?" I tried it out; it didn't work. As one would expect, you'll need to use:

window.open("http://www.htmlgoodies.com");

for this part of the answer.

As noted above, we'll see other applications of if...else statements in due course. Meanwhile, in the next post we'll forge on to HTML Goodies' JavaScript Primers #14, in which we'll use JavaScript to carry out some simple arithmetic calculations. You're keen on math, aren't you? I am too, or at least I was until I hit the second semester of calculus...

reptile7
- posted by A. Peak @ 2:21 PM

Comments:

Inquisitive? Actually, there is a research-like aspect to what I'm doing on my blog (even if I'm "rediscovering the wheel" more often than not), so fair enough. Thanks for reading.

# posted by

A. Peak : 7:27 PM

About Me