/
Tags: языки программирования компьютерные технологии
ISBN: 966-7992-00-04
Text
Ричард Вагнер, Аллен Вайк
Исчерпывающее руководство об основном языке сценариев
для создания полнофункциональных\Л/еЬ-приложений
Исследуется связь JavaScript с другими Web-технологиями
как со сто»оны клиента так и со сто»оны се»ве»а
,'Ч
>>.
•><*>
^*-*V a
™'"'ЛУ
-<?*
V*
:•*:•*»* ые «-тения
Объектно-ориентированная
методология и ее воплощение в
'JavaScript
Фундаментальные основы языка
JavaScript
Операторы, управляющие
структуры, функции и базовые
объекты
Исчерпывающий анализ объектной
модели документов
Объекты, используемые со
стороны клиента и со стороны
сервера
Помещение на Web-страницы
эффектов, характерных для
динамического HTML
Устойчивая работа сценариев в
браузерах Netscape Navigator и
Microsoft Internet Explorer
• П1й:Гг«й 11
D--i
Исходные тексты всех примеров,
рассмотренных в книге
Полезные инструментальные
средства независимых
разработчиков
, Многое другое
SAMS
PUBUSHING
- khwci-почтои интернет-магазин
www.diasoft.kiev.ua
Р| издательство
' DiaSoft
L
U LMlI'-VV-^-vc^^ ь
Аллен Вайк и др.
JAVASCRIPT. ЭНЦИКЛОПЕДИЯ ПОЛЬЗОВАТЕЛЯ
ГТТТ^Н торгошо-издательский дом
till DiaSoft
Киев • Москва • Санкт-Петербург
2001
JavaScript
тм
THIRD EDITION
В. Allen Wyke, etal.
SAMS
A Division of Macmillan USA
201 West L03rd Street
Indianapolis, Indiana 46290
UNLEASHED
ЭНЦИКЛОПЕДИЯ
W"T7^M торгово-издательскии ним ■ ^-, ■ ' 7
[IDiaSoft 4(rti- ? >- ' ■■
ь U' i1'
Основана в 1996 г.
Аллен Вайк и др.
тм
i
i
Киев • ООО "ТИД" ДС" . 2001
УДК 004.43^031)
ББК 32.973.26-018.1
В 14
ВАЙК Аллен и др.
В14 JavaScript. Энциклопедия пользователя: Пер.с англ./Аллен Вайк.— К.: ООО "ТИД"ДС", 2001.—480с.
ISBN 966-7992-00-04
Книга JavaScript. Энциклопедия пользователя является наиболее полным учебным и справочным
руководством по всем версиям языка JavaScript, включая JavaScript 1.5 и JScript 5.0. На сегодняшний день JavaScript
представляет собой самый распространенный язык для написания сценариев, обеспечивающих поддержку
интерактивного содержимого Web-страниц. Книга охватывает широкий спектр вопросов, начиная с основ
языка и заканчивая сложными вопросами практического применения технологий Web-дизайна. Подробно
рассматриваются: взаимодействие JavaScript и HTML; типы данных, операции, выражения и операторы;
основы объектно-ориентированной методологии п ее реализация в JavaScri pt; объекты со стороны клиента и
сервера; DHTML; технологии написания устойчивого и надежного кода; методика отладки кода. Особое
внимание в книге уделяется вопросам достижения безопасности Web-приложений.
Книга изобилует множеством практических примеров, которые покрывают всю специфику разработки
Web-сайтов с использованием JavaScript.Справочник по базовым языковым объектам превращает книгу в
истинное настольное руководство.
Сопровождающий CD-ROM содержит исходные коды всех примеров, рассмотренных в книге, а также
множество другой полезной информации.
JavaScript. Энциклопедия пользователя рассчитана на широкий круг разработчиков Web-приложений.
Учебное издание ББК 32.973.26-018.1
ВАЙК Аллен и др.
JAVASCRIPT. ЭНЦИКЛОПЕДИЯ ПОЛЬЗОВАТЕЛЯ
Головний редактор Ю.Н.Артеменко
Верстка Г.А.Булавка
Головний дизайнер О.А.Шадрт
Здано на складання 20.07.2001. Пщписано до друку 20.09.2001. Формат 84x108/16. Пашр
офсетний. Гарнпура Тайме. Друк офсетний. Умовн.друк.арк. 34,80. Обл.-вид.арк. 34,80
Тираж 2000 прим. Замовлення№ 1-158.
ТОВ "ТВД" ДС", 04053, Кшв-53, вул. Артема 25, а/я 100, тел./факс (044) 212-1254.
e-mail:books@diasoft.kiev.ua,http://www.diasoft.kiev.ua.
Свщоцтво про внесения суб'екта видавничо! справи до Державного реестру видавшв, виготшниюв i роз-
повсюджувач1в видавничо"! продукцп: cepifl — ДК, №558 вщ 09.08.2001р.
Отпечатано в соответствии с качеством предоставленных
диапозитивов на ОАО «Белоцсрковская книжная фабрика*
0911"" г. Белая Церковг ул. Леся Курбаса. 4
Authorized translation from the English language edition published by Sams
Copyright ©2001
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or
mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the
Publisher.
Russian language edition published by DiaSoft Publishing.
Copyright ©2001
Лицензия предоставлена издательством Sams Corporation, подразделение Macmillan Computer Publishing.
Все права зарезервированы, включая право на полное или частичное воспроизведение в какой бы то ни
было форме.
ISBN 966-7992-00-4 © Перевод на русский язык. ООО "ТИД" ДС", 2001
ISBN 0-672-31763-Х (англ.) © Sams Corporation, 2001
© Оформление. ООО "ТИД" ДС", 2001
Гигиеническое заключение № 77.99.6.953.П.439.2.99 от 04.02.1999
Оглавление
Введение 13
Часть I. Знакомство
с JavaScript 15
Глава 1. JavaScript и
World Wide Web. 16
Знакомство с JavaScript 16
Десять заповедей JavaScript, которые должен
знать каждый создатель сценариев 17
JavaScript можно внедрить в HTML 17
JavaScript зависит от среды 18
JavaScript — интерпретируемый язык 19
JavaScript — слабо типизированный язык 19
Javascript - объектно-ориентированный язык .... 19
JavaScript — язык, управляемый событиями 20
JavaScript — это не Java 20
JavaScript—многофункциональный язык. .20
JavaScript — развивающийся язык 20
Сферы использования JavaScript 20
Четыре фазы развития World Wide Web 21
Фаза 1 Символьный гипертекст. 21
Фаза 2. Графически-ориентированные
статические HTML-документы 21
Фаза 3. Динамические HTML-документы 21
Фаза 4. Акти вн ые HTML-документы 22
Среда разработки Web-приложений 22
Клиентская часть. 23
Серверная часть. 25
Что можно сделать при помощи JavaScript? 27
Клиентские приложения 27
Проверка допустимости данных 27
Создание интерактивных форм 27
Клиентские таблицы поиска 27
Поддержка состояния 27
Работа с Java-аплетами, элементами
управления ActiveX и подключаемыми
модулями 27
Поддержка JavaScript со стороны браузеров 28
Netscape Navigator. 28
Microsoft Internet Explorer. 28
Другие браузеры 28
Сравнение JavaScript и JScript 28
Что такое VBScript? 28
Программирование в VBSript .30
Резюме .. ..31
Глава 2. Совместная работа
JavaScript и HTML 32
Основы HTML .32
Текущая ситуация .32
Основы HTML .33
Структура HTML-документа .33
Основное об атрибутах .34
Внедрение JavaScript в HTML .34
Атрибуты дескриптора <script> .34
Просмотр кода JavaScript .37
Создание JavaScript-кода .37
Выполнение сценариев 37
Учет браузеров, не поддерживающих
JavaScript .39
Написание кода .40
Выполнение сценариев 41
Резюме. 41
Глава 3. Создание собственного
набора инструментальных средств
JavaScript 42
Необходимые инструментальные средства 42
JavaScript-редакторы 42
HTML-редакторы 43
Web-браузеры 44
Отладчики сценариев 45
Процесс разработки на JavaScript 45
Серверные инструментальные средства
JavaScript .45
Netscape's Server-Side JavaScript .45
Borland IntraBuilder .45
Резюме. 45
Глава 4. Создание
первого сценария 46
Краткое напоминание .46
Перед началом работы 46
Какие браузеры будут поддерживаться? 46
Как следует учитывать браузеры, не
поддерживающие JavaScript? .47
Встроить код или вынести его в отдельный
файл? 48
Каковы ваши цели? .48
Приступаем к созданию сценария 48
Определение целей 49
Создание шаблона кода 49
JavaScript. Энциклопедия пользователю
Учет He-JavaScript-браузеров.. 49
Написание кода 49
Вызов функции .50
Первый сценарий .50
Резюме... .51
Часть II. Базовое подмножество
языка JavaScript .52
Глава 5. Основы языка JavaScript .53
Краткое резюме .53
Как JavaScript связан с CG1 дополнительно
вставляемыми модулями и Java .53
CGI 53
Подключаемые модули .54
Java . .54
Внедрение сценариев в HTML-документы .55
События ... ...56
Синтаксис.... . .56
Версии JavaScript .56
Лексемы .57
Переменные. 60
Константы 63
Цвета 63
Типы данных .64
Выражения.. . .64
Комментарии .66
Функции .67
Резюме 68
Глава 6. Операции. .69
Операции присваивания .70
Арифметические операции 70
Операции сравнения 71
Строковые операции. .....73
Условные операции... 74
Булевы операции 74
Операция typeof. 74
Определение и вызов функций 75
Операции со структурами данных 75
Поразрядные операции 75
Поразрядные логические операции 76
Поразрядные операции сдвига 76
Зачем вообще возиться с разрядами? 77
Приоритеты выполнения операций 79
Резюме .80
Глава 7. Управляющие структуры
и организация циклов 82
Условные операторы .82
if .. .. 82
if..else .84
try..catch 85
Операторы организации циклов .85
for .85
for..in 87
while. . .88
do..while. .... .88
break и continue .88
Метки... .89
Операторы with .90
Оператор switch 91
Резюме .91
Главг 8. Функции .93
Понятие функций .93
Создание функций .93
Где объявлять функции .94
Вызов функции .94
Использование аргументов .94
Изменение количества аргументов .96
Использование глобальных и локальных
переменных .99
Передача объектов по ссылке.. . 100
Дополнительные сведения о функциях 101
Повторное использование функций 101
Рекурсивные функции 101
Резюме .102
Глава 9. Объекты со стороны
клиента 103
Понятие объекта... 103
Объекты 103
Инкапсуляция... 106
Сообщения 107
Классы 107
Объекты JavaScript 109
Точечная нотация 109
Исследование объектной модели JavaScript ...110
Отношения содержания в JavaScript 110
Свойства 111
Методы 111
События 112
Дополнительная информация об объектах 113
Объект navigator. 114
Объект Window. 116
Объекты верхнего уровня 119
Объекты второго уровня 122
Объекты третьего уровня 126
Объекты четвертого уровня 129
Резюме 130
Оглавление
Глава 10. Основные объекты языка 131
ОбъектИоЬа! 131
Объект String.. .131
Примеры манипуляций со строками.. 134
Форматирование строк 135
Работа со специальными символами.... ... .139
Преобразование строк и чисел 140
Объект RegExp 141
Объект Array. 141
Объект Date.. .... 144
Объект Math .147
Объект Boolean 148
Объект Number .149
Объект Function 149
Резюме 150
Глава 11. Создание пользовательских
объектов JavaScript 151
Создание объектов .... 151
Создание экземпляров. .153
Работа с экземплярами объектов 154
Создание составных объектов... ...156
Динамическое создание объектов.. . 159
Расширение экземпляров объектов ...162
Резюме 162
Глава 12. Серверная часть
JavaScript 163
Использование архитектуры клиент/сервер. .163
Web-приложения с клиент-серверной
архитектурой .163
Передача информации между клиентом и
сервером.. ... .164
Управление сеансами.. 165
Разработка серверных приложений JavaScript. .166
Создание исходных файлов 166
Подготовка приложения 168
Исправление ошибок ...170
Базовые серверные объекты JavaScript 172
Объект Server. 172
Объект Project 173
Объект Client 173
Объект Request. 174
Объект Lock 175
Объект File 175
Объект SendMail 177
Объекты баз данных 178
Резюме .... ..181
Часть III. Использование DOM 182
Глава 13. Основы объектной модели
документа (DOM) 183
Понятие объектной модели документа. 183
От DHTML к DOM 183
Навигация по таблице 184
Управление документами. .184
Объектная модель и атрибуты 185
Навигация по документу. 186
Резюме 187
Глава 14. Управление событиями 188
Понятие событий и обработчиков событий 188
Обработчики событий JavaScript 188
Щелчок на объекте (onClick).. 189
Отправка формы (onSubmit) 190
Сброс формы (onReset).. 190
Изменение данных (onChange) 191
Получение фокуса (onFocus) 191
Выход из фокуса (onBlur) 192
Выделение текста (onSelect).... 193
Перемещение мыши по объектам
(onMouseOvernonMouseOut) ...193
Загрузка документа (onLoad) 196
Выход из документа (onUnload) 197
Обработка ошибок (onError) .... .197
Прерывание загрузки изображения (onAbort). 198
Замена обработчиков событий.. .198
Программная генерация событий .198
События таймера 198
Резюме 199
Глава 15. Объект Window 200
Объект Window. 200
Открытие и закрытие окон 201
Ссылки на окна 202
Определение содержимого окна 202
Определение атрибутов окна 202
Закрытие окон 204
Навигация между окнами 207
Косвенная установка фокуса 207
Прямая установка фокуса 208
Удаление фокуса 208
Отображение окон сообщений 208
Простое уведомление 208
Yes/No-подтверждение 210
Пользовательский ввод 210
Работа с сообщениями строки состояния 212
Резюме .. ...213
JavaScript. Энциклопедия пользователя
Глава 16. Объект Document 214
Объект Document 214
Программное создание HTML-документов 214
Изменение цвета документа 216
Объект Link 218
Ссылки на объекты Link 219
Выполнение JavaScript-кода для ссылок 220
Объект Anchor. 223
Объект Image 223
Резюме. 224
Глава 17. Объекты Form 225
Объект Form 225
Отправка формы на сервер. 225
Проверка элементов в Form 227
Объект Text 229
Присваивание объекту Text значения по
умолчанию. 229
Выделение текста в фокусе 230
Захват данных с помощью объекта Textarea 231
Перенос текста в объекте Textarea 231
Объекты Button: Submit, Reset и Button 231
Объект Checkbox 233
Определение заполнения объекта Checkbox 233
Объект Radio. .234
Определение значения выбранного
переключателя 234
Объект Select. : 235
Создание списка выбора 235
Создание прокручиваемого списка 236
Создание прокручиваемого списка с
мультивыбором 236
Определение значения или текста выбранной
опции 237
Определение значений в прокручиваемых
списках с мультивыбором 237
Выбор опции с помощью JavaScript 238
Объект Password 238
Объект Hidden 239
Резюме 241
Глава 18. Объекты Frame. 242
Объект Frame 242
Создание фреймов 243
Размещение дескрипторов 244
Добавление JavaScript-кода ко фреймам 246
Синхронизация фреймов 247
Обновления фреймов 249
Сценарии для фреймов с картами
изображений 252
Работа с фреймовыми URL 254
Ссылки на фреймы 254
Ссылки из дочернего фрейма на
родительский 256
Объект Location 260
Открытие нового URL 260
Работа со свойством protocol 261
Объект History. 262
Определение размеров списка 262
Навигация по списку посещений 262
Объект Navigator. 264
Резюме 265
Глава 19. Другие DOM-объекты 266
DOM-браузеры 266
Управление DOM-документами и DOM-методы. .. 268
Использование метода cloneNode 268
Использование метода insertBefore в DOM 269
Использование метода swapNode 269
Использование метода removeNode 269
Резюме 270
Часть IV. Технологии
программирования на
динамическом HTML 271
Глава 20. Динамическая подмена 272
Знание событий 272
onMouseOver. 272
onMouseOut 272
onMouseDown 272
onMouseUp. 272
Виды динамических подмен 272
Rollover-эффекты для изображений 273
Rollover-эффекты для слоев 274
Резюме 276
Глава21. Визуальные эффекты 277
Бегущие строки 277
Баннеры 278
Постепенное изменение цветов 281
Анимированны командные кнопки 282
Резюме 284
Глава 22. Каскадные таблицы
стилей. 285
Основные концепции таблиц стилей 285
Стандарты 285
Наследование 286
Границы и заполнение текста пробелами 286
Комментарии 286
Использование стилей в документах 286
Определение стилей 287
Оглавление
Применение стилей 288
Смешивание селекторов 289
Определение старшинства стиля 290
Объекты стилей в JavaScript 290
document.tags 290
document.classes 290
docuiment.ids 290
Свойства 290
Резюме 292
Глава 23. Слои 293
Универсальные действия 294
Использование таблиц стилей для создания
слоев 294
Управление накладывающимися слоями 298
Создание мультипликационны эффектов 299
<div> и <iframe> 299
Определение блоков данных 299
Вставка внешних файлов .303
<1ауег и <ilayer> .305
Пример страницы со вкладками .305
Пример со сталкивающимися шариками .307
Резюме .310
Глава 24. Менюи панели
инструментов DHTML .311
Начальные предположения .311
Выяснение возможностей .311
Планы на будущее .311
Учет API 312
Проектирование меню .312
Определение слоев .312
Обработка действий .314
Использование меню .314
Описание дополнительных возможностей .316
Создание инструментальных панелей .317
Применение событий .317
Описание проблем проектирования .318
Модульное программирование .318
Создание изображений .318
Написани HTML-кода .318
Реализация rollover-эффектов для
изображений .320
Реализация поля адреса .321
Обработка событий, связанных с кнопками. .. .322
Проверка результатов .322
Резюме .325
Глава 25. Взаимодействие с
другими технологиями 326
Подключаемые модули браузера .326
Подключаемые модули и MIME-типы .326
Определение устанавливаемых подключаемых
модулей .327
Элементы управления ActiveX .328
Понятие элемента управления ActiveX .328
Реализация защиты .329
Доступ с помощью JScript .329
Java-аплеты. .330
Доступ к Java из JavaScript .330
Доступ к JavaScript из Java .331
Подробнее о Java-аплетах .335
LiveAudio .336
Использование JavaScript-методов .337
Воспроизведение звуков в ответ на
JavaScript-события .337
Резюме .339
Часть V. Избранные
программныетехнологии 340
Глава 26. Гарантия работы
сценариев в браузерах Netscape и
Microsoft 341
Версии языка и версии браузера .341
Сравнительный анализ JavaScript-диалектов .342
JavaScript от Netscape .342
JavaScript 1.0. 342
JScript от Microsoft. .348
Ошибки .353
Резюме .354
Глава 27. Методы выяснения типа
браузера .355
Подход "Все или ничего". .355
Подход "Выяснение по месту" .355
Тип браузера .356
Версия браузера .356
Версия JavaScript .356
Платформа операционной системы .356
Пример динамического позиционирования .356
Резюме .359
Глава 28. Навигация по сайту с
использованием JavaScript 360
Исследование технологий навигации .360
Создание сценария для динамической
инструментальной панели .360
Создание объекта Toolbar. .361
Обсуждение дополнительных возможностей .365
Использование объекта History. .365
Резюме. ....366
JavaScript. Энциклопедия пользователя
u
Глава 29. Формы и верификация
данных .367
Установка пользовательской обратной связи .368
Создание формы для обратной связи
пользователем .368
Тестирование пользовательской формы .369
Вывод окон сообщений 370
Использование сообщения о состоянии 372
Верификация данных, введенных
пользователем 373
Верификация ввода данных в форму. 373
Обеспечение согласованности 373
Обеспечение бизнес-правил 374
Проверка на завершенность. 375
Создание интерактивных форм 376
Использование вычисляемых полей 377
Создание повторно используемого кода
верификации .378
Целые числа 378
Строки 379
Денежные значения 379
Кредитные карточки 380
Пример: тестер цветов JavaScript. .381
Резюме. 384
Глава 30. Персонализация и
динамические страницы .386
Статические Web-страницы 386
Немного о cookie-наборах 387
Преимущества cookie-наборов 387
Ограничения и недостатки cookie-наборов 387
Мифы о cookie-наборах 388
Использование cookie-наборов. 388
Получение значений cookie-наборов 389
Установка значений cookie-наборов 389
Удаление cookie. 391
Пример применения cookie-набора 391
Серверы и браузеры, поддерживающие
механизм cookie-наборов 398
Другие способы поддержки информации о
состоянии 398
Строка запроса 398
Скрытые переменные формы .400
Резюме. .400
Глава 31. Выполнение поиска по
шаблону с использованием
регулярных выражений 401
Создание регулярных выражений .401
Конструктор RegExp() .401
Оператор присваивания .401
Синтаксис регулярных выражений .401
\wn\W. .402
\sn\S. 402
\dn\Q 402
[\Ь] 403
Точка 403
[-] и ["...] 403
[х-у] и [~х-у] .403
{х,у}, {х,} и {х} .403
?, + и * 403
Логическое или (|) .403
(...) 403
\х 403
". 403
$ 404
\Ьи\В 404
Использование регулярных выражений .404
Тестер регулярных выражений 405
Пользовательский интерфейс 406
Функция поиска .406
Функция замены .406
Функция очистки .406
Пример: программа проверки правильности
ввода телефонных номеров 407
Резюме. 408
Глава 32. Технология обработки
данных со стороны клиента 409
Определение источника данных: клиент или
сервер? .409
Что такое клиентская таблица? 410
Создание таблиц поиска 410
Создание поискового пользовательского
интерфейса .411
Обработка поисковых запросов 412
Отображение результатов поиска 413
Запуск приложения 414
Резюме. 419
Глава 33. Обработка ошибок 420
Типы ошибок 420
Синтаксические ошибки 420
Ошибки времени выполнения 421
Логические ошибки 421
Интерпретация сообщений об ошибках 421
Исправление кода 422
Проверка кода HTML 422
Использование комментариев для
идентификации проблем 422
Оглавление
Использование метода alert() для трассировки
кода 423
Тестирование кода .423
Программирование с использованием
устойчивых технологий 425
Высокоуровневая разработка кода проекта и
детальное проектирование. 426
Написание модульного кода 426
Написание сильно связанного кода 426
Написание слабо связанного кода 426
Написание повторно используемого кода 426
Написание кода обработки ошибок 426
Использование жестких соглашений по
именованию. 427
Испол ьзование ком ментариев 427
Объявление и инициализация переменных 428
Надежная работа кода 428
Резюме 428
Глава 34. Отладка .429
Использование отладчика сценариев Microsoft.... 429
Обзор возможностей отладчика сценариев
Microsoft. 429
Использование отладчика сценариев
Microsoft для отладки файлов. .430
Заключительные слова об отладчике
сценариев Microsoft .433
Использование JavaScript-отладчика Netscape .433
Исследование возможностей J
avaScript-отладчика Netscape .433
Испсльзование JavaScript-отладчика Netscape
для отладки файлов 433
Заключительные слова о JavaScript-отладчике
Netscape 435
Использование метода alert(). .435
Разбор примера .436
Итоговые слова об использовании
метода alert() 437
Резюме .. ...437
Глава 35. JavaScript и безопасность
в Web. 438
Концепции безопасности в клиентской части
JavaScript 439
Атаки на службы .441
Проблемы Netscape Navigator 2.0. .441
Более поздние версии Navigator. .442
Internet Explorer 3.x .443
Максимизация надежности защиты .443
Безопасные сеансы и цифровые сигнатуры .443
Отключение языков создания сценариев в
браузере 444
Фильтрация через брандмауэр .445
Информационные ресурсы о безопасности
для JavaScript и Java .445
Концепции безопасности в серверной части
JavaScript .446
Java и безопасность. .447
Компоненты защиты .448
Ограничения защиты .449
Резюме. 450
Часть VI. Приложение 451
Приложение А. Десять основных
ресурсов в Web, посвященных
JavaScript 452
Netscape DevEdge Online. .452
Технологии написания сценариев Microsoft. .452
Введение в JavaScript от Voodoo. .452
lrt.org 452
Focus on JavaScript .452
SuperScripter. .453
JavaScripts.com 453
JavaScript Source .453
Webcoder.com .453
Website Abstraction .453
Сопровождающий CD-ROM 454
Предметный указатель. 455
Об авторах
Автор
Аллеи Вайк (Allen Wyke) из Дьюрема, шт. Северная
Каролина, является главой отдела технологий в Engage
Technology. Упомянутая компания занимается
рекламным и PR-бизнесом, повсеместно применяя при этом
ведущие Internet-технологии. Аллен Вайк создавал Web-
страницы для интрасетей ведущих сетевых компаний и
разрабатывал множество Web-сайтов. Он
программировал практически на всех доступных языках и средах, в
частности C++, Java, Perl, Visual Basic, JavaScript и Lingo.
Среди достижений Аллена — соавторство в книгах
Pure JavaScript, The Perl 5 Programmer's Reference, The
Official Netscape Navigator 4 Book, а также в книге для
выпускников колледжей, которая посвящена
использованию Internet. Аллен Вайк немало потрудился над двумя
другими книгами, посвященными разработке
Web-страниц: HTML Publishing on the Internet, Second Edition и The
HTML 4 Programmer's Reference. В свободное время он
пишет статьи в специальную колонку "Webmaster" ("Web-
мастер") для ежемесячного журнала Sun World и
еженедельно обновляет статью "Windows and UNIX Integration"
("Интеграция Windows и Unix") на сайте ITworld.com.
Соавторы
Ричард Вагнер (Richard Wagner) — вице-президент
компании Product Development for Acadia Software Infuse.
Кроме того, он был главным архитектором продукта
Acadia Infuse, визуального редактора JavaScript, который
вскоре купила компания Net Objects. Помимо авторства
во множестве книг в области компьютерных технологий,
к его заслугам можно причислить создание
клиент-серверных и Web-приложений. Вагнер — научный
редактор в журнале Delphi Informant, где ежемесячно для его
статей выделяется отдельная колонка "File | New",
посвященная проблемам разработки программного
обеспечения. Вагнер написал Inside Paradoxfor Windows (все
редакции), CompuServe Internet Tour Guide и Inside
CompuServe (все редакции). Он выступил в качестве
соавтора в книгах Ultimate Windows 3.1, Inside Windows NT,
Inside Microsof Access, Inside dBAShfor Window и Integrating
Windows Applications. В Тейлорском университете Ричард
получил ученую степень бакалавра гуманитарных наук
в области политологии, после чего защитил диплом в
Американском университете. Он доступен по адресу:
rwagner@acadians.com.
Джейсон Джиллиам (Jason D. Gilliam) — pa фаботчик
программного обеспечения в KOZ.com, подразделении
компании Research Triangle Park (шт. Северная
Каролина). Джейсон создал множество Web-страниц, а также не
меньшее количество приложений на языке C++,
коммерческих Web-приложений и программ для связи с
базами данных. Он начал программировать в тринадцать
лет, а сейчас является соавтором книги Pure avaScript.
В Государственном университете Северной Каролины он
получил степень бакалавра в области компьютерной
инженерии. В свободное время Джейсон разрабатывает
аудиопрограммы на базе Windows и сочиняет музыку на
ПК.
Фрэнсис Ботто (Fransis Bono) родился в Свэнси
(Уэллс, Великобритания). Свою карьеру он начал в
качестве автора и исследователя в области новых
технологий. С середины 80-х годов Фрэнсис известен как один
из первых составителей статей и книг, сохранивших
свою актуальность до сих пор. Сначала они издавались
в Великобритании, после — в Австралии. По сути, его
работа затрагивает сферу пользователя, разработчика и
вопросы концептуального проектирования.
Накопленным опытом Фрэнсис Ботто любезно поделился с
читателями в этой книге.
Посвящения
Все написанное мною — для Мэтта, Джеффа и Грэга.
Ребята, вы не только прекрасные друзья, но и самые
лучшие мужья, найденные моими сестрами.
— Аллен Вайк
Благодарности
Сначала мне хотелось бы поблагодарить Боба Керна (Bob
Kern) из издательства TIPS Publishing и моих соавторов:
Ричарда, Джейсона, Фрэнсиса за их профессионализм,
тяжелый труд и всяческую поддержку во время
написания этой книги. Я весьма благодарен Шелли Джонстон
(Shelley Johnston), проявившей себя в качестве
талантливого и незаменимого редактора, что помогло нам
сконцентрировать все внимание на работе над книгой.
Наконец, мне хотелось бы поблагодарить Кимо
"Кинг" Конга (Kimo "King" Kong) за предоставленную
возможность писать книгу во время работы в Engage.
— Аллен Вайк
Введение
JavaScript в рекордные сроки стал средством разработки
для Web, будь то простое усовершенствование HTML-
страниц, либо создание полнофункциональных Web-
приложений. С другой стороны, Javascript никогда не
станет столь же популярным, как Java или даже HTML.
Однако следует учесть, что JavaScript может
обеспечивать ряд вещей, совершенно не характерных для других
языков программирования, самой главной из которых
следует считать эффективное совместное
функционирование абсолютно различных технологий. К JavaScript
вполне применима метафора "мастер на все руки"; она-
го, собственно, и отражает всю неисчерпаемость этого
языка.
Большинство рассматривает JavaScript как
клиентский язык. Истинная правда! Многое в данной книге
сфокусировано на внедрении JavaScript в HTML с
целью обеспечения работы в среде, поддерживающей
браузерами. Однако JavaScript также известен и как
серверный язык сценариев. До недавнего времени одними из
первых продуктов, в которых в качестве языка сценариев
для Web использовался JavaScript, бьши Netscape's
Server-Sid- JavaScript (SSJS) и Microsoft's Active Server
Pages (ASP).
Ваш покорный слуга является разработчиком, и чем
чаще он использует JavaScript, тем больше отмечается его
пригодность для приложений, создаваемых компанией.
Надеюсь, что способность JavaScript выполнять
множество задач станет для читателей очевидным. А сейчас
самое время перечислить все темы, рассмотренные в
книге:
• Что связывает между собой JavaScript и HTML?
• В чем разница между JavaScript и Java?
• Существует ли какая-либо совместимость между
версиями JavaScript и JScript?
• Какие спецэффекты можно создать при помощи
JavaScript?
Как создать интеллектуальные фреймы с помощью
JavaScript?
Что такое базовые объекты JavaScript?
• Где применяется ECMAScript?
• Как JavaScript совмещается с элементами управления
ActiveX, программными расширениями и Java-апле-
тами?
Как JavaScript поддерживает текущее состояние?
Как использовать JavaScript на собственном
Web-сервере?
Как при помощи JavaScript подключиться к базе
данных SQL?
Кому адресована эта книга?
Поскольку JavaScript — основной язык сценариев для
Web, то он используется при решении задач различного
рода. Вот лишь небольшой перечень тех, кто применяет
JavaScript: Web-мастера, HTML-дизайнеры,
разработчики Java-приложений, разработчики приложений баз
данных, опытные пользователи.
Я уверен, что читатели, относящиеся к любой из этих
категорий, по достоинству оценят книгу.
Предполагается, что читатель обладает базовыми знаниями
Web-технологий и HTML. Какой-то первоначальный опыт
работы с JavaScript не нужен, однако определенные
знания в области программирования на языке
сценариев все же не помешают. С другой стороны, если вы
никогда раньше не составляли программ, это вовсе не
означает, что данная книга — не для вас. Стоит лишь
помнить, что книга не рассчитана на совершенно
начинающих, поэтому таковым будет не настоль
комфортно, ка тем, кто обладает определенным опытом. В
особенности последнее касается некоторых главах,
посвященных серверам и базам данных, где базовые
знания обязательны. Все же, набравшись терпения,
начинающие программисты смогут успешно изучить эту
книгу и приступить к самостоятельной разработке
серьезных бизнес-приложений для Web.
Системные требования
Для работы с JavaScript потребуется компьютер с
доступом в Internet. Авторы книги использовали Windows
(98, 2000, NT), но те же механизмы, касаемые
JavaScript, актуальны и для других платформ (за
исключением лишь тех, для которых отдельно указано, что
JavaScript на них не поддерживается).
Структура книги
Третье издание книги — всестороннее описание
JavaScript и соответствующих технологий. Книга
разделена на шесть частей, в конце каждой из которых
приводится краткое резюме.
Часть 1 Знакомство с JavaScript
Часть 1 — всестороннее знакомство с JavaScript и
соответствующими инструментальными средствами. В главе
1 внимание фокусируется на связи между JavaScript и
разработкой Web-приложений. Кроме того,
исследуется связь JavaScript с другими Web-технологиями как со
стороны клиента, так и со стороны сервера. О
взаимосвязи между HTML и JavaScript, а также об
интерпретировании кода браузером в рабочей среде, можно будет
узнать из главы 2. В главе 3 рассматриваются инстру-
JavaScript. Энциклопедия пользователя
ментальные программные средства, требуемые для
процесса разработки в JavaScript. В главе 4 описывается
полный процесс составления первого учебного сценария.
Часть 2 Базовое подмножество языка
JavaScript
Здесь подробно рассматривается собственно язык
JavaScript. Главы с 5 по 12 посвящены основам языка,
операторам, управляющим структурам, функциям и
объектам (базовым, клиентским, серверными
пользовательским).
Часть 3 Использование DOM
В части 3 подробно исследуется проблематика Document
Object Model (объектная модель документов). Будет
рассмотрен метод размещения элементов на странице, а
также обработка событий (глава 14). Наконец, главы с
15 по 19 содержат подробную информацию по объектам
Window, Document, Form, Frame и другим
DOM-объектах.
Часть 4 Технологии программирования на
динамическом HTML
В части 4 внимание уделяется различным операциям,
которые выполняются с помощью JavaScript в среде Web.
В главе 21 рассказано о создании анимации, баннеров и
других спецэффектов в JavaScript (без использования
каких-либо Java-аплетов). Глава 22 посвящена
каскадированным таблицам стилей, а глава 23 — слоям,
появившимся в четвертом поколении браузеров. В главе 24 вся
информация собирается воедино и демонстрируется
методика создания динамических HTML-меню и
панелей инструментов. Часть 4 завершается главой 25. В ней
исследуются возможности взаимодействия JavaScript с
другими технологиями, наподобие Java и ActiveX.
Часть 5 Гарантия работы сценариев в
браузерах Netscape и Microsoft
Часть 5 построена именно на том, что интересного
читатель смог вынести из области разработок на JavaScript.
Глава 26 учит, как создавать сценарии, работающие с
браузерами Navigator и Internet Explorer. В главе 27
подробно описывается методика определения браузера, а
глава 28 подскажет, что может предоставить JavaScript
в плане совершенствования навигации Web-сайтов.
Глава 29 содержит информацию об усовершенствовании
HTML-форм с помощью JavaScript, например, за счет
добавления проверки достоверности данных со стороны
клиента. В главе 30 обсуждаются вопросы создания
динамических и персонализированных web-страниц за счет
применения cookie-наборов и других средств сохранения
состояния. В главе 31 представлено сопоставлен»"
образцов в регулярных выражениях, а в главе 32 — способы
сбора и обработки данных. И, наконец, глава 33
посвящена обработке ошибок, а глава 34 дает краткие
сведения об отладке JavaScript-приложений. Книга
завершается главой 35, в которой обсуждаются вопросы
безопасности в JavaScript.
Часть б Приложение
В приложении А перечислены Internet-ресурсы для
JavaScript. Здесь представлены URL популярных и
полезных сайтов, которые помогут лучше разобраться в
JavaScript.
Соглашения, используемые в книге
В книге использованы соглашения, призванные
улучшить восприятие материала:
• Листинги программ на JavaScript приводятся
моноширинным шрифтом.
• Имена методов JavaScript, выводимые на экран
сообщения приводятся полужирным шрифтом.
• Заполнители (слова, подставленные вместо того, ч i о
необходимо набирать на клавиатуре) выделяются
полужирным курсивом.
• Вновь вводимые термины выделяются сурсииом.
• Пункты меню отделяются друг от друга запятыми,
например: "Выберите File, Open" означает
необходимость открыть меню File и в нем выбрать элемент
Open.
• Иногда код JavaScript не вмещается в одну строку. Для
его продолжения на следующей строке используется
знак "стрелочка" (и>).
Кроме того, в книге использованы специальные
выделения. Они включают в себя: Примечание, Совет,
Предупреждение, Внимание, Ресурс, Напоминание.
Знакомство
с JavaScript
ЧАСТЬ
1.
2.
3.
4.
В ЭТОЙ ЧАСТИ
JavaScript и World Wide Web
Совместная работа JavaScript и HTML
Создание собственного набора
инструментальных средств JavaScript
Создание первого сценария
JavaScript и
World Wide Web
В ЭТОЙ ГЛАВЕ
■ Знакомство с JavaScript
■ Десять заповедей JavaScript, которые должен
знать каждый создатель сценариев
■ Четыре фазы развития World Wide Web
■ Среда разработки Web-приложений
■ Что можно сделать при помощи JavaScript?
■ Сравнение JavaScript и VBScript
Как известно, один Internet-год эквивалентен трем
месяцам календарного года. Учитывая это, самой
полезной рекомендацией для читателей будет изучение
JavaScript, что поможет пробиться в первые ряды
разработчиков. Конечно, к этому можно относиться, как к
игре, но для полного понимания работы JavaScript
потребуется полностью изучить всю информацию. И как в
любом деле, необходимо бросить все усилия на переработку
информации и понимание приведенных ниже примеров.
Перед углублением во все винтики механизма
создания программ на JavaScript следует разобраться, какова
же цель создания этого языка. JavaScript уже давно
вышел за первоначально планируемые пределы отдельно
взятого браузера. Сейчас его можно найти на серверной
части, а также вместе с последним выпуском
операционной системы Windows. Вариант JavaScript на
стороне браузера ограничен так же, как и другие
Web-технологии: HTML, Java, CSS и подключаемые модули
(plug-ins). JavaScript проявляет себя как
исключительно мощное средство, взаимодействующее с другими
технологиями для создания эффективных и обдуманных
решений.
В этой главе предлагается небольшой обзор JavaScript
вместе с кратким анализом среды разработки
Web-приложений. После этого будут подробно рассмотрены
сферы использования JavaScript, текущая поддержка
JavaScript в браузерах, а также некоторые
отличительные черты JavaScript и VBScript.
Знакомство с JavaScript
Как и все, что связано с Web, новая технология JavaScript
гораздо моложе Java. JavaScript сначала был разработан
компанией Netscape, поэтому его первое имя — LiveScript.
Ожидалось, что этот язык сценариев расширит
возможности HTML и выступит в качестве частичной
альтернативы большому числу CGI-сцснарисв, будет
перерабатывать информацию из формы и добавлять динамику
в пользовательские страницы. После выхода Java
компания Netscape начала работать вместе с компанией Sun
над созданием языка сценариев, чей синтаксис и
семантика по плану должны были тесно связываться с Java.
Отсюда возникло и название JavaScript. В ре*ультате
совместных усилий Netscape и Sun и был создан этот
язык.
Одна из причин, послуживших созданию JavaScript,
была связана с потребностью в присутствии логики и
интеллекта не только со стороны сервера, но и
клиента. В этом случае все выполнение переходит к серверу,
причем даже такие простые операции, как проверка
допустимости данных. Фактически, при отсутствии
логики на стороне клиента Web-среда превращается в
устаревшую хост-терминальную архитектуру,
вытесненную революцией ПК в 80-х годах. Внедрение логики в
браузер существенно усилило клиента и превратило
отношение в истинную клиент-серверную систему.
Java — один из шагов в нужном направлении,
однако Java была внедрена в виде дополнения HTML, и
никто не собирался интегрировать Java с языковой точки
зрения. Хотя Java — строго типизированный язык, он
не подходит для сращивания большого количества
технологий, необходимых Web-мастерам при создании
Web-страниц. Более того, программирование на Java не
требует весьма серьезных знаний и опыта. Поэтому
многие разработчики HTML отказываются от работы,
состоящей лишь в реализации логики для элементов
JavaScript u World Wide Web
Глава 1
формы. Клиентский язык сценариев высокого уровня
казался утерянным звеном на арене Web-технологий.
С момента своего появления (декабрь 1995 г.) язык
JavaScript имел существенную поддержку в лице
ведущих производителей, в числе которых Apple, Borland,
Sybase, Informix, Oracle, Digital, HP и IBM. JavaScript
продолжает развиваться, внедряясь не только в
современные браузеры, но и в приложения, созданные
различными компаниями.
Идея начала скудеть, даже когда присоединилась
компания Microsoft. Понимая всю важность создания
Web-сцснарисв, Microsoft решила поддержать JavaScript.
Однако компания Netscape предпочла передать
Microsoft лишь только лицензию на право
использования технологии. На основе общедоступной
документации в Microsoft был создан "перепроектированый"
JavaScript — JScript, поддерживаемый Internet Explorer
3.0 и выше. JScript 1.0 плохо совместим с JavaScript I.I,
используемым Netscape Navigator 3.0 и более
поздними браузерами. В конечном итоге мириады версий и
различных хитростей, характерных для того или иного
браузера, стали причиной головной боли для
разработчиков Web-сайтов, использующих JavaScript (см. главу
26). В главе 27 можно найти более подробную
информацию о работе с различными версиями JavaScript.
К счастью, огорченные разработчики сценариев
смогли вздохнуть свободно. Компании Netscape,
Microsoft и другие производители решили подогнать
язык под стандарты ЕСМА (European Computer
Manufacturer's Association). В тот период ЕСМА
составила спецификацию языка — ECMAScript, что
поддержали «се производители. Хотя стандарты ЕСМА
оказывают существенную помощь, все же компании Netscape
и Microsoft продолжают развивать языки JavaScript и
JScript, выходя при этом за пределы стандартов.
Помимо JScript, еще одним конкурентом JavaScript
является VBScript, созданный с целью упрощения Web-
разработок на Visual Basic (VB). VB S cript является
подмножеством языка Visual Basic. Из-за отсутствия поддержки
со стороны Netscape, VBScript используется для интрасе-
тей (или Internet-сайтов). Он пользуются большой
популярностью у пользователей Microsoft Internet Explorer.
Листинг 1.1 Внедрение JavaScript в HTML-файл
Несмотря на появление VBScript, JavaScript стал
стандартным языком сценариев для Web. JavaScript
часто применяется при создании инструментов для
разработки Web-страниц. На стороне сервера Netscape
использует язык, на который часто ссылаются как на
Server Side JavaScript (SSJS). Но к этому мы вернемся
немного позже, в главе 12. Разумеется, компания
Microsoft сочла необходимым минимизировать
отставание, выпустив технологию Active Server Pages (ASP),
поддерживающую JScript.
Десять заповедей JavaScript, которые
должен знать каждый создатель
сценариев
Изучение JavaScript может оказаться сложной задачей.
Все основы объединены в 10 "заповедей". Они
призваны оказать помощь при овладении JavaScript. Перед
началом работы с языком внимательно изучите их.
JavaScript можно внедрить в HTML
"Бракосочетание" между JavaScript и HTML стало,
возможно, одним из важнейших событий. При работе с
JavaScript на клиентской части можно убедиться, что эта
парочка поистине неразлучна. Программы JavaScript
обычно заключены в HTML-документах, и
выполняются в них же. Большинство объектов JavaScript
представлены соответствующими дескрипторами HTML,
поэтому код находится на уровне клиентской части языка.
Чтобы стать настоящим разработчиком на JavaScript,
следует досконально изучить HTML.
HTML используется в JavaScript как мостик к тому,
что называется средой разработки Web-приложений.
Возможности HTML расширяются за счет обеспечения
дескрипторов HTML событиями и организации
управляемой событиями среды выполнения.
Позже об этом рассказывается более подробно. В
листинге 1.1 приводится пример внедрения кода JavaScript в
исходный код HTML. Серым выделен текст на JavaScript.
Все остальное — простой HTML.
<html>
<head>
<title>Status Bar</title>
<seript type="text/javascript">
<! —
window. defaultStatus = "Welcome to the large URL page."
function changes tatus () (
window status = "Click me to go to the Unleashed home page . "
function changeDefaultStatus() {
window, def aultStatus = window.document.statusForm.messageList.
Знакомство с JavaScript
Часть I
"■•options[window.document.statusForm.messageList selectedlndex] .text
>
//—>
</script>
</head>
<body>
<p>fi#160;</p>
<p>K#160;</p>
<p align="center">
<font size="7" color="#008040">
<strong>http //www.samspublishing.com</strong>
</font>
</p>
<p align="center">
<a href="http://www.samspublishing.com"
onroouseover="changeStatus{) ;return true">
Go...</a>
</p>
<p align=center>
<font size="l">
To change the default status bar message, select a message
from the list below and click the Change button.
</font>
</p>
<form name="statusForm" method="POST">
<select name="messageList1' size="l">
<option selected>Welcome to the large URL page.</option>
<option>On route to Sams Publishir </option>
<option>This page intentionally left (nearly) blank. </option>
<option>An exciting example of changing status bar text.
</option>
</select>
<input type="button" name="Change" value=" Change"
onclick="changeDefaultStatus{)">
</form>
</body>
</html>
ПРИМЕЧАНИЕ
Готов держать пари, что вы обратили внимание на
type="text/javascript". Действительно, новые
стандарты HTML и XHTML отказались от языкового атрибута в
дескрипторе <script>. He стоит сейчас беспокоиться, об
этом будет рассказываться в следующих главах.
JavaScript зависит от среды
JavaScript — язык сценариев, а не инструмент.
Программное обеспечение, собственно выполняющее код на
JavaScript, — это механизм интерпретации внутри
среды, к которым относятся браузеры Netscape Navigator,
Microsoft Internet Explorer, а также один из серверных
механизмов. После включения в документы HTML
JavaScript начинает зависеть от браузера (рис. 1.1). Если
же поддержка со стороны браузера отсутствует, тогда
ваш код выполняться не будет. Более того, если
проблема поддержки браузером решена не будет, код просто
высветится на странице как текст (рис. 1.2) (см. главу 2,
где детально описываются способы предотвращения
вывода кода на экран).
ifl *$■! mcwr.Ui .Fnvn in^vmvVrtt Htlp
Mac OX
The ext-generatiw
operating system.
я-щнаг ,1ия?гНвч
\
РИСУНОК 1.1 Microsoft Interm Explorer 4.5поддерживает
JavaScript
Очень важно помнить об этой взаимосвязи, если
необходимо использовать JavaScript для создания
приложений. Будет ли принято во ннимание, что потребу-
ется браузер, поддерживающий JavaScript? Если так, то
будет ли организовано уведомление пользователей об
этом? Будет ли создаваться версия, не использующая
JavaScript? При разработке приложений на JavaScript
потребуется ответить на все эти вопросы.
№..£<* '! ■ewHl'W»' ■■i*>.fl**«-. 1^4 iw>*i; flit _ ^-.^
ЧЧ V '/W*fL 1*141 1Л.С |Л»
alta
.vista: search
liMibMU'Lmrfh
smart ii hGairtrtul Лвл/v-
Enrrl Ll*v! Uiupptaj Lacal Free ImameLAccu** ЕшлИ
fj MTERjl
TO? Irt) t V"Ds
Ef rrti i
1 Aitrurnd Swrii
1mtg<!(, Audi* & Vlderr
1GSS1
ip [/»|ЬеЪггргнкн&н1Ысшй.
find Hrtukt on; ■P "It* Web c News f" Dacmsuu ticupi J" FtdJulU
*u
J. рым*иИ~wpiMwi»!
"ГОи IO»i©U^»"*Ш ■
riftifciKV g- ffjg -й.Т] ^ ^й|«»£»5П
.-> ЭД t,fj^Jg>^>E%-««Mfc:
РИСУНОК 1.2. Mosaic не поддерживает JavaScript
ПРИМЕЧАНИЕ
Сразу же после своего появления фреймы оказались
новинкой. Их можно было просматривать только с
помощью Netscape Navigator 2.0. Авторы HTML должны
были решить, как использовать фреймы и что делать в
случае, когда браузер их не поддерживает. Их
популярность существенно возросла в результате поддержки
компа-1ией Microsoft в Internet Explorer 3.0, после чего
фреймы стали частью стандарта HTML 4. При
использовании HTML 4 вам обеспечивается браузер, поддержи-
вающийфреймы.
К счастью разработчиков JavaScript, это та же
поддержка, что и для JavaScript. Netscape Navigator 2.x,
после — Microsoft Internet Explorer 3.x, затем — Opera 3.x,
а потом — 95% существующих браузеров,
поддерживают JavaScript. Если данная тенденция будет и дальше
развиваться, то зависимость от браузеров станет менее
значительной.
JavaScript - интерпретируемый язык
Как и большинство языков сценариев, JavaScript
интерпретируется браузером. JavaScript не компилируется в
бинарный код наподобие .ехе, но все же остается
частью документа HTML. Недостаток интерпретируемого
языка — для выполнения кода затрачивается много
времени, поскольку браузер компилирует директивы во
время выполнения. Однако есть и преимущество -
можне легко и быстро усовершенствовать исходный код.
Не переживайте по поводу старых версий сценариев
JavaScript. Если вы замените их в исходном документе
HTML, то новый код будет выполняться при каждом
получении пользователем доступа к документу.
JavaScript i World Wide Web
Глава 1
Небольшая оговорка: разработка на JavaScript,
характерная для Netscape, на стороне сервера потребует
компиляции всех файлов JavaScript и HTML в байт-код,
сохраняемый в файлах .web
JavaScript - слабо типизированный язык
JavaScript отличается от типизированных языков, таких
как Java и C++, которые требуют объявления всех
переменных определенных типов перед началом их
использования. JavaScript, наоборот, очень гибок. Вы не
обязаны объявлять переменные специального типа.
Если специальный тип вам неизвестен, то можно
работать с переменной. Последнее утверждение
иллюстрируется фрагментом кода. Например, требуется объявить
переменную myVal, присвоить ей строковое значение и
отобразить ее в окне сообшений. Можно
воспользоваться следующим кодом:
function flexible () (
var myVal // объявляем переменную myVal
mVal = "Pi" // присваиваем myVal некоторое
// значение
alert (rayVal) // используем ее
1
Хотя явное объявление переменных и отражает
хороший тон программирования, вовсе не обязательно
проделывать это. Следующий код, прекрасно
функционирующий в JavaScript, окажется просто немыслимым
в типизированных языках.
function flexible () {
mVal = "Pi" // устанавливаем значение
// необъявленной переменной myVal
alert (myVal) // используем ее
I
Следующий пример продемонстрирует всю гибкость
языка JavaScript — можно изменить тип значения,
представляемого переменной. Например, переменная myVal
в процессе выполнения функции изменяет строковое
значение начисленное:
function flexible () (
var myVal = "Pi"
alert (rayVal)
myVal = 3.14159
alert (myVal)
)
Javascript -- объектно-ориентированный
язык
Netscape и другие компании отнесли JavaScript к
объектно-ориентированным языкам (OOP — object-oriented
programming). Как упоминается в главе 9, JavaScript
действительно является объектно ориентированным языком.
Вы работаете с объектами, которые инкапсулируют
данные (свойства) и поведение (методы). (Если вы уже
пользовались точечной нотацией, скажем, в Visual Basic,
Java или Delphi, вам не составит особого труда овладеть
JavaScript.) Однако, хоть и можно работать с
объектами, их невозможно разделить на подклассы. Объектная
модель JavaScript основывается на экземплярах, а не на
концепции наследования.
JavaScript - язык, управляемый событиями
Большинство составленных кодов будет отвечать на
события, генерируемые пользователем или системой.
Язык JavaScript обладает поддержкой обработки
событий. HTML-объекты, подобные кнопкам и текстовым
полям, усовершенствованы с целью поддержки
обработчиков событий. При переходе к JavaScript из Java
или Visual Basic, эта управляемая событиями среда
является второй натурой. При переходе от процедурной
среды, от среды нисходящего проектирования,
потребуются отдельные знания, связанные с управлением
событиями. В главе 14 подробно описываются
события JavaScript.
JavaScript - это не Java
Путешествуя по просторам Web, читатель мог встретить
фразу: "JavaScript — это не Java". Как обсуждалось
ранее, Java и JavaScript разрабатывались разными
компаниями. Основная причина сходства имен кроется в
маркетинговых соображениях. Мы углубимся в различия
между JavaScript и Java в главе 5, однако сейчас будет
не лишним кратко посмотреть на основные различия и
сходства этих двух языков.
Во-первых, JavaScript тесно интегрирован в HTML,
а Java-аплеты всего лишь связываются с
HTML-документами через дескриптор <applet>. Сам же аплет
хранится в другом файле, загружаемом из сервера.
Во-вторых, Java — более надежный и
функционально полный язык, т.к. ему присущи свойства наподобие
строгого контроля типов, объектной ориентации и
наличию компилятора. Если Java предназначен для
создания аплетов и независимых приложений, то JavaScript
- исключительно для написания сценариев.
Синтаксис JavaScript напоминает синтаксис Java.
Если вы привыкните к управляющим структурам
JavaScript, можете считать, что первый шаг к овладению
Java уже сделан.
JavaScript - многофункциональный язык
JavaScript — многоаспектный язык, который может
применяться в различных контекстах для решения проблем,
связанных с Web. Немного дальше в этой главе
рассматриваются сферы применения JavaScript. Основные цели,
достигаемые при помоши JavaScript:
Усовершенствование и оживление статических HTML-
страниц с помощью спецэффектов, анимации и бан-
неров.
• Проверка данных без передачи на сервер.
• Получение основы для разработки Web-приложений
типа клиент-сервер.
Разработка клиентских приложений.
"Сращивание" со стороны клиента HTML-объектов,
Java-аплетов, элементов управления ActiveX и
подключаемых модулей Netscape.
Получение расширения к Web-серверу.
• Моделирование связи с базами данных е ■
использования CGI.
JavaScript - развивающийся язык
Ранее в главе упоминалось, насколь современен JavaScript
как технология. Учитывая резкие перемены в Web,
несложно понять, что JavaScript продолжает свое развитие
в качестве языка. При разработке приложений JavaScript
требуется думать не только о том, поддерживает ли тот
или иной браузер JavaScript, но еще и о том, какое
именно подмножество языка. Не мудрено попасть в
безвыходную ситуацию, поскольку количество версий
перешло всякие мыслимые пределы: JavaScript — 6 версий
(1.0—1.5), JScript — огромное количество версий (1.0—5.5
и еще несколько версий наподобие х.х.х).
РЕСУРС
Посетите страницу Netscape's DevEdge по адресу hfp://
developer.netscape.com или Mozilla.org (область Open
Source для инструментальных средств браузера Netscape)
по адресу http://www.mozilla.com. Усовершенствования
JScript отражаются на странице Microsoft по адресу
http://msdn.microsoft.com/scripting.
Сферы использования JavaScript
Стоит еще раз напомнить: JavaScript — язык, а не
инструмент. Поскольку это — язык сценариев, его можно
применять в широком диапазоне приложений. Если
рассматривать JavaScript в контексте разработки Web-страниц,
то в большинстве своем применение касается
клиентской части. На стороне сервера JavaScript применяется в
средах Netscape Enterprise Server и Microsoft Active Server
Pages. Он является родным языком в наборах
инструментальных средств для разработки Web-страниц, таких как
Borland Intra Builder, Macromedia Dreamweaver (начиная
со второй версии). Не следует думать, что JavaScript —
исключительно клиентский язык сценариев. Новейшие
версии Microsoft Windows поддерживают JavaScript на
рабочем столе, вместе со средой Window Script Host
(WSH).
JavaScript u World Wide Web
Глава 1
Четыре фазы развития
World Wide Web
Резкие изменения в Web-технологиях за последние
шесть лет привели к бурному росту Web. Перед
обсуждением темы Web-приложений было бы полезно
проследить эволюцию Web от простейшего "расширения"
Interene: до уровня "культуры", ставшей частью
современной жизни. Эволюция условно делится на четыре
фазы.
Фаза 1. Символьный гипертекст
Web появилась в 1989 г. и была текстовой
гиперссылочной системой. Это ограничение легло в основу потому,
что компьютеры, имевшие доступ к Web, не обладали
качественным способом отображения графики на
экране. В первый период существования Web пользователи
должны были вводить числа, представляющие
страницы, которые требовалось просмотреть. Со временем
появилась возможность выбора подсвеченного текста и
перехода к соответствующей странице. Гипертекстовая
сущность Web приобрела революционное значение во
многих областях, связанных с наукой.
Фаза 2. Графически-ориентированные
статические HTML-документы
Вторая фаза развития Web началась в 1993 г. с
появления графического Web-браузера под названием NCSA
Mosaic. Одним из разработчиков Mosaic был студент и
будущий основатель Netscape — Марк Андерсен (Marc
Anderssen). Mosaic разрабатывался для Национального
центра по применению супер-ЭВМ (NCSA — National
Center for Supercornputing Applications). Хотя создание
Web, в основном, бьшо направлено на удовлетворение
нужд научных сообществ, возможность просмотра
графики существенно усилила Internet. В то время
графические среды приобрели гораздо большую
популярность, нежели настольные символьно-ориентированные
системы. Microsoft выигрывала войну операционных
систем, выпустив на рынок Windows 3.1x.
Графический браузер присоединился к настольной
графической среде и стал именно той "изюминкой",
которую так ждали. Через несколько месяцев
компьютерные компании стали добросовестно и
целеустремленно проникать в Web.
Web сама по себе осталась статической (см. рис. 1.3).
Содержимое включало в себя текстовые или
графические документы и ряд других элементов. Возможно,
страница содержала аудио- или видеофайлы. Приходилось
сначала загружать файл, а потом проигрывать его,
используя внешнее приложение.
.lOwtJ.D-EWihMTfbpbMM'iHwNPiH]
1 £ifc * -4W. HavwiAai
iii_3Mi^Л-- ■ ^-ЖУ' --:- —
^Ш
I
Welcome to WiIkcs.Nct
Wilkes Telephone Membership Corporation's
Нот Page
CLICKinRE TO SEE OUR KEWELECTKOMC CLASSROOM
РГ EASb READ OCK tBERJf AGREEMENT
Vlb. DISCLOSURE
ijUfeBT"1""-™-»""»'
РИСУНОК 1.3 Статическая HTML-страница
Фаза 3. Динамические HTML-документы
В течение первых двух фаз Web-страницы создавались
при помощи текстового редактора HTML и помещались
на Web-сервер. После размещения на сервере
большинство страниц оставались статическими до тех пор, пока
автор их не изменял. Статические страницы вполне
подходят для некоторых целей, однако не для всех. Для
динамической генерации HTML-документов
Web-разработчики стали использовать CGl-сценарии (CG1 -
Common Gateway Interface, интерфейс общего шлюза),
обеспечивая с их помощью создание
HTML-документов "на лету". Как раз это и стало основой первого
уровня взаимодействия с пользователем в Web. С таким
усовершенствованием Web могла превратиться в платформу
для гипертекстовых документов, и кроме того, служить
средой прикладных приложений. Одним из первых
Web-приложений, демонстрирующих всю мощь новых
технологий, стал Web-сайт курьерской почты FedEx (см.
рис. 1.4).
3FidEi I TncfcMg' МюомК Intmrt Ецяшя
Г"'Е**:- £" *j* r#.pifw.. .jr.*-. ff*v
k . <*■-- Ш-.:й!
a, Ф
%J
~
Fed
Express
oi-*H« I racking fctt-sj
Enter Up To 25 Airbill шаЪвп:
» Unit.* СеЧа 1ЬАтимАд*1инц*»гг«-Ии» >
«hfMjtTntlgthtej
4y;lWia!dHilfti***» '
PIcasc complete tfit field above and
jDnDnejtonftr.* Gutd»
For the latest on rvicfci,
and moie, see the QfiliAe
Ck.bc pruil and я\шрг ■
s::^^-.,':t...^'ii teikcJ it
ему it prrpirr your
shipmraB rfivlc youVe
online You can prepare Аж
РИСУНОК 1.4. FedEx предложили одно us самых
привлекательных Web-приложений
Знакомство с JavaScript
Часть I
Фаза 4. Активные HTML-документы
Четвертая фаза развития Web началась в 1995 г. с
появлением подключаемых модулей (plug-ins) в Netscape
Navigator и существенно ускорилась за счет внедрения
поддержки Java. Необходимо было усилить клиентскую
сторону и отказаться от опоры исключительно на
сервер при запуске приложений либо обработке
информации, введенной пользователем.
Благодаря Java, Web более не является коллекцией
документов HTML, но может быть истинной клиент-
северной средой, в которой клиент обладает
определенной независимостью от сервера. JavaScript
соответствует данным требованиям. В JavaScript, Java, ActiveX и
других клиентских расширениях браузер становится
мощнейшей операционной средой, в которой можно
работать с Web-приложениями.
Среда разработки Web-приложений
Использование .Vc в качестве среды проектирования —
относительно новое явление. CnoHBflemieMJava, JavaScript,
ActiveX и других технологий, идея развития
Web-приложений показалась весьма заманчивой.
Web как среда проектирования может выглядеть
достаточно сложной. Учитывая распределенный
характер Web, Web-приложения могут состоять из множества
частей, в каждой из которых применяется так или иная
технология.
В рамках типичной клиент-серверной архитектуре
на базе локальной сети могут существовать клиентские
приложения, подключенные к сетевому серверу баз
данных. Зачастую клиентское приложение
разрабатывается с использованием единственного инструмента,
скажем, Delphi или Visual Basic. Как правило, серверная
часть приложения разрабатывается и поддерживается с
помощью инструментальных средств администратора
SQL Server.
На рис. 1.5 показаны элементы, составляющие
среду разработки приложений. Далее каждый из >тих
элементов будет рассматриваться более подробно.
Среда разработки web-приложений — реальный
пример того, что сумма гораздо лучше, чем отдельно взятые
части.
[графический
редактор
HTML-
редактор
создание
содержимого
клиентские
расширения
I JavaScript J
РИСУНОК 1.5. Среда
разработки Web-
приложений
I Netscape I ( WebSite I
серверы
( NSAPM { ISAPIJ [ CGI J
серверные
расширения
(JavaScript JI CGI J
расширения
баз данных
ODBC
( JDBC J
База данных
написание
сценариев
[ VG Script j
безопасность
управление
содержимым
Службы
JavaScript u World Wide Web
Глава 1
Сама по себе каждая из этих технологий
ограничена и довольно узка в своей области. Но когда эти части
увязываются в единое приложение, повышается
эффективность средств для развития Internet и интрасетевых
решений.
Клиентская часть
Клиентская часть среды разработки Web-приложений
состоит из 4-х строительных блоков:
• Браузеры
• HTML (Hypertext Markup Language, язык
гипертекстовой разметки)
• Клиентские расширения(.1ауа-ашсты, элементы
управления ActiveX и подключаемые модули Netscape)
• Языки сценариев (JavaScript и JScript)
Ниже кратко рассматривается каждая из технологий,
а также их совместная работа. Рисунок 1.6 отражает
отношения между ними.
Браузеры
Без сомнений, самая главная часть Web-приложения —
браузер. Браузер — окно в Web для пользователей и
служит пользовательским интерфейсом для вашего
приложения. Технология браузеров довольно-таки проста
(чтение HTML и вывод на экран), но появление
нестандартных усовершенствований, наподобие JavaScript и
слоев Netscape, делает критическим выбор браузера во
время определения платформы разработки.
При создании приложения для интрасети несложно
убедиться, что все пользователи применяют
стандартный Web-браузер. Однако при создании
Internet-приложения для пользователей со всего мира вопросы
проектирования приобретают более сложный характер, с
перевесом функциональных возможностей по
отношению к совместимости.
Таблица I. I отражает ситуацию с двумя основными
на сегодняшний день браузерами.
HTML
HTML — один из кирпичиков, лежащих в основе Web.
HTML — язык гипертекстовой разметки, создающий
структуру и обеспечивающий форматирование простого
текстового файла. Как "технология", он довольно
рутинный; некоторые даже заявляют, что он устаревший.
Однако именно эта общность и наделяет язык силой.
Несмотря на то что браузер обеспечивает
пользователю окно для отображения Web-содержимого, само
содержимое поступает в форме текста HTML. He
имеет значения, представляются ли статические
документы, возвращается результат запроса, обрабатывается
форма обратной связи или же выводится результат
работы JavaScript-приложения. Какими бы ни были
методы получения этих данных, для их отображения все
превентивно переводится в дескрипторы HTML.
Подключаемые
модули
РИСУНОКт
Клиентская часть
Браузер
Раде</
<html>
<head>
.leMJntitled Normal
title>
<SCRIPT LANGUAGE =
"JavaScrxpt">
function
confirmAction(call * ngObject)
return
confirm ("Do you really want
this subscription? T/he
magazine is not really that
good.")
</SCRIPT>
</head>
<body>
Аплеты
элемент
управления
ActiveX
Языки сценариев
JavaScript
VBScript
Таблица 1.1. Поддержка клиентских технологий со стороны современны* браузеров
Netscape Navigator Microsoft Internet Explorer
Поддержка JavaScript/JScript
Поддержка VBScript
Подд ржка Java
Поддержка ActiveX
Подключаемы модули Netscape
2.0+
Отсутствует
2.0+ (3.0+для Mac)
3.0+ (подключаемый модуль)
2.0+
3.0+
3.0+
3.0+
3.0+
3.0+
Знакомство с JavaScript
Часть I
Клиентские расширения
По мере возрастания потребностей в активных Web-
страницах, простое расширение браузеров уже не
могло рассматриваться в качестве удобоваримого решения.
Некоторые расширения были подключаемыми
модулями независимых разработчиков, которые увеличивали
эффективность браузеров. Однако появилась
потребность работать с выполняемым содержимым (executable
content) в самом браузере. Для самой технологии не
обязательно привязываться к работе конкретного браузера,
хотя он и поддерживает ее.
На сегодняшний день существуют три отдельных
клиентских расширения. У них есть обшие черты,
равно как и отличия:
• Java-аплеты
Элементы управления ActiveX
• Подключаемые модули Netscape
Java-аплеты
Если вы никогда не слышали о языке
программирования Java, вас вполне могут назвать Митрофанушкой. О
Java говорилось гораздо больше, чем о любом другом
языке программирования. Хотелось бы рассказать о нем
в контексте среды разработки Web-приложений.
РЕСУРС
Информация по Java находится на сайте компании Sun
по адресу http://java.sun.com.
Java — независимый от платформы язык
программирования, разработанный компанией Sun Misrosystems.
Изрядно говорилось о возможности Java создавать
содержимое, выполняемое на подавляющем большинстве
платформ.
Внутри среды браузера Java-программы называются
аплетими (applets). Связь с аплетом осуществляется
через дескриптор <applet> в документе HTML, в
результате чего аплет может быть загружен на клиентский
компьютер. Аплет поступает в браузер в виде
последовательности байт-кодов. Если Java браузером
поддерживается, байт-код интерпретируется и выполняется на
клиентской машине. Ссылки на Java-аплеты
Java-несовместимыми браузерами игнорируются.
Java-аплеты используются в нескольких сферах. По
мере развития языка применимость его расширяется. На
рис. 1.7 и L.8 показаны два примера применения Java.
Элементы управления ActiveX
Ранее известные как OCX, элементы управления ActiveX
стали ответной реакцией Microsoft на появление Java-
аплетов. Они напоминают Java-аплеты, поскольку их
можно использовать в качестве средств обеспечения
выполняемого Web-содержимого (см. рис. 1.9). В
отличие от Java, область применения элементов у фавления
ActiveX ограничена только операционной средой
Microsoft Windows.
[jj|£3! S.'l ] »"|"|иш ■!»»■ - »c—* InmnitC^lmt
p a a
5 Вийми Н
EJ
-.r^HuiS|jb4 ,fcj 1П
$*i
Southwest Alnr 354 Is ш f*
,» ы во, и 1*4
'tea no \
From: Seattle-Tacoma №11. WA
To: RenoJTahoc InM, NV
fli^it Equipment- 737-100ОПП Series
154*0™*
йОДНп
4
Г Е A Q
1
РИСУНОК 1.7. Java-аплет перемещает самолет вдоль экрана.
3 -ft -* й 4* ~&lb*t JUL
„^'ВмзкпЧМга- A"Usr-UKm(Ир /ww.pn4lan*.«kif~^A^'wacHTd
Virtual NYC
№d«j№«< !№■■ hiaiurw
•л-
■ч
Sean* |п |чяпи1ип ^J
с
'- rbel-rf*— С*Ч*Г .
iJ
■V-—gif
РИСУНОК 1.8. Интерактивная карта, реализованная на Java.
Несмотря на то что функционирование элементов
управления ActiveX допускается только в одной
операционной системе, это не означает, что они недоступны
для Web-приложений. Например, один и тот же элемент
управления ActiveX можно использовать в
Web-приложении и запускать его как в браузере с доступным
ActiveX, так и в Delphi или Visual Basic.
Высокое жюри все еще сомневается, что станет ап-
летными стандартами — Java и ActiveX: что будет столь
же известно, как и среда разработки Web-приложений?
Но все же имеет место уклон в сторону Java (по
большей части, из-за опасений инфицирования вирусами,
причиной которого могут стать элементы управления
ActiveX). И в том, и в другом случае есть свои
преимущества и недостатки. К счастью разработчиков JavaScript,
программы могут взаимодействовать с обоими
технологиями. Глава 25 посвящена совместной работе JavaScript
и элементов управления ActiveX.
fcl^HH^r ааяг Inratai. HSH HoMfCeMMl - Mmtlfl Interne! Erplwtf
I \A&? .^И l*p iJ l «4М1» TWiGOrt/idficieWhqwKe ct^Page^ww
te **" %"
t
MoneyCentral investor
МП «Ma ■ ■•
"^
£№fr ^'F¥? *-W** rW
bb
p
■:>ИВ8И >"ч_im jTtJmирто
*~ jff lajBg"»»»^ ШынШШ I <мси iim j
rrmrtf..
jd
РИСУНОК 1.9. Vrao >то — Javci-аплет или элемент управления
ActiveX?
РЕСУРС
Информация по Active может быть найдена в Internet-
центре Microsoft по адресу http://www.inicrosoft.com/
com.
Подключаемые модули Netscape
Подключаемые модули (plug-ins) — это несколько
другая технология, тем не менее представляющая собой
клиентское расширение Web-браузера. Подключаемые
модули существенно расширяют возможности браузера
Netscape Navigator, связанные с поддержкой
дополнительных типов данных. В частности, подключаемые
модули применяются для вывода на экран файлов
различных MIME-типов (multipurpose Internet mail extension,
многоцелевые почтовые расширения).
После запуска Netscape Navigator начинает поиск
подклочаемых модулей в папке program\plugins с целью
их регистрации. Вызов подключаемых модулей
выполняется по мере необходимости, когда обнаруживается
файл MIME-типа.
После инсталляции подключаемые модули
становятся добавочными модулями браузера и совершенно не
нуждаются во взаимодействии с пользователем для
своего запуска. В действительности они необходимы для
таких мультимедиа-данных, как звук, видео, графика.
На рис. 1.10 показан подключаемый модуль,
позволяющий просматривать файлы Adobe Acrobat в рамках
JavaScript и iVorlu Wide Web
Глава 1
Netscape. Для связи с модулями можно использовать
JavaScript.
.,/*!t>teet.'
i <i & а£ el ei-t^'Mi.
J&\ Pi ыШ ж ИХ Т » - > и
J fl5J"vtar*PfVr«-
ОЙЗЙЭ и !
Adobe *-*ОЬн. Roaderl.O tV' Macintosh *toadMo
tnslatfna AcRibat Read 4.0 la Madntosh
MfbnilHMf *h<
ЦкгщЛ *а,щМ H>iibr 3 ■ i daaaiJ
9 *П| IP* Ы«<№ П* *F
b~^"i^tiljrik-^if,'^3^1feli
Ji^-^-L1^-
РИСУНОК 1.10. Просмотр файла PD при помощи подключаемого
модуля.
Клиентские языки сценариев
Последние штрихи магии клиентской части завершают
клиентские языки сценариев. На сегодняшний день
основным таким языком является JavaScript, тем не менее
компания Microsoft выдвигает собственную
альтернативу — VBScript. Наибольшей популярностью VBScript
пользуется в кругу разработчиков на Visual Basic. В
конце главы можно найти краткое сравнение возможностей
JavaScript и VBScript.
Серверная часть
Серверная часть среды разработки Web-приложений
состоит из собственно Web-сервера плюс расширения
серверного программного обеспечения. Как будет
показано несколько позже, эти расширения могут принимать
различные формы и работать с различными
технологиями. На рис. 1.11 показаны взаимосвязи внутри
серверной части.
Серверы
Web-сервер загружается после отправки со стороны
клиента запроса на требуемые HTML-документы, после
чего возвращает их для просмотра. Программное
обеспечение сервера — это приложение, выполняющееся на
машине с установленным протоколом TCP/IP. Среди
наиболее популярных серверов находятся Netscape
Enterprise Server (NES), Microsoft Internet Information
Server (IIS) и Apache.
Серверные расширения
Собственно Web-сервер обеспечивает передачу
статических HTML-страниц клиенту при запросе, а также мно-
Знакомство с JavaScript
Часть I
жество других функций. С другой стороны, некоторые
серверные расширения обеспечивают возможности, не
реализованные в самом сервере. К таким возможностям
относятся CGI, серверные API, JavaScript и Java.
Клиенты
Web-сервер
Расширения
CG1
Серверные
API
ц JavaScript
Java
РИСУНОК 1.11. Серверная часть.
CGI
Интерфейс общего шлюза (CGJ, Common Gateway
Interface) представляет собой стандарт де-факто для
организации взаимодействия внешних программ с Web-
серверами. Запуская CGI-программы и сценарии на
сервере, можно генерировать динамически создаваемое
содержимое и отображать его пользователю.
Типовой сценарий заключается в генерации
запроса из формы HTML и отправка его серверу. Запрос
запускает CGl-программу или сценарий, размещенный в
специальном каталоге на сервере. CGl-программа
обрабатывает запрос и возвращает HTML-документ с
результатами.
CGl-программа может разрабатываться на любом
языке программирования: Java, C++, Visual Basic, PHP,
т.е. на том, что способно продуцировать код, могущий
выполняться на Web-сервере. В мире Unix CGI-сцена-
рии принято составлять на языках, подобных Perl или
языкам командных оболочек Unix.
Серверные API
Другой способ интеграции с сервером предполагает
использование его собственного интерфейса прикладного
программирования (API, Application Programming
Interface). Два наиболее используемых API такого рода
— Netscape Server API (NSAPI) и Misrosoft Internet
Server API (ISAPI).API обеспечивают более тесную
интеграцию с сервером. Например, в случае Windows для
доступа со стороны сервера потребовалось бы создать
библиотеку DLL, а не отдельный выполняемый модуль
ЕХЕ.
Использование серверных API обладает своим
преимуществом — потоки оказываются гораздо более
эффективными по сравнению с CGI-программлми. CGI
требует, чтобы для каждого клиентского запроса
выполнялся отдельный экземпляр программы. Это приводит
не только к большим издержкам, но также и к
ограничению максимального объема совместно используемых
данных.
Недостаток использования серверного API лаключа-
ется в том, что полученное решение окажется
специфическим для конкретного сервера. Созданная ISAPI DLL
не будет работать с сервером Netscape. Разумеется, если
работа связана постоянно лишь с одним сервером,
упомянутый негативный момент сводится на нет.
Серверный JavaScript
Повышенное внимание к JavaScript связано с
возможностями, реализуемыми языком на стороне клиента.
Однако, с не меньшим успехом JavaScript можно
использовать и в качестве серверного инструментального
средства разработки сценариев. Как и следовало
ожидать, первой средой подобного рода является Netscape.
Среда Netscape SSJS (Server-Side JavaScript)
позволяет использовать сценарии для построения
Web-приложений, управляемых Netscape-сервером. Кроме того,
существует несколько серверных расширений для
языка JavaScript, которые обеспечивают дополнительные
возможности генерации динамического HTML,
взаимодействия с клиентом, доступа к внешним файлам на
сервере и подключения к базам данных SQL (LiveWire).
Следует отметить, что в ответ компании Netscape,
Microsoft поддерживает JScript в качестве серперного
языка сценариев в рамках Active Server Pages.
Java
За последние месяцы Java существенно сдала свои
позиции на серверной стороне. Компания Sun выпустила
технологию под названием Java Server Pages (JSP),
которая призвана быть конкурентом ASP и SSJS. В
настоящее время компании Sun и Netscape объявили о
создании своего рода союза, именуемого iPlanet, цель
которого заключается, помимо прочего, в интеграции
JSP и SSJS в единую технологически мощную среду.
Вы, наверное, слышали о Java-сервлетах (Java Servlets).
Сервлеты представляют собой небольшие компоненты,
более всего похожие на элементы управления ActiveX
в среде ASP, которые могут активизироваться как
готовые страницы либо использоваться для построения
страниц. Это позволяет разработчикам направить
накопленные знания Java (который намного проще в изу-
чении, нежели С) на построение быстродействующих,
надежных, не зависящих от платформы компонентов,
предназначенных для создания страниц.
Что можно сделать при помощи
JavaScript?
После краткого знакомства с технологиями разработки
Web-приложений самое время посмотреть на роль
клиентской части JavaScript в Web-приложениях.
Клиентские приложения
JavaScript можно использовать для разработки полного
клиентского приложения. Хотя JavaScript и не столь
всеобъемлющий язык, каковым является Java, тем не менее,
он проявляет существенные возможности при работе с
дескрипторами HTML и связанными с ними объектами.
Одно из наиболее известных приложений JavaScript,
h Idaho Design's ColorCenter (http://www.hidalio.coni/c3),
показано на рис. 1.12. Данное приложение
применяется для выбора цветов элементов, видимых в браузере, с
возможностью их предварительного просмотра в
отдельном фрейме. Создание аналогичного приложения с
помощью Java сопряжено с гораздо большими сложностями,
связанными с необходимостью взаимодействия с
HTML. Очевидно, что в отдельных случаях JavaScript
обеспечивает практически идеальную основу для
разработки приложений.
£&: £*=i >'«y= * t*™*?**
■ ~Чц~ _■_""'■■"-""''»'■""" —' Л— I I л
ме* ^ HacVgioiuid ** №mc
rr Choose colors from *be paler* below. Select Background, Test Link,
* Acbve Ln_ Visited Link nrTr aire, above to set the corresponding
V* coI rWtartUres The current link color aic shown on the right. The current
l,i" BODY tag is shown -low
^ c*»dy bgcolor-'IFFFeH:* [fjf"*KDUO]' bifc-'jraOOFF' «Ьи^'А^ТНа)'
i
:HJ:( t--a V-LHjlftu'1
/isit texture and aph^s sites by seler*-.'thenifrom the uop-do' i list above and rbcls ,;Go,
*Л visiting a sBe, collect images by chckirigthe rightmoiue button (Mac users click and hold) and
^ selr"-hrg "Copydus Imagf I "canfln'from the popup menu. Thcnchck on the text entry box f-"Uo
'C th ^.ddbuttoa andpa etherniagelDCatiojithere .Ctrl-vmWindows). Finally, clickAdd to addthe
" ■ toyour •"oUecbor* (This IS easier than it umd [) ColorCenter will remember your image
1£ seltcbo and cbspla Iheni under Teslures whenever you lum.
a bete
Z3
of ColorCenter Please fettttC knOWity lenconnter any bugs or othe
РИСУНОК 1.12. hldaho Design's ColorCenter.
Проверка допустимости данных
JavaScript обеспечивает для Web-разработчиков
возможность выполнять проверку допустимости данных,
вводимых пользователем, без необходимости обращения к
серверу. Внутри кода JavaScript можно определить, яв-
JavaScript и World Wide Web
Глава 1
ляются ли значения, введенные пользователем,
корректными, или, скажем, соответствуют ли они требуемому
формату. Гораздо эффективнее провести проверку
данных в JavaScript, нежели передавать на сервер
незавершенные данные. Подобного рода подход эффективен не
только для пользователя, вводящего данных, но также и
для сервера. При этом появляется уверенность, что
передаваемые на обработку серверу данные являются
полностью корректными.
Создание интерактивных форм
JavaScript также используется для "оживления" форм
HTML. Одна из задач оживления связана с проверкой
достоверности данных. Другая предполагает реализацию
дополнительных возможностей, недоступных в HTML,
как то поддержка информации в строке состояния,
открытие второго окна браузера для отображения, скажем,
справочной информации и т.п.
Клиентские таблицы поиска
Помимо проверки достоверности данных, один из
способов уменьшения потребности доступа к серверу
заключается в использовании JavaScript для генерации и
поддержки клиентских таблиц поиска. Следует
помнить, что в таком случае данные должны встраиваться
в сам HTML-документ, поэтому использование таблиц
поиска должно сводится к небольшим
информационным базам данных, предназначенным только для
чтения.
Поддержка состояния
В Web-среде, не поддерживающей концепцию
состояния, JavaScript применяется для поддержки состояния
при обмене между сервером и клиентом. Основной
способ поддержки состояния связан с использованием
наборов cookies (информации, сохраняемой браузером на
стороне клиента). JavaScript обеспечивает как поиск,
так и хранение cookie-наборов на клиентской части.
Более детальная информация по работе с cookies может
быть найдена в главе 30.
Работа с Java-аплетами, элементами
управления ActiveX и подключаемыми
модулями
По мере развития JavaScript, возрастают возможности
работы с клиентскими расширениями, включая Java-
аплеты, элементы управления ActiveX и подключаемые
модули Netscape. Несложно получить доступ к
свойствам объектов Java и ActiveX, равно как и запускать их
методы. Точно так же несложно определить,
установлен ли конкретный подключаемый модуль. Обладая
подобной возможностью, JavaScript становится своего
Знакомство с JavaScript
Часть I
рода "клеем", соединяющим вместе HTML, аплеты и
клиентские расширения.
Поддержка JavaScript со стороны
браузеров
По сравнению с другими приложениями браузеры -
относительно небольшие части программного
обеспечения, однако постепенно они превращаются в мощные
приложения, воплошаюшие в себе все достижения Web-
технологий. Браузер — это окно в Web, поэтому каким
бы потенциалом на обладал бы JavaScript, однозначно
плохо, если браузер не обеспечивает поддержку этого
языка. Ниже будут рассматриваться особенности
поддержки JavaScript в доступных на сегодняшний день
браузерах.
Поскольку JavaScript — язык интерпретируемый и
внедряемый в HTML-документы, он всецело зависит от
работы программного обеспечения браузера.
Устаревшие браузеры не знают, что делать с таким кодом, и
попросту проигнорируют его.
Netscape Navigator
К середине 90-х годов компания Netscape стала одной
из самых влиятельных в Web-индустрии. Она не
только открыла для рынка различные технологические
нововведения, но и объединилась с другими лидерами
индустрии, такими как Sun, имея целью продвижение
различных технологий в передние ряды Web.
Поскольку разработчиком JavaScript является
Netscape, вполне можно ожидать, что наилучшим в
плане поддержки языка сценариев станет именно
браузер Navigator. Navigator 2.0 был первым браузером,
поддерживающим JavaScript. Выпущенные позже версии
привнесли важные усовершенствования в сам язык.
Поскольку Navigator был перемещен в Mozilla.org, т.е. в
зону Open Source (открытого исходного кода) Netscape,
можно быть уверенным, что разработчики со всего мира
в конечном итоге создадут практически идеальный
браузер. На рис. 1.13 показана бета-версия Mozilla (Netscape
Navigator 5) с отображенной начальной страницей
Mozilla.org.
Microsoft Internet Explorer
Microsoft Internet Explorer 3.0 — первый браузер,
созданный другой компанией, включающий в себя
поддержку JavaScript. Более ранние версии Internet Explorer не
обладают поддержкой JScript, т.е. реализации JavaScript
от компании Microsoft.
Другие браузеры
На момент написания книги существовало лишь три
браузера, поддерживающих JavaScript: Sun's Hotlava 3.0
(JavaScript 1.4), Opera (JavaScript 1.1), Be's NetPositive
2.1 (экспериментальная версия).
■ H noala.wg ■ НапЬ
I % & $ *v*
sj
jft
mii2illd.org
T" ... "
F"
j
J
■t
Dbt«Looci Don
■J' *t
f-
1*
~
"' .:
ЫтаДаПмп 36:1апиа1У200(-
Milestone 1 Released
M13 is**- 'Up: la release. It
should be tun for
everyday ше by testers so we
encourage you ic use it dady
and find ax many bugs as
fc ble u we work to teasr
a beta. Die ЫкдГд to rq>ert
fci]gs
Open Sonrt* С lypto
Announced
Tlutfilu to reltfi US eapcrt
regjehoti we can iwboit
ler-ayand t ptevgraptae
code ■utmwt det»i».see к
.- -AM- Hite£v***pfcftfoi* ■■ ""'A''
liff
thrt-wr k'tiifJatt
сват: news ел
MdW.#j.5«Mi4
Zcp±U .-nlfl and
ГЧУТ*'>
МОП'.
fri.*nWJ [«ilia
MccdU >n
Dpn-iovct wc>>
twia deugneil
[ji-^aoiMis
ж^Ьике.
(да*?' ^Jfl
* □ (I '
РИСУНОК 1.13. Mozilla/Nelscaj Navigator 5.
Сравнение JavaScript и JScript
Как упоминалось ранее, JavaScript — не единственный
язык сценариев, доступный в Web. На этой арене
могут выступать еще два участника: JavaScript/JScript и
VBScript. Хоть данные языки и отдалились от
действительно конкурентно-способных языков (создается
впечатление, что на данный момент они просто
дополняют друг друга), все же нелишним будет сравнить все
достоинства и недостатки JavaScript и VBScript. Ниже
рассматривается, что есть VBScript, как он соотносится
с JavaScript, и для примера приводится простое VBScript-
приложение.
ПРИМЕЧАНИЕ
Последние исследования показывают, что количество
Web-сайтов, использующих VBScript, составляют
незначительную часть в общем числе сайтов,
поддерживающих JavaScript.
Что такое VBScript?
VBScript представляет собой язык сценариев для Web,
разработанный компанией Microsoft, полностью
параллельный языку JavaScript. Все, что находится в основе
VBScript, существенно отличается от первоистоков
JavaScript. В то время как JavaScript создавался
практически "с нуля", слабо основываясь на C++ и Java,
VBScript принадлежит к языковому семейству Visual
Basic. Среди членов данного семейства: Visual Basic -
распространенный язык программирования для
Windows, Visual Basic for Applications — макроязык для
Microsoft Office и других приложений. Если когда-либо
доводилось разрабатывать программное обеспечение на
Visual Basic, гораздо быстрее получится освоить
VBScript.
ПРИМЕЧАНИЕ
Наибог.ее актуальная информация по VBScript
находится на сайте Microsoft по адресу http://
www.msdn.microsott.com / scripting.
Встроенный язык HTML
Как и JavaScript, VBScript является языком написания
сценариев, внедренным в HTML-файлы. Подобно
JavaScript, VBScript использует дескриптор <script> с
указанием "text/vbscript" в качестве значения
описателя типа. Например, следующий сценарий отображает
диалоговое окно предупреждения после загрузки
страницы:
<html>
<head>
<script tyre="fcext/vbscript">
alert{"Is this JavaScript or VBScript?")
</script>
</head>
</html>
Самое интересное, что можно почерпнуть из
приведенного выше примера, так это то, что синтаксис двух
языкор совершенно одинаков. Если изменить параметр
type нь "text/javascript", результат останется тем же.
Объектная модель
Одним из наиболее важных факторов при сравнении
JavaScript и VBScript является идентичная базовая
объектная иерархия, хотя в других версиях могут
существовать и различия. Для Web-разработчика,
использующего оба языка, это — весьма приятный сюрприз,
поскольку гораздо проще использовать синтаксически
разные языки, нежели принципиально различные
парадигмы. Преобразование кода JavaScript в код VBScript
или наоборот, как правило, носит построчный характер.
В этих двух языках написания сценариев идентичны
не только объектные модели, но также и способ работы с
HTML-объектами. Подобно JavaScript, VBScript может
реагировать на события, генерируемые
HTML-объектами. Например, в следующем примере после нажатия
кнопки Convert (листинг 1.2) все буквы текста,
введенного в поле myText, преобразуются в прописные.
ЛИСТИНГ 1.2. Пример на JavaScript.
<htm" >
<head>
<script type="text/javascript">
<! —
function convertText{) {
document. SampleForm. myText. value =
document. SampleForm.myText. value. toUpperCase ()
JavaScript и World Wide Web
Глава 1
</script>
</head>
<body>
<form name="SampleForm">
<input type="text" name="myText">
<input type="button" value="Convert"
onclick="convertText()">
•C'forn»
</body>
</html>
Та же страница, но с использованием VBScript,
выглядит следующим образом:
Листинг 1.3. Пример на VBScript.
<html>
<head>
<script type="text/vbscript">
<! —
Sub ConvertText()
document. SampleForm.myText. value =
UCase (document.SampleForm.myText. value)
End Sub
->
</script>
</head>
<body>
<£orm name="SampleForm">
<input type="text" name="myText">
<input type="button" value="Convert"
onclick="convertText()">
</form>
</body>
</html>
Более сложные типы данных
На первый взгляд может показаться, что возможности
работы с типами данных в VBScript существенно
ограничены. Но это лишь кажется, и причина состоит в том,
что VBScript имеет только один тип данных — variant.
При дальнейшем знакомстве с VBScript станет ясно, что
поддержка типов данных здесь оказывается гораздо
мощнее, нежели в JavaScript. Тип variant содержит
информацию о значении, с которым он работает, поэтому в
различных ситуациях имеется возможность запросить
этот тип данных. Иными словами, если переменная
типа variant используется как строка (см. следующий
пример), VBScript рассматривает ее (myVar) как
строковое значение.
myVar = "Stringl" + "String2"
Совершенно аналогично, VBScript может
рассматривать ту же переменную как числовую:
myVar =1 + 2
Строки и числа рассматриваются как подтипы
внутри типа variant. В таблицу 1.2 сведены подтипы VBScript.
Таблица 1.2. Подтипы VBScript-типа variant.
Подтип Описание
String Строка переменной длины (максимальная длина — примерно 2 миллиарда символов).
Byte Целое число между 0 и 225.
Integer Целое число между 32168 и 32767
Long Целое число между -2147483648 и 2147483647.
Single Число с плавающей запятой одинарной точности со следующими пределами: от -3.402823Е38 до
-1.401298Е-4 >для отрицательных и от 1.401298Е-4.сдо "3.402823Е38—для положительных значений.
Double Число с плавающей запятой двойной точности со следующими пределами: от -1.79769313486232Е30 .до
-4.94065645841247Е-3? .для отрицательных и от 4.94065645841247Е-32'1 до 1.79769313486232ЕЗС '—для
положительных значений.
Date (Time) Число, представляющее дату в пределах от 1/1/100 до 12/31/9999.
Boolean Логическое значение (True или False).
Empty Неинициализированная переменная. Значениями являются 0 для числовых и пустая строка ("") — для
строковых переменных.
Null Вариант содержит недопустимые данные (это не то же самое, что Empty).
Object Объект ActiveX.
Error Номер ошибки VBScript.
VBScript обладает набором функций преобразования,
которые дополняют встроенные методы parsetFIoat и
parselnt, определенные в JavaScript.
ПРИМЕЧАНИЕ
Как и JavaScript, VBScript — слабо типизированный язык.
Различные процедурные типы
В VBScript определены два различных процедурных
типа: подпрограммы и функции. Подпрограмма
обозначается при помощи Sub..End Sub и представляет собой
процедуру, не возвращающую значение. С другой
стороны, функция, обозначаемая парой Function..End
Function — это процедура, которая возвращает значение.
Например, следующая подпрограмма присваивает
текстовому объекту TextField строковый литерал "See Spot
Run", но не возвращает значения в вызываемую
процедуру-
<script type="text/vbscript">
Sub ccnvertText 11
document. MyForm. TextField. value =
"See Spot Run. "
End Sub
</script>
Рассмотрим пример VBScript-функции.
Подпрограмма >howText() вызывает функцию getTextO, которая
возвращает значение текстового объекта TextField:
<script type="text/vbscript">
Function getText()
getText =
document.MyForm. TextField .value
Jnd Function
Sub showText()
alert (getTextO)
EndSub
•c/script>
В JavaScript определен только один процедурный
тип — метод (также называемый функцией) в котором
ключевое слово function используется вне зависимости
от того, возвращается или нет значение в вызываемую
процедуру.
Программирование в VBSript
Для поверхностного ознакомления с
программированием в VBScript воспользуемся простейшим примером. В
листинге 1.4 выполняется умножение двух значений,
введенных пользователем, и отображение результата в
диалоговом окне предупреждения:
Листинг 1.4. Пример программы на VBScript.
<html>
dnead>
<ti tle>Wizard</ti tle>
<script type="text/vbscript">
Sub calculateValues О
Dim numl, num2, greaterNum, totalVal
numl = document. forml.Numberl. value
num2 = document. f orml. Number2 . value
totalVal = numl*num2
alert(totalVal)
End Sub
</script>
</head>
<body>
<hl>Stump the Wizard</hl>
<P>
l.ithout connecting to a l:\ackerid server or
JavaScript u World Wide Web
using a Java applet, the Browser Wizard
will multiply the two numbers . . .
</p>
<form name="forml" method="POST">
<pre>
First Number: <input type="text"
size="5" maxlength="5" name="Numberl">
</pre>
<pre>
Second Number: <input type="text"
size="5" maxlength="5" name="Number 2 " >
</pre>
<p>
<input type=button name="WizButton"
value="Multiply" onclick="calculateValues()">
</p>
</form>
</body>
</html>
На рис. 1.14 показаны результаты выполнения
этого сценария в Internet Explorer 5.0.
Для целей сравнения двух языков в листинге 1.5
приводится эквивалентный код на JavaScript.
_ __ .$j»:4=*W*A _ «ж»» жег da, Vft
» BJ С \WH00WS\0mfck4)\rsX«l JJM hfcri
Stump the Wizard
~з
Wilhcurcoimech ;toa ckaidscmei jtw^ a Java applet, the covser"Wizard will^Jtoptythe
two manbeis.
fiiat Kw*et: Il2 Hionn llnlvnct EupkirM
second Number: p
%
Ы. Tj
-WW»J
¥JBm. .
•Ш>5йчда*"
i)
РИСУНОК 1.14. Результирующее окно сообщений.
Листинг 1.5. JavaScript-версия кода, приведенного в
листинге Л А.
<html>
<head>
<title>Wizard</t tle>
<sc:ript type="text/javascript">
<!
function calculateValues () {
Глава 1
numl =
parseFloat(document.forms[0].Number 1 .value)
num2 =
parseFloat 'document, forms [0] .Number2 .value)
result = numl * num2
alert(result) ;
>
II—>
</script>
< fh ad>
<body>
<hl>Stump the Wizard</hl>
<P>
Without connecting to a backend server or
using a Java applet, the Browser Wizard
will multiply the two numbers .
</p>
<form name="forml" method="POST">
<pre>
First Number: <input type="text"
size="5" maxlength="5"
name="Numberl">
</pre>
<pre>
Second Number: <input type="text"
size="5" maxlength="5" name="Number2">
</pre>
<P>
<input type="button" name="WizButton"
value="Multiply"onclick="calculateValues()">
</p>
</form>
</body>
</html>
Резюме
Глава посвящена исследованиям среды разработки Web-
приложений и существующей методики объединения
отдельных частей Web-технологий. JavaScript — одно из
важнейших инструментальных средств в наборе Web-
разработчика. Было показано, что JavaScript взваливает
на себя множество реальных функций, возникающих в
течение цикла создания Web-приложений. JavaScript
неуклонно становится стандартным языком
Web-разработки. Поскольку JavaScript — язык, а не инструмент,
он зависит от программного обеспечения браузера. С
момента захвата браузерами Microsoft Internet Explorer
и Netscape Navigator крепких позиций на рынке,
надежность поддержки JavaScript существенно увеличилась.
Сейчас вы обладаете вполне достаточными
знаниями, чтобы успешно освоить материал следующей
главы, которая посвящена взаимодействию JavaScript и
HTML.
Совместная работа
JavaScript и HTML
В ЭТОЙ ГЛАВЕ
■ Основы HTML
■ Внедрение JavaScript в HTML
■ Создание JavaScript-кодов
HTML дает возможность создавать замечательные
статические Web-страницы. Хоть эти документы
зачастую и оказываются высокохудожественными,
интересными и во многом полезными, JavaScript позволяет
превратить статические Web-страницы в интерактивные и
сделать их более чувствительными к пользовательским
действиям и вводу. Расширение HTML-страниц с
помощью JavaScript усиливает их возможности, а также
существенно увеличивает гибкость кода.
JavaScript позволяет разработчику Web-сайта
создавать более динамические Web-страницы за счет
включения в существующую структуру HTML JavaScript-
сценариев. В этом случае разработчик может назначать
кнопкам некоторые процессы, выполнять вычисления
для введенных в форму данных либо обеспечивать
определенные действия при попадании курсора мыши
на элемент HTML или объект Document. В общем,
HTML становится значительно интереснее.
JavaScript обладает рядом преимуществ перед
формируемыми на сервере интерактивными документами
при помощи CG1, поскольку написанные на JavaScript
документы, вообще говоря, не зависят от обработки на
сервере, а следовательно, быстрее реагируют на
запросы пользователя и быстрее взаимодействуют с ним.
Для боле глубокого понимания работы JavaScript в
мире HTML стоит сделать обзор основ HTML,
преследуя цель посмотреть, какое он имеет отношение к
этому языку сценариев. Обладая устойчивой базой знаний
по HTML, разработчик сможет более полно овладеть
JavaScript и другими интерактивными возможностями,
а так же высокоуровневыми функциональными
возможностями HTML.
Основы HTML
Несмотря на очевидную простоту разработки простых
HTML-документов, включающих основные то и и
простые формы, преимущество применения HTML
состоит в возможности создания сложных документов на
основе более простых. Если задействовать более сложные
дескрипторы и связанные с ними атрибуты, сложность
и степень применимости документов будет возрастать,
а частота использования метода проб и ошибок -
уменьшаться.
Текущая ситуация
Стандарты HTML изменяются постоянно. Текущие
рекомендации (то бишь, стандарт) охватывают HTML 4.01;
однако, следующее поколение HTML — это XHTML. В
настоящее время XHTML 1.0 — предложенный вариант
стандарта, ожидающий принятия консорциумом Word
Wide Web Consortium (W3C) и основанный на
рекомендациях для HTML 4.01.
XHTML — это HTML, существующий в виде
приложения XML. После принятия XHTML в качестве
стандарта, прикладные XML-программы получат
возможность обрабатывать данные в XHTML-aok\ ментах.
Использование XML продемонстрирует, что XHTML
также позволяет включать в документы и другие
диалекты (типа MathML). В любом случае, развитие этих
технологий породит новые элементы, равно как и
усовершенствованные новые атрибуты элементов.
РЕСУРС
Рассмотрение XHTML выходит за рамки этой книги.
Подробную информацию о нем можно получить на
Web-сайте W3C по адресу http://www.w3.org.
Совместная работа JavaScript и HTMI
Глава 2
Отслеживая самые последние выпуски популярных
браузеров, HTML-разработчик будет равняться на эти
усовершенствования и применять их, как только они
станут доступны широкой публике. К счастью,
практически всегда расширения, включаемые в HTML 4.01/
XHTML 1.0 и последние выпуски браузеров, при
просмотре в более старых браузерах проблем не создают.
Однако всегда следует тестировать документ в старых
браузерах, поскольку гарантия правильного восприятия
новых дескрипторов в таких браузерах лишней не окажется.
Следует отметить, что существуют дескрипторы,
которые не являются частью стандарта или работают
не во всех браузерах. Пример такого дескриптора -
<marquee>; он работает в Internet Explorer, но не в
Navigator. Последний будет отображать просто текст
документа. С другой стороны, Navigator поддерживает,
например, дескрипторы <1ауег> и <ilayer>, невоспри-
нимаемые Internet Explorer.
Приведенные примеры иллюстрируют важность
написания четко определенного и сегментированного
документа и обязательного учета различий браузеров при
создании Web-страниц.
Основы HTML
Поскольку клиентский JavaScript работает бок о бок с
HTM L прежде чем приступать к созданию каких-либо
сценариев, необходимо получить основные знания о
структуре НТМ L-док мента и его дескрипторах. Знание
основ HTML существенно упростит создание
Web-страниц. Web-страница состоит из текста страницы,
дескрипторов, и может иногда содержать комментариев.
Текст — это понятно и без пояснений. Разработчик
пишет текст, который появляется на Web-странице.
Часть процесса дизайна Web-страниц, которая требует
более подробных пояснений, — это использование
дескрипторов, всегда начинающихся с символа < и
завершающихся символом >. Дескрипторы определяют поведение
Web-страницы, задают внешний вид текста и позволяют
создавать сложные документы для Web-браузера.
Дескриптором может быть одиночный маркер,
например, <hr> —для горизонтальной линии, или <br> —
для перевода строки; подобного рода дескрипторы
иногда называют пустыми. Пустые дескрипторы не
обязательно каким-то образом форматируют окружающий
текст, хотя и способны корректировать разметку и
дизайн HTML-документа.
С другой стороны, <td> нельзя рассматривать как
пустой дескриптор. Он используется для указания на то,
что текст, следующий после этого дескриптора, должен
помещаться в ячейку таблицы. Дескрипторы такого
типа требуют наличия закрывающего дескриптора,
уведомляющего о завершении их действия. Эти
дескрипторы называются контейнерными, поскольку всегда содержат
информацию (обычно текст) между открывающим и зак-
1 1-158
рывающим дескрипторами. Исследуя приведенный ниже
пример, обратите внимание, что закрывающий
дескриптор перед именем содержит символ /:
<Ь>Зтот текст ста! ится полуэ!мрным</Ъ>
Закрывающий дескриптор идентичен открывающему,
за исключением того, что он содержит дополнительный
символ.
Более сложные дескрипторы могут также иметь
атрибуты, которые определяют поведение дескриптора.
Если дескриптор располагает подобного рода
атрибутам, они необходимы дескриптору для исполнения
определенных требований. Например, <table width="3">
определяет таблицу с шириной 3.
Расположение дескрипторов в документах иногда
имеет очень важное значение. Некоторые дескрипторы
необходимо помешать внутрь других. Например,
дескриптор <input> должен находиться внутри <form>.
Некоторые дескрипторы могут включать в себя другие, но
это не является обязательным условием (примером
может послужить дескриптор <head>).
Что касаемо комментариев, они суть ни что иное
как примечания разработчика по поводу
собственного документа, которые браузером не отображаются.
HTML-комментарии начинаются с символа <!-- и
заканчиваются на —>. Ниже приводится пример HTML-
комментария:
<>-
вот вам и комментарий
Структура HTML-документа
Структура HTML-документа зачастую очень важна. При
неправильном размещении дескрипторов
увеличивается вероятность возникновения нежелательных и
неожиданных эффектов. Базовый HTML-документ показан на
рис. 2.1. Документ всегда должен начинаться с <html>
и завершаться </html>, что несложно заметить в
листинге 2.1. Два основных дескриптора внутри
упомянутых — <head> и <body>. Внутри них можно размещать
остальные дескрипторы.
РИСУНОК 2.1.
Базовый
HTML
документ,
показанный в
листинге 2.1.
Heading of Basic Document
1 О»
2. Two
3 Three
•i Foa
TiSJtt.
rill «IE «ЛЭ i
-cdl-1: eel? «K
Thii is a Ba HTML >cum«it ibucDre
. "*"" №S#*#tt£.: .
Знакомство с JavaScript
Часть I
Листинг 2.1. Базовая HTML-страница.
<html>
<head>
<title>Basic HTML document</title>
<script type=" text/javascript1 'X/script>
</head>
<body>
<hl>Heading of Basic Document</hl>
<form>
<input name="EnterBtn" type="SUBMIT">
</form>
<ol type=l>
<li>One</li>
<li>Tw<X/li>
<li>Three</li>
<li>Four</li>
</ol>
<table width="3n height="3" border>
<tr>
<th colspan=,,3">Table</th>
</tr>
<tr>
<td>celll</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
</table>
<P>
■This is a Basic HTML document structure
</p>
- /b:dy>
</html>
Основное об атрибутах
Как упоминалось ранее, многие дескрипторы имеют
атрибуты. Атрибуты используются для определения
отображения или исполнения дескриптора.
Атрибутами обладают далеко не все дескрипторы, а некоторые
из них могут иметь атрибуты с одинаковыми именами.
Атрибуты, перечисленные в табл. 2.1, используются во
множестве НТМ L-дескрипторов. Функциональность этих
атрибутов от дескриптора, их использующего, не зависит.
Внедрение JavaScript в HTML
JavaScript-сценарии интегрируются в
HTML-документы с использованием пары дескрипторов <script> и
</script>. HTML-документ может содержать множество
подобных пар, причем каждая из них зачастую
заключает в себе более одного набора операторов JavaScript.
Для <script> обязательно требуется присутствие </script>.
Атрибут type используется для определения языка, на
котором реализован сценарий, а атрибут src — для
задания имени внешнего файла, являющегося источником
JavaScript- программы.
Атрибуты дескриптора <script>
Для лучшего понимания принципов функционирования
дескрипторов <script> выполним краткую сводку
различных атрибутов в табл. 2.2. В разделах, приведенных
после этой таблицы, можно отыскать более детальную
информацию, касаемую каждого из перечисленных
атрибутов.
Таблица 2.1. Атрибуты, используемые в различных дескрипторах.
Атрибут Описание
class Определяет класс, к которому принадлежит HTML-дескриптор.
id Определяет некоторое уникальное значение для элемента при ссылке на полный документ.
name Присваивает имена экземпляру дескриптора. Это имя часто используется JavaScript для ссылок на конкретные
элементы либо дескрипторами <а> для организации ссылок в пределах одного документа.
style Определяет информацию о стиле.
Таблица 2.2. Атрибуты дескриптора <script>.
Атрибут Описание
defer Это атрибут логического типа, который используется для уведомления браузера о том, генерирует ли
JavaScript-сценарий какое-либо содержимое.
language Отвергнутый в настоящее время, однако применяемый ранее атрибут для определения языка и версии,
используемых внутри дескрипторов.
src Этот атрибут огределяет URL внешнего исходного JavaScript-файла.
type Атрибут, пришедший на замену language; он сообщает браузеру, какой язык используется внутри дескрипторов.
Совместная работа JavaScript и HTML
Глава 2
defer
Атрибут defer — это простой атрибут, который
сообщает браузеру, будет ли код, расположенный между
открывающим и закрывающим дескрипторами <script>,
генерировать какое-либо содержимое. Другими словами,
используется ли в коде метод document.write(). Ниже
приводится пример использования данного атрибута:
<script type="text/javascript" defer>
< ! —
// Просто объявим переменную; пока не стоит
// ее выводить на страницу
var myVar = 500;
II—>
</script>
language
В самой последней версии языков HTML и XHTML
атрибут language отвергнут. Традиционно он
использовался для определения имени языка и версии JavaScript,
которые использовались для кода, расположенного
между парой <script>. Формат этого дескриптора
выглядит так:
<script language="JavaScript">
Таблица 2.3. Текущие значения атрибута language.
Значение language Описание
JavaScript Представляет JavaScript 1. и интерпретируется браузерами Navigator 2+ и Internet Explorer 3+.
JavaScriptl.1 Представляет JavaScript 1.1 и интерпретируется браузерами Navigator 3+ и Internet Explorer 3+.
JavaScriptl .2 Представляет JavaScript 1. ~" и интерпретируется браузерами Navigator 4+ и Internet Explorer 4+.
По сравнению с 1.1, в JavaScript |.2изменен способ, в соответствие с которым Navigator
обрабатывает некоторые операторы.
JavaScriptl .3 Представляет JavaScript 1 Зи интерпретируется браузерами Navigator 4.05+ и Internet Explorer 5+.
JavaScriptl.4 Представляет JavaScript 1.4 и интерпретируется HotJava 3+ и некоторыми ранними альфа-версиями
(до версии Ml! iMozilla/Navigator5.
JavaScriptl.5 Представляет JavaScript 1.5и интерпретируется браузером Mozilla/Navigator beta 1.0(М12+-).
Листинг 2.2. Одновременное использование разных версий JavaScript в атрибуте language.
<html>
<head>
<ti 1;1е>Определение версий JavaScript</title>
</head>
<botJ r>
<script language="JavaScript">
/ / Этот раздел будут читать только браузеры с JavaScript 1.0
document.write {'Браузер поддерживает JavaScript 1.0<br>');
</script>
<script language="JavaScriptl.1">
// Этот раздел будут читать только браузеры с JavaScript 1.1
document.write('Браузер поддерживает JavaScript l.l<br>'),
</script>
<script language=" JavaScriptl. 2 ">
// Этот раздел будут читать только браузеры с JavaScript 1.2
doc jment.wri te ( 'Браузер поддерживает JavaScript 1.2<Ъг>'),-
</script>
ЕШ
Приведенная выше запись уведомляет браузер, что
сценарий необходимо выполнять в режиме,
совместимом с JavaScript 1.0. Для других версий JavaScript,
например, 1.1, следует записать так:
<script language=" JavaScriptl. 1">
В табл. 2.3 перечисляются значения, которые можно
использовать с атрибутом language. Она также
показывает, какие браузеры будут интерпретировать то или
иное значение.
СОВЕТ
Если атрибут language не определен, браузеры
принимают JavaScriptl .0. Кроме того, текущая версия
браузера Opera, кажется, вообще игнорирует этот
атрибут, поскольку он был в свое время отвергнут.
Используя атрибут language, можно определить
множество наборов функций JavaScript. Браузеры,
поддерживающие JavaScript 1.1, смогут воспользоваться
преимуществами более новых функций, которые
недоступны в старых версиях браузеров. Простейший метод
задействования преимуществ подобного рода показан в
листинге 2.2.
Знакомство с JavaScript
Часть I
<script language="JavaScriptl.3">
// Этот раздел будут читать только браузеры с JavaScript 1.3
document:.write ('Браузер поддерживает JavaScript 1.3<br>');
</script>
<script language^"JavaScriptl. 4">
// Этот раэдел будут читать только браузеры с JavaScript
document:.write('Браузер поддерживает JavaScript 1.4<br>');
</script>
1.4
<script language="JavaScriptl. 5">
// Этот раздел будут читать только браузеры с JavaScript 1.5
document.write( 'Браузер поддерживает JavaScript 1.5<br>');
</script>
</body>
</html>
src
Существуют два пути интегрирования операторов
JavaScript в HTML-документ. Выбор пути зависит от
требований при просмотре и изменении кода. Первый
вариант позволяет рассматривать все коды
одновременно и предполагает написание операторов JavaScript
непосредственно в HTML-документе. Все эти операторы
встраиваются в HTML-страницу между парой
дескрипторов <script>; они носят название встроенных (inline)
сценариев. Второй вариант (доступный только в JavaScript
1.1 и старше) предполагает сохранение JavaScript-кода в
отдельном файле с расширением js. В таком случае
появляется возможность обращения к файлу в
открывающем дескрипторе <script>.
Ниже показан первый вариант—BCTpaHBaHHeJavaScript
BHTML-страницу:
<script type="text/javascript">
function options () {
document.write("Встраивание кода");
>
</script>
А сейчас — вариант с размещением сценария во
внешнем файле:
<scripl src="/jscripts/myscript.js"X/script>
Во втором варианте потребуется создать файл с
именем myscript.js, который будет содержать одну строку
кода:
document, write ("Вызов из отдельного файла")
В случае использования последнего варианта между
парой дескрипторов <script> желательно поместить один
оператор, тем самым обеспечивая пользователям
возможность обратной связи на случай, если файл с
расширением . .оказывается некорректным или недоступным.
Иначе пользователь будет лицезреть неправильное
поведение Web-страницы, не понимая его причин.
При загрузке сценария из отдельного файла
необходимость в указании атрибута language не возникает до
тех пор, пока применяется файл с расширением .js.
Пользуясь этим методом, можно изменять JavaScript-код
без какого-либо открытия и риска возникновения
нежелательных изменений в HTML-страницах.
Следовательно, код подобного рода представляется более
модульным и персместимым, поскольку он размещается за
пределами HTML-документа.
Отрицательная сторона метода состоит в том, что
приходится модифицировать два набора кода, в
зависимости от изменений в коде JavaScript. Например, если
в JavaScript-коде изменяется имя функции, следует не
забыть изменить соответствующее имя в обращениях к
этой функции и в HTML-коде. Еще один минус связан
с тем, что внешние JavaScript-файлы не могут содержать
дескрипторы HTML; они должны содержать только
операторы JavaScript.
type
Те. кто уже работал с JavaScript ранее, возможно,
говорили: "Что это за птица такая, атрибут type? Я думаю,
здесь следует использовать language." Да, в какой-то
степени это правильно.
Атрибут language был первым атрибутом, который не
только определял язык в дескрипторе <script>
например, javascript или vbscript, но также и версию, скажем,
javascriptl.l или javascript 1.5. Если просмотреть текущий
стандарт HTML или предложенные рекомендации по
XHTML, несложно заметить, что от атрибута language
было решено отказаться, а вместо .iero использовать type.
Значение, указываемое в этом новом атрибуте очень
смахивает на указание в качестве содержимого
внешнего исходного файла на JavaScript (js). Так, для JavaScript
необходимо задать type="text/javascript", а для VBScript —
type="text/vbscript". Далее показано, как это работает.
Рекомендации HTML 4.01 говорят, что в часть <head>
документа следует помещать дескриптор <meta>,
который будет определять заданный по умолчанию язык,
используемый во всех сденариях. Это выглядит так:
<meta http-equiv="Content-Script-Type"
content="text/javascript">
Здесь можно заменить text/javascript на text/vbscript
или любой другой язык, который планируется
использовать. Если подобную строчку не указывать вообще,
браузеру потребуется проверить элемент Content-Script-
Type в заголовке HTTP-запроса. Формат выглядит
следующим образом:
Content-Script-Type: text/javascript
Опять-таки, text/javascript можно заменить на
конкретный тип языка, заданный по умолчанию для
данной Web-страницы.
Теперь, когда тип языка по умолчанию установлен,
атрибут type будет применяться для отмены значения
по умолчанию. Это позволяет использовать сразу
несколько языков сценариев в одном и том же документе.
Например, можно установить Content-Script-Type
равным text/javascript, а затем указать type="text/vbscript"
в одном из дескрипторов <script>, в пределах которого
в качестве языка будет использоваться VBScript.
Очевидно, что этот атрибут будут учитывать только
новые браузеры, поэтому применять его следует с
особой осторожностью. Возможно, через пару лет все
встанет на свои места и большинство браузеров будут
поддерживать этот новый метод. Однако сейчас
рекомендуется использовать в дескрипторе <script> как
type, так и language.
Просмотр кода JavaScript
Поскольку код на JavaScript можно записывать
непосредственно в коде HTML, просматривать и
редактировать его легко. Вероятно, вам уже знаком пункт меню
браузера Document Source (или Page Source), который
обеспечивает просмотр исходного текста
HTML-страницы (он обычно находится в меню View).
При просмотре исходного кода документа можно
также исследовать JavaScript-код, включенный в
документ, как показано на рис. 2.2. (Здесь, очевидно, как раз
тот случай, когда операторы JavaScript вызываются из
файла „js вместо помещения их непосредственно в
документ. Все что можно здесь наблюдать — это
обращение к файлу Js в дескрипторе <script>.) Для JavaScript
не требуется специальное средство просмотра, и
поскольку характер языка — интерпретирующий, а не
компилирующий, код отображается в исходном тексте
документа.
ПРИМЕЧАНИЕ
Некоторые браузеры, в особенности Navigator 4, при
выборе пункта меню View Source отображают лишь
результаты выполнения кода на JavaScript. В зтих
случаях для просмотра и пошагового выполнения
сценариев рекомендуется воспользоваться отладчиком
Netscape JavaScript Debugger, который обсуждается
в главе 34.
Совместная работа JavaScript и HTMI
Глава 2 Ев^И
- twrncKMaWl-Notepad BCD
■I '.£A;:iS««K ю*".-.! i:>:-'?.'• - '■" ' *■!■ -i' V'™ '''■"_
!-^script лапдиаде-" JavaScript" src-'/llbrary/toolbar/cn-us/local.js'X/scrlpt>
<t— Start: ToolBar for daan-level browsers—>J
<SPftn lb- - rDDOMnl.eUelviii"> = 3
UABLE UIDTH-'IOOV CELLPADD1NC-U CELLSPACINC-0 DDRDER-0 UCCULOR-'IFFFFFF*> JJ
<TR>
<TD UAWCH-'TDP' IIEICHT-oD R0USFAN-2XA
HREF-'/lsapl/gonscon.aspTtarget-/' TARGET-' top'XIHG
SRC-'/llbrary/hOHepage/lnage5/bnr_all_glf' UIDTH-2S0 HEICHT-60
ALT-'AlcrDsuFi.cun How' BORDER-QX/AX/TD>
<TD UALICH-'TOP1 ИЕ1СИТ-2В ALICH-'RIGHT'XIMC
SRC-'/llbrary/tODlbar/lnages/curue.glF' UIDTH-1H IIEIGRT-20 ALT-"
DORDER-OX/Tb>
<TD BGCOLOR-'ROOOOOO' HEICHT-20 UALICH-'HIDuLE' ALICH-'RIGHT' NOVRAP
COLSPAH-?>
<FDHT COLOR-'IFFFFFF' FACE-'Verdana. Arial' SIZE-1>
<B>
bnbsp;onb5p:<A
SIVLE-"color:BFFFFFF;text-decoration:none:'
IIRCF-'/lsapl/gon5con.asp?target-/catalog/deFault.a5p7subid-22*
TARCET-* top'XFONT C0L0R-'IFFFFFF*>A11 Product5</F0NTX/A>finb5p;cnb5p;<F0HT
COLOR-" iFFFFFF' > | </FOHT>
Gnbsp;cnb5p:<A
STVLE-'color:iFFFFFF:teift-decoratlon:none;'
HREF-'/lsapl/gONSCOfl.aspTtargeWsupport/' TRHCET-'_top*XFOHT
color- ' AFFFFFF ■ >Support</FOHTX/n>r.nbsp;cnbsp;<F0HTC0LOR- ' bffffff *>i </foht>
Gnbsp;finbsp;<A ,
РИСУНОК 2.2. Просмотр JavaScript-кода.
Создание JavaScript-кода
Основы создания JavaScript-кода весьма просты.
Достаточно только создать основную HTML-страницу (или
отредактировать существующую) и затем вставить
дескрипторы <script> в разделы <head> или <body>.
Функции и "ругис элементы, которые применяются ко всей
Web-странице, лучшие помещать в раздел <head>. При
наличии необходимости генерировать текст для Web-
страницы при помощи JavaScript, это лучше выполнять
в разделе <body>.
Выполнение сценариев
Выполнение JavaScript-сценариев начинается в разное
время, в зависимости от того, как они написаны. Если
сценарий влияет на содержимое Web-страницы,
например, вызывает метод document.write(), он выполяется по
мере своего появления. Кроме того, существует
обработчик событий onLoad, который выполняется только
после полной загрузки HTML-документа в браузер.
Если JavaScript-сценарии сохранены в отдельном
файле, они анализируются во время загрузки
Web-страницы и перед любыми действиями пользователя.
Все операторы JavaScript, содержащиеся в теле
функции, интерпретируются, однако запуск функции не
происходит до тех пор, пока она не будет вызвана
каким-то JavaScript-событием. Операторы JavaScript,
находящиеся за пределами тела функции, выполняются
после загрузки документа в браузер, но во время
визуализации документа. Результат выполнения станет
очевиден для пользователей уже при первом просмотре
Web-страницы.
Загрузка Web-страницы
Операторы JavaScript, которые требуют немедленной
обработки, выполнятся сразу после загрузки
Web-страницы, но до ее отображения в браузере. Код в листинге
Знакомство с JavaScript
Часть I
2.3 обеспечивает отображение диалогового окна
предупреждения после открытия документа. Вызова функций
не происходит — операторы JavaScript просто
обрабатываются по мере загрузки Web-страницы.
Листинг 2.3. Отображение диалогового окна
предупреждения за счет непосредственного вызова.
<html>
<head>
<title>Dialog Test</title>
<script type="text/javascript">
<! —
alert ("Dialog called") ;
// -->
</script>
</head>
<body>
<Ь>
Test page of default JavaScript call
</b>
</body>
</html>
Функция onLoad может рассматриваться как
исключение из этого правила. В данном случае onLoad
вызывается не в результате генерации события
пользователем, а в результате события, связанного с собственно
загрузкой документа в браузер. Диалоговое окно
предупреждения будет появляться непосредственно после
зафузки Web-страницы (см. рис. 2.3), и это при том, что
окно не вызывается напрямую. В листинге 2.4
показана функция opendoc(), вызываемую самим документом
после генерации его события Load. Оба листинга (2.3
и 2.4) обеспечивают одни и те же результаты,
достигаемые, однако, двумя разными способами написания
сценария.
Листинг 2.4. Отображение диалогового окна
предупреждения через onLoad.
<html>
<head>
<title>Dialog from onLoad</title>
<script type="text/javascript">
< ! —
functionopendoc( ) {
alert ("Dialog called ")
)
// —>
</script>
</heacl>
<body onload="opendoc () ">
<b>
Test page of onLoad JavaScript call
</b>
</body>
</html>
Пользовательские действия
Второй метод, в соответствие с которым выполняются
операторы JavaScript, — это вызов функций. Любой
оператор, содержащийся в функции, не будет выполняться
до тех пор, пока JavaScript-событие не вызовет эту
функцию. JavaScript-события генерируются на
HTML-странице многими способами, включая действия
пользователя и явные вызовы событий непосредственно изнутри
сценария. Пользовательские действия в документе
способны генерировать JavaScript-события в многих
случаях, даже в самых неожиданных. Всегда следует
тщательно протестировать все операторы JavaScript, дабы
убедиться, что пользовательское взаимодействие с Web-
страницей не вызывает нежелательные события.
*:
«. a i
i3 :J1
'lost page of onLoad JavaScript Д]
" 1S3
^n s&. ***** = jjdcvim»* Рич -v=r; ^ n £■.:&* iS- _ A-
РИСУНОК 2.З. Диологопс окно предупреждения в
Navigator 4.7.
В главе 14 JavaScript-события, их реализация и
встраивание в HTML-код рассматриваются более подробно.
В листинге 2.5 приведен код, который обеспечивает
отображение диалога в результате нажатия кнопки.
Листинг 2.5. Вызов функции для отображения
диалога.
<html>
<head>
<title>Dialog from function call</title>
<script type="text/javascript">
<! —
function opendoc () {
alert ("Dialog called by Push Button") ;
)
// — >
</script>
</head>
<body>
<b>
Test page of function called from Push Button
</b>
<form method="POST">
<input type="Button" name="BUTTONl"
va±ue="PUSH" onclick="opendoc () ">
</form>
Совместная работа JavaScript и HTML
</body>
</hfcml>
На рис. 2.4 показаны результаты вызова функции.
'' t» © D fl J& 0
■; t&irV -5*1*1 ■!**-* Челн ,.$№cV Fo>ori*V ОДВД
! Test page of fanetiun called from Push Button
VjXftJl
Г1итя1?ч-ттчяииг1
■ ' ^0«tflt*iftii*fi*6uK«='
-;-0K ~j i
eice*" i „; ._ ,. - T,
r'"* t
Piirl
- - jfej
О
-6"
J (it»
^ hbtUmi*tw"
J
J
РИСУНОК 2.4. Диалоговое окно предупреждения в Internet
Explore 5, вызванное событием submit.
Пользовательские действия или явные вызовы
событий — это часто используемые методы выполнения
JavaScr pt-кода. Исключительное преимущество JavaScript
заключается в том, что он способен увеличивать
количество взаимодействий пользователя с
HTML-документом, поскольку обеспечивает способ немедленной
обработки и оценки вводимой пользователем информации.
Учет браузеров, не поддерживающих
JavaScript
Быстрые темпы изменений HTML и JavaScript требуют
предельно осторожного отношения к браузерам, которые
не поддерживают создаваемые документы. Не все
браузеры поспевают за новыми изменениями в HTML,
поэтому программисты вынуждены делать документы
максимально дружественными по отношению ко всем
браузерам и средам.
СОВЕТ
Тестируйте свои HTML- и JavaScript-страницы в как
можно большем количестве браузеров; такая
политика приведет к максимальной стабильности и
применимости документов.
Хотя применение JavaScript делает
усовершенствования HTML доступными для пользователей, необходимо
всегда помнить, что старые браузеры не способны
поддерживать JavaScript-код. Если окружить
дескрипторами комментария HTML все операторы внутри пары
Глава 2
<script> и </script>, более старые браузеры смогут
отобразить Web-страницу, не показывая JavaScript-код.
Пользователи не смогут получить полное впечатление от
Web-страницы, но, по крайней мере, в браузере не
появится нежелательный текст. Формат использования
этих комментариев таков:
ocript type="text/javascript">
<!— скрыть код от старых браузеров
// здесь начинается собственно код
// а здесь код завершается —>
</script>
Листинг 2.6 демонстрирует способ сокрытия кода
JavaScript от старых браузеров. Обратите внимание, что
в этом листинге применяются два следующих друг за
другом оператора HTML-комментариев, а строки кода
на JavaScript размещаются внутри них.
Листинг 2.6. Сокрытие JavaScript-сценариев от
старых браузеров.
<html>
<head>
<title>Hide From Browser</title>
«script type="text/javascript">
<! — Скрыть
document.write ("I can view JavaScript code")
// Завершить сокрытие —>
</head>
<body>
Content goes here.
</body>
</html>
Обратите внимание, что в последней строке
комментария HTML используется дескриптор
JavaScript-комментария //, поэтому JavaScript не интерпретирует этот
оператор. В случае отсутствия этих маркеров
комментария JavaScript будет пытаться обрабатывать оператор
и после оценки сгенерирует ошибку.
В листинге 2.7 показан текст базовой
Web-страницы, с которой стоит начать. Обратите внимание на
нормальные HTML-дескрипторы и на <script>,
присутствующий в разделе <head> документа.
Листинг 2.7. Базовый JavaScript-документ для
начинающих.
html>
<head>
<title>My first HTML page</title>
<script type="text/javascript">
<! — Скрыть
//Здесь должен находиться код
// Завершить сокрытие—>
</script>
</head>
<body>
<!-- Здесь находится содержимое страницы —>
</body>
</html>
Открывающий дескриптор <script> должен включать
в себя атрибут type для определения того, что сценарий
внутри дескрипторов реализован именно на JavaScript.
Помните, что до тех пор, пока рекомендации HTML
4.01/XHTML 1.0 не будут в полном объеме
реализованы в наиболее распространенных браузерах, можно
также использовать и атрибут language.
Написание кода
Как и в любом другом языке программирования,
операторы JavaScript могут быть записываться в
соответствие с различными методами. Очевидно, практика
определения функций JavaScript в разделе <head> и
последующий вызов этих функций в разделе <body> —
самый эффективный способ использования
преимуществ объектов JavaScript.
Сам по себе язык JavaScript не труден, и
разработчики, владеющие технологией
объектно-ориентированного программирования, не встретят слишком много
препятствий. Как только будут схвачены основные
концепции объектной методологии, создание функций
JavaScript становится достаточно простым делом.
Посмотрите на следующий пример:
document.write ("Я меру видеть кед на
wJavaScript • ") ;
Оператор document.write() как-будто бы говорит:
"Записать такой-то текст в моем документе".
ПРИМЕЧАНИЕ
Несмотря на то что операторы HTML не
чувствительны к регистру (хотя в предложенных рекомендациях
XHTML подобное требование присутствует),
операторы JavaScript — чувствительны. Не забывайте
проверять регистр символов кода, чтобы гарантированно не
иметь проблем из-за столь досадного, но все же
распространенного недоразумения.
Приступая к написанию кода, памятуйте о
следующем:
Повторное использование кода
Удобочитаемость
Простота внесения изменений
Дескрипторы JavaScript можно использовать как в
разделе <body>, так и в разделе <head> документа. Как
упоминалось ранее, помещение дескриптора <script> в
<head>, а не в <body> гарантирует, что все операторы
будут просмотрены (и, в случае необходимости,
выполнены) еще до того, как пользователь начнет
взаимодействовать с документом. Не следует забывать и о том, что
помещение операторов сценария в раздел <body>
документа имеет массу опасных последствий.
Даже зная конкретный список дескрипторов и
порядок построения документа, нельзя заранее
гарантировать, будет ли пользователь взаимодействовать со
сценарием предполагаемым способом или отреагирует на
Web-страницу прежде, чем сценарий полностью
загрузится или выполнится. В этом случае предполагаемый
эффект не будет достигнут. (Кому нужна такая ситуация
после всех затраченных усилий?)
Практика определения JavaScript-функций и затем
вызов их из раздела <body> гарантирует, что все
функции оцениваются прежде, чем пользователь начнет
взаимодействовать с Web-страницей. Листинг 2.8
иллюстрирует эту практику, а листинг 2.9 показывает
альтернативный путь.
Листинг 2.8. Вызов функции. _
<html>
<head>
<title>Iage with Pushbutton</title>
<script type="text/javascript">
<! —
function pushbutton () {
alert ( "pushed") ;
}
// — >
</script>
</head>
<body>
<form>
<input type="SUBMIT" name="BUTTONl"
value="PUSH" onclick="pushbutton ()">
</form>
</body>
</html>
Листинг 2.9. Помещение JavaScript-сценария
непосредственно в обработчик событий onclick.
<hfcml>
<head>
<title:-Page with Pushbutton</title>
</head>
<body>
<form>
<input type="SUBMIT" name="BUTTONl"
value="PUSH" onclick="alert( 'pushed') ">
</form>
</borty>
</html>
Листинг 2.9 демонстрирует возможность помещения
операторов JavaScript непосредственно в дескрипторы
HTML. Соотнесем недостатки этой практики с
принципами написания кода, о которых было сказано ранее.
Изменение и многократное использование кода в
дескрипторах затруднено. Требуется найти дескриптор и
затем вырезать и вставить код. Только тогда его можно
будет многократно использовать или преобразовать в
вызовфункции.
Удобочитаемость и простота модификации как
непосредственно для вас, так и для последующих
разработчиков, также существенно снизится, если
JavaScript-операторы для функций не поместить в раздел <head>.
Бесконечные поиски кода, который на самом деле
отыскивается легко, в конце-концов выведут из
душевного равновесия даже самого терпеливого.
Стили столь же важны в JavaScript, как и в любом
другом азыке программирования. Сохранение
строгости стиля, своевременное определение переменных и
аккуратность форматирования в будущем сократят время
разработки документов.
Создавая сценарий JavaScript, функцию за
функцией, кусочек за кусочком, можно сформировать
устойчивые интерактивные документы, которые будут обладать
большими функциональными возможностями.
Поскольку JavaScript интерпретируется, но не компилируется,
процесс отладки не всегда полностью прозрачен.
Множество проблем или ошибок не будет очевидно до тех
пор, пока документ не подвернется серьезному
тестированию. Я бы рекомендовал, чтобы кто-то другой вместо
разработчика занялся тестированием Web-страницы для
большей уверенности, что учтены абсолютно все
ситуации.
Выполнение сценариев
Очевидно, что JavaScript столь же просто загрузить, как
и НТМ L-документ. Для выполнения сценариев нет не-
Совместнаяработа JavaScript и HTML flPVBfl
Глава 2 |Ш
обходимости явно вызывать код. Поскольку код
размещается в HTML-доку менте или вызывается в первой
строке сценария, сценарий будет выполняться во время
загрузки Web-страницы. Помните, что сразу же после
загрузки не обязательно выполняется весь код. Код,
связанный с вызовом функции, при загрузке
Web-страницы только оценивается, но не выполняется до тех пор,
пока функция не вызывается явно в результате
генерирования JavaScript-события. Код, не связанный с
вызовом функции, выполняется после полной загрузки
Web-страницы, но до того как пользователь получит
возможность взаимодействовать с ней.
Резюме
Очевидно, что хотя язык написания сценариев JavaScript
и не зависит от HTML, оба они тесно связаны, если речь
идет о проектировании, написании и выполнении
документа в полном объеме. Код JavaScript можно
записывать непосредственно в коде HTML, расширяя таким
образом текущие возможности Web-документов. Код
просматривается и загружается вместе с HTML.
Усовершенствования, постоянно появляюшиеся в
самом HTML, увеличивают функциональные
возможности JavaScript-кода. Это позволяет улучшить
документы, сделать их более интерактивными и
дружественными по отношению к пользователю.
Создание собственного
набора инструментальных
средств JavaScript
В ЭТОЙ ГЛАВЕ
Необходимые инструментальные средства
Процесс разработки на JavaScript
Серверные инструментальные средства JavaScript
Подобно любому языку разработки, JavaScript
требует определенную среду проектирования. В то время
как язык Java связан со интегрированной средой
разработки (IDE) Symantec's Visual Cafe, для JavaScript
подобного рода среда недоступна. Благодаря изобилию
Web-инструментов, можно скомпоновать собственный
набор инструментальных средств. В данной главе
подробно исследуются различные доступные
инструментальные средства разработки кода как для клиентской,
так и для серверной сторон.
Необходимые инструментальные
средства
Перед началом разработки все необходимые
инструментальные средства потребуется скомпоновать. Например,
при создании приложений в Delphi, Visual Basic,
VisualAge for Java набор инструментальных средств,
скорее всего, будет относительно невелик, поскольку
упомянутые визуальные инструменты уже содержат все
необходимое для работы. Однако это не относится к
JavaSctipt. Для создания среды разработки
потребуются следующие основные инструментальные средства:
• JavaScript-редактор для написания сценариев
• HTML-редактор для создания страниц
Web-браузер для тестирования сценариев и
приложений
• Отладчик сценариев для обнаружения ошибок
JavaScript-редакторы
Выбор редактора для разработчиков программного
обеспечения равносилен выбору клюшки хоккеистом.
Поскольку универсального рецепта не существует,
рассмотрим краткий обзор средств написания JavaScript-
кода; возможно, это окажет необходимую помощь при
выборе из множества текстовых, HTML- и JavaScript-
редакторов.
Текстовые редакторы
Поскольку JavaScript-код располагается внутри HTML-
страниц, то для эффективной разработки потребуется
текстовый редактор. Если говорить о Windows, то
рекомендуется воспользоваться TextPad (рис. 3.1) или
Notepad. Разработчики, установившие у себя Unix,
могут задействовать один из редакторов emax или vi, а для
пользователей Macintosh вполне неплохим ныбором
будет SimpleText или BBEdit, показанный на рис.3.2.
Использование стандартного текстового редактора
обладает своими преимуществами — соответствующее
программное обеспечение на компьютере уже
установлено.
Ё, TcMPad •ICATeepXSneloIe'Unde.hUJ]
i№ t«_5**
iJfiH* J^cJi №c>"V'£ л~*"> JrVM* --Up*
i У,£Гу& &=&[&.тл ,,*'$!,. . . -«^ , .. -*л, ._
\~ "" "■■ т~'
Vtittthrt
№
■ IXJCT "Л HTHL ГОВ11Ч. - ."J. -■! . HTHT . l- fen - -^r.* 1У
i *tille>Se*ToTee cc*f^litlt>
СЬр^ъ
; ГЛГ^ЛГ. t*>'~ ?
*-..... :■■- .". J»
JllTML I41
1 fiiffi'Pag» J _
Д. 1цг toner"
Awh« Твя"
ftjwW'
Ek-rt AtUcn*
fcart.-EiB.>."L«'ai
fxxy.-ZmttMi*'
■ Ek** Otafcn"
:Eb*k-C«toEiftW
' Eldcfc-Defeutt*
■ Ekrfc'DdMnba
" Etoc* DfrPtO "
- Ektt-Ho^^JBJe
Elect-OrdMdLrf
: Bks* ^at&wfa
i Bod1. -fteformlBfli]"
: Elfck-QuUiiKri-
tAxii-SmflBGifprt
fikpi Umdn^Lfd
; ии-лн
СЫш'ШкД
Color В*ж
Cs*r Fichu
tctt.-CiBL^
>
>
p-
с table »iath» j.CO'-'* col*- j* crel lipeting- " eel ltaridi.ni
<m *iH3-*hj^e'lirr jit" alb*' ' vailth-*4"»~ baish
< ^— End h*№)ar —,
'4d>
ytr-J
tr align» "I**** lullgit» tnji'i
■ 4frpJ.*! ЯШМ >
«td «dth-"lSITi
<aeg hc^'iidwi g-it" elt* ' width»' height-'
^trt»
■: 1— l№ (Jjntt4it
ctd>
(table cala»"1 *
*tr Al-i^n"* Iti I * Y*li-gnm~iai]' '
<id colejtait*"J">
IliL/ " Л ,.
_1П ж
»Д
£
'" £
ji
• tr-iA-
- •*■!•*<
11-i'y
£
РИСУНОК 3.1 В качеств JavaScript-редактора можно
использовать TextPad.
Iji* [nil Т1!»1;Ъи*1*сЦ 1 tniiv Yttnaavx il tp-
□". f '- ■■■■■' ^ltMwHeMXkv ,"
•*•& вал 1ййьгзг-,е!И""п---
ИШУЗДШ ,»
Ф №CdltUtBlb
■ИЕ
'. >•«
л *Ч1чТ v&r ilkK-
id S^taa ЕГ-Ы—■
Ь:1^—e^^l^-h.1.
4 iWb£,jp> mirier »
» IU ч** ('*:■(. ч^Ч
n !u-.gl Гл tlbZi ■
- Fii^l» l^anldKl *
ms
РИСУНОК 3.2 /из компьютерах Macintosh наилучшим
редактором для разработки кода на JavaScript no праву
считается BBEdit.
Разумеется, есть и свои недостатки, главный из
которых связан с отсутствием возможности изучения
JavaScript и его расширений (например, библиотек
кодов или мастеров).
Перед выбором из нескольких вариантов стоит
выяснить, какие функции реализует тот или иной
редактор. Например, наличие команд поиска и замены, в
особенности тех из них, что выполняют поиск по шаблону,
записываемому как регулярное выражение.
Следует отдавать предпочтение редакторам, которые
обеспечивают цветовое представление синтаксиса. В
таких случаях гораздо проще различать код, HTML и
комментарии. С учетом перечисленных соображений
Text Pad явно выигрывает у Notepad.
Будучи более функциональными, текстовые
редакторы TextPad и BBEdit позволяют разрабатывать в
своих средах и другие коды. При написании кода на HTML,
JavaScript и даже на Java, можно использовать одни и
те же инструментальные средства. Кроме того, HTML-
редакторы от независимых разработчиков, наподобие
Allaire HomeSite, обеспечивают дополнительную
поддержку процесса разработки приложений на JavaScript.
За счет использования единой среды исчезает
необходимость задействования множества программных
пакетов и, следовательно, уменьшается количество
приложений, которые требуется изучить. Некоторые из
доступных редакторов, помимо прочего, допускают
интеграцию с Web-браузерами, обеспечивая быстрый
просмотр и тестирование страниц и сценариев.
РЕСУРС
Web-сайт компании Allaire находится по адресу
http://www.allaire.com.
Создание собственного набора инструментальных средств JavaScript
Глава 3
Среды разработки для JavaScript
Помимо текстовых, существует и несколько
редакторов, ориентированных исключительно на разработку
JavaScript-сценариев. Первым таким редактором на
рынке стал ScriplBuilder, разработанный компанией
NetObjects. He желая терять позиции на рынке,
компания Netscape создала собственный продукт Visual
JavaScript, позволяющий создавать в его среде целые
Web-приложения. Впоследствии его функциональность
практически полностью была перенесена в Application
Builder.
Общая функциональность подобного рода
приложений включает в себя:
• Применение технологии перетаскивания (drag-and-
drop) для редактирования текста
• Применение технологии перетаскивания для
помещения в текст дескрипторов HTML
• Применение технологии перетаскивания для работы
с методами и свойствами объектов
• Выделение синтаксиса для ключевых слов JavaScript
и дескрипторов HTML
• Функции поиска и замены
• Интеграция с распространенными браузерами для
тестирования и отладки кода
ПРИМЕЧАНИЕ
Испытательную версию NetObjects ScriptBuilder
можно выгрузить из сайта NetObjects по адресу http://
www. netobjects. com.
He следует рассматривать перечисленные выше
инструментальные средства в качестве замены
HTML-редактора — лучше, чтобы они использовались в
композиции с ним.
HTML-редакторы
Дабы не забыть о самой природе среды разработки,
добавьте в свой набор инструментальных средств
HTML-редактор. Цели такого редактора заключаются не
в создании сценариев, но в дизайне HTML-страниц, к
которым позже будет добавляться JavaScript-код.
Различают два вида HTML-редакторов — текстовые и
визуальные. В зависимости от пользовательских вкусов и
предпочтений, выбирается тот или иной редактор, а
иногда и оба.
Текстовые HTML-редакторы
Как обсуждалось ранее в главе, текстовые
HTML-редакторы реализуют среду, которая позволяет работать с
дескрипторами HTML. Текстовые редакторы HTML не
пытаются скрыть все детали дескрипторов. Наоборот,
они обеспечивают поддержку всего процесса разработ-
^ШШШШ Знакомство с JavaScript
■■£J Часть
ки кода на HTML, что существенно повышает их
эффективность по сравнению со стандартными текстовыми
редакторами.
Визуальные HTML-редакторы
Другой тип рассматриваемых редакторов — это HTML-
редакторы, скрывающие от разработчиков детали
гипертекстового языка форматирования страниц за счет
обеспечения визуальной среды (WYSIWYG — What You See
Is What You Get), которая генерирует HTML-коды "за
кулисами". В нынешнем компьютерном мире, где все
так или иначе основывается на графике, процесс
создания страниц сводится к действиям типа "указать и
щелкнуть".
Компания Netscape располагает визуальным HTML-
редактором, который носит название Composer и
встроен в продукт Communicator. Composer позволяет
редактировать HTML-документы в рамках интегрированной
среды браузера (см. рис. 3.3). Несмотря на то что
визуальная среда Composer позволяет работать с базовой
разметкой HTML-страниц, все же должная поддержка
визуальной работы с мультифреймовыми окнами,
стилями, и пр. обеспечивается явно не достаточно.
РЕСУРС
Последнюю информацию о Netscape Composer
можно найти на Web-сайте компании по адресу: http://
home.nefscape.com. Как только Mozilla.org выпустит
первую версию Communicator с открытым кодом, она
станет доступна по адресу http://www.mozilla.org.
Отличительной особенностью еще одного
подобного рода инструментального пакета Microsoft FrontPage
является сложность. Однако этот пакет включает в себя,
пожалуй, наиболее удачный визуальный
HTML-редактор. Редактор FrontPage Editor поддерживает не только
расширенные возможности (например, наборы фреймов
и таблицы), но содержит и наборы шаблонов,
существенно ускоряющих разработку Web-страниц.
\ b\aJtAki£HeA ■ NrinepB Compltan x
* ЕЛ 1i#*.-irert.-i'«iriti< t»*/ ~?a#****-w H>*
-a I
This is Netscape Composer!
РИСУНОК 3.3 Composer компании Netscape.
FrontPage представляет собой нечто большее,
нежели просто редактор. Он позволяет создавать i
администрировать полновесный Web-сайт, рассчитанный на
работу под управлением Microsoft Internet Information
Server (IIS).
РЕСУРС
Актуальная информация по FrontPage находится по
адресу http://www.microsolt.com.
Один из недостатков, присущих в настоящий
момент некоторым визуальным HTML-редакторам, связан
с невозможностью перехода в текстовый режим и
редактирования чистого кода HTML. В текущей версии
Composer потребуется прибегнуть к услугам какого-то
внешнего редактора. Кроме того, Composer не знает, что
делать с кодом JavaScript, поэтому не вздумайте
использовать его в качестве среды редактирования кода, в
котором встречаются сценарии JavaScript.
HTML-редактор всего лишь позволяет быстро создать HTML, а затем
при помощи текстового или JavaScript-редактора
несложно добавить сценарии.
Web-браузеры
Следующий необходимый компонент — Web-браузер,
поддерживающий JavaScript (см. главу 1). Поскольку
различные виды браузеров обеспечивают разную
поддержку языка JavaScript, то во время тестирования
потребуются многие из них, если не все.
Основное правило гласит: сценарии необходимо
тестировать во всех доступных браузерах. Для
приложений, рассчитанных на работу в интрасети, достаточно
ограничиться всего лишь одним браузером. Однако
создавая Internet-приложения, следует не забывать, что
доступ к сайту, созданному с использованием JavaScript,
могут получить браузеры практически любого типа.
Самый лучший способ выяснить, в каких браузерах
просматривается ваш сайт предполагает анализ
журнала посещений Web-сайта. Все браузеры отправляют
строку, определяющую тип браузера и установленную
у пользователя операционную систему:
• Истинные JavaScript-браузеры: Netscape Navigator
4.0+ и Microsoft Internet Explorer 4.0+
• Ранние версии JavaSript-браузеров: Netscape Navigator
2.0, Netscape Navigator 3.0 и Internet Explorer 3.0
• Другие браузеры, поддерживающие JavaScript:
HoOava 3+, Opera 3+ и NetPositive 2.1 +
• Браузеры, не поддерживающие JavaScript
Создаваемое JavaScript-приложение необязательно
должно поддерживать все браузеры. Например, может
потребоваться использовать функцию, которая появи-
Создание собственного набора инструментальных средств JavaScript
лась в последней версии Netscape Navigator, поэтому
просматривать страницу необходимо именно в этой
версии браузера. С другой стороны, тестирование
результатов проделанной работы в браузерах предыдущих
версий приносит несомненную пользу в плане расширения
применимости.
Отладчики сценариев
Последний необходимый элемент в наборе
инструментальных средств — отладчик. На данный момент
существуют два основных отладчика, выпущенные
компаниями Microsoft и Netscape. Наверняка, захочется
загрузить оба отладчика, в результате чего появится
возможность организовать отладку как в браузере Navigator,
так и в браузере Internet Explorer. В главе 34 оба
отладчика рассматриваются более подробно.
Процесс раз работки на JavaScript
Итак, все необходимые инструментальные средства
собраны. Теперь их потребуется скомпоновать в среду
разработки. Давайте вначале разберемся в самой
системе разработки приложений. На рис. 3.4 показан
типовой сценарий, в соответствие с которым начинают с
создания базовых HTML-страниц, а затем добавляют
JavaScript-код. После этого страница тестируется в
выбранном Web-браузере.
HTML-редактор
Создание HTML-страниц
Разработка
JavaScript-редактор
Добавление кода на JavaScript
Итеративный процесс
гки
Web-браузер
Отображение HTML-страниц
Тестирование/
Отладка
РИСУНОК 3.4. Проце1 разработки на JavaScript.
Серверные инструментальные средства
JavaScript
Возможности, которые заложены в язык JavaScript,
позволяют отнести его к языкам сценариев, входящим в
состав инструментальных средств Web-разработки для
сервера. Среди последних можно выделить Netscape's
Глава 3
Server-Side JavaScript и Borland IntraBuilder. Чуть ниже
приводится краткий обзор упомянутых
инструментальных средств.
Netscape's Server-Side JavaScript
Server-Side JavaScript (SSJS) — реализация JavaScript
для серверной части, созданная компанией Netscape.
SSJS поддерживает серверные языковые объекты для
доступа к файлам, почтовым сообщениям и базам
данных. SSJS может применяться для разработки
пользовательских сценариев, запускаемых на сервере Netscape,
что уменьшает потребность приложений в
CGI-сценариях. Более подробная информация находится в
главе 12.
РЕСУРС
Постоянно обновляющуюся информацию, связанную
с Server-Side JavaScript, лучше всего отслеживать на
странице Netscape DevEdge no адресу http://
developer.netscape.com.
Borland IntraBuilder
Borland IntraBuilder — среда визуальной разработки
приложений, предназначенная для создания, поддержки и
администрирования Web-приложений баз данных. Если
когда-нибудь доводилось сталкиваться с
инструментальными средствами визуальной разработки под Windows,
то особых проблем с IntraBuilder возникать не должно.
РЕСУРС
На Web-сайте компании Borland (ныне Inprise) всегда
можно отыскать актуальную информацию касательно
технического обслуживания и поддержки IntraBuilder.
Адрес этого сайта таков: http://www.borland.com.
Язык программирования, реализованный в рамках
среды IntraBuilder, представляет собой расширенную
версию JavaScript, которая характеризуется полной
поддержкой объектно-ориентированной методологии
(включая наследование) и наличием объектов доступа
к базам данных. Если вы когда-либо работали с Borland
Visual dBase, то найдете у этих сред множество общих
черт.
Резюме
В данной главе были рассмотрены основные вещи,
необходимые каждому разработчику: JavaScript-редактор,
HTML-редактор, Web-браузер и отладчики сценариев.
Кроме того, упоминались два известных серверных
продукта, использующие JavaScript в качестве встроенного
языкапрограммирования.
Создание
первого сценария J
В ЭТОЙ ГЛАВЕ
■ Краткое напоминание
■ Перед началом работы
■ Приступаем к созданию сценария
■ Первый сценарий
Три предыдущих главы были посвящены JavaScript
в контексте пространства Internet. Исследовались
возможные способы использования языка и его взаимосвязь
с HTML. Упоминались проблемы поддержки языка со
стороны браузеров, а также его реализация для
стороны сервера. Была представлена информация о
методике написания кодов и всех необходимых
инструментальных средствах. Сейчас приступим к реализации
первого сценария.
Для начала необходимо выбрать правильный подход.
Под правильным подходом подразумевается начальное
планирование сценария, его разработка и тестирование.
Перед переходом к собственно созданию сценария
стоит вспомнить некоторые вещи, рассмотренные в
предыдущих главах.
Краткое напоминание
Во-первых, вспомните, что JavaScript внедряется в
HTML-документы через пару открывающих и
закрывающих дескрипторов <script>. После загрузки страницы
браузер начинает интерпретировать код, начиная с
открывающего дескриптора сценария <script> и завершая
закрывающим дескриптором </script>,
JavaScript интерпретирует каждую строку кода в
команды, которым затем и следует. Это очень похоже на
выполнение определенных инструкций для
приготовления, скажем, жаркого. Вы читаете каждое указание и
выполняете его, приближаясь к заветному результату (то
бишь, жаркому). Точно так же и JavaScript выполняет
все в строгом порядке.
Пребывая на пути создания чудесного ужина, вы
остановитесь, ожидая, скажем, разогрева плиты.
Подобного рода остановы воспроизводит и JavaScript, если
требуется перевести компьютер в режим ожидания,
пока не произойдет что-то совершенно определенное.
Перед началом работы
Перед написанием кода необходимо принять
несколько решений, которые будут рассматриваться в
следующих разделах.
Какие браузеры будут поддерживаться?
Так каким же браузерам отдать предпочтение? Этот
вопрос очень важен. Все зависит от объема
создаваемого кода.
Как упоминалось ранее, с момента выпуск i первой
версии JavaScript существенно изменился. До
стандарта ECMAScript JavaScript был чуть ли не единственным
подобного рода языком. ECMAScript определяет
только базовую часть языка, поэтому все, что касается
серверной и клиентской части, остается неизведанным.
Какие браузеры потребуется поддерживать?
Формируя ответ на этот вопрос, следует учесть
несколько рекомендаций:
• Обладает ли сервер функциональными
возможностями определения типа браузера перед отправкой ему
страницы?
• Имеется ли общая тенденция отказа от браузеров,
которые не планируется поддерживать?
Помощь со стороны сервера
Если можно определить, какие браузеры запрашивают
страницу перед ее отправкой, то это предоставляет
определенные преимущества при создании клиентских
JavaScript-программ и сценариев. Опять-таки, это позво-
Создание первого сценария
Глава 4
лит избежать ошибок на стороне клиента, которые
связаны с отправкой неподдерживаемого кода.
Правда, потребуется создать несколько версий
сценариев, но время загрузки браузера существенно
уменьшится, а вероятность появления ошибки — снизится.
Исчезнет необходимость определения типа
пользовательского браузера и, соответственно, передачи лишних
строк кода. Подобного рода функционирование
позволит плавно управлять известными неподдерживаемыми
браузерами.
Постепенные сбои
Другой вопрос заключается в том, насколь
последовательно планируется поддерживать He-JavaScript-браузе-
ры Сюда относятся не только браузеры, вообще не
поддерживающие JavaScript, но и браузеры с отключенной
поддержкой JavaScript.
ПРЕДУПРЕЖДЕНИЕ
В окне настройки предпочтений браузера обработка
кода JavaScript может С ть отключена. На рис. 4.1
показано окно настроек Navigator 4.7 и
соответствующий флажок. Об этом очень важно помнить,
поскольку придется учитывать и отключенную
поддержку JavaScript. Для простоты воспринимайте браузер с
отключенным JavaScript как браузер, вообще не
поддерживающий JavaScript.
Л-|Ц].|,Ч?^^
Ш
щ
* Айовдапчд
ГслГ.
СгЬч
It- Ня*к&х
Af pVcanons
• >■ SriortEicN*sing
"J htal E. hewsqreupt
VCgmnsser
т. Cfflin
'ЕЗЕЭ5Й
STinflUprinlR
Bttr anetflt.4a№c£
РИСУНОК 4.1. Отключение поддержки JavaScript в
Navigator4.7.
Первым делом было бы неплохо для себя выяснить,
какое место хочется занять в Internet-пространстве. Вы
планируете создать сайт, который будет доступен всем
людям на планете? Может быть, вы создаете интрасеть
для компании и знаете, какие браузеры будут у
пользователей? А, возможно, вы замахнулись на создание сайта
для проверки возможностей JavaScript?
Все, что потребуется определить, так это
ограничения, накладываемые на будущих пользователей.
Аккуратно продумайте свое решение. Оставляя кого-то за
бортом, вы тем самым снижаете потенциальный трафик.
Если принято решение пользователей с не-JavaScript-
браузерами не поддерживать, задача упрощается — их
не придется обеспечивать дополнительным
HTML-кодом для просмотра страниц. Если же вам дорог любой
пользователь (в том числе и тот, кто по ряду причин
работает в Не-JavaScript-браузере), постарайтесь
предоставить им настолько большую функциональность,
насколько это в ваших возможностях.
Как следует учитывать браузеры, не
поддерживающие JavaScript?
Самое время посмотреть, как же поддерживать просмотр
страниц в браузерах с отключенной или вообще
отсутствующей поддержкой JavaScript. Конечно, можно
воспользоваться функциональностью серверной стороны,
о которой упоминалось ранее. Однако, она не
поддерживает браузеры с отключенной поддержкой JavaScript.
Здесь на выручку может прийти дескриптор <noscript>.
Дескриптор <noscript> позволяет определить HTML-
код, который будет отображаться на экране в случае,
если JavaScript отключен или не поддерживается. Эта
часть кода всегда следует после любого раздела <script>.
Листинг 4.1 демонстрирует один из примеров
использования этого дескриптора, а рис. 4.2 — результат
отображения примера в Navigator 4.7 при отключенном
JavaScript.
ггуядтвр^-пцякдтдв.'дщ.!.!-!
■ -1Ы-»!
S3
.: Jt~:&хШ "ite g^.-;t a* 4t OWS/DeaUDp/76X<34_iH)l html I.» tr v.VWt-Bti-.-iJ,;
What is returned?
JavaScript is tamed offi
1 i.
Oar- «fltet"
- 'r ■*" tr-i5'"■■ ч A
РИСУНОК4.2.Бизуализациядескрил7-ора<гкт-пр1>.
Листинг 4.1. Использование дескриптора <noscript>.
<html>
<head>
<meta http-equiv="Content-Script-Type"
content="text/javascript">
■^■■В Знакомство с JavaScript
■ЫЁ! ЧастЬ I
<title>My First JavaScript Script</title>
</head>
<body>
<hl>What is returned?</hl>
<script>
<! —
document. wri te ( • <p>JavaScript is turned
*-on!</p>') ;
</script>
<noscript>
<p>JavaScript is turned off!</p>
</noscript>
</body>
</html>
Детально исследуя листинг 4.1 ирис. 4.2, несложно
заметить, что в разделе <noscript> пользователю
выводится сообщение, гласящее что JavaScript отключен.
Если же поддержка JavaScript включена, та же
страница интерпретирует код на JavaScript и игнорирует
раздел <noscript>. Дескриптор <noscript> поистине
незаменим при учете Не-JavaScript-браузеров.
ПРЕДУПРЕЖДЕНИЕ
Некоторые устаревшие браузеры, например, Navigator
2 и ранние версии Internet Explorer, дескриптор
<noscript> не воспринимают. Кроме того, ваш
покорный слуга неоднократно имел честь наблюдать
проблемы отображения в браузерах с отключенным
JavaScript, когда данный дескриптор на странице
использовался более одного раза. Кажется, эти
проблемы в большей степени относятся к семейству
браузеров Navigator.
Встроить код или вынести его в
отдельный файл?
Последний вопрос, который следует решить перед
началом составления кода, — как размещать его на
странице. Предполагается, что вы уже располагаете
функциями, переменными и пр., которые требуется разместить
в рамках действия дескриптора <head>. Весь вопрос в
том, поместитьли код во внешний файл (.js) и сослаться
на него в атрибуте src дескриптора <script>, либо же
разместить код непосредственно в документе.
Как упоминалось ранее, в результате помещения
кода во внешний файл можно будет редактировать один
файл и воздействовать сценарием на все страницы. Сам
я предпочитаю размещать все функции во внешних
файлах. Зачастую я даже компоную функции по
группам и помещаю их в отдельные файлы. Например, один
файл, calculations.js, может содержать функции
расчетов, а другой, foritiathandling.js, — различные операции
форматирования.
ПРИМЕЧАНИЕ
Атрибут src появился только в JavaScript 1.I. Это
значит, что полная его поддержка обеспечивается
только браузерами Navigator 3+ и Internet Explorer 4+.
Предпринимались попытки обеспечить должную
поддержку внешних сценариев и в Internet Explorer 3.02,
однако результаты нельзя считать успешными.
Каковы ваши цели?
Перед началом выполнения проекта исключительно
важно определить преследуемые цели. Далеко не всегда
этот этап проделывается должным образом. Так
сложилось, что многие программисты смотрят на задачу
разработки сценария с позиций извлечения, а не с функци
опальной точки зрения.
JavaScript об еспечиваетширокий простор для
развлечений, и если это для вас главное — нет проблем,
вперед и с песней! Если же на первом месте у вас стоит
функциональность, попытайтесь минимизировать
присутствие лишнего кода, ни для чего кроме показухи не
предназначенного. По истечении определенного
времени другие разработчики, да и вы тоже, убедятся, что
отслеживать такой код становится сложнее и сложнее.
Подумайте о дополнительных накладных расходах при
внесении изменений в код, который в большей
степени "крутой", нежели функциональный.
Выделяя цели, как можно более полно определите
конечные результаты будущей программы. Например,
может потребоваться проверка ошибок при заполнении
форм пользователями. Поставив эту цель, потребуется
вернуться обратно и определить способы ее
достижения. Если программа должна содержать форму,
задайтесь вопросами, сколько элементов будет находится на
форме, т.е. сколько переключателей, текстовых полей,
флажков и т.п.
После преодоления второго уровня целей можно
приступать к проблематике кодирования сценария.
Потребуется реализовать код для поддержки
переключателей, текстовых полей и флажков. Можно создать
функцию, получающую параметр (скажем, radio),
которая возьмет на себя всю необходимую обработку. Не
забывайте о повторном использовании кода —
исключительно полезная штука, когда требуется уменьшить
объем создаваемого кода, да, собственно, и
воспользоваться накопленными знаниями и опытом.
Приступаем к созданию сценария
Вы готовы к написанию кода. Решено, какие браузеры
будут поддерживаться, а какие — нет, как работать с
неподдерживаемыми браузерами и где хранить сценарии.
Определение целей
В первом сценарии будет создаваться простой
всплывающий диалог, запрашивающий у пользователя пароль.
В случае ввода пользователем некорректного пароля
выполняется переход на страницу, отображающую
соответствующее сообщение. Если введенный пароль -
правильный, пользователь перенаправляется на
запрашиваемую страницу. Для браузеров, не
поддерживающих JavaScript, отображается сообщение о
невозможности доступа к странице. Поскольку сценарии
реализуются на самом общем подмножестве операторов
JavaScript, они будут корректно выполняться в любом
JavaScript-браузере. Кроме того, все сценарии будут
встраиваться, а не выноситься во внешние файлы.
Рассмотрим резюме вышеизложенного:
• Поддержка браузеров: Поддерживать все браузеры
• Реакция наче-JavaScript-браузеры: отобразить
сообщение о невозможности доступа к данной части
вашего сайта
• Размещение сценария: встроенный
• Цель: Запросить у пользователя пароль перед
доступом к странице. При вводе корректного пароля
пользователь направляется на защищенную
страницу, а в противном случае — на страницу,
уведомляющую сообщение об ошибке.
Создание шаблона кода
После выяснения целей рекомендуется приступить к
созданию шаблона. Когда я занимаюсь такого рода
вещами, я помещаю в него всю необходимую
информацию раздела <head> и готовлю часть, касающуюся
<body>. В листинге 4.2 показан типовой шаблон, с
которого можно начать.
Листинг 4.2. Файл шаблона JavaScript.
<htnvl>
<head>
<meta http-equiv="Content-Script-Type"
content="text/javascript">
<title>tIepBbw сценарий на JavaScript</title>
<script language=" JavaScript">
// Здесь следует поместить код на JavaScript
II—>
</script>
</head>
<body>
<!— Здесь начинается код содержимого страницы—>
</body>
</html>
Создание первого сценария VP4H
Глава 4 шШ
Учет He-JavaScript-браузеров
Сначала необходимо выяснить, как относиться к
браузерам, поддержка которых не планируется. Листинг 4.3
демонстрирует подход, выбранный для данного примера.
Листинг 4.3. Работа с неподдерживаемыми
браузерами.
<body>
<noscript>
<ь>
Извините, используемый вами браузер либо
не поддерживает javascript, либо
упомянутая возможность отключена.
Информацию, ев з иную с поддержкой
браузером JavaScript, равно как и с
включением 'отключением этой Поддержки,
можно отыскать на сайте компании-
разработчика браузера.
</Ъ>
</noscript>
</body>
Несложно заметить, что все действия сводятся к
выдаче на экран простого сообщения. Текст помещен
между парой дескрипторов (<b>...</b>), что
обеспечивает его отображение в полужирном начертании.
Написание кода
Все вопросы, связанные с внешним видом и
функциональностью страницы, решены. Можно перейти к
написанию кода. За счет предварительного решения всех
моментов, связанных с определением целей, созданием
шаблона, учетом неподдерживаемых браузеров
появилась уверенность, что страница должна
функционировать нормально и без написания кода. Этот
несомненно важен, поскольку зачастую ошибки возникают не по
причине некорректного написания сценария, но из-за
неправильно записанного кода HTML или присутствия
комментариев не на своих местах.
Основная работа в данном примере выполняется в
разделе <head>. Первым шагом будет создание
диалогового окна ввода пароля. Для этого используется
метод prompt, в результате вызова которого отображается
диалоговое окно, как на рис 4.3, обеспечивающее
передачу введенной пользователем информации в сценарий.
[ к [огаг Uebi Prom • ж
./■'■* Г °* Г
■■'■ - &* .-■: \
РИСУНОК "З.Диапогово окнорго/npt.
Ключевой момент, связанный с использованием
окна, заключается в том, что оно возвращает информа-
ВЩ Знакомство с JavaScript
И—=1
цию, введенную пользователем. На основе упомянутой
информации можно протестировать, привел ли ввод
корректного пароля к переадресации на требуемую
страницу.
prompt — это метод объекта window,
воспринимающий два параметра и имеющий такой синтаксис:
prompt("message"f"default");
При вызове этого метода потребуется заменить
message на строки, инструктирующие пользователя.
Они будут отображаться над полем ввода данных.
Параметр default определяет для поля ввода значение по
умолчанию. В нашем первом сценарии значение по
умолчанию не предусматривается, поэтому в метод
передается пустая строка.
В дополнение к методу prompt используется
свойство location объекта window, позволяющее
перенаправить браузер на соответствующую страницу в
зависимости от введенного значения. И последнее, что еще
осталось — поместить код в функцию, вызываемую
после загрузки страницы.
Код, реализующий данную задачу, достаточно
невелик (см. листинг 4.4).
Листинг 4.4. Запрос ввода пароля.
<script language="JavaScripfc">
<!-
function passCheck(){
if(prompt("Пожалуйста, введите пароль","") =
'•"letmein") {
window, location = "/secure.html";
)else(
window.location = "/error.html";
)
j
II —>
</script>
В листинге 4.4 в дескриптора <script> используется
атрибут language. Поскольку в шаблоне определено
Content-Script-Type в дескрипторе <meta> в разделе
<head^ документа, нет необходимости повторно
задавать язык в дескрипторе <script>. Далее рассматривается
процесс создания функции passCheck().
В теле этой функции для проверки пароля,
введенного пользователем, используется условный оператор
if. .else. He стоит беспокоиться о том, как он работает.
Данный аспект детально рассматривается в главе 7.
Следует лишь понять, что данная конструкция
проверяет, вводится ли в качестве пароля последовательность
letmein ("ну дайте же войти"). Проверка
осуществляется с использованием операции ==, которая подробно
рассматривается в главе 6.
В результате ввода корректного пароля пользователь
перенаправляется на страницу /secure.html. Если же
пароль оказывается некорректным, браузер отображает
страницу /error.html.
Вызов функции
Последний шаг в построении работоспособного
сценария — вызов функции. В данном случае сие действие
организуется через обработчик событий on Load
непосредственно после загрузки страницы. Данный
обработчик событий определяется в виде атрибута
дескриптора <body>:
<body onload="passCheck{)">
Первый сценарий
Сценарий готов, осталось лишь собрать его в единый
документ. В листинге 4.5 показана полная страница так,
как она выглядит в текстовом редакторе.
Листинг 4.5. Окончательный сценарий.
<html>
---head>
<meta http-equiv=" Content-Script-Type"
content="text/j avascript">
<title>nepBbrii сценарий на JavaScript</title>
■ script language="JavaScript">
<! —
function passdaeck () {
if (prompt( "Пожалуйста , введете
^пароль","") == "letmein") (
window, location = "/secure.html";
)else(
window . location= " /error. html " ;
3
//-->
---. scnpt>
---. head>
<rbody onload="passCheck() ">
<rioscr ipt>
<b>
Извините, И'^п^льзузый вами браузер либо
не поддерживает JavaScript, либо
упомянутая возможность отключена .
Информацию, связанную с поддержкой
браузер-I'M JavaScript, равно как и с
включением/отключением этой поддержки,
можно отыскать на сайте компании-
разработчика браузера.
</Ь>
< /noser ipt->
с, bocy>
</html>
Из листинга несложно заметить, что в дескрипторе
<head> определяются используемый по умолчанию
язык и функция, которая вызывается через атрибут
дескриптора <body>. Для неподдерживаемых браузеров
предусматривается дескриптор <noscript> в части
<body> страницы. На рис. 4.4 показан результат
выполнения сценария в JavaScript-браузере, а на рис. 4.5 — в
He-JacaScript-браузере.
Зал■ас пацьзаватвго
3
. leiniein
-.;..- -..„. , -.■
I
X
OF :|
Отмене
;.-, <. .-':
РИСУНОК 4.4. Результат выпоянеш 7кода излистинга ".5в
JavaScript-браузере.
Ла-вмй * ан • flxaJowaSn -Nritscn-i
■£ifa -°-fe» Nut* i. Ци й.'эдгчисыо' fclelp
Ншпплтр, используемы it памн браузер либо не тоддсрэкнпас JavaScfipt,.
либо упомянутяя возможность отключена. Информацию, связанную с
поддержкой браузером JavaScript, равно как и с включением/отключением
этой поддержки, можно отыскать 1ш сайте комваннп разработчика браузера.
а. у-г
РИСУНиК 4.5 Результат выполнения кода излистинга 4.5в
не-JavaScript-браузере.
Создание первое ■ сценария
Глава 4
Резюме
Эта глава бьша посвящена реализации самого первого
сценария. Примите поздравления. Конечно, можно
было бы составить сценарий типа "Hello World",
однако хотелось предоставить нечто большее. Сценарий
"Hello World" сводится, всего-навсего, к вызову метода
document.write() в разделе <body> документа. Вы уже
умеете это делать в результате написания первого
сценария.
Данная глава завершает первую часть книги.
Следующие части предоставляют дополнительную
информацию по JavaScript. Мы вместе углубимся в синтаксис и
семантику языка.
Базовое подмножество
языка JavaScript
5.
6.
7.
8.
9.
10.
11.
12.
В ЭТОЙ ЧАСТИ
Основы языка JavaScript
Операции
Управляющие структуры и организация
циклов
Функции
Объекты со стороны клиента
Основные объекты языка
Создание пользовательских объектов
JavaScript
Серверная часть JavaScript
Основы языка JavaScript
В ЭТОЙ ГЛАВЕ
■ Краткое резюме
■ Взаимосвязь JavaScript с Java, CGI и
подключаемыми модулями
■ Встраивание сценариев в HTML-документы
■ События
■ Синтаксис
JavaScript — высокоуровневый
объектно-ориентированный язык, при помощи которого Web-дизайнеры и
программисты легко и просто создают интерактивные
Web-документы. Он обладает характеристиками
объектно-ориентированного языка, не имея сложных
функций, столь характерных для Java и C++.
Несмотря на свой относительно небольшой и легко
воспринимаемый словарный запас, возможностей у
JavaScript очень много. Данная глава посвящена
основам языка и его взаимосвязи с двумя известными Web-
технологиями. Ближе к концу главы можно найти
исчерпывающую информацию, необходимую для
создания собственно сценариев.
Краткое резюме
Пока компания Sun разрабатывала хваленый язык
программирования Java, Netscape трудилась над созданием
упрощенного языка сценариев LiveScript. Позже,
после внесения существенных изменений, язык был
переименован на JavaScript и совместно выпущен
компаниями Sin и Netscape.
С помощью JavaScript обеспечивается практически
неограниченная интерактивность Web-страниц, т.к. он
дает возможность доступа к таким событиям, как
запуск, загрузка документов, выход и нажатие кнопки
мыши. JavaScript применяется при прямом контроле
объектов, таких, как браузерная строка состояния,
фреймы, и даже, браузерное экранное окно. JavaScript,
также, обеспечивает интерактивность между
дополнительно вставляемыми модулями и Java-аплетами.
Как JavaScript связан с CGI,
дополнительно вставляемыми
модулями и Java
Любого вполне может заинтересовать, что может
предложить JavaScript при использовании CGI-программ и
подключаемых модулей такого, чего не умеет делать
Java. Благодаря CGI-программам полуинтерактивные
Web-страницы появились еще до рождения JavaScript.
Позже появились подключаемые модули и Java,
придавшие Web-страницам еще большую интерактивность.
Более подробное рассмотрение этих технологий обеспечит
лучшее понимание вклада JavaScript в рамки набора
инструментальных средств создания Web-страниц.
CGI
CGI — стандартный интерфейс между программами и
Web-сервером. Используя языки программирования,
такие как Perl, C/C+, Visual Basic или AppletScript, и
применяя стандарт CGI, можно создавать программы,
передающие информацию от клиента на Web-сервер.
Например, многие поисковые утилиты,
обеспечивающие нахождение тех или иных Web-сайтов и
необходимой информации, создавались в соответствие со
стандартом CG1. Пользователи вводят ключевое слово или
фразу в текстовом элементе HTML и щелкают на
кнопке Search. Введенный текст передается на сервер,
который запускает CGl-программу. В свою очередь,
программа получает входные параметры и выполняет
соответствующие функции. Поиск будет выполняться
через основную базу данных, выдавая в качестве резуль-
Базовое подмножество языка JavaScript
Часть II
тата только те сайты, которые отвечают заданному
критерию поиска. После завершения операции
поиска CGl-программа генерирует новый HTML-документ
с результатами, который и отправляется в Web-браузер
пользователя.
В данном случае вся основная работа выполняется
сервером. В том случае, когда имеется возможность
создавать только статические Web-страницы, приходится
учитывать все возможные комбинации поиска.
Создание Web-документов на каждый запрос было бы
непрактично, это крайне неудачный способ эмуляции
привычных поисковых механизмов. Рассмотренное относится
к одной из проблем, решенных при помощи CG1, и это
помогло Web стать более интерактивной средой.
РЕСУРС
Практически всю известную информацию по
стандарту CGI и существующим CGI-сценариям можно найти по
адресу http://hoohoo.ncsa.uiuc/ edu/cgi/оverview.html.
Подключаемые модули
После щелчка на ссылке браузер генерирует запрос на
загрузку файла. Если файл хранит простой текст,
HTML или графику, он отображается на экране. В
случае когда браузер не может распознать файл, он
предлагает сохранить его на жестком диске или выбрать
приложение для его обработки. Аналогичные моменты
возникают и тогда, когда файлы различных форматов
внедряются в тело одного HTML-документа.
Подключаемые модули, впервые представленные в
Navigator 2.0 и Internet Explorer 3.0, существенно
расширили количество файлов, распознаваемых браузером.
Подключаемые модули представляют собой программы,
применяемые для расширенной обработки файлов
(скажем, отображение их на экране с дополнительными
способами управления) либо для интерпретации
файлов, невозможной в оригинальной версии браузера. К
упомянутым файлам относятся аудио-, видео-, Acrobat-
и VRML-файлы.
Например, щелчок на ссылке, указывающей на
аудиофайл, в браузере, не поддерживающем данный формат,
Таблица 5.1. Сравнение Java и JavaScript.
JavaScript
приведет к поиску соответствующего подключаемого
модуля. После загрузки этого модуля начинается
проигрывание клипа. Интеграция браузера и ау шопроиг-
рывателя — практически бесшовна.
РЕСУРС
Огромный список подключаемых модулей можно
отыскать на сайте компании Netscape по адресу http://
home.netscape.com/download.
Java
Java — технология, более всего напоминающая lavaScript
Однако значительные отличия все же существуют.
Давайте немного подробнее рассмотрим Java, как это было
с CGI и подключаемыми модулями.
В отличие от JavaScript, Java не имеет встроенного
механизма прямого доступа к элементам (т.е. объектам)
Web-страницы. Стоит отметить отсутствие клиентской
версии, которая могла бы управлять HTML- i другими
объектами. Структура и синтаксис Java весьма близки
KJavaScript. Зарезервированные слова, операции и
операторы управления потоком данных совершенно
идентичны. Поскольку Java — компилируемый язык, на
кодовые конструкции накладываются более высокие
требования. Существенные отличия Java от JavaScript
имеют место в двух ипостасях: правилах типизации
переменных и методологии инкапсуляции, принятой
для классов. В табл. 5.1 сведены различия между JavaScript
и Java:
В JavaScript переменные и функции объявляются
локально или глобально. Java обеспечивает условие
гибкого многоуровневого доступа к переменным и методам
(функциям), когда упомянутые элементы
представляются вместе с модификаторами доступа: private, protected
и public. Модификаторы позволяют скрывать атрибуты
объекта и детали разработки от общего доступа к
объекту, предоставляя большую степень свободы в
модификации кода. В данном случае несложно поддерживать
опубликованный интерфейс объекта и в то же время
обеспечивать обратную совместимость.
Java
Язык написания сценариев
Слабый контроль типов
Рудиментарный доступ
Отсутствие порожденных типов
Отсутствие контроля доступа к массивам
Иерархия экземпляров
JavaScript-объе кты
Язык программирования
Строгий контроль типов
Многоуровневый доступ
Объектно-ориентированные возможности и наследуемые атрибуты
Строгий контроль доступа к массивам
Объектная иерархия
Java-классы
Переменные экземпляров Java должны объявляться
строго, причем каждой определенной переменной
должно присваиваться -значение ее основного или
производного типа. Коды JavaScript, наоборот, не требуют
спецификации. JavaScript имеет встроенные типы данных,
основнгя задача которых связана с оптимизацией
поведения и размеров переменных.
Еще одна особенность JavaScript связана с более
обобщенной классификационной схемой (number или
string) no сравнению с Java (hit, long, float или char). В
то время как объекты JavaScript нельзя эффективно
преобразовать в более сложные объектные типы, в Java
имеется возможность создания классов, группирующих
переменные в объектные компоненты.
ПРИМЕЧАНИЕ
Следующая предлагаемая версия JavaScript (скорее
всего, это будет 2.0) будет обладать более строгой
классификацией элементов. В JavaScript 2.0 было
предложено добавить такие типы, как int, long, float и char.
JavaScript вполне можно посчитать
объектно-ориентированным языком, поскольку он поддерживает
иерархию экземпляров. В нем имеется возможность
определять объекты, содержащие методы и переменные,
организовывать ссылки в соответствие с точечной
нотацией; единственное, чего нельзя сделать — расширять
объекты, используя механизм порождения подклассов.
Хоть синтаксис Java и напоминает синтаксис JavaScript
в отношении ссылок и создания объектов, все же Java
является истинным языком программирования,
смахивающим на C++.
Пр использовании Java-кода определения объектов
могут послужить оболочкой при создании более
сложных архитектур. Объектные классы — это кирпичики,
из которых строится Java-код. В отличие от JavaScript,
каждая функция и переменная Java должна
определяться внутри какого-то класса. Более того, Java позволяет
группировать классы в пакеты взаимосвязанных
объектов, равно как и определять абстрактные интерфейсные
соглашения для заданных категорий объектов.
Следующее отличие связано с тем, что разработчик
компилирует исходный код Java в байт-коды, создавая
двоичные компоненты, которыми могут воспользоваться
другие программисты. На основе полученных
компонентов (т. г. классов объектов) создаются производные
классы, нгследующие функциональность и расширяющие
атрибуты базовых классов.
Во шожность расширения базового класса является
основой концепции повторного использования кода в
сложных приложениях, что существенно повышает
эффективность программ. Строгий контроль типов
обеспечивает Java-компилятор, который требует от
программиста явного объявления и приведения переменных
Основы языка JavaScript I9^^|
Глава 5 Bfi^l
экземпляров либо к встроенным, либо к производным
типам. С другой стороны, JavaScript разрешает
программисту прозрачно переключать определитель типа
переменной без учета первоначального определения типа.
Два языка настолько тесно взаимосвязаны, что это
позволяет разработчикам внедрять вызовы JavaScript-
функций в код на Java, а также обеспечивать доступ к
методам Java-классов из JavaScript. Упомянутые
возможности увеличивают ценность тех программистов на
JavaScript, которые обладают определенными
знаниями Java. Данная технология известна под именем
LiveConnect. Основные аспекты этой технологии
подробно рассматриваются в главе 25.
Внедрение сценариев в
HTML-документы
Одна из необычных сторон JavaScript связана с тем, что
на этом языке можно создавать программы, работающие
как со стороны сервера (см. главу 12), так и со стороны
клиента, т.е. в среде браузера. С клиентской стороны
JavaScript применяется в соответствие с одним из двух
способов: внедрение в HTML-документ между парой
дескрипторов <script> либо помещение внутрь
дескриптора для обеспечения реакции на событие. Каждый раз
когда HTML-страница загружается, JavaScript
интерпретируется браузером. В зависимости от действий
пользователя и других событий, могущих возникнуть во
время просмотра HTML-документа, выполняется сценарий
целиком или его части.
Например, разрабатывается HTML-документ для
сбора данных о посетителях определенной
Web-страницы. Начать стоит с формы, содержащей три текстовых
элемента: имя, название компании и номер телефона.
В конец формы можно поместить стандартную кнопку
Submit (Отправить) для отправки информации в базу
данных, размещенную на Web-сервере. Кроме того,
можно потребовать, чтобы пользователь полностью
заполнял каждое поле, а вместе с номером телефона
указывал код города.
После щелчка на кнопке Submit все данные формы
передаются на обработку в серверную часть программы.
Если оказывается, что пользователь опустил какую-
либо информацию, выдается запрос на ввод этих
данных. Затем пользователь может отправить форму,
включающую требуемые данные, к тому же в корректном
формате. После того как программа получит от
пользователя удобоваримые данные, она сохраняет их в базе
данных.
Поддержка полей, обязательных для заполнения, как
в данном случае, приводит к существенным задержкам,
которых можно избежать при помощи JavaScript.
Имеет смысл организовать проверку всех данных на клиен-
Вазовое подмиож-есшео языка JavaScript
ЧаспГ Tl
тской части • - этим не должен заниматься
Web-сервер. Реализация проверки данных — всего лишь один из
примеров того, как JavaScript может дополнять
серверные программы, обеспечивая более быструю реакцию
на ошибки и при этом освобождая большее количество
ресурсов на сервере. В главе 14 вопросы, связанные с
проверкой данных, рассматриваются более подробно.
События
Одна из ключевых характеристик JavaScript —
возможность захватывать ограниченное количество
пользовательских действий, в большинстве случаев известных
под именем событий (events). Некоторые
HTML-элементы уже реагируют на события; примером может
послужить щелчок на хорошо известном элементе ссылки, что
приводит к перенаправлению на другой
HTML-документ.
Как только указатель мыши попадает на
соответствующий ссылке текст или графическое изображение,
указатель изменяет свой стандартный вид стрелки на вид
указующей руки. В дополнение к этому, некоторые
браузеры отображают в строке состояния новый URL.
В JavaScript подобного рода действие носит название
события MouseOver, и реакция будет иметь место
тогда, когда возникает любого рода движение мыши поверх
элемента. После щелчка на любой части ссылки
браузер обеспечивает переход на соответствующий
Web-адрес либо открытие нового файла. Описанное действие
называется событием Click, которое будет
генерироваться в результате любого щелчка на ссылке. HTML
перехватывает эти события, и точно такой же будет реакция
браузера.
При помощи JavaScript можно обеспечить
пользовательские реакции на многие события, генерируемые во
время просмотра HTML-документа пользователем.
Особенностям управления событиями полностью
посвящается глава 14.
Синтаксис
Как и в любом языке программирования, в JavaScript
определены собственные способы управления
различными элементами. Разумеется, в языке присутствует
своя специфика представления ключевых слов,
зарезервированных слов, символов и т.п.
Версии JavaScript
В результате неутомимой совместной деятельности
компаний Netscape, Microsoft и ряда других, призванной
усовершенствовать стандарт ECMAScript, появились
новые версии JavaScript и поддерживающих этот язык
браузеров. В данной книге речь идет, в основном, о версии
1.4, а иногда и о версии 1.5, находящейся на стадии бета-
тестирования. Таблица 1.5 предоставляет
исчерпывающую информацию о поддерживаемых платформах.
Таблица 5.2. Поддержка JavaScript.
Версия Описание
JavaScript 1.0 Поддерживается в Netscape Navigator 2
JavaScript 1.1 Поддерживается в Netscape Navigator 3,
Internet Explorer 3, Opera 3, Netscape
Enterprise Server 2
JavaScript i .2 Поддерживается в Netscape Navigator
(версии Л-4.04\
Internet Explorer 4
JavaScript 1.3 Поддерживается в Netscape Navigator
(версии 4.05-4.7),
Internet Explorer 5
JavaScript 1.4 Поддерживается в альфа-версиях Mozilla
(до M 12ч HotJava3.0, Internet Explorer
5.5, Netscape Enterprise Server .0
JavaScript 1.5 Планируется поддержка в Navigator 5
(Mozilla), т.е. в версии Netscape
Navigator с открытым кодом.
Внимательное исследование табл. 5.3, 5.4 и 5.5
позволит понять взаимосвязь существующих версий JavaScript,
JScript и ECMAScript.
Таблица 5.3. Взаимосвязь между JavaScript и
JScript.
JavaScript
JScript
1.0
1.1
1.2
1,3
14
1.5
Не соотносятся
1.0-2.0
3.0-4.0
5.0-5.1
5.0-5.1
5.5
Таблица 5.4. Взаимосвязь между JavaScript и
ECMAScript.
JavaScript
ECMAScript
1.0
1.1
1.2
1 3
4
I 5
He соотносятся
He соотносятся — Фундамент для
стандарта
Не соотносятся — Большая часть
перенята из ECMAScripl 1.0
1.0
1.0 (2-я модификация)
1.0 (3-я модификация)
Таблица 5.5. Взаимосвязь между JScript и
ECMAScript.
JScript ECMAScript
1.0 Не соотносятся
2.0 Не соотносятся — Фундамент для
стандарта
3.0-3.1 1.0
4.0 1.0
5.0 1.0 (2-я модификация)
5.5 1.0 (3-я модификация)
Каждый разработчик JavaScript должен хорошо знать
особенности целевой платформы, чтобы выбрать для
разработки корректную версию JavaScript, т.е. то, что
потребуется указать в атрибуте language дескриптора
<script>.
ПРИМЕЧАНИЕ
Не следует забывать, что дескриптор <script> в HTML
4.01 и XTML 1.0был официально упразднен. На
данный момент стандартного дескриптора,
позволяющего определить языковую версию, не существует. Пока
нет никакой определенности, я бы посоветовал
воспользоваться атрибутом language в композиции с
атрибутом type.
Например, если приложение должно работать в
Netscape Navigator 2 и выше, а также в Microsoft Internet
Explorer 3.0, сценарии следует разрабатывать на JavaScript
1.0. Однако если выходной платформой является
Navigator 5.0/Mozilla, и есть желание воспользоваться
всеми преимуществами новой версии языка, то для
указания зерсии 1.5 следует записать:
<script language="JavaScriptl 5"
type="text/javascript">
Для версии 1.4 воспользуйтесь такой строкой:
<script language = "JavaScriptl.4"
type="text/javascript">
А для версии 1.3 —такой:
<script language= "JavaScriptl.3"
type="text/javascript">
Для версии 1.2 подойдет строка:
<script language= "JavaScriptl.2"
type="text/javascript">
Выбор версии 1.1 обеспечит строка:
<script language="JavaScriptl.1"
type="texfc/javascript">
А иерсии 1.0 — строка:
<script language="JavaScript"
type="text/javascript">
Основы языка JavaScript Ш^^^Л
Глава 5 ВИ
ПРИМЕЧАНИЕ
Не пытайтесь в качестве выбранной версии 1 .0 языка
указывать "JavaScriptl .0" или "JavaScriptl".
Подобного рода сентенции не распознаются, и в результате
сценарий игнорируется.
ВНИМАНИЕ!
Перед переходом к исследованию особенностей
языка JavaScript хотелось бы снова напомнить о важности
указания корректного языка в дескрипторе <script>.
Браузер попросту проигнорирует любой сценарий, для
которого определяется нераспознанная им версия
языка.
Лексемы
Лексемы (tokens) — это наименьшие отдельные слова,
фразы, символы, которые может распознать JavaScript.
Во время интерпретации JavaScript-кода браузер
разбивает сценарии на лексемы, игнорируя при этом
комментарии и лишние пробелы.
Лексемы подразделяются на четыре категории:
идентификаторы, ключевые слова, литералы и операторы.
Как и в любом компьютерном языке, существует
множество способов подачи компьютеру различных
директив за счет различной компоновки лексем. Синтаксис
(syntax) языка — это набор правил и ограничений,
используемый при комбинировании лексем.
Идентификаторы
Идентификаторы (identifiers) — суть ни что иное как
имена переменных, методов и объектов. Они состоят из
комбинации букв и цифр. Некоторые имена уже
встроены в язык JavaScript и поэтому зарезервированы от
использования.
Независимо от ключевых слов, можно определять
собственные, притом значащие идентификаторы.
Разумеется, для этого существует несколько правил:
• Все идентификаторы должны начинаться либо с
буквы, либо с символа подчеркивания (_).
• Для всех последующих знаков допускается
использование букв, цифр и символов подчеркивания.
• В понятие букв входят заглавные буквы, начиная с
А и заканчивая Z, и строчные буквы, т.е. с а до z.
• Имя идентификатора не должно содержать пробелов.
В понятие цифр входят знаки, начиная с 0 и
заканчивая 9.
В табл. 5.6 показаны примеры допустимых и
недопустимых идентификаторов.
Пазовое подмножество языка JavaScript
Часть II
Таблица 5.6. Примеры идентификаторов
JavaScript.
Допустимые
Недопустимые
currents WebSite
numberOfHits
n
N
current vi/ebSite
#oflslands
2b0rNotToBe
return
Идентификатор current WebSite является
недопустимым по причине присутствия в нем символа пробела.
Этот идентификатор будет рассматриваться не как один,
но как два. Если по смыслу в идентификаторе должен
находиться пробел, то на его месте обычно ставится
символ подчеркивания.
#oflslands не является допустимым, поскольку
символ # не входит в разрешенное множество символов.
2beOrNotToBe — некорректен, потому как начинается
с цифры. Идентификатор return уже используется в
JavaScript для других целей. В случае его определения,
после запуска приложения выдается ошибка.
Идентификаторы п и N — вполне допустимы,
однако отличны друг от друга. Ввиду того что JavaScript
чувствителен к регистру, упомянутые идентификаторы
интерпретируются как разные, даже несмотря на их, в
общем-то, одинаковое произношение.
Ключевые слова и зарезервированные слова
Ключевые слова (keywords) — предварительно
определенные идентификаторы, составляющие ядро языка
программирования. В JavaScript они выполняют особые
функции, например, объявление новых переменных,
функций, принятие решений на основе текущего
состояния компьютера или организация цикла внутри
приложения.
Ключевые слова встроены в JavaScript и всегда
доступны программисту, однако в отношении них следует
придерживаться правильного синтаксиса. Ключевое
слово var — одно из первых, о котором будет детально
рассказываться в главе. Позже демонстрируется
применение других ключевых слов для создания более дина-
мичныхпро грамм.
Зарезервированные слова (reserved words) — это
идентификаторы, которые не могут использоваться в
качестве имен переменных, функций, объектов и методов
как сейчас, так и в будущем. Рассмотрим полный
список зарезервированных слов JavaScript:
abstract else instanceof switch
boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char
class
const
continue
debugger
default
delete
do
double
finally
float
for
function
goto
if
implements
import
in
null
package
private
protected
public
return
short
static
super
true
try
typecf
var
void
volatile
while
with
Литералы
Литералы (literals) — это числа или строки,
представляющие постоянные значения JavaScript. Это значения,
которые не изменяются во время выполнения сценария.
В следующих пяти разделах рассматриваются различные
виды литералов.
Целочисленные литералы
Целочисленные литералы могут быть представлены в
десятичном (десятичная система счисления),
восьмеричном (восьмеричная система счисления) или
шестнадцатиричном (шестнадцатиричная система счисления)
формате. Целочисленный литерал в десятичном
формате может содержать любую последовательность цифр,
но не начинаться с 0. Ноль в начале целочисленного
литерала определяет восьмеричный формат.
В восьмеричной записи целочисленный литерал
может включать последовательность цифр от 0 до 7. Для
определения шестнадцатиричного формата числа перед
литералом должно ставится Ох или ОХ.
Шестнадцатиричные целочисленные литералы могут содержать
цифры от 0 до 9 и буквы а — Гили А — F. Рассмотрим
несколько примеров:
Десятичные литералы: зз, 2L39
Восьмеричные литералы: cm, Э3664
Шестнадцатиричные литералы: Ох7Ь8, 0X395
Литералы с плавающей точкой
Литералы с плавающей точкой представляют
десятичные числа с дробной частью. Их можно выражать в
стандартном и экспоненциальном форматах.
Экспоненциальный формат подразумевает использование е или
Едля определения порядка числа. И десятиричное
число, и показатель степени могут быть со знаком или
беззнаковыми (положительные и отрицательные):
3405.673
-1.958
8.3200е+11
8.3200е11
9.98Е-12
Логические литералы
В JavaScript реализован логический тип данных,
поэтому поддерживаются два литерала true и false,
представляющие соответственно значения логической 1 и 0. Если
вы новичок в области программирования, не
отчаивайтесь — очень скоро вы поймете всю важность true и false.
Ключевые слова true и false должны записываться
строчными буквами. Таким образом, TRUE и FALSE
прописными буквами остаются доступными для применения
в качестве собственных идентификаторов. Однако, во
избежание недоразумений, использовать их в таком
контексте не рекомендуется.
Строковые литералы
Строковый литерал — это ноль и более символов,
заключенных в двойные ("") или одиночные (") кавычки.
Несмотря на то что JavaScript разрешает использовать
оба типа кавычек, для строки лучше применять один и
тот же тип кавычек как в начале, так и в конце.
Рассмотрим примеры строковых литералов:
"Allen's car"
'virtual "communities"'
"#1?.-6"
"Look, up in the sky!"
Применение одного из двух видов кавычек
достаточно удобно, если вы — сторонник либо первого, либо
второго метода. Во время изучения встроенных методов
JavaScript следует учесть необходимость строгого
выполнения всех указаний, касаюшихся строковых литералов,
переда заемых в качестве параметров. В ряде случаев
допускается применять оба типа кавычек при
помещении одного строкового литерала внутрь другого.
Последнее не разрешается при указании управляющих кодов,
речь о которых идет ниже.
Специальные символы
Иногда в сценарии может потребоваться использовать
специальный знак либо их комбинацию, например,
символ табуляции или новой строки. В этом случае
управляющий код должен предваряться символом
наклонной черты влево (\), как показано ниже:
\Ь — забой
\f — перевод страницы
\п — новая строка
\г — возврат каретки
\t — табуляция
\\ - наклонная черта влево
V — одинарная кавычка
\" — двойная кавычка
Основы языка JavaScript Ш9!^мШ
Глава 5 WkWWW
Если требуется сэмулировать нажатие клавиши
табуляции для выравнивания, скажем, двух столбцов
данных, следует использовать знак табуляции (\t). В
листинге 1.5 демонстрируется один из способов
выравнивания текста при помощи знаков табуляции. Если
сценарий содержит специальные знаки, читать его
оказывается сложнее, но как показано на рис. 5.1,
результаты выглядят гораздо лучше:
Листинг 5.1. Использование специальных знаков в
JavaScript.
<html>
<head>
<title>CneunajibHbie символы в JavaScript-
сценариях*' title>
</head>
<body>
<! --
Замечание: Специальные символы не возымеют
действия до тех пор, пока не поместить их в
предварительно сфс-?ма*гированный блок текста
(т.е. тот, который находится между парой
дескрипторов <рге>.,</рге>).
— >
<рге>
<script type="text/javascript">
<! —
document.writeIn("\tPersonnel");
document.writeln ("Name\t\tAddress") ;
document.writeln("Jeff\t\tjeff@company.com");
document.writeln("Bill\t\tbiliecompany.com");
document. write In ("Kini\ t\ tkim@ company. com") ;
// ~>
</script>
</pre>
</body>
</html>
волы кавычек, применяйте их в паре с символом
наклонной черты влево.
-than N 'В
миг*
Personnel
Ыам« Address
Jeff je ffQccmpsny.com
■ Bill . 'ii.GcompariY.com
m. fciiaoi ,ompany, com
f»5» g-V"-. ....... SS&r™-*™-'* I ||h
РИСУНОК 5.1. Выравнивание текста при помощи табуляции.
ПРИМЕЧАНИЕ
Специальные знаки оказывают воздействие только
когда используются в пределах предварительно
отформатированного текстового блока, потому-то сценарий
должен помещаться в пару дескрипторов <рге> и </рге>.
Если строковый литерал должен воспроизводить сим-
Базовое подмножество языка JavaScript
document.write("\"*aHTa3HH важнее знаний. V") ;
document.write(", Альберт Эйнштейн");
Этот сценарий обеспечит отображение на экране
следующей строки:
"Фантазия важнее знаний.", Альберт Эйыптейн
Операции
Операции (operators) — это символы или
идентификаторы, которые представляют способ оценки или
манипуляции комбинациями выражений. Наиболее
используемой общей операцией является далеко не операция
присваивания. В примере х=10 как собственно 10, так
и переменная х — это выражения. Когда JavaScript
встречает операцию присваивания между двумя
выражениями, выполняются действия в соответствие с
правилами оператора присваивания. В рассматриваемом
случае значение выражения в правой части
присваивается переменной в левой части. Наряду с
арифметическими, JavaScript поддерживает 30 других операций,
которые более подробно рассматриваются в главе 6.
Переменные
Переменная (variable) — это имя, присваиваемое ячейке
памяти компьютера, которая хранит определенные
данные. Праотцы программирования тратили уйму
времени на трансляцию данных, наподобие сообщения "Hello
World", в двоичные коды. Затем они искали свободное
место в компьютерной памяти для размещения всех
полученных единичек и ноликов, не забывая запомнить
адрес начала и завершения этих данных. При помощи
упомянутых адресов ячеек памяти можно было
находить, изменять и считывать данные. В общем, никогда
не завершаюшийся день сурка. (Да здравствует День
Сурка!!.')
Нынешним программистам повезло больше — им на
помощь пришли переменные, и жизнь их пошла на
существенную поправку, поскольку сохранение,
изменение и чтение данных стало теперь как никогда простым.
Благодаря механизму переменных появляется
возможность присваивать значащие имена ячейкам, которые
хранят данные, явно используемые программистом, в то
время как доступ к остальным ячейкам — забота
исключительно компьютера.
Проблема именования
Имя переменной в JavaScript состоит из одной и более
букв (A..Z и a..z), цифры (0..9) и символов
подчеркивания (_). однако не может начинаться с цифры.
Следующих два имени JavaScript воспринимает как
различные:
internetAddress
internetaddress
Вот еще корректные имена:
_lasfcName
п
number_2
Когда имя переменной по смыслу содержит одно
слово, при ее записи принято использовать строчные
буквы, а вот при наличии в имени смысловых двух или
трех слов, то первое слово начинается со строчной, а все
последующие — с прописных. Обычно мои имена
переменных заключают в себе два-три слова, что
обеспечивает гораздо лучшее понимание смысла определения
переменной.
Предположим для примера, что требуется
переменная с логическим значением (true or false), которая
уведомляет, завершил ли посетитель Web-страницы ввод
своего имени в текстовом поле. Если имя переменной
выглядит наподобие finish, другой программист с
удивлением подумает: "Что это — флаг, при помощи
которого можно выяснить, завершены ли пользовательские
действия? А, может быть, это — строковое выражение,
которое записывают после того, как посетитель
завершил операцию, скажем, сообшение о благодарности?"
В данном случае гораздо лучшим выбором иудст имя
isDone. Использование в качестве приставки слова is
позволяет рассматривать переменную как вопрос, на
который требуется ответ "да" или "нет", а это, в свою
очередь, означает, что переменная хранит логические
значения. Если посетитель завершил ввод своего имени,
isDone присваивается значение true, в противном
случае — false.
Несмотря на то что размер имени переменной
JavaScript ограничивается только объемом оперативной
памяти, все же подходить к данному вопросу лучше с
практической точки зрения. Я советовал использовать
не более 20 символов, т.е. 2-3 слова. При написании
сценария не стоит заходить за конец строки. Этому
способствуют длинные имена переменных, к тому же они
нарушают целостность восприятия кода.
По сложившейся традиции переменные, состоящие
из одного слова и даже из одного символа,
представляют математические значения. Вот несколько примеров
подобного рода имен: п для любого числа, х, у, z — для
координат, i — для заполнителя в рекурсивной функции
или переменной цикла. Поскольку данные способы —
традиционные, их можно использовать каждый раз, когда
сочтете нужным.
Работая в профессиональном окружении,
потребуется обеспечить удобочитаемость написанного кода для
других разработчиков. В этом смысле существенную
помощь окажут непротиворечивые и осмысленные
соглашения об именовании. Плохо или недостаточно
продуманные соглашения ничего кроме головной боли не
принесут, да и могут отрицательно сказаться на осно-
вополагающих показателях компании как разработчика
программного обеспечения.
Объявление переменных
Для того чтобы уведомить JavaScript о том, что
конкретный идентификатор должен использоваться в
качестве переменной, в первую очередь, его потребуется
объявить. Для объявления переменных в JavaScript
используется ключевое слово var, за которым следует
новое имя переменной. Имя будет резервироваться как
переменная, которую можно использовать в качестве
области памяти для хранения любых данных.
Следующий пример демонстрирует возможность
одновременного объявления нескольких переменных (между
отдельными именами должны ставится запятые).
var internetAddress;
var n ;
var i, j, k;
var isMouseOverLink, hellOMessage;
После объявления переменной можно присваивать
начальное значение. Подобное действие носит название
инициализации и выполняется при помощи операцией
присваивания =.
ПРИМЕЧАНИЕ
Знак равенства (=) используется для присваивания
переменной определенного значения. Проблемы,
связанные с оператором присваивания, подробно
рассматриваются в главе 6.
Переменную можно инициализировать
непосредственно при ее объявлении либо позже, в любом месте
сценария. Установка начального значения переменной
во время объявления упрощает запоминание, какой тип
значений первоначально планировалось хранить в
переменной. Уточним предыдущий пример, добавив
необходимые инициализации:
var internetAddress = "natne@company.com";
var n = 0.00 ;
var i = 0, j = 0, k;
var isMouseOverLink = false ;
var helloMessage = "Hello, thank you for coming!";
k = 0;
Несложно заметить, что все переменные, кроме к,
были гроинициализиронаны во время объявления, а к
инициализируется позже. JavaScript читает строки кода
сверху вниз, выполняя директивы одну за другой. До
инициализации переменная остается неопределенной
(undefined), поэтому прочитать ее значение нельзя.
Попытка чтения значения переменной перед ее
инициализацией приведет к ошибке во время выполнения
приложения. JavaScript дает возможность проверить, было
ли присвоено значение переменной, с помощью
оператора tjpeof (см. главу 6).
Основы языка JavaScript В0РЦ
Глава 5 ■■■■
В дополнение к ключевому слову var, JavaScript
предлагает и другой способ объявления переменных
при помощи обычной их инициализации. Если
присвоить новой переменной значение перед ее объявлением
при помощи var, то JavaScript автоматически объявит ее.
ПРИМЕЧАНИЕ
В ранних версиях JavaScript-браузеров объявление
переменных без слова var означало их автоматическое
объявление с глобальной областью действия (или
видимости). Может возникнуть впечатление, что это
сокращает накладные расходы, однако хорошая
практика программирования предполагает именно явное
объявление переменных. При помощи ключевого слова var
поддерживается концепция области действия переменной.
"П/гы
При сохранении порции данных (более известных под
именем значения), JavaScript автоматически относит ее
к одной из пяти категорий. В табл. 5.7 сведены
различные типы данных, поддерживаемые JavaScript.
Таблица 5.7. Типы данных JavaScript.
Тип Пример
number -19,3.14159
boolean true, false
string "Элементарно, дорогой Ватсон", ""
function unescape, write
object window, document, null
Переменные типа number хранят действительные
или целые числа, boolean — значения true или false, a
string содержат строковые литералы, включая пустую
строку. В табл. 5.7 пустая строка представляется с
помощью двух двойных кавычек. Функциональный тип
(function) либо определяется пользователем, либо
относится к встроенным функциям. Например, функция
unescape является встроенной в JavaScript.
Проблематике создания функций, определяемых пользователем,
посвящается глава 8.
Функции, принадлежащие объектам, в JavaScript
называются методами (methods). Они также относятся к
типу данных function. Базовые клиентские объекты
JavaScript, такие как window или document, имеют тип
данных object. Переменные типа object, или просто
объекты, могут хранить объекты. Переменная со
значением null относится к типу object. Инициализация
переменной значением null позволяет избежать ошибок,
если нет уверенности в будущем ее использовании.
Как правило, в других языках программирования
требуется определять тип данных, представляемых
новой переменной. На протяжении всей программы тип
любого значения, присваиваемого переменной, должен
Базовое подлтожество языка JavaScript
Часть II
быть определенным и неизменным. Более того, если
переменной присваиваются значения различных типов,
это приводит к ошибке. Для JavaScript, слабо
типизированного языка, подобное не имеет места. Не
потребуется определять типы данных. Кроме того, одной и
той же переменной можно присваивать значения разных
типов. Переменная JavaScript способна в любой момент
принять новое значение. Рассмотрим примеры
допустимого использования переменных JavaScript:
var carLength;
carLength =4+5;
documen .writeln(carLength);
carLength = "9 футов";
document.writeln(carLength);
После объявления переменной carLength ей
присваивается значение 4+5. В JavaScript число 9 сохраняется
с типом number. Присваивая carLength значение
другого типа "9 футов", в этой переменной сохраняется
строковый литерал (string). Операция подобного рода
уменьшает количество действий, которые могли бы
потребоваться в других языках программирования для
уведомления о факте смены типов значений.
Область действия переменных
Область действия (или видимости) переменных (scope) —
это участки внутри программы, в которых возможна
ссылка на переменную. Например, рассмотрим случай
внедрения одного сценария в часть <head>
HTML-документа, а другого — в часть <body> того же
документа. JavaScript считает, что все переменные, объявленные
внутри упомянутых двух участков, принадлежат одной
и той же области действия. Такие переменные
являются глобальными (global), и они доступны любому
сценарию в текущем документе. Несколько позже речь
пойдет о функциях — отдельных блоках кода. Переменные,
объявленные внутри таких блоков, носят название
локальных (local) и они доступны не каждому сценарию.
Локальные переменные
Переменная, объявляемая внутри функции является
локальной. К значениям этой переменной может иметь
доступ только данная функция. При каждом вызове
функции все локальные переменные создаются, а
после возврата функции — разрушаются. Если в другой
функции присутствует объявление переменной с таким
же именем, она рассматривается как совершенно
другая переменная. Каждая из переменных адресует свой
блок памяти.
Глобальные переменные
Если требуется, чтобы какая-то переменная совместно
использовалась в более чем одной функции, следует
объявить ее вне функций (но, конечно же, внутри пары
дескрипторов <script>). В этом случае данная
переменная будет доступна в любой части всего приложения, в
том числе и во всех функциях.
ПРИМЕЧАНИЕ
Рекомендуется объявлять глобальные переменные в
разделе <head> HTML-страницы, тем самым
гарантируя, что они загрузятся раньше любой другой части
приложения.
Листинг 5.2 демонстрирует способ объявления и
применения глобальной переменной. Для большего
понимания различий между областями действия
переменных, в программу помещены две функции. Не
обязательно выяснять, как действуют функции, следует
лишь усвоить тот факт, что они представляют собой
отдельные части сценария, заключенные в фигурные
скобки ({}). Более подробную информацию, ci язанную
с функциями, можно найти в главе 8.
Листинг 5.2. Глобальные и локальные переменные.
<html>
<head~
<title>JavaScript Unleashed</title>
<script type="text/javascript">
<! —
// Глобальные переменные
var globalString = "A" ;
// Функции
function changeToB() {
document. outputForm. beforeB . valu =
—lobalString ;
globalString = "B";
document.outputForm.afterB.value =
globalString;
I
function changeToCO {
do «n . ( utputForm. beforeC . valu =
globalString;
globalString = "C",
document. outputForm. af erC. value =
globalS tr ing ;
)
// —>
</script>
</head>
<body>
<script type="text/javascript">
<! —
document, write ("The initial value of
•-•globalString is V" + globalString + "V.");
//-- >
</script>
<br>
<focm name= "outputEorm" >
<input name="changeButtonA" type="button"
value="Change To B" onclick= "changeToBO ">
Основы языка JavaScript
Глава 5
<input name="changeButtonB" type="button"
value="Change To C" onclick="changeToC() ">
<P>
Value of globalString
<P>
<input name="beforeB" type="TEXT" size="5,l">
<P>
Before clicking on "Change To B"
<p>
<input name="a£terB" type="TEXT" size="5,l">
<E>
After clrckrrjg on "Change To В"
<P>
<input name="beforeC" type="TEXT" size="5,l">
<P>
Before clicking on "Change To C"
<E>
<input name="afterC" type="TEXT" size="5,l">
<P>
After clrckrng on "Cnange To C"
<P>
</form>
</body>
</html>
Первым отображается начальное значение globalString.
Несмотря на то что переменная объявляется в разделе
<head> документа, сценарий, расположенный внутри
раздела <body> ее может использовать. Щелчок на
кнопке "Изменить на В" приводит к тому, что функция
changeToB() выводит на экран первоначальное значение
globalString, заменяет его на В и отображает новое
значение globalString (см, рис. 5.2).
The initial value ofglobalString is "A".
Value of globalString -
Before clicking он "Change To P"
Af i clicking OD "Change To B"
Before clicking on "Change To C"
After clicking on "Change To C"
apg--.-. ■ л:-.
■a» j®e±\
РИСУНОК 5.2. Глобальные илокалъные временные.
Для демонстрации того, что все функции в
документе могут использовать одну и ту же переменную, была
добавлена вторая кнопка для вызова другой функции.
Пс'сле щелчка на кнопке "Изменить на С", на
экране отображается текущее значение globalString, на
данный момент равное В, после чего значение globalString
изменяется на С. На рис. 5.2 показаны результаты
описанных действий.
Константы
Константа представляет собой переменную,
сохраняющую свое значение неизменным на всем протяжении
выполнения программы. JavaScript использует
встроенные константы для представления значений для
обычных математических действий, скажем, число пи.
Доступ к таким константам осуществляется через объект
math (см. главу 10).
Константы, определенные пользователем — это суть
определенные пользователем переменные, значения
которых не изменяются. Обычно при именовании
констант используются строчные буквы и они
определяются в начале программы.
JavaScript не поддерживает константы в
традиционном смысле. В языках программирования,
поддерживающих константы, определяемые пользователем, никакая
другая часть приложения не может изменять значение
константы после его определения. Попытка подобного
изменения приведет к ошибке. В JavaScript все
по-иному.
Даже при отсутствии уверенности в том, что
переменная не изменяется, все же стоит работать с переменными
для сохранения значений, которые будут использоваться
на протяжении всего сценария. Заменяя переменной
множество вхождений простых значений, сценарий
гораздо проще изменить впоследствии. Все что
потребуется предпринять — изменить начальное значение
переменной и сценарий полностью обновится.
Цвета
JavaScript поддерживает цвета, используемые при
создании HTML-страниц. Доступные цвета в виде строковых
литералов (не констант) сведены в табл. 5.8.
Перечисленные значения можно присваивать определенным
свойствам объекта.
В листинге 5.3 показано применение этих значений
для установки цветов отображаемых строк. Допускается
использование имени цвета либо его
шестнадцатиричного эквивалента. Хоть это может показаться
странноватым, однако выполняется только установка свойства
fontcolor для отображаемого на экране строкового
литерала. Неплохо было бы внимательным образом изучить
рис. 5.3.
ПРИМЕЧАНИЕ
Нельзя изменить цвет текста, уже выведенного в окно
браузера. В таком случае потребуется просто
перезагрузить документ с новым установленным цветом шрифта.
Листинг 5.3. Использование цветов в JavaScript.
<html>
<head>
Базовое подмножество языка JavaScript
Часть II
<ti ties-Цвета
</head>
<body>
JavaScript <:/title>
все из них поддерживаются JavaScript. В табл. 5.8
сведены все цвета, поддерживаемые JavaScript.
<h2>
^script type="text/javascript">
<! —
document .writeln( "Пикник для сотрудников
^"компании! " .fontcolor("crimson")) ;
// —>
</script>
</Ъ2>
<M>
-.script type="text/javascript">
<• —
document. writeln("19 июля в час
'•дня" . fontcolor ( "blue" ) ) ;
document, writeln ("<br>" + "He забудьте
^захватить свою семью!" .fontcolor ("#008000"));
// —>
</script>
</h4>
</fcody>
</html>
Шестнадцатиричная строка для каждого цвета
представляет собой комбинацию значений RGB (red/green/
blue — красный/зеленый/голубой), лежащих в основе
каждого цвета. Например, шестнадцатиричное значение
для цвета морской волны (aqua) выглядит как #OOFFFF.
В приведенном значении RGB: 00 — красный, FF —
зеленый и FF — голубой. Две цифры в шестнадцатиричном
значении позволяют определять 256 оттенков каждого
цвета. В цвете морской волны красная составляющая
равна 0, а это означает отсутствие в нем красного
цвета. Интенсивности зеленого и голубого максимальны.
Обеспечив соответствующие пропорции зеленого и
голубого в результате приводят к цвету морской волны.
Имея 256 комбинаций красного, синего и зеленого
можно скомпоновать около 16 миллионов цветов, однако не
fUeeTaJavoScn< -Меи -■
file E-J-t =Swr*. bo *ьнп(нпк?-л bus
I И ' i ■ timt
Пикни для сотрудников компании!
|Я
23 апреля в i есть вечера
Не забудьте захватить семьи!
►такт..
..*g. .*fem^.
РИСУНОК 5.3. Изменение цвета текста
в JavaScript.
Типы данных
Несмотря на недавнее обсуждение основных типов
данных, присваиваемых переменным, стоит напомнить, что
функции и объекты относятся к специальным типам
данных. Они предлагают достаточно интересные
способы сохранения и манипулирования данными
сценария. Особенности использования функций и объектов
рассматриваются в главе 8.
Выражения
Выражение (expression) — это набор операторов, которые
подобно группе объединяется в одно значение.
Результирующее значение будет относиться к одному из
следующих типов данных: boolean, number, string, function, object.
Таблица 5.8. Значения цветов с их шестнадцатиричными эквивалентами.
Цвет
aliceblue
aqua
azure
bisque
blanchedalmond
blueviolet
buriywood
chartreuse
coral
comsilk
cyan
darkcyan
darkgray
darkkhaki
R
FO
00
FO
I F
FF
8A
DE
7F
FT
\F
CO'
00
A9
BD
G
F8
FF
FF
E4
EB
2B
FJ8
FF
7F
FS
FF
8B
A9
l-;7
В
FF
; f
R
C4
CD
E2
87
00
50
IX
FF
8B
A9
6B
Цвет
R
antiquewhite
aquamarine
beige
black
blue
brown
cadetblue
chocolate
comflowerblue
crimson
darkblue
darkgoldenrod
darkgreen
darkmagenta
FA
7F
F5
00
00
A5
5F
D2
64
DC
00
B8
00
8B
EB
,FF
F5
00
00
2A
ЭЕ
69
95
14
00
86
64
00
D7
ID4
DC
00
FF
2A
АО
IE
El ■
ЗП
8B
OB
00
HI i
Цвет
darkolivegreen
darkorchid
darksalmon
darkslateblue
darkturquoise
deeppink
dimgray
firebrick
forestgreen
gainsboro
gold
gray
greenyellow
hotpink
indigo
khaki
lavenderDlush
lemonchiffon
lightcoral
lightgoldenrodyellow
lightgray
lightsalmon
lightskyblue
lightsteelblue
lime
linen
maroon
mediumDlue
mediumpurple
mediumslateblue
mediumturquoise
midnightblue
mistyrose
navajowhite
oldlace
olivedrab
orangered
palegoldenrod
paleturquoise
papaya whip
peru
plum
purple
rosybrown
saddlebrown
sandybrown
seashell
R
55
99
: 9
48
00
FF
69
B2
22
DC
F
80
All
FF
4B
FO
1 F
FF
FO
FA
D3
FF
87
BO
00
FA
80
00
93
7B
48
19
FF
! Г
FD
6B
FF
ЕЕ
AF
FF
CD
DT)
80
ВС
8B
F4
FF
G
6B
32
96
3D
CE
14
69
22
8B
DC
D7
80
IT
69
00
E6
FO
i A
80
1 A
D3
АО
CE
C4
FF
FO
00
00
70
68
D1
19
E4
D!
F5
8E
45
E8
ЕЕ
В
85
АО
00
8F
45
A4
F5
В
2F
СС
гл
8В
Г1
93
69
22
22
DC
00
80
2F
В4
82
8С
F5
CD
80
D2
D3
7А
FA
Dl
00
Е6
00
CD
DB
FF
CC
70
E1
AD
E6
23
00
AA
ЕЕ
D5
3F
DD
80
8F
13
60
ЕЕ
Основы языка JavaScript
Глава 5
Цвет
darkorange
darkred
darkseagreen
darkslategray
darkviolet
deepskyblue
dodgerblue
floralwhite
fuchsia
ghostwhite
goldenrod
green
honeydew
indianred
ivory
lavender
lawngreen
lightblue
lightcyan
lightgreen
lightpink
lightseagreen
lightslategray
lightyellow
limegreen
magenta
mediumaquamarine
mediumorchid
mediumseagreen
mediumspringgreen
mediumvioletred
mintcream
moccasin
navy
olive
orange
orchid
palegreen
palevioletred
peach puff
pink
powderblue
red
royalblue
salmon
seagreen
sienna
R
F
8B
8F
2F
94
00
IE
F
Fl
F8
DA
00
FO
CD
FF
E6
7C
AD
EO
90
Ff
20
77
FF
32
FF
66
BA
3C
00
C7
F5
FF
00
80
: F
DA
98
DB
F
FF
BO
FF
41
FA
2E
АО
G
8C
00
ВС
4F
00
BF
90
! A
00
F8
A5
80
FF
5C
F
E6
FC
ho
FF
ЕЕ
B6
B2
88
FF
CD
00
CD
55
B3
I A
15
F
E4
00
80
A5
70
FB
70
DA
CO
E0
00
69
80
8B
52
В
00
00
8F
4F
D3
1 F
FF
i0
l~F
FF
20
00
FO
5C
FO
1 A
00
f 6
FF
90
C1
AA
99
EO
32
FF
AA
D3
71
9A
65
FA
B5
80
00
00
D6
98
93
B9
CB
E6
00
П
72
57
2D
Пазовое подмножество языка JavaScript
Часть II
Цвет
Цвет
silver
slateblue
snow
steelblue
teal
tomato
violet
white
yellow
i 0
RA
FF
46
00
FF
1 E
1
CO
5A
ГЛ
82
80
63
ec
! F
Fl
CO
CD
i \
в:-
80
47
1-Е
FF
-f
skyblue
slategray
springgreen
tan
thistle
turquoise
wheat
whitesmoke
yellowgreen
87
70
00
D2
D8
Ю
' 5
F5
9A
CE
80
FF
B4
BF
i 0
D£-
l 5
CD
*-">
90
7F
8C
D8
DO
B3
F5
3
Выражение может быть простым, как отдельное
число или переменная, а также включать в себя переменные,
ключевые слова и операции. Например, выражение х= 10
присваивает значение 10 переменной х. Приведенное
выражение дает результат 10, потому применение
выражения в строке а-ля document.writeln(x=10) —
вполне допустимо.
JavaScript мог бы рассматривать информацию,
заключенную в кавычки, как строку и просто отображать
ее на экране, однако в данном случае выполняются
некоторые дополнительные действия. Сначала
рассчитываются все выражения, присутствующие в скобках, и
только после этого осуществляется собственно
отображение значения на экране. В рассматриваемом
примере на экран выводится 10.
Кстати, просто х — тоже допустимое выражение. В
данном случае выполняется только чтение значения
переменной из памяти. Не выполняется ни одного
присваивания. Разумеется, в выражениях можно применять
великое множество других операций помимо операции
присваивания (см. главу 6).
Комментарии
До сих пор дескрипторы комментария применялись
только для окружения текста сценариев, что
гарантировало отсутствие их отображения в старых браузерах. А
как насчет воспользоваться комментарием, чтобы
проигнорировать часть кода JavaScript? Оказывается, все
сильно смахивает на C/C++ и Java:
/ / Однострочный комментарий
Две косых черты (//) "скрывают" текст вплоть до
конца текущей строки. Допускаются и многострочные
комментарии:
.'* Же 1аете п<
строк? Так вот
вам и способ?
:тить в коммеь ?арии неск-:о ьк-:
/
// Комментарий
/* Многострочный
комментарий */
Листинг 5.4 демонстрирует применение обоих типов
комментариев. Две косых черты не обеспечат сокрытие
кода от старых браузеров. Дабы не создавать трудностей
упомянутым браузерам, для обрамления сценариев
продолжайте прибегать к паре <!-- и —>. Все, что в
листинге 5.5 закомментировано, на экране отображаться не
будет (см. рис. 5.4).
Листинг 5.4. Использование дескрипторов
комментариев в JavaScript.
В обоих типах комментариев излишние пробелы
игнорируются, поэтому оба следующих примера
корректны:
<html>
<head>
<title>KoMMeHTapnH в JavaScript</title>
</head>
<body>
<script type="text/javascript">
<!
// Переменные
var firstName = "Jon";
var lastName "Simpson";
var internetAddress = "jsimpson@compary.com";
Отобразить имя м фамилию пользователя
вместе с его адресом электронной почты.
// Скомоинировать три строки
document.writeln (firstName + " +
lastNarrie + "<Ьг>") ;
document.writeln ("e-mail address: -H
internetAddress);
// —>
</script>
</body>
</html>
Возможность сокрытия определенного кода от
интерпретации JavaScript дает возможность
документировать сценарии. Совсем неплохо по ходу пьесы добавлять
заметки, связанные с дизайном, дружеские
напоминания или предупреждения. Это окажет существенную
Основы языка JavaScript
помощь для других в плане понимания, что означают
те или иные разделы программы.
- • ' Unleashed - Netscape HMO
■;ТЪй - Edi Vt&tt go Communicator HelD _^
Jon l'itt 11
е-таД address: jsimpson@company.com
■т'впсййиИГ'1 . :... '- -.Jl"л .._;_^л-_^.
РИСУНОК 5.4. Комментарии на экране браузера не
отображаются.
Еще одно применение комментариев касается
отладки сценариев. Для целей тестирования можно упрятать
часть своего кода, а после его отладки с легкостью
вернуть, удалив всего лишь символы комментария. В
отличие от удаления частей сценария, такие действия
существенно экономят время.
Функции
В простейшей своей форме функции — это сценарии,
вызываемые по имени в любой момент. Разумеется, они
призваны серьезно расширить возможности JavaScript.
После прочтения HTML-документа
JavaScript-браузером, последний отыскивает все внедренные в документ
сценарии и выполняет инструкции шаг за шагом. Все это
очень удобно до тех пор, пока не потребуется, чтобы
вся программа или ее часть перешла в режим ожидания.
Организация такой части программы в виде
поименованной функции — один из путей решения
упомянутой проблемы.
После генерации определенных событий имеется
возможность запустить сценарий, воспользовавшись
именем, присвоенным функции. Другое преимущество
функции связано с повторным использованием кода
сценария.
В листинге 5.5 показан один из способов
использования функций JavaScript. Первое, на что стоит обратить
внимание — где будет объявляться функция. Объявлять
следуе не только переменные, но и функции. Не
забудьте все объявления функций поместить в пару
дескрипторов <script>.
Глава 5
ПРИМЕЧАНИЕ
Советую объявлять переменные в разделе <head>
HTML-документа. Это позволит получить уверенность,
что функция загрузится браузером до ее выполнения
в разделе <body>.
Для вызова функции достаточно поместить ее имя в
любом месте программы. Главная программа
размещается внутри раздела <body> и обрамляется парой
дескрипторов <script>. Результат использования функции
показан на рис. 5.5.
Листинг 5.5. Внедрение функции JavaScript.
<html>
<head>
<Ъ1Ъ1е>Использование функций в
JavaScript</title>
<scrip< type="text/javascript">
<!-
function displayMessage () (
document.write ("Функции JavaScript
^^исключительно просты в
-испот.зовании!<Ъг>") ;
J
I —>
</script>
</head>
<body>
<script type="text/javascript">
<J —
document, write ("Вызов функции
-•JavaScript.. .<p>") ;
displayMessage () ;
document.write("</р>Сделано. ") ;
// ->
</script>
</body>
</html>
ИслалмОВаНнв ■ в.№тЗ>- ■ -
?■ •/ j" ' ft' jS * # %
f. I "и!*.™! it attJi i c*[>* F лну .id
JJ if.ttooi^ t-A-M . ЙДУЛ'РПЯР^П'Л'ТТ.ЧЯГТ^МГ.Щ *|. "
j3j
*в* й&а
Вызов функции JavaScript...
Функции JavaScnpi исключителы -простыв использовании!
Вот и все, было.
КГ 1 "-■ ^pdaB^dSVV ™" .4*. :*>-JP
ra ?: ,1":
РИСУНОК 5.5. Вызов функции в JavaScript
Базовое подмножество языка JavaScript
Начав с главного сценария, JavaScript, как обычно,
выполняет первую строку, а затем попадает на вызов
функции dispIayMessage(). Выполняется поиск
функции в памяти и переход на ее первую строку. После
вывода на экран фразы Функции JavaScript
исключительно просты в использовании! отображается разрыв
строки. Как только функция завершается, выполнение
программы возобновляется с точки, где она
приостановилась по причине обращения к функции.
Как видно на рис. 5.5, каждая строка текста
отображается в определенной последовательности. Если у вас
громоздкая программа, несколько раз выводящая
сообщение на экран, вызовы функции можно вставить в
любых требуемых местах. Если позже потребуется
изменить текст сообщения, это делается лишь в одном
месте. Поменяйте его внутри тела функции, и
приложение полностью обновится. Преимущества
использования функций подробно описываются в главе 8.
Резюме
JavaScript сделал серьезный взнос в набор
инструментальных средств Web-разработчика. Именно в этом
языке доступны многие вещи, кажущиеся невозможными
для CGI, подключаемых модулей и Java. JavaScript
обеспечивает взаимодействие с пользователем во время
просмотра HTML-документа.
Сценарии помещаются непосредственно в HTML-
документы и обрамляются парой "ескрипторок <script>.
Для того чтобы JavaScript игнорировал отдельные части
сценария, воспользуйтесь корректным типом
комментариев.
Интерпретатор JavaScript прочитывает каждую строку
сценария, начиная с самой первой. Лексемы
представляют собой небольшие отдельные слова, фразы и знаки,
доступные JavaScript. Лексемами могут быть литералы,
идентификаторы и операторы.
К доступным типам данных относятся: number,
boolean, string, function и object. В один и тот же момент
времени переменная может хранить данные только
одного типа. Для объявления переменных либо
воспользуйтесь ключевым словом var, либо просто проинициа-
лизируйте переменную. Для повышения читабельности
сценариев присваивайте переменным осмысленные
имена.
Выражение — это набор операторов, результатом
выполнения которых является единственное значение.
Наиболее типичные выражения сводятся к присвоению
значений переменным. Операция присваивания =
служит для присваивания значения правого операнда
переменной, записанной как левый операнд. JavaScript
поддержи
Операции
В ЭТОЙ ГЛАВЕ
Операции присваивания
Арифметические операции
Операции сравнения
Строковые операции
Условные операции
Булевы операции
Операция typeof
Определение и вызов функций
Операции со структурами данных
Поразрядные операции
Приоритеты выполнения операций
Основной смысл написания сценариев связан с
необходимостью организации ввода, вычислений,
отображения либо управления данными. До сих пор внимание
акцентировалось на способах отображения данных при
помоши JavaScript. Для создания хороших программ
необходимо научиться также оценивать и изменять
данные, с которыми JavaScript-сценарии имеют дело.
Инструментальные средства, реализующие подобную
работу, носят название операций.
Операции — суть символы и идентификаторы,
которые представляют способы изменения данных либо
вычисления комбинаций выражений. Язык JavaScript
поддерживает как бинарные, так и унарные операции.
Бинарные операции работают с двумя операндами в
выражении, например, 9 + х, тогда как для унарных
операций достаточно только одного операнда, например,
х++.
Оба приведенных примера демонстрируют
арифметические операции; их использование будет понятно
тем, кто знаком с основами математики. Другие типы
операций JavaScript оперируют со строками и
логическими значениями. Они не настоль хорошо знакомы
математикам старой закалки, однако их чрезвычайно
просто изучить и впоследствии предельно удобно
пользоваться при работе с большими объемами текста
в Internet. В этой главе детально рассматривается
каждый тип операций в JavaScript.
ПРИМЕЧАНИЕ
Netscape предлагает консольный режим работы,
который обеспечивает отображение результатов
вычисления выражений по мере их ввода. В версиях,
предшествующих 4.05, данные отображались в главном окне
браузера. Начиная с версии 4.05, с целью
обеспечения свободного доступа и отображения ошибок
JavaScript консоль была реализована в виде
отдельного окна.
Этот режим обеспечивает превосходный способ
проверки результатов вычисления выражений. Для
активизации режима в поле Location наберите:
javascript:
Теперь можно вводить практически любую строку
JavaScript, включая объявление переменных, функций
и объектов, а также выражения. Пример
использования упомянутой возможности показан на рис. 6.1.
Был выполнен ввод 12 << 1 и дважды нажата клавиша
Enter.
'-^•'■.'■1И.1Ш1.1ЬШ1.11 Ш H4H.LM
ЕШШ
javascript typein
nafoft..; ..£ЯШ.
а
Si
РИСУНОК 6.1. Использование консольного режима в Netscape.
Базовое подмножество языка JavaScript
** Часть II
Операции присваивания
Рассмотрим операцию, о которой уже упоминалось
ранее, — операцию присваивания. Ее основная функция
заключается в присваивании переменной некоторого
значения, помещая таким образом это значение в
память.
Например, выражение х = 20 обеспечивает
присваивание переменной х значения 20. Когда JavaScript
встречает операцию присваивания (=), вначале
анализируется правая часть с целью определения значения.
После этого рассматривается левая часть — она должна
представлять место для хранения значения. Если слева
находится переменная, ей присваивается значение. В
рассматриваемом случае х получает определенное
значение 20. Операция присваивания всегда выполняется
справа налево, так что выражение 20 = х вызовет
ошибку в JavaScript, поскольку будет предпринята попытка
присвоить 20 новое значение. Такое действие
невозможно, поскольку 20 не является переменной, но целым
числом, значение которого не может быть изменено.
JavaScript поддерживает 11 других операций
присваивания, которые фактически являются комбинациями
операции присваивания и арифметических или
поразрядных операций. Сокращенные версии операций
показаны ниже:
Комбинации операции присваивания и арифметических
операций:
х += у сокращенная запись для х = х + у
х - у сокращенная запись для х = х - у
х *= у сокращенная запись для х = х * у
х /= у сокращенная запись для х = х / у
х %= у сокращенная запись для х = х % у
Комбинации операции присваивания и поразрядных
операций:
х «= у сокращенная запись для х = х « у
х »= у сокращенная запись для х = х » у
х »>- у сокращенная запись для х = х » у
х &= у сокращенная запись для х = х & у
х "= у сокращенная запись для х = х ~ у
х | = у сокращенная запись для х = х | у
Арифметические операции
При работе с числами используются арифметические
операции. К основным операциям этой группы
относятся знак "плюс" (+), суммирующий два значения, знак
"минус" (-), вычитающий одно значение из другого,
звездочка (*), перемножающая два значения, а также
косая черта (/), которая обозначает деление одного
значения на другое.
Когда JavaScript встречает одну из перечисленных
операций, выполняется анализ правой и левой частей
выражения, имеющий целью отыскать значения, с
которыми предстоит работать. В примере 7 + 9 JavaScript
воспринимает операцию плюс и просматривает обе
части выражения, в результате чего находится 7 и 9.
Далее операция плюс обеспечивает суммирование двух
найденных значений и устанавливает результат
выражения равным 16. Используя арифметические операции в
комбинации с операцией присваивания, можно задавать
новое значение переменной:
х = 7 + 9
Переменная х будет теперь равна 16, и ее можно
использовать снова, в том числе присваивать ей новые
значения:
х
х + 1
Посмотрите на два последних примера. Переменной
х было присвоено какое-то значение. Затем х
присваивается новое значение — текущее (в данный момент
равное 16) плюс 1.
Увеличение значения переменной на 1 и затем
присваивание ей же этого нового значения представляет
собой достаточно стандартную операцию. Последняя
настолько часто используется в компьютерных
программах, что некоторые языки включают специальные
сокращенные операции, чтобы упростить запись
увеличения и уменьшения значения переменной. JavaScript -
как раз относится к таким языкам. Для записи
инкремента применяется ++, а для декремента — —
++i — то же самое, что и i = i + 1
—i — то же самое, что и i = i - 1
Существует возможность использования этих
сокращенных операций в префиксной и постфиксной
формах. Таким образом меняется порядок возврата
значения выражения и установки нового значения.
Листинг 6.1 демонстрирует работу операций
инкремента и декремента.
Листинг 6.1. Пример операций инкремента и
декремента.
<html>
<head>
<title>OnepauMM инкремента и декремента
</title >
</head>
<body>
<script type="text/ javaScript">
<!
var i = 0;
var result = О
Операции
Глава 6
document.write("EcyiH i = О, ") ;
document, write (" i возвращаем? свое значение");
document, write (" после инкрементирования : ") ;
// Префиксная форма инкремента
result = ++i;
document.write(result);
/*/ Сбросить значение переменной
i = О;
document. write ("<br>i++ возвращает значение
-i") ;
document.write(" перед инкремектарованием : ") ;
// Суффиксная форма инкремента
result = i++;
document. write (result) ;
// Сбросить значение переменной
i = О;
document. write ("<br>--i возвращает значение
-i");
document.write(" после декрементирования : ") ;
// Префиксная форма декремента
result = — i;
document..write(result) ;
// Сбросить значение переменной
i = О;
documen t. wri te (" <br>i — возвращает значение
document.write(" перед декрементиро&аннем " ;
// Суффиксная форма декремента
result = i—;
document.write(result);
,v —>
</script>
</body>
</html>
После исследования кода, представленного в
листинге 6.1, важно понять, в какой момент
увеличивается значение переменной i — перед или после
вычисления выражения.
В первом примере переменная result получает
первоначальное значение i плюс 1. Во втором примере
результат устанавливается равным первоначальному
значении: i до выполнения инкремента i. Два следующих
примера работают аналогичным образом, однако
применительно к операции декремента.
Результаты вычислений этих четырех примеров
показаны на рис. 6.2. Хотя это может показаться и
ненужным, рассмотренные особенности принесут несомненную
ПОЛЬЗ' при записи повторяющихся частей сценария.
Данная тема освещается в главе 7.
Унарная операция отрицания (-) применяется в
случаях, когда требуется заменить положительное значение
на отрицательное и наоборот. Она названа унарной, т.к.
работает только с одним операндом. Если, например,
присвоить значение переменной х (х = 5), применить к
х операцию отрицания, а затем результат присвоить у
(у = -х), то значение у будет равно -5.
Ог • ■ чи i «к •
'■? вч. .. . . .....^
Г5
Еслш-0 I ей30ращ?лтсвое значение поспйимкремент^ования' 1
I++ вОЗОращаетзначение i перед ЗМенти эеанием О
-i ^озеращает значен. ~i после декрементирования . 1
i« воэвращаетэначение1 перед i крементироеанием О
- 1 ■'■'■- • -_лй *• „„С*- \J
РИСУНОК 6.2. Операции инкремента и декремента из
листинга б. J.
Противоположность также истинна, т.е. при
отрицании отрицательного числа результат будет
положительным. В обоих примерах операция отрицания не изменяет
значения переменной х, которое остается равным 5.
Операция взятия по модулю обозначается знаком
процента (%). Найти модуль двух операндов означает
найти остаток после деления первого операнда на
второй. В примере х = 10 % 3 переменная х получит
значение 1, поскольку результатом деления 10 на 3 будет
3 с остатком 1. При помощи операции взятия по
модулю можно легко определить, что одно число является
множителем другого: при этом модуль этих двух чисел
будет равен 0. Это истинно, например, для выражения
х = 25 % 5. 25 разделить на 5 равно 5 без остатка,
значит х будет равно 0.
ПРЕДУПРЕЖДЕНИЕ
В ряде случаев Netscape Navigator возвращает
неправильные значения, когда имеет дело с дробями.
Например. 10/3 должно вернуть 3 '/3. В окне консоли
Netscape в качестве результата вычисления 10/3
отображается 3.3333333333333335. Небольшая
погрешность в шестнадцатом знаке после десятичной точки
связана со способом, по которому дроби хранятся в
памяти компьютера. Microsoft Internet Explorer
решает эту проблему, отображая только 14 знаков после
запятой. В этом случае результатом того же
вычисления будет 3.33333333333333.
Операции сравнения
Операции сравнения используются именно для
сравнения выражений. Выражения, которые используют one-
Базовое подмножество языка JavaScript
Часть И
рации сравнения, отвечают на вопрос, связанный с
двумя значениями. Ответом может быть true или false.
Два знака "равно" (==) обозначают операцию
равенства. Использовать операцию равенства между двумя
операндами — означает определить, являются ли
значения этих двух операндов равными. Листинг 6.2
демонстрирует способ отображения результатов при
выяснении равенства двух переменных.
Листинг 6.2. Использование операции равенства.
<html>
<head>
<title>0nepaU4H сравнения*:/tit le>
</head>
<body>
<script type="text/javascript">
// Объявление переменных
var x = 5;
var у = 5;
var z = 10,-
// Отображение результатов
document.write ("x = " + x + "<br>") ;
document .write ("y = " + Y + "<br>") ;
document.write("z = " + z + "<br>");
document.write ("Равны ли значения х и у
w(x = у)? ");
document.write(x = y);
document.write ("<Ьг>Равны ли значения
-у и z (у = z)? ");
document.writeln(у = z) ;
II -->
</script>
</body>
</html>
Необходимо убедиться, что при написании
программы используется именно требуемая операция. Еще раз
следует подчеркнуть, что операция равенства (==)
проверяет, являются ли два значения равными, тогда как
операция присваивания (=) устанавливает значение
переменной. В случае использования не той операции
интерпретатор JavaScript даст об этом знать. На рис. 6.3
показаны результаты выполнения кода из листинга 6.2.
В табл. 6.1 приведен список всех операций
сравнения.
Таблица 6.1. Операции сравнения._
Операция Описание
Операция равенства. Возвращает true, если
операнды равны между собой.
Операция неравенства. Возвращает true, если
операнды не равны между собой.
Операция "больше". Возвращает true, если
значение левого операнда больше значения
правого операнда.
Операция "больше либо равно". Возвращает
true, если значение левого операнда больше
либо равно значения правого операнда.
Операция Описание
Операция "меньше". Возвращает^ие, если
значение левого операнда меньше значения
правого операнда.
Операция "меньше либо равно". Возвращает
1гие,еслизначениелевогооперандаменыие
либо равно значения правого операнда.
..... ,_.... _
H-|-iM
ч.~ Л' .**у &*.
1*Щ
V=6
10
Равны пи значен хиу(х — y)?true
Равны пи ЭНЭЧ6НИ у и z (у—z)? false
РИСУНОК 6.3. Операция равенства изяистинга 6.2.
Операции сравнения обычно используются в JavaScript
для принятия решений. Они помогают выбирать путь,
по которому будет следовать сценарий. Более
подробно эта темя рассматривается в главе 7.
ОПЕРАЦИИ СРАВНЕНИЯ В РЕАЛИЗАЦИИ JAVASCRIPT 12
В NAVIGATOR
До появления JavaScript 1.1 язык был очень терпим к
сравнению операндов различных типов. Например, при
сравнении числа 7 со строкой "7" JavaScript сначала
преобразовывал, или приводи/ операнд строки к
числу и затем выполнялось сравнение. Для примера с 7
и "7", операнды считались равными.
В JavaScript 1.2 программист должен сначала
преобразовать строку в числовую форму либо число в
строку. Если этого не сделать, JavaScript никогда не
скажет, что они равны. Листинг 6.3 показывает способ
сравнения строки и числа, который возвращает одни
и те же результаты для всех версий JavaScript. На рис.
6.4 приведена реакция JavaScript 1.2 на три различных
сценария. Листинг 6.3 может запускаться только в
браузерах, поддерживающих JavaScript 1.2, например,
в Netscape Navigator 4.0-4.04.
Листинг 6.3. Тестирование различных версий
JavaScript.
< tm">
<head>
<title>OnepaUMM
</head>
<body>
cpaBHemia</title>
<script language=" JavaScript" >
Операции
Глава 6
<!
var x = "3";
var у = 7;
document.write('x = "3"') ;
document.write("<br>");
document.writeC'y = 7");
document.write ("<brXhr>");
document write ("JavaScript 1.0 и 1.1<Ъг>");
document.write("x = 3 : ") ;
document.write(x = 3) ;
("ocument.write("<br>")
document.write('y = "7" : *);
document.write(y = "7");
II—>
</script>
<script language="JavaScriptl.2">
<! —
document, write ("<brXbr>JavaScript 1. 2<br>") ;
document.write("x = 3 : ") ;
document.writ- (x = 3) ,
document.write("<br>");
document. write( 'y = ,,7" : ');
document.write(y = "7");
II—>
</script>
<script language="JavaScriptl.3">
<! —
document.write ("<brXbr>JavaScript 1.3
wK выше<Ъг>") ;
document.writel"x = 3 : ") ;
document .writ '(x = 3) ;
document.write("<br>");
document.write ('y =^ "7" : ) ;
document.write(y = "7") ;
II—>
</script>
<script language="JavaScript">
<! —
document write ("<ЬгХЬг>Универсальныикод
'•для всех версий.<Ьг>") ;
document.write("x -0 = 3: ") ;
document, write (x - 0 = 3) ;
document, write ("<br>") ;
document, write ('"" + у = "7" : ');
document.write ("" + у == "7") ,
</script>
</body>
</html>
Строковые операции
Набор строковых операций, доступный в JavaScript,
включает все операции сравнения и операцию
конкатенации (+). При помощи операции конкатенации
строки соединяются вместе в одну длинную строку (см.
листинг 6.4).
Листинг6.4.Конкатенац| строк.
<html>
<heac>
<title>JavaScript Unleashed</title>
</head>
<body>
cscript type="text/javascript">
<!
/ . Объявление переменных
var a = "www";
var b "company" ; [sr]
var с = "com";
var sumOfParts;
var addressl ;
var address2;
document.write ("Part a is equal to \""
^+ a + "\".");
document.write(n<br>Part b is equal to \"
w+ b + "\".,,).-
document.write ("<br>Part с is equal to \"
w+ с + ,.у.дп..).
sumOf Parts = a + "."+ b +••."+ c;
addressl = "WWW.COMPANY.COM" ;
address2 = "www.company.com";
. . Отображение результатов
document.write (,,<brXbr>Is sumOfParts equa]
^to " + addressl + "? ") ;
document, write (sumOfParts == addressl^;
document.write("<br>Is sumOfParts equal to
<-+ address2 + "? ") ;
document, write (sumOfParts == address2) ;
document, write ("<Ъ >Is sumOfParts greater
•-than " + addressl + "? ") ;
document.write(sumOfParts addressl);
II—>
<, script>
< body>
</html>
4 'y Л
a.
-А- ма.лЩ1^^#Ц^лИЯ?ттП|Д1яя
»--3"
y-7
JavaScriptl.Oil.1
* 3
у "7" Irue
I JavsSc™ 1 2
x -3 raise
L у - "7" false
\ JavaSc и выше
-' true
[ y== " true
Универсапьнь i код гя всех версий.
■О- 3 true
+ у-= Г Irue
'ISISiim-fikiiie "'•"li""'- »>™L **
1 & j'=.m i
РИСУНОК 6.4. Сравнение строк и "ель.лчисел излиспшнга 6.3.
Сначала сценарий выполняет инициализацию трех
переменных, хранящих три части Web-адреса. Затем все
три части соединяются вместе и разделяются
необходимыми точками, присутствующими во всех Web-адресах.
Далее вьшолняется проверка, содержит ли sumOfParts
определенный адрес Internet.
Рисунок 6.5 отражает тот факт, что JavaScript при
сравнении строк учитывает регистр символов. Сравне-
Базовоеподмножествоязыка JavaScript
"Часть II ~"
ние выполняется слева направо, по ^SCII-кодам
каждого символа в обеих строках. Если все коды
соответствуют друг другу, строки равны. Все прописные буквы
имеют коды, меньшие, чем их эквиваленты в нижнем
регистре, потому и последнее сравнение в листинге 6.3
возвращает true.
JwaScri • t Unleostiad - Microsoft Internal ■ law
JL_ ' ^ _ _ _■
*JCVWINOOWS\DesI(top\?65bBG_LIH>itml
Part a I; equal to *
Part b is equal to "company"
Part с is equal to "сот*
Is sumOfParts equal to WWW.COMPANY.COM? false
Is sumOfPa equal to www company.com? true
IssumOflPartsgrcatotnanWrTWXOMPANYCOMTrnK
Corn
РИСУНОК 6.5. Результат выполнения кода из листинг \ 6.4.
Условные операции
Две операции ? и : используются для формирования
условных выражений. Эти условные операции
выполняют те же действия, что и оператор if. Условное
выражение возвращает одно из двух значений, в
зависимости от логического значения какого-то выражения.
Например, следующее условное выражение будет
сообщать пользователю; что он — миллионный
посетитель страницы:
Таблица 6.2. Булевы операции.
Операция Описание
var resultMso = (miniHits == 1000000) ?
^щитом! *' : "На щюте. " ;
alert(resultMsg);
"Со
При условии, что iiuinHits равен 1000000 в любом
месте программы, это выражение возвращает строку "Со
щитом!": в противном случае - "На щите." Вторая
строка приведенного примера отображастрезультатдля
пользователя при помощи функции alert()
Условное выражение может применяться для
возврата данных любого типа, например, number или boolean.
Следующее выражение возвращает строку или число в
зависимости от значения useString:
var result = useString ? "семь" : 7 ,-
document.write(result);
Булевы операции
Булевы операции (также называемые логическими)
используются в дополнение к выражениям,
возвращающим логические значения. Действие этих операций
проще понять, изучив их использование совместно с
операциями сравнения. Таблица 6.2 содержит
описание трех булевых операций. Приведены примеры с
синтаксисом expressioni [operator] expression2 и с
[operator] expression.
Операция typeof
Операция typeof возвращает тип данных, хранящихся в
операнде в текущий момент времени. Это оказывается
особенно полезным при выяснении, была ли
определена переменная. Рассмотрим следующие примеры:
typeof unescape возвращает строку '"function",
typeof undcfinedVariable возвращает строку "undefined".
&& Логическая операция И (конъюнкция). Возвращает true, если оба выражения expressioni и expression2 имеют
значения true. В противном случае возвращается false. Рассмотрим примеры:
(1 > 0) && (2 > 1) возвращает true.
(1 > 0) && (2 < 1) возвращает false.
\\ Логическая операция ИЛИ (дизъюнкция). Возвращает true, если хотя бы одно из значений expressioni или
expression2 равно true. Если ни одно из expressioni и expression2 не равно true, возвращается false.
Рассмотрим примеры:
(1 > 0) || (2 < 1) возвращает true.
(1 < 0) || (2 < 1) возвращает false.
! Логическая операция НЕ (отрицание) —унарная операция, которая возвращает противоположное значение
булева выражения. Если expression равно true, возвращается false, а если expression — false, возвращается
true. Эта операция не изменяет значения выражения, поскольку работает подобно арифметической операции
отрицания. Рассмотрим примеры:
! (1 > 0) возвращает false.
! (1 < 0) возвращает true.
typeof 33 возвращает строку "number",
typeof "A String" возвращает строку "string"
typeof true возвращает строку "boolean",
typeof null возвращает строку "object".
ПРЕДУПРЕЖДЕНИЕ
Операция typeof была добавлена в Navigator 3.0
(JavaScript 1.1). Она будет работать только в JavaScript
1.1 и старших версиях браузеров.
Определение и вызов функций
Функции подробно рассматриваются в главе 8. Сейчас
ознакомимся с двумя операциями, имеющими
отношение к функциям. Первая — операция, которая
обозначается круглыми скобками и всегда следует за именем
функции. Например, функция displayName()
объявляется следующим образом:
function displayNameO £
[. ператоры]
}
Операция вызова функции также используется при
вызове- функции из любого места сценария:
displayName()
Круглые скобки показывают, что используется
функция, а не другой определенный пользователем
идентификатор.
Вторая операция записывается символом запятой.
Она используется для отделения друг от друга
аргументов функции. Аргументы всегда заключаются в круглые
скобки. Функция displayName() с двумя аргументами
могла бы выглядеть так:
function displayName (argumentl, arguments) {
[операторы"
(
Операции со структурами данных
Оперсции со структурами данных — термин, который
используется при классификации двух операций,
необходимых для работы со структурами данных.
Структуры данных — это концептуальные основы,
применяемые для хранения одной или более базовых частей
данных организованным способом. BJavaScriptTaKOBH-
ми структурами являются объекты, группирующие
данные для конкретных целей.
О 1ерация. уже знакомая тем, кто имел дело с
объектами обычно называется "точка". Обозначается она
точкой (.) и носит название операцией взятия члена
структуры. Она позволяет обращаться к члену (коим
Опертцш El^^l
Глава 6 ЯВ^Н
может быть переменная, функция или целый объект),
принадлежащему определенному объекту. Синтаксис
операции таков:
ob jectName. variableName
ИЛИ
objectName. f unctionName ()
ИЛИ
objectName. anotherOb ject
Часть данных, к которой обращаются, должна стоять
справа от точки. Такой способ обращения к члену
структуры (к переменной, функции или объекту) обычно
называется "точечной нотацией".
Операция индексирования применяется при
обращении к части данных из массива. Обозначается она
парой квадратных скобок и позволяет получить доступ к
любому элементу массива. Массивы в JavaScript
реализованы в виде объектов (см. главу 10). Ниже показан
синтаксис операции индексирования:
arrayName[indexNumber]
Операция индексирования предполагает
использование целого числа (индекса элемента массива) indexNumber.
IndexNumber определяет индекс в arrayName и
обеспечивает доступ к любому члену массива.
Поразрядные операции
На аппаратном уровне данные хранятся в памяти
поразрядно. Они записываются в двоичной системе
счисления, в которой любое целое число может быть
представлено при помощи символов 0 и 1. В зависимости от
размещения, каждый единичный разряд представляет
значение 2 в степени п, где п — номер разряда, считая
справа.
Например, целое число 12 может быть
представлено двоичным кодом 1100:
О х 2" + О х 21 + 1 х 22 + 1 х 23 = 12
Для хранения большого числа, скажем 237 (11101 101
в двоичном коде), потребуется 8 разрядов памяти:
1х2° + 0х21 + 1х22 + 1х23 + 0х2< + 1
х 25 + 1 х 26 + 1 х 2' = 237
Для хранения целочисленных значений в памяти
отводится 32 разряда. В памяти число 237 фактически
выглядит как 00000000000000000000000011101101, но
для краткости незначащие нули не указываются.
Несмотря на то что целое число можно записывать в
десятичном, восьмеричном или шестнадцатиричном виде,
в памяти оно хранится в двоичной форме.
Базовое подмножество языка JavaScript
Часть II
Для представления отрицательных значений
используется крайний слева (самый старший) разряд.
Взгляните на следующие примеры:
1ООООООООООООООООООООООООООООО01 = 2147483648 +
1 = -2147483647
10000000000000000000000000000011 = -2147483648 +
3 = -2147483645
11111111111111111111111111111111 = 2147483648 +
2147483647 = 1
11111111111111111111111111111ИО = 2147483648 +
2147483646 = 2
Работа с двоичными представлениями целых чисел в
JavaScript обеспечивается через поразрядные операции.
Самая простая из поразрядных операций — унарная
операция дополнения до единицы, которая обозначается
тильдой (~). Она изменяет значение каждого разряда операнда
на противоположное, поэтому относится к операциям
отрицания. Рассмотрим, как выполняется дополнение до
единицы для числа 6:
х = -6
х = -00000000000000000000000000000110
х = 11111111111111111111111111111001
х = -7
Поразрядные логические операции
Поразрядные логические операции рассматринают
операнды поразрядно. Операция выполняется над каждой
парой разрядов. Например, применение поразрядной
операции И к числам 01111 и 11011 дает в результате
число 01011. В табл. 6.3 показан ход выполнения
приведенного примера.
Поразрядные операции сдвига
Все поразрядные операции сдвига требуют двух
операндов. Левый операнд — это целое число, разряды
которого будут сдвигаться. Правый операнд задает
количество разрядов, на которое необходимо сдвинуть
двоичное представление целого числа. Таблица 6.4
содержит список поразрядных операций сдвига.
Таблица 6.3. Использование поразрядных логических операций.
Выражение Результат
0& 1
1&1
1 &0
1&1
1 &1
&
Поразрядная операция И возвращает 1 , если оба операнда равны 1 Иначе возвращается 0. Например, 15 &
27 возвращает 11 (01111 &11011 возвращает01011).
Поразрядная операция ИЛИ возвращает 1, если хотя бы один из операндов равен 1. Иначе возвращается 0.
Например, 15 | 27возвращает31 (01111 | 11011 возвращает 11111).
Поразрядная операция ИСКЛЮЧАЮЩЕЕ ИЛИ возвращает 1 если только один из операндов равен 1 но не
оба. Иначе возвращается 0. Например, 15 " 27 возвращает 20 (01111 | 11011 возвращает 10100).
Таблица 6.4. Поразрядные операции сдвига.
Операция
Описание
Операция сдвига влево возвращает целое число со сдвинутыми на несколько позиций влево разрядами.
Появившиеся младшие разряды заполняются нулями. Два следующих примера демонстрируют сдвиг числа 15
влево на 1 и на 2 разряда:
15 « 1 возвращает 30 (1111 « 1 возвращает 11110)
15 « 2 возвращает 60 (1111 «*" возвращает 111100)
Обратите внимание, что сдвиг положительного целого числа влево на п разрядов эквивалентен умножению
этого числа п раз на 2. В большинстве случаев компьютер выполняет сдвиг влево быстрее умножения на 2
По этой причине, вместо многократного выполнения операции умножения обычно отдают предпочтение
поразрядному сдвигу влево. Относительно небольшое увеличение скорости в конечном итоге приводит к
существенной экономии.
Применение сдвига влево к отрицательному целому числу приводит к отрицательному или положительному
целому числу — в зависимости от значения старшего разряда после выполнения сдвига влево.
Операция сдвига вправо с копированием знака (арифметический сдвиг вправо) возвращает значение целого
числа со сдвигом его разрядов на несколько позиций вправо. Все пустые разряды заполняются копией
крайнего левого (т.е. знакового) разряда. Копирование крайнего левого разряда гарантирует, что целое число
останется положительным или отрицательным. Применение данной операции также представляет собой
Операции
Операция
Глава 6
Описание
более эффективный способ деления положительного четного целого числа на 2. В случае положительного
нечетного целого числа арифметический сдвиг вправо то же самое, что и деление п раз на 2 с
отбрасыванием остатка. Рассмотрим следующие примеры:
15 » 1 возвращает 7 (1111 > > 1 возвращает 0111)
-15 » 1 возвращает-8(11111111111111111111111111110001 » 1 возвращает
11111111111111111111111111111000)
>>> Операция сдвига вправо с заполнением нулями возвращает значение целого числа со сдвигом его разрядов
на несколько позиций вправо. При этом все пустые старшие разряды заполняются нулями. Воздействие на
положительные целые числа этой операции обеспечивает тот же самый результат, что и операция логического
сдвига вправо. Так получается ввиду того, что копируемый знаковый разряд для положительных целых чисел
■— всегда нуль. Что касается отрицательных целых чисел, то операция логического сдвига вправо изменит
значение старшего разряда с 1 на 0. Результат будет всегда целым числом, большим или равным 0.
Рассмотрим несколько примеров:
15 »> 1 возвращает 7 (1111 >» 1 возвращает 0111)
-15 »> 1 возвращает 2147483640 (11111111111111111111111111110001 >» 1 возвращает
01111111111111111111111111111000)
Зачем вообще возиться с разрядами?
Поразрядные операции в большинстве сценариев не
нужны. Возможно, иметь дело с разрядами вообще не
придется. Однако, в некоторых случаях без такой
возможности не обойтись.
Примером может послужить перевод числа из
десятичной системы счисления в шестнадцатиричную. Это
потребует некоторых дополнительных усилий, т.к.
JavaScript позволяет отображать только десятичные
представления чисел, хранящихся в памяти. Встроенные
способы отображения чисел в других системах
счисления отсутствуют. Используя поразрядные операции,
преодолеть упомянутое препятствие относительно
просто. Например, переменная х хранится в памяти в
двоичном коде. Показанный ниже код обеспечивает вывод
значения переменной х в десятичном представлении
(т.е. 220):
var х = OxDC;
// Отображение числа 220
document.writeln(х);
В JavaScript не существует какого-либо способа
отображения 220 в шестнадцатиричном формате (т.е. DC).
Функция подобного рода оказалась бы весьма полезной
при оперировании с кодами цветов HTML, которые
записываются в шестнадцатиричной системе. Самый
простой способ получить шестнадцатиричное число — взять
двоичный код целого числа и перевести его в
шестнадцатиричный. Точно так же шестнадцатиричные коды
достаточно просто переводятся в двоичные.
Четыре разряда памяти могут определять 16
различных чначений. Поскольку для записи
шестнадцатиричных кодов применяются 16 цифр, для хранения каждой
шестнадцатиричной цифры требуется как раз 4
разряда. В 32-разрядном целом числе 4 младших разряда
памяти представляют цифру младшего разряда
шестнадцатиричного целого числа. Следующие 4 разряда
хранят следующую цифру и т.д.
Для того чтобы прочитать только 4 разряда,
используется операция & и управляющее значение.
Управляющее значение должно хранить 1 в каждом разряде,
соответствующем читаемому разряду целого числа.
Поскольку требуется значение первых 4 разрядов,
управляющее значение должно содержать 1 в первых четырех
разрядах. Все другие разряды должны содержать 0. Для
чтения младших четырех разрядов управляющее
значение должно быть равно 1111 (15 или OxF):
Управляющее значение:
00000000000000000000000000001111 &
Преобразуемое целое:
00000000000000000000000011011100 =
Результат:
00000000000000000000000000001100
Результат — это копия первых 4 разрядов
преобразовываемого целого числа. Сравните его с каждой из 16
шестнадцатиричных цифр и убедитесь, что оно равно
С. Чтобы найти следующую шестнадцатеричную
цифру, необходимо скопировать следующих 4 разряда
этого целого числа. Это лучше всего сделать путем сдвига
всех разрядов целого числа на 4 позиции вправо и
затем воспользоваться тем же управляющим значением:
Управляющее значение:
00000000000000000000000000001111 &
Преобразуемое целое:
00000000000000000000000000001101 =
Результат:
00000000000000000000000000001101
Базовое подмножество языка JavaScript
Часть II
Результат соответствует цифре D.
Листинг 6.5 демонстрирует рассмотренный алгоритм
целиком. Используя только операции, упомянутые
ранее, можно преобразовать любое 8-разрядное число в
строковое представление его шестнадцатиричного
эквивалента. Для этого сначала надо присвоить переменной
intValuc преобразуемое значение. Затем отобразить
значение, дабы подчеркнуть тот факт, что JavaScript
отображает только десятичное значение DC, т.е. 220.
Далее выполняется перевод двоичной формы числа 220 в
шестнадцатиричную и отображение результата (см. рис.
6.6).
Листинг 6.5. Преобразование десятичного числа в шестнадцатиричное с использованием поразрядных операций.
<html>
<±iead>
<title>ripeo6pasoBaHHe десятичного числа в шестнадцатиричное</ь1Ы.е>
</head>
<:' >dy>
<script type="text/javascript">
6-разрядное числе
// ОбУьявление переменных
var origmallnt;
/'' intValue хранит любое
var intValue = OxDC;
var contro lvalue = OxF;
■var fourBi tValue ;
var hexChar = "" ;
var hexString = "" ;
document.writeln("При отображении целых чисел, хранящихся
document.writeln("JavaScript использует их десятичные ") ;
памяти,
document.writeln("эквиваленты: "
original lnt
fourBitValue
hexChar
hexChar
hexChar
hexChar
hexlhar
hexChar
hex^har
exChar
hexChar
hexChar
' exlhar
hexChar
hexChar
hexChar
hex^har
hexChar
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
= intValue;
= controlValue £
(f ourB itValue
(f our BitValue
(four BitValue
(f ourBitValue
(fourBitValue
(fourBitValue
(f I'UrBitValue
(f'i-urBitValue
(f'i-urBitValue
(f'I'UrBitValue
(fourBitValue
(f ourBitValue
(fourBitValue
(f'I'UrBitValue
(f'I'UrBitValue
(f ourBitValue
=
as
=
=
=
_=
=s
=
=
=
=
=
==
s=
=
=
0x0)
Oxl)
0x2 >
0x3)
0x4)
0x5)
0x6)
0x7)
0x3)
0x9)
OxA>
0-xB)
C'xC)
OxD)
OxE)
OxF)
+
intValue) ;
intValue;
•э
•7
•г
9
r_
'
t
?
7
p
■;'
?
?
4
у
7
"0" :
"
I'll О ll
"3"
"4"
"5" .
"6"
"7"
"R" .
"9" :
"A"
"B"
"C"
"D"
■>E"
nFn
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
справа налево
// Пс»:тр'С'Ить hexStrmg, помещая в нее цис];
hexStnng = hexChar + hexStrmg;
// Сдвинуть intValue на 4 разряда вправо
intValue = intValue » 4;
// Получить значение следующих 4 разрядов
"ourBitVali. э - controlValL э & mtValue;
// Отыскать соответствующую шестнадцатиричную цифру
// и присвоить ее строковый эквивалент hexChar
hexChar
hexChar
hexChar
hexChar
hexChar
hex:Char
hexChar
hexChar
hexChar
hexChar
hex:Char
=
=
=
=
=
=
=
=
=
=
=
(fourBitValue
(fourBitValue
■ (fourBitValue
(fourBitValue
(fourBitValue
(f ourBi tValue
(f ourBi tValue
(f ourBi tValue
(fourBitValue
(fourBitValue
(fourBitValue
=
=
=
=
—=■
==
==
=
=
=
=
0x0)
Oxl)
0x2)
Qx3)
0x4)
0x5)
0x6)
0x7)
QxS)
Qx?)
Сой-)
7
7
?
■9
•-!
•:•
•2
■}
7
?
*?
"0"
"1"
II OH
"3"
"4«
"5"
"6"
"7"
"6"
"9"
"A"
hexChar;
hexChar;
hexChar;
hexChar;
hexChar ;
hexChar;
hexChar ;
hexChar;
hexChar;
hexChar;
hexChar;
"В"
"С"
"D"
"Е"
..р..
hexChar;
hexChar;
hexChar;
hexChar;
hexChar;
hexChar = (fourBitValue = OxB)
hexChar = (fourBitValue = OxC)
hexChai = (fourBitValue = OxD)
hexChar = (fourBitValue = OxE)
hexChar = (fourBitValue = OxFi
hexString = hexChar + hexStrmg;
document.write("<br>" + originallnt + " отображается в");
document. write (" в шестнадцатиричном формате : J>) ;
document.writeln(hexString);
// конец сокрытия —>
</script>
</body>
</html>
Операции
Глава о
31
f.i,-\W'W I "TT
I IMTAJ-l.l.ir.U'l.VUMM.!
гага*
SkA *fU': -pnrf
a
При отображен! целых ice л. хранящие в памяти JavaScripl i польз их десятичные э вина питы 7УП
220 отогЗражэе i в в i тлнадцатиричн .■ формате ЗС
.i^p~r
^TljocWrf'&tV;
}'■*
РИСУНОК б.б. Преобразование десятичного числа в
шестнадцатиричное.
ПРИМЕЧАНИЕ
В коде предьщущего примера при поиске соответствия
многократно используются условные выражения.
Более эффективный способ сравнения ряда чисел связан
с организацией циклов (см. главу 7).
При исследовании предыдущего примера обратите
внимание на то, сколько нулевых разрядов остались
неиспользованными при хранении относительно
небольшого числа. Это — еще одна область, в которой
поразрядные операции оказываются полезными. При
помощи поразрядных операций можно сэкономить
память, сохраняя Данные в неиспользуемой части любой
переменной.
Например, если сценарий работает с большой
группой положительных целых чисел, не превышающих 255,
то в одном 32-разрядном слове поместятся четыре
таких числа. Используя простую поразрядную операцию,
можно извлекать любое из этих чисел. Стоит отметить,
что с такими объемами ОЗУ, которые имеют на
сегодняшний день большинство компьютеров, экономия
пространства обычно не стоит затраченных на его
добывание усилий. С другой стороны, поскольку JavaScript
разработан для выполнения на различных платформах,
нельзя знать заранее, кто будет выполнять сценарий, —
у кого-то ведь может и не хватить памяти. Но даже
принимая во внимание сказанное, волноваться по поводу
нехватки памяти нужно начинать только, когда в памяти
хранится достаточно много данных.
Приоритеты выполнения операций
При создании выражений, которые включают более
одной операции, необходимо помнить, что JavaScript не
обязательно вычисляет выражение справа налево или
наоборот. Каждая часть выражения вычисляется в
порядке, основанном на приоритете каждой операции.
Рассмотрим такой пример:
х = а * ь + с
а умножается на Ь, после чего полученный результат
прибавляется к с. Наконец, результат сложения
присваивается х. Операция умножения обладает более
высоким приоритетом, нежели операция сложения,
поэтому умножение выполняется первым. Если вначале
необходимо выполнить сложение, выражение
заключают в круглые скобки:
х = а * (Ь + с)
Круглые скобки — это операция, которая
увеличивает приоритет заключенного в них выражения.
Однотипные операции вычисляются слева направо.
В табл. 6.5 перечислены операции в порядке их
приоритетов — начиная с самого низкого и до самого
высокого.
Таблица 6.5. Приоритеты операций.
Название операции Операция
Запятая
Присваивание
Условие
Логическое ИЛИ
Логическое И
Поразрядное ИЛИ
Поразрядное ИСКЛЮЧАЮЩЕЕ ИЛИ
= += .= *= /= 6=
»= >»= &= "= 1=
&&
«=
iiiM Часть II
Название операции
Пазовое подмножество языка JavaScript
Операция
Поразрядное И
Равенство
Сравнение
Поразрядный сдвиг
Сложение/вычитание
Умножение/деление
Отрицание/приращение
Вызов/структурирование данных
&
<
<=
« »
+
+
0
/ %
[]
> >=
>»
++
Один из эффектов, связанных с приоритетами
операций, заключается в определении типа данных
результата выражения. Это станет очевидным при попытке
конкатенации строк и чисел (см. листинг 6.6).
Листинг 6.6. Приоритеты операций и типы данных.
<html>
<head>
<title>Приоритеты onepaunu</title>
</head>
<body>
<script type="text/javascript">
var carLength = 2 + 3;
document.write (carLength) ;
carLength = "<br>" + 2 + 3 + " метров";
do ument.write(carLength);
carLength = "<Ьг>Длина в метрах: " +2 + 3:
do umei t. write (carLength) ;
carLength = "<Ьг>Длина в метрах: " + (2 + 3) ;
document.writeln(carLength);
</script>
</body>
</html>
Операции с одинаковыми приоритетами
вычисляются слева направо. Операция сложения обладает таким
же приоритетом, что и операция конкатенации,
поэтому JavaScript будет выполнять все сложения и
конкатенации слева направо.
Обратите внимание на показанное на рис. 6.7
результирующее окно. Два первых примера работают, как и
следовало ожидать. Третий пример показывает, что
может получиться, когда JavaScript по-своему учтет
приоритеты. Первый знак + преобразует число 2 в строку
и добавляет ее в конец "Длина в метрах: ". В
результате получается строка "Длина в метрах: 2". Потом то же
самое происходит с числом 3 и получается "Длина в
метрах: 23". Однако, если вместо этого требуется
отобразить сумму 2 и 3, следует использовать круглые
скобки, тем самым увеличив приоритет 2 + 3. В этом
случае оба операнда — числа, и JavaScript выполнит
сложение раньше конкатенации (см. рис. 6.7).
Резюме
Операции присваивания устанавливают значения
переменных. Наряду с простой, JavaScript поддерживает 11
дополнительных операции присваивания, которые на
самом деле являются комбинациями арифметических
или поразрядных операций с простой операцией
присваивания.
23 гтр(а. ое)
п в метрах *Э
Длина в зтрэх 5
г anim^tJ^UTJamgKFjmfjrai 7
■л, .к?*^:,1'*^*- i$r%7^
ы. <* -j.
РИСУНОК 6.7. Приоритета 'Операций и типы данных.
Арифметические операции позволяют выполнять
базовые математические операции в JavaScript. Сюда
входят операции сложения, вычитания, умножения,
деления и вычисления по модулю. JavaScript также
включает операции инкремента и декремента — для
короткой записи двух наиболее частых математических
операций. Математические операции более высокого
уровня также встроены в JavaScript, но к ним следует
обращаться через объект Math.
Операции сравнения сравнивают два значения и
возвращают true или false. С их помощью выясняется,
равно ли одно значение другому, больше или меньше
другого, а так же и любые комбинации этих вопросов.
Условные операции позволяют возвращать одно из
двух значений выражений, которые могут содержать
любой тип данных. Возвращаемое значение занисит от
значения определенного логического выражения.
Строковые операции включают в себя операцию
конкатенации и все операции сравнения. Операция
конкатенации используется для связывания двух строк
вместе с целью формирования новой строки. Операции
сравнения могут использоваться со строками для
сравнения их ASCII-значений. Начиная с крайнего левого
символа строки, каждая пара символов сравнивается
друг с другом. Возвращается true или false.
Булевы операции используются в логических
выражениях. Операция И возвращает true, если оба ее
операнда — true, а иначе — false. Операция ИЛИ
возвращает true, если по крайней мере один из ее операндов
равен true. Иначе она возвращает false. Операция НЕ
возвращает true, если ее операнд false, и false, если
операнд — true.
Операция typeof появилась в JavaScript 1 1 и
представляет собой встроенную операцию, возвращающую
строку, которая представляет тип данных операнда. Это
особенно полезно при выяснении, была ли переменная
определена.
Две операции работают с объявлением и
использованием функций JavaScript. Операция вызова функции
(круглые скобки) всегда следует за именем функции и
заключает в себе список аргументов, которые может
принять функция. Операция "запятая" используется для
отделения аргументов друг от друга.
Для работы с массивами и другими объектами
необходимы еще две операции. "Точкой" обычно
обозначают доступ к элементу объекта. Это — стандартная
точечная нотация. Операция индексирования
используется для индексации элементов массива. Она
содержит имя массива и целое число, обозначающее
расположение элемента, к которому обращаются.
JavaScript дает доступ к двоичному представлению
любого целого числа с помощью поразрядных операций.
Операции RV^H
Глава 6 lilS
Поразрядная операция дополнения используется для
изменения значения каждого разряда целого числа на
противоположное. Поразрядные логические операции
применяются для сравнения двух целых чисел.
Двоичная форма операнда используется для работы с каждой
парой разрядов в числах. Логическая операция
выполняется над каждой парой разрядов и возвращается
целое число. Поразрядные операции сдвига сдвигают
разряды целого числа вправо или влево на и позиций. При
сдвиге вправо JavaScript позволяет выполнить
арифметический или логический сдвиг.
Когда все операции в выражении имеют равные
приоритеты, JavaScript вычисляет выражение справа
налево. Если же приоритет операций разный, то сначала
выполняется операция с самым высоким приоритетом,
затем следующая по приоритету и т.д. В JavaScript
каждая операция обладает совершенно определенным
приоритетом.
Управляющие структуры
и организация циклов
В ЭТОЙ ГЛАВЕ
■ Условные операторы
■ Операторы организации циклов
■ Метки
■ Оператор with
■ Оператор switch
Проектирование сценариев, предполагающих
принятие решений во время выполнения, — наиболее
интересная часть JavaScript. В сценарии, где требуется
принимать решения на основе его текущего состояния, просто
обеспечивают вывод вопроса и затем, в зависимости от
ответа, выбирают путь.
Рассмотрим для примера планирование утра моего
рабочего дня. Мне доступны несколько различных
вариантов, из которых на основе определенных факторов
я выбираю один. Я редко готовлю еду, посему наиболее
важный вопрос, который я задаю себе каждое утро, — не
голоден ли я. Если да, я выбираю маршрут, проходяший
через продуктовый магазин. К моменту завершения
упаковки собственного завтракая, как правило, уже
немного опаздываю. Дабы восполнить потерянное время, я
двигаюсь по направлению к скоростному шоссе, где могу
увеличить скорость. С другой стороны, если я не
голоден (что случается весьма редко), то миную
продуктовый магазин и еду на работу со скоростью на 10 миль в
час медленнее.
Используя подобного рода планирование, можно
создавать и программы на JavaScript, выполняющие
различные операции в зависимости от текущего состояния.
Например, в главе 6 рассматривалось, как проверить,
является ли переменная равной какому-то значению или
даже ряду значений. С использованием управляющих
структур появляется возможность заставить программу
выбирать различные пути в зависимости от результата
упомянутой проверки. Итак, имеем первую тему,
которой посвящена данная глава.
Поскольку размеры программ неуклонно возрастают,
неплохо было бы учесть немаловажный фактор —
сколько времени потребуется клиенту для их загрузки.
Лучший способ сэкономить на количестве исходного текста
в сценарии предусматривает применение операторов
цикла. Прибегнув к помощи циклов, можно достигнуть
ситуации, когда всего лишь несколько строк программы
обеспечивают выполнение большого количества
однотипных операций. Это поможет сократить размер
сценариев и избежать многократного набора одних и тех же
команд. Помимо прочего, в главе демонстрируются
способы повышения эффективности сценариев.
Условные операторы
В главе 6 рассматривалась операция ?:. Эта операция
используется для создания двухшагового процесса.
Сначала выражение оценивается на предмет раненсгва true
или false. Далее, в зависимости от результата,
возвращается одно из двух значений. Если выражение true,
возвращается первое значение, а если — false — второе.
Встречаются сценарии, принимающие решение в
зависимости от значения выражения, использующего
операторы if и else. Однако результат будет другим. Вместо
возвращения зависящего от результата значения,
программа выбирает один из двух путей выполнения. Так,
можно заставить JavaScript выполнять множество
различных функций, зависящих от любой доступной
информации.
if
Оператор if относится к числу наиболее популярных.
Каждый язык программирования содержит его в той или
иной форме, и его использования избежать, как
правило, не удается. Оператор if применяется следующим
образом:
if (условие) {
| оператора]
)
Управляющие структуры и организация циклов
Глава 7
1щ С;
В качестве условия может указываться любое
логическое выражение. Если результат условия равен true,
выполняются операторы, посему работа программы
продолжается. Если условие возвращает false, операторы
игнорируются и работа продолжается.
В листинге 7.1 приводится сценарий, который
отдел маркетинга мог бы предложить разместить на Web-
сайте компании. Сценарий начинается с установки
visitor/Interest в одно из двух значений. В данном примере
выбирается "Technical Support" (то бишь, техническая
поддержка) и комментируются альтернативные варианты.
Сценарий доходит до первого оператора if, который
проверяет, равно ли значение visitorlnteres строке "New
Products" (т.е. новый продукт). Последнее вычисленное
значение этого выражения — false, поэтому блок
операторов после if игнорируется. Затем сценарий доходит до
второго оператора if и сравнивает значение visitorlnterest
со строкой "Technical Support". Выражение возвращает
true, что приводит к выполнению кода, заключенного в
фигурные скобки.
Независимо от того, чему равно значение visitorlnterest,
последний оператор всегда выполняется, поэтому
продавец Виктор Франкенштейн делает шаг к
посетителю. Результирующий вывод показан на рис. 7.1. Если
visitorlnterest присвоить какое-то другое значение,
результат изменится.
Обычно набор операторов заключается в фигурные
скобки. Это придает сценарию логический вид и
оказывается особенно полезным в случае вложенных опе-
ЛиСТИНГ 7.1. Использование оператора if для принятия решения.
раторов if (т.е. при использовании одного оператора if
внутри другого).
нлтив • вшвний .и помашиолврвто•а Н -Neta-
*Я*^|
Привет, меня зовут Виктор инкенштейк' Сейчас доступна и циническая поддержка Однако
вначале позвольте познакомить вас с новой гадукцией!
Наша _jb. продукция „овлетвор. г все ваши потребности!
"Ж '3!-
РИСУНОК 7.1. Виктор Франкенштейн делает шаг навстречу
посетителю.
Листинг 7.2 демонстрирует использование
логических переменных для выбора пути, по которому пойдет
сценарий. Первый оператор if оценивает переменную
needsliifo. В данном случае needslnfo имела значение
true, так что JavaScript выбирает первый блок if и
продолжает работу в нем, т.е. выводит на экран "Наши
продукты использует весь мир.". Далее очередь
доходит до второго (вложенного) блока if, и оценивается
needsMorelnfo.
<html>
<head>
<title>upMHHTHe решений при помощи оператора if</title>
</head>
<body>
<script type="text/javascript">
<! —
/ / Объявление переменных
var visitorlnterest;
// visitorlnterest = "New Products";
visitorlnterest = "Technical Support";
document.writeln("Привет, меня зовут Виктор Франкенштейн 1 ") ,
проявленный к нашим товарам!
// Оценка значения visitorlnterest
if (visitorlnterest = "New Products")
document. writeln ("Спасибо за интерес,
)
if (visitorlnterest = "Technical Support") {
document, writeln ("Сейчас доступна и техническая поддержка.");
document. writeln ("Однако вначале позвольте познакомить вас ") ,
document, writeln ("с новой продукцией!");
");
'document. writeln (<Ьг>"Наша новая
document.writeln ("потребности! ") ,
// "->
</script>
</body>
</html>
продукция удовлетворит все ваши"),
Базовое подмножество языка JavaScript
Часть II
Листинг 7.2. Вложенные операторы if.
<html>
<head>
<ьШ.е>Принятие решений при помощи оператора if</title>
</head>
<body>
<script type="text/javascript">
<!
// Объявление переменньк
var needsInfo;
var needsMorelnf о ,-
// Если установить одну из приведенных ниже переменньк в false, вывод изменится.
needslnfo = true;
needsMorelnf о = true ;
document.writeln("fl работаю на Лучшие Продукты Интернешинл!");
if (needslnfo) {
document.writeln ("Наши продукты использует весь мир.");
if (needsMorelnfo) {
document.writeln ("<Ьг>Япросто не могу понять, как же вы могли") ;
document, writeln ("обходиться беэ них.");
)
document, writeln ("Самый простой способ заказать наши продукты — воспользоваться
^онлайновым магазином.");
// ">
</script>
</body>
</html>
Опять-таки, возвращенное значение — true,
поэтому операторы внутри второго блока будут
выполняться. После завершения вложенного блока if JavaScript
выполняет все оставшиеся инструкции первого блока.
Обратите внимание, как фигурные скобки помогают
отличать отдельные блоки программы друг от друга.
Из рис. 7.2 видно, что строки программы выполнялись
в порядке их написания. Изменяя значения needslnfo и
needsMorelnfo, можно получить три различных
результата. Помните, что если needslnfo присвоить значение
false, программа не сможет перейти ко второму блоку if.
В этом случае значение needsMorelnfo роли не играет,
поскольку оцениваться оно не будет. Извините, Виктор,
но если посетителю вообще не нужна информация, ему
уж точно не нужна дополнительная информация.
.' пяти» ■ ии4 гри пмаш* гш
ШП*
«$.-?
3 jjt s*'~ s£
Я 5от' на i™ чшие Продукты Интернешнл1 Наши продукты польэ>ЮТ' GO всем мире
Я просто не могу i нтъ,кэ*жеБ могли 4тъся беэ них Самый npoci способ каэзть
наши цдукты- еоспользоватьс онлайновым t гаэином
jntr~-
УгикьИтли;
#■*»&■» £3 ■■
if ..else
Иногда одной конструкции if оказывается
недостаточно. Зачастую требуется также зарезервировать набор
операторов, которые будут выполняться в случае,
когда условное выражение возвращает false. Это можно
сделать, добавив еще один блок непосредственно после
блока if:
if {условие) J
операторы
} else {
операторы
1
Кроме того, имеется возможность скомбинировать
часть else с другим оператором if. Использование
такого метода позволяет оценить несколько разных
возможных сценариев перед выполнением нужной операции.
Изящество данного метода состоит в том, что в конце
можно определить тот же сегментом else. Формат
упомянутого типа оператора выглядит так:
if (условие) (
оп ратора
} else if (условие) {
опэраторы
) else {
операторы
I
Что может быть хуже придирчивого компьютера?
Листинг 7.3 демонстрирует, как можно создать интер-
РИСУНОК 7.2. Один из трех возможных результатов.
активную Web-страницу с помощью всего лишь
нескольких строк кода. Здесь жестко задано значение
ключа purchaseAmount, которое определяет ход сценария.
Для настоящего взаимодсйствования сценария с
пользователями потребуется обеспечить возможность
пользовательского ввода. В таком случае purchaseAmount
может принимать любые значения, в зависимости от
желания заказчика. Это делается с помощью JavaScript
и стандартных входных HTML-объектов, таких как
переключатели и текстовые объекты. В главе 17 эта
проблема обсуждается более подробно.
В рассматриваемом примере клиент не соизволил
потратить достаточную сумму, дабы удовлетворить
Виктора Франкенштейна. Условный оператор получает
значение false, и программа переходит на блок else. Посмотрев
на рис. 7.3, можно воочию убедиться, как настойчивый
«. ■ ,.от.. r-N --в а ч
ч ш в в Hstr;
Спасибо, одна1"! я увер .что у меня есть еще г-ЧТ" от— вы не сможете КЭЗЭТЬСЯ
РИСУНОК 7.3. Один и двух возможных результатов.
Управляющие структуры и организация циклов
try. .catch
Оператор try..catch используется для замены заданного
по умолчанию способа обработки ошибок. Эта тема в
главе подробно не рассматривается.
Операторы организации циклов
Организация цикла внутри сценария преследует
широкий спектр целей. Рассмотрим одно простое, но весьма
распространенное применение цикла. Например,
написание программы, отображающей числа от 0 до 9, — на
первый взгляд, быстрая и простая задача. Просто
записываются 10 команд для отображения каждого числа:
document.writeln ("О");
document.wri teln (" 1");
document.writeln ("9");
Это легко сделать для чисел от 0 до 9, но что если
потребуется сосчитать до 1000? Можно последовать тому
же способу, но тогда программа потребует гораздо
больше времени на написание и загрузку в браузер.
Наилучший способ счета до 1000 или любого другого числа
заключается в использовании той же самой команды
отображения, но с переменной вместо литерала. В
данном случае потребуется обеспечить только одну вещь —
инкрементировать переменную и повторять команду
отображения. JavaScript располагает соответствующими
инструментами.
for
Оператор for используется для организации цикла в
сценарии. Перед детальным изучением оператора for на
основе листинга 7.4, рассмотрим его обобщенный
синтаксис:
for ([Биражение_инициализации] ;
w [вБхралгение условия] ; [вьгражение_цикла] ) (
операторы
1
Три выражения, заключенные в квадратные скобки,
не являются обязательными, тем не менее, если даже
убрать одно из них, точка с запятой все же потребуется.
Именно точка с запятой обеспечивает должное место для
каждого выражения.
Выражение инициализации обычно применяется в
целях инициализации переменной и даже объявления,
что конкретная переменная является счетчиком цикла.
Выражение условия должно иметь значение true перед
каждым выполнением операторов, заключенных в
фигурные скобки. Наконец, выражение цикла, как
правило, инкрементирует или декрементирует значение
переменной, которая используется в качестве счетчика
цикла.
продавец "разогревает" потенциального клиента.
Листинг 7.3. Блок else, соответствующий значению
false.
<html>
<head>
<£1£1е>Принятие решений при помощи оператора if
</title>
</head>
<body>
<script type="text/javascript">
<! —
/ ' Объявление переменных
var purchaseAmount ;
purchaseAmount = 10.00 ,
if (purchaseAmount > 500. 00) {
document, writeln ( "Спасибо за покупку'"),
)else(
document, writeln ( "Спасибо, однако я
Суверен, что у меня есть " ) ;
document, writeln ("еще кое-что, от чего
^вы не сможете отказаться.'*) ,
)
// —>
</script>
</body>
</html>
Пазовое подмножество языка JavaScript
Часть II
Листинг 7.4 демонстрирует использование
оператора for для организации счета от 0 до 99 с
отображением каждого числа. Для того чтобы уместить
результат на стандартной странице, после каждых 10 чисел
выводится символ новой строки (см. рис. 7.4).
Листинг 7.4. Использование цикла for для счета от О до 99.
<html>
<head>
<title>U>nui счета от О до 99</t±tle>
<body>
<script type="text/javascript">
< I —
// Вывести заголовочную часть
document, write ("Числа от О до 99:");
document. write ( ' <hr size="0" width="50%"
4align=nleft">') ,-
for (var i = 0; i < 100; ++i) {
// Символ новой строки после каждого
// 10-го числа
if(i%10 = 0) {
document.write( *<Ъг>> ) ;
// Вывести собственно число
document.wri teii + " , " ) ;
]
следовательно,
// Пост ?дн< чис
// завершаемся. . .
document.write("<ЬгХЬг>После завершения
w4raina i равно : " + i) ;
// —>
</script>
</body>
</html>
Umn счета от G aa вд-Heieco- н
-3-; Л
Чис от О до 19
0.1.2.3.1.5.6,7.8,9.
10 11.1 13 14 15 1617 18 19
20.21.22.23.24.25.26.27.23.29
30.31.32.33 34 35.36.37.3S 39
4С 11 2 4. 4Г К 17
50.S1.S2.S3.S4.55.56.57.58.59,
' 60.61.62.63,64 65 66.67,68.99
I 70.71.72.73.74.75.76.77.78.7S.
0U.0l.02.bJO4 Ct>/ J/.С OU
40.91.S2.93S4.95.1 5.97.93 94
После Завершен! i цикла i равно 100
Э1:-*."
.tfb-.y.^ffl:,^.-
РИСУНОК 7.4. Результат 100-кратного выполнения цикла.
В листинге 7.4 порядок выполнения операторов
выглядит так: выражение инициализации объявляет
переменную i и устанавливает ее значение равным 0. Затем
переменная i проверяется на предмет, меньше ли она
100. Когда i все еще равна 0, выражение условия
возвращает true и программа выполняет операторь; в
фигурных скобках. Как только программа выполнит все
операторы и достигнет закрывающей фигурной скобки, она
вычисляет выражение цикла ++i. При этом i
увеличивается на 1 и, таким образом, выполнение первого
полного цикла завершается.
Процесс начинается сначала. На сей раз JavaScript
знает, что выполнять раздел инициализации для цикла
уже не требуется. Выражение условия вычисляется
снова. Если i все еще меньше 100, выполняется второй цикл.
Выполнение набора операторов внутри блока for
продолжается до тех пор, пока i не достигнет значения 100.
И в 99-й раз условное выражение возвращает true;
программа выполняется в последний раз. Значение i
увеличивается еще раз и становится равным 100.
Вычисление условного выражения дает в результате false, поэтому
выполнение никла прерывается. Управление переходит
к операторам, следующим непосредственно за
закрывающей фигурной скобкой.
Поскольку значение i было увеличено до 100 до
завершения цикла, 100 и представляет собой последнее
значение i. Обратите внимание, что в соответствие с
правилами, рассмотренными в главе 5, i можно
использовать вне цикла.
ПРИМЕЧАНИЕ
Если условное выражение возвращает false при
первом проходе цикла, код в фигурных скобках
выполняться не У5удет.
Подобно операторам if, циклы for также могут быть
вложенными. Листинг 7.5 содержит код прохода по
каждой координате сетки 10x10. Для каждой итерации
первого цикла имеют место 10 итераций вложенного
цикла. В результате вложенный цикл будет выполняться 100
раз.
Листинг 7.5. Пример вложенного цикла.
<html>
<head>
<title>&nc»KeHHbie UHKnbi</txtle>
</head>
<body>
<script type="text/javascript">
<■
document, write ("Все координаты x,y
^иакду (0,0) и (9,9) :<br>") ;
< 10; ++x) <
у < 10; ++y) <
for (var x = 0;
for (var у = 0;
document.write (" ("+x+" , "+y+") , ") ,
}
document.write('<br>■)
)
document.write ("<Ьг>После завершения
цикла х равно : " + х) ;
document. write ("<Ьг>После завершения
^цикла у равно : " + у) ;
и --■■
</script>
</body -
</html>
Переменной х сначала присваивается значение 0.
Затем JavaScript доходит до вложенного цикла и
присваивает переменной у также значение 0. Вложенный цикл
отображает значения х и у и затем увеличивает у на 1.
Вложенный цикл продолжается до тех пор, пока у не
станет равным 10. В этот момент уже сгенерировано 10
наборов координат. Выполнение вложенного цикла
прерывается и управление возвращаются ко внешнему
циклу. Значение х увеличивается на 1, после чего вновь
запускается вложенный цикл.
JavaScript знает, что вложенный цикл необходимо
начать с самого начала, в связи с чем выражение
инициализации должно вычисляться повторно. Таким
образом, у присваивается значение 0 и операторы
выполняются еще 10 раз. Процесс продолжается до тех пор, пока
х не станет равным 10 и выполнение внешнего цикла,
наконец, завершается. В результате отображается 100
наборов координат (см. рис.7.5).
^ffl^fflfr
т &n • '
s jr
.. J"
клм*Нв1ясфрв
VrJ " C^'ftniu-'Hceto hit
'■3 *
]ftl V *
"..,* 1" ■- ..
вин
r1flU
,«u* s -Mil
Все мюгди^ты у у между (0.0) и (9J9)
[0.ОИО.1МО 2»0^Н0.Л»0.5Н0.6) «тГ0.8),(0 S).
Г1ОД1.1М1 2МI ^1.(1.Д) Л .5)j(l .6) j 17) 11 .K>.( 1 9)
|2.С).(2.1|Л2 2|.(2.3|.(2.<1Н2.5)Л2.6)Д2.7)(2Й^9),
ЙОДЭ 1) (3 21ШЦММЭЗДЯ (3 7) (3j8) (3 9).
[4.0M4.1)Jl.2M4.3H4.'9)jlfl.5)j('!.6W) (ЗД.И S),
(вти.ииляличличлц'.лич.тичли^я!.
[6.0Me.i).(6,2).(6,3).[6.4)je.5).(e.6).(e.7).[6.8).(e.s).
[7.0)j7.1).[7.2H7.3).(7^)J7.5).(7.6H7.7).[7.eM7.9).
;8.0Ие.1)Л8.2).(еЗ).[8.4М8.5).(8.е)Й.7).(8.8)Л8.9).
f90).[9.1^S2)j9.3l.[9.<).(S5].(e.eHe.7l.(S.8).[9.9).
После завершения ци1Пх ->авно 10
После звеэшен циклам >авно 10
РИСУНОК 7.5. 100 пар координат, сгенерированных в двух
циклах.
Поскольку каких-либо ограничений на количество
вложенных циклов нет, следовательно, число координат
можно увеличить до трех или, скажем, до четырех.
Данный метод можно использовать для обращения к
элементам многомерного массива.
for..in
Для использования цикла for..in потребуются знания
объектов JavaScript, исчерпывающая информация о
которых может быть найдена в главе 9.
Конструкция for..in предоставляет возможность
выполнения набора операторов для каждого свойства
объекта. Цикл for..in можно использовать с любым
Управляющи структуры и организация циююв
Глава 7
объектом JavaScript, независимо от его свойств. Если
объект не имеет свойств, цикл не выполняется. Цикл
for..in работает также и с пользовательскими
объектами. Переменная пользовательского объекта JavaScript
рассматривается как свойство, и поэтому для каждой из
них выполняется цикл. Синтаксис выглядит так:
for (свойство in объект) {
итераторы
I
Тут свойство — это строковый литерал,
сгенерированный JavaScript. При каждом проходе цикла свойству
присваивается имя следующего свойства, содержащееся
в объекте, и так до тех пор, пока не переберутся все
свойства. В листинге 7.6 такая функциональность
применяется для отображения имен и значений всех свойств
объекта Document (см. рис. 7.6).
Q.J N',Uil!l!l!lll!ll,!!l,. 1|,|||!Ч!Ц_
File Lflrt »** ©P Са^иПяйвгаКйеф
,i.i.,i!Li.i i.i-uj 1,1,1 тл.м.1Ш1цтптт-
fcmoA
jjfaajm imffiU ш'вГуцД
•d
-i
location -file /Cfbooks^scnpb'pic5/src-texts/7-6 html
forms [ob|ecl FormArray]
links - [objeel "ikArray]
[object tnchnrAjray]
applets [object AppletArray]
1s = [object Г nbedArray]
images [object ImageArr?!
title Использование ЦП* (or |дпн вывода спио свойств объекта document
URL = file7C|/books/jscripVpics/src-texts/7-6 html
referrer
к /ndiftec Friday. October 13.201 17:50 35
cookie -
domain
bgColor -ШШ
IgColor 1Ю00000
4iiK^ulor=#0000ee
v4nkColor==#551a8b
almkColor=«f0000
widlh 598 , .
JSL
jtJ
РИСУНОК 7.6. Список свойств объекта Document вместе с
их значениями.
ПРЕДУПРЕЖДЕНИЕ
Цикл for..in работает только в версии JavaScript 1.1 и
выше. Не следует забывать, что этот цикл не
отличается корректной работой в Microsoft Internet Explorer
3.0 (JScript 1.0).
Листинг 7.6. Использование цикла for..in
<html>
<head>
<title>JavaScript Unleashed</title>
■c/head>
<body>
<script language=" JavaScriptl. 1"
type="text/j avascript">
<!
// Объявление переменных
var anObject = document;
var propertylnfo = "" ;
for (var propertyName in anObject) {
propertylnfo = propertyName + " " +
anObjectfpropertyName] ;
document .write (propertylnfo + "<br>") ;
Базовое подмножесте i языка JavaScript
Часть II
)
// —>
</script>
</body>
</html>
while
Оператор while действует подобно циклу for, однако не
включаетвсебяфункцииинициализациииприращения
переменных во время их объявления.
Переменные необходимо объявлять заранее, а
инкремент или декремент их определять в рамках блока
операторов. Рассмотрим синтаксис while:
while (выражение_условия) {
операторы
)
Листинг 7.7 предоставляет пример использования
логической переменнойв качестве флажка, определяющего
продолжениевыполненияцикла. Этапеременная, status,
объявлена до начала цикла и ей присвоено значение true.
Как только i станет равно 10, status получит значение
false, после чего цикл завершается. Результат листинга
7.7, как показано на рис. 7.7, — это сумма целых чисел
от 0 до 10.
Листинг 7.7. Использование цикла while.
<html>
<head>
<title>JavaScript Unleashed</title>
</head>
<body>
<script type="text/javascript,,>
<! —
/ / Объявление переменных
var i = 0;
var result = 0;
var status = true;
document.write("0") ,-
while (status) (
result += ++i ;
document, wri te (*' + " + i) :
if (i = 10) {
status = false;
document. writeln (" =
// -->
</script>
</body>
</html>
+ result) ,
dcwhile
Начиная с JavaScript 1.2, предлагается конструкция
do..while. Она работает подобно оператору while за
исключением того, что условное выражение не
проверяется вплоть до завершения первой итерации. Этот
способ гарантирует, что набор операторов, находящихся в
пределах фигурных скобок, будет выполнен п<~ крайней
мере один раз.
^ JavaScriptUnIaagft0tf~N- ■» .в
Ua ErfJl 5&с. S ""i^nrnnwiiat К У"?'Я
L -4. 3 я_ w - .. л» ,
0 + 1+2+3+4 + 5+6 + 7 + 8+9 + 10 = 55
ijt рО^}
i)J$Cu(n$t
. ^ ^>№^ .. i. imwa. ||ii*r* w1'*1" ■■"
РИСУНОК 7.7. Результат выполнения листинге 7.7 —
одиннадцать итерации цикла while.
Листинг 7.8 содержит пример, в котором заранее
неизвестно, какое значение может принять userEntry (как
если бы упомянутое значение вводилось пользователем).
userEntry присваивается значение 0 просто для
демонстрации того, что пользователь вполне может ввести
значение, которое не будет удовлетворять выражению
условия.
Листинг 7.8. Оператор do..while, обеспечивающий
по крайней мере один проход цикла.
<html>
<head>
<title>JavaScript Unleashed</title>
</head>
<body>
<script language="JavaScriptl.2" type="text/
javascript ">
<! —
// Declare variables
var userEntry = 0;
var x s= 1;
do(
document.writeln(x);
x++;
}while (x <= userEntry) ;
// -->
</script>
</body>
</html>
break и continue
Используя циклы, стоит обратить внимание на то, что
по умолчанию цикл не прекращается, а будет
выполняться до тех пор, пока определенное условие не будет
равно false. Однако, иногда может потребоваться выйти из
цикла до того, как он дойдет до закрывающей фигур-
ной скобки. Подобное достигается за счет помещения
в блок операторов внутри цикла break или continue.
Оператор break завершает выполнение цикла, в то
время как continue пропускает оставшиеся операторы
текущей итерации, вычисляет очередное значение
выражения цикла (если таковое существует) и начинает
выполнение следующей итерации. Различия между этими
двумя операторами продемонстрированы в листинге 7.9,
который содержит достаточно тривиальный сценарий
вычисления приближенного целочисленного значения
квадратного корня числа п.
ЛИСТИНГ 7.9. Использование операторов break и continue.
<html>
<head>
<title>Onepaarapbi break и continue</title>
</head>
<body>
<script type="text/javascript">
// Объявление переменных
var highestNum = 0 ,-
var n = 175; // Тестовое значение
for (var i = 0; i < n; ++i) {
document.write(i + "<br>");
if (n < 0) {
document.write ("n не может быть
wотрицательным.");
break;
)
if (i * i <= n) {
highestNum = i;
continue;
I
document.write("<br>CflenaHo'");
break;
i
document.write {"<Ьг>Целочислеиное значение,
**не превышающее квадратный корень") ;
document.write(" из " + п + " = " +
highestNum);
// —>
</script>
</body>
</html>
Сначала i присваивается О, цикл начинается и
отображается значение i. Затем сценарий убеждается, что п
не является отрицательным числом. Если п
отрицательно, цикл прерывается и выполняется остаток программы
после закрывающей фигурной скобки. Если п
положительно i умножается на то же i и результат
сравнивается с п. Если результат меньше n, i сохраняется как
наилучшее текущее приближение квадратного корня из п.
Зат;м оператор continue пропускает оставшуюся часть
текущей итерации и возобновляет работу цикла с
момента приращения i. Как только квадрат i превысит
значение п, сценарий пропускает continue и переходит к опе-
Управляюгциеструюпуры и организация циклов
Глава 7
ратору break, который останавливает выполнение
цикла. Аппроксимация квадратного корня из 175 показана
на рис 7.8.
■ • ->- о ■ ы breofc и сопите - N4 — -а
я _.■£■ Bookmen» 1 м^оп иГМ|.таЙСТИ|ДЯЯВГЬИЯЯ .•!«*'**
0
1
г
4
5
6
7
S
ч
10
2
И
Сделано'
Цепочиспзнное значение не превышающее квадратный корень из 175 13
Ни? == №ц Г.Ь -- U--'■■< **•■■;'¥>■"
lxa&J~
'РИСУНОК 7.3. Внешний вид окна после того, как цикл
переходит к оператору break и останавливается.
Метки
Начиная с версии JavaScript 1.2, в языке появился
метод обозначения более специфического места перехода
при использовании операторов break и continue —
метки. Метку можно помещать перед любой управляющей
структурой, которая содержит другие операторы. Это
позволяет перейти из рамок условного оператора либо
цикла на совершенно определенное место программы.
Пример применения меток показан в листинге 7.10.
Листинг 7.10. Использование меток.
<html>
<head>
<ЬИ:1е>Испольэование MeTOK</title>
</head>
<body>
<script language="JavaScriptl.2" type="text/
javascript" >
<! —
// Объявление переменных
var stopX = 3;
var stopY = 8
document. write ("Все пары х,у между (0,0) и (") :
document.write (stopX + "," + stopY + ") :<br>") ;
loopX:
for (var x = 0 ,- x < 10; ++x) (
for (var у = 0; у < 10; ++y) {
document, write (" ("+x + " ," + у +") ") ;
if ((x == stopX) is (y = stopY) ){
break loopX ;
document.write("<br>") ;
Базовое подмножество языка JavaScript
Часть II
document.write("<Ьг>После завершения цикла х
'—равно : " + х) ;
document,writeln("<Ьг>После завершения
"•цикла у равно : " + у)
// —>
</script>
</body>
</html>
В листинге 7.10 цикл for "помечен"
пользовательским идентификатором IoopX. Это позволяет покидать
цикл for либо, наоборот, продолжать его вне
зависимости от вложенности. Та же метка IoopX указывается в
операторе break для завершения обоих циклов for. Без
этой метки оператор break остановил бы только цикл,
генерирующий значения для у. На рис. 7.9 показан
результат работы программы, когда х и у достигают,
соответственно, значений 3 и 8.
Ипкмьниомнд меток - Мв1» - ■
■■•й Ъ
''■i*i"i.. .*'- t^j t^,d_i
Все пары x у (О О) и
(0.0) (0.1) (0.2) (0.3) (0.4) (0.5) (0.6) (0.7) (0.8) (OS)
(1.31 (1.4) (1.5) .и П.')
[2.0) (2.1) (2.2) (2.3) (2.4) (2.5) (2.8) (2,9)
(3.0) (3.1) (3.2) (3.3) (3.4) (3.5) (3.6| (3.7) (3.8)
После завершен i цикла х равно 3
После завершения цию <уравно 8
!(ЭЯ|
~Ц J* Wiiiri Еь»-'
Щ^ШШЩГТ
JHL
,эа-;уй,
РИСУНОК 7.9. Использованиеonepamopalahel для выхода из
вложенного цикла for.
OnepaTopbiwith
Оператор with применяется во избежание многократного
повторения ссылки на объект при доступе к его
свойствам и методам. Любые свойства или методы в блоке
with, которые JavaScript не может опознать,
ассоциируются с объектом, указанным в этом блоке.
Синтаксис with таков:
with (объект) {
операторы
}
Объект определяет, какой объект необходимо
использовать в случае отсутствия объектной ссылки в блоке
операторов. Данный оператор особенно полезен при
использовании сложных математических функций,
которые доступны только через объект Math. Поскольку
объект Math будет рассматриваться, начиная с главы 10,
здесь показан оператор with для уже знакомого объекта
Document.
При вызове методов write() или writeln(),
принадлежащих объекту Document, перед ними необходимо
указывать префикс document:
document.wri teln("Привет всем ?");
Подобная методика применяется чостаточно часто и
в больших количествах. Для экономии на объеме кода
все операторы, которые ссылаются на объект Document,
стоит поместить в блок with. Как это сделать показано
в чистингс 7.11. Поступая таким образом, можно
избавиться от назойливого префикса document в ссылках на
методы и свойства документа.
Обратите внимание, что title и TJRL — это свойства
объекта Document, которые должны записываться как
document.title и "ocument.URL. При использовании
оператора with необходимость в ссылке на объект
возникает только один раз, тем не менее, достигается гот же
самый результат, что и при наборе ссылки в каждой
строке. На рис. 7.10 показан результат выполнения кода
из листинга 7.11.
ПРЕДУПРЕЖДЕНИЕ
Internet Explorer 3.0 оператор with не поддерживает.
£ Ел
щгао
м.
1 Л Jl
а ПИЛ пУПЛ . ВД*
1 -Л'*'0* "*ж it Lccauotlhle /Dl/books^sciip»/7-l l hm
isi
afcuri> hot
-* [i What's FW» "
Цр1вет1
taronoBOK этого документа выглядит как Исполъзованн оператора iui-
UHL этого документа выглядит как "file:///D|/books/jSCriptr7- 11 html" Теперь (
префикса объекта можно избавиться раз и навсегда!
•Ш,
РИСУНОК 7.10. Отображение информации с использованием
оператора with.
Листинг 7.11. Использование оператора with в
JavaScript.
<html>
<head>
<t±-tle>HcnojibSOBaHne оператора with</title>
</head>
<body>
<script type="text/javascript">
<. —
with (document) (
write("Привет!");
write ("<Ъг>Заг<оловок этого документа
^выглядят как \"" + title + "\".")
write ("<br>URL этого Документа выглядит как
WV" + URL + "\"-") ;
write ("Теперь от префикса объекта можно
^избавиться раз и навсегда!");
Управляющие структуры и организация циклов
Глава 7
и
>
// — >
</script>
</body>
</html>
ПРИМЕЧАНИЕ
В зависимости от конкретного браузера, пример
может отобразить URL в закодированном формате.
Оператор switch
Оператор switch используется для сравнения одного
значения с большим количеством других. На первый взгляд
упомянутая задача решается только за счет применения
большого числа условных операторов, однако оператор
switch тут будет гораздо уместнее. Он быстрее читается
и позволяет определить заданный блок инструкций,
выполняющийся в случае, когда соответствие не
найдено.
В листинге 7.12 предполагается, что переменная
request может изменяться в зависимости от требований
пользователя. В данном примере request присваивается
тестовое значение "Name".
ПРИМЕЧАНИЕ
Опера-op switch до версии JavaScript 1." не существовал.
Листинг 7.12. Оператор switch.
<html>
<head>
<title>JavaScript Unleashed</title>
</head>
<body>
<scxipt language—"JavaScriptl.2"
type="text/javascript">
<! —
// Объявление переменных
var request = "Name" ;
switch (reiuest) (
case "Logo" :
document.write ( '<img src="logo.gif "
alt="Logo">');
document.write("<br>") ;
break;
case "Name" :
document.write("Software Inc.");
document.write("<br>");
break;
case "Products" :
document.write("MyEditor") ;
document.write("<br>") ;
break;
default :
document.write("www.mysite.com");
break;
</script>
</body>
</html>
Вторая конструкция case совпадает с текущим
значением request, следовательно, выполнятся команды,
перечисленныевней.
■aJavaScri' t Unleashed - Microsoft Internet E i lorer SOE3
- BteEdrt-Jtr» c " "к "■'"' bfil ■
M<? |#] C:\WlNDOWS\Desktop\7E3X07_L12.html jj
РИСУНОК 7.11. Использование оператора switch.
Оператор break используется для прерывания
дальнейшего выполнения кода, оставшегося в switch. Если бы
оператор break не использовался, оставшийся код
выполнялся бы для каждого случая, независимо от
соответствия между request и case. Из рис. 7.11 ясно, что request
соответствует значению "Name", при этом на экран
выводится название компании.
Резюме
п-
>
Для принятия решений в JavaScript используются
условные операторы if и else, if обеспечивает выполнение
части программы на основе вычисления определенного
условия. Если условное выражение возвращает true,
соответствующая часть программы выполняется, в
противном случае — нет.
Помещайте оператор else сразу после блока if,
чтобы обеспечить выполнение следующего кода, когда
выражение в блоке if возвращает false. JavaScript
допускает вложенные операторы if и if..else. Такой метод дает
возможность задавать новые вопросы, основываясь на
ответах на предыдущие вопросы.
Циклы for применяются для многократного
повторения одного раздела сценария. При объявлении цикла
имеется возможность выбора начального значения
переменной, которая будет применяться внутри цикла.
Можно также выбирать вариант изменения переменной,
каждый раз когда цикл завершается. Используя выражение
условия цикла for, можно определять, когда остановить
выполнение цикла.
^^■■Н Базовое подмножество языка JavaScript
■У Часть II
Используйте цикл for..in, если требуется выполнить
набор операторов для каждого свойства объекта. JavaScript
автоматически присваивает имя свойства выбранной
переменной. С помощью такой переменной можно
определять операции над этим свойством.
Используйте цикл while для многократного
повторения раздела сценария. Потребуется лишь задать
условное выражение, которое должно возвращать true перед
выполнением каждого цикла.
Операторы break и continue используются для
прерывания любого цикла, break полностью завершает цикл,
a continue останавливает текущую итерацию цикла, при
этом программа переходит на начало следующей
итерации.
Оператор with используется вместе с объектами
JavaScript. Он позволяет сослаться на объект только
один раз вместо многократных ссылок при
обращениях к свойствам и методам. Внутри блока with можно
указывать имена свойств и методов объекта безо всякой
ссылки на объект.
И наконец, упомянем оператор switch. Этот
оператор позволяет определять все возможные значения
данной переменной для исполнения всех необходимых задач.
Если текущее значение не равно одному из
определенных заранее, программа переходит к разделу default.
Функции
В ЭТОЙ ГЛАВЕ
■ Понятие функций
■ Использование аргументов
■ Дополнительные сведения о функциях
Организация одной или множества функций
относится к одной из целей всех программ на JavaScript. В
самом простом случае сценарий может читать или
принимать данные, выполнять определенные операции на
наборе данных либо отображать и отсылать данные. Как
упоминалось ранее, для достижения требуемых целей
можно использовать комбинацию базовых
инструментальных средств JavaScript или просто одно из них.
Для связи с каким-то браузером сначала
необходимо запросить его возможности и затем направить его по
нужному пути. Для того чтобы у посетителя появилось
желание неоднократно возвращаться на ваш Web-сайт,
лучше всего предоставить ему возможность получать
информацию о всем новом и интересном, появившемся на
сайте. Если вы, например, продаете какие-либо товары,
при помощи JavaScript несложно подсчитать стоимость
любой их комбинации для клиента и сохранить
полученные данные для отдела маркетинга.
Выполнение подобного типа задач требует
использования большого количества строк JavaScript.
Некоторые разделы сценария должны выполняться
непосредственно после загрузки Web-страницы в браузер. Другие
части сценария, возможно, окажутся полезными, если
проявят себя после того, как клиент введет
определенные данные в HTML-форму. Иногда бывает
необходимо многократно (или даже неограниченное количество
раз) использовать отдельные части сценария, при этом
периодическое повторение одного и того же раздела
программы неизбежно.
Перечисленные проблемы приводят к идее
разбиения сценария на части, из которых каждая служила бы
одной конкретной цели. Каждая цель на шаг
приближала бы к успеху в процессе выполнения JavaScript-
сценария. Проверка достоверности введенных в HTML-
форму данных — еще одна задача, которую сценарий
мог бы выполнять, пока посетитель работает с Web-
страницей.
Поэтому имеет смысл разбить сценарий на
логические разделы, каждый из которых предназначен для
одной конкретной цели. Когда подходит время,
определенный раздел сценария начинает выполняться. JavaScript
обеспечивает такую возможность, предоставляя
структуру, известную как функция.
Понятие функций
JavaScript-функция — это просто сценарий, отделенный
от остальной части программы и имеющий свое имя.
Используя это имя, другой сценарий может вызывать его
в любой момент и сколь угодно раз. Некоторые языки
программирования, например, C/C++ или Java, также
используют функции, тогда как другие языки имеют те
же самые семантические единицы, но называют их
методами, процедурами или подпрограммами. Все они
делают в основном те же самые вещи, но имеют
некоторые различия.
Функции служат одной цели — разделению задач,
предназначенных для выполнения в одной программе.
Можно считать функцию уведомлением JavaScript о
необходимости выполнения конкретного списка
связанных команд и выдачи сигнала, как только это будет
сделано.
При вызове функции можно передать значения,
называемые аргументами (arguments). Аргументы можно
использовать в качестве переменных (variables) в пределах
одного блока операторов. Как только данные
присвоены переменной, становится возможной обработка
данных либо использование их в вычислениях.
Создание функций
Ниже приводится синтаксис объявления функции в
JavaScript:
function имяфункции ([аргумент!] [.. . , аргумент!]] ) {
I операторы]
Базовое подмножество языка JavaScript
Часть II
Ключевое слово function используется для
определения функции с именем имяФункции, которое служит в
качестве идентификатора для набора операторов,
заключенных в фигурные скобки. Имена аргументов,
хранящих передаваемые в функцию значения, заключаются в
круглые скобки и отделяются друг от друга запятыми.
С точки зрения программирования, аргументы
представляют собой переменные, которым можно
присваивать литеральные значения, другие переменные или
объекты, передаваемые в функцию при вызове. Даже в
случае полного отсутствия аргументов все равно
необходимо после имени функции указывать пару круглых
скобок, тем самым обозначая идентификатор как
функцию.
Операторы в теле функции выполняются при
каждом вызове функции. Для повышения
удобочитаемости строки внутри блока операторов выравниваются.
Где объявлять функции
Теоретически функцию можно объявлять в любом
месте в пределах раздела <script>. Существует
единственное ограничение — нельзя объявлять функцию в
пределах другой функции или управляющей структуры.
Однако, имейте в виду, одни блоки HTML-документа
загружаются раньше других, равно как и любые
сценарии, встроенные в эти HTML-блоки. В этой связи
рекомендуется объявлять функции HTML-документа в
разделе <head>. Объявление всех функций в этом
разделе гарантирует, что функции будут доступны, если
какому-то сценарию потребуется вызвать их
немедленно.
В листинге 8.1 показана функция defaultColors(),
объявленная внутри раздела <head>. Далее эта
функция вызывается в разделе <body> документа.
Листинг 8.1 Объявление функции в разделе
<head>.
<html>
<head>
<title>06"bHBJieHKe функции</Ь1'Ь1е>
<script type="text/javascript">
< ! —
function defaultColors () {
document, writeln ("Внутри defaultColor () ") ;
document. £ gColor = "black" ;
document. bgColor — "white" ;
]
// —>
</script>
</head>
<body>
<script type="text/javascript">
<! —
document, writeln ("функции — это сценарии,
'-"ожидающие выполнения! " ) ;
defaultColors();
document, writeln ("Все дела переделаны.");
// —>
</script >
</body>
</html>
Вызов функции
Листинг 8.1 демонстрирует вызов функции defaultColors()
из второго раздела сценария. Это пример вызова
функции без аргументов. После полной загрузки
HTML-документа функция сохраняется в памяти и находится там
"в состоянии боевой готовности". Она не будет
выполняться, пока главный раздел сценария не вызовет ее
следующим оператором:
defaultColors ()
В этой точке программа сразу же переходит на
первую строку функции defauItCoIors(). После выполнения
всех трех строк программа возвращается назад к точке,
в которой она покинула главный раздел, и продолжает
работу там.
Таким образом получается такой же эффект, как и
при помещении всего кода функции непосредственно в
конкретную позицию программы. Теперь, когда
функции присвоено имя, все, что потребуется сделать для
выполнения тех же инструкций — использовать ее имя
снова. Результаты описанного процесса показаны на
рис. 8.1. Многократно использование какого-то кода —
вот наилучшее применение функции.
-J-1» Priii Vvw i>
функции-это 1энарии. ожидающие выполнения! Вн/трийе1аиКСо1ог()Всвдепатервдепань1
РИСУНОК 8.1. Повторное использование кода.
ПРИМЕЧАНИЕ
В отличие от свойства строки fontcolor, свойства
документа fgcolor и bgcolor можно изменять без
обновления или перезагрузки страницы в браузере.
Использование аргументов
Функции с аргументами не менее полезны. Аргументы
дают возможность многократно использовать функцию
Функции
Глава 8
в разных задачах для достижения одних и тех же целей.
Например, можно создать функцию, необходимость в
которой возникает много раз входе выполнения программы;
однако при этом каждый раз при вызове функции
требуется изменять одно из значений внутри функции.
Один из способов решения упомянутой проблемы
без задействования механизма аргументов связан с
применением глобальных переменных, которые могут
изменяться как вне, так и внутри функции. Программа
станет запутанной, если те же самые переменные будут
использоваться внутри более чем одной функции.
Выгоднее создать функцию с аргументом, принимающим
все необходимые значения. В листинге 8.2 показана
функция, которая пользуется преимуществом
применения аргументов.
Листинг 8.2. Использование аргумента
в JavaScript-функции.
<html>
<head>
<Ь1Ь1е>Функции и аргументы</Ь1Ъ1е>
<soript type="text/javascript">
<!—-
function getBinary (antnteger) {
var result = "";
var shortResult = "" ;
fc (var i=l: i <= 32; i++) <
if (anlnteger S 1 = 1) (
result = "1" + result;
shortResult = result
} else {
result = "O" + result;
anlnteger = anlnteger » 1;
return(shortResult) ;
)
}
// ~>
</script>
</head>
<body>
<script type="text/javascript">
<! —
var binaryString = "";
// Объявление переменной х
x = 9;
binaryString = getBinary(x);
// Запись результатов на страницу
document.write("Число " + x +
" в двоичном представлении: \п") ;
document.writeln(binaryString);
// Переопределение переменной х
x = 255;
binaryString = getBinary(x);
// Запись результатов на страницу
document.write ("Число " + x +
" в двоичном представлении: \п") ;
document.writeln(binaryString);
document.writeln ("Значение переменной х
■♦все еще равно: " + х) ;
// ~>
</script>
</body>
</html>
Когда функция вызывается как getBinary(x), она
Получает копию значения, хранящегося в переменной
х. Такой процесс называется передачей по значению
(passing by value). Значение присваивается anlnteger -
локальной переменной данной функции. В дальнейшем
эту переменную можно использовать в любом месте
блока операторов как локальную. Как показано на рис.
8.2, если anlnteger изменяет значение внутри функции,
это изменение не затрагивает значение переменной х,
которая играет роль аргумента.
|1МИ-< UMTtf-Neuten-e
\ „A 3 '& ^ i
1 v ■*> ■ - цдй-тДг^. я/л *iv mnr
i
ВД
ЧиоюУвд чн:м представлении 1001 Число ~Ъ в двоичн:м редставлении 11111111
Значение перинной :■: в:н еще тявно: 255
(У^Зис
■ taiMTwiuBwflR^
РИСУНОК 8.2. Передача по значению не оказывает влияния на
первоначальную переменную.
Обратите внимание, что anlnteger объявлять с
использованием ключевого слова var не требуется.
JavaScript автоматически объявляет новую переменную
при каждом вызове функции.
Последний оператор в теле функции getBinaryO -
это rcturn(shortResult). Функция может получать
значение, и точно также она может и возвращать
определенное значение. Оператор return возвращает одиночное
значение в место вызова функции в программе. Возврат
значения функции работает таким же образом, как и
возврат значения вычисленного выражения.
Приведенный ниже оператор присваивает переменной binaryString
значение, возвращаемое getBinary():
binaryString = getBinary(x);
В данном случае переменной binaryString
присваивается последнее значение shortResult.
Можно использовать функции, возвращающие
значение, в обычных выражениях. Некоторые функции
возвращают результат набора вычислений, тогда как
•7Я-
Базовое подмножество языка JavaScript
Часть II
другие — логическое значение, уведомляющее о том, все
ли в порядке (см. листинг 8.3).
Листинг 8.3. Функции, возвращающие значения,
которые можно использовать в выражениях.
<html>
<head>
<tit"е>Функции</Ь'tle>
<script type="text/javascript">
*c! —
function isphone( String) {
var aChar = null;
var status = true;
if(aString.lencjth != 13) {
status = false;
)else(
for (var i = 0; i <= 12; i++)
aChar = aString.charAt(i);
if ( i = 0 && aChar ==
continue;
)else{
if ( i = 4 ЬЬ aChar =
continue;
)else(
if( i = 8 fifi aChar
continue;
)el: (
if ( parse!nt(aChar,10) >= 0 SS
parseInt(aChar,10) <= 9 ) (
continue ;
)else {
status = false;
break;
)
(
'(" H
")" ) {
..... )(
)
return(status) ;
}
// — >
</script>
</head>
<body>
<script type="text/javascript">
< —
var userlnput = "(800)555-1212";
if (isPhone (userlnput) ) (
document, writeln ("Спасибо За ввод вашего
*-» номера телефона.");
document.writeln ("Наш представитель
^■•подготовит вам") ;
document. vrri teln ( " дополнительную
^информацию. ") ;
)else{
document. writeln ( "Пожалуйста, введите
^ номер телефона повторно,")
document.wrxteln ("используя формат
-(###)###-####.");
}
II—>
</script>
</body>
</html>
Вызов функции isPhone(userlnput) применяется как
условное выражение в операторе if. Функция isPhone()
возвращает логическое значение. Возвращенное
значение дает знать вызывающей программе, в корректном ли
формате был введен телефонный номер. Это полезно
для проверки достоверности данных, вводимых
пользователями в HTML-форму. Из рис. 8.3 видно, что
телефонный номер был введен корректно, на что указывает
соответствующее сообщение. Подробную информацию,
касаемую проверки достоверности вводимых данных,
можно найти в главе 29.
ай ' цнн - нем . >
1 J. ' ■ '
ЯП
Спасибо за [ ю, вашего номера ,пефона. Наш представитель юдготови вам
дополнитепьну информацию
ЙГь^Ф-
'Q cw**nt5imi?{
fffe.
^,:~г'.
РИСУНОК 8.3. Использование функции в качестве • - ювного
выражения.
Изменение количества аргументов
Для функции устанавливается определенное количество
аргументов. Несмотря на то что использование в
точности объявленного количества аргументов считается
хорошим стилем программирования, иногда возникает
необходимость установки другого количества
аргументов. Иногда это требуется при вызове функции,
которая каждый раз использует одно и то же значение
параметра и изменяет его только в специальных случаях.
Если аргументы не передаются, следует
использовать их значения по умолчанию, определенные в теле
функции. Это позволяет вызывать функцию без
аргументов или определять значение, отличное от значения
по умолчанию. В листинге 8.4 создается функция для
отображения типичного приветствия, появляюшегося,
когда пользователь заходит на Web-страницу.
Эта программа отображает одно из двух сообшений,
в зависимости от того, известно ли ей имя посетителя.
Если userName не равно null, это значит, что
переменная определена. Такое возможно только если в функцию
передается значение, например. Г-н Президент. Если
аргумент функции равен null, переменная в
приветственном сообщении вообще не используется.
Функции
Глава 8
Листинг 8.4. Функция, принимающая один аргумент или не принимающая ни одного аргумента.
<html>
<heacl>
<title>4>yHJCmm</title>
<script type="text/javascript">
<! —
// userName является необязательным
function welcomeMessage (userName) {
if (user-Name I = null) (
document writeln ("\"Еще раз здравствуйте, " + userName + "A"");
)else{
document, writeln("\"Добро пожаловать на наш Web-сайт! \"") ;
document, write ("ЧпЕсли в функцию не перелается значение, ") ;
document, writeln ("в результате отображения ") ;
document, writeln ("переменной \"userName\" будет: ") ;
document.writeln (userName) ;
I
i
/7 —>
</script>
</head>
<body>
<scxipt type="text/javascript">
<! —
aocument. writeln ("Первый вызов welcomeMessage(),\n");
welcomeMessage("Г-н Президент");
document.writeln ("<1Ш>\пВторой вызов welcomeMessage () ,\n")
welcomeMessage () ;
// "->
</script>
</body>
</html>
Как показано на рис 8.4, ее использование приводит
к отображению нежелательных данных. В зависимости
от конкретного браузера, нежелательные данные будут
отображаться как undefined или как пустой символ.
-Nehcope H0I3
--&* :М/4л tyw S£ Ъ&гтяп&М}> Ши,
г'' «я э, ш" .if, ■& -л яс а ж
,. -J^u™ aWt%;X..W=Aw' :n,.CTT4,!.l ll.lA, J.I.J '.TrtfB "gtf^-.yJbaftlUaH^- '
Первый вызов v »lcomeM^ssage(). "Ell, раз здравствуйте. Г-н Президент"
Второй Dbl30BwelcomeMessage(). Добро пожаловать на наш V еЬ-сайт| Если в
функцию нэ передается учение в результате отображения переменной "useitslame"
Сулет undefined
РИСУНОК 8.4. Результат использования аргументов.
СОВЕТ
В настоящее время JavaScript поддерживает операцию
typeof, которая обеспечивает проверку, является ли
userName неопределенным или равным null. Это
идеальный способ проверки, но он не поддерживается в
некоторых устаревших браузерах.
РЕСУРС
Новые возможности JavaScript подробно
описываются на сайте Netscape DevEdge по адресу http://
developer.netscape.com.
Еще один случай связан с передачей в функцию
большего количества аргументов, чем было определено
в объявлении. Дополнительные значения при этом не
теряются, а сохраняются в массиве arguments, который
представляет собой свойство каждой функции. Все
аргументы, сохраненные в массиве, могут быть
извлечены в пределах тела функции. Например, первый
аргумент, переданный в функцию welcomeMessage, можно
получить так:
firstArg = welcomeMessage.arguments[О]
Элементы массивов JavaScript нумеруются, начиная
с 0. Второй элемент в массиве будет иметь индекс 1 и т.д.
Для вычисления общего количества переданных
аргументов можно записать такую строку:
numArgs = welcomeMessage.arguments.length
В листинге 8.5 демонстрируются все упомянутые
возможности, при этом в weIcomeMessage() передается
переменное количество аргументов. В данном случае
функция weIcomcMessage() приобретает следующий
вид:
4 1-158
Базовое подмножество языка JavaScript
Часть II
welcomeMessage([имяПолъзователя]
[, дололнигельноеСообщение! ]
[, дополнителъноеСообщение2) . . )
Обратите внимание, что в листинге 8.5 ситуация,
при которой USerName неизвестно, однако дополнитель
ные сообщения должны отображаться, все еще
поддерживается. Переменной USerNaine2 присвоено значение
null для того, чтобы заполнить первый элемент в
массиве аргументов так, чтобы сообщение не рассматрива
лось в качестве имени пользователя. На рис. 8.5
показано, что со всего этого вышло.
СОВЕТ
При коллективной разработке все сложные сценарии
необходимо документировать, чтобы все, написанное
лично вами, смогли понять и другие. Без простых и
наглядных комментариев чтение приложения отымет
гораздо больше времени.
о* количество ■
Fn-f Vipyi' "\t\ - ( ri.-44-ii iiL-f-ilnr
а функции "Netsca i
hf-I-ilriT H«IO.:
I Ж' a» Jf:
L 1С» ....."■
<f £ :l3fc h №ejCj»ks tell -CI feed-T6+№1
'Еще раз здоавствуйте. Валера."" Давненько не встречались!"
ИВ
1ЧЩ
'Добро! ижаповать на наш \ еЬ-сайтГ "Нехотите пи стать членом клуба "Стать <еном
кпуоа мсак и в ' тайнег
ЯРВ»'-
■ Jfe«s«fi*EDW*^ «
^'«ife 4L*j3&i$&&i :->
РИСУНОК 8.5. Передача в функцию множества ргументовдля
отображения множества сообщений.
Листинг 8.5. В функцию можно передать переменное количество аргументов.
<html>
<head>
<title>nepeMeHHoe количество аргументов в функции</Ьл.1^1е>
<script type="text/javascript">
<! —
// При определении welcomeJMessage воспользуйтесь таким синтаксисом:
// welcomeMessage ([userName] [, extraMessagel] [,extraMessage 2] ■■■)
function welcomeMessage'userName) {
if (userName != null) {
document.writeln("\"Eiue раз здравствуйте, " + userName + "A"");
)else{
document.writeln("\"flo6po пожаловать на наш Web-сайт? \"") ;
J
mimArgs = welcomeMessage. arguments . length;
// Если в функцию, помимо userName, передаются дополнительные аргументы,
// отобразить каждый из них.
if (numArgs > 1) (
for (var i = 1; i < numArgs; i++) {
document.writeln("\""+welcomeMessage.arguments[i]+"\"");
}
)
// —>
</script>
</h.ead>
<body>
<script type=Mtext/javascript">
<! —
var userName = "Валера**, extraMessage — "Давненько не встречались!
var userName2 = null ;
var extraMessagel = "He хотите пи стать членом клуба?";
var extraMessage2 = "Стать членом клуба можно и в онлайне'";
welcomeMessage(userName, extraMsg),
document, writeln (,,<hr>") ;
welcomeMessage(userName2, extraMsgl, extraMsg2);
// -->
</script>
</body>
</html>
Функции
Использование глобальных и
локальных переменных
В главе 5 рассматривались отличия между локальными
и глобальными переменными. Кроме того, было
продемонстрировано, что глобальная переменная может
изменяться в любом месте документа, в то время как
локальная — только в пределах функции, в которой она
объявлена. Выбрать подходящий тип переменной
можно, следуя приведенным ниже рекомендациям:
• Если предполагается, что значение переменной
будет использоваться и, возможно, изменяться в любой
части программы (как внутри, так и вне функций),
то переменная должна быть объявлена вне любой
функции. Это называется созданием глобальной
переменной, поддающейся изменению в любой части
программы. Лучше всего объявлять глобальную
переменную в разделе <head> HTML-документа, тем
самым обеспечивая объявление переменной до
любого ее использования. В этом случае исчезает
необходимость повторного объявления этой переменной
внутри какой-либо функции.
• Если переменная необходима только в пределах
конкретной функции, там ее лучше и объявлять.
Убедитесь что при объявлении переменной используется
ключевое слово var. В этом случае ее значение
гарантированно будет изменятся только в пределах
функции, JavaScript будет считать такую переменную
уникальной и отличной от любых глобальных
переменных, которые могут иметь то же самое имя. Для
объявления переменных аргументов использовать
ключевое слово var не требуется. Переменные,
определенные в объявлении "*)vhkhhi , автоматически
считаются локальными и объявленными с ключевым
словом var.
• Если требуется использовать переменную только в
предела^ главного сценария, а не внутри каких-либо
функций, объявляйте переменную где-нибудь вне
Глава 8
функций. К сожалению, нет средства, которое
уберегло бы сценарий от использования переменной
внутри функций, поскольку переменная будет
рассматриваться как глобальная. Из-за
невнимательности разработчика это может привести к перезаписи
значений, хранящихся в переменных с
одинаковыми именами. Во избежание подобного рода проблем
всегда следуйте приведенным выше указаниям.
Если требуется переменная, изменяющаяся в
пределах одной функции, но не нужная в другой функции,
передавайте ее в эту функцию в качестве аргумента.
Тем самым создается копия переменной и ее
значение присваивается переменной аргумента заданной
функции. Поскольку функция в процессе работы
изменяет свою собственную копию переменной, это
никак не скажется на оригинале. Переменные
аргумента автоматически объявляются как локальные для
данной функции. Даже если переменная аргумента
имеет то же самое имя, что и передаваемая
переменная, изменения последнюю не затрагивают. Одно
исключение все же есть — объекты. Когда в
качестве аргумента передается объект, он передается по
ссылке, а не по значению. Вместо создания копии
объекта функция использует первоначальный объект.
Изменения, сделанные в свойствах объекта в
пределах функции, оказывают влияние на первоначальный
объект.
Примеры передачи переменных по значению
приведены в листинге 8.6. Обратите внимание, как JavaScript
различает переменные с одинаковыми именами. Здесь
переменная numberB передается в функцию doubIePassedVar().
JavaScript автоматически создает локальную переменную,
также названную numberB. Даже при том, что эта
локальная переменная имеет имя, совпадающее с глобальной,
изменения ее значения никак не затрагивают глобальную
переменную. Результаты выполнения кода из этого
листинга показаны на рис. 8.6.
Листинг 8.6. Использование локальных и глобальных переменных.
<html>
<head>
<title>JIOKajibHbie и глобальные nepeMeHHbie</title>
<script type="text/javascript">
<!
// Глобальные переменные, которые можно изменять в любой функции,
var nuniberA;
// Глобальные переменные, которые можно изменять только в главном сценарии,
v.ir numberB
function doubleGlobalVar(){
// Это изменит значение глобальной переменной.
numberA *= 2;
I
function tripleLocalVar () (
ШШ-
Пазовое подмножество языка JavaScript
Часть II
л
// Здесь используется переменная с именем, совпадающим с именем глобальной
// переменной, однако JavaScript будет трактовать их как разные переменные.
var numberA = 1;
numberA *= 3 ;
function doublePassedVar(numberВ) {
// Имя аргумента совпадает с именем передаваемой в функцию переменной.
// Опять-таки переменные трактуются как разные.
numberB *= 2 ;
)
//—>
</script>
</head>
<body>
<script type="text/javascript">
numberA = 1 ;
document, writeln ("Начальное значение numberA: " + numberA);
doubleGlobalVar();
tripleLocalVar();
document, writeln ("Результирующее значение numberA: " + numberA);
numberB = 1;
document.writeln ("Начальное значение numberB: " + numberB) ;
doublePassedVar(numberB);
document.writeln("Результирующее значение numberB: " + numberB);
// -->
</script>
</body>
</html>
(Ы.пин
■■ Er-i
I
' Начально
nunbeB:
1
1
1
-}'W*r Q-J,
эзначение
1 Реэупьп
■ lr 1.-I I.I N III I.Ml'l И!ПГТ-
t Ttmunr«*r* ti*lp
3 Ъ
numberA: 1 Ре^пьг ю ееэнач
рующ€ значение numberB: 1
*ze&
ЭН1 " numberA
2 Начальное значение
РИСУНОК Я.6. Полученные значения переменных maciberА и
numberB.
Передача объектов по ссылке
Формальное введение в создание пользовательских
объектов JavaScript предоставляется в главе 11. Имея
дело с функциями, важно знать, что случается при
использовании объекта в качестве одного из аргументов в
вызове функции.
Когда в функцию передаются данные простых
типов, например, строки, числа илилогические значения,
передача выполняется по значению. Это означает, что
вместо оригинала функция использует копию
переменной. Любые изменения, произведенные в копии,
оригинал не затрагивают.
С другой стороны, когда в функцию передается
объект, то передача происходит по ссылке.
Следовательно, функция будет изменять первоначальный вид
объекта. Зная это, простые типы данных можно поместить
внутрь объекта, если требуется передать переменную по
ссылке (см. листинг 8.7).
Листинг 8.7. Передача по ссылке по значению.
<html>
<head.-
<title>nepena4a по ссылке по 3Ha4eHH»K/title>
<script type="text/javascript">
<!
// ТЪоместить стандартный тип integer
// в С'бъектнуь С'бс'ЛС'Чку
function intObjectO {
this.i;
return this;
J
function start() {
// Два способа хранения данных типа integer
var I ;
var mylntObject = new intObject() ;
// Присвоить начальные значения
i = 0;
mylntObject.i = 0;
// Сообразить текущие значения
document. write("<br>flo<br>");
document.write("i = " + i) ;
document.write("<br>");
document.write("myIntObject = " +
mylntObject.i);
document.write("<br>");
// Передать переменные в функцию
modify(i, mylntObject);
// Отобразить текущие значения
document.write(,,<br>IIocne<br>") ;
document.write("i = " + i) ;
document.write ("<br>") ;
document.write("mylntObject = " +
mylntObject.i);
document.write("<br>");
j
function modify (n, obj) {
n++:
obj.i++;
)
II—>
</script>
</head>
<body>
<script type="text/javascript">
<i —
start () ,-
II—>
</script>
</body>
</html>
Функция intObject() используется для помещения
переменной i в объектную оболочку. Экземпляр
объекта создается следующим образом:
var mylntObject = new intObject()
Теперь mylntObject может использоваться для
обращения к переменной i при помощи такого кода:
mylntObject. i
Это также позволяет передавать в функцию числовое
значение по ссылке. Функция modify() демонстрирует
различия между изменением простого типа данных и
изменением объекта. На рис. 8.7 показано, что начальное
значение i не изменилось, в то время как на
первоначальное значение mylntObject.i воздействие было оказано.
Дополнительные сведения о функциях
В главе рассматривались основные понятия,
касающиеся функций. Без функций JavaScript был бы просто
языком написания сценариев, который использовался
бы только для очень простых сценариев. К уже
сказанному вполне уместно добавить, что функции могут
повторно использоваться и быть рекурсивными.
Повторное использование функций
Функция — наиболее подходящий инструмент для
деления приложения на логические части, но еще боль-
Глава 8 U!U
Шую выгоду она дает в плане повторного использования
кода.
WWWMMWT^Wb* ■''" ::>ia
"■"
List
-Ops a S of twee-
Auto Imported Items
Automatics
Buttwisand Finance
Complementey HeaWi
-;«;■"
Computer General I
Computet Mew»
Cukure1
Dieetfiofct
Gjsdm
General Inteie?!
Runout
hvl*n1 U*»««^i%n
> +"'>::№V:eJi;
Mfut
ML
an Messaging
uondJeyoSciipt
raSOS
r-
f
d
jm
' ~
:
'.i
i*
Before
i=0
myIntObjei:t= 0
Aflcr
i = 0
mybitObject= 1
РИСУНОК 8.7. Передача пользовательского объекта JavaScript
по ссылке.
В отличие от циклов, которые повторяются много
раз в определенной последовательности, функцию
можно повторно использовать в любое время, просто
обращаясь к ее имени. Создание функций, которые
предназначены для одной цели, но полезны в многих ситуациях,
— практичный и предусмотрительный подход.
Например, в листинге 8.4 функция welcomeMessageO
служит одной и той же цели сразу в нескольких
случаях в процессе выполнения программы. Функция
welcomeMessageO пригодилась в большем количестве
ситуаций, т.к. в листинге 8.5 был создан более гибкий
список аргументов. Она еще служит все той же пели, но
это лучший кандидат на повторное использование в
более гибкой форме.
Вспомним, что функции можно хранить во внешних
JavaScript-файлах. Включают эти файлы, используя
атрибут src дескриптора <script>. В результате
существенно снижаются временные затраты разработчика по
распространению новой версии функции на весь сайт,
поскольку ему потребуется отредактировать функцию
только один раз.
Рекурсивные функции
Функции JavaScript могут быть рекурсивными, т.е.
вызывать сами себя. Вычисление факториала — лучший
способ демонстрации рекурсивного процесса. Ввиду
того что JavaScript не имеет встроенной операции
факториала, их придется вычислять самостоятельно,
причем с использованием механизма рекурсивных функций.
Для нахождения факториала любого
положительного целого числа п требуется просто найти произведение
всех целых чисел от 1 до п. Например, факториал
числа 6 (записывается как 6!) вычисляется следующим
образом:
НВМ Базовое подмножество языка JavaScript
EH- ч^г..
6! =6x5x4x3x2x1 =720
7! вычисляется так:
7! = 7x6x5x4x3x2x1 = 5040
На основе сравнения этих двух выражений можно
записать общую формулу, которая будет
использоваться в создаваемой функции. Обратите внимание, что 7!
ни что иное как 7х 6!. Для любого положительного
целого числа п справедлива запись n! = n х(п - 1)!.
Первая итерация выглядит так:
7! = 7 х (7 - 1)!
= 7 х 6!
Теперь необходимо остановиться и вычислить 6!.
Поступая аналогичным образом еще шесть раз, получим
окончательное решение. Однако гораздо эффективней
воспользоваться рекурсивной функцией, например,
такой:
function getFactorial(n) {
var result;
if (n > 0) {
result = n * getFactorial (n — 1);
} else if (n=0) <
result = 1 ,-
} else {
result = null;
I
return (result)
1.
Функция сначала сравнивает п с нулем. Если
выражение п > 0 истинно, функция умножает п на
результат, возвращенный из вызова этой же функции с
другим аргументом, в данном случае, п - 1. Вложенные
вызовы функции getFactorialO продолжают ожидать,
пока п не станет равным 0. В этот момент наиболее
вложенное выполнение функции завершается и
возвращает первое значение. JavaScript возвращается назад и
завершает каждую вложенную функцию, пока не достигнет
первого вызова getFactorial, после чего получится
окончательный результат.
Разработка полезных функций — один из наиболее
существенных и интересных аспектов
программирования. После того как функция проверена в действии,
стоит возвратиться и подправить ее, попытаться сделать
более гибкой. После не забудьте убедиться, что
функция все еще решает заданную цель и не делает ничего
неожиданного.
Резюме
Получив определенный опыт создания функций,
можно переходить к следующему захватывающему шагу в
программировании на JavaScript — созданию
пользовательских объектов. Эта тема рассматривается в главе 11
Однако перед этим необходимо еще многое изучить
касательно объектов, встроенных в HTML и JavaScript.
Кроме того, JavaScript имеет множество встроенных
функций, доступных в любой момент. Перечисленным
темам посвящена глава 10.
JavaScript-функции помогают достичь многих целей.
Они позволяют сохранять код так, чтобы он не
выполнялся сразу же после загрузки документа.
Использование аргументов дает возможность легко дублировать код
и применять тот же самый код для выполнения
одинаковых операций на различных наборах данных. Ниже
приводится краткий список возможностей функций и
напоминаний о том, как каждая из этих функций
выполняется.
• Функция — это набор JavaScript-кодов,
сгруппированных и имеющих собственное имя. Для
объявления функции напишите ключевое слово function, за
которым должно следовать имя функции, набор
круглых скобок и сценарий, который функция будет
содержать. Имя функции должно выбираться в
соответствие с общими правилами именования
переменных.
• Функции могут объявляться в любом месте HTML-
документа, но обязательно внутри пары
дескрипторов <script>. Лучше всего объявлять функции в
разделе <head> документа.
• Для вызова функции напишите ее имя вместе с
набором круглых скобок. В эти круглые скобки можно
заключать любые аргументы, которые будут
передаваться в функцию.
• Аргументы передаются по значению. Функции
могут принимать переменное число аргументов,
независимо от того, как функция была объявлена.
Каждая функция имеет массив, называемый arguments.
Этот массив используется для извлечения значений
переданных аргументов.
• Функции могут возвращать значения. Функции,
возвращающие значения, можно использовать в
выражениях.
• Нет необходимости объявлять переменные
аргументов. Они автоматически объявляются как локальные
переменные, каждый раз когда функция нызывает-
ся. Для объявления глобальных переменных в
пределах функции не следует использовать ключевое
слово var. В данном случае потребуется только
инициализация переменных.
• Функции, решающие одну цель, однако достаточно
гибкие, чтобы иметь дело с различными порциями
данных — верные кандидаты на повторное
использование.
В JavaScript функции могут вызывать сами себя.
Функции подобного рода носят название рекурсивных.
Объекты со
стороны клиента
В ЭТОЙ ГЛАВЕ
Понятие объекта
Объекты JavaScript
Дополнительная информация об объектах
В предыдущих главах книги рассматривались
базовые элементы языка JavaScript. Но это далеко не все. Без
сомнений, квинтэссенция JavaScript со стороны
клиента — это объектная модель. Поэтому в настоящей главе
будет дано общее представление объектной модели
JavaScript и всех существующих на данный момент
языковых объектов.
Перед детальным изучением JavaScript-объектов
потребуется выполнить краткий обзор некоторых
основных концепций объектно-ориентированного
программирования (object-oriented programming — ООП).
JavaScript не настолько объектно-ориентированный, как
Java или C++, но и он основан на объектах. Поэтому
знание соответствующей терминологии будет хорошим
фундаментом для понимания использования JavaScript-
объектов.
После раскрытия основных понятий ООП эта глава
переходит к рассмотрению того, что собой
представляет объектная модель JavaScript, а также (что еще
важнее) — того, чем она не является. Наконец, в
заключительной части главы приводится краткое описание
всех объектов объектной модели.
Понятие объекта
Человеку, недостаточно хорошо знакомому с объектно-
ориентированными концепциями, может показаться, что
разработчики, пользующиеся ООП, говорят на другом
языке. Действительно, термины наподобие ООП,
метода, свойства на первых порах выглядят пугающе для
того, кто привык программировать с помощью функций
или макрокоманд. Однако как только вы найдете время
для изучения ООП, вы увидите, что его легко понять
интуитивно. В этом разделе рассматривается ряд
основных концепций, в том числе объекты, свойства и
методы.
Объекты
Программы обычно разрабатываются в специальных
коммерческих целях. Например, система менеджмента
предназначается для обработки заказов со стороны
клиентов. Коммерческие прикладные задачи, в дополнение
к требованиям конечного пользователя, формируют "мир
проблем", или "пространство проблем", или то, на что
ссылаются как на "предметную область" программного
обеспечения. Эта область также включает и такие
компоненты, как графический пользовательский интерфейс
(GUI).
В конструкции объектно-ориентированных (ОО)
приложений объекты являются центральными
логическими блоками. Зачастую объекты в коде программы -
это представления реальных объектов, находящихся в
пространстве проблем. При этом существует
возможность формирования вспомогательных объектов для
решения специальных проблем.
Объектом может быть любое понятие из
следующего списка:
Материальная или видимая вещь в предметной
области, например, заказ или клиент. Если
разрабатывается программное обеспечение для
автомобильного бизнеса, вероятными объектами будут
продаваемые автомобилей, модели автомобилей,
служащие, клиенты и т.п.
• Абстрактная концепция, существующая только в уме
разработчика, или что-то, что можно представить
умозрительно. Например, при разработке
прикладных программ для химиков потребуются химические
структуры объектов типа молекул, атомов,
химических моделей и пр. Дату и время также можно
рассматривать как умозрительные объекты, т.к. они,
конечно же, не материальны. Объект Math в JavaScript —
еще один хороший пример чистой логической кон-
ПИ—;
Пазовое подмножество языка JavaScript
Часть II
цепции. В объекте Math содержатся расширенные
математические функции (арифметические и
тригонометрические) для обработки чисел в JavaScript.
• Видимый объект графического пользовательского
интерфейса (GUI-объект). JavaScript содержит много
различных GUI-объектов, например, окна, фреймы,
кнопки, поля ввода.
Исторически сложилось, что ОО модель базируется
на концепции структур данных. Структуру данных
можно рассматривать как более сложный тип данных.
Структура данных очень похожа на идею объекта. Она
представляет собой модель абстрактной концепции в
информатике для решения простых технических задач
программирования. Структура данных является
контейнером, содержащим соответствующие данные о
переменных и определенных для них операциях.
Существует множество примеров того, что в книгах
по компьютерным наукам объектами называют по
существу структуры данных, типа протоколов, массивов,
комплексных чисел или стеков. Стек — это контейнер для
хранения значений данных; работа с ним, в основном,
подобна работе со стопкой бумаги. В каждый момент
времени стек может хранить только один элемент
данных, который всегда помещается повср .других
элементов. Кроме того, удалять элемент данных можно только
из верхней позиции стека.
Другие популярные структуры данных — строки и
даты, которые также рассматриваются в JavaScript как
базовые объекты. Строка — это совокупность одиночных
символов. Строка считается одиночным объектом даже
при том, что некоторые строковые функции извлекают
подстроки из строк. Объект Date включает в себя
значения данных, содержащих дату и время.
Объект содержит значения данных, необходимые для
описания его природы (свойства объекта) и функции,
которые он может выполнять (методы объекта). Можно
рассматривать объект как нечто, имеющее определенные
границы, как показано на рис. 9.1. Ядро объекта
формируют его значения данных. Элементы данных
объекта описывают специальные характеристики объекта и его
идентификацию. В ОО терминах объектные элементы
данных называются свойствами (или атрибутами).
Вообще говоря, объекты поддерживают множество
функций. Видимые извне функции объекта формируют
его поведение. В ОО терминах объектную функцию
часто называют методом. Метод — это часть исходного
кода, выполняющая отдельно взятую задачу, которая
относится к важным характеристикам объекта. Метод
представляет собой функцию объекта, к которой
можно обратиться.
Другими словами, методы объекта определяют его
поведение, которое проявляется его видимым 1 и
предсказуемыми действиями.
Структура объекта на рис. 9.1 показана в виде
пирога с начинкой. Методы объекта размещаются во
внешнем круге, поскольку они видимы для других объектов,
т.е. могут вызываться и выполняться для данного
объекта. Атрибуты находятся во внутреннем круге.
Рассмотрим в качестве примера объекта автомобиль.
В объектно-ориентированном пространстве автомобиль
представлен как объект туСаг. Поскольку конкретный
автомобиль — это красный Renault 19 выпуска 1992 г.,
его атрибуты выглядят так:
make
model
age
color
Renault
19
1992
красный
Автомобиль может быть припаркован или
находиться в движении. Это важные для него функции. На рис.
9.2 приведено графическое представление автомобиля
как объекта.
В дополнение к специфическим характеристикам и
идентифицирующим значениям, атрибут объекта может
также отображать состояние объекта или роль которую
объект играет в данное время. Состояние и роль —
специальные зависящие от времени характеристики
объекта. Состояние (state) — вид элемента данных, который
изменяется во времени и в общем случае показывает
текущее значение для объекта.
РИСУНОК 9.1. Графическое представление объекта.
РИСУНОК 9.2. Графическое представление автомобиля как
объекта.
Добавим в список еще один атрибут myCar — position,
который всегда содержит текущее географическое поло-
жение автомобиля. Атрибут position — типичный
пример атрибута состояния.
Служащий может стать руководителем группы или
начальником отдела в любой момент его
профессиональной карьеры. Объект "служащий", таким образом, будет
содержать атрибут профессионального состояния,
хранящий различные должности (руководитель группы или
начальник отдела), которые служащий мог бы занимать.
Рассмотрим пример с использованием факториалов.
На рис 9.3 показан простой графический
пользовательский интерфейс для вычисления факториалов. Исходный
код HTML-формы приводится в листинге 9.1. Обратите
внимание, что исходный код вычислений в этот листинг
не включается.
Листинг9.1. Программа вычисления п!_
<body"^
<h3>
йычисление факториала для Целых
положительных чисел
</h3>
<hr" -
<form>
Введите целое число:
<:.nput type="text" name^'fn" size="2">
результат:
<-.nput type="text" name="f result" size="40">
<br>
<input type="button" name="compute"
value="BbPOicnj*Tb n! "
onClick="xcompute (this.form) ">
</form>
</body>
Вычн - nl-NBtsco-e
; * л га
H L -.in- Hmf
sn*
~3 jfj'Tfyaaftfr
Вычпслсппс фпкторпялр цля целых положптельпыз* чпсел
Введите .и число J результат |
;- . ' MRRfflij. '' I
РИСУНОК 9.3. Графический пользовательский интерфейс для
задачи вычисления п!
В JavaScript атрибуты объекта называются свойства
ми (pro/<erties).Например, кнопка compute в приведенном
выше примере — GUI-объект JavaScript. Кнопка имеет
свойстза name и value. В рассмотренном примере
Объекты со стороны клиента
Глава 9
HTML-документа (листинг 9.1) свойства
определяются атрибутами name и value.
Пользователь может щелкать на кнопке GUI,
следовательно, объект compute поддерживает функцию click.
Функция click позволяет работать с объектом compute
через сценарий. Все функции объекта определяют его
поведение. В ОО терминах функция объекта зачастую
называется методом. Однако в JavaScript применяется
ключевое слово function. На рис. 9.4 приводится
графическое представление объекта JavaScript в виде все того
же пирога с начинкой.
РИСУНОК 9.4. Графическое представление объекта
JavaScript.
Встроенный объект "строка" — это специальный тип
объекта. Строку myString можно создать с помощью var.
Инструкция var создает новые переменные в JavaScript,
например:
var myString = "Мей и только мой текст.
Исключительно для целей демонстрации объекта
строки";
myString, как и все строки, имеет свойство length.
Атрибут length содержит длину строки myString, в
данном случае — число 75. Строки имеют несколько
различных методов (подробности можно найти в главе 10),
в том числе blink(), обеспечивающий мигание строки.
Рассмотрим такой дескриптор HTML:
<blink>
Мой и только мой текст. Исключительно для
целей демонстрации об-ьекта строки
</blink>
Следующая строка создает мигающий на экране текст
"Мой и только мой текст. Исключительно для целей
демонстрации объекта строки":
myString.bl±nk() ;
Свойства объекта могут содержать простые типы
переменной, такие как символы, целые числа и т.д., а
также другие объекты (см. рис. 9.5).
Например, объект myCar может быть определен
через атрибуты make, model, year, owner, где owner —
Базовое подлтожество языка JavaScript
Часть II
объект персоны, определенный в свою очередь через
атрибуты name, age и address. Включение объектов в
атрибуты других объектов обычно называют агрегирова
нием (aggregation) или отношением "целое-часть" (whole-
part). Выражение "целое-часть" показывает типичный
пример содержания, когда машина состоит из
нескольких меньших частей, как автомобиль — из двигателя,
четырех колес и т.д.
Инкапсуляция
РИСУНОК 9.5. Графическое представление содержания
объектов.
В JavaScript имеется множество различных объектов,
среди которых String, Date, Button, Math. Их все
можно использовать. Можно даже иметь несколько
различных объектов, принадлежащих одному типу.
Например, рассмотрим HTML-форму, содержащую
несколько кнопок. Каждая кнопка обладает одними и
теми же свойствами и методами; т.е. каждая кнопка
имеет значение и поддерживает метод click. Объект кнопки
— это только план конструкции реальных кнопок
формы. Подобная спецификация конструкции в ОО
терминологии называется классом (class). Различные
встроенные объекты в JavaScript фактически и формируют
набор классов, которые можно многократно
использовать. Такой набор классов называется библиотекой клас
сов (class library). Поскольку JavaScript в
действительности не имеет дело с классами, как это имеет место в
истинных объектно-ориентированных языках, на
совокупность встроенных объектов в JavaScript зачастую
ссылаются как на библиотеку объектов JavaScript
(JavaScript object library).
СОВЕТ
Для того чтобы сберечь время и силы, затрачиваемые
на разработку программы, используйте побольше
JavaScript-объектов в подходящих ситуациях.
Тщательно изучите библиотеку объектов JavaScript. He
изобретайте собственные типы объектов, если в этом нет
необходимости. Повторное использование уже
существующих программных компонентов — одна из
наиболее выгодных стратегий в объектно-ориентированном
программировании.
Атрибуты данных и функции объекта формируют одну
неделимую сущность, как показано на рис. 9.6. На рис.
9.6 показано то же графическое представление объекта,
которое уже встречалось ранее на рис. 9.1. Информация
о внутренней работе объекта должна быть сокрыта.
РИСУНОК 9.6. Графическое представление объекта в виде
инкапсулированной сущности.
Объект взаимодействует с внешним миром через свои
опубликованные общедоступные методы, которые и
формируют интерфейс. Рассмотрим еще раз объект
myCar.
Опубликованными методами объекта myCar
являются park и drive; они представляют собой функции,
которые поддерживает объект myCar. Эти методы называются
общедоступными (public), поскольку они доступны извне.
Они могут вызываться другими объектами для
реализации своих задач. Интерфейс объекта — это, по сути дела,
набор предлагаемых им общедоступных методов.
Противоположностью общедоступных методов
являются приватные (private) методы. Приватные методы -
это вспомогательные функции объекта. Они
используются только внутри конкретного объекта. Приватные
методы не могут вызываться извне. JavaScript нъ
поддерживает приватных методов, так что все функции,
объявленные в объекте, являются общедоступными.
Даже атрибутами объекта нельзя управлять извне. В
контексте разработки программного обеспечения такой
принцип называется сокрытием информации (information
hiding). Вернитесь к объекту myCar и расширьте список
существующих атрибутов (make, model, age, color)
дополнительными атрибутами, например, engine и wheels.
Правда, лично я особенно не интересуюсь типом колес,
которые имеет myCar. Единственная вещь, которая
действительно важна для меня, — что мой автомобиль
работает хорошо и управляем. Смена типа двигателя не
должна повлиять на рабочее состояние myCar. Кроме
того, тип нового двигателя меня ничуть не интересует.
Все что я только хочу — так это только ездить на myCar.
Объекты со стороны клиента
Глава 9
Построение абстрактного представления объекта
должно предшествовать решению о его реализации.
Изменения исходного кода внутренностей объекта не
должны оказывать влияние на абстрактное представление.
Для создания хорошего и простого программного
проекта необходимо, чтобы никакая часть сложного
приложения не зависела от внутренних кодов любого
объекта, задействованного в приложении.
Инкапсуляция и сокрытие информации приносят
несомненную пользу в двух важных аспектах:
• Будем считать объект небольшим программным
компонентом. Его легко использовать во многих
ситуациях и местах программы. Повторное использование
программных компонентов хорошо поддерживается
через механизм инкапсуляции. Возможность
повторного использования — одно из самых больших
преимуществ ООП. При правильном использовании это
позволит существенно сэкономить время и деньги
при разработке больших программных систем.
• Сокрытие подробностей реализации объекта дает
программисту возможность позже изменять
представление данных без изменений представления объекта во
внешнем мире. То же самое можно сказать и об
изменениях внутренних методов. Интерфейс объекта
остается тем же самым. Исходный код, касающийся
организации взаимодействия объектов, остается тем
же самым. Это означает ощутимое сокращение
усилий по поддержке объектов, равно как и большую
устойчивость архитектуры программной системы по
сравнениюстрадиционнымиприложениями.
Сообщения
Если требуется, чтобы объект сделал что-нибудь
полезное, ему посылают соответствующее сообщение.
Сообщение приводит к вызову определенной функции
объекта. На рис. 9.7 показана передача сообщений между
объектами.
Например, если требуется установить текущее время
в приложении, создается новый объект currTime типа
Date и в нем устанавливается текущая дата и время:
var currTime = new Date () ;
О
*®
РИСУНОК 9.7. Графическое представление передачи
сообщений между объектами.
Инструкция var просто создает новую переменную.
Новые объекты создаются методом объектного типа new.
Метод new в данном случае создает новый объект Date.
Этот новый объект автоматически получает текущую
дату и время. Поскольку в инструкции применена
операция присваивания (=), переменная currTime будет
содержать объект типа Date с текущей датой и временем.
Если необходимо установить текущее время в часах
и минутах, то это делается так:
var hours ,-
var minutes
hours =
minutes
currTime.getHours();
= currTime.getMinutes();
Все, что потребуется предпринять — это отправить
сообщение getHours объекту currTime и в качестве
результата получить количество часов. Затем послать
сообщение getMinutes, чтобы получить количество минут.
Сообщения JavaScript — это, по сути дела, вызовы
функции. Из документации по базовым объектам JavaScript
ясно, что объект типа Date понимает сообщения
getHours и getMinutes. Это означает, что объект типа
Date инициирует вызовы функций getHours() и
getMinutes().
При создании пользовательских объектов
необходимо также определить и методы. Внутри одного метода
может возникнуть потребность в других объектах для
решения некоторых задач. Например, в приложении
для автомобильного бизнеса имеется объект currSale,
ответственный за автомобильную продажу, и метод
getSa!eData(), выдающий данные по продажам. Внутри
функции getSaIeData() присутствуют обращения к
объектам типа Саг и Customer. Обоим объектам
посылаются сообщения с целью получения необходимой
информации. Если продолжить разработку данной
концепции, можно увидеть, что объектно-ориентированное
приложение — это мир объектов, поддерживающих связь
через механизм сообщений.
Классы
Объект — это реально существующая сущность в
программе. Например, okButton, myWindow, currTime -
объекты. Объект — конкретная сущность, существующая
во времени и пространстве, а вот класс представляет
собой только лишь абстракцию нескольких подобных
объектов, как показано на рис. 9.8.
РИСУНОК 9.8. Графическое представление класса.
Базовое подмножество языка JavaScript
Объекты с одинаковыми свойствами и поведением
формируют класс или объектный тип. Класс содержит
конструктивный план принадлежащих ему объектов. Это
означает, что класс определяет количество, имена и
структуры атрибутов и методов.
Кроме того, класс обеспечивает выполнение
функций. Новые объекты создаются прежде всего по
определенному конструктивному плану. Каждый объект -
член некоторого класса; говорят, что объект является
экземпляром (instance) данного класса. Свойство объекта
также назьшается переменной экземпляра (instance variable)
класса или объекта.
Например, ваш автомобиль, мой автомобиль и
автомобиль вашего соседа — все являются автомобилями,
хотя имеют разные марки, года выпуска и цвета.
Каждый автомобиль обладает маркой, названием модели,
годом выпуска и цветом. Кроме того, каждый
автомобиль может двигаться или находиться в месте парковки.
Возможности и функции у них одинаковые. Класс саг
описывает характеристики данных и методы для всех
автомобилей.
Язык JavaScript нельзя назвать
объектно-ориентированным языком, основанным на классах, поскольку он
не имеет операторов для работы с классами. Однако,
JavaScript содержит похожую концепцию — объектный
тип. Клиентские типы объектов включают в себя
различные объекты GUI или базовые объекты типа Date,
String, Math. Новые объекты создаются с помощью
метода new. Это верно для всех объектов. Следующий код
создает объект currTime как новый экземпляр объекта
типа Date:
var currTime = new Date () ;
В JavaScript существует возможность определения
собственных объектных типов. Например, если система
должна отображать значения времени, можно создать
новый объект типа Clock. Объект Clock должен
содержать часы и минуты, следовательно, свойствами
объекта Clock будут hours и minutes. Методы, которые объект
Clock должен выполнять — dispIayTime() и setTime().
Следующий фрагмент демонстрирует определение
объекта типа Clock:
function Clock (hours, minutes) {
this. hours = hours;
this.minutes = minutes;
this. setTime = setTime ;
this .displayTime = displayTime;
I
function setTime (hours f minutes) {
this, hours = hours;
this, minutes = minutes;
)
function displayTime () (
var line = this.hours + ":" + this .minutes;
document.write ("<пгХр>Техущее время: " + line) ;
}
JavaScript является языком, основанным на
экземплярах, поскольку в нем нет конструкций классов.
Основанный на экземплярах (instance-based) — это термин ООП,
означающий, что язык программирования содержит
объекты, но не классы.
JavaScript не особенно хорошо структурирован в этом
смысле. Он не содержит классов, но имеет концепцию
типа объекта. Кроме того, новые объекты не могут
создаваться через существующие; они могут создаваться
только с помощью new. Компания Netscape называет
JavaScript языком программирования, основанным на
экземплярах.
Обратите внимание, что оператор function в JavaScript
предназначен сразу для многих целей. Создание новых
типов объектов означает определение функции с именем
объектного типа в качестве имени функции. 13
результате код всегда выглядит немного запутанным с точки
зрения читателя. Свойства нового типа объекта
объявляются как параметры функции. Это означает, что есть
только один конструктор для нового класса.
Конструктор — метод класса, который создает новый объект в
соответствие с шаблоном класса. Конструктор
инициализирует новый объект с определенными значениями
данных согласно параметрам, передаваемым в
конструктор. В следующем коде показан шаблон для объявления
нового типа объекта в JavaScript:
function ObjectType(instVarl, instvar2, ..){
this, proper tyl = instvarl;
this.property2 = instVar2;
this, methodl = functionl;
this.method2 = function2;
)
functionl (paraml, param2, . . . ) {
here goes the implementation
]
function2 (paraml, param2, . . .) (
here goes the implementation
(
Специальный объект this указывает на текущий
объект. Свойства и методы нового объекта
определяются при помощи присваивания this. Начальные свойства
для нового объекта передаются в качестве параметров
создающей функции; в шаблоне они названы instVarl и
instVar2. В определении типа объекта присутствуют
только имена методов (methodl и method2). Реализация
методов, таких как функции (functionl и functinn2),
рассматривается позже.
Объявления новых объектных типов лучше помещать
в раздел <head> HTML-документа, чтобы они читались
в начале процесса загрузки документа. Это гарантиру-
Объекты со стороны клиента
Глава 9
ет, что объявления класса будут известны во время
интерпретации остальной части программы. Код,
выполняющий действия, обычно помещают в раздел <body>
HTM L-документа.
Для более полного понимания классов рассмотрим
листинг 9.2, делающий короткое описание класса Clock
в простом, но полном HTML-документе.
Листинг 9.2. Создание объекта Clock и отображение
результатов на Web-странице.
<html>
<head>
<title>JavaScript Unleashed</title>
<script type="text/javascript">
<! —
function Clock (hours, minutes) [
this.hours = hours;
this. minutes = minutes;
this . setTime = setTime;
this. displayTime = displayTime;
I
function setTime (hours, minutes) {
this. hours = hours;
this. minutes = minutes;
)
function displayTime () (
var line = this. hours + ":" + this. minutes;
document.write ("<Ьг>Текущее время: " +
line) ;
I
II—>
</script>
</head>
<body>
<script type="text/javascript">
<! —
var currTime = new Date () ;
var niyClock = new Clock '^irrTime. ge tHours (),
** currTime. getMinutes ( ) ) ;
myClock.displayTime();
II—>
</script>
</body>
</html>
При помощи следующего оператора в разделе <body>
документа создается и инициализируется в соответствии
с текущим системным временем новый объект myClock
типа Clock:
var myClock = new Clock (currTime.getHours () ,
cu rrTime.getMinutes());
ПРИМЕЧАНИЕ
Поскольку JavaScript — это язык, основанный на
экземплярах, в нем имеется возможность расширения
любого существующего объекта новыми свойствами и
методами во время выполнения. При этом новые
возможности добавляются только в один
определенный объект и не затрагивают другие объекты того же
типа.
Объекты JavaScript
Как обсуждалось в начале этой главы, JavaScript — не
объектно-ориентированный язык, а язык, лишь только
основанный на объектах. Он содержит понятия
объектов, свойств, методов и инкапсуляции. Однако он не
поддерживает строгую типизацию, поскольку
переменные не объявляются вместе с типами. Например,
переменная currTime объявляется так:
var currTime ;
Здесь не указывается тип переменной (например, int,
char или какой-то объектный). В переменную currTime
можно поместить значение любого типа, в том числе и
объектного.
Интерпретация всегда предполагает динамическое
связывание во время выполнения. Динамическое
связывание означает, что до выполнения программы типы всех
переменных и выражений не известны.
JavaScript не поддерживает концепцию классов, а
вместо этого в значительной степени основывается на
экземплярах. Наиболее существенный недостаток этого
— отсутствие наследования. Потому-то JavaScript и
относится к категории основанных на объектах, но не
объектно-ориентированных,языков программирования.
Точечная нотация
Доступ к свойствам и методам объекта в JavaScript
осуществляется в соответствие с точечной нотацией. Эта
запись, показанная в следующем синтаксическом
примере, обеспечивает иерархический способ доступа к
свойствам и выполнениям методов.
имяО&ьекта. имяСвойства
имяО&ьекта. имяМетода (аргументы)
К текущему объекту обращаются через специальную
переменную this. В объявлении типа объекта (класса)
переменная this ссылается на сам объект. Этот объект
(текущий объект) является объектом, для которого
объявляется метод.
В типе объекта, определяющего комплексные числа,
метод сложения двух комплексных чисел записывается
следующим образом:
. . сложить х и у и вьщать rz
function add(z) {
var a;
var b;
var rz;
a = this.real + z.getReal(z) ;
b = this. imr- + z.getlmg(z) ;
rz = new Complex (a,b) ;
return rz;
Базовое подмножество языка JavaScripi
EUJ~ Часть 11
Оператор, вычисляющий сумму чисел х и у
записывается так:
x.add(y);
В методе add конструкция this.real указывает на
свойство real текущего объекта х, в данном случае — x.real.
Точно так же this.img указывает на свойство img
объекта x.img, которое хранит мнимую часть х.
Исследование объектной модели JavaScript
JavaScript-объекты — действительно объекты, в том
смысле, что они имеют свойства и методы и могут
отвечать на события. Однако, как было показано в этой
главе, JavaScript не имеет существующей в ООП
возможности наследования. При изучении объектной модели
JavaScript необходимо рассматривать ее как раз в этом
контексте. Вместо иерархии классов, которая является
основой наследования, объектная модель JavaScript -
это иерархия контейнеров (см. рис. 9.9). Если вы
хорошо знакомы с объектно-ориентированными языками
программирования, такими как Java, C++ или Delphi,
то это самое значительное уточнение, о котором
необходимо постоянно помнить при разработке программ на
JavaScript.
Принцип отношения содержания (containership
заключается в том, что один объект содержит пр\ги объекты.
На рис. 9.9 отношения между объектом Form и
объектом Radio не являются отношениями предка и потомка
{или класса и подкласса), это отношения контейнера
(содержащего) и содержимого. Иначе говоря, между этими
объектами нет родственных связей, поскольку ни один
из них не наследуется от другого. В результате один
объект не может наследовать свойства и методы
другого, поэтому в такой иерархии нельзя разбить объекты на
подклассы.
РИСУНОК 9.9. Иерархия
встроенных JavaScript-объектов.
3 О АаччэТог
J-\ С «refew
О bet&y
- 0 location
• Q document
- -0 anchor
О applet
Q atea
l ■• П] Iram
D button
.'. checkbox
0 г-' к)
ei hidden
0 opton
££ [Hsiiwfil
© ia/icj
Q.««
gjjefcd
G nim*
£§l№l
Ш te»E#Efi
О mego
- • *SM
а с***
О ham
-Q ruvigcta
if| o£ Language
Q Away
Q Function
& Oote
Q Math
Q firing
Отношения содержания в JavaScript
Отношения содержания — важный для понимания
термин. При разработке JavaScript-сценариев и прикладных
программ необходимо не только понимать, как один
объект соотносится с другим, но и (для практических
целей) знать, каким образом ссылаться на объект. Как
упоминалось ранее в главе (при обсуждении точечной
нотации), при ссылке на свойства или методы объекта
точка используется для обозначения принадлежности.
Например, в следующей примере метод write
принадлежит объекту Document:
document. write ("<Ы>По небу плавно летел
1*вапильник</Ы>") ;
Однако, эту принадлежность можно расширить с
целью включения не только свойств и методов данного
объекта, но и других объектов, содержащихся в нем. При
необходимости возврата имени объекта Button
воспользуйтесь следующей строкой:
ButtonName = document . formMain. okButton . name ;
document — заданное по умолчанию имя объекта
Document, a formMain — имя объекта Form, который
содержит кнопку okButton.
При работе с объектами важно знать, когда есть
необходимость в ссылке на содержащий объект и когда
такой необходимости нет. Например, объект Window -
по существу, объект самого высокого уровня, с которым
можно работать со стороны клиента. Большинство
ссылок на объекты выполняются в пределах их отношений
содержания. Предыдущий пример document.write
можно записать и по-другому:
window, document.write("<hl>no небу плавно летел
*-*напильник</Ы>") ;
Хотя в большинстве случаев ссылку на window
можно проигнорировать, она станет необходимой при работе
со множеством окон или фреймов. Например, в листинге
9.3 создается объект Window в функции showStats(),
затем этот объект разрушается в функции closeWindow().
Листинг 9.3. Создание нового окна и запись в него
информации.
<html>
<head>
<title> JavaScript Unleashed</title>
<script type="text/javascript">
<i —
var windowObject
function showStats () {
windowJbject = window . open ("", "ViewStats",
Mtoolbar=0, width=300, height=50,
resizable=l");
windowObject . document .write ( "<Ь2>Вэтом
месяце мы перевыполнили план по
составлению планов на следующий
месяц. Примите поздравления!</h2>")
]
function closeWindow () (
windowObject.close() ;
)
// —>
</seript>
</head>
<bc OnUnload="closeWindow()">
<hl>
Щелкните на следующей кнопке для
получения статистики За месяп.
</lu>
<form>
<input type="button" value="Show Stats"
ondick="showStats()">
</form>
</body>
</html>
He следует забывать, что объект Window —
единственный высокоуровневый объект, который можно не
указывать в ссылках на другие объекты. Например, для
ссылки на HTML-форму необходимо добавить ее
родительский объект (Document) для обозначения, на какой
объект выполняется ссылка. Если требуется сослаться на
первую форму в объекте Document и подсчитать
количество элементов в ней, используется следующая
команда:
var mim = document. forms [ 0 ] . length ;
Даже в случае, когда форма имеет установленный
атрибут name, все равно следует добавлять ссылку на
родительский объект:
var num = document. queryForm. length;
Свойства
Свойства в JavaScript похожи на атрибуты данных
объекта. Свойства объекта выражают характеристики и
идентификацию данного объекта. В дополнение к
определенным характеристикам и идентифицирующим
значениям, атрибуты объекта могут также обозначать
состояние объекта или роль, которую объект играет в данное
время
Ниже показано, как при разработке проекта можно
определить тип объекта Project:
function Project (members, leader,
currentMilestone, time) [
this, members = members;
this, leader = leader;
thi s . currentMilestone = currentMilestone ;
this . time = time
>
После этого можно создавать специфическое
программное обеспечение проекта myProject:
Объекты со стороны клиента ■■■■
Глава 9 UU
var myProject = new Project (memberGroup,
"Шариков", "начало", currTime) ;
Объект myProject состоит из группы людей,
описанных в объекте memberGroup. Руководитель проекта -
Шариков, текущий этап — начало (т.к. проект начат
недавно). Переменные memberGroup и currTime содержат
и другие объекты, которые здесь не описаны.
Помимо точечной нотации, существуют и другие
способы обращения к свойствам объекта. Следующий
пример показывает способ доступа к объекту как к
массиву:
имяо&ьект [ 'имяСвойства'* |
А вот доступ через индексацию:
имяО&ьекта [целочисленныйИндекс]
Последняя методика возвращает атрибут с номером
целочисленныйИндекс.
Вне объекта не стоит обращаться к атрибутам объекта
непосредственно, поскольку это противоречит
принципу инкапсуляции. (Обратитесь в раздел "Инкапсуляция"
выше в этой главе.)
Методы
Метод означает определенный сервис, который класс
предоставляет другим объектам. В общем случае,
методы можно разбить на следующих четыре категории:
• Модификатор (modifier). Это метод, который
изменяет состояние объекта. Модификатор изменяет
значение одного и более атрибутов данных объекта.
Распространенная функция модификатора — функция
set, устанавливающая значение определенного
атрибута объекта.
• Селектор (selector). Это метод, который ссылается на
атрибуты данных объекта, но не осуществляет
никаких изменений. Важная функция селектора —
функция get, которая возвращает (получает) значение
определенного атрибута объекта.
• Итератор (iterator). Это метод, который обращается
к всем частям объекта, т.е. ко всем атрибутам данных,
в некотором определенном порядке. В соответствие со
своим названием, итератор выполняет итерации по
атрибутам данных объекта.
• Конструктор (constructor). Это метод объектного
типа, который создает новый объект по шаблону
класса. Конструктор инициализирует новый объект
определенными значениямиданных,полученнымив
области параметров метода.
В JavaScript объектные методы — нормальные
функции JavaScript. Обращаться к ним можно в соответствие
с точечной нотацией:
^ШШШШ Базовое подмножество языка JavaScript
U£J Часть II
имяО&ьекта. имяфункции (аргументы)
Напомним, что HTML-файл содержит раздел <body>,
который создает специальный объект Document на
JavaScript. Объект Document поддерживает метод write().
При помощи этого метода можно динамически
расширять текстовое содержимое HTML-страницы через
сценарии JavaScript. Приведенный ниже оператор
печатает строку Пример строки:
document.write("npMMep строки");
При создании новых объектных типов в JavaScript
применяется такой шаблон:
function ObjectType(instVarl, instVar2, .)(
this.property1 = instVarl;
this.property2 = ins tVar2;
this .methodl = function!. ;
this .methods = function2;
}
function], (paraml, param2, . . .){
Здесь следует реализация
)
function2(paraml, param2, . . .) {
Здесь следует реализация
)
Реализация методов объекта приводится позже в
объявлении функции по всем правилам для обычных
функций JavaScript. Параметрами функции могут быть
строки, числа или целые объекты. Следующий фрагмент
кода демонстрирует пример определения класса,
представляющего комплексные числа:
// определение комплексных чисел
function Complex(real, img) {
this. real = real ;
this. img = img;
this.getReal = getReal;
this. getlmg = get Img ;
this. add = add;
this.subtract = subtract;
this.multiply = multiply;
this.divide = divide;
)
// получить вещественную часть
function getReal () (
return this.real ;
)
// получить мнимую часть
function getlmg () {
return this. img;
]
// сложить x и у и получить rz
function add(z)(
var a ;
var Ь ;
var rz ;
a = this.real + z.getReal (z) ;
b = this.img + z.getlmg (z) ;
rz = new Complex (a,b) ;
return rz ;
)
// методы для вычитания, умножения и деления
// комплексных чисел пока не реализованы
Объектный метод add принимает один параметр типа
Complex. Сложение двух комплексных чисел х и у
выполняется следующим образом:
var х = new Complex (a,b) ;
var у = new Complex(c,d) ;
var z = x.add(y) ;
Внутри объявления функции на свойства текущего
объекта можно ссылаться через специальный объект this:
а = this, real + z.getReal(z);
События
Зачастую операторы JavaScript создают или управляют
элементами графического пользовательского
интерфейса, такими как формы или окна. На рис. 9.10 показан
простой графический пользовательский интерфейс
(GUI).
Листинг 9.4 предназначен для создания формы,
показанной на рис. 9.10. Некоторые части еше не
полностью запрограммированы, поэтому они выдают
сообщение Функция пока не реализована, так что заходите
позже.
Листинг 9.4. Простой GUI.
<html>
<head>
<title>npKMep GOK/title>
<script type="text/javascript">
<! —
// функция поиска пока не реализована;
// выдать соответствующее сообщение
function f search (aForm) (
alert ("Функция пока не реализована,
wTaK что заходите позже") ;
3
// функция отображения опций пока
// не реализована
function f options (aForm) (
alert ("функция пока не реализована,
•-•так что заходите позже") ;
1
II—>
</script>
</head>
<bod->
<h3>
Поисковая форма
</h3>
<hr>
<form>
Найти:
<input type="text" name="tfield" size="40">
<br>
<input type="radio" name="searchH>
Простой С'иск
<br>
<input type="radio" name="search">
Расширенный поиск
<br>
<~nput type="button" name="bsearch"
value="IIOKCK"
ondick="f search (this, form) ">
<.Lnput t,ype=,,but,ton" name="boptions"
value=" Дополнительные опции"
onclick="foptions(this.form)">
</form>
</body>
</html>
чЛ'-i. -. * Jb'miam ДШИ-ЯЯДй!ЫУ^З!Д!.'Ш.Д ~]if-уУош'Рлгама.
Попскопяя формя
Hall' (
*™ Простой >ц«(
I
РИСУНОК 9.10. Графический пользовательский интерфейс.
В контексте GUI событие — это результат
определенных пользовательских действий. Событие генерируется
тогда, когда пользователь совершает действие.
Например, когда пользователь щелкает на кнопке
интерфейса, генерируется событие click. Кдругим событиям GUI
относятся: щелчок на флажке, выбор строки из списка,
двойной щелчок на элементе, открытие или закрытие
окна.
Наилучший способ управления GUI реализуется с
использованиемпрограммирования, управляемо го
событиями События могут перехватываться (captured) и
обрабатываться обработчиками событий JavaScript.
Дополнительная информация может быть найдена в главе 14.
В общем случае, события не рассматриваются как
особенности, относящиеся к ООП, хотя некоторые
объек"но-ориентированные языки программирования
также поддерживают события. Большинство элементов
GUI (экна, кнопки, текстовые поля, флажки)
реагируют на определенные события. Эти элементы
существуют в JavaScript как встроенные объектные типы. Напри-
Объекты со стороны клиента WEV
Глава 9 """ Ц£]
мер, в JavaScript можно создать кнопку, генерирующую
событие onClick в результате щелчка на ней:
<form>
<input type="button" value="Нажми меня"
onClick="my func ( ) " >
</form>
В этом примере функция myfunc() выполняется,
когда пользователь выполняет щелчок на кнопке "Нажми
меня". Некоторые встроенные объекты имеют методы,
эмулирующие события. Например, в объекте Checkbox
определен метод click(), который эмулирует щелчок на
флажке. То же самое можно сказать и об объекте Button.
Метод эмуляции события не генерирует событие,
объявленное в другом месте для объекта. Если с событием
необходимо связать определенное действие,
обрабатывать такое событие придется явно.
Поскольку обработчики событий разрешены только
для НТМ-дескрипторов, все недавно созданные
объектные типы обработчиков событий не имеют. Более
подробную информацию по событиям и обработчикам
событий в JavaScript можно найти в главе 14.
Дополнительная информация
об объектах
При детальном рассмотрении полной иерархии
объектов JavaScript несложно заметить, что большинство
объектов являются либо объектами со стороны клиента,
либо со стороны сервера, либо же базовыми. В этом
разделе книги описаны объекты со стороны клиента и
представлены свойства и методы для каждого из них. Главы
10 и 12 посвящены другим типам объектов JavaScript.
ПРИМЕЧАНИЕ
В дополнение к упомянутым трем типам объектов
Microsoft предлагает и ряд собственных языковых
расширений для Windows Scripting Host. Эти расширения
дают возможность пользователям организовывать
доступ к файлам, перемещать папки и открывать
приложения практически так же, как и пакетные файлы
(но эти средства мощнее). Расширения Microsoft в
книге не рассматриваются.
Встроенные в JavaScrip функциональные
возможности со стороны клиента всецело зависят от действий,
выполнение которых обеспечивают HTML-страницы.
Первый набор объектов вообще зависит от вида
браузера и HTML-дескрипторов в нем. На рис. 9.11 показан
исходный текст HTML для некоторой Web-страницы с
помеченными при помощи стрелок объектами JavaScript.
Как видно из рисунка, большинство объектов
JavaScript — объектные представления дескрипторов
HTML. В табл. 9.1 приводится список объектов со сто-
Базовое подмножество языка JavaScript
Часть II
рОны клиента и соответствующих им дескрипторов
HTMI
:■„■№.(; ></*>
:г1»с1-1*1^Ге.г*-Г|- ■сгЬоК-
I HiXrWl
■e-'EalnroCM" tinSufcalc-
^
РИСУНОК 9.11. Очень многие объекты JavaScript
соответствуют дескрипторам HTML.
Таблица 9.1. Объекты JavaScript со стороны
клиента и соответствующие им дескрипторы
HTML.
JavaScript-объект
Соответствующий
HTML-дескриптор
Button
Checkbox
Hidden
Fileupload
Password
Radio
Reset
Select
< input type="button">
<input type="checkbox">
<input type="hidden">
<input type="file">
<input ype="password">
<input type="radio">
<inputtvpe="reset">
<select>
Листинг 9.5. Доступ к свойствам объекта navigator.
JavaScript-объект
Соответствующий
HTML-дескриптор
Frame
Document
Laver
Link
Image
Area
Anchor
Applet
Plugin
Form
Submit
Tex1
Textarea
Option
<frame>
<body>
<layer> or <ilayer>
<a href="">
<img>
<map>
<a name="">
<applet>
<embed>
<form>
< input type="submit"
<input [ype="text">
<textarea>
<option>
Во время исследований этих объектов обратите
внимание на различные способы, по которым они
представляются пользователям и разработчикам.
Объект navigator
Объект navigator, смело названный так
изобретателями JavaScript (Компания Netscape), представляет
используемый браузер. С помощью этого объекта можно
получить информацию об имени и версии браузера, а
также другую дополнительную информацию (см. рис.
9. 12). Объект navigator поддерживается как в Netscape
Navigator, так и в Microsoft Internet Explorer. Этот объект
имеет еще и два дочерних объекта: Plugin и Mimetype.
Код, который был использован для получения
информации, показанной на рис. 9.12, приведен в
листинге 9.5. Таблица 9.2 содержит список методов и свойств
объекта navigator.
<html>
<head>
<title>JavaScript Unleashed</title>
</head>
<body>
<script language^" JavaScript">
document.write ("navigator.appCodeName: ".bold() + navigator.appCodeName + "<br>") ;
document.write ("navigator .appName: ".bold() + navigator. appName + "<br>");
document. write ("navigator appVersion: " .bold() + navigator appVersion[sr] + "<br>") ,
document.write ("navigator .language: ".bold() + navigator. language [sr] + "<br>") /
document.write ("navigator.mimeTypes: ".bold() + navigator -nimeTypes + "<br>") :
document.write ("navigator.platform: ".bold() + navigator.platform + "<br>");
document.write ("navigator.plugins: ".bold() + navigator. plugins + "<br>") ■
document write ("navigator userAgent: ".bold() + navigator. userAgent + "<br>") ;
document.close() ;
II—>
</script>
</body>
</html>
Объекты со стороны клиента
Глава 9
Таблица 9.2. Методы и свойства объекта navigator.
Тип
Элемент
Описание
Метод
Свойство
javaEnabled() Функция, проверяющая, поддерживается ли данный браузер Java. Метод
появился в JavaScript 1.1.
plugins.refresh() Перестраивает массив установленных подключаемых модулей. Метод появился в
JavaScript 1.2.
preference() Позволяет читать и устанавливать пользовательские предпочтения в браузере.
Метод появился в JavaScript 1.2.
taintEnabled() Проверяет, включено ли искажение нежелательных данных. Метод появился в
JavaScript 1.1.
appCodeName Представляет кодовое имя браузера.
appName Представляет официальное имя браузера.
appversion Выдает информацию о версии браузера.
language Выдает язык браузера. Свойство появилось в JavaScript 1.2.
mimeTypes Ссылается на массив объектов Mimetype, который содержит все поддерживаемые
данным браузером типы MIME. Свойство появилось в JavaScript 1.1.
platform Строка, указывающая на платформу, на которой выполняется браузер. Свойство
появилось в JavaScript 1.2.
plugins Ссылается на массив объектов Plugin, который содержит все подключаемые
модули браузера. Свойство появилось в JavaScript 1.1.
userAgent Строка, содержащая значение заголовка "user-agent".
с • v*w Etc v.v*w цяъ:
j. -з .si
*&. ..sal
*t*m Utitatn.-.
;t£,;
BBS
_E
l-ljj*\toifcrjdjtiu
mvfj!»M-.a]»prBiIpNtnia. M9:£a
mvieator.appNainr: NetEc^e
navijaur^ppVcnlDn: A OS frn] fWuib i I _Mav)
uavlgalorJaiiguage: en
lKnjgBtai.nujueTypM: [abject MimcTv)jeArray]
narigator.plaiftjrm: Win32
lUTipatarjilo *b»: |object 'hipnAn-"'
navigator userAgenl: Morula/*. OS |enj f.Vmh I Hav)
РИСУНОК 9.12. Использование объекта navigator для
получения информации о браузере
Объект Mimetype
Объект MIME (multipurpose Internet mail extensions,
многоцелевые почтовые расширения Internet), который
является подобъектом объекта navigator, появился в
JavaScript 1.1. Объект позволяет обращаться к
информации о MIME-типах. поддерживаемых подключаемыми
модулями. Как и объект Plugin, он не поддерживается
Internet Explorer. Свойства объекта Mimetype
перечислены в табл. 9.3.
Таблица 9.3. Свойства объекта Mimetype.
Свойство Описание
description Содержит описание Mimetype.
enabledPlugin Содержит подключаемый модуль для
определенного Mimetype.
suffixes Содержит расширение файла для Mimetype.
type Содержит строку, представляющую
Mimetype.
Объект Plugin
Объект Plugin, появившийся в JavaScript 1.1 и не
поддерживаемый Internet Explorer, создается при наличии
подключаемых модулей, установленных в браузере. Этот
объект содержит массив элементов и MlME-типов,
обрабатываемых подключаемыми модулями. Как
показано в табл. 9.4, он имеет только свойства, однако в
объекте navigator существует метод p]ugins.refresh(), который
FFH-
Базовое подмножество языка JavaScript
Часть II
дает возможность повторно построить массив
подключаемых модулей. На рис. 9.1 Г показан пример того, как
можно задействовать этот объект и метод document.write()
для отображения информации об установленных
подключаемых модулях.
> я.
tatn
lfc//Al'IEWY|*JOTLhM
-.1,
J irk*-*1 ZJfcrHrtsc-^ieNaii^HIDrwilhJDK/JRE I 22
Java FHlt-A I 1 Nerse ic at tirw , JDK.'JRE 2 (DLL Hel
Java ftie-m 1 Лог Netscape Navigator еЪ JDFJJRE 1Л2 (Ш ' Helper)
RealPlayerum] LiTelJnmcct-taable Pbg In
NPcRoGm phigtn
NPODSplugm
Htucap« Ыаиаагог Plug- for Acrobat
Sh cWewFla-..зогЗ
"ouno Player for Met leapt Mavigatnr, v 1 1 1315
OjudOIme Plug-I tor Win32 vl 1U
NPAVT.32. avi pbigtn DLL
Default Plug-in
Ш
.•mmawar:
РИСУНОК 9.13. Отображение установленных подключаемых
модулей при помощи объекта Plugin.
Таблица 9.4. Свойства объекта Plugin,
Свойство Описание
description Ссылается на описание подключаемых
модулей.
filename Ссылается на имя файла подключаемого
модуля.
length Ссылается на количество MIME-типов,
содержащихся в массиве.
пате Ссылается на имя подключаемого модуля.
Объект Window
Web-браузеры (Netscape Navigator, Microsoft Internet
Explorer или любой другой) представляются
пользователям в окне. Все, что пользователь делает с браузером,
выполняется в пределах этого окна. Кроме того, каждый
экранный элемент также содержится внутри этого окна.
Таблица 9.5. Свойства и методы объекта Window.
Объект Window использует прямое знач ние этой
метафоры (см. рис. 9.14). Он считается самым главным
объектом в иерархии объектов со стороны клиента в
JavaScript и содержит все другие клиентские объекты
(кроме собственно объекта navigator). Точно так же, как
можно открывать множество окон в браузере, в коде
можно работать сразу со многими объектами Window.
Текст Ссылка
■VWrWl
Legend of Ku! Jitrt Hat Order Form
n3J Uo рк>е aJVat>i
. Slfi-" '*.!tf«it !&"■'
Щ2ЕЕ
гИтдИк -wnj.-.1 |-.аУ:>:а.1Дд1еЫ<ай1ЬвГа1оамя11гта
uMakcl&ieCA&Uur ЗриЗяеоЗДигХ^аеМоГКвУанНыЪсГок«4tni£.plEBiECaakeuifdL «йаЪягМе.
('■кишит Infoi-rnaqiuu
пгяе Natae. I
lme na*at 1
Title | |
Ссналус |
Stct.vt L-ldran: [
м*т: I
dtaie. [ .. .
РИСУНОК 9.14. Объект Window содержит все другие
элементы — как визуально, так и в коде.
Объект Window не имеет эквивалентного
дескриптора HTML, тем не менее, он создается при открытии
нового окна браузера. Следующий пример показывает,
как работать с объектом Window в коде JavaScript.
Предположим, что требуется добавить текст в строку
состояния окна:
window.status = 'Добро пожаловать на мою
домашнюю страницу! ' ;
Подобно другим объектам, Window имеет несколько
различных свойств и методов. Поскольку Window — это
объект самого верхнего уровня, некоторые из объектов
могут вызываться или упоминаться без window, перед
ними. Пример — метод alert(). В табл. 9.5 перечислены
все методы и свойства объекта Window.
Тип
Элемент
Описание
Метод
atob()
alertO
back()
blur()
Декодирование строки, закодированной с помощью кода base 64. Метод появился
в JavaScript 1.2.
Выводит диалоговое окно предупреждения отображающее переданную в метод
текстовую строку.
Загружает предыдущую страницу вместо экземпляра window. Метод появился в
JavaScript 1.2.
Убирает фокус из окна.
Объекты со стороны клиента
Глава 9
-ПИ
Тип
Элемент
Описание
btob()
captureEvents()
clearlntervalf)
clearTimeout()
close()
confirm()
crypto, randomf)
crypto.signText()
disableExternalCaptureO
enableExternalCapture()
find()
focus()
forward ()
handleEventf)
home()
moveByO
moveTo()
open()
printf)
prompt))
releaseEventsf)
resizeBy()
resizeTo()
routeEventf)
scroll()
scrollBy()
scrollTo()
setHotKeys()
setlntervalf)
setResizableQ
Кодирует строку с использованием кода base 64. Метод появился в JavaScript 1.2.
Заставляет окно перехватывать все события указанного типа. Метод появился в
JavaScript 1.2.
Обнуляет интервал, установленный методом setlntervalf). Метод появился в
JavaScript 1.2.
Удаляет тайм-аут, установленный методом setTimeout().
Закрывает экземпляр окна. Метод появился в JavaScript 1.1.
Отображает диалоговое окно подтверждения.
Генерирует случайную строку данных заданной длины. Метод появился
в JavaScript 1.2.
Возвращает строку закодированных данных, которая представляет указанный
объект. Метод появился в JavaScript 1.2.
Запрещает внешний перехват событий. Метод появился в JavaScript 1.2.
Разрешает внешний перехват событий для страниц, загруженных с других
серверов. Метод появился в JavaScript 1.2.
Отображает диалоговое окно поиска, в которое можно вводить текст для поиска
на текущей странице. Метод появился в JavaScript 1.2.
Устанавливает фокус на указанное окно. Метод появился в JavaScript 1.1.
Загружает следующую страницу вместо экземпляра window. Метод появился в
JavaScript 1.2.
Вызывает обработчик для передаваемого события. Метод появился в JavaScript
1.2.
Загружает определенную пользователем страницу в экземпляр window. Метод
появился в JavaScript 1.2.
Перемещает окно в соответствие с заданным смещением. Метод появился в
JavaScript 1.2.
Перемещает окно в заданную позицию. Метод появился в JavaScript 1.2.
Открывает новый экземпляр окна.
Вызывает диалоговое окно печати, позволяющее вывести на печать текущее окно.
Метод появился в JavaScript 1.2.
Отображает диалоговое окно приглашения на ввод команды.
Освобождает захваченные события указанного типа. Метод появился
в JavaScript 1.2.
Изменяет размеры окна в соответствие с указанным смещением. Метод появился
в JavaScript 1.2.
Изменяет размеры окна до указанных. Метод появился в JavaScript 1.2.
Передает события указанного типа на обработку собственными средствами.
Метод появился в JavaScript 1.2.
Выполняет прокрутку документа в окне к указанной позиции. Метод появился в
JavaScript 1.1.
Выполняет прокрутку документа в окне в соответствие с заданным смещением.
Метод появился в JavaScript 1.2.
Выполняет прокрутку документа к указанной позиции в окне. Метод появился
в JavaScript 1.2.
Назначает или отменяет назначение комбинаций клавиш окна в случае отсутствия
меню. Метод появился в JavaScript 1.2.
Вызывает функцию или вычисляет выражение каждый раз по прошествии
определенного числа миллисекунд. Метод появился в JavaScript 1.2.
Определять, может ли пользователь изменять размеры окна. Метод появился
в JavaScript 1.2.
■та—,
Пазовое подмножество языка JavaScript
Часть II
Тип
Элемент
Описание
setTimeoutO
setZOptions()
stop()
Свойство closed
crypto
defaultStatus
document
frames
history
innerHeight
innerWidth
length
location
locationbar
locationbar.visible
menubar
menubar.visible
name
offscreenBuffenng
opener
outerHeight
outerWidth
pageXOffset
pageYOffset
parent
personal bar
personalbar visible
scree nX
screeriY
scrollbars
scrollbars visible
Вызывает функцию или выполняет выражение по прошествии определенного числа
миллисекунд.
Позволяет определять z-порядок расположения элементов в окне. Метод появился
в JavaScript 1.2.
Останавливает загрузку элементов в текущем окне. Метод появился в JavaScript 1.2.
Определяет, был ли экземпляр window закрыт.
Обеспечивает доступ к возможностям кодирования Navigator. Свойство появилось
в JavaScript 1.2.
Определяет заданное по умолчанию сообщение в строке состояния окна.
Ссылается на всю информацию относительно документа, находящемся в данном
окне. Обратитесь к описанию объекта Document для получения дополнительной
информации.
Ссылается на всю информацию относительно фреймов данного окна. Обратитесь
к описанию объекта Frame для получения дополнительной информации.
Ссылается на URL-адреса, которые посетил данный пользователь. Свойство
появилось в JavaScript 1.1.
Содержит высоту в точках области отображения, занятой текущим окном.
Свойство появилось в JavaScript 1.2.
Содержит ширину в точках области отображения, занятой текущим окном.
Свойство появилось в JavaScript 1.2.
Определяет количество фреймов в текущем окне.
Содержит текущий URL страницы, загруженной в окно.
Ссылается на окно адреса в браузере. Свойство появилось в JavaScript 1.2
Содержит логическое значение, которое сообщает, видно ли пользователю окно
адреса браузера. Свойство появилось в JavaScript 1.2.
Ссылается на меню браузера. Свойство появилось в JavaScript 1.2.
Содержит логическое значение, которое сообщает, видно ли пользователю меню
браузера. Свойство появилось в JavaScript 1.2.
Содержит имя окна.
Содержит логическое значение, которое позволяет определять, выполнялось ли
обновление окна в экранном буфере. Свойство появилось в JavaScript 1.2.
Содержит имя окна, из которого было открыто вторичное окно.
Содержит высоту в точках внешней области текущего окна. Свойство появилось
в JavaScript 1.2.
Содержит ширину в точках внешней области текущего окна. Свойство появилось
в JavaScript 1.2.
Содержит координату х текущего окна. Свойство появилось в JavaScript 1.2.
Содержит координату у текущего окна. Свойство появилось в JavaScript 1.2.
Ссылается на родительское окно, которое отображает текущий фрейм.
Ссылается на полосу Personal браузера. Свойство появилось в JavaScript 1.2.
Содержит логическое значение, которое сообщает, видна ли пользователю полоса
Personal браузера. Свойство появилось в JavaScript 1.2.
Ссылается на координату х на левого верхнего угла окна браузера. Свойство
появилось в JavaScript 1.2.
Ссылается на координату у на левого верхнего угла окна браузера. Свойство
появилось в JavaScript 1.2.
Ссылается на полосы прокрутки браузера. Свойство появилось в JavaScript 1.2.
Содержит логическое значение, которое сообщает, видна ли пользователю юлосы
прокрутки. Свойство появилось в JavaScript 1.2.
Тип
Элемент
Объекты со стороны клиента
Глава 9
Описание
self
status
statusbar
statusbar.visible
toolbar
toolbar.visible
top
window
Ссылается на текущее окно.
Ссылается на сообщение, отображаемое в строке состояния окна.
Ссылается на строку состояния браузера. Свойство появилось в JavaScript 1.2.
Содержит логическое значение, которое сообщает, видна ли пользователю строка
состояния браузера. Свойство появилось в JavaScript 1.2.
Ссылается на панель инструментов браузера. Свойство появилось в JavaScript 1.2.
Содержит логическое значение, которое сообщает, видна ли пользователю панель
инструментов браузера. Свойство появилось в JavaScript 1.2.
Ссылается на родительское окно, отображающее текущий фрейм.
Ссылается на текущее окно.
Объекты верхнего уровня
Объект верхнего уровня со стороны клиента Window
содержит четыре дочерних объекта. Эти объекты
являются основой для всех других объектов, с которыми
придется сталкиваться при программировании на JavaScript.
Очень важно хорошо знать и сами объекты, и способы
их совместного функционирования. Список объектов
выглядит так:
Document
Frame
History
• Location
Объект Document
Несмотря на то что объект Window является объектом
верхнего уровня в иерархии, Document, возможно, -
один из наиболее важных. Объект Document,
показанный на рис. 9. i 5, ответственен за все фактическое
содержимое, отображаемое наданной странице. При исполь-
Таблица 9.6. Методы и свойства объекта Document.
зовании объекта Document появляется возможность
отображать динамические HTML-страницы. Все, что
содержится в документе — это типовые элементы
пользовательского интерфейса Web-приложения. В табл. 9.6
перечислены методы и свойства объекта Document.
"exl
I Information Survey
TbtHMririntfwbttuItt 1Ъ«,С'.1&11гсЕ1м1.ТЬ±н IbriiJMuriwiRki'Eltag.edftu wtfc&u ТЬм* не 4i
■шгиЛдеч*tja Б^&«ftИмел*-lino.
1 Whtfiiyo«f»Y->nL»TV=hu' "
2 ITwniqbWd TlclctifrMdayuuwiftiLprf J*rrk
——<~ Ымс Г l-5bw*i Г ЮЪс Г 1&-20 jte с Мл ttwi Lvuts
3 V/Ы ■ ]ldU llVGFU
—F=r-3
* £<3Kte*wfci«I*MlT*a«Tnfi:lT#™icde
РИСУНОК 9.15. Объект Document отвечает за содержимое
страницы.
Тип
Методы
Элемент
Описание
captureEventsf) Захватывает события, которые будут обрабатываться документом. Метод появился в
JavaScript 1.2.
close() Закрывает поток вывода документа.
contextual)) Позволяет выборочно применять стиль к HTML-элементу, который появляется в
определенном контексте. Метод появился в JavaScript 1.2.
getSelection() Возвращает выделенный текст. Метод появился в JavaScript 1.2.
handleEvent() Вызывает обработчик для указанного события. Метод появился в JavaScript 1.2.
ореп() Открывает поток вывода документа.
releaseEventsQ Освобождает события, захваченные документом. Метод появился в JavaScript 1.2.
routeEvent() Перенаправляет перехваченные события к другим объектам. Метод появился в
JavaScript 1.2.
writeQ Добавляет текст к документу.
гая-
Базовое подмножеств языка JavaScript
Часть II
Тип
Элемент
Описание
writeln() Добавляет к документу текст и символ новой строки.
Свойства alinkColor Цвет активной ссылки.
all Массив всех HTML-дескрипторов документа. Метод появился в Jscript 3.0.
anchors Массив объектов Anchor. Свойство появилось в JavaScript 1.2.
applets Массив объектов Applet. Свойство появилось в JavaScript 1.1.
bgcolor Цвет фона документа.
classes Массив классов таблиц стилей. Свойство появилось в JavaScript 1.2.
cookie cookie-набор, связанный с документом.
domain Домен документа. Свойство появилось в JavaScript 1.1.
embeds Массив встроенных объектов. Свойство появилось в JavaScript 1.1.
fgcolor Цвет текста в документе.
forms Массив объектов Form.
formName Определяет экземпляр Form, к которому обращаются с использованием атрибута
name в дескрипторе <form>. Свойство появилось в JavaScript 1.1.
height Определяет высоту документа в точках. Свойство появилось в JavaScript 1.2.
ids Массив идентификаторов таблиц стилей. Свойство появилось в JavaScript 1.2.
images Массив объектов Image. Свойство появилось в JavaScript 1.2.
lastModified Дата последней модификации документа.
layers Массив объектов Layer. Свойство появилось в JavaScript 1.2.
linkColor Цвет ссылок.
links Массив объектов Link.
plugins Массив подключаемых модулей. Свойство появилось в JavaScript 1.1.
referrer URL документа, с которым был связан текущий документ.
tags Массив дескрипторов таблиц стилей. Свойство появилось в JavaScript 1.2.
title Заголовок документа.
URL URL текущего документа. Свойство появилось в JavaScript 1.1.
vlinkColor Цвет посещенных ссылок.
width Определяет ширину документа в точках. Свойство появилось в JavaScript 1.2.
ПРИМЕЧАНИЕ
Многие из перечисленных выше свойств обладают под-
свойствами и подметодами. Для получения
дополнительной информации обратитесь в документацию
Netscape (http://developer.netscape.com) или
Microsoft (http://msdn.microsoft.com).
Чаще всего объект Document используется для
генерации HTML-страниц при помощи JavaScript. Для
упомянутых целей можно применять методы document.write()
или document.writeln(). Например, приведенный ниже
код отображает HTML-текст, переданный в качестве
параметра:
<html>
<bodY>
<script type="text/javascript,,>
document write ( "<Ы>Текст, созданный
wJavaScript</hl>") ;
</soript>
</body>
</html>
Объект Frame
Как будет показано далее в книге, фреймы — очень
важные объекты, предназначенные для совершенствования
внешнего вида Web-приложения. Объект Frame
представляет собой рамку в наборе рамок. В
многофреймовом представлении объект Window — это страница,
которая содержит определение <frameset>. В табл. 9.7
перечислены методы и свойства объекта Frame.
Объект History
Еще одна возможность браузера связана с
отслеживанием перечня сайтов, которые посетил пользователь во
время данного сеанса. Эта особенность известна как спи
сок хронологии (history list), или список посещений сайтов;
эквивалентом упомянутого списка в JavaScript является
объект History.
Объекты со стороны клиента
Глава 9
Таблица 9.7. Методы и свойства объекта Frame.
Тип
Элемент
Описание
Метод blur() Убирает фокус из данного фрейма. Метод появился в JavaScript 1.1.
clearlnterval() Отменяет повторное выполнение. Метод появился в JavaScript 1.2.
clearTimeout() Отменяет любое отложенное выполнение.
focus() Устанавливает фокус на фрейм. Метод появился в JavaScript 1.1.
print() Вызывает диалоговое окно Print. Метод появился в JavaScript 1.2.
setlnterval() Планирует функцию для повторного выполнения. Метод появился в JavaScript 1.2.
setTimeoutO Устанавливает список функций для отложенного выполнения.
Свойство document Текущий документ, загруженный в фрейм.
frames Массив, содержащий ссылки на дочерние фреймы.
length Длина массива фреймов.
пате Атрибут пате дескриптора <frame>.
parent Главное окно или фрейм, из которого создаются дочерние фреймы.
self Ссылка на текущий фрейм.
top Окно браузера, которое выполняет сценарий.
window Ссылка на текущее окно или фрейм.
Предположим, необходимо обеспечить, чтобы
после щелчка на кнопке выполнился возврат на две
страницы назад в списке хронологии. Обработчик событий
для этой кнопки должен вызывать функцию, текст
которой приводится ниже. Все методы и свойства этого
объекта сведены в табл. 9.8.
<scrip( type="text/javascript">
function goBackTwoPages () {
window.history.go(-2);
I
//—>
</script>
Объект Location
World Wide Web дает представление обо всем. Каждый
объект Window предназначен для передачи
содержимого пользователю, однако это содержимое должно
откуда-то ИСХОДИТЬ. Местонахождение Web-страницы
содержится в объекте Location. Этот объект используется для
хранения всей информации об URL для данного окна.
Таблица 9.8. Методы и свойства объекта History.
Хотя пользователи видят информацию об D RL на
экране в окне адреса (см. рис. 9.16), с этой же
информацией можно работать и через объект Location.
Если из текущего URL требуется выделить часть,
касающуюся протокола, воспользуйтесь таким кодом:
<soript type="text/javascript">
<! —
function evalProtocol() {
curProtocol = window. location. protocol ;
if (curProtocol = "http:"){
alert ("Документ был загружен из Web. ") ;
)else(
if (curProtocol = "£ile:"){
alert("Документ был загружен из
^♦локального жесткого диска. ") ;
}else{
alert("Документ был загружен
w откуда-то еще.");
i
У
</script>
Методы и свойства этого объекта перечислены в табл. 9.9.
Тип
Элемент
Описание
Метод back() Загружает предыдущий URL в списке хронологии.
forward() Загружает следующий URL в списке хронологии.
до() Загружает URL из списка хронологии, расположенный по указанному смещению.
Свойство current Ссылается на текущий URL в списке хронологии. Свойство появилось в JavaScript 1.1.
length Возвращает количество элементов в списке хронологии.
next Ссылается на следующий URL в списке хронологии. Свойство появилось в JavaScript 1.1.
previous Ссылается на предыдущий URL в списке хронологии. Свойство появилось в JavaScript 1.1.
Базовое подмножество языка JavaScript
Часть if
Таблица 9.9. Методы и свойства объекта Location.
Тип
Элемент
Описание
Метод
Свойство
reload()
replace()
hash
host
hostname
href
pathname
port
protocol
search
Перезагружает текущий URL в окне браузера. Метод появился в JavaScript 1.1.
Загружает новую страницу вместо текущей. Метод появился в JavaScript 1.1
Представляет имя привязки в URL, которое начинается с символа "#".
Представляет имя хоста и номер порта, указанные в URL
Представляет имя хоста, указанное в URL.
Представляет полный URL.
Представляет часть PATHJNFO из URL.
Представляет номер порта, указанный в URL.
Представляет протокол, указанный в URL.
Часть URL, касающаяся поиска, включая символ ?.
Адрес
И Им йв E**m>U ДОт B*whx{ \й*&>* .
BOsE
■ и
Welcome to Acadia Software
Q»
&ф
AiAcadia Seftwmra. we ktww tiut'ttic lofbvaie total» we
cceatetodrir» —lrtwoiit weB bejcoAlbnritjJpoifitfrlEiur
TWtntgr we ubm *uryeBrt*f provrr, appbeariqn
dndofieea сфопсос* weh Intern treaet Icao whow to
^ткпитмлс rf^cr-iJW'el :tbjuora. "We ^oply
сjtibUirJ Defc ra S~* tecDnolasr or'to Jay «9 in as
c4ooloik»Wc1B*a_Ac'ijrX.BoA]av£cnp1 tut
сдкцсдж t4oolon»Wc1B*a_Ac'ijrX.Bod]
I'll VfiiiiiiiiiiBiiiJaJiTiagini
f jnddfij nl n
r, pu JLoli» weft ()i you
j^ . J ^-*НД|Р ^JWffflW^'flgftU^
ЗДД:дМ!&,
РИСУНОК 9.16. Пользоватег {работают
с окном адресе но молено работать и с объектом Location.
Объекты второго уровня
Точно так же как объект Window имеет подобъекты,
объекты второго уровня существуют и в Document. Ниже
эти объекты рассматриваются более подробно.
Объект Anchor
Объект Anchor соответствует тексту или изображению на
HTML-странице, на которые можно ссылаться через
гипертекстовую ссылку. На практике этот объект
используется редко, посему он — наименее важный из всех
объектов со стороны клиента. В табл. 9.10 содержится
список свойств этого объекта.
Объект Area
Объект Area, который стал доступен в JavaScript 1.1,
позволяет определять на изображении область, которая
будет рассматриваться в качестве карты изображения. То,
что задано атрибутом пгегдескриптора <агеа> будет
загружаться в окно после щелчка мышью на определенной
области изображения. Таблица 9.11 содержит свойства и
методы этого объекта.
Таблица 9.10. Свойства объекта Anchor.
Свойство Описание
пате Имя, обеспечивающее доступ к привязке
из ссылки.
text Текст, который появляется между
дескрипторами <а> и </а>.
х Координата х привязки.
у Координата у привязки.
Объект Applet
Объект Applet, впервые введенный в JavaScript l.l,
представляет собой JavaScript-эквивалент
HTML-дескриптора <applet>. В общем смысле подобные
JavaScript-объекты не имеют собственных методов, но это явное
несоответствие, поскольку из JavaScript можно
обращаться к определенным методам конкретного Java-an-
лета. Поэтому свойствами объекта Applet являются все
общедоступные поля Java-аплета, а методами — все
общедоступные методы.
Объект Form
Забудьте ненадолго о таких надстройках, как Java-апле-
ты или элементы управления ActiveX, которые могут
взаимодействовать с пользователем. Если мыслить только
втерминах HTML-мира, единственный способ
взаимодействий с пользователем — через форму и ее элементы
(см. рис. 9.17). Формы оживляют статические страницы,
обеспечивая возможность пользователям
взаимодействовать с интерфейсом через элементы управления. На
форму можно помещать кнопки, текст и другие
интерфейсные элементы. Объект Form представляет собой
средство взаимодействия в сценариях с HTML-элементами. В
табл. 9.12 перечислены методы и свойства объекта Form.
Объекты со стороны клиента
Глава 9
Таблица 9.11. Методы и свойства объекта Area.
Тип
Элемент
Описание
Метод handleEvent() Вызывает соответствующий обработчик данного события. Метод появился в
JavaScript 1.2.
Свойство hash Часть URL, которая является привязкой, включая и символ #.
host Имя хоста (IP-адрес) и порт, указанные в URL.
hostname Имя хоста, указанное в URL.
href Полный URL.
pathname Путь для файла, указанного в URL, начиная с символа /.
port Порт, указанный в URL.
protocol Протокол, указанный в URL, включая завершающее двоеточие (:).
search Часть URL, касающаяся поиска, включая начальный вопросительный знак (?).
target Имя выходного окна, в котором должен отображаться URL.
text Текст, который встречается между дескрипторами <агеа> и </агеа>
х Координата х области.
у Координата у области.
Таблица 9.12. Методы и свойства объекта Form.
Тип
Элемент
Описание
Метод handleEvent() Вызывает соответствующий обработчик событий. Метод появился в JavaScript 1.2.
reset() Устанавливает для элементов формы их значения по умолчанию.
Метод появился в JavaScript 1.1.
submitO Генерирует событие submit, которое приведет к отправке браузером данных в
серверную программу, указанную в атрибуте action дескриптора <form>.
Свойство action Содержит атрибут action экземпляра <form>.
elements Массиз, содержащий все элементы <form>.
encoding Содержит атрибут enctype экземпляра <form>.
length Количество элементов, содержащихся в форме.
method Содержит атрибут method экземпляра <form>.
name Содержит атрибут name экземпляра <form>.
target Содержит атрибут target экземпляра <form>.
Submit — ->■ &л*м<*лL^: cajitftuw^-l
Reset -
V SfkEtnvviuhlitr 1^Г<Дл1.«4*я."*»ЛАртт|.йепж* чкрт
afCfKdvcawprpArlroi
FORM SUBMISSION
РИСУНОК 9.17. Формы помогают создавать интерактивные
HTML страницы.
Объект Image
Объект Image является инкапсуляцией
HTML-изображения. Возможно, наиболее эффективное использование
этого объектного типа заключается в кешировани
изображений, предназначенных для отображения на экране.
Для этого потребуется создать объект Image и загрузить
в него с сервера данные изображения до того, как их
потребуется отобразить в браузере. Как только
возникнет потребность в изображении, то вытолкнуть его из
кеша окажется гораздо быстрее, нежели загрузить из
сервера. В табл. 9.13 приведены методы и свойства
объекта Image.
Базовое подмножество языка JavaScript
Часть II
Таблица 9.13. Методы и свойства объекта Image.
Описание
Тип
Элемент
Метод handleEventQ Вызывает обработчик для указанного события. Метод появился в JavaScript 1.2.
Свойство border Ширина границы изображения.
complete Сообщает, завершена ли загрузка изображения.
height Высота изображения.
hspace Отступ от левого и правого краев изображения.
lowsrc Альтернативное изображение для мониторов с низким разрешением.
name Имя изображения.
src URL изображения.
vspace Отступ от верхнего и нижнего краев изображения.
width Ширина изображения.
Объект Layer
Объект Layer, появившийся в JavaScript 1.2 и
поддерживаемый только браузерами Navigator, позволяет JavaScript
Таблица 9.14. Методы и свойства объекта Layer.
Элемент
работать со слоями (layers) документа. Для получения
исчерпывающей информации о слоях обратитесь в часть
III книги. Таблица 9.14 содержит список методов и
свойств объекта Layer.
Тип
Описание
Метод
Свойство
captureEvents()
handleEventO
load()
moveAbove()
moveBelow()
moveByO
moveTo()
moveToAbsol ute()
releaseEvents()
resizeBy()
resizeTo()
route Event()
above
background
below
bgColor
clip.bottom
clip, height
clip.left
clip.right
clip.top
clip.width
document
left
Определяет типы событий для захвата.
Вызывает обработчик для указанного события.
Загружает новый URL.
Перемещает слой поверх другого слоя.
Перемещает слой под низ другого слоя.
Перемещает слой в указанную позицию.
Перемещает верхний левый угол окна к указанным экранным координатам.
Изменяет позицию слоя в соответствие с указанными в точках координатами в
пределах страницы.
Освобождает захваченные события указанного типа.
Изменяет размеры слоя на заданные значения высоты и ширины.
Приводит размеры слоя к заданным значениям высоты и ширины.
Передает перехваченное событие далее по
нормальной иерархии событий.
Определяет слой выше данного.
Ссылается на фоновое изображение слоя.
Определяет слой ниже данного.
Ссылается на цвет фона слоя.
Ссылается на нижнюю границу области отсечения слоя.
Ссылается на верхнюю границу области отсечения слоя.
Ссылается на левую границу области отсечения слоя.
Ссылается на правую границу области отсечения слоя.
Ссылается на вершину области отсечения слоя.
Ссылается на ширину области отсечения слоя.
Ссылается на объект Document, который содержит данный слой.
Ссылается на координату х слоя.
Ссылается на имя слоя.
Тип
Элемент
Объекты со стороны клиента
Глава У
Описание
радеХ Ссылается на координату х левой границы окна документа.
pageY Ссылается на координату у левой границы окна документа.
parentLayer Ссылается на родительский слой.
siblingAbove Ссылается на слой, находящийся выше zlndex.
siblingBelow Ссылается на слой, находящийся ниже zlndex.
src Ссылается на URL с исходным кодом слоя.
top Ссылается на координату у слоя.
visibility Ссылается на состояние видимости слоя.
window Ссылается на объект Window или Frame, который содержит данный слой.
х Ссылается на координату х слоя.
у Ссылается на координату у слоя.
zlndex Ссылается на расположение этого слоя относительно других слоев в z-порядке.
Объект Link
Вспомните, что World Wide Web ("всемирная паутина")
была разработана в 1989 г. с целы обеспечения простых
гипертекстовых связей HTML-страниц. Возможно, из-
за всеобщего увлечения Web-приложениями ссылка
остается основой Web-технологии. Объект Link позволяет
работать с ссылками в JavaScript-коде. Поскольку
ссылка — это просто путь к другой HTML-странице или
сайту, объект Link очень похож на объект Location
(который содержит ту же самую информацию, но для текущей
Таблица 9.15. Методы и свойства объекта Link.
HTML-страницы). Методы и свойства этого объекта
собраны воедино в табл. 9.15.
Объект Plugin
Подобно объекту Applet, объект Plugin — это способ
получения доступа ко всем подключаемым модулям,
установленным в браузере в текущий момент.
Обратите внимание, что этот объект, впервые введенный в
JavaScript 1.1, в Internet Explorer не поддерживается. В
табл. 9.16 перечислены свойства этого объекта.
Тип
Элемент
Описание
Метод handleEvent() Вызывает обработчик для указанного события. Метод появился в JavaScript 1 .2.
Свойство hash Представляет имя привязки в URL для ссылки, начинающееся с символа #.
host Представляет часть URL ссылки, касающуюся хоста.
hostname Представляет часть URL ссылки, касающуюся имени хоста.
href Представляет полный URL ссылки.
pathname Представляет часть URL ссылки, относящуюся к имени пути.
port Представляет часть URL-ссылки, относящуюся к порту.
protocol Определяет часть URL ссылки, относящуюся к протоколу.
search Представляет часть URL-ссылки, относящуюся к запросу.
target Представляет имя объекта Window, отображающего ссылку.
text Текст ссылки. Свойство появилось в JavaScript 1.2.
> Ссылается на координату х ссылки.
Таблица
Свойство
у ссылается на координату у ссылки.
9.16. Свойства объекта Plugin.
Описание
description Содержит описание подключаемого модуля.
filename Содержит имя файла подключаемого модуля.
length Содержит количество типов MIME, поддерживаемых подключаемым модулем.
пате Содержит имя подключаемого модуля.
Базовое подмножество языка JavaScript
Часть II
Объекты третьего уровня
Следующий уровень JavaScript-объектов со стороны
клиента — объекты третьего уровня. Все эти объекты
являются подобъектами объекта Form. Они вложены в
объект Form по тому же способу, по которому
элементы HTML вкладываются между парой дескрипторов
<form>.
Объект Button
Если только вы не перешли к Web-разработке от
символьно-ориентированных сред, вы несомненно знакомы
с кнопками. JavaScript содержит три "кнопочных"
объекта: Button, Submit и Reset. Каждый из них реально
представляется с помощью HTML-дескрипторов.
Объект Button — универсальная кнопка, к которой
необходимо добавлять используемый код, в то время как
две другие предназначены для строго определенных
целей. Однако, объект Button возможно использовать в той
же роли, что и объекты Submit (вызывая Form.submit())
или Reset (вызывая Form.reset()). Таблица 9.17 содержит
методы и свойства объекта Button.
СОВЕТ
Ширина кнопки определяется длиной текста,
передаваемого через параметр value. Для увеличения ширины
кнопки следует добавить пустое место вокруг текста:
<INPUT type=button value=
onClick="doThis()">
Объект Checkbox
OK
Другой распространенный элемент управления в
стандартном пользовательском интерфейсе — это флажок.
Упомянутый элемент позволяет задавать значения yes/
по или true/false, выполняя щелчок на флажке. В табл.
9.18 перечислены свойства и методы объекта Checkbox.
Объект FileUpload
Объект FileUpload, впервые появившийся в JavaScript
1.1, представляет собой эквивалент HTML-элемента,
реализующего загрузку файла. Очень немногие, действия
можно выполнить с этим объектом в JavaScript —
можно только сослаться на его свойства. Объект FileUpload
не содержит реальных методов. В табл. 9.19
перечислены свойства объекта FileUpload.
Объект Hidden
Еще один объект типа поля — Hidden; он подобен
текстовому объекту с установленным в false свойством
visible. Этот объект используется для сохрани ия
значений с целью передачи их серверному процессу. Объект
Hidden происходит из тех времен, когда HTML
существовал без JavaScript, когда не было таких вещей, как
переменные, массивы и объекты, предназначенных для
хранения значений. Хотя этот объект все еще можно
применять для передачи данных между страницами в
многостраничных приложениях, многие из полей
данных объекта Hidden в JavaScript уже не нужны. В табл.
9.20 сведены свойства объекта Hidden.
Объект Password
Если бы в JavaScript поддерживался механизм
наследования, объект Password был бы подклассом объекта Text.
Единственное различие между этими двумя объектами
— так это то, что любые символы, введенные в объект
Password, отображаются звездочками вместо своих
реальных значений. В табл. 9.21 перечислены методы и
свойства объекта Password.
Объект Radio
Переключатели представляют собой
взаимоисключающие элементы управления, т.е. если один переключатель
выбран, все другие переключатели в том же наборе
становятся невыбранными. Объект Radio обеспечивает
переключатель, используемый в HTML-формах.
Разработчик определяет набор переключателей, устанавливая
одно и то же значение их свойства name. Таблица 9.22
содержит свойства и методы объекта Radio.
Таблица 9.17. Методы и свойства объекта Button.
Тип
Элемент
Описание
Убирает фокус из кнопки. Метод появился в JavaScript I.1.
Вызывает событие click для данной кнопки.
Устанавливает фокус на кнопку. Метод появился в JavaScript 1.1.
Передает событие соответствующему обработчику, связанному с кнопкой.
Метод появился е JavaScript 1.2.
Возвращает объект Form, которому принадлежит данная кнопка.
Возвращает строку, которая определена в атрибуте name HTML-дескриптора <input>.
Возвращает строку, которая определена в атрибуте type HTML-дескриптора <input>.
Для объекта Button эта строка — всегда button. Свойство появилось в JavaScript 1.1.
Возвращает строку, которая выводится в графическом представлении кнопки.
Метод
Свойство
Ыиг()
click()
focus()
handleEvent()
form
name
type
value
Объекты со стороны клиента
Глава 9
Таблица 9.18. Методы и свойства объекта Checkbox.
Описание
Тип
Элемент
Метод blur() Убирает фокус из флажка. Метод появился в JavaScript 1.1.
click() Вызывает обработчик событий onClick. Метод появился в JavaScript 1.1.
focus() Устанавливает фокус в данный флажок.
handleEvent() Передает событие соответствующему обработчику событий, связанному с флажком.
Метод появился в JavaScript 1.2.
Свойство checked Возвращает логическое значение, которое определяет, установлен ли флажок.
defaultChecked Возвращает логическое значение, которое содержит начальное состояние флажка.
Это значение устанавливается через атрибут checked.
form Возвращает объект Form, которому принадлежит флажок.
name Возвращает строку, которая определена в атрибуте пате HTML-дескриптора <input>.
type Возвращает строку, которая определена в атрибуте type HTML-дескриптора <input>.
Для объекта Checkbox эта строка — всегда checkbox. Свойство появилось в
JavaScript 1.1.
value Возвращает значение, переданное при отправке формы.
Таблица 9.19. Методы и свойства объекта FileUpload.,
Тип Элемент Описание
Метод Ыиг() Убирает фокус из окна FileUpload.
focus() Устанавливает фокус на окно FileUpload.
handleEvent() Вызывает заданный по умолчанию обработчик для указанного события.
Метод появился в JavaScript 1.2.
select() Выбирает область ввода в окне FileUpload.
Свойство name Содержит значение атрибута пате для окна FileUpload.
form Ссылается на объект Form, содержащий FileUpload.
type Содержит значение атрибута type для FileUpload.
value Строка, определяющая путь к выбранному файлу.
Таблица 9.20. Свойства объекта Hidden.
Свойство Описание
form Определяет форму, содержащую объект Hidden.
name Содержит имя объекта Hidden.
type Содержит значение атрибута type объекта Hidden. Свойство появилось в JavaScript 1.1.
value Содержит значение атрибута value объекта Hidden.
Таблица 9.21. Методы и свойства объекта Password.
Тип Элемент Описание
Метод blur() Убирает фокус из окна Password.
focus() Устанавливает фокус на окно Password.
handleEvent() Вызывает заданный по умолчанию обработчик для указанного события.
Метод появился в JavaScript 1.2.
select() Выделяет текст, введенный в окно Password.
Свойство defaultValue Ссылается на атрибут value окна Password.
form Ссылается на форму, которая содержит окно Password.
name Ссылается на атрибут пате окна Password.
Тип
Базовое подмножество языка JavaScript
Часть II
Элемент
Описание
type
value
Ссылается на атрибут type окна Password. Свойство появилось в JavaScript 1.1.
Ссылается на текущее содержание окна Password.
Таблица 9.22. Методы и свойства объекта Radio.
Тип
Элемент
Описание
Метод blur() Удаляет фокус из объекта Radio.
click() Моделирует щелчок мыши на переключателе.
focus() Устанавливает фокус на переключатель.
handleEvent() Вызывает заданный по умолчанию обработчик для указанного события.
Метод появился в JavaScript 1.2.
Свойство checked Определяет, выбран ли переключатель.
defaultChecked Ссылается на атрибут checked HTML-дескриптора <input>.
form Ссылается на объект Form, который содержит объект Radio.
name Ссылается на атрибут пате HTML-дескриптора <input>.
type Ссылается на атрибут type HTML-дескриптора <input>.
value Ссылается на атрибут value HTML-дескриптора <input>.
ПРИМЕЧАНИЕ
Переключатели группируются на основе общего
свойства name.
Объект Reset
Второй вид связанного с кнопками объекта — объект
Reset, впервые введенный в JavaScript 1.2. В результате
щелчка объект инициирует событие, которое
обеспечивает установку всех элементов формы в их
первоначальные значения. Таблица 9.23 содержит список методов и
свойств этого объекта.
Объект Submit
Последний связанный с кнопкой объект — это Submit.
В результате щелчка этот объект генерирует событие,
передающее все значения формы в программу, опрсде-
Таблица 9.23. Методы и свойства объекта Reset.
ляемую атрибутом action дескриптора <form>. В табл.
9.24 приведен список методов и свойств этого объекта.
06beKTSelect
Существуют и другие стандартные элементы управления
оконных сред — выпадающий список и список выбора,
которые позволяют пользователю выбирать значения из
заранее определенного списка. Отличие между ними
состоит в том, что в выпадающем списке пользователь
может выбирать только одно значение, в то время как в
списка выбора — сразу несколько значений. Поведение
обоих упомянутых интерфейсных элементов
инкапсулирует объект Select. Другими словами. Select может
выступать как выпадающий список (значение по
умолчанию) или как список выбора (если его свойстве multiple
установлено в true). Таблица 9.25 содержит свойства и
методы объекта Select.
Тип
Элемент
Описание
Метод blur() Удаляет фокус из кнопки.
ciick() Моделирует щелчок мыши на кнопке.
focus() Устанавливает фокус на кнопку.
handleEvent() Передает событие соответствующему обработчику событий, связанному с кнопкой.
Метод появился в JavaScript 1.2.
Свойство form Возвращает объект Form, содержащий данную кнопку.
name Содержит атрибут name кнопки.
type Содержит атрибут type кнопки.
value Содержит атрибут value кнопки.
Объекты со стороны клиента
Глава 9
Таблица 9.24. Методы и свойства объекта Submit.
Тип
Элемент
Описание
Метод
Свойстео
blur()
click()
focus()
handle Eve nt()
form
name
type
value
Удаляет фокус из кнопки Submit. Метод появился в JavaScript 1.1.
Моделирует щелчок мыши на кнопке.
Устанавливает фокус на кнопку Submit. Метод появился в JavaScript 1.1.
Вызывает обработчик для указанного события. Метод появился в JavaScript 1.2.
Возвращает форму, которой принадлежит кнопка Submit.
Возвращает имя кнопки Submit, определенное в атрибуте пате.
Возвращает тип данной кнопки Submit, определенный в атрибуте type.
Возвращает значение данной кнопки Submit, определенное в атрибуте value.
Таблица 9.25. Методы И свойства объекта Select.
Тип
Элемент
Описание
Метод Ыиг() Убирает фокус из списка.
focus() Устанавливает фокус на список.
handleEvent() Вызывает обработчик для указанного события. Метод появился в JavaScript 1.2.
Свойство form Возвращает форму, которой принадлежит список.
length Возвращает количество вариантов в списке.
name Возвращает имя данного списка, указанное в атрибуте пате.
options Возвращает массив, содержащий все элементы списка. Эти элементы создаются при
помощи HTML-дескриптора <option>. Это свойство обладает также и подсвойствами
— length и selectedlndex.
selectedlndex Возвращает целое число, определяющее индекс выбранного в списке варианта.
type Возвращает тип данного списка, заданный в атрибуте type. Для экземпляров
<select>, которые содержат атрибут multiple, это свойство возвращает select-
multiple. Экземпляры без этого атрибута возвращают значение select-one. Свойство
появилось в JavaScript 1.1.
Объект Text
Основным элементом для любого приложения,
предусматривающего ввод данных, по праву считается поле, в
котором пользователь может набирать информацию.
Объект Text служит в качестве своего рода устройства
захвата данных. В табл. 9.26 перечислены свойства и
методы объекта Text.
Объект Textarea
Рассмотрим связанный с объектом Text объект Textarea,
которь и вместо одной позволяет вводить множество
Таблица 9.26. Методы и свойства объекта Text.
строк. Тем, кто имел дело с другими средами
программирования, гораздо проще считать объект Textarea
memo-полем (т.е. полем для заметок). В табл. 9.27
перечислены свойства и методы объекта Textarea.
Объекты четвертого уровня
В JavaScript 1.4 был введен единственный объект
четвертого уровня — подобъект объекта Select. Поскольку
информация о нем пока не устоялась, стоит подождать
завершения разработки ECMAScript и Document Object
Module (DOM).
Тип
Элемент
Описание
Убирает фокус из текстового поля.
Устанавливает фокус на текстовое поле.
Вызывает обработчик для указанного события; метод появился в JavaScript 1.2.
Вьщеляет текст в текстовом поле.
Возвращает значение текстового поля, определенное атрибутом value. Обратите
внимание, что это свойство не поддерживается браузерами Opera.
Метод
Свойство
с I-I5X
Ыиг()
focus()
handleEvent()
select()
defaultValue
Тип
Базовое подмножество языка JavaScript
Часть II
Элемент
Описание
form
name
type
value
Возвращает форму, которой принадлежит текстовое поле.
Возвращает имя текстового поля, определенное атрибутом пате.
Возвращает тип текстового поля, заданный в атрибуте type (всегда text).
Свойство появилось в JavaScript 1.1.
Возвращает значение, которое фактически отображается в текстовом поле.
Таблица 9.27. Методы и свойства объекта Textarea.
Тип
Элемент
Описание
Метод
Свойство
Ыиг()
focus()
handleEvent()
select()
defaultValue
form
name
type
value
Убирает фокус из текстовой области.
Устанавливает фокус на текстовую область.
Вызывает обработчик для указанного события. Метод появился в JavaScript 1.2.
Выделяет текст в текстовой области.
Возвращает для текстовой области значение, находящееся между парой
дескрипторов <textarea>. Это свойство не поддерживается браузерами Opera.
Возвращает форму, которой принадлежит текстовая область.
Возвращает имя данной текстовой области, определенное в атрибуте пате.
Возвращает тип данной текстовой области, указанный в атрибуте type (всегда
textarea). Свойство появилось в JavaScript 1.1.
Возвращает значение, которое фактически отображается в текстовой области.
Объект Option
Объект Option обычно используется для ссылки на
различные элементы <option>, которые находятся между
открывающим и закрывающим дескрипторами <select>.
Таблица 9.28 содержит свойства объекта Option.
Резюме
Объекты языка JavaScript со стороны клиента служат в
качестве фундаментальных инструментальных средств
для создания сценариев. В главе было дано представле-
Таблица 9.28. Свойства объекта Option.
ние об иерархии JavaScript-объектов и о каждом из
принадлежащих ей объектов.
Существенная часть объектной модели — ни что иное
как элементы HTML, которые "превращены" в объекты
для организации работы с HTML-дескрипторами на
объектно-ориентированный манер. Если вы пришли из
мира HTML, начинайте воспринимать эти элементы не
как дескрипторы, но как объекты. В главе 10
рассматриваются базовые языковые объекты, в главе I
обсуждаются проблемы создания собственных объектов и,
наконец, в главе 12 дается представление о серверной
части JavaScript и объектах, присутствующих в этой среде.
Свойство
Описание
defaultSelected Ссылается на опцию, которая выбрана по умолчанию в блоке выбора.
Свойство появилось в JavaScript 1.1.
index Ссылается на отсчитываемый от нуля индекс элемента в массиве Select.optlons.
selected Ссылается на выбранное значение списка выбора. Свойство появилось в JavaScript 1.2.
text Ссылается на текст опции.
value Ссылается на значение, возвращаемое в случае выбора опции.
Основные объекты языка
i
В ЭТОЙ ГЛАВЕ
Объект Global
Объект String
Объект RegExp
Объект Array
Объект Date
Объект Math
Объект Boolean
Объект Number
Объект Function
Любой читатель вправе заявить, что клиентские
объекты • - основа JavaScript. При создании сложных
приложений JavaScript разработчик сталкивается с
основными объектами языка, отличительные
особенности которых — непротиворечивость объектов различных
поставщиков (Microsoft, Netscape, Sun, Be, Opera
Software) и поддержка различных платформ, как
серверных, так и клиентских. Эти объекты подчиняются
стандарту ECMAScript 1.0.
В данной главе рассматриваются объекты String,
RegExp, Array, Date, Math, Boolean, Number, Function,
а также особенности их использования в различных
версиях JavaScript.
ПРИМЕЧАНИЕ
Полный синтаксис каждого объекта в книге не
приводится, поскольку его можно найти на сайтах http://
developer.netscape.com для платформы Netscape и
http://msdn.microsoft.com/scripting для платформы
Microsoft. Кроме того, на сайте http://www.mozilla.org/js
всегда доступна информация по версии Navigator с
открытым кодом (известной также как версия 5.0).
OGbeKrGlobal
Даже программистов, имеющих опыт работы с
JavaScript, должно заинтересовать, что же это за зверь
такой, объект Global. Действительно, не каждый
слышал о нем. Перед тем как приступить к углубленному
изучению свойств и методов объекта, стоит вспомнить
некоторые основные понятия.
Объект Global впервые появился, когда ECMAScript
1.0 стал восприниматься в качестве стандарта. А потом
компания Microsoft достаточно "внезапно" объединила
высокоуровневые свойства и методы в объект Global, да
и Netscape упомянула о нем в нескольких своих доку-
ментациях. Вот так и появился объект Global —
высокоуровневые свойства и методы и при этом отсутствие
родительского объекта.
Объект Global имеет множество свойств и методов,
которые перечислены в табл. 10.1. Несложно убедиться,
что большинство из них используется в сценариях
JavaScript.
Объект String
Строки — это фундаментальное понятие любого языка
программирования. Строка, представляющая собой
набор алфавитно-цифровых символов, может быть либо
текстовой (литеральной) строкой, такой как "Не
морочьте голову", либо строковой переменной, например,
thePhrase. В главе 5 строки рассматривались с точки
зрения типа данных, однако в JavaScript строки могут быть
также и объектами со своим набором методов и свойств.
По мере совершенствования JavaScript, строки
приобретали все большее значение. В начальной версии
JavaScript они не являлись реальными объектами, но
начиная с JavaScript 1.1 ситуация изменилась.
Например, для создании строки и проверки ее длины в JavaScript
1.1 можно воспользоваться следующим кодом:
<script type="text/ javascript">
var str = "Здравствуйте, я — король.";
alert(str.length);
//-->
</script>
Начиная с JavaScript 1.1, для создания экземпляра
объекта String можно пользоваться оператором new.
Применение браузера, не поддерживающего
определение объекта String, приведет к ошибке, гласящей, что
String не определен.
Базовое подмножество языка JavaScript
' Часть~11
Следующий пример показывает, как будет выглядеть
приведенный выше код для браузеров, поддерживающих
JavaScript 1.1:
<script type="text/javascript"
language="JavaScriptl.1">
<• —
var str = "Здравствуйте, я — король." ;
alert (str.length) ;
II—>
</script>
Какова же цель явного объявления объекта String?
Все дело в том, что доступ к объекту String может
производиться из других фреймов, а это более удобно и
эффективно по сравнению с JavaScript 1.0. Например, если
требуется получить доступ к переменной custName из
родительского окна, необходимо записать такой код:
var customer = new String {) ;
customer = parent. custName;
В случае JavaScript 1.0 для успешной работы с
выражением в его конце следует добавить пустую строку:
Таблица 10.1. Методы и свойства объекта Global.
var custc зг = parent. custName + "" ;
Кроме преимущества своей простоты, данный метод
относится к понятию хорошего тона в
программировании. В настоящий момент ECMAScript является
стандартом, a JavaScript и JScript — его воплощениями.
Программист должен иметь уверенность, что в коде
используются корректный синтаксис и семантика, а
работа кода — безукоризненна. JavaScript позволяет
манипулировать строками. Соответствующие свойства и
методы сведены в табл. 10.2. Поскольку строки —
весьма частые гости, с особенностями их использования
стоит познакомиться поподробней.
Строки относятся к одному из важнейших типов
данных, поэтому просто необходимо уметь выделять
данные из строк и получать о них информацию.
Например, для определения размера строки можно
воспользоваться свойством length. В рассмотренном примере
возвращается 13:
var myString = new String {"Это мой день."),
var len = myString. length ;
Tun
Элемент
Описание
Метод
Свойство
escape()
eval()
isFinite()
isNaN()
parseFloat()
parselntQ
unescapeO
Infinity
NaN
Возвращает объект String, в котором все алфавитно-цифровые символы
преобразовываются в их цифровые эквиваленты.
Принимает строку с операторами JavaScript и тестирует ее на предмет корректности
синтаксиса.
Определяет, имеет ли переменная конечные границы. Метод появился в JavaScript 1.3.
Определяет, содержит ли переменная допустимое число. Метод появился в JavaScript 1.1.
Выполняет преобразование строкового аргумента в число с плавающей точкой (float).
Выполняет преобразование строкового аргумента в целое число.
Принимает шестнадцатиричное значение и возвращает ASCII-эквивалент в кодовой таблице
ISO-Latin-1.
Ключевое слово, используемое для представления плюс бесконечности. Свойство
появилось в JavaScript 1.3.
Представляет объект, не имеющий эквивалентов ни с одним из чисел. Свойство
появилось в JavaScript 1.3.
Таблица 10.2. Методы и свойства объекта String.
Тип
Элемент
Описание
Метод anchor() Создает экземпляр дескриптора <а> с атрибутом пате, принимающим значение строки,
передаваемой методу.
big() Преобразует строку в экземпляр дескриптора <big>.
blink() Преобразует строку в экземпляр дескриптора <blink>.
bdd() Преобразует строку в экземпляр дескриптора <bold>.
charAt() Возвращает символ строки, расположенный по заданному индексу.
CharCodeAt() Возвращает код символа ISO-Latin-1, расположенного по индексу, переданному в метод.
concat() Связывает две переданные строки в одну новую. Метод появился в JavaScript 1.2.
fixed() Преобразует строку в экземпляр дескриптора <tt>, определяющего шрифт фиксированной
ширины.
Тип
Элемент
Основные объекты язык а
Описание
Глава 10
fontcolor() Устанавливает атрибут color экземпляра дескриптора <font>.
fontsize() Устанавливает атрибут size экземпляра дескриптора <font>.
fromCharCode() Возвращает строковое значение числа ISO-Latin-1, переданное методу.
indexOf() Возвращает позицию первого вхождения строки, переданной методу, в экземпляре объекта
String.
italics() Преобразует строку в экземпляр дескриптора <i>.
Iastlndex0f() Возвращает позицию последнего вхождения строки, переданной методу, в экземпляре
объекта String.
Iink() Преобразует строку в экземпляр дескриптора <а> и устанавливает атрибут href в значение
URL
match() Возвращает массив, основанный на регулярном выражении, переданном в метод. Метод
появился в JavaScript 1.2.
replace() Выполняет операцию поиска и замены, заданную регулярным выражением, и заменяет на
строку, переданную в метод. Метод появился в JavaScript 1.2.
search() Возвращает позицию совпадения с заданной строкой в экземпляре объекта String. Если
строка не найдена, возвращается значение -1. Метод был добавлен в JavaScript 1.2.
slice() Возвращает часть строки между заданными начальной и конечной позициями. При
передаче отрицательного числа отсчет будет выполняться с конца строки. Метод появился в
JavaScript 1.2.
small() Преобразует строку в экземпляр дескриптора <small>.
split() Выполняет разделение строк на сегменты. Размеры сегментов определяются границами
строки и экземпляров. Метод появился в JavaScript 1.1.
strikeQ Преобразует строку в экземпляр дескриптора <strike>.
sub() Преобразует строку в экземпляр дескриптора <sub>.
substr() Возвращает часть строки, которая начинается с заданной позиции и содержит заданное
количество символов. При передаче отрицательного числа отсчет будет выполняться с
конца строки. Метод появился в JavaScript 1.2.
substring() Возвращает часть строки между начальной и конечной позициями.
sup() Преобразует строку в экземпляр дескриптора <sup>.
toLowerCase() Преобразует символы исходной строки в нижний регистр.
toSourceQ Возвращает строковое представление объекта String. Метод появился в JavaScript 1.3.
toUpperCase() Преобразует все символы строки в верхний регистр.
Свойство length() Возвращает длину строки.
prototype() Позволяет добавлять новые свойства в экземпляры объекта String. Свойство появилось в
JavaScript 1.1.
Кроме того, можно выполнять поиск текста
внутри строки, прибегнув к помощи методов indexOf(),
lastIndexOf(). Вызывайте их, если требуется отыскать
определенные символы или подстроки внутри строки и
возвратить соответствующую позицию (или индекс). В
то время как indexOf() начинает с левой стороны
строки и продвигается вправо, lastIndexOf() выполняет
аналогичные действия, но в обратном направлении. Оба
метода начинают действовать с позиции 0 и
возвращают значение -1, если текст не найден. Код в
приведенном ниже примере устанавливает значение переменной
results равным 8:
var myString = new String ("Кавдый день
^приближает нас к ... светлому будущему,
var results = myString.indexOf("e");
');
А вот следующий код установит значение
переменной results равным 47:
var myString = new String ("Кавдый день
^приближает нас к ... светлому будущему.");
var results = myString. lastlndexOf ("e") ;
Оба метода имеют второй необязательный параметр,
позволяющий определить, с какого места строки
начинать поиск. Например, в сценарии из листинга 10.1
реализован поиск в переменной graf и подсчет количества
вхождений буквы е.
Базовое подмножество языка JavaScript
Часть II
Листинг 10.1. Применение метода indexOf() для
поиска всех букв е, встречаемых в предложении.
<script type=" text/ javascript"
language="JavaScriptl.1">
<!
// Объявление переменных
var pos = 0;
var num = 1;
var i = 1;
var graf = "Деньги не приносят счастья," +
"однако обеспечивают спокойствие и
Суверенность.";
// Поиск в строке с подсчетом количества
// встречаемых "е"
while (pos != -1) {
pos = graf.indexOf("e", i + 1) ;
num += 1 ,-
i = pos;
}
// Поместить ответ на страницу
document.write(graf)
document.write'"<hr size='l'>"1
document .write ("В параграфе найдено " + num +
" букв е.") ;
document. close ()
</script>
На рис. 10.1 показан результат выполнения
сценария.
Подсчет колич - ство Ву*в "в" - Netaceie
:,1
tf
НЕ*
Деньги не приносят " ЮСЛЪЯ.ОДНа • обеспечивают ПОКОИСТВг" и уверенность
В параграфе найдено 7 i^KB б
ЗЙРР^м-я»--* .
РИСУНОК 10.1 Пример использования
метода indexOf().
Если требуется достичь большего, нежели поиск
позиции определенного символа, с помощью метода
substring() можно получить часть строковой переменной
или литерала. substring() принимает два параметра —
начальную и конечную позиции подстроки. Точно так
же как и indexOf() и lastIndexOf(), данный метод
начинает отсчет с нуля, т.е. первая позиция в строке
рассматривается как 0-вая. В следующем коде переменная
results получит значение Новая:
var myString
var results =
= new String ("Новая Англия")
myString.substring(0,3);
Для получения одиночного символа используйте
charAt(). Метод CharAt() возвращает символ по
указанной позиции, переданной в качестве параметра. В
приведенном ниже примере results получит значение и:
var myString = new String("Слоны и бизоны");
var results = myString.charAt(6);
В случае указания позиции, выходящей за пределы
строки, возвращается значение -1:
var myString
var results
= new String ("Агент 007")
myString.charAt(20102);
Сущность программ управления строками
раскрывается при их объединении с целью решения
определенных задач. Давайте рассмотрим обычную программу в
JavaScript, которая обеспечивает замену текста внутри
строки на какой-либо иной текст. Сначала потребуется
создать обобщенную функцию замены строки,
использующую свойство length, а также методы indexOf() и
substring(). При решении данной проблемы будут
продемонстрированы и процедурный, и
объектно-ориентированный подходы.
ПРИМЕЧАНИЕ
Поскольку мы намереваемся создать функцию,
выполняющую поиск и замену в строке, нелишним будет
упомянуть, что JavaScript 1.2 поддерживает новый объект
RegExp, позволяющий выполнять регулярные
выражения над строками. С помощью этого объекта легко
выполнять поиск и замену, поскольку он оперирует
методами именно этого характера. Данный объект еще
будет упоминаться в данной главе, однако подробное его
исследование можно отыскать только в главе 31
Примеры манипуляций со строками
Придерживаясь традиционного подхода, можно
разработать функцию stringReplace, имеющую три параметра:
• originalString — исходная строка, в которой будут
выполняться замены.
• findTexl — строка, которую требуется заменить.
• replaceText — строка, которая будет вставляться в
originalString.
Функция использует эту информация для
выполнения замены. Как показано в листинге 10.2, для поиска
параметра findText используется метод indexOf(), а
метод substring() удаляет строки, стоящие до и после
параметра findText. Функция объединяет preString,
replaceText, postString и присваивает результат
переменной originalString.
Основные объекты языка
Глава 10
Листинг 10.2. Создание функции, выполняющей поиск и замену в строках.
<html>
<head>
<title>JavaScript Unleashed</ title>
<script language="JavaScriptl .1" type="text/javascript">
< ! —
function stringReplace(originalString, findText, replaceText) {
var pos = 0;
var len = findText. length;
pos = originalString. indexOf (findText) ;
while (pos != -1) (
preString = originalString. substring (0, pos);
poststring = originalString. substring (pos + len, originalString. length) ;
originalString = preString + replaceText + poststring;
pos = originalString. indexOf (findText) ;
)
return originalString;
)
//-- >
</script>
</head>
<body>
<script language="JavaScriptl .1" type="text/javascript">
<1 —
/ / Объявление переменных
var origString = new String ( "Allen") ;
var findString = new String ("All") ;
var replaoeString = new String { "Ell" ) ;
var resultstring = stringReplace (origString, findString, replacestring)
// Отображение результатов на странице
document, write ("The original string was: " + origString + "<br>");
document. write ("We searched for: " + findString + "<br>') ;
document. write ("We replaced it with: " + replacestring + "<hr size=' 1 '>")
document. write ("The result was: " + resultstring);
</script>
</body>
</html>
Данная операция продолжается до тех пор, пока
findText встречается в строке. Если findText более не
найдена, пользователю возвращается новое значение
originalString.
При разработке этой же функции можно
воспользоваться возможностями объекта-прототипа JavaScript 1.1
и добанить метод replace() в объектный тип String. Для
работы внутри объектной оболочки потребуется
изменить структуру кода stringReplace(). Результат
описанных действий показан в листинге 10.3.
Вовлечь в действие метод replace() можно за счет
создания объекта String, установки его значения, а
затем вызова созданного метода для замены всех
вхождений определенной строки.
Форматирование строк
В JavaScript существует несколько способов
форматирования строк. Многие из них являются эквивалентами
дескрипторов форматирования HTML. Это не только
гораздо проще постоянного объединения
HTML-дескрипторов в строки, но также и способ применения
объектно-ориентированного подхода к разработке.
Другими словами, если есть строковый литерал "Ну
и денек вьщался сегодня!", который необходимо
отформатировать, можно пойти по одному из путей. Можно
добавить дескрипторы форматирования HTML:
"<Ь>" + "Ну и денек выдался сегодня! " + "</Ь>"
Или воспользоваться методом bold() объекта String:
var myString = new String ("Ну и денек выдался
*• сегодня! " ) ;
var results = my String, bold () ;
В конечном итоге, возвращается следующий HTML-
текст:
<Ь>Ну и денек выдался сегодня! </Ь>
ПРИМЕЧАНИЕ
Учитывайте контекст, в котором используются
методы форматирования. Их нельзя применять за
пределами сценария JavaScript в качестве замены
дескрипторов форматирования HTML.
Базовое подмножество языка JavaScript
Часть II
Листинг 10.3. Добавление метода replace() в объект String.
<html>
<head>
<title> JavaScript Unleashed</title>
<script language="JavaScriptl .1" type="text/javascript">
<i —
// Определение нового метода для объекта String
String, prototype, replace = stringReplace;
function stringReplace (findText, replaceText) {
// Эту переменную необходимо добавить для унаследования выэываеного объекта
var originalstring = new String(this);
var pos = 0;
var len = findText. length;
pos = originalString.indexOf (findText) ;
while (pos != -1) {
preString = originalString. substring (0, pos) ,-
postString = orir-inalStrirg. substring- /—os + len, ori-jinalString. length) ;
originalString = preString + replaceText + postString;
pos = originalString. indexOf (findText) ;
}
return originalString ;
I
type="text/javascript">
II—>
</script>
</head>
<body>
<script language=" JavaScriptl. 1"
<! —
// объявление переменных
var origString = new String{"Allen");
var findString = new String ("All") ;
var replaceString = new String("Ell") ;
// Заметили отличия?
var resultstring = origString.replace (findString, replaceString)
// Отображение результатов на странице
document.write("The original string was: " + origString + "<br>");
document. write ("We searched for: " + findString + "<br>");
document.write("We replaced it with: " + replaceString + "<hr size='l'>")
document, write ("The result was: " + resultstring);
II—>
</script>
</body>
</html>
Для более подробного знакомства с базовыми
методами форматирования JavaScript создадим пример
страницы на JavaScript. Она обеспечит форматирование
определенной пользователем строки в соответствие с
доступными возможностями HTML. Реализация
предусматривает использование HTML-формы.
Код предполагает создание метода showWindow(),
вызываемого в результате щелчка на кнопке Show.
Метод присваивает значение текстового поля формы
строковой переменной txt.
Каждая из опций форматирования, представленная
флажком, принимает значение либо true, либо false.
Кроме того, имеется код, выясняющий, установлен ли
конкретный флажок. В конечном итоге, к переменной
txt применяется соответствующий метод
форматирования.
Опции форматирования не являются
взаимоисключающими, хотя установка некоторых из них может
привести к отмене других. В результате появляется
возможность одновременного использования любого числа
методов. JavaScript остается только обработать каждый
из методов, последовательно добавляя тот или иной
НТ М L-дескриптор.
Определение цвета и размера шрифта не сводится к
простой логической операции. Напротив, выполняется
запрос требуемых параметров. Для упрощения выбора
Основные объекты языка
Глава 10
значений параметров форма содержит элементы
управления типа списков.
В завершение всего, переменная txt при помощи
метода document.write() выводится в новое окно,
которое тут же и создается. Полная строка записывается в
новое окно вместе со всеми дескрипторами
форматирования, окружающими текст.
На рис. 10.2 показано окно со всеми опциями, а на
рис. 10.3 — результирующее окно для выбранных
параметров.
В листинге 10.4 приводится полный исходный код
рассмотренного примера.
ы.'ииьу
пгга
I Hollo world!
SvtngDb - FttaMtwg-HtbuiM
чЕ " '£ *& ■*- ~* :*dt-
.*3f.Jft>i*№** E'A fc0C*Mh| te J/Uli4Vflb-2-Wi_V***iri
-1 я
E2
jrj tf ^ =-Vflirf*Bf*ilBl.^
String Object Formatting
StritifflHello ""til-
i'lyle: P Big П Eliak ГЕ( 1Г FiKrd P Italic. Г Smdl F Stake Г Sub Г Sup
Font: Color' black j^J Sl«" I5 Zl
i^1" ■ ■" ■ ■.': '&—^*rv n :•■ —-'! ' L-v V 'r~-
■■-•-■ *»
РИСУНОК 10.2. Страница выбора опций форматирования.
РИСУНОК 10.3. Результат форматирования строки.
НАПОМИНАНИЕ
Методы toUpperCasel) и toLowerCasel) работают в
соответствие с назначенным планом. Они используются
при сравнении текста без учета регистра. Например,
при сравнении введенного пользователем текста со
строковым литералом лучше перевести обе строки
либо к верхнему, либо к нижнему регистру.
Для создания объектов Link и Anchor можно
воспользоваться методами link() и anchor() объекта String.
Данные методы существенно упрощают работу
сточками привязки и ссылками в коде, минимизируя
длиннющие строки HTML-дескрипторов. Для иллюстрации
сказанного воспользуемся примером, аналогичным
предыдущему примеру форматирования.
Метод, noflo6HHushowWindow()(3anycKaeMHfto6pa-
ботчиком событий onClick кнопки Show),
обрабатывает выбранные пользователем опции, и обращается либо
к методу link(), либо к методу anchor() переменной txt.
Листинг 10.4. Исходный код сценария форматирования строки.
<html>
<head>
<title>String Object Formatting</title>
<script language=" JavaScriptl .1" type="text/javascript">
<! —
function shoWWindow { ) {
// Объявление переменных
var txt = document, f orml. stringField. value;
var clr = "" ;
var sze = "";
ЫХ ОПЦИЙ
. bigBox . checked) txt = txt. big () ;
. blinkBox. checked) txt = txt. blink ();
. boldBox . checked) txt = txt. bold {);
. f ixedBox . checked) txt = txt . fixed () ;
.italicsBox. checked) txt = txt. italics () ;
smaJ "Box. checked) txt = txt. small () ;
. strikeBox. checked) txt = txt. strike () ;
subBox. checked) txt = txt.sub();
. supBox. checked) txt = txt. sup () ;
// Специальная проверка элементов управления типа списков
clr= .ocument. forml. colorList. options [document, forml. colorList. options, selectedlndex] .text;
txt = txt. fontcolor (clr) ;
sze = document, forml. sizeList.options [document, forml. sizeList. options . selectedlndex] .text;
txt = txt.fontsize(sze) ;
//
if
if
if
if
if
if
if
if
if
Проверка
(document
(document
(document
(document.
(document.
(document
(document.
(document
(document.
выбраню
forml
forml
forml
f orml
f orml
Eorml.
f orml
forml.
f orml
ш
Базовс • подмножество языка JavaScript
Часть II
// Открытие нового окна для отображения результатов
obj 'indoir = window.open("" , "" , "width=600,height=300") ;
objWindow.document.write(txt);
objWindow.document, close () ;
1
II—>
</script^»
<. head--
•--body>
<h!L>
String Obj ect Formatting
</hl>
<hr>
<form method="POST" name="forml">
<P>
<strong^»
String:
</strong>
<input type=text size=40 maxlength=256 name="stringField">
</p>
<P>
<strong>
Style:
</strong>
<input type=checkbox name="bigBox" value="ON">
Big
<input type=checkbox name="blinkBox" value="ON">
Blink
<input type=checkbox name="boldBox" value="ON">
- >ld
<input type=checkbox nanie=:"fixedBox" value="ON">
Fixed
<input type=checkbox name="italicsBox" value="ON">
Italics
<input type=checkbox name="smallBox" value="ON">
Small
<input type=checkbox name="strikeBox" value="ON">
Strike
<input type=checkbox name="subBox" value="ON">
Sub
<input type=checkbox name="supBox" value="ON">
Sup
</p>
<P>
<strong>
Font:
</strong>
Color:
<select name="colorList" size=l>
<option selected>black</option>
<option>green</option>
<opt ion>red</option>
</select>
Size:
<select name="sizeList" size=l>
<option selected>K/option>
<option>2 < /option>
<opt ion> 3 < /opt ion>
<opt ion>4 < /opt iorr>
<option>5< /option>
<option>6</option>
<option>7</option>
</select>
</p>
<input type="button" name="Show" value="Show" onClick="showWindow() ">
</form>
--.'body>
</html>
Основные юъекты языки
Глава 10
На рис. 10.4 показана форма HTML, позволяющая
определять элементы гипертекстовой ссылки: текст,
наименованиепривязки/ссылкииишупривязка,
соответствующая подчеркнутому тексту.
.Е*« Е*. ?£+*-.\л« .v.y.hf. t4-
:- ^~^п&г.-'&ш*ы\^ныкнгть1с_№ым
■talEJI
"3
"IC l***1»******:-
String Object Hypertext Formatting
Теяг!^^*"^' I « bnk Г aucW
JumpTo: p / • р-ечш
Sb&j
1^ ='■ = = ^ vV ■ ВД^^Т, ~ H: =.;.. ■ ^''^ '*■.'■
—*. ..,. .,„.,,,,;
РИСУНОК 10.4. Применение гипертекстового форматирования
к объекту String.
На рис. 10." изображено результирующее окно с уже
созданной гипертекстовой ссылкой.
РИСУНОК 10.5. Создание объекта Link с использованием
метода link().
В листинге 10.5 находится полный исходный код
рассмотренного примера.
Работа со специальными символами
В любом языке программирования, рано или поздно,
придется столкнуться с определенными символами,
создающими определенные сложности при
использовании их в строках. Для представления специальных
символов в JavaScript применяется обратная косая черта
(\), за которой следует собственно символ либо его
код. В табл. 10.3 перечислены специальные символы
JavaScript.
Листинг 10.5. Исходный код примера страницы, форматирующей объект String при помощи дескриптора <а>.
<html>
<head>
<title>String Object Hypertext Formatting</title>
<script language="JavaScriptl.l" type="text/javascript">
<!- -
function shoWWindow() (
var txt = document.forml. stringField.value
if {document.forml.hypertext[0] .checked) {
txt = txt. link (document, forml. jumptoField. value) ;
)else(
if (document, f orml .hypertext [1] .checked) {
txt = txt.anchor (document, forml. jumptoField. value) ;
// Создание нового окна дпя помещения в него результатов
objWindow = window.open("" , "","width=600,height=300") ;
objWindow.document.write(txt) ;
objWindow.document, close () ;
]
II—>
</script>
< /head>
<body>
<hl>
String Object Hypertext Formatting
«Vhl>
<hr>
<fcrm method="POST" name="forml ">
<P>
Text:
Базовое подмножество языка JavaScript
Часть II
я—„.—.
<input type=text size=20 maxlength=256 name="stringField">
<input type=radio name="hypertext" value="Link" checked>
Li"Jc:
<input type=radio name="hypertext" value="Anchor">
Anchor:
</p>
<P>
Jump To:
<input type=text size=20 maxlength=256 name="jumptoField">
<input type="button" name="Show" value="Show" onClick="showWindow{)">
</rorm>
</body>
</html>
Таблица 10.3 Специальные символы JavaScript
Символ
\t
\n
V
\f
\\
\b
V
Описание
Табуляция
Новая строка
Возврат каретки
Перевод страницы
Обратная косая черта
Забой
Двойные кавычки
Одинарные кавычки
Например, если в строковом литерале необходимо
использовать обратную косую черту, поступите
следующим образом:
var myString = new String ("Ищите свой файл в
■- каталоге С: \ \WINDOWS \ \ TEMP " ) ;
Подставив строку myString в метод document.write(),
на экране отобразится:
Ищите свой файл в каталоге C:\WIND0WS\TEMP
НАПОМИНАНИЕ
В окне сообщений, отображаемом в результате вызова
alert!), символ \г обеспечивает возврат каретки.
Для исключительного удобства использования
внутренних символов их можно присвоить переменным с
осмысленными именами. Если же частота их
применения очень высока, можно извлечь определенные
"константы" из кодовой библиотеки JavaScript и
использовать их снова и снова. В листинге 10.6 внутренние
символы рассматриваются как константы и
присутствуют в обращениях к методу document.write().
Листинг 10.6. Использование специальных символов.
<script type="text/javascript">
<!-
// Константы для представления внутренних
// символов
var TAB = "\t";
var CR = "\r";
var LF = "\n";
var CRLF = "\r\n" ;
var FF = "\f;
var DQUOTE = V" ,
var SQUOTE = "V ";
var BACKSLASH = "\\";
var BACKSPACE = "\b";
doc t write("Столбец1" + TAB + "Столэец2" +
TAB + "СтолбецЗ")
II—>
</script>
Помимо внутренних символов JavaScript позволяет
работать с другими значениями, которые нельзя
отнести к алфавитно-цифровым. Если требуется
преобразовать подобное значение в ASCII-значение, стоит
прибегнуть к методу escape(), например:
escape("Нельзя не любить столь уважаемый
wсимвол тильды (~)");
Возвращаемое значение выглядит так:
Нельэя%20не%20любить%20столъ%20уважаемый%2 0
'-символ%20тильды%28%7Е%29
Если требуется преобразовать ASCII- строку,
возможно, строку, переданную сервером, воспользуйтесь
методом unescape():
ипегсаре("Пишите%20мне%20по%20адресу%20готеопе
w©anywhere.com%21") ;
Данный код возвращает строковое значение:
Пишите мне по адресу someone@anywhere.comf
Преобразование строк и чисел
JavaScript обеспечивает два встроенных метода для
преобразования строк в числа: parseint( и parseFloatQ Обе
функции в качестве параметров принимают строки и
пытаются преобразовывать строковые данные в
числовые значения. parseint() преобразует строку в
целочисленное значение, a parseFloat() — в значение с плавающей
точкой. Например, приведенный ниже код возвращает
значение 123:
var myString = new String ("123.88888");
document.write (parselnt{myString) ) ;
Следующий код возвращает значение 1234.0012121:
var myString = new String("1234.0012121");
document.write(parseFloat(myString));
Обе программы начинают преобразование с левой
стороны строки и продолжают его до тех пор, пока не
встретится нечто, не являющееся цифрой (0—9),
десятичной точкой (.) либо знаком плюса или минуса (+/-).
После столкновения с нецифровым символом
оставшаяся часть строки игнорируется. Приведенный ниже код
вернет значение 1234.01:
var myString = new String ("1234.01 — это общая
исумма");
document.write(parseFloat(myString));
С другой стороны, следующий код возвращает
значение NaN (Not a Number — не число), поскольку знак
доллара не является цифрой:
var myString = new String ("$1234.01 — это общая
wсумма");
document.write(parseFloat(myString));
При работе с текстовыми объектами без функций
преобразования не обойтись. Поскольку свойство value
объекта Text возвращает строку, эти данные придется
преобразовывать каждый раз, когда дело доходит до
необходимости трактовки текста, вводимого
пользователем, как цифрового значения.
Можно также преобразовывать численные значения
в строки. В версиях, предшествующих JavaScript 1.3,
соответствующие встроенные методы отсутствовали.
Однако упомянутое действие можно было выполнить,
основываясь на том, как JavaScript выполняет операцию
сложения (+). Если во время сложения элементов
выражения JavaScript встречала строку, с этого момента все
выражение расценивалось как строка. Например,
35+100 возвращает цифровое значение 135. С другой
стороны, 35+"100" в результате дает строковое
значение "35100".
ПРИМЕЧАНИЕ
При работе с объектом Number в среде,
поддерживающей JavaScript 1.3+, для преобразования в стро-
ковье значения можно использовать метод toStringl).
Обратите внимание, что JavaScript выполняет
операции сложения слева направо, поэтому перед
преобразованием выражения в строку можно сложить,
скажем, два числа. Например, 10 + 20 + "40" вернет
строковое значение "3040", поскольку пара 10 + 20
вычисляется до прибавления результата к строковому
значению. А вот "40" + 10 + 20 выдает в качестве
результата строковое значение "401020" из-за того, что левее
всех числовых значений находится строковый литерал.
Основные объекты языка ■■■■
Глава 10 Ё£И
Многие языки программирования требуют
обязательного преобразования числовых значений перед их
использованием в качестве строковых. Все что
требуется предпринять — это либо поместить числовое
значение в строковое выражение, либо добавить к нему
пустую строку. Например, выражение 1300+ "" возвращает
строковое значение "1300". Вместо того чтобы каждый
раз для преобразования добавлять пустую строку,
можно записать простую функцию:
function numToString (number) (
number += " " ;
return number;
В листинге 10.7 находится сценарий, в котором
используется приведенная выше функция. Первое окно
предупреждений выведет на экран в качестве типа
Number. После выполнения функции numToString() во
втором окне будет отображаться String.
Листинг 10.7. Преобразование Number в String.
<script type="text/javascripf>
<! —
function numToString (number) {
number += ■■" ■
return number;
)
var number = 100;
alert't—seof number) ;
number = numToString (number) ;
alert(typeof number);
</script>
Объект RegExp
В предыдущем разделе упоминалось о возможности
создания функций, выполняющих вычисления и
поисковые операции. В JavaScript 1.2 появился базовый объект
RegExp, позволяющий выполнять регулярные
выражения над строками.
Поскольку глава 31 обеспечивает достаточно деталь-
нос рассмотрение данной темы, не имеет смысла
углубляться в нее сейчас. В табл. 10.4 сведены свойства и
методы объекта RegExp.
Объект Array
Массивы являются основой практически любого
современного языка программирования, и JavaScript — тому
не исключение. Здесь имеется возможность создавать
массивы и работать с ними. Массив (array) — это
контейнер, содержаший элементы данных. Каждый из
элементов массива — отдельное значение, но все они
существуют как часть массива. Доступ к ним возможен
только через сам массив. В табл. 10.5 сведены все
методы и свойства объекта Array.
Вазовое подмножество языки JavaScript
Часть И
Таблица 10.4. Методы и свойства объекта RegExp.
Тип
Элемент
Описание
Метод compile() Компилирует регулярное выражение для ускорения его выполнения.
ехес() Выполняет поиск совпадений в строковом параметре.
test() Проверяет наличие совпадений в строковом параметре.
Свойство RegExp.$* Представляет multiline.
RegExp.$& Представляет lastmatch.
RegExp.&_ Представляет input.
RegExp.8." Представляет leftContext.
RegExp.$" Представляет rightCorrtext.
RegExp.$+ Представляет lastParen.
RegExp.$1, $2,"$9 Представляет совпавшие подстроки.
global Проверяет, какие возможные совпадения были найдены
ignoreCase Проверяет, игнорировался ли регистр во время поиска.
input Строка, в которой осуществляется поиск с помощью регулярного выражения.
lastlndex Определяет индекс, с которого начинается поиск следующей строки.
lastMatch Последние совпавшие символы.
lastParen Последняя совпавшая подстрока, взятая в круглые скобки.
leftContext Подстрока, предшествующая последнему совпадению.
multiline Проверяет, должен ли выполняться поиск во множестве строк.
rightContext Подстрока, следующая за последним совпадением.
source Шаблон строки.
Таблица 10.5 Методы и свойства объекта Array.
Тип
Элемент
Описание
Метод
Свойство
concat()
join()
Р°Р()
push()
reverse()
shift()
slice()
sort()
splice()
toSource()
toString()
unshift()
valueOf()
index
input
length
prototype
Соединяет элементы существующего массива. Метод появился в JavaScript 1.2.
Соединяет все элементы массива в одну строку.
Удаляет последний элемент массива.
Добавляет элементы в конец массива.
Изменяет порядок следования элементов в массиве. Метод появился в JavaScript 1.2.
Удаляет элементы в начале массива. Метод появился в JavaScript 1.2.
Возвращает часть массива. Метод появился в JavaScript 1.2
Сортирует элементы в массиве.
Вставляет и удаляет элементы из массива. Метод появился в JavaScript 1.2.
Преобразует элементы в строку с квадратными скобками. Метод появился в JavaScript 1.3.
Преобразует элементы массива в строку.
Добавляет элементы в начало массива. Метод появился в JavaScript 1.2.
Возвращает массив элементов, отделенных запятыми.
Возвращает индекс совпадения в строке для массива, созданного в соответствие с
регулярным выражением. Появилось в JavaScript 1.2.
Для массива, созданного в соответствие с регулярным выражением свойство
возвращает исходную строку. Появилось в JavaScript 1.2.
Количество элементов в массиве.
Позволяет добавлять свойства к экземплярам объекта Array. Свойство появилось в
JavaScript 1.1.
ПРИМЕЧАНИЕ
Несмотря на то что в строго типизированных языках
все значения элементов массива должны иметь
одинаковый тип, в JavaScript это необязательно. Массив
может содержать данные различных типов, точно так
же как объект имеет свойства разных видов.
ПРЕДУПРЕЖДЕНИЕ
В JavaScript массив не является родным объектом —
объект Array появился только в JavaScript 1.1. Для
определения массива в JavaScript требовалось создавать
функцию. Заметьте, что он не будет обладать всей
функциональностью родного объекта Array.
function createArray(size) {
this.length = size;
for (var I = 1; I <= size; i-l—1-) {
this[i] = null ;
I
return I his;
I
Для определения или доступа к какому-либо
элементу к переменной массива необходимо приписать
скобки и задать индексное значение. Например, для
определения массива coffee необходимо сделать
следующее:
coffee[0]
coffee[1]
coffee[2]
coffee[3]
coffee [4]
coffee[5]
coffee[6]
"Ethiopian Sidamo"
"Kenyan"
"Cafe Verona"
"Sumatra"
"Costa Rica"
"Columbian"
"Bristan"
Если нужно использовать один из элементов
массива внутри сценария, доступ к ним можно получить с
помошью переменной массива и значения, которое
представляет положение элемента внутри массива.
Отображение на экране строки
Ной любимый сорт кофе — Ethiopian Sidamo
осуществляет такая срока кода:
Document . wri te ("Мой любимый сорт кофе — " +
coffee [0] ) ;
Если читатель незнаком с массивами, то ближайший
эквивалент в JavaScript — это нумерованный список.
Пусть список состоит из 10 пунктов.
1. JavaScript
2. Java
3. Delphi
4. С++
5. Visual Basic
6. Oracle Power Objects
7. SmallTalk
Основные объекты языка
Глава 10
8. PowerBuilder
9. Paradox
10. Access
Компоновка этой группы в массив JavaScript
показана ниже. Особенность заключается в том, что
массивы имеют нулевую базу, т.е. индекс первого элемента
равен 0:
devTools[0]
devTools[l]
devTools[2]
devTools[3]
devTools[4]
devTools[5]
devTools[6]
devTools[7]
devTools[8]
devTools[9]
"JavaScript"
"Java"
"Delphi"
"C++"
"Visual Basic"
"Oracle Power Objects"
"SmallTalk"
"PowerBuilder"
"Paradox"
"Access"
Экземпляр объекта Array создается при помощи
оператора new и операторов, заполняющих массив
элементами данных. Например, для упоминаемого ранее
массива coffee код должен выглядеть следующим образом:
: new Array () ;
"Ethiopian Sidamo"
"Kenyan";
"Cafe Verona" ■
"Sumatra";
"Costa Rica";
"Columbian";
"Bristan";
var coffee -
coffee[0] = =
coffee[1] =
coffee[2] =
coffee[3] = =
coffee[4] =
coffee[5] =
coffee[6] = =
СОВЕТ
Альтернативой определению объекта Array может
быть указание элементов данных как параметров
запроса new. Следующая строка является
функциональным эквивалентом предыдущего примера.
var coffee = new Array("Ethiopian Sidamo",
"Kenyan", "Cafe Verona", "Sumatra",
"Costa Rica", "Columbian", "Bristan");
Обратите внимание, что размер массива явно не
задается; это не характерно для многих языков
программирования. В JavaScript определение размера массива не
обязательно. Именно это свойство позволяет расширить
массив, добавляя новые элементы данных. С другой
стороны, если необходимо, размер массива можно
задать явно в new:
var coffee
new Array (7) ;
Изменение размеров массива также можно
осуществить путем определения элемента данных в позиции
п. Если п превышает существующее количество
элементов в массиве, размер массива увеличивается до П+1.
Посмотрите на следующий пример:
var javaDrinks = new Array () ;
javaDrinks[0] = "Regular coffee";
javaDrinks[1] = "Decaf coffee";
Базовое подмножество языка JavaScript
Часть II
javaDrinks [2] = "Cafe Mocha";
javaDrinks [ 3 ] = "Cafe au Lait";
javaDrinks[199] = "Cafe Latte" ;
Размер массива javaDrinks будет составлять 200,
даже притом, что определено только 5 элементов
данных. При доступе к неопределенным элементам
возвращается значение null.
Выяснить размер массива поможет свойство length
объекта Array. Например, если необходимо пройти по
всем элементам объекта Array, можно воспользоваться
сценарием из листинга 10.8.
Листинг 10.8. Вывод на экран содержимого массива.
<script language="JavaScriptl .1"
type="text/javascript">
<! —
var coffee = new лггау ( ) ;
coffee[0] = "Ethiopian Sidamo";
coffee[1] = "Kenyan";
coffee [2] = "Cafu Verona";
coffee[3] = "Sumatra";
coffee [4] = "Costa Rica";
co"se "1 = "Columbian";
coffee[6] = "Bristan";
coffee[i] +
i*ocument. write ("C ffees of the World:<p>") ;
for (var i = 0; i < cof ее. length; i++) {
document .write (i + 1 + ".
"<br>");
I
document, write (, </p>" ) ;
II —>
</script>
На рис. 10.6 показан результат.
ПРЕДУПРЕЖДЕНИЕ
Свойство length объекта Array предназначено только
для чтения. Отсюда вывод — изменить размеры
массива за счет присваивания нового значения свойству
length нельзя.
Объект Date
С помощью объекта Date в JavaScript можно работать
со значениями даты и времени. Но перед тем как
приступить к работе с этим объектом, необходимо
разобраться в трех важных вещах:
В соответствие с соглашением UNIX, датой
появления JavaScript считается 1 января 1970 i
Соответственно, с датами, предшествующими указанной,
работать нельзя.
При создании объекта Date базой, на которой
основывается отсчет времени внутри объекта, является
клиентская машина. Таким образом, на ней
желательно наличие работоспособных и точных часов.
Учитывайте это при написании JavaScript-сценариев,
чувствительных ко времени.
• JavaScript отслеживает значения даты и времени в
форме миллисекунд с момента даты основания (1/1/
1970).
Важный набор методов, инкапсулированный
внутри объекта Date, принимает и устанавливает значения
даты и преобразует их в различные формы. В табл. 10.6
показаны все методы и свойства объекта Date.
* к\темр\7Бгаодго.М№Г.мш№н,нп1им[Е)ц|1н«1
l*s да v№; ts&x** *™ь Ягъ
\ 1* ^Фчй-лй «tuJ^i L-.У^ .-
_dl№ j jS] C:\TEMP\7BM10_LCeHml
!i -;$.Plov Щ ■ ^frv&brttUrtu . Liw»L
J Coffees ofthe Worid
1 Ethiopian Sidamo
3. Cafe Verona
4. Sumatra
5. Costarica.
6. Columbian
7. Bnstan
Igjffkw--^ >
.*
.. .
>*
НПО
HI
V
d
4
и
«L._S- ")
РИСУНОК 10.6. Использование JavaScript для вывода на экран
списка сортов кофе.
ПРИМЕЧАНИЕ
Как и все остальное в JavaScript, относительные
значения даты также имеют нулевую базу. Наверное, это
может вызвать определенные неудобства, поскольку
отсчет дней недели осуществляется от 0 до 6, а не
от 1 до 7, и месяцев от 0 до 11, а не от 1 до 12.
Используя в коде значения подобного рода, следует
принимать во внимание нулевую базу.
Однако, исключением из правил являются дни
месяца, отсчитываемые от 1 до 31 и представляющие
собой абсолютные значения.
Создание объекта Date подобно созданию объектов
String или Array. В сценарии эти объекты можно
создавать в любых количествах. Используя оператор new,
определить объект Date можно так:
var dateVarlable = new Date [parameters])
Различные группы параметров, необходимые для
создания этих объектных экземпляров, перечислены в
табл. 10.7.
Основные объекты языка
Глава 10
Таблица 10.6. Методы и свойства объекта Date.
Тип
Элемент
Описание
Метод getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTimeO
getTimeZoneOftset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMillisecondsO
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
getYear()
parse()
setDate()
setFullYear()
setHours()
setMillisecondsO
setMinutesQ
setMonth()
setSeconds()
setTime()
setUTCdatef)
setUTCFullYear()
setUTCHours()
setUTMillisecondsO
setUTCMinutes()
setUTCMonth()
Возвращает день месяца (от 1 до 31).
Возвращает день недели (от 0 до 6).
Возвращает год в четырех символах по местному времени.
Метод появился в JavaScript 1.2.
Возвращает час суток (от 0 до 23).
Возвращает миллисекунды. Метод появился в JavaScript 1.2.
Возвращает минуты в пределах часа (от 0 до 59).
Возвращает месяцы года (от 0 до 11).
Возвращает секунды (от 0 до 59).
Возвращает количество миллисекунд, начиная с 1/1/197 00:00:00.
Возвращает смещение часового пояса в минутах по отношению к GMT/UTC.
Возвращает день месяца. Метод появился в JavaScript 1.2.
Возвращает день недели, преобразованный к универсальному времени.
Метод появился в JavaScript 1.2.
Возвращает четырехзначное представление года, преобразованное к универсальному
времени. Метод появился в JavaScript 1.2.
Возвращает часы, преобразованные к универсальному времени.
Метод появился в JavaScript 1.2.
Возвращает миллисекунды, преобразованные к универсальному времени.
Метод появился в JavaScript 1.2.
Возвращает минуты, преобразованные к универсальному времени.
Метод появился в JavaScript 1.2.
Возвращает месяц, преобразованный к универсальному времени.
Метод появился в JavaScript 1.2.
Возвращает секунды, преобразованные к универсальному времени.
Метод появился в JavaScript 1.2.
Возвращает номер года, начиная с 190ьг.
Преобразует строковые данные в миллисекунды.
Устанавливает день месяца (от 1 до 31).
Устанавливает год как четырехзначное число. Метод появился в JavaScript 1.2.
Устанавливает часы дня (от 0 до 23).
Устанавливает миллисекунды. Метод появился в JavaScript 1.2.
Устанавливает минуты в часе (от 0 до 59).
Устанавливает месяц в году (от 0 до 11).
Устанавливает секунды в минуте (от 0 до 59).
Устанавливает количество миллисекунд, начиная с 1/1/1970 00:00:00.
Устанавливает день месяца в соответствии с универсальным временем.
Метод появился в JavaScript 1.2.
Устанавливает год как четырехзначное число в соответствии с универсальным
временем. Метод появился в JavaScript 1.2.
Устанавливает час в соответствии с универсальным временем.
Метод появился в JavaScript 1.2.
Устанавливает миллисекунды в соответствии с универсальным временем.
Метод появился в JavaScript 1.2.
Устанавливает минуты в соответствии с универсальным временем.
Метод появился в JavaScript 1.2.
Устанавливает месяц в соответствии с универсальным временем.
Метод появился в JavaScript 1.2.
Тип
Базовое подмножество языка JavaScript
Часть II
Элемент
Описание
setUTCSeconds() Устанавливает секунды в соответствии с универсальным временем.
Метод появился в JavaScript 1.2.
setYear() Устанавливает количество лет, начиная с 1900 г.
toGMTStringO Преобразует дату в строку в соответствии с мировым форматом.
toLocalStringO Возвращает строку даты в формате локальной системы.
toSource() Возвращает источник-объект Date. Метод появился в JavaScript 1.3.
toString() Возвращает дату и время как строку в соответствии с местным временем.
ToUTCString() Возвращает данные и время как строку в соответствии с мировым временем , UTC).
Метод появился в JavaScript 1.2.
UTC() Преобразует значения с разделителями-запятыми в миллисекунды даты по UTC
valueOf() Возвращает эквивалент объекта Date в миллисекундах. Метод появился в JavaScript 1.1.
Свойство prototype Свойство, позволяющее добавлять методы и свойства к объекту Date.
Свойство появилось в JavaScript 1.1.
Таблица 10.7. Параметры, необходимые для создания экземпляра объекта Date.
Параметр
Отсутствие параметров
"месяцдд, гггг чч:мм:сс"
гг, мм.дд
гг, мм, дд, чч, мм, ее
Описание
Создает объект с текущими датой и временем.
Создает объект с указанными датой (дд — день, гггг — год)
и временем (чч — часы, мм — минуты, ^с — секунды).
При этом все пропущенные значения считаются нулевыми.
Создает объект с указанными датой из набора
целочисленных значений (гг — год, мм — месяц, дд — день)
Создает объект с указанными датой и временем из набора
целочисленныхзначений(гг— год, мм — месяц, дд— день,
чч — часы, мм — минуты, се— секунды). При этом все
пропущенные значения считаются нулевыми.
Пример
var today = new Date(
var someDate = new Date
("September 27, 2000";
var someDate =
new Date(00. 1, 0)
var someDate =
new Date(00, 7, 24, 6, 29, 50)
После создания объекта можно использовать все его
методы для получения или установки значения даты.
Например, для возврата текущей даты следует записать:
var today new Date {) ;
result = today.getDate();
Для изменения месяца, определенного в объекте appt
типа Date потребуется записать:
var appt = new Date (2000,10,20) :
result = appt.setMonth (7) ,
Раньше упоминалось, что значения даты с нулевой
базой осложняют процесс получения даты. Эту
трудность несложно обойти, расширив методы объекта Date,
создав прототипы более приемлемых методов get.
Как известно, JavaScript позволяет расширять
возможности встроенных объектов, тем самым позволяя
создавать прототипы новых методов или свойств. Все
объекты должны быть унаследованы от этого нового
прототипа. Добавьте в объект Date следующие новые
методы:
• getActualMonth() будет возвращать действительное
значение для месяца.
• getCaIendarMonth() будет возвращать название
месяца.
• getActualDay() будет возвращать текущее численное
значение дня недели.
• getCalendarDay() будет возвращать название дня
недели.
В листинге 10.9 приводятся определения для
каждого из прототипов перечисленных методов. Данный
листинг послужит наглядным примером сохранения
общеупотребительных функций во внешней библиотеке
JavaScript или в исходном файле, который можно
загрузить при помощи атрибута sre дескриптора <script>.
Листинг 10.9. Расширение объекта Date за счет
добавления в него новых методов.
<script type="text/ javascript"
language="JavaScriptl.1">
<!--
Date .prototype. getActualMonth = getActualMonth;
Date.prototype.getActualDay = getActualDay;
Date.prototype.getCalendarDay = getCalendarDay;
Date.prototype.getCalendarMonth =
getCalendarMonth;
Основные объекты языка
function getActualMonth{) {
var n = this. getMonth () ;
n += 1 ;
return n ;
function getActualDay() {
var n = this. getDay () ;
n += 1;
return n ;
i
function getCalendarDay ()
var n = this. getDay () ;
var dow = new Array (7)
dow[0]
dow[l]
dow[2]
dow[3]
dow[4]
dow [5]
dow[6]
= "Sunday";
= "Monday";
= "Tuesday";
= "Wednesday" ;
= "Thursday";
= "Friday";
= "Saturday";
return dow[n]:
.1
function getCa ".endarMonth () {
var n = this . getMonth () ;
var moy = new Array (12) ;
moy[0]
raoy[l]
raoy[2]
moy[3]
moy[4]
moy[5]
moy [6]
moy[7]
inoy[8]
moy [9]
шоу [10]
moy[11]
return
=
=
=
=
=
=
=
=
=
=
=
=
"January";
"February";
"March" ;
"April";
"May" ;
"June";
■July";
"August";
"September"
"October" ;
"November"
"December"
moy[n];
I
// Тестирование вновь созданных методов
var today = new Date () ;
document, write ("<b>I hereby declare that on "
+ today. getCalendarDay () + " , the "
+ today. getDate () + "th day of "
+ today . getCalendarMonth ()
+ " in the year "
+ today.getFullYear () + " A.D. at the "
+ today.getHours()
+ "th hour of the day, absolutely nothing
wis happening.</b>") ;
II—>
</script>
Псслс объявления методов сценарий создает объект
Date и генерирует HTML-документ, используя
комбинацию прототипных методов (см. рис. 10.7).
Поскольку JavaScript является приложением,
работающим в среде World Wide Web, в нем определены
методы, работающие с часовыми зонами. getTimezoneOffsetQ
возвращает размер различия в минутах между
клиентским компьютером и GMT (Greenwich Mean Time -
время по Гринвичу). Например, я сейчас нахожусь в во-
Глава 10
сточной часовой зоне США. Если мне нужно вернуть
часовое смешение временной зоны, я запишу такой код:
var today = new Date () ;
offset = today. getTimezoneOf f set {) / 60;
if (offset = 5) (
alert("Вы находитесь в восточной временной
зоне");
I
1* Е № bt V**h и*
Г J л
f*rv Rt*MJ
Jt BcnMv#>i 4" Lsc3hn|ifc- '
\
1 Mf /ЪчК1[|_1ЛН>*-
1
л
ib
■а-\
31
JS*-iR*tfrt**' ■'
г. ■..._. ..
hereby Jerl ■ that on Saturii the 5th day ofFebruary in die year 2000 VD at the Wlbbeiu. I the
day, absolute nothing i "lappenbig-
РИСУНОК 10.7. Пспользоват усовершенствованных
методов get.
Рисунок 10.8 показывает результат запуска сценария.
Можно выполнять вычисления со значениями дат,
определив таким образом количество дней до конца
следующего столетия. Даты, используемые в
вычислениях, необходимо хранить в их собственном миллисе-
кундном формате, а затем выделять соответствующие
данные.
JnvnS" ' I - - н11
ь
,
J±}
ijrf"-!
■х
асн*'
РИСУНОК 10.8. tfcnoiMoeoHMegetTimezoneOffsetO dm
определения временной зоны.
Объект Math
С целью эффективной организации математических
вычислений JavaScript инкапсулирует большое число
математических констант и процедур в единый объект
Math. Он в некоторой степени отличается от других
базовых объектов. Во-первых, можно выполнять
базовые арифметические вычисления (сложение, вычитание,
умножение, деление) за пределами объекта Math. До
тех пор пока не потребуются сложные математические
Базовое подмножество языка JavaScript
Часть II
функции, использование данного объекта будет
чрезвычайно редким.
Во-вторых, хотя и можно создавать экземпляры
объектов String, Array, Date при помощи new, все
равно работа продолжается с базовым экземпляром Math.
Подобное качество позволяет расценивать этот объект
как созвучный navigator, который никогда не создается
"на лету". Именно поэтому на объект Math ссылаются
как на статический (static) объект.
Свойства объекта Math — ни что иное как
последовательность общих математических констант. Свойства
и методы этого объекта сведены в табл. 10.8. Обратите
внимание на регистр в именах констант. Несмотря на
то что практически все имена свойств JavaScript
записываются в нижнем или же в смешанных регистрах.
Таблица 10.8. Методы и свойства объекта Math.
имена рассматриваемых свойств записаны символами
верхнего регистра.
Объект Boolean
Значения логического типа являются неотъемлемой
частью любого языка программирования. Объею Boolean,
впервые появившийся в JavaScript 1.1, применяется для
преобразования значений, не относящихся к
логическому типу, в значения логического типа. В конечном итоге
с этим объектом можно работать как с обычным
значением логического типа (true или false). Объект Boolean
можно создать, прибегнув к уже знакомому оператору
new:
var booleanObjectName = new
Boolean(initialValue);
Tun
Элемент
Описание
Метод abs() Возвращает абсолютное значение.
acos() Возвращает значение арккосинуса для аргумента, выраженное в радианах.
asin() Возвращает значение арксинуса для аргумента, выраженное в радианах.
atan() Возвращает значение арктангенса для аргумента, выраженное в радианах.
atan2() Возвращает значение арктангенса для частного от деления аргументов, выраженное в
радианах
ceil() Возвращает целое число, большее или равное переданному значению.
cos() Косинус для переданного значения.
ехр() Возвращает константу Эйлера для степени, переданной в качестве значения.
floor() Целое число, меньшее или равное переданному значению.
1од() Натуральный логарифм по основанию е.
тах() Максимальное число из двух переданных значений.
min() Минимальное число из двух переданных значений.
pow() Результат возведения первого переданного в качестве аргумента числа в степень второго.
Random() Возвращает случайное число между 0 и 1. Метод появился в JavaScript 1.1.
round() Возвращает значение, округленное до ближайшего целого.
sin() Возвращает синус переданного числа, выраженный в радианах.
sqrt() Квадратный корень переданного числа.
tan() Возвращает тангенс переданного числа, выраженный в радианах.
toSource() Копия объекта. Метод был добавлен в JavaScript 1.3.
toStringO Строковое представление объекта.
Свойство Е Константа Эйлера (2.718281828459045).
LN2 Натуральный логарифм 2 (0.6931471805599453).
LN10 Натуральный логарифм 1С (2.302585092994046).
LOG2E Логарифма Е по-снованию-2 (1.4426950408889633).
LOG10E Логарифм Е по основанию -10 (0.4342944819032518).
PI Число Пи (3.141592653589793)
SQRT1_2 Квадратный корень 0.5 (0.7071067811865476)
SQRT2 Квадратный корень 2(1.4142135623730951).
Основные объекты языка
Глава 10
-ira
Параметр initialValue определяет начальные
установки объекта. Есл параметр принимает значение false, О,
null или пустую строку (""), или вообще пропущен,
принимается значение по умолчанию, равное false. В
противном случае — true.
В табл. 10.9 приведены методы и свойства объекта
Boolean.
Объект Number
О&ьект Number, поддерживаемый в JavaScript 1.1 и
следующих версиях, служит для хранения числовых
значений наподобие того, как объект String предназначен
для хранения строковых значений. Однако в
действительности он используется гораздо реже. Этот объект
применяется, если необходимо получить доступ к
определенным значениям констант, таким как
максимально или минимально представимые числа, плюс или
минус бесконечность или нечисловые значения (NaN).
Упомянутые значения реализованы в виде свойств
объекта Number. В табл. 10.1 приведены методы и
свойства объекта Number.
Как и другие базовые объекты, экземпляры объекта
Number в сценарии создаются при помощи оператора
new со следующим синтаксисом:
var number Ob j ее tName = new Number (initialValue) ;
Зачастую объекты Number создаются, когда к ним
требуется добавить новые свойства. Например, листинге
10.10 содержит сценарий, демонстрирующий особую
полезность объектов Number. Здесь уменьшается необ-
Таблица 10.9. Методы и свойства объекта Boolean.
ходимость выполнения множества преобразований
строк в числа.
Результат выполнения сценария показан на рис.
I0.9.
РИСУНОК 10.9. Использование объекта Number.
Объект Function
Последний базовый объект, появившийся в JavaScript
1.1, — это Function. Он позволяет определить строку во
время выполнения и компилировать ее как функцию.
Рассмотрим синтаксис объявления объекта Function.
имяОбгектаРилс£.1ол = new Function {[аргумент1,
аргумент2. аргумента], -гелоФункции) ;
Тип
Элемент
Описание
Метод toStringO Возвращает строковое представление простейшего значения Boolean, хранящегося в объекте.
Если в объекте содержится true, возвращается строка "true", а если false —то "false".
Свойство prototype Это свойство позволяет добавлять методы и свойства в объект Boolean.
Таблица 10.10. Методы и свойства объекта Number.
Тип
Элемент
Описание
Метод toSource()
toStringO
valueOff)
Свойство MAX_VALUE
MINJ/ALUE
NaN
POSITIVEJNFINITY
NEGATIVEJNFINITY
prototype
Возвращает строковое представление объекта Number. Метод появился в JavaScript 1.3.
Возвращает строковое представление заданного объекта Number.
Возвращает значение объекта Number как числовой тип данных.
Максимальное число (1.797693148623157е+308).
Минимальное число (5е-324).
Специальное нечисловое значение (NaN).
Специальное значение бесконечности, возвращаемое в случае переполнения.
Специальное значение, представляющее отрицательную бесконечность; возвращается в
случае переполнения.
Позволяет добавлять новые свойства и методы к объекту Number.
Базовое подмножество языка JavaScript
Часть II
Листинг 10.10. Создание объекта Number вместо выполнения преобразования строк в числа.
<html>
<head>
<Script language="JavaScriptl.1" type="text/javascript">
<! —
// Добавление свойства description в объект Number
Number.prototype-description = null;
// Значения ограничений скорости
slHighway = new Number (65) ;
slCity = new Number (351 ;
SlSchoolZone = new Number (25) ;
// Добавление описаний в свойствах description
slHighway.description = "Interstate Highway Speed Limit";
slCity.description = "City Speed Limit";
slSchoolZone.description = "School Zone Speed Limit" ;
// Вычитание num2 из numl и отображение результата вместе с
// описание» исходных значений.
function tellDifference(numl, num2) {
diff = numl - num2;
document.write("The speed difference between " + numl.description + " and " +
num2 .description + " is " + diff) ;
II—>
</script>
</head>
<body>
<Script language="JavaScriptl.1" type="text/javascript">
// Вызов функции
tellDifference(slHighway, slCity);
II—>
</script>
</body>
</html>
Следует учесть, что несмотря на внешнее подобие
объекта Function и стандартной функции JavaScript (т.е.
function), все же они существенно отличаются друг от
друга. Имя объекта Function рассматривается как
переменная, представляющая текущее значение функции,
определенной в строке new Function, в то время как имя
стандартной функции JavaScript переменной не
является — это именно имя функции.
ПРИМЕЧАНИЕ
Трансляция объекта Function выполняется при каждом
его использовании. Неудивительно, что их выполнение
происходит гораздо медленнее по сравнению с
нормальными функциями JavaScript.
Объект Function можно использовать как обработчик
событий. Рассмотрим пример:
Резюме
К базовым объектам языка следует относиться как к
важнейшим винтикам рабочего механизма JavaScript,
поскольку большая часть работы выполняется как раз
внутри их конструкций. Кроме того, не забывайте, что
именно базовые объекты стандартизируются в
соответствие со спецификацией ECMAScript.
Глава была посвящена методике использования
базовых объектов языка и описанию особенностей из
функционирования в различных версиях браузеров. В
следующей главе будут рассматриваться примеры
применения массивов и способы создания пользовательских
объектов.
window.onload
'aqua* ");
new Function("document.bgColor =
Создание пользовательских
объектов JavaScript
В ЭТОЙ ГЛАВЕ
Создание объектов
Создание экземпляров объектов
Работа с экземплярами объектов
Создание составных объектов
Динамическое создание объектов
Расширение экземпляров объектов
Данная глава является логичным продолжением
предыдущей. В главе 9 мы много говорили об основах
объектно-ориентированного программирования, а в
главе 10 — о встроенных объектах языка JavaScript. Но
если на этом Остановиться, возможности JavaScript
могут показаться весьма скудными. Не следует упускать из
виду создание собственных пользовательских объектов.
Именно этой теме и посвящается данная глава.
Создание объектов
Пользовательские объекты JavaScript тесно связаны с
массивами. Массивы — средство структурирования
данных в контейнере. Какими бы мощными не были бы
массивы, они не в состоянии удовлетворить все
запросы разработчиков. Несмотря на то Что массивы хранят
данные, они не могут хранить поведение.
Как обсуждалось в главе 9, объект содержит и
данные, известные как свойства (properties), и поведение,
известное как методы (methods). На первый взгляд
может показаться, Что массив — почти то Же самое, Что и
объект со свойствами, Однако есть Один нюанс: массив
не хранит информацию о способе своей реакции на
методы. Наша задача — создать объект, инкапсулирующий
элементы данных и обеспечивающий реакцию на вызов
методов.
Для создания объекта JavaScript необходим конст
руктор (constructor). Конструктор — это специальная
функция JavaScript, которая определяет вид объекта и
его поведение. Сам по себе конструктор не создает
объекты. Вместо этого он обеспечивает шаблон вида
реализованного объекта. (Создание экземпляра объекта
называется реализацией (instantiating) объекта.) Базовая
структура реализованного объекта выглядит так:
function obj ect {parameter! , parameter,...) (
this . proper \ /1 = parameter 1
this.property2 = parameter.?
this, property 3 = parameter^
this . proper ty 4 = parameter^
this.methodl = functionl
this.method2 = function2
)
Простота нестоящей структуры Конструктора
достаточно очевидна. Сначала потребуется присвоить имя
самому методу. Имя функции послужит именем
объектного типа. Если объект создается с целью
представления, скажем, счета-фактуры, назовите его invoice.
Иногда мне встречались программисты, которые в названиях
конструкторов использовали глагол; получалось что-то
наподобие createlnvoiee. Подобная практика может
привести к снижению удобочитабельности кода, т.к.
свойство объекта будет выглядеть как-то так:
myDate — createlnvoiee.date;
Даже еще хуже, если среди методов объекта
присутствует create(), код приобретет просто "шикарный" вид:
createlnvoiee.create();
А вот в случае применения существительных для
именования можно надеяться на гораздо более изящный
вид:
m^Date = invoice. date;
И
invoice, create() ,
Следующий шаг заключается в добавлении
параметров в функцию для всех свойств объекта. Следуя
такому подходу, при реализации объекта значения свойств
передаются в функцию в форме параметров.
Третьим шагом будет присвоение свойствам
объектам значений входных параметров. Ключевое слово this
Базовое подлшожество языка JavaScript
Часть II
очень удобно; оно используется для представления
объекта в момент определения свойств.
Четвертый шаг связан с определением методов,
которыми будет обладать объектный тип. В то время как
свойствам присваиваются значения параметров
конструктора, методы создаются в виде функций за
пределами конструктора и присваиваются определениям
метода объекта.
Предположим, что необходимо создать
пользовательский объект, применяемыйдляхранения
информации о любимых книгах. В частности, хотелось, чтобы в
нем присутствовало название книги, имя автора (или
авторов), ISBN, предмет, которому посвящена книга, и
присвоенный ей внутренний рейтинг. Конструктор
можно определить следующим образом:
function book(title, author, ISBN, subject,
rating) (
this. title = title;
this, author = author;
this. ISBN = ISBN;
this.subject = subject;
this.rating = rating;
}
Кроме того, хотелось бы добавить метод show().
который будет отображать на экране информацию об
объектах. Создадим функцию, размещенную за
пределами конструктора:
function show () {
objWindow = window. open (" ", " " ,
"width=600,height=300");
objWindow.document, write ("<htmlXbody>");
ob jWindow.document.write ("<hl>Object
wDescription</hl>") ;
objWindow.document.write {"<p>") ;
objWindow.document.write ("Book Title: " +
this, title + "<br>");
objWindow.document.write ("Author: " +
this.author + "<br>") ;
objWindow.document.write ("ISBN: " +
this.ISBN + "<br>");
objWindow.document.write ("Subject: " +
this.subject + "<br>") ;
Листинг 11.1. Определение объекта Book.
objWindow. document .write ("Allen1 s Rating: "
this.rating + "<br>");
objWindow. document.write ("</bodyX/htr.l>") ;
objWindow.document.close () ;
J
Несмотря на то что этот код находится за
пределами конструктора, можн о рассмотреть его как часть
описания объекта. Следовательно, в данном случае придется
прибегнуть к ключевому слову this.
Далее в конструктор добавляется новый вход для
метода:
function book (title, author, ISBN, subject,
rating) {
this.title = title;
this, author = author;
this.ISBN = ISBN;
this.subject = subject;
this, rating = ratincr;
this. show = show; // Новый метод отображения
i
Обратите внимание на две детали, относящиеся к
описанию метода show(). Во-первых, имя объектного
метода совпадает с соответствующей внешней
функцией, чего быть не должно. Для большей читабельности
одни разработчики используют идентичные имена, а
другие — добавляют внешнюю функцию, содержащую
в своем имени еще и имя объекта, например, book_
show(). Во-вторых, в конструкторе записывается лишь
только имя внешней функции, без круглых скобок.
В ранних версиях Netcsape Navigator описание ме-
тодатребовалосьрасполагатьдоконструктора,поскольку все ссылки выполнялись сверху вниз. В Navigator 3+
такого уже нет. Размещение метода show()
относительно метода конструктора в JavaScript роли не играет.
Упомянутый факт дает возможность улучшить
читабельность кода, разместив описания методов
непосредственно под конструктором. Кроме того, стоит
поместить набор функций в комментарий, чтобы они
воспринимались как целостная конструкция. В листинге
11.1 приводится полное описание объекта Book.
<script type="text/javascript">
<! —
function book (title, author, ISBN, subject, rating) (
this.title = title;
this, author = author;
this. ISBN = ISBN;
this.subject = subject;
this.rating = rating;
this, show = show;
1
function show () {
objWindow = window. open ("" , "", "width=600,height=300");
objWindow. document .write („<htmlXbody >") ;
objWindow.document .write ("<hl>Object Description</hl>") ;
objWindow. document.write ("<p>") "
objWindow.document.write("Book Title: " + this.title + "<br>") ;
Создание пользовательских объектов JavaScript
Глава 11
objWindow. document, write ("Author: " + this, author + "<br>") ;
objWindow.document.write("ISBN: " + this. ISBN + "<br>") ;
objWindow.document.write ("Sub ect: " + this.subject + "<br>");
ob 'VLnd >w.document.write ("Allen's Eating: " + this, rating + "<br>") ;
о jwindow. document write ("</bodyX/html>") ;
objWindow.document.close() ;
II—>
</script>
Создание экземпляров
Для задействования объекта, объявленного в
конструкторе book() необходимо создать его экземпляр. Для
этих целей используется оператор new, синтаксис
которого выглядит так:
окземплярОбъек-га = new объектный
Тип (параметр!, параметр2, паранетрЗ,
)
При помоши new объект Book создается следующим
образом:
db""oc \ = new book ("Cost of Discipleship",
"Dietrich Bonhoeffer", "1-57521-118-1", "Grace",
5)
Теперь на это объект можно ссылаться из любого
места кода через переменную dBook. Экземпляр будет
храниться в памяти, пока страница загружена в
браузере. После перехода на следующую страницу или
закрытия браузера, экземпляр объекта исчезает. Присваивая
значения свойствам объекта, не следует забывать об этом
факте. Если требуется обеспечить постоянный объект,
ег обработка должна быть переложена на сторону
сервера.
ПРИМЕЧАНИЕ
Постоянство, или устойчивость (persistence), — это
весьма распространенное слово в предметной
области, связанной с объектами. В двух словах, это
означает способность создавать экземпляры объектов и
сохранять состояние объектов так, что при
следующем доступе к объекту он восстанавливается в
сохраненном состоянии.
Клиентская часть JavaScript не обеспечивает свойства
постоянства для объектов.
В листинге 11.2 приведен код, реализующий
создание экземпляров объекта Book и вызывающий метод
show(). На рис. 11.1 показан результат загрузки данной
страницы в браузер.
Листинг 112. Использование объектного конструктора Book.
<html>
<head>
<title>Using the book object</title>
<script type= "text/javascript">
<! —
function book(title, author, ISBN, subject, rating) (
this. title = title;
this, author = author;
this. ISBN = ISBN;
this, subject = subject;
this.rating = rating;
this . show = show ;
function how() {
objWindow = window. open ("" , "", "width=600 ,height=300")
objWindow. document. write ( "<htmlXbody>)";
objWindow. document.write ("<hl>Object Description</hl>") ;
objWindow. document. write ("<p>");
objWindow. document, write ("Book Title: " + this, title + "<br>") ;
о jwindow. document.write ("Author: " + this, author + "<br>") ;
objWindow. document, write ("ISBN: " + this . ISBN + "<br>");
objWindow. document, write ("Subject: " + this, subject + "<br>");
objWindow. document.write ("Allen's Rating: „
objWindow.document, write ("</body X/html>") ;
objWindow. document. close () ;
J
</script>
</head>
<body>
this, rating + "<br>");
ЕЯ
Вазовое подмножество языка JavaScript
Часть II
<script type=" text/ j avascript" >
<! —
// Определение объекта Book
dbBook = new book ("Cost of Discipleship", "Dietrich Bonhoeffer", "1-57521-118-1", "Grace", 5) ;
dbBook.show();
//-->
</script>
</body>
</html>
3fc\D«^acMb\J«VChipJ IVFtaV-fibfthtml - Hldaeft rifemat Hpfww
Object Description
Book Title: Co of Discipleship
Author: DleWdi Borhoeffer
ISBN; 1-57521-118-1
EUaJect: Grace
Rllt Rating: 5
РИСУНОК 11.1. ИнформацняизобъекпшЪооквыводшпсявновое
окно
Работа с экземплярами объектов
Работу с экземпляром объекта можно продолжать
сразу же после его создания — присваивать ему
значения или обращаться к любому из его методов. Кроме
того, можно связать объекты с элементами
пользовательского интерфейса.
Например, требуется создать форму, которая бы
позволяла изменять рейтинг Книг и выводить на экран
информацию для каждого созданного объекта Book.
Объект Book можно определить так, как было
показано ранее, и создать пять его экземпляров:
dbBook = new book ("Cost of Discipleship",
"Dietrich Bonhoeffer" ,
"1-57521-118-1", "Grace", 5)
fkBook = new book ("The Once and Future King",
"Т.н. White", "1-57521-112-1и,
"Camelot", 5) ;
olBook = new book ("On Liberty" , "John Stuart Mill" ,
"1-53221-118-1", "Political Philosophy", 4) ;
iaBook = new book("Icarus Agenda",
"Robert Ludlum", "1-53221-118-1",
"Politcal Thriller", 2} ;
cnBook — new book ("Chronicles of Narnia",
"C.S. Lewis", "1-53231-128-1",
"Children's Fiction", 5)
В самой форме следует использовать объект select с
элементами <option>, определенными по одному для
каждой книги, а также по одному на каждый показатель
рейтинга (интервал от 1 до 5). Добавьте еще две кнопки
-- одну для установки рейтинга, а другую — для вывода
на экран информационной формы по конкретной
книге. Код для реализации формы приводится ниже.
Результат загрузки кода в браузер показан на рис. 11.2:
<body>
<hl>Book Objects</hl>
<form name=t"forml">
<P>
Select a book :
<P>
<select name="bookList" size=l>
<option value="dbBook">Cost of
wDiscipleship</option>
<option value="fkBook">The Once and
■■* Future King</option>
<option value="olBook">On Liberty
</option>
<option value="iaBook">Icarus Agenda
</option>
<option value="cnBook">Chronicles of
-Narnia</option>
</select>
</p>
<P>
Assign a rating:
</p>
<P>
<select name="rating" size=l>
<option>K/option>
<option>2</option>
<opt ion> 3 < /opt ion>
<option>4</option>
<opt ion>5< /opt ion>
</select>
</p>
<P>
Click to assign:
</p>
<p>
<input type="button" name="Assign"
value="Assign" onClick="assignRating()">
</p>
<p>
Click to show:
</p>
<p>
<input type="button" name="Show"
value="Show" onClick="showBook()">
</p>
</form>
</body>
Сердце данного примера — это обработчик событий
для кнопок Assign и Show. Метод assignRatingO
присваивает книге выбранное значение рейтинга:
function assi nRating () {
selectedBook =
document, f orml .bookList. options [document, f orml.
^»bookLis t. selectedlndex] . value;
selectedBook = eval(selectedBook);
selectedBook.rating =
document.forml.rating.options[document.forml
'•rating, selectedlndex] .text;
.-X*»^** 3i!—"*?«'•« =Л(В**='_'^="
I: & ^
M*_J£.
'&"<jO:B:
Book Objects
Select a boci.:
| Cost of IJiscrp eship
Assign a rating:
ra
Click to assign:
"Khfniw]
Clfck ro *ow:
^
WW-, s;;t
~^L
?a--w^ <::,-<■:*"-=■'
:.^10Ui«-kBno4i4ll^&*ll\7fcft SblBHirf
- i , - ' .4 - i " 'i.
'■'.'' -,. ...,.'■"■".- -аГ^ПШ^Й»»!*..:.,
"Л
.-■'
!!!
.4
-,(,,,,
РИСУНОК 11.2 Форма объекта Book.
Посмотрев внимательнее на код, несложно заметить,
что метод получает значение выбранной опции bookList
и присваивает его переменной selectedBook. Для
получения этого значения используется свойство options
Листинг 11.3. Исходный код для примера showBookQ.
Создание пользовательски' объектов JavaScript
Глава 11
объекта bookList вместе с его же свойством selectedlndex.
Сейчас имя объекта Book содержится в переменной
selectedBook, однако JavaScript воспринимает его как
строковое значение, а вовсе не как ссылку на
экземпляр объекта. Поэтому для преобразования переменной
в объектную ссылку используется метод eval().
В последней строке метода свойству rating
переменной selectedBook присваивается значение вновь
выбранного рейтинга, содержащееся в объекте ratingSeiect.
ПРИМЕЧАНИЕ
Для проверки типа переменной во время выполнения
метода можно использовать оператор typeof.
Например, следующий код отображает окно сообщений,
выводящее тип переменной selectedBook:
alert(typeof selectedBook);
Метод showBook() использует ту же технологию для
вызова метода объекта show():
function showBook() {
SelectedBook = document, forml.bookList.
^options[document.forml.bookList.selectedlndex].value;
selectedBook = eval(selectedBook);
selectedBook.show();
)
Листинг 11.3 содержит полный исходный код
данного примера.
<html>
<head>
<ti Ые>Использование объекта Book</title>
<script type="text/javascript">
<! —
function book(title, author, ISBN, subject, rating) (
this.title = title;
this.author = author;
this. ISBN = ISBN;
this.subject = subject;
this.rating = rating;
this, show = show;
I
function show ( ) {
objWindow = window . open ("" , "" , "width=600,height=300");
objWindow. document, write ( "<htmlXbody;)";
objWindow. document, write ("<hl>Object Description</hl>") ;
objWindow. document .write( "<p>") ;
objWindow. document, write ("Book Title: " + this. title + "<br>") ;
objWindow. document, write ("Author: " + this, author + "<br>");
objWindow. document.write ("ISBN: " + this . ISBN + "<br>") .-
objWindow. document, write ("Subject: " + this, subject + "<br>");
ob'Window. document, write ("Allen's Eating: " + this, rating + "<br>") ;
о jjwindow. document.write ("</body X/html>")
objWindow document, close) ) ;
)
function assignRating() {
SelectedBook = document, forml .bookList.options [document.forml .bookList. selectedlndex] .value;
selectedBook = eval(selectedBook);
selectedBook. rating = document, forml. rating, options [document.forml .rating.selectedlndex] . text;
)
Базоеоеподмнажестеоязыка JavaScript
function showBook {) f
seleetedBook = document, forml.bookList.options [document, forml .bookList.selectedlndex] .value;
.seleetedBook = eval (seleetedBook) ;
seleetedBook.show();
I
// Выпо:гшить во время загрузхи
dbBook = new book ("Cost of Discipleship", "Dietrich Bonhoef f er", "1-57521-118-1", "Grace", 51 ;
fkBook = new book("The Once and Future King", "Т.Н. White", "1-57521-112-1", "Camelot", 5) ;
olBook = ne ' book ("On Liberty", "John Stuart F'Jl", "1-53221-118-1", "Political Philosophy", 4);
iaB:ok = new book ("Icarus Agenda", "Robert Ludlum", "1-53221-118-1", "Political Thriller", 3) ;
cnBook = new book ("Chronicles of Narnia", "C.S. Lewis", "1-53231-128-1", "Children's Fiction", 5),
</script>
< /head.>
<body>
<hl>Book Obj ects< /hl>
<form name="forml">
<P>
Select a book:
</p>
<P>
<select name="bookList" size=l>
<option value="dbBook">Cost of Discipleship</option>
<option value=" fkBook">The Once and Future King</option>
<option value="olBook">On Li]Derty</option>
<option value="iaBook">Icarus Agenda</option>
<option value="cnBook">Chronicles of ITarnia<,'option>
</select>
</p>
<P>
Assign a rating:
</p>
<p>
<select name="rating" size=l>
<option>l</option>
<option>2<, option>
<optiori>3< /optioir>
<opt ion> 4 <,' opt ion>
<option>5</option>
</select>
</p>
<P>
Click to assign :
</p>
<P>
<input type="button" name="Assign" value="Assign" onClick="assignRating() ">
</p>
<P>
Click to show:
</p>
<P>
<input type="button" name="Show" value="Show" onClick="showBook()">
</p>
</form>
-- /]>:.dy>
</html>
Создание составных объектов
Объекты, с которыми мы имели дело до этого
момента, относятся к категории простых объектов. Они
обладают одним уровнем свойств и методов. Следующий
пример, посвященный созданию объекта buttonSet, с
одной стороны более быстр, а с другой — более сложен
в восприятии. Разрабатываемый объект должен
позволять "на лету" добавлять кнопки в соответствующий
массив, помещать buttonSet в любой объект Document
и по заданным условиям отображать отдельные
кнопки. Конструктор объекта buttonSet показан в листинге
11.4.
Создание пользовательских объектов JavaScript
Глава 11
Листинг 11.4. Конструктор объекта buttonSet.
<soript type="text/javascript">
<!
function buttonSet (паше) {
this. name = name;
this. length = О ;
this . addBtn = addBtn ;
this print = print,-
// Ук эать, куда в объект поместить дополнительные элементы.
// Любое выполненное изменение отразите в this.print().
this index = 4;
return this ;
)
// Метод print() объекта buttonSet
function print{dobj) {
var spacelnt;
for (var i = 5; this index >= i i++) {
if(eval(this[i].condition)) {
dObj .writeln('<a href=" '+this [i] .url+" "Xing src="' + this [i] file+'" alt=" ■ +this [i] .alt +
■" width="44" height="46" border=OX/a>■) ;
// Если требуется, добавляем пробелы
spacelnt = 0 + this[i] .spai er;
if(navigator.appName == "Microsoft Internet Explorer") {
spacelnt = spacelnt + 3 ;
I
if(spacelnt != 0) {
dobj.write('<img src="images/space.gif" width=' + spacelnt + 'height=46 border=0>');
)
\
]
)
II—>
</script>
Помимо прочих, JavaScript поддерживает составные
объекты, свойства которых сами могут быть объектами.
Составные объекты дают возможность более логично
структурировать код. Это гораздо лучше, нежели
пытаться втиснуть все данные в одноуровневый объект.
Предположим, что требуется отслеживать
информацию о сотрудниках, их текущих проектах и клиентах.
Очевидно, что адрес клиента не должен быть частью
описания объекта сотрудника. В этом смысле
существенную помошь в структуризации данных вокруг трех
отдельных, однако связанных сущностей — сотрудник,
проект, клиент — окажут составные объекты JavaScript.
В конструкторе employee определите основные
свойства (имя, телефон, адрес электронной почты) и метод
showSummaryInfo(). Для представления связанной с
проектом информации потребуется определить свойство
project в объекте employee. Определение выполняется
таким же путем, как и для обычного свойства, за
исключением того, что параметр project является ссылкой на
другоР объект, а не на строковое значение:
function employee FirstName, LastName,
HomePhone, Ext, EmailAddress, project) (
this.FirstName = FirstName;
this. LastName = LastName;
this.HomePhone = HomePhone;
—ШШ
this. Ext = Ext;
this.EmailAddress = EmailAddress;
this.Project = project;
this . showSummarylnf о = summarylnfo;
j
Совершенно аналогично определите объект project,
установив объект client в качестве свойства:
function project(ProjectName, client, DevTool) {
this.ProjectName = ProjectName;
this.Client = client;
this.DevTool = DevTool;
function client'CIientName, Address, City,
State, Zip) {
this.ClientName = ClientName;
this Address = Address;
this. City = City;
this.State = State;
this.Zip = Zip;
I
Создаваемый сейчас метод showSummaryInfo()
демонстрирует способ ссылки на эти вложенные объекты.
Функциональность этого метода связана с отображения
нового окна для представления краткой информации о
сотруднике — список всех свойств объекта employee и
других объектов внутри него.
Базовое подмножество зыка JavaScript
Часть II
function summarylnfо() {
objWindow = window.open ("" , "", "width=600,height=400") ;
objWindow.document.write {"<htmlXbod- >");
objWindow.document.write ("<hl>Employee Summary Information Sheet </hl>");
objWindow.document.write("<h2>" + this. Firs tName + " " + this .Last Name + "</h2>") ;
objWindow. document .write {"<pXemXSstrong>Contact Information </strongX/emX/p>" ) :
objWindow.document.write ("<p>Home Phone: " + this -HomePhone + "</p>") ;
objWindow. document, write ("<p>Ext. : " + this.Ext + "</p>") ;
ob jWindow.document .write ("<p>Email: " + this .EmailAddress + ,,</p>") ;
o" jwindow. document ,write("<pXemXstronq>Project Information </strongX/emX/p>") ;
ob jWindow. document, write {"<p>Current Project: " + this .project. Pro jectName + "</p>") ;
objWindow. document, write ("<p>Client: " + this .Project. Client. ClientName + "</p>");
objWindow.document.write("<p>Client: " + this.Project.Client.Address + "</p>");
objWindow.document.write{"<p>Client: " + this. Project. Client. City + ", " +
this. Project. Client. State + " " + this.Project.Client.zip + "</p>");
objWindow.document.write ("<p>Developmnt Tool Used: " + this. Project.DevTool + "</p>")
objWindow.document .write("</body></html>") ;
objWindow. document. close () ;
\
Ссылка на дочерний объект выполняется в
соответствие с точечной нотацией. Таким образом, на адрес
клиента можно сослаться через this.Project.Client.Address.
Точечная нотация позволяет легко и просто отследить
код с момента определения пути для используемых
методов и свойств, поскольку предполагает указание
пути к тому или иному методу либо свойству.
Совершенно несложно добраться до родительских объектов
(имена которых находятся слева перед первой точкой),
проходя через множество дочерних до тех пор, пока не
встретится искомый метод или свойство.
Как только определены конструкторы для каждого
из объектных типов, приступайте к созданию
экземпляров employee, project и client.
CoastTech = new client("Coastal Techonology",
"100 Beacon Hill", "Boston", "MA", "01220").-
Coastal = new project{"CoastalOl", CoastTech,
"JavaScript") ;
Allen = new employee ("Allen", "Wyke", "617/555-
'-1212", "100", "allen@anywhere.com", "Coastal");
Параметр project в определении объекта
сотрудника и параметр client в определении объекта проекта -
далеко не строки; они — суть имена вновь созданных
объектов. Обязательно примите во внимание порядок
создания объектов. Поскольку объект Allen использует
объект проекта Coastal в качестве параметра, создание
экземпляра Coastal должно происходить в первую
очередь, иначе возникнет ошибка. По тем же
соображениям, сначала потребуется создать экземпляр CoastTech
объекта client и только затем заняться созданием
проекта Coastal.
После создания экземпляров объектов обратитесь к
Allen.showSummaryInfo() для отображения окна,
показанного на рис. 11.3.
В листинге 11.5 показан исходный код для этого
примера.
*-$h2flJi ггп \ - Мкпн oft I n tem et EHptaf и-
Employee Summary Information Sheet
Thelma Turner
Contact Information
HomePhone: 556-236-0202
Ext: 100
Email: thelma@tJJrner.com
Project Information
Current -oject CoastalOl
Client Coastal Techonology
Address: 1 Beacon Hill
City, State, Zip: Boston, MA 01220
Development Tool Used: JavaScript
ЕПВ
РИСУНОК11.3. Страница с краткой информацией о сотруднике.
Листинг 115. Пример использования объектов employee, client и project.
<html>
<head>
<title>Using the book ob;ject</title>
<script type="text/ javascript">
function employee (FirstName, LastName, HomePhone, Ext, EmailAddress, project) {
this. Firs tName = FirstName;
Создание пользовательских объектов JavaScript
Глава 11
this. LastName = LastName;
this. HomePhone = HomePhone;
this. Ext = Ext;
this.EmailAddress = EmailAddress;
this.Project = project;
this.showSummarylnfо = summarylnfо;
)
function summarylnfо() {
objWindow = window.open("", "", "width=600,height=4001') ,-
objWindow.document.write ("<hrjnlxbody>");
objWindow.document.write{"<hl>Employee Summary Information Sheet</hl>");
ob jWindow. document. writeCVl^V + this.FirstName + " " + this.LastName + "</h2>") ;
objWindow.document.write (,,<pXemXSstrong>Contact Inforroation</strongX/emX/p>") ;
ObjWindow.document.write ("<p>Home Phone: " + this.HomePhone + "</p>");
objWindow.document.write("<p>Ext.: " + this.Ext + "</p>");
objWindow.document.write("<p>Email: " + this.EmailAddress + "</p>");
objWindow. document, write ("<pXemXstrong>ProjectInformation</strongX/emx/p>") ;
objWindow. document. write ("<p>Current
objWindow.document.write("<p>Client:
objWindow. document. write {"<p>Client ;
objWindow.document.write("<p>Client:
this.Project.Client.State + " " +
objWindow.document.write ("<p>Development Tool Used:
objWindow. document. write ("</bodyX/html>") ,-
objWindow.document.close() ;
Project: ' + this.project.ProjectName + "</p>");
" + this.Project.Client.ClientName + "</p>");
" + this.Project.Client.Address + "</p>");
" + this.Project.Client.City + ", " +
this.Project.Client.zip + "</p>") ;
+ this.Project.DevTool + "</p>");
function project (ProjectName, client,
this. ProjectName = ProjectName;
this.Client = client;
this. DevTool = DevTool ;
DevTool) (
)
function client (ClientName, Address,
this . ClientName = ClientName;
this. Address = Address ;
this. City = City;
this .State = State;
this. Zip = Zip;
J
II—>
</script>
</head>
<body>
<script type="text/javascript">
City, State, Zip)
CoastTech = new client ("Coastal Techonolc7y" , "100 Beacon Hill", "Boston", "MA",
Coastal = new project ("CoastalOl", CoastTech, "JavaScript");
Allen = new employee ("Allen", "Wyke", "617/555-1212", "100", "allenGanywhere.com",
Allen. showSummarylnf о ();
II—>
</script>
< /body>
</html>
■01220");
"Coastal")
Динамическое создание объектов
Возможность создания объектов непосредственно в коде
существенно расширяет возможности разработчика. Во
всех рассмотренных ранее примерах объекты
создавались посредством оператора new во время загрузки окна.
А какие же действия потребуется предпринять для
создания объектов во время выполнения?
Объектно-ориентированные среды программирования позволяют
создавать экземпляры "на лету".
JavaScript позволяет создавать объекты "на лету",
однако все же с рядом определенных ограничений.
Сначала планировалось создать обобщенную функцию,
которая бы создавала экземпляры при каждом ее
вызове. Если замысел увенчается успехом, исчезнет
необходимость в использовании операторов new, и объекты
1ИЛ-
Базовое подмножество языка JavaScript
Часть II
можно будет создавать на основе информации,
введенной пользователем. Идея метода выглядит
приблизительно так:
function addEmployee(ObjectName,FirstName,
LastName) {
Ob jectName = new employee (FirstName, LastName);
)
В идеальном случае метод должен был создавать
экземпляр объекта и присваивать ему имя на основе
значения параметра ObjectName. К сожалению,
попытка успехом не увенчалась. JavaScript не позволяет
имени экземпляра объекта быть переменным. Вместо этого
в качестве имени объекта используется ObjectName.
Например, если Frank определен как объектная ссылка, то
следующее выражение будет полностью корректным:
runct_' q addFrank (FirstName, LastName) (
Frank = new employee(FirstName, LastName);
)
Несмотря на невозможность динамического
именования реализованных объектов, объект можно создать
как элемент массива-контейнера. Это означает, что
можно предусмотреть массив employeeList, который будет
хранить все созданные объекты employee. Таким
образом, можно изменить метод addEmployee(), использовав
вместо него что-то наподобие:
function addEmployeeObject(FirstName, LastName,
HomePhone, Ext, EmailAddress) {
Листинг 11.6. Динамическое создание объектов.
empList[i] = new emplo* ее (FirstName
LastName, HomePhone, Ext, EmailAddress) ;
)
Используя приведенный выше метод, можно
создавать экземпляры объектов, базируясь на вводе
пользователя и динамическом создании объекта за счет
вызова addEmployeeObject(). Например, при помощи формы,
представленной на рис. 11.4, пользователь может
вводить основную информацию о сотрудниках. После
щелчка на кнопке Add создается новый экземпляр объекта. В
листинге 11.6 показан исходный код для данной формы.
'■, ' ** "* D;lft*iWoiibi\J«Arb*1i'Jfc--V-fifc*.i*!i ~^J
KiL**,,^ , . ■ -^ ^«ч* ■ -i* л а я * a -:#
Dynamic Object Creator
Entw qrrpbJW П>ОГ 1
havaErtwl.
Fyrthanne
LKtWare
м^&ш
ftlme
^|fti«frf:=1Cbiti----
utton m Ire hi m below «J clt* Ни Aim button. пяя t» SJww M\ b№ « *h* я tat и Л етарЬ1ртм)ги
|p^l«iSir:i№\4=0,*rtb*4* {Л**-»***—|j*b»*M^. Щчю** '-^ -О^Я*л«*1
ТЧЮУНОКМАДинамическоесозданиеобъектов.
<html>
<head>
<title>Intranet Employee Database</title>
<script type="text/javascript">
<! —
// Глобальные переменные
var i = 0;
// Создание массива
var empList = new Array {) ;
// Конструктор объекта сотрудника
function employee (FirstName, LastName, HomePhone, Ext, EmailAddress) (
this. FirstName = FirstName;
this. LastName = LastName;
this. HomePhone = HomePhone;
this.Ext = Ext;
this. EmailAddress = EmailAddress;
this . show = show;
J
function show ( ) !
alert (this. FirstName + "/n" + this. LastName
this. Ext + "/n" + this . EmailAddress) ;
)
+ -"/n" + this. HomePhone + "/n" +
function addEmployeeObject (FirstName, LastName, HomePhone, Ext, EmailAddress) {
empList[i] = new employee (FirstName, LastName, HomePhone, Ext, EmailAddress);
function insertRecord() {
FirstName = document.forml.FirstName.value;
Создание пользовательских объектов JavaScript
Глава 11
LastName = document, forml. LastName. value;
Home Phone = document:. forml. HomePhone. value ;
Ext = document. forml. Ext. value ;
EmailAddress = document.forml.EmailAddress.value;
i++;
addEmployeeObject (FirstName, LastName, HomePhone, Ext,
EmailAddress)
"unction showAll() {
objWindow = window.open("" , "", "width=60O,height=300") ;
objWindow.document, write ("<htmlXbody>");
objWindow.document.write("<hl>Object Description</hl>");
objWindow.document.write ("<p>") ;
for (var q=l; q<empList. length; q++) {
objWindow. document .write ("<strong>" + empList[q] .FirstName + " " +
empList[q] .LastName + "</strongX/p>") ,
objWindow.document.write("<p>" +- empList[q] .HomePhone t- "</p>") ,
objWindow.document.write("<p>" + empList[q] .Ext + "</p>");
objWindow. document. write("<p>" + empList[q] .EmailAddress + "</p>") ,
objWindow. document.write ("</bodyX/html>") ;
J
objWindow. document. close ()
</script>
---/heacL-
--]>:.dy>
<hl>Dyanamic Object Creator</hl>
<p.--Enter employee information in the form ]:>elow and click the Add iDQtton.
Press the Show All button to view a list of all employees you have
entered.</p>
<form name="forml">
<pre>
First Name:
--input type=text size=20 maxlength=256 name="FirstName">
</pre>
<pre>
Last Name:
--input type=text size=20 maxlength=256 name="LastName">
</pre>
--pre>
Home Phone:
--input type=text size=20 maxlength=256 name="HomePhone">
</pre>
~--pre>
Ext. :
---input type=text size=20 maxlength=256 name="Ext">
</pre>
--pre>
Email Address:
-input type=text size=20 maxlength=256 name="EmailAddress">
</pre>
--pre>
--input type="button" name="Add" value="Add" onClick="insertRecord()">
--input type="button" name="ShowAll" value="Show All"
onClick="showAll{)">
</pre>
</foi-m>
--/]>:.dy>
</html>
Кнопка Show All (Показать всех) позволяет
просмотреть все объекты, созданные в течение сеанса. На рис.
11.5 показан список объектов employee, экземпляры
которых уже были созданы.
6 I-IW
ПРИМЕЧАНИЕ
Объекты типа массивов не поддерживались Netscape
Navigator вплоть до его версии 3.0. Учтите это при
создании сценариев для версии 2.0.
Базовое подмножество языка JavaScript
Часть II
Object Description
Tom Smith
555-1221
129
tom@tuv.com
Tin Smith
555-1222
1Э0
iim@my.eMTi
Leon Openhlemer
111-1112
132
lean(3niy.com
Oftunl . i'" jig и IP (£g> мпл
РИСУНОК 11.5. Список созданных динамически объектов.
Расширение экземпляров объектов
Раз уж JavaScript является слабо типизированным
языком, он весьма гибок в плане описания объектов.
Определение экземпляра любого объекта можно
расширить, объявив новое свойство и присвоив ему значение.
В качестве примера добавим в экземпляр cnBook объекта
Book из предыдущей главы свойство Series. Экземпляр
cnBook создается следующим образом:
cnBook = пен book("Chronicles of Narnia", "C.S.
'-Lewis", "1-53231-128-1", "Children's Fiction",
5) ;
Где-то в сценарии поместите код добавления
свойства Series:
cnBook.Series = "True";
Подобная технология применима только к
экземплярам объектов, но не к объектному типу. С другой
стороны, браузеры, поддерживающие как минимум
JavaScript 1.1, позволяют расширять созданные
объекты с использованием объектны прототипов, синтаксис
которых выглядит так:
Объектный прототип позволяет добавлять свойства
и методы к каждому экземпляру объектного типа. Если
бы требовалось к каждому объекту Book добавить
новое свойство recommended со значением true, следовало
бы воспользоваться кодом, показанным ниже:
book.prototype.recommended = True;
Протестировать все можно, вызвав alert(cnBook.
recommended). Результат тестирования показан на рис.
11.6.
^lJ 1
■ hj
РИСУНОК 11.6. Вывод на экран значения свойствас
использованием alert().
Резюме
JavaScript поддерживает возможность создания
пользовательских объектов в клиентских сценариях, что делает
язык более гибким и позволяет структурировать код в
соответствие с объектно-ориентированной
методологией.
В главе были рассмотрены различные аспекты
создания и реализации объектных типов. Читатели
почерпнули информацию о том, как можно расширить
функциональность обычных объектов за счет создания
составных объектов, т.е. того, что носит название
"объектов внутри других объектов". Составные объекты
используются для инкапсуляции данных,
простирающихся на большое количество уровней. По
аналогичному же принципу строятся реляционные базы данных с
отношениями "один-ко-многим". В добавок ко всему,
читатели узнали о расширении экземпляров объектов с
использованием прототипов объектов.
объектныйТип.prototype.имяСвойства;
Серверная часть JavaScript
В ЭТОЙ ГЛАВЕ
■ Использование архитектуры клиент/сервер
■ Разработка серверных приложений JavaScript
■ Базовые серверные объекты
Несмотря на то что JavaScript играет ключевую роль
именно со стороны клиента, зачастую этот язык
программирования используется при создании серверных
приложений (с помощью Netscape Server-Side JavaScript,
SSJS). SSJS, как и его эквивалент для клиентской
стороны, представляет собой набор объектов, функций и
методов, расширяющих стандарт ECMAScript.
Применительно к разработке Web-приложений, он
используется в качестве серверного языка сценариев,
заменяющего CGI и другие технологии.
ПРИМЕЧАНИЕ
Оригинальное название серверной части JavaScript
выглядит как LiveWire. Начиная с Netscape Enterprise Server
3, LiveWire был погружен в сервер, после чего
перестал существовать в виде отдельного продукта. LiveWire
на данный момент реализует функциональность
подключения к базам данных.
ПРИМЕЧАНИЕ
SSJS работает только на Netscape-серверах, поэтому в
настоящий момент нельзя использовать с другими Web-
серверами. Компания Microsoft поддерживает JScript в
собственном сервере Active Server Pages (ASP),
однако эти расширения серверного языка отличаются от SSJS.
И вообще, не стоит забывать, что Java Server Pages (JSP)
— это совершенно другая технология.
Прежде чем углубиться в SSJS, необходимо
разобраться, как создавать приложения типа сервер/клиент.
SSJS вместе с используемым для управления этими
приложениями менеджером приложений (Application
Manager) в клиент-серверной модели представляют
сервер. Клиенток является браузер или приложение, куда
отправляется информация. Изучение технологии
клиент/сервер существенно повысит уровень ваших знаний.
Использование архитектуры клиент/
сервер
Клиент и сервер представляют собой различные
сущности, независимые друг от друга до тех пор, пока
клиенту не понадобится информация от сервера. Концепция
клиент/сервер усовершенствовалась до такой степени,
что вышла за пределы сервера, служившего просто
хостом Для HTML-страниц. Серверная часть
Web-приложения может быть истинным сервером,
поддерживающим обработку приложения и хранение баз данных.
Хранение обычных статических документов кануло в
лету.
Web-приложения с клиент-серверной
архитектурой
Разработка Web-приложений типа клиент/сервер
отличается от традиционного процесса разработки в рамках
архитектуры клиент/сервер. Так сложилось, что сервер
рассматривается в качестве разновидности сервера баз
данных, используемого для хранения и обработки
запросов данных от клиента. В клиент-серверной
технологии для Web сервер не обязательно должен быть базой
данных, это просто Web-сервер, используемый для
обработки, администрирования и выполнения вычислений
в HTML-документах. Все еще существует возможность
разделения функциональности между клиентом и
сервером, тем не менее, обработка централизована на
сервере.
Двухуровневая структура приложений
Разрабатываемое приложение необходимо разбить на
две четко определенных части. Это как раз и есть дву-
НИМ! Базовое подмножество языка JavaScript
U£l Часть II
хуровневая структура для архитектуры типа
клиент/сервер. Первая часть представляет собой пользовательский
интерфейс (UI), или внешний интерфейс, который
обеспечивает связь пользователя с приложением.
Вторая часть — сервер, где проходит основной процесс
выполнения. Благодаря наличию клиентской части
JavaScript, выполнение можно разделить между
клиентом и сервером в соответствии с требованиями
приложения.
В обычной среде было бы разумнее перенести как
можно большую часть обработки на клиентскую часть,
поскольку необходимо располагать определенной
степенью управления конфигурацией и настройкой машин
пользователей. Такое разделение может сделать сам
разработчик, по своему усмотрению, в зависимости от
возможностей клиентской стороны, загрузки сервера и
сетевого трафика.
Сервер — это обрабатывающий механизм
приложений. Он управляет и хранит большое количество
данных, выполняет интенсивные и крупномасштабные
вычисления, а также системную обработку.
Возможность изоляции двух частей системы,
обеспечивающая их независимость друг от друга, внесли
существенную долю в развитие широкомасштабных
систем баз данных. Упомянутая возможность привносит
дополнительную гибкость в процесс разработки
приложений.
N-уровневая структура приложений
jV-уровневая методология применяется с целью
преодоления ограничений двухуровневой структуры. /V-уров-
невая архитектура предусматривает разбиение
пользовательского интерфейса, обработки и хранения данных
на отдельные уровни, еще больше разделяя рабочий
поток. Клиент отвечас за пользовательский интерфейс
и несложную обработку, а сервер — за хранение
данных. При этом существенная обработка и вычисления
(или бизнес-правила) перемещаются на средний уровень.
Такие возможности позволяют вносить изменения в
бизнес-правила, не оказывая влияния на
пользовательский интерфейс и базы данных.
По сравнению с обычной средой приложений, в
среде Web-разработки клиентский компьютер (и
Web-браузер, и рабочая станция) управляется в гораздо меньшей
степени. Очень сложно оценить, как проходят процессы
на клиентской части. Более разумно запускать
процессы на серверной части, потому как необходимо
контролировать среду, обеспечивая тем самым
предсказуемые результаты.
С другой стороны, обычные приложения типа
клиент/сервер сталкиваются с некоторыми проблемами,
незнакомыми для клиент-серверных Web-приложений.
В обычных приложениях баз данных типа
клиент/сервер при изменении клиентского модуля повторное
распределение целого приложения не требуется,
поскольку клиентом Является Web-страница и модификации
распространяются автоматически при ее следу ощсй
загрузке.
Браузер инициирует транзакцию путем отправки
серверу запросов на выполнение некоторых операций,
на получение информации из баз данных, на
определенные вычисления, на запуск процессов либо на
выполнение функций SSJS. Прежде чем продолжать, клиент
должен дождаться ответа от сервера. Процессы
серверной части обеспечивают хранение кода в едином
централизованном сервере. Это позволяет более быстро
выполнять требуемые модификации и увеличивает
скорость прохождения процессов, поскольку все они
выполняются на сервере.
Как не попасть в западню
С использованием JavaScript связан ряд вопросов
касаемо архитектуры типа клиент/сервер. В зависимости от
предпочтений, обработка в JavaScript может
распределяться между клиентом и сервером. Скорость
обработки со стороны клиента зависит от клиентской среды,
памяти, быстродействия и других внутренних
факторов, в то время как на сервере скорость зависит от
трафика в Internet и запущенных процессов на сервере. В
этой связи неплохой идеей будет разделение
обработки между различными элементами с акцентированием
внимания на сервере, как на более известной и
предсказуемой сущности.
ПРИМЕЧАНИЕ
Размышляя над дизайном архитектуры на ранн-ix
стадиях разработки Web-приложений, можно созд >вать
более устойчивые приложения, что ускорит выполнение
процессов.
Передача информации между клиентом и
сервером
Связь клиента с сервером в Web-среде — очень важный
вопрос, которому стоит уделить особое внимание. В
отличие от клиент-серверной среды в обычных сетях,
Web-среда не обеспечивает постоянной связи с
сервером, устанавливая вместо этого взаимодействие через
протоколы HTTP с использованием TCP/IP.
От клиента к серверу
Самый важный обмен информацией между клиентом
(браузером) и сервером — это клиентские запросы. Сама
природа HTTP требует, чтобы браузер клиента
отправлял на сервер запросы на любую необходимую
информацию. Сервер не может самостоятельно инициировать
переход или подключение к HTTP-документу.
Формат HTTP-запроса к серверу может быть
базовым запросом HTML-страницы или запросом,
включающим информацию содержимого либо данные,
которые должны быть обработаны или Отправлены на
сервер. К тому же, часть информации, содержащаяся в
запросе (называемая "телом"), включает в себя данные
(содержимое) функций или полей HTML-документа, с
которыми будет работать сервер.
HTTP-запросе содержит три основных группы
информации:
• Строка запроса (GET, HEAD. POST), URL и версия
HTTP.
Пары имя/значение для таких полей, как accept,
refer, if-modified, user-agent, content-type, content-
length.
• Содержимое — информация (данные), отправленная
на сервер для обработки.
От сервера клиенту
После отправки клиентом на сервер запроса
определенной информации, сервер, в свою очередь, отправляет
клиенту сообщение, содержащее запрашиваемую
информацию. HTTP-ответы обладают тем же форматом,
однако в конце содержат возвращаемый HTML-документ
{ответ).
HTTP-ответ содержит три основных группы
информации:
Строка ответа
Заголовки ответа
• Данные ответа
Серверная строка ответа имеет синтаксис версии
HTTP, код состояния (код возврата из трех цифр) и
строку Ответа текста (не используемую браузером, но
участвующую в интерпретации документа). Все
сказанное выглядит следующим образом:
НТТР/1.1 200 ОК
Server: Netscape-Enterprise/3.5.1G
Date: wed, 19 Apr 2000 17:13:33 GMT
Content-type: text/html
Connection: close
Строка Ответа предоставляет браузеру начальную
информацию О том, Что можно Ожидать далее, если
пройти ответ до самого конца. Версия HTTP сообщает
О том, Как начать интерпретацию документальной
Части Ответа, а код состояния — Что можно Ожидать
после возврата. Например, код состояния Ответа, равный
200, означает "ОК" (то бишь, "все будет хорошо").
ПРИМЕЧАНИЕ
Суп. -;стз- ет великое множество кодов ответа
(наподобие 200, 302, 404), которые имеют отношение к
состоянию и возвращаемому содержимому документа.
Серверная часть JavaScript
Данные ответа, или "тело", — это последняя часть
HTTP-ответа. Они хранятся в формате, определенном
content-type. Значение этих данных зависит от кода
состояния, возвращаемого в заголовке ответа. Как
правило, данные ответа имеют форму HTML-документа,
который и будет отображаться в браузере клиента.
Управление сеансами
Одно из преимуществ Web и технологии разработки
Web-приложений в то же время является и
существенным препятствием для приложений, требующих
взаимодействия клиента и сервера. Поскольку сервер
оперирует в среде, не поддерживающей концепцию
состояний, выполнение происходит гораздо быстрее,
однако при этом сервер должен полностью полагаться
на клиента в том плане, что клиент сам должен
напоминать, кто он есть и когда он производит запрос.
Эволюция HTML от статических страниц к интерактивным
приложениям повлияла на среды, не обладающие
состоянием, заставив искать способы осуществления
поддержки состояния.
Поскольку клиент не связан постоянно с
Web-сервером, возникает немаловажная проблема: как сообщить
Web-серверу, кто является клиентом при его повторном
подключении к серверу и отправке запроса. Если бы
подключение Web-приложений к серверу было бы
постоянным, то разработка Web-приложений была бы
столь же простой, Как и разработка приложений типа
клиент/сервер.
Существует несколько методов управления
сеансами, среди которых — использование клиентских cookie-
наборов, кодирование URL и IP-адреса на сервере.
Первых две технологии предполагают полную поддержку
состояния со стороны клиента и определенную помощь
со стороны сервера. В случае технологии, связанной с
IP-адресами, поддержку информации осуществляет
сервер, а клиент лишь оказывает в этом помощь.
Cookie-наборы
Cookie- наборы обеспечивают механизм сохранения
клиентской информации на Web-сервере,
предусматривающий идентификацию. Эта информация может быть
использована в будущих подключениях к серверу.
СооЫе-наборы — это методология поддержки
состояния клиентов. Сервер сохраняет информацию о
клиенте на клиентской части, а затем клиент отправляет
сохраненную информацию обратно на сервер вместе с
каждым HTTP-запросом.
Cookie-наборы хранятся в текстовом файле на
клиентском дисковом устройстве. Сервер, как средство
отслеживания состояний клиентов, может помешать
информацию в cookie-набор столько раз, сколько это
позволяет браузер. Различные браузеры по-разному
работают с cookie-наборами. Некоторые (скажем, Navigator)
Базовое подмножество языка JavaScript
имеют только один файл cookie, в который все сервера
записывают информацию, помечая его разделы
специальными именами URL по мере сохранения и
обновления. Другие браузеры, такие как Internet Explorer,
сохраняют информацию в различных файлах каталога cookie.
ПРЕДУПРЕЖДЕНИЕ
Размер файла cookie ограничен. Передаваться клиенту
и сохраняться на его стороне может только
определенный объем информации. Сей факт ограничивает
количество информации, которую может сохранять каждый
сервер, и число Web-серверов, сохраняющих
информацию на клиентском компьютере.
Всегда существует вероятность ошибочного
удаления файла cookie (это всего лишь текстовый файл). В
этом случае сервер потеряет информацию о состоянии,
поэтому клиенту для стабилизации своих отношений с
сервером придется все начать сначала.
Поскольку cookie-информация хранится на
клиентской части, то серверные элементы повлиять на нее не
могут. Это позволяет клиенту выполнить повторную
отправку запроса, даже если первый раз на сервере
возникали какие-то проблемы. Другое преимущество cookies-
наборов заключается в том, что сервер не обязан
хранить информацию о клиенте; после
первоначального запроса информации сервер вообще может "забыть"
о клиенте.
Cookie-наборы приводят к увеличению трафика,
поскольку с каждым запросом сервер должен отправлять
и получать дополнительную информацию.
Cookie-информация передается в соответствие с методологией пар
имя/значение, используя для этого протокол передачи
cookie-информации.
Кодирование URL
Кодирование клиентского URL для поддержки
информации о состоянии взаимодействия клиент-сервер
предусматривает отправку пары имя/значение (name/value)
или уникальных ключевых полей информации как
части строки URL в клиентском HTTP-запрос. Подобный
способ сохранения информации О состоянии выгоден
для серверов так же как и cookie-наборы, поскольку в
данном случае серверы не должны сохранять какую-
либо информацию.
ПРИМЕЧАНИЕ
Использование данного процесса для поддержки
клиентского состояния требует, чтобы построение URL было
динамическим каждый раз, когда генерируется запрос.
Разумеется, размеры URL при этом существенно
возрастают.
Использование метода кодирования клиентских
URL обеспечивает значительную гибкость, если
существует потребность в поддержке состояния. В отличие
от cookie-наборов, кодирование URL не зависит от
конкретного браузера. Поскольку разработчик не ведает,
какой конкретно браузер получает доступ к серверу, то
это, пожалуй, наилучший способ поддержки состояния.
IP-адреса на сервере
Третий способ поддержки состояния — сохранение IP-
адреса и информации о состоянии на сервере. Это
означает, что сервер должен иметь доступ К базам данных
или к совместно используемой памяти, где будет
сохраняться информация. Хранение информации О
состоянии основано на IP-адресах клиента. Информация
используется и хранится только совершенно
определенным сервером.
Из-за множеств" недостатков, такой способ
поддержки состояния используется только в определенных
случаях:
Должно быть известно, что клиенты обладают
постоянными IP-адресами
Приложение поддерживает только один сервер
Практика динамического распределения IP-адресов
для машин, которые выполняют Web-браузеры, делает
невозможным внедрение данного способа хранения
состояния. Кроме того, невозможна также и поддержка
множества Web-серверов.
Разработка серверных приложений
JavaScript
После того как все особенности серверной части языка
JavaScript рассмотрены, можно приступить К
исследованию процесса разработки приложений в этой среде с
использованием SSJS. На рис. 12.1 показаны все
детали упомянутого процесса.
Создание исходных файлов
Первый шаг к построению серверного приложения
JavaScript связан созданием исходных файлоь, которые
бывают двух видов:
Исходные HTML-документы. Эти документы могут
быть статическими либо страницами с кодами
JavaScript. Их расширения — .htm или .html.
• Библиотечные файлы JavaScript. Их расширение -
js. Эти файлы служат в качестве библиотек функций
JavaScript. Использовать HTML-дескрипторы
внутри них не требуется.
Серверная часть JavaScript
Создание
исходных HTML-
и JS-файлов
<у
Компиляции с
приложение
.WEB
РИСУНОК 121. Процесс
разработки серверных
приложений JavaScript.
Установка в виде
серверного
расширения LiveWire
Setver Extension
Запуск приложения
из LiveWire
Application Manager
Рассмотренные файлы необходимы, поскольку, в
Отличие От клиентской части JavaScript, до помещения
на Web-сервер SSJS следует откомпилировать в байтко-
ды. Упомянутая необходимость предварительной
компиляции рассматривается с Одной стороны Как
достоинство, а с другой — Как недостаток использования
JavaScript на серверной Части. Достоинство
заключается в том, Что именно по причине предварительной
компиляции операция выполнение существенно
ускоряется. Однако, одновременно, это же и недостаток,
поскольку большая Часть того, что создается в SSJS,
должно быть обязательно Wcb-приложсниями, а не
обычными страницами (как раз страницы и требуются
большинству разработчиков).
HTML-документы
Зачастую разработчики практикуют внедрение кода
JavaScript в HTML-документы. Однако внедрение
серверной части JavaScript в HTML-файл может
существенно изменить результат. Существуют два пути внедрения
JavaScript в HTML-документы.
Персый путь заключается в применении
дескрипторов <server> и </server>. В любом случае,
использование этих дескрипторов напоминает дескрипторы
<Script> и </script>, применяемые на клиентской
части JavaScript. Например, требуется сгенерировать
строку, которая отображает ID (идентификатор) лица,
ранее переданный через форму. Для этого можно
прибегнуть к дескриптору <server>:
Глава 12
<server>
if (client, custid = null) {
write ("Вы не имеете идентификатора");
) else {
write ("Ваш идентификатор — " +
client.custid);
</server>
Второй путь встраивания кода не предусматривает
использование дескриптора <server>, поскольку код
находится внутри другого HTML-дескриптора. Если
необходимо поместить выражение JavaScript внутрь
HTML-дескриптора, код окружается обратными
кавычками (\Q). Эти кавычки весьма полезны при работе с
объектами Link, Anchor и Form. Например,
генерирование HTML-кода с созданной "на лету" ссылкой,
которая включает заранее введенный пользователем Web-
адрес, достигается при помощи такого кода:
<А REF=\ ' client.WebAddress\ ' --^Домашняя
w страница</А>
При внедрении серверного JavaScript-кода в HTML-
документ, пользователь видит только результат
выполнения кода, но не сам код. Именно в этом и
заключается различие между серверной и клиентской частями
JavaScript, которое можно заметить только во время
просмотра исходного файла в любом Web-браузере.
Листинг 12.1 содержит исходный код HTML с
внедренным кодом JavaScript. Во время выполнения
приложения (см. листинг 12.2) это именно то, Что будет
лицезреть клиент при просмотре исходного кода в Web-
браузере. (Результат отображения показан на рис. 12.2.)
Несколько позже в главе будет рассматриваться объект
Client. Сейчас достаточно будет отнестись к
выражениям как к свойствам недавно созданного и
определенного объекта.
Листинг 12.1. Внедренный серверный сценарий.
<html>
--:head>
<title>Feedback</title>
< /head»
<body>
<hl>
"Superiffic" Feedback Confirmation
</hl>
<P>
Dear <server>client. firstName</server>,
</p>
<P>
Thank you for submitting feedback about
our product. If you have asked us to
contact you, we will be vising the
following information:
</p>
<blockquote>
<P>
<strong>
E-mail: <server>client.email</server>
</strongXbr>
ШШ&-
Базовое подмножество языки JavaScript
Часть II
<strong>Telephone: <server>client.phone
</server>
</strongXbr>
<strong>FAX: <server>client.fax</server>
</strong>
</p>
</blockquote>
<P>
'If any of this information is incorrect,
please go back to the feedback form and
change it. We thank you for taking the
time to help us be a "superiffic" company.
</p>
<p>
Sincerely,
</P>
<P>
Rupert Mydryl
<br>
Manager, Customer Services
</P>
</body>
</html>
Листинг 1ZZ Результирующий документ,
передаваемый клиенту.
<html>
<head>
<title>Feedback</ti tle>
</head>
<body>
<hl>
"Superiffic" Feedback Confirmation
</hl>
<p>
Dear Charles:
</p>
<P>
Thank you for submitting feedback about
our product. If you have asked us to
contact you, we will be using the
following information:
</p>
<blockquote>
<P>
<strong>
E-mail: chappySsmiles.com
</strongxbr>
<strong>
Telephone: 808-555-1212
</strongXbr>
<strong>
FAX: 808-555-5050
</strong>
</p>
</blockquote>
<P>
If any of this information is incorrect,
please go back to the feedback form and
change it. We thank you for taking the
time to help us be a "superiffic" company.
</P>
<P>
Sincerely,
</p>
<p>
Rupert Mydryl
<br>
Manager, Customer Services
<'P>
</body>
</html>
I "Superiffic" Feedback Confirmation
Thaflky iforilibmiteieieflaback ?*4Mtourproduct IF>~uiiave *Д lustocontact- u. win be' JtheMowing
infrrmatibn:
E-maiI:rbaa|if@snulee.ciuii
Telephone: 808-555-1112
FAX: 0&355-5050
Il'any oFlruj юГогтАопц uiccrrect, please go back to the feedbadcFormand dungeit We thank you for ttang the time
to help ш be а 'fuperflje' company
E.upeittfydryl
iixagtt. Customer Services
& -r ■„ ...: . —*tr.-.
РИСУНОК 12.2 HTML-документ в браузер?
Библиотечные файлы JavaScript
В любой серьезной среде разработки необходимо где-то
размещать общие функции, которые можно вызывать из
различных исходных файлов. Так же как и клиентская
часть, серверная версия JavaScript позволяет размещать
код JavaScript во внешних файлах, имеющих
расширения js.
Внутри библиотечного файла JavaScript должны
находиться функции, но не HTML. Ссылки на эти
функции можно производить внутри HTML-файла. После
компиляции SSJS-приложения компьютер разрешает
все вызовы внешних функций путем просмотра js-фай-
лов, включенных в приложение.
Подготовка приложения
В отличии от клиентской части, процесс разработки
серверной части требует компиляции исходных файлов
в файлы приложений .web. По этой причине
большинство разработок SSJS — это Web-приложения. Далее
поговорим о том, как создавать приложения и запускать
их в Netscape Enterprise Server (NES).
Активизация серверной части JavaScript
Для того чтобы пользователи смогли получить доступ
к приложению, потребуется активизировать серверную
часть в экземпляре Enterprise Server. Для этого
необходимо получить доступ к Enterprise Administration Server
и выбрать серверный экземпляр, в котором и будет
выполняться активизация SSJS. Как только появится
Серверная часть JavaScript
Server Manager для данного экземпляра, выберите
вкладку Programs и шелкните на элементе меню Server Side
JavaScript. Все что потребуется предпринять на этой
странице (см. рис. 12.3) — так это выбрать
соответствующий переключатель для активации SSJS и решить,
требуется ли запрашивать пароль администратора при
доступе к Server-Side JavaScript Application Manager
(весьма неплохая идея). Не забудьте сохранить и
применить произведенные изменения.
После перезапуска экземпляра Enterprise Server, как
того требует Administration Server, доступ к Application
Manager (см. рис. 12.4) можно получить с
использованием показанного ниже URL. www.yourinstance.com
необходимо заменить на соответствующее имя сервера:
http: //www.yourinstance. com/appmgr
Итак, среда Server-Side JavaScript уже запущена,
можно подготовить и запустить свое приложение.
'jffHllini»»EKMpb»itrTH ' W**»aaaa
мЗ
1 .. f* &*r*'.
л :^tittt>. I*P/ kni*-CJl *ЙЙЛЦ»г«Т4ЛлЧчЬ. > 1 , ,,
j «■'"'^pupm гадвл Z!5lS| * Server Manager
!.w^
j; SljilL.
I. ~<jj f Hg 1y»fl
| = f WinCGl
j - nlffffAfy
::': ■... shaUCCd
V pirector-'
1,. и . _.
j"
Е^ПОССШ^ ■„: "^ * и. '■■ * " ' ^ . ' D
д i' «wv^r едя ;&глмсл4и
Act)vetu the Server da Javnscnpt application environment?
Г |*о
f" '
_;
i
t
— 1/
Reijiplra admlnfokralkm ьытоиграмггоп] for Satrvur Sk Javascript Appliuillon iv.ij
Г 1*.
, ".- -s™ - JbdfUM4Llhf*:?'-- .,-,. -,: : =- °7Ы - --
^
РИСУНОК 12.3. Активизация Server-Side JavaScript в Netscape
Enterprise Server 4.
М--Щ-ТГТ*
'!*i'pi V^:i« .'й^~ и*.
SI
Ы, :«*' .Sf
S3
-. . J'VW.fiiWed.
iphei
1
tb)dr>ri
bangman
pacRaP4iL# ,
VJ5matad.ita jj
Ьтк-^
, Server Srfa JavaScript Application Manager
Web 1 « Fadi: dfaetf сарсСлтрЦАфцУаапаае*/ alau^uf 1^щЬлва »*b
Default Page: home btra
biilial I |a: star! bid
BaQt-in Малташ
Datah o^oli [Липа; 1
EalamJ Librariai: Hoar
CErat Ofajart
:e: Client ^odttC
Staaai: At№c
РИСУНОК 12.4. Менеджер приложений Server-Side JavaScript.
Глава 12
Компиляция приложений
После создания исходных файлов для приложения, их
необходимо откомпилировать. Компилятор, входящий
в состав NES, создает из HTML-документа и
библиотечных файлов JavaScript файл .web, содержащий
последовательность байткодов.
Для компиляции приложения потребуется перейти
в командную строку и запустить программу
компилятора JavaScript Application Compiler (jsac). B NES 4.0
этот исполняемый модуль расположен в подкаталоге
bin\https\bin. Вот варианты запуска компилятора:
jsac [-cdv] [-1 кодошаяТаблкиа] [-а версияЯзыха]
-о двоичныйФайл [-i] исходныйФайл1 [-i]
исходныйФайл2. . .
jsac [-cdv] [-а версияЯзыка] -О двоичнийфайл -f
файлВключения
jsac [-cdv] [-а версияЯзыка] -о двоячныйФайл -р
каталог ~f фашВкпючения -г файлРегистрацяиОшибок
Рассмотрим допустимые опции, передаваемые в
командной строке:
-а Версия языка JavaScript, например "1.2".
-с Выполнять только проверку синтаксиса без
генерации файла двоичныйФайл.
-d Активизировать режим отладки.
-f Включение файла, заданного именем файлВклю-
чения.
-h Вывести справочную информацию по опциям
командной строки компилятора.
-i Определить имя исходного файла (исходный-
файл).
-1 Имя набора символов (например, iso-8859-1 или
x-sjis).
-о Определить имя создаваемого файла .web как
двоичныйФайл.
-р Текущий путь при обработке файлов.
-г Перенаправить вывод сообщений об ошибках в
указанный файл (файлРегистрацииОшибок).
-V Компилировать с расширенными сообщениями.
Например, следующее командная строка
компилирует (с расширенным выводом) приложение SSJS в
файл policy .web, используя три исходных
HTML-файла (index.htm, toc.htm, polpage.htm) и два библиотечных
файла JavaScript (jsroutines.js и jsdates.js):
jsac -v -о policy.web index.htm toc.htm
polpage.htm jsroutines.js jsdates.js
СОВЕТ
После активизации Server-Side JavaScript на
Web-сервере, можно осуществлять - даленну! j компиляцию
приложений, выполнив доступ к программе jsacRemote, посту-
ВЦ-
Базовое подмножество языка JavaScript
Часть II
пающей вместе с Ар, 'ic itio Manager. Просто введите
URL в свой экземпляр Enterprise Server и воспользуйтесь
/jsaeremote в качестве пути для доступа к приложению.
инсталляция приложений
Для инсталляции приложения на сервере с
использованием Server-Side JavaScript Application Manager,
щелкните на вкладке Add Application. После выбора этой
вкладки в правом фрейме окна отобразится
HTML-форма, которую потребуется заполнить (см. рис. 12.5).
f '- J isl' ->
I.
V AJ«Mieii i «к tbf/
■ C.t VW*A*£* :
ьь* (ДщвгииМ SsrVfirSldeJev*StriptAop"Cfttior*Managrr
^JdAppltaillnn ^
Add JavaSoft
Voli MJj vmltiz
»r fault VaTu:
Initial. *•«■«:
"nllt-ln Hula
Patflhfuv Canni
|i±«itf-n
~Щ
РИСУНОК 12.5.Добавление приложения.
Заполните форму, основываясь на следующей
информации:
• Name (Имя). Введите имя приложения. Оно
необходимо для доступа к приложению после его
инсталляции. Например, если имя приложения — fireball,
a URL сервера — www.junebug.com, доступ к нему
можно получить так:
http://www.junebug.com/fireball
ПРЕДУПРЕЖДЕНИЕ
Убедитесь, что приложению не присваивается имя,
совпадающее с именем существующего каталога на
сервере. Если совпадение имеет место, клиент не сможет
получить доступ к этому каталогу сервера.
• Web File Path (Путь к .web-файлу). Введите полный
путь и имя файла Web-приложения.
• Default Page (Страница по умолчанию). Введите имя
HTML-файла, который будет служить страницей по
умолчанию для приложения. Страница по
умолчанию отображается, когда клиент, получивший
доступ к приложению, не определяет файл в запросе.
• Initial Page (Начальная страница). Введите имя
HTML-файла, который будет служить начальной
страницей, когда клиент получает доступ к
приложению. Эта информация необязательна.
• Built-in Maximum Database Connections
(Максимальное число встроенных соединений баз данных).
Введите максимальное количество одновременных
соединений, которые допускаются сервером баз
данных, выполняющимся под управлением
операционной системы NY Server.
• External Libraries (Внешние библиотеки). Если
приложение использует внешние библиотеки (например,
библиотеки динамической компоновки, или DLL),
введите здесь полный путь доступа к ним.
• Clienl Object Maintenance (Поддержка объекта
Client). Это поле определяет режим поддержки
постоянства объекта Client. Допустимые трианты
включают: client-cookie, client-url, server-ip, server-
cookie и server-url.
По заполнении информации о приложении,
щелкните на кнопке ОК в нижней части страницы.
Application Manager проверит введенные значения на
предмет наличия ошибок и затем выполнит
инсталляцию приложения на сервере.
После инсталляции потребуется вернуться на
вкладку Applications и убедиться, что ваше приложение в
списке присутствует. Запустите приложение, щелкнув
на Run. Доступ к приложению производится путем
ввода адреса URL, где находится Enterprise Server, и
следующего за этим URL имени приложения,
отделенного наклонно!, чертой вправо. Рассмотрим пример вызова
приложения туАрр:
http: //www.mysite.com/inyApp
ПРИМЕЧАНИЕ
После внесения определенных изменений в i-сходные
тексты приложения и его повторной компиляции, при
помощи Application Manager перезапустите приложение,
чтобы изменения возымели действие.
Исправление ошибок
Теперь, когда запуск произведен, следует получить
доступ к приложению, дабы убедиться, что все работает
предсказуемым образом. Если это действительно так,
можно разрешать доступ к приложению и другим
пользователям. Если же возникают какие-то проблемы,
потребуется запустить отладчик приложений и
выяснить, в чем же дело.
Общая отладка
При работе с клиентской и серверной частями JavaScript,
можно прийти в некоторое замешательство, поскольку
Серверная часть JavaScript
■Я71
Глава 12
по идее отлаживать необходимо как серверную, так у\
клиентскую часть. Внутри Application Manager
существует отладчик, доступ к которому можно Получить
путем выбора приложения из списка и щелчка на
кнопке Debug. В результате открывается новое окно
браузера с фреймом (или окном) трассировки, как показано
на рис. 12.6. Окно трассировки отображает текущие
объекты и их свойства. Также можно прибегнуть к
услугам встроенной функции debug(), действующей
подобно функции write(), для вывода в окно трассировки1
результатов вычисления JavaScript-выражения.
1 ■-'''-' з •»
V t IHtmM&ULxfe ГН*У
frnnhiW
>гагвд rN|UNi ubjixl.
v^-15?ti.0T
p - 'HTTP/l U
ч-ш = -M..cJVt US |eu|
t niMT t J4 «]■
Ln VisarftaneicT
ceiu^liK- "bfc-e"
рт одоДОагав — "-wedd"
apfLcWi-nlAlii ""
WSlV iF = "ОЪГ
InUMlpnrJMinbKii
ЬиЫ server nb^ct
tail—fuciftufl
-»!.
i
ВЛ,
>
Seeih H«U««u» Secuiv She
4<Ь< at<14>AW»MJW'r'ilk>4*,*r ржАчиПИ
Rf T COMIMLA Г
11 lYmUinrfaiH* output
ftdji ta ■pplbatiio. unctaif:
IT« erWiMH-j
<>:и |)ita Лр.Лсн\кн1
'стря* *i-J «Vr -r
_£JiT* »
■
E
>«i**«f
РИСУНОК 12.6. Опшадчик Server-Side JavaScript Application
Manager.
Ошибки, связанные с базами данных
Большинство методов, используемых для
взаимодействия с базами данных, возвращают код состояния. Код
состояния представляет собой целое число от 0 до 27.
Код 0 уведомляет о .ом, что команда выполнена
успешно, в то время как другие значения, перечисленные в
табл. 12.1, указывают на ошибки, возникающие на
сервере.
Объект базы данных имеет четыре отладочных
метода, которые возвращают код ошибки и
соответствующее сообщение от сервера баз данных. Значения того,
что возвращается, зависит от сервера баз данных. В табл.
12.2—12.5 перечислены возвращаемые значения для
четырех поддерживаемых SSJS баз данных SQL.
Таблица 12.1. Коды состояния баз данных.
Код
состояния
Описание
10
L1
12
13
14
15
16
17
I?
19
20
21
22
23
24
25
26
27
Ошибок нет.
Недостаточно памяти.
Объект не инициализирован.
Ошибка преобразования типов.
Незарегистрированная база данных.
Ошибка, выданная сервером.
Сообщениеотсервера.
Ошибка от библиотеки поставщика.
Потеря связи.
Операция считывания завершена.
Неправильное использование объекта.
Столбец не существует.
Неправильное размещение внутри объекта
(ошибка выхода за границы).
Неподдерживаемая возможность.
Нулевая ссылка.
Объект базы данных не найден.
Отсутствует необходимая информация.
Объект не поддерживает множественное
чтение.
Объект не поддерживаетудаление.
Объект не поддерживает вставку.
Объект не поддерживает обновление.
Объект не поддерживает обновление.
Объект не может поддерживать индексы.
Объект не может быть удален.
Неправильное подключение.
Объекте поддерживает привилегии.
Объект не поддерживает курсоры.
Открытие невозможно.
Таблица 12.2. Библиотека ошибок производителя Informix (код состояния 7).
Метод
majorErrorMessage()
mtnorErrorMessage()
inajorEiTCirCode()
minorErrorCode()
Что возвращает
Vendor Library Error: errorMsg (Ошибка библиотеки производителя: errorMsg) (errorMsg — это
текст от Informix).
ISAM Error: errorMsg (Ошибка ISAM: errorMsg) (errovMs^— текст кода ошибки ISAM от Informix
либо пустая строка (""), если ошибки ISAM нет).
Код ош ибки Informix.
Код ошибки ISAM либо нуль, если ошибки нет.
Базовое подмножество языки JavaScript
Часть
Таблица 12.3. Ошибки сервера Oracle (код состояния 5).
Метод
Что возвращает
rnajorErrorMessage()
rninorErrorMessage()
majorErrorCodeO
mtnorErrorCode()
Server Error: errorMsa (Ошибка сервера: errorMsg) (errorMsg — трансляция кода возврата Oracle).
Имя сервера Oracle.
Воз вращает код, переданный OracleCall-level Interface (OCI)
Код ошибки операционной системы, переданный OCI.
Таблица 12.4. Библиотека ошибок производителя Sybase (код состояния 7).
Метод
Что возвращает
majorErrorMessage()
minorErrorMessage()
majorErrorCode()
minorErrorCode()
Vendor Library Error: errorMsg (Ошибка библиотеки производителя: errorMsg) (errorMsg это
текстошибки, полученный от ОВ-Library).
Текст ошибки операционной системы (в соответствие со спецификацией библиотеки DB-
Library).
Номер ошибки DB-Library.
Степень серьезности ошибки (в соответствие со спецификацией библиотеки DB-Library).
Таблица 12.5. Ошибки сервера Sybase (код состояния 5).
Метод
Что возвращает
majorErrorMessage()
minorErrorMessage()
majorErrorCodeO
minorErrorCode()
Server Error: errorMsg (Ошибка сервера: errorMsg) (errorMsg — текст, возращенный сервером
SQL). Если степень серьезности ошибки и номер сообщения равны 0, возвращается только
текст сообщения.
Имя сервера SQL.
Номер сообщения сервера SQL.
Уровень серьезности (в соответствие со спецификацией сервера SQL).
Базовые серверные объекты JavaScript
Теперь, когда имеется представление о работе модели
клиент/сервер в пространстве Internet и особенностях
функционирования серверной части JavaScript, можно
перейти к рассмотрению объектов, доступных при
построении приложений (рис. 12.7). Основная цель
серверных объектов заключается в управлении
постоянными данными. Внутри Web-среды, не поддерживающей
концепцию состояний, эти объекты могут постоянно
хранить различные типы данных для разных запросов
одного и того же клиента, для запросов множества
клиентов и даже для различных приложениях SSJS.
Объект Server
Объект Server используется для управления
глобальными данными о самом сервере. Этот объект всегда
присутствует на сервере SSJS и создается при его запуске.
Он разрушается при завершении сервера. Встроенные
методы и свойства объекта Server перечислены в табл.
12.6.
Проект
(project)
Клиент
(client}
Запрос
(request)
Сервер
(server)
Проект
(project)
Клиент
(client)
^ЕЗ В
Запрос
(request)
Проект
[project)
Клиент
(client)
Запрос
(request)
РИСУНОК 12.7. Структура базовых серверных объектов
JavaScript.
Серверна часть JavaScript
Глава 12
Таблица 12.6. Встроенные методы и свойства объекта Server.
Тип
Метод
Свойство
Элемент
lock()
unlock()
host
hostname
jsVersion
port
protocol
Описание
Блокирует код во время выполнения манипуляций сданными с одним потоком.
Освобождение ранее заблокированного кода.
Строка, определяющая имя сервера, субдомена и домена\Л/еЬ-сервера.
Полное имя сервера (включая порт); то же самое, что и объединение свойств host и
port.
Серверная версия JavaScript и платформа.
Номер порта используемого сервером.
Используемый Internet-протокол, присутствующий в адресе Ш1_до первого двоеточия.
Для того чтобы глубже понять работу методов 1оск()
и unlock(), изучите следующий раздел, посвященный
объекту Project. Методы этого объекта действуют
совершенно аналогично.
Объект Project
Объект Project разработан с целью поддержки
информации о приложениях на клиентской части и
обеспечения постоянства до тех пор, пока приложение на
сервере не будет закрыто. Данный объект не содержит
свойств, но только два метода, описанные в табл. 12.7.
Таблица 12.7. Встроенные методы объекта
Project.
Метод Описание
lock() Блокирует код во время выполнения
манипуляций с данными, к которым
подключен только один поток.
unlock() Освобождает ранее заблокированный код.
Благодаря многопользовательской природе Web, к
приложению SSJS могут одновременно получить
доступ сотни и тысячи пользователей. В результате,
вполне вероятна ситуация, когда большое число
пользователей одновременно пытаются выполнить чтение или
запись в объект Project. SSJS обеспечивает скрытое
блокирование на весь период чтения и записи значения
свойства.
ПРИМЕЧАНИЕ
Начиная с Netscape Enterprise Server 4.01, для
объектов Project и Server скрытое блокирование не
реализуется, как это имело место в предыдущих версиях.
Иногда требуется явная блокировка. Примером
может послужить установка начального значения для
увеличивающегося номера, скажем, накладной, которое
хранится в свойстве. Для это необходимо прочитать
старое значение, прибавить к нему какую-то величину
и присвоить новое значение свойству.
Скрытая блокировка в данном случае не
срабатывает, однако, для достижения требуемой цели можно
прибегнуть к услугам метода 1оск() объекта Project. Метод
lock() обеспечивает явную блокировку объекта вплоть
до вызова метода unlock(). Например, для установки
нового номера накладной можно использовать такой код:
project.lock();
project. invoiceNum += 1;
pro ject. unlock {) ;
Если в этот момент доступ к объекту Project
пытается получить другой клиент, ему придется ожидать
завершения текущего процесса.
ПРИМЕЧАНИЕ
SSJS гарантирует отсутствие внутри экземпляра Project
взаимной блокировки (или коллизии), когда два объекта
блокируют базу данных. Это достигается
автоматическим освобождением всех блокировок после отработки
клиентского запроса.
Объект Client
Как было показано, объекты Request существуют
только в определенные моменты времени. Поскольку
взаимодействие клиента с серверным приложением
предполагает наличие более одного запроса, для поддержки
состояния в течение серии запросов используется
объект Client. Новые экземпляры объекта Client
создаются каждый раз, когда новый клиент получает доступ
к приложению. Подобно Project, объект Client не
имеет свойств, но лишь только два метода, краткое
описание которых приводится в табл. 12.8.
Таблица 12.8. Встроенные методы объекта Client.
Метод
Описание
destroyO Метод явно разрушает объект и все
свойства, поддерживаемые объектом.
expirationO Метод позволяет изменять 10-миН'тнс ■ по
умолчанию истечение времени действия
объектов Client на другой промежуток
времени.
Базовое подмножество языка JavaScript
' Часть II
Объект Client разработан таким образом, чтобы
саморазрушаться по прошествии определенного
промежутка времени. Основная причина заключается в том,
что требуется поддерживать состояние в клиентских
запросах, однако совершенно невозможно определить,
какой запрос является последним. Поскольку никто не
желает оставлять в памяти множество неиспользованных
объектов Client, необходимо автоматически разрушать
объект по истечению определенного промежутка
времени. Время жизни объекта по умолчанию — 10 минут.
Это значение можно изменить при помощи метода
expiration().
Например, для увеличения периода времени до 20
минут потребуется записать следующий код:
client.expiration(1200);
Для изменения упомянутого времени метод expiration()
должен вызываться на каждой странице приложения.
Страницы, не имеющие обращения к expiration(), будут
использовать значение времени по умолчанию.
Объект Request
Экземпляр этого объекта создается каждый раз, когда
сервер получает новый запрос. Объект Request содержит
данные текущего запроса клиента. Он обладает
множеством свойств, перечисленных в табл. 12.9.
Как упоминалось в табл. 12.9, объект Request также
имеет определенные свойства для каждого элемента
ввода переданной HTML-формы — formkey. Например,
пользователь передает форму, описание которой
приводится в листинге 12.3.
Когда на основе отправленной формы создается объект
Request, с ним ассоциируются Следующие свойства:
request.FullName
request.Title
request.Organization
request.Email
Таблица 12.9. Встроенные свойства объекта Request.
Л истин г 12.3. Регистра цион ная форма.
<html>
<head>
<title>Per4CTpauHH</title>
</head>
<body"^
<hl>F.egistration</hl>
<hr" ■
<form action="/ss js/objects" method="POST">
<P>
Please provide the following contact
information:
</p>
<em>Name</em>
<inpun type="text" size="4T"
maxlength="256" name="FullName 'X->r>
<em>Ti tle</em>
<input type="text" size="35"
maxlength="256" name="Title"Xbr>
<em>Organization</em>
<input type="text" size="35" maxleng h="256"
name="Organization"Xbr>
<em>E-mail</em>
<input type="text" size="25"
maxlength="256" name="Emaxl"Xbr>
<p>
<input type="submit" value="Submic">
<input type="reset" value="Reset'■>
</p>
</form>
</body" ■
</html>
Единственный элемент формы, который
обрабатывается специальным образом, — это объект Select с
возможностью выбора множества значений (в <select>
параметр multiple находится в установленном
состоянии). В данной ситуации имеет смысл
воспользоваться встроенными функциями getOptionVл1ие() и
getOptionValueCount(), организовав проход по
множеству выбранных значений объекта Select. Функция
getOptionValue() определяется следующим образом:
getOptionValue {name, index)
Свойство
Описание
agent
authtype
auth_user
formKey
imageX
imageY
ip
method
protocol
query
Информация о клиентском программном обеспечении (т.е. название и версия).
Тип авторизации; соответствует переменной AUTH_TYPE среды CGI.
Имя локального HTTP-пользователя браузера, если активизирована авторизация доступа HTTP.
Соответствует переменной REMOTE_USER среды CGI.
Представляет любой ключ формы, отправленный браузером.
Горизонтальная координата курсора мыши над картой изображения.
Вертикальная координата курсора мыши над картой изображения.
IP-адрес клиента.
Метод HTTP (обычно GET или POST).
Уровень HTTP-протокола клиента.
Содержит информацию, передаваемую в URL после знака ?. Соответствует переменной
QUERY_STRING среды CGI.
Серверная часть JavaScript
Глава 12
Параметр пате — это имя объекта Select, а параметр
index — индекс массива вариантов. Обратите внимание
на список вариантов в объекте Select, определенных в
листинге 12.4 и показанных на рис. 12.8. После
передачи формы на сервер, запрашивается код из листинга
12.5. При помощи знакомого цикла for можно пройтись
по всем выбранным элементам. На рис. 12.9 показана
результирующая HTML-форма, динамически
сгенерированная обращениями к write ().
Листинг 12.4. Форма для отбора песен.
<html>
<head>
<title>Song-Picker</title>
</head>
<body>
<h2>Pick Your Favorite Songs From the List:
</h2>
<form action="topsongs.htm" method="post"
name="songSelect">
<select name=,lsongs" size="10" multiple>
<optton>1979 (Smashing Pumpkins) </option>
<option>Breakfast at Tiffany's (Deep
wBlue Something) </option>
<option>Don' t Cry (Seal)</option>
<option>Flood (Jars of Clay)</option>
</select>
<input type=" submit" value="Submit">
</form>
</body>
</html>
С Sotqj Hckai - Het eape
■(' J£~Ba#u&i~'jgi.... tac» p/Jtocahiit/tm^Kka *|ВД~ШчП
HSE3
s
.«*!■=:
Pick Your Favorite Songs From the List:
1979 (Smasning Pumpkins) _^J-
BreaHisI at Tiffany's (Deep Blue Something)
Dor Cry (Seal)
Flo< (Jars of Clay)
jj *£JjbirC|
^|= ■ ■■=.= ■• бйи.*Ч&* ■'■:*■■■- '■'J
''
РИСУНОК 12.8. Список с возможностью множественного выбора
перед передачей формы.
Листинг 1Z5. Код со стороны сервера для
обработки списка выбранных песен.
<html>
<head>
<title>Results Page</title>
</head>
<body>
<server>
write ("<h2>The songs selected included: </h2>") ,
write("<ul>");
var size = getOptionValueCount '"songs") ;
for (var i = O; i < size; i++) (
write ("<li>" + getOptionValue{"songs", i)
"</li>\n") ;
}
write("</ul>") ;
</server>
</body>
</html>
HDD
5$ Rati*1* Pflflo. Helicep»
■S-. """3. ■?& л- £l s:. dS
., 1ОДс„ =*5вЫи1 Нота jc«th ИМия(* я* ь Seculy .„-„.
L^_ " -'i ^—^ rr- T- ^' ■ ^^
The songs selected included:
• Bieakfast at Tiffany's (Deep Bfue." >methiEig)
• Flood (Jars of, ay)
iDoamirtrte-l'-''"*
РИСУНОК 12.9.Динамически сгенерированный документ.
Объект Lock
Данный объект используется для обеспечения
блокировок других объектов. Как упоминалось ранее, этот
процесс обеспечивает защиту доступа к данным со стороны
определенных экземпляров в случае, когда
предполагается только единственный поток операций. Наглядный
пример тому — счетчик. К его услугам прибегают,
скажем, тогда, когда необходимо посчитать количество
клиентов или запросов, пришедших за фиксированный
промежуток времени. У объекта есть три метода и
единственное свойство, перечисленные в табл. 12.10.
Объект File
Вплоть до сего момента рассматривались только своего
рода "автоматические" объекты. Под "автоматическими"
объектами подразумеваются только такие, к созданию
которых в среде SSJS приводит запуск самого сервера,
получение запросов, поддержка проектов и обеспечение
блокировок. Первый объект, выходящий за пределы
очерченной области, — это объект File.
Базовое подмножество зык JavaScript
Часть II
Объект File позволяет считывать и записывать
данные в файл, хранящийся в файловой системе сервера.
Команды для чтения и записи в файл относятся к
стандартным функциям большинства языков
программирования. Если доводилось использовать другие языки
программирования, особых неудобств испытывать не
придется. Данный объект имеет всего одно свойство и
несколько методов, краткое описание которых
приводится в табл. 12.11.
Новые экземпляры объекта File создаются при
помощи оператора new. Рассмотрим один пример:
var fileObject = new File ("path") ;
Поскольку объект File имеет дело с файловой
системой сервера, параметр path должен содержать полный
путь к файлу, но не URL. После создания экземпляра
объекта, его потребуется открыть для подготовки либо
к считыванию, либо к записи, вызвав метод ореп(). В
этот метод передается параметр mode, который может
принимать одно из значений, перечисленных в табл. 12.12.
Возможно, вы обратили внимание на
необязательный параметр Ь. используемый для открытия файлов в
двоичном режиме только в среде операционной системы
Windows. После завершения работы с открыты файлом
потребуется вызвать метод close() для его закрытия.
СОВЕТ
Несмотря на то что объект File не имеет методэв lock()
и unlock!), возможности блокировки оказываются
доступными через объекты Project и Server.
Листинг 12.6 демонстрирует один из споюбов
использования файлов. Приведенный код предназначен
для регистрации пользователей, передавших форму. При
каждой передаче формы серверный сценарий
открывает файл contlog.txt и записывает в него содержимое всех
полей, используя запятые в качестве разделителей.
Таблица 12.10 Встроенные методы и свойства объекта Lock.
Тип
Метод
Описание
Проверяет допустимость конструкции объекта Lock.
Блокирует код на период выполнения манипуляций с данными, которые должны
осуществляться в эксклюзивном режиме.
Освобождает ранее заблокированный код.
Позволяет добавлять новые методы и свойства в объект Lock.
Метод
Свойство
isValid()
lock()
unlock()
prototype
Таблица 12.11. Свойства и методы объекта File.
Тип
Элемент
Описание
Метод byteToStringO Преобразует число, представленное в одном байте, в строку.
clearError() Очищает состояние ошибки для файла.
close() Закрывает файл.
eof() Определяет, находится ли указатель в конце файла.
error() Возвращает текущее состояние ошибки.
exists() Определяет, существует ли определенный файл.
flush() Записывает в файл содержимое внутреннего буфера.
getl_ength() Выдает длину файла.
getPosition() Выдает текущую позицию указателя в файле.
ореп() Открывает файл для доступа.
read() Считывает данные из файла в строку.
readByte() Считывает заданное количество байтов и возвращает их значение.
readln() Считывает текущую строку файла в строковую переменную.
setPosition() Устанавливает текущую позицию в файле.
stringToByte() Преобразует первый число, находящееся в строке, в значение, представленное байтом.
write() Записывает данные в файл.
writeByte() Записывает один байт данных в файл.
writeln() Записывает данные в файл с добавлением кода возврата каретки.
Свойство prototype Позволяет добавлять методы и свойства в объект File.
Серверная часть JavaScript
Глава 12
Таблица 12.12. Параметры метода ореп() для объекта File.
Mode Описание
а[Ь] Открывает существующий файл для добавления нового текста. Если файл не существует, он создается.
а+[Ь] Открывает существующий файл для чтения и записи. Если файл не существует, возвращается false.
Указатель устанавливается в конец файла.
r[b] Открывает существующий файл для чтения. Если файл не существует, возвращается false.
r+[b] Открывает существующий файл для чтения и записи. Если файл не существует, возвращается false.
Указатель устанавливается в начало файла.
w[b] Открывает новый файл для записи. Если файл уже существует, происходит его перезапись.
w+[b] Открывает новый файл для чтения и записи. Если файл уже существует, происходит его перезапись.
Листинг 12.6. Работа с файлами через объект File.
<html>
<head>
<ti le>PerHCTpauKH</title>
</head>
<body>
<server>
if (request. FullName \— null) (
cLog = new File ("d:/netscape/suitespot/server4/logs/contlog.txt") ;
proj ect.lock О ;
if (cLog.open("a") = true) (
cLog.write {request. FullName + ",");
cLog. write (request. Title + ",");
cLog.write (request.Organization + ",")
cLog.write (request.Email + ",");
cLog.close();
)
pro j ect. unlock () ,-
)
</server>
<hl>Registration</hl>
<hr>
<form action="/ssjs/objects" method="POST">
<P>
Please provide the following contact information:
</p>
<em>Name</em>
<ill|>nl type=text size=35 maxlength=256 name="FullName"xbr>
<em>Title</em>
<iii|>nl type=text size=35 maxlength=256 name="Title"xbr>
<em>Orgarч zation< /em>
<input type=text size=35 maxlength=256 name="Organization"xbr>
<em>E-mail</em>
<input type=text size=25 maxlength=256 name="Email"Xbr>
<P>
<input type=submit value=" Submit">
<input type=reset value="Reset">
</p>
</form>
</body>
</html>
ОбъеКТ SendMail бы пользователям возможности по отправке почтовых
сообщений. Методы и свойства SendMail перечислены
Еще один весьма полезный объект SendMail позволяет в табл. 12.13.
отправлять сообщения через почтовый сервер. Как и Подобно объекту File, SendMail создается с исполъ-
предголагалось, при помощи этого объекта можно со- зованием оператора new:
здавагь страницы приложения, которые предоставляли
var myMessage = new SendMail () ,
Базовое подмножество языка JavaScript
Часть II
па
Таблица 12.13. Методы и свойства объекта Send Mail.
Тип
Элемент
Описание
Метод errorCodeQ Возвращает целочисленное представление кода ошибки, возникшей во время отправки
сообщения.
errorMessage() Возвращает строку, связанную с кодом ошибки, возникшей во время отправки
сообщения.
send() Отправляет электронную почту.
Свойство Вес Разделенный запятыми список адресатов, получаемых скрытую точную копию
сообщения.
Body Основной текст сообщения.
Сс Разделенный запятыми список адресатов, явно получаемых точную копию ообцения.
Errorsto Имя пользователя, которому будут адресоваться сообщения об ошибках при отг оавке.
Значение по умолчанию совпадает со значением свойства From.
From Обязательное имя отправителя сообщения.
Organization Название компании-отправителя или любая информация о ней.
prototype Позволяет создавать новые свойства и методы для объекта SendMail.
Replyto Имя пользователя, используемое вместо свойства From в качестве адреса, куда будет
отправляться ответное сообщение.
Smtpserver Имя хоста или IP-адрес SMTP.
Subject Предмет сообщения.
То Список получателей сообщения, разделенный запятыми
Объекты баз данных
Одно из преимуществ серверной части JavaScript
заключается в возможности взаимодействия с базами данных.
Как упоминалось ранее, LiveWire вызывает SSJS, для
чего, собственно, последний и используется. В
настоящий момент LiveWire относится к функциональным
средствам доступа к базам данных в среде SSJS. Чуть
ниже будут рассматриваться базовые объекты,
обеспечивающие упомянутый доступ.
Объект Database
Объект Database инкапсулирует всю функциональность
взаимодействия с реляционными базами данных. У
данного объекта определено всего лишь одно свойство, в то
Таблица 12.14. Методы и свойства объекта Database.
время как большинство действий реализуется через
методы. Таблипа 12.14 содержит- краткие описания всех
методов. Если до этого приходилось работать с базами
данных в других языках программирования, несложно
заметить, что JavaScript обладает практически всеми
средствами взаимодействия с базами данных.
Объект DbPool
Объект DbPool, появившийся в Netscape Enterprise
Server 3, очень напоминает объект Database с тем лишь
отличием, что этот объект представляет целиком весь
пул подключений к базе данных. После создания
такого пула, из него можно вытаскивать необходимые
соединения. В табл. 12.15 представлены методы и
свойство данного объекта.
Тип
Метод
Элемент
Описание
beginTransaction()
commitTransaction()
connectQ
oonnected()
cursor()
disconnect)
executeO
majorErrorCode()
Начинает транзакцию SQL.
Выполняет текущую транзакцию SQL.
Подключает приложение к заданной базе данных.
Возвращает true, если связь между приложением и базой данных установлена.
Создает объект Cursor для заданной SQL-оператора SELECT.
Разрывает связь с базой данных.
Выполняет заданный оператор SQL. Используется для операторов SQL, которые не
возвращают курсор.
Главный код ошибки, возвращаемый сервером баз данных или ODBC.
Тип
Серверная часть JavaScript
Глава 12
-ГИД
Элемент
Описание
Свойство
majorErrorMessage()
minorErrorCode()
minorErTorMessage()
rollbackTransaction()
SQLTable()
stored Proc()
stored ProcArgs()
toStringO
prototype
Сообщение, соответствующее главному коду ошибки, возвращаемое сервером баз
данных или ODBC.
Вторичный код ошибки, возвращаемый библиотекой поставщика.
Сообщение, соответствующее вторичному коду ошибки, возвращаемое библиотекой
поставщика.
Выполняет откат текущей транзакции SQL.
Генерирует HTML-таблииу для вывода на экран результатов запроса SELECT.
Создает объект Stproc и запускает выбранную хранимую процедуру.
Создает прототип хранимой процедуры DB2, ODBC или Sybase.
Возвращает строку, представляющую заданный объект.
Позволяет добавлять методы и свойства к экземплярам объектов Database.
Таблица 12.15. Методы и свойства объекта DbPool.
Тип
Элемент
Описание
Метод
Свойстзо
connect()
connected()
connecti on()
DbPool()
disconnect)
imajorErrorCodeO
majorErrorMessage()
minorErrorCode()
minorErrorMessage()
storedProcArgs()
toStringO
prototype
Подключает пул приложения к заданной базе данных.
Возвращает true, если пул подключен к базе данных.
Захватывает доступное соединение из пула.
Создает пул соединений с базами данных.
Закрывает все соединения с базами данных в пуле.
Главный код ошибки, возвращаемый сервером баз данных или ODBC.
Сообщение, соответствующее главному коду ошибки, возвращаемое сервером баз
данных или ODBC.
Вторичный код ошибки, возвращаемый библиотекой поставщика.
Сообщение, соответствующее вторичному коду ошибки, возвращаемое библиотекой
поставщика.
Создает прототип хранимой процедуры DB2, ODBC или Sybase.
Возвращает строку, представляющую заданный объект.
Позволяет добавлять методы и свойства к экземплярам объектов DbPool.
Объект Connection
Объект Connection появился в Netscape Enterprise Server
3 и представляет собой связь, взятую из резерва связей
с базами данных. Создается этот объект с помощью
вызова метода DbPool.connection (). В таблице 12.16
представлены методы и свойство данного объекта.
Объект Cursor
Данный объект создается за счет вызова методов
Connection.cursor() или database.cursor(). Поскольку
запрос к базе данных требует вернуть курсор, этот
объект содержит ссылку на строки, возвращаемые в
результате выполнения запроса. В таблицу 12.17 сведены
методы и свойства этого объекта.
Таблица 12.16. Методы и свойство объекта Connection.
Тип
Элемент
Описание
Метод beginTransaction()
commitTransaction()
connectedQ
cursor()
execute()
majorErrorCode()
Начинает транзакцию SQL.
Выполняет текущую транзакцию SQL.
Возвращает true, если связь между приложением и базой данных установлена.
Создает объект Cursor для заданной SQL-оператора SELECT.
Выполняет заданный оператор SQL Используется для операторов SQL, которые не
возвращают курсор.
Главный код ошибки, возвращаемый сервером баз данных или ODBC.
СИ
Тип
Базовое подмножество языка JavaScript
Часть II
Элемент Описание
Свойство
majorErrorMessageO
minorErrorCode()
minorErrorMessage()
release ()
rollbackTransaction()
SQLTable()
storedProoQ
toStringO
prototype
Сообщение, соответствующее главному коду ошибки, возвращаемое сервером баз
данных или ODBC.
Вторичный код ошибки, возвращаемый библиотекой поставщика.
Сообщение, соответствующее вторичному коду ошибки, возвращаемое библиотекой
поставщика.
Освобождает соединение, возвращая его в пул.
Выполняет откат текущей транзакции SQL
Генерирует HTML-таблицу для вывода на экран результатов запроса SELECT.
Создает объект Stproc и запускает выбранную хранимую процедуру.
Возвращает строку, представляющую заданный объект.
Позволяет добавлять методы и свойства к экземплярам объектов Database.
Таблица 12.17. Методы и свойства объекта Cursor.
Тип
Элемент
Описание
Метод closed Закрывает курсор и освобождает занимаемую им память.
columnName() Принимает проиндексированную позицию столбца и возвращает соответствующее имя
столбца.
columns() Возвращает количество столбцов в рамках курсора.
deleteRowQ Удаляет текущую строкутаблицы.
insertRowO Вставляет новую строку в таблицу.
next() Перемещает экземпляр объекта Cursor из текущей строки на следующую.
updateRowQ Обновляет текущую строку указанной таблицы.
Свойство cdumnName Представляет имена столбцов, возвращаемых курсором.
prototype Позволяет добавлять методы и свойства к экземплярам объекта Cursor.
Объект Resultset
Данный объект (результирующий набор) создается
после вызова метода Stproc.resultSetO- В нем сохраняются
результаты выполнения хранимой процедуры. В случае
выполнения процедур в базах данных DB2, Oracle,
Sybase и ODBC объект Resultset возвращается для
каждого оператора SELECT. В сервере Infomix будет
возвращаться только один объект Resultset. В табл. 12.18
перечислены методы и свойства данного объекта.
Объект Stproc
Объект Stproc создается в результате вызова методов
Connection.storedProc() или database.storedProc() и вы-
Таблица 12.18. Методы и свойство объекта Resultset.
полняет хранимую процедуру в базе данных, к которой
получен доступ. Убедитесь, что вызов метод.1 close()
производится по завершении выполнения процедуры. В
табл. 12.19 перечислены методы и свойства объекта.
Объект BLOB
Последний базовый объект, достойный рассмотрения,
обеспечивает поддержку работы с Binary Large Objects
(большие двоичные объекты, BLOB) в базе данных.
Объект не обладает свойствами, лишь только двумя
методами (см. табл. 12.20).
Тип
Элемент
Описание
Метод close() Закрывает результирующий набор и освобождает занимаемую им память.
columnName() Принимает проиндексированную позицию столбца и возвращает соответствующее имя
столбца.
columns() Возвращает количество столбцов в результирующем наборе.
next() Перемещает экземпляр объекта Resultset из текущей строки на следующую.
Свойство prototype Позволяет добавлять методы и свойства к экземплярам объекта Resultset.
Серверная часть JavaScript
Глава 12
-ЮТ
Таблица 12.19. Методы и свойства объекта Stproc.
Тип
Элемент
Описание
Метод close() Закрывает экземпляр хранимой процедуры, освобождая занимаемую им память.
outParamCountQ Возвращает количество выходных параметров процедуры.
outParameters() Возвращает значение определенного выходного параметра.
resuItSet() Создает новый объект Resultset.
returnValue() Выдает значение возврата хранимой процедуры.
Свойство prototype Позволяет добавлять методы и свойства к экземплярам объекта Stproc.
Таблица 12.20. Методы объекта BLOB.
Метод
Описание
IbloblmageO Извлекает из базы данных и отображает экземпляр данных типа BLOB.
blobLink() Извлекает из базы данных и отображает HTML-ссылку, которая адресуется на экземпляр данных типа BLOB.
Резюме
Перед тем как приступить к созданию
Internet-приложений, следует разобраться в их архитектуре.
Предварительный доступ к серверу окажет существенную
помощь в выборе метода разработки приложений типа
клиент/сервер. Функциональность JavaScript вместе с
механизмом баз данных позволяет перевести
приложения на новый качественный уровень.
Отдавая предпочтение клиентской или серверной
обработке, следует принять во внимание быстродействие
и функциональность приложений JavaScript. He
забывайте, что двух- и и-уровневая модели обладают как
достоинствами, так и недостатками, и присущими им
степенью сложности и сопровождения.
Данная глава продемонстрировала, что в JavaScript
важна не только клиентская, но и серверная часть. С
использованием Netscape Server-Side JavaScript этот
язык сценариев можно применить даже для создания
целых Web-приложений.
Использование DOM
■
i
1
1
■
1
1
1
1
I
1
В ЭТОЙ ЧАСТИ
13. Основы объектной модели документа
(DOM)
14. Управление событиями
15. Объект Window
16. Объект Document
17. Объекты Form
18. Объекты Frame
19. Другие DOM-объекты
Основы объектной модели
документа (DOM)
В ЭТОЙ ГЛАВЕ
■ Понятие объектной модели документа
■ Навигация по таблице
■ Управление документами
■ Навигация по документу
В этой главе приводятся начальные понятия,
касающиеся объектной модели документа (Document Object
Model — DOM) и ее назначения, характеристик,
объектов и некоторых важных методов и свойств. Конечно,
здесь рассматриваются только основные принципы,
например, навигация по документам, а также их
визуализация в виде деревьев DOM. В данной главе будут
показаны важные методы DOM, которые работают
непосредственно с деревьями, хотя более детальные
пояснения будут даны в главе 19, где DOM-модель
рассматривается с точки зрения JavaScript.
Понятие объектной модели документа
Ключевые успехи Web помогают решить давно стоящие
проблемы. Например, Java обеспечивает путь
разработки нс.»ависимых от платформы прикладных
Web-приложений с помощью аплетов, тогда как DOM-модель
постепенно решает другую довольно старую (хотя и не
столь важную) проблему создания JavaScript-сценариев
и программ на Java, переносимых в контексте
Web-браузеров. Это достигается за счет использования
стандартных прикладныхпрограммныхинтерфейсов (application
programming interfaces — API), которые входят в язык
определения интерфейсов (Interface Definition Language
— IDL), созданный Группой управления объектами
(Object Management Group — OMG), и поэтому могут
использоваться любым IDL-совместимым языком.
Коллективный DOM API можно считать методом
стандартизации объектов в браузерах при распространении
HTML- и XML-документов. Web-браузеры становятся
DOM-совместимыми, причем этот процесс идет
быстрыми темпами.
О DOM-модели, фактически, можно сказать
немногое. Она просто определяет логическую и
стандартизированную структуру документа. Это дает возможность
формировать, редактировать и просматривать элементы
и содержимое в HTML- или XML-документах.
Структура DOM — это всего лишь объектная иерархия,
сопоставимая с иерархией в JavaScript или любом другом
основанном на объектах языке. Различие в том, что
DOM-модель имеет полезный API, который является
нейтральным языком и определяет стандартный набор
интерфейсов. Это не означает, что все прикладные
программы DOM будут основаны на одних и тех же
объектах; они должны определять собственные интерфейсы и
объекты. Это возможно осуществить путем настройки
приложения так, чтобы оно, например, стало
DOM-совместимым.
РЕСУРС
По адресу www.w3.org/TR/lVVV/CR-DOM-Level-2-
19991210 находится "W3C Document Object Model
(DOM) Level 2 Specification". Более ранняя
спецификация уровня Level 1 также находится на этом сайте.
Информация, содержащаяся в спецификации, не
передается непосредственно в JavaScript или другой
ЕСМА-совместимый язык создания сценариев.
Приложение Е спецификации показывает привязку к
соответствующему ECMAScript языку. В Web появилось
большое количество учебников по DOM и множество
сопроводительных статей и документов.
От DHTML к DOM
Приведение Web-страниц к объектной модели имеет
много стадий, но самая существенная из них — DHTML,
который сом по себе является довольно незначащим по
сравнению с DOM. Это потому, что DOM —
стандартизированная объектная модель, которую
Web-разработчики ждали очень долго. Например, если Web-разработчик
должен будет модифицировать или настраивать Web-
1ЕЯ-
Использование DOM
Часть III
страницу с помощью объектной модели DHTML, ему
в качестве руководства потребуется значительный объем
информации. Причина этому — огромное число HTML-
дескрипторов, свойств, методов и событий. DHTML
действительно не больше, чем средства, позволяющие
изменять и управлять объектами с помощью атрибутов id
и name. Это далеко от стандартизации и упрощения
DOM, которая инкапсулирует целый документ в
объектную модель, представляя его в виде иерархии или
дерева. Узлы дерева представляют собой
HTML-дескрипторы и текстовые сегменты, которые они могут
содержать. Полный HTML-документ хранится в этом
дереве, а все объекты и их отношения отображаются как
дочерние и родительские элементы, а также элементы
одного уровня. В отличие от DHTML, управлять и
вносить изменения в DOM-дерево документов весьма
несложно. Для изменений текстовых элементов, например,
просто изменяют значения узла дерева с помощью
свойства node Value. Кроме того, существует возможность
создавать, удалять и перемещать узлы в дереве DOM-
документа. (Методы, которые позволяют это делать,
описываются позже, в табл. 13.2.)
Навигация по таблице
Для того чтобы лучше понять структуру дерева,
рассмотрим структуру DOM-дерева простой таблицы (см. рис.
Таблица 13.1. Выражения для навигации..
Выражение
13.1). Здесь показаны свойства childNodes, firstChild,
lastChild, nextSibling и previousSibling. Используем их,
чтобы понять структуру дерева и научиться
перемещаться к любой его части.
В DOM-дереве таблицы <table> будет находиться в
корне дерева. Из этого следует, что можно двигаться в
любой пункт дерева, определяя соответствующий узел.
Двигаясь вниз по дереву, достигнуть различных его частей
можно с помощью выражений, показанных в табл. 13.1.
Управление документами
Рассмотрим некоторые основные методы DOM,
которые позволяют исполнять часто встречающиеся задачи.
В своем API DOM определяет методы, которые
должны создавать, удалять, вставлять, перемещать менять
местами и заменять узлы или объекты. Эти методы и их
аргументы, описания и возвращаемые значения, или
исходящие параметры, кратко описаны в табл. 13.2.
Фактически, все это довольно очевидно; метод remo\eNode()
удаляет поддерево, встроенное в указанный узел, если
deep равно true. Если же deep — false, удаляется только
указанный узел, а его дочерние объекты возвращаются
текущему родительскому элементу предыдущего уровня.
Другой метод, зависящий от логического параметра, -
cloneNode(). Когда параметр равен true, копируется
поддерево, а когда он — false, копируется только узел.
Перемещение
Ко второй строке таблицы.
К первой ячейке второй строки.
К содержимому второй ячейки
в первой строке.
К корню второй строки.
К каждой из ячеек и затем
возврат в корень.
К каждой из ячеек.
tableNode.firstChild.childNodes[1]
tableNode.firstChild.childNodes[1].childNodes[0]
tableNode.firstChild.firstChild.childNodes[1j.firstChild
Tr2Node.parentNode.parentNode
или
Tr2Node.previousSibling.parentNode.parentNode
или
Tr2Node.previousSibling.previousSibling.parentNode.parentNode
tableNode. firstChild. firstChild.firstChild.firstChild. parentNode.parentNode.
parentNode.parentNode
tableNode.firstChild .firstChild. childNodestlJ.firstChilc1 parentNode.parentNode.
parentNode.parentNode
tableNode.firstChild.childNodes[1J.firstChild.firstChild.parentNode.parentNode.
parentNode.parentNode
tableNode.firstChild.childNodes[1].childNodes[1].firstChil parentNode.parentNode.
parentNode. parentNode
tableNode.firstChild.fi rstChild.firstChild.firstChild
tableNode.firstChild.firstChild.childNodes[1].firstChild
tableNode.firstChild.childNodes[1].firstChild.firstChild tableNode.
firstChild.childNodes[1 ].childNodes[1 ] .firstChild
Основы объектной модели документа (DOM)
Глава 13
«TABLE ID = lable№riu>
| laslChildor |cnl.jHcrJasl?! |
[ parenlNodo Г f I <TBODY> I У] parenlNodo |
РИСУНОК 13.1. Простая структура
DOM-дерева таблицы.
Таблица 13.2. Методы DOM для управления документами.
Синтаксис метода DOM
Аргумент гии
параметр
Описание
AppendChild fatherObj.appendChild(childObj) Объект
ApplyElement childObj.applyElement(fatherObj) Объект
ClearAttributes clearedObj.clearAttributes() He имеет
CloneNode newObj =existingObj. cloneNode(deep) Логический
CreateElement newObj = document. HTML-
createElementf'Tag") дескриптор
CreateTextNode newObj = document. Строка
createTextNode(string)
HasChildNodes hasChildrenFlag = testedObj. He имеет
hasChildNodesQ
InsertBefore parentObj.insertBefore(childObj, brotherbbj) Объект
MergeAttributes targetObj.mergeAttributes(sourceObj) Объект
Remoi/eNode deletedObj.removeNode(deep) He имеет
ReplaceNode oldObj.replaceNode(newObj) Объект
SwapNode firstObj.swapNode(secondObj) Объект
Добавляет дочерний объект (childObj) к
родительскому объекту (fatherObj).
Направляет элемент объекта к другому объекту
(fatherObj).
Удаляет все атрибуты и значения объекта
(clearedObj).
Копирует существующий объект для создания
нового (newObj).
Создает узел (newObj) для нового дескриптора.
Создает новый текстовый узел (newObj).
Определяет, имеет ли объект дочерние элементы.
Вставляет объект (childObj) как дочерний элемент
для (parentObj).
Объединяет все атрибуты (sourceObj) в
(targetObj).
Удаляет поддерево объекта, если deep равно
true, и только узел, если deep — false.
Заменяет узел (oldObj) новым (newObj).
Меняет местами один узел с другим.
Объектная модель и атрибуты
иерархиями, показывая все их связующие ссылки. Но
соглашение DOM не требует представления документов
Структура DOM-документа может, фактически, вклю- в виде деревьев, а также не требует наличия определен-
чать множество деревьев, являющихся объектными ны-" отношений между объектами. Однако, каждый до-
Использование DOM
' ЧаспГш ~~ ~
кумент должен иметь узел типа документа, корневой
узел элемента, служащий корнем дерева документа, а
также комментарии или инструкции по обработке. Пред-
ставлени" в виде дерева, или структурная модель, имеет
информационные элементы, к которым обращаются,
используя методы перемещения по дереву. DOM также
твердо придерживается структурного изоморфизма, в
котором различные DOM-совместимые реализации при
создании представления одного и того же документа
приводят к идентичной структурной модели. Узлы,
обсуждавшиеся выше, имеют различные атрибуты, многие
из которых перечислены в табл. 13.3.
ПРИМЕЧАНИЕ
Изменение префикса атрибута, который принимает
значение по умолчанию, не создает новый атрибут с
этим значением по умолчанию и первоначальным
префиксом, если namespaceURI и localName не менялись.
Навигация по документу
Рассмотрев, как управлять простой таблицей, вполне
естественно перейти к тому, как делать то же самое с
документом. Листинг 13.1 показывает DOM-структуру,
которая содержит заголовок документа, текстовый блок и
четыре параграфа:
Листинг 13.1. Простой документ.
<HTML>
<HEAD>
<TITLE> DOM document tree </TITLE>
</HEAD>
<BODY ID=[dbl] bod-Node [dbl]XP ID = "Nodel"?A
firs! paragraphs/P>
The main document
<P ID = [dbl]Node2[dbl]> </p>
<P ID = [dbl]Node3[dbl]X/P>
<P ID = [dbl]Node4[dbl]X/P>
</BODY>
</HTML>
Таблица 13.3. Часто используемые атрибуты DOM.
Атрибут
Чтение/запись
Описание
Атрибуты типа NamedNodeMap Только для чтения
childNodes типа NodeList
firstChild типа Node
lastChild типа Node
localName типа DOMString
Только для чтения
Только для чтения
Только для чтения
Только для чтения
namespaceURI типа DOMString Только для чтения
nextSibling типа Node
Только для чтения
nodeName типа DOMString Только для чтения
nodeType типа unsigned short Только для чтения
ownerDocument типа Document Только для чтения
parentNode типа Node
Префикс типа DOMString
previousSibling типа Node
Только для чтения
Только для чтения
NamedNodeMap содержит атрибуты узла.
NodeList содержит все дочерние элементы узла.
Первый дочерний элемент узла; если узел не существует,
возвращается Null.
Последний дочерний элемент узла; если узел не существует, то
возвращается Null.
Возвращает локальную часть составного имени данного узла.
Когда используется с узлами, созданными с помощью метода
DOM первого уровня, включая createElement, то возвращает
значение Null.
Содержит данное значение namespaceURI. Это — всегда Null
для узлов всех типов, кроме ElementNode или Attribute Node.
Это Null для узлов, созданных методом DOM первого уроаня,
включая createElement из интерфейса Document.
Следующий узел в последовательности; когда следующего узла
не существует, возвращается Null.
Имя узла.
Код, содержащий определенный тип объекта.
Объект Document, который принадлежит узлу; этот объект
Document используется для создания новых узлов.
Родительский элемент узла. Это — не Attr, Document,
DocumentFragment, Entity или Notation.
ParentNode будет равен Null, если узел недавно создан и
только должен стать частью дерева, либо если он удален из
дерева.
Префикс пространства имен узла; возвращается пустой
указатель, если ничего не определено. Установка этого атрибута
заменяет атрибут nodeName, который содержит составное имя
tagName и атрибуты имен интерфейсов Attr и Element.
Следующий из предыдущих узлов; когда такой узел не
существует, возвращается Null.
Дескриптор <body> находится на верхнем уровне
дерева и имеет пять дочерних элементов: четыре
дескриптора <Р> и одиночный текстовый блок.
DOM-дерево документа имеет узлы для дескрипторов и текстовых
Таблица 13.4. Навигация по документу.
Резюме
В главе рассматривались основные принципы DOM, a
также базовая объектная модель, применимая к
стандартным объектам простых Web-страниц. Бьши показаны
методы навигации и способы перемещения между
узлами, определяющими документы. Кроме того, рассматри-
Осноеы объектной модели документа (DOM) HRH
Глава 13 Щ|
блоков. Можно управлять деревом из узлов, которые
имеют атрибуты ID. Используя свойства DOM, можно
перемещаться к любому пункту в документе (см. табл.
13.4).
вались свойства, их изменения и использование для
получения информации с помощью модели дерева.
Приводилась терминология DOM, например, узлы с
именами типа firstChfld, lastChild, nextSibling и previousSibling.
С этой основной информацией теперь можно
подробно остановиться на приложении DOM в контексте
JavaScript. В главе 19 DOM исследуется более
подробно.
Перемещение
К первому дочернему элементу.
Ко второму дочернему элементу.
К четвертому или последнему дочернему элементу.
Ко второму дочернему элементу корня (текстового
узла) от узла 1.
К третьему дочернему элементу корня от узла 1.
К последнему дочернему элементу корня.
К дочерним элементам четвертого дочернего элемента.
Ко второму дескриптору <Р> от третьего <Р>.
К дочернему элементу дескриптора <body >.
К дескриптору корня <body> от дескриптора <Р>.
К дочернему элементу <body> и возврат к <body>.
Выражение
bodyNode.firstChild или bodyNode.childNodes[0]
bodyNode.childNodes[l ]
bodyNode.childNodes[4] или bodyNode.lastChild
Nodel .nextSibling
Nodel .nextSibling.nextSibling
Nodel .nextSibling.nextSibling. nextSibling
Nodel .nextSibling.nextSibling. nextSibling.childNodes[0]
Node3.previousSibling.previous
Sibling. previousSibling. childNodes[0]
bodyNode.firstChild.firstChild
Nodel .parentNode
bodyNode.firstChild.firstChild. parentNode.parentNode
Управление событиями
В НОЙ ГЛАВЕ
■ Понятие событий и обработчиков событий
■ Обработчики событий JavaScript
■ Обработка ошибок (опЕггог)
■ Прерывание загрузки изображения (onAbort)
■ Замена обработчиков событий
■ Программная генерация событий
■ События таймера
Если в последние несколько лет вы много
занимались программированием, скорее всего, вы
использовали язык программирования, управляемый событиями.
Процедурные программы из прошлого диктовали, какие
задачи пользователю исполнять в любой заданный
момент времени. Однако, графические оконные среды
сегодня имеют совершенно другую парадигму и
требуют, чтобы прикладные программы, в первую очередь,
отвечали на инициированные пользователями события.
Памятуя об основанном на объектах характере
JavaScript (см. главу 9) можно ожидать, что JavaScript
является прежде всего управляемым событиями языком.
Эта глава рассматривает JavaScript-события и способы
ответа на них, т.е. создание на сайте интерактивных
сценариев.
Понятие событий и обработчиков
событий
Многие из кодов JavaScript отвечают на события,
выполненные пользователем или программным обеспечением
браузера. Эта управляемая событиями среда позволяет
разработчику сосредотачиваться только на событиях,
которые затрагивают его приложение; то, что браузер
исполняет между событиями — дело браузера, а не
разработчика. Кроме того, разработчику не нужно
интересоваться всеми событиями, выполненными
пользователем — лишь только теми, которые требуют ответа.
Каждое JavaScript событие имеет соответствующий
обработчик событий (event handler), который
предназначен для автоматического ответа на происходящее
событие. При работе с событием к нему не добавляют код и
не изменяют его непосредственно, а, скорее, управляют
обработчиком события, которому данное событие
соответствует.
i
Обработчики событий JavaScript
Разработчикам HTML-страниц известно, что каждый
элемент в форме имеет дескриптор и связанный с ним
атрибут. Например, ввод текста определяется следующим
способом:
<input type=text size=30 maxlength=30
name="LastName">
JavaScript реализует обработчики событий, всграивая
их в качестве атрибутов HTML-дескрипторов.
Например, предположим, что необходимо выполнять
созданный метод каждый раз, когда значение объекта Text
изменяется. Для этого придется присвоить метод (с
именем, например, checkFieldQ) обработчику событий
onChangc объекта Text:
<input type=text size=30 inaxlength=256
name="LastName" onChange="checkField( this ) ">
В кавычках можно записывать непосредственно
JavaScript-код или же вызов отдельной функции. Хотя
предыдущий пример вызывает функцию checkField(),
следующий код также допустим:
<input type=text size=30 maxlength=256
name= " La s tName "
onChange= "if ( confirm( 'Are you certain
"you wish to change this value?'))
{ alert('Changed' )}">
СОВЕТ
При использовании встроенного кода можно
размещать сразу несколько строк в пределах назначения
обработчика событий, применяя точку с запятой для
отделения друг от друга операторов JavaScript. Однако,
множество строк программы следует применять с
осторожностью. Намного проще работать с кодом,
выделенным в функцию, а не с находящимся непосред-
Управление событиями
Глава 14
ственно внутри обработчика событий. Например, если
весь код физически расположить в одном месте,
изменения делать в нем окажется намного удобнее.
Далее в главе исследуются самые распространенные
события, поддерживаемые как Microsoft Internet Explorer,
так и Netscape Navigator. Особое внимание уделяется
наиболее часто используемым событиям. Для этого
берется типичная HTML-форма (см. рис. 14.1) и
добавляется код в ее обработчики событий. Форма, которая
будет использоваться на первых порах — обобщенная
форма заказа для некоторой виртуальной компании.
Щелчок на объекте (onClick)
Одна из наиболее общих целей JavaScript — расширение
HTML-формы и достижение таким способом большей
степени взаимодействия с пользователем. Если это так,
возможно, единственное наиболее частое событие, с
которым будет работать большинство разработчиков, —
это событие click. Событие click вызывается, когда
пользователь щелкает на каком-либо объекте,
предназначенном для нажатия.
Для большинства компьютерных сред событие click
вызывается только после того, как заданная по
умолчанию кнопка мыши нажата и отпущена. Пользователь,
который будет держать кнопку мыши и не отпустит ее
на объекте, событие click объекта не вызовет.
Когда событие click происходит, обработчик событий
onClick для нажатого объекта выполняет одну (или
больше) JavaScript-команд либо вызывает определенную
функцию. Например, посмотрим на кнопку "View Hat"
на рис. 14.1. Предположим, что необходимо добавить
код, который при нажатии этой кнопки отобразит еще
одно окно браузера с изображением шляпы.
В HTML объект Button определяется следующим
образом:
<input type=button name="ViewHat" value="View Hat"
onClick="displayHat () ">
S-ЧИ*
&*** ik*V** Ц*;. .
legend of Kaksitn Hat Order Form
IfycuVould Wee Лиге mferm moo the' yrcti'jf ЕАла. j-lfateBlJautlhefoaoy ,>ibi
Ц Jiw«A4lilf-to-« а 4вий*.А («ЫгМ'Лв Legend of akitifiat befcrnr-J'r^ptoHtfrdcthjtallawiiigbidbui
С isCoirer Information
U»t Km- J^
L»t HIM! 1
Г1ЕЫ-; \
C0M>«ay: |
л tee* 5 -Addiejsi J
«ГТ1 L
5«Eei J
-,
Six fed*i |
jtfiM ГО******,^. \ ' *
jj.Cinff jir'tfMXi. Vbrt^&BIHmbX. tljfllWtMflH*- &р*Х*Л '>»* V
"$&&*■
В разделе <liead> HTML-файла записывается метод
display Hat (), который будет вызываться при вызове
обработчика событий кнопки onClick:
<head>
<script language="JavaScripfc">
//Обработчик событий onclick
function displayHat() С
hatWindow = window.open ("http://
"www.myhat.com", "View MyHat", "toolbar=0,
widtlv=200,height=400,resizable=0");
)
</scripfc>
</head>
Когда пользователь нажимает кнопку, обработчик
событий использует метод ореп() объекта Window для
вывода на дисплей окна, содержащего изображение
шляпы (см. рис. 14.2).
Обработчик событий OnClick существует не только
для кнопок; его можно использовать для ответа на
включение флажков, выбор переключателей и щелчка на
объектах Link. Из-за характера этих элементов
управления настройка их события click встречается редко.
Флажки и переключатели часто используются для ввода
данных и вычисляются после выполнения на них щелчка.
Что касается объекта Link, то он используется прежде
всею как ссылка на расположение, указанное в его
свойстве href, и в добавлении кода часто нет
необходимости, если только не нужно менять его заданное по
умолчанию поведение.
W**bf*#t-ff*ff
View Hat
u
W.
rta Hat Order Form
LwnA cf ла&й .«true Gttcrjttbsfolowmgfprui
pictiic of lie Lc|[£nd<£KflJau£ut be&iE -ndenrta. pkuc tuck the Ылквд button. _
.0
Т1*.1и:
Jifcrett *^<Ir"Se:"-j
Лий! X№if- ФСч*- С >Ч CRfiw sji* \i*ii-
РИСУНОК 14.1. Например HTML формы.
РИСУНОК 14.2. С помощью метода ореп() отображается
второе оКИо.
ПРИМЕЧАНИЕ
Для флажков, ссылок, переключателей, а также для
кнопок "Reset" и "Submit" можно возвращать
значение false от обработчика событий onClick, чтобы
отменить вызванное действие. Например, если нужно
подтвердить, действительно ли выставлен флажок, в
Использование DOM
Часть III
его обработчик событий onClick добавляется
следующий код:
<input type="checkbox" name="checkboxl"
value="DeluxeRoom"
onClick="return confirm('Deluxe rooms are very
,—expensive. Are you sure?') ">Deluxe Room
Поскольку вид Web-страницы также важен, для
ответа на события click вместо кнопок лучше использовать
изображения. Хотя изображение не способно
фактически ответить на любое событие, можно имитировать
событие click с помощью объекта Link.
Продемонстрируем это, используя изображение вместо кнопки "View Hat"
для вызова метода tlispIayHat() из предыдущего
примера. Для этого определим соответствующий объект Link:
<href = "JavaScript :displayHafc () ">
<img sro = "minihat.gif" align=bottam border=0
width=89 height=75>
</a>
Вместо добавления кода в обработчик события
onClick ссылки, здесь используется JavaScript в качестве
протокола для свойства href. Использование JavaScript:
JavaScriptExpressio как значение свойства href
заставляет браузер выполнить выражение JavaScript вместо
перехода к определенной ссылке.
Отправка формы (onSubmit)
Как обсуждалось в главе 1, одно из преимуществ
использования JavaScript в HTML-формах — возможность
выполнения проверки правильности данных на стороне
клиента вместо перекладывания этой задачи на и без
того перегруженный сервер. Проверку правильности
можно выполнять для каждого поля в отдельности или
для всех полей сразу. В зависимости от контекста
используется один или оба метода.
Для проверки правильности данных во всех полях
сразу, равно как и для других задач, главное значение
имеет событие submit. Это событие генерируется как раз
перед отправкой HTML-формы. Добавление кода в
обработчик событий onSubmit объекта Form дает
возможность совершить проверку, а затем разрешить
продолжение или блокировать его, уведомив об этом пользователя.
Событие snbmit произойдет, если от обработчика
событий onSnbmit не возвращается значение false.
Любое другое значение (true или еще что-нибудь)
приведет к генерации этого события. Например,
предположим, что перед отправкой формы на сервер необходимо
отобразить простое сообщение для пользователя с
просьбой подтвердить заполнение формы заказа шляпы
Kakata. Форма в HTML определяется следующим
образом:
<form action="process.cgi" method="POST"
onSubmit=" return confirmOrder () ">
Метод confirmOrder(), используемый в обработчике
событий onSubmit формы, объявляется в разделе <head>
файла:
//обработчик событий onSubmit
function confirmOrder() {
return confirm('Are you certain you wish to
border the Kakata hat? *)
]
При включении метода confirmOrder() он
отображает диалоговое окно Confirm с кнопками "ОК" и "Cancel".
Если пользователь нажимает на "ОК", диалоговое окно
закрывается и в обработчик событий onSnbmit
возвращается значение true. Если пользователь нажимает на
"Cancel", возвращается false. Оператор return в
обработчике событий onSnbmit исследует входящее значение и
определяет, нужно ли продолжать обработку формы.
Оператор return в назначении обработчика событий
необходим для корректной работы кода. Присваивание
обработчику событий onSnbmit = "confirmOrderO" ianyc-
Kaci обработку формы независимо от возвращенного из
диалогового окна значения.
Обработчик событий onSnbmit — то же самое, что
и обработчик событий onClick объекта Snbmit. Оба они
— события, которые можно использовать, чтобы
захватить форму прежде, чем она будет обработана. Как
показано на рис. 14.3, обработчик событий onClick объекта
Snbmit был вызван до вызова обработчика onSnbmit
формы.
N
/
Return
;. Submit \
OnClick
/
\
Yt
Form
s
4
OnSubmit
/ V
t
Return
4o
Yes
4
ACTION
РИСУНОК 14.3. Установление последовательности событий
для отправки формы.
Обработчик событий onSnbmit — идеальное место
для размещения проверки правильности данных формы
до ее отправки на сервер.
Сброс формы (onReset)
Может понадобится вызвать событие и при сбросе
формы, а не только при отправке. Обработчик событий
onReset вызывает код JavaScript, когда происходит собы-
Управление событиями
Глава 14
тие reset. Так же, как onSubmit, onReset — обработчик ПОЛУЧбНИб (ЬОКУСЗ (OFlFOCUS)
событий объекта Form.
Для демонстрации этого снова рассмотрим форму
заказа шляпы Kakata, упомянутую в прошлом разделе.
После добавления нового обработчика событий к
определению объекта Form код будет выглядеть так:
<form action="process .cgi" method="POST"
onSubmit="return confirmOrder()"
onE.eset="return confirmReset () ">
Мегод confirmReset(), используемый в обработчике
событий onReset формы, объявляется в разделе <head>
файла:
//обработчик событий onReset
function confirmReset () {
-return confirm ('Are you certain you wish to
wclear the order form?' ) ;
)
ПРИМЕЧАНИЕ
Обработчик событий onReset поддерживается в JavaScript
1.1 и более поздних версиях.
Изменение данных (onChange)
Как упоминалось в связи с событием submit, если
прикладные программы JavaScript имеют дело с данными,
обычно возникает необходимость в предварительной
обработке данных, введенных пользователем, во
избежание проблем проверки допустимости при отправке
данных серверу. В то время как submit служит для
проверки сразу всех полей формы, событие change обычно
наиболее важно для проверки допустимости на уровне
каждого поля формы. Событие change происходит,
когда изменяется значение объектов поля и когда само поле
выходит из фокуса.
Для решения такого рода задачи используется
обработчик событий onChange для выполнения JavaScript-
кода либо вызова функции для обработки события.
Предположим, что необходимо добавить базовую
подпрограмму проверки допустимости данных в форму
ввода данных для заказа шляпы Kakata. Скажем, требуется
гарантия того, что содержимое поля "State" записано
буквами верхнего регистра. Объект Text определяется
следующим образом:
<input type=text size=3 maxlength=2 name="State"
oriChange="convertToUppercase (this) ">
M етод convertToUppercase() преобразовывает
значение поля "State" к верхнему регистру, используя метод
toUpperCase() строки:
function convertToUppercase (fieldObject) (
fieldObject.value = fieldObject. value. toUpperCase ( )
Событие focus вызывается, когда объект поля получает
фокус, т.е. когда пользователь переходит к объекту с
использованием клавиши 'Tab" или с помощью щелчка
мыши на объекте, либо когда вызывается метод focus()
объекта. В каждый момент времени фокус может иметь
только один объект.
ПРИМЕЧАНИЕ
JavaScript 1.1 и последующие версии расширяют
возможности onFocus, включая его в качестве
обработчика событий для объектов Window, Frame и Frameset.
Для каждого из этих объектов обработчик событий
onFocus определяет действие, которое должно
выполниться при переходе фокуса.
Обработчик событий OnFocus должен размещаться
внутри дескрипторов <body> объектов Window,
Frame или Frameset.
Обработчик событий onFocus в этих объекта может
отвечать за переключение действия. Например, он
может расширять стандартное поведение объектов Text в
форме. При переходе к объекту Text курсор появляется
по умолчанию. Однако, во многих средах (например, в
Windows), если поле уже имеет значение, то при
установке фокуса на объект содержимое поля выделяется.
Для получения такого поведения (см. листинг 14.1)
потребуется добавить обработчики событий onFocus
каждому из объектов Text и Textarea:
Листинг 14.1. Использование события onFocus для
полей формы.
<pre> First Name: <input
type=text
size=20
maxlength=2 0
name="FirstName"
onFocus="selectContents(this)">
Last Name: <input
type=text
size=20
maxlength=20
name="LastName"
onFocus="selectContents(this) ">
Title: <input
type=text
size=30
maxlengths2 5 6
name="Title"
onFocus="selectContents(this)">
Company: < input
type=text
size=30
maxlength=2 >6
name="Company"
onFocus="selectContents(this)">
Street Address: <input
type=text
size=30
maxleDgths256
Использование DOM
Часть
name="StreetAddr"
onFocus="selectContents(this) ">
City: <in->ut
type=text
size=30
raaxlength=25 6
name="City"
onFocus="selectContents(this) ">
State: <input
type=text
size=3
maxlength=2
name="State"
onFocus="selectContents(this) "
onChange="convertToUppercase(this)">
Zip Code: <input
tvpe= xt
size=30
maxlength=10
name="Z ipCode"
onFocus="selectContents(this) ">
Telephone: <input
type=text
size=12
maxlength=12
name="Phone"
onFocus="selectContents(this) ">
FAX: <input
type=text
size=12
maxlength=12
name="FAX"
onFocus="selectContents(this) ">
E-mail: <input
t pe= ext
size=30
maxlength=25E
name="Email"
onFocus="selectContents(this)">
URL: <input
type=text
size=30
maxlength=256
name="URL"
onFocus="selectContents (this) "X/pre>
<textarea name="worthyBox" rows=3 cols=49
onFocus="selectContents(this)">
</textarea>
Хотя можно написать отдельные обработчики
событий для каждого из полей, это будет нерациональным
подходом, если только процессы не оказываются
совершенно разными. Вместо этого в методе seIectContents()
пользуются преимуществом ключевого слова this для
ссылки на вызывающий объект. Приведенная ниже
функция тогда будет использоваться в качестве глобальной
для всех объектов:
function selectContents (fieldobject) (
FieldObject.select();
I
Когда один из объектов Text или Textarea вызывает
метод selectContents (), метод использует параметр
fieldObject как ссылку на вызывающий объект. Затем
метод select() осуществляет выбор информации в
области ввода указанного объекта.
Выход из фокуса (onBlur)
Событие blur (противоположность события focus)
вызывается, когда объект теряет фокус.
ПРИМЕЧАНИЕ
Как и с обработчиком событий onFocus, JavaScript 1.1
и последующие версии расширяют возможности
onBlur, включая его в качестве обработчика событий
для объектов Window, Frame и Frameset. Для
каждого из этих объектов обработчик событий onBlur
определяет действие, которое должно выполниться,
когда окно теряет фокус.
Обработчик событий OnBlur должен помещаться в
дескриптор <body> объектов Window, Frame или
Frameset.
Например, предположим, что для формы ввода
данных нужна гарантия, что пользователь не оставил
пустым объект EmailText. Такую проверку можно добавить
в обработчик событий onBlur данного объекта.
Поскольку она воздействует на одно поле формы, можно
добавить JavaScript-код только к определению объекта Text:
<input type=text size=30 maxlength=256 name="Email"
onFocus="selectContents(this)" onBlur="if
(this, value = ''){
alert ('You must enter
^something. ') ;this.focus () ;}">
Если пользователь попытается убрать фокус из
объекта без ввода текста в данное поле, сигнальное
диалоговое окно уведомит о недопустимости. Следующая
команда возврашает фокус к объекту EmailText. Без этой
команды курсор перешел бы к следующему полю.
Несложно заметить, что onChange и onBlur — очень
похожие обработчики событий. Возникает вопрос о том,
когда нужно использовать один, а когда другой. OnChange
больше подходит для проверки или анализа содержимого
объекта и обладает преимуществом в том, что не
вызывается при изменении значения пользователем. С
другой стороны, для обязательных полей лучше
использовать onBlur.
Важно понять правильный порядок следования
обработчиков событий onChange, onBlur и onFocus. Как
показано на рис. 14.4, onFocus происходит при входе в
поле. При выходе из него вызывается onChange, затем
onBlur и, наконец, обработчик onFocus следующего
входного объекта. Имейте в виду, что код, который
добавляется (например, в обработчик событий onChange),
может воздействовать на обработчик событий onBlur того
же самого объекта. Другими словами, использовать эти
три события следует с особой осторожностью.
Управление событиями
First Name
First Name
onFocus
\7
cnChange
onBlur Q
^>
onFocus
РИСУНОК 14.4. Порядок следования событий от одного
объекта Text до другого объекта Text.
Выделение текста (onSelect)
Следующее JavaScript событие — событие select,
которое происходит, когда пользователь выделяет текст в
объекте Text или Textarea. Обработчик событий onSelect
этих объектов выполняет JavaScript-код или вызывает
указанную функцию.
Независимо от способа реализации, возможности
события select довольно ограничены, и большинству
разработчиков оно вообще может не понадобиться.
Перемещение мыши по объектам
(onMouseOver и onMouseOut)
Опытный пользователь Web, вероятнее всего, будет
ожидать, что перемещение мыши по тексту ссылок
отобразит место назначения ссылки (обычно URL-адрес).
Однако, несмотря на то, что опытные пользователи хотят
видеть URL-адрес, начинающие пользователи
предпочли бы вместо этого увидеть нечто менее прозаическое.
Это особенно актуально в intranet-средах, где
URL-адрес обычно значительно менее понятен. Захват событий
Листинг 14.2. Исходный код для Register.htm.
<html>
<head>
<title>Kakata Hat Registration</title>
<script language="JavaScript">
<! —
var notxceWindow
//Обработчик событий ondrck
function displayHat () {
hatWindow= window . open ( "http: / . . /kakata/viewhat. htm" ,
"ViewHat" , " toolbar=0, width=200, height=400, resizable=0") ,-
}
Глава 14
mouseOver и mouseOut позволяет изменять в строке
состояния текст по умолчанию.
ПРИМЕЧАНИЕ
Обработчики событий onMouseOver и onMouseOut
также поддерживаются объектом Area в JavaScript 1.1
и последующих версиях.
Событие mouseOver генерируется, когда пользователь
помещает курсор мыши поверх объекта Link или Area.
Как и следовало ожидать, onMouseOut ведет себя таким
же образом, за исключением того, что событие
происходит, когда курсор уводится из Link или Area.
Обработчики событий onMouseOver и onMouseOut этих
объектов могут затем изменять заданное по умолчанию
поведение браузера. Если необходимо установить
свойства status и defaultStatus окна, следует возвратить в
обработчик событий значение true.
Например, предположим, что требуется отобразить
следующий текст в строке состояния, когда для ссылки
на шляпу Kakata генерируется событие mouseOver:
Click here to get the wb le story about tte
Legend of Kakata
Для отображения данного текста добавьте в
дескриптор Link обработчик событий onMouseOver:
<а href="http://www.kakata.com" name="linker"
onMouseOver="returnupdateStatusBar ( ) "
>Legend of Kakata
</a>
Метод updateStatusBar() определяется таким
образом:
// обработчик событий onMouseOver
function updateStatusBar () {
window, status = 'Click here to get the whole
** story about the Legend of Kakata ■ ;
return true
'I
Все рассмотренные в главе примеры содержатся в
файле Register.htm. Листинг 14.2 дает полный исходный
код для этих примеров.
//Обработчик собь
onSubmit
Использование DOM
Часть III
function conf irmOrder ( ) {
return confirm ('Are you certain you uioh to order the Kakata hat?*);
\
//Обработчик событий onchange
umction convextToUppercase ( f ieldObject) {
fieldObject.value =t ieldobject. value. toUpperCase ();
)
/ / Обработчик событий onFocu.5
sanction selectContents(f ieldObject) {
fieldObject.select();
)
/ / обработчрж событий onMouseOver
function updatestatusBar () {
window, status = 'Click here to get the whole .story about the be-yend of Kakata' ;
return true
}
/ / Q6pa.6oT4]>nv coo [тий onMouseOut
function updateStatusBarOut() {
window, status = ' ' ;
:urn true
)
// Обработ'и-гк событий onSelect
function acce.5.5Text () {
alert ( ' Success ' ) ;
J
// -->
</script>
</head>
<body background=" lt_rock. gif ">
<hlxl'ont color="#008000">Legend of Kakata Hat Order ForrrK/fontX/hl>
<hr>
<rp\^If you xTould like more information on the-
<ahref = ,,http: //www. acadians . com/javascript/kakata/kakata.htm"
narae="linker"
onMouseOver="return updateStatusBar()"
onMouseOut="return updateStatusBarOut () ">Legend of Kakata </a>, please
fill out tlie following form. </p>
<form method="POST">
<p>If you would like to see a detailed picture of the Legend of Kakata
Hat before ordering, please click tlie following button: <input
type=button name="ViewHat" value="View Hat" onClick=displayHat() X/p>
</form>
<hr>
<form action=" JavaScript: alert(' order' ) "
method="PDST"
name="MainForm"
onSubmit="return confirmOrder () ">
<h2Xfont color="#008000">Customer Information</fontx/h2>
<pre> First Name: < input
type=text
size=20
maxlength=2 0
name="FirstName"
onFocus="selectContents(this)">
Last Name : < input
type=texfc
size=20
maxlength=_ 0
name="LastName"
onFocus="selectContents(this)">
Title: <inpu1
type=text
size = 30
ИЯ
Управление событиями
Глава 14
Company: <input
Street Address: < input
City: < input
.State : <input
maxlengtli=30
name="Title"
onFocus="selectContents(this)">
type=text
size=30
maxlength=30
name= "Company"
onFocus="selectContents (this)">
type=text
size=30
maxlength=3 и
name="StreetAddr"
onFocus="selectContents (this)">
type=text
size=3u
maxlength=30
name="City"
onFocus="selectContents (this)">
type=text
size—3
maxlength=2
name="State"
onFocus="selectContents (this)"
onChange="convertToUppercase (this)">
Zip Code: <input
Telephone: <input
FAX: <input
Email : <input
URL : <input
type=text
size=30
maxlength^lO
name=' ZipCode'
onFocus="selectContents (this)">
type=text
size=12
maxlength=12
name=" Phone"
onFocus="selectContents (this)">
type=text
size=12
maxlength=12
name="FAX"
onFocus="selectContents (this) ">
maxlength= 0
name="Email"
onFocus="selectContents(this)">
type=text
size=30
maxlengthOl О
name="URL"
onFocus="selectContent (this) "X/pre>
<hr>
<pXstroni>ire you fiquot; Kakata worthy fiquot; ? Please use the space below to
enrer a thorough reason for your order .</strongX/p>
<blockquote>
< pXtextarea
name= " worthy Box "
iows=3
■cols=49
cnFocus="selectContents(this)">
</textareaX/blockquoteX/p>
■■■■ Использовани DOM
|Ш Часть III
<h2Xfont color="#008000">Form Subtnission</ ontX/h2>
<pXem>Please click the Order button to order your free Legend of Kakata hat.
You will receive email confirmation of your order in 24 hours </emX/p>
<pXinput
type=submi t
value="Order"
onClick="confirmOrder('Submit object')">
<input
type=reset
value="Clear Form"
onClick="alert( 'Clearing! ') "X/p>
<T3>  ;</p>
<P>
</form>
href="JavaScript:displayHat()">
<img src="ball.gif" align=bottom border=0 width=16 height=16>
</a>
</body>
</html>
СОВЕТ
При захвате множества событий mouseOve, и mouseOut
в объекте Area обработчик событий onMouseOut
вызывается при уходе из этой области, затем при
входе в следующую область вызывается onMouseOver.
Загрузка документа (onLoad)
Начальное открытие окна или фрейма может оказаться
важным моментом времени для выполнения
определенного JavaScript-кода. Событие load позволяет
использовать этот момент, добавляя обработчик событий onLoad
к дескриптору <body> в случае однофреймового окна
или к дескриптору <frameset> в случае мультифреймо-
вого окна. Событие load выполняется, когда браузер
завершает загрузку окна или всех фреймов мультифрей-
мового окна. Объект Window — единственный объект,
который может работать с этим событием.
В качестве примера рассмотрим ситуацию, когда
нужно гарантировать, что все пользователи intranet-сети
некоторой компании используют требуемую версию
Netscape Navigator. Для этого можно определить
браузер, применяемый обработчиком событий он Load и
затем уведомить пользователя, правильная ли у него
версия программы. В дескриптор <body> документа
добавляют обработчик событий onLoad:
<body onLoad="checkBrowser()">
Затем в дескрипторе <head> документа
определяется метод checkBrowser():
//обработчик событий onLoad
function checkBrowser() {
if ((navigator. appName = 'Netscape') ss
(navigator. appVersion = '4.0 (Win95; I) ') ) {
noticeWindow = window. open ("" , "NoticeWindow",
"toolbar=0, width=300, height=100, resiz.ible=0") ;
noticeWindow. document, write ("<headXtitle>Upgrade
^Notice</titleX/head>") ;
noticeWindow. document. write ("<centerXbi gXb>Your
*»Web Browser needs to be updated. Please
"see your supervisor before noon.
-»</bx/bigX/center>"))
)
Сразу после загрузки документа выполняется JavaScript-
метод. На рис. 14.5 показан вид окна Upgrade Notice для
версий, не прошедших испытания.
~ Your Vi ей Ilrmeier needs to be ^ ■• ' _ '•
£j ujiduLei]. Пене ire ynnr lupervknr- ^ jj e.
before neon. ' ^rih^et 1
IniTaiiel Home 'лее
tf'-fl-1'" 1С1""" f ■'» ', JBafti»* ia" -ЙЯие»^' * Й& ' "»■«>
РИСУНОК 14.5. Окно Upgraci Notice открыто с помощью
обработчика событий onLoad.
ПРИМЕЧАНИЕ
У объекта Image также есть обработчик событий
onLoad. Это событие вызывается, когда браузер
выводит на дисплей изображение. Обратите внимание,
что данное событие происходит не в процессе загруз-
Управление событиями
Глава 14
ки изображения клиенту, а в течение вывода на
дисплей этого изображения.
Выход из документа (onUnload)
Событие unload (противоположное событию load)
вызывается непосредственно перед выходом пользователя из
документа. Как и в случае с onLoad, обработчик событий
onUnload можно добавлять в дескриптор <body> в случае
однофреймового окна или в дескриптор <frameset> в
случае мультифреймового окна. Если есть мультифреймовое
окно и множество обработчиков событий onUnload для
фреймов, то обработчик событий мультифреймового
окна всегда выполняется в последнюю очередь.
Приведем пример использования обработчика
событий onUnload для очистки среды браузера перед
переходом к следующей странице. Например, предположим,
что требуется закрыть окно View Hat при уходе со
страницы заказа шляпы Kakata. Можно добавить onUnload
к дескриптору <body> следующим образом:
<body onLoad=" checkBrowser () " onUnload="clean() ">
Затем определяется метод clean():
// обработчик событий onUnload
function clean () {
noticeWindow.close(),
I
noticeWindow — глобальная переменная, которая
объявляется в дескрипторе <head> документа и
ссылается на окно Upgrade Notice, отображенное с помощью
обработчика on Load. Окно Upgrade Notice закрывается,
когда пользователь покидает текущую страницу.
Листинг 14.3 показывает полный исходный код для
on Load и onUnload.
Обработка ошибок (onError)
Объекты окна и изображения имеют обработчик
событий onError, который позволяет отслеживать ошибки,
возникающие в процессе загрузки документа или
изображения. Отслеженная ошибка будет либо
синтаксической ошибкой JavaScript, либо ошибкой времени
выполнения программы, но не ошибкой браузера (типа
сообщения сервера о том, что страница не существует).
Глава 33 дает полное представление об отслеживании
ошибок с помощью onError.
ПРИМЕЧАНИЕ
Обработчик событий onError поддерживается в
JavaScript 1.1 и последующих версиях.
Листинг 14.3. Исходный код для LoadUnload.htm.
<html>
<head>
<title>Load/Unload Example</title>
<script language="JavaScript">
<! —
var noticeWindow
//ОГработчик событий onLoad
function checkBrowser () {
if ( (navigator. appName = 'Netscape') ££ (navigator. appVersion = '4.0 (Win95; I)')) {
noticeWindow = window . open ("" , "NoticeWindow" , "toolbar=0,width=300,height=100,resizable=0") ;
noticeWindow. doctiment. write ( "<HEADXTITLE>UpgradeNotice</TITLEX/HEAD>" ) ;
noticeWindow. document, write ("<CENTERXBIGXB>Your Web Browser needs to be updated. Pleas;
u* see your supervisor before noon.
^</BX/BIGX/CENTER>)' )
I
// Обработчик событий onUnload
function clean () {
if ( noticeWindow I = null ) { noticeWindow. clos О } ;
I
// —>
</scr--it>
</head>
<body cnLoad="checkBrowser()" onUnload="clean()">
<fonl color="#008000">
<center:xbigXb>Intranet Home Page</bX/bigX/center>
</body>
</html>
ННВН Использование DOM
ВЫИ Часть III
Прерывание загрузки изображения
(onAbort)
В зависимости от размеров HTML-изображения,
загрузка его может занимать много времени. В результате
пользователи могут потерять терпение и остановить
загрузку изображения до ее завершения. Например,
пользователь может прервать процесс загрузки, щелкнув на
ссылке на другую страницу или нажав кнопку "Stop" в
меню браузера.
ПРИМЕЧАНИЕ
Объект Image и обработчик событий onAbort
поддерживаются в JavaScript 1.1 и последующих версиях.
Однако, если пользователь будет работать с
частично недогруженным HTML-файлом, может не
произойти что-то из задуманного разработчиком, и, вероятно,
возникнут некоторые нарушения выполнения кодов для
изображений сценария. Обработчик событий onAbort
позволяет реагировать на прерывание загрузки
изображения и вызывает в качестве ответа JavaScript-функцию.
Например, предположим, необходимо предупредить
пользователя о том, что HTML-документ не был
загружен полностью. Тогда к дескриптору <img> добавляют
следующий обработчик событий:
<img name="mapworld" SRC="global. Tif"
onAbort="alert (' You have not downloaded the
^entire document.')">
Замена обработчиков событий
В JavaScript 1.1 и последующих версиях можно заменять
обработчик события, назначенный в определении
HTML-дескриптора. Например, в приведенном ниже
листинге функция optionA() назначена в определении
<input> в качестве обработчика события для объекта
buttonl. Однако, второй сценарий вычисляет
переменную choice. Если значение choice не равно "А", то, как
видно из листинга 14.4, код заменяет назначенный
обработчик событий на функцию optionBQ.
Листинг 14.4 Пример замены обработчиков событий.
<script lanauage—"Г v '3cript">
var choice = "A",
function optionA() {
J
function optionB() {
)
</scrip fc>
<body>
<form name="forml">
<input type="button" narae="buttonl"
onClick="optionA() ">
</form>
<script language="JavaScript">
if (choice != "A") {
document. forml. buttonl. onclick=optionB
)
</script>
</body>
Обратите внимание, что обработчики событий — это
ссылки на функции, поэтому при определении в коде не
нужно добавлять к ним круглые скобки. Если бы код был
определен так, как показано ниже, функция optionB()
была бы вызвана, но не назначена в качестве
обработчика событий:
document. forml. buttonl. onclick=optionB ()
Программная генерация событий
До сих пор е данной главе обсуждался ответ на события,
сгенерированные пользователем (например, событие
click) или системой (например, событие onllnload). В
большинстве случаев код проектируется так, чтобы
отвечать на эти события, как только они происходят.
Однако, разработчики JavaScript не должны рассчитывать
только на внешние факторы, генерирующие события. В
действительности, можно вызывать возникновение
некоторых из этих событий внутри кода.
Например, можно смоделировать событие click для
объекта Button, вызывая его метод click(). Хотя это
верно для объекта Button, но, например, для объекта Link
(у которого имеется обработчик событий onClick) метод
clickQ не существует.
События таймера
Множество управляемых событиями сред
программирования используют событие таймера, которое является
событием, вызываемым каждый раз по прошествии
заданного интервала времени. Хотя JavaScript не
предлагает событие типа таймера, для тех же целей можно
использовать метод setlnterval объекта Window.
ПРИМЕЧАНИЕ
Метод setlnterval поддерживается в JavaScript 1.2 и
последующих версиях.
Метод setlnterval многократно вызывает функцию
или вычисляет выражение каждый раз по истечении
указанного интервала времени (в миллисекундах). Этот
метод будет выполняться, пока окно не закроется или
пока не будет вызван метод clearlnterval
Например, в листинге 14.5 метод setlnterval
выполняется, когда документ открывается и начинает
вызывать функцию dailyTask() каждые 10000 миллисекунд.
Функция dailyTaskO при каждом вызове проверяет
время, и в 8:30 утра начинает выполняться код в
операторе if, предназначенный для подачи сигнала
пользователю и очистки интервала. Как только вызывается
метод clearlnterval, выполнение setlnterval
останавливается.
Листинг 14.5. Исходный код для TimeM 2.htm.
<head>
<script language="JavaScript">
<!
function dailyTask() С
var tdy = new Date () ;
if ((tdy.getHoursO =8) &£
(tdy.getMinutesO = 30)) {
alert (' Good morning sunshine' ')
clearlnterval(timerlD)
J
II—>
timerlD = setlnterval ("dailyTaskO ', 10000)
</script>
</head>
При использовании JavaScript 1.1 или более ранней
версии можно выполнять подобный процесс (хоть и не
таким прямым способом) с помощью методов setTimeout()
и clearTimeout().
Обычно метод setTimeout() используется для
вычисления выражения по прошествии определенного
промежутка времени. Это вычисление — одноразовый процесс,
который не повторяется бесчисленное количество раз.
Однако, поскольку в JavaScript есть возможность
производить рекурсивные вызовы функции, рекурсию можно
использовать для создания события таймера де-факто.
Предположим, что каждое утро в 8:30 необходимо
выполнить задачу, описанную немного выше. Для этого
нужно иметь таймер, вычисляющий время; когда это
время достигнуто, процесс запускается. Метод dailyTaskO
определяется так:
function dailyTask() С
var tdy = new Date () ;
if ((tdy.getHours() =8) £&
■:tdy.getMinutes() = 30)) (
•~erf ormProcess() )
timerlD = setTimeoutf "dailyTaskO ",10000)
I
Метод создает объект Date, содержащий текущее
время, с помощью getHours() и getMinutes(). Если они
вычисляют 8:30 утра, вызывается метод performProcess()
Управление событиями Ш9ФШ
Глава 14 UfiJ
Следующая строка — основа процесса таймера —
использует метод setTimeoutO для рекурсивного вызова
метода dailyTaskO каждые 10000 миллисекунд.
ПРЕДОСТЕРЕЖЕНИЕ
Этот пример демонстрирует определенные трюки в
отношении таймера, и лучше быть поосторожнее с
подобной реализацией процесса в реальных задачах.
Осуществление такого непрерывного процесса
выполнения цикла е браузере может привести, в конце
концов, к нехватке ресурсов.
Для запуска таймера при загрузке документа
потребуется добавить обработчик событий oi Load в
дескриптор <body> HTML-документа:
<body onLoad ="dailyTaskO ">
Листинг 14.6 содержит полный исходный код
примера.
Листинг 14.6. Исходный код для Timer11.htm.
<head>
<script language="JavaScript">
<:! —
function perfo тпРгос ss() С
alert (' Good morning sunsbine! ' ) ;
)
function dailyTaskO £
var tdy = new Date () ;
if ((tdy.getHours() =8) ££
(tdy.getMinutesO = 30)) С
performProcess())
timerlD =
setTimeout ( "dailyTask()",10000)
}
II—>
</script>
</head>
<body onLoad="dailyTask 0 ">
</body>
Резюме
Учитывая управляемый событиями характер JavaScript,
можно утверждать, что твердое понимание встроенных
событий — ключ к максимальному увеличению его
мощности. В главе рассматривались события и связанные с
ними обработчики событий. Особое внимание уделялось
событиям, наиболее полезным для разработчиков, а
также определенным примерам их использования. Эти
базовые знания понадобятся в следующих главах, в которых
будут детально рассматриваться встроенные JavaScript-
события.
Объект Window
В ЭТОЙ ГЛАВЕ
Объект Window
Открытие и закрытие окон
Навигация между окнами
Отображение окон сообщений
Работа с сообщениями строки состояния
Объекты браузера Navigator — это объекты самого
высокого уровня в иерархии JavaScript-объектов. Эти
объекты не имеют дело с HTML; они имеют дело
прежде всего с браузером, например, с открытием новых окон
браузера, перемешением по списку посешений или
получением имени хоста из текущего URL. В этой главе
подробно рассматривается объект Window (который, как
было сказано, находится на вершине объектной
иерархии), а также упоминается группа других объектов, хотя
детальное объяснение им будет дано в следующих
главах. Эта группа включает в себя объект Frame, который
будет обсуждаться в главе 18. Кроме того,
рассматриваются объекты Location, History и объект Navigator
уровня приложения.
Объект Window
Объект Window верхнего уровня, который является
родителем других дочерних объектов, присутствует на
каждой Web-странице, и, безусловно, в одном JavaScript-
приложении их можно иметь несколько. Основные
Таблица 15.1. Основные методы объекта Window.
методы объекта Window реализуют вполне очевидные
функциональные возможности (см. табл. 15.1 .
Как было показано в главе 9, Window — объект
верхнего уровня в иерархии объектов JavaScript. В отличие
от других объектов, которые могут присутствовать или
отсутствовать в среде выполнения, объект Window
всегда присутствует — либо в мультифреймовом окне, либо
в одиночном. Однако, отличие объекта Window от
других заключается в том, что его часто можно просто
игнорировать. Вот две причины этого.
Первая причина: при работе в среде одиночного
фрейма можно игнорировать явную ссылку на объект
Window. JavaScript выводит ссылку в текущее окно.
Например, следующие два кода эквивалентны и выдают
один и тот же результат:
myTitle
myTitle
window.document.title
document.title
Вторая причина: в силу особой структуры языка
JavaScript, некоторые методы системного уровня
(например, всплывающие окна сообщений или установка
таймера) присвоены объекту Window.
Метод
Описание
Open и Close Открытые и закрытие окна браузера; есть возможность определять размер окна, его содержимое, а
также наличие кнопочной панели, поля адреса и других атрибутов.
Alert Появление окна сигнального диалога с соответствующим сообщением.
Confirm Появление окна диалога подтверждения с кнопками "ОК" и "Cancel".
Prompt Появление окна диалога подсказки с полем текстового ввода.
Blur и Focus Удаление или установка фокуса на окно.
ScrollTo Прокрутка содержимого окна до определенной точки.
Setlnterval Установка временного интервала между функциональным вызовом и вычислением выражения.
SetTimeout Установка однократного временного интервала до функционального вызова или вычисления выражения.
Однако, для вызова этих методов нет
необходимости использовать ссылку непосредственно на окно; такая
ссылка будет неявной.
Работа с объектами Window — сложная часть
программирования на JavaScript из-за способов, по которым
пользователи применяют окна браузера. Хотя
большинство пользователей обычно имеют дело только с одним
окном, иногда бывает полезно открыть сразу два и
больше окон. Так можно сравнивать страницы различных
сайтов, вводить информацию в форму, используя
данные с другой Web-страницы, а также проводить поиск
элементов списка одной страницы, просматривая
ссылки с помощью еще одного экземпляра браузера.
Термин окно браузера часто сокращается до просто
окна, хотя нужно быть внимательнее и не путать разные
копии браузера с фреймами, которые также называют
окнами (подокнами окна браузера). Окно браузера
также называют верхним (top) окном, потому что фреймы —
это подокна браузера. Браузеры, поддерживающие
JavaScript, позволяют программно открывать и
закрывать окна браузера, а также перемещаться по этим
окнам. Сайт с отдельными окнами сможет обеспечить
сразу несколько версий содержимого, увеличив тем
самым доступ к информации и возможностям и
предложить новые пути более полного взаимодействия с
сайтом.
ПРИМЕЧАНИЕ
В JavaScript 1.2 в Window было добавлено несколько
новых методов: atob, back, btoa, captureEvents,
clearlnterval. crypto.random, crypto.signText,
disableExternalCapture, enableExternalCapture, find,
forward, handleEvent, home, moveBy, moveTo,
releaseEvents, resize By, resizeTo, routeEvent, scroll By,
scrollTo, setHotKeys, setlnterval, setResizable и
setZOptions.
Кроме того, добавилось несколько новых свойств:
crypto, inneiHeight, innerWidth, locationbar, menubar,
offsc enBuffering, outel Height, outerWidfh,
pageXOffset, pageYOffset, personalbar, screenX,
screenY, scrollbars, statusbar и toolbar.
Для JavaScript 1.2 требуется Navigator 4.0-4.05, в то
время как для JavaScript 1.3 — Navigator 4.06-4.5.
Во многих случаях для одновременного просмотра
страниц удобнее использовать фреймы (см. главу 18).
Однако, у пользователей есть возможность изменять
размеры и положение множества отдельных окон
браузера. Пользователи могут также сворачивать и
разворачивать окно, при необходимости перемещать окно поверх
или вниз всех окон и сохранять все инструментальные
средства и другие особенности (строку меню, поле
адреса, строку состояния, закладки и т.д.) в каждом
экземпляре браузера.
Объект Window ЕТ^РШ
Гла^15 ~~ tiiiS
СОВЕТ
Многие пользователи считают отвлекающим и
раздражающим неожиданное открытие новых окон
браузера, в особенности, если они потом должны сами
закрывать их. Уведомьте посетителя о том, что данное
действие откроет новое окно — например, с
помощью короткого примечания рядом со ссылкой. В
следующем примере Spike — это ссылка, которая
открывает новое окно:
See a picture of my dog spike, (new window)
Открытие и закрытие окон
ПРИМЕЧАНИЕ
Пользователь в любой момент может открыть новое
окно, выбрав File, New Browser (или что-то подобное).
Однако, сослаться на такое окно из JavaScript не
удастся.
При помощи JavaScriptмoжнo открывать и закрывать
окна браузера. Разработчик может создать новое окно с
определенным документом, загружающимся в него при
выполнении некоторых условий. Можно также указать,
например, размер нового окна и параметры, доступные
в окне, а также присвоить окну имя (для ссылок на него).
Хотя открытие окна подобно созданию нового объекта
Window, в данном случае конструктор new не
используется. Вместо этого применяется следующий синтаксис:
WindowVar = window.open (URL, windowName,
[, windowFeatures])
Параметры метода ореп():
URL. URL целевого окна. Этот параметр не
обязателен. Если URL — пустая строка (""), браузер
открывает пустое окно, позволяя использовать метод
write() для создания динамического HTML.
• windowName. Имя объекта Window. Имя также не
обязательно; однако для обращения к окну с помощью
ссылок или форм имя необходимо. Можно
присвоить имя позже, через свойство window.name.
• windowFeatures. Список атрибутов отображения для
окна браузера.
Если окно открылось, метод ореп() возвращает
метку объекту Window. Если окно почему-либо не было
открыто, данный метод возвращает значение Null.
ПРИМЕЧАНИЕ
Два имени, относящихся к окну, функционально — не
одно и то же. Рассмотрим следующий код:
myWindow=window. open (" " , " newWindow") ;
myWindow — переменная объекта, который открыл
newWindow. newWindow — имя нового окна. На
свойства нового окна можно ссылаться с помощью
переменной myWindow. Ссылки и формы могут об-
■■■■ Использование DOM
Ei!£J Часть III
ращаться к новому окну с использованием его имени
new Window.
Ссылки на окна
При работе с одиночными и множественными
фреймами в JavaScript-приложениях, возможно, потребуется
использовать и другие способы ссылок на окна. JavaScript
обеспечивает четыре вида ссылок на окна, и каждый из
них реализуется как свойство объекта Window. Более
подробная информация относительно ссылок на окна и
фреймы будет дана в главе 18.
ПРИМЕЧАНИЕ
Отдельные окна браузера не имеют иерархической
структуры; однако, окно, содержащее код, который
открывает другое окно, часто называется
родительским окном. Соответственно, новое окно называется
дочерним. Любое новое окно можно присвоить
переменной из других окон так, чтобы другие окна могли
ссылаться на нее и ее свойства. Для ссылки на свойство
в новом окне используйте windowName.property.
Рассмотрим следующий код:
newWindow = window. open () ,
newWindow.location href = "http://www.mcp.com/";
Хотя этот фрагмент — не самый эффективный
способ записи кода, он демонстрирует способ ссылки на
свойство дочернего окна. Новое окно открывается и
получает имя (в данном случае, newWindow). Затем
устанавливается scation.hre. нового окна.
Текущее окно
В главе 9 обсуждалось использование окон для ссылок
на текущее окно. Однако, не было упомянуто, что объект
Window содержит свойство под названием window,
которое может использоваться как инструмент ссылки на
самого себя. Кроме того, свойство self объекта Window —
еще одно средство сделать окно текущим или активным.
Например, следующие две строки кода —
функционально идентичны:
window defaultstatus = "Welcome to the Goat
Farm Home Page"
self. defaultstatus = "welcome to the Goat Farm
"-Home Page"
Поскольку window и self— синонимы текущего окна,
может показаться странным, что оба они включены в
язык JavaScript. Как показано в предыдущем примере,
это объясняется необходимостью увеличения гибкости,
т.е., по желанию, возможно использовать либо window,
либо self.
Однако, насколько полезными могут быть window и
self, настолько же они могут стать запутанными, если
подойти к этому логически. В конце концов, свойство
объекта, которое используется как эквивалентный
термин для самого объекта, довольно необычно.
Следовательно, window и self будет удобнее считать
зарезервированными словами для объекта Window, а не его
свойствами.
Поскольку window и self— свойства объекта Window,
нельзя использовать и window, и self в одном и том же
контексте. Например, следующий код не будет работать:
window.self.document.write("<hl>Test.</hl>")
Наконец, в мультифреймовых средах window и self
всегда относятся к окну, в котором выполняется JavaScript-
код.
ПРИМЕЧАНИЕ
В некоторых объектно-ориентированных или
основанных на объектах языках self может относиться к
активному объекту, независимо от его типа. В JavaScript
self относится только к активным объектам Window
или Frame — и ни к чему больше.
Определение содержимого окна
Параметр URL определяет, какое содержимое появится
в новом окне. Если задается какое-то значение, браузер
пытается найти и отобразить указанный документ:
NewWindow = window.open("http://
www.acadians.com", "AcadiaPage", LO:WRONG)
С другой стороны, можно отобразить пустую
страницу, указав в качестве параметра TJRL пустую строку
(""). Используйте эту методику при необходимости
динамического создания HTML-страницы с
использованием JavaScript:
newWindow = window.open ("" , "DynamicPage" "")
newWindow. document. write ("<Hl>Document Created
fusing JavaScript.</Hl>")
newWindow.document, close ()
В главе 16 подробно рассматривается использование
метода write() объекта Document для создания
динамического HTML.
Определение атрибутов окна
Параметр windowFeatures необходим при отображении
окна, т.к. с его помощью настраивается внешний вид
открытого окна. Параметр windowFeatures не обязателен;
если он не используется, отобразится окно с такими же
атрибутами, как у текущего окна. Таблица 15." содержит
список атрибутов внешнего вида окна.
ПРИМЕЧАНИЕ
Атрибуты alwaysRaised и z-lock, добавленные в
JavaScript 1 .2, работают только на платформах
Windows и Macintosh.
Объект Window
Глава 15
Таблица 15.2 . Атрибуты метода ореп() для отображения окна.
Атрибут
Описание
width Ширина клиентской области Navigator в пикселах. См. innerWidth, который появился в JavaScript 1.2.
height Высота клиентской области Navigator в пикселах. См. innerHeight, который появился в JavaScript 1.2.
dependent Если значение равно - es. создает дочернее окно из текущего окна; в Windows дочернее окно в панели
задач не появляется. Дочернее окно закрывается одновременно со своим родительским окном.
Появился в JavaScript 1.2.
toolbar Отображает/скрывает инструментальную панель браузера.
menubar Отображает/скрывает меню браузера.
scrollbars Отображает/скрывает горизонтальную и вертикальную полосы прокружи браузера.
innerWidth Определяет ширину области содержания окна. Окна размером меньше, чем 100x100 пикселов, требуют
подписанного сценария. Атрибут появился в JavaScript 1.2. Заменяет width, который также может
использоваться для совместимости сверху вниз.
innerHeight Определяет высоту области содержания окна. Окна размером меньше, чем 100x100 пикселов, требуют
подписанного сценария. Атрибут представлен JavaScript 1.2. Заменяет height, который также может
использоваться для совместимости сверху вниз.
resizable Разрешает/запрещает изменение размеров окна браузера.
screenX Определяет расстояние от левой стороны экрана до нового окна. Окно может быть помещено за
пределами экрана с помощью атрибута в подписанных сценариях. Появился в JavaScript 1.2.
screenY Определяет расстояние от вершины экрана до нового окна. Окно может быть помещено за пределами
экрана с помощью этого атрибута в подписанных сценариях. Появился в JavaScript 1.2.
status Отображает/скрывает строку состояния браузера.
location Отображает/скрывает окно URL-адреса.
directories Если значение равно yes, отображает вторичную инструментальную панель (Netscape) с кнопками
наподобие "What's New" и "What's Cool".
copyhistory Копирует список посещений текущего окна в новое окно.
outerWidth Ширина окна Navigator в пикселах (JavaScript 1.2).
outerHeight Высота окна в пикселах (JavaScript 1.2).
left Расстояние в пикселах от левой стороны экрана (JavaScript 1.2).
top Расстояние в пикселах от верха экрана (JavaScript 1.2).
alwaysLowered Создает окно браузера, которое всегда помещается ниже других окон, независимо от того, является ли
оно активным (появился в JavaScript 1.2). Безопасная возможность, требующая подписанного сценария.
alwaysRaised Если значение равно yes, создает окно браузера, которое помещается выше других окон, независимо
оттого, является ли оно активным. Появился в JavaScript 1.2. Безопасная возможность, требующая
подписанного сценария.
z-lock Создает новое окно браузера, которое не всплывает поверх других окон при помещении в фокус
(JavaScript 1.2).
Атрибуты height и width определяют размеры окна в
пикселах и совместимы сверху вниз с JavaScript 1.0 и 1.1,
хотя предпочтительнее использовать вместо них соответ-
ствуюлие ключевые слова — innerWidth и innerHeight.
Остальные атрибуты устанавливаются с помощью
логически* значений: значение true — 1, yes или атрибут
alone; значение false — 0, по или отсутствие атрибута
вообще. Например, если необходимо отобразить новое
окно только с инструментальной панелью и меню,
используют следующий синтаксис:
N Window = window.open (LO:WRONG,
"toolbar=l, menubar=l")
"myWindow",
Следующий синтаксис также допустим:
NewWindow = window, open ("", "myWindow"
"toolbar=yes, menubar=yes")
NeT-7WindoT-7 = window. open (" " ,
"myWindow", "toolbar, menubar"i
Таким образом, можно просто не учитывать те
атрибуты, которые не определены. Эти атрибуты имеют
значения false.
ПРИМЕЧАНИЕ
Атрибуты outerWidth, outerHeight, left и top,
добавленные в JavaScript 1.2, обеспечивают абсолютное пози-
Использование DOM
Часть III
ционирование окон браузера на рабочем столе.
InnerWidth и innerHeight обеспечивают контроль над
точными размерами окон браузера, хотя при
использовании JavaScript 1.0 или 1.1 вместо них
необходимо применять ключевые слова width и height.
СОВЕТ
Ошибка в некоторых версиях браузера Netscape Navigator
не позволяет использовать метод window.openj) для
отображения документов. Для обхода этой ошибки
нужно повторить команду открытия окна:
myWindow = window, open ("new.html" , "newWindow");
myWindow = window, open ("new. html", "newWindow");
При таком повторении nev\M/indow и его документ
отобразится во всех версиях браузеров Netscape Navigator.
ПРИМЕЧАНИЕ
В дополнение к методу window.ореп(), для открытия
нового окна можно также применять атрибут ссылки
TARGET = "_blank" или даже целевой атрибут со
значением любого имени (окна или фрейма), не
используемого в данный момент. Ссылка <HREF =
"foo.html" TARGET = "bar">foo</A> открывает
окно браузера, именует заголовок окна и загружает
в окно документ foo.html, пока одно из текущих окон
или фреймов не получит имя bar (имена окон и
фреймов зависят от регистра).
Кроме того, ссылка TARGET = "_blank" создает
непоименованное окно, которое в дальнейшем тяжело
поддается модификациям. С помощью blank
ссылка (та же самая ссылка или другая) просто создает
еще одно новое окно вместо обновления открытого
ранее.
Закрытие окон
Для закрытия окна используют метод cJose() объекта
Window. Если требуется закрыть текущее окно, вызов
метода будет выглядеть просто KaKWindow.dose(). В
отличие от других методов объекта Window, таких как
alert() или setTimer(), метод closeQ должен всегда
сопровождаться объектной ссылкой. Если метод close()
использовать без объектной ссылки, может закрыться
текущий документ, а не окно, в зависимости от контекста
вызова метода. Причина в том, что объект Document
также имеет метод ciose(). Таблица 15.3 содержит
некоторые типичные коды сценария, в которых можно
применять метод clos ().
ПРИМЕЧАНИЕ
Более поздние версии Netscape не допускают, чтобы
метод window.closel) закрывал окна, которые были
созданы не JavaScript. Эта мера защиты не
позволяет шутникам вставлять нежелательный код в гостевые
книги и т.п. Данная мера не затрагивает любое
законное использование метода window.closel).
Функция или обработчик событий с window.close()
закрывают окно, содержащее их:
<FORM>
<INPDT TYPE="BUTTON" VALUE="Close W ndow"
onClick="top.close()">
</FORM>
ПРИМЕЧАНИЕ
Для обработчика событий типа onClick необходимо
определять имя окна, например, window, parent, top,
self либо имя установленной переменной, например,
myWindow, как в- indow.close 'miMBinyWindow.closel).
Простое использование close!) в обработчике
событий подразумевает document, ~lose().
Можно закрывать окно с помощью ссылки на то же
самое окно, из которого данное окно было открыто,
используя переменную, установленную равной новому
окну:
rayWindoT-j window, open ("new.html" , "newWindow");
<FORM>
<INPUT TYPE="BUTTON" VALUE="Close Window"
onClick="myWindow.close () " >
</FORM>
ПРИМЕЧАНИЕ
newWindow.closel); работать не будет. Имя newWindow
можно использовать в предыдущем примере для
идентификации окна (свойство window.name) и для
адресации окна в ссылках и формах. Однако, нельзя
использовать newWindow для ссылки на новое окно и его
свойства.
Таблица 15.3. Метод closeQ и открывающие окна.
Close()/Opener
Описание
window.opener.closeQ
document.write("<br>opener property is " н
window.opener.name)
top.opener.close()
window.opener.document.bgColor='bisque'
window.opener=null
Закрывает окно, из которого было открыто текущее окно.
Определяет имя окна, из которого было открыто текущее окно.
Закрывает главное окно браузера.
Изменяет цвет фона окна, определенного свойством opener.
Устанавливает значение свойства opener равным Null, предотвращая
закрытие открывающего окна.
Объект Window
Глава 15
СОВЕТ
При использовании i метода window.closej) хорошо было
бы обеспечить кнопку или ссылку для пользователей,
чтобы они могли закрыть новое окно по завершении
работы с ним. (Некоторые пользователи, в
особенности новички, могут не знать, как закрыть окно, или
могут по ошибке выйти из браузера вместо закрытия
окна.) Можно использовать условный оператор для
создания закрывающей кнопки или ссылки, если
документ загружен в названном явно окне (новое окно):
<SCRIPT IANUAGE="JavaScript">
<! —
//newWindow is tha nama givan tha na1 window
if(tcp.nama == "newWindow" {
document.write ('<A HREF=" javascript:
top.close()>close</A>"■ +
" this window to raturn to previous window.")
] // Для наглядности угловые скобки на
// прадставляются своими кодами:
// unescape("%3C"), unescape("%3E").
//Однако в раальньр: кеда?: это потрабуатся
//делать, чтобы они на воспринимались как
//дескрипторы комментария в старьр: браузерах.
// "->
--./SCRIPT.»
Форма на рис. 15.1 демонстрирует различные
аспекты открытия и закрытия окон. Заполняя форму, можно
по желанию определить просмотр нового окна.
Листинг 15.1. OpenWindow.htm.
E**„tfc-j***.£< Si»-* ч*# Uf*re k^sbiv -ЙЧ^м' Л* "
.«' Ц, _x_JBjaJi[LJ
m
Window Open Example
Plana sefeef oa/ollowtngotaplayopaons intf ttnn click If» г ил WmdowDtmon.
Wouluyoullto тааытдрэнеоголр. creaedon1 *fy?
" E>timg Ряда |
f L^nam Pafle
tMndow Attributes:
Г" ТЪо1Ьле Г" IKnUMT Г ЭСЕо1ШаГй Г ПелкаЫе
Г Stattu Г Location Г DlcectorLeB I 'apy Bietocf
Г" ciutm 11 «a
vtufch;
Height:
О&Яипфл&Г- | &№> vow*./
*$tMst4p»-£AmMawa±tQi
В первом поле определяют параметр URL —
используя существующий URL или создавая страницу "на
лету". Второе поле позволяет определять каждый из
доступных атрибутов окна. По умолчанию все поля не
заполнены. Можно заполнить требуемые из них. За счет
заполнения полей "Custom Size" можно определить
размеры нового окна.
При нажатии кнопки "Open Window" всплывает
новое окно, показанное на рис. 15.2.
Листинг 15.1 содержит исходный код этого примера.
<html>
-~'haad>
---titla.»Wmdow L)parj>--/titla.~
-.SCRIPT IANGUAGE^'JavaScript'^
<!
таг nav. window
// Открыть окно на О'П
function openWindow() {
атрибутов, опрадаланньр: пользоватал~м
списка параметров windowFeatures
/ / Построаниа
var winAtts = ""
if (document.winOptions.toolbarOption.checked) {
rinAtts += "toolbar=l," J
if (document. winOptions. menubar Option, checked) {
' rinAtts += "menubar=l," I
if (document.winOptions.scrollbarsOption.checked) {
winAtts += "scrollbars=l," ]
if (document.winOptions.resizableOption.checked) {
nAtts += "resizable=l," i
if (document.winOptions.statusOption.checked) {
" rinAtts += "status=l," )
if (document. winOptions. locationOption. chackadi {
winAtts += "location=l," )
if (document.winOptions.directoriesOption.checked) (
winAtts += "directories=lf" I
if (document. winOptions. copyHistoryOption. checked) (
winAtts += "copyhistory=l," I
if (document.winOptions.customSizeOption.checked)
winAtts += "height=" + document.winOptions.heightBox.value
winAtts += "width=" + document. winOptions. widthBox. valua +
I
.finAtts = winAtts. substring (0, winAtts . length-2)
// L/прад лить URL и отобразить окно
Использование ЛОМ
Часть III
if (document.winOptions.pageType[l] .checked) i
van urlVax = ""
urlVar = document. wmOptions . ur lBox. value
newWindow = window, open (urlVar, "newWindow" ,winAtts) )
neiTWindow = window. open ("" ,"n^Mmdi^T" ,winAtts)
newWindow. document. wri te ("<Hl>Window Open Test</HlXp>")
)
)
// Закрыть okro
function closeWindow ( ) {
newWindow . close ( )
}
// —>
--VSCRIPT>
--/he-ad>
<body background^' . ./lt_rock.gif">
<hlXfont color="#008040">Window Open Example</fontX/hl>
<pXiXb>Please select the following display options md then click
the Open Window button. </1Х/Ж/р>
<form name="winOptions" method="POST">
---p>Would Y'i'U like an existing page or one cr 5d 1 th 5 fly?----/p>
<input
type=radio
checked
name="pageType"
value="existing">Existing Page
---input
type=text
size=30
maxlength= 56
name= ur Box" x/p>
<input
type=radio
name="pageType "
value=" dynamic ">Dynamic Page</p>
<hr>
<p>Window Attributes :</p>
<preXinput
type=checkbox
name="toolbarOption"
value="ON"
>Toolh>ai: --input
type=checkbox
name="menubarOption"
value="ON">Menubar -input
type=checkbox
name="scrollbarspption"
value=,,ON">Scrollbars <input
type=checkbox
name="resizableOption"
ralue="ON">Resizable</pre>
<preXinput
type=checkbox
naroe="s tatusOption"
value="ON">Status <input
type=checkbox
name="locationOption"
value="ON">Location <input
type=checkbox name="directoriesOption"
value="ON">Directories ^mput
type=checkbox name—"copyHistoryOption"
value="ON">Copy History</pre>
<preXinput
type=checkbox
name="cusfcomSizeOption"
value="ON">Custom "izt ;/pr->
ШШ
Объект Window
<pre>Width: <input
type=text
size=5
maxlength=5
name="widthBox"> Height: <input
type=text
size=5
maxlength=5
name="heightBox"> <input
type="button"
name= " OpenButton "
value="Open Window"
onClick="openWindow() "> <input
type="button"
nanie="CloseButton"
value="Close Window"
onClick="closeWindow() "X/pre>
</form>
<p & ± sp;</p>
</body>
</html>
Глава 15
Window
2
i *l
11/нпЬлв|деп.Нл1
M
xample
■Лола ы Шел el f. the Open inaowbutton.
rme created on ■ fly?
Winflaw attribute 5
I Гоо1Ьд1 Г кг«1Ьи Гэ-эсьИьа» Гш|1иис
Г etu-i Г atlDII Г"т^Ес«оС1Чя Г ппру Pnurr
Р" Custom 51»;
jIASJ
РИСУНОК 15.2. Отображение нового окна.
Навигация между окнами
Возможно, что в течение одного сеанса пользователь
откроет большое количество окон; однако, в каждый
момент времени только одно окно из них может быть
активным, т.е. быть в фокусе. Наличие фокуса означает,
что окно может непосредственно получать вводимые
данные и отвечать на ввод пользователя. Кроме того,
окно в фокусе — обычно самое верхнее окно на
дисплее, т.е. окно в активном режиме накладывается на
другие окна. (В UNIX и X Window окно в фокусе бывает и
на заднем плане.)
Пользователь может передвигаться между окнами с
помощью мыши. Обычно щелчок на окне переводит на
это окно фокус. В некоторых версиях UNIX для
перевода окна в фокус достаточно перемещения курсора
мыши поверх окна; напротив, вывод курсора за
пределы окне выводит и фокус (или деактивирует) из окна.
Перекладывание действий на пользователя — не
единственный путь, а иногда — и не лучший путь
передачи окну фокуса. JavaScript и HTML
обеспечивают несколько методов для установки и удаления фокуса
автоматически — с использованием кода. Эти
автоматические установки и удаления фокуса позволяют
перемещаться по окнам с минимальным участием
пользователя или вообще без оного. Вместо генерации
сообщения для пользователя, приглашающего щелкнуть на
окне, код может автоматически передавать фокус окну.
Это не означает, что пользователь не будет управлять
сеансом, однако он получит помощь, подобную
автопилоту.
Хотя многим сайтам не нужны многократные окна,
сайтам, которые в них нуждаются, может оказаться
удобно программно управлять этими окнами. JavaScript
предоставляет хорошие средства управления окнами с
помощью открывающих и закрывающих методов,
описанных выше, и с помощью методов установки и
удаления фокуса из окна. Все эти методы управления
окнами объединяются в программную систему навигации
поокнам.
В JavaScript простое определение объекта окна или
его документа, или даже изменение свойства в окне, не
переводит окно в фокус. Переводить окно в фокус
можно двумя способами:
Косвенно, устанавливая в фокус один из объектов в
окне.
Непосредственно, устанавливая фокус на само окно.
Косвенная установка фокуса
Окно, открытое с помощью переменной myWindo^ и
содержащее документ с формой my Form и элементом
ввода myliipul может получить фокус через окно, из
которого оно было открыто, с помощью такого кода:
ШВфЯ Использование DOM
EiifiJ Часть" III
myWindow. document.myForm.mylnput. focus () ;
Элемент ввода, my Input, получает фокус, и в
результате myWindow, который содержит mylnput, также
получает фокус.
Новое окно может передавать фокус окну, которое
открыло его, с помощью своего свойства opener:
window.opener.focus ();
ПРИМЕЧАНИЕ
Свойство opener поддерживается в JavaScript 1.1 и
следующих версиях.
Для перевода фокуса из нового окна на окно, из
которого оно было открыто, в ранних версиях JavaScript-
браузеров для нового окна требовалась переменная для
ссылки на открывающее окно:
myWindow = window.open("new.html", "newWindow");
myWindow. oldwindow = top;
Новое окно может ссылаться на старое окно и
косвенно передавать ему фокус:
oldWindow.Document.myForm.mylnput. focus () ;
Прямая установка фокуса
Окно может получить фокус непосредственно при
использовании метода window.focus(). Если окно
ссылается на другое окно с помощью переменной типа myWindow,
оно передает фокус другому окну:
myWindow.focus();
Новое окно может передавать фокус окну, которое
открыло его, с помощью свойства opener:
window.opener.focus();
Вызов функции в окне может передавать фокус окну,
если функция содержит window.focus():
function focusDemo () {
top.focus;
. . . остальная асть функции
}
ПРИМЕЧАНИЕ
Методы window.focusl) и window.blur(), как и
свойство opener, поддерживаются только в JavaScript 1.1
и следующих версиях. Для обеспечения согласования
с ранними версиями браузера необходимо
использовать косвенную методику установки фокуса.
Удаление фокуса
Деактивизация окна (удаление из него фокуса)
выполняется путем передачи фокуса другому окну.
Поскольку в каждый момент времени только одно окно может
иметь фокус, передача фокуса окну непосредственно или
косвенно деактивизирует другие окна.
С помощью метода window.blur() из окна можно
непосредственно удалить фокус без передачи фокус"
другому окну. Для windo\v.blur() можно использовать
любое из средств, применяемых с window.fbcus().
ПРИМЕЧАНИЕ
Согласно документации Netscape, щелчок на ссылке
в окне передает этому окну фокус:
<А KREF="some.html" TARGET="myWindow">My Window</A>
Щелчок на ссылке загрузит документ some.htrrl в окно
myWindow и передаст фокус myWindow. Если myWindow
не существует, будет открыто новое окно, после чего
в него загрузится some.html и новое окно получит
фокус.
Эта методика работает не во всех версиях браузеров.
Иногда, если окно уже открыто, оно может и не
получить фокус.
Отображение окон сообщений
Диалоговые окна — традиционно важная часть
прикладной программной среды. Пользователям Windows
известно, что диалоговые окна присутствуют как в
данном, так и в других графических пользовательских
интерфейсах. JavaScript может отображать стандартные
диалоговые окна для уведомлений пользователя или
получения информации перед продолжением работы.
Однако, из-за немодального характера Web использовать
диалоговые окна не рекомендуется. Обычно лучше
связываться с пользователем другим способом.
СОВЕТ
Модальные диалоговые окна достаточно обычны в
прикладных программах Windows. Если вы пришли из мира
Windows 4GL, убедитесь, что вы подкорректировали
свое мнение относительно их использования.
Язык JavaScript не так строго понимает это
замечание, добавляя префикс к отображаемым сообщениям.
Для сигнальных сообщений, перед сообщением
появляется "JavaScript Alert". Для диалоговых окон
подтверждения — "JavaScript Confirm", а в диалоговых окнах
подсказки появляется "JavaScript Prompt". В результате
пользователь может легко определить источник
появившегося диалогового окна.
ПРИМЕЧАНИЕ
Помимо возможности обеспечения самого сообщения,
не существует возможности настраивать просмотр
окон сообщений JavaScript. Заголовок и пиктограммы
— всегда одни и те же.
Простое уведомление
Для передачи пользователю информации используется
метод alert() объекта Window(). Сигнальное диалоговое
Объект Window
Глава 15
окно отображает сообщение с одной кнопкой "ОК".
закрывающей данное окно. Это модальное диалоговое
окно, поэтому пользователь будет вынужден закрыть его
перед продолжением работы в браузере (даже в муль-
тифреймовых документах). При закрытии диалогового
окна никакие значения не возвращаются. Его синтаксис
таков:
[window.]alert(message)
Можно отображать информацию относительно
текущего окна в сигнальном сообщении с помощью кода,
показанного в листинге 15.2.
Листинг 15.2. DisplayWindowlnfo.htm.
<HTML>
<HEAD NAME = "WindowPane">
-:SCRLT LANGUAGE = "JavaScript">
function displayWxndowInfo() {
vair wmfnfo = ""
anlnfo = "Number of frames
window. length -+
wmlnfo += "Window
window.window +
nnlnfo += "Wmdov
window. parent ^
wmlnfo += "URL: "
alert(winlnfo)
J
"\r"
obj e'"t naiTie: "
"\r"
parent name: "
"\r"
+ window, location
■\r"
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT
Type= "button"
Value="Display Window Information"
OnClick="displayWindowInfo() "
</INPUT>
</FORM>
.; 'body>
На рис. 15.3 показано сигнальное диалоговое окно,
которое отображается при нажатии кнопки.
Параметр message метода alert() — обычно строка,
хотя это не обязательное требование. Поскольку JavaScript
не является строго типизированным языком, можно
отображать информацию других типов данных без
преобразования данных в строку. В качестве параметра
можно использовать даже объект, как показано в
листинге 15.3. На рис. 15.4 представлен результат.
Листинг 15.3. DisplayWindowObjectInfo.htm.
<HTML>
<HEAD>
<SCRIPT LANGUAGE
"JavaScript">
function Application (Title, ProgramName,
Path, Vendor) {
this.Title = Titfe
this. ProgramName = Progr, "
this. Path = Path
this. Vendor = Vendor
function displayApp () {
alert(Application)
</зсн1рт>
</HEAD>
<BODY>
<H1X/H1>
<FORM>
<rHPUT
Type="button"
Value="Display Object Lefmition"
OnClick="displayApp() "
.:.'irJP'UT>
</FOPM>
•: 'BODY>
r*-
VrctwMistriumeiat*! ty/r>to*)
"■ ^ t. i—
«fc< * *_Л* о . _i4f^M B«***tw#r(P<***vf^i.!, .......
3 №
РИСУНОК 15.3. Сигнальное диалоговое окно.
*Ъг:'Ъ&'.\**:"$а ДГ**АА -цмт». ftiCWoi*
jrfKr.jIWj EVwrtj*JJrh*jhh*Oi*pll'WJa***fiiltai
■'■ ,OLS^eyCS]f*a6cU^ :-\
ыедсер*
,( ■" rn^HS
tin» 4.it*nt^Sa^MHmir
hiDtM га-
'3}JBB/' '•«***
ЙХ*л[-Осар** -^=jiJ№W. \*ЯгШ**^}Ко*л*4» Лд*йи^*— =. ..
ИПх
--'" Ш
РИСУНОК 15.4 Определение объекта, отображенное в
сигнальном диалоговом окне.
Yes/No-подтверждение
Использование DOM
Часть III
В дополнение к простому отображению информации в
диалоговом окне, можно задавать пользователю вопрос,
используя метод confirm() объекта Window. Диалоговое
окно подтверждения отображает кнопки "ОК" и "Cancel",
причем каждая из них возвращает значение. "ОК"
возвращает true, a "Cancel" — false. Как подразумевается в
имени метода, обычно используют диалоговые окна
подтверждения, чтобы пользователь подтвердил действие,
которое собирается совершить. Синтаксис в данном
случае выглядит так:
returnValue
[window.]confirm (message)
Обычное диалоговое окно подтверждения должно
предлагать пользователю подтвердить отправку формы
либо сообщения по электронной почте. Листинг 15.4
показывает, как можно использовать метод confirm() для
возврата значения onSubmil обработчику событий
формы. Если пользователь щелкает на "ОК", форма
отправляется по указанному адресу. Если же щелчок
выполняется на кнопке "Cancel", событие не генерируется.
Листинг
15.4. JavaScriptChronicles.htm.
Free Subscription
<html>
<head>
<title>Untifcled Normal Page</title>
<SCRIPT LANGUAGE="JavaScript">
function conf irmAction ( ) {
return confirm ("Do you really want
^this subscription?")
.=/SCRIPT^
</beatd>
<body>
<h2Xem>JavaScript Chronicles
FornK/emX/h2>
<£orm
action="mailto: subscribe@jschronicles . com"
method="POST"
name="SubscribeForm"
onSubmit="return confirmAction()">
<ol>
<li>What other magazines do you currently
subscribe to?
=-prexinput type=checkbox name="Cl-SKU01"
value="SKU01">PC Week
<mput type=checkbox name="Cl-SKU04"
value= " SKU04 " >DEMS
e input type=checkbox name="Cl-SKU07"
value=" SKU07 " >Wired
<input type=checkbox name="Cl-SKU10"
value=" SKU10 " > Yahoo
<input type=checkbox name="Cl-SKuu2"
value=" SKU02 " >InfeWorld
<irrpufc type=checkbox name="Cl-SKU05"
value="SKU05">Databased Advisor
<input type=checkbox name="Cl-SKU08"
value="SKU08">Web Publisher
<input type=checkbox name="Cl-SKUll"
value="SKUll">Internet Advisor
<input type=checkbox name="Cl-SKU03"
value="SKa03">PC Magazine
<input type=checkbox name="Cl-SKU06"
value="SKU06">Delphi Informant
<input type=checkbox name="Cl-SKU09"
value="Cl-SKU09">Web Informant
<input type=checkbox name="Cl-SKU12"
value=" SKU12">JavaWorld
</pre>
< li>
<li>Please enter the reason you would like to
subscribe to
<em> JavaScript Chronicles : </emXbr>
<br>
<textarea
namG="Comments"
rows=6
cols=46>
</textareaX/li>
</ol>
<-»
<input
type=submit
name=,'Submit"
value="Submit" >
</form>
</body>
</html>
На рис. 15.5 показано окно подтверждения, которое
отображается при нажатии кнопки "Submit".
""
•a J*.
Г 1ч„.
Г IrfollDirU
Г в Р э^г
f Inured LOVlsct
Г г M.i
V tlpLl ТтЮгащ,,.
^
ЛИВШАЯ V
•f* f^tf^*» '{gBerteJte^Efgfri-MnKaat " [^Я"ДВД *
^'"«
РИСУНОК 15.5. Диалоговое окно подтверждения возвращает
ответ пользователя.
Пользовательский ввод
Третье диалоговое окно, которое можно использовать
для получения пользовательского ввода, вызывается с
помощью метода Prompt() объекта Window.
Воспользуйтесь диалоговым окном подсказки, когда требуется
получить значение от пользователя. Это диалогоно! окно
Объект Window
состоит из сообщения, поля пользовательского ввода и
кнопок "О К" и "Cancel". Метод Prompt() имеет
следующий синтаксис:
retumValue = [window. ]prompt (message,
defaul tReply)
Как видно из этого примера, в дополнение к
указанию сообщения диалогового окна необходимо
определить параметр defaultReply. Это значение будет заданным
по умолчанию текстом, вставляемым в поле
пользовательского ввода окна. Данный параметр нужно
определять даже в том случае, когда он не имеет никакого
значения по умолчанию.
ПРИМЕЧАНИЕ
Будьте уверены, что для диалогового окна подсказки
определен заданный по умолчанию ответ. Если не
добавлять этот параметр. JavaScript поместит в поле
ввода Undefined, которое может запутать
пользователей. Если значений по умолчанию нет, используйте
для этого параметра пустую строку ("").
Если пользователь щелкает на "ОК", метод Prompt()
возвращает значение строки, введенное пользователем.
Если пользователь ничего не ввел, возвращается пустая
строка (""). Однако, если он щелкнет на "Cancel",
возвращается значение Null.
ПРЕДУПРЕЖДЕНИЕ
Не считайте, что пользователь будет всегда нажимать
на "ОК" в диалоговом окне подсказки. Всякий раз при
использовании метода PromptO необходимо
гарантировать, что непустое значение возвращается раньше,
чем оно будет использовано в вычислениях. В таком
случае, если пользователь нажмет на "Cancel",
программа будет работать со значением строки "null",
а не с тем, что было фактически введено
пользователем в поле текстового ввода.
Листинг 15.5 показывает пример использования окна
подсказки. Пользователю предлагают ввести текст в поле
(см. рис. 15.6). Этот текст затем используется в новом
окне, как показано на рис. 15.7.
Листинг 15.5. UserTexthtm.
<HTML>
<HEAD>
<SCRI?T LANGUAGE
"JavaScript">
function showBox() {
userText = prompt ("Enter the text
your " + "personalized browser
window." "My own browser text")
if (userText )— null) {
userWindow = window.open("",
"userTextWindow", "toolbar=0")
user' indow.document.write("<hl>" +
userText + "</hl>") }
i
for
Глава 15
<FORM>
<UNPUT
Type="button"
Value="Create Your Own HTML Page"
OnClick="showBox()"
</INPUT>
</FORM>
</BODY>
Возвращаемое значение — это всегда строка. Если
нужно обрабатывать его как другое значение, сначала его
необходимо преобразовать. Например, если требуется
вычислить общую стоимость на основе определяемой
пользователем процентной ставки, можно получить ее
значение с помощью метода Prompt(), как показано на
рис. 15.8. Затем перед вычислением полной стоимости
следует преобразовать это значение в вещественное
число при помощи метода parseFloat(). Листинг 15.6
показывает код этого примера.
„ Е 3uWJJ B*riHdV»1 IVlbbI -«Ил*
tin EwiinMsggt ■
KHKW (Я V РтпИ
И
РИСУНОК 15.6. Диалоговое окно подсказки.
Листинг 15.6. Calc.htm.
<HTML>
<HEAD>
--'.SCRIPT LMJGUAGE =
"JavaScript">
</SCRIPT>
function getPercentageRatef) {
percent = prompt ("What is the current
-•rate?", "8.5")
if (percent 1= null) С
totalPrice = parseFloat (percent) * 20000
alert(totalPrice) }
)
</SCRIPT>
<BODY>
<FORM>
<INPUT
Type="button"
Value="Calculate Total Price"
OnClick="getPercentageRate()"
</INPUT>
</FORM>
</BODY>
Использование DOM
^асть III
i-SflfrMf^rtirWK^VlWttife^rilAfprMvvrctMift
My own browser text
РИСУНОК 15.7 Новое окно отображает содержимое,
введенное пользователем.
J
■
№4'
1 '
№№*dHJt*Mffw*i*vl l/Wfc №■
HamapcUswrrrwmt
|*£И*ЯМ"ЯЙИйЯ|3'*Я-* Я»^И
;
**i
13
г-
-r>
des*"™**-»*^ *ЙЙ#- (*чм*-'
РИСУНОК 15.8 Пользовательски'ввод.
Работа с сообщениями строки
состояния
Строка состояния браузера может оказаться важным
средством взаимодействия с пользователем. Здесь
можно задействовать два свойства объекта Window,
defauItStatus и status, для управления отображенным
текстом.
Вообще говоря, использовать строку состояния
можно двумя способами. Первый способ — отображать
заданное по умолчанию сообщение в строке состояния.
Пользователь видит это сообщение, не выполняя
никаких действий. Заданное по умолчанию сообщение
отображается через свойство defauItStatus. Свойство defauItStatus
может быть установлено в любое время — то ли после
загрузки окна, то ли после его открытия.
Второй способ — отображать временное сообщение
поверх заданного по умолчанию текста. Фактически, это
сообщение обычно появляется, когда пользователь
продуцирует событие, например, перемещая мышь. Это
сообщение можно устанавливать с помошью свойства
status.
Рисунок 15.9 иллюстрирует использование свойств
defauItStatus и status.
{.М.'О V**-tc. .Й>+.м» Us*4i" \1ч
JSl.
„ 4.MiIVn' ь tJXhvUfmm^Hm
"5ТП
http ://www. acadians.com
|v/ cameYoAelar LRLage
"H_-0j3S7|
|а»№я] afctw'fr ^]cjh'™- ?HawrtMW.^ fe
.ia_
■ДЯ- ^
РИСУНОК 15.9. Установка свойств defauItStatus и status.
Код для этой страницы показывает три действия для
изменений сообщения в строке состояния. Сначала
приведенный ниже набор кодов устанавливает заданное по
умолчанию сообщение при открытии окна:
window.defauItStatus =
WURL page."
"Welcome to the large
Во-вторых, когда пользователь переходит на
ссылку "Go", ее обработчик событий onMouseOver
вызывает следующую функцию:
function changes tatus () С
window, status = "Click me to go to the
*■> Acadia Software home page.,r
J
В-третьих, чтобы изменить текст заданного по
умолчанию сообщения состояния, пользователь может
выбрать одно из сообшений объекта Select. Когда
вызывается обработчик событий onClick кнопки "Change", он
вызовет следующую функцию:
function changeDefaultStatus () С
window. defauItStatus =
window.document.statusForm.messageList.
options [window, document. statusForm.
wmessageList.selectedlndex].
text
I
Листинг 15.7 содержит полный исходный код этого
примера.
Резюме
В этой главе детально исследовался верхний уровень
иерархии JavaScript-объектов. Рассмотренные объекты
работают скорее с различными аспектами окна
браузера, нежели с HTML-дескрипторами. Как объект
верхнего уровня в иерархии, объект Window отвечает за
Объект Window
Глава 15
многое — как в мультифреймовых окнах, так и в
одиночных. Объекты Frame, Location и History являются
свойствами объекта Window и обеспечивают средства
для работы с соответствующими экземплярами
браузера. В этой главе также обсуждалось применение JavaScript
для ссылок на объекты и свойства в других фреймах и
окнах браузера.
Листинг
<html>
<head>
<title>Status Bar</title>
<SCRIPT LANGUAGE="JavaScript">
15.7.
Status.htm.
window. defaultStatus = "Welcome to the large URL page."
function changeStatus () (
window . status = "Click me to go to the Acadia Software home page."
function -hangeDef aultStatus ( ) С
window. defaultStatus = window, document. statusForm.messageList.
"" options [window .document. statusForm.messageList. selectedlndex] .text
)
II—>
</SCRIPT>
</head>
<body>
<p>£#160;</p>
<p>£#160;</p>
<p align=center>
<font color=',#008040">
<font size=7>
<str q>http: / /www. acadians. com</strongx/fontx/ ontx/p>
<p align=center>
<a href="http://www. acadians. com" onMouseOver="changeStatus () /return true">Go..
<form name="statusForm" method="POST">
<pXbr>
<br>
<br>
<br>
</p>
<p align=center>
<font size=l>To change the default status bar message, select
a message from the list below and click the Change button. </fontX/p>
<p align=centerXselect
name="messageList"
size=l>
<option selected>Welcome to the large URL page . </option>
<option>En route to Acadia Software</option>
<option>This page intentionally left (nearly) blank. </option>
<option>An exciting example of changing status bar text. </option>
</select>
<input
type=button
name="Change"
value="Change "
onClick="changeDefaultStatu () x/p>
</form>
</body>
</html>
.</a></p>
Объект Document
В ЭТОЙ ГЛАВЕ
■ Объект Document
■ Объект Link
■ ОбъектАпспог
■ Объект Image
В главе 9 был проведен краткий обзор JavaScript-
объектов каждого объектного уровня, начиная с
первого. В той же главе кратко рассматривались объекты
Document, Link, Anchor и Image, но не были детально
описаны их работа и применение. Поскольку эти
объекты предоставляют существенные функциональные
возможности с точки зрения Web-разработчика, стоит
посвятить им отдельную главу.
Глава продолжает начатое обсуждение обзором этих
объектов, часто называемых объектами документов.
Данный набор объектов включает в себя ключевой
клиентский объект Document и три его "дочерних" объекта:
Link, Anchor и Image.
Объект Document
Объект Window является объектом самого высокого
уровня для клиентских JavaScript-объектов. В этойроли
он служит в качестве контейнера, но фактически может
содержать не все подряд. Содержимое Web-документа
оставлено для объекта Document. Объект Document
играет роль JavaScript-эквивалента HTML-документа и
используется в качестве метода доступа к своим
дочерним объектам.
В этой роли объект Document является контейнером
для всех HTML-объектов, которые соотносятся с
дескрипторами <body> и <head>. Объект Document получает
значение свойства title из дескриптора <title>
(расположенного в разделе <head >) и несколько связанных с
цветом свойств из раздела <body>, который приведен
здесь:
<body
[background="i3acAgroundrmage"]
[bgcolor="backgroundColor" ]
[i.ext="foregroundColoz ]
[link=" unfollowedLinJcColoi ]
[allnk="activatedLlnkColor"]
[vlLr\k="followedL±nkColor"]
[onload="methodWame |
[ onunload=" methodMame" ] >
</body>
ПРИМЕЧАНИЕ
Хотя события onLoad и onUnload могут быть
захвачены обработчиками событий onLoad и onUnload внутри
flecKpnnTopa<body>, они являются событиями
объекта Window, а не объекта" Document.
Объект Document — решающий во время работы с
JavaScript и HTML, поскольку все действие происходит
на Web-странице в пределах документа. Таким образом,
придется ссылаться на объект Document при ссылке на
один из объектов внутри него. Например, при
обращении к объекту Form с именем invoiceForm в ссылке
потребуется указать document:
document. invoiceForm. submit ();
Если этого не сделать, JavaScript не сможет
поместить объект на страницу.
Программное создание HTML-документов
Как видно из этой книги, JavaScript можно
использовать для ответа на события, сгенерированные на
статических Web-страницах. Можно также использовать его
и для визуальной генерации HTML-страниц.
Фактически, каждый из методов объекта Document используется
для запрограммированных изменений документов:
• open([" mimeType"] открывает поток для write() и
writeln(). Его параметром может быть один из
приведенных ниже типов MIME (text/html — по
умолчанию):
text /html
text/plain
image/gif
image/jpeg
image/x-bit*nap
plugln (любой подключаемый MIME-тип Netscape)
• write (JavaScriptExpression)3aimcUBaeT выражение
JavaScript в документ.
• чгие^/яга&ирГ&ргеш'оиХакже записывает
выражение JavaScript в документ, но добавляет после
выражения символ новой строки.
• cIose() закрывает поток, открытый с помощью
метода ореп().
В то время как методы ореп() и close() открывают
или закрывают сгенерированный документ, методы
write() и writeln() обеспечивают содержимое документа.
В качестве параметра можно использовать любое
допустимое выражение JavaScript, включая литерал,
переменную или целое число. Например, каждый приведенный
ниже пример — вполне допустимое использование /rite():
var loc = "Ashford, Kent"
document.write("The castle is located in" + loc)
document.write("I stayed in the Robert
*■• Courtneys room.")
document.write("I would like" + 70 + "copies of
"that report. ")
Имейте в виду, что необходимо записывать HTML-
код, а не простой текст. Можно использовать HTML-
дескрипторы так же, как если бы документ готовился в
HTML-редакторе:
document.write ('<h3>Returr to the <a href="httx>://
"www.mcp.com">MCP</a homepage </h3Xp-' ) ■
На рис. 16.1 показан результат.
a \tEMP\5wnple.blnl - MiGrmnfl Internet Eifriaa
-File E* IdA h
Ша ^m<L,,№^,, 'S-
'И
&ta £]ГМ(.М|М5*Ч>1«№л1
~3
Return to the MC home page.
"3
РИСУНОК 16.1. Генерация ссылки с помощью JavaScript.
Одно ключевое ограничение, которое следует иметь
в виду при использовании ./rite() или writeln(), связано
с тем, что нельзя изменять содержимое текущего доку-
Объект Document
Глава 16
мента без полной перегрузки окна. Следующие
разделы описывают три допустимых метода, с помощью
которых можно визуально создавать HTML-документы.
Разработка документа в текущем окне
Новый документ можно создавать в текущем окне при
его загрузке. Этот код обычно размещают внутри
дескрипторов <script>, либо в разделе <head>, либо
отдельно, если это возможно. Например, если требуется
определить браузер и скорректировать текст в соответствие
с его типом, можно прибегнуть к сценарию,
показанному в листинге 16.1.
Листинг 16.1. Генерация разного текста на Web-
странице в зависимости от типа браузера.
<script type="text/javascript">
var browser = navigator.appName;
document, open () ;
if(browser == "Netscape"){
document.write ("<h2>Welcome <a hre£=
•~ ' http: / /home. netscape . com' > Navigator</a>
'■»user.</h2>") ;
)else if(browser == "Microsoft Internet
-•Explorer") {
document. »rite ("<h2>Welcome <a href=
" 'http://www .microsoft.com'> Internet
1-Explorer</a>user . </h2>");
)else{
document.write("<h2>Welcome. But what
"browser are you using?</h2>")
i
document, write ("We are glad you came to our
Web ~»site. Do you know how") ;
document, write (" we knew your browser type?")
document, close () ;
II ->
</script>
На рис. 16.2 показан результат в Navigator 4, а на
рис. 16.3 — в Internet Explorer 5.
■Г*
start Ь
Uiy'i'a'TtHlV/E^lo.Lfll h
Isl
Г
WelcomeNavigatoruser.
We are gjad you came to our Web site. Do you ow how we knew your browser type?
■3Efc «гае™.-
РИСУНОК 16.2. Настроенная страница в браузере Navigator.
Использование DOM
Часть IN
аС' Е№\ № C_LDt -ri-Ни—v*\\ 'e *Пщ1г«
F tit и». f.:~*-a v >. j—■
Welcome Internet Explorer user.
BB*I
^
We are glad you one to our Web site. Dont you wish' iuknc how we knew youi browser
type?
zi
РИСУНОК 16.3. Настроенная страница в браузере Internet
Explorer.
Создание документа в фрейме
Возможна также генерация нового документа в другом
фрейме мультифреймового окна. Этот метод подобен
приведенному ранее, но здесь необходимо ссылаться на
нужный документ, используя точечную нотацию.
Например, для ссылки на первый фрейм
мультифреймового окна используется следующий код:
parent.frames[0].Document.write("test") ;
Листинг 16.8, который будет приведен ниже в
главе, демонстрирует пример программной установки
документа в фрейме.
Создание документа в отдельном окне
Третья методика визуального создания документов
связана с открытием нового окна и записью в него
создаваемого документа. Если необходимо привести в
отдельном окне список установленных в браузере Navigator
подключаемых модулей, применяется код, показанный
в листинге 16.2.
Рисунок 16.4 демонстрирует результаты работы
сценария в браузере Navigator.
Листинг 16.2. Отображение списка подключаемых
модулей Navigator.
<html>
<head>
<script type=,,text/javascript">
<! —
function showWindow()(
var len = navigator.plugins.length;
newWin = window. open ("", " ■' ,
"height=400,width=500");
newWin.document.write("<h2>Plug-In Info :
"-</h2>") ;
for ['ж i = 0; i < len; 1++) {
newWin.document.write ("<li>" +
navigator.plugins[i].description
"</li>");
newWin. document. close ()
3
</script>
</head>
<body>
<£orm>
<input type="button" value="Show Plug-In
** Information" onclick="showWindowf) ">
</form>
</body>
</html>
. . и Им Bfl |доеи ;.; „ J
% ж «яг
:: ^^ HrffJQnEHfo*b-K-_iJV>*4 ~34Г"|
j
I
f
I
■
«umA.^u'
I
*H icec flflHD
Plug-In Info:
• NPeRocim plugm
•RcalPUyertmOLweConnect EnabledPhjg In
MP Netscape i c-m
- Neibtape* staller Plug-ш
■ Тага Plug-in 1.2.2 for Netscape Navjgatoru ГПК/JfcE 1 ?
■ Java^'tg 12.2for 'сисаре Naw&Ttorwrth'L'K/IREl. 2(DLLHelperj
•JawaPlug-ir la2for cticapeKaviaatorwiAJDK/JRE 1 2 (DLLHelper)
-NPODSplHgm
■ Netscape *mgal Hug-in' Arrnb»
■She veFlashiCrB
■ SoundPlawribrNelseapeN'wigstor.v.l 1 1515
■ QuickTime lug-bfs WinJ2v. 11 0
- HP 4VJ32. j«71 рЬдоШн
- Default Plug-ш
РИСУНОК 16.4. Генерация нового документа в отдельном окне.
Изменение цвета документа
Установки цветов документов по умолчанию
определены в конфигурации пользовательского браузера,
однако HTML обеспечивает возможность изменения этих
установок, а в JavaScript можно сделать это
программно. Объект Document имеет пять свойств, которые
представляют цвета различных атрибутов в документе —
aLinkCoIor, bgColor, fgColor, LinkColor и vLinkCoIor.
Описание этих свойств сведено в табл. 16.1.
Эти свойства выражаются либо в виде строковых
литералов, либо в виде шестнадцатиричных
RGB-значений. Например, если требуется назначить для фона
документа цвет "chartreuse", используют литерал
строки chartreuse:
document. bgColor = "chartreuse";
Можно также использовать эквивалентное
шестнадцатиричное RGB-значение:
document. bgColor = "7fff00",-
Объект Document
Глава 16
Таблица 16.1. Цветовые свойства объекта Document.
Свойство
alinkColor
bgColor
fgColor
linkColor
vlinkColor
HTML-атрибут <body> Описание
alink
bgcolor
text
link
vlink
Цвет активной ссылки (после того, как кнопка мыши нажата, и до того, как
она отпущена).
Цвет фона документа.
Цвет символов (текста) документа.
Цвет непосещенных ссылок.
Цвет посещенных ссылок.
ПРИМЕЧАНИЕ
Список числовых значений цветов в JavaScript находится
в табл. 5.8 в главе 5. Эта таблица содержит списки
числовых значений цветов как в виде строковых
литералов, так и в виде шестнадцатиричных RGB-значений.
Шестнадцатиричный RGB-триплет — это
комбинация трех шестнадцатиричных значений,
соответствующих красному, зеленому и синему составляющим цвета.
За счет объединения значения формируют
шестнадцатиричный RGB-триплет. Число должно принимать
один из двух зависящих от регистра видов: rrggbb или
#rrggbb.
При использовании изменений цвета в атрибуте
Document необходимо соблюдать те же самые
принципы, как и при изменении текста. Изменения можно
делать только тогда, когда страница установлена,
например, в Document.write(), но не на странице, которая уже
"отрисована" в окне браузера.
Для объяснения способа установки цветов
рассмотрим пример, показанный на рис. 16.5. Нижний фрейм
содержит список выбора со всеми цветами и группой
переключателей, связанных с опциями цвета атрибута
Document. Можно выбрать используемые цвет и
свойство, а затем нажать на кнопку "Apply". JavaScript
перегружает верхний фрейм с учетом проделанных установок.
4, "(Jlrf 4k Lucni*4 jl« /III
£ .S j£ £
r* -Hi^J 11-K.i.Dliynl
" 4*
Hi mi
„L±-
РИСУНОК K.SJJunaMU4ecKoe шмепеии цветов фрейма.
Листинг 16.3 содержит исходный код HTML для
документа frameset. Листинг 16.4 показывает код для
основной части текста, а листинг 16.5 — код для
нижнего фрейма, который исполняет данный процесс.
Когда пользователь нажимает на кнопку "Apply", метод
refreshMain() присваивает значение, зависящее от
выбранной в данный момент опции списка выбора,
переменной newColor. Затем с использованием точечной
нотации выполняется ссылка на документ в верхнем
фрейме (parent.main.Document) и перезагрузка
верхнего фрейма на основе write() и color.
Листинг 16.3. Источник для установки фреймов в
Docu ment.
<html>
<head>
<title>Color Example</title>
</head>
<frameset rows="75%,25%">
<frame src="763Xl6_L04 .html" name="main"
marginwidth=,'ln marginheight="l">
<frame src="763X16_L05.html" name="colorDef"
marginwidth="1" marginheight="1">
</frameset>
</html>
Листинг 16.4. Код основной части текста примера.
<html>
<head>
<title>Main Body</title>
</head>
<body>
<li2>
<em>
JavaScript Unleashed
</em>
</h2>
<P>
Here is some sample text
</P>
<P>
Here is a sample link:
<a href="http://home.netscape.com">Netscape
</a>
</p>
</body>
</html>
, Использование DOM
Часть III
Листинг 16.5. Код JavaScript-сценария и выбора
цветов.
<html>
--п-эаоЬ-
<title>Color Definition</title>
<SCRIPT LANGUAGE="JavaScript">
<! —
var graf = ' -body> ' ;
graf+= '<h2Xem>JavaScript Unleashed</em>
</h2>';
graf += *<p>Here is some sample text</p>"
graf += '<p>Here is a sample link:
<a href="http://home.netscape.com">
Netscape</aX/p>' ;
graf += ' </body> '
function refreshMain () [
var newColor =
document . f orml. colorList. options [document,
forml .colorList.selectedlndex] . text
var selProp = null
with (parent main, document) !
open ( ) ;
write (graf);
if (document.forml. type [0] . checked) {
bgColor = nerJColor
}else{
if (document.forml. type [ 1 ].checked) {
f gColor = newColor ,-
) else С
if (document.forml. type [2]. checked) {
alinkColor = neyjColor;
}else{
if (document.forml. type [3]. checked) (
linkColor = nerJColor;
}else if (document.forml.type [4] .
checked) {
vlinkColor = nerJColor;
}
)
}
}
)
close ()
1
</script>
</head>
<body bgcolor="tomato">
<form name="forml">
<P>
Select Color:
<select name^'colorList" size=
<option>black</option>
<opt ion>blue</opt ion>
<opt ion>broT R'i< /opt ion>
<op t i on>cyan</option>
<option>Qold</option>
<option>Qray</option>
<opt i onxfreen< / opt i on>
<option>inclig;o</optiori>
<option>lavender</option>
<opt ion>1ime</opt ion>
<option>maroon</option>
<option>navy</option>
<optioii>olive</optiori>
■1">
<option>orange</option>
<opt ion>pink< /opt ion>
<option>purple</optiori>
<option>red</opt ion>
<option>royalblue</option>
<option>silver</option>
<opt ion>s lateo;ray< /opt iori>
<option>tan</option>
<option>teal</option>
<option>turquoise</option>
<opt ion>violet< /opt ion>
< options 7hite</option>
<opt ion>yel 1от J< /opt ion>
</select>
<br>
<input ty-je="radio" name=f'type" value=
"]эдСо1ог" checked>Background </input>
<input type="radio" name="type"
value="fgColor">Foreground</input>
<input type="radio" name="type" value=
"alinkColor">Activated Link </input>
-iinput type="radio" name="type" value=
"linkColor">Unvisted Link </input>
«input type="radio" name="type" value=
"vlinkColor">Visited Link </input>
<br>
«input type="button" name="Apply"
value="Apply" onclick="refreshMair () ">
</p>
</form>
</body>
</html>
Хотя это и не универсальный пример, им можно
воспользоваться для разработки намного более гибких
сценариев визуального изменения цветов.
СОВЕТ
За более общими примерами использования цветов в
докуиентах стоит обратиться к hldaho Color Center на
сайте http://www.hidaho.corn/colorcenter/.
Объект Link
Возможно, миром правит любовь, однако WWW-миром
правят ссылки. HTML-ссылки — основные элементы
любого документа сети, позволяющие переходить на
другие Web-страницы с помощью простого щелчка.
Расположение документа несущественно; он может
находиться на том же самом сервере либо за тысячи
километров от него. Вес, что требуется обеспечить — это
допустимость данного URL. JavaScript-эквивалент
гипертекстовой ссылки — объект Link, который
определяется в HTML-синтаксисе так:
<а href=locationOrOKL
[name="objectMame" ]
[target='VindoMName 'J
[onclick="methodNaj7ie ]
[onmouseover="methodWame"] >
linkText
</a>
Объект Document
СОВЕТ
Дополнительная информация по событиям объекта Link
находится в главе 14.
Объект Link имеет несколько свойств, аналогичных
параметрам для объекта Location. Они включают в себя
hash, host, hostname, href, pathname, port, protocol и
search. В главе 9 можно найти дополнительную
информацию по этим свойствам.
Ссылки на объекты Link
Объекты Link не имеют свойства name, поэтому
невозможно отдельно сослаться на определенный объект Link.
Единственный способ — сослаться на объект Link в коде
JavaScript-сценария, используя массив document.Iinks.
Массив document.Iinks — это совокупность всех ссылок
в пределах текущего документа. Порядок массива
соответствует порядку расположения ссылок в исходном
файле. Ниже будет представлен пример, который
демонстрирует способ использования массива documeiil.links
для обращения к отдельному объекту Link.
Предположим, что требуется извлечь адреса URL из
каждой ссылки на странице и перечислить их на
другой странице. Используя три фрейма, можно выбрать
нижний фрейм в качестве "свободного" окна, которое
будет использоваться для просмотра, верхний фрейм
будет содержать кнопку, инициирующую процесс, а
средний фрейм — создавать список URL. Рисунок 16.6
показывает три фрейма в окне Internet Explorer после
выполнения всего процесса.
13№. .. i -..»(»■
Fart I; Gel Hlmttfl Fmmw E - ■ *•
1) .UnScrq ,V? .)М**»*Г ^*
1*иг1 П: 'IJie JavaScript -LiuigHagt
4) FnnJajt «Halt efiLi FavaScript * anguage
5) Control Structures ■ il Looping
6) Operator*
7)FimtfiQni
Fart 111: JuvaSufrf Qli.Jt.cn
3J Fundamentals of Jbjert- Orientation
9) HandHiie Eventi
10) jvaScript BtuJt-Iu Object Model
£
If vds
вшил
J]
РИСУНОК УЬ&.Получет информации об UR' с помощью
массива есьиок.
Листинг 16.6 содержит код установки фреймов,
листинг 16.7 показывает код для нижнего фрейма,
который содержит все строки текста, а листинг 16.8 дает
исходный JavaScript-код для верхнего фрейма, в котором
обрабатывается данный пример. При щелчке на кнопке
"Extract Link Information" вызывается метод getLink!nfo().
Глава 16
Этот метод обращается к массиву ссылок нижнего
фрейма (с именем bFrame) и устанавливает переменную 1еп
равной его длине. При записи в средний фрейм метод
последовательно проходит через каждый элемент в
массиве ссылок и отыскивает значение свойства href.
Листинг 16.6. Исходный код установки фреймов.
<html>
<head>
<title>New Frameset</title>
</head>
<frameset rows="80,*,185">
<frame src="763X16_L08.html" name="tFrame"
marginwidth="2" marginheight="4">
<£rame src="about:blank" name="mFrame"
marginwidth="5" marginheight="2">
<frame src="763X16_L07.html" name="bFrame"
marginwidth="5" marginheight="2">
</frameset>
</html>
Листинг 16.7. Исходный код нижнего фрейма._
<html>
<head>
<title>Links</title>
</head>
<body>
<h2>Launching Pad</h2>
<table width="80*">
<tr>
<td width="25%">
<em>
<strong>
Software
</strong>
</em>
</td>
<td width="25%">
<em>
<strong>
Magazines
</strong>
</em>
</td>
<td width="25%">
<em>
<stroiv~>
Search
</strong>
</em>
</td>
<td width="25%">
<em>
<strong>
JavaScript
</strong>
</em>
</td>
</tr>
<tr>
<td width="25*">
<a href=
"http://www.borland.com">Borland</a>
</td>
<td width="25%">
Испшъзование DOM
Часть III
<а href="http://www.informant.com">Web
Infomant</a>
</td>
<td width="25%">
<a href="http: //www. excite. com">Excite
</aX/td>
<td width="25%">
<a href=
"http: //www.gamelan.com">Gamelan</a>
Wtd>
</tr>
<tr>
<td width="25%">
<a href=
"http://www.microsoft.com">Microsoft
</aX/td>
<td width="25%">
<a href=
"http: //www. javaworld. com">JavaWorld
</aX/td>
<td width="25%">
<a href ="http: / /www. yahoo. com" >Yahoo
</aX/td>
<td width="25%">
<a href="http://www.c2.org/-andreww/
"■» javascript " JavaScript Index</a>
</td>
</tr>
<tr>
<td width="25%">
<a href=
"http://home.netscape.com">Netscape
</aX/td>
<td width=,'25%">
<a href ="http: //www.pcweek.com">PCWeek
</aX/td>
<td width="25%">
<a href=
"http://www.altavitsa-digital.com">
Alta Vista</a>
</td>
<td width="25%">
<a href="http://www.intercom.net/user/
wmecha/iava/index.html">JavaScript
Res. Center</a>
</td>
</tr>
<tr>
<td width="25%">
Qnbsp;
</\ i>
<td width="25%">
<a href=
"t -tp://www.infoworld.com">InfoWorld
</aX/td>
<td width="25%">
<a href="http: //home.netscape com/
wescapes/search/search4.html">
Netscape Search Page</a>
</td>
<td width="25%">
<a href—"http://home.netscape.com/misc/
^developer/conference/>roceedings">
Netscape Conference</a>
</td>
</tr>
</table>
</body>
</html>
Листинг 16.8. Исходный код верхнего фрейма.
<html>
<head>
<base target="middle">
<Script type="text/javascript">
<r
function getLinklnfо() {
var len =
parent.tFrame.document.links.length;
with (parent.mFrame.document)(
open () ;
write ("<h3>The " + len + " Links of
**The Top Frame Include: </h3xp>")
for (var i = 0; i < len; i++) {
write((i + 1) + ". " +
parent.tFrame.document.links[i].href +
"<p>") ;
close ()
}
)
II—>
</script>
</head>
<body bgcolor="red">
<form>
<div al-gn="center">
<input type="button" name="Extract"
value= "Ex tract Link Information"
onclick="getLinkInfo()">
</div>
</form>
</body>
</html>
Выполнение JavaScript-кода для ссылок
Используя javascript в качестве элемента протокола href
ссылки, можно выполнять выражение JavaScript
вместо обычного действия ссылки (вместо перехода на
новую Web-страницу или отправки сообщения по почте).
Однако, выполняемый код должен быть
самодостаточным. Нельзя ссылаться на другой объект вне его
контекста, например, на другое окно.
Ссылку можно использовать для определения типа
пользовательского браузера, как показано в следующем
коде:
<а href = " javascript:if (navigator.appName ! =
^■Netscape') ( alert ("You should not have
"-clicked this link!1) ) else (
-»alert ( Thanks for clicking.')) ">
All Netscape users, click me</a>
В качестве второго примера приведем оглавление
первого издания этой книги в HTML-документе со
ссылками на каждую ее часть. Для атрибута href этих
ссылок описание каждой части помещается в окно
сигнального сообщения. Листинг 16.9 показывает HTML-
код для данного примера, а рис. 16.7 — результат
после щелчка на ссылке "Part [[[".
Объект Document
Глава 16
Листинг 16.9. Создание оглавления со ссылками document.alert().
<html>
<head>
<title>JavaScrrpt Unleashed Taljl^ of Contents---. title>
</head>
<body>
<a href=" javascript: alert: ( In this first section, you will get a complete introduction to
"•JavaScript . Chapter 1 takes a unigu i look at JavaScript, focusing с i ho r and n 5r it fits
w into the Web application development framework. You will also> sec how it relates to other Web
"•technologies both on the client- and server-side. Next, m Chapter 2, you will learn about
"•the relatr nship b tx n JavaScript and Hypertext Markup Language (ЕГ~^5 and ho ' tf ъ browser
"•interprets y:>ur code at runtime. Chapter 3 looks at the software tools you need to. develop in
"•JavaScript. ' ) ">
<li3>Part I: Getting Started with JavaScript< h3>
</a>
<h4>
15 JavaScript and the W5rld T'ide "Teb <br>
2 5 How JavaScript and HTML l.ork Together <br>
35 Assembling Your JavaScript Toolkit
< h4>
<a href=" javascript : alert ( 'The second part presents a thorough lock at the JavaScript language.
"•In Chapters 4-7, you will learn about language basics, control structures, operators, and
"» functions. ' ) ">
<li3>Part II: The JavaScript Languages h3>
</a>
<h4>
45 Fundamentals of the JavaScript Language<br>
5 5 Control Structures and Looping <br>
65 Operators<br>
7) Functions
<. h4>
<a href=" javascript : alert ( 'Part three dives into the heart of JavaScript — objects. After an
"-introduction to object-oriented concepts m Chapter 8, Chapter 9 looks at how you can handle
wuser and system events. Chapter 1С1 then looks at the built-in JavaScript hierarchy and introduces
wyou to> each o>f the Navigato>r and Built-in language objects . Chapters 11-14 continue where the
"• previous chapter left off by exploring in-depth each of the built-in JavaScript objects.
"•Chapter 15 rO'tmds out the discussion on objects, fO"rusing on how you can create yo>ur own. It
^includes many innovative ideas related to custom object development vri_ thin JavaScript. ') ">
<li3>Part III: JavaScript 0bjects</h3>
</a>
<h4>
3 5 FLUidaiTL' tals of cy ject-C "ie itatic i <br>
9) Handling Events -ibr>
105 JavaScript Built-m Object Mo.del <br>
115 Navigator objects <br>
12 5 Document Objects <br>
135 Form objects <br>
14 5 ~uilt-in Language objects <' r>
155 Creating Custom JavaScript objects
<h4>
<a href=" javascript: alert: ( 'The next secti< n builds upo>n everytl _ng you 1 arned up to> that po>i t
"•to lock at specific areas o>f interest to> the JavaScript developer. Chapter 16 exp bores how you
""can enhance HTML forms with JavaScript, such as providing client-side data validation. Bo>th
"•Chapters 17-18 really focus on frames and how you can use JavaScript in multi-frarr ; windows.
"•I have found frame management to be perhaps the rrost common use of JavaScript on the Web.
"•Chapter 19 looks at yet anO'ther key topic, czokies and O'ther techniques for handling and
"•maintaining state m the stateless environment of the Web.')">
<h3>part IV: JavaScript Programming</h3>
<./a>
-d-A>
16 5 Enhancing Fo>rms with JavaScript <br>
17 5 Working with Frames and Windows<br>
185 Scripting Outlines and Table of Contents <br>
19 5 Cockies Samp; State Maintenance
</h4>
<a href=" javascript : alert ( 'While Parts I-IV focused on client-side JavaScript, this section
"• focuses on its server-side count err-art. Within Netscape LiveWire and ouher products such as
—ЕЕП
Использование BOM
Часть III
«Borland IntraBuilder, you can use JavaScript as a server-side scripting language. In doing so,
*■• you are freed fг: а т тг l1mg CGI scripts and dealmg т ti t' such languages as I~4L. Cha.pter 2 и
wlooks at ser/er-side JavaScript, focusing on LiveWire and IntraBuilder. chapter 21 takes look
«at the issue of Ьотт to architect client /server applications on trie Web. Covered aa:^. many of
wthe issues you ttiII encounter as you plan such an application. ' ) ">
---li3>Part V: JavaScript on the Server</h3>
</a>
'--h4v
20) Server-Based JavaScript <br>
21) Part it ioning CI ient and Server A_ppl icat ions
</h4>
---"a href="javascript:alert( 'Part VI explores five advanced subjects, many of which are eraergmg
«as key topics as JavaScript matures. Chapter 22 dives into Error Handling and Debugging
«JavaScript applications. Chapters 23-24 cover the hot topic of integrating JavaScript uith
«Net scape Plug- Ins and ActiveX control s. Cha.pt er 2 5 looks at Integra t mg JavaScript т ti th VRML
«and mil t imedia data. Chapter 2 6 closes the sect ion by looking at a more conceptual topic- -
«JavaScript security. The chapter not only looks at the key issues surrounding this subject,
«but provides some helpful advice as you consider using JavaScript for your Web site. ' ) ">
<h3>Part VI: Advanced JavaScript<i/h3>
</a>
<h4>
22) Error Handl mg and Debugging m JavaScript <br>
23) Working TTith F" 51scape Plug-ir ; < :>r>
24) ActiveX Scripting Tilth JavaScript <br>
25) VRML and Multimedia <br>
26) JavaScript and WeJ:> Security
-v/h4>
-----a href=" javascript: alert f ' JavaScript is an important tool to glue HTML and Java applets.
«In this section, тте ttiII look at Java from a JavaScript perspective m Chapter 27 and see
«Ьотт similar or different the language is for JavaScripters . Chapter 28 provides a good
«introduction on Ьотт to build a Java applet, while Chapter 2'? is тThere the rubber meets the
«road TThen it focuses on integrating Java and JavaScript. ') ">
<h3>Part VII: Java and JavaScript </l"i3>
</a>
<h4>
27) Java from a JavaScripter Perspective ---~br>
28) Building Java Applets---~br>
2'?) Integrating JavaScript TTith Java
-v/h4>
--a href=" javascript: alert ( 'Many corporations ttiII use the Web as а ттау to get at their data.
«As a result, Ьотт JavaScript can access data ttiII ]:>e an increasingly important topic as the
«technology matures. in this section, т те т Till look at hoi т you can i тогк т ti th data both on the
«client-side and server-side. Chapter 30 introduces the notion of maintaining lookup tables
«on the client side to lessen the need to access the server. Chapter 31 then gets into how
«you can use JavaScript to access server-side data. LiveWire and IntraBuilder nill again _e
«used m this context. ') ">
<:h3>Part VIII: JavaScript Database J^_pplications<:/h3>
</a>
<hA>
30) Using Client-Side Tables m JavaScript <br>
31) Working \ l th Ser/er-Side Dataliiase Obj ects
-v/h4>
--a href=" javascript : alert ( 'The final section provides soi s extra information that -ill assist
«you as you read the book. Appendixes A-B provide basic references on the JavaScript and HTML
«respectively. Appendix С looks at how VBScript and JavaScript compare. Appendix D lists
«JavaScript resources that aa:^. available online ' ) ">
----h3 >Par t IX: Appendixes ----- /h3 >
</a>
-h4>
V) JavaScript Language Summary <br>
J) Fundamentals -of HTML <br>
C) Comparing JavaScript with Microsoft’ ;s VBScript ---br>
D) JavaScript Resources on the Internet
-vh4>
^/body>
/html>
ira
IVtLGrt Mil Ыааи! beta»
1) JavaScrij I _^M
l*-il ! I: li* JnvaScript LwngiuE*
4; "mdamaiiti of e JavaScript Language
5) i liitrol Structures and Looping
6)' erato»
7) uulions
Part Ш: -JavaScrfoj OMtr»
8) Fundamentals of bject-Otieutation
9) Handling Event*
10) JaTaSrnptEuut i Object Model
ii] HwiA*ttW3(i* ч ". " * - *P~*
*-
- ■>■■■■
.' "xi
lt*'J JL" ^ii!i»Ilr4eni^iJlnni]u
. rr " %L
о
"1
* ^
... a
РИСУНОК 16.7. Щелчок на ссылке отображает окно
сигнального сообщения.
Объект Anchor
Наиболее часто объект Link используется для перехода
на другую Web-страницу или другое место в текущем
документе. В пределах текущего документа ссылка
указывает на место в тексте, которое называется якорем
(anchor). В HTML-синтаксисе он определяется так:
<а [hret=locat±onOrVRL]
n ame="objесtName"
[target="windowName" '>
ar chorText
</а>
Мсжно сказать, что объект Anchor — поистине гость
для JavaScript. С помощью якорей в JavaScript можно
сделать немногое. Сам по себе объект Anchor не имеет
никаких свойств, методов или событий. Единственный
способ его применения в JavaScript — с помощью
массива anchors объекта Document. Массив document.anchors
используется для определения количества якорей в
документе и выполнения необходимых итераций по
ним.
Объект Image
ПРИМЕЧАНИЕ
Объект Image поддерживается в JavaScript 1.1 и
следующих версиях. Его не поддерживают JavaScript 1.0
и JScript 1.O.
Тем, кто провел достаточно много времени в Web,
должно быть, понятно, насколько важна для Web
графика. Едва ли существуют страницы, вообще не
имеющие графических элементов. Объект Image, новый в
Navigator 3, представляет HTML-изображение, которое
определяется в следующем формате:
Объект Document
<lmg
[name="objectName" ]
src="Location"
[lowsrc="Iocation"]
[height="PixeIs" | ■■ Value"*]
[width="Pixels I"Value"%]
[hspace="Pixels"]
[wspace="FixeJs"]
[border="Pixels"]
[align="left" |"right'| "top"|
"absmiddle"|"absbottom"|
"texttop"|"middle"|"baseline"|
"bottom"]
[ismap]
tusemap="bocation#MapNamfc ]
[onabort="methodffame" ]
[onerror="methodWame"]
tonload="methodWame"] >
СОВЕТ
Дополнительная информация о событиях объекта
Image находится в главе 14.
Например, для вывода изображения dotgif в HTML-
коде необходимо воспользоваться следующим
синтаксисом:
<img src="dot.gif" height="200" width="200">
Экземпляр объекта Image создается с помощью
команды new:
Company Logo = new Image () ;
CompanyLogo.sre = "logo.gif";
Размеры графического элемента можно передавать
как параметры в конструктор Image(). Например, если
требуется отобразить логотип размером 200x300
пикселов, используется код:
CompanyLogo = new Image (200,300) ;
CompanyLogo.sre = "logo.gif";
Присваивая значение свойству sre, можно изменять
отображаемый графический элемент. Однако, при этом
в область 13ображсния загрузится новый URL или
графический элемент.
Поскольку изображение определяется только с
помощью дескриптора <img>, создаваемый объект Image
обладает достаточно ограниченными возможностями.
Его можно использовать для получения изображения до
того, как оно станет фактически необходимо для
показа на дисплее. Поскольку изображение в этом случае
хранится в памяти, при перегрузке документа оно
будет намного быстрее отображаться. Наиболее общий
пример — анимационная последовательность
изображений, которые получаются с использованием объекта
Image и позже отображаются из памяти.
Испшыование DOM
Часть III
СОВЕТ
В главах 20 и 21 можно найти дополнительную
информацию по способам применения объектов Image.
Резюме
Объекты документа, рассмотренные в этой главе,
являются JavaScript-эквивалентами ряда базовых
HTML-элементов. К таким объектам относятся Document, Link,
Anchor и Image. Хотя JavaScript используется для
расширения или получения информации из этих объектов,
многие JavaScript-взаимодействия обычно исходят из
работы с формами. Поэтому в следующей главе
объекты Form рассматриваются более детально.
Объекты Form
В ЭТОЙ ГЛАВЕ
■ Объект Form
■ Объект Text
■ Объекты Button: Submit, Reset и Button
■ Объект Checkbox
■ Объект Radio
■ Объект Select
■ Объект Password
■ Объект Hidden
Одним из ключевых достижений в развитии Web
было появление HTML-форм в мире статических
страниц. За счет форм Web фактически может обеспечить
нечто большее, нежели однонаправленный режим
связи. Формы предоставляют средства, с помощью которых
любой пользователь на любой машине сможет передать
данные на сервер для обработки.
Благодаря JavaScript, HTML-формы получают
гораздо более широкие возможности. Теперь можно не
только предварительно обрабатывать данные формы до
отправки их пользователю, но также использовать формы
в приложении, которое полностью находится на
стороне клиента. В главе рассматривается объект Form и
множество объектов, которые он может содержать, включая
объекты Text, Button, Radio и Select. Цель этой главы -
предоставить вкратце всю информацию, касающуюся
форм, и в то же время дать несколько действительно
полезных советов.
Кроме того, можно воспользоваться примерами этой
главы в качестве шаблонов, что поможет сэкономить
время при разработке сайтов. Для копирования шаблона
нужно просто посмотреть на листинги и на их общую
структуру, и затем подкорректировать код под
собственные потребности. Все больше и больше разработчиков
следуют этому рецепту, а данная глава предоставляет
изрядное число подходящих шаблонов.
ПРИМЕЧАНИЕ
Объекты Form, обсуждаемые в этой главе, могут
существовать только в пределах формы, но не вне ее.
Объект Form
Одна из основных целей JavaScript — обеспечить
средства для взаимодействия с пользователем на стороне
клиента. В большинстве случаев это взаимодействие с
пользователем происходит с помощью HTML-формы.
Таким образом, JavaScript-объект Form — важный
объект в объектной модели JavaScript. С самим
объектом Form не многое можно сделать. Выражаясь кратко,
объект Form — это контейнер, содержащий введенные
пользователем данные.
В HTML объект Form определяется так:
<FORM
[NSME="formWame ]
t ACTION= " servertJKL" ]
[ENCTYPE=" encodlngType"]
[METHOD=GET | POST]
[TARGET="windowName ]
[onSubmit="/ne hodName' ]>
</FORM>
Для определения формы используют стандартные
условные обозначения HTML:
< FORM NAME = "Forml" ACTION=
"http: //www.acadians . com/js/script, jfm"
METHOD=GET >
<! — Здесь должны следовать объекты формы —>
</FORM>
ПРИМЕЧАНИЕ
Дополнительная информация по использованию форм
в JavaScript находится в главе 29.
Отправка формы на сервер
До JavaScript единственное реальное назначение HTML-
формы состояло в отправке на сервер элементов данных,
собранных на стороне клиента. Поскольку на стороне
клиента не было достаточно возможностей для
обработки данных, они посылались серверу, который затем
реагировал на полученную информацию. JavaScript
позволяет теперь передавать обработку данных HTML-
Использование DOM
Часть III
формам, хотя это не устраняет потребность отправки
формы на сервер.
Можно отправлять форму, используя один из двух
процессов. Во-первых, можно вызвать метод submit()
объекта Form, а во-вторых — нажать на кнопку "Submit",
которая автоматически отправит соответствующую ей
форму.
ПРИМЕЧАНИЕ
В главе 14 приводится дополнительная информация по
реализации с помощью JavaScript проверки
допустимости данных перед отправкой формы на сервер.
Многие из свойств объекта Form работают с
дополнительной информацией, которую форма отправляет на
сервер. Эти свойства перечислены ниже:
• action (то же, что и параметр ACTION=). Свойство
action определяет URL сервера, куда отправляется
форма.
forml.action
*»surv.cgi"
"http://www.acadians.com/js/
Это обычно программа CGI, приложение LiveWire
или файл IntraBuilder JFM.
• enctype (то же, что и параметр ENCTYPE=).
Свойство enctype определяет MlME-кодирование формы.
Значение по умолчанию — application/x-www-Form-
urlencoded:
if (forml.enctype == "application/x-www-form-
wurlencoded") {
alert ("Encoding type is normal.") )
• method (то же, что и параметр METHOD=).
Свойство method определяет, каким образом форма
отправляется серверу. Наиболее часто применяется
значение GET, однако можно использовать также и
Листинг 17.1. formSubmit.htm.
POST. Этот параметр основан на процессе со
стороны сервера, поэтому при проектировании HTML-
форм необходимо учитывать требования программы
сервера. Следующий код показывает пример
использования параметра method.
var methodType
methodType = forml.method
alert ("The method type for this form is: " +
methodType)
• target (то же, что и параметр TARGET=) Свойство
target определяет целевое окно, которому сервер
должен послать ответную информацию. Если свойство
target не определено, сервер отображает результаты
в окне, отправившем форму. Если используется
мультифреймовое окно, свойство target
определяется для фрейма с помощью параметра NAME
дескриптора <FRAME>. Можно также использовать
одно из следующих зарезервированных имен окон:
top, _parent, self или _blank. Но не забывайте, что
это спецификация HTML, а не JavaScript. Нельзя
указывать JavaScript-имя объекта Window, такое как
parent.resultsWindow. Следующий код демонстрирует
пример использования этого свойства:
if (document. forml. newWindowCheckBox. checked) (
document, forml. target = "resultsForm" )
else {
document, forml. target = " self" )
HTML-форма, показанная в листинге 17.1,
использует для отправки формы комбинацию
HTML-дескрипторов и JavaScript-кода. Обратите внимание, что
свойство action объекта Form получает новое значение в
течение события onSubmit объекта Form, если
пользователь установил флажок в "Rush Order". Программная
установка свойства action отменяет его значение по
умолчанию.
<html>
<head>
<title>For More Information</title>
<SCRIPT LANGUAGE="JavaScript">
function checkType() {
if (document.forml.rush.checked) {
document.forml.action = "http://www.acadians.com/js/rush.cgi"
)
</SCRIPT>
</head>
<body>
<hl>Order Form</hl>
<hr>
<form name="forml" action="http://www.acadians.com/js/order.cgi"
method="POST" onSubmit="checkType()">
<p>Please provide the following contact information:</p>
<blockquote>
<preXem> First name </emXinput type=text size=25 maxlength=256
name="Contact_FirstName">
<em> Last name </emXinput type=text size=25 maxlength=256
ОбъектыВогт
Глава 17
name=" Con tac t_La s tName " >
<em> Title </emXinput type=text size=35 maxlength=256
name="Contact_Title">
<em> Organization </emXinput type=text size=35 maxlength=256
name="'Contact_0rganization">
<em> Work Phone </emXinput type=text size=25 maxlength=25
name="Contact_WorkPhone">
<em> FAX </emXinput type=text size=25 maxlength=25
name="Con tac t_FAX">
<em> E-mail </emXinput type=text size=25 maxlength=256
natne= "Con tac t_Email" >
<em> URL </entxinput type=text size=25 maxlength=25
name=,,Contact_URL">
</pre>
</blockquote>
<p>Please provide the following ordering information:</p>
<blockquote>
<PreXstrongX2Ty DESCRIPTION
</strongXinput type=text size=6 maxlength=6
name="Ordering_OrderQtyO">
<input type=text size=45 maxlength=256 name="Ordering_OrderDescO">
<input type=text size=6 maxlength=6 name="Ordering_OrderQtyl">
<input type=text size=45 maxlength=256 name="Ordering_OrderDescl">
<input type=text size=6 maxlength=G name="0rdering_0rderQty2">
<input type=text size=45 maxlength=256 name="Ordering_0rderDesc2">
<input type=text size=6 maxlength=6 name="0rdering_0rderQty3">
<input type=text size=45 maxlength=256 name="0rdering_0rderDesc3">
<input type=text size=6 maxlength=6 name="0rdering_0rderQty4">
<input type=text size=45 maxlength=256 name="0rdering_0rderDesc4">
<em> </emXstrong>BILLING</strong>
<em>Purchase order # </emXinput type=text size=25 maxlength=256
name="Ordering_PONumber">
<em> Account name </emXinput type=text size=25 maxlength=256
name=' Ordering_POAccount">
<em> </emXstrong>SHIPPING</strong>
<em> Street address </em><input type=text size=35 maxlength=256
narae="Ordering_StreetAddress">
<em> Address (cont.) </emXinput type=text size=35 maxlength=256
name="0rdering_Address2">
<em> City </emXinput type=text size=35 maxlength=256
name="Orderir _City">
<em> State/Province </em><input type=text size=35 maxlength=256
name="Ordering State">
<em> Zip/Postal code </em><input type=text size=12 maxlength=12
name="Ordering_ZipCode">
<em> Country </emXinput type=text size=25 maxlength=256
name="Ordering_Country">
</pre>
<preXinput type=checkbox name="rush" value="ON">Rush Order !</pre>
</blockquote>
<pXinput type=submit value="Submit Form"> <input type=reset
value="Reset Form"> </p>
</form>
<. ' .:.dy>
</html>
ПРИМЕЧАНИЕ пример, объекты Text или Button) нужны для взаимо-
Для получения дополнительной информации об обра- действия с пользователем, можно относиться к ним как
ботчике событий onSubmit обратитесь в главу 14. к объектам пользовательского интерфейса (U[-объектам).
Объект Form имеет свойство elements, которое
применяется для ссылки на элемент формы или перебора всех
элементов в форме для специфических задач. Порядок
Form действует как контейнерный объект для всех дру- массива полностью основан на порядке следования эле-
Проверка элементов в Form
Form действует как контейнерный обье
гих объектов формы. Поскольку эти типы объектов (на- ментов HTML-формы в исходном файле. Первый пере-
Использование DOM
^ Часть III
численный элемент — elemeiits[0], второй — elements! 1]
и т.д.
Можно ссылаться на каждый элемент Form с
помощью имени либо его индекса в массиве элементов.
Например, если объект Text с именем LastName является
первым элементом в форме, на него можно ссылаться с
помощью следующего кода:
custLastName = Forml. elements [0] .value
Кроме того, допускается также и такой код:
custLastName = Forml.LastName.value
Свойство elements применяют для работы с каждым
объектом формы. Предположим, необходимо
удостовериться, что каждое поле в форме не является пустым.
Используя свойство elements, можно создать цикл for
для выполнения итераций по каждому элементу мас-
Листинг 17.2. form Elements.htm.
сива и проверки значений. Этот код показан в
листинге 17.2.
ПРИМЕЧАНИЕ
Обратите внимание, что следующие процедуры
проверки достоверности формы не проверяют
правильность ввода значения года. Для получения
дополнительной информации относительно полезных методов
проверки правильности обратитесь в главу 29.
Несложно заметить, что метод checkFields() для
определения количества итераций в цикле for использует
свойство elements.length. Далее, поскольку массив
elements включает в себя все объекты формы, в гом
числе и два объекта Button, операция typed используется
для определения типа элемента перед проверкой его
значения. На рис. 17.1 показано сигнальное окно ообщения,
которое появляется в случае нахождения пустого поля.
<html>
<head>
<title>Online Registration</title>
<SCRIPT LANGUAGE="JavaScript">
<! —
function checkFields() С
var num = document. forml. elements. length
var validFlag = true
for (var i=0; i<num; i++) С
if ((document.forml.elements [i] .value = null |I
document.forml.elements[i] .value == "") Sfc
(typeof document.forml.elements[i] != 'submit' !l
typeof document.forml.elements[i] != 'reset'))
validFlag = false
alert ("The " + document, forml. elements [i] . name +
" field is blank. Please enter a value.")
break }
)
return validFlag
)
// —>
</SCRIPT>
</head>
<body>
<form name="forml" method="POST" onSubmit="return checkFields() ">
<h2>Online Registration</h2>
<D>Username:<br>
<input type=text size=25 maxlength=256 name="Username"Xbr>
Category of Interest:<br>
<input type=text size=25 maxlength=256 name="Category"Xbr>
Starting Year: < s tr ongXbr>
</strong><input type=text size=25 maxlength=256 name="StartYear"xbr>
Email aid ss:<strong><br>
</strong><input type=text size=2S maxlength=256 name="EmailAddress"X/p>
<h2xinput type=submit value="Register"> <input type=reset value="Clear"x/h2>
</form>
<p>Snbsp;</h5>
</body>
</html>
£.
i_J^ L_
Online Registration
Userna<n»
|r*tsgnei
Category of inter f к
Starting "Year.
Bnaii address
I
шшйвая1
J^dE ■ SnttWetSuri^'T^^i.';; ":-':-.'
li' "
(РИСУНОК 17.1. Проверка значений полей в форме.
Объект Text
Для большинства задач объект Text — это элемент,
который наиболее часто используется для хранения
данных, вводимых пользователем. Объект Text используется
для захвата однострочной произвольной информации.
Для многострочной информации применяется объект
Textarea, обсуждаемый в разделе "Объект Textarea". Как
и другие объекты Form, объект Text реализует
"объектную" версию HTML-дескриптора и имеет следующий
синтаксис:
<INPUT
TYPE="text"
[NAME="objectATanie" ]
[VALUE="value"]
[SIZE=size]
[MAXLENGTH=si ze]
Листинг 17.3. textDefaultValueWrite.htm.
Объекты Form
Глава 17
[onBlur="metiiodWam« ']
[ onChange="me thodWame"]
[onFocus="jnetiiodNamfc ']
[onSelect="jnethodName ]>
Например, чтобы определить объект Text для
последнего имени, используют следуюшее:
<INPUT TYPE="text" NAME=LastName SIZE=20
MAXLENGTH=25>
ПРИМЕЧАНИЕ
Для получения дополнительной информации о
событиях объекта Text, таких как onBlur, onChange, onFocus
и onSelect, обращайтесь в главу 14.
Присваивание объекту Text значения по
умолчанию
Иногда требуется присвоить объекту Text значение по
умолчанию. Если HTML-документ создается визуально,
это можно сделать, определяя параметр VALUE=
дескриптора <INPUT type=text>. Предположим, что
требуется автоматически проверить тип объекта Navigator и
ввести эти данные в форму. Код из листинга 17.3
генерирует форму, показанную на рис. 17.2. Обратите
внимание, что поле "Browser" заполняется автоматически,
когда сценарий проверяет свойство appName объекта
Navigator.
Второй способ присваивать значение по умолчанию
объекту Text связан с установкой его свойства value.
Например, можно создать ту же самую форму,
используя код, показанный в листинге 17.4. В этом примере
значение полю "Browser" присваивается в обработчике
событий он Load.
<SCRIPT IANGUAGE="JavaScript">
var browserVar = navigator . appName
document .write ( '<body>')
document. wri te ( '<f orm name="forml" method="POST">' )
document. write ( ' <h2>Online Registration</h2>' )
document .write( ' <p>Username <br>' )
document write ( "<input type=text size=25 maxlength=256 name:
document .write( "Browser used:<br>' )
document, write ( '<input type=text size=25 maxlength=256 name="Browser
■ "Xbr>')
'Email address:<strong> <br>')
'</strongXinput type=text size=25 maxlength=256 ' )
name="EmailAddress "X/p>)'
■<h2Xinput type=submit value="Register"> ')
'<input type=reset value="Clear,,x/h2>' )
Username"Xbr>' )
value=
browserVar +
document.write (
document.write '
document. write (
document.write (
documeri t. wri te (
document.write ( ,</form>')
document.write( '</body>')
document.write ( ,</html>')
// -->
</SCRIET>
Использование DOM
Часть III
О £&'V*f-: -*rfui» U*tfB Et*W te'«*i И* fV="
Online Registration
I
jflSfWt^Freu
РИСУНОК 17.2. Установка значения по умолчанию.
Это может показаться странным, но свойство
defauItValue в этом примере не используется. Хотя
можно присваивать значение свойству default Value, форма
при этом не изменяется. Поэтому следует использовать
свойство value (см. листинг 17.4).
Листинг 17.4. textDefaultValue.htm.
<html>
<head>
<title>Online Registration's/title>
<SCRIPT LANGUAGE="JavaScript">
function findBrowser() {
document.forml.Browser.value =
navigator.appName
)
// ->
</SCRIPT>
</head>
<body onLoad="findBrowser()" >
<form name="forml" method="POST">
<h2>Online Registration</h2>
<p>Usernarae: <br >
<input type=text size=25 maxlength=256
name="Username"xbr>
Browser used:<br>
<input type=text size=25 maxlength=256
name="Browser"Xbr>
Email address :<strong> <br>
</strongXinput type=text size=25 maxlength=256
name="EmailAddress"X/p>
<Ii2Xinput type=submit value="Register"> <input
type=reset value="Clear"X/h2>
</form>
</body>
</html>
СОВЕТ
Свойство defauItValue полезно для получения значения
по умолчанию объекта Text, но не для установки
упомянутого значения.
Выделение текста в фокусе
По умолчанию при вводе объекта Text позицией ввода
является курсор. Если поле в данный момент содержит
текст и требуется печатать поверх него, придется
выделить текст, удалить его и ввести новое значение.
Можно сделать это по-другому, используя метод select()
объекта Text. Листинг 17.5 показывает HTML-форму с
четырьмя объектами Text, каждый из который
вызывает this.select() в момент прихода события onFocus. В
результате, когда пользователь вводит текст в любое из
полей формы, он автоматически выделяется. Рисунок
17.3 демонстрирует результат.
Листинг 175. textSelecthtrr
<html>
<head>
<title>Online Regis tration</title>
</head>
<body>
<form name="forml" method="POST">
<h2>Online Registration</h2>
<p>Username:<br>
<input type=text size=25 maxlength=256
name="Use rname "
onFocus="this. select () "Xbr>
Browser used:<br>
<input type=text size=25 maxlength=256
name="Browser"
onFocus="this.select()"><br>
Email address :<strong> <br>
</strongXinput type=text size=25 maxlength=256
name=" Ema i 1 Addr e s s "
onFocus="this . selec () X/p>
<li2xiii|>ul type=submit value="Register"> <input
type=reset value="Clear"x/h2>
</form>
</body>
</html>
Online Registration
uwname
Brwter used
Email address
jbai-'XSSit'llw-T "-' "-"M;-*'"^"Г^" ^.ЧЛГЧГ?^
m—,
_
■ -'-. :. «Г' ■■
J ^
■•'-.<*
РИСУНОК 17.3. Текст подсвечивается автоматически.
Объекты Form
Захват данных с помощью объекта
Textarea
Все другие объекты Form предназначены для захвата
данных ограниченного размера (менее 256 символов).
Объект Textarea обеспечивает средства для захвата
информации, недоступной для простых текстовых полей,
переключателей или списков выбора. Можно
использовать объект Textarea для ввода данных произвольной
формы, занимающих несколько строк. Ввод ограничен
отображением текста ASCII, однако допускается
базовое форматирование (например, параграфов). Объект
Textarea определяется с помошью стандартного
синтаксиса HTML:
<TEXTAREA
NAME=" objectName"
ROWS="numRows"
COLS=" nimCols"
[WRAP="off|virtual|physical"]
[onBlur="me thodName"]
[onChange="me thodName"]
[onFocus="methodNajne" ]
[onSelect="me thodName" ]>
dlsplayText
</TEXTAREA>
Например, при использовании Textarea для передачи
по сети комментариев объект определяется следующим
образом:
<textarea name="Comments"
</textarea>
rows=12 cols=78>
На рис. 17.4 показана результирующая форма.
раСТЕНИЕЕЕ
ШЛЦ
Comments
Enteryour С01ГШ1еГя9 In Hie space prowded below
[rear Editor:
и Beared to вес tbat you did run в всосу on "Иов со Develop Java
Injlcia in 20 ншисеэ". 1 did вес ctiik In could be dene, but you proved
ч: wrong. Alter reading tfae article. I sat down and wrote mj zirsc Java
«pine rntlr^i alEn WJL dntiriiia ccfluiectlvltB — Ik ] t 1? win H i.
rhar 19 acre aaaslng 13 (bar I ne\er ograaned anything in ny lire before
tnat oeplar ■
tnnttee crardy
«ТтттяЛ!"!"1
1)й1';В85гаши?т
^:
РИСУНОК 17.4. Объект Textarea.
ПРИМЕЧАНИЕ
Дополнительная информация о событиях Textarea
(таких ка< onBlur, onChange, onFocus и onSelect) может
быть найдена в главе 14.
Глава 17
Перенос текста в объекте Textarea
По умолчанию в объекте Textarea текст не
переносится. Пользователь должен вручную обозначать новую
строку (с помощью клавиши "ENTER"). Однако,
учитывая, что такая работа вряд ли вызовет энтузиазм,
выполняется установка опции переноса текста с помощью
параметра WRAP= HTML-дескриптора <TEXTAREA>.
Помимо off (опции по умолчанию), существуют еще две
дополнительных опции:
virtual. Если параметр WRAP= установлен в virtual,
строки переносятся на экране на границе области
объекта Textarea, однако новая строка
определяется только через нажатие клавиши "ENTER".
physical Если параметр\УКАР= установлен в physical,
строки переносятся на экране, а при отправке
данных на сервер в конце каждой экранной строки
устанавливается символ возврата каретки.
Объекты Button: Submit, Reset и Button
Ввиду того что графические среды в течение прошлого
десятилетия стали доминирующими, кнопка
представляет собой, возможно, наиболее распространенный из
всех компонентов пользовательского интерфейса. В
HTML существует три типа кнопок, которые можно
использовать в формах: Button, Submit и Reset. Как
видите, два из них являются специализированными
формами универсального объекта Button. С помощью
обычного HTML-синтаксиса кнопка определяется так:
< INPUT
TYPE = "button I submit I r-33-9t"
[.J5ME = "objectATame"]
[vKLUE = "labelrext"]
' [LJTiCliok = "methodName"] >
Эти три типа кнопок предназначены для различных
целей:
Кнопка Submit отправляет форму, в которой она
содержится, на сервер, основываясь на параметрах
формы. Для такого действия не нужен JavaScript-
код, поскольку все поведение встроено
непосредственно в объект.
Кнопка Reset сбрасывает значения полей в
текущей форме, восстанавливая ранее установленные
значения по умолчанию. Как и для кнопки Submit,
JavaScript-код здесь не используется.
Объект Button — это универсальный объект без
предварительно определенного встроенного
поведения. При работе с этим объектом необходимо
добавлять к кнопке обработчик событий onClick.
Использование DOM
Часть III
При недостаточном знакомстве с HTML может
возникнуть вопрос о целесообразности существования
кнопок Submit и Reset, т.к. объект Button можно
использовать для выполнения тех же самых задач. Они возникли
до появления JavaScript, когда нельзя было
использовать универсальную кнопку, потому что не
существовало соответствующих способов. Кроме того, несмотря
на то, что не все браузеры поддерживают JavaScript (a,
значит, и объект Button), все современные браузеры
поддерживают кнопки Submit и Reset. Преследуя цели
совместимости, обычно лучше всего использовать
кнопки Submit и Reset, если поддержка JavaScript не
является требованием для доступа к данной странице. При
наличии таких требований выбор кнопок роли не играет.
ПРИМЕЧАНИЕ
Для получения дополнительной информации о событии
onclick для объектов типа Button стоит обратиться в
главу 14.
Листинг 17.6 демонстрирует пример использования
всех трех кнопок. Как и следовало ожидать, кнопки
Submit и Reset используются для отправки и очистки
формы, хотя их параметры VALUE= были изменены
для отображения более дружественных к пользователю
формулировок. Объект Button используется для
вывода на экран справочного окна, которое подсказывает
пользователю, как заполнять регистрационную форму.
Вдобавок, в справочном окне (которое было
сгенерировано методом showHelpO/ объект Button
определяется с помощью метода write() документа. Обратите
внимание на две вещи, связанные с этой кнопкой.
Во-первых, для центрирования кнопки на странице
используется дескриптор <DIVALIGN=>. Во вторых, для
увеличения ширины кнопки добавлено несколько
пробелов до и после ОК в параметре VALUE=. На рис. 17.5
показана форма, сгенерированная в HTML.
Листинг 17.6. buttons.htm.
<html>
<head>
<title>Online Registration</title>
^SCRIPT LANGUAGE="JavaScript">
function showHelp() {
helpWin = window, open ("", "Help", "height=200,width=400")
helpWin. document.write ("<bodyXh2>Help on Registration</h2>")
helpWin. document, write("1. Please enter your product information into the fields. <p>")
helpWin.document.write("2. Press the Register button to submit your form.<p>")
helpWin.document.write("3. Press tb= Cl-эаг button to cl-эаг tb= form and start aga-n.<p>")
helpWin.document.write("<p>")
helpWin .document- write ("<formXDIV ALIGN= ■ CENTER' >")
helpWin.document.write ("<input type=button value=' OK 'onClick='window closed '>")
helpWin. document. write ("</DIV></f ormX/body>" )
}
</SCRIPT>
</head>
<body>
<hl>Online Registration.:/hl>
<form method="POST">
<p>Please provide the following product information :</p>
<blockquote>
<preXem> Product name </emXinput type=text size=25 maxlength=256
name="ProductName">
<em> Model </emXinput type=text size=25 maxlength=256
name="Product Model '>
<em> Version number </emXinput type=text size=25 maxlength=256
name="Product_VersionNumber">
<emX3perating system </emxinput type=text size=25 maxlength=256
name="Product OperatingSystem">
<em> Serial number </emXinput type=text size=25 maxlength=256
name="Product_SerialNumber">
</pre>
</blockquote>
<pXinput type=submit value="Register"> <input type=reset value="Clear">
<input type=button value="Help" onClick="showHelp () "X/p>
</form>
</body
Объекты Form
Г-"'"' Mwrrw ■m-ini-f.mvrim-ma
*i**» Wirt -y .
Help on Registration
1. Please enter your product Information into tie Ids i—
Online ReCJl! 2Pressther gisiefbutti to' imltytiurrDnT»
Rease provide OieTOllOWn
Pr&auct r
яеа*л.
i- РгвЗЗ Gear button to deal form and St . again
f«CJ4l ЯМ*« I
РИСУНОК 17.5. Вэтом приложении используются кнопки
Button (OK), Reset (Clear) и Submit (Register).
ПРИМЕЧАНИЕ
Для увеличения эффективности при применении
JavaScript 1.4 не следует определять имя функции,
если используются массивы аргументов. В JavaScript
1.4 массив аргументов является не свойством
объектов Function, но переменной. Считайте, что функция,
связывающая строки, как показано выше, имеет
единственный аргумент, который содержит символы,
разделяющие составные элементы.
function ConcatenateUnleashed(separator) {
result=" " // инициализация списка
for (var i=l,- iorguments. length; i++) {
result += arguments [i] + separator
1
return result
]
Функция просто создает списки, которые
соответствуют передаваемым аргументами:
// Возвращает "Ford; GM; Chrysler;"
ConcatenateUnleashed (" ; " , "Ford" "GM" , "Chrysler")
ОбъектСиескЬох
Объект Checkbox — это тот же объект Form, но
предназначенный прежде всего для обозначения логических
данных (true или false). Он действует как
переключатель, который может быть включен или выключен
пользователем либо JavaScript-кодом. Для определения
Checkbox используют следующий HTML-синтаксис:
<INPUT
TYPE="checkbox"
[ NAME= " оЪ jectName " ]
[VALUE="value"]
[CHECKED]
[onClick="me thociName" ]>
[ alsplayTsxt]
Например, приведенный ниже код для флажка
позволяет указывать, владеют ли пользователи
иностранными языками:
Глава 17
<input type=checkbox name="language">I speak
multiple languages.
Следующее соглашение для пользовательского
интерфейса связано с тем, что Checkbox не должен
вызывать выполнение какого-либо действия (как это делают
объекты Button). В результате его обработчик событий
onClick, вероятно, будет применяться не столь широко.
Исключением из этого правила является изменение
состояния других объектов формы.
ПРИМЕЧАНИЕ
Дополнительная информация о событии onClick объекта
Checkbox находится в главе 14.
Определение заполнения объекта Checkbox
Возможно, наиболее важным свойством объекта Checkbox
является свойство checked. Это свойство проверяется
для определения, выставил ли пользователь флажок. Для
проверки объекта Checkbox использовать свойство value
нельзя и причины будут поясняться далее.
ПРЕДОСТЕРЕЖЕНИЕ
Свойство value может поначалу вводить в
заблуждение. В отличие от некоторых сред, здесь свойство
value статическое и в ответ на изменение состояния
Checkbox не изменяется. Поэтому не проверяйте
свойство value для определения факта выставления
флажка.
Для иллюстрации воспользуемся примером,
приведенным ранее при обсуждении объекта Text в этой
главе. В одном из примеров с помощью метода select()
объекта Text при повторном вызове автоматически
выделялось содержимое объекта Text. Предположим, что
для пользователей требуется создать опцию выделения/
невыделения текста. Для этого можно использовать
флажок.
Листинг 17.7 содержит соответствующий код, а на
рис. 17.6 показана результирующая форма.
листинг 17.7. checkboxSelect.htm.
<html>
<head>
<title>Online Registration title>
<SCRIPT LANGUAGE="JavaScript">
function selectText(currentObject) (
if (document, f orml. selectBox. checked) {
currentobjec t.selec t()
I
}
</SCRIPT>
</head>
<body>
<form name="forml" method="POST">
<h2>Online Registration</h2>
Использовсиш DOM
Часть 111
<p>Username: <br>
<input type=text size=25 maxlength=256
name="Username "
onFocus="selectText (this) "Xbr>
Browser used:<br>
■<input. type=text size=25 maxlength=25G
name="Browser"
iF< us="selectText (this " <br>
Email address :<strong> <br>
</strongXinput type=text size=25 maxlength=256
name="EmailAddre s s "
onFocus="selectText (this) "X/p>
<ll2xilipul type=submit value="Register"> <input
type=reset value="Clear"X/h2>
<pXinput type=checkbox
name="selectBox">Activate field selection.
< о m>
</body>
</html>
£ fc* jfi ^NHL J-" • ■ - »i- JJ<P
■ад ) г~ .к, (-е&.р
Onliie Registration
F AdftAte field r erttan
«WW»
РИСУНОК 17.6. Использование флажка.
ПРИМЕЧАНИЕ
Пример, показанный в листинге 17.7, демонстрирует
порядок вычисления отмеченного свойства. Однако,
необходимо учитывать, что этот код не обязательно
работает так, как ожидается. Как только выставлен
флажок, текст будет выделяется от текущего пункта,
независимо от того, снимет ли пользователь флажок.
Так происходит потому, что при вызове метода select!)
для объекта Text состояние выделения текста будет
оставаться в силе, пока страница не перезагрузится.
Стоит заметить также, что при перегрузке страницы
командой инструментальной панели "Reload" в Netscape
Navigator содержимое формы сохраняется. В то же
время, при использовании метода reload!) в Netscape
Navigator 3.0 текущие значения в форме
сбрасываются.
Объект Radio
Объект Radio используется для предоставления
пользователям возможностей выбора одиночной опции из
группы параметров. Если выбирается одна опция в
пределах набора, другие в тот же момент выбраны быть не
могут. Щелчок на переключателе снимает выделение с
любого другого выбранного ранее переключателя.
Объект Radio отличается от других изученных ранее
объектов Form. Заметим, что другие объекты Form
имеют взаимно-однозначное соответствие
HTML-дескриптору, тогда как объекту Radio в пределах исходного
HTML-кода соответствует целый набор элементов
<lNPUTtype="radio">. Каждый элемент объекта Radio
определяется таким образом:
<INPUT
TYPE="radio"
[NAME="grroupName' |
Г'/Mi =" value" ]
[CHECKED]
[onClick^'methodName" ] >
[ displayText]
Элементы здесь не группируются таким способом,
как это делается с элементами в объекте Select
(который обсуждается ниже в главе). Способ их
группировки основан на параметре NAMЕ= переключателя.
Каждый элемент в объекте Radio должен использовать в
этом параметре одно и то же значение. Например,
следующий набор переключателей работает с одним
объектом Radio — weekdays:
<INPUT TYPE="radio" NAME="weekdays"
VALUE="Monday " >Monday
<INPUT TYPE=" radio" NAME="weekdays"
VALUE="Tue sday">Tue sday
<INPUT TYPE="radio" NAME="weekdays"
VALUE="Wednesday">Wednesday
<INPUT TYPE="radio" NAME="weekdays"
VALUE="Thursday">Thursday
<INPUT TYPE="radio" NAME="weekdays"
VALUE="Friday">Friday
<INPUT TYPE=" radio" NAME="weekdays"
VALUE="Saturday">Saturday
<INPUT TYPE="radio" NAME="weekdays"
VALUE= " Sunday " >Sunday
ПРИМЕЧАНИЕ
За дополнительной информацией о событии опСПскдля
объекта Radio обращайтесь в главу 14.
Определение значения выбранного
переключателя
Одной из наиболее распространенных задач, которые
должны решаться при использовании объекта Radio,
является проблема получения значения выбранного в
данный момент переключателя. Для этого потребуется
определить, какой из переключателей выбран и затем
вернуть его значение. Вместо написания
оригинального кода каждый раз, проще воспользоваться
универсальной функцией, называемой getRadioValue(), которая
может возвращать значение объекта Radio,
передаваемого в метод в качестве параметра.
Объекты Form
Рассмотрим код, показанный в листинге 17.8. Объект
SongsRadio содержит список из трех песен. Объект
Button "Show Selected" отображает выбранный в данный
момент объект, вызывая метод getRadioValue() с
передачей объекта Songs в качестве параметра функции.
Метод GetRadioValue() выполняет цикл for,
предназначенный для проверки, какой из переключателей выбран.
Для определения количества итераций используется
свойство length объекта Radio. Когда цикл for
сталкивается с выбранным значением, он присваивает
переменной значение переключателя, прерывает
выполнение цикла, а затем возвращает значение в обработчик
событий Button.
Листинг
17.8.
radio.htm.
<html>
<head>
<script language = " JavaScript" >
function getRadioValue(radioObject) С
var value = null
for (var i=0; KradioObject length;
i++) (
if (radioObject[i] .checked) С
value = radioObject[i] .value
break }
]
return value
}
</script>
</head>
<body>
<form name=,,forml,,>
<pxinput type=radio name=" songs"
value=" Liquid" >Liquid</p>
<pxinput type=radio name=" songs"
value=" Flood" >Flood</p>
<pxinput type=radio name="songs" value="World' s
Apart" >World ■ s Apart</p>
<input type=button value="Show Selected"
onClick="alert (getRadioValue(this. form, songs) ) ">
</form>
</body>
</html>
На рис. 17.7 показан результат нажатия кнопки
"Show Selected".
ПРИМЕЧАНИЕ
Листинги 17.12 и 17.17, приведенные ниже в главе,
демонстрируют способ автоматической проверки
переключателя.
Объект Select
Объект Select — один из наиболее полезных и гибких
объектов Form. Его можно использовать в тех же
случаях, что и объект Radio. Объект Select нуждается в
меньшем количестве реального пространства по
сравнению с объектом Radio, которому необходимо простран-
Глава17
ство под каждый переключатель. Базовый синтаксис
HTML для объекта Select выглядит так:
<SELECT
[NAME=" objectName" ]
[SIZE="nuinberV'isi.ble ']
[MULTIPLE]
[onBlur="methodName ]
[onChange="metho<±Wamt ']
[onFocus="me thoilName"]>
<OPTION VALUE^'optionyalue"
t SELECTED] >displayText</OPTION>
[<OPTTON VALUE=" option^alue'^displayrext
< TPTION>]
</SELECT>
ruquo
""Flood
"■Vftrkfs-Apin
TJ^Q*Sd*ft"d;_ f
лМШ+^&згг-'^
| №Uwcti=| Pitt* J **Z*m\
— ■
3 ь
^i" "----«?•
РИСУНОК 17.7. Определение значения объекта Radio.
Благодаря своей гибкости, объект Select может
принимать три различных формы: список выбора,
прокручиваемый список и прокручиваемый список с мульти-
выбором.
ПРИМЕЧАНИЕ
Дополнительная информация о событиях объекта Select
может быть найдена в главе 14.
Создание списка выбора
Список выбора — это выпадающий список опций, в
котором пользователь может выбрать только одну
опцию. Список выбора обычно отображает одно значение
на экране (см. рис. 17.8), но при нажатии на стрелку
список расширяется и отображает все элементы выбора
(см. рис. 17.9). В отличие от комбинированных списков
Windows, вводить значение в список выбора не
допускается; можно только выбирать элемент из
существующего массива элементов.
Список выбора, показанный на рис. 17.8 и 17.9,
можно определить так:
<select NAME="songs" SIZE=1>
<option VALUE="Liquid">Liquid</option>
Использование DOM
Часть III
<option VALUE="World' s Apart"*>World's Apart
</option>
<option VALUE="Ironic">Ironic</option>
<option VALUE="1979">1979</option>
<option VALUE="Wonderwall">Wonderwall</option>
<option VALUE="StandiriT Outside a Broken Phone
*»Booth">Standing Outside a Broken Phone
Booth</opt ion>
иш*М7 I
крутки, при этом пользователь может прокручивать
список элементов вверх или вниз, чтобы просматривать и
те элементы, которые не уместились в окне.
Для создания прокручиваемого списка единственное
изменение в HTML-определении <select> необходимо
проделать в параметре SIZE=. Если его значение
больше 1, объект Select преобразуется в прокручиваемый
список. Например, если изменить параметр SIZE=
определенного ранее объекта Songs с L на 5, список
примет новый вид, показанный на рис. 17.10. Как и
список выбора, прокручиваемый список позволяет выбирать
только одно значение.
РИСУНОК 17.8. Список выбора в начальном состоянии.
-И. I! ^ I' |"Г-»!-Т
еф '-■-¥" ^.я»*'^*"=';Яр4г1 *-^*ti ^гЛ" L^
^IS
E
UL *d
, 4галк
• OywifcfcBhiVeftPtwieBCH*
-tfft» (ftct»«*
РИСУНОК 17.9. Список выбора в развернутом состоянии.
Создание прокручиваемого списка с
мультивыбором
Последняя форма, в которой может быть представлен
объект Select, — это прокручиваемый список с
мультивыбором. Он выглядит так же, как обычный
прокручиваемый список, но ведет себя по-другому. Из этой формы
объекта Select можно выбирать один и более элементов.
Решение задачи выбора множества элементов зависи ■ от
среды. В большинстве случаев можно либо перемешать
мышь с нажатой кнопкой поверх требуемых элементов,
либо удерживать в нажатом состоянии клавишу Shift
или Ctrl во время щелчков на элементах списка.
**WMW»>Jtta«iW«bitMM(^.»MldSUWl' UMtf
et-JBi
3 ^
Ключ к определению списка выбора заключается в
присвоении параметру SIZE значения 1 (либо вообще
никакого значения). Это даст гарантию того, что
список будет отображать только одну строку.
Создание прокручиваемого списка
Второй формой объекта Select является
прокручиваемый список, во многих средах называемый окном
списка. Он отображает указанное число элементов
одновременно в формате списка, вместо того чтобы прятать все
элементы кроме одного, как это делает выпадающий
список. Прокручиваемый список включает полосу про-
РИСУНОК 17.10. Прокручиваемый список.
Для определения прокручиваемого списка с
мультивыбором необходимо в определение объекта Select
добавить параметр MULTIPLE:
<select NAME="
<option VALUE=
<option VALUE=
</option>
<option VALUE=
<option VALUE=
<option VALUE=
songs" SIZE=5 MULTIPLE>
:"Liquid">Liquid</option>
"World's Apart">World's Apart
"Ironic">Ironic</option>
:"1979">1979</option>
;,,Wonderwall">Wonderwall</option>
<option VALUE="Standing Outside a Broken Phone
'-Booth">
Standing Outside a Broken Phone Booth</option>
Определение значения или текста
выбранной опции
В списке выбора или прокручиваемом списке можно
определять значение выбранной опции с помощью
комбинации свойств options и selected Index объекта Select.
Например, если требуется определить песню, которая
была выбрана в приведенном выше примере объекта
Songs, используют следующий код:
favorite = document.forml.songs.options
[document.forml.songs.selectedlndex].value
Свойство options — это массив, содержащий каждую
опцию, определенную внутри объекта Select.
Используя это свойство, можно обращаться к свойствам
каждой опции. С помощью свойства Selectedlndex
возвращается индекс выбранной опции. Когда options и
Selectedlndex используются в комбинации,
возвращается значение выбранной в данный момент опции.
С учетом требований точечной нотации JavaScript,
выбранное в данный момент значение может включать
длинные строкитекста программы. Этого можно избежать
с помощью универсального метода getSelectValue().
Листинг L7.9 показывает способ применения такого
метода. Как видно из листинга, объект Select переходит к
параметру метода getSeIectValue(), как только
пользователь нажимает на кнопку "Show Current". Переменная
SelectObject обрабатывается как переменная
объектного типа и принимает значение выбранной в данный
момент опции. Это значение переходит в обработчик
событий объекта Button и отображается в сигнальном
окне сообщения.
Листинг 17.9. select.htm.
<html>
<head>
<script language = "JavaScript">
function getSelectValue(selectObject) {
return selectob ject.
options[selectObject.selectedlndex].
value
i
</scrLpt>
</head>
<body>
<form name="f orml">
Songs: <select NAME="songs" SIZE=1>
<option VALUE="Liquid">Liquid</option>
<option VALUE="World's AparfJ^World' s Apart
</option>
<option VALUE="Ironic">Ironic</option>
<option VALUE="1979">1979</option>
<option VALUE="Wonderwall">Wonderwall</option>
<option VALUE="Standing Outside a Broken Phone
■-Booth">
Объекты Form ЕСП
Пива 17 ~ EfiU
Standing Outside a Broken Phone Booth</option>
</SELECTXp>
<input type=button value="Show Current"
onClick="alert(getSelectValue(this.form.songs))">
</form>
</body>
</html>
Одно важное различие между объектами Select и
Radio связано с тем, что объект Select, в дополнение к
свойству value, имеет свойство text. Если определяемое
значение аналогично тому, которое отображается для
пользователя (как в листинге VI.9), то можно вместо
свойства value возвращать значение text выбранного в
данный момент объекта. Предположим, что объект
Select был определен так:
<select NAME="songs" SIZE=1>
<option>Liquid</or"tion>
<option>World's Apart</option>
<option>Ironic</option>
<option>1979</option>
<op1 ion>Wonc" rwall</or>tion>
<option>Standing Outside a Broken Phone Booth
</option>
Тогда для возврата названия песни вместо свойства
value можно воспользоваться свойством text:
function qetSelectValue(selectObject) {
return selectObject.options[selectObject.
selectedlndex].text
Определение значений в прокручиваемых
списках с мультивыбором
В списках, где в каждый момент времени может быть
выбрана только один вариант, свойство selectedlndex
работает эффективно и возвращает необходимую
информацию из выбранной опции. Однако, в
прокручиваемом списке с мультивыбором selectedlndex
возвращает только первую выделенную опцию, а не все сразу.
При использовании списка с мультивыбором
необходимо применять свойство selected массива опций для
определения состояния каждой опции в списке.
Листинг 17.10 демонстрирует пример этого в методе
showSeIection(). Цикл for выполняет итерации по
каждой опции объекта Select и проверяет, равно ли
свойство selected значению true. Если да, то значение
свойства text элемента добавляется в переменную списка.
Результат отображается во втором окне, показанном на
рис. 17.11.
Листинг 17.10. selectMultiple.htm.
<html>
<head>
<script language = "JavaScript">
function showSelection(objectName) {
Использование DOM
Часть III
var list = ""
for (var i=0; i<objectName. length;
i++ (
if (objectName. options [i] .
^selected) {
list H—
objectNarae. options [i] . text + "<p>"
>
>
selWindow = window. open ( " " ,
"Selections", "height=200,width=400")
selWindow.document.write("<h2>You
wpieked the following songs :
</h2XpXp>")
selWindow.document.write(list)
</script>
</head>
<body>
<form name="forml">
Pick Your Favorite Songs From the List:<p>
<select NAME="son V SIZE=5 MULTIPLE>
<option>Fortress Around Your Heart</option>
<option>Breakfast at Tiffany's</option>
<opt ion>Flood</opt ion>
<option>The Chess Game</option>
<option>Liquid</option>
<option>World's Apart</option>
<opt ion>Ironic</opt ion>
<option>1979</option>
<option>Wonderwall</option>
<option>Standing Outside a Broken Phone Booth
</option>
</SELECTXp>
<input type=button value="Show Selection"
onClick="showSelection(this.form.songs)">
</form>
</body>
</html>
Выбор опции с помощью JavaScript
Можно программно выбирать опцию, устанавливая
свойство selected массива параметров объекта Select.
Предположим, что имеется поле "Favorite Band" и
список песен. Пусть значение поля "Favorite Band" — Oasis,
и требуется расположить песню, исполняемую этой
группой, в поле "Songs". В листинге 17.11 показан код
этого примера.
Листинг 17.11. selectSelected.htm.
<html>
<head>
<script language
"JavaScript">
function quickSelect() {
var bnd = document.forml.band.value
bnd = bnd.toUpperCase()
if (bnd = "OASIS") {
document.forml.songs[4] .selected = "1"
)
)
<body>
<form name="forml">
Favorite Band: <input type=text name="bani"
size=20 onBlur="quickSelect () "Xp>
Songs: <select NAME="songs" SIZE=1>
<option VALUE="Liquid">Liquid</option>
<option VALUE="World' s Apart">World' s Apart
</option>
•«option VALUE="Ironic">Iron' c</option>
<option VALUE="1979">1979</option>
<option VALUE="Wonderwall">Wonderwall</option>
<option VALUE="Standing Outside a Broken Phone
*»Booth">
Standing Outside a Broken Phone Booth</option>
< 'SELECTXp>
<input type=button value="Show Current"
onClick="quickSelect()">
</form>
</body>
</html>
^
ил' ^^'■''i'iV..'1 ■"■'■'Л'Д"'^»^'
StuwSijfiftii*
You picked the follbwmg Etmgs
.jfe-J Ди^гщ^&яу ~
РИСУНОК 17.11. Отображение множественного выбора.
Объект Password
</script>
</head>
Как можно понять по его имени, объект Password
преследует одну цель: захватывать значения пароля,
введенного пользователем. Объект Password аналогичен
объекту Text, но отображает любой символ,
напечатанный пользователем в поле, в виде звездочки (*). Этот
объект определяется в синтаксисе HTML следующим
образом:
<INPUT
TYPE="pas sword"
[NAME="objectWame ]
[VALUE="def"aultPassword" J
[SIZE=in teger] >
Ниже приведен пример:
<INPUT TYPE="password" NAME="passwordField"
SIZE=15>
JavaScript не предоставляет большой степени
управления объектом Password. Например, нет возможности
Объекты Form
Глава 17
Ниже приведен пример:
<INPUT TYPE="hidden" NAME="hiddenFieldl">
В HTML-мире скрытые поля играли важную роль в
получении определенной информации со стороны
пользователя, которая затем использовалась сервером. С
появлением JavaScript, применение объекта Hidden в
комбинации с JavaScript становится менее
эффективным. Причина связана с тем, что глобальные
переменные JavaScript служат тем же целям, что и объекты
Hidden, однако ими намного проще управлять.
Следующие два примера демонстрируют это. На рис.
17.12 показан набор переключателей, на которых
можно совершать щелчки. Необходимо добавить код к
кнопке "Undo Last", чтобы пользователь мог отменять
последний сделанный выбор. Использовать кнопку Reset
для этого нельзя, т.к. она или сбросит все
переключатели, или вернет значение по умолчанию. Вместо этого
для выполнения упомянутой задачи придется добавить
JavaScript-код. Код, приведенный в листингах 17.12 и
17.13, демонстрирует решение такой задачи. Листинг
17.12 использует для этого набор скрытых полей, в то
время как листинг 17.13 выполняет данную задачу с
помощью глобальных переменных. Заметим, что оба эти
метода — вполне допустимы.
Листинг 17.12. hidden.htm.
<html>
<head>
<title>Hidden Test</title>
<script language="JavaScript">
function postData(value) {
document.forml.holder2.value = document.forml.holder.value
document. forml. holder. value = value
I
function resetValue() (
таг len = document.forml.ctyList.length
for (var i=0; i<len; i++) С
if (document, forml.ctyList[i] .value =
document.forml.ctyList[i] .checked
break }
I
J
</script>
</head>
<body>
<hl>I remember</hl>
<form name="forml" method="POST">
<p><irput type=radio name="ctyList" value="Argentina"
onClick="postDat (litis value) ">Argentina</p>
<pXlnput type=radio name="ctyList" value=" Burkina Faso"
onClick="postData (this, value) ">Burkina Faso</p>
<p><input type=radio name^'ctyList" value="Pakistan"
onClick="postData(this.value)">Pakistan</p>
<p><input type=radio name="ctyList" value="Switzerland"
onClick="postData (this.value) ">Switzerland</p>
<pXinput type=radio name^'ctyList" value="United Kingdom"
onClick="postData(this.value) ">United Kingdom</p>
<pXinput type=radio name="ctyList" value="United States of America'
fSvl
получать значение текста, введенного пользователем;
можно только получить заданный по умолчанию текст,
который был определен в параметре VALUE=
дескриптора <INPUT type=Password>. Одна из причин, почему
JavaScript не может полз^чить доступ к объекту Password,
связана с тем, что JavaScript-код в настоящее время
встраивается в HTML-документ так, чтобы пользователь
мог обращаться к нему. Когда язык JavaScript будет
разработан до конца, вероятно, появится большая
степень управления этим объектом.
Объект Hidden
Как можно понять по его имени, объект Hidden
невидим для пользователя. Объект Hidden — это поле
скрытого текста, использующееся для хранения значений,
которые не требуется представлять пользователю в
обычных текстовых полях. Затем можно передавать эту
информацию на сервер для обработки. Объект Hidden
в HTML определяется с помошью следующего
синтаксиса:
<INPUT
TYPE="hidden"
NAME="objectName "
[VALUE= value" ]>
document. forml. holder2. value) (
"l"
■■ Использование ЛОМ
ВШИ Часть III
onClick="postData(this-value)">United States of America</p>
<pXinput type=radio name="ctyList" value=" Zambia"
onClick="postData(this.value)">Zambia</p>
<pxinput type=radio name="ctyList" value="Ziihbabwe"
onClick="postData (this .value) ">Ziihbabwe</p>
<pxinput type=button name="UndoLast" value="Undo Last"
onClick="resetValue()"></p>
<INPUT TyPE="hidden" NAME="holder" value="">
<INPOT TYPE="hidden" NAME="holder2" value="">
</form>
</body>
</html>
Листинг 17.13. hiddenVars.htm.
<html>
<head>
<title>Hidden Var Test</title>
<script language="JavaScript">
var holder = ""
var holder2 = "■■
function postData (value) [
holder2 = holder
holder = value
)
function resetValue() (
var len = document. forml.ctyList. length
for (var i=0; i<len; i++) [
if (document.forml.ctyListti] .value = holder2) !
document.forml.ctyList[i].checked = "1"
break )
j
I
</scripts
</head>
<body>
<hl>I remember</hl>
<form name="forml" method="POST">
<pXinput type=radio name="ctyList" value="Argentina"
onClick="postData (this .value) ">Argentina</p>
<pxinput type=radio name="ctyList" value="Burkina Faso"
onClick="postData(this.value)">Burkina Faso</p>
<pxinput type=radio name="ctyList" value="Pakistan"
onClick="postData(this.value)">Pakistan</p>
<pXinput type=radio name="ctyList" value="Switzerland"
onClick="postData (this, value) ">Switzerland</p>
<pXinput type=radio name="ctyList" value="United Kingdom"
onClick="postData(this.value)">United Kingdom</p>
<pXinput type=radio name="ctyList" value="United States of America"
onclick="postData (this, value) ">United States of America</p>
<p><input type=radio name="ctyList" value="Zambia"
onClick="postData(this.value)">Zambia</p>
<pxinput type=radio name="ctyList" value="Zimbabwe"
onClick="postData (this, value) ,,>Zimbabwe</p>
<pXinput type=button name="UndoLast" value="Undo Last"
onClicK="resetValue () "x/p>
</form>
<. body>
</html>
В последнем примере всякий раз, когда пользователь
щелкает на переключателе, метод postData() помещает
текущее значение переключателя в объект Hidden с
именем holder, а текущее значение holder — в объект hoIder2.
Это значение затем используется, когда пользователь
нажимает на кнопку "Undo Last", в результате чего
выбирается соответствующий переключатель.
Объекты Form
Ем
1 remember
РИСУНОК 17.12. Сохранение последнего значения с помощью
объекта Hidden.
Глава 17
Во втором примере переменные holder и hoIder2
определены глобально в начале сценария. Сценарий
использует эти переменные вместо ссылок на объекты
Hidden.
Резюме
Формы играют важную роль в JavaScript. Помимо того,
что появляется возможность классифицировать и
обрабатывать данные до их отправки на сервер,
HTML-формы можно также использовать для создания клиентских
приложений, использующих JavaScript. В этой главе
рассматривался объект Form и различные объекты,
которые могут существовать внутри него. Кроме того, были
показаны способы отправки формы на сервер и методы
работы и проверки значений введенных данных до
отправки данных на сервер.
Объекты Frame
В ЭТОЙ ГЛАВЕ
■ Объект Frame
■ Объект Location
■ Объект History
■ Объект Navigator
В этой главе обсуждается объект Frame и огромное
число его применений при создании Web-сайтов. Для
начала стоит рассмотреть создание одиночных и муль-
тифреймовых окон и связанные с ними методы,
свойства и события. Затем можно перейти к
распространенным объектам, таким как объекты Navigator и History.
Их предшественник — это, конечно же, известный ре-
позитарий для регистрации пользовательских
взаимодействий и адресов посещенных страниц, который
позволяет получать информацию касательно текущего
браузера. Эта глава может показаться достаточно
длинной, однако, следует помнить, что она и должна
содержать большое количество необходимых разделов,
посвященных фреймам и окнам.
Объект Frame
Фреймы были введены еще в Netscape Navigator 2.0.
Фрейм (frame) это подокно полного окна браузера; его
спецификации определяются разработчиком. Фреймы
очень быстро обрели популярность, поскольку они
позволяют одновременно в одном и том же окне
отображать сразу несколько документов.
Каждый фрейм может содержать отдельный документ
(HTML, текст, изображение и пр.), каждый фрейм
имеет свой адрес и полосу прокрутки. Как и в случае
одиночных окон, фреймы можно вызывать и ссылаться на
них. Можно также загружать документы во фреймы без
воздействия на документы в других фреймах.
Фреймы обеспечивают средства просмотра и
взаимодействия с сайтом, который не доступен другим
способом. Они позволяют постоянно отображать
навигационное подокно, которое обеспечивает быстрый и
эффективный поиск требуемых страниц сайта. Можно
одновременно отображать входные и выходные формы,
а также просматривать большое количество документов
одновременно. Можно выбирать для просмотра
различные файлы изображений, используя меню. Для
отображения расширенного вида документа можно открывать
новое окно, которое будет закрываться, когда оно
больше не нужно. Фреймы также обеспечивают возможность
слайдовой демонстрации. Использование и реализация
мультифреймового сайта ограничены только
воображением его автора.
Например, окно могло бы содержать несколько
прокручиваемых фреймов, которые указывают на некоторые
URL, которые, в свою очередь, могут указывать на
фреймы. Объекты Frame создаются с помощью дескрипторов
<FRAME> внутри дескрипторов <FRAMESET>, и они
будут, по сути, объектами Window, от которых и
унаследуют все методы и свойства. Для получения
дополнительной информации относительно этих методов, свойств и
общего поведения можно обратиться в главу 15.
ПРЕДУПРЕЖДЕНИЕ
Некоторые посетители сайтов считают фреймы и
новые окна в определенной степени отвлекающими. К
тому же, иногда при использовании фреймовой
структуры информация покидает область
отображения, особенно в случае маленького монитора.
Автору сайта необходимо удостовериться, что
использование фреймов удобно для посетителей; желательно
также предусмотреть доступ к альтернативной
нефреймовой версии сайта.
JavaScript существенно расширяет возможности
сайта с фреймами и многое добавляет в способы
взаимодействия сайта с пользователями. Можно программно
открывать и закрывать новые окна. Можно обновлять и
синхронизировать фреймы с помощью сценария без
участия серверной программы. Карты изображений и
ссылки могут быть динамическими, т.е. изменяющимися в
зависимости от различных конфигураций и применений
сайта. Документы в различных фреймах и окнах могут
взаимодействовать друг с другом и передавать Друг
другу информацию.
РЕСУРС
Сетевые ресурсы, касающиеся JavaScript и
фреймов, находятся на сайте Netscape по адресу
http: / / home.netscape.com/.
Реальная выгода фреймов заключается в
возможности обеспечивать постоянное навигационное меню
сайта. Вместо прыжков с одной страницы на другую
пользователь может выбрать страницу из меню, и она появится
в другом (главном) фрейме. Оглавление может
отображаться в одном фрейме, а документы — в другом. Можно
разместить фрейм с кнопочной панелью с одной
стороны окна, и в этом фрейме пользователь будет нажимать
на кнопки, если ему потребуется загрузить часть сайта
в отображающий фрейм.
СОВЕТ
Использование фреймов имеет и некоторые
недостатки. Главный недостаток связан с уменьшением
области отображения каждого документа. Пользователям
с небольшими мониторами, портативными или
карманными компьютерами будет сложно в подробностях
рассмотреть некоторые документы в фреймах.
Неплохим выходом может оказаться создание наряду с
фреймовой также и нефреймовой версии сайта и
предоставление всем пользователям возможности просмотра
выбранной версии (с помощью JavaScript это сделать
довольно-таки просто).
Объект Frame, по сути, аналогичен объекту Window,
и с ним работают подобными же методами. В случае
одиночного окна объект Window представляет собой
объект самого высокого уровня. В случае фреймов окно
самого высокого уровня считается родительским, а его
дочерние окна считаются объектами Frame.
Создание фреймов
Фреймы создаются с помощью дескрипторов <FRAMESET>
и определяются дескрипторами <FRAME>.
<HTML>
<HEAD>
<TITLE>Creating frames</TITLE>
</HEAD>
<FRAMESET COLS="60%#*,5%">
<FRAME SRC="docl.html" NAME=,,framel">
<FRAME SRC="doc2.htna" ЫДМЕ="й:ате2">
<FRAME SRC="doc3.html" NAME="frame3">
</FRAM3SET>
</HTML>
За счет добавления нескольких строк кода можно
легко создать окно с тремя фреймами:
<HTML>
Объекты Frame EVEV
Глава 18 Е£&1
<HEAD>
<TITLE>Window frames: Window One</TITLE>
</HEM»
<FRAMESET ROWS="45%,45%" COLS="60%,60%"
onLoad="alert('Windows have frames')">
<FRAME SRC="docl.html" NSME="framel">
<FRRME SRC="doc2.html" NAME="frame2">
<FRAME SRC=" doc3.html" NAME="frame3">
<FRAME SRC="doc4.html" NAME="frame4,,>
</FRAMESET>
</HTML>
СОВЕТ —
Выравнивание дескрипторов <FRAME> не является
необходимым, но часто делается с целью
обеспечения лучшего вида программы и для демонстрации
иерархии фреймов в коде. Некоторые
HTML-редакторы выравнивают дескрипторы автоматически, они
могут также окрашивать некоторые фрагменты кода
для лучшей читаемости.
Дескрипторы <FRAMESET>
Дескриптор <FRAMESET> имеет атрибут для описания
способа разделения окна на фреймы. Этим атрибутом
может быть COLS или ROWS (для столбцов или строк),
но не оба сразу. Разработчик определяет количество
строк или столбцов фреймов в окне и размеры каждого
фрейма. Для каждой строки или столбца может
определятся либо абсолютный размер в пикселах, либо
относительный размер в процентах от окна, либо размер
вычисляется как остаток от окна после установки
других фреймов. Следующая строка создает два фрейма в
виде столбцов, один размером 60% от окна, а другой —
в оставшейся части окна (указан с помощью "*", в
данном случае этот размер составляет 40%):
<FRAMESET COLS="60%,*">
Следующая строка кода создает снова два фрейма, но
без использования знака процента. Абсолютная
ширина первого фрейма — 60 пикселов:
<FRAMESET COLS="60,*">
Как и прежде, второй фрейм создается в оставшейся
части окна.
Следующая строка создает четыре фрейма в виде
столбцов; три фрейма занимают по 30% ширины
экрана каждый, а четвертый — оставшуюся часть:
<FRAMESET COLS="30%,30%,30%,*">
В данном случае можно заменить знак "*" на "10%".
Для последнего фрейма использовать "*" необязательно.
Однако, если размеры всех фреймов определяются
через проценты, в сумме они должны составлять 100%
ширины окна.
Следующая строка кода создает два фрейма в виде
строк, первый размером 70% высоты окна, а второй — 30%:
<FRAMESET ROWS="70%, 30%">
Использование DOM
Часть III
Размеры фрейма можно задавать с помощью
сочетания абсолютных, относительных размеров и остатка, но
если полный размер всех фреймов не равен размеру
окна, результаты будут непредсказуемыми. Указание
размеров фреймов только с помощью символа "*" могло
бы показаться очевидным; однако, "*" можно
использовать для каждого фрейма. Следующая строка создает три
равных фрейма, каждый размерами в треть высоты окна:
<FRAMESET ROWS="*,*,*">
Дескрипторы <FRAME>
Атрибуты дескриптора <FRAME> определяют
документ, который будет загружаться в фрейм, имя
фрейма, границы фрейма, полосу прокрутки и опции
изменения размеров. Все следующие атрибуты дескриптора
<FRAME> — необязательны:
Атрибут SRC — URL (относительный или
абсолютный) документа, который будет загружаться во
фрейм. Документ может быть получен с того же
сервера в виде фреймового файла или с другого
сервера. Если атрибут SRC не используется, фрейм будет
пустым. Это пустое пространство можно заполнить
чем угодно, особенно, если для записи содержимого
в фрейм воспользоваться JavaScript.
Атрибут NAME, если определен, обеспечивает
средства для ссылки на фрейм из другого фрейма, а
также из JavaScript. JavaScript может также ссылаться на
фрейм через массив frames, который
рассматривается далее в главе. Значение атрибута NAME должно
начинаться с алфавитно-цифрового символа.
Границы фрейма устанавливаются с помощью двух
атрибутов, MARGINWIDTH и MARGINHEIGHT:
Атрибут MARGINWIDTH управляет боковыми
границами фрейма. Этот атрибут может
принимать значение в пикселах, начиная с единицы.
Максимальное значение ограничено только
размером фрейма. (Невозможно установить границы
таким образом, чтобы не осталось места для
отображения документа.)
Атрибут MARGINHEIGHT аналогичен
MARGINWIDTH за исключением того, что он
управляет верхней и нижней границами.
Если не указаны значения MARGINWIDTH и
MARGINHEIGHT, браузер выбирает для них
значения по умолчанию.
Атрибут SCROLLING определяет полосу
прокрутки для фрейма. Значениями для SCROLLING
могут быть YES, NO и AUTO. YES означает, что
полоса прокрутки всегда присутствует в фрейме. NO
означает, что полоса прокрутки не отображается.
AUTO отображает полосу прокрутки только, если
документ по размерам превышает фрейм. Значение
по умолчанию для SCROLLING — AUTO.
• NORESIZE запрещает пользователю изменять
размеры фрейма. Для этого атрибута значение не
указывается. По умолчанию, если этот атрибут не
определен, весь фрейм получит изменяемые размеры.
Изменять размеры фреймов, которые имеют атрибут
NORESIZE, нельзя.
СОВЕТ
Если это возможно, лучше не определять э от
атрибут, т.е. разрешить пользователю изменять размеры
фрейма.
Следующий фрагмент кода присваивает фрейму имя
Агат 1, загружает документ, устанавливает боковые
границы в 5 пикселов, верхние и нижние границы в 10
пикселов, всегда отображает полосу прокрутки и не
разрешает изменять размеры фрейма:
NAME
"framel"
< FRAME SRC = "docl.html"
MARGINWIDTH=5
MARGINHEIGHT=10 SCROLLING =YES NORESIZE>
Netscape и Microsoft предоставляют расширенные
возможности в браузерах последних версий. Посетите
web-сайты этих компаний, на которых находится более
подробная информация (соответственно http: //
home.netscape.com/ и http://www.microsoft.com/).
При использовании фреймов дополнитетьно
необходимо рассмотреть обработку событий, отлаживая
JavaScript-код или подстраивая его под целевой браузер.
JavaScript-события, наиболее часто встречаемые как в
Microsoft Explorer, так и в Netscape Navigator, сведены
в табл. 18.1.
Размещение дескрипторов
Дескрипторы <FRAMESET> и <FRAME> обычно
размещают в теле документа. Однако, в некоторых версиях
Netscape Navigator помещение их между дескрипторам и
<BODY> и </BODY> не позволяет браузеру прочесть
дескрипторы <FRAMESET>. Поскольку дескрипторы
<BODY> необязательны, дескрипторы <FRAMESET>
размещают после раздела <HEAD> документа, а
дескрипторы <BODY> опускают, как показано ниже:
<HTML>
<HEAD>
<TITL£>Frame Demo</TITLE>
</HEAD>
<FRAMESET COLS="60%,*">
<FRAME SRC="docl.html" NAME=" framel ">
<FRAME SRC="doc2.html" NAME="frame2">
</FRAMESET>
</HTML>
Таблица 18.1. JavaScript-события и фреймы.
Объект Событие
Окно или фрейм dragdrop
<BODY> <FRAMESET> <FRAME> error
focus
load
Move
Resize
unload
Этот код устанавливает фреймы и загружает
соответствующие документы. Фактически, можно сделать файл
меньше, поскольку дескрипторы <HTML>, <HEAD> и
<BODY> необязательны; файл может содержать только
дескрипторы <TITLE>, <FRAMESET- и <FRAME>, как
показано в следующем фрагменте. (Открывающий и
закрывающий дескрипторы <TITLE> — единственные
дескрипторы, которые по требованиям спецификации
HTML должны присутствовать в каждом
HTML-документе.)
<TITLE>Frame Demo</TITLE>
<FRAMESET COLS="60%,*">
<FRftME SRC="docl.html" NAME="framel">
<FRftME SRC=" doc2.html" NAME="frarae2">
</FRAMESET>
Дескриптор <NOFRAMES>
Многие авторы устанавливают также дескрипторы
<NOFRAMES> для отображения сообщений в
браузерах, не использующих фреймы:
<NOFRftMES>
код и текстовое содержимое для отображения в
браузерах, не поддерживающих фреймы
</NOFRAMES>
Содержимое может включать в себя как
HTML-дескрипторы, так и текст. Поддерживающий фреймы
браузер игнорирует информацию между
дескрипторами <NOFRAMES> и </NOFRAMES>, тогда как
браузер, не поддерживающий фреймы, игнорирует
<FRAMESET>, <FRAME> и <NOFRAMES>, но ото
бражает информацию, находящуюся между
дескрипторами <NOFRAMES и </NOFRAMES>. Дескрипторы
<NOFRAMES> размещают внутри дескрипторов
<FRAMESET>:
<TITLE>Frame Demo</TITLE>
<FRAMESET COLS="60%,*">
<FRAME SRC="docl.html" NfiME="framel">
<FRAME SRC="doc2.html" N№E=nframe2">
<NOFRAMES>
код и текстовое содержимое для отображения в
браузерах, не поддерживающих фреймы
Объекты Frame
Описание
Пользователь выбрал объект в окне.
Окно загружено с ошибкой.
Окно получило фокус.
Окно загружено.
Окно было перемещено.
Окно было изменено.
Пользователь покинул окно
</NOFRAMES>
</FRAMESET>
СОВЕТ |
Некоторые разработчики фактически дублируют
главный документ сайта внутри дескрипторов <NOFRAMES>
для безфреймовой версии. Однако, обычно нет
необходимости использовать подобную методику, т.к.
с помощью JavaScript можно создавать фреймовую
версию сайта для тех же самых страниц, которые
отображаются в браузерах, не поддерживающих
фреймы.
Интересно отметить, что дескрипторы <BODY>
можно заключать в дескрипторы <NOFRAMES>,
используя атрибуты background, bgcolor, text и т.п. для
безфреймовой версии документа. Браузер, не
поддерживающий фреймы, игнорирует <FRAMESET>
и начинает выполнять раздел <BODY> с первого
известного ему дескриптора (т.е. с дескриптора <BODY>)
внутри дескрипторов <NOFRAMES>.
Поддерживающий фреймы браузер инициализирует раздел <BODY>
в первом дескрипторе <FRAMESET> и игнорирует
содержимое дескриптора <NOFRAMES>. Конечно,
поддерживающий фреймы браузер загружает документы,
указанные дескрипторами <FRAME>, следовательно
дескрипторы <BODY> этих документов таким браузером
распознаются.
Вложенные фреймы
Можно создавать вложенные фреймы, в которых фрейм
будет разделен еще на несколько других фреймов.
Существует два разных способа создания вложенных
фреймов, оба они обеспечивают похожие результаты.
Однако, возникает различие в иерархии фреймов и в способах
ссылок на вложенные фреймы.
Следующий код создает фреймы с мультифреймовой
структурой в одном родительском окне. На рис. 18.1
показаны фреймы, а на рис. 18.2 — структура (иерархия)
этих фреймов.
<FRSMESET COLS="30%,*">
<FRAME SRC=,'docl.html" NAME="framel">
Использование DOM
Часть' III
<RWMESET ROWS="*,20%">
<FRAME SRC="doc2.html"
NftME="frame2">
<FRWffi SRC="doc3.html"
NftME="frame3">
</FRftMESET>
</FRftMESET>
tjr U*« .fie Kcttra^fc flptiw«:E.'«wrW^ B*
CW.f*- i MN " ■ GM. :]' *
■I'-Mrfsw*.^'
ШЛИЕ
Parent is
TopWiiidow
Parent is TopWindow
Parent is TopWindow
.A.- -. ....
- ■ (J£
РИСУНОК 18.1. Создание /ультифреймовой структуры в
одном родительском окне.
TopWindow
Г
framel
frame2 frames
РИСУНОК 18.2. Иерархия фреймов в одном родительском
окне.
Следующий код создает фреймы с мультифреймовой
структурой в двух окнах. (Фрейм тоже можно считать
окном.) На рис. 18.3 показаны эти фреймы, а на рис. 18.4
- их иерархия.
<FRAMESET COLS="30%,*">
<FRAME SRC="docl.html" NAME=" framel ">
<FRAME SRC="frame2.html" МАМЕ="£гате2">
</FRAMESET>
Файл frame2.html содержит следующую
дополнительную информацию для установки фреймов:
<FRAMESET ROWS="*,20%">
<FRAME SRC="doc2. html"
NAME="frame3">
<FRAME SRC="doc3. html"
NAME=" frame* " >
</FRAMESET>
Эти два фрагмента кодов создают фреймы, которые
выглядят совершенно одинаково, как показано на рис.
18.1 и 18.3. Однако, структуры этих фреймов, как
можно заметить из рис. 18.2 и 18.4. — полностью различны.
В коде для рис. 18.2 все три фрейма — дочерние
фреймы одного и того же верхнего окна. В коде, создающем
фреймы на рис. 18.4, только для фреймов framel и frame2
родительским окном является верхнее окно, a frame3 и
frame4 — это дочерние фреймы окна frame2. По этой
причине ссылаться на данные фреймы необходимо по-
разному, и эти различия будут рассматриваться в
следующих разделах.
3J-
1 rt.JI#<Wtfl ihI *?IUn
^/^XffiftSjffiteSE ДЕ«1 1SJr*r . .—
4
Parent is
TopWindow
Parent is -г*тал1е2
Я'К * .- '" .:
Parentis *ame2
3
^SibifflgLcdto"» ...=| jJtwb" k W. [..едквдёь^ЗДыц; .
-Д--
,. lfitfW*JF*«* |W ** '
* ,
-j
i
A
'Г'п , -stf!
РИСУНОК 18.3. Создание фреймов с мультифреймовой
структурой в двух окнах.
TopWindow
I
framel
frame2
Г
frame3
I
frame4
РИСУНОК 18.4. Иерархия фреймов с мультифреймовой
структурой в двух окнах.
Добавление JavaScript-кода ко фреймам
Файлы с наборами фреймов и большинство файлов
документов, которые отображаются в фреймах — это
HTML-файлы. Таким образом, в них можно
использовать JavaScript, как это делалось в других
HTML-файлах. Единственное отличие связано с тем, что здесь
JavaScript ссылается и на свойства других документов,
находящихся в фреймах, а также использует
определенные особенности ссылок на эти свойства.
На верхнее окно и его фреймы необходимо
ссылаться с учетом их иерархических отношений. В ссылке на
окно могут быть указаны свойства Window, такие как
top, parent, window и self. Свойство top ссьшается на
главное окно (окно браузера), a parent — на м\льти-
фреймовое окно, в котором содержится текущий фрейм.
Для фреймов, содержащихся в верхнем окне, parent и
top представляют собой одно и то же. Свойства self и
window ссылаются на текущий фрейм или окно.
Рассмотрим следующий код:
<FRAMESET COLS="10%,*">
<FRME SRC="docl.html" NAME="framel">
<FRAMESET COLS="50%,*">
<FRAME SRC="frame2.html"
NftME="frame2">
<FRftME SRC="doc3.html" NAME="frame3">
</FRAMESET>
Файл frame2.html содержит следующую
дополнительную информацию для установки фреймов в окне:
<FRAMESET ROWS="*r20%">
<FRftME SRC="doc4.htmln NAME="frame4">
<FRSME SRC=,,doc5.html" NAME="frame5">
</FRAMESET>
Родительским окном для frame 1, frame2 и frame3
является окно top, т.к. все эти фреймы содержатся в
верхнем окне. Родительским окном для frame4 и frame5
будет frame2, поскольку эти два фрейма находятся в окне
frame2. Если необходимо сослаться на верхнее окно из
документа, содержащегося в frame4, используют
свойство top; для ссылки на frame2 — свойство parent; и,
наконец, для ссылки на собственный фрейм данного
документа применяются свойства self или window.
На функции, переменные и другие свойства можно
ссылаться с помощью свойств Window:
<HTML>
<HEAD>
<TITLE>Frame Demo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<! —
al = 2;
function addal () (
a2 = al + 1,-
retuxn a2 ;
}
// —>
</SCRIPT>
</HEM»
<BODY>
<FRAMESET COLS="10%,*">
<FRAME SRC="docl.html" NAME="framel">
<FRAMESET COLS="50%/*">
<FRAME SRC=" frame2.html" NAME="frame2">
<FRAME SRC="doc3.html" NAME="frame3">
</FRAMESET>
Файл frame2.html содержит следующую
дополнительную информацию для установки фреймов в окне:
<HTML>
<НЕАВ>
<TITLE>Frame Demo</TITLE>
<SCR1PT IANGUAGE="JavaScript">
<! —
Ы = 2;
Объекты Frame EVCI
Глава 18 J^g^
function addBl () {
Ь2 = Ы + 1;
return b2;
]
// ">
</SCRIPT>
</HEM»
<BODY>
<FRAMESET ROWS="*,20%">
<FRAME SRC="doc4.html" NftME="frame4">
<FRftME SRC="doc5.html" NAME="frame5,,>
</FRAMESET>
Для ссьшок на переменную al и функцию addAl() из
framel, frame2 или frame3 используют top.al или
parental, и, соответственно, top.addAl() либо parent.addAl().
Однако, для ссылок из frame4 или frame5 можно
использовать только top.al и top.addAl, т.к. parent ссылается на
frame2. На переменную Ы и функцию addBl() из frame4
и frame5 можно ссылаться с помощью parent.Ы и
parent. ad(lBl().
Хочется надеяться, что все это не выглядит
слишком запутанно. Дополнительные способы ссьшок на
различные фреймы и окна будут обсуждаться в разделе
"Ссылки на фреймы" далее в главе.
При работе с фреймовыми документами и JavaScript
необходимо соблюдать некоторые предосторожности.
Сценарий может выполняться ошибочно, если фрейм
содержит некорректный документ или даже вообще не
содержит документа.
Попытка сослаться на top.al из любого документа в
предыдущем примере приведет к ошибке, если документ
отсутствует во фрейме. Однако, JavaScript предлагает
средства для предотвращения таких ошибок; такие
средства рассматриваются в следующем разделе.
Синхронизация фреймов
Как упоминалось ранее, при отсутствии правильных
документов или корректно загруженных фреймов могут
возникать ошибки и другие проблемы. Выполнение
программы остановится на половине пути, если программа
не сможет найти необходимую переменную. Кроме того,
проблема может возникнуть по причине неполной
загрузки документа. Синхронизация фреймов гарантирует,
что загрузка фреймов и документов будет завершена
прежде, чем в них возникнет необходимость, либо же
будут предприниматься альтернативные действия.
Проверка допустимости фреймов
Часто проблема возникает, когда страница содержит
JavaScript-код, который дает возможность
просматривать документы в фреймах или без них. Свойство
window.length обычно применяется для JavaScript-
решения о просмотре документов в виде фреймов. Свойство
length хранит количество фреймов, содержащихся в окне.
■■■■ Использование DOM
E£Iil ЧаспГш
Можно предусмотреть условный оператор, который
исполняет какое-либо действие, если будут использоваться
фреймы:
if( top.length != О ) {
document.write ("Frames are being used");
.1
Обычно вместо window используют top или parent,
поскольку window подразумевает фрейм, содержащий
внутри безфреймовый код (если документ не является
файлом для установки других фреймов). Если окно или
фрейм содержат фреймы, значение их свойства length
будет больше нуля. Однако, если записать символ ">"
(для "больше"), то в старых браузерах он может быть
ошибочно интерпретирован как завершающий символ
HTML-комментария, поэтому предпочтительнее
использовать символы "!=" ("не равно").
Применение короткого цикла с оператором if
поможет избежать ошибок, если документ, не находящийся
во фрейме, попытается сослаться на переменную из
другого фрейма или мультифреймового окна. Если верхнее
мультифреймовое окно содержит переменную al,
которая используется в операторе if в соответствие с
созданным документом, ошибка возникнет при просмотре
данного документа в автономном нефреймовом виде.
Однако, если свойство length, заранее проверенное в
условном выражении, равно false, то оператор if
завершает работу, предотвращая возникновение ошибки из-
за попытки обращения к несуществующей переменной.
Первая часть следующего оператора, parent.length !=
О, равна false, когда фреймы не используются, так что
дальнейшее выполнение останавливается и ошибка не
возникает:
if( (parent, length != 0) && (top.al = X ) )
Проверка правильности загрузки документов
Для синхронизации фреймов были разработаны
различные методы, некоторые из них довольно просты, в то
время как другие — гораздо сложнее. Один из самых
простых методов использует JavaScript для проверки
наличия необходимого документа в данном фрейме
перед продолжением выполнения остальной части кода.
Массив frames позволяет определять фрейм как элемент
массива. (В разделе "Ссылки на окна и фреймы" далее в
этой главе можно найти дополнительную информацию
относительно массива frames.) Рассмотрим следующую
строку кода:
if ( (parent, length == 3) G& (parent, frames [1] .title
== "My Page") )
Оператор if проверяет правильность структуры
фрейма (в данном случае — наличие трех фреймов), а
также правильность документа во втором фрейме (на
который в данном случае ссылаются). Если структура
фрейма неправильна, вычисление условия оста швлива-
ется, и никаких дальнейших действий не
предпринимается либо же предпринимаются альтернативные
действия. Если структура фрейма корректна, но неправилен
документ, сценарий не инициирует никаких действий
либо реализует альтернативные действия. Если никакие
дальнейшие действия не предпринимаются, программа
просто остается в текущей позиции, разрешая
пользователю продолжать выполнение других действий или
повторить неудавшееся действие. (Возможно, страница
не была до конца загружена, и следующая попытка
загрузки окажется успешной.) Альтернативные действия
могут включать обеспечение сигнала для пользователя,
загрузку правильной страницы и продолжение работы
или же продолжение действия с пропуском шагов,
требующих обращений к отсутствующему документу.
Предыдущий пример проверял простую фреймовую
структуру (три фрейма). Можно проверять корректность
и более сложных структур, используя массив frames
различных окон в составном операторе if. Составной
оператор if проверяет структуру сверху вниз, в противном
случае ссылка на отсутствующий фрейм вызовет
ошибку. Рассмотрим следующую строку программы:
if (top. length==3)fifi (top. frame [l] .length—2 )&&
(top. frames [1] .frame [1]=3) ...
Если часть фреймовой структуры не существует,
оператор if останавливает работу в этой точке и сценарий
выполняет альтернативное действие либо не выполняет
никаких действий вообще.
В ходе проверки наличия правильного документа код
может проверять помимо заголовка и другие свойства,
например, location.href фрейма. Вместо проверки
заголовка документа или другого свойства можно
присваивать обшей переменной в каждом документе уникальное
имя или номер и затем проверять эту
идентифицирующую документ переменную.
Регистрация документов
Простая проверка присутствия требуемого документа в
случае больших сайтов может стать слишком сложной,
в этом случае проверку полной зафузки документа
можно не проводить. Другой выход из ситуации состоит в
том, чтобы сами документы уведомляли, загружены ли
они. Используя события onLoad() и onUnload().
документы регистрируют свое присутствие в переменной
topWindow или в cookie-набора. Следующий код
показывает, что нет необходимости использовать заголовок
для идентификации документа; можно использовать
другое свойство или идентифицирующую переменную:
<BODY onLoad="top. funRecord (document .title)
onUnload="top.funRemove(document.title)">
Приведенный ниже пример демонстрирует простую
схему регистрации документа. Первый фрагмент кода
содержит файл для установки верхнего фреймового окна:
<SCRIPT LAHGUAGE="JavaScript">
<! —
var а4 = "" ; // переменная для регистрационной
// строки документа
function funRecordf // добавить документ в
// регистрационную строку при загрузке
а4 += а;
>
function funRemove{ // удалить документ из
// регистрационной строки при выгрузке
а4 = а4 . substring ( О , а 4. indexOf ) +
а4. substring (a4. indexOf+a. length , a4. length);
)
function funCheck( // проверка, зарегистрирован
// ли документ
if( a4. indexOf != -1) return true;
else return false;
»
// -->
</SCRIPT>
Следующий фрагмент кода показывает файл
документа:
<HTML>
<Т E>The Harley FXSTC</TITLE>
<SCRIPT LfiNGUAGE="JavaScript">
<!-
function funRegisterf
// присутствует ли набор фреймов?
(top.document.title == "Main Frameset") )
if ( a ="R") top. CunRecord (document title) ;
else top. unRemove (document title)
}
function funClieck{ // зарегистрирован ли
// документ?
if ( ( top. length != 0 ) && (top. document. title =
"Main Frameset") )
return top . f uncheck ;
else return false ,-
)
II —>
</SCRIPT>
<BODY onLoad="top. funRecord (document.title) "
onUnload=" top. funRemove (document.title) ">
Код, показанный ниже, проверяет, зарегистрирован
ли документ:
if( funCheck("The Softtail Series") )
top.frames[2].fxnames(); // документ
// зарегистрирован, продолжить выполнение
else // документ не зарегистрирован,
// выполнить альтернативные действия
top.location.href =
"http : //www. f oo - com/f x. html" ;
Объекты Frame EVP7V
Глава 18 ХшшА
Использование расширенных схем регистрации
Более сложные схемы регистрируют не только
документ, но также и позицию документа в иерархической
структуре фреймов. Если позиция документа
изменяется из-за различных возможных сценариев загрузки
или модификации сайта, код, содержащий ссылки на
документ, может находить документ с использованием
информации о регистрации документа. Вместо
применения одной переменной или cookie-набора для
получения информации по регистрации, некоторые схемы
используют массив переменных, в котором каждый
элемент (переменная) содержит идентификационную и
позиционную информацию для зарегистрированного
документа. Эти схемы сложны для установки, однако,
их гораздо выгоднее использовать при проектировании
очень больших сайтов, где маленькая ошибка в
структуре может вывести из строя коды ссылок во многих
документах.
Набор фреймов hldaho (http://hidaho.com/frameset/) —
это схема регистрации, эффективная для больших,
сложных фреймовых структур. Она регистрирует функции и
расположения функций во фреймовой структуре. Она
определяет расположение фрейма, передавая его имя
(self.name) родительскому фрейму, который
присоединяет к этому имени свое собственное имя и передает
далее эту информацию родительскому фрейму. Процесс
продолжается все выше по оодительским окнам, вплоть
до самого верхнего окна. Также имеется возможность
снятия регистрации заданной функции (все функции
должны иметь уникальное имя) и регистрации имени
фрейма (всех функций, расположенных в этом фрейме)
при закрытии документа.
В набор фреймов hldaho включена функция для
проверки, зарегистрирована ли указанная функция (она
возвращает false, если указанная функция не
зарегистрирована), а также функция Ехес(), которая вызывает
другие функции и передает им параметры. Поскольку
все имена функции должны быть уникальны,
разработчик получает возможность вызова требуемой функции,
не зная ее расположения, и передачи параметров в нее
через Exec(function, parameterl, parameter2,...).
Обновления фреймов
Существенная выгода, которую дают фреймы,
заключается в возможности модификации документа во
фрейме, не затрагивая при этом другой фрейм. Независимо
от того, обновляется ли фрейм с помощью ввода
пользователя в другом фрейме или модифицируется
программно, существует несколько методов для внесения
изменений в соответствующие фреймы. Эти методы могут
использовать HTML (с некоторыми расширениями
Netscape), JavaScript или комбинацию их обоих.
Использование DOM
Часть III
Ссылки
Возможно, самой простой методикой обновления
следует считать использование ссылок для изменения
текущего фрейма (загружая новый документ). Для того
чтобы направить новый документ в другой фрейм,
используют дескриптор якоря, имеющий атрибут target,
для которого можно определить значение имени
фрейма или относительное имя. Относительные слова (в
Netscape они называются magic target names)
соответствуют относительным свойствам окна, обсуждавшимся
ранее. Относительные имена, применяющиеся для
целевых ссылок, всегда начинаются с символа "_" и всегда
записываются в нижнем регистре. Эти имена — _top,
_parent и _self — соответствуют свойствам окна top,
parent и self. Однако, не существует имени _windo\v.
Следующий код представляет фреймы, в которых
ссылка в одном фрейме должна обновить другой фрейм:
<FRAMESET COLS="10%,*">
<FRftME SRC="docl.html" NAME="framel">
<FRAMESET COLS="50%,*">
<FRAME SRC="frame2.html"
NAME="f rame2 ">
<FRAME SRC="doc3. html"
NSME="frame3">
</FRAMESET>
Файл frame2.html содержит дополнительную
информацию для установки фреймов в окне:
<FRAMESET ROWS="*,20%">
<FRAME SRC="doc4.html"
NAME="frame4">
<FRfiME SRC="doc5.html"
NAME=" frames ">
</FRAMESET>
Для загрузки нового документа в frame2 с помощью
ссылки в doc4.html (в frame4) эту ссьшку записывают
следующим образом:
<А HREP="new.html" TARGET="_parent">
Для загрузки документа в верхнее окно и очистки
всех фреймов используют такую строку:
<А HREF*="new.html" TARGET="_top">
Динамические ссылки
Поскольку ссылки в JavaScript являются объектами, а
href и target — свойствами ссылок, можно создать
динамическую ссылку, присваивая другие значения href и
target:
<А HREF="#" TARGET= "_top"
onClick=■this.href="new.html";
this.target="_self";'>
Для поддерживающих JavaScript браузеров документ
new.html загрузится в текущий фрейм; если же JavaScript
не поддерживается, то текущий документ загружается в
верхнее окно. (Спецификатор фрагмента, #, без URL и
якорного имени, или идентификатор фрагмента,
ссылается на текущий документ.) Переназначение свойств
ссылки href и target можно сделать более динам ическим
путем объединения операторов присваивания с
условным и другими операторами. В следующем примере при
использовании фреймов файл, устанавливающий
фреймы, загружается в родительское окно; если же фреймы
не используются, в окно загружается главный документ:
<А HREF="main.html" TARGET="_to->"
onClick='if( top. length != О )
*-lthis.href "framesetl.html";
^this.target="_parent";}' >
Обратите внимание на кавычки; обработчик
событий должен быть заключен в кавычки (двойные или
одиночные).
Нет необходимости переназначать свойства href и
target для каждой динамической ссылки. В предыдущем
примере атрибут target можно установить в _parent.
Для нефреймовой версии _parent и _top
эквивалентны . Если пользователь имеет неподдерживающий
фреймы браузер, то атрибут target игнорируется. Пример мог
быть написан этот путь:
<А HREF="main.html" TARGET="_parent"
onClick="if( parent.length != 0 )
**{this.href ="framesetl.html"; } •>
Дескриптор ссылки может стать довольно длинным
и громоздким, поскольку к его обработчику событий
добавляется все большее количество операторов. Для
упрощения ссылки можно использовать вызов функции:
<А HREF= "main.html" TARGET="_top"
onClick='this.href=theHref();
«this . target=theTarget () ; ■ >
theHref() — пользовательская функция, которая
вычисляет условие и возвращает соответствующее значение
для свойства href. Точно также theTarget() возвращает
соответствующее значение для свойства target. Эти
функции должны вернуть значение независимо от того,
является ли вычисленное условие true или false; только
неподдерживающий JavaScript браузер использует
значения по умолчанию, установленные с помощью
атрибутов TARGET и HREF. В качестве нефреймового
альтернативного примера рассмотрим следующий код:
function theHref(){
if( top. length != и )
a = "framesetl.html";
else
a = "main.html";
return a;
}
Аналогично можно создать theTarget() Таким же
образом используют функции для других ссылок на стра-
нице, передавая соответствующие URL и целевые
имена в вызовы функций. Возможно также для большого
количества ссылок ислользовать одну-две
универсальных функции.
Часто динамические связи не нужны. Как правило,
страница загружается в текущий фрейм, либо ссылка
появляется в навиганионном меню, которое не видимо
в нефреймовой версии и всегда предназначается для
определенного фрейма. Однако, в тех немногих
случаях, когда динамические ссылки необходимы, они
оказываются весьма эффективными. К тому же, поддержка
фреймовой и нефреймовой версий — не единственный
случай, где динамические ссылки бывают нужны; эти
ссылки можно устанавливать в любом случае, по желанию.
Свойство location.href
Другой способ обновления фрейма, который не
обязательно требует применения ссылок, связан с
использованием свойства href объекта Location. Это свойство
можно также применять вместе с обработчиком событий
кнопки формы или с функцией. Не путайте объект Location
со свойством location документа, document.iocation —
свойство только для чтения, однако можно записывать
значения в window.location.href. Следующие операторы
эквивалентны и модифицируют текущий фрейм, содержащий
начальную страницу http://www.mcp.com/:
location.href = "http://www.mcp.com/";
self.Location.href = "http://www .mcp.com/" ;
window, location, href = "http://www.mcp.com/";
Следующие операторы обновляют, соответственно,
родительское и верхнее окно:
parent. location = "http://www.mcp.com/";
top.location = "http://www.mcp.com/";
Вместо использования относительных свойств
Window можно использовать имя фрейма:
parent. frame3. location, href = "http://www.mcp.com/";
В дополнение к записи свойства href можно также
записывать свойство pathname объекта Location, которое
позволяет определять путь или имя файла от корневого
каталога сервера. (Конечно, имя хоста, равно как и
протокол и порт, не зависят от текущей страницы сайта.)
Для загрузки документа http://www.abc.com/foo/
doc2.html в framel, который в настоящее время имеет
адрес: http://www.abc.com/index.htm, используется
следующий код:
framel.location.pathname="/foo/doc2.html";
Однако, если текущий документ находится по
адресу http://www.def.org/home.html или ftp://ftp.abc.com/
pub/abc.txt, необходимо задействовать свойство href.
Объекты Frame ■■■■
Глава 18 EfiU
Метод write()
Третий способ обновления фрейма состоит в
применении методов write() или writeln(). JavaScript может
динамически генерировать документ во фрейме:
<HTML>
<HEAD>
<TITLE>Updating Demo Frameset</TITLE>
</HEAD>
<FRAMESET COLS="4 0 %,*">
<FRAME SRC="docl.html" NftME="framel">
<FRAME SRC="doc2.html" NftME="frame2">
</FRAMESET>
</HTML>
Сайл docl . html
Файлом docl.html может быть любой файл, даже
пустой. Однако, во избежание ошибки "Document contains
no data" ("Документ не содержит данных") в файл
необходимо поместить, по крайней мере, пробел или символ
возврата каретки.
Динамически загружаемый фрейм может
взаимодействовать с пользователем с помощью ссылок или форм:
<HTML>
<НЕМ»
<TITLE>Updating Demo framel</TITIiE>
^SCRIPT LftNGUAGE=" JavaScript" >
< ! —
function docWrite () {
top.frame2.document.clear();
top. f rame2 . document. write ' "<HTMLXHEAD>" +
"<TITLE>Updating Demo f rame2</TITLE>" );
top. f_ame2 . document write," </HEADXBODY
^BGCOLOR^"" + document fc cml. bginput. value +
"\">");
top.frame2.document.write("<Hl>Updated Page
"•</Hl>") ,-
top. frame2 .document.write ("Update by " +
document.forml.inputl.value);
top. f rame2 . document, write ( "</BODYX/HTML)>';
top. f rame2. document. close() ;
}
II —>
</SCRIPT>
</HEAD>
-rBjDY>
<FORM NAME="forml">
<INPUT TYPE="TEXT" NAME="inputl">
<P>
Select a Background Color<BR>
<INPUT TYPE="RADIO" NAME="radiol" VALUE="white"
CHECKED
onClick= ' document. f orml .bginput. value=
"white"■>White<BR>
<INPUT TYPE="RADIO" NAME="radiol" VALUE="red"
onClick=' document, f orml.bginput.value=
"red" '>Red<BR>
<INPUT TYPE="RADIO" NAME="radiol" VALUE="blue"
onClick= ' document. f orml. bginput. value=
"blue"'>Blue<BR>
<INPUT TYPE="RADIO" NAME="radiol" VALUE="green"
onClick=' document, f orml. bginput. value=
Использование DOM
Часть III
"green"■>Green<BR>
<P>
<INPUT TYPE="HIDDEN" NAME="bginput" VALUE="white">
<P>
<INPUT TYPE=" BUTTON" VALUE=" Update frame2"
onClick="docWrite()">
</FORM>
</BODY>
</HTML>
JavaScript-код, используемый для обновления
фреймов, может оказаться очень сложным. Можно применять
условные операторы, вычисления или любой сценарий
для создания документа, обновляющего фрейм. Игры,
слайдовые демонстрации, карты изображений и
результаты выполнения запросов в базы данных — вот только
некоторые примеры использования обновлений
фреймов.
Кеширование файлов
Загрузочные модули, которые требуется включить в
обновляемый фрейм, могут заранее кешироваться для
предотвращения загрузки еще немодифицированного
фрейма. Для кеширования изображения до момента, когда
в нем возникнет необходимость, используют объект
Image. Однако, этот объект недоступен в ранних
версиях JavaScript-браузеров. Другая методика загрузки
изображения предполагает использование документа в
скрытом фрейме:
<HTML>
<HEAD>
<TITLE>Hidden Frame to Cache Images</TITLE>
</HEAD>
<FRAMESET COLS="100%,*">
<FRAME SRC="docl.html" NAME="framel">
<FRAME SRC="cache.html" NAME="frame2">
</FRAMESET>
</HTML>
Следующий код — это неотображаемый документ,
предназначенный только для загрузки изображений, что
обеспечит запись изображений в кеш:
<HTML>
<HEAD>
<TITLE>Updating Demo framel</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<i —
va±~ al = u;
// — >
</SCRIPT>
</HEAD>
<BQDY onLoad="al = 1;">
<IMG SRC=,,imagel.gif" 1-ПШН=1ии HEIGHT=200>
<IMG SRC="image2. jgp" WIDTH=300 HEIGHT=120>
СОВЕТ
В дескрипторах изображений необходимо указывать
размеры для предотвращения проблем, возникающих
при выполнении сценария в разных версиях браузеров.
Несмотря на то что с дескрипторами изображений
обычно советуют использовать атрибут alt, этот
атрибут в данном случае не обязателен, поскольку документ
не должен отображаться в каком-либо браузере, в том
числе и неграфическом.
Переменная al — это флажок, который
устанавливается после полной загрузки изображения.
Использовать этот флажок необязательно, но полезно для
предотвращения выполнения сценария модификации фрейма
до полной загрузки изображений:
if(top.frame2.al !=1 )(
alert ("Please wait, images are still
^downloading") ;
)
else{
. оставшаяся часть сценария
<IMG SRC="image3.gif" ITDIH=2
</BODY>
</HTML>
HEIGHT=200>
Сценарии для фреймов с картами
изображений
В Netscape Navigator 2.0 была введена поддержка
клиентских карт изображений (хотя Netscape — не первый
браузер, который стал это делать) наряду с фреймами
и JavaScript. Клиентские карты изображений (CI ent-side
imagemaps, CSIM) обеспечивают существенную выгоду
по сравнению с существовавшими ранее серверными
картами изображений. С помощью CSIM можно
включать файл карты как отдельный файл в документ с
изображением или ссылкой на него. Потребуется только
отправить запрос на сервер для обработки и
перенаправления на соответствующий URL. Пользователи будут
видеть в строке состояния URL-адрес, связанный с
картой. Кроме того, CS1M можно использовать вместе со
старыми серверными картами изображений с целью
обеспечения совместимости со старыми браузерами.
Свойства карт изображений
С картами изображений связаны несколько объектов и
свойств. Дескрипторы области изображения на карте
являются объектами JavaScript. Атрибуты href и target -
свойства объекта Area, которые можно изменять
программно через JavaScript. Объект Area содержит
обработчики событий onClick, onMouseOver и onMouseOut.
Фактически, объект Area имеет те же свойства и
события, что и объект Link. Дескриптор области имеет еще и
атрибут nohref, который предотвращает загрузку URL
документа, присвоенного атрибуту href.
ПРИМЕЧАНИЕ
Объекты и свойства карты изображений в ранних
версиях JavaScript-браузеров были не доступны. Объект
Area и его свойства появились в JavaScript 1.1.
Кроме того, в JavaScript 1.1 обработчик событий onClick
и атрибут nohref не функциональны для всех платформ.
Ссылки на объекты Area
На объекты Area можно ссылаться с помощью массива
links. Массив links содержит все объекты Link и Area в
документе. Нумерация элементов начинается с нуля.
Следуюший код демонстрирует пример документа со
ссылкой и CS1M.
<HTML>
<HEAD>
<TITLE>CSIM DEMCK/TITLE>
</HEAD>
<BODY>
<A HREF="docl.html" target="frameA">The Softtails
</A>
<MAP NAME="mapl">
<A NAME="areaA" COORDS="2" ,20 , 80 , 80"
HREF="doc2 .html" TARGET="f rameA">
<A NAME="areaB" COORDS="100 .20,180,80"
HREF="doc3 .html" TARGET="frameA">
<A NAME="areaC" COORDS="20 , 100 , 80, 180"
HREF="doc4 .html" TARGET="frameA">
<A NAME="areaD" COORDS="100 ,100 ,180, 180"
HREF="doc5 .html" TARGET="frameA">
</MAP>
<IMG SRC="mapl.gif" WIDTH=200 HEIGHT=200
ALT="Menu" USEMAP="#mapl">
<! — Код для альтернативных серверных карт
изображений и текстовых меню для
неграфических браузеров попросту опущен -->.
</BODY>
</HTML>
В приведенном выше примере ссылка упоминается
как document.HnksfO], поскольку это первый дескриптор
ссылки или области в документе. На область агеаА
ссылаются как на doeument.linksjlj, т.к. это второй
дескриптор ссылки или области, area В — это document.Iinks[2],
агеаС — document.Iinks[3] и, наконец, areaD -
document, links [4].
На свойства href и target объектов Area, как и в
случае с объектами Link, можно ссылаться и присваивать им
новые значения через массив links. Следующая строка
кода изменяет значение свойства href для агеаВ так,
чтобы при нажатии на его область карты изображения
вместо doc3.html загрузился бы документ doc6.html:
document. link [2 ]. href="doc6. html"
Аналогично можно изменять свойство target:
document.link[2].target="frameB"
Свойство и атрибут target должны определяться как
имя фрейма или одно из специальных относительных
слов фрейма (_top, _parent, self или blank), но не как
JavaScript-свойства (top, parent и т.п.).
Объекты Frame ШЦВШ
Можно открывать и устанавливать имена новым
окнам, присваивая target имя, которое уже не
используется. Новое окно, открытое таким способом, будет
иметь имя, указанное в качестве значения атрибута
target.
Вызов функции
Дескрипторы области не всегда должны ссылаться на
документ. Можно осуществлять вызов функции,
применяя протокол javascript:, за которым следует имя
функции:
<А NAME="areaA" COORDS="20,20,80,80"
HREF="javascript:funl() ">
Данный сценарий вызовет вместо документа
определяемую пользователем функцию funl(). Можно также
использовать методы и операторы JavaScript. Эта
методика особенно эффективна для фреймовой версии
сайта, в которой серверная карта изображений
представлена в виде навигационной кнопочной панели. Функция
может включать различные операторы, предназначенные
для определения использования фреймов и установки
некоторых флажков либо проведения вычислений или
оценок. Функция может тогда выполнять
соответствующее действие, например, загрузку некоторого
документа, либо не выполнять никаких действий вообще.
Следующие фрагменты кода содержат простой
сценарий слайдовой демонстрации с кнопочной панелью
для карты изображений, которая позволяет циклически
передвигаться вперед и назад в рамках
последовательности слайдов. Карта изображений также содержит
кнопки возврата в меню, таким образом, пользователь может
выбрать другую слайдовую демонстрацию или
вернуться на начальную страницу. Каждая слайдовая
демонстрация имеет имя последовательности, которое свою
первую часть формирует из имен файлов слайдов. Вторая
часть имени файла — порядковый номер, уникальный
для каждого слайда в последовательности. Каждый из
файлов слайдов имеет три переменных: имя
последовательности, порядковый номер слайда и общее
количество слайдов в последовательности. Сценарий читает эти
три переменные, чтобы загрузить файл, опираясь на ту
часть карты изображений, которая была нажата.
Следующий фрагмент кода устанавливает фреймы:
<HTML>
<HEAD>
<TITLE>Slide Show Main Frameset</TITLE>
</HEAD>
<FRAMESET ROWS="*,55">
<FRAME SRC="slidel.html" NAME="frameA">
<FRAME SRC="button.html" NAME="frameB">
</FRAMESET>
</HTML>
Ниже приведен код из файла slide 1:
<HTML>
НВШН Использование DOM
EfifiJ Часть III
<HEAD>
<TITLE>Slide Show - First Slide</TITLE>
<SCRIPT LANGUAGE=" JavaScript">
<• —
var al = "slide"; //первая часть имен файлов
//слайдов
var a2 = 1; // номер последовательности
var аЗ = 3;// количество слайдов
// —>
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="slidel.gif" WIDTH=300 HEIGHT=200
ALT="The 1992 FXSTC, Softtail Custom">
</BODY>
</HTML>
Следующий фрагмент содержит файл кнопочной
панели:
<HTML>
<HEAD>
<TITLE>Slide Show Demo Image Map</TITLE>
<SCRIPT LANGUAGE=" JavaScript" >
function funl {
al = top. frames [0] . al; / / корневое имя файла
// series последовательности слайдов
а2 = top.frames [0] .а2; // номер
// последовательности
аЗ = top.frames[0] . аЗ; // количество слайдов
if( a = "f" )
if(a2 = аЗ)
а2 = 0;
if ( а = "■г" )
if(a2 = 1)
а2 = аЗ - 1;
else
а2 = а2 - 2;
а2 = а2 + 1;
al += а2;
al += ".html";
top.frames[0].location.href = al;
}
</SCRIPT>
</HEAD>
<B0DY BGC0L0R=" 000000">
<MAP NAME="mapl,,>
<AREA COORDS="1,1,75,50"
HREF='j avas cript:funl("f">'
onMouseOver='window. status="Cycle forward
^through slide show";
^*r turn true ' >
<AREA COORDS="76,1,150,50" HREF="menu. html"
TARGET» f ameA"
onMouseOver=' window. status="Return to Menu
"to Select Another Slide Show";
" и turn true' >
<AREA COORDS="151,1,225,50" HREF="home.html"
TARGET= "_top"
onMouseOver='window.status="Quit Slide Show
wand Return to Home Page";
wr turn true ' >
<AREA COORDS="226,1,300,50"
HREF='javascript:funl("r")'
onMouseOver= 'window. status="Cycle backward
w through slide show";
"return true ■ >
</MAP>
<IMG SRC="buttons.gif" WIDTH=300 HEIGHT=50
USEMAP="#mapl ">
</BODY>
</HTML>
Работа с фреймовыми URL
Нет никаких принципиальных различий между URL
фреймовых и нефреймовых документов. В случае
фреймового окна, однако, можно заходить на различные
сайты и использовать различные базовые HREF. Один
фрейм может содержать документ из одного каталога на
сервере, другой фрейм — документ из другого
каталога, а третий фрейм может загружать документ вообще
из другого сервера. Независимо от конкретного фрейма,
к относительному URL в ссылке обращаются из
документа, содержащего ссылку. Можно использовать
дескриптор <BASE>, <BASEHREF="http://www.foo.com/
some.html">, в документе, чтобы установить все ссылки
для базового HREF. Базовый HREF можно отменить,
помещая в ссылку абсолютный URL.
Как и в случае атрибута HREF дескриптора <BASE>,
можно определить базовый целевой фрейм <BASE
TARGET="frameA"> направляет все ссылки в
документе на указанный фрейм. Можно также отменить
базовый целевой фрейм с помощью атрибута TARGET в
ссылке. Например, <HREF="some.html"TARGET-"_seir>
отменяет пелевой фрейм и загружает документ в
собственный фрейм.
ПРИМЕЧАНИЕ
Дескриптор <BASE>, <BASE HREF="some.html"
TARGET="someframe">, необходимо помещать в
раздел <HEAD> документа. Для дескриптора <BASE>
не предусматривается какое-либо содержимое и не
существует закрывающего дескриптора <BASE>. Этот
дескриптор с атрибутами HREF и TARGET показан в
следующем примере:
<HTML>
<HEAD>
<TITLE>Base Demo</TITLE>
<BASE HREF="http://www.foo.com/home.html"
TARGET=" f rameA">
</HEAD>
<BODY>
Дополнительную информацию относительно
использования URL в фреймах можно найти в этой главе, в
основном, в следующем разделе и в разделе
"Обновление фреймов".
Ссылки на фреймы
При работе с фреймовыми окнами в прикладных
программах JavaScript, вероятно, потребуются другие
способы ссылок на окна. JavaScript обеспечивает четыре
вида ссылок на окна. Каждый вид реализован как
свойство объекта Window.
ГРИМСТАгМЕ
Отдельные окна браузера не имеют иерархической
структуры; однако при ссылках на окно, содержащее
код, который открывает другое окно, его зачастую
называют родительским элементом. Новое открытое
окно при этом называют дочерним. Любое новое окно
может назначать переменную в других окнах, чтобы
другие окна могли ссылаться на данное окно и его
свойства. Для ссылки на свойство в новом окне
просто используют windowName.properfy.
Рассмотрим следующий код:
newWiIdow = window.open();
newWindow.location.href = "http://www.mcp.com/";
Хотя этот фрагмент и не обеспечивает наиболее
эффективный способ записи кода, он демонстрирует
способ ссылки на свойство дочернего окна. Новое
окно было открыто и получило имя (в данном случае,
newWindow). Затем было присвоено значение
location.href нового окна.
Ссылки на текущее окно
В главе 9 обсуждалось использование window для ссылок
на текущее окно. Однако, тогда не было сказано, что
объект Window также содержит свойство под названием
window, которое может служить инструментом для
ссылки на само себя. Кроме того, свойство self объекта Window
— это еще одно средство для ссылок на текущее или
активное окно. Например, следующих две строки кода
программы функционально эквивалентны:
window, defaultstatus = "Welcome to the Goat
Farm Home Page"
self defaultstatus = "Welcome to the Goat Farm
Home Page"
Поскольку как window, так и self — синонимы
текущего окна, может показаться странным, что оба они
включены в язык JavaScript. Как было показано в
Предыдущем примере, объяснение этому — гибкость; по
желанию можно использовать как window, так и self.
Однако, насколько полезными могут быть window и
self, настолько же они могут привести к путанице, если
подойти к этому логически. В конце концов, свойство
объекта, которое используется как эквивалентный
термин для самого объекта, довольно необычно.
Следовательно, будет удобнее считать window и self для объекта
Window зарезервированными словами, а не свойствами.
Поскольку window и self — свойства объекта Window,
нельзя использовать и window, и self в одном и том же
контексте. Например, следующий код работать не будет:
window, self. document. write ( "<hl>Test. </hl>")
Наконец, в мультифреймовых средах window и self
всегда относятся к окну, в котором выполняется JavaScript-
код.
Объекты Frame Ш9ЯШ
Глава 18 Еш
ПРИМЕЧАНИЕ
В некоторых объектно-ориентированных или
основанных на объектах языках self может относиться к
активному объекту, независимо от его типа. В JavaScrol
self относится только к активным объектам Window
или Frame — и ни к чему больше.
Ссылки из родительского фрейма на дочерний
Родительский фрейм может ссылаться на свой дочерний
фрейм одним из двух способов. Во-первых, можно
использовать имя фрейма, которое определяется в
параметре NAME дескриптора <FRAME>. Например, в
следующем коде переменная myFrameFlicka ссылается на имя
фрейма frameA:
<HTML>
<HEAD>
<TITLE>Parent to Child Demo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function childCallO {
var myFrameFlicka = self.frameA.name
)
</SCRIPT>
</HEAD>
<FRAMESET COLS="50%,*">
<FRAME SRC="docl.html" NAME="frameA">
<FRAME SRC=" doc2.html" NAME="frameB">
</FRAMESET>
</HTML>
Во-вторых, можно ссылаться на дочерний фрейм,
используя массив frames. Каждый фрейм в окне, или
родительский фрейм, является элементом массива. На
элементы массива frames ссылаются помощью frames [i],
где i — число, соответствующее порядковому номеру
фрейма в родительском окне. Фреймы пронумерованы
от нуля до числа, на единицу меньшего общего
количества фреймов. Следующий код определяет четыре
фрейма:
<FRAMESET ROWS="25%,25%,25%,25%">
<FRAME SRC=" docl.html" NAME="f rameA">
<FRAME SRC="doc2.html" NAME="frameB">
<FRAME SRC="doc3.html" NAME="frameC">
<FRAME SRC="doc4.hbnl" NAME="frameD">
</FRAMESET>
Следовательно, массив frames данного окна будет
содержать четыре элемента:
frames [0] ДЛЯ фрейма frameA
frames [1] ДЛЯ фрейма frameB
frames [2] для фрейма frameC
frames [3] ДЛЯ фрейма frameD
Обратите внимание, что при ссылках на элемент
массива frames в конце слова frames[i] присутствует "s",
что указывает на множественное число.
Использование DOM
Ш Часть
Ссылки из дочернего фрейма на
родительский
Как было показано в данной главе, фреймы — это те же
самые объекты Window, но внутри содержащего фреймы
окна. Внутри мультифреймового окна возникает
необходимость различать между собой фреймы,
отображаемые в браузере. Свойство parent объекта Window
помогает это делать, ссылаясь на родительское окно — окно,
содержащее определение <FRAMESET>. Например,
если требуется получить некоторую информацию о
текущем родительском окне, используйте пример из
листинга 18.1.
Листинг
18.1.
childWindow.htm.
<html>
<head>
<title>Child Window</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
function getParentlnf о ( ) {
myParentTitle = parent, document, title
alert ("V- daddy ■ s name is " +
myParentTitle)
1
// —>
</SCRIPT>
<form>
<input
type="button"
value="Get Info"
onClick="getParentInfо()">
</form>
</body>
</html>
Кроме получения значений свойств, можно также
обращаться к методам родительского окна. Например,
листинг 18.2 содержит исходный код HTML для
родительского окна фреймов с методом showInfo(),
определенным без внутренней реализации. Листинг 18.3
показывает, как дочернее окно получает доступ к
этому методу. Когда пользователь нажимает на объект
childButton, его обработчик событий onClick вызывает
runDadMethod() с передачей ключевого слова this в
качестве параметра. В свою очередь, runDadMethod()
вызывает метод showInfo() объекта parent, передавая в
параметре имя текущего объекта. На рис. 18.14 показан
результат.
Листинг
18.2.
parentWindow.htm.
<html>
<head>
<title>Parent Window Xitle</title>
<SCRIPT LANGUAGE="JavaScripf>
function showlnfo (objectName) {
alert (objectName)
</SCRIPT>
</head>
<Frameset Cols="35%,65%">
<Frame Name = "FRAME1" SRC="childWindow.htm">
<Frame Name = "FRAME2">
</Frameset>
</html>
СОВЕТ
Для определения пустого фрейма следует престо
опустить атрибут SRC в конструкции <FRAME>
Листинг 18.3. anotherChildWindow.htm.
<html>
<head>
<title>Child Window</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
<! —
function runDadMethod(curObject) {
parent.showInfo(curObject .name)
>
// ~ >
</SCRIPT>
<form>
<iii|>ul
type="button"
name="childButton"
value="Run Dad's Method"
onClick="runDadMethod(this)">
</form>
</body>
</html>
_aJst:_3U
_L3
■Й
tbmtavc
I
РИСУНОК 18.5. Вызов метода изродительского окна.
Родительское окно зачастую представляв! собой
самое верхнее окно в мультифреймовой оконной среде, но
это не обязательное требование. Существует также
возможность вкладывать разноуровневые коды установки
фреймов друг в друга, как будет показано ниже, при
обсуждении свойства top. Поэтому свойство parent
ссылается на непосредственное родительское окно текущего
окна. При необходимости обратиться к родительскому
окну следующего уровня используют строку вида:
myGranddadTitle = parent.parent.document.title
В более сложных фреймовых структурах на любой
из фреймов можно ссылаться, используя их позицию в
иерархии фреймов, как показано на рис. 18.6 ив табл.
18.2.
top window
I 1 1 I I
frameA frameB frameC frameD frameE
I
frameBA frameBB
I
frameEA frameEB
frameBBA frameBBB
РИСУНОК 18.6. Иерархическая структура сайта с
вложенным i фреймами.
Таблица 18.2. Ссылки на другие фреймы из
frameBBB.
Фрейм
Ссылка
frameA
frameBA
frameBB
frameEA
top.frameA или top.framesfO]
top.frames[1].frameBA или
top.frames[1].frames[0]
parent, top.frames[1].frameBB или
top.fidnie: 1 ] 'rames .1 ]
top.frames[4].frameEA или
top.frames[4].frames[0]
Приведенная ниже строка используется для ссылки
на заголовок документа в frameEA и присвоения его
переменной al:
al = top. frames [4] . frames [0] .document, title,-
На другие свойства ссылаются совершенно
аналогично.
ПРИМЕЧАНИЕ
Важнс обратить внимание на различия в иерархии,
которые могут существовать между двумя
похожими на вид фреймовыми структурами, как было
показано в разделе "Создание фреймов" ранее в главе.
В JavaScript версии 1.1 и выше появилось свойство
opener, которое обычно ссылается на окно
(родительское), из которого было открыто текущее окно. Из
нового (дочернего) окна можно ссылаться на свойство
открывшего его родительского окна через top. opener,
property.
Для ссылки на родительское окно из нового
открытого окна в JavaScript 1.0 можно прибегнуть к методике
Объекты Frame
Глава 18
присваивания. Обычно здесь используют свойство top
объекта Window; однако, в случае необходимости
вместо top можно использовать self, parent или window. В
следующем фрагменте кода используется свойство top,
поскольку код должен появляться в любом из
фреймовых окон. Использование top гарантирует, что
соответствующее свойство окна верхнего уровня будет
идентифицировано, self, parent или window может означать
любой фрейм в окне верхнего уровня.
neWWindow = window, open("docl.html") ;
newWindow. oldWindow = top;
Используйте приведенный ниже синтаксис для
ссылки на свойство в открывшем окне из открытого нового
окна:
top. oldWindow. proper ty
Использование ссылок из дочернего окна на
дочернее окно
Свойство parent важно не только для доступа к
родительскому окну из дочернего, но также и для ссылки на
любой другой объект в одном из дочерних окон того же
уровня. Как показано на рис. 18.7, любая связь между
дочерними фреймами должна быть реализована через их
родительское окно.
На фреймы одного уровня с разными
родительскими окнами необходимо ссылаться, используя их
абсолютную позицию в иерархической структуре:
<FRftMESET COLS="50%,*">
<FRAME SRC="docl.html" NAMB="frameA">
<FRAME SRC="doc2.html" NAME="frameB">
</FRftMESET>
I В этом ПрИМбрС окно framel ссылается на значение кнопки "0К" в окне
I frame2. Данное окно может сделать это с помощью свойства parent
buttontabel = parent.frame2.documentform[0].okButton.value
Родительское окно — •.
^ V
framel jf
РИСУНОК 18.7. Использование свойства parent дл • есъьюк па
элементы того же уровня.
Использование DOM
Следующий фрагмент содержится в docl.html:
<FRAMESET R0W5="50%,*">
<FRftME SRC="doc3.html" NAME="frameAA">
<FRAME SRC="doc4.html" NAME=" frameAB ">
</FRAMESET>
Следующий фрагмент содержится в doc2.html:
<FRAMESET ROWS="50%,*"'>
<FRAME SRC="doc5.html" NAME="frameBA">
<FRAME SRC="doc6.html" NAME="frameBB">
</FRAMESET>
frameBB ссылается на frameAB таким способом:
top.frames[0].frameAB
Можно также использовать следующую строку:
top.frames[0] .frames[0]
Для межуровневых ссылок не существует
промежуточного уровня между верхним и родительским окном,
такого как "прародительское окно". Это, видимо, к
лучшему, что родительское окно — единственный термин,
позаимствованный из генеалогии; представьте на
секунду, что ссылка на фрейм выглядела бы как third, cousin,
twice, removed (игра слов: что-то типа "дважды убрать
третьего двоюродного брата").
Если окнам браузера в момент открытия всегда
присваиваются имена, для одного из новых (дочерних) окон
не будет проблемой сослаться на другое дочернее окно
через открывшее его (родительское) окно. В этом
случае потребуется просто упомянуть имя окна, как было
показано в предыдущих разделах. Если окну в момент
открытия присвоено имя переменной myWindow, другое
дочернее окно может ссылаться на него таким способом:
top.opener.myWindow
Можно синхронизировать окна теми же методами,
которые применяются для фреймов. Однако, при
отсутствии единственного окна верхнего уровня браузера или
иерархии окон, одно окно, открывшее другие окна,
выбирается в качестве точки синхронизации. Следующий
фрагмент кода — это пример сценария синхронизации
окон:
<HTML>
<TITLE>The Harley FXSTC</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<! —
function funRegisterf
// проверить, что страница находится в своем
// окне, а открывающееся окно содержит
// корректный документ
if ( (top. name== "newWindowl" ) & &
(top.opener document.title="Main Frameset") )
if ( a ="R")
top. ruener. funRecord(document. title) ;
else top . opener. funRemove (document. title);
]
function funCheck{ // зарегистрирован ли
// документ
if ( (top.name=="newWindowl") &&
(top.opener .document.title=="Main Fraireset")
)
re turn to-^. opener, f unCheck ;
else return false;
)
II -->
</SCRIPT>
<BODY onLoad="top. funRecord (document title) ■
onUnload="top. funRemove (document.title) ">
Следующая программа проверяет, зарегистрирован
ли документ:
if( funCheck("The Softtail Series")
neWWindov?2 . frames [2] . fxnames () ; // документ
// зарегистрирован, продолжить действия
else // документ не зарегистрирован,
// инициировать альтернативное действие
top.location.href =
"http://www.foo.com/fx.html";
Как и в случае фреймов, можно использовать более
сложные схемы для регистрации информации о
расположении документа. В этих схемах применяются те же
самые сценарии, как и для фреймов, но с добавлением
еще одного уровня для включения отдельных жон
браузера.
Окно верхнего уровня
Подобно свойству parent в функции, свойство top
объекта Window позволяет ссылаться на самое верхнее окно в
пределах мультифреймового окна или в наборе мульти-
фреймовых окон. При работе с одним мультиф^еймовым
окном свойства parent и top ссылаются на одно и то же
окно. Однако, если имеются вложенные уровни мульти-
фреймовых окон, top обращается только к окну самого
высокого уровня, a parent может ссылаться как на это,
гак и на другое родительское окно.
СОВЕТ
В окне верхнего уровня и родительских окнах
удобнее всего хранить глобальные методы.
Различие между данными окнами лучше всего
проиллюстрировать на примере. Предположим, что
имеется два набора фреймов. Первый набор фреймов делит
окно браузера горизонтально на фреймы, занимающие
80% и 20% пространства (как показано на рис. 18.8).
Второй набор фреймов разделяет на четыре квадранта
(показанные на рис. 18.9) нижнее, занимающее 20%,
подокно окна самого верхнего уровня.
Предположим, что для каждого дочернего фрейма
требуется получить заголовки его верхнего и
родительского окон. Для этого можно определить общую
функцию с именем getName(), которая бы возвращала эту
информацию вызвавшему ее окну. Так же, как
дочерние окна могут обращаться к методам родительского
Объекты Frame
окна, все фреймы в мультифреймовом окне имеют
доступ к методам окна верхнего уровня. Таким образом,
окно верхнего уровня — это удобное хранилище для
функций, которая должна быть глобально доступна для
всех окон. Метод getName() определяется следующим
образом:
function getName (callingObject, relation,
parentName) {
callingObject.document.write("My " + relation +
■■■s name is " + parentName +".")
}
"t<ZI> fpZ> Ш= rSL I-l~l *
5-t_ l-l-tl-r-l |
^v
fmiain.htm
bottcmFramesethtm
РИСУНОК 18.8. Мулътифреймов сокно верхнего уровня.
bottomFrameset.htm \
1 bottomSubframe4.htm
РИСУНОК \Ъ.9.Мулътифреймовс 'окно нижнего уровня.
Параметр callingObject представляет окно,
вызывающее функцию. Используя точечную нотацию, в
пределах рассматриваемого окна можно выполнять команда'
document.write. Параметры relation и parentName —
строки, обеспеченные вызывающим окном, но не
управляемые в данной функции.
Глава 18
Этот метод getName() вызывается дочерним
фреймом после загрузки. Его можно вызывать, помещая
следующий код в каждом дочернем фрейме:
<SCRIPT LANGUAGE="JavaScript">
top. getName (self, "parent" ,
parent.document.ti tie)
document.write("<p>")
top.getName ,self, "top", top. document, title)
</SCRIPT>
Сценарий использует top для обращения к методу
getName(), использует self для идентификации себя в
качестве вызывающего окна, а также parent и top для
получения заголовков окон. На рис. 18.10 показан
результат после загрузки фреймов.
Листинги 18.4. 18.5 и 18.6 содержат исходный
код для мультифреимового окна верхнего уровня
(topFrameset.htm), мультифреимового окна нижнего
уровня (bottomFranieset.htm) и одного из дочерних
фреймов нижнего уровня (bottomSubFramel.htm).
Листинг
18.4.
topFramesethtm.
<HTML>
<HEAD>
<TITLE>Top-Level Frameset</TITLE>
-SCRIPT IANGUAGE="JavaScript">
function getName (callingObject, relation,
parentName) (
callingObject. document, write ("My " +
relation + " s name is " + parentName +
')
}
--. 3CRIPT>
</HEAD>
<FRAMESET ROWS="80%,20%">
<FRAME SRC=" frmain.htm"
NAME="main"
MARGINWIDTH=" 1 "
MARGINHEIGHT=" 1 " >
<FRAME SRC="bottomFrameset.htm"
NAME=" footnotes"
MARGINWIDTH=" 1 "
MARGINHEIGHT=" 1 " >
<NOFRAMES>
..arning text should go here for brcwsers with no
frame support.
<BODY>
<. BODY>
</NOFRAMES>
</FRAMESET>
<. HTML>
Листинг 18.5. bottomFrameset.htm.
<HTML>
<HEAD>
<TITLE>Lower-Level Frameset</TITLE>
</HEAD>
<FRAMESET COLS="24%,24%,24%,28%">
<FRAME SRC= "bottomSubframel. htm">
<FRAME SRC="bottomSubframe2.htm">
<FRAME SRC="bottomSubframe3.htm">
ШШ-
Использование DOM
Часть III
<FRAME SRC="bottomSubframe4.htm">
</FRAMESET>
</HTML>
-J-
My partnt'l nam* is Г p-L*< i Frameset,
h top's i ime Is Г p-Lc< > Frameset.
Mytop^ n I»
TDp-Level Frameset
My top's name Is
Top-Lf
My mp"5 name и Tap-lcvd
РИСУНОК 18.10. Свойства parent и top.
Листинг 18.6. bottomSubFramel.htr".
<HTML>
<HEM»
<TITI£>Footnotes Frame in Bottom Frameset</TITLE>
<SCRIPT LANGUAGE="JavaScript">
top.getName(self, "parent",
'•parent. document. title)
document.write("<p>")
top.getName (self, "top", top. document, title)
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
ПРИМЕЧАНИЕ
Возможная проблема, связанная со ссылками на
документы в других фреймах и окнах — ограничения
системы безопасности, которая не дает JavaScript
доступа к свойствам документов другого сервера. Начиная
с Netscape Navigator 2.02, это ограничение было
реализовано с целью защиты информации о списке
посещений пользователя, о паролях в HTML-формах,
структуре каталогов и других конфиденциальных
элементах.
Netscape Navigator 3.0 обеспечивает меру
безопасности, называемую data tainting (разрушение данных),
которая разрешает пользователям обращаться к
документам другого сервера без возможной угрозы для
системы безопасности. С технологией разрушения
данных код JavaScript может ссылаться и
пользоваться свойствами документов из других серверов.
Полученные данные разрушаются (или портятся) так,
чтобы их невозможно было переслать на другой сервер
без пользовательского подтверждения (с целью
обеспечения безопасности и секретности).
Более подробная информация о методике разрушения
данных находится в главе 35.
Объект Location
Объект Location формирует URL текущей страницы. Он
имеет двойное назначение:
Устанавливает объект Location для перехода на
новый URL.
Извлекает определенные элементы URL и работает
с ними. Без объекта Location для получения
необходимой информации потребовалось бы выполнять
определенные манипуляции над строкой URL..
Основная структура URL такова:
protocol//hostname: port pathname search hash
Типичный URL может выглядеть, например, так:
http://www.acadians.com/javascript/search
w*Hats?qt=RFC+173~+ficol=XL
Свойства объекта Location, каждое из которых
является элементом URL, сведены в табл. 18.3.
Таблица 18.3. Свойства объекта Location.
Атрибут Описание
HREF Полный URL
PROTOCOL Начальный элемент URL (информация до
двоеточия).
HOSTNAME Хост и имя домена либо IP-адрес.
HOST Элемент Hostname:port (Имя хоста:порт) из
URL.
PORT Коммуникационный порт сервера.
PATHNAME Элемент пути URL.
SEARCH Часть определения запроса URL (начинается
с символа "?").
HASH Якорное имя URL (начинается с символа "#").
ПРИМЕЧАНИЕ
Важно отличать объект Location от свойства location
объекта Document. Значения объекта Location изменять
можно, а свойство location объекта Document
предназначено только для чтения.
Открытие нового URL
Вместо использования специального метода перехода к
новому URI в окне, можно просто открыть новый URL,
установив значение объекта Location. Интересно
заметить, что это можно сделать, присваивая значение URL
объекту непосредственно или же присваивая данное
значение свойству href объекта Location. Например,
следующих две строки выполняют одно и то же действие:
window.location "http://www.acadians.com/"
window. location. href = "http://www.acadians.com/"
Для создания с помощью JavaScript окна
редактирования URL, можно использовать код, приведенный в
листинге 18.7.
Листинг 18.7. moveTo.htm.
<HTML>
<HEAD>
<SCRIPT LANGUAGE
"JavaScript">
function xnoveon () {
var urlAddress = ""
urlAddress = document, forms [0] .Editl.value
window.location = urlAddress
J
<-. SCRIPT:»
</HEAD>
<BODY>
<FORM>
<INPUT type="text" name="Editl">
<INPUT type="button" value="move"
onClick="moveon()">
</FQRM>
-;-. BODY>
</HTML>
В мультифреймовых окнах можно определить
значение объекта Location в других фреймах, ссылаясь на
соответствующее имя окна. Например, рис. 18.11
демонстрирует мультифреймовое окно, в котором можно
изменять URL с помощью ввода текста в форму,
расположенную в нижнем фрейме. Листинг 18.8 показывает
исходный код для этого нижнего фрейма.
вшгя
i :£& &*-' £... Eiu№** UfAu^i .fan
-Loeft> ,>b^t:LA>''Mllr4mtwVQwiiA№xHrlcahiri(.fclw>iPL
-3SS
[This page intentionally left blank.]
protoCOl//"10Stname:pC pathname
\hn^Jt ^j |4*r>V0*,l*f" vyfl
г
• v&\
РИСУНОК 18.11. Использование объекта Location для
изменения URL другого фрейма.
Листинг 18.8. frfootno.htm.
<html>
<head>
<title>Footnotes Frame in Location Object
Example</title >
<SCRI]?T LANGUAGE="JavaScript">
Объекты Frame
Глава 18
function gotoPage()
parent.frames[0].location.href =
window.document.loc.ProtocolField.
'"options [window.document, loc.
wProtocolField.selectedlndex] . text
document.loc.HostnameField.value +
document.loc.PathnameField.value
//
I
->
SCRIPT:»
head>
<body>
<pXfont size=5>protocol//hostname:port pathname
</fontX/p>
<form name="loc" method="POST">
<pre>Protocol: Hostname: Pathname:
<sel ct name="ProtocolField" size=l>
<option>http://</option>
<option>file://</option>
<option>javascript:</option>
<option>f tp:</option>
<option>mailto: </option>
<option>gopher: </option>
<option>about:</option>
--, select> -:'input
type=text
srze=23
maxlength=256
name="HostnameField"
value="www.typehere.com"> < input
type=text
srze=2'J
maxlength=100
name="PathnameField"
value="/"> -:input
type=button
name="Go"
value="Go"
onClick="gotoPag ■() X/pre>
</form>
</body>
</html>
Работа со свойством protocol
Свойство protocol объекта Location позволяет определять
тип текущего URL. Таблица 18.4 содержит часто
используемые протоколы.
Таблица 18.4. Протоколы объекта Location.
Тип URL Протокол
Web
File
FTP
MailTo
Usenet
Gopher
JavaScript
Navigator
http:
file:
ftp:
mailto:
news:
gopher:
javascript
about:
Использование ЮМ
Часть ill
Объект History
Все, кто много времени провел в Web, вероятно,
знакомы со списком посещений браузера. Так же, как список
посещений позволяет пользователю возвращаться на
посещенные сайты, так же объект History в JavaScript
позволяет JavaScript-разработчику переходить к ранее
посещенным Web-страницам. Объект History не имеет
никаких событий, а только свойства и методы,
перечисленные в табл. 18.5 и 18.6.
Таблица 18.5. Свойства объекта History.
Свойство
Описание
current URL текущего документа.
length Длина списка посещений.
next Следующий URL в списке посещений.
previous Предыдущий URL в списке посещений.
Таблица 18.6. Методы объекта History.
Метод
Описание
Васк() Загружает предыдущий документ из списка
посещений.
Forward() Загружает следующий документ из списка
посещений.
Go() Переходит к заданному документу.
Go(n) Если л> 0, загружает документ, который
находится на л пунктов дальше в списке
посещений.
Go(sfring) Загружает документ из списка посещений,
URL которого содержит указанную строку.
Определение размеров списка
Для определения количества посещений в списке
можно использовать свойство length объекта History.
Предположим, что требуется отследить число посещений
правого фрейма мультифреймового окна. Левый фрейм
содержит следующий код:
<HTML>
<HEAD>
<SCRIPT LANGUAGE =
"JavaScript">
function moveon() j
var urlAddress = ""
urlAddress =
document. form [0] Editl. value
parent.frames[1] .location = urlAddress
document, forms [0] .Edit2.value =
parent.frames[1].history.length
}
</SCRIPT>
</HEAD>
<B0DY>
<FORM>
<INPUT type="text" name="Editl">
<INPUT type="button" value="move"
onClick="moveon()">
<INPUT type="text" name="Edit2">
</.'< 41.>
</B0DY>
</HTML>
Пользователь может применять текстовый объект
Editl для ввода целевого URL. Когда пользователь
щелкает на кнопке "Move" для перехода на указанный URL,
текстовый объект Edit2 изменяется и отображает длину
списка посещений правого фрейма.
Навигация по списку посещений
Одно знание длины списка посещений редко
оказывается особо полезным, однако оно может принести
больше пользы, если требуется перемещаться по списку с
использованием объекта History.
Перемещение на одну страницу назад
Метод back() функционально эквивалентен щелчку на
кнопке "Back" (стрелка влево) в инструментальной
панели браузера. Например, следующий код перемещает
окно в его предыдущую позицию:
window.history.back()
Перемещение на одну страницу вперед
Как и следовало ожидать, метод forward() — то же, что
и щелчок на кнопке со стрелкой вправо в
инструментальной панели браузера. Этот метод используется ана-
window. history. forward (}
Переход к указанной странице по номеру в списке
Метод go() используется для перехода к
определенному месту в списке посещений. Его синтаксис таков:
[window. ] history .go (delta | "location")
Параметр delta — положительное или отрицательное
целое число, которое определяет количество шагов
перехода. Например, следующая строка — это переход к
следующему документу в списке посещений
(эквивалент использования метода forward ()):
window.his tory.go(1)
Таблица 18.7 содержит возможные значения delta.
Таблица 18.7. Значения delta.
Метод
Описание
delta < О Перемещает назад на delta пунктов.
delta > О Перемещает вперед на delta пунктов.
delta = О Перегружает текущий документ.
Объекты Frame
Переход к указанной странице по строке в списке
В качестве альтернативы можно использовать параметр
location для определения заданного URL в списке.
Обратите внимание, что здесь не нужен точный URL, a
только подстрока. Следующий пример позволяет
перемещаться к URL в списке посещений, который содер-
житту^у.асасИапв.сот/Шепеуу:
window. history. go ("www. acadians. com/f ilenew" )
В приведенный выше пример можно добавить back(),
fonvard() и go() для обеспечения более полной
функциональности мультифреймовой системы навигации. На
рис. 18.12 показано ультифреймовое окно. Листинг 18.9
содержит исходный код HTML для родительской
страницы мультифреймовогоокна, а листинг 18.10 — коддля
списка посещений. Правая область окна не содержит
никакого JavaScript- кода.
'^'i.i'-irj'iiviingca
Bfg
Ways to navigate
• isethsiucaUoniir^sit
'SJi
• LsEfhehilofyoojei.ntorft^
and fwrenyj mrttwdi.
4M
I
m
hislon List Entries
r~
JavaScript Chronicles— Free Subscription
! Form
i WhOTo№ermagaUfW5doyDucuiTenBy3uoscnt>*,ro*
Г К Bee*
I DBH5
Г ШтЛ
Г" inftWorie
Г iiaiato&aed Ldvisor
Г fci, p^iubcr
1~ Inter tie l Artvleor
Г re flav&tloe
I" Delphi Jntoiioanc
Г Veb Inlomut
Г JovaVorld
■я. it"
РИСУНОК 18.12. Пример фрейма History,
Листинг 18.9. HistoryFrames.htm.
Example</title>
<html>
<head>
<txtle>Hxstoxy Ob]
</h ;ad>
<Fraineset Cols="35%,65%">
<Frame Name = "FRftMEl" SRC="History.htm">
<Frame Name = "FRAME2"
SRC="JavaScriptChronicles.htm">
</Frameset>
</htmI>
Листинг 18.10. History.htm.
<html>
<head>
<title>History Paore</title>
</head>
<body bgcolor="#FFFFFF">
<SCRIPT LANGOAGE="JavaScript">
<! —
function goPrev<) {
Глава 18
parent. frames [ 1 ] . history, back ()
}
function goNext ( ) {
parent. frames [1] . history . forward ( )
functionmoveOn ( )
var urlAddress = ""
xrrlAddress =
document . forms [ 0 ] . LOcationBox . value
xf (xrrlAddress i= "") [
parent, frames [1] .location
xrrlAddress
document. forms [0] . ListLen. value =
parent, frames [1] .history-length I
else [
alert ("Please enter a URL before
^•clicking the Go button.")
I
>
functxon jump О (
if (document.fozms[0] .goParam[l].checked) (
var goVal = 0
goVal =
parselnt (document, forms [0] .GoBox. value) )
else {
var goVal = ■"■
goVal = document.forms[0].GoBox.value
parent, frames [1] .history.go(goVal)
}
II — >
<:/SCRIPT>
<form method="POST">
<h3Xem>Ways to navigate</em></h3>
<ul>
<li>Use the locatxon object. </li>
</ul>
<pxinput
type=text
size=20
maxlength=50
name="LocationBox"> <input
type=,,buttonM
value="Find"
onClick="moveOn() ■> </p>
<ul>
<li>Use the history object's <em>back() </em>
and<em> forward() </em>methods
</li>
</ul>
<p align=centerXinput
type="button"
value="Slt; Sit;"
onClick="goPrev()"> <input
type="button"
value= 'figt; figt;"
onClick="goNext() "X/p>
<ul>
<li>Use the history object's <em>back () </eni>
and<eni> forward () </em>methods
</ul>
<blockquote>
<p><input type=radio name="goParam"
value="ByCount">By Count</p>
Использование DOM
Часть III
<pXinput type=radio name=" goParam"
value="ByName,,>By Name</p>
<pxinput
t«pe_ i-ext
size=20
maxlength=30
name="GoBox"> <input
type="button"
value="Go"
onClirlr "jumoO" > </p>
<p>History List Entries: <input
vpe=text
size=3
maxlength=4
name="ListLen"> </p>
</blockquote>
</form>
</body>
</html>
Объект Navigator
tob JavaScript. На первый взгляд, казалось бы, этот
объект является верхним уровнем пирамиды,
поскольку программное обеспечение браузера (элемент,
представленный объектом Navigator) содержит информацию
относительно браузера, выполняющего сценарий.
Однако, объект Navigator не имеет никакого отношения к
другим объектам в иерархии; в действительности, он
обособленный объект, обеспечивающий только способ
получения информации о текущем браузере.
ПРИМЕЧАНИЕ
Имейте в виду, что объект Navigator невозможно
использовать для получения информации от браузеров,
которые не поддерживают JavaScript. Если бра/зер не
поддерживает JavaScript, он не будет обрабатывать
запрос на информацию. Очевидно, что невозможно
применить JavaScript-подпрограмму для определения,
поддерживает ли браузер JavaScript.
Объект Navigator — единственный объект, который
выглядит невписывающимся в иерархию встроенных объек-
Таблица 18.8. Свойства объекта Navigator.
Объект Navigator имеет свойства, показанные в табл.
18.8.
Свойство
Описание
appName
appVersion
appCodeName
userAgent
appCodeName
AppMtnorVersion
AppName
AppVersion
BrowserLanguage
ConnectionSpeed
CookieEnabled
CpuClass
OnLine
Language
MimeTypes
Platform
Plugins
System Language
UserAgent
UserLanguage
UserProfile
Имя браузера.
Версия браузера.
Кодовое имя браузера.
Заголовок user-agent для браузера.
Кодовое имя браузера; поддерживается в Navigator 2 и Internet Explorer 3.
Подверсия версии браузера; поддерживается в Internet Explorer 4.
Имя браузера; поддерживается в Navigator 2 и Explorer 3.
Версия браузера; поддерживается в Navigator 2 и Explorer 3.
Языковая конфигурация браузера; поддерживается в Explorer 4.
Скорость, на которой браузер выполнил соединение; поддерживается в Explorer 4.
Работает ли браузер с cookie-наборами; поддерживается в Explorer 4.
Класс процессора на платформе браузера; поддерживается в Explorer 4.
Указывает, находится ли браузер в режиме он-лайн; поддерживается в Explorer 4.
Языковая конфигурация браузера; поддерживается в Explorer 4.
MIME-типы, поддерживаемые браузером; согласуется с Navigator 3 и Explorer 4.
Операционная система, под управлением которой работает браузер; поддерживается в Navigator 4
и Explorer 4.
Массив подключаемых модулей, установленных в настоящий момент; поддерживается в Navigator 3
и Explorer 4.
Язык операционной системы по умолчанию; поддерживается в Explorer 4.
Заголовок user-agent, посылаемый с браузера на сервер; поддерживается в Explorer 3 и Navigator 2.
Пользовательский язык; поддерживается в Explorer 4.
Доступ к информации пользовательских профилей; поддерживается в Explorer 4.
Объект Navigator юддерживают как Netscape Navigator,
так и Microsoft Internet Explorer. Листинг 18.11
демонстрирует пример отображения информации о браузере
в диалоговом окне, когда пользователь нажимает на
кнопку "Show Browser Info". Рисунки 18.13 и 18.14
показывают сигнальные окна сообщений, которые
появляются в результате работы сценария, соответственно,
в Netscape и в Internet Explorer.
Листинг 1U11. navigatorlnfo.htm.
<HTML>
<HEAD>
<SCRIPT LANGUAGE = " JavaScript" >
function displayBrowserInfо() (
var browserStr = ""
browserStr += "Browser: " +
navigator. appName + "\r"
browserStr += "Version:" +
navigator.appVersion + "\r"
browserStr += "Codename: " +
navigator.appCodeName + "\r"
browserStr += "User agent: " +
navigator. userAgent + "\r"
alert(browserStr)
]
</SCRIPT>
<BODY>
<H1X/H1>
<FORM>
<INPUT
Type="button"
Value="Show Browser Information"
OnClick="displayBrowserInfo () '"
</INPUr>
</FORM>
</BODYi
</HTML>
\ SWW-^LJMttW rfa\
f
e
РИСУНОК 18.14. Информация о браузере в Microsoft Internet
Explorer.
Резюме
В этой главе детально рассматривались мультифреймовые
и одиночные окна. Объекты Frame, Location и History
обеспечивают средства для работы с
соответствующими аналогами браузеров. Объект Navigator, намного
отличающийся от других объектов JavaScript,
позволяет извлекать информацию о текущем браузере.
В главе также обсуждались методы использования
JavaScript для ссьшок на объекты и свойства в других
фреймах и окнах браузера. Бьши приведены базовые
примеры создания окна и установки фреймов, а также
рассмотрены способы ссьшок на свойства в различных
фреймах и окнах. Кроме того, были даны способы
обновления и синхронизации фреймов и окон, а также
несколько примеров окон и фреймов,
взаимодействующих друг с другом через JavaScript.
Использование JavaScript на фреймовом сайте
несколько более сложно, чем использование его на
нефреймовом сайте, однако полученные выгоды зачастую
стоят небольших дополнительных усилий по
преодолению трудностей. Кратко рассматривались несколько
примеров сочетания JavaScript с фреймами и окнами.
Возможные применения и реализации фреймового сайта
ограничиваются только воображением разработчика
Web-сайта и степенью его трудолюбия.
РИСУНОК 18.13. Информация о браузере в Netscape Navigator.
Другие DOM-объекпы
В ЭТОЙ ГЛАВЕ
DOM - браузеры
Управление DOM-документами и DOM-методы
В главе 13 были рассмотрены основные принципы
объектной модели документа (DOM) и показана
стандартизация DOM-модели с помощью интуитивно
понятных представлений в виде деревьев. В этой главе
с задействованием ряда листингов на JavaScript,
рассматривается практическое применение общих DOM-
методов. Кроме того обсуждаются различные DOM-
узлы и элементы и практические способы управления
ими, а также некоторые важные проблемы, связанные
с браузерами.
DOM-браузеры
DOM-модель использует части документа для
представления логической иерархии с помощью дескрипторов
страниц, их последовательности, свойств и атрибутов.
Последние изменения DOM в Netscape Navigator и
Internet Explorer связаны с работой консорциума W3C.
С помощью Netscape Navigator 3 могли быть написаны
и прочитаны атрибуты изображения и якорные
дескрипторы, можно было запрашивать информацию о том,
какие подключаемые модули имеются в наличии, какие
МГМЕ-типы поддерживаются и т.п. В Navigator 4.0 были
Таблица 19.1. XML- и HTML-узлы документов.
предоставлены дескрипторы для уровней дерева и
усовершенствованы методы определения ширины и
высоты контейнеров и окон. Исторически этот уровень
DOM-модели был поддержан в JavaScript, и как Java-
аплеты, так и подключаемые модули могли управлять
DOM с помошью LiveConnect, который является
основным кодом языка создания сценариев JavaScript. В
Internet Explorer 4.0 DOM-модель интегрирована
непосредственно в браузер, а не через язык создания
сценариев. Это помогает устранить несоответствия между
разными языками создания сценариев, например, различия
в позициях дескрипторов. В результате информа ция
становится стандартизованной и непротиворечивой для
различных браузеров, причем для взаимодействия с
DOM теперь возможно использовать JavaScript,
VBScript, элементы управления ActiveX, Java-аплеты и
любые другие компоненты языка, совместимые с DOM
API, записанным в OMG IDL. Из этого следует, что
исследования навигационных процессов в главе 13 было
уместным. Узлы ранее описывались как составные
части DOM-деревьев и, как упоминалось в главе 13,
именно узлы дают возможность программам
взаимодействовать с содержимым документа. Все узлы перечислены в
табл. 19.1.
Узел
Описание
Атрибут
Раздел CDATA
Комментарий
Тип документа
Свойство дескриптора: например элемент img может иметь атрибут src.
Текстовое содержимое, за исключением символов метки. Метод createCDATASection
создает узел со значением, которое является заданной строкой.
Комментарии для страницы, описывающие код и другие аспекты Web-страницы или всего
Web-сайта.
Каждый документ содержит объект DocumentType или атрибут doctype, который может
быть и null. Интерфейс DocumentType обладает возможностью перечислять такие
специфические объекты.
Другие DOM-объекты
Глава 19
Узел
Описание
Document Объектное представление полного документа. Интерфейс Document представляет полный
HTML- или XML-документ и предоставляет стандартные методы создания объектов
Document, которые включают элементы, текстовые узлы, комментарии и команды
обработки. Получившиеся объекты Node имеют атрибут ownerDocument.
Elemert За исключением текста, большинство узлов Element — наиболее общие объекты, по
которым авторы перемещаются при навигации по документу, как показано в следующем
XML-примере:
<elementUnleashed id=[sq1]Unleashed demo[sq2]>
<subelement1/>
<subelement2><subsubelement/X/subelement2>
</elementllnleashed>
Очевидно, что DOM-дерево содержит в качестве самого верхнего узла узел Document,
содержащий узел Element для elementUnleashed, который, в свою очередь, содержит
два дочерних узла Element, subelementl и subelement2, при этом subelementl дочерних
узлов не имеет.
Ссылка на сущности (объекты) Префикс амперсанд (&) указывает, что объект вставлен в документ с помощью ссылки.
Используя DOM Level 2 версии 1.0, редактировать узлы Entity невозможно; скорее,
каждый EntityReference в структурной модели потребуется заменять копией содержимого
реального объекта, только после этого появится возможность их модификации. Дочерние
элементы узла Entity предназначены только для чтения, при этом узлы Entity
родительских элементов не имеют.
Атрибуты
systemld типа DOMString (только для чтения). Содержит заданный идентификатор
системы либо null, если он не определен.
notationName типа DOMString (только для чтения). Содержит имя примечания для
непроанализированных объектов либо null для проанализированных.
publicld типа DOMString (только для чтения). Содержит заданный общий идентификатор
либо null, если он не определен.
Ссылка на элемент, атрибут или строку текста.
Команда для синтаксического XML-анализатора; DOM сохраняет эту информацию
обработки в XML-документах.
Атрибуты
Адрес типа DOMString (только для чтения). Это адрес команды обработки или первого
маркера после команды обработки.
Данные типа DOMString — содержимое команды обработки, которая находится между
первым символом (кроме пробела) после адреса и символа непосредственно перед "?>".
Text Объект, содержащий текст.
Узел
Команда обработки
ПРИМЕЧАНИЕ
DOM-модель WWW-консорциума (W3C)
поддерживается в Netscape Nav:"ator5 и в Microsoft Internet Explorer
5. В Navigator 4 написан новый HTML для объекта Layer.
Для изменения текстового элемента с заданным ID и
значением newtext форма приобретет следующий вид:
var lyr = document .layers [id] .document
lyr.open()
1/z.write(newtext)
lyr . close ()
Internet Explorer 4.0 реализует другой способ и
предоставляет HTML-элементы документа, использующие
ключевое слово ALL. Для изменения текстового
элемента с заданным ID и значением newtext форма
получает следующий вид:
document, all [id] . innerHTML = newtext
Explorer 5 использует ключевое слово ALL для
достижения совместимости сверху вниз. A Navigator 5.0 для
обеспечения совместимости сверху вниз сохраняет
модель Layers для объектов.
СОВЕТ
В DHTML версии 4 для всех браузеров потребуется
создать разветвление кода, с помощью которого
выясняется тип браузера и выполняются
соответствующие корректировки:
ns4 = (document. layers) ? true: false
ie4 = (document.all)? true:false
function simpleLayerWrite (id,newtext) {
Использование DOM
~Часть III
if <ns4) (
var lyr =
document.layers[id].document
lyr.opt ()
lyr.write(text)
lyr.close()
I
else if (ie4) document, all [id) .
innerHTML = newtext
ПРИМЕЧАНИЕ
Далее будет рассматриваться, главным образом, DOM
ltS-реапизации (и механизм браузера Gecko). Это
примечание, однако, может очень скоро потерять
актуальность, возможно, уже сейчас Netscape Navigator
и Explorer имеют совместимую DOM-модель.
Управление DOM-документами и
DOM-методы
Теперь известно, что DOM-модель содержит полезные
и практические методы управления объектом или
структурой узла документа. Это дает общие методы для
выполнения простых вещей, таких как копирование,
вставка и замена узлов. Подобного рода методы
позволяют формировать легко заменяемые документы,
которые любой разработчик сможет изменить и понять
при условии, что он знаком с DOM-моделью. Методы
предоставляют образцы для непосредственного создания
документов, а также используют ключевой аспект
основанных на объектах документов — возможность
повторного использования, следовательно, вместо многократ-
Листинг 19.1. Метод cloneNode.
ного создания новых узлов и объектов их можно
просто копировать. Таким образом, теперь мы вплотную
подошли к "гайкам и болтам" этих методов и их
практического применения при создании и управлении
документами, которые рассматриваются в следующих
разделах.
Использование метода cloneNode
Выполнение метода cloneNode задается с помощью его
логического параметра in. Когда он равен true,
копируется полное поддерево данного узла. С другой стороны,
значение false данного параметра заставляет браузер
копировать только указанный узел и игнорировать его
дочерние и родительские элементы. Применение
метода cloneNode продемонстрировано в листинге I9.1, где
параметр false используется для копирования только
узла, без поддерева. Сценарий не делает ничего, кроме
создания массива узлов, включенных в таблицу, и это
достигается с помощью HTML. Сценарий на JavaScript
содержит метод cloneNode, с помощью которого
определяется узел, предназначенный для копирования, а
также вызывается сигнальный диалог, отображающий
состояние копируемого узла. В этом примере
сигнальное сообщение показывает, что метод cloneNode вернул
копируемый объект. К данной информации
добавляется отображение того, что копируемый объект не имеет
никаких дочерних и родительских элементов, т.е.
копировался только узел. Замена в методе значения
параметра cloneNode с false на true заставляет браузер
копировать полное поддерево, включая дочерние и
родительские элементы узла.
<HTML>
<НЕМ»
<title> DOM cloneNode example </title>
</HEM»
<BODY ID="bodyNode">
<TABLE ID="tableNode">
<TBODY>
<TR ID="trlNode"XTD BGCOLOR="yellow">Row 1, Cell K/TDXTD BGCOLOR="orange">Row 1,
Cell 2</TDX/TR>
TD="tr2Node"XTD BGCOLOR="red">Row 2, Cell K/TDXTD BGCOLOR="magenta">Row 2,
Cell 2</TDX/TR>
<TR ID="tr3Node"XTD BGCOLOR="lightgreen">Row 3, Cell K/TDXTD BGCOLOR="beige">Row 3,
Cell 2</TDX/TR>
<TR ID="tr4Node"XTD BGCOL0R="blue">Row 4, Cell K/TDXTD BGCOLOR="lightblue">Row 4,
Cell 2</TDX/TR>
<TR ID="tr5NodenXTD BGC0LOR="orange">Row 5, Cell K/TDXTD BGCOLOR="purple">Row 5,
Cell 2</TDX/TR>
</TBODY>
</TABLE>
<SCRIPT IANGUAGE="JavaScript">
<! —
tr30bj = trlNode.cloneNode (false) ;
alert(
■■tr30bj.firstChild = " + tr30bj. first Child + "\n" + "tr30bj. nodeName = " + tr30b j. nodeName
};
/7 —>
</SCRIPl>
</BODY>
</HTML>
Другие DOM-обьекты
Глава 19
Использование метода insertBefore в DOM
Метод insertBefore обеспечивает средства
формирования объектных структур, помещая заданные объекты
перед другими указанными объектами. Здесь
используются два параметра, которые являются объектами:
tbodyObj.insertBefore(tr20bj, tr30bj)
Возможное использование метода insertBefore
(равно как и других DOM-методов) — это формирование
таблицы. Например, можно создать узел, скопировать
его и затем использовать insertBefore для создания
таблицы. Листинг 19.2 показывает конструкцию таблицы,
построенной с использованием этих методов. Объект
tbodyObj содержит три дочерних объекта: trlObj, tr20bj
и tr30bj, которые создаются с помощью следующих
выражении:
trlObj = document. createElement ("TR") ;
trltdlObj = document. createElement ("TD") ;
trltd20bj = trltdlObj.cloneNode (false);
tr2tdlObj = trltdlObj.cloneNode (false);
При использовании метода insertBefore объекты
собираются следующим образом:
tbodyObj.insertBefore (tr30bj);
tbodyObj.insertBefore (tr20bj, tr30bj);
tbodyObj.insertBefore (trlObj, tr20bj);
trlObj.insertBefore (trltd20bj);
trlObj . insertBefore (trltdlObj, trltd20bj) ;
tr20bj.insertBefore (tr2td20bj);
tr20bj . insertBefore (tr2tdlObj, tr2td20bj) ;
Как видно из приведенного выше кодового
фрагмента, последний дочерний объект (tr30bj) вставляется в
первую очередь, второй дочерний объект вставляется
перед ним, а первый дочерний (trlObj) вставляется
перед вторым (tr20bj).
Листинг 19.2. Создание таблицы с помощью
insertBefore.
<HTML>
<НЕМ»
<TITLE> Building tables using DOM </TITLE>
</HEAD>
<BODY ID="bodyNode">
<SCRIPT LMJGUAGE="JavaScript">
<l —
rowlcolumnlObj = document. createTextNode ("Row 1,
■■* column 1 ") ;
tableObj = document createElement ("ТАВЬЕ") ;
tbodyObj = document.createElement("TBODY") ;
trior j = document. createElement ("TR") ;
trltdlObj = document.createElement("TD");
trltd20bj = trltdlObj .cloneNode(false) ;
tr2tdlObj = trltdlObj.cloneNode (false) ;
tr2td20bj = trltdlObj.cloneNode (false) ;
tr3tdl0bj = trltdlObj . cloneNode (false) ;
tr3td20bj = trltdlObj . cloneNode (false) ;
tr2Gbj = tr10bj.cloneNode(false);
tr30bj = tr 10bj.cloneNode(false) ;
rowlcolumnlObj .cloneNode (false) ;
rowlcolumnlObj . cloneNode (false) ;
rowlcolumnlObj .cloneNode (false) ;
rowlcolumnlObj .cloneNode (false) ;
rowlcolumnlObj .cloneNode (false) ;
"Row 1, column 2 " ;
"Row 2,
"Row 2 ,
"Row 3,
"Row 3,
column 1
column 2
column 1
column 2
trltd20bj),
tr2td20bj) ;
tr3td20bj)
rowlcolumn20bj
row2columnl0bj
row2column20bj
row3columnl0bj
row3column20bj
rowlcolumn20b j . nodeValue =
row2columnl0bj . nodeValue =
row2column20bj .nodeValue =
row3columnl0bj .nodeValue =
row3column20bj .nodeValue =
returnValue = tableObj . insertBefore (tbodyObj)
tbody0bj.insertBefore(tr30bj);
tbodyObj.insertBefore(tr20bj, tr30bj);
tbodyObj . insertBefore (trlObj , tr20bj) ;
trlObj.insertBefore(trltd20bj);
trlObj.insertBefore(trltdlObj,
tr20bj.insertBefore(tr2td20bj)
tr20bj. insertBefore(tr2tdl0bj,
tr30bj.insertBefore(tr3td20bj)
tr30bj.insertBefore(tr3tdlObj,
trltd20bj . insertBefore (rowlcolumn20b j)
trltdlObj.insertBefore(rowlcolumnlObj)
tr2td20bj.insertBefore(row2column20bj)
tr2 tdlObj . insertBefore (row2columnl0bj)
tr3td20bj . insertBefore (row3column20bj)
tr3tdlObj . insertBefore (row3columnl0bj)
bodyNode.insertBefore(tableObj);
// —>
</SCRIPT>
</B0DY>
</HTML>
Использование метода swapNode
Метод swapNode меняет местами указанные поддеревья,
встроенные в указанные узлы. Этот метод возвращает
целое поддерево. Применение метода swapNode
демонстрируется в листинге 19.3.
Функция printChildObjects печатает дочерние
элементы bodyNode вместе со свойством nodeName.
Использование метода removeNode
Выражение removeNode(false) удаляет указанные узлы и
присваивает их дочерние объекты родительскому
объекту удаленного узла:
erasedNode = p3Node.removeNode(false);
Листинг 19.4 иллюстрирует использование метода
removeNode, а также применения функции printChildObjects.
■■■ЦП Использование DOM
ЕаС&Л Часть III
Листинг 19.3. Перемещение абзацев.
<SCRIPT IANGUAGE="JavaScript">
<! —
var msg = "";
function printChildObjects() {
childCount = bodyNode.childNodes.length;
msg += "bodyNode. childNodes . length = " + bodyNode . childNodes. length + "\n" ;
for (var 1 = 0; i < cliildCount; 1++) {
msg += "bodyNode.childNodes [i] .nodeName = " + bodyNode.childNodes[i] .nodeName + "\n";
)
)
printChildObjects();
msg += "Swap Paragraph 2 with paragraphl\n";
var b = p2Node;
var swappingNode = p3Node . swapNode (b) ;
msg += " swappingNode. nodeName = " + swappingNode. nodeName + "\n";
msg += "swappingNode. childNodes. length = " + swappingNode. childNodes. length + "\n";
msg += "p2Node nodeName = " + p2Node. nodeName + " \n" ;
printChildObjects();
alert(msg);
// —>
</SCRIPT>
Листинг 19.4. Удаление узлов.
<SCRIPT IANGUAGE="JavaScript">
<i —
var msg = "";
function printChildObjects () {
childCount = bodyNode.childNodes. length;
msg += "bodyNode. childNodes. length = " +■ bodyNode. childNodes. length + "\i\" ;
for (var i = 0; i < childCount; i++) {
msg += "bodyNode.childNodes [i] .nodeName = " + bodyNode. childNodes [i] .nodeName + "\n";
)
}
printChildObjects();
msg += "Erase paragraph 3\n" ;
var deletedNode = p3Node. removeMode (false) ;
msg += "deletedNode. nodeName = " + deletedNode. nodeName + "\n";
msg += "deletedNode.childNodes.length = " + deletedNode.childNodes .length + "\n";
printChildObjects ();
alert(msg);
// —>
</SCRIPT>
СОВЕТ
DOM-объекты обращаются к полному содержимому
Web-страницы, включая и графику, которая может
храниться в формате GIF. Первый графический
символ в документе можно изменить путем замены его
свойства src (src означает "source" — источник). В
показанной ниже DOM-форме первое изображение
просто заменяется на изображение с именем New_Title
в формате GIF.
window.document, images [0] ,src='New__Title.gif ' ;
Изображения в формате GIF и другие графические
файлы можно редактировать в пакете Paint Shop Pro
от Jasc Software. Эта программа распространяется
свободно и ее можно выгрузить со множества
сайтов, в том числе и с сайта Jasc. Она имеет полезные
инструментальные средства редактирования и
эффекты, необходимые для создания превосходной Web-
графики.
Резюме
Эта глава, посвященная D0M, представляет собой еще
один шаг вперед в изучении JavaScript. В ней
обсуждались способы создания и изменения составляющих
сущностей документа. Таким образом, зная структуру
и характеристики DOM-модели, ее можно применять
буквально где угодно, используя практически любой
программный объект, включая приведенные выше
сценарии. Вне этих сценариев можно проделывать то же
самое с элементами управления ActiveX и Java-лплета-
ми. Можно смело заявить о том, что появился новый
ландшафт стандартизованных целевых платформ или
клиентских браузеров, которые впервые общаются на
том же языке, который определяет DOM-модел!..
Технологии
программирования на
динамическом HTML
ЧАСТЬ
В ЭТОЙ ЧАСТИ
20. Динамическая подмена
21. Визуальные эффекты
22. Каскадные таблицы стилей
23. Слои
24. Меню и панели инструментов DHTML
25. Взаимодействие с другими технологиями
Динамическая подмена
В ЭТОЙ ГЛАВЕ
■ Знание событий
■ Виды динамических подмен
Динамическая подмена (rollover) — это общий
метод совершенствования страниц сайта с
использованием JavaScript. Фактически, это — одна из первых
глобально используемых функций JavaScript, сохранившая
свою популярность до сих пор. Другие методы, такие
как прокручиваемые сообшения строки состояния и
текстовые поля, исчезли с горизонта.
Знание событий
Создавая rollover-эффекты в рамках сайта, необходимо
глубоко разбираться в соответствующих событиях
JavaScript, Несмотря на то что события уже
рассматривались в главе 14, стоит все же вернуться к данной теме.
onMouseOver
Событие onMouseOver используется объектами Link и
Document для определения момента установки указателя
мыши на элементе. Internet Explorer позволяет
захватывать эти события практически всем элементам на
странице, а не только объекты Links и Document. Пример
демонстрирует захват событий onMouseOver
дескриптором <а>:
<а href="http://www.mcp.com"
onmouseover="alert('You rolled over!')">
Here</a>
onMouseOut
Событие onMouseOut весьма напоминает onMouseOver
и точно так же может быть использовано объектами Link
и Document. Это событие определяет, когда указатель
мыши покинул конкретный элемент. Internet Explorer
I
позволяет захватывать это событие практически всем
элементам на странице, а не только объектам Link и
Document:
<а href ="http: //www.mcp.com"
onmouseout="alert ( ' You rolled of f • ' ) ">Here</a>
onMouseDown
Событие onMouseOut используется объектами Link и
Document с целью определения момента нажатия
кнопки мыши на определенном элементе. Для примера
рассмотрим захват событий onMouseDown в дескрипторе
<а>
<а href="http://www.mcp.com"
onmOusedown="alert('You pressed!')">Here</a>
onMouseUp
Событие onMouseUp используется объектами Link и
Document для определения момента отпускания
кнопки мыши, ранее нажатой на определенном элементе. В
примере показан захват таких событий в дескрипторе
<а>:
<а href="http : //www.mcp. com"
onmouseup="alert ( ' Youreleased! ' ) ">Here</a>
Виды динамических подмен
Каждому разработчику необходимо не только решать,
какой вид rollover-эффектов необходим на сайте, но и
как его реализовать. Многие rollover-эффекты могут
имитировать другие, поэтому все зависит только от
пользовательского браузера и от того, что именно
поддерживает этот браузер.
Динамическая подмена
Глава 20
Rollover-эффекты для изображений
Существует несколько методов реализации
rollover-эффектов для изображений (rollover-изображений), но
самый простой заключается в создании двух массивов,
содержащих используемые изображения и ссылки в
документе на индексные расположения в массиве
document.image. Необходимо сохранить все
изображения в массиве объектов Image. Расположим на
странице два объекта специально для примера,
представленного на рис. 20.1. Когда пользователь помещает курсор
поверх изображения, происходит замена изображения
на его rollover-версию. Массив изображений создается
с использованием следующего кода:
// Создание массивов для хранения изображений
var overling = new Array () ;
overling[0] = new Image (24 ,24) ;
overling [1] = new Image (24 ,24) ;
var defaultlmg = new Array () ;
defaultlmg[0] = new Image (24,24) ;
defaultlmg [1] = new Image(24,24) ;
// Предварительная загрузка изображений в
// массивы
overlmg[0] .src = "back-over.gif";
overling[1] .sic = "forward-over.gif";
defaultlmg[0].src
defaultlmg[1].src
"back. gif";
"forward.gif"
■" JavaScript Unleashed - Heticape L □ *
Fie ict:i(»*:jo ufrebft',.'$/£
} .$" Z&" А :л. <* л Щ 1 №
I... ^'gpbj^rKJ:yj^;I.o^ite№|t^:WtyTEMPy7b:i^U_LD1 hlrfj ^'=^"Wb*4Pet*Bdo
РИСУНОК 20.1. Страница с rollover-эффектами
Следующий необходимый элемент — это функция,
выполняющая собственную подмену изображений. Эта
функция принимает два аргумента: первый —
индексное расположение подменяемого изображения, а второй —
вид свопинга ("over" или "out"). Оператор switch
определяет, из какого массива берется заменяющее изобра-
жениг. После определения массива присваивание,
обеспечивающее замену изображения, реализуется через
свойство src объекта Image:
function rolllmage (img, type) {
switch (type) (
case "over" :
document.images[img].src
overling [img] .src;
break;
case "out":
document.images[img].src =
defaultlmg[img].src;
break,-
Последний шаг связан с захватом событий
onMouseover и onMouseOut. Как упоминалось ранее,
это достигается с использованием дескриптора <а>. В
листинге 20.1 показан полный исходный код для
захвата событий, а на рис. 20.2 — замененное изображение,
когда над ним находится указатель мыши.
Листинг 20.1. Полный исходный код для реализации
rollover-изображений
<' tml>
<head>
<title> JavaScript Unleashed</ title>
<script type=" text/javascript"
language="JavaScriptl.2">
<! —
// Создание массивов для хранения
// изображений
var overling = new Array () ;
overling[0] = new Image (24,24) ;
overling [1] = new Image (24 , 24) ,
var defaultlmg = new Array ();
defaultlmg[0] - new Image (24 ,24) ;
defaultlmg[l] == new Image (24,24) ;
// Предварительная загрузка изображений в
// массивы
overlmg[0].src = "back-over.gif";
overling[1] .src = "forward-over.gif";
defaultlmg[0].src =
defaultlmg[1].src =
"back.gif";
"forward.gif"
// Изменение состояния изображения
// зависимости от события
function rolllmage(img,type)[
switch (type) (
case "over":
document, images [img] .src =
over Img [img] .src;
break;
case "out" :
document. images [img] . src =
defaultlmg [img] .src;
break;
)
}
</script>
</head>
<body bgcolor="#ffffff">
<table border="l" cellpadding="5"
cellspacing="0" align="center"
■В! Технологии программирования на динамическом HTML
EXfil Часть IV
bgcolor="#cOcOcO">
<tr>
<td align="center">
<a href="javascript:void(0) "
onmouseout—"rolllmage(' 0■,'out')"
onmouseover="rolllmage('0 *,'over') ">
<img border="0" src="back.gif"
width="24" height="24" alt="Back">
</a>
</td>
<td align="center">
<a href=" javascript:void(0) "
onmouseout="rolllmage( • 1', 'out') "
onmouseover="rollImage( * 1", ' over') ">
<img border=" 0 "
src="forward.gif"width="24"
height="24"
alt="Forward"x/a>
</td>
</tr>
</table>
</body>
</html>
■Э Jw^Sciipt Unteaihed - Micioialt Ir^nel Е*р1вгвг
(Jljilb - jCJ С \TEHP\763OT_L01 Hr,l
lFww«d|
^|Arti«*wA)(D).: _
- ®
Ccw
л
РИСУНОК 20.2. Динамическая замена одного „3 изображений
ПРИМЕЧАНИЕ
В главе 24 приводится более конкретные примеры
rollover-изображений и подробно рассматривается их
использование.
Rollover-эффекты для слоев
Следующий рассматриваемый нами вопрос — это
реализация rollover-эффектов для слоев. Они
генерируются за счет сокрытия и отображения слоев внутри
документа. Эта тема также затрагивается и в главе 23. Сейчас
стоит кратко рассмотреть вопрос реализации доступа к
свойству visibility таблиц стилей (CSS) в JavaScript.
Первое, что потребуется сделать — создать HTML-
документ, который станет основой примера. Здесь
необходимо определить ссылку и изначально скрытый
слой. Результирующий документ предельно прост.
<div пате="1г-"ег1" id="layerl">
Hello World!
</div>
<a href="3avascript: void (0)"
onmouseout="changeState('layerl',■hidden■)"
onmouseover=,,changeState ( ■ layerl' , 'visible') ">
Rollover to show and hide the layer.
</a>
He беспокойтесь, что сейчас слоям уделяется мало
внимания, поскольку эта тема рассматривается позже,
в главе 23. В настоящий момент лучше сфокусировать
внимание на коде JavaScript.
Так же, как и в примере с rollover-изображениями,
для захвата событий onMouseOver и onMouseOut будет
использоваться дескриптор <а>. В дескрипторе <а>
можно заметить три фрагмента кода. Первый фрагмент
находится в атрибуте href. Этот вызов (javascript:)
сообщает браузеру о том, что при условии выполнения
щелчка кнопкой мыши на ссылке ничего больше не
произойдет (void(O)). Второй и третий фрагменты
называют функцию changeState() и передают ей две
переменные. Первая, name (для браузеров Navigator) и id (для
браузеров Internet Explorer) — это экземпляр слоя, а
вторая — индикатор, который скрывает или
отображает слой.
СОВЕТ
В атрибуте href допускается применение такого
синтаксиса, на который ссылаются как на "JavaScript
URL", для вызова функции либо для любого другого
кода на JavaScript.
Следующий шаг заключается в установке таблицы
стилей для слоя, которая обеспечит его сокрытие.
Несмотря на то что в CSS присутствует несколько свойств,
которые будут рассматриваться в главах 22 и 23, сейчас
примем во внимание только одно свойство visibility.
Несложно заметить, что ему присваивается значение
hidden.
<J—
#layerl{
background-color: red/
height: 100;
left: 1
imposition: absolute;
top: 50;
width: 100;
visibility: hidden;
I
-->
</style>
Следующая часть кода необходима лишь для того,
чтобы учесть отличия реализации слоев в браузерах
Navigator и Internet Explorer. Вначале потребуется оп-
ределить, какой из браузеров получает доступ к
странице, и установить переменные, которые позволят
использовать одну функцию для обработки rollover-эффектов.
Детали реализации обсуждаются в главе 23. Сейчас
рассмотрим только код:
// Создание глобальных переменных для хранения
// типа браузера.
var is IE = new Boolean (false) ;
var isNav = new Boolean (false) ;
var layer = new String () ;
var style = new String () ;
// Определение, является ли браузер Internet
// Explorer, Navigator и др. Кроме того,
// установка переменной слоя в зависимости от
// необходимого способа доступа.
function checkBrowser О (
if (navigator.userAgent. indexOf ("MSIE") != -1) {
is IE = true ;
layer = ".all";
style = " . style";
}else if (navigator.userAgent.indexOf ("Nav") ! =
-1) '
isNav = true;
layer = ".layers";
Style = " " ;
)
}
Последняя функция в данном примере отображает
и скрывает слой. Также, как и в HTML-документе, она
принимает два параметра: имя слоя и состояние, на
которое требуется переключить слой. Благодаря
проделанной ранее работе, функция содержит только одну
строку кода:
function changeState(layerRef, state)(
eval( "document" + layer + "[■» + layerRef +
"■J" + style + ".visibility = '" + state +
) ;
В функции используется верхнеуровневый метод
eval(), который принимает объект String и выполняет
его как код JavaScript. В нашем примере строка
"document" + layer + " ['" + layerRef + "' ]" +
style + ".visibility = '" + state + "'");
^олучает значение
document.layers['layerl'].visibility = "hidden";
для случая браузера Navigator и
docuirent. all [ ' layerl • ] . style .visibility =
"bidden";
для случая Internet Explorer. Сейчас несложно заметить
различия между видами доступа к слоям в этих двух
браузерах.
Теперь, когда создание кода завершено, можно
оценить результаты его работы. В листинге 20.2
предоставлен полный исходный код, а на рис. 20.3 — страница в
Динамическая подмена
Глава 20
браузере. Рисунок 20.4 демонстрирует rollover-эффекты
для слоя.
Листинг 20.2. Пример реализации
rollover-эффектов для слоев
<html>
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
#layerl(
background-color: red;
height: 100;
left: 10;
position: absolute;
top: 50;
width: 100;
visibility: hidden;
)
</style >
<script type="text/javascript"
languages"JavaScriptl.2">
<i —
// Создание глобальных переменных для
// определения типа браузера.
var isIE = new Boolean (false) ;
var isNav = new Boolean(false);
var unsupported = new Boolean (false) ;
var layer = new String () ;
var style = new String () ;
// Определение, является ли ?—аузс—
// Internet Explorer, Navigator или
// каким-либо другим. Установка значения
// переменной слоя в зависимости от вида
// доступа.
function checkBrowser() {
if (navigator. userAgent. indexOf ("MSIE") ! =
-1) [
isIE = true ;
layer = ".all";
Style = ".style";
) else if (navigator. userAgent. indexOf ("Nav")
'= -D(
isNav = true ;
layer = ".layers";
Style = "",-
)else(
unsupported = true;
)
it.
// Take the state passed in, and change
function changeState (layerRef, state) (
eval( "document" + layer + »[■» +
layerRef + " ' ]" + style +■
".visibility = '" + state + );
>
II—>
</script>
</head>
<body onload="checkBrowser () ">
<div iame="layerl" id="layerl">
Hello World I
Технологии программирования на динамическом HTML
' 4acTb~IV
</div>
<а href="javascript : void (О) "
onmouseout="changestate (' layerl ' , 'hidden') "
onmouseover="changeState (' layerl' , 'visible') ">
Rollovei to show and hide the iayer.
</a>
</body>
</html>
3iJnv#Scr&l Uflhwtod - Miaotolt Intan»! E Ыи«'
■ ■ °a? ■■-..■
ВдДоусг to show and hjdr tfa layer
J=Jc5T
РИСУНОК 20.3. Ссылка без воздействия rollover-эффекта
ПРИМЕЧАНИЕ
И в Internet Explorer, и в Navigator предусмотрены
собственные реализации CSS, поэтому не удивляйтесь,
если результаты запуска некоторых сценариев будут
отличаться. Например, при загрузке кода из листинга
20.2 Navigator 4 окрашивает только фон текста, а не
весь слой.
I £1 J*v«ScHpt Utdwvhod • Hie «dl In emet Eitpbrer
*- id* V«v Fovs^c Luats Hi
■ »• " » .в -
JsjC\IEMP\763X20 UCH*J
is
Kolfovcrtft afaqw and hide the
тику, .
■J-J L-irm
РИСУНОК 20.4. Rollover эффект в действии
Резюме
Несмотря на небольшой объем главы, были описаны
важные характеристики приложений JavaScript.
Реализация rollover-эффектов на собственном сайте — одно
из простейших и безопасных задач в JavaScript Но не
стоит ограничиваться только информацией, полученной
из книги. Rollover-эффекты могут лежать в основе
многих задач, решаемых с использованием JavaScript. Они
позволяют глубже понять события и доступ к
элементам страницы, а также знакомят с дизайном
интерфейсов.
Остальная часть книги посвящена вопросам
создания визуальных эффектов, CSS и слоев. Будут
рассматриваться особенности создания на DHTML
инструментальных панелей и меню. Также будут исследоваться
способы взаимодействия компонентов на странице с
использованием JavaScript.
Визуальные эффекты
В ЭТОЙ ГЛАВЕ
■ Бегущие строки
■ Баннеры
■ Постепенное изменение цветов
■ Анимированные командные кнопки
На сегодняшний день такие технологии, как JavaScript
и Java, широко применяются в сфере разработки Web-
приложений. Они популярны также благодаря
изящным операциям, которые можно проделывать с их
помощью на Web-сайте. Вспомните, сколько бесполезных
Java-аплетов блуждали по Web во времена, когда
возросла популярность Java. Однако с появлением JavaScript
горизонты применения различных операций
существенно расширились.
Бегущие строки
Эффект бегущей строки относится к числу наиболее
распространенных в среде разработчиков Web-сайтов.
Цель данного эффекта — передать посетителям сайта
последние новости или пикантные сообщения. Бегущая
строка впервые получила популярность после
применения в Java-аплетах.
Создание бегущей строки в JavaScript тоже
предусматривается, хотя при этом внешний вид ее будет не
столь эффективным, как в Java-аплете. Все это
объясняется использованием объекта Text в роли
контейнера для прокручиваемого текста, а ни один из объектов
HTML-формы не сможет поразить пользователя своим
великолепием. У разработчиков не будет проблем с
созданием бегущих строк JavaScript, поскольку они не
нуждаются в отдельном аплете. Необходимость в таких
строках возникает очень часто.
Для создания бегущей строки в JavaScript необходимо:
Создать HTML-форму с внедренным объектом Text.
Записать функцию, прокручивающую текст внутри
объекта Text.
Ассоциировать функцию с обработчиком событий
окна on Load для запуска процесса.
Для начала создайте объект Form и внутри него
объект Text. При этом рекомендуется
соответствующим образом назвать эти объекты, поскольку они
создаются исключительно для реализации бегущей
строки и ни для чег более. Например, форму стоит назвать
"marqueeForm" а объект Text — "marqueeText" или как-
то по-другому, однако максимально близко по смыслу.
После этого необходимо ввести сообщение как атрибут
value дескриптора <input>. Ниже приводится код
<form>:
<CENTER>
<form name="marqueeForm">
<input name="mar<-ueeText" size="50"
vaXue="THIS JUST IN...JavaScript
is selected as official scripting
language of the 2000 Summer 01ymp±cs">
</form>
</center>
После определения контейнера для бегущей строки
можно приступить к основной части. Для начала
определяются две глобальные константы, используемые в
бегущей строке: скорость прокручивания (в
миллисекундах) и количество знаков, прокручиваемых за
определенный временной промежуток. Затем потребуется
создать объект String с именем marqueeMessage:
var SCROLL_RATE = 100;
var SCROLL '"HARS = 1 ;
var marqueeMessage = new String () ;
Следующий шаг — создание функции JSMarquee(),
придающей обыкновенному объекту Text вид бегущей
строки. Поскольку бегущая строка должна
постоянно обновляться, не удастся обойтись без рекурсии
JSMarquee() за счет вызова setTimeout() в начале
функции. Метод setTimeout() подробно описывается в
главе 14. Глобальная переменная SCROLL_RATF исполь-
Технологии программирована tua динамическом HTML
Часть IV
зуется как параметр метода, определяющий частоту
вызова функции.
Основная задача функции JSMarquee()
заключается в получении значения объекта Text и присвоению его
строке marqueeMessage. Затем можно смоделировать
перенос слов, отделяя порцию данных сообщения
спереди и переписывая эту порцию в конец строки. Для
этого используется метод substring() объекта String:
function JSMarquee () {
setTimeout ( JSMarquee [) ' , SCROLL_RATE);
marqueeMessage =
document .marqueeForm.marqueeText .value ;
document:. marqueeForm. marqueeText. value =
marqueeMessage. substring ( SCROLL_CHARS ) +
marqueeMessage. substring ( 0, SCROLL_CHARS )
t
На рис. 21.1 показан эффект бегущей строки в
момент, когда пользователь находится на странице.
Полный исходный код для этого примера
приводится в листинге 21.1.
ПРИМЕЧАНИЕ
Помимо исходного кода, в листинге 21.1 имеется
также и дополнительный код JavaScript, поэтому текст
сообщения можно определить как глобальную
переменную. Так его проще поддерживать при условии
частого изменения текста объявления.
Баннеры
Баннеры — еще один компонент, который часто
присутствует на Web-страницах. Они привлекают к себе
внимание и применяются, в основном, для рекламных
целей. Обычно их миссия состоит в том, чтобы
заинтриговать пользователя и заставить его щелкнуть мышью
именно в этом месте. Используя объекты Image,
можно создавать профессиональные баннеры, обходясь без
анимированных GIF-изображений или Java-ai летов.
ПРИМЕЧАНИЕ
Перед созданием самого сценария потребую ся два
набора GIF-файлов одинаковых размеров. Необходимы
два или три изображения, которые после будут
служить как главные изображения баннера. Для
достижения эффекта перехода потребуется серия петехо-чых
изображений. Изображения, в случае их
последовательной отрисовки, будут выглядеть подобно анимации.
Для создания удобоваримого эффекта достаточно
будет и пяти-шести переходных изображений.
Следите за общим размером GIF-файлов. Некоторые
пользователи, загружая страницу с 15 GIF-изое'раже-
ниями на скорости соединения 28,8 Кбайт/с могут и
не оценить ее.
Как только GIF-файлы готовы, можно приступить
к созданию баннера в JavaScript:
Листинг 21.1. Реализация бегущей строки с использованием JavaScript
<html>
<head>
<title> JavaScript Unleashed</title>
<script type="text/javascript">
<! -
// объявление переменных
var SCROLL_RATE = 100;
var scroll chars = 1;
var MESSAGE = "THIS JUST in. JavaScript is selected as » +
"officia scripting language of the 2000 Summer Olympics..."
var marqueeMessage = new String () ;
function JSMarquee () (
setTimeout ( ' JSMarquee ()', SCROLL_RATE )
marqueeMessage = document.marqueeForm.mar ueeText.value;
document .marqueeForm.marqueeText. value = [ marqueeMessage. substring ( SCROLL_CHARS ) +
marqueeMessage. substring( 0, SCROLL_CHARS );
1
//-- >
</script>
</head>
<body onload=" JSMarquee () ">
<center>
<form name= "marqueeForm" >
<input name="marqueeTextu size="50">
<script type="text/javascript">
<' —
document. marqueeForm. marqueeText. value *= MESSAGE;
//—>
</script>
</"or i>
</center>
</body>
</html>
Визуальные эффекты
1. Создайте заглушку для изображения на
Web-странице.
2. Определите массив для хранения исходных
изображений и для хранения переходных изображений.
3. Создайте программу для управления презентацией
изображений.
4. Определите эту функцию в качестве обработчика
событий onLoad.
'•H v v ■ - l у Ml' г»- N )v*v
t'ЯЯ.1 -Jjjl
M*Bflffieialaci4jiCingl*ngiieqebttbeiC)00 Sumnei
Rwl-
РИСУНОК 21.1. Пример бегущей строки
Для начала создайте на Web-странице объект Image,
который послужит заглушкой для всех действий.
Поскольку баннер переносит куда-то в другое место, как
только на нем совершается щелчок, очевидно,
дескриптор <img> потребуется поместить внутрь ссылки:
<а hre f = " http: / /www. mcp. com"
onmouseover="window. status=< http: //
lm* www .mcp . com' ; return true ; "
onmouseout="window.status = ' ' ; return true;">
<img name="billboard" height="49" width="333"
src=" . /visjs . gif">
</a>
ПРИМЕЧАНИЕ
Обратите внимание на обработчики событий onMouseOver
и onMouseOut, определенные в объекте Link. Без них
можно обойтись, если URL закодирован жестко. Эти
обработчики необходимы в случае, если с каждым
исходным изображением в баннере связаны различные
адреса URL. В таком случае потребуется
предусмотреть массив URi и текст mouseOver, зависящий от
активного изображения.
Внутри раздела <head> поместите дескриптор <script>
и определите набор переменных и объектов. Две
глобальных константы хранят время (в миллисекундах) для
Глава 21
отображения основного и переходного изображений.
Две дополнительные переменные определяются позже:
// Глобальные константы
var DISPLAY_TIME = 3500;
var TRANSITIONJTIME = 50;
// Глобальные переменные
var primaryldx = О
var transldx = 0
Потребуется определить два массива для хранения
информации о наборах начальных и переходных
изображений. Для каждого элемента массива объявляется
свойство изображения scr.
// Первый массив содержит начальные изображения
JSBillboardArray = new Array ( 3 ) ■
JSBillboardArray[0] = new Image ( 49, 333 );
JSBillboardArray[0] . src = " ./vis js .gif'
JSBillboardArray[l] = new Image ( 49, 333 ) ;
JSBillboardArray[1).src = "./url.gif';
JSBillboardArray [2] = new Image ( 49, 333 ) ,
JSBillboardArray[2].src = "./bltwith.gif";
// Второй массив содержит переходные
// изображения
transArray = new Array ( 6 ) ;
transArray [и] = гъэх7 Tjrag-э ( 49, 333 1
transArray[0].src = "./bw7.gif";
transArray [1] = new Image ( 49, 33 1 );
transArray[1].src = "./bw6.gif";
transArray [2] = new Image ( 49, 333 );
transArray[2].src = "./bw5.gif"
transArray [3] = new Image ( 49, 333 );
transArray[3] .src = "./bw4.gif;
transArray [4] = new Image ( 49, 333 ) ;
transArray[4] .src - "./bw3.gif"
transArray[5] = new Image ( 49, 333 );
transArray[5] src
./bw2.gif";
Главной функцией, которая используется для
запуска баннера, является runJSBiIlboard(). Сначала она
определяет интенсивность изменения каждого цикла
отображения баннера. Затем это значение применяется для
вызова рекурсивного метода setTimeout(). В конечном
итоге функция runJSBillboard() вызывает вторую
функцию repaint():
function runJSBillboardf) {
changeRate = DISPLAY "ЧМЕ +
( transArray. length * TRANSITIONJTIME ) •
setTimeout( "runJSBillboard()" , changeRate ) ;
repain {)
Функция repaint() является основой баннера в
JavaScript. Она определяет изображение, выводимое на
экран в данном цикле. Первые на очереди —
переходные изображения. Далее на арену выходит функция
repaint(), которая проверяет их состояния и
определяет, должен ли завершиться цикл. Если это действительно
так, активизируется раздел кода if, выводящий на экран
Технологии рограммироваш на динамическом HTML
Часть IV
текущее начальное изображение. В противном случае в
действие вступает раздел кода else'.
function repaint () (
if ( transldx > transArray. length
pr imaryldx++ ;
transldx = 0;
1 )
1 )
if ( primaryldx > JSBillboardArray. length
primary Idx = 0 ;
document.billboard.src =
JSBillboardArray[primaryldx].src;
return;
)else{
document.billboard.src =
transArray[transldx].src;
setTimeout( "repaint()", TRANSITIONJTTME )
}
transldx++;
}
Фушшия repaintO заслуживает чуть большего
внимания. Раздел if предназначен для вывода на экран
начального изображения, в особенности того, что является
текущим в JSBillboardArray. Если это условие
выполняется, переменная transldx получает значение О. В
следующий раз переходный цикл начинается с repaint().
Необходимо проверить, возвратилась ли в исходное со
стояние primaryldx и вернуть управление вызывающей
функции runJSBiIlboard().
Благодаря рекурсивному характеру runJSBillboard,
функция repaintO сразу же выполняется заново. В
последний раз обрабатывался раздел if, теперь можно и не
сомневаться, что в этом цикле выполнится раздел else.
Этот раздел кода выводит на экран текущее переходное
изображение из массива transArray. else запускается при
каждом переходном цикле, пока не будет выводится
последнее переходное изображение. В следующий раз
вызывается repaintO. if возвращает в начальное
состояние все, что уже выполнялось.
ПРИМЕЧАНИЕ
Рекурсия относится к достаточно сложным принципам
программирования. Тем не менее, как видно из
последнего примера, она отличается существенной
мощью и изяществом.
На рис. 21.2 и 21.3 показаны экраны во время
циклического процесса вывода баннера.
В листинге 21.2 предоставлен полный исходный код
реализации вывода баннера.
Листинг 21.2. Создание доски объявлений с
использованием JavaScript
<html>
<head>
<title>JavaScript Unleashed</title>
<script type="text/javascript"
language^"JavaScriptl-1">
// Глобальные константы
var BB_URL = 'http://www.mcp.com',
var DISPLAYJTIME = 3500;
var TRANSITION_TIME = ^0;
// Глобальные переменные
var primaryldx = 0;
var transldx = 0;
// Первый массив содержит основные
// изображения
JSBillboardArray = new Arre ( 3 )
JSBillboardArray [0] = new Image ( 49, 333 )
JSBillboardArray[0].src = "./visjs.gif",
JSBillboardArray [1] = new Image ( 49, 333 )
JSBillboardArray[1].src = "./url.gif '
JSBillboardArray [2] = new Image ( 49, 333 ),
JSBillboardArray[2].src = "./bltwith.gif';
содержит переходные
// Второй массив
// изображения
transArray = пет 7 Array ( ) ;
transArray [ 0 ] new Image ( 43 r ;)33
transArray [0].src == " . /kw7.gif";
transArray [ 1 ] = new Image ( 4?„ 33?
transArray [1] .src = ". /bw6.gif".;
transArray [2] = пей Image ( 49, 333
transArray [2].src = ". /rw5 . gif";
transArray [ 3 ] = new Image ( ."1ч, 333
transArray [3] .src ~ "./bw4.gif ";
transArray [ 4 ] = new Image ( ""', 333
transArray [4] .src = ". /bw3.gif";
transArray [5] = new Image ( 49, 333
transArray [5] .
. /b72.gif";
function runJSBillboard () {
changeRate = DISPLAY_TIME +
(transArray.length * TRANSITION_TIME);
setTimeout ("runJSBillboard () " , changeRate) ,
repaint() ;
"i
function repaintO {
if (transldx > transArra". length - 1) [
primaryIdx++; // Увеличить индекс
// первичного изображения
transldx =0; // Сбросить индекс
// переходного изображения
if (primaryldx >
JSBillboardArray.length - 1){
primaryldx = 0; // Сбросить
// индекс первичного изображения
I
document. bi 1 lboard .src =
JSBillboardArray [primaryldx] .src;
return; // Возврат в run JSBill board ()
>else(
// Отобразить переходное изображение
document. billboard. src =
transArray[transldx].src;
// Рекурсивный вызов repaintO в
// цикле
setTimeout ( "repaintO",
TRANSITION TIME ) •
transldx++; // Увеличить индекс
// переходного изображения
Визуальные эффекты
</soript>
</head>
<body onload="runJSBillboard() ">
<center>
<a href ="http: //www.mcp.com"
onmouseover="window.status=BB_URL;
return true;" onmouseout="window. status
return true;">
<img name="billboard" height="49"
width="333" src=" . /visjs .gif">
</a>
</center>
</body>
</html>
HE
7SZTT.
fcwr jjtn> ijt „ >«ДДИ #S»t <у.йГ ri&;, .WinM?:-^-*M4-"
-VT fcJV'aSt ? >
!У*^!g^V^jt^■LtfJU]^gг^■^:!g^ i g^aMafi^j.^jiftPbo^T^i
i t* «Li |^*Л
9(ЗШ Si**-
РИСУНОК 21.Z Начальное основное изображение
E^f-fc» V«0 St3 tnmrt** №D
i* '*■ .3. at. .«J .'-J- ., . .,'3
Iff
РИСУНОК 21.3. CWwr из пяти переходных изображений
Постепенное изменение цветов
В данной главе рассматривались вопросы создания бан-
неров и прокручиваемых объявлений наподобие, Java-
аплетов. Не обращайте внимание на "очковтиратель-
Глава 21
ство" которое встречается в прессе: мол, Java может не
все. Дело здесь связано с одним лишь моментом —
постепенным изменением пвета на HTML-странице.
JavaScript может управлять HTML-документом, чего не
делает Java. Именно поэтому JavaScript работает с
подобного рода методами гораздо лучше.
Ш -ЯГД.У
a- i
■3
■ww tliafTSs'6ni
•^ly-^J^ Г> /frffc <^f _ )fc»»JHVW gifjgffw ■ ■ tyUjSMbrtfrf:.
H"»
РИСУНОК 21.4. Второе основное изображение
Постепенное изменение цвета выполняется при
постепенном изменении значения свойства bgColor объекта
Document. Данное свойство является либо
шестнадцатиричным RGB-триплетом, либо строковым литералом,
представляющим RGB-триплет, например, "aqua" или
"red". Несмотря на простоту работы со строковыми
литералами, при условии установки свойства bgColor на
единовременной основе, потребуется использовать
шестнадцатиричные значения RGB-триплетов в формате
rrggbb.
В JavaScript можно создать функцию JSFade(),
которая будет выполнять смену цвета, а затем обратиться
к этой функции во время загрузки документа. Функция
JSFade() получает несколько параметров.
Начальные значения RGB для красной, зеленой и
синей составляющих цвета.
Конечные значения RGB для красной, зеленой и
синей составляющих цвета.
Количество миллисекунд, необходимых для
выполнения процесса смены цвета.
Цикл for используется для пошагового выполнения
процесса. Именно с помощью параметра задержки
можно определить, сколько раз сработает цикл for.
Определяются две переменные: finisliPercent — указывает на
процентную часть оставшегося процесса, startPercent —
указывает на процентную часть выполненного
процесса. Основой выполнения смены цвета является приве-
Технологии программирования на динамическом HTML
Часть IV
денный ниже оператор, который присваивает значение
свойству document.bgColor. Значение базируется на
сумме произведений начального значения красного на
переменную startPercent и конечного значения красного
на переменную finish Percent. Эта же операция
повторяется также для зеленого и красного цветов.
function JSFade(startRed, startGreen, startBlue,
finishRed, finishGreen, finishBlue, delay)(
fo (var i = 1; i <= delay - 1; i++) {
var finishPercent = i/delay;
var startPercent = 1 - finishPercent;
document.bgColor = Math, floor (startRed *
startPercent + finishRed * finishPercent) *
256 * 256 + Mat! ."loor(startGi en *
startPercent + finishGreen * finishPercent)
* 256 + Math, floor startBlue * startPercent +
finishBlue * finishPercent ) ;
}
}
Затем эту функцию можно вызвать в собственном
сценарии. Например, для реализации смены от цвета
белой ночи к бирюзовому, потребуется выполнить
такой вызов:
JSFade (255,255,2400,128,128,170)
Переход нвета от синего к красному:
JSFade (0.0.198. 196,2,40,170)
От черного к белому:
JSFade (0,0,0,255,255.255,170)
В листинге 21.3 представлен исходный код для
примера смены цветов.
Анимированные командные кнопки
За последние три года восприятие Web существенно
изменилось. Изначально задуманная кактекстово-ори-
ентированная среда передачи информации, Web
сегодня работает с графикой, мультимедиа-информацией и
сложными страницами. Однако, единственным
аспектом устаревшего нелицеприятного вида остались
объекты форм, например, текстовые поля ввода и командные
кнопки. Для этих управляющих элементов управления,
невозможно даже выбрать шрифт.
Неудивительно, что в настоящий момент многие
разработчики обращаются к JavaScript с целью
обеспечения альтернативы одному из общих элементов
управления пользовательского интерфейса — кнопкам. Хотя
объекты графических кнопок пока еще не доступны, с
помощью объекта Image в JavaScript можно
сымитировать их поведение.
ПРИМЕЧАНИЕ
Так же, как и в примере с баннерами, необходимо
сначала подготовить подходящие GIF-файлы для
использования на Web-странице.
Сейчас будет показано, как применить Ja /aScript
для эмуляции вида и формы кнопок в Windows 98/2000,
что впервые появилось в Microsoft Internet Explorer 3.
Кнопка имеет плоский вид, пока пользователь не
наведет на ее указатель мыши, после чего она приобретает
трехмерный вид. Давайте добавим на страницу кнопки
Previous и Next, эмулирующие кнопки Prev и Next
браузера.
Листинг
21.3.
Использован ие
JavaScript
для
смены
цвета
фона
документа _
<html>
<head>
<title>javaScrip Unleashed</title>
<script type="text/javascript">
function JSFade (startRed, startGreen, startBlue, finishRed, finishGreen, finishBlue, delay) (
for (var i = 1; i <= delay - 1; i++) {
var finishPercent = i/delay;
var startPercent = 1 - finishPercent;
document.bgColor = Math, floor (startRed * startPercent + finishRed * finishPercent) * 256
* 256 + Math, floor (startGreen * startPercent +finishGreen * finishPercent) * 256 +
Math, floor (startBlue *startpercent +■ finishBlue * finishPercent ) ; I
>
//—>
</script>
</head>
<body>
<script type=" text/ javascript">
JSFade( 255,255,240,0,128,128,170 ) :
II—>
</script>
</body>
</html>
Визуальные эффекты
Глава 21
Для создания анимированных кнопок потребуется
проделать следующее:
Создать заглушки для изображений на
Web-странице под каждую кнопку.
Определить объекты Image и поставить им в
соответствие GIF- и JPG-файлы.
Создать программу для вывода изображений на
экран по запросу.
Добавить код обработчика событий click для
объекта Link.
Для использования объектов Image в качестве
заменителей кнопок потребуется определить дескрипторы
<img>. Однако, поскольку объекты Image не способны
реагировать на события, каждое изображение следует
поместить в объекте Link:
<а href="">
<img src=" . /prey_off.gif"
width="52" height="42"
</a
<a href="">
<img src=" . /next_off.gif"
width="52" height="42"
</a>
border="0"
name="prev">
border="0"
name=" nex t" >
Внутри дескриптора <script> раздела <head>
HTML-документа необходимо определить объекты
Image для каждого из четырех используемых
изображений: два, представляющих плоский вид кнопки, и два,
представляющих трехмерный вид кнопки. Также
объекты Image потребуется связать со внешними файлами:
var prevBtnOf f = new Image ( 42, 52 ) ;
prevBtnOff.src = "./prev_off.gif";
var prevBtnOn —
prevBtnOn.src =
var nextBtnOf f =
nextBtnOff.src
var nextBtnOn =
nextBtnOn.src =
new Image ( 42 , 52 )
''. /prev_on. gif" ;
пет -j Image ( 42, 52 ) ,
"./next off.gif";
net 7 rmacre ( 42,
"./next_on.gif";
52 )
Итак, заглушки в виде дескрипторов <img> для
кнопок Previous и Next определены, а экземпляры
объектов Image для состояний "off и "on" созданы. Следующий
шаг заключается в добавлении функции highlightButton(),
которая изменяет состояние изображения, выводимого
на экран по запросу.
Функция highlightButton принимает два параметра:
первой — это имя шаблона изображения <img>, а вто-
Листинг21.4. Анимированные кнопки в JavaScript.
рой — это имя объекта Image, выводимого на экран. Для
ссылки на заглушки изображений <img> можно
воспользоваться встроенным массивом document.images.
function highlightButton(placeholder,
imageObject){
document . images [placeholder] . src =
eval (imageObject + ".src")
1
Сейчас необходимо вернуться к определениям
дескриптора <img> и добавить в них код
соответствующего обработчика событий. Планируется, что при
наведении указателя мыши на две анимированные кнопки, они
приобретут трехмерный вид. имея до этого плоский вид.
Для этого потребуется добавить обработчики событий
onMouseOver или onMouseOut. При поступлении
события onMouseOver вызывается функция highlightButton()
для данной кнопки. Затем, когда генерируется событие
onMouseOut, вновь вызывается функция highlightButton (),
которая обеспечит отображение выключенного
состояния кнопки:
<ahref=" j avascript :history, back ( ) "
onmouseover="highlightButton ( ' Prev', ' prevBtnOn' 'i;
window- status= ' Previous ' ; return true; "
onmouseout="highlightButton( 'Prev1, 'prevBtnOff' ) ;
window . status= ' ' ; return true; ">
<img src="./prev_off.gif" border="0"
width="52" heights"42" name="Prev">
</a>
<a href=" javascript: history . forward() "
onmouseover="highlightButton ( 'Next', 'nextBtnOn');
window. status= ' Next ' ; return true; "
onmouseout="highlightButton( ' Next' , ■ nextBtnOff ' )
window.status^' ' ;return true;">
<img src="./next_off.gif" border="0"
width="52" height="42" name="Next">
</a>
Последний шаг связан с добавлением кода, который
реагирует на нажатие анимированной кнопки.
Поскольку объект Image не отвечает на событие click, следует
использовать протокол javascript: в свойстве href
объекта Link. Как показано в предыдущем коде, требуемую
функциональность обеспечивают методы back() и
forward () объекта History.
Наконец, потребуется добавить код в обработчики
событий onMouseOver и onMouseOut, который
обеспечит вывод соответствующего сообщения в строке
состояния браузера.
На рис. 21.5 и 21.6 показан код в действии.
В листинге 21.4 приводится полный исходный код.
<html>
<head>
<title>JavaScript Unleashed</title>
<script type="text/ javascript" language=" JavaScriptl.l''>
<!--
// Определение объектов изображении
Технологии програлшировання на диналшческом HTML
Часть IV
var prevBtnOf f =
prevBtnOff.src =
var prevBtnOn —
prevBtnOn.src =
var nextBtnOff =
nextBtnOff.src =
var nextBtnOn =
nextBtnOn. src =
new Image (42, 52) ,
" . /prev__of f.gif";
new Image (42, 52):
"./prev on.gif";
new Image (42, 52);
" . /next_of f. gi f" ;
new Image (42, 52) ;
"./next_on.gif";
// Изменение изображения, выведенного на экран
function highlightButton (placeholder, imageObject) {
document.images[placeholder].src = eval(imageObject
]
.src")
. /aiback.gif ">
II—>
</script>
< /head>
<body background-
<center>
<a href=" javascript: history .back() "
onmouseover="highlightButton( ' Prev1, 'prevBtnOn')
onmouseout="highlightButton ( 'Prev', 'prevBtnOff )
<img src=" . /prev_off.gif" border="0" width="52"
</a>
<a href=" javascript:history. forward() "
onmouseover="highlightButton ( 'Next', 'nextBtnOn'}; window. status='Next' ; return true
onmouseout="highlightButton ( 'Next' , 'nextBtnOff'); window. status= ' ' /return true;">
<img src=" . /next_off.gif" border="0" width="52" height="42" name="Next">
</a>
</center>
</body>
</html>
window. status=' Previous ' ; return true;
window. status=' ' ;return true ; ">
height="42" name="Prev">
ft2C
I*;;Eti-! jw fr LvnAr-rw. f*
,Pri S4c^| Йн1
■: Ет*Ь Л$\
Ш .. .&£ }£$ »3CAW,;
РИСУНОК 21.5. Кнопка в стандартном Начальном состоянии.
Резюме
Давайте посмотрим правде в глаза: многие Web-сайты
скучны и совсем не привлекают внимания. Сам по себе
HTML не может сделать ничего более лучшего, нежели
просто поместить плоское изображение на страницу и
вывести его на экран. Для придания большей живости
HTML многие разработчики используют Java-аплеты.
*ewflMW5№urf-U5Atfr-■
4 *Я-£пМ...}Ъ . '
J; И*ЛМ fc4 efitit ' ip£ -
•%/■ *- VbfiZhy
3
РИСУНОК 21.6. Кнопка Previous приобретает трехмерный вид,
когда На нее Наводится указатель мыши.
По мере развития JavaScript, все больше и больше
программистов отдают предпочтение этому языку.
В JavaScript 1.1 и 1.2 появились новые возможности
совершенствования внешнего вида Web-сайта. В этой
главе рассматривались четыре наиболее популярных
способа создания спецэффектов с использованием
JavaScript: бегущие строки, баннеры, анимированные
кнопки и постепенное изменение цвета.
Каскадные таблицы стилей
В ЭТОЙ ГЛАВЕ
Основные концепции таблиц стилей
Использование стилей в документах
Объекты стилей в JavaScript
Появление каскадных таблиц стилей (CSS) в HTML
Дало разработчикам возможность акцентировать
внимание на стиле, совершенствовать внешний вид
документов и определять для них более совместимые стили.
Перед появлением CSS одним из главных недостатков
публикации информации в Web было отсутствие
возможности управления существующими в тот момент
настольными издательскими средствами. Необходимо
было придумывать различные обходные пути, чтобы все
элементы располагались в правильных местах, а
шрифты были необходимого размера и вида. Для
расположения элементов в нужном порядке разработчики
зачастую прибегали к HTML-таблицам, однако сбои в работе
браузеров сводили на нет все старания.
Весь этот кошмар закончился, когда CSS стали
рекомендацией на Консорциуме World Wide Web (W3C).
CSS помогли разработчикам точно устанавливать
шрифты, размеры текста и расположение элементов (CSS
positioning, CSS-P).
В главе рассматриваются CSS, а также массивы
Navigator, позволяющие работать со стилями. Это не
значит, что будут исследоваться буквально все аспекты
CSS. Дабы упростить чтение глав 23 и 24
(посвященных Динамическому HTML), приводятся только самые
главные характеристики.
ПРИМЕЧАНИЕ
В этой книге не предусмотрено подробное
рассмотрение CSS. Исчерпывающее описание CSS может быть
найдено на сайте: http://www.w3.org.
Основные концепции таблиц стилей
Таблица стилей состоит из одного и более параметров
(размер шрифта, стиль шрифта, выравнивание текста,
цвет шрифта и фона, границы, заполнение, высота строк
и т.д.) элементов HTML, которые могут быть связаны или
внедрены в HTML-документы. Данная функция
обеспечивает Для Web-Дизайнеров возможность четко
устанавливать стиль и расположение по всему Документу.
На протяжении следующих нескольких страниц
производится знакомство с этой технологией и
рассказывается, как применить ее в JavaScript. Кроме того
Детально описывается методика использования CSS,
поскольку они являются неотъемлемой частью данной
технологии.
Стандарты
Для широкомасштабного внедрения любого вида
технологии необходимо определиться со стандартами или
формализованными методами реализации. CSS вместе
со многими стандартами, используемыми на
сегодняшний День, поддерживается Консорциумом World Wide
Web (W3C). Рассмотрим коротко рекомендацию CSS.
CSS Level 1 (Уровень 1 CSS)
В Декабре 1996 г. первая версия CSS приобрела
официальный характер в W3C. Это была первая попытка
создания стандартного метода применения стилей в Web-
документах. Такой прогрессивный шаг открыл для
разработчиков новые возможности по
усовершенствованию Документов.
Однако, Даже последние обновления рекомендации
в январе 1999 г. не содержали Достаточных вещей,
необходимых разработчику (таких как способность
располагать элементы на странице). Кроме того, в ней не
учитывались портативные и беспроводные устройства.
Технологии программирования на динамическом HTML
CSS-P
В августе 1997 г. W3C выдал рекомендации по
позиционированию при помощи каскадированых таблиц
стилей (CSS-P). Рекомендация содержала набор свойств,
позволяющих разработчикам открыто определять
расположение элементов на странице. В комбинации с CSS
все это существенно усилило управление над
минимальными частицами изображения, обеспечив возможность
создания стильных страниц. Комбинации CSS1 и CSS-
Р были впервые внедрены в браузеры Navigator 4. Internet
Explorer 4 и Opera 3.5.
Level 2 Enhancements (Усовершенствования
уровня 2)
Вторая версия рекомендации CSS, CSS Level 2 или, для
краткости, CSS2 может выполнять дополнительные
операции. Во-первых, рекомендации CSS1 и CSS-P
были объединены в отдельную рекомендацию. Была
реализована концепция медиа-типов, что больше
соответствовало требованиям стилизации печатного материала.
Добавилось понятие данных, необходимых устройствам
доступа к Internet. Плюс ко всему, в CSS2 была введена
спецификация вида курсора или указателя для
указательных устройств.
Предложения по поводу Level 3
Группа CSS консорциума W3C на данный момент
работают над уровнем 3 — CSS Level 3 (CSS3). Эта
последняя разработка пока еще не готова. В ней
предусматривается не только поддержка масштабируемой векторной
графики и интернационализации, но также и ряд усо-
вершенствованийпользовательского интерфейса.
Именно данная версия должна больше всего приблизить CSS
к глобально поддерживаемой рекомендации. Подобное
влияние HTML 4 оказал на HTML.
Наследование
При определении стилей необходимо помнить о
концепции наследования. Термин наследование (inheritance)
используется для обозначения процесса передачи
свойств от родительского элемента к дочернему.
Понятия родительский (parent) и дочерний (child) элементов
относятся к HTML-элементам. Они группируются
внутри других элементов. Таблицы стилей позволяют
устанавливать глобальный стиль для документов, а также
обеспечивают возможность передачи стилей другим
элементам внутри элементов, таким образом сокращая
время на определение стиля для каждого из элементов.
Например, внутри элемента <body> могут находиться
дочерние элементы, включая <Ы> и <р>, внутри
которых содержится еще некоторое число дочерних
элементов (например, <ет>). Стиль родительского
элемента наследуется дочерними элементами, если у
последних присутствуют какие-то свойства. Несложно
убедиться, что <р> внутри <body> получит размер
шрифта <hody>, если только в <р> он не будет
заменен. Стили наследуются внутри контейнеров, для
которых они определяются. Эта способность
обеспечивает необходимый вид и форму документа.
Размеры шрифта, размещение текста, границы -
наглядные примеры того, как таблицы стилей придают
Web-сайту большую логичность и последовательность.
За счет определения стилей глобально внутри
родительских элементов происходит их наследование
дочерними элементами документа. Все документы могут иметь
одинаковый вид, пока у разработчика есть возможность
управления стилями и их замены во время рабгчего
сеанса.
ПРИМЕЧАНИЕ
Очень часто встречаются не унаследованные стили.
Если свойства порожденного объекта отличаются от
свойств исходного объекта, стиль наследоваться не
должен.
Границы и заполнение текста пробелами
С помощью CSS можно определить границы,
обрамление и заполнение текста пробелами для элементов
блочного уровня. Элементы блочного уровня — это такие
элементы, как <hl>, <p>, которые всегда начинаются
с новой строки. Эти свойства позволяют задавать
различные элементы, начиная с границ и завершая
обрамлением.
Комментарии
Далеко не каждый код может обойтись без
комментариев. Написание комментариев в CSS напоминает
определение комментариев в других языках
программирования, за исключением тех, что поддерживают
общеизвестные многострочные комментарии.
Например,
/* комментарий типа 1*/
вполне приемлемый формат комментария в CSS.
Использование стилей в документах
Существует множество различных методов
использования стилей в документах. Их можно встраивать,
используя атрибут style внутри секции <style>, или
присоединять, используя дескриптор <Iink>. Кроме методов
определения стилей в чокументе, существуют и
способы их применения. Стили можно применять
глобально, присваивая класс с атрибутом class или на
индивидуальной основе при помощи атрибута id.
Определение стилей
Как упоминалось ранее, стили можно определять одним
из трех способов. Под словосочетанием "определение
стилей" подразумевается три расположения стилей. Эти
методы определения стилей применяются при создании
документа, использующего таблицы стилей.
Определенного способа выполнения данной операции не
существует. Постарайтесь решить эту задачу как можно
более практично.
<style>
Первое размещение определяемого стиля — внутри
дескриптора <style>. Этот дескриптор принимает
единственный атрибут (type), сообщающий браузеру о виде
определяемого стиля. Значением данного атрибута для
CSS является text/ess. Между открывающим и
закрывающим дескрипторами находится определение стиля.
В примере показаны четыре различных стиля, которые
применялись к основной текстовой части документа.
Рисунок 22.1 демонстрирует результат загрузки в
браузер. Не переживайте по поводу существования
различных стилей; этот вопрос будет рассматриваться позже.
3 C.\rEMPV63Wi.LQI.htiri
|-! '"№ 'ЕЛ Vmi riraJ"«
^ 1 -_Ж.-.
• Microvolt tnleirat Eiplww
Lw* ii4^'
ШШ11£|Ш
f4jjftwSjgJCUEMP\7KK2_LinJ«nJ
.«*;'<» piv <#■ j
ШР __
CL fiadu 1.ДОГ4 :.t_0rtWClU5
\^е*л,И^сгт s iviljiwepj
Point size of24
Hen- is some CAPITAUZEC
1Й йяг „ ,.„ , - -
text
.•..^w
BDD
^jr^
J-J (>Bo
IflMa»;
*i
РИСУНОК 22.1. Изменение класса для заголовка текста
Листинг 22.1. Определение стилей в дескрипторе
<style>
<html>
<head>
<style type="text/css">
<! —
hit
color: green;
font-style: italic;
font-size: 12pt;
\
hl.speciaK
Каскадные таблицы стилей EVC
Глава 22 E2J
font-size: 24pt;
>
. newheader{
color: yellow;
)
#caps<
font-variant: small-caps;
}
-->
</style>
</head>
<body>
<hl>Green, italic, and a point size of 12</hl>
<hl class="newheader">Yellow, italic, and a
point size of 12</hl>
<hl class="special">Point size of 24</hl>
<P>
Here is some <span id=" caps ">capitalized
< / span > text.
</p>
</body>
</html>
<link>
Если пользователь желает, чтобы стили хранились или
устанавливались в едином местоположении, а
изменения вы полнялись глобально по всей странице,
необходимо использовать элемент <link>. Он выполняет
функцию связывания внешних таблиц стилей и помещение
их в документ. Атрибуты элемента <link> (type и href)
используются для определения типа связи и URL, по
которому размещается внешняя таблица стилей.
Внешние таблицы стилей аналогичны CSS,
определенным внутри документа. Таблица стилей хранится по
конкретному URL-адресу. HTML-элементы <style> и
</style> в данном случае не нужны. Этот элемент
должен содержаться в разделе <head>. В следующем
примере будет показано, как включать таблицу стилей
chapters.css в документ:
<head>
<link rel="stylesheet" type="text/ess"
href="http://www.mcp.com/stylesheets/
chapters.css">
</head>
Атрибут style
Последний метод определения стилей и включения их
в документ связан с использованием атрибута style
любого текстового элемента HTML. Атрибут style
применяется для определения нового стиля, используемого
только для определенного элемента экземпляра. Это
обеспечивает возможность каждому элементу обладать
своим собственным стилем, независимым от других
определенных сталей текущей таблицы стилей. Селектор
. гго низкого уровня включает в себя определение
СТИЛЯ дпя к(тКретното экземпляра элемента. Сталине
Технологии программирован- ни динамическом HTML
Часть IV
color: yellow;
#myid(
font-size:
]
12pt;
</style>
</head>
<body>
<hl>Green</hl>
<hl class="newheader" id="myid">Yellow and
point size 12</hl>
<hl class="newheader">Yellow and <span
id=nital">italic</span></hl>
<h2>This will be default text<h2>
</body>
</html>
Определение старшинства стиля
Чтобы определиться со значением или старшинством
стиля элемента либо свойства, необходимо
придерживаться следующих правил:
1. Размещайте все ссылки на элемент с помощью
селекторов.
2. Сортируйте ссылки с использованием явных весов.
3. Сортировка должна выполняться от корня таблицы
стилей. Значения по умолчанию заменяются
пользовательскими таблицами стилей, а те, в свою
очередь, — авторскими таблицами стилей.
4. Производите сортировку по специфичности. Рядом
с каждым из трех вариантов поставьте очко, а затем
сложите очки, чтобы получить специфичность:
Количество атрибутов id.
Количество атрибутов class.
Количество имен дескрипторов, на которые
осуществлялись ссылки.
5. Выполняйте сортировку по порядку
специфичности. Из двух правил, одинаковых по весу,
преимущественным будет последнее.
Объекты стилей в JavaScript
" JavaScript L.2 были введены три новых объекта — tag,
class и id. Они используются в таблицах стиля Эти
объекты применяются для определения типов сталей
;|и можно "пределит как во внешних таблицах сти-
' связанных с HTML-документами, так и в самом
документе внутри дескрипторов <style> и </style>
ГРИМКАНИЕ
На данный момет только МЯи,-__+„, л ,
другие браузеры могут поддерживать или не
поддерживать действия этого метода, обязательно примите
решение относительно использования этих
дескрипторов для присваивания стилей.
document.tags
Массив document.tags — это ссылка на дескрипторы
HTML; в действительности, он является подобъектом
объекта Document. После определения следует элемент,
к которому применяется данный массив. За элементом
расположено описание, которое является уже
определенным свойством стиля (имя которого не всегда
совпадает с именем, определенным в CSS). Синтаксически
все дескрипторы <р> должны иметь размер шрифта в
20 пунктов:
document.tags.p.fontSize = "20pt";
document.classes
document, classes -- массив и подобъект объекта
Document. В данном массиве имеется доступ к
дескрипторам со специальным атрибутом class. Класс стилей
используется для одного элемента:
document.classes.fontclass.blockquote.fontSize =
"20pt";
Или же он может быть доступен для всех элементов:
document, classes, fontclass. all. fontSize = "20pt";
За объектом в точечной нотации следует имя
класса, а затем элемент, для которого определяется класс.
Классы, определяемые как а», можно применять ко
всем элементам, что продемонстрировано во втором
примере.
document.ids
Объект document.ids напоминает document.classes,
различие состоит лишь в том, что некоторые элементы
относящиеся к id, визуализируются с исполыование1
определенного стиля.
document.ids.myid.fontSize = "20pt";
За дескриптором объекта document.ids следует им id
и, в отличии от объектов document.classes и doauiieiMags,
оно не воспринимает имя элемента как часть опржле-
ния. Объекты document.ids используются вместе:
элементами, к которым применяются.
Свойства
В «бл. 22.1 приводятся свойства, ХЩККПЧ^
объектов стилей JavaScript А^ЩЩ
Каскадные таблицы стилей
Глава 22
Таблица 22.1 .Свойства объектов стилей JavaScript
Имя свойства
fontSize
fontStyle
lineHeight
verticalAlign
textDecoration
textTransform
textAlign
textlndent
paddincis()
borderWidthsO
margin:;()
borders; tyle
width
length
align
color
backgroundlmage
backgroundColor
display
lists tyleType
whiteS pace
К чему применяется
Возможные значения
Определение значений
Все элементы
Все элементы
Свойства шрифта
Абсолютные размеры
Относительные размеры
Процентость
Свойства текста
Элементы блочного уровня Число
Длина
Процентость
Все элементы
Все элементы
Все элементы
Элементы блочного уровня
Элементы блочного уровня Длина
Процентность
Все элементы
Все элементы
Все элементы
Свойства блочного уровня
Число
Процентность
Число
Длина
Процентность
Автоматизация
Свойства блочного уровня
Все элементы
Элементы блочного уровня Длина
Процентность
Автоматизация
Элементы блочного уровня Длина
Автоматизация
Все элементы
Свойство цвета
Все элементы Цвет
Все элементы
Все элементы Цвет
Классификационные свойства
Все элементы
Элементы со свойством display
Элементы блочного уровня Normal и pre
x-smatl, small, medium, large, x-large,
размер в пунктах
smaller, larger
Ha 150°. больше
normal, italic, oblique, small-caps
Количество единиц для увеличения высоты
Абсолютное значение высоты линии
Процент от родительского элемента
baseline, sub, sup, top, text-top, middle,
bottom, text-bottom
none, underline, overline, line-through, blink
capitalize, uppercase, lowercase, none
left, right, center, justify
Количество единиц для отступа
Процент от родительского элемента
Количество единиц для заполнения
Процент от родительского элемента
Количество единиц для ширины рамки
Границы в единицах
Процент от родительского элемента
Документ автоматически определяет
границы
попе, solid, 3D
Ширина в единицах
Процент от родительского элемента
Документ автоматически определяет
ширину
Длина в единицах
Документ автоматически определяет длину
left, right, none
Имена цветов, цвета RGB.
URL
Имена цветов, цвета RGB.
block, inline, list-item, none
disc, circle, square, decimal, lower-roman,
upper-roman, lower-alpha upper-alpha, none
Технологии программирования на динамическом HTML
Часть IV
Резюме
Появление таблиц стилей предоставило разработчикам
большие возможности по управлению внешним видом
документов. Можно определять стили по умолчанию
внутренне и внешне, и применять их ко множеству
элементов. В настоящий момент доступно большое
количество свойств стилей, что позволяет разработчикам
взять под полный контроль внешний вид содержимого.
Слои
В ЭТОЙ ГЛАВЕ
Универсальные действия
• <div> и <iframe>
• <1ауег> и <ilayer>
До недавнего времени одним из фундаментальных
ограничений Web-страниц была невозможность
расположения текста или изображений точно в указанном
месте на странице. Кроме того, не существовало
способов наложения HTML-элементов друг на друга. Один
из наиболее полезных в плане творчества аспектов
новых браузеров — поддержка слоев. Слои (layers)
позволяют создавать накладывающиеся прозрачные или
непрозрачные элементы с содержанием в
HTML-документе, которые вдобавок можно устанавливать точно в
указанном месте. Слои реализуются с помощью
нескольких различных методов, и те, кто хорошо знаком с
издательским миром Web, знают, что именно это чаше
всего приводит в замешательство.
В мире вне браузера Navigator 4 слои создавались с
использованием HTML-дескриптора и многократного
применения свойств позиционирования таблицы стилей
(CSS). отображения и управления порядком
расположения дескрипторов. По своей природе дескриптор
<div> (разделение данных) был логически наиболее
подходящим для создания слоев, и именно его обычно
использовали. Теперь существует Navigator 4, который
был выпущен с набором программ инструментальных
средств для Internet Netscape Communicator в 1997 г.
Navigator 4 содержит два новых дескриптора: <1ауег>
и <йауег> ("Г обозначает inflow — внутрипотоковый). Эти
дескрипторы предоставили различные пути от
стандартного использования дескрипторов <div>, которые
поддерживает Navigator, до создания слоев в
HTML-документе. В отличие от дескриптора <div>, дескрипторы
<1ауег" и <Пауег> имеют атрибуты, которые, в
сущности, позволяют "стилизировать" их. Для создания слоя
с абсолютным позиционированием (т.е. размещения
данного слоя по определенным координатам)
используют дескриптор <1ауег>. Для создания слоя с
относительным позиционированием (который появляется там,
где размещают дескриптор на HTML-странице)
применяется дескриптор <Пауег>.
Единственная реальная выгода от этих двух
дескрипторов Netscape, кроме возможности их стилизации
в пределах атрибутов (что является очень
незначительной выгодой), — это возможность помещения в них
внешних HTML-файлов. Такое помещение выполняется с
использованием атрибута дескриптора src. Однако,
этому аргументу можно противопоставить существование
дескриптора <iframe> ("i" здесь означает inline —
встроенный), который является частью Рекомендаций для
HTML 4 и имеет возможность стилизации CSS с теми
же самыми функциональными возможностями. К
сожалению. Navigator 4 не поддерживает этот дескриптор.
В результате получается расхождение в способах
создания слоев.
ПРИМЕЧАНИЕ
Сказанное выше, вероятно, может вызвать головную
боль, к тому же возникает вопрос — зачем вообще
связываться со слоями? Давайте разберемся. Как
упоминалось ранее, реальная проблема состоит в том
что Navigator 4 вышел за рамки стандартов. Однако
еще есть надежда: Navigator 5 и 6, браузеры с
открытым кодом (Open Source) от Mozilla.org,
поддерживают CSS и HTML 4, включая стили, необходимые для
позиционирования, а также дескрипторы типа <iframe>
для помещения внешних файлов.
Этот раздел посвящен специфике создания слоев.
Более подробно они будут рассматриваться позже в
главе, а сейчас можно оценить их использование и
выгоды, которые обеспечивают слои. В этой главе
обсуждается не только ряд универсальных действий, но также
и действия при использовании методов <div> / <iframe>
и <layer> / <ilayer> для создания слоев.
ШВНВ Технологии программирования на динамическом HTML
К£м HacnTJV
Универсальные действия
Несмотря на расхождения в способах создания слоев, о
котором упоминалось ранее, все движется к более
универсальной реализации. В этом разделе
рассматриваются некоторые универсальные действия и теоретические
аспекты, которые не зависят от метода создания слоев
на Web-страницах.
Использование таблиц стилей для создания
слоев
Как было сказано во введении к главе, стандартный
способ реализации слоев состоит в том, чтобы управлять
ими с помощью таблиц стилей. Этот способ включает
все — от позиционирования и моделирования данных,
содержащихся в слое, до расположения и визуализации
слоев. Свойства CSS перечислены в приведенном ниже
списке.
• position
• left, i glit, top и bottom
• height и width
• z-index
• visibility
ПРИМЕЧАНИЕ
Обратите внимание, что в этой главе не будут
рассматриваться абсолютно все свойства CSS. Дополнительную
информацию о таблицах стилей можно получить в
главе 22.
position
Свойство position используется для сообщения
браузеру, как и где размешать элементы, к которым
применяется это свойство. Существует четыре различных
значения этого свойства (см. табл. 23.1).
Для лучшего понимания работы этих свойств
рассмотрим листинг 23.1. В этом листинге три
дескриптора <р> помещены в раздел <body> документа. Каждый
из них имеет имя и ID (идентификатор) стиля. В
разделе <head> документа каждому 1D присвоен свой цвет
фона (для отображения различий), а также значения left
и top. Обратите внимание, что свойство position
установлено в absolute. На рис. 23.1 показан результат
отображения в браузере Internet Explorer.
ПРИМЕЧАНИЕ
В примере преднамеренно не используется
дескриптор <div> для демонстрации того, что эти типы
стилей могут применяться к любому элементу.
Л§ JavtScqpt Uriuihed • Ituonlt Internet Explore*
rfc JjtS ■ Fjy. '».■■ Sip
. AsJdeil JS] CATEHF\7£N23J.m MnJ
EJfjfpTl
ЁдаяГа
■£1 Diw -к,.. ■■ ..-;",-Ч ,- -.;■ -,*Г Й*Й
ej
J
w-" ■ /•
РИСУНОК 23. "[.Абсолютное позиционирование
HTML-элементов.
Листинг 23.1. Абсолютное позиционирование
HTML-элементов с помощью свойств CSS.
<html>
<head>
<title>JavaScript Unleashed</title>
<style type="text/ess">
<! —
#first{
background-color: green;
left: 0 ;
position: absolute,-
top : и ;
}
#second (
background-color : red;
left: 30;
position : absolute;
top: 30 ;
)
#third{
background-color: blue;
left: 60;
position: absolute;
top: 60;
I
—>
</style>
</head-
<body>
<p name="layerl" id="first">
Layer 1
</p>
<p name="layer2" id="second">
Layer 2
</p>
<p name=" layer3" id="third">
Layer 3
</p>
</body •
</html>
Слои
Глава 23
Таблица 23.1. Значения свойства position.
Значение Описание
absolute Это значение сообщает браузеру, что будут определяться абсолютные координаты элемента. При
использовании данного значения применяются также свойства top и left. Если они не определены, браузер
полагает, что координаты х и у (верхний левый угол окна браузера) равны 0.
fixed Это значение аналогично absolute, за исключением того, что не перемещается при прокрутке окна.
relative Это значение позволяет сдвигать заданный элемент относительно предыдущего элемента.
static Это значение по умолчанию, которое используется в визуализации HTML в современных версиях браузеров.
left, right, top и bottom
Как видно из предыдущего примера, существуют
некоторые CSS-свойства, которые позволяют определять
точное расположение элемента. Эти свойства, имеющие
числовые значения для координат, нельзя использовать
все сразу. Например, элемент не может установить
свойство right, если уже установлено свойство left. To же
самое можно сказать и относительно свойств top и bottom.
Если попытаться сделать это, большинство браузеров по
умолчанию перейдут к значениям свойства, заданным
последним в определении используемых стилей.
Например, рассмотрим листинг 23.2, который
представляет собой расширение предыдущего листинга за
счет добавления четвертого слоя и определения стилей.
Применялись различные комбинации свойств right, left,
top и bottom для размещения блоков в каждом из
четырех углов окна браузера (рис. 23.2).
Листинг 23.2. Использование свойств right, left, top
и bottom.
<html>
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
#first{
background-color: green;
left: 0;
position: absolute;
top: 0
.1
ttsecond(
background-color: red;
position: absolute;
right: 0
top: 0
«third (
background-color: blue;
bottom: 0;
position: absolute;
right: 0
«fourth{
background-color:
bottom: 0;
left: 0;
position: absolute;
)
—>
</style>
</head>
<body>
<p name="layerl" id="first">
Layer 1
</p>
<p name=' layer2" id="second">
Layer 2
</P>
<p name="layer3" id="third">
Layer 3
</p>
<p name="layer4 " id="fourth">
Layer 4
</ >
</body>
</html>
JavaScript Unleashed - MtaocaFt InlBmet Ежркиег
tftfteB |С] С \TEMP\763'e5JJ)2lBri
BOB
Layer 4
zi
•}^:МВГвГЛ1вр.
yellow;
РИСУНОК 23.2. Определение правой, левой, верхней и нижней
позиций HTML-элементов.
height и width
Следующие два свойства позволяют определять высоту
и ширину слоев. Именно поэтому они носят названия
height и width. Подобно свойствам, которые позволяют
определять расположение слоев, эти два свойства
принимают числовые значения для определения того, на-
■■■■ Техна/югии программирования на динаминеско. HTML
E££i Часть IV
сколько высоким и широким должен быть слой.
Листинг 23.3 продолжает совершенствовать предыдущий
пример, определяя для четырех слоев значения height
и width. Результат можно увидеть на рис. 23.3.
Листинг 23.3. Использование height и width для
определения размера слоев.
<html>
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
< ! —
#first{
background-color: green;
Ie"ght:20;
left: 0;
position: absolute;
top: 0
width: 40;
)
(second(
background-color: red;
height:
Imposition : absolute;
ri-ht: 0 •
top: 0;
width: 30;
#third(
back—round-color: blue;
bottom: 0 ;
height:100;
—osition : absolute;
right: 0;
width: 50;
1
«fourth{
background-color: yellow;
bottom: 0;
height:100;
left:
exposition: absolute;
width: 200;
>
</style>
</head>
<bodv>
<.p name="layerl" id="first">
Layer 1
/p>
<p name="layer2" id="second">
Layer 2
</p>
<p name=" layer3 " id=" third" >
Layer 3
</p>
<p name=" layer4 " id="fourth">
Layer 4
< p>
</body>
</html>
*£| Jev- ' ciipt UrtJoathed • Microsoft Interne! EnplaMi
Fte £<ffl vie - favorites '[ofifc Help
JB!ffi^M€ -
f f* [b]C:\TEHP\7E>a3_LD3hlril
| * ,н» ф jh «fcttottc!,, ..- j
1
Layer 4
~jef.Dor>*
_ci
на в
ГЩ
'
'to;
i Li!*t";
РИСУНОК 23.3. Определение высоты и ширины слоев.
z-index
Наступило время разобраться в терминологии слоев. До
этого только определялось как выглядят слои — их
стилевые характеристики. Теперь слои будут
располагаться так, чтобы получить эффект наложения слоев друг
на друга. Для этого используется свойство z-index.
Свойство z-index содержит числовое значение,
которое определяет расположение слоя относительно окна
браузера, которое по умолчанию является нулевым (0).
Установка для z-index значения 1 означает, что слой
размещается поверх окна браузера. Это порядок, в
котором слои появляются на странице. При этом, если
имеются накладывающиеся друг на друга слои, и у
одного из них z-index равен I, то он наложится на
другой. Помните, что окно браузера имеет z-index, равный
О, и располагается под слоем 1.
Прежде чем перейти к примеру, посмотрим на
листинг 23.4. В нем есть четыре накладываюшихся слоя.
Они накладываются не потому, что для них
установлены значения z-index, а из-за порядка, в котором они
появляются в документе. Первый слой — самый i ижний,
затем следует второй, третий и четвертый (см. рис. 23.4).
Листинг 23.4. Слои с накладывающимися
координатами.
<html>
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
#first{
background-color: green;
height: 100 ;
left:
exposition: absolute;
t—: 0;
width: 100;
1
#second{
background-color: red;
height: 100;
left: 20;
position: absolute;
tr -. 20;
width: 100;
I
#t'.iird{
background-color: blue-
height : 100 ;
left: 40;
position: absolute;
top: 40;
width: 100;
}
#fourth(
background-color: yellow;
height: 100;
left: 60;
position: absolute;
top: 60;
width: 100;
>
-->
</sty.te>
</head>
<body>
<p пате=" layerl" id="firstn>
Layer 1
</p>
<F name="layer2" id="second">
Layer 2
</p>
<F name="layer3" id="third">
Layer 3
</p>
<p name=nlayer4" id="fourth">
Layer 4
</o>
</body>
</html>
Как видно из предыдущего примера, порядок слоев
играет важную роль при их отображении. Они действи
тельно уложены друг поверх друга? Нет — это только
так кажется. Их можно упорядочить, определяя
свойство Z-index. Конечно, если разместить их в том же
порядке, они будут выглядеть точно так же, поэтому
данное свойство чаще всего используется для изменения
порядка, а не для определения стандартного (по
умолчанию) порядка при создании Web страниц.
Рассмотрим листинг 23.5. Здесь для первого и
третьего слоев устанавливаются значения z-index. По
скольку первый слой должен быть верхним, его z-
index равно 2, a z-index третьего слоя равно 1. На рис.
23.5 показан результат загрузки кода из этого листинга
в браузер.
Глава 23 ШШШШ
■ajuvnBcnplUolBUjbod-Maoiijrilnliui.ilEKdoier НПЕ
i. , ..4ЩЩЩт&. iU.~, ~ :"-fe-:-„ .
i<&*ejs|e]C4EMP\763Z3_L(!4html 3 V
fftatSo © 14sjf/ ~ф: J > Й(-Й«1оЫ«Ыа. -_£cw«ifSui>. i>*%".
'*■'"' Ж
,j-e>t ,-_-. .-=5
I ayer4
... . ... £j
■ЧОм- !; ,,„■,.,.,,■■■,..■,,„... . ... .,., ., l HSW-.pU» ;;, .,-'
РИСУНОК 23.4. Слои, накладывающиеся из-за порядка
следования в документе.
Листинг 23.5. Изменения значения z-index слоев.
<'itm">
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
<> —
#first{
background-color: green;
height: 100;
left: 0;
position: absolute-
top: 0
width: 100;
z-index: 2;
Э
#second{
background-color: red;
height: 100;
left: 20;
position: absolute;
top: 20;
width: 100 ;
}
#third{
background-color: blue-
height : 100 ;
left: 40;
position: absolute;
top: 40;
width: 100;
z-index: 1;
1
ttfourth{
background-color: yellow;
height: 100;
left: 60;
position: absolute;
top: 60;
width: 100;
)
Технологии программирования на динамическом HTMI
Часть IV
—>
</style>
< h ad>
<body>
<p name="layer1" id="firstM>
Layer 1
</p>
<p name="layer2" id="second">
Layer 2
</p>
<p name="layer3" id="third">
Layer 3
</p>
<p name="layer4" id="fourth">
Layer 4
</p>
</body>
</html>
•it r Jtt* " -
ЬъШ,
I "* Sf]SJcviEKPwraei_ubHH
ulttWvB
НПО
i!:
'■a. " W.. -».■ *Лг
РИСУНОК 23.5. Изменение наложения слоев из предыдущего
примера.
visibility
Последнее из рассматриваемых свойств — visibility,
которое принимает четыре разных значения,
перечисленные в табл. 23.2. Как и следовало ожидать, это свойство
отвечает за сокрытие и отображение слоев.
Для демонстрации использования этого свойства
возьмем код предыдущего примера и добавим к нему две
строки. Помните два слоя, для которых устанавливались
значения z-index? При этом они стали самыми
верхними на странице. В определении стиля установим их
значения visibility в hidden. Листинг 23.6 содержит данный
код, а рис. 23.6 демонстрирует, что эти два слоя теперь
не видны.
Листинг 23.6. Использование свойства visibility для
сокрытия элементов.
<html>
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
<!
#first(
background-color: green;
height: 100;
left:
exposition: absolute;
top: 0
width: 100;
z-index: 2;
visibility: hidden;
]
#second(
background- color : red ;
height: 100;
left: 20;
position: absolute-
top: 20;
width: 100;
]
#third{
background- color : blue ;
height: 100;
left: 40;
position: absolute;
top: 40;
width: 100;
z-index: 1;
visibility: hidden;
)
#fourth(
background-color: yellow;
height: 100;
left: 60;
position: absolute;
top: 60;
width: 100;
)■
—>
</style>
</head>
<body>
<p name="layerl" id="first">
Layer 1
</p>
<p name="layer2" id="second">
Layer 2
</p>
<p naroe="layer3" id="third">
Layer 3
</p>
<p naroe="layer4" id="fourth">
Layer 4
</У>
</body>
</html>
Управление накладывающимися слоями
Рассмотренные CSS-свойства позволяют создавать
интересные визуальные эффекты. Например,
предположим, что требуется отобразить на Web-странице
некоторую диаграмму с отчетными данными. Цель
заключается в отображении одной диаграммы в каждый
момент времени и предоставлении пользователю
возможностей просмотра других диаграмм.
Слои ЕТТЧ
Глава 23 ХШшА
Таблица 23.2. Значения свойства visibility.
Значение Описание
collapse Это значение аналогично collapse (см. ниже) всегда, кроме случаев использования в аблицах.
hidden Это значение скрывает элемент.
inherit Это значение по умолчанию, определенное в браузере; принимает то же самое значение, что и его
родительский элемент.
visible Это значение делает элемент видимым.
* J - ■•■ crifft UnfoMhnl ■ Hkautaft Internal Еадкин
: £&.-/£# Slew Ра$йнй '"Глей "йефч
.: *йЯ»й [г] C.UEMP\7S3<21.L0B.Hnil
::^1Й|(.;01£г Ф J Ивяваанийм
.
ytr4
1УЬ5Г ■■: -„. ■ '■■" -,-
BB x
jj i
:;Cwriftctos <j*> *.
j
d
РИСУНОК 23.6. Сокрытие слоев.
Возможно, те, кто работает в среде Windows,
вспомнят, что для достижения подобных целей можно
использовать окно со вкладками (по одной вкладке для
каждой диаграммы). Точно такой же эффект на Web-
странице можно создать при помощи слоев.
Однако, при создании слоев важно помнить, что
ими необходимо эффективно управлять.
Воспроизведение вкладок, списков либо элементов меню,
применяемых в каждодневных прикладных программах, — весьма
непростое дело. Необходимо запоминать предыдущее
состояние элемента или даже набора элементов, чтобы,
когда один из них изменяется, все остальные также бы
изменялись. Например, при нажатии вне области меню
оно должно исчезать, т.е. требуется перехватывать
события нажатия на кнопку мыши. В данной главе эти
темы не обсуждаются; они подробно рассматриваются
в главе 24.
Создание мультипликационных эффектов
Другой интригующей возможностью слоев является
создание мультипликации. Поскольку JavaScript
позволяет позиционировать слои, можно создавать
рекурсивные юдпрограммы, в которых слои будут как бы
скользить или прыгать по документу. Именно комбинация
HTML и JavaScript позволяет создавать динамический
HTML (DHTML).
Используя слои, JavaScript и таблицы стилей,
можно создавать (с помощью HTML) элементы на
странице, улучшать их внешний вид (через CSS), а также
управлять этими элементами (с помощью JavaScript). С
такими модификациями, как улучшенная поддержка
DOM-модели и XML (extensible Markup Language -
расширяемый язык разметки) в браузерах,
возможности становятся поистине безграничными.
<div> и <iframe>
Теперь, когда известны основы создания слоев, пришло
время познакомиться с их спецификой. Даже при том,
что Netscape-метод использования <1ауег> и <ilayer>
для реализации слоев был отвергнут, все же стоит о нем
поговорить позже в главе. А сейчас будет обсуждаться
более универсальный метод реализации слоев — через
дескрипторы <iframe> и <div>.
Определение блоков данных
Первый шаг в создании слоев должен заключаться в
определении блока данных, предназначенных для
данного слоя. В случае браузера его окно должно
считаться первым слоем. При нажатии на меню оно
отображается поверх окна — т.е. это второй слой поверх первого
слоя (окна браузера). При нажатии на выпадающем
подменю появляется еще один слой (который может
принадлежать или нет тому же уровню, что и первый).
Методом определения этих блоков данных
является применение дескриптора <div>. Этот дескриптор
создает определенную иерархическую структуру блоков в
документе. В терминах выполнения этот дескриптор
подобен дескриптору <р>, за исключением того, что
<р> предназначен как для определения начала нового
абзаца, так и для следующих за ним данных как
составляющих данный абзац. Дескриптор <div>, напротив,
только определяет данные, но не сообщает браузеру, как
их отображать.
Перед рассмотрением метода перемещения слоев или
блоков <div> изучим атрибуты этого дескриптора и их
значения. Все эти атрибуты сведены в табл. 23.3.
Технологии программирования на динамическом HTML
Часть IV
Таблица 23.3. Атрибуты дескриптора <div>.
Значение
align
class
dlr
id
lang
name
style
title
Описание
Используется для выравнивания данных, содержащихся внутри дескриптора <div>, может принимать значения
left (полевому краю), right (по правому краю), center (по центру) и ustify (по ширине). Этот атрибут был
отвергнут в пользу применения CSS.
Разделенный запятыми список классов стилей, которые делают дескриптор экземпляром этих классов.
Определяет направление любого текста, содержащегося в дескрипторе. Значение Itr означает слева направо,
а значение rtl — справа налево.
Часто используется в таблицах стилей для определения типа стиля, который должен применяться к данным
внутри дескриптора.
Идентифицирует язык для текста внутри дескриптора.
Используется для именования экземпляра блока. Может применятся в JavaScript для управления слоями.
Позволяет определять стиль внутри дескриптора, а не в таблице стилей.
Обеспечивает более информативный заголовок для дескриптора по сравнению с дескриптором <title>,
который применяется для всего документа.
Определение блока данных
Использование дескриптора <div> — совершенно
простое дело. Все, что необходимо — это пространство
вокруг элементов, которые необходимо определить как блок
данных. Листинг 23.7 демонстрирует, как это сделать.
Как видно из листинга, в этом примере содержится два
блока <div>. Внутри первого находятся две
горизонтальных линии (дескрипторы <hr>) и текст DIV 1. Во
второй блок включен заголовок третьего уровня
(дескриптор <h3>) и абзац (дескриптор <р>). В него также
входит некоторый текст перед и после каждого блока
<div> так, чтобы было видно, где они начинаются и
заканчиваются. Результат выполнения этого листинга в
браузере Opera показан на рис. 23.7.
Листинг 23.7. Использование дескриптора <div>.
<html>
<head>
<title>JavaScript Unleashed</title>
</head>
<body>
Before the first block.
<div name="layerl">
<hr>
DIV 1
<hr>
. iiv>
After the first block.
<br>
Before the second block.
<div name="layer2">
<h3>
DIV 2
</h3>
<P>
I am inside the second DIV block.
</p>
</div>
After the second block.
</body>
</html>
v>lGpeM3GQ(u 'rteiMfl- JJowficnpt Utfea hcd]
J3.J\fiH y»; «\ £.
I
Before the first Лоск.
DIV I
Afte the first block.
Before the condbloclt
DIV 2
lamlnsidethe etondDIVblock.
Aitt the second Jock.
у*]
'*3 щ&
лП
"ЩИГЗ
РИСУНОК 23.7. Определение блоков данных в документах.
Позиционирование блоков <div>
Теперь рассмотрим применение позиционирования к
блокам данных. Для этого необходимо присвоить
свойства id дескрипторов и определить свойства стилей для
каждого из них. Определим сначала расположение,
размер и цвета фона, поскольку это очевидно. Все
элементы рассматривались ранее в главе. Листинг 23.8
содержит необходимый код, а рис. 23.8 показывает, как будет
выглядеть отображение кода в браузере. Как видно из
рисунка, позиционирование было установлено так,
чтобы второй блок помещался слева от первого, а первый
накладывался на часть текста.
Листинг 23.8. Применение таблиц стилей и
позиционирования к блокам <div>.
< itm~>
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
<! —
Слои
ttfirst{
>г - round-color: green;
height: 100 ;
Left: 275;
position: absolute;
top: 40;
width: 100;
I
ttsecondf
back—round-color: red;
height: 100;
left: 100;
position: absolute;
tops 55;
width: 100;
}
- ■>
<7style>
</head>
<body>
Before the first block.
<div name="layer1" id="first">
<hr>
DIV 1
<hr>
div>
After the first block.
<br>
Before the second block.
<div name="layer2" id="second">
<h3>
DIV 2
</h3>
<P>
I am inside the second DIV block.
</p>
</div>
After the second block.
</body>
</htirl>
Управление с помощью JavaScript
Сейчас, после того как проделаны первые шаги в
создании слоев и определении их характеристик, можно
добавлять возможности JavaScript. В этом разделе
исследуются JavaScript-способы динамических замен,
отображений и перемещений слоев.
ПРИМЕЧАНИЕ
Главная цель этой гпавы заключается в представлении
слоев. Если уже есть понимание методики создания
слоев и обращения к ним через JavaScript, можно
сразу перейти к главе 24, где более подробно
рассматривается практическое применение этих двух
технологий.
Первая вещь, которую следует понять во время
изучения JavaScript для манипуляции слоями, — это
синтаксис. Из-за различий между Internet Explorer и Navigator,
к слоям обращаются различными методами.
В браузерах Navigator к слоям обращаются через
массив layers. В дескрипторе <div> имеется атрибут name,
с помощью которого можно определить имя слоя. Сле-
Глава 23
дующая строка кода используется для обращения к
первому слою:
document.layers ['layer']
Э JavaSoft Untnched - MkkuoK Internet ГирАчег
i'J»ijii*!«|a]c\rEMF*,reKZ)J-'Biiiiij
i* -,ЖГ?4' ;.%,,, J Ф"!Й!?ЧЬя. .&+,„
Befo' the first block After the first i 'ock.
Before the coad block Afterthe second i _ *
il ■
^ipm*-" -", г.
*
: >■■'-;
у^ч ton*um:
*x- *
о
Э-.
!-,->'?,
£i
T
J
РИСУНОК 23.8. Позиционирование блоков данных.
В Internet Explorer, в отличие от Navigator, к слоям
обращаются через массив all. Значение, определяющее
слой, к которому обращаются, содержится не в атрибуте
name дескриптора <div>, а в атрибуте id. В предыдущем
примере для обращения к первому слою применяется
показанная ниже строка кода. Обратите внимание, что
здесь применяется first — значение атрибута id:
document.all ['first']
ПРИМЕЧАНИЕ
Это не единственный способ обращения к слоям из
кода JavaScript. Однако, это лучший способ для
учета особенностей Navigator и Internet Explorer,
поскольку он требует минимального объема кодирования.
В среде Navigator можно обращаться к свойствам слоя
сразу же после объявления document.layers['layer Name'].
Для случая Internet Explorer, однако, к ним обращаются
через массив style, что означает применение синтаксиса
примерно такого вида — document.all ['layerName'].style.
Рассмотрим пример.
Предположим, что isNav означает, что
используется браузер Navigator, a isIE — что используется Internet
Explorer. Следующий условный оператор if из листинга
23.8 скрывает первый слой.
if(isIE)(
document.all['first'].style.visibility =
"hidden";
[else if(isNav){
document, layers [' layerl' ] .visibility = "hidden";
)
Технологии программирования на динамическом HTML
Часть IV
При создании сценариев, предназначенных для
работы в обоих браузерах, в дескрипторе <div>
используют одно и то же значение как для name, так и для id.
Кроме того, потребуется хранить в переменной ссылку
на массив, к которому обращаются. Можно сделать то
же самое для требований стиля в Internet Explorer.
Следующий псевдокод решит упомянутые проблемы.
var layer
var style
new String();
new String () ;
if(isIF {
layer = ".all";
style = "style";
Jelse if(isNav){
layer = ".layers";
style = " " ;
i
Теперь имеется достаточно информации для
формирования функции, работающей во всех браузерах,
которая будет работать со слоями. Однако, требуется
предпринять последний шаг — включить использование
метода eval(). Этот метод будет обрабатывать строку как
JavaScript-вызов. Можно "построить" требуемый вызов
длядоступа и изменения свойств слоя, например,
свойства visibility.
В листинге 23.9 все рассуждения собраны вместе.
Как видно из листинга, с помощью некоторых CSS-P-
свойств был создан одиночный слой, который
появляется под двумя кнопками в окне браузера. После
загрузки страницы вызывается функция checkBrowser(),
которая определяет, что это за браузер — Internet Explorer
или Navigator. Там также хранится необходимый
массив для доступа к слоям — layer.
Каждая из кнопок выполняет вызов функции
changeState(), передавая значение и ссылку на слой.
Значение сообщает функции, надо ли отображать
переданный слой. Затем эта функция считывает переданные
ей параметры и при помощи метода eval() изменяет
состояние слоя. На рис. 23.9 показан вид страницы перед
нажатием кнопки "Hide". Пример одинаково хорошо
работает как в Internet Explorer, так и в Navigator.
Листинг 23.9. Доступ к слоям через JavaScript.
<html>
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
#layerl(
background-color: green;
height: 100;
left:
Imposition: absolute;
top: 50;
width: 100;
I
—>
</style>
<script type="text/javascript"
language=".JavaScriptl. 2">
<! —
// Глобальные переменные для браузера
var layer = new String () ;
var style = new String ();
// С каким браузером инеем дело:
// Explorer, Navigator, или другой?
// Установка соответствующих значений
/ переменных для браузера,
function checkBrowser()(
if(navigator.userAgent.indexOf("MSIE")
' -1} {
layer = ".all";
style = " . style" ;
)else if (navigator, usericnt.
-indexOf ("Nav") != -1) {
layer = ".layers";
style = "" ,-
>
}
/ / Изменение состояния .
function changeState (layerRef, state) {
eval '"document" + layer + ■■['■■ +
layerRef + " ' ] " + style +
" .visibility = '" + state + )
I
II—>
</script>
</head>
<body onload=" checkBrowser () '>
<div name=" layerl" id="layerl">
DIV 1
</div>
<form name="f orml*">
<input type="button" value="Hide"
onclick="changeState( 'layerl' , ■hidden')">
<input fcype="button" value="Show"
onclick="changeState("layerl" , "visible") ">
<form>
</body>
</html>
■3d»»SciiptUnleei*ed-Uie mttJntoir»* Exptwei
&-
- en
РИСУНОК 23.9. Содержимое страницы перед нажатием
кнопки.
Слои
Глава 23
Хороший пример применения этого дескриптора -
создание на сайте раздела свежих новостей.
Предположим, что требуется обновлять новости ежедневно,
однако не хочется ежедневно обновлять каждую
страницу, на которой они появляются. Используя дескриптор
<iframe>, можно ссылаться на одну страницу,
содержащую сегодняшние новости. При этом изменения будут
производиться только в одном месте и появятся на всех
соответствующих страницах.
Сказанное стоит проиллюстрировать примером. Как
видно из листинга 23.10, вызывается внешняя
страница с именем news.html (которая находится в листинге
23.11). Дескриптор ссылается на эту страницу с
помощью src и других атрибутов. На рис. 23.10 для <iframe>
задана граница, чтобы слой был более четко виден. В
табл. 23.4 перечислены атрибуты дескриптора <iframe>.
Листинг 23.10. Использование дескриптора <iframe> для загрузки внешних файлов.
<html>
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
<! —
#layerl{
height: 100 ;
left:
Imposition: absolute;
top: 50;
width: 100;
]
_ _Ъ
</style>
<script type="text/javascript" language="JavaScriptl. 2">
<! —
// Глобальные переменные для представления типа браузера
var isZE = new Boolean (false) ;
var isNav = new Boolean (false) ;
var unsupported = new Boolean (false) ;
var layer = new String () ;
var style = new String () ;
/ / Определение типа браузера:
/ / Explorer, Navigator, или другой. Установка переменной
// слоя взависимости от требуемой формы доступа.
function checkBrowser()(
if(navigator.userAgent.indexOf("MSIE") i= -1) {
isIE = true;
layer = M .all" ;
style = ".style";
}else i f (navigator. user Agent. indexOf ("Nav") J = -1) (
isNav = true;
layer = ".layers";
style = "" ;
}else<
unsupported = true;
}
// Изменение состояния.
function changes ta te'layerRef, state)'
eva" ("document" + layer + "[■■■ + layerRef + "']" + style + " visibility = '" +
estate + ) ;
I>
-И
Вставка внешних файлов
Используя дескриптор <iframe>. можно выполнять
вставку внешних файлов. Это дает возможность лучше
управлять содержимым и обеспечивает механизм включения
содержимого из различных расположений.
ПРЕДУПРЕЖДЕНИЕ
Даже при том, что дескриптор <Нтате> является
частью Рекомендаций для HTML 4, в браузерах Navigator он
в настоящее время не поддерживается. Однако,
поддержка этого дескриптора будет добавлена в Navigator
5 (называемый также Mozilla), браузер с открытым
исходным кодом от Mozilla.org. Пока же для эмуляции
функциональных возможностей этого дескриптора
можно воспользоваться дескриптором <ilayer> браузера
Navigator 4.x.
Технологии программирования на динамическом HTML
Часть IV
II—>
</script>
</head>
<body onload="checkBrowser()">
<iframe name="layerl" id="layerl" src="news.html" frameborder="l"
noresize scrolling="no"X/iframe>
<form name="forml">
<input type="button" value="Hide" onclick="changeState('layerl','hidden')">
<input type="button" value="Show" onclick="changeState ('layerl','visible') ,4>
<form>
</html>
Таблица 23.4. Атрибуты дескриптора <iframe>.
Значение
Описание
align Используется для выравнивания данных внутри дескриптора <iframe>. Допустимыми значениями являются
left, right, top, middle и bottom. От него отказались в пользу CSS.
class Разделенный запятыми список классов стиля, который определяет дескриптор как экземпляр указанных
классов.
frameborder Может принимать значения 0 или 1 для указания, существует ли граница вокруг фрейма
height Определяет высоту <iframe>.
id Часто используется таблицами стилей для определения стиля, который должен применяться к данным в
дескрипторе.
longdesc Ссылается на более полное описание содержимого дескриптора.
marginheight Количество пикселов между содержимым фрейма и верхней и нижней границами.
marginwidth Количество пикселов между содержимым фрейма и правой и левой границами.
name Используется для именования блока. Применяется в JavaScript для управления слоями.
noresize Если присутствует, изменение размеров фрейма со стороны пользователя запрещается.
scrolling Принимает значения auto, yes или по для определения, должны ли отображаться полосы прокрутки.
src Определяет URL, в котором хранится содержимое <iframe>.
style Позволяет указывать определение стиля внутри дескриптора вместо внешнего указания в таблице стилей.
title Позволяет обеспечить более информативный заголовок для <iframe> по сравнению с дескриптором <title>,
который относится ко всему документу.
width Определяет ширину <iframe>.
[ JanScHpl U I Internet Endow
c*> f1* v«* I ' ' ' "
I / jha Щ C:\TEMP\7SK23JLmhM
в»а ьда* mi ■, a ™ sis*, - >
,..a
~3_«"■ \
РИСУНОК 23.10. Результат загрузки листинга 23.10 в Internet
Explorer.
Листинг 23.11. Содержимое внешнего файла.
<html>
-ih-aad>
<title>JavaScript Unleashed</title>
</heacb-
<body bgcolor="red">
<P>
This is the news page!
</p>
</body>
</html>
Из сказанного выше становится понятно, что
возможности управления слоями с помощью Ja\ aScript
весьма обширны. Однако, как упоминалось ранее,
существует некоторое несоответствие между основными
браузерами. Internet Explorer более точно реализует
стандарты HTML 4 и ECMAScript, a Navigator вводит ряд
новых дескрипторов для обрабоис. слоев. В следующей
Слои
версии они будут поддерживать Рекомендации для
HTML 4, пока же необходимо ограничиться
дескрипторами <1ауег> и <ilayer>.
В последнем разделе главы обсуждаются эти
дескрипторы и способы их использования. Хотя здесь уже
были представлены базовые принципы, однако,
детальное рассмотрение формирования DHTML с помощью
этих дескрипторов приводиться не будет.
<1ауег> и <ilayer>
В Navigator слои определяются с помощью
дескрипторов <1ауег> и <ilayer>. Элементы <1ауег> позволяют
точно располагать слой на странице, а элементы <ilayer>
появляются везде, где их размещает текущий документ.
Свойства дескрипторов <1ауег> и <ilayer> собраны в
табл. 23.5.
Как видно из таблицы, эти дескрипторы содержат
большинство тех же самых атрибутов, что и другие
дескрипторы, применяемые при создании DHTML. Однако,
в отличие от других элементов в браузерах Navigator слой
имеет свой собственный JavaScript-объект: объект Layer.
ПРИМЕЧАНИЕ
Этот объект был описан в главе 9, поэтому его
методы и свойства здесь подробно рассматриваться не
будут.
Пример страницы со вкладками
Для лучшего понимания функциональности
дескрипторов <1ауег> и <ilayer>, стоит обратиться к нескольким
примерам. Возьмем четыре изображения в формате GIF
Глава 23
и с их помощью отобразим диаграммы на странице со
вкладками (см. рис. 23.11). Каждое из этих
изображений присваивается отдельному слою HTML-документа.
Элементам <1ауег> устанавливаются одинаковые
параметры left и top для выравнивания ихдру1
относительно друга.
<layer name="tab3" left=5 top=55>
<img src="./1994tab.gif">
</layer>
<layer name=" tab2 '■ left=5 tqp=55>
<img src="./1995tab.gif">
</layer>
<layer name="tabl" left=5 top=55>
<img src="./1996tab.gif">
</1г--ег>
<layer name="tabOu left=5 tqp=55>
<img src="./1997tab.gif">
</layer>
ПРИМЕЧАНИЕ
В слоях используется концепция "последний должен быть
первым" (или "самым верхним"). Обратите внимание,
что в приведенном выше коде вкладка для 1997 г. в
HTML-файле была определена последней. Определенный
в последнюю очередь элемент слоя считается самым
верхним и будет отображаться поверх всех остальных.
С целью обеспечения лучшего взаимодействия с
пользователем был определен еще один слой,
содержащий форму со списком выбора. Пользователь теперь
может выбирать для просмотра элемент из списка.
Можно определить обработчик событий onChange, который
бы вызывал функцию showTab() и передавал ей в
качестве параметра выбранную опцию. Ниже показан
соответствующий код:
Таблица 23.5. Свойства дескрипторов <1ауег> и <ilayer>.
Свойство
Описание
above Положение объекта Layer повышается в порядке z-order всех слоев документа (null, если слой — самый
верхний).
backg'ound URL изображения, используемого в качестве фона для слоя.
below Положение объекта Layer понижается в порядке z-order всех слоев документа (null, если слой — самый
нижний).
bgcolor Цвет фона для слоя.
clip Определяет прямоугольник отсечения, который является видимой областью слоя. Все, что находится вне
этого прямоугольника, отображаться не будет.
heigh': Высота слоя в пикселах.
left Координата в пикселах слоя по оси X относительно начала координат его родительского слоя.
name Имя слоя.
src URL для источника, содержащего данный слой.
top Координата в пикселах слоя по оси Y относительно начала координат его родительского слоя.
visibi'ity Определяет атрибуты видимости слоя show отображает слой, hide скрывает слой, a inherit заставляет слой
наследовать условия видимости отего родительского слоя.
width Ширина слоя в пикселах.
z-index z-порядок слоя относительно элементов того же уровня и родительского элемента.
Технологии программирования на динамическом HTML
^Часть" IV
<layer name="select" left="500" top="55"
width="150">
<center>
<P>
<i>
Select the year to view:
</p>
<form iame="selectForm">
<select name="pickYear" size="l"
onchange="showTab(this. selectedlndex) ,
return false ;">
<option selected>1997</option>
<option>l' 96</option>
<opt Lon>' 9r"</ iption>
<option> 1994</option>
</seleot>
</form>
</center>
</layer>
ЧТ1."
ran
1 r
Я*а*|
»-*J
t
*
In A".
>
^
JVMZIHSICUBAGEAR ИДкНЮф
4*" ]l»
t«r
1*1
5t
ЗД«» nhi
3
fn^iinl*.
епш
" 4
■ -;«!>■
■ и J
К
РИСУНОК 23.11. Изображение в формате С/, на странице со
вставками.
ПРИМЕЧАНИЕ
Оптимальнее всего было бы иметь карту изображения,
определенную для границ вкладок. Связывая с этими
областями обработчик событий onClick, можно
смоделировать стандартный элемент управления типа
страницы со вкладками.
Теперь создадим функцию showTab() для
отображения выбранной диаграммы. Для этого сначала
необходимо скрыть все слои, а затем сделать выбранный
слой видимым. Следующий код использует массив
document.layers для прохода через каждый слой в
документе и скрывает все слои, кроме Select. Затем
выбранной вкладке присваивается значение inherit, что делает
ее видимой.
function showTab (idx) {
for (var i = 1; i < document.layers.length;
i++){
if(document.layers[i].name ! 'Select')!
document.layers[i].visibility = 'hide';
>
document.layers ["tab"+idx].visibility =
1 inherit';
}
При просмотре и тестировании кода из списка
выбора можно выбрать год для отображения
соответствующей диаграммы. На рис. 23.12 показаны результаты
выбора 1996 г.
Листинг 23.12 содержит полный исходный код для
этого примера.
Листинг 23.12. Использование слоев для
моделирования Web-страницы со вкладками.
<html>
<head>
<title>JavaScript Onleashed</title>
<script type="text/javascript"
language="JavaScriptl.2">
<! —
function showTab (idx) (
for (var i = 1; i <
document.layers.lergth; i++" {
if(document.layers[i].name !=
'Select'){
document.layers[i].visibility =
'hide';
I
1
document. layers [ " tab"'+idx] .visibility =
'inherit';
II—>
<. script>
<. fiead>
'body bgcolor="Silver">
AMAZING SCUBA GEAR
<i>
Sales History
</i>
</fi4>
'layer name="tab3" left=5 top=55^
<img src=" . /1994tab.gif">
</layer>
<layer name="tab2" left=5 top=55^
--img src=" . /1995tab.gif ">
</layer>
-^layer name="tabl" left=5 tap=55^=-
<img src="./1996tab.gif">
-'/ layer>
flayer name="tabO" left=5 top=55^=-
-'img src="./1997tab.gif">
-^ /'layer^=-
-'layer name="select" left="500" top="55"
width="150">
<ceriter>
<P>
<i>
Select the year to view:
</i>
</p>
<form name="selectForm">
<select name="pickYear" size="l"
onchange="showTab(this.selectedlndex) ;
return false; " >
Слои
<option selected>1997</option>
<option>199 6</qption>
<option>l9 95</option>
<option>1994</option>
</select>
</fonrO
</center>
</layer>
</body>
</html>
я nit £ -ig. j. чС
; вмгМк*ПОКгГ.ЛШсаре
AMAZfKO SCUBA GEAR S4to Wtery
НЯ» 1396 i ЭИ [ИЯ i
=^fel«"(IntjtlllQri^['
-№<d
3.J.. M,-fc ,■*■
РИСУНОК 23.12. Слом с диаграммой для 1996 г. сделан вмдмыны.
Пример со сталкивающимися шариками
Во втором примере будет создаваться
мультипликационный эффект. Для получения эффекта
сталкивающегося шарика воспользуемся тремя разными
изображениями в формате GIF, которые будут содержать картинки
зеленого, красного и разноцветного шарика. Поместим
каждый из шариков в отдельный элемент <1ауег>:
<layer name="greenball" width="13" height="13"
lei:t="5" top="l">
<img src="./grnball.gif">
<'layer>
<layer name="redball" width="13" height="13"
left="25" top="135">
<img src="./redball.gif">
</layer>
<layer name="colorball" width="13" height="13"
left="255" tc^="115">
<img src=" . /clrball .gif ">
</layer>
Гкраметры width и height элементов <1ауег> имеют
те же самые размерности, что и GIF-изображения.
Параметры left и top — случайные числа в пределах
картинки, которые произвольно задаются как 400 пикселов
по горизонтали и 200 пикселов по вертикали. Они
будут служить в качестве координат начального
положения шариков.
Глава 23
После элемента <script> внутри раздела <head>
документа можно определить ряд глобальных
переменных, используемых в подпрограммах мультипликации.
Для каждого из шариков применяется метод offset()
объекта Layer, который позволяет изменять позицию
слоя с использованием диапазона изменений значений
х и у, или delta. Запишем для каждого шарика пару
значений диапазона изменений х и у:
var
var
var
var
var
var
grnX =
grnY =
redX =
redY =
colorX
colorY
2;
2.5;
2;
~2;
= 2;
= 4
Таким образом, при использовании в offset() эти
переменные требуют, чтобы зеленый шарик сместился
влево на 2 пиксела и вниз на 2.5 пиксела, красный
шарик — влево на 2 и вниз на 2 пиксела, а разноцветный
шарик — влево на 2 и вниз на 3 пиксела.
Определим также в сценарии, что новое свойство
объекта Window с именем flickerFree будет установлено
в true. Это свойство помогает обеспечить эффекты
более плавной мультипликации:
window.flickerFree
true;
Перед работой с элементами <1ауег> в данном
JavaScript-коде потребуется присвоить переменным
ссылки на каждый слой. В разделе <body> документа
добавим новый элемент <script> и поместим в него
следующий код:
<SCript type="text/javascript"
language="JavaScriptl.2">
<]—
var green = document.layers["greenball"];
var red = document.layers['redball'];
var color = document.layers['colorball']
JJ ->
</script>
Используя массив document.layers, можно
обращаться к каждому из слоев по имени и присваивать их
переменным, представляющим слои в сценарии.
ПРИМЕЧАНИЕ
В отличие от опре^епенных ранее числовых
переменных, нельзя размещать этот код установки значения
объекта Layer в разделе <head> сценария,
поскольку он ссылается на элементы, определенные позже,
в разделе <body>. Следовательно, этот код
присваивания должен обрабатываться после определения
элементов <1ауег>.
Определение функций мультипликации
Следующий шаг связан с созданием сценария,
фактически выполняющего мультипликацию. Изначальная
^■■ШН Технологии программирования на динамическом HTML
БШ] Часть IV
цель довольно проста: отобразить каждый шарик в
движении, опираясь на ранее определенное значение
offset(). Однако, в действительности кроме определения
этих основных функциональных возможностей
потребуется проделать очень многое.
Потребуется отслеживать координаты х и у
каждого шарика перед каждым обращением к offset(). Если
этого не делать, шарики очень быстро покинут
границы изображения 400x200 и границы самого
HTML-документа. Поэтому, если свойство left объекта Layer
находится между 0 и 400, а свойство top — между 0 и 200,
то метод offset() вызывается. Однако если слой не
соответствует этим условиям, процесс выполняется в
обратном направлении, имитируя рикошет шарика.
Посмотрим, как это реализуется в сценарии. Будут
использоваться две функции:
• startTlieBallRollingO — основная рекурсивная
функция, ответственная за вызов каждого шарика для
целей мультипликации. Она также выполняет
необходимые корректировки значений смещения, когда
шарик покидает границы изображения.
• iiioveBall() — отвечает за перемещение шарика в
рамках изображения. Она анализирует свойства top и left
шарика и вызывает действие offsetO, если они
удовлетворяют условиям. Если условия не
выполняются, эта функция обращается к StartTheBallRoIlingO,
которая корректирует смещение.
Поскольку moveBall() вызывает StartTheBallRoBingO,
возможно, имеет смысл сначала рассмотреть moveBall(),
а затем вернуться к StartTheBallRoIlingO. Функция
iiioveBaB() получает три аргумента: ссылка на объект
шарика, и его значения смещения по х и у. Как
упоминалось ранее, она проверяет свойства left и top шарика
и реализует один из следующих пунктов:
Выполняет offsetO и возвращает значение 'ok' в
StartTheBallRoIlingO.
Возвращает в вызвавшую функцию значение
'topBoundary', обозначая, что свойство top не
удовлетворяет условию.
Возвращает в вызвавшую функцию значение
'leftBoundary'. обозначая, что свойство left не
удовлетворяет условию.
Код приобретет следующий вид:
function moveBall (ball, offsetX, off setY) {
if( ball.left < 400) &S (ball.left > 0)){
It (ball top < 200) SS (ball top > 0) (
ball.offset(offsetX, offsetY);
return ' ok' ;
}else{
return ' topBoundary ■ ;
}
}else{
return ' leftBoundary * ;
}
}
Теперь рассмотрим функцию, которая обращается к
moveBallO-Для каждого из трех шариков StartTheBallRoIlingO
вызывает moveBallO и затем анализирует результаты
выполнения. Для зеленого шарика код выглядит так:
if (moveBall (green, grnX, grnY) ==
1topBoundary'){
grnY = 0-grnY;
7reen.offset(grnX, grnY);
}else{
if(moveBall(green, grnX, grnY) =
'leftBoundary'){
grnX = 0-grnX;
green.offset(grnX, grnY);
1
I
Если moveBall() завершилась успешно и вернула
значение 'ok' сценарий переходит на следующий шаг.
Однако, если возвращается 'topBoundary' (или 'leftBoundary'),
это означает, что необходимо подкорректировать
значение смещения по у (либо по х). Для этого
неудовлетворительное значение смещения заменяется на новое,
делая его равным нулю минус его текущее значение. Затем
выполняется действие offsetO, которое смещает шарик
в обратном направлении. Код совершенно аналогичен
для красного и разноцветного шариков:
if(moveBall(red, redx, redY) == 'topBoundary'){
redY = 0-redY;
red.offset(redX, redY),
)else{
if (moveBall (red, redx, redY) ==
'leftBoundary'){
redx = 0-redX;
red.offset(redX, redY);
)
if(moveBall(color, colorX, colorY) ==
* topBoundary')(
colorY = 0-colorY,-
color.offset( colorX, colorY ) ;
)else{
if (moveBall( color, colorX, colorY) ==
'leftBoundary')(
colorX = 0-colorX;
color.offset( colorX, colorY);
I
)
Наконец, вызывается setTimeont(), чтобы сделать
этот полный процесс рекурсивным:
setTimeout ("StartTheBallRoIlingO " , 2)
Заключительный шаг связан с фактическим
запуском шарика за счет установки StartTheBallRoHuigO в
качестве обработчика для события on Load окна:
<body onload="startTheBallRolling()">
После определения функний мультипликации код
следует протестировать. На рис. 23.13 и 23.14 показан
результирующий мультипликационный эффект.
Листинг 23.13 содержит полный исходный код
демонстрационной версии BallsGoneWild.
grnY = 0 - grnY;
green.offset(grnX, grnY);
}else{
if (moveBall (green, grnX, grnY) ==
'leftBoundary'){
grnX = 0 - grnX;
green.offset (grnX, grnY) ;
X
РИСУНОК 23.13. Шарики в движении.
Листинг 23.13. Мультипликационные эффекты на
Web-странице.
<html>
<head>
<title>JavaScript Unleashed</title>
<script type="text/javascript"
language^"JavaScriptl. 2">
<!--
// Глобальные переменные
var grnX = 2;
var grnY = 2.5;
var redX = 2;
var redY = -2;
var colorX = 2 ;
var colorY :i;
.// Эффекты плавной анимации
window. flickerFree = true;
function moveBall (ball, offsetX, offsetY) {
if ((ball.left < 400) ьь (ball.left
if ((ball.top < 200) ss (ball.top :
ball.offset(offsetX, offsetY) ;
return ' ok ' ;
)else{
return ' topBoundary ' ;
}
}else(
return ' lef tBoundary ' ;
0)){
0) ) {
I
function startTheBallRollingO (
if (moveBall (green, grnX, grnY) =
' topBoundary' ) (
if (moveBall (red, redX, redY) ==
'topBoundary')(
redY = 0 - redY;
red. offset (redX, redY) ;
)else(
if (moveBall (red, redX, redY) ==
1 leftBoundary' * {
redX = 0 - redX;
red.offset(redX, redY) ,
>
)
if (moveBall (color, colorX, colorY) ==
'topBoundary' ) {
colorY = 0 - colorY;
color, offset ( colorX, colorY ) ,
)else{
if (moveBall ( color, colorX, colorY)
'leftBoundary' ) (
colorX = 0 colorX;
color, off set ( colorX, colorY) ;
}
.1
)
setTimeout ("startTheBallRollingO" , 2)
</script>
</head>
<body onload="startTheBallRolling()">
<layer name="greenball" width="13"
height="13" left="5" top="l">
<img src="./grnball.gif">
---.. layer>
<layer name="redball" width="13" height="13"
left="25" top="135">
<img src="./redball.gif">
</layer>
<: layer name="colorball" width="13"
height="13" left="255" top="115">
<imcr src="./clrball.gif ">
</layer>
<script type="text/javascript"
language="JavaScriptl.2">
<! —
var green = document.layers [ "greenball"] ;
var red = document.layers['redball'];
var color = document,layers['colorball'];
II—>
</script>
</body>
</html>
Технологии программирования на динамическом HTML
Часть IV
доан мм им • лщвдв
tr-f№»J
^i)AbV-'«b^twl/G '-J^* i
Резюме
Слои представляют собой одно из наиболее
значительных достижений в HTML за последние несколько лет.
Они позволяют выйти за рамки последовательного
текстового процессора и погрузиться в мир HTML,
графики и дизайна. JavaScript эффективно работает со
слоями, обеспечивая разработчикам полный контроль их
поведения. Результаты получаются великолепными.
РИСУНОК 23.14. Шарики в " •йствии.
Меню и панели инструментов
DHTML i
В ЭТОЙ ГЛАВЕ
■ Начальные предположения
■ Проектирование меню
■ Создание инструментальных панелей
Знание языка JavaScript и способов его
практического применения — две совершенно разные вещи.
Многие способны выучить язык программирования, понять
его синтаксис и семантику. Однако очень немногие
достигают действительного мастерства в применении
своих знаний для решения практических задач, т.е. при
создании реальных приложений.
Динамический HTML (DHTML) впервые появился
в четвертых версиях браузеров Internet Explorer и Netscape
Navigator. Оба эти браузера поддерживали JavaScript,
слои и таблицы стилей, необходимые для
проектирования страниц, у которых полный набор динамических
свойств постоянно находился на исходной
Web-странице. Именно это способствовало возникновению
DHTML, и с тех пор такие технологии применяются на
многих сайтах, придавая им яркость и усиливая функ-
циональныевозможности.
В этой главе рассматриваются два примера DHTML-
приложений. Первый пример — меню, а второй —
инструментальная панель. Как и в повседневной
практике, придется решить, какие браузеры поддерживать и
выяснить все отличительные особенности работы
браузеров в рамках реализации примеров.
Начальные предположения
Перед началом создания проекта DHTML возникает
несколько вопросов, которые задает себе каждый
разработчик. Некоторые из них обсуждались в главе 23, тем
не мгнее, имеет смысл еще раз напомнить о них:
Какие браузеры требуется поддерживать? Помните,
что в настоящее время только Navigator 4+ и Internet
Explorer 4+ обладают всеми функциональными
возможностями, необходимыми для создания DHTML-
приложений.
Требуется ли адаптировать код под неподдержива-
ющие браузеры?
Насколь изящно требуется обходить возникающие
проблемы в неподдерживающих браузерах?
Вопросы подобного рода уже обсуждались ранее,
поэтому детализация здесь будет излишней. Стоит лишь
напомнить, что выбор поддерживаемых браузеров
является важным шагом, который определяет способы
проектирования не только текущих версий программы, но
также и будущих ее версий.
В дополнение к этим вопросам разработчик также
должен задаться вопросом:
Возможно ли сделать это?
Как выглядят планы на будущее?
Существует ли лучший путь для реализации
проекта?
Выяснение возможностей
Этот вопрос зачастую игнорируется. JavaScript
воспринимается как простой язык, которому может кто
угодно научиться. Это могло бы быть верным для версии 1.0
или 1.1, но 1.2 преподносит нечто совершенно новое.
Начиная с этой версии, возможности JavaScript
существенно возросли, обеспечивая большее количество
объектов для поддержки DOM-модели, а также
соответствующие XML-технологии. Создание
DHTML-приложения не настоль просто, может показаться на первый
взгляд, а различия в версиях браузеров превращают этот
процесс в весьма утомительную задачу.
Планы на будущее
Еще одно соображение, которое необходимо учесть, —
это планы на будущее. Netscape и Microsoft выпускают
ЯИМВ Технологии программирования на динамическом HTML
EJJEJ ЧаспГ IV
браузеры каждый год, а то и чаще, и это означает, что код,
скорее всего, придется обновлять достаточно часто.
В планах на будущее неплохо было бы рассмотреть
все — от готовящихся стандартов до новых версий
браузеров. Нужно также стараться оставаться на гребне
волны новых технологий, дабы иметь сведения о всех
возникающих проблемах и ошибках программ в различных
версиях. Проектирование DHTML-приложений —
трудная задача, однако после выполнения работы
вознаграждение не заставит себя долго ждать.
Учет API
В заключение стоит обсудить тему использования в
JavaScript интерфейса программирования приложений
(Application Programming Interfaces, API). При создании
DHTML в определенный момент может возникнуть
мысль: "Должен же существовать более простой способ
решения данной задачи; кто-то наверняка уже должен
был делать это ранее".
Скорее всего, мысль верна Выгодная сторона JavaScript,
который ни что иное как язык программирования для
Internet, состоит в том, что можно обнаружить (если
немножечко поискать), что другие разработчики уже
создали требуемые функции, например, реализующие
перемешение слоев. Кроме того, можно обнаружить, что
многие разработчики уже создали объекты наподобие
каскадного меню или объекты графического редактора.
Не стоит в очередной раз изобретать велосипед, если
обнаруживается, что кто-то уже написал нужный вам
код; просто изучите этот код и воспользуйтесь им при
создании своего сайта.
СОВЕТ
Приложение А содержит ссылки на хорошие сайты,
которые содержат полезную информацию по JavaScript
API.
Проектирование меню
При проектировании DHTML-меню возникают
достаточно очевидные вопросы, например, какие меню и
пункты в нем необходимы, и какие должны
обеспечиваться функциональные возможности. К тому же,
потребуется решить вопрос по поводу оформления меню.
Какие планируются цвета и размеры? Насколь длинной
должна быть строка меню, и вообще, где меню будет
отображаться?
Все это вопросы, на которые придется ответить,
чтобы потом применять соответствующее форматирование
и стили для создания желаемого вида сайта. Для
нашего примера меню поставим перед собой следующие
цели:
Работа только с Internet Explorer.
Серая строка меню в верхней части окна браузера.
• Две опции меню: "Go" и "Help".
Меню "Go" будет содержать три ссылки на
популярные сайты для разработчиков под браузеры Netscape
и Microsoft.
Меню "Help" будет содержать один пункт "About",
после выбора которого должно отображаться
диалоговое окно с информацией о меню.
Диалоговое окно "About" будет содержать
изображение и кнопку, закрывающую окно.
Определение слоев
Первая вещь, которая будет сделана в плане создания
нашего меню — это определение слоев и самой строки
меню. Для этого можно использовать комбинацию
HTML и CSS. В HTML будут применяться
дескрипторы <div> для задания слоев и дескрипторы <t;ible> для
определения диалогового окна. Будут также
использоваться дескрипторы <а> для работы с событиями
щелчков на пунктах меню. Код раздела <body>,
реализующий меню, содержится в листинге 24.1. .
Одним из важных моментов при создании любого
JavaScript-приложения является повторное
использование кода; в этом примере повторно используется часть
кода из главы 23. Читатель увидит несколько знакомых
имен функций и функциональных возможностей.
Поскольку планируется, что меню будет поддерживаться
только в Internet Explorer, код выяснения типа браузера
здесь отсутствует, однако если требуется поддержка
Navigator, требуется заменить функцию на ту, которая
использовалась в листинге 23.9 главы 23.
Как видно из листинга 24.1, для каждого из слоев
определяются id и name. Это позволяет применять
стили так, чтобы можно было управлять видом и
представлением этих слоев. Для установки стилей требуется
несколько определений. Ниже приведен соответствующий
список:
• Запрещение подчеркивания дескрипторов <а>,
Определение цвета и расположения строки меню.
Определение цвета и расположения пунктов "Go" и
"Help" в меню.
Определение цвета, расположения и сокрытия "Go"
и "Help" в меню.
Определение цвета, расположения и сокрытия
диалогового окна "About".
Листинг 24.2 содержит определения таблиц стилей,
которые потребуются для форматирования.
Меню и панели инструментов DHTML
Глава 24
Листинг 24.1. Определение слоев в HTML
<body bgcolor="#ffffff" link="#000000" vlink="#000000" alink="#000000" onload="checkBrowser()">
<div name="menubar" id="menubar"X/div>
<div name="go" id="go">
<a href=" javascript:void(0) "
onmousedown="changeState('helpmenu','hidden'); changeState('gomenu','visible')">
Go</a>
</diw>
<div name="help" id="help">
<a href=" javascript: void (0) "
onmousedown="changeState ( ■ gomenu ' , ' hidden ' ) ; changeState ( ' helpmenu ' ' visible ' ) '">
Help</a>
</div>
---•div name=" gomenu" id=" gomenu ">
- ahref="http: //developer, netscape . com" >
DevEdge--: /a:-
<i\hr size="l">
<a href="http: //www.mozilla.orgM>
Mozilla.org</a>
<:hr size="l">
-a href="http://msdn.microsoft.com">
MSDN</a>
</ctv>
<div name=" helpmenu" id="helpmenu">
<a href=" javascript: void (0) " onclick="changeState{ 'helpmenu', 'hidden');
changeState( ' about ' , 'visible ' ) ">
About. . .</a>
</dLv>
-div name="about" id="about">
<table border="0">
■:tr-.
<td>
<img src="info-icon.gif"width="32" height="32">
</td>
<td>
This DWJMb Menu хтае: created by R. Allen Wyke for JavaScript
Unleashed.
</td>
-: /tr>
<tr>
- td colspan="2" align="right">
<form name="f orml">
-input type="button" value="Close" onclick="changeState('about' 'hidden')">
<form>
</tr>
</table>
</div>
</body>
Листинг 24.2. Определение стиля для меню.
<style type="text/css">
<! —
/* Глобальные стили */
а{
text-decoration: none;
)
/* Свойства устанавливающие фон целого меню */
#ntenubar{
background-color: ScOcOcO;
left: О;
position: ajosolute;
By
top: о ;
width: 10(№;
/* Свойства меню */
#help(
background-color : ttcOcOcO;
position: absolute;
right: 0;
top: 0;
}
#go{
background-color: ttcOcOcO ;
left: 0;
Технологии программирования на динамическом HTML
Часть IV
position:
top: 0;
absolute;
}
скрытого вплоть
/* Свойства активного меню,
по щелчка */
#gomenu {
background-color: ttcococO;
left: 10;
position: absolute
top: 20;
visibility: hidden;
width: 80 ;
}
tthelpmenu (
background-color: #c0c0c0;
right:
Imposition: absolute;
top: 20;
visibility: hidden;
width: 80;
)
/* Свойства диалогового окна About */
«about{
backqround-color: gray;
border: 2px solid black;
height: 50;
left: 100;
position: absolute;
top: 50;
visibility: hidden;
vertical-align: left;
width: 200;
}
-->
</style>
Теперь, когда практически все ясно и слои
определены, самое время воспользоваться динамизмом DHTML.
Обработка действий
Первая вещь, которую необходимо сделать в
динамической части меню — это выяснить, является ли браузер,
выполняющий запрос, браузером Internet Explorer. Для
этого запишем короткий оператор if, который будет
выдавать сообщение для браузеров, отличных от Internet
Explorer:
if(navigator.userAgent.indexOf("MSIE") == -1)(
alert("This menu is supported in Internet
^Explorer")
window.back(J;
J
Несложно заметить, что если браузер — не Internet
Explorer, код выдаст сообщение, которое отправит
пользователя обратно на страницу, с которой он
пришел.
Как и в коде из главы 23, объявляется ряд
глобальных переменных String для установки layer и style для
браузеров Internet Explorer. Значения этих переменных
устанавливаются после загрузки страницы в функции
checkBrowser(), которая выглядит следующим образом:
var layer
var style
new String() ;
new String () ;
function checkBrowser(){
layer = " . all" ;
style = " . style" ;
}
Последняя необходимая часть кода — обработка
сокрытия и отображения слоев. Если посмотреть
внимательнее, можно увидеть, что это — тот же самый код,
который применялся в главе 23, только немного
упрощенный.
function changeState(layerRef, state){
■eval ("document" + layer + " ['" + layerRef +
"']" + style + ".visibility = '" + state +
');
1
Это завершающий код части <script> проект ируемо-
го меню. Полностью эта часть приводится в листинге
24.3.
Листинг 24.3. Код для реализации меню.
«script type="text/javascript"
language="iJavaScriptl. 2">
<! —
// Глобальные переменные,
var layer = new S tring () ■
var style = new StringO/
// Это браузер Navigator?
if(navigator.userAgent.indexOf("Nav"J \- -1)(
alert ("?his menu is not supported in
-•Navigator") ;
window. back () ;
I
// Установка переменных слоя и стиля,
function checkBrowser () (
layer = ".all";
style = " . style" ;
)
/ / Изменить состояние.
function changeState(layerRef, state){
eval ("document" + layer + •»[•" + layerRef +
"' ]" + style + " .visibilit = '" + state +
);
// — >
</script>
Использование меню
Как только написание кода для меню завершено
(листинг 24.4), его можно загрузить в браузер для
тестирования. Меню должно иметь вид, показанный на рис.
24.1. Как видно из рисунка, CSS позволяет размещать
пункты меню в самой верхней сроке окна браузера и
запрещать подчеркивание ссылок. Кроме того, стоит
обратить внимание, что определение элемента inenubar
позволяет изменять размеры и оставляет серый фон для
меню.
Go.-
Ш Jot-4Scrfpt ifnfeuhed - MicKUtift Internet Eipf
..№wr'je] СЛТЕМР\76ЭХ24_(_СМ html
SiS?
I
I
;3 ^"-j
"71553
РИСУНОК 24.1. Меню, загруженное в браузер.
Листинг 24.4. Полный исходный код реализации
меню.
<html>
<head>
--trtleXJavaScript Unleashed</title>
-'script type=" text/javascript"
language="JavaScriptl.2">
-c! —
// Это браузер Navigator?
if (navigator .userAgent. indexOf ("MSIE")= -1) [
alert ("This menu is supported m internet
"Explorer" ) ;
window . back ( ) ;
}
// Глобальные переменные
var layer = nev7 String () ;
var style = nev^ Strmg () ;
/.' Установка переменных слоя и стиля,
timetrcn checkBrowser () (
"ayer = ".all";
style = " . style" ;
"■)
// Изменить состояние.
function changeState (layerRef, state){
eval ("document" + layer +"[■" +
layerRef +"']"+ style +
".visibility = ■" + state + "'");
)
//—>
</script>
<style type="text/css">
<! —
/* Глобальные стили */
Меню и панели инструметтн DHTML
Глава 24
text-decoration: none;
J
/* Свойства установки фона целого меню *.'
ttmemibari
background-color: #сОсОсО;
left: 0;
position : absolute;
top: и ;
width: 100%;
}
/* Овс-йства меню */
#helP{
background-color : #c0c0c0;
position: absolute ;
right : 0;
top: 0 ;
1
#go{
background-color: #c0c0c0 ;
left:
Opposition: absolute;
top : 0 ;
}
/* Свойства активное меню, скр-ыто-го-
вшъоть до- щелчка */
ttgoone u{
background-color: #c0c0c0;
left: 10;
positron: alivsolute;
top: 20;
visibility: hidden;
width: 80;
)
tthelpmenu {
backgr ound-color : #c0c0c0;
rrght: 10;
posrtrc i: aloso-lute;
top: 20;
vrsrlorlrty: hidden;
width: 80;
J
/* Свойства дмалоповопо окна About */
#about|
background-color: gray;
L-order: 2px solrd black;
herght: 50 ;
left: 100;
posrtron: -alivsolute;
top: 50;
vrsrlorlrty: hrdderi;
vertical-align: left;
wrdth: 200;
)
^/style>
--/head:--
-body bgcolor="#ffffff" link="#000000"
vlink=" #000000" alink="#000000"
onload="checkBrowser ()">
--drv name="menubar" id="menubar"x/div>
---drv name="go" id="go">
Технологии программирования на динамическом HTML
Часть IV
<а href="javascript: void(O)"
onmousedown="changeState('helpmenu','hidden');
changeState(■gomenu', 'visible') ">
Go</a>
</div>
<div name="help" id="help">
<a href =" javascript: void (0) "
onmousedown="changeState( ' gomenu' , 'hidden' ) ;
changeState ( 'helpmenu', 'visible'} ">
Help</a>
</div>
<div name="gomenu" id="gomenu">
<a4ref ="http : //developer, netscape . com">
DevEdge</a>
<hr size="l">
<a href="http: //www.mozilla.org">
Mozilla. org</a>
<hr size="l">
<a href ="http: //msdn. microsoft. com">
MSDN</a>
</div>
<div name="helpmenu" id="helpmenu">
<a href="javascript:voxd(0)"
onclick="changeState('helpmenu','hidden');
changeState('about' , 'visible')">
bbout. .</a>
</div>
<div name="about" id="about">
<table border="0">
<tr>
<td>
<img src="info-icon.gif" width="32"
height="32">
</td>
<td>
Ibis DHTML Menu was created by R.
Allen Wyke for JavaScript
Unleashed.
</td>
</tr>
<tr>
<td colspan="2" align="right">
<form name="forml">
<input type="button" value="Close"
onclick="changeState{'about', 'hidden') ">
<form>
</tr>
</table>
</div>
</body>
</html>
После щелчка на пункте меню "Go" в левом верхнем
углу всплывает меню ссылок на сайты. Как показано на
рис. 24.2, эти URL-ссылки отображаются и в строке
состояния браузера.
Последним пунктом меню является пункт "Help".
При нажатии на него появляется опция "About", в
результате выбора которой отображается диалоговое окно,
показанное на рис. 24.3.
I: ^ :<£'
v - и' UhfcniHorf Microsoft EvpfetiH
II Ш 'Леи Favfflte ' И
Mini |gj nWE4POTK2<_L[W ■*•<
"1
J-A>
I
Id
|}£^Глы355м&г
ill
Ч к ое^"=[,
РИСУНОК 24.2. Щелчок Ш пунктеменю "Go'
1 f\ JavaScript U nluthad • Miciototl Intunel Ешркмзд
i Be и * i j
i . л^щтт^ ._
!jiij*ii.<j*JC:«EMFV7KK2< IC'htnJ
.- . Я ■
Jfr'
M> p |
■Ш
. i.
)C
1^Г^ТпПП
ga
1
■!
* i
: fcil
4
РИСУНОК АЗ.Диаюговс 'окно "About".
Описание дополнительных возможностей
Теперь, когда создано меню, несомненно, захочется
расширить его возможности. Ниже приведен список
пунктов, после реализации которых можно получить
усовершенствованные возможности для создания ваших
собственных DHTML-меню. Можно также посетить
са'йт DcvEdgc Netscape (http://developer.netscape.com),
где имеется свободный доступ к объекту Menu.
Поддержка браузера Navigator.
• Щелчок вне области всплывшего меню должен
закрывать его.
Изменение позиции диалогового окна "About".
Создание каскадных меню.
Создание инструментальных панелей
Создание инструментальных панелей — одна из лучших
вещей, которой можно научиться, имея дело с DHTML.
При этом, вероятно, придется задействовать все свои
способности, чтобы заставить инструментальную панель
работать и взаимодействовать с другими
инструментальными панелями желаемым способом. Формирование
инструментальной панели требует не только
использования JavaScript, но также CSS и слоев. Ключевая
проблема состоит в определении внешнего вида
инструментальной панели и способов ее функционирования.
Затем можно приступать к проектированию
размещения, кода и стиля.
Применение событий
Первое, что может потребоваться при проектировании
инструментальных панелей — это события. В
приложении, подобном браузеру, при нажатии кнопок и
пересечении их курсором мыши видно, что эти события
вызывают изменения состояния кнопки.
Для начала стоит построить инструментальную
панель, годобную инструментальной панели браузера. Эта
панел]: будет выглядеть и функционировать как новые
инструментальные панели из Internet Explorer 3+ и
Navigator 4+.
Что должно происходить?
Первое, что необходимо, — это задокументировать, что
должно происходить в инструментальной панели.
Откройте окно браузера и понаблюдайте, как изменяется
состояние кнопок при проходе по ним мышкой и при
нажатии на них. На рис. 24.4—24.6 показано, изменение
состояний кнопок в браузере Navigator 4.
PSVh .n<0B[HiI-9iUOS Hclicac?
E*. £■• S0t'j'S'-at"**!'a*
\ "*t '&»Cd*U t/UJa=j* aboti
HHx
*- (J]t УЗй'гЙемич!1 ,
Netscape? Navigator 4№ j
tlrtg " i-И J°ie and tet ■!'
NFTSCAFE ^ "Ги
4»Jv ■ i^.DOn* "- '
Itrtdn
т. ^
J i---' <*' *.. ;
РИСУНОК 24.4. Обычная инструментальная панель.
Н есложно заметить, что существуют три состояния,
которые потребуется смоделировать. Когда
пользователь переводит курсор мыши на кнопку, необходимо
Меню и панели инструментов DHTML
Глава 24
сгенерировать событие для выполнения определенной
задачи. Кроме того, необходимо восстановить
первоначальное состояние кнопки, когда пользователь убирает
мышку с кнопки без нажатия на нее.
f*>. 5« i .. Co nu> Hub
Netscape Navigator 4.08
the 1 в: "a it Md eg] to ail fc
IN С 1 i}\^ i С cfHetiwpe ofavthfrUc ed '
tit-it; artdottwi couoifiei" M*Uc*Mt*ilog,j tad Мтсщ*
о 4 m4 «/vice выше acflai itttd< " t *fK*t*f ep*
i
is?!-,
ЬсИ1»
РИСУНОК 24.5. Прохождение мышки над кнопкой.
& V.iion 4 <й |enl Ш30С - Nakcacn
.pi fa. gp шлодо Ни?
>. dt'Во* м4 i * Locawrii kj
Netscape* Navigator 4.08
1
P I9W-IS"
ivit, AH i
. unit rtadtadtgtcfclo dUttn i birow -a
/кг рТСУ" л P ^ tf*t! «pi «ю HtUMi N4 fltiDietttus *«dU4
°I4 С 1 О Vj 1\ 1 fWf^r'^Coiwaynic^onjCoiijefatiaii&JitUB
pUttl $uriUl*B,H*tW n 'fl.U OtftpUK .41*
РИСУНОК 24.6. Нажатие на кнопку инструментальной панели.
Что может происходить?
В перспективе совершенствования разработки под Web
могут быть созданы все необходимые функциональные
возможности для инструментальной панели. Существуют
события для перемещения курсора мыши на элемент и с
этого элемента, а также для нажатия и отпускания
кнопки. С помощью свойства Image.src, которое может
заменять одно изображение на странице на другое, можно
смоделировать перемещение курсора мыши и нажатие
кнопок. Это свойство обеспечит визуальные эффекты.
Для кнопок потребуется также выполнять
определенные задачи. Для этого будет использоваться событие
onClick в дескрипторе <а>. Если пользователь
нажимает на кнопку, щелчок захватывается и обрабатывается.
Ниже приведен список используемых кнопок вместе с
их функциями.
НВНН Технологии программирования на динамическом HTML
BUti Часть IV
• Back. Эта кнопка моделирует кнопку "Back" или
"Previous" браузера. Будут использоваться разные
методы для работы в Internet Explorer и Navigator с
целью демонстрации того, как можно создавать
нужные программы с учетом разных браузеров.
• Forward. Эта кнопка моделирует кнопку "Forward"
или "Next". Будут использоваться разные методы
для работы в Internet Explorer и Navigator с целью
демонстрации того, как можно создавать нужные
программы с учетом разных браузеров.
• Ноте. Эта кнопка моделирует кнопку "Ноте" в
браузерах Navigator. Internet Explorer данный метод не
поддерживает.
• Reload/Refresh. Эта кнопка моделирует кнопку
"Reload" или "Refresh" браузера, которая приводит к
повторной обработке и визуализации текущей
страницы. При помощи метода Date.getTime() будет
отображаться загрузка страницы.
• Find. Эта кнопка моделирует опцию меню Edit -»
Find, которая обеспечивает поиск текста в окне
браузера. Internet Explorer этот метод не поддерживает.
• Print. Эта кнопка моделирует кнопку "Print"
браузера — вызов диалогового окна Print для печати
текущей страницы.
В дополнение к перечисленным шести кнопкам,
будет также использоваться форма с текстовым полем,
которое позволяет вводить URL и щелкать на кнопке
"Go" для загрузки URL в окно браузера.
Теперь, когда выяснены все требования, приступим
к реализации приложения. Будет рассматриваться как
создание изображений, так и написание кода.
Описание проблем проектирования
Прежде чем приступать к написанию какого-либо кода,
следует принять несколько решений относительно
способов записи и хранения кода. Большинство
функциональных возможностей меню можно включить в HTML-
дескрипторы — не такое существенное увеличение
объема кода. Однако, функциональные возможности,
которые предоставляет пример, могут быть
задействованы и в другом месте, потому стоит прибегнуть к
более модульному подходу.
Хранение кода
До начала создания приложения необходимо решить,
где будет храниться код. Здесь следует опираться на то,
что именно конструируется. Для текущего приложения
весь код будет храниться в рамках HTML-документа.
Если сайт располагается во множестве мест, тогда код
лучше хранить во внешнем JavaScript-файле (с
расширением js).
Модульное программирование
Спланируем это приложение как можно более
модульным, чтобы код при необходимости мог
использоваться в другом месте. Для этого придется создать
множество функций, обрабатывающих информацию.
Для приложения можно выделить три различных
набора функциональных возможностей:
• Image State Change (Изменение состояния
изображения). Эта функция, вызываемая в методе rollImage(),
будет отвечать за изменение изображения при
перемещении на него курсора мыши либо при нажатии
кнопки.
• Button Processing (Обработка кнопки). Эта функция,
вызываемая в методе process(), будет выполнять
задачи, возложенные на кнопку. Когда пользователь
нажимает на кнопку, эта функция реагирует
соответствующим образом.
• URL Handling (Обработка адресов URL). Эта
функция, вызываемая в методе takeBrowser<), будет
брать данные, введенные в форму, и направлять
браузер в указанное расположение.
Создание изображений
В отличие от других приложений, для Web-приложения
потребуется обеспечить максимум компонентов,
которые могли бы погрузиться в любой интерфейс.
Помимо подобъектов объекта Form, необходимо создать все
собственные изображения и интерфейсные
компоненты. Из-за характера задачи также потребуется
обеспечить версии изображений для событий прохождения
курсора мыши по изображению и нажатых состояний
кнопок.
Ранее упоминалось, что кнопка на
инструментальной панели должна изменить свое состояние, при
перемещении по ней курсора мыши, а также в ситуации,
когда она нажата. Для работы примера возникает
необходимость в следующих изображениях:
• Normal. Изображение по умолчанию.
• Rollover. Значение по умолчанию, отображаемое с
белой рамкой толщиной в 1 пиксел слева и сверху и
серой рамкой толщиной в 1 пиксел справа и снизу.
• Pressed. Значение по умолчанию, отображаемое с
серой рамкой в 1 пиксел слева и сверху, и с белой
рамкой в 1 пиксел справа и снизу.
Написание HTML-кода
Первое, что будет создаваться — это HTML-ко I,
который содержит макет инструментальной панели.
Существует несколько компонентов для интерфейса
проектируемой инструментальной панели (см. рис. 24.7).
Меню и панели инструментов DHTML
Глава 24
ЕШ
^ а -а **. j5i л os
ИЯИ
.1 tiraO'™*-|Encec ft G^ here
•RcuJmfDaJc-- Ен »яг1 *d циГЭсси
,' . t. |Daqu«rt- Owe -v.".... ., :I,
a
РИСУНОК 24.7. Проектируемый интерфейс.
С целью упрощения будем использовать таблицы
для хранения и упорядочения кнопок. Таблица будет
содержать три строки с шестью ячейками в верхней
строке и по одной ячейке во второй и третьей строках.
Фон таблицы будет серый, а документа — белый.
Первая строка таблицы будет содержать
изображения, составляющие инструментальную панель. Каждое
изображение окружается дескрипторами <а>, чтобы
можно было перехватывать события нажатия мыши. В
настоящее время Navigator не позволяет использовать
такие события в дескрипторах <img>, хотя Internet
Explorer это разрешает, так что придется предусмотреть
некоторую кодовую оболочку. Ниже показан пример
одной ячейки изображения.
<td aLign="center">
<а href="javascript:process('back')"
onmouseup="rolllmage(' 0' ,'up') "
onmousedown="rollImage ('О1,1 down') "
onmouseout="rollImage (' 0' ' out' ) "
onmouseover="rollImage('0', over')">
<img border="0" src="back.gif" width="24"
height="24" alt="Back"X/a>
</td>
Листинг 24.5. HTML-часть панели инструментов.
Во второй строке инструментальной панели
содержится текстовое поле, в котором пользователь будет
вводить URL. Когда пользователь нажимает кнопку "Go",
браузер начинает загружать URL. HTML-код для этого —
простой дескриптор <form>. Кнопка использует
обработчик событий onClickO, чтобы вызвать функцию,
которая перенаправляет браузер на соответствующий
URL. Атрибут colspan применяется для корректного
размещения ячейки по ширине всей таблицы. HTML-код
выглядит так:
<td colspan="6">
<form name="netsite">
<b>
Location:
</b>
--input type="text" size="40" value="Enter a
LIRL here" name="where">
--input type="button" value="Go"
onclick="takeBrowser(this, form)">
</form>
</tcb>
Последняя строка всего лишь содержит результаты
вызова метода getTime() экземпляра объекта Date. Это
делается для того, чтобы пользователь мог видеть
работу кнопки "Reload". Когда пользователь нажимает
"Reload", числовое значение, отображаемое в этой
ячейке, изменяется, подтверждая фактическую перегрузку
страницы. HTML-код для этой строки следующий:
<td colspan="6">
Result of Date. getTime () (reload verification) •
<scripl type="text/javascript"
language="JavaScriptl.2">
<! —
document write ( (new Date(J) .getTime () ),-
II—>
</script>
</td>
Три строки в комбинации с дескриптором <body>
составляют всю интерфейсную часть инструментальной
панели. Листинг 24.5 показывает, что у нас уже
имеется к настоящему моменту.
<body gcolor="#ffffff">
<table border="l" cellpadding="5" cellspacing="0" align="center" bgcolor="#cOcOcO">
<tr>
<td align="center">
<a href=" javascript:process ( 'back') "
onmouseup="rolllmage('0','up')"
oratiousedown="rolllmage (' 0 ' , ' down' ) "
onmouseout="rollImage('0',"out")"
onmouseover="rolllmage(* 0','over')">
<img border="0" src="back.gif" width="24" height="24" alt="Back,,X/a>
</td>
<td align="center">
<a href="javascript:process('forward')"
onmouseup="rolllmage('1','up')"
оnmousedown="rolllmage(•1','down')"
onmouseout="rollImage(* 1','out *)"
onmouseover="rollImage('1','over')">
<img border="0" src="forward.gif" width="24" height="24" alt="Forward"X/a>
ЕЩ Технологии программирования на динамическом HTML
|| Часть |V
</td>
<td align="center">
<a href =" j avascript: process('home■)"
onmouseup="rolllmage(■2■,'up')"
onmousedown="rolllmage('2','down') "
onmouseout="rolllmage('2','out')"
onmouseover="rolllmage(' 2■,'over') ">
<img border="0" src="home. gif" width="24" height="24" alt="Home"X/a>
</td>
<td align="center">
<a href="j avascript-.document, location, reload ()"
onmouseup^'rollImageCS' , 'up')"
onmousedown="rolllmage('3','down■) "
onmouseout="rolllmage('3','out')"
onmouseover="rolllmage('3','over') ">
<img border="0" src="reload.gif" width="24" height="24" alt="Reload"X/a>
</t 1>
<td align="center">
<a href="javascript:process ('find')"
onmouseup="rollImage(' 4', 'up')"
onmousedown="rollImage(' 4' ,'down')"
onmouseout=" rolllmage (' 4 ' , ' out1) "
orunouseover="rollImage('4','over') ">
<img border="0" src="search.gif" width="24" height="24" alt="Search"X/a>
</td>
<td align="center">
<a ref="j avascript: process (' print')"
orunouseup=" rolllmage (' 5 ■, ' up')"
onmousedown="rolllmage (' 5' , ' down' ) "
onmouseout="rolllmage('5',■out')"
onmouseover="rollImage(' 5','over') ">
<img border=,,0" sre="print.gif" width="24" height="24" alt="Print"X/a>
</td>
</tr>
<tr>
<td colspan="6">
<form name="netsite">
<b>
Location:
</b>
<input type^'text" size="40" value="Enter a URL here" name="where">
<input type="button" value="Go" onclick="takeBrowser (this, form) ">
</form>
</td>
</tr>
<tr>
<td colspan="6">
Result of Date . getTime ( ) (reload verification) :
<script type="text/javascript" language="JavaScriptl .2">
<! —
document. write ( (neuDate () } . getTime () );
II—>
< ^script>
</td>
</tr>
</table>
</body>
Реализация rollover-эффектов для
изображений
Для реализации rollover-эффектов для изображений
используется объект Image, который, надо признать,
ограничивает применимость приложений до браузеров,
поддержзгоаюглдгх JavaScript 1.1. Прежде всего рассмот
рим свойство src, которое позволяет изменять
изображение. Как видно в HTML-коде из листинга 24.5, каж
дый нз дескр1пггоров <а>, обрамляющих изображение,
вызывает функцию rollImage(), которая будет
определена в данном разделе.
Вначале потребуется объявить все используемые
изображения. Поскольку планируется использовать
различные состояния, лучше всего сохранить их в масси
ве. Это позволит обращаться к изображениям в массиве
Меню и панели инструментов DHTML
и в документе с помощью тех же самых индексных
значений. Например, на первое изображение в документе
можно ссылаться через массив document.images таким
образом:
document, images [С]
Если хранить изображения версий "нажатия" и
"курсор понерх изображения" в двух разных массивах с
одной и той же индексацией [0], то для выполнения
подмены изображений в функцию можно передавать только
одну переменную позиции. Ввиду того что требуется
также восстановить предыдущее состояние изображение
(значение по умолчанию), возникает необходимость в
объявлении трех массивов. Ниже показан код для
создания этих массивов и для записи изображений в них:
// Массив для хранения изображений версий
// "нажатия"
var overling = new Array () ;
<>verlmg[0] = new Image (24,24) ,
overling [1] = new Image (24,24) ;
overling [2] = new Image(24,24),
overling[3] = new Image {24,24);
overling [4] = new Image (24,24);
overlmg [ ] = new Image (24,24) ,
II Массив для хранения изображений версий
l/ "курсор поверх изображения"
var downlmg = new Array () ,
downlmg[0] = new Image (24,24) ;
downlmg[1] = new Image (24,24);
downlmg [2] = new Image(24,24) ;
downlmg[3] = new Image(24,24);
downImg[4] = new Image(24,24);
downlmg [5] = new Image (24,24);
f/ Массив для хранения изображений по
,'/ умолчанию
var defaultlmg == new Array ();
defaultlmg[0] : new Image(24,24);
defaultlmg[l] :- new Image (24,24) ;
defaultlmg[2] = new Image(24,24) ,-
defaultlmg[3] -= new Image(24,24) ;
defaultlmg [4] •= new Image (24,24) ;
defaultlmg [5] = new Image(24,24) ;
// Загрузка over «-изображений
overlmg [ 0 ]. srс = "back-over.gif";
over!mg[l] .sic = "forward-over.gif";
overling [■>]. src = "home-over.gif";
overImg[3] .src = "reload-over.gif";
overlmg[4].src = "search-over.gif";
overlmg[5] .src = "print-over.gif";
// Загрузка dowi -изображений
downlmg[0].src = "back-down.gif" ;
downlmg[1].src = "forward-down.gif";
downlmg[2] .src = "home-down.gif" ;
downlmg[3].src = "reload-down.gif";
downlmg[4].src — "search-down.gif";
downlmg[5].src = "print-down.gif";
// Загрузка изображений ПО умолчанию
defaultlmg[0].src = "back.gif";
defaultlmg[l] .src = "forward.gif";
defaultlmg[2] .src = "home.gif";
Глава 24
defaultlmg[3].src = "reload.gif";
defaultlmg[4].src = "search.gif";
defaultlmg!5].src = "print.gif";
Сейчас необходимо определить функцию. Это
гораздо проше, чем можно было ожидать. Функция будет
принимать два параметра. Первый параметр — индекс
обрабатываемого изображения. Вызов функции,
содержащийся в дескрипторе <а>, передает числовое
значение, которое представляет его расположение в
документе. Например, для первого изображения потребуется
передать 0. для второго — 1 и т.д. Помните, что
нумерация этого списка начинается с нуля, поэтому
первому изображению соответствует индекс 0.
Второй параметр — это тип rollover-эффекта. Для
нашего примера возможны четыре типа: over, out, up и
down. Переданное значение анализируется в операторе
switch и выполняется соответствующая подмена
изображения с использованием свойства src экземпляров
объекта Image — как в документе, так и в массивах.
Полное определение функции выглядит следующим
образом:
function rolllmage(img,type){
switch(type)(
case "over":
document.images[ img] .src = overImg[img] .src;
break;
case "out":
document.images[img].src =
defaultlmg[img].src;
break;
case "up":
document.images[img].src =
defaultlmg[img].src;
break;
case "down":
document, images [img] .src = downlmg [img] .src;
break;
I
1
Приведенный код обеспечивает необходимую
реализацию rollover-эффектов для изображений.
Реализация поля адреса
Во второй строке примера для инструментальной
панели находится текстовое поле, которое позволяет
пользователю вводить URL, после чего нажимать "Go" для
переадресации браузера. Как было показано в HTML-
коде, эта кнопка обращается к функции takeBrowser()
и передает ей объект this.form. Как только функция
вызвана, она будет использовать переданную ей
ссылку на объект Form, присвоит ее переменной и
обратится к значению текстового поля. Затем для изменения
страницы, загруженной в настоящий момент в браузер,
задействуется свойство location.href, и, таким образом,
браузер переадресуется на введенный пользователем
новый адрес URL.
Технологии программирования на динамическом HTML
Часть IV
Эта функция не выполняет проверку ошибок,
поэтому, если пользователь вводит некорректное значение,
браузер просто сообщает о невозможности загрузки
страницы. Из показанного ниже кода видно, что к значению
текстового поля обращаются через имя поля,
определенное в атрибуте name.
function takeBrowser(ref){
var form = ref;
location.href = form. where. value ;
}
Обработка событий, связанных с кнопками
Последняя необходимая функция будет отвечать за
собственно обработку. Эта функция имя которой process(),
принимает один параметр. Параметр будет
вычисляться в операторе switch для шести возможных кнопок.
Кнопки "Find" и "Ноте" в Internet Explorer не
работают, поэтому необходимо возвращать сигнальное
диалоговое окно, сообщающее об этом факте. Существует
также ряд других функций, которые реализуются по-
разному в браузерах Navigator и Internet Explorer; им
также потребуется уделить внимание. Введем
переменную, которая будет сообщать о том, является ли
данный браузер браузером Internet Explorer. Это логическое
значение будет храниться в переменной isIE, которая
будет проверяться в первой строке кода функции. Код
для данной функпии выглядит следующим образом:
function orocess (item) {
var isll'" = new Boolean (navigator. userAgent.
indexOf ("MSIE") != -1) ;
switch(item){
case "find":
if (isIE) (
alert ("Internet Explorer does not
wsupport tliis method") ;
)else{
window.find();
I
break,
case "print":
window. print () ,°
break;
case "home":
if (isIE) {
alert ("Internet Explorer does not
wsupport this method") ;
)else{
window.home();
)
break;
case "reload":
document.location.reload();
break;
case "forward":
if(isIE){
history.forward();
}else{
window.forward();
I
break;
case "back":
if (isIE) (
history.back();
J else{
window back ();
)
break;
Проверка результатов
На данный момент рассмотрены все HTML- и JavaScript-
коды, поэтому теперь можно протестировать
полученное приложение. Окончательный код содержится в
листинге 24.6, а рис. 24.8 и 24.9 демонстрируют rollover-
эффекты для кнопок. При тестировании программы
наблюдайте за изменениями строки, содержащей
текущее время, она должна изменяться после щелчка на
кнопке "Reload". Результат нажатия на кнопки "Find" и
"Print" очевидны, поскольку при этом всплывают
диалоговые окна. Если требуется проверить кнопки
"Forward" и "Back", загрузите несколько страниц в
браузер, тем самым обеспечив переходы браузера вперед и
назад.
Листинг 24.6. Полный исходный код для инструментальной панели.
<html>
<head>
<title>JavaScript Unleashed</title>
<script type="text/javascript" language=
<• —
// Массивы для хранения изображений
var overling = new Array ( ) ;
'JavaScriptl. 2">
overlmgtO]
overling [ 1 ]
overling [2]
overling [3]
overling [4]
overling [5]
= new
= new
= new
Image(24,24)
Image(24,24)
Image(24,24)
Image(24,24)
Image (24,24)
Image(24,24)
var downlmg = new Array () ;
downlmg[0] = new Image (24,24) ;
downImg[l] = new Image (24,24) ;
1*еню и панели инструментов DHTML
Г. а 24
downImg[2] = new Image (24,24)
downImg[3] = new Image (24,24)
downImg[4] = new Image (24,24)
downImg[5] = new Image(24,24)
var defaultlmg = new Array () ;
defaultlmg[0]
defaultlmg[1]
defaultlmg[2]
defaultlmg[3]
defaultlmg[4]
defaultlmg[5]
пет/
пет/
Image (24,24)
Image(24,24)
Image (24,24)
Image (24,24)
Image(24,24)
Image (24,24)
Загрузха изображений в массивы
overlmg[0] . src =
overlmgfl].src =
overling [2] . src =
cverlmg[3].src =
cverlmg[4].src =
cverlmg[5] .src =
downlmg[0].src =
downImg[l].src =
OownImg[2] .src =
clowning [3] . src =
doT7r±lmcj [4 ] . src =
dovmImg[5] .src =
"back-over.gif";
"forward-over.gif";
"home-over.gif";
"reload-over.gif" ;
"search-over.gif";
"print-over. gif" ;
"back-down.gif";
"forward-down.gif" ;
"home-down.gif";
"reload-down.gif";
"search-down.gif";
"print-down. gif" ;
defaultlmg[0].src =
defaultlmg[1] .src =
defaultlmg[2].src =
defaultlmg[3].src =
defaultlmg[4].src =
defaultlmg[5].src =
"back.gif";
"forward.gi f"
"home, gif ",-
"reload.gif" ;
"search.gif";
"print.gif";
// Изменение состояния в -зависимости от пришедшего событии.
functionr oil Image (img,type) (
switch(type){
саж "over" :
document, images [img] .src = o-.'erlrr±g [rmg] . src;
break;
case "out" :
document, images [img] .src = defaultlmg [img] .src;
break;
саж "up" :
document, images [img] .src = defaultlmg [img] .src;
break;
case "down" :
document, images [img] . src = downImg[img] .src;
break;
}
// Обработка адреса URL, введенного в текстовом поле
function takeBrowser(ref)(
var form = ref;
location.href = form. where.value;
// Обработка нажатий кнопок
function process (item) {
var isiE = new Boolean (navigator .userAgent. indexOf ("MSIE") != -1) ;
switch(item){
case "find":
if(isIE){
alert ("Internet Explorer does not support this method");
}else(
window.find();
i
break;
case "print":
>
}
Технологии программирования на динамическом HTMI
Часть IV
window. print. ();
break;
case "home" :
if (isIE){
alert ("Internet Explorer does not support this method") ;
}else Г
window . home ( ) ;
>
break;
case "reload":
document.location, reload( ) ;
break;
ca^e "forward11:
if (isIE)i
history. forwardO;
}else{
window . forward () ;
}
break;
case "back" :
if(isIE){
history.back() ;
)else{
window. back () ;
}
break;
}
}
</script>
</lieach>
«body bgcolor="#ffffff">
<table border="l" cellpadding="5" cellspacing="0" align="center" bgcolor="#cOcOcO">
■:tr>
<;td align="center">
<a href="javascript:process( 'back') "
onmouseup="rollImage ( ' 0 ■ , ■ up ' ) "
onmousedown=" rolllmage ( ' О ' , ' down ' ) "
onmouseout="rollIinage ( • 0 ' , ■ out' ) "
onmouseover="rollImage( ' 0 ' , ' over ' ) ">
<img border="0" src="back.gif" width="24" height="24" alt="Back"X/a>
</td>
.;td. align="center">
ahref="javascript:process( ' forward') "
onmouseup="rolllmage ( ■ 1 • , ■ up ' ) "
onmousedown="rollImage ( ' 1 ■ , ' down' ) "
onmouseout="rollImage( ■ 1 ■ , • out' ) "
onmouseover="rollImage ( ■ 1 • , ' over ' ) ">
;imcr border="0" src=" forward.gif" width="24" height="24" alt="Forward"X/a>
</td>
<td align="center">
-:ahref=" javascript:process ( 'home') "
onmouseup="rollImage ( ' 2 ' , ' up ■') "
onmousedown="rollImage( ' 2' , ' down ' ) "
onmouseout= " rolllmage ( ' 2 ' , ' out' ) "
onmouseover="rolllmage ( ' 2 ' , ' over ' ) ">
;imcr border="0" src="home.gif" width="24" height="24" alt="Hoine"X/a>
</td>
<%& align="center">
:ahref=" javascript:process ( "reload") "
onmouseup="rolllmage ( " 3 ' , ■ up ■ ) "
onmousedown="rollImage ( ' 3 ' . " down' ) "
onmouseout="rollImage ( '3 ■ , ' out ' ) "
onmouseover="rolllmage ( ' 3 ■ , ' over ' ) ">
<img bordet="0" src="reload.gif " width="24"heights'^" alt="Reload"X/a>
</td>
<td align="center">
■eai href=" javascript -.process ( ■ find') "
ВЯ
Меню и панели инструментов DHTML
Глава 24
onmouseup="rolllniage('4','up')"
onmousedown="rolllmage('4','down')"
onmouseout="roHImage (' 4 • , ' out') "
onmouseover="rollImage(' 4' , ' over')">
<img border="0" src="search.gif" width="24" height="24" alt="Search"X/a>
</td>
<td align="center">
<a href="javascript :process( 'print') "
onmouseup="rolllmage('5',■up')"
onmousedown="rollImage('5','down')"
onmouseout="rolllmage(' 5','out')"
onmouseover="rollImage("5','over') ">
<img border="0" src="print.gif" width="24" height="24" alt="Print"X/a>
</td>
</tr>
<tr>
<td colspan= " 6 " >
<form name="netsite">
<b>
Location:
</b>
-=: input type="text" size="40" value="Enter a URL here" name="where">
<input type="button" value="Go" onclick="takeBrowser {this.form) ">
</form>
</td>
</tr>
<tr>
<td colspan="6">
Result of Date . getTime () (reload verification) :
<SClipt type="text/javascript" language="JavaScriptl.2">
<!--
document.write((new Date()).getTime());
II—>
</script>
</td>
<:/tr>
</table>
</body>
</html>
i >U 1 ifr ^ *&.
■ - . .-. .
I Of atrtrtK £ntec a URL hciz
(- \ a-eb r
* Ш
a
■ ' *■■
$£ jAvdSctipt Unluahed. Nflttt4«
Efc t*:"»w r tank Чф
!■ -ii»»-.^ imB.//iWIEHP/76J«J_L06l*ri
*" "* Ъ
Location: Enter a URL here
A,"
_ ^_
- О x
4\, В «ЗЯ
■*ff !'w. ntiKKl
^
0
Sf
РИСУНОК 24.8. Курсор мыши над кнопкой.
РИСУНОК 24.9. Нажатие кнопки инструментальной панели.
Резюме
В главе уделялось внимание подробностям, связанным
с реализацией DHTML на сайте. Полученные знания
помогут приступить к созданию динамических страниц
с использованием не только JavaScript, но также и
других HTML-элементов и CSS.
Взаимодействие с другими
технологиями
В ЭТОЙ ГЛАВЕ
■ Подключаемые модули браузера
■ Элементы управления ActiveX
■ Java-аплеты
■ LiveAudio
Вне зависимости от того, хорошо ли вы знакомы с
программированием на JavaScript или же пока
является новичком в этом деле, вы, скорее всего, еще не
раскрыли всех функциональных возможностей данного
языка. Web-разработчики знают, что существует
множество других технологий, таких как Java-аплеты и
элементы управления ActiveX, которые можно
использовать для усиления впечатления, производимого сайтом.
В главе рассматриваются несколько технологий
подобного рода, а также их использовании в JavaScript.
Некоторые из технологий предназначены только для
определенных браузеров, тем не менее, и они
являются допустимыми.
Подключаемые модули браузера
Современные браузеры собственными средствами могут
поддерживать содержимое всего лишь нескольких видов
файловых форматов, к которым относятся тексты
(включая HTML) и изображения. Однако для работы вне
Web-браузеров люди для решения различных задач
постоянно используют множество других файловых
форматов.
Например, большинство прикладных программ
обработки текстов имеют собственные файловые
форматы (например, формат .doc файла Microsoft Word), так
же дело обстоит и с приложениями электронных таблиц,
презентаций, мультимедиа и т.д. Если Web-браузер
поддерживает различные файловые форматы, появляется
возможность построения различного содержимого, в
любой момент доступного через Web, не говоря уже о
применении Internet для новых и увлекательных
способов представления информации.
Однако, для Netscape (или любой другой компании)
создание в браузере собственной поддержки всех
используемых файловых форматов было бы непрактичным
из-за слишком больших затрат денежных и временных
ресурсов. Так что для большинства браузеров решение
отдается в пользу технологии подключаемых модулей.
ПРИМЕЧАНИЕ
Хотя в главе обсуждаются различные техногогии, с
которыми JavaScript может взаимодействовать, здесь
не будет говориться о применении этих технологий на
Web-страницах. Например, не будет детально
рассматриваться использование дескрипторов <applet>,
<object> и <embed>, а также их атрибутов. Для
получения дополнительной информации по этой теме
посетите сайты Microsoft Developer Network (http://
msdn.microsoft.com) либо Netscape DevEdge (http:/ /
developer.netscape.com), а также сайт УЗС-консор-
циума (http://www.w3.org).
Подключаемые модули и MIME-типы
Подключаемые модули идентифицируют тип
передаваемых им данных в зависимости от MIME-типов.
Идентифицируя тип данных, подключаемый модуль может
выбирать соответствующий способ их обработки.
MIME является стандартом Internet, который
определяет способы передачи файловых форматов (не
текстовых) в почтовых сообщениях Internet. (Более
подробная информация может быть найдена в Internet Requests
For Comment (RFCs) 1521 и 1522.) Толчком для
создания упомянутого стандарта послужила необходимость
передачи через электронную почту не только
документов, содержащих простой текст. MIME теперь позволяет
прикладным программам электронной почты работать
с отформатированным текстом, файлами приложений и
другими типами файлов, расширяющих сообщения.
Стандарт MIME может обрабатывать любой файловый
формат, включая текст, PostScript, файлы изображений,
звуковые, видео- и сжатые файлы.
MIME-типы определяют тип содержимого и
специфический подтип различных файловых форматов. Это
стоит пояснить на примере.
MIME-тип для файлов с расширением .wav (Microsoft
audio) определяется как audio/x-wav. audio описывает
звуковой тип или категорию поддерживаемых файлов,
а х-wav — определенный тип файла (или подтип),
поддерживаемый с учетом требований браузера, для
интерпретации файлов .wav.
После начала работы браузер начинает
просматривать все установленные подключаемые модули и
присваивает MIME-типы соответствующим подключаемым
модулям, которые могут прочитать их. При выявлении
в процессе просмотра MIME-типа браузер загружает
присвоенный (или зарегистрированный) подключаемый
модуль в память, и MIME-тип обрабатывается этим
подключаемым модулем. MIME-тип может
отображаться одним их трех способов:
Встроенный (inline). Появляется на странице
вместе с другим содержимым. Размер области
подключаемого модуля определяется предварительно
установленными значениями параметров height и width
дескриптора, используемого для загрузки этого
подключаемого модуля.
Полный (full). Подключаемый модуль занимает все
окно браузера за исключением инструментальных
панелей.
Скрытый (hidden). Подключаемый модуль
выполняется в фоновом режиме (подобно некоторым аудио-
модулям).
Определение устанавливаемых
подключаемых модулей
Определение того, какие в клиентском браузере
установлены подключаемые модули и какие
поддерживаются MIME-типы, дает разработчику Web-страницы
множество возможностей по управлению содержимым,
предназначенным для отображения пользователям.
Например, один из сценариев разработки мог бы выглядеть
так: "Если пользователь имеет подключаемый модуль,
отображается страница со всеми соответствующими
MIME -типами, а иначе — альтернативное содержимое".
В большинстве браузеров (но только не в Internet
Explorer) JavaScript помогает выполнить это.
JavaScript-браузеры содержат два встроенных
объекта, которые дают весьма полезную информацию о
подключаемых модулях и MIME-типах, поддерживаемых
браузером клиента:
Взаимодействие с другими технологиями
navigator.plugins. Этот объект, представляющий
собой свойство объекта Navigator, — массив всех
подключаемых модулей, в настоящий момент
установленных в браузере клиента. Поскольку такой массив
фактически является подобъектом объекта Navigator,
он имеет следующие свойства:
name. Имя подключаемого модуля (например,
Shockwave).
filename. Имя файла подключаемого модуля.
description. Описание подключаемого модуля
(обеспечивается поставщиком модуля).
length. Количество элементов в массиве.
[...]. Массив объектовтипеТурев. которые может
прочесть подключаемый модуль.
navigator.mimeTypes. Это свойство, представляющее
собой подобъект объекта Navigator, — массив всех
mimeTypes, поддерживаемых в браузере клиента.
Подобъект имеет следующие свойства:
type. Имя MIME-типа (например, audio/x-wav).
• description. Описание MIME-типа
(обеспечивается постав шиком модуля).
• enabledPlugin. Подключаемые модули, которые
могут прочесть данный MIME-тип.
suffixes. Расширения имен файлов, с помощью
которых идентифицируются MIME-типы
(например, .wav для MIME-типа audio/x-wav).
Расширения отделяются друг от друга запятыми.
Объект Plugins
Используя эти объекты в сочетании с JavaScript,
можно довольно быстро определить, установлен ли
подключаемый модуль. Ниже приведен пример, в котором
выясняется наличие подключаемого модуля Macromedia
Shockwave. Если данный подключаемый модуль
присутствует, файл загружается и отображается. Если нет,
отображается альтернативная информация:
var DesiredPlugin =
navigator.plugins["Shockwave"];
// ссылка на имя объекта подключаемого модуля
if (DesiredPlugin) {
document. write ( ' <embed src="mymovie .dir"
—height="240" width="320">");
}else{
document.write (' <img src="movietitle.jpg"
b»height="240" width="320">" ) ;
)
Объект navigator.plugins также содержит метод refresh(),
который заставляет браузер находить все установленные
подключаемые модули и соответствующим образом
подстраиваться. Если с методом refresh() используется ар-
Технологии программирования на динамическом HTML
гумент true (например, navigator.plugui.refresh (true)), то
наличие нового подключаемого модуля регистрируется
без выхода и перегрузки окна браузера
СОВЕТ
При использовании navigator.plugins.refresh(true)
браузер перегрузит только страницы, которые изменяются
из-за изменения подключаемого модуля. Однако, по
умолчанию (если метод refresh!) не используется)
браузер перегружает все страницы, которые
содержат любые типы файлов.
Объект MimeTypes
Используя новый объект navigator.mimeTypes, можно
достаточно быстро определить, поддерживает ли
браузер клиента определенный MIME-тип. В следующем
примере выясняется, поддерживает ли браузер MIME-
тип application/x-director (для кинофильма Macromedia
Director Shockwave). Далее следует логическое
продолжение, как в предыдущем примере:
var DesiredMimetype =
navigator.mimeType["application/x-director"];
if (DesiredMimetype)(
document.write('<embed src="mymovie.dir"
— height=,,240" width=n320">" ) ;
)else(
document. write ( ' <img src="movietitle. jpg"
1-height="24 0" width=,■320',>, } ;
]
Можно также использовать простой цикл JavaScript
для отображения всех MIME-типов, поддерживаемых
клиентским браузером:
for (var i = 0; i < navigator.mimeTypes. length;
i++)l
document.write(navigator.mimeTypes[i]-type +
"<br>");
)
СОВЕТ
Дополнительная информация об этих объектах может
быть найдена в главе 9.
Элементы управления ActiveX
ActiveX-технология Microsoft также предоставляет
методы внедрения в HTML-документы элементов
управления (в данном случае — OLE-приложения Microsoft).
Элемент управления OLE, внедренный таким образом
в HTML, становится элементом управления ActiveX,
который распознается Microsoft Internet Explorer 3+ и
Netscape Navigator, оснащенным подключаемым
модулем ActiveX.
ПРИМЕЧАНИЕ
В настоящее время эти элементы управления
поддерживается только на платформе Windows. Однако
Microsoft работает над методами расширения
технологии ActiveX для других поддерживаемых платформ,
включая MacOS, Solaris и HP-UX.
Если такой браузер загружает HTML-документ с
элементом управления ActiveX, который еще не
присутствует в хост-машине браузера, браузер загружает его с
сервера. Так должно происходить, потому что эти
элементы управления в действительности являются OLE-
объектами и могут выполняться только в браузерах на
совместимой с OLE-приложением платформе, такой как
Microsoft Windows. Это создает проблему
переносимости для тех пользователей браузеров, которым
требуется обратиться к такому документу.
Понятие элемента управления ActiveX
Если ActiveX — новый термин, рассмотрим следующие
два варианта. В зависимости от того, на что вы будете
опираться, каждый из вариантов будет более
приемлемым. Если следовать от Web или Java, элемент
управления ActiveX — это ответ Microsoft на Javii-аплеты,
мини-приложения, которые могут выполняться внутри
окна браузера. А если опираться на разработку баз
данных Windows, элементы управления ActiveX можно
считать Web-эквивалентами и VBX (элементами
управления Visual Basic), VCL (компонентами Delphi) или
OCX (элементами управления OLE). Как будет
показано далее, связь с OCX — нечто гораздо большее,
нежели простое сравнение.
Прежде чем компания Microsoft решила, что ActiveX —
наилучший термин с точки зрения маркетинга, тот же
элемент управления назывался OCX. Элементы
управления ActiveX были встроены в OLE-технологию,
доступную в течение нескольких лет. Однако, следует отметать,
что элементы управления ActiveX требуют меньше затрат,
чем стандартные элементы управления OLE. Поскольку
для элементов управления ActiveX не применяются
ссылки или внедрения объектов, как, например, для
документа Word, часть OLE-технологии из \ctiveX была
удалена. В результате остался один компонент — более
быстрый и занимающий меньше места.
Основная причина появления Java связана с
необходимостью достижения переносимости для всех сред. В
противоположность этому, главное достоинство
элементов управления ActiveX — это совместимость с
доминирующей на рынке операционной системой Windows 9x,
NT и, в настоящий момент, Windows 2000.
Совместимость проявляется в том, что те же самые элементы
управления ActiveX, которые применяются на
Web-страницах, могут использоваться любым
Windows-приложением либо инструментальным средством, работающим
с OCX. Причина заключается в использовании Windows
большинством пользователей Web; в конечном итоге
элементы управления ActiveX становятся естественным
расширением рабочего стола.
Ниже приведен пример HTML-кода для встраивания
элемента управления OLE (в данном случае
OLE-объекта ButtonCtrl) в HTML-документ:
<object id="MyButton" width="83" height="27"
cla:isid="CXSID:3472D900-5A27-llCF-8Bll-
l)0AA00C00903">
<pai:am name="ExtentX" VALUE="2196">
<naram name="ExtentY" VALUE=""714">
</object>
Строка для атрибута classid — значение CLS
ID-входа средства управления OLE ButtonCtl, в системном
реестре Windows. К счастью, нет необходимости
записывать такой код вручную. Код в приведенном примере
генерировался приложением ActiveX Control Pad от
Microsoft. ActiveX Control Pad, в дополнение к
возможностям ручного редактирования текста
HTML-документов, обеспечивает полуавтоматическое размещение и
создание сценариев для элементов управления ActiveX.
При использовании приложения ActiveX Control Pad для
размещения элемента управления ActiveX в
HTML-документе можно вызвать список всех элементов
управления OLE, доступных в системном реестре Windows. Все
элементы управления OLE доступны авторам HTML-
документов.
РЕСУРС
Более подробное описание ActiveX Control Pad выходит
за рамки данной книги. ActiveX Control Pad можно
выгрузить из Developer Network Online Microsoft. Его же
можно отыскать по адресу http://msdn.microsoft.com/
workshop/components/dtctrl/setupdcp.exe.
Элементы управления ActiveX имеют набор
событий, каждое из которых связано с частью кода JavaScript
(или, скорее, JScript). Например, элемент управления
ButtonCtl содержит событие onClick, аналогичное
событию типа Button в HTML-форме. Элемент управления
ActiveX может быть произвольно сложным; например,
элемент Calendar содержит следующие события,
которые могут задаваться в коде сценария: AfterUpdate,
Before Update, Click, DblClick, KeyDown, Key Press,
KeyUp, NewMonth и NewYear. Ниже показан пример
кода события для элемента управления ActiveX:
<SCript type=" text/javascript" for="MyButton"
event="onClick() '>
<i —
alert('hello universe' );
II ->
</script>
Реализация защиты
ActiveX содержит систему цифровых подписей,
встроенную в его компоненты. Разработчик компонент может
"поста зить" цифровую подпись на элементе управления
ActiveX, чтобы гарантировать пользователям заявленное
Взашюдействие с другими технологиями WGf%
Глава 25 EfcfiJ
происхождение программного обеспечения. Эта
цифровая подпись отображается в Internet Explorer при загрузке
элемента управления. Пользователь, глядя на нее,
решает, продолжать ли загрузку. Если элемент управления
не имеет цифровой подписи, пользователи
уведомляются о его неизвестном происхождении и выполняется
запрос на подтверждение загрузки.
ПРИМЕЧАНИЕ
Можноустановитьпроцесс"автоматическогоодобре-
ния"для поставщика, которому вы доверяете, чтобы
все компоненты иэ этого источника одобрялись
автоматически.
Доступ с помощью JScript
Как только элемент управления ActiveX будет встроен
в документ, можно добавлять JScript-код и работать с
ним, как с любым другим объектом JScript, т.е.
устанавливать свойства, реагировать на события или обращаться
к методам элементов управления ActiveX.
Сразу же после начала использования элементов
управления ActiveX становится ясно, что в
присоединении к ним JScript-кода нет ничего
сверхъестественного. Если знать свойства и методы элемента
управления, для создания сценария можно воспользоваться
обычным JScript-редактором.
В листинге 25.1 показан пример JScript-кода для
реализации ответа на метод Click командой кнопки.
Листинг 25.1. Использование JScript для
взаимодействияеэлементомуправления ActiveX.
<html>
<head>
<title>JavaScript Unleashed</title>
<script type="text/javascript">
<1 —
function loadBoxf) (
alert("The Great Question");
1
</script>
<SCript type=" text/javascript"
for="CommandButtonl" event="Click()">
<! —
var msg = "She loves me" ;
var altMsg = "She loves me not" .-
if (CommandButtonl .Caption = msg) {
CommandButtonl.Caption = altMsg;
window.defaultStatus = altMsg;
)else(
if (CommandButtonl. Caption = altMsg) {
CommandButtonl. Caption = msg;
window.defaultStatus = msg;
)
»
//—>
</script>
</head>
<body onload="loadBox()">
<object id="CommandButtonl" width="98"
height="32"
VPVV Техно'Шгии программирования ни динамическом HTML
BfiUl Часть IV
classid="CLSID:D7053240-CE69-llCD-A777-
00DD01143C57">
<param name="VariousPropertyBits"
value="268435483">
<param name="Caption" value="She loves me">
<param name="Size" value="2096;678">
<param name="FontCharSet" value="0">
<param name="FontPitchAndFamily" value="2">
<param name="ParagraphAlign" value="3">
<~>aram name="FontWeight" value="0">
</object>
</body>
</html>
Поскольку дескриптор <object> не позволяет
добавлять обработчики событий в виде его параметров, для
добавления параметров for и event потребуется
прибегнуть к альтернативному синтаксису обработки событий
Microsoft, который предполагает использование
расширенного синтаксиса дескриптора <script>. Подобным
способом можно сообщить JScript, для чего
предназначены объект и событие внутри дескрипторов <script>.
Сценарий, реализующий задачу из листинга 25.1,
выглядит следующим образом:
<SCript type="text/ javascript"
for="CoiranandButtonl" event="Click () ">
<! —
var msg = "She loves me";
var altMsg = "She loves me not" ;
if (CommandButtonl .Caption == msg) (
CommandButtonl.Caption = altMsg;
window.defaultStatus = altMsg;
)else{
if(CommandButtonl.Caption == altMsg){
CommandButtonl. Caption = msg ;
window.defaultStatus = msg;
)
)
</script>
Java-аплеты
Одной из наиболее полезных особенностей JavaScript
является возможность взаимодействия с Java-аплетами.
JavaScript-сценарии могут вызывать Java-методы,
исследовать и изменять Java-переменные и управлять Java-
аплетами. В свою очередь, Java-аплеты могут обращаться
к JavaScript-методам, свойствам и структурам данных.
ПРИМЕЧАНИЕ
Этот метод доступа к Java-аплетам называется LiveConnect
и поддерживается только браузерами Navigator.
Доступ к Java из JavaScript
JavaScript-сценарии взаимодействуют с Java-аплетами,
выполняющимися на HTML-странице, путем
обращения к членам (методам и полям) Java-объектов аплета.
Любой метод Java, объявленный с модиф! катером
public, доступен из JavaScript, и любое поле Java,
объявленное как public, доступно для управления и
изменения. Первый шаг организации связи JavaScript с Java-
аплетом — это создание ссылки на аплет. Как только
этот шаг выполнен, становится возможным обращаться
непосредственно к любому из членов аплета.
ПРИМЕЧАНИЕ
LiveConnect — это Netsca4e-TexHonorMA на стороне
клиента, которая обеспечивает непротиворечивое
управление данными между тремя главными
клиентскими средами Navigator — подключаемыми модулями,
Java и JavaScript. Дополнительную информацию
относительно LiveConnect можно найти на сайте DevEdge
Netscape по адресу http://developer.netscape.com.
Технология LiveConnect позволяет JavaScript
связываться с Java следующими способами:
Прямые вызовы методов Java
• Управление Java-аплетами
Управление подключаемыми модулями Java
Ссылки на аплеты
Аплеты, выполняющиеся в документе, в JavaScript
доступны через массив document.applets. Например, на
первый аплет, определенный в текущем документе, из
JavaScript можно ссылаться как на docmnent .applets[0]. На
тот же аплет можно также ссылаться как на document.
applets["appletName"] или просто document.appletName,
если его имя было определено в дескрипторе <applet>.
Имя аплета можно указать в дескрипторе <applet>,
присвоив значение атрибуту name. Например,
дескриптор
<applet name="myApplet" code="testApplet. class"
width="100" height="100" mayscriptx/applet>
создает аплет класса testAppIet с именем myApplet. Если
это первый аплет на странице, он будет называться
document.applets[0], document.applets["appletName"] или
document. myApplet.
JavaScript-сценарии могут также ссылаться на Java-
аплеты, выполняющиеся в других фреймах того же
окна браузера. Например, если Java-аплет
выполняется в фрейме с именем framel, к нему можно
обращаться из фрейма того же уровня следующим образом:
parent.framel.document.myapplet.
Подключаемые модули Java
В JavaScript каждый подключаемый модуль на Web-
странице считается элементом массива embeds.
Например, document.embeds[0] — первый встроенный объект
на странице.
Если подключаемый модуль связан с классом Java
netscape.plugiii.Plngin, к его статическим переменным и
методам можно обращаться тем же способом, который
был продемонстрирован в предыдущем разделе для
доступа к переменным, методам и свойствам Java-аплета..
Доступ к JavaScript из Java
Для доступа к JavaScript-методам, свойствам и
структурам данных из Java-аплета необходимо сначала
импортировать пакет javascript Netscape. Это делается с
использованием следующего синтаксиса:
import netscape.javascript. *
netscape.javascript определяет класс JSObject и
объект исключения JSException. Следует предоставить
аплету доступ к JavaScript, объявив атрибут mayscript
(без аргументов) для дескриптора <applet>. Это
предотвратит доступ из аплета к JavaScript на странице без
знаний, имеющихся у разработчика. Если атрибут
mayscript не будет объявлен, возникнет ошибка.
СОВЕТ
Прежде чем обращаться к JavaScript, необходимо
получить дескриптор окна Navigator. Для этого воспользуйтесь
методом getWindow класса netscape.javascript.JSObject:
winH.lndle = JSObject. getWindow (this)
winHandle — это переменная типа JSObject.
Для обращения к объектам и свойствам JavaScript
необходимо применять метод getMember класса
netscape.javascript.JSObject. Это можно сделать, вызвав
getMember для поочередного обращения к каждому
объекту JavaScript. Однако, в первую очередь следует
удостовериться в существовании дескриптора окна
JavaScript (он получается при помощи метода getWindow).
Для вызова JavaScript-методов можно
воспользоваться методами call и eval класса netscape.javascript.
JSObject. Повторим, что необходимо применить
getWindow для получения дескриптора окна JavaScript,
и затем при помощи call или eval обратиться к методу
JavaScript. Синтаксис выглядит так:
• JSObjcct.getWindow().call("methodNamc", arguments)
method Name— имя вызванного JavaScript-метода,
a arguments — массив аргументов, передаваемых
в данный метод.
• JSObject.getWindow().eval("expression")
expression — JavaScript-выражение, вычисляемое
для JavaScript-метода.
Использование JSObject
Поскольку сложный JavaScript-объект (например,
массив или объект Window) отражаются в Java в виде
объектов типа JSObject, важно знать, как управлять этими
Взаимодействие с другими технологиями ECTI
Глава 25 fififj
объектами и извлекать информацию их них. Когда
JSObject представляет массив JavaScript, полезно уметь
исследовать отдельные элементы массива, а когда
JSObject вводит Window, Document, History или
подобные им JavaScript-объекты, неплохо уметь проверять их
свойства.
На первый взгляд может показаться заманчивым
способ обхода проблемы путем разложения объектов
JavaScript на более простые объекты. После такого
разложения полученные элементы можно было бы послать
Java как наборы простых объектов, где они бы
перевелись в Java-объекты String, Double и Boolean.
Главный недостаток такого подхода, помимо
большого объема дополнительной работы, состоит в том, что
этот способ не оставляет никакой возможности для
обработки объектов переменного размера. Если
неизвестно заранее, сколько элементов будет содержать массив,
не найдется способа передать каждый отдельный
элемент в Java-метод, поскольку Java-методы принимают
набор аргументов, устанавливаемый в процессе
компиляции. Вероятно, лучше будет просто передать Java
сложные объекты JavaScript и научиться работать с
ними.
ПРИМЕЧАНИЕ
Убедитесь, что атрибут mayscript присутствует в
дескрипторах <applet> для всех аплетов, которые
планируется использовать с JSObject. Без этого аплет не
получит доступа к объектам и свойствам JavaScript. Эта
мера была разработана для того, чтобы позволить
авторам HTML-кода включать непроверенные Java-an-
леты в свои страницы без переживаний на предмет
того, что эти аппеты получат доступ к потенциально
критичной информации, предназначенной только дпя
JavaScript.
В качестве конкретного примера предположим, что
необходимо использовать JavaScript в качестве G Ш для
Java-аплета построения графика по точкам. Ниже
показаны объявления переменных и функций.
<SOript type="text/javascript">
var xvals = new Array () ;
var yvals = new Array () ;
function addPoint(x, y) (
xvals[xvals.length] = x;
yvals[yvals.length] = y;
')
function plotPoints() {
document.myApplet.plotPoints (xvals, yvals);
} .
</scrip t>
а также HTML-форма с обработчиками событий:
<form>
<inpUt type=text name="xval">
МРРФМ Технологии программирования на динамическом HTML
EfifiJ Часть IV
<"input type=text name="yval">
<br>
<input type=button value="Add Point"
onclick="addPoint (form.xval. value,
form.yval.value)">
<br>
<input type=button value="Plot Points"
onclick="plotPoints ()">
</form>
Можно собрать координатные пары (х, у),
использующие два текстовых входных пол. и функцию add Point ()
и послать их аплету в одном большом пакете с
помощью функции pIotPoints().
Это позволяет передавать аплету произвольное
число точек, из которых требуется составить график, но
требует разложения массивов точек в Java. Java-метод
plotPoints() из этого примера дает хорошее
представление о том, что можно сделать с объектами JSObject. Код
выглядит следующим образом:
public void plotPoints (JSObject xvals, JSObject
yvals){
Double length = (Double)
xvals.getMember("length");
inl n = Math.round(length.doubleValue ()) ;
for (int i = 0; i < n; H -t-) {
tryf
String sx = (String) xvals.getSlot (i) ;
String sy = (String) yvals.getSlot(i);
Double x = new Doulle(sx);
Double у = new Double (sy) ,-
doPlot(x, y) ;
) catch (NumberFormatException e)
System.err.println("Illegal point
"-> specification") ;
)
)
Рассмотрим более подробно части программы,
строка за строкой.
public void plotPoints (JSObject xvals, JSObject
yvals)
Этот метод получает два объекта JSObject — массив
х-координат и массив у-координат. Обратите внимание,
что массивы JavaScript, даже числовые, в Java не
показываются как массивы одного из встроенных числовых
типов Java. Если функция вместо этого записывается с
сигнатурой:
public void plotPoints (double [ ] xvals, doublet]
yvals)
то любая попытка вызова ее из JavaScript потерпит
неудачу. Вы окажетесь связанными с объектами JSObject
вместо требуемых числовых массивов.
Double length = (Double) xvals .getMember
.("length") ;
Вызов getMember() — первый шаг, необходимый
для преобразования аргументов из формы, в которой
они были переданы, к используемой форме. Метод
getMember() применяется для получения свойства length
одного из объектов массива (оба массива имеют одну и
ту же длину). getMember() возврашает универсальный
Object (базовый класс для всех Java-объектов), однако
его требуется затем привести к соответствующему типу.
Известно, что свойство length массивов JavaScript —
числовое, а JavaScript-числа отражены в Java как Double,
поэтому объект, возвращенный getMember(),
приводится к Double.
Обратите внимание, что в выбранном здесь типе нет
никакой гибкости; числа, доступные из JSObject
должны приводиться к Double. Только когда числовые
значения JavaScript передаются непосредственно в Java как
аргументы функций, они могут появляться как Java-
типы, отличные от Double.
int n = Math.round(length.doubleValue ()
Хотя этот оператор не содержит непосредственно
JSObject, он демонстрирует полезное выражение для
преобразования JavaScript-числа в используемый в Java
тип числа. Программисты часто будут получать
объекты Double, тогда как им нужнее другие типы,
следовательно, их необходимо будет преобразовать. В этом
случае метод doubleValue() объекта Double используется для
получения фактического числового значения, а метод
roundQ пакета Math — для получения целого числа,
наиболее приближенного к данному значению.
String sx = (String) x.getSlot (i) ;
String sy = (String) у.getSlot(i);
Внутри цикла возникает необходимость в способе
получения числового значения каждого элемента
объектов JSObject, представляющих массивы xvals и yvals.
Здесь метод getSlot() применяется для извлечения
отдельного элемента массива с данным индексом. Метод
getSlot() берет индекс в качестве аргумента и возвращает
объект JavaScript, соответствующий этому индексу.
getSlot(), подобно getMember(), возвращает у ни версаль-
ный Java-объект, поэтому его снова потребуется
привести к нужному типу. Как было сказано, массивы xvals
и yvals содержат JavaScript-строки, следовательно, в
данном случае требуется использовать Java-тип String.
На первый взгляд это может показаться странным,
т.к. элементами массива обычно являются числа, но
String — действительно то, что нужно в данном случае.
Вспомните, что значения массивов были получены из
текстовых полей ввода HTML-формы. В JavaScript, если
строка выглядит как число (состоит полностью из
цифр), это еще не делает ее числом.
Double х = new Double(sx);
Double у = new Double (sy) ;
Нам понадобится способ преобразования строк,
которые выглядят как числа, в фактически числа, и для
этого больше всего подойдет упоминаемый ранее кон-
структор Double. Ему потребуется String в качестве
аргумента, и он вернет объект Double, соответствующий
значению с плавающей точкой двойной точности,
представленному String. Если String не представляет
числового значения, применяется NumberFormatException,
поэтому операторы будут вложены в блок try. В случае
возникновения исключения попытка помещения точки
в график прерывается и начинается следующая
итерация цикла.
doPlot(x, у) ;
Имея значения координат (х, у), извлеченные из
JSObject, осуществляется вызов гипотетического
низкоуровневого метода рисования по точкам.
Хотя исчерпывающее изучение класса JSObject
выходит за пределы этой книги, еще один пример
поможет продемонстрировать несколько его методов.
Предположим, что требуется добавить к аплету метод,
составляющий график по всем точкам, которые
пользователь уже ввел в форму, и не дожидающийся нажатия
кнопки "Plot Points" пользователем. Метод, который
показан ниже, позволяет аплету выйти в JavaScript-мир
и рассматривать требуемые ему объекты JavaScript
всякий раз, когда это потребуется:
private void getPoints(){
// Получить окно и документ.
JSObject window = JSObject.getWindow(this) ;
JSObject document = (JSObject)
window.getMember("document"),
// Получить массивы точек.
JSObject xvals = (JSObject)
document.getMember("xvals");
JSObject yvals = (JSObject)
docuemnt.getMember("yvals");
// Вызов plotPoints()
plotPoints(xvals, yvals);
.1
Рассмотрим более подробно строки из новых
методов и концепции, не применявшиеся в предыдущем
примере.
private void getPoints()(
Обратите внимание, что этот метод — private, т.е. он
не предназначен для вызова из JavaScript. Обратите
также внимание, что здесь не требуются аргументы,
поскольку вся информация, необходимая для решения
задачи, содержится в JavaScript. Главное достоинство
примера состоит в том, что Java-аплеты могут
свободно отыскивать объекты и свойства JavaScript, причем
для этого не требуется никаких пользовательских
действий со стороны JavaScript.
JSObject window = JSObject.getWindow(this) ;
Класс JSObject содержит статический метод getWindow(),
который может использоваться аплетом для получения
Взаимодействие с другими технологиями ВВП
Глава 25 Bfifil
JavaScript-объекта Window, соответствующего окну,
содержащему этот аплет. Возвращенный объект — это
просто тот же самый объект, обозначенный как Window в
JavaScript. getWindowO — особо важный и полезный
метод, т.к. он является единственным способом, с
помощью которого Java-аплет может получить "новый"
JSObject (т.е. JSObject, не полученный из другого,
существовавшего ранее, объекта JSObject) без явной
передачи его из JavaScript; класс JSObject не содержит
конструкторов public. Аргументом для getWindow()
является непосредственно объект аплета.
JSObject document = (JSObject)
window.getMember([sql]document[sq2] ) ;
После получения объекта Window метод getMemberO
используется для извлечения свойства по его имени. В
данном случае свойством является объект Document
окна, т.е. объект, обозначенный window.document в
JavaScript. Переменные xvals и yvals, как и все
переменные, определенные на "верхнем уровне"
JavaScript-сценария, являются свойствами объекта Document.
Сложные объекты JavaScript, такие как Document, отражаются
в Java как JSObjects, следовательно. Object,
возвращенный getMember(), будет приводиться к этому типу.
JSObject xvals = (JSObject)
document.qetMember("xvals");
JSObject yvals = (JSObject)
document.getMember("yvals");
Как только получен объект Document, можно
приступать к извлечению необходимых переменных. Для
достижения этой нели еше раз применяется метод
getMember(). Объекты xvals и yvals являются JavaScript-
массивами, которые представляются в Java как JSObject,
поэтому объекты, возвращенные getMember(), снова
приводятся к этому типу.
PlotPoints (xvals, yvals) ;
Теперь, когда получены JSObject, представляющие
массивы xvals и yvals, можно вызвать метод plotPointsO
изнутри Java точно так же, как он вызывался из JavaScript.
Стоит отметить два других метода класса JSObjects —
call() и eval(), которые имеют следующие прототипы:
public Object call{String methodName, Object
args[]) ;
public Object eval(String s) ;
callO вызывает метод methodName своего объекта с
аргументами, хранящимися в массиве args. Это
эквивалентно запросу
this.methodName(arg[0], arg[l], . . .);
из JavaScript. Например, следующий код в аплете
JSObject window = JSObiect.getWindow(this) ;
Object args[] = { "Hello, world!" } ;
window.call("alert" , args);
Ш1
Технологии программирования на динамическом HTML
эквивалентен такому JavaScript-коду:
alert("Hello, world!");
Метод eval() объекта вычисляет строку аргумента
как выражение JavaScript. Вычисление производится в
пределах контекста объекта. Замена последней строки
в предыдущем примере на
window.eval(alert('Hello, world!')") ;
обеспечивает тот же самый результат. Обратите
внимание на использование одинарных кавычек внутри
двойных.
Трансляция типов данных
Одним из наиболее трудных и запутанных аспектов в
вызовах Java-методов из JavaScript является получение
совпадения типов аргументов, переданных Java, с
типами аргументов, ожидаемых Java-методом. Если два
набора аргументов не соответствуют друг другу,
происходит сбой в обращении к функции и выдается сообщение
об ошибках, в котором говорится, что JavaScript не
может найти Java-метод, который бы ожидал
передаваемые аргументы.
Java — строго типизированный язык (т.е. каждая
переменная имеет совершенно определенный,
объявленный тип), поэтому для всех Java-методов должно быть
объявлено заранее, сколько аргументов они ожидают,
какого типа и каком порядке. В Java-программе любая
попытка вызова метода с последовательностью
аргументов, которая в точности не соответствует объявленной
последовательности для данного метода, приводит к
ошибке на этапе компиляции.
JavaScript, напротив, имеет гораздо менее строгий
контроль типов и, как интерпретируемый язык, должен
осуществлять всю необходимую проверку во время
выполнения. JavaScript-переменные не имеют
объявленного типа; фактически, их можно не объявлять вообще, а
вместо этого просто ссылаться на них. Той же самой
JavaScript-переменной может быть присвоена строка в
одном операторе, целое число в следующем операторе
и массив — еше в одном.
Как JavaScript-объекты преобразовываются в Java-
объекты при передаче их методам Java? Откуда Java
знает, как найти Java-тип, который точно соответствует
структуре JavaScript-объекта? Коротко говоря, он
вообще этого не делает. Вероятно, такого объекта не
существует. Если объект не относится к одному из
определенных исключений, Java не обязательно имеет класс,
который в точности отражает тип JavaScript-объекта,
поэтому он просто присваивает это значение типу по
умолчанию (JSObject), предназначенному представлять
JavaScript-объекты в Java.
К счастью, в упомянутые выше исключения входят
некоторые из наиболее часто используемых типов
данных, в том числе и три основных типа данных
JavaScript: строки, числа и логические переменные.
JavaScript-строки (т.е. строковые константы и
переменные, которым в последнюю очередь были присвоены
строки) появляются в Java как экземпляры Java-типа
String. JavaScript-числа (числовые константы и
переменные, которым в последнюю очередь были присвоены
пелые или действительные числовые значения)
преобразуются в Java-объекты Double. Логические
переменные JavaScript (true и false) станут Java-объектами
Boolean.
Другой особый случай касается JavaScript-объектов,
которые являются оболочками для Java-объектов. Такие
объекты просто "изымаются из оболочек" и
преобразовываются в исходные Java-типы. Хотя сей факт в настоящее
время не задокументирован, существует дополнительная
гибкость при передаче JavaScript-чисел
непосредственно Java-методам. Попытка сделать вызов наподобие
document, my Applet. setNumber (3.7);
окажется успешной, если аплет myApplet содержит
метод с сигнатурой
public void setNumber (type x) ;
где type — один из следующих типов: Double, double,
float, long, int, short, char или byte, хотя документация
гласит, что приемлем только Double. В случаях когда в
аплете имеется много перегруженных методов,
ожидающих один из указанных выше типов, выбирается
первый такой метод (метод, самый близкий к началу файла
исходного кода на Java). Нарушение
лексикографического расположения — вероятно, не лучший способ
решить конфликты между перегруженными методами;
скорее всего, скоро будет предложен другой механизм.
Предположим, что для контроля приемлемых
значений theText применяется метод setTextQ, и требуется
найти способ выяснения, привел ли вызов setText() к
успешной установке theText. Новая функция, которая
возвращает логическое значение, отображающая успех
или неудачу, может выглядеть следующим образом:
public boolean setText (String s) {
if (s.equals ("Hello world!")) (
// Я устал от этой строки. Не используйте ее
return false;
)else{
theText = s;
return true
)
)
В JavaScript-сценарии, включающем строку
var changed = document.myApplet.setText ("Hello
"world!")
значение, возвращенное setText(), сохранится в changed.
Тем не менее остается вопрос: как Java-значение Boolean,
возвращенное setText(), будет преобразовываться в
JavaScript-объект? В данном случае ответ прост и
интуитивно понятен: Java-значение Boolean станет JavaScript-
значением boolean, когда оно вернется JavaScript.
Передача Java-объектов в JavaScript не всегда настоль
проста — для точного перевода каждого объекта
существует ряд правил. Впрочем, часто все происходит именно
так, как нам нужно. Java-массивы становятся JavaScript-
массивами, числовые типы Java становятся JavaScript-
числами, Java-значения Boolean —
JavaScript-значениями boolean, a Java String — JavaScript String. В
заключение рассмотрим полный набор используемых правил
для управления преобразованиями:
Числовые типы Java (byte, char, double, float, int, long,
short) становятся JavaScript-числами.
Java-значения Boolean становятся
JavaScript-значениями boolean.
Java JSObject преобразуются в свои исходные
JavaScript-объекты.
Java-массивы становятся JavaScript-объектами Array.
Все другие Java-объекты преобразуются к JavaScript-
объектам, помещенным в оболочки, и могут
использоваться для обращения к первоначальным Java-
объектам.
При попытке преобразования JavaScript-объекта в
оболочке в JavaScript-строку, число или логическое
значение, вызывается метод исходного Java-объекта
toStringO, doubleValue() или booleanValue(), если он
существует, и значение, возвращенное из
соответствующего метода, становится значением преобразованного
объекта. Если требуемый метод не существует,
преобразование дает сбой. Обратите внимание, что
Java-строки корректно работают в JavaScript даже при том, что
они были переданы JavaScript как объекты-оболочки.
Любая попытка использовать их в контексте, в котором
ожидаются JavaScript-строки, приводит к корректному
преобразованию этих строк.
Подробнее о Java-аплетах
Выше в этой главе рассматривались способы
взаимодействий JavaScript/Java. Теперь хорошо известно, что
можно сделать и, до некоторой степени, как это работает.
Дале более подробно исследуется, что фактически
происходит при вызове этих методов и свойств из
различных гред.
Взаимодействие с другими технологиями КИЯ
Глава 25 Щ|££
Вызов Java-методов
Предполагая, что LiveConnect включен, можно
использовать следующий синтаксис для обращения к
Java-методу:
Packages.packageName.className.methodName
где packcigeNcime и c/assName — свойства объекта Packages.
Имя Packages в вызовах можно опустить в пакетах
Navigator по умолчанию — Java, Sun или Netscape.
Например, на Java-класс java.lang.System можно ссылаться как
java.lang. System или Packages.java.lang.System.
Рассмотрим пример. В приведенном ниже коде
JavaScript использует доступ к Java для вывода
сообщения на Java-консоль:
<script type="text/javascript">
<!—
java.lang. System.out.println ("Greetings from
"JavaScript") ;
</script>
Установка Java-свойств
Хотя это не самый хороший стиль программирования
для Java-классов — предоставлять всем прямой доступ
к компонентам данных (называемым также свойствами
или полями), объявляя их public, но иногда бывают
ситуации, в которых это оправдано. Когда Java-аплеты
содержат поля public, у JavaScript-сценариев
появляется возможность непосредственно изменять их так же,
как они вызывают Java-методы public. Например,
рассмотрим следующий фрагмент Java-аплета:
public String theText;
public void setText (String s) {
theText = s ;
)
Наилучшим стилем программирования будет
установка текста следующим образом:
document, my Applet. setText ("Hello world! ")
Для достижения того же результата можно было бы
записать:
document. myApplet. theText = "Hello world!";
Те же правила, которые управляют трансляцией
JavaScript-объектов в Java-объекты в процессе
обращения к функции, применимы и в данном случае. Здесь
имеется в виду, что таким образом могут быть
установлены только Java String, Double, Boolean, JSObject и
примитивные числовые типы, поскольку все JavaScript-
переменные первоначально отражаются в Java в виде
одного из этих типов.
Использование Java-пакетов
Возможности взаимодействия JavaScript с Java не
ограничены аплетами. JavaScript-сценарии имеют также
■■■■ Технологии программирования на динамическом HTML
EfiiJ Часть IV
прямой доступ к статическим методам и полям базовых
Java-пакетов, они могут даже создавать новые Java-объекты.
Java-пакеты доступны в JavaScript через массив Packages
документа. Например, Java-пакет java.lang.System,
используемый для консольного ввода-вывода, будет
называться в JavaScript Packages.java.lang. System, a Java-пакет
java.lang.Math — Packages.java.lang. Math.
Следовательно, для записи значения "пи" на Java-консоли
можно использовать следующий код:
var pi = Packages.java.lang.Math.pl;
Packages . Java. lang. System, out.println("pi is: " +
pi);
Для сокращения в ссылке к трем заданным по
умолчанию пакетам —Java, sun и netscape — можно
безопасно опустить ключевое слово Packages. To есть, в
пределах JavaScript-объекта Document имена Java, sun и
netscape представляют собой, соответственно,
альтернативные имена для Packages.java, Packages.sun и
Packages.netscape. Используя эти имена, можно
перезаписать пример с "пи" следующим образом:
var pi = Java. lang.Math. PI;
java.lang.System.out.println("pi is: " + pi) ;
Также возможно создавать новые Java-объекты
динамически, используя операцию new. Это удобный
способ обратиться к некоторым из мощных встроенных
сервисных Java-классов — хэш-таблицам, стекам, векторам,
датам и т.п. — без написания полного Java-аплета. В
следующем примере на JavaScript создаются два Java-
объекта Date, и затем они сравниваются с помощью
метода after класса Date для выяснения, является ли
текущая дата последней.
var theDate = new Java. util. Date () ; // текущая
// дата
var deadline = new Java. util. Date (00, 6, 26);
// 26 июля 2000 г.
if (theDate.after leadline)) {
alert ("I missed my deadline!");
)else{
alert ("Made it'");
)
Управление плетами
После получения ссылки на аплет, следующим шагом
будет установка связи с ним путем активизации одного
из его методов. Например, если аплет имеет
общедоступный метод liello(), который не содержит никаких
аргументов, этот метод можно вызвать следующим
образом:
document.myApplet.hello() ;
Создание приведенного выше вызова из JavaScript
производит такой же эффект, как вызов из Java метода
hello() объекта аплета. Для еще одного примера
предположим, что имеется Java-аплет с музыкой из
кинофильма, в котором требуется включать и выключать
звук с использованием JavaScript. Если аплет
предоставляет методы, подобные показанным ниже, для
управления звуковой дорожкой кинофильма можно вызывать
эти методы из JavaScript:
public void soundtrackOn();
public void soundtrackOf£();
Если желательно свести все управление звуковой
дорожкой кинофильма к простому щелчку кнопкой
мыши, можно использовать JavaScript в качестве
"провода" для присоединения переключателей
HTML-формы к Java-аплету. Следующий пример демонстрирует
применение элемента form метода onClick для
взаимодействия с аплетом:
<form>
<input type="radio" checked="true" name="sound"
onclick="document.myApplet.soundtrackOn()">
On
<br>
<input type="radio" name="sound"
onclick="document.myApplet.soundtrackOff()">
Off
</form>
Значения для обработчика событий onClick
определяют, что методы soundtrackOn() или souiultrackOff()
аплета с именем myApplet вызываются всякий раз при
нажатии соответствующего переключателя. В качестве
более сложного примера (который иллюстрирует
передачу аргументов Java-методам), предположим, что
аплет также содержит метод с прототипом
public void changeText(String s) ;
который при вызове изменяет текст, отображаемый
аплетом, на значение, передаваемое в строке s. Если в
форму добавить следующие элементы
<input type="text" name="newtext">
<input type="button" value="Change Text"
oncl ick="document. myApplet. changeText (form.
newtext.value)">
пользователи смогут вводить в текстовом поле новые
строки, которые будут отражаться в аплете. При
нажатии кнопки "Change Text" значение текстового поля
извлекается, преобразуется в String Java и передается как
аргумент в метод аплета changeText(). Это весьма
мощный инструмент. Возможность передачи JavaScript-
объектов Java-методам позволяет быстро и легко
конструировать привлекательные графические
пользовательские интерфейсы из стандартных HTML-форм,
усиливая их за счет обработчиков событий JavaScript, и
применять их для управления Java-аплетами.
LiveAudio
LiveAudio, неотъемлемая часть браузера Netscape Navigator,
представляет собой встроенный подключаемый модуль,
позволяющий браузеру Navigator запускать звуковые
файлы собственными средствами. По сути дела,
LiveAudio расширяет Navigator в сторону распознавания
нового типа содержимого. Это означает, что
большинство пользователей Web теперь может свободно получать
и прослушивать аудиофайлы при наличии
соответствующего оборудования. Это, в свою очередь, открывает
для Web-разработчика новый мир больших
возможностей — возможностей восприятия информации и
развлечений "через уши".
LiveAudio интегрирован в среду Navigator и может
легко управляться через JavaScript и LiveConnect. Эти
преимущества наряду с широкой доступностью LiveAudio,
требуют его детального обсуждения. Глава содержит
примеры LiveAudio и демонстрирует способы
применения JavaScript для управления им.
ПРЕДУПРЕЖДЕНИЕ
Эта книга, вероятно, окажется последней,
содержащей информацию о LiveAudio. Промышленность
развивается в направлении создания встроенных
проигрывателей, таких как G2 Player Real и Microsoft Windows
Media Player, для обработки аудио- и видеофайлов.
Как утверждается на Web-сайте Netscape, LiveAudio
был создан с учетом всех функциональных
возможностей LiveConnect. Это означает, что можно
пользоваться любыми преимуществами LiveConnect и JavaScript
для управления внедренными (или встроенными)
LiveAudio-элементами. С помощью LiveConnect JavaScript
может взаимодействовать с LiveAudio, позволяя
программно выполнять следующие действия:
Создание альтернативных интерфейсов управления
звуком.
Задержку загрузки аудиофайла, пока пользователь
не выполнит действие (например, нажатие кнопки
"Play").
Создание интерфейсных кнопок с шумовыми
эффектами.
■ • Обеспечение аудиорасширения для взаимодействия
с пользователем. Например, можно заставить объект
говорить, что он делает при нажатии или
перемещении курсора мыши поверх него.
Использование JavaScript-методов
JavaScript обеспечивает для LiveAudio несколько
методов управления, чтобы дать возможность разработчику
легко управлять аудиофайлами, внедренными в Web-
страницу. Для этих методов доступен JavaScript,
однако, где-то на странице потребуется встроить консоль
LiveAudio.
Взаимодействие с другими технологиями ШШСШ
Глава 25 Bfitt
Рассмотрим методы управления LiveAudio через
JavaScript:
• play(). Включает звук. Можно определить значение
цикла, подобно значению атрибута loop, с
необязательным иКЬдля звука, если исходный URL не
используется.
stop(). Останавливает звук, если он был включен.
• pause (). Пауза для звука в текущей позиции. Для
продолжения воспроизведения можно использовать
методы play() или pause().
start_time() и end_time(). Позволяют
переустанавливать время начала и конца воспроизведения.
Значения определяются в секундах.
start_at_beginning() и stop_at_end(). Устанавливают
время начала и конца воспроизведения на начало и
конец звукового файла.
setvol(). Устанавливает громкость звука в интервале
от 0% до 100%.
fade_to(). Устанавливает громкость, плавно изменяя
ее от текущего значения.
fade_frorn_to(). Позволяет определить два значения
и плавно регулировать звук от одного значения к
другому.
• IsReadyQ. Возвращает true, если звуковой файл
загружен и готов к воспроизведению.
IsPlaying(). Возвращает true, если звук
воспроизводится.
IsPaused(). Возвращает true, если воспроизведение
звукаприостановлено.
GetVolume(). Возвращает текущую громкость.
Эти методы обеспечиваются через свойство document.
embeds, которое содержится в массиве <embeds> на
текущей странице. Для применения одного из
перечисленных методов просто обращаются к нему, используя
следующий формат:
document.embedName.method();
Например, вызвать метод play() во внедренном
проигрывателе my Radio можно с помощью такого кода:
document.myRadio.play();
Воспроизведение звуков в ответ на
JavaScript-события
Как упоминалось ранее, JavaScript можно использовать
для вызова звука в любом месте сайта. Тем не менее,
зачастую наиболее пригодным местом для вызова зву-
Технологии программирования на динамическом HTML
Часть IV
ков, усиливающих впечатления пользователя,
оказываются JavaScript-события. Следующий пример использует
эту концепцию, демонстрируя способ вызова
нескольких звуков на Web-странице путем захвата и обработки
событий on oad, onUnLoad, и onClick обработчиками
событий JavaScript.
В этом примере (см. листинг 25.2) звук (type.wav),
привязанный к нажатию клавиш, воспроизводится после
загрузки страницы. Для демонстрации события onClick
предполагается, что после щелчка на гиперссылке
пользователь слышит звук кассового аппарата, а при
нажатии на кнопку — звук выстрела. Кроме того, при уходе
со страницы пользователь услышит звук разбиваемого
стекла. Результирующее окно браузера показано на рис.
25.1.
Листинг 25.2. Управление звуками при помощи
JavaScript.
<hfanl>
<head>
<tit"e>JavaScript Unleashed</title>
<script type="text/javascript">
<! —
function playSound(sfile) {
// Загрузка и воспроизведение аудио-
// файла
window, location, href =sfile;
}
II—>
</script>
</head>
<bodyonIioad="playSound( ■ Type.wav ' ) "
onUnLoad='"playSound ( 'Glass.wav') ">
<h2>
Sounds on JS Events
</h2>
<hr>
The following are exai pies of JS event
handlers used to play sounds.
<hr>
<a hi »^=" " onClick='"pl vSound(' Cashreg.wav') ">
Click here for sound
</a>
<P>
<form name="forml">
<input type="button" value="Play"
onClick="playSound('Gunshot.wav')">
</fonrO
</p>
</body>
</html>
Следующий пример демонстрирует способ
применения некоторых встроенных JavaScript-методов для
управления звуковыми файлами. Код, показанный в
листинге 25.3, позволяет загружать звук и затем управлять
им с помощью нескольких кнопок. Обратите внимание
на использование скрытой консоли для
первоначального вызова LiveAudio. На рис. 25.2 находится
получившаяся в окне браузера страница.
i«-J«v«Suipi UnlMihsd' NilKMpB
4,. ,^4»«m№:~ je^4|rhAVOTE№/rc2>ZSjr£4nri
Sounds on JS Events
The following are fwlAe of JS *"аЛ hamfleis used to play sounds.
Г* k hurt frr -ej«nu
"W»l
6# -!*=*:=5--'-" :-4S«iB4 Obpn ..= ,., ?:ц -Гц ■
■!■■■=.
'ЛЛН
ИИЕЗ'
РИСУНОК 25.1. Примеры вызова звуков в ответ на JavaScript
события.
Jmi&cnpt Uriudjhcd- Ыreapa
■: :-3 1 д 01 И I 1
.^;l "«■" 'я'1' ...til; "'ir?|. ./y-Lb'TLMPWfrVA.Lroifc. j "
ЯГ**
775?
Embedded Sonne . in JavaScript
lbs document mcbdes a hidden embtdded joun wtiich/; >adcd afier Ibe page 11 loaded. You cau Ode the
JavaScnpt button* below to control the sound
PiayfiPaaKbl 2bV|
ИГ—-.■Гг-"Я»дД»и
РИСУНОК 25.2. Управление внедренными звуками с помощью
JavaScript.
Листинг 25.3. Управление внедренными звуками с
помощью JavaScript.
<html>
<head>
<title>JavaScript Unleashed</title>
</head>
<body>
<h2>
Embedded Sounds in JavaScript
</hl>
<embed mastersound name="soundl"
src="test.wav" volume="100" hidden="true"
autostart="false">
<hr>
This document includes a hidden embedded
sound, which is loaded after
the page is loaded. y<->u can use the
JavaScript buttons below to control
the sound.
<hr>
<form name="forml">
<input type="button" value="Play"
onelick="document.soundl.play(true)">
<input type="button" value="Pause"
onclick="document.soundl.pause()">
<input type="button" value="Stop"
onclick="document.soundl.stop()">
</i:orm>
</body>
</htmL>
Резюме
В главе рассматривались некоторые способы
взаимодействия JavaScript с другими технологиями. Была пред-
Бзаимодейстеие с другими технологиями EW4
Глава 25 BfifiJ
ставлена технология подключаемых модулей Netscape
и объяснены различия между подключаемыми
модулями, вспомогательными приложениями и MIME-типами.
Здесь также обсуждались проблемы интегрирования
элементов управления ActiveX с JScript. Было
выяснено, что такое ActiveX-технология и как ее можно
использовать при создании сценариев. Кроме того,
рассматривались вопросы взаимодействия с Java-аплетами
через LiveConnect.
Глава завершилась обсуждением способов
применения обработчиков событий JavaScript для вызова звуков
на HTML-странице, а также способов установки
внешних аудиопроигрывателеи в качестве вспомогательных
приложений прослушивания аудиофайлов.
Избранные программные
технологии
ЧАСТЬ
В ЭТОЙ ЧАСТИ
26. Гарантия работы сценариев в браузерах
Netscape и Microsoft
27. Методы выяснения типа браузера
28. Навигация по сайту с использованием JavaScript
29. Формы и верификация данных
30. Персонализация и динамические страницы
31. Сопоставление шаблонов с помощью
регулярных выражений
32. Технология манипуляции данными со стороны
клиента
33. Обработка ошибок
34. Отладка
35. JavaScript и безопасность в Web
Гарантия работы сценариев в
браузерах Netscape и Microsoft
в этой главе
Версии языка и версии браузера
Сравнительный анализ JavaScript-диалектов
Ошибки
Первоначальный вид JavaScript, как и всех
компьютерных языков, претерпел несколько изменений.
Наибольшее число изменений было внесено в версии JavaScript
1.1 и L.2. В этих версиях основные функциональные
возможности постоянно модифицировались, и
программистам становилось все сложнее создавать JavaScript-
код, который работал бы в разных браузерах. Обычно
такие проблемы обходили, избегая использования тех
особенностей, из-за которых возникали проблемы
совместимости, однако проблемы JavaScript
существовали и в рамках базовых функциональных возможностей!
Еще большую сумятицу внесла компания Microsoft,
коренным образом изменившая JavaScript, дабы не
покупать лицензию на ее использование. Результатом
стала еще одна разновидность JavaScript — от Microsoft,
получившая название JScript. В конечном итоге на
JavaScript начали смотреть как на нечто очень
непостоянное.
К счастью, Netscape и Microsoft признали, что
Вавилонскую башню из JavaScript строить ни к чему. Они
представили язык на утверждение комитету
стандартизации ЕСМА (European Computer Manufacturers
Association — Европейская Компьютерная Ассоциация
Изготовителей), который и собрал воедино язык
ECMAScript 1.0 (ЕСМА262). Стандарт был очень
быстро принят как Netscape, так и Microsoft.
После этого события базовые функциональные
возможности JavaScript стабилизировались в версиях
JavaScript 1.3 и JScript 3.0. Эта стабильность
сохраняется и на сегодняшний день в JavaScript 1.4 и JScript 5.0.
Проблемными областями сейчас являются не они, а
скорее интеграция в JavaScript новых Web-технологий,
таких как каскадирование таблиц стилей (CSS).
Из сказанного выше ясно, что JavaScript претерпел
некоторые изменения, которые все еще проявляются в
различиях способов создания сценариев. В главе
рассказывается, какие версии браузеров поддерживают
функциональные возможности JavaScript.
Версии языка и версии браузера
Возможно, вы несколько запутались во всех этих
номерах версий JavaScript и JScript и номерах версий
браузеров Microsoft и Netscape. Таблица 26.1 показывает
соотношения версий языка и версий браузеров.
Таблица 26.1. Соотношение версий языка и
версий браузера.
Браузер
Netscape Navigator
Microsoft Internet
Explorer
Версия
2.0
3.0
4.0-4.05
4.06-4.7X
6.0
3.0
4.0-4.5
5.0
5.5
Язык
JavaScript 1.0
JavaScript 1.1
JavaScript 1.2
JavaScript 1.3
JavaScript 1.4 и 1.5
JScript. .0
JScript 3.0
JScript 5.0
JScript 5.5
Как видно из приведенной таблицы, весьма важно
знать, какие браузеры будут использовать заказчики для
просмотра Web-страниц. Решив в первую очередь,
какие браузеры будут поддерживать создаваемые
Web-страницы , можно сберечь немалое время на разработку. С
другой стороны, если есть некая особая функциональная
Избранные программные технологии
Часть V
возможность JavaScript, которую требуется использовать
на Web-странице, тогда следует выбирать браузер,
соответствующий такой версии JavaScript, которая
поддерживает необходимые функциональные возможности,
либо воспользоваться методикой выяснения типа
браузера (см. главу 27).
Сравнительный анализ JavaScript-
диалектов
JavaScript был детищем Sun Microsystems. Navigator
Netscape стал первым браузером, интерпретирующим
язык и обеспечивающим расширенные функциональные
возможности JavaScript за счет взаимодействия с
подключаемыми модулями и средой Java. Вскоре после этого
Microsoft ввела в игру JScript. Как упоминалось ранее,
JavaScript в течение первых лет своего существования
претерпел достаточно много изменений. Только теперь,
наконец, основные функциональные возможности
JavaScript стабилизировались и язык получил
возможность взаимодействовать с другими Web-технологиями.
Хотя текущая версия JavaScript довольно стабильна,
может потребоваться поддержка старых браузеров, а для
этого очень пригодится знание сроков появления и
изменения всех функциональных возможностей данного
языка. Еще более важно помнить, что часто требуется
правильное выполнение сценариев в обоих браузерах —
Microsoft и Netscape. Поэтому полезно рассмотреть
различные JavaScript-диалекты, а также браузеры,
обеспечивающие их поддержку.
JavaScript от Netscape
Этот раздел состоит из пяти подразделов — по одному
на каждую версию JavaScript. Каждый подраздел
детализирует все объекты, свойства, методы, обработчики
событий, встроенные функции, операции и операторы,
которые являются новыми для данной версии.
СОВЕТ
Для получения наиболее актуальной информации о
новых версиях JavaScript посетите Web-сайт Netscape
по адресу http://devedge.netscape.com/tech/
javascript/index.html
JavaScript 1.0
Основная спецификация JavaScript 1.0 сначала
поддерживалась в Netscape Navigator 2.0. Ниже приведены
списки оригинальных функциональных возможностей
объектов, функций, операций и операторов.
Объекты
Button Form Location Reset
Checkbox Frame Math Select
Date
Document
FileUpLoad
Embed
Функции
escape
eval
parseFIoat
Операции
-
&= *
? - л
++ +=
== >
Операторы
delete
do...while
for
N
*_
^= „
<
>=
Function
Hidden
History
Link
parselnt
unescape
=
1
<<
>>
for... in
function
if... else
%
/
1
«
»
Navigator
Option
Password
Radio
%= &
1**1 //
1=
<= =
•= >>> >»=
return
while
with
Submit
Text
Textarea
Window
&&
/=
+
-=
= new
Таблицы с 26.2 по 26.4 содержат исходные с юйства
методы и обработчики событий.
Таблица 26.2. Свойства, поддерживаемые в
JavaScript 1 .0 и следующих версиях.
Свойство
action
aLinkColor
appCodeName
appName
appVersion
bgColor
checked
cookie
defaultChecked
defaultStatus
defaultValue
document
E
elements
encoding
fgColor
form
frames
hash
host
hostname
Объект
Form
Document
Navigator
Navigator
Navigator
Document
Checkbox, Radio
Document
Checkbox, Radio
Window
Password, Text, Textarea
Framr, Window
Math
Form
Form
Document
Checkbox, FileUpload, Hidden,
Password, Radio, Reset, Select,
Submit, Text, Textarea
Frame, Window
Link, Location
Link, Location
Link, Location
Свойство
Объект
href
lastModiAeu
length
linkCotor
links
LN10
LN2
location
LOG10E
LOG2E
method
name
options
parent
pathname
PI
port
protocol
sefected/ndex
self
search
SQRT1_2
SQRT2
Status
previous
prototype
referrer
search
selected
self
target
text
title
top
user Agent
URL
vlinkColor
value
window
Гарантия работы сценариев е браузерах Netscape и Microsoft
Глава 26
Таблица 26.3. Методы, поддерживаемые в
JavaScript 1 .Ои последующих версиях.
Link, Location
Document
Form, Frame, History, Select,
String, Window
Document
Document
Math
Math
Document, Window
Math
Math
Form
Button, Checkbox, FileUpload,
Form, Frame, Hidden,
Password, Radio, Reset,
Submit, Text, Textarea, Window
Select
Frame, Window
Link, Location
Math
Link, Location
Link, Location
Select
Window
Unk
Math
Math
Window
History
Date
Document
Location
Option
Frame
Form, Link
Option
Document
Frame, Window
Navigator
Document
Document
Button, Checkbox, FileUpload,
Hidden, Option, Password,
Radio, Reset, Submit,
Text, Textarea
Frame
Метод
abs
acos
alert
anchor
asin
atan
atan2
back
bg
blink
bold
blur
ceil
charAt
charCodeAt
clearTimeout
click
close
concat
confirm
r;os
exp
fixed
floor
focus
fontcolor
fontSize
forward
fromCharCcde
getDate
getDay
getHours
getMinutes
getMonth
getSeconds
getTime
getTimezoneOffset
getYear
go
handle Event
indexOf
italics
lastlndexOf
Объект
Math
Math
Window
String
Math
Math
Math
History
String
String
String
Password, Reset, Select, Text, Textarea
Math
String
String
Wndow
Button, Reset, Submit
Document, Wndow
String
Wndow
Math
Math
String
Math
Checkbox, Password, Reset, Select,
Text, Textarea
String
String
History
String
Date
Date
Date
Date
Date
Date
Date
Date
Date
History
Passworc' Select
String
String
String
Избранные программные технологии
ЕМУ Часть V
Метод
Jink
log
match
max
min
open
parse
pew
propt
random
round
select
setDate
setHours
seflvlinutes
setSeconds
setTime
setTimeout
setVear
sin
small
sqrt
strike
sub
submit
substring
sup
tan
toGMTString
toLocaleString
toLowerCase
toSource
toString
toUpperCase
UTC
write
writeln
Объект
String
Math
String
Math
Math
Document, Window
Date
Math
Window
Math
Math
FileUpLoad, Text, Textarea
Date
Date
Date
Date
Date
Frame, Window
Date
Math
String
Math
String
String
Form
String
String
Math
Date
Date
String
Math
Date, Math
String
Date
Document
Document
Обработчик
событий
onClick
onDblClick
onFocus
onKeyDown
onKeyPress
onKeyUp
onLoad
onUnLoad
onMouseDown
onMouseOver
onMouseUp
onSelect
onSubmit
JavaScript 1.1
Объект
Button, Document, Fiadio, Reset,
Submit, Text
Document
Password, Radio, Reset, Select, Text,
Textarea
Document
Document
Document
Window
Window
Button, Document
Link
Button, Document
Textarea
Form
JavaScript 1.1 поддерживается в Netscape Navigator 3.
Ниже приводятся
списки объектов, функций, опера-
ций, операторов, расширений дескрипторов и
измененных (по сравнению
ми) возможностей.
Объекты
Applet
Area
Array
Boolean
Функции
taint
Операции
typeof
Оператор
continue
) с предыдущими JavaScript-версия-
Function Object
Image Package
MimeType Plugin
Number String
untaint
void
Расширения дескрипторов
В дескриптор
SRC.
<SCRIPT> был добавлен атрибут
• Атрибут LANGUAGE для <SCRIPT> может опое-
Таблица 26.4. Обработчики событий, подцержива-
емые в JavaScript 1.0 и последующих версиях.
Обработчик
событий
Объект
делять версию языка.
Был добавлен дескриптор <NOSCRIPT>,
Поддержаны сущности JavaScript (такие как
&{myVar};).
Возможности
on Blur
Password, Radio, Reset, Select, Text,
Textarea
Добавлена LiveConnect
JavaScrip.
возможность связи Java и
Гараптипработы сценариев в браузерах Netscape и Microsoft
Глава 26
Добавлена возможность обнаружения доступных
подключаемых модулей.
Добавлены прототипы объектов, т.е. возможность
создания свойств, которые появятся во всех
объектах одного и того же типа.
• Добавлена возможность динамического изменения
объектов Select.
Добавлена возможность передачи строк между
сценариями в разных окнах или фреймах.
Изменен способ индексации свойств Object. Если
свойство определено по имени, необходимо всегда
ссылаться на него по имени. Точно так же, если
свойство определено через индекс, на него всегда
ссылаются, используя этот индекс.
eval() вместо встроенной функции стал методом
каждого объекта.
• Добавлена возможность печати и сохранения
динамического HTML, сгенерированного с помощью
методов write() и writeln(), с использованием
соответствующей команды из меню "File".
• Изменены три встроенных функции: isNaN, parseFloat
и parselnt, каждая из которых теперь выполняется
одинаково на всех платформах.
• Добавлена возможность удаления объекта, устанав-
лгвая ссылку на него равной Null.
• Добавлена возможность динамического сброса
обработчиков событий.
Добавлена поддержка преднамеренного искажения
данных для целей безопасности.
• Добавлена возможность использования строк в
качестве индексов массивов.
Таблицы с 26.5 по 26.7 содержат расширения свойств,
методов и обработчиков событий, добавленные в
JavaScript 1.1.
Таблица 26.5. Свойства, поддерживаемые в
JavaScript 1 . 1 и следующих версиях.
Свойство
Объект
applets
argurrents
bordei
caller
closed
complete
constructor
current
Document
Function
Image
Function
Window
Image
Object
History
Свойство
defaultSelected
description
domain
embeds
enabledPlugin
filename
formName
forms
hash
height
history
host
hostname
href
hspace
images
Java
length
lowsrc
MAX_VALUE
mimeTypes
MIISLVALUE
NaN
NEGATIVEJNFINITY
name
netscape
next
opener
pathname
plugins
port
POSITIVEJNFINITY
previous
protocol
prototype
search
sre
suffixes
sun
target
type
vspace
width
Объект
Option
MimeType, Plugin
Document
Document
MimeType
Plugin
Document
Document
Area
Image
Window
Area
Area
Area
Image
Document
Packages
Array, Plugin
Image
Number
Navigator
Number
Number
Number
Image, Plugin
Packages
History
Window
Area
Document, Navigator
Area
Number
History
Area
Boolean, Function, Image, Number,
Object
Area
Image
MimeType
Packages
Area
Button, Checkbox, FileUpload, Hidden,
MimeType, Password, Radio, Reset,
Select, Submit, Text, Textarea
Image
Image
Избранные программные технологии
Часть V
Таблица 26.6. Методы, поддерживаемые в
JavaScript 1.1 и следующих версиях.
Метод
blur
click
eval
focus
Java Enabled
join
refresh
reload
replace
reset
reverse
scroll
sort
split
taintEnabled
toSource
toString
value Of
Объект
Button, Checkbox, FileUpload, Frame, Submit,
Window
Checkbox
Object
Button, FileUpload, Frame, Submit, Window
Navigator
Array
Plugins
Location
Location
Form, Reset
Array
Window
Array
String
Navigator
Array, Boolean
Array, Boolean, Number, Object
Object
Таблица 26.7. Обработчики событий, поддержива-
емые в JavaScript 1.1 и следующих версиях.
Обработчик
событий
onAbort
onBlur
onChange
onClick
on Error
on Focus
onLoad
onMouseOut
onMouseOver
onReset
Объект
Window, Image
Button, Checkbox, FileUpload, Frame, Submit,
Wndow
FileUpload
Checkbox
Window, Image
Button, Checkbox, FileUpload, Frame, Submit,
Window
Image
Area, Link
Area
Form
JavaScript 1.2
JavaScript 1.2 поддерживается в Netscape Navigator 4.0-
4.05. Приведенные ниже списки перечисляют
расширения объектов, операторов и возможностей, которые
были добавлены в JavaScript 1.2 и в предыдущих
версиях не поддерживаются.
Объекты
Anchor
Event
Layer
Операторы
export
import
Возможности
RegExp
Screen
labeled
switch
•• Добавлена возможность управления слоями
Добавлена возможность программного управления
таблицами стилей.
• В метод ореп() окна добавленыдополнительныс
параметры, позволяющие осуществлять
дополнительную настройку открываемого окна.
• Если параметр LANGUAGE дескриптора <script>
равен JavaScriptl.2, операции равенства (== и !=)
сравнивают только операнды только подобных
типов.
Таблицы с 26.8 по 26.1 содержат расширения свойств,
методов и обработчиков событий, добавленные в JavaScript
1.2.
Таблица 26.8. Свойства, поддерживаемые в
JavaScript 1.2 и следующих версиях.
Свойство
Объект
above
anchors
arity
background
below
bgColor
data
document
height
innerHeight
innerWidth
language
layers
layerX
layerY
left
locationBar
menuBar
modifiers
name
outerHeight
outerWidth
Layer
Document
Function
Layer
Layer
Layer
Event
Layer
Document, Event
Window
Window
Navigator
Document
Event
Event
Layer
Window
Window
Event
Anchor, Layer
Window
Window
Свойство
радеХ
pageXOffset
pageY
pageYOffset
parentLayer
personalbar
platform
screenX
screenY
scrollbars
siblingAbove
siblingEelow
src
status bar
target
text
top
toolbar
type
visibility
which
width
X
У
zlndex
Кроме того,
Объект
Event, Layer
Window
Event, Layer
Wndow
Layer
Wndow
Navigator
Event
Event
Wndow
Layer
Layer
Layer
Window
Event
Anchor, Link
Layer
Wndow
Event
Layer
Event
Document, Event
Anchor
Anchor
Layer
поддерживаются все свойства, связан-
ные с объектами ReqExp и Screen.
Таблица 26.9.
JavaScript 1.2
Метод
Back
CaptureEvents
Clearlnterval
ClearTimeout
compile
concaf
Методы, поддерживаемые в
и следующих версиях.
Объект
Wndow
Document, Layer, Window
Frame, Wndow
Frame
RegExp
Array, String
disableExtemalCapture Window
enable ExtemalCapture Windwow
exec
find
forward
getFullYear
getMilliseconds
getSeiection
RegExp
Wndow
Wndow
Date
Date
Document
Гарантия работы сценариев
Метод
getUTCDate
getUTCDay
getUTCFullYear
getUTCHours
getUTCMilliseconds
getUTCMinutes
getUTCMonth
getUTCSeconds
handleEvent
home
load
match
moveAbove
move Below
move By
moveTo
moveToAbsolute
pop
print
push
release Events
replace
resize By
resizeTo
routeEvents
scrollBy
scrollTo
search
setFullYear
setlnterval
setMilliseconds
setUTCDate
setUTCFullYear
setUTCHours
setUTCMilliseconds
setUTCMinutes
setUTCMonth
setUTCSeconds
setlnterval
shift
slice
splice
stop
substr
e браузерах Netscape и Microsoft ЕУП
Глава 26 ВмИ
Объект
Date
Date
Date
Date
Date
Date
Date
Date
Area, Button, Checkbox, Document,
Form, Image, Layer, Link, Password,
Radio, Reset, Select, Submit, Text,
Textarea, Window
Window
Layer
String
Layer
Layer
Layer, Wndow
Layer, Window
Layer
Array
Frame, Window
Array
Document, Layer, Window
String
Layer, Wndow
Layer, Window
Document, Layer, Window
Wndow
Wndow
String
Date
Wndow
Date
Date
Date
Date
Date
Date
Date
Date
Frame
Array
Array, String
Array
Wndow
String
Избранные программные технологии
Часть V
test
toSource
tollTCString
unshift
unwatch
watch
RegExp
Array
Date
Array
Object
Object
Таблица 26.10. Обработчики событий,
поддерживаемые в JavaScript 1.2 и следующих версиях.
Обработчик
событии
Объект
onBlur
onDblClick
onDragDrop
onFocus
onKeyDown
onKeyPress
onKeyUp
onLoad
onMouseDown
onMouseOut
onMouseOver
onMove
on Resize
Layer
Link
Window
Layer
Image, Link, Textarea
Image, Link, Textarea
Image, Link, Textarea
Layer
Unk
Layer
Layer
Frame, Window
Frame, Window
JavaScript 1.3
JavaScript 1.3 поддерживается в Netscape Navigator 4.06-
4.7x. Ниже приведены списки расширения функций и
возможностей, добавленные в JavaScript 1.3 и не
поддерживаемые в предыдущих версиях.
Функции
IsFinite isNaN
Возможности
Соответствие ECMAScript 1.0.
Поддержка Unicode.
Новые операции строгого равенства ===== и !==.
Изменения в операциях равенства == и ! =.
Запрещение применения простого присваивания в
условном операторе типа if (x = у).
Любой объект с определенным и ненулевым
значением (включая объект логического типа, равный
false) при передаче его в условный оператор
считается равным true.
Таблица 26.11 содержит список расширений
методов, добавленных в JavaScript 1.3.
Таблица 26.11. Методы, поддерживаемые в
JavaScript 1.3 и следующих версиях.
Метод Объект
apply Function
call Function
toSource Array, Date, Function Number, Object String
toString String
JavaScript 1.4
ГСомпания Netscape не выпускала новых версий
браузера до тех пор, пока не появился JavaScript 1.4. Новые
функциональные возможности версии 1.4 перешли в
JavaScript 1.5 и поддерживаются в Netscape Navigator
6.0. Ниже приведены списки расширений операций и
операторов, добавленных в JavaScript 1.4 и не
поддерживаемых в предыдущих версиях.
Операции
in instanceof
Операторы
catch
throw
try
JavaScript 1.5
JavaScript 1.5 — последняя реализация Netscape,
которая поддерживается в Netscape Navigator 6.0. Ниже
приводится список расширений возможностей,
добавленных в JavaScript 1.5 и не поддерживаемых в предыдущих
версиях.
Возможности
Согласование с ECMAScript 3.0.
Ошибки времени выполнения программы
проявляются через исключения.
Расширения регулярных выражений.
Таблица 26.12 содержит список расширений
методов, добавленных в JavaScript 1.5.
Таблица 26.12. Методы, поддерживаемые в
JavaScript 1.5.
Метод
Объект
toFixed
to Exponential
Number
Number
JScript от Microsoft
Этот раздел включает три подраздела, по одному на
версию JScript. В каждом подразделе подробно рассмат-
Гарантия работы сценариев в браузерах Netscape и Microsoft
риваются все объе
событий, встроенн
;кты, свойства, методы, обработчики
1ые функции, операции и операторы,
новые для конкретной версии
СОВЕТ
JScript.
Для получения актуальной информации о
новых версиях
JScrol посетите Web-сайт Microsoft по адресу http://
msdn.microsoft.com/scripting/JScript/default.hfm.
JScript 1 .0
JScript 1.0 поддерживается в
Microsoft Internet Explorer
3.0. Ниже приведены списки основных
кций, операций и
Объекты
Area
Button
Checkbox
Dale
Document
Embed
FiieUpLoad
Form
Frame
Функции
escape
eval
parseFloat
Операции
г
&== -
?: л-
+-f += <
== > >=
Операторы
For
for. ..in
function
if...else
операторов.
Function
Hidden
History
Link
Location
Math
Navigator
Option
Password
parse Int
unescape
!= %
= /
I I
<< «:
>> »
return
while
with
Таблицы с 26.13 no 26.15
свойсгва, методы
%=
/"/
l =
= <=
= >»
: объектов, фун-
Radio
Reset
Select
String
Submit
Text
Textarea
Window
& & &
// /=
T
= -=
>>>= new
перечисляют основные
и обработчики событий.
Таблица 26.13.Свойства, по,
дцержиЕ
JScript 1.0 и следующих версиях.
Свойство
action
aLinkColor
appCodeName
applet!;
Объект
Form
Document
Navigator
Document
заемые в
Свойство
appVersion
bgColor
checked
cookie
defaultChecked
defaultStatus
defaulfValue
document
E
elements
encoding
fgColor
form
form
frames
hash
host
hostname
href
lastMcdified
length
linkColor
links
LN10
LN2
location
LOG10E
L0G2E
method
name
options
parent
pathname
PI
port
protocol
previous
referrer
search
selected
selectedlndex
self
Глава 26 fittl
Объект
Navigator
Document
Rado
Document
Radio
Window
Password, Text, Textarea
Frame, Wndow
Math
Form
Form
Document
Button, FileUpload, Hidden, Password,
Radio.Reset, Select, Submit, Text,
Textarea
Reset, Select, Submit
Frame, Wndow
Area, Link, Location
Area, Link, Location
Area, Link, Location
Area, Link, Location
Document
Form, Frame, History, Select, String
Document
Document
Math
Math
Document, Wndow
Math
Math
Form
Button, FileUpload, Form, Frame,
Hidden, Password, Radio, Reset, Select,
Submit, Text,Textarea, Wndow
Select
Frame, Wndow
Area, Link, Location
Math
Area, Link, Location
Area, Link, Location
History
Document
Area, Link, Location
Option
Select
Frame, Wndow
Избранные программные технологии
ЕШ Часть V
Свойство
SQRT1_2
SQRT2
status
target
:• <t
title
op
type
userAgent
URL
vlinkColor
value
window
Таблица 26.14.
Объект
Math
Math
Window
Area, Form, Link
Option
Document
Frame, Window
Button
Navigator
Document
Document
Button, FileUpload,
Hidden, Option,
Password, Radio, Reset, Submit, Text,
Textarea
Frame
Методы, поддерживаемые в
JScript 1 .0 и следующих версиях.
Метод
abs
acos
alert
anchor
asin
atan
atan2
back
big
blink
bold
blur
ceil
charAt
charCodeAt
clearTimeout
click
close
confirm
cos
•p
fixed
floor
focus
fontcolor
Объект
Math
Math
Wndow
String
Math
Math
Math
History
String
String
String
Button, Checkbox,
Reset, Select, Text
Math
String
String
Wndow
Password, Radio,
, Textarea
Button, Radio, Reset, Submit
Document, Wndow
Wndow
Math
Math
String
Math
Button, Password,
Text, Textarea
String
Radio, Reset, Select,
Метод
fontSize
forward
fromCharCode
getDate
getDay
getHours
getMinutes
getMonth
getSeconds
getTime
getTimezone Offset
gefYear
9°
indexOf
italics
lastlndexOf
link
max
min
open
parse
Г г
prompt
random
round
select
setDate
setHours
setMinutes
setMonth
setSeconds
setTime
setTimeout
sefYear
sin
sqrt
strike
;ub
submit
substring
sup
'; in
toGMTString
toLocaleString
toLowerCase
Объект
String
History
String
Date
Date
Date
Date
Date
Date
Date
Date
Date
History
String
String
String
String
Math
Math
Math
Document, Wndow
Date
Math
Wndow
Math
Math
FileUpLoad, F3assword,
Date
Date
Date
Date
Date
Date
Frame, Window
Date
Math
Math
String
String
Form
String
String
Math
Date
Date
String
Text, Textarea
Гарантия работы сценариев в браузерах Netscape и Microsoft
Метод
JoSource
toString
tollpperCase
UTC
write
writeln
Объект
Math
Date, Math
String
Date
Document
Document
Таблица 26.15. Обработчики событий,
ваемые в JScript
Обработчик
событий
onBlur
onChange
onClick
onDblClick
onFocus
onKeyDown
onKeyPress
onKeyUp
onLoad
onUnLciad
onMouseDown
onMouseOver
onMouseUp
onSelect
onSubinit
JScript 3.0
поддержи-
1 .0 и следующих версиях.
Объект
Password, Radio, Reset,
Textarea
Select, Text, Textarea
Button, Document, Radic
Submit, Text
Document
Password, Radio, Reset,
Textarea
Document
Document
Document
Window
Window
Button, Document
Link
Button, Document
Textarea
Form
Select, Text,
i, Reset,
Select, Text,
JScript 3.0 поддерживается в Microsoft Internet Explorer
4.0-4.5. Ниже приводятся списки расширений объектов,
операций и операторов, добавленных в JScript 3.0 и не
поддерживаемых в
Объекты
Applet
Array
Boolean
Event
Irragc
MimeType
Операции
typeof
Операторы
continue
delete
: предыдущих версиях.
Number
Object
Plugin
RegExp
Screen
void
do. ..while import switch
export labeled
Глава 26 Efill
Таблицы с 26.16 по 26.18 содержат свойства,
методы и обработчи!
<и событий, добавленные в JScript 3.0.
Table 26.16. Свойства, поддерживаемые в JScript
3.0 и следующих версиях.
Свойства
$*
$&
$'
$'
$+
$1,$2.[е1]$9
all
anchors
arguments
arity
availHeight
availWidth
border
caller
checked
closed
colorDepth
complete
constructor
current
data
defaultChecked
defaultSelected
description
domain
embeds
enabledPlugin
filename
form
form Name
forms
global
height
history
hspace
ignoreCase
images
innerHeight
innerWidth
input
language
Объект
RegExp
RegExp
RegExp
RegExp
RegExp
RegExp
RegExp
Document
Document
Function
Function
Screen
Screen
Image
Function
Checkbox
Window
Screen
Image
Object
History
Event
Checkbox
Option
MimeType, Plugin
Document
Document
MimeType
Plugin
Checkbox
Document
Document
RegExp
Event, Image, Screen
Window
Image
RegExp
Document
Window
Window
RegExp
Navigator
Избранные программные технологии
выбрать способ обхода ошибок с помощью методики
выяснения типа браузера, описанной в главе 27, или
вообще не использовать в сценарии спорные методы
решения.
Поскольку ошибки браузера существенно
отличаются в зависимости от версий браузеров, каждая из них в
отдельности рассматриваться не будет. При создании
сценария лучше всего в первую очередь учитывать
ошибки именно тех браузеров, которые будут
поддерживать данный сценарий. Как только принято решение
о типах браузеров, стоит потратить некоторое время на
обзор ошибок, связанных с этими браузерами.
Потрудитесь убедиться, что ошибки браузеров не мешают
сценариям.
Компания Netscape проделала громадную работу по
обеспечению доступа к полному списку всех ошибок,
имеющих отношение к JavaScript и связанных с
браузерами Netscape. Этот список ошибок находится на их
сайте по адресу http://devedge.netscape.com/support/
buj^known/ JavaScript.html.
Microsoft, напротив, не поддерживает доступный
список связанных с JScript ошибок, следовательно,
понадобится потратить какое-то время на поиск описания
ошибок на сайте Microsoft (msdn.microsoft.com).
Резюме
В главе рассматривались реализация JavaScript в
браузерах Microsoft и Netscape. На заре своего появления
язык JavaScript создавал программистам множество
проблем, но сейчас, наконец-то, стабилизировался —
благодаря усилиям Netscape, Microsoft и ЕСМА. Однако,
несмотря на стабильность JavaScript, не все могут
использовать самые новые браузеры. По этой причине
важно знать, какие функциональные возможности JavaScript
поддерживаются в различных версиях браузеров, а
также принимать во внимание, что каждый браузер имеет
свой набор досадных ошибок. Информация из этой
главы поможет обеспечить качественную работу
сценариев в браузерах Microsoft и Netscape.
Методы выяснения типа
браузера
В ЭТОЙ ГЛАВЕ
■ Подход "Все или ничего"
■ Подход "Выяснение по месту"
Перед описанием темы главы автору хотелось бы
представить читателям Джо. Джо — Web-разработчик,
который имеет огромное желание оживить собственный
Web-сгйт, создав с помощью JavaScript специальные
эффекты, упрощенную навигацию по сайту, анимиро-
ванные кнопки и возможности верификации данных.
Потратив немалую энергию и сделав все задуманное,
Джо вспомнил, что следовало бы убедиться в том, что
все разработанное под Netscape Navigator будет работать
и в Microsoft Internet Explorer, а также в старых
версиях Netscape Navigator. Да, жизнь не удалась.
Специальные эффекты опирались на неуниверсальные объекты
Layer, а в коде было задействовано много объектов
Array, которые вызывают проблемы в Navigator 2.O. В
результате получилось, что сайт оказался пригодным
только тем, кто располагал той же версией браузера, что
и у Джо.
Хотя Джо — вымышленный персонаж, та же
грустная история часто повторяется при реальной
разработке сайтов. Если разработчик использует JavaScript-код,
он несомненно столкнется с подобными проблемами.
Учитыва" различные степени совместимости JavaScript-
диалектов, несовместимость — первое, о чем
необходимо помнить в процессе разработки сценария. В конце
концов, главная цель использования JavaScript
заключается в расширении возможностей Web-сайта. Если
проигнорировать проблемы совместимости, то
пользователи, применяющие браузеры, которые не поддерживают
вашу версию JavaScript, будут весьма разочарованы.
Поэтому первой целью у разработчика Web-страниц
должна быть разработка "надежного" сценария —
сценария, максимизирующего возможности более поздних
версий JavaScript, но при этом учитывающего
возможности браузеров, обеспечивающих меньшую степень
поддержки. В этой главе рассматриваются два метода
выяснения типа браузера клиента.
Подход "Все или ничего"
Первая методика, которую можно обозначить как
подход "Все или ничего", определяет, может ли
выполниться сценарий целиком или он полностью игнорируется
браузером. Для применения такой методики в параметре
language дескриптора <script> потребуется определить
ожидаемый диалект. Операторы в пределах
дескриптора <script> будут игнорироваться, если браузер не
поддерживает заданную версию JavaScript.
Преимущество использования данной технологии
состоит в том, что можно быть уверенным — если
браузер понимает параметр language, то он обеспечит полную
поддержку требуемого JavaScript-диалекта. Недостаток
технологии связан с тем, что браузеры, не
поддерживающие указанный диалект, принудительно игнорируют
весьсценарий.
Подход "Выяснение по месту"
Альтернативой подхода "Все или ничего" является
метод "Выяснение по месту" (иногда называемый
"обнаружение браузера"). Эта технология предполагает
определение версии браузера в сценарии перед выполнением
кода, критичного к версии JavaScript.
Хотя эта методика несколько сложнее, однако она
обладает преимуществом в том, что здесь возможно
обеспечить альтернативную функциональность для
браузеров, не поддерживающих конкретную версию JavaScript.
При помощи объекта Navigator в JavaScript можно
получить четыре вида полезной информации, связанной с
браузером.
ЕЩ Избранные программные технологии
J ~ Часть V
Тип браузера
Свойство appName объекта Navigator предоставляет имя
браузера клиента. Двумя наиболее популярными
браузерами по праву считаются Netscape и Microsoft Internet
Explorer. Следующая строка отображает имя браузера:
document.write(navigator.appName);
Если требуется идентифицировать другие типы
браузеров, необходимо использовать свойство userAgent
объекта Navigator. Это свойство содержит большой
объем информации, но если организовать поиск
определенной строки через метод indexOf(), можно
идентифицировать имя браузера. Поскольку значением
является строка, неплохо ее преобразовать к нижнему
регистру с целью упрощения сравнения. Таблица 27.1
содержит некоторые из наиболее частых значений
свойства userAgent и соответствующие им типы браузеров.
Таблица 27.1. Значения свойства userAgent.
Значение Браузер
mozilla Netscape Navigator
msie Microsoft Internet Explorer
opera Opera
webtv Web TV
Следующий фрагмент кода определяет различные
типы браузера с использованием свойства userAgent:
var browserType =
navigator.userAgent.toLowerCase();
If (browserType.indexOf('mozilla')
document.write ("Netscape Navigator") ;
else if (browserType.indexOf('msie')
document.write("Microsoft Internet Explorer");
else if (browserType.indexOf('opera')
>cument.write ("Opera") ;
else if (browserType.indexOf('webtv')
document.write("WebTV");
СОВЕТ
Для получения дополнительной информации о строке
userAgent посетите Web-сайт по адресу http://
ww w.it97 .de / JavaScript/ JS_tutorial / bstat / navobj.html.
Версия браузера
Свойство appVersion объекта Navigator предоставляет
сценарию информацию о версии клиентского браузера.
Следующая строка программы отображает версию
браузера на экране:
document.write(navigator.appVersion);
Если преобразовать это свойство в число с
плавающей точкой (т.е. не целое) с помощью метода parseF1oat(),
все можно свести к простым математическим
сравнениям. Почему это удобнее, будет показано в следующем
разделе при определении версии JavaScript. Следующая
строка кода содержит способ создания такого значения
с плавающей точкой:
var browserVersion =
parseFloat(navigator.appVersion);
Версия JavaScript
Воспользовавшись знаниями о JavaScript-диалектах,
полученными из главы 26, можно определить, какая
версия JavaScript используется по типу браузера и
информации о версии, упоминавшейся выше. Таблица 27.2
показывает, как тип браузера и информация о версии
соответствует версии JavaScript.
Таблица 27.2. Версии JavaScript.
Версия
JavaScript
1 0
:0
i I
1 2
1.2
1 3
1.4
i 4
Браузер
Navigator
Internet Explorer
Navigator
Navigator
Internet Explorer
Navigator
Navigator
Internet Explorer
Версия
браузера
2(
3.0
3,0
4.CM.05
4.0
4.0&4.5
5.0
5.0
Платформа операционной системы
Свойство platform объекта Navigator представляет
информацию о платформе операционной системы
клиента. Следующая строка программы отображает
платформу операционной системы:
document.write(navigator.platform);
Эта информация будет необходима, если, например,
предпринимается попытка обойти в Macintosh ошибку,
которая существует только в Netscape Navigator. В
большинстве случаев эта информация не нужна, но если все-
таки она потребуется, то вам уже известно, как ее
получить.
Пример динамического позиционирования
Теперь, когда рассмотрено множество способов
получения информации о клиентском браузере и его
операционной системе, рассмотрим соответствующий пример.
Одно из самых больших и досадных различий
между Navigator и Internet Explorer на сегодняшний день —
это способы динамического позиционирования. Netscape
выполняетдинамическоепозиционирование, используя
Методы выяснения типа браузера
Глава 27
свой объект Layer, a Microsoft — используя
HTML-дескриптор <div>. Для реализации динамического
позиционирования, которое будет работать одинаково хорошо
в браузерах как Netscape, так и Microsoft, потребуется
записать код на JavaScript для определения типа
клиентского браузера.
Листинг 27.1 создает два слоя (один красный и
другой обычный текст), используя в одном случае
дескрипторы <div>, в другом —дескрипторы <1ауег>. Красный
блок содержит кнопки, которые перемещают блок вдоль
окна браузера. Красный блок также имеет кнопку,
которая заставляет текстовое поле исчезать и вновь
появляться (см. рис. 27.1). Фактическое движение
выполняется путем изменения значений свойств слоя в случае
слоев в Netscape или через таблицу стилей в случае
блока <div>. Дополнительную информацию об
использовании слоев и дескриптора <div> можно найти в главе
23.
Листинг 27.1. Обнаружение браузеров Navigator и
Internet Explorer.
<html>
<body>
<script language="javaScript">
//Создать дескриптор <1ауег>, если это netscape
if(navigator.appName.indexOf("Netscape") != -1)
document.write('<layer id="redBox" ■) ;
//Создать дескриптор <div>, если это Microsoft
if(navigator.appName.indexOf("Microsoft") != -1)
document.write("<div id='redBox' ") ;
//Установись стиль, используемый красным блоком
document.write('style="position:absolute; ') ;
document.write(■left:150px; ■) ;
document.write('top:150px; ');
document.write('background-color:red;">') ;
II—>
</script>
This is
<form>
<inpu t:
a block of moving buttons
type="button"
value="UP"
onClick="moveUp()">
<input: type="button"
value="DOWN"
onCLick="moveDown() ">
<input type="button"
value="LEFT"
onClick="moveLeft()">
<inpu1: type="button"
value="RIGHT"
onClick="moveRlght() "XBR>
<inpul: type="button"
value=" SHOW/HIDE Text Box"
onClick="showHide()">
</£orn>
<script
language=" JavaScript">
//Если это Netscape, выдать закрывающийся
//дескриптор </1ауег>
if (navigator.appName.indexOf ("Netscape") != -1)
document. write ( "</layer>") ;
//Если это Microsoft, выдать закрывающийся
//дескриптор </div>
if (navigator.appName.indexOf ("Microsoft") != -1)
document.write("</div>") ;
II—>
</script>
<script languages" JavaScript">
//Если это Netscape, создать текстовый блок
//через <1ауег>
if (navigator.appName. indexOf ("Netscape") != -1)
I
document.write ( '<layer id="textBox" >');
document .write ("Here is some text defined as
a block") ;
document. write("</layer>") ;
]
//Если это Microsoft, создать текстовый блок
//через <div>
if (navigator. appName. indexOf ("Microsoft") != -1)
(
document. write ("</div>" ) ;
document .write ( "<divid= ■ textBox' >" ) ;
document, write ("Here is some text defined as
*»a block") ;
document. write ( "</div>1) ;
}
II—>
</script>
<SCript language="JavaScript">
<! —
var isNetscape = 0 ;
var isMicrosoft = 0;
//Определение типа браузера
if (navigator.appName. indexOf ("Netscape") != -1)
isNetscape = 1;
if (navigator. appName. indexOf ("Microsoft") != -1)
isMicrosoft = 1 ;
//Переместить красный блок на 20 пикселов вверх
function moveCJp ( )
{
if (isNetscape)
document, layers. redBox. pageY+=( -20) ;
if (isMicrosoft)
document, all -redBox.style.pixelTop+=( -20) ;
}
//Переместить красный блок на 20 пикселов вниз
function moveDown ( )
if (isNetscape)
document. layers. redBox.pageY+=20 ;
if(isMicrosoft)
document. all. redBox. style. pixelTop+=2C;
/Пер иестить красный блок на 20 пикселов влево
function moveLeft()
i
if (isNetscape)
Избраннь программные технологии
Часть V
document.layers.redBox.pageX+=(-20);
if (isMicrosof t)
document. all. redBox. style.pixelLef t+= (-20) ;
}
//Переместить красный блок на 20 пикселов
//вправо
function moveRight()
<
if(isNetscape)
document.layers.redBox.pageX+=20;
if(isMicrosoft)
document.all.redBox.style.pixelLeft+=20;
}
//Скрытгь или отобразить текстовый блох
function showHide()
\
if(isNetscape)
\
//Если текстовый блок скрыт, сделать его
//видимым
if(document.layers.textBox.visibility ==
"hide")
document.layers.textBox.visibility="inherit";
else
document.layers.textBox.visibility="hide";
i
if(isMicrosoft)
I
//Если текстовый блок скрыт, сделать его
//видимым
if(document.all.textBox.style.visibility ==
"hidden")
document.all.textBox.style.visibility="visible";
else
document, all. textBox. style. visibility="hidden" ;
II—>
</script>
</body>
</html>
C:\Temp\tB9thtml - Microsolt Internet Explorer provided by MindSpfing ... j
Here is some text defined as a block
"' ^llQW/rtD^ijxtfiox ...
iJ
РИСУНОК 27.1. Обнаружение браузеров NavigatO и Internet
Explorer.
ПРЕДУПРЕЖДЕНИЕ
В Netscape Navigator, как вы, вероятно, обратили
внимание, при перемещении кнопок текст, связанный с
кнопками, иногда двигается в беспорядке. Это
происходит из-за того, что при изменении свойства layer
Netscape не обновляет весь экран. Internet Explorer в
данном случае работает лучше, поскольку он
обновляет экран при изменении свойств таблицы стилей.
Кроме того, Netscape случайным образом
перекрашивает фон слоя в красный цвет.
В последнем примере метод indexOf() применялся
для поиска строки "Netscape" или "Microsoft" в свойстве
appName объекта Navigator. В зависимости от того,
какая строка найдена, значение true присваивается либо
переменной isNetscape, либо переменная isMicrosoft
Эти переменные затем используются для определения,
какие именно функциональные возможности браузера
должны применятся.
Если в сценарии требуется более детальная
информация о браузере, полезно создать функцию, которая
определяет и тип браузера, и его версию. Например,
функция determineCurrentBrowser(), показанная в следующем
коде, исследует свойства appName и appVersion объекта
Navigator и затем на их основе устанавливает значение
глобальной переменной CURRENT_BROWSb R:
/* Глобальные переменные */
var CURRENT_BROWSER = new String!) ,-
■'* /
determineCurrentBrowser{) {
var bwr = navigator.appName;
var ver = parseFloat (navigator. appVers on) ;
if ( bwr = "Netscape" f if i ver >= 5)
CURRENT_BROWSER = "Netscape 5.0";
if ( bwr = "Netscape" && ver >= 4-06 &&
ver <=4.5) CURRENT_BROWSER = "Netscape
^4.06 - 4.5";
if ( bwr = "Netscape" && ver >= 4 ss
ver <= 4.05) CURRENT_BROWSER = "Netscape
*»4.0 - 4.05";
if ( bwr = "Netscape" && ver = 3 )
CURRENT_BROWSER = "Netscape 3.0";
if ( bwr = "Netscape" Si ver = 2 )
CURRENT BROWSER = "Netscape 2.0";
В качестве альтернативы, можно забыть о браузерах
и сосредоточиться на самых высокоуровневых
возможностях предлагаемой версии JavaScript. Преимущество
такого метода состоит в том, что зачастую он
оказывается проще применительно для операций сравнения:
/* Глобальные переменные */
var JS VERSION
Методы выяснения типа браузера
Глава 27
function JSVersionCheck() {
var bwr = navigator.appName;
var ver = parseFloat (navigator. appVersion) ;
if ( bwr == "Netscape" && ver >= 5)
JS_VERSION = 1.4;
if ( bwr = "Netscape" && ver >= 4.06 S&
ver <=4.5' JS_VERSION = 1.3;
if ( bwr = "Netscape" SS ver >= 4 &&
ver <= 4.05) JS_VERSION = 1.2;
if ( bwr = "Netscape" && ver ^ 3 )
JS_VERSION = 1.1;
if ( bwr = "Netscape" && ver = 2 )
JS VERSION = 1.0;
Резюме
В главе были рассматривались два метода, которые
можно использовать для преодоления несовместимости в
сценариях. Первичная цель применения JavaScript
состоит в расширении возможностей Web-сайтов. Если
проигнорировать проблемы совместимости, то
пользователи, применяющие браузеры, которые не
поддерживают выбранную разновидность JavaScript, не смогут
получить то, что ожидали. Таким образом, при создании
сценариев необходимо задействовать методы выяснения
типа браузера, которые расширяют возможность
применения более поздних версий JavaScript, но при этом
также учитывают браузеры, обеспечивающие меньшую
степень поддержки.
Навигация по сайту с
использованием JavaScript
В ЭТОЙ ГЛАВЕ
■ Исследование технологий навигации
■ Создание сценария для динамической
инструментальной панели
■ Использование объекта History
Исследование технологий навигации
JavaScript перекладывает большую часть работы го
доставке и форматированию содержимого на браузер
вместо реализации этих операций на стороне сервера Одной
из положительных черт подобного управления со
стороны клиента является усовершенствование навигации.
Вместо обеспечения простых статических ссылок,
связывающих Web-страницы сайта, разработчики могут
теперь задействовать JavaScript для управления
отображением информации на сайте.
До появления фреймов было трудно добавлять
навигационные средства к Web-странице без того, чтобы
ограничить по нескольким направлениям схему
размещения информации на сайте и его содержимое.
Например, отображение карты, постоянно показывающей вид
сайта, можно было реализовать только за счет
помещения ее на каждую страницу. Карта должна была иметь
достаточно небольшие размеры, дабы не отвлекать
Пользователя. Если просматриваемая страница была
слишком длиной, карта во время просмотра страницы
пользователем часто оказывалась недоступной.
Ограничение сайта до одной страницы не могло, конечно же,
рассматриваться в качестве варианта, а если карта сайта
была доступна только на протяжении части времени
просмотра, это выглядело весьма непрофессионально.
Фреймы помогают решить эту проблему. Разбиение
окна браузера на подокна позволяет сохранять карту
сайта видимой все время, пока пользователь
просматривает разные страницы HTML-документа. За счет
щелчков на ссылках, находящихся на карте сайта, новая
страница отображается в другом фрейме. JavaScript для этого
не требуется. Просто используйте атрибут target
дескриптора <А> для указания на любой требуемый фрейм.
Однако, возникает вопрос — что делать, если текущая
страница содержит форму ввода данных, которая
должна быть отправлена перед переходом к другой
странице? Отправка формы с помощью кнопки "Submit" — это
хорошо, но она переведет пользователя на ноную
страницу, не содержащую карту. В ряде случаев лучшим
выходом может оказаться предоставление пользователю
возможности перемещения по всему сайту без
необходимости нажатия на кнопку отправки формы после ее
заполнения. Это достигается с помощью JavaScript, если
только поместить формы в фреймы.
В случае, если карта сайта достаточно велика, в
каждый момент времени можно отображать только часть
карты. При этом возникает необходимость в
обновлении карты. Как обновить карту, отправить форму,
отобразить Полный документ и проследить
местонахождение пользователя с помощью одного щелчка мыши?
Самый простой путь для этого — JavaScript.
Описанные в главе навигационные методы демонстрируют
способы создания и использования динамической
инструментальной панели, а также использование JavaScript-
объекта History.
Создание сценария для динамической
инструментальной панели
Инструментальная панель один из элементов
стандартного пользовательского интерфейса, часто
используемого для навигации практически в любом приложении. В
JavaScript динамическая инструментальная панель — это
Панель, которая изменяется в результате взаимодействия
Пользователя с ней. Для примера ниже показана
инструментальную панель, которая управляет простой
слайдовой демонстрацией. Четыре кнопки на инструменталь-
Навигация по сайту с использованием JavaScript
Глава 28
ной панели используются для перемещения вперед и
назад по массиву слайдов. Две других кнопки
используются для запуска или останова автоматического
цикла по всем слайдам. Логический путь создания такой
программы состоит в построении двух объектов — Button
и Toolbar.
Создание объекта Toolbar
Инструментальную панель можно рассматривать как
набор кнопок, поэтому дадим объекту Toolbar имя
buttonSet. Листинг 28.1 показывает конструктор buttonSet,
который обычно устанавливает все свойства и методы,
доступные в инструментальной панели.
Листинг 28.1. Конструктор объекта buttonSet.
function buttonSet (name)
l
/*
* Списание: конструктор объекта кнопки.
* Аргументы: name - Имя переменной buttonSet.
// Свойства
th^s.name = name;
this.startlndex = 7;
thus.length = 7;
thxs.isBusy = false;
. . ]>~2ТОД
th L s.addBtn = addBtn;
this.print = print;
th L s.clear = clear;
return this;
}
Метод addBtn создает и добавляет в bnttonSet новый
объект Button. Метод print записывает bnttonSet в HTML-
документ. Метод clear устанавливает все кнопки,
содержащиеся в пределах bnttonSet, в их первоначальное
состояние доступности/недоступности. Эти методы
подробно описываются в следующих разделах.
Использование объекта Button
Объект bnttonSet используется для управления одним и
более объектов Button. Каждый объект Button содержит
информацию о нажатии кнопки или отображении ее в
виде HTML-элемента <lmg>. Листинг 28.2 показывает
две функции, которые применяются для создания
нового объекта Button.
Листинг 28.2. Метод click и конструктор объекта
Button.
function click()
£
'*
* Описание: Метод объекта кнопки. Реализует
* команду этой кнопки.
Аргументы: Нет.
eval (this. command) ;
function button(name, file,
condition, command)
alt, url, spacer.
• *
Описание: объект кнопки.
Аргументы:
name - Имя кнопки в HTML-коде,
file - URL изображения кнопки,
alt - Атрибут alt для кнопки,
url - URL соответствующего buttonSet.
spacer - количество пикселов после кнопки
condition - условный оператор, который
определяет, должна ли
отображаться эта кнопка.
commmand - Команда, которую реализует
кнопка.
// Свойства
this, name = name;
this.file = file;
this.alt = alt;
this.url = ur1;
this . spacer = spacer ;
this, condition = condition;
this.command = command;
// Методы
this.click =
return this;
click;
>
Свойство name представляет HTML-имя кнопки.
Свойство file кнопки — исходный URL-адрес
изображения кнопки. Свойство alt хранит значение
HTML-атрибута alt. Свойство URL применяется в качестве свойства
HREF якоря, связанного с изображением кнопки.
Используя графический файл с прозрачностью, свойство
spacer определяет, сколько места осталось для
размещения изображения еще одной кнопки справа от данной.
Это позволяет создавать в инструментальной панели
различные разделы либо помешать туда изображения
кнопок разной величины. Button будет отображаться
только, если его условное выражение равно true. Это —
ключ к определению того, какие кнопки отображены и
доступны для нажатия. Всякий раз когда объект
buttonSet присутствует на HTML-странице,
необходимо смотреть на условное выражение для каждого
объекта Button, чтобы определить, доступен ли Button для
щелчка. Если доступен и пользователь щелкает на
кнопке, команда выполняется. Строка команды может быть
любым оператором JavaScript в случае, если она
выполняется в контексте документа, в котором был создан
buttonSet.
Избранные программные технологии
Часть V
Созданиеэкземпляровинструментальной
панели
С помощью приведенных ниже строк кода программа
слайдовой демонстрации создает новый объект buttonSet
и сбрасывает его текущее состояние.
Toolbar = new buttonSet("Toolbar");
Toolbar.clear();
При создании нового экземпляра buttonSet важно,
чтобы аргумент, переданный конструктору, был равен
имени переменной создаваемого объекта. Это
позволяет объекту buttonSet создавать команды JavaScript,
используя собственное имя. Метод clear() используется
для установки и сброса значений глобальных
переменных, использующих buttonSet для определения, какие
из его кнопок разрешены для нажатия. Листинг 28.3
показывает метод clear(), реализованный для приложения
Slide Show.
Листинг 28.3. Метод clear() объекта buttonSet.
function clear ()
/*
* Описание: Метод объекта buttonSet.
* Используется для сброса всех
* глобальных переменных, на
* которые ссыпаются кнопки в
* buttonSet на основе своих
* условных выражений.
* Аргументы: Нет.
V
gIsRunning=false;
>
Как только новый экземпляр buttonSet создан,
приложение Slide Show с использованием метода addBtn()
создает кнопки. Первая создаваемая кнопка показана в
следующем коде:
Toolbar.addBtn("First","graphics/first.gif",
"First Picture",0,"true",
"changeSlide(■first')");
Листинг 28.4 отображает полный код метода addBtn().
который создает новый объект Button и затем добавляет
его в buttonSet.
Листинг 28.4. Метод addBtnQ объекта buttonSet.
junction
addBtn(name,file,alt,spacer,condition,command)
Описание: Метод об-ькта buttonSet, который
добавляет новую кнопку set.
Аргументы: name - (string) Имя кнопки в
HTML-коде.
file - (string) ttrl изображения
кнопки.
alt - (string) Атрибут alt
spacer (integer) количество
пикселов после кнопки.
condition - (string) условный
оператор, который
определяет, должна
ли отображаться
кнопка.
commmand (string) Команда,
которую реализует
кнопка.
var i = this.length;
this[i] = new button (name, file, alt,
"javascript:parent. "+this.name+" ["+i+']"+
".click()",spacer,condition,command);
this.length++;
)
Аргумент url, указанный для конструктора кнопки в
листинге 28.4, заслуживает дополнительного внимания.
Эта строка будет использоваться как свойство
HREF изображения кнопки. Приведенный ниже пример —
это HTML-код, сгенерированный для первой кнопки
Slide Show:
<a href="javascript:parent.Toolbar[7]. click{(">
<img src="graphics/first.gif" alt="First
Picture" width="24" height="24" border=0>
</a>
Когда пользователь щелкает на изображении,
вызывается метод click() седьмого свойства объекта Toolbar.
Седьмой элемент в объекте Toolbar (который, по
существу, является массивом) — это элемент, в котором при
помощи метода addBtn() был сохранен первый объект
Button. Это — лучший способ вызвать метод click() в
любом фрейме, хорошо работающий как в браузере
Microsoft, так и в Netscape. Объект buttonSet
установлен таким образом, что программист, использующий
его, не должен следить за нумерацией кнопок.
Отображение инструментальной панели
Глобальная переменная glsRunning будет иметь
значение true, если программа слайдовой демонстрации
автоматически проходит через каждый слайд; иначе она
будет равна false. Эта переменная используется в
четырех объектах Button для отображения двух кнопок
одновременно. Одна иллюстрирует активное состояние, а
другая — заблокированное (кнопка недоступна для
щелчка, что отображается на экране бледными цветами).
Следующие примеры содержат две кнопки, которые
зависят от glsRunning:
Toolbar. addBtn ("Start", "c~aphics/auto. gif",
"Start Slideshow", 0, "gIsRunning=f alse",
"changeSlideCstart1)") ■
Toolbar. addBtn ("StartGre- " "graphics/
■-autoGrey.gif", "Start Slideshow", 0,
"gIsRunning=true", "");
Навигация по сайту с использованием JavaScript
Кнопка StartGrey отображается только, если
значение glsRunning равно true. Если же glsRunning равна
false, отображается кнопка Start. Если кнопка Start
доступна и пользователь совершает на ней щелчок, в
функции changeSlide() выполняется следующий код:
if(command = "start") {
glsRunning = true;
Toolbar.print(window.frames[2].document);
gTimer =
window.setTimeout("startAuto()",1500);
)
Значение переменной glsRunning установлено в true,
а инструментальная панель помещена в выбранный
объект Document. Текущая инструментальная панель
удаляется и создается новая HTML-страница,
содержащая новую инструментальную панель, которая
учитывает новое состояние glsRunning. Это означает, что
кнопка StartGrey будет доступной, а кнопка Start даже
не помещена на новую страницу. Это дает иллюзию
установки запрета выбора кнопки "Start", тогда как на
самом деле это совсем другая кнопка. В листинге 28.5
показан метод print(), который отвечает за подготовку
новой HTML-страницы.
Метод print() начинается с установки флажка isBusy
в true, что предотвращает нажатие пользователем других
кнопок во время обновления инструментальной панели.
Глава 28
Затем формируется базовый URL, который
приравнивается к базовому URL текущего окна. Он сохраняется в
переменной topBase и используется при генерации
дескриптора <base> для нового документа с
инструментальной панелью. Предполагается, что имя файла для
устанавливающего фреймы HTML-документа Кмеет длину
двенадцать символов, например, SlideShw.htm. Это
должно обеспечить согласование с версиями до Netscape
Navigator 3.0.
ПРЕДУПРЕЖДЕНИЕ
Если ошибиться в определении базового URL для
сгенерированного при помощи JavaScript
HTML-документа, то версии Netscape Navigator до 3.0 не смогут
понять некорректный URL
Метод print() продолжает работу, открывая доступ
к целевому документу. Затем метод записывает каждую
строку HTML, требуемую для формирования
Web-страницы с инструментальной панелью. Для центрирования
кнопок можно воспользоваться таблицей. Цикл for
применяется для последовательной записи каждой кнопки,
которая сохраняется в buttonSet. Если был задан
символ пробела, напечатается пустой графический символ
и "размножится" до требуемого количества пикселов.
Наконец, документ закрывается и окно браузера
обновляется.
Листинг 28.5. Метод print() объекта buttonSet.
function print (dOb j)
/*
Описание: Метод о&ьехта buttonSet.
Аргументы: dobj - объект document.
содержащий buttonSet.
this.isBusy = true;
var spacelnt;
var DQUOTE = ■ \"';
var topBase = "",-
var basePath = ""+window.location.pathname;
var baseDir = "";
var baseFile = basePath.substring(basePath.length-10,basePath.length)
baseDir = basePath.substring(0,basePath.length-12);
topBase=window.location.protocol*"//"+window.location.host+baseDir;
dOb j . open () ;
dObj.bgColor = parent.frames["'.document. bgColor;
dObn.writeln("<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML/ZEN"^) ;
dObj . writeln (■ <htmlxhead>') ;
dobj.writeln(,<title>Toolbar</title>');
dObj.writeln('<base href = ' +DQ.UOTE+topBase+DQ.CJOTE+ • >■) ;
dObj.writeln('<script language="JavaScript">');
dObj.writeln('</script>');
dObj.writeln('</head>') ;
dObj . wr iteln ("<body bgcolor=" ■ + parent. frames [0] . document. bgColor. toUpperCase ()+'">') ,
dObj.writeln('<center>');
dObj.writeln("<table width="100%" border="0">');
dObj .writeln ('<trXtd align="center">') ;
//Вывод кнопок, начиная со свойства с номером i.
Избранные программные технологии
Часть V
for(var i = this.startlndex; this.length > i; i++)
(
if(eval(this[i].condition))
II
dObj .write ('<A HREF = " '+this[i] .url+'">■) :
dObj.write('<ijng src=" '+this[i] .file+" " alt=" '+tiis[i] .alt+" " width="24" height="24"
■-border=0> ' ) ;
dObj ite( ' </A>" ) ;
// Добавить пустое пространство, если это определено.
spacelnt = 0 + this[i] .spacer;
if(spacelnt != 0)
i
dObj .write ( ■ <imgsrc="graphics/space.gif" width= '+spacelnt+ ■ height» 24 border=0>')
1
J
I
dObj .writeln( ,</tdX/trX/tabie>") ,-
dObj.writeln(■</center>');
dObj . writeln (' </bodyX/html>') ;
dObj.close();
this.isBusy = false;
1
Обновление инструментальной панели
Как можно понять из сказанного выше, обновления
инструментальной панели проводить легко, необходимо
только вызвать метод print(). Просто установите
глобальные переменные, от которых зависят кнопки, и вызовите
print(). Документы в других фреймах могут также
обновлять инструментальную панель. Например, несложно
изменить приложение Slide Show так, чтобы
пользователь не смог запустить слайдовую демонстрацию,
начиная с последнего слайда. Для этого потребуется добавить в
метод clear() новую глобальную переменную с именем
gCanStart к методу с1еаг() и установить ее равной false.
Затем необходимо изменить addBtn, которая вызывается
для кнопок Start и StartGrey так, чтобы она учитывала
вновь появившуюся gCanStart. Новый код будет
выглядеть следующим образом:
Toolbar.addBtn("Start", "graphics/auto.gif",
"Start Slideshow", 0, "gIsRunning=false &&
b»gCanStart=true", "changeSlide ('auto') ") ;
Toolbar.addBtn("StartGre-", "graphics/
^autoGrey.gif", "Start Slideshow", 0,
w"gIsRunning=true || gCanStart=false", "")
Затем потребуется вставить в раздел <head>
последнего слайдового документа следующий сценарий:
<SCript language="JavaScript">
<! —
var savedState ;
savedState = parent.gCanStart;
parent.gCanStart=false;
parent.Toolbar.print(parent.frames[2].document);
parent.gCanStart=savedState;
II—>
</script>
И наконец, необходимо добавить еще один вызов
метода print() объекта Toolbar, срабатывающий при
выходе из документа:
ия
<body onUnload="parent. Toolbar. print (parent.
wframes [2] . document) ">
Приведенная строка кода вернет инструментальную
панель в предыдущее состояние после перехода к
следующему слайду.
Если при переходе к следующему слайду
устанавливаются глобальные переменные и обновляется
инструментальная панель, исчезает необходимость обновления
инструментальной панели через обработчик событий
on Unload. Используя подобный подход, можно в
каждом документе определять, какие кнопки отображать,
зная, что эта информация будет сбрасываться каждый
раз при загрузке следующего документа.
Использование приложения Slide Show
На сопровождающем CD-ROM находится каталог,
содержащий все файлы, необходимые для приложения
Slide Show. Для активизации мультифреймового окна
просто загрузите slideshow.htm в браузер.
Инструментальная панель используется здесь для передвижения по
слайдам и по соответствующим их описаниям. Рисунок
28.1 демонстрирует, как приложение Slide Show
выглядит после загрузки в браузер.
В программу входят пять слайдов. Инструментальную
панель можно использовать для продвижения вперед или
назад по слайдам (соответственно, с помощью третьей и
второй кнопок). Можно также воспользоваться первой
и четвертой кнопками для перемещения к первому и
последнему слайду. Последние две кнопки справа
запускают и останавливают продвижение по слайдам.
Обратите внимание, что последняя кнопка недоступна и
отображается соответствующим образом. Это кнопка
StartGrey. После щелчка на кнопке Start (с
изображением стрелки вправо и эллипса) программа слайдовой
Навигация по сайту с использованием JavaScript
ЕШ
демонстрации начинает циклически проходить по
каждой паре HTML-документов. На рис. 28.2 показан экран
браузера в процессе слайдовой демонстрации. Обратите
внимание, что кнопка останова доступна, тогда как
кнопка Start — нет.
ЦЗЕ2|- Р'UnlaaEhad - NBtecnpe НПО
РИСУНОК 28.1. Инструментально, панель приложения Slide
Show.
^j23 СФ1 Unlflaahed - Netecflpa HOE]
№. JWl, Xw .£о1,,£сттЧ',";~| te'ri
P«eo with b'g ears.
| I"I'I>H№1
, t-_^*-i, омтеам^.^: .и _««_m ja л - --
РИСУНОК 28.2. Слайд в процессе выполнения программы
слайдовой демонстрации.
Обсуждение дополнительных
возможностей
Ключевой объект buttonSet можно изменить еще
больше. Например, его можно модифицировать с целью
обеспечения поддержки вертикальных
инструментальных панелей вместо горизонтальных либо даже для
реализации обоих видов панелей. Для этого просто измените
метод print(), добавив после каждой кнопки дескриптор
<Ьг>. Можно также создать инструментальную панель
в отдельно! окне браузера. Такая панель может
использоваться как навигационный инструмент или даже как
справочное меню. Никакие модификации для этого не
требуются. Просто передайте в метод print() объект
Document нового окна.
Использование объекта History
До сих пор рассматривались способы навигации по
предварительно созданным Web-страницам. Но что если на
Web-странице необходимо обеспечить навигационные
средства управления, которые обладали бы
функциональными возможностями, характерными для
инструментальных панелей браузеров? К счастью, JavaScript
предоставляет специальный объект History, который
позволяет передвигаться по Web-сайтам, которые
браузер отображал ранее. В том числе и по Web-страницам,
которые создавали не вы. Объект History способен это
делать, поскольку в нем хранится список всех
посещенных URL-адресов.
Для навигации по списку URL объект Histoiy
имеет некоторые встроенные методы навигации вперед и
назад. Метод back() загружает URL предыдущего
посещенного Web-сайта. Метод forward() загружает
следующий URL в списке посещений.
Кроме того, объект Histoiy имеет еще один метод и
ряд свойств. К сожалению, из соображений
безопасности многие браузеры не позволяют использовать
дополнительный метод и свойства. В действительности, это
не очень большой недостаток, поскольку большинство
возможностей объекта Histoiy реализовано в методах
back () и forward ().
Для демонстрации применения объекта History
стоит создать простенькую страницу, которая содержит
всего две навигационных кнопки. Одна кнопка будет
переводить пользователя на предыдущий URL из списка
посещений, а другая — на следующий URL в этом
списке. Кнопки будут использовать свои обработчики
событий onClick для вызова двух методов History, которые
обсуждались ранее. Код такой Web-страницы показан
в листинге 28.6.
Листинг 28.6. Использование объекта History для
целей навигации.
<hfanl>
<head>
<title>Using the History object</title>
</head>
<body>
<center>
<hl>Navigating with the History object</hl>
Press one of the following buttons to navigate.
<hr>
<form>
Избранные программные технологии
Часть V
<iii|>ul type="button"
value="Back"
onClick="window.history.back () ">
<input type="button"
value="Forward"
onClick="window.history.forward()">
</form>
</center>
</body>
</html>
Для исследования особенностей работы кнопок
начните с загрузки одного из предпочитаемых Web-сайтов
(попробуйте www.diasoft.kiev.ua). Как только Web-сайт
загрузится, напечатайте URL-адрес, используемый в
листинге 28.6. Затем введите URL другого не менее
любимого сайта (www.osadesign.com), который
отличается от URL первого загруженного сайта. Теперь
щелкните на кнопке "Back" в панели браузера. В браузере
отобразится Web-страница, показанная на рис. 28.3.
Теперь можно использовать навигационные кнопки для
перехода на любой из только что посещенных
Web-сайтов.
Резюме
JavaScript может выполнять несколько действий сразу,
следовательно, появляется возможность создавать более
сложные навигационные средства. За счет нажатия
пользователем всего лишь одной кнопки JavaScript
может верифицировать данные, отправлять формы,
обновлять фреймы, а также изменять содержимое других
фреймов.
'Ёв Edit Vfew Go= ~Q&r№trih-aHx U*W
Navigating with the History object
Press one 'the following buttoj to nav^ate
- '
РИСУНОК 28.3. Навигация с использованием объекта History.
На примере инструментальной панели был
продемонстрирован способ обновления HTML-страницы для
создания иллюзии доступности/недоступности кнопок
во время взаимодействия с ними. Также был показан
метод изменения содержимого трех фреймов одним
щелчком на кнопке. Объект buttonSet с небольшими
модификациями несложно применять при
проектировании других Web-страниц.
Объект History предоставляет пользователям
функциональные возможности Web-браузера за счет создания
на Web-страницах кнопок "Forward" и "Back". Это
может оказаться предельно полезным при создании окон,
которые не содержат нормальные инструментальные
панели браузера, но при этом нужда.тся в
манипуляциях ранее посещенными страницами.
Формы и верификация данных
В ЭТОЙ ГЛАВЕ
■ Установка пользовательской обратной связи
■ Верификация данных, введенных
пользователем
■ Создание интерактивных форм
■ Создание повторно используемого кода
верификации
■ Пример: тестер цветов JavaScript
После выхода HTML 2.0 у разработчиков появилась
возможность создавать на Web-страницах
интерактивные формы. HTML обеспечивает механизмы создания
таких форм:
• К/иент-серверная модель. Web-браузер
поддерживает общий графический пользовательский интерфейс
(GUI), запускаемый специальным
HTML-сценарием. С помощью CG l-программы на серверной части
могут реализоваться определяемые доменом
процессы.
Независимость от платформы. Web-браузер
работает со множеством платформ. Во время разработки
форм не стоит беспокоиться о специфике
платформы.
• Прозрачность сети. Сетевые коммуникации
встроены в пару Web-6pay3ep/Web-cepBep и реализованы
через протокол HTTP.
Стандартизованный GUI. Формы были
стандартизованы под HTML 2.O. Пользователь, знакомый с эле-
мгитами формы, может применить эти знания при
создании любых форм для Web либо для
корпоративной сети.
Интерфейсу HTML-форм присущи свои недостатки:
• Динамическая обратная связь с пользователем. У
HTML-формы нет средств для обеспечения
динамической информации по запрашиваемому вводу на
основе элемента формы.
• Проверка формы клиентской части. HTML-формы не
могут осуществлять проверку отдельных элементов
формы, набора элементов или целой формы
клиентской части.
• Диалоговые окна. HTML-формы не могут
динамически предупреждать пользователя об ошибках
ввода или выдавать запрос на дополнительный ввод.
Подтверждение пользователя. Формы не могут
запрашивать подтверждение перед выполнением
необратимых действий.
• Интерактивность элементов формы и окна. В HTML-
формах интерактивность ограничивается обработкой
CGI-кода на серверной части.
Для JavaScript характерны эти недостатки. Этот язык
строится на основных свойствах HTML и создает более
мощный GUI-интерфейс клиентской части. В главе
читатель познакомится с методами внедрения таких свойств
в JavaScript. Главу завершает приложение, написанное
на JavaScript. Все эти возможности применялись с
целью внедрения инструментальных средств выбора
цветов текста и фон.
Изрядное внимание в главе уделяется обработчикам
событий. Их можно рассматривать как обратные
вызовы, связанные с формой или ее элементами. Они явно
определяются как часть формы или дескриптора
элемента формы. Обработчики событий вызываются при
наличии события, инициируемого пользователем. Они
поочередно вызывают определенный фрагмент или
функцию кода JavaScript. В табл. 29.1 перечислены
обработчики событий JavaScript.
Избранные программные технологии
Часть V
Таблица29.1 Обработчики событий JavaScript
Обработчик
событий
Связанные объекты
Генерируемое событие
onBlur Button, Checkbox, Radio, Select, Submit,
Text, Textarea
onChange Select, Text, Textarea
onClick Button, Checkbox, Radio, Link, Reset, Submit
onFocus Button, Checkbox, Radio, Select, Submit,
Text, Textarea
OnKeyDown Textarea
On Key Press Textarea
OnKeyUp Textarea
onLoad Window
OnMouseDown Button
OnMouseOver Link
OnMouseUp Button
On Reset
onSelect
onSubmit
OnUnload
Form
Text, Textarea
Form
Window
Объект Form теряет фокус ввода.
Значение объекта Form изменяется.
Выполнен щелчок на объекте формы.
Объект Form получает фокус ввода.
В пределах объекта Form выполнено нажатие клавиши.
В пределах объекта Form выполнено нажатие и отпускание
клавиши.
В пределах объекта Form выполнено отпускание кнопки.
Web-браузер завершил загрузку объекта Window.
В рамках объекта Form выполнено нажатие кнопки мыши.
Пользователь перемещает курсор мыши над ссылкой.
В рамках объекта Form выполняется отпускание кнопки
мыши.
Форма была сброшена.
Пользователь выбрал текст в рамках объекта Form.
Форма была отправлена.
Пользователь завершил работу с окном.
Установка пользовательской обратной
связи
Если форма разработана качественно, пользователь
сможет легко и быстро определить вид запрашиваемой
информации. В простых формах подобное задание идеально
выполняется с помощью продуманных меток,
прилегающих к каждому элементу формы. В сложных формах
потребуется задействовать детальное объяснение
способа заполнения формы. С помощью JavaScript можно
ввести пользовательский запрос дополнительных
данных, относящийся к каждому полю. Эта возможность
позволяет обеспечивать дополнительную информацию
о запросах, функциях, элементах формы в тот момент,
когда она необходима. Проделывая такую операцию,
можно уменьшить объем текста, используемого для
обозначения элементов формы, а также упростить внешний
вид формы.
Подсказки пользователям реализуется через
обработчики событий JavaScript и строку состояния браузера.
Обработчик событий onFocus можно применить для
выполнения функции, определяемой пользователем, в
момент, когда объект Form получает фокус ввода.
Точно так же, обработчик событий onMouseOver
применяется для выполнения функции, определяемой
пользователем, независимо от того, в каком месте над ссылкой
располагается указатель. Эти обработчики событий
можно использовать для вызова функции, выводящей на
экран командную строку в строке состояния браузера.
Создание формы для обратной связи
пользователем
Следующий пример проиллюстрирует поддержку с
помощью JavaScript обратной связи в строке состояния
браузера. Представьте себе на минутку, что
необходимо создать интерфейс HTML-формы для
усовершенствованного автоматического тостера. Основная цель —
создание простого интерфейса, с помощью которого
первый встречный сможет приготовить аппетитный
тост. На рис. 29.1 показан пример такого интерфейса.
s Amaiiaq Avion e*ed Топвюг - Netscape
The Amazing Automated Toaster
Bread Product: |Bread
Quantity:.
Toastiness: jsT^
Buttered: Yes <* No r
^
Start laStoS Is
af¥f.
РИСУНОК 29.1 Форма автоматического тостера.
Пользователь может установить значения четырех
вводимых объектов:
• Объект Selection, представляющий вид хлеба.
• Объект Text, представляющий ожидаемое количество
кусочков хлеба.
• Объект Text, представляющий степень поджаривания
{в цифрах).
• Два переключателя, указывающих, добавлять ли
масло.
Объекты Selection и Text связаны с обработчиками
событий oiiBlur и onFocus. Эти обработчики выводят на
экран и перемещают определенные пользовательские
строки, связанные с введенными объектами.
Обработчик событий onClick увязывает переключатели с
формой обратной связи.
Свойство window.dcfaultStatus устанавливается для
вывода сообщении приветствия по умолчанию, когда
поступление другой информации отсутствует.
Код для примера с тостером показан в листинге 29.1.
Поскольку в действительности тостера нет, после
заполнения формы код отсылает почту. В этом листинге
необходимо заменить адрес на текст your_mail_ID.
Каждый раз когда встречается часть кода в скобках, его
необходимо заменять на информацию, зависящую от
пользователя или сайта.
Тестирование пользовательской формы
CGl-программы обычно составляются с целью
обработки данных со всей формы. Однако, возможно, потребу-
Листинг 29.1 toaster.htm
-doody,--
<hl>Thi> Amazing Automated Toaster</hl>
<form action="mailto:your_mail_ID" method="post">
Формы и верификация данных Е99Я
Глава 29 Цш1
ется создать форму еще до того как CGI-программ0
будет доступна. Может быть, необходимо отладить
форму без обращения CGI-программы. Ниже приводятся
простые способы проверки формы, обходящие CGI-
программу:
• Для большинства сайтов доступна CGI-программа с
именем test-cgi, если в форме используется метод get.
Воспользуйтесь следующим дескриптором:
<f огп aotion=http : //your_site_name_/cgi-bin/
wtest-cgi method="get">
После отправки формы пользователь получает
страницу, содержащую, помимо других элементов,
значения элементов формы из передаваемой страницы.
Несмотря на то что CGI-файл test-cgi
поддерживается многими серверами, его точное расположение и
доступность могут зависеть от сайта. Администратор
Web-сайта сможет сообщить читателю о деталях.
CGI-программа post-query доступна на большинстве
сайтов, если форма использует метод post.
Используйте следующий дескриптор формы:
<form action=http://your_site_name_/cgi-bin/
wtest-query method="postM>
После отправки формы пользователь получает
страницу, содержащую, помимо других элементов, пары
имя/значение, соответствующие элементам
передаваемой формы. Несмотря на то что post-query
поддерживается большинством серверов, его точное
расположение и доступность могут зависеть от сайта. О
деталях вам сообщит администратор Web-сайта.
<!-- ИеЬ Paje for contro'llinj an automated toaster
Note: Since we don't really have an automated toaster
-- mail the results back to the developer —>
<html>
<head.--
-rtitle>The Amazing Automated Toaster-r/title>
-^script language="JavaScript">
<!— начало сценария
function setStatus(str)
{
window.status = str;
return true ;
3
var greeting="Hello! How about some nice toasted bread products i *' ;
window. defaultStatus = greeting;
// окончание сце [ария —>
-'Vscri; ?t,-~
</head>
<font size=5>Bread Product:</font>
■rselect name="product"
■■■j Избранные программные технологии
Ellil- Часть \
onFocus="setstatus (■ Select desired bread product from list.')"
Blu ="setStatus(■■)">
<option>Bread
<option>Waffie
<option> Bagel
<option>Roll
<option>Muffin
< optio n>Croissant
<option>Scone
</select>
<br>
<font size=5>Quantity:</font>
<input type="text" name="quantity" val e="l" size=4 max]ength=4
onFocus="setstatus ('Enter quantity of bread products desired (1-1000).')"
onBlur="setStatus(■')">
<br>
<font size=5>Toastiness:</font>
<input type="text" name="toastiness" valu«"="50" size=3 maxlepath=3
onFocus=" sets ta tus ('Enter degree of toastiness from 0-100 (0=untoasted 100=burnt) .')"
onBlur="setStatus('')">
<br>
<font size=5>Buttered:</font>
<font size=5>Yes</font>
<input type="radio" name="buttered" value='"'-es" checked
< nCl" " ="se stitus('Do you want butter on the bread product?")">
<font size=5>No</font>
<input type="radio" name="buttered" value="no"
onClick="setstatus('Do you want butter on the bread product?')">
<hr>
<input type="submit" value="Start Toaster">
<input type="reset">
</form>
</body>
</html>
Если в форме применяется метод post, можно
сделать так, чтобы результаты отправлялись на вашу
учетную запись. Воспользуйтесь следующим
дескриптором формы:
<£orzn action="mailto:your__inaaJ_JD"
method="post">
После отправки формы пользователь получает по
электронной почте сообщение, содержащее пары
имя/значение, соответствующие элементам формы
из передаваемой страницы. (Используя Netscape
Navigator и Microsoft Internet Explorer, пользователь
получает предупреждение перед отправкой формы по
электронной почте. Это не ошибка, а всего лишь мера
предосторожности. Пользователь уведомляется о
том, что получатель формы сможет увидеть адрес
пользователя в заголовке сообщения. Иначе говоря,
отправка формы по почте не является анонимной.)
Вывод окон сообщений
JavaScript обладает несколькими способами связи с
пользователем через всплывающие окна
предупреждения и два вида диалоговых окон. Эти методы
применяются для передачи пользователю важной информации,
подтверждения выбора и запроса дополнительной
информации. Окна предупреждения часто используются
при отладке.
Метод alert() обеспечивает передачу пользователю
короткого сообщения. Он является методом объекта
Window. Для его активизации определять объект Window
не обязательно. Метод alert() можно применять для
сообщения пользователю об ошибке ввода, как показано
в следующем коде:
alert ("Error: value outside valid range of 0 to
«240 volts.")
Именно благодаря этой строке кода
осуществляется вывод сообщения на экран (см. рис. 29.2):
Netscape ЕЭ
• I
РИСУНОК 29.2 Предупреждающее сообщение.
Кроме того, метод alert() можно использовать как
помощь при отладке, скажем для вывода строки,
содержащей отладочную информацию:
var dlxjstr = "Value of 'wattage' = " + wattage;
alert(dbgstr),
Такой метод применяется для трассировки
программы на JavaScript:
functxon CalculateWattage (volts, amps)
I
var dbgstr = "CalculateWattage ( " + volts +
" , " + amps + " ) " ;
alert (dbgstr) ;
J
Каждый раз при вызове функции CalculateWattage()
всплывает предупреждающее сообшение, указывающее
на вызов и передаваемые аргументы. По завершении
процесса отладки программы код отладки можно
удалить или закомментировать. Более детальная
информация по использованию окна сообщений для отладки
кода JavaScript приводится в главе 34.
Метод confirmQ похож на метод alert(), однако
позволяет отвечать на сообщение. Ответы ограничены
двумя вариантами — ОК и Cancel (Отмена). Если
пользователь выбирает ОК, метод возвращает true, а если
Cancel — значение false:
function submitCallback()
<
if (selfDestructSelected == true)
return confirm ("Invoke self-destruct
"mechanism in 60 seconds?") ;
else return true ■
<form
onSubmit="return submitCallback()">
Этот код вызывает отображение диалогового окна
подтверждения (рис. 29.3).
Netscape
О
РИСУНОК 29.3Диалоговое окно подтверждения
Шелчок на ОК приводит к продолжению передачи.
При нажатии Cancel возвращается false, которое
поступает в объект Form и препятствует отправке формы.
Метод prompt() — еще один метод Window. Он
обеспечивает возможность ввода пользователем
произвольного значения:
var f.avColor=prompt ("What\' s your favorite color?")
Можно указать необязательный второй аргумент,
который рассматривается в качестве значения по
умолчанию:
Формы и верификация данных
Глава 29
var duration=prompt ("Enter duration in
"months: " , 6) ;
Эта строка кода обеспечивает отображение
диалогового окна, которое показано на рис. 29.4.
:
и.. ^
t , .—~ ,
г
1 "
РИСУНОК 29.4Дшмоговое окно ввода
Пользователь обычно вводит информацию через
элементов ввода на форме, а диалоговое окно ввода
должно применяться лишь в редких случаях, когда существует
настоятельная потребность в такого рода информации.
В следующем примере осуществляется запрос адреса
электронной почты пользователя.
<html>
<script language="JavaScript">
<!—начало сценария>
function sendEmail (formObj)
f
if(formObj.emailSpecials.checked)
{
ns = prompt ("Please enter your email
"address.") ;
formObj.email.value=ans;
// конец сценария - - >
</script>
<center>
<hl>Bob's Music Store</hl>
To receive our free catalog by mail please
enter your email address below.
<form name="addressForm"
onSubmit="sendEmail(this)">
<table>
<tr>
<td>Naxne: </td>
<tdxinput type="text" name="name"X/td>
</tr>
<tr>
<td>Address</td>
<tdxinput type="text" name="address"X/td>
</tr>
<tr>
<td>City</td>
<tdxinput type="text" name="city"X/td>
</tr>
<tr>
<td>State</td>
<tdxinput type="text" name="state"X/td>
</tr>
<tr>
<td>Zip</td>
<tdxinput type="text" name="zip"X/td>
</tr>
<tr>
<td colspan=2Xinput type="checkbox"
name="emailSpecials">
Please email me about special deals !</td>
ШИтбранные программные технологии
Часть V
<tr>
</table>
<input type="hidden" name="email" value="">
<input type="submit" name="submit"
value="Submit">
</form>
</center>
</html>
НАПОМИНАНИЕ л
Когда всплывает диалоговое окно или окно сообщения,
пользователь должен переключить внимание на окно
и соответствующим образом ответить. Именно по
упомянутой причине предупреждающие сообщения и
диалоговые окна не рекомендуется использоваться очень
часто.
Использование сообщения о состоянии
Другой способ обеспечения обратной связи с
пользователем во время ввода данных предполагает
использование сообщений о состоянии. Сообщения о состоянии —
это те фразы, которые можно наблюдать в строке
состояния в нижней части окна браузера. JavaScript позволяет
изменять все, что представляется в этой строке. Это дает
возможность отправлять пользователю сообщения, во
время его взаимодействия с HTML-формой. Считается,
что сообщения в строке состояния в меньшей степени
отвлекают внимание пользователя по сравнению с
диалоговыми окнами, однако им присущ один недостаток
— они менее заметны. В листинге 29.2 показан пример
использования дополнительной помощи во время
ввода данных.
Листинг 29.2 Отображение сообщения о состоянии
<html>
<head>
<title>JavaScript Unleashed</title>
<Script language= "JavaScript">
<!
function statusMsg(msgType) {
var message = "" ;
if(msgType = "string") {
message = "Any characters can be used
"-here.";
i
if(msgType = "integer") {
message = "Please enter a whole number
«here." ;
]'
else if (msgType = "dollar") {
message = "Please enter a dollar amount
«here. (e.g. 19.99)";
}
else if(ms-fType = "credit") {
message = "Please enter a credit card
«number here. Do not use dashes.";
)
window.defaultStatus = message;
window. status = message;
</script>
</head>
<body onFocus="statusMsg('')">
<form name="forml" action="#" method="post',Xbr>
First Name < input type="text"
size=20
maxlength=2 0
name="Integer"
onFocus="statusMsg('string')"><br>
Last Name <input type="text"
size=20
maxlength=2 0
name="Integer"
onFocus="statusMsg('string')"><br>
Age <input type="text"
size=5
maxlength=5
name="Integer"
onFocus="statusMsg ('integer') "xbr>
Amount <input type="text"
size=6
maxlength=6
name="Dollar"
onFocus=" statusMsg ('dollar' ) "Xbr>
Card # <input type="text"
size=16
maxlength=16
name="Credit"
onFocus="statusMsg('credit') "Xbr>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Когда пользователь перемещает курсор на поле либо
же его автоматически помещает туда браузер,
обработчик событий onFocus вызывает функцию statusMsg(). В
сроке состояния выводится соответствующее сообщение
за счет установки свойства status объекта Window.
Функция statusMsgO позволяет очистить строку состояния,
передавая в нее пустую строку. Очистка происходит в
случае щелчка на любом месте окна браузера за
пределами текстовых элементов. При этом активизируется
обработчик событий onFocus, сбрасывающий сообщение
о состоянии.
НАПОМИНАНИЕ
Неплохо также установить свойство окна defaultStatus
для вывода на зкран того же сообщения о состоянии.
Разработчик может не волноваться по поводу того, что
его сообщение исчезнет, как только пользователь
протащит указатель мыши по экрану. Подобный
способ идеален и в случае применения фреймов, когда
требуется "приклеить" сообщение, даже если
пользователь передвигает указатель мыши в другой фрейм.
Верификация данных, введенных
пользователем
Перед появлением JavaScript верификация формы
осуществлялась CGI-программой. Такой подход был
эффективным, но требовалось, чтобы вся форма была
полностью заполненной и переданной на сервер до
собственно процесса верификации. В некоторых средах,
например, с низкоскоростным соединением с World
Wide Web, может произойти существенное отставание
между моментами передачи формы и возврата
сообщения о найденной ошибке. Более того, ожидая передачи
формы на верификацию, пользователь не получит
обратную связь до тех пор, пока вся форма не будет
завершена. Непосредственная обратная связь
исключительно важна, поскольку пользователь только что ввел
информацию и в настоящий момент он может
воспринять обратную связь в соответствующем контексте.
Быстрая обратная связь может повлиять на
последующее поведение пользователя и снизить количество
ошибок, связанных с заполнением формы. И наконец, на
Web-странице обычная CGI-программа уведомляет об
ошибках ввода. Пользователь должен вновь вернуться к
форме, чтобы внести необходимые изменения, что
прерывает естественный процесс ввода данных в форму.
Верификация ввода данных в форму
Для проверки корректности информации в текстовых
элементах формы используются два обработчика
событий. Обработчик событий onBlur вызывается, когда
элементы текста или текстовой области формы теряют
фокус ввода. Обработчик событий onChange вызывается,
когда происходит изменение содержимого элемента
текста или текстовой области.
Говорят, что элемент имеет фокус, если любые
данные, вводимые пользователем, направляются именно в
этот элемент. Когда текст или текстовая область элемента
обладают фокусом, это значит, что текстовый курсор
находится именно на данном элементе. При
переключении пользователя на другой элемент (с
использованием мыши или клавиши табуляции), начальный элемент
теряет фокус.
Обработчик onBlur вызывается каждый раз, когда
поле ввода теряет фокус. Пользователь может поменять
данные в поле либо же оставить их неизменными.
Обработчик событий может вызывать верификационный
код для неизмененных данных или значений по
умолчанию в поле. Для этого потребуется соответствующим
образом приспособить код.
Обработчик событий onChange вызывается только в
случае изменения содержимого поля. Если пользователь
сразу же выбирает поле (возможно, для просмотра
обратной связи в строке состояния), а затем другое поле,
Формы и верификация данных КССШ
Глава 29~ ВЩ]
обратный вызов, определенный пользователем, уже не
выполняется. Несмотря на свою эффективность, этот
метод имеет свои недостатки. Предположим, что
пользователя необходимо предупредить о вводе неверных
данных в поле. Если пользователь производит щелчок на
поле, а затем передумывает вносить изменения, или же
набирает те же неправильные данные, это не будет
рассматриваться как изменение. В таком случае запуск
обработчика событий onChange не выполняется. Поэтому,
если решено применять onChange, потребуется
проверять введенные данные во время передачи (через
обработчики событий on Submit и on Click).
В следующем примере организуется текстовое поле
для ввода количества элементов. Корректными
значениями являются 100 и 1000. Обработчик событий onBlur
вызывается для запуска функции верификации.
Текстовый объект ввода передается в обработчик. Если
введенные данные не верны, происходит следующее:
Всплывает окно предупреждения, уведомляющее
пользователя об ошибке.
Фокус ввода возвращается в текстовое поле.
• Текст выделяется (и подсвечивается), и поэтому его
можно легко распознать.
Обратите внимание на то, что обработчик onFocus
обеспечивает для текстового поля пользовательскую
обратную связь — возможно, для того, чтобы
проинформировать пользователя о минимальных и максимальных
указаниях:
function validateQuantity (quantOb j)
1
if (quantObj value < 100) {
alert("Minimum order is 100 units.");
quantObj.focus();
quantObj.select();
l
else if (quantObj. value > 1000) {
alert ("Quantities greater than 1000 "
+ "units require special order.") ;
quantObj.focus();
quantObj.select();
)
return;
)
<li2>Enter number of units :</h2>
<input type="text" name="quantity" value="100"
length=4
maxlength=4 onFocus="quantFeedback()"
onBlur="validateQuantity(this)">
Обеспечение согласованности
Иногда между несколькими полями ввода существует
взаимосвязь. На рис. 29.5 показана часть формы, запол-
Избранные программные технологии
Часть V
няемой данными о бюджете отдела. Пользователь
должен ввести общий бюджет, а затем распределить его по
трем категориям.
f i D^pa-'-ie-t Budget- Netscape
1'.Ш Edit yiew fifl^ ££и>ртигйрвд'£ЭД||р
l-jn!*'
Department Budget
Total Budget (000*s dollars):
Salaries (OOO's dollars) -
Expenses (000" a d&llats) :
Capital Equipment, (OOO'a dollars) :
|2000
ji3oo
J30D
■\ -S- -
""■.a^" -« '
РИСУНОК 29.5 Форма для ввода данных о бюджете
В сумме три категории должны формировать общий
бюджет. Перед появлением JavaScript проверка суммы
была невозможной до передачи формы на обработку
CGI-программой. С появлением JavaScriipt ситуация
изменилась: верификация суммы возможна до
отправки формы, что экономит время пользователя и
сохраняет рабочий контекст (т.е. перед и после проверки
Web-страница остается неизменной). Ниже показана
часть кода такой формы:
<form name="myform" method="post"
action="actionURL" onSubmit="return
validateBudget(myform)">
<h2>Department Budget</h2>
<pre>
Total Budget (000*s dollars): <input type="text"
name="totalBudget" value="0"
onBlur="validateNumeric(this)">
Salaries (OOO's dollars): <input type="text"
name=nsalaries,f value="0"
onBlur="validateNumeric(this)">
Expenses (OOO's dollars): <input type="text"
name="expenses" value="0"
onBlur="validateNumeric(this)">
Capital Equipment (OOO's dollars): <input
type="text" name="capital" value="0"
onBlur="validateNumeric (this) ">
</pre>
<input type="submit" name=" submit"
value="Submit">
</form>
Обработчик событий о Blur вызывает
пользовательскую подпрограмму верификации, которая следит,
чтобы пользователь вводил корректные цифровые данные
в каждое поле. Показанная ниже функция необходима
для проверки совпадения суммы категорий с общим
бюджетом:
function validateBudget (formObj)
I
var calcBudget =
parselnt(formObj.salaries.value,10)
+ parselnt(formObj.expenses.value,10)
+ ~>arselnt (formObj .capital .value ,10) ;
var totalBudget =
parselnt(formObj.totalBudget.value,10);
if (calcBudget != totalBudget) {
alert ("Error: total budget is not equal
**to " + "sum of allocations.") ,
return false;
)
else return true;
I
Эта функция отображает окно предупреждения,
если допущена ошибка, и приостанавливает процесс.
ПРЕДУПРЕЖДЕНИЕ
Язык HTML все еще пребывает в развитии. В
большинстве случаев браузеры игнорируют незнакомые
дескрипторы или ключевые слова, которые могут
изменяться в стандарте HTML либо в расширениях HTML,
поддерживаемых разными поставщиками. Это очень
выгодно пользователям Web-браузеров, поскольку
никто не желает, чтобы браузер аварийно завершался
каждый раз, когда он встречает незнакомый
дескриптор или ключевое слово.
В большей степени упомянутая проблема касается
программистов, работающи с JavaScript. Если
разработчик допустил ошибку в написании имени
обработчика событий или другого ключевого слова внутри
дескриптора HTML, программа должным образом
функционировать не будет, а браузер не укажет на ошибку.
Используя в форме обработчики событий JavaScript,
не мешало бы проверить код на присутствие
банальных опечаток.
Обеспечение бизнес-правил
Стратегия, относящаяся к форме, должна передаваться
пользователю через поясняющие тексты внутри формы
либо через отдельный справочный документ
(соответствующим образом связанный с формой), а может, и
обоими способами. JavaScript можно задействовать для
проверки соответствия этой стратегии (бизнес-правил)
ввода данных.
Предположим, что форма позволяет определять день
перевозки груза, но при этом имеется бизнес-правило,
запрещающее осуществлять перевозку в выходные. При
помощи кода JavaScript несложно проверить, не
выпадает ли перевозка на выходные. Таким образом
удовлетворяется это бизнес-правило:
// Вычислить дату погрузки, исходя из данных,
// введенных пользователем. Возвращается
// объект date.
function calcShipDate(formObj)
I
var day = parselnt (formObj . shipDay. value) ;
Формы и верификация данных
var month =
parselnt(formObj.shipMonth.value);
var year =
parselnt(formObj.shipYear.value);
var hrs = 0;
var min = 0 ;
var sec = 0 ;
shipDate =
new Date(year,month,day,hrs,min,sec) ,
return shipDate;
I
// Проверка бизнес-правила , касающегося погрузки
// — не отщравлять груз в выходные.
// Проверка, не относится ли дата к
// прошлому или текущему времени,
function shippingPolicy (formObj)
var shipDate = calcShipDate (formObj) ;
var day = shipDate . getDay ();
var currentDate = new Date();
if ( shipDate. getTime () <
"■» currentDate. aetTime () ) {
alert ("Error: ship date must be
*■* future date . ") ;
formObj . shipDay. focus ();
formObj.shipDay.select() ;
return false;
}
if (day =0) I
alert ("Sorry, we cannot ship on
>-• Sunday.") ;
formObj.shipDay.focus() ;
formObj. shipDay. select) ) ;
return false;
)
{
else if (day = 6)
alert ("Sorry, we cannot ship on
"-Saturday. ") ;
formObj. shipDay. focus ( ) ;
formObj.shipDay.select();
return false;
J
else return true -
<form name=,,myform" method="post"
action="actionURL"
onSubmit="return shippingPolicy (myform)">
Если пользователь вводит дату, приходящуюся на
субботу или воскресенье, он уведомляет о соответству
ющем бизнес правиле. На поле ввода даты устанавли
вается фокус, информация в нем выделяется, а форма
не отправляется. Код также накладывает запрет на
перевозку груза в тот же день.
Примечание
Проверяя даты с использованием JavaScript,
необходимо помнить, что время и дата соответствуют
настройкам на пользовательском компьютере.
Возможно, клиентские и серверные программные средства
работают в различных временных зонах. Кроме того,
существует ненулевая вероятность некорректной ус-
Глава 29
тановки времени на клиентской части, т.е. ошибочной
даты или времени.
Проверка на завершенность
Формы, в основном, состоят из набора обязательных и
необязательных полей. При отсутствии обязательных
полей форма не сможет функционировать должным об
разом. И опять-таки, для проверки присутствия этих
полей можно воспользоваться JavaScript.
В следующем примере рассматривается форма, зап
рашивающая у пользователя контактную информацию
(см. рис. 29.6). В данном случае обязательными поля
ми являются имя, адрес, домашний номер телефона, а
все остальные поля — необязательны.
Cd aa Irla - 1ип - Netaupfl
нпв
Contact Information (U.S.)
First Hame:]J°en
Last Name: |b»t*e
Address: |l632 Caffenine Way
City/Town: "Ехргевво stale: j«^ Zip Code: |76260 •
Home Phone:|502-5SS-1212
Wort phone: |502-555-1642
PAX: |SD2-5S5-1643
E mail Address: ]iatteOdecaf.aq
QueBt: |T° learn JavaScript
[ Favorite Color: j __
...si
РИСУНОК 29.6 Форма с контактной информацией
После передачи формы вызывается функция вери
фикации. Если одно из обязательных полей пусто,
пользователь уведомляется об этом и форма не отправ
ляется. Код для формы с контактной информацией
показан в листинге 29.3.
Листинг 29.3 contacthtm
<html>
<head>
<title>Contact Inf ormation</title>
<script language="JavaScript">
<■-- Начало сценария
// Проверка, заполнены ли все обязательные поля
function validateComplete(formObj)
X
if (emptyField (formObj . firstName) )
alert("Please enter your first name.");
else if (emptyField (f ormOb j. lastName))
alert("Please enter your last name.");
else if (emptyField(formObj.addressl) ss
emptyField(formObj.address2))
alert("Please enter your address.");
Избранные программные технологии
Часть V _
else if (emptyField(formObj.city))
alert ("Please enter- your city or
"-town. ") ;
else if (emptyField(formObj.state))
alert("Please enter your state."),
else if (emptyField(formObj. email))
alert ("Please enter your E-mail
«address.") ;
else return true;
return false;
// Проверка, является ли поле пустым
function emptyField (textObj)
{
if (textObj .value, length = 0) return true;
for (var i=0; i<textObj .value, length;
var ch = textObj . value. charAt (i) ;
if (ch != ■ ££ ch != '\t')
return false ;
}
return true ;
)
// Конец сценария —>
</script>
</head>
<body>
<hl>Contact Information (U.S.)</hl>
<form name="myform" action="actionURL"
method="post" onSubmit="return
validateComplete (document.myform) ">
<pre>
First Name: <input type="text" name="firstName">
Last Name: <input type="text" name="lastName">
Address: <input type="text" name="addressl">
<input type="text" name="address2">
</pre>
City/Town:
<input type="text" name="city" size=12>
State:
<input type="text" name=" state" size=2>
Zip Code :
<input type="text" name="zip" size=5>
<pre>
Home Phone :<input type="text" name="homePhone"
size=12>
Work Phone:<input type="text" name="workPhone"
size=12>
FAX: <input type="text" name="FAX"
size=12>
E-mail Address: <input type="text" name=neznail">
Quest: <input type="text" name="quest">
Favorite Color: <input type—"text"
name=" f avColor " >
</pre>
<hr>
<input type=" submit" name=" submit"
value= " Submit " >
</form>
<body>
<html>
Код реализует очень базовую проверку —
считается, что поле присутствует, если оно не пустое. В
данном случае не вскрывается различие между корректной
и некорректной датами, что, однако, достигается
дополнительной простой проверкой. Например, можно
проверить, чтобы строка штата содержала
аббревиатуру из двух букв, а номер телефона — требуемое
количество пифр. В обгдем случае, можно выполнять
простые проверки на клиентской части и более сложные —
на серверной.
ПРИМЕЧАНИЕ ■""■
Предыдущий пример реализует форму контактной
информации для англоязычных пользователей,
проживающих в США. Internet — всемирная сеть. В
некоторых странах за именем следует отчество, штаты
отсутствуют, ZIP-коды не применяются, а язык
пользователей — не английский. Однако, любимый цвет есть
у каждого. Вопрос интернационализации в данной книге
не рассматривается. Несмотря на зто, необходимо
учитывать место проживания потенциальных
пользователей и соответствующим образом проектировать
формы.
Создание интерактивных форм
Перед появлением JavaScript простейшие
интерактивные формы должны были взаимодействовать с CGI-
программой на сервере. Применяя JavaScript, можно
создавать интерактивные формы, где взаимодействие
будет полностью проводиться на клиентской части, при
этом можно будет не совершать путешествие на
серверную часть.
Интерактивное программирование на JavaScript
обладает несколькими ограничениями. Желательно
динамически изменять каждый элемент страницы.
Последние версии браузеров Netscape и Microsoft
динамически изменяют содержимое страницы без
обращения к серверу. Все это достигается благодаря DHTML
и каскадным таблицам стилей (CSS). К сожалению, эти
стандарты все еще совершенствуются и внедряются
только в относительной степени. Перед тем как ввести
ограничения на использование браузеров, в которых
будет работать HTML-файл, необходимо учесть, что
после однократной визуализации страницы и
форматирования элементов Web-браузером, код JavaScript уже
ничего не сможет изменить.
Если после записи страницы нельзя внести
изменения в ее форматирование, что же остается делать? JavaScript
позволяет создавать взаимосвязь между следующими
элементами:
Элементы формы на одной и той же странице.
Элементы формы и другое окно.
Элементы формы и другие фреймы.
Формы и верификацця данных
Глава 29
Для совершенствования формы можно
воспользоваться и ранее описанными методами: обратной связью
с пользователем, окнами сообщений, верификацией
данных, вводимых пользователем. Можно изменить всю
страницу, полностью переписав ее. В этом случае
браузер стирает текущую страницу и выполняет полное
переформатирование новой страницы. Можно также
изменить цвет фона страницы (свойство Document), но не
цвет текста. Это невозможно, поскольку текст
страницы уже был визуализирован в определенном цвете.
Использование вычисляемых полей
Следующий пример, показанный на рис. 29.7,
отличается от примера с бюджетом, рассмотренного в начале
главы. В данном примере появилось новое текстовое
поле remainder. Несмотря на то что изменение текста
или графики страницы после ее записи невозможно,
можно изменять элементы формы. В данном случае
происходит изменение текстового элемента remainder,
значение которого основано на значениях других элементов.
Пользователь вводит общий бюджет и другие категории,
а после этого в текстовом поле выводится сумма денег,
оставшихся после распределения по категориям.
'■RfD- .artmanl Budgal-Nfltflcnpe
Department Budget
Total Budget (CCO's dollars): J20DD
Salaries (000's dollars): |1300
Ехрепвез (■ ^'s dollars): pOO
Capital Equipment (000*s dollars) : |0
UnsllocstedRemalnder: \500
РИСУНОК 29.7. Пример вычисляемого бюджета.
В этом примере используется обработчик событий
onChange для внесения изменений в поле remainder
всякий раз, когда меняется одно из значений других
текстовых полей. Когда пользователь отправляет форму,
сценарий пересчитывает сумму остатка. Если значение
ее равно нулю, форма передается, в противном случае
на экран выводится предупреждающее диалоговое окно.
Код гримера показан в листинге 29.4:
Листинг 29.4. Инструментальное средство введения
бюджета отдела.
<html>
<head>
<title>Department Budget</title>
<SCript language="JavaScript">
<! — начало сценария
function calcRemainder(formObj)
'(
var calcBudget =
parselnt(formObj.salaries.value,10)
+ parselnt(formObj.expenses.value,10)
I parselnt(formObj.capital.value,10);
var totalBudget =
parselnt(formObj.totalBudget.value);
var unalloc = totalBudget - calcBudget;
formObj.remainder.value = unalloc;
function validateBudget (formObj)
calcRemainder (formObj) ;
var unalloc = formObj.remainder.value;
if (unalloc != 0) {
alert ("Error: Total budget is not
«equal " + "to sum of allocations.") ;
return false;
I
return true ;
)
// конйц сценария —>
</script>
- /head>
<body •
<form name="myf orm" method="post"
action="actionURL" onSubmit="return
validateBudget(myform)">
<h2>Department Budget</h2>
<pre>
Total Budget (000's dollars): <input type="text"
name="totalBudget" value="0"
onChange=" calcRemainder (myf orm) ">
Salaries (000's dollars): <input type="text"
name="salaries" value="0"
onChange="calcRemainder (myf orm) ">
Expenses (000*s dollars): <input type="text"
name="expenses" value="0"
onChange="calcRemainder (myf orm) ">
Capital Equipment (000's dollars): <input
type="text" name="capital" value="0"
onChange="calcRemainder (myform)">
<em>Unallocated Remainder: <em> <input
type="text" name="remainder" value="0">
</pre>
<input type="submit" name=,,submit" value="Submit">
</form>
• /body>
</html>
JavaScript можно использовать для написания
небольших интерактивных приложений, где все
процессы проходят на клиенткой части. В листинге 29.5
представлены вычисления значения будущих инвестиций.
Пользователь вводит начальную сумму, процент, а
затем количество лет, в течение которых планируется
погасить инвестиции. На рис. 29.8 показан экран после
загрузки сценария в браузер. Обратите внимание, что
Избранные программные технологии
Часть V
вывод функции calculate() отображается в текстовых
полях ввода, как описывалось ранее.
*- 'еи'ц -r-he-
ВаП'
Compound Interest Calculator
Present Value: JlOOO
Interest Kate(t): |6-D
j'Yeats ot Compounding: (12
Total interest: J101Z.2
I Future Value: (2012. 2
-.'"■■-' '-^J' Jlijb.''-' '■ -'.;_-.. .. * Si КЗ уЗР ЕЭ Ki
РИСУНОК 29.8 Форма сложных процентов
Здесь не требуется применение CGI-программ,
поскольку все процессы реализуются на стороне клиента.
Заметьте, что вместо объекта Submit в форме
используется объект Button. Кроме того, вместо обработчика
событий onSubmit применяется onClick. Семантика
объекта Submit и обработчика onSubmit задействуется, когда
Web-браузер передает форму на сервер. Однако,
поскольку требуется, чтобы процессы выполнялись на
клиентской части, необходимо использовать обработчик
событий onClick и функцию calculate(), когда кнопка
нажата. Для достижения большей степени реальности
кнопка была названа Calculate, тем не менее, ее
название вполне можно изменить и на Submit. До тех пор
пока пользователь не просмотрит исходный код
страницы, невозможно увидеть, что за HTML используется на
клиентской части и CGl-Сценарий — на серверной
части. Код примера представлен в листинге 29.5.
Листинг 29.5 Вычисление сложных процентов
<html>
<head>
<title>Compound Interest Calculator</title>
<script language="iTavaScript">
<!— начало сценария
function calculate(formObj)
{
var presentVal =
parseFloat(formObj.presentVal.value);
var- intRate =
parseFloat(formObj.intRate.value)/100.;
var years =
parseFloat(formObj.years.value);
var futureval = presentVal *
Math.pow( (1.0 +intRate4 ,years) ;
var total In t = futureval - presentVal;
futu:reVa_l
100.0;
totsllnt
100.0;
Math. round (futureVal*100 .0) /
Math.round(totallnt*100 0)/
formObj . futureVal .value
formObj .totalInt.value
return;
futureVal,
totallnt;
<input type="text"
■<input type^'text"
^input: type^* text"
)
/ / конец сценария — >
</script>
</head>
<body>
:hl>Compound Interest Calculator</hl>
<form name="my£ orm">
<pre>
Present Value:
name="presentVal">
Interest Rate(%) :
name="intRate">
Years of Compounding:
name="years">
<input type="button" name="calc"
value="Calculate" onclick="calculate(myform)">
< /pre>
<h.r>
<pre>
Total Interest: <input type="text"
name="totalInt">
Future value: <input type="text"
name="futureVal">
<pre>
</form>
</body>
<html>
Создание повторно используемого
кода верификации
В следующих разделах рассматриваются способы
верификации наиболее общих типов данных, используемых
во время работы в Internet. Эти примеры применяются
в библиотеках кодов, которые хранятся в отдельном
файле либо в исходном документе с набором фреймов.
Во всех примерах в качестве одного из аргументов
передается объект текстового элемента. Такая возможность
позволяет в случае необходимости изменять текстовые
поля в процессе проверки данных. Для более
специфичной проверки данных воспользуйтесь регулярными
выражениями (Regular Expressions), о которых речь пойдет в
главе 31.
Целые числа
Код, представленный в листинге 29.6, проверяет
вводимые числа, являются ли они целыми. Сценарий
вызывается, как только пользователь щелкает на кнопке
Validate. Результат (true или false) выводится в
текстовом поле Result. По этим результатам можно
определить, прошли ли данные проверку.
Листинг 29.6 Проверка целостности чисел
<html>
<head>
<title>Integer Validation< title>
<script language="JavaScript">
<!—начало сценария
function isInt(textObj) {
var newValue = textObj . value;
var newLength = newValue . length;
for (var i = 0; i != newLength; i++) (
aChar = newValue. substring (i i+1) ;
if (aChar < "0" I I aChar > "9") {
return false;
)
}
return true ;
}
// конец сценария—>
</script>
</head>
<body>
<hl>Integer Validation </hl>
<form name=" f ormlM>
<input: type="text"
s:Lze=16
nvaxlength=l€
name="data">
<iii|>ul type="button"
name="CheckButton"
value="Validate"
onClick="document, forml .result.value = 1' +
islnt(document.forml.data)">
<br>
Result <input type="text"
size=16
maxlength=16
name="result">
</form>
</body>
</htm.L>
Строки
Код в листинге 29.7 проверяет допустимость символов,
вводимых в строку: это должны быть буквы и
несколько других символов. Другие символы определяются
переменной extraChars. Если пользователь вводит
небуквенный символ или знак, не определенный этой
переменной, функция возвращает false. Такой код
можно применить для верификации имен, поскольку
некоторые из них содержат точки, пробелы, дефисы и
запятые.
Листинг 29.7 Проверка строки
<html>
<head>
<title>String Validation</title>
<script language="JavaScript">
<! —начало сценария
function isString(textObj) {
var newValue = textObj. value;
var newLength = newValue.length;
Формыиверификащ1яданных ИЯ1
Глава 2? Eft
var extraChars=". -," ;
var search;
for (var i = 0; i != newLength; i++) {
aChar = newValue.substring(i,i+1);
aChar = aChar. toUpperCase () ;
search = extraChars. indexOf (aChar) ;
if (search = -1 && (aChar < "A" I |
aChar > "Z") ) (
return false;
>
)
return true •
}
// конец сценария—>
</script>
</head>
<body>
<hl>String Validation</hl>
<form name="forml">
<input type^'text"
size=16
maxlength=l6
name="data">
<input type="button"
name=" CheckButton "
value="Validate"
onClick="document.forml.result.value = ■■ +
isString(document.forml.data)">
<br>
Result <input type="text"
size=16
maxlength=l6
name="result">
</form>
< /body>
</html>
Денежные значения
Код из листинга 29.8 использует технологию,
несколько отличную от применяемой в примерах проверки
строк или целочисленных значений. Вместо
выполнения прямой верификации, выполняется
форматирование, а значение выводится на экран в виде денежной
суммы с двумя десятичными разрядами. Это еще один
пример использования объекта Text функцией с целью
изменения значения объекта. Если функция не смогла
преобразовать данные, представленные в виде денежной
суммы, по умолчанию принимается значение 0.
Листинг 29.8 Денежный формат
<html>
<head>
<title>Money Format</title>
<script language= "JavaScript">
<!--начало сценария
function moneyFormat(textObj) {
var newValue = textObj .value;
var decAmount = "" ;
var dolAmount = "" ;
var decFlag = false;
var aChar = "";
Избранные программные технологии
Часть V
// Игнорировать все, кроме целых и
// десятичных чисел.
for(i=0; i < newValue. length; i++) {
aChar = newValue . substring (i ,i+l) ;
if(aChar >= "0" SS aChar <= "9") {
if (decFlag) {
decAmount = "" + decAmount + aChar;
}
else {
dolAmount = "" + dolAmount + aChar;
}
)
if(aChar = "."J {
if(dfcnag) {
dolftmount =
break;
\
decFlag=true ;
}
// Убедимся, что вместо суммы появляется
// хотя бы о.
if (dolAmount = "") {
dolAmount = "О":
)
// Убрать ведущие нули.
if (dolAmount. length > 1) {
while (dolAmount. length > 1 SS
dolAmount. substring (0,1) = "0") {
dolAmount =
dolAmount.substring(1,dolAmount.length);
}
// Округлить десятичное значение.
if(decAmount.length > 2) {
if (decAmount. substring (2,3) > "4") {
decAmount =
parselnt(decAmount.substring(0,2)) + 1;
if (decAmount < 10) {
decAmount = "0" + decAmount;
else {
decAmount =
+ decAmount;
else {
decAmount = decAmount.substring(0,2);
)
if (decAmount = 100) {
decAmount = "00" ;
dolAmount = parselnt (dolAmount) + 1;
)
)
// Заполнить справа decAmount
if (decAmount. length == 1) {
decAmount = decAmount + "0";
I
if(decAmount.length ==0) {
decAmount = decAmount + "00";
}
// Проверка на наличие отрицательных
// значений и сброс textObj
if (newValue. substring 14, V 1= ■-■ )|
(dolAmount = "0" SS decAmount = "00")) {
textObj .value = dolAmount +
decAmount;
else!
textOb .value = '-' + dolAmount +■■■■ +
decAmount;
}
J
// Конец сценария—>
</ cr'pt>
</head>
<body>
<hl>Money Format</hl>
<form name="forml">
<input type="text"
size=16
maxlength=l6
name="data">
<input type="button"
name=" Che ckButton"
value="Format"
onClick="moneyFormat (document. f oral. data} ">
</form>
</body>
</html>
Кредитные карточки
Один из важнейших аспектов ведения бизнеса в Web
связан с принятием заказов, оплачиваемых через
кредитные карточки. С помощью JavaScript можно проверить
номер кредитной карточки до того, как произойдет ее
сохранение на сервере с целью конечной проверки. В
листинге 29.9 показано, как можно выполнить проверку
номера. Он должен соответствовать основным
правилам, которые были установлены компаниями,
поддерживающими кредитные карточки. Если в процессе
проверки выясняется, что был введен неправильный номер,
об этом следует проинформировать пользователя и
предложить ввести номер заново. Если пользователь не
желает вносить изменения во введенный номер, его
можно снова принять и выполнить окончательную
проверку на серверной части, прибегнув к помощи услуг
электронной коммерции.
ПРЕДУПРЕЖДЕНИЕ
Код, представленный в листинге 29.9, можно
использовать только для предварительной проверки номера
кредитной карточки. Использование сервиса
электронной коммерции на серверной части — единственный
путь полной верификации кредитной карточки.
Функция isCreditCard начинается с игнорирования
введенных пользователем тире. Затем число поступает
в алгоритм вычисления кода, известного как контрольная
сумма. Если контрольная сумма совпадает с последней
цифрой номера кредитной карточки, значит номер
карточки корректен. Однако даже если номер успешно про-
шел проверку, это не значит, что счет существует,
равно как и то, что он не был закрыт. Это лишь означает,
что введенный номер соответствует всем правилам.
РЕСУРС
При желании получить более подробную информацию
о том, как происходит подсчет контрольной суммы, ее
можно найти на сайте http://www.websitter.com/
cardtype.html.
Листинг 29.9. Верификация кредитной карточки.
<html>
<head>
<title>Credit Card Validation*:/ title>
<script language="JavaScript">
< ! —начало сценария
function isCreditCard(textObj) {
/*
* Функция проверки ввода номера кредитной
* карточки.
* В случае корректности контрольной суммы
* функция возвращает true .
*/
var ccNum;
var odd = 1;
var even = 2;
var calcCard = 0;
var calcs = 0;
var ccNum2 = " " ;
var aChar = ' ' ;
var cc ;
var r;
ccNuzn = textObj . value -
for (var i = 0; i != ccNum. length; i++) (
aChar = ccNum. substring (i,i+l) ■
if(aChar = ■-') {
continue;
I
ccNum2 = ccNum2 + aChar;
cc = parselnt (ccNum2);
if(cc = 0) {
return false;
)
r = ccHum. length / 2 ;
if(ccNum.length - (parselnt(r)*2) == 0) {
odd = 2;
even = 1 ;
J
for (var x = ccNum. length - 1; x > 0; x — )
r = x / 2;
if(r < 1) {
r++;
)
if(x - (parselnt(r) * 2) != 0) {
calcs = (parselnt (ccNum.charAt (x -
1») * odd;
1
else {
I
Формы и верификация данных
Глава 29
calcs = (parselnt (ccNum.charAt (x
1))) * even;
)
if (calcs >= 10) {
calcs = calcs -10 + 1;
calcCard = calcCard + calcs;
1
}
calcs = 10 - (calcCard 4 10) ;
if (calcs =10) {
calcs = 0 ;
}
if(calcs =
(parselnt (ccNum. charAt (ccNum. length - 1)))) {
return true ;
I
else {
return false;
}
I
// конец сценария-->
</scrip t>
</head>
<BODY>
<hl>Credil Card Validation</hl>
<form name="f orml">
<input type="text"
size=16
maxlength=l6
name=,,data">
<input type="button"
name="CheckButton"
value="Validate"
onClick="document.forml.result.value = '■ +
isCreditCard(document.forml.data)">
<br>
Result <input type="text"
size=16
maxleng th=l6
name="result">
</form>
</body>
</html>
Пример: тестер цветов JavaScript
В следующем примере, показанном на рис. 29.9,
используются описанные в главе возможности внедрения
тестера цветов. Одной из важнейших задач разработки
HTML-формы является выбор цветов фона и символов,
что обеспечит эстетическое наслаждение и четкость.
Многие комбинации соответствуют этим критериям, а
многие — нет. Тестер цветов JavaScript позволяет
выбирать два цвета и просматривать в отдельном окне, как
выглядит эта комбинация. В окне содержится HTML-
код для спецификации комбинации цветов.
Пользователь может вырезать и вставить это определение прямо
в HTML-код.
Избранные программные технологии
Часть V
Cola *, -кшг~№|||1Я а
Ьш £# #w v
НОВ
-U. Н
Color Checker
Text Color:
Red: fi Green: p Blue: |ti
Backgroun Color:
Red: |255J Greeo: |2SS Blue: |255!
Sample Text
Use: <4odybgcoloi="*fflin"
trat-"#000000":>
Text ""oloi=(u,u,0)
BackgjDimd roloi=(2JJ,255,Z55)
Using the Color Checker
The Color Di 'ff Checker is a utilit-lhal
allows you to display a user selected text
color against a _jer selected ickground
color. Colors a ■ entered as r*RB triplet . a
set ol rtd, ТГМ and blue values <*"al
| roinpri : the color. Eacl. value can range
from 0 to 255. Colors -t selected /or a
jbacl^rolmd color and lor a text color.
РИСУНОК 29.9. Проверочное устройство цвета.
Определение значений цветов происходит с
использованием триплетов RGB (красный-зеленый-синий).
Этот триплет содержит три значения, представляющие
красную, геленую и синюю составляющие цвета.
Упомянутые значения лежат в диапазоне от 0 до 255.
Например, триплет (255,0,0) представляет чистый красный
цвет. В табл. 29.2 перечислены некоторые
RGB-значения цветов.
Таблица 29.2 RGB значения цветов
RGB значение
Цвет
(0,0,0)
(255,0,0)
(255,255,0)
(255,0,255)
(0,255,0)
(0,255,255)
(0,0,255)
(128,128,128)
(200,200,200)
(255,255,255)
Черный
Красный
Желтый
Ярко-красный
Зеленый
Голубой
Синий
Темно-серый
Светлосерый
Белый
Так же как и в интерактивных формах, все
процессы проходят на стороне клиента. Программа определяет
конструктор для объекта Color, в котором содержится
RGB-триплет. Объекты Color имеют метод setColor(),
который устанавливает RGB-триплет и вычисляет его
эквивалент в виде шестнадцатиричных значений,
которая применяется для установки цвета в
HTML-дескрипторе <body>. В программе используется два
экземпляра объекта Color: один — для цвета символов, другой —
для цвета фона. Обработчик событий on Blur вызывает
программу, выполняющую проверку (validateRGBQ)
каждый раз, когда одно из шести текстовых по 1еи
ввода теряет фокус.
Хотя форма не имеет кнопки Submit, у нее есть
объект Button с именем Submit. Метод on Click
обращается к функции processFormO, которая и вносит
изменения. Она создает окно для вывода, которое
располагается отдельно от программы тестера цветов. Ссылка
на окно производится через popWin. Функция
processForm() проверяет, равно ли popWin значению
null. Если это так, processFormQ с использованием
метода Windopen() создает отдельное окно Color Sample.
Далее все происходит несколько запутанно.
Пользователь может закрыть окно Color Sample. Единственный
способ определить, что произошло заключается в
проверке значения popWin.document. Если значение popWin
является null, тогда значение popWin.document — null,
из чего следует, что окно Color Sample бьшо закрыто. В
данном случае потребуется воссоздать окно Color Sample.
Функция processForm() вызывает функцию doSampIe(),
которая генерирует содержимое окна Color Sample.
В дескрипторе <body> мож:но заметить экземпляр
обработчика событий on Unload, который вызывается
каждый раз, когда происходит закрытие окна. Он
обращается к функции closePopWin(), закрывающей окна
Color Sample и Help, если они существуют. Обратите
внимание на кнопку с именем Help Button. Когда
пользователь щелкает на этой кнопке, программа создает
новое окно со справочной информацией. В листинге 29.10
показан полный исходный код для инструментального
средства Color Checker.
Листинг 29.10. Инструментальное средство Color
Checker.
<html>
<head>
<title>Color Checker</title>
<script language=" JavaScript ">
<!-- начало сценария
// Конструктор для объектов цветов
function color(r#g,b) {
this.setColor = setColor;
this.setColor(r,g,b);
// Метод установки цветов объектов
function setColor(r,g,b)(
this.red = r
this.green = g;
this.blue = b;
this.hex = rgb2hex(r,g,b),
// Преобразование RGB-триплета в строку с
// шестнадцатиричными Значениями
function rgb2hex(r,g,b){
var str = '"#' + num2hex (г) + num2hex(g) +
num2hex + ' " * ;
return(str);
I
, , Преобразование цифровой строки в
шестнадцатиричную
function num2hex(n)(
var str — "";
var hexstring = "012345£789abcdef" ;
while (true)
digit =
hexstring. substring ( (n%16), ( (n%16)+l));
str — digit + str;
n = n » 4 ;
if (n *= 0) break;
:)
// Заполнение строки, если необходимо
if (str.length < 2) {
str = '0' + str;
)
return(str);
Проверка значений компонентов RGB
^unction validateRGB(textObj) {
var str = textObj .value;
if (str. length = u) [
userAlert (textOb j) ;
return false;
>
for (var i = 0; i < str. length; ++i) {
var ch = str.charAt(i) ;
±f (ch<"0" I I ch>"9") {
userAlert(textObj);
return false;
)
var value = parselnt (str, 10) ;
if (value < 0 I I value > 255) (
userAlert(textObj);
return false;
)
else !"
return true;
}
)
Предупреждение пользователя об ошибке ввода
function userAlert (textObj) (
alert ("Please enter a value between 0 and
«255.");
textOb j . focus () ;
textOb j . select ( ) ;
}
, , Запись фрейма для отображения примера
f unctiondoSample (doc, tc, be ) {
var raytext="<hl>Sample Text</hl>" ;
doc.open() ;
doc . write ( "<htmlXheadXtitle>ColorSample</
titleX/head>") ;
doc.write('<body bgcolor=■ + be. hex + ■
text=' + tc.hex + •>•);
doc. write (mytext) ;
doc .write ('Use: Sit;;body bgcolor=' + be. hex +
' text="+ tc.hex + "Sgt;');
Формы и верификация данных ШЯЩЯ
Глава 29 Elififl
doc.write("<br>Text
Color=(" , tc.red, " , " , tc. green, ", " ,tc.blue, ") ");
doc.write("<br>Background
Color=(",be.red,",",be.green,",",be.blue,")");
doc.write (,,</bodyX/html>") ;
doc.close ();
, , Обработка переданной формы
function processForm (myform) {
var winFeatures =
"scrollbars,width=400,height=250";
if ( (validateRGB (myform. redtxt) SS
validateRGB (my f orm . grntxt) SS
validateRGB (myform. blutxt) 55
validateRGB (myform. redbg) 55
validateRGB (myform . grnbg) & &
validateRGB (myform. blubg) ) = false) (
return false;
}
var textColor = new
color (myform. redtxt . value , myform. grntxt. value ,
my form.blutxt.value) ;
var ftickColor = new
color (myform. redbg . value , myform. grnbg . value ,
myform.blubg.value) ;
if (popWin = null)
popWin =
window, open ("", "FopWindow" , winFeatures) ;
else [
if (popWin. document = null) (
popWin —
window.open ( " " , "FopWindow",winFeatures) ;
)
doSample (popWin. document, textColor , backColor )
popWin. focus( ) ;
return true ;
)
)
// Установка начальных значений формы
function resetForm (myform) {
my form. redtxt . value = 0 ;
myf orm. grntxt . value = и ;
myf orm. blutxt. value = 0;
myform. redbg . value = 255;
my form. grnbg . value = 255;
myf orm . blubg . value = 255;
processForm(myform) ;
>
, , Предложение ввести корректные значения
function setPrompt() {
window. status="Flease enter a value iDetween и
axic! 255.";
return true ;
, , Закрыть всплывающие окна
functionclosePopWin( ) {
if (popWin ! = null ss popWin . document ! =
null)
popWin . close ( ) ;
if (helpWin ! = null SS helpWxn . document ! —
null)
helpWin . close ();
Избранные программные технологии
Часть V
/ / Очистка строки
function clear Prompt () (
window. status=H";
return true ;
)
//Вывод страницы со справочной информацией
function displayHelp() [
var T7inFeatures =
"scrollbars,width=400,height=250";
if (helpWin == null)
helpWin =
window. open (" ", "HelpWindow" , winFeatures)
else if (helpWin. document = null)
helpWin =
window.open("", "HelpWindow",winFeatures)
helpWin . document. open ( ) ;
helpWin . document .write ( "<htmlXheadXtitle>Color
«Checker Help </titleX/head>")
helpWin . document. Tttite ( "<body
>-bgcolor=ffffff>");
helpWin . document. write ("<hl>Color Checker
«Help</hl>");
helpWin. document, write ("<h2>Using the Color
«Checker</h2>") ;
helpWin. document, write ("The Color Display
w Checker is a utility that ");
helpWin. document, write ("allows you to display
«a user selected text ") ;
helpWin. document, write ("color against a user
w selected background color. ");
helpWin. document, write ("Colors are entered as
"-•RGB triplets: a set of ") ;
helpWin. document, write ("red, green, and blue
wvalues that comprise the ") ;
helpWin. document, write ("color. Each value
wcan range from и to 255. ") ;
helpWin. document, write ("Colors are selected
wfor a background color ") ;
helpWin. document, write ("and for a text
«color. " ) ;
helpWin . document .Tttite ( "</bodyX/html>") ;
helpWin.document.close() ;
helpWin . focus ( ) ;
return true ;
)
У/ Инициализация
var popWin = null ;
var helpWin = null;
// Конец сценария —>
</script>
</head>
<body bgcolor="#ffffff " text="#000000"
onUnload="closePopWin()">
<hl>Color Checker</hl>
<form name="myform">
<h2>Text Color:</h2>
Red: <input type="text"
size=3
maxlength=3
name="redtxt"
value="0"
onChange="validateRGB(this)"
onFocus="setPrompt()"
onBlur= "clearPrompt () ">
Green: <input type="text"
size=3
maxlength=3
name="grntxt"
value="0"
onChange="validateRGB(thxs)"
onFocus="setPrompt() "
onBlur=" clearPrompt () ">
Blue: <input type=" text"
size=3
maxlength= 3
name="blutxt"
value="0"
onChange="validateRGB(this)"
onFocus="setPrompt ()"
onBlur="clearPrompt ()">
<h2 ---Background Color :</h2>
Red: <input type="text"
size=3
maxlength=3
name= " redbg "
value="255"
onChange="validateRGB (this)"
onFocus="setPrompt ()"
onBlur="clearPrompt () ">
Green: <input type="text"
size=3
maxlength=3
name= " grnbg "
value="255"
onChange="validateRGB (this) "
onFocus="setPrompt ()"
onBlur="clearPrompt ()">
Blue: <input type="text"
size=3
maxlength=3
name="blubg"
value="255"
onChange="validateRGB(this)"
onFocus="setPrompt()"
onBlur="clearPrompt()">
<brxbr>
<input type="button"
value="Submit"
onClick="processForm (document .myx orm) ">
<input type="reset"
value="Clear"
onClick="resetForm (document.myform) ">
<input type="button"
value="Help"
name="HelpButton"
onClick="displayHelp()">
</form>
</body>
</html>
Резюме
В JavaScript существенно усовершенствованы базовые
возможности HTML-формы. Если используется JavaScript,
то большинство процессов, выполняемых на строке
сервера, могут проходить на клиентской части. Во шожно-
сти делятся на следующие группы:
• Обратная связь с пользователем. JavaScript
позволяет обеспечивать обратную связь с пользователями за
счет комбинации обработчиков событий и
управления содержимым панели состояния браузера.
• Окна сообщений. С помощью окон предупреждений
и диалоговых окон можно передавать пользователю
сообщения, запрашивать подтверждения запроса и
обеспечивать дополнительную информацию перец
отправкой форм.
• Верификация данных, введенных пользователем.
Можно проверять поля ввода, группы полей и всю
форму через обработчики событий и функции JavaScript.
Пользователи могут получать информацию обратной
связи в контексте текущей формы (т.е. страница не
Формыиверификацияданных
заменяется новой страницей с сообщением об
ошибке).
Можно создавать интерактивные формы, в которых
часть процессов, а может быть и все, выполняются
на стороне клиента.
JavaScript несложно задействовать для создания форм,
более простых в использовании и менее подверженных
к ошибкам. В свою очередь, можно создавать формы,
обеспечивающие более быстрый ответ, нежели сервер-
но-ориентированные программы, в особенности если
пользовательская связь с сервером имеет низкую
пропускную способность.
13!-15<
Персонализация и динамические
страницы
В ЭТОЙ ГЛАВЕ
• Статические Web-страницы
Немного о cookie-наборах
• Использование cookie-наборов
• Серверы и браузеры, поддерживающие
механизм cookie-наборов
• Другие способы поддержки информации о
состоянии
Путешествуя по Internet, многие замечали, что в сайты
помещается все больший и больший объем информации,
которая охватывает практически все необходимые темы
и удовлетворяет многие запросы. Дабы оградить
пользователей от необходимости чтения ненужной
информацией, сайты персонализируют, что, в свою очередь,
помогает направить информацию в определенное русло.
Web-сайт знает, что данный пользователь желает
просматривать страницы, посвященные только спорту или
курсу акций. На сегодняшний день Web-страницы — это
и друг, и финансовый советчик в одном лице. Времена
замороженных статических Web-страниц давно прошли.
Наступило время динамических Web-страниц!
Когда пользователь посещает любимый онлайновый
книжный магазин, ему предоставляется не просто
список книг, но предлагается литература, которая может
удовлетворить его запросы, базируясь при этом на
предыдущих покупках пользователя. Многие онлайновые
магазины и порталы используют массивные серверные
базы данных, отслеживая личные предпочтения и
цепочки покупок. Все это ускоряет процесс персонализа-
ции и способствует проявлению динамических свойств.
Тем не менее, разработчик Web-страниц с
использованием JavaScript может наделить Web-сайт большей
привлекательностью и дружественностью по отношению к
посетителям.
В этой главе рассматриваются способы управления
cookie-наборами, параметрами строки запроса URLh
скрытыми переменными формы с помощью JavaScript,
призванные обеспечить персонализацию и
динамический характер страницы. Перед тем как приступить к
созданию динамических страниц, стоит разобраться,
почему Web-страницы по своей природе являются
статическими.
Статические Web-страницы
Web-серверы обладают памятью относительно
небольшой емкости. При получении запроса на страницу
сервер не знает точно, кто вы такой и что вводилось в
форму три страницы назад. Он также не знает, является ли
посещение пользователя первым или, скажем,
семьдесят пятым. Одной из проблем использования Hypertext
Transfer Protocol (HTTP) является то, что этот протокол
не отслеживает состояние взаимодействия с сервером.
Под состоянием понимается информация о посещениях
Web-сайтов пользователем. Оно поддерживается по мере
передвижения по страницам Web-сайта. Состояние
может использоваться Web-сервером или программой
JavaScript (либо обоими), чтобы подстроить под сайт
все проделанные действия. С помощью такой
информации можно устанавливать приоритеты, значения
формы по умолчанию, подсчитывать количество визитов и
многое другое, что может существенно упростить поиск
и просмотр информации в Web.
Существует множество способов поддержки
информации о состоянии:
Сохранение ее в cookie-наборах.
Кодирование ее в ссылке URL.
Отправка ее в форме скрытых переменных.
Сохранение ее в переменных других фреймов.
Сохранение ее в Web-сервере
Существует много других проблем, связанных с
поддержкой информации о состоянии. Во время
просмотра сайта пользователь может перейти кдругому
Web-сайту и возвратить минуты, часы, дни, чтобы выяснить, что
любая сохраненная информация не зависит от даты или
Существует много других проблем, связанных с
поддержкой информации о состоянии. Во время
просмотра сайта пользователь может перейти к другому
Web-сайту и возвратить минуты, часы, дни, чтобы выяснить, что
любая сохраненная информация не зависит от даты или
же не была уничтожена. Можно вернуться, нажав кнопку
Back, при помощи закладки или же просто сделать так,
чтобы закодированная информация URL была
переписана или потеряна.
Web-разработчик должен поддерживать
информацию о состоянии независимо от того, как пользователь
перемещается по сайту: с помощью кнопок формы или
же URL-ссылок на странице. Это означает, что
информация добавляется и в скрытые переменные формы, и
в каждый дескриптор <а href...> на странице.
Учитывая все эти трудности, неплохо, чтобы
механизмы поддержки были более удобными в применении.
К счастью, это так и есть. Существует много
преимуществ поддержки состояния, они проявляются и при
однократном посещении сайта, и при переходе от
одного сайта кдругому. Примите во внимание следующий
сценарий:
• Приложения потребительских корзинок.
Пользователь просматривает сайт, выбирая определенные
пункты и перенося их в виртуальную корзину. В любое
время пользователь может просматривать пункты в
данной корзине, изменять ее состав, проводить ее
проверку, а после уже производить покупку. Отсле-
жиЕ.ание информации о том, какие пользователи
какими корзинами владеют — весьма важная задача.
• Персонализированные порталы. Многие Web-сайты
обеспечивают порталы, где пользователь может
подстраивать под себя все, что видит. После выбора
пользователем размещения, схемы цветов,
установочных параметров, предпочтения сохраняются в
пользовательском компьютере через механизм cookie-наборов.
В любой момент пользователь может вернуться к
сайту и получить ранее сконфигурированную им
страницу.
• Премии за частые посещения. Сохраняя
информацию на клиентском компьютере, приложение может
проследить, сколько раз браузер обращался кданной
странице. Если количество посещений достигает
определенного количества, пользователь получает
доступ к службам более высокого уровня, либо же
увеличится количество этих служб.
• Изменение баннеров. Каждый раз когда пользователь
посещает страницу, необходимо изменять графические
баннеры. Этот способ обычно применяется для
периодического просматривания рекламных объявлений.
• Закладки. Проверьте, где находился пользователь в
последний раз посещения сайта. Читал ли он рассказ,
Персонализация и динамические страницы Е9!П
Глава 30 ВдЩ
заполнял ли анкету или играл в игру? Пусть он
начнет с того места, где остановился.
• Игры. Запомните текущее или максимальное
количество очков. Предоставьте новые задачи, основанные
на прошлых действиях и ответах.
Немного о cookie-наборах
Cookie-наборы позволяют хранить информацию на
клиентском компьютере для дальнейшего ее восстановления.
Несмотря на то что с ними связаны определенные
недостатки, все же cookie-наборы — это мощная
технология поддержки состояния со стороны клиента.
ПРИМЕЧАНИЕ
Компания Netscape переняла начальную спецификацию
cookie-наборов. Несмотря на то что наборы
называются cookie — это не основная причина того, почему
было выбрано именно это имя. Страница
спецификаций cookie-наборов признает, что "объект состояния
назван cookie не по причине принуждения".
Cookie-наборы хранят данные в виде пары name=value
(имя=значение). Можно выбрать любое имя и
комбинацию значений. Очень выгодное свойство cookie-набора
связано с возможностью установки даты завершения
действия, а также того, какие страницы могут
просматривать cookit-информацию.
Преимущества cookie-наборов
Одним из основных свойств cookie-набора является их
устойчивость. Когда восприятие cookie-наборов
установлено на пользовательском браузере, эти наборы
могут храниться на протяжении многих дней, месяцев и
даже лет. Именно это и упрощает процесс сохранения
информации о последних посещениях и о
предпочтениях пользователя. То же свойство обеспечивает доступ
к cookie-наборам каждый раз, когда пользователь
возвращается на страницу.
Эффективность cookie-наборов особенно
повышается в при работе с JavaScript. С момента появления в
JavaScript функций чтения, добавления и
редактирования cookie-наборов, программы JavaScript могут
использовать cookie-наборы для хранения информации о
пользователе и его маршруте по Web-сайту.
Ограничения и недостатки cookie-наборов
Некоторые ограничения могут показаться весьма
проблематичными. Обычно cookie-наборы хранятся на
пользовательском компьютере в специальном файле
cookie. Так же, как и другие файлы, его можно удалить
по случайности или с определенной целью, что
уничтожит всю хранящуюся в нем информацию. Файл cookie
можно защитить от записи. Программные средства бра-
Ш Избранные программные технологии
Часть V
узера могут накладывать ограничения на размер или
количество сохраняемых cookie-наборов. Новые cookie-
наборы могут перезаписывать информацию в старых
наборах.
Cookie-наборы связаны с одним определенным
видом браузера, поэтому когда пользователь переходит с
одного браузера на другой, могут возникать проблемы.
Если коллекция cookie-наборов получена в результате
работы в браузере Netscape Navigator, то при переходе
к Microsoft Internet Explorer доступ к cookie-наборам
будет утерян.
И наконец, если несколько людей используют один
и тот же компьютер и браузер, они смогут найти себя
при помощи cookie-наборов, принадлежащих
кому-нибудь другому. Причина связана с хранением
cookie-информации в файле и браузер не может найти отличия
между различными пользователями.
Кроме того, существуют проблемы относительно
использования cookie-наборов. Многие браузеры хранят
cookie-информацию в незашифрованном текстовом
файле. Конфиденциальная информация, такая как пароли,
в cookie-файле храниться не должна. В противном
случае, любой, кто получает доступ к компьютеру, сможет
ее прочесть.
Некоторые Web-брузеры обладают возможностью
предупреждения пользователя, когда предпринимается
попытка установки cookie-набора. Браузер можно
сконфигурировать таким образом, чтобы cookie-наборы
вообще не устанавливались. Иногда это приводит к
неразберихе на пользовательской части, когда диалоговое
окно сообщает о том, что производятся определенные
действия над каким-то "cookie". Но если механизм
cookie-наборов заблокирован, то тщательно
разработанные Web-приложения вообще не будут запускаться.
Нельзя установить неограниченное количество
cookie-наборов для каждого Web-браузера,
посещающего сайт. Ниже показаны возможные количество и
размеры cookie-наборов:
• Количество cookie-наборов на один сервер или домен:
20
• Общее количество cookie-наборов на браузер: 300
• Размер самого большого cookie-набора: 4 Кбайт
■(включая оба параметра name и value)
Если эти пределы превышаются, браузер может
попытаться избавиться от старых cookie-наборов,
отбрасывая в первую очередь более давно используемые cookie-
наборы.
Мифы о cookie-наборах
Самая большая проблема в данном случае имеет
психологические корни. Некоторые пользователи считают, что
cookie-наборы — инструмент, используемый "старшим
братом" для раскрытия важнейших секретов. Может
быть, это несколько преувеличиваю, cookie-наборы
отвечают за хранение информации о страницах,
посещаемых пользователем, о количестве посещений, о
просмотренных рекламных баннерах, о том, что было
выбрано и введено в форму. Именно поэтому многие
думают, что нарушается их право на конфиденциальность,
когда cookie-наборы попадают в компьютер.
В действительности, cookie-наборы очень редко
используются с такой целью. Теоретически это возможно,
но на сегодняшний день существует много других,
более простых и доступных способов получения
конфиденциальной информации. Хотя подобного рода
мысли могут и не покинуть читателя прямо сейчас, однако
они уже не должны касаться cookie-наборов.
Другие пользователи жалуются на то, что лишняя
информация занимает много места на жестком диске.
Это довольно-таки веское основание. Программные
средства браузера ограничивают общий объем cookie-
файла до 1.2 Мбайт, причем на один сайт приходится
не более 80 Кбайт. Отметим, что это число мало по
сравнению с размерами страниц и графических
изображений, которые Web-браузер хранит в страничном кэше.
Третья группа пользователей уверена, что если cookie-
набор был установлен на одном сайте, то его можно
будет прочесть с других сайтов. Это полностью
неверно. Программные средства Web-браузера перекрывают
доступ к cookie-набору другого сайта, не
участвовавшего в его создании.
Если пользователи понимают всю пользу
применения cokie-наборов, все эти слухи ни к чему не
приведут.
РЕСУРС
Компани Netscape переняла начальную спецификацию
cookie-набора. Более подробную информацию можно
найти на «Veb-сайте компании Netscape по адресу http://
www.netscape.com / newsref /std / cookie_spec.html.
Использование cookie-наборов
До этого момента были рассмотрены все за и против
cookie-наборов и выяснено, что cookie-наборы — это
именно то, что необходимо для создания
полноценного Web-приложения. В этом разделе исследуются
функции, необходимые для чтения и установки
cookie-наборов, что окажет помощь в создании динамических
Web-сайтов, а также их персонализации. В разделе
также рассказано, как найти справочную информацию о
cookie-наборах.
Получение значений cookie-наборов
Имена и значения cookie-наборов хранятся и
устанавливаются при помощи свойства cookie объекта Document.
Для сохранения неформатированной строки cookie в
переменной потребуется воспользоваться следующей
командой:
var myCookie=document. cookie
Для отображения ее на Web-странице применяется
следующая команда:
document.write ("Raw Cookies: " +
document.cookie + "<br>");
JavaScript сохраняет cookie-наборы в следующем
форм; те:
namel^valuel; name2=value2; name3=value3
Отдельные пары name=value разделяются точкой с
запятой или пробелом. После последнего значения
точка с запятой не ставится. Процесс вывода
cookie-наборов упрощается за счет использования программы,
представленной в листинге 30.1.
Листинг 30.1 Функция GetCookie
function GetCookie (name) {
var result = null;
var myCookie = " " + document cookie + ";" ;
var searchName = " " + name + "=";
var startOfCookie =
myCookie.indexOf(searchName);
var endOf С >ok' ■ ;
if (startOfCookie != -1) {
StartOfCookie += searchName. length ;
// пропустить последнее имя cookie
endOf Cookie = myCookie. indexOf (" ;" ,
startOfCookie);
result =
unescape(myCookie.substring(startOfCookie,
endOfCookie));
i
ret.urn result;
В листинге ЗОЛ строка myCookie помогает избежать
граничных условий; при этом следует убедиться, что все
строковые имена cookie-наборов начинаются с
пробела, а заканчиваются точкой с запятой. Таким образом,
будет несложно отыскать начало части строки name=,
пропустить ее и вывести все, что находится между
точкой и следующей точкой с запятой.
Установка значений cookie-наборов
В комбинации name=value находится минимальный
объем информации, необходимой для установки cookie-
набора. Однако, имеется есть еще кое-что, необходимое
для cookie. Ниже представлен полный список
параметров, применяемый для спецификации cookie-набора:
Персонализация и динамические страницы КЧРгЧ
Глава 30 ц^^£
• name=value
expires=date
• path=path
• domain=domainname
secure
Имена и значения cookie
Name и value могут быть чем угодно. Иногда они
бывают пояснением, таким как FavoriteColor=Blue Зачастую
это код, интерпретируемый программой JavaScript,
например: CurStat=l:2:l:0:0:l:0:3:1:1.
Самая простая форма для установки cookie-набора
выглядит следующим образом:
function SetCookieEZ (name, value) {
document. cookie = name + "=" + escape (value) ;
)
Обратите внимание, что значение кодируется с
помощью функции escape(). Ели бы в строке была точка
с запятой, это могло бы уберечь от неожиданных
последствий. Функция escape() избавляет нас от подобного
рода проблем.
Кроме того, обратите внимание, что действия
свойства document.cookie отличаются от действий других
свойств. В большинстве случаев применение оператора
присваивания (=) приводит к полному переписыванию
существующего свойства с новым значением. Но это все
не относится к свойству cookie. Здесь любое новое
присваиваемое имя (пате) добавляется в активный список
cookie-наборов. Если данное имя присваивается дважды,
первое присваивание заменяется вторым.
Однако, существуют и исключения, которые
рассматриваются в разделе, посвященном path.
Дата истечения
Параметр expires=date сообщает браузеру о времени
существования cookie-набора. Страница спецификации
cookie-наборов на сайте Netscape устанавливает
следующую форму дат:
Wdy, DD-Mon-YY HH:MM:SS GMT
Например:
Mon, 08-Jul 96 03:18:20 GMT
Этот формат основан на Internet RFC 822, о котором
можно узнать по адресу: http://www.w3.org/hypertext/
WWW/Protcols/rfc822/#z28.
Единственное различие между RFC 822 и
реализацией Netscape заключатся в том, что дата истечения
должна завершаться GMT (Greenwich Mean Time). К счастью,
язык JavaScript обеспечивает такую работу функции.
Используя функцию toGMTStringO, можно установить
срок истечения действия cookie-набора в ближайшем или
далеком будущем.
Избранные программные технологии
Часть V
НАПОМИНАНИЕ
Несмотря на то что функция toGMTStringl) не
соответствует спецификации Netscape, все же она
работает в JavaScript.
Если дата истечения не определена, cookie-набор
остается в действии, пока браузер не будет закрыт.
Следующий фрагмент кода устанавливает дату истечения
cookie-набора через неделю.
var name="foo";
var value="bar";
var oneWeek = 7 * 24 * 60 * 60 * 1000;
var exp'Date = lie Date () ;
expDate.setTime (expDate.getTime() + oneHeek);
document, cookie = name + "=" + escape (value) +
"; expires=" + expDate. toGMTStringO ;
path
По умолчанию cookie-наборы доступны и другим Web-
страницам внутри того же каталога, что и страница, в
которой они бьши созданы. Параметр ath открывает
доступ к cookie-набору из других каталогов. Если
значение параметра path — это подстрока URL страницы,
то создаваемые с параметром path cookie-набора
доступны на этой странице. Например, cookie-наборы
можно создать с помощью следующей команды:
document.cookie="foo=barl; path=/javascript";
Таким образом, cookie-набор foo доступен на
каждой странице в каталоге javascript и его подкаталогах.
Если команда выглядит следующим образом:
document. cookie="foo=bar2; path=/javascript/sam" ;
TO cookie-набор будет доступен страницам в каталоге
/javascript/sam, но не будет доступен страницам в
каталоге /javascript.
И наконец, чтобы сделать cookie-набор доступным
каждой странице на всем сервере, воспользуйтесь
следующей командой:
document.cookie="£oo=bar3; path=/";
а что же произойдет, если в браузере много
cookie-наборов для различных путей, а имена наборов
одинаковы? Какое из них победит?
В действительности, сильнейшими окажутся все. В
данном случае, лучше иметь несколько cookie-наборов
с одинаковыми именами, но различными значениями.
Например, если страница выдает все команды,
перечисленные ранее, тогда строка cookie будет выглядеть
следующим образом:
foo=bar3; foo=bar2; foo=barl
Чтобы разобраться в ситуации, можно написать
программу для подсчета количества значений
cookie-наборов, связанных с именами, как показано в листинге 30.2.
Листинг 30.2 Функция GetCookieCount
function GetCookieCount (паше) {
var result = 0;
var myCookie = " " + document.cookie + ";";
var searchName = " "4 name + ,,=" ;
var nameLength = searchName.length;
var startOfCookie =
myCookie.indexOf(searchName);
while (startOfCookie != -1) (
result += 1;
StartOfCookie =
myCookie.indexOf(searchName, startOfCookie +
nameLength);
I
return result;
I
И конечно же, если существует функция GetCookieCount,
то должна быть и функция GetCookieNum, какая бы
выводила отдельную часть cookie-набора. Эта функция
выглядит так, как показано в листинге 30.3.
Листинг 30.3 Функция GetCookieNum
(name,
{
cookieNum) {
function GetCookieNum
var result = ull;
if ('rookieHum '-= 1)
var myCookie = " " + document. >xokie + ";";
var Searcfflame = " " + aire + "=":
var nameLength = searchName. length ;
var StartOfCookie =
myCookie.indexOf(searchName);
var cntr = 0;
for (cntr = 1; cntr < cookieNum; cntr++)
StartOfCookie =
myCookie.indexOf(searchName, StartOfCookie
+ nameLength);
if (startOfCookie != -1) {
StartOfCookie += nameLength; // пропустить
// ПО'ГЛеДНее ИМЯ COOkie
var endOf Cookie = myCookie. indexOf (' ; " ,
StartOfCookie);
result =
unescape(myCookie.substring(startOfCookie,
endOfCookie));
}
>
return result;
!i
Для уничтожения cookie-набора необходимо, чтобы
имя и путь совпадали с первоначально
установленными исходными именем и путем.
domain
После того как страница на определенном сервере
создает cookie-набор, он становится доступным для
страниц только на этом сервере. Поскольку параметр path
обеспечивает доступ к cookie-набору за пределами
исходного пути, то параметр domain гарантирует доступ к
другим Web-серверам на данном сайте.
Персонализацин и динамические страницы
Глава 30
Можно сгенерировать такой cookie-набор, чтобы все
пользователи, посещающие Internet смогли его увидеть.
Разработчик может только установить путь внутри
домена. Это происходит так, поскольку применение
параметра domain предусматривает использование, как
минимум, двух периодов, если ваш домен завершается
на .ccm, .edu, .net, .org, .gov, .mil, .int (например,
.mydoinain.com). В противном случае должно
присутствовать хотя бы три точки (.mydomain.ma.us).
Строковый параметр domain должен совпадать с окончанием
имени вашего сервера.
secure
Последний параметр cookie-набора сообщает браузеру
о том, что данный набор должен отправляться только
при условии безопасного соединения с Web-сервером.
Это означает то, что сервер и браузер должны
поддерживать безопасность уровня HTTPS. (HTTPS —
протокол передачи через Internet зашифрованной
информации.)
Если параметр secure отсутствует, это значит, что
cookie-наборы передаются по сети в незашифрованном
виде.
А сейчас, когда изучены все параметры
cookie-набора, можно записать подпрограмму на JavaScript, в
которой бы задействовались все параметры (см. листинг
30.4).
Для использования этой подпрограммы ее
необходимо вызвать с любыми параметрами, которые
требуется установить, и со значениями null для параметров,
которые не принимаются во внимание.
Удаление cookie
Для удаления cookie-набора необходимо установить дату
истечения где-то в прошлом (насколь далеко в прошлое,
значения не имеет). Дабы подстраховаться, работа
должна продолжаться несколько дней. В листинге 30.5
представлена программа ClearCookie, используемая для
удаления cookie-наборов.
При удалении cookie-набора не имеет значения,
какое использовалось значение. Подойдет любое значение.
Л истин 30.4 Функция SetCookie
function SetCookie (name, value
var expString = ((expires =
ПРЕДУПРЕЖДЕНИЕ
Некоторые версии Netscape некорректно
преобразуют время в GMT. Стандартные функции JavaScript для
удаления cookie-наборов предусматривают то, что
прошлый период отстает на несколько миллисекунд до
текущего времени. Это действительно так, тем не
менее, данный принцип не действует на всех платформах.
Для подстраховки стоит выбрать дату на несколько дней
уходящую в прошлое.
Пример применения cookie-набора
В листинге 30.6 приводится программа на JavaScript,
демонстрирующая использование cookie-наборов. Эта
программа позволяет пользователям создавать
персонализированные страницы "новости дня", содержащие
ссылки на сайты с общей информацией и
определенным количеством различных категорий.
Предпочитаемые ссылки пользователя хранятся в cookie-наборах. На
рис. 30.1 показано, как выглядит страница Favorites.
ПРЕДУПРЕЖДЕНИЕ
В IE3.0 свойство cookie работает, только если
страницы, использующие свойство cookie, получены из
Web-сервера.
СЦМу Oocumente\Oo-iimpMs\Jft UnleaahndVNew F<tLtinn\Chnpiflr 3flUJsiin . *Г Q зс
I M?\. .ЫК -J^P* ^JSVOfia^ -..iPflU ;ЙЙФ г ;.;, ..;-;, ь- ; -'|Г?1
Your Favorites:
33
SUj*
Select Personal havofrtes"
General News
HPP
Auctions
&'Г
This is a very dull paj unless you ha* a JavaScript таЫ Jbrowser.
Jlw/CortfMBi.;
^
РИСУНОК 30.1 Страница Favorites
expires,
null) ?
var pathString = ((path = null) ? ■,"
var domainstring = ((domain = null) s
var secureString = ((secure == true) ?
document. cookie = name +■ ,,=" + escape
secureString;
path, domain, secure) {
'" : (": expires=" + expires. toGMTSt ing())) ;
: ("; path=" + path) ) ;
"" : ("; domain=" + domain));
"; secure" : "") ;
(value) + expString + pathString +■ domainString +
Избранные программные технологии
Часть V
Листинг 30.5 Функция ClearCookie
function ClearCookie (name) {
var ThreeDays = i * 24 * 60 * 60 * 1000;
var ezqpDate = new Date () ;
expDate.setTime (expDate.getTime() ThreeDays);
document.cookie = name + "=ImOutOfHere; expires=" + expDate.toGMTString();
Листинг 30.6 Сценарий Favourite
<html>
<head>
<scripc language="JavaScript">
<!— Comment out script from browsers that don't know JavaScript
/ / ========================== =========================
// Стандартные подпрограммы работы с cookie-наборами
//
// GetCookie - GetCookie возвращает значение определенного cookie-набор или null,
/ / если cookie-набор не существует
// --.-.-.-.-.-.-
function GetCookie (name)
(.
var result = null;
var myCookie = " '* + document . cookie + " ; " ;
-гаг searchName = " " ■*- name + "=" ;
таг startOfCookie = myCookie. indexOf (searchName) ;
var endOf Cookie ;
if (startOf Cookie 1= -1)
I
StartOtCookie += searchName. length;
// пропустить последнее имя cookie-набора
endOfCookie = myCookie . indexOf (";", startOf Cookie) ;
result = unescape (myCookie. substring (startOfCookie , endOf Cookie) ) ;
")
return result;
\
//
// SetCookieEz SetCookieEz быстро устанавливает cookie-набор, который будет
/ / действовать вплоть до закрытия браузера.
//
function SetCookieEz (name, value)
{
document . cookie = name + "=" + escape (value) ;
}
//
// SetCookie SetCookie добавляет или заменяет cookie-набор. Null используется
/ / для параметров , не имеющих значений.
//-
function SetCookie (name, value, ez^jires, path, domain, secure)
(
var expString = ((expires == null)? "" : ("; expires=" + expires. toGMTString ())) ;
var pathString = ((path = rill) ? "" : ("; path=" + path));
var domainString = ((domain = null)? "" : ("; domain=" + domain));
var secureString = ((secure = true) ? " ; secure" : "") ;
document . cookie = name + "=" + escape (value) + ez^xString + pathString + domainString+
secureString;
)
//--.-
// ClearCookie - ClearCookie удаляет cookie-набор за счет установки даты истечения —
// трех дней в прошлом
//
function ClearCookie (name)
КЕЯ
Персонализация и динамические страницы
Глава 30
i
var ThreeDays = 3 * 24 * 60 * 60 * 1000;
var expDate = new Date ( ) ;
expDate. set/rime (expDate.getTime() ThreeDays);
document, cookie = name + "=ImOutOf Here ; expires="+ expDate. toGMTStr ing () ,
)
//=== = =====*============^=====
// Объект и программы для приложения Favorites
//
/* Объект "favorite".
Свойства ■ f ullName - Полное описательное имя
cook Код, используемый для cookie-набора
urlpath Полный UFJL (http://...) к сайту
Методы: Enabled Возвращает true, если cookie-набор с-оылки включен
Cliecked - Возвращает слово "CHECKED" , если cookie-набор ссылки включен
HriteAsCheckBox Отправляет текст в документ в формате флажка
WriteAsWebLink - Отправляет текст в документ в формате <:а href >
function favorite (fullName, cook, urlpath)
I
this, f ulIName = f ulIName;
thi s . cook = cook;
this, urlpath = urlpath;
thi s. Enabled = Ehabled;
this. Checked = Checked;
this. WriteAsCheckBox = WriteAsCheckBox;
this.WriteAsWebLink = WriteAsWebLink;
)
// _________ ____
// Enabled Enabled проверяет, 'гуществует ли cookie-набор
// Результат - возвращает true, если cookie-набор >:уществует, и false — если нет
function Enabled (]
i
var result = false;
var FaveCookie = GetCookie ("Favorites") ,-
if (FaveCookie ! = null >
I
var searchFor = "<" + this, cook + ">";
var startOfCookie = FaveCookie. indexOf (searchFor)
if (startOfCookie J= -1]
result = true;
ret urn result;
]
//
// Checked - Checked проверяет, .гуществует ли cookie-набор (с помощью Enabled) .
// Результат возвращает "CHECKED", если cookie-набор >:уществует, и "" — если нет.
//
function Checked (]
Г
if (this.EnabledO)
return "CHECKED " ;
return "" ;
J
//
// WriteAsCheckBox Предпочтение может быть или обычным ЦБЪ, или заг-оловком раздела.
// Если путь URL — пустая строчка, тогда предпочтение - заголовок
// раздела. В списке определений появятся ссылки в соответствующем формате.
//
function WriteAsCheckBox 0
I
// Пр0'1 эрить, эт > загол ж hj 4 с ' ая ее °:а
if (this.urlpath = "")
t
Избранные программные технологии
Часть V
// Эт:> заголовок раздела
result = '<dtXstrong>' + this f ullName + "</strong>';
)
else
{
// Это обычная ссьшка
result = '<ddxinput type="checkbox" name="'+ this, cook + '" '+ this. Checked ()+
•onClick="SetFavoriteEnabled(this .name, this .checked) ;">'+ this . fullName;
»
document.write(result);
//
// Глобальная переменная:
// NextHeading - Иногда требуется распечатать только заголовок, если предпочтение
// установлено. Данная переменная помогает это сделать. См. WriteAsWebLink
//
var HextHeadinj = " и ;
//
// WriteAsHebLink - Предг :>чтение может бьгть либо заголовком раздела, либо
// обычным URL. Ссылки появляются внутри с-писка определений
// и соответствующим образом форматируются.
//
functionWriteAsWebLink ( )
I
var result = *
if (this.urlpath == "")
I
i-lextHeadinj = this . fullName ; / / Это обычная ссылка
else
(
if (this. Enabled () || (GetCookie("ViewAll") == "T"))
if ("extHeading J= "")
I
result = ' <pXdtXstrong> ■ + NextHeading* '</strong>' ;
NextHeading = " " ;
]
result = result + "<ddXa href=" + this.urlpath + '">'+ this . fullName + "</a>' ;
j
)
document.write (result);
}
//=================
/ / Глобальные переменные
/ /======================
/*—7
FaveList хранит с-писок всем объектов предпочтении, кот:рые объявляются ниже.
Предпочтения с пустым urlpath находятся в заголовках раздела.
* /
var FaveList = new Array () ;
// Газдел комиксов
FaveList [1] = new favorite ("Comics", "", "") ;
FaveList[2] = new favorite ("Dilbert" , "cdilb", "http://www.unitedmedia.com/comics/dilbert/");
FaveList [3] = new favorite ("Doonesbury" , "cdoon" ,
"http: //www.uexpress . com/cgi-bin/ups/mainindex. cgi?code=db" ) ;
FaveList [4] = new favorite ("Mr. Boffo", "cbof f" ,
"http://www.uexpress . com/cgi-bin/ups/new_mainindex. cgi?code=mb") ;
// Газдел общих новостей
FaveList[5] = new favorite ("General l-jews" , "", "") ;
FaveList[6] = :w favorite ("CNN", "ncnn", "http://www.cnn.com/");
TaveList[7] = new favorite("NER", "nnpr" , "http://www.npr.org/news/") ;
FaveList[S] = new favorite ("Boston Glebe" , "nbos" , "http://www.boston.com/") ;
/ / Газдел компьютерной индустрии
^'aveList[?] = new favorite ("Computer Industry", "", "") ;
FaveList [10] = new favorite ("EC Week" , "ipew" , "http://www.pcweek.com/") ;
ИСТ-
Персонапизациии динамические страницы
Глава 30
FaveList[ll] = new favorite ("TechWeb", "icmp", "http://vnjw.techWeb.com/wire/wire.html") ;
FaveList[12] = new favorite("Netscape", "ntsc","http://devedge.netscape.com/");
FaveList[13] = new favorite ("Microsoft" , "micr" , "http: //msdn. microsoft, com/") ;
.'.' Раздел п:«:К':'Вых механизмов
FaveList[14] = nevr favorite ("Search Engines", "", "");
FaveL.LSt [15] = new favorite ("Yahoo! " , "syah","http://www.yahoo.com/");
FaveL.Lst[16] new favorite ("Alta Vista", "sav" , "http://www.altavista .com/") ;
FaveL.Lst[17] = new favorite ("Excite" , "sexc","http://www.excite.com/");
Раздел аукционов
FaveL.LSt[18] = new favorite ("Auctions", "", "");
FaveL.Lst[19] = new f avorite ("ebay" , "ebay" , "http://www.ebay.com/") ;
FaveL.Lst[20] = new favorite ("Yahoo Auctions", "yhac", "http://auctions.yahoo.com/");
// Раздел ■:■ разном ■
FaveL:_st[21] = ne- favorite ("Misc.", * ■, ■"■) ;
FaveL^st[22] = new favorite ("Today m History", "mtih" "http://www.thehistorynet.com/today/
today.htm");
FaveList[23] = new favirrte ("Merriam-Webster' s Word of the Day" , "mwod" , "http://www.m-w.com/cgi-
bin/mwwod.pl");
FaveList[24] = new favirrte ("Quotes of the Day" , "mquot", "http://www.starlingtech.com/quotes/
qotd.html");
// По'Дпр'Огр'аммы записи страниц
/ / ===========================
//
// SendOptronsPage - Запись страницы вы'Гор'а предпочтений
//-
^unctrin SendOptionsPage ()
document.write ( ' <hl>SelectFavorites</hl>' ) ;
document. write ( ' <formmethod=post> ' ) ;
// Кнопка для просмотра страниц Favirrtes
document, write ( '<input type=button value="Show Favirrtes" ■+ ,onClick=",+ "ReloadPage () ' + ';">');
// Ссылки >:удут выглядеть значительно лучше внутри описания listdocument. write ('<dl>');
fir (var r = 1; r < FaveLrst. length; r++]
FaveList[i] .WriteAsCheckBox() ;
.'.' Записать каждый флажок
document.write ( '</dlXp>) ;
CleiarCookie ( "ViewAll") ;
document.write ( '</form>') ;
1
/,
// LoadOptrons Установка co-okre-на'оор'а ShowOption, 4T'i заставляет стр'аницу вы'оор'а
'.' с 1ций появляться ВС' вр>емя пер>егрузки страницы
и
functron IroadOptions (I
{
Set.CookieEZ ("ShowOptions" , "T" ] ;
window.open(document.location.href, " top", "") ;
)
//
/ ' IbggleVrew - Вкл г^ те и kj очение режу 4a ViewAll. Пр'И вкл: м режим
// ссылки выводятся на экран. Пр'И ВЕЛключенном р>ежиме >:удут выводиться
// только' REj'ipeHHEje предпочтения пользователя.
II
function ToggleView()
I
rf (GetCookie( "ViewAll") == "T" ]
ClearCookie("ViewAll");
J
else
{
var frveYears = 5 * 365 * 24 * 60 * 60 * 10^0;
var exp'Date = new Date () ;
expDate. setTime (expDate. getTime () + five Years) ;
Избранны/*программные технологии
Часть V
SetCookie("ViewAll", "Т", expCate, null, null, false);
}
window, open (document, location, href , "_top" , " " ) ;
.'.' SendPersonalPage Запись страницы с категориями и ссылками, предпочитаемыми
' ' пользователем. Отображает только заголовки, если предпочтения разрешены
//
"ипсси SendPersonalPage ()
I
if (GetCookieC'ViewAll") != "T")
document. write ( ' <hl>YourFavorites : </hl> ' ) ;
else
document.write( '<hl>Links:</hl>") ;
'.' Кнопки для про^омотра ■[■пций или страниц "View All"
document.write ( '<fornmethod=post> ' ) ;
if (GetCookieC'ViewAll") == "T" ]
i
document, x^7rlte ( '<input type=button value="View Favorites" ' + ' onClick="ToggleView() ;">') ;
)
:lse
I
document, write ( '<input type=button value="View All" + ' onClick= " ToggleView () ;">')
1
document, write ( '<input type=button ' + 'value="Select Personal Favirites" ' +
■ onClick="LoadOptions( );">■);
document.write ( '</form>') ,-
.'.' Ооылки будут выглядеть лучше внутри списка определений
document. write ( ' <dl> ' ) ;
f:r (var 1 = 1; 1 < FaveList. length; i++i
FaveList[i] - WriteAsWebLink ( ) ; '.' Запись каждой ссылки
document.write ( ' </dlXp> ' ) ;
// Вспомогательные функции
//==== ===============
//
// lsEhabled - Возвращает true, если разрешено' предпочтение, указанное параметром name
//
function isEnabled(name)
{
var result = false;
var FaveCookie = GetCookie("Favorites");
if (FaveCookie J= nulli
I
var searchFor = "<" + name + ">" ;
var s tar to f Cookie = FaveCookie. indexOf (searchFor) ;
if l startOfCookie != -li
result = true;
1
recum result;
1
// — — ~ -
// AddFavorite- Разрешает предпочтение, заданное пар'аметром name
//
function AddFavorite(name)
f
if ('isEnabled(name))
{
var fiveYears = 5 * 365 * 24 * 60 * 60 * 1000;
var exp'Date = nex^j Dated ;
expDate. secTime (expDate.getTime () + fiveYears i ;
SetCookie ("Favorites", GetCookie ("Favorites") + "<" + name + ">", expDate, null, null.
Bfl
Персонализация и динамические страницы
Глава 30
//-
ClearFavorite Запрещает предпочтение, заданное параметром name
// -
function ClearFavorite (name)
(
if (isEnabled(name) )
(
var FaveCookie = GetCookie ("Favorites") ;
var searchFor = "<" + name + ">";
var startOfCookie = FaveCookie. indexOf (searchFor) ;
var HewFaves = FaveCookie. substr ing (0, startOf Cookie) +
FaveCookie . substring(startOfCookie+searchFor. length,FaveCookie. length) ;
var fiveYeaxs = 5 * 365 * 24 * 60 * 60 * 1000,-
var expDate = new Date ( ) ;
expDate.setTime (expDate.getTime () + fiveYeaxs );
SetCookie ("Favorites" , HewFaves, expDate, null, null, false);
»
)
//
// SetFavoriteEnabled Включает (SetOn=true) или отключает (SetOn=False)
// предпочтение, определенное параметром паше
//
function SetFavoriteEnabled (name, SelOll)
(
if (SetOn)
AddFavorite (name);
else
ClearFavorite(name) ;
//
// ReloadPage Перегрузить страницу
//
function ReloadPage()
(
window, open (document.location, href, "_top" , "");
')
// Конец сценария —>
</script>
</head>
<body>
<script language=" JavaScript">
<!— Сокрытие сценария от не-JavaScript-браузеров
/*
Именно здесь выбирается страница для отправки. Обычно 'отсылаются персонализированные
■отраницы предпочтении (при помощи SendPersonalpage) . Однако, если cookie -наборы
ShowOj >tions установлены, то вместо них -отправляется страница выбора 'Опций (через
вызов SendOptionsPage) .
v
if (GetCookie ("ShowOptions") == "T")
I
CloarCookie("ShowOptions") ;
SendOptionsPage () ;
else
(
SeridPersonalPage ( ) ;
)
// Конец сцеяариэ —>
</scri.pt>
<cent«sr>
Thrs is a very dull page unless you have a JavaScript
enabled browser. <br>
</c-sril:er>
</body>
</html>
■WVM Избранные программные технологии
ЕШ Часть V
Если бы данная операция выполнялась без JavaScript,
она проходила бы на сервере. Каждое обращение
предусматривало бы запуск сервером определенного вида
сценария или программы, с целью прочтения
пользовательских cookie-наборов и генерации страницы на
лету. Благодаря JavaScript весь процесс проходит на
клиентском браузере, а сервер только загружает
статическую страницу. Можно обойтись и без этого, поскольку
страница может поступать из локального кэша
клиента. Когда страница загружена, отправляются все
ссылки независимо от того, выбраны они или нет. С
помощью cookie-наборов и JavaScript клиент может решить,
какие из них должны отображаться пользователю.
В программе используются три различных cookie-
набора. В наборе Favorites содержится уникальный код
для каждой предпочитаемой ссылки. Cookie-набор View
All переключается между выводом пользовательских
предпочтений и всех возможных ссылок. Программа
также может вывести на экран одну из двух страниц:
одну — для выбранной ссылки и другую — для
изменения конфигурации и опций. Когда установлен cookie-
набор ShowOption, на экране отображается страница
выбора опций Options. В противном случае выводится
обычная страница. На рис. 30.2 показана страница
конфигурирования.
4 C:\My Oacumenls\OocumenlB\Js Unlenshed\New EditaantCbaptet BOMtstin ,. и О х
' З&'-'-.Ш. Не* F&raiBs Tpoli „tftjf. , | [*]
Select Favorites
;:-.. ShowFavofltes"" jj
Comics
P Dilbert
Г Doonesbury
. MrBoffo
General News
Г CNN
PHPR
Г Boston Globe
; Computet Industry
TPCVteek
TTediWeb
Netscape
Г -г jott
Search Engines
Г Yahool
С ItaVisIa
1 bxcite
Auctions
Febay
Г* УпЬлл Aiwibrw
isrov... ..„,.„ „„
i
-
.
.
J
_u
4
■■'■'
РИСУНОК 30.2. Страниц конфигурирования Favorites.
Программа создает объекты, называемые, как
несложно догадаться, "предпочтения". Каждое
предпочтение, по сути дела, — ссылка на другую страницу. Объект
предпочтения содержит информацию о ссылке (URL),
описание страницы и код, определяющий ее в строке
cookie-набора Favorites. Кроме того, объект знает, как
вывести себя на Web-странице в виде обычной ссылки
для страницы Favorites, либо же в формате флажка для
страницы Options.
Серверы и браузеры,
поддерживающие механизм cookie-
наборов
Если другие способы программирования для Web, такие
как CGI или специальные серверные интерфейсы,
требуют, чтобы сервер и браузер воспринимали
cookie-наборы, то в JavaScript это требование
относится только к браузерам. Это означает, что JavaScr p
можно безнаказанно пользоваться до тех пор, пока
клиенты распознают JavaScript.
Однако, многие Web-приложения могут смошивать
JavaScript с другими средствами разработки, которые
требуют от сервера восприятия cookie-наборов
РЕСУРСЫ
Подробная информация, посвященная cookie-наборам
находится на следующих Web-сайтах:
Страница спецификации cookie-наборов компании
Netscape: http://www.netscape.com/newsref/std/
cookie_spec.html
Браузеры, поддерживающие cookies-наборы: http://
www.research.digitaI.com/nsI/formtest/stats-by-test/
NetscapeCookie.html.
Центр cookie-наборов: http://www.cookiecentral.com/
Web-браузеры, поддерживающие cookie-набора от
Digital: http://www.research.digital.com/nsl/formfest/
stats-by-test /NetscapeCookie.html.
Robert's Brooks' Cookie Taste Test: http://
www.geocities.com/SoHo/4S35/cookie.html.
Другие способы поддержки
информации о состоянии
Как упоминалось ранее, применению cookie-наборов
присущи свои недостатки. Возможно, будет предпринята
попытка избежать разногласий и найти другой способ
поддержки состояния при переходе с одной страницы на
другую. Существует два пути. Какой будет выбран,
зависит от того, каким образом пользователи попадают с
одной страницы на другую в рамках создаваемого
сайта.
Главным ограничением этих методов является то,
что они срабатывают при переходе с одной страницы
на непосредственно следующую за ней. Если
информация о состоянии должна поддерживаться на
протяжении целой последоватсльност страниц, механизм
должен применяться на каждой странице.
Строка запроса
Если вся навигация, в основном, приходится на
встроенные в страницы гипертекстовые ссылки, в конце URL
Персонализация и динамические страницы
Глава 30
пользуя свойства search объекта Location. Это свойство
называется search, поскольку многие поисковые
сервера используют эту часть URL для сохранения их
поисковых критерий.
Далее рассматривается пример использования
свойства location.search. В данном примере имя текущей
страницы отправляется как параметр в ссылке на
другую страницу. Другая страница считывает это свойство
с помощью search и определяет, откуда перешел
браузер.
В листинге 30.7 показана первая страница,
содержащая ссылку.
В листинге 30.8 представлена вторая страница,
демонстрирующая использование location.search. В ней
определяется, откуда пришел браузер.
Листинг 30.7 Where 1 .html
<html>
<head>
<title>Where Was I? - Page l</title>
</head>
<body>
<hl>W4ere Was I? - Demons tration</hl>
This page sets information which will allow the page it is linked
to out where it came from. It uses values embedded in the link
URL in order to do this
<-p>
He'll assume that any URL parameters are separated by an ampersand.
<P>
Notice that there doesn't need to be any JavaScript code in this page.
<P>
And и ow,
<a href="where2.html?camefrom=Wherel. html&more=needless+stuff">
let's go to Page 2.</a>
</body>
</html>
Листинг 30.8 Where2.html
<html>
<title>Where Was I? - Page 2</title>
<head>
</head>
<body>
<hl>Where Was I? - Demontration</hl>
This page reads information which allows it to out where it came from.
<P>
<Script language=" javascript ">
<! — Начало сценария
// WhereWasI
// Считывание строки поиска для вывода того, что предоставила ссылка
function WhereWasI () {
// Сохранить строку поиска в удобном месте (таким образом, чтобы лишний pas не
// производить набор)
var handyString = window . location. search ;
// Найти начало специальной переменной URL
var startOfSource = handyString. indexOf ("camefrom=") ;
// если присутствует, найти конец переменной
if (StartOf Source != -1) {
var endOfSource = handyString.indexOf ("S", startOfSource+9) ;
var result = handyString. substring (startOfSource+9, endOfSource) ;
}
ЕШ
потребуется добавить дополнительную информацию. Это
обычно проделывается за счет добавления знака
вопроса (?) в конце URL Web-страницы, за которым следует
информация в кодированной форме, возвращаемая
методом escape(). Для отделения одной части информации
от другой, используется амперсанд (&).
Например, если разработчик пожелает отправить
вместе с ссылкой параметры color=blue и size=extra
large, ссылку должна выглядеть так:
<а href=
"/inypage.html?color=blue6size=extra+large">
XL Blue</a>
Этот формат подобен тому, что используется при
передаче работы формы с помощью метода get.
Следующая страница может считывать эту информацию, ис-
Избранные программные ехнологии
Часть v
else
var result = "Source Unknown"; // Невозможно отыскать строку "camefrom"
return result;
\
if (WhereWasI () != "Source Unknown")
document.write ("You just came from <b>" + WhereWasIO + "</b>.<br>")
else
document.write ("Unfortunately, we don't know where you came from.<br>") ;
// Конец сценария —>
</script>
</body>
</html>
Скрытые переменные формы
Метод, описываемый в предыдущем разделе, работает,
пока пользователь перемешается по страницам с
использованием ссылок. Для того чтобы выполнить это же
задание, но только с формами, потребуется вместо
параметра location.searcli прибегнуть к скрытым переменным
формы.
Скрытые переменные формы обладают следующим
форматом:
<inpu< type="hidden" name="HiddeziFieldName"
value= "H±ddenF±eldValui'>
Для HiddenFieldNami и HiddeFieldValue можно
указать все, что угодно. Параметр value определять не
обязательно.
Для использования скрытых полей код JavaScript
необязателен. Они определяются в обычном
HTML-документе, а не в дескрипторе <input>. Серверные
сценарии, такие, KaKCGI-программь или программы,
использующие API сервера, для чтения значений скрытых
полей не обязательны.
Форма, содержащая скрытые переменные,
передается в серверные сценарии или даже в функции JavaScript,
которые выдают все, что знают о браузере, в отдельную
Web-страницу, включая информацию о полях формы.
Информация о скрытых полях находится в нижней
части страницы. Она выглядит следующим образом:
Form Post Data:
Raw Form Data String:
camefrom=where3 .htmSotherStuf f=I+don%27 t+care
camefrom=where3.htm
otherStuff=I don' t care
Резюме
В главе рассматривались способы создания
динамических и персонализированных Web-страниц за счет
поддержки информации о состоянии. Оказалось, что самый
эффективный способ заключается в использовании
cookie-наборов.
cookie-наборы позволяют сохранять информацию
на клиентском компьютере и применять ее в
приложении с целью записи значений и другой важной
информации. Учитывая широкомасштабность "ookie-Ь'аборов,
их можно применять как для простейших пар name=valuc,
так и для более сложных форм.
Хотя cookie-наборы и представляют самый
эффективный метод поддержки информации о состоянии,
существуют и другие способы, например, параметры
строки запроса URL и скрытые поля формы.
Выполнение поиска по шаблону
с использованием регулярных
выражений
В ЭТОЙ ГЛАВЕ
■ Создание регулярных выражений
■ Синтаксис регулярных выражений
■ Использование регулярных выражений
■ Тестер регулярных выражений
■ Пример: программа проверки правильности
ввода телефонных номеров
Одно из наиболее важных свойств JavaScript — это
возможность выполнения поиска по шаблону. Поиск по
шаблону в JavaScript осуществляется с помощью
регулярных выражений (Regular Expression). Эта идея была взята
из наиболее удобного и доступного современного
языка с подобными возможностями — Perl. Поиск по
шаблону позволяет отыскивать сложные образцы в строках.
Для поиска по шаблону простейших выражений без
регулярных выражений потребуется очень много строк
кода. В главе рассматривается синтаксис, необходимый
для создания регулярных выражений.
Создание регулярных выражений
Хотя, на первый взгляд, регулярные выражения могут
показаться чем-то необычным, разработчик должен
понимать, что это не просто строки, содержащие буквы,
цифры и символы. Специалистсоздаетшаблон, aJavaScript
выполняет поиск. Для упрощения работы регулярные
выражения были помещены в объект RegExp. Создание
регулярных выражений очень напоминает создание
строк при помощи объектного конструктора или
оператора присваивания (=).
Конструктор RegExp()
С тех пор как регулярные выражения приобрели
объектную оболочку в JavaScript, можно просто вводить шаблон
как аргумент в конструктор RegExp (), а затем
присваивать результирующий объект переменной. Например,
ниже создается объект RegExp с именем flrstName,
содержащий шаблон John.
var firstName=new RegExp ("John")
He переживайте, если пока еще не понятно, что
означает понятие шаблон (это обсуждается немного
позже); сфокусируйте внимание на синтаксисе,
применяемом при создании объекта RegExp.
Оператор присваивания
Второй путь создания регулярных выражений —
присваивание шаблона непосредственно переменной и
предоставление JavaScript возможности проверять, чтобы
переменная была объектом RegExp. Следующая строка
кода создает объект RegExp с именем flrstName,
содержащий шаблон John.
var firstName=/John/;
Разработчик наверняка заинтересуется, а как же
JavaScript может знать, что flrstName должен быть
объектом RegExp, а не объектом String. Различие состоит в
том, что строки заключаются в двойные или одинарные
кавычки, в то время как шаблоны — в символы косых с
правым клоном (/). Заметьте, что конструктор RegExp()
обходится без такого символа поскольку он отличается
от конструктора String().
Синтаксис регулярных выражений
После того как стало понятно создание объектов
регулярных выражений, можно перейти к синтаксису,
необходимому для создания реального шаблона. Как
упоминалось ранее, синтаксис шаблонов взят непосредственно
из Perl. При наличии определенных знаний по этому
языку, следующие задания покажутся весьма простыми.
В табл. 31.1 перечислены все специальные символы
поиска по шаблону.
Избранные программные технологии
Часть V
Таблица 31.1 Символы поиска по шаблону
Символ
Описание
\w
\W
\s
\S
\d
\D
t\b]
Г-]
[x-y]
["Х-У]
{x.y}
{X.}
M
+
(...)
\x
\b
\B
Любой символ в слове (алфавитно-цифровой).
Неалфавитно-цифровой символ.
Любой пробельный символ (символы табуляции, новой строки, возврата каретки, перевода страницы,
вертикальной табуляции).
Непробельный символ.
Цифровой символ.
Нецифрой символ.
Символ забоя.
Любой символ за исключением символа новой строки.
Любой символ, указанный в скобках.
Любой символ, за исключением перечисленного в скобках.
Символы в промежутке от х до у.
Символы, не входящие в промежуток от х до у.
Предыдущий злемент должен быть найден не менее х раз, но не более у раз.
Предыдущий злемент должен быть найден не менее х раз.
Предыдущий элемент должен быть найден точно х раз.
Предыдущий злемент должен быть найден однажды или вообще не найден.
Предыдущий злемент должен быть найден хотя бы один раз.
Предыдущий злемент должен быть найден неограниченное количество раз или вообще не найден.
Должно быть совпадение либо в выражении справа, либо слева от символа |.
Группировка всех элементов в круглых скобках в подшаблон.
Поиск тех же символов, что и полученных из подшаблона в группе х. Группы, заданные в круглых скобках,
нумеруются слева направо.
Поиск с начала строки или же с начала первой строки в многострочных данных.
Поиск с конца строки или с конца последней строки в многострочных данных.
Позиция между знаком, входящим в слова, и не входящим в слова.
Позиция, не находящаяся между знаком, входящим в слова, и не входящим в слова.
Некоторые их перечисленных выше символов —
достаточно просты для понимания, в то время как
некоторые — не столь очевидны. В следующих разделах
детально рассматриваются все символы.
\w и \W
Строчная w (\w) определяет любой символ, который
находится в словаре. К таким знакам принадлежат
алфавитно-цифровые символы. Это означает, что им
может быть либо буква (a-z), либо цифра (0-9). Прописная
W отличается тем, что определяет символы, не входящие
в слова. Например, шаблон поиска
var pattern=/\w\W/ ;
находит Ь? в строке поиска, но знак ?Ь не будет найден,
поскольку первым должен быть символ буквы или
цифры, а вторым — символ, не являющийся буквой или
цифрой.
\5И\5
Строчная s находит любой пробельный символ.
Пробельные символы — это символы табуляции, символы
новой строки, возврата каретки, перевода страницы и
вертикальной табуляции. Прописная S (\S) отличается
тем, что находит непробельные символы. Например,
шаблон поиска
var pattern=/\s\S/;
найдет символ возврата каретки, за которым следует g,
но не сможет найти g, за которой следует символ
возврата каретки.
\dii\D
Строчная d (\d) отыскивает любую цифру (0—9), а
прописная D (\D) является противоположностью, выполняя
поиск любого символа, не являющегося цифрой.
Например, шаблон поиска
Выполнение поиска по шаблону с использованием регулярных выражений
-СП
var pattern=/\d\D/;
найдет 4р в строке поиска, но не сможет найти р4,
поскольку цифра должна находиться на первом месте, а не
на втором.
[\Ь]
Строчная b в скобках |\Ь| используется для поиска
символа забоя (backspace). Существует не так уж и много
случаев, когда требуется поиск символа забоя, однако
если уж подобная потребность возникла, постарайтесь
использовать именно этот шаблон.
Точка
Точка (.) применяется для поиска всех знаков, за
исключением знаков новой строки.
[...] И [а...]
Скобки используются для поиска одного символа,
находящегося внутри скобок. Если после левой скобки
находится символ Л, выполняется поиск любого символа,
не входящего в перечисленные в скобках. Например,
Шаблон поиска
var pattern=/[abc] ["dt ]/;
найдет ag в строке поиска, но не сможет найти ga,
поскольку на первом месте должны стоять либо а, либо Ь,
либо с, а на втором — d, e или f.
[х-у] и [лх-у]
Черта внутри скобок используется для определения
диапазона вместо перечисления всех символов.
Обнаруживается любой символ в рамках диапазона х-у,
появляющийся в строке поиска. Если сразу после скобки следует
символ л, находится любой символ, не входящий в
диапазон. Предыдущий пример можно переписать
следующим образом:
var pattern=/[a-c] ["d-f)/;
Этот шаблон найдет в строке поиска ag, но не
сможет найти ga, поскольку на первом месте должны
стоять а, Ь, или с, а на втором — d, e или f.
{х,у), {х,} и {х}
Существует несколько вариантов синтаксиса с
фигурными скобками; всех их связывает повторение символа,
следующего за левой фигурной скобкой. В данном
синтаксисе х и у представляют цифры. Если применяется и
х, и у, тогда предыдущий символ должен быть найден,
по меньшей мере, х раз, но не более у раз. Если за х
следует запятая, тогда предыдущий символ должен быть
найден х раз. И наконец, если в скобках находится
только х, но без запятой, тогда предыдущий символ должен
Глава 31
быть найден в точности х раз. Например, шаблон
поиска
var patterns/cho(1,2)se/;
найдет chose и choose в строке поиска, но не сможет
найти chooose, поскольку символ о должен
присутствовать хотя бы один раз, но не более двух раз.
?, + И *
Существует три операции, выполняющие определенные
действия, связанные с фигурными скобками, а именно:
знак вопроса (?), плюс (+) и звездочка (*). Знак
вопроса (?) находит предыдущий символ один раз или
вообще не находит такового. Плюс (+) отыскивает
предыдущий знак хотя бы раз. И наконец, звездочка (*) находит
предыдущий знак любое количество раз или вообще не
находит. Например, шаблон поиска
var pattern=/ab?c/ ;
найдет abc или ас в строке, но не сможет найти abbe,
поскольку символ "Ь" должен быть найден один раз или
вообще не найден.
Логическое или (|)
Вертикальная черта (|) действует как логическое ИЛИ
(OR) и отыскивает символ либо справа, либо слева от
вертикальной черты. Например, шаблон поиска
var pattern=/cat | dog/ ;
найдет в строке cat или dog.
(-)
Круглые скобки позволяют выполнять поиск элементов,
помещенных внутрь других элементов. Например,
шаблон поиска
var pattern=/f(а|о)г/;
найдет в строке поиска far или for.
\Х
\х в комбинации с круглыми скобками используется для
поиска символов подшаблона с номером группы х.
Группы обозначаются круглыми скобками и нумерация их
следует слева направо. Например, шаблон поиска
var pattern=/f(a|o)r\l/;
осуществит поиск в строке fara и foro, но не faro и fora.
Когда символ " находится перед текстом, поиск будет
производиться только в том случае, если текст
появляется в начале строки или в начале первой строки
многостроковой последовательности. Например, следующий
Шаблон поиска
Ш Избранные программные технологии
Часть V
var pattern=/"The/;
выполнит поиск слова The, если оно присутствует в
начале последовательности или в начале одиночной
строки.
$
Символ $ является полной противоположностью
символу Л. Например, если знак $ помещается перед текстом,
поиск будет происходить в том случае, если текст
появляется в конце поисковой строки или в конце последней
строки в многостроковой последовательности.
Следующий шаблон поиска
var pattern=/"home/ ;
приведет к поиску слова home, если оно появляется в
конце последовательности или одиночной строки.
\Ь и\В
Строчная b (b\) находит положение между словарным и
несловарным знаком. Имейте в виду, что словарный знак
является алфавитно-цифровым. Это означает, что он
может быть либо буквой (a—z), либо цифрой (О-9).
Прописная В (\В) — напротив, находит позицию,
выходящую за пределы словарного и несловарного знаков.
Например, шаблон поиска
var pattern=/cat\b/;
найдет слово cat, за которым следует пробел. Пробел
является несловарным символом.
Возможно, возникнет вопрос, а что, если
потребуется отыскать особый символ, например, символ $? Все
особые символы представляются с использованием
наклонной черты влево (\), за которой следует
собственно символ. В табл. 31.2 перечислены все символы,
конфликтующие с символами поиска по шаблону.
Таблица 31.2 Специальные символы
Символ Описание
\f Перевод страницы.
\п Новая строка.
\| Возврат каретки.
\t Табуляция.
\v Вертикальная табуляция.
V Наклонная черта вправо.
\\ Наклонная черта влево.
\ Точка.
'■* Звездочка.
\+- Плюс.
\? Знак вопроса.
\| Вертикальная черта.
Символ Описание
\( Открывающая круглая скобка.
\) Закрывающая круглая скобка.
\[ Открывающая квадратная скобка.
\] Закрывающая квадратная скобка.
\{ Открывающая фигурная скобка.
\> Закрывающая фигурная скобка.
\ХХХ Символ ASCII, представленный восьмеричным
кодом XXX.
\хНН Символ ASCII, представленный
шестнадцатиричным кодом НН.
\сХ Управляющий символ, представленный X.
И наконец, последняя часть синтаксиса позволяет
устанавливать атрибуты, связанные с регулярными
выражениями. Атрибуты сведены в табл. 31.3.
Таблица 31.3 Атрибуты поиска по шаблону
Символ Описание
g Глобальный поиск. Найти все возможные
совпадения.
i Поиск без учета регистра.
В отличие от ранее рассмотренного синтаксиса, эти
атрибуты устанавливаются за пределами наклонных черт
влево, определяющих шаблон при создании регулярных
выражений. Регулярные выражения для глобального
поиска слова "bear" выглядит следующим образом:
var animalsearch=/bear/g;
В случае создания регулярного выражения с
использованием конструктора RegExpQ атрибуты необходимо
сохранить как строку и передать ее во втором аргументе
конструктора. Регулярное выражение для поиска слова
"bear" без учета регистра выглядит следующим образом:
var animalSearch=new RegExp ("bear", "i")
Использование регулярных выражений
Сейчас, когда необходимый шаблон уже присвоен
объекту RegExp, что же с ним делать дальше? Существует два
пути применения регулярных выражений. Первый
заключается в использовании методов объекта RegExp, a
второй — в использовании методов объекта String. В
конечном итоге регулярные выражения смогут начать
поиск по шаблону внутри строки. Методы поиска по
шаблону, которые обеспечивает объект RegExp,
представлены в табл. 3I.4. Обратите внимание, эти методы
требуют передачи в качестве аргумента объекта String,
в котором выполняется поиск.
Выполнение поиска по шаблону с использованием регулярных выражении
яла
Таблица 31.4 Методы поиска по шаблону в
объекте RegExp.
Метод Описание
exec (sir) Осуществляет поиск по шаблону sfr и
возвращает результат.
test (sfr) Осуществляет поиск по шаблону sfr и
возвращает true, если соответствие найдено,
и false — в противном случае.
(sfr) Тоже самое, что и метод exec (sfr).
Методы поиска по шаблону, поддерживаемые
объектом String, перечислены в табл. 31.5. Эти методы
требуют передачи в качестве аргумента объекта RegExp, в
котором совершается поиск.
Таблица 31.5 Методы поиска по шаблону в
объекте String.
Метод Описание
match (regExpObj) Осуществляет поиск шаблона
regExpObj внутри строки и
возвращает результат.
replace (reqExpOb], sfr) Заменяет все вхождения шаблона
regExpObj на sfr.
search (regExpObj, str) Возвращает позицию вхождения
regExpObj внутри строки.
split (regExpObj, max) Производит разбиение строки на
max частей в местах, где
встречается вхождение regExpObj.
Подстроки возвращаются в виде
массива.
ПРИМЕЧАНИЕ
Методы, перечисленные в табл. 31.4 и 31.5, не
являются единственными, связанными с объектами String и
RegExp. Были представлены только наиболее
распространенные методы, применяемые для поиска и замены.
Тестер регулярных выражений
Замысловатый синтаксис, используемый при создании
шаблонов для регулярных выражений, может
несколько запутать разработчика, в особенности, если
необходимо смешивать и находить функции для создания
сложных тоисковых шаблонов. Именно по этой причине в
главе рассматривается программа для тестирования
регулярных выражений. Она поможет не только изучить
сам процесс создания регулярных выражений с помощью
конструктора RegExp(), но также и создавать и
тестировать собственные шаблоны поиска.
Как показано на рис. 31.1, данная программа
выполняет поиск и замену в поисковой строке, в строке
замены и шаблоне, который был введен. Преимущество этой
программы заключается в возможности создания
строки поиска и шаблона, а после — тестирования того, что
шаблон работает именно так, как было задумано.
Исходный код программы показан в листинге 31.1.
Рвди'ог Expres IoiTb- ,-t-Nb*- -ре НГЛЕЗ
[* ■ г I - ■ /; - <--. . '■ . ^"' -.=-.-■
Regular Expression Tester
Search String: ja Ыд cat
Replace String: liittie
,__ |
Attributes: jg I
Pattern: jbig
Result: |a little cat
; Hit- :-a-'^ -:•;■' tfi be ■ " ' - -. "..- ,. ; ' - ^.^ fJ-_ /Jy^^XJ'.<
РИСУНОК 31.1 Тестер регулярных выражений
Листинг 31.1 Тестер регулярных выражений
<html>
<head>
<title>Regular Expression Tester</title>
<script language="iTavaScript">
< \ — Начало сценария
// Функция осуществляет поиск по шаблону в
// searchStr
function searchForPattern (searchStr, pattern,
REattributes, theResult)
{
//Создание объекта регулярного выражения
var regExpObj = new
RegExp (pattern,REattributes) ;
//Заполнение поля результата результатами поиска
theResult.value = regExpObj.exec(searchStr);
J
// Эта функция заменяет на replaceStr все
// вхождения шаблона в searchStr
function replacePattern(searchStr,replaceStr,
pattern, REattributes, theResult)
I
//Создание объекта регулярного выражения
var regExpObj = new
RegExp(pattern,REattributes);
//Заполнение поля результата результатами
//поиска.
theResul t. value =
searchStr. replace (regExpObj, replaceStr) ;
// Эта функция очищает все поля страницы
function clearFields (fieldl, field2, field3,
field4, field5)
£
Избранные программные технологии
Часть V
fieldl. value =
field2. value =
field3. value =
field4 .value =
fields, value =
1
// Конец сценария —>
</script>
</head>
<bodv>
<center>
<hl>Regular Expression Tester</M>
<f orm ame="mvForm" ">
< table board=0>
<tr align=right>
<td>Search String :</td>
<tdxinput type="text" name="searchString,,X/td>
</tr>
<tr align=right>
<td>Replace S tring: </ td>
<tdxinput type="text" name="replacestring,,x/
td>
</tr>
<tr align=right>
<td>Attributes:</td>
<tdxinput type="text" name="REattributes"X/td>
</tr>
<tr align=right>
<td>Pattern: </td>
<tdxinput type="text" name="pattern"X/td>
</tr>
</table>
<br>
<inpu( type="button"
value="Search for pattern"
onClick=" searchFor Pattern (sear chStJ ing. value,
pattern.value,
BEattributes. value,
result) ">
<input type="button"
value="Replace pattern"
onClick="replacePattern (searchSt-ing. alue,
replaces ..ring .value,
pattern. value,
REattributes .value,
result) >
<inpu( type="button"
value="Clear"
onClick="clearFieIds(searchString,
replaceString,
pattern,
BEattributes,
result) ">
<brXhrXbr>
Result: <input type="text" name="result,,>
</center>
</body>
</html>
Тестер регулярных выражений можно условно
разбить на четыре основные части: пользовательский
интерфейс, функция поиска, функция замены и функция
очистки полей.
Пользовательский интерфейс
Пользовательский интерфейс тестера регулярных
выражений состоит из формы с пятью текстовыми окнами и
трех кнопок. Текстовое окно searchString
обеспечивает место для ввода строки, поиск которой
осуществляется по определенному шаблону. Текстовое поле ввода
replaceString обеспечивает пространство для ввода
строки, используемой для замены частей searchString, где
отыскивается соответствие. Значение из этого поля
применяется после щелчка на кнопке Replace Pattern.
Такие атрибуты поиска по шаблону, как глобальный
поиск/замена и поиск без учета регистра, помешаются в
текстовом поле ввода attributes. Текстовое поле ввода
pattern обеспечивает место для ввода шаблона
регулярного выражения, по которому выполняется поиск в
searchString. После щелчка на кнопках Search for Pattern
или Replace Pattern результат поиска/замены
помещается в окно result.
Функция поиска
После щелчка на кнопке Search for Pattern обработчик
событий onClick вызывает функцию search For Pattern.
Эта функция передает конструктору шаблон, л также
информацию об атрибутах, введенную в HTML-форму,
с целью создания объекта RegExp с именем regExpObj.
Метод regExpexec() используется для поиска по
шаблону в поисковой строке, которая была введена в форму.
Результат поиска помещается в текстовое поле result.
Если же соответствие не найдено, упомянутое поле
остается пустым.
Функция замены
После щелчка на кнопке Replace Pattern обработчик
событий onClick вызывает функцию replacePattern(). Эта
функция передает конструктору шаблон, а также
информацию об атрибутах, введенную в HTML-форму, с
целью создания объекта RegExp с именем regExpObj.
Метод replace') объекта searchStr применяется для замены
на repIaceStr вхождений шаблона в searchStr. Затем
результат поиска и замены помещается в текстовое поле
result. Если соответствие не найдено, в текстовое поле
result помещается searchStr.
Функция очистки
После щелчка на кнопке Clear обработчик событий onClick
вызывает функцию clearFields(). Эта функция
производит очистку всех текстовых полей.
Выполнение поиска по шаблону с использованием регулярных выражений
Глава 31
-СТЯ
Пример: программа проверки
правильности ввода телефонных
номеров
Итак, читатели уже знакомы с регулярными
выражениями, знают, как их создавать, а также имеют программу,
которгя поможет в определении шаблонов поиска. Но
как применить регулярные выражения для решения
реальных задач? В современном Internet превалирует
электронная коммерция. Поэтому огромную роль играет
проверка ввода телефонных номеров, адресов и номеров
кредитных карточек. Многие виды проверок, например,
кредитных карточек, должны выполняться на серверной
части, однако проверка статической информации может
проводиться и на стороне клиента. Один из видов
информации, проверяемой на серверной части, связан с
территориальными кодами. Поскольку они меняются не
очень часто, их можно поместить на Web-страницу и
выполнять проверку с использованием регулярных
выражений в JavaScript.
В этом разделе рассказывается применение
регулярных выражений для проверки территориальных кодов
перед тем, как разрешить пользователю продолжать
работу. Предположим, что создается Web-сайт для
компании North Caroline, торгующей различным хламом.
Прежде чем пользователь сможет продолжить составлять
заказ, следует убедиться, что компания имеет
корректный телефонный номер, относящийся к Северной
Каролине. В противном случае могут возникнуть
проблемы с отгрузкой товара.
Было бы разумно поместить все номера Северной
Каролины на Web-страницу и с их помощью проверять
корректность введенного номера. Однако можно
проверить правильность ввода территориального кода, который
должен относиться к Северной Каролине. Если клиент
допустил ошибку при вводе кода, его можно
предупредить и предложить ввести номер Северной Каролины.
Если же код правильный, формирование заказа можно
продолжить.
За счет использования поисковых шаблонов для
телефонных номеров Северной Каролины, можно быстро
определить корректность номера введенного
пользователем. Все телефонные номера состоят из трехцифрового
территориального кода, за которым следует трехцифро-
вая гриставка, а за ней — четырехцифровое расширение.
Шаблон будет выглядеть следующим образом: ###-###-
####. Поскольку знак # обозначает цифру, можно
прибегнуть к синтаксису регулярных выражений \d для
цифры в этих позициях. Поисковый шаблон станет таковым:
/\d\d\d-\d\d\d-\d\d\d\d/
Обратите внимание, что наклонная черта вправо
указывает на конец и начало шаблона. Поскольку
известно, что в Северной Каролине имеется только шесть
кодов (828, 252, 704, 919, 910, 336), то их можно
задействовать в шаблоне:
/(828 12521 7041 919 | 910 | 336) -\d\d\d-\d\d\d\d/
Добавьте подшаблоны в основной шаблон, поместив
все возможные территориальные коды в круглые
скобки и отделив каждый код вертикальной чертой.
Вертикальная черта означает, что должна предприниматься
попытка поиска значения справа или слева, т.е.
логическая операция ИЛИ. Если пользователь вводит
территориальный код, определенный в списке, результат
поиска будет положительным.
Теперь, когда составлены все поисковые шаблоны
для телефонных номеров Северной Каролины,
потребуется построить пользовательский интерфейс и
протестировать шаблоны. Если отыскивается шаблон в строке,
содержащей правильный телефонный номер, то
возвращается соответствующий телефонный номер. С другой
стороны, если ищется шаблон в строке с неправильным
телефонным номером, будет возвращен NULL. По
наличию NULL можно судить, является ли введенный
пользователем номер правильным. Следующая функция
JavaScript реализует описанную выше операцию.
function validatePhone (areaCode rprefix, extension)
(
//Сборка телефонного номера
var phoneNum = new String (areaCode + "-" +
prefix + "-" + extension) ;
//Создание шаблона регулярного выражения,
//выполняющего поиск телефонного номера с
//территориальными кодами 828, 252, 704, 919,
//336.
var regExpObj = / (82812521 704 | 919 | 910 | 336) -
\d\d\d-\d\d\d\d/;
if (regExpObj .exec (phoneNum) = null)
f
alert (phoneNum + ■■ does not contain a valid
"-North Carolina area code ! " ) ;
>
else
f
alert ("Thank you for your order!");
\
}
Если добавить в функцию некоторый HTML-код,
получится полнофункциональная программа проверки
телефонных номеров. В листинге 31.'' представлен
полный исходный код такой программы.
Листинг 31.2. Проверка введенного телефонного
номера.
<html>
<head>
<title>Phone Number Validation</title>
<SCript language="JavaScript">
<! — Начало сценария
га
Избранные программные технологии
Часть V
function validatePhone (areaCode,prefix,extension)
<
//Сборка телефонного номера
var phoneNum = new String (areaCode + "-" +
prefix + "-" + extension) ;
//Создание шаблона регулярного выражения,
//выполняющего поиск телефонного номера с
//территориальными кодами 828, 252, 704, 919,
//910, 336
var regExpObj = / (828|252|704|919|910|336)-
\d\d\d-\d\d\d\d/;
if (regExpObj. exec (phoneNum) = null)
[
alert (phoneNum + " does not contain a valid
"North Carolina area code!"),
I
else
1
alert ("Thank you for your order!");
}
)
// Конец сценария—>
</script>
</head>
<body>
<center>
<hl>NC Sales Company</hl>
Thanks for your order. Please provide us with
your North Carolina phone number so we can
contact you if uhere are any problems shipping
your order.
<*orm nai ="fon 1">
Phone Number: <input type='Itext"
size=3
maxlength=3
name="area">-
<input type="text"
size=3
maxlength=3
name="prefix">-
<input ty^e="text"
size=4
maxlength=4
name="extension">
<brXbr>
<input type="button"
value="Submit"
onClick="validatePhone (area. value,
prefix.value,
extension.value)">
</form>
</center>
</body>
</html>
Теперь можно приступить к тестированию
программы. При наборе правильного телефонного номера,
например, 919-293-4444, и щелчке на кнопке Submit
отображается окно предупреждения, сообщающее об
обработке заказа. При вводе неправильного номера,
скажем, 918-293-4444, и щелчке на кнопке Submit поиск
завершается неудачей и появляется сообщение об
ошибке (см. рис. 31.2).
-; О' X
EaJi-' ^ew .уц '' тупике'
NC Sales Company
Thanks for your order. Please provide us with you North Carolina phone
number so we can contact you inhere are any ..roblems shipping your order.
Phone Number: |91в»|гэз -\иа
:HttxM |
C--[Jow3etiptApprcaliDh] В
еэтегг *t-.
РИСУНОК 31.2 Программа проверки правильности введенного
телефонного номера.
Резюме
Глава была посвяшена использованию объекта
регулярного выражения. Подробно рассматривались способы
создания шаблонов поиска и объектов RegExp, в
которых эти шаблоны хранятся. Кроме того, исследовались
особенности применения шаблонов, предназначенные
для поиска текста. При этом использовались методы
объектов RegExp и String.
Для иллюстрации работы с регулярными
выражениями рассматривался тестер таких выражений. Эта
утилита незаменима при создании и тестировании сложных
поисковых шаблонов. Программа проверки
правильности ввода телефонных номеров продемонстрировала
один из способов реального применения регулярных
выражений.
Технология обработки данных
со стороны клиента
В ЭТОЙ ГЛАВЕ
■ Определение источника данных: клиент или сервер?
■ Что такое клиентская таблица?
■ Создание таблиц поиска
■ Создание поискового пользовательского интерфейса
■ Обработка поисковых запросов
Ш Отображение результатов поиска
■ Запуск приложения
Web предлагает поистине революционный подход к
созданию приложений баз данных, обеспечивая
возможности доступа к удаленным базам данных через Web-
браузер и возврате результатов в HTML-формате.
Несмотря на то что этот способ практикуется, в основном,
при работе с CGI-сценариями, для получения доступа
к данным можно воспользоваться и JavaScript.
Обычно, когда говорят о доступе к базам данных в
Web, имеют в виду, что данные находятся на сервере.
Однако JavaScript обеспечивает работу с данными и на
стороне клиента. В этой главе рассматривается, как при
помощи JavaScript можно манипулировать данными на
клиентской части, что может оказаться альтернативой
CG1 или другим серверным решениям.
Определение источника данных:
клиент или сервер?
Прежде чем углубиться в сам процесс работы с
клиентскими данными в JavaScript, стоит разобраться, имеет
ли все это смысл. Несмотря на то что клиентские
данные могут иметь различные типы, они будут
рассматриваться как таблицы баз данных. Например,
разработчик желает получить данные из реляционной базы
данных и преобразовать их в структурированный набор
данных JavaScript, хранящийся в HTML-файле или на
клиентском компьютере. Поскольку в главе
используется подход, ориентированный на базы данных, на набор
данных JavaScript ссылаются как на таблицу
клиентской части.
Таблицы клиентской части имеют два главных
ограничения. Первое: базы данных рассчитаны только на
чтение. Поскольку данные внедрены в HTML-код,
пользователи не смогут добавлять, изменять или
сохранять эти данные на клиентской части. Если появляется
необходимость в корректировке тех же данных на
серверной части, теоретически это возможно. В таком
случае, если происходят какие-либо изменения,
клиентскую базу данных потребуется перезагрузить. Так или
иначе, пока разработчик не преодолеет множество
преград, таблица клиентской части будет предназначаться
только для чтения.
Второе ограничение связано с тем, что базы данных
должны иметь относительно небольшие размеры.
Данные хранятся в HTML-файле. Когда пользователь
получает доступ к Web-странице, производится ее полная
загрузка. Вряд ли кто-то пожелает внедрить в файл базу
данных объемом в 100000 записей. Даже если
пользователь обладает прямым подключением к Internet, все
равно длительность загрузки приведет к некоторым
неудобствам.
Максимальный размер набора данных зависит от
контекста. При создании таблицы клиентской части,
которая будет передаваться со скоростью 28.8 Кбит/с
для модема 56 Кбит/с, размер таблицы можно
ограничить до 1000 записей. Однако, при создании intranet-
решения, которое предусматривает быстрое соединение,
границы можно расширить.
Итак, с ограничениями должно быть все ясно, так
почему же таблицы клиентской части все еще
используются, если существует множество других способов
работы с различными видами баз данных? На то
имеется два объяснения. Во-первых, по ряду причин, с
помощью таблицы клиентской части можно получить бо-
Избранные программные технологии
Часть V
лее простые решения, чего нельзя сказать о
CGI-сценариях и других средствах Web-сервера, принимая во
внимание статичность и относительно малые размеры
набора данных. Во-вторых, поскольку все данные,
поисковый механизм и пользовательский интерфейс
находятся на клиентской части, то доступ к серверной
части совершенно не нужен. В результате существенно
увеличивается скорость поиска и минимизируется
дополнительная нагрузка на сервер, необходимая для
осуществления поиска.
Многие станут возражать, что несмотря на
перемещение данных на сторону клиента, данные все равно
проходят через серверную часть при загрузке страницы.
И это правда. Однако, сервер не должен выполнять CGI-
поиск, а только отправить клиенту HTML-файл.
Поскольку корпорации разворачивают интрасети, в
Web переносится большое количество маленьких
сетевых приложений. По причине того, что многие из них
ориентированы на базы данных, будет расти трафик
корпоративных Web-серверов. В некоторых случаях
таблицы клиентской минимизируют загрузку сервера.
Одним из примеров является приложение списка
телефонных номеров компании. Можете назвать компанию,
которая бы не имела такого списка, по крайней мере,
на бумаге? В данной главе рассматривается именно этот
пример, поскольку он более всего соответствует
применению клиентских данных для решения задач
современного бизнеса.
Что такое клиентскаятаблица?
Для Web-разработчиков термин таблица
ассоциируется с HTML-таблицами, которые создаются при
помощи дескрипторов <table>. Однако эта тема в данной
главе не затрагивается. Поскольку речь идет о
приложениях баз данных термин таблица ассоциируется с
таблицей, содержащей строки и столбцы в формате
реляционных баз данных. На рис. 32.1 показана типичная
таблица баз данных. Существует множество различных
способов работы с данными, а также выполнения их
поиска, что в большей части зависит от способности
программных средств управлять базами данных. В этом
разделе под термином таблица подразумевается табли
ца базы данных.
К сожалению, работа с реляционными таблицам на
клиентской части JavaScript посредством доступа к
базам данных будет невозможна несмотря на то, что эту
операцию можно проводить на серверной части.
Необходимо переводить базы данных в структурированный
формат, в котором может работать код JavaScript. В
JavaScript основной используемой организационной
структурой является массив. Можно получить доступ к
любому элементу массива JavaScript и выполнить
вычисления, как это проделывает реляционная Оаза
данных с каждой записью во время поступления запроса.
На рис. 32.2 проведена параллель между данными в
реляционной таблице и данными в массиве.
«mto.'CQ&W/flVM
СОШТНГ
ч
%
Ml
!*!„
.JBch*.
0гк
.-i '.апасЦ:
С
«.'fcu ОГ
. ВДВДО
1 i
т
Hit
-;М- Piffi
"lfi Petu
Н!Ё:й* !Й£
'? tWi^
IE Vaneiue
t-i-trtfe
*=йГ£
''CauSafr*
uon
uifi
0ft
*4
XA*n*nvia
Wa>(
Mo^fc,
Caracas»
"'=' " ~СогЙк«№
4F
Amp"
NortH-A
=a™
'firiphz
Am
vMTfi
- о /
A/oa ;j
m ■ sh
" 'ид .*
Ш.1
"1
4
PUUJ
fcoo i
to:
0П •
«Hi,
- ,.±i
РИСУНОК 32.1. Таблица еляционной базы данных.
Ordered Set of Tabular
Data
Relational Table
Best Movies
_Casarj|anca
Chariots of Fire
African Queen
A_RcomjMth_a' pw
Be?1*1 and the Beast-
i Dances With Wolves
I Forrest Gump
JavaScript Array
bestMovies = new Array(7)
bestMovies[1] = "Casablanca"
bestMovies[2] = -chariots of Fire"
bestMovies[3] = "African Queen"
bestMovies[4] = "A Room With a view"
bestMoviesp] = "Beau1 and the Beast"
bestMovies[6] = "Dances' Ifr Wolves"
bestMovies[7] = "Forrest Gump"
РИСУНОК 32.2. Работа с набором табличных данных в
зависимости от контекста.
Создание таблиц поиска
Первый шаг, который потребуется предпринять при
работе с таблицами клиентской части JavaScript —
создать саму таблицу. Таблица клиентской части не
может быть внешним файлом, поэтому все данные
должны быть внедрены в HTML-файл. Но для того, чтобы
информация принесла реальную пользу, необходимо
структурировать ее таким образом, чтобы поиск и
восстановление данных проводились при первой же
необходимости.
Как упоминалось ранее, одной из опций для
структурирования клиентских данных является одномерный
массив. Например, если поместить в массив полный
список имен служащих, это будет выглядеть следующим
образом:
var employees = new Array(10)
employees[1] = "Richard"
employees[2] = "David"
employees [3] = "Rachel"
employees[4] = "Mark"
Технология обработки данных со стороны клиента
Глава 32
ЕЛ
employees[5] = "Mellon"
employees[6] = "Margo"
employees[7] = "Darius"
employees[8] = "Dan"
employees[9] = "Dave"
employees[10] = "Pepe"
Далее этот массив можно использовать и внутри его
осуществлять поиск отдельных элементов, базируясь на
информации, которая была вынесена из главы 11. В
данном случае одномерный массив не играет большой
роли, поскольку во многих таблицах поиска находится
большое количество столбцов для прослеживания
данных. В списке телефонов необходимо предусмотреть
имя служащего, название организации, отдел,
расширение телефонного номера, адрес электронной почты.
Более эффективный способ заключается в создании
пользовательского объекта employee, а после —
группировки данных о служащих в одномерный массив. Это
позволит не только сохранить многочисленные
столбцы в объекте, но и работать с объектами employee как
собирательной группой.
Для определения объекта employee потребуется
создать метод конструктора, как показано ниже:
function employee (FirstName, LastName, Title,
Department, PhoneExt, EmailAddress) {
this. FirstName = FirstName;
this. LastName = LastName;
this.Title = Title;
this. Department = Department;
this. PhoneExt = PhoneExt;
this. EmailAddress = EmailAddress;
>
После создания конструктора можно приступить к
созданию объектов employee и помещению их в
контейнеры ь Й массив cmpLisl. Для каждого служащего будет
достаточно одной строки кода. Ниже показаны
примеры для пяти служащих из всех 105:
empList[l] = new employee("Richard", "Wagner",
"Chief Technology Officer", "RfiD", "400",
"rwa-ner@acadians.com");
empList[2] = new employee "~rady" "Anderson",
"Programmer", "RfiD", "198",
"—rad"Qacadians.com"),
empList[3] = new employee ("Thomas", "Sprat",
"Marketing Manager", "Marketing", "656",
"tsprat@acadians.com ");
empList[4] = new employee("William", "Cleyball",
"Marketing Manager", "Marketing", "651",
"wcairacadians.com ") ;
empList[5] = new employee("Fred", "Tortallini",
"Marketing Manager", "Marketing", "404",
"t.ort@acadians.com ");
Сейчас все данные о служащих охвачены в
структурном формате, что очень необходимо для JavaScript.
ПРИМЕЧАНИЕ
Не стоит огорчаться, задумываясь об объеме работы,
необходимой для перевода данных, хранящихся в
реляционных базах данных, в объекты JavaScript или
массивы. Существует много способов создания такой
информации, которые исключают набор текста на
клавиатуре. При частом изменении данных можно
создать сценарий CGI или запустить другие серверные
процессы, автоматически генерирующие код за счет
экспорта таблицы баз данных.
Создание поискового
пользовательского интерфейса
Способ работы пользователей приложения с таблицей
клиентской части зависит от определенного контекста
приложения. В этом примере производится вызов
пользовательского интерфейса, в котором будет
выполняться поиск служащих на основе введенного текста.
Поскольку таблица состоит из нескольких полей, можно
предоставить пользователям большую свободу,
обеспечив поиск в четырех основных полях таблицы: FirstName,
LastName, Title, Department.
Предположим, что необходимо, чтобы результаты
поиска были помещены в HTML-документ. Чтобы
вывести на экран одновременно определение поиска и
результат, воспользуйтесь мультифреймовым окном. С
учетом предоставленной ранее информации, определен
список файлов, относящихся к телефонному списку:
• empIoyeeInfo.html — это родительское мультифрей-
мовое окно, которое содержит базу данных со
служащими и другую глобальную информацию.
• searchfrirt.html — самый верхний фрейм,
обеспечивающий пользовательский интерфейс для ввода
поискового запроса.
• result.html — самый нижний фрейм, выводящий на
экран результаты поиска. По умолчанию он пуст.
На рис. 32.2 показан набор мультифреймовы . окон
приложения.
Единственной частью интерфейса, с которой
взаимодействует пользователь, является поисковое окно
(searchfrm.html). Ниже представлен исходный код HTML
для определения формы поиска в рамках окна:
<body>
<form method="POST" name="form">
<pre>Search By: </pre>
<preXinput
type=radio
name="searchBy"
value="FirstName">First Name <input
type=radio
checked
Избранные программны технологии
Часть V
name="searсЬВу"
value="I.astName">Last Name <input
type=radio
name=" searchBy"
value="Title">Title <input
type=radio
name="searchBy"
value="Department">Department</pre>
<pre>Text: <input
type=text
size=30
maxlength=3 0
name="searchByText"xinput
type=button
size=20
name="findr tt >n"
value=" Find
onClick="doSearc*" () "xinput
type=reset
name="Clear"
value=" Clear "
onClick="clearForm() "X/pre>
</form>
</body>
К- Мпмя! Епркууяв ОяШЬоде - МеГясшр*
eaa
Intranet Employee Database
p Ъ»**. Nam *" Ti*L« Г~ DtpartMnt
ifttrf
f>J»l
•'-- o^tema..
■^~ д»
РИСУНОК 32.3. Пользовательский интерфейс поиска в базе
данных.
Обработка поисковых запросов
Главной возможностью приложения, основанного на
клиентских таблицах, является поиск данных.
Например, в списке телефонов персонала необходимо
определить поле, по которому будет выполняться поиск, а
затем передать эту информацию вместе с поисковым
запросом в метод, реализующий собственно поиск.
В данном примере обработка поиска проходит в двух
местах. Метод doSearch() в фрейме searchForm
подготавливает поиск, а затем передает информацию в метод
findEmployee() родительского окна.
Чтобы проделать эту операцию, необходимо
установить метод doSearch() в качестве обработчика событий для
кнопки Find. В этой функции выполняется проверка,
какие переключатели отмечены и на основе этой
информации производится установка значения переменной
searchField. После проверки что в поле searchBjText
введено какое-то значение, вызывается метод findEmployeeO
родительского окна с передачей в него в качестве
параметров переменной searchField и значения поля searchByText:
function doSearch() {
var searchField = ""
if (document.form.searchBy[0] .checked) {
searchField = "FirstName" }
else {
if (document.form.searchBy[l] .checked) {
searchField = "LastName" }
else { if
(document, form. searchBy [2] .checked) (
searchField = "Title" }
else { if
(document. form. searchBy 13]. checked)
{ searchField = "Department" )
)
if (document.form.searchByText.value =
null || document, form. searchByText value ==
"") {
alert ("Please enter your search criteria before
"continuing. ") }
else {
parent.findEmployee(searchField,
document. form. searchByText. value )
I
В родительском окне (empIoyeeInfo.htm]) метод
findEmployeeO получает эти два параметра и
применяет их при оценке массива объектов employee. Цикл for
обеспечивает просмотр массива объектов employee,
сравнивая значения поискового запроса (параметр
searchWord) с определенным свойством (параметр
searchField); при этом используется метод объекта
строки indexOf().
Перед тем как перейти к основному коду,
рассмотрим еще один пример. Если проводится поиск значения
Richard в свойстве FirstName всех объектов, код будет
выглядеть следующим образом:
for (var i=l; i<empList. length; i++) (
if (empList[i] . FirstName. indexOf ( 'Richard')
1= -1) {
empList [I] . show() }
Цикл for оценивает каждый объект и возвращает
значение больше 0 при условии, если текст находится
внутри значения свойства FirstName объекта employee.
Если найдено необходимое соответствие, вызывается
метод show () объекта employee. Этот метод будет
подробно рассматриваться в одном из следующих разделов
этой главы.
А теперь, следуя той же логике, возьмемся вновь за
список телефонных номеров. Примите во внимание:
параметр searchField предназначен для представления
имени свойства объекта, а не для строкового значения,
поэтому придется воспользоваться встроенным методом
eval(). Метод eval() интерпретирует строковое значение
и оценивает его как выражение JavaScript. Если
преобразовать код JavaScript в отдельную строку, ее можно
оценить с помощью метода eval():
function findEmployee(searchField, searchWord) {
var str = "" ;
// Здесь следует код форматирования
for (var i=l; i<empbist. length; i++) (
str = "if 'empList[" + i + "] ," +
SearchField + " . indexOf (' " +
SearchWord + "') ! = -1) {
empList[" + i + "] .show() )";
eval(str);
)
// Здесь следует код форматирования
)
Отображение результатов поиска
Последний этап поискового процесса связан с
представлением результатов поиска пользователю. Для вывода
информации на экран используется нижний фрейм
(resullForm). Для этого можно усовершенствовать метод
findEmployee, рассмотренный в предыдущем разделе.
Для того чтобы HTML генерировался "на лету",
необходимо воспользоваться объектом Document из result
Form, который послужит "холстом" для записи.
Сначала подготовьте холст документа с использованием
метода I)ocumentopen(). Затем, для отображения
результатов в табличном формате, можно создать таблицу HTML,
через дескриптор <table> и установить заголовок
таблицы.
window.resultForm.document.open();
window, resul tForm. document, write (
"<h2>Matches:</h2>");
window.resultForm.document.write(
■'<table border=l>") ;
windcw. resultForm. document .write ("<trXtd
"-»width=10%Xstrong>First Name</strongX/td>") ;
window.resultForm.document.write("<td
>■» width=15%Xstrong>Last Name</strongX/td>") ;
window.resultForm.document.write("<td
>-» width=20%Xstrong>Title</strongX/td>") ;
window.resultForm.document.write("<td
>■» width=l 5%Xstrong>Department</strongX/td>,,) ;
window.resultForm.document.write("<td
"■»width=5%Xstrong>Ext.</strongx/td>") ;
window .resul tForm. document. wri te (" <td
"-»width=15%xstrong>Email</strongx/tdX/tr>") ;
Сейчас, когда все подготовительные действия
завершены, можно приступить к собственно обработке
поиска. Каждый совпадающий служащий вызывается для
Технология обработки данных со стороны клиента WE1
Глава 32 £Щ
выполнения метода show(). Этот метод применяется для
вывода на экран информации как одной записи в
таблице. Поэтому потребуется добавить метод show() в
конструктор объекта employee.
function employee(FirstName, LastName, Title,
Department, FhoneExt, EmailAddress) {
this . Fir stName = FirstName;
this.LastName = LastName;
this.Title = Title;
this.Department = Department;
this.PhoneExt = PhoneExt;
this. EmailAddress = EmailAddress;
this.show = emp_show;
}
После вызова метода show() объекта employee
запускается метод emp_show(), который определяет позиции
для размещения форматируемого кода и вывода на
экран текущей информации о служащих. Для помещения
значений каждого из свойств объекта в отдельные
ячейки таблицы применяется метод write():
function emp_show(} (
window .resul tForm. document. wri te ("<trxtd
>-»width=10%>" + this. FirstName + "</td>") ;
window. resultForm.document.write ("<td
**width=15%>" + this.LastName + "</td>");
window. resultForm.document .write ("<td width=20%>"
+ this.Title + "</td>")
window. resultForm. document. write ("<td
v,width=15%>" + this. Department + "</td>");
window. resultForm.document.wri te ("<td
>-width=5%>" + this PhoneExt + "</td>") ;
window.resultForm.document.write ("<td width=15%>"
+ "<a href=,mailto:" + this.EmailAddress
+ " ■>■■ + this.EmailAddress + "</tdX/tr>") ;
i
Обратите внимание, что для адресов электронной
почты служащих определяется ссылка. Пользователю
достаточно лишь щелкнуть на адресе служащего и
сообщение будет отправлено.
Последний код форматирования находится в
методе fill(lLniployee(). После обработки всех записей
служащих, метод write() выводит дескриптор завершения
таблицы — </table>. Метод close() закрывает холст. Ниже
показан полный исходный код метода findEmployee():
function findEmployee(searchField, searchWord) (
var str = "" ;
window.resultForm.document.open();
window.resultForm.document.write(
"<h2>Matches:</h2>");
window.resultForm.document.write(
"<table border=l>");
window.resultForm.document.write(
"<tr><td width=10%Xstrong>First Name
</strong></td>");
window.resultForm.document.write(
"<td width=15%Xstrong>Last Name
</strongX/td>" ) ;
window.resultForm.documen t.write(
"<td width=20%Xstrong>Title</strong>
>»</td>") ;
ПО—
Избранные программные технологии
Часть V
window.resultForm.document.write(
"<td width=15%Xstrong>Department
</strongx/td>") ;
window. resultForm.document, write (
"Ktr1 width=5%Xstrong>Ext.</strong>
-</td>") ;
window.resultForm.document.write(
"<td width=15%Xstrong>Email</strong>
>-»</td></ tr>") ;
for (var i=l; i<=empList.length-1; i++) {
str = "if (empList." + i + "]." +
searchFiel + "."ndea Of(• " +
searchWord + ■■■) != -1) { empList." +
i + "].showd )";
eval (str) ;
}
window. resultForm, document. write ( "</table>'J ;
window. resultForm. document, close () ;
Запуск приложения
Теперь можно протестировать приложение, загрузив в
браузер файл empIoyeeInfo.html. Предположим, что
требуется найти Грейди Андерсона (Grady Anderson).
Введите Anderson в текстовое поле, выберите переключатель
Last Name и щелкните на кнопке Find. Результат ПОКа-
ЛИСТИНГ 32.1 empIoyeeInfo.html
<html>
<head>
<title>Intranet Employee Database</title>
<script language="JavaScript">
// Сетевая база данных по служащим
зан на рис. 32.4. Очистка поисковой формы и фрейма
результатов осуществляется по щелчку на кнопке Clear.
В листинге 32.1 представлен полный исходный код
для родительского окна employeelnfo.html, а в листинге
32.2 — исходный код JavaScript для окна searchfrm.html.
\;Щ- Д*1 :£**-\'Si'b. Ьои«е ipfiajiif ti&P ° ' "
Intranet Employee Database
Search By:
r First Nan* * lAst
r#Kt: [An«J*r*on
Matches:
First Name Last Name
O-idv Anderson
[Cry Anderson
'Frank Anderson.
.Merv :Andcrsou
Jcnathon 'Anderson
i П '*■■*»* *-*»*
ilsna r Title
,
Title
■Programmer
^Salesperson
Salesperson
Programmer
Programmer
"'Ш'-"1-,-,?-'^?
f Ds pact Hunt
ffV "»■-
iJ)epiutiiH>nt
■jR&D
iSales
bales
$&6
■R№
j.~- .*-- -.-Ч-'
-1
Ext.
1!)S
'Ё0О
500
100
100
.T:*?
ьда.да i
~i
FinjJ
jfudv i^CBilions com!
into Earnd 1a4_.com _
njfoi icacJ.jftij.cGui
inly EHtodinwccfiiii
РИСУНОК 32.4. Результаты поиска, отображенные в виде
таблицы.
/ / Глобальные
var 1=1;
var n = 1 •
переменные
// Создание объекта Array
var empList = new Array () ;
// Метод show () — метод объекта employee
function emp_show () {
window.resultForm.document.write ("<trxtd width=10%>"
+ this .FirstName + "</td>")
window.resultForm.document.write("<td
window.resultForm.document.write(M<td
window.resultForm.document.write("<td
window. resultForm. document. write ("<td
window.resultForm.document.write("<td width=15%>" +
+ this.EmailAddress + "■>■■ + this. EmailAddress
width=15%>" + this.LastName + "</td>") ;
width=20%>" + this-Title + "</td>");
width=15%>" + this. Department + "</td>")-
width=5%>" + this.PhoneExt + ,,</td>") ;
"<a href='mailto:"
"</tdx/tr>") ;
// Конструктор объекта employee
function employee'FirstName, LastName,
this. FirstName = FirstName;
this. LastName = LastName;
this.Title = Title;
this.Г spartment = Department;
this . PhoneExt = PhoneExt
this.EmailAddress = EmailAddress;
this.show = emp_show;
Title, Department, PhoneExt, EmailAddress) (
)
// Поиск служащего на основе поля и введенного слова
Технология обработки данных со стороны клиента
Глава 32
function findEmployee(searchField, searchWord)
var str = "" ;
window. resultForm. document. open () ;
window. resultForm. document, write ("<h2>Matches:</h2>");
window. resultForm. document, write ("<tableborder=l>") ;
window. resultForm. document, write ("<trxtd width=10%Xstrong>First Name</strongX/td>")
window. resultForm. document, write ("<td * idth=15%Xstrong>Last Name</strongX/td>") ;
window. resultForm. document, write ("<tdwidth=20%Xstrong>Title</strongX/td>") ;
window. resultForm. document. write ("<tdwidth=15%Xstrong>Department</strongX/td>") ;
window . resultForm. document . write ( "<tdwidth=5%Xstrong>Ext . </strongX/td>" ) ;
window. resultForm. document, write ("<tdwidth=15%Xstrong>Email</strongX/tdX/tr>") ;
for (var i=l; i<=empList.length-l; i++) (
str = "if (empList[" + i + "]." + searchField + ". indexOf (■"
+ searchWord + " ') 1= -1) ! empList[" т i + "].show() } ■■ ;
eval(str) ;
)
window. resultForm. document. write ( "</table>" ) ;
window . resultForm. document. close ( ) ;
I
, , Создание объектов employee при запуске
empLis.t[l] = new employee (
"Richaird" , "Wagner", "Chief Technology Officer", "RfiD", "400", "rwagner@acadians.com");
empLis'.t [2] = new employee!
"Grady", "Anderson", "Programmer", "RfiD", "198", "grady@acadians.com");
empList[3] = ne1 employee (
"Thomas", "Sprat", "Marketing Manager", "Marketing", "656", "tspratt@acadians.com ")
empLis»t[4] = new employee (
"Will:.am", "Cleyball", "Marketing Manager", "Marketing", "651", "wcal@acadians.com ");
empList[5] = new employee (
"Fred", "Tortallini" , "Marketing Manager", "Marketing", "404", "tort@acadians.com ") ;
empLi.4t[6] = new employee (
"Smack", "Hopkins", "Marketing Manager", "Marketing", "606", "smack@acadians.com ") ;
empLi«t[7] = new employee (
"Luey", "Gentry", "Marketing Manager", "Marketing", "450", "luey@acadians.com ") ;
empLi:5t[8] = new employee (
"Erwin", "Waltham" , "Marketing Manager", "Marketing", "545", "ew@acadians.com");
empList[9] = пет? employee (
"Dallas", "Spanner", "Marketing Manager", "Marketing", "656", "dallas@acadians.com");
empList[10] = new employee!
"Spill", "Hopkins", "Marketing Manager", "Marketing", "120", "spill@acadians.com ") ;
empList[ll] = new employee(
"Huey" , "Wagner", "Marketing Asst" "Marketing", "854", "huey@acadians.com ") ;
empList[12] = new employee!
"Tom", "Longly" , "Marketing Asst", "Marketing", "512", "info@acadians.com ") ;
empList [ 13 ] = new employee!
"Huck", "Starback", "Marketing Asst" "Marketing" "212", "info@acadians.com ");
empList[14] = new employee!
"Crazy", "Lags", "Marketing Asst" "Marketing", "122", "info@acadians.com ") ;
empList[15] = new employee!
"Part", "Simpson", "Salesperson", "Sales", "500", "info@acadians.com");
empList[16] = new employee!
"Bill", "O'Reilly", "Salesperson", "Sales", "500", "info@acadians.com");
empList[17] = new employee!
"Sally", "Smatterhorn" , "Salesperson", "Sales", "500", "info@acadians.com");
empList[18] = new employee!
"Kim", "Pakki", "Salesperson", "Sales", "500", "info@acadians.com");
empList[19] = new employee!
"Jacob", "Ladder", "Salesperson", "Sales", "500", "info@acadians.com");
empList[20] = new employee!
"Jared", "Gaspe", "Salesperson", "Sales", "500", "info@acadians.com");
empList[21] = пет-7 employee!
"Justus", "Argon", "Salesperson", "Sales", "500", "info@acadians.com");
empList[22] = new employee!
"Jordan", "Basker", "Salesperson", "Sales", "50u", "info@acadians.com");
empList[23] = new employee!
"Lisa", "Smith", "Salesperson", "Sales", "500", "info@acadians.com");
Избранные программные техно.югии
Часть V
empList[92] = new employee (
"Oil", "Larenzo", "Secretary", "Company", "800" "info@acadians.com");
empList[93] = new employee (
"Susie", "Que", "Secretary", "Company", "800" "mfo@acadians.com");
empList[94] = new employee (
"Trista" , "Wagner", "Secretary", "Company", "800", "info@acadians.com");
empList[95] = new employee {
"Kimberly" , "Smith", "Secretary", "Company", "800", "info@acadians.com");
empList[96] = ne- employee (
"Rachel", "McDonald", "Secretary", "Company", "800", "info@acadians.com");
empList[97] = new employee (
"Reena" , "Smiles", "Secretary", "Company", "800" "info@acadians.com");
empList[98] = ne' employee (
"Treena", "Miles", "Secretary", "Company", "800" "info@acadians.com");
empList[99] = new employee(
"Corrina" , "Triles", "Secretary", "Company" "800" , "info@acadians.com");
empList[100] = new employee (
"Rosemarie", "Barlington" , "Secretary", "Company", "800", "info@acadians.com");
empList[101] = n w employee (
"II", "Plage", "HR Manager", "Recruiting", "900", "info@acadians.com");
empList[102] = new employee (
"Url", "Page", "HR Manager", "Recruiting", "900" "info@acadians.com");
empList[103] = new employee (
"Youri", "Basto", "HR Manager", "Recruiting", "900", "info@acadians.com");
empList[104] = n w employee (
"Eri" , "Opeo", "HR Manager", "Recruiting", "900", "info@acadians.com");
empList[L05] = new employee (
"Tikki", "Rodrequez" , "HR Manager", "Recruiting", "900", "info@acadians.com");
<:/script>
<:/f ;ad>
<frameset rows="35%, 65%">
<frame src="searchfrm.html" name="searchForm" marginwidth="10"
marginheight="10">
<frame name="resultForm" marginwidth="10" marginheight="10">
<noframes>
Sorry, your browser does not support f rallies.
</noframes>
<:/frairieset>
<J:>ody>
</body>
</html>
Листинг 32.2 searchfrm.html
<html>
<head>
<:title>Search Form</title>
<:script language=" JavaScript">
// Сетевая баэа данных по служащим
function doSearch ( ) (
var searchField = " "
if (document, form. searchBy [ 0 ) . checked) [
searchField = "FirstName" ; !
else [
if (document.form. searchBy [1] .checked) (
searchField = "LastName" ; !
else f if (document.form. searchBy [2] .checked) f
searchField = "Title" ; )
Ise [ if (document.form. searchBy [3] .checked) !
searchField = "Department" ; 1
)
Технология обработки данных со стороны uiueuma
Глава 32
function findEmployee (searchField, searchWord) (
var str = " ";
window . resultForm. document. open () ;
window. resultForm. doaument. write ("<h2>Matches:</h2>");
window. resultForm. document, write ("<tableborder=l>") ;
window. resultForm. document, write ("<trXtdT7idth=10%X3.tronCTs-Fir3.t Name</strongX/td>")
window. resultForm. document.write ("<tdwidth=15%Xstrong>Last Name</strongX/td>") ;
window. resultForm. document, write ("<tdwidth=20%Xstrong>Title</strongX/td>") ;
window. resultForm. document.write ("<tdwidth=15%Xstrong>Department</strongX/td>") ;
T7indoTr. resultForm. document, write ("<tdwidth=5%Xstrong>Ext.</strongX/td>") ;
window. resultForm. document, write ("<tdwidth=15%Xstrong>Email</strongX/tdX/tr>") ,-
for (var i=l; i<=empList.length-l; i++) (
str = "if (empListf + i + "]." + searchField + ". indexOf (■"
+ searchWord +"') != 1) { empListf + i + "].show() }";
eval(str);
}
window. resultForm. document, write ("</table>"l'
window . resultForm. document. close ( ) ;
I
// Создание объектов employee при запуске
empList[1] = пет7 employee (
"Richard", "Wagner", "Chief Technology Officer", "RfiD", "400", "rwagner@acadians.com");
empList[2] = пет7 employee (
"Grady", "Anderson", "Programmer", "RSD". "198", "grady@acadians.com11);
empList[3] = пет7 employee (
"Thomas", "Sprat", "Marketing Manager", "Marketing", "656", "tspratt@acadians.com ")
empList[4] = пет7 employee (
"William", "Cleyball", "Marketing Manager", "Marketing", "651", "wcal@acadians.com " ),-
empLi.3t[5] = пет7 employee (
"Fred", "Tortallini" , "Marketing Manager", "Marketing", "404", "tort@acadians.com ") ;
empList[6] = пет 7 employee (
"Smack", "Hopkins", "Marketing Manager", "Marketing", "606", "smack@acadians.com ") ;
empLi.st[7] = пет7 employee (
"Luey", "Gentry", "Marketing Manager", "Marketing", "450", "luey@acadians.com ");
empLi st [ 8 ] = пет 7 employee (
"Erwin", "Waltham" , "Marketing Manager", "Marketing", "545", "ew@acadians.com");
empList[9] = пет7 employee (
"Dallas", "Spanner", "Marketing Manager", "Marketing", "656", "dallas@acadians.com");
empList[10] = пет7 employee (
"Spill", "Hopkins", "Marketing Manager", "Marketing", "120", "spill@acadians.com ") ,-
empList[ll] = пет7 employee!
"Huey", "Wagner", "Marketing Asst" "Marketing", "854", "huey@acadians.com ") ;
empList[12] = пет7 employee (
"Tom", "Longly", "Marketing Asst", "Marketing", "512", "info@acadians.com ") ;
empList[13] = пет7 employee (
"Huck" , "Starback", "Markecing Asst" , "Marketing", "212", "info@acadians.com ");
empList[14] пет7 employee (
"Crazy", "Lags", "Marketing Asst" , "Marketing", "122", "info@acadians.com ") ;
empList[15] = пет i employee (
"Bart", "Simpson", "Salesperson", "Sales", "500", "info@acadians.com");
empList[16] = пет 7 employee!
"Bill", "O'Reilly", "Salesperson", "Sales", "5uu", "info@acadians.com");
empList[17] = пет7 employee!
"Sally", "Smatterhorn" , "Salesperson", "Sales", "500", "info@acadians.com");
empList[18] = пет 7 employee!
"Kim1', "Pakki", "Salesperson", "Sales", "500", "info@acadians.com");
empList[19] = пет7 employee!
"Jacob", "Ladder", "Salesperson", "Smiles", "500", "info@acadians.com");
empList[20] = пет 7 employee!
"Jared", "Gaspe" , "Salesperson", "Sales", "500", "info@acadians.com");
empList[21] = пет7 employee!
"Justus", "Jirgon", "Salesperson", "Sales", "500", "info@acadians.com");
empList[22] = пет7 employee!
"Jordan", "Basker", "Salesperson", "Sales", "501", "info@acadians.com");
empLi.st[23] = new employee!
"Lisa", "Smith", "Salesperson", "Sales", "500", "info@acadians.com");
Избранные программные технологии
ЦЧасть V
empList[24] = new employee!
"Cry", "Anderson", "Salesperson", "Sales', '500' , "info@acadians.com");
empList[25] = new employee(
"Ollie", "Fyder", "Salesperson", "Sales" "SOO", "info@acadians.com");
empList[26] = new employee(
"Polly", "Potts", "Salesperson", "Sales", "500", "info@acadians.com");
empList[27] = new employee(
"Xerxes", "Smith", "Salesperson", "Sales", ''500", "info@acadians.com");
empList[28] = naj employee(
"Sally Rae", "Smith", "Salesperson", "Sales", "500", "info@acadians.com");
empLi s t [ 2 9 ] = пет j employee (
"Golden", "Driscoll", "Salesperson", "Sales", "500", "info@acadians.com");
empList[30] = пет J employee (
"Frank", "Anderson", "Salesperson", "Sales", "500", "info@acadians.com");
empList[31] = new employee(
"Herv", "Anderson", "Programmer", "RfiD", "100", "info@acadians.com");
empList[32] = new employee!
"Mann", "Waver", "Programmer", "RfiD", "100", "info@acadians.com");
empList[33] = new employee(
"Jason", "Driscoll", "Programmer", "FSD", "100", "info@acadians.com");
empList[34] = new employee(
"Ardent", "Matthews", "Programmer", "FSD", "100", "info@acadians.com");
empList[35] = new employee(
"Ortho", "Dontal", "Prngrammer1, "RSD", "100", "info@acadians.com");
empList[36] = new employee!
"Troy", "Smith", "Programmer", "PSD", "100", "info@acadians.com");
empList[37] = new employee!
"Fred-", "Barker", "Programmer", "RSD", "100", "info@acadians.com");
empList[3o] = new employee!
"Richini", "Barker", "Programmer", "FSD", "100", "info@acadians.com");
empList[39] = new employee!
"Ricardo", "Bollinger", "Programmer", "FSD", "100", "info@acadians.com");
empList[40] = new employee!
"Fon", "Bollinger" , "Programmer", "FSD", "100", "info@acadians.com");
empList[41] = new employee!
"Ronald", "Barker", "Programmer", "FSD", "100", "info@acadians.com");
empList[42] = new employee!
"Bra-jser" , "Tyler", "Programmer", "FSD", "100", "info@acadians.com");
empList[43] = new employee!
"Serf", "Tyler", "Programmer", "RfiD", "100", "info@acadians.com");
empList[44] = new employee!
"Bill", "Tyler", "Programmer", "FSD", "100", "info@acadians.com");
empList[45] = new employee!
"William", "Smith", "Programmer", "FSD", "100", "info@acadians.com");
empList[46] = new employee!
"Billy", "Barker", "Programmer", "FSD", "100", "info@acadians.com");
empList[47] = new employee!
"Kurt", "Barked", "Programmer", "FSD", "100", "info@acadians.com");
empList[4o] = new employee!
"John", "Barker", "Programmer", "RfiD", "100", "info@acadians.com");
empList[49] = new employee!
"Jonathon", "Anderson", "Programmer", "RfiD", "100", "info@acadians.com");
empList[50] = new employee!
"Frederick", "Barker", "Programmer", "RSD", "100", "info@acadians.com");
empList[51] = new employee!
"Smitty", "Tyler", "Programmer", "RSD", "100", "info@acadians.com");
empList[52] = new employee!
"Sargent", "Anderson", "Programmer", "FSD", "100", "info@acadians.com");
empList[53] = new employee!
"Pepe", "Potts", "Programmer", "RSD", "100", "info@acadians.com");
empList[54] = new employee!
"Leo", "Godfrey", "Programmer", "RSD" , "100", "info@acadians.com");
empList[55] = new employee!
"Geo", "Stewart", "Programmer", "RSD" , "100", "info@acadians.com");
empList[56] = new employee!
"Meo", "Anderson", "Programmer", "R£T", "100", "info@acadians.com");
empList[57] = new employee!
"Oeo", "Orefo", "Programmer", "FSD", "100", "info@acadians.com");
Технология обработки данных со стороны клиента
Глава 32
empLi:5t[58] = ne employee (
"Jack", "Wagner", "Chief Entertainment Officer", "Exec", "300", "jwagner@acadians.com");
empList[59] = педт employee (
"Brady", "Smith", "Programmer", "RSD", "100", "info@acadians.com");
empList[60] = педт employee (
"Tristin", "Ryder", "Programmer", "RSD", "100", "info@acadians.com");
empList[61] = n -n employee!
"James", "lyler" , "Programmer", "RSIj" , "100", "info@acadians.com");
empList[62] = педт employee!
"Charles", "Potts", "Programmer", "RSD", "100", "info@acadians.com");
empLiat[63] = ne т employee!
"Bill", "Potts", "Senior Manager", "Management", "200", "info6acadians.com");
empList[64] = педт employee!
"Bart", "Anderson", "Senior Manager", "Management", "200", "info@acadians.com");
empList[65] = педт employee!
"Ian" "Pitts", "Senior Manager", "Management", "200", "info@acadians.com");
empList[66] = П' тт employee!
"Woody", "Smith", "Senior Manager", "Management", "200", "info@acadians.com");
empList[67] = педт employee!
"Mark", "Tyler", "Senior Manager", "Management", "200", "info@acadians.com")
empList[68] = new employee (
"Andrew", "Driscoll", "Senior Manager", "Management", "200", "info@acadians.com");
empList[69] = ne- employe )
"Andy", "Potts", "Senior Manager", "Management", "200", "info@acadians.com")
empList[70] = педт employee (
"Dandy", "Drisoill" , "S< nor I- inager" , "Management", "200", "info@acadians.com");
empList[71] = печ employee (
"Candy", "Potts", "Senior Manager", "Management", "200", "info@acadians.com");
empList[72] = ne employe-' (
"Spander", "Smith", "Senior Manager", "Management", "200", "info@acadians.com");
empList[73] = педт employee!
'"Landry", "Ports", "S nior Manager", "Management", "200", "info@acadians.com");
empLi:>t[74] = педт employee (
"Permy", "Smith", "Senior Manager", "Management", "200", "info@acadians.com");
empList[75] = n-n employee!
"Jostin", "Drisooll", "Senior Manager", "Management", "200", "info@acadians.com");
empList[76] = педт employee!
" Justiin", "Ryder", "Senior Manager", "Management", "200", "info@acadians.com");
empLi:st[77] = new employee!
"Braxel", "Anderson", "Senior Manager", "Management", "200", "info@acadians.com");
empList[78] = new employee!
"Opene", "Smith", "Senior Manager", "Management", "200", "info@acadians.com");
empList[79] = педт employee!
"Juan", "Barker", "Senior Manager", "Management", "200", "info@acadians.com");
empLi:;t[80] = педт employee!
"Julios", "Drisoill", "Senior Manager", "Management", "200", "info@acadians.com");
empList[81] = педт employee!
"Andre", "Barker", "Senior Manager", "Management", "200", "info@acadians.com");
empList[82] = педт employee!
"B maid", "Smith", "Senior Manager", "Management", "200", "info@acadians.com");
empList[83] = педт employee!
"Susan", "Ryder", "Senior Manager", "Management", "200", "info@acadians.com");
empList[84] = n ■ it employee!
"Susanne", "Anderson", "Senior Manager", "Management", "200", "info@acadians.com");
■empLi;;t[85] = педт employee!
"Chelsey", "Barker", "Senior Manager", "Management", "200", "info@acadians.com");
■empLi!;t[86] = педт employee!
"Cosmo", "Krammer", "Senior Manager", "Management", "200", "info6acadians.com");
empLiist[87] = педт employee!
"Kirby", "Tipple", "Senior IZanager" , "Management", "200", "info@acadians.com");
empList[88] = педт employee!
"George", "Allen", "Senior Manager", "Management", "200", "info@acadians.com");
empLi:;t[89] = n \т employee!
"Boy" "Goeria", "Senior Manager", "Management", "200", "info@acadians.com");
empLi;;t[90] = педт employee!
"Teddy", "Washington", ";i no Manager", "Management", "200", "info6acadians.com");
empList[91] = new employee!
"Tut", "Kingman", "Senior Manager", "Management", "200", "info@acadians.com");
14 M5X
ffiSI-
Избранные программные технологии
Часть V
empList[92] = new employee(
■"Oil", "Larenzo", "Secretary", "Company", "800", "info@acadians.com");
empList[93] = new employee!
"Susie", "Que", "Secretary", "Company", "800", "info@acadians.com");
empList[94] = new employee!
"Trista", "Wagner", "Secretary", "Company", "800", "info@acadians.com")
empList[95] = new employee!
"Kimberly", "Smith", "Secretary"
empList[96] = new employee!
"Rachel", "McDonald", "Secretary"
Company", "800", "info@acadians.com")
"Company", "800", "info@acadians.com");
■rrpany", "800", "info@acadians.com");
■mpariy", "800", "info@acadians.com");
Company", "800", "info@acadians.com");
empList[97] = new employee!
"Reena", "Smrles", "Secretary",
empList[98] = new employee!
"Treena", "Miles", "Secretary",
empList[99] = new employee!
"Corrina", "Triles", "Secretary",
empList[100] = new employee!
"Rosemarie", "Barlington", "Secretary", "Company", "800", "info@acadians.com");
empList[101] = new employee!
"II", "Plage", "HR Manager", "Recruiting", "^OO", "info@acadians.com")
empList[102] = new employee!
"Url", "Page", "HR Manager", "Recruiting", "^00", "info@acadians.com");
empList[103] = new employee!
"Youri", "Basto", "HR Manager", "Recruiting", "^OO", "info@acadians.com");
empList[104] = new employee!
"Pri", "Opeo", "HR Manager", "Recruiting", "^OO", "info@acadians.com")
empList[105] = new employee!
"Tikki", "Rodrequez", "HR Manager", "Recruiting", "Ir'OO", "info@acadians.com");
</scrrpt>
</head>
<frameset rows="35%,65%">
<frame src="searchfrm.html" name="searchForm" marginwidth="10"
marginheight="10">
<frame name="resultForm" marginwidth="10" marginheight="10">
<noframes>
Sorry, y'i'ur bri'Wser does not support frames.
</noframes>
</ f rameset::-
<body>
< /body-.-
</html>
Листинг 32.2 searchfrm.html
<html>
--head>
<trtle>Search Form</title>
<scrrpt language="JavaScript">
// Сетевая баэа даннык no служащим
function doSearch!)
var searchFreld = "" ;
rf (document, form. searchBy[0] .checked)
searchFreld = "FirstName"; I
else
rf (document.form.searchBy[l] .checked)
searchFreld = "LastName"; I
else ( rf (document, form. searchBy [2] .checked) (
searchFreld = "Title"; ]
_lse ( rf (document.form.searchBy[3] .checked)
searchFreld = "Department"; 1
Технология обработки данных со стороны клиента
Глава 32
if (document.form.searchByText.value = null || document, form.searchByText.value =
alert ("Please enter your search criteria before continuing."); }
else {
parent. findEmployee (searchField, document, form. searchByText. value) ;
■) {
)
function clearForm() {
parent. resultForm.document. open();
parent. resultFormdocument. close ( ) ;
}
</scriptXhl><font color="#000000"><em>lntranet Employee Database</emX/ ont>
</hl>
</head>
<hr>
<body bgcolor="#FFFFFF">
<form method="POST" name="form">
<pre>Search By: </pre>
< prexinput
type=radio
name="searchBy"
value="FirstName">First Name <input
type=radio
checked
name="searchBy"
value="LastName">Last Name <input
type=radio
name=" searchBy
value="Title">Title <input
type=radio
name="searchBy"
value="Department">Department</pre>
<pre>Text: <input
type=text
size=30
maxlength=. 0
name= searchByText" xinput
type=button
size=20
name="f indButton"
value=" Find "'
onClick="doSearch() "Xinput
type=reset
name="Clear"
value=" Clear "
onClick="clearForm ()"X/pre>
</form>
</body>
</html>
Резюме
Клиентские базы данных не могут служить в качестве
замены SQL-серверов, и они не являются средством
ввода данных. Однако, несмотря на ограниченность
диапазона их применения, внедрение баз данных в JavaScript
приведет к расширению их возможностей и добавлению
новых способов уменьшения нагрузки на сервер.
Клиент n ожет отвечать за поиск во всей базе данных и
визуализацию результатов.
В главе рассматривались вопросы использования
клиентских данных в качестве баз данных. Массивы
JavaScript могут служить контейнерами баз данных,
поиск которых реализуется при помощи встроенных
конструкций языка JavaScript. Основа главы —
практический пример, в котором применение таблицы
клиентской части стало идеальным вариантом.
Обработка ошибок
В ЭТОЙ ГЛАВЕ
Типы ошибок
Интерпретация сообщений об ошибках
Исправление кода
Тестирование кода
Программирование с использованием
устойчивых технологий
Надежная работа кода
Обработка ошибок, вообще говоря, представляет
собой комбинацию профилактического контроля
(идентификация и исправление ошибок перед выполнением),
пошагового контроля (идентификация ошибок в
процессе выполнения) и корректирующего контроля
(исправление ошибок, найденных во время выполнения). JavaScript
(или более точно — интерпретатор JavaScript,
встроенный в поддерживающие JavaScript браузеры),
обеспечивает автоматизированный пошаговый контроль ошибок
через диалоговые окна, отображающие информацию об
ошибках. Освоение нового инструмента создания и
отладки JavaScript-сценария помогает разработчику
воспользоваться преимуществом более автоматизированного
профилактического и в меньшей степени —
корректирующего контроля. В главе рассматриваются методы
идентификации, исправления и тестирования JavaScript-
кода, а также методы записи устойчивого и удобного в
сопровождении кода.
Типы ошибок
Ошибки JavaScript идентифицируются
JavaScript-совместимым браузером сразу же после загрузки
HTML-страницы. Эти ошибки можно разделить на три разных
типа:
Синтаксические ошибки
Ошибки времени выполнения
Логические ошибки
ПРЕДОСТЕРЕЖЕНИЕ
Интерпретатор JavaScript не идентифицирует
логические ошибки. Для идентификации потенциальных ошибок
в логике программы необходимо тестировать
функциональные возможности кода. Например, выполнение
JavaScript-кода обязательно приведет к логической
ошибке при попытке выполнить арифметическое
действие над строковой переменной (позже зто
описывается более подробно; см. рис. 33.1).
Синтаксические ошибки
Синтаксические ошибки, т.е. некорректная запись кода,
часто связаны с банальными опечатками (не та буква,
пропуск знака пунктуации, незакрытые скобки).
Следующий пример демонстрирует несколько часто
встречающихся синтаксических ошибок:
fuction errorProne() { // Слово "function"
// записано неверно
var i = о; // переменная инициализируется
// буквой "о" вместо числа "О"
for (i >= 0; [ =< 10; i++) {
// переменная "I" не определена (должна
// использоваться строчная буква '"i")
document. write ("The square of " + i \
" is " + (i*i) + "<br>")
// пропущена ";"
document. write ("The cube of " + i +
" is ' + (i*i*i) + "<hr>") ;
// требовались двойные кавычки
3
,'/ отсутствует закрывающая фигурная скобка,
завершающая функцию
ПРЕДОСТЕРЕЖЕНИЕ
Язык JavaScript чувствителен к регистру, поэтому
следует быть внимательным при преобразовании букв в
прописные. В частности, при использовании
встроенных объектов JavaScript (а также их свойств, методов
и событий) лучше убедится в точности синтаксиса с
помощью JavaScriptLanguageReferenceGuide(CnpaB04-
ник по языку JavaScript).
Синтаксические ошибки в JavaScript — самые
частые и самые простые в исправлении. JavaScript-интер-
претатор дает хороший результат по идентификации
источника этих ошибок в коде, и для их исправления не
требуется ничего кроме простого редактирования.
ПРИМЕЧАНИЕ
Поскольку JavaScript имеет интерпретируемый
характер и в настоящее время не предлагает средств
отладки синтаксиса, синтаксические ошибки идентифици-
-■ ют, запуская код на выполнение — т.е. загружая
HTML-страницу, содержащую JavaScript, в JavaScript-
браузер.
Ошибки времени выполнения
Ошибки времени выполнения возникают, если
синтаксически корректный оператор пытается выполнить
задачу, реализовать которую невозможно. К довольно-
таки обычным ошибкам времени выполнения относятся
недопустимые вызовы функций, несоответствие типов
данных, присваивание значения необъявленной
переменной и арифметически некорректные операции
(такие как деление на ноль).
Об ошибках времени выполнения браузер выдает
сообщение, аналогичное сообщениям о синтаксических
ошибках; однако, их исправление часто требует более
тщательного изучения кода. Следующий пример
показывает ошибку времени выполнения программы,
вызванную делением на ноль:
function mismatched () {
var i = 10;
for (i <=10; i >= 0; i—) [
// этот цикл вызовет деление на ноль
// и результаты будут непредсказуемыми
document.writ (i + " divided by twice its
square (" + (i*i*2) + ") = " + (i/(i*i*2))
+ "<br>");
i
)
Логические ошибки
Логические ошибки происходят, когда приложение или
функция не исполняют то, на что ее ориентировали
пользователи или разработчики. Другими словами,
приложение, которое имеет синтаксически корректный код
и не содержит ошибок времени выполнения, но все еще
выдает некорректные результаты, содержит логические
ошибки. Логические ошибки — самый трудный для
идентификации и исправления тип ошибок. Они
обычно требуют серьезного тестирования приложения,
анализа результатов и пересмотра всего проекта. Множество
логических ошибок возникает из-за плохого понимания
требований, некачественного проектирования и, как
результат — некорректного кода. Следующий пример
демонстрирует логическую ошибку, вызванную
вычислением несогласованных типов данных:
Обработка ошибок VVVI
Глава 33 ЦП
Гц не lion mismatched () {
var Constant = "10";
var i = 10;
for (i <= 10; i > 0; i—) {
document, write 'i + " + " + Constant + " =
" + (i + Constant) + "<br>") ;
)
}
Как видно из рис. 33.1, отображаемые результаты
явно неправильны, даже при том, что код выполнился
успешно. В этом случае JavaScript вычисляет результат
выражения (i + Constant) как строку и выполняет
конкатенацию двух операндов.
С \WINDOWSU)e8ktopttes13 html - Micrasoinntemot Explorer provide.. :П Q
\ ..'■«■ 3 2r -■&: Jj J "\
I ' Вда* .«W™ . • • f,Wr»vnvrJ' _j
лдягвм c]C\vv№0WS\DejHnp\ws0Jhlml "3 * ,. '•
Is this correct?
10 + 10-1010
9 + 10=910
8 + 10=310
7 + 10=710
6 + 10 = nlQ
5+10 = 510
4 + 10=410
3 + 10=310
2 + 10=210
1 + 10 = 110
аОаКь „,.,.,- „ ... ■ <■- Щ
РИСУНОК ЗЗЛ.Логическс i ошибка.
Интерпретация сообщений об ошибках
Как только браузер распознает ошибку (синтаксическую
или времени выполнения), он отображает большое
диалоговое окно, как показано на рис. 33.2. Информация,
содержащаяся в таких диалоговых окнах, помогает
идентифицировать вероятный источник и
расположение ошибки. Диалоговое окно содержит следующую
информацию:
URL или имя файла, в котором произошла ошибка.
Номер строки в файле, где произошла ошибка. Это
порядковый номер строки от начала HTML- (или JS-)
файла, а не только JavaScript-кода. Не очень-то
полагайтесь на достоверность такой информации,
поскольку источник ошибки может находиться и в
совершенно другом месте.
• Описание ошибки. Вот это, как раз, ценная
информация в плане идентификации типа требуемого
исправления.
Фактический код, содержащий ошибку. Эта
информация тоже не всегда будет надежной, т.к. источник
ошибки может находится и до этой строки.
Избранные программные технологии
Часть V
Указатель места в строке, где произошла ошибка. На
эту информацию также нельзя слишком полагаться;
попытайтесь исследовать близлежащий код.
\te Netscape- [Alert]
;JavaScrip Err».
mining } „Acrftmctioiibbdy.
SSQ
N fLpmrT.Iitm. line 16:
OKJ
РИСУНОК 33.2. JavaScript-сообщение, уведомляющее о
синтаксической ошибке.
В табл. 33.1 приводится описание большинства
типичных JavaScript-сообшений об ошибках и их
возможные причины.
Исправление кода
Даже при том, что сообщения об ошибках полезны для
идентификации многих ошибок программы, обычно
требуется проделать дополнительную поисковую
работу для исправления всех ошибок, особенно логических.
Этот раздел покажет, как упростить и
систематизировать поисковую работу подобного рода. В главе 34
будет обсуждаться использование отладчика JavaScript
компании Netscape.
Проверка кода HTML
Поскольку JavaScript обычно взаимодействует с HTML-
кодом, прежде всего необходимо удостовериться, что
файл не содержит ошибок HTML. Ниже приводится
список, который можно рассматривать в качестве
руководства по нахождению таких ошибок:
Проверьте открывающие и закрывающие
дескрипторы < script >.
• Проверьте атрибут language = "JavaScript" внутри
пары дескрипторов <script>.
Проверьте HTML-дескрипторы на предмет
пропусков или орфографических ошибок.
Проверьте угловые скобки (< >), открывающие и
закрывающие дескриптор.
Проверьте связанные пары дескрипторов (например,
<script>...</script>).
Проверьте корректность использования
дескрипторов HTML-комментариев (<! — ... — >),
скрывающих JavaScript-сценарий.
• Удостоверьтесь, что имена форм и фреймов,
вызываемых в JavaScript-коде, соответствуют именам,
определенным в HTML-файлах.
ПРЕДОСТЕРЕЖЕНИЕ
Если требуется размещать JavaScript-код в пределах
HTML-таблицы, не помещайтедескрипторы <script> во
внутренние ячейки таблицы (<td> ... </td>). Это —
известная ошибка JavaScript, которая обычно приводит
к зависанию браузера. Вместо этого разместите
дескрипторы <script> внутри необходимых определений
строк таблицы (<fr> ... </tr>) и создайте
определение HTML-ячеек (<td> ... </td>) с помощью
метода document, writel).
Использование комментариев для
идентификации проблем
Можно воспользоваться комментариями для
последовательного выделения различных строк (и функциональных
возможностей) кода, чтобы таким образом
идентифицировать и установить источник ошибок. Это
многошаговый процесс.
Таблица 33.1. Типичные JavaScript-сообщения об ошибках.
Сообщение об ошибке Возможные причины
item is not defined
item is not a function
item cannot be converted to a function
item has no properties
item is not a numeric literal
unterminated string literal
missing ) after argument list (и
аналогичные сообщения об ошибках)
Названная переменная не определена. Имя переменной содержит
орфографические ошибки. Названная функция не определена. Незавершенная
строка (рассматривается JavaScript как неопределенная переменная).
Функция не определена. Функция с орфографической ошибкой. Перед
определением функции возникли другие ошибки.
Переменная ошибочно упоминается как вызываемая функция. Имя функции (или
метода встроенного объекта) содержит орфографическую ошибку.
Некорректная ссылка на свойство объекта. Некорректная ссылка на массив.
Переменная не содержит числовых данных. Перед присваиванием переменной
значения присутствуют другие ошибки.
Отсутствие кавычек (для строки). Строка содержит более 250 символов. Строка
содержит символ новой строки.
Пропущена круглая скобка, фигурная скобка или точка с запятой.
В приведенном ниже списке указаны шаги, которые
потребуется предпринять:
Закомментируйте одну или большее количество
строк кода.
Сохраните код.
Перегрузите страницу в браузере.
• Запомните полученный эффект.
Измените код или закомментируйте большее
количество строк.
Повторяйте перечисленные шаги, пока не найдете
ошибку.
Использование метода alert() для
трассировки кода
Для идентификации некоторых ошибок времени
выполнения и большинства логических ошибок в коде нужно
уметь следовать за логикой кода и представлять, как он
обрабатывает данные. Многие средства отладки
позволяют выполнять код пошагово, по одной строке в
каждый момент времени, и в боковом окне (под названием
"окно отладки") просматривать результат выполнения
кода. Для моделирования такой среды отладки можно
воспользоваться JavaScript-методом alert(). Метод alert()
отображает диалоговое окно, которое можно легко
запрограммировать на показ различных полезных
сообщений и значений, помогающих последовательно
отслеживать выполнение кода. В главе 34 проводится
упражнение по отладке, использующее только методы
alert(). Рассмотрим некоторые способы применения
метода alert():
Используйте alcrt(" Starting Check") для
идентификации отправной точки отладки. По мере
выполнения отладки его можно перемещать далее по коду.
• Используйте alert() для отображения значений
переменных, массивов и возврашений функций. С
помощью простых тестовых сценариев можно быстро
определить, соответствуют ли отображенные значения
ожидаемым.
Используйте alert () для отображения результатов
выражений. Это особенно полезно для отслеживания
логических ошибок, поскольку причиной многих
логических ошибок является некорректное
использование выражений.
Тестирование кода
Традиционное тестирование кода подразумевает, что
приложение готовится к производству. Эта концепция
будет верна и в том случае, когда речь идет о
помещении в Internet Web-страниц, усовершенствованных с
Обработка ошибок VVH
Глава 33 Ц£]
помощью JavaScript, — за исключением того, что ваше
"производство" — мирового масштаба со множеством
потенциальных пользователей и разными платформами.
С учетом всего этого для проверки JavaScript-кода нужно
использовать множество различных методов
тестирования. Потребуется проделать некоторый (небольшой)
объем модификаций, дабы удовлетворить требования
мира JavaScript и Internet. JavaScript — язык
программирования, приспособленный для создания сложных
приложений, поэтому, как и в случае традиционных
языков программирования, он требует надежного
тестирования.
ПРИМЕЧАНИЕ
Тестирование — это не то же самое, что отладка.
Тестирование — это средство обнаружения ошибок.
Отладка — средство определения источника ошибок и
исправления их.
При тестировании кода обязательно следует
предполагать, что ошибки в программе присутствуют. Если
предположить, что ошибок в коде нет вообще, скорее
всего, ни одна ошибка не будет найдена! Практически,
даже наиболее полное тестирование никогда не сможет
доказать отсутствие ошибок (для подобного
доказательства пришлось бы выполнить бесконечное количество
тестов); можно только доказать существование ошибок.
Для того чтобы упростить работу по тестированию
кода, стоит подготовить формальный план
тестирования, который должен содержать как контрольный
список (одностраничный список всех высокоуровневых
действий по тестированию), так и детальные тестовые
сценарии для проверки кода. Тестовые сценарии
должны содержать список определенных и систематических
испытательных шагов, которые требуется выполнять в
приложении, а также ожидаемые результаты. При
проектировании тестовых сценариев необходимо
учитывать:
• Требования для приложения. Необходимо
удостовериться, что приложение удовлетворяет исходным
функциональным требованиям. Тестирование должно
включать также и получение ответа от пользователя
(или заказчика) о том, насколь точно
функциональность приложения соответствует первоначальным
требованиям. Ответ пользователей относительно
основной модели приложения поможет провести
идентификацию и исправление многих логических
ошибок, обусловленных выполнением не тех требований.
• Требования по дизайну. Необходимо удостоверится,
что приложение соответствует предложенному
дизайну. Это тестирование должно включать получение
ответа от дизайнеров приложения о том, насколь
точно приложение соответствует их проекту. Это те-
Ш Избранные программные технологии
Часть V
стирование также может помочь идентифицировать
потенциальные недостатки проекта.
Шаблоны потоков данных. Необходимо проверить
корректность потока данных в системе, особенно
касающихся дизайна. Это тестирование должно
проверить целостность данных, обрабатываемых
приложением. Необходимо составить схему потока данных в
приложении от ввода до обработки для пошагового
отслеживания воздействий на данные.
Функции. Необходимо проверить каждую функцию
в приложении на предмет корректной реализации
функциональных возможностей. Это тестирование
должно проверять правильность функциональных
возможностей отдельных функций независимо от
остальной части кода. Успех этого тестирования часто
зависит от того, насколько модульными
(сосредоточенными на одной цели, независимыми) являются
функции. (Модульное программирование
рассматривается более подробно позже в этой главе, в разделе
"Написание модульного кода.")
Строки программы. Необходимо протестировать
каждую строку приложения на предмет проверки
корректной реализации функциональных возможностей.
Это может быть сделано путем пошагового прохода
по строкам программы и проверки результатов
выполнения этих строк (для изоляции кода можно
воспользоваться комментариями).
Плохие данные. Необходимо также проследить, как
приложение выполняется при получении плохих
данных (например, недостаточно данных, слишком
много данных, неправильный тип данных или
размеры данных). Это тестирование должно также
проверять поведение приложения, когда требуемые или
необязательные данные отсутствуют (например,
пустые поля ввода в форме). Тестирование должно
подтвердить существование методов обработки
ошибок, справляющихся с такими ситуациями.
Краевой анализ. Необходимо проследить, как
приложение исполняется при указании краевых данных,
циклов и итерационных вызовов функций. Это
тестирование должно гарантировать, что приложение
будет правильно обрабатывать минимальные и
максимальные значения переменных, а также что
имеется в наличии встроенный метод обработки ошибок
для значений, которые приложение не может
обработать.
Наиболее частые значения. Необходимо проследить,
как приложение исполняется, когда получает
информацию, чаще всего вводимую пользователем. Это
тестирование должно гарантировать, что приложение
работает безупречно для обычных данных, поскольку
его неудачная работа затронет большинство
пользователей.
Наиболее частые ошибки. Проверьте, что наиболее
частые или выявленные ранее ошибки исправлены.
Тестирование должно гарантировать, что ошибки,
исправленные ранее, в дальнейшем не возникнут
снова в более поздней версии кода. Самая
вероятная причина такого типа ошибок — плохое
управление изменениями (или управление версиями), что
может потребовать последующих тестирований этих
процедур с целью идентификации и исправления
ошибок.
Различные платформы. Протестируйте приложение
на различных аппаратных и программных
платформах. В Internet присутствует огромное число
пользователей, работающих с различными аппаратными
(такими как Intel, Macintosh и Sun) и
операционными системами (Windows 95, Windows 98, Windows
NT и разновидности UNIX и Linux). Создаваемый
код лучше протестировать на как можно большем
количестве различных платформ, чтобы хорошо
понимать его поведение и, в случае необходимости,
изменять его.
Минимальные конфигурации. Протестируйте
приложение на клиентских рабочих станциях с
минимальными конфигурациями. Напомним, что
пользователи располагают различными ресурсами. Необходимо
выяснить, какое количество требований приложение
предъявляет машине клиента (например, в терминах
мощности обработки, памяти, пропускной
способности). Это поможет понять, какой должна быть
минимальная конфигурация аппаратной и программной
платформы, на которой данное приложение будет
выполняться успешно. Тестирование должно
включать проверку выполнения кода для рекомендуемых
минимальных конфигураций, а также обработку
ошибокдля пользователей, имеюших конфигурацию
меньше минимальной.
Различные браузеры. Протестируйте приложение в
различных браузерах, поддерживающих JavaScript.
Это тестирование поможет увидеть обработку
созданного кода различными браузерами, а также
совместимость кода. Если совместимость кода
отсутствует, можно либо изменить существующий код
либо написать дополнительный код обработки
ошибок.
Совместимость HTML со старыми браузерами.
Необходимо гарантировать, что HTML-файл сможет
читаться в старых (неподдерживающих JavaScript)
браузерах. Проверьте работу кода в текстовых или
старых браузерах, чтобы выяснить, как отсутствие
JavaScript повлияет на пользовательскую среду —
например, браузер может подвиснуть или войти в
аварийный режим, или страница может просто не
загрузиться. Проверьте, доступен ли альтернативный
путь чтения содержимого сайта и насколь он эффек-
тивгн и надежен.
СОВЕТ
В многих случаях из-за требований наличия
определенных функциональных возможностей имеет смысл
сознательно проектировать и реализовывать сайт для
браузеровопределенногобазового(илиминимально-
го) уровня. Например, можно потребовать, чтобы
пользователь имел по крайней мере Navigator 4.7 или
Internet Explorer 4.0 для эффективной работы с
приложением. В таком случае необходимо сообщить
пользователям об этих требованиях до того, как они
зайдут на сайт, и предоставить гиперссылки на
страницы, где они смогут выгрузить соответствующие
браузеры. Альтернативное решение — можно написать
JavaScript-сценарий для выяснения типа браузера, и
если он не соответствует минимальным требованиям,
отображать предупреждающее сообщение либо
автоматически отсылать пользователя к
соответствующему сайту загрузки браузера. В главах 26 и 27 можно
найти более подробную информацию о таких JavaScript-
кодах .
• Перегрузка. Проверьте поведение приложения при
перезагрузке HTML-страницы. Это тестирование
должно подтвердить, что при перезагрузке код ведет
себг правильно. Если перезагрузка воздействует на
код, то тестирование должно подтвердить
существование кода обработки ошибок и команд,
помогающих пользователю избежать проблем.
• Изменение размеров. Проверьте поведение
приложения при изменении размеров окна браузера. Это
тестирование должно подтвердить, что при изменении
размеров код ведет себя правильно. Если это
изменение воздействует на код, то тестирование должно
подтвердить существование кода обработки ошибок
и команд, помогающих пользователю избежать
проблем.
ПРИМЕЧАНИЕ
При изменении размеров окна Netscape Navigator
текущая Web-страница перегружается. Microsoft
Internet Explorer только изменяет размеры окна без
перегрузки текущей Web-страницы.
Испытания в утяжеленном режиме (стресс-тест).
Проверьте поведение приложения в момент, когда
им пользуются сразу много людей. Это тестирование
можно провести при наличии нескольких
пользователей, выполняющих данный код, следуя
определенному и детально разработанному сценарию, либо за
Обработка ошибок VVV9
Глава 33 USl
счет применения некоторой автоматической
пусковой возможности. Необходимо выполнить
мониторинг, запись и анализ результатов всех испытаний (в
том числе время ответов и сбои поведения).
Необходимо также выяснить, как тестируемый код влияет
на остальную часть сайта. В случае необходимости
измените код и проведите повторное тестирование.
Потеря связи. Проверьте поведение приложения в
момент сбоя Internet-соединения либо остановки
загрузки страницы. Пользователи обычно теряют связь
с сайтом или вручную останавливают передачу
данных. Код должен при необходимости изящно
справляться с этим (избегая подвисания браузера и его
аварийного завершения). Проверьте наличие соответ-
ствуюших функциональных возможностей.
СОВЕТ
Netscape Navigator имеет встроенный URL, который
можно использовать для быстрой проверки строк
JavaScript-кода. В окне URL браузера Navigator введите
javascript: код на JavaScript, (mocha: кол на JavaScript
выполняет аналогичный тест.)
Например, при вводе javascript: alert("Hello World!")
в диалоговом окне alert!) отображается строка Hello
World.
Программирование с использованием
устойчивых технологий
Как и любые другие программисты, авторы JavaScript-
кодов могут извлечь большую пользу из изучения и
использования при написании кода приложений
устойчивых технологий программирования. Даже при том,
что JavaScript все еще слишком молод, чтобы иметь
богатый собственный материал по упомянутым
технологиям, можно воспользоваться хорошим набором
общих рекомендаций, существующим в других (особенно
объектно-ориентированных) языках программирования.
Следующий список показывает некоторые из методов,,
адаптированных под JavaScript:
Высокоуровневая разработка кода проекта и
детальное проектирование.
Написание модульного кода.
• Написание сильно связанного кода.
Написание слабо связанного кода.
Написание повторно используемого кода.
Написание кода обработки ошибок.
• Использование жестких соглашений по именованию.
Использование комментариев.
Объявление и инициализация переменных.
ЕЩ Избранные программные технологии
3 Часть V
Каждый из перечисленных методов кратко
объясняется в следующих разделах. Однако, не следует
забывать, что последовательное выполнение таких методов
требует подробного изучения, не только из-за уровня
требуемой дисциплины, но также и для того, чтобы
избавиться от некоторых плохих привычек и взамен
приобрести хорошие привычки!
Высокоуровневая разработка кода проекта
и детальное проектирование
Это первый шаг на пути создания качественного кода.
Высокоуровневая разработка поможет
идентифицировать типы функциональных возможностей, требуемых
для различных функций приложения. Детальное
проектирование поможет идентифицировать и вызвать
отдельные функции и составить схемы их процессов.
Хороший детальный проект (особенно, если он
написан на псевдокоде) можно без особых трудностей
преобразовать в код и комментарии. Необходимо по крайней
мере уметь записывать объявления функций и
переменных непосредственно из проекта. Кроме того, следует
уметь итеративно разбивать оставшуюся часть
детального проекта на подразделы и преобразовывать каждый из
этих подразделов в код.
Написание модульного кода
Написание модульного кода означает разделение
приложения на несколько отдельных функций (или
модулей), где каждая функция исполняет только одну
задачу и связывается с другими функциями с помощью
вызовов. Такое модульное кодирование выгоднее по
следующим соображениям:
• Уменьшение сложности. Каждый модуль
сосредоточен только на одной задаче, следовательно,
большинство модулей остаются простыми.
• Уменьшение дублирования. Если один и тот же тип
функциональных возможностей требуется в
нескольких местах, соответствующий код будет написан
только один раз (в функции).
• Уменьшение степени влияния изменений. Можно
изменять часто используемые функциональные
возможности только в одном месте (в функции, где они
постоянно содержатся) вместо изменений в
нескольких местах.
Увеличение степени сокрытия процесса. Детали
выполнения функций скрываются от других функций.
Это означает, что можно изменять способ работы
функции без изменения остальной части кода
(поддерживая один и тот же интерфейс функции).
Увеличение степени повторного использования кода.
Можно повторно использовать отдельные функции
в других программах, требующих того же типа
функциональных возможностей.
• Улучшение удобочитаемости. Модульное
программирование приводит к более простым и
совершенным компонентам, которые, в свою очередь, делают
программу более удобочитаемой и легко
сопровождаемой.
Написание сильно связанного кода
Связность зависит от того, насколь близкими являются
задачи функции. Сильно связанный код означает, что
функция почти полностью ориентирована на
достижения одной цели. Она должна достигать только одной
цели и делать это хорошо. Пример такой функции -
Math.sqrt(w7/«e). Эта функция просто вычисляет
квадратный корень значения, которое получает в качестве
аргумента, и возвращает результат.
Сильная связность ведет к высокой надежности,
поскольку выполняемые задачи каждой функции очень
узко определены, а количество этих задач — очень
ограничено.
Написание слабо связанного кода
Связность зависит от того, насколь близко соотносятся
две функции. Слабо связанный код означает, что
отношения между двумя функциями слабые, видимые и
прямые. Это обеспечивает для любой функции
возможность вызова другой функции, и при этом
независимость от другой в реализации своих собственных
функциональных возможностей.
Написание повторно используемого кода
Модульное программирование помогает в создании
повторно используемого кода. По сути дела, этот код (или
функцию) можно включать в любой другой код с целью
обеспечения тех же функциональных возможностей.
Написание подобного рода кода дает множество выгод:
Высокая надежность. Повторно используемые
функции доказаны и проверены множество раз.
Низкая стоимость. Не возникает потребности в
реализации новой функции.
Мобильность. Можно легко сделать код доступным
для других платформ.
Сокрытие информации. Внутренние операции кода
скрыты от вызывающих объектов.
Написание кода обработки ошибок
Качественная программа должна быть способна не
только предвидеть необычные и ошибочные события
(например, некорректные данные, необычное поведение
пользователя или прерывание передачи), но также и
справляться с ними как можно более изящно. Это тот
случай, когда хорошо написанный код обработки
ошибок становится жизненно важной проблемой.
Обработка ошибок должна быть встроена в код и выполнять, по
крайней мере, некоторые из перечисленных ниже задач:
Проверять значения всех вводимых данных из
внешних источников. Необходимо проверить
правильность данных, включая типы, диапазон значений и
завершенность ввода. Если здесь происходит
ошибка, программа должна сбросить текущие данные и
запросить отправку новых.
Проверять значения всех параметров функций.
Необходимо проверять правильность данных,
полученных из других функций. В случае ошибки
получающая функция должна сбросить ошибочные данные и
отправить новый запрос к передающей функции.
• Выполнять обработку исключений. Исключения
должны замечаться программой и регистрироваться в
протоколе исключений. Если решение конкретного
исключения не существует, функция должна
красиво завершиться.
Проверять другие важные ошибки. По возможности,
код обработки ошибок должен предотвращать
появление ошибок.
• Выполнять изящное завершение. Если сбои кода или
пользователь остановят передачу файла до того, как
страница полностью загрузится, браузер должен
остаться в рабочем состоянии (т.е., он не должен
зависнуть или аварийно завершиться). Это можно
сделать, написав подпрограмму обработки ошибок,
проверяющую, загружена ли страница успешно, или
же открывая новое окно браузера для приложения,
чтобы в случае возникновения аварийной ситуации
она затронула бы только его собственное окно.
Использование жестких соглашений по
именованию
Использование жестких соглашений по именованию
означает применение соответствующих, согласованных
и значимых имен для всех объявлений (например,
объявлений объектов, свойств, методов и переменных) в коде.
Жесткие соглашения по именованию помогают
упростить сопровождение кода, улучшить удобочитаемость,
увеличить ясность кода и устранить рост числа
конфликтующих имен (когда тот же самый объект
вызывается с помощью двух разных имен).
В коде можно использовать множество способов
разработки жесткого соглашения по именованию. Ниже
приведен список того, что лучше отчетливо выделить в
коде:
Глобальные переменные
Обработка ошибок VEH
Глава 33 ШШЯШ
• Локальные переменные
• Поименованные константы
• Имена функций
• Аргументы функций
СОВЕТ
Используйте отформатированные составные слова для
расширения смысла и удобочитаемости имен.
Например, воспользуйтесь MaximumWeight = 200 для
переменной или findHeightlnMeters(Height) {... — для
функции.
Использование комментариев
Комментарии могут оказаться очень эффективной
формой связи исходного кода, написанного программистом,
с остальной частью мира, в том числе и с другими
программистами, которые, возможно, будут поддерживать
код позже. Насколько хороший комментарий
увеличивает удобочитаемость программы, настолько же плохой
комментарий может мешать и вводить в заблуждение.
Для написания полезных комментариев требуется
осторожность и внимание. Ниже приводятся некоторые
рекомендации для написания хороших комментариев:
Поместите в комментарии важную информацию о
программе с выходными данными (например,
автором, датой последней модификации, целью функций
и последних изменениях). Они могут оказаться
единственным доступным или актуальным источником
документации.
Напишите комментарии о коде, который трудно
понять с ходу. Комментарии должны добавить смысл,
чтобы пользователь понял больше, чем уже
очевидное.
• Напишите комментарии о предназначении кода,
объясняющие, почему что-то делается. Это означает,
что комментарии следует помещать в
соответствующие места (например, перед или после строки
программы) для объяснений целей и способов работы
кода.
• Напишите комментарий по глобальным переменным.
Что они содержат? Когда они были изменены?
• Напишите комментарий для нетривиальной или
запутанной части кода. Что она делает? Почему
используется?
• Помните, что те, кто будет загружать данную Web-
страницу, могут увидеть JavaScript-комментарии,
просто в браузере просматривая исходный код HTML,
так что не стоит помещать в JavaScript-комментариях
информацию, не предназначенную для чужих глаз.
ЕЩ Избранные программные технологии
J Часть V
Объявление и инициализация переменных
Несмотря на то что JavaScript позволяет использовать
необъявленные и неинициализированные переменные в
коде, хорошая практика программирования
предполагает последовательное объявление и инициализацию
переменных. Объявление переменных в одном общем
для всех месте (обычно в начале функциональной или
глобальной области) делает отслеживание и
поддержание их относительно простым делом. Инициализация
переменных гарантирует, что переменные содержат
корректный тип данных в любом месте программы.
(Например, если var Counter = 0;, это значит, что
переменная Counter имеет числовой тип данных.)
ПРЕДОСТЕРЕЖЕНИЕ
Не используйте в качестве имен переменны
зарезервированные ключевые слова JavaScript — зто приводит
к ошибкам. Загляните в справочник по JavaScript для
выяснения списка зарезервированных ключевых слов.
Надежная работа кода
JavaScript, подобно другим языкам программирования,
имеет свои нюансы — включая ошибки языка, неясные
особенности и странное поведение — которые
потребуется изучить перед написанием действительно
устойчивого кода. Необходимо также знать различия между
реализацией JavaScript в Netscape Navigator и JScript
(реализация JavaScript от Microsoft) в Microsoft Internet
Explorer. Даже при том, что они в основном
идентичны, каждая из них обладает такими функциональными
возможностями, которыми не обладает другая. Вместо
того чтобы исписывать страницу за страницей, внося в
список ошибки, туманные особенности и странные
моменты поведения различных браузеров только для
того, чтобы выяснить, что они были установлены в
последней версии кода, стоит лишь подчеркнуть, что
JavaScript (и, следовательно, JScript) — все еще
развивающийся язык. Это означает, что нужно знать уровень
браузера(ов), которые выбираются для обеспечения
базовых (или минимальных) требований к сайту, а
также отличия этих браузеров от других версий.
Для получения списка последних наиболее
известных ошибок JavaScript и методики их обработки
можно посетить страницу Netscape JavaScript Known Bugs io
адресу http://developer.netscape.com/support/bugs/
known/.
Актуальная информация по JScript находится на
странице Scripting Technologies по адресу littp://msdn.microsoft.com/
scripting/default.htm?/scripting/jscript/.
В случае если необходимая информация не
найдена ни на одном из упомянутых сайтов, стоит
поучаствовать в конференциях, посвященных JavaScript
(например, в телеконференции comp.Iang.javascript в Usenet).
Наконец, чтобы значительно повысить шансы на
хорошее написание кода, работающего в обоих браузерах,
следует убедиться, что код протестирован в обоих
браузерах и не использует такой JavaScript-код, который
работает в одном браузере и не работает в другом.
Резюме
Глава была посвящена анализу трех типов ошибок
JavaScript (синтаксические, ошибки времени выполнения и
логические) и представила стандартные
JavaScript-сообщения об ошибках, а также об их возможных причинах.
Кроме того, рассматривались способы исправления
кода и идентификации ошибок. Также обсуждался
систематизированный подход к тестированию кода,
состоящий из плана тестирования и детализации тестовых
сценариев, а также определенные пункты создания
сценариев тестирования.
Были продемонстрированы способы формирования
и предварительного контроля кода (с целью
уменьшения времени на отладку) с апробированными методами
реализации устойчивого и удобочитаемого кода. Эти
методы в конечном счете помогают сохранить многие
часы рабочего времени и качественнее спроектировать
код.
В заключение в главе были кратко представлены
некоторые из последних ошибок JavaScript и способы
их обработки, обеспечивающие надежное
функционирование кода.
Отладка
к
В ЭТОЙ ГЛАВЕ
Использование отладчика сценариев Microsoft
Использование JavaScript-отладчика Netscape
Использование метода alert()
Хотя отладку исходного кода зачастую не относят к
элементам программирования, ее можно назвать
базовым элементом создания приложений в любом языке
программирования. Не исключением является и JavaScript.
Теперь, когда JavaScript нашел свое место в
семействе кодов, мы, наконец, получили среду со
всесторонней поддержкой средств написания и отладки сценариев,
аналогичную таковой в зрелых языках
программирования (C++, Visual Basic и Java). Эти инструментальные
средства можно отнести к следующим трем категориям:
Инструменты интегрированной среды разработки
(Integrated Development Environment — IDE). Они
помогают быстро создавать функциональные и
динамические Web-сайты, в том числе страницы,
использующие JavaScript.
• Инструменты написания JavaScript-сценариев. Они
помогают более эффективно разрабатывать
страницы с JavaScript с помощью интуитивно понятного
визуального интерфейса и технологий
редактирования. Примером такого инструмента может служить
Infuse Acadia.
• Инструменты отладки JavaScript-сценариев. Они
помогают более эффективно выполнять отладку,
исправление и тестирование кода с использованием
графического интерфейса и стандартных методов
отладки (типа точек останова и пошагового
выполнения). Примером такого инструмента может служить
JavaScript Debugger от Netscape.
Появление новых инструментов создания и отладки
JavaScript-сценариев обеспечивают разработчикам
возможность пользоваться преимуществами более
автоматизированных предварительных и (в меньшей степени)
корректирующих средств контроля. Если доступ к
JavaScript-средствам отладки отсутствует, либо объем
работы по отладке достаточно невелик, то в качестве
средства отладки можно применять простое сигнальное
окно JavaScript. В этой главе рассматриваются три
доступных варианта отладки JavaScript-кода, которые
всегда имеются в распоряжении.
Использование отладчика сценариев
Microsoft
Отладчик сценариев Microsoft (Microsoft Script Debugger,
MSSD) — свободно выгружаемое средство отладки
сценариев, которое работает как интегрированная часть
Internet Explorer (в версиях 3.01 и выше). MSSD можно
использовать для написания и, что более важно, для
отладки кода JavaScript (JScript в исполнении Microsoft)
или Visual Basic Script (VBScript). Преимущество MSSD
заключается в его в способности обрабатывать
требования отладки ActiveX, Java, JScript и VBScript. (MSSD
можно выгрузить из сайта http://msdn.microsoft.com/
scripting/.)
Обзор возможностей отладчика сценариев
Microsoft
Ниже приведены основные возможности отладчика
сценариев Microsoft:
• Динамическое представление структуры HTML. Как
видно из рис. 4.1, MSSD позволяет рассматривать
полную структуру страницы в окне Project Explorer, a
отдельные HTML-файлы (например, для фреймов) -
в специально выделенных окнах.
Многоязыковая интеграция. Можно выполнять
отладку JavaScript, VBScript и Java в одном и том же
документе.
Избранные програштые технологии
Часть V
4Uaomli Soml Oil щи • МиаивН М-тч» Ev»Ih-
Шуей -- J!»b;M..,J!vfjgL.
.3
• bfl -JffJ-f f*" ink- "* C- 15"
^
'""T
РИСУНОК 34.1. Просмотр HTML-фтыов в отладчике
сценариев Microsoft.
Выделение цветом синтаксиса. MSSD отображает код
со стандартными цветами отладки, что помогает
лучше идентифицировать состав кода и упрощает
процесс отладки.
Точки останова. Можно проставлять точки останова
в любых местах сценария, обеспечивая останов
выполнения отладки.
• Пошаговое выполнение кода. MSSD позволяет
пошагово (с паузами после каждого шага) выполнять код —
по одной строке на каждом шаге.
• Пошаговое выполнение блоков кода. Позволяет
пошагово выполнять код, но при этом процедуры
вызываются как один модуль (без пошагового
выполнения кода внутри них), и переходить к следующему
оператору.
• Пошаговое выполнение кода внутри блоков. В
отличие от пошагового выполнения блоков кода, здесь
выполняются остающиеся строки (начиная от точки
выполнения) вызванной процедуры, и затем
программа переходит на следующий после вызова
данной процедуры оператор.
• Интегрированный стек вызовов. MSSD интегрирует
стеки вызовов (как VBScript, так и j Script) в коде в
один стек вызовов.
• Окно непосредственного выполнения выражений.
Это окно позволяет быстро вычислять выражение в
пределах стека вызовов либо тестировать новый код.
Окно отображает результат выполнения строки
программы.
Использование отладчика сценариев
Microsoft для отладки файлов
В этом разделе пошагово демонстрируется пример
сеанса отладки в MSSD. В течение этого сеанса
максимальное внимание будет уделяться возможностям MSSD
и их применению, и в меньшей степени —
содержимому и функциональности примера. Предполагается, что
в качестве браузера используется Microsoft Internet
Explorer (версии 3.0] и выше), а также наличие
установленного MSSD.
Запуск отладчика сценариев Microsoft
Единственный способ запуска MSSD предполагает
первоначальное открытие Internet Explorer и загрузку в него
необходимого исходного HTML-файла. Затем можно
активизировать MSSD, выбрав View -» Source (Вид -»
Источник).
ПРИМЕЧАНИЕ
Если MSSD не установлен, то выбор View -» Source
откроет исходный файл в редакторе Notepad.
Для запуска процесса отладки выберите Edit -> Break
at Next Statement (Правка -» Останов на следующем
операторе) в Internet Explorer (или же Debug -> Break at
Next Statement (Отладка -* Останов на следующем
операторе) в MSSD) и запустите сценарий. Отладчик
запускается и останавливается на первом операторе
текущего сценария.
Использование команды "Break at Next Statement"
Команда "Break at Next Statement" (которая присутствует
в опции "Script Debugger" меню "View" (Вид) в Internet
Explorer и меню "Debug" (Отладка) в MSSD)
аналогична команде выполнения шага (при которой отладчик
выполняет один оператор в сценарии и затем
останавливается), за исключением того, что ее можно также
использовать без запуска сценария.
Это важная особенность отладки MSSD, поскольку
большое количество JavaScript-кода обычно
объявляется в разделе заголовка (или <HEAD>) HTML-файла, и
эта команда представляет собой единственный способ
отладки такого кода. Так происходит потому, что код в
заголовочном раздела файла к моменту загрузки HTML-
файла уже выполнен (вспомните, что JavaScript —
интерпретируемый язык). Кроме того, любой набор точек
останова, загруженных после HTML-файла, при
перегрузке страницы теряется.
Вычисление выражений
Выражение можно вычислить в окне
непосредственного вычисления (окно Immediate) MSSD, а также с
использованием следующих двух методов:
• Debug.write(string). Этот метод записывает
указанную строку (обычно значение переменной) в окно
Immediate без пробелов и символов новой строки
между строками.
Отладка
• Debug.writeln([string]). Этот метод идентичен
предыдущему за исключением того, что после каждой
строки вставляется символ новой строки. Аргумент
строки здесь необязателен. Если он не указан, в окно
Immediate записывается только символ новой
строки.
На рис. 34.2 показан пример использования окна
Immediate для вычисления выражений (или значений
переменных).
4»
Ц ■ &Ы I 4 .|Й?-Цч"Г-
V4if «ft ■ Jtr.niibBtjrllVSJl, I-1
ЕЗЭС5ЯЗЗШ11 j
.1 |ofa i -J" || ch) *9wi I..
If left P- V ** a*j
CC ch +- »|"
CCTUtD fftl
Simple Cpjlcgferoi
ba
Jf
w
Л
РИСУНОК 34.2. Использование окна Immediate Оля вычисления
выражений.
Разбор примера
Для более четкого понимания возможностей MSSD необ-
ХОД1- мо попрактиковаться в использовании его для
отладки кода. Следующее упражнение дает хорошую
отправную точку для такой тренировки:
1 Откройте Internet Explorer.
2. Выберите Edit -» Break at Next Statement.
3. Откройте HTML-файл, приведенный в листинге
34.1. Для этого можно набрать его URL, перетащить
файл в окно браузера либо воспользоваться пунктом
меню File -» Open. В этом файле потребуется
заменить имена WAV-файлов на имена и пути звуковых
файлов, доступных в вашей системе:
Листинг 34.1. Использование JavaScript-события для
воспроизведения звука. _
<htnil>
<head>
<tit.le>Sound on JS events</title>
<script language="javascript">
< 1 — Скрыть код от старых браузеров
function playSound(sfile) {
// Загрузка и воспроизведение звукового файла
window, location, href=sfile;
)
Глава 34
// Конец сокрытия —>
</script>
<body onLoad="playSound('Type.wav');"
onUnLoad="playSound('Glass.wav');">
<font size=+2>Sounds on JS Events</font>
<br>
<hr>
The following are example of JS event handlers
used to play sounds.
<hr>
<a href="#" onClick="playSound('Cashreg.wav');">
Click here for sound</a>
<brxbr>
<form name="forml">
<input type="button" value="Press Button to
play a sound"
onClick="playSound('Gunshot.wav');">
</f orm>
</body>
</html>
4. Когда файл открыт, активизируется MSSD, и
после выполнения первого оператора происходит
останов, как показано на рис. 34.3.
IlieitnoltSc ф| Dafaug. - Micimolt Ifftamo* Ешфят
эв
• 1 tcmJniM «Lhtrii) _____
<> windutf. location. h__x*_I 1 it i
..iiiLD_frnpi____ undf'Tyge. trav') j*
ontfl at ¥~>*У" {"Gl<SS&. tf'iV !
*_on* * .IS £v__i
<№$ic cjc as
ИКР
_
'J
А*ЧУ
__
РИСУНОК 34.3. Останов MSSD после чтения первого
оператора.
5. Теперь можно пошагово проходить код, чтобы
увидеть последовательность действий программы. Для
пошагового прохождения кода используются
пиктограммы инструментальной панели Step Into, Step
Over и Step Out. Рис. 34.4 показывает следующую
строку программы, которая выполняется при
нажатии на кнопку "Step Into".
СОВЕТ
Названия пиктограмм инструментальной панели MSSD
можно увидеть, поместив на них курсор мыши и не
выполняя щелчок одну-две секунды. Более детальное
описание всех пиктограмм и возможностей MSSD
находится в справочной системе.
6. После перехода (возможно, при помощи
пиктограммы Continue) к завершению вызова события onLoad,
Избранные программные технологии
Часть V
можно будет услышать звуковой файл, который
запустит система (если компьютер имеет
соответствующие аудиовозможности). Возможно, потребуется
явно разрешить браузеру открывать звуковой файл,
в зависимости от конфигурации Internet Explorer.
Эта мера принимается для защиты от открытия
неизвестного и потенциально опасного (содержащего
вирус) не-НТМЬ-файла. На рис. 34.5 показан файл
после его полной загрузки в браузер.
SEflicinolrSmil Debunv-MiGwnHMemiii Ец
'! round_(tathtal
erani
1Г
frLbdatr. Local Job. href-dl lie:
]Btl^"play3ound (' Type. wav* ) ; "
iLcjac1 "j;J ^- "ir* i "1 ~ .m*v"
R"-l 1 —
ВНР
J
~lw г*>!1;>*И1у
s^ftr1, n#n-*
РИСУНОК 34.4. Прохождение кода с использованием
пиктограмм инструментальной панели MSSD.
азязЕ££тшКгзк=
ЩЖ
ft E* Van „В ..£*«>» в*
A<tte«^vS/c:Y_*\rtuiill*i<-l*ri
ISL
are каш^Лв
-эч
jj
РИСУНОК 34.5. Результат загрузки кода излистинга 34.1.
7. Выберите Edit -» Break at Next Statement для
останова выполнения кода после следующего
оператора. Щелкните на кнопке Press a Button to Play a Song
на HTML-странице. Отладчик остановится на
обработчике событий onCIick. Можно теперь
отслеживать вызовы процедур, открыв окно Call Stack (Стек
вызовов), как показано на рис. 34.6, и пошагово
выполняя код.
3. Можно также просматривать значения выражений
или строк программы (не пустых и не строк
комментариев) в окне Immediate:
1. Щелкните из MSSD внутри функции playSound
в коде (это первая функция, объявленная в
заголовке).
2. Если попытаться напечатать что-нибудь внутри
функции, MSSD отобразит панель с вопросом,
потребуется редактировать документ. Щелкните
на Yes и напечатайте Debug.writeln (sfile); прямо
перед фигурной скобкой (}), закрывающей
функцию.
3. Сохраните отредактированный файл, используя
File -» Save (Файл -» Сохранить) (или нажав на
пиктограмму Save в инструментальной панели).
IT Minn I iff Tnipl PnhunQTir Minni ill Irrttmit Гщ*ии Bns
£*ГЁ<« IS»* S<*»« SVA» Ии>. о «
,HjL 1 Hftjal -I Ijtiaд»Ы~jIjBF
к in щ 'i'ii иная—идшз
щщщщ!
.ti: 1*
riPI»!
function plHV3Dund(stHc) (
// lev! * "--uti-j «r.d pl-iv it
ф I wind». Incetion, hrefша1l Jr.-
J
Ф plapScund ]
J5"?ripe - 'onCJlefc* «venc baudLee foe ECxml.x SCP OQaisa
i
J
T««V ... ~ „..™jLne.Lti ,t ...
РИСУНОК 34.6. Использование окна Call Stack для
отображения активных вызовов процедур.
4. Можно также проставить вручную точку
останова в строке Debug. Нажмите F9 для установки
(или снятия) точки останова. (Строка точки
останова выделяется красным цветом и слева от нее
проставляется красная точка.)
5. Теперь переключитесь на браузер и обновите
(перегрузите) HTML-файл. (Помните, что в таком
случае набор точек останова теряется, поэтому,
если требуется остановить код на определенной
строке, нажмите F9 для добавления точки
останова в MSSD.)
9. Когда файл начнет выполняться, откройте окно
Immediate в MSSD для визуализации текущего
содержания выражения Debug. Если продолжить
пошаговое прохождение кода, можно заметить, что
содержимое окна Immediate модифицируется
каждый раз при вызове функции Debug.writeln (см. рис.
34.7).
Отладка
Щ Mfcf^oft Seiipt Dringgn MkHDsell Internet Eiptaiet
furictiuti playSoiLodfaf lle| I
vlndc*. locaclon.liicf-afile'
« ИШ»,111ЛП.1ДД
HP1D
Culreg-wkv
^
РИСУНОК 34.7. Использование метода Debug.writelm/
вычисление выражения в окне Immediate.
Заключительные слова об отладчике
сценариев Microsoft
Отладчик сценариев Microsoft обеспечивает полезную
среду для автоматизированного выполнения отладки и
тестирования JavaScript-кода. Инструменты MSSD очень
похожи на инструменты, которые обычно
присутствуют в средах зрелых языков программирования, таких как
Visual Basic и C++. К тому же, интерфейс, установка и
инсталляция MSSD являются интуитивно понятными
и дружественными к пользователю.
Однако, MSSD обладает и некоторыми
ограничениями, например, в процессе отладки требуется часто
переключаться между Internet Explorer и MSSD, и нет
возможности вывода печать исходного кода. Если
необходимо большее количество функциональных
возможностей, чем может предложить MSSD, обратитесь к
Microsoft Visual InterDev 6.0. Эта программа реализует
все перечисленные здесь возможности отладки
сценариев плюс зрелую среду для Web-разработки.
Наконец, MSSD — это инструмент, который стоит
иметь в своем арсенале; кроме того, важно, что он
распространяется свободно. Однако, он никоим образом не
заменяет запись устойчивого кода и систематическое его
тестирование.
Использование JavaScript-отладчика
Netscape
Как и отладчик сценариев Microsoft,
JavaScript-отладчик hetscape — свободно распространяемое средство
отладки JavaScript, которое работает как
интегрированная часть Netscape Navigator. (Его можно выгрузить из
сайта http://devedge.netscape.com/software/tools/
index, html.)
Глава 34
Исследование возможностей JavaScript-
отладчика Netscape
Ниже перечислены основные возможности JavaScript-
отладчика Netscape:
Окно Source View (Исходный код). Позволяет
просматривать исходный код отлаживаемой
HTML-страницы.
• Прерывание. Позволяет останавливать выполнение
кода отладчиком в любой момент времени.
• Точки останова. Позволяет вставлять точки
останова в любые места сценария для приостановки
отладчика в этих точках.
• Пошаговое выполнение кода. MSSD позволяет
пошагово (с паузами после каждого шага) выполнять код —
по одной строке за шаг.
• Пошаговое выполнение блоков кода. Позволяет
пошагово выполнять код, но при этом процедуры
вызываются как один модуль (без пошагового
выполнения кода внутри них), и переходить к следующему
оператору.
• Пошаговое выполнение кодов внутри блоков. В
отличие от пошагового выполнения блоков кода, здесь
выполняются остающиеся строки (начиная от точки
выполнения) вызванной процедуры, и затем
программа переходит на следующий оператор после
вызова данной процедуры.
• Окно Console (Консоль). Обеспечивает область для
визуализации вычислений JavaScript-выражений
активного в данный момент фрейма.
• Инспектор объектов. Позволяет просматривать и
работать со значениями свойств объекта.
• Окно наблюдения. Позволяет просматривать
выражения каждый раз, когда интерпретатор останавливает
и активизирует отладчик.
• Окно Call stack (Стек вызовов). Отображает
расположение текущей команды.
• Диалоговое окно Error Reporter (Генератор отчетов об
ошибках). Отображает информацию о
синтаксических ошибках и ошибках времени выполнения в
JavaScript- коде.
Использование JavaScript-отладчика
Netscape для отладки файлов
В этом разделе пошагово демонстрируется пример
сеанса отладки в JavaScript-отладчике Netscape.
Предполагается, что в качестве текущего браузера используется
Netscape Navigator с установленным
JavaScript-отладчиком Netscape.
Избранные програлшные технологии
Часть V
Запуск JavaScript-отладчика Netscape
Для того чтобы открыть исходный HTML-файл для
отладки его в JavaScript-отладчике Netscape,
необходимо выполнить следующие шаги:
1. Начните с загрузки страницы JSDebugger.html,
расположенной в каталоге Netscape\Communicator\
Program\JSDebug, и нажмите на ссылку для
запуска отладчика.
2. В браузере Navigator откройте страницу, которую
требуется отлаживать.
3. С помощью кнопки Open (Открыть) в
инструментальной панели отладчика выберите страницу из
списка страниц, открывшихся в Navigator после
запуска отладчика. Страница отобразится в окне
Source View.
4. Установите в отладчике желаемый набор точек
останова.
5. Щелкните на кнопке Reload (Обновить) в Netscape
Navigator для запуска отладки страницы.
ПРИМЕЧАНИЕ
При любой остановке JavaScript-отладчика Netscape
применение браузера Netscape Navigator для
просмотра Web-страниц невозможно.
Разбор примера
Для более глубокого понимания возможностей JavaScript-
отладчика Netscape неплохо потренироваться в
практическом использовании его для отладки кода. Следующее
упражнение обеспечивает хорошую отправную точку:
I. Откройте HTML-файл, показанный в листинге
34.2, напечатав соответствующий URL в Netscape
Navigator. Откройте тот же файл в
JavaScript-отладчике Netscape.
Листинг34.2. Отображаемый код.
<html>
<ti1le>vehicle_test.html</title>
<body>
<script language="JavaScript">
//Объявление двух глобальных плененных для
// описания транспортного средства
var vehicleColor;
var vehicleType;
//Установка типа транспортного средства
function setType()
return(vehicleType="truck");
)
//Уведомление пользователя, если тип и цвет
// транспортного средства не установлены
// корректно,
if (setType () II setColorO)
document.write("The " + vehicleType + " is '
+ vehicleColor) •
else
alert("The vehicle type and color could not
^be set") ;
</script>
</body>
</html>
2. После открытия и запуска файла полученная в
результате Web-страница должна иметь вид,
показанный на рис. 34.8. С первого же взгляда
можно понять, что возникли некоторые проблемы.
Предполагалось, что сценарий должен установить
тип транспортного средства в truck с помощью
функции setType() и его цвет — в blue с помощью
функции setColor(). Если эти две функции работают
должным образом, строка должна выводиться на
экран; в противном случае отображается сигнальное
сообщение, говорящее, что одна из операций
присваивания потерпела неудачу. В данном случае
сигнальное сообщение не было отображено, но все же
переменная, представляющая цвет транспортного
средства, не получила значение blue.
//Установка цвета транспортного средства
function setColor()
(
return(vehicleColor="blue");
The truck is undefined
aS'FWfc- ,-..,..,-, P-, -.«toe. ' «-K ^
РИСУНОК 34.8. Результат загрузки листинга 34.2.
3. Поскольку нас интересуют значения переменных
vehicleType и vehicleColor, добавим эти две
переменные в список наблюдения в отладчике.
4. Для начала остановите отладчик, щелкнув на
пиктограмме Interrupt (Прерывание). Обновите окно
Netscape Navigator, чтобы начать отладку.
5. Начните пошаговое прохождение кода программы
строка за строкой, щелкая на пиктограмме Into.
После выполнения каждой строки контролируйте
значения двух переменных, которые появляются в окне
Console (Консоли). Прежде чем отладчик дойдет до
оператора if, можно будет заметить, что обе
переменные не были определены, как следовало бы
ожидать. После оператора if отладчик перейдет на
Отладка
Глава 34
функцию setType() (если продолжать щелкать на
пиктограмме Into). После перехода на функцию
setType() переменная vehideType устанавливается в
truck. В этой точке планировался переход на
функцию setColor(), но вместо этого программа
переходит на метод document.write() (см. рис. 34.9). Что же
заставило оператор if пропустить вызов функции
selCoIor()? Более детальное исследование
оператора if показывает, что первый аргумент в логической
операции OR вычисляет true, после чего второй
аргумент не вычисляется вообще. Поскольку
функция setType() вернула true, функция setColor()
выполнятся уже не будет. Для коррекции проблемы
следует просто заменить логическую операцию OR
на логическую операцию AND. Правильная версия
сценария показана в листинге 34.3. Результат
выполнения файла представлен на рис. 34.10.
* NtflKopB JavaScript Debugger BRx
■f i№ „Вй. гллч-"п v/iGtfcwi j4bw
w «* " « _ *3 & -^
';«■ чггл-т OW3bB^u&v^iiiU*ifladJi\iTiij.: ;*
,^-D: recurn(vchlclBCoXara",blue'')^ L
21:1 ['
12'
t Z3://If сbe vehicle cype end eralpr uere not Ptor^rly act t
. ;H:elpe
UB:i
3.3; в1егс(иТЬе vehicle суре end en lot cnutd hoc bt э^с")" 1
!l:| Г
3i:
;~-i~X «ste* ■ ,
luan и
!
!J
il
:■ ^-Ma.-,-j
r*
■ . 5V. L. _.-■;- ~_tx .'-"-V5-.'. =■■?« :'- ■--
tiviq *1
vp hid «Type
vehicl*Colot |
i--1" ... . -i
"•"■•, - ,.,«-1
РИСУНОК 34.9. JavaScript-отладчик Netscape после выполнения
действия.
Листинг 34.3. Исправленный код..
<html>
<title>vehicle_correct.html</title>
<body>
<script language="JavaScript">
//Объявление двух глобальных переменных для
// описания транспортного средства
var vehicleColor;
var vehicleType ;
//Установка типа транспортного средства
function setType()
I
return(vehicleType="truck");
)
//Установка цвета транспортного средства
function setColor()
return(vehicleColor="blue");
)
//Уведомление пользователя, если тип и цвет
// транспортного средства не установлены
// корректно.
if(setType() SS setColorO)
(
document .write ("The " + vehicleType + " is '
+ vehicleColor) ;
I
else
t
alert ("The vehicle type and color could not
«•be set") ;
)
</script>
</body>
</html>
-v vehide_cqntBclhtftil - NetecapP
_.
. a *
|-. ...-,-. ...
The truck is blue
,. Ь*>Я
' Н*ч
РИСУНОК 34.10. Результат загрузки листинга 14.3.
Заключительные слова о JavaScript-
отладчике Netscape
JavaScript-отладчик Netscape обеспечивает полезную
среду для автоматизированного проведения отладки и
тестирования JavaScript-кода. Инструменты JavaScript-
отладчика Netscape очень похожи на инструменты,
обычно имеющиеся в средах зрелых языков
программирования, таких как Visual Basic и C++. Интерфейс,
установка и инсталляция JavaScript-отладчика Netscape
интуитивно понятны и дружественны к пользователю.
Однако JavaScript-отладчик Netscape обладает и
рядом ограничений. Среди наиболее значимых
ограничений — необходимость частого переключения между
Netscape Navigator и JavaScript-отладчиком Netscape в
процессе отладки, а также невозможность создания,
изменения и вывода на печать исходного кода.
Использование метода alert()
Если вам не доступен полный набор возможностей
JavaScript-отладчика либо вы ограничены во времени и
не хотите запускать JavaScript-отладчик для решения
простой проблемы, связанной с функциональностью,
■■■Я Избранные программные технологии
Efitf Часть V
можно найти и другой выход. То, кто когда-либо
создавал программу на каком-либо зык программирования,
тот знает, что один из наиболее простых и самых
быстрых способов отладки проблем функциональности —
это отображение значений основных переменных на
различных стадиях выполнения программы. Таким
способом можно выяснить, выполняется ли код так, как было
задумано.
В JavaScript есть удобный метод под названием alert(),
который может приостанавливать выполнение сценария
с целью визуализации значения переменной. Немного
поразмыслив и надлежащим образом разместив этот
метод, можно быстро отследить проблемы
функциональных возможностей в сценариях.
Разбор примера
Для того чтобы проиллюстрировать использование
метода alert() для отладки JavaScript-кода, возьмем тот же
самый сценарий, который использовался в примере с
JavaScript-отладчиком Netscape (см. листинг 34.3),
чтобы можно было затем сравнить эти два метода.
1. Откройте JavaScript-браузер.
2. Откройте HTML-файл листинга 34.2, напечатав его
URL в Netscape Navigator.
3. После открытия и запуска файла получившаяся в
результате Web-страница должна иметь вид,
показанный на рис. 34.8. С первого же взгляда видно
присутствие некоторых проблем. Предполагалось,
что сценарий должен устанавливать тип
транспортного средства в track с помощью функции setType() и
его цвет — в blue с помощью функции setColor().
Если эти две функции работают должным образом,
строка должна выводиться на экран; в противном
случае отображается сигнальное сообщение,
говорящее, что одна из операций присваивания
потерпела неудачу. В данном случае сигнальное сообщение
не было отображено, но все же переменная,
представляющая цвет транспортного средства, не
получила значение blue.
4. Поскольку нас интересуют значения переменных
vehicleType и vehideCoIor, отобразим значения этих
двух переменных в вызовах alert(). Необходимо
аккуратно поместить методы alertQ в точки кода, что
поможет точно определить проблемную область.
Например, метод alert() в каждой из
устанавливающих переменные функций может уведомить, что
функция была выполнена. Метод alert() до и после
оператора if сообщит, как вычисляется условное
выражение. Загрузите в браузер код из листинга
34.4, который содержит эти дополнительные
методы alert().
Листинг 34.4 Отладка с использованием alert().
<html>
<title>vehicle_debug.html</title>
<body>
<script language="JavaScript">
//Объявление двух глобальных переменных для
// описания транспортного средства
var vehicleColor;
var vehicleType;
/Уст новка типа транспортного средства
function setType()
alert("Inside the setType function.")
//Оператор отладки
return(vehicleType="truck");
)
//Установка цвета транспортного средства
function setColor()
alert("Inside the setColor function.");
//Оператор отладки
return(vehicleColor="blue");
I
//Оператор отладки
alert("Before if statement: type="+vehicleType+"
color="+vehicleColor);
//Уведомление пользователя, если тип и цвет
// транспортного средства не установлены
// корректно.
if (setType () 1 | setColor ())
I
//Оператор отладки
alert ("After if statement:
type="+vehicleType+" color="+vehicleColnr);
document .write ("The " + vehicleType + " is "
+ vehicleColor) ;
]
else
alert ("The vehicle type and color could not
^be set")
</script>
</body>
</html>
СОВЕТ
Убедитесь, что каждый вызов alertl) содержит
достаточно информации, чтобы можно было выяснять
место остановки в коде только за счет чтения текста в
сигнальном окне.
5. Когда файл открыт и запущен, посмотрите, какие
сигнальные окна отображены и какие — нет, а
также — каковы значения переменных на каждом
этапе выполнения. Первое отображаемое сигнальное
окно показывает, что обе переменные не были оп-
ределены перед выполнением оператора if, как и
ожидалось. Следующее сигнальное окно
показывает, что функция setType() была выполнена. И
последнее сигнальное окно отображает набор типов
транспортных средств truck, но цвет после
оператора if все еще не определен, как видно из рис. 34.11.
Что же случилось с функцией setColor()? Метод
ali;rt() в функции setColor(), которая не была
выполнена, сообщает, что функция setColor() не была
вызвана в операторе if. Ясно, что проблема — в
операторе if.
^ 1 4-*.1,П,Г П, ''"♦. -Ц ...
_J- £ a jHr"ififc/C р- 'ле»уаЩр"" =:;
IJavaScf ipl Application!
is
-: -■-.,■■,-
В'
ео|*г
...Ih-r.Lj.j.^. !■
РИСУНОК 34.11. Результат загрузки листинга 34.4.
6. Более детальное рассмотрение оператора if
показывает, что первый аргумент в логической операции
OR вычисляется как true, в результате чего второй
аргумент не вычисляется вообще. Поскольку
функция setType() вернула true, функция setColor() уже
не будет выполнятся. Для исправления проблемы
надо просто заменить логическую операцию OR на
логическую операцию AND. He забудьте удалить
методы alert(), которые были добавлены для целей
отладки. Правильная версия сценария приведена в
листинге 34.3. Результат выполнения файла показан
на рис. 34.10.
Отладка ММ
Глава 34 Ь£ш1
ПРЕДОСТЕРЕЖЕНИЕ
Не забудьте удалить методы alert!), которые были
добавлены для целей отладки.
Итоговые слова об использовании метода
a!ert()
Как было показано выше, метод alert() может
оказаться удобным средством отладки для быстрого решения
небольших проблем с функциональностью. При
отладке сложных проблем с функциональностью либо
проблем с синтаксисом метод alert() будет больше мешать,
нежели помогать в плане экономии времени. При всей
своей полезности метод alertQ не должен
рассматриваться в качестве альтернативы полнофункциональных
средств отладки наподобие JavaScript-отладчика Netscape.
Резюме
В глава были представлены три средства отладки
JavaScript-кода. Отладчик сценариев Microsoft и JavaScript-
отладчик Netscape позволяют отлаживать сложные
JavaScript-коды. Оба инструментальных средства стоит
поместить в свой арсенал средств, и важно помнить, что
распространяются они совершенно бесплатно. Хотя об
этом не упоминалось в данной главе, на рынке
присутствует множество других инструментальных средств
отладки с полным набором возможностей, однако
зачастую они стоят достаточно дорого. В последней части
главы рассматривалось применение сигнальных окон
как дополнительного средства отладки, когда нет
доступа к средствам отладки Netscape или Microsoft. Но
даже с этими новыми инструментальными средствами
ответственность за полное тестирование и отладку
JavaScript-кода лежит на разработчике. Ни одно из
средств отладки, обсужденных в этой главе, не может
заменить написание устойчивого кода и
систематическое его тестирование.
JavaScript и безопасность в Web
В ЭТОЙ ГЛАВЕ
■ Концепции безопасности в клиентской части
JavaScript
■ Максимизация надежности защиты
■ Концепции безопасности в серверной части
JavaScript
■ Java и безопасность
JavaScript предоставляет разработчику Web-сайта
возможность расширять статические HTML-страницы с
помощью динамического, управляемого событиями
языка программирования. Web-страница с JavaScript-
кодом обеспечивает интерактивные функциональные
возможности, выполняя фрагменты JavaScript-кода в
клиентском Web-браузере. Включение фрагментов JavaScript-
кода в страницу документа требует принятия мер по
защите как целостности кода интерпретатора
сценариев браузера, так и самого сценария. Просмотр
страницы, поддерживающей JavaScript, подвергает
пользователя большей опасности, нежели выполнение чистого
HTML-документа, поскольку из-за выполняемых
фрагментов кода возникает еще один уровень сложности в
программе браузера.
В случае традиционного программного обеспечения
между пользователем и программным обеспечением
существует четкие соглашения. Установка и
использование программ требует от пользователей явных
действий и решений. JavaScript-код не соответствует
принятым соглашениям. Код сценария загружается из
удаленного источника и выполняется без
подтверждения пользователя. Выполнение непроверенного кода из
удаленного источника аналогично поеданию яблока,
полученного по почте от неизвестного отправителя. В
исполняющую JavaScript-код систему должны быть
помещены определенные проверки и ограничения, дабы
уберечь компьютер пользователя от преднамеренных
или неумышленных посягательств на ценную
информацию и приложения. Ни один пользователь не захочет
предоставить всему миру доступ к своему компьютеру,
поэтому знания особенностей JavaScript-кода, которые
могут повредить клиентскую или серверную машины,
крайне необходимы.
Web была разработана как открытая система для
публикации графического гипертекстового содержимого
в Internet. Разработчики сайтов получили возможность
расширять статические HTML-документы
динамическими, интерактивными возможностями за счет
включения в Web-документы языков создания сценариев.
Языки создания сценариев могут выполняться на серверной
машине или же загружаться на клиентскую машину и
выполняться как удаленный код. Меры безопасности
становятся крайне необходимыми, поскольку JavaScript
и Java получают все большее распространение,
становясь таким образом более привлекательными целями для
атак.
Безопасность в подключенной к Internet
компьютерной сети может быть оценена в терминах уровня
"конфиденциальности" передачи. Получающая сторона
должна быть уверена, что переданная информация была
действительно послана указанным отправителем.
Кроме того, сообщение не должно по пути изменяться. В
гетерогенной компьютерной сети, коей является Internet,
подобная конфиденциальность в настоящее время не
может быть абсолютной. Internet задумывался и
разрабатывался как распределенная система, посредством
которой поток информации в сети должен пройти
через огромное количество различных машин, чтобы
добраться до указанного адресата. Проходя через множество
хостов, трафик подвергается модификациям или
заменам множество раз. Адрес отправителя может быть
вымышленным (подставным). Хотя всеобщая доступность
и электронная структура незащищенных передач
существенно затрудняет учет, однако шифрование,
цифровые подписи и проверка исходного кода — все это
относится к попыткам противостоять атакам.
Пользователь должен быть уверен, что код
приложения будет вести себя надлежащим образом и не разру-
шит пользовательскую систему. В типичной настольной
среде код, постоянно находящийся на локальном
жестком диске, считается заслуживающим доверия, в то
время как код, полученный из сетевых ресурсов
(удаленный код) может претендовать на гораздо более
низкий уровень доверия — в зависимости от источника
(корпоративная сеть или сайт хакера вирусов). В прошлом
доверие обычно зависело от происхождения кода
приложения. Риск при установке пакета, купленного в
розничной продаже и произведенного известной фирмой,
минимален по сравнению с риском при загрузке самой
новой игры, свободно распространяемой в Internet.
Установка электронных распределительных каналов для
приложений (JavaScript и кода Java) требует принятия
новой технологии и процедур, а также обучения
потенциальных потребителей.
Компьютерная промышленность движется к
назначению цифровых сигнатур разработчиков и к созданию
подписанных аплетов, способных определять
безопасность для JavaScript-кода. Идентификацией JavaScript-
разработчика будет, вероятно, передача на Web-браузер
цифровой сигнатуры, добавленной в конце файла
сценария. Пользователи, имеющие более новые браузеры,
на основе полученной сигнатуры смогут решать,
принимать ли загрузку кода с сайта. Рисунок 35.1
показывает типичное диалоговое окно, отображающее
информацию, которая содержится в цифровом сертификате.
д....-. - '■',-... .:=..; |.-. - г-.- - ■ j-o ,-г ■■! - -. ,'"^;-; - -; -■ '--•,-'.;" - -.у .- ЗРЧ
Ч**}*Ш$ ~Vji1Siti*i3*jlt/fi:L,d,-*luiJ3
С^£ lu"™ uptJ'iK ' £.' "is?""
'**& „=■■'■
■ *а*№*
" >«,«*«»*.,■ l»4»lft "««"' t't»'iii *■■■.
:": OUUfAp. Тк"№-4г"Ъ»|Э"'ПРТ1АСи*е!|31 d^UCTLI
= ;=*fi( *«-.. T* >*№**:^ЛИчЧ1ПТ*1»^лмг'Л* *J4=
! ШЧиа-'иВ^СггРЕлГЯЫЯАЕ, *"j-UKbVEIF».1ivJ*!M, »
' iff г»>?,гя"ДПТ« «№?р YU»' -*rtl(4m":
' VWir1 В M> WU И R HOI ru» ■, £ tXttTttt-
-.-■ntl «. In a?»H..i>tft£».biBUxi"nt rrtf .*".'j
iriivt.iJliUkp^i^Mri'jfctri» л1яЬц ¥■■" '■"
; >».*.• .IIV ' = ' '- -
ikf--« r. -. . -
РИСУНОК 35.1. Типовой вид цифрового сертификата.
Шифрование используется для предотвращения
изменения передаваемых данных в пути. Слой
безопасных сокетов (Secure Sockets Layer, SSL) и протокол
безопасной передачи гипертекстов (Secure Hypertext
Transport Protocol, SHTTP) гарантируют, что
фрагменты JavaScript-кода в процессе передачи не изменялись.
Наконец, проверка исходного кода — критичный фак-
avaScnplu безопасность в Web ШКТЯ
Глава 35 ^££f
тор для обеспечения безопасной среды. Проверки на
вирусы расширены и устанавливают, что JavaScript-код не
содержит никаких опасных подпрограмм.
Стоимость и сложность мер безопасности,
осуществляемых для защиты компьютерной системы
пользователя, должна учитывать затруднения, налагаемые их
существованием. Ниже приводится список областей
уязвимости машины клиента при выполнении кода
сценария:
Изменение файловой системы
• Чтение/запись в файл
• Чтение/запись системной памяти
Отправка по сети приватной информации
• Связь с другими сетевыми ресурсами
Выполнение/завершение программ на локальном
компьютере или внешнем хосте
Использование чрезмерных системных ресурсов
(атаки типа "Отказа в обслуживании")
• Авария программы хоста (Web-браузера)
Языки программирования создавались, чтобы
предоставить разработчикам инструментальные средства для
конструирования приложений. Для обеспечения мер
безопасности, связанных с выполнением кода у сетевых
клиентов, компания Netscape разработала JavaScript, не
содержащий многие функции традиционных языков
программирования. Отсутствие некоторых
возможностей обеспечивает в Web еще один уровень защиты от
атак, однако препятствует созданию изящного
содержимого приложения. В этой главе рассматриваются
возможности JavaScript- и Java-кода по нарушению
безопасности, а также шаги, которые можно предпринять в
плане предотвращения атак подобного рода.
Концепции безопасности в клиентской
части JavaScript
Наиболее распространенная в настоящее время
опасность на локальных машинах, имеющих доступ в Internet,
связана с выполнением у клиента удаленного JavaScript-
кода. Использование клиентского JavaScript допустимо
при условии выяснения источника документа.
Существование HTML-дескриптора <SCRIPT> указывает на
то, что данная страница содержит клиентский код, а
необязательный атрибут дескриптора LANGUAGE=
"JAVASCRIPT" определяет, что страница содержит код
на языке JavaScript.
JavaScript-код может быть встроен в исходный
HTML-документ либо находиться в отдельном
файле, на который ссылаются при помощи другого
необязательного атрибута дескриптора <SCRIPT> —
Избранные программные технологии
Часть V
SJHC="javafile.js' Если выполнение JavaScript в данном
Web-браузере разрешено, сценарий может
выполниться немедленно после загрузки страницы и ее
обработки с помощью интерпретатора сценариев или JIT- (Just-
In-Time) транслятором. Некоторые браузеры содержат
опцию предупреждения пользователя прежде, чем
сценарий начнет выполняться и предлагают пользователю
возможность выделить определенные заслуживающие
доверия сайты.
С точки зрения традиционных программистов
настольных систем в настоящее время безопасность при
выполнении клиентского JavaScript обеспечивается
драконовскими мерами. При выполнении в Netscape
Navigator на JavaScript-код накладываются следующие
ограничения:
• Отсутствие возможности читать или записывать
файлы.
Отсутствие доступа к информации файловой
системы.
JavaScript не может выполнять программы и
системные команды.
• JavaScript не может подключаться к другим
компьютерам, кроме той машины, из которой аплет был
выгружен.
• Ограничения доступа к данным <FORM>.
JavaScript-приложения не могут сохранять
пользовательскую информацию на локальном жестком диске,
кроме как через механизм cookie-наборов, связь с
подключаемым модулем и одной кодовой уловкой. Уловка
основана на передаче информации вспомогательному
приложению. Если пользователь указал вспомогательное
приложение для М1МЕ-типа, JavaScript-код может
открыть окно сообщения и вывести информацию о
вспомогательном приложении. Пользователь тогда сможет
явно сохранить информацию на клиентской машине с
помощью опции вспомогательного приложения File -*
Save. На рис. 35.2 показано, что происходит после
передачи данных notepad.exe на примере кода test_stream
Следующий код описывает функции, необходимые для
выполнения такой операции:
function fcest_stream()
"(
msgwindow = window.open("","hiwin","");
msgwindow.document.open("text/plain") ; II или
// text/sams для определения нового MIME-типа
msgwindow.document.write("JavaScript data, save
«•to sick drive \nA, 100, 351л");
II вьпести какой-то текст
msgwindow.document.write("Choose File 1 Save to
"•create a data file") ;
msgwindow.document.close();
msgwindow.close() ;
>
ЕЙ. Ш- ■ И*
Save Info to disk ■A.lnQ.DIChoose Flle|Sauc to save data File
-|3I x|
•_ч — «g
РИСУНОК 35.2. Загрузка юшенту данных из JavaScript.
ПРЕДОСТЕРЕЖЕНИЕ
Если в document.open передается параметр (mime-
type), определяемый как "Ask User" или "Save" в
подменю "Helper", сценарий не сохранит информацию и
сгенерирует ошибку Out of Memory.
Поскольку document.write в настоящее время не
может записывать null (\0) в поток данных, в этом
примере используются только двоичные файлы.
Правильное понимание клиентских ограничений,
которые могут затрагивать операции сценария,
критично для доступа кода сценария к информации о среде
пользовательского браузера. Сценарий может
произвести запрос класса navigator, чтобы выяснить вид
системной платформы или версию и тип браузера. Подобным
же образом можно получить список
зарегистрированных MIME-типов и подключаемых модулей. Свойства
navigator предназначены только для чтения и поэтому
не требуют принятия дополнительных мер
безопасности. Системные свойства, которые могут быть
получены за счет доступа к классу navigator, сведены в табл.
35.1.
Таблица 35.1. Свойства класса navigator.
Имя свойства
Описание
navigator.appCodeName
navigator. appName
navigator.appVersion
navigator. mimeTypes[]
navigator.plugins[]
navigator.userAgent
Кодовое имя браузера
Приложение браузера
Версия браузера
Доступные MIME-типы
Установленные подключаемые
модули
Строка HTTP agent
ПРИМЕЧАНИЕ
Строка HTTP agent отправляется серверу в течение
HTTP-запросов. Как Netscape Navigator, так и Microsoft
Internet Explorer обеспечивают доступ к классу navigator.
JavaScript не используется для создания приложений,
ответственных за управление доступом. Поскольку
пользователь может просматривать весь JavaScript-код в окне
исходного документа (или фрейма), совершенно
несложно вскрыть алгоритм защиты. Все файлы,
загруженные с помощью необязательного дескриптора исходно-
го файла, доступны для пользовательской загрузки и
шифрования.
Атаки на службы
Атаки на службы приносят наибольший ущерб,
поскольку пользователь не может завершить
выполняющийся JavaScript-код. Атаки на службы могут
заблокировать пользовательский интерфейс и потребовать,
чтобы пользователь завершил сеанс браузера. Наиболее
частыми атаками являются:
Переполнение стека
Бесконечные циклы
Бесконечные модальные диалоги
Использование всей доступной памяти
Переполнение стека
Состояние переполнения стека — наиболее простая в
плане предотвращения атака на службы, которую
легко перехватить всеми браузерами. В этом случае
отображается окно ошибки JavaScript с сообщением "Out of
Stack Space or Stack overflow in function_x" (см. рис.
35.3). Приведенный ниже код демонстрирует, как
создавать переполнение стека, многократно вызывая
рекурсивную функцию:
<НТМ1.ХНЕДР>
<ТШ,Е> Create Recursive Function Call
Co^dition</TITLE>
<!— Файл lockstack.htm -->
<SCRIPT>
function stack_lockup()(
stacfc_lockup() ;)
< SCRIPTX 'HEADXBODY>
Entering Recursive Function Call
<SCRIPT LANGUAGE="JavaScri->t">
//<!— комментарий, который обеспечивает
//невозможность отображения кода в браузерах,
//не поддерживающих Javascript
stacy lockup() ;//эта строка выполняется
// немедленно после загрузки документа не
// забывайте использовать HTML-комментарий —>
</SCRIPTX/BODYX/HTML>
|g:..- Ч. - -,. '■ ■:>>■.-. ,.: .,:г,Л ., ., ■■;:■--■■' ,Ж-. ,з*Щ*Н
it т ■ ■ .'.*•. л\=:,.=
JoiKScripiEiroB-ifilcjj v i iliiw9-
■ vcrffow in stack * <v-
i '=
i 5":
РИСУНОК 35.3. Окно ошибки Netscape Navigatompu
переполнении стека.
avaScript ибезопасность в Web ШШ9Ш
Гла^ 35 h£U
Бесконечные циклы
Бесконечные циклы — головная боль для всех
программистов, и разработчикам JavaScript-кодов не избежать
этой участи. Следующий кодовый фрагмент подвесит
браузер:
for(var i=0;;i++)
document.write("End this message");
ПРЕДОСТЕРЕЖЕНИЕ
JavaScript-код, выполняющий бесконечные циклы,
блокирует все окна браузера, включая окно загрузки
файлов. По утверждению Netscape, JavaScript-код
должен завершаться после выполнения 100000 проходов
цикла, а пользователи должны иметь возможность
нажать на кнопку "Stop". Однако, Я ни разу не замечал,
чтобы браузеры выполняли второе условие.
Бесконечные модальные диалоги
JavaScript-код, многократно отображающий сигнальные
окна, может служить примером атаки методом
бесконечного модального диалогового окна. Следующий
фрагмент кода подвесит пользовательский интерфейс
браузера:
for(var i=0;;i++)
alert("Why can't i kill this script");
Использование всей доступной памяти
Netscape Navigator не ограничивает объем памяти,
которую может распределить JavaScript. В конце концов,
эта атака переполняет виртуальную память и
замедляет машину:
for(var i=0;;i++)
str = str + "why doesn't everyone play nice";
В большинстве своем такие атаки очевидны и
могли бы быть остановлены, если бы пользователь имел
возможность завершить выполнение сценария
(особенность, в настоящее время исследуемая Netscape). Более
изощренная атака основана на постепенном разрушении
службы. Код-преступник на JavaScript не занимает
машину, а только накапливает ресурсы в одной точке так,
что все другие окна браузера кажутся застывшими.
Проблемы Netscape Navigator 2.0
ПРИМЕЧАНИЕ
Поскольку Netscape 2.0 и Internet Explorer 3.0 в
настоящий момент не особенно популярны, многое из
приведенной ниже информации устарело.
Браузер Netscape Navigator 2.0 демонстрирует
консервативный подход к уравновешиванию потребностей
разработчика с потребностями защиты пользователя
путем введения мер безопасности. Так как большинство
Избранные программные технологии
дыр в защите в более поздних версиях Netscape Navigator
было устранено, корректный JavaScript-код,
разработанный для версии 2.x, часто не выполняется должным
образом в более поздних версиях.
Баланс между приватным и общим доступом к
JavaScript-информации в Navigator 2.0 был вполне ясен.
Navigator автоматически предотвращал доступ сценария
из одного сервера к свойствам документов, постоянно
находящихся на другом сервере. Эти меры
безопасности не допускали, чтобы сценарий выбирал приватную
информацию, которую пользователь не хотел бы
обнародовать. Начиная с версии Navigator 2.0, появилась
возможность низкоуровневой перезаписи кода,
проблемного с точки зрения безопасности. Наиболее
важно здесь то, что правила, связанные с согласованием
сценариев разных серверов, были ослаблены и
оформлены в виде новой методологии — преднамеренного
искажения данных.
Необходимо знать наиболее важные ошибки в
версии Netscape Navigator 2.x и модифицировать браузер,
используя самые последние его обновления. Netscape
исправил большинство ошибок в версиях 2.01 и 2.02. В
основном, это касалось ликвидации дыр в защите,
связанных с выполнением Java. Было бы неплохо, чтобы
пользователи и разработчики воспользовались как
можно более новыми версиями Netscape Navigator.
Более поздние версии Navigator
Основная модификация интерпретатора JavaScript
изменила определение допустимого кода по сравнению с
более ранними версиями. Меры безопасности для
браузеров Netscape постоянно изменяются с учетом
развития правильного равновесия между возможностями
языка и уровнем пользовательской секретности.
Операция вызова document была изменена с целью
обеспечения гарантии того, что JavaScript-код не будет
записываться поверх исходного сценария. Наличие
вызовов функций document.open или document.write
функции вне дескрипторов <BODY>, не ссылающихся на
новое окно, приводит к ошибке. Ниже приведен
пример недопустимого сценария:
<SCRIPT LANGOAGE="Javascript">
var i;
function initialize_app()
\
i = "1";
)
function setup ()
{
document.open();
document.write ("My test app equals",i);
initialize_app();
document.close();
j
</SCRIPT>
<body onload="setup()"></BODY>
В данном случае браузер создает новый контекст
документа и тем самым сбрасывает старый JavaScript.
В результате выводится сообщение об ошибке
"initialize_app is not defined" (initialize_app не
определена), поскольку JavaScript-интерпретатор больше не
имеет доступа к функции. Необходимыми для обеспечения
безопасности действиями в данном случае будет либо
запись всего текста после завершения функции onload,
либо же запись нового документа в другой фрейм.
Следующий пример демонстрирует первый из упомянутых
вариантов:
<SCRIPT>
function setup ()
(
initialize_app();
</SCRIPT>
<BODY onload="setup()">
</BODY>
<SCRIPT>
document .write ("My test app equals", i)
</SCRIPT>
Преднамеренное искажение данных
Концепция искажения данных была помещена в язык
как механизм совместного использования данных для
окон, открытых из различных серверов. Искажение
данных можно осуществить, устанавливая системную
переменную NS_ENABLE_TAINT в любое значение.
Когда искажение данных разрешено, все JavaScript-
объекты и свойства становятся общедоступными. Данная
возможность необходима для совместного использования
разными окнами информации от разных серверов. Окна
могут получать "чужую" информацию от других
доступных окон, но когда эта информация посылается на
сервер, всплывает диалог подтверждения, позволяющий
отменить или подтвердить операцию post. Если
системная переменная не установлена, ссылки на данные
форм на других серверах будут генерировать сообщения
об ошибке "access disallowed from scripts at URLlMti to
documents at URL2.htn. (доступ из сценария по URLl.htm
в документы по URL2.htm запрещен).
СОВЕТ
Даже когда искажение данных заблокировано, окна
имеют возможность обращаться к функциям,
загруженным в другие окна с других серверов. Например,
framel, загруженный cserverl, может вызвать
функцию frame2, загруженную с server2.
JavaScript предоставляет функции, позволяющие
устанавливать или удалять искажение данных в
объектах. Функция taint() возвращает искаженную ссылку на
свойство, a untaint() — ее неискаженную копию.
Например, следующий код возвращает копию приватных
данных, которые можно отправить на сервер через URL
либо операцию POST формы:
unmarked =
untaint(document.forms[0].element[0].value);
ПРВДОСТЕРЕЖЕНИЕ
Когда системная переменная NS_ENABLE_TAINT уста-
новгена, JavaScript-код в одном из окон видит все
свойства документов из других окон, включая
приватные данные и информацию списка посещений в
течение данного сеанса.
Механизм искажения в настоящее время содержит
много ошибок, связанных с безопасностью, и должен
применяться весьма осторожно. Многие разработчики
создавали код, обходящий механизм защиты за счет
обновления данных через последовательность
манипуляций с ними.
Internet Explorer 3.x
Поскольку возможность выполнения JavaScript- и Java-
аплстов только недавно была включена в Internet Explorer
Microsoft, независимые эксперты еще не успели
подготовить широкий обзор его механизмов безопасности.
Обзор интерфейса приложения показывает хорошо
продуманный подход к безопасности. Меры обеспечения
секретности и регистрация аплетов были встроены в
браузер и работают с пользователем, гарантируя, что
информация будет передаваться на сервер только явно.
На рис. 35.4 показано диалоговое окно, содержащее все
возможности по обеспечению секретности, доступные
в Internet Explorer.
General | Connect! 1 | №vigati-.i I Programs Security | Advanced I
Privacy
jdfVj г ]Wam me ^orejend .Joveranopen jrmection
■mi] Г
r
Г Warn me before crossing zones
W Warn me about mvaSd site cerldicales
Warn me berore accepting "cookies"
Orlrhceta
f~—I Use certificate la [ sArvery identify sites, publishers and
l^&l yoursel.
Personal.. 1 SjtBs... I PubEshert I
Active content
i can choose what дге ot software Web ей can
download and run on your """«itjuter.
P AUow dotwtbaaino of active content
W Enable JtveX cortrors and plug ms
t]5 flunAciiveX scrrpls
IV Enable Java programs Safely Level |
| OK ] Cancel |
РИСУНОК 35.4. Возможности обеспечения i езопасносп-i в
Microsoft Internet Explorer,
Интерфейс приложения также включает
возможность ограничения загрузки кода только серверами,
заслуживающими доверия. Эта особенность основывается
на использовании сервером сертификатов безопасности
avaScriptu безопасность в Web гУУП
Глава 35~ £££]
для идентификации при просмотре сайтов,
заслуживающих доверия. Internet Explorer имеет диалоговое окно,
которое может отображать сайты, которым доверяет
клиентский браузера (см. рис. 35.5).
WrndfiitfS Sc.Nwate Security EJQ
Trusted I tbrisbe and I uerrs or Oedentiats
lJi=^:] You liavedesignal I the following «-'twa" pubfehas and ctedantials
V-=JV agencies as rthworthy. Tl I means YtfWindowJ eppbcatioi can
rnsi iland' esc^w^ircm these pushers or publishers cetbfred by
the ■ agencies wrinoul rekrng you first.
Г~ Consider all commercial sottwa pubishers
trustworthy
| OK | Cared |
РИСУНОК 35.5. Диалоговое окно Windows Ъ/twa Security,
Максимизация надежности защиты
Прежде чем отправляться в плаванье по неизведанным
водам, можно предпринять шаги по уменьшению
воздействия атак на безопасность из-за "предательства" Java-
ил и JavaScript-кода. Можно определить, какой уровень
защиты необходимо задействовать, опираясь на объем
доверия для данного источника. При посещении новых
сайтов (либо уже просмотренных сайтов после запроса
virus hackers) желательно полностью удалить
возможность выполнения языков создания сценариев в
браузере. Кроме того, сетевой администратор может выбрать
нисходящий подход к безопасности, отключив
выполнение Java-классов, полученных из Internet. Сетевая
безопасность может конфигурироваться для удаления
возможности передачи файлов Java-классов через
прокси-сервер во внутреннюю сеть. Если отслеживаются
сводки и советы по безопасности, должно быть хорошее
представление о риске обхода сетевой защиты.
Безопасные сеансы и цифровые сигнатуры
Как упоминалось ранее, безопасные сеансы
инициируются браузером; при этом устанавливается
шифрованный поток передачи данных между сервером и браузером.
Шифрование основывается на цифровых сертификатах,
хранящихся на сервере. Дальнейшая защита
достигается за счет использования цифровых подписей для
каждого файла, загруженного клиенту. Авторитетные службы
проверки, такие как Verisign, трудятся бок о бок с
разработчиками браузеров с целью создания структуры для
добавления цифровых сигнатур в файлы сценариев и
аплетов. Более поздние версии Netscape Navigator и
Internet Explorer, в дополнение к экранным визуальным
Избранные программные технологии
Часть V
подсказкам, обеспечивают информацию о текущем
уровне безопасности документов или фреймов.
Для просмотра уровня безопасности документа (или
фрейма) в Netscape Navigator выберите View -» Page Info
("Document Info" в старых версиях) или View -> Frame
Info. Строка Security дает текущий уровень
безопасности. На рис. 35.6 показана информации о безопасности
в Netscape Navigator.
Для просмотра уровня безопасности документа (или
фрейма) в Microsoft Internet Explorer выберите File ->
Properties, а затем — вкладку Security, либо щелкните
на кнопке Certificates, в зависимости от используемой
версии Internet Explorer. На рис. 35.7 показана
информация о безопасности в Internet Explorer.
Ifelril fctiptotwonh cotiv'
File MIME Tjpa: tatfhlnJ
Local dio rae: OOVWVH
Lbj( Modified: Monday. 29-Jii-M 1744l0bcattmK
LaitModilW: ttondar. S9-Jul-96 2104 10 GMT
CouUitLmgik K07
tipin ■ No date ^vrn
СЬапае НО-Б859-1 (debulO
Senuity: Пасм a secure documeratrUKUKsarDednmi-erade eocrypiionkeyfttfedfortJSexport
ШМ-Еармг, 128bawth40«crpft
Гпйкв!*: ПЬ OitiarakatatiMi w TO OriuVatenibawdar:
яЯигаЛк luteal *-em StrnrCatbfoilion A,th<HAj
(1ALT Tadanlaaia* Ine .■ DiUS«ciailj,lnc
" wAhaMyWiaiiUS US
Serial "umber: 02?2и0 '№
TUf Certificate U valid frr.M Man Jul 23.1996 to Sun Jaa 26,1997
Certificate Eineaif rint;
ТА.а1В1<Т^13ППРИТ7Т111М|ВД1теГ1Л
РИСУНОК 35.6. Информационное окно Netscape Navigator,
сообщающее о защищенности документа.
Отключение языков создания сценариев в
браузере
На уровне индивидуального клиента наиболее
эффективный способ защиты пользователя от повреждения
кодовых фрагментов должен просто убирать
возможность выполнения браузером кода создания сценария.
Недостаток подобного подхода состоит в том, что
тогда из Web-сайта будут удалены многие возможности,
поэтому Web-сайт не сможет работать, как
задумывалось. Эти параметры следует использовать только при
посещении непроверенных сайтов.
JavaScript
Для отключения JavaScript в Netscape Navigator 2.01
выберите Options- Security Preferences и вкладку General.
Отметьте флажок Disable JavaScript (Запретить JavaScript)
и затем щелкните на кнопке ОК.
ПРИМЕЧАНИЕ
В Netscape Navigator 2.0 отключить JavaScript нельзя.
Gonad [5*--"»/l)
•?a£L f|Г1в РВДе you ate nneniiy viewing is teens,
**([ Моим***, ebcUit! p.'tfecy«rtfcale»*lbe*how
**— below
Certificate Hormafktn:
SHJfttin*>*№»a *
L-i%sfawgb
0-GALT Technologw* Inc
CN^Mlwotf" gaK.com
IWUer
0-RSA Data Secui»- <Ve
Dtl-SecumSaYei L&iJKiti&ifriJboJy
ЕИасбч Date: 7/2Э&612 0000 AN
EKprafion Data 1 "» ц £ЗЗЗЩ
Secuity Protocol 51 г и
S-piatun- Type nwWDS
Enciyptionrype: RC4
Privacy Strength: Low(40 bite) _
J _T
| OK | Cancel
РИСУНОК 35.7. Информационное диалоговое окно Internet
Explorer, сообщающее о защищенности документа.
Для отключения JavaScript в более поздних версиях
Netscape Navigator выберите Edit -» Preferences (см. рис.
35.8) и выберите опцию Advanced. Удалите отметку на
флажке Enable JavaScrint (Разрешить JavaScript) и затем
щелкните на кнопке ОК.
К
■vVlcrti—W
V**
lilKlli/*! <!
WMllitssiAiu:
W£|
i F [rMfad^a
: F ЕаАЬ^Л-к-!
1 С" |ft« Wit
1 Bari. t» Inij «ЧРЧЧГд П*П
С*«.п,1..Х«?
QfridfJ' fcr —
,ca.
I a* I
]£
vwnBvutuLjUrliausi • с »vi**i> tlati
РИСУНОК 35.8. Отключение JavaScript в более поздних «ерсиях
Netscape Navigator.
Для отключения JavaScript в [nternet Explorer 4 или
более поздних версиях выберите Tools -» Internet Options
и вкладку Security. Щелкните на кнопке Custom Level,
отыщите Active Scripting (см. рис. 35.9) и выберите Disable.
В Internet Explorer 3 отключить JavaScript нельзя.
Java
Для отключения JavaScript в Netscape Navigator 2.01
выберите Options -» Security Preferences и вкладку General.
Отметьте флажок Disable Java и щелкните на кнопке
ОК.
avaScriptu безопасность е Web
Для отключения Java в более поздних версиях Netscape
Navigator выберите Edit -» Preferences (см. рис. 35.8) и
выберите опцию "Advanced". Снимите отметку флажка
Enable Java и затем щелкните на ОК.
Для отключения JavaScript в Internet Explorer
выберите Tools -» Internet Options и вкладку Security.
Щелкните на кнопке Custom Level, отыщите Java.
Выберите Disable, а затем щелкните на кнопке ОК. На рис.
35.10 показано диалоговое окно Internet Explorer,
которое используется для запрещения Java-программ.
ьими" жу*штшшАм..я1 .ли—
13
Щ
Focus nil Ja*:-
5surIi_f,o«u
© ГлЫ
Л^Т*гч
t£| Ас1гл кч*и
оИВДЗ
О Ем»*
ОПмр
О DrtiH»
J) i<-4**4 djjx* «fed
О СчЫЛ
QfruUt
11
^
J
, ^
^ ы-
Sgrti P*mmJi
11*чч*"_"<п»чч1
Tumid»-Г™
"3. у I;
к""'| СшЩ |
з:ши
—
IjAm^i КчЯнкЬ
*Afcw U f ivtMiHi
Дуч"** ■**_*:.
"Г~4йь«»«*-г
РИСУНОК 35.9. Отключение JavaScript в Internet Explorer.
r' " "■ '■■■ Щ ii
AtXJut.c ™Sc
ПсМ№*йК(ЙпМ1|11|М
EFT
Foci" on 'a1
Contort ^siLEKlttdtt)!-1 ,
Shwiw Jhkb£J«lb3ib*i&lei
r
1
1
h*mv.
О I***
О Efuth
О »Чш*
. to.
U J«v4|Hft-*»
itV IFFf^V/TB
Pi :**
О -j&Muhty
fc] ЫциДтно*
jjj <iuin d*i huKii ш
e»«*
iuiUiM
ii'
JJ:
. =1
1 4
t|: 'jaga.-.^
"J>J4:.j ;|;*^*Л' '
X**a,«t*jf*n
РИСУНОК 35.10. Отключение Java в Internet Explorer.
Фильтрация через брандмауэр
Брандмауэры (firewall) и прокси-серверы обычно
представляют собой первую линию защиты между Internet
и внутренней сетью (WAN, LAN или удаленной
машиной). Сетевые администраторы могут конфигурировать
маршрутизаторы брандмауэра с целью фильтрации
сетевого потока данных, базируясь на различных парамет-
Глава 35
pax, и таким образом гарантировать, что пользователь
не сможет загрузить файл, вызывающий нарушение
безопасности. Однако, уровень фильтрации должен быть
определен с учетом баланса выгод, достигаемых при
более высоком уровне безопасности, и стоимости
реализации такого решения. Реализация решений по
безопасности для маршрутизатора или прокси-сервера вообще
дорого обходится в плане затрат ресурсов и финансов,
поэтому следует предварительно убедиться, что
подобного рода защита действительно необходима.
HTTP-запросы используются клиентским браузером
для запрашивания фрагментов JavaScript и Java-кодов.
Поскольку HTTP также используется для нормального
функционирования Web-браузера, прокси-сервер не
может запретить доступ ко всем HTTP-запросам,
поскольку это бы привело к недоступности Web для
браузера. Технология фильтрации (которая может
использоваться для удаления загрузки Java) должна фильтровать
URL для блокировки всех файлов, имеющих
расширение .class или .cla. Фильтрация JavaScript-кода более
сложна, так как исходным файлам разрешено
использовать любые расширения, а кодовые фрагменты могут
быть внедрены во внутренние Web-страницы.
Информационные ресурсы о безопасности
для JavaScript и Java
В Internet имеется множество сайтов, содержащих
информацию по проблемам безопасности. Сбор
информации об актуальных мерах безопасности — неплохое
начало для принятия правильных решений о риске,
возникающем при использовании последних
технологий.
Наиболее точная информация содержится на
следующих Web-сайтах:
• Netscape: http://developer.netscape.com/docs/manuals/
indcx.html
Информация, связанная с продукцией Netscape: Sun на
http://java.javasoft.com/sfaq/
Информация, связанная с Java: CERT на http://
www.cert.org
• Независимые консультации о текущих нарушениях
безопасности: CERT FTP на ftp://infb.cert.org/pub/
cert_advisories
• Поисковый каталог для файлов, содержащих слово
Java: Safe Internet Programming на http://
www.cs.princeton.edu/sip/. Этот сайт создан
исследовательской группой Принстонского университета,
которая занимается расширением Internet-сценариев.
Именно они обнаружили самые последние проколы
в защите Java.
Избранные программные технологии
Часть V
Концепции безопасности в серверной
части JavaScript
Функциональные возможности Web-серверов можно
расширить через выполнение подпрограмм JavaScript и
Java, а также CGI-программ и серверных модулей.
Серверное расширение JavaScript применяет существующие
возможности языка JavaScript для создания
приложений, которые могут обращаться к базам данных и другим
ресурсам, постоянно находящимся на сервере.
Возможность выполнения серверного расширения JavaScript на
сервере Netscape в настоящее время описана как
технология LiveWire и допускается через администратора
сервера. На рис. 35.11 показано окно Enterprise Server,
которое используется для активизации серверного
расширения JavaScript (LiveWire).
на
W,-.
хр " iprise 4eiva'"2.
га
• V I,
I dm.
iAcUtate iJi'eWire
fl Litr^ar Ai n ,Лгта« ' Щ ш
:jietl¥«l.c t№ LLvrViS* Ч1р11оя11чл г
BtOTIro ■•kMJllitEMK irrni p<u«vdt4 far I Ivmixi JljipJU0'
t
— Л
.... a?
РИСУНОК 35.11. Активизация серверного расширения JavaScript.
Важно знать, что возможности серверного
расширения JavaScript должны отображаться на определенные
каталоги на сервере. Потребность санкционирования
каталогов сервера, выполняющих серверное расширение
JavaScript, помогает защитить сервер, изолируя
области, которые могли бы вызвать нарушения
безопасности. На рис. 35.12 показано окно сервера, используемое
для активизации LiveWire для указанного подкаталога
сервера.
Технология LiveWire предоставляет четыре новых
объекта JavaScript для применения на сервере: request,
client, project и server. Объект request содержит свойство
request.ip, которое позволяет серверу определять IP-
адрес, от которого исходит клиентский запрос. Этот
объект используется для проверки заслуживающих
доверия клиентов, которым может быть предоставлен
доступ к конфиденциальной информации. Объект
глобальных данных приложения project, должен быть
заблокирован прежде, чем будут изменяться
временные шачения данных, иначе целостность переменных
и счетчиков приложения не будет синхрони шрована
между клиентскими процессами.
ЮН
-Tf-
bssx
f йииий
&ОДОС
t& Poena tm
■ - -яь
. hvtat
bsSnwa
1 Wh
a JIit<ivM{
1_£эУ Йид* кн. 'j.<j*. ■■
J" *--?-^»-- ЗГ- JSH-■■'-*» — _"-
ir-r —■
/Additiotuil Document Dirta loti
Add m ptUii» ■"■:
=>1*£.ть. u^nci.i A*ft*n^#***~ybampJe5^»f»1iV
Ayiat.SJ*Iri Ll^Vlfre ^_
Larrpat AdtlrtKHm] Euvrrnin
- ■ ^
"
-
_ -i!.
РИСУНОК 35Л2.Акпшвизация катсиюгов LiveWire для
выполнения JavaScript.
Наибольшего внимания требуют меры безопасности
для возможностей серверного расширения JavaScript
читать и записывать информацию непосредственно на
жесткий диск. Определенным образом
отформатированные данные могут часто разрушать программы, которые
читают или записывают файлы. Код серверного
сценария необходимо тщательно протестировать, дабы
обрести уверенность, что перед записью на диск данные
пользователя переводятся в допустимый формат. Также
обязательно, чтобы код серверного JavaScript содержал
механизмы закрытия файлов, учитывая, что многие
процессы выполняются на главном сервере. Наиболее
простой механизм блокировки предполагает
переименование файла перед открытием его для файлового ввода-
вывода. Во всех операционных системах команда
rename, как и следовало ожидать, будет элементарной
операцией. Следующий код иллюстрирует это г
принцип:
while(rename(,)) // переименовать файл для
// целей блокировки
// заблокировать доступ к файлу
else
{
/ / выполнить файл о вый ввод / вывод
rename ( ,) ; // восстановить оригинальное
/ / имя файла
}
Серверный код не должен записывать файлы на диск
в общедоступные каталоги, для которых установлена
возможность запуска. Обычная хакерская уловка состоит
avaScriptu безопасность е Web
в применении заслуживающей доверия серверной
программы для создания файла на сервере, который позже
может использоваться для атаки. Например, CGI-npo-
грамма, которая загружает текстовые файлы от
клиента на сервер, может послужить для создания
выполняемого файла сценария. Когда атакующий обращается к
загруженному файлу через Web-браузер, серверный код
выполняется и может натворить бед на сервере.
Администраторы Web-сайтов и разработчики кода
должны знать, что серверный JavaScript вполне может
разрушить промышленный сервер. Чрезмерное
использование системной памяти, некорректная блокировка
объектов, бесконечные циклы и неверный файловый
ввод-вывод может привести к аварийному останову
сервера. Весь код сценария должен быть полностью
протестирован на сервере динамически перед запуском его
в работу. Кроме того, код потребуется опытным путем
проверить на возможные тупиковые ситуации.
ПРЕДОСТЕРЕЖЕНИЕ
Клиентское расширение JavaScript может попытаться
обратится к любому порту на исходном сервере.
Потребуется выполнить проверку безопасности, которая
бы гарантировала, что между сервером и Internet
присутствует надлежащая сетевая защита.
Интерпретатор Java необходимо явно активизировать
для каталогов сервера. Управление приложениями
сервера используется для определения каталогов, которые
могут выполнять Java-модули.
На рис. 35.13 показана страница управления
приложением, используемая для активизации Java для
определенного подкаталога сервера.
|И- ■-:..■/
-ад
;<* ".'
1 .« 1 . .
« 4. v..
1 . , „
1 . ,
l ^
i ;;
ЛхДУЪьтлЩ* 1ач*
\ctivalcJa\a
..lot lv at» n+ Лмгш. tn.ftrp"'*'"»
L*t*ei адоХы ait*qtmt>x
icj-- Ы гл Ч\\*аущф*уг*Ааг0*т
}
:
РИСУНОК 35.13. Активизация каталогов Java на сервере.
Java и безопасность
Язык Java предлагает намного больше возможностей,
нежели JavaScript. Более поздние версии Netscape
Глава 35
позволяют разработчику реализовать смешанные Java-
и JavaScript-коды внутри Java-аплетов (технология
LiveConnect). К тому же, JavaScript может напрямую
обращаться к функциям Java-аплетов, передавая
параметры и получая возвращаемые значения. Эти два
языка могут использоваться в тандеме для создания
исчерпывающих решений для удаленных клиентов.
Знание истории Java важно в плане преодоления
возможных проблем безопасности, связанных с его
текущей реализацией. Язык копирует C++ во многих
отношениях — он имеет тот же синтаксис, похожие
ключевые слова и поддержку объектно-ориентированной
методологии, включая и наследование. Java отличается
от C++ в том, что добавляет в язык гибкость и пытается
создавать более безопасную среду: код не может
подделывать указатели, сборка мусора осуществляется
автоматически, реализуется только одиночное наследование.
Машино-независимая структура Java изолирует
программиста от операционной системы целевой машины.
Основные стандартные блоки программирования
расширены предварительно подготовленными пакетами,
способными определять систему клиента и сервера.
Язык Java первоначально предназначался для
создания встроенных приложений на персональных
приборах (настольные телевизоры, персональные
коммуникаторы, карманные компьютеры и т. п.). Возможность атак
на эти закрытые системы намного ниже, чем при
соединении с самой большой общедоступной сетью с
открытыми стандартами.
Программный интерфейс приложения,
предложенный Sun Microsystems для языка Java, в процессе
общественной стадии тестирования был достаточно устойчив,
чтобы обрабатывать большинство задач, необходимых
в традиционных настольных компьютерных
приложениях. Цель состояла в том, чтобы разрешить
заслуживающему доверия браузеру или заслуживающей доверия
Java-среде обрабатывать непроверенные компоненты
Java-класса. Текущая реализация Java потеряла такое
разрешение, так как его механизмы безопасности не
соответствуют основным промышленным стандартам
безопасности для заслуживающих доверия систем. Сам
по себе язык Java не может считаться безопасным,
поскольку не имеет самых базовых компонентов
безопасной архитектуры.
Java не содержит основных механизмов
безопасности, таких как возможность проверки в загрузчике
классов в документ модулей, загруженных в процессе
атаки. Поскольку аплеть. могут существовать вне контекста
Web-документа, который их загрузил, аплет-жулик
может проводить атаку без того, что пользователь заметит
его существование. Определяемая пользователем
политика проверки должна быть доступна, что позволяет
регистрировать выполнение аплета, сетевой адрес аплета
и байт-код аплета.
Итдранные программные технологии
Часть V
Добавим, что реализации Java не доказали, что он
является безопасным языком, как предполагали его
создатели. Большинство подсистем содержат ошибки
защиты, которые не были полностью исправлены, что
приводит к повторяющимся сигналам об ошибках
защиты. Таблица 35.2 подробно описывает наиболее важные
из них, которые зарегистрированы Sun Microsystems на
странице Applet Security FAQ (http://java.sun.com/sfaq/).
Исследователи, которые обнаружили эти ошибки
защиты, публично заявили, что Java придется
радикально изменить, чтобы достичь их определения безопасной
среды. Атака с использованием незаконного приведения
типа успешно обходит механизм безопасного
приведения типа в Java. Успешные атаки на механизм
приведения типа позволяют Java-объектам подменять свой тип.
Разработка хакерами жульнического загрузчика класса
означает, что непроверенный код приложения
потенциально может быть загружен и выполнен из
непроверенного источника без ведома браузера.
Компоненты защиты
Механизмы защиты, управляющие Java-объектами,
реализованы на Java. При запуске рабочей системы
браузера не возникает никаких ограничений по защите.
Класс SecurityManager, контролирующий безопасность,
загружается из каталога, содержащегося в клиентской
системной переменной CLASSPATH. Такие
заслуживающие доверия файлы класса (MOZxxx.ZIP в Netscape
Navigator 2.0 и JAVxxx.ZIP в Netscape Navigator 3.x)
должны быть защищены частыми проверками на
вирусы и содержать пометку "только для чтения".
Верификатор байт-кода
Когда Java-класс выгружается из удаленного хоста, код
проверяется верификатором байт-кода. Этот важный
шаг гарантирует, что код Java соответствует известным
кодам операций языка и что стек операндов не подвер-
Таблица 35.2. Некоторые ошибки защиты Java.
гнут переполнению или потере значимости. Все
доступы к объектам класса проверяются на соблюдение
механизма защиты, определенного для членов объектов
(приватный, защищенный, общедоступный). Кроме
того, код проверяется на отсутствие каких-либо
незаконных преобразований данных. После того как
верификатор исполнит свою работу, код
преобразовывается рабочим Java-компилятором в машинный код.
Управление защитой
Класс SecurityManager используется рабочей системой
Java для доступа к разрешению управления
Java-классами. Поскольку SecurityManager реализован как Java-
объект, когда начинается выполнение, управление
безопасностью защищается системой Java-типов. Если
система типов доказала безопасность, и файловая
система не была поставлена под угрозу, SecurityManager
считается заслуживающим доверия классом.
Трансляторы Java отвечают за компиляцию
исходного Java-кода (файл с расширением .Java) в машино-
независимый байт-код (файл с расширением .class).
Байт-код передается по сети на локальную машину и
интерпретируется либо компилируется в
первоначальный код системой выполнения Java. Проверка байт-кода
Java является критическим шагом в определении
целостности Java-аплета. Таким же образом, как текущие
программы проверки на вирусы ищут незаконные
процессы и системные вызовы, байт-код проверяется на
отсутствие каких-либо атак на безопасность. Байт-коды
должны оцениваться в контексте их типов. Например,
тип SecurityManager должен иметь меньшее количество
ограничений по сравнению с типом, определяемым
пользователем.
Недостаток формального определения для системы
типов Java и необходимость полного анализа всей
рабочей последовательности программы приводит к тому,
что оценка выполняется текущими верификаторами,
сложными и ненадежными.
Дата
Проблема
Состояние
26 марта 199 г. Непроверенный код
22 июля 199 г. Принстонская атака загрузчика класса
2 июля 1996 г. Атака с применением незаконного приведения типа
18 мая 1996 г. Новая версия предьщущей атаки загрузчика класса
Апрель 1996 г. Атака разрешения имени URL
Март 199 г. Ошибка выполнения верификатора
Март 199^ г. Ошибка выполнения загрузчика класса
Февраль 996 г. Атака DNS
Исправлена в JDK 1.1.8
Исправлена в JDK 1.2
Исправлена в JDK 1.1
Исправлена в Netscape З.ОЬ4
Исправлена в Netscape З.ОЬ4
Исправлена в Netscape 2.02
Исправлена в Netscape 2.01
Исправлена в Netscape 2.01
Методы защиты аплетов предписывается
концепцией пространства имен (named space). Каждый Java-аплет
должен иметь уникальное имя, в зависимости от
источника, из которого он был загружен. Документация Java
утверждает, что пространство имен объектов системного
уровня имеет возможность совместного использования
всеми другими пространствами имен (аплетами), и что
загрузчик класса во время выполнения всегда ишет
список системных пространств имен, дабы уберечь
загруженный код от перезаписи системного класса. Стоит
добавить, что подделка пространств имен хеша,
которые 3' меняют жизненно важные системные
компоненты класса, такие как загрузчик класса, было одной из
первых ошибок защиты, найденных в Java. Ошибки
загрузчика класса были подробно задокументированы
исследователями Принстонского университета.
Ограничения защиты
Базовое подмножество языка Java было расширено за
счет многих важных пакетов классов, которые
уберегают программистов от повторного изобретения основных
интерфейсов. Реализация пакета может освободить
программиста от связанных с платформой проблем, но
также может ограничить доступ к некоторым компонентам
нижнего уровня. Определенная реализация Java
оказывает влияние на базовый доступ к машинным
подсистемам, ответственным за сетевую связь, файловому
вводу-выводу, доступу к памяти и системным ресурсам. В
настоящее время серверный Java-код имеет меньшее
количество ограничений защиты по сравнению с
клиентским Java-кодом.
СОВЕТ
В Java-коде сообщения об ошибках, включающие
термин Security Exception, указывают на нарушение
ограничений защиты.
Сетевая связь
Использование концепции совместной работы Sandbox
"песочницы" служит для ограничения возможностей
связи для кода аплета с другими машинами. Подобного рода
аплет может связываться только с сервером, из
которого он исходит. Ограничение кода "игрой только в своей
песочнице" — первая линия защиты от жульнического
аплета. Менеджер безопасности ограничивает сетевые
вызовы так, что они могут только открывать каналы
связи между клиентом и исходным DNS-адресом
аплета. Поскольку в вопросе проверки адреса методология
полагается на DNS-подсистему, компромиссы сервера
DNS, з свою очередь, сводят на нет эффективность
механизма безопасности.
Согласно документации, аплеты могут открывать
каналы связи с сервером через любой порт. В действи-
15 м"
avaScvipt и безопасность в Web VVV4
Глава 35 !■■
тельности, выполнение Java в Netscape устанавливает
недокументированные ограничения, определяющее
доступность разных портов.
СОВЕТ
Наличие аплета в наборе инструментов, который
делает запрос всех сокет-портов и возвращает
возможные каналы связи, экономит достаточно много времени
при определении портов, поддерживаемых конкретной
реализацией Java.
Файловый ввод-вывод
Текущие реализации клиентских расширений Java не
разрешают чтение и запись на жесткий диск клиента. На
клиентской машине вызовы для открытия, чтения,
записи и закрытия файлов генерируют уведомление
SecurityExceptions или IOExceptions. Приложение Applet
Viewer от Sun Microsystems использует файл управления
доступом, чтобы предоставить чтение и разрешение
записи на диск клиента. Вероятно, что некоторые
операции из этой схемы будут в будущем приняты новым
браузером Netscape. Как упоминалось ранее в главе,
серверное расширение Java может обращаться к
жесткому диску хоста для выполнения операций с файлами.
Доступ в память
В Java исходный код не имеет концепции указателей
памяти. Это существенно упрощает использование
языка и уменьшает количество ошибок кода. Поскольку
указателями не ссылаются на структуры данных,
много сторонников Java полагают, что он должен быть
более безопасным языком по сравнению с C++. К тому
же, программисты Java не могут подделывать
указатели на функции.
Системные ресурсы
Возможность блокирования системных ресурсов
является риском безопасности в Java. Например, в
реализации Netscape блокирование класса java.net. InetAclclress
приводит к блокированию всех новых сетевых
подключений.
Как Java, так и JavaScript — революционные языки,
которые помогают разработчикам Web-сайтов создавать
интерактивное содержимое. Однако, возможность
запуска удаленного кода на клиентских машинах должна
рассматриваться и с точки зрения потенциального
нанесения ущерба среде пользователя.
Цель сообщества поставщиков программного
обеспечения под Internet заключается в создании
заслуживающей доверия среды, в которой пользователей не
должно волновать, что действия могут повлечь за собой
разрушительные последствия. В идеале пользователь
также должен знать, что операция собирается
произойти, и иметь возможность предотвратить это.
^■■НН Избранные программные технологии
EittLI Часть V
Механизмы все еще развиваются с целью создания
более безопасной подключенной к сети среды,
интуитивно понятной пользователю. Меры безопасности,
инкапсулированные в JavaScript-код, еще не готовы к
использованию в критических средах, однако быстрый
рост Internet-технологий приближает реализацию
решений.
Резюме
Поскольку компьютерные пользователи выходят за
рамки настольных систем и связываются с деловыми
партнерами и друзьями по всему миру, проблемы,
связанные с компьютерной безопасностью и секретностью
становятся проблемами первостепенной важности. В
главе рассматривались клиентские области, которые
должны быть защищены от преднамеренных атак, и
было показано, как пользователи могут уберечь свои
машины при выполнении программ на JavaScript и Java.
Методологии безопасности пребывают в настоящее
время в состоянии разработки. Запуск удаленного кода на
клиентских машинах в текущих реализациях строго
ограничен, так как потребности пользователя и
разработчика сбалансированы мерами, направленными против
потенциально некорректного употребления. Знание
ограничений и особенностей текущей технологии
критично при установке требуемого уровня доверия и
распространении динамических и изящных приложений и
содержимого в Internet.
Приложение
ЧАСТЬ
В ЭТОЙ ЧАСТИ
А. Десять основных ресурсов в Web
посвященных JavaScript
Десять основных ресурсов
BWebf посвященных Д
JavaScript
Netscape DevEdge Online
http://developer.netscape.com
Это центральный Web-сайт компании Netscape для всех
его технологий разработки. Здесь можно найти
официальную документацию Netscape no JavaScript, а также
статьи и информационные бюллетени, отражающие все,
что Netscape делает в мире JavaScript. Сайт включает
следующие страницы:
• JavaScript Authoring Guide по адресу http://
developer.netscape.com/docs/manuals/communicator/
jsguide4/index. htm
• JavaScript Developer Central по адресу ht*p://
developer.netscape.com/tech/javascript/index.html
• Official JavaScript Language Specification по адресу
ftp://ftp.netscape.com/pub/review/jsspec.ps.gz
Технологии написания сценариев
Microsoft
http://msdn.microsoft.com/scripting/default.htm
Это главный Web-сайт компании Microsoft, содержащий
информацию по JScript и VBScript. Здесь можно выгрузить
самую новую версию сценарного механизма Microsoft,
а также найти документацию и примеры применения
JScript и VBScript. Сайт включает следующие страницы:
JScript Language Reference по адресу http://
msdn.microsoft.com/scripting/jscript/doc/jstoc.htm
JScript FAQ no адресу http://msdn.microsoft.com/
scripting/jscript/techinfo/jsfaq.htm
JScript Samples по адресу http://msdn.microsoft.com/
scripting/jscript/samples/jssamp.htm
Введение в JavaScript от Voodoo
http://rummelplatz. uni-mannheim. de/-skoch/ j s/
script.htm
Введение в JavaScript от Voodoo — обучающая программа
в 12 частях, охватывающая все популярные аспекты
JavaScript. Она пригодна как для новичков, так и для
экспертов. Часть 1 объясняет, что такое JavaScript и как
он используется, а следующие части рассматривают
применения слоев и динамического HTML.
Irt.org
http://www.irt.org/articles/script.htm
Irt.org (Internet Related Technologies) содержит огромное
количество высококачественных статей по всем
разделам, включая ASP, HTML, динамический HTML,
VBScript, CSS, XML, JavaScript и т.д. Припеценный
выше URL определяет непосредственно раздел JavaScript,
где можно отыскать множество полезных статей в
удобно организованном каталоге.
Focus on JavaScript
http://j avascript.about.com
Этот сайт поддерживается Нейтом Кассебаумом (Nate
Kassebaum), одним из соавторов этой книги. Здесь
можно найти еженедельные статьи, посвященные JavaScript,
а также ссылки на последнюю информацию на других
сайтах. Сайт содержит следующие страницы:
About.com JavaScript Tutorial по адресу http://
javascript.about.com/library/bl_tutorial.htm
Focus on JavaScript Newsletter по адресу http://
javascript.about.com/gi/pages/inmail.htm
SuperScripter
http://www.builder.com/Programming/Scripter/
Это раздел, посвященный JavaScript, на Builder.com в
C|NET. Каждую неделю JavaScript-rypy Builder.com пишет
статью, рассматривающую какой-либо аспект JavaScript.
Архив содержит лучшие статьи и примеры, доступные
в Web.
JavaScripts.com
http://www.javascripts.com
JavaScripts.com содержит тысячи готовых примеров
JavaScript-кода для использования при создании Web-
страниц. Сайт предназначен только для членов, однако
членство на нем свободное и все, что требуется — это
указать свой адрес электронной почты.
JavaScript Source
http://javascript.internet.com
JavaScript Source является прежде всего библиотекой
примеров кода JavaScript, но он также содержит форум
JavaScript и Won 'Wide Web V|9V
Приложение A bfififl
и раздел по книгам, посвяшенным JavaScript.
Библиотека кодов очень хороша и содержит свыше 500
высококачественных сценариев.
Webcoder.com
http://www.Webcoder.com
Webcoder.com содержит примеры сценариев, статьи с
практическими рекомендациями, ссылки на JavaScript
и динамический HTML, а также демонстрационные
страницы для многих популярных и новых JavaScript-
приложений.
Website Abstraction
http://www.wsabstract.com
Website Abstraction — большой каталог свободно
доступных JavaScript-кодов и обучающих программ JavaScript.
Сайт также содержит информацию и примеры других
Wcb-технологий, таких как Java и динамический HTML.
Сопровождающий CD-ROM
Сопровождающий CD-ROM содержит много
полезных инструментальных средств и утилит, плюс
исходные коды и примеры, рассмотренные в книге.
Установка на компьютерах Macintosh
1. Вставьте CD-ROM в дисковод.
2. Когда пиктограмма CD-ROM появится на рабочем
столе, откройте CD-ROM, дважды щелкнув на его
пиктограмме.
3. Дважды щелкните на пиктограмме Guide на CD-ROM
и следуйте выводимым инструкциям.
Установка под управлением
Windows 98
1. Вставьте CD-ROM в дисковод.
2. Дважды шелкните на пиктограмме My Computer
(Мой компьютер) на рабочем столе.
3. Дважды щелкните на пиктограмме, представляющей
дисковод CD-ROM.
4. Дважды щелкните на пиктограмме SETUP.EXE для
запуска программы установки.
5. Программа установки создает программную группу
с именем "JavaScript Unleashed 3", содержащую
пиктограммы, которые можно использовать для
просмотра CD-ROM.
ПРИМЕЧАНИЕ
Если на компьютере установлена Windows 98 и
разрешена возможность AutoPlay (Автозапуск), программа
SETUP.EXE будет автоматически запускаться после
помещения CD-ROM дисковод.
Установка под управлением
Windows NT
1. Вставьте CD-ROM в дисковод.
2. Выберите File -» Run (Файл -» Запуск) в
проводнике.
3. Введите drive:\SETUP.EX и нажмите Enter (drive
соответствует имени дисковода CD-ROM).
4. Программа установки создает программную
группу с именем "JavaScript Unleashed 3", которая
содержит пиктограммы, используемые для просмотра
CD-ROM.
Предметный указатель
Символы
! 74
$ 404
& 76
&& 74
(...) 403
* 403
+ 73, 403
-> 33, 66
. 403
/ 33
// 39
< 33
<!-- 33, 66
«76
= 61
== 50, 72
> 33
»76
>»77
? 403
[...] 403
["...] 403
\ 13S
" 76, 403
| 76,403
II 74
А
Агрегирование 106
Аплет 20, 24
Аргумент 93, 94
Архитектура клиент/сервер 163
Атрибут 34, 104
Class 34
Id 34
Name 34
Style 34
Атрибуты DOM 186
Б
Баннер 277, 278
Бегущая строка 277
Библиотека
классов 105
обыжтов 105
Блок данных 299
Браузер 18, 28, 39, 44, 47
Be's NetPnitivt 2.1 28
HotJava 44
Microsoft Internet Explorer 18, 44
Navigator 200
NCSA Mosaic 21
NetF'ositive 44
Netscape Navigator 18, 44
Opera 28, 44
Opera 3.x 19
Sun's HotJava 3.0 28
He-JavaScript 47, 49
старые 39
В
Ввод пользовательский 210
Верификация данных 367, 373
Визуальные эффекты 277
Внедрение сценариев 55
Внешние файлы 303
Выделение текста (onSelect) 193
Вызов Java-методов 335
Выражение 64
Выход из документа (onUnload) 197
Выход из фокуса (onBlur) 192
Вычисляемые поля 377
Г
Генерация событий
программная 198
Графический пользовательский
интерфейс (GUI) 103
Д
Декремент 70
Денежные значения 379
Дескриптор
<applet> 20, 24, 330
<BASE> 254
<body> 33
<br> 33
<div> 299, 312
<form> 319
<FRAME> 242, 255
<FRAMESET> 242
<head> 33
<hr> 33
<html> 33
<iframe> 293, 299, 303
<ilayer> 33, 293, 305
<layer> 33, 293 305
<link^ 287
<marquee> 33
<meta> 36
<n =rot> 47
<object> 330
<script> 29, 34, 46, 55
<span> 289
<style> 287
<table> 312
<td> 33
закрывающий 33
контейнерный 33
одиночный 33
открывающий 33
пустой 33
Диалоговое окно Prompt 49
Диалоговые окна 208
Динамическая инструментальная
панель 360
Динамическая подмена (rollover) 272
Динамический HTML (DHTML) 311
Документ HTML 167
Доступ к Java из JavaScript 330
Доступ к JavaScript из Java 331
Дочерний (child) элемент 286
3
Загрузка документа (onLoad) 196
Замена обработчиков событий 198
Запрос 164, 412
HTTP 165
клиентский 164
поисковый 412
Запуск приложения 414
Зарезервированное слово 58
Захват данных с помощью
объекта Textarea 231
И
Идентификатор 57
Изменение данных (onChange) 191
Изоморфизм 186
Инициализация переменных 428
Инкапсуляция 106
Инкремент 70
Инсталляция приложений 170
Инструментальные панели 317
Интерфейс 164, 411
поисковый пользовательский 411
пользовательский 164
Источник данных 409
К
Карта изображения 252
Кеширование файлов 252
Класс 106, 107
Ключевое слово 58
Код 48
помещение во внешний файл 48
Кодирование URL 166
Командные кнопки 277, 282
анимированные 277
Комментарии 66, 286
Компания 16, 53
Apple 17
Borland 17
Digital 17
Informix 17
Oracle 17
Microsoft 17
Netscape 16, 53
JavaScript. Энциклопедия пользователя
Г in 16, 53
Sun Misrosystems 24
Sybase 17
Константа 63
Конструктор 108, 151
RegExp() 401, 405
Косвенная установка фокуса 207
Кредитные карточки 380
Л
Лексема 57
Литерал 58
логический 59
с плавающей точкой 58
строковый 59
целочисленный 58
Логическое или (|) 403
М
Массив 141, 151
Меню 311
Метка 89
Метод
Alert() 208, 423
CloneNode 268
Closed 204
Confirm!) 210
ConfirmOrder() 190
ConvertToUppercase() 191
DailyTask() 199
Focus() 191
InsertBefore 269
OpenQ 189, 201
Prompt 49
Prompt!) 210
RemoveNode 269
SelectContentsO 192
Setlnterval 198
Seflimeout() 199, 277
SwapNode 269
Write() 215, 251
Writelr" 215
итератор 111
конструктор 111
модификатор 111
общедоступный 106
приватный 106
Методы DOM 184
CloneNode() 184
RemoveNodeO 184
Модель 29, 186
объектная 29
структурная 186
Н
Навигация
между окнами 200, 207
по документу 186, 187
по сайту 360
по списку посещений 262
Наследование (inheritance) 286
Обработка ошибок (onError) 188, 197, 420
Обработчик событий 50, 198
OnLoad 50
Замена 198
Обработчик событий
(event handler) 50, 188, 198
onAbort 198
onBlur 192
onChange 191
onClick 189
onError 197
onFocus 191
onLoad 196
onMouseOut 193
or"ouseOvf 193
onReset 190
onSelect 193
onSubmit 190
onUnload 197
Объект
Anchor 122, 214, 223
Applet 122
Area 122
Array 141
BLOB 180
Boolean 148
Button 126, 225, "Г 361
Checkbox 126, 225, 233
Client 173
Connection 179
Cursor 179
Database 178
Date 144
DbPool 178
Document 119, 182. 214
File 175
FileUpload 126
Form 122, 182, 225
Frame 120, 182. 200, 242
Function 149
Global 131
Hidden 126, 225, 239
History 120, 200, 242, 360, 365
Image 123, 214, 223
Layer 124
Link 125, 214, 218
Location 121, 200, 242, 262
Lock 175
Math 147
Mimetype 115
Navigator 114, 200, 242, 264
Number 149
Option 130
Password 126, 225, 238
Plugin 115. 125
Project 173
Radio 126, 225, 234
RegExp 141
Request 174
Reset 128
Resultset 180
Select 128, 225, 235
SendMail 177
Server 172
Stproc 180
String 131
Text 129, 225, 229
Textarea 129, 231
Toolbar 361
Widow 116 182, 200
простой 156
составн 157
Объектная модель 29
Объектная модель
документа (DOM) 182, 266
Объявление переменных 428
Окно
Upgrade Notice 196
браузера 201
закрытие 204
косвенная установка фокуса 207
навигация между окнами 207
определение атрибутов окна 202
открытие и закрытие 201
ссылки на окна 202
Оператор 40, 50, 82
Document.write() 40
Itelse 50
Switch 91
With 90
организации цикла 85
Break 88
Continue 88
Da.while 88
For 85
For.jn 87
While 88
условный 82
If 82
Itelse 84
Try..catch 85
присваивания 401
Операции 60, 69, 70
арифметические 70
булевы 74
декремента 70
инкремента 70
конкатенации 73
поразрядные 75
поразрядные логические 76
поразрядные сдвига 76
приоритеты выполнения 79
присваивания 70
со структурами данных 75
сравнения 71
строковые 73
условные 74
Определение слоев 312
Открытие нового URL 260
Отладка 170
Отношение "целое-часть" 106
Отношения содержания 110
Отправка формы (onSubmit) 190
Предметный указатель
Ошибки 171, 353, 420
времени выполнения 421
логические 421
синтаксические 420
сообщения об ошибках 421
П
Панели инструментов DHTML 311
Передача по значению 95
Переключатель 126
Переменная экземпляра 108
Переменные 60, 93
глобальные 62
локальные 62
область действия 62
Перемещение мыши по объектам 193
Персонализация 386
Подключаемые модули 25, 54
Java 330
браузера 326
Подпрограмма 30
Получение фокуса (onFocus) 191
Пользовательский ввод 210
Поля
вычисляемые 377
Помешение кода во внешний файл 48
Преобразование строк и чисел 140
ParsaFloatO 140
ParsaintQ 140
Прерывание загрузки
изображения (onAbort) 198
Приложение 22
клиентское 22, 27
Программирование
модульное 318
Программная генерация событий 198
Протокол
TCP/IP 25
Р
Регулярные выражения 401
Рекурсия 101
Родительский (parent) элемент 286
С
Сайт 47
Сброс формы (onReset) 190
Свойства 19, 104, 151, 251
объекта 111
Location.href 251
Селектор 289
смешивание 289
Сервер 25, 164
Apache 25
Microsoft Internet Information Server (IIS) 25
Netscape Enyerprise Server (NES) 25
Синтаксис 57
Синхронизация фреймов 247
Слои 293, 312
Событие 56, 113, 272
blur 192
click 56, 189
focus 191
load 196
mouseOut 193
mouseover 56, 193
onFocus 191
onMouseDown 272
onMouseOver 272
onMouseUp 272
select 193
submit 190
unload 197
таймера 188, 198
Создание изображений 318
Сокрытие информации 107
Сообщение 107
Сообщения об ошибках 421
Состояние 104
Специальные символы 59, 139
Среда 20
Microsoft Active Server Pages 20
Netscape Enterprise Server 20
Ссылки 250
на окна 202
на фреймы 254
Стандарт 285
MIME 326
ЕСМА 17
Стили 286
Страницы
динамические 386
статические 386
Строка 104, 131, 379
преобразование 140
форматирование 135
запроса 398
Структурная модель 186
Структурный изоморфизм 186
Сценарий
внедрение 55
Т
Таблица 410
поиска 410
стилей 285
Каскадная 285
Текст 33
Текстовый редактор 42
BBEdit 43
TextPad 43
Тестирование кода 423
Технология перетаскивания
(drag-and-drop) 43
Тип 61
MIME 326
браузера 356
данных 64
Boolean 64
Function 64
Number 64
Object 64
String 64
Точечная нотация (.) 109, 403
Трансляция типов данных 334
У
Уведомление
простое 208
Управление
сеансами 165
событиями 188
Условный оператор 82
If 82
Itelse 84
Try. .catch 85
Установка Java-свойств 335
Ф
Файл 36, 48, 54, 166
js 36, 48, 168
Acrobat 54
Cookie 166
HTML 167
VRML 54
аудио- 54
библиотечный 168
видео- 54
Флажок 126
Форма 122, 367, 400
скрытая переменная 400
создание интерактивных форм 376
Фрейм 120, "0\ 242
вложенный 245
обновлени 249
синхронизация фреймов 247
Функция
ChangeState() 302
CheckBrowser() 302
DailyTask() 199
JSMarquee() 277
OnLoad 38
Opendocf) 38
Processf) 322
Repaintf) 279
Ro1llmage() 320
TakeBrowser() 321
TheHref() 250
вызов 75
определение 75
передача по значению 95
рекурсивная 101
замены 406
очистки 406
поиска 406
ц
Цвет 63, 281
постепенное изменение 281
документа 216
Целые числа 378
Ш
Шаблон 49
Э
Экземпляр 20, 108, 153
JavaScript. Энциклопедия пользователя
Элемент
дочерний (child) 286
Элементы управления ActiveX
24, 27, 326, 328
Эффект 299
мультипликационный 299
Я
Язык сценариев 16
Язык программирования 53
A—letScrot 53
С/О 53
Perl 53
Visual Basic 53
Иностранные термины
А
Active Server F>ages (ASP) 17, 26, 163
ActiveX 20, 24, 328
Apache 25
Apple 17
AppletScript 53
Application Manager 170, 171
Application programming interfaces - API
26, 183,312
В
Be's NetPositive 2.1 28
Borland 17
Borland IntraBuilder 45
С
C/C+ 53
CGI - Common Gateway Interface
16, 20, 26, 53
CGI-программа 53
CGI-сценарий 16, 21
Client-side imagemaps, CSIM 252
cookie-набор 165, 386, 387
CSS 285
CSS positioning, CSS-P 285
CSS-свойства 295
Bottom 295
Height 295
Left 295
Right 295
Top 295
Visibility 298
Z-index 296
D
DHTML 183, 184, 311
Digital 17
DLL 26
DOM 182, 266
-браузер 266
-документ 266
-метод 266
-модель 266
Е
ЕСМА (European Computei Manufacturer's
Association) 17
ECMAScript 17, 46
G
GUI 103
H
HP 17
HTML 16, 17, 29, 32, 183
встроенный 29
HTML 4 19
HTML-документ 21, 32, 55, 167
активный 22
динамический 21
HTML-код 318
HTML-комментарий 33
HTML-редактор 43
Allaire HomeSite 43
FrontPage 44
WYSIWYG 44
визуальный 43
текстовый 43
HTML-страница 20
HTTP-запрос 165
IBM 17
IDE 42
IIS 44
Informix 17
Interface Definition Language - IDL 183
Internet Explorer 3.0 17
Internet Requests For Comment (RFC) 326
IP-адрес 166
ISAPI 26
J
Java 16, 20, 26, 54
Java Server Pages (JSP) 26, 163
Java-аплеты 20, 27, 326, 330
JavaScript 16, 28, 53
JavaScript от Netscape 342
JScript 17
JScript от Microsoft 348
L
LiveAudio 326, 336
LiveScript 16, 53
LiveWire 163
M
Microsoft Active Server Pages 20
Microsoft Internet Explorer 17, 18, 44
Microsoft Internet Explorer 3.x 19
Microsoft Internet Information
Server (IIS) 25
MIME 25
N
NCSA Mosaic 21
Netscape 16, 53, 252
подключаемые модули 24
Netscape Enterprise Server 20
Netscape Enyerprise Server (NES) 25
Netscape Navigator 18, 28, 44
Netscape Navigator 2.x 19
Netscape Navigator 3.0 17
Netscape SSJS (Server-Side JavaSaipt) 26
NSAPI 26
D
Object Management Group - OMG 183
OCX 24
OOP - object-onented programming 19
Opera 28
Opera 3.x 19
Oracle 17
P
Peri 53
R
RGB 217
Rollover-эффект 273, 320
S
Server-Side JavaSaipt (SSJS) 17 45, 169
Slide Show 364
SSJS 26, 163, 166
Sun 16, 53
Sun Misrosystems 24
Sun's HotJava 3.0 28
Sybase 17
T
TCP/IP 25
U
URL 166
V
VBScript 17, 25, 28, 29
подпрограмма 30
программирование 30
тип данных
Variant 29
типы данных 29
функция 30
Visual Basic 17, 28, 53
Visual Basic for Applications 28
W
W3C 32
Web 22
Web-браузер 44
Web-мастер 16
Web-приложение 22, 163
Web-сервер 20, 25
Web-страница 53, 386
Window Script Host (WSH) 20
World Wide Web 21
X
XHTML 18, 32
XML 32, 183
■ -■ Uf-t
(0ь~
ll _,
ISBN 966-7393-98-4,
656 стр.
Разработка Web-приложений
на РНР и MySQL
Лаура омсо* иЛюк Зеллинт
РНР и MySQL представляют собой бесплатные, с открьпым исходным
кодом продукты, идеально подходящие для подавляющего
большинства разработчиков Web-приложений. РНР - суть простой и мощный
язык сценариев, специально разработанный в качестве механизма
создания полнофункциональных Web-приложений за рекордно
короткие сроки. MySQL - это система управления реляционными базами
данных, которая идеально интегрируется с РНР и служит основой
создания динамических Web-сайтов для нужд электронной
коммерции.
Книга Разработка Web-приложений на РНР и MySQL представляет собой всеобъемлющее руководство по
совместному применению РНР и MySQL для разработки высокоэффективных и интерактивных Web-сайтов с
динамическим содержимым.
Несомненным достоинством книги является ее ориентация на решение реальных бизнес-задач, что воплощено
во множестве типовых примеров, столь часто встречающихся при повседневной разработке. Среди этих
примеров создание покупательской тележки для электронных магазинов, аутентификация пользователей,
генерация динамических PDF-документов, разработка систем электронной почты через Web, написание систем
поддержки Veb-фору мов Помимо пошагового анализа реальных бизнес-примеров, в книге широко
рассматривается формальный синтаксис и семантика языка РНР, основы построения приложений баз данных и особенности
применения объектно-ориентированной методологии при разработке приложений для Web.
Сопровождающий книгу CD-ROM содержиттексты все примеров, рассмотренных в книге, а также множество
материала, который окажется полезнымдля каждого разработчика Web-приложений.
Несмотря на то что книга, в основном, рассчитана на профессиональных программистов и разработчиков, она
принесет несомненную пользу и в качестве учебника для начинающих, кто совершает только первые шаги в
бесконечном мире создания приложений для Internet.
j is if mm
Фундаментальны е
алгоритмы
на C++"""
UnH
Смирим
Cawu
Роберт Седжвик
Фундаментальные алгоритмы на C++
Анализ/Структуры данных/
Сортировка/Поиск
ISBNd66-7393-89-5
175x250 мм, 688 ., твердый переплет
Рекомендуемая в Украине
цена Гв Изссии •
37 грн,
1195..".
Когда человек берет в руки книгу компьютерной
тематики, он наверняка задастся такими вопросами:
насколь актуальна информация, изложенная в
книге? Когда была издана книга? Знакома ли фамилия
автора? На какой период книга сохранит свою
актуальность? Вопросы далеко не праздные:
приобретение книги связано с тратой определенной суммы
денег, поэтому человек вправе ожидать как можно
большего эффекта и желательно как можно
дольше.
Не секрет, что в последние годы
программирование, перейдя "на поток", перестало быть искусством,
а стало ремеслом. Проникновение компьютеров
практически во все сферы повседневной жизни
привело к существенному увеличению спектра задач,
решаемых программистами. Вполне естественно
появление и постоянное совершенствование
инструментов разработки, позволяющих даже
начинающим без особых затрат времени и усилий решать
свои маленькие (и не только) задачи. Представьте
себе создание приложения для пополнения,
сортировки и поиска в большой информационной
системе по каким-то товарам. Вы создаете на экране
окошко (естественно, красивое), перетаскиваете туда
элементы "Таблица", "Сортировка". "Поиск" и так
далее. Затем среди свойств элемента "Сортировка"
выбираете "Быстрая" (разумеется, ведь информации
у вас немерянно!)... Звучит заманчиво, не правда
ли? А что же такое сортировка, к тому же быстрая? А
как, собственно, организуется поиск (кроме спосо-
Эта книга посвящена глубокому
исследованию основополагающих
концепций и алгоритмов,
которые можно отнести к разряду
"вечных". Изучив их, вы получите
знания, которые никогда не
устареют и которыми вы будете
пользоваться всегда
ба, который первым приходит в голову, — искать
простым перебором и сравнением информационных
элементов)? Как вообще обстоят дела с
алгоритмами в настоящий момент?
А ситуация такова: структурное (алгоритмическое)
программирование не забыто, да и никогда не
будет забыто просто потому, что сами по себе
алгоритмы гораздо старее программирования. Ими
пользовались еще до появления не только
компьютеров, но даже и мыслей подобного рода. Это
классические понятия, которые просто скрылись под
разного вида оболочками и надстройками.
И эта книга как раз и посвящена глубокому
исследованию всех основополагающих концепций и
алгоритмов, которые можно отнести к разряду "вечных".
Изучив их, вы получите знания, которые никогда не
устареют и которыми вы будете пользоваться
всегда. Ибо они — фундаментальная основа
успешного Программирования (именно так, с большой
буквы).
— Microsoft
V \.
Ричард Саймон
Windows 2000 API.
Энциклопедия программиста
ISB;4966-7393-74-7
175x250 мм, 1088, мягк. переплет
■Ч1Ч»
ЭЩИКЛОПЕДИЯ
SAMS
Рекомендуемая в Украине— 64грн.
ена в России— 320р 6.
Система Windows является непревзойденной платформой
для разработки приложений на основе окон (эта
операционная система неслучайно носиттакое название, ведь "windows"
в переводе с английского означает "окна"). В системе Windows
в виде окон выполнены все элементы пользовательского
интерфейса: кнопки,линейки прокрутки, меню, пиктограммы,
поля, списки и, естественно, caw окна (главное окно
приложения, диалоговые окна, дочерние окна, модальные окна,
всплывающие окна).
Окна могут принимать и обрабатывать сообщения,
возникающие в результате действий пользователя с клавиатурой и
мышью, передавать сообщения самим себе, своим
дочерним окнам, другим окнам и самой системе, ставить
сообщения в очередь и извлекать их из очереди. Очереди сообщений
позволяют выполнять в системе сразу несколько
приложений, координировать их работу и создавать в приложениях
подпроцессы для лучшего использования выделенных
ресурсов.
Сообщения вырабатываются приложением или возникают в
ответ на эбытие. Событием может являться любое
действие, выполненное пользователем (щелчок или двойной
щелчок кнопкой мыши, ведение курсора над определенной
областьюокна, нажатие клавиши на клавиатуре), атакжелю-
бое изменение состояния системы.
Это—стройная глубоко продуманная программнаятехно-
логия, которая годами шлифовалась и доводилась до
совершенства. Она позволяет легко и быстро воплотить в жизнь
любой замысел—при одном условии: разработчик должен
уметь пользоваться интерфейсом прикладного
программирования (API — application programming interface) системы
Wndows и иметь под рукой описания всех функций этого ин-
Содержится полное описание всех
функций с подробным перечнем их
параметров и приведены примеры,
позволяющие понять назначение
функций
терфейса. Незаменимым источником этой информации яв-
1 ляется книга 'Windows 2000 API. Энциклопедия
программиста".
Назначение книги
Издание позволит программистам сэкономить время при
разработке приложений для всех современных версий системы,
начиная с Windows 95. Новые API и стандарты,
предусмотренные в Windows 2000, стали еще более сложными и
развитыми, что требует от разработчика дополнительных усилий
по их освоению. В книге не только подробно описаны новые
средства Wndows, ноивключены основные разделыАР1,
применяемые большинством программистов.
Книга предназначена для использования в качестве полного
справочника по функциям и средствам API Wn32, которые
поддерживаются в системах Wndows 2000 и Wndows 98
компании Microsoft. Описана область применения каждого API,
что позволит разработчикам создавать приложения,
применимые в обеих операционных системах. В данной книге в
основном рассматриваются API Wn32, поддерживаемые в
обеих операционных системах, а не вся совокупность API Wn32,
поскольку для большинства приложений не требуются API,
предназначенные только для Wndows 2000.
1r
ГВ"'!3311В0Ш
Технология СОМ+ превратилась в составную часть DNA
— архитектуры распределенных межсетевых
приложений, весьма широко применяемой разработчиками
программного обеспечения. СОМ+ предоставила
инфраструктуру, которая обеспечивает быстрое, простое
и эффективное создание многоуровневых приложений
практически без затрат на кодирование.
Назначение книги
Автор поставил перед собой благородную цель
восполнить пробелы, связанные с недостаточно
подробной и трудной в изучении документации по СОМ+.
Другая цель — обзор разнообразных сфер применения
СОМ+, среди которых самые непредсказуемые.
Именно в этой книге развеяна завеса таинственности над
Windows DNA и соответствующими серверными
продуктами.
Подробное рассмотрение СОМ+ заняло бы несколько
томов. Тем не менее существуют определенные
базовые, основополагающие аспекты, без которых знание,
а тем более применение этой технологии попросту
невозможно. Именно они подробнейшим образом
описываются в книге. Таким образом, книга как бы
закладывает фундамент для дальнейшего совершенствования
мастерства. Любая сложная технология, коей может
считаться и СОМ+, имеет множество ловушек и
подводных камней. Каково, например, тому, кто часами
корпел над кодом и затем во время демонстрации
заказчику получил столько сообщений об ошибках, что
хватило бы на всю оставшуюся жизнь? А проблема-то
заключалась вовсе не в неправильном кодировании, а
в том, что начинающий программист не исследовал все
"узкие места" СОМ+. Где же ему отыскать информа-
РичаргЛейнекер
СОМ+.
Энциклопедия программиста
ISBN уточняется
175x270 мм, мягк. переплет
Предлагается эффективное решение
проблем, возникающих при работе с
недостаточно подробной и трудной в
изучении документации по СОМ+
цию, если в документации ее попросту нет? Да, именно
в этой книге! Имея за плечами огромный опыт
использования OI№ РичардЛейнекерлюбезноделитсяимс
читателями, и все что им остается, — лишь
внимательно прочитать книгу и не наступать на те же грабли,
на которые наступили до них другие программисты.
Особенности этой книги
Книга состоит из четырех взаимосвязанных частей. В
первой части, 'Windows DNA и СОМ+" рассматривается
объектная модель компонентов (СОМ) и ее связь со
средой Microsoft DNA. Основные продукты серверной части
и средства разработки исследуются в контексте DNA
Помимо прочего, в этой части представлены принципы
дизайна систем с многоуровневой архитектурой.
Вторая часть, "Усовершенствованные технологии
программирования 0М+", расширяет базовый набор
знаний за счет глубокого исследования концепций
долговременного хранения, событий, имен, "чэтокор Немалое
внимание уделяется скрытым свойствам С0М+.
В третьей части, "Управление компонентами и
транзакции", детально описывается сервер транзакций Microsoft
Transcation Server и службы С0М+. Эти ресурсы и
службы оказываются более мощными, чем транзакции,
осуществляемые через брокеров.
Четвертая часть, "Асинхронное компонентное
программирование", посвящена рассмотрению MSM^ и
компонент реализацией очередей С0М+, которые вместе
обеспечивают асинхронную связь в современных
информационных средах, являясь залогом высокой степени
отказоустойчивости при взаимодействии множества
приложений.
I
i аз i
' i-
t-
tg&
*М*4Я»М
SAMS
Назначение книги
Книга посвящена операционной системе,
символизирующей отказ от коммерческого программного
обеспечения и переход к разработкам с открытым исходным
кодом. Ядро Linux и программы для этой системы
разрабатывают, отлаживают и предоставляют для общего
пользования десятки тысяч талантливых добровольцев
во всем мире, воплощая в ней свои представления об
идеальной вычислительной платформе.
Многочисленные программы, утилиты, драйверы и документацию для
Linux можно беспрепятственно загружать с тысяч
сайтов Internet. Этой операционной системе оказывают
поддержку ведущие фирмы-производители
программного обеспечения, в том числе Oracle, Hewlett-Packard,
Novell, IBM, Symantec, Corel и Sun, которые бесплатно
поставляют для нее свои программные продукты.
Linux позволяет вдохнуть новую жизнь в "старое
железо" (вплоть до i386* развернуть на компьютере
файловый, Web-, proxy-, почтовый сервер или сервер
приложений, брандмауэр, рабочую станцию и даже сетевой
коммутатор. После установки этой системы можно
продолжать эксплуатировать программы прежней
операционной системы с помощью эмуляторов DOSEMU и
Wine, но уже в гораздо более надежной
вычислительной среде.
В книге описан дистрибутив Linux 6 компании Red lat,
который также распространяется бесплатно и
содержится на прилагаемом CD-ROM. Этот дистрибутив
характеризуется тщательным подбором взаимно
согласованных компонентов, наличием всех необходимых
средств разработки и поддержки, широким
применением диспетчера пакетов RPM компании Red Hat, кото-
Дэвид Питтс, Билл Болл
Red Hat Linux 7.
Энциклопедия пользователя
ISBN966-7393-90-9
210x270 мм, 592 с, тв. переплет
Сложнейшие вопросы настройки
системы, поиска неисправностей и
организации работы сетевых служб
описаны просто и понятно
рый поддерживает универсальный формат
программных пакетов и позволяет превратить установку и
удаление прикладных программ в приятное развлечение.
Отличительной особенностью дистрибутива компании
Red Hat является использование диспетчера пакетов
RPM, разработанного этой компанией, который
позволяет в значительной степени упростить установку,
обновление, сопровождение и удаление в системе
программных пакетов.
Книга рассчитана на широкий круг читателей. В ней
самые сложные вопросы настройки системы, поиска
неисправностей и организации работы сетевых служб
описаны просто и понятно. Это позволяет начинающему
пользователю самостоятельно освоить все тонкости
работы с операционной системой Linux, а опытному
администратору — быстро найти интересующие ег ■
сведения.
В книге подчеркнуты важнейшие преимущества Linux
I перед другими операционными системами типа UNIX —
бесплатное программное обеспечение с открытым
исходным кодом, удобство установки и сопровождения.
Операционная система Linux может быть развернута
на обычном персональном компьютере, даже
устаревшей модели (с процессором вплоть до i386) Такой
вариант установки широко применяется для создания
брандмауэров и маршрутизаторов. Для начинающих
пользователей особенно важно, что они могут взять в качестве
экспериментального устройства для изучения системы
Linux практически любой компьютер, не боясь
повредить дорогостоящую технику. В этой книге все
процедуры установки, настройки и сопровождения подробно
описаны и проиллюстрированы примерами.
Дейв Браун
Adobe Web-дизайн и публикация.
Энциклопедияпользователя
ISBN 966-7393-11-9
150x210 мм, 656 -.,тр переплет
ЭНЦИКЛОПЕДИЯ
SAMS
Рекомендуемая в Украине — 43 грн.
цена в России — 209 • 6.
Web-возможности всей гаммы
продуктов Adobe в одной книге!
Назначение книги
XX век принес две революции в издательском деле,
возможно, наиболее значимые со времен изобретения печатания.
Первая — была ознаменована появлением настольных
издательских средств, навсегда изменивших лицо индустрии
публикаций и полностью разрушивших связанную с ней сие- |
тему торговли. Вторая—связан с феноменом
интерактивной публикации, в частности World Wide Web.
Эта книга предназначена для пользователей, желающих I
создать всего лишь несколько Web-страниц или сплан-ро- '
вать весь Web-узел. Книга станет настольной для любого
дизайнера, связанного с разработкой документов,
отдельных страниц и изображений для распространения на World I
Wid.Web. |
Организация книги \
В части I представлена точка зрения компании Adobe на I
будущее и знакомят с ее продукцией, в том числе с новым
поколением программных продуктов. Читателя также
приглашают посетить другие узлы, в которых используются
инструментальные средства компании Adobe.
В части II читателя знакомят с основами языка HTML,
добавлением изображений и возможностям!' доступными при
компоновке Web-страниц. Предлагается решение проблем,
связанных с ограничением пропускной способности Internet-
каналов.
В части III показано, как используя последнюю версию
программы ГageMill, можно быстро и легко создавать
качественные Web-страницы. Таблицы, формы и кадры кажутся
устрашающими в HTML, но здесь показано, как эти -лементы
могут использоваться без специальных знаний. В
заключение описано использование программы SiteMill для
управления связями и организацией узла.
В части IV довольно подробно рассказывается о пакете
Adobe Acrobat. Область его применения гораздо шире, чем
просто публикация существующих документов, и он может
быть использован для создания интерактивных и
мультимедийных документов без всякого программирования. В конце
этой части описаны программы Persuasion, PageMaker и
FrameMaker.
В части V рассмотрена работа с файлами, полученными
путем сканирования: типы файлов и способы их создания.
Здесь объясняется, каксделат изображения
функциональной частью узла, а не просто декорациями. Даются
некоторые наставления по переносу графических изображений на
Web. Читателя не учат рисованию, а проводят по
проблемным вопроса.. получения изображений, созданных водном
из форматов, распознаваемых на Web.
Создание движущихся объектов является содержимым части
VI. Описано применение программы Adobe Premier для
создания видеоэффектов, "омещаемыхнсМ/еЬ-страницах.
Программа After Effects компании Adobe дополняет арсенал
инструментальных средств Web-дизайнера видеоэффектами
и анимацией.
В книгу добавлен специальный раздел — часть VII,
посвященный совместному использованию программных
продуктов компании Adobe, в котором авторы обобщили свой
практический опыт, предоставив большое количество подсказок
и советов.
Часть VIII содержит каталог узлов и ресурсов, которые
могут заинтересовать Web-дизайнера (приложение Д). В
приложении "даются ценные указания о проблемах,
возникающих при работе с программой PageMill. А в приложениях С-
G кратко описаны пять учебников, позволяющих читателям
самостоятельно приступить к работе с программами
Photoshop, Illustrator, PageMaker, Persuasion и Acrobat.
Языкпрограммировашя FVthon получил широкую известность I
сравнительно недавно, нотеперьегодостоинстваначинают '
признавать очень многие, '
i
Этот язык привлекает программистов:
i
Является интерпретируемым языком, поэтому
он широко применяется для создания сценариев
операционной системы (например, в Linux и '
UNIX). Сценарии, написанные на языке Python,
практически не требуют отладки, поэтому он
является повседневным инструментом системных I
администраторов. Он широко применяется для
создания сценариев CGI (на основе модуля
mod_python для сервера Apache). На этом языке
пишутся сценарии для многих известных
программных комплексов, например таких, как
Delphi, COM+, MFC, Java, поскольку он
значительно упрощает работу с этими программными
комплексами.
В программах, написанных на этом языке,
можно легко разобраться, поскольку он имеет очень
простой синтаксис. Строки документирования
программ можно вызывать для справки
непосредственно в интерпретаторе, строить на их
основе документацию к программам.
Это объектно-ориентированный язык, вплоть до
уровня структур данных. В связи с этим работа
программиста значительно упрощается.
Модульные, не зависящие друг от друга программные
компоненты можно легко отлаживать отдельно,
а затем объединять в единый комплекс. Для лю-
Дэвид М. Бизли
программирования Python.
Справочник
ISBN 966-7393-54-2
175x250 мм, 336 с, мягк. переплет
Рекомендуемая в к«аине— 29 грн.
цена' в России — 150 • б.
Первая книга на русском языке,
посвященная интерпретируемому,
интерактивному, объектно-
ориентированному языку высокого
уровня с открытым исходным кодом
бых, самых сложных структур данных
предусмотрен оптимальный набор методов. Об их
создании программисту заботиться не
приходится.
t В языке Python структура программы
обозначается отступами. Его программы эстетически
привлекательны: никаких фигурных скобок, которые
иногда так трудно согласовать между собой (С,
C++), никаких режущих глаз знаков доллара,
обратного слэша, амперсанда, в нагромождении
которых просто теряешься (Perl).
Этот язык привлекает математиков:
Поддерживает целые числанеограниченной
длины (единственным ограничением является
объем памяти компьютера). В нем есть
поддержка комплексных чисел, встроены мощные
функции работы с последовательностями (например,
map, filter, reduce, zip), предусмотрена
анонимная функция (lambda).
На этом языке удобно проводить эксперименты
со структурами данных, реализовать сложные
алгоритмы, проверять гипотезы. Например, в
модуле AVL реализована разработанная Адель-
соном-Вельским структура, которая
одновременно является сбалансированным деревом и
списком. В модупе PLEX по исходным данным
пользователя осуществляется синтез
недетерминированного, а затем детерминированного конечного
1 FLASH P
Яалм BHyTPEHJd'l p"*?
Своей популярностью в качестве мультимедийна приложения
Flash обязана компактности, быстродействию, интерактивности и
практически неограниченным возможностям оформления
фильмов. Усовершенствовать" интерфейс, более высокая интеграция
сдругими программными продуктами, внедрение многих новых
свойств, в том числе встроенного языка создания сценариев
Action Script—все это в Flash 5 позволяет создавать качественную
мультимедийную продукцию, включающую себя графику
анимацию, звук, текст и интерактивные лементь' какдля\Л/еЬ, так и
для втономного применения.
Книга Внутренм мирРМ5длядизайтра"даетвшможность
углубленно изучить новые свойства Flash 5, касающиеся
графического оформления, ввода и редактирования текста, анимации,
эвуковогосопровождения, интерактивности и автоматизированной
публикации. Особое внимание в книге оделяется нововведениям в
5-" версии, взаимодействию Flash сдругими программными, эо-
дуктами, в том числе и с программами компании Macromedia, a
также использованию сценариев, написанныхна языке AcfionScript
для автоматизации рабочего процесса во Flash с помощью ЭДоб-
ным для читателя окажется и приведенный в книге краткий
справочник по Flash 5, который позволяв быстро найти описание
конкретных свойсг, функций и команд и соответствующих им пера-
тавнь клавиш'нигатакжесодержитподробнуютехническуюин-
формацию по рассматриваемой программе, многочисленные
упражнения, иллюстрируемые i гафикой, способной удовлетворить
разные вкусы, а также полезныесоветы и рекомендации авторов.
Кроме того, в книге приведены многочисленные ссылки на' Veb-
сайты учебного материала по Flash, разработанные одним из =>вто-
Кен Мильберн, Джон Крото
Внутренний мир Flash 5
для дизайнера
ISBN 966-7393-61-5
175x250 мм, 496 с, мягк. переплет
Рекомендуемая ' в Украине — i Э грн.
мена I в оссии— • • 6.
ров книги Джоном Крото, который считается всемирно известным
специалистом по Flash.
Отличительны особенности книги
• Книга натсанадля тех, ктоделаетсвои первые шаги в Flash,
в том числе и тех, кто не умееттолком рисовать, но горит
желанием создать привлекательный 1лйЬ-сайт, хотя пользу
отэтой книги, несомненно, извлекуги опытные №Ь-дизайне-
рыи художники-оформители.
• В книге рассматриваются приемы и методы работы неюль-
ко во Flash, но и таку графических и мультимедийных ро-
граммных продуктах компании Macromedia, KaKFreeHand,
Fireworks, Dreamveawb Generator и Drector. Подобная
взаимосвязь программ подчеркивается на протяжении всей книги,
что позволяет в полной мере оценить возможности
Web-дизайна и подготовки автономных презентаций во Flash звме-
сгно с упомянутыми программами.
Сценарии, написанные на языке AcfonScript в значительной
степени овышаютикгерактивностьРЬзп-содержимо; хотя
и требуют некоторыхусилий при создании. Тем не менее ри-
веденный в книге материал може'утешить тех читателей,
котс^йнапуганыперспекгивойосвоенк программирования,
поскольку возможности Flash позволяют создавать
сценарии без особых навыков в программировании.
Многочисленные ссылки на сайты учебного материала по
Flash, созданныеоднимизавторов этой книги, Джоном Крото,
послужат, наряду со множеством полезных приемов и ове-
тов, отличным подспорьем в оперативном освоении Flash и
углубленном изучении ее возможностей.
, f.
в аз1аботке
Й'ЧЗ"» 4fi \ Р
&**
Динамический HTML.
Руководство разработчика
Web-сайтов
Вайнман Линда и Вильям
ISBN 966-7393-95-Х,
464 стр.
Книга Динамический HTML Руководство
разработчика Web-сайтов является довольно необычной.
Написанная Web-программистом и Web-дизайнером, она
сочетает строгую логику программных разработок и
неожиданные спецэффекты, характерные для
дизайна. На протяжении всей книги читатель вместе с
авторами принимает участие в разработке
корпоративного Web-сайта Ducks In A Row (http://www.ducks.htmlbook.com). Процесс
разработки сайта построен по принципу «от простого к сложному». Всесторонне
рассматриваются возможности языка HTML 4, а также их практическое воплощение. Обилие
иллюстраций и сопровождающий книгу CD-ROM значительно ускоряет и упрощает
процесс обучения.
КРАТКОЕ ОГЛАВЛЕНИЕ
Глава 1. Начало
Глава 2. Первая страница
Глава 3. Быстрая обработка графики
Глава 4. Работа с Web-цветами
Глава 5. Могучая сила щелчков
Глава 6. Мозаичные фоновые изображения
Глава 7. Маркеры и линейки
Глава 8. Прозрачность
Глава 9. Выравнивание
Глава 10. Работа со шрифтами
Глава 11. Планирование
Глава 12. Организация
Глава 13. Таблицы стилей
Глава 14. Навигация
Глава 15. Интерактивные элемент! управления
Глава 16. Формы
Глава 17. Анимация и звук
Глава 18. Включение в списки поисковых систем
Глава 19. Хороший стиль HTML-программирования
Глоссарий
Предметный указатель
Python—мощны" интерпретируемый
объектно-ориентированный язык программирования высокого уровня, идеально
фиспособленный для Web. Он развивается в рамках проекта
с открытым исходным кодом и предоставляется бесплатно
для всеобщего пользования.
Среда программирования Python реализована на многих плат- |
формах, включая Microsoft Windows, UNIX/Linux и Macintosh.
Исходный код интерпретатора и библиотек Python на языке
C++ предоставлен для общего пользования.
Еще одна реализация этого языка, получившая название
JPython и также общедоступная, написана на языке Java.
Благодаря этим особенностям язык программирования
Python открывает путь ко многим программным
технологиям, поэтому разработки на этом языке ведутся во многих на- |
правлениях. К наиболее интересным и перспективным из них
относится:
создание серверов и клиентов OLE, COM, DOOM и ActiveX
для предоставления удобных сценарных средств в
среде Windows паке win32com, проект Python for Delphi и
№■);
• упрощенная поддержка распределенных бъектов в
рамках технологий CORBA, ILU.ADO, DCOM (проекты
CORBAIDL Parser, Fnorb, OMF, Hector и др.);
интерпретация исходного кода таких языков, как Java,
которые в основной реализации поддерживают только
компиляцию (проект JPython и др.);
АндреДос-СантосЛесса
Python.
Энциклопедия программиста
ISBN 966-7393-97-6
175x250 мм, МЯГК. переплет
Книга содержит все, что необходимо
разработчику, использующему язык
программирования Python.
разработка более дружественных, альтернативных
интерфейсов к существующим библиотекам объектных
модулей, таким какМРС, Tk, KDE, Motif и многим
другим (проекты Pythonwin, wxPython, PyKDE, PyOpenGL и
Ф-);
создание объектно-ориентированных интерфейсов к
базам данных (проек Zope, MetaKit, модуль shelve);
реализация сложных структур энных, включая
многомерные массивы, поддержка графическихидругихдво-
ичных файловых форматов;
• обработка данных, том числе с использованием таких
языков разметки, кг XML, SGML, HTML, XDR.
Все эти направления разработке а также многие другие
подробно рассматриваются в книге "Python. Энциклопедия
программиста". В ней даны многочисленные примеры, ссылки
на все существующие источники в Web.
Книга содержит все, чтонеобходимо разработчику,
использующему язык программирования Python: дано описание
синтаксиса, основных средств и модулей, среды разработки,
способов оптимального использования мощных средств языка.
Максимально
Анонимный автор
Максимальная безопасность
в Linux
=:■!
ISBN 966-7393-55-0
210x270 мм, 400 с, МЯГК. переплет
SAMS
ЕЕ5Э 54ms
Назначение книги
Это уникальная книга, существенно отличающаяся от
наводнивших рынок многочисленных изданий, посвященных
системному администрированию Linux, UNIX и сетей на
базе протокола TCP/IP. Она написана не просто
специалистом по компьютерной безопасности и системному
администрированию, а опытным хакером, имеющим
большой опыт взлома современных информационных систем.
Поэтому даже та кие, казалось бы подробно описанные в
литературе темы, какустановка операционной системы
Linux управление пользователями или конфигурирование
популярных сетевых служб, открываются читателю в
новом ракурсе — как шаги, обеспечивающие существенную
защиту системы от взлома.
Кроме стандартных задач системного
администрирования Linux, автор подробно рассматривает:
методы и приемы, позволяющие устранить
факторы, угрожающие защите компьютера ип сети под
управлением ОС Linux;
основные дыры в защитепазличных дистрибутивов
системы Linux и популярных приложений, методы
взлома и используемые взломщиками программные
средства;
коммерческие и свободно распространяемые
программы и утилиты для выявления и устранения
слабых мест в защите;
Рекомендуемая
иена
в Украине —
в России —
•ШЖ-
Уникальное руководство,
написанное хакером, по защите
сервера и рабочей станции Linux
безопасное конфигурирование и использование
популярных приложений и служб на базе ОС Linux, в том
числе telnet, Sendmail, Apache, FTP и многих других;
применение технологий SSL, различных алгоритмов
шифрования и вычисления контрольных сумм для
обеспечения защиты и целостности данных при
передаче;
безопасность самих дополнительных средств
защиты, возможные ограничения их применения.
Эта книга предназначена прежде всего для системных
администраторов, но пригодится и обычным
пользователям ОС Linux, желающим защитить свои компьютеры и
обеспечиваемые ими сетевые службы от вторжения и
возможныхугроз извне. Дажеопытныеадминистраторы
UNIX будут шокированы, узнав, сколько узких мест в
защите имеют их Linux-системы при стандартной
установке, и к чему эти дыры могут привести при подключении
компьютера к Internet или к локальной сети. Реализация
же предлагаемых в книге рекомендаций позволяет
быстро и зачастую без дополнительных финансовых затрат
добиться уровня защиты Lriux, достаточного для работы
критически важных приложений в производственной сре-
I де, и обеспечить безопасную работу основных служб
I Internet.
Сборка, конфигурирование,
1 настройка, нодермнзация
■ « разгон И
*+~
Ральф Вебер
Сборка, конфигурирование, настройка,
модернизация и разгон ПК.
Энциклопедия пользователя
ISBN 966-7393-93-3
150x210 мм, 624 с, мягк. переплет
ЭНЦИКЛОПЕДИЯ
о
StfBEX
Рекомендуемая в Украине-- ЗОгрн.
цена в России* 150* 6.
Назначение книги
Открыв свежий сборник прайс-листов по компьютерной
литературе, вы найдете там более четырех десятков названий
книг, в которых так или иначе описываются аппаратные
компоненты ПК, атакжевогросы его сборки, настройки и
модернизации. Однако развитие компьютерной техники проиоодит
настолько быстро, что любая книга, посвященная этой
тематике, неизбежно быстро устаревает. Поэтому новый перевод
книга Ральфа Вебера (предыдущий вышел в 199" году в
издательстве "МИР'), дополненный последними новостями об
аппаратно-программной реализации современного
компьютера, представляется вполне обоснованным.
Книга представляет собой руководство по аппаратным
средствам и профаммному обеспечению персональных
компьютеров на базе наиболее популярных процессоров фирм Intel,
AMD, Cyrix и других. Редакторы этого перевода добавили
новые данные, связанные с рассматриваемыми в книге
вопросами, в результате чего в ней объединены традиционные,
в основном неизменные сведения об аппаратном и
программном обеспечении компьютера с новыми данными по
современным процессорам, видеокартам, чипсетам.
Дополнительный материал касается также вопросов разгона процессоров,
обеспечивающего повышение мощности вашего
компьютера. Таким образом, эта книга будет полезной не только
любителям-конструкторам компьютерных систем, но может
служить справочным пособием для опытных пользователей
и конструкторов персональных компьютеров.
Отличительные особенности книги
Эту книгу можно рассматривать как универсальное
руководство по аппаратно-программной реализации современного ПК
Книга будет полезна не только
любителям-конструкторам
компьютерных систем, но может
служить справочным пособием для
опытных пользователей!
на базе новейших гроцессоров фирм Intel, AMD, Cyrix и
других. Здесь вы найдете подробное описание устройства и раз-
личныххарактеристик процессоров — от Intel 8088 и
AMD486DXflo Pentium 4, Tualantin и Athlon, материнских и
системныхплат, видеокарт, чипсетов, шин и интерфейсов. Это
поможет вам сделать обоснованный выбор элементов для
правильного конфигурирования всего аппаратного
обеспечения ПК.
8 книге прекрасно освещены проблемы модернизации "" и
все связанные с ней вопросы. Крометого, здесьописана
настройка BIOS и программного обеспечения ПК, а также
использование сопеменныхоперационныхсжтем—i Windows
9 до Millenium 2000.
Особое место в книге занимает рассмотрение разгона
гроцессоров. Be не оставит равнодушным возможность
придания дополнительной мощности ПКза счет его разгона. Здесь
даны практические рекомендации по разгону процессоров,
мерам предосторожности и устранению возможных проблем.
Наконец, полезные технические данные и таблицы,
приведенные в заключительной главе книга, вы можете использо-
ватьдля правильного выбора конфигурации и параметров
настройки своего ПК.
Команды
iil
LINUX £1
Команды Linux. Справочник
ISBN 966-7393-77-1
175x250 мм, 688 с, мягк. переплет
+ »
С
Рекомендуемая в Украине— ЗЭгрн.
цена' в России — 195 • б.
Так что же такое команды в Linux или Unix? Основа всех
основ. Хотя многие представляют их в виде маленьких
примитивных программок, выполняющих несложные
стандартные функции. Как бы не так! Помимо таких, встречаются
очень серьезные пакеты с десятками параметров. Даже
графические интерфейсы — это по сути команды.
Широко известная команда Is выводит содержимое
каталога. "Подумаешь", — скажете вы. Но у нее имеются
десятки опций, и никакой диспетчер файлов со своим
графическим интерфейсом ничего подобного не отразит! А в
жизни может понадобиться многое. Кроме того, далеко не
все программные компоненты и вообще имеют
графический интерфейс. Или другая команда, дсс, которая
вызывает компилятор языка С. Десятки страниц посвящены
описанию ее многочисленных опций. Словом, в этой книге
описаны способы запуска многочисленных больших и
маленьких компонентов Linux.
Сдругой стороны, нестоит рассматривать этоиздание лишь
какперевод man или info. Иногда содержи мое этихсправоч-
ных руководств для одной и той же команды идентично,
иногда силыноотличается. Для многих команд вообще
отсутствует man или info, или существующее оригинально
содержимое этих руководств просто . ^удобоваримо". В этой книге
сделана попытка описать в концентрированном виде как
можно больше(порядка460)классическихиновых,
популярных и не очень команд, определить их место в иерархии
компонентов Linux, вспомнитьо незаслуженно забытых или
ещененашедшихунасдолжногораспространения.
Некоторые команды пользователь не вызывает напрямую,
онивызываются посредством других команд. Нойте, идру-
гие полезно знать, чтобы правильно организовать
обработку информации, "не изобретая велосипед". Ну а самое
главное состоит в том, что все это множество команд дос-
Около 460 команд — классических и
новых, популярных и не очень,
незаслуженно забытых или еще не
нашедших у нас распространения
тупно вам для включения в сценарии оболочек, при
программировании на современных языках, включенных в
дистрибутивы Lrux. He стоит дублировать систему и включать
команды в состав компиляторов, к ним сегодня можно
обратиться, применяя многочисленные опции, из программ, нэписан-
нькнамногжязыкахпрсграммирования, проанализироватькоды
завершения, сделать это подлиннее богатство неотъемлемо
частью программного обеспечения.
Основная часть книги содержит описания команд,
расположенных в алфавитном порядке. В ^аздепе "Типовые
операции" все команды классифицированы, что дает возможность
даже самому неопытному пользователю подобрать
необходимый набор с учетом его потребностей, чтобы в
дальнейшем подробно ознакомиться с каждой конкретной командой.
Классификация команд выполнена по следующим
направлениям:
•
•
•
•
•
•
•
•
•
•
•
•
Файлы и каталоги
Запуск заданий(команд), управление процессами
Клавиатура
Шрифты
Сети
Почта
Usenet, InterNetNews(INN)
Window
Графические операции
Административные задачи
Счета пользователей и групп, пароли
Разработка программного обеспечения
оттаююф
Девис Чепмен и др.
Разработка Internet-приложений
в Delphi 2
ISBN 966-7033-20-1
150x210 мм, 640 С, тв. переплет
Рекомендуемая jV *ате~ Эгрн,
цена в России — 45 у б.
Эта книга—учебное пособие, посвященное
разработке приложений для Internet в среде Delphi.
В ней описаны протоколы и службы Internet,
алгоритмы защиты сетевой информации,
электронная почта и группы новостей.
Авторы нашли оптимальное равновесие между
изложением основных принципов
программирования в Internet и практическими примерами
того, как эти принципы воплощаются в
реальность.
Читателю предоставляется возможность
испробовать все — от создания приложений клиента
до расширения серверов и Web-броузеров.
Прочитав книгу, вы узнаете все секреты
протоколов Internet, научитесь применять CGI для
организации взаимодействия cWeb-серверами,
сможете разрабатывать высокоэффективные
приложения для Internet.
Вы узнаете все секреты протоколов
Internet, научитесь применять CGI
для организации взаимодействия с
Web-серверами, сможете
разрабатывать высокоэффективные
приложения для Internet
Пособие рассчитано на широкий круг
пользователей, владеющих азами программирования. В
настоящее время книгу можно приобрести за
сравнительно небольшую цену, а
рассматриваемые вопросы применимы и для новейших
версий Delphi.
CD-ROM содержит исходные коды всех
примеров, рассмотренных в книге, наборы полезных
компонент и утилит.
PHP. Руководство разработчика
Хьюгс Стерлинг и . Рекомендуемая'в'Украине— 31 грн.
Змиевски" Андрей | цена Г в России — 155 р б.
Книга ''HP. Руководстворазработчика посвящен i искусству профаммирования на
языке РНР—серверном языке написания сценариев, внедряемых в
HTML-страницы. Благодаря открытому коду, постоянномуразвитию и пополнению все новыми и
новыми модулями, язык РНР превратился в один из наиболее
полнофункциональных инструментальных средств для быстрого создания Wfeb-сайтов, реализующих
задачи электронной коммерции, базданныхдляМ/еЬ и различного рода порталов.
Книгу отличает ориентация на решение конкретныхзадач. Четкий и продуманный
характер подобранныхзадач позволяет получить рецепты н все случаи
повседневной практики профаммирования. Каждое решение подробно комментируется, что
позволяет не только понять методологию профаммирования, но также и
стимулирует нахождение наиболее эффективных способов решения сложных проектов.
Рекомендуется в качестве настольного руководства для разработчиков Internet-
приложений любой квалификации.
РНР. Справочник
[ Рекомендуемая в Украине^- 29 грн.
ВайкАллен ( цена' в России- 150".
Книга РНР. Сппавочш» содержит наиболее полный материал по языку лрограмми-
рования РНР. Удобная форма представления материала, изобилие примеров
применения, исчерпывающее описание функциональности превращаютэту книгу в е-
заменимое руководство, которое должно находиться на столе каждого
профессионального разработчика МзЬ-приложений.
Справочник охватывает все аспекты применения языка РНР: базовый синтаксис,
функции генерации содержимого ' 'еЬ-странии pa6oraclntemet-npoTOKOJiaMM.Ma-
нипушрованиедокументами, организациядоступа кразнообразным база данных,
использованиесистемныхфункций.Учитываютсявсе.^воБведен! последних ер-
сийРНР.
Справочникориентированнаширокуюкатегорию| эограммиск и может
рассматриваться в качестве эффективной замены официальной документации по языку
РНР.
FLASH 5.0. Анимация.
Эффективный самоучитель.
Быстро... просто... наглядно...
V
ifr*
Кишик А.Н.
Эта книга позволяет читателю быстро и
эффективно освоить одну из лучших на сегодняшний день
программ создания интерактивной векторной
Web-анимации — Flash 5.O. Книга содержит большое
количество примеров, которые представляют собой
четкие пошаговые инструкции. Каждый шаг подробно
иллюстрирован снимками экрана компьютера. Это
дает возможность быстро освоить основные приемы
работыс программой.
Книга рассчитана на пользователей персонального компьютера любой
квалификации, которые интересуются компьютерным дизайном, анимацией и Internet. Она
будет полезна как профессиональным художникам, которые хотят применить свой
талант в анимации и Web-дизайне, так и Web-дизайнерам, которые решили
использовать в своем творчестве Flash-анимацию.
ISBN 5-93772-005-9,
240 стр.
КРАТКОЕ ОГЛАВЛЕНИЕ
Введение
Часть I Рисование и анимация графических объектов
Глава 1 Интерфейс Flash 5.0
Глава 2. Рисование
Глава 3. Работа стекстом
Глава 4. Анимация графических объектов
Часть II Создание сложной анимации
Глава 5. Символы Flash 5.0
Глава 6. Анимация сложных сцен
Глава 7. Анимация сложных объектов
Часть III Интерактивная анимация
Глава8. Создание кн опоки других элементов
интерфейса
ГлаваЭ.Управлениепорядком воспроизведения
Flash-фильма
Глава 10. Публикация Flash-фильма
Приложение А. Команды Flash 5.0
Предметный указатель
КНИЖНЫЙ КЛУБ «КОМП@С»
(ОФИЦИАЛЬНЫЙ ПАРТНЕР ТОРГОВО-ИЗДАТЕЛЬСКОГО ДОМА «ДС»)
Приглашаем всех желающих вступить в книжный клуб «Комп@с». Вступив в клуб, Вы получите скидки,
содействие в поиске и покупке необходимых Вам книг. Мы своевременно реагируем на запросы читателей и
своей издательской деятельностью способствуем их профессиональному росту. Вы раньше других будете иметь
возможность познакомиться с новинками, получая наш прайс-лист, иллюстрированный каталог по почте либо
обратившись на наш сайт www.diasoft.kiev.ua.
Вы сможете: пользоваться системой скидок при покупке книг;
высказать свое мнение, пожелания и замечания относительно книг издательства;
найти новых друзей и партнеров по интересам;
заочно встретиться и пообщаться с авторами книг;
участвовать в розыгрыше призов бесплатной лотереи.
И главное, впервые членам клуба будет предоставляться бесплатное комплексное программное
обеспечение, позволяющее осуществлять связь с книжной базой данных, получать оперативные изменения
в базе, компоновать заказы, получать информацию о книгах издательств - объем, содержание (краткое или
глобальное), аннотация, текст одной из глав, внешний вид обложки и т.д. С более подробной информацией Вы
■можете ознакомиться на сайте www.diasoft.kiev.ua
ПРИЕМ В КЛУБ
Для того чтобы стать членом книжного клуба, достаточно купить одну из книг нашего издательства в любой
торговой точке, заполнить анкету, помещенную в книге, и отправить ее по адресу издательства либо купить три
любых книги на одном из торговых мест ТИД «ДС».
Все члены клуба получают карточку с индивидуальным номером, дающую право на скидку.
Карточка выдается сразу же при покупке на торговом месте ТИД «ДС» или у партнеров ТИД «ДС» (адреса
смотри на следующей странице). В остальных случаях (заказ по почте, через электронный магазин, а также
покупка у независимых торговых организаций книги ТИД «ДС») Вам необходимо заполнить анкету, помещенную
в книге, и отправить ее в издательство. Действие карточки распространяется на все торговые точки,
перечисленные в этом пункте, кроме независимых торговых организаций.
СИСТЕМА СКИДОК
Став членом книжного кл"6а, Вы получаете первоначальную скидку в размере 5% на весь ассортимент книг
(книги ТИД «ДС» + более WOO наименований книг издательств Украины и стран СНГ).
Карточка действительна на протяжении года со дня выдачи; по истечении срока подлежит замене.
При покупке в течение квартала пяти и более книг карточка заменяется на новую с 10% скидкой.
Более подробную информацию о системе скидок можно получить, обратившись на наш сайт по адресу
www.diasoft.kiev.ua.
J*-
АНКЕТА
1. Название книги
2. Где, по какой цене, когда (с точностью до месяца) Вы приобрели эту книгу?
3. Ф.И.О.
4. Кем и где работаете .
5. Параметры Вашего ПК
6. Адрес, телефон, e-mail, web-узел
Дата заполнения " * г.
Вышлите анкету по адресу: Украина, 03055, Киев-55, а/я 100, «Издательство «ДиаСофт».
ТОРГОВЫЕ МЕСТА ТОРГОВО-ИЗДАТЕЛЬСКОГО ДОМА «ДС»
КИЕВ
■ ЧМ^ метро "Петровка"
Днепропетровск
еиЗе* *~дд Е^-та к^-тд ьешв
Г <Горговыв~Места З
Павильон 1 (g
' Павильона I
"I Павильоне S»
. Павильон 4
i г!. Павильон 5
US men IB. te
ХАРЬКОВ
ул. Пушкинская
®CT. М три
Пушкинская
Павильон 6 '
я'
01
О'
XI
П |
й:
Гуданова, 9/11t
хпи
Ин-т
ортопедии
—
X
*' г-]
„~
Ин-т
огнеупоров
-™-
ГЕ
п
п
(>
а
s
О.
с
£
ч«МакДонал^й?>
0
- *
Ч О
с ft
о
О
о.
о
1-
я
с
пр-т Карпа Маркса
- .■
R Торговые места ' ,1
САНКТ-ПЕТЕРБУРГ
Пр-т Об"ховской обороны, д. 105
ДК им. Крупской, м. "Елизаровская"
ЗАЛ
ИМ
CAMOL
1ВЕТОВ
п
я
ПАРТНЕРЫ ТИДчДСч
Киев
Т./ф. 212-12-54,216-35-64
Книга-почтой: 03055, а\я 100
e-mail: books@diasoft.kiev.ua
e-mail: bss@diasoft.kiev.ua
e-mail: stepanb@akcecc.kiev.ua
Днеп ропетровск
т.(0562)33-27-74
Книга-почтой: 49008, а\я 466
e-mail: diasoft@mail.dnepr.net
Харьков
т. (057247-20-67
e-mail: books@rail.kharkov.com
Львов
т./ф. (0322)39-В7-0В
Одесса
Т.(0482* 68-73-99
e-mail: kvant@eurocom.od.ua
e-mail: kvant@tekom.odessa.ua
Москва
Т.(095) 726-80-67
e-mail: diasoft_msk@rosmail.ru
Санкт-Петербург
т.(812) 317-97-56
e-mail: diasoft_spt@mail.convey.ru
ОДЕССА
I
Радиорынок
"Летучий голландец"
ЧП "Клименко"
АДРЕСА МАГАЗИНОВ,
ГДЕ МОЖНО КУПИТЬ КНИГИ ТИД «ДС»
КИЕВ
"Знання",ул.Крещатик,46
т.224-22-91
"Технически i книга",
ул. Красноармейская, 51
ХАРЬКОВ
"Вища школа',ул.Петровского,6
т.47-80-20
"Книга "", ул.Полтавский шлях,37,
т.12-55-27
т.227-25-86
"Оюсник", пр-т Победы, 29
т.274-52-35
"Книжковый свет".пр-т По6еды,2
т.219-26-17
ДНЕПРОПЕТРОВСК
Магазин "Техжчк книга"
ПЛ.ОСТПОЕ KI "0 1
телефон (0562) 33-09-55
Магазин "Техническая книга"
пр. К. Маркса 40
телефон (0562) 744-86-72
ДОНЕЦК
"Дом книги'ул Артема 147 а
телефон (0622) 55-74-49
КРИВОЙ РОГ
"Букинист-Солон'
пл. Освобождения 1
телефон (0564) 29-81-21
ЛЬВОВ
Техническая книга", пл.Рынок.10
т.72-54-06
"Влас", Университет Львовский
политехник,корпуса4,5, т.39-8708
ЛУГАНСК
"Книги'.ул.Советская, 58
т.53-62-30
МОСКВА
"Академкнига'.ул. Вавиловэ,55
т.124-92-02
"Библио-Глобус'.ул.Мясницкая.б
тел.928-87-44
"Дом технической книги",
Ленинский пр-т,40 ,т. 137-60-38
"Московский дом книги",
ул. Новь 1 Арбат, 8
"Мир" .Ленинграде^ ,пр-т,78
т.152-45-11
"Энергия". /л.В.Кожиной,10
т.145-52-00
"Мир печати" ул.2-я Тверская Ямская,54
Т.978-50-47, 978-55-07
"Молодая гвардия", ул. Большая Полянка, 28
т.238-11-44, 238-00-32
САНКТ-ПЕТЕРБУРГ
"Дом книги'.Невский пр-т,28
т.318-64-16
'Техническая книга".
ул.П"шинская,2,т. 164-65-65
"Энергия", Московский пр-т,189
т.443-01-47
МИНСК
"Книга XXI'
пр-т Ф Скорины, 92,
СТ.м. Московская,
т.64-31-05, 64-27-97
Как сделать заказ и получить книги
Для организаций Для частных лиц
1) Получите полный прайс-лист по адресу, ука- 1 Получите полный прайс-лист по адресу, vra3an-
занному ниже ному ниже (или см. прайс приведенный в книге)
2) Аккуратно заполните бланк заказа 2) Аккуратно заполните бланк заказа
3) Отправьте его нам по факсу, почте или 3) Отправьте его нам по факсу, почте или
e-mail e"mal1
.4) В течении одного рабочего дня в Ваш адрес 4) В течет йдного рабочего дня в Ваш адрес
будет направлен счет по факсу или e-mail. В буде направлен счет по факсу или e-mail. В
течении срока действия счета мыгарантиру- течении срока действия счета мы гарантиру-
емналичиекнигиихцену Г 'Наличие книг и их цену.
Внимание/ Не оплачивайте покупку до полу-
5) После оплаты счета Ваш заказ, а также ори- чения счета
гина i счета, рас~>дна и налоговая накладные 5) Оплатите сче в любом коммерческом бан-
будут высланы Вам посылкой ке Деньги можно отправить на' наш расчет.
ный счет и почтовым переводом, но это
несколько дороже, чем через банк.
Заказы поступившие по электронной почте обрабатываются в первую очередь.
Заказы «наложенным платежом» — не принимаются.
Цены накнигинеучитываютстоимостьдоставки.коммисионные банка илипочтового перевода.
Стоимость доставки по Украине или курьером по Клеву — 7 грн.
Стоимость доставки по России — в зависимости от региона.
Заказ
ОТ" ч 2001 г
Название организации:
Фамилия Имя Отчество:.
Адрес доставки:
Почтовый индекс.
ИНН: __ _ № св-ва плательщика НДС:_
wfi реализации
Фамилия Имя Отчество:,
Телефон: ' / факс:
E-mail:
Код Название книги К-во
Получайте полный прайс-лист на все книги и направляйте заказы по адресу:
г.Киев: 03055 а/я 100, тел./факс (044) 212-1254,216-3564e-mail: books@dtasoft.kiev.ua
stepanb@akcecc .kiev.ua
www.dlasoft.kiev.ua — всегда полный ассортимент наших книг
ПРАЙС-ЛИСТ ИЗДАТЕЛЬСТВА "ДИАСОФТ" ОТДЕЛА "КНИГА-ПОЧТОЙ"
Код
Автор
Название
Цена Цена
в грн.' в руб.
Стр.
Формат
4756.Морзе Н.В.
иснови 'информатики Екзаменац1йн1 бшети.запитанн; т
5516'Жалдак, M^ri 1ыгЬппмятиуя-7. Експерементальний навчальний ""Ci6(-
Использование ПК в целом
5 1вГ84х108/16_
~9.
5700 Клименко, Неэффективным самоучитель работы на ПК. 2-е изд.
Г Работа на персональном компьютере. Самоучитель
PR11 Вебер Paльq< Сборка, конфигурирование, настройка, модернизация
5164 Анонимный
_4683 Канер Сэм_и_
5228 Митчелл Ш.
4020[Нортон П., Г
15,9
19
:U| мортон 11., i
; Максимальная безопасность в Linux
Тестирование программного обеспечения
Толковый словарь компьютерных технологий
Внутренний мир персональных компьютеров, 8еИЗдаь
208(70x100/16
672170x100/16
584|84х108/1б"
544170x100/1 б"
Операционные системы
5612
Питрек
Внутренний мир Windows
ЧуприИ А., Т , Эффективный самоучитель в Windows Me
i Внутренний мир Windows 98.
2759 БойсД
~~3Q6|K0Bapi"
551? Кессел Пол
5003 Вильяме М.
44|Кепли М.
|Wndows NT 3.51. Энциклопедия пользователя ( т- CD-ROM _
Microsoft Wridows 2000 Professional. Энциклопедия П0ЛЬ30ват|
|Wr
л |М>
1б| ~"га
251 150
Программирование в Windows 2000. Энциклопедия поль;1
^ Ответы на актуальные вопросы по 0S;« Warp
5.
~75L
^35
245
_395
304
70x100/16
■4vir»\16
592
832"
640
352
0x100/16
i(v«lR(16
60x84/16
Linux,
45531 Скловска^с
5463 Сзри П.
5758|г-'атчэлп Сте
3926 Паркер Тим
5164 Анонимный
Red Hat Linux 6.0. Учебник
Сервер Red Hat Linux для Windows
( + CD-ROM )
Linux IP Stacks в комментариях
Unux 5.2. Энциклопедия пользователя + 2 CD-ROM
Максимальная безопасность в Linux
5641 Скловская С ] Команды Unux. Справочник
4844 Максвелл Ск( Ядро Unux в комментариях (+ CD)
5717Тшенк T Red Hat Unux для системных администраторов. ЭнцИКЛО
9361Хейр К. и др.1 Внутренний мир Unix ( + дискета )
7557 Eypi Р., Хор 1ЦпЬ(
4318
Unix
I? ~
24" ™
'29 _
29 _
39
. §5
"120
400
70x100/16
70x100/16
170
145
195
70x100/16
84x108/16
84x108/l£
К}1 __ J95' 688|7_0х100/16_
39 215 438f84x108/16_
672i84x108/16_
"830 84x108/16
290
5462
Бурк Робин,'jUNIx для Internet
Пратс
бин,']
для системных администраторов. Энциклопедия
Энциклопедия пользователя ( + CD-F
95.
_250
480,
496
Язык программирования C++. Лекции и упражнения
Программ ирование
" ~291
4982 Ппат i Стиве|Язык программирования С. Лекции и упражнения
4754[Либерти Тж& C++ Энциклопедия пользователя с приложением
5804 Хэзфилд Р. [ Искусство программирования на С. Фундаментальные
3850 Эйткен Пите! Программирование на Visual Basic 6. Этюды профессион
Гилберт С. (Самоучитель Visual C++ 6 в примерах. ( + CD-ROM )
Олафсен Ю. Visual С ++ 6 и MFC. Энциклопедия пользователя. ( + CD
5063
5056
36211к"алвер Ч. Delphi 4. Самоучитель (без приложения)
5845|Кандзюбас1 Delphi 6. Базы данных и приложения. Лекции и упражне
Delphi 5. Базы данных и приложения. Лекции и упражне
5419|Кандзюба С
J84
736
145. 656
17q]^ 432
~275|
165
J50
_390
45
_2757'Калверт Ч.
242|Калверт Ч.
ЭЗЖонопка Р.
Delphi 4. Энциклопедия пользователя ( + CD-ROM )
2758
Калверт Ч.
Клименко
Галлагер С,
Саймон Р.
1057
5571 __
_650|Ч£Г1м£_д_
57201 Вай А.
51491 Бизли Девид
Delphi 2. Энциклопедия пользователя ( + CD-ROM ).
Создание оригинальных компонент в среде Delphi
Borland C++ Builder 3. Энциклопедия пользователя ( + CD-
25
45
Kyl'lA 1.O. Базы данных и нриложеник Лекции и упражне^
Power Builder 6.0. Энциклопедия пользователя ( + CD-ROM |
Windows 2000 API. Энциклопедия программиста ( + CD-RO^
35
64
Разработка Internet-приложений в Delphi 2 ( + CD-ROM ).
PHP. Справочник
I49JE
5721 'Хьюгс С, Зм
5258 Холден Грет,
5165 Вайк Аллен
5355 Вайк А., Ваг
Язык программирования Python. Справочни!
PHP. Руководство разработчика
Apache Server в комментариях.) + CD-ROM )
JavaScript в примерах
5512
JavaScript. Энциклопедия пользователя ( + CD-ROM )
29
29
49
145
225
84x108/16
84x108/16
84x108/16
14x108/16
84x108/15
14х1ГШ1й
496 70x100/16
720 84х108/1б"
192 WvinmiK
576 70x100/1
592Г70хЮ0/1
400 I4vinmi6
736)60x84/8
512160x84/16
800 J4*mmi6
95
320
_45
"l5cf
-150
155
816
640
70x100/16
70x100/16
60x84/16
448 70x100/16
336
384 70x100/16
95" 304
464
70x100/16
84x108/16
70x100/16
84x108\16
Adobe Photoshop 6.0. Полный справочник-путеводитель ПС
Графика \л анимация,
4
CAD-пакеты.
2472 Боутон Г. и (1 Внутренний мир Adobe Photoshop 5 ( + CD-ROM )
Кишик \. Н ]Adobe Photoshop 6.0. Эффективный самоучитель
32 84x108/16
49б! Их№8\16
4SW
304]
95) 304|70x100/ie
5587| Компания AdrjAdobe Illustrator 9.0. Учебник ( + CD-ROM )
169!Боутон Г.
5515 Ковтанюк Ю,
БОог'тёМ"" Г.
4634
5802
3925
2860
5080
649
570
2471
5069
5029
5262
2101
Бордмэн
Тёмин Г.
CorelDraw! 6 для экспертов ( + CD-ROM )
CorelDRAW 10 для дизайнера
3D Studio МАХ 3. Учебник ( + CD-ROM )
Внутренний мир 3D Studio MAX 3: Моделирование, мате
3D Studio МАХ 4. Эффективный самоучитель ( + CD-ROM
Маэстри п>кс Внутренний мир 3D Studio МАХ 2. Том 3: Анимация (■+ CD
Бордмэн Т., _ Внутренний мир 3D Studio MAX 2. Том 2: Моделирование
Милпе,-- Ф , Внутренний мир 3D Studio MAX 3: моделирование,матер1
Эспиноза Д. |3D Studio ЧАХ..ВН" т~н"ий мир. Том 2-й ( + CD-ROM )
Эллиотт С. [Внутренний мир 3D Studio MAX. Том 1 ( + CD-ROM )
Эллиотп С, 1
Мильбер iKe
Мортие Р.
мильоерн К.
Браун Дейв 1
476з]харрел вил
5163
5064
4753
3924
Хансен Хан
Чуприн А.
Барчард Биг1
Барчард Ь. L
Внутренний мир 3D Studio МАХ 2. Том 1 ( + CD-ROM ).
Внутренний мир Rash 4 для дизайнера. ( + CD-ROM )
Внутренний мир Вг)~е4 для дизайнера ( + CD-ROM )
Внутренний мир RASH 5 для дизайнера ( + CD-ROM )
Adobe Web-дизайн и публикация. Энциклопедия пользов
Внутрений мир QuarkXPress 4 с приложением.
Разработка сценариев для PageMaker ( + CD-ROM )
AutoCAD 2000. Лекции и упражнения (+ дискета)
Внутренний мир AutoCAD 2000. ( + CD-ROM )
36
10
29
19
19
29
29
29
29
37
60
61
19
23
29
39
39
29
29
34
Внутренний мир AutoCAD 14. Новые возможности ( + И, 49
180
100
170
95
95
150
145
145
1-15
1Я1)
150
150
190
215
150
180
169
368
608
880
480
456
480
408
i_ 368
720
432
752
848
448
336
496
650
424
704
784
688
767
70x100/16
60x84/16
70x100/16
70x100/16
84x108/16
70x100/16
84x108/16
84хЮ8\16
84X1U8/16
84x108/16
84x108/8
84x108/16
70x100/16
70x100/16
70x100/16
60x84/8
84x108/16
60x84/16
70x100/16
84x108/16
84x108/16
I | Офисные пакеты и другие книги
43031 Нортон Пите Microsoft Office 2000-Избранное от Питера Нортона
5139
5096
942
4925
5057
1493~1
5640
2010
Линд Д. Кер
Форт С.Хоук
Сингх Л.
Бэлсон Дон i
Lotus Notes и Domino R5. Энциклопедия пользователя ( +
Программирование в среде Access 2000. Энциклопедия
Oracle 7.3. Пособие разработчика ( + CD-ROM )
Внутренний мир OracleP Проектирование и ыастройка.(
Грин Джо Oracle 8/8i Server. Энциклопедия пользователя.
AIS
Бьелетич Ша
Мак-Налли 1
39471Спортак М. v
3927
1295
1032
5510
40
802
314
4849
Спортак М. i
Грин Д. и др
Оливер Дик,
Хан Харли
Левин Я., Ле
Акоста ".и
Oracle 8. Энциклопедия пользователя ( CD-ROM )
MS SQL Server 2000
Informix. Энциклопедия пользователя
Компьютерные сети. Книга 1: High-Performanc Networking. С
Компьютерные сети. Книга 2: Networking Essentials. Энцикг
Microsoft BackOffice 2. Энциклопедия пользователя ( + CD-
ПопулярныеМеЬ-броузеры. Энциклопедия. ЭЛЬЗОВате
Эффективный самоучитель работы в Internet
Ответы на актуальные вопросы no Internet
Внутренний мир World Wide Web.
Скибб П Хе|Оптимизация мультимедиа ПК ( + CD-ROM )
Устинова Г.1 Информационные системы менеджмента
29
79
75
42
75
75
160
49
60
30
65
9
9
16
5
9
15
45
145
390
390
195
470
390
245
300
180
250
45
45
125
28
45
215
552
656
544
736
800
576
Г 864
688
800
432
432
800
460
448
384
544
352
368
84x108/16
84x108/16
84x108/16
84x108/16
84x108/16
84x108/16
60x84/8
70x100/16
60x84/8
60x84/8
84x108/16
60x84/8
60x84/8
60x84/16
60x84/16
84x108/8
60x84/16
60x90/8
УДК 004.43(031)
ББК 32.973.26-018.1
В L4
ВАЙ К Аллен та 1нш.
В14 JavaScript. Перекл.з англ./Аллен Вайк.— К.: ТОВ"ТВД"ДС", 2001.—480 с. Енциклопед1я користувача
ISBN 966-7992-00-04
Книга JavaScript. Енциклопедг" користувача являеться найбшьш повним "чбовим та довщниковим KepiB-
ництвом по yciM версиям мови JavaScript, у тому числ1 JavaScript 1.5 i JScript 5.0. На сьогодшшжй день
JavaScript e найб1льш розповсюджсна мовадля написания сцснарпв, яю забезпечують идтримку жтерактив-
ного вмкту Web-CTOpiHOK. В низ1 анагпзуеться широкий спектр питань, починаючи з основ мови i закшчую-
чи складними питаниями практичного використання технолопй Web-дизайну. Докладпо розглядлються:
взаемсдая JavaScript та HTML; типи даних, операцп, вирази i оператори; основи об'ектно-ор1ентован Vi
методологи та Vi реал1зашя в JavaScript; об'екти 3i сторони кшепта га сервера; DHTML; техиолопя наг исаиня
стшкогс та над1йного коду; методика вщладки коду. Особлива увага придшяеться питаниям досягнепня без-
пеки Web-програм.
У книз1 е багато практичних приклад1в, ЯК1 вщповщають специф1чним особливостям розробки Weli-caHTiB
з використанням JavaScript. Довщник по базовим мовним об'ектам робить з книги справжне паст1льне
кер1вництво.
CD-ROM, який надходить разом з книгою, М1стить коди ycix проапал1зованихприклад1в, а також багато
iHiuo'i кориспо1 шформацн.
JavaScript. Енциклопед'т користувача розрахована на широку аудиторпо розробнимв програмного забезпе-
чсиня для Web.
u7 ..' вневременные решения
■ Всестороннее знакомство с JavaScript
и соответствующими
инструментальными средствами
*- '«дробныеисследования
' "существующих версий языков
JavaScript и JScript
■ Разработка внедрение в код HTML
клиентск программ на JavaScript
■ • дание сценариев для принятия
•ешений
■ Разработка серверных приложений с
использованием Netscape's Server-Side
JavaScript
■ Помещение на Web-страницы
эффектов, характерных для
динамического HTML
I
Использование таблиц стилей и слоев
■ Исчерпывающий анализ объектной
модели документов
■ Создание переносимых программ
на JavaScript, одинаково хорошо
функционирующих в различных
браузерах
■ События JavaScript и организация
ответа на них
i
■ Искусство создания интерактивных
Web-сайтов
i
■ Усовершенствованные технологии
i
программирования
■ Обработка ошибок и отладка
программ на JavaScript
■ Рассмотрение вопросов безопасности
в JavaScript
КАТЕГОРИЯ Программирование для Internet
ОБОЛОЧКА JavaScript
ОВЕНЬ
^И Начинающий Средний Мастер Эксперт
i
Сопровождающий CD-ROM
ш Исходные тексты всех примеров,
рассмотренных в книге
■ Полезные инструментальные средства
независимых разработчиков
в Многое другое
i •*.
* "' Об авторах
Аллен Вайк является главой отдела технологий в
Engage Technology. Эта компания занимается
рекламным и PR-бизнесом с применением
Internet-технологий. Аллен — автор многих Web-
страниц и Web-сайтов для интрасетей ведущих
сетевых компаний. Соавтор книг Pure JavaScript,
The Perl 5 Programmer s Reference, The Official
Netscape Navigator 4 Book и других. В
свободное время пишет статьи в специальную
колонку " Webmaster" для ежемесячного
журнала Sun World и еженедельно обновляет
статью " Windows and UNIX Integration" на сайте
ITworld.com
Ричард Вагнер — вице-президент компании
Product Development for Acadia Software Infuse,
научный редактор в журнале Delphi Informant,
где ведет колонку, посвященную проблемам
разработки программного обеспечения. Ричард
является автором изданий Inside Paradox for
Windows, CompuServe Internet Tour Guide,
Inside CompuServe. Он также выступал в
качестве соавтора в книгах Inside Windows NT,
Inside Microsoft Access, Inside dBase for
Windows, Integrating Windows Applications.