Judgment and circulation of JS&jQuery interactive web front end development

Article directory

4 judgment and circulation

4.1 judgement

Judge

  • Use flow chart

Judgment conditions and conditional statements

  • The code implementation of the above flow chart:
    if(score>50){           //Returns true if the condition is true
    	document.write('Congratulations!');       //Return true to execute this statement
    }else{									//Otherwise (return false)
    	document.write('Retest···');       //Execute this statement
    }
    
  • Judgment condition: usually use comparison operator to compare two values, return true or false
  • Conditional statement: Based on the concept of if (if) then (then) else (otherwise)

Comparison operators: judging conditions

  • Operator
    • ==Equal to: compare whether two values (number, string, boolean type) are the same
    • ! = not equal to: compare whether two values (number, string, boolean type) are different
    • ===Strictly equal to: compare two values and check whether the data type and value are identical
    • ! = = strictly not equal to: compare two values and check whether the data type and value are completely different
    • > greater than
    • < less than
    • >=Greater than or equal to
    • < = less than or equal to
  • Exceptions
    • No value can be "treated as" true or false
    • In short circuit judgment, the condition may not need to be executed
  • Organize comparison operators
    • Syntax: (operand comparison operand)
      • Example: (score > = pass)
    • Result of expression: a single value, here is true/false
  • Use comparison operators
    var pass=50;       //Points passed
    var score=90;      //User's score
    //Confirm whether the user passes the test
    var hasPassed= score>=pass;
    //Update the content and display the passing status on the page
    var el=document.getElementById('answer');
    el.textContent='Adoption:'+hasPassed;
    
  • Use expression:
    • Operands can also be expressions, because the result of each expression is a single value
      ((score1+score2) > (highScore1+highScore2))
      
    • Compare two expressions
      var score1=90;
      var score2=95;
      var highScore1=75;
      var highScore2=95;
      //Check if the total score is higher than the highest score so far
      //When you assign a comparison result to a variable, you do not need to wrap it in the outermost level of parentheses
      var comparison = (score1+score2)>(highScore1+highScore2);
      //Show results on page
      var el=document.getElementById('answer');
      el.textContent="Get the highest new score:"+comparison;
      

Logical operators

  • Function: To compare the results of multiple comparison operators together

    • Example: three expressions, each of which will get the result of true/false
      ((5<2) && (2>=3))
      
  • Three logical operators

    • And & &: detect multiple conditions
    Expression Result
    true&&true true
    true&&false false
    false&&false false
    false&&true false
    • Or |: detect at least one condition
    Expression Result
    false||false false
    true||true true
    true||false true
    false||true true
    • Non!: operate on a single boolean variable and negate it
    Expression Result
    !false true
    !true false
  • Short circuit condition

    • Logical expressions are evaluated from left to right. If the first condition can provide enough information for the final result, it is unnecessary to calculate the subsequent conditions
    • False & & any condition: the final result is false
    • True | | any condition: the final result is true
  • Use logical operator example

    • And & &
      //Judge whether users pass the test twice
      var score1=8;
      var score2=8;
      var pass1=6;
      var pass2=6;
      //Check whether the user has passed the test twice, and save the result in the variable passBoth
      var passBoth = ((score1>=pass1)&&(score2>=pass2));
      //Create message
      var msg='Two tests passed:'+passBoth;
      //Show pass through message on page
      var el=document.getElementById('answer');
      el.textContent=msg;
      
    • Or not!
      //Judge whether the user has passed at least one test
      var score1=8;
      var score2=8;
      var pass1=6;
      var pass2=6;
      //Check whether the user has passed at least one test and save the result in the variable minPass
      var minPass = ((score1>=pass1)||(score2>=pass2));
      //Create message: if you have passed at least once, you do not need to test again
      var msg='Do you want to test again:'+!(minPass);
      //Show pass through message on page
      var el=document.getElementById('answer');
      el.textContent=msg;
      

if statement

  • Function: judge the condition. If the result of the condition is true, execute the content in the subsequent code block (if the result is false, do not execute)

    //Execute the {} inner statement if the score > = 50 condition is met
    if(score>=50){
    	congratulate();
    }
    
  • Use

    • Satisfied condition: execute {} inner statement
      var score=75;
      var msg;
      if(score>=50){
      	msg='Congratulate!';
      	msg+='Go to the next step';
      }
      var el=document.getElementById('answer');
      el.textContent=msg;
      
    • Example: code does not execute in the order it was written
      //Another version of the above code
      var score=75;
      var msg;
      
      function congratulate(){
      	msg+='Congratulate!';
      }
      
      if(score>=50){
      	congratulate();
      	msg+='Go to the next step';
      }
      var el=document.getElementById('answer');
      el.textContent=msg;
      
  • If else statement

    Conditional result content of execution
    true First code block
    false Second code block
    if(score>=50){
    	congratulate();      //Code executed when result is true
    }else{
    	encourage();        //Code executed when the result is false
    }
    
    • Use
      var score=75;
      var pass=50;
      var msg;
      //Select the message content to display based on the score
      if(score>=50){
      	msg='Congratulations!';
      }else{
      	msg='keep trying!';
      }
      var el=document.getElementById('answer');
      el.textContent=msg;
      

switch Statements

  • Effect
    • The switch statement begins with a variable called a branch value. Each case represents a condition. When the value in the condition matches the value of the variable, the subsequent statement is executed
    • break keyword: tell the JavaScript interpreter that the switch statement is finished
      switch(level){            //level: Branch value
      	case 'one':           //If the string of level is "one", execute the code in the first case
      		title='level 1';
      		break;
      	case 'two':           //If the level string is "two", execute the code in the second case
      		title='level 2';
      		break;
      	case 'three':         //If the level string is "three", execute the code in the third case
      		title='level 3';
      		break;
      	default:              //If none of the above is true, execute the code in default
      		title='test';
      		break;
      }
      
  • Use
    //Display different information according to different levels of users
    var msg;		 //The msg variable is used to hold the message to be displayed
    var level=2;     //The variable level contains a number indicating the user level, which is then used as a branch value
    
    //Display information according to different levels
    switch(level){
    	case 1:
    		msg='first!';
    		break;
    	case 2:
    		msg='second!';
    		break;
    	case 3:
    		msg='third!';
    		break;
    	default:
    		msg='good luck!';
    }
    

Compare if else and switch

  • if-else
    • else not required
    • When multiple if statements are used consecutively, even if a match has been found, each if statement will be detected by execution, so the efficiency is slow
  • switch
    • Use default to handle all cases except cases
    • If a match is found, execute the corresponding code, and then the break statement stops executing other branches. Compared with the if statement with the same function, the performance is better

Casts and weak types

  • Cast

    • Meaning: if the data type used is different from the data type required by JavaScript, JavaScript will convert the data type behind it
    • Example: ('1 '> 0), the string' 1 'will be converted to the number 1, making the expression result true
  • Weak type:

    • JavaScript is called a weakly typed language because the data type of a value can change
    • Be careful
      • When detecting whether two values are equal, it is recommended to use more strict = =! = = instead of = =! = (you can detect both values and types at the same time)
  • True and false

    • True: treated as true, can be treated as number 1 (almost all values outside the false table are true)
    value describe
    var highScore = true; Traditional Boolean value true
    var highScore = 1; Non 0 digits
    var highScore = 'carrot '; Non empty string
    var highScore = 10/5; Number operation (result is not 0)
    var highScore = 'true'; String true
    var highScore = 'false'; String false
    var highScore = '0'; String 0
    • False value: regarded as false, can be regarded as the number 0
    value describe
    var highScore = false; Traditional Boolean value false
    var highScore = 0; Number 0
    var highScore = ' '; Empty string
    var highScore = 10/'score'; NaN
    var highScore; Variable not assigned
  • Detect equality and presence

    • Objects and arrays are treated as true values, so they are often used to determine whether elements in a page exist

      if(document.getElementById('header')){
      	//Action after element found
      }else{
      	//Element not found, do other operations
      }
      
    • Consider cast

      Expression Result
      General situation false == 0 true
      false === 0 false
      false == ' ' true
      false === ' ' false
      null,undefined
      (not equal to any value except itself)
      undefined == null true
      undefined === null false
      null == false,undefined == false false
      null == 0,undefined == 0 false
      NaN
      (not equal to any value)
      NaN == null false
      NaN == NaN false
  • Short circuit value

    • Short circuit: logical operators operate from left to right, and "short circuit" (stop operation) occurs immediately when obtaining the determined result, but return the value of stop operation (not necessarily true/false)
    • Example:
      //If artist has a value, return the same value as artist
      var artist='rembrandt';
      var artistA = (artist||'unkown');
      
      //If artist is an empty string, return the string unkown
      var artist='';
      var artistA = (artist||'unkown');
      
      //If artist has no value, you can create an empty object
      var artist='';
      var artistA = (artist||{});
      
      //When the script executes to valueB of logical operation, the statement will be short circuited and execute the statement in {}
      var valueA=0var valueB=1;        //1 is considered true
      var valueC=2;
      if(valueA||valueB||valueC){
      	//Do something
      }
      
  • Recommendations for use

    • In the "or" operation, put the most likely to return true in the first position; in the "and" operation, put the most likely to return false in the first position
    • Put the most time-consuming judgment operation at the end

4.2 cycle

Three types: for, while, do while

  • for

    • Function: run a piece of code for a specific number of times, and check the cycle conditions according to the counter
      //When condition I < 10 is no longer true, the loop ends and the script continues to execute subsequent code
      for(var i=0;i<10;i++){      //() is a counter, which is used to calculate how many times the cycle needs to be carried out
      	document.write(i);      //Code executed during loop
      }
      
    • Cycle counter (take var I = 0; I < 10; I + + as an example)
      • Initialize var i=0;
      • Condition i<10;
      • Update i++
    • Use:
      • Often used to traverse items in an array
        //Save the scores of each round of tests in the array scores
        var scores=[24,32,17];
        var arrayLength=scores.length;   //Get the total number of array entries through the length property of the array
        var roundNumber=0;               //What is the current round of the recording test
        var msg='';
        var i;
        for(i=0;i<arrayLength;i++){
        	roundNumber=i+1;
        	msg+='The first'+roundNumber+'Round results:'+scores[i];
        }
        document.getElementById('answer').innerHTML=msg;
        
  • while

    • Function: it is used when you do not know how many times the code needs to be cycled. If the judgment condition is true, the corresponding code will be run repeatedly
    • Use:
      //Equation showing multiplication of 1-9 and 5, multiplication table of output: 5
      var i=1;
      var msg='';
      while(i<10){
      	msg += i+'x5='+(i*5)+'<br/>';
      	i++;
      }
      document.getElementById('answer').innerHTML=msg;
      
  • do while

    • Function: similar to the while loop, but in the do while loop, even if the condition returns false, the corresponding code will run at least once
    • Use:
//Even if i=1 does not meet the I < 1 condition, the loop will execute once, output: 1x5=5
var i=1;
var msg='';
do{
	msg += i+'x5='+(i*5)+'<br/>';
	i++;
}while(i<1);

Important concepts

  • Keyword
    • break: causes the loop to end and tells the interpreter to continue executing subsequent code outside the loop body
    • continue: tells the interpreter to execute the next iteration of the loop immediately, and then checks the condition (if it returns true, execute again)
  • Loops and arrays: loop through the same code for each entry in the array
  • Performance considerations:
    • When the browser encounters a JavaScript script, it stops all its work until the script runs
    • Any variable that can be assigned outside the loop and will not be changed during the loop should be assigned outside the loop

4.3 example

example4.html file

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>example4</title>
</head>
<body>
	<section id="page">
		<h1>This is the addition table!</h1>
		<section id="blackboard"></section>
	</section>
	<script src="example4.js"></script>
</body>
</html>

example4.js file

//Use judgment and loop to display the addition table or multiplication table of a given number
var table=3;
var operator='addition';     //Add by default
var i=1;
var msg='';

if(operator==='addition'){     //Addition table
	while(i<11){
		msg += i+'+'+table+'='+(i+table)+'<br/>';
		i++;
	}
}else{                       //Multiplication table
	while(i<11){
		msg += i+'x'+table+'='+(i*table)+'<br/>';
		i++;
	}
}

var el=document.getElementById('blackboard');
el.innerHTML=msg;

Operation result

Published 4 original articles, won praise 0, visited 31
Private letter follow

Keywords: Javascript less

Added by LuAn on Sun, 19 Jan 2020 16:33:09 +0200