Методы alert, prompt, confirm в JavaScript. Заменяем диалоговое окно с подтверждением посредством jQuery

Я рассказал про «шаблонные» модальные окна. Т.е. такие, для которых создаются отдельные файлы-шаблоны. И сложность и навороченность этих окон может быть безграничной.

Но нередко для общения с пользователем нужны совсем простые диалоговые окна – просто вывести какое-то сообщение с единственной кнопкой «Ок», которое он не сможет не заметить, или запросить у него подтверждение какого-либо действия.

Часто на сайтах для таких целей используют Системные функции
Есть в движке несколько групп так называемых «системных» функций. Файлы, содержащие эти функции, загружаются в самом начале работы движка, еще до загрузки файлов конфигурации, и сами функции не привязаны к какому-либо модулю и могут использоваться в любом месте, в любом компоненте – в модулях, экшенах, мапперах и пр." 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, а вторым аргументом функции, это тоже допустимо.

Да, кода получается немного больше. Но зато красиво! А красота, как известно, требует жертв.

HTML, XHTML и CSS на 100% Квинт Игорь Метод confirm()

Метод confirm()

Метод confirm() отображает окно подтверждения, которое сходно с окном предупреждения, генерируемым методом alert(), но содержит две кнопки: OK и Cancel. В листинге 11.3 демонстрируется создание окна подтверждения, но в этом сценарии не делается разницы между кнопками OK и Cancel. Нажатие любой из кнопок просто закроет окно (рис. 11.5).

Рис. 11.5. Работа с подтверждением

Листинг 11.3. Работа с подтверждением

Работа с подтверждением

confirm("Это мое подтверждение");

После прочтения данной главы вы научитесь использовать этот метод, чтобы сценарий по-разному реагировал на нажатие кнопок OK и Cancel.

Из книги Windows Script Host для Windows 2000/XP автора Попов Андрей Владимирович

Метод Run Параметр intWindowStyle устанавливает вид окна для запускаемого приложения (табл. 1.13).Таблица 1.13. Типы окна (intWindowStyle) Параметр Константа Visual Basic Описание 0 vbHide Прячет текущее окно и активизирует другое окно (показывает его и передает ему фокус) 1 vbNormalFocus Активизирует и

Из книги Программирование на языке Ruby [Идеология языка, теория и практика применения] автора Фултон Хэл

Метод Delete Если параметр force равен false или не указан, то с помощью метода Delete будет нельзя удалить каталог с атрибутом "только для чтения" (read-only). Установка для force значения true позволит сразу удалять такие каталоги.При использовании метода Delete неважно, является ли заданный

Из книги Программирование КПК и смартфонов на.NET Compact Framework автора Климов Александр П.

Метод Move Обязательный параметр destination определяет каталог, в который будет производиться перемещение; групповые символы в имени каталога недопустимы. Замечание Вместо метода Move можно использовать метод MoveFolder объекта

Из книги Linux и UNIX: программирование в shell. Руководство разработчика. автора Тейнсли Дэвид

Метод Copy Обязательный параметр destination определяет файл, в который будет производиться копирование; групповые символы в имени файла недопустимы.Параметр overwrite является логической переменной, определяющей, следует ли заменять уже существующий файл с именем destination (overwrite=true)

Из книги Описание языка PascalABC.NET автора Коллектив РуБоард

Метод Delete Если параметр force равен false или не указан, то с помощью метода Delete будет нельзя удалить файл с атрибутом "только для чтения" (read-only). Установка для force значения true позволит сразу удалять такие файлы. Замечание Вместо метода Delete можно использовать метод DeleteFile

Из книги автора

8.3.1. Метод inject Метод inject пришел в Ruby из языка Smalltalk (впервые он появился в версии Ruby 1.8). Его поведение интересно, хотя с первого раза понять его нелегко.Он отражает тот факт, что мы часто хотим обойти список и по ходу «аккумулировать» некоторый результат. Конечно, самый

Из книги автора

8.3.3. Метод partition Как говорится, «в мире есть два сорта людей: те, что делят людей по сортам, и те, что не делят». Метод partition относится не к людям (хотя мы можем представить их в Ruby как объекты), но тоже делит набор на две части.Если при вызове partition задан блок, то он вычисляется

Из книги автора

11.1.10. Метод initialize_copy При копировании объекта методом dup или clone конструктор не вызывается. Копируется вся информация о состоянии.Но что делать, если вам такое поведение не нужно? Рассмотрим пример:class Document attr_accessor:title, :text attr_reader:timestamp def initialize(title, text) @title, @text = title, text @timestamp =

Из книги автора

11.1.11. Метод allocate Редко, но бывает, что нужно создать объект, не вызывая его конструктор (в обход метода initialize). Например, может статься, что состояние объекта полностью определяется методами доступа к нему; тогда не нужно вызывать метод new (который вызовет initialize), разве что вы

Из книги автора

11.3.2. Метод const_get Метод const_get получает значение константы с заданным именем из модуля или класса, которому она принадлежит.str = "PI"Math.const_get(str) # Значение равно Math::PI.Это способ избежать обращения к методу eval, которое иногда считается неэлегантным. Такой подход дешевле с точки

Из книги автора

11.3.5. Метод define_method Помимо ключевого слова def, единственный нормальный способ добавить метод в класс или объект - воспользоваться методом define_method, причем он позволяет сделать это во время выполнения.Конечно, в Ruby практически все происходит во время выполнения. Если

Из книги автора

11.3.6. Метод const_missing Метод const_missing аналогичен методу method_missing. При попытке обратиться к неизвестной константе вызывается этот метод - если он, конечно, определен. В качестве параметра ему передается символ, ссылающийся на константу.Чтобы перехватывать обращения к

Из книги автора

Метод Lockbits В.NET Compact Framework 2.0 появилась ограниченная поддержка метода LockBits, при помощи которого можно манипулировать массивом пикселов изображения. Перечисление ImageLockMode в данном методе позволяет использовать значения ReadWrite, ReadOnly и WriteOnly. А перечисление PixelFormat поддерживает

Из книги автора Из книги автора

Метод Zip Описание методовМетоды приведены для последовательности sequence of T. function Zip(second: sequence of TSecond; resultSelector: (T,TSecond)->Res): sequence of Res; Объединяет две последовательности, используя указанную функцию, принимающую по одному элементу каждой последовательности и

Из книги автора

Метод Contains Описание методовМетоды приведены для последовательности sequence of T. function Contains(value: T): boolean; Определяет, содержится ли указанный элемент в последовательности, используя компаратор проверки на равенство по умолчанию. function Contains(value: T; comparer: IEqualityComparer): boolean;

В этой статье мы изучим три интересных метода, а именно методы alert(), confirm() и prompt() . Они все предназначены для взаимодействия с пользователем .

Все эти три метода принадлежат объекту window(Окно браузера). И они могут вызываться таким образом: window.название_метода(); Но, JavaScript нам позволяет этот объект window не указать, а писать просто название метода.

Начнём мы с метода alert(). Данный метод, выводит указанное сообщение в окошко браузера пользователя. Это окошко отобразится поверх всей страницы, и пока пользователь не нажмёт на кнопку OK, оно не закроется.

Для демонстрации выведем какое-то сообщение с помощью метода alert()

Var today_is = "Понедельник"; alert("Сегодня " + today_is);

Внутри метода мы можем указать любую строку, только без html тегов. Они здесь не обрабатываются, а выводятся как есть.

Если строка, которую хотим указать очень длинная, и мы хотим сделать переход на новую строку, то здесь html тег
не сработает. Здесь нужно использовать символ "\n".

Alert("Looooooooong \nStringggggggg");

Данный метод используется часто для поиска ошибки в коде .

Процесс обработки кода идёт сверху вниз, поэтому для ловли ошибки, просто пишем метод alert() в предполагаемую область, где находится ошибка. И если alert() сработал, значит до строчки, где он написан, ошибок нет.

Дальше, нужно его перенести на одну строку или больше ниже. Сохраняем изменения, опять обновляем страницу в браузере, и смотрим, если alert() сработал, значит, ошибок до строчки, где он находится, нет, в противном случае, если он не сработал, ошибка находится в строку выше той, где он сейчас находится . Таким вот образом можно найти ошибку в коде.

метод confirm()

Этот метод используется для подтверждения ответа, на какой-то вопрос. Есть только два варианта ответа, да(OK) или нет(Cancel/Отмена). Если пользователь отвечает да, то метод возвращает истину(true), иначе он возвращает лож(false).

Для примера, выведем окошко с помощью метода confirm(), где спросим пользователя "Вы точно хотите покинуть страницу?". Если пользователь ответит да, то через метод alert() выведем такое сообщение "Пользователь хочет покинуть страницу", иначе выведем другое сообщение "Пользователь НЕ хочет покинуть страницу".

Var user_answer = confirm("Вы точно хотите покинуть страницу?"); if(user_answer) alert("Пользователь хочет покинуть страницу"); else alert("Пользователь НЕ хочет \nпокинуть страницу");

Таким вот образом работает метод confirm(). Он может использоваться в разных случаях. Например, перед тем как удалить что-то с сайта принято спросить пользователя, уверен ли он в свои действия. Или же перед тем как отправить форму, тоже можно спросить пользователя "Вы все заполнили правильно?", если он ответит да, то форма отправиться, иначе она не отправится.

Метод prompt()

И последний метод, которого мы изучим, это метод prompt(). Данный метод используется реже, чем остальные два метода. Он позволяет получить некую информацию от пользователя, которую он введёт в текстовое поле.

Как результат метод prompt() возвращает либо введённую строку, если пользователь нажал кнопку OK, либо null, если пользователь нажал на кнопку отмена.

Как параметр, то есть внутри скобок у данного метода мы можем написать указательную строку или вопрос, чтобы пользователь знал какую информацию необходимо ввести.

Например, попросим пользователя ответить на вопрос "Как Вас зовут?". Введённое пользователем имя, отобразим на экран с помощью метода alert().

Var name = prompt("Как Вас зовут?"); alert("Вас зовут " + name);

Сохраняем и открываем страницу в браузере.

Разумеется, в текстовое поле из метода prompt() можно ввести любую информацию. Эта информация будет возвращена как строка, даже в случае чисел или других спецсимволов.

Для примера попросим пользователя ввести две числа, чтобы потом умножить их. Будет некий калькулятор для умножения чисел.

Var x = prompt("Введите первое число:"); var y = prompt("Введите второе число:"); //Преобразование введенных чисел из строкового типа в числовой тип x = Number(x); y = Number(y); document.write(x + " * " + y + " = " + (x * y));

Введённые числа являются строками, поэтому для правильного результата умножения, необходимо эти числа пройти через функцию Number(), которая преобразует их из строкового типа в нормальные числа.

Ну и на этом все. Теперь Вы знаете ещё три метода: alert(), confirm() и prompt() . Которых Вы смело можете использовать на практике.

И снова я приветствую Вас в очередной теме посвященной языку JavaScript , в которой мы разберем методы alert, prompt, confrim . Данные методы являются встроенными в язык Javascript и помогают нам взаимодействовать с пользователем.
Alert выводит на экран браузера окно с определенной информацией, которое приостанавливает скрипт до момента нажатия пользователем кнопки ОК.
Prompt , как правило, выводит окно, в котором пользователю задают вопрос, на который он должен ответить в определенном текстовом поле, после чего нажать клавишу ОК. Также пользователь может ничего не вводить, нажав клавишу отмена.
Confirm также выводит окно, в котором пользователь уже не может вводить что-либо в текстовое поле, а может лишь нажать кнопку ОК или отмена.
А теперь после небольшого вступления перейдем к рассмотрению всего вышесказанного на практике.

alert, prompt, confirm



alert("Привет, дорогой пользователь!" );
var nameUser = prompt("Ваше имя?" , "name" );
var userAnswer = confirm("Вы действительно хотите покинуть сайт?" );

В результате при обновлении страницы браузера у нас появится окно с приветствием пользователя. После нажатия кнопки ОК, появится следующее окно, где будут спрашивать ваше имя. В данном методе есть два параметра, первый является обязательным и отвечает за заголовок, который будет выводиться, в нашем случае это вопрос имени пользователя. И второй параметр отвечает за значение, которое будет выводиться по умолчанию в текстовом поле. Если Вы введете ваше имя и нажмете кнопку ОК, то ваше имя поместиться в переменную nameUser . Если вы нажмете кнопку отмена, то в переменную будет записан null .
И напоследок окно, которое спрашивает у пользователя, хочет он покинуть наш сайт или нет. В случае согласия в переменную будет помещено булево значение true , и при отказе false соответственно. Вот и все, что следует знать о данных методах, до встречи в следующих уроках!