В объектно-ориентированных языках (таких как 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-страницу с моим
Нижееледующий сценарий вставит в 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(«Чтобы продолжить, щелкните на кнопке ОК.»);
Как вы, наверное, догадались, прежде чем вызывать функцию, определенную
пользователем, вы должны «определить», или объявить, саму функцию. Програм —
40 6 Глава 8. JavaScript
мисты. называют оператор, которые определяет имя функции и перечисляет ее
операторы, объявлением (declaration) функции. В приведенных ниже HTML-ут —
верждениях показано сначала объявление функции heiioworid(), которое нахо- дится между первой парой дескрипторов сценария ( ) внутри
заголовка Web-страницы. Далее в HTML-коде показан оператор, который соб —
ственно «вызывает» функцию, — сразу же перед дескриптором в теле Web-страницы. (Когда вы «вызываете» функцию, вы даете Web-браузеру указание выполнить операторы, которые вы перечислили в определении функции.)
function helloWorld()
{
alert(«Привет. от моей первой JavaScript-функции!»)
return;
}
// —>
Web-страница с JavaScript-функцией
Нижеследующий сценарий выведет на экран окно сообщения.
- И!
// Записать строку текста на Web-страницу
document .write («
Чтобы продолжить, щелкните ОК»);
Поскольку браузер загружает содержимое заголовочной части в первую оче — редь, помещением всех объявлений функций в заголовок вы обеспечите, что к моменту, когда браузер дойдет до той точки в HTML-коде, где вы делаете пер — вый вызов функции, они будут считаны в память. Загрузка определенных пользо — вателем функций до отображения какой-либо части Web-страницы также дает га- рантию того, что все функции, которые вы привязали к обработчикам событий, будут доступны браузеру (и не будут неопределенными), когда посетитель начнет взаимодействовать с объектами на Web-странице и тем самым инициировать со — бытия, побуждая обработчики событий вызывать ваши функции.
Вызов JavaScript-функции в обработчике события
В предыдущем практикуме вы научились вызывать (то есть выполнять опера — торы) JavaScript-функций путем записи оператора, содержащего имя функции. Можно также сделать так, что Web-браузер будет выполнять JavaScript-функцию автоматически в ответ на то или иное событие. События, на которые может реа- гировать Web-браузер, включают в себя загрузку и выгрузку Web-страницы брау- зером, щелчок или наведение курсора мыши на кнопку, гиперссылку или поле формы. Обработчик событий — это конструкция, которая добавляется в HTML — дескриптор и дает Web-браузеру указание выполнить оператор JavaScript или вызвать функцию в ответ на то или иное действие браузера или посетителя.
ПРАКТИКУМ
Например, если вы хотите, чтобы Web-браузер «что-нибудь сделал», прежде чем
выгрузить Web-страницу, добавьте в дескриптор
Web-страницы обработчик
события onunioad. Обработчик события onUnioad в дескрипторе Web- страницы, определенный приведенными ниже HTML-утверждениями, будет вы — водить на экран окно сообщения, аналогичное показанному на рис. 8.4, всякий раз, когда Web-браузер покидает текущую Web-страницу:
щелчок на кнопке Назад, Вперед или Обновить браузера. Всякий раз, когда по — сетитель дает Web-браузеру указание выгрузить текущую Web-страницу и заме —
нить ее другой страницей (или даже той же самой страницей), обработчик собы —
тия onUnioad в данном примере дает Web-браузеру указание вывести на экран
окно сообщения. Посетитель затем должен будет щелкнуть на кнопке ОК в ниж — ней части окна сообщения, прежде чем Web-браузер выгрузит Web-страницу, «ус —
тупая место» следующей. Кроме выполнения одного или нескольких операторов JavaScript, вы можете вызвать с помощью обработчика также определенную пользователем или встроенную функцию. Например, обработчик события onclick в дескрипторе в приведенных ниже HTML-утверждениях дает Web — браузеру указание вызвать определенную пользователем функцию
youWannaLeave () , когда посетитель щелкнет на тексте дескриптора :
Обработчики событий — это специальные элементы, используемые в HTML — дескрипторах для того, чтобы Web-браузер выполнял оператор JavaScript или вы- зывал функцию, когда посетитель делает щелчок на элементах страницы или на — водит на них курсор мыши. Собственно говоря, JavaScript предусматривает обработчик события практически для каждого действия, которое может предпри — нять пользователь, взаимодействуя со страницей. Кроме того, JavaScript предус —
матривает даже такие обработчики событий, как onLoad и onUnioad, которые об- рабатывают действия, предпринимаемые на Web-странице самим браузером. Более того, с помощью обработчиов событий onResize и onMove вы можете отслеживать перемещение или изменение посетителем размеров окна Web-браузера.
В первом столбце таблицы 8.7 перечислены имена доступных обработчиков событий. Во втором столбце дается пояснение действий посетителя, которым инициируется каждое из событий; здесь же приведены HTML-дескрипторы, в которые можно вставлять данный обработчик события. Чтобы выполнять функ —
цию или оператор (операторы) JavaScript с помощью обработчика события, выбе — рите на Web-странице объект, который будет отслеживаться Web-браузером. За- тем вставьте имя обработчика события вместе с оператором (операторами), которые Web-браузер должен будет выполнить, или функцией, которую он должен будет выз- вать, в дескриптор, с помощью которого вы поместили объект на страницу в виде
обработчик события=»оператор» ИЛИ обработчик события=»имя функции()».
410 Глава 8. JavaScript
Глава 8. JavaScript 41 1
ПРАКТИКУМ
Предположим, например, вы хотите, чтобы в результате щелчка посетителем на одной из кнопок формы Web-браузер вызывал определенную пользователем фун —
кцию caicuiateTotais() . Вставьте в определение кнопки обработчик события onclick, как показано в последней строке следующего ниже дескриптора
:
Теперь, благодаря обработчику события onclick в дескрипторе
, Web —
браузер будет выполнять операторы в функции caicuiateTotai s () всякий раз,
когда посетитель щелкает на кнопке с именем CaicTotais.
Создание интерактивной навигационной панели с эффектом смены изображения при наведении курсора
В ваших путешествиях по Всемирной Паутине вам наверняка попадались на —
вигационные панели (или меню), кнопки на которых изменяли внешний вид при наведении на них курсора мыши. JavaScript позволяет создавать навигацион- ные панели с подобным эффектом смены изображения при наведении курсора. Все, что вам понадобится, — это два различных графических изображения для каждой кнопки на навигационной панели и обработчики событий
onMouseOver () и onMouseOut о в дескрипторах, определяющих гиперссылки,
закрепленные за каждой кнопкой в панели меню. Например, чтобы отобразить такое навигационное меню, как показано на рис. 8.5, вам потребуется HTML — код, аналогичный приведенному ниже:
412 Глава 8. JavaScript
Вставляя картинку между начальным и конечным дескрипторами гиперссыл — ки (), вы можете использовать графическое изображение так же, как вы использовали бы текстовую гиперссылку. Когда посетитель щелкает где-то внутри графического изображения (кнопки) в навигационной панели, браузер извлекает Web-страницу, указанную атрибутом href в дескрипторе, предшествующем каждой картинке.
Чтобы снабдить навигационную панель эффектом смены изображений при наве — дении курсора мыши (также называемым эффектом «переката» (rollover)), вам нужно, чтобы Web-браузер изменял отображаемое графическое изображение, ког —
да посетитель сайта проводит курсор над любой из кнопок в меню. Следователь — но, вам понадобятся два графических изображения, одно из которых будет ото- бражаться, когда курсор мыши находится над кнопкой меню, а второе — когда курсор мыши находится в другой области страницы. (Лучше всего, если эти два изображения будут приблизительно одного и того же размера.) Затем вам нужно
будет объявить JavaScript-функцию, подобную следующей, которая будет осуще-. ствлять подмену изображений, изменяя свойство sr c изображения в массиве images документа. (Когда вы заменяете одно изображение другим в массиве images, Web-браузер автоматически отображает на экране новое изображение вместо исходного в своем окне.)
Первый оператор в функции newimage() использует строку, переданную в па —
раметре NewButton, для формирования пути и имени файла изображения, кото — рое Web-браузер должен вывести на экране. Второй исполняемый оператор фун —
кции затем заменяет путевое имя текущего изображения в свойстве sr c массива
images документа именем (с путем) файла нового изображения, которое браузер
должен отобразить. (Значение параметра imageindex сообщает функции, какое
Глава 8. JavaScript 413
из свойств sr c в массиве заменять.) После того, как вы объявили — предпочтитель —
но в заголовочной части Web-страницы — функцию (такую как newimage(), которая производит подмену имен файлов изображений), вам остается только добавить в
каждый дескриптор События onMouseOver И onMouseOut, как показано НИЖе:
Обработчик события 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-страницы, но и отдельные объекты на странице. Например, вы можете счи —
тать содержимое свойства 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 [индекс фс-рмы] .свойство, К СВОЙ — ствам каждого элемента формы вы обращаетесь с помощью записи вида
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 —
браузе р ДОЛЖен СОЗДаТЬ маССИВ 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-наборе на жестком диске посетителя. Тогда можно будет извлекать