Categories: JavaScriptУроки програмування

Уроки JavaScript – Діалогові вікна alert, confirm і prompt

Діалогові вікна дозволяють взаємодіяти з користувачем і працювати з даними, які отримані від цього користувача. Ви, безсумнівно, бачили їх, використовували їх і вони вас завжди дратували, коли вони з’являлися на якомусь сайті. Тепер прийшов час навчитися самому їх створювати. За допомогою діалогових вікон JavaScript ви можете взаємодіяти з відвідувачем вашого сайту досить простим і тривіальним способом. Наприклад, ви можете запитувати ім’я відвідувача, а потім якось його відображати на сайті. Або ви можете зробити діалогове вікно з підтвердженням, яке дасть користувачам можливість вибору (виконувати чи ні вказану дію), наприклад чи входити на сайт з обмеженим доступом. Для цих цілей є три методи (команди) JavaScript, які ми сьогодні і розглянемо.

Діалогові вікна оповіщення, підтвердження і підказки

В JavaScript є три «команди», які створюють діалогові вікна оповіщення (alert), підтвердження (confirm) і підказки (prompt):

window.alert() або просто alert()
window.confirm() або просто confirm()
window.prompt() або просто prompt()

Тепер давайте розглянемо їх детально.

Перша команда – це оповіщення (або попередження):

window.alert()
// або просто alert()

Ця команда відображає діалогове вікно з таким повідомленням, яке ви сюди вставили. Це може бути, наприклад, простий статичний текст:

<body>
 <script type="text/javascript">
  window.alert("Вітаємо вас на нашому сайті!")
 </script>
</body>

У діалоговому вікні буде відображатися те, що ви вкажете в лапках. В наведеному вище прикладі це простий текст. Також це може бути результат виконання якоїсь функції (наприклад, з метою налагодження).

Друга команда – діалогове вікно з підтвердженням:

window.confirm()
// або просто confirm()

Це вікно використовується для підтвердження користувачем виконання певної дії і вибору між двома варіантами. Результат залежить від вибору користувача. Нижче простий приклад коду:

<script type="text/javascript">
 var confDialog = window.confirm("У вас сьогодні гарний настрій?")
 if (confDialog)
  window.alert("Чудово!")
 else
  window.alert("Погано :(")
</script>

Трохи розглянемо код вище. Перш за все, ми оголошуємо змінну (var confDialog), яка буде зберігати результат вікна підтвердження. Змінна confDialog отримає результат, а саме true (істина) або false (хиба). Потім ми використовуємо оператор if, щоб врахувати два шляхи, в залежності від результату. Якщо результат істинний (користувач натиснув «ОК»), буде показано діалогове вікно з оповіщенням «Чудово!». Якщо результат хибний (користувач натиснув «відмінити»), замість цього покажеться попередження «Погано :(».

Третя команда – діалогове вікно з підказкою:

window.prompt()
// або просто prompt()

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

<script type="text/javascript">
 var promptDialog = window.prompt("Вкажіть, будь ласка, своє ім'я")
 window.alert(promptDialog)
</script>

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

Ось і все на сьогодні. Дякуємо за увагу!