Оживи свій сайт — додай інтерактивність, анімації та логіку!
📚 Урок 8 • Frontend • 30 хв читанняJavaScript (JS) — це мова програмування, яка додає інтерактивність веб-сторінкам. Якщо HTML — це скелет, CSS — одяг, то JavaScript — це мозок і м'язи!
Без JavaScript сайт — це просто картинка. З JavaScript — це жива програма! Кнопки реагують на кліки, форми перевіряються, контент змінюється без перезавантаження сторінки. Магія! ✨
Кліки, наведення, введення тексту
Динамічне оновлення без перезавантаження
Перевірка даних перед відправкою
Складні інтерактивні ефекти
Отримання та відправка даних (API)
LocalStorage, cookies
Це дві абсолютно різні мови! Назва JavaScript — це маркетинговий хід 90-х. Не плутай!
<!DOCTYPE html> <html> <head> <title>Мій сайт</title> </head> <body> <h1>Привіт, JavaScript!</h1> <!-- JS підключаємо перед </body> --> <script src="script.js"></script> </body> </html>
Щоб HTML встиг завантажитись до виконання скрипта. Або використовуй атрибут defer: <script src="script.js" defer></script>
<script> // JavaScript код прямо в HTML alert('Привіт!'); </script>
Відкрий DevTools (F12 або Ctrl+Shift+I) → вкладка Console. Там можна писати і тестувати JS код!
console.log('Привіт, світ!'); // вивід в консоль alert('Вікно повідомлення'); // спливаюче вікно 2 + 2 // → 4
Змінна — це "коробка" для зберігання даних. В JS є три способи створити змінну:
// let — можна змінювати значення let name = 'Кудик'; name = 'Koodi'; // ✅ можна // const — не можна змінювати (константа) const PI = 3.14159; PI = 3; // ❌ помилка! // var — застарілий спосіб (не використовуй!) var oldWay = 'не рекомендовано'; // Правило: використовуй const за замовчуванням // Якщо потрібно змінювати — тоді let const age = 25; let score = 0; score = score + 10; // score = 10
// String — рядок (текст) const greeting = 'Привіт'; const name = "Кудик"; const template = `Привіт, ${name}!`; // шаблонний рядок // Number — число const age = 25; const price = 99.99; // Boolean — true або false const isStudent = true; const isPremium = false; // Array — масив (список) const colors = ['red', 'green', 'blue']; // Object — об'єкт (ключ: значення) const user = { name: 'Кудик', age: 5, isOwl: true };
Використовуй зворотні лапки ` та ${змінна} для вставки значень: `Привіт, ${name}!`
// Арифметичні 5 + 3 // 8 — додавання 10 - 4 // 6 — віднімання 3 * 4 // 12 — множення 15 / 3 // 5 — ділення 17 % 5 // 2 — остача від ділення 2 ** 3 // 8 — степінь (2³) // Порівняння 5 === 5 // true — строга рівність 5 !== 3 // true — не дорівнює 10 > 5 // true — більше 3 < 7 // true — менше 5 >= 5 // true — більше або дорівнює 3 <= 2 // false — менше або дорівнює // Логічні true && true // true — І (обидва true) true || false // true — АБО (хоча б один true) !true // false — НЕ (інверсія) // Скорочені let x = 5; x += 3; // x = x + 3 → 8 x++; // x = x + 1 → 9
Завжди використовуй === (строга рівність)! == може давати дивні результати: '5' == 5 → true, але '5' === 5 → false
const age = 18; // Проста умова if (age >= 18) { console.log('Доступ дозволено'); } // if / else if (age >= 18) { console.log('Ти дорослий'); } else { console.log('Ти ще малий'); } // if / else if / else const score = 85; if (score >= 90) { console.log('Відмінно! 🏆'); } else if (score >= 70) { console.log('Добре! 👍'); } else { console.log('Потрібно ще попрацювати'); }
const age = 20; // умова ? якщо_true : якщо_false const status = age >= 18 ? 'Дорослий' : 'Дитина'; console.log(status); // 'Дорослий'
// for — коли знаємо скільки разів for (let i = 0; i < 5; i++) { console.log(`Ітерація ${i}`); } // 0, 1, 2, 3, 4 // while — поки умова true let count = 0; while (count < 3) { console.log(count); count++; } // for...of — перебір масиву const fruits = ['🍎', '🍌', '🍊']; for (const fruit of fruits) { console.log(fruit); } // forEach — метод масиву fruits.forEach(fruit => console.log(fruit));
Функція — це блок коду, який можна викликати багато разів:
// 1️⃣ Оголошення функції (function declaration) function greet(name) { return `Привіт, ${name}!`; } console.log(greet('Кудик')); // Привіт, Кудик! // 2️⃣ Функціональний вираз const add = function(a, b) { return a + b; }; console.log(add(2, 3)); // 5 // 3️⃣ Стрілкова функція (arrow function) — сучасний спосіб! const multiply = (a, b) => a * b; console.log(multiply(4, 5)); // 20 // Стрілкова з кількома рядками const calculateArea = (width, height) => { const area = width * height; return area; };
Для простих функцій використовуй стрілкові функції — вони коротші та сучасніші! const sum = (a, b) => a + b;
const fruits = ['🍎', '🍌', '🍊']; // Доступ за індексом (починається з 0!) fruits[0] // '🍎' fruits[2] // '🍊' // Довжина fruits.length // 3 // Додати в кінець fruits.push('🍇'); // ['🍎', '🍌', '🍊', '🍇'] // Видалити з кінця fruits.pop(); // повертає '🍇' // Знайти індекс fruits.indexOf('🍌') // 1 // Перевірити наявність fruits.includes('🍎') // true // map — трансформація кожного елемента const numbers = [1, 2, 3]; const doubled = numbers.map(n => n * 2); // [2, 4, 6] // filter — фільтрація const even = numbers.filter(n => n % 2 === 0); // [2]
DOM (Document Object Model) — це представлення HTML як дерева об'єктів, з яким можна працювати через JavaScript.
// Знайти елемент const title = document.querySelector('h1'); // перший h1 const btn = document.querySelector('.btn'); // по класу const header = document.querySelector('#header'); // по ID const items = document.querySelectorAll('.item'); // всі елементи // Змінити контент title.textContent = 'Новий заголовок'; // тільки текст title.innerHTML = '<span>HTML</span>'; // з HTML // Змінити стилі title.style.color = 'blue'; title.style.fontSize = '32px'; // Додати/видалити клас title.classList.add('active'); title.classList.remove('active'); title.classList.toggle('active'); // додати/видалити // Атрибути btn.getAttribute('href'); btn.setAttribute('href', 'https://koodi.ua'); // Створити елемент const newDiv = document.createElement('div'); document.body.appendChild(newDiv);
const btn = document.querySelector('.btn'); // addEventListener — додати обробник події btn.addEventListener('click', () => { alert('Кнопку натиснуто!'); }); // Популярні події: // click — клік мишкою // mouseover — наведення // mouseout — відведення // keydown — натискання клавіші // submit — відправка форми // input — введення в поле // Приклад з параметром event btn.addEventListener('click', (event) => { console.log(event.target); // елемент, на який клікнули event.preventDefault(); // скасувати стандартну дію }); // Форма const form = document.querySelector('form'); form.addEventListener('submit', (e) => { e.preventDefault(); // не перезавантажувати сторінку console.log('Форму відправлено!'); });
Створимо простий лічильник з кнопками:
<!-- HTML --> <div class="counter"> <button class="btn-minus">−</button> <span class="count">0</span> <button class="btn-plus">+</button> </div> // JavaScript const countElement = document.querySelector('.count'); const btnMinus = document.querySelector('.btn-minus'); const btnPlus = document.querySelector('.btn-plus'); let count = 0; // Функція оновлення відображення const updateDisplay = () => { countElement.textContent = count; }; // Обробники кліків btnPlus.addEventListener('click', () => { count++; updateDisplay(); }); btnMinus.addEventListener('click', () => { count--; updateDisplay(); });
Асинхронний код, проміси
Запити на сервер, робота з API
Деструктуризація, spread, модулі
Сучасні фреймворки
JavaScript на сервері
Типізований JavaScript
