No.7 Conditional Statements

Inputting Data

Humans operate a computer by using a mouse or keyboard.  This is called Input.  In contrast, a computer communicates with humans by displaying texts or images, and makes sounds from speakers.  This is called Output.  We will learn about the relationship of the structure of computers and input/output on the 10th lesson.

Inputting Strings

Up to now we’ve used mouse click as an input. Now, let’s try using the keyboard for input.  Make a textbox(as we learned on the 2nd lesson)、and JavaScript will be able to read the input.

Exercise 07-1(☆)
  1. Make ex07-1.html and fill in the following.
  2. Edit ex07-1.js and fill in the following.
  3. Type in your name in the textbox and press the button.

To read values input by the user, we use document.getElementById().value.  This is different from document.getElementById().innerHTML , which we learned in the last lesson, as follows:

innerHTML
The content of the HTML element (tags excluded).
value
In case of textbox, the data input by the user. In case of other input elements such as buttons and checkboxes, it has different meaning.
Exercise 07-2(☆☆☆)

Make a new textbox for entering a word replacing “Hello”.  For instance when “Yo” is entered in this textbox and “Taro” is entered in the “Who?” textbox, the result displayed when clicking the button should be “Yo, Taro!”.

Entering Numeric Values

Numbers entered in a textbox is handled as a string literal.  When we want to calculate these numbers, we must use Number() (which we learned in the 5th lesson) and convert them into numeric values.  

Exercise 07-3(☆☆)
  1. Make ex07-3.html and fill in the following.
  2. Make ex07-3.js and fill in the following.
  3. Fill in a random number in the text box and click the calculate button.
  4. Fix the program.
Exercise 07-4(☆☆☆☆)

Make a program that calculates your BMI when you enter your height and weight.

if Statements and Conditional Expressions

How to write an if Statement

Programs are executed from up to down, but there is a method to write multiple commands and execute ones only matching the situation.  This is called a conditional expression, and in JavaScript the if statement is used.

Exercise 07-5(☆)
  1. Make ex07-5.html and fill in the following.
  2. Make ex07-5.js and fill in the following(note that there are two equal marks next to each other)
  3. Type in the correct answer and click the button.  Try entering a wrong answer as well.

There are two ways in writing a if statement.

  • Execute the command when the condition is true, and do nothing when false.
    ifblock
  • Execute a command when the condition is true, and execute another when false.
    ifelseblock

The two ways are written as the following, respectively.

  • if ( condition ) { process }
  • if ( condition ) { process1 } else { process2 }
Exercise 07-6(☆☆)

Edit the previous file so the message “Wrong!” appears when the answer is incorrect.

Relational Operators

In a program, numerical equality and inequalities are handled as operators as well as + - * /.  To operate a  numerical equality and inequality, we use operators such as < > ==

These operators return booleans(true and false) as a result.

Example 07-7(☆☆)
  1. Execute the following with console.
    • 2==2
    • 2==3
    • 2!=2
    • 2!=3
    • 2<2
    • 2<=2
    • 2<=3
    • '2'==2
    • '2'===2
  2. Edit Exercise07-6 and change the conditional statement from true to false, and replace “Correct” and “Wrong ” with each other.

The reason why we use two equal marks is because one equal mark is the command that assigns a value to the variable.

Usually booleans are specified for the condition of an if statement, but it is not an error to write values of other types.  In that case, the value is converted into a boolean.  An assignment of a variable can be written for the condition as well, and the assigned value will be converted to a boolean.  So, if you make the mistake of entering only one equal mark inside the condition, no errors will occur but the program will most likely go out of whack.

Exercise 07-8(☆☆☆)
  1. Fix the change you made in No.2 of Exercise 07-7 back.
  2. Erase one equal mark inside the conditional statement.
  3. Type in a wrong answer in the textbox and solve the riddle.
  4. What happended and why?
  5. Fix the program back.

Complex Comparisons

Let’s make the answer newspapers correct as well.

To do so, we must compare the input, “newspaper”, and “newspapers”.  However, a relational operator can only compare two values at once.  Let’s try comparing the three by combining two if statements.

Exercise 07-9(☆☆☆)
  1. Draw the following image on paper.  Write “If the input equals ‘newspaper’ ” instead of “Condition”, and write “display ‘correct’ ” instead of “Process 1”.
    ifelseblock
  2. Erase “Process 2” and draw the same diagram above in that place.  What should we write inside Condition, Process 1, and Process 2?
  3. Edit the riddle program to match the diagram.
    • It is annoying to write document.getElementById('answer').value each time, so you should assign a value to a variable first, and use the variable later.
    • When the input does not match ‘newspaper’, another if statement should be used to compare the input and ‘newspapers’.

If there is only one statement inside the true part or the false part of an if statement, the {    } can be taken off. So, when another single if statemnet comes after else, we usually write else if as the following.

    if (condition1) {
       process1
    } else if (condition2) {
       process2
    } else if (condition3) {
       process3
    } .....
       .....
    } else {
       process_n
    }
Exercise 07-10(☆☆☆☆)

Edit the program from Exercise  07-4 so that the following messages show up.

  1. When the BMI is under 18.5, “underweight”
  2. When the BMI is over 25, “Obese”
  3. When the BMI is in between, “Normal”
  • The first if statement should judge whether the BMI is under 18.5.
  • If the BMI is over 18.5, the second should judge whether its under 25.

Logical Operators

Another method when comparing three values is using logical operators.

This method is based on logic. Logic is the base of many subjects.

(Download PPT)

The following logical operators are used in JavaScript: &&(AND), ||(OR), !(NOT)

Exercise 07-11(☆☆)
  1. Write a conditional expression of the following.
    • x is larger than 1 and smaller than 10
    • x is equal to either ‘newspaper’ or ‘newspapers’.
  2. Fix the riddle program so that only one if statement is used.

Exercise 07-12(☆☆☆☆☆)

Look at the Reference below and make a program that determines if an year is a leap year or normal year.

Points to Check
  • What is the difference between document.getElementById().innerHTML and document.getElementById().value?
  • What two methods are there when writing a if statement?
  • Which operator is used to determine whether two values are equal?
  • What data type is returned from a relational operator?
  • How can we compare three values at once?