To view the accompanying video for this lesson, please visit mhprofessional.com/nixonjavascript/.
Having reached this point in the book, you’ve actually already learned the vast majority of JavaScript. You should understand how to incorporate it into a web page; the syntax to use; handling numeric variables, strings, and arrays; using operators in expressions according to their associativity; and you’ve even learned the basics of handling program flow control using the if()
and else
keywords.
In this lesson you consolidate your knowledge of the latter so that you can precisely control the flow of program execution.
if()
StatementYou’ve already seen this statement in use a few times, but only with single-line statements, so here’s the full syntax of an if()
statement:
In this example expression can be any expression at all created using numbers, strings, variables, objects, and operators. The result of the expression must be a Boolean value that can be either true
or false
, such as if (MyVar > 7)
, and so on.
The curly braces encapsulate the code that must be executed upon the expression evaluating to true
, and there can be none, one, or many statements.
To enable you to create short and simple if()
statements without having to use braces, they can be omitted if only one statement is to be executed upon the expression being true
, like this:
if (Time < 12) document.write(′Good morning′)
If the code to execute is quite long (so that it might wrap to the following line), you may wish to start it on the following line, but if you do so, because no curly braces are being used to encapsulate the statement, it’s best to indent the statement by a few spaces or a tab, so that it clearly belongs to the if()
statement, like this:
Indeed, if you have a really long statement to execute, it can also be a good idea to split it over several lines at suitable points, like this:
Here I have split the output into three parts by breaking it into three strings, which are displayed one after the other using +
operators. I also further indented the follow-on lines to clearly indicate that they belong to the document.write()
call.
However, in my view this has become a borderline case where you might be better advised to encapsulate the statement within curly braces, because they will ensure there is no ambiguity, and you won’t have to worry about the wrapping of long lines diminishing the code readability, like this:
Some program editors will automatically indent wrapped-around lines for you (based on the indent at the start of the line), making the code even more readable, and looking like this:
In this latter case, the program editor will treat all three lines of the statement as a single line, which they are. Don’t try to format your code like this using newlines, though, as it will split it into multiple lines and cause errors—unless you also break the statement into parts, as detailed earlier.
The reason you can lay out your code in a variety of ways is that JavaScript supports the use of tabs, spaces, and newlines as whitespace
, which is ignored (other than newlines placed within a statement, which indicate a statement end and can be avoided only by splitting statements into parts).
Because of this, programmers can choose to place the curly braces wherever they like. As you have seen, when I use them, I generally place the opening and closing brace directly under the if()
statement’s first character and then indent the encapsulated statements, like this:
Other programmers, however, choose to place the opening curly brace immediately after the if()
, like this:
Both of these (and other) types of layout (such as placing the closing curly brace at the end of the final statement) are perfectly acceptable.
There are also some less-used layouts used by other programmers, but the preceding tend to be the main two. I advocate the first type because (even though it requires an extra line of code for each opening brace) it makes the opening braces indent to the level of the closing ones, so that if you have several nested statements, you can more clearly determine that you have the right number of opening and closing braces and that they are all in the right places. It also places more vertical whitespace between the expression and the statements that follow, which I find helpful. However, which system you use is entirely up to you.
else
StatementTo accompany the if()
statement, there’s also an else
keyword, which follows the same rules as if()
, except the code following an else
is executed only if the expression following the if()
evaluates to false
.
If the code comprises a single statement, it doesn’t require encapsulating in curly braces, but if it has two or more statements, braces are required. You use the else
keyword in conjunction with if()
, like this:
Because both of these keywords only include a single statement, you can safely omit the braces if you wish, like this:
Or, if there’s room, you can even move the statements up to directly follow the keywords, like this:
In this instance I opted to indent the second statement until it lined up underneath the first one. This helps make it clear what’s going on at a glance if I were to come back to this code some months later. However, how you lay out your whitespace is entirely up to you.
There is another convention regarding braces that I recommend you consider using, which is that if one of the statements in an if() … else
construct uses braces, then so should the other, even if the other one only has a single statement. You can see the difference in the following (all valid) examples, in which I think you’ll find that Example 3 (with both sets of statements in braces) is the easiest to follow:
You don’t have
to follow this advice, but it will certainly make your debugging a lot easier if you do, and any other programmers who have to maintain your code will thank you for it.
else if()
statementYou can extend the power of if() … else
even further by also incorporating else if()
statements, which provide a third option to the original if()
statement, and which you place before the final else
statement (if there is one). The following example illustrates how you might use this keyword:
As with other examples, I have used whitespace liberally in the preceding code to line the statements up and make them easier to follow.
The else if()
statement follows the same rules as the if()
and else
statements with regard to using curly braces to encapsulate multiple statements (but not requiring them for single statements). However, I give the same recommendation as I did earlier that if even one of the parts of an if() … else
if() … else
structure uses braces, then I advise you to use braces for all parts.
Of course, you don’t have to use a concluding else
after an if() … else if()
construct if you don’t want it. For example, if you don’t need to deal with the case of a zero value (perhaps because one is not possible in the code you have written), you might simply use the following:
The purpose of the else
keyword is as a catch-all, to trap all possible values that remain and execute the statement(s) attached to it if none of the preceding statements in the clause are true
.
switch()
StatementThe if()
, else if()
, and else
statements are very powerful and comprise much of JavaScript programming. But they are not the most efficient method of controlling program flow when there are more than three options to consider. For example, imagine there’s an input field on the web page with the following string values from which the user must select their age range:
• 0–1
• 2–3
• 4–6
• 7–12
• 13–17
• 18+
Now here’s some code you might use to process the value returned by the input, as shown in Figure 10-1, in which a value of 13-17
has been preselected for the string variable Age
(using the if_else.htm file from the companion archive):
FIGURE 10-1 Using multiple else if()
statements
Don’t you think all those repeated else if()
statements are rather cumbersome, and the code feels somewhat heavier than it could be?
Well, the answer is to restructure code such as this using a switch()
statement in conjunction with the case
and break
keywords, like this (as shown in Figure 10-2, created using the switch.htm file from the companion archive, and in which the string Age
is preassigned the value 4-6
):
FIGURE 10-2 Using a switch()
statement
I’m sure you’ll agree that using switch()
statements is a lot clearer than a set of sprawling else if()
s. To use one, simply place the expression or variable to be tested in the parentheses following the switch
keyword, then within a pair of curly braces (which are required), provide a number of case
statements and an optional default
statement.
Following each case
keyword, place one possible value that the switch
variable or expression might have. In this example, Age
can only have string values, but you can equally test for digits or floating point numbers too. After the possible value, place a colon followed by the statements to execute if the value matches the switch
variable or expression. In this example, it’s one or more document.write()
statements.
Note how no curly braces are required to contain multiple statements. This is because once the code following the colon starts executing, it will keep on going, executing statement after statement (ignoring the following case
tests), until break
or the closing curly brace at the end of the switch()
statement is encountered.
break
KeywordBecause program flow will continue to the end of a switch()
statement (executing all the remaining statements regardless of any following case
keywords), you must mark the end of a sequence of statements to be executed with a break
keyword. This causes program flow to jump to just after the closing brace of the switch()
statement.
You will also encounter the break
keyword in Lesson 11 where it is used to break to the end of looping structures of code.
default
KeywordIn the same way that the else
keyword is a catch-all device for dealing with any other values not caught by if()
or else if()
statements, you can use the default
keyword within a switch()
statement to catch any values not matched by the case
statements.
In the previous example, because all possible values for Age
are tested for except for 18+
, then if none of the case statements match, Age
must contain the value 18+
. Therefore, the default
statement is triggered and the statement following it writes the string You are an adult.
to the browser.
There is no break
keyword after the default
option in the preceding example because it is the last statement in the switch()
statement, and therefore a break
keyword is superfluous in this position, as it would only add extra, unnecessary code. There is, however, nothing stopping you from placing the default
statement anywhere within a switch()
statement (even at the start), but if you do so, you must add a break
keyword after the statements it executes, or program flow will fall through to the following statements, rather than to the end of the switch()
statement. However, I recommend that you stick with convention and make default
the last clause.
Sometimes you may not want to use the break
keyword because you wish to allow cases to fall through to other cases. For example, consider the case of wanting to choose the correct language to display on a multinational website. Using a simple input field (or even a geolocation program if you want to be really smart), you could return a string containing the user’s country name, for example, perhaps out of the following:
• Australia
• Brazil
• France
• Germany
• Portugal
• Spain
• UK
• USA
Then code to process the country name in the variable Country
to a language to use in the variable Language
might look like this:
Only after the variable Language
has been assigned its value is the break
keyword used. Therefore, if any of the countries Australia
, UK
, or USA
are selected, Language
is set to English
, which is also selected (because the default
keyword is included within the fall-through group of cases) for any other value not tested for by the cases in the switch()
statement.
A fall-through also occurs for Brazil
and Portugal
, both of which countries speak Portuguese
, but the remaining countries have different languages and don’t use any case
fall-throughs. Note that there is no break
keyword after the final statement, as it is not needed because the end of the switch()
has already been reached.
Yes, I know that many people in the United States speak Spanish, but this is simply an example to explain fall-through. If you wanted to cater for that option, though, you could have two country names for the United States: USA English
and USA Spanish
, and then simply add a fall-through to the ′Spain′
case—while you are at it, you could also add Canada English
and Canada French
in a similar fashion to cater for its two languages, and so on.
This lesson concludes everything you need to know to write basic JavaScript programs. You can now handle data in various ways, including variables and arrays; you are able to use complex operators and expressions; and now you can direct the flow of your programs. In the next lesson, therefore, we start to look at more advanced aspects of JavaScript, beginning with putting together various types of looping constructs.
Using these questions, test how much you have learned in this lesson. If you don’t know an answer, go back and reread the relevant section until your knowledge is complete. You can find the answers in Appendix A.
1. With which statement can you have JavaScript do something if an expression is true
?
2. When are curly braces not required in an if()
statement?
3. How can you provide a second option to an if()
statement when an expression is false
?
4. How can you extend if()
statements to make further tests?
5. When you wish to test an expression or variable for a range of values and act differently on each, what would be the best statement to use?
6. What keyword is used in switch()
statements to test a value?
7. What character must follow the value for a case being tested in a switch()
statement?
8. In a switch()
statement, which keyword processes all remaining values not specifically handled?
9. In a switch()
statement, what keyword is used to jump out of the switch()
to the following statement?
10. Are braces required to enclose the instructions for each case of a switch()
statement?
3.128.197.183