НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

Базовий JavaScript

JS Підручник JS Синтаксис JS Змінні JS Оператори JS If Умови JS Цикли JS Рядки JS Числа JS Функції JS Об’єкти JS Дати JS Масиви JS Набори JS Карти JS Математичні JS RegExp JS Типи даних JS Помилки JS Дебагінг JS Події JS Програмування JS Довідники JS UTF-8 Характери

JS Розширений

JS Версії JS Функції JS Об’єкти JS Класи JS Ітерації JS Проміси JS Модулі JS HTML DOM JS Вікна JS Web API JS AJAX JS JSON JS jQuery JS Графіка JS Приклади JS Об’єкти

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

En Es De Fr Ru

JavaScript Змінні

4 способи оголосити змінну JavaScript:

  • Використовуючи var
  • Використовуючи let
  • Використовуючи const
  • Нічого не використовуючи

Що таке змінні?

Змінні — це контейнери для зберігання даних (зберігання значень даних).

У цьому прикладі, x, y та z є змінними, оголошеними за допомогою ключового слова var:

Приклад

var x = 5;
var y = 6;
var z = x + y;
Спробуйте самі »

В цьому прикладі x, y та z є змінними, оголошеними за допомогою ключового слова let:

Приклад

let x = 5;
let y = 6;
let z = x + y;
Спробуйте самі »

В цьому прикладі x, y та z є неоголошеними змінними:

Приклад

x = 5;
y = 6;
z = x + y;
Спробуйте самі »

З усіх наведених вище прикладів ви можете здогадатися:

  • x зберігає значення 5
  • y зберігає значення 6
  • z зберігає значення 11

Коли використовувати змінну JavaScript?

Завжди оголошуйте змінні JavaScript за допомогою var, let або const.

Ключове слово var використовувалось у всьому JavaScript коді з 1995 по 2015 рік.

Ключові слова let та const було додано до JavaScript у 2015 році.

Якщо ви хочете, щоб ваш код запускався в старішій версії веб-браузера, ви повинні використовувати var.


Коли використовувати JavaScript const?

Якщо вам потрібне загальне правило: завжди оголошуйте змінні за допомогою const.

Якщо ви вважаєте, що значення змінної може змінитися, використовуйте let.

У цьому прикладі price1, price2 та total є змінними:

Приклад

const price1 = 5;
const price2 = 6;
let total = price1 + price2;
Спробуйте самі »

Дві змінні price1 та price2 оголошуються за допомогою ключового слова const.

Це постійні значення, які не можуть бути змінені.

Змінна total оголошується за допомогою ключового слова let.

Це значення можна змінити.


Як алгебра

Як і в алгебрі, змінні містять значення:

let x = 5;
let y = 6;

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

let z = x + y;

З наведеного вище прикладу ви можете здогадатися, що загальна сума дорівнює 11.

Примітка

Змінні є контейнерами для зберігання значень.


Ідентифікатори JavaScript

Усі змінні JavaScript мають бути ідентифіковані за допомогою унікальних імен.

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

Ідентифікатори можуть бути короткими іменами (наприклад, x та y) або більш описовими іменами: age (вік), sum (сума), totalVolume (загальний обсяг).

Загальні правила побудови імен для змінних (унікальних ідентифікаторів) такі:

  • Імена можуть містити літери, цифри, підкреслення та знаки долара.
  • Імена мають починатися з літери
  • Імена також можуть починатися з $ та _ (але ми не будемо використовувати їх у цьому посібнику)
  • Імена чутливі до регістру (y та Y - це різні змінні)
  • Зарезервовані слова (наприклад, ключові слова JavaScript) не можна використовувати як імена

Примітка

Ідентифікатори JavaScript чутливі до регістру.


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

В JavaScript знак рівності (=) є оператором "присвоєння", а оператором "дорівнює".

Це відрізняється від алгебри. Наступне не має сенсу в алгебрі:

x = x + 5

Однак у JavaScript це має сенс: він присвоює x + 5 значення x.

(Він обчислює значення x + 5 та поміщає результат в x. Значення x збільшується на 5.)

Примітка

Оператор "дорівнює" в JavaScript записується як == (тобто, два знака "дорівнює").


Типи даних JavaScript

Змінні JavaScript можуть містити числа, як-от 100, і текстові значення, як-от "John Doe".

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

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

Рядки записуються в подвійних або одинарних лапках. Числа пишуться без лапок.

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

Приклад

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
Спробуйте самі »

Оголошення змінної JavaScript

Створення змінної в JavaScript називається "оголошенням" змінної.

Ви оголошуєте змінну JavaScript за допомогою ключового слова var або let:

var carName;
або:
let carName;

Після оголошення змінна не має значення (технічно вона undefined - невизначена).

Щоб присвоїти значення змінній, використовуйте знак рівності:

carName = "Volvo";

Ви також можете призначити значення змінній під час її оголошення:

let carName = "Volvo";

У наведеному нижче прикладі ми створюємо змінну під назвою carName і присвоюємо їй значення "Volvo".

Тоді ми "виводимо" значення всередині параграфу HTML з id="demo":

Приклад

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
Спробуйте самі »

Примітка

Хорошою практикою програмування є оголошення всіх змінних на початку скрипту.


Одна інструкція, багато змінних

Ви можете оголосити багато змінних в одній інструкції.

Почніть інструкцію з let і розділіть змінні комою:

Приклад

let person = "John Doe", carName = "Volvo", price = 200;
Спробуйте самі »

Оголошення може займати кілька рядків:

Приклад

let person = "John Doe",
carName = "Volvo",
price = 200;
Спробуйте самі »

Значення = undefined

У комп’ютерних програмах змінні часто оголошуються без значення. Значення може бути чимось, що потрібно обчислити, або тим, що буде надано пізніше, як-от введення користувача.

Змінна, оголошена без значення, матиме значення undefined (невизначено).

Змінна carName матиме значення undefined після виконання цієї інструкції:

Приклад

let carName;
Спробуйте самі »

Повторне оголошення змінних JavaScript

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

Змінна carName усе ще матиме значення "Volvo" після виконання цих інструкцій.

Приклад

var carName = "Volvo";
var carName;
Спробуйте самі »

Примітка

Ви не можете повторно оголосити змінну, оголошену за допомогою let або const.

Це не буде працювати:

let carName = "Volvo";
let carName;

JavaScript Арифметика

Як і з алгеброю, ви можете виконувати арифметику зі змінними JavaScript, використовуючи такі оператори, як = та +:

Приклад

let x = 5 + 2 + 3;
Спробуйте самі »

Ви також можете додати рядки, але рядки будуть об’єднані:

Приклад

let x = "John" + " " + "Doe";
Спробуйте самі »

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

Приклад

let x = "5" + 2 + 3;
Спробуйте самі »

Примітка

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

Тепер спробуйте це:

Приклад

let x = 2 + 3 + "5";
Спробуйте самі »

JavaScript Знак долара $

Оскільки JavaScript розглядає знак долара як літеру, ідентифікатори, що містять $, є дійсними іменами змінних:

Приклад

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
Спробуйте самі »

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

Наприклад, у бібліотеці JavaScript jQuery основна функція $ використовується для вибору елементів HTML. У jQuery $("p"); означає "вибрати всі елементи p".


JavaScript Підкреслення (_)

Оскільки JavaScript сприймає підкреслення як літеру, ідентифікатори, що містять _, є дійсними іменами змінних:

Приклад

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
Спробуйте самі »

Використання підкреслення не дуже поширене в JavaScript, але серед професійних програмістів прийнято використовувати його як псевдонім для "приватних (прихованих)" змінних.


Перевірте себе за допомогою вправ

Вправа:

Створіть змінну під назвою carName і призначте їй значення Volvo.

    var  = "";
    


Примітка. Також ви можете переглянути архівну (застарілу) версію даної теми.


JavaScript — Змінні. Відеоурок W3Schools

У цьому відео пояснюються та демонструються змінні JavaScript.

Частина серії відеоуроків для вивчення JavaScript для початківців!



Коментарі