Understanding Conditional Expressions | Learn How to Program Using Any Web Browser

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.

First, the JavaScript alert statement is used to display a pop-up message window (this kind of window is sometimes called a message box). The way it works is that the keyword alert is followed by parentheses. A string value within the parentheses is displayed in the message box when the alert statement is executed.

For example, when the computer processes the following:

 alert ("Happy Birthday!");

it displays a message box like that in Figure 3-1.

click to expand
Figure 3-1: The JavaScript alert statement displays a message box when executed.

Next, you need to know that HTML form elements can be used to interact with JavaScript programs. The HTML form elements can be recognized because they’re created using <INPUT> tags. The TYPE attribute of the tag determines the kind of input element it is (text box, button, and so on).

The NAME property of the element is used to reference it from within a JavaScript program. Other properties of an HTML form element—such as its VALUE—can also be manipulated programmatically.

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>

Tip

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.)

JavaScript code placed between single or double quotes and assigned to an onClick event of a button is processed when the user clicks the button.

The general form of this is as follows:

 onClick = 'JavaScript code goes here!;'

Caution

Be careful that you type onClick with a lowercase o and an uppercase C; the event keyword is case sensitive.

Note

As you’ll see a little later in this chapter, there’s an easier way to add click event code than assigning numerous JavaScript statements as one quoted string to an event.

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 + ".");'>  ...

Tip

I’ve placed the JavaScript code assigned to the onClick event between single quotes. That way, the double-quoted strings within the code still work.

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.

click to expand
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).

click to expand
Figure 3-3: When you enter new values in the HTML form, they’re evaluated using the conditional expression.

Caution

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.