ООП в ES6

Task 01

Изучите структуру шаблона. Обратите внимание, что для классов сделаны отдельные файлы. Обратите внимание, как и в какой последовательности подключены файлы в index.html. Порядок подключения важен!!!!

В файле Goods.js создайте класс Goods. В конструкторе класса создайте два свойства. Первое - name, второе price. Как понятно из названия - имя товара и цена.

Для проверки сделанного напишите в unit_28.js следующий код:

const goods_1 = new Goods('apple', 23.5);
console.log(goods_1);

Если объект создан и в нем появилось свойство name равное 'apple' и свойство цены с заданным значением - переходите к следующему таску. Данную проверку в файле unit_28.js нужно удалить или закомментировать.

Task 02

Допишите в класс Goods свойства image - и count. Image - ссылка на изображение товара, а count - число, определяющее количество товара на складе.

Для проверки сделанного напишите в unit_28.js следующий код:

const goods_1 = new Goods('apple', 23.5, 'https://cdn0.iconfinder.com/data/icons/fruity-3/512/Apple-48.png', 400);
console.log(goods_1);

Если объект создан и в нем появились все заданные свойства - переходите к следующему таску. Данную проверку в файле unit_28.js нужно удалить или закомментировать.

Task 03

Время выводить товар на страницу. Допишем в класс Goods метод draw() который будет делать следующее:

<div class="goods">
  <h1>Тут будет имя товара</h1>
  <p class="price">Тут будет цена товара</p>
  <img src="тут будет ссылка на изображение" alt="тут будет имя товара">
</div>

Конечно же вместо "Тут будет имя товара" - вы подставите свойство this.name и так далее. Надеюсь создавать данную верстку вы будете через createElement (Юнит 9 - если забыли).

Метод должен возвращать созданный div.

Теперь как проверить данный код? Для проверки сделанного напишите в unit_28.js следующий код:

const goods_1 = new Goods('apple', 23.5, 'https://cdn0.iconfinder.com/data/icons/fruity-3/512/Apple-48.png', 400 );
console.log(goods_1);
// И теперь выведем на страницу
document.querySelector('.out-3').append(goods_1.draw());

Если все верно сделано - то на странице появится верстка товара.

Task 04

Теперь самостоятельно создайте еще один объект на основе класса Goods, задайте свойства и выведите в .out-4.