10. Об’єкти у JavaScript

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

Об’єкти

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

Об’єкт може бути створений за допомогою фігурних дужок з необов’язковим списком властивостей. Властивість – це пара “ключ: значення”, де ключ – це рядок (ще можна його назвати “ім’ям властивості”), а значення може бути чим завгодно.

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

// Example 1:
const car = {type:"Fiat", model: 500, color:"white"};
// Example 2:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

В першому прикладі у нас є об’єкт car (машина). У нього колька властивостей : type (тип машини), model (модель) та color (колір). У кожної властивості свої значення. Ці значення можна задавати різного типу.

Розгляньте другий приклад.

1. Як називається об’єкт ?
2. Як називається ключ для першої властивості ? Яке у неї значення ?
3. Яке значення має властивість з ключем age ?

Наче не дуже складно ? Але такі об’єкти можуть бути геть різної природи і можуть містити в собі ще складнішу структуру. Ось ще приклад :

const ages = Object.create(null, {
  alice: { firstName:"Alice", lastName:"Spenser", age:18, eyeColor:"green" },
  bob: { firstName:"Bob", lastName:"Baker", age:27, eyeColor:"grey" }
});

Тут вже є кілька людей. У кожного свій набір властивостей. Такі структуровані дані зазвичай дістають з бази даних і потім розміщують на сайті.

Створюємо магазин

1: Зроби Fork з проєкту

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

Файл html. Тут небагато, та все ж. Цей рядок підключає бібліотеку ajax, яка допомагає робити різні запити без оновлення сторінки.

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js">

Кнопка :

<button class="sort sort-name" data-sort="name">Назва</button>

Вже вміє сортувати за іменем.

Ще є список ul, який виглядає пустим, але це тому, що наповнюється він у файлі javascript.

Файл js.

Має змінну-об’єкт з усіма продуктами в нашому магазині. Давайте її детально роздивимося:

let myProducts = {
  cucumber: {     // id  продукту. 
    name: "Pepsi Cucumber", // властивість назва і її значення "Pepsi Cucumber"
    price: 36,
    country: "US",
    tag: "#soda",
    img:
      "https://i.pinimg.com/originals/47/d1/83/47d1832ff10a7bb84aa01463e51b10bd.jpg"
  },
  baobab: {
...
  }
};

ID продукту зазвичай унікальне і треба воно, щоб однозначно визначати продукт, який захочуть видалити, оновити чи купити. Властивості ім’я, ціна, країна виробництва, тег, картинка – описують продукт.

Далі іде цикл для створення табличок з товарами. Ми цикл ще не вчили, але основна його мета : пройтися по всім товарам в myProducts і для кожного з них виконати певні дії. В нашому випадку відобразити властивості на екрані.

appendChild – це функція, яка додає елемент в середину DOM дерева. Наприклад, там ми можемо додати в середи списку ul новий елемент списку li :

  let li = document.createElement("li");
  ul.appendChild(li);

З файлом стилів пропоную розібрати самостійно. Він може бути трохи складним, але сьогодні наша увага фокусуватиметься в основному на скриптах.

В кінці файлу ми зустрічаємо налаштування сортування і сторінок :

//############Sorting setings ###################################
var options = {
  valueNames: ["name"],
  page: 3,
  pagination: true
};

var userList = new List("product-list", options);

Тут список полів для сортування і деякі інші налаштування. Нас цікавить список полів. Ми його будемо розширяти.

Твій інтернет-магазин

2: Оберіть, що продаватиме ваш магазин і додайте 5 продуктів у магазин. Задайте їм різні значення. Магазин в прикладі, як ви, мабуть, догадалися, продає Pepsy з дивними смаками. Оберіть іншу тему для власного магазину. Блакитним показано те, що додали. Також в прикладі є невеличкі скорочення.

Постарайтесь не змінювати поки ключі в існуючих полях. Але можете додати нові поля ключ-значення, якщо цих не вистачає

let myProducts = {
  cucumber: {    
  ...
  },
  baobab: {
  ...
  },
  saltyWaterMelon: {
    name: "Pepsi Salty Watermelon",
    price: 150,
    country: "US",
    tag: "#soda",
    img:
      "https://hips.hearstapps.com/bpc.h-cdn.co/assets/17/20/salty-watermelon.jpg"
  },
  sakura: {
    name: "Pepsi Sakura",
    price: 120,
    country: "JP",
    tag: "#soda",
    img:
      "https://hips.hearstapps.com/bestproducts/assets/17/20/pepsi-sakura.jpg"
  },
  yogurt: {
    name: "Pepsi Yogurt Flavor",
    price: 280,
    country: "AF",
    tag: "#soda",
    img: "https://media.techeblog.com/images/strangepepsiflavor.jpg"
  }
};

3: Давайте потренуємося додавати й видаляти продукти. Допишіть код після створення змінної myProducts (підправте код для ваших продуктів):

// add 
myProducts["fire"] = {
  name: "Pepsi Fire",
  price: 280,
  country: "UK",
  tag: "#soda",
  img: "https://hips.hearstapps.com/bpc.h-cdn.co/assets/17/20/pepsi-fire.jpg"
};
// del
delete myProducts["yogurt"];

Ви можете здивуватись: чому якісь дивні функції, замість того, щоб відредагувати один великий об’єкт myProducts руками на початку скриптів ?

Насправді в реальному магазині чи будь-якому іншому проєкт початковий об’єкт myProducts може бути витягнутий з бази даних, а додавання продукту нового обирає продавець магазину на спеціальній формі. Тоді новий продукт додається у myProducts і потім записується в базу. Те саме і з видаленням.

4: Давайте тепер додамо сортування за іншими полями. Знайдіть такий код і подумайте, що треба додати чи змінити, щоб створити нові кнопки для сортування за ціною, країною виробництва, тегами

 <button class="sort sort-name" data-sort="name">Назва</button>

var options = {
  valueNames: ["name"],
  page: 3,
  pagination: true
};

Не хвилюйтесь за стилі. Вони вже прописані для наших значень

5: Додайте для всіх товарів ключ topSaled (Хіт продажів) зі значенням true або false (хоча б один має мати true). Змініть скрипти, щоб аналізувати це поле : якщо товар є хітом продаж, то будемо відображати невеличку емблему-картинку

Замініть рядок td_name.innerText = product[“name”]; на нехитру умову :

  if (product["topSaled"] == true) {
    td_name.innerHTML = `<p>${product["name"]}</p>`;
    td_name.innerHTML += `<img src="https://sigmamobile.net/wp-content/themes/sigmamobile/img/badge/ua/xhit.png.pagespeed.ic.pAVA6uLQxx.png" class="top">`;
  } else {
    td_name.innerText = product["name"];
  }

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

<div class="advertisement" id="advertisement">
  <a href="Посилання_куди_переходити" target="_blank">
    <h1>Тут що рекламуємо</h1>
  </a>
  <button><img src="Картинка_зі_значком_закриття" onclick=hide()></button>
</div>

function hide() {
  var el = document.getElementById("advertisement");
  el.style.display = "none";
}

.advertisement {
  text-align: center;
  background-color: колір_фону;
  position: fixed; 
  width: ширина_банера_вкажіть_у_відсотках;
  top: відступ_зверху_число_px;
  left:  відступ_зліва_вкажіть_у_відсотках;
  padding: внутрішній_відступ_невеличке_число;
}

1: Додайте ще одне поле для кожного товару, наприклад “Характеристики”. Відобразіть це поле на формі. Зробіть сортування по ньому, додайте йому власний колір в стилях (колір кнопки сортування і підкреслення)

2: Додайте внизу сторінки блок “Наші партнери”. В ньому дві картинки (картинки на ваш смак).
Перша картинка має зникати при наведенні миші.
У другої картинки має з’являтися рамка при наведенні миші.

Підказка: у codepen є певний глюк щодо відображення картинок у стилях css. Тому можна зробити завдання або в replit, або скористатися цими порадами :

Всі картинки пропишіть в html, не у css
Картинки оберніть у div. Ховатись допоможе: opacity: 0; або display: none;