Conditionals
o Up until now, our JavaScript projects have been unable to alter their behaviour spontaneously. When a page loads with our JavaScript embedded within, it is unable to do anything other than what we expect, time and again.
o The only difference we have seen is in the use of a prompt box to alter what is shown on a page. However, the page essentially does the same thing with the text provided, regardless of what text is typed in.
o What would be really handy would be to give JavaScript a mechanism to make decisions. For example, if we provided a prompt box asking the visitor for their name, it might be nice to have a list of “known names” that could be greeted differently from any other visitors to the site.
o Conditional statements give us that ability, and are key to working with JavaScript.
o A conditional statement consists of three parts:
o A test (often with a comparison operator, or comparator) to see if a given condition is true or false.
o A block of code that is performed if and only if the condition is true.
o An optional block of code that is performed if and only if the condition is false.
These three parts are represented in JavaScript as follows:
if ( conditional_test )
{
JavaScript statement;
JavaScript statement;
JavaScript statement;
… } else
{
JavaScript statement;
JavaScript statement;
JavaScript statement;
…
}
o Everything from the first closing curly bracket (or brace) is optional, so the following is also a valid conditional prototype:
if ( conditional_test )
{
JavaScript statement;
JavaScript statement;
JavaScript statement;
… }
o In this case, if the conditional_test does not return true, nothing happens.
o An example of complete conditional statement is as follows:
if ( var_1 > var_2 )
{
alert(“Variable 1 is greater”);
} else {
alert(“Variable 2 is greater”);
}
Note that the above condition is not necessarily always correct. Consider the case where var_1 is equal to var_2.
In that case, the above code will produce the message that “Variable 2 is greater”, since var_1 > var_2 returns false. In this case, we want to add an additional condition to the else branch of code:
if ( var_1 > var_2 )
{
alert(“Variable 1 is greater”);
} else
if ( var_1 < var_2 )
{
alert(“Variable 2 is greater”);
}
o In this case, equality will produce no output, as neither of the conditions will return true. For completeness, we could add a final else branch to the statement:
if ( var_1 > var_2 )
{
alert(“Variable 1 is greater”);
} else
if ( var_1 < var_2 )
{
alert(“Variable 2 is greater”);
}
else {
alert(“The variables are equal”);
}
o Note that in this case, we don’t have to check for equality in the final branch, as if var_1 is neither greater than nor less than var_2, then – numerically at least – the two must be equal.
o We can continue adding as many else if statements as required to this stack.
If you only have one statement following your conditional test, the braces may be omitted:
if ( var_1 > var_2 )
alert(“Variable 2 is greater”);
However, if you later want to add further statements to this conditional branch, you will have to add braces around the block, and this can lead to confusion. It is recommended that you use braces to enclose all blocks of conditional code. o Consider the following block of code:
if ( var_1 > 4 ) {
var_2 = var_1;
}
else { var_2 = 4; }
o This code is rather long, but achieves comparatively little – var_2 is equal to var_1 or 4, whichever is greater. o A more compact way of writing this could be:
Recent Comments