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

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"];
  }
домашка з програмування

Домашнє завдання

1: Додайте ще два продукти так, як описано в завданні 3 класної роботи

2: Додайте новий ключ sale в myProducts. Це буде знижка. Вона може дорівнювати 0 (немає знижки) або числу від 1 до 100 (тоді вона показуватиме на скільки відсотків буде знижка). Пропишіть це поле для всіх товарів. Деяким видайте нульову знижку, деяким ні.

Оновіть відображення ціни.Поряд має писатися знижка(без картинки, тільки цифра).

Наприклад :

Ціна 250 (+знижка 20%)

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: внутрішній_відступ_невеличке_число;
}
домашка з програмування

Level Up!

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

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

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

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

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *