Перші Кроки з JavaScript

Ласкаво просимо до твого першого JavaScript lesson.

Тут твої web pages перестають бути тихими плакатами і починають ставати interactive.

HTML дає page structure.

CSS дає page style.

JavaScript дає page behavior.

Це означає, що JavaScript може реагувати, коли user натискає button, пише щось у form, відкриває menu, відправляє data або робить щось підозріле — наприклад, натискає той самий button 47 разів.

JavaScript — це language, який каже:

“Щось сталося. Дай я відповім.”

Дуже useful.

Іноді дуже dramatic.

Але ми почнемо спокійно.

Без frameworks.

Без complicated tools.

Без гігантського setup.

Тільки HTML, CSS, JavaScript і твій browser.

Красивий маленький chaos laboratory.

Що Ти Вивчиш

У цьому lesson ти дізнаєшся:

що таке JavaScript;
де працює JavaScript;
як створити простий project;
як підключити JavaScript до HTML;
як написати свій перший JavaScript code;
як використовувати console.log;
як відкрити browser console;
як уникати common beginner mistakes.

До кінця цього lesson у тебе буде маленька web page, підключена до JavaScript file.

І так, browser нарешті почне тебе слухати.

Переважно.

Browsers ввічливі, але строгі.

Що Таке JavaScript?

JavaScript — це programming language, який використовується переважно у web development.

Він може працювати в browser і контролювати, що відбувається на web page.

З JavaScript ти можеш:

змінювати text;
змінювати styles;
реагувати на clicks;
validate forms;
створювати menus;
показувати messages;
отримувати data з APIs;
будувати interactive web apps.

Приклад:

console.log("Hello, JavaScript!");

Цей рядок виводить message у browser console.

Він не показує message на page.

Він показує його у developer tools.

Console — це місце, де JavaScript говорить, коли не хоче турбувати меблі.

JavaScript у Browser

Твій browser розуміє три головні frontend languages:

HTML;
CSS;
JavaScript.

HTML створює content.

CSS стилізує content.

JavaScript контролює behavior.

Уяви button.

HTML створює button.

CSS робить його красивим.

JavaScript вирішує, що станеться, коли хтось його натисне.

Без JavaScript button може існувати.

З JavaScript button може щось робити.

Це різниця між decorative button і button з роботою.

Ніхто не любить безробітні buttons.

Створи Project

Створи folder для цього lesson:

mkdir javascript-lesson1
cd javascript-lesson1
touch index.html
touch script.js

Твій project має виглядати так:

javascript-lesson1/
  index.html
  script.js

Ми залишимо все simple.

Один HTML file.

Один JavaScript file.

Без build tools.

Без npm.

Без “встанови 900 packages, перш ніж написати hello”.

Тільки чистий beginner JavaScript.

Напиши 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>Перші Кроки з JavaScript</title>
</head>
<body>
  <h1>Перші Кроки з JavaScript</h1>

  <p id="message">JavaScript ще не працює.</p>

  <button id="changeButton">Змінити Повідомлення</button>

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

Найважливіша частина:

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

Цей рядок підключає JavaScript file до HTML file.

Ми ставимо його перед closing body tag.

Так HTML elements завантажуються першими, а потім JavaScript може їх знайти.

Якщо JavaScript намагається знайти element до того, як browser його створив, JavaScript плутається.

Як шукати каву, ще не зайшовши на кухню.

Напиши Свій Перший JavaScript

Відкрий script.js і додай:

console.log("JavaScript підключено!");

Тепер відкрий index.html у browser.

Ти не побачиш message на page.

Це нормально.

console.log() виводить messages у browser console.

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

натисни правою кнопкою на page;
вибери Inspect;
відкрий tab Console.

Ти маєш побачити:

JavaScript підключено!

Вітаю.

Твій JavaScript file підключено.

Маленька перемога.

Великий емоційний момент.

Феєрверків ще немає, але console жива.

Використай alert

JavaScript також може показати popup message.

Додай це в script.js:

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

Онови page.

Browser покаже popup.

Це доводить, що JavaScript працює.

Але будь обережний з alert().

Він useful для швидких tests, але annoying на real websites.

Website, який показує забагато alerts, схожий на людину, яка постійно торкає тебе за плече і каже: “дивись, дивись, дивись”.

Під час навчання частіше використовуй console.log().

Users тобі подякують.

І твій future self теж.

Зміни Text на Page

Тепер зробимо так, щоб JavaScript змінив page.

Заміні code у script.js на це:

const message = document.getElementById("message");

message.textContent = "JavaScript тепер працює!";

Онови browser.

Paragraph має змінитися з:

JavaScript ще не працює.

на:

JavaScript тепер працює!

Це твоя перша DOM change.

DOM означає Document Object Model.

Звучить офіційно і трохи страшно.

Але поки що думай про DOM як про structure page, яку JavaScript може читати і змінювати.

JavaScript знайшов paragraph.

Потім JavaScript змінив його text.

Дуже simple.

Дуже powerful.

Саме тут webpages починають відчуватися alive.

Додай Button Click

Тепер зробимо так, щоб button щось робив.

Заміні свій script.js на це:

const message = document.getElementById("message");
const button = document.getElementById("changeButton");

button.addEventListener("click", function () {
  message.textContent = "Ти натиснув button. JavaScript це помітив.";
});

Онови page.

Натисни button.

Message має змінитися.

Що сталося?

const message = document.getElementById("message");

Це знаходить paragraph.

const button = document.getElementById("changeButton");

Це знаходить button.

button.addEventListener("click", function () {
  message.textContent = "Ти натиснув button. JavaScript це помітив.";
});

Це каже browser:

“Коли user натисне button, запусти цей code.”

Це називається event listener.

Events — це речі, які відбуваються на page.

Приклади:

click;
typing;
form submit;
mouse movement;
page load.

JavaScript може слухати ці events і реагувати.

Як дуже уважний waiter, але з меншою кількістю тарілок.

Додай Трохи Style

Ми вчимо JavaScript, але трохи CSS зробить page приємнішою.

Онови index.html так:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Перші Кроки з JavaScript</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }
  </style>
</head>
<body>
  <h1>Перші Кроки з JavaScript</h1>

  <p id="message">JavaScript ще не працює.</p>

  <button id="changeButton">Змінити Повідомлення</button>

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

Тепер page виглядає clean.

HTML дає structure.

CSS дає style.

JavaScript дає behavior.

Троє друзів нарешті працюють разом.

Поки що ніхто не кинув стілець.

Гарний початок.

Запусти з Local Server

Можна відкрити HTML file напряму в browser.

Але можна також запустити simple local server.

Якщо ти використовуєш Caddy, запусти це всередині project folder:

caddy file-server --listen :8080

Потім відкрий:

http://localhost:8080

Це useful, бо багато real web features краще працюють з local server.

Для цього lesson пряме відкриття file достатнє.

Але local server — це хороша habit.

Professional habit.

Маленька DevOps energy.

Common Mistakes

Неправильна Назва File

Якщо твій HTML каже:

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

то file має називатися:

script.js

Не:

scripts.js
main.js
Script.js
javascript.js
please-work.js

Назва має збігатися точно.

Browsers не читають думки.

На жаль.

Script Tag у Неправильному Місці

Якщо поставити script у head, JavaScript може запуститися до того, як HTML elements існують.

Це може викликати errors.

Beginner-friendly solution:

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

Постав його перед closing body tag.

Пізніше ти також вивчиш defer.

Але сьогодні тримаємо beast calm.

Забути Зберегти Files

Це трапляється частіше, ніж люди визнають.

Ти пишеш правильний code.

Оновлюєш browser.

Нічого не змінюється.

Паніка.

Потім розумієш, що file не був saved.

Класика.

Спочатку save.

Потім refresh.

Panic never.

Ну добре, almost never.

Не Відкривати Console

Console — твій friend.

Serious friend.

Friend, який каже, коли code wrong.

Відкривай її часто.

Читай errors.

Errors — це не insults.

Це clues.

Іноді rude clues, але все одно clues.

Практика

Створи свою версію page.

Зміни:

heading;
paragraph text;
button text;
message, який з’являється після click;
colors.

Потім додай ще один console.log() message:

console.log("Button готовий.");

Спробуй зрозуміти, де з’являється message.

Чим частіше ти використовуєш console, тим менш страшною вона стає.

Як темний підвал.

Все ще темний.

Але тепер ти знаєш, де вимикач.

Міні-Завдання

Додай другий button.

Перший button має казати:

Показати Веселе Повідомлення

Другий button має казати:

Показати Серйозне Повідомлення

Коли натискаєш перший button, покажи:

JavaScript — це весело!

Коли натискаєш другий button, покажи:

JavaScript потребує уваги.

Тобі знадобляться:

два buttons;
два різні IDs;
два event listeners.

Спробуй сам перед тим, як шукати help.

Struggle is part of learning.

Не forever.

Лише достатньо, щоб brain прокинувся.

Підсумок

Сьогодні ти дізнався, що:

JavaScript робить webpages interactive;
JavaScript може працювати в browser;
HTML, CSS і JavaScript працюють разом;
script.js можна підключити через script tag;
console.log() виводить messages у console;
alert() показує popup messages;
document.getElementById() знаходить HTML elements;
textContent змінює text;
addEventListener() реагує на user actions;
browser console допомагає debug code.

Це початок.

Small code.

Big door.

JavaScript величезний, але не треба вивчити все today.

Сьогодні ти підключив file, змінив text і відреагував на button click.

Це вже real JavaScript.

Наступний Урок

У наступному lesson ми вивчимо variables і data types.

Ти познайомишся з let, const, strings, numbers і booleans.

Тобто JavaScript почне щось пам’ятати.

Більше, ніж деякі browsers після refresh.