2 JavaScript Statements and Loop

JavaScript Statements and Loop
 Conditional Statements
Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
 Use if to specify a block of code to be executed, if a specified condition is true

 Use else to specify a block of code to be executed, if the same condition is false
 Use else if to specify a new condition to test, if the first condition is false
 Use switch to specify many alternative blocks of code to be executed
The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
if (condition) {
// block of code to be executed if the condition is true
}
The else Statement

Use the else statement to specify a block of code to be executed if the condition is false.
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
The else if Statement

Use the else if statement to specify a new condition if the first condition is false.
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false
and condition2 is true
} else {
// block of code to be executed if the condition1 is false
and condition2 is false
}
example-
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id="demo"></p>
<script>
const time = new Date().getHours();
let greeting;
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
This is how it works:
 The switch expression is evaluated once.

 The value of the expression is compared with the values of each
case.
 If there is a match, the associated block of code is executed.
 If there is no match, the default code block is executed.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>
JavaScript Loops
Loops can execute a block of code a number of times.
Loops are handy, if you want to run the same code over and over again, each time with a different value.
Often this is the case when working with arrays:
Instead of writing:
text += cars[0] + "<br>";
You can write:

for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Different Kinds of Loops
JavaScript supports different kinds of loops:
 for - loops through a block of code a number of times

 for/in - loops through the properties of an object
 for/of - loops through the values of an iterable object
 while - loops through a block of code while a specified condition is
true
 do/while - also loops through a block of code while a specified
condition is true
The For Loop

The for loop has the following syntax:
for (statement 1; statement 2; statement 3) {

// code block to be executed
}
Statement 1 is executed (one time) before the execution of the code block.
Statement 2 defines the condition for executing the code block.
Statement 3 is executed (every time) after the code block has been executed.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
The For In Loop

The JavaScript for in statement loops through the properties of an
Object:
for (key in object) {

}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For In Loop</h2>
<p>The for in statement loops through the properties of an object:</p>
<p id="demo"></p>
<script>
const person = {fname:"John", lname:"Doe", age:25};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Example Explained
 The for in loop iterates over a person object
 Each iteration returns a key (x)
 The key is used to access the value of the key
 The value of the key is person[x]
The For Of Loop

The JavaScript for of statement loops through the values of an iterable
object.
It lets you loop over iterable data structures such as Arrays, Strings,
Maps, NodeLists, and more:
for (variable of iterable) {

}
variable - For every iteration the value of the next property is assigned
to the variable. Variable can be declared with const, let, or var.
iterable - An object that has iterable properties.
Browser Support
For/of was added to JavaScript in 2015 (ES6)
Safari 7 was the first browser to support for of:
Chrome Edge 12 Firefox 51 Safari Opera

38 7 25
Oct Jul 2015 Oct 2016 Oct Oct

2014 2013 2014
For/of is not supported in Internet Explorer.
The While Loop

The while loop loops through a block of code as long as a specified
condition is true.
while (condition) {
}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript While Loop</h2>
<p id="demo"></p>
<script>
let text = "";
let i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
</script>
</body>
</html>
The Do While Loop

The do while loop is a variant of the while loop. This loop will execute the code block once, before
checking if the condition is true, then it will repeat the loop as long as the condition is true .
do {
}
while (condition);
The example below uses a do while loop. The loop will always be executed at least once, even if the
condition is false, because the code block is executed before the condition is tested:
<html>
<body>
<h2>JavaScript Do While Loop</h2>
<p id="demo"></p>
<script>
let text = ""
let i = 0;
do {
text += "<br>The number is " + i;
i++;}
while (i < 10);
</script>
</body>
</html>
Do not forget to increase the variable used in the condition, otherwise the loop will never end!

2 JavaScript Statements and Loop

Uploaded by

Copyright:

Available Formats

2 JavaScript Statements and Loop

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2 JavaScript Statements and Loop

Uploaded by

Copyright:

Available Formats

JavaScript Statements and Loop

In JavaScript we have the following conditional statements:

 Use if to specify a block of code to be executed, if a specified condition is true

The else Statement

The else if Statement

<p>A time-based greeting:</p>

const time = new Date().getHours();

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

greeting = "Good evening";

The JavaScript Switch Statement

This is how it works:

 The switch expression is evaluated once.

switch (new Date().getDay()) {

document.getElementById("demo").innerHTML = "Today is " + day;

You can write:

Different Kinds of Loops

JavaScript supports different kinds of loops:

 for - loops through a block of code a number of times

The For Loop

for (statement 1; statement 2; statement 3) {

Statement 2 defines the condition for executing the code block.

let text = "";

for (let i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";

The For In Loop

for (key in object) {

<p>The for in statement loops through the properties of an object:</p>

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

let txt = "";

for (let x in person) {

txt += person[x] + " ";

The For Of Loop

for (variable of iterable) {

iterable - An object that has iterable properties.

Safari 7 was the first browser to support for of:

Chrome Edge 12 Firefox 51 Safari Opera

Oct Jul 2015 Oct 2016 Oct Oct

For/of is not supported in Internet Explorer.

The While Loop

let text = "";

while (i < 10) {

text += "<br>The number is " + i;

The Do While Loop

<h2>JavaScript Do While Loop</h2>

text += "<br>The number is " + i;

while (i < 10);

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.