Электронная библиотека книг Александра Фролова и Григория Фролова.
 
Библиотека
Братьев
Фроловых
Электронная библиотека книг Александра Фролова и Григория Фролова.
Библиотека системного программиста
Программирование на JAVA
ПК. Шаг за шагом
Другие книги
Восстановление данных
Антивирусная защита
Статьи для
программистов
Пользователю компьютера

Сценарии JavaScript в активных страницах Web

© Александр Фролов, Григорий Фролов
Том 34, М.: Диалог-МИФИ, 1998, 288 стр.

[Назад] [Содеожание] [Дальше]

Объект document

Специально для работы с документами HTML в языке JavaScript имеется отдельный объект с названием document. Пользуясь его свойствами и методами, сценарий JavaScript может получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа. В первой главе нашей книги мы уже применяли один из методов объекта document с именем write для записи строки в тело документа HTML.

Когда в 29 томе “Библиотеки системного программиста” мы рассказывали о документах HTML, то говорили, что такие документы состоят из заголовка и тела документа. Заголовок определяется при помощи оператора языка HTML <HEAD>, а тело документа - при помощи оператора <BODY>. Прежде чем мы перейдем к описанию свойств и методов объекта document, рассмотрим назначение отдельных параметров оператора <BODY>.

В общем виде этот оператор выглядит следующим образом:


<BODY
   BACKGROUND="Фоновое_изображение"
   BGCOLOR="Цвет_фона"
   TEXT="Цвет_текста"
   LINK="Цвет_непосещенных_ссылок"
   ALINK="Цвет_активизированных_ссылок"
   VLINK=" Цвет_посещенных_ссылок "
   onLoad="Обработчик_события_при_загрузке_документа"
   onUnload="Обработчик_события_при_выгрузке_документа">
</BODY>

Описание параметров оператора приведено ниже:

Параметр

Описание

BACKGROUND

С помощью этого параметра можно указать адрес URL изображения, заполняющего фон тела документа

BGCOLOR

Параметр BGCOLOR применяется в тех случаях, когда фон документа необходимо раскрасить в какой-либо цвет. Цвет задается в виде "#rrggbb", где константы rr, gg и bb - соответственно, красная, зеленая и голубая компоненты цвета. Значение констант может находиться в диапазоне от 0 до FF (в шестнадцатеричном виде). Цвет может также задаваться символическими константами, такими как red или white

TEXT

Цвет текста. Задается таким же образом, что и цвет фона BGCOLOR

LINK

Параметр LINK определяет цвет ссылок, размещенных в документе HTML, и еще не посещенных пользователем

ALINK

Этот параметр определяет цвет ссылок, выбранных пользователем

VLINK

Параметр VLINK определяет цвет ссылок, размещенных в документе HTML, которые уже посещались пользователем ранее

onLoad

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

onUnload

Аналогично предыдущему, однако обработчик события получит управление при удалении документа из окна браузера

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

Свойства объекта document

Перечислим свойства объекта document, доступные сценарию JavaScript:

Свойство

Описание

alinkColor

Содержимое параметра ALINK

anchors

Массив локальных меток, размещенных в документе. Эти метки применяются для организации ссылок внутри документа

applets

Массив объектов, соответствующих аплетам Java, расположенным в документе HTML

bgColor

Содержимое параметра BGCOLOR

cookie

Значение cookie для текущего документа. О том, что это такое, мы расскажем в последней главе нашей книги

embeds

Массив объектов plug-in, содержащихся в документе HTML

fgColor

Содержимое параметра TEXT

forms

Массив, содержащий в виде объектов все формы, расположенные в документе HTML

images

Массив растровых изображений, включенных в документ

lastModified

Дата последнего изменения документа HTML

linkColor

Содержимое параметра LINK

links

Массив, содержащий все ссылки в документе HTML

location

Полный адрес URL документа HTML

referrer

Адрес URL вызывающего документа HTML

title

Заголовок документа, заданный с помощью оператора <TITLE>

URL

Полный адрес URL документа HTML

vlinkColor

Содержимое параметра VLINK

Объект document может содержать в себе другие объекты, доступные как свойства:

Свойство

Описание

anchor

Локальная метка, определенная в документе HTML с помощью оператора <A>

form

Форма, определяемая в документе HTML с помощью оператора <FORM>

history

Список адресов URL, посещенных пользователем

link

Текст или изображение, играющее роль гипертекстовой ссылки. Создается с помощью оператора языка HTML <A>, в котором дополнительно задаются обработчики событий onClick и onMouseOver

Методы объекта document

Сценарии JavaScript могут вызывать следующие пять методов, определенных в объекте document:

Метод

Описание

clear

Удаление содержимого документа из окна просмотра

close

Закрытие потока данных, открытого для документа методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока

open

Открытие выходного потока для записи в документ HTML данных типа MIME при помощи методов write и writeln

write

Запись в документ произвольной конструкции языка HTML

writeln

Аналогично предыдущему, но в конце строки добавляется символ новой строки

Цветовое оформление документа

Большинство свойств объекта objects доступно сценарию JavaScript как для чтения, так и для записи. Сначала мы попробуем динамически изменить цветовое оформление документа HTML, показанного на рис. 2.18.

Рис. 2.18. Документ HTML с цветовым оформлением, измененным при помощи сценария JavaScript

Сценарий изменил пять свойств документа HTML - цвет фона и текста, а также цвета посещенных, не посещенных и выбранных пользователем ссылок (листинг 2.8).

Листинг 2.8. Файл chapter2/ColorLinks/ColorLinks.html


<HTML>
  <HEAD>
    <TITLE>Color Links</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--

      document.bgColor = "#00FF80";
      document.fgColor = "#800080";
      document.linkColor  = "#000000";
      document.alinkColor = "#FF0000";
      document.vlinkColor = "#4000FF";

    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <H1>Изменение цветового оформления</H1>
    <P>Посетите эти серверы:
    <P><A HREF="http://www.glasnet.ru/~frolov/index.html">Наша домашняя страница</A>
    <P><A HREF="http://www.auramedia.ru">Каталог программ Auramedia</A>
    <P><A HREF="http://www.microsoft.com/java/">Страница сервера Microsoft про Java</A>
    <P><A HREF="ColorLinks.html#Локальный раздел">Локальный раздел</A>
    <HR>
    <H1><A NAME="Локальный раздел">Локальный раздел</A></H1>
    <P>Этот локальный раздел вы можете просмотреть, даже если ваш компьютер не подключен к Internet
  </BODY>
</HTML>

Обратите внимание, что наш сценарий переопределяет цвет фона, заданный параметром BGCOLOR в операторе <BODY>:


document.bgColor = "#00FF80";

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

Ссылки и метки в документе

Как мы уже рассказывали в 29 томе “Библиотеки системного программиста” с названием “Сервер Web своими руками”, для того чтобы вставить в документ HTML ссылку или локальную метку, необходимо использовать оператор <A>. В общем виде этот оператор представлен ниже:


<A HREF=Адрес URL или локальная метка
   NAME="Имя локальной метки"
   TARGET="Имя окна"
   onClick="Обработчик события: щелчок по ссылке"
   onMouseOver="Обработчик события: курсор над ссылкой">
   Текст ссылки
</A>

Описание параметров оператора <A> мы привели ниже:

Параметр

Описание

HREF

Параметр HREF задает адрес URL или имя локальной метки документа, куда будет сделан переход по ссылке

NAME

Если указан параметр NAME, оператор <A> определяет локальную метку. Значение этого параметра задает имя метки

TARGET

Параметр TARGET задает имя окна, куда будет загружен документ при выполнении ссылки. Это может быть имя существующего окна фрейма, определенного с помощью оператора <FRAMESET>, или одним из следующих зарезервированных имен - _top, _parent, _self, или _blank

onClick

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

onMouseOver

Аналогично предыдущему, однако обработчик события получит управление, когда пользователь разместит курсор мыши над ссылкой

Для каждой ссылки, размещенной в документе HTML, создается отдельный объект. Все такие объекты находятся в объекте документа Document как элементы массива links.

Сценарий JavaScript может определить свойства каждой ссылки, расположенной в документе HTML, анализируя элементы объекта links. Вот список этих свойств:

Свойство

Описание

hash

Имя локальной ссылки, если она определена в адресе URL

host

Имя узла и порт, указанные в адресе URL

hostname

Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP

href

Полный адрес URL

pathname

Путь к объекту, указанный в адресе URL

port

Номер порта, используемого для передачи данных с сервером, указанным в данной ссылке

protocol

Строка названия протокола передачи данных (включающая символ “двоеточие”), указанного в ссылке

search

Строка запроса, указанная в адресе URL после символа “?”

target

Значение параметра TARGET, заданное в ссылке

length

Количество элементов в массиве links, то есть количество ссылок в текущем документе HTML

Рассмотрим пример сценария JavaScript, работающего со ссылками как с элементами массива links.

Мы приведем пример документа, с формой, списком и кнопкой Jump. Сценарий JavaScript заполняет список ссылками, размещенными в документе HTML. Внешний вид этого документа показан на рис. 2.19.

Рис. 2.19. Документ со списком расположенных в нем ссылок

Выбрав из списка ссылку и нажав кнопку Jump, вы загрузите в окно браузера документ, указанный в этой ссылке или запустите почтовую программу для подготовки и отправки сообщения (если выбрана ссылка на адрес электронной почты).

Так как список ссылок формируется сценарием динамически, новые ссылки, добавленные в документ HTML, появятся в списке автоматически без дополнительных усилий по редактированию сценария.

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

Рис. 2.20. Детальная информация о ссылках

Что за информация здесь отображается?

Вначале выводятся свойства перовй ссылки, содержащей адрес главной страницы нашего сервера Web в сети Internet:

 

http://www.glasnet.ru/~frolov/index.html
host: www.glasnet.ru:80
hostname: www.glasnet.ru
href: http://www.glasnet.ru/~frolov/index.html
pathname: ~frolov/index.html
port: 80
protocol: http:
search:
target:

Так как в этой ссылке указан полный адрес URL, включающий путь к файлу документа index.html, то этот путь записывается в свойство с именем pathname.

Хотя порт, с использованием которого устанавливается соединение с сервером Web, не указан, в свойства host и port записывается значение, применяемое для этой цели по умолчанию, а именно 80.

Рассмотрим следующую ссылку:

 

http://www.auramedia.ru/
host: www.auramedia.ru:80
hostname: www.auramedia.ru
href: http://www.auramedia.ru/
pathname:
port: 80
protocol: http:
search:
target:

Здесь путь к файлу документа HTML не указан, поэтому свойство pathname содержит пустую строку.

В ссылке на сервер Microsoft мы указали путь к каталогу java:

 

http://www.microsoft.com/java/
host: www.microsoft.com:80
hostname: www.microsoft.com
href: http://www.microsoft.com/java/
pathname: java/
port: 80
protocol: http:
search:
target: newwnd

Этот частичный путь оказался записанным в свойство pathname. Кроме того, для отображения содержимого сервера Microsoft должно быть создано новое окно. Имя этого окна задано как newwnd в параметре TARGET оператора <A>. С помощью этого оператора мы разместили ссылку в документе HTML. Как и следовало ожидать, имя окна оказалось записано в свойство target.

Последняя ссылка - это адрес электронной почты:

mailto:frolov@glas.apc.org
host: glas.apc.org
hostname: glas.apc.org
href: mailto:frolov@glas.apc.org
pathname:
port: 0
protocol: mailto:
search:
target:

В свойстве protocol данной ссылки записана строка “mailto:”.

Рассмотрим теперь исходный текст документа HTML, содержащий сценарий JavaScript, работающий со ссылками (листинг 2.9).

Листинг 2.9. Файл chapter2/LinksList/LinksList.html


<HTML>
  <HEAD>
    <TITLE>Links and Anchors</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--

    function urlJump()
    {
      var szNewURL="";
      szNewURL = 
         document.links[Sel.ListOfLinks.selectedIndex];
      window.location.href=szNewURL;
    }

    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <H1>Просмотр ссылок</H1>

    <FORM NAME="Sel">
      <SELECT NAME="ListOfLinks">
      </SELECT>
      <INPUT TYPE="button" VALUE="Jump!" onClick="urlJump();">
    </FORM>

    <P>Посетите эти серверы:
    <P><A HREF="http://www.glasnet.ru/~frolov/index.html">Наша домашняя страница</A>
    <BR><A HREF="http://www.auramedia.ru">Каталог программ Auramedia</A>
    <BR><A HREF="http://www.microsoft.com/java/" TARGET="newwnd">Страница сервера Microsoft про Java</A>
    <P>Пишите нам по адресу: <A HREF="mailto:frolov@glas.apc.org">frolov@glas.apc.org</A>

    <HR>
    <H1>Список ссылок</H1>
    <P>Этот список сформирован динамически сценарием JavaScript</P>
    <SCRIPT LANGUAGE="JavaScript">
    <!--

    elem = new Array();

    for(i=0; i<document.links.length; i++)
    {
      elem[i] = new Option("Elem" + i, i, false, false);
      Sel.ListOfLinks.options[i] = elem[i];
      Sel.ListOfLinks.options[i].text = document.links[i];

      document.write("<HR>");
      var szText=document.links[i] + "<BR>";
      document.write(szText.bold());

      document.write("host: ".italics() + document.links[i].host + "<BR>");
      document.write("hostname: ".italics() + document.links[i].hostname + "<BR>");
      document.write("href: ".italics() + document.links[i].href + "<BR>");
      document.write("pathname: ".italics() + document.links[i].pathname + "<BR>");
      document.write("port: ".italics() + document.links[i].port + "<BR>");
      document.write("protocol: ".italics() + document.links[i].protocol + "<BR>");
      document.write("search: ".italics() + document.links[i].search + "<BR>");
      document.write("target: ".italics() + document.links[i].target + "<BR>");
    }

    Sel.ListOfLinks.selectedIndex=0;

    // -->
    </SCRIPT>
  </BODY>
</HTML>

В секции заголовка документа HTML определена функция urlJump, загружающая в окно браузера объект, соответствующий выбранной в списке ссылке:


function urlJump()
{
  var szNewURL="";
  szNewURL = 
     document.links[Sel.ListOfLinks.selectedIndex];
  window.location.href=szNewURL;
}

Список ссылок, а также кнопка Jump, служащая для активизации выбранной ссылки, определена следующим образом:


<FORM NAME="Sel">
  <SELECT NAME="ListOfLinks">
  </SELECT>
  <INPUT TYPE="button" VALUE="Jump!" onClick="urlJump();">
</FORM>

Имя формы, необходимое сценарию JavaScript для доступа к списку и кнопке, определено в параметре NAME оператора <FORM> как Sel.

Список с именем ListOfLinks создается оператором <SELECT>. Первоначально в списке нет ни одного элемента. Все элементы будут добавлены в список сценарием JavaScript.

Кнопка Jump активизирует фукнцию urlJump, для чего в ее определении указан обработчик события onClick.

Обратите внимание на то, как функция urlJump адресуется к выбранному элементу списка:


szNewURL = document.links[Sel.ListOfLinks.selectedIndex];

Здесь мы взяли форму Sel и указали имя списка ListOfLinks как имя одного из свойств формы. Номер выделенного элемента списка находится в свойстве списка с именем selectedIndex.

Наш сценарий заполняет массив ссылок links и список Sel.ListOfLinks таким образом, что первый элемент массива links соответствует первой ссылке в списке, второй элемент массива - второму элементу и так далее. Поэтому выражение Sel.ListOfLinks.selectedIndex является номером ссылки в массиве links, которую необходимо активизировать. Функция urlJump записывает эту ссылку в переменную szNewURL, а затем устанавливает значение свойства window.location.href.

Рассмотрим теперь сценарий JavaScript, определенный в теле документа HTML.

Прежде всего, в этом сценарии мы создаем массив elem:


elem = new Array();

Этот массив предназначен для хранения элементов динамически формируемого списка, определенного пустым в форме Sel.

Далее в сценарии располагается цикл по всем ссылкам, размещенным в документе HTML:


for(i=0; i<document.links.length; i++)
{
  . . .
}

Количество ссылок находится в свойстве length объекта links, поэтому переменная цикла i изменяет свое значение от 0 до document.links.length.

В цикле мы создаем новый элемент списка и записываем в него текст ссылки:


elem[i] = new Option("Elem" + i, i, false, false);
Sel.ListOfLinks.options[i] = elem[i];
Sel.ListOfLinks.options[i].text = document.links[i];

Способ создания элемента списка будет подробно описан в главе, посвященной работе сценариев JavaScript с формами. Здесь мы только отметим, что текстовая строка, соответствующая ссылке, извлекается из массива links как document.links[i].

Далее после записи в документ HTML разделительной линии наш сценарий записывает в него текст ссылки, выделяя его жирным шрифтом:


document.write("<HR>");
var szText=document.links[i] + "<BR>";
document.write(szText.bold());

Вслед за этим в документ HTML записываются все свойства ссылки, извлеченные из текущего элемента массива links. Например, имя узла и номер порта извлекаются и записываются в документ HTML следующим образом:


document.write("host: ".italics() + document.links[i].host + "<BR>");

Последнее, что делает наш сценарий уже после завершения цикла, это выделение первого элемента в списке Sel.ListOfLinks:


Sel.ListOfLinks.selectedIndex=0;

Для этого номер выделяемого элемента (в нашем случае это 0) записывается в свойство списка с именем selectedIndex.

[Назад] [Содеожание] [Дальше]


Создание интернет-магазинов: http://www.shop2you.ru/ © Александр Фролов, Григорий Фролов, 1991-2016