The if and switch Statements

• All programming languages allow you to make decisions
• They allow the program to follow a certain course of action depending on whether a particular condition is met.
• Conditions are comparisons between variables and data, such as the following:
  • Is A bigger than B?
  • Is this X equal to Y?

Decision Making Example

Has the kettle boiled? If so, then pour water into cup; otherwise, continue to wait.

• The condition in this instruction is "Has the kettle boiled?"
• It has a true or false answer. If the answer is true, we pour the water into the cup. If it isn't true, we continue to wait.
• In JavaScript, we can change the flow of the code's execution depending on whether a condition is true or false, using an if statement or a switch statement.

Comparison Operators

• We could write 23 < 45, which translates as "Is 23 less than 45?"

Assignment versus Comparison

• Don't confuse the assignment operator (=) with the comparison operator (==).
• The = operator assigns a value to a variable.
• The == operator compares the value of two variables.
• var num = 10; //num equals 10
• if (num == 10); //if num is equal to 10

The if Statement

• In English:
  "If the room temperature is more than 80 degrees Fahrenheit, then I'll turn the air conditioning on."
• In JavaScript:
  if (roomTemperature > 80) {
   roomTemperature = roomTemperature – 10;
}
• Syntax:
  if (condition) {
  some code
  some code
}

The if Statement cont.

• The code to be executed if the condition is true is placed in curly braces , {}, on the line after the condition
• If you only have 1 line of code after an if statement, curly braces are optional. For example:
  if(roomTemperature > 80)  
  roomTemperature = roomTemperature – 10;

Example if Statement

• var userChoice = window.confirm("Choose OK or Cancel");

if (userChoice == true) {
  document.write("OK");
}

if (userChoice == false) {
  document.write(“Cancel”);
}
• TryIt Editor - if statement

Try It Out – The if Statement

• ch3_examp1.htm
• <script type="text/javascript">     
var degFahren = prompt("Enter the degrees Fahrenheit",32);
var degCent;     
degCent = 5/9 * (degFahren - 32);     
document.write(degFahren + "\xB0 Fahrenheit is " + degCent +    "\xB0 centigrade<br>");    
if (degCent < 0) {   
   document.write("That's below the freezing point of water"); }     
if (degCent == 100)
    document.write("That's the boiling point of water");
</script>

Try It Out – The if Statement cont.

• if (degCent < 0) {   
   document.write("That's below the freezing point of water");
}
• This if statement has the condition that asks, "Is the value of the variable degCent less than zero?"
• If the answer is yes (true), the code inside the curly braces executes. In this case, we write a sentence to the page using document.write().
• If the answer is no (false), the processing moves on to the next line after the closing brace.

Try It Out – The if Statement cont. 2

• In the second if statement, we evaluate the condition "Is the value of variable degCent equal to 100?"
• if (degCent == 100)
   document.write("That's the boiling point of water");
• There are no braces here, so if the condition is true, the only code to execute is the first line below the if statement.

Logical Operators

• The logical operators are AND, OR, and NOT.

AND Operator

• Use if you need to check if two statements are true.
• In English:
  "If I feel cold and I have a coat, then I'll put my coat on."
• In JavaScript
  if (isCold && haveCoat){
   putOnCoat();
}
• ch3_examp2.htm

OR Operator

• Use if you need to check if at least one of two statements are true.
• In English:
  "If it is raining or if it is snowing, then I'll take an umbrella."
• In JavaScript
  if (isRaining || isSnowing){
   takeUmbrella();
}
• ch3_examp2.htm

NOT Operator

• Use if you need to check if a statement is not true.
• In English:
  "If I'm not hot, then I'll eat soup."
• In JavaScript
  if (!hot){
   eatSoup();
}
• ch3_examp2.htm

The else Statement

• Use else when you want some code to execute if a certain condition is true, and some other code to execute if it is false.
• In English:
  "If it is raining, I will take an umbrella, otherwise I will take a sun hat"
• In JavaScript
  if (isRaining){
   takeUmbrella();
}
else { takeSunHat(); }

The else if Statement

• Use else if when you want some code to execute if a certain condition is true, and some other code to execute if a different condition is true.
• In English:
  "If it is raining, I will take an umbrella, otherwise if the sun is shining, I will take a sun hat"
• In JavaScript
  if (isRaining){
   takeUmbrella();
}
else if (isSunShining){
   takeSunHat();
}

Comparing Strings

• String comparison in JavaScript is case-sensitive.
• var myName ="paul";
if (myName == "Paul")
{
   alert("myName is Paul");
}
• The alert function will not execute because "paul" and "Paul" are not the same thing in JavaScript.

The switch Statement

• Use switch when you want to check the value of a particular variable for a large number of possible values
• var myName = "Joe";
switch (myName){
case "Paul":
   //some code
   break;
case "John":
   //some code
   break;
default:
   //some code
break;
}

switch Statement Elements

• The best way to think of the switch statement is "Switch to the code where the case matches."
• The switch statement has four important elements:
  • The test expression - defines the variable we are checking
    • switch (myName)
      
      
  • The case statements - replaces the if statement
    • case "John":
      
      
  • The break statements - stop checking
  • The default statement - if nothing else matches

Try It Out – Using the switch Statement

• ch3_examp3.htm
• var secretNumber = prompt("Pick a number between 1 and 5:", "");
secretNumber = parseInt(secretNumber);

switch (secretNumber)
{
case 1:
   document.write("Too low!");
   break;

case 2:
   document.write("Too low!");
   break;
....
default:
   document.write("You did not enter a number between 1 and 5.");
   break;
}

How It Works

• First we declare the variable secretNumber and set it to the value entered by the user via the prompt box.
• We use the parseInt() function to convert the string to an integer.
  
• The expression in parentheses is simply the variable secretNumber, and it's this number that the case statements will be compared against.
• Each case statement checks one of the numbers between 1 and 5. The first simply outputs a message that the number she has entered is too low.
• We do need to add a default case in this example, since the user might enter a number that is not between 1 and 5. In this case we add a message to let the user know that there is a problem.
  

Questions?