Июнь 2010

Самоучитель по креативному веб-дизайну. Книга 3, стр.55




input type=»button» value=»Цветовая схема 1″

onClick=»selectScheme(1)»>

input type=»button» value=»Цветовая схема 2″

onClick=»selectScheme(2)»>





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

функцию 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-наборах.

Самоучитель по креативному веб-дизайну. Книга 3, стр.56

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-наборы, по меньшей мере, утомительно. Поэтому вы наверняка захотите

Самоучитель по креативному веб-дизайну. Книга 3, стр.57

вставить между начальным и конечным дескрипторами сценария ( 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:





HMH:



tdxinput type=»text» name=»fname» size=»20″X/tdX/tr>

ai««iH*:


E-mail :

43 0 . ‘ Глава 8. JavaScript




type=»text» name=»email» size=»20″X/tdX/tr>

onClick=»visitorSignIn (RegistrationForm) «X/tdX/tr>







Когда посетитель щелкает на кнопке «Зарегистрироваться» в нижней части

формы, браузер вызывает функцию visitorsignino, которая, в свою очередь,

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

ФУНКЦИЮ visitorSignIn() :

function visitorSignln(Form)



if (Form. fname. value == «») return false;

if (Form.1name. value == «») return false;

if (Form. email. value == «‘») return false;

// Сгенерировать дату истечения срока действия как год,

// начиная с сегодняшнего дня var ExpDate = new Date () ;

ExpDate. setTime (ExpDate. getTime() +

(365 * 24 * 60 * 60 * 1000)) ;

// Записать cookie-набор, сохраняющий имя, фамилию

// и адрес e-mail

setCookie («FirstName»,Form. fname. value, ExpDate,»",»",»");

setCookie («LastName»,Form, lname. value, ExpDate,»",»",»");

setCookie («eMailAddr»,Form. email. value, ExpDate,»",»",»");

// Загрузить другую Web-страницу

self. location=nChpt08Page404LoggedIn. htm»





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

полненным. Три ВЫЗОВа фуНКЦИИ setCookie () ближе К КОНЦу фунКЦИИ

visitorsignino сохраняют данные в полях формы в виде трех значений cookie — набора в cookie-файле.

Извлечение значения cookie-набора из cookie-файла

Как вы узнали в одном из предыдущих практикумов этой главы, Web-браузер создает после получения Web-страницы с Web-сервера объект document. Браузер сохраняет свойства Web-страницы и свойства объектов, вставленных в страницу, в объекте, document. Кроме того, браузер считывает cookie-файл и сохраняет в

Самоучитель по креативному веб-дизайну. Книга 3, стр.58

свойстве 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);

if (LastChar == -1)

LastChar = document. cookie. length;

return unescape(document. cookie. substring(FirstChar, LastChar));

}



Функция 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-набора

FirstChar = document. cookie. indexOf (» «/FirstChar) + 1;

if (FirstChar == 0) break;

}

return null;

}

Следовательно, чтобы извлечь значения 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-набор:

Глава 8. JavaScript 4 3 3





function DeleteCookie (CookieName)

{

document. cookie = CookieName + «=; expires=Thu, 01 Jan 1970 00:00:01 GMT»;

return;

}

Функция deieteCookie() «заканчивает» срок действия cookie-набора путем установки даты истечения срока действия cookie-набора равной самой ранней

применимой дате (одной секунде пополуночи 1 января 1970 года). Поскольку

сейчас правильное местное время на любом компьютере давно «перевалило» за 1

января 1970 года, вызов deietecookie() приведет к тому, что браузер удалит из cookie-файла тот cookie-набор, имя которого вы передадите функции в параметре CookieName. Предположим, например, вы ранее сохранили cookie-набор с име —

Самоучитель по креативному веб-дизайну. Книга 3, стр.59

нем 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-доку — мента, что позволит вам сконцентрировать свое внимание на тех дескрипторах, которые потребуется изменять, дабы содержимое вашего сайта не отставало от велений времени.

Самоучитель по креативному веб-дизайну. Книга 3, стр.60



ПРАКТИКУМ

Чтобы дать 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-странице создается путем отображения в быстром темце изображений одно за другим. Каждая картинка в анимации, как каждый кадр в фильме, слегка отличается от той, которая следует непосредственно перед ней. Ваш мозг воспринимает движение (то есть анимацию), когда объекты в одном

Самоучитель по креативному веб-дизайну. Книга 3, стр.61

месте на картинке «перемещаются» в другое место при замене 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, так как функция не дала браузеру указания загрузить другую картинку.

Самоучитель по креативному веб-дизайну. Книга 3, стр.62



Отображение самоизменяющихся баннеров

с помощью JavaScript

Баннеры присутствуют практически на каждом Web-сайте коммерческой на — правленности. Замысел прост: отображение небольшого графического изображе — ния, рекламирующего компанию или продукт. Вместо того чтобы заполнять весь экран рекламой (и навсегда отпугнуть посетителей от вашего сайта), вы можете отображать (неограниченную) последовательность рекламных изображений внут — ри небольшой области на экране, заменяя одну картинку другой через заданные

интервалы времени. Собственно говоря, отображение баннеров во многом похо —

дит на создание анимации (о которой вы читали в предыдущем практикуме). И

анимация, и самозаменяющиеся баннеры требуют от ЛУеЬ-браузера отображения серии картинок одной за другой. В случае баннера, однако, вам нужно, чтобы браузер оставлял каждую картинку на экране в течение 5—10 секунд, чтобы у по — сетителя было достаточно времени на просмотр рекламы.

Глава 8. JavaScript 43 7





ПРАКТИКУМ

Чтобы создать самозаменяющийся (вращающийся) баннер, включите обработчик события onLoad, аналогичный приведенному ниже, в дескриптор HTML — кода Web-страницы:







В данном случае обработчик события onLoad дает Web-браузеру указание выз —

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

Самоучитель по креативному веб-дизайну. Книга 3, стр.63



HTML & Web Design Tips & Techniques



name=»banner» src= «images/Banner 1. jpg»X/td>







Наконец, объявите между начальным и конечным дескрипторами сценария () в заголовочной части HTML-кода Web-страницы функцию rotateBanner (), аналогичную показанной ниже:



function rotateBanner(BannerSrc)

{

var TimerlD

// Заменить изображение

document. banner. src = BannerSrc;

// Ожидать тайм-аута и вызвать саму себя для замены

//на следующее изображение

if (BannerSrc == «Bannerl. jpg»)

TimerlD = setTimeout(«rotateBanner(‘Banner2.jpg’)»,5000);

else if (BannerSrc == «Banner2.jpg»)

TimerlD = setTimeout(«rotateBanner(‘ВаппегЗ. jpg’)»,5000);

else if (BannerSrc == «Banner3.jpg»)

TimerlD = setTimeout(«rotateBanner(‘Banner4.jpg’)»,5000);

else

TimerlD = setTimeout(«rotateBanner(‘Banner1.jpg’)»,5000);

return;

}



Каждый раз, КОГДа фуНКЦИЯ 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 дает возможность изменить имя целе-’ вой закладки, не меняя при этом файл, который должен извлечь браузер. Пред — положим, например, у вас есть следующая гиперссылка, которая указывает на

Самоучитель по креативному веб-дизайну. Книга 3, стр.64

Закладку monday на Web-СТранице events. htm:



События сегодняшнего дня

Полагая, что это первая гиперссылка на странице, можно определить опера —

тор 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-кода, ана — логичного показанному ниже:



Полезные ссылки
Случайные записи
  • 15.03.2011">Руководство по actionscript. часть 3, стр. 059
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 055
  • 14.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.69
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 039
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 049
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 018
  • 15.03.2011">Руководство по actionscript. часть 3, стр. 047
  • 08.12.2012">Что посмотреть после работы?
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.77
  • 18.03.2011">Руководство по actionscript. часть 2, стр. 116
  • 25.02.2011">Руководство по actionscript. часть 6, стр. 077
  • 18.03.2011">Руководство по actionscript. часть 2, стр. 115
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.52
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 079
  • 22.02.2013">Новая информация о Destiny
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...