Запрос на подтверждение и ввод в JavaScript. JavaScript - Методы alert, prompt и confirm Безвкусный confirm html
В JavaScript существует три базовых операции, которые позволяют получать данные от пользователя, для дальнейшей их обработки в скриптах. Это alert, prompt и confirm. Для чего они применяются, как их использовать и прочие нюансы и будут рассмотрены далее в этой статье.
alertПрименяется для вывода на экран браузера модального окна (это означает, что пользователь ничего не может нажать на странице, пока не закроет это окно. В рассматриваемом примере, до тех пор, пока не кликнет «ОК» в окне).
После вывода сообщения, содержащегося в alert, выполнение скрипта приостанавливается и возобновляется после закрытия модального окна.
В случае заполнения поля и нажатия ОК, в скрипт вернется информация, которую ввел пользователь.
Синтаксис данной команды несколько сложнее, чем предыдущей, поскольку позволяет задать текст обращения к пользователю и содежимое поля для ввода информации, которое будет выводиться по умолчанию: result = prompt(title, default ) ; , где
- title – сообщение, которое будет выведено пользователю в модальном окне. Аргумент обязательный для заполнения.
- default
– то, что выведется в поле для ввода текста по умолчанию. Также обязателен для заполнения, поскольку если его не задать, то это может привести к ошибкам в некоторых браузерах. Если же вы хотите оставить поле ввода информации пустым, то просто задайте prompt следующим образом:
var myTest = prompt("Любое инфо" , """);
Маленький пример использования prompt:
var year = prompt("В каком году вы закончили ВУЗ?" , 2008 ) ; alert("Вы выпускник " + year + " года!" ) ;
Обычно данная команда используется для сбора данных у пользователей, которые необходимы скрипту для продолжения дальнейшей работы.
confirmТакже представляет собой модальное окно. Как не сложно догадаться из названия используется обычно для согласования чего-либо с пользователем.
Для того и заточена – для взаимодействия предоставляет пользователю кнопки OK и CANCEL, которые возвращают скрипту булевы значения true и false соответственно.Оценок: 4 (средняя 4 из 5 )
И снова я приветствую Вас в очередной теме посвященной языку JavaScript
, в которой мы разберем методы alert, prompt,
confrim
. Данные методы являются встроенными в язык Javascript
и помогают нам взаимодействовать с пользователем.
Alert
выводит на экран браузера окно с определенной информацией, которое приостанавливает скрипт до момента нажатия пользователем кнопки ОК.
Prompt
, как правило, выводит окно, в котором пользователю задают вопрос, на который он должен ответить в определенном текстовом поле, после чего нажать
клавишу ОК. Также пользователь может ничего не вводить, нажав клавишу отмена.
Confirm
также выводит окно, в котором пользователь уже не может вводить что-либо в текстовое поле, а может лишь нажать кнопку
ОК или отмена.
А теперь после небольшого вступления перейдем к рассмотрению всего вышесказанного на практике.
alert, prompt, confirm
alert("Привет, дорогой пользователь!"
);
var
nameUser
= prompt("Ваше имя?"
, "name"
);
var
userAnswer
= confirm("Вы действительно хотите покинуть сайт?"
);
В результате при обновлении страницы браузера у нас появится окно с приветствием пользователя. После нажатия кнопки ОК,
появится следующее окно, где будут спрашивать ваше имя. В данном методе есть два параметра, первый является обязательным и
отвечает за заголовок, который будет выводиться, в нашем случае это вопрос имени пользователя. И второй параметр отвечает за значение,
которое будет выводиться по умолчанию в текстовом поле. Если Вы введете ваше имя и нажмете кнопку ОК, то ваше имя поместиться в переменную
nameUser
. Если вы нажмете кнопку отмена, то в переменную будет записан null
.
И напоследок окно, которое спрашивает у пользователя, хочет он покинуть наш сайт или нет. В случае согласия в переменную будет помещено булево
значение true
, и при отказе false
соответственно. Вот и все, что следует знать о данных методах, до встречи в следующих уроках!
На этом уроке мы познакомимся с методами объекта window: alert() , prompt() и confirm() .
Метод alert()Метод alert() предназначен для вывода на экран пользователя предупреждающего диалогового окна с указанным сообщением и кнопкой "ОК". Оно может использоваться для того чтобы донести до пользователя важную информацию.
window.alert(Параметр_1);
Метод alert() имеет один обязательный параметр - это текст сообщения, которое отображается в диалоговом окне. Данный метод в результате своего выполнения ни чего не возвращает.
Например, выведем для посетителя сайта при нажатии на ссылку предупреждающее диалоговое окно: Перейти на сайт
Метод confirm() Метод confirm() объекта window предназначен для вывода на экран пользователя диалогового окна с указанным сообщением и кнопками "ОК" и "Отмена". Окно с подтверждением можно использовать, чтобы запросить у пользователя разрешение на выполнение того или иного действия.var resultConfirm = confirm(Параметр_1);
Данный метод имеет один параметр - это текст сообщения, которое будет выведено в диалоговое окно.
Метод confirm() в качестве результата (resultConfirm) своего выполнения возвращает одно из двух значений:
- true , если пользователь нажал "ОК";
- false , если пользователь нажал "Отмена" или закрыл его.
Например, выведем в элемент р с id="resultConfirm" результат нажатия пользователем на кнопку "ОК" в диалоговом окне:
var resultActionUser = confirm("Пользователь, пожалуйста нажми на кнопку ОК."); if (resultActionUser) { document.getElementById("resultConfirm").innerHTML = "Пользователь, спасибо что Вы нажали на кнопку ОК"; } else { document.getElementById("resultConfirm").innerHTML = "Пользователь, мы разочаровались в Вашем ответе"; }
Метод prompt()Метод prompt() предназначен для вывода на экран пользователя диалогового окна с сообщением, текстовым полем для ввода данных и кнопками "ОК" и "Отмена". Оно предназначено для того, чтобы запросить данные у пользователя.
var resultPrompt = prompt(Параметр_1, Параметр_2);
Данный метод имеет два параметра:
- сообщение, которое будет выведено в диалоговом окне. Данный параметр является обязательным и содержит сообщение, в котором "говорится", какие данные должен ввести пользователь в текстовое поле;
- второй параметр является необязательным и может использоваться для указания начального значения, которое будет выведено в поле ввода диалогового окна при открытии.
В зависимости от действий пользователя метод prompt() может возвращать следующие данные:
- текстовое значение - если в поле ввода содержатся данные и пользователь нажал "ОК";
- пустая строка - если в поле ввода не содержатся данные и пользователь нажал "ОК";
- null - если пользователь нажал "Отмена" или закрыл это окно, при этом не важно какие данные были введены в текстовое поле.
Примечание: диалоговое окно, которое появляется в результате выполнения одного из методов alert() , confirm() или prompt() является модальным, т.е. оно блокирует доступ пользователя к родительскому приложению (браузеру) до тех пор, пока пользователь не закроет это диалоговое окно.
Например, запросим у пользователя имя и выведем в зависимости от результата текст в элемент c id="nameUser" :
var nameUser = prompt ("Введите своё имя?"); if (nameUser) { document.getElementById("nameUser").innerHTML = nameUser +", добро пожаловать на сайт!"; } else { document.getElementById("nameUser").innerHTML = "Гость, добро пожаловать на сайт!"; }
Например, попросим пользователя угадать число 8:
function guessNumber() { var findNumber = prompt ("Угадай число от 1 до 10?"); switch (findNumber) { case "6": alert("Уже теплее!"); break; case "7": alert("Горячо!"); break; case "8": alert("Ты угадал! Это число 8."); break; case "9": alert("Уже теплее!"); break; default: alert("Холодно!"); break; } } ... Угадай число
Я рассказал про «шаблонные» модальные окна. Т.е. такие, для которых создаются отдельные файлы-шаблоны. И сложность и навороченность этих окон может быть безграничной.
Но нередко для общения с пользователем нужны совсем простые диалоговые окна – просто вывести какое-то сообщение с единственной кнопкой «Ок», которое он не сможет не заметить, или запросить у него подтверждение какого-либо действия.
Часто на сайтах для таких целей используют Системные функции
Есть в движке несколько групп так называемых «системных» функций. Файлы, содержащие эти функции, загружаются в самом начале работы движка, еще до загрузки файлов конфигурации, и сами функции не привязаны к какому-либо модулю и могут использоваться в любом месте, в любом компоненте – в модулях, экшенах, мапперах и пр." class="term">системные функции alert()
, confirm()
и prompt()
. Примерно вот так:
Удалить все!
Это работает в любом браузере, но окна, которые выводятся такими функциями, выглядят некрасиво, примитивно и ломают всю красоту, которую мы наводим на своем сайте.
Чтоб решить эту проблему в движке сейчас можно (я бы сказал – нужно) использовать аналоги:
ls.modal.alert(options)
- вывод информационного окна с одной кнопкой «Ок»
ls.modal.confirm(options)
- вывод окна с кнопками «Отмена» и «Подтвердить»
ls.modal.prompt(options)
- окно с полем ввода
Во всех функциях параметр options
может быть либо строкой, либо объектом. Например:
ls.modal.alert(‘Hello, world!’);
Этот код выведен модальное окно с текстом «Hello, world!»
и кнопкой «Ok»
. И самое главное – это окно будет оформлено точно так же, как все другие модальные окна вашего сайта.
Мы можем также повесть обработчик на нажатие кнопки:
ls.modal.alert({title: "I say", text: "Hello, world!", onConfirm: function(){
// юзер кликнул по кнопке Ok
}});
Здесь добавляется заголовок окна "I say" и по нажатию кнопки будет выполнена функция, которая передана в параметре onConfirm
.
Но это еще не все! Мы можем в теле окна вывести любой HTML-код:
var htmlCode = " Вот ваш новый аватар";
ls.modal.alert({title: "Аватар", html: htmlCode});
И получим примерно такое вот окошко:
Обратите внимание, что для отображения HTML-кода используется параметр html , а не text (если передать оба параметра, то будет использован text , а html будет проигнорирован).
Аналогично используются функции ls.modal.confirm()
и ls.modal.prompt()
. Но в этих функциях возможны дополнительные параметры. Например в параметрах функции ls.modal.confirm()
мы можем передать, не один, а два обработчика - по обработчику на каждую кнопку:
ls.modal.confirm({title: "Удаление", text: "Удалить все подряд?",
onConfirm: function(){
// юзер кликнул по кнопке «Подтвердить»
},
onCancel: function(){
// юзер кликнул по кнопке «Отмена»
}
});
Функция ls.modal.prompt()
используется, чтобы запросить у пользователя какое-нибудь значение. И мы можем задать это значение по умолчанию:
ls.modal. prompt ({title: "Ввод числа", text: "Введите сюда число", value: 123
onConfirm: function(value){
// Введенное значение в переменной
Общая схема имени переменной выглядит следующим образом: префикс+ДополнительныйПрефикс+ИмяПеременной+Суффикс. Имена переменных содержат латинские буквы верхнего и нижнего регистров и начинаются с префикса, записаного в нижнем регистре, обозначающего тип данных значения этой переменной. Перечень префиксов, рекомендованых к использованию указан ниже. Дополнительный префикс конкретизирует значение переменной и выбирается из перечня указанных ниже рекоммендуемых дополнительных префиксов. Имя переменной состоит из одного или нескольких слов, описывающих смысловое значение этой переменной, и записывается горбатым регистром. Так как префиксы описывают тип значения переменной, ее имя описывает экземпляр данного типа в единственном числе. Суффикс дополняет имя переменной и конкретизирует ее смысловое значение. Перечень суффиксов, рекоммендованых к использованию указан ниже. Цифры в имени допускаются, но не рекомендуются. Знак нижнего подчеркивания в имени не используется.
Префиксы
Рекомендован к использованию следующий перечень префиксов:
- a (array) - массив значение;
- b (bool) - логическое значение;
- e (entity) - объект типа Entity и наследуемые от него;
- i (integer) - целочисленное значение;
- f (float) - значение вещественного типа;
- m (mapper) - объект типа Mapper и наследуемые от него;
- n (number) - значение неопределеного цифрового типа, которое может принимать как целое, так и
вещественное значение. Требует проверки на значение типа при использовании.
- o (object) - объект, типа отличного от Mapper и Entity;
- s (string) - строковое значение;
- x (miXed) - объект смешанного типа. Требует проверки на значение типа при использовании.
Рекомендован к использованию следующий перечень дополнительных префиксов:
- Min (minimum) - минимальное значение;
- Max (maximum) - максимальное значение;
- Current - текущее значение.
Суффиксы
В отличие от Дополнительных префиксов суффиксы конкретизируют семантическое значение имени переменной, а не ее
значение. Рекомендован к использованию следующий перечень суффиксов:
- First - первое значение из доступного списка;
- Last - последнее значение из доступного списка;
- Limit - предельное значение из доступного списка;
- Tmp - временное значение;
- New - новое (устанавливаемое) значение;
- Old - старое (затираемое) значение;
Исключения
Существуют имена переменных, предназначенных для специального использования - исключения из указанных
рекоммендаций:
- i, j - итераторы для небольших циклов (цикл считается небольшим, если помещается полностью на
один экран и позволяет увидеть сразу все вхождения итераторов);
- k, v - переменные цикла foreach ($aData as $k => $v);
- key, value - переменные цикла foreach ($aData as $key => $value);
- s - cериализованное представление данных;
- data - переменная с данными в сеттере сущности, а также данные возвращаемые из методов маппера;
- sql - в мапперах переменная, содержащая текст запроса – префикс «s» не используется." class="term">переменной «value»
}
});
Здесь в обработчик передается введенное пользователем значение и мы можем использовать его для того, чтоб определиться, что ж с ним дальше делать.
В заключении этой части хочу обратит внимание на одну особенность, о которой не надо забывать: есть важное отличие в поведении системных функций alert()
, confirm()
и prompt()
и их аналогах, о которых идет речь - ls.modal.alert(options)
, ls.modal.confirm(options)
и ls.modal.prompt(options)
. А именно - Системные функции
Есть в движке несколько групп так называемых «системных» функций. Файлы, содержащие эти функции, загружаются в самом начале работы движка, еще до загрузки файлов конфигурации, и сами функции не привязаны к какому-либо модулю и могут использоваться в любом месте, в любом компоненте – в модулях, экшенах, мапперах и пр." class="term">системные функции останавливают выполнение кода javascript и ждут реакции пользователя. И только после того, как пользователь среагировал, выполнение кода продолжается. Когда же вы используете описанные здесь функции, то сначала выполняется полностью весь код, где идет сам вызов, и только потом выводится диалоговое окно.
Поэтому если взять код, приведенной в начале статьи и просто заменить вызов confirm()
на ls.modal.confirm()
и код придется переписать примерно так:
Удалить все!
$(function(){
$("js-delete-all").click(ls.modal.confirm("Вы уверены?", function(){
location.href="site.com/delete/all/";
}););
});
Обратите внимание - функция обработчик передается не в параметре onConfirm, а вторым аргументом функции, это тоже допустимо.
Да, кода получается немного больше. Но зато красиво! А красота, как известно, требует жертв.
Давайте взглянем на два способа ввода. Возможно, ни один из них широко не используется, но они могут быть просто использованы для знакомства с основами.
Prompt. ЗапросПервый из них называется prompt . Он показывает всплывающее окно с текстом, который мы передаем первым параметром, и полем ввода, которое пользователь может заполнить. Когда пользователь нажмет OK , функция prompt() вернет введенное значение. Далее в этом примере мы используем метод document.write , чтобы заменить содержимое html-страницы нашим текстом.
examples/js/prompt.html
var name = prompt("Your name:", ""); document.write("Hello ", name); Try!
Текстовое поле будет предварительно заполнено значением второго параметра. Это может быть очень полезно, если бы мы хотели, чтобы пользователь отредактировал какое-нибудь значение. Можно заполнить поле старым значением.
examples/js/edit.html
var name = prompt("Please correct your e-mail address:", "[email protected]"); document.write("Your e-mail address is ", name); Try!
В другом случае, если пользователь нажмет cancel или клавишу ESC , функция prompt() вернет null .
Confirm. ПодтверждениеЭто всплывающее окно на самом деле не метод ввода. Оно позволяет разработчику задать вопрос и получить ответ - Да/Нет. Вызов функции confirm() приведет к появлению всплывающего окна с заданным текстом и двумя кнопками. Если пользователь нажмет OK , функция confirm() вернет true , если нажмет cancel или клавишу ESC , тогда функция вернет false .
Конечно, для понимания смысла, вы должны знать, что обозначают true и false , и что делает эта конструкция if - else . Если у вас уже есть какой-то опыт программирования, тогда, вероятно, вы уже поняли код, но даже если и нет, то сможете разобраться.
Этот код может быть описан следующим предложением:
Если "подтверждение" вернуло true, тогда напечатать "Hello World", иначе напечатать "OK, I won"t print it."
Или лучше вот так:
Если пользователь нажал "ОК", когда мы спросили "Shall I print Hello World?", тогда напечатать "Hello World", иначе напечатать "OK, I won"t print it."
examples/js/confirm.html
if (confirm("Shall I print Hello World?")) { document.write("Hello World"); } else { document.write("OK, I won"t print it."); }