Одновимірний масив - це колекція однотипних елементів, які зберігаються у лінійному порядку. Кожен елемент масиву має свій індекс, який починається з 0. Одновимірні масиви можуть містити значення будь-якого типу даних, такі як числа, рядки, об'єкти і т.д.

Основні функції одновимірних масивів включають:

let numbers = [1, 2, 3, 4, 5];
let names = ["Олена", "Іван", "Марія"];

let numbers = [1, 2, 3, 4, 5];

console.log(numbers[0]); // Виведе 1
console.log(numbers[2]); // Виведе 3

let numbers = [1, 2, 3, 4, 5];

numbers[1] = 10;
console.log(numbers); // Виведе [1, 10, 3, 4, 5]

let numbers = [1, 2, 3, 4, 5];

console.log(numbers.length); // Виведе 5

let numbers = [1, 2, 3, 4, 5];

numbers.push(6); // Додає 6 в кінець масиву
numbers.pop(); // Видаляє останній елемент

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// Або з використанням методу forEach()
numbers.forEach((num) => {
  console.log(num);
});

Двовимірний масив (також відомий як масив масивів) є особливим типом масиву у програмуванні, де масиви розміщуються один в одному, утворюючи "сітку" або "таблицю". Кожен елемент двовимірного масиву має свої власні індекси, що дозволяє нам звертатися до конкретних значень у "сітці" за допомогою двох індексів: перший індекс вказує на рядок, а другий - на стовпець.

Щоб легше зрозуміти двовимірні масиви, можна уявити їх як шахову дошку, де кожна клітинка це елемент масиву, і вона має свої координати - рядок і стовпець. Звертаючись до елементу двовимірного масиву, ми вказуємо його рядковий та стовпчиковий індекс, що дозволяє нам отримати доступ до певного елементу в "сітці".

Давайте розглянемо приклад двовимірного масиву, який представляє собою шахову дошку:

let chessBoard = [
  ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'],
  ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
  [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
  [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
  [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
  [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
  ['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
  ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'],
];

У цьому прикладі chessBoard - це двовимірний масив, що представляє собою шахову дошку. Кожен елемент масиву є елементом рядка, який відповідає певному рядку і стовпцю на дошці. Наприклад, chessBoard[0][0] містить літеру "R", що відповідає фігурі "Ладья" на верхньому лівому куті дошки.

Також можна уявити двовимірний масив як таблицю з даними. У кожному рядку таблиці зберігається певний набір даних. Наприклад, у масиві grades можуть бути збережені оцінки студентів за різні предмети, а кожний рядок цього масиву відповідатиме окремому студентові, а кожний стовпець - конкретному предмету. Звертаючись до елементу grades[i][j], ми отримаємо оцінку студента i за предмет j.

Здатність працювати з двовимірними масивами дозволяє нам зручно представляти дані у впорядкованому вигляді, що робить їх потужним інструментом при розв'язанні задач, які вимагають роботи зі структурованими даними, такими як матриці, таблиці, зображення тощо.

Приклад 1: Створення двовимірного масиву

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

У цьому прикладі ми створили двовимірний масив з трьох рядків і трьох стовпців. Кожний рядок представляє собою окремий підмасив, і масив matrix утворює сітку 3х3.

Приклад 2: Отримання значень з двовимірного масиву

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[0][1]); // Виведе 2
console.log(matrix[2][0]); // Виведе 7

Звернення до елементів двовимірного масиву відбувається за допомогою двох індексів - перший індекс вказує на рядок, а другий - на стовпець. У прикладі вище matrix[0][1] поверне значення другого елементу першого рядка, тобто число 2, а matrix[2][0] поверне перший елемент третього рядка, тобто число 7.

Приклад 3: Зміна значення в двовимірному масиві

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

matrix[1][1] = 10;

console.log(matrix);

В цьому прикладі ми змінюємо значення другого елементу другого рядка з 5 на 10. Результат виводу масиву буде:

[
  [1, 2, 3],
  [4, 10, 6],
  [7, 8, 9]
]

Приклад 4: Застосування циклів для перебору двовимірного масиву

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

У цьому прикладі ми використовуємо вкладений цикл for для ітерації по кожному елементу двовимірного масиву matrix. Внутрішній цикл перебирає кожний елемент в підмасиві (рядку), а зовнішній цикл перебирає кожен рядок у масиві matrix. Результатом будуть виведені всі значення зі сітки.

Двовимірні масиви дозволяють зручно представляти структуровані дані і працювати з ними. Вони часто використовуються для розв'язання задач, які вимагають обробки даних у форматі таблиць, сіток або матриць.

Додавання та видалення стовпців та рядків у двовимірному масиві може виявитися дещо складнішим завданням, оскільки потрібно враховувати зсув елементів у масиві. Але з використанням циклів ми можемо здійснити ці операції.

Приклад 1: Додавання стовпця у двовимірний масив

Допустимо, у нас є двовимірний масив matrix, і ми хочемо додати новий стовпець зі значеннями [10, 20, 30]:

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

let newColumn = [10, 20, 30];

for (let i = 0; i < matrix.length; i++) {
  matrix[i].push(newColumn[i]);
}

console.log(matrix);

Під час додавання стовпця ми проходимося циклом по кожному рядку (matrix[i]) і використовуємо метод push() для додавання відповідного елемента з масиву newColumn до поточного рядка. В результаті отримуємо такий двовимірний масив:

[
  [1, 2, 3, 10],
  [4, 5, 6, 20],
  [7, 8, 9, 30]
]

Приклад 2: Видалення стовпця з двовимірного масиву

Для видалення стовпця з двовимірного масиву, ми просто проходимося циклом по кожному рядку і використовуємо метод splice() для видалення елемента з рядка:

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

let columnIndexToRemove = 1; // Індекс стовпця, який ми хочемо видалити

for (let i = 0; i < matrix.length; i++) {
  matrix[i].splice(columnIndexToRemove, 1);
}

console.log(matrix);

У цьому прикладі ми видаляємо другий стовпець (індекс 1). Після видалення отримуємо такий результат:

[
  [1, 3],
  [4, 6],
  [7, 9]
]

Приклад 3: Додавання рядка до двовимірного масиву

Якщо ми хочемо додати новий рядок до двовимірного масиву, ми просто можемо використати метод push() для додавання нового рядка:

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

let newRow = [10, 11, 12];

matrix.push(newRow);

console.log(matrix);

У результаті отримаємо масив з новим рядком:

[
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [10, 11, 12]
]

Приклад 4: Видалення рядка з двовимірного масиву

Для видалення рядка з двовимірного масиву, ми просто використовуємо метод splice() для видалення елемента з масиву:

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

let rowIndexToRemove = 1; // Індекс рядка, який ми хочемо видалити

matrix.splice(rowIndexToRemove, 1);

console.log(matrix);

У цьому прикладі ми видаляємо другий рядок (індекс 1). Після видалення ми отримаємо такий результат:

[
  [1, 2, 3],
  [7, 8, 9]
]

Ці приклади демонструють основні операції додавання та видалення стовпців та рядків у двовимірних масивах за допомогою циклів. Зверніть увагу, що при видаленні елементів, ми можемо змінити розмір масиву, тому впевніться, що робите це обережно, щоб уникнути втрати даних.

Ітерація (перебір) двовимірного масиву може бути здійснена за допомогою вкладених циклів, які використовують координати X та Y для доступу до елементів масиву.

Давайте розглянемо двовимірний масив matrix і пройдемося по кожному елементу використовуючи координати X та Y:

// Створення двовимірного масиву
let matrix = [
	[1, 2, 3], // Перший рядок з елементами 1, 2, 3
	[4, 5, 6], // Другий рядок з елементами 4, 5, 6
	[7, 8, 9], // Третій рядок з елементами 7, 8, 9
];

// Ітерація по рядках масиву
for (let x = 0; x < matrix.length; x++) {
	// Ітерація по елементах в кожному рядку
	for (let y = 0; y < matrix[x].length; y++) {
		// Отримання елемента з позиції (x, y) та виведення його на консоль
		let element = matrix[x][y];
		console.log(`Елемент на позиції (${x}, ${y}): ${element}`);
	}
}

У цьому прикладі ми використовуємо два цикли for. Внутрішній цикл перебирає елементи в підмасиві (рядку) з індексом x, а зовнішній цикл перебирає рядки масиву з індексами x. Таким чином, за допомогою змінних x та y, ми можемо отримати доступ до кожного елемента двовимірного масиву за допомогою координат X та Y.

Результат виводу буде наступним:

Елемент на позиції (0, 0): 1
Елемент на позиції (0, 1): 2
Елемент на позиції (0, 2): 3
Елемент на позиції (1, 0): 4
Елемент на позиції (1, 1): 5
Елемент на позиції (1, 2): 6
Елемент на позиції (2, 0): 7
Елемент на позиції (2, 1): 8
Елемент на позиції (2, 2): 9

Ітерація двовимірного масиву за допомогою координат X та Y дозволяє звертатися до кожного елемента окремо та виконувати операції з даними на основі їхньої позиції в масиві. Використовуйте цей підхід, коли потрібно обробити кожен елемент в масиві окремо та залежно від його місцезнаходження у сітці.

Для чого використовувати X та Y?

Ітерація двовимірного масиву (масиву масивів) за допомогою системи координат x-y може бути корисним підходом для обходження та роботи з елементами масиву. Під час ітерації ми можемо використовувати два індекси - x та y - як координати для доступу до елементів масиву, що спрощує роботу з ним.

Давайте розглянемо приклад ітерації двовимірного масиву за допомогою системи координат x-y:

// Створення двовимірного масиву
let matrix = [
	[1, 2, 3], // Перший рядок з елементами 1, 2, 3
	[4, 5, 6], // Другий рядок з елементами 4, 5, 6
	[7, 8, 9], // Третій рядок з елементами 7, 8, 9
];

// Ітерація по рядках масиву
for (let x = 0; x < matrix.length; x++) {
	// Ітерація по елементах в кожному рядку
	for (let y = 0; y < matrix[x].length; y++) {
		// Отримання елемента з позиції (x, y) та виведення його на консоль
		let element = matrix[x][y];
		console.log(`Елемент на позиції (${x}, ${y}): ${element}`);
	}
}

У цьому прикладі ми використовуємо два цикли - перший цикл для проходження по рядках (координата x) і другий цикл для проходження по стовпцях (координата y) у кожному рядку. Під час ітерації ми виводимо координати та значення елементів масиву.

Чому ітерація за допомогою системи координат x-y є рекомендованим підходом?

Загалом, ітерація двовимірного масиву за допомогою системи координат x-y є зручним та рекомендованим підходом. Вона допомагає зрозуміти структуру масиву, зберегти гнучкість в роботі з даними і полегшити реалізацію алгоритмів.

DOM (Document Object Model) - це структура, що представляє сторінку або документ у веб-браузері в форматі об'єктів. Вона надає можливість програмам на стороні клієнта (зазвичай, JavaScript) змінювати структуру, стилі та вміст веб-сторінки.

Коли браузер завантажує веб-сторінку, він створює модель документу - DOM. DOM утворює деревоподібну структуру, де кожен елемент сторінки є об'єктом з певними властивостями та методами. Кожен тег HTML стає елементом в DOM, а текст або контент стає текстовим вузлом в DOM.

Завдяки DOM, JavaScript може звертатися до кожного елемента на сторінці, змінювати його властивості, додавати або видаляти елементи, а також реагувати на події (наприклад, клік, наведення миші тощо).

Основні поняття, пов'язані з DOM:

Взаємодія з DOM дозволяє робити сторінки динамічними, змінювати їх вміст та зовнішній вигляд без необхідності перезавантаження сторінки. Це робить DOM однією з ключових технологій для розробки інтерактивних та динамічних веб-додатків.

Щоб вивести двовимірний масив в HTML, ми можемо створити контейнер з вкладеними <div>, де кожен рядок буде відповідати основному <div>, а кожен елемент - вкладеному <div>. Зверніть увагу, що ми можемо створити внутрішні і зовнішні цикли, щоб перебрати кожен рядок та кожен елемент у рядку відповідно.

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

<!DOCTYPE html>
<html>
<head>
  <title>Виведення двовимірного масиву в HTML</title>
  <style>
    .row {
      display: flex;
    }
    .element {
      width: 30px;
      height: 30px;
      border: 1px solid black;
      text-align: center;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <div id="matrixContainer"></div>

  <script>
    let matrix = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
    ];

    // Отримуємо посилання на контейнер у DOM
    const matrixContainer = document.getElementById("matrixContainer");

    // Цикл для створення рядків
    for (let i = 0; i < matrix.length; i++) {
      const row = document.createElement("div");
      row.className = "row";

      // Цикл для створення елементів у рядку
      for (let j = 0; j < matrix[i].length; j++) {
        const element = document.createElement("div");
        element.className = "element";
        element.textContent = matrix[i][j];

        // Додаємо елемент до рядка
        row.appendChild(element);
      }

      // Додаємо рядок до основного контейнера
      matrixContainer.appendChild(row);
    }
  </script>
</body>
</html>

У цьому прикладі ми створюємо <div> для кожного рядка та <div> для кожного елемента в рядку. Зовнішній цикл перебирає кожен рядок у двовимірному масиві, а внутрішній цикл - кожен елемент у рядку. Ми встановлюємо текстовий вміст кожного елемента зі значенням з двовимірного масиву.

У стилі CSS ми задаємо стиль для .row, щоб елементи в рядку відображалися в одному ряду (за допомогою display: flex;). Також задаємо стилі для .element, щоб кожен елемент мав розміри та рамку.

Результат буде виглядати як таблиця, де кожен рядок містить елементи з двовимірного масиву:

1  2  3
4  5  6
7  8  9

Цей підхід дозволяє візуально представити двовимірний масив у вигляді таблиці на веб-сторінці. Ви можете змінювати стилі та додавати більше даних для зручного представлення вашого масиву на сторінці.

Детальне пояснення коду:

Після виконання цих кроків, двовимірний масив matrix буде виведений у HTML у вигляді таблиці з відповідними рядками та елементами. Кожен елемент буде містити своє значення, яке взяте з масиву matrix, і буде відображений у вигляді квадрата з рамкою у відповідних рядках.