Site Development
Downloads
Help!!
Home
The Confirm BoxThe Confirm Box gives the user a choice between two options. Now we're really getting interactive. When a Confirm box pops up, it presents some text, usually a question. It has two buttons: "OK" and "Cancel". The user can then pick one of these buttons to get one of two different effects (functions). Lets start by coding the box. As with all JavaScript functions, we need to first decide what event we want to initiate our program and make up a name for the function. We'll be using the boxes at the opening of this page as an example. I called the function "boxes()" and set it to run when the page is loaded: <body onLoad="boxes()"> Now lets make the box itself. This is pretty simple. Put <script> tags in your page's <head> and code:
<script language="JavaScript"> You'll notice the syntax is just like the alert() box. We made the function "boxes()" and then typed in the "confirm" part. The string inside the parentheses will be displayed in the box. There will also be two buttons, not just one like with the alert() box. So now we've got our confirm() box, but it doesn't do anything. The viewer can click either button and the box just goes away. Lets get it to sing and dance. Boolean ValuesThe secret behind the confirm() box is that the buttons return different Boolean values. Boolean values are simply "true" and "false". The "OK" button returns the Boolean true. The "Cancel" button returns the Boolean false. Boolean values are often used to determine yes-no types of questions and are a cornerstone of formal logic. All you really need to know right now is that the confirm() box's buttons each return a different value: true or false. Setting A VariableNow that we know that the confirm() box returns a Boolean value, we need to use a variable to hold whichever value the viewer selects. Remember that a variable is nothing but a "data container". It will hold whatever value it is assigned. To get a variable to hold the Boolean value of a confirm() box, we need to set the variable to equal the value of the confirm box:
<script language="JavaScript"> I called the variable "decision", a descriptive term that shows I'm wanting this variable to hold the viewer's decision between clicking "OK" or "Cancel". I begin by typing in "var" and making a space. The term "var" declares the variable. The first time a variable is used in JavaScript, it's a good idea (though not always essential) to declare it so that the browser knows it is a variable and not a command or something else. Don't use variable names that are also functions or other built in JavaScript names like "alert" or "confirm" and such. The syntax of declaring a variable is simply to code in "var ", with a space, followed by the name you give the variable and an equals sign (=). Now you type in what you want the variable to "hold", or be assigned, to the right of the equals sign. You may put a space on either side of the equals sign to make your code less crowded. The spaces are not required. Lets see how this variable will work. The code below will open a confirmation box followed by an alert box that displays the Boolean value of the button the viewer clicks:
<script language="JavaScript"> What this JavaScript does is to open a confirm() box and let the viewer pick between the "OK" (true) or "Cancel" (false) buttons. When the viewer clicks a button, the value true or false is sent to the variable "decision". The confirm() box closes and an alert() box pops up displaying the contents of the variable "decision". Click here to see this JavaScript in action. Make sure to run it twice and check both button's values. You'll notice that the "true" and "false" Boolean values are not inside quotation marks in the alert() box. This is because they are understood values, Boolean values, and not strings. They are understood as built-in values, not words. The IF/ELSE StatementNow we are able to display a confirm() box and trap the user's response with a variable. It's time to learn how to use this to make the page behave differently according to the user's response. We'll do this by using a conditional statement. A conditional statement does two things: 1) It determines if a particular condition exists or is true, and 2) it directs the JavaScript program to a particular set of statements to run depending on the condition's status. The conditional statement most used in JavaScript, as well as other programming languages, is the IF/ELSE statement. It goes like this:
if (condition to test) { do this if condition is true;} The IF/ELSE statement is usually put in a function and begins by typing in "if" followed by a set of parentheses. Inside the parentheses you'll code the condition you want tested. We'll talk more about this later in this tutorial. This is followed by a series of one or more JavaScript statements inside curly braces. Now you can code what you want to have happen if the condition is not true by using the ELSE statement. Type in "else" and a set of curly braces. Inside these curly braces, code in the statements you want run if the condition is false. If you don't want anything to happen if the statement is false, you can just ignore using an ELSE statement. Lets see how I used IF/ELSE to code the example presented when this page loaded:
<script language="JavaScript"> Lets take a break for a minute to look at this first part. You know about most of this, but look at the "decision == true" part. Why did I use two equals signs. Well, it goes like this. If I'd used one equals sign, then "decision" would be assigned the value of Boolean true. Using two equal signs tests to see if "decision" does, in fact, equal true. This is the difference between comparison and assignment. This is an important concept to grasp and a lot of syntax errors are made here. Using one equals sign assigns value. Using two equals signs compares values. In the IF statement's parentheses, we almost always want to compare, or test, for equality, not assign it. Variable assignments are made with the "var" statement and one equals sign. Now lets finish the code, I'll bet you'll be able to easily understand the rest of it:
<script language="JavaScript"> There are three things to notice here. First, lets discuss the logic behind the ELSE statement. In this case, there are only two options: true and false. The IF statement test for true. Since there are only two options, if the value of "decision" isn't true, then it must be false. There are no other options. This isn't always the case. You can test for a variety of values and combinations of values. Generally, a series of values and combinations are tested in IF, and ELSE is a default set of statements to run if none of the tested conditions is true. It is also common to just ignore coding an ELSE statement if no special action is needed. In this case the function would do nothing if none of the IF conditions were true. Secondly, we could just as easily test for false by using "if (decision == false)" and reversing the order of the alert() boxes. It would work the same either way. Finally look at the code for the last alert box. Look at the words "Cancel" and "OK". See the backslashes (\)? These are called "escapes" or "escape characters". I used them because I wanted to display double quotes in the alert() box, but I couldn't put double quotes directly in the code. Look at the alert() box's code again and you'll notice that the string containing "Cancel" and "OK" is already inside double quotes as part of the alert() box's code. Therefore, double quotes can't be used in the string directly. In this situation, precede the special character you want displayed with a backslash (\). This tells the browser that you want it to display the character as part of the string and that it is not to be considered part of the code. This is also often needed to present single quotes and math signs like +, -, /, and the backslash itself. If I'd wanted to display a single backslash I'd have to code two -- \\. The first backslash acts as the escape character to tell the browser to display the following character as a string value and not consider it a part of the code. The second backslash is the actual character to display. It will take a little practice to get used to this. Don't confuse the backslash (\) with the forward slash (/) used in fractions and URLs. IF/ELSE ConditionsIn our above example, we tested to see if a condition was true by seeing if a variable equalled a particular value. You can test for all kinds of other conditions, too. Below is a list of conditions we can test for in the IF statement's parentheses. I've used "x" as a generic variable and "value" for the test value:
Another ExampleLets try another example of using confirm() boxes using the "document" object's location property. We'll make a box that will send the viewer to either the Google or Yahoo! search engines depending on which button they click. To do this, we need to learn about the "document.location" property. If we make a box like this: We can also set the location property of the "document" object to any URL we want: Knowing how to go to another web page using the "document" object's location property, we can now code a confirm() box to take the viewer to either of two places:
var viewer_choice = confirm ("Click \"OK\" to go to Google. Click \"Cancel\" to go to Yahoo!"); Click here to see this JavaScript in action. Don't forget to put the URLs in quotes when using the "document.location" property. ExercisesCode the above examples from scratch a couple of times using different alert boxes or "document.location" URLs. Then code a page where a confirm() box and IF/ELSE statement will set the background and foreground color of the page as in this example.
|
!= means "not equal to". (x != value) means that "x" is not equal to "value".
To Next Beginning JavaScript Lesson
Back To Beginning JavaScript Index