На цьому уроці ми навчимося створювати класи у Javascript та зробимо свої перші кроки у таємничий світ ООП. Відкрийте для себе новий рівень програмування! Ми створимо картки з героями Гаррі Поттера і розберемося у тому, як класи допомагають структурувати великий об’єм інформації.
💡 Що таке класи у JavaScript?
Класи в JavaScript — це спосіб створювати шаблони об’єктів із подібними властивостями та методами. Вони допомагають легко створювати багато об’єктів з однаковою структурою.
Уяви, що клас — це як креслення для будинку. За цим кресленням можна збудувати багато однакових будинків, але кожен може мати свої особливості (наприклад, колір стін або форму даху).
🛠️ Як використовуються класи?
Класи використовуються, коли потрібно створити багато об’єктів з однаковими властивостями та методами. Наприклад:
- Герої в грі: Кожен герой має ім’я, здоров’я та атаку.
- Студенти в школі: Кожен має ім’я, клас і оцінки.
- Машини: Кожна машина має марку, модель і колір.
🏗️ Як створити клас у JavaScript?
class Person {
constructor(name, age) {
this.name = name; // Атрибут (властивість)
this.age = age; // Атрибут (властивість)
}
// Метод
sayHello() {
console.log(`Привіт! Я ${this.name}, мені ${this.age} років.`);
}
}
// Створення об'єкта (екземпляра класу)
const milana= new Person("Мілана", 16);
milana.sayHello(); // Виведе: Привіт! Я Мілана, мені 16 років.📝 Розберемо по частинах:
1. Ключове слово class: це команда “Створити новий шаблон об’єктів”.
2. Конструктор (constructor()): це спеціальний метод, який викликається при створенні нового об’єкта.
- Він приймає параметри (наприклад, ім’я та вік).
- Задає значення атрибутів (властивостей).
- Використовується слово
this, щоб показати, що атрибути належать саме цьому об’єкту.
3. Атрибути (властивості): це характеристики об’єкта, що описують його стан.
У прикладі це name та age.
4. Методи: це функції всередині класу, які описують поведінку об’єкта.
У прикладі метод sayHello() виводить привітання.
🔄 Як створити об’єкт на основі класу?
const milana= new Person("Мілана", 16);Це означає:
- Створити новий об’єкт
anna, використовуючи класPerson. - Викликати конструктор і передати в нього ім’я та вік.
- Зберегти ці значення у відповідні атрибути.
Схожим чином ми можемо створити інший об’єкт:
const maria = new Person("Марія", 17);🌟 Для чого використовуються класи?
- Масштабованість: Легко створювати багато об’єктів з однаковою структурою.
- Зручність: Методи всередині класу допомагають групувати поведінку об’єкта.
- Чистота коду: Замість написання однакових функцій для кожного об’єкта, ми створюємо один клас і використовуємо його.
❓ Питання на мільйон!
- Уявіть, що ви програмуєте інтернет-магазин електроніки. Який клас створимо? Які можуть бути об’єкти у класі ? Які у них можуть бути атрибути?
- А тепер пишемо комп’ютерну гру (наприклад, про покемонів). Як назвемо клас ? Які об’єкти будуть у класі? Які можуть бути атрибути?
Практика. Створюємо класи у JavaScript
Спробуймо класи на практиці на прикладі героїв Гаррі Поттеру. Для початку, створимо клас у консолі, розберемо його на частинки та пограємося з ним. Далі додамо логіку, яка б презентувала наш клас на html сторінці.
Наш перший клас на JavaScript у консолі
1: Створіть новий проєкт у Javascript. Додайте наступний код у файл html. Також створіть файл для скриптів, який підключений у html
<script src="script.js"></script>
..
<div id="characters"></div>2: window.onload – це функція, яка загружається при завантаженні сторінки. В середині неї ми і створимо наші класі та увесь інший код. Створіть клас Character з атрибутами name (ім’я) та house (факультет). Та метод introduce(), який допоможе герою привітатися.
window.onload = function () {
class Character {
constructor(name, house) {
this.name = name;
this.house = house;
}
introduce() {
console.log(`Привіт! Я ${this.name} з факультету ${this.house}!`);
}
};3: В середині window.onload, але вже після класу створіть об’єкт harry. Викличте метод introduce() для harry. Відкрийте консоль браузера, щоб переконатись, що код працює.
const harry = new Character("Harry Potter", "Gryffindor");
// Виклик методів
harry.introduce();4: Додайте ще два атрибути image та houselogo.
5: Додайте метод getHouseMotto() для девізу факультету. Замініть сердечка на відповідні факультети та девізи:
Девіз Gryffindor Сміливість, відвага, рішучість!
Девіз Slytherin це Хитрість, амбіційність, сила!
Девіз Ravenclaw це Мудрість, творчість, інтелект!
Девіз Hufflepuff це Вірність, працьовитість, справедливість!
getHouseMotto() {
const houseMottos = {
Gryffindor: "❤️ Сміливість, відвага, рішучість!",
💚: 💚,
💙: 💙,
💛: 💛,
};
return houseMottos[this.house] || "Невідомий факультет";
}houseMottos – це словник з девізів. Де ключ – назва факультету, а значення – девіз.
return houseMottos[this.house] || “Невідомий факультет”; каже, що ми повернемо значення девізу для факультету this.house, якщо знайдемо такий у списку. І повернемо “Невідомий факультет”, якщо факультет зададуть інший.
6: Схожим чином створіть метод getHouseLogo для класу. Він має повертати посилання на картинку для факультету. (Наприклад https://logos-world.net/wp-content/uploads/2021/08/Gryffindor-Symbol.png). Команда return має повертати картинку, якщо факультет знайдено і пустий рядок, якщо ні.
Змініть конструктор класу для атрибута houselogo, викликавши цей метод:
this.houselogo = this.getHouseLogo();7: Додайте метод showCharacterInfo(), який виводить інформацію про героя. Додайте у метод інфо про факультет, лого факультету та девіз.
console.log("=== Інформація про героя ===");
console.log(`Ім'я: ${this.name}`);8: В кінці коду, де ми створили об’єкт harry, викличте для harry метод showCharacterInfo().
9: Створіть новий об’єкт і зробіть з ним те ж, що ми проробили для harry.
Відображаємо клас візуально
Настав час попрацювати над візуалкою!
10: Додайте стилів для майбутніх карток з героями. Замініть сердечка на відповідні властивості (підказка: text-align, margin, width, padding, height, border, box-shadow).
Після додавання стилів нічого не має змінитися на екрані, ми ще не дописали код!
/* Стиль для картки */
.card {
display: inline-block;
💙: 10px; /* Зовнішній відступ*/
text-align: center; /* Вирівнювання тексту */
💛: 2px solid #333; /* Рамка для зображення */
border-radius: 8px;
💚: 10px; /* Внутрішній відступ в середині картки */
❤️: 220px; /* ширина картки*/
💙: 320px; /* висота картки*/
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); /* Тінь картки для ефекту об'єму */
}
/* Стиль для зображення в картці */
img {
💛: 200px; /* ширина зображення */
❤️: 260px; /* висота зображення */
object-fit: cover;
border-radius: 8px;
}
/* Стиль для заголовків та абзаців у картці */
h3,
p {
💚: 5px 0; /* Зовнішній відступ*/
}
11: Для початку переробимо наші об’єкти. Замість окремих об’єктів створімо список з об’єктів. Методи для об’єктів можна поки закоментувати або видалити.
Замініть другий елемент на дані реального героя. Додайте ще об’єктів у список з різних факультетів (всього 6 шт).
Якщо ви вже додали нові атрибути у наш клас, то створення об’єкта може відрізнятися!
const characters = [
new Character("Harry Potter", "Gryffindor", "https://images.mattel.net/image/upload/w_360,f_auto,c_scale/shop-contentstack/blt1c0f838945e594a6/627599ab4d9f892971292b4f/Shopper_HarryPotter_PLP_1-Header_360x400_M-2.jpg"),
new Character("💙", "💙", "💙"),
];12: Після створення об’єктів, почнемо створювати картки. Для початку дістанемо той одинокий елемент з id=”characters”, що є у нас у html-коді. І для кожного об’єкту з characters (зауважте цикл, що запускається по об’єкту) будемо створювати елементи html, але вже в наступних пунктах. Далі увесь наступний код пишемо в середині characters.forEach, бо це елементи для container
const container = document.getElementById("characters");
characters.forEach((character) => {
// тут створюємо елементи
});13: Додайте наступний код. Він створює елемент div з класом card. Зауважте, що ми прописуємо значення атрибута className для card
const card = document.createElement("div");
card.className = "card";Аналогічно у змінну img запишіть створення нового елементу img.
Атрибут src для img має дорівнювати character.image (посилання на картинку).
Атрибут alt для img має дорівнювати character.name(ім’я героя).
Додайте картинку і картку до елементів, які виводяться на екран.
card.appendChild(img);
container.appendChild(card);14: Тепер пропишемо поведінку при наведенні мишки перед командами appendChild. Має показуватися картинка з героєм (атрибут image об’єкту character), а якщо наводимо мишу на картинку, то показується картинка факультету (атрибут houselogo об’єкту character). Допишіть код, замінивши сердечка
// Додаємо події наведення мишки
img.addEventListener("mouseenter", () => {
img.src = 💙.💙;
});
img.addEventListener("mouseleave", () => {
img.src = 💛.💛;
});15: Під картинкою, але перед командами appendChild, допишемо ім’я героя і факультет. Зробіть по аналогії з завданням 13.
У змінну name запишіть створення нового елементу h3.
Атрибут textContent для h3 має дорівнювати character.name (ім’я героя).
У змінну house запишіть створення нового елементу p.
Атрибут textContent для p має дорівнювати House: ${character.house}.
16: Додайте блоки appendChild для name та house туди ж, куди прописували appendChild для img
card.appendChild(name);
card.appendChild(house);Ось такі картки у вас мають вийти в результаті:
Домашня робота
1: Зробіть завдання 1-10 (так, і 10-те також!) з класної роботи.
2: Додайте до вашого класу нові атрибути змініть методи та об’єкти, які необхідно, щоб вони працювали з новими атрибутами.
isQuidditchPlayer (Може приймати два значення: true – якщо герой грає\грав в команді факультету і false – якщо ні. )
patronus – патронус (тотемна тваринка) героя
3: Зробіть так, щоб patronus відображався на картці.
4: Якщо isQuidditchPlayer дорівнює true, то поряд з іменем героя має відображатися смайлик (на ваш вибір), який символізує причетність до відповідної команди. Якщо isQuidditchPlayer дорівнює false – то нічого не відображаємо.
5: Змініть стилі картки на ваш смак
Level Up
Класи у Javascript
1: Додайте метод parseltongue у клас з героями ГП. Він має писати ім’я героя на мові parseltongue (смайли можете обрати на ваш смак):
всі літери “а” в імені замінюються на 🐍,
всі літери “о” в імені замінюються на 🦎,
всі літери “е” в імені замінюються на 🪱,
всі літери “і” в імені замінюються на 🕷,
всі літери “т” в імені замінюються на 🦗,
всі літери “р” в імені замінюються на 🦂.
Оновіть showCharacterInfo, щоб він виводив ім’я мовою parseltongue
2: Створіть клас і картки на власну тему за аналогією з класною роботою. Є кілька умов:
- об’єкти мають мати атрибут, який відносить їх до групи (як факультети у класній роботі)
- розфарбуйте фон картки залежно від того, до якої групи вона належить.
Хочете дізнатися більше ? Переходьте на сторінку з уроками по CSS та Javascript і прокачайте навички з веброзробки 😎🤖 !!!
