Scribd
Upload
24 views16 pages

L5, Loop and Iteration, CSE 202, BN11

JavaScript

Uploaded by

Saurav Barua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views16 pages

L5, Loop and Iteration, CSE 202, BN11

JavaScript

Uploaded by

Saurav Barua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Course Code: CSE 202

Course Title: Computer Programming Lab


Lecture 5: Loop and iteration
Course Teacher: Saurav Barua (SB)
Assistant Professor, Dept. of CE, DIU
Phone: +88-01715334075
Email: [email protected]
Contents

Conditional
statement while loop,
for loop
do..while loop
.

for..of loop For..in loop forEach() method

2
Loop
Loops offer a quick and easy way to do something repeatedly. We
will discuss:

 for loop
 while loop
 do..while loop
 for..of loop
 for..in loop
 forEach() method
3
for loop
Syntax:
for (initialization; condition; update)
statement;

 A for loop repeats until a specified condition evaluates to


false.
 loops are help us iterate over items in JS we have for loop
best for iterating known items.
Example:
for (let i=0; i<5; i++){
console.log(i); //Output: 0,1,2,3,4
}
4
while loop
Syntax:
while (condition)
statement;
 A while statement executes its statements as long as a
specified condition evaluates to true
 while loop best for if number of iterations unknown
beforehand.
Example:
let i = 0;
while(i<5){
console.log(i); //output: 0,1,2,3,4
i++;
} 5
do..while loop
Syntax:
do
statement;
while (condition);
 The do...while statement repeats until a specified condition
evaluates to false.
 do..while ensures at least one execution
Example:
let j = 0;
do{
console.log(j); //output: 0,1,2,3,4
j++;
} while(j<5);
6
for..of loop
Syntax:
for (variable of iterable)
statement;

 The for...of statement creates a loop Iterating over iterable objects (including
Array, Map, Set, arguments object and so on), invoking a custom iteration hook
with statements to be executed for the value of each distinct property.
 for..of is for iterting iterables (array elements)
Example:
const array = [10, 20, 30];
for (let value of array){
console.log(value); //output: 10, 20, 30
}
7
for..in loop
Syntax:
for (variable in object)
statement;

 The for...in statement iterates a specified variable over all the enumerable
properties of an object. For each distinct property, JavaScript executes the
specified statements.
 for..in is for iterating over object properties.
Example:
const person = {name:"Alice", age: 30};
for (let key in person){
console.log(key+":"+person[key]); //output:
name: Alice, age:30)
}
8
forEach() method
Syntax:
array.forEach(function(currentValue, index, arr)

 The forEach() method calls a function for each element in an array.

Example: Example:
let sum = 0; const numbers = [65, 44, 12, 4];
const numbers = [65, 44, 12, 4]; numbers.forEach(myFunction)
numbers.forEach(myFunction);
function myFunction(item, index, arr) {
function myFunction(item) { arr[index] = item * 10;
sum += item; //output: compute sum //output: multiply each element by 10
} } 9
Worked out example
Example 5: Program to calculate the summation of the elements of an array using
loop statement. (calculate total skin friction capacity (kN) for a bored pile, given
skin friction =[20, 25, 30, 26] using loop statement.)

Google drive link:


https://drive.google.com/drive/folders/1tC8O6WjFlbOpowVF-
tleuI4khDNSnb3v?usp=drive_link

Git-hub link: https://github.com/sauravbarua02/skinFrictionLoop

10
Interface

11
html codes
<!DOCTYPE html>
<html lang="en"> <body>
<head> <div class="container" id="container">
<meta charset="UTF-8">
<meta name="viewport" </div>
content="width=device-width, initial- <script src="app.js"></script>
scale=1.0"> </body>
<title>Skin Friction Capacity</title> </html>
<link rel="stylesheet" href="style.css">
</head>

12
css codes
body{
margin: 0px;
background-color: rgba(145, 143, 30, padding: 5px;
0.7); display: flex;
} flex-direction: column;
justify-content: center;
.container{ align-items: center;
background-color:rgba(145, 143, 30, 0.4); box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
height: 200px; border-radius: 10px;
width: 400px; font-size: larger;
margin: 20px auto;
}

13
JS codes
function display(){
const containerEl =
containerEl.innerText = "Total friction
document.getElementById("container");
capacity of the pile:" + calculation() +"
const skinFrictions = [20, 25, 30, 26];
kN";
}
let frictionCapacity = 0;
display();
function calculation(){
for (let skinFriction of skinFrictions)
frictionCapacity += skinFriction;
return frictionCapacity;
}

14
Class tasks
Task 5.1: Program to calculate %cumulative retained in a sieve analysis
of fine aggregate, given %retained = [10, 23, 12, 11] using loop
statement.
Task 5.2: Program to calculate %cumulative frequency for a spot
speed, given %frequency = [12, 17, 25] using loop statement.
Task 5.3: Program to calculate total man-hr for carpenters in a housing
project, given man-hr= [10, 17, 45, 28, 20] using loop statement.
Task 5.4: Program to calculate total COD loading per day (mg/l), given
COD loading per day= [240, 310, 570] using loop statement.
Task 5.5: Program to calculate total un-factored load (ton) of a high rise
building, given dead load, live load, wind load and earthquake load =
[500, 200, 100, 50] respectively using loop statement.
15
End of the Lecture

16

You might also like