A conditional expression has one of two values based on a condition. The general syntax is as follows:
(condition) ? val1 : val2
If the condition is true, then the expression is the value of val1; if it’s false, then the expression evaluates to val2. For example, the following expression:
status = (age >= 21) ? "an adult" : "a minor";
assigns the value "an adult" to the variable status if the variable age is greater than or equal to 21; otherwise, it assigns the value "a minor".
Let’s use this conditional expression in a program in which the user enters a name and age and then clicks a button. The program evaluates the age using the conditional expression I just showed you, and it returns a message depending on whether the user is an adult or a minor.
Before I can show you how to do this, I need to explain some preliminaries.
For example, when the computer processes the following:
alert ("Happy Birthday!");
it displays a message box like that in Figure 3-1.
Listing 3-1 shows the HTML form that will be used to set up this program. It contains a text box for the user’s name (with the initial value of "Harry Potter"), a text box for the user’s age (with an initial value of "12"), and a button to click to run the program.
Listing 3.1: HTML with Form Elements
<HTML> <BODY> <FORM> Enter Your Name: <INPUT TYPE=text NAME=userName VALUE="Harry Potter"> Enter Your Age: <INPUT TYPE=text NAME=userAge VALUE="12"> <INPUT TYPE=button VALUE="Check Age"> </FORM> </BODY> </HTML>
In the interests of readability and clarity, I’ve omitted HTML table, row, and cell tags— <TABLE>, <TR>, <TD> —used to format this HTML form (you can find them in the online version of this program). This means that the figures shown may not quite match the appearance of what you get when you build the programs in this chapter (although the functionality will be the same).
Finally, if you want something to happen, you can add event code to an HTML form element, such as a button. (Chapter 8, “ Understanding Events and Event-Driven Programming,” explains events and event code in greater detail.)
The general form of this is as follows:
Be careful that you type onClick with a lowercase o and an uppercase C; the event keyword is case sensitive.
Listing 3-2 shows adding onClick code to the input button that uses the conditional expression we discussed a little while ago to check if the user is a minor or an adult. The results are then displayed in a message box using an alert statement.
Listing 3.2: Using a Conditional Expression in an onClick Event
... <INPUT TYPE=button VALUE="Check Age" onClick='var status = (userAge.value >= 21) ? "an adult" : "a minor"; alert(userName.value + " is " + status + ".");'> ...
Listing 3-3 shows the onClick code in the context of the HTML form.
Listing 3.3: HTML Form with onClick Code
<HTML> <BODY> <FORM> Enter Your Name: <INPUT TYPE=text NAME=userName VALUE="Harry Potter"> Enter Your Age: <INPUT TYPE=text NAME=userAge VALUE="12"> <INPUT TYPE=button VALUE="Check Age" onClick='var status = (userAge.value >= 21) ? "an adult" : "a minor"; alert(userName.value + " is " + status + ".");'> </FORM> </BODY> </HTML>
If you open this in your browser and click the Check Age button without entering any fresh data, you’ll see the message box shown in Figure 3-2.
Figure 3-2: The alert message box displays the results based on the default values of the HTML form elements.
On the other hand, if you enter your own data into the form—for example, someone very old such as Perenelle Flamel, a character mentioned in Harry Potter and the Sorcerer’s Stone —the conditional expression will correctly identify an adult (see Figure 3-3).
Figure 3-3: When you enter new values in the HTML form, they’re evaluated using the conditional expression.
What happens if the user enters something that’s not a number in the age text box? You can try this and find out. (The answer is that a text string converts to NaN, which stands for Not a Number, explained in Chapter 2, “ Understanding Types, Variables, and Statements.”) The point is that this program does nothing to ensure that the user input is of the right type. Doing this is called input validation, discussed further in Chapter 10, “ Error Handling and Debugging.”
Using conditional expressions is a great deal of fun, but it’s time to move on to something even more important: if statements.