3. Conditional statements „if“

Conditional statements „if“

For a program to work, it must be able to make a decision. How? The so-called conditional statements are needed, such as if.

It is based on the fact that a given piece of code will be executed if a given condition occurs or if it is true.

Before you start: after clicking the following links with exercises and examples, select the index.js file (on the left) and press "Run" (above the code window) to generate the code.

Exercise 1

See code for exercise #1. The JavaScript file should display a paragraph with the text "I am working" inside. Nevertheless, nothing is displayed. Why? The variable ex1 is false, and we said that the if statement is executed when the condition given in parentheses is true, which means that it returns true.

Correct the code so that it works correctly.

Excercise 2

Sometimes it happens that in the case of not having fulfilled the condition we also want to trigger some action. Then what?

An else clause comes to the rescue. It works in such a way that if the if statement does not return true, the else part is performed.

It looks like this:

if (condition) {
// follow if the condition returns true
}
else {
// follow if the condition does not occur, or returns false
}

Try to correct the code from task 2 so that the code stored in else is executed.

Excercise 3

The conditions we give do not always have to be true or false. You can also save them as logical conditions (mathematical operations).

Here's an example:

2 == 2 //true
5 > 3 //true
3 - 5 == 12 //false
5 < 5 //false

Remember that the equality sign is written as "==" because the single "=" sign is used to assign a value.

See the JavaScript code of exercise #3

There is an expression there that determines whether it is time for food depending on the level of hunger (the variable hungerLevel). This variable will take a random value (in the range from 1 to 10). This means that each time you start the program, its value will be different.

Complete the code. Use logical operators to make the condition come true if the hunger level is lower than 5, and then the program will display the text "I will eat later". In the condition, use a variable instead of the numbers themselves.

Tip: If there is a number stored in the variable, we can use it the same way as numbers.

var variable = 3;
... // the rest of the code
if(variable < 10){} // returns true, because the variable stores the value 3, so 3<10

Excercise 4

And if we want to have more than two answers in response to a condition? We can write the if / else condition several times, but it would be very uncomfortable. In such case else if is used, which takes the condition in parentheses, just like the if statement, and is fulfilled only if the condition from if is not fulfilled. If there are multiple else if conditions, they are performed from top to bottom until one of them is fulfilled.

Look at the example:

if(condition) { // If the condition is not fulfilled, the code will not be executed and the program will go further
// code to perform
}
else if(condition2) { // If the condition2 is not fulfilled, the code will not be executed and the program will go further
 
//code to perform
}
else if(condition3) { // If the condition3 is met, the code will be executed and the program will ignore the rest
 
//code to perform
}
else {
//code to perform
}

Look at code for exercise #4

There is an if, which checks the given color of the traffic light and decides whether it is possible to go further. Fill it with a condition that will cause that when the variable color stores the value 'yellow', the text 'Watch out' will be displayed, and then change the value of the variable color to 'yellow' and check if everything works well. If you want to, you can test the if statement by entering different colors.

var variable = "eggplant";
variable == "eggplant"; // returns true, because "eggplant" == "eggplant"

Next chapter: Loops »