Неустрашимый confirm html. JavaScript и диалоговые окна: alert, confirm, prompt

В этой статье мы изучим три интересных метода, а именно методы 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() . Которых Вы смело можете использовать на практике.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров . Это моя первая публикация в рубрике . Хочу сказать, что мои скромный ресурс не претендовал, не претендует и не будет претендовать на всесторонность, а сам автор никогда не был и не будет web гуру. На страницах своего блога я совершаю попытку простым и понятным для людей языком рассказать об основах различных web технологий. И эта рубрика будет посвящена интерпретируемому языку программирования с объектно-ориентированными возможностями JavaScript .

Помимо выше сказанного, JavaScript является алгоритмическим языком (то есть, при помощи JavaScript мы как бы даем указание браузеру, как ему реагировать на определенные действия пользователя). В рубрики Заметки о HTML, а конкретно в статье, про , мы с вами уже поговорили, из каких трех базовых элементов состоят наши страницы: HTML, HEAD и BODY.

Но простые статичные 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 )

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

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

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

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

В JavaScript реализовано 3 метода, позволяющие выводить пользователю диалоговые окна: alert, confirm, prompt.

Особенности методов alert, confirm, prompt: Конкретное место, где выводится модальное окно – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять. Нельзя вывести окно в своем, особо красивом, дизайне. Но это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.

Краткое резюме:

    alert - выводит сообщение.

    prompt - выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null, если ввод отменён (CANCEL/Esc).

    confirm - выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false.

Диалоговое окно метод alert

Метод alert используется для вывода простейшего диалогового окна, содержащего текст сообщения и единственную кнопку "Ok". Формат вызова данной функции:

Alert("Текст сообщения");

Диалоговое окно метод confirm

Функция confirm позволяет вывести пользователю диалоговое окно, содержащее текст сообщения и кнопки "Ok" и "Cancel". Используется в тех случаях, когда пользователь должен сделать выбор. Формат вызова данной функции:

Var result=confirm("Текст вопроса"); //условная конструкция для проверки результата if(result) { /* действия */ } else { /* действия */ }

Функция confirm возвращает логическое значение в зависимости от нажатой пользователем кнопки: "Ok" соответствует значению true, "Cancel" - значению false. Как правило, результат работы функции присваивают переменной, для дальнейшего анализа, как это показано в примере выше.

Диалоговое окно метод prompt

Функция prompt позволяет вывести пользователю диалоговое окно запроса на ввод данных. Используется в тех случаях, когда пользователь должен ввести строку текста. Формат вызова данной функции:

Var str=prompt("Запрос на ввод данных", значение_по_умолчанию);

Необходимо помнить, что функция prompt возвращает результат строкового типа. Поэтому, прежде чем его использовать в арифметических выражениях, необходимо выполнить преобразование типов к числовому. Это можно сделать при помощи следующих функций:

ParseInt("строка") - преобразует строку в целое число; parseFloat("строка") - преобразует строку в число с плавающей точкой.

Однако, преобразование строки в число можно осуществить не во всех случаях. Поэтому, чтобы избавить себя от потенциальной ошибки, необходимо сначала проверить - можно ли выполнить такое преобразование. Для этих целей используется функция isNaN(строка). Данная функция возвращает истину, если строка не может быть преобразована в число, и ложь в противном случае.

var number, summ=0; do { number=parseInt(prompt("Введите число:", 10)); summ+=number; } while(confirm("Продолжим?")) alert("Сумма чисел: "+summ);