Оскільки основним середовищем для демонстрації можливостей 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 років!defaultДругий параметр є необов’язковим, але якщо ми не надамо його, Internet Explorer вставить у поле текст "undefined".
Запустіть цей код в Internet Explorer, щоб переконатися:
let test = prompt("Test");Отже, щоб модальні вікна prompt мали добрий вигляд в IE, ми рекомендуємо завжди надавати другий аргумент:
let test = prompt("Test", ''); // <-- для IEconfirm
Синтаксис:
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.
Усі ці методи є модальними: вони призупиняють виконання скриптів та не дають відвідувачам змогу взаємодіяти з рештою сторінки, поки вікно не буде закрите.
Є два обмеження, пов’язані з усіма методами вище:
- Точне розташування модального вікна визначається браузером. Зазвичай це в центрі.
- Точний вигляд вікна також залежить від браузера. Ми не можемо його змінити.
Це ціна простоти. Є способи показувати приємніші вікна та збагатити взаємодію з відвідувачем, але якщо “навороти” не мають значення, то ці методи працюють дуже добре.