Javascript prompt с условием. Операции alert, prompt и confirm. Взаимодействие с пользователем в Javascript. Примеры эксплуатирования XSS
И снова я приветствую Вас в очередной теме посвященной языку JavaScript
, в которой мы разберем методы alert, prompt,
confrim
. Данные методы являются встроенными в язык Javascript
и помогают нам взаимодействовать с пользователем.
Alert
выводит на экран браузера окно с определенной информацией, которое приостанавливает скрипт до момента нажатия пользователем кнопки ОК.
Prompt
, как правило, выводит окно, в котором пользователю задают вопрос, на который он должен ответить в определенном текстовом поле, после чего нажать
клавишу ОК. Также пользователь может ничего не вводить, нажав клавишу отмена.
Confirm
также выводит окно, в котором пользователь уже не может вводить что-либо в текстовое поле, а может лишь нажать кнопку
ОК или отмена.
А теперь после небольшого вступления перейдем к рассмотрению всего вышесказанного на практике.
alert, prompt, confirm
alert("Привет, дорогой пользователь!"
);
var
nameUser
= prompt("Ваше имя?"
, "name"
);
var
userAnswer
= confirm("Вы действительно хотите покинуть сайт?"
);
В результате при обновлении страницы браузера у нас появится окно с приветствием пользователя. После нажатия кнопки ОК,
появится следующее окно, где будут спрашивать ваше имя. В данном методе есть два параметра, первый является обязательным и
отвечает за заголовок, который будет выводиться, в нашем случае это вопрос имени пользователя. И второй параметр отвечает за значение,
которое будет выводиться по умолчанию в текстовом поле. Если Вы введете ваше имя и нажмете кнопку ОК, то ваше имя поместиться в переменную
nameUser
. Если вы нажмете кнопку отмена, то в переменную будет записан null
.
И напоследок окно, которое спрашивает у пользователя, хочет он покинуть наш сайт или нет. В случае согласия в переменную будет помещено булево
значение true
, и при отказе false
соответственно. Вот и все, что следует знать о данных методах, до встречи в следующих уроках!
В 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 )
На этом уроке мы познакомимся с методами объекта 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; } } ... Угадай число