Беспечный confirm html. Операции alert, prompt и confirm. Взаимодействие с пользователем в Javascript. Замена диалога подтверждения с использованием jQuery

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

В 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 )

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

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."); }