Діалогові вікна дозволяють взаємодіяти з користувачем і працювати з даними, які отримані від цього користувача. Ви, безсумнівно, бачили їх, використовували їх і вони вас завжди дратували, коли вони з’являлися на якомусь сайті. Тепер прийшов час навчитися самому їх створювати. За допомогою діалогових вікон 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.
Ось і все на сьогодні. Дякуємо за увагу!
20 травня 2026 року офіційно відбувся реліз довгоочікуваної мажорної версії WordPress 7.0 «Armstrong», названої на…
Кожен власник сайту та SEO-спеціаліст веде щоденну запеклу боротьбу за утримання користувача на сторінках вебресурсу.…
Футбольна секція швидко показує, наскільки взуття підходить дитині. Якщо пара ковзає, тисне або погано чіпляється…
Компанія Samsung - один із лідерів на ринку електроніки. Її смартфони вирізняються надійністю, якісними дисплеями,…
Іспанська мова приваблює мільйони людей своєю мелодійністю, емоційністю та відносною простотою вивчення. Одним із найважливіших…
Робочий простір давно перестав бути просто столом із ПК/ноутбуком. Сьогодні це повноцінна екосистема, де кожна…