Branch structure

• Our js code is executed sequentially (top to bottom)

• Logical branching is deciding whether or not to execute some code based on the conditions we set

IF conditional branching

if statement

• An if statement determines whether code is executed or not

• Syntax: if (condition) {code to execute}

• Determine whether the code in {} is executed by the conditions in ()

  // Execute the code inside {} when the condition is true
  if (true) {
    alert('Because the condition is true，I will execute')
  }
  ​
  // Do not execute code inside {} when the condition is false
  if (false) {
      alert('Because the condition is false，I will not execute')    
  }

if else statement

• Decide which {} code to execute by the if condition

• Syntax: if (condition) {execute when condition is true} else {execute when condition is false}

• One of the two {} codes must execute

  // When the condition is true, the {} following if is executed 
  if (true) {
    alert('Because the condition is true，I will execute')
  } else {
    alert('Because the condition is true，I will not execute')
  }
  ​
  // When the condition is false, the {} following the else is executed
  if (false) {
    alert('Because the condition is false，I will not execute')
  } else {
    alert('Because the condition is false，I will execute')
  }

if else if statement

• You can use if and else if to set multiple conditions for judgment

• Syntax: if (condition 1) {when condition 1 is true} else if (condition 2) {when condition 2 is true}

• Conditions will be judged from scratch

  • If the first condition is true, then the following {} will be executed

  • If the first condition is false, then the second condition is determined, and so on

• Multiple {}, only one will be executed, once one condition is true, the following will no longer be judged

  // The first condition is true and the second is false, which will eventually print "I'm Snippet 1"
  if (true) {
    alert('I'm snippet 1')
  } else if (false) {
      alert('I'm snippet 2')           
  }
  ​
  // The first condition is true and the second is true, which will eventually print "I'm Snippet 1"
  // Because as long as one of the preceding conditions is met, judgment will not continue
  if (true) {
    alert('I'm snippet 1')
  } else if (true) {
    alert('I'm snippet 2')
  }
  ​
  // The first is false, the second is true, and eventually prints "I'm Snippet 2"
  // Continue to judge backwards only if the previous condition is false
  if (false) {
    alert('I'm snippet 1')
  } else if (true) {
  alert('I'm snippet 2')
  }
  ​
  // The first condition is false, the second is false, and nothing will happen in the end
  // Because when all conditions are false, the code inside both {} will not execute
  if (false) {
    alert('I'm snippet 1')
  } else if (false) {
    alert('I'm snippet 2')
  }

if else if...else statement

• Consistent with previous if else if... Except that {} following the last else is executed when all conditions are not met

  // The first condition is false, the second is false, and you end up printing "I'm Snippet 3"
  // The code in {} after else is executed only if all the preceding conditions are not met
  // As long as one of the preceding conditions is met, the latter will not execute
  if (false) {
    alert('I'm snippet 1')
  } else if (false) {
    alert('I'm snippet 2')
  } else {
    alert('I'm snippet 3')
  }

SWITCH Conditional Branch Structure

• It is also one of the conditional judgment statements

• Is the judgment of a variable

• Grammar:

  switch (Variables to be judged) {
    case Situation 1:
      Case 1 Code to execute
      break
    case Situation 2:
      Case 2 Code to execute
      break
    case Situation 3:
      Case 3 Code to execute
      break
    default:
      Code executed when none of the above is satisfied
  }

  • Use when a variable equals a value

• Example 🌰: The number given by the variable shows the day of the week

  var week = 2
  switch (week) {
    case 1:
      alert('Monday')
      break
    case 2:
      alert('Tuesday')
      break
    case 3:
      alert('Wednesday')
      break
    case 4:
      alert('Thursday')
      break
    case 5:
      alert('Friday')
      break
    case 6:
      alert('Saturday')
      break
    case 7:
      alert('Sunday')
      break
    default:
      alert('Please enter a 1 ～ 7 Number between')
  }

Ternary Operations (Extensions)

• A ternary operation is a statement made up of two symbols

• A ternary operation is only a short form of an if else statement

• Syntax: Conditions? Execute when condition is true: Execute when condition is false

  var age = 18;
  age >= 18 ? alert('Adult') : alert('Juvenile')