nmk

Лабораторне заняття №9 (2 години). Алгоритми обробки масивів та об’єктів (Вступ до JS).

Мета

Перевести інтернет-магазин зі “статичної” розмітки на “динамічну”. Відокремити дані від їхнього візуального представлення за допомогою масивів об’єктів у JavaScript (ES6+). Навчитися перебирати дані (map, forEach) і рендерити їх на сторінку через DOM-методи.

План

  1. Підключення файлу main.js.
  2. Створення структури даних товарів (масив об’єктів const products = [...]).
  3. Видалення статичних карток товарів з index.html.
  4. Написання алгоритму генерації HTML на основі даних (шаблонні рядки).
  5. Вивід згенерованих товарів у сітку .products-grid (використання innerHTML).

Хід роботи

Увага: Ми починаємо 2-й семестр (JavaScript). Ваш інтернет-магазин “TechShop” оживе! Більше ніякого дублювання однакових шматків коду в HTML.

  1. Ініціалізація JavaScript:
    • Створіть папку assets/js та файл main.js всередині.
    • Підключіть скрипт у кінці <body> вашого index.html: <script src="./assets/js/main.js" type="module"></script> (атрибут type="module" дуже важливий для сучасного JS).
  2. Організація даних (Database Simulation):
    • У main.js створіть змінну (константу), що зберігатиме інформацію про ваші товари. Це буде масив ([]), де кожен товар є об’єктом ({}). 
      const products = [
  {
    id: 1,
    title: "Ноутбук Apple MacBook Pro 16",
    price: 99999,
    category: "laptops",
    image: "https://via.placeholder.com/300x200",
  },
  {
    id: 2,
    title: "Смартфон Samsung Galaxy S24",
    price: 39999,
    category: "smartphones",
    image: "https://via.placeholder.com/300x200",
  },
  // Додайте ще 4-6 товарів з різними цінами та категоріями
];
  3. Очищення HTML:
    • Перейдіть у index.html. Видаліть усі теги <article class="product-card">... з вашого контейнера <div class="products-grid">. Залиште цей контейнер абсолютно порожнім (або зі вказаним id="products-container").
  4. Алгоритм Рендерингу (Генерація верстки через JS):
    • У файлі main.js знайдіть ваш контейнер за допомогою DOM API (методом querySelector).

    • Напишіть цикл або використайте метод масиву map, щоб для кожного об’єкта товару згенерувати шматок HTML-коду (рядок тексту).

      const container = document.querySelector(".products-grid");

// Використовуємо .map() щоб перетворити масив об'єктів на масив HTML-рядків
const htmlString = products
  .map((product) => {
    return `
        <article class="product-card">
            <img src="${product.image}" alt="${product.title}">
            <h3>${product.title}</h3>
            <p class="price">${product.price} грн</p>
            <button class="btn btn-buy" data-id="${product.id}">Купити</button>
        </article>
    `;
  })
  .join(""); // Об'єднуємо масив рядків в ОДИН великий текст

// Вставляємо згенерований текст на сторінку
container.innerHTML = htmlString;
  5. Збереження (Commit & Push):
    • Перевірте відображення: сайт має виглядати ТОЧНО так само, як і в Практичній 5, але тепер картки генеруються скриптом і беруть дані зі змінної в main.js.
    • Зробіть коміт Add dynamic rendering of products from data array та відправте на GitHub. Ваша сторінка автоматично оновиться в мережі!

Результат

Вперше ви розмежували “Дані” (main.js) та “Відображення” (index.html). 100 товарів тепер можна легко додати, просто вписавши 100 об’єктів у масив, без дублювання складної HTML розмітки.

Контрольні питання

  1. Що таке “Шаблонні рядки” (Template Literals) у JavaScript і чим зручні зворотні лапки (`) у порівнянні зі звичайними (') чи подвійними (") при створенні HTML?
  2. Яка різниця між методом масиву .forEach() та .map()? Чому в нашому прикладі використано саме .map() в комбінації з .join('')?
  3. Чому ми створюємо масив товарів за допомогою ключового слова const, хіба його елементи не можна буде пізніше змінити / відсортувати?
  4. Для чого ми зберегли id в атрибуті кнопки як data-id="${product.id}" (відомий як Data-атрибут)? (Підказка: знадобиться для майбутнього кошика).
  5. Навіщо скриптам додають атрибут type="module" під час підключення до сторінки? Що це змінює у поведінці JS?