Интернет Университет информационных технологий www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Основы web-технологий
Глава 1.
Введение в HTML-разметку
Глава 2.
Применение каскадных таблиц стилей
Глава 3.
JavaScript
  13.   Назначение и применение JavaScri...
  14.   Программируем свойства окна брау...
  15.   Программируем формы
  16.   Программируем графику
  17.   Программируем гипертекстовые переходы
  18.   Программируем "за кадром"
Глава 4.
Интерфейс Web-приложений
      Экзамен
      Ссылки к курсу

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

Основы web-технологий
Глава 3. JavaScript версия для печати: HTML, PDF
Лекция #17: Программируем гипертекстовые переходы Страницы: « 1 2 вопросы »

Обработка событий 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.

Перейти к вопросам »
версия для печати: HTML, PDF
Страницы: « 1 2 вопросы »
  Основные понятия
Гипертекстовая ссылка, Link, HREF, Area, массив, коллекция.
 
  Информация о лекции
В этой лекции рассматриваются вопросы построения динамических списков гипертекстовых ссылок и программирования гипертекстовых переходов в зависимости от условий просмотра HTML-страниц и действий пользователей.
 
  Информация о главе
Глава 3. JavaScript
Курс посвящен изучению языка программирования JavaScrip. Главное внимание уделяется логике разработки JavaScript-кода и основным принципам его использования на страницах World Wide Web.
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS. Допущено УМО в области прикладной информатики для студентов высших учебных заведений, обучающихся по специальности 351400 "Прикладная информатика".
Dynamic HTML
Айзекс С., BHV-Санкт-Петербург.
Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript
Коржинский С.Н., КноРус.
Практические занятия по HTML. Краткий курс
Будилов В.А., Наука и техника.
все книги по курсу »