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

JS Підручник

JS Старт JS Інтро JS Установка JS Виведення JS Інструкції JS Синтаксис JS Коментарі JS Змінні JS Ключове слово Let JS Ключове слово Const JS Оператори JS Арифметичні JS Присвоєння JS Типи даних JS Функції JS Об’єкти JS Події JS Рядки JS Рядкові методи JS Рядковий пошук JS Рядкові шаблони JS Числа JS Числові методи JS Масиви JS Методи масиву JS Сортування масиву JS Ітерація масиву JS Масив Const JS Дати JS Формати дат JS Методи отримання дат JS Методи встановлення дат JS Математичні JS Рандомні JS Булеві JS Порівняння JS Умови JS Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Break & Continue JS Ітерації JS Сети (Набори) JS Мапи JS Typeof JS Перетворення типів JS Побітові JS Регулярні вирази JS Помилки JS Область дії JS Хостинг JS Use Strict JS Ключове слово this JS Функція стрілки JS Класи JS Модулі JS JSON JS Дебагінг JS Гід по стилю JS Кращі практики JS Поширені помилки JS Продуктивність JS Зарезервовані слова

JS Версії

JS Версії JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021/2022 JS IE/Edge JS Історія

JS Об’єкти

Визначення об’єктів Властивості об’єкта Методи об’єкта Відображення об’єкта Доступ до об’єктів Конструктори об’єктів Прототипи об’єктів Ітеровані об’єкти Сети (Набори) об’єктів Мапи (Карти) об’єктів Довідник об’єктів

JS Функції

Визначення функції Параметри функції Виклик функції Функція call() Функція apply() Функція bind() Закриття функції

JS Класи

Класи. Інтро Успадкування класу Статичні методи

JS Асинхроний

Зворотні виклики Асинхроний Проміси Async/Await

JS HTML DOM

DOM Вступ DOM Методи DOM Документ DOM Елементи DOM HTML DOM Форми DOM CSS DOM Анімація DOM Події DOM Слухач подій DOM Навігація DOM Вузли DOM HTMLCollection DOM NodeList

JS Браузер BOM

JS Вікно JS Скрін JS Локація JS Історія JS Навігатор JS Виринаюче сповіщення JS Таймінг JS Куки

JS Веб API

Веб API Вступ Веб-форми API Веб-історія API Веб-сховище API Веб-воркер API Веб-виборка API Веб-геолокація API

JS AJAX

AJAX Вступ AJAX XMLHttp AJAX Запит AJAX Відповідь сервера AJAX XML Файл AJAX PHP AJAX ASP AJAX База даних AJAX Додатки AJAX Приклади

JS JSON

JSON Вступ JSON Синтаксис JSON та XML JSON Типи даних JSON Аналіз JSON Stringify JSON Об’єкти JSON Масиви JSON Сервер JSON PHP JSON HTML JSON JSONP

JS та jQuery

jQuery Селектори jQuery HTML jQuery CSS jQuery DOM

JS Графіка

JS Графіка JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

JS Приклади

JS Приклади JS HTML DOM JS HTML Input JS HTML Об’єкти JS HTML Події JS Браузер JS Редактор JS Вправи JS Вікторина JS Навчальний табір JS Сертифікат

JS Довідники

JavaScript Об’єкти HTML DOM Об’єкти

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

En

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  = "";


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