Давайте взглянем на два способа ввода. Возможно, ни один из них широко не используется, но они могут быть просто использованы для знакомства с основами.
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."); }
В 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 )
В качестве альтернативы для стандартных средств браузера в данном уроке мы построим крос-браузерное решение для организации диалога подтверждения в форме простого в использовании плагина jQuery. Можно будет изменять текст, кнопки и действия, которые будут выполняться при нажатии на кнопки.
Хотя основные усилия будут сконцентрированы на диалоге подтверждения, сначала скажем несколько слов о странице, которая будет использоваться для демонстрации. Те, кто жаждут увидеть код плагина, могут сразу прокрутить текст до раздела, посвященного jQuery.
index.phpЗамена диалога подтверждения с использованием jQuery | Демонстрация для сайта сайт " target="_blank"> " alt="" width="250" /> Замена диалога подтверждения с использованием jQuery
В разделе заголовка нашей страницы включается шрифт Cuprum из Google Font , jquery_confirm.css , в котором заданы стили для диалога подтверждения, и styles.css , который содержит стили для демонстрационной страницы.
Внизу раздела тела страницы включается библиотека jQuery , jquery_confirm.js , который содержит основной код плагина, и script.js , который содержит код для обработчика события click , используемого на демонстрационной странице для запуска плагина.
Для использования диалога подтверждения на своем сайте надо скопировать папку jquery_confirm из архива с исходниками и включить jquery_confirm.css в раздел заголовка страницы, а jquery_confirm.js вставить перед закрытием тега body , также как и библиотеку jQuery.
Сам по себе диалог подтверждения является не более чем несколькими линиями кода HTML. Ниже приведен код, который генерирует плагин для вывода окна диалога.
Пример кода диалогаЗаголовок окна
Описание процесса
Да НетДанный код добавляется к документу. Элемент confirmOverlay выводится над остальным содержанием страницы, предотвращая любые взаимодействия с ней пока открыт диалог подтверждения (модальное окно). Элементы h1 , p и confirmButtons заполняются в соответствии с аргументами, которые передаются плагину. Далее по тексту урока приводятся дополнительные разъяснения.
Стили для диалога подтверждения находятся в файле jquery_confirm.css . Таким образом, плагин будет легко подключить к существующему проекту, и он построен таким образом, чтобы исключить возможные пересечения со стилями ваших страниц.
jquery_confirm.css#confirmOverlay{ width:100%; height:100%; position:fixed; top:0; left:0; background:url("ie.png"); background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2); z-index:100000; } #confirmBox{ background:url("body_bg.jpg") repeat-x left bottom #e5e5e5; width:460px; position:fixed; left:50%; top:50%; margin:-130px 0 0 -230px; border: 1px solid rgba(33, 33, 33, 0.6); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; } #confirmBox h1, #confirmBox p{ font:26px/1 "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif; background:url("header_bg.jpg") repeat-x left bottom #f5f5f5; padding: 18px 25px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); color:#666; } #confirmBox h1{ letter-spacing:0.3px; color:#888; } #confirmBox p{ background:none; font-size:16px; line-height:1.4; padding-top: 35px; } #confirmButtons{ padding:15px 0 25px; text-align:center; } #confirmBox .button{ display:inline-block; background:url("buttons.png") no-repeat; color:white; position:relative; height: 33px; font:17px/33px "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif; margin-right: 15px; padding: 0 35px 0 40px; text-decoration:none; border:none; } #confirmBox .button:last-child{ margin-right:0;} #confirmBox .button span{ position:absolute; top:0; right:-5px; background:url("buttons.png") no-repeat; width:5px; height:33px } #confirmBox .blue{ background-position:left top;text-shadow:1px 1px 0 #5889a2;} #confirmBox .blue span{ background-position:-195px 0;} #confirmBox .blue:hover{ background-position:left bottom;} #confirmBox .blue:hover span{ background-position:-195px bottom;} #confirmBox .gray{ background-position:-200px top;text-shadow:1px 1px 0 #707070;} #confirmBox .gray span{ background-position:-395px 0;} #confirmBox .gray:hover{ background-position:-200px bottom;} #confirmBox .gray:hover span{ background-position:-395px bottom;}
Используется несколько правил CSS3. В определении #confirmOverlay мы задаем градиенты CSS3 (они будут доступны только в браузерах Firefox, Safari и Chrome).
В #confirmBox , который располагается в центре экрана, добавлены внутренние тени, которые эффектно выглядят (наподобие внутреннего свечения в Фотошоп). Также используется шрифт Cuprum , который входит в Google Font.
Для кнопок используются спрайты CSS. Доступны два варианта дизайна - серый и голубой. Вы можете также добавить свой собственный стиль для кнопок.
jQueryПрежде чем рассматривать код плагина взглянем на то, как его использовать. В файле scripts.js происходит вызов плагина.
script.js $(document).ready(function(){
$(".item .delete").click(function(){
var elem = $(this).closest(".item");
$.confirm({
"title" : "Подтверждение удаления",
"message" : "Вы решили удалить пункт.
После удаления его нельзя будет восстановить! Продолжаем?",
"buttons" : {
"Да" : {
"class" : "blue",
"action": function(){
elem.slideUp();
}
},
"Нет" : {
"class" : "gray",
"action": function(){} // В данном случае ничего не делаем. Данную опцию можно просто опустить.
}
}
});
});
});
Когда на элементе div .delete нажимают кнопку мыши, скрипт выполняет функцию $.confirm , определенную плагином. Она передает плагину заголовок диалога, описание и объект с кнопками. Каждая кнопка получает имя класса CSS и свойство action . Данное свойство устанавливает функцию, которая выполняется при нажатии кнопки.
Теперь можно перейти к самой интересной части нашего урока. В файле jquery_confirm.js содержится код плагина альтернативы стандартному диалогу подтверждения.
jquery_confirm.js(function($){ $.confirm = function(params){ if($("#confirmOverlay").length){ // Диалог подтверждения уже выведен на странице: return false; } var buttonHTML = ""; $.each(params.buttons,function(name,obj){ // Генерируем разметку кнопок: buttonHTML += ""+name+""; if(!obj.action){ obj.action = function(){}; } }); var markup = [ "", "", "",params.title,"", "
",params.message,"
", "", buttonHTML, "" ].join(""); $(markup).hide().appendTo("body").fadeIn(); var buttons = $("#confirmBox .button"), i = 0; $.each(params.buttons,function(name,obj){ buttons.eq(i++).click(function(){ // Когда на кнопку нажимают, вызываем функцию действия // и закрываем диалог подтверждения. obj.action(); $.confirm.hide(); return false; }); }); } $.confirm.hide = function(){ $("#confirmOverlay").fadeOut(function(){ $(this).remove(); }); } })(jQuery);Наш плагин определяет метод $.confirm() . Метод читает передаваемые аргументы, конструирует разметку и добавляет ее на страницу. Так как div #confirmOverlay имеет фиксированное позиционирование, то он располагается по центру экрана и остается в своем положении, даже если пользователь прокрутит страницу.
После добавления разметки скрипт устанавливает обработчики событий, которые выполняют соответствующие действия для кнопок диалога.
Готово!
ЗаключениеВы можете изменить стиль диалога, модифицируя файл jquery_confirm.css . Так как атрибут сообщения диалога принимает HTML текст, то вы можете добавлять в них изображения и иконки для вывода в диалоговом окне.
Также можно использовать плагин для вывода предупреждений - нужно только передать только одну кнопку без атрибута действия.
В этой статье мы изучим три интересных метода, а именно методы 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() . Которых Вы смело можете использовать на практике.
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;