javascript-exercise-if-else

JavaScript Exercise 07: If … Else Statement

In this exercise, you will learn to do different things based on different conditions with, what we call, conditional statement: the if … else statement.

Exercise 7.1. If Statement

If statement: when the condition is true, the following code will be executed.

Syntax:

if (condition) {
  code to run;
}

Let’s look at an example, try in with JS Bin:

var math = Number( prompt("Enter your Math grade:") );
if (math > 90) {
  document.write("Well done!");
}

Run the code, and enter 97 when it prompts. You will get a “Well done!” in the Output column. Try again with a number less than 90, like 87, you should have nothing in Output.

As you can see, the code inside of the curly brackets will be executed when the condition math > 90  is true. You can have multiple lines of code to be executed as long as they are inside of the curly brackets, see below:

var math = Number( prompt("Enter your Math grade:") );
if (math > 90) {
  document.write("Well done!");
  alert("Keep up the good work!");
}

Actually, when you have only one line of code to execute, you can omit the curly brackets and write the whole if statement in one line, like the following example:

var math = Number( prompt("Enter your Math grade:") );
if (math > 90) document.write("Well done!");

But this is not recommended, it’s better always use the brackets.

Exercise 7.2. If … Else Statement

What if we want to do something when the condition is not true. Here comes the if … else statement. It’s extended from the if statement.

var math = Number( prompt("Enter your Math grade:") );
if (math > 60) {
  document.write("Passed!");
} else {
  document.write("Failed!");
}

When the condition is false, the code followed the else keyword will be executed. Same as the if statement, you can have as many lines of code as you want in the curly brackets.

Exercise 7.3. Sum and Average Example Extended

Let’s continue with the last exercise in the previous lesson.

We ask our user to enter grades of three disciplines and calculate the sum and the average. Now we want to do one more thing.

  • If the average grade is higher than or equal to 85, print “Excellent!”;
  • if between 75 and 84, print “Good!”;
  • otherwise, print “Work harder!.”

You should try to write the code by yourself this time before looking at the following code.

var english = Number( prompt("Enter your English grade:") );
var math = Number( prompt("Enter your Math grade:") );
var science = Number( prompt("Enter your History grade:") );
 
var sum = (english + math + science);
var average = sum / 3;

if (average >= 85) {
  document.write("Excellent!");
} else if (average >= 75) {
  document.write("Good!");
} else {
  document.write("Work harder!");
}

As you can see, you can put another if statement after a else statement.

Exercise 7.4. Conclusion

Conditional statements are very useful in computer programming, you will find them in every programming language. Make sure you have an clear idea about if…else statement, feel free to ask if you have any question. In the next exercise, we will introduce you another conditional statement.

Tagged with: , , ,