JavaScript: IF, Confirm, History

 

IF Statement

The IF statement plays a key role in most programming languages, and JavaScript follows suit. The IF statement allows your program to "branch," to follow different paths depending on what happens as the program runs. Following is an example of a simple IF statement that helps the program to respond correctly to a question about a user's age:

<BODY>
<script language=JavaScript>
<!--

age = prompt("How old are you?"," ");

if( age>16)
{ alert("You can drive in New Jersey.");
}
else
{ alert("You're not old enough yet to drive in NJ.");
}

document.write("Hit 'Refresh' or 'Reload' to try another age.");
//-->
</script>

to see this how this code behaves in a new window.

 

The program executes the first branch of an IF statement whose test inside the parentheses is true. If the user's age is greater than 16, "You can drive in New Jersey" is printed, and the 'else' section is ignored. If the user's age is NOT greater than 16, the 'if' section is ignored, and the 'else' section ("You're not old enough yet to drive in NJ") is executed. Only one branch of any IF statement is executed.

Note that curly brackets { and } are used to open and close each branch of an IF statement. Note also that if an IF statement has to deal with two possibilities (as in this example), an IF - ELSE syntax can be used. If, say, four possibilities had to be dealt with, the syntax might be IF - ELSE IF - ELSE IF - ELSE.

An IF statement is followed by a condition in parentheses; in this example it was IF(age > 16). An ELSE IF statement is also followed by a condition in parentheses, for example: ELSE IF(age > 15). An ELSE statement simply stands alone, and an ELSE executes if none of the tests that came before it were true.

 

Confirm

'Confirm' is a window method that gives a user a second chance to accept or reject a choice. It offers the viewer two choices: 'OK' and 'Cancel.' The 'Confirm' method works nicely in tandem with the IF statement. We'll show an example of this below.

 

History

'History' is a window object that keeps track of which URLs the viewer has recently visited. A useful method of the History object is 'go(),' which allows the scripter to jump to a recently-visited URL. For example, the command 'history.go(-1)' says 'go back 1 URL on the list of URLs,' and it is like hitting the browser's Back button.

 

Example

Let's do an example that shows the IF statement, the Confirm method and the History object all at work. The user is presented with a 'Previous' button that takes her to the URL she visited before the current URL. Before the button does this, a Confirm method is invoked to make sure that she wants to go back to that URL. Here is the script:

<script language=JavaScript>
<!--

function backOne()
{

if(confirm("Are you sure you want to return to the previous URL?"))

{

window.history.go(-1);

}
}

//-->
</script>
</HEAD>

<BODY>
<form>
<input type=button value="Previous" name=button1 onClick="backOne();">
</form>

to see this how this code behaves in a new window.

(If the window that opened when you clicked the first button is not still open, this second button works best if you first click that button again.)

 

Other Resources

Try these links on the IF statement:


Page Link
IF Statement webteacher.com/javascript/ch03.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own page, or 2) eEverything.com.

If you work on eEverything.com, add a button that is labeled "Jump to amazon.com" (or some other page). [amazon.com is one of eEverything.com's partners, of course.] If the user clicks on the button, use the Confirm method to make sure that he really wants to leave the current page and jump to another URL. Use the IF statement to jump to amazon (or another destination that you set) if he chooses "OK" in the Confirm box. The 'location.href= ' command can be used to point the browser to a different URL.

In addition, add 2 buttons that return the user to a previous URL that she had visited. One button should return the user to the URL of the page she visited 2 pages ago; the other should go back 3 pages. Label the buttons appropriately.

If you work on your own page, implement something similar.