Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров . Это моя первая публикация в рубрике . Хочу сказать, что мои скромный ресурс не претендовал, не претендует и не будет претендовать на всесторонность, а сам автор никогда не был и не будет web гуру. На страницах своего блога я совершаю попытку простым и понятным для людей языком рассказать об основах различных web технологий. И эта рубрика будет посвящена интерпретируемому языку программирования с объектно-ориентированными возможностями JavaScript .
Помимо выше сказанного, JavaScript является алгоритмическим языком (то есть, при помощи JavaScript мы как бы даем указание браузеру, как ему реагировать на определенные действия пользователя). В рубрики Заметки о HTML, а конкретно в статье, про , мы с вами уже поговорили, из каких трех базовых элементов состоят наши страницы: HTML, HEAD и BODY.
Но простые статичные HTML страницы это же так скучно и не интересно, а нам бы хотелось добавить немного динамики и увеличить количество способов взаимодействия с посетителями наших .
В JavaScript реализовано 3 метода, позволяющие выводить пользователю диалоговые окна: alert, confirm, prompt.
Особенности методов alert, confirm, prompt: Конкретное место, где выводится модальное окно – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять. Нельзя вывести окно в своем, особо красивом, дизайне. Но это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.
Краткое резюме:
alert - выводит сообщение.
prompt - выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null, если ввод отменён (CANCEL/Esc).
confirm - выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false.
Метод 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); переменной «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, а вторым аргументом функции, это тоже допустимо.
Да, кода получается немного больше. Но зато красиво! А красота, как известно, требует жертв.