ствующей странице спросите у посетителя, какую версию изображений он предпочитает. (Посетители с высокоскоростными подключениями, скорее все — го, выберут изображения с более высоким разрешением.) Затем, отображая Web-страницу с изображениями, установите свойство sr c каждого изображе —

ния (document. [индекс_изображения] .src) равным URL-адресу изображения С высоким разрешением (файлом большого размера) или версии с низким изобра — жением — в зависимости от того, что ввел на форме посетитель.

Использование сценария в Web-браузере для замены отображаемых изображе —

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

пользованием обработчика, подобного ASP или РНР, для генерирования новой Web-страницы. Подмена изображений в Web-браузере устраняет необходимость передачи служебных данных, которая связана с отправкой дополнительных зап- росов на Web-сервер, и позволяет сэкономить время, которое понадобилось бы Web-серверу на «переделку» страницы. Браузерный сценарий работает со страни —

цей, уже полученной браузером с Web-сервера — попросту заменяет URL-адреса изображений, не затрагивая остальной HTML-код Web-страницы.

Ниже рассматриваются свойства, сохраняемые браузером в каждом из элемен — тов массива images. В конце каждого описания вы найдете формат оператора JavaScript, который сможете включить в свой сценарий, чтобы просмотреть (а в случае свойств lowsrc и sr c — изменить) значение свойства изображения. Хотя большинство свойств доступны только для чтения, с помощью (обновляемого) свойства sr c вы можете менять изображения на Web-странице «на лету». Напри — мер, создавая две версии графического элемента — простую и «подсвеченную» — вы можете создать эффект смены изображения при наведении курсора, поручив Web-браузеру подменять простой графический элемент «подсвеченным», когда посетитель наводит курсор мыши на изображение.

42 2 Глава 8. JavaScript





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

данное в дескрипторе , можно с помощью оператора JavaScript вида:

ширина_границы

=

document. images[индекс изображения].border ИЛИ

ширина^границы

=

document. имя изображения. border

complete — это доступное только для чтения логическое значение, которое

остается fals e до тех пор, пока браузер jie завершит извлечение файла изобра — жения с Web-сервера. Например, с помощью приведенного ниже цикла while можно дождаться, пока изображение загрузится с Web-сервера, прежде чем заме — нять его на другое изображение на Web-странице:



while (! document. имя изображения. complete)

{

}



height — это доступное только для чтения значение, дающее высоту изобра — жения в пикселях. Получить высоту картинки можно с помощью оператора JavaScript вида:

высота изображения

=

document. images [индекс изображения] .height ИЛИ

высота изображения

=

document. имя изображения. height

hspace — это доступное только для чтения значение, дающее величину в пиксе — лях интервала, который Web-браузер должен оставить между картинкой и смежным

с ней содержимым (или полем Web-страницы) слева и справа от графического изоб — ражения. Значение hspace можно получить с помощью оператора JavaScript вида:

интервал по горизонтали = document. images[индекс_изображения].hspace

ИЛИ интервал_по_горизонтали = document. имя__изображения. hspace

lowsrc — это путь и имя файла изображения с низким разрешением, которое

Web-браузер должен загрузить, чтобы пользователю было на что смотреть в ожида — нии загрузки браузером основной, с высоким разрешением картинки, заданной ат — рибутом src дескриптора . Задать значение lowsrc можно с помощью опера —

тора JavaScript вида: document, images [индекс изображения] .lowsrc = путь_к__

изображению_с_низким_разрешением ИЛИ document. имя__изображения. lowsrc =

путь__к_изображению_с_низким_разрешением.

name — это доступная только для чтения строка, присвоенная графическому изображению атрибутом name в дескрипторе . Значение имени изображе — ния можно получить с помощью оператора JavaScript вида:

имя изображения = document. images [индекс изображения] .name

sr c — это путь и имя файла изображения, которое Web-браузер должен ото- бразить на Web-странице. Изменить отображаемое графическое изображение можно, задав значение атрибута sr c с помощью оператора JavaScript вида:

document. images [индекс_изображения] .src = путь_к новому изображению

ИЛИ document. имя изображения. src = путь к новому изображению

vspace — это доступное только для чтения значение, дающее величину в пик —

селях интервала, который Web-браузер должен вставить между картинкой и смежным с ней содержимым сверху и снизу от изображения. Значение vspace можно получить с помощью оператора JavaScript вида:

Глава 8. JavaScript 42 3





интервал_по вертикали = document. images[индекс_изображения].vspac e

ИЛИ интервал по вертикали = document. имя изображения. vspac e

width — это доступное только для чтения значение, дающее ширину изобра — жения в пикселях. Получить ширину картинки можно с помощью оператора JavaScript вида:

шцрина_изображения = document. images[индекс_изображения].width ИЛИ

ширина_изображения = document. имя_изображения. width



Использование массива ссылок JavaScript

Массив links объекта документа позволяет работать со свойствами гиперссы —

лок, вставленных в Web-страницу с помощью дескрипторов, и «горячими об —

ластями» изображений, определенными при помощи дескрипторов. И

Netscape Navigator, и Internet Explorer (версии 4 и выше) позволяют модифици- ровать (равно как и отображать) свойства элементов массива ссылок. Следова — тельно, вы можете изменять «на лету» Web-страницы (или другие файлы), загру — жаемые Web-браузером, когда посетитель щелкает на гиперссылке. Например, вы можете создать баннер, написав сценарий, который будет изменять отображае — мое на странице изображение, а также URL-адрес Web-страницы, которую извле — чет браузер, когда посетитель щелкнет на изображении баннера. Аналогично,

можно сделать так, что гиперссылки будут «переезжать» в другие области Web- страницы (или вообще на другие Web-страницы) в зависимости от времени суток или дня недели — без необходимости изменять Web-страницу на сервере, вруч — ную либо посредством серверного сценария.

Считывая HTML-код Web-страницы, браузер заполняет массив links объекта документа свойствами всех обнаруженных им дескрипторов (то есть гиперс —

сылок) и дескрипторов «горячих областей» навигационных карт в том по — рядке, в котором он их находит. Ниже рассматриваются свойства, сохраняемые браузером для каждой гиперссылки в элементах массива ссылок. В конце каждого описания вы найдете формат оператора JavaScript, который сможете включить в свой сценарий, чтобы просмотреть или изменить значение описанного свойства.

hash — это часть атрибута href в гиперссылке, которая включает в себя сим —

вол решетки (#) и имя идентификатора фрагмента после символа решетки. Если посетитель щелкает на гиперссылке с идентификатором фрагмента, Web-браузер отобразит часть Web-страницы, начинающуюся с дескриптора , атрибут name ко —

торого установлен равным значению идентификатора фрагмента. Получить имя идентификатора фрагмента из атрибута href гиперссылки можно с помощью опера —

тора ВИДа идентификатор_фрагмента = document. links[индекс__ссылки].hash. Изменить же идентификатор фрагмента (тем самым сделав так, что гиперссылка будет указывать на новое место в Web-странице) можно с помощью оператора

вида document. links[индекс^ссылки].hash = новый_идентификатор_фрагмента. host — это часть значения атрибута href гиперссылки, содержащая IP-адрес или доменное имя. Для данной гиперссылки значение свойства host отличается от зна — чения свойства hostname (которое рассматривается ниже) только тем, что свойство

host включает в себя номер порта (по умолчанию 80), который Web-браузер должен

использовать при обмене данными с Web-сервером. Чтобы извлечь из гиперссылки

42 4 Глава 8. JavaScript





доменное имя (или IP-адрес), включая номер порта, воспользуйтесь операто —

ром ВИДа имя хоста включая порт = document. link s [индекс ссылки] .hos t ИЛИ

имя хоста_включая_порт = document, link s [индекс ссылки] .host.

hostname — это часть значения атрибута hre f гиперссылки, содержащая IP-адрес или доменное имя. Извлечь из гиперссылки значение имени хоста можно с помо —

щью Оператора Вида имя хоста = document, link s [индекс^ссылки] .hostname. Вы

также можете изменить доменное имя (или IP-адрес) в гиперссылке с помощью

оператора ВИДа document, links [индекс_ссылки] .hostname = новре имя хоста.

hre f — это значение целевого адреса гиперссылки (включая закладку, если тако — вая имеется), присвоенного атрибуту hre f в дескрипторе гиперссылки или деск —

рипторе . Целевой адрес гиперссылки можно получить с помощью оператора

JavaScript ВИДа цель_гиперссылки = document, link s [индекс_ссылки] .href. Мож —

но также изменить цель гиггерссылки, присвоив новое значение свойству href с

ПОМОЩЬЮ Оператора JavaScript ВИДа document, link s [индекс ссылки] .hre f =

новая_цель__гилерссылки.

pathname — это часть URL-адреса, содержащая имя пути. Например, при данной

ГИПерССЫЛКе CnMCOK

клиентов, СВОЙСТВО pathname будет содержать Строку «/ntdocs /

ciients. htm 1 1 в Netscape Navigator и «htdocs/ciients. htm » в Internet Explorer.

Имя пути гиперссылки можно получить с помощью оператора вида имя пути =

document, link s [индекс_ссылки] .pathname. МОЖНО также изменить ИМЯ Пути

Web-страницы, извлекаемой при щелчке на гиперссылке, за счет присвоения но —

вого значения СВОЙСТВУ pathname С ПОМОЩЬЮ оператора ВИДа document. link s [

индекс_ссылки] .pathname = новое имя_пути. (Присваивая новое имя пути, обя —

зательно поместите в начало нового имени косую черту (/) — как для Internet

Explorer, так и для Netscape Navigator.) В \

por t — это номер порта, через который должен осуществляться обмен данны — ми с Web-сервером. Номер порта, если таковой присутствует, следует за домен — ным именем или IP-адресом. Например, в гиперссылке со значением атрибута

href, раВНЫМ «http : //www. NVBizNet. com: 80/clients. htm», HOMepOM ПОрта ЯВ —

ляется 80. Получить номер порта можно с помощью оператора вида номер пор —

та = document, link s [индекс_ссылки] .port. ГиперССЫЛКа Не Обязательно ДОЛЖ — на включать в себя номер порта, поскольку Web-браузер установит номер порта равным 80 по умолчанию. Internet Explorer вернет 80, если в гиперссылке не за — дан другой номер порта, Netscape Navigator не вернет никакого номера порта,

если таковой не задан в гиперссылке.

protocol — это часть цели гиперссылки, содержащая протокол доставки. Протокол доставки находится в начале атрибута href гиперссылки перед двой- ной косой чертой (//). В качестве протокола, указывающего метод извлечения

Web-браузером целевой Web-страницы или другого файла, может выступать один из перечисленных ниже:

• fil e — браузер должен извлечь документ с локального компьютера или с диска на локальном компьютере или сетевой рабочей станции.

• ftp— браузер должен извлечь документ с помощью программы FTP-передачи.

Глава 8. JavaScript 42 5





• gopher — браузер должен извлечь документ, пользуясь протоколом Gopher.

• htt p — браузер должен извлечь Web-страницу.

• maiito — браузер должен запустить почтовую программу по умолчанию и создать сообщение для отправки по адресу, заданному в гиперссылке.

• JavaScript — гиперссылка указывает на файл, содержащий операторы

JavaScript.



search — это часть атрибута href гиперссылки, содержащая строку запроса, включая вопросительный знак (?) в ее начале. Если в гиперссылке присутствует строка запроса, она находится после вопросительного знака. Когда посетитель щел — кает на тексте или графическом изображении гиперссылки, браузер передает строку

запроса на обработку CGI-программе на сервере. Значение свойства search ги —

перссылки можно получить с помощью оператора JavaScript вида строка_поиска

= document, link s [индекс_ссылки] .search. Строку ПОИСКа МОЖНО также ИЗМе —

нить с помощью оператора вида:

document. links[индекс_ссылки].search = новая_строка_поиска

(где новая_строка_поиска — Строка наподобие «?fname=konrad&lname=king»).

targe t — это имя окна или фрейма, в котором Web-браузер доджен отобра — зить документ, извлеченный после щелчка на тексте или графическом изображе — нии гиперссылки. По умолчанию браузер заменит Web-страницу в текущем окне новой Web-страницей. Однако если дескриптор гиперссылки включает в

себя атрибут target, значение которого отлично от «_seif», Web-браузер оста — вит исходную Web-страницу на экране и отобразит извлеченную страницу в дру — гом окне или фрейме.

Получить имя целевого фрейма или окна гиперссылки можно с помощью опера —

тора JavaScript вида имя_фрейма = document, link s [индекс_ссылки] .target. Це — левое окно или фрейм гиперссылки можно также изменить с помощью операто —

ра ВИДа document. links[индекс_ссылки].target = новое_имя_фрейма.



Изменение цветов Web-страницы с помощью JavaScript

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

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

функцией JavaScript, чтобы «обойти» проблему-цветов, давая возможность посетите — лям выбрать ту цветовую схему, которую они находят наиболее привлекательной.

В таблице 8.8 приведены свойства Web-страницы, которыми можно пользо — ваться для изменения цветов, используемых Web-браузером для отображения

426 Глава 8. JavaScript





текста, фона и гиперссылок Web-страницы. Помните: браузер сохраняет все свойства Web-страницы в объекте document по мере считывания HTML-кода Web-страницы. Чтобы изменить цветовую схему Web-страницы, вам нужно всего лишь изменить значения цветовых свойств объекта document.





Приведенная ниже JavaScript-функция задает цветовую схему Web-страницы в

зависимости от значения параметра coiorScheme, переданного функции Web —

браузером. Хотя функция seiectschem e () предусматривает только две цветовых схемы, вы можете добавить еще схемы за счет включения дополнительных бло — ков операторов els e i f (…) , задающих другие значения для пяти цветовых свойств документа:



Глава 8. JavaScript 42 7





После объявления вышеприведенной функции в заголовке Web-страницы вам

остается только сделать ее доступной для посетителей сайта, вставив кнопку или гиперссылку с обработчиком события onclick, который обеспечит вызов этой функции. Например, следующий код помещает на Web-страницу две кнопки:

Если посетитель щелкнет на какой-либо из этих кнопок, браузер вызовет

функцию seiectscheme(), которая, в свою очередь, изменит цвета фона, текста

и гиперссылок на странице.



Сохранение cookie-набора на жестком диске посетителя

cookie-набор — это строка, содержащая до 4 096 (4 Кб) символов, которую

Web-браузеру можно поручить сохранить на жестком диске посетителя, cookie — наборы дают вам возможность сохранить информацию о посетителе сайта, кото — рую можно будет извлекать всякий раз, когда посетитель возвращается на сайт — пока посетитель пользуется одним и тем же Web-браузером и компьютером. Каждый Web-браузер сохраняет все данные cookie-набора в одном файле, кото — рый уникален для браузера. Поэтому если один раз вы зашли на сайт с помо — щью Internet Explorer, а другой раз — с помощью Netscape Navigator, Netscape Navigator не извлечет cookie-набор, ранее сохраненный Internet Explorer.

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

ные из него — в отличие от считывания, и записи файлов с информацией част- ного характера на вашем жестком диске. Более того, сценарий на Web-странице

может читать только cookie-наборы, записанные сценариями Web-страниц с того же домена (то есть Web-страниц, отправленных с одного и того же Web-сервера).



ПРАКТИКУМ

Чтобы определить cookie-набор, то есть добавить cookie-набор в cookie-файл на

жестком. диске посетителя, воспользуйтесь оператором JavaScript следующего вида:



document. cooki e = «имя__соок±е=значение__соок±е

[;ехр±гез=дата_до__которой_действителен] [;doma±n=лмя_домена]

[ ;раЫ1=имя пути] [; secure ] »



Единственные обязательные значения при сохранении cookie-набора — это имя cookie-набора и текстовые данные, которые необходимо сохранить. Ниже рас — сматриваются необязательные значения, которые можно сохранять в cookie-наборах.

42 8 Глава 8. JavaScript





expires — это дата (в формате GMT), до которой действителен cookie-набор.

После истечения срока действия cookie-набора Web-браузер перестанет предос — тавлять его значение какому-либо сценарию и удалит cookie-набор из cookie — файла. Если вы не укажете дату, до которой действителен cookie-набор, он будет

доступен только до тех пор, пока посетитель не закроет Web-браузер. Если вы зададите в качестве даты истечения срока действия cookie-набора дату, предше — ствующую местной дате и времени, Web-браузер удалит cookie-набор из cookie — файла.

domain — по умолчанию сценарии на Web-страницах с того же домена, что

и Web-страница, записавшая cookie-набор, могут извлечь значение cookie-на —

бора. Добавив в cookie-набор значение домена, можно ограничить доступ оп — ределенными Web-серверами внутри домена. Например, если сценарий на Web-странице из NVBizNet. com записал cookie-набор, сценарии на Web-стра —

ницах С NVBizNet. com И SQLServer. NVBizNet. com МОГут извлекать данные

cookie-набор. Если при сохранении cookie-Ha6opf вы установите

domain=»SQLServer. NVBizNet. com», ТОЛЬКО Сценарии на Wfeb-СТраницах, ОТПравлен — ных с Web-сайта SQLServer. NVBizNet. com, смогут читать этот cookie-набор.

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

cookie-набор был сохранен сценарием на Web-странице из «/htdocs», Web-стра —

ницы, Хранящиеся В «/htdocs», «/htdocsabs»* «/htdocs/xyz» И Т. Д. МОГут ИЗ —

влекать cookie-набор. Если при сохранении cookie-набор вы зададите path=M/

htdocs/cookiedocs/», только Web-страницы, сохраненные по пути, который на — чинается с «/htdocs/cookiedocs/», смогут читать cookie-набор. Аналогично,

если вы зададите path=»/» , сценарий на любой Web-странице Web-сайта Сможет извлекать cookie-набор, поскольку для каждой Web-страницы на сайте путь начи — нается с «/» (корня сайта).

secure — если при сохранении cookie-набора вы добавите ключевое слово secure, только Web-страницы, отправленные через безопасное (HTTPS) соедине — ние, смогут считать значение cookie-набора.

Приведенные ниже операторы JavaScript добавляют в cookie-файл два cookie — набора. Первый cookie-набор (с именем Email) действителен до 14 июля 2003

года. В то же время второй cookie-набор (с именем pwd) действителен до той же даты; однако только браузеры, подключенные к Web-серверу через безопасное (HTTPS) соединение, смогут читать этот cookie-набор:







document. cookie = «Email=kki@NVBizNet. com;expires=Sun,

14 Jul 2003 00:00:00 GMT»;

document. cookie • «pwd=king;expires=Sun,

14 Jul 2003 00:00:00 GMT/secure»;

// — >

.

Глава 8. JavaScript 42 9





Форматирование данных cookie-набора

с помощью JavaScript



ПРАКТИКУМ

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

вставить между начальным и конечным дескрипторами сценария ( script> ) в заголовочной части Web-страницы, которая должна сохранять cookie —

набор, Следующую фуНКЦИЮ setCookie() :

function setCookie (CookieName, CookieValue, ExpDate, Domain, Path, Security)

{

var CookieData = CookieName;

//• Сохранять буквы и цифры как самих себя, но сохранять все

// символы или пробелы в значении cookie^Ha6opa как ASCII-коды

CookieData = CookieData + «=» + escape(CookieValue);

// Проверить задание значений необязательных параметров

if (ExpDate. value!= «»)

CookieData = CookieData + » ; expires=» + ExpDate. toGMTString();

if (Domain!= «»)

CookieData = CookieData + «; domain=» + Domain;

if (Path!= «»)

CookieData = CookieData + «; path=» + Path;

if (Security == «secure»)

CookieData = CookieData + «; secure»

// Вставить cookie-набор в cookie-файл

document. cookie = CookieData;

return;

}



Функция setcookie о в данном примере принимает имя cookie-набора, зна- чение, дату истечения срока действия, домен, путь и ограничения по безопасно — сти и помещает их в требуемый формат, прежде чем вставить cookie-набор в cookie-файл.

Включив в код своей Web-страницы функцию setcookie() , вы можете дать браузеру указание вызвать функцию с данными cookie-набора, которые вы хотите сохранить. Предположим, например, в коде вашей Web-страницы имеется следу — ющее определение формы, которая просит пользователя ввести имя, фамилию и адрес e-mail: