Ограничение времени реакции пользователя
Иногда пользователь, попав на страницу Web, долго не может понять, что нужно делать. Вы можете создать сценарий, который отображает в этой ситуации документ HTML с подсказкой. Разумеется, подсказка должна отображаться только в том случае, если пользователь не выполняет над вашей страницей никаких действий в течении достаточно продолжительного времени.
Но как измерить время, в течении которого пользователь не активен?
В этом вам помогут методы setTimeout и clearTimeout. Первый из этих методов мы уже использовали в предыдущем сценарии для организации периодического выполнения функции.
Мы продемонстрируем применение этих методов для решения другой задачи, связанной с ограничением времени ввода пароля.
Когда пользователь загружает документ HTML, исходный текст которого представлен в листинге 2.6, на экране появляется форма с полем, предназначенным для ввода текстовой строки пароля (рис. 2.12).
Рис. 2.12. Форма в документе HTML для ввода пароля
Сразу после загрузки документа в окно браузера сценарий запускает таймер, вызывая метод setTimeout из этого же класса. Таймер устанавливается на 10 секунд. Именно за это время вы должны ввести пароль и нажать кнопку “Enter Password” в форме, показанной на рис. 2.12, чтобы получить доступ к странице.
Если повременить с вводом пароля или ввести неправильный пароль, сценарий загружает в окно браузера динамически сформированный документ HTML с сообщением о запрещении доступа (рис. 2.13).
Рис. 2.13. Сообщение о запрещенном доступе
Только в том случае, если пароль введен правильно и в течении 10 секунд, на экране появляется сообщение о предоставлении доступа и ссылка, с помощью которой можно перейти к просмотру главной страницы нашего сервера Web (рис. 2.14).
Рис. 2.14. Сообщение о разрешении доступа и ссылка на главную страницу нашего сервера Web
Разумеется, приведенный нами пример едва ли стоит использовать на практике для ограничения доступа к странице сервера Web.
Во-первых, исходный текст сценария легко просмотреть и проанализировать (если только сценарий не находится в отдельном файле, адрес которого указан при помощи параметра SRC). Во-вторых, узнав один раз адрес страницы сервера, пользователь может просто отметить эту страницу закладкой и в дальнейшем посещать ее без ввода пароля.
Мы привели данный пример сценария только для иллюстрации применения методов класса window. С помощью аналогичного сценария вы можете узнать, не заснул ли пользователь, пока смотрел на вашу страницу.
Теперь рассмотрим исходный текст сценария JavaScript, встроенного в документ HTML (листинг 2.6).
Листинг 2.6. Файл chapter2/Password/Password.html
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Ввод пароля</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var idTimer=0;
function StartMyTimer()
{
var cmd="NoAccess()";
idTimer=window.setTimeout(cmd, 10000);
}
function NoAccess()
{
document.write("<H1>Доступ запрещен</H1>");
document.write("<P>Попробуйте в следующий раз!");
}
function CheckPassowd()
{
var szPwd="";
szPwd=document.pwdForm.pwd.value;
if(szPwd=="password")
{
clearTimeout(idTimer);
document.write("<H1>Доступ разрешен</H1>");
document.write("<P>Наш сервер: ");
document.write(
'<A HREF="http://www.glasnet.ru/~frolov/index.html"');
document.write( '>http://www.glasnet.ru/~frolov/index.html</A>');
}
else
{
document.write("<H1>Доступ запрещен</H1>");
document.write("<P>Попробуйте в следующий раз!");
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white onLoad="StartMyTimer();">
<H1>Доступ ограничен</H1>
<P>Мы ограничили доступ к нашему серверу :)
<P>Вы должны ввести пароль (слово password)
в течении 10 секунд.
<HR>
<FORM NAME="pwdForm">
<P><INPUT TYPE="text" VALUE="******" NAME="pwd">
<P><INPUT TYPE="button" VALUE="Enter Password"
onClick="CheckPassowd();">
</FORM>
<HR>
</BODY>
</HTML>
Прежде всего обратим ваше внимание на заголовок документа HTML.
В первой странице этого заголовка мы указали с помощью оператора <META> номер кодовой страницы 1251, соответствующей кириллице в Windows:
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
Без этой строки наш документ отображался неправильно браузером Microsoft Internet Explorer версии 4.0.
В первых строках сценария, расположенного в заголовке документа, мы объявили переменную idTimer и определили функцию StartMyTimer:
var idTimer=0;
function StartMyTimer()
{
var cmd="NoAccess()";
idTimer=window.setTimeout(cmd, 10000);
}
Функция StartMyTimer запускает таймер, сохраняя его идентификатор в глобальной переменной idTimer. Для запуска таймера мы применили знакомый вам метод с именем setTimeout.
Когда таймер сработает (а это произойдет через 10 секунд после загрузки нашего документа HTML в окно браузера), будет вызвана функция NoAccess. Эта функция выводит в окно браузера сообщение о запрещении доступа к странице.
Для того чтобы функция StartMyTimer запускалась сразу после загрузки документа HTML в окно браузера, мы указали ее имя в параметре onLoad оператора <BODY>, организовав таким образом обработку соответствующего события:
<BODY BGCOLOR=white onLoad="StartMyTimer();">
Итак, если пользователь загрузил документ и просто смотрит на него, через 10 секунд содержимое документа в окне браузера будет перезаписано функцией NoAccess, что иллюстрируется на рис. 2.13.
Для ввода пароля необходимо использовать форму, которая определена в нашем документе HTML следующим образом:
<FORM NAME="pwdForm">
<P><INPUT TYPE="text" VALUE="******" NAME="pwd">
<P><INPUT TYPE="button" VALUE="Enter Password"
onClick="CheckPassowd();">
</FORM>
Имя формы pwdForm указано в параметре NAME оператора <FORM>. Это имя нам потребуется для извлечения строки пароля из текстового поля, определенного в форме с помощью оператора <INPUT>. Имя этого текстового поля pwd также задается параметром NAME.
Помимо текстового поля, в форме имеется кнопка с надписью “Enter Password”. Для этой кнопки мы определили обработчик события onClick, который вызывается, когда пользователь нажимает мышью на кнопку. Обработчиком в нашем случае является функция CheckPassowd, определенная в нашем сценарии. Эта функция проверяет пароль и, если пароль введен правильно, останавливает таймер, запущенный при загрузке документа HTML.
Как наш сценарий извлекает строку пароля из поля формы?
Это делается следующим образом:
var szPwd="";
szPwd=document.pwdForm.pwd.value;
Здесь мы выполняем ссылку на свойство value объекта pwd, которым является текстовое поле формы (вспомните, что это поле называется pwd). Объект pwd находится внутри формы с именем pwdForm, которая, в свою очередь располагается в документе HTML, загруженным в окно браузера. Этим документом является объект document.
Получив введенную пользователем строку, функция CheckPassowd проверяет ее:
if(szPwd=="password")
{
clearTimeout(idTimer);
. . .
}
Если строка введена правильно, таймер останавливается методом clearTimeout. В качестве параметра этому методу передается идентификатор таймера, полученный от метода setTimeout. При ошибке в документ HTML записывается сообщение о запрещении доступа.
