WWW.DISSERS.RU

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

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

Pages:     | 1 |   ...   | 5 | 6 || 8 | 9 |   ...   | 10 |

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

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

clip Определяет прямоугольник отсечения, который является видимой областью слоя. Все, что находится вне этого прямоугольника, отображаться не будет.

Высота слоя в пикселах.

left Координата в пикселах слоя по оси X относительно начала координат его родительского слоя.

name Имя слоя.

src URL для источника, содержащего данный слой.

top Координата в пикселах слоя по оси Y относительно начала координат его родительского слоя.

Определяет атрибуты видимости show отображает слой, hide скрывает слой, a inherit заставляет слой наследовать условия видимости от его родительского слоя.

width Ширина слоя в пикселах.

z-порядок слоя относительно элементов того же уровня и родительского элемента.

Технологии программирования на HTML Часть IV i При просмотре и тестировании кода из списка вы Select the year to view:

бора можно выбрать год для отображения соответству ющей диаграммы. На рис. 23.12 показаны результаты выбора 1996 г.

ременным, представляющим слои в сценарии.

ПРИМЕЧАНИЕ. /clrball.gif В отличие от ранее числовых перемен ных, нельзя размещать этот код установки значения объекта Layer в разделе сценария, посколь width и height элементов имеют ку он ссылается на элементы, определенные те же самые размерности, что и GIF-изображения. Па в разделе . этот код присва раметры left и top — случайные числа в пределах кар- ивания должен обрабатываться после определения элементов которые произвольно задаются как 400 пикселов по горизонтали и 200 пикселов по вертикали. Они бу дут служить в качестве координат начального положе Определение функций мультипликации ния шариков.

Следующий шаг связан с созданием сценария, факти чески выполняющего мультипликацию. Изначальная Технологии программирования на динамическом HTML Часть IV }else{ цель довольно проста: отобразить каждый шарик в дви return ;

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

Для каждого трех шариков StartTheBallRoIlingO Потребуется отслеживать координаты х и у каждо вызывает moveBallO и затем анализирует результаты го шарика перед каждым обращением к Если выполнения. Для зеленого шарика код выглядит так:

этого не делать, шарики очень быстро покинут грани цы изображения 400x200 и границы самого HTML-до- if grnX, grnY) == кумента. Поэтому, если свойство left объекта Layer на grnY = ходится между 0 и 400, а свойство top — между 0 и 200, то метод вызывается. Однако если слой не со- }else{ grnX, grnY) ответствует этим условиям, процесс выполняется в об ' ратном направлении, имитируя рикошет шарика.

grnX = Посмотрим, как это реализуется в сценарии. Будут использоваться две функции:

I • — основная рекурсивная фун Если moveBall() завершилась успешно и вернула зна кция, ответственная за вызов каждого шарика для чение сценарий переходит на следующий шаг. Од целей мультипликации. Она также выполняет необ нако, если возвращается (или ходимые корректировки значений смещения, когда это означает, что необходимо подкорректировать значе шарик покидает границы изображения.

ние смещения по у (либо по х). Для этого неудовлетво • moveBall() — отвечает за перемещение шарика в рам рительное значение смещения заменяется на новое, де ках изображения. Она анализирует свойства top и left лая его равным нулю минус его текущее значение. Затем шарика и вызывает действие offsetO, если они удов выполняется действие offsetO, которое смещает шарик летворяют условиям. Если условия не выполняют в обратном направлении. Код совершенно аналогичен ся, эта функция обращается к StartTheBallRoIlingO, для красного и разноцветного шариков:

которая корректирует смещение.

redX, redY) == redY = Поскольку moveBall() вызывает StartTheBallRoIlingO, )else{ возможно, имеет смысл сначала рассмотреть redX, redY) == а затем вернуться к StartTheBallRoIlingO. Функция moveBaIl() получает три аргумента: ссылка на объект redX = шарика, и его значения смещения по х и у. Как упоми ) налось ранее, она проверяет свойства left и top шарика :

и реализует один из следующих пунктов:

colorX, == • Выполняет offsetO и возвращает значение в colorY = StartTheBallRoIlingO.

colorX, colorY ) • Возвращает в вызвавшую функцию значение color, colorX, colorY) == обозначая, что свойство top не удов летворяет условию.

colorX colorX, • Возвращает в вызвавшую функцию значение обозначая, что свойство left не удов летворяет условию.

Наконец, вызывается setTimeout(), чтобы сделать этот полный процесс рекурсивным:

Код приобретет следующий вид:

2) function offsetX, < 400) &S > Заключительный шаг связан с фактическим запус if top < 200) SS top > ( ком шарика за счет установки StartTheBallRoIlingO в ка честве обработчика для события Load окна:

return ' }else{

grnX, grnY) == Листинг 23.13 содержит полный исходный код де grnX = 0 - grnX;

монстрационной версии BallsGoneWild.

I • i redX, redY) redY = 0 redX, redY) == redX = 0 - redX;

t colorX, colorY) == colorY = 0 - colorY;

colorX, colorY ) )else{ РИСУНОК 23.13. Шарики в движении. color, colorX, colorY) Листинг 23.13. Мультипликационные эффекты на colorX = 0 - colorX;

colorX, Web-странице. _ } I JavaScript I // Глобальные <body var grnX = 2;</p><p> var grnY = <layer var = <img var redY = </layer> <layer var colorX = var colorY = 3;</p><p> </layer> // Эффекты плавной анимации <layer = true;</p><p> <img function offsetX, </layer> < 400) && > < 200) ss > I function ( if grnX, grnY) Технологии программирования на динамическом HTML Часть IV Резюме Слои представляют собой одно из наиболее значитель ных достижений в HTML за последние несколько лет.</p><p> Они позволяют выйти за рамки последовательного тек стового процессора и погрузиться в мир HTML, графи ки и дизайна. JavaScript эффективно работает со слоя ми, обеспечивая разработчикам полный контроль их поведения. Результаты получаются великолепными.</p><p> РИСУНОК 23.14. в Меню и панели инструментов DHTML В ГЛАВЕ Начальные предположения Проектирование меню Создание инструментальных панелей Знание языка JavaScript и способов практичес- • Требуется ли адаптировать код под неподдержива кого применения — две совершенно разные вещи. Мно- ющие браузеры?</p><p> гие способны выучить язык программирования, понять • Насколь изящно требуется обходить возникающие его синтаксис и семантику. Однако очень немногие до проблемы в неподдерживающих браузерах?</p><p> стигают действительного мастерства в применении сво их знаний для решения практических задач, т.е. при со- Вопросы подобного рода уже обсуждались ранее, здании реальных приложений. поэтому детализация здесь будет излишней. Стоит лишь Динамический HTML (DHTML) впервые появился напомнить, что выбор поддерживаемых браузеров явля в четвертых версиях браузеров Internet Explorer и Netscape ется важным шагом, который определяет способы про Navigator. Оба эти браузера поддерживали JavaScript, ектирования не только текущих версий программы, но слои и таблицы стилей, необходимые для проектирова- также и будущих ее версий.</p><p> ния страниц, у которых полный набор динамических В дополнение к этим вопросам разработчик также свойств постоянно находился на исходной Web-страни- должен задаться вопросом:</p><p> це. Именно это способствовало возникновению • Возможно ли сделать это?</p><p> DHTML, и с тех пор такие технологии применяются на • Как выглядят планы на будущее?</p><p> многих сайтах, придавая им яркость и усиливая функ циональные возможности.</p><p> • Существует ли лучший путь для реализации В этой главе рассматриваются два примера DHTML- проекта?</p><p> приложений. Первый пример — меню, а второй — ин Выяснение возможностей панель. Как и в повседневной практи ке, придется решить, какие браузеры поддерживать и Этот вопрос зачастую игнорируется. JavaScript воспри выяснить все отличительные особенности работы бра- нимается как простой язык, которому может кто угод узеров в рамках реализации примеров. но научиться. Это могло бы быть верным для версии или 1.1, но 1.2 преподносит нечто совершенно новое.</p><p> Начиная с этой версии, возможности JavaScript суще Начальные предположения ственно возросли, обеспечивая большее количество Перед началом создания проекта DHTML возникает объектов для поддержки DOM-модели, а также соответ несколько вопросов, которые задает себе каждый разра- ствующие XML-технологии. Создание DHTML-прило ботчик. Некоторые из них обсуждались в главе 23, тем жения не настоль просто, может показаться на первый не имеет смысл еще раз напомнить о них: взгляд, а различия в версиях браузеров превращают этот процесс в весьма утомительную задачу.</p><p> • Какие браузеры требуется поддерживать? Помните, что в настоящее время только Navigator 4+ и Internet Планы на будущее Explorer 4+ обладают всеми функциональными воз Еще одно соображение, которое необходимо учесть, — можностями, необходимыми для создания DHTML это планы на будущее. Netscape и Microsoft выпускают приложений.</p><p> Технологии программирования на HTML Часть IV браузеры год, а то и чаще, и это означает, что код, • Работа только с Internet Explorer.</p><p> скорее всего, придется обновлять достаточно часто.</p><p> • Серая строка меню в верхней части окна браузера.</p><p> В планах на будущее неплохо было бы рассмотреть • Две опции меню: "Go" и "Help".</p><p> все — от готовящихся стандартов до новых версий бра узеров. Нужно также стараться оставаться на гребне вол- • Меню "Go" будет содержать три ссылки на популяр ны новых технологий, дабы иметь сведения о всех воз- ные сайты для разработчиков под браузеры Netscape никающих проблемах и ошибках программ в различных и Microsoft.</p><p> версиях. Проектирование DHTML-приложений — труд • Меню "Help" будет содержать один пункт "About", ная задача, однако после выполнения работы вознаграж после выбора которого должно отображаться диало дение не заставит себя долго ждать.</p><p> говое окно с информацией о меню.</p><p> Учет API • Диалоговое окно "About" будет содержать изображе ние и кнопку, закрывающую окно.</p><p> В заключение стоит обсудить тему использования в JavaScript интерфейса программирования приложений Определение слоев (Application Programming Interfaces, API). При создании DHTML в определенный момент может возникнуть Первая вещь, которая будет сделана в плане создания мысль: "Должен же существовать простой способ нашего меню — это определение слоев и самой строки решения данной задачи;</p><p> кто-то наверняка уже должен меню. Для этого можно использовать комбинацию был делать это ранее". HTML и CSS. В HTML будут применяться дескрипто Скорее всего, мысль верна. Выгодная сторона JavaScript, ры <div> для задания слоев и дескрипторы для который ни что иное как язык программирования для определения диалогового окна. Будут также использо Internet, состоит в том, что можно обнаружить (если ваться дескрипторы <а> для работы с событиями щел немножечко поискать), что другие разработчики уже чков на пунктах меню. Код раздела <body>, реализую создали требуемые функции, например, реализующие щий меню, содержится в листинге.</p><p> перемещение слоев. Кроме того, можно обнаружить, что Одним из важных моментов при создании любого многие разработчики уже создали объекты наподобие JavaScript-приложения является повторное использова каскадного меню или объекты графического редактора. ние кода;</p><p> в этом примере повторно используется часть Не стоит в очередной раз изобретать велосипед, если кода из главы 23. Читатель увидит несколько знакомых обнаруживается, что кто-то уже написал нужный вам имен функций и функциональных возможностей. По код;</p><p> просто изучите этот код и воспользуйтесь им при скольку планируется, что меню будет поддерживаться создании своего сайта. только в Internet Explorer, код выяснения типа браузера здесь отсутствует, однако если требуется поддержка Navigator, требуется заменить функцию на ту, которая Приложение А содержит ссылки на хорошие сайты, использовалась в листинге 23.9 главы 23.</p><p> которые содержат полезную информацию по JavaScript Как видно из листинга для каждого из слоев API.</p><p> определяются id и name. Это позволяет применять сти ли так, чтобы можно было управлять видом и представ лением этих слоев. Для установки стилей требуется не Проектирование меню сколько определений. Ниже приведен соответствующий При проектировании DHTML-меню возникают доста- список:</p><p> точно очевидные вопросы, например, какие меню и • подчеркивания дескрипторов <а>, пункты в нем необходимы, и какие должны обеспечи • Определение цвета и расположения строки меню.</p><p> ваться функциональные возможности. К тому же, по требуется решить вопрос по поводу оформления меню.</p><p> • Определение цвета и расположения "Go" и Какие планируются цвета и размеры? Насколь длинной "Help" в меню.</p><p> должна быть строка меню, и вообще, где меню будет • Определение цвета, расположения и сокрытия "Go" отображаться?</p><p> и "Help" в меню.</p><p> Все это вопросы, на которые придется ответить, что • Определение цвета, расположения и сокрытия диа бы потом применять соответствующее форматирование логового окна "About".</p><p> и стили для создания желаемого вида сайта. Для наше го примера меню поставим перед собой следующие Листинг 24.2 содержит определения таблиц стилей, цели:</p><p> которые потребуются для форматирования.</p><p> Меню и панели инструментов DHTML Глава Листинг 24.1. Определение слоев в HTML.</p><p> <body <div <div <hr This DHTML Menu was created by R. Allen for JavaScript </tr> <tr> <td <input </tr> Листинг 24.2. Определение стиля для меню. top:</p><p> width: 100%;</p><p> <style <!- /* Глобальные стили */ /* Свойства меню */ none;</p><p> ) position: absolute;</p><p> right:</p><p> /* фон целого */ { left: 0;</p><p> #go{ position: absolute;</p><p> left: 0;</p><p> Технологии программирования на динамическом HTML Часть IV position: absolute;</p><p> устанавливаются после загрузки страницы в функции 0;</p><p> которая выглядит образом:</p><p> var layer new () ;</p><p> /* Свойства активного меню, скрытого вплоть var style = new ло щелчка */ function ttcOcOcO;</p><p> layer = left:</p><p> style = absolute I top: 20;</p><p> visibility: hidden;</p><p> Последняя необходимая часть кода — обработка со width:</p><p> крытия и отображения слоев. Если посмотреть внима тельнее, можно увидеть, что это — тот же самый код, который применялся в главе 23, только немного упро щенный.</p><p> right:</p><p> function top: 20;</p><p> ("document" + layer + layerRef + visibility: hidden;</p><p> + style + = state + width:</p><p> I /* Свойства диалогового окна About */ Это завершающий код части I Несложно заметить, что если браузер — не Internet Explorer, код выдаст сообщение, которое отправит Использование меню пользователя обратно на страницу, с которой он при Как только написание кода для меню завершено (лис Как и в коде из главы 23, объявляется ряд глобаль тинг 24.4), его можно загрузить в браузер для тестиро ных переменных String для установки layer и style для вания. Меню должно иметь вид, показанный на рис.</p><p> браузеров Internet Explorer. Значения этих переменных 24.1. Как видно из рисунка, CSS размещать Меню и панели DHTML Глава пункты меню в самой верхней сроке окна браузера и none;</p><p> запрещать подчеркивание ссылок. Кроме того, стоит I обратить внимание, что определение элемента /* установки фона целого меню */ позволяет изменять размеры и оставляет серый фон для { меню.</p><p> width:</p><p> /* Свойства меню */ #help{ position:</p><p> left: 0;</p><p> position:</p><p> J /* Свойства активного меню, скрытого вплоть до щелчка */ РИСУНОК 24.1. Меню, загруженное в браузер. ttgomenu Листинг 24.4. Полный исходный код реализации left:</p><p> position: absolute;</p><p> меню. _ top: 20;</p><p> visibility:</p><p> <ti ) <style — <div I* Глобальные стили */ <div Технологии программирования на динамическом HTML Часть IV <а II т и <div <hr This DHTML Menu was created by R.</p><p> Allen for JavaScript </tr> <tr> <td РИСУНОК окно "About".</p><p> <input Описание дополнительных возможностей </tr> Теперь, когда создано меню, несомненно, захочется расширить его возможности. Ниже приведен список пунктов, после реализации которых можно получить </body> усовершенствованные возможности для создания ваших собственных DHTML-меню. Можно также посетить После щелчка на пункте меню "Go" в левом верхнем са'йт Netscape углу всплывает меню ссылок на сайты. Как показано на где имеется свободный доступ к объекту Menu.</p><p> рис. 24.2, эти URL-ссылки отображаются и в строке со • Поддержка браузера Navigator.</p><p> стояния браузера.</p><p> • Щелчок вне области всплывшего меню должен зак Последним пунктом меню является пункт "Help".</p><p> рывать его.</p><p> При нажатии на него появляется опция "About", в ре зультате выбора которой отображается диалоговое окно, • Изменение позиции диалогового окна "About".</p><p> показанное на рис. 24.3.</p><p> • Создание каскадных меню.</p><p> Меню и панели инструментов DHTML Глава сгенерировать событие для выполнения Создание инструментальных панелей задачи. Кроме того, необходимо восстановить первона Создание инструментальных панелей — одна из лучших чальное состояние кнопки, когда пользователь убирает вещей, которой можно научиться, имея дело с DHTML. мышку с кнопки без нажатия на нее.</p><p> При этом, вероятно, придется задействовать все свои способности, чтобы заставить инструментальную панель i., работать и взаимодействовать с другими инструменталь.</p><p> ными панелями желаемым способом. Формирование.</p><p> инструментальной панели требует не только использо вания JavaScript, но также CSS и слоев. Ключевая про блема состоит в определении внешнего вида инструмен тальной панели и способов ее функционирования.</p><p> Затем можно приступать к проектированию размеще ния, кода и стиля.</p><p> - it to ail ' Применение событий Л.</p><p> L Первое, что может потребоваться при проектировании tit-it;</p><p>,.</p><p> инструментальных панелей — это события. В приложе нии, подобном браузеру, при нажатии кнопок и пере РИСУНОК 24.5. Прохождение мышки сечении их курсором мыши видно, что эти события вызывают изменения состояния кнопки.</p><p> Для начала стоит построить инструментальную па нель, инструментальной панели браузера. Эта будет выглядеть и функционировать как новые инструментальные панели из Internet Explorer 3+ и Navigator Что должно происходить?</p><p> Первое, что необходимо, — это задокументировать, что должно происходить в инструментальной панели. От кройте окно браузера и понаблюдайте, как изменяется N состояние кнопок при проходе по ним мышкой и при Л нажатии на них. На рис. показано, изменение..</p><p> состояний кнопок в браузере Navigator 4.</p><p> РИСУНОК 24.6. Нажатие на кнопку инструментальной панели.</p><p> Что может происходить?</p><p> В перспективе совершенствования разработки под Web ' могут быть созданы все необходимые функциональные возможности для инструментальной панели. Существуют *. • события для перемещения курсора мыши на элемент и с этого элемента, а также для нажатия и отпускания кноп ки. С помощью свойства Image.src, которое может заме N нять одно изображение на странице на другое, можно and смоделировать перемещение курсора мыши и нажатие кнопок. Это свойство обеспечит визуальные эффекты.</p><p> Для кнопок потребуется также выполнять опреде ленные задачи. Для этого будет использоваться событие onClick в дескрипторе <а>. Если пользователь нажима РИСУНОК 24.4. Обычная инструментальная панель.</p><p> ет на кнопку, щелчок захватывается и обрабатывается.</p><p> заметить, что существуют три состояния, Ниже приведен список используемых кнопок вместе с которые потребуется смоделировать. Когда пользова- их функциями.</p><p> тель переводит курсор мыши на кнопку, необходимо программирования на динамическом HTML Часть IV • Back. Эта кнопка моделирует кнопку "Back" или Модульное программирование "Previous" браузера. Будут использоваться разные ме тоды для работы в Internet Explorer и Navigator с Спланируем это приложение как можно более модуль целью демонстрации того, как можно создавать нуж- ным, чтобы код при необходимости мог использовать ные программы с учетом разных браузеров. ся в другом месте. Для этого придется создать множе ство функций, обрабатывающих информацию.</p><p> • Forward. Эта кнопка моделирует кнопку "Forward" Для приложения можно выделить три различных или "Next". Будут использоваться разные методы набора функциональных возможностей:</p><p> для работы в Internet Explorer и Navigator с целью демонстрации того, как можно создавать нужные • Image State Change (Изменение состояния изображе программы с учетом разных браузеров. ния). Эта функция, вызываемая в методе будет отвечать за изменение изображения при пере • Ноте. Эта кнопка моделирует кнопку "Ноте" в бра мещении на него курсора мыши либо при нажатии узерах Navigator. Internet Explorer данный метод не кнопки.</p><p> поддерживает.</p><p> • Button Processing (Обработка кнопки). Эта функция, • Reload/Refresh. Эта кнопка моделирует кнопку вызываемая в методе process(), будет выполнять за "Reload" или "Refresh" браузера, которая приводит к дачи, возложенные на кнопку. Когда пользователь повторной обработке и визуализации текущей стра нажимает на кнопку, эта функция реагирует соот ницы. При помощи метода будет ото ветствующим образом.</p><p> бражаться загрузка страницы.</p><p> • URL Handling (Обработка адресов Эта фун • Find. Эта кнопка моделирует опцию меню Edit кция, в методе будет Find, которая обеспечивает поиск текста в окне бра брать данные, в форму, и узера. Internet Explorer этот метод не поддерживает.</p><p> браузер в указанное расположение.</p><p> • Print. Эта кнопка моделирует кнопку "Print" браузе ра — вызов диалогового окна Print для печати теку- Создание изображений щей страницы.</p><p> В отличие от других приложений, для Web-приложения потребуется обеспечить максимум компонентов, кото В дополнение к перечисленным шести кнопкам, бу- рые могли бы погрузиться в любой интерфейс. Поми дет также использоваться форма с текстовым полем, мо объекта Form, необходимо создать все которое позволяет вводить URL и щелкать на кнопке собственные изображения и интерфейсные "Go" для загрузки URL в окно браузера. ты. Из-за характера задачи также потребуется обеспе когда выяснены все требования, приступим чить версии изображений для событий прохождения к реализации приложения. Будет рассматриваться как курсора мыши по изображению и нажатых состояний создание изображений, так и написание кода. кнопок.</p><p> Ранее упоминалось, что кнопка на инструменталь Описание проблем проектирования ной панели должна изменить свое состояние, при пе Прежде чем приступать к написанию какого-либо кода, ремещении по ней курсора мыши, а также в следует принять несколько решений относительно спо- когда она нажата. Для работы примера возникает необ собов записи и хранения кода. Большинство функцио- ходимость в следующих изображениях:</p><p> нальных возможностей меню можно включить в HTML • Normal. Изображение по умолчанию.</p><p> дескрипторы — не такое существенное увеличение • Rollover. Значение по умолчанию, отображаемое с объема кода. Однако, функциональные возможности, белой рамкой толщиной в 1 пиксел слева и сверху и которые предоставляет пример, могут быть задейство серой рамкой толщиной в 1 пиксел справа и снизу.</p><p> ваны и в другом месте, потому стоит прибегнуть к бо лее модульному подходу.</p><p> • Pressed. Значение по умолчанию, отображаемое с се рой рамкой в 1 пиксел слева и сверху, и с белой рам Хранение кода кой в 1 пиксел справа и снизу.</p><p> До начала создания приложения необходимо решить, Написание HTML-кода где будет храниться код. Здесь следует опираться на то, что именно конструируется. Для текущего приложения Первое, что будет создаваться — это кото весь код будет храниться в рамках HTML-документа. рый содержит макет инструментальной панели. Суще Если сайт располагается во множестве мест, тогда код ствует несколько компонентов для интерфейса проек лучше хранить во внешнем JavaScript-файле (с расши- тируемой инструментальной панели (см. рис. 24.7).</p><p> рением.js).</p><p> Меню и панели инструментов DHTML Глава Во второй строке инструментальной панели содер жится текстовое поле, в котором пользователь будет вво дить URL. Когда пользователь нажимает кнопку "Go", браузер начинает загружать URL. HTML-код для этого — простой дескриптор <form>. Кнопка использует обра ботчик событий onClick(), чтобы вызвать функцию, ко торая перенаправляет браузер на соответствующий URL. Атрибут colspan применяется для корректного раз мещения ячейки по ширине всей таблицы. HTML-код выглядит так:</p><p> <td <input a РИСУНОК 24.7. Проектируемый интерфейс.</p><p> URL here" <input С упрощения будем использовать таблицы для хранения и упорядочения кнопок. Таблица будет содержать три строки с шестью ячейками в верхней </td> строке и по одной ячейке во второй и третьей строках.</p><p> Последняя строка всего лишь содержит результаты Фон таблицы будет серый, а документа — белый.</p><p> вызова метода экземпляра объекта Date. Это Первая строка таблицы будет содержать изображе делается для того, чтобы пользователь мог видеть рабо ния, составляющие инструментальную панель. Каждое ту кнопки "Reload". Когда пользователь нажимает изображение окружается дескрипторами <а>, чтобы "Reload", числовое значение, отображаемое в этой ячей можно было перехватывать события нажатия мыши. В ке, подтверждая фактическую перегрузку настоящее время Navigator не позволяет использовать страницы. HTML-код для этой строки следующий:</p><p> такие события в дескрипторах <img>, хотя Internet <td Explorer это разрешает, так что придется предусмотреть Result of (reload некоторую кодовую оболочку. Ниже показан пример 0 ', Три строки в комбинации с дескриптором <body> составляют всю интерфейсную часть инструментальной </td> панели. Листинг 24.5 показывает, что у нас уже имеет ся к настоящему моменту.</p><p> Листинг 24.5. HTML-часть панели инструментов.</p><p> <body <table <tr> <td <tr> <td <input a URL here" <input </tr> <tr> <td Result of (reload </head> <body <tr> <td <tr> <td <input a URL here" <input <tr> Result of (reload </body> НОК 24.8. Курсор мыши над кнопкой.</p><p> РИСУНОК 24.9. Нажатие кнопки инструментальной панели.</p><p> Резюме помогут приступить к созданию динамических страниц В главе уделялось внимание подробностям, связанным с использованием не только JavaScript, но также и дру с реализацией DHTML на сайте. Полученные знания гих HTML-элементов и CSS.</p><p> Взаимодействие с другими технологиями В ЭТОЙ ГЛАВЕ Подключаемые модули браузера Элементы управления ActiveX Вне зависимости от того, хорошо ли вы знакомы с пользуемых файловых форматов было бы непрактичным программированием на JavaScript или же пока являет- из-за слишком больших затрат денежных и временных ся новичком в этом деле, вы, скорее всего, еще не рас- ресурсов. Так что для большинства браузеров решение крыли всех функциональных возможностей данного отдается в пользу технологии подключаемых модулей.</p><p> языка. Web-разработчики знают, что существует множе ство других технологий, таких как Java-аплеты и эле Хотя в главе обсуждаются с менты управления ActiveX, которые можно использо которыми JavaScript может здесь вать для усиления впечатления, производимого сайтом.</p><p> не будет говориться о применении этих технологий на В главе рассматриваются несколько технологий по Web-страницах. Например, не будет детально рассмат добного рода, а также их использовании в JavaScript.</p><p> риваться использование дескрипторов, Некоторые из технологий предназначены только для и а также их атрибутов. Для получения дополнительной информации по этой теме определенных браузеров, тем не менее, и они являют посетите сайты Developer ся допустимыми.</p><p> msdn.microsoft.com) либо а также сайт циума Подключаемые модули браузера Современные браузеры собственными средствами могут Подключаемые модули и поддерживать содержимое всего лишь нескольких видов файловых форматов, к которым относятся тексты (вклю- Подключаемые модули идентифицируют тип передава чая HTML) и изображения. Однако для работы вне емых им данных в зависимости от Иден Web-браузеров люди для решения различных задач тифицируя тип данных, подключаемый модуль может постоянно используют множество других файловых выбирать соответствующий способ их обработки.</p><p> форматов. MIME является стандартом Internet, который опре Например, большинство прикладных программ об- деляет способы передачи файловых форматов (не тек работки текстов имеют собственные файловые форма- стовых) в почтовых сообщениях Internet. (Более подроб ты (например, формат файла Microsoft Word), так ная информация может быть найдена в Internet Requests же дело обстоит и с приложениями электронных таблиц, For Comment (RFCs) 1521 и 1522.) Толчком для созда презентаций, мультимедиа и т.д. Если Web-браузер под- ния упомянутого стандарта послужила необходимость держивает различные файловые форматы, появляется передачи через электронную почту не только докумен возможность построения различного содержимого, в тов, содержащих простой текст. MIME теперь позволяет любой момент доступного через Web, не говоря уже о прикладным программам электронной почты работать применении Internet для новых и увлекательных спосо- с отформатированным текстом, файлами приложений и бов представления информации. другими типами файлов, расширяющих сообщения.</p><p> Однако, для Netscape (или любой другой компании) Стандарт MIME может обрабатывать любой файловый создание в браузере собственной поддержки всех ис Взаимодействие с другими Глава формат, включая текст, PostScript, файлы изображений, • navigator.plugins. Этот объект, представляющий со бой свойство объекта Navigator, — массив всех под звуковые, видео- и сжатые файлы.</p><p> определяют тип содержимого и специ- ключаемых модулей, в настоящий момент установ фический подтип различных файловых форматов. Это ленных в браузере клиента. Поскольку такой массив стоит пояснить на примере. фактически является объекта Navigator, для файлов с расширением (Microsoft он имеет следующие свойства:</p><p> audio) как audio/x-wav. audio описывает • name. Имя подключаемого модуля (например, звуковой тип или категорию поддерживаемых файлов, Shockwave).</p><p> a — определенный тип файла (или подтип), под • filename. Имя файла подключаемого модуля.</p><p> держиваемый с учетом требований браузера, для интер претации файлов • description. Описание подключаемого модуля После начала работы браузер начинает просматри (обеспечивается поставщиком модуля).</p><p> вать все установленные подключаемые модули и при • length. Количество элементов в массиве.</p><p> сваивает MIME-типы соответствующим подключаемым • [...]. Массив объектов которые может модулям, которые могут прочитать их. При выявлении прочесть подключаемый модуль.</p><p> в процессе просмотра браузер загружает присвоенный (или зарегистрированный) подключаемый • navigator.mimeTypes. Это свойство, представляющее модуль в память, и обрабатывается этим собой подобъект объекта Navigator, — массив всех подключаемым модулем. MIME-тип может отображать mimeTypes, поддерживаемых в браузере клиента. По ся одним их трех способов:</p><p> добъект имеет следующие свойства:</p><p> • Встроенный (inline). Появляется на странице вмес • type. Имя MIME-типа (например, audio/x-wav).</p><p> те с другим содержимым. Размер области подклю • description. Описание MIME-типа (обеспечивает чаемого модуля определяется предварительно уста ся поставщиком модуля).</p><p> новленными значениями параметров height и width дескриптора, используемого для загрузки этого под- • enabledPlugin. Подключаемые модули, которые могут прочесть данный MIME-тип.</p><p> ключаемого модуля.</p><p> • Полный (full). Подключаемый модуль занимает все • suffixes. Расширения имен файлов, с помощью окно браузера за исключением инструментальных которых идентифицируются MIME-типы (на панелей. пример, для MIME-типа audio/x-wav). Рас ширения отделяются друг от друга запятыми.</p><p> • Скрытый (hidden). Подключаемый модуль выполня ется в фоновом режиме (подобно некоторым аудио Объект Plugins модулям).</p><p> Используя эти объекты в сочетании с JavaScript, мож но довольно быстро определить, установлен ли подклю Определение устанавливаемых чаемый модуль. Ниже приведен пример, в котором вы подключаемых модулей ясняется наличие подключаемого модуля Macromedia Определение того, какие в клиентском браузере уста- Shockwave. Если данный подключаемый модуль при новлены подключаемые модули и какие поддерживают- сутствует, файл загружается и отображается. Если нет, ся MIME-типы, дает разработчику Web-страницы мно- отображается альтернативная информация:</p><p> жество возможностей по управлению содержимым, var DesiredPlugin = предназначенным для отображения пользователям. На один из сценариев разработки мог бы выглядеть // ссылка на имя объекта модуля так: "Если пользователь имеет подключаемый модуль, if (DesiredPlugin) { отображается страница со всеми соответствующими write ( ' MIME -типами, а иначе — альтернативное содержимое".</p><p> }else{ В большинстве браузеров (но только не в Internet Explorer) JavaScript помогает выполнить это.</p><p> JavaScript-браузеры содержат два встроенных объек- ) та, которые дают весьма полезную информацию о под Объект navigator.plugins также содержит метод refresh(), ключаемых модулях и поддерживаемых который заставляет браузер находить все установленные браузером клиента:</p><p> подключаемые модули и соответствующим образом под страиваться. Если с методом используется ар Технологии программирования на динамическом HTML Часть IV Microsoft работает над методами расширения техно true (например, то логии ActiveX для других поддерживаемых наличие нового подключаемого модуля регистрируется включая MacOS, Solaris и HP-UX.</p><p> без выхода и перегрузки окна браузера.</p><p> Если такой браузер загружает HTML-документ с эле СОВЕТ ментом управления ActiveX, который еще не присут При использовании бра ствует в хост-машине браузера, браузер загружает его с узер перегрузит только которые изменяются сервера. Так должно происходить, потому что эти эле из-за изменения подключаемого модуля. Однако, по менты управления в действительности являются OLE умолчанию (если метод не используется) объектами и могут выполняться только в браузерах на браузер перегружает все страницы, которые содер жат любые типы файлов. совместимой с OLE-приложением платформе, такой как Microsoft Windows. Это создает проблему переносимо сти для тех пользователей браузеров, которым требует Объект Используя новый объект можно ся обратиться к такому документу.</p><p> достаточно быстро определить, поддерживает ли брау Понятие элемента управления ActiveX зер клиента определенный В следующем примере выясняется, поддерживает ли браузер MIME- Если ActiveX — новый термин, рассмотрим следующие тип (для кинофильма Macromedia два варианта. В зависимости от того, на что вы будете Director Shockwave). Далее следует логическое продол- опираться, каждый из вариантов будет более приемле жение, как в примере: мым. Если следовать от Web или Java, элемент управ ления ActiveX — это ответ Microsoft на var = мини-приложения, которые могут выполняться внутри окна браузера. А если опираться на разработку баз дан ных Windows, элементы управления ActiveX можно считать Web-эквивалентами и VBX (элементами управ ления Visual Basic), VCL (компонентами Delphi) или OCX (элементами управления OLE). Как будет показа ] но далее, связь с OCX — нечто гораздо большее, неже Можно также использовать простой цикл JavaScript ли простое сравнение.</p><p> для отображения всех поддерживаемых Прежде чем компания Microsoft решила, что ActiveX — наилучший термин с точки зрения маркетинга, тот же клиентским браузером:</p><p> элемент управления назывался OCX. Элементы управ for i = 0;</p><p> i < ления ActiveX были встроены в OLE-технологию, доступ + ную в течение нескольких лет. Однако, следует отметать, что элементы управления ActiveX требуют меньше затрат, чем стандартные элементы управления OLE. Поскольку для элементов управления ActiveX не применяются СОВЕТ ссылки или внедрения объектов, как, например, для Дополнительная информация об этих объектах может документа Word, часть из была быть найдена в главе 9.</p><p> удалена. В результате остался один компонент — более быстрый и занимающий меньше места.</p><p> Основная причина появления Java связана с необхо Элементы управления ActiveX димостью достижения переносимости для всех сред. В ActiveX-технология Microsoft также предоставляет ме- противоположность этому, главное достоинство элемен тоды внедрения в HTML-документы элементов управ- тов управления ActiveX — это совместимость с домини ления (в данном случае — OLE-приложения Microsoft). рующей на рынке операционной системой Windows 9x, Элемент управления OLE, внедренный таким образом NT и, в настоящий момент, Windows 2000. Совмести в HTML, становится элементом управления ActiveX, ко- мость проявляется в том, что те же самые элементы уп торый распознается Microsoft Internet Explorer 3+ и равления ActiveX, которые применяются на Web-стра Netscape Navigator, оснащенным подключаемым моду- ницах, могут использоваться любым Windows-приложе лем ActiveX. нием либо инструментальным средством, работающим с OCX. заключается в использовании Windows ПРИМЕЧАНИЕ большинством пользователей Web;</p><p> в конечном итоге В настоящее время эти элементы управления поддер элементы управления ActiveX становятся естественным живается только на платформе Windows. Однако расширением рабочего стола.</p><p> Взаимодействие с другими технологиями Глава Ниже приведен пример HTML-кода для встраивания происхождение программного обеспечения. Эта цифро элемента управления OLE (в данном случае OLE-объек- вая подпись отображается в Internet Explorer при загрузке та ButtonCtrl) в HTML-документ: элемента управления. Пользователь, глядя на нее, реша ет, продолжать ли загрузку. Если элемент управления не имеет цифровой подписи, пользователи уведомляют ся о его неизвестном происхождении и выполняется запрос на подтверждение загрузки.</p><p> </object> Строка для атрибута classid — значение Можно установить процесс "автоматического одобре да средства управления OLE ButtonCtl, в системном ре- ния" для поставщика, которому вы доверяете, чтобы все компоненты из этого источника одобрялись авто естре Windows. К счастью, нет необходимости записы матически.</p><p> вать такой код вручную. Код в приведенном примере генерировался приложением ActiveX Control Pad от Доступ с помощью JScript Microsoft. ActiveX Control Pad, в дополнение к возмож ностям ручного редактирования текста HTML-докумен Как только элемент управления ActiveX будет встроен тов, обеспечивает полуавтоматическое размещение и в документ, можно добавлять JScript-код и работать с создание сценариев для элементов управления ActiveX.</p><p> ним, как с любым другим объектом JScript, т.е. устанав При использовании приложения ActiveX Control Pad для ливать свойства, реагировать на события или обращаться элемента управления ActiveX в HTML-до к методам элементов управления ActiveX.</p><p> можно вызвать список всех элементов управле Сразу же после начала использования элементов ния OLE, доступных в системном реестре Windows. Все управления ActiveX становится ясно, что в присоеди элементы управления OLE доступны авторам HTML нении к ним JScript-кода нет ничего сверхъестествен документов.</p><p> ного. Если знать свойства и методы элемента управле ния, для создания сценария можно воспользоваться обычным JScript-редактором.</p><p> Более подробное описание ActiveX Control Pad выходит В листинге 25.1 показан пример JScript-кода для за рамки данной книги. ActiveX Control Pad можно выг реализации ответа на метод Click командой кнопки.</p><p> рузить из Developer Network Online Microsoft. Его же отыскать по адресу Листинг 25.1. Использование JScript для взаимодействия с элементом управления ActiveX.</p><p> Элементы управления ActiveX имеют набор собы <head> тий, каждое из которых связано с частью кода JavaScript <title>JavaScript (или, скорее, JScript). Например, элемент управления рые могут задаваться в коде сценария:</p><p> = = msg;</p><p> Реализация защиты ActiveX содержит систему цифровых подписей, встро </script> енную в его компоненты. Разработчик компонент может </head> <body цифровую подпись на элементе управления <object ActiveX, чтобы гарантировать пользователям заявленное Технологии программирования на динамическом HTML Часть IV Любой метод Java, объявленный с public, доступен из JavaScript, и любое поле объяв <param ленное как public, доступно для управления и измене loves ния. Первый шаг организации связи JavaScript с Java аплетом — это создание ссылки на аплет. Как только этот шаг выполнен, становится возможным обращаться непосредственно к любому из членов аплета.</p><p> </object> </body> LiveConnect — это на стороне клиента, которая обеспечивает непротиворечивое уп равление данными между тремя главными клиентски Поскольку дескриптор <object> не позволяет добав- ми средами Navigator — подключаемыми Java и JavaScript. Дополнительную информацию отно лять обработчики событий в виде его параметров, для сительно LiveConnect можно найти на сайте DevEdge добавления параметров for и event потребуется прибег Netscape по нуть к альтернативному синтаксису обработки событий Microsoft, который предполагает использование расши Технология LiveConnect позволяет JavaScript связы ренного синтаксиса дескриптора <p> или JavaScript-сценарии могут вызывать Java-методы, иссле довать и изменять Java-переменные и управлять Java JavaScript-сценарии могут также ссылаться на Java аплетами. В свою очередь, Java-аплеты могут обращаться аплеты, выполняющиеся в других фреймах того же к JavaScript-методам, свойствам и структурам данных.</p><p> окна браузера. Например, если Java-аплет выполня ется в фрейме с именем framel, к нему можно обращать ся из фрейма того же уровня следующим образом:</p><p> Этот метод доступа к Java-аплетам называется LiveConnect и поддерживается только браузерами Navigator.</p><p> Подключаемые модули Java Доступ к Java из JavaScript В JavaScript каждый подключаемый модуль на Web JavaScript-сценарии взаимодействуют с Java-аплетами, странице считается элементом массива embeds. Напри выполняющимися на HTML-странице, путем обраще- мер, — первый встроенный объект ния к членам (методам и полям) Java-объектов аплета. на странице.</p><p> Взаимодействие с другими технологиями Глава Если подключаемый модуль связан с классом Java объектами и извлекать информацию их них. Когда к его статическим переменным и JSObject представляет массив JavaScript, полезно методам можно обращаться тем же способом, который исследовать отдельные элементы массива, а когда был продемонстрирован в предыдущем разделе для до- JSObject вводит Window, Document, History или подоб ступа к переменным, методам и свойствам Java-аплета. ные им JavaScript-объекты, неплохо уметь проверять их свойства.</p><p> Доступ к JavaScript из Java На первый взгляд может показаться заманчивым Для доступа к JavaScript-методам, свойствам и структу- способ обхода проблемы путем разложения объектов рам данных из Java-аплета необходимо сначала импор- JavaScript на более простые объекты. После такого раз тировать пакет javascript Netscape. Это делается с ис- ложения полученные элементы можно было бы послать пользованием следующего синтаксиса: Java как наборы простых объектов, где они бы переве лись в Java-объекты String, Double и Boolean.</p><p> import Главный недостаток такого подхода, помимо боль netscape.javascript определяет класс JSObject и шого объема дополнительной работы, состоит в том, что объект исключения JSException. Следует предоставить этот способ не оставляет никакой возможности для об доступ к JavaScript, объявив атрибут mayscript работки объектов переменного размера. Если неизвест (без аргументов) для дескриптора. Это предот но заранее, сколько элементов будет содержать массив, вратит доступ из аплета к JavaScript на странице без не найдется способа передать каждый отдельный эле знаний, имеющихся у разработчика. Если атрибут мент в Java-метод, поскольку Java-методы принимают mayscript не будет объявлен, возникнет ошибка.</p><p> набор аргументов, устанавливаемый в процессе компи ляции. Вероятно, лучше будет просто передать Java сложные объекты JavaScript и научиться работать с Прежде чем обращаться к JavaScript, необходимо полу ними.</p><p> чить дескриптор окна Navigator. Для этого воспользуйтесь методом getWindow класса ПРИМЕЧАНИЕ = Убедитесь, что атрибут mayscript присутствует в дес winHandle — это переменная типа JSObject.</p><p> крипторах для всех аплетов, которые пла нируется использовать с JSObject. Без этого аплет не Для обращения к объектам и свойствам JavaScript получит доступа к объектам и свойствам JavaScript. Эта необходимо применять метод getMember класса мера была разработана для того, чтобы позволить netscape.javascript.JSObject. Это можно сделать, вызвав авторам HTML-кода включать непроверенные в свои страницы без переживаний на предмет getMember для поочередного обращения к каждому того, что эти получат доступ к потенциально объекту JavaScript. Однако, в первую очередь следует критичной информации, предназначенной только удостовериться в существовании дескриптора окна JavaScript.</p><p> JavaScript (он получается при помощи метода getWindow).</p><p> Для вызова JavaScript-методов можно воспользовать- В качестве конкретного примера предположим, что ся call и класса netscape.javascript. необходимо использовать JavaScript в качестве GUI для JSObject. Повторим, что необходимо применить Java-аплета построения графика по точкам. Ниже пока getWindow для получения дескриптора окна JavaScript, заны объявления переменных и функций.</p><p> и затем при помощи call или eval обратиться к методу <soript JavaScript. Синтаксис выглядит так:</p><p> <!- var = new • arguments) var = new — имя вызванного JavaScript-метода, function addPoint(x, y) ( a arguments — массив аргументов, передаваемых = = y;</p><p> в данный метод.</p><p> ) • function expression — JavaScript-выражение, вычисляемое для JavaScript-метода. } </script> JSObject а также HTML-форма с обработчиками событий:</p><p> Поскольку сложный JavaScript-объект (например, мас <form> сив или объект Window) отражаются в Java в виде объек <input тов типа JSObject, важно знать, как управлять этими на динамическом HTML <input getMember() применяется для получения свойства length одного из объектов массива (оба массива имеют одну и <input Point" ту же длину). getMember() возвращает универсальный Object (базовый класс для всех Java-объектов), однако его требуется затем привести к соответствующему типу.</p><p> Points" Известно, что свойство length массивов JavaScript — чис ловое, а JavaScript-числа отражены в Java как Double, поэтому объект, возвращенный приводит Можно собрать координатные пары (х, у), исполь ся к Double.</p><p> два текстовых входных и функцию Обратите внимание, что в выбранном здесь типе нет и послать их в одном большом пакете с помо никакой гибкости;</p><p> числа, доступные из JSObject дол щью функции жны приводиться к Double. Только когда числовые зна Это позволяет передавать аплету произвольное чис чения JavaScript передаются непосредственно в Java как ло точек, из которых требуется составить график, но аргументы функций, они могут появляться как Java требует разложения массивов точек в Java. Java-метод типы, отличные от Double.</p><p> plotPoints() из этого примера дает хорошее представле int n = ние о том, что можно сделать с объектами JSObject. Код выглядит следующим образом:</p><p> Хотя этот оператор не содержит непосредственно JSObject, он демонстрирует полезное для public void JSObject преобразования JavaScript-числа в используемый в Java Double length = (Double) тип числа. Программисты часто будут получать объек ты Double, тогда как им нужнее другие типы, следова int n = for (int i = 0;</p><p> i < n;</p><p> i++) { тельно, их необходимо будет преобразовать. В этом слу чае метод doubleValue() объекта Double используется для String sx = (String) получения фактического числового значения, а метод String sy = (String) round() пакета Math — для получения целого числа, Double x = new Double у = new Double (sy), наиболее приближенного к данному значению.</p><p> doPlot(x, y) String sx = (String) e) String sy = (String) point specification") Внутри цикла возникает необходимость в способе ) получения числового значения каждого элемента объек тов JSObject, представляющих массивы xvals и yvals.</p><p> Рассмотрим более подробно части программы, стро Здесь метод getSlot() применяется для извлечения от ка за строкой.</p><p> дельного элемента массива с данным индексом. Метод public void xvals, JSObject getSlot() берет индекс в качестве аргумента и возвращает объект JavaScript, соответствующий этому индексу.</p><p> getSlot(), подобно возвращает Этот метод получает два объекта JSObject — массив ный Java-объект, поэтому его снова потребуется приве х-координат и массив у-координат. Обратите внимание, что JavaScript, даже числовые, в Java не пока- сти к нужному типу. Как было сказано, массивы xvals и yvals содержат JavaScript-строки, следовательно, в дан зываются как массивы одного из встроенных числовых ном случае требуется использовать Java-тип String.</p><p> типов Java. Если функция вместо этого записывается с сигнатурой: На первый взгляд это может показаться странным, т.к. элементами массива обычно являются числа, но public void xvals, String — действительно то, что нужно в данном случае.</p><p> Вспомните, что значения массивов были получены из то любая попытка вызова ее из JavaScript потерпит не текстовых полей ввода HTML-формы. В JavaScript, если удачу. Вы окажетесь связанными с объектами JSObject строка выглядит как число (состоит полностью из вместо требуемых числовых массивов.</p><p> цифр), это еще не делает ее числом.</p><p> Double length = (Double) Double х = new Double у = new (sy);</p><p> Вызов — первый шаг, необходимый Нам понадобится способ преобразования строк, ко для преобразования аргументов из формы, в которой торые выглядят как числа, в фактически числа, и для они были переданы, к используемой форме. Метод этого больше всего подойдет упоминаемый ранее кон Взаимодействие с другими технологиями Глава Double. Ему потребуется String в качестве ар- JavaScript-объекта Window, соответствующего окну, содер гумента, и он вернет объект Double, соответствующий жащему этот Возвращенный объект — это про значению с плавающей точкой двойной точности, пред- сто тот же самый объект, обозначенный как Window в ставленному String. Если String не представляет число- JavaScript. getWindow() — особо важный и полезный вого значения, применяется метод, т.к. он является единственным способом, с по поэтому операторы будут вложены в блок try. В случае мощью которого Java-аплет может получить "новый" возникновения исключения попытка помещения точки JSObject (т.е. JSObject, не полученный из другого, су в график прерывается и начинается следующая итера- ществовавшего ранее, объекта JSObject) без явной пе редачи его из JavaScript;</p><p> класс JSObject не содержит ция цикла.</p><p> конструкторов public. Аргументом для getWindow() яв у) ляется непосредственно объект аплета.</p><p> Имея значения координат (х, у), извлеченные из JSObject document = (JSObject) JSObject, осуществляется вызов гипотетического низко уровневого метода рисования по точкам.</p><p> После получения объекта Window метод getMember() Хотя исчерпывающее изучение класса JSObject вы используется для извлечения свойства по его имени. В ходит за пределы этой книги, еще один пример помо данном случае свойством является объект Document жет продемонстрировать несколько его методов. Пред окна, т.е. объект, обозначенный в положим, что требуется добавить к аплету метод, JavaScript. Переменные xvals и yvals, как и все перемен составляющий график по всем точкам, которые пользо ные, определенные на "верхнем уровне" JavaScript-сце ватель уже ввел в форму, и не дожидающийся нажатия нария, являются свойствами объекта Document. Слож кнопки "Plot Points" пользователем. Метод, который ные объекты JavaScript, такие как Document, отражаются показан ниже, позволяет аплету выйти в JavaScript-мир в Java как JSObjects, следовательно, Object, возвращен и рассматривать требуемые ему объекты JavaScript вся ный будет приводиться к этому типу.</p><noindex> <div class="reklama"> <center> <a rel="nofollow" target="_blank" href="http://www.dobrota.biz/stati/chto-takoe-saentologiya.php" title=""> <table> <tr> <td> <img src="http://www.dobrota.biz/stati/images/scientology.jpeg" border="0" alt="" hspace="30" vspace="20" align="right" width=130 > </td> <td> <font size=+3>Узнайте, что такое Саентология... </font><br><br> <center><font color=red size=+1>Ваша жизнь поменяется...</font><br><br> </center> </td> </tr> </table> </a> </center> </div> </noindex> <p> кий раз, когда это потребуется:</p><p> JSObject xvals = (JSObject) private void // Получить окно и JSObject yvals = (JSObject) window = = (JSObject) Как только получен объект Document, можно при // массивы ступать к извлечению необходимых переменных. Для JSObject = (JSObject) достижения этой цели еще раз применяется метод Объекты xvals и yvals являются JavaScript JSObject = (JSObject) массивами, которые представляются в Java как JSObject, поэтому объекты, возвращенные getMember(), снова // приводятся к этому типу.</p><p> I PlotPoints (xvals, Рассмотрим более подробно строки из новых мето Теперь, когда получены JSObject, представляющие дов и концепции, не применявшиеся в предыдущем при массивы xvals и yvals, можно вызвать метод plotPoints() мере.</p><p> изнутри Java точно так же, как он вызывался из JavaScript.</p><p> private void Стоит отметить два других метода класса JSObjects — и eval(), которые имеют следующие прототипы:</p><p> Обратите внимание, что этот метод — private, т.е. он не предназначен для вызова из JavaScript. Обратите так Object Object же внимание, что здесь не требуются аргументы, по public Object s) вся информация, необходимая для решения за дачи, содержится в JavaScript. Главное достоинство call() вызывает метод methodName своего объекта с примера состоит в том, что могут свобод- аргументами, хранящимися в массиве args. Это эквива но отыскивать объекты и свойства JavaScript, причем лентно запросу для этого не требуется никаких пользовательских дей..</p><p> ствий со стороны JavaScript.</p><p> из JavaScript. Например, следующий код в аплете JSObject window JSObject window = Класс JSObject содержит статический метод Object = { "Hello, world!" } который может использоваться аплетом для получения, Технологии программирования на динамическом HTML Часть IV эквивалентен такому JavaScript-коду: К счастью, в упомянутые выше исключения входят некоторые из наиболее часто используемых дан ных, в том числе и три основных типа данных Метод eval() объекта вычисляет строку аргумента JavaScript: строки, числа и логические переменные.</p><p> как выражение JavaScript. Вычисление производится в JavaScript-строки (т.е. строковые константы и перемен пределах контекста объекта. Замена последней строки ные, которым в последнюю очередь были присвоены в предыдущем примере на строки) появляются в Java как экземпляры Java-типа String. JavaScript-числа (числовые константы и перемен ные, которым в последнюю очередь были присвоены обеспечивает тот же самый результат. Обратите внима целые или действительные числовые значения) преоб ние на использование одинарных кавычек внутри двой разуются в Java-объекты Double. Логические перемен ных.</p><p> ные JavaScript (true и false) станут Java-объектами Boolean.</p><p> Трансляция типов данных Другой особый случай касается JavaScript-объектов, Одним из наиболее трудных и запутанных аспектов в которые являются оболочками для Java-объектов. Такие вызовах Java-методов из JavaScript является получение объекты просто "изымаются из оболочек" и преобразовы совпадения типов аргументов, переданных Java, с типа- ваются в исходные Java-типы. Хотя сей факт в настоящее ми аргументов, ожидаемых Java-методом. Если два на- время не задокументирован, существует дополнительная бора аргументов не соответствуют друг другу, происхо- гибкость при передаче JavaScript-чисел непосредствен дит сбой в обращении к функции и выдается сообщение но Java-методам. Попытка сделать вызов наподобие об ошибках, в котором говорится, что JavaScript не мо жет найти Java-метод, который бы ожидал передавае окажется успешной, если myApplet содержит ме мые аргументы.</p><p> тод с сигнатурой Java — строго типизированный язык (т.е. каждая пе ременная имеет совершенно определенный, объявлен public void x) ный тип), поэтому для всех должно быть где type — один из следующих типов: Double, double, объявлено заранее, сколько аргументов они ожидают, float, long, int, short, char или byte, хотя документация какого типа и каком порядке. В Java-программе любая гласит, что приемлем только Double. В когда в попытка вызова метода с последовательностью аргумен имеется много перегруженных ожида тов, которая в точности не соответствует объявленной ющих один из указанных выше типов, выбирается пер последовательности для данного метода, приводит к вый такой метод (метод, самый близкий к началу файла ошибке на этапе компиляции.</p><p> исходного кода на Java). Нарушение лексикографичес JavaScript, напротив, имеет гораздо менее строгий кого расположения — вероятно, не лучший способ ре контроль типов и, как интерпретируемый язык, должен шить конфликты между перегруженными методами;</p><p> осуществлять всю необходимую проверку во время вы скорее всего, скоро будет предложен другой механизм.</p><p> полнения. JavaScript-переменные не имеют объявленно Предположим, что для контроля приемлемых значе го типа;</p><p> фактически, их можно не объявлять вообще, а ний применяется метод setText(), и требуется вместо этого просто ссылаться на них. Той же самой найти способ выяснения, привел ли вызов setText() к JavaScript-переменной может быть присвоена строка в успешной установке theText. Новая функция, которая одном операторе, целое число в следующем операторе возвращает логическое значение, отображающая успех и массив — еще в одном.</p><p> или неудачу, может выглядеть следующим образом:</p><p> Как JavaScript-объекты преобразовываются в Java public boolean s) { объекты при передаче их методам Java? Откуда Java зна if ет, как найти Java-тип, который точно соответствует // Я устал этой строки. Не используйте структуре JavaScript-объекта? Коротко говоря, он вооб return false;</p><p> ще этого не делает. Вероятно, такого объекта не суще ствует. Если объект не относится к одному из опреде theText = ленных исключений, Java не обязательно имеет класс, return true который в точности отражает тип JavaScript-объекта, поэтому он просто присваивает это значение типу по умолчанию (JSObject), предназначенному представлять В JavaScript-сценарии, включающем строку JavaScript-объекты в Java.</p><p> Взаимодействие с другими технологиями Глава var = Вызов Java-методов Предполагая, что LiveConnect включен, можно исполь зовать следующий синтаксис для обращения к Java-ме значение, возвращенное setText(), сохранится в changed.</p><p> тоду:</p><p> Тем не менее остается вопрос: как Java-значение Boolean, возвращенное будет преобразовываться в В данном случае ответ прост и инту packageName и — свойства объекта Packages.</p><p> итивно понятен: Java-значение Boolean станет JavaScript Имя Packages в вызовах можно опустить в пакетах значением boolean, когда оно вернется JavaScript.</p><p> Navigator по умолчанию — Java, Sun или Netscape. Напри Передача Java-объектов в JavaScript не всегда настоль мер, на Java-класс можно ссылаться как проста — для точного перевода каждого объекта существу или Packages.java.lang.System.</p><p> ет ряд правил. Впрочем, часто все происходит именно Рассмотрим пример. В приведенном ниже коде так, как нам нужно. Java-массивы становятся JavaScript JavaScript использует доступ к Java для вывода сообще массивами, числовые типы Java становятся JavaScript ния на Java-консоль:</p><p> числами, Java-значения Boolean — JavaScript-значени ями boolean, a Java String — JavaScript String. В заклю- short) становятся JavaScript-числами.</p><p> • Java-значения Boolean становятся JavaScript-значе- Установка Java-свойств ниями boolean.</p><p> Хотя это не самый хороший стиль программирования для Java-классов — предоставлять всем прямой доступ • Java JSObject преобразуются в свои исходные к компонентам данных (называемым также свойствами JavaScript-объекты.</p><p> или полями), объявляя их public, но иногда бывают си • Java-массивы становятся JavaScript-объектами Array.</p><p> туации, в которых это оправдано. Когда • Все другие Java-объекты преобразуются к JavaScript содержат поля public, у JavaScript-сценариев появляет объектам, помещенным в оболочки, и могут исполь- ся возможность непосредственно изменять их так зоваться для обращения к первоначальным Java как они вызывают Java-методы public. Например, рас объектам.</p><p> смотрим следующий фрагмент Java-аплета:</p><p> public String theText;</p><p> При попытке преобразования JavaScript-объекта в public void s) { оболочке в JavaScript-строку, число или логическое theText = значение, вызывается метод исходного Java-объекта toString(), или если он су Наилучшим стилем программирования будет уста ществует, и значение, возвращенное из соответствующе новка текста следующим образом:</p><p> го метода, становится значением преобразованного объекта. Если требуемый метод не существует, преоб разование дает сбой. Обратите внимание, что Java-стро Для достижения того же результата можно было бы ки корректно работают в JavaScript даже при том, что записать:</p><p> они были переданы JavaScript как объекты-оболочки.</p><p> = "Hello Любая попытка использовать их в контексте, в котором JavaScript-строки, приводит к корректному Те же правила, которые управляют трансляцией преобразованию этих строк.</p><p> JavaScript-объектов в Java-объекты в процессе обраще ния к функции, применимы и в данном случае. Здесь Подробнее о имеется в виду, что таким образом могут быть установ в этой главе рассматривались способы взаимодей лены только Java String, Double, Boolean, JSObject и ствий JavaScript/Java. Теперь хорошо известно, что мож примитивные числовые типы, поскольку все JavaScript но и, до некоторой степени, как это работает.</p><p> переменные первоначально отражаются в Java в виде более подробно исследуется, что фактически про одного из этих типов.</p><p> исходит при вызове этих методов и свойств из различ Использование Java-пакетов ных гред.</p><p> Возможности взаимодействия JavaScript с Java не огра ничены аплетами. JavaScript-сценарии имеют также программирования на динамическом HTML Часть доступ к статическим методам и полям базовых фильма, в котором требуется включать и выключать Java-пакетов, они могут даже создавать новые Java-объекты. звук с использованием JavaScript. Если аплет предостав Java-пакеты доступны в JavaScript через массив Packages ляет методы, подобные показанным ниже, для управ документа. Например, Java-пакет исполь- ления звуковой дорожкой кинофильма можно вызывать зуемый для консольного ввода-вывода, будет называть- эти методы из ся в JavaScript System, a Java-пакет public void java.lang.Math Packages.java.lang. Math. Следова- public void тельно, для записи значения "пи" на Java-консоли мож Если желательно свести все управление звуковой но использовать следующий код:</p><p> дорожкой кинофильма к простому щелчку кнопкой var pi = мыши, можно использовать JavaScript в качестве "про Packages. + вода" для присоединения переключателей HTML-фор мы к Java-аплету. Следующий пример демонстрирует Для сокращения в ссылке к трем заданным по умол применение элемента form метода onClick для взаимо чанию пакетам sun и netscape — можно безопас действия с аплетом:</p><p> но опустить ключевое слово Packages. To есть, в пре делах JavaScript-объекта Document имена sun и <input netscape представляют собой, соответственно, альтер On нативные имена для Packages.java, и Packages.netscape. Используя эти имена, можно пере <input записать пример с "пи" образом:</p><p> Off var pi = is:</p><p> Значения для обработчика событий onClick опреде Также возможно создавать новые Java-объекты ди ляют, что методы или намически, используя операцию new. Это удобный спо аплета с именем myApplet вызываются всякий раз при соб обратиться к некоторым из мощных встроенных сер нажатии соответствующего переключателя. В качестве висных Java-классов — хэш-таблицам, стекам, векторам, более сложного примера (который иллюстрирует пере датам и т.п. — без написания полного Java-аплета. В дачу аргументов Java-методам), что ап следующем примере на JavaScript создаются два Java лет также содержит метод с прототипом объекта Date, и затем они сравниваются с помощью метода after класса Date для выяснения, является ли те- public void s) кущая дата последней.</p><p> который при вызове изменяет текст, отображаемый ап var theDate = new // летом, на значение, передаваемое в строке s. Если в // дата форму добавить следующие элементы var deadline = new 6, // 26 июля 2000 г.</p><p> <input if <input Text" alert ("I missed my )else{ пользователи смогут вводить в текстовом поле новые строки, которые будут отражаться в аплете. При нажа Управление тии кнопки "Change Text" значение текстового поля из влекается, преобразуется в String Java и передается как После получения ссылки на аплет, следующим шагом аргумент в метод аплета Это весьма мощ будет установка связи с ним путем активизации одного ный инструмент. Возможность передачи JavaScript из его методов. Например, если аплет имеет общедос объектов Java-методам позволяет быстро и легко конст тупный метод который не содержит никаких руировать привлекательные графические пользователь аргументов, этот метод можно вызвать следующим об ские интерфейсы из стандартных HTML-форм, усили разом:</p><p> вая их за счет обработчиков событий JavaScript, и при менять их для управления Java-аплетами.</p><p> Создание приведенного выше вызова из JavaScript производит такой же эффект, как вызов из Java метода LiveAudio объекта аплета. Для еще одного примера пред LiveAudio, неотъемлемая часть браузера Netscape Navigator, положим, что имеется Java-аплет с музыкой из кино представляет собой встроенный подключаемый модуль, Взаимодействие с другими технологиями Глава позволяющий браузеру Navigator запускать звуковые Рассмотрим методы управления LiveAudio через файлы собственными средствами. По сути дела, JavaScript:</p><p> LiveAudio расширяет Navigator в сторону распознавания • Включает звук. Можно определить значение нового типа содержимого. Это означает, что большин цикла, подобно значению атрибута loop, с необяза ство пользователей Web теперь может свободно получать тельным URL для звука, если исходный не ис и прослушивать аудиофайлы при наличии соответству пользуется.</p><p> ющего оборудования. Это, в свою очередь, открывает • stop(). Останавливает звук, если он был включен.</p><p> для Web-разработчика новый мир больших возможнос тей — возможностей восприятия информации и развле- • Пауза для звука в текущей позиции. Для чений "через уши".</p><p> продолжения воспроизведения можно использовать интегрирован в среду Navigator и может методы или pause().</p><p> легко управляться через JavaScript и LiveConnect. Эти • start_time() и end_time(). Позволяют переустанавли преимущества наряду с широкой доступностью LiveAudio, вать время начала и конца воспроизведения. Значе требуют его детального обсуждения. Глава содержит ния определяются в секундах.</p><p> примеры LiveAudio и демонстрирует способы примене • start_at_beginning() и stop_at_end(). Устанавливают ния JavaScript для управления им.</p><p> время начала и конца воспроизведения на начало и конец звукового файла.</p><p> Эта книга, вероятно, окажется содержа • setvol(). Устанавливает громкость звука в интервале щей информацию о LiveAudio. Промышленность раз от 0% до 100%.</p><p> в направлении создания встроенных проигры вателей, таких как G2 Player Real и Windows • fade_to(). Устанавливает громкость, плавно изменяя Media Player, для обработки аудио- и видеофайлов.</p><p> ее от текущего значения.</p><p> Как утверждается на Web-сайте Netscape, LiveAudio • fade_from_to(). Позволяет определить два значения был создан с учетом всех функциональных возможнос- и плавно регулировать звук от одного значения к тей LiveConnect. Это означает, что можно пользовать- другому.</p><p> ся любыми преимуществами LiveConnect и JavaScript • Возвращает true, если звуковой файл заг для управления внедренными (или встроенными) ружен и к воспроизведению.</p><p> С помощью LiveConnect JavaScript • IsPlaying(). Возвращает если звук воспроизво может взаимодействовать с LiveAudio, позволяя про дится.</p><p> граммно выполнять следующие действия:</p><p> • IsPaused(). Возвращает true, если воспроизведение • Создание альтернативных интерфейсов управления звука приостановлено.</p><p> звуком.</p><p> • GetVolume(). Возвращает текущую громкость.</p><p> • Задержку загрузки аудиофайла, пока пользователь не выполнит действие (например, нажатие кнопки Эти методы обеспечиваются через свойство "Play").</p><p> embeds, которое содержится в массиве на те • Создание интерфейсных кнопок с шумовыми эффек- кущей странице. Для применения одного из перечис тами. ленных методов просто обращаются к нему, используя следующий формат:</p><p> • Обеспечение аудиорасширения для взаимодействия с пользователем. Например, можно заставить объект говорить, что он делает при нажатии или перемеще Например, вызвать метод play() во внедренном про нии курсора мыши поверх него.</p><p> игрывателе myRadio можно с помощью такого кода:</p><p> Использование JavaScript-методов обеспечивает для LiveAudio несколько мето Воспроизведение звуков в ответ на дов чтобы дать возможность разработчику JavaScript-события легко управлять аудиофайлами, внедренными в Web страницу. Для этих методов доступен JavaScript, одна- Как упоминалось ранее, JavaScript можно использовать ко, где-то на странице потребуется встроить консоль для вызова звука в любом месте сайта. Тем не менее, LiveAudio.</p><p> зачастую наиболее пригодным местом для вызова зву Технологии программирования на динамическом HTML Часть IV усиливающих впечатления пользователя, оказыва ются Следующий пример использует | | I эту концепцию, демонстрируя способ вызова несколь 31 В ких звуков на Web-странице путем захвата и обработки Sounds on JS Events событий on onUnLoad, и onClick обработчиками The fallowing are of JS событий JavaScript.</p><p> В этом примере (см. листинг 25.2) звук (type.wav), привязанный к нажатию клавиш, воспроизводится после загрузки страницы. Для демонстрации события onClick предполагается, что после щелчка на гиперссылке поль зователь слышит звук кассового аппарата, а при нажа тии на кнопку — звук выстрела. Кроме того, при уходе со страницы пользователь услышит звук разбиваемого стекла. Результирующее окно браузера показано на рис.</p><p> Листинг 25.2. Управление звуками при помощи РИСУНОК 25.1. Примеры вызова звуков в ответ на JavaScript. _ события.</p><p> <head> </head> <body Sounds on JS Events </h2> <hr> The following are of JS event handlers used to play <hr> РИСУНОК 25.2. Управление внедренными звуками с помощью <p> Click here for sound Листинг 25.3. Управление внедренными звуками с помощью JavaScript. _ <input <head> <title>JavaScript </head> </body> <body> Embedded Sounds in JavaScript Следующий пример демонстрирует способ примене mastersound ния некоторых встроенных JavaScript-методов для уп равления звуковыми файлами. Код, показанный в лис <hr> тинге 25.3, позволяет загружать звук и затем управлять This document includes a hidden embedded им с помощью нескольких кнопок. Обратите внимание sound, which is loaded after на использование скрытой консоли для первоначально the page is loaded. can use the го вызова LiveAudio. На рис. 25.2 находится получив- JavaScript buttons below to control the шаяся в окне браузера страница.</p><p> Взаимодействие с другими технологиями Глава <hr> ставлена технология подключаемых модулей Netscape и объяснены различия между подключаемыми модуля <input ми, вспомогательными приложениями и Здесь также обсуждались проблемы интегрирования элементов управления ActiveX с JScript. Было выясне <input но, что такое ActiveX-технология и как ее можно ис пользовать при создании сценариев. Кроме того, рас сматривались вопросы взаимодействия с Java-аплетами через Глава завершилась обсуждением способов примене ния обработчиков событий JavaScript для вызова звуков Резюме на HTML-странице, а также способов установки вне шних аудиопроигрывателеи в качестве вспомогательных В главе рассматривались некоторые способы взаимодей- приложений прослушивания аудиофайлов.</p><p> ствия JavaScript с другими технологиями. Была пред Избранные технологии ЧАСТЬ В ЭТОЙ ЧАСТИ 26. Гарантия работы сценариев в браузерах Netscape и Microsoft 27. Методы выяснения типа браузера 28. Навигация по сайту с использованием JavaScript 29. Формы и верификация данных 30. Персонализация и динамические страницы 31. Сопоставление шаблонов с помощью регулярных выражений 32. Технология манипуляции данными со стороны клиента 33. Обработка ошибок 34. Отладка 35. JavaScript и безопасность в Web работы сценариев в браузерах Netscape и Microsoft В ГЛАВЕ Версии языка и версии браузера Сравнительный анализ JavaScript-диалектов Ошибки Первоначальный вид JavaScript, как и всех компью- Из сказанного выше ясно, что JavaScript претерпел терных языков, претерпел несколько изменений. Наи- некоторые изменения, которые все еще проявляются в большее число изменений было внесено в версии JavaScript различиях способов создания сценариев. В главе расска 1.1 и 1.2. В этих версиях основные функциональные зывается, какие версии браузеров поддерживают функ возможности постоянно модифицировались, и програм- циональные возможности JavaScript.</p><p> мистам становилось все сложнее создавать JavaScript код, который работал бы в разных браузерах. Обычно Версии языка и версии браузера такие проблемы обходили, избегая использования тех особенностей, из-за которых возникали проблемы со- Возможно, вы несколько запутались во всех этих номе вместимости, однако проблемы JavaScript существова- рах версий JavaScript и JScript и номерах версий брау ли и в рамках базовых функциональных возможностей! зеров Microsoft и Netscape. Таблица 26.1 показывает большую сумятицу внесла компания Microsoft, соотношения версий языка и версий браузеров.</p><p> коренным образом изменившая JavaScript, дабы не Таблица Соотношение версий языка и покупать лицензию на ее использование. Результатом версий браузера.</p><p> стала еще одна разновидность JavaScript — от Microsoft, Браузер Версия Язык получившая название JScript. В конечном итоге на JavaScript начали смотреть как на нечто очень непосто Netscape Navigator 2.0 JavaScript янное.</p><p> JavaScript К счастью, Netscape и Microsoft признали, что Ва JavaScript 1. вилонскую башню из JavaScript строить ни к чему. Они JavaScript 1. представили язык на утверждение комитету стандарти 6.0 JavaScript 1.4 и 1. зации ЕСМА (European Computer Manufacturers Association — Европейская Компьютерная Ассоциация Microsoft Internet 3.0 JScript Explorer Изготовителей), который и собрал воедино язык 1.0 (ЕСМА262). Стандарт был очень быс- JScript 3. тро принят как Netscape, так и Microsoft.</p><p> 5.0 JScript 5. После этого события базовые функциональные воз 5.5 JScript 5. можности JavaScript стабилизировались в версиях JavaScript 1.3 и JScript 3.0. Эта стабильность сохраня Как видно из приведенной таблицы, весьма важно ется и на сегодняшний день в JavaScript 1.4 и JScript 5.O.</p><p> знать, какие браузеры будут использовать заказчики для Проблемными областями сейчас являются не они, а ско просмотра Web-страниц. Решив в первую очередь, ка рее интеграция в JavaScript новых Web-технологий, та кие браузеры будут поддерживать создаваемые Web-стра ких как каскадирование таблиц стилей (CSS).</p><p> ницы, можно сберечь немалое время на разработку. С дру гой стороны, если есть некая особая функциональная Избранные Часть V возможность JavaScript, которую требуется использовать Date Function Navigator Submit на Web-странице, тогда следует выбирать браузер, со- Document Hidden Option Text ответствующий такой версии JavaScript, которая поддер- History Password Textarea живает необходимые функциональные возможности, Embed Link Radio Window либо воспользоваться методикой выяснения типа брау Функции зера (см. главу 27).</p><p> escape unescape Сравнительный анализ JavaScript- parseFIoat Операции диалектов % & && JavaScript был детищем Sun Microsystems. Navigator &= * *= Netscape стал первым браузером, интерпретирующим / // /= язык и обеспечивающим расширенные функциональные ?• = возможности JavaScript за счет взаимодействия с под ++ += < <= = ключаемыми модулями и средой Java. Вскоре после этого new Microsoft ввела в игру JScript. Как упоминалось ранее, в течение первых лет своего существования Операторы достаточно много изменений. Только теперь, delete for... in return наконец, основные функциональные возможности function while JavaScript стабилизировались и язык получил возмож- for else with ность взаимодействовать с другими Web-технологиями.</p><p> Таблицы с 26.2 по 26.4 содержат исходные Хотя текущая версия JavaScript довольно стабильна, методы и обработчики событий.</p><p> может потребоваться поддержка старых браузеров, а для этого очень пригодится знание сроков появления и из- Таблица 26.2. Свойства, поддерживаемые в JavaScript и следующих версиях. _ менения всех функциональных возможностей данного языка. Еще более важно помнить, что часто требуется Свойство Объект правильное выполнение сценариев в обоих браузерах — action Form Microsoft и Netscape. Поэтому полезно рассмотреть раз личные JavaScript-диалекты, а также браузеры, обеспе- aLinkColor Document чивающие их поддержку. appCodeName Navigator appName Navigator JavaScript от Netscape appVersion Navigator Этот раздел состоит из пяти подразделов — по одному bgColor Document на каждую версию JavaScript. Каждый подраздел дета checked Checkbox, Radio лизирует все объекты, свойства, обработчики cookie Document событий, встроенные функции, операции и операторы, defaultChecked Checkbox, Radio которые являются новыми для данной версии.</p><p> Window СОВЕТ defaultValue Password, Text, Textarea Для получения наиболее актуальной информации о document Window новых версиях JavaScript посетите Web-сайт E Math по адресу http://devedge.netscape.com/tech/ elements Form encoding Form JavaScript 1. fgColor Document Основная спецификация JavaScript 1.0 сначала поддер- form Checkbox, FileUpload, Hidden, Password, Radio, Reset, Select, живалась в Netscape Navigator 2.0. Ниже приведены Submit, Text, Textarea списки оригинальных функциональных возможностей frames Frame, Window объектов, функций, операций и операторов.</p><p> hash Link, Location Объекты host Link, Location Button Form Location Reset hostname Link, Location Checkbox Frame Math Select Гарантия работы сценариев в Netscape и Microsoft Глава Свойство Объект Таблица 26.3. поддерживаемые в JavaScript и последующих версиях.</p><p> Link, Location Метод Объект Document length Form, Frame, History, Select, Math String, Window acos Math Document alert Window links Document anchor String LN10 Math asin Math LN2 Math atan Math location Document, Window atan2 Math Math back History Math big String method Form blink String name Button, Checkbox, FileUpload, bold String Form, Frame, Hidden, Password, Reset, Select, Text, Textarea Password, Radio, Reset, Submit, Text, Textarea, Window ceil Math options Select charAt String parent Frame, Window String pathname Link, Location clearTimeout Window PI Math click Button, Reset, Submit port Link, Location close Document, Window protocol Link, Location concat String Select confirm Window self Window Math search Link exp Math SQRT1_2 Math fixed String SQRT2 Math floor Math Status Window focus Checkbox, Password, Reset, Select, Text, Textarea previous History fontcolor String prototype Date fontSize String referrer Document forward History search Location String selected Option getDate Date self Frame getDay Date target Form, Link getHours Date text Option getMinutes Date title Document getMonth Date top Frame, Window getSeconds Date Navigator getTime Date URL Document Date Document getYear Date value Button, Checkbox, FileUpload, Hidden, Option, Password, History go Radio, Reset, Submit, handleEvent Select Text, Textarea indexOf String window Frame italics String lastlndexOf String Избранные программные технологии ЕМУ Часть V Обработчик Объект Метод Объект событий onClick Button, Radio, Reset, log Math Submit, Text match String onDblClick Document max Math onFocus Password, Radio, Reset, Select, Text, Math Textarea open Document, Window Document parse Date onKeyPress Document Math onKeyUp Document propt Window Window random Math Window round Math Button, Document select FileUpLoad, Text, Textarea onMouseOver Link setDate Date onMouseUp Button, Document setHours Date onSelect Textarea setMinutes Date onSubmit Form setSeconds Date setTime Date JavaScript 1. Frame, Window setYear Date JavaScript 1.1 поддерживается в Netscape Navigator 3.</p><p> Ниже приводятся списки объектов, функций, опера sin Math ций, операторов, расширений дескрипторов и изменен small String ных (по сравнению с предыдущими JavaScript-версия Math ми) возможностей.</p><p> strike String Объекты sub String Applet Function Object submit Form Area Image Package substring String Array MimeType sup String Boolean Number String tan Math Функции Date taint untaint Date Операции String typeof void toSource Math Оператор toString Date, Math continue String Расширения дескрипторов Date • В дескриптор торы <div>, в другом — дескрипторы Красный дескриптор <div>, если это Microsoft </body> if ( bwr "Netscape" fifi ver >= 5) = "Netscape if ( bwr "Netscape" ver >= 4.06 && ver = "Netscape - 4.5";</p><p> -... j if ( bwr "Netscape" && ver >= 4 ss ver <= = "Netscape - 4.05";</p><p> Here is some text defined as a block if ( bwr "Netscape" && ver 3 ) = "Netscape if ( "Netscape" Si ver 2 ) = "Netscape !</p><p> В качестве альтернативы, можно забыть о браузерах и сосредоточиться на самых высокоуровневых возмож ностях предлагаемой версии JavaScript. Преимущество такого метода состоит в том, что зачастую он оказыва ется проще применительно для операций сравнения:</p><p> /* Глобальные переменные РИСУНОК 27.1. Обнаружение браузеров и Internet var JS VERSION Explorer.</p><p> Методы выяснения типа браузера Глава Резюме { В главе были рассматривались два метода, которые мож var = var ver = но использовать для преодоления несовместимости в сценариях. Первичная цель применения JavaScript со if ( "Netscape" && ver 5) стоит в расширении возможностей Web-сайтов. Если = 1.4;</p><p> проигнорировать проблемы совместимости, то пользо if ( bwr "Netscape" ver 4.06 S& ver = 1.3;</p><p> ватели, применяющие браузеры, которые не поддержи if ( bwr "Netscape" SS ver >= вают выбранную разновидность JavaScript, не смогут ver <= 4.05) = 1.2;</p><p> получить то, что ожидали. Таким образом, при создании if ( bwr "Netscape" && ver 3 ) сценариев необходимо задействовать методы выяснения = if ( bwr "Netscape" ver 2 ) типа браузера, которые расширяют возможность приме JS VERSION = 1.0;</p><p> нения более поздних версий JavaScript, но при этом так же учитывают браузеры, обеспечивающие меньшую сте пень поддержки.</p><p> по сайту с использованием JavaScript В ГЛАВЕ Исследование технологий навигации Создание сценария для динамической инструментальной панели Использование объекта History Однако, возникает вопрос — что делать, если текущая технологий навигации страница содержит форму ввода данных, которая долж JavaScript перекладывает большую часть работы по дос- на быть отправлена перед переходом к другой страни тавке и форматированию содержимого на браузер вмес- це? Отправка формы с помощью кнопки "Submit" — это то реализации этих операций на стороне сервера. Одной хорошо, но она переведет пользователя на стра из положительных черт подобного управления со сторо- ницу, не содержащую карту. В ряде случаев лучшим ны клиента является усовершенствование навигации. выходом может оказаться предоставление пользователю Вместо обеспечения простых статических ссылок, свя- возможности перемещения по всему сайту без необхо Web-страницы сайта, разработчики могут димости нажатия на кнопку отправки формы после ее теперь задействовать JavaScript для управления отобра- заполнения. Это достигается с помощью JavaScript, если жением информации на сайте. только поместить формы в фреймы.</p><p> До появления фреймов было трудно добавлять на- В случае, если карта сайта достаточно велика, в каж вигационные средства к Web-странице без того, чтобы дый момент времени можно отображать только часть ограничить по нескольким направлениям схему разме- карты. При этом возникает необходимость в обновле щения информации на сайте и его содержимое. Напри- нии карты. Как обновить карту, отправить форму, ото мер, отображение карты, постоянно показывающей вид бразить полный документ и проследить местонахожде сайта, можно было реализовать только за счет ние пользователя с помощью одного щелчка мыши?</p><p> ния ее на каждую страницу. Карта должна была иметь Самый простой путь для этого — JavaScript. Описан достаточно небольшие размеры, дабы не отвлекать ные в главе навигационные методы демонстрируют пользователя. Если просматриваемая страница была способы создания и использования динамической ин слишком длиной, карта во время просмотра страницы струментальной панели, а также использование JavaScript пользователем часто оказывалась недоступной. Ограни- объекта History.</p><p> чение сайта до одной страницы не могло, конечно же, рассматриваться в качестве варианта, а если карта сайта Создание сценария для динамической была доступна только на протяжении части времени про инструментальной панели смотра, это выглядело весьма непрофессионально.</p><p> Фреймы помогают решить эту проблему. Разбиение Инструментальная панель один из элементов стандарт окна браузера на подокна позволяет сохранять карту ного пользовательского интерфейса, часто используемо сайта видимой все время, пока пользователь просматри- го для навигации практически в любом приложении. В вает разные страницы HTML-документа. За счет щелч- JavaScript динамическая инструментальная панель — это ков на ссылках, находящихся на карте сайта, новая стра- панель, которая изменяется в результате взаимодействия ница отображается в другом фрейме. JavaScript для этого пользователя с Для примера ниже показана инст не требуется. Просто используйте атрибут target деск- рументальную панель, которая управляет простой слай риптора <А> для указания на любой требуемый фрейм. довой демонстрацией. Четыре кнопки на Навигация по сайту с использованием JavaScript Глава * ной панели используются для перемещения вперед и */ назад по массиву слайдов. Две других кнопки исполь зуются для запуска или останова автоматического цик ла по всем слайдам. Логический путь создания такой программы состоит в построении двух объектов — Button function file, alt, spacer, и Toolbar. condition, command) i Создание объекта Toolbar объект Инструментальную панель можно рассматривать как набор кнопок, поэтому дадим объекту Toolbar имя name - Имя кнопки в file - URL buttonSet. Листинг 28.1 показывает конструктор alt - Атрибут alt для который обычно устанавливает все свойства и методы, url - URL соответствующего buttonSet.</p><p> доступные в инструментальной панели.</p><p> spacer - количество пикселов после condition - условный который Листинг 28.1. Конструктор объекта buttonSet.</p><p> должна ли отображаться эта function - Команда, которую i /* / * конструктор * Аргументы: name - Имя buttonSet.</p><p> // Свойства = = file;</p><p> // Свойства = = = = = = = condition;</p><p> = // Методы // Методы = = = print;</p><p> return = return Свойство name представляет HTML-имя кнопки.</p><p> Метод addBtn создает и добавляет в buttonSet новый Свойство file кнопки — исходный URL-адрес изображе объект Button. Метод print записывает buttonSet в HTML ния кнопки. Свойство alt хранит значение HTML-атри документ. Метод clear устанавливает все кнопки, содер бута alt. Свойство применяется в качестве свойства жащиеся в пределах buttonSet, в их первоначальное со HREF якоря, связанного с изображением кнопки. Ис стояние доступности/недоступности. Эти методы пользуя графический файл с прозрачностью, свойство подробно описываются в следующих разделах.</p><p> spacer определяет, сколько места осталось для размеще ния изображения еще одной кнопки справа от данной.</p><p> Использование объекта Button Это позволяет создавать в инструментальной панели различные разделы либо помещать туда изображения buttonSet используется для управления одним и кнопок разной величины. Button будет отображаться более Button. Каждый объект Button содержит только, если его условное выражение равно true. Это — информацию о нажатии кнопки или отображении ее в ключ к определению того, какие кнопки отображены и виде HTML-элемента <lmg>. Листинг 28.2 показывает доступны для нажатия. Всякий раз когда объект две функции, которые применяются для создания но buttonSet присутствует на HTML-странице, необходи вого объекта Button.</p><p> мо смотреть на условное выражение для каждого объек Листинг 28.2. Метод click и конструктор объекта та Button, чтобы определить, доступен ли Button для Button.</p><p> щелчка. Если доступен и пользователь щелкает на кноп function ке, команда выполняется. Строка команды может быть f любым оператором JavaScript в случае, если она выпол няется в контексте документа, в котором был создан * Метод объекта кнопки. Реализует * команду этой кнопки.</p><p> buttonSet.</p><p> Избранные программные технологии Часть V spacer - (integer) количество Создание экземпляров инструментальной * пикселов после панели condition - (string) условный С помощью приведенных ниже строк кода программа который слайдовой демонстрации создает новый объект должна ли и сбрасывает его текущее состояние.</p><p> Toolbar = new - (string) Команда, которую реализует При создании нового экземпляра buttonSet важно, чтобы аргумент, переданный был равен var i = имени переменной создаваемого объекта. Это позволя = new ет объекту buttonSet создавать команды JavaScript, ис javascript:parent.</p><p> пользуя собственное имя. Метод используется для установки и сброса значений глобальных перемен ных, использующих buttonSet для определения, какие из его кнопок разрешены для нажатия. Листинг 28.3 по Аргумент указанный для конструктора кнопки в казывает метод реализованный для приложения листинге 28.4, заслуживает дополнительного внимания.</p><p> Slide Show.</p><p> Эта строка будет использоваться как свойство Листинг 28.3. Метод объекта buttonSet.</p><p> HREF изображения кнопки. Приведенный ниже пример — clear это HTML-код, сгенерированный для первой кнопки -:</p><p> Slide Show:</p><p> /* * Описание: Метод buttonSet.</p><p> которые ссыпаются кнопки в buttonSet на основе своих * условных Когда пользователь щелкает на изображении, вызы * вается метод click() седьмого свойства объекта Toolbar.</p><p> Седьмой элемент в объекте Toolbar (который, по суще ству, является массивом) — это элемент, в котором при помощи метода был сохранен первый объект Button. Это — лучший способ вызвать метод click() в Как только новый экземпляр buttonSet создан, при любом фрейме, хорошо работающий как в браузере ложение Slide Show с использованием метода addBtn() Microsoft, так и в Netscape. Объект buttonSet установ создает кнопки. Первая создаваемая кнопка показана в лен таким образом, что программист, использующий коде:</p><p> его, не должен следить за нумерацией кнопок.</p><p>, Отображение инструментальной панели "First Глобальная переменная будет иметь значе ние true, если программа слайдовой демонстрации ав Листинг 28.4 отображает полный код метода томатически проходит через каждый иначе она который создает новый объект Button и затем добавляет будет равна false. Эта переменная используется в четы его в buttonSet.</p><p> рех объектах Button для отображения двух кнопок од Листинг 28.4. Метод объекта buttonSet.</p><p> новременно. Одна иллюстрирует активное состояние, а function другая — заблокированное (кнопка недоступна для щел чка, что отображается на экране бледными цветами).</p><p> I Следующие примеры содержат две кнопки, которые за Метод buttonSet, который висят от glsRunning:</p><p> добавляет новую кнопку set.</p> <div class="po5"></div> <div class='stranici1'><b class='temiser'>Pages:</b>     |<a class="kn1" href="/1/40984-1-tm-richard-vagner-vayk-ischerpivayuschee-rukovodstvo-osnovnom-yazike-scenariev-svoevremennie-dlya-sozdaniya.php" title=""> 1 </a>|   ...   |<a class="kn1" href="/1/40984-5-tm-richard-vagner-vayk-ischerpivayuschee-rukovodstvo-osnovnom-yazike-scenariev-svoevremennie-dlya-sozdaniya.php" title=""> 5 </a>|<a class="kn1" href="/1/40984-6-tm-richard-vagner-vayk-ischerpivayuschee-rukovodstvo-osnovnom-yazike-scenariev-svoevremennie-dlya-sozdaniya.php" title=""> 6 </a>|<div class='kr'><a class="kn1" href="/1/40984-7-tm-richard-vagner-vayk-ischerpivayuschee-rukovodstvo-osnovnom-yazike-scenariev-svoevremennie-dlya-sozdaniya.php" title=""> 7 </a></div>|<a class="kn1" href="/1/40984-8-tm-richard-vagner-vayk-ischerpivayuschee-rukovodstvo-osnovnom-yazike-scenariev-svoevremennie-dlya-sozdaniya.php" title=""> 8 </a>|<a class="kn1" href="/1/40984-9-tm-richard-vagner-vayk-ischerpivayuschee-rukovodstvo-osnovnom-yazike-scenariev-svoevremennie-dlya-sozdaniya.php" title=""> 9 </a>|   ...   |<a class="kn1" href="/1/40984-10-tm-richard-vagner-vayk-ischerpivayuschee-rukovodstvo-osnovnom-yazike-scenariev-svoevremennie-dlya-sozdaniya.php" title=""> 10 </a>|</div> <div class="separator2"></div> <div class="po122"> <img class="doc" src="/images/doc.gif" border="0" alt="" ><a class="menusil" href="/1/" title=""><b class="jir">Книги, научные публикации</b></a> </div> <div class="niz2"> <br><br> <noindex> <center> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- dislib-kvadrat (niz) --> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-9894471784993021" data-ad-slot="3110193131"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </noindex> <br> <div class="naverh"><A href="#verh" >наверх</a><img src="/images/s.gif" hspace="3" width="5" height="11" border="0" alt="" align="top" vspace="3" ></div> </td></tr></table> <table width="100%" cellspacing="0" cellpadding="0" border=0> <tr> <td bgcolor="#CCCCFF" height="1"> </td> </tr> <tr> <td class="menu-niz"> <center> <table cellspacing="0" cellpadding="0" border=0> <tr> <td class="menu-niz1"> |  • <a href="/" title="На главную">Главная</a>  |  • <a href="/admin/contact-kontakti-dissertatsii.php" title="Контакты">Контакты</a> |  </td> </tr> </table> </center> </td> </tr> <tr><td class="line1"></td> </tr> </table></td><td class="line"><img class="lin" src="/images/spaser1.gif" border="0" alt=""></td></tr></table> </td><td valign="top"> <table width="5" border="0" cellspacing="0" cellpadding="0"> <tr> <td></td></tr></table></td></tr></table> </td><td class="site2"></td></tr><tr><td colspan="3"> <noindex> <script type='text/javascript' src='http://recreativ.ru/rcode.97536708c5.js'></script> <script type='text/javascript' src='http://recreativ.ru/rcode.88aa634d1b.js'></script> <script type='text/javascript' src='http://recreativ.ru/rcode.30746632cd.js'></script> </noindex> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" class="cap1"> <font color="#808080">© 2011 www.dissers.ru - «Бесплатная электронная библиотека»<br><br> <noindex> Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам. <br> Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, <a href="/admin/contacts.php" title="">напишите нам</a>, мы в течении 1-2 рабочих дней удалим его. </noindex> </font> </div> </td> </tr> </table> <noindex> <!-- Yandex.Metrika counter --> <script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript"></script> <script type="text/javascript"> try { var yaCounter78166 = new Ya.Metrika({id:78166,type:1}); } catch(e) { } </script> <noscript><div><img src="//mc.yandex.ru/watch/78166?cnt-class=1" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </noindex></td></tr></table> </body> </html>