diff --git a/HomeWork/js/script.js b/HomeWork/js/script.js index e69de29..b39a048 100644 --- a/HomeWork/js/script.js +++ b/HomeWork/js/script.js @@ -0,0 +1,26 @@ +'use strict'; + +function Calculator() { + this.firstValue = 0; + this.secondValue = 0; + + this.read = function() { + this.firstValue = parseFloat(prompt('Введіть перше число:', 0)); + this.secondValue = parseFloat(prompt('Введіть друге число:', 0)); + } + + this.sum = function() { + return this.firstValue + this.secondValue; + }; + + this.mul = function() { + return this.firstValue * this.secondValue; + }; +} + +let calculator = new Calculator(); + +calculator.read(); + +console.log('Сума:' + calculator.sum()); +console.log('Добуток:' + calculator.mul()); \ No newline at end of file diff --git a/Lesson/index.html b/Lesson/index.html index 1dc807f..3fee539 100644 --- a/Lesson/index.html +++ b/Lesson/index.html @@ -7,9 +7,9 @@ Lesson 7 - +
diff --git a/Lesson/js/script.js b/Lesson/js/script.js index 9dbd90b..a0261c7 100644 --- a/Lesson/js/script.js +++ b/Lesson/js/script.js @@ -1,77 +1,107 @@ -// class CircleBox { -// constructor(selector) { -// this.$el = document.querySelector(selector); -// } - -// hide() { -// this.$el.style.display = "none"; -// } - -// show() { -// this.$el.style.display = "block"; -// } -// } - -// class CircleItem extends CircleBox { -// constructor(options) { -// super(options.selector); -// this.$el.style.width = options.size + "px"; -// this.$el.style.height = options.size + "px"; -// this.$el.style.borderRadius = "50%"; -// this.$el.style.background = options.color; -// } -// } - -// const CircleRed = new CircleItem({ -// selector: "#circleRed", -// color: "red", -// size: 50, -// }); - -// const CircleGreen = new CircleItem({ -// selector: "#circleGreen", -// color: "green", -// size: 80, -// }); - -// const CircleBlack = new CircleItem({ -// selector: "#circleBlack", -// color: "black", -// size: 30, -// }); - -// function Car(name, color) { -// this.name = name; -// this.color = color; -// } - -// Car.prototype.message = function () { -// console.log(`${this.name} is ${this.color} color`); -// }; - -// Car.prototype.start = function () { -// console.log(`${this.name} is start!!!`); -// }; - -// const BMW = new Car("bmw", "red"); -// const opel = new Car("opel", "green"); - -// let message = { -// messageHello() { -// console.log(`Hello, ${this.name}`); -// }, - -// messageBey() { -// console.log(`Bye, ${this.name}`); -// }, -// }; - -// class User { -// constructor(name) { -// this.name = name; -// } -// } - -// Object.assign(User.prototype, message); - -// new User("Іван").messageHello(); +class CircleBox { + constructor(selector) { + this.$el = document.querySelector(selector); + } + + hide() { + this.$el.style.display = "none"; + } + + show() { + this.$el.style.display = "block"; + } +} + +class CircleItem extends CircleBox { + constructor(options) { + super(options.selector); + this.$el.style.width = options.size + "px"; + this.$el.style.height = options.size + "px"; + this.$el.style.borderRadius = "50%"; + this.$el.style.background = options.color; + } +} + +const CircleRed = new CircleItem({ + selector: "#circleRed", + color: "red", + size: 50, +}); + +const CircleGreen = new CircleItem({ + selector: "#circleGreen", + color: "green", + size: 80, +}); + +const CircleBlack = new CircleItem({ + selector: "#circleBlack", + color: "black", + size: 30, +}); + + + +///--------------- + +function Car(name, color) { + this.name = name; + this.color = color; +} + +Car.prototype.message = function () { + console.log(`${this.name} is ${this.color} color`); +}; + +Car.prototype.start = function () { + console.log(`${this.name} is start!!!`); +}; + +const BMW = new Car("bmw", "red"); +const opel = new Car("opel", "green"); + + +// Mixin +///-------------- +let message = { + messageHello() { + console.log(`Hello, ${this.name}`); + }, + + messageBey() { + console.log(`Bye, ${this.name}`); + }, +}; + +class User { + constructor(name) { + this.name = name; + } +} + +Object.assign(User.prototype, message); + +new User("Іван").messageHello(); + +if (!Math.trunc){};//якщо новий метод не працює, пишемо його логіку самостійно + +// додавати опис компонентів високого рівня, що вони роблять та як взаємодіють + +// коментувати +// -- загальну архітектуру високого рівня +// -- використання функцій +// -- важливі рішення якщо вони не очевидні + +// писати читабельний та максимально зрозумілий простий код + +function createEleme() {} + +function useElem() {} + +function useElemItem(){} + +let elem = createElem(); // оголошуємо або спочатку або вкінці +useElem(); +useElemItem(); + +// використовувати зрозумілі імена змінних та функцій