Lab 3

ЛАБОРАТОРНА РОБОТА № 3
Тема: Робота з одновимірними та багатовимірними масивами.
Мета роботи: Знайомство з одновимірними та багато вимірними

масивами.
Хід роботи:
Завдання 1:
1.1. Розмістіть на сторінці div-блок з ідентифікатором “paragraphs”.
Розмістіть у ньому 5 абзаців з довільним текстом. Сформуйте масив, який
міститиме 5 елементів - кількість символів, які входять до відповідного абзацу
тексту.
Для пошуку абзаців використовуйте метод querySelectorAll та відповідний CSS-
селектор. Для доступу до тексту, який входить в абзац використовуйте
властивість innerText для DOM-елемента. Виведіть у консоль отриманий масив.
Лістинг програми:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
</head>
<body>
<div id="paragraphs">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. word</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 2 word</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 2 word and
word</p>
ДУ «Житомирська політехніка».22.121.8.000 – Лр3

Змн. Арк. № докум. Підпис Дата
Розроб. Ілларіонов І. О.. Літ. Арк. Аркушів
Перевір. Чижмотря О.Г. 1 12
Керівник
Звіт з
Н. контр. лабораторної роботи ФІКТ Гр. ВТ-22-2
Зав. каф.
<p>Lorem ipsum dolor sit</p>
</div>
</body>
<script src="task1.js"></script>
</html>
script.js
// 1.1
const ps = document.querySelectorAll("p");
console.log(ps)
const p_elements = [];
for(let el of ps){
p_elements.push(el.innerText.length);
}
console.log(p_elements)
// 1.2
let arr = [20, 17, 4, -4, 10, -9, 13, 4, 12, 22, 13, 19, 1, 3];
console.log("Input array = " + arr);
console.log("Maximum = " + Math.max(...arr) + " and Minimum = " + Math.min(...arr));
let even = 0, odd = 0;
for(let num of arr)
if(num % 2 == 0)
even++;
else
odd++;
console.log("Even = " + even + " and Odd = " + odd);
const contains_two_digit = (num) => {

return 9 < num && num < 100;
}
let numbers_with_two_digit = arr.reduce((sum, num) => sum + contains_two_digit(num),

0);
console.log("Amount of numbers with 2 digit = " + numbers_with_two_digit);
let positive = 0, negative = 0;
for(let num of arr)

if(num > 0)
Ілларіонов І. О.. Арк.

Чижмотря О.Г. ДУ «Житомирська політехніка».22.121.8.000 – Лр3
2
positive++;
else if(num < 0)
negative++;
console.log("Amount of negative = " + negative + " count of positive = " + positive);
console.log("Before sort " + arr);

arr.sort((a, b) => a - b);
console.log("After sort " + arr);
const reversed = arr.reverse();

console.log("New reversed array " + reversed);
Результат виконання програми:
Рис. 1. Результат виконання програми
1.2. Дано масив цілих чисел:
let arr = [20, 17, 4, -4, 10, -9, 13, 4, 12, 22, 13, 19, 1, 3];

2
- Для заданого масиву визначте та виведіть у консоль:
найменше та найбільше значення;
кількість парних та непарних чисел;
кількість чисел, що містять дві цифри;
кількість додатних та кількість від’ємних чисел.
- Відсортуйте масив arr за допомогою методу Sort у порядку зростання значень та
виведіть у консоль результат.
- Створіть масив з оберненим порядком елементів та виведіть його у консоль.
Завдання 2.
Розмістіть на сторінці 3 div-блоки з класами “table”. У кожному з них розмістіть
табличку. У першому блоці - табличку розміром 3х3, другому - 4х4, третьому -
5х5.
В CSS-файлі розмістіть стиль для класу “selected”, який передбачає жовтий фон.
За допомогою querySelectorAll знайдіть div-блоки з класом “table”. Для кожного
знайденого блоку у циклі знайдіть всі вкладені у нього теги td. Для кожного
другого тега td додайте клас “selected”.

2
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="task2.css">
</head>
<body>
<div class="table">
<table id="test">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="table">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>

2
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="table">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

2
.selected{
background-color: yellow;
}
.table{
border-collapse: collapse;
margin: 20px;
}
.table td{
width: 30px;
height: 30px;
border: 2px solid black;
}
let divTables = document.querySelectorAll('.table');

divTables.forEach( table => {
table.querySelectorAll("td").forEach( (td,index) => {
td.innerText = index+1;
if(index%2 == 1){
td.classList.add("selected");
}
});
});

2

Завдання 3.
Створіть матрицю розміру N на M, яка містить цілі числа (наприклад, 7х5 та
числами на власний розсуд). Знайдіть та виведіть у консоль:
 кількість додатних елементів;

 кількість рядків, які не містять жодного нульового елемента;
 кількість стовпців, які містять хоча б один нульовий елемент;
 номер рядка, в якому знаходиться найдовша серія однакових елементів;
 добуток елементів в тих рядках, які не містять від’ємних елементів;

2
 суму елементів в тих стовпцях, які не містять від’ємних елементів;
 суму елементів в тих стовпцях, які містять хоча б один від’ємний елемент;
 транспоновану матрицю;
const matrix = [
[1,4,2,7,-3,0,5],
[5.5,4,0,8,1,1,1],
[3,2,1,0,-1,-2,-3],
[8,0,5,4,0,2,7],
[1,1,2,3,4,1,1]
];
console.log(matrix)
// task 1
const count_positive = (matrix) => matrix.reduce((sum, row) => sum + row.filter((el)
=> el > 0).length, 0);
console.log("Number of positive numbers in matrix = " + count_positive);
// task 2
const count_rows_without_zero = (matrix) => matrix.filter((row) => row.includes(0) ==
false).length;
console.log("Number of rows that do not contain zero element = " +
count_rows_without_zero(matrix))
// task 3
const count_cols_with_zeros = (matrix) =>{
let ans = 0;
let n = matrix.lenght, m = matrix[0].lenght;
for(let j = 0; j < m; j++){
// check for each columns, does it includes at least one zeros
founded = false;
for(let i = 0; i < n; i++)

if(founded=matrix[i][j] == 0)break;
if(founded){
console.log("Founded in " + j + " col");
ans++;
}
}
}
console.log("Number of columns that contains at least one zero element = " +

count_cols_with_zeros(matrix));
const find_row_with_longest_series = (matrix)=> {

let n = matrix.length, m = matrix[0].length;

2
let longest_series = 1;
let row = 0;
for(let i = 0; i < n; i++){
let series_len = 1;
for(let j = 1; j < m; j++){
if(matrix[i][j] == matrix[i][j-1])
series_len++;
else
series_len = 1;
if(series_len > longest_series){

longest_series = series_len;
row = i;
}
}
}
return row;
}
console.log("Index of row with longest series of same elements = " +

find_row_with_longest_series(matrix));
console.log("")
console.log("Product of rows that do not contain negative numbers: ")
const mxN = matrix.length;
const mxM = matrix[0].length;
for(let i = 0; i < mxN; i++){
const finded = matrix[i].find((num) => num < 0) != undefined;
if(!finded)
console.log("Product of " + i + "-th row = " + matrix[i].reduce((pr, num) =>
pr * num, 1));
else
console.log(i + "-th row contain negative numbers")
}
console.log("")
console.log("Sum of columns that do not contain negative numbers: ")
for(let j = 0; j < mxM; j++){
let contains_negative = false;
let sum = 0;
if(matrix[i][j] < 0)
contains_negative = true;
sum += matrix[i][j];
}
if(contains_negative)

2
console.log(j + "-th columns contains negative elements")
else
console.log("Sum of " + j + "-th column = " + sum);
console.log("")
console.log("Sum of columns that contain at least one negative number: ")
for(let j = 0; j < mxM; j++){
let contains_negative = false;
let sum = 0;
if(matrix[i][j] < 0)
contains_negative = true;
sum += matrix[i][j];
}
if(contains_negative == false)
console.log(j + "-th columns do not contain negative elements")
else
console.log("Sum of " + j + "-th column = " + sum);
// each row become column

const transpose_2D_matrix = (matrix) => {
const transposed = [];
for(let j = 0; j < matrix[0].length; j++)
{
// build new row
const row = [];
for(let i = 0; i < matrix.length; i++){
row.push(matrix[i][j]);
}
transposed.push(row);
}
return transposed;
}
console.log("Transposed matrix: ")

console.log(transpose_2D_matrix(matrix));
<!DOCTYPE html>
<html lang="en">
<head>

2
</head>
<body>
</body>
</html>
Висновки: в ході виконання лабораторної роботи ознайомилася з

одновимірними та багато вимірними масивами.
Реалізовано програмний код, який доступний за посиланням:

https://gitlab.com/2022-2026/vt-22-2/illarionov-ihor/frontend22-23-iio

2

Lab 3

Uploaded by

Document Information

Original Title

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

Lab 3

Uploaded by

Copyright:

Available Formats

ЛАБОРАТОРНА РОБОТА № 3

Тема: Робота з одновимірними та багатовимірними масивами.

Мета роботи: Знайомство з одновимірними та багато вимірними

ДУ «Житомирська політехніка».22.121.8.000 – Лр3

const p_elements = [];

console.log("Even = " + even + " and Odd = " + odd);

const contains_two_digit = (num) => {

let numbers_with_two_digit = arr.reduce((sum, num) => sum + contains_two_digit(num),

let positive = 0, negative = 0;

for(let num of arr)

Ілларіонов І. О.. Арк.

console.log("Amount of negative = " + negative + " count of positive = " + positive);

console.log("Before sort " + arr);

const reversed = arr.reverse();

Результат виконання програми:

Рис. 1. Результат виконання програми

1.2. Дано масив цілих чисел:

Ілларіонов І. О.. Арк.

Результат виконання програми:

Рис. 2. Результат виконання програми

Ілларіонов І. О.. Арк.

Ілларіонов І. О.. Арк.

Ілларіонов І. О.. Арк.

let divTables = document.querySelectorAll('.table');

Ілларіонов І. О.. Арк.

Рис. 3. Результат виконання програми

 кількість додатних елементів;

Ілларіонов І. О.. Арк.

for(let i = 0; i < n; i++)

console.log("Number of columns that contains at least one zero element = " +

const find_row_with_longest_series = (matrix)=> {

Ілларіонов І. О.. Арк.

if(series_len > longest_series){

console.log("Index of row with longest series of same elements = " +

Ілларіонов І. О.. Арк.

// each row become column

console.log("Transposed matrix: ")

Ілларіонов І. О.. Арк.

Результат виконання програми:

Рис. 4. Результат виконання програми

Висновки: в ході виконання лабораторної роботи ознайомилася з

Реалізовано програмний код, який доступний за посиланням:

Ілларіонов І. О.. Арк.

You might also like