Уроки 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.
Ось і все на сьогодні. Дякуємо за увагу!
This post was last modified on 09/02/2019 16:43
Останні пости
Генрі Форд
Людина має два мотиви поведінки — один справжній та інший, що гарно звучить Генрі Форд…
Фрідріх Ніцше
Не треба додумувати надто багато. Так ви створюєте проблеми, яких не існувало Фрідріх Ніцше
Такий різний інвертор! Вибираємо між кондиціонерами Inverter, Inverter DC та Full DC
Літо в розпалі, а значить якраз час задуматися про покупку кондиціонера. Але як не загубитися…
Корисні поради щодо вибору розсувних дверей
Варто знати, що функціональність і дизайн працюють рука об руку, коли ви використовуєте розсувні двері.…