Діалогові вікна дозволяють взаємодіяти з користувачем і працювати з даними, які отримані від цього користувача. Ви, безсумнівно, бачили їх, використовували їх і вони вас завжди дратували, коли вони з’являлися на якомусь сайті. Тепер прийшов час навчитися самому їх створювати. За допомогою діалогових вікон 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.
Ось і все на сьогодні. Дякуємо за увагу!
Зміст статті Вступ: чому ціни вирішують все Що означає порівняння цін із конкурентами 5 причин,…
Останніми роками інтерес до саун у Києві помітно зріс. Це пов'язано не лише з модою…
У сучасному ритмі мегаполісу відпочинок став невід'ємною частиною турботи про здоров'я та емоційний стан. Особливо…
У сучасному світі цифрового маркетингу Facebook (Meta) залишається однією з найпотужніших платформ для просування бізнесу.…
Цей прилад став незамінним елементом арсеналу представників безлічі професій, але особливо актуальним серед військових. Тепловізор…
Постійний потік новин, робочих завдань і особистих турбот часто призводить до того, що в голові…