Интернет Университет информационных технологий 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 вопросы »

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

Замечание: начиная с версий 4.0 Microsoft Explorer это стало возможным, но так как здесь речь идет о классическом JavaScript и его применении к различным объектным моделям только в одной интерпретации, данную возможность мы рассматривать не будем.

Кроме графики, на странице есть еще несколько встроенных массивов объектов, элементы которых можно изменять. Один из них — массив гипертекстовых ссылок.

Гипертекстовая ссылка относится к классу объектов URL. К этому классу объектов относятся:

  • Location;
  • Area;
  • Link.

Область применения URL на HTML-страницах гораздо шире этих трех позиций. Чаще всего мы сталкиваемся с ним при программировании:

  • графики (атрибут SRC контейнера IMG);
  • форм (атрибут ACTION контейнера FORM);
  • ссылок (атрибут HREF контейнера A);
  • "чувствительных" картинок (атрибут HREF контейнера AREA).

Первые две позиции подробно обсуждаются в разделах "Программируем картинки" и "Программируем формы". В данном разделе мы сосредоточимся на программировании собственно гипертекстовых переходов и "чувствительных" картинок. Но прежде рассмотрим объект URL.

Объект URL

Объект класса URL обладает свойствами, которые определены схемой URL. В качестве примера рассмотрим ссылку на применение атрибута SRC в контейнере IMG:

http://intuin.ru/help/index.html

Значения свойств

href: http://intuit.ru/help/index.html
protocol: http:
hostname: intuit.ru
host: intuit.ru:80
port: 80
pathname: help/index.html
search:  
hash:  

Обращение к свойству объекта класса URL выглядит как:

имя_объект_класса_URL.свойство

Например, так:

document.links[0].href
document.location.host
document.links[2].hash

Свойства объекта URL дают программисту возможность менять только часть URL – объекта (гипертекстовой ссылки, например). Наиболее интересно это выглядит в объекте Location, когда при изменении свойства происходит перезагрузка документа. Однако и при работе с обычными гипертекстовыми ссылками такая технология более предпочтительна, чем изменение всего URL целиком.

Здесь следует заметить, что чаще всего все-таки меняют весь URL. Это связано с тем, что такое действие более понятно с точки зрения HTML-разметки. Ведь у контейнера A нет атрибута PROTOCOL, но зато есть атрибут HREF.

Массивы встроенных гипертекстовых ссылок

К встроенным гипертекстовым ссылкам относятся собственно ссылки (<A HREF=...>...</A>) и ссылки "чувствительных" графических картинок. Они составляют встроенный массив гипертекстовых ссылок документа (document.links[]).

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

for(i=0;i<document.links.length;i++)
document.write(document.links[i].href+"<BR>");

Список ссылок:

http://www.intuit.ru/help/index.html
http://www.intuit.ru/help/terms.html
http://www.intuit.ru/help/shop.html

Вставим в документ контейнер MAP:

<MAP NAME=test>
<AREA SHAPE=rect COORDS="0,0,0,0" HREF="javascript:window.alert('Area_Link_1');void(0);">
<AREA SHAPE=rect COORDS="0,0,0,0" HREF="javascript:window.alert('Area_Link_2');void(0);">
</MAP>

И снова распечатаем массив ссылок:

links[0]:http://www.intuit.ru/help/index.html
links[1]:http://www.intuit.ru/help/terms.html
links[2]:http://www.intuit.ru/help/shop.html
links[3]:javascript:window.alert('Area_Link_1');void(0);
links[4]:javascript:window.alert('Area_Link_2');void(0);

Четыре новые ссылки — это ссылки из контейнера MAP, который не отображается, но ссылки из него попадают в массив встроенных ссылок. При этом, как в нашем случае, они могут попасть между обычными гипертекстовыми ссылками, если контейнер MAP расположить внутри текста документа. На данной странице он помещен перед контейнером SCRIPT, в котором мы распечатываем массив встроенных ссылок.

Замена атрибута HREF

В разделе "Программируем ссылки" мы перечислили свойства объекта класса Link. Теперь покажем, как при помощи JavaScript-кода можно ими управлять. Рассмотрим меню типа "записная книжка": (открыть)

Конечно, это не настоящая "записная книжка". Поле формы заполняется только при выборе гипертекстовой ссылки, расположенной над этим полем. Единственная цель данного примера — показать, как изменяется значение атрибута HREF (оно отображается в поле status окна браузера). Изменение производится посредством вызова функции:

function line(a)
{
if(a==0)
{
clear();
window.document.o0.src="fio.gif";
window.document.all['lo0'].href="javascript:window.document.f1.fi1.value="Фамилия И.О."; void(0);";
window.document.o1.src="rpho.gif";
window.document.all['lo1'].href="javascript:window.document.f1.fi1.value="253-93-10"; void(0);";
window.document.o2.src="hpho.gif";
window.document.all['lo2'].href="javascript:window.document.f1.fi3.value="253-93-12"; void(0);";
}
.....
}

В данном случае мы работаем с тремя элементами массива встроенных гипертекстовых ссылок: all['lo1'], all['lo1'] и all['lo2']. У каждого из них при вызове функции со значением аргумента a, равным 0, 1 и 2, соответственно, изменяем значение свойства href. Это свойство мы меняем целиком. URL можно менять и частично.

Изменение части URL

Гипертекстовая ссылка — это объект класса URL. У этого объекта можно изменять и другие свойства. Проиллюстрируем эту возможность при частичном изменении ссылки. Распечатаем сначала свойство, которое не зависит от протокола (в нашем случае от javascript) document.all.next.pathname: href:--> http://intuit.ru/help/index.html

pathname:--> help/index.html
Изменим теперь pathname:
document.all.next.pathname="test";
document.write(window.document.all.next.pathname);
href:--> http://intuit.ru:80/test
pathname--> test

Обратите внимание, что Internet Explorer самостоятельно добавил в ссылку номер порта. По этой причине использовать свойства, отличные от href, в ссылках, где используется схема javascript, не рекомендуется.

Перейти к следующей странице »
версия для печати: 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. Краткий курс
Будилов В.А., Наука и техника.
все книги по курсу »