свойстве document. cookie пары имен/значений из cookie-наборов, которые мо — гут быть использованы сценариями на Web-странице. Прежде чем вы сможете использовать значение cookie-набора, вам потребуется извлечь значение из стро —
ки всех имеющихся имен и значений cookie-набора в свойстве document. cookie.
Глава 8. JavaScript 43 1
ПРАКТИКУМ
Приведенная ниже JavaScript-функция возвращает значение отдельного cookie — набора из свойства cookie объекта документа:
function cookieValue (FirstChar)
{
// Пары «имя/значение» cookie-набора в свойстве document. cookie
// отделены друг от друга точками с запятой. Найти индекс первой
// точки с запятой после начала значения cookie-набора,
var LastChar = document. cookie. indexOf («;», FirstChar);
Функция unescape () в последнем операторе функции cookieValue () преоб — разовывает управляющие последовательности в значении cookie-набора в соот — ветствующие им ASCII-символы. Вспомните: в предыдущем практикуме при сохра —
нении значения cookie-набора вы пользовались функцией escape() . В результате
браузер сохранил «kki@NVBizNet. com» В COOkie-фаЙле каК «kki%40NVBizNet. com».
Функция unescape( ) преобразовывает управляющую последовательность «%40″
обратно в символ @.
Прежде чем вы сможете вызвать функцию cookieValue о, вы должны узнать,
где в строке всех пар имен/значений cookie-набора в document. cooki e начинает —
ся значение требуемого cookie-набора. Следующая функция найдет первый сим — вол в значении cookie-набора, имя которого вы передадите ей в параметре
CookieName. Вызвав функцию cookieValue (), функция getCookieValue () вер — нет значение cookie-набора, соответствующее имени, которое вы передали ей в параметре CookieName:
function getCookieValue (CookieName)
{
CookieName = CookieName + «=»;
var NameLength = CookieName. length;
var CookieLength = document. cookie. length;
var FirstChar = 0;
var LastChar = 0;
while (FirstChar
{
LastChar = FirstChar + NameLength;
if (document. cookie. substring(FirstChar, LastChar) == CookieName)
return cookieValue (LastChar);
// Перейти на 1 символ за пробел между парами «имя/значение» cookie-набора
Следовательно, чтобы извлечь значения cookie-набора из свойства
document. cookie по имени, сначала объявите между начальным и конечным дескрипторами сценария ( ) в заголовке Web-страницы функ —
43 2 Глава 8. JavaScript
ЦИИ copkieValu e () И getCookieValu e () . Посл е ЭТОГО ВЫ СМОЖете ВСТавИТЬ СЦе —
нарий, аналогичный приведенному ниже, в тело Web-страницы, чтобы извлечь и отобразить имя, фамилию и адрес e-mail из cookie-набора, которые были сохра — нены в предыдущем практикуме (см. рис. 8.8).
Удаление cookie-набора из cookie-файла
Когда браузер просматривает cookie-файл в поисках cookie-наборов для добав — ления в свойство cooki e объекта документа текущей Web-страницы, он удаляет все cookie-наборы, срок действия которых истек. Помните: когда вы сохраняете cookie-набор, вы сохраняете дату истечения срока действия вместе с именем и значением cookie-набора. Поскольку каждый cookie-набор увеличивает размер cookie-файла и cookie-файл может содержать максимум 200 cookie-наборов на каж — дый домен, следует удалять cookie-наборы, которые больше вам не нужны. Посколь —
ку Web-браузер автоматически удаляет из cookie-файла cookie-наборы с истекшим сроком действия, просто установите дату истечения срока действия cookie-набора, который вы хотите удалить, равной дате и времени когда-нибудь в прошлом.
ПРАКТИКУМ
Объявив приведенную ниже функцию между начальным и конечным дескрипто- рами сценария ( ) в HTML-коде своей Web-страницы (пред — почтительно в заголовочном разделе), вы сможете вызывать функцию
deietecookie() всякий раз, когда вам понадобится удалить cookie-набор:
Функция deieteCookie() «заканчивает» срок действия cookie-набора путем установки даты истечения срока действия cookie-набора равной самой ранней
применимой дате (одной секунде пополуночи 1 января 1970 года). Поскольку
сейчас правильное местное время на любом компьютере давно «перевалило» за 1
января 1970 года, вызов deietecookie() приведет к тому, что браузер удалит из cookie-файла тот cookie-набор, имя которого вы передадите функции в параметре CookieName. Предположим, например, вы ранее сохранили cookie-набор с име —
нем toDelete. ЕСЛИ ВЫ ВЫПОЛНИТе Оператор deleteCookie(«toDelete») ; (как показано близ окончания следующего примера кода), Web-браузер удалит cookie- набор, как показано на рис. 8.9.
43 4 . Глава 8. JavaScript
document. write( !
cooki e = ‘ + document. cookie+’
‘) ;
deleteCookie(«toDelete») ;
document. write(!
cookie-Ha6opbi, имеющиеся ПОСЛЕ вызова функции ‘
‘deleteCookie()
‘) ;
document. write(»
cookie-набор = » + document. cookie+’
‘) ;
Экономия времени и усилий с помощью готовых (внешних) сценариев
Пополняя новыми «произведениями» свою библиотеку JavaScript, вы, несом — ненно, напишете ряд функций и сценариев, которые сможете использовать на нескольких Web-страницах. Хорошим примером этого могут послужить функции
отображения и обслуживания cookie-наборов, которые вы видели в предыдущих трех практикумах. Чтобы задавать, извлекать и удалять cookie-наборы, вы можете просто копировать и вставлять эти функции между начальным и конечным деск- рипторами сценария () каждой Web-страницы, где они вам понадобятся. Однако использование атрибута sr c в дескрипторе для подключения внешнего файла сценария может сэкономить вам время, которое в
ином случае пришлось бы потратить на поиски и копирование кода JavaScript в ваши Web-страницы. Более того, давая браузеру указание считывать код, сохра —
ненный в других файлах, вы уменьшаете «загроможденность» своего HTML-доку — мента, что позволит вам сконцентрировать свое внимание на тех дескрипторах, которые потребуется изменять, дабы содержимое вашего сайта не отставало от велений времени.
Чтобы дать Web-браузеру указание подключить функции и сценарии, сохранен — ные во внешних файлах, добавьте в начальный дескриптор атрибут src
В ВИДе файла_сценария»>. ПредпОЛО — жим, например, вы храните файлы сценариев в папке с именем scripts, a Web — страницы — в папке hotdocs — обе находятся в корне вашего Web-сайта. HTML — код для включения функций (или сценариев), сохраненных в папке scripts, в Web-страницу, сохраненную в папке hotdocs, будет выглядеть примерно так:
Строка » . ./scripts » в примере кода — это относительный путь к файлу сце- нария, который должен подключить браузер. В данном случае, HTML сообщает браузеру, что тот может найти файл сценария относительно текущей Web-страни — цы (сохраненной в папке hotdocs), поднявшись на один уровень вверх в иерар —
хии папок (в корневую папку Web-сайта) и затем спустившись на один уровень
Глава 8. JavaScript 43 5
вниз в папку scripts. Если бы вам потребовалось включить этот же файл сцена —
рия в страницу (например, index. htm), .сохраненную в корне Web-сайта, деск — риптор выглядел бы следующим образом:
script src=»scripts/GetCookieValue. jsX/script>
В данном случае путь относительно текущей Web-страницы дает Web-браузеру указание начать с текущей цапки (корня Web-сайта) и перейти на один уровень
вниз в папку scripts. Вы можете включить в HTML-код столько пар дескрипто — ров сценария () , сколько необходимо для подключения фай — лов со сценариями и функциями, которые нужны на Web-странице. Например,
если вы сохранили функции управления cookie-наборами, о которых узнали в трех предыдущих практикумах, в трех файлах, для подключения этих файлов вам понадобится HTML-код, подобный следующему:
Обратите внимание, что сценарии, сохраненные во внешних файлах, не име — ют начальных и конечных дескрипторов сценария () .
Создание анимации с помощью события onLoad
Анимация на Web-странице создается путем отображения в быстром темце изображений одно за другим. Каждая картинка в анимации, как каждый кадр в фильме, слегка отличается от той, которая следует непосредственно перед ней. Ваш мозг воспринимает движение (то есть анимацию), когда объекты в одном
месте на картинке «перемещаются» в другое место при замене Web-браузером те- кущего изображения следующим.
ПРАКТИКУМ
Добавив в дескриптор событие onLoad, вы можете дать Web-браузеру ука — зание заменять изображение, вставленное дескриптором в код страницы, другой картинкой всякий раз, когда браузер завершает загрузку изображения. Чтобы представить себе, как происходит этот процесс, следует понимать, что Web-брау —
зер активирует обработчик события onLoad после того, как загрузит (то есть ото- бразит) изображение на Web-странице. Следовательно, приведенный ниже деск —
риптор отобразит картинку из файла Framei. jpg. Затем браузер инициирует обработчик события onLoad, который, в свою очередь, вызовет (оп —
ределенную Пользователем) ФУНКЦИЮ nextlmage():
onLoad=»nextImage(document. animation, src)»>
Функция nextimage() создает анимационный эффект. Как вы увидите из
приведенного ниже кода, всякий раз, когда Web-браузер вызывает nextimage(),
43 6 Глава 8. JavaScript
функция изменяет свойство sr c изображения с именем animation в массиве изображений объекта документа. В результате изменения свойства sr c Web-брау — зер загружает (то есть отображает) другое изображение, что, в свою очередь, ини — циирует событие onLoad, и процесс повторяется:
function nextlmage(ImageSource)
{
var i = ImageSource. indexOf (M. jpg»,0);
var NextFrame = ImageSource. substring(i-1, i) ;
if (NextFrame == «1″) I И
document. animation. src = «Frame2.jpg»;
else if (NextFrame == «2″)
document. animation. src = «Frame3.jpg»;
else if (NextFrame == «3″)
document. animation. src = «Frame4.jpg»;
else
document. animation. src = «Framel. jpg»;
return;
}
// —>
Анимация, отображаемая приведенным выше кодом, состоит из четырех кад- ров (то есть четырех разных картинок) и повторяется бесконечно. Чтобы остано —
вить анимационную последовательность после того, как она будет воспроизведе —
на один раз, удалите два оператора перед оператором return ; функции. Если вы не загрузите первое изображение снова после загрузки последнего, браузер вызовет
nextimageо еще раз после загрузки Frame4.jpg. Однако во время последнего про —
хода nextlmage () не изменяет СВОЙСТВО src изображения С Именем animation, ПО — скольку ни один из операторов if функции не оказывается истинным. В результате анимация останавливается, поскольку Web-браузер больше не инициирует событие onLoad, так как функция не дала браузеру указания загрузить другую картинку.
Баннеры присутствуют практически на каждом Web-сайте коммерческой на — правленности. Замысел прост: отображение небольшого графического изображе — ния, рекламирующего компанию или продукт. Вместо того чтобы заполнять весь экран рекламой (и навсегда отпугнуть посетителей от вашего сайта), вы можете отображать (неограниченную) последовательность рекламных изображений внут — ри небольшой области на экране, заменяя одну картинку другой через заданные
интервалы времени. Собственно говоря, отображение баннеров во многом похо —
дит на создание анимации (о которой вы читали в предыдущем практикуме). И
анимация, и самозаменяющиеся баннеры требуют от ЛУеЬ-браузера отображения серии картинок одной за другой. В случае баннера, однако, вам нужно, чтобы браузер оставлял каждую картинку на экране в течение 5—10 секунд, чтобы у по — сетителя было достаточно времени на просмотр рекламы.
Глава 8. JavaScript 43 7
ПРАКТИКУМ
Чтобы создать самозаменяющийся (вращающийся) баннер, включите обработчик события onLoad, аналогичный приведенному ниже, в дескриптор
HTML — кода Web-страницы:
В данном случае обработчик события onLoad дает Web-браузеру указание выз —
вать определенную пользователем функцию rotateBanner () после того, как бра — узер загрузит (отобразит) Web-страницу в окне приложения. Хотя JavaScript-фун — кция может заменить изображение, отображаемое на Web-странице, функция не может добавить на страницу новое изображение. Поэтому вы должны отобразить исходный баннер, вставив дескриптор , аналогичный показанному при — мерно в середине следующего HTML-кода, куда-нибудь в тело Web-страницы:
Наконец, объявите между начальным и конечным дескрипторами сценария () в заголовочной части HTML-кода Web-страницы функцию rotateBanner (), аналогичную показанной ниже:
function rotateBanner(BannerSrc)
{
var TimerlD
// Заменить изображение
document. banner. src = BannerSrc;
// Ожидать тайм-аута и вызвать саму себя для замены
Каждый раз, КОГДа фуНКЦИЯ rotateBanner () Изменяет СВОЙСТВО src ИЗОб —
ражения с именем animation в массиве изображений объекта документа,
Web-браузер выводит на экран новое изображение. Встроенная функция
setTimeout () создает эффект «изменяющегося» баннера, каждые пять секунд
рекурСИВНО ВЫЗЫВаЯ фуНКЦИЮ rotateBanner (), ЧТОбы ПОМенЯТЬ баннер На
Web-странице. Синтаксис вызова функции setTimeout о может сперва пока —
заться несколько сбивающим с толку. Тем не менее, идея заключается в том, что функция оценивает выражение, переданное в качестве первого параметра,
43 8 Глава 8. JavaScript
через число миллисекунд, указанное во втором параметре. Таким образом, при син —
таксисе TimerlD = SetTimeout («выражение» , задержка в миллисекундах), первый
вызов setTimeouto в данном сценарии дает Web-браузеру указание вызвать фун —
кцию rotateBanner () через 5 000 миллисекунд (то есть через 5 секунд) и пере —
дать имя пути «следующего» отображаемого баннера (images/Banner2. jpg). Что —
бы отображать свои собственные баннеры, просто замените путевые имена в
этом примере на имена путей своих баннеров и установите задержку в миллисе —
кундах в каждом вызове функции setTimeouto равной периоду времени, в течение которого каждый баннер должен оставаться на экране. Увеличить или уменьшить
количество баннеров можно, вставив или удалив операторы els e if.
Примите к сведению, что почти все (а, скорее, все) баннеры позволяют посе- тителям щелкать на них, чтобы проследовать по гиперссылке на Web-страницу, где можно приобрести рекламируемый продукт или заказать услугу. В следующем практикуме вы научитесь заменять не только графическое изображение, но и ги — перссылку, связанную с баннером.
Направление гиперссылок на новые файлы «на лету11
Когда посетитель производит щелчок на тексте гиперссылки или на «горячей области» навигационной карты, Web-браузер извлекает Web-страницу (или иной
файл), заданную атрибутом href в дескрипторе гиперссылки. Обычно вам нужно, чтобы Web-браузер извлекал один и тот же файл каждый раз, когда посе — титель щелкает на данной гиперссылке. Однако иногда удобным окажется на — правлять гиперссылку на новый файл в зависимости от даты или графического изображения, находящегося на экране, когда посетитель выполняет щелчок мышью.
К счастью, массив links в объекте документа имеет три свойства, которые можно
изменять, дабы направить гиперссылку на новый файл: hash, pathname и href.
ПРАКТИКУМ
Свойство hash позволяет изменить все, что находится в гиперссылке справа от знака решетки (#). По сути, свойство hash дает возможность изменить имя целе-’ вой закладки, не меняя при этом файл, который должен извлечь браузер. Пред — положим, например, у вас есть следующая гиперссылка, которая указывает на
Полагая, что это первая гиперссылка на странице, можно определить опера —
тор document, link s [0] .hash = «tuesday»;, КОТОРЫЙ Обеспечит изменение цели
ГИПерССЫЛКИ На «htt p : //www. NVBizNet. com/htdocs/events. htm#tuesday». Сле —
довательно, если в events. htm есть закладка для каждого дня недели, вы можете
с помощью одной-единственной гиперссылки добираться до раздела текущего
дня всякий раз, когда посетитель щелкает на тексте гиперссылки — «События сегодняшнего дня». Вам потребуется всего лишь написать сценарий, который с
помощью метода getDayO объекта даты будет определять день недели и затем
Глава 8. JavaScript 43 9
присваивать текущий день недели свойству hash всякий раз, когда браузер загру — жает Web-страницу.
Свойство pathname позволяет заменить все, что находится в гиперссылке между доменным именем и знаком решетки. По сути, свойство pathname дает возможность изменить имя пути файла, который браузер должен отобразить, не
меняя при этом доменное имя или закладку (если таковая имеется). Предполо —
жим, например, у вас есть следующая гиперссылка, указывающая на файл с име — нем Jan. htm В папке /news/2001:
Дни рождения в этом месяце
Полагая, что это вторая гиперссылка на странице, оператор
document. link s [1 ] .pathname = M /news/2001/Feb. htm» ; изменит цель ГИПерССЫЛ —
КИ на «htt p : //www. NVBizNet. com/news/2001/Feb. htm#birthday» . (Обратите
внимание, что ссылка на закладку «birthday» при присвоении не потерялась.) Следовательно, сохраняя ежемесячные бюллетени новостей компании в папке
/news/2001 на Web-сайте, вы сможете использовать одну гиперссылку, чтобы пе —
реносить раздел «birthday» бюллетеня текущего месяца всякий раз, когда посе — титель щелкает на тексте гиперссылки — «Дни рождения в этом месяце». Вам потребуется только написать сценарий, который с помощью методов объекта даты getYear() и getMonth() будет составлять имя пути на основании года и
месяца, а затем присваивать новые путь и имя файла свойству pathname всякий раз, когда браузер загружает Web-страницу.
Свойство href позволяет изменить весь URL-адрес гиперссылки. По сути, за- дание свойства href в массиве link s оказывает тот же эффект, что и задание но- вого значения атрибута href в дескрипторе гиперссылки. Предположим, на — пример, у вас есть изменяющийся баннер, и вы хотите, чтобы посетители могли переходить на Web-сайт той или иной компании, щелкая на соответствующем баннере. Сначала свяжите гиперссылку с баннером с помощью HTML-кода, ана — логичного показанному ниже:
Предварительное кэширование файлов для уменьшения времени отображения изображений
Предварительное кэширование графических изображений — это прием, с по — мощью которого вы даете Web-браузеру указание извлечь картинки с Web-сервера
в настоящий момент, в предвидении того, что позже вам может понадобиться отобразить эти изображения. Поручив браузеру извлечь картинки в фоновом ре- жиме (то есть пока посетитель делает на странице что-либо иное), вы можете ус- транить проблему задержки загрузки, с которой столкнется пользователь, щелк —
нув на миниатюре, чтобы увидеть большое изображение. Аналогично, если в вашей Web-странице использовано много сценариев, отображающих графические
изображения для эффектов смены изображения при наведений курсора или ани —
мации, вам стоит предварительно загружать в кэш еще не отображенные изобра- жения. Предварительно загруженное в кэш изображение, будучи востребовано браузером, появится на экране мгновенно — без задержки (возможно, достаточно продолжительной), связанной с ожиданием отправки изображения браузеру Web — сервером. Предположим, например, на вашей Web-странице присутствует восемь
миниатюр, как показано на рис. 8.10.
ПРАКТИКУМ
Предварительно загрузить в кэш изображения, которые браузер будет отображать
по щелчку посетителя на миниатюре, можно, вставив обработчик события
onLoad либо в дескриптор Web-страницы, либо в один из дескрипторов
миниатюр. Например, если вы вставите в дескриптор последней
миниатюры на рис. 8.10 следующий обработчик события onLoad, Web-браузер вызовет определенную пользователем функцию preCache():
го изображения, соответствующего каждой миниатюре, в кэш системы позволяет браузеру избежать связанной с загрузкой задержки, обычно имеющей место, ког —
да браузеру приходится извлекать изображение с Web-сервера. В результате соот —
44 2 » Глава 8. JavaScript
ветствующее большее изображение появляется на экране незамедлительно после щелчка посетителя на миниатюре. Если вы решите использовать предваритель — ное кэширование изображений, убедитесь, что Web-браузер загружает картинки,
вставленные в Web-страницу, до вызова функции preCache(). В конце концов, ваша цель — загрузить изображения в кэш системы, чтобы браузер смог быстрее отобразить изображения, если посетитель попросит их показать. Заставить посе — тителя дожидаться возможности увидеть другие изображения, пока вы загружаете
массу картинок в кэш системы — это последнее, чего вы хотите добиться, особенно если в конечном итоге посетитель не станет просматривать эти картинки вовсе.
Выбирая, куда поместить обработчик события onLoad, который будет вызы- вать функцию precache(), следует понимать, как браузер извлекает и отобража —
ет содержимое Web-страницы. Браузер сначала выводит текст и отображает фор — мы и таблицы, обнаруженные им в HTML-коде. Затем браузер открывает несколько одновременных соединений с Web-сервером для загрузки графических изображений, помещенных на страницу. Поместив обработчик события onLoad в
последний дескриптор HTML-кода Web-страницы, вы сможете быть уве — ренным в том, что браузер по крайней мере начал загружать все миниатюры, прежде чем вызывать функцию предварительного кэширования. Более того, если миниатюры не все имеют одинаковые размеры, и есть возможность по-разному расположить их на странице, присвойте имя пути файла миниатюры с самым большим размером файла атрибуту src последнего дескриптора . Таким
образом, к тому моменту, когда браузер завершит загрузку последней, самой
большой миниатюры, и обработчик события onLoad обратится к функции
preCache(), все миниатюры будут загружены.
Создание бегущей строки с помощью JavaScript
Дескриптор существует уже достаточно давно. К сожалению, в на — стоящий момент этот дескриптор поддерживается только браузером Internet
Explorer. В результате этого при использовании для отображения бегущей строки на
Web-странице дескриптора посетители, пользующиеся Netscape Navigator, видят строку с обыкновенным неподвижным текстом. К счастью, в JavaScript есть функции для работы с таймером и строками, с помощью которых можно превра —
тить однострочное текстовое поле в область для отображения бегущей строки.
ПРАКТИКУМ
Для создания бегущей строки нужно сперва определить форму с двумя текстовы — ми полями — скрытым полем, в котором будет содержаться текст бегущей стро — ки, и видимым полем, в котором будет отображаться движущийся текст. Напри- мер, приведенный ниже HTML-код создает форму, позволяющую отображать бегущую строку, в которой в любой момент времени будут видны до 50 символов: