Now we will explore Java Script's conditional statements. That is, if and switch statements. In Java Script, if statements are set up like so:
if (condition) } else { execute when false
|
switch (argument) { case executed when true } |
<html>
<head>
<title>Conditionals</title>
</head>
<body>
<Script Language = "JavaScript">
var choice = prompt("Do you like the page title we have
chosen?");
choice = choice.toUpperCase();
if (choice == "YES")
{
alert("Very well! I will leave it be.")
} else {
var newTitle = prompt("OK. What would you like for a page title?");
document.title = newTitle;
}
</script>
</body>
</html>
Test and run this script in a web browser.
Assume Line 1 is the first line of the script (which is var choice = prompt("Do you like the page title we have
chosen?");)
Line 1: Prompt user for entry and store what is entered in prompt dialog in variable choice.
Line 2: Set choice equal to choice with uppercase letters. The method toUpperCase() converts all characters
of a string to uppercase characters. By doing this, we can avoid having to test several conditions that may occur (such as "Yes",
"yEs", "NO", "nO" etc.).
Line 3: Check to see if variable choice is equal to YES.
The operator "==" means is equal to, so line 3 says if choice is equal to YES. This operator (==) is called a logical operator. It is used to test values. The operator "=" simply sets a value. X = 5 set X to 5. Other logical operators are "||", which means or, and "&&", which means and.
Line 4 is simply the brace to begin execution of commands when statement is true.
Line 5: Displays alert with text indicated between quotes.
Line 6: Else (when statement is false, or when choice does not equal Yes).
Line 7: Prompt user with prompt shown between parenthesis and store the user's entry in the variable newTitle.
Line 8: Set the document's title property to the variable newTitle. The title property takes a
string value (text value), and the variable newTitle is a string because it stores the text entered by the user in the prompt dialog.
Line 9 is simply the required closing brace for the else block (commands when the test is false) of the if
statement.
Now that we have used the if selection structure, I will show you how to use the switch selection structure.
<html>
<head>
<title>Conditionals</title>
</head>
<body>
<Script Language = "JavaScript">
</script>
</body>
</html>
var choice = prompt("Choose a condition 1 through 3:");
switch (choice)
{
case "1":
document.title = "First Condition";|
break;
case "2":
document.write("I chose the second condition");
break;
case "3":
alert("This is the third condition");
break;
default:
alert("You chose an invalid condition!");
break;
} // end switch selection
Line 1: Declare variable choice and set it to whatever the user enters in the prompt dialog.
Line 3: Begin switch selection for value choice.
Line 5: Test to see if "1" was entered for variable choice.
Line 6: When condition on line 5 is true (user entered 1), set the document's title to
"First Condition".
Line 7: End the switch selection structure.
Sometimes, a condition can be true in another part of the switch selection structure. If we do not enter break; in this selection structure, other blocks within the switch block will execute as well. For instance, if we take the break out of the part for case "2", the statements under case 2 will execute, but so will the statements for case 3. The script will stop at case 3 only because their is a block their. The case statement does not prevent the interpreter to stop finishing its compilation of the rest of the code in the document. By entering break, this forces the interpreter to exit the switch selection structure.
The lines with case 2 and case 3 simply execute the statements beneath them when choice is 2 or 3. The default case is when not of the cases were tested true. In this example, if the user does not enter 1, 2, or 3, the default case is executed.
I hope this introduction on Java Script's conditional statements went smoothly for you. We can move on now to Page 4.