Лекція

Тема. Тип величини. Стандартні типи величин. Змінні та константи. Опис констант. Опис змінних. Оператор присвоювання. Перетворення типів.

План лекції

1. Змінні.
2. Типи даних.
3. Взаємодія: alert, prompt, confirm.
4. Перетворення типу.

Рекомендована література

1. Двірничук К.В., Вацек Д.О. Веб-програмування та веб-дизайн : навч. посіб. Чернівці : Чернівец. нац. ун-т ім. Ю. Федьковича, 2022. 472 с.
2. Мова програмування JavaScript. URL: https://uk.javascript.info/js/
3. Цеслів О.В. Основи програмування та веб-дизайн: Навч. посіб. Київ, 2020. 149с.

 

Зміст лекції

1. Змінні

Найчастіше застосункам на JavaScript потрібно працювати з інформацією. Ось два приклади:

1. Онлайн-магазин – інформацією можуть бути товари, які продаються, і вміст кошика.
2. Застосунок для чату – інформація може включати користувачів, повідомлення та багато іншого.

Змінні використовуються для зберігання цієї інформації.

Змінна це “іменована частинка сховища”, в якій зберігаються дані. Ми можемо використовувати змінні, щоб зберігати товари, відвідувачів та інші дані.

Ключові слова для оголошення змінних: var , let, const.

Особливості var:

-          спосіб оголошення існував завжди (цей спосіб існує з першої версії JavaScript);

-          піднімаються (функціонує механізм hoisting);

-          функціональна область видимості;

-          можна оголосити змінну з таким же ім'ям (перевизначити) (але не в режимі "use strict").

Особливості let:

-           спосіб оголошення було додано в специфікацію ES6;

-           не піднімаються (відсутнє поняття hoisting);

-           блокова область видимості (всередині фігурних дужок);

-           не можна оголосити змінну з таким же ім'ям (перевизначити).

Особливості const:

-           не піднімаються (відсутнє поняття hoisting);

-           не можна оголосити змінну з таким же ім'ям;

-           не можна змінити значення змінної;

-           не можна оголосити змінну без значення (ініціалізацію).

Рекомендується використовувати для оголошення та ініціалізації змінних ключове слово let.

Цей рядок нижче створить (інакше кажучи, оголосить) змінну з ім’ям “message”:

let message;

Тепер ми можемо покласти деякі дані в цю змінну, використовуючи оператор присвоєння =:

let message;

message = 'Привіт'; // збереження рядка 'Привіт' у змінній `message`

Тепер рядок збережено в частину пам’яті, яка зв’язана з цією змінною. Ми можемо отримати доступ до даних, використовуючи ім’я змінної:

let message;

message = 'Привіт!';

alert(message); // показує вміст змінної

Щоб писати менше коду, ми можемо суміщати оголошення змінної та її присвоєння в одному рядку:

let message = 'Привіт!'; // оголошення змінної і присвоєння значення

alert(message); // Привіт!

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

let user = 'Іван', age = 25, message = 'Привіт';

Таке оголошення може виглядати коротшим, проте ми не рекомендуємо так писати. Заради кращої читабельності, будь ласка, оголошуйте змінні з нового рядка.

Багаторядковий спосіб трохи довший, проте його легше читати:

let user = 'Іван';

let age = 25;

let message = 'Привіт';

Деякі люди також оголошують змінні в такому багаторядковому стилі:

let user = 'Іван',

age = 25,

message = 'Привіт';

…або навіть у стилі “кома спочатку”:

let user = 'Іван'

, age = 25

, message = 'Привіт';

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

var замість let

У старих скриптах ви можете знайти інше ключове слово: var замість let:

var message = 'Привіт';

Ключове слово var майже таке, як let. Воно теж оголошує змінну, але дещо іншим, “застарілим” способом.

Є деякі відмінності між let і var, але вони поки що не мають для нас значення.

Аналогія з життя. Ми легко зрозуміємо концепцію “змінної”, якщо уявимо її у вигляді “коробки” для даних з унікальною назвою на наклейці.

Наприклад, змінну message можна уявити як коробку з підписом "Повідомлення" зі значенням "Привіт!" всередині:

Ми можемо покласти будь-яке значення в цю коробку.

Ми також можемо змінювати його стільки разів, скільки захочемо:

let message;

message = 'Привіт!';

message = 'Світ!'; // значення змінено

alert(message);

Коли значення змінюється, старі дані видаляються зі змінної:

Ми також можемо оголосити дві змінні і скопіювати дані з однієї в іншу.

let hello = 'Привіт світ!';

let message;

// копіюємо 'Привіт світ' з hello в message

message = hello;

// тепер дві змінні мають однакові дані

alert(hello); // Привіт світ!

alert(message); // Привіт світ!

Оголошення змінної вдруге призведе до помилки

Оголошувати змінну можна лише один раз.

Повторне оголошення тієї ж змінної спричинить помилку:

let message = "Це";

// повторне 'let' призведе до синтаксичної помилки

let message = "Той"; // SyntaxError: 'message' has already been declared

Тому ми маємо оголосити змінну лише раз, а потім просто посилатися на неї, без let.

Функційне програмування

Цікаво зазначити, що існують функційні мови програмування, такі як Haskell, в яких заборонено змінювати значення змінних.

У таких мовах збережені в “коробку” значення залишаються там назавжди. Якщо нам потрібно зберегти щось інше, мова змусить нас створити нову коробку (оголосити нову змінну). Ми не можемо використати стару змінну.

Хоча на перший погляд це може здатися дивним, проте ці мови цілком підходять для серйозної розробки. Ба більше, є такі галузі, як от паралельні обчислення, де це обмеження дає певні переваги.

Іменування змінних

В JavaScript є два обмеження, які стосуються імен змінних:

1. Ім’я має містити лише букви, цифри або символи $ і _.
2. Перший символ не має бути числом.

Ось приклади допустимих імен:

let userName;

let test123;

Для написання імені, яке містить декілька слів, зазвичай використовують “верблюжий регістр” (camelCase). Тобто слова йдуть одне за одним, і кожне слово пишуть із великої букви й без пробілів: myVeryLongName. Зауважте, що перше слово пишеться з маленької букви.

Що цікаво – знак долара '$' і знак підкреслення '_' також можна використовувати в іменах. Це звичайні символи, такі ж, як і букви, без будь-якого особливого значення.

Ці імена також допустимі:

let $ = 1; // оголошено змінну з ім'ям "$"

let _ = 2; // а тепер змінна з ім'ям "_"

alert($ + _); // 3

Приклади недопустимих імен змінних:

let 1a; // не може починатися з цифри

let my-name; // дефіс '-' недопустимий в імені

Регістр має значення

Змінні з іменами apple і APPLE – це дві різні змінні.

Не-латинські букви дозволені, але не рекомендуються

Можна використовувати будь-яку мову, включно з кирилицею або навіть ієрогліфами, наприклад:

let назва = '...';

let 我 = '...';

Технічно тут немає помилки. Такі імена дозволені, проте є міжнародна традиція використовувати англійську мову в іменах змінних (наприклад, yaLyublyuUkrainu => iLoveUkraine). Навіть якщо ми пишемо маленький скрипт, у нього може бути тривале життя попереду. Людям з інших країн, можливо, доведеться прочитати його не один раз.

Зарезервовані слова

Є список зарезервованих слів, які не можна використовувати як імена змінних, тому що ці слова використовує сама мова.

Наприклад: let, class, return і function зарезервовані.

Такий код видаватиме синтаксичну помилку:

let let = 5; // не можна назвати змінну "let", помилка!

let return = 5; // також не можна називати змінну "return", помилка!

Створення змінної без використання use strict

Зазвичай нам потрібно оголосити змінну перед її використанням. Але в старі часи було технічно можливим створити змінну простим присвоєнням значення, без використання let. Це все ще працює, якщо не вмикати суворий режим у наших скриптах для підтримання сумісності зі старими сценаріями.

// "use strict" в цьому прикладі не використовується

num = 5; // якщо змінна "num" не існувала, її буде створено

alert(num); // 5

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

"use strict";

num = 5; // помилка: num не оголошено

Константи

Щоб оголосити константу (незмінювану) змінну, використовуйте ключове слово const замість let:

const myBirthday = '18.04.1982';

Змінні, оголошені за допомогою const, називаються “константами”. Їхні значення не можна переприсвоювати. Спроба це зробити призведе до помилки:

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // помилка, не можна перевизначати константу!

Коли програміст впевнений, що змінна ніколи не буде змінюватися, він може оголосити її через const, що гарантує постійність і буде зрозумілим для кожного.

Константи в верхньому регістрі

Широко поширена практика використання констант як псевдонімів для значень, які важко запам’ятати і які відомі до початку виконання скрипта.

Такі константи пишуться в верхньому регістрі з використанням підкреслень.

Наприклад, давайте створимо константи, в які запишемо значення кольорів у так званому “вебформаті” (в шістнадцятковій системі):

const COLOR_RED = "#F00";

const COLOR_GREEN = "#0F0";

const COLOR_BLUE = "#00F";

const COLOR_ORANGE = "#FF7F00";

// ...коли потрібно вибрати колір

let color = COLOR_ORANGE;

alert(color); // #FF7F00

Переваги:

-       COLOR_ORANGE набагато легше запам’ятати, ніж "#FF7F00".

-       Набагато легше допустити помилку в "#FF7F00", ніж під час введення COLOR_ORANGE.

-       Під час читання коду COLOR_ORANGE набагато зрозуміліше, ніж #FF7F00.

Коли ми маємо використовувати для констант великі букви, а коли звичайні? Давайте це з’ясуємо.

Назва “константа” лише означає, що змінна ніколи не зміниться. Але є константи, які відомі нам до виконання скрипта (наприклад, шістнадцяткове значення для червоного кольору), а є константи, які вираховуються в процесі виконання скрипта, але не змінюються після їхнього початкового присвоєння.

Наприклад:

const pageLoadTime = /* час, потрачений на завантаження вебсторінки */;

Значення pageLoadTime невідоме до завантаження сторінки, тому її ім’я записано звичайними, а не великими буквами. Але це все ще константа, тому що вона не змінює значення після присвоєння.

Інакше кажучи, константи з великими буквами використовуються як псевдоніми для “жорстко закодованих” значень.

Придумуйте правильні імена

У розмові про змінні необхідно згадати ще одну дуже важливу річ – правильні імена змінних.

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

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

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

Будь ласка, приділіть час на обдумування правильного імені для змінної перед її оголошенням. Робіть так, і будете винагороджені.

Декілька хороших правил:

-       Використовуйте імена, які легко прочитати, наприклад, userName або shoppingCart.

-       Уникайте використання абревіатур або коротких імен, таких як a, b, c, окрім тих випадків, коли ви точно знаєте, що так потрібно.

-       Робіть імена максимально описовими і лаконічними. Наприклад, такі імена погані: data і value. Такі імена нічого не говорять. Їх можна використовувати лише тоді, коли з контексту очевидно, на які дані або значення посилається змінна.

-       Погоджуйте з вашою командою, які терміни будуть використовуватися. Якщо відвідувач сайту називається “user”, тоді ми маємо давати відповідні імена іншим пов’язаним змінним: currentUser або newUser, замість currentVisitor або newManInTown.

Звучить легко? Це дійсно так, проте на практиці створення зрозумілих і коротких імен – рідкість. Дійте.

Перевикористовувати чи створювати?

І остання примітка. Є ліниві програмісти, які замість оголошення нових змінних повторно використовують наявні.

У результаті їхні змінні схожі на коробки, в які люди кидають різні речі, не змінюючи на них наклейки. Що зараз міститься всередині коробки? Хто знає? Нам необхідно підійти поближче і перевірити.

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

Додаткова змінна – це добро, а не зло.

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

 

Підсумки

Ми можемо оголосити змінні для збереження даних за допомогою ключових слів var, let чи const.

-       let – це сучасний спосіб оголошення.

-       var – це застарілий спосіб оголошення змінної. Зазвичай ми не використовуємо його взагалі, але ми розглянемо тонкі відмінності від let в розділі Застаріле ключове слово "var", на випадок, якщо це все-таки знадобиться.

-       const – це як let, але значення змінної не може змінюватися.

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

Завдання 1.

1) Робота зі змінними.

1. Оголосіть дві змінні: admin та name.
2. Присвойте значення "Іван" змінній name.
3. Скопіюйте значення зі змінної name в admin.
4. Виведіть значення змінної admin, використовуючи функцію alert (яка повинна показати “Іван”).

Рішення

let admin, name; // можна оголошувати дві змінні через кому

name = "Іван";

admin = name;

alert( admin ); // "Іван"

2) Придумайте правильні імена

1. Створіть змінну із назвою нашої планети. Як би ви назвали таку змінну?
2. Створіть змінну для зберігання імені поточного відвідувача сайту. Як би ви назвали таку змінну?

Рішення  

Змінна для нашої планети

Ось приклад:

let ourPlanetName = "Земля";

Зверніть увагу, ми могли використати коротше ім’я planet, але тоді буде незрозуміло, яку планету ми маємо на увазі. Краще описати вміст змінної детальніше. Принаймні до тих пір, поки ім’я змінної неСтанеЗанадтоДовгим.

3) Використовувати великі чи маленькі букви для імен констант?

Переглянемо наступний код:

const birthday = '18.04.1982';

const age = someCode(birthday);

В нас є константа birthday для дати, а також константа age.

Константа age обчислюється від birthday за допомогою someCode(), що означає виклик функції, яку ми ще не розібрали (ми скоро це зробимо!), але деталі тут не мають значення, справа в тому, що age обчислюється якимось чином на основі birthday.

Чи можна використовувати великі букви для імені birthday? А для age? Чи для обох змінних?

Рішення  

const BIRTHDAY = '18.04.1982'; // використовувати великі букви?

const AGE = someCode(BIRTHDAY); // а тут?

Зазвичай, ми використовуємо великі букви для констант, які “жорстко закодовані” (hardcoded). Інакше кажучи, коли значення константи відоме до початку виконання скрипта і записується безпосередньо в код.

В нашому випадку, birthday саме така змінна. Тому для неї ми можемо використати великі букви.

На відмінну від попередньої, константа age обчислюється під час виконання скрипта. Сьогодні в нас один вік, а через рік вже зовсім інший. Змінна є константою, тому що не змінюється під час виконання коду. Але вона “трохи менша” константа, ніж birthday: вона обчислюється, тому ми повинні зберегти її в нижньому регістрі.

 

2. Типи даних

Значення в JavaScript завжди має певний тип даних. Наприклад, рядок або число.

У JavaScript є вісім основних типів даних.

Ми можемо призначити змінній будь-який тип даних. Наприклад, в один момент змінна може бути рядком, а в інший – числом:

// тут не буде помилки

let message = "привіт";

message = 123456;

Мови програмування, які дають змогу таке робити, називаються “динамічно типізованими”. Мається на увазі, що типи даних визначені, але змінні не прив’язанні до жодного типу.

Число (number)

let n = 123;

n = 12.345;

Тип number представляє і цілі числа, і числа з рухомою точкою.

Є багато операцій, що можна робити з числами, наприклад, множення *, ділення /, додавання +, віднімання - тощо.

Окрім звичайних чисел, є так звані “спеціальні числові значення”, що також мають відношення до цього типу даних: Infinity, -Infinity і NaN.

Infinity являє собою математичну нескінченність ∞. Це спеціальне значення, що є більшим за будь-яке число.

Ми можемо отримати його як результат ділення на нуль:

alert(1 / 0); // Infinity

Або безпосередньо посилатися на нього:

alert(Infinity); // Infinity

NaN (Not a Number) являє собою помилку обчислення. Це є результат неправильної або невизначеної математичної операції, наприклад:

alert("not a number" / 2); // NaN, таке ділення є помилковим

NaN є “причепливим” (“заразливим”). Будь-яка подальша математична операція з NaN повертає NaN:

Отже, якщо десь у математичному виразі є NaN, він поширюється на весь результат (є лише один виняток: результатом операції NaN ** 0 буде 1).

Математичні операції є безпечними

Обчислення є “безпечним” в JavaScript. Ми можемо робити будь-що: ділити на нуль, звертатися до нечислового рядка як до числа тощо.

Виконання скрипта ніколи не зупиниться з фатальною помилкою (не “вмре”). У найгіршому випадку ми отримаємо в результаті NaN.

Спеціальні числові значення формально належать до типу “number”. Хоча, звісно, вони не є числами у загальноприйнятому розумінні.

BigInt

У JavaScript, тип “number” не може містити числа більші за (2⁵³-1) (це 9007199254740991), або менші за -(2⁵³-1) для від’ємних чисел.

Якщо бути дійсно точним, тип “number” може зберігати більші цілі числа (до 1,7976931348623157 * 10³⁰⁸), але поза межами безпечного діапазону цілих чисел ±(2 ⁵³-1) виникне помилка точності, оскільки не всі цифри вміщуються у фіксованому 64-бітному сховищі. Тому може бути збережено “приблизне” значення.

Наприклад, ці два числа (прямо над безпечним діапазоном) однакові:

console.log(9007199254740991 + 1); // 9007199254740992

console.log(9007199254740991 + 2); // 9007199254740992

Таким чином, усі непарні цілі числа, більші за (2⁵³-1), взагалі не можна зберігати в типі “number”.

Для більшості задач діапазону ±(2⁵³-1) цілком достатньо, але інколи нам потрібен весь діапазон дійсно великих цілих чисел, напр. для криптографії або міток часу з точністю до мікросекунд.

Нещодавно в мову був доданий тип BigInt для представлення цілих чисел довільної довжини.

Значення з типом BigInt створюється через додавання n у кінець цілого числа:

// буква "n" у кінці означає, що це число типу BigInt

const bigInt = 1234567890123456789012345678901234567890n;

Проблеми із сумісністю

Цієї миті, підтримка типу BigInt є в останніх версіях Firefox/Chrome/Edge/Safari, але не в IE.

На сайті MDN є таблиця сумісності, де показано, які версії браузерів підтримують тип BigInt.

Рядок (string)

Рядок у JavaScript має бути оточений лапками.

let str = "Привіт";

let str2 = 'Одинарні лапки також дозволяються';

let phrase = `так можна вставляти ${str}`;

У JavaScript є три типи лапок.

1. Подвійні лапки: "Привіт".
2. Одинарні лапки: 'Привіт'.
3. Зворотні лапки: `Привіт`.

Подвійні та одинарні лапки є “звичайними”. Тобто немає ніякої різниці, які саме використовувати.

Зворотні лапки є розширенням функціональності. Вони дають змогу вбудовувати змінні та вирази в рядок, обрамляючи їх в ${…}, наприклад:

let name = "Іван";

// вбудована змінна

alert(`Привіт, ${name}е!`); // Привіт, Іване!

// вбудований вираз

alert(`результат: ${1 + 2}`); // результат: 3

Вираз всередині ${…} обчислюється, а результат обчислення стає частиною рядка. Ми можемо вбудувати будь-що: змінну name, або арифметичний вираз 1 + 2, або щось набагато складніше.

Будь ласка, зауважте, що вбудовування можна робити тільки зі зворотніми лапками. Інші типи лапок не мають функціональності вбудовування!

alert("результат: ${1 + 2}"); // результат: ${1 + 2} (подвійні лапки не мають ніякого впливу)

Немає типу символ (character).

У деяких мовах є спеціальний тип “character” для позначення єдиного символу. Наприклад, у мовах C та Java це char.

У JavaScript немає такого типу. Є єдиний тип: string. Рядок може містити нуль символів (бути пустим), один символ або більше.

Булевий або логічний тип (boolean)

Логічний тип може приймати лише два значення: true (істина) та false (хиба).

Цей тип зазвичай використовується для зберігання значень так/ні: true означає “так, вірно”, а false означає “ні, не вірно”.

Наприклад:

let nameFieldChecked = true; // так, ім’я було перевірене

let ageFieldChecked = false; // ні, вік не був перевіреним

Логічне значення також можна отримати як результат порівняння:

let isGreater = 4 > 1;

alert(isGreater); // true (результат порівняння — "так")

Значення “null”

Спеціальне значення null не належить до жодного з описаних вище типів.

Воно формує окремий власний тип, який містить лише значення null:

let age = null;

В JavaScript null не є “посиланням на неіснуючий об’єкт” або “покажчиком на null”, як може бути в інших мовах програмування.

Це лише спеціальне значення, яке представляє “нічого”, “порожнє” або “невідоме значення”.

У наведеному вище коді зазначено, що значення змінної age невідоме.

Значення “undefined”

Спеціальне значення undefined також стоїть окремо. Воно представляє власний тип, подібний до “null”.

undefined означає, що “значення не присвоєно”.

Якщо змінна оголошена, але їй не присвоєне якесь значення, тоді значення такої змінної буде undefined:

let age;

alert(age); // покаже "undefined"

Технічно, є можливість явно призначити undefined змінній:

let age = 100;

// змінюємо значення на undefined

age = undefined;

alert(age); // "undefined"

…Але ми не рекомендуємо так робити. Як правило, ми використовуємо null, щоби присвоїти змінній значення “порожнє” або “невідоме”, тоді як undefined зарезервоване для позначення початкового значення для неприсвоєних речей.

Об’єкти (object) та символи (symbol)

Тип object є особливим типом.

Усі інші типи називаються “примітивами”, тому що їхні значення можуть містити тільки один елемент (це може бути рядок, число, або будь-що інше). В об’єктах же зберігаються колекції даних і більш складні структури.

Тип symbol використовується для створення унікальних ідентифікаторів в об’єктах.

Оператор typeof

Оператор typeof повертає тип аргументу. Це корисно, коли ми хочемо обробляти значення різних типів по-різному або просто хочемо зробити швидку перевірку.

Виклик typeof x повертає рядок із назвою типу:

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

Останні три рядки можуть потребувати додаткового пояснення:

1. Math — це вбудований об’єкт, який забезпечує математичні операції. Тут він використаний лише як приклад об’єкта.
2. Результатом typeof null є "object". Це офіційно визнана помилка поведінки typeof, що є ще з ранніх днів JavaScript і зберігається для сумісності. Безперечно, null не є об’єктом. Це особливе значення з власним типом. У цьому разі поведінка typeof некоректна.
3. Результатом typeof alert є "function", тому що alert — це функція. Функції належать до типу “об’єкт”. Але typeof трактує їх по-іншому, повертаючи "function". Це також присутнє з ранніх днів JavaScript. Технічно, така поведінка не зовсім правильна, але може бути зручною на практиці.

Синтаксис typeof(x)

Можливо ви зустрічали інший синтаксис: typeof(x). Це те саме, що typeof x.

Щоби було зрозуміло: typeof – це оператор, а не функція. Тут дужки не є частиною typeof. Це щось на кшталт математичних дужок для групування.

Зазвичай, такі дужки містять математичні вирази, як (2 + 2), але тут вони містять лише один аргумент (x). Ці дужки дають змогу опустити пробіл між оператором typeof та його аргументом, і декому це подобається.

Тому вони надають перевагу синтаксису typeof(x), проте синтаксис typeof x набагато поширеніший.

Підсумки

У JavaScript є 8 основних типів.

Завдання 2.

Лапки у рядках. Який буде результат виконання скрипта?

let name = "Ілля";

alert( `привіт ${1}` ); // ?

alert( `привіт ${"name"}` ); // ?

alert( `привіт ${name}` ); // ?

Зворотні лапки вбудовують вираз, що знаходиться всередині ${...}, у рядок.

let name = "Ілля";

// вираз — число 1

alert( `привіт ${1}` ); // привіт 1

// вираз є рядком "name"

alert( `привіт ${"name"}` ); // привіт name

// вираз є змінною, яка вбудовується

alert( `привіт ${name}` ); // привіт Ілля

 

3. Взаємодія: alert, prompt, confirm

Оскільки основним середовищем для демонстрації можливостей JavaScript буде браузер, давайте розглянемо декілька функцій для взаємодії з користувачем: alert, prompt та confirm.

alert

Ми вже бачили цю функцію. Вона показує повідомлення та чекає, доки користувач не натисне кнопку “ОК”.

Наприклад:

alert("Привіт");

Мінівікно з повідомленням називається модальним вікном. Слово “модальний” означає, що відвідувач не зможе взаємодіяти з іншою частиною сторінки, натискати інші кнопки тощо, доки не завершить операції з вікном. У цьому випадку – поки він не натисне “OK”.

prompt

Функція prompt приймає два аргументи:

result = prompt(title, [default]);

Вона показує модальне вікно з текстовим повідомленням, полем, куди відвідувач може ввести текст, та кнопками ОК/Скасувати.

title

Текст, який буде відображатися для відвідувача.

default

Необов’язковий другий параметр, початкове значення для поля введення тексту.

Квадратні дужки в синтаксисі [...]

В синтаксисі вище, навколо default є квадратні дужки. Вони означають, що цей параметр є необов’язковим.

Відвідувач може щось ввести у поле введення і натиснути ОК. Ми отримаємо введений текст в result. Однак, користувач може скасувати введення, натиснувши “Скасувати” або клавішу Esc. В цьому випадку result буде мати значення null.

Виклик prompt повертає текст із поля введення або null, якщо введення було скасовано.

Наприклад:

let age = prompt('Скільки вам років?', 100);

alert(`Вам ${age} років!`); // Вам 100 років!

confirm

Синтаксис:

result = confirm(question);

Функція confirm показує модальне вікно з питанням question та двома кнопками: ОК та Скасувати.

Результат: true, якщо натиснути кнопку OK, інакше — false.

Наприклад:

let isBoss = confirm("Ви бос?");

alert( isBoss ); // true, якщо натиснута OK

Підсумки

Ми вивчили 3 специфічні для браузера функції для взаємодії з відвідувачами: alert - показує повідомлення, prompt - показує повідомлення з проханням ввести текст. Повертає цей текст або null, якщо натиснута кнопка “Скасувати” або клавіша Esc, confirm показує повідомлення і чекає, коли користувач натисне “OK” або “Скасувати”. Повертає true для ОК та false для “Скасувати”/Esc.

Усі ці методи є модальними: вони призупиняють виконання скриптів та не дають відвідувачам змогу взаємодіяти з рештою сторінки, поки вікно не буде закрите.

Є два обмеження, пов’язані з усіма методами вище:

1. Точне розташування модального вікна визначається браузером. Зазвичай це в центрі.
2. Точний вигляд вікна також залежить від браузера. Ми не можемо його змінити.

Це ціна простоти. Є способи показувати приємніші вікна та збагатити взаємодію з відвідувачем, але якщо “навороти” не мають значення, то ці методи працюють дуже добре.

Завдання 3.

Проста сторінка. Створіть вебсторінку, яка запитує ім’я та виводить його.

JavaScript-код:

let name = prompt("Як вас звати?", "");

alert(name);

Вся сторінка:

<!DOCTYPE html>

<html>

<body>

  <script>

    'use strict';

    let name = prompt("Як вас звати?", "");

    alert(name);

  </script>

</body>

</html>

 

4. Перетворення типу

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

Наприклад, alert автоматично перетворює будь-яке значення в рядок, щоби показати його. Математичні операції перетворюють значення на числа.

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

Перетворення на рядок. Перетворення на рядок відбувається, коли нам потрібне значення у формі рядка. Наприклад, alert(value) робить це, щоби показати значення.

Також ми можемо викликати функцію String(value) для перетворення значення в рядок:

let value = true;

alert(typeof value); // boolean

value = String(value); // тепер value - це рядок "true"

alert(typeof value); // string

Перетворення рядків здебільшого очевидне. false стає "false", null стає "null" тощо.

Перетворення на число. Перетворення на числа відбувається в математичних функціях і виразах автоматично. Наприклад, коли ділення / застосовується до не-чисел:

alert( "6" / "2" ); // 3, рядки перетворюються на числа

Ми можемо використовувати функцію Number(value) для явного перетворення value на число:

let str = "123";

alert(typeof str); // string

let num = Number(str); // стає числом 123

alert(typeof num); // number

Явне перетворення зазвичай потрібно, коли ми читаємо значення з джерела на основі рядка, подібно текстовій формі, але очікуємо, що буде введено число.

Якщо рядок не є дійсним числом, результатом такого перетворення є NaN. Наприклад:

let age = Number("довільний рядок замість числа");

alert(age); // NaN, помилка перетворення

Правила перетворення на числа:

Значення	Результат
undefined	NaN
null	0
true та false	1 та 0
string	Пробільні символи (пробіли, символи табуляції \t, символи нового рядку \n тощо) на початку та з кінця видаляються. Якщо рядок, що залишився в результаті, порожній, то результатом є 0. В іншому випадку число “читається” з рядка. Помилка дає NaN.

Приклади:

alert( Number("   123   ") ); // 123

alert( Number("123z") );      // NaN (помилка читання числа на місці символу "z")

alert( Number(true) );        // 1

alert( Number(false) );       // 0

Зверніть увагу, що null та undefined тут поводяться по-різному: null стає нулем, а undefined стає NaN.

Більшість математичних операторів також виконують такі перетворення. Ми розглянемо їх в наступному розділі.

Перетворення на булевий тип

Булеве перетворення є найпростішим.

Воно відбувається в логічних операціях (пізніше ми познайомимося з умовними перевірками та іншими подібними конструкціями), але також може бути виконане явно за допомогою виклику Boolean(value).

Правила перетворення:

Наприклад:

alert( Boolean(1) ); // true

alert( Boolean(0) ); // false

alert( Boolean("вітаю") ); // true

alert( Boolean("") ); // false

Зверніть увагу: рядок із нулем "0" є true

Деякі мови (а саме PHP) розглядають "0" як false. Але у JavaScript непустий рядок завжди true.

alert( Boolean("0") ); // true

alert( Boolean(" ") ); // пробіли, також true (будь-які непусті рядки є true)

Підсумки

Три найпоширеніші перетворення типів — це перетворення на рядок, на число та на булевий тип.

Перетворення на рядок – Відбувається, коли ми щось виводимо. Може бути виконане за допомогою String(value). Перетворення на рядок звичайно очевидне для примітивних значень.

Перетворення на число – Відбувається в математичних операціях. Може бути виконане з Number(value).

Перетворення дотримується правил:

Значення	Результат
undefined	NaN
null	0
true / false	1 / 0
string	Рядок читається “як є”, пробільні символи (пробіли, символи табуляції \t, символи нового рядку \n тощо) з обох сторін ігноруються. Пустий рядок стає 0. Помилка дає NaN.

Перетворення на булевий тип – Відбувається в логічних операціях. Може виконуватися за допомогою Boolean(value).

Дотримується правил:

Значення	Результат
0, null, undefined, NaN, ""	false
будь-які інші значення	true

Більшість із цих правил легко зрозуміти й запам’ятати. Примітними винятками, де люди зазвичай роблять помилки, є:

 

Питання для самоконтролю

1. 3 якою метою розроблена мова JavaScript?

2. Порівняйте JavaScript та Java.

3. Які особливості роботи скриптових програм?

4. Як підключати сценарії до web-документа?

5. Які об’єкти входять до об’єктної моделі мови JavaScript?

6. Які типи даних характерні для JavaScript?

7. Як оголошуються змінні в JavaScript?

8. Що таке глобальна та локальна область видимості змінних?

9. Як задавати дату в JavaScript?