JS-day2: Logical Branch

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')

Tags: Javascript Front-end servlet

Posted by Cheeky Chino on Wed, 17 Aug 2022 02:09:27 +0530