alert, prompt и confirm — диалоговые окна в JavaScript
Функция alert() предназначена для вывода в браузере предупреждающего модального диалогового окна с некоторым сообщением и кнопкой «ОК» . При его появлении дальнейшее выполнение кода страницы прекращается до тех пор, пока пользователь не закроет это окно. Кроме этого, оно также блокирует возможность взаимодействия пользователя с остальной частью страницы. Применение этого окна в основном используется для вывода некоторых данных при изучении языка JavaScript, в реальных проектах команда alert() не используется.
// message - текст сообщения alert(message);Метод alert() имеет один аргумент ( message ) — текст сообщения, которое необходимо вывести в модальном диалоговом окне. В качестве результата alert() ничего не возвращает.
Например, выведем при клике в диалоговое окно alert координаты курсора:
// es6 document.addEventListener('click', (e) => { alert(`Координаты: (${e.clientX},${e.clientY})`); }); // es5 document.addEventListener('click', function (e) { alert('Координаты: (' + e.clientX + ',' + e.clientY + ')'); });
Если alert сообщение нужно вывести на нескольких строках, то в этом случае следует воспользоваться «символом перевода строки», который в JavaScript записывается как \n :
// перенос строки в alert alert('Строка 1\nСтрока 2');Метод prompt()
Метод prompt() предназначен для вывода диалогового окна с сообщением, текстовым полем для ввода данных и кнопками «ОК» и «Отмена». Это окно предназначено для запроса данных, которые пользователю нужно ввести в текстовое поле.
// message - текст сообщения (является не обязательным), предназначено для информирования пользователя о том, какие данные у него запрашиваются // default - начальное значение для поля ввода, которое будет по умолчанию в нём отображаться (является не обязательным) const result = prompt(message, default);В переменную result возвращается значение введённое пользователем или null . Если пользователь не ввёл данные (поле ввода пустое) и нажал на «ОК», то в result будет находиться пустая строка.
Например, запросим имя пользователя при входе его на сайт с помощью prompt, а затем выведем его в элемент #welcome :
Метод confirm()
Метод confirm() объекта window применяется для вывода модального диалогового окна с сообщением и кнопками «ОК» и «Отмена». Оно обычно используется для запроса у пользователя разрешения на выполнение того или иного действия.
// question - текст сообщения (вопроса) const result = confirm(question);Например, выведем в элемент #result текст в зависимости то того на какую кнопку нажал пользователь в диалоговом окне confirm:
Итого
В этой статье мы рассмотрели 3 функции браузера: alert , prompt и confirm . Они предназначены для взаимодействия с пользователем. Диалоговые окна создаваемые этими методами являются модальными. Это значит, что они блокируют доступ пользователя к остальной части страницы пока оно не будет закрыто. Кроме этого, они ещё приостанавливают загрузку дальнейшей части страницы. По этим причинам, их имеет смысл использовать в скриптах только при изучении JavaScript, чтобы запросить или вывести некоторую информацию на экран. В настоящих проектах они обычно не используются.
Ещё одно ограничение при использовании этих окон связано с тем, что их расположение и оформление определяется браузером. Как-то изменить или настроить это нельзя.
Примеры
1. Использование методов prompt и alert для создания игры «Угадай число»?
диалоговое окно да /нет
Привет. Есть функция удаления чего то из базы. Она внесена на страницу, хочу сделать так, чтобы при нажатии на ту кнопку появлялось окошко, которое спрашивало уверен ли пользователь в этом действии. кнопки да и нет, должны обрабатываться так, чтобы при нажатии да действительно происходило удаление, а при нет просто попадем на ту же страницу например. Как это реализовать? куда копать, желательно примеры! 🙂 но буду рад любой информации!
диалоговое окно с кнопками «да» и «нет»
Создать веб-страницу,которая вызывает диалоговое окно,содержащее сообщение и 2 кнопки "ДА"и"НЕТ".
Диалоговое окно с кнопками «да» и «нет»
Подскажите как сделать, когда жмешь на картинку, что бы выходило диалоговое окно с кнопкоми да и.
Диалоговое окно
Как вывести диалоговое окно "Да — Нет" в браузере?
Диалоговое окно!
При нажатии на ссылку появляется вопрос удалить объявление да нет! Если да то делаем переход по.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
DOCTYPE html> html> body> p>Click the button to display a confirm box.p> button onclick="myFunction()">Try itbutton> p id="demo">p> script> function myFunction() { if (confirm("Choose Yes or Not")) { alert("You pressed OK!"); //тут удаление записи из базы } else { alert("You pressed Cancel!"); //тут просто остаемся на странице } } script> body> html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
html> body> p>Click the button to display a confirm box./p> button onclick="myFunction()">Try it/button> p id="demo">/p> script> function myFunction() < if (confirm("Choose Yes or Not")) < alert("You pressed OK!"); (); ?> //тут удаление записи из базы > else < alert("You pressed Cancel!"); //тут просто остаемся на странице >> /script> /body> /html>
Vovan-VE, в смысле? если вы тыкаете кого-то мордой в грязь, делайте это поинформативнее, чтобы человек хотя бы понял в какую сторону ему копать.
Сообщение от VladSharikov 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
html> body> p>Click the button to display a confirm box./p> button onclick="myFunction()">Try it/button> p id="demo">/p> script> function myFunction() < if (confirm("Choose Yes or Not")) < alert("You pressed OK!"); (); ?> //тут удаление записи из базы > else < alert("You pressed Cancel!"); //тут просто остаемся на странице >> /script> /body> /html>
от того что Вы кинули это работать не стало и прояснятся тоже не стало. в чем ошибка?
такой код благополучно завершился удалением записи еще при загрузке страницы.
Сообщение от VladSharikov
я это и написал постом выше.
Дак в итоге возвращаемся к первому посту
Сообщение от VladSharikov
Сообщение от VladSharikov
Vovan-VE, перечитал еще раз, в первый раз не заострил на этом внимание т.к. итак это понимаю.
я это и написал постом выше.
Дак в итоге возвращаемся к первому посту
я не говорю, что это должен быть чистый JS, аякс или jquery возможно.
Исходя из вашего вопроса я написал простой javascript через confirm box который обработает ваш запрос. Я подразумевал что вы знаете следующее:
1. Вы знаете как работает браузер.
2. Вы знаете что такое php.
3. Вы знаете что такое база данных.
4. Вы знаете как работает синхронный/асинхронный запрос.
5. Вы знаете как работает javascript.
6. Вы знаете как работает пункт 5 в связке с пунктом 2.
Потому недостаточно информировал Вас. Я могу помочь только при наличии большего количества данных. А именно: конкретизации проблемы(ибо первый пост говорит только о том что нужен пункт5).
P.S критика граждан постами выше вполне уместная,ибо Вы действительно недостаточно охарактеризовали проблему.
Системные диалоговые окна JavaScript
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Станьте веб-разработчиком с нуля
В этом уроке мы разберемся, как выводить диалоговые окна, позволяющие выводить короткие сообщения. Если вы пишете программу на JavaScript, то можете воспользоваться тремя стандартными методами для ввода и вывода данных: alert(), prompt() и confirm(). Каждое из этих диалоговых окон является синхронным и модальным, то есть выполнение кода приостанавливается на время показа такого окна и возобновляется после его закрытия.
Метод alert()
Метод alert() позволяет выводить диалоговое окно с заданным сообщением и кнопкой OK . Синтаксис соответствующего выражения имеет следующий вид:
Диалоговые окна оповещений обычно применяют, если нужно уведомить пользователя о чем-то, что он не контролирует, например об ошибке. В простейшем случае текст предупреждения, заключенный в двойные или одинарные кавычки, вводится внутри круглых скобок. Диалоговое окно, выведенное на экран методом alert() , можно убрать, щелкнув на кнопке OK . До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Методу alert() передается только одна строка — отображаемая. Чтобы отобразить многострочное сообщение, разделяйте строки символом \n :
Окно предупреждения генерируется самим браузером, поэтому внешний вид окна в различных браузерах может несколько различаться.
Примечание: Окна, обладающие свойством останавливать все последующие действия пользователя и программ, называются модальными.
На заметку: JavaScript-программисты часто вставляют вызов метода alert() в программный код с целью диагностики возникающих проблем.
Метод confirm()
Метод confirm() позволяет вывести диалоговое окно с сообщением и двумя кнопками — OK и Cancel (Отмена), благодаря чему пользователь может подтвердить или отменить некоторое действие. В отличие от метода alert() этот метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Чтобы можно было определить, какую кнопку выбрал пользователь, метод confirm() возвращает true, если был щелчок на кнопке OK , и false, если он щелкнул на кнопке Cancel (Отмена) или закрыл диалоговое окно щелчком на системной кнопке закрытия окна — X .
Синтаксис применения метода confirm() имеет следующий вид:
var result = confirm('сообщение');result — это логическое значение (true или false), указывающее, было ли выбрано OK или Cancel (Отмена).
В следующем примере метод confirm() выводит сообщение и ожидает, пока пользователь подтвердит или отменит некоторую операцию, щелкнув на одной из кнопок. Типичный код вызова этого диалогового окна выглядит так:
В этом примере оператор if («если») получает условие (confirm(«Вы уверены?»)). Он вычисляет его, и если результат – true (пользователь щелкает на кнопке OK ), то выполняет команду и выводит сообщение: «Я очень рад, что Вы уверены!».
Блок else («иначе») выполняется если пользователь выбирает кнопку Cancel . При этом выводится оповещение: «Жаль, что Вы не уверены. «.
Этот шаблонный код часто используется, когда пользователь пытается что-либо удалить либо пкинуть веб-страницу.
Метод prompt()
Метод prompt() выводит на экран диалоговое окно, которое запрашивает у пользователя информацию. Вместе с кнопками OK и Cancel (Отмена) оно содержит текстовое поле для ввода данных. В отличие отметодов alert() и confirm() данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию.
Синтаксис применения метода prompt имеет следующий вид:
var result = prompt (сообщение, значение по умолчанию);- result — строка, содержащая текст, введенный пользователем, или значение null .
- сообщение — строка текста для отображения пользователю (обычно это вопрос). Этот параметр является необязательным и может быть опущен, если в окне подсказки ничего не отображается.
- значение по умолчанию — строка, которая отображается по умолчанию в поле ввода, обычно второй аргумент оставляют пустым и записывают так — «».
Если пользователь щелкает на кнопке OK , метод prompt() возвращает значение, введенное в текстовом поле, а если выбирается кнопка Cancel (Отмена) или окно закрывается иным образом, то возвращается null . Вот пример: