JavaScript з нуля: як зробити вебсторінку інтерактивною та навчитися програмувати для браузера

Вступ

У попередніх статтях ми познайомилися з HTML і CSS.

HTML дозволяє створювати структуру вебсторінки: заголовки, абзаци, зображення, посилання, форми та інші елементи.

CSS відповідає за зовнішній вигляд: кольори, шрифти, відступи, розташування блоків, адаптивність та анімації.

Але є ще одна важлива складова сучасної веброзробки — JavaScript.

Наприклад:

• відкрити або закрити меню;

• показати повідомлення;

• перевірити правильність заповнення форми;

• змінити вміст сторінки без її повного перезавантаження;

• завантажити нові дані із сервера;

• створити інтерактивний калькулятор;

• реалізувати кошик інтернет-магазину;

• побудувати повноцінний вебзастосунок.

JavaScript перетворює статичну сторінку на програму, яка може реагувати на дії користувача, обробляти інформацію та виконувати логіку.

Також створимо кілька простих практичних прикладів, щоб побачити, як JavaScript використовується в реальній вебсторінці.

1. Що таке JavaScript?

JavaScript — це мова програмування, яка широко використовується для створення інтерактивних вебсторінок і вебзастосунків.

Наприклад, JavaScript може:

• визначити, скільки коштуватимуть товари в кошику;

• перевірити, чи введено правильну адресу електронної пошти;

• показати повідомлення після натискання кнопки;

• змінити текст на сторінці;

• отримати інформацію із зовнішнього сервера;

• зберегти налаштування користувача;

• виконати складні обчислення.

HTML, CSS і JavaScript: у чому різниця?

Для розуміння їхньої взаємодії використаємо аналогію з автомобілем.

• HTML — це конструкція автомобіля: кузов, двері, сидіння, панель приладів.

• CSS — це зовнішній вигляд: колір, форма, матеріали, оформлення салону.

• JavaScript — це логіка та поведінка: реакція на натискання кнопок, робота систем, обробка команд.

У веброзробці ці три технології часто працюють разом.

Наприклад, створимо кнопку:

HTML:

<button id="myButton">Натисни мене</button>

CSS:

#myButton {

  background-color: blue;

  color: white;

  padding: 12px 20px;

  border: none;

  border-radius: 6px;

}

JavaScript:

const button = document.querySelector("#myButton");




button.addEventListener("click", function () {

  alert("Ти натиснув кнопку!");

});

Результат:

1. HTML створює кнопку.

2. CSS оформлює її.

3. JavaScript визначає, що відбудеться після натискання.

Саме в цьому полягає основна роль JavaScript на вебсторінці.

2. Де і як працює JavaScript?

JavaScript не обмежується браузерами, хоча саме там його використовують найчастіше.

Він може працювати в різних середовищах:

• у браузерах — для інтерактивності вебсторінок;

• на серверах — наприклад, за допомогою Node.js;

• у мобільних застосунках — через спеціальні платформи;

• у настільних застосунках — наприклад, Electron;

• в автоматизації та інструментах розробки.

2.1. Що виконує JavaScript у браузері?

Браузер має спеціальний компонент — JavaScript-рушій (JavaScript Engine).

Це програмне забезпечення, яке читає та виконує JavaScript-код.

Наприклад:

• Chrome і Edge використовують V8;

• Firefox використовує SpiderMonkey;

• Safari використовує JavaScriptCore.

Коли браузер отримує HTML-документ із JavaScript-кодом, він може виконати цей код за допомогою свого JavaScript-рушія.

Вони дозволяють JavaScript взаємодіяти зі сторінкою, мережею, таймерами, сховищем браузера та іншими функціями.

2.2. JavaScript і DOM

У другій статті ми вже знайомилися з DOM — Document Object Model.

JavaScript може звертатися до цієї структури та змінювати її.

Наприклад, HTML:

<h1 id="title">Старий заголовок</h1>

JavaScript:

const title = document.querySelector("#title");




title.textContent = "Новий заголовок";

Після виконання коду браузер відобразить:

Новий заголовок

Це одна з найважливіших можливостей JavaScript у веброзробці.

2.3. JavaScript і сервер

JavaScript також може взаємодіяти із серверами.

Наприклад, користувач відкриває сторінку інтернет-магазину. JavaScript може відправити запит до сервера, отримати список товарів і відобразити їх на сторінці.

Для цього часто використовують fetch().

Приклад:

fetch("https://jsonplaceholder.typicode.com/posts/1")

  .then(response => response.json())

  .then(data => {

    console.log(data);

  });

Цей код:

1. Відправляє HTTP-запит за вказаною адресою.

2. Отримує відповідь.

3. Перетворює тіло відповіді з JSON у JavaScript-об'єкт.

4. Виводить отримані дані в консоль.

Детальніше про HTTP, сервери та API ми поговоримо в наступних статтях.

3. Як підключити JavaScript до HTML?

Існує кілька способів додавання JavaScript до вебсторінки.

3.1. Вбудований JavaScript через атрибут події

Можна записати JavaScript безпосередньо в HTML-атрибуті.

<button onclick="alert('Привіт!')">

  Натисни мене

</button>

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

Цей спосіб простий для демонстрації, але для реальних проєктів його зазвичай не рекомендують.

Причина — змішування HTML і JavaScript, через що код стає складнішим для підтримки.

3.2. JavaScript усередині елемента <script>

Можна записати код безпосередньо в HTML-документі:

<!DOCTYPE html>

<html lang="uk">




<head>

  <meta charset="UTF-8">

  <title>Моя сторінка</title>

</head>




<body>




  <h1>Мій сайт</h1>




  <script>

    alert("Привіт! Це JavaScript.");

  </script>




</body>

</html>

Коли браузер дійде до елемента <script>, він виконає розміщений усередині код.

3.3. Підключення зовнішнього JavaScript-файлу

Для більшості проєктів зручніше зберігати JavaScript в окремому файлі.

Наприклад:

MyFirstWebsite/

│

├── index.html

│

├── css/

│   └── style.css

│

└── js/

    └── script.js

У файлі script.js розмістимо код:

alert("Привіт! JavaScript працює.");

Потім підключимо його до HTML:

<script src="js/script.js"></script>

Найчастіше зовнішній скрипт підключають перед закривальним тегом

</body>:

<body>




  <h1>Мій сайт</h1>




  <script src="js/script.js"></script>

</body>

У такому разі браузер спочатку обробить основну частину HTML, а потім зустріне та виконає скрипт.

3.4. Атрибут defer

Є ще один поширений спосіб підключення зовнішнього JavaScript-файлу:

<head>

  <script src="js/script.js" defer></script>

</head>

defer означає, що браузер може завантажувати файл JavaScript паралельно з обробкою HTML, але виконає його після завершення розбору HTML-документа.

Це зручно, коли потрібно розмістити підключення скрипту в <head>, але при цьому дочекатися, поки HTML-структура буде оброблена.

3.5. Атрибут async

Існує також атрибут:

<script src="js/script.js" async></script>

async дозволяє завантажувати скрипт паралельно з обробкою HTML і виконати його відразу після завантаження.

На відміну від defer, порядок виконання кількох скриптів з async не гарантується.

Тому:

• defer - зручний для скриптів, які залежать від HTML або порядку завантаження інших скриптів;

• async - підходить для незалежних скриптів, які можуть виконуватися одразу після завантаження.

Для початку достатньо запам'ятати: у звичайних навчальних проєктах найчастіше використовують зовнішній файл JavaScript із defer або підключають його перед </body>.

4. Основи JavaScript: синтаксис і перші команди

Перш ніж створювати складні програми, потрібно навчитися читати та записувати прості інструкції.

4.1. Виведення повідомлення

Найпростіший спосіб перевірити роботу JavaScript:

alert("Привіт, світ!");

Браузер відкриє діалогове вікно з повідомленням.

4.2. Виведення інформації в консоль

Для розробки часто використовують console.log().

console.log("Привіт, світ!");

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

Щоб відкрити її:

1. Натисни F12.

2. Перейди на вкладку Console.

3. Переглянь результат виконання коду.

Консоль — один із найважливіших інструментів під час вивчення JavaScript і пошуку помилок.

4.3. Інструкції та крапка з комою

JavaScript-код складається з інструкцій.

Наприклад:

let name = "Дмитро";

let age = 25;




console.log(name);

console.log(age);

Крапка з комою використовується для завершення інструкцій. У JavaScript існують правила автоматичної вставки крапок з комою, але на початку навчання корисно ставити їх явно.

4.4. Коментарі

Коментарі дозволяють залишати пояснення в коді.

Однорядковий коментар:

// Це коментар

console.log("Привіт!");

Багаторядковий коментар:

/*

Це багаторядковий

коментар у JavaScript.

*/

Коментарі не виконуються як програмні інструкції.

5. Змінні: як зберігати інформацію

Змінні — це один із фундаментальних елементів програмування.

Змінна дозволяє зберігати значення, щоб використовувати його пізніше.

Наприклад, програма може зберігати:

• ім'я користувача;

• вік;

• ціну товару;

• кількість товарів;

• результат обчислення;

• стан кнопки або меню.

У JavaScript для оголошення змінних використовують let, const і var.

5.1. let

let використовується для створення змінної, значення якої можна змінювати.

let age = 25;




console.log(age);




age = 26;




console.log(age);

Спочатку змінна містить число 25, а потім отримує нове значення — 26.

5.2. const

const використовується для створення змінної, якій не можна повторно присвоїти інше значення.

const name = "Дмитро";




console.log(name);

Якщо спробувати виконати:

name = "Олександр";

браузер повідомить про помилку.

Важливий нюанс: якщо const містить об'єкт або масив, сам об'єкт можна змінювати. Заборонено лише повторно присвоювати змінній інше посилання.

5.3. var

var — старіший спосіб оголошення змінних.

var city = "Львів";

У сучасному JavaScript зазвичай використовують let і const, оскільки вони мають більш передбачувану поведінку щодо області видимості.

5.4. Як вибрати між let і const?

Просте правило:

• використовуй const, якщо не плануєш повторно присвоювати змінній інше значення;

• використовуй let, якщо значення змінюватиметься.

Наприклад:

const price = 100;

let quantity = 2;




quantity = 5;




const total = price * quantity;




console.log(total);

Результат: 500

6. Типи даних у JavaScript

Змінні можуть зберігати різні типи інформації.

JavaScript має кілька основних типів даних.

6.1. Number — числа

Тип Number використовується для чисел.

let age = 25;

let price = 99.99;

let temperature = -5;

JavaScript підтримує цілі та дробові числа в межах типу Number.

6.2. String — текст

String використовується для зберігання тексту.

let name = "Дмитро";

let city = 'Львів';

Текст можна записувати в одинарних або подвійних лапках.

Також є шаблонні рядки з використанням зворотних лапок:

let name = "Дмитро";

let message = Привіт, ${name}!;




console.log(message);

Результат:

Привіт, Дмитро!

Шаблонні рядки дозволяють вставляти значення змінних безпосередньо в текст.

6.3. Boolean — логічний тип

Boolean має лише два значення:

• true — істина;

• false — хиба.

Наприклад:

let isLoggedIn = true;

let hasAccess = false;

Цей тип особливо важливий для умов і перевірок.

6.4. Undefined

undefined — значення, яке JavaScript використовує, коли значення не задано. Наприклад, воно виникає, якщо змінну оголошено без початкового значення, функція не повертає результат або запитано відсутню властивість об'єкта.

let username;




console.log(username);

Результат: undefined

6.5. Null

null використовується для позначення навмисної відсутності значення.

let selectedUser = null;

Це означає, що зараз користувач не вибраний.

6.6. Object — об'єкти

Об'єкт дозволяє зберігати кілька пов'язаних значень в одній структурі.

const user = {

  name: "Дмитро",

  age: 25,

  city: "Львів"

};




console.log(user.name);

console.log(user.age);

Результат:

• Дмитро

• 25

Об'єкти широко використовуються в JavaScript для представлення користувачів, товарів, налаштувань та інших структурованих даних.

6.7. Array — масиви

Масив дозволяє зберігати кілька значень в одному списку.

const fruits = ["Яблуко", "Банан", "Апельсин"];




console.log(fruits[0]);

console.log(fruits[1]);

Результат:

• Яблуко

• Банан

У JavaScript нумерація елементів масиву починається з нуля.

Тому:

• fruits[0] — перший елемент;

• fruits[1] — другий;

• fruits[2] — третій.

6.8. Тип даних і перевірка типу

Для перевірки типу значення використовують оператор typeof.

console.log(typeof 25);

console.log(typeof "Привіт");

console.log(typeof true);

Результат:

• number

• string

• boolean

Є нюанс: typeof null повертає "object". Це історична особливість JavaScript, а не справжній тип null.

7. Оператори: як виконувати обчислення та порівняння

Оператори дозволяють виконувати дії над значеннями.

7.1. Арифметичні оператори

Основні арифметичні оператори:

Приклад:

let a = 10;

let b = 3;




console.log(a + b);

console.log(a - b);

console.log(a * b);

console.log(a / b);

console.log(a % b);

console.log(a ** b);

7.2. Оператори присвоєння

Оператор = присвоює змінній значення.

let score = 10;

Також існують скорочені оператори:

let score = 10;




score += 5;

score -= 2;

score *= 2;

Це еквівалентно:

score = score + 5;

score = score - 2;

score = score * 2;

7.3. Оператори порівняння

Вони дозволяють порівнювати значення та отримувати результат true або false.

Приклад:

console.log(10 > 5);

console.log(10 === 10);

console.log(10 === "10");

Результат:

true

true

false

Чому останній результат false?

Тому що число 10 і текст "10" мають різні типи.

У сучасному JavaScript зазвичай рекомендують використовувати === і !==, щоб уникати неочікуваного автоматичного перетворення типів.

7.4. Логічні оператори

Логічні оператори дозволяють поєднувати кілька умов.

Основні:

• && — логічне І;

• || — логічне АБО;

• ! — логічне НЕ.

Приклад:

let age = 25;

let hasTicket = true;




console.log(age >= 18 && hasTicket);

Результат буде true, оскільки обидві умови виконуються.

Інший приклад:

let isAdmin = false;

let isModerator = true;




console.log(isAdmin || isModerator);

Результат — true, оскільки хоча б одна умова істинна.

8. Умови: як програма приймає рішення

Програми повинні не лише виконувати команди, а й вибирати, які саме команди виконувати за певних обставин.

Для цього використовують умовні конструкції.

8.1. Конструкція if

if дозволяє виконати код, якщо певна умова істинна.

let age = 20;




if (age >= 18) {

  console.log("Доступ дозволено");

}

Якщо вік становить 18 або більше, повідомлення буде виведено.

Якщо умова хибна, код усередині if не виконається.

8.2. Конструкція if...else

Можна визначити альтернативну дію:

let age = 16;




if (age >= 18) {

  console.log("Доступ дозволено");

} else {

  console.log("Доступ заборонено");

}

Програма вибере один із двох варіантів.

8.3. Конструкція else if

Якщо потрібно перевірити кілька умов, можна використовувати else if.

let temperature = 15;




if (temperature > 25) {

  console.log("Спекотно");

} else if (temperature > 15) {

  console.log("Тепло");

} else if (temperature >= 0) {

  console.log("Прохолодно");

} else {

  console.log("Мороз");

}

Браузер перевірятиме умови послідовно, доки не знайде першу істинну.

8.4. Тернарний оператор

Для простих умов можна використовувати скорочену конструкцію:

let age = 20;




let message = age >= 18

  ? "Повнолітній"

  : "Неповнолітній";




console.log(message);

Загальний синтаксис:

умова ? значення_якщо_істина : значення_якщо_хиба;

Тернарний оператор зручний для простих випадків. Складні умови краще записувати через if...else, щоб код залишався зрозумілим.

8.5. Конструкція switch

switch дозволяє вибрати дію залежно від конкретного значення.

let day = "Понеділок";




switch (day) {

  case "Понеділок":

    console.log("Початок робочого тижня");

    break;




  case "П'ятниця":

    console.log("Кінець робочого тижня");

    break;




  case "Субота":

  case "Неділя":

    console.log("Вихідний");

    break;




  default:

    console.log("Звичайний день");

}

break завершує виконання відповідного варіанта, щоб програма не переходила до наступних гілок.

default виконується, якщо жоден із варіантів не підійшов.

9. Цикли: як повторювати дії

У програмуванні часто потрібно виконати одну й ту саму дію кілька разів.

Наприклад:

• вивести всі товари зі списку;

• обробити десятки записів;

• порахувати загальну суму;

• перевірити кілька значень;

• повторити певну операцію, доки виконується умова.

Для цього використовують цикли.

9.1. Цикл for

Цикл for зручний, коли заздалегідь відома кількість повторень.

for (let i = 1; i <= 5; i++) {

  console.log(i);

}

Результат:

• 1

• 2

• 3

• 4

• 5

Розберемо конструкцію:

• let i = 1 — початкове значення лічильника;

• i <= 5 — умова продовження циклу;

• i++ — збільшення лічильника на одиницю після кожного повторення.

9.2. Цикл while

while виконує код, поки умова залишається істинною.

let i = 1;




while (i <= 5) {

  console.log(i);

  i++;

}

Результат буде таким самим, як у попередньому прикладі.

Важливо змінювати значення, від якого залежить умова. Інакше можна випадково створити нескінченний цикл.

9.3. Цикл do...while

Цей цикл спочатку виконує код, а потім перевіряє умову.

let number = 1;




do {

  console.log(number);

  number++;

} while (number <= 5);

Головна особливість: тіло do...while виконається хоча б один раз, навіть якщо умова спочатку хибна.

9.4. Перебір масиву через for...of

Якщо потрібно пройтися по всіх елементах масиву, зручно використовувати for...of.

const fruits = ["Яблуко", "Банан", "Апельсин"];




for (const fruit of fruits) {

  console.log(fruit);

}

Результат:

• Яблуко

• Банан

• Апельсин

9.5. break і continue

break повністю завершує цикл.

for (let i = 1; i <= 10; i++) {

  if (i === 5) {

    break;

  }




  console.log(i);

}

Цикл зупиниться, коли лічильник досягне 5.

continue пропускає поточне повторення та переходить до наступного.

for (let i = 1; i <= 5; i++) {

  if (i === 3) {

    continue;

  }




  console.log(i);

}

У результаті буде виведено 1, 2, 4 і 5.

10. Функції: як створювати власні команди

Функція — це блок коду, який можна викликати тоді, коли він потрібен.

Функції дозволяють:

• не повторювати однаковий код;

• розділяти програму на логічні частини;

• передавати дані для обробки;

• отримувати результати обчислень;

• спрощувати читання та підтримку програми.

10.1. Оголошення функції

function sayHello() {

  console.log("Привіт!");

}

Цей код створює функцію, але ще не виконує її.

Щоб запустити функцію, потрібно її викликати:

sayHello();

10.2. Параметри та аргументи

Функція може приймати дані.

function greet(name) {

  console.log("Привіт, " + name + "!");

}




greet("Дмитро");

greet("Олександр");

name — параметр функції.

"Дмитро" та "Олександр" — аргументи, які передаються під час виклику.

10.3. Повернення результату через return

Функція може не лише виконувати дії, а й повертати результат.

function add(a, b) {

  return a + b;

}




const result = add(5, 3);




console.log(result);

Результат: 8

return завершує виконання функції та повертає значення туди, де її викликали.

10.4. Функції зі значеннями за замовчуванням

Можна задати значення, яке використовуватиметься, якщо аргумент не передано.

function greet(name = "друже") {

  console.log(`Привіт, ${name}!`);

}




greet();

greet("Дмитро");

10.5. Стрілкові функції

У сучасному JavaScript часто використовують стрілкові функції.

const add = (a, b) => {

  return a + b;

};




console.log(add(5, 3));

Для простих функцій можна записати ще коротше:

const add = (a, b) => a + b;

Стрілкові функції особливо часто використовуються під час роботи з масивами, подіями та асинхронним кодом.

Вони мають певні відмінності від звичайних функцій, зокрема щодо this, але детально розглядати це на початку необов'язково.

11. Масиви та методи для роботи з ними

Масиви дозволяють зберігати списки даних.

У реальних вебзастосунках масиви часто використовуються для зберігання:

• товарів;

• користувачів;

• повідомлень;

• замовлень;

• результатів пошуку;

• списків завдань.

Створимо масив:

const products = ["Телефон", "Ноутбук", "Планшет"];

11.1. Додавання елементів

Метод push() додає елемент у кінець масиву.

products.push("Навушники");




console.log(products);

Метод unshift() додає елемент на початок.

products.unshift("Монітор");

11.2. Видалення елементів

pop() видаляє останній елемент.

products.pop();

shift() видаляє перший елемент.

products.shift();

11.3. Кількість елементів

Властивість length показує кількість елементів.

console.log(products.length);

11.4. Метод map()

map() створює новий масив, застосовуючи функцію до кожного елемента початкового масиву.

const numbers = [1, 2, 3, 4];




const doubled = numbers.map(number => number * 2);




console.log(doubled);

Результат: [2, 4, 6, 8]

11.5. Метод filter()

filter() створює новий масив лише з тими елементами, які відповідають заданій умові.

const numbers = [1, 2, 3, 4, 5, 6];




const evenNumbers = numbers.filter(number => number % 2 === 0);




console.log(evenNumbers);

Результат: [2, 4, 6]

11.6. Метод find()

find() повертає перший елемент, який відповідає умові.

const users = [

  { name: "Олена", age: 22 },

  { name: "Дмитро", age: 25 },

  { name: "Іван", age: 30 }

];




const user = users.find(user => user.age === 25);




console.log(user);

Ці методи часто використовуються в реальних вебзастосунках для обробки інформації.

12. Об'єкти: як зберігати пов'язані дані

Об'єкти дозволяють об'єднувати пов'язані характеристики в одну структуру.

Наприклад, інформацію про товар можна представити так:

const product = {

  name: "Ноутбук",

  price: 25000,

  brand: "Example",

  inStock: true

};

Тепер можна звертатися до окремих властивостей:

console.log(product.name);

console.log(product.price);

console.log(product.inStock);

Можна змінювати властивості об'єкта:

product.price = 23000;

product.inStock = false;

Можна додавати нові властивості:

product.color = "Сірий";

Або видаляти:

delete product.brand;

Об'єкти є основою представлення структурованих даних у JavaScript.

Коли сервер надсилає інформацію про користувачів або товари у форматі JSON, JavaScript часто перетворює її на об'єкти та масиви для подальшої роботи.

13. DOM: як JavaScript змінює HTML-сторінку

Тепер перейдемо до однієї з найважливіших тем для веброзробки.

JavaScript може взаємодіяти з HTML-елементами через DOM.

Це дозволяє змінювати текст, стилі, атрибути, створювати нові елементи та видаляти непотрібні.

13.1. Пошук елемента

HTML:

<h1 id="title">Старий заголовок</h1>

JavaScript:

const title = document.querySelector("#title");

document.querySelector() - шукає перший елемент, який відповідає CSS-селектору.

Можна використовувати:

document.querySelector("#title");

document.querySelector(".card");

document.querySelector("p");

Для пошуку всіх відповідних елементів є:

const paragraphs = document.querySelectorAll("p");

13.2. Зміна тексту

const title = document.querySelector("#title");




title.textContent = "Новий заголовок";

textContent змінює текстовий вміст елемента.

13.3. Зміна HTML-вмісту

Для зміни HTML-вмісту існує innerHTML.

const container = document.querySelector("#container");




container.innerHTML = "<p>Новий абзац</p>";

Це дозволяє додавати HTML-розмітку, але з innerHTML потрібно бути обережним.

Якщо вставляти в нього неперевірений текст від користувача або зовнішнього джерела, можна створити вразливість XSS — міжсайтовий скриптинг.

Для звичайного тексту безпечніше використовувати textContent.

13.4. Зміна CSS-класів

JavaScript може змінювати класи HTML-елементів.

HTML:

<p id="message">Привіт!</p>

CSS:

.highlight {

  color: red;

  font-weight: bold;

}

JavaScript:

const message = document.querySelector("#message");




message.classList.add("highlight");

Основні методи classList:

• add() — додати клас;

• remove() — видалити клас;

• toggle() — перемкнути клас;

• contains() — перевірити, чи є клас.

13.5. Зміна атрибутів

JavaScript може змінювати атрибути HTML-елементів.

Наприклад:

<img id="photo" src="old.jpg" alt="Старе зображення">

JavaScript:

const photo = document.querySelector("#photo");




photo.setAttribute("src", "new.jpg");

photo.setAttribute("alt", "Нове зображення");

Так можна змінювати посилання, джерела зображень та інші атрибути.

13.6. Створення нових елементів

JavaScript дозволяє створювати HTML-елементи програмно.

const paragraph = document.createElement("p");




paragraph.textContent = "Цей абзац створено через JavaScript.";




document.body.append(paragraph);

Браузер додасть новий абзац у кінець документа.

13.7. Видалення елементів

const paragraph = document.querySelector("p");




paragraph.remove();

Це видалить знайдений абзац із DOM.

14. Події: як сторінка реагує на дії користувача

Подія (Event) — це дія або ситуація, про яку браузер може повідомити JavaScript.

Наприклад:

• користувач натиснув кнопку;

• ввів текст у поле;

• навів курсор на елемент;

• змінив розмір вікна;

• прокрутив сторінку;

• відправив форму;

• сторінка завершила завантаження.

JavaScript може слухати ці події та виконувати відповідний код.

14.1. Обробник події click

HTML:

<button id="button">Натисни мене</button>

JavaScript:

const button = document.querySelector("#button");




button.addEventListener("click", function () {

  alert("Кнопку натиснуто!");

});

addEventListener() - додає обробник події до елемента.

У цьому прикладі після натискання кнопки браузер показує повідомлення.

14.2. Подія input

Ця подія спрацьовує під час зміни значення поля введення.

HTML:

<input id="nameInput" type="text">




<p id="output"></p>

JavaScript:

const input = document.querySelector("#nameInput");

const output = document.querySelector("#output");




input.addEventListener("input", function () {

  output.textContent = input.value;

});

Тепер текст, який користувач вводить у поле, одразу відображатиметься в абзаці.

14.3. Подія submit

Подія submit виникає під час надсилання форми.

HTML:

<form id="myForm">

  <input id="username" type="text" placeholder="Введи ім'я">

  <button type="submit">Надіслати</button>

</form>

JavaScript:

const form = document.querySelector("#myForm");




form.addEventListener("submit", function (event) {

  event.preventDefault();




  console.log("Форму надіслано!");

});

event.preventDefault() скасовує стандартну дію браузера.

У цьому випадку це запобігає звичайному надсиланню форми та перезавантаженню сторінки.

14.4. Об'єкт події

Обробник події може отримувати об'єкт event.

Він містить інформацію про те, що відбулося.

Наприклад:

button.addEventListener("click", function (event) {

  console.log(event.target);

});

event.target — елемент, на якому відбулася подія.

Це корисно, коли потрібно зрозуміти, з яким саме елементом взаємодіяв користувач.

15. Асинхронність: як JavaScript працює з операціями, що потребують часу

Не всі операції виконуються миттєво.

Наприклад:

• завантаження інформації із сервера;

• читання файлів;

• очікування таймера;

• отримання даних із зовнішнього API.

Якби JavaScript змушений був повністю зупиняти виконання програми під час кожної такої операції, сторінки часто зависали б і переставали реагувати на дії користувача.

Тому JavaScript використовує механізми асинхронного виконання.

15.1. Синхронний та асинхронний код

Синхронний код виконується послідовно.

console.log("Перший");

console.log("Другий");

console.log("Третій");

Результат:

• Перший

• Другий

• Третій

Асинхронні операції можуть завершуватися пізніше, не блокуючи звичайне виконання JavaScript.

Наприклад:

console.log("Перший");




setTimeout(function () {

  console.log("Другий");

}, 2000);




console.log("Третій");

Результат:

• Перший

• Третій

• Другий

setTimeout() планує виконання функції не раніше ніж після вказаного часу.

Це не гарантує виконання точно через дві секунди: фактичний момент залежить від роботи середовища та черги завдань.

15.2. Callback-функції

Callback — це функція, яку передають іншій функції для виконання пізніше.

Приклад:

function greet(name, callback) {

  console.log("Привіт, " + name);




  callback();

}




function finish() {

  console.log("Завершено!");

}




greet("Дмитро", finish);

Функція finish передається як аргумент і викликається всередині greet.

Callback-функції використовуються не лише в асинхронному коді, а й у звичайних операціях, наприклад під час обробки подій.

15.3. Promise

Promise — це об'єкт, який представляє результат асинхронної операції, що може бути доступним зараз або в майбутньому.

Promise може перебувати в одному з трьох станів:

• pending — очікування;

• fulfilled — успішне завершення;

• rejected — помилка.

Приклад:

const promise = new Promise((resolve, reject) => {

  const success = true;




  if (success) {

    resolve("Операція успішна");

  } else {

    reject("Сталася помилка");

  }

});




promise

  .then(result => {

    console.log(result);

  })

  .catch(error => {

    console.log(error);

  });

resolve() повідомляє про успішне завершення.

reject() повідомляє про помилку.

.then() обробляє успішний результат, а .catch() — помилку.

15.4. Async і Await

async та await дозволяють писати асинхронний код у більш послідовному стилі.

async function getData() {

  const response = await fetch(

    "https://jsonplaceholder.typicode.com/posts/1"

  );




  const data = await response.json();




  console.log(data);

}




getData();

Розберемо:

1. async оголошує асинхронну функцію.

2. fetch() відправляє запит до сервера та повертає Promise.

3. await очікує завершення Promise всередині асинхронної функції.

4. response.json() читає тіло відповіді та перетворює JSON на JavaScript-значення.

5. Отримані дані виводяться в консоль.

15.5. Обробка помилок через try...catch

Під час роботи з мережею можуть виникати помилки.

Для їх обробки можна використовувати try...catch.

async function getData() {

  try {

    const response = await fetch(

      "https://jsonplaceholder.typicode.com/posts/1"

    );




    if (!response.ok) {

      throw new Error("Помилка отримання даних");

    }




    const data = await response.json();




    console.log(data);




  } catch (error) {

    console.error("Сталася помилка:", error);

  }

}




getData();

Тут ми перевіряємо response.ok, оскільки fetch() зазвичай не відхиляє Promise лише через HTTP-помилку на кшталт 404 або 500. Він повертає об'єкт відповіді, а статус потрібно перевіряти окремо.

try...catch дозволяє перехоплювати помилки та реагувати на них, замість того щоб залишати програму без зрозумілої обробки проблеми.

16. JSON: формат обміну даними

JSON (JavaScript Object Notation) — це текстовий формат для зберігання та обміну структурованими даними.

Він широко використовується під час взаємодії між браузером і сервером.

Наприклад, сервер може надіслати:

{

  "name": "Дмитро",

  "age": 25,

  "city": "Львів"

}

Цей формат нагадує JavaScript-об'єкт, але має власні правила запису.

16.1. Перетворення JSON на JavaScript-об'єкт

Для цього використовується JSON.parse().

const jsonText = '{"name":"Дмитро","age":25}';




const user = JSON.parse(jsonText);




console.log(user.name);

16.2. Перетворення об'єкта на JSON

Для зворотного перетворення використовується JSON.stringify().

const user = {

  name: "Дмитро",

  age: 25

};




const jsonText = JSON.stringify(user);




console.log(jsonText);

JSON важливий для розуміння API та взаємодії між різними програмами.

17. Робота з даними в браузері: Local Storage

Іноді потрібно зберегти певну інформацію, щоб вона залишилася доступною після перезавантаження сторінки.

Для цього браузери мають механізми вебсховища.

Один із них — localStorage.

Він дозволяє зберігати пари «ключ — значення» у браузері.

17.1. Збереження значення

localStorage.setItem("username", "Дмитро");

Тут:

• username — ключ;

• Дмитро — значення.

17.2. Отримання значення

const username = localStorage.getItem("username");




console.log(username);

17.3. Видалення значення

localStorage.removeItem("username");

17.4. Очищення сховища

localStorage.clear();

Ця команда видаляє всі дані localStorage для поточного походження (origin).

17.5. Важливі особливості Local Storage

localStorage:

• зберігає дані між перезавантаженнями браузера;

• зберігає значення у вигляді рядків;

• доступний JavaScript-коду відповідного походження;

• не є безпечним місцем для зберігання паролів або секретних ключів.

Якщо потрібно зберегти об'єкт, його зазвичай спочатку перетворюють на JSON:

const user = {

  name: "Дмитро",

  age: 25

};




localStorage.setItem("user", JSON.stringify(user));

Потім можна отримати його:

const savedUser = JSON.parse(localStorage.getItem("user"));




console.log(savedUser.name);

У наступних статтях ми детальніше розглянемо cookies, сесії та безпеку вебсайтів.

18. Практика: створюємо інтерактивний список завдань

Тепер об'єднаємо вивчені можливості JavaScript у невеликому проєкті.

Ми створимо простий список завдань, у якому можна:

• додавати нові завдання;

• позначати завдання виконаними;

• видаляти завдання.

Цей приклад покаже, як HTML, CSS і JavaScript працюють разом.

Крок 1. Структура проєкту

Створи папку:

MyTodoApp/

│

├── index.html

│

├── css/

│   └── style.css

│

└── js/

    └── script.js

Крок 2. HTML

Файл index.html:

<!DOCTYPE html>

<html lang="uk">




<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Мій список завдань</title>




  <link rel="stylesheet" href="css/style.css">

  <script src="js/script.js" defer></script>

</head>




<body>




  <main class="container">




    <h1>Мій список завдань</h1>




    <form id="taskForm">

      <input

        type="text"

        id="taskInput"

        placeholder="Введи нове завдання"

      >




      <button type="submit">Додати</button>

    </form>




    <ul id="taskList"></ul>




  </main>




</body>

</html>

Тут ми створили:

• заголовок;

• форму;

• поле введення;

• кнопку;

• список, у якому з'являтимуться завдання.

Крок 3. CSS

Файл css/style.css:

* {

  box-sizing: border-box;

}




body {

  margin: 0;

  padding: 30px 15px;

  font-family: Arial, sans-serif;

  background-color: #f2f4f8;

  color: #333333;

}




.container {

  max-width: 600px;

  margin: 0 auto;

  padding: 25px;

  background-color: white;

  border-radius: 12px;

}




h1 {

  text-align: center;

}




form {

  display: flex;

  gap: 10px;

}




input {

  flex: 1;

  min-width: 0;

  padding: 12px;

  border: 1px solid #cccccc;

  border-radius: 6px;

}




button {

  padding: 12px 18px;

  border: none;

  border-radius: 6px;

  color: white;

  background-color: #2457a7;

  cursor: pointer;

}




button:hover {

  background-color: #173d7a;

}




ul {

  padding: 0;

  list-style: none;

}




li {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  margin-top: 10px;

  padding: 12px;

  background-color: #f2f4f8;

  border-radius: 6px;

}




li.completed span {

  text-decoration: line-through;

  color: gray;

}




.delete-button {

  background-color: #d93636;

}




.delete-button:hover {

  background-color: #a82020;

}




@media (max-width: 480px) {

  form {

    flex-direction: column;

  }

}

Крок 4. JavaScript

Файл js/script.js:

const taskForm = document.querySelector("#taskForm");

const taskInput = document.querySelector("#taskInput");

const taskList = document.querySelector("#taskList");




taskForm.addEventListener("submit", function (event) {

  event.preventDefault();




  const taskText = taskInput.value.trim();




  if (taskText === "") {

    alert("Введи текст завдання!");

    return;

  }




  const taskItem = document.createElement("li");




  const taskName = document.createElement("span");

  taskName.textContent = taskText;




  const deleteButton = document.createElement("button");

  deleteButton.textContent = "Видалити";

  deleteButton.classList.add("delete-button");




  taskName.addEventListener("click", function () {

    taskItem.classList.toggle("completed");

  });




  deleteButton.addEventListener("click", function () {

    taskItem.remove();

  });




  taskItem.append(taskName, deleteButton);




  taskList.append(taskItem);




  taskInput.value = "";

});

Крок 5. Перевіряємо результат

Збережи файли та відкрий index.html у браузері.

Тепер ти можеш:

1. Ввести текст у поле.

2. Натиснути кнопку «Додати».

3. Побачити нове завдання у списку.

4. Натиснути на текст завдання, щоб позначити його виконаним.

5. Натиснути «Видалити», щоб прибрати завдання.

Крок 6. Що відбувається всередині?

Розглянемо найважливіші частини JavaScript-коду.

Пошук елементів:

const taskForm = document.querySelector("#taskForm");

JavaScript знаходить форму в HTML-документі.

Обробка надсилання форми:

taskForm.addEventListener("submit", function (event) {

Програма очікує, поки користувач надішле форму.

Скасування стандартної поведінки:

event.preventDefault();

Браузер не перезавантажує сторінку після надсилання форми.

Отримання тексту:

const taskText = taskInput.value.trim();

Програма читає введений текст і прибирає зайві пробіли на початку та наприкінці.

Перевірка введення:

if (taskText === "") {

  alert("Введи текст завдання!");

  return;

}

Якщо поле порожнє, програма показує повідомлення та припиняє виконання поточної функції.

Створення елемента:

const taskItem = document.createElement("li");

JavaScript створює новий HTML-елемент.

Додавання обробника:

taskName.addEventListener("click", function () {

  taskItem.classList.toggle("completed");

});

Натискання на текст завдання перемикає клас completed.

Видалення:

taskItem.remove();

Елемент видаляється зі сторінки.

Цей невеликий проєкт демонструє основний принцип роботи JavaScript у браузері: отримання даних, обробка подій, виконання логіки та зміна DOM.

Важливе обмеження поточної версії: після перезавантаження сторінки список завдань зникне, оскільки ми ще не реалізували збереження. Це можна додати за допомогою localStorage.

19. Типові помилки початківців у JavaScript

19.1. Використання = замість ===

Помилково:

if (age = 18) {

  console.log("Доступ дозволено");

}

Тут відбувається присвоєння значення, а не порівняння.

Правильно:

if (age === 18) {

  console.log("Доступ дозволено");

}

19.2. Звернення до елемента, якого ще немає в DOM

Наприклад:

const button = document.querySelector("#button");




button.addEventListener("click", function () {

  alert("Привіт!");

});

Якщо браузер виконає цей код до того, як обробить HTML-код із кнопкою, змінна button може отримати значення null.

Тоді спроба викликати addEventListener() спричинить помилку.

Можливі рішення:

• підключати скрипт перед </body>;

• використовувати defer для зовнішнього скрипту;

• чекати події DOMContentLoaded, якщо це потрібно для конкретної структури програми.

19.3. Плутанина між textContent та innerHTML

textContent вставляє звичайний текст.

innerHTML інтерпретує переданий рядок як HTML-розмітку.

Якщо потрібно показати текст користувача, зазвичай слід використовувати textContent, а не innerHTML.

19.4. Забутий return

Розглянемо:

function add(a, b) {

  a + b;

}




console.log(add(2, 3));

Результат буде undefined, оскільки функція не повертає обчислене значення.

Правильно:

function add(a, b) {

  return a + b;

}

19.5. Нескінченний цикл

Помилковий приклад:

let i = 1;




while (i <= 5) {

  console.log(i);

}

Значення i ніколи не змінюється, тому умова постійно залишається істинною.

Правильно:

let i = 1;




while (i <= 5) {

  console.log(i);

  i++;

}

19.6. Плутанина між рядками та числами

Наприклад:

console.log("5" + 3);

Результат: 53

Оскільки "5" — це рядок, оператор + у цьому випадку виконує об'єднання тексту.

Якщо потрібно виконати математичне додавання, значення слід перетворити на число:

console.log(Number("5") + 3);

Результат: 8

19.7. Неправильний шлях до JavaScript-файлу

Якщо структура проєкту така:

MyFirstWebsite/

│

├── index.html

│

└── js/

    └── script.js

то правильне підключення:

<script src="js/script.js" defer></script>

Якщо вказати неправильний шлях, браузер не зможе завантажити файл.

Перевірити це можна у вкладці Network або Console в DevTools.

20. Безпека JavaScript: що важливо знати на початку

JavaScript має великі можливості, але неправильне використання може створювати проблеми безпеки.

Ось кілька важливих принципів.

20.1. Не довіряй даним користувача

Користувач може ввести будь-який текст у форму.

Тому не можна автоматично вважати отримані дані безпечними.

20.2. Обережно з innerHTML

Якщо вставити неперевірений текст через innerHTML, браузер може інтерпретувати його як HTML-код.

У певних ситуаціях це створює ризик XSS — міжсайтового скриптингу.

Для звичайного тексту використовуй:

element.textContent = userInput;

20.3. Не зберігай секрети у відкритому JavaScript-коді

Код, який виконується в браузері, доступний користувачу.

Тому не можна зберігати в ньому:

• секретні ключі API;

• паролі;

• приватні токени;

• інші конфіденційні дані, які повинні залишатися на сервері.

Якщо для взаємодії із зовнішнім сервісом потрібен секретний ключ, зазвичай запит організовують через серверну частину застосунку.

20.4. JavaScript не замінює серверну перевірку

Наприклад, можна перевірити вік користувача у браузері.

Але якщо доступ до ресурсу залежить від віку або прав користувача, остаточна перевірка повинна виконуватися на сервері.

21. Що ще можна вивчати після основ JavaScript?

JavaScript — велика мова, і після початкового рівня відкривається багато напрямів.

21.1. Область видимості та замикання

Область видимості визначає, де саме в програмі доступна змінна.

Замикання (Closure) дозволяє функції зберігати доступ до змінних із зовнішньої області видимості навіть після завершення виконання зовнішньої функції.

Це важлива тема для розуміння складнішого JavaScript.

21.2. this

this — спеціальне значення, яке залежить від способу виклику функції.

Воно часто використовується в об'єктах, методах і класах.

21.3. Класи та об'єктноорієнтоване програмування

JavaScript підтримує класи та механізми об'єктноорієнтованого програмування.

Вони дозволяють організовувати код навколо об'єктів, які містять дані та поведінку.

21.4. Модулі

Модулі дозволяють розділяти програму на окремі файли та компоненти.

Наприклад:

// math.js




export function add(a, b) {

  return a + b;

}

В іншому файлі:

// script.js




import { add } from "./math.js";




console.log(add(2, 3));

Для використання модулів у браузері HTML підключає скрипт так:

<script type="module" src="js/script.js"></script>

21.5. Node.js

Node.js — середовище виконання JavaScript поза браузером.

Воно дозволяє використовувати JavaScript для створення серверних застосунків, інструментів розробки, автоматизації та інших програм.

21.6. Бібліотеки та фреймворки

У веброзробці часто використовують готові інструменти, які спрощують створення складних інтерфейсів.

Наприклад:

• React;

• Vue;

• Angular;

• Svelte.

Ці інструменти не замінюють знання JavaScript. Навпаки, розуміння основ мови допомагає правильно ними користуватися.

22. Підсумок: що потрібно запам'ятати?

JavaScript — це мова програмування, яка дозволяє додавати вебсторінкам логіку та інтерактивність.

Основні поняття, які ми розглянули:

1. JavaScript — мова програмування, що використовується для створення інтерактивних вебсторінок і застосунків.

2. JavaScript-рушій — компонент середовища, який виконує JavaScript-код.

3. DOM — об'єктна модель HTML-документа, з якою може працювати JavaScript.

4. Змінна — іменоване місце для зберігання значення.

5. Тип даних — визначає, яку інформацію зберігає значення.

6. Оператор — дозволяє виконувати обчислення, присвоєння та порівняння.

7. Умова — дозволяє програмі вибирати дії залежно від певних обставин.

8. Цикл — дозволяє повторювати виконання коду.

9. Функція — блок коду, який можна викликати для виконання певного завдання.

10. Масив — структура для зберігання списку значень.

11. Об'єкт — структура для зберігання пов'язаних даних.

12. Подія — дія або ситуація, на яку може реагувати JavaScript.

13. Асинхронність — механізм роботи з операціями, результат яких стає доступним пізніше.

14. Promise — об'єкт, що представляє результат асинхронної операції.

15. JSON — текстовий формат обміну структурованими даними.

16. Local Storage — браузерне сховище для збереження даних між сеансами.

17. API — програмний інтерфейс, через який різні компоненти програм можуть взаємодіяти.

• HTML створює структуру

• CSS формує вигляд

• JavaScript визначає логіку взаємодії.

Тепер ми познайомилися з трьома основними технологіями фронтенд-розробки.

Джерела та документація

1. MDN Web Docs — JavaScript

https://developer.mozilla.org/en-US/docs/Web/JavaScript

Основна документація JavaScript: синтаксис, типи даних, функції, об'єкти та інші можливості мови.

2. MDN Web Docs — JavaScript Guide

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Навчальний посібник із JavaScript, який охоплює основні концепції мови.

3. MDN Web Docs — DOM

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Документація про об'єктну модель документа та взаємодію JavaScript із HTML.

4. MDN Web Docs — Introduction to Events

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Events

Матеріали про події та реакцію вебсторінок на дії користувачів.

5. MDN Web Docs — Asynchronous JavaScript

https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS

Навчальні матеріали про асинхронність, Promise, async і await.

6. MDN Web Docs — Fetch API

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Документація про виконання мережевих запитів із JavaScript.

7. MDN Web Docs — Web Storage API

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Документація про Local Storage і Session Storage.

8. ECMAScript Specification — ECMA International

https://tc39.es/ecma262/

Офіційна специфікація мови ECMAScript, стандарту, на якому ґрунтується JavaScript.

9. Node.js Documentation

https://nodejs.org/docs/latest/api/

Офіційна документація середовища виконання JavaScript поза браузером.

10. OWASP — Cross Site Scripting Prevention Cheat Sheet

https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html

Матеріали з безпечної роботи з даними та запобігання XSS.

Контрольні запитання

1. За що відповідає JavaScript у веброзробці?

• А. Лише за зовнішній вигляд сторінки.

• Б. За логіку, обчислення та інтерактивність.

• В. Лише за структуру HTML.

2. Який спосіб оголошення змінної використовують, якщо її значення не планують повторно присвоювати?

• А. const

• Б. let

• В. var

3. Який тип даних має значення true?

• А. String

• Б. Number

• В. Boolean

4. Який оператор використовується для строгої рівності?

• А. =

• Б. ==

• В. ===

5. Для чого використовують addEventListener()?

• А. Для створення CSS-стилів.

• Б. Для додавання обробника події.

• В. Для збереження інформації на сервері.

6. Що робить document.querySelector()?

• А. Знаходить перший елемент, який відповідає CSS-селектору.

• Б. Видаляє всі елементи сторінки.

• В. Створює новий HTML-документ.

7. Що повертає функція після виконання return?

• А. Завжди true.

• Б. Значення, визначене після return.

• В. Завжди undefined.

8. Для чого потрібен Promise?

• А. Для оформлення кнопок.

• Б. Для представлення результату асинхронної операції.

• В. Для створення HTML-тегів.

9. Що робить localStorage.setItem()?

• А. Зберігає значення у браузерному сховищі.

• Б. Видаляє HTML-елемент.

• В. Відправляє HTTP-запит.

10. Чим відрізняються HTML, CSS і JavaScript?

• А. Вони виконують однакові функції.

• Б. HTML створює структуру, CSS оформлює її, JavaScript додає логіку та інтерактивність.

• В. JavaScript потрібен лише для оформлення тексту.

Відповіді для самоперевірки

1 — Б.

2 — А.

3 — В.

4 — В.

5 — Б.

6 — А.

7 — Б.

8 — Б.

9 — А.

10 — Б.