 |
На главную |
|
1.Как создают веб-страницы |
| Как написать веб-страницу | |
| Обзор программ для просмотра и создания веб-страниц |
|
| Создание веб-страниц |
|
2.Основные средства языка HTML |
| Самое главное на любой веб-странице - гиперссылки | |
| Как создать списки на веб-странице | |
| Создание таблиц |
|
3.Графика на веб-странице |
| Графические форматы интернета |
|
| Графические элементы оформления веб-страниц |
|
| Графические маркеры | |
| Подготовка рисунков в программе Adobe Photoshop |
|
4.Оформление веб-страницы с использованием стилей |
| Определение стилей в специальной таблице |
|
| Обзор других возможностий стилевых таблиц |
|
5.Использование звука на веб-странице |
| Маленькие хитрости |
|
6.Динамические веб-страницы на основе JavaScript |
| Как писать собственные функции | |
| Динамическое изменение внешнего вида страницы |
|
| Другие возможности языка JavaScript |
|
8.Размещение элементов на веб-странице с помощью таблиц |
| Управление расположением элементов на веб-страницы |
|
| Динамическое позиционирование слоев |
|
9.Дополнительные возможности формирования веб-страниц |
| Пример использования элемента управления Tabular Data |
Страница, управляемая с клавиатуры
А теперь давайте рассмотрим, как можно обрабатывать еще некоторые события, которые могут возникать при просмотре веб-страниц. Если в прошлом разделе мы в основном занимались обработкой событий мыши, то сейчас займемся событиями, связанными с клавиатурой. Действительно, в некоторых случаях бывает удобно использовать клавиатуру, например, для навигации по странице. В качестве примера давайте немного усовершенствуем словарь терминов, представленный ранее на рис. 2.12. Не правда ли, логично было бы, если бы пользователь мог перейти к соответствующей букве алфавита, просто нажав клавишу с ее символом на клавиатуре?
Реакция на нажатие клавиши
Давайте попробуем реализовать эту возможность. Для начала назначим элементу <BODY> обработчик событий, реагирующий на нажатие клавиш. Он называется onKeyPress:
<BODY onKeyPress="press() ">
Теперь давайте напишем саму функцию press(), которая будет вызываться при нажатии какой-либо клавиши. Поскольку у нас в примере букв всего шесть (от А до Е), то пусть нажатие на эти клавиши будет перемещать нашу страницу к соответствующей букве. Нажатие на любую другую клавишу можно обработать как перемещение в начало файла.
Обратите внимание на то, что для организации доступа к каждой букве (и к началу файла) нам не придется прикладывать никаких дополнительных усилий! Ведь мы уже ранее создали соответствующие якоря с помощью тега <А>, и хотя они и не имеют атрибута ID=, у них есть атрибут NAME=, который тоже можно использовать для доступа к элементам.
Итак, при нажатии на клавишу нужно проверить, какая буква была нажата. Это можно сделать, прочитав значение свойства window.event.keyCode. Оно равно ASCII-коду нажатой клавиши. Например, если нажата клавиша с русской буквой а, то значение свойства window.event.keyCode равно 1072, то есть коду этой буквы.
Таким образом, мы можем использовать оператор switch, чтобы назначить различные действия в зависимости от кода нажатой клавиши:
switch(window.event.keyCode) {
case 1072:
// какие-то действия
case 1073:
// какие-то действия
и т.д.
Чтобы прокрутить страницу к заданному элементу, можно воспользоваться методом scrollIntoView(). Например, если мы напишем
document.all.BukvaA.scrollIntoView();
то в результате страница будет прокручена так, что якорь BukvaA окажется в верхней части окна броузера.
Учет раскладки клавиатуры
Теперь надо подумать еще о том, что пользователь может забыть переключиться на русскую раскладку клавиатуры. Давайте не будем заставлять его это делать. Поскольку мы знаем, что на одной клавише с русской буквой а расположена буква f, на одной клавише с б — знак < и т. д., мы можем осуществить проверку не только кодов букв а, б, в, г, д, е, но и кодов символов f, <, d, u, I, t. Можно написать, например, так:
case 1072:
case 102:
document.all.BukvaA.scrollIntoView();
break;
case 1073:
case 44:
document.all.BukvaB.scrollIntoView();
break;
и т.д.
В этом случае прокрутка к букве а осуществится, даже если пользователь нажмет клавишу с буквой а или f, забыв переключиться на русскую раскладку клавиатуры. Аналогично можно осуществить прокрутку и к другим буквам. Чтобы при нажатии какой-нибудь иной клавиши вернуться к началу файла, можно присвоить это возвращение случаю «default»:
default:
document.all.Top.scrollIntoView ();
break;
Вот, собственно говоря, и все. Но чтобы изучить еще некоторые обработчики событий, давайте добавим еще эффект уменьшения яркости текста во время нажатия клавиши. Так обращают внимание пользователя на то, что «что-то происходит» (а именно: прокрутка). Для этого нужно использовать обработчики событий, реагирующие раздельно на нажатие и на отпускание клавиши. Они называются, соответственно: onKeyDown и onKeyllp:
<BODY onKeyPress="press()" onKeyDown="this.style.color=' gray' " onKeyUp="this.style.color='black'">
Теперь во время нажатия на клавишу цвет текста изменится на серый, а после отпускания клавиши — обратно на черный. Как видите, ничего сложного.
Подсказка для читателя
И в качестве последнего штриха давайте добавим подсказку для пользователя. Пусть, когда он начнет прокручивать страницу вручную (с помощью полосы прокрутки), в строке состояния отобразится такая подсказка: Вы можете перемещаться к нужной букве, используя клавиатуру!. Это можно сделать, используя обработчик событий, реагирующий на прокрутку страницы (есть и такой!). Он называется onScroll:
<BODY onKeyPress="press()" onKeyDown="this.style.color=' gray' "onKeyUp="this.style.color='black'" onScroll="window.status='Вы можете перемещаться к нужной букве, используя клавиатуру!'">
Кстати, один раз появившись, подсказка так и останется в строке состояния, но в данном случае в этом нет ничего плохого. Строка состояния — место не самое заметное, так что подсказка в ней выглядит вполне корректно. Вот чего делать не надо, так это использовать бросающиеся в глаза методы типа alert:
<BODY onKeyPress="press()" onKeyDown="this.style.color='gray' " onKeyUp="this.style.color=' black' " onScroll="alert('Вы можете перемещаться к нужной букве, используя клавиатуру!')">
В этом случае при попытке прокрутки страницы вручную пользователь сразу же получит окно-предупреждение. Если же он просто хочет почему-либо использовать ручную прокрутку, это окно будет его раздражать и мешать работе. Так что предыдущее решение как нельзя более подходит для данного случая — небольшая подсказка в строке состояния и все.
Ладно, давайте посмотрим, что у нас получилось. Кстати, по сравнению с текстом, приведенным в Главе 2, здесь введено еще несколько усовершенствований, связанных с использованием таблицы стилей. Например, нет необходимости каждый термин заключать в теги <В> и </В>. Вместо этого для тега <DT> заранее определено стилевое свойство font-weight: bold;.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <ТITLЕ>Словарь терминов</TITLЕ> <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><А NАМЕ="Тор">Словарь терминов</А></Н1> <HR ALIGN="left" WIDTH="40%"> <НЗ> <А HREF="#BukvaA">A</A> <А HREF="#BukvaB">B</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></H1> <DL> <DT><A NAME="avtentich">ABTEHTИЧECKИЙ КАДАНС</А> <DD>кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой <DT><A NAME="aliquot">АЛИКВОТНЫЕ СТРУНЫ</А> <DD>резонирующие струны, к которым исполнитель не прикасается во время игры <DT><A NAME="atakta">ATAKTA</A> <DD>гармонический элемент на басу нижнего или верхнего вводного тона </DL> <SMALL><A HREF="#Top">B начало</А></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaB">Б</A></H1> <DL> <DT><A NAME="bagatel">БAГATEЛЬ</A> <DD>небольшая нетрудная для исполнения пьеса <DT><A NAME="bartok">BAPTOKOBCKOE ПИЦЦИКАТО</А> <DD>сильный щипок струны с последующим ударом о струны о гриф <DT><A NАМЕ="bonang">БОНАНГ</А> <DD>набор из 10-12 гонгов разного размера </DL> <SMALL><A HREF="#Top">B начало</А> </SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaV">B</A></H1> <DL> </DL> <SMALL><A HREF="#Top">B начало</А></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaG">Г</A></H1> <DL> </DL> <SMALL><A HREF="#Top">B начало</А></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaD">Д</A></H1> <DL> </DL> <SMALL><A HREF="#Top">B начало</А></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaE">E</A></H1> <DL> </DL> <SMALL><A HREF="#Top">B начало</А></SMALL> </BODY> </HTML> |
Итак, мы познакомились со всеми основными обработчиками событий. Конечно, существуют и другие обработчики, но они применяются реже. Полный их список вы сможете найти в Приложении 1.
