Science, Maths & Technology
Author:

# Simple Conditional Statements

Updated Wednesday, 24th June 2015

Learn how to use an if statement in order to carry out different courses of action based on differing conditions.

This page was published over five years ago. Please be aware that due to the passage of time, the information provided on this page may be out of date or otherwise inaccurate, and any views or opinions expressed may no longer be relevant. Some technical elements such as audio-visual and interactive media may no longer work. For more detail, see our Archive and Deletion Policy

Copyright: Dreamstime When a condition can be either true or false, the if statement is used to allow the program to branch appropriately. The next activity shows you how the if statement works.

## Activity 1

The following is the JavaScript code of simple_conditional_activity_1.html, with line numbers added for reference. The reserved words have been emboldened.

(1)var bankBalance, withdrawalAmount;
(2)bankBalance = 100;
(3)withdrawalAmount = window.prompt('How much do you want to withdraw?','');
(4)withdrawalAmount = parseFloat(withdrawalAmount);
(5)if (withdrawalAmount > bankBalance)
(6){
(7)    document.write('You cannot do that!' + '<BR>');
(8)}
(9)document.write('Goodbye');

(a) Run simple_conditional_activity_1.html in your browser twice, once with an input of 50 and once with an input of 150. What does the code on lines (5) to (8) do?

(b) What do you think will happen if the input is 100? Run the program again with input 100 and see whether you were correct.

### Solution

(a) With an input of 50, the output displayed is

Goodbye

With an input of 150, there is a two-line output:

You cannot do that!

Goodbye

The scenario here is that you have only £100 in the bank (though the actual unit of currency isn't mentioned), and the bank won't allow you to overdraw.

Lines (5) to (8) comprise an if statement.

If the Boolean expression

(withdrawalAmount > bankBalance)

in line (5) evaluates to true, then the statement on line (7) between the braces (curly brackets), i.e.

document.write('You cannot do that!' + '<BR>');

is executed.

But if the Boolean expression in line (5) evaluates to false, then execution skips to the next instruction after the if statement. Finally, line (9) is executed to produce the output Goodbye.

(b) As you might have predicted, the output displayed with an input of 100 is Goodbye. There is £100 in the account, so it's OK to withdraw £100 – but there wouldn't be anything left!

Note that it's possible to have more than one statement inside the braces. For example, the body of the if statement in the bank program could have contained the two statements:

document.write('You cannot do that!' + '<BR>');

document.write('You have only £' + bankBalance + ' in your account' + '<BR>');

In general, the form of the if statement is

if (Boolean expression)
{
statement(s)
}

Note that the if statement comprises the whole of this structure: the reserved word if, the Boolean expression, and the statement(s) in the braces.

The Boolean expression which follows the reserved word if must be within parentheses. The spacing and indentation are purely to aid readability, but we recommend that you follow this layout style when writing if statements. The diagram below is a representation of the effect of how an if statement works.

We'll be going further into using if statements in a later article, but for now we recommend you have a quick look through our article on Testing Programs. It doesn't matter how many if statements you write if your program doesn't run!