Web Development Technology--javascript Syntax 4 (branch statement, Loop statement)

JavaScript If ... Else statement

conditional statements are used to perform different actions based on different conditions. conditional statements

Often when writing code, you always need to perform different actions for different decisions. You can use conditional statements in your code to accomplish this task.

In JavaScript, we can use the following conditional statements:

· if Statement -Use this statement to execute code only if the specified condition is true

· If...else Statement -executes code when the condition is true and executes other code when the condition is false

· If...else If....else Statement -Use this statement to select one of several code blocks to execute

· Switch Statement -Use this statement to select one of several code blocks to execute an IF statement

The statement executes code only if the specified condition is true. Grammar

if (condition)

{

Code that executes only if the condition is true

}

Note: use lowercase if. Using uppercase letters (IF) generates JAVASCRIPT errors! Instance

When the time is less than 20:00, a "Good day" greeting is generated:

if (time<20)

{

x= "Good Day";

}

The result of X is:

Good Day

Please note that in this syntax, there is no: else ... You have told the browser to execute the code only if the specified condition is true. If...else statements

Use the If....else statement to execute code when the condition is true, and to execute additional code when the condition is false. Grammar

if (condition)

{

Code to execute when the condition is true

}

Else

{

Code to execute when the condition is not true

}

Instance

When the time is less than 20:00, the greeting "Good Day" will be received, otherwise the greeting "Good evening" will be received.

if (time<20)

{

x= "Good Day";

}

Else

{

x= "Good evening";

}

The result of X is:

Good Day

If...else if...else Statements

Use the If....else if...else statement to select one of several code blocks to execute. Grammar

if (condition 1)

{

Code executed when condition 1 is true

}

else if (condition 2)

{

Code executed when condition 2 is true

}

Else

{

Code that executes when condition 1 and condition 2 are not true

}

Instance

If the time is less than 10:00, the greeting "Good Morning" is sent, otherwise if the time is less than 20:00, the greeting "Good Day" is sent, otherwise the greeting "Good Evening" is sent:

if (time<10)

{

X= "Good Morning";

}

else if (time<20)

{

x= "Good Day";

}

Else

{

x= "Good evening";

}

The result of X is:

Good Day

JavaScript Switch Statement

Switch statements are used to perform different actions based on different conditions. JavaScript Switch Statement

Use the switch statement to select one of several code blocks to execute. Grammar

Switch (n)

{

Case 1:

Executing code block 1

Break

Case 2:

Executing code block 2

Break

Default

N code that executes when it differs from Case 1 and 2

}

How it works: first set an 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 your code from automatically running down a case. Instance

Displays the week name for today. Please note that sunday=0, Monday=1, tuesday=2, etc.:

var day=new Date (). GetDay ();

Switch (day)

{

Case 0:

x= "Today it ' s Sunday";

Break

Case 1:

x= "Today it ' s Monday";

Break

Case 2:

x= "Today it ' s Tuesday";

Break

Case 3:

x= "Today it ' s Wednesday";

Break

Case 4:

x= "Today it ' s Thursday";

Break

Case 5:

x= "Today it ' s Friday";

Break

Case 6:

x= "Today it ' s Saturday";

Break

}

Results of x:

Today it ' s Friday

Default keyword

Use the default keyword to specify what to do when a match does not exist: instance

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

var day=new Date (). GetDay ();

Switch (day)

{

Case 6:

x= "Today it ' s Saturday";

Break

Case 0:

x= "Today it ' s Sunday";

Break

default:

  x="Looking forward to the Weekend";

}

Results of x:

Looking forward to the Weekend

JavaScript for Loop

a loop can execute a code block for a specified number of times. JavaScript Loops

If you want to run the same code over and over again, and the values are different each time, it is convenient to use loops.

We can output the values of the array like this:

document.write (Cars[0] + "<br>");

document.write (Cars[1] + "<br>");

document.write (cars[2] + "<br>");

document.write (Cars[3] + "<br>");

document.write (Cars[4] + "<br>");

document.write (Cars[5] + "<br>");

But usually we write this:

for (Var i=0;i<cars.length;i++)

{

document.write (Cars[i] + "<br>");

}

Different types of loops

JavaScript supports different types of loops:

· for-loop code block for a certain number of times

· for/in -Looping through the properties of an object

· While-loops the specified block of code when the specified condition is true

· Do/while -also loops the specified code block for loops when the specified condition is true

A For loop is a tool that you will often use when you want to create loops.

Here is the syntax for the FOR loop:

for (statement 1; Statement 2; Statement 3)

{

code block to be executed

}

Statement 1 Execute before the Loop (code block) starts

Statement 2 defining conditions for running loops (code blocks)

Statement 3 Executing an instance after a loop (code block) has been executed

for (var i=0; i<5; i++)

{

X=x + "The number is" + i + "<br>";

}

From the example above, you can see:

Statement 1 Sets the variable (var i=0) before the loop begins.

Statement 2 defines the conditions for the loop to run (I must be less than 5).

Statement 3 Adds a value (i++) after each code block has been executed. Statement 1

Typically we use statement 1 to initialize the variable (var i=0) used in the loop.

Statement 1 is optional, that is, you do not use statement 1.

You can initialize any or more of the values in statement 1: instance:

For ( var i=0,len=cars.length; i<len; i++)

{

document.write (Cars[i] + "<br>");

}

You can also omit statement 1 (such as when a value has been set before the loop starts): instance:

var i=2,len=cars.length;

for (; i<len; i++)

{

document.write (Cars[i] + "<br>");

}

Statement 2

Typically statement 2 is used to evaluate the condition of the initial variable.

Statement 2 is also optional.

If statement 2 returns True, the loop starts again, and if False is returned, the loop ends.

Tip: If you omit statement 2, you must provide a break within the loop. Otherwise, the loop cannot be stopped. This may cause the browser to crash. Read about break in the section later in this tutorial. Statement 3

Usually statement 3 increases the value of the initial variable.

Statement 3 is also optional.

Statement 3 has several uses. The increment can be negative (i--), or larger (i=i+15).

Statement 3 can also be omitted (for example, when there is a corresponding code inside the loop): instance:

var i=0,len=cars.length;

for (; i<len;)

{

document.write (Cars[i] + "<br>");

i++;

}

For/in Cycle

JavaScript for/in Statements iterate through the properties of an object: instance

var person={fname: "John", lname: "Doe", age:25};

inPerson

{

Txt=txt + person[x];

}

JavaScript while loop

loops can execute code all the time, as long as the specified condition is true. while loop

The while loop executes a code block when the specified condition is true. Grammar

while (condition)

{

Code that needs to be executed

}

Instance

The loop in this example will continue to run as long as the variable i is less than 5:

while (I<5)

{

X=x + "The number is" + i + "<br>";

i++;

}

Tip: If you forget to increase the value of the variable used in the condition, the loop never ends. This may cause the browser to crash. Do/while Cycle

The Do/while loop is a variant of the while loop. The loop executes a block of code once, before checking whether the condition is true, and then repeating the loop if the condition is true. Grammar

Do

{

Code that needs to be executed

}

while (condition);

Instance

The following example uses the Do/while loop. The loop executes at least once, even if the condition is false, and the hidden code block executes before the condition is tested:

Do

{

X=x + "The number is" + i + "<br>";

i++;

}

while (I<5);

Don't forget to increase the value of the variable used in the condition, otherwise the loop will never end! Compare for And while

If you have read the previous chapter about the for loop, you will find that the while loop is much like the for loop. For statement instance

The loop in this example uses a for loop to display all the values in the cars array:

cars=["BMW", "Volvo", "Saab", "Ford";

var i=0;

for (; Cars[i];)

{

document.write (Cars[i] + "<br>");

i++;

}

While statement instance

The loop in this example uses a while loop to display all the values in the cars array:

cars=["BMW", "Volvo", "Saab", "Ford";

var i=0;

while (Cars[i])

{

document.write (Cars[i] + "<br>");

i++;

}

JavaScript Break and Continue statements

Break statement is used to jump out of a loop.

Continue used to skip an iteration in the loop. Break statement

We have seen break statements in earlier chapters of this tutorial. It is used to jump out of a switch () statement.

The break statement can be used to jump out of a loop.

After the break statement jumps out of the loop, the code after the loop resumes (if any): instance

for (i=0;i<10;i++)

{

if (i==3)

{

break;

}

X=x + "The number is" + i + "<br>";

}

Because the IF statement has only one line of code, you can omit the curly braces:

for (i=0;i<10;i++)

{

if (i==3) break;

X=x + "The number is" + i + "<br>";

}

Continue statements

The continue statement interrupts the iteration in the loop, if the specified condition occurs, and then resumes the next iteration in the loop.

This example skips the value 3: instance

for (i=0;i<=10;i++)

{

if (i==3) continue;

X=x + "The number is" + i + "<br>";

}

JavaScript tags

As you saw in the switch statement chapter, you can tag JavaScript statements.

To mark a JavaScript statement, precede the statement with a colon:

Label

Statement

The break and continue statements are just statements that can jump out of a block of code. Grammar

Break LabelName;

Continue labelname;

Continue statements (with or without label references) can only be used in loops.

The break statement (without a label reference) can only be used in loops or switch.

With a label reference, the break statement can be used to jump out of any JAVASCRIPT code block: instance

cars=["BMW", "Volvo", "Saab", "Ford";

List

{

document.write (Cars[0] + "<br>");

document.write (Cars[1] + "<br>");

document.write (cars[2] + "<br>");

Break list;

document.write (Cars[3] + "<br>");

document.write (Cars[4] + "<br>");

document.write (Cars[5] + "<br>");

}

Web Development Technology--javascript Syntax 4 (branch statement, Loop statement)