WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!

trltd2Obj = Использование метода insertBefore в DOM = tr2td2Obj = Метод insertBefore обеспечивает средства формирова = ния объектных структур, помещая заданные объекты tr3td2Obj = tr2Obj = перед другими указанными объектами. Здесь использу ются два параметра, которые являются объектами:

rowlcolumnlObj (false) Возможное использование метода insertBefore (рав но как и других DOM-методов) — это формирование "Row = "Row column таблицы. Например, можно создать узел, скопировать = "Row column его и затем использовать insertBefore для создания таб- = "Row column "Row column лицы. Листинг 19.2 показывает конструкцию таблицы, = "Row column построенной с использованием этих методов. Объект returnValue = tableObj содержит три дочерних объекта: trlObj, и которые создаются с помощью следующих вы ражений:

trlObj = trltdlObj = createElement = tr2tdlObj = При использовании метода insertBefore объекты со бираются следующим образом:

.

(trltdlObj, // (tr2tdlObj, Как видно из приведенного выше кодового фрагмен та, последний дочерний объект (tr3Obj) вставляется в первую очередь, второй дочерний объект вставляется Использование метода swapNode перед ним, а первый дочерний (trlObj) вставляется пе Метод swapNode меняет местами указанные поддеревья, ред вторым встроенные в указанные узлы. Этот метод возвращает Листинг 19.2. Создание таблицы с помощью целое поддерево. Применение метода swapNode демон insertBefore.

стрируется в листинге 19.3.

Функция печатает дочерние элемен ты bodyNode вместе со свойством nodeName.

Building tables using DOM Использование метода removeNode Листинг Удаление узлов.

СОВЕТ Резюме DOM-объекты обращаются к полному содержимому Web-страницы, включая и графику, которая может Эта глава, посвященная DOM, представляет собой еще храниться в формате GIF. Первый графический сим один шаг вперед в изучении JavaScript. В ней обсужда вол в документе можно изменить путем замены его лись способы создания и изменения составляющих свойства src (src означает "source" — источник). В сущностей документа. Таким образом, зная структуру показанной ниже DOM-форме первое изображение и характеристики DOM-модели, ее можно применять просто заменяется на изображение с именем New_Title в формате GIF.

буквально где угодно, используя практически любой программный объект, включая приведенные выше сце Изображения в формате GIF и другие графические нарии. Вне этих можно проделывать то же файлы можно редактировать в пакете Paint Shop Pro самое с элементами управления ActiveX и от Jasc Software. Эта программа распространяется ми. Можно смело заявить о том, что появился новый свободно и ее можно выгрузить со множества сай ландшафт стандартизованных целевых платформ или тов, в том числе и с сайта Jasc. Она имеет полезные клиентских браузеров, которые впервые общаются на инструментальные средства редактирования и эффек ты, необходимые для создания превосходной Web- том же языке, который определяет графики.

Технологии программирования на динамическом HTML ЧАСТЬ В ЧАСТИ 20. Динамическая подмена 21. Визуальные эффекты 22. Каскадные таблицы стилей 23. Слои 24. Меню и панели инструментов DHTML 25. Взаимодействие с другими технологиями подмена В ГЛАВЕ Знание событий Виды динамических подмен Динамическая подмена (rollover) — это общий ме- позволяет захватывать это событие практически всем тод совершенствования страниц сайта с использовани- элементам на странице, а не только объектам Link и ем JavaScript. Фактически, это — одна из первых гло- Document:

бально используемых функций JavaScript, сохранившая <а свою популярность до сих пор. Другие методы, такие rolled как прокручиваемые сообщения строки состояния и тек onMouseDown стовые поля, исчезли с горизонта.

Событие onMouseOut используется объектами Link и Document с целью определения момента нажатия кноп событий ки мыши на определенном элементе. Для примера рас Создавая rollover-эффекты в рамках сайта, необходимо смотрим захват событий onMouseDown в дескрипторе глубоко разбираться в соответствующих событиях JavaScript, Несмотря на то что события уже рассматри <а вались в главе 14, стоит все же вернуться к данной теме.

onMouseOver onMouseUp Событие onMouseOver используется объектами Link и Событие onMouseUp используется объектами Link и Document для определения момента установки указателя Document для определения момента отпускания кноп мыши на элементе. Internet Explorer позволяет захваты- ки мыши, ранее нажатой на определенном элементе. В вать эти события практически всем элементам на стра- примере показан захват таких событий в дескрипторе нице, а не только объекты Links и Document. Пример демонстрирует захват событий onMouseOver дескрип <а тором <а>:

<а rolled Виды динамических подмен Here Каждому разработчику необходимо не только решать, onMouseOut какой вид rollover-эффектов необходим на сайте, но и Событие onMouseOut весьма напоминает onMouseOver как его реализовать. Многие rollover-эффекты могут и точно так же может быть использовано объектами Link имитировать другие, поэтому все зависит только от и Document. Это событие определяет, когда указатель пользовательского браузера и от того, что именно под мыши покинул конкретный элемент. Internet Explorer держивает этот браузер.

Динамическая подмена Глава function Rollover-эффекты для изображений case Существует несколько методов реализации rollover-эф = фектов для изображений (rollover-изображений), но са мый простой заключается в создании двух массивов, case содержащих используемые изображения и ссылки в документе на индексные расположения в массиве Необходимо сохранить все изображе !

ния в массиве Image. Расположим на страни це два объекта специально для примера, представлен Последний шаг связан с захватом событий ного на рис. 20.1. Когда пользователь помещает курсор onMouseover и onMouseOut. Как упоминалось ранее, поверх изображения, происходит замена изображения это достигается с использованием дескриптора <а>. В на его rollover-версию. Массив изображений создается листинге 20.1 показан полный исходный код для зах с использованием следующего кода:

вата событий, а на рис. 20.2 — замененное изображение, // для хранения изображений когда над ним находится указатель мыши.

var = new = new Image (24, 24) Листинг 20.1. Полный исходный код для реализации = new Image (24,24) rollover-изображений _ var = new = new = new 6 тм Ричард Вагнер, Вайк Исчерпывающее руководство об основном языке сценариев Своевременные для создания полнофункциональных Web-приложений Объектно-ориентированная Исследуется связь JavaScript с Layer 2 height: 100;

left: 0;

position: absolute;

<р Layer 1 width: 100;

z-index: 2;

Layer

Layer 4 position:

top:

width:

height:

left:

position:

top: 40;

width:

z-index: 1;

visibility: hidden;

I yellow;

height:

left:

position:

top: 60;

width:

РИСУНОК 23.5. Изменение наложения слоев из предыдущего примера.

торое принимает четыре разных значения, перечислен-

чения visibility в hidden. Листинг 23.6 содержит данный код, а рис. 23.6 демонстрирует, что эти два слоя теперь не видны.

Управление накладывающимися слоями Листинг 23.6. Использование свойства visibility для Рассмотренные CSS-свойства позволяют создавать сокрытия элементов.

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

Pages:     | 1 |   ...   | 4 | 5 || 7 | 8 |   ...   | 10 |

«тм Ричард Вагнер, Вайк Исчерпывающее руководство об основном языке сценариев Своевременные для создания полнофункциональных Web-приложений Объектно-ориентированная Исследуется связь JavaScript с другими ...»

-- [ Страница 6 ] --

можно использовать Оператор if проверяет правильность структуры другое свойство или идентифицирующую переменную:

фрейма (в данном случае — наличие трех фреймов), а top. title) также правильность документа во втором фрейме (на Объекты Frame Глава Использование расширенных схем регистрации Приведенный ниже пример демонстрирует простую схему регистрации документа. Первый фрагмент кода Более сложные схемы регистрируют не только доку мент, но также и позицию документа в иерархической содержит файл для установки верхнего фреймового окна:

структуре фреймов. Если позиция документа изменя расположения функций во фреймовой структуре. Она Следующий фрагмент кода показывает файл доку- определяет расположение фрейма, передавая его имя мента: (self.name) родительскому фрейму, который присоединя ет к этому имени свое собственное имя и передает да лее эту информацию родительскому фрейму. Процесс Harley не зная ее расположения, и передачи параметров в нее

Существенная выгода, которую дают фреймы, заключа Softtail Series") ) ется в возможности модификации документа во фрей // ме, не затрагивая при этом другой фрейм. Независимо // продолжить выполнение от того, обновляется ли фрейм с помощью ввода пользо else // документ не // выполнить альтернативные действия вателя в другом фрейме или модифицируется программ но, существует несколько методов для внесения измене ний в соответствующие фреймы. Эти методы могут использовать HTML (с некоторыми расширениями Netscape), JavaScript или комбинацию их обоих.

Использование DOM Часть III Ссылки верхнее окно. (Спецификатор фрагмента, #, без URL и Возможно, самой простой методикой обновления сле- якорного имени, или идентификатор фрагмента, ссы дует считать использование ссылок для изменения те- лается на текущий документ.) Переназначение свойств кущего фрейма (загружая новый документ). Для того ссылки href и target можно сделать более чтобы направить новый документ в другой ис- путем объединения операторов присваивания с услов пользуют дескриптор якоря, имеющий атрибут target, ным и другими операторами. В следующем примере при для которого можно определить значение имени фрей- использовании фреймов файл, устанавливающий фрей ма или относительное имя. Относительные слова (в мы, загружается в родительское окно;

если же фреймы Netscape они называются magic target names) соответству- не используются, в окно загружается главный документ:

ют относительным свойствам окна, обсуждавшимся ра <А нее. Относительные имена, применяющиеся для целе != 0 ). href вых ссылок, всегда начинаются с символа и всегда. ' > записываются в нижнем регистре. Эти имена — _top, _parent и — соответствуют свойствам окна top, Обратите внимание на кавычки;

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

ссылка в одном фрейме должна обновить другой фрейм:

Нет необходимости переназначать href и target для каждой динамической ссылки. В предыдущем примере атрибут target можно установить в Для нефреймовой версии и _top эквивален тны. Если пользователь имеет неподдерживающий фрей мы браузер, то атрибут target игнорируется. мог быть написан этот путь:

Файл содержит дополнительную инфор- ) мацию для установки фреймов в окне:

Дескриптор ссылки может стать довольно длинным и громоздким, поскольку к его обработчику событий добавляется все большее количество операторов. Для упрощения ссылки можно использовать вызов функции:

Для загрузки нового документа в frame2 с помощью ссылки в (в frame4) эту ссылку записывают theHref() — пользовательская функция, которая вы следующим образом:

числяет условие и возвращает соответствующее значение для свойства href. Точно также theTarget() возвращает Для загрузки документа в верхнее окно и очистки соответствующее значение для свойства target. Эти фун фреймов используют такую строку:

кции должны вернуть значение независимо от того, яв ляется ли вычисленное условие true или false;

только неподдерживающий JavaScript браузер использует зна чения по умолчанию, установленные с помощью атри Динамические ссылки бутов TARGET и HREF. В качестве нефреймового аль Поскольку ссылки в JavaScript являются объектами, а тернативного примера рассмотрим следующий код:

href и target — свойствами ссылок, можно создать дина мическую ссылку, присваивая другие значения href и function if( != 0 ) target:

a else a = return a;

f Для поддерживающих JavaScript браузеров документ загрузится в текущий фрейм;

если же JavaScript Аналогично можно создать Таким же образом используют функции для других ссылок на стра не поддерживается, то текущий документ загружается в Объекты Frame Глава передавая соответствующие URL и целевые име- Метод write() на в вызовы функций. Возможно также для большого Третий способ обновления фрейма состоит в примене количества ссылок одну-две универсаль- нии методов или writeln(). JavaScript может ди намически генерировать документ во фрейме:

ных функции.

Часто динамические связи не нужны. Как правило, страница загружается в текущий фрейм, либо ссылка Demo появляется в навигационном меню, которое не видимо в нефреймовой версии и всегда предназначается для определенного фрейма. Однако, в тех немногих случа ях, когда динамические ссылки необходимы, они ока зываются весьма эффективными. К тому же, поддержка фреймовой и нефреймовой версий — не единственный Файл html случай, где динамические ссылки бывают нужны;

эти ссыл ки можно устанавливать в любом случае, по желанию.

Файлом может быть любой файл, даже пу стой. Однако, во избежание ошибки "Document contains Свойство no data" ("Документ не содержит данных") в файл необ Другой способ обновления фрейма, который не обяза ходимо поместить, по крайней мере, пробел или символ тельно требует применения ссылок, связан с использо возврата каретки.

ванием свойства href объекта Location. Это свойство Динамически загружаемый фрейм может взаимодей можно также применять вместе с обработчиком событий ствовать с пользователем с помощью ссылок или форм:

кнопки формы или с функцией. Не путайте объект Location со свойством location документа. — свой ство только для чтения, однако можно записывать значе Demo ния в window.location.href. Следующие операторы экви- В дополнение к записи свойства href можно также записывать свойство pathname объекта Location, которое определять путь или имя файла от корневого каталога сервера. (Конечно, имя хоста, равно как и про

токол и порт, не зависят от текущей страницы сайта.) Select a Background Для загрузки документа http://www.abc.com/foo/ CHECKED в framel, который в настоящее время имеет адрес: используется следу ющий код:

Однако, если текущий документ находится по адре су http://www.def.org/home.html или ftp://ftp.abc.com/ pub/abc.txt, необходимо задействовать свойство href.

DOM Часть III

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

Несмотря на то что с дескрипторами изображений обычно советуют использовать атрибут alt, этот атри бут в данном случае не обязателен, поскольку документ JavaScript-код, используемый для обновления фрей не должен отображаться в каком-либо браузере, в том мов, может оказаться очень сложным. Можно применять числе и неграфическом.

условные операторы, вычисления или любой сценарий Переменная al — это флажок, который устанавли для создания документа, обновляющего фрейм. Игры, вается после полной загрузки изображения. Использо слайдовые карты изображений и резуль вать этот флажок необязательно, но полезно для предот таты выполнения запросов в базы данных — вот только вращения выполнения сценария модификации фрейма некоторые примеры использования обновлений фрей до полной загрузки изображений:

мов.

!= Кеширование файлов wait, images are still Загрузочные модули, которые требуется включить в об новляемый фрейм, могут заранее для пре сценария дотвращения загрузки еще немодифицированного фрей ма. Для кеширования изображения до момента, когда Сценарии для фреймов с картами в нем возникнет необходимость, используют объект изображений Image. Однако, этот объект недоступен в ранних верси ях JavaScript-браузеров. Другая методика загрузки изоб- В Netscape Navigator 2.0 была введена поддержка кли ражения предполагает использование документа в скры- ентских карт изображений (хотя Netscape — не первый том фрейме: браузер, который стал это делать) наряду с фреймами и JavaScript. Клиентские карты изображений imagemaps, CSIM) обеспечивают существенную выгоду Frame to Cache по сравнению с существовавшими ранее серверными картами изображений. С помощью можно вклю чать файл карты как отдельный файл в документ с изоб ражением или ссылкой на него. Потребуется только отправить запрос на сервер для обработки и перенаправ ления на соответствующий URL. Пользователи будут Следующий код — это неотображаемый документ, видеть в строке состояния URL-адрес, связанный с кар предназначенный только для загрузки изображений, что той. Кроме того, CS1M можно использовать вместе со обеспечит запись изображений в кеш: старыми серверными картами изображений с целью обеспечения совместимости со старыми браузерами.

Свойства карт изображений Demo свойства объекта Area, которые можно изменять про граммно через JavaScript. Объект Area содержит обработ атрибут nohref, который предотвращает загрузку URL документа, присвоенного атрибуту href.

Объекты Frame Глава ПРИМЕЧАНИЕ Можно открывать и устанавливать имена новым ок Объекты и свойства карты изображений в ранних вер- нам, присваивая target имя, которое уже не использу сиях JavaScript-браузеров были не доступны. Объект ется. Новое окно, открытое таким способом, будет Area и его свойства появились в JavaScript Кро иметь имя, указанное в качестве значения атрибута ме того, в JavaScript 1.1 обработчик событий onClick target.

и атрибут nohref не функциональны для всех платформ.

Вызов функции Ссылки на объекты Area Дескрипторы области не всегда должны ссылаться на На объекты можно ссылаться с помощью массива документ. Можно осуществлять вызов функции, приме links. Массив links содержит все объекты Link и Area в няя протокол за которым следует имя функ документе. Нумерация элементов начинается с нуля. ции:

Следующий код демонстрирует пример документа со ссылкой и CS1M.

() Данный сценарий вызовет вместо документа опреде ляемую пользователем функцию Можно также использовать методы и операторы JavaScript. Эта мето дика особенно эффективна для фреймовой версии сай Softtails та, в которой серверная карта изображений представле на в виде навигационной кнопочной панели. Функция может включать различные операторы, предназначенные

Следующие фрагменты кода содержат простой сце нарий слайдовой демонстрации с кнопочной панелью для карты изображений, которая позволяет циклически Код для альтернативных серверных карт передвигаться вперед и назад в рамках последовательно изображений и текстовых для сти слайдов. Карта изображений также содержит кноп неграфических браузеров попросту опущен ки возврата в меню, таким образом, пользователь может выбрать другую слайдовую демонстрацию или вернуть ся на начальную страницу. Каждая слайдовая демонст В приведенном выше примере ссылка упоминается рация имеет имя последовательности, которое свою пер как поскольку это первый дескриптор вую часть формирует из имен файлов слайдов. Вторая ссылки или области в документе. На область ссы часть имени файла — порядковый номер, уникальный лаются как на т.к. это второй дескрип для каждого слайда в последовательности. Каждый из тор ссылки или области, агеаВ — это файлов слайдов имеет три переменных: имя последова — и, наконец, areaD тельности, порядковый номер слайда и общее количе document.

ство слайдов в последовательности. Сценарий читает эти На свойства href и target объектов Area, как и в слу три переменные, чтобы загрузить файл, опираясь на ту чае с объектами Link, можно ссылаться и присваивать им часть карты изображений, которая была нажата.

новые значения через массив links. Следующая строка Следующий фрагмент кода устанавливает фреймы:

кода изменяет значение свойства href для агеаВ так, что бы при нажатии на его область карты изображения вме сто загрузился бы документ Show Main Аналогично можно изменять свойство target:

Свойство и атрибут target должны определяться как имя фрейма или одно из специальных относительных Ниже приведен код из файла слов фрейма (_top, _parent, _self или _blank), но не как JavaScript-свойства (top, parent и т.п.).

Использование DOM Часть III Show - First Slide Ссылки на текущее окно В главе 9 обсуждалось использование window для ссылок на текущее окно. Однако, тогда не было сказано, что объект Window также содержит свойство под названием window, которое может служить инструментом для ссыл Во-вторых, можно ссылаться на дочерний фрейм, ки на само себя. Кроме того, свойство self объекта Window массив frames. Каждый фрейм в окне, или — это еще одно средство для ссылок на текущее или родительский фрейм, является элементом массива. На активное окно. Например, следующих две строки кода элементы массива frames ссылаются помощью программы функционально эквивалентны:

где i — число, соответствующее порядковому номеру = "Welcome to the Goat фрейма в родительском окне. Фреймы пронумерованы Farm Home Page" = "Welcome to the Goat Farm от нуля до числа, на единицу меньшего общего коли Home Page" чества фреймов. Следующий код определяет четыре фрейма:

Поскольку как window, так и self — синонимы теку щего окна, может показаться странным, что оба они включены в язык JavaScript. Как было показано в дыдущем примере, объяснение этому — гибкость;

по же ланию можно использовать как window, так и self.

Однако, насколько полезными могут быть window и self, настолько же они могут привести к путанице, если Следовательно, массив frames данного окна будет подойти к этому логически. В конце концов, свойство содержать четыре элемента:

объекта, которое используется как эквивалентный тер для frameA мин для самого объекта, довольно необычно. Следова для фрейма тельно, будет удобнее считать window и self для объекта для фрейма frameC Window зарезервированными словами, а не свойствами.

для фрейма Поскольку window и self — свойства объекта Window, использовать и window, и self в одном и том же Обратите внимание, что при ссылках на элемент контексте. Например, следующий код работать не будет:

массива frames в конце слова присутствует что указывает на множественное число.

Наконец, в средах window и self всегда относятся к окну, в котором выполняется JavaScript код.

Использование DOM Часть III Ссылки из дочернего фрейма родительский Name = Как было показано в данной главе, фреймы — это те же name is + myParentTitle) Dad's Method" Info" Кроме получения значений свойств, можно также обращаться к методам родительского окна. Например, листинг содержит исходный код HTML для роди тельского окна фреймов с методом опре деленным без внутренней реализации. Листинг 18. показывает, как дочернее окно получает доступ к это му методу. Когда пользователь нажимает на объект childButton, его обработчик событий onClick вызывает с передачей ключевого слова this в ка честве параметра. В свою очередь, вы зывает метод объекта parent, передавая в па раметре имя текущего объекта. На рис. показан результат.

Листинг 18.2. _ РИСУНОК 18.5. Вызов метода из родительского окна.

Родительское окно зачастую собой са 6 тм Ричард Вагнер, Вайк Исчерпывающее руководство об основном языке сценариев Своевременные для создания полнофункциональных Web-приложений Объектно-ориентированная Исследуется связь JavaScript с мое верхнее окно в оконной среде, но

ссылается на frameAB таким способом:

Series") // документ Можно также использовать следующую строку: // продолжить действия else // документ не // инициировать альтернативное действие = Для ссылок не существует промежу точного уровня между верхним и родительским окном, такого как "прародительское окно". Это, видимо, к луч Как и в случае фреймов, можно использовать более шему, что родительское окно — единственный термин, сложные схемы для регистрации информации о распо позаимствованный из генеалогии;

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

узера.

Если окнам браузера в момент открытия всегда при сваиваются имена, для одного из новых (дочерних) окон Окно верхнего уровня не будет проблемой сослаться на другое дочернее окно Подобно свойству parent в функции, свойство top объек через открывшее его (родительское) окно. В этом слу та Window позволяет ссылаться на самое верхнее окно в чае потребуется просто упомянуть имя окна, как было пределах мультифреймового окна или в наборе мульти показано в предыдущих разделах. Если окну в момент окон. При работе с одним открытия присвоено имя переменной другое окном свойства parent и top ссылаются на одно и то же дочернее окно может ссылаться на него таким способом:

окно. Однако, если имеются вложенные уровни мульти окон, top обращается только к окну самого высокого уровня, a parent может ссылаться как на это, Можно синхронизировать окна теми же методами, так и на другое родительское окно.

которые применяются для фреймов. Однако, при отсут ствии единственного окна верхнего уровня браузера или СОВЕТ иерархии окон, одно окно, открывшее другие окна, вы В окне верхнего уровня и родительских окнах удоб бирается в качестве точки синхронизации. Следующий нее всего хранить глобальные методы.

фрагмент кода — это пример сценария синхронизации окон:

Различие между данными окнами лучше всего про иллюстрировать на примере. Предположим, что имеет Harley ся два набора фреймов. Первый набор фреймов делит окно браузера горизонтально на фреймы, function 80% и 20% пространства (как показано на рис. 18.8).

// проверить, что страница находится в своем Второй набор фреймов разделяет на четыре квадранта // окне, а открывающееся окно (показанные на рис. 18.9) нижнее, занимающее 20%, / / корректный подокно окна самого верхнего уровня.

if ( (top. opener Frameset") ) Предположим, что для каждого дочернего фрейма a требуется получить заголовки его верхнего и родитель ского окон. Для этого можно определить общую функ else цию с именем которая бы возвращала эту function funCheck{ // зарегистрирован ли информацию вызвавшему ее окну. Так же, как дочер // документ ние окна могут обращаться к методам родительского Объекты Frame Глава окна, все фреймы в мультифреймовом окне имеют дос- Этот метод getName() вызывается дочерним фрей туп к методам окна верхнего уровня. Таким образом, мом после загрузки. Его можно вызывать, помещая сле окно верхнего уровня — это удобное хранилище для дующий код в каждом дочернем фрейме:

функций, которая должна быть глобально доступна для + relation + name is + Сценарий использует top для обращения к методу getName(), использует self для идентификации себя в качестве вызывающего окна, а также parent и top для topFrameset.htm | получения заголовков окон. На рис. 18.10 показан ре зультат после загрузки фреймов.

Листинги 18.4, 18.5 и 18.6 содержат исходный код для мультифреймового окна верхнего уровня (topFrameset.htm), мультифреймового окна нижнего уровня (bottomFrameset.htm) и одного из дочерних фреймов нижнего уровня Листинг 18.4. _ РИСУНОК 18.8. окно верхнего > > Warning text should go here for browsers with no РИСУНОК окно нижнего уровня.

Листинг 18.5.

Параметр callingObject представляет окно, вызываю щее функцию. Используя точечную нотацию, в преде лах рассматриваемого окна можно выполнять команду Параметры relation и parentName — стро > ки, обеспеченные вызывающим окном, но не управля емые в данной функции.

Использование DOM Часть III Более подробная информация о методике разрушения данных находится в главе 35.

Объект Location Объект Location формирует URL текущей страницы. Он имеет двойное назначение:

Is Frameset.

• Устанавливает объект Location для перехода на но top's Is Frameset.

вый URL.

• Извлекает определенные элементы URL и работает с ними. Без объекта Location для получения необхо димой информации потребовалось бы выполнять оп ределенные манипуляции над строкой Основная структура URL такова:

port pathname search hash I» name Is name Типичный URL может выглядеть, например, так:

Frameset Frameset.

i + РИСУНОК 18.10. Свойства parent и top.

Свойства объекта Location, каждое из которых явля Листинг 18.6.

ется элементом URL, сведены в табл.

Таблица 18.3. Свойства объекта Location.

in Bottom Атрибут Описание HOSTNAME Хост и имя домена либо IP-адрес.

HOST Элемент (Имя хоста:порт) из URL.

PORT Коммуникационный порт сервера.

PATHNAME Элемент пути URL.

SEARCH Часть определения запроса URL Возможная проблема, связанная со ссылками на до- с символа кументы в других фреймах и окнах — ограничения си HASH Якорное имя URL (начинается с символа стемы безопасности, которая не дает JavaScript дос тупа к свойствам документов другого сервера. Начиная с Netscape Navigator 2.02, это ограничение было ре ализовано с целью защиты информации о списке по сещений пользователя, о паролях в HTML-формах, Важно отличать объект Location от свойства location структуре каталогов и других конфиденциальных эле- объекта Document. Значения объекта Location изменять можно, а свойство location объекта Document предназ начено только для чтения.

Netscape Navigator 3.0 обеспечивает меру безопасно сти, называемую data tainting (разрушение данных), которая разрешает пользователям обращаться к до Открытие нового URL кументам другого сервера без возможной угрозы для Вместо использования специального метода перехода к системы безопасности. С технологией разрушения новому в окне, можно просто открыть новый URL, данных код JavaScript может ссылаться и пользовать ся свойствами документов из других серверов. Полу- установив значение объекта Location. Интересно заме ченные данные разрушаются (или портятся) так, что тить, что это можно сделать, присваивая значение URL бы их невозможно было переслать на другой сервер объекту непосредственно или же присваивая данное без пользовательского подтверждения (с целью обес значение свойству href объекта Location. Например, сле печения безопасности и секретности).

дующих две строки выполняют одно и то же действие:

Frame Глава = { = Для создания с помощью JavaScript окна редактиро options вания URL, можно использовать код, приведенный в + листинге 18.7.

+ Листинг 18.7.

= { var urlAddress = = urlAddress ) Hostname: Pathname:

() Работа со свойством protocol [This page intentionally left Свойство protocol объекта Location позволяет определять тип текущего URL. Таблица 18.4 содержит часто ис пользуемые протоколы.

Таблица 18.4. Протоколы объекта Location.

pathname Протокол Web file:

РИСУНОК 18.11. Использование объекта Location для FTP изменения URL другого фрейма.

mailto:

Листинг 18.8. Usenet news:

Gopher gopher:

JavaScript javascript:

6 тм Ричард Вагнер, Вайк Исчерпывающее руководство об основном языке сценариев Своевременные для создания полнофункциональных Web-приложений Объектно-ориентированная Исследуется связь JavaScript с посещений позволяет пользователю возвращаться на посещенные сайты, так же объект History в JavaScript позволяет JavaScript-разработчику переходить к ранее Пользователь может применять текстовый объект посещенным Web-страницам. Объект History не имеет Editl для ввода целевого URL. Когда пользователь щел никаких событий, а только свойства и методы, перечис- кает на кнопке "Move" для перехода на указанный URL, ленные в табл. 18.5 и 18.6. текстовый объект изменяется и отображает длину списка посещений правого фрейма.

Таблица 18.5. Свойства объекта History.

Свойство Описание Навигация по списку посещений current URL текущего документа.

Одно знание длины списка посещений редко length Длина списка посещений.

ется особо полезным, однако оно может принести боль next Следующий URL в списке посещений.

ше пользы, если требуется перемещаться по списку с previous Предыдущий URL в списке посещений.

использованием объекта History.

Перемещение на одну страницу назад Таблица 18.6. Методы объекта History.

Метод back() функционально эквивалентен щелчку на Метод Описание кнопке "Back" (стрелка влево) в па нели браузера. Например, следующий код перемещает Back() Загружает предыдущий документ из списка окно в его предыдущую позицию:

посещений.

Forward () Загружает следующий документ из списка посещений.

Перемещение на одну страницу вперед Go() Переходит к заданному документу.

Как и следовало ожидать, метод — то же, что Если л> 0, загружает документ, который и щелчок на кнопке со стрелкой вправо в инструмен находится на л пунктов дальше в списке посещений. тальной панели браузера. Этот метод используется ана логично:

Загружает документ из списка посещений, URL которого содержит указанную строку.

Переход к указанной странице по номеру в списке Определение размеров списка Метод go() используется для перехода к определенно Для определения количества посещений в списке мож- му месту в списке посещений. Его синтаксис таков:

но использовать свойство length объекта History. Пред hi story | "location") положим, что требуется отследить число посещений пра Параметр delta — положительное или отрицательное вого фрейма мультифреймового окна. Левый фрейм целое число, которое определяет количество шагов пе содержит следующий код:

рехода. Например, следующая строка — это переход к следующему документу в списке посещений (эквива лент использования метода delta > 0 Перемещает вперед на delta пунктов.

delta = 0 Перегружает текущий документ.

Frame Глава Переход к указанной странице по строке в списке В качестве альтернативы можно использовать параметр location для определения заданного в списке. Об ратите внимание, что здесь не нужен точный URL, a } только подстрока. Следующий пример позволяет пере { мещаться к URL в списке посещений, который содер var = жит www.acadians.com/filenew:

urlAddress = if (urlAddress != { = В приведенный выше пример можно добавить back(), urlAddress и go() для обеспечения более полной функци forms [0] = ональности мультифреймовой системы навигации. На ) рис. 18.12 показано окно. Листинг 18.9 else { enter a before содержит исходный код HTML для родительской стра the Go ницы окна, а листинг 18.10 — код для } списка посещений. Правая область окна не содержит никакого JavaScript-кода.

function ( if ( var = = ) Ways to JavaScript Chronicles — Free Subscription else { Form • use the var goVal = goVal = Г к I Г Г Г Г By Г to Г the location

6 тм Ричард Вагнер, Вайк Исчерпывающее руководство об основном языке сценариев Своевременные для создания полнофункциональных Web-приложений Объектно-ориентированная Исследуется связь JavaScript с

{ Использование DOM Часть III тов JavaScript. На первый взгляд, казалось бы, этот объект является верхним уровнем пирамиды, посколь

в действительности, он обособленный объект, обеспечивающий только способ List Entries:

size= ПРИМЕЧАНИЕ Имейте в виду, что объект Navigator ис пользовать для получения от браузеров, которые не поддерживают JavaScript. Если не поддерживает JavaScript, он не будет обрабатывать запрос на информацию. Очевидно, что невозможно применить JavaScript-подпрограмму для определения, поддерживает ли браузер JavaScript.

Объект Navigator Объект Navigator — единственный объект, который выг- Объект Navigator имеет свойства, показанные в табл.

лядит невписывающимся в иерархию встроенных объек- 18.8.

Таблица 18.8. Свойства объекта Navigator.

Свойство Описание appName Имя браузера.

appVersion Версия браузера.

appCodeName Кодовое имя браузера.

userAgent Заголовок user-agent для браузера.

appCodeName Кодовое имя браузера;

поддерживается в Navigator 2 и Internet Explorer 3.

Подверсия версии браузера;

в Internet Explorer 4.

AppName Имя браузера;

поддерживается в Navigator 2 и Explorer 3.

AppVersion Версия браузера;

поддерживается в Navigator 2 и Explorer 3.

Языковая конфигурация браузера;

поддерживается в Explorer 4.

ConnectionSpeed Скорость, на которой браузер выполнил соединение;

поддерживается в Explorer 4.

CookieEnabled Работает ли браузер с cookie-наборами;

поддерживается в Explorer 4.

CpuClass Класс процессора на платформе браузера;

поддерживается в Explorer 4.

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

поддерживается в Explorer 4.

Language Языковая конфигурация браузера;

поддерживается в Explorer 4.

поддерживаемые браузером;

согласуется с Navigator 3 и Explorer 4.

Platform Операционная система, под управлением которой работает браузер;

поддерживается в Navigator и Explorer 4.

Массив подключаемых модулей, установленных в настоящий момент;

поддерживается в Navigator и Explorer 4.

SystemLanguage Язык операционной системы по умолчанию;

поддерживается в Explorer 4.

UserAgent Заголовок user-agent, посылаемый с браузера на сервер;

поддерживается в Explorer 3 и Navigator 2.

UserLanguage Пользовательский язык;

поддерживается в Explorer 4.

Доступ к информации пользовательских профилей;

поддерживается в Explorer 4.

Объекты Frame Navigator как Netscape Navigator, так и Microsoft Internet Explorer. Листинг 18.11 демон стрирует пример отображения информации о браузере в диалоговом окне, когда пользователь нажимает на кнопку "Show Browser Info". Рисунки 18.13 и 18.14 по казывают сигнальные окна сообщений, которые появ ляются в результате работы сценария, соответственно, в Netscape и в Internet Explorer.

Листинг 18.11. navigatorlnfo.htm.

ми аналогами браузеров. Объект Navigator, намного отличающийся от других объектов JavaScript, позволя ет извлекать информацию о текущем браузере.

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

Использование JavaScript на фреймовом сайте не сколько более сложно, чем использование его на не фреймовом сайте, однако полученные выгоды зачастую стоят небольших дополнительных усилий по преодоле нию трудностей. Кратко рассматривались несколько примеров сочетания JavaScript с фреймами и окнами.

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

РИСУНОК 18.13. Информация о браузере в Netscape Navigator.

Другие DOM-объекты В ГЛАВЕ DOM-браузеры Управление DOM-документами и DOM-методы В главе 13 были рассмотрены основные принципы предоставлены дескрипторы для уровней дерева и усо объектной модели документа (DOM) и показана стан- вершенствованы методы определения ширины и высо дартизация DOM-модели с помощью интуитивно по- ты контейнеров и окон. Исторически этот уровень нятных представлений в виде деревьев. В этой главе DOM-модели был поддержан в JavaScript, и как Java с задействованием ряда листингов на JavaScript, рас- так и подключаемые модули могли управлять сматривается практическое применение общих DOM- DOM с помощью LiveConnect, который является основ методов. Кроме того обсуждаются различные DOM- ным кодом языка создания сценариев JavaScript. В узлы и элементы и практические способы управления Internet Explorer 4.0 DOM-модель интегрирована непос ими, а также некоторые важные проблемы, связанные редственно в браузер, а не через язык создания сцена с браузерами. риев. Это помогает устранить несоответствия между раз ными языками создания сценариев, например, различия в позициях дескрипторов. В результате ста DOM-браузеры новится стандартизованной и непротиворечивой для DOM-модель использует части документа для представ- различных браузеров, причем для взаимодействия с ления логической иерархии с помощью дескрипторов DOM теперь возможно использовать JavaScript, страниц, их последовательности, свойств и атрибутов. VBScript, элементы управления ActiveX, и Последние изменения в Netscape Navigator и любые другие компоненты языка, совместимые с DOM Explorer связаны с работой консорциума W3C. API, записанным в OMG IDL. Из этого следует, что С помощью Netscape Navigator 3 могли быть написаны исследования навигационных процессов в главе 13 было и прочитаны атрибуты изображения и якорные деск- уместным. Узлы ранее описывались как составные час рипторы, можно было запрашивать информацию о том, ти DOM-деревьев и, как упоминалось в главе имен какие подключаемые модули имеются в наличии, какие но узлы дают возможность программам взаимодейство поддерживаются и т.п. В Navigator 4.0 были вать с содержимым документа. Все узлы перечислены в табл. 19.1.

Таблица и HTML-узлы документов.

Узел Описание Атрибут Свойство дескриптора: элемент может иметь атрибут src.

Раздел CDATA Текстовое содержимое, за исключением символов метки. Метод createCDATASection создает узел со значением, которое является заданной строкой.

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

Тип документа Каждый документ содержит объект DocumentType или атрибут doctype, который может быть и null. Интерфейс DocumentType обладает возможностью перечислять такие специфические объекты.

Другие DOM-объекты Глава Узел Описание Document Объектное представление полного документа. Интерфейс Document представляет полный HTML- или XML-документ и предоставляет стандартные методы создания объектов Document, которые включают элементы, текстовые узлы, комментарии и команды обработки. Получившиеся объекты Node имеют атрибут ownerDocument.

За исключением текста, узлов Element — наиболее общие объекты, по которым авторы перемещаются при навигации по документу, как показано в следующем XML-примере:

id=[sq1]Unleashed demo[sq2]> Очевидно, что DOM-дерево содержит в качестве самого верхнего узла узел Document, содержащий узел Element для elementUnleashed, который, в свою очередь, содержит два дочерних узла Element, и subelement2, при этом дочерних узлов не имеет.

Ссылка на сущности (объекты) Префикс амперсанд (&) указывает, что объект вставлен в документ с помощью ссылки.

Используя DOM Level 2 версии 1.0, редактировать узлы Entity невозможно;

скорее, каждый EntityReference в структурной модели потребуется заменять копией содержимого реального объекта, только после этого появится возможность их модификации. Дочерние элементы узла Entity предназначены только для чтения, при этом узлы Entity родительских элементов не имеют.

типа DOMString (только для чтения). Содержит заданный идентификатор системы либо null, если он не определен.

notationName типа DOMString (только для чтения). Содержит имя примечания для непроанализированных объектов либо null для проанализированных.

publicld типа DOMString (только для чтения). Содержит заданный общий идентификатор либо null, если он не определен.

Узел Ссылка на элемент, атрибут или строку текста.

Команда обработки Команда для синтаксического XML-анализатора;

сохраняет эту информацию обработки в XML-документах.

Атрибуты Адрес типа DOMString (только для чтения). Это адрес команды обработки или первого маркера после команды обработки.

Данные типа DOMString — содержимое команды обработки, которая находится между первым символом (кроме пробела) после адреса и символа непосредственно перед Text Объект, содержащий текст.

= newtext ПРИМЕЧАНИЕ Explorer 5 использует ключевое слово ALL для дости DOM-модель WWW-консорциума (W3C) поддержива жения совместимости сверху вниз. A Navigator 5.0 для ется в Netscape 5 и в Microsoft Internet Explorer обеспечения совместимости сверху вниз сохраняет мо 5. В Navigator 4 написан новый HTML для объекта Layer.

дель Layers для объектов.

Для изменения текстового элемента с заданным ID и newtext форма приобретет следующий вид:

var =.

В DHTML версии 4 для всех браузеров потребуется lyr создать разветвление кода, с помощью которого вы Internet Explorer 4.0 реализует другой способ и пре- ясняется тип браузера и выполняются соответствую щие корректировки:

доставляет HTML-элементы документа, использующие ключевое слово ALL. Для изменения текстового эле ns4 = мента с заданным ID и значением newtext форма по ie4 = лучает следующий вид:

function { Использование DOM Часть III if

else if (ie4) = newtext Использование метода cloneNode ' Выполнение метода cloneNode задается с помощью его логического параметра in. Когда он равен true, копиру ПРИМЕЧАНИЕ ется полное поддерево данного узла. С другой стороны, Далее будет рассматриваться, главным DOM (и механизм браузера Gecko). Это при- значение false данного параметра заставляет браузер мечание, может очень скоро потерять акту копировать только указанный узел и игнорировать его альность, возможно, уже сейчас Netscape Navigator дочерние и родительские элементы. Применение мето и Explorer имеют совместимую DOM-модель.

да cloneNode продемонстрировано в листинге где параметр false используется для копирования только узла, без поддерева. Сценарий не делает кроме Управление DOM-документами и создания массива узлов, включенных в таблицу, и это DOM-методы достигается с помощью HTML. Сценарий на JavaScript Теперь известно, что DOM-модель содержит полезные содержит метод cloneNode, с помощью которого опре и практические методы управления объектом или струк- деляется узел, предназначенный для копирования, а турой узла документа. Это дает общие методы для вы- также вызывается сигнальный диалог, отображающий полнения простых вещей, таких как копирование, состояние копируемого узла. В этом примере сигналь вставка и замена узлов. Подобного рода методы позво- ное сообщение показывает, что метод cloneNode вернул ляют легко заменяемые документы, ко- копируемый объект. К данной информации добавляет торые любой разработчик сможет изменить и понять ся отображение того, что копируемый объект не имеет при условии, что он знаком с DOM-моделью. Методы никаких дочерних и родительских элементов, т.е. копи предоставляют образцы для непосредственного создания ровался только узел. Замена в методе значения парамет документов, а также используют ключевой аспект осно- ра cloneNode с false на true заставляет браузер копиро на объектах документов — возможность повтор- вать полное поддерево, дочерние и родительс ного использования, следовательно, вместо многократ- кие элементы узла.

19.1. Метод cloneNode.

DOM cloneNode example 1, Cell 1, Cell 2, Cell K/TDXTD 2, Cell 3, Cell K/TDXTD 3, Cell 4, Cell K/TDXTD 4, Cell