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

onUnload=»alert(‘Спасибо, что зашли!’)»>

HTML & Web Design Tips & Techniques

Посетите сайт



NVBizNet. com
.









Web-браузер выполнит это же действие при замене

Web-страницы в ответ на щелчок на гиперссылке или

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

нить ее другой страницей (или даже той же самой страницей), обработчик собы —

тия onUnioad в данном примере дает Web-браузеру указание вывести на экран

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

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

youWannaLeave () , когда посетитель щелкнет на тексте дескриптора :











function youWannaLeave()

{

alert(«Что, уже уходите?»)

return;

}

// —>







HTML & Web Design Tips & Techniques

Посетите. сайт onClick=»youWannaLeave()»>NVBizNet. com.


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



Что такое обработчики событий JavaScript

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

матривает даже такие обработчики событий, как onLoad и onUnioad, которые об- рабатывают действия, предпринимаемые на Web-странице самим браузером. Более того, с помощью обработчиов событий onResize и onMove вы можете отслеживать перемещение или изменение посетителем размеров окна Web-браузера.

В первом столбце таблицы 8.7 перечислены имена доступных обработчиков событий. Во втором столбце дается пояснение действий посетителя, которым инициируется каждое из событий; здесь же приведены HTML-дескрипторы, в которые можно вставлять данный обработчик события. Чтобы выполнять функ —

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

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

обработчик события=»оператор» ИЛИ обработчик события=»имя функции()».



410 Глава 8. JavaScript



Глава 8. JavaScript 41 1





ПРАКТИКУМ

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

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

:



type=»button» name=»CalcTotals» value=»Calc»

onClick=»calculateTotals()»>



Теперь, благодаря обработчику события onclick в дескрипторе
, Web —

браузер будет выполнять операторы в функции caicuiateTotai s () всякий раз,

когда посетитель щелкает на кнопке с именем CaicTotais.



Создание интерактивной навигационной панели с эффектом смены изображения при наведении курсора

В ваших путешествиях по Всемирной Паутине вам наверняка попадались на —

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

onMouseOver () и onMouseOut о в дескрипторах, определяющих гиперссылки,

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

412 Глава 8. JavaScript







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

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



ПРАКТИКУМ

Чтобы снабдить навигационную панель эффектом смены изображений при наве — дении курсора мыши (также называемым эффектом «переката» (rollover)), вам нужно, чтобы Web-браузер изменял отображаемое графическое изображение, ког —

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

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

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



Первый оператор в функции newimage() использует строку, переданную в па —

раметре NewButton, для формирования пути и имени файла изображения, кото — рое Web-браузер должен вывести на экране. Второй исполняемый оператор фун —

кции затем заменяет путевое имя текущего изображения в свойстве sr c массива

images документа именем (с путем) файла нового изображения, которое браузер

должен отобразить. (Значение параметра imageindex сообщает функции, какое

Глава 8. JavaScript 413



из свойств sr c в массиве заменять.) После того, как вы объявили — предпочтитель —

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

каждый дескриптор События onMouseOver И onMouseOut, как показано НИЖе:





td width=»87″ height=»34″>

onmouseover=»newlmage(0,’CyanChoicel’)»

onmouseout=»newlmage(0,’YellowChoicel’)»>

height=M34″ /X/aX/td>



width=»87″ height=»34″>

onmouseover=»newlmage(1,’CyanChoice2′)»

onmouseout=»newlmage(1,’YellowChoice2′)»>

height=»34″ /X/aX/td>

width=»87″ height=»34″Xa href =»Figure08-06 .htm»

oranouseover=»newlmage(2,’CyanChoice3′)»

onmouseout=»newlmage(2,’YellowChoice3′)»>

border=»0″ src=MYellowChoice3.jpg» width=»87″

height=»34″ /X/aX/td>





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

сылку, то есть на графический элемент типа «кнопки» на навигационной панели. Аналогично, событие onMouseOut дает Web-браузеру указание вызывать функцию newlmage () всякий раз, когда посетитель убирает курсор мыши с гиперссылки (то есть с графического изображения) на навигационной панели. Просмотрев

код, вы заметите, что обработчик события onMouseOver передает функции newlmage () новое (голубое вместо желтого) изображение, тогда как обработчик события onMouseOut передает функции newlmage о исходное (желтое) изображе- ние, заданное атрибутом sr c в дескрипторе . В результате «кнопки» навига- ционной панели выгладят так, как показано на рис. 8.5, за исключением одной

кнопки, на которую посетитель сайта навел хурсор мыши — как выглядит она, мож — но увидеть на рис. 8.6.



41 4 Глава 8. JavaScript



Использование массивов объектной модели

JavaScript «видит» Web-страницу как набор свойств (properties) и объектов

(objects), сохраненных в массиве с именем document. Свойства, сохраняемые Web —

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

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

тать содержимое свойства document. cookies, чтобы определить параметры, ра — нее заданные посетителем Web-страницы. Затем вы можете задать значения

document. bgcolor и document. fgCoior такие, чтобы изменить цвета фона и тек — ста Web-страницы (соответственно) на цвета, выбранные посетителем. Изменив цвета Web-страницы, вы также наверняка измените цвета текста посещенных и непосещенных гиперссылок так, чтобы их цвета не совпадали с цветом фона

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

шний вид Web-страницы в зависимости от значений cookie-набора или данных, введенных посетителем в Web-браузере.



ПРАКТИКУМ

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

ный ниже JavaScript — будучи помещенным после начального дескриптора

в HTML-код Web-страницы — отобразит название Web-страницы, URL — адрес и дату последней модификации:







document. write («Название Web-страницы: » +

document. title + «

«);

document. write («URL/адрес в Web: » +

document. URL + «

«);

document. write’(«Дата последнего изменения: » +

document. lastModified + «

«);

// — >



Кроме свойств, описывающих Web-страницу и то, как она выглядит, массив

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

щает свойства подключаемых модулей в массив document. piugins, свойства ги —

перссылок — в массив document. links, свойства изображений — в массив

document. images И Т. Д.

Глава 8. JavaScript 415





Обращаться к свойства объектов на Web-страницы через массив документа

можно аналогично тому, как вы обращались к свойствам самой Web-страницы, —

С ПОМОЩЬЮ запис и ВИДа ^сшпепЪ. тип_объекта[индекс_объекта_данного__ти -

па].свойств о

Например, для обращени я к значени ю атрибута sr c (или URL-адрес )

третьег о изображени я н а Web-страниц е будет использоватьс я запис ь

document. images[2] .src. (Помните, первый элемент в массиве JavaScript имеет индекс 0, поэтому индекс третьего элемента — 2, а не 3.).

Особый случай в массиве документа представляет элемент формы. Элемент

форМЫ — ЭТО Не ПРОСТО МаССИВ (как Объекты images, link s И plugins), ПОЗВОЛЯ — ЮЩИЙ обратиться к каждой или, может быть, нескольким формам на Web-странице;

элемент document. forms сам по себе является массивом. Следовательно, тогда как вы можете обратиться к свойствам формы (таким как ее имя, метод, действие и

Т. Д.) С ПОМОЩЬЮ Записи ВИДа document, forms [индекс фс-рмы] .свойство, К СВОЙ — ствам каждого элемента формы вы обращаетесь с помощью записи вида

document. forms[индекс формы].elements[индекс_элемента].свойство.

Web-страница, показанная на рис. 8.7, имеет пять объектов: три графических изображения, одну форму и три гиперссылки. Обратите внимание, что две гра —

фические кнопки («Отправить» и «Очистить») в нижней части страницы в дан —

ном примере являются на самом деле изображениями-гиперссылками, поэтому они учтены и как объекты-изображения, так и как объекты-гиперссылки.

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

страницы, в первый элемент массива

images документа: document. images [ 0] .

Аналогично, браузер сохраняет свойства второго обнаруженного им в HTML-коде страницы графического элемента (графи — ческого элемента кнопки «Отправить») во втором элементе массива images докумен —

та: document. images[l]. Далее, браузер со — храняет свойства третьего изображения на странице (графического элемента кнопки «Очистить») в третьем элементе массива

images документа: document. images [2 }. (Как и в случае со всеми прочими объекта - ми на Web-странице, браузер сохраняет свойства каждого объекта в массиве объек - тов соответствующего ему типа (в данном

Случае, images) В ТОМ Порядке, В КОТОрОМ он обнаруживает дескрипторы в HTML-коде Web-страницы.)

41 6 Глава 8. JavaScript





Браузер сохраняет свойства (имя, длину, метод действия и т. д.) первой (и единственной) формы на текущей Web-странице в первом элементе массива

forms документа: document. forms[0]. Как и сама Web-страница, форма обычно имеет более одного элемента. (В данном примере форма имеет три элемента: три текстовых поля ввода.) Чтобы сохранить свойства элементов формы, Web —

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

браузе р ДОЛЖен СОЗДаТЬ маССИВ form s Документ а ка к маССИВ маССИВОВ elements. Сделав это, Web-браузер сможет сохранить свойства элементов формы из данного

примера В document, forms [0] .elements [0], document, forms [0] .elements [1] И

document. forms[0] .elements[2] . (Браузер сохраняет свойства элементов формы

В массиве element s массива document. forms В ТОМ ПОрЯДКе, В КОТОРОМ ОНИ ОП —

ределены в форме.) Наконец, браузер сохраняет свойства трех гиперссылок на странице из данного примера в элементах массива link s документа:

document. links[0], document. links[1] И document. links[2] В ТОМ ПОрЯДКе, В

котором он находит гиперссылок в HTML-коде Web-страницы. (На Web —

странице есть три гиперссылки — по одной закреплено за каждой из кнопок внизу

формы, а третья закреплена за текстом «NVBizNet. Com» в нижней части страницы.)



Обращение к объектам Web-страницы по имени

(а не по позиции в массиве)



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

ботать со свойствами объекта, вы должны сначала определить позицию (индекс)

в массиве документа. Чтобы определить индекс, сосчитайте HTML-дескрипторы, вставляющие объекты одного и того же типа, пока не дойдете до нужного вам объекта. Зная индекс объекта, вы можете обратиться к любому из свойств масси —

ва С ПОМОЩЬЮ Записи ВИДа document. тип_объекта[индекс_объекта_данного_

типа] .свойство. Например, чтобы задать атрибут (или свойство) sr e третьего

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

document. images[2].srс = «images/NVBizNet. JPG»;



В массивах JavaScript отсчет элементов начинается с нуля, а это значит, что

третий элемент массива находится по адресу document. images[2]. Следователь- но, вышеприведенный оператор изменит источник (или путь и имя файла) изображения, вставленного в Web-страницу третьим дескриптором . (После того, как вы измените свойство sr e изображения в массиве images документа, Web-браузер заменит изображение, отображаемое на Web-странице.)

Обращение к объектам Web-страницы по номеру становится трудоемким, если на странице много объектов одного и того же типа. Предположим, напри —

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

жения, СОСЧИТав ДеСКрИПТОрЫ , Идущие перед ДеСКрИПТОрОМ ,

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

Глава 8. JavaScript 41 7





ПРАКТИКУМ

Если же вы дадите объекту Web-страницы имя, вы сможете затем работать

со свойствами объекта, по имени с помощью записи вида

document. имя объекта. свойство. Например, если в HTML-коде Web-страницы имеется следующий дескриптор :

img name=»logo» width=»78″ height=»61″

src=»images/picture. GIF»

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



document. logo. src = «images/NVBizNet. JPG»;



Хотя данный пример показывает только, как использовать имя объекта вместо

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

ВКЛЮЧает В Себя атрибут name, ВЫ МОЖете заменить ЗапИСЬ тип_объекта[индекс_

объекта_данного_тила] именем объекта и записывать обращение к тому или

ИНОМУ СВОЙСТВУ Объекта как document. имя_обтьекта. свойство.



Использование содержимого объекта документа

Прежде чем визуализировать Web-страницу на экране, Web-браузер создает объект document. Считывая HTML-код Web-страницы, браузер сохраняет значе —

ния атрибутов Web-страницы (таких как цвет фона, цвет текста, название и т. д.)

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

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

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

ранее сохраненные значения cookie-набора из свойства document. cookie объекта документа и использовать их для заполнения элементов формы внутри массива

document. forms объекта документа.



ПРАКТИКУМ

Еще один вариант использования объекта документа — предотвращение захода посетителей напрямую на страницу, находящуюся внутри доступной только для

зарегистрированных пользователей части сайта. Свойство document. referrer дает URL-адрес Web-страницы с гиперссылкой, по которой посетитель перешел

на текущую страницу. Если строка символов, сохраненная в document. referrer, пустая или не включает в себя доменное имя вашего сайта, ваш сценарий может дать браузеру указание загрузить страницу входа на сайт при помощи оператора, аналогичного показанному ниже:

418 Глава 8. JavaScript





self. locatio n = «http://www. NVBizNet. com/login. htm»



(Строка document. referrer будет пустой, когда посетитель вводит URL-адрес

в адресной строке браузера или щелкает на закладке или пункте избранного.) В

данном примере Web-браузер отображает вместо запрошенной посетителем Web —

страницы страницу входа на сайт (iogin. htm).

Ниже рассматриваются свойства Web-страниц и массивы объектов, доступных

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

ства Web-страницы. (Свойства массивов объектов images и links объекта document рассматриваются в двух следующих практикумах.)

alinkcoior — это цвет «активной» гиперссылки на Web-странице. Гиперссыл —

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

Web-страницу Чтобы задать цвет, которым Web-браузер должен отображать «ак —

тивную» гиперссылку, определите оператор JavaScript вида document. alinkcoior

= цвет_активной ссылки (где цвет_активной ссылки — шеСТНаДЦатерИЧНЫЙ

триплет, задающий RGB-значения цвета в форме «#RRGGBB»).

anchors — это доступный только для чтения массив «именованных» гиперссы — лок (то есть объектов гиперссылки), дескрипторы которых включают в себя

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

ра JavaScript ВИДа число якорей = document. anchors. length.

applet s — это массив методов и свойств из всех Java-аплетов, определенных

между начальным и конечным дескрипторами аплета () на

Web-странице. Вы можете получить доступ к любому общедоступному (public)

свойству и выполнить любой общедоступный метод, определенный в Java-аплете

на Web-странице, обратившись к открытому свойству аплета с помощью записи

ВИДа document, applet s [индекс аплета] .свойство И К Общедоступному методу

аплет а С ПОМОЩЬ Ю з а п и с и ВИД а document. applets[индекс_аплета ] .мето д () .

Если дескриптор имеет атрибут name, можно пользоваться записями

вида document. имя аплета. свойство И document. имя аплета. метод () . Чтобы получить число Java-аплетов на Web-странице, воспользуйтесь оператором

JavaScript вида число аплетов = document. applets length.

bgcolor — это текущий цвет фона Web-страницы. В ы можете изменять цвет

фона Web-страницы с помощью оператора вида document. bgcolor = цвет_ф°на

(где цвет_фона — шестнадцатеричный триплет, задающий RGB-значения цвета в

форме «#RRGGBB»).

cookie (cookie-набор) — это строка длиной до 4 096 (4 Кб) символов, кото- рую вы можете сохранить на жестком диске посетителя. (Как создать и сохра — нить cookie-набор, вы узнаете в практикуме ниже в этой главе.) Чтобы извлечь имя cookie-набора и пары значений в строку, которую можно будет разобрать,

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

ВОСПОЛЬЗуЙТеСЬ Оператором ВИДа значение соок1е = document, cookie.

Глава 8. JavaScript 41 9





domain — это доменное имя Web-сервера, отправившего страницу браузеру.

Доменное имя Web-сервера можно получить с помощью оператора вида домен —

ное_имя = document. domain. (Web-браузер использует информацию в свойстве domain в качестве имени cookie-файла документа.)

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

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

QuickTime (.mov).) Если внедренный объект поддерживает Java, вы можете

получить доступ к тому или иному из его полей с помощью записи вида

document. embeds. [индекс_внедренного обгьекта] .поле (ИЛИ ПО имени В виде

document. имя_внедренного_объекта. поле, если ДССКрИПТОр имеет атри —

бут name.) Выполнить метод объекта,, поддерживающего Java, можно с помощью

запис и вид а document. embeds.[индекс^внедренного^объекта].метод( ) (ИЛИ ПО

ИМеНИ В ВИДе document. имя_внедренного_об’ьекта. мето д () , есл и дескрипто р

включает в себя атрибут name.) Чтобы получить число внедренных

объектов на Web-странице, воспользуйтесь оператором JavaScript вида число_

внедренных обгьетов = document. embeds. length.

fgCoior — это цвет текстового содержимого Web-страницы, не модифициро — ванного атрибутом color в дескрипторе. Чтобы изменить цвет текста,

воспользуйтесь Оператором ВИДа document. fgCoior = цвет_текста (где цвет тек —

ста — шестнадцатеричный триплет, задающий RGB-значения цвета в виде

«#RRGGBB»).

forms — это массив свойств и методов для всех объектов форм на Web-стра —

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

форм ы МОЖНО С ПОМОЩЬЮ запис и ВИДа document, form s [индекс_формы] .свойств о

(ИЛИ document. имя_формы. свойство) , а К Методу форМЫ — С ПОМОЩЬЮ

оператора JavaScript вида document. forms[индекс_формы].метод() (или

document. MMH^opMbi. MeTOflO). Чтобы работать со свойством элемента формы, ис —

пользуйте оператор JavaScript вида document, forms [индекс формы] .element s [ин -

декс_элемента] . свойство (ИЛИ document. имя формы. имя элемента. свойство). Аналогично, чтобы выполнит ь метод элемент а формы, обратитес ь к мето — ду, которы й вы хотите использоват ь в оператор е JavaScript, с помощь ю за —

пис и document. form s [индекс формы] . element s [индекс__элемента] . метод ()

(ИЛИ document. имя_формы. имя элемента. метод () ).

images — это массив свойств изображений, вставленных в Web-страницу с по — мощью дескрипторов . Доступные только для чтения свойства изображе — ний, КОТОрые МОЖНО ПОЛУЧИТЬ, — ЭТО name, border, complete, height, width,

vspace и hspace. С помощью JavaScript также можно извлекать и изменять свой —

ства sr c и lowsr c изображения. Чтобы получить доступ к свойству изображения,

воспользуйтесь ЗапИСЬЮ ВИДа document, images [индекс изображения] .свойство

ИЛИ document. имя изображения. свойство.

42 0 Глава 8. JavaScript





lastModified — это доступная только для чтения символьная строка, содержа —

щая местные дату и время последнего внесения изменений в Web-страницу Чтобы получить значение свойства lastModified, воспользуйтесь оператором JavaScript

ВИДа дата и_время последнего изменения = document. lastModified.

linkcoio r — цвет непосещенных гиперссылок на Web-странице. Чтобы задать

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

перссылки, воспользуйтесь оператором JavaScript вида document. linkcoior =

цвет непосещенной ссылки (где цвет нелосещенной_ссылки — шестнадцатерич —

ньш триплет, задающий RGB-значения цвета в виде U#RRGGBB»).

link s — это массив, содержащий свойства гиперссылок на Web-странице. К

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

рез массив links, ОТНОСЯТСЯ hash, hostname, host, href, pathname, port,

protocol, searc h И frame. Чтоб ы работат ь СО СВОЙСТВОМ ТОЙ ИЛИ ИНОЙ ГИПерС —

СЫЛКИ, ИСПОЛЬЗуЙте Запис ь ВИДа document, link s [индекс__ссылки] .свойств о ИЛИ

document. имя_ссылки. свойство.

referre r — это доступная только для чтения строка, хранящая Web-адрес Web-страницы, содержащей гиперссылку, по которой посетитель попал на теку — щую страницу. Например, если посетитель сайта, чтобы попасть на текущую страницу, щелкнул на гиперссылке на Web-странице index. htm Web-сайта NVBizNet. com, ВЫ МОЖете ПОЛуЧИТЬ ПОЛНЫЙ URL-адре с Web-СТраниЦЫ index. ht m

н а Web-Сайте NVBizNet. com С ПОМОЩЬЮ Оператора ВИДа иКЪ_откуда_пришел =

document, referrer. (Значение document, referrer будет Пустым, если ПОСети — тель извлек текущую страницу, набрав URL-адрес в адресной строке браузера, или если посетитель выбрал текущую страницу из списка избранного браузера.)

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

titl e — это доступная только для чтения строка, содержащая название текущей

Web-страницы, определенное текстом между начальным и конечным дескрипто —

рами названия () . Значение названия Web-страницы можно по —

лучить С ПОМОЩЬЮ Оператора ВИДа название страницы = document, title.

ur i — это доступная только для чтения строка, содержащая полный URL-ад — рес (то есть Web-адрес) текущей Web-страницы. Значение URL-адреса можно по —

лучить, с ПОМОЩЬЮ Оператора ВИДа текущий^иКЬ = document. url.

viinkCoior — это цвет ранее посещенных гиперссылок на Web-странице. Что — бы задать цвет, который должен использовать Web-браузер, отображая ранее посещенные гиперссылки, воспользуйтесь оператором JavaScript вида

document. viinkCoior = цвет_ранее_посещенной_ссылки (где цвет_ранее_посе —

щенной ссылки — шестнадцатеричный триплет, задающий RGB-значения цвета в

виде «#RRGGBB»).

Использование массива изображений JavaScript

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

HTML-коде Web-страницы дескриптор , он добавляет еще один элемент в массив images в объекте документа.

Глава 8. JavaScript 42 1





С помощью массива document. images можно изменить графическое изобра —

жение, отображаемое на Web-странице. В одном из предыдущих практикумов

(«Создание интерактивной навигационной панели с эффектом смены изображе- ния при наведении курсора») вы научились создавать эффект смены изображения

при наведении курсора, используя массив document. images для подмены одного графического элемента другим всякий раз, когда посетитель наводит курсор

мыши на изображение на странице. С помощью массива document. images мож —

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

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



Полезные ссылки
Случайные записи
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.71
  • 18.03.2011">Руководство по actionscript. часть 2, стр. 116
  • 25.10.2011">Прозрачные батарейки – скорое будущее
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 143
  • 04.03.2011">Руководство по actionscript. часть 5, стр. 050
  • 15.03.2011">Руководство по actionscript. часть 3, стр. 049
  • 01.03.2011">Руководство по actionscript. часть 5, стр. 133
  • 04.10.2010">Создание анимации в Photoshop
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 109
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.44
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.90
  • 14.03.2011">Руководство по actionscript. часть 3, стр. 081
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 111
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.121
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.9
Опрос

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

View Results

Loading ... Loading ...