Skip to content
Science, Maths & Technology
Author:

An Introduction to More Complex Conditionals

Updated Friday 26th June 2015

Learn how to read and use more complex conditional statements in JavaScript.

Compound Boolean Expressions

Computer program Copyrighted image Icon Copyright: Dreamstime Conditions can be more complex than those you have seen so far.

  • Boolean conditions can be negated using the Boolean operator NOT.
    • NOT is a unary Boolean operator with the following effect: if a is true, NOT a is false; if a is false, NOT a is true.
  • Compound conditions can be expressed by combining simple conditions using the Boolean operators AND and OR.
    • AND is a binary Boolean operator with the following effect: if both a and b are true, a AND b is true; otherwise (if either a or b is false), a AND b is false.
    • OR is a binary Boolean operator with the following effect: if either a or b is true, or both are true, a OR b is true; otherwise (if neither a nor b is true) a OR b is false.
  • Different sets of actions may need to depend on different conditions.

The symbol for the logical operator NOT in JavaScript is !; the symbol for OR is ||; the symbol for AND is &&. The symbol | might also look like two halves of a vertical line on your keyboard.

Question: How would you rewrite the following Boolean expressions in JavaScript notation?

(a) Either (x > 3) OR (x <= 1).
(b) Both (x > 3) AND (x <= 5)).
(c) It is not true that (x > 10).

Answer

(a) ((x > 3) || ( x <= 1))

(b) ((x > 3) && (X <= 5))

(c) !(x > 10) (An acceptable alternative is (x <= 10).)

 Question: When x is 21, will the following Boolean expressions (written in JavaScript notation) evaluate to true or false?

(a) ((x == 21) && (x > 22))
(b) !(x >= 21)
(c) ((x > 15) || (x < 12))

Answer

(a) false, since the second condition evaluates to false.
(b) false, since (x >= 21) evaluates to true.
(c) true, since the first condition evaluates to true.


Activity 1

(a) How would you modify line (3) of the code below:

(1)  var response;
(2)  response = window.prompt('Are you having a good day today?', '');
(3)  if (response == 'Yes')
(4)  {
(5)      document.write('Glad to hear it');
(6)  }
(7)  
else
(8)  {
(9)      document.write('Maybe tomorrow will be better');
(10) }
(11)     document.write('<BR>' + 'Thank you for replying');

so that an input of either Yes or Y (but nothing else) will produce an output of:

Glad to hear it
Thank you for replying.

Solution

(3)  if (response == 'Yes')

would become

(3)  if ((response == 'Yes' ) || (response == 'Y'))

(b) On the assumption that everybody aged between 5 and 16 (inclusive) must be in full-time education, how would you fill in the Boolean condition in the following code?

var age;
age = window.prompt('Please enter your age','');
if (add the missing condition)
{
    document.write('You must be in full-time education');
}

Solution

The missing condition would be:

if ((age >= 5) && (age <= 16))


Nested Conditionals

We shall now consider how we might deal with the situation where we want the computer to execute one statement if a certain condition is true; a different statement if some other condition is true; a different statement again if a third condition is true, and so on. One way of doing this is by means of nested if statements, as described in the activity below.


Activity 2

Suppose we want to write a program that prompts the user to enter the current temperature in degrees Celsius and then displays the relevant description of the temperature for that input, as indicated in the figure below.

enter temperature. If the temperature is less than or equal to zero, output: It is freezing. Less than 15, output: It is cold. Less than 25, output It is a nice day. Greater than or equal to 25, output: It is hot!

Here is our code, which is from complex_activity_2.html.

var temperature;
temperature = window.prompt('Please enter today\'s current
temperature in degrees Celsius','');
temperature = parseFloat(temperature);
if (temperature <= 0)
{
    document.write('It is freezing');
}
else
{

    if (temperature < 15)
    {
        document.write('It is cold');
    }
    else
    {

        if (temperature < 25)
        {
            document.write('It is a nice day');
        }
        else
        {

            document.write('It is hot!');
        }
    }
}

Important point of syntax:  The symbol \ in today\'s tells JavaScript that the quote is part of the string, not the string terminator. The \ is referred to as an escape character.

Notice also how we’ve indented our code to show which else goes with which if.

Question: Without running the program, would you expect the output from the above program to be for the following inputs?

(a) 25
(b) 11
(c) –2
(d) 24

Answer

(a) It is hot!
(b) It is cold
(c) It is freezing
(d) It is a nice day

The way in which nested conditionals work is shown in the figure below.

How nested if statements work. Execute statements before the first if statement. If condition 1 is true, execute condition 1. If condition 1 is false, move onto condition 2 and so on until one of the conditions is true. Execute the statement associated with the condition found to be true. If none of them are true, execute the final statement. Once this is done, move onto statements after the if statement.

Activity 3

In a certain university, a student taking an exam may obtain pass, fail, or honours. The mark required for a pass is 40 or over, and the mark required for honours is 60 or over.

(a) Download the HTML template for a new JavaScript program if you haven't already. Open the file in the text editor and write a program which prompts the student to input his or her exam mark and then displays:
Sorry, you've failed or
Congratulations, you've passed or
Many congratulations, you have honours, as appropriate.

Hint: See the previous activity for a reminder about how you can display the apostrophe in you've.

(b) How many times should you run the program in order to test it?

Solution

(a) Here is our code. (As usual, your code may be different but correct.)

var mark;
mark = window.prompt('Please enter your mark','');
mark = parseFloat(mark);
if (mark < 40)
{
    document.write('Sorry, you\'ve failed');
}
else
    if
(mark < 60)
    {
        document.write('Congratulations, you\'ve passed');
    }
    else
    {

        document.write('Many congratulations, you have honours');
    }

Note that we have not included braces round the else clause that goes with the first if. Although we suggested that it was usually a good idea to include braces for each clause, where you have nested if statements with single statements in each clause, this makes the program rather long. Remember that you can only omit the braces because the else clause is a single statement (a complete if...else construct is considered to be a single statement by JavaScript). However we have still indented our code to show the structure.

You can download our solution to this task if you wish.

(b) You should run the program to test all the possible routes through the program. There are three possible routes, one when the input is less than 40, one when it is 40 or over but less than 60, and one when it is greater than or equal to 60. To be really thorough, you should also test the boundary values in case you've made a mistake in your choice of comparison operators. In this case the boundary values are 39, 40, 41, 59, 60 and 61.

In this section, we discussed how to write a program construct, sometimes called a conditional statement, which causes a program to select between different courses of action depending on the value of a condition expressed as a Boolean expression. In JavaScript one such construct is the if statement. We used the comparison operators (<, <=, >, >=, ==, !=) and the Boolean operators NOT, OR, AND (represented in JavaScript by !, || and &&) to construct Boolean expressions.

You met compound statements in JavaScript (where several statements are grouped into a single statement using braces) and nested conditionals. We also discussed the use of comments in order to make code more readable, and the importance of testing your programs. Now it's time to learn how to program for repetition as we move onto while loops.

 

Author

Ratings

Share

Related content (tags)

Copyright information

For further information, take a look at our frequently asked questions which may give you the support you need.

Have a question?