HTML5 Exclusive sharing: Native JavaScript Learning notes 2--program flow control

When you become a ... The landlord has come again! New issue of JS learning Note 2--Program flow control updated!

When you become a ... The landlord has come again! New issue of JS learning Note 2--Program flow control updated!

Want a button to get all the JS learning notes can give the landlord message Oh!

JS The program control statements in

There are three types of execution structures for common programs:

　　1. Sequential structure

　　2. Branching structure

　　3. cyclic structure

Sequential structure: The program executes from the first line and executes sequentially to the last line

Branching structure: Like a fork, you have to choose and choose only one of the roads to continue, and you cannot execute code in two branches at the same time.

We can use the following three ways to implement the branch structure of the program

　　 if (condition) {expression}

　　 switch (variable) case expression; Break

　　 expression 1? Expression 2: Expression 33-mesh operation

　　If statement:

We can implement a branching structure through if. The IF statement requires two necessary content: Judging conditions and branching statements. Where the judging condition can only return a Boolean value, if the judging condition is true, then execute branch one, otherwise execute sub-two or skip if statement want to continue execution behind.

Dual-branch structure

　　Example of an IF statement:
650) this.width=650; "Src=" http://img.blog.csdn.net/20160612110303780?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

The above example is a two-branch structure that executes the code in the first curly brace if the conditional expression in the parentheses is true, otherwise the code in the second curly brace is executed. Where the Else statement is optional, if there is no else statement, the judgment condition is not set to skip the branch and proceed backwards. Note: When the code in the branch is only one line, the curly braces can be omitted, but in order to avoid the confusion of the program and not easy to read, it is best not to omit it.

　　Multi-branch structure

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612110358907?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

We can use nested If...else to implement multi-branch structure, please note that if...else ... The execution characteristic of the statement is two select one, in multiple if...else ... Statement, if a condition is true, subsequent judgments are no longer continued.

　　Switch statement

In front of our learning branch structure is to learn if...else ... This structure, we can implement the multi-branch structure through the nesting of the IF statement, below will learn a more simple multi-branch statement: Switch...case ...

Grammar:

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612110456751?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

First, set the expression n (usually a variable). The value of the subsequent expression is compared to the value of each case in the structure. If there is a match, the code block associated with the case is executed. Use break to prevent the code from automatically running down a case, and if there is no break statement after the scenario, the program will fall into the next one until the first break is encountered or the case of the full part is stopped.

Exercise: Judging today is the day of the week, and the box shows

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612110601502?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

Default keyword

You may have noticed that the syntax structure above is a default, a keyword. The primary task of this keyword is to execute the default branch when the last else branch in the IF statement does not match the conditions in front.

Example: If today is not Saturday or Sunday, the default message will be output:

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612110715943?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

For loop

　　What is a loop?

The cycle of life is everywhere, such as: The clock keeps turning, the sun is constantly dongsheng West, the students run around to run the circle and so on. Repeated to do one thing, is the cycle, if the cycle does not stop the condition, then become a dead cycle, if the cycle reached the stop condition, the cycle ends, such as: clock no electricity, clock stop movement, students run enough of a certain number of laps, no longer run.

　　When will we use the loop?

If the 1+2+3 is calculated, how should the program be represented?

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612110814569?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

What if we add from 11 to 10000? In this case, to write an addition expression is wasteful, we observe: The task is to repeat the addition operation, the only change is addend, so when the program needs to repeat a task, we can use the loop to complete the task for us.

JavaScript has a variety of looping statements, and today we are learning for loops.

　　Syntax structure for A for loop

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612110914659?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

Let's analyze the loop structure:

　　 Loop Increment: Define a variable here and assign the initial value (typically 0 or 1)

　　 Loop Condition: This is a conditional expression that is used to determine whether the loop condition satisfies

　　 the loop is over. Excess self plus one: here the loop increment defined in the front adds an action

　　 Loop Body: If the loop condition is established, the loop body is executed repeatedly, and the loop condition is not established.

This for loop only executes in the following order:

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612111056207?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

1. Define a loop increment

　　2. determine if the cycle conditions are true

　　3. set up the execution loop body/Not established then skip the loop body, continue to execute backwards

　　4. loop increment self plus One

　　5. Judging whether the cyclic condition is established since the addition of one

　　6. set up the execution loop body/Not established then skip the loop body, continue to execute backwards

　　7 .....

　　8 .....

　　9 .....

　　 When a loop condition is encountered, end the loop and continue executing the code backwards

Note: We must have cyclic conditions when writing loops, otherwise the program will go into a dead loop.

Example: 1+2+3+ ... +1000:

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612111147823?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

Let's analyze the control conditions for the next for loop:

　　 I=1 This is the initial condition, the variable i is set to 1;

　　 i<=10000 This is the judgment condition, when satisfies the circulation, does not satisfy on exits the circulation;

　　 i++ This is the increment condition after each loop, because the variable i is incremented by 1 after each cycle, it will eventually exit the loop after several cycles without satisfying the judging condition i<=10000.

　　Loop out statement

　　Break: Jump out of the loop and continue backwards

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612111249942?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

The above code starts with output 6 and no longer outputs "I'm executing after continue," but the numbers continue to output.

　　Expansion: for...in cycle

A variant of the For loop is a for ... in loop, which loops through all the properties of an object in turn:

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612111411052?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

　　The Checked property of input

In the study of HTML is we all know: after the input tag type is set to a checkbox, it is a check box, if the Checked property is true, then the marquee is selected, if the Checked property is set to False, the marquee is unchecked. Below, we use JS to set the state of the marquee.

Example code: By clicking the toggle button, the checkbox is selected to uncheck the effect

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612111514286?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

Exercise: Implement a "Select All", "reverse" effect for similar shopping carts

The sample code is as follows:

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612111643068?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612111808534?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

　　While loop

The For loop is useful for the initial and end conditions of a known loop. The For loop, which ignores the conditions above, makes it easier to see the logic of the loop, which is better with a while loop.

While Loop has only one judgment condition, the condition satisfies, then loops continuously, the condition does not satisfy the exit loop. For example, we want to calculate the sum of all the odd numbers within 100, which can be implemented with a while loop:

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612111906332?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

The loop internal variable is n continuously self-reducing until -1 it becomes, and the while condition is no longer satisfied, and the loop exits.

　　Do ... while loop

　　do { ... } while()Loop, the only difference between it and the while loop is that it does not judge the condition at the beginning of each cycle, but the condition when each loop is completed:

650) this.width=650; "Src=" http://img.blog.csdn.net/20160612112007148?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

Use the do {...} while () loop to be careful, the loop is performed at least 1 times, and the for and while loops may not execute at once.

Want to HTML5, iOS notes, videos can find lemon yo! Also hope that the vast number of Bo friends to communicate correct!

This article is from the "I Am Lemon" blog, please be sure to keep this source http://3467426915.blog.51cto.com/11692799/1788145

HTML5 Exclusive sharing: Native JavaScript Learning notes 2--program flow control