2.5.4. Посилання і мітки в документі

Як уже рассказывалось, для того щоб вставити в документ HTML посилання або локальну мітку, необхідно використовувати оператор <А>. У загальному виді цей оператор поданий нижче

<A НRЕF=Адреса URL або локальна мітка

NАМЕ="Ім'я локальної мітки"

ТАRGЕТ="Ім'я вікна"

onClick="06pa6oтчик події: щиголь по посиланню" оnМоusеОvег="Оброблювач події: курсор над посиланням">

Текст посилання

</А>

Опис параметрів оператора <А> приведено нижче:

Параметр Опис

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

NAМЕ Якщо зазначений параметр NAME, оператор <А> визначає локальну мітку. Значення цього параметра задає ім'я мітки

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

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

OnMouseOver Аналогічно попередньому, проте оброблювач події одержить керування, коли користувач розмістить курсор миші над посиланням

Для кожного посилання, розміщеної в документі HTML, створюється окремий об'єкт. Всі такі об'єкти знаходяться в об'єкті документа Document як елементи масиву links.

Сценарій JavaScript може визначити властивості кожного посилання, розташованої в документі HTML, аналізуючи елементи об'єкта links. От список цих властивостей:

Властивість Опис

bash Ім'я локального посилання, якщо вона визначена в адресі URL

host Ім'я вузла і порт, зазначені в адресі URL

hostname Ім'я вузла і доменне ім'я вузла мережі. Якщо доменне ім'я недоступно, замість нього вказується адреса IP

href Повна адреса URL

pathname Шлях до об'єкта, зазначений в адресі URL

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

protocol Рядок назви протоколу передачі даних (включающая символ "двокрапка"), зазначеного в посиланні

search Рядок запиту, зазначений в адресі URL після символу ?

target Значення параметра TARGET, задане в посиланні

length Кількість елементів у масиві links, тобто кількість посилань у поточному документі HTML

Приклад документа, із формою, списком і кнопкою Jump заповнює список посиланнями, розміщеними в документі HTML.

Обравши зі списку посилання і натиснувши кнопку Jump, можна завантажити у вікно браузера документ, зазначений у цьому посиланні, або запустити поштову програму для підготування і відправлення повідомлення (якщо обране посилання на адресу електронної пошти).

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

У нижній частині цього ж документа HTML сценарій відображає детальну інформацію з кожного посилання, витягнуту з властивостей об'єктів класу links, що відповідають посиланням.

Спочатку виводяться властивості першого посилання, що містить адресу головної сторінки нашого серверу 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/

http: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/

http:www.microsoft.com:80

hostname:www.microsoft.com

href:http://www.microsoft.com/java/

pathname:Java/

port:80

protocol:http:

search:

target:newwnd

Э той частковий шлях виявився записаним у властивість pathname. Kроме того, для відображення вмісту серверу Microsoft повинно бути створене нове вікно. Ім'я цього вікна задане як newwnd у параметрі TARGET оператора <А>. За допомогою цього оператора розміщене посилання в документі НTML. Ім'я вікна виявилося записано у властивість target.

Останнє посилання - це адреса електронної пошти:

mailto:frolov@glas.apc.org

host:glas.apc.org

hostnamailtoas.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.selected Index];

window.location.href=szNewURL;

}

//-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<Н1>Перегляд посилань</Н1>

<FORM NAME="Sel">

<SELECT NAME="ListOfLinks">

</SELECT>

<INPUT TYPE="button" VALUE="Jump!" onClick="urlJump();">

</FORM>

<Р>Відвідайте ці сервери:

<Р><А HREF="http://www.glasnet.ru/~frolov/index.html">Haшa домашня сторінка</А>

<BR><A HREF="http://www .auramedia.ru">Каталог програм Auramedia</A>

<BR><A HREF="http://www.microsoft.corn/Java/" TARGET="newwnd">Cтpaница серверу Microsoft про Java</A>

<Р>Пишіть нам за адресою: <А HREF="mailto:frolov@glas.арі.org">frolov@glas.apc.org</A>

<HR>

<Н1>Список посилань</Н1>

<Р>Цей список сформований динамічно сценарієм 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() + documerit. links [i] .target + "<BR>");

}

Sel.ListOfLinks.selectedIndex=0;

//-->

</SCRIPT>

</BODY>

</HTML>

У секції заголовка документа HTML визначена функція urlJump, що завантажує у вікно браузера об'єкт, що відповідає обраної в списку посиланню:

function urlJump()

{

var szNewURL="";

szNewURL =

document.links[Sel.ListOfLinks.selectedlndex];

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.

Функція urUump адресується до обраного елемента списку в такий спосіб:

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.

У циклі створюється новий елемент списку і записується в нього текст посилання:

elern[i] = new Option("Elem" + i, i, false, false);

Sel. ListOfLinks. options [ i] = elem[i];

Sel. ListOfLinks. options[i]. text = document. links[i];

Текстовий рядок, що відповідає посиланню, витягається з масиву 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.