JavaScript Primers #13

By Joe Burns

Use these to jump around or read it all


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment


The Concept

The command "Confirm" acts very much like the alert method except it adds a cancel button to the dialogue box. They're both methods.

Now, if you use the command by its lonesome, it doesn't do much except post the OK and Cancel buttons and no matter which one you choose, you go in. But, add the IF and ELSE functions and you start to get some neat effects.


The Script

First off, we'll look at the basic format.

<SCRIPT type="text/javascript">

confirm("Are you sure you want to enter?")

</SCRIPT>

Look familiar? It should. It's the same as an alert, except the word "confirm" is used. Here's a basic example of what this little script does.

As you saw, it doesn't do much. Then again... here's the same command with some new additions:

<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>


The Script's Effect

Now we're getting somewhere. Here's a link that will ask you if you want to enter. Only this time, if you click OK you'll go in. If you say Cancel, you won't.

That was pretty neat, huh? Now let's find out how it worked.


Deconstructing the Script

You Have A ChoiceThe process of the script is quite logical, as is all JavaScript. First, the script makes the statement:

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

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

Since it is a choice, there are options. In this case, we're using a Confirm command which offers two choices: "OK" and "Cancel". I think of them as Yes and No. Please notice the parentheses pattern. Whatever follows the IF command must be in them, but you also know that the text that displays using Confirm requires parentheses, too. Thus you use both sets, the one set just surrounds the other.

Immediately following the statement are the commands to be carried out for each choice. Please notice the commands are encased in those lovely little fancy parentheses (sometimes called braces). Why? Because in reality, they are functions. The first little function is what should happen if the user chooses "OK" or Yes.

{
parent.location='http://www.htmlgoodies.com';
alert("Good choice");
}

If you remember back a couple of primers, "parent.location" is the command that creates a link. Then I have a basic alert proclaiming "Good Choice." Please notice the semicolons.


But What If I Choose Cancel?We already know that the function that immediately follows the IF statement is what will happen if you choose OK. "Cancel", on the other hand, is a second choice. Notice that right after the first function ends, the word ELSE pops up.

Think of the command ELSE as meaning "if not". So, the following text...

else
{
alert("Then you'll stay right here");
}

...means, if not, then post the alert message and do not change the page.

Put it all together and you get the effect of giving the user a choice: Go in or don't go in. And you've also set up a function to occur either way.


This is only an introduction to the uses of IF and ELSE. Later, we have an entire primer dedicated only to the IF command. And it deserves it, don't you think? A round of applause for IF, ladies and gentlemen!


What You Have Learned


Your Assignment

Don't get nervous! You can do this. Your assignment is to turn the commands above into a function. Oh, and make it so that when the person chooses not to go, not only does the alert pop up, but the status bar of the window reads "Chicken!"

If you really want to be fancy, if the person chooses OK, make the page come up in a new window. Don't overthink this, the chance is minimal.

Here's a possible answer
(this will open a new window)


The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date