7.3.
Страница, управляемая с клавиатуры
А теперь давайте
рассмотрим, как можно обрабатывать
еще некоторые события, которые
могут возникать при просмотре
веб-страниц. Если в прошлом разделе
мы в основном занимались
обработкой событий мыши, то сейчас
займемся событиями, связанными с
клавиатурой.
Действительно, в
некоторых случаях бывает удобно
использовать клавиатуру, например,
для навигации по странице. В
качестве примера давайте немного
усовершенствуем словарь терминов.
Не правда ли, логично было бы, если
бы пользователь мог перейти к
соответствующей букве алфавита,
просто нажав клавишу с ее символом
на клавиатуре?
Реакция на
нажатие клавиши
Давайте попробуем
реализовать эту возможность. Для
начала назначим элементу
<BODY>
обработчик событий,
реагирующий на нажатие клавиш. Он
называется onKeyPress:
<BODY
onKeyPress="press()">
Теперь давайте напишем
саму функцию press(), которая будет
вызываться при нажатии какой-либо
клавиши. Поскольку у нас в примере
букв всего шесть (от А до Е), то пусть
нажатие на эти клавиши будет
перемещать нашу страницу к
соответствующей букве. Нажатие на
любую другую клавишу можно
обработать как перемещение в
начало файла.
Обратите внимание на то,
что для организации доступа к
каждой букве (и к началу файла) нам
не придется прикладывать никаких
дополнительных усилий! Ведь мы уже
ранее создали соответствующие
якоря с помо щью тега <А>, и хотя
они и не имеют атрибута ID=, у них
есть атрибут NAME=, который тоже можно
использовать для доступа к
элементам.
Итак, при нажатии на
клавишу нужно проверить, какая
буква была нажата. Это можно
сделать, прочитав значение
свойства window event keyCode. Оно равно
ASCIIJ-коду нажатой клавиши. Например,
если нажата клавиша с русской
буквой а, то значение свойства window
event keyCode равно 1072, то есть коду этой
буквы.
Таким образом, мы можем
использовать оператор switch, чтобы
назначить различные действия в
зависимости от кода нажатой
клавиши:
switch(window.event.keyCode) { case 1072: //
какие-то действия case 1073: // какие-то
действия и т.д.
Чтобы прокрутить
страницу к заданному элементу,
можно воспользоваться методом
scrolllntoView( ). Например, если мы напишем
document.all.BukvaA.scrolllntoView() ;
то в результате страница
будет прокручена так, что якорь BukvaA
окажется в верхней части окна
броузера.
Учет
раскладки клавиатуры
Теперь надо подумать еще
о том, что пользователь может
забыть переклю- читься на русскую
раскладку клавиатуры. Давайте не
будем заставлять его это делать.
Поскольку мы знаем, что на одной
клавише с русской бук вой а
расположена буква f, на одной
клавише с б — знак < и т. д., мы
можем осуществить проверку не
только кодов букв а, б, в, г, д, е, но и
кодов сим волов f, <, d, u, I, t. Можно
написать, например, так: case 1072: case 102:
document.all.BukvaA.scrolllntoViewO; break; case 1073: case 44:
document.all.BukvaB.scrollIntoView()
; break;
В этом случае прокрутка к
букве а осуществится, даже если
пользователь нажмет клавишу с
буквой а или f, забыв переключиться
на русскую рас-кладку клавиатуры.
Аналогично можно осуществить
прокрутку и к дру- им буквам. Чтобы
при нажатии какой-нибудь иной
клавиши вернуться началу файла,
можно присвоить это возвращение
случаю “default”:
default”:
document.all.Top.scrollIntoView(); break;
Вот, собственно говоря, и
все. Но чтобы изучить еще некоторые
обработчики событий, давайте
добавим еще эффект уменьшения
яркости текста во время нажатия
клавиши. Так обращают внимание
пользователя на то, что “что-то
происходит” (а именно: прокрутка).
Для этого нужно использо-вать
обработчики событий, реагирующие
раздельно на нажатие и на
отпускание клавиши. Они называются,
соответственно: onKeyDown и onKeyUp:
<BODY
onKeyPress="press ()"
onKeyDown="this.style.color='gray'" onKeyUp="this
style.color='black'">
Теперь во время нажатия
на клавишу цвет текста изменится на
серый, а после отпускания клавиши —
обратно на черный. Как видите,
ничего сложного.
Подсказка
для читателя
И в качестве последнего
штриха давайте добавим подсказку
для пользователя. Пусть, когда он
начнет прокручивать страницу
вручную (с помощью полосы
прокрутки), в строке состояния
отобразится такая подсказка: Вы
можете перемещаться к нужной букве,
используя клавиатуру'. Это можно
сделать, используя обработчик
событий, реагирующий на прокрутку
страницы (есть и такой!). Он
называется onScroll:
<BODY
onKeyPress="press ()"
onKeyDown="this.style.color='gray'" 'Вы можете
перемещаться к нужной букве,
используя клавиатуру''">
Кстати, один раз
появившись, подсказка так и
останется в строке состояния, но в
данном случае в этом нет ничего
плохого. Строка состояния — место
не самое заметное, так что
подсказка в ней выглядит вполне
корректно. Вот чего делать не надо,
так это использовать бросающиеся в
глаза методы типа alert:
<BODY
onKeyPress="press ()"
onKeyDown="this.style.color='gray'"
onKeyUp="this.style.color='black'"
onScroll="alert('Вы можете перемещаться
к нужной букве, используя
клавиатуру'')">
В этом случае при попытке
прокрутки страницы вручную
пользователь < разу же получит
окно-предупреждение. Если же он
просто хочет почему- либо
использовать ручную прокрутку, это
окно будет его раздражать и мешать
работе. Так что предыдущее решение
как нельзя более подходит для
данного случая — небольшая
подсказка в строке состояния и все.
Ладно, давайте посмотрим,
что у нас получилось, здесь введено
еще несколько усовершен ствований,
связанных с использованием таблицы
стилей. Например, нет необходимости
каждый термин заключать в теги
<В>
и
</В>
. Вместо
этого для тега
<DT>
заранее
определено стилевое свойство
font-weight: bold;.
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Словарь
терминов</ТIТLЕ>
<META
HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html"
CHARSET="windows-1251">
<STYLE> BODY
( background-color: #EAEAEA; color: black;
} A:link,
A:active, A:visited { color: #7A3F51;}
DT { font-weight:
bold; } </STYLE>
<SCRIPT
LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
function press ()
switch(window.event.keyCode)
{ case 1072: case
102: document.all.BukvaA.scrollIntoView() ;
break; case 1073:
case 44: document.all.BukvaB.scrollIntoView() ;
break; case 1074:
case 100: document.all.BukvaV.scrollIntoView () ;
break; case 1075:
case 117: document.all.BukvaG.scrollIntoView() ;
document.all.BukvaD.scrollIntoView()
;
break; case 1077:
case 116: document.all.BukvaE.scrollIntoView() ;
break; default:
document.all.Top.scrollIntoView()
; break;
} }
//-->
</SCRIPT>
</HEAD>
<BODY
onKeyPress="press()"
onKeyDown="this.style.color='gray'"
onKeyUp="this.style.color='black'"
onScroll="window.status= 'Вы можете
перемещаться к нужной букве,
используя клавиатуру!'">
<Н1><А
NAME="Top">Cловарь
терминов</А></Н1>
<HR
ALIGN="left" WIDTH="40%">
<НЗ>
<А HREF="#BukvaA">A</A>
<А
HREF="#BukvaB">Б</A> <А
HREF="#BukvaV">B</A>
<А
HREF="#BukvaG">Г</A> <А
HREF="#BukvaD">Д</A>
<А
HREF="#BukvaE">E</A> </НЗ> Для
перемещения к соответствующей
букве вы можете использовать
клавиатуру
<HR
ALIGN="left" WIDTH="40%">
<Н1><А
NAME="BukvaA">A</A></Hl>
<DL>
<DT><A NAME="avtentich">AБTEHTИЧECKИЙ
КАДАНС</А>
<DD>кадансовый
оборот, в котором заключительная
тоническая гармония предваряется
доминантовой
<DT>
<A
NAME="aliquot">AЛИKBOTHЫE СТРУНЫ</А>
<DD>резонирующие
струны, к которым исполнитель не
прикасается во время игры
<DT><A
NAME="atakta">ATAKTA</A>
<DD>гармонический
элемент на басу нижнего или
верхнего вводного тона
</DL>
<SMALLXA HREF="#Top">B начало</А>
</SМАLL>
<HR ALIGN="'left" WIDTH="40%">
<H1><A
NAME="BukvaB">Б</A></Hl>
<DL>
<DT><A
NAME="bagatel">БАГАТЕЛЬ</A>
<DD>небольшая
нетрудная для исполнения пьеса
<DT>
<A
NAME="bartok">БAPTOKOBCKOE
ПИЦЦИКАТО</А>
<DD>сильный
щипок струны с последующим ударом о
струны о гриф <DT>
<A
NAME="bonang">БОНАНГ</A> <DD>Ha6op
из 10-12 гонгов разного размера </DL>
<SMALL><A
HREF="#Top">B Haчaлo</A></SMALL>
<HR
ALIGN="left" WIDTH="40%">
<H1><A
NAME="BukvaV">B</A></Hl> <DL>
</DL>
<SMALL>
<A
HREF="#Top">B Haчaлo</A></SMALL>
<HR
ALIGN="left" WIDTH="40%">
<H1><A
NAME="BukvaG">Г</A></Hl>
<DL>
</DL> <SMALL><A HREF="#Top">B
Haчano</A></SMALL>
<HR
ALIGN="left" WIDTH="40%">
<H1><A
NAME="BukvaD">Д</A></Hl>
<DL>
</DL>
<SMALL><A
HREF="#Top">B Haчaлo</A></SMALL>
<HR
ALIGN="left" WIDTH="40%">
<H1><A
NAME="BukvaE">E</A></Hl>
<DL></DL>
<SMALL>
<A
HREF="#Top">B начало</A></SMALL>
</BODY>
</HTML>
Итак, мы познакомились со
всеми основными обработчиками
событий. Конечно, существуют и
другие обработчики, но они
применяются реже.
|