Иллюстрированный самоучитель по созданию сайтов


:: Актуально ::

кулинарный мастер-класс в москве Вот только рецепты блюд, технологии их приготовления и способы подачи постоянно меняются. Авторская кулинарная школа в Москве p.ro. stranstvo помогает держать руку на пульсе и быть в курсе последних веяний в области приготовления и подачи пищи. В школе кулинарного искусства есть чему поучиться и любителям, и профессионалам, желающим создать собственную авторскую кухню.
 

:: Рекомендуем ::



 

:: Статистика ::

Яндекс.Метрика

 

 

 

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>

Итак, мы познакомились со всеми основными обработчиками событий. Конечно, существуют и другие обработчики, но они применяются реже.


:: Навигация ::

Главная

1. Как создают веб-страницы
1.1 Как создают веб-страницы
1.2. Как разместить веб-страничку на сервере
1.3. Как написать веб-страницу
1.4. Обзор программ для просмотра веб-страниц
1.5. Обзор программ для создания веб-страниц
1.6.(Часть-I) Создание веб-страниц при помощи программы Allaire Homesite/Cold Fusion
1.6.(Часть-II)Автоматизация ввода
2. Основные средства языка htmL

2.1. Простейшее форматирование текста
2.2. Самое главное на любой веб-странице — гиперссылки
2.3. Как создать списки на веб-странице
2.4. Создание таблиц
3. Графика на веб-странице
3.1.(Часть-I) Основные способы применения графики
3.1.(Часть-II)Изображение-карта
3.2. Графические форматы Интернета
3.3. Графические элементы оформления веб-страниц
3.4. Графические маркеры
3.5. Подготовка рисунков в программе Xara Webstyle
3.6.(Часть-I)Подготовка рисунков в программе Adobe Photoshop
3.6.(Часть-II)Украшение изображения мелкими деталями
4. Оформление веб-страницы с использованием стилей
4.1. Оформление с помощью атрибута STYLE
4.2. Определение стилей в специальной таблице
4.3. Обзор других возможностей стилевых таблиц
5. Использование звука на веб-странице
5.1. Добавление звукового оформления
5.2. Программы для сжатия звуковых фрагментов
5.3. Маленькие хитрости
6. Динамические веб-страницы на основе JavaScript
6.1. Простейшие примеры
6.2. Как писать собственные функции
6.3. Динамическое изменение внешнего вида страницы 6.4. Другие возможности языка JavaScript
7. Веб-страницы, реагирующие на действия пользователя
7.1. Ввод данных пользователем в формы htmL
7.2.(Часть-I)Страница, управляемая при помощи мыши
7.2.(Часть-II)Динамическое управление позиционированием элементов
7.3. Страница, управляемая с клавиатуры
7.4.(Часть-I)Динамическое отображение текста веб-страницы
7.4.(Часть-II)Использование других свойств при работе с текстом
7.5. Динамическое изменение графических элементов веб-страницы
8. Размещение элементов на веб-странице и навигация по сайту
8.1. Использование структуры фреймов
8.2. Управление расположением элементов веб-страницы с помощью таблиц
9. Дополнительные возможности формирования веб-страниц
9.1. Пример использования элемента управления Tabular Data
9.2. Пример простейшего серверного сценария

Наш белый каталог сайтов | Добавить сайт
 
Гостевая книга
Контакты
Добавить в избраное


:: Реклама ::

> | Цікаві статті | Інетреклама <+ Красотки http://xxx.spb-relax.net свели меня с ума!
<


:: Наша кнопка ::

Получить код:

Поддержите наш ресурс - разместите нашу кнопку на своем сайте


:: Друзья ::

SiteUa - Створити свій сайт безкоштовно
1
 

 

 

 


Copyright © создать свой сайт, 2008-2024