L6, Array in JS, CSE 202, BN11.pdf JavaScript

Course Code: CSE 202
Course Title: Computer Programming Lab
Lecture 6: Array in JS
Course Teacher: Saurav Barua (SB)
Assistant Professor, Dept. of CE, DIU
Phone: +88-01715334075
Email: saurav.ce@diu.edu.bd

Contents
2
Array methods
Creating and
accessing array
elements
Array index
Modify array
elements
JavaScript
arrays
.
2D array

JavaScript arrays
3
 An array in JavaScript is a data structure used to store multiple
values in a single variable.
 It can hold various data types and allows for dynamic resizing.
 Elements are accessed by their index, starting from 0.

Creating and accessing array elements
4
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
// Accessing Array Elements
console.log(a[0]); //output: HTML

Array index
5
Example:
const array = [2, 16, 24, 32, 4];

Modify array elements
6
 Elements in an array can be modified by assigning a new
value to their corresponding index.
Example:
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
console.log(a); //output: [ 'HTML', 'CSS', 'JS' ]
a[1]= "Bootstrap";
console.log(a); //output: [ 'HTML', 'Bootstrap', 'JS' ]

Array methods
7
Methods Description Example
push() add the element to the end
of the array.
let a = [2, 4, 6]
a.push(3);
console.log(a); //output: 2, 4, 6, 3
unshift() add the element to the
starting of the array.
let a = [2, 4, 6]
a.unshift(5);
console.log(a); //output: 5, 2, 4, 6
pop() removes an element from
the last index of the array
let a = [2, 4, 6]
a.pop();
console.log(a); //output: 2, 4

Array methods
8
Methods Description Example
shift() removes the element from the
first index of the array.
let a = [2, 4, 6]
a.shift();
splice() removes or replaces the
element from the array
let a = [2, 4, 6, 7]
a.splice(1,2);

Two dimensional array
9
 A two-dimensional array, also known as a 2D array, is a collection of data
elements arranged in a grid-like structure with rows and columns.
Example:
let MathScore = [
['John Doe', 20, 60, 'A'],
['Jane Doe', 10, 52, 'B'],
['Petr Chess', 5, 24, 'F'],
['Ling Jess', 28, 43, 'A'],
['Ben Liard', 16, 51, 'B']
];
Access Elements
arrayName[rowIndex][columnIndex]
console.log(MathScore[4][0]); // returns 'Ben Liard'
console.log(MathScore[2][1]); // returns 5

Worked out example
10
Example 6: Program to find the maximum value from a 2D array and display the
name in browser. (Find the month of highest rainfall from a given rainfall intensity
(mm) data and display the month in the browser.)
Google drive link:
https://drive.google.com/drive/folders/1VqaAUKCxAYzXJPxeddnOKUR644a
rhJNs?usp=drive_link
Git-hub link: https://github.com/sauravbarua02/rainfallIntensity2DArray

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

css codes
13
body{
margin: 0px;
background-color: rgba(210,130,130,0.5);
}
.container{
background-color:
rgba(210,130,130,0.3);
height: 300px;
width: 300px;
margin: 20px auto;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: larger;
box-shadow: 0 0 4px 1px rgba(0,0,0,0.6);
border-radius: 10px;
}

JS codes
14
const containerEl =
document.getElementById("container");
let rainfallInfo = [["January",
25],["February", 50], ["March", 10],
["July", 70]];
function maxRainfall(rainfallInfo){
let maxRainfallMonth =
rainfallInfo[0][0];
let maxRainfallIntensity =
rainfallInfo[0][1];
for(let i=1; i<rainfallInfo.length;
i++){
if(maxRainfallIntensity <
rainfallInfo[i][1]){
maxRainfallIntensity =
rainfallInfo[i][1];
maxRainfallMonth =
rainfallInfo[i][0];
}
}
return maxRainfallMonth;
}
function display(){
let output = maxRainfall(rainfallInfo);
containerEl.innerText = `The highest
rainfall in ${output} month`;
}
display();

Class tasks
15
Task 6.1: Program to find the governing capacity (kip) of a steel plate from the shear, tension
and bearing capacity data and display which capacity governs in the browser. (Hints: use “>” sign
in the logic for the minimum value and governing capacity is the lowest/minimum capacity.)
Task 6.2: Program to find the governing bending moment (kft/ft) on a concrete column from
the earthquake X-direction, earthquake X-direction, wind X-direction and wind Y-direction
moment data and display which moment governs in the browser. (Hints: maximum moment is the
governing)
Task 6.3: Program to find maximum traffic flow (veh/hr) from a 5-hrs traffic count and display
which hour has the maximum traffic flow. (Hints: designate hour as 7AM, 8PM.. etc.)
Task 6.4: Program to find which contractor wins a contract in the tender bidding for a bridge
project and display which the name of the contractor in the browser. (Hints: A contractor who
submits the lowest price quotation in BDT will win the contract. use “>” sign in the logic for the minimum
value)
Task 6.5: Program to find the highest sludge discharge (ml/g) rate in a sewage canal from the
4-day data for a City and display which day has the highest sludge discharge in the browser.
(hints: days will be Sunday, Monday.. etc.)

L6, Array in JS, CSE 202, BN11.pdf JavaScript

More Related Content

Similar to L6, Array in JS, CSE 202, BN11.pdf JavaScript (20)

More from SauravBarua11 (20)

Recently uploaded (20)

L6, Array in JS, CSE 202, BN11.pdf JavaScript