Вступ до JavaScript та змінні

Вступ до JavaScript — записи формул та змінних у блокноті розробника

Ми вивчили HTML (структура) та CSS (зовнішній вигляд). Але наші сторінки поки статичні — вони не реагують на дії користувача. JavaScript — це мова, яка робить сторінки живими: кнопки працюють, форми перевіряються, контент оновлюється без перезавантаження.

Що таке JavaScript?

JavaScript (JS) — мова програмування, яка виконується прямо в браузері. Саме вона відповідає за:

Реакцію на кліки, наведення, введення тексту
Валідацію форм
Анімації та інтерактивні елементи
Завантаження даних без перезавантаження (AJAX)
Повноцінні веб-додатки (Gmail, Google Maps, YouTube)

HTML = структура (скелет)
CSS  = зовнішній вигляд (шкіра, одяг)
JS   = поведінка (мозок, м'язи)

Інфо

JavaScript створив Брендан Айк (Brendan Eich) за 10 днів у 1995 році для браузера Netscape. Незважаючи на назву, JavaScript не має відношення до Java — це окрема мова. Сьогодні JS — найпопулярніша мова програмування у світі.

Де писати JavaScript?

1. Консоль браузера

Натисни F12 (або Ctrl+Shift+I) → вкладка Console. Можна писати JS прямо тут:

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

А ще можна запустити JavaScript прямо в терміналі через Node.js (ми встановили його в Block 1). Набери node і пиши код інтерактивно:

Node.js REPL — інтерактивний JavaScript у терміналі

2. В HTML-файлі (тег `<script>`)

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

  <script>
    console.log("Скрипт виконався!");
  </script>
</body>

3. Зовнішній файл (рекомендовано)

<!-- index.html -->
<body>
  <h1>Моя сторінка</h1>
  <script src="script.js"></script>
</body>

// script.js
console.log("Скрипт з окремого файлу!");

Порада

Завжди розміщуй <script> перед закриваючим </body> або використовуй атрибут defer. Це гарантує, що HTML завантажиться до виконання скрипту.

console.log — твій найкращий друг

console.log() виводить інформацію в консоль браузера. Це основний інструмент для відлагодження (debugging):

console.log("Текст");           // рядок
console.log(42);                 // число
console.log(true);               // boolean
console.log("Вік:", 25);         // кілька значень через кому

Відкрий консоль (F12 → Console) і побачиш результат.

Змінні — зберігання даних

Змінна — це іменована комірка для зберігання значення:

let name = "Олексій";
let age = 25;
let isStudent = true;

console.log(name);    // "Олексій"
console.log(age);     // 25

let, const, var — три способи оголошення

let — змінна, яку можна змінити

let score = 0;
score = 10;        // можна змінити
score = score + 5; // тепер 15
console.log(score); // 15

const — константа, яку НЕ можна змінити

const PI = 3.14159;
const siteName = "Learn Programming";

PI = 3; // ❌ Помилка! const не можна перезаписати

var — старий спосіб (не використовуй)

var oldVariable = "стара змінна";
// Працює, але має проблеми з областю видимості
// Завжди використовуй let або const замість var

Увага

Правило: використовуй const за замовчуванням. Переходь на let тільки якщо значення потрібно змінювати. Ніколи не використовуй var — це застарілий спосіб з проблемами.

Ключове слово	Можна змінити?	Коли використовувати
`const`	Ні	За замовчуванням для всього
`let`	Так	Коли значення змінюється (лічильники, стан)
`var`	Так	Ніколи (застарілий)

Правила іменування змінних

// ✅ Правильно
let userName = "Олексій";     // camelCase — стандарт
let totalPrice = 299;
let isLoggedIn = true;
let MAX_RETRIES = 3;          // UPPER_CASE для констант-конфігурацій

// ❌ Неправильно
let 1name = "...";            // не можна починати з цифри
let user-name = "...";        // дефіс не дозволений
let let = "...";              // не можна використовувати зарезервовані слова

Конвенція camelCase

В JavaScript імена змінних пишуться camelCase — перше слово з малої, кожне наступне з великої:

let firstName = "Олексій";
let lastName = "Бойко";
let dateOfBirth = "2000-01-15";
let numberOfStudents = 42;

Порада

Імена змінних повинні бути описовими. let x = 5 — погано. let userAge = 5 — добре. Код читається набагато частіше, ніж пишеться.

Коментарі

Коментарі — текст, який JavaScript ігнорує. Для пояснень та нотаток:

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

/*
  Багаторядковий коментар
  може займати кілька рядків
*/

let price = 100; // коментар після коду

Практика: перші кроки

Створи файл script.js та спробуй:

// 1. Оголоси змінні
const myName = "Твоє ім'я";
let myAge = 20;
const isLearningJS = true;

// 2. Виведи їх
console.log("Привіт! Мене звати", myName);
console.log("Мені", myAge, "років");
console.log("Я вивчаю JS:", isLearningJS);

// 3. Зміни значення
myAge = myAge + 1;
console.log("Наступного року мені буде", myAge);

// 4. Спроба змінити const — розкоментуй і подивись помилку:
// myName = "Інше ім'я"; // TypeError!

Підсумок

JavaScript — мова для інтерактивності в браузері
console.log() — виводить дані в консоль (F12)
const — для значень, що не змінюються (використовуй за замовчуванням)
let — для значень, що змінюються
var — не використовуй (застарілий)
camelCase — стандарт іменування змінних в JS

Що далі?

У наступному уроці вивчимо типи даних — рядки, числа, boolean, null, undefined — та оператори для роботи з ними.