Змінні та Типи Даних

З поверненням.

У попередньому уроці ти підключив JavaScript до HTML.

Ти написав console.log().

Ти змінив text на page.

Ти зробив так, щоб button реагував на click.

Дуже добре.

Browser уже не повністю тебе ігнорує.

Сьогодні ми вивчимо одну з найважливіших речей у JavaScript:

variables.

Variables дозволяють JavaScript пам’ятати інформацію.

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

З variables JavaScript може зберігати values і використовувати їх пізніше.

Names.

Numbers.

Messages.

User choices.

Prices.

Booleans.

Маленькі цифрові спогади.

Дуже useful.

Іноді дуже dangerous, якщо назвати їх погано.

Але ми виживемо.

Що Ти Вивчиш

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

що таке variables;
як використовувати let;
як використовувати const;
коли використовувати let, а коли const;
що таке data types;
як працюють strings;
як працюють numbers;
як працюють booleans;
що означає undefined;
що означає null;
як використовувати typeof;
як використовувати template literals.

До кінця цього lesson ти зможеш зберігати values у JavaScript і розуміти, з яким типом data працюєш.

Звучить просто.

І це просто.

Поки ти не зустрінеш undefined.

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

Що Таке Variable?

Variable — це named container для value.

Приклад:

const name = "Viktor";

Тут:

const створює variable;
name — це назва variable;
"Viktor" — це value.

Ти можеш використати variable пізніше:

console.log(name);

Console покаже:

Viktor

Думай про variable як про коробку з етикеткою.

Етикетка каже, що всередині.

Value — це те, що ти кладеш у коробку.

Good variable names дуже важливі.

Погана назва:

const x = "Viktor";

Краща назва:

const userName = "Viktor";

JavaScript зрозуміє обидві.

Люди — не завжди.

А люди зазвичай і є проблемою.

Особливо майбутній ти.

Майбутній ти відкриє свій code і спитає:

“Хто це написав?”

Потім зрозуміє.

Це був ти.

Створи Project

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

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

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

javascript-lesson2/
  index.html
  script.js

Відкрий folder у своєму editor.

Більшість прикладів ми будемо дивитися в browser console.

Без complicated setup.

Тільки JavaScript, який вчиться пам’ятати речі.

Як маленький слон із syntax.

Напиши 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>
</head>
<body>
  <h1>Змінні та Типи Даних</h1>
  <p>Відкрий browser console, щоб побачити JavaScript output.</p>

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

Відкрий file у browser.

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

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

Тепер ми готові.

Console чекає.

Трохи judgmentally, але чекає.

Використання const

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

const firstName = "Viktor";
const age = 33;

console.log(firstName);
console.log(age);

Онови browser.

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

Viktor
33

const створює variable, яку не можна reassigned.

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

const city = "Vigevano";

console.log(city);

А це вже не нормально:

const city = "Vigevano";

city = "Milan";

JavaScript покаже error.

Чому?

Бо const означає, що binding variable не може бути змінений.

Ти сказав JavaScript:

“Це value має залишатися тут.”

Потім спробував її замінити.

JavaScript сказав:

“Ні.”

Трохи energy італійської бюрократії.

Але useful.

Використання let

Іноді тобі потрібна value, яка може змінюватися.

Для цього використовуємо let.

Приклад:

let score = 0;

console.log(score);

score = 10;

console.log(score);

Console покаже:

0
10

Це працює, бо let дозволяє reassignment.

Використовуй let, коли value має змінюватися.

Приклади:

let counter = 0;
let userInput = "";
let isMenuOpen = false;

Ці values можуть змінитися пізніше.

Counter росте.

User input змінюється.

Menu відкривається і закривається.

Life happens.

JavaScript adapts.

const чи let?

Використовуй просте правило:

Використовуй const за замовчуванням.

Використовуй let тільки тоді, коли value має змінюватися.

Добре:

const userName = "Anna";
const country = "Italy";

let points = 0;
points = points + 10;

Чому краще const?

Бо це робить code безпечнішим.

Якщо value не має змінюватися, const її захищає.

Це як маленький паркан навколо variable.

Не дуже високий паркан.

Але достатній, щоб зупинити beginner chaos.

Поки Не Використовуй var

Ти можеш побачити старіший JavaScript code з var.

Приклад:

var name = "Old JavaScript";

У цьому course уникай var.

Використовуй:

const;
let.

var має старішу поведінку, яка може плутати beginners.

Нам сьогодні не потрібна ця drama.

JavaScript і так має достатньо personality.

Strings

String — це text.

Strings створюються через quotes:

const language = "JavaScript";
const message = "Hello, world!";
const country = 'Italy';

Працюють і double quotes, і single quotes.

Вибери один style і будь consistent.

Можна print strings:

const message = "JavaScript is fun.";

console.log(message);

Можна об’єднувати strings:

const firstName = "Viktor";
const greeting = "Hello, " + firstName;

console.log(greeting);

Console покаже:

Hello, Viktor

Це називається string concatenation.

Воно працює.

Але є чистіший спосіб.

Template Literals

Template literals використовують backticks:

const firstName = "Viktor";
const age = 33;

const message = `My name is ${firstName} and I am ${age} years old.`;

console.log(message);

Console покаже:

My name is Viktor and I am 33 years old.

Це дуже useful.

Всередині ${} можна вставляти variables.

Template literals зазвичай легше читати, ніж string concatenation.

Порівняй це:

const message = "My name is " + firstName + " and I am " + age + " years old.";

з цим:

const message = `My name is ${firstName} and I am ${age} years old.`;

Другий варіант виглядає чистіше.

Менше punctuation soup.

Більше dignity.

Numbers

Numbers використовуються для math.

Приклад:

const price = 100;
const quantity = 3;
const total = price * quantity;

console.log(total);

Console покаже:

JavaScript може робити basic math:

const a = 10;
const b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Output:

13
7
30
3.3333333333333335

Останнє число — дуже JavaScript.

Не wrong.

Просто надто чесне.

Computers роблять decimal math так, що іноді це виглядає дивно.

На beginner level не панікуй.

Просто знай, що decimals іноді можуть бути weird.

Як люди до кави.

Booleans

Boolean — це true або false.

Приклад:

const isLoggedIn = true;
const isAdmin = false;

console.log(isLoggedIn);
console.log(isAdmin);

Booleans використовуються для decisions.

Приклад:

const isLoggedIn = true;

if (isLoggedIn) {
  console.log("Welcome back!");
}

Console покаже:

Welcome back!

Booleans дуже important у programming.

Вони відповідають на yes-or-no questions.

User logged in?

Menu open?

Password valid?

JavaScript сьогодні поводиться нормально?

Usually false.

Жартую.

Mostly.

undefined

Variable має значення undefined, коли вона існує, але ще не має value.

Приклад:

let userName;

console.log(userName);

Console покаже:

undefined

Це означає:

“Variable існує, але їй нічого не assigned.”

Це як порожня коробка з етикеткою.

Коробка існує.

А всередині?

Нічого.

Маленька existential crisis.

null

null означає intentionally empty value.

Приклад:

const selectedUser = null;

console.log(selectedUser);

null зазвичай означає:

“Тут немає value, і я зробив це спеціально.”

Різниця:

let userName;
const selectedUser = null;

userName має undefined, бо жодна value не була assigned.

selectedUser має null, бо ми спеціально встановили empty value.

Думай так:

undefined: JavaScript ще не знає.
null: ти навмисно поставив там нічого.

Дуже philosophical.

Дуже useful.

typeof

Operator typeof показує type value.

Приклад:

const name = "Viktor";
const age = 33;
const isStudent = false;

console.log(typeof name);
console.log(typeof age);
console.log(typeof isStudent);

Output:

string
number
boolean

Спробуй також це:

let city;
const selectedItem = null;

console.log(typeof city);
console.log(typeof selectedItem);

Output:

undefined
object

Так.

typeof null дає "object".

Це старий JavaScript quirk.

Не намагайся це виправити.

Багато хоробрих developers довго дивилися на це.

Воно все ще там.

Як дивний monument.

Правила Називання Variables

Назви variables можуть містити:

letters;
numbers;
underscores;
dollar signs.

Але вони не можуть починатися з number.

Добре:

const userName = "Anna";
const userAge = 25;
const totalPrice = 300;

Погано:

const 1user = "Anna";

Variable names також case-sensitive:

const userName = "Anna";
const username = "Marco";

Це дві різні variables.

JavaScript бачить їх як different.

Humans бачать це і починають suffering.

Використовуй clear names.

Добре:

const productPrice = 49;
const userEmail = "hello@example.com";
const isMenuOpen = true;

Погано:

const p = 49;
const x = "hello@example.com";
const thing = true;

Computer does not care.

Your brain does.

Respect your brain.

It already has enough tabs open.

Побудуй Маленький Приклад

Замінити script.js на це:

const productName = "JavaScript Course";
const price = 49;
const discount = 10;
const isAvailable = true;

const finalPrice = price - discount;

console.log(`Product: ${productName}`);
console.log(`Original price: €${price}`);
console.log(`Discount: €${discount}`);
console.log(`Final price: €${finalPrice}`);
console.log(`Available: ${isAvailable}`);

Онови browser.

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

Product: JavaScript Course
Original price: €49
Discount: €10
Final price: €39
Available: true

Цей приклад використовує:

strings;
numbers;
booleans;
variables;
math;
template literals.

Small example.

Багато important ideas.

JavaScript уже робить useful work.

Без fireworks.

Але точно з маленькою spark.

Покажи Data на Page

Тепер покажемо data в 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>

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

    .card {
      background-color: white;
      padding: 24px;
      border-radius: 18px;
      border: 2px solid #e5e7eb;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Змінні та Типи Даних</h1>

  <div class="card">
    <h2 id="productName"></h2>
    <p id="productPrice"></p>
    <p id="productStatus"></p>
  </div>

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

Тепер онови script.js:

const productName = "JavaScript Course";
const price = 49;
const discount = 10;
const isAvailable = true;

const finalPrice = price - discount;

const productNameElement = document.getElementById("productName");
const productPriceElement = document.getElementById("productPrice");
const productStatusElement = document.getElementById("productStatus");

productNameElement.textContent = productName;
productPriceElement.textContent = `Final price: €${finalPrice}`;
productStatusElement.textContent = `Available: ${isAvailable}`;

Онови browser.

Тепер JavaScript зберігає data у variables і записує цю data на page.

Це важливо.

Ти вже не просто print things у console.

Ти використовуєш JavaScript, щоб контролювати page content.

Page стає dynamic.

Very nice.

HTML, мабуть, тепер відчуває себе important.

Common Mistakes

Забути Quotes Навколо Strings

Погано:

const name = Viktor;

Добре:

const name = "Viktor";

Без quotes JavaScript думає, що Viktor — це variable name.

Потім шукає цю variable.

Потім не знаходить.

Потім complains.

Classic JavaScript.

Reassigning const

Погано:

const score = 0;
score = 10;

Добре:

let score = 0;
score = 10;

Використовуй let, якщо value змінюється.

Використовуй const, якщо не змінюється.

Simple rule.

Strong result.

Плутати Strings і Numbers

Це number:

const age = 33;

Це string:

const age = "33";

Вони виглядають схоже.

Але це не одне й те саме.

Numbers — для math.

Strings — це text.

JavaScript іноді автоматично converts values.

Це може бути useful.

А може створити chaos in a nice jacket.

Be careful.

Погані Variable Names

Погано:

const data = "Anna";
const thing = 25;
const value = true;

Краще:

const userName = "Anna";
const userAge = 25;
const isLoggedIn = true;

Good names роблять code легшим для розуміння.

Code читають частіше, ніж пишуть.

Write for humans.

Computer already understands nonsense.

Практика

Створи variables для user profile:

first name;
last name;
age;
country;
is online.

Потім виведи sentence через template literal.

Example output:

Viktor Holovin is 33 years old and lives in Italy. Online: true

Використай:

const firstName = "Viktor";
const lastName = "Holovin";
const age = 33;
const country = "Italy";
const isOnline = true;

const profile = `${firstName} ${lastName} is ${age} years old and lives in ${country}. Online: ${isOnline}`;

console.log(profile);

Потім зміни values і створи свій profile.

Не тільки copy.

Modify.

Break.

Fix.

That is where learning hides.

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

Створи маленьку product card.

Variables:

product name;
price;
discount;
final price;
is available.

Покажи result на browser page, не тільки в console.

Використай:

const;
numbers;
booleans;
template literals;
document.getElementById;
textContent.

Bonus:

Якщо product available, покажи:

This product is available.

Якщо ні, покажи:

This product is not available.

Тобі знадобиться if statement.

Conditions ми нормально вивчимо в наступному lesson, але ти вже можеш спробувати.

A little struggle is healthy.

Like gym for the brain.

Without the sweaty towel.

Підсумок

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

variables зберігають values;
const — для values, які не мають reassigned;
let — для values, які можуть змінюватися;
strings — це text;
numbers використовуються для math;
booleans — це true або false;
undefined означає, що variable не має assigned value;
null означає intentionally empty;
typeof показує type value;
template literals допомагають поєднувати text і variables;
good variable names роблять code легшим для розуміння;
JavaScript може зберігати data і показувати її на page.

Це великий крок.

Variables всюди в JavaScript.

Якщо JavaScript був би кухнею, variables були б мисками, куди ти кладеш ingredients.

Без мисок ти просто тримаєш яйця в руках і сподіваєшся на краще.

Not a good strategy.

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

У наступному lesson ми вивчимо operators і conditions.

Ти навчиш JavaScript приймати decisions.

If this happens, do that.

If not, do something else.

Basically, JavaScript почне оцінювати situations.

Politely.

Mostly.