Интернет Университет информационных технологий  Расскажи
про свой ВУЗ!
www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Введение в JavaScript
(архив: ZIP)
1.   Назначение и применение JavaScri...
2.   Программируем свойства окна брау...
3.   Программируем формы
4.   Программируем графику
5.   Программируем гипертекстовые переходы
6.   Программируем "за кадром"
    Экзамен
    Сдать экзамен экстерном
    Литература

  Общение
однокурсники
форум по курсу
вопрос преподавателю
мнения о курсе

Введение в JavaScript
Лекция #5: Программируем гипертекстовые переходы
Страницы: « | 1 | 2 | вопросы | » | HTML для печати | PDF | ZIP
  Если Вы заметили ошибку на этой странице - сообщите нам.  

Обработка событий Mouseover и Mouseout

Эти два события изо всех событий, которые обрабатываются на страницах Web, используются чаще всего. Именно они позволяют обесцвечивать и проявлять картинки, а также менять содержание поля status. Первое событие генерируется браузером, если курсор мыши указывает на гипертекстовую ссылку, а второе — когда он покидает гипертекстовую ссылку. Рассмотрим пример с записной книжкой, но только для проявления меню второго уровня будем использовать обработчик события onMouseover:

<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=0 ALIGN=center>
<TR>
<TD>
<A HREF="javascript:void(0);" onMouseover="line2(0);return true;">
<IMG SRC=addrpho.gif BORDER=0></A></TD>
...
</TR>
</TABLE>

В качестве обработчика события мы вызываем функцию line2(), которая идентична line1() из предыдущего примера. В примере IMG перенесен на новую строку для наглядности. На самом деле так поступать не следует — при интерпретации HTML-парсером могут появиться неучтенные пропуски, которые не предусмотрены автором страницы. (открыть)

Мы рассмотрели редкий пример, в котором не требуется возврата предыдущего значения после прохода мыши по гипертекстовой ссылке. По этой причине в гипертекстовой ссылке не применялся второй обработчик onMouseout. В большинстве случаев, например при расцвечивании картинки, он требуется:

<A HREF="javascript:void(0);" onMouseover="document.pic1.src='image.gif';return true;" onMouseout="document.pic1.src='image.gif';return true;"><IMG NAME=pic1 src=image.gif BORDER=0></A>

Рассматривая предыдущий пример, мы не обсудили использование функции return. При работе с графикой значение, которое возвращает обработчик события, на результат отображения не влияет. Но если изменять значение поля статуса браузера, то изменения произойдут только в случае возврата значения true. Более подробно об этом рассказано в разделе "Поле статуса".

Обработка события click

Вообще говоря, обработчик события click в современном JavaScript не нужен. Можно прекрасно обойтись URL-схемой javascript, которая была специально придумана для перехвата события гипертекстового перехода. Обработчик onClick следует рассматривать как реликт, доставшийся нам в наследство от предыдущих версий языка, который поддерживается в версиях Netscape Navigator и Internet Explorer.

Основная задача обработчика данного события — перехват события гипертекстового перехода. Если функция обработки данного события возвращает значение true, то переход происходит, при значении false — не происходит:

Отменим переход в начало страницы описания события обработчика onClick:

<A HREF=#click onClick="window.alert('Нет перехода на #click'); return false;">onClick</A>

А теперь дадим пользователю право выбора перехода в начало страницы посредством окна подтверждения:

<A HREF=#top onClick="return window.confirm('Перейти в начало страницы?');">переход в начало страницы</A>

Обратите внимание на место применения функции window.confirm() — аргумент команды return. Логика проста: функция возвращает значение true или false, и именно оно подставляется в качестве аргумента. Если просто написать функцию без return, то ничего работать не будет.

Можно ли вообще обойтись одним обработчиком onClick без использования атрибута HREF? Видимо, нет. Первое, что необходимо браузеру — это определение типа контейнера A. Если в нем есть только атрибут NAME, то это якорь, если присутствует атрибут HREF — ссылка. Это два разных объекта. Они имеют различные составляющие, в том числе и обработчики событий. В контексте текущего раздела нам нужна именно ссылка, т.е. контейнер A с атрибутом HREF. Проверим наше предположение:

<A ID=red onClick="window.alert("тест");return false;">
Нет атрибута HREF
</A>

Текст "Нет атрибута HREF" — это якорь. Обработчик на нем не работает, так как на него нельзя указать мышью.

<A HREF="" id=red onClick="window.alert('URL:'+this.href); return false;">
Нет атрибута HREF
</A>

Теперь мы указали пустую ссылку (см. поле статуса). Содержание окна — это база URL.

Схема URL- "javascript:..."

Для программирования гипертекстовых переходов в спецификацию универсального идентификатора ресурсов (URL) разработчики JavaScript ввели отдельную схему по аналогии со схемами http, ftp и т.п. — javascript. Эта схема URL упоминается в разделе "Размещение JavaScript-кода" в контексте передачи управления JavaScript-интерпретатору от HTML-парсера. Кроме того, о программировании гипертекстового перехода рассказано в разделе "Обработка события click". Теперь мы рассмотрим более общий случай обработки события гипертекстового перехода при выборе гипертекстовой ссылки.

Схема URL javascript в общем виде выглядит следующим образом:

<A HREF="javascript:...;">...</A>
<FORM ACTION="javascript:...">

Одним словом, в любом месте, где мы используем URL, вместо любой из стандартных схем можно применить схему javascript. Единственное исключение составляет контейнер IMG. URL в нем используется в атрибуте SRC. Принять определенное значение SRC может при помощи либо назначения в IMG, либо обращения к свойству IMG. По большому счету, применение JavaScript в SRC может только проинициализировать картинку. Дальнейшее ее изменение описано в разделе "Программируем графику". Рассмотрим пример простой гипертекстовой ссылки:

<A HREF="javascript:window.alert('window.alert() изменяет HREF');void(0);">
Заменили обычную ссылку
</A>

Можно выполнить аналогичную операцию, но над картинкой:

var flag=0;
function ichange()
{
if(flag==0)
{
document.i1.src="image1.gif"; flag=1;
}
else
{
document.i1.src="image1.gif"; flag=0;
}
}
...
<A HREF="javascript:ichange();void(0);">
<IMG NAME=i1 SRC=image2.gif BORDER=0>
</A>

Попробуем теперь выполнить JavaScript-код применительно к контейнеру FORM:

<FORM NAME=f action="javascript:window.alert(document.f.fi0.value);void(0);" METHOD=post>
Введите текст для отображения в окне и нажмите ввод:
<INPUT NAME=fi0 SIZE=20 MAXLENGTH=20>
</FORM>

Следует отметить, что все-таки использование схемы javascript в этом месте HTML-разметки выглядит неудачно. Для того чтобы все работало так, как задумано автором, приходится использовать метод POST. Гораздо логичнее применить обработчик события onSubmit.

Перейти к вопросам »
  Если Вы заметили ошибку на этой странице - сообщите нам.  
Страницы: « | 1 | 2 | вопросы | » | HTML для печати | PDF | ZIP
  Спецпредложения
Для тех, кто желает поддержать проект:
Майки с символикой INTUIT.ru
Все книги+CD со скидкой более 60%
 
  Ключевые слова
Гипертекстовая ссылка, Link, HREF, Area, массив, коллекция.
 
  Информация о лекции
В этой лекции рассматриваются вопросы построения динамических списков гипертекстовых ссылок и программирования гипертекстовых переходов в зависимости от условий просмотра HTML-страниц и действий пользователей.
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS.
все книги по курсу »