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

 

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

 

Recent Posts

Чи можлива анонімність, конфіденційність чи приватність в Інтернеті?

Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…

3 дні ago

Як з’явився Pro Plan: шлях від ідеї до світового успіху

Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…

6 днів ago

Стефан Цвейг

Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…

1 тиждень ago

Чи можна знайти доступний хостинг у 2024 році?

Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…

2 тижні ago

Чому обрати освіту за кордоном: переваги для майбутнього вашої дитини

Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…

2 тижні ago

Як вибрати майстра для перетяжки меблів?

Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…

2 тижні ago