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