Уроки 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.
Ось і все на сьогодні. Дякуємо за увагу!
Останні пости
Як вибрати ідеальний ноутбук: Повний гайд
Вибір ноутбука може бути складним завданням у світі, де ринок переповнений варіантами на будь-який смак… Читати далі
Томас Едісон
Наш великий недолік в тому, що ми занадто швидко опускаємо руки. Найбільш діючий метод досягти… Читати далі
Найкрасивіші та найбільш вражаючі мости з усього світу (ТОП-10)
Міст — це щось більше, ніж просто споруда, яка поєднує два береги. Для того, щоб… Читати далі
Соломон
Життя нас вчить, що свою пару ми пізнаємо, коли розлучаємося, своїх братів ми пізнаємо, коли… Читати далі
Річард Бах
Жодне бажання не дається тобі окремо від сили, що дозволяє його здійснити. Хоча, можливо, для… Читати далі