Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
11 views

Group 2 - Conditional Statements and Loops in JavaScript

Uploaded by

T ENGA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Group 2 - Conditional Statements and Loops in JavaScript

Uploaded by

T ENGA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

Conditional Statements

and loop
Conditional How to use Using loops to
Statements and if/else iterate over
Loop in statements in arrays and
Javascript JavaScript objects
Conditional Statements and
loop

Group 2
Conditions and loops?
Conditional statements in JavaScript, such as
if/else statements, allow developers to execute
different blocks of code based on specific
conditions.

Loops allow developers to repeat a block of code


multiple times, based on a specified condition or
iteration count.
Conditional
Statements
01.
If statement
if (condition) {
// Code to be executed if the condition is true
}

Conditional Statements 02.


if-else statement
if (condition) {
// Code to be executed if the condition is true
}else {
// Code to be executed if the condition is false
}

03.
else-if statement
if (condition1) {
// Code to be executed if condition1 is true
} else if (condition2) {
// Code to be executed if condition2 is true
} else {
// Code to be executed if all conditions are false
}
04.
Conditional Statements
switch statement
switch (expression) {
case value1:
// Code to be executed if expression equals value1
break;
case value2:
// Code to be executed if expression equals value2
break;
...
default:
// Code to be executed if expression does not match
any case
}
LOOPs
01.
for loop
for (initialization; condition; increment/decrement) {
// Code to be executed in each iteration
}

02.
LoopS while loop
while (condition) {
// Code to be executed as long as the condition is
true
}

03.
do-while loop
do {
// Code to be executed at least once
} while (condition);
04.
break statement
for (var i = 0; i < 10; i++) {

Loop Control if (i === 5) {

}
break; // Exit the loop when i is 5

STatement }

05.
continue statement
for (var i = 0; i < 10; i++) {
if (i === 5) {
continue; // Skip the iteration when i is 5
}
}
06.
return statement

Loop Control function func() {


let sum = 0;

STatement
for (let i = 1; i <= 5; i++) {
sum += i;
}

return sum;
}

let res = func();


console.log(res); // shows 15
How to use if/else statements in JavaScript
If statement
<!DOCTYPE html>
<body>
Output:
<h2>Example <i>if statement</i></h2>
<p>This webpage will display "Good day!" if the
hour is less than 18:00:</p>
<p id="if">Good Evening!</p>

<script>
if (new Date().getHours() < 18) {
document.getElementById("if").innerHTML
= "Good day!";
}
</script>
</body>
</html>
How to use if/else statements in JavaScript
If-else statement
<!DOCTYPE html>
<body>
<h2>Example <i>if-else statement</i></h2> Output:
<p>This webpage will display "Good day!" if the hour is less than Time : 1400
18:00<br>
or else, it will display "Good evening!":</p>
<p id="if"></p>

<script>
if (new Date().getHours() < 18) {
document.getElementById("if").innerHTML = "Good day!";
} else {
document.getElementById("if").innerHTML = "Good
evening!";
}
</script>
</body>
</html>
How to use if/else statements in JavaScript
else-if statement
<!DOCTYPE html>
<body>
<h2>Example <i>if statement</i></h2>
Output:
<p>This webpage will display:<br>
"Good morning!" if it is morning,<br> Time : 1400
"Good afternoon!" if it is afternoon, and<br>
"Good evening!" if it is evening:</p>
<p id="if"></p>

<script>
if (new Date().getHours() > 6 && new Date().getHours() < 12) {
document.getElementById("if").innerHTML = "Good morning!";
} else if (new Date().getHours() > 12 && new Date().getHours()
< 18) {
document.getElementById("if").innerHTML = "Good
afternoon!";
} else {
document.getElementById("if").innerHTML = "Good evening!";
}
</script>
</body>
</html>
How to use if/else statements in JavaScript
Switch statement
<!DOCTYPE html>
<body>

Output:
<h2>Example <i>switch statement</i></h2>
<p>This webpage will display:<br>
"Good morning!" if it is morning,<br>
"Good afternoon!" if it is afternoon, and<br>
Time : 1400
"Good evening!" if it is evening:</p>
<p id="if"></p>

<script>
var time = new Date().getHours();
switch (true) {
case (time > 6 && time < 12):
document.getElementById("if").innerHTML = "Good morning!";
break;
case (time > 12 && time < 18):
document.getElementById("if").innerHTML = "Good afternoon!";
break;
default:
document.getElementById("if").innerHTML = "Good evening!";
}
</script>
</body>
</html>
loops to iterate over
arrays and objects
How to use if/else statements in JavaScript
FOR LOOP

initialization
for (initialization; condition; afterthought)
statement
How to use if/else statements in JavaScript
FOR LOOP

condition
for (initialization; condition; afterthought)
statement
How to use if/else statements in JavaScript
FOR LOOP

statement
for (initialization; condition; afterthought)
statement
How to use if/else statements in JavaScript
FOR LOOP

AFTERTHOUGHT
for (initialization; condition; afterthought)
statement
How to use if/else statements in JavaScript
Without FOR LOOP
<!DOCTYPE html>
Output:
<head>

</head>
<body>
<h2>Example using <i>for loop:</i></h2>
<p>Print the numbers 0-30 using JavaScript.</p>

<script>
document.write("0" + "<br>");
document.write("1" + "<br>");
document.write("2" + "<br>");
document.write("3" + "<br>");
document.write("4" + "<br>");
document.write("5" + "<br>");
document.write("6" + "<br>");
document.write("7" + "<br>");
document.write("8" + "<br>");
document.write("12" + "<br>");
document.write("13" + "<br>");
How to use if/else statements in JavaScript
document.write("14" + "<br>");
document.write("15" + "<br>");
document.write("16" + "<br>"); FOR LOOP
document.write("17" + "<br>");
document.write("18" + "<br>"); Output:
document.write("19" + "<br>");
document.write("20" + "<br>");
document.write("21" + "<br>");
document.write("22" + "<br>");
document.write("23" + "<br>");
document.write("24" + "<br>");
document.write("25" + "<br>");
document.write("26" + "<br>");
document.write("27" + "<br>");
document.write("28" + "<br>");
document.write("29" + "<br>");
document.write("30");
</script>
</body>
</html>
How to use if/else statements in JavaScript
With FOR LOOP
<!DOCTYPE html>
Output:
<head>

</head>
<body>
<h2>Example using <i>for loop:</i></h2>
<p>Print the numbers 0-30 using JavaScript.</p>

<script>
for (let i = 0; i <=30; i++) {
document.write(i + "<br>");
}
</script>
</body>
</html>
How to use if/else statements in JavaScript
With FOR LOOP
<!DOCTYPE html>
<head>

for loop
</head>
<body> for (initialization; condition;
<h2>Example using <i>for loop:</i></h2> increment/decrement) {
<p>Print the numbers 0-30 using JavaScript.</p> // Code to be executed in each iteration
}
<script>
for (let i = 0; i <=30; i++) {
document.write(i + "<br>");
}
</script>
</body>
</html>
Using loops to iterate over arrays and objects
FOR loop
<!DOCTYPE html> Output:
<head>

</head>
<body>
<h2>Example using <i>while loop:</i></h2>
<p>Printing arrays using while loop.</p>

<script>
let arr = [58, 27, 85, 43, 67, 21, 74, 36, 92, 15, 79, 62, 48, 88,
11];

let counter = 0;
while (counter < arr.length) {
document.write(arr[counter] + "<br>");
counter++;
}
</script>

</body>
</html>
ARRAY OF OBJECTS

const data = [
{ name: 'John', age: 30, group: 'A' },
{ name: 'Mary', age: 25, group: 'B' },
{ name: 'Mike', age: 20, group: 'A' },
{ name: 'Jane', age: 15, group: 'C' },
{ name: 'Peter', age: 25, group: 'B' }
];
ARRAY OF OBJECTS
<!DOCTYPE html> Output:
<head>

</head>
<body>
<h2>Example using <i>for loop:</i></h2>
<p>Printing arrays of objects using for loop.</p>

<script>
const data = [
{ name: 'John', age: 30, group: 'A' },
{ name: 'Mary', age: 25, group: 'B' },
{ name: 'Mike', age: 20, group: 'A' },
{ name: 'Jane', age: 15, group: 'C' },
{ name: 'Peter', age: 25, group: 'B' }
];

for (let i = 0; i < data.length; i++) {


document.write(Object.values(data[i]) + "<br>");
}
</script>
</body>
</html>
ARRAY OF OBJECTS

To this
ARRAY OF OBJECTS
<!DOCTYPE html> Output:
<head>

</head>
<body>
<h2>Example using <i>while loop:</i></h2>
<p>Printing arrays using while loop.</p>

<script>
let arr = [58, 27, 85, 43, 67, 21, 74, 36, 92, 15, 79, 62, 48, 88,
11];

let counter = 0;
while (counter < arr.length) {
document.write(arr[counter] + "<br>");
counter++;
}
</script>

</body>
</html>
ARRAY OF OBJECTS
<script>
let arr = [58, 27, 85, 43, 67, 21, 74, 36, 92, 15, 79, 62, 48, 88, 11];

let counter = 0;
while (counter < arr.length) {
document.write(arr[counter] + "<br>");
counter++;
}
</script>
ARRAY OF OBJECTS
While loop
<!DOCTYPE html>

Output:
<head>

</head>
<body>
<h2>Example using <i>while loop:</i></h2>
<p>Printing array of objects using while loop.</p>

<script>
const data = [
{ name: 'John', age: 30, group: 'A' },
{ name: 'Mary', age: 25, group: 'B' },
{ name: 'Mike', age: 20, group: 'A' },
{ name: 'Jane', age: 15, group: 'C' },
{ name: 'Peter', age: 25, group: 'B' }
];

let i = 0;
while (i < data.length) {
document.write(Object.values(data[i]) + "<br>");
i++;
}
</script>
</body>
</html>
ARRAY OF OBJECTS
do-While loop
<!DOCTYPE html>
<head>
Output:
</head>
<body>
<h2>Example using <i>do-while loop:</i></h2>
<p>Printing sum of array using do-while loop.</p>

<script>
arr = [58, 27, 85, 43, 67, 21, 74, 36, 92, 15, 79, 62, 48, 88, 11];

let i = 0, sum = 0;
do {
sum += arr[i];
i++;
} while (i < arr.length);

document.write("The sum of the numbers is <b>" + sum + "</b>.");


</script>
</body>
Previous array of object
const data = [
{ name: 'John', age: 30, group: 'A' },
{ name: 'Mary', age: 25, group: 'B' },
{ name: 'Mike', age: 20, group: 'A' },
{ name: 'Jane', age: 15, group: 'C' },
{ name: 'Peter', age: 25, group: 'B' }
];
ARRAY OF OBJECTS
do-While loop
<!DOCTYPE html>

Output:
<head>

</head>
<body>
<h2>Example using <i>do-while loop:</i></h2>
<p>Printing array of objects using do-while loop.</p>

<script>
const data = [
{ name: 'John', age: 30, group: 'A' },
{ name: 'Mary', age: 25, group: 'B' },
{ name: 'Mike', age: 20, group: 'A' },
{ name: 'Jane', age: 15, group: 'C'},
{ name: 'Peter', age: 25, group: 'B' }
];

let i = 0;
do {
document.write(Object.values(data[i]) + "<br>");
i++;
} while (i < 3);
</script>
</body>
</html>
CONCLUSION
Understand the syntax

Start simlpe

Pointers
Practice

Use debugging tools


Write comments

Look for examples

Pointers

Experiment

Keep it simple
SLIDES TITLE HERE
Lorem ipsum dolor sit amet, consectetur adipisicing elit

01 02

Lorem ipsum Lorem ipsum


Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna incididunt ut labore et dolore magna
aliqua. aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Lorem ipsum
01 Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor

Lorem Lorem ipsum


02
Ipsum
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor

Lorem ipsum
03 Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
IMAGE SLIDE
TITLE HERE
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
Break Section
01:00pm ~ 01:30pm
WORLD MAP INFOGRAPHIC SLIDES
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Title text block &
Mobile project
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident!
Title text block &
Tablet project
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident!
Title text block &
Desktop project
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident!
Icon

You can resize these icons


keeping the quality.

You can change the stroke


and fill color; just select the
icon and click on the paint
bucket/pen.
Icon

You can resize these icons


keeping the quality.

You can change the stroke


and fill color; just select the
icon and click on the paint
bucket/pen.
Thanks !
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam aliquet eu mi quis
lacinia
Presentation template by

http://www.pptmon.com/ Click to follow link

You might also like