Уроки 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.

 

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