if-else Construct & Condition Statements

Main Page | Session 11 Index | Data Types & Variables | Browser Detection

if-else Construct

An important part of any programming language is the ability to make decisions, or choices. The if-else construct is the most basic and common method of decision making.

The syntax of the if-else construct is:

if (<condition>) <action-one> else <action-two>

where:

condition
is a logical condition which evaluates to either true or false
action-one
is the set of JavaScript commands to perform if the condition evaluates true
action-two
is the set of JavaScript commands to perform if the condition evaluates false

NOTES:

if either of the actions consists of only one command, the command ends in a semi-colon and brace brackets are not required.
if an action consists of more than one line of code, the commands are enclosed within brace brackets so the interpreter knows they are all together.

valid condition tests are:

Operator	Condition
`==`	equality
`!=`	inequality
`>`	greater than
`<`	less than
`>=`	greater than or equal to
`<=`	less than or equal to

conditions must be enclosed within parentheses. ie. if (a == b)
the following logical operators may be used with conditions to create either compound conditions, or a negative test:

Logical Operator Condition

&& and

|| or

! not
if-else constructs may be nested

Logical Operator	Condition
`&&`	and
`\|\|`	or
`!`	not

Examples:

if-else Example One

This example will use the following if statement to decide if the number entered is equal to 10. If the number is equal to 10, the background colour of this document will change to green, otherwise it will change/stay red.

The function that performs this test is:

function example1() { var response=prompt("Enter a number: ",""); if (response==10) document.bgColor="#66FF66"; else document.bgColor="#FF0000"; }

Click Here to start example one.

Set background to white

if-else Example Two

This example will use the following 'if' statement to decide if the number entered is equal to 10. If the number is equal to 10, the background colour of this document will change to green, otherwise it will change/stay red. In both cases, an alert box is displayed to inform the user of the results of the test. This example illustrates the use of multiple lines of code for the action of an if-else branch.

Click Here to start example two.

Set background to white

if-else Example Three

This example will use the following 'if' statement to decide if the number entered is equal to 10 and the user entered their name. If both conditions are true, the background colour of this document will change to green, otherwise it will change/stay red. In both cases, an alert box is displayed to inform the user of the results of the test. This example illustrates the use of multiple lines of code for the action of an if-else branch and a compound condition.

Click Here to start example three.

Set background to white

Condition Statements

When the results of a condition test is to be one of two possible values, a condition statement may be more practical than an if-else construct. The condition statement has the following syntax:

(<condition>) ? <true-value> : <false-value>;

where:

condition
is a logical condition which evaluates to either true or false
true-value
is the value to return if the condition evaluates true
false-value
is the value to return if the condition evaluates false

Condition statements may be used wherever a value is required, such as in an assignment statement or a return statement. For example:

The following code sets the value of status depending upon the age entered by the user.

function example4() { var age=prompt("Enter your age: ",""); var status=(age >= 19) ? "adult" : "minor"; alert("You are a " + status); }

Click Here to start condition statement example.

Main Page | Session 11 Index | Data Types & Variables | Browser Detection