21 вересня 2023 р.

Взаємодія: 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 років!
В IE: завжди вказуйте початкове значення default

Другий параметр є необов’язковим, але якщо ми не надамо його, Internet Explorer вставить у поле текст "undefined".

Запустіть цей код в Internet Explorer, щоб переконатися:

let test = prompt("Test");

Отже, щоб модальні вікна prompt мали добрий вигляд в IE, ми рекомендуємо завжди надавати другий аргумент:

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

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

Завдання

важливість: 4

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

Запустити демонстрацію

JavaScript-код:

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

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

<!DOCTYPE html>
<html>
<body>

  <script>
    'use strict';

    let name = prompt("Як вас звати?", "");
    alert(name);
  </script>

</body>
</html>
Навчальна карта