Функция alert где встречается. Операции alert, prompt и confirm

В 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; } } ... Угадай число

• методы объекта window;
• метод alert(): краткое резюме;
• метод confirm() - пишите письма;
• метод prompt() - давайте знакомиться, я Штирлиц.

Итак, объекты браузера. И в первую очередь - самый старший из них, объект window .

Вот основные методы объекта window (кроме них есть и другие, но они малоупотребительны, и, чтобы не загромождать мозги лишней информацией, я отложу их до третьей серии).

Метод	Описание
	Открытые и закрытие окна браузера; есть возможность определять размер окна, его содержимое, а также наличие кнопочной панели, поля адреса и других атрибутов.
	Появление окна сигнального диалога с соответствующим сообщением.
	Появление окна диалога подтверждения с кнопками "ОК" и "Cancel".
	Появление окна диалога подсказки с полем текстового ввода.
	Установка или удаление фокуса для окна.
	Прокрутка содержимого окна до определенной точки.
	Установка временного интервала между функциональным вызовом и вычислением выражения.
	Установка однократного временного интервала до функционального вызова или вычисления выражения.

Мы уже знаем, что window часто подразумевается, но не пишется.

Вызов различных окон диалога

Окна диалога применяются в программах для взаимодействия с пользователем.

Метод alert()

Его мы разбирали в самом начале наших занятий. Он создаёт простейшее диалоговое окно с сообщением и кнопкой ОК. Всё его взаимодействие ограничивается тем, что пользователь, нажав эту единственную кнопку, может послать это окно куда-нибудь подальше (и на том спасибо).

Метод confirm()

Метод confirm() уже даёт возможность пользователю принять простейшее «булево» решение: сказать «да» или «нет».

Вот, например, нажмите эту кнопку:

Извините за маленький розыгрыш. Надеюсь, Вы умеете пользоваться кнопкой «назад».

Как это всё устроено? Вы, конечно, увидели, что у меня этот метод скомбинирован с алертами. И сделано это с помощью функции, которая вставлена в .

Метод возвращает два значения: true (если ОК) и false (если отмена).

В true мы отправляем его на соответствующую страницу (свойство href объекта location ) и выводим соответствующий alert() . В противном случае (то есть false ) просто выводим другой alert() .

А в кнопочке вызываем функцию в событии onClick :

А затем нужно вызвать эту функцию из обработчика события onSubmit тэга , например:

Вот здесь, например, Вы можете написать мне на «мыло» всё, что думаете о моих уроках. Если вдруг погорячились и нажали кнопку, а потом неловко как-то стало, выскочит окно диалога и отрезвит Вас.

Если Вы делаете всплывающие окна, то хорошим тоном является предупреждать об этом пользователя и давать ему выбор - открывать окно или не открывать. Для этого перед загрузкой окна надо выпустить «парламентёра» - диалог confirm() . Здесь функция вызывается из . Об этом мы очень скоро поговорим, когда перейдём к созданию окон методом open() .

Метод prompt()

Этот метод уже запрашивает у пользователя конкретные данные. Появляется окно диалога с полем ввода. Метод возвращает данные, которые пользователь ввёл в это поле, и позволяет программе работать с этими данными.

У метода prompt() два аргумента: вопрос (который появляется над полем ввода) и ответ (текст в поле ввода):

Если хотите, чтобы поле ввода появилось чистым, поставьте вторым аргументом пустые кавычки:

prompt ("текст вопроса ","")

Давайте посмотрим это в действии. Нажмите кнопку, не бойтесь.

Итак, Вы ввели (или не ввели) данные и получили от компьютера ответ, опирающийся на эти данные (или их отсутствие).

Вот простой вариант этой функции:

Свойство innerHTML , позволяющее контролировать содержимое тэга, встречалось нам в 10 уроке, когда мы программировали названия под картинками.

А вот код кнопки и пустого абзаца для приветствия.

Но если Вы оказались моим тёзкой, то увидели, что функция среагировала и на это.

Как это сделать в «грубом» варианте, можете уже догадаться сами. Нужно проверить переменную user_name не только на пустые кавычки, но и на "Андрей ", и вложить ещё один if с соответствующим текстом (можете потренироваться сами).

Но если Вы наберёте "Андрей ", "Андрюша ", "Андрюшка ", "Андрюха ", "Андрейка ", "Андрей Иваныч " и т.п., то результат получится аналогичный, хотя я и не перебирал явно все эти значения, а обошёлся только пятью строками: "Андре ", "Андрю ", "Андрее ", "Андрейче " и "Андрейчу " (три последние - чтобы исключить из тёзок Андреева, Андрейченко и Андрейчука, сохранив в тёзках Андрейчика).

То есть можно догадаться, что функция проверяет переменную user_name на первые 5, 6 или 8 символов.

Но об этом мы будем говорить несколько позже, когда перейдём к строковым объектам и их методам. Просто я хочу, чтобы Вы заранее представляли те задачи, которые нам предстоит решать (в частности, всевозможные расщепления строк на подстроки). Тогда и сами решения покажутся понятнее. Но если не терпится, можете «срисовать» функцию из кода и «разделать под орех». Для любопытных я написал там комментарий.

Метод prompt() можно также использовать для ввода пароля.

Это ещё не конец урока!

Давайте немножко «поиграем в шпионов», чтобы дочитать до конца эту главу. Сначала попробуйте нажать кнопку и что-нибудь ввести.

А-а, вот так-то! Но смотрите, появилась ещё кнопка! Ну-ка...

Пароль:

Снова нажимаем первую кнопку и вводим правильный пароль.

Вся эта забава, пожалуй, бьёт на эффект, но на самом деле пароль можно узнать, нажав правую кнопку и посмотрев его в коде. Кто-то может наивно подумать, что достаточно поместить код в отдельный файл.js. Но в коде страницы будет ссылка на этот файл с указанием адреса. И если набрать его в адресной строке, то откроется файл с кодом JavaScript:)

Можно ли зашифровать пароль в коде? Можно, но для этого опять нужны манипуляции со строками вместе с применением некоторых математических методов. Когда мы до всего этого доберёмся, то изучим и скрипт «настоящего» пароля. Но техника взаимодействия с пользователем будет всё та же: метод prompt() . (Можно ли «расколоть» зашифрованный пароль? Увы, совершенству хакеров нет предела...)

Точно так же, как мы «ловили» имя или его отсутствие, поймаем функцией и пароль.

Если ввести неверный пароль или не ввести ничего, строка

document.getElementById("no").style.display = "block"

откроет блок со второй кнопкой

А если введён правильный пароль, действие передаётся строке

document.getElementById("yes").style.display = "block" ,

которая открывает следующий блок…

…Стоп, а что это там за крякозубры? Это незамысловатая шифровочка, скоро поясню.

А пока даю код этих блоков (для наглядности опускаю таблицу с рамками, которая у меня заключена в последний блок):

А-а, вот так-то! Но смотрите, появилась ещё кнопка! Ну-ка... Пароль: document.write(unescape("%u043C%u043E%u044F%20%u043F%u0440%u0435%u043A% u0440%u0430%u0441%u043D%u0430%u044F%20%u043B%u0435%u0434%u0438" )) Снова нажимаем первую кнопку и вводим правильный пароль. Теперь читаем дальше. . . . . . . . . . .

Так вот, о шифровке. Она весьма убогая. Любой, знающий функции escape() и unescape() , тут же её взломает.

Функция escape("сюда ввести строку") преобразовывает символы в их шестнадцатеричные значения.

Функция unescape("сюда ввести крякозубры") выполняет обратное действие.

Чтобы таким образом зашифровать пароль, нужно у себя дома прогнать его через escape() , скопировать результат и вставить его в unescape() . Но это, повторяю, несерьёзно.

Ну и для полного комплекта - функция для второй кнопки:

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

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