Июнь 2010

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

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



ПРАКТИКУМ

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



document. write(«Сообщение»);



JavaScript воспринимает текущую Web-страницу как объект document, и его метод write (как следует из имени функции) записывает переданный ему текст

на Web-страницу. Следовательно, чтобы Web-браузер выполнил функцию (то есть

40 4 Глава 8. JavaScript





метод), связанную с объектом, вам нужно записать в своем сценарии вызов фун —

кции в виде имя об»ьекта. метод(). Приведенный ниже HTML-код, например, дважды вызывает метод document. write() (то есть метод write объекта document), чтобы отобразить текст «Добро пожаловать на Web-страницу с моим

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



HTML & Web Design Tips & Techniques

Нижееледующий сценарий вставит в Web-страницу текст.







// Записать на Web-страницу строку текста

document. write («Добро пожаловать на Web-страницу «) ;

document. write («с моим первым JavaScript-сценарием.») ;

// — >



Если ваш Web-браузер поддерживает JavaScript, прямо перед этим

текстом вы увидите приветственное сообщение.







Рис. 8.3. Web-страница с приветственным сообщением, сгенерированным JavaScript



Обратите внимание, что сценарий в этом примере дважды вызывает метод

document. write() в связи с накладываемым издательской компанией ограниче — ниями на длину печатной строки книги. Когда вы вызываете один и тот же ме —

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

абзац в этом примере с помощью одного вызова метода document. write().

Используя метод для вставки текста в Web-страницу document. write о, обя — зательно снабжайте текст, который вы хотите отобразить, какими-то HTML-деск — рипторами форматирования. Обратите внимание, что текст во втором вызове

Глава 8. JavaScript 40 5





функции document. write() в данном примере не начинается с дескриптора.

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

Для создания текстовой строки, передаваемой методу document, writ e о, можно также использовать операции манипулирования строками JavaScript. Если

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

так, чтобы браузер в то же время отображал ее в виде одной строки текста, вы

МОЖете ИСПОЛЬЗОВаТЬ ДЛЯ ЭТОГО НеСКОЛЬКО ВЫЗОВОВ фуНКЦИИ document. writ e () , как показано в примере ранее. Или же вы можете сделать это с помощью конка — тенации строк (+) и одного вызова функции, как показано ниже:



document. write («Добро пожаловать на Web-страницу » +

«с моим первым сценарием JavaScript.«) ;



Вызов определенной пользователем функции

JavaScript

Из предыдущего практикума вы узнали, что функции, которые пишете вы,

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

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

document. write()), записывая вызов функции в операторе JavaScript следую —

щим образом: имя объекта. метод(). Конструкция document, write (сообщение), например, дает Web-браузеру указание вызвать метод (функцию) write объекта

document И передать ему текстовую Строку сообщение.



ПРАКТИКУМ

Встроенные функции JavaScript связаны с тем или иным объектом (например,

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

ФУНКЦИЮ Путем Обращени я К Объекту И фуНКЦИИ В ВИДе имя_рб«ьекта. имя_функ- ции(), вы вызываете созданную вами функцию, попросту помещая ее имя в опе — ратор или выражение. Например, приведенный ниже HTML-код дает Web-брау —

зеру указание вызвать определенную пользователем функцию heiioworid после

того, как он вызовет метод document. write о для вставки строки текста в теку — щую Web-страницу:





// Записать строку текста на Web-страницу

document. write(«Чтобы продолжить, щелкните на кнопке ОК.»);

// Вызвать определенную пользователем функцию JavaScript «helloWorld»

helloWorld();

// — >



Как вы, наверное, догадались, прежде чем вызывать функцию, определенную

пользователем, вы должны «определить», или объявить, саму функцию. Програм —

40 6 Глава 8. JavaScript





мисты. называют оператор, которые определяет имя функции и перечисляет ее

операторы, объявлением (declaration) функции. В приведенных ниже HTML-ут —

верждениях показано сначала объявление функции heiioworid(), которое нахо- дится между первой парой дескрипторов сценария ( ) внутри

заголовка Web-страницы. Далее в HTML-коде показан оператор, который соб —

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









function helloWorld()

{

alert(«Привет. от моей первой JavaScript-функции!»)

return;

}

// —>







Web-страница с JavaScript-функцией

Нижеследующий сценарий выведет на экран окно сообщения.

- И!

// Записать строку текста на Web-страницу

document .write Чтобы продолжить, щелкните ОК»);

// Вызвать JavaScript-функцию helloWorld helloWorld();

// — >



Теперь, когда вы убрали окно сообщения, как отобразить его снова?

Ведь в HTML нет дескриптора цикла, с помощью которого можно было бы

дать браузеру указание прочитать HTML-код Web-страницы и выполнить

функцию снова.

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

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



Вызов JavaScript-функции в обработчике события

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



ПРАКТИКУМ

Например, если вы хотите, чтобы Web-браузер «что-нибудь сделал», прежде чем

выгрузить Web-страницу, добавьте в дескриптор Web-страницы обработчик

события onunioad. Обработчик события onUnioad в дескрипторе Web- страницы, определенный приведенными ниже HTML-утверждениями, будет вы — водить на экран окно сообщения, аналогичное показанному на рис. 8.4, всякий раз, когда Web-браузер покидает текущую Web-страницу:

Самоучитель по креативному веб-дизайну. Книга 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-наборе на жестком диске посетителя. Тогда можно будет извлекать



Полезные ссылки
Случайные записи
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.69
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 135
  • 06.07.2011">Небольшие хитрости дизайна
  • 20.03.2011">Руководство по actionscript. часть 2, стр. 073
  • 19.03.2011">Руководство по actionscript. часть 2, стр. 109
  • 02.03.2011">Руководство по actionscript. часть 5, стр. 081
  • 27.07.2011">iPhone 5 получит Bluetooth 4.0!
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.139
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 039
  • 02.03.2011">Руководство по actionscript. часть 5, стр. 085
  • 05.03.2011">Руководство по actionscript. часть 5, стр. 017
  • 01.03.2011">Руководство по actionscript. часть 5, стр. 132
  • 04.03.2011">Руководство по actionscript. часть 5, стр. 047
  • 18.03.2011">Руководство по actionscript. часть 2, стр. 121
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.104
Опрос

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

View Results

Loading ... Loading ...