В 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 )
Организация диалога с посетителем веб-ресурса может быть исполнена различными способами, из которых использование функции 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" ,
которая открывает следующий блок
Стоп, а что это там за крякозубры? Это незамысловатая шифровочка, скоро поясню.
А пока даю код этих блоков (для наглядности опускаю таблицу с рамками, которая у меня заключена в последний блок):
|
А-а, вот так-то! Но смотрите, появилась ещё кнопка! Ну-ка... Пароль:
Снова нажимаем первую кнопку и вводим правильный пароль. Теперь читаем дальше. . . . . . . . . . . |
Так вот, о шифровке. Она весьма убогая. Любой, знающий функции escape() и unescape() , тут же её взломает.
Функция escape("сюда ввести строку") преобразовывает символы в их шестнадцатеричные значения.
Функция unescape("сюда ввести крякозубры") выполняет обратное действие.
Чтобы таким образом зашифровать пароль, нужно у себя дома прогнать его через escape() , скопировать результат и вставить его в unescape() . Но это, повторяю, несерьёзно.
Ну и для полного комплекта - функция для второй кнопки:
Для вывода стандартных диалоговых окон у JavaScript есть только три метода, которые мы сегодня узнали. Хотя эти методы случается применять не так уж часто, умение уверенно с ними обращаться чрезвычайно полезно. Они просты, но при этом относятся, так сказать, к «чистому» программированию. На них очень хорошо набивать руку в освоении языка программирования. И я Вам советую всячески поэкспериментировать с ними, пусть даже бесцельно с прагматической точки зрения. Хорошее программирование - это увлекательная игра, как, впрочем, и любое творчество.