Javascript закрыть alert. Описание методов alert, confirm и prompt в JavaScript. Вызов различных окон диалога

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

В этой статье мы изучим три интересных метода, а именно методы 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() является самым простым и быстрым вариантом. Особенно хорош этот вариант для целей тестирования, но на многих ресурсах применяется как естественный функционал.

Функция JavaScript alert() позволяет получить утвердительный ответ. По сути, важен не ответ, а сам факт вывода информации. Причём веб-ресурс перестаёт функционировать до тех пор, пока пользователь не откликнется. Ответ по алерту всегда один - это ответ!

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

Фиксация внимания посетителя

"Алерт" - как в жизни, формирует событие, мимо которого никак не пройти. Но это событие может и не произойти .

Редкий разработчик знает об этом обстоятельстве и мучительно долго отлаживает свой сайт в его клиентской части. При этом мало кто из разработчиков не знает: найти ошибку в клиенте, то есть в браузере, часто настолько затруднительно, что:

• бесцельно уходят часы драгоценного времени;
• затрачиваются неимоверные трансформации кода;
• перелопачивается масса скриптов, на словах, достаётся и браузеру, и серверу.

А результата все нет. Ни дебаггеры не помогают, ни слова, ни встроенные во всякий браузер инструменты для отладки. Между тем ларчик всегда просто открывается - важен правильный ключик.

Простое правило правильного кода

Прежде всего, куки стали самой востребованной составляющей современного сайта. Следует никогда не забывать:

• JavaScript alert & document cookie
• «здесь и сейчас» & «вообще или когда-нибудь».

Куки - это классная возможность помнить в недрах браузера о каждом клиенте, но не следует придавать этому значения в текущем сеансе. Главная забота куки: остаться в «памяти» браузера в том содержании, которое она имела на момент ухода посетителя.

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

В данном контексте, а контекст этот здесь идеален, код не может не работать, если он написан правильно. Это идеальное правило для правильного кода. Если браузер показывает чистый экран или что-то не так делает, есть основания предполагать наличие ошибки.

Проще простого применить:

• JavaScript alert("До сих пор было все правильно!").

Самый лучший дебагер или отладчик - событие, которое обязано произойти, но не происходит .

Перемещая эту конструкцию вниз от нуля до досадного криминала в коде можно обнаружить то место, после которого она не работает. Ошибка будет найдена. JavaScript alert() - это модальное окно . Его обойти никак нельзя, и дальше ничего не будет, пока разработчик/посетитель не закроет данное окно.

Если окно не выскакивает, значит, либо оно обозначено в коде неверно, либо все, что идёт до него, содержит ошибку.

Сложная ситуация, в которой alert JavaScript вроде как не срабатывает

В основном это касается AJAX алгоритмов обмена информацией с сервером. Здесь не всегда допустимо применять классические средства отладки, а когда на стороне клиента действует многоуровневая система объектов, то отладка вообще трансформируется в сознание разработчика и никакой дебаггер не в силах помочь.

Лучший вариант алерта в процедуре общения с сервером - это див (div), в который помещается протокол общения с сервером по методу innerHTML - всегда будет ясно, на каком этапе происходит проблема.

Статический див, который всегда виден на странице - это не модальное окно от JavaScript alert. Window может не появиться, и причин для того может быть множество, причем оформленных синтаксически правильно. Язык браузера отличается предельно спокойным нравом и никогда не предпримет каких-либо действий, если чего-то не разобрал и не понял.

Статичность любого тега HTML - хороший фактор. Убрать весь код и добавлять его порциями, пока ошибка вновь не возникнет, - не самая быстрая технология для отладки. Писать правильно - совет популярный, востребованный, но не практичный.

Язык браузера - работает по событиям, его основная забота - не последовательный код, а исполнение функциональности, назначенной на теги страницы, и обработка событий.

Дополнительное правило к простому правилу

Если окно от JavaScript alert("До сих пор все написано правильно") не появилось в браузере, значит, синтаксис до места, где эта конструкция записана, не вызывает у браузера сомнений и исполнен правильно.

У логики современного стиля письма есть существенный недостаток. Все файлы страницы сливаются воедино (со своей сути и типам) в одно целое, и после этого строится DOM. Порядок соединения файлов часто имеет существенное значение.

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

Порядок всегда важнее всего. С остальным JavaScript разберется сам: что и когда вызывать. Современное программирование вообще и в контексте любого метода, любого высокоорганизованного объектно-ориентированного подхода в частности - всегда последовательно. объединяются всегда тоже последовательно по мере описания.

Если что-то не происходит, значит: не где-то что-то не так, а только перед этим местом.

• методы объекта 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 есть только три метода, которые мы сегодня узнали. Хотя эти методы случается применять не так уж часто, умение уверенно с ними обращаться чрезвычайно полезно. Они просты, но при этом относятся, так сказать, к «чистому» программированию. На них очень хорошо набивать руку в освоении языка программирования. И я Вам советую всячески поэкспериментировать с ними, пусть даже бесцельно с прагматической точки зрения. Хорошее программирование - это увлекательная игра, как, впрочем, и любое творчество.