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”>
|
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?”) )
alert(“Good choice”); else { </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:
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=’https://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.
(this will open a new window)
The Concept
The Script
The Script’s Effect
Deconstructing the Script
What You’ve Learned
Your Assignment
