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

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

alert

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

Наприклад:

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

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

prompt

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

result = prompt(title, [default]);

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

title

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

default

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

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

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

Наприклад:

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

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

let test = prompt("Test");

let test = prompt("Test", ''); // <-- для IE

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. Точний вигляд вікна також залежить від браузера. Ми не можемо його змінити.

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