Переменные и Типы Данных

С возвращением.

В предыдущем уроке ты подключил 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="ru">
<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="ru">
<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.