JavaScript · Синтаксис · Початковий рівень

Основи ООП

11 завдань

Практичні завдання з основ ООП в JavaScript: створення класів та об'єктів, властивості, методи, конструктор, зміна стану об'єкта та просте моделювання сутностей.

Короткий вступ до теми та пояснення перед вправами (вправи нижче):

Класи й об'єкти — ідея

#
Клас — це шаблон. Об'єкт — це те, що ви будуєте за цим шаблоном. Один і той самий клас може породити багато об'єктів, кожен із власними незалежними даними. ```javascript class BankAccount { constructor(balance) { this.balance = balance; } } const acc1 = new BankAccount(100); const acc2 = new BankAccount(500); console.log(acc1.balance); // 100 console.log(acc2.balance); // 500 ``` acc1 і acc2 — незалежні об'єкти. Зміна acc1.balance не впливає на acc2. Класи об'єднують дві речі: дані (властивості) і поведінку (методи). Метод — це функція, визначена всередині класу. Саме таке об'єднання і є головною ідеєю об'єктно-орієнтованого програмування. Якщо ви вже знайомі з Python: те, що Python називає self, JavaScript називає this. Те, що Python називає __init__, JavaScript називає constructor. Концепція ідентична — лише синтаксис відрізняється.

constructor і this

#
constructor — це метод, який JavaScript викликає автоматично при створенні нового об'єкта через new. Він налаштовує початковий стан екземпляра. ```javascript class Rectangle { constructor(width, height) { this.width = width; this.height = height; } } const r = new Rectangle(3, 4); console.log(r.width, r.height); // 3 4 ``` this — це посилання на об'єкт, що створюється. Коли ви пишете this.width = width, ви зберігаєте значення на самому об'єкті. Кожна властивість, яку має пам'ятати об'єкт, має бути присвоєна через this. На відміну від Python's self, this не оголошується як параметр — JavaScript надає його автоматично всередині будь-якого методу. ```javascript class Rectangle { constructor(width, height) { this.width = width; this.height = height; } area() { return this.width * this.height; } } const r = new Rectangle(3, 4); console.log(r.area()); // 12 ``` Методи в класі JavaScript визначаються без ключового слова function — лише ім'я і дужки. Всередині методу this дає доступ до власних властивостей об'єкта.

Поширені патерни класів

#
Метод, що змінює стан об'єкта — нічого не повертає, лише змінює властивість: ```javascript class Counter { constructor(value) { this.value = value; } increment() { this.value++; } } const c = new Counter(0); c.increment(); c.increment(); console.log(c.value); // 2 ``` Метод, що перевіряє умову і повертає булеве значення: ```javascript class Person { constructor(name, age) { this.name = name; this.age = age; } isAdult() { return this.age >= 18; } } ``` Метод, що обчислює щось на основі властивостей і повертає значення: ```javascript class Temperature { constructor(celsius) { this.celsius = celsius; } toFahrenheit() { return this.celsius * 9 / 5 + 32; } } ``` Метод, що змінює стан із параметром: ```javascript class BankAccount { constructor(balance) { this.balance = balance; } deposit(amount) { this.balance += amount; } } ``` Патерн завжди однаковий: звертаємося до потрібного через this, обчислюємо або змінюємо, повертаємо лише тоді, коли є змістовне значення.

Вправи:

01

Клас User з ім’ям.

#

Створіть клас User з властивістю name. Створіть об’єкт цього класу та виведіть його ім’я.

class User {
    // ваш код тут
}
let user = new User("Alex");
console.log(user.name);
Рішення 
class User {
    constructor(name) {
        this.name = name;
    }
}
let user = new User("Alex");
console.log(user.name);

// або можна створити метод, який повертає ім’я
class User {
    constructor(name) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}
02

Клас Car: бренд і рік.

#

Створіть клас Car з властивостями brand і year. Створіть об’єкт і виведіть рядок: "Car: Toyota, 2020"

class Car {
    // ваш код тут
}
Рішення 
class Car {
    constructor(brand, year) {
        this.brand = brand;
        this.year = year;
    }
}
let car = new Car("Toyota", 2020);
console.log(`Car: ${car.brand}, ${car.year}`);
03

Лічильник з increment.

#

Створіть клас Counter з властивістю value. Додайте метод increment, який збільшує значення на 1.

class Counter {
    // ваш код тут
}
let c = new Counter(0);
c.increment();
console.log(c.value);
Рішення 
class Counter {
    constructor(value) {
        this.value = value;
    }
    increment() {
        this.value += 1;
    }
}
let c = new Counter(0);
c.increment();
console.log(c.value);

// або так можна: increment може повертати нове значення
class Counter {
    constructor() {
        this.value = 0;
    }

    increment() {
        this.value += 1;
        return this.value;
    }
}
04

Площа прямокутника.

#

Створіть клас Rectangle з властивостями width і height. Додайте метод area, який повертає площу.

class Rectangle {
    // ваш код тут
}
let rectangle = new Rectangle(3, 4);
console.log(rectangle.area());
Рішення 
class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
    area() {
        return this.width * this.height;
    }
}
let rectangle = new Rectangle(3, 4);
console.log(rectangle.area());
05

Привітання методом класу.

#

Створіть клас Greeting з методом sayHello, який повертає рядок "Hello!".

class Greeting {
    // ваш код тут
}
let greeting = new Greeting();
console.log(greeting.sayHello());
Рішення 
class Greeting {
    sayHello() {
        return "Hello!";
    }
}
let greeting = new Greeting();
console.log(greeting.sayHello());
06

Перевірка повноліття.

#

Створіть клас Person з властивостями name і age. Додайте метод isAdult, який повертає true, якщо вік 18 або більше.

class Person {
    // ваш код тут
}
let person = new Person("John", 20);
console.log(person.isAdult());
Рішення 
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    isAdult() {
        return this.age >= 18;
    }
}
let person = new Person("John", 20);
console.log(person.isAdult());
07

Поповнення банківського рахунку.

#

Створіть клас BankAccount з властивістю balance. Додайте метод deposit, який збільшує баланс.

class BankAccount {
    // ваш код тут
}
let account = new BankAccount(100);
account.deposit(50);
console.log(account.balance);
Рішення 
class BankAccount {
    constructor(balance) {
        this.balance = balance;
    }
    deposit(amount) {
        this.balance += amount;
    }
}
let account = new BankAccount(100);
account.deposit(50);
console.log(account.balance);

// або так можна: явно не дозволяти поповнювати рахунок від’ємною сумою
class BankAccount {
    constructor(balance) {
        this.balance = balance;
    }

    deposit(amount) {
        if (amount > 0) {
            this.balance += amount;
        }
    }
}
08

Конвертація Celsius у Fahrenheit.

#

Створіть клас Temperature з властивістю celsius. Додайте метод toFahrenheit, який повертає температуру у градусах Фаренгейта. Формула: celsius * 9 / 5 + 32.

class Temperature {
    // ваш код тут
}
let temperature = new Temperature(0);
console.log(temperature.toFahrenheit());
Рішення 
class Temperature {
    constructor(celsius) {
        this.celsius = celsius;
    }
    toFahrenheit() {
        return this.celsius * 9 / 5 + 32;
    }
}
let temperature = new Temperature(0);
console.log(temperature.toFahrenheit());
09

Довжина повідомлення методом.

#

Створіть клас Message з властивістю text. Додайте метод getLength, який повертає довжину повідомлення.

class Message {
    // ваш код тут
}
let message = new Message("Hello world");
console.log(message.getLength());
Рішення 
class Message {
    constructor(text) {
        this.text = text;
    }
    getLength() {
        return this.text.length;
    }
}
let message = new Message("Hello world");
console.log(message.getLength());
10

Таймер з додаванням секунд.

#

Створіть клас Timer з властивістю seconds. Додайте метод addTime, який збільшує час на вказану кількість секунд.

class Timer {
    // ваш код тут
}
let timer = new Timer(10);
timer.addTime(5);
console.log(timer.seconds);
Рішення 
class Timer {
    constructor(seconds) {
        this.seconds = seconds;
    }
    addTime(extra) {
        this.seconds += extra;
    }
}
let timer = new Timer(10);
timer.addTime(5);
console.log(timer.seconds);
11

Клас Formatter для рядків.

#

Напишіть клас Formatter із властивістю string в об’єкта. Під час створення екземпляра класу рядок передається в constructor і зберігається в this.string. У класу має бути кілька методів, які повертають змінений варіант цього рядка: - метод trim(length) повертає рядок, обрізаний до вказаної довжини, і додає в кінець "[...]". Довжину цих доданих символів також потрібно враховувати. - метод truncate(length) повертає рядок, обрізаний до вказаної довжини, але не розриває слова, а обрізає за останнім пробілом у межах вказаної довжини. УВАГА: - вихідний рядок у this.string має залишатися незмінним; - не створюйте окремі властивості для результатів, повертайте нові значення з методів; - можна створювати службові властивості, наприклад для рядка "[...]"; - усередині методів можна використовувати звичайні локальні змінні, не все потрібно зберігати в this.

class Formatter {
    constructor(string) {
        // ваш код тут
    }
    trim(length) {
        // ваш код тут
    }
    truncate(length) {
        // ваш код тут
    }
}
let x = new Formatter("Цей рядок використовується тут лише як приклад і не має іншого сенсу.");
console.log(x.trim(15));
console.log(x.truncate(15));
console.log(x.string);
let y = new Formatter("Ура, у мене вийшло!.");
console.log(y.trim(8));
console.log(y.truncate(3));
console.log(y.string);
Рішення 
class Formatter {
    constructor(string) {
        this.string = string;
        this.end = "[...]";
    }

    trim(length) {
        if (length <= this.end.length) {
            return this.end.slice(0, length);
        }

        return this.string.slice(0, length - this.end.length) + this.end;
    }

    truncate(length) {
        const part = this.string.slice(0, length);
        const lastSpace = part.lastIndexOf(" ");
        return lastSpace === -1 ? part : part.slice(0, lastSpace);
    }
}

let x = new Formatter("Цей рядок використовується тут лише як приклад і не має іншого сенсу.");
console.log(x.trim(15));
console.log(x.truncate(15));
console.log(x.string);

let y = new Formatter("Ура, у мене вийшло!.");
console.log(y.trim(8));
console.log(y.truncate(3));
console.log(y.string);