Вадим Дунаев САМОУЧИТЕЛЬ ПО JavaScript
Эта книга предназначена для самостоятельного освоения программирования на языке
JavaScript. Кроме общего руководства, она содержит множество примеров и текстов готовых к
использованию программ. Рассматриваются вопросы создания сценариев для веб-сайтов, атакже
сценариев, выполняемых Windows Scripting Host. В приложениях приводится справочная
информация по JavaScript и HTML. Книга адресована как новичкам, так и тем, кто уже имеет
некоторый опыт в веб-дизайне и программировании. Во втором издании книги исправлены
замеченныеопечаткиинеточности.
Краткое содержание
От автора............................................И
Введение..........................................13
Глава 1. Основы JavaScript...............................18
Глава 2. Основы создания сценариев......................ПО
Глава 3. Объектная модель браузера и документа.............169
Глава 4. Примеры сценариев.............................180
Глава 5. Работа с файловой системой и реестром Windows......277
Приложение 1. Руководство по динамическому HTML........297
Приложение 2. Справочник по HTML.....................362
Алфавитный указатель.................................385
Благодарность.............................................................12
Введение ................ .....13
Глава 1. Основы JavaScript.............................18
1.1. Где писать программы и как их запускать...............................18
1.2. Ввод и вывод данных.................................................22
1.2.1. alert...............................................................
1.2.2. confirm.............................................................23
1.2.3. prompt............................................................24
1.3. Типы данных........................................................25
1.4. Переменные и оператор присвоения....................................29
1.4.1. Имена переменных...............................................30
1.4.2. Создание переменных............................................30
1.4.3. Область действия переменных....................................31
1.5. Операторы.............................................................32
1.5.1. Комментарии.......................................................32
1.5.2. Арифметические операторы.........................................33
1.5.3. Дополнительные операторы присвоения.............................35
1.5.4. Операторы сравнения................................................35
1.5.5. Логические операторы.............................................37
1.5.6. Операторы условного перехода....................................38
1.5.7. Операторы цикла..................................................42
1.5.8. Выражения с операторами..........................................46
1..6. Функции..............................................................48
1.6.1. Встроенные функции...............................................48
1.6.2. Пользовательские функции.........................................50
1.6.3. Выражения с функциями...........................................55
1.7. Встроенные объекты...................................................55
1.7.1. Объект String (Строка).............................................57
1.7.2. Объект Array (Массив).............................................66
1.7.3. Объект Number (Число)............................................74
1.7.4. Объект Math (Математика).........................................79
1.7.5. Объект Date (Дата).................................................85
1.7.6. Объект Boolean (Логический).......................................91
1.7.7. Объект Function (Функция)........................................91
1.7.8. Объект Object......................................................95
1.8. Пользовательские объекты.............................................96
1.8.1. Создание объекта..................................................97
1.8.2. Добавление свойств................................................98
1.8.3. Связанные объекты.................................................99
1.8.4. Пример создания базы данных с помощью объектов..................99
1 ..9. Специальные операторы..............................................103
1.9.1. Побитовые операторы.............................................103
1.9.2. Объектные операторы.............................................104
1.9.3. Комплексные операторы...........................................105
1.10. Приоритеты операторов..............................................106
1.11. Зарезервированные ключевые слова.................................108
Глава 2. Основы создания сценариев..................110
2.1. Из истории программирования........................................НО
2.2. От простого до динамического HTML................................113
2.2.1. Простой HTML.................................................ИЗ
2.2.2. Динамический HTML...........................................116
2.3. Тр,е, что и как делают сценарии.......................................117
2.3.1. Расположение сценариев..........................................117
2.3.2. Обработка событий................................................120
2.3.3. Объекты, управляемые сценариями................................124
2.4. Понятие события.....................................................131
2.4.1. Свойства события.................................................131
2.4.2. Прохождение событий.............................................137
2.4.3. Указание обработчика события в сценарии........................139
2.5. Работа с окнами и фреймами..........................................140
2.5.1. Создание новых окон..............................................141
2.5.2. Фреймы...........................................................144
2.5.3. Плавающие фреймы...............................................150
2.5.4. Всплывающие окна...............................................151
2.6. Динамическое изменение элементов документа.......................154
2.6.1. Использование метода writeQ......................................155
2.6.2. Изменение значений атрибутов элементов..........................155
2.6.3. Изменение элементов..............................................156
2.7. Загрузка изображений...............................................158
2.8. Управление процессами во времени...................................161
2.9. Работа с Cookie.......................................................163
Глава 3. Объектная модель браузера и документа.......169
3.1. Объект window.......................................................169
3.1.1. Свойства window..................................................169
3.1.2. Методы window...................................................171
.3.1.3. События window..................................................171
.3.2. Объект document....................................................172
.3.2.1. Свойства document..............................................172
3.2.2. Коллекции document.............................................173
3.2.3. Методы document................................................173
3.2.4. События document................................................174
3.3. Объект location......................................................175
3.3.1. Свойства location................................................175
3.3.2. Методы location..................................................175
,3.4. Объект history........................................................175
3.4.1. Свойство history....................................................176
3.4.2. Методы history....................................................176
3.5. Объект navigator......................................................176
3.5.1. Свойства navigator.................................................176
3.5.2. Коллекции navigator...............................................176
3.5.3. Методы navigator ,. *.............................................177
3.6. Объект event........................................................177
3.7. Объект screen.......................................................178
3.7.1. Объект TextRange.................................................178
3.7.2. Свойства TextRange...............................................178
3.7.3. Методы TextRange................................................178
Глава 4. Примеры сценариев.........................180
4.1. Простые визуальные эффекты.........................................180
4.1.1. Смена изображений...............................................180
4.1.2. Подсветка кнопок и текста........................................182
4.1.3. Мигающая рамка................................................183
4.1.4. Переливающиеся цветами ссылки..................................184
4.1.5. Объемные заголовки...............................................185
4.1.6. Применение фильтров.............................................188
4.1.7. Эффект печати на пишущей машинке..............................195
4.2. Движение элементов..................................................196
4.2.1. Движение по заданной траектории................................196
4.2.2. Перемещение мышью..............................................203
4.3. Рисование линий....................................................211
4.3.1. Прямая линия.....................................................212
4.3.2. Произвольная кривая..............................................217
4.3.3. Графики зависимостей, заданных выражениями....................220
4.3.4. Графики зависимостей, заданных массивами.......................221
4.3.5. Динамические линии..............................................223
АЛ. Напишем число словами.............................................225
4.5. Обработка данных форм...............................................229
4.6. Меню.................................................................234
4.6.1. Раскрывающийся список........................................234
4.6.2. Настоящее меню...................................................236
4.7. Поиск в текстовой области............................................241
4.8. Таблицы и простые базы данных.....................................244
4.8.1. Доступ к элементам таблицы.......................................244
4.8.2. Добавление и удаление строк таблицы..............................246
4.8.3. Генерация таблиц с помощью сценария.............................247
4.8.4. Простые базы данных............................................248
4.8.5. Сортировка данных таблицы.......................................255
4.8.6. Фильтрация данных таблицы......................................256
4.8.7. Поиск по сайту....................................................258
4.8.8. Вставка HTML-документа в таблицу...............................263
4.8.9. Обработка табличных данных....................................265
4.8.10. Защита веб-страниц с помощью пароля............................267
4.9. Взаимодействие с Flash-мультфильмами...............................271
4.9.1. Передача данных из JavaScript в ActionScript......................272
4.9.2. Вызов сценария JavaScript из сценария ActionScript...............275
Глава 5. Работа с файловой системой
и реестром Windows..............................277
5.1. Создание объекта файловой системы..................................278
5.2. Работа с дисками......................................................279
5.3. Работа с папками.....................................................282
5.3.1, Создание папки.................................................282
5.3.2. Копирование, перемещение и удаление папки.....................283
5.4. Работа с файлами......................,.............................284
5.4.1. Создание текстового файла.......................................284
5.4.2. Копирование, перемещение и удаление файла.....................286
5.4.3. Чтение данных из файла и запись данных в файл...................287
5.4.4. Создание ярлыков.................................................290
5.4.5. Запуск приложений...............................................292
5.5. Работа с реестром.....................................................292
Приложение 1. Руководство по динамическому HTML.....297
Основные понятия........................................................297
Форматирование текстов..................................................303
Стандартные логические стили..........................................304
Управление шрифтом...................................................305
Цвет...................................................................309
Текст заданного формата..............................................310
Списки..................................................................310
Разделительные полосы................................................312
Бегущая строка.......................................................ЗЦ
Специальные и зарезервированные символы.............................314
Графика на веб-страницах...............................................316
Вставка изображений...................................................317
Фоновая графика......................................................319
Ссылки...................................................................320
Текстовые ссылки......................................................320
Графические ссылки....................................................320
URL-адреса ссылок....................................................322
Ссылки в пределах одного документа...................................323
Таблицы.................................................................325
Стили.....................................................................
Позиционирование элементов...........................................337
Статические фильтры..................................................340
Динамические фильтры.................................................343
Таблицы стилей в отдельных файлах..................................347
Вставка Flash-мультфильма в веб-страницу................................347
Вставка звука и видео.....................................................348
Поле ввода данных......................................................350
Переключатели (radiobuttons).............................................351
Флажки.................................................................353
Кнопки...................................................................354
Фреймы..................................................................355
Тег <МЕТА>.............................................................359
Группа HTTP-EQUIV (HTTP-эквиваленты).............................359
Группа NAME (имя)....................................................360
Приложение 2. Справочник по HTML....................362
Теги HTML...............................................................362
Структура документа.................................................362
Заголовки и названия...................................................362
Абзацы и строки........................................................363
Стили..................................................................363
Списки.................................................................364
Таблицы................................................................364
Ссылки.................................................................365
Графика, объекты, мультимедиа и сценарий..............................365
Формы.................................................................365
Фреймы................................................................366
Таблицы стилей.........................................................366
Единицы измерения....................................................366
Свойства динамического HTML.......................................367
События динамического HTML.......................................383
Алфавитный указатель
385
От автора
После выхода в свет моих книг «Сам себе web-мастер» (2001) и «Сам себе web-
дизайнер» (2002) многочисленные читатели часто спрашивали меня о том, как
написать тот или иной сценарий на языке JavaScript для поддержки своей веб-
страницы. Сначала я пытался оперативно отвечать на все вопросы, но вскоре вы-
нужден был оставить это занятие - просто не успевал. Вместе с тем появлением
этой книги я обязан вам, уважаемые читатели. Понятно, что, освоив HTML, начи-
нающие веб-дизайнеры сначала ищут по всему свету образцы недостающих им
сценариев, а затем - рецепты их создания. Рано или поздно они ощущают необ-
ходимость глубже познать язык сценариев, чтобы не гоняться за рецептами, а са-
мим их создавать. Кроме того, на разработку веб-сайтов можно взглянуть не толь-
ко с традиционной точки зрения HTML, но и с позиций языка сценариев, что еще
.более увлекательно. Как и HTML, язык JavaScript с успехом претендует на роль
народного языка общения с компьютером. Он очень популярен, его легко изучать
не искушенным в программировании новичкам. Тем не менее он достаточно вы-
разителен при создании вполне серьезных и полезных приложений как для Веб,
так и для локальных компьютеров.
Хотя JavaScript прост для усвоения и практического использования, полное его
описание занимает более 1000 страниц. Я понимаю, что далеко не каждый, даже
весьма заинтересованный этой темой, отважится на чтение такого фолианта, осо-
бенно если ему предстоит все начинать с нуля. Эта книга - не справочник, а прак-
тическое руководство для самостоятельного изучения JavaScript, не требующее
от читателя предварительной подготовки в области программирования. Я хотел
сделать ее небольшой, понятной и полезной. В ней содержится масса сведений,
рекомендаций и даже рецептов, которые вам могут потребоваться на первых по-
рах создания веб-сайтов и локальных приложений. Однако главная цель книги -
помочь научиться программировать. Если вы никогда ранее не занимались про-
граммированием, то эта книга даст вам ключ к освоению не только JavaScript, но
и любого другого языка программирования. В частности, от JavaScript вы сможе-
те довольно легко перейти к изучению C++ , Java и др. Вообще говоря, стоит толь-
ко освоить один язык, и вам открыты двери к любому другому. Если вы начинаете
с JavaScript, то это очень хороший выбор.
На каком-то этапе проникновения в мир программирования на JavaScript вам,
вероятно, потребуются дополнительные сведения. Осилив предлагаемую книгу,
вы уже будете готовы к их восприятию. Вот тут-то вам и понадобятся справочни-
ки с детальной и полной информацией, которые найдутся в книжных магазинах,
12.
Благодарность
на полках библиотек или в Интернете. В настоящее время наилучшим, на мой
взгляд, справочником по JavaScript является весьма объемная книга Д. Гудмана
«JavaScript. Библия для пользователя».
Материал предлагаемой книги поддерживается моим сайтом, расположенным по
адресу www.admiral.ru/~dunaev. По мере сил и возможностей я периодически об-
новляю его. Свои отзывы, вопросы и пожелания вы можете оставить в гостевой
книге. Так что добро пожаловать!
Благодарность
Я искренне благодарю свою жену Валентину за понимание и внимательное отно-
шение ко мне в период работы над книгой.
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу электронной по-
чты comp@piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства http://www.piter.com вы найдете подробную информа-
цию о наших книгах.
Введение
Язык программирования, как и любой другой язык (естественный, например),
предназначен для коммуникации, то есть связи между говорящим и слушающим.
В программировании говорящим является программист, а слушателем - интер-
претатор языка, некоторая компьютерная программа, понимающая этотязык и вы-
полняющая действия в соответствии с тем, что она поняла.
Было время, когда считалось, что для облегчения общения с компьютером необ-
ходимо создать язык, достаточно близкий к естественному. Эта идея в конечном
счете не выдержала испытаний временем, хотя и породила несколько прекрас-
ных языков программирования. Часто бывает, что побочные эффекты некоей де-
ятельности превосходят ожидания. Мы испытываем трудности общения и на ес-
тественном языке; что уж говорить о специализированных языках, тем более
о языках общения с компьютером... Проблема решается на удивление просто. Глав-
ное здесь - понять корень или причину проблемы. Вся сложность заключается
не в языке, а в культуре или способе его употребления. В конце концов, язык пред-
ставляет собой лишь нормативную базу, а люди используют ее лишь так и в той
мере, как смогли или как им показалось достаточным для своих житейских нужд.
Когда люди, сами того не желая, размывают небрежной речью нормативную базу
языка, они разрушают систему коммуникации не только между собой, но и между
последующими поколениями. А как соблазнительно использовать слэнг и жар-
гон! При этом возникает иллюзия причастности к особой, исключительной груп-
пе, некоей профессиональной касте. Кажется, что это выделяет нас из толпы. По-
нятно, что для становления личности необходимо выделиться из среды, но не
настолько, чтобы выпасть на обочину магистрали, по которой движется все наше
общество. На обочине вас никто не заметит, пролетая мимо, а вам самим останет-
ся только копошиться в грязи, чтобы потом рассказать кому-нибудь о перипетиях
вашего лихого путешествия по жизни. Но соблазны на то нам и даны, чтобы мы
могли показать свою способность им противостоять.
Любой язык, на котором хотя бы кто-нибудь говорит, - живой. Практика исполь-
зования языка стимулирует развитие его нормативной базы и тем самым поддер-
живает его существование. Владимир Даль не описывал нормы русского языка,
а фиксировал словоупотребление, поэтому его словарь и называется словарем «жи-
вого великорусского языка». Что касается искусственных языков, то есть языков
программирования, то трудности их освоения новичками обусловлены, главным
образом, недостатком практики программирования. Стандартный (формальный)
способ описания языка хорош для тех, кто уже изучал любой язык программиро-
14_
Введение
вания. Для новичков же стандартный, тем более формальный способ изложения
правил языка является, мягко говоря, неприемлемым. Мы постигаем нечто ина-
че, чем излагаем уже освоенное. Эта хорошо известная истина, к сожалению, по-
чему-то часто забывается и учениками, и преподавателями. Однако авторы почти
всех руководств по языку, снискавших широкое признание и добившихся успеха,
следовали этому основному принципу.
Давайте для пробы пера напишем и выполним хотя бы элементарную, но все же
полноценную программу на JavaScript, чтобы убедиться в реальности нашей за-
теи изучить программирование. Откроем простой текстовый редактор, например
Блокнот (Notepad) Windows (рис. B.I), и введем с клавиатуры следующий текст:
WScript.echo("Привет!")
Я ршЫ is - Блокнот
Правка
Рис. B.I. Код программы в окне текстового редактора
Мы написали элементарную программу на языке JavaScript, состоящую из одной
строки. Сохраним эту программу в файле под именем, например, proba.js. Имя
файла может быть произвольным, а вот расширение js указывает, что он содер-
жит выражения, написанные на языке JavaScript. Чтобы сохранить файл, выпол-
ните команду меню Файл > Сохранить как. В открывшемся диалоговом окне из рас-
крывающегося списка Тип файла выберите Все файлы (*.*), а в поле Имя файла
введите с клавиатуры имя файла с расширением js, например proba.js (рис. В.2).
В заключение щелкните на кнопке Сохранить.
Рис. В.2. Диалоговое окно сохранения файла
Введение
15
Итак, наша программа написана и сохранена в файле. Чтобы ее выполнить, в Про-
воднике Windows дважды щелкните на имени файла proba.js. В результате на эк-
ране появится диалоговое окно со словом «Привет!» и кнопкой ОК (рис. В.З).
Щелчок на этой кнопке закроет окно. Так работает наша программа.
Рис. В.З. Диалоговое окно с сообщением, созданное программой
Теперь немного модифицируем нашу программу. Откроем Блокнот и напишем
в нем следующие строки:
<html>
<script>
alert("Привет")
</script>
</html>
Сохраним эту программу в файле с именем proba.htm. Если мы ее выполним, то
в результате откроется окно веб-браузера, а на его фоне - диалоговое окно со сло-
вом «Привет!» и кнопкой ОК (рис. В.4).
Рис. В.4. Диалоговое окно с сообщением на фоне браузера Internet Explorer
16.
Введение
Итак, эффекты выполнения рассмотренных выше двух программ почти одинако-
вы: обе программы выводят на экран диалоговое окно с сообщением. Различие
состоит в том, что в первом случае диалоговое окно с сообщением появляется само
по себе, а во втором - на фоне окна браузера. Дело в том, что эти почти одинако-
вые программы исполняются различными интерпретаторами языка. В первом
случае это сервер сценариев Windows, называемый Windows Scripting Host, а во
втором - веб-браузер. Вообще говоря, редакции языка JavaScript, понимаемые
этими интерпретаторами, несколько различаются, но между ними много обще-
го-в смысле как синтаксиса, так и принципов построения. Поэтому можно гово-
рить о различных редакциях одного и того же языка.
Таким образом, мы столкнулись с тем, что различные исполнительные системы
(интерпретаторы) воспринимают различные редакции одного и того же языка.
Это происходит из-за того, что только благодаря интерпретаторам можно гово-
рить о языке как о чем-то реальном. Представьте себе следующую ситуацию. До-
пустим, мы сами придумали некий язык программирования. Чтобы на нем дей-
ствительно можно было писать программы, необходимо создать исполнительную
систему - интерпретатор этого языка. Интерпретатор сам является программой,
написанной на другом языке программирования и, возможно, другими людьми.
Он может воспринимать декларированный нами язык в полной мере или только
частично. А может случиться и так, что некоторые элементы языка интерпрета-
тор будет воспринимать по-своему, не так, как это изначально предполагалось ав-
торами. Поэтому появляются различные редакции языка, каждая для своего ин-
терпретатора. Например, редакции JavaScript, понимаемые Microsoft Internet
Explorer и браузерами Netscape, значительно отличаются друг от друга. С другой
стороны, интерпретаторы усовершенствуются, появляются их новые версии. Те
фрагменты языка, которые не воспринимались старыми версиями, становятся до-
ступными в новых. Иначе говоря, интерпретаторы стремятся соответствовать не-
которому стандартному подмножеству языка. Язык также может развиваться
с учетом практики его использования и проблем, возникающих при разработке
интерпретаторов. Постепенно формируется стандарт языка, который должен под-
держиваться интерпретаторами различных производителей.
На момент выхода в свет этой книги современной являлась версия 1.5 JavaScript.
Все рассмотренные в книге конструкции языка и примеры сценариев работают
в браузере Microsoft Internet Explorer 6.0 для Windows; многие из них подходят
и для Internet Explorer 4+ для Windows, но не все, - возможно, они будут коррек-
тно выполняться в Internet Explorer 5 для Macintosh. Некоторые описанные в книге
средства не будут работать в Netscape Navigator версии 4 и старше. Средства, вос-
принимаемые только браузерами, отличными от Internet Explorer для Windows,
в этой книге не рассматриваются вообще. Если не оговаривается особо, то описы-
ваемые в книге средства применимы для Internet Explorer 4 для Windows и стар-
ше, хотя некоторые из них могут работать и в более ранних версиях. Если у вас
установлен Internet Explorer для Windows версии 5.5 и старше, то все сценарии,
приведенные в книге, будут работать. Из-за ограниченного объема книги в ней
отражены лишь основные возможности JavaScript, кое-что пришлось оставить без
внимания. Если вы чего-то не найдете, то обращайтесь к другим, более специали-
зированным или более объемным книгам.
Введение.
.17
Глава 1 посвящена основным элементам собственно языкаJavaScript. Глава 2 зна-
комит читателя с основными понятиями и важнейшими объектами, используе-
мыми при создании сценариев, которые выполняются браузером. По существу,
это введение в мир разработки сценариев. Обзор объектной модели браузера и до-
кумента приводится в главе 3. Материал этой главы можно использовать в каче-
стве краткого справочника и пропустить при первом чтении. Он понадобится для
получения ориентации в пространстве объектов. Примеры сценариев, решающих
конкретные практические задачи, представлены в главе 4. Хотя примеры присут-
ствуют во всех главах, в этой главе они иллюстрируют комплексное применение
различных средств JavaScript и приближены к типовым задачам веб-дизайна. Гла-
ва 5 посвящена работе с файловой системой компьютера и реестром Windows с
помощью программ на JavaScript. Ее можно читать отдельно, поскольку материал
не связан с предыдущими главами. В приложении приведены руководство и спра-
вочник по HTML.
Изучение материала книги может быть успешным только при активном отноше-
нии читателя. Хотя описываемые в книге программы вполне работоспособны, их
коды, скорее всего, несовершенны и могут быть улучшены, модифицированы для
решения других задач либо интегрированы с другими программами в каком-то
сложном программном проекте. Если вы попробуете что-либо с ними сделать, то
многому научитесь и многое поймете. Это - магистральный путь познания про-
граммирования. Итак, мы начинаем.
Глава 1. Основы JavaScript
1.1. Где писать программы и как их запускать
В этой главе мы рассмотрим основы языка JavaScript: важнейшие понятия и син-
таксис (правила построения выражений). Приводимые примеры желательно са-
мостоятельно выполнить на компьютере. Это можно сделать по-разному, но по
крайней мере на первом этапе я рекомендую воспользоваться самым простым и до-
ступным способом: в качестве интерпретатора (исполнительной системы) про-
грамм на JavaScript возьмите веб-браузер. Я работал с Internet Explorer 6.0. Боль-
шинство приведенных в книге примеров работают и в версии 5.0 этого браузера.
В качестве редактора ваших программ выберите какой-нибудь простой тексто-
вый редактор, например Блокнот Windows. Откройте текстовый редактор и со-
здайте в нем заготовку файла, который вы будете потом редактировать, вводя
экспериментальные выражения или даже целые программы. А именно введите
в рабочее поле редактора следующий текст:
<HTML>
<HEAD><TITLE>npMMepbi</TITLE></HEAD>
<SCRIPT>
</SCRIPT>
</HTML>
По существу, это HTML-документ, определяющий пустую веб-страницу. Сохра-
ните этот файл на диске, например под именем пример.htm. Расширение имени
файла должно быть htm или html, поскольку мы хотим, чтобы он исполнялся в веб-
браузере. В этом файле мы написали теги языка HTML. Выражения на языке
JavaScript следует записывать между тегами <SCRIPT> и </SCRIPT>. При изучении
этой главы записывайте в каждой строке не более одного выражения на языке
JavaScript. Заканчивайте строку нажатием на клавишу Enter, чтобы перейти к но-
вой строке. Ниже приведен пример программы:
<HTML>
<НЕАО><Т1Т1Е>Примеры< /TITLE ></HEAD>
<SCRIPT>
х = 5
у = х + 3
alert(y)
</SCRIPT>
</HTML>
1.1. Где писать программы и как их запускать
19
При выполнении учебных примеров обычно требуется вывести на экран оконча-
тельные или промежуточные данные. Для этого можно использовать метод alertQ,
указав в круглых скобках то, что требуется вывести на экран. В приведенном выше
примере метод alert(y) выведет на экран диалоговое окно, в котором отобразит
значение переменной у (в данном случае - число 8). Если не вставлять строку
alert(y), то программа выполняется без отображения результата. Если вы хотите
выводить результаты вычислений не в диалоговом окне, а непосредственно в окне
веб-браузера, то вместо alert(y) напишите следующее выражение:
document.writeln(у)
Чтобы открыть файл (в нашем случае это примеры.htm) в веб-браузере и выпол-
нить содержащуюся в нем программу, достаточно просто дважды щелкнуть левой
кнопкой мыши на нем в окне Про в од н икаWindows. Если теперь потребуется открыть
этот файл в окне текстового редактора, то щелкните правой кнопкой мыши где-ни-
будь на свободном пространстве в окне браузера и в контекстном меню выберите
команду Просмотр в виде HTML Можно также воспользоваться и командой меню Вид >
В виде HTML В результате откроется окно текстового редактора с текстом вашей про-
граммы (рис. 1.1). Внесите необходимые изменения и сохраните их на диске (Файл >
Сохранить). Чтобывеб-браузерсмоготобразитьизмененный файл, выполните коман-
ду Вид > Обновить (рис. 1.2). Таким образом, переходя от текстового редактора к брау-
зеру и обратно, можно разрабатывать и отлаживать свои программы.
Рис. 1.1. Текстовый редактор Блокнот с программой на фоне браузера Internet Explorer
Создавать программы на JavaScript можно и с помощью программ, специально
предназначенных для разработки веб-сайтов, - например Microsoft FrontPage или
Macromedia Dreamweaver (рис. 1.3). Однако здесь мы не будем рассматривать эти
средства.
20
Глава 1. Основы JavaScript
Рис. 1.2. Результат выполнения программы из файла пример.htm
<HTML>
l<HEAD><TITLE>npMMepbi</T1TLE></HEAD>
•<SCRIPT>
-X +
rt(y)
I
•</SCRIPT>
' </HTML>
1
jU.
Рис. 1.3. Окно Dreamweaver 4.0 - программы для разработки веб-сайтов
Наконец, я предлагаю вам быстро создать свой собственный редактор программ.
Для этого следует написать небольшой HTML-код и сохранить его на диске
1.1. Где писать программы и как их запускать
21
в файле с расширением .htm или .html. Этот файл можно открыть в браузере как
обычную веб-страницу. Вот код предлагаемого редактора:
<HTML>
<НЗ>Редактор кодов JavaScript</H3>
Код:<Ы>
<TEXTAREA id="mycode" ROWS=10 COLS=60></TEXTAREA>
<р>Результат:<Ы>
<TEXTAREA id="myrezult" ROWS= 3 COLS=60></TEXTAREA>
<P>
<BUTTON onclick="document.all.myrezult.value=eval(mycode.value)">
Выполнитb</BUTTON>
<BUTTON onclick="document.all.mycode.value='
document.all.myrezult.value=''">
04HCTHTb</BUTTON>
<P>
<! Комментарий >
Введите выражения в верхнее поле.
Выражения разделяются точкой с запятой.
М о ж н о также писать каждое выражение в отдельной строке.
Чтобы закончить одну строку и перейти к другой, нажмите клавишу Enter.
</HTML>
Редактор кодов JavaScript
Код
x = 2+3
у = х+ 5
*•]
Результат:
10
21
Выполнить ' Очисти гь
Введите выражения в верхнее поле. Выражения разделяются точкой с запятой.
Можно также писать каждое выражение в отдельной строке. Чтобы закончить
1 одну строку и перейти к другой, нажмите клавишу Enter.
Гете*»
JP
0И КГМГЫаГОр
Рис. 1.4. Редактор программ JavaScript, сделанный с помощью HTML
22.
.Глава 1. Основы JavaScript
В веб-браузере этот HTML-код выведет две текстовых области: одна служит для
■• ввода выражений на языке JavaScript, а другая - для отображения результатов
этого кода. Кроме текстовых областей создаются две кнопки: одна для выполне-
ния введенного кода и отображения результатов, а вторая - для очистки тексто-
вых областей. В поле результатов выводится значение, возвращаемое последним
выражением введенного кода. Обратите внимание, что в поле для кода следует
вводить только выражения на языке JavaScript, но не теги HTML.
Здесь мы не будем разбирать, как устроен предлагаемый код редактора. Отметим
лишь, что в его основе лежат простые сценарии на языке JavaScript, выполняю-
щие роль обработчиков события, например щелчка кнопкой мыши (onclick). На
рис. 1.4 показано, как выглядит наш редактор в окне браузера Internet Explorer.
СОВЕТ
Если вы решитесь использовать самодельный редактор, то при возникновении ошибок
в ваших программах (сообщение об ошибке отображается в статусной строке веб-браузе-
ра) выполните команду меню браузера Вид > Обновить.
1.2. Ввод и вывод данных
В JavaScript предусмотрены довольно скудные средства для ввода и вывода дан-
ных. Это вполне оправданно, поскольку JavaScript создавался в первую очередь
как язык сценариев для веб-страниц. Основой веб-страниц является код, напи-
санный на языке HTML, который специально рассчитан на форматирование ин-
формации и создание пользовательского интерфейса. Поскольку сценарии на
JavaScript хорошо интегрируются с HTML-кодом, постольку для ввода и вывода
данных вполне подойдут средства HTML Если вы пишете программу наJavaScript,
которая будет выполняться веб-браузером Internet Explorer, то можете восполь-
зоваться тремя стандартными методами для ввода и вывода данных: alertQ,
promptQ и confirmQ. Рассмотрим эти методы браузера подробнее.
1.2.1. alert
Данный метод позволяет выводить диалоговое окно с заданным сообщением
и кнопкой ОК. Синтаксис соответствующего выражения имеет следующий вид:
а1еГгТ("сообщение)
Если ваше сообщение конкретно, то есть представляет собой вполне определен-
ный набор символов, то его необходимо заключить в двойные или одинарные ка-
вычки. Например, alert("Привет :ем!") (рис. 1.5). Вообще говоря, сообщение пред-
ставляет собой данные любого типа: последовательность символов, заключенную
в кавычки, число (в кавычках или без них), переменную или выражение.
Диалоговое окно, выведенное на экран методом alert(), можно убрать, щелкнув на
кнопке ОК. До тех пор пока вы не сделаете этого, переход к ранее открытым окнам
невозможен. Окна, обладающие свойством останавливать все последующие дей-
ствия пользователя и программ, называются модальными. Таким образом, окно,
создаваемое посредством alertQ, является модальным.
1.2. Ввод и вывод данных
23
[ Microsoft Internet Explorer
Ш
: Прибег ьс
~l
Рис. 1.5. Диалоговое окно, созданное методом а!ег1("Привет всем!")
Выше мы уже говорили, что метод а1ег±()можно использовать для вывода проме-
жуточных и окончательных результатов программ при их отладке. При этом вы
можете вывести результат вычисления какого-либо выражения и приостановить даль-
нейшее выполнение работы программы до тех пор, пока не щелкнете на кнопке ОК.
1.2.2. confirm
Метод confirm позволяет вывести диалоговое окно с сообщением и двумя кнопка-
ми - ОК и Отмена (Cancel). В отличие от метода alert этот метод возвращает логи-
ческую величину, значение которой зависит от того, на какой из двух кнопок щелк-
нул пользователь. Если он щелкнул на кнопке ОК, то возвращается значение true
(истина, да); еслиже он щелкнул на кнопке Отмена, то возвращается значение false
(ложь, нет). Возвращаемое значение можно обработать в программе и, следова-
тельно, создать эффект интерактивности, то есть диалогового взаимодействия
программы с пользователем. Синтаксис применения метода confirm имеет следу-
ющий вид:
confiгт(сообщение)
Если ваше сообщение конкретно, то есть представляет собой вполне определен-
ный набор символов, то его необходимо заключить в кавычки, двойные или оди-
нарные. Например, confirm("Bbi действительно хотите завершить работу?") (рис. 1.6).
Вообще говоря, сообщение представляет собой данные любого типа: последова-
тельность символов, заключенную в кавычки, число (в кавычках или без них),
переменную или выражение. Если вы еще не знаете, что такое переменная и вы-
ражение, то вскоре восполните этот пробел.
1 Microsoft InternetExploiei
И
з
фёфЦМГ» работу?;;:;
|l 1Ж1 1
Отмена
Рис. 1.6. Диалоговое окно, созданное методом confirm
Диалоговое окно, выведенное на экран методом confirm(), можно убрать щелчком
на любой из двух кнопок - ОК или Отмена. До тех пор пока вы не сделаете этого,
переход к ранее открытым окнам невозможен. Окна, обладающие свойством оста-
навливать все последующие действия пользователя и программ, называются мо-
дальными. Таким образом, окно, создаваемое посредством confirmQ, является
24
Глава 1. Основы JavaScript
модальным. Если пользователь щелкнет на кнопке ОК, то метод вернет логиче-
ское значение true (ис тина, да), а если он щелкнет на кнопке Отмена, то возвраща-
ется логическое значение false (ложь, нет). Возвращаемое значение можно затем
обработать в программе и, следовательно, создать эффект интерактивности, то -
есть диалогового взаимодействия программы с пользователем.
1.2.3. prompt
Метод prompt позволяет вывести на экран диалоговое окно с сообщением, а также
с текстовым полем, в которое пользователь может ввести данные (рис. 1.7). Кро-
ме того, в этом окне предусмотрены две кнопки: ОК и Отмена (Cancel). В отличие от
методов alertQ и confirm() данный метод принимает два параметра: сообщение и зна-
чение, которое должно появиться в текстовом поле ввода данных по умолчанию. Если
пользователь щелкнет на кнопке О К, то метод вернет содержимое поля ввода данных,
аесли он щелкнет на кнопке Отмена, то возвращается логическое значение false (ложь,
нет). Возвращаемое значение можно затем обработать в программе и, следовательно,
создать эффект интерактивности, то есть диалогового взаимодействия программы
с пользователем. Синтаксис применения метода prompt имеет следующий вид:
prompt(сообщение, значение_поля_ввода_данных)
J Запрос пользователю
А ::
Щ
•Запрос сценария
здргсЕ nsil
I
шщт"т...........
;°-;Imuririu@gftresim г J
Рис. 1.7. Диалоговое окно, созданное методом prompt
Параметры метода prompt() не являются обязательными. Если вы их не укажете,
то будет выведено окно без сообщения, а в поле ввода данных подставлено значе-
ние по умолчанию - undefined (не определено). Если вы не хотите, чтобы в поле
ввода данных появлялось значение по умолчанию, то подставьте в качестве зна-
чения второго параметра пустую строку "". Например, prompt("Введите Ваше имя,
пожалуйста", "")(рис. 1.8).
Запрос сценария:
Отмена я
Рис. 1.8. Диалоговое окно, созданное методом promptQбез параметров
Диалоговое окно, выведенное на экран методом promptQ, можно убрать щелчком
на любой из двух кнопок- ОКили Отмена. Как и в случае использования метода
confirmQ, переход к ранее открытым окнам невозможен.
1.3. Типы данных
25
1.3. Типы данных
В любом языке программирования очень важно понятие типа данных. Если не
осознать его с самого начала, то потом придется часто сталкиваться со странным
поведением созданной вами программы. Поэтому мы рекомендуем внимательно
отнестись к данному разделу, чтобы потом не возвращаться к нему, теряя время
на элементарные вещи. (Табл. 1.1.)
Данные, которые хранятся в памяти компьютера и подвергаются обработке, мож-
но отнести к различным типам. Понятие типа данных возникает естественным
образом, когда необходимо применить к ним операции обработки. Например, опе-
рация умножения применяется к числам, то есть к данным числового типа. Это
известно еще из начальной школы. А что получится, если умножить слово «Вася»
на число 5? Поскольку трудно дать вразумительный ответ на этот вопрос, напра-
шивается вывод: некоторые операции не следует применять к разнотипным дан-
ным. Мы также не знаем, что должно получиться в результате умножения слов
«Вася» и «Маня», поэтому заключаем, что определенные операции вообще не
применимы к данным некоторых типов. С другой стороны, существуют опера-
ции, результат которых зависит от типа данных. Например, операция сложения,
обозначаемая символом « + », может применяться и к двум числам, и к двум стро-
кам, состоящим из произвольных слов. В первом случае результатом применения
этой операции будет некоторое число, а во втором - строка, получающаяся путем
приписывания второй строки к концу первой. В случае строк операцию сложе-
ния еще называют склейкой или конкатенацией. Операции, применимые к раз-
личным типам данных, но обозначаемые одним и тем же символом, называют также
перегруженными. Так, операция, обозначаемая символом < t , является перегру-
женной: применительно к числам она выполняет арифметическое сложение этих
чисел, а применительно к строкам символов - склейку (приписывание, конка-
тенацию).
Таблица 1.1. Типы данных в JavaScript
Тип данных Примеры
Описаниезначений
Строковый или
символьный (string)
Числовой (number)
Логический
(булевский, boolean)
Null
Объект (object)
Функция (function)
"Привет"
"д.т. 123-4567"
3.14 -567 +2.5
true false
Последовательность символов, заключенная
в кавычки, двойные или одинарные
Число, последовательность цифр, перед которой
может быть указан знак числа (+ или-); перед
положительными числами не обязательно ставить
знак «+ »; целая и дробная части чисел
разделяются точкой. Число записывается без
кавычек
true (истина, да) или false (ложь, нет); возможны
только два значения
Отсутствие какого бы то ни было значения
Программныйобъект, определяемый своими
свойствами. В частности, массив также является
объектом
Определение функции - программного кода,
выполнение которого может возвращать некоторое
значение____________________________________
2 6 • Г л а в а 1 . Основы JavaScript
На данном этапе следует обратить особое внимание на различия в представлении
числовых и строковых (символьных) данных. Числа как данные числового типа
всегда представляются без кавычек. Для их написания мы используем цифры и,
при необходимости, знак числа и разделительную точку. Строковые данные за-
ключаются в кавычки, двойные «"» или одинарные ' Например, запись -345.12
представляет число, а запись "-345.12* - строку символов. Это данные различ-
ных типов, хотя мы и можем сказать, что их содержанием является одно и то же
число. Но это не что иное, как обыденная интерпретация данных или, как еще
говорят, семантика (смысл) данных. С точки зрения языка программирования
число (точнее, данные числового типа) можно корректно использовать в арифме-
тических операциях, а строки - в строковых операциях. Что означает «корректно
использовать»? То, что использование данных в языке программирования долж-
но соответствовать нашим традициям, не связанным с программированием.
Например, обращение с числами корректно, если оно подчиняется правилам ма-
тематики; обращение со строками корректно, если не противоречит правилам ре-
дакторской правки текста (вставка, удаление, склейка фрагментов и т. п.). Язык
программирования призван обеспечить в той или иной мере выполнение опера-
ций, имеющих аналоги в обычной человеческой деятельности. Этой цели служит,
в частности, и понятие типов данных.
Заметим, что строка не содержащая ни одного символа (даже пробела), назы-
вается пустой. При этом строка, содержащая хотя бы один пробел (например,' ">,
не пуста.
Данные логического типа могут иметь одно из двух значений: true или false. Эти
значения записываются без кавычек. Значение true означает истину (да), a false -
ложь (нет). Обычно эти значения получаются в результате вычисления выраже-
ний с использованием операций сравнения двух данных, а также логических опе-
раций (И, И Л И, Н Е). Например, результатом вычисления выражения 2 < 3 являет-
ся, очевидно, значение true (действительно, число 2 меньше числа 3). Логический
тип данных называют еще булевским (boolean) в честь английского математика
Джона Буля, придумавшего алгебру для логических величин.
Другие типы данных (Null, Object и Function) будут рассмотрены в следующих раз-
делах, после изучения основ языка.
При создании программ на JavaScript за типами данных следит сам программист.
Если он перепутает типы, то интерпретатор не зафиксирует ошибки, а попытает-
ся привести данные к некоторму типу, чтобы выполнить указанную операцию.
Вам следует разобраться, к какому именно типу приводится смесь данных раз-
личного типа. Многие языки программирования, в том числе С и Pascal, не обла-
дают этим CJiV п юм, они требуют явного указания типа данных.
Например, если вЪг напишете выражение 5+"Вася", то результатом его вычисле-
ния будет строка символов "5 В а с я ". я .Таким образом, интерпретатор, столкнувшись
с выражением сложения числа и строки символов, переводит число в строку, со-
держащую это число, а затем выполняет операцию сложения двух строк. Сложе-
ние двух строк в JavaScript дает в результате строку, получающуюся путем при-
писывания второй строки к концу первой.
1.3. Типы данных
27
Результатом вычисления выражения 2+3 будет число 5, а выражения 2+"3" - стро-
ка "23", состоящая из двух цифровых символов. Как нетрудно заметить, в случае
применения операции сложения к числу и строке символов интерпретатор пре-
образует число в строку символов и возвращает результат вычисления выражения
тоже в виде строки символов. Иначе говоря, в случае смысловой несогласованно-
сти типов данных интерпретатор использует некоторые правила их согласования,
принятые по умолчанию. В результате могут появиться трудно выявляемые ошиб-
ки. С другой стороны, эту особенность языка можно использовать для написания
изящных и компактных кодов, соблюдая известную осторожность. Лично мне
нравятся языки с так называемыми свободными типами данных.
Для преобразования строк в числа в JavaScript предусмотрены встроенные функ-
ции parselntQ и parseFloatQ. Что такое функция, мы подробно расскажем ниже
в одном из разделов этой главы. А сейчас считайте, что это выражение с круглы-
ми скобками, в которых можно указывать параметры. В результате вычисления
функции получается некоторое значение.
Функция parseInt(cipOKa, основание) преобразует указанную в параметре строку
в целое число в системе счисления по указанному основанию (8, 10 или 16).
Если основание не указано, то предполагается 10, то есть десятеричная систе-
ма счисления.
Примеры
parseIntC"3.14") // результат= 3
parseInt("-7.875") // результат = -7
parselnt("435") // результат=435
// результат = NaN, то есть не является числом
parselnt ("15" ,8) // результат= 13
parse!nt ("0xFF",16) // результат=255
Обратите внимание, что при преобразовании в целое число округления не проис-
ходит: дробная часть просто отбрасывается.
Функция parseFloat(cipoKa) преобразует указанную строку в число с плавающей
разделительной (десятичной, основание) точкой.
Примеры
parseFloat ("3.14") // результат= 3.14
parseFloat("-7.875") // результат = -7.875
parseFloat ("435") // результат = 435
parseFloat ("Вася") // результат = NaN, то есть не является числом
parseFloat ("17.5") // результат = 435
Задача преобразования чисел в строки возникает реже, чем обратное преобразо-
вание. Чтобы преобразовать число в строку, достаточно к пустой строке приба-
вить это число, то есть воспользоваться оператором сложения « + ». Например,
вычисление выражения ""+3.14 даст в результате строку "3.14". Об операторах
будет подробно рассказано ниже.
Для определения того, является ли значение выражения числом, служит встроен-
ная функция 1$МаМ(значение). Вычисление этой функции дает результат логиче-
ского типа. Если указанное значение не является числом, функция возвращает
true, иначе - false. Однако здесь понятие «число» не совпадает с понятием «зна-
чение числового типа». Функции isNaNQ считает числом и данные числового
28Г
Глава 1. Основы JavaScript
типа, и строку, содержащую только число. Логические значения также иденти-
фицируются как числа. При этом значению true соответствует 1,азначению false -
0. Таким образом, если isNaN возвращает false, то это означает, что значение пара-
метра имеет числовой тип, либо является числом, преобразованным в строковый
тип, либо является логическим (true или false).
Примеры
isNaN(123) // результат false (то есть это - число)
isNaN("123") /* результат false (то есть это - число,
хотя и в виде строки) */
i sNaN ("50 рублей") // результат true (то есть это - не число)
isNaN(true) // результат false
isNaN(false) // результат false
isNaNTBacfl") // результат true (то есть это - не число)
В заключение данного раздела рассмотрим так называемые служебные символы,
которые можно вставлять в строки.
Символ__________________________Описание_________________________________________
\п Новая строка
\t Табуляция
\f Новая страница
\Ь Забой
\Г______________________________ Возврат каретки ___________________________________
Эти символы обычно используются при формировании строковых данных для их
последующего отображения. Например, если мы хотим, чтобы сообщение, выводи-
мое на экран в браузере Internet Explorer с помощью функции alert(), отображалось
в виде нескольких строк, то следует использовать служебный символ п\ (рис. 1.9):
а!егП"Фамилия - ИвановХпИмя - ИванХпОтчество - Иванович")
Microsoft Inletnel Exptor Щ Ш'
$
Имя:; Йь&а Dtmbctbo > Ивднавкч
щ 1
:::■;
Рис. 1.9. Окно, создаваемое функцией alertQ, в случае когда строка
сообщения содержит два символа п\
Иногда требуется отобразить символы, имеющие служебное назначение. Как, на-
пример, отобразить кавычки, если они используются для задания строки симво-
лов? Для этой цели используется < - (обратная косая черта). Например, чтобы
отобразить строку Акционерное общество "Рога и копыта" вместе с кавычками, сле-
дует написать такую строку: "Акционерное общество \" Рога и копыта \"". Обратная
косая черта указывает, что следующий непосредственно за ней символ не нужно
интерпретировать как символ синтаксиса языка. В нашем примере она показыва-
ет, что кавычки не являются признаком начала или окончания строковых дан-
1.4. Переменные и оператор присвоения29
29
ных, а являются просто элементом этих данных. В Internet Explorer выполнение
выражения а1еИ:("Акционерное общество \"Рога и копыта\"") даст результат, пока-
занный на рис. 1.10.
::. '.. f \ •:Ак.ционе|рно© общвсгтво"Рога илоПЫГ^.
\CZMZ,k
Рис. 1.10. Выполнение выражения а!ег1:("Акционерное общество \"Рога и копыта\"")
Заметим, что эту же задачу можно решить и несколько иначе, используя кавычки
различных видов (двойные и одинарные). Во-первых, можно написать так: 'Акци-
онерное общество "Рога и копыта"'. В этом случае мы использовали одинарные ка-
вычки в качестве признаков начала и конца всей строки. Во-вторых, можно поме-
нять местами кавычки различных видов: "Акционерное общество 'Рога и копыта'".
Однако в этом случае название акционерного общества будет отображаться в оди-
нарных кавычках. Наконец, можно внешние кавычки оставить двойными, а внут-
ренние одинарные кавычки продублировать: "Акционерное общество "Рога и копы-
та"". Тогда при отображении строки внутренние кавычки будут заменены на
двойные.
Неправильное использование кавычек довольно часто вызывает проблемы у
новичков.
ВНИМАНИЕ --
Кавычки, обрамляющие строковые данные, должны быть одного вида и использоваться
парами.
Интерпретатор, обнаружив в тексте программы кавычки, будет искать еще кавычки
такого же вида, считая все находящееся между ними строковыми данными.
ВНИМАНИЕ -
Внутри строки, заключенной в кавычки одного вида, можно использовать кавычки другого
вида (иначе интерпретатор либо выдаст сообщение об ошибке, либо неправильно воспри-
мет данные).
1.4. Переменные и оператор присвоения
Что произойдет, если в программе просто написать данные какого-либо типа, на-
пример число 314? Интерпретатор выполнит эту запись, разместив ее во внутрен-
нем формате где-то в памяти компьютера. Вот и все. Чтобы сохранять данные
в памяти и в то же время оставлять их доступными для дальнейшего использова-
ния, в программах используются переменные.
30.
.Глава 1. Основы JavaScript
1.4.1. Имена переменных
Переменную можно считать контейнером для хранения данных. Данные, сохра-
няемые в переменной, называют значениями этой переменной. Переменная име-
ет имя - последовательность букв, цифр и символа подчеркивания без пробелов
и знаков препинания, начинающуюся обязательно с буквы или символа подчер-
кивания.
Примеры правильных имен переменных: myFamily, my_adress, _x, tel412_3456.
Примеры неправильных имен переменных: 512group, myadress, tel:412 3456.
При выборе имен переменных нельзя использовать ключевые слова, то есть сло-
ва, используемые в определениях конструкций языка. Например, нельзя выби-
рать слова var, if, else, const, true, false, function, super, switch и ряд других. Список
ключевых слов приведен в разделе 1.11. Имя должно отражать содержание пере-
менной. Если имя состоит из нескольких слов, то между ними можно вводить сим-
вол подчеркивания или писать их слитно, начиная каждое слово с прописной бук-
вы. Вот примеры: my_first_adress,myFirstAdress. Иногда в качестве первого символа
имени используют букву, указывающую на тип данных (значений) этой перемен-
ной: с - строковый (character), n - числовой (number), b -логический (boolean),
о - объект (object), a - массив (array). Например cAdress, nCena, aMonth.
JavaScript является регистрозависимым языком. Это означает, что изменение ре-
гистра символов (с прописных на строчные и наоборот) в имени переменной при-
водит к другой переменной. Например: variable, Variable и vaRiabLe - различные
переменные.
СОВЕТ -
Выработайте для себя правила образования имен, которые не должны противоречить ука-
занным выше требованиям. Если им следовать, то уменьшится вероятность ошибок в ва-
ших программах.
1.4.2. Создание переменных
Создать переменную в программе можно несколькими способами:
. С помощью оператора присвоения значений в формате:
имя_переменной = значение
Оператор присвоения обозначается символом равенства «=».
Пример:
myName = "HBan"
• С помощью ключевого слова var (от variable - переменная) в формате:
var имя_переменной
В этом случае созданная переменная не имеет никакого значения, но может его
получить в дальнейшем с помощью оператора присвоения.
Пример:
var myName
myName = "Иван"
1.4. Переменные и оператор присвоения.
31
• С помощью ключевого слова var и оператора присвоения в формате:
var имя_переменной = значение
Пример
var myName = "Иван"
Строка кода программы с ключевым словом var задает так называемую' инициа-
лизацию переменной и для каждой переменной используется один раз. Тип пере-
менной определяется типом значения, которое она имеет. В отличие от многих
других языков программирования, при инициализации переменной не нужно опи-
сывать ее тип. Переменная может иметь значения различных типов и неодно-
кратно их изменять. Например, вы можете написать следующий код программы:
var x = "Иван"
// некоторый код
х = "Анна"
// некоторый код
х = 2.5
Одно ключевое слово var можно использовать для инициализации сразу несколь-
ких переменных, как с оператором присвоения, так и без него. При этом перемен-
ные и выражения с операторами присвоения разделяются запятыми, например:
var name = "Вася", address, x = 3.14
Если переменная в данный момент имеет значение числового типа, то говорят,
что это числовая переменная. Аналогично можно говорить о строковых, логиче-
ских (булевских), неопределенных (в случае типа null) переменных.
Выше мы использовали оператор присвоения значения переменной, обозначае-
мый символом равенства -- • Не следует путать этот оператор с отношением ра-
венства и соответствующей операцией сравнения. Выражение с оператором «=»
интерпретатор вычисляет следующим образом: переменной слева от него присва-
ивается значение, расположенное справа от него.
Если х и у - две переменные, то выражение х = у интерпретируется так: перемен-
ной х присваивается значение переменной у. Иначе говоря, переменной можно
присвоить значение другой переменной, указав справа от оператора « = » ее имя.
Таким образом, к значениям можно получать доступ опосредованно - через имена
переменных. В следующих разделах мы узнаем, что справа от оператора присвое-
ния можно писать не только значения и имена переменных, но и целые выраже-
ния. В подразделе 1.5.3 будут рассмотрены дополнительные операторы присвое-
ния, такие как +=, -= и т. п.
1.4.3. Область действия переменных
Переменные, которые созданы в программе с помощью оператора присвоения
с использованием ключевого слова var или без него, являются глобальными. Это
означает, что они доступны всюду в этой же программе, а также в вызываемых
программах из других файлов. Эти переменные также доступны внутри кода функ-
ций. Функциям в нашей книге посвящен специальный раздел.
Кроме глобальных существуют и локальные переменные. Они могут быть созда-
ны внутри кода функций. Вы можете определить переменные с одинаковыми на-
32 ________________________________Глава 1. Основы JavaScript
званиями и во внешней программе, и в коде функции. В этом случае переменные,
определенные в коде функции с помощью ключевого слова var, будут локальны-
ми: изменения их значений внутри функции никак не отразятся на переменных
с такими же именами, определенных во внешней программе. При этом значения
локальных переменных не доступны из внешней программы.
Мы еще неоднократно будем говорить об области действия переменных. Здесь
лишь отметим, что в программировании это понятие играет очень важную роль.
Нередко область действия называют областью видимости. Переменная может быть
видна или не видна внутри программной единицы (функции, подпрограммы).
Область видимости, доступности или действия переменной - эквивалентные тер-
мины. Кроме них еще используют понятие времени жизни переменной. Время
жизни переменных в JavaScript определяется интервалом времени от загрузки до
выгрузки программы из памяти компьютера. Так, если программа (сценарий) за-
писаны в HTML-коде веб-страницы, то после его выгрузки весь сценарий вместе
с определенными в нем переменными прекращает активное существование.
1.5. Операторы
Операторы предназначены для составления выражений. Оператор применяется
к одному или двум данным, которые в этом случае называются операндами. На-
пример, оператор сложения применяется к двум операндам, а оператор логиче-
ского отрицания - к одному операнду. Элементарное выражение, состоящее из
операндов и оператора, вычисляется интерпретатором и, следовательно, имеет
некоторое значение. В этом случае говорят, что оператор возвращает значение.
Например, оператор сложения, примененный к числам 2 и 3, возвращает значе-
ние 5. Оператор имеет тип, совпадающий с типом возвращаемого им значения.
Поскольку элементарное выражение с оператором и операндами возвращает зна-
чение, это выражение можно присвоить переменной.
Один оператор мы уже рассмотрели в предыдущем разделе. Это оператор присво-
ения «=». Мы часто будем его использовать. Однако следует заметить, что суще-
ствует еще пять разновидностей оператора присвоения, сочетающих в себе дей-
ствия обычного оператора «=» и операторов сложения, вычитания, умножения,
деления и деления по модулю. Эти дополнительные операторы присвоения мы
рассмотрим позже в подразделе 1.5.3.
1.5.1. Комментарии
Начнем с операторов комментария. Они позволяют выделить фрагмент програм-
мы, который не выполняется интерпретатором, а служит лишь для пояснений
содержания программы.
В JavaScript допустимы два вида операторов комментария:
• // - одна строка символов, расположенная справа от этого оператора, счита-
ется комментарием;
• /*...*/ - все, что заключено между/* и */, считается комментарием; с помощью
этого оператора можно выделить несколько строк в качестве комментария.
1.5. Операторы.
33
СОВЕТ -
Не пренебрегайте комментариями в тексте программ. Это поможет при их отладке и со-
провождении. На этапе разработки лучше сначала превратить ненужный фрагмент про-
граммы в комментарий, чем просто удалить (а вдруг его придется восстанавливать?).
Даже опытные программисты, возвращаясь к работе над своей программой через
месяц, с большим трудом вспоминают, что кчему. В примерах программ мы часто
будем использовать комментарии.
1.5.2. Арифметические операторы
Арифметические операторы, такие как сложение, умножение и т. д., в JavaScript
могут применяться к данным любых типов. Что из этого получается, мы рассмот-
рим немного позже. А сейчас просто перечислим их (табл. 1,2).
Таблица 1.2. Арифметические операторы_________________________________________
Оператор Название Пример_________________
X+Y
X-Y
X* Y
X/Y
X%Y
Х++
Y-______________________
Арифметические операторы лучше всего понять на примере чисел. Первые четы-
ре оператора все проходили в начальных классах. Оператор деления по модулю
возвращает остаток отделения первого числа на второе. Например, 8%3 возвра-
щает 2. Операторы «++» и «-» сочетают в себе действия операторов соответствен-
но сложения и вычитания, а также присвоения. Выражение Х++ эквивалентно
выражению Х+1, а выражение X— эквивалентно выражению Х-1.
Операторы «++» и «- -» называют соответственно инкрементом и декрементом.
Символ «-» используется не только как бинарный (для двух операндов) оператор
сложения, но и как унарный (для одного операнда) оператор отрицания для ука-
зания того, что число является отрицательным.
Примеры
у = 5 // значение переменной у равно 5
х = у + 3 // значение переменной х равно 8 (5+3)
х++ // значение переменной х стало равным 9 (8+1)
// значение переменной х стало равным 8 (9-1)
у++ // значение переменной у равно 6 (5+1)
5-3 // значение равно 2
-3 // отрицательное число
Однако формально ничто не мешает нам применить эти операторы к данным дру-
гих типов. В случае строковых данных оператор сложения дает в результате стро-
+ Сложение
Вычитание
Умножение
/ Деление
% Деление по модулю
++ Увеличение на 1
Уменьшение на 1
34
.Глава 1. Основы JavaScript
ку, полученную путем приписывания справа второй строки к первой. Например,
выражение "Вася"+ "Маша" возвращает в результате "ВасяМаша". Поэтому для строк
оператор сложения называется оператором склейки или конкатенации. Приме-
нение остальных арифметических операторов к строкам дает в результате NaN -
значение, не являющееся числом (подробности см. в подразделе 1.7.3. В случае,
когда оператор сложения применяется к строке и числу, интерпретатор перево-
дит число в соответствующую строку и далее действует как оператор склейки двух
строк.
Приме ры
х = "Вася"
У = "Маша"
Z = х +
Z = х + 5
п = "20"
+у
//
//
//
//
/*
значение
значение
значение
значение
значение
переменной
переменной
переменной
переменной
переменной
а не 30 или "30" */
х равно "Вася"
у равно "Маша"
z равно "Вася Маша"
z равно "Вася
п равно "205",
В случае логических данных интерпретатор переводит логические значения опе-
рандов в числовые (true в 1, false в 0), выполняет вычисление и возвращает число-
вой результат. То же самое происходит в том случае, когда один оператор логи-
ческий, а другой - числовой.
Примеры
true + true //возвращает2
true + false // возвращает 1
true * true //возвращает 1
true/false /* возвращает Infinity (Неопределенность,
так как на ноль делить нельзя) */
true - 5 //возвращает 6
false + 5 //возвращает 5
true * 5 // возвращает 5
true / 5 //возвращает 0.2
Если один операнд строкового типа, а другой - логического, то в случае сложе-
ния интерпретатор переводит оба операнда в строковый тип и возвращает строку
символов, а в случае других арифметических операторов он переводит оба опе-
ранда в числовой тип.
Примеры
"Вася" + true
"5" + true
"Вася" " true
true
"5" * false
"5" / true
// возвращает "Bacfltrue"
// возвращает "Strue"
/* возвращает NN (то есть значение,
не являющееся числом) */
// возвращает 5
// возвращает 0
// возвращает 5
На первый взгляд, применение арифметических операторов к разнотипным дан-
ным может показаться довольно запутанным. Поэтому советую новичкам, осо-
бенно на первых порах, руководствоваться следующими простыми правилами:
• применяйте арифметические операторы к данным одного и того же типа;
• оператор сложения применительно к строкам действует как оператор их склей-
ки (приписывания, конкатенации);
1.5. Операторы.
35
• в случае применения арифметических операторов к логическим данным ин-
терпретатор рассматривает значения true и false как числа соответственно 1 и О,
и возвращает результат в числовом виде.
Кроме этих правил нужно помнить, что в JavaScript имеются средства для преоб-
разования типов данных, то есть для преобразования данных одного типа в дан-
ные другого типа. К этому вопросу мы вернемся позже, а сейчас рассмотрим дру-
гие операторы.
1.5.3. Дополнительныеоператоры присвоения
В начале этого раздела мы уже говорили, что кроме обычного оператора присвое-
ния «=» имеются еще пять дополнительных операторов, сочетающих в себе дей-
ствия обычного оператора присвоения и арифметических операторов.
Оператор
Пример
Эквивалентное выражение
+-
X+-Y
X
= X + Y
-
X-=Y
X = X - Y
■__
X*-Y
X-X*Y
/-
X/=Y
X = X/Y
% =
X%=Y X .
=
X % - Y
Поскольку действие арифметических операторов и обычного оператора присвое-
ния уже известны, дополнительные операторы присвоения мы не будем здесь по-
дробно рассматривать. Обратим лишь внимание на экономный способ записи
выражений, предоставляемый этими операторами.
Пример:
х = "Вася"
х+= ", привет" // "Вася, привет"
1.5.4. Операторысравнения
В программах часто приходится проверять, выполняются ли какие-либо условия.
Например, на веб-страницах иногда проверяется, является ли браузер пользова-
теля Microsoft Internet Explorer или Netscape Navigator. В зависимости от резуль-
тата процесс дальнейших вычислений может пойти по тому или другому пути.
Проверяемые условия формируются на основе операторов сравнения, таких как
«равно», «меньше», «больше» и т. п. Результатом вычисления элементарного выра-
жения, содержащего оператор сравнения и операнды (сравниваемые данные), явля-
ется логическое значение, то есть true или false. Так, если условие выполняется (вер-
но, справедливо), то возвращается true. В противном случае возвращается false.
Оператор Название Пример
Равно X = =Y
[=___________________Не равно_________________________________________X I- Y
продолжение iK
36Г________________________________________________Глава 1. Основы JavaScript
Оператор Название Пример
Больше, чем
X*Y
Больше или равно (не меньше)
X>=Y
Меньше, чем
X<Y
Меньше или равно (не больше)Х
)Х <= Y
ВНИМАНИЕ -
Оператор «равно» записывается с помощью двух символов-без пробелов между ними.
Сравнивать можно числа, строки и логические значения. Сравнение чисел проис-
ходит по правилам арифметики, а строк - путем сравнения ASCII-кодов симво-
лов начиная с левого конца строк. Логические значения сравниваются так же, как
ичисла 1 и0 (true соответствует 1, a false - 0). Как видим, с числами и логически-
ми данными все довольно просто. А вот результат сравнения строк не всегда оче-
виден.
Примеры
"abcd"=="abc" // возвращает false
"abc"=="abcd" // возвращает false
"abcd"=="abcd" // возвращает true
"abcd"==" abed" i возвращает false (1-й символ
/ 2-го операнда - пробел) */
"abed" > " abed" // возвращает true
"abc" < "abed" // возвращает true
"235ab" < "abcdxyz" // возвращает true
-23!5xyz" < "abc" // возвращает true
Мы не приводим здесь таблицу кодов ASCII для всех символов. Отметим лишь,
что некоторые из них упорядочены в порядке возрастания ASCII-кодов следую-
щим образом: сначала идет пробел, затем в порядке возрастания цифры от 0 до 9,
символ подчеркивания, латинские и кириллические буквы по алфавиту (сначала
прописные, а затем строчные).
Заметим, что операторы сравнения могут быть применены и к разнотипным дан-
ным. Если сравниваются строка и число, то интерпретатор приводит операнды
к числовому типу. То же самое происходит при сравнении логических данных
и числа. Если сравниваются логические данные и строка, то дело обстоит несколь-
ко сложнее. В этом случае результат не зависит от содержимого строки. Если она
содержит число (но не цифры с буквами), только пробелы или является пустой,
то операнды приводятся к числовому типу. При этом пустая строка ( ■) или со-
держащая только пробелы преобразуется в число 0. В остальных случаях все опе-
раторы сравнения, кроме •„ будут возвращать false (а оператор «!=» - противо-
положный результат, то есть true).
Примеры
true >= "0.5" // BOзвращает true
false < "57ab" // BOзвращает false
false > "57ab" / BOзвращает false
1.5. Операторы37
ы37
true == "true" // возвращает false
true != "true" // возвращает true
true <= "true" // возвращает false
true >= "true" // возвращает false
1.5.5.Логическиеоператоры
Логические данные, обычно получаемые с помощью элементарных выражений,
содержащих операторы сравнения, можно объединять в более сложные выраже-
ния. Для этого используются логические (булевские) операторы - логические
союзы И и ИЛИ, а также оператор отрицания НЕ. Например, нам может потребо-
ваться сформировать сложное логическое условие следующего вида: «возраст не
более 30 и опыт работы больше 10, или юрист». В этом примере есть и операторы
сравнения, и логические операторы. Выражения с логическими операторами воз-
вращают значение true или false.
Оператор Название Пример
! Отрицание (НЕ) !Х
&& И X&&Y
|| ИЛИ X|| Y
Оператор отрицания ! » применяется к одному операнду, изменяя его значение
на противоположное: если X имеет значение true, то !Х возвращает значение false,
инаоборот, если X имеет значение false, то !Х возвращает значение true.
Ниже в таблице указано, какие значения возвращают операторы И и И Л И при раз-
личных логических значениях двух операндов.
Y
X&&Y
X11Y
true
true
true
true
true
false
false
true
false
true
false
true
false
false
false
false
Операторы «&&» и << | |» еще называют логическим умножением и логическим сло-
жением соответственно. Если вспомнить, что значению true можно сопоставить I,
а значению false - 0, то нетрудно понять, как вычисляются значения элементар-
ных выражений с логическими операторами. Нужно только учесть, что в алгебре
логики 1 + 1 = 1 (а не 2). Аналогично оператору отрицания соответствует вычита-
ние из единицы числового эквивалента логического значения операнда. В мате-
матике логические операции И и ИЛИ называют соответственно конъюнкцией
и дизъюнкцией.
СОВЕТ -
Чтобы не запутаться, не применяйте логические операторы к нелогическим данным и осо-
бенно к разнотипным данным.
38.
.Глава 1. Основы JavaScript
Примеры
х = false 1| 2*2 ==4 // значение переменной х равно true
х = 5<2 1 | "abed" <="xy" // значение переменной х равно true
у = !х ' // значение переменной у равно false
z = х && У // значение переменной z равно false
z = х |1 У и значение переменной z равно true
Сложные логические выражения, состоящие из нескольких более простых, со-
единенных операторами И и ИЛИ, выполняются по так называемому принципу
короткой обработки. Дело в том, что значение всего выражения бывает можно
определить, вычислив лишь одно или несколько более простых выражений, не
вычисляя остальные. Например, выражение х&&у вычисляется слева направо; если
значение х оказалось равным false, то значение у не вычисляется, поскольку и так
известно, что значение всего выражения равно false. Аналогично если в выраже-
нии х 11 у значение х равно t r ue, то значение у не вычисляется, поскольку уже ясно,
что все выражение равно true. Данное обстоятельство требует особого внимания
при тестировании сложных логических выражений. Так, если какая-нибудь со-
ставная часть выражения содержит ошибку, то она может остаться невыявлен-
ной, поскольку эта часть выражения просто не выполнялась при тестировании.
1.5.6. Операторы условного перехода
Вычислительный процесс можно направить по тому или другому пути в зависи-
мости от того, выполняется ли некоторое условие или нет. Этой цели служат опе-
раторы условного перехода if и switch.
Оператор if
Оператор условного перехода if позволяет реализовать структуру условного вы-
ражения если ..., то ..., иначе ...
Синтаксис оператора if перехода следующий:
if (условие)
{ код, который выполняется, если условие выполнено}
else
{ код, который выполняется, если условие не выполнено}
В фигурных скобках располагается блок кода - несколько выражений. Если в бло-
ке используется не более одного выражения, то фигурные скобки можно не пи-
сать. Часть этой конструкции, определяемая ключевым словом else (иначе), не-
обязательна. В этом случае остается только часть, определенная ключевым словом
if (если):
if (условие)
{ код, который работает, если условие выполнено}
Конструкция оператора условного перехода допускает вложение других операто-
ров условного перехода. Условие обычно представляет собой выражение логи-
ческого типа, то есть выражение, значение которого есть true или false. Обычно
это элементарные выражения с операторами сравнения.
Примеры
1. Выводится диалоговое окно с тем или иным сообщением в зависимости от зна-
чения переменной age (возраст).
_1.5. Операторы _ 39
if (age<18)
{alertC'Bbi слишком молоды для просмотра этого сайта")}
else
{alert("Подтвердите свое решение заглянуть на этот сайт")}
2. Выводится диалоговое окно с сообщением, если только значение переменной
аде меньше 18.
if (age<18)
{alertC'Bbi слишком молоды для просмотра этого сайта")}
Делать ли отступы при написании операторов, где располагать фигурные скоб-
ки - дело вкуса. Следует руководствоваться наглядностью и ясностью структу-
ры, при которой легко проверить правильность расстановки скобок. Кроме опи-
санного выше способа, часто встречается еще и такой:
if (условие) {
код. который работает, если условие выполнено
} else {
код, который работает, если условие не выполнено
}
Возможно, этот способ записи лучше отражает структуру оператора условного
перехода.
Более сложная структура оператора условного перехода получается при вложе-
нии других операторов if
if (условие!) {
код, который работает, если условие! выполнено
} else { if (условие2) {
код, который работает, если условие2 выполнено
}else{
код, который работает, если условие2 не выполнено
}
)
Выше мы уже отмечали, что условие в операторе if обычно является логическим
выражением. Однако это может быть также и строковое, и числовое выражение.
В случае строкового выражения условие считается выполненным, если его значе-
нием является непустая строка. Напомним, что пустая строка не содержит ни
одного символа, в том числе и пробела (строка, содержащая хотя бы один пробел,
не пуста). В случае числового выражения условие считается выполненным, если
его значением является число, отличное от нуля. Во многих случаях эта много-
значность типа условия оказывается очень удобной.
Допустим, что переменная х содержит данные, которые ввел пользователь, и нам
требуется проверить, что он действительно что-то ввел. В следующем примере
мы проверяем, что значение переменной х не пусто (не 0, не пустая строка "" и не
null). Если х пусто, то выводится соответствующее сообщение:
if (!х) {
alertC'Bbi ничего не ввели")
>
Заметим, что поскольку в этом примере блок кода содержит всего лишь одно вы-
ражение, постольку фигурные скобки можно опустить, да и всю конструкцию опе-
ратора условного перехода можно записать в одной строке:
if (!x) alertC'Bbi ничего не ввели")
40.
.Глава 1. Основы JavaScript
Оператор switch
Для организации проверки большого количества условий вполне достаточно ис-
пользовать рассмотренный выше оператор if. Однако в случае нескольких усло-
вий более удобным и наглядным оказывается оператор switch (переключатель).
Он особенно удобен, если требуется проверить несколько условий, которые не
являются взаимоисключающими.
Синтаксис оператора switch выглядит следующим образом:
switch (выражение) {
case вариант!:
код
[break]
case вариант2:
код
[break]
'"[default:
код]
}
Параметр выражение оператора switch может принимать строковые, числовые и ло-
гические значения. Разумеется, в случае логического выражения возможны толь-
ко два варианта. Ключевые слова (операторы) break и default не являются обяза-
тельными, что отражено с помощью прямоугольных скобок. Здесь они являются
элементами описания синтаксиса, и при написании операторов их указывать не
нужно. Если оператор break указан, то проверка остальных условий не произво-
дится. Если указан оператор default, то следующий за ним код выполняется, если
значение выражения не соответствует ни одному из вариантов. Если все вариан-
ты возможных значений предусмотрены в операторе switch, то оператор default
можно не использовать.
Оператор switch работает следующим образом. Сначала вычисляется выражение,
указанное в круглых скобках сразу за ключевым словом switch. Полученное зна-
чение сравнивается с тем, которое указано в первом варианте. Если они не совпа-
дают, то код этого варианта не выполняется и происходит переход к следующему
варианту. Если же значения совпали, то выполняется код, соответствующий это-
му варианту. При этом, если неуказан оператор break, то выполняются коды и ос-
тальных вариантов, пока не встретится оператор break. Это же правило действует
и для остальных вариантов.
Пример
, х = 2
switsch (x) {
case 1:
alert(l)
case 2:
alert(2)
case 3:
alert(3)
}
В приведенном примере сработают 2-й и 3-й варианты. Если мы хотим, чтобы
сработал только один какой-нибудь вариант (только тот, который соответствует
значению выражения), то нужно использовать оператор break.
1.5. Операторы _ 41
Пример
х = 2
switsch (x) {
case 1:
alert (l) ;
break
case 2:
alert(2);
break
case 3:
alert(3) ;
break
}
В этом примере сработает только 2-й вариант.
Пример
Допустим, переменная xlang содержит название языка, который выбрал пользо-
ватель и ввел в поле формы. Тогда возможен такой вариант применения операто-
pa switch:
switsch (xlang) {
case "английский" :
window.open ("engl.htm");
break
case "французский":
window.open ("french .htm") ;
break
case "немецкий" :
window.open("german.htm") ;
break
default:
alert ("У нас нет документа на таком языке")
/
Здесь выражение window.openQ открывает новое окно браузера и загружает в него
указанный в скобках HTML-документ. Заметим, что эту же задачу можно решить
и с помощью вложенных операторов if:
if (xlang == "английский")
window. open ("engl .htm")
else {
if (xlang == "французский")
window. open ("french .htm") ;
else {
if (xlang == "немецкий")
window.open ("german.htm")
/ else
alertC'V нас нет документа на таком языке"); '
}
Для тренировки перепишем приведенный выше код в другом виде:
if (xlang == "английский") window.open("engl.htm")
else { if (xlang == "французский") window. open("f rench. htm")
else { if (xlang == "немецкий") wi ndow. open ("german . htm
else aler tCYнас нет документа на таком языке")
}
42.
.Глава 1. Основы JavaScript
1.5.7. Операторы цикла
Оператор цикла обеспечивает многократное выполнение блока программного кода
до тех пор, пока не выполнится некоторое условие. В JavaScript предусмотрены
три оператора цикла: for, while и do-while. Вообще говоря, при создании программ
вполне можно обойтись одним из них, for или while. Мне, например, больше нра-
вится while. Однако возникают ситуации, в которых один из операторов более
удобен или естествен, чем другой.
Оператор for
Оператор for (для) также называют оператором со счетчиком циклов, хотя в нем
совсем не обязательно использовать счетчик. Синтаксис этого оператора следую-
щий:
for ( [начальное выражение] ; [условие] ; [выражение обновления] )
{
j код
Здесь квадратные скобки лишь указывают на то, что заключенные в них парамет-
ры не являются обязательными. Как и в случае оператора условного перехода,
возможна и такая запись:
for ( [начальное выражение] ; [условие] ; [выражение обновления] ) {
код
}
Все, что находится в круглых скобках справа от ключевого слова for, называется
заголовком оператора цикла, а содержимое фигурных скобок - его телом.
В заголовке оператора цикла начальное выражение выполняется только один раз
в начале выполнения оператора. Второй параметр представляет собой условие
продолжения работы оператора цикла. Он аналогичен условию в операторе ус-
ловного перехода if Третий параметр содержит выражение, которое выполняется
после выполнения всех выражений кода, заключенного в фигурные скобки.
Оператор цикла работает следующим образом. Сначала выполняется начальное
выражение. Затем проверяется условие. Если оно выполнено, то оператор цикла
прекращает работу (при этом код не выполняется). В противном случае выпол-
няется код, расположенный в теле оператора for, то есть между фигурными скоб-
ками. После этого выполняется выражение обновления (третий параметр опера-
тора for). Таким образом, заканчивается первый цикл или, как еще говорят, первая
итерация цикла. Далее снова проверяется условие, и все повторяется описанным
выше способом.
Обычно в качестве начального выражения используют оператор присваивания
значения переменной. Например, i = 0илиvar i = 0. Имя переменной и присваива-
емое значение могут быть любыми. Эту переменную называют счетчиком цик-
лов. В этом случае условие, как правило, представляет собой элементарное выра-
жение сравнения переменной счетчика циклов с некоторым числом, например,
i<•п М а х , Выражение обновления в таком случае просто изменяет значение счет-
чика циклов, например i i + 1 или, короче, i++.
В следующем примере оператор цикла просто изменяет значение своего счетчи-
ка, выполняя 15 итераций:
1.5. Операторы _ 43
for (i = 1 ; i <= 15; \++) {}
Немного модифицируем этот код, чтобы вычислить сумму всех целых положи-
тельных чисел от 1 до 15:
var s=l
for (i = 1; i <= 15; i++) {
s = s + i
}
Заметим, что счетчик циклов может быть не только возрастающим, но и убываю-
щим.
Пример
Допустим, требуется вычислить х в степени у, где х, у - целые положительные
числа. Алгоритм решения этой задачи прост: надо вычислить выражение х*х*х* ... х,
в котором сомножитель х встречается у раз. Очевидно, что если у не превышает
10, то можно воспользоваться оператором умножения: выражение будет не очень
длинным. А как быть в том случае, когда у равно нескольким десяткам или сот-
ням? Ясно, что в общем случае следует воспользоваться оператором цикла:
/* Вычисляем х в степени у */
var z = х // z хранит результат
for (i = 2 ; i <= у ; i++ ) {
Z-Z*X
}
В этом примере результат сохраняется в переменной z. Начальное ее значение
равно х. Если у равно 1, то оператор цикла не будет выполняться, поскольку не
выполняется условие 2 <= 1 (обратите внимание на начальное значение счетчика
циклов), - и, следовательно, мы получим верный результат: х в степени 1 равно х.
Если у равно 2, то оператор цикла выполнит одну итерацию, вычислив выраже-
ние z = z*x при z, равном х (то есть z = х*х). При у, равном 3, оператор цикла сделает
две итерации. На второй, последней итерации выражение z = z*x вычисляется при
текущем значении z, равном х*х, и, следовательно, становится равным х*х*х (то -
есть х в степени 3).
Пример
Рассмотрим довольно традиционный при изучении операторов цикла пример
вычисления факториала числа. Факториал числа п в математике обозначают как
п!. Для п, равного 0 и 1, п! равен 1. В остальных случаях п! равен 2*3*4* ... *п.
Поскольку возможны два варианта исходных данных, нам потребуется использо-
вать оператор условного перехода. Код, решающий эту задачу, выглядит следую-
щим образом:
/* Вычисляем п! */
var z = 1 /I г хранит результат п!
if (n >1) {
for (1 = 2 : 1 <= п : 1*+) {
z=z*i
>
}
Для принудительного (то есть не по условию) выхода из цикла используется опе-
ратор break (прерывание). Если вычислительный процесс встречает этот опера-
тор в теле оператора цикла, то он сразу же завершается без выполнения последу-
ющих выражений кода в теле и даже выражения обновления. Обычно оператор
44
.Глава 1. Основы JavaScript
break применяется при проверке некоторого дополнительного условия, выполне-'
ние которого требует завершения цикла, несмотря на то что условие в заголовке
цикла еще не выполнено. Типовая структура оператора цикла с использованием
break имеет следующий вид:
for ( [начальное выражение] ; [условие!] ; [выражение обновления] )
{
код
i f (условие2){
КОД
break
}
код
}
Для управления вычислениями в операторе цикла можно также использовать
оператор continue (продолжение). Также, как и break, этот оператор применяется
в теле оператора цикла вместе с оператором условного перехода. Однако, в отли-
чие от break, оператор continue прекращает выполнение последующего кода, вы-
полняет выражение обновления и возвращает вычислительный процесс в начало
оператора цикла, где производится проверка условия, указанного в заголовке.
Типовая структура оператора цикла с использованием break имеет следующий вид:
for ( [начальное выражение] ; ; ,[ у с л о в и е !] ; [выражение обновления] )
{
код
if (условие2){
код
continue
}
код
Оператор while
Оператор цикла while (до тех пор, пока) имеет структуру более простую, чем опе-
ратор for, и работает несколько иначе. Синтаксис этого оператора следующий:
while ( условие )
г
код
}
При выполнении этого оператора сначала производится проверка условия, ука-
занного в заголовке, то есть в круглых скобках справа от ключевого слова while.
Если оно выполняется, то выполняется код в теле оператора цикла, заключенно-
го в фигурные скобки. В противном случае код не выполняется. При выполнении
кода (завершении первой итерации) вычислительный процесс возвращается
к заголовку, где снова проверяется условие, и т. д.
Если сравнивать оператор while с оператором for, то особенность первого заклю-
чается в том, что выражение обновления записывается в теле оператора, а не в за-
головке. Часто забывают указать это выражение, и в результате цикл не заверша-
ется (программа «зависает»).
Рассмотрим несколько примеров решения задач, которые мы уже решали ранее
с использованием оператора цикла for.
1.5. Операторы
45
Пример
Возведение х в степень у.
/* Вычисляем х в степени у */
v a r= z2 = х // z хранит результат
while (i = 2) {
z-z*x
i+ +
}
Пример
Вычисление п!.
/* Ввычисляем п! */
va r z = 1 // z хранит результат п<
if (n >1 ) { " Р резулыа! !
i = 2
while ( i <= n ) {
z = z*i
i M
!l
]
Во всех приведенных выше примерах использовался счетчик циклов. Однако он
инициировался заранее, до оператора цикла. Обновление значения этого счетчи-
ка производилось в теле оператора цикла.
Для управления вычислительным процессом в операторе while, также как и в опе-
раторе for, можно использовать операторы прерывания break и продолжения
continue.
ВНИМАНИЕ
Если в while вы используете счетчики циклов, то будьте осторожны, применяя break
и continue.
Оператор do-while
Оператор do-while (делай до тех пор, пока) представляет собой конструкцию
из двух операторов, используемых совместно. Синтаксис этой конструкции сле-
дующий:
do {
код
.1
while (условие)
В отличие от оператора while в операторе do-while код выполняется хотя бы один
раз, независимо от условия. Условие проверяется после выполнения кода. Если
оно истинно, то снова выполняется код в теле оператора do. В противном случае
работа оператора do-while завершается. В операторе while условие проверяется
в первую очередь, до выполнения кода в теле. Если при первом обращении к опе-
ратору while условие не выполняется, то код не будет выполнен никогда.
Рассмотрим несколько примеров решения задач, которые мы уже решали ранее
с использованием операторов цикла for и while.
46
Глава 1. Основы JavaScript
Пример
Возведение х в степень у.
/* Вычисляем х в степени у */
var z = х
i = 2
do{
z=z*x
i++
}
while (i <= y)
Пример
Вычисление п!.
/* Вычисляем п! */
var z = 1
if (n >1) {
i = 2
do {
z=z*i
while ( i <= n )
)
1.5.8. Выражения с операторами
Выше неоднократно встречались термины «выражение» и «элементарное выра-
жение». Вы, должно быть, уже составили себе некоторое представление о том, что
такое выражение. Тем не менее уточним его.
Начнем с того, что просто данные (конечные значения) являются выражениями
языка. Например, число 5.2, одиноко стоящее в строке текста программного кода,
является выражением. Последовательность символов, заключенная в кавычки
(например, "Вася"), - тоже выражение. Имя переменной - еще один вариант вы-
ражения.
Запись, содержащая имя переменной, за которой следуют символы оператора
присвоения и некоторое значение (например, х = "Привет всем!"), является выра-
жением JavaScript. Запись, состоящая из операндов и оператора (например, х + 5),
также является выражением.
Все перечисленные выше варианты выражения назовем элементарными выраже-
ниями. Тогда записи, содержащие операторы и операнды в виде элементарных
выражений, являются выражениями. Например, пусть имеются два элементар-
ных выражения: х+5 и у-3. Тогда запись х+5 + у-3, объединяющая их оператором
сложения, является выражением. Это касается не только арифметических опера-
торов, но и всех других.
Итак, мы можем писать сложные выражения, в которых операторы различных
типов могут встречаться несколько раз. Выражение с последовательностью из
нескольких операторов вычисляется слева направо, но с учетом так называемого
приоритета операторов.
// z хранит результат
// z хранит результат п!
1.5. Операторы,
ВНИМАНИЕ -
_47
Среди арифметических операторов наибольшим приоритетом обладают операторы умно-
жения и деления (в том числе и деления по модулю). Затем следуют сложение и вычита-
ние. Среди логических операторов наибольшим приоритетом обладает отрицание, затем
следует логическое И, а дальше - логическое ИЛИ. Операторы сравнения по приоритету
выше логических операторов. Последовательность операторов с одинаковым приорите-
том выполняется слева направо.
Примеры
2 + 3*5 // результат равен 17, а не 25
2 <3 | | 3 <1 // результатравен true
2 <3 || 3 <1 && false // результатравен true
! 2 <3 | | 3 <1 && false // результатравен false
Процессом вычисления выражений можно управлять с помощью круглых ско-
бок. Каждой открывающейся скобке соответствует своя закрывающаяся скобка,
так что выражения, заключенные в круглые скобки, могут входить в состав дру-
гих выражений, которые, в свою очередь, также могут быть заключены в скобки.
Таким образом, с помощью круглых скобок можно создать иерархическую струк-
туру выражения, состоящего из других выражений. Первыми выполняются
выражения, имеющие наибольшую глубину вложенности. Далее выполняются вы-
ражения, находящиеся на меньшей глубине в иерархии, и т. д. Выражения с оди-
наковой глубиной вложенности выполняются в порядке, принятом по умолча-
нию, то есть слева направо.
ВНИМАНИЕ -
В выражении с круглыми скобками количество открывающихся скобок должно быть равно
количеству закрывающихся, а общее количество всех круглых скобок должно быть чет-
ным числом. Если это не выполняется, то интерпретатор выдает сообщение о синтакси-
ческой ошибке. Ошибки такого рода часто встречаются при программировании.
Примеры
2 +3 *5 // результат равен 17
(2 + 3) * 5 // результат равен 25
С(2 +3) + 4*5)/2 // результат равен 12.5
(2 + 3) + 4*5/2 // результат равен 15
2 + 3 + 4*5/2 // результат равен 15
(2 + 3 +н 4)*5/2 // результат равен 22.5
2 *. (, + 4*5)/2 /II результат равен 13.5
(2 + (3 + 4)*5)/2 // результат равен 18.5
Операторы условного перехода и цикла также представляют собой выражения
языка JavaScript. Кроме обычных способов их записи, рассмотренных выше, прин-
ципиально возможна запись в одну строку. При этом необходимо, чтобы выраже-
ния в блоках кода разделялись точкой с запятой.
Пример
if (!x){x = "Вы ничего не ввели"; alert (x) }else alert("Bce в порядке")
Операторы условного перехода и цикла возвращают значения подобно другим
операторам, а именно возвращают значение последнего выполненного выражения.
Сводные сведения о приоритетах всех операторов приведены в разделе 1.10 в конце
данной главы.
48.
.Глава 1. Основы JavaScript
1.6. Функции
Функция представ. :.;т собой подпрограмму, которую можно вызвать для выпол-
нения, обратившись к ней по имени. Взаимодействие функции с внешней про-
граммой, из которой она была вызвана, происходит путем передачи функции па-
раметров и приема от нее результата вычислений. Впрочем, функция в JavaScript
может и не требовать параметров, а также ничего не возвращать.
В JavaScript есть встроенные функции, которые можно использовать в програм-
мах, но код которых нельзя редактировать или посмотреть. Все, что мы можем
узнать о них, - это описание ихдействия, параметров и возвращаемого значения.
Кроме использования встроенных функций вы можете создать свои собственные,
так называемые пользовательские функции. Часто используемые фрагменты про-
граммного кода целесообразно оформлять в виде функций. Такой фрагмент кода
заключается в фигурные скобки, а перед ним пишется ключевое слово function, за
которым следуют круглые скобки, обрамляющие список параметров. Более по-
дробно пользовательские функции будут рассмотрены в подразделе 1.6.2.
Чтобы вызвать функцию в программе, следует написать выражение в следующем
формате:
имя_функции (параметры)
Если требуются параметры, то они указываются в круглых скобках через запя-
тую. Функция может и не иметь параметров. В этом случае в круглых скобках
ничего не указывается. Подробности использования функций изложены далее
в этом разделе.
1.6.1. Встроенные функции
В JavaScript имеются нижеследующие встроенные функции (некоторые из них
мы уже рассматривали ранее). Хотя для иллюстрации работы этих функций при-
водится множество примеров, желательно выполнить их самим, а также приду-
мать свои примеры, обращая внимание на крайние (даже абсурдные) случаи.
parseInt(poi<a, основание) - преобразует указанную строку в целое число в сис-
теме счисления по указанному основанию (8,10 или 16); если основание не указа-
но, то предполагается 10, то есть десятеричная система счисления.
Примеры
parselnt("2.5") // результат = 2
parseIntt"-l7.87S") // результат = -17
parselnt{"1952") // результат = 1952
15 0 руб.") // результат = 150
it ("цена 150 руб.") // результат = NaN
parseFloat(cTpOKa, основание) - преобразует указанную строку в число с плаваю-
щей разделительной (десятичной) точкой в системе счисления по указанному
основанию (8,10 или 16); если основание не указано, то предполагается 10, то есть
десятеричная система счисления.
Примеры
par5eFloat("2.5") // результат = 2.5
// результат = -17.875
1.6. Функции.
49
parseFloat ("1952") // результат = 1952
pareseFloatC'l.SOpx") // результат = 1.5
pareseFloat("двести") // результат = NaN
isNaN (значение) - возвращает true, если указанное в параметре значение не явля-
ется числом, иначе - false.
Примеры
isNaN(123) // результат false
i sNaN (" 123" ) // результат false
isNaN("Ten. 1234567") // результат true
i sNM (" 35 px") // результат true
isNaN(true) // результат false
isNaN(false) // результат false
isNaN("Bacfl") // результат true
Перечисленные выше функции мы рассматривали в разделе 1.3, посвященном
типам данных.
eval(cTpoKa)-вычисляетвыражениевуказаннойстроке;выражениедолжнобыть
написано на языке JavaScript (не содержит тегов HTML).
Примеры
var у = 5 // значение у равно 5
var х = "if(y<10) {у = у+2}" // значение х равно строке символов
eval(x) // значение у равно 7
Другой пример применения функции evalQ можно найти в начале данной главы.
Это - создание веб-страницы, содержащей текстовое поле для ввода и выполне-
ния выражений JavaScript. Вот текст соответствующего HTML-кода со сценари-
ем, содержащим функцию eval():
<HTML>
<TEXTAREA ID = "mycode" ROWS = 10 COLS = 60></TEXTAREA>
<TEXTAREA ID = "myrezult" ROWS = 3 COLS = 60></TEXTAREA>
<P>
- <BUTTON onclick ="document.all.myrezult.value=eval(mycode.value)">
1 Выполнить </BUTTON>
< BUTTON«Conclick="document.all.mycode.value='';
document.all.myrezult.value=''">
Очистить</ BUTTON >
<P>
</HTML>
Здесь сценарии записаны в виде символьных строк в качестве значений атрибу-
тов mcUk, определяющих событие щелчок кнопкой мыши на HTML-кнопках, ко-
торые заданы тегами <button>.
escape(crpoKa) - возвращает строку в виде % Х Х, где XX - ASCII-код указанного
символа; такую строку еще называют escape-последовательностью.
unescape(crpoKa) - осуществляет обратное преобразование.
При взаимодействии браузеров и серверов протоколы передачи данных позволя-
ют передавать не все символы в их естественном виде. Для передачи остальных
символов используются их шестнадцатеричные ASCII-коды, перед которыми ука-
зывается символ « %». Например, пробел представляется в escape-последователь-
ности как %20.
50.
.Глава 1. Основы JavaScript
Примеры
escape ("How do you do") // значение равно "How%20do%20you%20do "
езсареС'Привет") /* значение равно
%u041F%u0440%u0438%u0432%u0435%u0442 */
Другие примеры применения функций escape() и unescapeQ приведены в разде-
ле 2.8 (глава 2).
type0f(c'бъекT; - возвращает тип указанного объекта в виде символьной строки,;
например "boolean", "function" и т. п.
1.6.2. Пользовательские функции
Пользовательские функции - это функции, которые вы можете создать сами, по
своему усмотрению, для решения своих задач. Функция задается своим опреде-
лением (описанием), которое начинается ключевым словом function. Точнее, опи-
сание функции имеет следующий синтаксис:
function имя_функции(параметры)
!
\ код
J
Часто определение функции записывают и в таких формах:
function имя_функции(параметры) {
код
}
function имя_функции(параметры) { код }
Имя функции выбирается также, как и имя переменной. Недопустимо использо-
вать в качестве имени ключевые слова языка JavaScript. За именем функции обя-
зательно стоит пара круглых скобок. Программный код (тело) функции заключа-
ется в фигурные скобки. Они определяют группу выражений, которые относятся
к коду именно этой функции. Если функция принимает параметры, то список их
имен (идентификаторов) указывается в круглых скобках около имени функции.
Имена параметров выбираются согласно тем же требованиям, что и имена обыч-
ных переменных. Если параметров несколько, то в списке они разделяются запя-
тыми. Если параметры для данной функции не предусмотрены, то в круглых скоб-
ках около имени функции ничего не пишут.
Когда создается определение функции, список ее параметров (если он необхо-
дим) содержит просто формальные идентификаторы (имена) этих параметров,
понимаемые как переменные. В определении функции в списке параметров, за-
ключенном в круглые скобки сразу же за именем функции после ключевого слова
function, нельзя использовать конкретные значения и выражения. В этом смысле
определение функции задает код, оперирующий формальными параметрами, ко-
торые конкретизируются лишь при вызове функции из внешней программы.
Если требуется, чтобы функция возвращала некоторое значение, то в ее теле ис-
пользуется оператор возврата return с указанием справа от него того, что следует
возвратить. В качестве возвращаемой величины может выступать любое выраже-
ние: простое значение, имя переменной или вычисляемое выражение. Оператор
return может встречаться в коде функции несколько раз. Впрочем, возвращаемую
1.6. Функции.
51
величину, а также сам оператор return можно и не указывать. В этом случае функ-
ция ничего не будет возвращать.
Пример
Допустим, требуется определить функцию для вычисления площади прямоуголь-
ника (для этого необходимо умножить ширину на высоту). Назовем эту функцию
Srectangle. Тогда ее определение будет выглядеть следующим образом:
function Srectangle(width, height){
S = width * height
return S
}
Здесь сначала вычисляется площадь путем умножения значений параметров width
и height, полученное значение присваивается переменной S,азатем оператор return
возвращает значение этой переменной.
Определение функции Srectangle можно сделать более экономным, минуя при-
своение значения переменной S:
function Srectangle(width, height){
return width * height
}
Определение функции, описанное выше, будучи помещенным в программу, усва-
ивается интерпретатором, но сама функция (ее код или тело) не выполняется.
Чтобы выполнить функцию, определение которой задано, необходимо написать
в программе выражение вызова этой функции. Оно имеет следующий синтаксис:
имя_функции (параметры)
Имя функции должно полностью (вплоть до регистра) совпадать с именем ранее
определенной функции. Параметры, если они заданы в определении функции,
в вызове функции представляются конкретными значениями, Переменными или
выражениями.
ВНИМАНИЕ -
Не путайте определение функции с ее вызовом, хотя и то и другое могут находиться в од-
ной и той же программе.
В JavaScript можно не поддерживать равенство между количествами параметров
в определении функции и в ее вызове. Если в функции определены, например,
три параметра, а в вызове указаны только два, то последнему параметру будет
автоматически присвоено значение null. Наоборот, лишние параметры в вызове
функции будут просто проигнорированы.
Выше мы рассмотрели пример определения функции SrectangleQ, вычисляющей
площадь прямоугольника, если заданы его ширина и высота. Чтобы вычислить
значение площади прямоугольника при конкретных значениях параметров, в про-
грамме необходимо написать выражение вызова функции SrectangleQ, указав
в качестве ее параметров конкретные значения, либо переменные с конкретными
значениями, либо выражения, вычисляющие значения.
Примеры
5rectangle(3, 5) /* возвращает площадь прямоугольника
размером 3x5 */
52_________________-________________________________Глава 1. Основы JavaScript
/* возвращает площадь прямоугольника
размером 3x6 */
height = 8
Srectangle(3. height) /* возвращает площадь прямоугольника
размером 3x8 */
width=4
height=5
Srectangle(widt, height + 2) /* возвращает площадь прямоугольника
размером 4x7 */
Srectangle(2) /* возвращает 0 (второй параметр
не задан) */
Внутри тела функции можно создавать переменные, либо просто с помощью опе-
ратора присвоения, либо с помощью ключевого слова var. При этом возникает во-
прос об области действия переменных.
Если вы используете просто оператор присвоения, то возможны две ситуации.
1. Переменная в операторе присвоения встречается первый раз в вашей программе
именно в теле функции. В этом случае она действует в пределах кода (тела)
этой функции, но после выполнения функции эта переменная продолжает су-
ществовать и во внешней программе. Таким образом, эта переменная является
глобальной.
2. Переменная в операторе присв оения уже определена во внешней программе.
В этом случае она и действует внутри функции, и продолжает существовать
после завершения ее выполнения, поскольку она была создана во внешней
программе как глобальная переменная.
Если в теле функции вы используете ключевое слово var для инициализации пе-
ременной, то эта переменная будет действовать только в пределах кода функции,
независимо от того, была ли она определена во внешней программе или нет. При
этом если переменная создана с ключевым словом var впервые в теле функции, то
она является локальной, то есть недоступной из внешней программы. Таким об-
разом, инициализация переменной с помощью выражения с ключевым словом var
создает локальную переменную.
Если в теле функции вы используете переменную, определенную только во внеш-
ней программе, то изменение ее значения в теле функции сохранится даже после
завершения выполнения этой функции, поскольку это глобальная переменная.
Если во внешней программе вы определили некоторые переменные, имена кото-
рых совпадают с формальными параметрами в определении функции, а затем
указываете их в качестве параметров вызова этой функции, то произойдет следу-
ющее. Функция воспримет значения параметров, определенные во внешней про-
грамме, однако любые их изменения в теле функции останутся локальными, то
есть после завершения работы кода функции значения указанных переменных
останутся прежними, как до вызова функции.
Рассмотрим типичные ситуации, связанные с областью действия переменных, на
следующих примерах.
Примеры
1. Переменная S определена только в теле функции, но продолжает существо-
вать во внешней программе:
_1.6. Функции_____________________________________________________________53
function Srectangle(width, height){
5 = width * height
return S
z = Srectangle(2, 3) /* значения и z и S равны б;
S - глобальная переменная */
2. Переменная 5 определена во внешней программе, но используется в теле функ-
ции:
function Srectangle(width, height) {
S = width * height
return 5
} = 2
z = Srectangle(2, .3) /* значение z равно 6,
а значение 5 осталось равным 2,
то есть значению глобальной переменной;
определенной во внешней программе */
3 . То же, что и в примере 2, но с использованием ключевого слова van
function Srectangle(width, height){
var 5 = width * height
return S
I
var S =2
z = Srectangle(2, 3) /* значение z равно 6,
а значение S осталось равным 2,
то есть значению глобальной переменной,
определенной во внешней программе */
4. Исключительно локальные переменные:
function Srectangle(width, height){
var S = width * height
var x =17
return S
}
z = Srectangle(2,3),3) /* значение z равно 6;
переменная S во внешней программе
не определена;
переменная х во внешней программе
не определена */
5. Имена параметров в определении функции совпадают с именами параметров
во внешней программе и с параметрами в вызове функции:
function Srectangle(width, hei ght) {
var s = width * height
width = width + 10 // изменяем значение параметра width
return s
I
width = 2
height = 3
z = Srectangle(width, height) /* значение z равно 6;
значение переменной width равно 2,
то есть осталось без изменений */
Программа может содержать и определение функции, и выражения ее вызова. При
этом порядок их следования в программе не важен: вы можете сначала написать
определение функции, а затем где-нибудь в программе написать ее вызов, или,
54
Глава 1. Основы JavaScript
наоборот, написать сначала вызов функции, а ее определение разместить где-ни-
будь в конце программы или даже в отдельном файле с расширением у> В приве-
денных выше примерах мы записывали определение функции до ее вызова, одна-
ко программисты чаще поступают наоборот.
Пример
Функция вычисления факториала п! с помощью оператора цикла.
В предыдущем разделе, посвященном операторам цикла, мы рассматривали про-
граммный код вычисления факториала числа п. Напомним, что факториал целого
положительного числа п в математике обозначают как п! и вычисляют по форму-
ле: 1*2 *3*... *п,если п<=1. Для п=0 и п=1 п!=1. В этом примере программу вычисле-
ния п! мы оформим в виде функции:
function factorial(n){
if(n <= 1) return 1
rezult =2 // result - переменная для результата
for (i = 3; i< = n; i++) {
rezult = rezult*i
}
return result
Для вычисления факториала конкретного числа, например 12, следует записать
выражение factorial(12).
Если в нашей программе определена описанная выше функция factorialQ,то в этой
же программе возможен такой фрагмент, содержащий вызов этой функции:
var m = 10
х = factorial(m) // значение х равно 36288Э0
Определение функции может содержать вызов этой же функции - так называе-
мое рекурсивное определение функции. В качестве примера рекурсивной функ-
ции в учебной литературе обычно приводят функцию вычисления факториала.
Пример
Функция вычисления факториала п! с помощью рекурсии.
function f actorial(n) {
if(n <= 1){
return 1
return г-f«twillCn-D // вызов функции factorial
}
Отметим, что определение этой функции можно записать более компактно, опус-
тив пару фигурных скобок, поскольку заключенный в них блок кода содержит
лишь одно выражение:
function factorial(n){
if(n <= 1) return 1
return n*factorial (n-1) // вызов функции factorial O
СОВЕТ
Чтобы избежать ошибок, старайтесь не использовать в коде функций имена переменных,
инициализированных во внешней программе. По возможности стремитесь к тому, чтобы
все, что делается внутри вашей функции, было локальным, формально независимым от
внешнего окружения.
1.7. Встроенные объекты.
55
Определение функции может содержать в себе определения других функций, од-
нако такие вложенные функции доступны только из кода функции, содержащей
их определения.
Определение функции создает так называемый экземпляр объекта Function, об-
ладающий полезными свойствами и методами. В частности, он имеет свойство
arguments, содержащее информацию о параметрах, которые действительно были
переданы функции при ее вызове. В некоторых случаях, прежде чем выполнить
выражения тела функции, требуется проанализировать значения параметров.
И тогда понадобится использовать свойство arguments. Подробности описаны
ниже, в подразделе 1.7.7.
1.6.3. Выражения с функциями
Выше мы рассматривали, что такое выражения с операторами. Ко множеству эле-
ментарных выражений JavaScript можно добавить еще и вызовы функций. Тогда
вызов функции может быть правой частью оператора присвоения, а также состав-
ной частью любого выражения с операторами.
Примеры
1. Пусть Srectangle(width, height) - функция, возвращающая значение площади
прямоугольника со сторонами width и height. Тогда для вычисления площади
прямоугольного треугольника с катетами а и b можно использовать следую-
щее выражение:
S3 = 0.5* Srectangle(a, b)
В этом примере вызов функции является операндом выражения с арифме-
тическим оператором умножения. При этом значение выражения присваивает-
ся переменной S3.
2. Вызов функции может использоваться в логических выражениях:
if (Srectangle(a, b) > Srectangle(c, d))
alert("Первый прямоугольник больше второго")
3. В качестве параметра функции может указываться вызов другой функции:
var х = "25рх"
var у = 12
var S = Srectangle(parselnt (x) , у)
В выражениях с вызовами функций последние имеют наивысший приоритет.
1.7. Встроенные объекты
Объекты представляют собой программные единицы, обладающие некоторыми
свойствами. Об объекте мы можем судить по значениям его свойств и описанию
того, как он функционирует. Программный код встроенных в JavaScript объектов
нам недоступен. Главное для нас сейчас - усвоить, как пользоваться объектами.
Это совсем просто, нужно только соблюдать нехитрый синтаксис. Использовать
объекты не труднее, чем функции. Управление веб-страницами с помощью
сценариев, написанных на JavaScript, заключается в использовании и изменении
56.
.Глава 1. Основы JavaScript
свойств объектов HTML-документа и самого браузера. Эти вопросы мы отложим
до следующих глав.
Встроенные объекты имеют фиксированные названия и свойства. Все свойства
этих объектов разделяют на два вида: просто свойства и методы. Свойства анало-
гичны обычным переменным. Они имеют имена и значения. Некоторые свойства
объектов доступны только для чтения. Это означает, что их значения нельзя из-
менять. Другие свойства доступны и для записи - их значения можно изменять
с помощью оператора присвоения. Методы аналогичны функциям, они могут
иметь параметры или не иметь их.
Чтобы узнать значение свойства объекта, необходимо указать имя этого объекта
и имя свойства, отделив их друг от друга точкой: им?: .збъекта.свойство. Заметим,
что объект может и не иметь свойств.
Мы можем заставить объект выполнить тот или иной присущий ему метод. В этом
случае также говорят о применении метода к объекту. Синтаксис соответствую-
щего выражения такой: имя_объекта.метод(параметры). Заметим, что объект может
не иметь методов.
Итак, по синтаксису свойства отличаются от обычных переменных тем, что име-
ют составные имена, а также тем, что значения некоторых свойств нельзя измене-
нить. Методы отличаются с точки зрения синтаксиса от обычных функций толь-
ко тем, что имеют составные имена.
В свете изложенного выше объект можно понимать как некоторый контейнер,
содержащий переменные-свойства и функции-методы. Разумеется, в этом кон-
тейнере есть еще что-то, но оно скрыто от нас. Мы можем воздействовать на объ-
ект только с помощью свойств и методов. В популярных книгах часто сравнивают
объект с черным ящиком, у которого есть входы и выходы, доступные для наблю-
дения и, возможно, для управления. Я не буду развивать эту аналогию, поскольку
для новичков, не обремененных традициями программирования без объектов,
понять, что такое объекты и как ими пользоваться, не составляет особого труда.
Для них понятия объекта и функции являются понятиями примерно одинаковой
сложности. При этом сложность легко преодолима, было бы желание.
В JavaScript математические вычисления, сложная обработка строк и дат, а также
создание массивов производятся с помощью соответствующих встроенных объ-
ектов. Для разработчиков веб-сайтов особенно важны объекты String (обработка
строк), Array (массивы), Math (математические формулы и константы) и Date (ра-
бота с датами). Обратите на них особое внимание.
Встроенные объекты, как уже отмечалось, имеют фиксированные названия. Объек-
ты с именами, совпадающими с их фиксированными названиями, называются ста-
тическими. Однако вы можете создать экземпляры (копии) статических объек-
тов, присвоив им свои собственные имена. Экземпляры статических объектов
являются объектами в вашей программе, которые наследуют от первых все их свой-
ства и методы. Экземпляры объектов - это некоторые частные воплощения в про-
грамме соответствующих статических объектов. Вместе с тем вы можете исполь-
зовать и статические объекты в чистом виде, не создавая никаких их копий.
Например, для формульных вычислений используется статический объект Math,
а в случае массивов создаются экземпляры статического объекта Array, содержа-
1.7. Встроенные объекты___________________________________________________57
щие конкретные данные, к которым применимы все общие методы и свойства ста-
тического объекта Array.
Встроенные объекты имеют, среди прочих, свойство prototype (прототип), с по-
мощью которого можно добавлять новые свойства и методы к уже существую-
щим экземплярам объектов. Эти новые свойства и методы, разумеется, вы долж-
ны предварительно сами продумать и воплотить в виде программных кодов. Ниже
мы покажем, как это делается. Например, при желании вы можете создать свой
собственный метод обработки строк или массивов и присоединить их к конкрет-
ным объектам, чтобы затем использовать также, как и встроенные свойства и ме-
тоды. При разработке сценариев для веб-страниц такая задача редко возникает,
но JavaScript предназначен не только для создания сценариев.
1.7.1. Объект String (Строка)
Объект String представляет интерес главным образом благодаря методам обработки
строк. Он незаменим, когда требуется, например, найти позицию вхождения од-
ной строки в другую, вырезать из строки некоторую ее часть, разбить строку на
отдельные элементы и создать из них массив и т. д.
С помощью объекта String можно создать строку как строковый объект. Однако
в подавляющем большинстве случаев для этого достаточно использовать обыч-
ную переменную и оператор присвоения строкового значения. В этом случае ин-
терпретатор все равно создает экземпляр (копию) строкового объекта, свойства
и методы которого доступны из программного кода.
Создание строкового объекта
Для создания строкового объекта используется выражение следующего вида:
имя_переменной = new Str i ng ("строковое_значение")
Здесь имя_переменной выполняет роль ссылки на строковый объект. Например,
выражение mystring = new 5Ыпд("Привет!") создает строковый объект mystring со
значением "Привет!".
Однако можно создать строковый объект и с помощью обычного оператора при-
своения:
имя_переменной = "строковое_значение"
или
var имя_переменной = "строковое_значение"
Доступ к свойствам и методам строкового объекта обеспечивается такими выра-
жениями:
строка.свойство
String.свойство
строка.метод([параметры])
String.метод( [параметры])
Некоторые методы могут и не иметь параметров, что указано с помощью квадрат-_
ных скобок. Здесь строка может быть ссылкой на строковый объект, строковой
переменной, выражением, возвращающим строку, а также просто строковым зна-
чением.
58.
.Глава 1. Основы JavaScript
Когда используется ключевое слово String в качестве имени объекта, это означает,
что нас интересуют свойства и методы статического строкового объекта, то есть
общие свойства и методы, не связанные, вообще говоря, с конкретными свойства-
ми и методами конкретного строкового объекта (экземпляра объекта String).
Ниже приведены три различных способа использования свойства length строко-
вого объекта, значением которого является длина строки (количество символов
в строке).
mystring = "Однажды в студеную зимнюю пору"
mystring, length // значение равно 30
"Однажды в студеную зимнюю пору".length // значение равно 30
function fstrlflfCJ (return "afttde"} /* функция, возвращающая
строку "abcde" */
fstringO.length //значение равно 5
Методы строкового объекта используются для синтаксической обработки и фор-
матирования строк. Эти две группы методов мы рассмотрим отдельно.
Свойства String
length - длина или, иными словами, количество символов (включая пробелы)
в строке; целое число.
Пример
■Иван-.length // значение равно 4
"ПриветХпвсем". length /* значение равно 11
(\п - один символ перевода строки) */
х = "'" // пустая строка
х.length // значение равно 0 (пустая строка имеет длину 0)
prototype - свойство (прототип), позволяющее добавить новые свойства и мето-
ды ко всем создаваемым строковым объектам, если уже существующих вам ока-
жется недостаточно.
Пример
В приведенном ниже примере мы создаем новый метод для всех строковых объ-
ектов. Содержание этого метода определяется пользовательской функцией.
function myF u n cOO { // функция для нового метода
return "Вадим"
I
// Добавление нового метода myName к прототипу:
String.prototype.myNameO = myFunc
mystring = "Автор этой книги - " + "Дунаев ".myNameO
/* значение mystring
равно "Автор этой книги - Дунаев Вадим" */
Методы String обработки строк
1. charAt(nHfleKc) - возвращает символ, занимающий в строке указанную пози-
цию.
Синтаксис: строка.с1пагА1(индекс)
Возвращает односимвольную или пустую строку.
Параметр (индекс) является числом, индекс первого символа равен 0.
1.7. Встроенные объекты.
_59
Примеры
"Привет".charAt(2> // значение равно "и"
"Привет".charAt(lS) // значение равно ""
mystring = "Привет"
mystring.charAt (mystring.length-1) /* значение последнего символа
равно "т" */
2. charCodeAt([MHfleKc]) - преобразует символ в указанной позиции строки в его
числовой эквивалент (код).
Синтаксис: строка. сИагСойеАЩиндекс])
Возвращает число.
IE4+ и NN6 поддерживают систему кодов Unicode , NN4 - ISO-Latin 1.
Примеры
"abc" . charCodeAtO // значение равно 97
>с" . charCodeAt(l) // значение равно 98
"abc" . charCodeAt(25) // значение равно NaN
"" . charCodeAt ®5) // значение р авно NaN
"я". charCodeAt(0) // значение £авно 1103
3. fromCharCode(HOMepl [, номер2 [, ... номерМ]]) - возвращает строку символов,
числовые коды которой указаны в качестве параметров.
Синтаксис: String.fromCharCode(HOMepl [, номер2 [,... номерМ]])
Возвращает строку.
IE4+ и NN6 поддерживают систему кодов Unicode, NN4 - ISO-Latin 1.
Пример
String.frOmChsrCod*(97,Э».Ш?) // значение равно "аЬю"
4. concat(crpoKa) - конкатенация (склейка) строк.
Синтаксис: строка!.с опса1(строка2)
Возвращает строку.
Этот метод действует так же, как и оператор i > сложения для строк: к строке
строка! приписывается справастрока2.
Примеры
" Иван".concat("Ива нов") // значение равно "ИванИванов"
х = "Федор" + " - // значение х равно "Федор "
ж.сопсак-Иванов") // значение равно "Федор Иванов"
5. indexOf(cTpoKa_noMCKa [, индекс]) - производит поиск строки, указанной пара-
метром, и возвращает индекс ее первого вхождения.
Синтаксис: строка.1пс1ехОт(строка_поиска [, индекс])
Возвращает число.
Метод производит поиск позиции первого вхождения строка_поиска в строку
строка. Возвращаемое число (индекс вхождения) отсчитывается от 0. Если по-
иск не удачен, то возвращается -1. Поиск в пустой строке всегда возвращает -1.
Поиск пустой строки всегда возвращает 0.
Второй параметр, не являющийся обязательным, указывает индекс, с которого
следует начать поиск.
60.
.Глава 1. Основы JavaScript
Этот метод хорошо использовать вместе с методом выделения подстроки substr()
(см. ниже), когда требуется сначала определить позиции начала и конца выде-
ляемой подстроки. Рассматриваемый здесь метод подходит для определения
начальной позиции.
Примеры
х ="Во первы х строках своего письма"
x.indexOff'nepBbix-) //значение равно 3
ndexOf("пeорBbix строках") //значение равно 3
х.indexOf("втopbiх строках") //значение равно -1
x.indexOfГ В") //значение равно 0
х.indexOf ("в") //значение равно 6
х.indexOf("в" , 7) //значение равно 19
x.indexOfС" ") //значение равно 2
indexOfC ", 5) //значение равно 9
x.indexOf(""} //значение равно 0
6. L a s t I n d e x O f ( c T p o K a_n o H C K a [, индекс]) - производит поиск строки, указанной па-
раметром, и возвращает индекс ее первого вхождения; при этом поиск начина-
ется с конца исходной строки, но возвращаемый индекс отсчитывается от ее
начала, то есть от 0.
Синтаксис: строка.LastIndexOf(crpoKa_noMCKa [, индекс])
Возвращает число. Метод аналогичен рассмотренному выше indexOfQ и отли-
чается лишь направлением поиска.
Примеры
х ="Во первых строках своего письма"
x.lastlndexOfl "первых") // значение равно 3
// значение равно 30
.indexOfra") // значение равно 15
7. 1оса1еСотраге(строка) - позволяет сравнивать строки в кодировке Unicode, то
есть с учетом используемого браузером языка общения с пользователем.
Синтаксис: строка!.1оса1еСотраге(строка2)
Возвращает число. Совместимость: IE5.5+, NN6+.
Если сравниваемые строки одинаковы, метод возвращает 0. Если строка! мень-
ше, чем строка2, то возвращается отрицательное число, в противном случае -
положительное. Сравнение строк происходит путем сравнения сумм кодов их
символов. Абсолютное значение возвращаемого числа зависит от браузера. Так,
IE5.5 и IE6.0 возвращают 1 или -1, a NN6 - разность сумм кодов в кодировке
Unicode.
8. зИсе(индекс1 [,индекс2]) -возвращает подстроку исходной строки, начальный
и конечный индексы которой указываются параметрами, за исключением по-
следнего символа.
Синтаксис: строка.$Нсе(индекс1 [, индекс2])
Возвращает строку. Данный метод не изменяет исходную строку.
Если второй параметр не указан, то возвращается подстрока с начальной пози-
цией индекс! и до конца строки. Отсчет позиций начинается с начала строки.
Первый символ строки имеет индекс 0. Если второй параметр указан, то воз-
вращается подстрока исходной строки начиная с позиции индекс! идо позиции
1.7. Встроенные объекты.
_61
индекс2, исключая последний символ. Если второй параметр отрицателен, то
отсчет конечного индекса производится от конца строки. В этом заключается
основное отличие метода slice() от substr(). Сравните также этот метод с мето-
дом substringQ.
Примеры
х = "Во первых строках своего письма"
х.slice(3.8, // значение равно "первы"
// значение равно "первых строках своего пись"
/* Анализ адреса электронной почты */
х = "mumuisigerasim.ru"
i = х. indexOf ("@") // значение равно 4
name = x.slice(0, i) // значение равно "raumu"
"domen = x.slice(i + l, х. indexOf (".")) // значение равно "gerasim"
_domen = х.slic e(i+l, -3) // значение равно"gerasim"
9. зрЩразделитель [, ограничитель]) - возвращает массив элементов, полученных
из исходной строки.
Синтаксис: строка.зрЩразделитель [, ограничитель])
Возвращает массив.
Первый параметр является строкой символов, используемой в качестве разде-
лителя строки на элементы. Второй необязательный параметр - число, указы-
вающее, сколько элементов строки, полученной при разделелении, следует
включить в возвращаемый массив.
Если разделитель - пустая строка, то возвращается массив символов строки.
Примеры
х = "Привет всем"
K.splitC ■') /* значение - массив из элементов: "Привет", "всем" */
/* значение - массив из элементов: "Прив", "т вс", "м" */
\2) /* значение - массив из элементов: "Прив", "т вс" */
10. substr(nHfleKC [, длина]) - возвращает подстроку исходной строки, начальный
индекс и длина которой указываются параметрами.
Синтаксис: строка.substr(nHfleKc [, длина])
Возвращает строку. Данный метод не изменяет исходную строку.
Если второй параметр не указан, то возвращается подстрока с начальной пози-
цией индекс! и до конца строки. Отсчет позиций начинается с начала строки.
Первый символ строки имеет индекс 0. Если второй параметр указан, то воз-
вращается подстрока исходной строки начиная с позиции индекс 1 и с общим
количеством символов, равным длина. Сравните этот метод с методами sliceQ
и substringQ.
Примеры
х = "Привет всем"
x.SUbstr<7,4) // значение равно "всем"
/* Анализ адреса электронной почты */
х = "mumu@gerasim.ru"
i = х.indexOf("@") Г1) // значение равно 4
_name = x.substr(0, i) // значение равно "mumu"
// значение равно "gerasim.ru"
62_______________________________________________________Глава 1. Основы JavaScript
11. substring(MHfleKd, индекс2) - возвращает подстроку исходной строки, началь-
ный и конечный индексы которой указываются параметрами.
Синтаксис: CTpoKa.substring(MHfleKCl, индекс2)
Возвращает строку. Данный метод не изменяет исходную строку.
Порядок индексов не важен: наименьший из них считается начальным. Отсчет
позиций начинается с начала строки. Первый символ строки имеет индекс 0.
Символ, соответствующий конечному индексу, не включается в возвращаемую
строку. Сравните этот метод с методами substrQ и sliceQ.
Примеры
х = "Привет всем"
х.substring(0 , 6) // значение равно "Привет"
x. substring(7, х. length) // значение равно "всем"
х. substring(7, 250) // значение равно "всем"
х.substring(250, 7) // значение равно "всем"
12. toLocaleLowerCaseQ,toLowerCase() -переводят строку в нижний регистр.
Синтаксис: cTpOKa.toLocaleLowerCaseQ, CTpoKa.toLowerCaseQ
Возвращают строку. Первый метод работает в IE5.5+, NN6, учитывает опреде-
ленные языковые системы.
Приведение строк к одному и тому же регистру требуется, например, при срав-
нении содержимого строк без учета регистра. Кроме того, многие серверы чув-
ствительны к регистру, в котором определены имена файлов и папки (обычно
требуется, чтобы они были определены в нижнем регистре).
Примеры
х = "ЗдраВствуйТе"
x.toLocaleLowerCaseO // значение равно "здравствуйте"
х. toLowerCase() // значение равно "здравствуйте"
у = "Здравствуйте"
х == у // значение равно false
х. tol_owerCase() == у . toLowerCase // значение равно true
13. toLocalellpperCaseQ, toUpperCase() - переводят строку в верхний регистр.
Синтаксис: CTpoKa.toLocaleUpperCaseQ, crpoKa.toUpperCase()
Возвращают строку.
Первый метод работает в IE5.5+, NN6, учитывает определенные языковые сис-
темы.
Приведение строк к одному и тому же регистру требуется, например, при срав-
нении содержимого строк без учета регистра. Кроме того, многие серверы чув-
ствительны к регистру, в котором определены имена файлов и папки.
Примеры
х = "ЗдраВствуйТе"
х. toLocaleUpperCase() // значение равно "ЗДРАВСТВУЙТЕ"
// значение равно "ЗДРАВСТВУЙТЕ"
у = "Здравствуйте"
х == у // значение равно false
х . toUpperCaseO == у . tollpperCase // значение равно true
1.7. Встроенные объекты
63
Методы String форматирования строк
Как известно, тексты на веб-страницах обычно создаются и форматируются с по-
мощью тегов HTML. Однако тексты можно создавать на веб-страницах и с по-
мощьюсценариев. Например, чтобывывестинавеб-страницу строку "Приветвсем!"
полужирным шрифтом, в HTML-коде следует написать следующую инструкцию:
<В>Привет всем!</В>
Чтобы подготовить эту же строку в таком же формате средствами JavaScript,
в сценарии следует написать такое выражение:
"Приветвсем!".bold()
Здесь использован метод boldQ строкового объекта для форматирования строк.
Выполнение этого выражения лишь создает отформатированную строку, но не
выводит ее в окно браузера. Чтобы сделать это, следует еще выполнить метод write()
объекта document для записи этой строки в HTML-документ. Ниже приведен при-
мер кода и вид HTML-документа в окне браузера (рис. 1.11).
<HTML>
<SCRIPT>
х = "Привет всем! ".bold()
document.wri te(x)
</SCRIPT>
<Р>Приветствие было вставлено
</HTML>
сценарием JavaScript
•ЦСЛМоидокумекты\примеры.Ыт - Miuiosolttntetnet Е х р Щ
Фай. ,авк* Вид ШЕр*нн.и еШЙС Ш#Ш "
U'MB *!&-8§
Привет всем!
Приветствие было вставлено сценарием JavaScnpt
.
I Мой i% - ■
Рис. 1.11. Приветствие в верхней строке сформировано сценарием
В рассмотренном выше примере использован объект document и его метод writeQ.
Другие свойства и методы этого объекта рассматриваются в следующих главах.
Методы форматирования строк носят названия, соответствующие тегам HTML.
Их особенность в том, что, в отличие от тегов, их следует записывать только в ниж-
нем регистре (строчными буквами). Синтаксис такой же, как и у ранее рассмот-
ренных методов:
строка.метод(параметр)
Большинство методов форматирования не имеют параметров. Далее приведен их
список.
64
.Глава 1. Основы JavaScript
апег)ог("апсг)ог_имя")
Ип1<(расположение или URL)
blink()
ig()
bold()
smalt()
fixed ()
strike()
fontcolor(3Ha4eHne L|BeTa)
sub()
fontsize(4MOio от 1 до 7)
sup()
italicsQ
Примеры
"Глава 2" . anchor("volume2")
/* эквивалентно HTML-коду:
<A NAME="volume2">rnaea 2</A> */
"Страница автора".link("http:/www.admiral.ru/~dunaev")
/* эквивалентно HTML-коду:
<A HREF = "http:/www.admiral.ru/~dunaev")>Страница автора</А> */
Функции вставки и замены подстрок
При обработке строк часто требуется вставить или заменить подстроки. Удале-
ние подстроки из данной строки можно рассматривать как частный случай заме-
ны, а именно замены указанной подстроки пустой строкой. С помощью методов
объекта String можно написать программу для решения этой задачи. Поскольку
она часто встречается, то целесообразно оформить программу в виде функций.
Рассмотрим сначала функцию вставки строки в исходную строку. Назовем ее,
например, insstr. Данная функция должна принимать три параметра: исходную
строку si, вставляемую строку s2 и индекс позиции вставки п. Ниже приведены
ее определение и примеры вызова:
function insstr(sl,s2,n) {
return si.slice(O.n) + s2 + sl.slice(n)
}
insstr ("Привет., друзья", " мои", 7) // "Привет, мои друзья"
'Привет, друзья", " мои", 100) // "Привет, друзья мои"
Теперь займемся функцией, которая заменяет в исходной строке все вхождения
заданной подстроки на подстроку замены. Назовем эту функцию replacestr. Она
должна принимать три параметра: исходную строку si, заменяемую подстроку s2
и подстроку s3, которой следует заменить все вхождения s2 в si (s2 может встре-
чаться в si несколько раз).
Очевидно, прежде всего необходимо найти все вхождения s2 в si. Если исходная
строка не содержит в себе подстрок s2, то функция должна вернуть исходную под-
строку без всяких изменений. В противном случае требуется изъять из si все вхож-
дения s2, а на их место вставить подстроку s3. Полученная таким образом строка
должна возвращаться функцией в качестве результата. Ниже приведено опреде-
ление функции для замены подстрок и два примера ее вызова:
function replacestr (si, s2, s3) {
var s = " // обработанная часть строки
while (true) {
i = si.indexOf(s2)2) // индекс вхождения s2 в si
if (i >= 0) {
s = s + sl.substr(0, i) + s3 // обработанная часть строки
1 = sl.SUbstr1 + s2.length) // оставшаяся часть строки
}else break
1.7. Встроенные объекты.
65
return s + sx
replacestr C'bacdae", "a", "X") // "bXcdXe"
x = "Иван Иванов"
replacestrCx."Пеан"."Федор") // "Федор Федоров"
Заметим, что если заменяемая подстрока s2 является пустой, то цикл будет про-
должаться бесконечно, поскольку пустая строка входит в состав любой строки.
Чтобы избежать зацикливания, следует немного изменить код тела функции. Но
что должна возвращать наша функция, если s2 - пустая строка? Вы можете ре-
шить, что в этом случае следует просто вернуть исходную строку si или же, на-
пример, считать пустую строку строкой, содержащей пробел. Последний вариант
представляется мне более интересным. Вот код, реализующий эту идею:
function replacestr(si, s2, s3) {
if (s2 == "")
s2 = " '■ // заменяем пустую строку на строку с пробелом
var s = " // обработанная часть строки
while (true) {
i = si. indexOf (s2) // индекс вхождения s2 в si
if (i >= 0) {
s = s + sl.substr(0, i) + s3 // обработанная часть строки
si = sl.substr(i + s2. length) // оставшаяся часть строки
}else break // выход из цикла
v
return s + sx
i
Рассмотренные выше функции вставки и замены подстрок (insstrQ и replacestrQ)
готовы к практическому применению в программах, где требуется обработка строк.
Вы можете сохранить определения этих функций в текстовом файле с расшире-
нием .js, который будет играть роль библиотеки функций. Этот файл можно вы-
зывать из основной программы, когда он потребуется. Более подробно этот во-
прос мы рассмотрим в следующей главе.
Фун з==ьия х п п е р редних в
При обработке строк (например, введенных пользователем в поля формы) неред-
ко возникает задача удалить лишние передние и задние пробелы. Многие языки
программирования имеют соответствующие встроенные функции, но в JavaScript
их нет. Поэтому не помешает создать их самому с помощью имеющихся средств
и поместить в свою библиотеку (сохранить в текстовом файле с расширением .js).
Решить поставленную задачу можно несколькими способами. Я придумал сле-
дующий алгоритм. Преобразуем исходную строку в массив слов, используя в ка-
честве разделителя один пробел Затем необходимо проанализировать первые
или последние элементы массива в зависимости от того, что нам требуется: уда-
лить передние или задние пробелы в исходной строке. Допустим, необходимо уда-
лить передние пробелы. Тогда, если исходная строка содержала N пробелов, пер-
вые N элементов массива будут содержать пустые строки"". Мы проверяем в цикле
значения первых элементов, пока не найдем непустой элемент или пока не исчер-
66
.Глава 1. Основы JavaScript
паем весь массив. Если первый непустой элемент массива имеет индекс i, то со-
здадим новый массив, содержащий элементы исходного, начиная с этого индекса.
Наконец, склеим элементы этого массива в одну строку, используя в качестве раз-
делителя строку с единственным пробелом " ". Все, что нам понадобится, - это
методы объекта String, оператор цикла и оператор условного перехода.
Сначала рассмотрим функцию ItrimQ, удаляющую передние пробелы из исход-
ной строки.
function Itrim(xstr){
var—r. split ( ": ™;; е с л и в н е й нет передних п р о б е л о в */
while (i 0 < astr.length){
if (!(astr[i] == ("")))
break /* выходим из цикла,
если элемент не пуст */
i++
}
astr = astr.slice(i) // создаем массив
return astr.join("") // склеиваем элементы массива в строку
}
Функция rtrim() для удаления заключительных пробелов в строке устроена ана-
логично. Ее отличие в том, что поиск пробелов происходит с конца строки. Обра-
тите внимание, что счетчик циклов в этом случае убывающий.
function rtrim(xstr){
if (! (xstr.lastlndexOf (" ") == xstr.length - 1))
return xstr ...
var astr = xstr.split("
var i = astr.length -1
while (i>0){
if (!(astr[i] == ("")))
■ break
l --
}
astr = astr.slice(0, .i+1)
return astr.join("
}
Чтобы удалить из строки и передние, и концевые пробелы, достаточно выпол-
нить следующее выражение:
ystr = rtrim(ltrim(xstr))
Впрочем, можно создать специальную функцию trim(), которая тримингует
строку:
function trim(xstr) {
return rtrim(ltrim(xstr))
:)
1.7.2. Объект Array (Массив)
Массив представляет собой упорядоченный набор данных. Его удобно предста-
вить себе в виде одностолбцовой таблицы, содержащей некоторое количество
строк. В ячейках такой таблицы могут находиться данные любого типа, в том чи-
1.7. Встроенные объекты.
67
еле и массивы. В последнем случае можно говорить о многомерных массивах (то
есть о массивах массивов). Количество элементов в массиве (строк в таблице)
называется длиной массива. К элементам массива можно обращаться в програм-
ме по их порядковому номеру (индексу). Нумерация элементов массива начина-
ется с нуля, так что первый элемент имеет индекс 0, а последний - на единицу
меньший, чем длина массива.
Массивы применяются во многих более или менее сложных программах обработ-
ки данных, а в некоторых случаях без них просто не обойтись. Если среди исполь-
зуемых данных есть группы таких, которые обрабатываются одинаковым обра-
зом, то, возможно, лучше организовать их в виде массива.
Создание массива
Существует несколько способов создания массива. В любом случае прежде всего
создается новый объект массива с использованием ключевого слова new:
имя_массива = new Array([длина_массива])
Здесь длина_массива является необязательным числовым параметром, о чем гово-
рят квадратные скобки. Если длина массива не указана, то создается пустой мас-
сив, не содержащий ни одного элемента. В противном случае создается массив
с указанным количеством элементов, однако все они имеют значение null (то есть
не имеют значений).
Вы можете сначала создать пустой массив, а затем добавить к нему нужное коли-
чество элементов с помощью оператора присвоения. Заметим, что выражение
с ключевыми словами new Array создает экземпляр (копию) объекта Array.
У объекта Array имеется свойство length, значением которого является длина мас-
сива. Чтобы получить значение этого свойства, необходимо использовать выра-
жение имя_массива.length.
Создав массив, можно присвоить значения его элементам, используя для этого
оператор присвоения. В левой части оператора присвоения указывается имя мас-
сива, а рядом с ним в квадратных скобках индекс элемента. Мы уже говорили, что
к элементам массива обращаются по индексу: имя_массива[индекс]. Здесь квад-
ратные скобки обязательны.
Рассмотрим создание массива earth, содержащего в качестве элементов некото-
рые характеристики нашей планеты. Обратите внимание, что элементы в этом
массиве различных типов (строковые и числовые).
earth = new Array(4) // массив из 4-х элементов
earth[0] = "Планета"
earth fl] = "24 часа"
earth[2] = 6378
earth[3] = 365.25
earth.length // значение равно 4
Если нам потребуется значение, например, третьего элемента массива, то доста-
точно использовать выражение earth [2].
Другой способ создания массива заключается в непосредственном определении
элементов в круглых скобках за ключевым словом Array.
Пример
earth = new Array ("Планета", "24 часа", 6378, 365.25)
68________________________________________________Глава 1. Основы JavaScript
JavaScript автоматически создает индексы для элементов массива, так что к эле-
ментам массива, созданного таким способом, также можно обращаться по индексам.
Третий способ создания массива - присвоить имя каждому элементу, подобно
имени свойства объекта
Пример
earth = newArrayO // пустой массив
earth. xtype = "Планета"
earth. xday = "24 часа"
earth . radi us = 6378
earth.period = 365.25
В этом случае обращение к элементу происходит как к свойству объекта, напри-
мер earth.radius. Возможен и такой вариант: earth["radius"]. Однако по индексу
к элементам в таком массиве обращаться нельзя.
Многомерные массивы
Массивы, рассмотренные выше, являются одномерными. Их можно представить
себе в виде таблицы из одного столбца. Однако элементы массива могут содер-
жать данные различных типов, в том числе и объекты, а значит, и массивы. Если
в качестве элементов некоторого одномерного массива создать массивы, то полу-
чится двухмерный массив. Обращение к элементам такого массива происходит
в соответствии со следующим синтаксисом:
имя_массива[индекс_уровня1 ] [индекс_уровня2]
Если массив имеет размерность, большую двух, то синтаксис обращения к масси-
вам имеет аналогичный синтаксис: следует добавить нужное количество квадрат-
ных скобок, заключающих нужные индексы.
Типичным примером двухмерного массива является массив опций меню. У тако-
го меню есть горизонтальная панель с опциями, называемая главным меню. Не-
которым опциям главного меню соответствуют раскрывающиеся вертикальные
подменю со своими опциями. Мы создаем массив, длина которого равна количе-
ству опций главного меню. Элементы этого массива определяем как массивы на-
званий опций соответствующих подменю. Чтобы была ясна структура нашей кон-
струкции, мы выбрали названия опций надлежащим образом. Например, "Меню
2.1" - название 1-й опции подменю, соответствующего 2-й опции главного меню.
menu = new ArrayO
menu[0] = new an'ay ("Мени) 1.1", "Меню 1.2", ""Меню 1.3")
menu[l] = new аггауС'Меню 2.1", "Меню 2.2")
menu[2] = new аггауС'Меню 3.1", "Меню 3.2" , "Меню 3.3", "Меню 3.4")
Чтобы обратиться ко 2-й опции 3-го подменю, следует написать:
menu[2][l] // значение равно "Меню 3.2"
Усложним нашу конструкцию, чтобы она содержала не только названия опций
подменю, но и названия опций главного меню:
menu = new ArrayO
/* Массив опций главного меню: */
menu[0] = new Array( "Меню!", "Меню2", "МенюЗ")
menu[l] = new ArrayO
fflenu[l][Q] = new АггауС'Меню 1.1". "Меню 1.2", "Меню 1.3")
meinu[l] [l] = new АггауС'Меню 2.1", "Меню 2 . 2")
min u [ l ] [ 2 ] = new АггауС'Меню 3.1", "Меню 3.2" , "МенюЗ.3", "Меню 3.4")
1.7. Встроенные объекты.
69
menu[0][l] // значение равно "Меню 2"
menu[0][2 П значение равно "Меню 3"
menu[l] [1] [0] // значение равно "Меню 2.1"
menu[1][2][3] // значение равно "Меню 3.2"
Копирование массива
Иногда требуется создать копию массива, чтобы сохранить исходные данные
и предохранить их от последующих модификаций. Например, метод сортировки
элементов массива, который рассмотрен ниже, изменяет исходный массив. Одна-
ко для копирования массива недостаточно присвоить его другой переменной. Ис-
пользуя новую переменную и оператор присвоения, мы создаем лишь новую ссыл-
ку на прежний массив, а не новый массив.
Пример
а = new Array(5, 2, 4, 3)
х = а // ссылка на массив а
а[2] = 25 // изменение значения элемента с индексом 2
х[2] // значение равно 25, то есть новому значению
а [2]
В этом примере массивы а и х совпадают.
Чтобы скопировать массив, то есть создать новый массив, элементы которого рав-
ны соответствующим элементам исходного, следует воспользоваться оператором
цикла, в котором элементам нового массива присваиваются значения элементов
исходного, например:
а = new Аггау(5, 2, 4, 3)
х = new ArrayO // ссылка на массив а
for(i=0; i<a.length; i++) /* копирование значений массива а
в элементы массива х */
{x[i] = a [i] }
Свойства Array
1. length - длина или, иными словами, количество элементов в массиве; целое
число.
Синтаксис: имя_массива.length
Поскольку индексация элементов массива начинается с нуля, индекс послед-
него элемента на единицу меньше длины массива. Это обстоятельство удобно
использовать при добавлении к массиву нового элемента: myarray [mayarray.length]
= значение.
2. prototype - свойство (прототип), позволяющее добавить новые свойства и ме-
тоды ко всем созданным массивам.
Например, следующее выражение добавляет свойство author ко всем уже со-
зданным массивам:
Array.prototype.author = "Иванов"
Если теперь вместо Array, prototype написать имя существующего массива, то
можно изменить значение свойства author только для этого массива:
myarray = new ArrayO // создание массива myarray
xarray = new ArrayO // создание массива xarray
Array prototype.author = "Иванов" /* добавление прототипа
ко всем массивам */
70 ___________________________Глава 1. Основы JavaScript
myarray.author = "Иванов младший" /* изменение свойства author i
для myarray */
xarray.author = "Сидоров" /* изменение свойства author
для xarray */
Прототипу можно присвоить функции. При этом они пополнят множество ме-
тодов объекта Array.
Пример
Вычисление суммы элементов массива. Мы определяем функцию aSum(), кото-
рая возвращает сумму элементов числового массива. В качестве параметра эта
функция принимает массив. Затем создаем конкретный массив чисел. Нако-
нец, присоединяем к прототипу массива новый метод Sum - определенную ра-
нее функцию aSum():
function aSum(xarray) {
var s = 0
for(i = 0; i <= xarray .length -1 ; i++){
s = s + xarray [i]
return s
I
myarray = new Array(2, 3,4) // создаем массив myarray из 3-х чисел
Array. prototype. Sum = aSum /* присоединяем метод (около имени
функции скобки указывать не нужно) */
my array. Sum (my array) /* применяем метод Sum к массиву myarray,
передавая е г оо в качестве параметра */
Этот пример призван просто проиллюстрировать использование свойства proto-
type. Чтобы вычислить сумму элементов массива, достаточно написать следую-
щее выражение:
s = aSum(myarray)
Методы Array
Методы объекта Array предназначены для управления данными, сохраненными
в структуре массива.
1. сопса1(массив) - конкатенация массивов, объединяет два массива в третий мас-
сив.
Синтаксис: имя_массива!.сопса1(массив2)
Возвращает массив. Данный метод не изменяет исходные массивы.
Пример
al = new array(l, 2, "Звезда")
а2 = new arrayC'a", "б", "в", "г")
аЗ = al.concat(a3) X) /* результат - массив с элементами:
1, 2, "Звезда", "а", ' . "В", "Г" */
2. р1'п(разделитель) - создает строку из элементов массива с указанным раздели-
телем между ними; является строкой символов (возможно, пустой).
Синтаксис: имя_массиваоо1'п(строка)
Возвращает строку символов.
Примеры
а = new array( l, 2, "Звезда")
a.join(",") // значение - строка "1,2,Звезда"
1.7. Встроенные объекты.
71
а = new arrayd, 2, "Звезда")
a-l°in(" // значение - строка "1 2 Звезда"
3. рор() - удаляет последний элемент массива и возвращает его значение.
Синтаксис: имя_массива.рор()
Возвращает значение удаленного элемента массива. Совместимость: IE5.5+.
Данный метод изменяет исходный массив.
4. ри5И(значение|объект) - добавляет к массиву указанное значение в качестве
последнего элемента и возвращает новую длину массива.
Синтаксис: имя_массива!.ри5Ь(значение|объект)
Возвращает число. Совместимость: IE5.5+. Данный метод изменяет исходный
массив.
5. shiftQ - удаляет первый элемент массива и возвращает его значение.
Синтаксис: имя_массива.shiftQ
Возвращает значение удаленного элемента массива. Совместимость: IE5.5+,
NN4+. Данный метод изменяет исходный массив.
6. ип5И1'г1(значение|объект) - добавляет к массиву указанное значение в качестве
первого элемента.
Синтаксис: имя_массива.ип5МЩзначение|объект)
Возвращает: ничего. Совместимость: IE5.5+. Данный метод изменяет исходный
массив.
7. reverseQ - изменяет порядок следования элементов массива на противополож-
ный.
Синтаксис: имя_массива.геуегзе()
Возвращает массив. Данный метод изменяет исходный массив.
Пример
а = new array(I. 2, "Звезда")
a.reverseo /* массив с элементами в следующем порядке:
"Звезда", 2, 1 */
8. 5и$е(индекс1 [, индекс2]) - создает массив из элементов исходного массива
с индексами указанного диапазона.
Синтаксис: имя_массива.5Н5е(индекс! [, индекс2])
Возвращает массив. Данный метод не изменяет исходный массив.
Второй параметр (конечный индекс) не является обязательным, о чем свиде-
тельствуют квадратные скобки в описании синтаксиса. Если он не указан, то
создаваемый массив содержит элементы исходного массива начиная с индекса
индекс! идо конца. В противном случае создаваемый массив содержит элемен-
ты исходного массива начиная с индекса индекс! идо индекса индекс2, за ис-
ключением последнего. При этом исходный массив остается без изменений.
Пример
а = new а г г а у ( 1 , 2, "Звезда","а", "Ь")
a.sl1se(1.3) // массив с элементами: 2, "Звезда"
a.slise(2) // массив с элементами: "Звезда", "а", "Ь"
72.
.Глава 1. Основы JavaScript
9. 50|1([функция_сортировки]) - сортирует (упорядочивает) элементы массива
с помощью функции сравнения.
Синтаксис: имя_массива.5оИ:([функция_сравнения])
Возвращает массив. Данный метод изменяет исходный массив. Параметр не
обязателен, о чем свидетельствуют квадратные скобки.
Если параметр не указан, то сортировка производится на основе сравнения
ASCII-кодов символов значений. Это удобно для сравнения символьных строк,
но не совсем подходит для сравнения чисел. Так, число 357 при сортировке счи-
тается меньшим, чем 85, поскольку сначала сравниваются первые символы
и только в случае их равенства сравниваются следующие, и т. д. Таким обра-
зом, метод sortQ без параметра подходит для простой сортировки массива со
строковыми элементами.
Можно создать свою собственную функцию для сравнения элементов массива,
с помощью которой метод sortQ отсортирует весь массив. Имя этой функции
(без кавычек и круглых скобок) передается методу в качестве параметра. При
работе метода функции передаются два элемента массива, а ее код возвращает
методу значение, указывающее, какой из элементов должен следовать за дру-
гим. Допустим, сравниваются два элемента, х и у. Тогда в зависимости от чи-
слового значения (отрицательного, 0 или положительного), возвращаемого функ-
цией сравнения, методом sort() принимается одно из трех возможных решений:
Значение, возвращаемое Результат сравнения х и у
функцией сравнения
<0 у следует за х
О Порядок следования х и у не изменяется
>0_______________________________х следует за у__________________________________
Итак, по какому критерию сортировать элементы массива, определяется кодом
функции сравнения. Если элемент массива имеет значение null, то в Internet
Explorer он размещается в начале массива.
Пример
myarray = new Array(4, 2, 15, 3, 30 ) // числовой массив
function сотр:, у) { // функция сравнения return х-у
}
/* массив с элементами в порядке:
2, 3, 4. 15, 30 */
10. зрИсе(индекс, количество [, элем! [, элем2 [, ...э/ieMN]]]) - удаляет из массива не-
сколько элементов и возвращает массив из удаленных элементов или заменя-
ет значения элементов.
Синтаксис: имя_массива.5рНсе(индекс, количество [, элем! [, элем2 [, ...элемМ]]])
Возвращает массив. Совместимость: IE5.5+. Данный метод изменяет исходный
массив.
Первые два параметра обязательны, а следующие - нет. Первый параметр яв-
ляется индексом первого удаляемого элемента, а второй - количеством удаля-
емых элементов.
1.7. Встроенные объекты.
73
Пример
а = new Array ("Вася", "Иаван", "Марья", 12, 5)
х = a. spl i с е (1 ,3) /* х - массив элементов: "Иван", "Марья", 12
а - массив элементов: "Вася", 5 */
Метод spliceQ позволяет также заменить значения элементов исходного масси-
ва, если указаны третий и, возможно, последующие параметры. Эти параметры
представляют значения, которыми следует заменить исходные значения эле-
ментов массива. При таком использовании метода spliceQ важен первый пара-
метр (индекс), а второй (количество) может быть равным нулю. В любом слу-
чае, если количество элементов замены больше значения второго параметра, то
часть элементов исходного массива будет заменена, а часть элементов будет
просто вставлена в него. При этом метод spliceQ возвращает другой массив, со-
стоящий из элементов исходного, индексы которых соответствуют первому
и второму параметрам. Но это справедливо, если второй параметр не равен 0.
Пример
а = n e w Array("Вася", "Иван", "Марья", 12, 5)
х = а. spliс е(1,3, "Петр", "Кузьма", "Анна")
// х - массив элементов: "Иван", "Марья", 12
//а - массив элементов: "Вася","Петр", Кузьма", "Анна",5
а = new Array("Вася", "Иван", "Марья", 12, 5)
х = a.spliсе(1,0, "Петр", "Кузьма", "Анна", "Федор", "Ханс")
// х - пустой массив
/* а - массив элементов:
■Петр", "Кузьма", "Анна", "Федор", "Ханс" */
H.toLocaleStringO, toString() - преобразуют содержимое массива в символьную
строку.
Метод toLocaleStringQ поддерживается браузерами IE5.5+ и NN3+ , а метод
toStringO - и более ранними версиями. Алгоритм преобразования по методу
toLocaleStringO зависит от версии браузера.
Для преобразования содержимого массива в строку рекомендую использовать
методjoin().
Функции обработки числовых массивов
Во многих приложениях требуется получить статистические характеристики чи-
словых данных, хранящихся в виде массива: сумму всех чисел, среднее, макси-
мальное и минимальное значения. Здесь мы приведем коды функций, вычисляю-
щих эти величины.
Функция, возвращающая сумму значений всех элементов непустого массива:
function S(aN) {
var S=aN[0
for(var i = 1; i<= aN. length-1; i++ ) {
S += aN[i]
return S
}
Очевидно, для вычисления среднего значения следует просто воспользоваться
выражением S(aN)/aN.length.
74
.Глава 1. Основы JavaScript
Функция, возвращающая минимальное значение среди элементов массива:
function Nmin(aN){
var Nmin = aN[0]
for(var i = l ; i <= aN.length-1; i++){
if (aN[i] < Nmin)
Nmin = aN[i]
I
return Nm in
}
Функция, возвращающая максимальное значение среди элементов массива:
function Nmax(aN){
var Nmax = aN[0]
for(var i = 1; 1 <= aN.length -1; i + + ){
if (aN[i] > Nmax)
Nmax = aN[i]
}
return Nmax
}
Мы можем создать одну функцию, которая вычисляет все перечисленные выше
статистические характеристики и возвращает их как значения массива:
function stati stic(aN) {
if (aN = = 0 | | aN == null || aN == "")
return new Array(0,0,0,0)
var S = a N [ 0 ]
var Nmin = aN[0]
var Nmax = aN[0]
for(var i = l; i<=aN.length-1; i++){
S += aN[i]
if (aN[i] < Nmin)
Nmin = aN[i]
if (aN[i] > Nmax)
Nmax = aN[i]
}
return new Array(S, S/aN.length, Nmin, Nmax)
}
В начале кода функции statisticQ мы проверяем, не является ли параметр пустым.
Если это так, то все статистические характеристики считаются равными нулю.
1.7.3. Объект Number (Число)
При разработке веб-страниц математические операции используются не столь
часто, в отличие от строковых. Обычно они связаны с изменением координат эле-
ментов страницы (свойства top, left, width, height таблицы стилей). Однако встре-
чаются и более сложные случаи. Например, может потребоваться вычислить ста-
тистические характеристики данных, содержащихся в некоторой таблице. Так или
иначе, в этих задачах необходимо иметь дело с числами. О числах мы уже говори-
ли в разделе, посвященном типам данных. Теперь рассмотрим их более подробно.
Числа в JavaScript
В JavaScript числа могут быть только двух типов: целые и с плавающей точкой.
Целые числа не имеют дробной части и не содержат разделительной точки. Числа
с плавающей точкой имеют целую и дробную части, разделенные точкой.
1.7. Встроенные объекты.
75
Операции с целыми числами процессор компьютера выполняет значительно бы-
стрее, чем операции с числами, имеющими точку. Это обстоятельство имеет смысл
учитывать, когда расчетов много. Например, индексы, длины строкявляютей це-
лочисленными. Число л, многие числа, полученные с помощью оператора деле-
ния, денежные суммы и т. п. являются числами с плавающей точкой.
В JavaScript можно производить операции с числами различных типов. Это очень
удобно. Однако при этом следует знать, какого числового типа будет результат.
Если результат операции является числом с дробной частью, то он представляет-
ся как число с плавающей точкой. Если результат оказался без дробной части, то
он приводится к целочисленному типу, а не представляется числом, у которого
в дробной части одни нули.
Примеры
2 + 3 // 7 - целое число
2 + 3.6 // 5.6 - число с плавающей точкой
2.4 + 3.6 // 6 - целое число
6.00 // число с плавающей точкой
Числа можно представлять и в так называемой экспоненциальной форме, то есть в
формате: число!ечисло2 или число!Ечисло2. Такая запись числа означает число 110*иа"#*
Пример
2е6 // 1 2 000 000
1.5еЗ // 1500
+1.5еЗ // 1500
-1.5еЗ / -1500
Зе-4 // 0.ппоз
Числа в JavaScript можно представлять в различных системах счисления, то есть
в системах с различными основаниями: 10 (десятеричной), 16 (шестнадцатерич-
ной) и 8 (восьмеричной). К десятеричной форме представления чисел мы при-
выкли, однако следует помнить, что числа в этой форме не должны начинаться с
О, потому что так записываются числа в восьмеричной системе.
Запись числа в шестнадцатеричной форме начинается с префикса Ох (или ОХ), где
первый символ ноль, а не буква О, затем следуют символы шестнадцатеричных
цифр: О, 1, 2,..., 9, а, Ь, с, d, e, f (буквы могут быть в любом регистре). Например,
шестнадцатеричное число Ox4af в десятеричном представлении есть 1199.
Запись числа в восьмеричной форме начинается с нуля, за которым следуют циф-
ры от 0 до 7. Например, 027 (в десятеричном представлении - 23). В арифмети-
ческих выражениях числа могут быть представлены в любой из перечисленных выше
систем счисления, однако результат всегда приводится к десятеричной форме.
Пример
Функция преобразования из десятеричной в шестнадцатеричную форму. Функ-
ция to!6() в этом примере принимает в качестве параметра десятеричное число и
преобразует его в строку, содержащую это же число, но в шестнадцатеричной
форме. При этом мы ограничиваемся числами, не превышающими 255 (в этом случае
для представления числа потребуется не более двух шестнадцатеричных цифр).
function tol6(nlO) {
hchars = "B12345G7B9abcdef" / строка, содержащая все 16-е цифры
if (п!0 > 255) return null
76
Глава 1. Основы JavaScript
var i = n!0%16
var j = (nl0 - i) Д6
rezult = "0x" /
rezult += hchars.charAt(j )
rezult += hchars charAt(i)
return rezult
}
to!6(250) // "0xfa"
to!6(30) // "0xle"
tol6(30)+10 // "0xlel0" - склейка, а не сложение
parselntUoieOB)) + 10 // 40
Напомним, что выражение вида х += у эквивалентно выражению х = х + у.
Функцию to!6() можно также создать и на основе массивов:
function to!6(n!0) {
hchars = new Array ("0", "1 . "2\ "3", "4", "5", "6", "2", "3", "4",
"a" , "b", "c" , "d", "e", "f"}
if (n!0 > 255) return null
var i = n!0%16
var j = (n!0 - i)/16
rezult = "0x"
rezult += hchars [j]
rezult += hchars [i]
return rezult
)
Пример
Функция преобразования из десятеричной в двоичную форму. Функция to2() в
этом примере принимает в качестве параметра десятеричное число и преобразует
его в строку, содержащую это же число, но во двоичной форме. Эта строка состо-
ит из нулей и единиц. Здесь используется рекурсивный вызов функции to2() са-
мой себя. Обратите внимание, что использование ключевого слова var здесь прин-
ципиально важно из-за рекурсии, иначе функция будет работать неправильно.
function to2(n!0) {
if (n!0 <2)
return " " + rlS // чтобы результат был строковым
var i=n!0%2
var j=(nl0-i)/2
return to2(])+ i
}
Для преобразования строк, содержащих числа, в данные числового типа служат
встроенные функции parselntQ и parseFloatQ соответственно для представления
в целочисленном виде и в виде числа с плавающей точкой. Их мы уже рассматри-
вали выше. Здесь следует отметить, что параметрами этих функций могут быть
строки, содержащие числа не только в десятеричной, но и в шестнадцатеричнои,
и в восьмеричной формах. Для указания основания системы счисления служит
второй параметр этих функций.
Примеры
parsemt("ff".16) // значение равно 255
parselntrff") // значение равно NaN
parselnt( 010") // значение равно 8
parselnt (010", 8) // значение равно 8
1.7. Встроенные объекты.
77
pirMlnt"010", 10) // значение равно 10
parselnt("010", 2) // значение равно 2
parselnt("010", 16) // значение равно 17
Заметим, что функция parseFloatQ в IE6.0 работает неправильно, если указан вто-
рой параметр (основание системы счисления).
Для преобразования числа в строку, содержащую это число, достаточно исполь-
зовать выражение сложения пустой строки с числом.
Примеры
" 11 + 25.78 // значение равно "25.78"
"" + 2 . 5еЗ // значение равно "2500"
Создание объекта Number
Числа можно создавать обычным образом с помощью переменных и оператора
присвоения, не прибегая к объекту Number. Однако этот объект обладает некото-
рыми полезными свойствами и методами, которые иногда могут пригодиться.
Объект Number создается с помощью выражения вида:
переменная = new Number(число)
Доступ к свойствам и методам строкового объекта обеспечивается такими выра-
жениями:
число.свойство
Number.свойство
число.методе[параметры])
Number,метод([параметры])
Свойства Number
• MAX_VALUE - константа, значение которой равно наибольшему допустимому
в JavaScript значению числа (1.7976931348623157е+308).
• MNVAUJE - константа, значение которой равно наименьшему допустимому
в JavaScript значению числа (5е-324).
• NEGATIVEJNFINITY - число, меньшее, чем Number.MIN_VALUE.
• POSITIVEJNFINITY - число, большее, чем Number.MAXVALUE.
• NaN - константа, имеющая значение NaN, посредством которой JavaScript со-
общает, что данные (параметр, возвращаемое значение) не являются числами
(Not a Number).
• prototype - свойство (прототип), играющее такую же роль, что и в случае объ-
екта String (см. выше).
Методы Number
Объект Number имеет несколько методов, из которых мы рассмотрим только четыре,
предназначенные для представления чисел в виде строки в том или ином формате.
1. toExponentil(KOflM4ecTBo) - представляет число в экспоненциальной форме.
Синтаксис: числоЛоЕхропепУаЦколичество)
Возвращает строку. Совместимость: IE5.5+, NN6+.
Параметр представляет собой целое число, определяющее, сколько цифр после
точки следует указывать.
78 __________________Глава 1. Основы JavaScript
Примеры
x=new Number(456)
х . toExponential (3) //, 4.560e+ 2
x. toExponenttal (2) // 4.56e+2
x. toExponential(l) // 4.6e+2
x.toExponential(O) // 5e+2
2. 1:оПхес1(количество) - представляет число в форме с фиксированным количе-
ством цифр после точки.
Синтаксис: числоЛоР1хес1(количество)
Возвращает строку. Совместимость: IE5.5+, NN6+.
Параметр представляет собой целое число, определяющее, сколько цифр после
точки следует указывать.
Примеры
x=new Number(25.65)
x.toFixed(3) // 25.650
x.toFixed(2) // 25.65
x.toFlxed(l) //25.7
x.toFlxedO) // 25.7
3. toPredsion(T04HocTb) - представляет число с заданным общим количеством зна-
чащих цифр.
Синтаксис: число.toPrecision(io4HocTb)
Возвращает строку. Совместимость: IE5.5+, NN6+.
Параметр представляет собой целое число, определяющее, сколько всего цифр,
до и после точки, следует указывать.
Примеры
x=new Number(135.45)
x.toPrecision(6) // 135.450
x. toPrecision(5) // 135.45
x.toPrecision(4/ / 135.5
x.toPrecision(3) // 135
x.toPrecision(2) // 1.4e2
x.toPrecision(l) // Ie2
x.toPrec1s1on(B} // Сообщение об ошибке
4. 6 1о51:ппд([основание]) - возвращает строковое представление числа в системе
счисления с указанным основанием.
Синтаксис: число.1:о5Мпд([основание])
Возвращает строку. Если параметр не указан, имеется в виду десятеричная си-
стема счисления. Вы можете указать 2 для двоичной системы или 16 - для шест-
надцатеричной. Заметим, что этот метод имеют все объекты.
Примеры
x=new Number(127.18) // "127.18"
x.toString(10) // "127.18"
x.toString 16 II "7f.2el47ael47b"
x.toString(S) //" 177.134121727024366"
*=ne, Number(5)
x.toString(2) II "101"
1.7. Встроенные объекты.
79
1.7.4. Объект Math (Математика)
Объект Math предназначен для хранения некоторых математических констант
(например, число я) и выполнения преобразований чисел с помощью типичных
математических функций. Доступ к свойствам и методам объекта Math обеспечи-
вается следующими выражениями:
Math.свойство
Math .метод(параметры)
Свойства Math
Свойства объекта Math имеют в качестве своих значений математические константы.
F Постоянная Эйлера
LN10 Значение натурального логарифма числа 10
LN2 Значение натурального логарифма числа 2
LOG10E Значение десятичного логарифма экспоненты (числа в)
LOG2E Значение двоичного логарифма экспоненты
PI Значение постоянной я
SQRT1.2 Значение квадратного корня ю-1/2
SORT Значение квадратного корня из 2
Пример
Для вычисления длины окружности при известном радиусе требуется число п,
которое можно взять как свойство объекта Math.
var R = 10 // радиус окружности
circus = 2*R*Math. PI // длина окружности
Методы Math
• аЬз(число) - возвращает модуль (абсолютное значение) числа;
• асо$(число) - возвращает арккосинус числа;
• а51п(число) - возвращает арксинус числа;
• atan(4HOio) - возвращает арктангенс числа;
• atan2(x, у) - возвращает угол в полярных координатах точки;
• cei(.(число) - округляет число вверх до ближайшего целого;
• со$(число) - возвращает косинус числа;
• ехр(число) - возвращает число е в степени число;
• поог(число) - округляет число вниз до ближайшего целого;
• 1од(число) - возвращает натуральный логарифм числа;
• тах(число1,число2) - возвращает большее из чиселчисло!, число2;
• 1тпп(число1,число2) - возвращает меньшее из чиселчисло!, число2;
• ро\л/(число!,число2) - возвращаетч исло! в степени число2;
• random() - возвращает случайное число между 0 и 1;
• гоипс!(число) - округляет число до ближайшего целого;
• sin(число) - возвращает синус числа;
• sqrt(4Mcno) - возвращает квадратный корень из числа;
• 1ап(число) - возвращает тангенс числа.
80.
.Глава 1. Основы JavaScript
Примеры
1. Метод randomQ возвращает случайное число, лежащее в интервале от 0 до 1.
Чтобы получить случайное число в пределах от 0 до Nmax, следует написать
следующее выражение:
х = Nmax'Math . randomf)
Если требуется получить случайное число в интервале от Nmin до Nmax, то из
элементарного отношения пропорций получаем следующее выражение:
х = Nmin + (Nmax - Nmi n) *Math. randomO
Можно также создать функцию для вычисления случайного числа в заданном
интервале:
function rand(a, b) {
return a+ (b-a) *Math . random()
}
Эта функция может потребоваться, например, для внесения некоторой непред-
сказуемости (нерегулярности) перемещения элементов на веб-странице, выбо-
ра цветов для мигающей надписи и т. п.
2. Для вычисления значения тригонометрической функции sin(x), у которой ар-
гумент х выражен в градусах, следует применить следующее выражение:
Math.sin(Math.PI*x/180)
Функции для решения некоторых математическихзадач
Язык JavaScript можно использовать не только для управления веб-страницами,
но и для решения разного рода расчетных и математических задач. С другой сто-
роны, составление или анализ соответствующих программ является хорошим уп-
ражнением в программировании. Поэтому предлагаю вам рассмотреть несколько
несложных, но полезных программ расчетного характера.
Решение квадратного уравнения
С этой задачей мы знакомы еще со школы. Напомню, в чем она заключается. Тре-
буется найти два числаxl их2 -.такие, чтобы при подстановке любого из них в
выражение ах2 + Ьх + с результат его вычисления был бы равен 0. Такие х{ и х2
называются корнями уравнения ах2 + Ьх + с = 0.
На первый взгляд может показаться, что для решения этой задачи следует просто
вспомнить или найти в справочнике подходящую формулу. И действительно, это
сделать нетрудно. Однако в программах для решения задач такого рода часто зна-
чительную долю кода занимают различные проверки и анализ исходных данных.
Организация же вычислений по конечным формулам из справочника - не самое
сложное. Так, в рассматриваемой задаче в зависимости от значений коэффициен-
тов а, А и с возможны различные частные случаи. Корни могут быть комплексны-
ми и действительными. Допустим, нас интересуют только действительные корни.
Тогда корней может и не быть совсем, или быть только один, или два, одинаковые
или различные. Таким образом, прежде чем мы дойдем до применения формулы,
придется проанализировать, с каким именно случаем имеем дело.
Очевидно, функция (назовем ее beqQ) для вычисления действительных корней
квадратного уравнения должна принимать три параметра - коэффициенты a, b
и с. Возвращаемым значением будет массив. Сделаем так, что если корней нет, то
1.7. Встроенные объекты.
81
этот массив будет пустым. В противном случае в нем будет два элемента. Если
уравнение имеет два корня, то запишем их в качестве элементов возвращаемого
массива. Если корень единственный, то он будет записан в первом элементе мас-
сива, а второй элемент будет пустым (null).
Ниже приводится один из возможных вариантов определения функции:
function beq(a, b, с){ // решение квадратного уравнения
var aret = newArrayO
var D = b*b - 4*a*c
if (a == 0) {
if (!(b == 0)){
aret[0] = -c/b
aret [l] = null
return aret // единственный корень или нет корней
}
if (D == 0) { // одинаковые корни
aret[0]=-b/2/a
aret[l]=aret[0]
if (D>0){ // различные корни
aret[0] = (-b - Math.sqrt(D))/2/a
aret[l] = (-b + Math.sqrt(D))/2/a
return aret
}
Выполним проверку работы функции на нескольких наборах исходных данных:
beq(0, 2, 6) // массив (-3, null)
beq(l, -2, 1) // массив (1, 1)
beq(3, 4, -2.5) /* массив (-1.797054997187545,
0.4637216638542114) V
beq(2, 0. 5) // пустой массив
Вычисление интеграла
Интеграл от некоторого выражения / (х) с одной переменной х на интервале ее
значений от а до b можно понимать как площадь, ограниченную кривой у, =f (x),
осью абсцисс (х) и двумя прямыми, параллельными оси ординат {у) и проходя-
щими через точки а и b на оси (х). Аналогия с площадью справедлива лишь отча-
сти. Если указать, что площадь кривой, проходящей ниже оси абсцисс, является
отрицательной, тогда все в порядке.
Итак, для вычисления интеграла от выражения требуется вычислить площадь
некоторой замысловатой фигуры. Алгоритм решения этой задачи основан на про-
стой идее разбить сложную фигуру на множество простых, площадь которых лег-
ко вычислить, а затем взять сумму этих площадей. Здесь возникает вопрос о точ-
ности такого решения. Однако легко заметить, что чем меньше элементарные
фигуры и чем больше их количество, тем ближе сумма их площадей к действи-
тельной площади исходной фигуры. Это так называемая задача приближения или
аппроксимации.
В качестве элементарной фигуры можно взять прямоугольник или трапецию. Их
площади легко вычисляются. Однако трапеция вписывается в кривую лучше, чем
прямоугольник, поэтому выберем именно ее. Напомню: чтобы найти площадь тра-
пеции, необходимо умножить полусумму ее параллельных сторон на высоту. Для
82.
Глава 1. Основы JavaScript
получения множества таких трапеций требуется разбить отрезок аЪ оси абсцисс
на большое количество элементарных отрезков. В математике все идеально: отре-
зок ab разбивается на элементарные отрезки, длина которых стремится к нулю,
то есть является бесконечно малой величиной. На практике мы имеем дело с ко-
нечными величинами. Более того, мы должны учесть, что с уменьшением длины
элементарных отрезков и ростом их количества возрастает время вычислений.
Таким образом, нам потребуется найти компромисс между точностью решения
задачи и временными затратами.
Теперь займемся технической стороной вопроса. Что следует передавать нашей
функции вычисления в качестве параметров? Я вспомнил о великолепной встро-
енной функции eval(), которая может вычислять выражения JavaScript, передан-
ные ей в виде строки. Поэтому функция integralQ для вычисления интеграла бу-
дет принимать строку, содержащую выражение вида f(x), в котором переменная
будет обозначена строчной латинской буквой х, например "5*х*х + 10". Два дру-
гих параметра - числа а и Ь, соответствующие концам интервала интегрирова-
ния. Ниже приведено определение функции integralQ:
function integral(expression, a, b) { // интеграл
var x, yl, y2 , n, length, dx, 5 = 0
length = Math.abs(b - a)
n = 100 // количество элементарных отрезков
dx = length/n // длина элементарного отрезка
х = а /* начальное значение переменной х
в выражении */
yl = eval(expression)
х = a + dx
у2 = eval(expression)
S = (yl + y2)'dx/2
for(i = 2; i< = n;'+ + ){
yl = У2
x = x + dx
y2 = eval(expression)
S+= (yl + y2)-dx/2
return S
)
Проверим, как работает эта функция:
integral("x", 0, 1) }* 8.5030000600000662
(точное значение = 0.5) */
integral("x*x" , 0, 1) /* 0.33335000000000037
(точное значение = 0.3333...) */
integral("x*x" , 0, 10) /* 333.34999999999917
(точное значение = - В333.3333...) */
Если точность вычислений нас не устраивает, то это обусловлено малым значе-
нием n количества отрезков разбиения интервала ab. При большой длине этого
интервала n = 100 будет явно недостаточно. Конечно, можно передавать это значе-
ние функции в качестве четвертого параметра. Однако я поступил иначе: если
длина интервала интегрирования больше 2, то n вычисляется по некоторой фор-
муле, а иначе n равно 100. Кроме того, я добавил проверки крайних случаев, что-
бы при них не возникало ошибок. В итоге получился следующий код:
function integral(expression, a, b){ // интеграл
if ((expression | | !b&&!a)
1.7. Встроенные объекты_________________________________________________________83
return 0
if (a = b)
return 0
var x, yl, y2, n, length, dx,S=0
length = Math.abs(b - a)
yl = Math.min(a .b) // если левый предел больше правого
b = Math.max(a, b) // если правый предел меньше левого
а = yl
п = 100
if (length>2) n=Math.round(100*Math.log(length+l))
dx = length/n // длина элементарного отрезка
x = a /* начальное значение переменной х
в выражении */
yl = eval(expression)
х = а + dx
у2 = eval(expression)
S = (yl + y2)*dx/2
for(i = 2; i<=n;i++){
у/ = y2
x = x + dx
y2 = eval(expression)
S+= (yl + y2)*dx/2
return S
}
Выполним проверку:
integral("x*x", 0, 10) /» 333.33749999999906
(точное значение = 333.3333...) */
Заметьте, что в данном случае точность после наших коррекций увеличилась на
порядок.
Вычисление производной
Производная от выражения (функции) / (х) с одной переменной х в некоторой
точке а интерпретируется как скорость изменения значения этого выражения при
значении х, равном а. Например, если выражение / (х) описывает зависимость
пройденного пути от времени, то производная от/(х)в момент времени t равна
скорости движения в этот момент.
Алгоритм решения этой задачи следующий: необходимо вычислить значения вы-
ражения в двух тестовых точках, расположенных рядом с заданной, а затем взять
разность этих значений и разделить ее на расстояние между тестовыми точками.
Чем ближе расположены тестовые точки к заданной, тем точнее получается ре-
зультат. Мы выберем их так, чтобы заданная точка находилась посередине между
тестовыми точками.
Как и вычисление интеграла, вычисление производной будет базироваться на
встроенной функции evalQ, возвращающей значение выражения, переданное ей
в виде строки как параметр. Функция DydxlQ для вычисления производной при-
нимает строку, содержащую выражение, в котором переменная обозначена строч-
ной латинской буквой х, например "25*х - 2". Второй параметр указывает точку,
в которой следует вычислить значение производной. Вот вариант кода
function Dydx(expression , а) { // производная
if (( expression) // если нет выражения
84______________________________________________________Глава 1. Основы JavaScript
return 0
var x, у, dx
dx = 0.000025
у = expression)
x re = urn + (eval(expression) - y ) / 2 / d x ) // 2-я тестовая точка
}
Проверочные примеры:
DydxCxM) // 0.9999999999998899 (точное значение равно 1)
Dydx("x*x", 1) // 1.9999999999997797 (точное значение равно 2)
Поиск экстремума
Экстремум выражения (функции)f(x) - это пара чисел (х0, г/), таких, что при
подстановке^ в выражение/(л:) вместо переменнойхзначение этого выражения
будет равно своему максимальному или минимальному значению уй Вообще го-
воря, функция может иметь несколько экстремумов или не иметь их вообще. Мы
напишем код функции extremumQ, которая вычисляет экстремум выражения,
если он действительно у него есть (график этого выражения имеет «холм» или
«впадину»).
Алгоритм решения задачи основан на том, что значение производной выражения
в точке экстремума, или перегиба, равно 0.
Как и в случае вычисления интеграла и производной, при поиске экстремума бу-
дет использоваться встроенная функции eval(), возвращающая значение выра-
жения, переданного ей в виде строки как параметр. Функция extremumQ для
поиска экстемума принимает строку, содержащую выражение, в котором пе-
ременная обозначена строчной латинской буквой х, например "5*х*х - 2*х".
Второй и третий параметры указывают границы интервала, в котором следует
искать х. Последний, четвертый параметр задает точность поиска. Вот вари-
ант кода:
function extremum(expression, a, b, d) { // экстремум
if (!d) d = 0.001
var x, yl, y2 , i
x = a
yl = Dydx(expression, a)
i = 1
while ((x ■<= b)&&(i <= 1000)) {
y2 = Dydx(expression, x+d)
if ((yl<0)&&(y2>=0)||(y2<0)&&(yl>=0)) {
x=x+d*Math.abs(yl)/(Math.abs(yl)+Math.abs(y2))
return new Array(x, eval(expression))
)
x+= d
yi = П
T++
)
return new ArrayO
)
Проверочный пример:
extremum("x*x-l",-l, 1, 0.01) /* (7.528699885739343e-16, -1)
точное значение равно (0, -1) */
1.7. Встроенные объекты
85
ВНИМАНИЕ
Если график выражения имеет несколько «холмов» или «впадин», то функция определит
лишь один из них, ближайший к точке а.
1.7.5. Объект Date (Дата)
Во многих приложениях приходится отображать дату и время, подсчитывать ко-
личество дней, оставшихся до заданной даты, и т. п. Некоторые программы даже
управляются посредством значений дат и времени. В основе всех операций, свя-
занных с датами и временем, лежат текущие системные дата и время, установлен-
ные на вашем компьютере.
Со временем дела обстоят не так просто, как кажется на первый взгляд. Вспомни-
те, что существуют временные зоны (часовые пояса), а также сезонные поправки
времени. Так, например, текущее время в Санкт-Петербурге отличается от време-
ни в Иркутске на 5 часов. Если в Иркутске уже полночь, то в Петербурге еще
только 19 часов. Чтобы иметь возможность координировать деятельность во вре-
мени организаций и физических лиц в различных точках нашей планеты, была
введена система отсчета времени. Она связана с меридианом, проходящим через
астрономическую обсерваторию в городе Гринвич в Великобритании. Эту вре-
менную зону называют средним временем по Гринвичу (Greenwich Mean Time -
GMT). Недавно кроме аббревиатуры GMT стали использовать еще одну - UTC
(Universal Time Coordinated - Всеобщее Скоординированное Время).
Если системные часы вашего компьютера установлены правильно, то отсчет вре-
мени производится в системе GMT. Однако на Панели управления обычно уста-
навливается локальное время, соответствующее вашему часовому поясу. При со-
здании и изменении файлов на вашем компьютере фиксируется именно локальное
время. Вместе с тем операционная система знает разницу между локальным вре-
менем и GMT. При перемещении компьютера из одного часового пояса в другой
необходимо изменить установки именно часового пояса, а не текущего системно-
го времени (показания системных часов). Даты и время, генерируемые в сцена-
риях, сохраняются в памяти в системе GMT, но пользователю выводятся, как пра-
вило, в локальном виде.
В программе на JavaScript нельзя просто написать 30.10.2002, чтобы получить
значение даты, с которым в дальнейшем можно производить некие операции. Зна-
чения даты и времени создаются как экземпляры специального объекта Date. При
этом объект сам будет «знать», что не бывает 31 июня и 30 февраля, а в високос-
ных годах 366 дней.
Создание объекта даты
Объект даты создается с помощью выражения вида:
имяОбъектаДаты = new Date([параметры])
Параметры не обязательны, на что указывают квадратные скобки. Обратите вни-
мание,чтоимяОбъектаДатыявляетсяобъектомдаты,анезначениемкакого-нибудь
другого типа (например, строкой или числом).
86.
.Глава 1. Основы JavaScript
Для манипуляций с объектом даты применяется множество методов объекта Date.
При этом используется такой синтаксис:
переменная = имяОбъектаДаты.методО
Если, например, объекту даты требуется присвоить новое значение, то для этого
используется соответствующий метод:
переменная = имяОбъектаДаты.метод(новое_значение)
Рассмотрим в качестве примера изменение значения года текущей системной даты:
xdate = new DateQ /* создание объекта, содержащего
текущую дату и время */
Year = xdate.getYear()() /* в переменной Year содержится
значение текущего года */
Year = Year +3 /* в переменной Year содержится
значение,большее, чем текущий год, на 3 */
xdate. set Yea r (Year) /* в объекте устанавливается
новое значение года */
При создании объекта даты с помощью выражения new DateQ, можно указать
в качестве параметров, какие дату и время следует установить в этом объекте. Это
можно сделать пятью способами:
new Datef Месяц дд, гггг чч:мм:сс")
n e w Оаг.е("Месяц дд, гггг")
new Date(rr, мм, дд, чч, мм, ее)
newDate(rr, мм,дд)
new Оат.е(миллисекунды)
В первых двух способах параметры задаются в виде строки, в которой указаны
компоненты даты и времени. Буквенные обозначения определяют шаблон пара-
метров. Обратите внимание на разделители - запятые и двоеточия. Время ука-
зывать не обязательно. Если компоненты времени опущены, то устанавливается
значение 0 (полночь). Компоненты даты обязательно должны быть указаны. Ме-
сяц указывается в виде полного его английского названия (аббревиатуры не до-
пускаются). Остальные компоненты указываются в виде чисел. Если число мень-
ше 10, то можно писать одну цифру, не записывая ведущий 0 (например. 3:05:32).
В третьем и четвертом способах компоненты даты и времени представляются це-
лыми числами, разделенными запятыми.
В последнем способе дата и время задаются целым числом, которое представляет
количество миллисекунд, прошедших с начала 1 января 1970 года (то есть с мо-
мента 00:00:00). Количество миллисекунд, отсчитанное от указанной стартовой
даты, позволяет вычислить все компоненты и даты, и времени.
Методы объекта Date
Для чтения и изменения информации о дате и времени, хранящейся в объекте
даты, служат методы объекта Date (табл. 1.3). Напомним, что объект даты создает-
ся с помощью выражения:
имяОбъектаДаты = new Date([параметры])
Затем, чтобы применить метод метод() к объекту даты имяОбъектаДаты, следует
написать: имяОбъектаДаты.метод([параметры]).
1.7. Встроенные объекты
87
Довольно большое множество всех методов можно разделить на две категории:
методы получения значений (их названия имеют префикс get) и методы установ-
ки новых значений (их названия имеют префикс set). В каждой категории выде-
ляются две группы методов - для локального формата и формата UTC. Методы
позволяют работать с отдельными компонентами даты и времени (годом, меся-
цем, числом, днем недели, часами, минутами, секундами и миллисекундами).
Таблица 1.3. Методы объекта Date
Метод
Диапазон значений
Описание
getFuUYear()
1970-
getYear()
70-...
getMonth()
0-11
getDate()
1-31
getDay()
0-6
getHours(
0-23
getMinutes()
0-59
getSeconds()
0-59
getTime()
0-...
getMHliseconds()
0-...
getUTCFuLlYear()
1970-.
getUTCMonth()
0-11
getUTCOate()
1-31
getUTCDay()
0-6
getUTCHours()
0-23
getUTCMinutes()
0-59
getUTCSecondsQ
0-59
getUTCMilliseconds()
0-....
setYear(3H34)
1970-...
SetFuUYear(3H34)
1970-...
setMonth(3Ha4)
0-11
setDate(3H34)
131
setDay(3H34)
0-6
setHours(3H34)
0-23
setMinutes(3H34)
0-59
setSeconds(3H34)
0-59
setMiLliseconds(3Ha4)
0-...
setTime(3H34)
0-...
setUTCFuLLYear(3H34)
1970-...
Год
Год
Месяц (январь = 0)
Число
День недели (воскресенье = 0)
Часы в 24-часовом формате
Минуты
Секунды
Миллисекунды с 1.1.70 00:00:00 GMT
Миллисекунды с 1.1.70 00:00:00 GMT
Год UTC
Месяц U T C (январь = 0)
Число UTC
День недели U T C (воскресенье = 0)
Часы U T C в 24-часовом формате
Минуты UTC
Секунды U T C
Миллисекунды UTC с 1.1.70 00:00:00 GMT
Установка года (четырехзначного)
Установка года
Установка месяца (январь = 0)
Установка числа
Установка дня недели (воскресенье = 0)
Установка часов в 24-часовом формате
Установка минут
Установка секунд
Установка миллисекунд с 1.1.70 00:00:00 GMT
Установка миллисекунд с 1.1.70 00:00:00 GMT
Установка года U T C л
'—
— —- проиолжепие ту
88
Глава 1. Основы JavaScript
Таблица 1.3 (продолжение)
Метод
Диапазон значений Описание
setUTCMonth(3H34) 0-11
setUTCD3te(3H34) 1-31
setUTCDay(3H34) 0-6
setUTCHours(3Ha4) 0-23
setUTCMinutes(3H34) 0-59
setUTCSeconds(3Ha4) 0-59
setUTCMilliseconds(3H34) 0-...
getTimezoneOffset ()
toDateString()
toGMTString()
toLoc3leDateString()
toLocaleString()
toLocaleTimeString()
toString()
toTimeString()
toUTCString()
D3te.parse("dateString")
Date.UTC(3H34)
0-...
Установка месяца UTC (январь = 0)
Установка числа UTC
Установка дня недели UTC (воскресенье = 0 )
Установка часов UTC в 24-часовом формате
установка минут UTC
Установка секунд UTC
Установка миллисекунд UTC с 1.1.70 00:00:00
GMT
Разница в минутах по отношению к GMT/UTC
Строка с датой (без времени) в формате
браузера (IE5.5)
Строка с датой и временем в глобальном
формате
Строка с датой без времени в локализован-
ном формате системы (NN6, IE5.5)
Строка с датой и временем в локализованном
формате системы
Строка с временем без даты и в локализован-
ном формате системы (NN6, IE5.5)
Строка с датой и временем в формате
браузера
Строка с временем без даты в формате
браузера (IE5.5)
Строка с датой и временем в глобальном
формате
Преобразование строки с датой в число
миллисекунд
Преобразование строки с датой GMT в число
Вычислять разность двух дат или создавать счетчик времени, оставшегося до не-
которого заданного срока, можно с помощью методов как для локального форма-
та, так и для UTC. Не следует применять выражения, использующие различные
форматы времени, поскольку результаты могут оказаться неправильными. Фор-
мат UTC обычно применяется в расчетах, учитывающих часовой пояс.
Следует также учитывать, что нумерация месяцев, дней недели, часов, минут и се-
кунд начинается с 0. Для компонентов времени это естественно. Однако при та-
кой нумерации декабрь оказывается 11-м месяцем в году, а не 12-м, как это при-
нято повсеместно. Воскресенье (Sunday) является 0-м днем недели, а не 7-м.
Значение года XX века представляется в двузначном формате как разность меж-
ду этим годом и 1900. Например, 1998 год представляется как 98. Годы до 1900
и после 1999 обозначаются в четырехзначном формате. Например, 2002 год нуж-
1.7. Встроенные объекты.
89
нотаки писать -2002, поскольку02 - это 1902 год. МетодgetFullYear() возвраща-
ет четырехзначное значение года.
Примеры
Допустим, что сейчас 2003 год.
today = new Date() // текущие дата и время
Year = today .getYearO // 2003
today = new Date (98,11,6) /* объект даты today содержит информацию
о дате 6 ноября 1998 года, 00:00:00 */
Year = today.getYearO // 98
today.getFullYearO // 1998
Изменение любого компонентадаты производится с помощью 'соответствующего
метода, название которого начинается с приставки set При этом значения других
компонентов пересчитываются автоматически.
В следующем примере мы создаем объект даты, содержащий некоторую конкрет-
ную дату. Затем мы устанавливаем новое значение года. При этом в объекте даты
изменяется и число.
mydate = new Date(1952, 10,6) // "Thu Nov 6 00:00:00 UTC+0300 1952"
myday = mydate. getDayO // 6
mydate. setY«r<2ee3) // установка 2003 года
myday = mydate .getDayO // 4
При попытке отобразить значение объекта даты оно автоматически преобразует-
ся в строку методом toString(). Формат этой строки зависит от операционной сис-
темы и браузера. Например, для Windows 98 и Internet Explorer 5.5 строка, содер-
жащая информацию объекта даты, имеет следующий вид:
Thu Oct 31 13:16:23 UTC+0300 2002,
то есть четверг, октябрь, 31, 13 часов 16 минут 23 секунды всеобщего времени,
скорректированного на 3 часа, 2002 год.
Если коррекцию времени с учетом часового пояса производить не требуется, то
для строкового представления даты и времени можно воспользоваться методом
toLocaleString():
mydate = new DateO
mydate.toLocaleStringO // "31 октября 2002 г. 14:15:30"
В браузерах 1Е5.5+ И NN 6 + работают еще два метода представления отдельно даты
и времени в виде строки:
mydate = new DateO
mydate. toLocaleDateStringO // "31 октября 2002 г."
mydate.toLocaleTimeStringO // "14:15:30"
Заметим, что формат представления даты и времени, обеспечиваемый методами
toLocalDateStringO и toLocalTimeStringQ, зависит от настроек операционной систе-
мы и браузера. Если вы будете использовать эти методы для вывода даты и време-
ни на веб-страницу, то они будут выглядеть так, как пользователь привык их ви-
деть на своем компьютере.
С датой иногда приходится выполнять различные вычисления, такие как опреде-
ление даты через заданное количество дней от текущей или количество дней между
двумя датами. Вот здесь как раз и требуется предварительный подсчет миллисе-
кунд, содержащихся в минуте, часе, сутках и т. д.
90.
.Глава 1. Основы JavaScript
Примеры
■I Определим дату, которая наступит через неделю относительно текущей:
week = 1000*60*60*24*7 /* количество миллисекунд
в неделе - 604800000 */
mydate = new Date() // объект даты с текущей датой
mydate_ms = mydate.getTimeQ /* текущая дата, представленная
количеством миллисекунд
от 1.01.1970 00:00:00 */
mydate_ms += week // maydate_ms = mydate_ms + week
mydate. setTimeimydate is) /* установка новой даты
в объекте mydate */
newdate = mydate. toLocaleStringOj // новая дата в виде строки
2. Определим количество дней между двумя датами, например 10 февраля 2003
и 5 марта 2003. Для этого создадим сначала два соответствующих объекта даты:
datel = new, Date(2003 ,01,10)
date2 = new Date(2003,02,5)
Переменные datel и dateZ содержат длинные строки, содержащие даты (напри-
мер, Гон Feb 10 00:00:00 UTC+0300 2003). Чтобы перевести их в количество мил-
лисекунд, воспользуемся методом parse() объекта Date. Затем вычислим разность
Date.parse(date2) и Date.parse(datel) и разделим ее на количество миллисекунд
в одних сутках:
days = (Date.parse(date2) - Date.parse(datel))/1000/60/60/24
// результат: 23
3. Часто приходится иметь дело с датами, представленными в виде строк в фор-
мате "дд.мм.гггг", причем месяцы нумеруются с 1 до 12, а не с 0 до 11. В этом
случае, чтобы воспользоваться методами объекта Date, необходимо предвари-
тельно выполнить соответствующие преобразования.
Допустим, исходная дата strdate представляется в виде строки в формате
"дд.мм.гггг", а для создания объекта даты используется формат параметров
"Г, мм, дд" Тогда необходимые преобразования исходных данных выглядят сле-
дующим образом:
astrdate = strdate. spli t (".") /* массив подстрок, полученных
из строки strdate с использованием
точки как разделителя */
/* создаем объект даты */
mydate = new Date(astrdate[2] , astrdate [ 1 ]-1 , astrdate[0])
4. Развивая идею, рассмотренную в предыдущем примере, мы могли бы создать
функцию, принимающую в качестве параметра строку, содержащую дату
и время в привычном для нас формате "дд.мм.ггг чч:мм:сс" и возвращающую
объект даты. Будем считать, что в строке параметра нашей функции дата отде-
лена от времени одним пробелом, однако допускается, что информации о вре-
мени вообще может не быть. Далее, если время присутствует, секунды не обя-
зательно должны указываться. Если параметр является пустой строкой или
вообще отсутствует, то функция возвращает объект с текущей датой.
function mydate(strdate){
if (strdate == ""|| strdate == null) {
return new Date()
}
var astrdate = strdate.split(" ')
1 ..7. Встроенные объекты.
.91
if (astrdate. length == 1)
astrdate[l] = "00:00:00"
astrdate[0] = astrdate[0].split(".")
astrdatefl] = astrdate[l].split(":")
if (astrdate[l] .length == 1)
astrdate[l] = new Array (astrdate [1] [0] , "00", "00")
else {
if (astrdate[l] .length == 2)
astrdatefl] = new Array (astrdate [l] [0] , astrdate [1] [1] , "00")
}
return new Date(astrdate[0][2] , astrdate[0] [1] -1, astrdate[0] [2] ,
astrdate[l][0] . astrdate [1] [1] , astrdate[1] [2])
}
Заметим, что в действующем коде выражение с последним оператором return не-
обходимо написать в одну строку.
С использованием функции mydateQ количество дней между двумя заданными
датами можно вычислить следующим образом:
datel = mydate("10.2.2003")
date2 = mydate("5 . 3 . 2003")
days = (Date.parse(date2) - Date.parse(datel))/1000/60/60/24
Иногда в приложениях, в том числе и на веб-страницах, устанавливают часы (тай-
мер), показания которых постоянно изменяются в соответствии с ходом систем-
ных часов. Чтобы сделать это, требуется в цикле создавать объект даты и форми-
ровать строку из компонент времени, используя подходящие для этого методы.
Однако при этом программа, в которой имеется код, выполняющий роль часов,
будет заниматься только этими часами (зациклится). Чтобы этого не произошло,
используют метод setlntervalQ из объектной модели браузера. Позднее мы рас-
смотрим задачу создания часов подробно.
1.7.6. Объект Boolean (Логический)
Объект Boolean создается с помощью выражения вида:
переменная = new Воо1еап(логическое_значение)
Он имеет свойство prototype, методы toStringQ и значение Of (), которые имеют также
объекты String и Number.
Смысл свойства prototype мы уже рассматривали применительно к объектам String
и Array Объект Boolean может понадобиться в том случае, когда всем логическим
объектам, создаваемым с помощью выражения с ключевыми словами new Boolean,
нужно добавить новые свойства или методы с помощью прототипа (свойства
prototype).
1.7.7. Объект Function (Функция)
Создание объекта Function
Выше мы уже рассматривали стандартный способ определения функции:
function имя_функции(параметры) {
код
}
92
Глава 1. Основы JavaScript
Существует и другой способ, основанный на выражении с ключевыми словами
new Function. Согласно этому способу функция создается как экземпляр объекта
Function:
имя_функции = new F u n cti o n ( [" n a p l", [."napN"]. "оператор!; [;
onepaTopN]")
Названия всех параметров являются строковыми значениями. Они разделяются
запятыми. Заключительная строка содержит операторы кода тела функции, раз-
деленные точкой с запятой.
Вызов функции, определенной как экземпляр объекта Function, можно выполнить
обычным способом: имя_функции(параметры).
Примеры
Srectangle = new Function("width", "height", "var s = width'height;
return s")
Srectangle(2, 3) // возвращает 6
var expr = "var s = widthheight; return s"
Srectangle = new Function("width", "height", expr)
Srectangle (2 , 3) // возвращает 6
a = "width"
b = "height"
expr = "var s = width*height; return s"
Srectangle = new Function(a, b, expr)
Srectangle(2, 3) // возвращает б
При любом задании функции, стандартном или с помощью ключевого слова new,
автоматически создается экземпляр объекта Function, который обладает своими
свойствами и методами.
Свойства Function
1. arguments - массив значений параметров, переданных функции.
Индексация элементов массива производится с 0. Поскольку это массив, он
имеет свойства и методы объекта Array (в частности, свойство length - длина
массива).
Свойство arguments применяется в теле определения функции, когда требуется
проанализировать параметры, переданные ей при вызове. Например, можно
узнать, сколько в действительности было передано параметров, не являются ли
их значения пустыми ("", 0, null) и т. п. Это свойство особенно полезно при раз-
работке универсальных библиотечных функций.
Синтаксис выражения следующий: имя_функции.arguments.
Пример
Функция, приводимая в этом примере, возвращает строку, содержащую значе-
ния параметров и их общее количество, которые были указаны в вызове функ-
ции (а не в ее определении!).
function myfunc(a, b,c){
var arglenth=myfunc.arguments.length /* количество переданных
параметров */
var x=""
for (i=0; i< myfunc.arguments.length;i++) {
.1.7. Встроенные объекты _ 93
х += myfunc.arguments [i] + ","
}
return x+"Bcero: "+ myfunc.arguments.length
)
myfunc(5, "Вася") // "5, Вася, Всего: 2"
myfuncO // "Всего: 0"
myfunc(null,"" ,0,25) // "null , ,0,25 , всего: 4"
2. Length - количество параметров, указанных в определении функции.
Синтаксис: имя_функции. length
В отличие от свойства arguments, количество параметров функции можно опре-
делить в программе за пределами тела этой функции.
Пример
function myfunc(a, b, с, d){
return myfunc.arguments.length
.)
myfunc(a.b) // 2
myfunc. length // 4
3. caller - содержит ссылку на функцию, из которой была вызвана данная функ-
ция; если функция не вызывалась из другой функции, то значение этого свой-
ства равно null.
Совместимость: IE4+, NN4.
Синтаксис: имя_функции. caller
В свойстве имя_функции.caller содержится все определение функции, из кото-
рой была вызвана функция имя_функции.
Пример
function fl() {
f2()
}
function f2()
alert (f2 . caller) // диалоговое окно со значением f2.caller
}
f К)
Вызов функции fl() приведет к вызову функции f2(), которая выведет на экран
окно с сообщением, содержащим код определения функции fl() (рис. 1.12).
Рис. 1.12. Результат выполнения функции fl() - окно со значением f2.caller
Методы Function
toString() - возвращает определение функции в виде строки.
Синтаксис: имя_функции.1о5Ыпд()
94________________________________________________Глава 1. Основы JavaScript
Иногда этот метод используют в процессе отладки программ с помощью диалого-
вых окон.
Пример
function myfunc(a, b) {
return a*b/2
I
alert (myfunc. toStringO)
Результат выполнения последнего выражения показан на рис. 1.13.
ШВШЕЁЭг::,:- ■•шшщ
',, junction rnyfuneisj ЬК -\
'■„-__> гвЬхпл^Ь/2
. ., >
т ]
Рис. 1.13. Результат выполнения alert(myfunc.toString())
apply( [текущий объект [, массив параметров]])
cal l ( [текущий_объект [ ,napl [, пар2 [ . . napN] ] ] ])
Оба метода используются для вызова функции и дают одинаковые результаты.
Отличаются они лишь формой представления параметров. Как известно, функ-
цию можно вызвать просто по имени, за которым следует список параметров
в круглых скобках. Особенностью этих методов является то, что с их помощью
можно вызвать функцию по ссылке на нее. При первом чтении мы рекомендуем
сначала ознакомиться с разделом 1.8, а. затем вернуться к данной теме, если в этом
возникнет необходимость.
Первый параметр обоих методов - ссылка на объект, являющийся текущим для
данной функции. Ссылка на объект используется, когда вызываемая функция
определена как метод пользовательского объекта. Более подробно эта тема об-
суждается ниже, в разделе 1.8.
Пример
/* Функция-конструктор объекта саг (автомобиль)*/
function car(name, model, color) {
this.name = name // название
this.model = model // модель
his.color = color // цвет
this.show = showcar // метод
}
/* Функция, вызываемая как метод объекта car */
function showcar(){
alert(this.name + " " + this.model) // окно с сообщением
:i
/* Создание экземпляра объекта car */
• mycar = new car("Жигули", "BA32105","white")
Обычный способ применения метода show к объекту car (вывод окна с сообщени-
ем) выглядит так:
mycar.show()
1.7. Встроенные объекты.
95
При этом в действительности вызывается функция showcarQ, заданная для этого
метода. Текущий объект саг рассматривается как контекст для ссылок this, ука-
занных в теле функции.
Однако методы apply() и callQ позволяют не связывать функцию showcarQ с объек-
том mycar. Более того, в конструкторе объекта сагможно не указывать выражение,
определяющее функцию showcar в качестве метода объекта. Вместо этого можно
вызвать метод showcar как объект и применить к нему метод callQ, указав в каче-
стве параметра mycar как текущий объект:
showcar.call(mycar)
С помощью метода catlQ можно передавать параметры, отделенные друг от друга
запятыми. Если параметры определены как элементы массива, то вместо саЩ)
используется метод applyQ.
1.7.8. Объект Object
Object является корневым объектом, на котором базируются все остальные объек-
ты JavaScript, такие как String, Array, Date и т. д. В программах можно создавать
свои собственные объекты. Это можно сделать различными способами.
Способ 1
• function имя_конструктора ([ napl,... [, napN]){
код
>
имяОбъекта = new имя_конструктора( ["napl",... [, "парМ"])
Способ 2
имяОбъекта = new Object()
имяОбъекта.свойство = значение
Способ 3
имяОбъекта = {свойство!: значение! [, свойство2: значение [ N ] }
Для обращения к свойствам и методам объекта используется следующий синтаксис:
ссылка_на_объект.свойство
ссылка_на_объект.метод([параметры])
Допустим, например, что нам требуется создать объект Сотрудник, который содер-
жал бы сведения о сотрудниках некоторой фирмы, такие как Имя, Отдел, Телефон,
Зарплата и т. п. В фирме может быть много сотрудников, но сведения о них пред-
ставляются в некоторой единой структуре. Эту структуру можно создать с по-
мощью конструктора объекта:
function Сотрудник (Имя, Отдел, Телефон, Зарплата) {
this. Имя = Имя
this.Отдел = Отдел
this.Телефон = Телефон
this.Зарплата = Зарплата
}
Как видите, конструктор объекта может быть представлен в виде определения
функции. Ключевое свойство this представляет ссылку на текущий, то есть оп-
ределяемый конструктором объект. Все операторы присвоения с this, расположен-
ные в теле функции-конструктора, определяют свойства объекта. В круглых скоб-
ках у имени объекта могут перечисляться параметры, чтобы иметь возможность
96_______________________________________________Глава 1. Основы JavaScript
создать конкретный объект, являющийся экземпляром обезличенного объекта
Сотрудник, и присвоить его свойствам конкретные значения. Например, создадим
конкретного сотрудника - agentOO?:
agentOO? = new Сотрудник("Джеймс Бонд", 5, "223-332", 3600.50)
Доступ к свойствам этого объекта производится обычным способом:
а§ет007.Имя // "Джеймс Бонд"
agent007.Зарплата // 3600.5
Информация о новом сотруднике добавляется аналогичным образом:
Shtirlitz = new Сотрудник("Максимов", 4, "123-4567", 4500.50)
К свойствам и методам этого объекта обращаются довольно редко, и здесь мы не
будем их подробно рассматривать. Отметим свойство prototype, назначение кото-
рого мы уже описывали применительно к объектам String и Array. Метод toStringQ
обычно используется при отладке программ с помощью диалоговых окон. Свой-
ство hasOwnPropery("cBoiicTBo") используется, чтобы определить, имеется ли у эк-
земпляра объекта указанное свойство, определенное в его конструкторе (но не
с помощью prototype). Если да, то возвращается true, в противном случае - false.
Более подробные сведения о создании объектов вы найдете в следующем разделе.
Там приведено много примеров, и вы легко убедитесь, что понятие объекта не
сложнее, чем понятие функции.
1.8. Пользовательские объекты
В предыдущем разделе мы рассмотрели встроенные объекты, то есть заранее пред-
определенные в JavaScript и часто используемые в программах. С помощью выра-
жений с ключевым словом new вы можете создавать экземпляры этих объектов,
то есть их конкретные воплощения. Более того, благодаря свойству prototype име-
ется возможность добавлять к объектам новые свойства и методы, придуманные
пользователем и отсутствовавшие в исходных встроенных объектах. В большин-
стве случаев, в частности при создании сценариев для веб-страниц, всего этого
более чем достаточно. Однако нельзя обойти вниманием возможность создания
собственных объектов. Зачем нужны собственные объекты?
Они не являются необходимыми для решения практических задач. С точки зре-
ния программиста, объект представляет собой просто удобное средство организа-
ции данных и функций их обработки. Чтобы как-то организовать данные и функ-
ции в программе, далеко не всегда необходимо прибегать к такой конструкции,
как объект. Ведь даже при внушительном количестве данных программист не все-
гда организует их в виде массива (объекта Array): бывает достаточным ограничиться
простыми переменными.
В этом разделе мы сосредоточимся на том, как создавать объекты, если возникла
такая необходимость. Возможно, это вам понадобится. Кроме того, данный мате-
риал поможет лучше понять природу встроенных объектов, а также общую фи-
лософию объектно-ориентированного программирования. Сейчас концепция
объектно-ориентированного программирования является ведущей в техноло-
гиях создания крупных приложений, поэтому будет полезно познакомиться
с ней поближе.
1.8. Пользовательские объекты.
97
1.8.1. Создание объекта
Объекты в JavaScript можно создать несколькими способами. Мы рассмотрим три
из них.
Первый способ основан на функции, в теле которой описываются все свойства
и методы создаваемого объекта. Поскольку эта функция играет определяющую
роль в создании объекта, ее называют функцией-конструктором или просто кон-
структором объекта. Что, собственно, должен делать конструктор? Очевидно, он дол-
жен ввести имя создаваемого объекта, а также его свойства и методы. Кроме того, он
должен допускать возможность присвоения начальных значений свойствам.
Имя функции-конструктора объекта является одновременно и именем создавае-
мого объекта. Свойства и методы создаваемого объекта задаются в теле функции-
конструктора с помощью операторов присвоения. При этом имена переменных-
свойств записываются с ключевым словом this (этот): this.переменная.
Рассмотрим в качестве примера функцию-конструктор, определяющую объект саг
(автомобиль) со свойствами name (название), model (модель) и color (цвет):
function car(name, model, color) {
this.name = name
this.model = model
this.color = color
}
Эта функция определяет объект car. Чтобы создать конкретный экземпляр объек-
та саг, следует выполнить выражение с вызовом этой функции, которой можно
передать значения параметров. Мы уже знаем, что экземпляр объекта создается
с помощью оператора присвоения с ключевым словом new:
mycar = new саг("0ка", "ВА31111", "white")
Итак, мы создали объект mycar, являющийся экземпляром объекта саг. Таких эк-
земпляров с различными именами можно создать несколько. Значения свойств
объекта mycar можно изменять в программе:
ray саг. model // значение равно "ВА31111"
mycar.name // значение равно "Ока"
mycar.model = "ВА311113" // значение равно "ВА311113"'
Как видите, объект - это просто особый способ группировки данных и их исполь-
зования (составное имя переменной: объект.свойство).
Объекты можно создавать и с помощью конструктора new ObjectQ:
mycar = new ObjectO
mycar.name = "Ока"
mycar.model = "BA31111"
mycar.color = "white"
В этом способе отчетливо видно: создаваемый объект является экземпляром объ-
екта Object, подобно тому как, например, создаваемый массив является экземпля-
ром объекта Array.
Допускается также и следующая компактная запись определения объекта:
mycar = {пате:"0ка", model:"ВАЗ11 1 " , color :"white"}
Здесь все определение свойств заключается в фигурные скобки. Пары свойство=
= значение разделяются запятыми, а имя свойства отделяется от значения двоето-
чием.
98.
.Глава 1. Основы JavaScript
При создании объекта мы можем задать значения свойств по умолчанию, то есть
значения, которые будут иметь свойства, если при создании экземпляра этого объ-
екта значения его свойств не указаны явным образом (то есть имеют значения
null, 0 или""). Это делается с помощью логического оператора ИЛ И (обозначаемо-
го ||) в конструкторе объекта в виде функции:
function car(name, model, color) { // конструктор объекта саг
this.name = name || "неизвестно"
this.model = model || "неизвестно"
this.color = color | | "black"
}
mycar = new c -.ar("Жигули","") // создание экземпляра mycar объекта car
my с а г. паше // "Жигули-
ну car. roadel // "неизвестно"
// "black"
1.8.2. Добавление свойств
Если возникает необходимость добавить новое свойство к существующему объек-
ту, а также ко всем его экземплярам, то это можно сделать с помощью свойства
prototype. В приведенном ниже примере мы создаем объект саг (автомобиль), за-
тем его экземпляр mycar, а затем добавляем к свойству prototype свойство owner
(владелец) с конкретным значением:
function car(name, model, color) { // конструктор объекта car
this.name = name || "неизвестно."
this.model = model "неизвестно"
this.color = color "black"
}
mycar = new car("Жигули","").*«) /* создание экземпляра mycar
объекта car */
mycar.name // "Жигули"
mycar. model // "неизвестно"
mycar. col or // "black"
car. prototype .owneг = "Иванов" // добавляем новое свойство
mycar.owner
// "Иванов"
Если нужно добавить новое свойство только к конкретному объекту (к данному
экземпляру объекта), то это можно сделать просто с помощью оператора присво-
ения:
имяОбъекта.новое_свойство = значение
В следующем примере мы создаем объект саг вообще без свойств, а затем добав-
ляем его экземпляры и к ним - различные свойства.
function car(){ }
mycarl = new car()
mycar2 = new car()
mycarl.name = "Жигули"
mycar2.model = "BA32106"
mycarl.name // "Жигули"
mycarl.model // undefined (не определено)
тусаг2.лап,е // undefined (не определено)
mycar2.model // ""BA32106"
1.8. Пользовательские объекты _______________________________________________99
1.8.3. Связанные объекты
В объекте в виде свойства может содержаться ссылка на другой объект. В этом
случае оба объекта оказываются связанными: один из них оказывается подобъек-
том или, другими словами, свойством другого. Например, мы можем создать объ-
ект photo, содержащий в качестве своих свойств название автомобиля и URL-адрес
файла с его изображением. Такой объект можно связать с объектом саг, содержа-
щим основную информацию об автомобилях, добавив к нему свойство, значени-
ем которого является ссылка на объект photo.
Ниже приведены конструкторы объектов саги photo. Чтобы добавить объект photo
в объект саг, мы добавили в объект саг свойство, значением которого является ссыл-
ка на объект photo.
function car(name, model, color, photo) { // конструктор объекта car
thi s.name = name
thi s.model = model
thi s. color = color
this.photo = photo // ссылка на объект photo
>
function photo (name, url) { // конструктор объекта photo
thi s.name = name
thi s . url = url
}
Создадим пару конкретных объектов, являющихся экземплярами объекта photo:
photol = newphotoC'OKa", "/images/okal.jpg").
photo2 = newphotoC'OKa" , "/images/oka2 . gi f" )
Теперь создадим экземпляры объекта car:
mycar = new саг("0ка", "ВА31111" . "white". photol)
mycar.photo.url // "/images/okal.jpg"
mycar.model // "BA31111"
mycar = new carl "Ока". "ВА31111" . "white", photo2)
mycar.photo.url // "/images/oka2. gif "
mycar.model // "BA31111"
Обратите внимание: чтобы узнать значение URL-адреса расположения файла
с картинкой, относящейся к объекту mycar, мы обращаемся к свойству ur L объекта
photo, который сам является свойством объекта mycar или, другими словами, под-
объектом объектаmycar.
1.8.4. Пример создания базы данных
с помощью объектов
Теперь рассмотрим пример создания базы данных автомобилей, находящихся на
одной стоянке. Список всех автомобилей можно представить в виде таблицы со
столбцами: name (название), model (модель), regnum (номер), owner (владелец)
и photo (фотография). Будем считать, что на фотографии номер автомобиля не
показан, так что она отображает не конкретный автомобиль, а его тип (название,
модель и цвет). Конечно, можно создать базу данных в виде одной таблицы, одна-
ко мы поступим иначе и создадим две таблицы. Одна из них будет вспомогатель-
100.
.Глава 1. Основы JavaScript
ной и выполнять роль справочника типов автомобилей, а другая таблица будет
содержать записи о конкретных автомобилях, находящихся на стоянке или, точ-
нее, приписанных к ней.
Справочник типов автомобилей будет содержать наиболее общие сведения об
автомобилях: название, модель и фотографию (точнее, URL-адрес ее файла). На
стоянке может находиться несколько автомобилей одного типа (например, «Жи-
гули», ВА32101 белого цвета), но в справочнике этот тип будет упомянут лишь
один раз. В нашей базе данных справочник типов автомобилей будет представ-
лять объект ref:
function ref(name, model, url) { /* конструктор справочника
типов автомобилей */
■ is.name = name // название марки автомобиля
this.model = model // модель
tfthis.url = url // URL-адрес файла с фотографией
}
Заполним справочник конкретными записями. Множество всех таких записей
удобно определить как массив (назовем его aref). Тогда элементы этого массива
определим как экземпляры объекта ref:
aref = new ArrayO // массив записей справочника типов автомобилей
aref[0] = new ref("Жигули",, -6332101". "p1cte.gif")
aref [ l] = new ref ("Жигули" , "Ваз210б", "pictl.gif")
aref[2] = new ref("Bcwira", "ГА324", "pict2.gif")
aref[3] = new ref("OKa", "Basllll", "pict3.gif")
В нашем справочнике описаны только четыре типа автомобилей.
Теперь создадим список всех автомобилей на стоянке. Этот список удобно офор-
мить как массив, каждый элемент которого представляет запись о конкретном
автомобиле. Формально элементы этого массива мы определим как экземпляры
объекта < - который будет содержать ссылку на справочник - объект ref.
Итак, сначала напишем код функции-конструктора объекта саг:
function car(regnum, owner, ref) {
this.regnum = гgniffli // номер автомобиля
this.owner = owner // владелец
и s.ref = ref // ссылка на справочник
}
Далее создадим записи о конкретных автомобилях на стоянке. Массив записей
назовем асаг:
acar = new ArrayO
acar[0] = new car("A123BX". "Иванов". aref[l])
acar[l] = new car("M345CT", "Петров", a r e f [ l ]")
acar[2] = new car("E678CA",, "Сидоров". aref[ej)
acar[3] = new car ("K0560X", "Михайлов", aref[2])
acar[4] = new car ("K895MX", "Дунаев", aref[3])
acar[5] = new car ("P340HY", "Павлов", aref[2])
acar[6] = new car ("03210K" , "Николаев", aref [2])
В нашем списке всего 7 записей. Модель ВА32106 в нем встречается два раза,
ГА324 - три раза, а остальные - по одному разу. Если бы мы создавали базу дан-
ных без справочника, то нам пришлось бы многократно повторять одни и те же
данные при определении массива асаг.
Далее приводятся примеры обращения к свойствам нашей базы данных:
1.8. Пользовательские объекты
101
асаг[4].ref.model
асаг[3] . ref.name
асаг[3].owner
.// "ВА31111"
// "Волга"
// "Михайлов"
Поскольку база данных представляет собой массив, с помощью методов объекта
Array можно организовать фильтрацию (выборку) записей по тому или иному кри-
терию. Попробуйте сделать это самостоятельно.
Базу данных, создание которой мы рассмотрели выше, можно отобразить на экране
монитора в окне браузера. Для этого необходимо прежде всего создать HTML-
программу с таким элементом, как таблица. Напомним, что таблица определяется
тегами <TABLE>, <TR>, <TH>, <T D> и др. Вы можете создать в HTML-программе раз-
дел, обрамленный тегами <SCRIPT> и </SCRIPT>, между которыми разместить рас-
смотренный выше код на языке JavaScript. А далее есть два пути.
• Вручную написать теги таблицы. Если количество строк в таблице невелико,
то именно так и следует поступать.
• Написать программу на JavaScript, генерирующую нужную последовательность
тегов и данных как строку, а затем воспользоваться методом writeQ объекта
document для ее записи в текущий HTML-документ и исполнения браузером.
Этот способ интереснее и предпочтительней, если таблица содержит много
строк. Небольшой объем кода обеспечивается тем, что формирование строки
с HTML-кодом происходит в цикле. К этому располагает то, что строки (запи-
си) нашей базы данных определены в виде массива.
В листинге 1.1 приведен HTML-код, содержащий только сценарий. Для упроще-
ния ситуации мы формируем таблицу только с тремя столбцами. Мы не обраща-
ли внимания на дизайн таблицы, определяемый специальными атрибутами
тегов (рис. 1.14).
базаданных автомобилей - Microsoft Internet?*»!... |Я1
£иа tfsSfMrtHCe OgC8
• J
О сготовить
0(**енть ila-ni»
Spec?.'] С \Мои дерумектьЛпрммеры htj j ji, х>Г|..Ч1<
Жигули
Название;| Номер Щладелец!
Жигули |А123ВХ |Иванов I
1(Жигули......iJM345CT Щегров
JE678CA |Сндоров |
Щ056ОХ Михайлов
РК895МХ' :Дунаев
•|P34OHY"Щавлов
|5з210К Николаев "|
Волга
■Ока
Волга
''................jauj-v-y--.—
Шолга
I
\Щ МОИМШШКЛЩ;)
Рис. 1.14. Так выглядит база данных автомобилей в окне браузера
102
Глава 1. Основы JavaScript
Листинг 1.1. Код для отображения базы данных автомобилей в браузере
Jr l ) {
<HTML>
<НЕАО><Т1Т1_Е>База данных
<SCRIPT>
/* Конструкторы */
function ref(nami mode
this.name = name
this.model = model
this.url = url
}
function car(regnum , -egnum. owner, ref)
thls.regnum = regnair
this.owner = owner
Hs.iref = ref
J
/* Собственно база данных */
автомобилей</Т1Т1Е></НЕАО
/••»
//
//
//
/*
//
//
//
конструктор справочника
типов автомобилей */
название марки автомобиля
модель
URL-адрес файла с фотографией
конструктор списка
автомобилей на стоянке
номер автомобиля
владелец
ссылка на справочник
*/
aref = new ArrayO // массив записей справочника
aref[0] = new ref("Жигули",, "BaUiei". "P1 ct9.gif■)
aref[l] = new ref("Жигули" , "Ваз2106" , "pictl.gif")
aref [2] = new ref (Bo nra " ," Г А 3 2 4", "ГА324", "p1ct2.gif")
aref[3] = new ref ("Ока". "ВазПП", "pict3.gif")
типов автомобилей
acar = new ArrayO
acar[0] = new car ( "A123BX".
acar[l] = new car ("M345CT"Петров",
acar[2] = new car ( "E678CA",
acar[3] = new car ( "KQ56OX",
acar[4] = new car( "K895MX""Дунаев",
acar[5] = new car ( "P340HY""Павлов"
= new car(""03210K"
"Иванов", aref [1])
"Петров", aref[l])
"Сидоров". aref[0])
"Михайлов , aref [2])
"Дунаев", aref[3])
"Павлов", aref [2])
"Николаев", aref[2])
acar[6]
strTab = - TABLE BORDER=1> <TR>"
strTab += "<ТН>Название</ТН><ТН>
/* Формирование строк таблицы */
or(i=0;i<=acar.length-1;1++){
strTab += "<TR><TD> " + acar[i]. ref .nai».f +
strTab += "</TD><TD>" + acar[i].owner + "</TD></TR>"
Номер</ТН> <TH>Bлaдeлeц</TH></TR>"
+acar[1].regnum
strTab += "</TABLE>"
/* записываем строку strTab
в HTML-документ и выполняем его Щ
</SCRIPT>
</HTML>
Здесь в теле оператора цикла for мы использовали разновидность оператора при-
своения +=. Напомним, что выражение х += у эквивалентно выражению х = х + у.
Мы дважды использовали выражение с этим оператором только лишь для того,
чтобы выражение справа от него не было слишком длинным.
Мы могли бы включить в отображаемую таблицу и другие столбцы. Например,
для отображения фотографий автомобилей достаточно добавить в строку strTab
следующий фрагмент:
"<TD><IMG SRC = " + acar [i] . ref.url + '
1.9. Специальные операторы
103_
1.9. Специальные операторы
В этом разделе описываются операторы, которые при программировании наJava-
Script используются относительно редко. Возможно, они вам когда-нибудь по-
требуются. Именно поэтому я и включил в книгу данный раздел. Новички могут
пока пропустить его.
1.9.1. Побитовые операторы
Побитовые (поразрядные) операторы применяются к целочисленным значениям
и возвращают целочисленные значения. При их выполнении операнды предвари-
тельно приводятся к двоичной форме представления, в которой число является
последовательностью из нулей и единиц длиной 32. Эти нули и единицы называ-
ются двоичными разрядами, или битами. Далее производится некоторое действие
над битами, в результате которого получается новая последовательность битов.
В конце концов эта последовательность битов преобразуется к обычному целому
числу - результату побитового оператора. В табл. 1.4 приведен список побито-
вых операторов.
Таблица 1.4. Побитовые операторы
Оператор
Название
Левый операнд
Правый операнд
к
Побитовое «и»
Целое число
Целое число
I
Побитовое «или»
Целое число
Целое число
Л
Побитовое исключающее «или»
Целое число
Целое число
-
Побитовое«не»
-
Целое число
«;
Смещение влево Целое число
Количество битов, на которое производится смещение
»
Смещение вправо
Целое число
Количество битов, на которое производится смещение
>»
Заполнение нулями при смещении вправо
Целое число
Количество битов, на которое производится смещение
Операторы &, |, л и ~ напоминают логические операторы, но их область действия -
биты, а не логические значения. Оператор - изменяет значение бита на противопо-
ложное: 0 на 1, а 1 - на 0. В табл. 1.5 поясняется, как работают операторы &, |, Л.
Таблица 1.5. Работа операторов &, |,
X Y
X&Y
X|Y
XY
1 1
1 0
0 1 0 0
1
0 0 0
1 1 1
0
0
1
I
0
104
.Глава 1. Основы JavaScript
Например, 2&3 равно 2, а2( 3 равно 3. Действительно, в двоичном представлении 2
есть 10, а 3 - 11. Применение побитовых операторов даст в случае оператора &
двоичное число 10, то есть десятеричное число 2, а в случае оператора | - двоич-
ное число И, то есть десятеричное 3.
У операторов смещения один операнд и один параметр, указывающий, на какое
количество бит следует произвести смещение. Например, 3«2 равно 12, потому
что смещение влево на два бита двоичного числа (десятеричное 3) дает 1100,),
что в десятеричной форме есть 12. Результат вычисления выражения б»2 - 1.
Действительно, число 6 в двоичной форме это 110; смещение его вправо на два
бита дает 1 как в двоичной, так и в десятеричной форме.
1.9.2. Объектные операторы
Оператор удаления свойств объекта (delete)
Удалить свойство объекта, а также элемент массива можно с помощью оператора
delete. Обычно этот оператор используют для удаления элементов массива:
delete элемент
ВНИМАНИЕ - -
При удалении элемента массива удаляется и его индекс, но оставшиеся элементы сохра-
няют свои прежние индексы, а длина массива не изменяется.
Пример
myarray = new A r r a y (" а"," b". "с", "d ")
myarray.length // 4
delete myarray[l]
myarray.length // 4
myarray [0] // "a"
myarray [1] // undefined
myarray[2] // 4"
myarray [3] // "d"
Использование оператора delete не приводит к немедленному освобождению па-
мяти. Решение об освобождении памяти принимается так называемым ядром
JavaScript, а пользовательская программа лишь создает к этому предпосылки, но
не может контролировать этот процесс абсолютно.
Оператор проверки наличия свойств (in)
Этот оператор позволяет проверить, имеется ли некоторое свойство или метод
у того или иного объекта. Левый операнд представляет собой ссылку в виде стро-
ки на интересующее нас свойство или метод, а правый операнд - объект. Ссылка
на метод содержит лишь его название без круглых скобок. Если свойство или ме-
тод содержится в объекте, то возвращается true, иначе - false. Отсюда следует,
что оператор in можно применять в условных выражениях (в операторах if, switch,
for, while, do-while).
Примеры
1. Например, объектdocument,представляющийзагруженныйв браузер HTML-доку-
мент, имеет метод writeQ. Чтобы убедиться в этом, следует написать выражение
1.9. Специальные операторы.
.105
"write" in document // значение равно true
2. Создадим объект и проверим наличие в нем некоторых свойств.
function Сотрудник (Имя, Отдел, Телефон, Зарплата) {
this.Имя = Имя
this. Отдел = Отдел
this.Телефон = Телефон
this.Зарплата = Зарплата
)
agent007 = new Сотрудник( "Джеймс Бонд", 5, "223-332")
"Телефон" in agent007 // true
"Ученая степень" in agentS07 // false
Оператор in поддерживается браузерами 1Е5.5+,NN6+.
^л атор проверки принадлежности объекта
Этот оператор позволяет проверить, принадлежит ли некоторый объект объект-
ной модели JavaScript. Левый операнд представляет проверяемое значение,
а правый - ссылку на корневой объект, такой как Array, String, Date и т. п. Вы-
ражение с оператором instanceof возвращает true или false и, таким образом,
может использоваться в условных выражениях (в операторах if, switch, for, while,
do-while).
Пример
Созданный массив является экземпляром объекта Array, а последний сам являет-
ся экземпляром корневого объекта Object.
myarray = new ArrayQ
myarray instanceof Array // true
Array instance Ob] i // true
Myarray instanceof String // false
Оператор in поддерживается браузерами 1Е5.5+, NN6+.
1.9.3. Комплексные операторы
Оператор условия (?:)
Этот оператор является сокращенной формой оператора условного перехода if...
else... Его так и называют: оператор условия. Обычно он используется вместе
с оператором присвоения одного из двух возможных значений, в зависимости от
значения условного выражения. Синтаксис оператора условия следующий:
условие ? выражение! : выражение2
С оператором присвоения оператор условия имеет такой вид:
переменная = условие ? выражение! : выражение2
Оператор условия возвращает значение выражения выражение!, если условие ис-
тинно, в противном случае - значение выражения выражение2.
Пример
d = new Date()
х = d.getDateO
typedate = (x%2 == 0)&&(x > 1) ? "четное" : "нечетное"
106.
.Глава 1. Основы JavaScript
Если бы в JavaScript не было оператора условия, то пришлось бы написать функ-
цию, которая работала бы как оператор условного перехода if, но, в отличие от
него, возвращала значение. Вот пример этой функции:
function iff (crcondition, exprl, expr2){
if ({condition)
return eval(exprl)
else
return eval(expr2)
)
Для данной функции нельзя было выбрать название if, поскольку это ключевое
слово. Потому было взято наиболее близкое к нему. Обратите внимание: предпо-
лагается, что выражения передаются функции как строки, содержащие выраже-
ния. Однако допустимы значения и других типов.
Оператор определения типа (tipeof)
Этот оператор используется для проверки, относится ли значение к одному из
следующих типов: string, number, boolean, object, function или undefined. Значение,
возвращаемое оператором typeof, является строковым. Оно содержит одно из пе-
речисленных выше названий типа. Единственный операнд пишется справа от клю-
чевого слова typeof.
Примеры
var x
п = 3.14
N = new Number(3.14)
s = "Привет всем!"
a = new Array(l, 2, 3, 4, 5)
function f(){}
typeof x // "undefined"
typeof n ' "number"
typeof N // "object"
typeof s // "string"
typeof a // "object"
typeof f // "function"
1.10. Приоритеты операторов
Выше мы уже говорили, что в выражениях операторы выполняются в порядке,
определяемом с помощью круглых скобок, согласно приоритетам; операторы
с одинаковыми приоритетами выполняются слева направо. В этом разделе мы
уточним приоритеты всех операторов (табл. 1.6).
Круглые скобки, с помощью которых можно установить любой порядок выпол-
нения операторов в выражении, можно считать операторами. Они обладают наи-
высшим приоритетом. Эти скобки могут образовывать структуру вложенности.
Выражения, заключенные во внутренние круглые скобки, выполняются раньше
тех, которые заключены во внешние круглые скобки. Интерпретатор JavaScript
начинает анализ выражения именно с выяснения структуры вложенности пар
круглых скобок.
1.10. Приоритеты операторов
107
На втором месте по приоритету находится вычисление индексов массивов и оп-
ределения самих элементов массивов. Индексы массивов, как известно, заключе-
ны в квадратные скобки.
На последнем месте находится запятая, как разделитель параметров.
Т Пар б и л оиид!/;. Распреде О л п е е н р и а ет о о п рераторовК п о о м п м р е и н о т р а и р т и е й там
1=
9
.10
!1
12
О
[]
function()
new
typeof
void
delete
/
;■'■
»
!-
&
л
&&
От внутренних к внешним
Значение индекса массива
Вызов функции
Логическое«не»
Побитовое «не»
Отрицание
Инкремент (приращение)
Декремент
Удаление объектного элемента
Умножение
Деление
Деление по модулю (остаток от деления)
Сложение (конкатенация)
Вычитание
Побитовые сдвиги
Меньше
Не больше (меньше или равно)
Больше
Не меньше (больше или равно)
Равенство
Неравенство
Побитовое «и»
Побитовое исключающее «или»
Побитовое «или» (дизъюнкция)
Логическое «и» (конъюнкция)
Логическое «или»
продолжение #
108_____________________________________________________Глава 1. Основы JavaScript
Таблица 1.,6 (продолжение)__________________________________________________________
Приоритет Оператор Комментарий
13
?
14
=
+-
* =
/=
%=
« =
Условное выражение (оператор условия)
Операторы присвоения
&=
I-
1_5 , З а п я т а я (разделитель параметров).
Кроме приоритетов следует также учитывать, что сложные логические выраже-
ния, состоящие из нескольких более простых, соединенных операторами И и ИЛИ,
выполняются по так называемому принципу короткой обработки. Это означает,
что значение всего выражения бывает можно определить, вычислив лишь одно
или несколько более простых выражений, не вычисляя остальные. Например,
выражение х&&у вычисляется слева направо; если значение х оказалось равным
false, то значение у не вычисляется, поскольку и так известно, что значение
всего выражения равно false. Аналогично, если в выражении х || у значение х
равно true, то значение у не вычисляется, поскольку уже ясно, что все выраже-
ние равно true.
ВНИМАНИЕ -
Если вы хотите проверить правильность сложного логического выражения, то необходимо
проверить отдельно все его составные части. Если какая-нибудь составная часть выраже-
ния содержит ошибку, то она может остаться невыявленной, поскольку эта часть выраже-
ния просто не выполнялась при тестировании.
1.11. Зарезервированные ключевые слова
Ключевые слова JavaScript, применяемые для обозначения элементов синтакси-
са языка, а также другие, зарезервированные на будущее, нельзя использовать
в качестве имен переменных, функций и объектов (табл. 1.7). В крайнем слу-
чае можете просто несколько модифицировать ключевое слово, изменив ре-
гистр, добавив какой-нибудь префикс (например, символ подчеркивания) или
суффикс.
1.11. Зарезервированные ключевые слова
109
Слово interface является ключевым - и, следовательно, его нельзя использовать
в качестве имени пользовательского объекта или функции. Однако можно при-
менить некоторую модификацию этого слова: myinterface, xlnterfaceи т. п.
ВНИМАНИЕ
Использование символов в различном регистре часто приводит к недоразумениям, обус-
ловленным тем, что одна и та же по вашему замыслу переменная из-за небрежности встре-
чается в программе в различном регистре. Поскольку JavaScript является регистрозависи-
мым языком, он воспринимает эти переменные как различные.
Если вы хотите использовать различный регистр в именах, то придерживайтесь
определенных правил. Например, только первый символ имени всегда является
прописной буквой.
СОВЕТ
Следует также иметь в виду, что со временем список зарезервированных ключевых слов
может расширяться. Чтобы ваши сценарии не перестали работать в будущем, подбирайте
имена для своих объектов из специфических (не общеупотребительных) слов.
Таблица 1.7. Список ключевых слов
abstract
else
int
super
boolean
extends
interface
switch
break
false
long
synchronized
byte
final
native
this
case
finally
new
throw
catch
float
null
throws
char
for
package
transient
class
function
private
true
const
goto
protected
try
continue
if
public
typeof
default
Implements
reset
var
delete
import
return
void
do
in
short
while
double
instanceof
static
with
Глава 2. Основы создания
сценариев
В э'ой; главе мы начнем с краткой истории программирования, а затем рассмот-
рим основные понятия, объекты JavaScript и приемы работы с ними. Их нужно
освоить, прежде чем заниматься более узкими задачами. В главе 4 вы познакоми-
тесь с конкретными примерами сценариев, но чтобы научиться решать задачи,
выходящие за рамки конкретных примеров, прочитайте данную главу. В этом слу-
чае вы с легкостью и с интересом усвоите справочный материал, изложенный
в главе 3.
2.1. Из истории программирования
Давным-давно, примерно с 1950 по I960 год, в программировании не было сколь-
ко-нибудь явно выраженных технологий. Не существовало понятия вызова функ-
ции, данные хранились где попало, для управления вычислительным процессом
широко использовались операторы перехода, в том числе и оператор GO TO (пе-
рейти туда, кудая сказал). Программные коды были огромными, содержали мас-
су ошибок и стоили очень дорого. Операторы GO TO бросали читателя исходных
текстов то вверх, то вниз по листингу исходного текста программы. Отладка про-
грамм занимала львиную долю всего времени разработки. Тогда программирова-
ли в цифровых кодах команд, а переход к языку мнемокодов Assembler казался
этапом значительной автоматизации работы программистов. Нормой производи-
тельности труда программистов было 3-5 команд в день. В действительности про-
граммист за месяц писал тысячи кодов, хотя результат состоял всего лишь из не-
скольких их десятков. А зачем он это делал, если ему платили по норме? В те
романтические годы программистом мог быть только специалист по вычислитель-
ной технике. При этом программисты, как правило, были еще и математиками.
Математиками их называли до середины 80-х годов прошлого века независимо от
того, имели они специальное образование или нет, понимали ли они хоть что-
нибудь в этой изящной и прекрасной науке или нет.
В период с 1960 по 1975 год появились первые функциональные языки програм-
мирования, такие как FORTRAN и ALGOL. Эти языки в основном предназнача-
лись для поддержки формульных вычислений, необходимых ученым и инжене-
рам. Расчет траекторий орбит космических аппаратов и планет, создание программ
наведения антенн, прогноз погоды и параметров электронных схем - далеко не
2.1. Из истории программирования.
111
полный перечень задач, обслуживаемых программными языками данного типа.
Эти языки позволяли создавать функции, что ускорило создание более объемных
программ. Однако операторы GO TO по-прежнему изобиловали в программах, их
отладка, как и раньше, оставалась трудоемким и длительным делом, а мысль о
необходимости структуризации данных и собственно программ только зарожда-
лась. В это же время возникли первые операционные системы.
В конце 70-х годов стало ясно, что программы и данные должны иметь четко вы-
раженную структуру, чтобы их можно было быстро разрабатывать, отлаживать,
модифицировать и интегрировать с другими программными комплексами. На эту
тему написаны сотни книг и статей. Тема публикаций и дискуссий - структур-
ное программирование. Оно в итоге значительно улучшило качество программ-
ных продуктов. PL/I и С - наиболее типичные и знаменитые языки структурно-
го программирования. Появилась возможность создавать сложные структуры
данных с помощью средств языка. Например, программист мог создать структуру
Автомобиль для хранения в ней всехнеобходимыхданныхоб автомобиле: марки,
номера, цвета, имени владельца и т. п. При этом все данные хранились в одном
месте, а не рассеивались по множеству переменных. Те, кто знаком с программи-
рованием баз данных, могут удивиться: а что тут особенного? Одно дело сохра-
нять данные в соответствии с некоторой структурой на диске, а другое - обеспе-
чивать поддержку структуры на уровне языка.
С 1990 года началась эра так называемого объектно-ориентированного програм-
мирования (ООП). По существу, ООП основывается на расширении концепции
структуры. Если раньше в структуре хранились лишь статические данные, то те-
перь стало возможным хранить и описания активных элементов, называемых ме-
тодами. Такие структуры в языках ООП называются классами, или объектами.
Методы объекта описывают его поведение. Например, разрабатывая компьютер-
ную игру, программист может создавать объекты для всех ее персонажей. Кроме
статических характеристик (имя, внешний вид, координаты положения), объект
может содержать и описания методов изменения положения, своего внешнего вида
и реакции на действия игрока. Другими словами, объект представляет собой не-
кий контейнер, содержащий переменные и функции, которые применительно
к объекту называются его свойствами и методами. Замечательно еще и то, что
в языках, поддерживающих ООП, из одних объектов можно делать другие, до-
бавляя к ним новые свойства. При этом созданные таким образом новые объекты
наследуют свойства исходных (родительских) объектов. Например, объект Сту-
дент наследует свойства объекта Человек, а последний наследует свойства объекта
Млекопитающее. Благодарямеханизмунаследованияпрограммист освобождается
от необходимости повторять историю создания новых объектов начиная от
Адама.
Самый известный и широко используемый язык ООП - C++ . Язык С (просто
Си) - мощный, но низкоуровневый язык программирования. В нем есть все не-
обходимое для создания объектов, однако ответственность за это полностью ло-
жится на программиста. Язык C++ , напротив, большую часть рутинной работы
по созданию объектов (классов) берет на себя. Существуют и другие объектно-
ориентированные языки (например, Java и Object Pascal), но C++ стал стандар-
том ООП-языка де-факто. Если какой-либо язык так или иначе поддерживает то
112______________________________________Глава 2. Основы создания сценариев
же, что и C++ , то говорят, что это ООП-язык. Однако не все языки, поддержива-
ющие работу с объектами, являются ООП-языками в полной мере. Это, по суще-
ству, означает, что они поддерживают не все механизмы работы с объектами, ко-
торые имеются в C++ . Так, например, JavaScript не вполне ООП-язык, поскольку
его последняя версия 1.5 не поддерживает концепцию наследования свойств объ-
ектов в том объеме, в каком это реализовано в C++ . Заметим при этом, что следу-
ющая версия JavaScript, как ожидается, уже будет полностью соответствовать
концепции ООП.
Не для всех программистов, воспитанных на идеях функционального и структур-
ного программирования, переход к ООП был гладким и естественным. В начале
90-х годов появляется множество популярных книг, авторы которых пытались
с помощью простых аналогий из повседневной жизни объяснить суть объектов.
Обычно в качестве примеров приводились магнитофоны и микроволновые печи
с кнопками и регуляторами, которые должны были проиллюстрировать идею
свойств и методов. Признаюсь, мне тоже было нелегко освоить новую филосо-
фию программирования. Вместе с тем я видел, как новички без особых затрудне-
ний осваивали C++ и другие объектные языки. Они попросту не были обремене-
ны стереотипами. В конце концов и я с этим разобрался. Во-первых, в отношении
ООП я задавал неправильный вопрос «а зачем это надо?», который только сбивал
с толку. Дело в том, что я уже давно мыслил в терминах ООП и даже создавал
объекты, но посредством функциональныхязыков. Поэтому, естественно, я не мог
получить хороший ответ на свой вопрос «зачем?». Для меня тогда единственным
оправданием ООП-языков оставалось лишь наличие компиляторов для них, осу-
ществляющих проверку синтаксической правильности, и средства отладки про-
грамм. Во-вторых, аналогия объектов с бытовыми приборами вызывала у меня
неверные ассоциации, скорее удаляя от понимания, чем приближая к сути. Воз-
можно, это связано с индивидуальными особенностями моего восприятия. Тем
не менее лучшей, на мой взгляд, интерпретацией объекта является контейнер,
содержащий переменные и функции. Представьте себе, что я написал некую про-
грамму, предназначенную для решения некоторых задач. Свое творение я назвал
объектом и сделал его доступным для пользователя или программиста. Это озна-
чает, что я опубликовал описание этого объекта, в котором указал, какие внутрен-
ние переменные и функции могут быть использованы и каким образом, чтобы
объект работал по своему назначению. Иначе говоря, я просто вывел наружу дат-
чики и органы управле ня своим объектом, а все остальное скрыл от г лаз пользо-
вателя. Со временем я могу усовершенствовать программный код своего объекта,
не сообщая об этом пользователю, и, что еще важнее, при соблюдении определен-
ных условий я могу не тестировать свой модифицированный объект в комплексе
с другими.
В связи с появлением многозадачных операционных систем, таких как Windows,
OS/2, Unix и Linux, открылись возможности для так называемого событийного
программирования. Программные единицы (объекты, в частности) могут реаги-
ровать на действия пользователя (например, щелчок кнопкой мыши, нажатие на
клавишу и др.), а также передавать сообщения о событиях другим программным
единицам. При этом внешне ситуация выглядит так, будто одновременно функ-
ционирует множество объектов, в какой-то степени автономных, но действующих
2.2. От простого до динамического HTML
.113
согласованно, взаимообусло .в л е н н о. С одной стороны, это открывает огромные воз-
можности довольно легко создавать интересные и сложные программы. С другой
стороны, при необдуманных решениях могут возникнуть непредвиденные и пло-
хо контролируемые ситуации.
Язык JavaScript создан, главным образом, для разработки интерактивных при-
ложений, то есть программ, реагирующих на действия пользователя. Действия
пользователя инициируют события, которые и обрабатываются в сценариях, на-
писанных на JavaScript. Вместе с тем на этом языке можно писать и другие про-
граммы, например создавать игры, информационно-справочные системы и т. п.
Браузеры, выполняющие программы на JavaScript, предоставляют программисту
огромное множество уже готовых объектов. Таким образом, вы освобождаетесь
от рутинной части работы по созданию графической среды и элементов управле-
ния, вам остается только использовать их в соответствии с вашими задачами.
В большинстве случаев программы на JavaScript оказываются достаточно корот-
кими, поэтому их может разработать и отладить даже новичок. Отметим еще одно
важное обстоятельство: JavaScript используется, как правило, совместно с дру-
гим языком - HTML. С одной стороны, это требует от программиста знания двух
языков, а с другой - существенно упрощает задачу организации ввода и вывода
информации. Наконец, именно благодаря HTML, который всего за несколько лет
освоили миллионы, JavaScript стал чрезвычайно популярным языком среди обыч-
ных пользователей компьютеров, а не только программистов-профессионалов.
Те, кто знаком с языком С, легко освоят JavaScript, поскольку многие языковые
конструкции им уже известны. Они должны лишь привыкнуть к свободе обраще-
ния с типами данных, которую предоставляет JavaScript, а также освоить концеп-
цию объектной модели документа.
Несмотря на похожие названия, между JavaScript и Java очень мало общего. Java
похож на C++ , но, в отличие от него, является не зависимым от платформы среды
выполнения.
2.2. От простого до динамического HTML
2.2.1. Простой HTML
Для создания веб-страниц разработан довольно простой язык HTML (Hyper Text
Markup Language - язык разметки гипертекста). Изначально он задумывался как
язык разметки документа, содержащего текстовую и графическую информацию
вместе с элементами управления, такими как ссылки на другие документы. Тек-
сты, содержащие элементы, которые являются ссылками на другие до кументы, назы-
ваются гипертекстами, а сами ссылки называют еще гиперссылками. Кроме тексто-
вой и графической информации, а также ссылок в документ можно включать аудио-
и видеофрагменты. Чтобы создать такой документ, достаточно в обычном текстовом
редакторе (например, в Блокноте Windows) написать программу на языке HTML
Такие программы сохраняются в файлах с расширением htm или html, а выполняют-
ся они в веб-браузере, например Microsoft Internet Explorer или Netscape Navigator.
Инструкции HTML называют тегами, или дескрипторами. Они выделяются уг-
ловыми скобками (< и >). Каждый тег имеет свое название, являющееся ключе-
114
.Глава 2. Основы создания сценариев
вым словом. Спецификация тега обеспечивается его параметрами, которые обыч-
но называют атрибутами. Атрибуты могут иметь значения (аргументы). Назва-
ния тегов и атрибуты можно писать в любом регистре. Атрибуты, если они име-
ются, пишутся за названием тега в произвольном порядке через пробел. Формат
тега имеет следующий вид:
<НАЗВАНИЕ_ТЕ ГА [АТРИБУТ1 [= значение!] . . . АТРИБУТМ [= значением] ]>
Квадратные скобки показывают, что заключенные в них элементы не обязатель-
ны . Существуют теги без атрибутов (например, тег перехода на новую строку < BR>),
а также атрибуты без аргументов (например, NORESI ZE в теге <FRAME>). Даже если
для тега предусмотрены атрибуты, во многих случаях их можно не указывать, ис-
пользуя значение по умолчанию. Так, тег <MG SRC = "picture.jpg"> дает браузеру
команду вывести на экран графический объект из файла picture.jpg. Здесь ключе-
вое слово IM G - название тега, SRC - атрибут, a "picture.jpg" - аргумент (значе-
ние). Атрибут ID присущ любому тегу, но если он не используется, то по умолча-
нию принимается, что его значение - пустая строка.
Теги можно писать в одной строке или в нескольких, делая переносы в любом
месте. Невидимый служебный символ перевода строки и возврата каретки, встав-
ляемый в редакторе при нажатии клавиши Enter, не воспринимается браузером
как разделитель тегов. Можно считать, что браузер воспринимает последователь-
ность тегов как единую строку символов.
Большинство тегов являются контейнерными. Это означает следующее.
• Тегу<ТЕГ > обязательно соответствует заключительный тег</ТЕГ>.
• Между этими тегами можно разместить другие теги, контейнерные или нет.
В связи с этим можно говорить о вложенности одних тегов в другие.
Например, теги тела документа <BODY>, ссылки <А . . >, раздела <DIV>, таблицы
<TABLE> и др. являются контейнерными, то есть им соответствуют заключитель-
ные теги </BODY>, </A>, </DIV>, </ T A B L E>. Говоря «внутри тега <ТЕГ>», мы имеем
в виду то, что расположено между тегами <ТЕГ> и </ ТЕГ>. В приведенном ниже при-
мере показано, что внутри тега ссылки <А> можно разместить тег графического
изображения <IMG>, создав таким образом графическую ссылку:
<А HREF = "www.yandex.ru"><IMG SRC = " ban ne r. g if" ></A>
HTML-программа (HTML-код), формирующая документ, начинается тегом < HTML>
и заканчивается тегом </НТМ1>. Таким образом, <HTML> является контейнерным
тегом, причем самого верхнего уровня.
В HTML-коде существуют теги, которые никак не проявляются в окне браузе-
ра какими бы то ни было визуальными эффектами (например, <HEAD>, <M E T A>,
<SCRIPT>). Вместе с тем существует множество тегов, которым соответствуют
определенные видимые элементы документа (веб-страницы). Например, тегу
<IMG> соответствует изображение, Tery <BUTTON> - кнопка, тегу<INPUT> - поле
ввода данных, переключатель или кнопка, в зависимости от значения атрибу-
та TYPE
Приведенный ниже HTML-код формирует простую веб-страницу, содержащую
заголовок первого уровня (<Н1>), изображение (<IMG>), ссылку (<А>) и форму
(<FORM>), которая содержит поле ввода данных (<INPUT>) и кнопку (<BUTTON>).
2.2. От простого до динамического HTML
115
<HTML>
<Н1>Моя веб-страница</Н1>
<IMG SRC="piclt.jpg"> ,
<А HREF = "www. admi ral. ru/~dunaev">Caiu автора</а>
<FORM>
<INPUT TYPE="text" VALUE="">
<p>
<ВиТТОМ>Нажми здесь</В1ЯТОМ>
</FORM>
</HTML>
На рис. 2.1 приведен этот HTML-документ в окне браузера, а также показано со-
ответствие его элементов тегам HTML-кода.
aC' Mminoit! M<!HmVnj#.iilht I HiMjisnfi ln№tnf*F oil,
<У ->6$ ■* J CcwBoi'*
Моя Web-страница
fft ny JA Л \%t L ик »г.и< И
JiArt- Двдка ~ ffe(B«K:::'i;pthSbt.*'
Сайт автораг
H^mtn жить -|<-
<HTML>
■<Н1>Моя веб-страница</Н1>
<IMG SRC='pict.jpg'>
■<А HREF = 'ww»v. admiral, ru/~ d unaev'> C a(vrавто ра< /А > ;'-аЛтттра'1А> '
<FORM>
-<INPUTTYPE ='text' VALUE =
</FORM>
</HTML>
Ы
<В1ЛТОЫ>Нажми здесь</ВиТТОЫ>
;
£
Рис. 2.1. Тегам HTML соответствуют элементы HTML-документа в окне браузера
С помощью специальных тегов можно форматировать текстовые данные: управ-
лять шрифтом, задавать абзацы и способ выравнивания, в том числе взаимное
расположение текста и изображений.
Если не использовать специальных средств позиционирования, то элементы в до-
кументе будут располагаться в порядке их появления в HTML-коде соответствую-
щих им тегов. При этом если не использовать теги перевода строки (<BR>) или абзаца
(<Р>), то элементы будут располагаться рядом друг с другом по горизонтали или по
вертикали, в зависимости от размеров окна браузера и их собственных размеров. Теги
<BR> и <Р> являются довольно слабыми средствами форматирования.
Один из часто применяемых способов разметки документа основан на использова-
нии группы тегов, определяющих таблицу (<T A B L E>, <TR>, <T D> и др.). Таблицы можно
создавать не обязательно с видимыми границами (рамками). С помощью таблицы
можно просто разбить все поле документа на прямоугольные ячейки одинаковых или
различныхразмеров и размещать в них нужные элементы (тексты, изображения, кноп-
ки, ссылки и т. п.). Во многих случаях этого способа разметки вполне достаточно.
116____________________________________Глава 2. Основы создания сценариев
2.2.2. Динамический HTML
Выше мы бегло рассмотрели то, что называют простым, или классическим, HTML.
Вскоре после его появления выяснилось, что он не вполне отвечает потребностям
разработчиков и пользователей веб-сайтов. Во-первых, нужны были более мощ-
ные и гибкие средства форматирования. Во-вторых, требовалась возможность
вставки в HTML-документ объектов сторонних производителей. В-третьих, тре-
бовались средства для управления содержимым HTML-документа, загруженного
в браузер, а также для обработки действий пользователя (манипуляции мышью, на-
жатия на клавиши). Иначе говоря, было необходимо, чтобы HTML-документ являл-
ся динамическим и интерактивным (мог взаимодействовать с пользователем).
В ответ на потребность в мощных средствах форматирования появились так на-
зываемые CSS (Cascading Style Sheets - каскадные таблицы стилей). Теперь па-
раметры тегов стало возможным задавать не только с помощью атрибутов, но и
в строке, являющейся значением специального атрибута STYLE С помощью этого
атрибута можно определить индивидуальные параметры форматирования и по-
зиционирования практически для всех тегов. Кроме атрибута STYLE был введен
в обращение контейнерный тег <STYLE>. В теге <STYLE> можно задать индивиду-
альные стили для ряда тегов, а также создать произвольные стили и закрепить за
ними имена. Затем для придания какому-нибудь тегу свойств поименованного
стиля можно обратиться к нему с помощью атрибута CLASS = имя_стиля. С помощью
стилей можно определить параметры форматирования текстов, задать фильтры
(визуальные эффекты) для текстовых и графических элементов, а также задать
три координаты позиционирования элементов. Позиционирование, намойвзгляд,-
главная функциональная возможность CSS. Координаты top и left, задаваемые
с помощью стиля, определяют положение элемента на плоскости документа, а ко-
ординатаz-indexуказывает еще и слой документа. Так, задавая значения top и left
для различных элементов, можно добиться того, что одни элементы будут накры-
вать другие. Чтобы указать, какой из них должен быть выше или ниже другого
(независимо от порядка следования в HTML-коде), служит параметр z-index.
Объекты сторонних производителей, созданных с помощью различных языков про-
граммирования, вставляются в HTML-документ посредством контейнерных тегов
<OBJECT> и <EMBED>. С их помощью можно встроить в HTML-документ звук, видео,
Flash-анимацию, векторную графику, таблицы базы данных и многое другое.
Для управления элементами HTML-документов и даже самим браузером, гене-
рации новых документов, организации диалогового взаимодействия с пользова-
телем, выполнения каких-то расчетов и обработки данных в HTML была преду-
смотрена интеграция со специальными языками программирования. Программы,
написанные на этих языках, называют сценариями (scripts). Стандартным язы-
ком сценариев является JavaScript. Его должны уметь интерпретировать все веб-
браузеры. Браузер Microsoft Inter net Explorer помимо JavaScript воспринимает
еще один язык - VisualBasicScript, чего нельзя сказать о Netscape Navigator.
Каким образом JavaScript взаимодействует с HTML-документом и браузером?
Дело в том, что браузер и загруженный в него HTML-документ представлены
внутри браузера посредством иерархического множества объектов - так называ-
емой объектной модели. Для сценария на JavaScript объекты браузера и HTML-
документа образуют доступную среду. Что такое объекты и как с ними обращать-
ся, мы уже узнали из главы I. Чтобы использовать объекты браузера и документа,
2.3. Где, что и как делают сценарии.
.117
загруженного в него, необходимо знать их названия, свойства и методы. Но об
этом немного позже.
2.3. Где, что и как делают сценарии
2.3.1. Расположение сценариев
Программы, работающие с объектами HTML-документа, называют сценариями.
Вы можете написать программу на языке JavaScript. Она может иметь самостоя-
тельную ценность, используя собственные ресурсы JavaScript, но, кроме Того, она
способна взаимодействовать с объектами среды, окружающей интерпретатор язы-
ка. Интерпретатор JavaScript, встроенный в веб-браузер, предоставляет пользо-
вателю возможность использовать средства языка для д< ia к ресурсам браузе-
ра и всего того, что в нем находится в данный момент. А именно к свойствам
браузера и документа, загруженного в него. Конечно, вам не терпится узнать, как
добраться до этих ресурсов, чтобы воздействовать на них. Это делается с помощью
сценариев, написанных на языке JavaScript в некоем месте. А где именно? Есть
несколько вариантов размещения программ на JavaScript, выполняющих роль
сценариев для HTML-документов. Ниже мы их и рассмотрим.
Сценарии можно писать непосредственно в HTML-документе, а также в отдель-
ных текстовых файлах, которые вызываются из HTML-документа. Проще всего
размещать сценарий непосредственно в HTML-документе, чаще всего так и по-
ступают. Сразу заметим, что размещение исенария в отдельном файле совсем не
сложно, но не всегда оправданно из экономических соображений. Необходимо
накопить достаточное количество программных заготовок, чтобы решиться ис-
пользовать их в последующих проектах в качестве библиотек. Новички могут пока
об этом не задумываться, достаточно помнить, что рано или поздно такая задача
возникнет. Итак, сейчас мы займемся размещением сценария в HTML-докумен-
те, чтобы иметь возможность использовать их для оперативной модификации
HTML-документа, а следовательно и веб-страницы.
Сценарий в HTML-документе можно разместить несколькими способами. Сво-
бода подкупает, требуя взамен принять хоть какое-нибудь решение. Трудности
наступают именно при принятии волевого решения. Мы начинаем раздумывать
о правильности сделанного выбора. Именно тогда и возникают мечты о приемле-
мом рецепте. Рецепты можно выдавать только при четко поставленном диагнозе
и фиксированном анамнезе. В программировании это трудно сделать. Програм-
мирование - это искусство, хотя оно и близко к науке. Первый принцип искусст-
ва программирования - знаменитая «бритва Оккама»: не умножай сущностей.
Иначе говоря - не усложняй. Все, заканчиваем лирику и приступаем к делу.
Стандартным является размещение сценария в контейнерном теге <SCRIPT>, то
есть между тегами <SCR IPT> и </SCRIPT>. Встречая тег <SCR IPT>, браузер «понима-
ет», что за ним начинается код сценария. Заключительный тег </SCRIPT> указыва-
ет браузеру, что код сценария закончился. Все, что находится вне этих тегов, браузер
воспринимаеткакHTML-код.Контейнер<SCRIPT>можетрасполагатьсявлюбомместе
HTML-документа и даже не один раз. От его расположения иногда может зависеть
функционирование всего HTML-документа, но об этом мы скажем ниже.
118.
.Глава 2. Основы создания сценариев
Контейнерный тег <SCRIPT>, объемлющий код сценария, может содержать следу-
ющие атрибуты.
• LANGUAGE - язык сценария; возможные значения:
a "JavaScript", "JScript";
• "VBScript", "VBS".
Если атрибут L ANGU AGE не указан, то в Internet Explorer подразумевается JScript.
• SRC - указывает файл (имя или URL-адрес), содержащий код сценария. Этот
атрибут используется в том случае, если сценарий расположен не в HTML-
документе, а в отдельном файле.
Примеры
<SCRIPT LANGUAGE="JavaScript">
// код сценария
</SCRIPT>
<SCRIPT LANGUAGE = JS_ript" SRC = "myscripts . ] s"></SCRIPT>
Современные браузеры распознают еще и версию языка. Например, Internet Explo-
rer 4.0 и Netscape Navigator 4.0 знают версию языка JavaScript 12 Во время напи-
сания этой книги была доступна версия JavaScriptl.5, о которой знают Internet
Explorer 6.0 и Netscape Navigator 6.0. Если версия языка JavaScript в значении
атрибута LNGU AGE указана, а браузер не знает ее, то сценарий будет им просто
проигнорирован. Если же версия языка не указана, то браузер, которому она не
знакома, может неправильно выполнять некоторые выражения сценария или даже
выдавать сообщения об ошибках.
Редакция языка JavaScript для Internet Explorer называется JScript. Вместе с тем
в Internet Explorer можно использовать и LANGU A GE = "JavaScript". В браузере Net-
scape Navigator значимым является только L A N G U A G E = "JavaScript", ссылка L ANG U A G E =
"JScript" будет им проигнорирована. Поэтому при разработке сценариев, рассчи-
танных для различных браузеров, рекомендуется использовать ссылку LANGU A GE =
"JavaScript". В примерах, приводимых в настоящей книге, мы не будем указывать
язык, на котором написан сценарий (из соображений экономии места).
Старые браузеры, появившиеся раньше JavaScript, игнорируют теги <SCRIPT>
и </SCRIPT>, а все, что находится между ними, интерпретируют как содержимое
HTML-документа. Результат может быть самым неожиданным. Чтобы уменьшить
вероятность отображения кода сценария в окне старого браузера, следует заклю-
чить его в дескрипторы комментария <!- и Новые браузеры, поддерживаю-
щие сценарии, будут игнорировать эти символы, выполняя код сценария, а старые
(не понимающие сценарии), наоборот, будут игнорировать код сценария. Вот как ис-
пользуются символы комментария предохранения сценария от старых браузеров:
<SCRIPT LANGUAGE="JavaScript" >
<-1
// код сценария
</SCRIPT>
Обратите внимание на заключительные символы тега комментария, перед кото-
рыми стоят две косые черты. Без них JavaScript будет пытаться интерпретиро-
вать символы --> как заключительные символы комментария HTML, а с ними он
прое то их проигнорирует. В примерах, приводимых в настоящей книге, мы не бу-
дем указывать символы комментария для адаптации к старым браузерам из сообра-
2.3. Где, что и как делают сценарии
.119
жений экономии времени и места. Однако помните, что современная культура оформ-
ления сценариев обязывает нас делать это в своих практических приложениях.
Если сценарий располагается в отдельном файле, то в нем, разумеется, теги <SCRIPT>
и </SCRIPT> не пишутся. Как уже отмечалось, файлы со сценариями на JavaScript
являются обычными текстовыми файлами. В принципе, они могут иметь любое
расширение имени, но, как правило, используется расширение js. В отдельных
файлах обычно размещают библиотеки функций (определения функций), а так-
же сценарии, использующиеся в нескольких HTML-документах одного или не-
скольких сайтов. Сценарий, загруженный из внешнего файла, можно представить
себе просто как его вставку в HTML-документ. Вот пример:
<HTML>
<SCRIPT>
function myfunc() {
I
</SCRIPT>
<SCRIPT SRC = "[tiyl ibraryl. js"></SCRIPT>
<SCRIPT SRC = "myprogram. js"></SCRIPT>
</HTML>
Здесь в HTML-документе расположены три раздела (секции) сценария, два из
которых загружаются из отдельных файлов. В первом разделе сценария дано опре-
деление некоторой функции.
Сценарий можно также писать как строку операторов, разделенных точкой с запя-
той, взятую в кавычки. В такой форме сценарии обычно используются в качестве
обработчиков событий. Об этом более подробно будет рассказано в подразделе 2.3.2.
Вызовы функций и их определения могут располагаться в произвольном поряд-
ке, только если они расположены в одном и том же контейнере <SCRIPT>. Если вы
располагаете их в разных контейнерах <SCRIPT>, то необходимо, чтобы определе-
ние функции располагалось выше ее вызова. Аналогично, если определения функ-
ций находятся в отдельном файле, то его необходимо загрузить в HTML-доку-
мент раньше вызовов этих функций. Ниже приведены примеры правильного
и неправильного расположения сценариев в HTML-документе:
Правильно
Неправильно
<HTML>
<HTML>
<SCRIPT>
function myfunc(){
<SCR1PT> . . .
. . .
myfuncO
</SCRIPT>
</SCRIPT>
<SCRIPT>
. . . myfuncO
<SCRIPT>
function myfunc(){ . . .
}
</SCRIPT>
</HTML>
</SCRIPT> </HTML>
120.
.Глава 2. Основы создания сценариев
При попытке загрузить и выполнить неправильный вариант HTML-кода появит-
сядиалоговое окно с сообщением об ошибке «Ошибка: Предполагается наличие объ-
екта». Браузер интерпретирует HTML-теги последовательно. Так, встретив выра-
жение вызова функции myf un cQв одном контейнере <SCRIPT>, браузер еще не имеет
в памяти определения этого объекта (функции), расположенного в другом кон-
тейнере <SCRIPT>. Если же определение функции и ее вызов находятся в одном
и том же контейнере <5СК1РТ>,- то его содержимое сначала загружается в память,
а затем анализируется. Если интерпретатор встречает вызов функции, то он ищет
ее определение в памяти и при удачном результате выполняет код этой функции.
Следующие два варианта являются правильными, потому что определение функ-
ции и ее вызов находятся в одной секции сценария (в одном контейнере <SCRIPT>):
Правильно Правильно
■=HTML> <html>
<SCRIPT> <SCRIPT>
function myfunc(){ myfuncO
} function myfuncO{
myfuncO }
</SCRIPT> </SCRIPT>
</HTML>______________________________________________</HTML>___________________________________________
Если необходимо, чтобы сценарий загрузился в браузер прежде, чем загрузятся
элементы HTML-документа, то его следует расположить в верхней части HTML-
кода. В этом случае сценарий обычно располагают в контейнере <HEAD> (в заго-
ловке документа). Это самое лучшее место для расположения функций.
Если требуется, чтобы сценарий загрузился после загрузки всех элементов HTML-
документа, то возможны следующие два варианта. Во-первых, можно расположить
сценарий в конце HTML-документа. Во-вторых, можно использовать атрибут-собы-
тие onload в контейнерном теге <BODY>, который задает основную часть HTML-доку-
мента. В последнем случае значением атрибута onload обычно является строка, со-
держащая имя функции. Определение этой функции, как правило, содержится в
контейнере <SCRIPT>, размещенном в контейнере заголовка HTML-документа <HEAD>.
Обратите внимание, что при использовании атрибута-события onload в теге <B O D Y>
обработчик этого события выполняется по завершении загрузки всех элементов, опре-
деленных в контейнере <BODY>, а не в процессе их загрузки. Вот пример:
<HTML>
<HEAD>
<SCRIPT>
function myfunc () {
*/SCRIPT>
«;
/HEAD>
<BODY onload = "myfuncO" >
теги
2.3. Где, что и как делают сценарии.
.121
</BODY>
</HTML>
2.3.2. Обработка событий
Одним из главных (но далеко не единственным) назначений сценариев в HTML-
документе является обработка событий, таких как щелчок кнопкой мыши на эле-
менте документа, помещение указателя мыши на элемент, перемещение указателя
с элемента, нажатие клавиши и т. п. Большинство тегов HTML имеют специаль-
ные атрибуты, определяющие события, на которые могут отреагировать соответству-
ющие элементы. Список всех допустимых событий довольно обширен и рассчитан
практически на все случаи жизни. События называются довольно просто, особенно
если вы знаете английский язык. Например, щелчок левой кнопкой мыши - onclick;
изменение в поле вводаданных - onchange; событие onmouseoverпроисходит, когда
указатель мыши помещается на элемент HTML-документа. Список событий мы рас-
смотрим позже. Значением таких атрибутов-событий в тегах HTML является стро-
ка, содержащая сценарий, выполняющий роль обработчика события. Например, сле-
дующий HTML-код определяет заголовок второго уровня, который реагирует на
щелчок кнопкой мыши тем, что выполняет некоторую функцию myfuncQ:
<Н2 onclick = "myfunc( ">Щелкни здесь</Н2>
Для одного и того же элемента можно определить несколько событий, на которые
он будет реагировать. Другими словами, для одного и того же тега можно указать
несколько атрибутов-событий. Имена этих атрибутов, как и других, можно пи-
сать в любом регистре. Порядок следования атрибутов не имеет значения.
Итак, значением атрибута-события, как уже отмечалось, является код сценария,
заключенный в кавычки. Этот сценарий называют также обработчиком события.
В приведенном выше примере обработчиком события onclick является функция
myfuncQ. Если обработчик события содержит несколько выражений, то они раз-
деляются точкой с запятой.
<HTML>
<SCRIPT>
function имя_функции(){
function значение_1с). событие( i \
Г | У
</SCRIPT>
ne_1d">/
<ТЕГ Ш-"значен
>:■>
<ТЕГ событие="имя_функции(
<ТЕГ событие="код_сценария">
</HTML>
Рис. 2.2. Различные варианты оформления обработчиков событий
122.
.Глава 2. Основы создания сценариев
Пример
<Н2 onclick = "v an x = 5; х = х + m y fu n c () ■ ">Щелкни здесь</Н2>
Обычно обработчики событий оформляются в виде функций, определения кото-
рых помещают в контейнерный тег <SCRIPT>.
В качестве примера ниже приведены два варианта оформления обработчика щелч-
ка на изображении (рис. 2.2).
1. Изображение в HTML-документе определяется, как известно, тегом <IMG>.
Файл с изображением задается атрибутом SRC. Обработчик события onclick за-
дается в примере как функция clickimageQ, которая должна быть определена
где-то в контейнере <SCRIPT>. В результате щелчка на графическом изображе-
нии из файла picture.jpg выводится окно с сообщением:
<HTML>
<SCRIPT>
function clickimageQ {
alert("Привет!")
} </script>
<IMG SRC = "pict.jpg" onclick = "clickimageQ">
</HTML>
Вариант 2:
<HTML>
<IMG SRC = "pict.jpg" onclick = "alertcnpneeT !')">
</HTML>
Если сценарий обработки события небольшой и используется в HTML-доку-
менте один раз, то целесообразно оформлять его непосредственно в виде значе-
ния атрибута-события. В других случаях предпочтителен первый вариант, то
есть оформление обработчика в виде функции.
Чтобы указать браузеру явным образом, что сценарий написан на языке Java-
Script, можно в значении атрибута-события написать префикс "javascript:". На-
пример, <IMG onclick = "javascript: а1еИ:(" Привет!")">. Если не указывать язык сце-
нария, то браузер будет подразумевать JavaScript.
2. Теперь рассмотрим еще один способ оформления обработчиков событий. Преж-
де всего, отметим, что почти для всех тегов HTML можно помимо прочих ука-
зать еще один атрибут - ID (идентификатор). Этот атрибут принимает любые
строковые значения, которые играют роль индивидуальных имен элементов
в их объектном представлении. Если атрибут ID в теге используется, то для
задания обработчика события можно не использовать атрибуты-события. Вме-
сто rr•(.i в контейнере <SCRIPT> достаточно написать определение функции
обработчика события, имя которой образуется по следующему шаблону:
значение_10. событие ()
Пример
<HTML>
<Н1 ID = "Мупеас1ег">Привет всем!</Н1>
<SCRIPT>
function Myheader.onclick()t
alert("Привет!")
I
</SCRIPT>
</HTML>
2.3. Где, что и как делают сценарии
123
СОВЕТ
Браузер, встречая в HTML-документе тег с определенным ID, создает в объектной модели
этого документа объект с таким же именем. Для этого объекта имеется метод обработки
события. Название метода совпадает с названием события, но синтаксис использования
метода требует, чтобы его название было написано в нижнем регистре. В связи с этим
я советую вам в любом случае писать название события в нижнем регистре.
Обратите внимание на следующие два обстоятельства, важные только для рас-
смотренного выше способа оформления обработчиков событий:
• Элемент HTML-документа должен быть загружен раньше, чем функция-об-
работчик события.
• Составное имя функции-обработчика события содержит название события
в нижнем регистре.
Если требуется, чтобы сценарий обработал событие независимо от того, с каким
элементом оно связано, то можно воспользоваться таким составным именем функ-
ции-обработчика:
function document.событие(){
>
Пример
function document.onclick(){
}
Приведенных выше способов обработки событий (привязки обработчиков к эле-
ментам) вполне достаточно для практических нужд разработки веб-сайтов и дру-
гих приложений. Однако следует упомянуть еще об одном способе, который при-
меним для IE версии 4.0 и старше. Он основан на использовании атрибутов FOR
и EVENT в теге <SCRIPT>.
Атрибуту FOR присваивается ссылка на объект, который должен реагировать на
событие, а атрибуту EVENT присваивается название события. В качестве ссылки
на объект обычно используется значение идентификатора объекта, то есть значе-
ние атрибута ID.
Пример
<HTML>
<SCRIPT FOR = "MYBUTTON" EVENT = "onclick" >
alertC'Bbm щелчок")
</SCRIPT>
<BUTTON ID = "MYBUTTON">Hax<MM 3flecb</BUTT0N>
</HTML>
Выражения в контейнере <SCRIPT> будут выполняться только при наступлении
события, указанного в EVENT, которое связано с объектом, указанным в FOR В при-
веденном выше примере при щелчке на кнопке (<BUTTON . . .>) будет выведено
диалоговое окно с сообщением.
Рассмотренный выше способ позволяет не использовать атрибуты-события и ука-
зания обработчиков событий в тегах элементов. Однако при этом код сценария
оказывается привязанным только к одному элементу. Чтобы использовать этот
же код для других элементов, придется повторить его в секциях сценария (кон-
тейнерах<SCRIPT>), отдельно для каждого элемента.
124
.Глава 2. Основы создания сценариев
В подразделе 2.4.3 мы изучим еще один способ назначения объектам обработчи-
ков событий - с помощью сценариев.
2.3.3. Объекты, управляемые сценариями
Мы рассмотрели, где располагаются сценарии и каким образом они могут быть
привязаны к событиям. Если событие происходит, то выполняется соответствую-
щий ему сценарий-обработчик. Кроме того, сценарий можно запустить и вне вся-
кой связи с каким бы то ни было событием. В любом случае сценарий должен что-
то с чем-то делать. Предметом деятельности сценария являются объекты окна
браузера иЕ ПЛИ юкумента, загруженного в него. Параметры элементов доку-
мента, заданные с помощью атрибутов соответствующих тегов, можно изменить. Бо-
лее тпГ(>, можно заменить одни теги другими и даже заменить весь загруженный
HTML-документ на другой. Делается это сценариями, но не напрямую с тегами и
ш<№1 ииями атрибутов (то есть с HTML-кодами), а с представляющими их объектами.
HTML-документ отображается в окне браузера. Окну браузера соответствует
объект window, a HTML-документу, загруженному в окно, соответствует объект
document. Эти объекты содержат в своем составе другие объекты. В частности,
объект document входит в состав объекта window. Элементам HTML-документа
соответствуют объекты, которые входят в состав объекта document. Все множе-
ство объектов имеет иерархическую структуру, называемую объектной моделью.
Более подробно мы рассмотрим ее в следующей главе, а сейчас остановимся на
общих вопросах, связанных с объектами.
В главе 1 мы уже встречались со встроенными объектами JavaScript и объектами,
создаваемыми пользователем. Напомним, что объект представляет собой своего
рода контейнер для хранения информации. Он характеризуется свойствами, ме-
тодами, а также событиями, на которые может реагировать. Доступ к свойствам
и методам объекта осуществляется с помощью выражений вида:
объект.свойство
объект.метод()
Объекты могут находиться в отношении вложенности (подчиненности). Объект, со-
держащий в себе другой объект, называют родительским. Объект, который содер-
жится в каком-нибудь объекте, называют дочерним по отношению к нему. Таким
образом, устанавливается иерархия. Чтобы указать конкретный объект, требуется
перечислить все содержащие его объекты начиная с объекта самого верхнкего иерар-
хического уровня, подобно тому как указывается полный путь к файлу на диске:
объект! .объект2. . . . объектМ
Если объект входит в состав другого объекта (является подобъектом другого), то
для доступа к его свойствам и методам используют следующий синтаксис:
объект!.объект2 . . . . oбъeктN. свойство
объект!.объект2. . . . объектМ.методО
Нередко ni бъект некоторого объекта называют его свойством (так сказать, слож-
ным свойством). В этом случае можно говорить, что свойства объектов бывают
трех типов:
• просто свойства (простые свойства);
• методы (свойства-функции);
• объекты (сложные свойства, имеющие свои свойства).
2.3. Где, что и как делают сценарии
125
Поскольку объект document является подобъектом объекта window, ссылка на
HTML-документ, загруженный в текущее (активное) окно браузера, будет выгля-
деть следующим образом: window. document. Объектdocumentимеетметодwrite(crpoKa),
позволяющий записать в текущий HTML-документ строку, содержащую просто
текст или теги HTML. Чтобы применить этот метод, следует записать: window,
document.write(cipoKa).
<HTML>
<Н1>Моя ЫеЬ-страница</Н1>
</HTML>
/^
window
...
document
Подобье кты"
window
<НТМ1 >
<Н1>Моя 1л1еЬ-страница</Н1>
SRC = "pict.jpg">
</HTML>
window
: document
X
images
J^
Подобьекты
winword ,
<HTML>
<Н1>Моя ИеЬ-страница</Н1>-
<MG SRC = "pic*.
<FORM>
</FORM>
</html>
window
ilocument;
Подобъектьм
winword J*
images
forms
<HTML>
<Н1>Моя ЫеЬ-страница</Н1>
<IMG SRC = "pict.jpg":
<FORM>
<INPUT TYPE = "text"ext" VALUE = "■
<BUTTON> Нажми здесь <BUTTON>
</FORM>
</HTML>
^£
window '
^ winwordj
document
images
forms
—1------
1
!
text
button
Рис. 2.З. Структуры множеств объектов для различных HTML-документов
126__________ Глава 2. Основы создания сценариев
Итак, как уже отмечалось выше, при загрузке HTML-документа в браузер созда-
ется объектная модель этого документа. Рассмотрим в общих чертах, на простых
примерах, что именно происходит. Прежде всего, создается объект окна window.
Это корневой объект, имеющий свои подобъекты, такие как location для хранения
информации об URL-адресезагруженного документа и screen для хранения данных
о возможностях экрана монитора пользователя. Затем создается объект document,
являющийся подобъектом window. Далее создаются объекты, представляющие
некоторые отдельные элементы HTML-документа, такие как объекты изображе-
ний, форм и их элементов (поля ввода, переключатели, кнопки) и др. На рис. 2.3
показано, как усложняется структура объектного представления документа с до-
бавлением новых тегов. Это, конечно, упрощенные схемы, дающие лишь самые
общие представления об объектной модели. Сведения об объектной модели игра-
ют роль своего рода путеводителя в обширном множестве объектов документа и
окна браузера. Разработчики приложений на основе сценариев и HTML всегда
имеют под рукой такой путеводитель.
В объектной модели документа объекты сгруппированы в так называемые кол-
лекции. Коллекцию можно рассматривать как промежуточный объект, который
содержит объекты собственно документа. С другой точки зрения, коллекция яв-
ляется массивом объектов, отсортированных в порядке упоминания соответству-
ющих им элементов в HTML-документе. Индексация объектов в коллекции на-
чинается с нуля. Синтаксис обращения к элементам коллекции такой же, как
к элементам массива. Коллекция даже имеет свойство length - количество всех
ее элементов. Так, например, коллекция всех объектов графических изображений
вдокументеназываетсяimages,коллекциявсехформ - forms, коллекция всех ссы-
лок - links. Это примеры так называемых частных или тематических коллекций.
Кроме них имеется коллекция всех объектов документа, которая называется all.
Один и тот же объект может входить в частную коллекцию (например, images), но
обязательно входит в коллекцию all. При этом индексы этого объекта в частной
коллекции и коллекции all могут быть различными.
Рассмотрим способы обращения к свойствам объектов документа. Общее прави-
ло заключается в том, что в ссылке должно быть упомянуто название коллекции.
Исключением из этого правила является объект формы. Далее, если речь идет
о документе, загруженном в текущее окно, то объект window можно не упоминать,
а сразу начинать с ключевого слова document. Возможны несколько способов об-
ращения к объектам документа:
• с1оситеп^коллекциял'с1_объекта;
• сЬситеп1.коллекция["1с1 объекта"];
• с!оситеп1.коллекция[индекс объекта].
Здесь id бъекта - значение атрибута ID в теге, который определяет соответствую-
щий элемент в HTML-д окументе. Величинаиндекс_объекта - целое число, указыва-
ющее порядковый номер объекта в коллекции. Первый объект в коллекции имеет
индекс 0. Если при создании HTML- документа вы не использовали атрибут ID для
некоторых элементов, то для обращения к их объектам остается только взять индексы.
Заметим, что некоторые старые теги (например, <F O R M>, <IN P U T>) имеют атрибут N A M E .
Значение этого атрибута можно использовать при обращении к объекту наравне со
значением атрибута ID. К объекту формы, кроме описанных выше способов, мож-
но обращаться по значению атрибута N A M E (имя формы), если он указан в теге
<FORM>, но не по значению атрибута ID:
2.3. Где, что и как делают сценарии_____________________________________________127
document.имя_формы
Как известно, тег формы <F O R M> является контейнерным и может содержать в себе
теги других элементов, такие как<INPUT>, <BUTTON>И др. Обращение к элементам
формы возможно через коллекцию all. Однако имеется и специфический для них
способ:
document.имя формы.elements[индекс элемента]
document.имя формы.elements[id 3neM6HTa]
document.имя_формы. тй_элемента
Здесь индекс_элемента - порядковый номер элемента формы, а не порядковый номер
в коллекции всех элементов; первый элемент имеет индекс 0. Заметим, что для Internet
Explorer вместо квадратных скобок допустимо использование и круглых скобок.
Приведенный ниже HTML-код формирует простую веб-страницу, содержащую
заголовок первого уровня, изображение, ссылку и форму с двумя элементами -
полем ввода данных и кнопкой.
<HTML>
<Н1>Моя веб-страница</Н1>
<IMG SRC = " p i c t. ] p g " >
<А HREF = "www.admiral.ru/~dunaev">CaUT автора</а>
<FORM>
«INPUT TYPE = "text" VALUE = "">
<p>
<BUTTON onclick = "ту()">Нажми здесь</ВиТТОМ>
</FORM>
</HTML>
На рис. 2.4 показано соответствие тегов элементам веб-страницы в окне браузера
объектам. Поскольку ни для одного из элементов документа не указан атрибут ID
(или NAME), обращение к объектам возможно посредством индексов. Так, напри-
мер, для обращения к объекту графического объекта (он у нас единственный)
можно использовать следующее выражение
document, images (0) // первый элемент коллекции images
Кнопка является вторым элементом формы. Чтобы обратиться к ней как к объек-
ту, необходимо указать сначала форму (единственная форма в документе есть
объект forms(O)), а затем объект этой формы (е1етепЛ5(индекс_элемента)). Други-
ми словами, достаточно записать выражение:
document.forms(e) .elementsU) // второй элемент формы
Теперь обратимся к объекту ссылки в нашем документе. Все ссылки хранятся
в коллекции links. В нашем случае коллекция links содержит лишь одну ссылку.
Следовательно, наша ссылка -элемент links( O) массива links. В итоге для обраще-
ния к ссылке в HTML-документе достаточно написать следующее выражение:
document.links(0)
Обобщая вышеизложенное, отметим, что универсальный способ обращения к объ-
ектам документа - обращение посредством коллекции all. Лично я предпочитаю
именно этот способ обращения к объектам. Однако если вы не позаботились об
атрибуте ID в тегах элементов HTML-документа, которые должны стать жертвой
ваших сценариев, то обращение к объектам через all посредством индексов, осо-
бенно в случае объемистого документа, становится проблематичным. Чтобы убе-
диться в этом, внимательно отнеситесь к следующей задаче.
Допустим, у нас есть некоторый HTML-документ. Пусть для определенности это
будет документ, рассмотренный в предыдущем примере. Интересно, какие имен-
128
Глава 2. Основы создания сценариев
е ш..\\ чшимяшллмыы&авттш
j' «Г Иi д!
Моя Web-страница
<В1ПТ(
" HTML> '
оя веб-страница</Н1>
IMG SRC='pictjpg'>
A HREF = 'www.admiral.ru/~dunaev'>CaiiTавтора</А>
<FORM>
ГГ1YPE = 'text1 VALUE = ">
>ТОМ>Нажмиздесь<ЛЗиТТ01 М>
:
Рис. 2.4. Соответствие тегов элементам веб-страницы и объектам
но теги этого документа соответствуют элементам коллекции объекта document?
Чтобы ответить на этот вопрос, я написал простой сценарий и вставил его в конце
тестируемого HTML-документа. Этот сценарий основан на использовании свой-
ства tagName, которое возвращает название тега, с помощью которого был создан
соответствующий объект. Код сценария приведен в листинге 2.
Листинг 2.1. Тестируемый HTML-код вместестестирующим сценарием
<HTML>
<Н1>Моя веб-страница</Н1>
<р>
<IMG; SRC = "pict.jpg">
<р>
<А HREF = "www. admi ral . ru/~dunaev">CauT автора</а>
<p>
<FORM>
"text" VALUE = "">
= "ту()">Нажми здесь</ВиТТОМ>
<INPUT TYPE =
<p>
<BUTTON onclick
</FORM>
<SCRIPT>
msg = ""
for(i = 0; i <docuien:. all . length; i++) {
msg += i + " " + doc u m e nt . all [i] . tagName +
"\n"
alert(msg)
2.3. Где, что и как делают сценарии
129
</SCRIPT>
</HTML>
В результате выполнения этого HTML-кода окно браузера будет выглядеть, как по-
казано на рис. 2.5. В диалоговом окне, выведенном с помощью alertQ, перечислены
теги HTML-документа. Их порядковые номера соответствуют индексам в коллекции
all. Например, объекту document.all(5) соответствует элемент HTML-документа, со-
зданный тегом <IMG>. Обратите внимание, что хотя теги <HEAD>, <TITLE> и <BODY> в
нашем документе явно не упоминаются, соответствующие им объекты присутствуют
в объектной модели этого документа и, следовательно, в коллекции all
flC \MUH ДН*1|МКНГ1>Л|»у.? ЫШ- MlItOSBH М«!ПВ|!^*[Й1«!1:5:
шшш щшщждшшщщ
Моя Web-страница
шш
' С";ЙТ Ж1
Нажми ЗХ
::\ Мой компьютер
Рис. 2.5. В диалоговом окне перечислены теги HTML-документа и их индексы в коллекции all
Теперь рассмотрим тот же пример, но добавим к основным тегам атрибуты ID,
с помощью которых можно персонифицировать соответствующие объекты. Как
и раньше, мы добавим к HTML-документу сценарий, выводящий окно с инфор-
мацией о тегах. При этом, кроме порядкового номера и названия тега, мы будем
выводить и значение атрибута ID (рис. 2.6). Чтобы получить значение атрибута
ID, необходимо воспользоваться свойством id соответствующего объекта. HTML-
код приведен в листинге 2.2.
Листинг 2.2. Тестируемый код с добавлением атрибутов ID
<HTML>
<Н1>Моя веб-страница</Н1>
<IMG ID = "myimage" SRC = "pict.jpg">
<A ID = "myref" HREF = "www.admiral.ru/~dunaev">CaUT
<FORM ID = "myform">
<INPUT ID = "myinput" TYPE = "text" VALUE ="qewe">
<p>
<BUTTON ID = "mybutton" onclick = "ту () ">Нажми
</FORM>
автора</а>
здесь</В1ЯТСШ>
продолжение
130
■Глава 2. Основы создания сценариев
Листинг 2.2 (продолжение)
<SCRIPT>
msg = ■ ■
for(i =0; i<document.all.length; i +-t \
msg+= i + " " + document.all[i].tagName +
+ "\n"
}
alert(msg)
</SCRIPT>
</HTML>
id = "+ document .all [1] . id
% СЛМам ашчмвнгьЛвмй him - ЫЙ:№Е<,!1 Ыдае! Existt
'•&ШЩ
■ie»*.:--v' *#; *: -ji
$ ъ- &
■
Моя Web-страница
Сайт
|qewe
Microsoft Internet Explore!
" HTML id -
■ -IHE-AD-a.
Л1НЕИ*
'JfiDtiVid.
4H1tdi
6 fMS id tnjniwtge %
ь Akj ■
7 FORM Id * ■
SIN PUT i, j
9Pid-
■Til- '
l :
'""T1 J Ti к. пГ.ь'- ' ~
i
Рис. 2.6. Теги HTML-документа, их индексы в коллекции all, а также значения атрибутов ID
Итак, универсальный способ обращения к объекту документа базируется на ис-
пользовании коллекции all. Однако кроме него в IE5+ и NN6 существует еще один
способ, основанный на методе getElementByldQ:
document.getElementBy Id(значение_Ю)
Обратите внимание, в каком регистре пишутся отдельные буквы этого метода.
Метод getElementById{3H34eние_Ю) позволяет обратиться к любому элементу по
значению его идентификатора - значению атрибута ID. Если несколько элемен-
тов документа имеют одинаковый ID, метод возвращает первый элемент с указан-
ным значением ID. Отсюда видно, насколько важно присваивать различным эле-
ментам уникальные значения ID.
Выше мы рассмотрели различные способы обращения к объектам. Ссылки на объ-
екты часто используются, главным образом, как промежуточный этап для досту-
па к конечным свойствам и методам. В конце концов, именно они и интересуют
нас при создании сценариев. Заметим попутно, что ссылки на объекты можно со-
хранять в переменных, которые потом можно использовать для обращения к свой-
ствам и методам.
\
\
2.4. Понятие события.
.131
В приведенном выше примере элемент изображения, созданный с помощью тега
< IMG ID = "myimage" SRC = "pict.jpg">, имеет атрибуты ID и SRC. Этим атрибутам со-
ответствуют свойства id и src объекта этого изображения. Ниже приведены при-
меры различных вариантов обращения к данным свойствам:
doc uraent.i mages (8). id // "myimage"
document. images ("myimage") . id
document.all("myimage").id
document.all.myimage.id
var x = document.all.myimage // объект
x.id // "myimage"
document.images(Q).src /* строка URL, например,
f П е:///С:/Мои%20документы/pict.jpg */
document.images("my image").src
document.al l("myimage").src
document.all.myimage.src
var x = document.all.myimage // объект
к.src /* строка URL, например,
file: ///С: /Мои%20документы/р1ct . jpg */
Объекты документа имеют много интересных и полезных свойств. Одни из них
доступны только для чтения и могут использоваться в сценариях в качестве ин-
формации для выполнения каких-то действий. Другие свойства можно изменять,
то есть присваивать им иные значения (например, для изменения рисунка доста-
точно изменить значение свойства src). В следующей главе мы рассмотрим, для
чего служат конкретные свойства и методы.
2.4. Понятие события
Каждое действие пользователя (нажатие на клавишу, щелчок кнопкой мыши
и т. п.) формирует некоторое событие, то есть сообщение о произошедшем. Опе-
рационная система (например, Windows) анализирует это сообщение, чтобы уз-
нать, откуда оно взялось и что с ним делать дальше. Если, например, пользователь
нажал на кнопку мыши в момент, когда ее указатель находился над окном браузе-
ра, то Windows пошлет браузеру сообщение о том, какая кнопка мыши была на-
жата, какие при этом клавиши клавиатуры удерживаются, а также координаты
указателя мыши. Если пользователь щелкнул где-то на панели инструментов,
браузер отработает это сообщение сам. Если же в момент щелчка указатель нахо-
дился на «территории» HTML-документа, то браузер пропустит сообщение о со-
бытии через свою объектную модель. В HTML-коде документа может находиться
сценарий для обработки этого события. Инструкции этого сценария направляют-
ся к браузеру опять же через объектную модель.
2.4.1. Свойства события
Сообщение о событии формируется в виде объекта, то есть контейнера для хране-
ния информации. Как только объект события создан, браузер присваивает значе-
ния его свойствам. Например, объект, соответствующий щелчку мышью, содер-
жит координаты указателя мыши, а также сведения о том, какая кнопка была
нажата. Кроме того, объект события в одном из своих свойств содержит ссылку
на элемент, с которым связано данное событие (например, на кнопку, изображе-
ние, поле ввода и т. п.).
132_________________________________ Глава 2. Основы создания сценариев
Объект события хранится в памяти столько времени, сколько необходимо сцена-
рию для его обработки. Пока выполняется обработчик события, объект события
вместе со своими свойствами доступен сценарию, находящемуся в памяти брау-
зера. Как только обработчик события завершит работу, объект события становит-
ся пустым (возвращается в исходное состояние).
В любой момент времени существует не более одного объекта события. Все ини-
циированные события заносятся операционной системой в буфер и выполняют-
ся последовательно в том порядке, в каком они туда попали.
В объектной модели имеется объект event, являющийся под объектом объекта окна
window. Он содержит информацию о том, какое событие произошло, какой эле-
мент должен на него реагировать, и ряд других характеристик. Объект event можно
использовать в сценариях для документов с большим количеством интерактивных эле-
ментов, для выяснения причин неправильного отображения веб-страниц. Далее мы рас-
смотрим некоторые наиболее часто используемые свойства объекта event.
В качестве примера ниже приводится HTML-документ, не содержащий видимых
элементов. Щелчок мышью или нажатие клавиши на клавиатуре выводит диало-
говое окно со значениями некоторых свойств объекта event (рис. 2.7). Так, свой-
ства х и у содержат значения координат указателя мыши в момент щелчка, от-
считанные в данном случае относительно окна браузера. Свойство keyCode возвращает
код нажатой клавиши с символам в системе Unicode. Для латинских и цифровых
символов кодировки Unicode и ASCII совпадают. При нажатии навигационных кла-
виш и клавиш дополнительной цифровой клавиатуры keyCode возвращает null. По
существу, keyCode - это код соответствующего символа, а не код клавиши. Для фик-
сации самой клавиши используются события onkeydown и onkeyup, а не on keypress.
Рис. 2.7. Щелчок в окне браузера выводит сообщение о координатах указателя
мыши и нажатой клавише
<HTML>
<BODY ID = " t e s t" >■
</BODY>
<SCRIPT>
function test .onclickC) {
var st
str += "x = " + window.event.x + "\n"
2.4. Понятие события__________________________________________________________133
str += "у = " + window.event.у + "\n"
str += "Вы нажали клавишу:
if (window.event.shiftKey){str += "Shift"}
if (window.event.ctrlKey){str *= "Ctrl"}
if (window.event.altKey){str += "Alt"}
alert(str)
)
function test .onkeypressO{
IеПСКад клавиши: ' + window.event.keyCode)
</SCRIPT>
</HTML>
В IE версии 4.0 и старше среди прочих часто оказываются полезными свойства
button и srcElement.
Свойство button возвращает целочисленное значение, указывающее, какая кноп-
ка или кнопки мыши были нажаты (табл. 2.1).
Таблица 2.1. Значения свойства button_______________________________________________
Значение_____________Описание____________
Кнопки не нажаты
j Нажата левая
? Нажата правая
Одновременно нажаты левая и правая
4 Нажата средняя
5 Нажаты левая и средняя
Нажаты правая и средняя
7____________________Все три кнопки нажаты_________________________________________
Свойство srcElement возвращает ссылку на объект элемента HTML-документа, кото-
рый инициировал событие. При получении такой ссылки можно узнать или изме-
нить значения свойств этого объекта и применить к нему любой из его методов.
Приведенный ниже HTML-код формирует документ, содержащий две кнопки
(рис. 2.8). Сценарий обрабатывает событие onclick - щелчок мышью. Он привя-
зан к элементу, заданному тегом <BODY>. Щелкнуть можно на любой кнопке, а так-
же на незанятом месте окна браузера (рис. 2.9). В любом случае событие onclick
будет обработано сценарием (функцией changetextQ), поскольку кнопки заданы
внутри тега <BODY>. Сценарий заменит текст, который находится внутри тега эле-
мента, инициировавшего событие. Какой именно элемент инициировал событие,
определяется с помощью свойства srcElement, а замена текста осуществляется по-
средством свойства innerText. Об этом свойстве мы еще поговорим отдельно. Об-
ратите внимание, что результат зависит от того, где находился указатель мыши
в момент щелчка.
<HTML>
<BODY onclick = "changetext()">
<button>nepsa« KHonKa</button>
<Ьи11оп>Вторая KHonKa</button>
</BODY>
134
Глава 2. Основы создания сценариев
<SCRIPT>
function changetextO{
х = window.event.srcElement
x.innerText = "Уже щелкнули'
}
</SCRIPT>
</HTML >
// ссылка на объект
// замена текста
'Ш Мои докаменгы\«се1етеЫ.Ыт - Micro..
шш
ГШ
3
Лё#В8я кнопка Щ Уже йачЖи-'!
4-CJ f Р*1*1 I'
Рис. 2.8. Результат щелчка на второй кнопке
ШС:\Моидокаменгы\81се1ешеп{.Ыт - Micio... |
£айп Правка Ция : й*йр»тэг Capes*:" £^**1
■■:■■» ■■ ■ Уг. ™
.uv'-e^v
■
j
Уже нажали
■
Mcftt^MnitlUfelt ?;
Рис. 2.9. Результат щелчка на свободном месте
Чтобы на щелчок реагировали только кнопки, приведенный выше код необходи-
мо несколько модифицировать:
<HTML>
<BODY>
<button onclick = "chaigetextO "'Первая кнопка</Ьииоп>
<button onclick = "changetext() -Вторая KHOnKa</butt0n>
</BODY>
<SCRIPT>
function changetextO {
x = window.event.srcElement // ссылка на объект
x.innerText = "Уж щелкнули" // замена текста
}
</SCRIPT>
</HTML>
2.4. Понятие события_________________________________________________________135
Объект event имеет несколько свойств, содержащих координаты в пикселах ука-
зателя мыши в момент возникновения события, связанного с мышью. Многооб-
разие типов этих координат обусловлено различиями в начале их отсчета. Рас-
смотрим эти свойства по порядку.
• screenX, screenY - координаты указателя мыши относительно левого верхнего
угла экрана. Например, если экран монитора находится в режиме 800x600, то
координаты правого нижнего угла экрана будут равны 800 и 600 пикселов со-
ответственно.
• clientX, clientY - координаты указателя мыши относительно области клиента
(рабочей области браузера), в которой находится HTML-документ, без учета
рамок, полос прокрутки, меню и т. п.
• offsetX, offsetY - координаты указателя мыши относительно верхнего левого
1 угла элемента, инициировавшего событие.
• х, у - координаты указателя мыши относительно верхнего левого угла первого
абсолютно или относительно позиционированного контейнера, в котором на-
ходится элемент, инициировавший событие. Позиционированный контейнер -
этоэлемент, заданныйкаким-нибудьконтейнернымтегом (например, <BODY>,
<DIV>, <H1>) с атрибутом STYLE, для которого указано свойство position. Если
такого контейнера нет, то свойства х и у возвращают координаты относитель-
но главного документа, такие же, как и clientX, clientY.
Чтобы лучше разобраться в этих свойствах, создайте тестовый HTML-документ,
как показано ниже, и поэкспериментируйте с ним, щелкая мышью в различных
точках (рис. 2.10). Этот документ содержит два контейнера, созданных с помощью
позиционированных различным образом тегов <DIV>. Первый контейнер пози-
ционирован абсолютно, а второй, вложенный в него, - относительно. Сценарий
определяет значения координат различных типов и отображает их в диалоговом окне.
Рис. 2.10. При щелчке выводится окно с различными типами координат указателя мыши
136
_Глава 2. Основы создания сценариев
<НТМ1_>
<BODY ID = "Mybody"
<DIV ID = "DIV1" STYLE = "position:absolute;left:50 ibsolute: left: 5S; top:50; width:30lG;
height: 10 0; background-color:blue">
<DIV ID = "DIV1" STYLE = "posit f П relative; left:50; top:25 ■; width:200;
height: 5 0; background-color:yellow">
</DIV>
-/DIV>
<BODY>
■<SCRIPT>
function doc inient. Onclick () {
var e = window . event Цссылка на объект event
var str = "ID = " + e. srcElement.i.4i; id +
"\n screenX= " + e. sc:reenX +", screenY= + e.screenY
"\n clientX=" + e.clientX + . clientY=" - - Y +
"\n offsetX=" + e. offsetX + " . offsetY= ' + e. offsetY i
"\n offsetX=" + e. offsetX + " , offsetY=" + e. offsetY +
"\|i 1 + e. x + " , y=" + e • У
alert(str)
}
</SCRIPT>
</HTML>
Нам требовалось, чтобы на щелчок реагировал любой объект документа, поэтому
мы не стали привязывать обработчик события индивидуально ко всем элемен-
там, а вместо этого назвали функцию-обработчик составным именем document.
onclick().
Обратите внимание на использование свойства srcElement для получения значе-
ния id элемента, инициировавшего (или, как еще говорят, получившего) событие.
У объекта event имеется изменяемое свойство returnValue (возвращаемое значе-
ние). С его помощью можно отменять действия, принятые по умолчанию. Для
этого достаточно присвоить ему значение false. Например, щелчок на ссылке по
умолчанию означает переход по указанному адресу. Однако вы можете отменить
это действие или запросить у пользователя подтверждение перехода.
Пример
<НТМ1>
<А ID = "myref " HREF = "www.chat. ги">Переход на chat.ru</A>
<SCRIPT>
function myref.onclickO{
ret = сnfirm ("Вы действительно хотите перейти?")
if (Iret)
window. event . returnValue = false
}
</SCRIPT>
</HTML>
Здесь метод confirm() выводит диалоговое окно. Если пользователь не подтвердил
переход, то confirm() возвращает false, а свойству returnValue тоже присваивается
false. В результате переход по ссылке не произойдет.
Нередко требуется разместить в документе элемент, который внешне выглядит,
как обычная ссылка (при наведении указателя мыши его вид изменяется), но щел-
чок должен приводить не к переходу на другой документ, а просто к выполнению
некоторого сценария. Этого можно добиться несколькими способами. Один из
них основан на использовании свойства returnValue:
2.4. Понятие события.
.137
<HTML>
<А ID = "myref HREF = "">Щелкни здесь</А>
<SCRIPT>
function myref.onclick(){
alert("5bm щелчок на ссылке")
window.event.returnValue = false
}
</SCRIPT>
</HTML>
Если бы мы не использовали оператор window.eventreturnValue = false, то из-за не-
указанного в HREF адреса перехода по ссылке после выполнения обработчика со-
бытия открылось бы новое окно браузера с содержимым текущей папки.
Другой способ отключить действие щелчка на ссылке, принятое по умолчанию,
заключается в том, чтобы в значении атрибута HREF написать Т!, как в следую-
щем примере:
<А ID = "myref" HREF = "#" oncl ick = "myclick () ">Щелкни здесь</А>
2.4.2. Прохождение событий
Как уже отмечалось выше, для элементов документа можно указать события, на
которые они должны реагировать, и обработчики этих событий. Например, если
требуется, чтобы элемент реагировал на щелчок кнопкой мыши выполнением не-
которой функции myfunc(),то в тег этого элемента следует вставить запись: onclick =
"myfuncO". Однако нам известно, что большинство тегов в HTML являются кон-
тейнерными и, следовательно, могут содержать в себе другие теги. При этом мо-
жет оказаться так, что одно и то же событие будет обозначено в различных, но
вложенных друг в друга тегах. Что произойдет при наступлении этого события?
Как оно распространяется по объектам и как оно перехватывается элементами
документа?
Рассмотрим в качестве примера следующий HTML-документ, содержащий един-
ственную кнопку:
<НТМ1 >
<BODY _ onclick = "alert('Щелчок на body')">
<BUTTON onclick = "alert('Щелчок на button') ">Нажми здесь</ВиТТОМ>
</BODY>
</HTML>
Особенность этого документа в том, что одно и то же событие (с различными об-
работчиками) привязано к различным тегам, один из которых содержит в себе
другой (<BUTTON> содержится в <BODY>). Щелчок на кнопке приведет к выполне-
нию сначала обработчика щелчка для кнопки, а затем обработчика для <BODY>.
Если щелкнуть где-нибудь в рабочей области окна браузера вне кнопки, то срабо-
тает только обработчик для <BODY>. Ниже мы рассмотрим, как можно избавиться
от этого нежелательного эффекта.
Модели прохождения событий в Internet Explorer и Netscape Navigator отлича-
ются друг от друга. Более того, имеются различия между этими моделями для
различных версий одного и того же браузера даже начиная с IE4 и NN4.
Модель прохождения событий в IE4 называется «всплыванием событий». Собы-
тия, подобно воздушным пузырькам в воде, как бы всплывают от целевого объек-
138.
.Глава 2. Основы создания сценариев
та самого нижнего уровня вверх по иерархии объектов. В рассмотренном выше
примере событие onclick «всплывает» от объекта кнопки к объекту тела докумен-
та. В NN4 модель прохождения событий называют захватом событий. Согласно
этой модели событие распространяется, наоборот, от самого верхнего в иерархии
объекта window к целевому объекту. Чтобы события обрабатывались на уровне
текущих объектов, требуется включить для них режим захвата. Это делается с по-
мощью специального метода captureEven ■ tQ. В IE4 для управления всплыванием
событий используют свойство прерывания вс плыванияcancelBubble.
В современных браузерах IE5.5+ и NN6 реализована модель, объединяющая в себе
ивпчлывание, и захват событий. Всплывание организовано как в IE4+, а захват -
как в NN4. По умолчанию событие всплывает, однако вы можете включить его
захват. Тогда событие сначала достигает целевого объекта, а затем начинает всплы-
вать в обратном направлении.
ВIE4+ управлять прохождением событий можно с помощью свойства cancelBubble
объекта события event. Когда в документе (на веб-странице) происходит какое-
либо событие, объект event первым получает информацию о нем и решает, какому
элементу его передать. Например, когда объект event получает событие onclick
(щелчок кнопкой мыши), он выясняет, какой элемент находился в тот момент
под указателем мыши. Если там было два элемента (один над другим), то выбира-
ется элемент с наименьшим z-индексом, то есть нижний. Напомню, что z-index
является одним из параметров позиционирования элементов с помощью таблиц
стилей. Установив элемент, связанный с событием, объект event ищет обработчик
этого события и выполняет его. Например, если элемент имеет уникальное имя
(ID) Myelement, то ищется функция Myelement.onclickQ. Далее объект event выясня-
ет, какой объект является контейнером для данного элемента. Если таковой име-
ется, то событие переходит внутрь этого контейнера. Если, например, контейне-
ром является объект, созданный тегом <DIV> с именем Mydiv, то будет предпринята
попытка выполнить функцию Mydiv.ondickQ. Этот процесс продолжается, пока
имеются доступные контейнеры. Например, последним доступным контейнером
может оказаться документ (объект document), и тогда объект event ищет функцию
documentonclickQ.
Чтобы определить главного виновника события (объект, инициировавший собы-
тие), используется свойство srcElement. Мы уже говорили о нем выше. Например,
может потребоваться одинаковая реакция на одно и то же событие всех элементов,
за исключением некоторых. В таких случаях для элементов, на которых процесс
всплывания события должен закончиться, создаются специальные функции-об-
работчики. В этих функциях помимо прочего должно быть выражение присвое-
ния свойству cancelBubble значения true, чтобы прервать дальнейшее прохожде-
ние события. Например, если мы хотим разорвать цепную передачу события на
элементе с именем Myelement, необходимо создать для него функцию-обработчик
события следующего вида:
function Myelement. onclickQ{
// код обработки события onclick
window.event. cancelBubble = true
}
Делать такое в функции-обработчике для объекта document бессмысленно, по-
скольку выше событие все равно всплыть не может, а отменить реакцию на это
событие элемента-инициатора (первого звена цепочки) невозможно.
2.4. Понятие события___________________________________________________________139
В начале этого подраздела мы уже рассматривали пример HTML-документа
с кнопкой, вложенной в контейнер <BODY>:
<HTML>
<BODY onclick = "alert('Щелчок на body')">
<BUTTON onclick = "alert ('Щел чок на button')">Н аж миздесь</В " >Нажми здесь</ВиТТ0Н>
</BODY>
</HTML>
Особенность этого примера в том, что если пользователь щелкнет на кнопке, сра-
ботает обработчик не только кнопки, но и тела документа (элемента, заданного
тегом <BODY>. Если мы хотим это предотвратить, то можно переписать код следу-
ющим образом:
<HTML>
<BODY onclick = "alert('Щелчок на body')">
<BUTTON onclick = "alert('Щелчок на button');
window.event .cancelBubble = true ">Нажми здесь</В11ТТОМ>
</BODY>
</HTML>
Возможен также и такой вариант кода:
<HTML='
<BODY onclick = "alert('Щелчок на body')">
<BUTTON ID = "МуЬиГ>Нажми здесь</В1ЛТОМ>
</BODY>
<SCRIPT>
function Mybut.onclick() {
alert('Щелчок на button1)
window.event.cancelBubble = true // прекратить всплывание события
I
</SCRIPT>
</HTML>
2.4.3. Указание обработчика события в сценарии
Об обработчиках событий достаточно подробно рассказывалось в предыдущем
разделе. Там так или иначе обработчики событий привязывались к специальным
атрибутам HTML-тегов - ID или атрибутам-событиям - FOR и EVENT. Сцена-
рий-обработчик выполнялся, если возникало событие, связанное с элементом, для
которого был указан этот обработчик. Вместе с тем имеется возможность вызы-
вать обработчик & сценарии просто как метод объекта. Он будет выполняться так
же, как и при возникновении соответствующего события.
Пример
<HTML>
<BUTTON ID="Mybutton" onclick = "butclick() ">Нажми здесь</ВиТТОМ>
<SCRIPT>
document .all.Mybut ton. onclickO // вызов обработчика
function butclick(){
alert('Щелчок на кнопке Mybutton')
I
</SCRIPT>
</HTML>
В данном случае сразу же после загрузки документа в браузер вызывается об-
работчик события onclick, связанного с кнопкой. Этот обработчик - функция
butclick(). Обратите внимание, что обработчик выполнится несмотря на то, что
140.
.Глава 2. Основы создания сценариев
самого щелчка не было. Заметим, что выражение вызова метода (в данном случае
это ■ onctickQ) должно записываться только строчными буквами.
Следует иметь в виду, что рассмотренный выше способ использования обработ-
чика как метода существенно отличается от эмуляции действия для события.
Например, допустим, что имеется форма с несколькими полями для ввода дан-
ных, одно из которых имеет обработчик события onfocus (активизация поля). Что-
бы поле активизировалось, необходимо щелкнуть на нем мышью или перейти
к нему с помощью клавиатуры. При этом сработает обработчик события onfocus.
Однако даже если поле не активно, обработчик события onfocus все равно можно
вызвать, но при этом поле не активизируется:
document.имя_формы.имя_поля.onfocusO
Благодаря возможности использовать обработчик события в качестве метода объ-
екта можно задавать обработчик в виде функции, имеющей название, совпадаю-
щее с названием события:
<BODY onload = "onloadQ"
</BODY>
<SCRIPT>
function onload() {
</SCRIPT>
</HTML>
2.5. Работа с окнами и фреймами
Как известно, HTML-документ загружается в окно браузера. Можно открыть не-
сколько таких окон и загрузить в них различные документы, а также разбить одно
окно на несколько прямоугольных областей, называемых фреймами. В каждый
такой фрейм можно загрузить отдельный документ. При этом существует воз-
можность организовать взаимодействие между фреймами - например, с помощью
действий в одном фрейме управлять содержимым другого фрейма.
Загрузка в браузер HTML-документа приводит к тому, что в браузере создается
иерархическая объектная модель этого документа, на самом верхнем уровне ко-
торой находится объект window. Доступ к свойствам и методам данного объекта
имеет уже знакомый вам синтаксис:
window.свойство
wi ndow.методе[параметры])
У объекта window имеется синоним self, используемый при обращении к окну, со-
держащему текущий документ. Иначе говоря, идентификатор self применяется
в многооконных или многофреймовых системах, когда требуется указать окно
с документом, в котором находится данный сценарий. Его рекомендуется встав-
лять, чтобы не запутаться. При запуске сценария в ссылках на объекты только
текущего документа (типичная ситуация) идентификаторы window и self можно
опускать.
2.5. Работа с окнами и фреймами
141
У объекта window есть ряд п о до бъектов. Мы уже рассматривали некоторые свой-
ства объекта события event, который является подобъектом объекта window. Дру-
гой объект, location, содержит информацию, полезную для работы в сети и для
создания ссылок в документах с многофреймовой структурой. Кроме этого, свой-
ство href объекта location используется для загрузки документа в текущее окно:
window, location . href = "иК1_-адрес_документа"
Данный способ загрузки документов в текущее окно браузера доступен во всех
версиях IE и NN. В IE можно использовать также и метод navigateQ:
window.navi gate("URL-aflpec_flOKyMeHTa")
2.5.1. Создание новых окон
Главное окно браузера создается не с помощью сценариев, а автоматически, когда
пользователь запускает браузер, а также при открытии документа с определен-
ным URL-адресом или другого файла. В HTML открыть документ в новом окне
можно с помощью атрибута TARGET тега ссылки <А HREF =....>. Например, <А HREF
= "http://www.rambler.ru" TARGET = "newWindow"> Rumbler </A>.
С помощью сценария можно создать любое количество окон. Для этого применя-
ется метод ореп():
wi ndow.open([параметры])
Этому методу передаются следующие необязательные параметры:
• адрес документа, который нужно загрузить в создаваемое окно;
• имя окна (как имя переменной);
• строка описания свойств окна (features).
В строке свойств записываются пары свойство=значение, которые отделяются друг
от друга запятыми. В табл. 2.2 приведен список свойств окна, передаваемых
в строке features. Значения yes и по можно заменить числовыми эквивалентами
1 и 0 соответственно.
Таблица 2.2. Свойства окна, передаваемые в строке features
Свойство
Значения
Описание
channel mode
yes, no, l,0
Показывает элементы управления Channel
directories
yes, no, 1,0
Включает кнопки каталога
fullscreen
yes, no, 1,0
Полностью разворачивает окно
height
Число
Высота окна в пикселах
left
Число
Положение по горизонтали относительно левого края экрана в пикселах
location
yes, no, 1, 0
Текстовое поле Address
menubar
yes, no, 1,0
Стандартные меню браузера
resizeable
yes, no, 1,0
Может ли пользователь изменять размер окна
scrollbars
yes, no, 1,0
Горизонтальная и вертикальная полосы прокрутки
status
yes, no, 1,0
Стандартная строка состояния ^ продолжение
142____________________________________________________Глава 2. Основы создания сценариев
Таблица 2.2 (продолжение)______________
Свойство Значения Описание
toolbar yes, no, \, 0 Включает панели инструментов браузера
top Число Положение по вертикали относительно верхнего края экрана
в пикселах
width___________Число________Ширина окна в пикселах________________________________
Примеры
window.open("mypage.htm","NewWin", "height=150, width=300")
wi ndow.open("mypage.htm")
strfeatures = "top=100,left=15,width=400, height=200, location=no,
menubar=no"
window.open ("www.admiral.ru/~dunaev", "Сам себе веб-дизайнер".
strfeatures)
Вместо третьего параметра (строки features) можно использовать значение true.
В этом случае указанный документ загружается в уже существующее окно, вы-
тесняя предыдущий. Например, window.open("mypage.htm","NewWin", true).
Метод window.open () возвращает ссылку на объект окна. Эту ссылку можно сохра-
нить в переменной, чтобы потом использовать, например при закрытии окна.
Для закрытия окна служит метод dos | Однако выражения window.closeQ или
self.close () закрывают главное окно, а не дополнительное, которое вы создали ме-
тодом ореп(). В этом случае как раз и необходима ссылка на созданное окно. Эту
ссылку следует сохранить в глобальной переменной, чтобы иметь доступ к ней до
тех пор, пока главный документ загружен в браузер. Вот пример:
var objwin = wi ndow. open ("mypage. htm", "Моя страница")
objwin.close()
Метод Window.open■[) открывает новое независимое окно как экземпляр браузера.
В этом случае при закрытии главного окна браузера новое окно остается откры-
тым. Независимые окна называют еще немодальными (modalless). Однако можно
создать и так называемое модальное окно. Пока открыто модальное окно, пользо-
ватель не может обратиться к другим окнам, в том числе и к главному. Так обыч-
но работают стандартные диалоговые окна. Например, окна, создаваемые метода-
ми а(:(), prompt() и conf irmQ, являются модальными. В модальное окно можно
загрузить любой документ.
Для создания модального окна используется метод showModalDialogQ. Так же, как
и метод open Q, он принимает в качестве параметров адрес документа (файла), имя
окна и строку свойств. Однако формат этой строки другой. В частности, парамет-
ры в строке разделяются точкой с запятой, размеры окна и координаты его верх-
него левого угла требуют указания единиц измерения (например, рх - пикселы).
Кроме того, этот метод не возвращает ссылку на объект окна, поскольку она не
нужна для модального окна.
В табл. 2.3 приведен список свойств окна, созданного методом showModalDialogQ,
передаваемых в строке features.
2.5. Работа с окнами и фреймами
143
Таблица 2.3. Свойства окна, созданного методом showModalDialogQ
Свойство
Значения
Описание
order
thick, thin
Размер рамки вокруг окна (толстая/тонкая)
center
yes, no (1, 0)
Выравнивание окна по центру главного
dialogHeight
Число + единицы измерения
Высота окна
dilalogLeft
Число + единицы измерения
Горизонтальная координата
dialogTop
Число + единицы измерения
Вертикальная координата
dialogWidth
Число + единицы измерения
Ш ири окна
font
Строка таблицы стилей
Стиль, определенный по умолчанию для окна
font-family
Строка таблицы стилей
Вид шрифта, определенный по умолчанию для окна
font-size
Строка таблицы стилей
Размер шрифта, определенный по умолчанию для окна
font-style
Строка таблицы стилей
Тип шрифта, определенный по умолчанию для окна
font-variant
Строка таблицы стилей
Вариант шрифта (обычный/курсив), определенный по умолчанию для окна
font-weight
Строка таблицы стилей
Толщина шрифта, определенная по умолчанию для окна
help maximize
yes, no, 1, О yes, no, 1, 0
Включение кнопки Help в верхнюю панель ' Включение кнопки Maximize в верхнюю панель
minimize
yes, no, 1,0
Включение кнопки Minimize в верхнюю панель
Пример
<HTML>
<BUTTON onclick
<BUTTON onclick
<SCRIPT>
var newWindow
= "return OpenWinlO ">0ткрыть окно 1 </BUTTON>
= "return OpenWin2 ( )" > 0 т кры ть окно 2 </B U T T O N>
// глобальная переменная для ссылки на окно
function OpenWinl(){ // открытие 1-го окна
window. status = "Первое окно" // статусная строка главного окна
strfeatures= "top=100, lett=50,width=300,height=270,toolbar=no"
window.open (" 1. htm","winl",strfeatures)
I
function OpenWin2(){
window. status = "Второе окно
// открытие 2-го модального окна
// статусная строка главного окна
strfeatures = "dialogWidth=500px;dialogHeight=320px , border=thin ; help=no"
window.showModalDialog("2htm","win2", mn* strfeatures)
function CloseWinl() {
if (newWindow) {
newWindow .close()
// закрытие 1-го окна
// если 1-е окно открыто
// закрыть 1-е окно
144.
4Глава 2. Основы создания сценариев,
newWindow = null // очистить ссылку на 1-е окно
window.status = ""
}
</SCRIPT>
</HTML >
2.5.2. Фреймы
Фрейм представляет собой прямоугольную область окна браузера, в которую мож-
но загрузить HTML-документ. Разбиение окна на фреймы происходитс помощью
HTML-кода, содержащегося в отдельном HTML-файле, который называется ус-
тановочным. Установочный файл содержит только теги разметки фреймов, то есть
их относительное расположение, размеры, ссылки на загружаемые в них доку-
менты и другие параметры фреймов. В нем не должны присутствовать теги дру-
гих элементов и текстовая информация, за исключением разве что тегов <МЕТА>.
В установочном файле можно написать сценарий, создающий фреймовую струк-
туру документа.
Напомним, что разбиение окна браузера на несколько фреймов обычно произво-
дится с помощью тега <FRAMESET>. Внутрь этого тега вставляются теги <FRAME>
с атрибутами, указывающими имя фрейма и адрес HTML-документа, который бу-
дет отображаться в этом фрейме. В следующем примере создается два фрейма,
расположенные друг над другом:
<FRAMESET ROWS="30%,70%"
<FRAME 5ИС="документ1.Шт" NAME="framel">
<FRAME 5КС="документ2.Шт" NAME="framel">
</FRAMESET>
</HTML>
Это так называемое вертикальное расположение фреймов. Если вместо атрибута
R O W S в теге^<FRAMESET>использовать атрибут COLS, то фреймы будут расположе-
ны горизонтально: второй фрейм находится справа от первого. Используя вложе-
ние тега <FRAMESET>, можно разбить уже имеющийся фрейм на другие два фрей-
ма и т. д.
Отношения между фреймами и главным окном
При разбиении окна на два фрейма в объектной модели браузера возникает иерар-
хия объектов, в которой главное окно браузера представляется в виде главного,
родительского фрейма, а созданные два фрейма являются дочерними фреймами,
или, иначе, фреймами-потомками. При разбиении любого из этих фреймов на
следующие два фрейма последние являются дочерними для исходного. Итак, меж-
ду фреймами возникает отношение родители-потомки (родители-дочки).
При запуске браузера объект главного окна window формируется автоматически.
Если в это окно загружается документ с фреймовой структурой, то главное окно
получает статус родительского фрейма по отношению ко всем остальным. С дру-
гой стороны, каждый тег<FRAME> внутри контейнера <FRAMESET> создает свой соб-
ственный объектwindow,вкоторый загружается соответствующийдокумент. Каж-
дому из фреймов соответствует свой объект document. С точки зрения объекта
2.5. Работа с окнами и фреймами
145
document ему соответствует единственный контейнер - фрейм. Хотя родитель-
ский объект и не виден пользователю, он все равно присутствует в объектной мо-
дели.
window
frame 1
frame2
Документ!
Документ2
Рис. 2.11. Родительское окно и два фрейма
Итак, в вершине иерархии находится окно браузера window. Оно поделено на два
фрейма с именами, например framel и frame2. Объект window является родитель-
ским по отношению к дочерним framel и frame2 (рис. 2.1 1). Для ссылки на роди-
тельское окно используется ключевое слово parent.
Допустим, пользователь активизирует некоторую ссылку в первом фрейме, но
соответствующий документ должен загрузиться не в этот же фрейм, а в другой.
Для решения этой задачи необходимо рассмотреть три случая:
• главное окно получает доступ к фрейму-потомку;
• фрейм-потомок получает доступ к родительскому (главному) окну;
* фрейм-потомок получает доступ к другому фрейму-потомку.
Между объектом window и объектами framel и frame2 существует прямая связь
родитель-потомок. Поэтому если вы пишете сценарий в установочном файле,
создающем эти фреймы, то к фреймам можно обращаться по имени, как это пока-
зано на рис. 2.12.
framel ..-
window
frame2
Т/^
framel
frame2
Документ!
^_____I____
J С.
Документ^
J
Рис. 2.12. Обращение к фреймам по имени
Иногда может потребоваться получить доступ к родительскому окну. Например,
это бывает необходимо, если вы хотите при следующем переходе убрать все фрей-
146
Глава 2, Основы создания сценариев
мы. Удаление фреймов означает лишь загрузку нового документа вместо содер-
жащего фреймы - в рассматриваемом случае загрузку документа в родительское
окно. Это можно сделать с помощью доступа к родительскому окну на основе свой-
ства parent (рис. 2.13). Чтобы загрузить новый документ, следует использовать
объект location из родительского окна (заметим, что каждый фрейм имеет соб-
ственный объект location): требуется внести в location.href родительского окна
новый URL-адрес. Таким образом, чтобы загрузить новый документ в родитель-
ское окно, требуется записать в сценарии следующее:
parent.location.href="иг1-адрес_документа"
,•**
window
parent
framel
frame2
Документ!
J [
Документ2
2
Рис. 2.13. Доступ к родительскому окну на основе свойства parent
Наконец, довольно часто необходимо решать задачу обеспечения доступа из од-
ного фрейма-потомка кдругому (рис. 2.1 4 ). Например, находясь в одном фрейме-
потомке, можно записать что-нибудь в другой фрейм-потомок. Однако между
фреймами-потомками не существует прямой связи. Поэтому мы не можем просто
вызвать фрейм frarne2 по имени, находясь во фрейме framel. Фрейм framel ничего
не знает о frarneZ, но frame2 существует с точки зрения родительского окна. По
этойпричинемыдолжнысначалаобратитьсякродительскомуокну, затем - кframe2,
и лишь потом к объекту document, который разместился во втором фрейме:
parent. frame2 .document. wri 1е("Привет от первого фрейма! »>
window
framel
frame2
•-._.<
•"fern, frame?.
_.*
Документ
^------------------------------------------------------------'
Документ2
Рис. 2.14. Обеспечение доступа из одного фрейма-потомка к другому
Рассмотрим, как можно изменить элемент в одном фрейме из другого. При щелч-
ке на тексте в правом фрейме в левом изменяется один из текстовых элементов.
2.5. Работа с окнами и фреймами.
.147
Ниже показаны HTML-коды соответственно для левого и правого фреймов, а так-
же порождаемый ими внешний вид страницы (рис. 2.15).
Документ в левом фрейме с именем LEFT:
<HTML>
Один<В1?>
Два
<Н1 ID = "ХХХ">Три</Н1>
</HTML>
Документ в правом фрейме:
<HTML>
<5CRIPT>
function changeQ {
parent.LEFT.document.all.XXX.innerText = "Ура!"
I
</SCRIPT>
<H1 onclick = "changeO: ■ ">Щелкни здесь</Н1>
</HTML>
г
Один
Два
Три
_________:i - ■■■'■___________.Li_______■ "< - ::______________________________- "■ -■■_______________________;_______- ■"■ ■________
Щелкни здесь
Рис. 2.15. Изменение элемента в одном фрейме из другого
В теле функции c hangeQ, которая делает нужные изменения, происходит обраще-
ние к левому фрейму с именем L E F T (задается в установочном HTML-файле) че-
рез parent. Далее doc ument.all.XXX обеспечивает доступ к элементу с идентифика-
тором "XXX" (в примере это заголовок 1-го уровня). Здесь a ll— коллекция всех
элементов документа. Собственно изменение элемента происходит за счет при-
своения значения свойству innerText (в примере это слово "Ура!").
Обратите внимание, что изменения в одном фрейме по событию в другом проис-
ходят без перезагрузки HTML-документа. Для изменения элементов можно ис-
пользовать, кроме innerText, свойства outerText, innerHTML и outerHTML О них еще
будет рассказано в подразделе 2.6.3. Выбор свойства зависит от того, что именно
и насколько вы хотите изменить.
Описанным выше способом вы можете организовать, например, такой сценарий:
щелчок на миниатюре (маленьком изображении) в одном фрейме выводит в нем
же полномасштабное изображение, а в другом - краткое описание.
Фреймы удобно использовать при создании навигационных панелей. В одном
фрейме располагаются ссылки, а второй предназначен для отображения докумен-
тов, вызываемых при активизации соответствующих ссылок. При активизации
ссылки документ загружается не в тот же фрейм, где находятся ссылки, а в другой.
.148 _ Глава 2. Основы создания сценариев
Пример
Навигационная панель. Окно браузера разделено на два фрейма: первый выпол-
няет роль навигационной панели, а второй - окна для отображения документов.
frames. htm - установочный файл.
<HTML>
<FRAMESET COLS = "25%,75%">
<FRAME SRC = "menu.htm" NAME = "menu">
<FRAME SRC = "start.htm" NAME = "main">
</FRAMESET>
</HTML>
Здесь start.htm -документ, который будет первоначально показан во фрейме main.
menu.mn1 - навигационная панель.
<ВТМЕ>
<SCRIPT >
function load(url) {
parent .main.'location . href = url;
I
</SCRIPT>
<BODY>
<A HREF = "j avascript: load( ' первый . htm') ">Первый</</А>
<A HREF = "второй. htm" TARGET = "maiп">Второй </А>
<A HREF = "третий.htm" TARGET = 'Чор">Третий </А>
</BODY>
</HTML>
Здесь показано несколько способов загрузки новой страницы во фрейм main. В пер-
вой ссылке используется функция load(). Вместо атрибута TARGET указания на
фрейм выполняет функция. Функции loadQ в качестве параметра передается стро-
ка'первый.htm', указывающая, какой файл следует загрузить. При этом место, куда
он будет загружен, определяется самой функцией load(). Во второй ссылке ис-
пользуется атрибут TARGET. Третья ссылка показывает, как можно избавиться от
фреймов. Чтобы удалить фреймы с помощью функции loadQ, достаточно напи-
сать в ней следующую строку:
parent.location.href = url
Атрибут TARGET в теге ссылки <А HREF> обычно применяется в тех случаях, когда
требуется загрузить одну страницу в один фрейм. Язык сценариев используют,
если необходимо при активизации ссылки выполнить несколько действий, на-
пример загрузить несколько страниц в разные фреймы.
Для ссылок из родительского окна к объектам его дочерних фреймов можно вос-
пользоваться коллекцией frames всех фреймов. Коллекция фреймов представля-
ет собой массив объектов фреймов. Обратиться к конкретному фрейму из этой
коллекции можно по индексу или по имени фрейма, указанному в качестве зна-
чения атрибута N A M E в теге FRAME
window.frames[индекс]
wi ndow.имя_фрейма
Заметим, что индекс 0 соответствует первому дочернему фрейму в порядке, опре-
деленном следованием тегов <FRAME> в контейнере <FRAMESET>>.
Приведенные выше шаблоны ссылок на фреймы из родительского окна исполь-
зуются как префиксы в полных ссылках к объектам, содержащимся во фреймах.
2.5. Работа с окнами и фреймами
.149
При этом следует помнить, что если нас интересуют объекты документа, загру-
женного во фрейм, то прежде чем обратиться к ним, следует упомянуть объект
document. Например
window.frames(0).document.all.My input.value
window.LEFT.document.all.My input.value
Ссылка из дочернего фрейма непосредственно на родительский производится
с помощью ключевого слова parent. Если имеется еще один фрейм более высокого
уровня, то ссылка на него выглядит так: parent.parent. Аналогичным образом мож-
но построить ссылку из дочернего фрейма до прапрадедушки. Чтобы сразу обра-
титься к родительскому окну, находящемуся на вершине иерархии, можно исполь-
зовать ключевое слово top.
СОВЕТ
При использовании ссылки top следует учитывать то обстоятельство, что ваш сайт может
быть загружен в один из фреймов другого сайта. В этом случае указанный вами объектtop
окажется совсем другим, и ссылки, построенные с его использованием, не будут правиль-
но работать. Поэтому рекомендуется использовать parent для ссылок на вышестоящий
фрейм (окно).
Предотвращение использования фреймов
Ссылки top и self можно использовать для предотвращения отображения вашего
сайта внутри фреймов другого сайта. Для этого необходимо, чтобы документ верх-
него уровня проверял, в какое окно он загружен. Это должно быть самое верхнее
(top) или родительское (parent) окно. Если это действительно так, ссылка на свой-
ство top совпадает со ссылкой selfна текущее окно. При несовпадении этих значе-
ний документ следует перезагрузить заново, но уже в окно верхнего уровня. Сце-
нарий, выполняющий эту работу, необходимо разместить в начале документа. Вот
его код:
<SCRIPT>
if (top != self)
top.location = location
</SCRIPT>
Проверка загрузки фреймов
При посещении вашего многофреймового сайта пользователь может сделать за-
кладку (поместить в папку «Избранное») только на один фрейм, в то время как
все средства навигации по сайту находятся в другом фрейме. При следующем по-
сещении в.браузер загрузится усеченный вариант вашего сайта. При этом постра-
дает как пользователь, так и ваша репутация.
Следующий простой сценарий проверяет, загружается ли веб-страница в своем
наборе фреймов, сравнивая URL-адреса окна top и текущего окна. Если они
совпадают, то необходимо загрузить набор фреймов, определяемый в файле
frameset.htm.
<SCRIPT>
if (top.location.href == window.location.href)
top.location.href = "frameset.htm"
</SCRIPT>
150.
.Глава 2. Основы создания сценариев
2.5.3. Плавающие фреймы
Для вставки одного HTML-документа в тело другого средствами браузера пользо-
вателя, а не сервера, служит контейнерный тег<IFRAME>:
<IFRAME SRC = "адрес_документа"></1РНАМЕ>
Элемент, задаваемый этим тегом, можно позиционировать с помощью парамет-
ров таблицы стилей (те г <5Тт!Е> или атрибут STYLE). Если его положение не указа-
но явно, то он позиционируется в соответствии с положением <IFRAME>В HTML-
коде. Внешне этот элемент выглядит как прямоугольная область (с полосами
прокрутки или без них), в которой отображается документ из некоторого HTML-
файла. Такие окна иногда называют плавающими фреймами.
HTML-документы, загружаемые в плавающие фреймы, могут иметь сценарии
и прочие средства, присущие любому HTML-документу. Ниже приведен пример
загрузки трех различных HTML-файлов в плавающие фреймы (рис. 2.16). Это
HTML-документы из сайта автора (www.admiral.ru/-dunaev).
<НТМ1 >
<НЗ>Включение HTML-документов на стороне клиента</НЗ>
<Н4>Использование тега < ifra т,е></Н4>
Здесь в трех окнах показаны страницы моего сайта<Ьг>
<IFRAME SRC = "examples.htm" ></IFRAME>
<IFRAME SRC = "flashx.htm" ></ IFRAME >
<p>
<IFRAME SRC = "i is.htm" STYLE = "posi tio n: absolute; t op: 310; width:500:
eight:250" SCROLLING = no" ></IFRAME >
</HTML >
Другой пример использования плавающих фреймов рассмотрен в подразделе 4.2.2
(глава 4).
Плавающий фрейм ведет себя почти так же, как и обычный фрейм. Если он со-
здан, то его можно найти в коллекции frames. Среди его свойств рассмотрим свой-
ство align - выравнивание плавающего фрейма относительно окружающего со-
держимого документа. Возможные значения:
• absbottom - выравниваетнижнюю границу фреймапоподстрочнойлинии сим-
волов окружающего текста;
• absmiddle - выравнивает середину фрейма по центральной линии между top и
absbottomокружающеготекста;
• baseline - выравнивает нижнюю границу фрейма по базовой линии окружаю-
щего текста;
• bottom - совпадает с baseline (только в IE);
• left - выравнивает фрейм по левому краю элемента-контейнера;
• middle - выравнивает воображаемую центральную линию окружающего тек-
ста по воображаемой центральной линии фрейма;
• right - выравнивает фрейм по правому краю элемента-контейнера;
• texttop - выравнивает верхнюю границу фрейма по надстрочной линии сим-
волов окружающего текста;
• top - выравнивает верхнюю границу фрейма по верхней границе окружающе-
го текста.
2.5. Работа с окнами и фреймами___________________________________________151
-3 Включение HTML-документов - Microsoft Internet Explo
винов Сесеи: Спрлккв
1На
ICcblJIKllrf*
1
Включение HTML-документов на стороне клиента
Использование тэга < iframe>
Здесь в трех окнах показаны страницы моего сайта___________
'tot-;!, приведены элемеы арные
примеры Hi Ml. и .IStfipf. 3ir>. азы
.динамического MIHU ВЦ мржеге
;«о.сяетрмк, шх еда вьагоедяг я окне >
Вставка Flash-ролика в Web-
страницу
Так называемый Flash-ролик
содержится в ЗБ'ЭД'-файле (т.е. в
файле с расширением swf, который
iL___________J
"or и те\л/для поддержи! начинв»шиж\й?еЬ-дизайнеров.
[еймШйиайд^ещтиеры исшшьаойанин дишшичесюно HTML Мног ие из
во а* itj«nu]« тшнж'СаяеввеМеЬ-йя&кхр" filled» 'Ъам
Zati: ПГГСЩИЮ.
3W1 саЙ<едмп» себе janrmei» п р и м е р о м. Кенечно, не а смыепе э|аяоиа .1
д«я нодражадда. Oi.t едопли вручну»<1.е. »»с помощь» FrontPage ил»
ЙГЙДО:-: I | .г F 9 i! ; о д в ы и н небольшим, легко просматривапся и ...
«$S№fmaSians4Sbtsan«»ewisi.И1*)гйеиаприи5дв!иьина сайте примеров
«еш? : , i шмеег»саЙ18, Твкчю, это все paeoiaeiJ
Лэшж по ca&nt?i:
,Ешраре 2Q03& должна выйти моя кн
оса&тушисанная в соавторстве с сь
''"-■Ш0Щ1 Flash, сканированию, осоС
. V Vet> й другим вопросам. Если вам по'
■ OV060
Мой
МЛЬЮГер.'
1
!
:
Рис. 2.16. Документ с тремя документами из внешних файлов, загруженными
в плавающие фреймы
2.5.4. Всплывающие окна
Всплывающее окно не имеет органов управления и располагается над докумен-
том, в котором оно было создано, в том числе и над диалоговыми окнами. Щелчок
кнопкой мыши где-либо вне этого окна или вызов другого приложения приводит
к его закрытию. Оно также не отображается на панели задач Windows. После со-
здания всплывающего окна его заполняют содержимым. При этом необходимо
следить, чтобы содержимое вписывалось в заданные границы окна, поскольку оно
не имеет полос прокрутки. Такие окна удобно использовать в качестве больших
всплывающих подсказок для вывода контекстной справочной информации.
152
Глава 2. Основы создания сценариев
создание всплывающего окна
Всплывающим окнам соответствует объект popup. Он создается только в сцена-
рии для браузера IE5.5+ с помощью метода window.createPopup().
Ниже приводится пример типичной последовательности выражений сценария,
создающего всплывающее окно, задающего его параметры и показывающего его
на экране (рис. 2.17):
var mypopup = window. createPopupO //
var popupBody = mypopup.document.body
/* Параметры окна */
popupBody . style . border = "solid Ipx green1
popupBody.style.padding = "5px"
popupBody.style.color = "green"
popupBody.style.background = "ffffdO"
/* Заполнение содержимым: */
popupBody.innerHTML = "<НЗ>Здесь расположен
mypopup. show(200 ,100 ,400,70.docum en.btody) ?9, tfocuwmt. body)
//
//
//
//
граница окна
отступ текста
цвет текста в
цвет фона окна
окне
некоторый темт<Ш'"
// вывод всплывающего
окна
ЗПЛКнигаJavaSciiiit\piDba\FOf4JP1.HTM - Miciototl Internet Enploie)
Файл ]ра^а Вид ^бранное СЙрМ
^.Х.-ЩоР.'ШГЗа.-.Ш
'л • -Л - •/:i;-C£3;^;i-:~-
fciEjlSHHtSe :
I Здесь ра! положен некоторый текст
,в-р. j| йВвайФд
...Л МульТиМ;Зс*е i
Q ССЫЛКИ'
О пиво
■ШКнигвШфичаскийчеловек... j
Ц| Adobe Photoshop алхимия диз..
I вListSoft каталог программ
\ MSN.com
I Ш Дунаев
.П.| l}..£ft..!~ Я.ЫТА. ■■ .,.,, :.--ли _
D
:'*3
;Д М с .йwwni
-------, Г-г-Л*1,<~1'\--
. ж
Рис. 2.17. Всплывающее окно на фоне браузера
Свойства объекта popup:
• document - свойство, имеющее в качестве значения ссылку на документ, со-
держащийся во всплывающем окне; через него можно задать ряд параметров
как самого окна, так и его содержимого:
mypopup. document .body. style . border = "solid 4px black" // границы окна
mypopup.document. body. style . background = "yellow" // цвет фона окна
mypopup.document.body.style.color = "blue" // цвет текста в окне
• isOpen - пока всплывающее окно отображается на экране, это свойство имеет
значение true, в противном случае - false; применяется в выражениях сцена-
рия, которые выполняются при уже открытом окне.
Методы объекта popup:
• show(left, top, width, height [, позиционирование]) - отображает всплывающее
окно после создания объекта popup с помощью метода window.createPopupQ;
2.5. Работа с окнами и фреймами________________________________________________153
и заполнения его содержимым. Если окно исчезло из-за того, что пользова-
тель щелкнул где-то в поле браузера, то для его повторного открытия следует
заново выполнить метод show(). Первые четыре параметра метода задают ко-
ординатное позиционирование и размеры окна. Параметры left и top опреде-
ляют координаты верхнего левого угла окна относительно экрана монитора, а
не окна браузера. Последний необязательный параметр позволяет задать дру-
гое координатное пространство как ссылку на элемент HTML-документа. На-
пример, указав document.body, вы ограничиваете координатное пространство
окном браузера.
• hideQ - позволяет скрыть созданное и отображаемое всплывающее окно.
Заполнение всплывающего окна содержимым производится с помощью свойства
innerHTML, принимающего в качестве значения строку, содержащую теги HTML.
Более подробно это свойство будет рассмотрено в подразделе 2.6.3. Таким обра-
зом, в окно можно вставлять не только тексты, но и изображения и другие эле-
менты.
Пример
mypopup.document.body.innerHTML = "<IMG SRC = ' p i c t u r e . j p g ' > "
Более подробно об этом свойстве будет рассказано в следующем разделе.
Ниже приводится пример HTML-документа (рис. 2. 18) с двумя кнопками, щел-
чок на которых вызывает одну и ту же функцию pop(xcontent), открывающую
всплывающее окно и заполняющую его содержимым, которое задано параметром
xcontent:
<HTML>
<НЗ>Всплывающие окна</НЗ>
<BUTTON - onclick = "pop('Bo первых строках своего письма я рад вам
сообщить ')">Просто текст</В11ТТОМ>
<BR><BR>
<BUTTON onclick = " p o p (' < I M G SRC = кружка .g if >
Это кружка с квасом. ') ">Картинка с текстом</В1)ТТОМ>
<SCRIPT>
function pop(xcontent){
var mypopup = window.createPopup();
var popupBody = mypopup.document.body
popupBody.style.border = "solid 2px green"
popupBody.style.padding = "5px"
popupBody.style.color = "blue"
popupBody.style.background = "ffffdO"
popupBody.innerHTML = "<p>" + xcontent + "</p>"
mypopup.show(130,90,400,200,document.body)
]
</SCRIPT>
</HTML>
В рассмотренном выше примере при вызове функции рор() каждый раз создается
одно и то же всплывающее окно, содержимое которого может изменяться. По-
скольку позиционирование, размеры и цвета окна не изменяются, то можно на-
писать более экономный код за счет вынесения выражений его создания и пара-
метризации за пределы определения функции рор():
<HTML>
<НЗ>Всплывающие окна</НЗ>
<BUTTON onclick = "pop('Bo первых строках своего письма я рад вам
154_______________________________________Глава 2. Основы создания сценариев
сообщить ■) "Просто текст</В1ЛТ0И>
<BR><BR>
<BUTTON onclick = "pop('<IMG SRC = кружка.gl-
Это кружка с квасом. ') ">Картинка с текстов/BUTTON»
<SCRIPT>
var mypopup = wi ndow. createPopupO
var popupBody = mypopup.document.body
popupBody. style.btorder = "solid 2px green"
popupBody.style.padding = "5px"
popupBody. style, color = "blue"
popupBody.style.background = "ffffdO"
function pop(xcontent) {
popupBody. inner-HTML = "<p>" + xcontent + "</p>"
mypopup.show(130,90,400,200,document.body)
I
</SCRIPT>
</HTML>
^ОЛКннга J.iY.iSnnplAprohaUWUPZHTM - MieioiDft Inleinei Enpbici
ВИД CujpSii;
(>П«р«м>1
ьтпы ю щ и е окна
i > ■ I
I шкет
;-йргникас
!
кружка с квасом.
;.L j МОЙи«етьюгер
<«
Рис. 2.18. Пример всплывающего окна с изображением и текстом
2.6. Динамическое изменение
элементов документа
HTML-документ, загруженный в браузер, можно изменять с помощью сценари-
ев. Поскольку речь идет не о файле на диске, а о его образе в браузере в оператив-
ной памяти компьютера, то говорят о динамическом изменении документа. Су-
ществует три основных способа динамических изменений:
* с помощью метода write Q;
2.6. Динамическое изменение элементов документа
.155
• путем изменения значений свойств, соответствующих атрибутам HTML-те-
гов и параметрам каскадных таблиц стилей;
• путем изменения значений свойств innerText, outerText, innerHTML,outerHTML,
которые имеют почти все объекты, заданные с помощью тегов.
2.6.1. Использование метода writeQ
Метод writeQ объекта document уже неоднократно упоминался в этой книге. Он
принимает в качестве параметра строку, содержащую HTML-код и/или просто
текст. Выполнение в сценарии выражения document.write(cTpoKa) приводит к до-
писыванию в текущий HTML-документ содержимого параметра строка и немед-
ленной его интерпретации браузером. В результате документ и его объектная
модель обновляются. При этом файл с исходным HTML-кодом остается без из-
менений. Если требуется полностью заменить текущий документ, то сначала при-
меняют метод очистки документа document.dearQ, а затем document.write(cTpoKa).
Однако при такой кардинальной трансформации текущего документа следует быть
осторожным. Наиболее безопасный прием - сначала сгенерировать содержимое
нового HTML-документа с помощью сценария в текущем документе, а затем от-
править HTML-код в новое окно или в другой фрейм многофреймового документа.
Если быть более точным, то следует отметить, что метод writeQ может принимать
произвольное количество строковых параметров:
document. wri te CcrpOKal, [, строка2 . . .[, строкам]])
Здесь квадратные скобки указывают лишь на необязательность заключенных в них
параметров. Если указывается несколько параметров, то они разделяются запя-
тыми. Заметим также, что весь HTML-код документа можно записать как одну
строку.
Кроме метода writeQ можно использовать для тех же целей и метод writelnQ, име-
ющий такой же синтаксис. Его особенность в том, что он добавляет в конце каж-
дой строки документа невидимый символ перехода на другую строку.
Методы writeQ и writelnQ работают в браузерах IE3+ и NN2+ .
2.6.2. Изменениезначений атрибутов элементов
Элементы HTML-документа, как известно, задаются тегами, большинство из ко-
торых имеют атрибуты (параметры). В объектной модели документа тегам эле-
ментов соответствуют объекты, а атрибутам - свойства этих объектов. В боль-
шинстве случаев названия свойств объектов совпадают с названиями атрибутов,
но в отличие от последних записываются в нижнем регистре. Это же относится
и к параметрам таблиц стилей. Однако это общее правило может иметь исключе-
ния. Поэтому им нужно пользоваться так: ищите в справочнике свойство, похо-
жее на атрибут, и обращайте внимание на его написание. Например, тегу графи-
ческого изображения <MG ID = "myimg" SRC = "picture.jpg"> соответствует объект
documentall.myimg, а атрибуту SRC - свойство document.allmyimg.src, значением
которого является имя (URL-адрес) файла с изображением. С помощью сцена-
рия можно присвоить этому свойству новое значение, и в HTML-документе про-
изойдет замена графического элемента.
156.
.Глава 2. Основы создания сценариев
Многие параметры элементов задаются с помощью таблиц стилей, например по-
средством атрибута STY LE Так, для позиционирования изображения можно ис-
пользовать следующий HTML-код:
<IMG ID = "myimg" SRC = "picture.jpg"
STYLE = "position:absolute; top:20; left: 50: z-index:3">' -
Чтобы изменить в сценарии параметры стиля элемента, следует присвоить новые
значения соответствующим свойствам объекта style:
document.all.myimg.style.top = 30
document. all. myimg. style . top = 100
document.all.myimg.style.zlndex = -2
Параметр z-index в таблице стилей, указывающий слой (относительное положе-
ние выше-ниже) для элемента, в объектной модели представляется свойством
zlndex.
ВНИМАНИЕ -
Между обозначениями в HTML и таблицах стилей, содной стороны, и обозначениями соот-
ветствующих свойств объектов, с другой стороны, много общего, но имеются и различия.
Поэтому будьте внимательны!
Многочисленные примеры использования данного способа изменения парамет-
ров элементов документа рассматриваются в главе 4, в частности в разделе 4.1.
" 2.6.3. Изменение элементов
Наиболее удобный способ динамического изменения элементов HTML-документа
в IE4+ основан на использовании свойств innerText, outerText, innerHTML и outerHTML
В NN6+ можно использовать только свойство innerHTML Множество примеров вы
найдете в главе 4, а здесь мы ограничимся разъяснением общих вопросов.
Теги элементов документа могут содержать текст и/или другие теги. С помощью
перечисленных выше свойств можно получить доступ к содержимому элемента.
Изменяя значения этих свойств, можно изменить сам элемент, частично или пол-
ностью. Например, можно заменить только надпись на кнопке, а можно превра-
тить кнопку в изображение или Flash-анимацию.
Значением свойства innerText является все текстовое содержимое, заключенное
между открывающим и закрывающим тегами элемента. Если в эту строку входят
HTML-теги, то они игнорируются. Обратите внимание, что в значение свойства
i nnerText данные открывающего и закрывающего тегов соответствующего элемен-
та не входят. Таким образом, innerText следует понимать как весь внутренний текст,
содержащийся в контейнере.
Свойство outerText аналогично свойству innerText, но отличается от него тем, что
включает в себя и данные, содержащиеся в открывающем и закрывающем тегах
элемента. Таким образом, outerText следует понимать как весь текст, содержащий-
ся в контейнере, включая и его внешние теги.
Рассмотрим в качестве примера следующий фрагмент HTML-кода, выводящий
ссылку, изображение и форматированный текст:
2.6. Динамическое изменение элементов документа _ 157
<DIV ID = "my">
<А HREF = ' raznoe.htm'>
IMG SRC = ' picture. jpg1>Ссылка на раздел <В>Разное</В>
</A>
</DIV>
В этом случае свойства innerText и outerText для элемента, заданного контейнер-
ным тегом <DIV>, совпадают:
document.all. my. innerText // значение равно: "Ссылка на раздел
Разное"
При присвоении свойствам innerText и outerText новых значений следует иметь
в виду, что если значение содержит HTML-теги, то они не интерпретируются, а вы-
водятся на экран просто как текст. Так, для приведенного выше фрагмента HTML-
кода выполнение в сценарии выражения
document.all. my . innerText = "<Е Ш ТТОМ>Щл кни здесь</В11ТТОМ>"
не создаст в документе кнопку, а лишь выведет строку с текстом, указанным спра-
ва от оператора присвоения.
Рассмотренные выше свойства innerText и outerText не столь эффективны, как за-
мечательные свойства innerHTML и outerHTML. Без них мне было бы просто скучно
заниматься программированием на HTML и JavaScript.
Свойство innerHTML для любого элемента имеет в качестве значения строку, со-
держащую HTML-код, заключенный между открывающим и закрывающим тегами
элемента. Иначе говоря, innerHTML содержит внутренний HTML-код контейнера
элемента. Присвоение этому свойству нового значения, содержащего HTML-код,
приводит к интерпретации этого кода. Разумеется, новое значение может и не со-
держать тегов.
Свойство outerHTML аналогично свойству innerHTML, но отличается тем, что содер-
жит весь HTML-код, включая внешние открывающий и закрывающий теги эле-
мента.
Для приведенного выше фрагмента HTML-кода имеет место следующее:
document, а П. my. i nnerHTML /* значение равно:
"<A HREF = 'raznoe.htm'>
<IMG SRC = 'picture. jpg>
Ссылка на раздел <В>Разное</В></А>" */
document, all. my. outerHTML /* значение равно:
"<DIV ID = 'my' >
<A HREF = 'raznoe.htm1>
<IMG SRC = 'picture.jpg'>
Ссылка на раздел <В>Разное</В>
</A></DIV>" */
Если в сценарии выполнить, например, выражение:
document.all.my.innerHTML = "<ВиТТОМ>Щелкни здесь</В1ЯТОМ>",
то ссылка, изображение и текст будут заменены кнопкой с надписью Щелкни здесь.
При этом контейнерный тег <DIV ID = "my"> сохранится. Если же вместо свойства
innerHTML использовать свойство outerHTML, то кнопка также появится, но уже без
контейнера <DIV ID = "my">.
Заметим, что свойства innerHTML и outerHTML могут применяться и к элементам,
которые задаются неконтейнерными тегами, например тегом <IMG>. В этом слу-
чае значения innerHTML и outerHTML всегда совпадают.
158 _ Глава 2. Основы создания сценариев
Ниже приводится код функции getproperties (xid), которая может использоваться
в сценарии для получения значений свойств innerHTML, outerHTML, innerText и outer-
Text элементов HTML-документа. Эта функция принимает в качестве параметра
значение идентификатора ID элемента (или значение его атрибута NAME) и выво-
дит диалоговое окно со значениями перечисленных выше свойств. Вы можете
применять ее на этапе изучения.
function getproperties(xid) {
var x = eval ( I , "document. a l l ." + xid)
alert(" innerHTML: " + x. innerHTML + "\n outerHTML: " + x.ou TERHTML +
"\n innerText: " + x.ii :rText + "\n outerText: + x.outerText)
}
Вот пример использования функции getproperties(xid):
<HTML>
<DIV ID = "my">
<A HREF = ' raznoe.htm'>
<IMG SRC = ' picture . jpg ' >Ссылка на раздел <В>Разное</В></А>
</DIV>
<Н2 ID = "pri vet">ripHBeT <1>читателям</1> </НЗ»
<SCRIPT>
getproperties("my") // отображение свойств элемента my
getproperties {"privet") // отображение свойств элемента
privet
function getproperties("xid"){
// код функции
}
</SCRIPT>
</HTML>
2.7. Загрузка изображений
Большинство веб-страниц содержат графические элементы, которые использу-
ются не только для украшения страниц, но и в качестве информационного напол-
нения: иллюстрированные каталоги товаров, схемы, чертежи, географические кар-
ты, фотогалереи и т. п. Если файлы с графикой велики и/или их много, то загрузка
такой страницы в браузер может потребовать слишком много времени. Для уско-
рения загрузки используют специальные приемы. Так, нередко сначала загружа-
ют изображения с низким разрешением из небольших по объему файлов. На их
основе создаются ссылки на файлы с графикой полноценного разрешения, кото-
рые загружаются только при щелчке на ссылке. Можно также использовать в теге
< IMG> кроме атрибута SRC атрибут LOWSRC, позволяющий загрузить сначала изоб-
ражение с низким разрешением, а затем, по мере приема, заменить ее рисунком
с большим разрешением. Здесь мы рассмотрим способ ускорения загрузки гра-
фики, предоставляемый JavaScript.
С помощью сценария можно организовать предварительную загрузку изображе-
ний в кэш-память браузера, не отображая их на экране. Это особенно эффективно
при начальной загрузке страницы. Пока изображения загружаются в память, ос-
таваясь невидимыми, пользователь может рассматривать текстовую информацию,
его не раздражает медленное появление графических элементов. В результате за-
грузка страницы не вызывает у пользователя отрицательных эмоций.
2.7. Загрузка изображений________________________________________________159
Для предварительной загрузки изображения следует создать его объект в памяти
браузера. Такой объект несколько отличается от объекта изображения, создавае-
мого с помощью тега <IMG>. Как и все объекты, создаваемые сценариями, объект
изображения не отображается в окне браузера. Однако его наличие в коде доку-
мента уже обеспечивает загрузку самого изображения при загрузке документа.
Чтобы создать в памяти объект изображения, необходимо в сценарии выполнить
следующее выражение:
myimg = new 1та§е(ширина, высота)
Параметры функции-конструктора объекта определяют размеры изображения
и должны соответствовать значениям атрибутов WIDTH и HEIGHT тега <IMG>, кото-
рый используется для отображения предварительно загруженного изображения.
Для созданного в памяти объекта изображения myimg можно задать имя или, в об-
щем случае, URL-адрес графического файла. Это делается с помощью свойства src:
myimg. src = "11К1_-адрес_изображения"
Данное выражение предписывает браузеру загрузить в кэш-память указанное изоб-
ражение, но не отображать его. После загрузки в кэш-память всех изображений
и загрузки всего документа можно сделать их видимыми. Для этого нужно свой-
ству src элемента <IMG> присвоить значение этого же свойства объекта изображе-
ния в кэш-памяти. Например:
document.images[0].src = myimg.src
Здесь слева от оператора присвоения указано свойство src первого в документе
элемента, соответствующего тегу <IMG>, а справа - свойство src объекта изобра-
жения в кэш-памяти.
Теперь рассмотрим в качестве примера HTML-документ, в котором отобража-
ется список названий графических элементов и одно исходное изображение
(рис. 2.19). Щелчок на элементе списка приводит к отображению соответствую-
щего изображения. Все графические элементы из этого списка предварительно
загружаются в кэш-память и поэтому быстро отображаются при выборе из спис-
ка. Список, как известно, создается с помощью контейнерного тега <SELECT>, со-
держащего теги <OPTION>. Соответствующий фрагмент HTML-кода мы сгенери-
руем с помощью сценария и запишем в текущий документ. В листинге 2.3 приведен
соответствующий код.
Листинг 2.3. Код HTML-документа, в котором отображается список названий графических
элементов и одно исходное изображение
<HTML>
<HEAD>
<SCRIPT>
var imgFile = new ArrayO // массив имен графических
// файлов
imgFile [0] = "pictl.jpg"
imgFiletl] = "pict2.jpg"
imgFile[2] = "pict3.jpg"
imgFile[3] = "pict4.jpg"
var mgNam e = n ew ArrayO // массив названий картинок
imgName[0 = "Картинка!"
imgName[l] = "Картинка2"
imgName[2 = "КартинкаЗ"
160
Глава 2. Основы создания сценариев
imgName[3] = "Картинка4"
/* Создание объектов изображений и
var imgObj = new ArrayO
for(i = 0; i < imgFile."length; i-
imgObj[i] = new Image(150, 100)
imgObj [ i ] .src = imgFile [i]
загрузка изображений в кэш */
// массив объектов изображений
// создаем объект изображения
/* загрузка рисунка в память
без отображения */
function imgshowClist) { /* отображение изображения
при выборе из списка
var х = list.options[list. selectedlndex value /* выбранный номер
document.all.imgO.src = eval("imgObj [ "+ x + "].src" изображения */
}
/* Создание списка изображений */
var clist = "<SELECTonchange= ' imgshow(this)
for(i = 0; i<imgFile. length; 1
' >"
clist+ = "<OPTION VALUE="
}
clist + = "</5ELECT>"
document .wr-ite(clist)
</SCRIPT>
</HEAD>
<! Исходная картинка>
<IMG ID = "img0" SRC =
</HTML>
+ i * "" + imgName[i]
/* запись списка изображений
в документ */
"pict0.jpg" WIDTH=150 HEIGHT=100>
% 10AKHMra JavaSCrip.\pmba\imgtoad.hto Micro.:.--
Iс|Гстоео_
^-,тНи.. .ч-п...:-: •:(•
~f}
■п
Рис. 2.19. При выборе названия изображения из списка соответствующее отображается
из предварительно загруженного файла
Обратите внимание, что для преобразования строки в настоящую ссылку на объ-
ект используется функция evalQ. HTML-код, определяющий список изображе-
ний и сгенерированный сценарием, выглядит следующим образом:
2.8. Управление процессами во времени__________________________________161
<SELECT onchange = .' imgshow(this) ' >
«DPTION VALUE = бЖартинка!
kOPTION VALUE = 1>Картинка2
*<OPTI ON VALUE = 2>КартинкаЗ
-<OPTION VALUE = 3>Картинка4
</5ELECT>
2.8. Управление процессами во времени
Вы можете периодически, через заданный интервал времени, запускать код (напри-
мер, функцию) JavaScript. При этом создается эффект одновременного (парал-
лельного) выполнения вычислительных процессов. Например, вы можете запус-
тить несколько функций, перемещающих на экране различные видимые объекты.
Эти объекты будут двигаться как бы одновременно. Иногда требуется организо-
вать временную задержку перед выполнением какой-то функции, чтобы ранее
начатый процесс успел завершиться. Все это относится к задачам управления
вычислительными процессами во времени.
Для организации постоянного периодического (через заданный интервал време-
ни) выполнения некоторого выражения или функции служит метод setlntervalQ
объекта window. Этот метод имеет следующий синтаксис:
setlnterval (выражение, период [, язык])
Первый параметр представляет собой строку, содержащую выражение (в частно-
сти, вызов функции). Второй параметр - целое число, указывающее временную
задержку в миллисекундах перед последующими выполнениями выражения, ука-
занного в первом параметре. Третий, необязательный параметр указывает язык,
на котором написано выражение; по умолчанию - JavaScript. Метод setlntervalQ
возвращает некоторое целое число - идентификатор временного интервала, ко-
торый может быть использован в дальнейшем для прекращения выполнения про-
цесса, запущенного с помощью данного метода (см. ниже метод clearlnterval()).
Пусть, например, требуется, чтобы некоторая функция myfuncQвыполнялась перио-
дически через 0,5 с. Тогда в сценарии следует записать следующее выражение:
setlnterval("myfunc()", 500)
Тот факт, что первый параметр метода setlntervalQ является строкой, обусловли-
вает некоторые особенности передачи параметров периодически вызываемой
функции. Если периодически вызываемая функция принимает параметры, то мы
должны сначала сформировать строку, содержащую имя этой функции, круглые
скобки, значения параметров и запятые между ними, а затем передать ее в каче-
стве первого параметра методу setlntervalQ. В следующем примере показано, как
передать методу setlntervalQ функцию с двумя параметрами, paraml и param2, зна-
чения которых определены в другом месте сценария:
van xstr = "myfunc(" + paraml + , + param2 + ")"
setlnterval(xstr, 500)
Выражение, переданное методу setlntervalQ, будет периодически выполняться
сколь угодно долго. Если это выражение осуществляет, например, приращение
координат какого-нибудь видимого элемента документа, то этот элемент будет
перемещаться в окне браузера.
162_______________________________________Глава 2. Основы создания сценариев
Для остановки запущенного временного процесса служит метод clear!nterval(MfleH-
тификатор), который принимает в качестве параметра целочисленный идентифи-
катор, возвращаемый соответствующим методом setlntervalQ, например:
var myproc = setl nterval ("myf unc () , 100")
if (confirm("Прервать процесс ?"))
clearInterval (myproc)
Другие, содержательные примеры использования методов setlntervalQ и cleal
IntervalQ приведены в разделах 4.1 и 4.2.
Чтобы выполнить выражение с некоторой временной задержкой, используется
метод setTimeoutQ. Этот метод объекта window имеет следующий синтаксис:
setTimeout(выражение, задержка [, язык])
Первый параметр представляет собой строку, содержащую выражение (в частно-
сти, вызов функции). Второй параметр - целое число, указывающее временную
задержку в миллисекундах выполнения выражения, указанного в первом пара-
метре. Третий, необязательный параметр указывает язык, на котором написано
выражение; по умолчанию - JavaScript. Метод setTimeout() возвращает некото-
рое целое число - идентификатор временного интервала, который может быть
использован в дальнейшем для отмены задержки выполнения процесса, запущен-
ного с помощью данного метода (см. ниже метод clearTimeoutQ).
Пусть, например, требуется, чтобы некоторая функция myfuncQ выполнялась спу-
стя 1 с. Тогда в сценарии следует записать следующее выражение:
setTimeout("myfunc()", 1000)
ВНИМАНИЕ -
Помните, что это выражение не задерживает выполнение всех последующих выражений
сценария. Оно лишь задерживает выполнение функции myfuncQ.
Для отмены задержки процесса, запущенного с помощью метода setTimeout(), ис-
пользуется метод с1еагТ1теои1(идентификатор), который принимает в качестве па-
раметра целочисленный идентификатор, возвращаемый соответствующим мето-
дом setTimeout.
В следующем HTML-документе имеются две кнопки. Щелчок на кнопке Пуск от-
крывает через 5 с новое окно и загружает в него документ mypage.htm. Однако это
действие можно отменить с помощью кнопки Отмена, если щелкнуть на ней, пока
окно еще не открыто:
<HTML>
«BUTTON ID="start">Пуск</ВиТТОМ>
«BUTTON ID="stop">OTMeHa</BUTTON>
<5CRIPT>
var myproc
function start.onclickO{
myproc = setTimeout>Ut ("wi ndow. ope'mn( ypage.htm )"' ' mypage. htm') " , 5000)
}
function stop . onclickO {
clearTimeout(myproc)
}
</SCRIPT>
</HTML>
2.9. Работа с Cookie.
.163
Более содержательный пример использования метода setTimeoutQ можно найти
в подразделе4.8.10.
ВНИМАНИЕ -
При использовании методов setlntervalQ и setTimeout() следует иметь в виду, что их вто-
рые параметры задают лишь приблизительные значения временных задержек.
2.9. Работа с Cookie
Для хранения небольших объемов информации на диске компьютера пользовате-
ля в браузере предусмотрен так называемый механизм cookie. Обычно он исполь-
зуется для хранения имени пользователя и пароля, который вводится в поле фор-
мы защищенного веб-сайта, атакже информации о предыдущем посещении сайта.
Например, можно сохранить на диске дату последнего посещения сайта данным
пользователем. При загрузке сайта эта дата сравнивается с некоторой датой, уста-
новленной автором сайта в качестве даты обновления. Если вторая (авторская)
дата более поздняя, чем первая, то на веб-странице появляется соответствующая
отметка, например текст или изображение с надписью «New» или «Обновлено!».
Разумеется, сравнение дат и вывод на страницу отметки производится с помощью
сценария. А вот еще один пример: сценарий проверяет, а посетил ли сайт, скажем,
Вася Пупкин; если это произошло, то на страницу выводится персональное сооб-
щение.
По существу, cookie - это единственный способ сохранения данных на диске
пользователя, безопасный для него. Как известно, веб-браузеры препятствуют сво-
бодному обращению к папкам и файлам на компьютере пользователя (см. гла-
ву 5). Однако следует помнить, что многие пользователи не любят cookie-записи
и всячески их истребляют.
Записи cookie браузер Internet Explorer сохраняет в отдельных текстовых фай-
лах, расположенныхв папке Windows\Cookies. Имя такого файла образуется на ос-
нове имени пользователя и домена того сервера, на котором создавался cookie-
файл. Netscape Navigator 4 для Windows создает просто один файл cookie.txt.
Вообще говоря, структура данных в cookie-файлах для различных браузеров не
столь существенна, поскольку, во-первых, не рекомендуется открывать и изме-
нять эти файлы в текстовых редакторах, а во-вторых, браузеры IE И N N использу-
ют одинаковый синтаксис чтения и записи cookie-данных, основанный на исполь-
зовании свойстваdocument. cookie.
Итак, данные в cookie-файлах организованы в виде записей. Каждую такую за-
пись можно представить себе в виде строки, содержащей следующие элементы:
• имя записи;
• содержание записи;
• срок хранения (годности) записи;
• домен сервера, который создал запись;
• сведения о необходимости установки безопасного http-соединения для досту-
па к записям;
164.
.Глава 2. Основы создания сценариев
• расположение документов, которым разрешен доступ к записям.
Зависимость записей от домена обеспечивает безопасность хранения так называ-
емых невосстанавливаемых паролей (пар вида имя_пользователя-пароль), поскольку
запись, созданную сервером одного домена, не может прочитать сервер с другим
доменом.
Срок хранения используется браузером для автоматического удаления просро-
ченных записей, чтобы предотвратить чрезмерное разрастание объема cookie-фай-
лов. Впрочем, IE4+ и NN4+ ограничили объем cookie-файлов 20 записями на каж-
дый домен.
Для записи данных в cookie-файл с помощью JavaScript используется выражение
присвоения строки, содержащей cookie-данные, свойству document.cookie. При этом
важно соблюдать формат строки:
document.cookie = "соо!<1еМате=данные
[; expires=CTpoKa_BpeMeHK_GMT] '
[; path=nyTb]
[; с1опа1п=домен]
[; secure]"
Здесь квадратные скобки указывают, что заключенное в них содержимое не явля-
ется обязательным (может быть опущено).
Рассмотрим элементы cookie-строки.
• Им я-данные. Каждая cookie-запись должна иметь имя и строковое значение,
которое может быть и пустой строкой. Например, если требуется сохранить
слово «Вася» в cookie-записи с именем User_Name, то соответствующее выра-
жение JavaScript будет иметь вид:
document.cookie = "User_Name=Bacfl"
При выполнении этого выражения браузер пытается найти cookie-запись с та-
ким именем. Если он не находит ее в текущем домене, то создает ее автоматиче-
ски. Е in запись с таким именем уже существует, то браузер заменяет ее дан-
ные новыми. Данные в этом элементе cookie-записи не должны содержать точек
с запятыми, запятых и пробелов. Чтобы заменить пробелы соответствующими
символами (%20), строка с данными предварительно обрабатывается функци-
ей escapeQ.
• Срок хранения. Дата и время хранения (годности) cookie-записи должны быть
представлены строкой и содержать данные по Гринвичу (GMT). Например,
вычислить дату истечения срока хранения записи месяц спустя после теку-
щей даты можно следующим образом:
var expdate = new Date() // создаем объект даты
var mont FromNow = expdate . getT ime() + (30*24*60*60*1000)
// устанавливаем значение даты
После этого полученную дату следует привести к строковому формату GMT:
document.cookie = "User_Name=BacH; expires = " + expdate. toGMTString()
Cookie-запись можно удалить и до истечения заданного срока хранения, уста-
новив новый срок, заведомо уже прошедший:
expdate=Thu. 01-Jan-70 00:00:01 СИТ
2.9. Работа с Cookie.
.165
Отсутствие срока хранения означает для браузера, что данная cookie-запись
является временной и не записывается в файл.
Об использовании методов объекта даты см. подраздел 1.7.5.
• path - cookie-записи, производимые компьютером пользователя, имеют путь,
принятый по умолчанию (в текущей папке). Однако можно создать копию
cookie в другой папке, указав путь к ней в качестве значения этого параметра.
• domain - для синхронизации cookie-данных с определенным документом или
и группой документов браузер выясняет домен текущего документа и помеща-
ет в cookie-файл записи, соответствующие этому домену. Если пользователю
требуется просмотреть список всех cookie-записей, содержащихся в свойстве
documentcookie, то он должен просмотреть все пары имя-значение, находя-
щиеся в cookie-файле с именем домена текущего документа. Формат пред-
ставления домена должен охватывать по крайней мере два уровня, напри-
мер rambler.ru.
• secure - принимает логические значения (true или false). При создании cookie-
записей на стороне клиента (компьютера пользователя) этот параметр опус-
кается.
Теперь займемся чтением и записью данных cookie. Данные cookie, которые мож-
но получить с помощью сценария на JavaScript, представляют собой единствен-
ную строку - значение свойства document. c o okie. Выбор значений отдельных эле-
ментов (параметров) cookie производится на основе анализа содержимого этой
строки методами объекта String (см. подраздел 1.7.1). Кроме того, если две и более
cookie-записи (до 20) соответствуют одному и тому же домену, то в JavaScript они
все равно представляются одной строкой и разграничиваются точкой с запятой и
пробелом.
Рассмотрим функцию readCookie(name), читающую cookie-данные, соответствую-
щие имени записи name, которое передается этой функции в качестве параметра:
function readCookie(name) { // чтение cookie-данных записи
var xname = n a me + "
var xlen = xname.length
var den = document.cookie.length
var i = О
while(i < clen) {
var j = i + xlen
if (document.cookie.substri ng(i , j) == xname)
return getCookieVal(j)
i = document .cookie. indexOf(" ",!) +1
if (i == 0) break
I
return null
I
Функция readCookie(name) возвращает значение cookie-записи с именем name или
null, если такая запись не найдена. В теле этой функции использована еще одна,
вспомогательная функция getCookieVal(j), возвращающая декодированное значе-
ние cookie-данных. Декодирование производится с помощью встроенной функ-
ции unescapeQ. Дело в том, что cookie-запись должна представлять собой коди-
рованную строку, полученную путем обработки встроенной функцией escapeQ,
166 _ Глава 2. Основы создания сценариев
чтобы, в частности, заменить пробелы специальными символами (%20). Код этой
функции приведен ниже:
function getCookieVal (n ){) { /* вспомогательная функция,
вызываемая из readCookieQ */
var endstr = document. cookie. indexOf (;", . n)
if (endstr == -1)
endstr = document .cookie .length
return unescape(document.cookie.substring(n, endstr))
}
Теперь рассмотрим функцию writeCookieQ, позволяющую создать или обновить
cookie-запись:
function wri teCookie(name, value, expires, path, domain, secure) {
/* запись cookie */
document.cookie =
name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGHTSt ring[.): " ") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain" + domain : "-) +
((secure) ? ";: secure" : "")
}
Эта функция принимает следующие параметры:
• name - строка, содержащая имя cookie-записи (обязательный параметр);
• value - строка, содержащая значение cookie (обязательный параметр);
• expires - объект даты (Date), содержащий срок хранения cookie-записи; если
отсутствует, то после завершения работы браузера cookie-запись удаляется;
• path - строка, содержащая путь cookie-записи; если не указан, то использует-
ся путь вызванного документа;
• domain - строка, содержащая домен нужной cookie-записи; если не указан, то
используется домен вызванного документа;
• secure - логическое значение (true или false), определяющее необходимость
использования безопасного HTTP-соединения.
Обратите внимание, что в теле функции writeCookieQ происходит кодирование
значения параметра value с помощью встроенной функции escapeQ.
Для удаления cookie-записи можно использовать следующую функцию:
function deleteCookie(name, path, domain) {
/* удаление cookie-записи */
if (readCookie(name)) {
document .cooki e =
name + " = " +
((path) ? "; path= " + path : "") +
((domain) ? "; domain="+domain : "") +
'■; expires=Thu, 01-Jan-70 00:00:01 GMT"
}
}
Эта функция устанавливает дату срока хранения cookie-записи так, что запись
будет удалена. Параметр path должен иметь такое же значение, которое использо-
валось при создании cookie-записи, или иметь пустое значение (null), если при
2.9. Работа с Cookie _ 167
создании записи он не был определен. Таким же образом задается значение пара-
метра domain.
Советую вам поэкспериментировать с чтением, созданием и удалением cookie-
записей (листинг 2.4). При этом следует иметь в виду, что созданные или изме-
ненные cookie-записи будут записаны на диск только после закрытия браузера.
До этого записи существуют лишь в кэше (оперативной памяти). С другой сторо-
ны, cookie-записи загружаются в оперативную память и становятся доступны как
значение свойства document.cookie только при запуске браузера.
Листинг 2.4. HTML-код для эксперимента со сценарием, записывающим и читающим cookie-запись
<НТМ1>
<SCRI _ PT>
function readCookie(name) { // чтение cookie-данных записи
/ / код
function getCookieVal(n){ /* вспомогательная функция,
вызываемая из readCookieO */
// код
i
function writeCookie(name. value, expires, path, domain, secure) { /*
запись cookie */
// код
}
/ * Срок хранения - 1 год от текущей даты: */
var dl = new Date ()
var d2 = d.getTimeO + (365*24*60*60*1000)
dl.setTime(d2)
/* Запись и чтение cookie: */
writeCookie( "myrecord"," Привет ", d l)
alert (readCookie("myrecord") )
</SCRIPT>
</HTML>
Вы можете организовать для зарегистрированных посетителей вашего сайта до-
ступ к специальным страницам, предназначенным только для них. В этом случае
сценарий проверяет наличие в cookie-файле записи с некоторым фиксированным
именем (например, myspecrecord)ичитаетеезначение, содержащее пароль. Если
пароль правильный, то в документ загружается ссылка на защищенный паролем
документ либо сам этот документ. Если такой cookie-записи не нашлось либо па-
роль в этой записи не верен, то в документ загружается поле ввода пароля. Если
введенный пользователем пароль верен, то сценарий создает cookie-запись с име-
нем myspecrecord и записывает в нее пароль. После этого в текущий документ
загружается либо ссылка, либо сам защищенный документ. При следующем по-
сещении этого сайта пользователю не придется снова вводить пароль, поскольку
сценарий просто считает его из cookie-записи. Это, конечно, справедливо до тех
пор, пока cookie-запись с паролем сохраняется на диске компьютера пользовате-
ля. Поэтому ее можно обновлять с помощью сценария, указывая новое значение
срока хранения, вычисленное на основе текущей даты (например, текущая дата
плюс месяц).
168___________________________________________Глава 2, Основы создания сценариев
ВНИМАНИЕ - -
Значение пароля не должно фигурировать в сценарии в явном виде, а записывать пароль
в cookie-файл желательно в зашифрованном виде.
Несложный алгоритм преобразования пароля вы можетепридумать самостоятель-
но. Другой вариант защиты страниц сайта с помощью пароля рассмотрен в гла-
ве 4, в подразделе 4.8.10.
Для закрепления полученных навыков рекомендую вам написать сценарий, ис-
пользующий cookie-запись для проверки, была ли обновлена веб-страница с мо-
мента последнего ее посещения пользователем. Если вы решитесь на это, то сове-
тую еще раз обратиться к свойствам объекта Date (см. подраздел 1.7.5).
Глава 3. Объектная модель
браузера и документа
В предыдущей главе вы уже познакомились с понятием и основными элементами
объектной модели браузера и документа (рис. 3.1). Материал этой главы носит
обзорно-справочный характер. Он понадобится вам при чтении главы 4, посвя-
щенной примерам сценариев. Заметим, что здесь рассматриваются далеко не все
объекты, а лишь основные.
3.1. Объект window
Объект window содержит коллекцию frames всех фреймов, заданных в HTML-до-
кументе с помощью контейнерного тега <FRAMESET>. Объект window имеет свой-
ства, методы, события, а также дочерние объекты. Приведем их полные перечни
и рассмотрим, с разной степенью подробности, только наиболее важные с прак-
тической точки зрения.
3.1.1. Свойства window
• parent - возвращает родительское для текущего окно;
• self- возвращает ссылку на текущее окно;
• top - возвращает ссылку на главное окно;
• name - название окна;
• opener - окно, создаваемое текущим;
• closed - сообщает, если окно закрыто;
• status - текст, показываемый в строке состояния браузера;
• defaultStatus - текст по умолчанию строки состояния браузера;
• returnValue - позволяет определить возвращенное значение для события или
диалогового окна;
• client - ссылка, которая возвращает объект навигатора браузеру;
• document - ссылка только для чтения на объект окнаdocu ment;
• event - ссылка только для чтения на глобальный объект event;
• history - ссылка только для чтения на объект окна history;
170
Глава 3. Объектная модель браузера и документа
I checkbox!-----reset j
I----submit I
textareal-----hidden I
11----1 select I
options
iFiieuploadl—
Рис. 3.1. Объектная модель
• location - ссылка только для чтения на объект окна Location;
• navigator - ссылка только для чтения на объект окна navigator;
• screen - ссылка только для чтения на глобальный объект screen.
Свойство parent позволяет обратиться к объекту, находящемуся в иерархии на
одну ступень выше - например, к окну, содержащему коллекцию фреймов, в ко-
торой находится наш фрейм. Для перемещения на две ступени вверх мы должны
использоватьparent.parentит.д.:
3.1. Объект window.
.171
parent,window.frames(0)
pa rent.parent.window.frames(0)
Чтобы обратиться к самому главному окну, то есть к окну браузера, следует ис-
пользовать свойство top. Однако top не может обращаться к главному фрейму ва-
шей системы разбиения на фреймы.
Свойство name соответствует имени фрейма, которое мы задаем в теге <FRAMESET>.
Свойство status полезно использовать для вывода сообщений во время работы
сценария, например при отладке:
window.51а1из="Сейчас работает сценарий"
3.1.2. Методы window
• openQ - открывает новое окно браузера;
• close() - закрывает текущее окно браузера;
• showHelpQ - показывает окно подсказки как диалоговое;
• showModalDialog() - показывает новое окно как диалоговое (модальное);
• alertQ - показывает окно предупреждения с сообщением и кнопкойОК;
• promptQ - показывает окно приглашения с сообщением, текстовым полем
и кнопками ОК и Cancel (Отмена);
• confirmQ- показывает окно подтверждения с сообщением и кнопками ОК и Cancel
(Отмена);
• navigateQ - загружает другую страницу с указанным адресом;
• blurQ - убирает фокус с текущей страницы; соответствующее событие - onblur;
• focus () - устанавливает страницу в фокус; соответствующее событие - onfocus;
• scrollQ - разворачивает окно на заданные ширину и высоту;
• setlntervalQ - указывает процедуре выполняться периодически через задан-
ное количество миллисекунд;
• setTimeoutQ - запускает программу через заданное количество миллисекунд
после загрузки страницы;
• clearlntervalQ - обнуляет таймер, заданный методомsetlntervalQ;
• clearTimeoutQ - обнуляет таймер, заданный методомsetTimeout();
• execScriptQ - выполняет код сценария; по умолчаниюJSc ript.
3.1.3. События window
• onblur - выход окна из фокуса;
• onfocus - окно становится активным;
• onhelp - нажатие пользователем клавиши F1;
• onresize - изменение пользователем размеров окна;
• onscroll - прокрутка окна пользователем;
• onerror - ошибка при передаче;
172 Глава 3. Объектная модель браузера и документа
• onbeforeunload - передвыгрузкой страницы, чтопозволяетсохранитьданные;
• onload - страница полностью загружена;
• onunload - непосредственно перед выгрузкой страницы.
Три из перечисленных выше событий происходят в результате действий пользо-
вателя. Если открыто несколько окон браузера, пользователь может переключаться
между ними, переводя фокус с одного окна на другое. Эти действия инициируют
события onblurи onfocus. Заметим, что эти же события можно вызвать программ-
ным способом, используя методы blur и focus. Если происходит ошибка при за-
грузке страницы или ее элемента, то инициируется событие onerror. Мы можем
использовать это событие в программе, чтобы, например, попытаться еще раз за-
грузить страницу или как-то изменить дальнейшие действия.
Пример
<SCRIPT>
function window.onerrг (] (
alert("Произошла ошибка! Попробуйте еще раз")
>
</SCRIPT>
Событие onload происходит, когда страница полностью загружена в окно; событие
onbeforunload-nepeflTeMKaKCTpaHHnanoKHHeTOKHo;co6brraeonunload—когда стра-
ница выгружена, перед загрузкой новой страницы или перед закрытием браузера.
Пример
<SCRIPT>
function window.onunload() {
alert("Страница выгружается!")
}
</SCRIPT>
Объект window имеет несколько дочерних объектов, которые доступны с его по-
мощью: document, history, navigator, location, event и screen.
3.2. Объект document
Объект document является центральным в иерархической объектной модели
и представляет всю информацию о HTML-документе с помощью коллекций
и свойств. Он также предоставляет множество методов и событий для работы с до-
кументами. Поскольку мы уже рассматривали некоторые основные приемы обра-
щения с этим объектом, то здесь ограничимся лишь справочными сведениями.
3.2.1. Свойства document
Свойство Атрибут Назначение
activeElement Идентифицирует активный элемент
alinkColor ALINК Цвет активных ссылок на странице
bgColor BGCOLOR Определяет цвет фона элемента
body Ссылка только для чтения на неявный основной
____________________________________________объект документа, определенный втеге<BODY>
3.2. Объект document
173
Свойство
Атрибут
Назначение
cookie
Строка cookie-записи. Присвоение нового значения этому свойству приводит к записи cookie на диск после закрытия браузера
domain
Устанавливает или возвращает домен документа для его защиты или идентификации
fgColor
TEXT
Устанавливает цвет текста переднего плана
lastModified
Дата последнего изменения страницы, доступна как строка
linkColor
LINK
Цвет еще не посещенных гиперссылок на странице
location
Полный URL документа
parentWindow
Возвращает родительское окно для документа
readyState
Определяет текущее состояние загружаемого объекта
referer
URL страницы, которая вызвала текущую
selection
Ссылка только для чтения на дочерний для document объект selection
title
TITLE
Определяет справочную информацию для элемента, используемую при загрузке или во всплывающей подсказке
url
URL
URL-адрес документа клиента или в теге <МЕТА>
vlinkColor
VLINK
Цвет посещенных ссылок на странице
3.2.2. Коллекции document
• all - коллекция всех тегов и элементов в основной части документа;
• anchors - коллекция всех «якорей» (закладок) в документе;
• applets - коллекция всех объектов в документе, включая встроенные элемен-
ты управления, графические элементы, апплеты, внедренные и другие объекты;
• embeds - коллекция всех внедренных объектов в документе;
• forms -коллейция всех форм на странице;
• frames - коллекция всех фреймов, определенных в теге<FRAMESET>;
• images - коллекция всех графических элементов (изображений) на странице;
• links - коллекция всех ссылок и блоков <AREA> на странице;
• plugins - еще одно название для коллекции внедренных объектов документа;
1 • scripts - коллекция всех разделов <SCRIPT> на странице;
• stylesheets - коллекция всех конкретных свойств стиля, определенных в доку-
3.2.3. Методы document
• clear - очищает выделенный участок;
• close - закрывает текущее окно браузера;
174
.Глава 3. Объектная модель браузера и документа
• createElement - создает экземпляр элемента для выделенного тега;
• elementFromPoint - возвращает элемент с заданными координатами;
• execCornmand - выполняет команду (операцию) над выделением или областью;
• open - открывает документ как поток для обработки результатов применения
методов write и writein;
• query* ryCommandE nabled - сообщает, доступна ли данная команда;
• queryCommandlndeterm - сообщает, если данная команда имеет неопределен-
ный статус;
• queryCommandState - возвращает текущее состояние команды;
' • queryCommandSupported - сообщает, поддерживается ли данная команда;
• queryCommandText - возвращает строку, с которой работает команда;
• query CommandValue - возвращает значение команды, определенное для доку-
мента или объекта TextRange;
• write - записывает текст и код HTML в документ, находящийся в указанном
окне;
• writein - записывает текст и код HTML, заканчивающийся возвратом каретки.
3.2.4. События document
• onafterupdate - возникает при окончании передачи данных;
• onbeforeupdate - возникает перед выгрузкой страницы;
• onclick - происходит при щелчке левой кнопкой мыши;
• сidbklick - происходит при двойном щелчке левой кнопкой мыши;
• ondragstart - происходит, когда пользователь начинает перетаскивание;
• onerror - ошибка при передаче;
• onhelp - нажатие пользователем клавиши F1;
• onkeydown - возникает при нажатии клавиши;
• onkeypress - возникает при нажатии клавиши и продолжается при удержании
клавиши в нажатом состоянии;
• onkeyup - возникает, когда пользователь отпускает клавишу;
*. onload - возникает при полной загрузке документа;
• onmousedown - происходит при нажатии кнопки мыши;
• omousemove - происходит при перемещении указателя мыши; ,
• <mouseout - происходит, когда указатель мыши выходит за границы эле-
мента;
• оптuseover - происходит, когда указатель мыши входит на элемент;
<• onmouseup - происходит, когда пользователь отпускает кнопку мыши;
• onreadystatechange - возникает при изменении свойства readystate;
• onselectstart - происходит, когда пользователь в первый раз запускает выде-
ленную часть документа.
3.4. Объект history.
.175
3.3. Объект location
Объект location содержит информацию об URL-адресе (и его компонентах) теку-
щей страницы, а также методы, позволяющие обновлять страницы.
3.3.1. Свойства location
• href- полный URL-адрес в виде строки;
• hash - строка, следующая в URL за символом#, с помощью которого указыва-
ется, к какому анкеру следует переместиться при загрузке документа.;
• host - часть URL«хосг.порт»; значение порта содержится лишь тогда, когда
оно явно было указано в URL-адресе;
• hostname - часть URL «хост»;
• pathname - путь к объекту или файлу, находящийся после третьего«/»;
• port - номер порта URL;
• protocol - начальная часть, определяющая протокол, за которой следует двое-
точие, например «http:»;
• search - строка запроса или данные URL после знака«?».
Например, если вы загрузили страницу с адресом http://www.piter.com, то значе-
нием location.href будет эта строка.
Присваивая свойству href новое значение, мы можем изменять показываемую
в браузере страницу, например:
window.location.href = "http://www.rambler.ru"
3.3.2. Методы location
• assign() - загружает другую страницу; этот метод эквивалентен изменению
свойства window.location.href;
• reloadQ - обновляет текущую страницу;
• replaceQ - загружает страницу с указанным в параметре URL-адресом и заме-
няет URL-адрес текущей страницы (location.href).
Некоторые веб-сайты могут содержать страницы, которые не предназначены для
посещения пользователем и занесения их в список посещенных страниц. Напри-
мер, перемещение по сайту может привести пользователя на некоторые промежу-
точные страницы, которые ему больше не понадобятся. При этом желательно, что-
бы пользователь не мог вернуться к ним снова с помощью кнопки Назад (Back).
В этом случае используют метод location.replace(URL-aflpec) для перехода к ука-
занной странице без занесения его в список документов, переход к которым осу-
ществляется щелчком на этой кнопке.
3.4. Объект history
Объект history содержит информацию об адресах страниц, которые браузер посе-
тил во время текущего сеанса. Мы можем передвигаться по этому списку с по-
176.
.Глава 3. Объектная модель браузера и документа
мощью сценария и загружать соответствующие страницы. Объект history имеет
только одно свойство и три метода.
3.4.1. Свойство history
length - количество элементов в списке посещенных страниц.
Это свойство используется в сценарии для контроля того, чтобы не выйти за пре-
делы списка.
3.4.2. Методы history
• back() - загружает предыдущую страницу из списка;
• forwardQ - загружает следующую страницу из списка;
• до() - загружает страницу с относительным номером п из списка (от 0 до
history.length-1) или с указанным URL-адресом.
В следующем примере загружается первая страница, а затем загружается пятая
страница, причем предварительно проверяется, существует ли она в списке уже
посещенных страниц:
.window.hi story.go(l)
if (window.history.1ength>4)
window.hi story.go(5)
Очевидно, метод history.go(-l) эквивалентен history.backQ, а метод window.history.
go(l) эквивалентен методу history.forwardQ.
3.5. Объект navigator
Объект navigator содержит информацию о производителе браузера, его версии
и возможностях.
3.5.1. Свойства navigator
• appCodeName - название кода браузера; например"Mozilla";
• appName - название браузера; например "Microsoft Internet Explorer";
• appVersion - версия браузера; например "4.0 (compatible;MSIE 6.0; Windows 98;
Win 9x4.90)";
• cookieEnabled - определяет возможность использования в браузере cookies со
стороны клиента; логическое значение;
• u!serAgent - название браузера, посылаемое с помощьюhttp-протокола; напри-
мер "Mozilla/4.0 (compatible; M S I E 6.0; Windows 98; Win 9x 4.90)".
3.5.2. Коллекции navigator
• mimeTypes; - коллекция всех типов документов и файлов, поддерживаемых
браузером;
• plugins - коллекция всех внедряемых объектов на странице.
3.6. Объект event.
.177
3.5.3. Методы navigator
• taintEnabled - возвращает значение false, включен для совместимости с Netscape
Navigator;
■ javaEnabled - сообщает, возможен ли в данном браузере запуск кода сценария
на языке JavaScript; логическое значение.
3.6. Объект event
Объект event позволяет получить информацию о каком-либо событии, происхо-
дящем в браузере. Эта информация содержится в следующих свойствах:
• altKey - возвращает состояние клавиши Alt, когда происходит событие;
• button - кнопка мыши, вызывающая событие;
• cancelBubble - устанавливается для запрета прохождения заданного события
вверх по объектной иерархии;
• clientX - возвращает координату х элемента, исключая обрамление, отступы,
полосы прокрутки и т. д.;
• clientY - возвращает координату у элемента, исключая обрамление, отступы,
полосы прокрутки и т. д.;
• CtrlKey - состояние клавиши Ctrl при появлении события;
• from Element - возвращает элемент, с которого ушел курсор мыши, для собы-
тий onmouseover и onmouseout;
' • keyCode - код ASCII нажатой клавиши; есть возможность изменять значение,
передаваемое объекту;
• offsetX - возвращает координату х указателя мыши в пикселах относительно
содержащего его элемента при возникновении события;
• offsetY - возвращает координату у указателя мыши в пикселах относительно
содержащего его элемента при возникновении события;
• reason - указывает, что перемещение данных прошло успешно или из-за чего
онопрекратилось;
• returnValue - определяет возвращаемое значение для события;
• screenX - возвращает горизонтальную координату указателя мыши относитель-
но экрана, когда происходит событие;
• screenY - возвращает вертикальную координату указателя мыши относитель-
но экрана, когда происходит событие;
• shiftKey - определяет состояние клавиши Shift при возникновении события;
• srcElement - возвращает элемент, с которого началось прохождение события;
• srcFilter - возвращает фильтр, создавший событиеonfilterchange;
• toElement - возвращает элемент, на который наезжает курсор мыши, при по-
явлении события onmouseover или onmouseout;
• type - возвращает название события как строку, без приставки on;
178.
.Глава 3. Объектная модель браузера и документа
• х - возвращает координату х указателя мыши соответственно либо к позицио-
нированному родительскому элементу, либо к окну;
• у - возвращает координату у указателя мыши соответственно либо к позицио-
нированному родительскому элементу, либо к окну.
Свойства объекта event устанавливаются в момент прохождения события и боль-
шинство из них доступны только для чтения (их нельзя изменить). Однако есть
два изменяемых свойства: keyCode и return Value. Мы уже рассматривали примене-
ние объекта event.
3.7. Объект screen
Объект screen содержит информацию о возможностях экрана пользователя и мо-
жет применяться, например, для определения размеров создаваемых окон и вы-
бора разрешения передаваемой графики (нет смысла загружать 32-битное изоб-
ражение, если монитор и видеокарта пользователя поддерживают только 256 цветов).
Объект screen имеет следующие свойства:
• width - возвращает ширину экрана пользователя (в пикселах);
• height - возвращает высоту экрана пользователя (в пикселах);
• bufferDepth - определяет, используется ли буфер для хранения «второго эк-
рана»;
• colorDepth - возвращает информацию, позволяющую решить, как использовать
цвета на экране; количество бит на пиксел устройства или видеобуфера пользо-
вателя;
• updatelnterval - возвращает или задает интервал времени между обновления-
ми экрана пользователя.
3.7.1. Объект TextRange
Объект TextRange (текстовая область) отображает разделы потока текста, форми-
рующего HTML-документ. Может использоваться для управления текстом вну-
три страницы.
3.7.2. Свойства TextRange
* htmlText - возвращает содержимое TextRange как текст и код HTML;
Ч text - простой текст, находящийся внутри элемента TextRange илитега<ОРПОМ>.
3.7.3. Методы TextRange
• collapse —стягивает текстовую область в точку в начале или конце текущей
области;
• compareEndPoints - сравнивает две текстовые области и возвращает значение,
показывающее результат;
3.7. Объект screen.
.179
• duplicate - возвращает копию области TextRange;
• execCommand - выполняет команду (операцию) над выделением или областью;
• expand - расширяет текстовую область, добавляя туда новый знак, слово, пред-
ложение, или указывает, какие неполные блоки полностью в ней содержатся;
• findText - определяет текстовую область, содержащую только искомый текст;
• getBookmark - возвращает значение, позволяющее в дальнейшем идентифици-
ровать данную позицию в документе;
• inRange - определяет, находится ли заданная текстовая область внутри теку-
щей;
• isEqual - определяет, равны ли заданная и текущая текстовые области;
• move - изменяет начальную и конечную точки текстовой области для включе-
ния в нее различного текста;
• moveEnd - заставляет текстовую область сжаться или расшириться до задан-
ной конечной точки;
■ moveStart - заставляет текстовую область сжаться или расшириться до задан-
ной начальной точки;
• moveToBookmark - передвигает границы текстовой области для включения дру-
гой, определенной ранее с помощью getBookmark;
• moveToElementText - передвигает границы текстовой области для включения
текста в заданном элементе;
• moveToPoint - передвигает границы текстовой области и сжимает ее вокруг
выбранной точки;
• parentElement - возвращает элемент, родительский по отношению ко всему, что
входит в текстовую область;
• pasteHTML -вставляет текст и/или HTML-код в текущую текстовую область;
• queryCommandEnabled - сообщает, доступна ли данная команда;
• queryCommandlndeterm - сообщает, если данная команда имеет неопределен-
ный статус;
• queryCommandState - возвращает текущее состояние команды;
• queryCommandSupported - сообщает, поддерживается ли данная команда;
• queryCommandText - возвращаетстроку, с которой работает команда;
• queryCommandValue - возвращает значение команды, определенное для доку-
мента или объектаText Range;
• scrollIntoView - переносит текущую текстовую область в видимую часть окна
браузера;
• select - делает активный подсвеченный участок выделения на странице рав-
ным текущей текстовой области;
• setEndPoint- переносит начальную или конечную точку текущей текстовой
области в начало или конец заданной области.
Глава 4. Примеры сценариев
В этой главе мы рассмотрим примеры решения некоторых задач. Не все из них
одинаково часто возникают при разработке приложений и, в частности, веб-стра-
ниц, однако их изучение позволит получить практические навыки программиро-
вания. Кроме того, некоторые примеры могут вдохновить вас на разработку соб-
ственных проектов.
4.1. Простые визуальные эффекты
4.1.1. Смена изображений
В веб-дизайне часто возникает необходимость заменить одно изображение на дру-
гое. Новички нередко начинают свое творчество именно с этой операции. Поэто-
му рассмотрим данную задачу подробнее.
Суть смены изображений заключается в том, чтобы с помощью сценария изме-
нить значение атрибута SRC тега <IMG>. Напомним, что атрибут SRC имеет в каче-
стве значения строку, указвающую месторасположение графического файла. Если
элемент<IMG>, задающий изображение, содержится в HTML-документе, тов объ-
ектной модели имеется объект этого элемента со свойством src. Значение этого
свойства можно изменить в сценарии. При этом в окно браузера загружается со-
ответствующий графический файл, если, разумеется, он будет найден. В следую-
щем примере щелчок на изображении из файла pictl.gif заменяет его изображе-
нием из файла pict2.gif. Поскольку сценарий очень небольшой, он записан в строке,
которая присваивается атрибуту onclick тега <MG>.
<HTML>
<IMG ID = "myimg" SRC = 'pictl.gif
onclick = "document.all.myimg.src = ' p i c t2 . g i f' " >
</HTML>
В приведенном выше примере смена изображения происходит лишь при первом
щелчке на нем. Последующие щелчки не приведут к видимым изменениям, по-
скольку второе изображение будет заменяться им же. Чтобы повторный щелчок
приводил к отображению предыдущего рисунка, сценарий необходимо слегка ус-
ложнить: следует создать переменную-триггер (так называемый флаг), принима-
ющий одно из двух возможных значений. По текущему значению флага сценарий
может определить, какое именно из двух изображений следует отобразить. После
смены изображения необходимо изменить и значение флага. Далее приведен ва-
риант кода:
4.1. Простые визуальные эффекты.
.181
<HTML>
<IHG ID = "myimg" SRC = 'pictl.gif onclick = "imgchangeQ ">
<SCRIPT>
var flag=false // флаг (триггер)
function imgchange() { // обработчик щелчка на изображении
if (flag) document.all.myimg.src = "pictl.gif"
else document.all.myimg.src = "pict2.gif"
flag=!flag // изменяем значение флага на противоположное
}
</5CRIPT>
</HTML>
Думаю, с изменением одного изображения все ясно. А как быть в случае несколь-
ких изображений? Например, на веб-странице расположена галерея миниатюр
(thumbnails - уменьшенных копий крупномасштабных изображений). Мы хотим,
чтобы при щелчке кнопкой мыши на миниатюре она увеличивалась, а затем при
щелчке на увеличенном изображении оно уменьшалось. Для решения этой зада-
чи потребуется столько флагов, сколько имеется изображений. Флаги определим
как массив, каждый элемент которого будет соответствовать отдельному изобра-
жению. Далее мы не будем создавать отдельную функцию-обработчик события
onclick для каждого графического объекта. Вместо этого создадим одну функцию-
обработчик, которая кроме всего прочего будет сама определять, на каком именно
изображении произошел щелчок. Идентификаторы ID тегов <MG> зададим неко-
торым регулярным образом (например "10", "il", "i2", ...). Так часто поступают
при использовании массивов. Создадим еще два массива, содержащих имена гра-
фических файлов: один для исходных изображений, а другой - для замещающих.
Наконец, HTML-документ с изображениями сгенерируем с помощью сценария.
Для этого сначала сформируем строку, содержащую теги <MG ...>, а затем запишем
ее в документ. В листинге 4.1 приводится код, реализующий эту программу.
Листинг 4.1. Код программы для увеличения миниатюр при щелчке мыши
<HTML>
<SCRIPT>
var apictl = new Array( "pictl.gif" ,...) /* массив имен исходных
файлов * /
var apict2 = new Array("pict2.gif" ,...) /* массивимензамещающих
файлов */
var aflag = new Array(apictl.length) // массив флагов
/* Формирование строки тегов, описывающих изображения */
var xstr = " '
for(i =0; i < apictl.length; i++){
xstr + = '<IMG ID = "i1 + i + ■ SRC = " ' + a p i c tl [ i ] + '" onclick =
"imgchangeO">'
}
document.write(xstr) // запись в документ
function imgchangeO { // обработчик щелчка на изображении
var xid = event.srcElement.id // id изображения, на котором бы л щелчок
var n = parselnt(xid.substr(1)) // выделяем номер элемента
if (aflagtn])
document. all [xid] .src = apictl[n] продолжение #
182.
.Глава 4. Примеры сценариев
Листинг 4.1 (продолжение)
else
document.all[xid].sr c = apict2[n ]
aflag[n] = !aflag[n] /* изменяем значение флага
на противоположное */
I
</SCRIPT>
</HTML "•
Обратите внимание, как мы обращаемся к свойству src: document.allfxid].src, а не
doniiment.all.xid.src и тем более не document.all["xid"].src. Это объясняется тем,
что xid является строковой переменной, содержащей значение идентификато-
ра ID, а не собственно значением идентификатора.
4.1.2. Подсветка кнопок и текста
Рассмотрим задачу изменения цвета кнопки при наведении на нее указателя мыши.
При удалении указателя с кнопки должен вернуться ее первоначальный цвет. Это
так называемая подсветка кнопок. Сразу займемся общим случаем нескольких
кнопок. В нашем примере три элемента, задающие кнопки, находятся в контейне-
ре формы <FORM>. К этому контейнеру привязываются обработчики событий
onmouseover (наведение указателя мыши) и onmouseout (удаление указателя
мыши). Таким образом, инициатором (получателем) этих событий может быть
любой элемент формы (в нашем примере - любая из трех кнопок). В обычном
состоянии кнопки имеют серый цвет, заданный 16-м кодом аОаОаО. При наведе-
нии указателя мыши цвет кнопки становится желтым (yellow) (рис. 4.1).
<HTML>
<STYLE>
mystyle {font-weight: bold ; background-color : aOaOaQ}
</STYLE>
#
<FORM onmouseover = "COlorchangef'yellow')" onmouseout
="colorchange('aOaOaO')" >
:iNPLrI TYPE = "BUTTON " VALUE = "nep Baa" CLASS = "mystyle" onclick =
■"alert('Bbi нажали кнопку')">
INPUT TYPE = "BUTTON" VALUE = "Вторая" CLASS = "mystyle" onclick =
"alert( 'Вы нажали кнопку 2')">
<INPUT TYPE = "BUTTON" VALUE = "Третья" CLASS = "mystyle" onclick =
"alert('Bbi нажали кнопку 3
</FORM>
<SCRIPT>
function c o lo rc h ang e (c o lo r){6e(COlorU // изменение цвета кнопок
if (event.srcElement.type == "button")
event. srcElement.style.backgroundColor = color;
I
</SCRIPT>
</HTML>
Здесь в функции colorchangeQ проверяется, является ли инициатор события объек-
том типа button (кнопка). Если это так, то цвет кнопки изменяется, в противном
случае - нет. Без этой проверки изменялся бы цвет не только кнопок, но и фона.
Аналогичным образом можно изменять цвет и других элементов, например фраг-
ментов текста. Если требуется подсвечивать текст, то он должен быть заключен
в какой-нибудь контейнер, например в теги <Р>, <В>,<1> или <DIV>. В следующем
4.1. Простые визуальные эффекты
183
ЭЛКннга JavaScitpl\piobd\nbiicBeTKa.HTM ■ Нкю.вй
•ifflil
файл Правка firin избранное Сервис £правка
J j} Л & За Я J Ъг rJ @ - J Ё £ Ш
■.] вторая [ Третья|
3
j»
Готово
л- j Мой компьютер
Рис. 4.1. Подсветка кнопки при наведении на нее указателя мыши
примере цвет текста, заключенного в тег <В>, изменяется с синего на красный при
наведении на него указателя мыши:
<HTML>
Этот <В onmouseove r= "colorch('red ')" onmouseout = "colorch('blue ')■"
Style-'colOtr: Ыие">Жирный текст</В> при наведении на него указателя мши
изменяет цвет
<SCRIPT>
function colorch(color){
event.srcElement.style.color = color
</SCRIPT>
</HTML>
4.1.3. Мигающая рамка
Вы можете создать прямоугольную рамку, окаймляющую некий текст, кото-
рая периодически изменяет цвет. Иногда этот эффект используют для при-
влечения внимания пользователей. Рамка создается тегами одноячеечной таб-
лицы с заданием нужных атрибутов и параметров стиля. Далее необходимо создать
функцию, изменяющую цвет рамки таблицы на другой, и передать ее в качестве
первого параметра методу setlntervalQ. Второй параметр этого метода задает пе-
риод в миллисекундах, с которым вызывается функция, указанная в первом пара-
метре. Более подробно этот метод описан в разделе 2.8.
В приведенном ниже примере рамка изменяет цвет с желтого на красный с перио-
дом 0,5 с (рис. 4.2):
<HTML>
<TABLE ID="mytab BORDER=1 WIDTH=150 style = "border : 10 solid:yellow">
<Т11><то>нИгаицая paMKa</TD></TR>
</TABLE>
<SCRIPT>
function flash() { It изменение цвета рамки,
if ((document.all) f если в документе ничего нет
return null;
if (mytab. style.borderColor == 'yellow')
М
184______________________________________________Глава 4. Примеры сценариев
raytab. style. borderColor= 'red'
else
mytab. style.borderColor = 'yellow';
setlnterval("flash() " , 500);
</SCRIPT>
</HTML>
3 D VKnui ,i J.iv..fi):ij|it\ntiili«\P.
// мигание рамки с интервалом 500 мс
Файл Ораехч Вид Избранное Сервис £г
[[
[[Мигающая рамка •
ЗьО .f^^^P.
Рис. 4.2. Мигающая рамка
4.1.4. Переливающиеся цветами ссылки
Привлечь внимание посетителей к ссылкам на веб-странице можно с помощью
эффекта динамического изменения их цвета. Мы не будем обсуждать здесь целе-
сообразность этого метода, а сосредоточимся лишь на технической стороне. Суть
задачи состоит в том, чтобы случайным образом выбирать и устанавливать цвет
ссылок. В листинге 4.2 множества цветов, из которых происходит выбор, разли-
чаются для уже использованных и еще не использованных ссылок. Эти множе-
ства цветов задаются в виде массивов.
Листинг 4.2. Код для динамического изменения цвета ссылок
<А HREF="http://www. admi ral. ru/~dunaev/i is . Шт">Начало</А>
<A HREF=" http://www. admi ral. ru/~dunaev/ex _ amples . 1пт т">Примеры HT M L и
JavaScript</A> _
<A HREF=" http://www.admiral.ru/~dunaev/mybook.htm">MoH книги</А>
aclrlink=new ArrayO
aclrlink [0] = 'yellow'
aclrlink [1] = '#80FF80'
aclrlink [2]= #FFFF80 '
aclrlink [3]='#408000'
aclrvlink k=new ArrayO
aclrvlink [0]='blue'
aclrvlink [1) = 'purple-
aclrvlink [2] = ' black'
aclrvlink [3]=-red-
//
//
массив цветов
ссылок
неиспользованных
// массив цветов использованных ссылок
4.1. Простые визуальные эффекты
185
function colorchangeO { // изменение цвета
link=Math.round((aclrlink.length+0.l)*Math.randomO))
vlink= Math, round ((aclrvlink. length+0. l)*Math.randomO)
document.linkColor= aclrlink [link]
document. vli nkColor= aclrvlink [vlink]
}
setlnterval ("colorchange() ", 500) // изменение цвета через 500 мс
</SCRIPT>
Заметим, что в результате вставки этого сценария в HTML-документ все ссылки
документа начинают переливаться разными цветами, поскольку мы изменяем
свойства HnkColor и vlinkColor объекта document.
4.1.5. Объемныезаголовки
Объемные (выпуклые) заголовки довольно эффектны на веб-страницах. Зачастую
они создаются как графические файлы, которые вставляются в HTML-документ
с помощью тега <IMG>. Однако во многих случаях более экономичным является
решение, основанное на использовании таблиц стилей.
Идея создания объемного заголовка довольно проста: достаточно несколько над-
писей с одинаковыми содержанием наложить друг на друга с некоторым сдвигом
по координатам. Потребуются как минимум две такие надписи. Одна из них пред-
назначена для создания эффекта тени (задний план), а вторая располагается над
первой. Можно использовать еще одну такую надпись для создания эффекта под- -
светки. С эстетической точки зрения наилучший эффект достигается путем под-
бора цветов надписей (игрой света и тени) с учетом цвета фона. С технической
точки зрения нужный эффект получается применением таблиц стилей. В листинге
4.3 приведен пример HTML-документа, в котором объемный заголовок создает-
ся с помощью трех наложенных друг на друга надписей (рис. 4.3). Таблица
стилей определяется для тега абзаца <Р>. В данной таблице задаются цвет и па-
раметры шрифта надписей. Позиционирование надписей производится пара-
метрами атрибута STYLE контейнерных тегов <DI V>, в которые заключены теги
абзаца.
Листинг 4.3. Код для создания объемного заголовка
<HTML>
<HEAD><TITLE>3d эффект</TITLE><HEAD>
<! Каскадная таблица стилей для абзаца>
<STYLE>
Р {font-family:sans-serif; font-size : 72 ; font-weight:800;
color:00aaaa}
P.highlight {color:siIver}
P.shadow {coloridarkred}
</STYLE>
<BODY BGCOLOR = aeb98c>
<! Тень >
<DIV STYLE = "posi tion : absolute ; top:5; left:5">
<P CLASS = shadow>0бъeмный заголовок</Р>
продолжение *у
186
Глава 4 . Примеры сценариев
Листинг 4.3 (продолжение]
<\ Подсветка >
<DIV STYLE = "position:absolute; top:0; left:0">
<P CLASS = highlight>06beMHbiu загоповок</Р>
</DIV>
<! Передний план>
<DIV STYLE = "position:absolute; top:2; left:2">
<Р>Объемный заголовок</Р>
</BODY>
</HTML>
|.^3d эффект - Microsoft Internet Explomr
;айл ;щ
J J ± . -=»§;_!Й
Аив^рехОД:
_i
t II l
/* \ j
t Jl-гГ >~" - i
'-' | J J r»
УЛ
Ш\РШШЗО\{
1
• -r i Гс
Э Ной 1.о-
1Ы9Т«р
Рис. 4.3. Объемный заголовок, созданный с помощью каскадной таблицы стилей
Теперь рассмотрим функцию, которая создает заголовок с заданными параметра-
ми (листинг 4.4).
Листинг4.4. Пример функции, которая создаетзаголовоксзаданными параметрами
function d3(text, > у, tcolor, fsize , fweight, ff ami ly , zi nd) {
/* Объемный заголовок
Параметры:
text - текст заголовка
х - горизонтальная координата (left)
у - вертикальная координата (top)
tcolor - цвет переднего плана
fsizе - размер шрифта (пт)
fweight - вес толщина'шрифта)
family - название семейства шрифтов
zind - z-Index */
if (I textct) return null /* если не указан текст, то ничего не делаем */
/* Значения параметров по умолчанию:
if (Iffamily) f f ami ly = 'arial '
if (Ifweight) fweight=800
if (Ifsize) fsize=36
if (Itcolor) tcolor='00aaff
if (!y) У=0
*/
4.1. Простые визуальные
if (!x) х=0
/* Внутренние настройки */
var sd=5 , hd=2
var xzind=""
if (zind) xzind= " ;z-Index: "+zind
var xstyle=' font-family: ' + family + ';font-size: ' + fsize +
1 ;font-weight: ' + fweight+';'
var xstr = '<DIVSTYLE = "position: absolute; top:' + (y + sd) +
' ; 1ef t: ' + (x + sd) + xzind + '">'
xstr+= '<P styl e = " ' + xstyle + ' color:darkred">' + text + '</P></DIV>'
xstr+ = '<DIV STYLE = "position: absolute ; top:' + у + ';left:' + x +
xzind + ' ">'
xstr+ = '<P style ="' + xstyle + 'color:silver"> ' + text + '</P></DIV> '
xstr + = '<D I V STYLE = "position : absolute; top:' + (y + hd) + ' ; left:' +
(x + hd) + xzind + ' ">'
xstr+= '<P style = "' + xstyle + 'color:' + tcolor + '"'"> ' + text + '
</P></0IV>'
document .write(xstr) // запись в документ
В этой функции создается строка, содержащая необходимые теги, которая затем
записывается в HTML-документ. Среди параметров функции последний пред-
ставляет z-Index, с помощью которого можно установить слой, в котором нахо-
дится заголовок, и тем самым указать, будет ли заголовок располагаться над или
под каким-либо другим видимым элементом документа. Элементы с более высо-
ким значением z-Index находятся над элементами, у которых z-Index меньше. Пе-
рекрытие элементов с одинаковыми значениями z-Index определяется порядком
следования их тегов в HTML-документе. Значения параметров по умолчанию
(то есть когда они не указаны) вы можете задать самостоятельно. Можете также
поэкспериментировать со значениями внутренних параметров sd и hd, которые
определяют размеры тени и ореола подсветки.
Ниже приведен пример HTML-документа со сценарием, создающим три заголов-
ка с различными параметрами (рис. 4.4):
<HTML>
<HEAD><TITLE>3d эффект</TITLE><HEAD>
<SCRIPT>
function d3 (text, x, y, tcolor, f size , f weight, ff ami ly, zind) {
// код
}
d3("Привет!", 50,15,'red' ,40,800,'sans-serif')
d3("3To не графика",50,50, 'blue' ,72,800, ' times ')
d3 ("Это просто стиль текста" , 10, 80, ' 00f f 00 ' .92,930, ' arial ' .-7)
</SCRIPT>
</HTML>
4.1.6. Применение фильтров
С помощью так называемых фильтров каскадных таблиц стилей можно получить
разнообразные интересные визуальные эффекты. Например, постепенное появ-
ление (исчезновение) рисунка, плавное преобразование'одного изображения
в другое, задание степени прозрачности и т. п. В большинстве случаев веб-дизай-
неры добиваются подобных эффектов с помощью обработки изображений сред-
эффекты _ 187
// сдвиг тени и подсветки
188
Глава 4. Примеры сценариев
Э 3d эффект - Mhiioiuft Inleirw) E»ploiei
>ю не графика
й?Ш|[ь 1гШШй
3 Waft компьютер .
Рис. 4.4. Заголовки, созданные с помощью функции d3()
ствами графических редакторов, таких как Adobe Photoshop, Macromedia Flash
и др. При этом графика для Веб обычно сохраняется в файлах формата gif, png,
jpeg и swf.
• GIF очень популярен в веб-дизайне. Поддерживает чересстрочную загрузку,
прозрачность пикселов и анимацию. Однако глубина цвета в GIF-файлах огра-
ничена лишь 256 цветами, а пикселы могут быть либо полностью прозрачны-
ми, либо полностью непрозрачными (полупрозрачности быть не может).
• PNG имеет много общего с форматом GIF, но позволяет сохранять полноцвет-
ные изображения и не поддерживает анимацию.
• JPEG - еще один графический формат, часто используемый в веб-дизайне.
Позволяет сохранять полноцветные изображения фотографического качества
и загружать их в чересстрочном режиме, но не поддерживает прозрачность
и анимацию.
• В формате SWF сохраняется векторная графика и анимация, созданные в паке-
те Macromedia Flash, а также импортированные растровые изображения и зву-
ковое сопровождение. Прозрачность изображений здесь может принимать
множество значений от 0 до 100.
СОВЕТ
Во многих случаях при создании небольших анимаций (например, баннеров) и других не
слишком сложных визуальных эффектов можно вполне обойтись средствами таблиц сти -
лей и JavaScript, достигая своих целей при существенно меньшихзатратах ресурсов (объем
файлов, время на разработку). При разработке более сложных проектов фильтры можно
комбинировать с другими средствами.
4.1. Простые визуальные эффекты.
.189
Фильтр следует понимать как некий инструмент преобразования изображения,
взятого из графического файла и вставленного в HTML-документ с помощью тега
<IMG>. Однако следует иметь в виду, что фильтры работают только в IE4+. В этом
подразделе мы рассмотрим несколько наиболее интересных фильтров. Наша за-
дача заключается в том, чтобы научиться правильно применять фильтры.
Прозрачность
Прозрачность графического объекта в диапазоне целочисленных значений от 0 до
100 можно установить с помощью фильтра alpha. Значение 0 соответствует пол-
ной прозрачности изображения, то есть оно становится невидимым. Значение
100 соответствует, наоборот, полной непрозрачности изображения. Поэтому пра-
вильнее говорить, что alpha является степенью непрозрачности. Сквозь прозрач-
ные графические объекты видны нижележащие изображения. Степень их види-
мости определяется значением прозрачности изображения, лежащего выше. Кроме
того, прозрачность имеет несколько вариантов градиентной формы. Например,
можно сделать так, чтобы прозрачность постепенно увеличивалась от центра
к краям изображения. Это позволяет просто и весьма эффективно согласовать
вставляемое в документ изображение с фоном. Веб-дизайнеры хорошо знают, что
выполнение такой операции с помощью графического редактора требует опреде-
ленных навыков и усилий.
Фильтр alpha, как и другие, задается с помощью каскадной таблицы стилей и име-
ет ряд параметров. В следующем примере для графического изображения стиль
определяется с помощью атрибута STYLE
<IMG ID = "myimg" SRC = "pict.gif"
STYLE = "position:absolute; top: 10; left: 50;
filter:alpha(opacity = 70. style = 3)">
Здесь параметр opacity определяет степень прозрачности (точнее, непрозрачности)
как целое число в диапазоне от 0 до 100. Параметр style задает градиентную фор-
му распределения прозрачности по изображению как целое число от 0 до 3. Если
параметр style не указан или имеет значение 0, то градиент не применяется. Фильтр
alpha имеет и другие параметры, определяющие прямоугольную область изобра-
жения, к которой применяется фильтр. По умолчанию он применяется ко всему
изображению. На рис. 4.5 представлено исходное изображение и это же изобра-
жение, обработанное фильтром alpha с параметрами opacity = 70 и style = О, 1, 2, 3
.(слева направо и сверху вниз).
Фильтр можно определить в каскадной таблице стилей внутри контейнерного тега
<STYLE> с помощью ссылки, имеющей следующую структуру:
#1с)_изображения {f i Iter: имя_фильтpa (параметры)}
Заметим, что если не использовать символ #, фильтр не будет работать. В этом
случае рассмотренный выше пример можно оформить следующим образом:
<HTML>
<STYLE>
#myimg { position: absolute; top: 10; left: 50; filter: alpna(opacity =
70, style = 3)}
</STYLE>
<IMG ID = "myimg" SRC = "pict.gif"
</HTML>
190
Глава 4. Примеры сценариев
ЦОЛКнига JavaScnptSpiobaMilter_d4.htm -Microsoft Interne! Egplo
фаЛл Орэзка В»Д Избранное Сдрвис £праока
«лОврвиэд I
Ц
^~ Мой иоггмэтвр
Рис. 4.5. Результаты использования фильтра alpha с различными параметрами
Доступ к свойствам фильтра в сценарии определяется следующим образом:
docume.t .all. 1с1_изображения. f i l ters["имя_фильтра"] .параметр = значение
Для рассматриваемого случая это выражение может иметь, например, такой вид:
document.all.myimg.fiIters["alpha"].opacity = 30
Итак, вы можете управлять в сценарии степенью прозрачности и другими пара-
метрами фильтраalpha.
Выше мырассмотрелисинтаксисвыражений, воспринимаемый браузерами IE4+.
Для IE5.5+ можно использовать другой синтаксис, рекомендованный Microsoft.
Его особенность в том, что в каскадной таблице стилей задается ссылка на специ-
альный компонент и имя фильтра:
# 1с1_изображения {filter: progid : DXImageTransform. M icrosoft.
имя_фильтра(параметры)}
Пример
# myimg {filter: progid:DXImageTransform.Microsoft.alpha
(opacity = 70, style = 3)}
Доступ к свойствам фильтра в сценарии в новом синтаксисе определяется следую-
щим образом:
document.all.1й изображения.filters["DXImageTransform.Microsoft.
имя_фильтра"].параметр = значение
4.1. Простые визуальные эффекты__________________________________________191
Пример
document.all.myimg.filters["DXImageTransform.Microsoft.alpha"].opacity = 30
СОВЕТ "
Фильтры можно применять не только к графическим изображениям, но и к другим элемен-
там (например, к текстам, текстовым областям, кнопкам).
Трансформация
Фильтры преобразования изображений позволяют организовать постепенное
появление (исчезновение) изображения, а также трансформацию одного графи-
ческого объекта в другой. Это так называемые динамические фильтры. В отличие
от статических фильтров (например, alpha), их применение обязательно связано
со сценариями. Суть преобразования графического объекта заключается в том,
что сначала необходимо зафиксировать первое изображение, затем выполнить
замену этого изображения другим и/или изменить параметры того же самого изоб-
ражения, а после этого выполнить собственно трансформацию. Все эти действия
выполняются в сценарии. Фиксация и трансформация изображения производят-
ся с помощью специальных методов фильтра - соответственно applyQ и play().
При желании остановить процесс преобразования можно с помощью метода stopQ.
Для преобразования изображений используется фильтр revealtrans. Он имеет сле-
дующие параметры:
• duration - длительность преобразования в секундах (число с плавающей точ-
кой);
• transition - тип преобразования (целое число от 0 до 23); типу 23 соответству-
ет один из типов от 0 до 22, выбранный случайным образом.
Сначала рассмотрим применение фильтра revealtrans для создания эффекта появ-
ления изображения. Ниже приводится пример, в котором изображение постепен-
но появляется после загрузки документа, то есть по событию onload:
<HTML>
<BODY onload = "transform()">
<IMG ID = "myimg" SRC = "pict.gif" STYLE = "position:absolute; top:10;
left:50; visibility = "hidden" filter:revealtrans(duration = 3 ,
transition = 12)">
</BODY>
<SCRIPT>
function transforraO{ // появление изображения
document.all.myimg.style.visibility = "hidden" /* делаем изображение
невидимым */
myimg. filters C 'revealtrans") . applyO /* фиксируем исходное
состояние изображения */
myimg.style.visibility = "visible" // делаем изображение видимым
myimg. f iltersC ' revealtrans") .play() // выполняем преобразование
}
</SCRIPT>
</HTML>
В этом примере, в функции transform(), мыделаем изображение, заданное в HTML-
документе тегом <MG>, сначала невидимым, поскольку хотим, чтобы оно возни-
кало из небытия, а не исчезало. Затем с помощью метода apply() мы фиксируем
,192 _ Глава 4. Примеры сценариев
его как исходный кадр в цепочке кадров преобразования. Далее готовим конеч-
ный кадр - просто делаем изображение видимым. Наконец, применяем фильтр
с помощью метода play(). Мы использовали тип преобразования (transition = 12),
соответствующий эффекту плавной трансформации.
ВНИМАНИЕ —
Тип преобразования и его длительность можно задать не только в определении стиля
изображения, но и в сценарии.
<НТМ1_>
<BODY onload = " transformO ">
<IMG ID = "myimg" SRC = "pict.gif" STYLE = "position: absolute ; top:10:
leftrSO; filter:revealtrans">
</BODY>
<SCRIPT>
function transformO { // появление изображения
document . all .myimg.style.visibility = "hidden" /* делаем изображение
невидимым */
myimg. filters С"reveal trans") .apply С) /* фиксируем исходное
состояние изображения*/
myimg. style. visibility = "visible" // депаем изображение
видимым
myimg. filtersC'revealtrans") .Transi tion = 12 /* указываем тип
преобразования */
myimg. f iltersC'revealtrans") . play(3) /* выполняем
преобразование
длительностью Зс */
</SCRIPT>
</HTML>
Очевидно, чтобы добиться исчезновения изображения, необходимо поступить
наоборот: сначала сделать его видимым, а затем невидимым.
Теперь рассмотрим более общий случай: трансформацию одного графического
объекта в другой. Вы должны понимать, что в отличие от рассмотренного выше
случая, эта задача сводится к установке начального и конечного изображений. Это
делается путем присвоения нужных значений свойству src объекта, соответствую-
щего изображению.
<HTML>
<BODY onload = "transform () ">
<IMG ID = "myimg" SRC = "pictl.gif" STYLE = "position:a bsolute absolute; top:10;
left:50; fiIter: revealtrans(duratio n = 3, transition = 12) " =
</BODY>
<SCRIPT>
function transform2(){ // появление изображения
myimg. filters ("revealtrans"). apply () /* фиксируем исходное
состояние изображения */
// заменяем изображение
myimg. fiIters ("revealtrans") . play () /* выпопняем
}
</SCRIPT>
</HTML>
'преобразование */
4.1. Простые визуальные эффекты.
.193
В следующем примере зададим трансформацию изображения, которая происхо-
дит при щелчке на графическом объекте. При первом щелчке изображение из
файла pictl.gif трансформируется в рисунок из файла pict2.gif. При следующем
щелчке, наоборот, второй рисунок трансформируется в первый и т. д.
<HTML>
<IMG ID = "myimg" onclick = " transformsО" SRC = "pictl.gif" STYLE =
"position:absolute; top:10; left:50; fiIter:revealtrans(duration = 3,
transi tion = 12)">
<SCRIPT>
function transoformB(){ // преобразование изображения
myimg. filters ("reveal trans") . apply () // фиксируем исходное
изображение
if (document.all.myimg.src.indexOf("pictl") ! = -1) /* определяем
конечное
изображение */
document.all.myimg.src = "pict2.gif"
else
document.all.myimg.src = "pictl.gif"
myimg.fiIters("revealtrans").play() // выполняем преобразование
}
</SCRIPT>
</HTML>
СВОЙСТВО src содержит полный URL-адрес графического объекта, даже если мы
присваиваем ему только имя файла. Поэтому в теле функции transform3() прихо-
дится выяснять, входит ли строка с именем файла в URL-адрес, а не проверять,
равен ли URL-адрес имени файла.
Рассмотренный выше синтаксис выражений воспринимается браузерами IE4+ .
Для IE5.5+ можно использовать другой синтаксис, рекомендованный Microsoft.
Его особенность состоит в том, что в каскадной таблице стилей задается ссылка
на специальный компонент и имя фильтра. Последний пример в этом синтаксисе
имеет следующий вид:
<HTML>
<STYLE>
#myimg {position:absolute; top:10; left:50;
filter:progid:DXImageTransform.Microsoft.revealtrans(duration = 3,
transition = 12)}
</STYLE>
<IMG ID ="myimg" onclick = "transforms( )"' SRC = "earth.gif">
<SCRIPT>
function transforms(){ // преобразование изображения
my img.fiIters("DXImageTransform.Microsoft.revealtrans ").apply()
/* фиксируем исходное
изображение*/
if (document.all.myimg.src.indexOf("earth")!= -1) /* определяем
конечное
изображение*/
document.all.myimg.src = "sun.gif"
else
document.all.myimg.src = "earth.gif"
myimg.filters("DXImageTransform.Microsoft.revealtrans").play О
/'выполняем
преобразование */
194 _ Глава 4. Примеры сценариев
i
</SCRIPT>
</HTML>
Повороты
В браузерах I E5.5+ возможно применение фильтра basicimage, имеющего множе-
ство параметров, с помощью которых изображение можно повернуть на угол, крат-
ный 90°, задать прозрачность, зеркально отразить, определить маску и др. В IE4+
все эти эффекты, за исключением поворотов, создаются отдельными фильтрами.
Порядок их применения такой же, как и фильтра alpha, задающего прозрачность.
Здесь мы рассмотрим создание эффекта поворота.
Параметр rotation фильтра basic image принимает целочисленные значения: 0 (нет
поворота), 1 (90°), 2 (180°), 3 (270°). В примере, приведенном ниже, в результате
щелчка на изображении оно поворачивается на угол 90°.
< HTML >
<STYLE>
#myimg {filter: progid:DXImageTransform. Mi crosoft. basicimage}
</STYLE>
<IMG ID = "myimg" src = "pict.gi " onclick = "rotor()">
<SCRIPT>
function rotor(){ // повороты
var r =
document. all. myimg.fiIters [ "DXImageTransf orm.Microsoft. basicimage"] .
rotation
if (r == 3)
r = 0
else
r++
document.all.myimg.fiIters ["DXImageTransform.Microsoft. basicimage"] .
rotation = r
}
</SCRIPT>
</HTML. >
Применение нескольких фильтров одновременно
К видимому элементу можно применить несколько различных фильтров одно-
временно. В следующем примере мы делаем графический объект полупрозрачным
с помощью фильтра alpha и трансформируемым с помощью фильтра revealtrans.
Полупрозрачным изображение становится сразу при загрузке в браузер, а транс-
формация происходит при щелчке на нем. Разумеется, вы можете придумать
и другой сценарий применения фильтров. Вот вариант кода, реализующий мой
сценарий:
<HTML>
<IMG ID = "myimg" onclick = "transforms i " SRC = "earth.gif"
STYLE = "position.-absolute; top:10; left:50;
Iter: revealtrans [duration = 3, transition = 12), alpha(opaci ty = 50)">
<SCRIPT>
function transform3() { // преобразование изображения
myimg.filters("revealtrans") .apply () // фиксируем исходное
// изображение
if (document. all .myimg.src . indexOf ( "pictl") !=-1) /* определяем
конечное изображение */
4.1. Простые визуальные эффекты__________________________________________195
document.all.myimg.src = "pict2.gif"
else
document.all.myimg.src = "pictl.gif"
myimg.fliters("revealtrans").play() /* выполняем
преобразование */
}
</SCRIPT>
</HTML>
4.1.7. Эффект печати на пишущей машинке
Постепенный вывод на страницу текста (эффект печати на пишущей машинке)
можно создать на основе использования метода setlntervalQ. Об этом и других
методах управления во времени уже говорилось в разделе 2.8.
Ниже приводится HTML-документ с заголовком и текстовой областью, задавае-
мой тегом <TEXTAREA>. Сценарий в этом документе выводит в текстовую область
символы некоторой строки с задержкой 0, 1 с. После завершения вывода всей строки
этот процесс останавливается. Функция wrtextQ просто формирует строку, кото-
рую требуется вывести в текстовой области в данный момент. Собственно вывод
производится путем присвоения значения свойству value текстовой области. Функ-
ция wrtextQ передается в виде строкового параметра методу setlntervalQ, который
и вызывает ее периодически с интервалом, указанным в миллисекундах, в каче-
стве второго параметра. В примере этот интервал равен 100. Метод setlntervalQ
возвращает целочисленный идентификатор запущенного процесса, который мы
сохраняем в переменной xinterval. Это значение передается методу clearlntervalQ
как параметр, чтобы завершить процесс периодического вызова функции wrtextQ,
когда «напечатается» вся строка.
<HTML>
<Н1>Моя веб-страница</Н1>
<TEXTAREA ID = "mytext" ROWS = 8 COLS = 25></TEXTAREA>
<SCRIPT>
var mystr = "Привет, мои друзья! Рад вам сообщить приятное известие"
var astr = mystr.split("") // разбиваем строку на массив
// СИМБОЛОБ
var typestr = ""
var i = 0
var xinterval = setlnterval ("wrtext () " , 100) /* периодический вызов
функции wrtext() */
function wrtext(){ // вызывается с помощью метода setlnterval()
if (i < astr .length) {
typestr+= astr[i] // выводимая строка
document.all.mytext.value = typestr // вывод строки
i+ +
}else
clearlnterval(xinterval) // прекращаем вывод текста
}
</SCRIPT>
</HTML>
Другие примеры использования метода setlntervalQ вы найдете в следующем
разделе.
196.
.Глава 4. Примеры сценариев
4.2. Движение элементов
Перемещение видимых элементов HTML-документа в окне браузера основано на
изменении значений параметров позиционирования top и left таблицы стилей. Вы
можете указать эти параметры в атрибуте ST Y LE или в теге <STYLE> для тех тегов,
которые задают видимые элементы (изображения, тексты, ссылки, кнопки и т. п.).
Затем остается только определить в сценарии способ изменения параметров ко-
ординат top и left для того или иного элемента. Можно заставить элемент пе-
ремещаться постоянно, в течение заданного времени или в ответ на события
(например, по щелчку кнопкой мыши, при наведении указателя мыши на эле-
мент и т. п.).
ВНИМАНИЕ --
Оператор цикла для организации расчета координат обычно не применяется, поскольку,
пока выполняется цикл, другие выражения сценария не работают.
Чтобы распараллелить вычислительные процессы, используют методы setlntervalQ
и setTimerQ, описанные в разделе 2.8.
4.2.1. Движение по заданной траектории
Схема сценария, осуществляющего непрерывное перемещение видимого элемен-
та документа, имеет следующий вид:
function ini tmove() { // инициализация движения
// подготовка к запуску функции move()
setlnterval("move()", задержка)
function move(){
/* изменение координат top и left
стиля перемещаемого элемента */
}
in1t_move() // вызов функции для перемещения элемента
Таким образом, мы создаем две функции, имена которых могут быть произволь-
ными. Первая функция, init_move(), осуществляет подготовку исходных данных
и вызывает метод setlntervalQ с указанием в качестве первого параметра имени
второй функции move() в кавычках. Вообще говоря, первый параметр метода
setlnterva() является строкой, содержащей выражение, которое должно выполнять-
ся периодически во времени. Вторая функция, move(), изменяет координаты эле-
мента. Поскольку метод setlntervalQ вызывает функцию move() периодически через
заданное количество миллисекунд, то координаты элемента изменяются посто-
янно. При этом создается эффект движения. Скорость и плавность движения за-
висят от величин приращения координат (в функции moveQ) и временной задерж-
ки (второго параметра метода setlntervalQ). Чтобы начать перемещение элемента,
необходимо просто вызвать первую функцию, init_move().
Линейное движение
Рассмотрим в качестве примера сценарий линейного перемещения изображения,
то есть движения по прямой линии.
4.2. Движение элементов.
.197
<HTML>
<IMG ID="myimg" SRC="pict.gif " STYLE="posit ion: absolute; t
<SCRIPT>
function init move() {
dx = 8
// приращение по у
dy = 3
// приращение по х
setImerval<"move()" . 2Q0)
// периодический в
move ()
}
top:10;left:20" >
вызов функции
function move() { // изменение координат изображения
/* Текущие координаты: */
var у = parselnt (document.all.myimg.style.top)
var x = parselnt (document.all.myimg . style.left)
/* Новые координаты: */
document . all.myimg.style . top = у + dy
document.all. myimg.style.left = x + dx
}
init move() // начинаем движение
</SCRIPT>
</HTML>
Обратите внимание, что переменные dx и dy являются глобальными и поэтому
видны в функции move(). Если бы мы определили их в init_move() с помощью клю-
чевого слова var, то они стали бы локальными и недоступными в moveQ. Заметьте
также, что значения параметров позиционирования в таблице стилей имеют стро-
ковый тип. Поэтому нам потребовалось применение функции parselntQ для при-
ведения их к числовому типу.
Теперь усовершенствуем приведенный выше код: сделаем так, чтобы идентифи-
катор перемещаемого объекта, а также приращения координат и временную за-
держку можно было передавать функции init_move() в качестве параметров. В ре-
зультате мы получим универсальную функцию линейного перемещения любого
видимого элемента. Вот вариант соответствующего кода:
function init_move(xid, dx, dy) {
var prmstr = ..." + xid + " ' ," +dx + ' ' + dy /* строка параметров
для move() */
prmstr = "move(" + prmstr + ")"
setlnterval(prmstr, 200) /* периодический вызов
функции move() */
}
function move(xid, dx , dy) {
у = parselnt(document. all[xid].style.top )
x = parselnt(document. all[xid] . style. left)
document.all.myimg.style.top = у + dy
document.all.myimg.style. left = x + dx
)
1nit_move<"myimg" ., 10, 5) // пример вызова функции
Обратите внимание, как методу setlntervalQ передается указание на функцию
moveQ с параметрами. В явном виде параметры функции, указанной в вызове ме-
тода setlntervalQ, передавать нельзя, поскольку первый параметр этого метода
имеет строковый тип. Поэтому мы и формируем то, что ему требуется, - строку.
198Г8Глава 4. Примеры сценариев
Остановка движения
Рассмотренные выше сценарии обеспечивают непрерывное перемещение элемента
документа. Поскольку это перемещение осуществляется по прямой линии, то рано
или поздно элемент выйдет за пределы окна браузера. Разумеется, можно усовер-
шенствовать функцию moveQ таким образом, чтобы она удерживала элемент в не-
которой области окна браузера, изменяя в случае необходимости, например, знак
приращений координат. Однако может потребоваться, чтобы элемент пересек окно
браузера и больше не возвращался. Тогда полезно остановить движение уже не
видимого элемента. Для этого служит метод clearlnterval(), единственным пара-
метром которого является целочисленный идентификатор, возвращаемый мето-
дом setlntervalQ.
Чтобы иметь возможность прекратить движение элемента, следует сохранить зна-
чение, возвращаемое методом setlntervalQ, в глобальной переменной, а затем ис-
пользовать его в качестве параметра метода clearlntervalQ в теле функции moveQ.
Напомню, что moveQ - функция, имя которой передается в качестве первого па-
раметра методу setlntervalQ. Сценарий с запуском и остановкой движения может
выглядеть, например, следующим образом:
function init_move(xid, dx, dy) {
var prmstr = "'." + xid + " ' , " +dx + " ," + dy
prmstr = "move(" + prmstr + "
idjnove = setlnterval (prmstr , 200)
}
function move(xid, dx , dy) {
у = parselnt(document.all[xid].style.top)
x = parselnt(document .all[xid] . style. left)
documernt.all.myimg.style.top = у + dy
document.all.myimg.style.left = x + dx
if (parsel nt(document. all[xid] .style.left) >
clearlnterval(id move)
}
1 nl tjnove ("щirag", 10 , 5) // начинаем движение
В этом примере движение остановится, как только горизонтальная координата
элемента превысит 350 пикселов.
Движение по эллипсу
Теперь рассмотрим организацию движения по замкнутой траектории. Для при-
мера возьмем эллипс, поскольку его легко модифицировать. Движение по эллип-
су задается несколькими параметрами, такими как большая и малая полуоси, по-
ложение центра и угол поворота относительно горизонтали, угловая скорость
перемещения и др. (рис 4.6). В частном случае, когда одна из полуосей эллипса
равна нулю, траектория вырождается в прямую линию. При этом движение будет
происходить то в одну, то в другую сторону. Очевидно, в случае равенства полу-
осей траектория приобретает вид окружности.
/* строка
параметров
для move() */
Р сохраняем
идентификатор
движения */
350) /* остановка
по условию */
4.2.Движениеэлементов
199
уо
О
хО
\^ ^
/Л
Left
1 " Тор
Рис. 4.6. Эллиптическая траектория
В листинге 4.5 представлены определения двух функций, задающих движение
по эллипсу. Функция ellipseQ является функцией инициализации движения,
a m o veQ - функция, передаваемая методу setlntervalQ.
{
Листинг 4.5. Определения двух функций, задающих движение по эллипсу
function ellipse(xid, alpha, a, b, omega, x0, y0, ztime.dt)
/* Движение по эллипсу
Параметры:
xid - id движущегося объекта, строка
alpha - угол поворота эллипса, град.
х0 - х-координата центра эллипса, пикселы
у0 - у-координата центра эллипса, пикселы
а - большая полуось эллипса, пикселы
b - малая полуось эллипса, пикселы
omega - угловая скорость, град/с; знак задает направление вращения
ztime - начальная фаза, град.
dt - временная задержка, с
*/
// проверка наличия параметров:
if (lalpha) alpha = 0
тf (!al) a = 0
if (!b) b = 0
im-= 0"
if (!ztime) ztime = 0
if (!dt) dt = 0
var t = -ztime
/*
чтобы начальное значение было 0,
поскольку в move() уже есть приращение */
setlnterval("move( '" + xid + "' ," + alpha + " , " + а +"," + b + "," +
omega + " , " + x0 + " , " + y0 + " , " + ztime + " , " + dt + " ) " ,
ztime*1000) /'многократный вызов moveO с интервалом ztime, мс */
function move(xid,
alpha, a, b, omega, x0, y0, ztime,
/* пересчет координат,
вызывается из ellipse O
dt)
продолжение
200
0Глава 4. Примеры сценариев
Листинг 4.5 (продолжение)
t+= ztime
/* х,у - координаты в собственной системе координат */
var x = a*Math.cos((omega*t + dt)*Math.PI/180)
var у = b*Math.sin((omega*t + dt)*Math.PI/180)
var as = Math.sin(alpha*Math.PI/180)
var ac = Math.cos(alpha*Math.PI/180)
document.all[xid].style.top = -x*as + y*ac + y0
document.all[xid] . style. left = x*ac + y'as + x0
}
Ниже приведен HTML-код, содержащий сценарий, который загружает два изоб-
ражения и заставляет их двигаться по эллиптическим траекториям:
<НТМ1 >
<SCRIPT>
function ellipse(xid, alpha, a. b, omega, x0, y0, ztime,dt) {
. . . // код определения функции
}
function move(xid, alpha, a, b, omega, x0, y0, ztime, dt) {
, . . // код определения функции
}
var xstr = '<IMG ID = "myl" S R C = "pictl.gif"><IMG ID = "my2" SRC =
"pict2 .gif">'
document.wri te(xstr)
ellipse("myl",. 60, 100, 30, 10, 170, 300, 0.2, 0)
ellipse("my2",. 80, 100, 130, 30,140, 300, 0.2, Q)
</SCRIPT>
</HTML>
Если сохранить код с определением функций ellipseQ и moveQ в файле, например
ellipse.js, то рассмотренный выше HTML-код можно переписать в следующем виде:
<НТМ1 >
<SCRIPT SRC = "ellipse. js"></SCRIPT>
<SCRIPT>
var xstr = '<IMGID = "myl" SRC = "pictl. gi f 'xIMG ID = "myl" SRC =
"pictl.gif">'
document.write(xstr)
ellipseC'myl", 60, 100, 30. 10, 170, 300, 0.2, 0)
ellipse("my2", 80, 100, 130, 30,140, 300, 0.2, 0)
</SCRIPT>
</HTML>
Движение по произвольной кривой
Рассмотрим задачу организации движения видимого элемента по произвольной
кривой, заданной выражением с одной переменной. Точнее, мы хотим указать
функции движения в качестве параметров не одно, а два выражения, которые опи-
сывают изменения вертикальной и горизонтальной координат элемента. Эти вы-
ражения будут содержать одну переменную, которую мы обозначим через х -
строчной латинской буквой. Переменную х можно интерпретировать как незави-
симый параметр движения (например, время). С помощью встроенной функции
evalQ можно вычислить значения этих выражений при конкретном значении пе-
ременной х и присвоить их параметрам left и top таблицы стилей перемещаемого
элемента. Функция (пусть это будет moveQ), которая все это выполняет, переда-
4.2. Движение элементов_________________________________________________201
ется в качестве первого параметра методу setlntervalQ, который периодически
вызывает ее через заданный интервал времени.
Итак, функция инициализации движения curemoveQ будет принимать три стро-
ковых и один числовой параметр. Строковые параметры содержат соответствен-
но значение идентификатора ID перемещаемого элемента, выражение для верти-
кальной координаты и выражение для горизонтальной координаты. Числовой
параметр определяет период времени, через который координаты элемента пере-
считываются. Ниже приводятся определения функций curvemoveQ и move():
function curvemove(xid, уехрг, xexpr, ztime) {
/* Движение по произвольной кривой. Версия 0.
Параметры:
хid - id движущегося объекта, строка
уехрг - выражение для вертикальной координаты
хехрг - выражение для горизонтальной координаты
ztime - интервал времени между вызовами функции move(), мс
*/
if ( !xid) return null
if (lyexpr) yexpr = "x"
if (Ixexpr) xexpr = "x"
if (Iztime) ztime = 100 // интервал времени, мс
x=0 /* глобальная переменная,
входящая в выражения уехрг и хехрг */
setlnterval("move( '" + xid + "' •• + уехрг + "', , " + xexpr + "' Г.
ztime)
}
function move(xid, yexpr, xexpr) {
x+ +
document.all[xid].style.top = eval(yexpr)
document.all[xid].style.left = eval(xexpr)
}
Обратите внимание, что переменная х в функции curvemove() является глобаль-
ной и поэтому доступна в функции move(). Чтобы сделать переменную х глобаль-
ной, мы просто не использовали ключевое слово var перед первым ее появлением
в коде.
Исходное позиционирование перемещаемого элемента с помощью таблицы сти-
лей не играет особой роли, поскольку при вызове функции curvemoveQ элемент
помещается в точку с координатами, равными значениям выражений хехрг и уехрг,
вычисленным при х = 0. Поэтому начальное позиционирование следует задавать
с помощью соответствующего выбора этих выражений. Ниже приведен при-
мер HTML- документа с движущимся изображением:
<HTML>
<MG ID = "myimg" SRC = "pictl.gif" STYLE = "position:absolute">
<SCRIPT>
function curvemove(xid, yexpr, xexpr, ztime) {
// код определения функции
}
function move(xid, yexpr, xexpr) { // код определения функции
202 _ Глава 4. Примеры сценариев
curvemoveC'myimg" , "100 + 50*Math . sin(0. 03*x)" , "50+х", 100)
</SCRIPT>
</HTML>
В этом примере изображение будет перемещаться по синусоиде с амплитудой
50 пикселов и горизонтальной скоростью 10 пикселов в секунду. Начальные ко-
ординаты графического объекта равны 100 и 50 пикселов по вертикали и гори-
зонтали соответственно.
В рассмотренных выше функциях curvemoveQ и moveQ в выражениях, описываю-
щих движение, в качестве аргумента можно использовать только символ х. Ниже
приведены модификации этих функций, позволяющие использовать произволь-
ные имена для аргумента, лишь бы они не совпадали с уже применяемыми для
других целей:
function curvemove(xid, yexpr, xexpr, ztime, namevar) {
/* Движение по произвольной кривой. Версия 1.
Параметры:
xid - id движущегося объекта, строка
уехрг - выражение для вертикальной координаты
хехрг - выражение для горизонтальной координаты
ztime - интервал времени между вызовами функции move(), мс
namevar - имя аргумента в выражениях уехрг и хехрг
*/
if (!xid) return null '
if (lyexpr) yexpr = "x"
if (Ixexpr) xexpr = "x"
if (Izti me) ztime = 100 // интервал времени, мс
if (Inamevar) namevar = "x" P P
eval (namevar + " = 0") /* глобальная переменная, входящая
в вы ражения уехрг и хехрг */
setlnterMU-mover " + xid + »■, •' + уехрг + ' " + хехрг + ", •«+
namevar + "')", ztime)
}
function move(xid, yexpr, xexpr, namevar) {
eval(namevar + "++")
document . all[xid] . style.top = eval(yexpr)
document. all [xid]. style.left = eval(xexpr)
\
Суть модификации кода заключается в том, что имя аргумента теперь передается
функциям в качестве строкового параметра namevar. Чтобы создать переменную
с именем, указанным в значении переменной namevar, и присвоить ей некоторое
значение, необходимо создать строку с оператором присвоения и передать ее функ-
ции eval(). Теперь можно использовать, например, такие вызовы функции:
curvemoveC'myimgl" , "100 + 100*Math. si n ( 0 . 05 *w)/(0 . 05*w)" "50+w", 50, "w")
curvemove("myimg2", "100+ 2 * t i m e )", "570 - time", 100,"w")
Обратите особое внимание на использованный выше прием создания перемен-
ной. Сначала имя этой переменной сохраняется в виде строкового значения в дру-
гой переменной, затем она используется при генерации строки, содержащей не-
которое выражение. Далее строка с выражением передается в качестве параметра
функции evalQ, которая выполняет данное выражение. Этот прием лежит в осно-
ве создания программ, которые пишут программы.
4.2. Движение элементов _ 203
4.2.2. Перемещение мышью
Рассмотрим задачу перемещения видимых элементов HTML-документа с по-
мощью мыши. Такими элементами могут быть графические объекты, кнопки, тек-
стовые области, таблицы, плавающие фреймы и др. Здесь мы займемся переме-
щением изображений, текстовых областей и плавающих фреймов.
Перемещение графических объектов
Перемещать мышью изображения можно различными способами. Изучим один
из них: пользователь пытается перетащить мышью изображение; затем он должен
отпустить кнопку мыши и переместить указатель в нужное место (при этом он
может удерживать или не удерживать кнопку мыши в нажатом положении); оста-
новившись в нужном месте, пользователь отпускает кнопку мыши или щелкает
ею, чтобы прекратить перемещение изображения. В листинге 4.6 приведен код,
реализующий этот алгоритм.
х
Листинг 4.6. Код перемещения изображения мышью
<НТМ1_>
<НЕАО><Т1Т1_Е>Перемещаемое изображение</Т1Т|_Е></НЕАО>
<BODY id = "mybody">
<IMG ID="myimg" SRC = ' pict. g if ondragstart = "dragO style =
"position:absolute; top:10; left:10">
</BODY>
<SCRIPT>
flag = false // нельзя перемещать
var id_img
function drag() {
flag = mag
id_img = event.srcElement.id
}
function mybody.onmousemove(){
if ((flag){ // если можно перемещать
document.all [id_img] .style.top = event.clientY
document.all [id_img].style.left = event.clientX
I
}
function mybody .onmouseupO{
flag = false // нельзя перемещать
}
</SCRIPT>
</HTML>
Здесь функция dragQ, обрабатывающая событие ondragstart (попытка перетаски-
вания), устанавливает переменную-триггер flag и выясняет, кто инициатор собы-
тия. Значение переменной flag позволяет определить, можно или нельзя переме-
щать элемент. В данном примере инициатором события может быть только один
элемент, но мы готовимся к более общему случаю нескольких перемещаемых эле-
ментов. Этот случай будет рассмотрен позже. Обратите внимание, что события
onmousemove (перемещениеуказателя мыши) иonmouseup (кнопка мыши отпу-
щена) получает не изображение, а объект тела документа mybody. Мы не исполь-
204
Глава 4. Примеры сценариев
зовали событие onclick для изображения, зарезервировав его для других целей,
например для перехода по ссылке. Заметьте также, что в функции mybody.
onmousemove() при обращении к объекту изображения его идентификатор пере-
дается через переменную id_img. Поэтому мы используем запись document.all[id_img],
а не document.all.idjmg.
Теперь рассмотрим более сложную задачу, используя для ее решения приемы,
применявшиеся ранее. Пусть документ содержит несколько графических объек-
тов, которые можно перемещать мышью. В нашем случае это изображения парус-
ников. Все множество кораблей разбито на две эскадры: ту (моя) и other (чужая).
Визуально они отличаются лишь ориентацией кораблей и флагом. Размер кораб-
ля зависит от значения его вертикальной координаты top: чем ее значение боль-
ше, тем больше размеры рисунка. Таким способом мы создаем эффект перспекти-
вы (ближе-дальше). Чем ниже расположено изображение, тем больше его размеры.
Далее, если к какому-нибудь кораблю приблизились на достаточное расстояние
чужие корабли в достаточном количестве, то какой-то из них погибает (становит-
ся невидимым). Для решения, какой из сблизившихся кораблей должен погиб-
нуть, используется жребий (датчик случайных чисел Math.random()). Это - про-
тотип алгоритма некоторой игры типа «Морской бой» (рис. 4.7). Впрочем, нам
важен не сюжет игры, а приемы программирования.
!
Рис. 4.7. Игра «Морской бой»
В рассматриваемом примере используются два графических файла с изображе-
нием кораблей: один для своих (shipl.gif), а другой - для чужих (ship2.gif).
В HTML-документе можно расположить необходимое количество графических
элементов с помощью тегов, написав их вручную:
<IMG ID = "rayl" SRC = "shipl.gif" ondragstart = "dblclO" STYLE =
"position:absolute; top:10;left:10 ; v i s i b i l i ty : v i s i b l e " >
4.2. Движение элементов________________________________________________________205
<IMG ID = "my2" SRC = "shipl.gif" ondragstart = "dblcl () "STYLE =
"position: absolute; top:10; left:10; vi si bi li ty : vi si ble">
<IMG ID = "otherl" SRC = "ship2.gif" ondragstart = "dblclO" STYLE =
"posi tion : absolute ; top:10; left:10; vi si bi li ty : vi sible">
<IMG ID = "other2" SRC="ship2.gif" o n d rag sta rt = "d b l c l ()" STYLE =
"posi tion: absolute; top:10; left:10; vi sibi li ty : vi sible">
Однако проще создать сценарий, выполняющий это автоматически. Начальные ко-
ординаты кораблей зададим с помощью генератора случайных чисел (листинг 4.7).
Листинг 4.7. Код сценария для игры «Морской бой»
<HTML>
<HEAD><TITLEПеремещаемые изображения</Т1Т1Е></НЕА0>
<BODY id="mybody" background="blue.gif"></BODY>
<SCRIPT>
var imgstr="" // строка тегов, формирующих рисунки
var Nmy=3 // количество своих
var Nother=3 // количество чужих
/* Формирование изображений */
for (i = 1; i <= Nmy; i++) {
imgstr+= '<IMGID="my' + i + •" src = "shipl. ei f" ondragstart^'dragO"
style="position:absolute ; top: ' + 200*Math . random() + ';left:' +
200*Math.randomC) + ' ;visibility:visible"> '
}
for (i = 1; i <= Mother; i++){
imgstr+= ' <IMG ID="other' + i + '" src="ship2.gif" ondragstart="drag()"
style="position:absolute;top:' + 200*Math.random() + ';left:' +
200*Math . randomO + ' ; vi sibi li ty : vi si ble"> '
} .. .. . ,
// запись в документ
resizeO // установка размеров изображений
var flag = false
var id_img = "
function drag()
{ •
flag = Iflag
// id элемента, который надо перемещать
}
function mybody.onmousemoveO{
if (flag){
document.all[id_img}.style.top = event.clientY
document.all[id_img].style.left = event.clientX
resizeO // установка размеров изображений
i
function mybody . onmouseupO {
flag = false
action() // действия в создавшемся положении
>
function action() { // действия
var s, xO, ув . xl, yl, vl, v2, v3. xid, J •«». d, z продолжение #
206 _ Глава 4. Примеры сценариев
Листинг 4.7 (продолжение)
var dmin = 20, smin =2 /* минимальное расстояние и
копичество чужих */
for (i = 0; i < document. images. lengtn ; 1++)|
s = 0
x0 = parselnt (document. images[i].style. left)
y0 = parselnt(document. images[i].style. top)
for ( j=0; ] < document.images.length; ]++){
vl = document. images [i].style.visibility == "visible"
v2 = document . images!j] . style.visibility == "visible"
xid = document. images [i].id.substrCO,2)
yid = document . images []] .id. substr (0,2)
v3 = xid. localeCompare(yid) != 0 // чужой
if (( i != j)&&vl&&v2&&v3){
xl = parselnt(document. images [j].style. left)
yl = parselnt(document. images[j].style. top)
d = Math.sqrt((x0 - xl)*(x0 - xl) + (y0 - yl)*(y0 - yl))
if (d <= dmin) s++ // очень близко
if (s >= smax) {
if(Math.random()<0. 5) z = i // кто погибнет
else z = j
document. images [z] . style .visibility = "hidden"
break
)
}
)
}
}
function resize(){ // установка размеров изображений
var у, size
for (i = 0; i < document . images . length; i + + ){
у = parselnt(document. images [ i ]. style .t op)
size = Math. min(x, 180)
size = Math.max(size, 15)
document . images[i] .style.width = size
document. images [i] . style. height = 0.8*size
}
}
</SCRIPT>
</HTML>
Как нетрудно заметить, главная часть семантики игры обслуживается функцией
ctionQ Вы можете пофантазировать и изменить ее по своему усмотрению. Я же
обратил внимание на пространственные свойства театра военных действий. В на-
шем случае не исключены ситуации, когда кораблик, расположенный выше (зна-
чит, дальше), накрывает кораблик, расположенный ниже (значит, находится на
переднем плане). Иначе говоря, наш способ создания эффекта перспективы пло-
хо работает в случае перекрытия изображений. Поправить это можно путем изме-
нения параметра z-Index стилей элементов в функции resize(), поставив это свой-
ство в прямую зависимость от значения вертикальной координаты top. Элемент
с большим индексом будет находиться над элементом с меньшим индексом. Мо-
дифицированный код функции resizeQ выглядит следующим образом:
function resize () {
var у , size
4.2. Движение элементов
207
for (i =0; i < document. images . length ; i++){
у = parselnt(document.images[i].style.top)
size = Math.min(y, 180)
size = Math.max(size, 15)
document. images [i ]. style.width = size
document . images [1 ]. style . height = 0.8*size
document.i mages[i].style.zlndex = x
Обратите внимание, как в JavaScript происходит обращение к свойству z-index
таблицы стилей.
Перемещение текстовых областей
В листинге 4.8 приводится пример HTML-документа, в котором можно переме-
щать текстовые области, созданные с помощью тегов <TEXTAREA>. При этом разме-
ры области и шрифта текста определяются в ней в зависимости от значения вер-
тикальной координаты. Так создается эффект перспективы (ближе-дальше). Чем
выше, тем дальше, и наоборот (рис. 4.8). Чтобы приблизить к себе текстовую об-
ласть, необходимо просто переместить ее вниз. Вы можете «сложить в стопку»
текстовые области, удалить их от себя или, наоборот, приблизить так, чтобы текст
стал разборчивым. В отличие от примера с изображениями, здесь разрешение на
перемещение происходит по двойному щелчку на текстовой области. Обратите
внимание на то, как в функции resizetextQ определяется элемент, размеры кото-
рого следует изменить.
тСЛМои noKSMeHiMUS\leiitaiea.HTM - Microsoft Internet Exploier
£eSut ПР*!*-'i find Изаннов
Рис. 4.8. Перемещаемые текстовые области
Листинг 4.8. Перемещение текстовых областей, созданных с помощью тегов <TEXTAREA>
<нтт ■
<НЕАО><Т1Т1Е>Перемещаемые текстовые области</Т1Т1Е></НЕАО>
<BODY id="mybody" background="blue.gif">
продолжение &
208_______________________________________________Глава 4. Примеры сценариев
Листинг 4.8 (п одолжение)
<TEXTAREA ID="tl" ondblclick=""drag()" STYLE = "position:absolute;
top:10; left:10;fon-size:large">3To - первый reKCT</TEXTAREA>
<TEXTAREA ID="t2" ondblclick=""drag()" STYLE = "position:absolute;
top:100; left:15a">Это - второйте ксорой т е к с т </Т Е Х Т Аf:)<TAREA>
<TEXTAREAi ID="t3" ondblclick=""drag()" STYLE = "position:absolute;
top:150: l e f t: 2 5 0 " >3 io'">Это - третий TeKCT</ТЕ)XTAREA>
</BODY> ;
<SCRIPT>
resizetext() // установка размеров текстовых
// областей
var flag = false
var id_img = "'
function drag()
flag = I-flag
id_img = event.srcElement.id // id элемента, который надо
//
перемещать
1
function mybody . onmousemove () {
if (flag){
document . all [id_img] .style,top = event . clientY '
document.all [id_img].style.left = event.clientX
resizetextO // установка размеров текстовых областей
}
}
function mybody . onmouseupO {
flag = false
}
function resizetext () { // установка размеров текстовых
// областей
varу, size, idimg, idtext
for (i =0; i < document . all . length; i++) {
if (document.all [i ] .tagName== 'TEXTAREA') {
idtext = document . all[i].id
у = parselnt(document.all [idtext].style.top)
size = Math.min(y, 800)
size = Math.max (size, 60)
document . all [idtext] . style.width = siza
document.all [idtext] . style.height = 0.8-size
document.all[idtext].style.zlndex = у
document.all [idtext].style.fontSize = Math.max(2, y/10)
}
1
I
</SCRIPT>
</HTML>
В принципе, ничто не мешает вам создать более сложный алгоритм для функции
resizetext() изменения размеров текстовой области. Например, можно дополни-
тельно варьировать цвет фона и шрифта.
Перемещение плавающих фреймов
Если рассмотренный выше код немного модифицировать, то можно получить до-
кумент со множеством перемещаемых плавающих фреймов, в которые загруже-
4.2. Движение элементов
209
ны другие HTML-документы (рис. 4.9). Однако в этом случае возникает небольшая
проблема: как передать плавающему фрейму сигнал, что мы собираемся его переме-
щать. Дело в том, что сигналы о нажатии кнопки мыши, щелчках и попытках перетас-
кивания при наведении указателя мыши на фрейм получает не он, а элементы загру-
женного в него документа. Я выбрал следующий способ решения данной задачи.
—M
Рис. 4.9. В перемещаемые фреймы загружены страницы сайта
Во-первых, рядом с каждым фреймом поместим маленькое изображение, котороеф
будет воспринимать событие, интерпретируемое как разрешение на перемещение
фрейма. Я использовал изображение руки, расположенное около верхнего левого
угла фрейма. Во-вторых, в функции изменения положения напишем код, кото-
рый изменяет координаты, размеры и индекс фрейма, а также графического объ-
екта. Таким образом, изображение будет получать событие, а обработчик этого
события будет изменять параметры и изображения, и фрейма.
Напомним, что плавающие фреймы создаются с помощью контейнерного тега
<IFRAME>. В сценарии (листинг 4.9) мы сначала сформируем массив с адресами
документов (файлов), загружаемых во фреймы. Затем сформируем строку тегов,
описывающих фреймы и графические изображения, и запишем ее в HTML-доку-
мент. Функция, производящая вычисление положения и размеров фреймов и изоб-
ражений, в этом примере называется resizeframeQ.
210___________________________________________________Глава 4 . Примеры сценариев
Листинг 4.9. Код для перемещения плавающих фреймов
< HTML >
<HEAD><TITLE>Перемещаемые фреймьк/TITLE></HEAD>
<BODY ID = "mybody" background = "blue.gif">
</BODY>
<SCRIPT>
/* Массив адресов документов */
var ahref=new ArrayO
ahref[0] = "graphic . htm"
ahref[l] = "examples.htm"
ahref[2] = "mybook.htm"
/* Формирование строки с описанием фреймов и изображений */
var xstr =
for (i=0; i<ahref.length;i++ ) {
/* Фреймы */
xstr+= '<IFRAME width=2 00 ID="fr' + i + ' " SRC = " ' +ahref [i ] + '
STYLE = "position: absolute; top:' + (5 25*i) + ' ; left:' + (1 0 + 30*i)
+ [ "></iframe>'
/* Изображения */
xstr+= '<IMG ondblclick="drag()" width=16 height=14 SRC = "pyKa.gif
id="im' + i + '" STYLE = "position: absolute"> '
}
document.write(xstr) // запись в документ
.flag = false
var id_img = '
resizef rameO // установка размеров фреймов
function drag(){
flag=!flag
id img = event.srcElement. id
id img = "fr" + id img. substr(2)
} "
function mybody.onmousemoveO{
if (flag){
document.all [id_img].style.top= event. clientY
document.all[id_img].style.left = event.clientX
resizeframeO
}
I
function mybody . onmouseupO {
flag = false
}
function resizeframe(){ // установка размеров фреймов
var y. size, idimg, idfr
for (i =0; i < ahref. length; i++){
/* Фреймы */
idfr = "fr" + i //id фрейма
у = parselnt(document.all[idfr].style.top)
size = Math.min(y,800)
size = Math .max(60,size)
size = size*3
document.all[idfr].style.width = size
document .all [idfr] . style .height = 0.8*size
4.3. Рисование линий
211
document.all[idfr].style.zlndex = у
/* Изображения */
idimg = "1m" + i //id изображения
document.all[idimg].style.top = y-5
document.all idimg .style.left =
parselnt(document.all[idfr].style.left) -12
document.all[idimg].style.zlndex=document.all[idfr].style.zlndex
}
|
</SCRIPT>
</HTML>
Обратите внимание, что перемещение фрейма приостанавливается, когда указа-
тель мыши находится над фреймом. Поэтому для перемещения фрейма указатель
мыши должен двигаться над участками окна, не занятыми фреймами. Это неболь-
шое неудобство вызвано тем, что фрейм маскирует тело (элемент <BODY>) доку-
мента исходного окна и обработчик rnybody.onmousemove() не срабатывает. Ма-
скирующий эффект появляется из-за того, что фрейм является разновидностью
окна. В случае с текстовыми областями этот эффект не наблюдается, посколь-
ку текстовая область - просто элемент документа текущего окна, а не отдель-
ное окно.
Мне кажется, что при надлежащем использовании техники перемещения тексто-
вых областей, плавающих фреймов и других элементов (например, таблиц) мож-
но разработать новый стиль дизайна HTML-документов (веб-страниц). Его суть
заключается в создании псевдотрехмерного пространства, в которое погружены
элементы документа. Эти элементы представлены в документе не ссылками,
а своими уменьшенными копиями, расположенными где-то «вдали». Их всегда
можно перетащить на передний план, чтобы их было лучше видно, или, наобо-
рот, отдалить (отложить в долгий ящик). Иначе говоря, можно сделать доку-
мент похожим не на газетный лист, а на ландшафт, наблюдаемый с высоты
птичьего полета.
4.3. Рисование линий
В JavaScript нет специальных встроенных средств для рисования произвольных
линий. Если вам потребуется отобразить в окне браузера прямоугольник или го-
ризонтальную линию, то для этого можно воспользоваться HTML-тегами <T A B LE>
и <HR> соответственно. А как быть, если нужны наклонная прямая, круг или кри-
вая, заданная уравнением? Например, как изобразить график некоторой зависи-
мости в виде кривой, а не последовательности столбиков?
Идея решения этой задачи довольно проста. Нужно вывести на экран изображе-
ние размером 1x1 пиксел, залитое цветом, отличающимся от цвета фона. Это изоб-
ражение следует разместить несколько раз в соответствии с координатами, кото-
рые задаются параметрами позиционирования top и left атрибута STyLE тега <IMG>.
С помощью сценария можно сформировать строку, содержащую теги <MG> с не-
обходимыми атрибутами, а затем записать ее в документ методом write().
В этом разделе мы рассмотрим сначала задачу рисования прямой линии, а затем -
произвольной кривой, заданной выражением с одним аргументом.
212.
.Глава 4. Примеры сценариев
4.3.1. Прямая линия
Прежде всего выясним, как нарисовать точку. Из множества таких точек будет
состоять любая кривая, которую нам нужно отобразить в окне браузера. В HTML
для этого можно использовать следующий тег:
< IMG SRC = "point.bmp" STYLE = "position:absolute;top:y;left:x">
Здесь point.bmp - имя графического файла, содержащего один пиксел; у, х - чи-
сла, указывающие положение графического файла в пикселах. Изображение точ-
ки размером 1 x 1 пиксел можно создать в любом графическом редакторе. Из сооб-
ражений экономии его лучше всего сохранить в файле формата BMP, а не JPEG или
GIF (при малых размерах изображения алгоритмы сжатия неэффективны).
Чтобы задать размеры отображения точки на экране, следует использовать атри-
буты WIDTH и HEIGHT (ш ирина им, и высота):
<IMG SRC = "point.bmp" STYLE = "pos i tio n : absolute; top: y ; l e f t :x" WIDTH =
n HEIGHT = n>
Одинаковые значения атрибутов WIDTH и HEIGHT задают представление точки в ви-
де квадрата размером пх п пикселов. При этом точка с исходными размерами 1x1
пиксел просто растягивается. Таким образом, мы можем задать отображаемые
размеры (масштаб) одной точки, а следовательно, и определить толщину линии.
Теперь рассмотрим начальную версию функции, которая рисует прямую линию
с заданными координатамиxl, yl, х2, у2 ее начала и конца. Кроме координат функ-
ция будет принимать числовой параметр п, указывающий толщину линии. Вот
вариант определения функции:
function line(xl, yl, х2, у2 , п){
/* Версия 0 */
/* xl, yl - начало линии х2 , у2 - конец линии п - толщина линии */
var clinewidth = " WIDTH=" + n + "HEIGHT=" + n /* строка для учета
толщины */
var xstr = "" // строка тегов для записи в HTML-документ
var xstrO = ' <IMG SRC="point.bmp"' + clinewidth + '
STYLE="positlon:absolute; '
var k = (y2 - yl)/(x2 - xl) // коэффициент наклона линии
var x = xl // начальное значение координаты х
/* Формирование строки, содержащей теги <IMG. . .>
while (x <= х2) {
xstr += xstr9 + 'top:' + (yl + k* (x - xl)) + ': left:1 + x + ■ " >'
x+ +
}
document, write (xstr) // запись в документ
}
Функция lineQ формирует строку, содержащую теги вывода экземпляров одного
и того же графического изображения точки. При этом в цикле изменяются значе-
ния параметров top и left атрибута STYLE. Параметром цикла является горизон-
тальная координата, текущее значение которой присваивается параметру left. Та-
ким образом, мы используем горизонтальную развертку линии. Вертикальная
координата (top) вычисляется с учетом ее наклона - коэффициента, равного тан-
генсу угла наклона. Сформированная строка записывается в документ и отобра-
жается в окне браузера.
4.3. Рисование линий
213
Функция дает неплохие результаты, когда линия проходит слева направо под уг-
лом к горизонтали, меньшим 45° (рис. 4.10). При больших углах становится за-
метной дискретность линии, что показано на рисунке. Это связано с тем, что ко-
личество отображаемых точек определяется величиной х2 - xl. Если мы хотим
нарисовать вертикальную линию, то х2 = xl и, следовательно, количество отобра-
жаемых точек равно 0. Иначе говоря, для создания вертикальных линий рассмат-
риваемая версия функции line() не приспособлена. Кроме того, эта функция ри-
сует только линии, у которых начало находится левее и выше конца.
\Щ СЛМои докчментыМте.НТМ..;
'н№1
ш:а Вид Избранное
пШ?Ш
йш^т "
Ссылки»;
■\\
■ *■ \
* \ \
* v
■ \ \
А;
Рис. 4.10. Линии, нарисованные с помощью функции line() версии О
В следующей версии функции line() реализована простая идея, заключающаяся
в том, чтобы выбирать подходящую развертку. Если линия ближе к горизонтали,
чем к вертикали, то используется горизонтальная развертка, в противном случае
выбирается вертикальная развертка (рис. 4.11). Кроме того, мы определяем на-
правление развертки так, чтобы рисовать линии, у которых начало может быть
как левее, так и правее конца (листинг 4.10).
Листинг 4.10. Код функции lineQ версии 1
function line(xl, yl, х2 ,у2, п){
/*
/*
*/
Версия 1 */
xl, yl - начало линии
х2, у2 - конец линии
п - толщина линии
var clinewidth = ""
if (!n)
clinewidth = ' WIDTH="
war xstr=""
// строка, определяющая толщину линии
+ n + " HEIGHT=" + n
// строка тегов для записи в
HTML-документ
продолжение &
214
Глава 4. Примеры сценариев
Листинг 4.10 (продолжение)
var xstrO = '<IMG SRC="point.bmp"'
STYLE="position:absolute;'
var x, k, direct
var vertical = Math.abs(y2 -
if (vertical)!
direct = (y2 > yl)
x = yl
к = (x2 - xl)/(y2 - yl)
}else{
direct = (x2 > xl)
if (direct) x = xl
else x = x2
k = (y2 - yl) / (x2 - xl)
}
+ clinewidtn + '
yl) > Math.abs(x2 - xl)
// направление прямой
// коэффициент наклона
// направление прямой
прямой
// коэффициент наклона прямой
while (true) {
if (!vertical){
xstr += xtrOs ) + ' L'top: ' +
if (x == x2) break
if (direct) x*+
else x-
}else{
xstr+=xstrO+ 'left :
if (x == y2) break
if (direct) x++
else x--
(yl + k*(x - xl)) + ' ; left: ' + х+ '"s
+
(xl+k*(x-yl))
+ ';
top:1 +x+ ">
;■
document.write(xstr)
// запись в документ
Теперь не мешало бы получить возможность рисовать, например, штриховые ли-
нии, а также задавать их цвет. Чтобы задать цвет линии, необходимо выбрать под-
■ЭСАМоидоичметыМте.НГМ... №RO
Е-жй'г:о2й-ч!'--•
Рис. 4.11 . Линии, нарисованные с помощью функции lineQ версии 1
4.3. Рисованиелиний_______________________________________________215
ходящий графический файл с изображением точки. Можно заранее заготовить
файлы точек с различными цветами. Впрочем, можно заготовить файлы не толь-
ко с изображениями точек, но и с произвольными изображениями. В конце кон-
цов, мы можем рисовать «линии», используя любые изображения в качестве точек.
Для рисования штриховых линий необходимо просто периодически не отобра-
жать заданное количество точек. В следующей версии функции line() добавлены
два параметра: имя графического файла и длина штриха линии (листинг 4.11).
Предполагается, что длины штриха и паузы между соседними штрихами одина-
ковы. Если длина штриха не указана или равна 0, то линия сплошная.
Листинг 4.11. Код функции line() версии 2 (штриховые линии)
function l i ne(pi ct_f ile, xl, yl, x2, y2, n, s){
/* Версия 2 */
/* pict file - имя графического файла
xl, yl - начало линии
x2, y2 - конец линии
п - толщина линии
s - длина штриха и паузы
if (!pict file)
pict file _ = "point.bmp"
if (!s)
s = 0
var c li newi dth = ""
// файл с изображением точки
// длина штриха и паузы
определяющая толщину
if (!n)
clinewidth = " WIDTH=" + n + "
// строка,
// линии
// толщина
HEIGHT=" + n
var xstr = ' // строка тегов для записи в H T M L-документ
var xstrO = '<IMG SRC= + pict file + '"' + clinewidth + '
STYLE = "position:absolute; " _
var x, k, direct
var vertical = Math.abs(y2 - yl) >
if (vertical){
direct = (y2 > yl)
x = yl
k = (x2-xl) / (y2-yl)
}else{
direct = (x2 > xl)
if (direct) x = xl
else x = x2
k = (y2 - yl)/(x2 - xl)
I
var i = 0
var draw = true
while (true){
if (!vertical){
if (draw)
xstr += xstrO + 'top:'
if (x == x2) break
if (direct) x++
else x-
}else{
if (draw)
Math.abs(x2 - xl)
// направление прямой
// коэффициент наклона
// направление прямой
прямой
// коэффициент наклона прямой
// счетчик точек штриха и паузы
// рисовать или пропускать
+ (yl + k*(x - xl)) + '; left:' + x +
продолжение •&
216
Глава 4. Примеры сценариев
Листинг 4.11 (продолжение)
xstr += хst0 + 'left:'
if (x == y2) break
if (direct) x++
else x-
(xl + k *(x - yl)) + '; top:' + x + ">
if (s>0&&i>s){
draw = Idraw
i =О
>
document.write(xstr)
// запись в документ
Вторая версия функции lineQ позволяет не только рисовать сплошные и штрихо-
вые прямые линии, но и располагать вдоль них изображения из графических фай-
лов (рис. 4.12). В последнем случае линии не видны, они выполняют лишь роль
направляющих для расположения изображений. Подбирая изображения и длину
штриха, можно получить интересные визуальные эффекты. Однако не следует
забывать, что при больших размерах графического файла и значительном коли-
честве «точек» процесс отображения на экране может занять много времени.
|СЛМои документы\11пе HTM - MicrosoftInternet Explorer
НИ S3:
■Ссылки *'
Рис. 4.12. Расположение изображений вдоль прямых штриховых линий
4.3. Рисование линий _ 217
4.3.2. Произвольная кривая
А почему бы не создать функцию для рисования произвольных кривых, заданных
некоторым выражением? На первый взгляд может показаться, что эта задача слож-
нее, чем рисование прямых линий. Но это не так. При написании кода функции
мы используем большую часть опыта, полученного при решении задачи рисова-
ния прямых линий. Будем считать, что выражение, задающее кривую, содержит
переменную, обозначенную строчной латинской буквой х. Тогда горизонтальная
координата точки кривой вычисляется просто как значение переменной х, изме-
няемой в заданных пределах. Для вычисления вертикальной координаты исполь-
зуем функцию evalQ, которой передадим в качестве параметра строку, содержа-
щую выражение (листинг 4.12).
Функция curve() для рисования кривой будет принимать следующие параметры:
имя графического файла с изображением точки (впрочем, это может быть любое
изображение), выражение, задающее кривую, координаты началалинии, количе-
ство точек линии, толщину линии и длину штриха (если потребуется штриховая
линия) (рис. 4.13).
Листинг 4.12. Код функции curve()для рисования кривых
function curve(pict_f i le,yexpr, x0, y0, t, n. s){
/* Версия 0 */
/* pict_file - имя графического файла
уехрг - выражение с переменной х
х0, у0 - координаты начала кривой
t - количество точек кривой (значений переменной х)
п - толщина линии
s - длина штриха и паузы
*/ /
if (lyexpr) return null
if ( !pict file) pict file = "point.bmp"
if (!s) s = 0
if (It) t = 0
var clinewidth = '
if (!n)
clinewidth = 'WIDTH=' + n + 'HEIGHT=' + n
var x
xstrG = '<IMGSRO"'' + pict_f ile + '"'' + clinewidth +
1 STYLE = "position:absolute;top: '
xstr = ""
. var i = 0, draw = true
for(x = 0; x < t; x++) {
if (draw)
xstr += xstrO + (y0 + eval(yexpr)) + '; left:' + (x0 + x) +' '
if (i > s&&s > 0) {
draw = Idraw
i = 0
}
i ++
}
document.write(xstr) // запись в документ
■218_________________________________________________Глава 4. Примеры сценариев
Рис. 4.13. Линии, нарисованные с помощью функции curveQ версии О
Ниже приведено несколько примеров:
curvet-."230-0.ei'x-x". 1.100.2ее.З) // ветвь параболы
curve("","100.0*Math.sin(6/250*(х))",30,120,300,12,0) // синусоида
curve ("" , " 0.0 01 * х * х * (х - 7 5)", "х" ,10 0,80,200,6,0)
Теперь модифицируем функцию curve() так, чтобы можно было рисовать замкну-
тые линии (например, окружность или эллипс). Для этого необходимо иметь воз-
можность задавать выражение не только для вертикальной, но и горизонтальной
координаты. Такой способ задания линии в математике называют параметриче-
ским. В простейшем случае в качестве выражения для горизонтальной координа-
ты можно задать как "х" (листинг 4.13). Тогда функция должна давать такой же
результат, что и ее версия 0. Напомним, что в выражениях для координат точек
линии переменная должна быть обозначена строчной латинской буквой х.
Листинг 4.13. Модифицированный код функции curveQ
function curve(pict_file, yexpr, xexpr, y0, t, n, s){
/* Версия 1 */
/• plct file - имя графического файла
yexpr - выражение с переменной х для вертикальной координаты
хехрг - выражение с переменной х для горизонтальной координаты
*В. у0 - координаты начала кривой
t - количество точек кривой (значений переменной х.)
п - толщина линии
s - длина штриха и паузы
i ( fyexpr) return null
if i xexpr; xexpr = "x"
if (! pict f i le) pict file = "point.bmp"
4.3. Рисование линий
219
= "
+ n +
+
if (!s) s = 0
if (! t) t = 0
var clinewidth
if (!n)
clinewidth = WIDTH='
var x
xstrO = '<IMG SRC=" 1
' STYLE="positionrabsolute;
xstr = ""
var i = 0, draw = true
for(x = 0; x < t; x++) {
if (draw)
xstr += xstr0
eval(xexpr)) + ' ">'
if (i > s&&s > 0)
draw = Idraw
i =0
J
i++
)
document.write(xstr)
I
'HEIGHT='
pict_file +
top:1
+ n
' + clinewidth +
+ (y0 +
{
eval(yexpr)) +
left:' + (x0
// запись в документ
Ниже приводятся несколько примеров так называемых фигур Лиссажу (рис. 4.14):
curve ("", "80*Math.sin(6/25*x)", "60*Math. cos(6/25*x+l)" ,250, 100,300,2 ,0)
curve ("" , " 6 0 * M a t h. s i n ( 6 / 2 5 * x)" , "60*Math . cos(6/25*x)" , 100 , 70 , 300,2 ,0)
curve( "" , " 8 0 * M a t h. s i n (6 / 2 5 * x)" , "80* Math .cos (6/50*x)" ,100,200,600,6,0)
curve("", "80*Math.sin(6/250*x)", "80*Math. cos(6/75*x)",310,250 ,400,2 ,0)
*SC:\MoM(io*>|Mt:HibiYJSUineHTM - Miciosoit Internet С xul,
Щ Мой клмьюгф"
Рис. 4.14. Фигуры Лиссажу, нарисованные с помощью функции curveQ версии 1
220____________________________________________________Глава 4. Примеры сценариев
Фигуры Лиссажу получаются, если выражения для координат представляют собой
синус и косинус некоторого выражения с переменной х. Наиболее интересные кри-
вые возникают, когда коэффициенты при переменной являются кратными друг другу.
Вместо изображения точки можно использовать любой другой рисунок. Подби-
рая графические файлы, вид кривой и длину штриха, можно получить интерес-
ные визуальные эффекты (рис. 4.15). Эти эффекты могут быть особенно впечат-
ляющими, если использовать анимационные GIF-файлы. Однако помните, что
при больших размерах графического файла и многочисленности рисунков про-
цесс их отображения на экране может занять много времени.
|ЦС:\МондокамектыизМ"те H T M - Microsoft Internet Explorer .
j :. ■ :;
■IJnjxI
: Файл Qpaw.e £щ Цз<5Р«*юе Сервис
£п0>шь«
кш
л a jj j j -.
У^Й;
;J
Ссылки м
J
\ '■*■;
" -.-■' :s-
' '' '" •■ ■
_!
'
ЛМПоОГВР
■ -£
Рис. 4.15. Расположение рисунков вдоль фигур Лиссажу
4.3.3. Графики зависимостей,
заданных выражениями
В принципе, у нас почти все готово, чтобы нарисовать график функции одной
переменной в прямоугольной системе координат. Мы уже рассмотрели в преды-
дущих подразделах, как рисуются кривые, заданные выражением с одной пере-
менной, а также прямые линии, необходимые для отображения осей координат.
Теперь все это нужно собрать воедино.
Казалось бы, достаточно просто нарисовать две перпендикулярные прямые (оси
координат), а затем кривую. Однако здесь возникают дополнительные задачи.
4.3. Рисование линий.
221
Во-первых, необходимо решить, как пересекаются координатные оси: какие квад-
ранты они образуют и сколько. Во-вторых, требуется определить длину каждой
из осей, которая, очевидно, зависит от максимального и минимального значений
выражения, описывающего кривую. Наконец, следует задать способ оцифровки
осей. Код программы, решающей эти задачи, получается значительно объемнее,
чем код, обеспечивающий собственно рисование линий. Попробуйте написать его
самостоятельно в качестве упражнения. В результате вы получите функцию, с по-
мощью которой сможете рисовать графики различных зависимостей. Не забудь-
те при этом, что выше мы рассматривали отображение линий в экранной системе
координат, в которой вертикальная ось направлена сверху вниз. В обычной прак-
тике рисования графиков вертикальную ось направляют, наоборот, снизу вверх.
4.3.4. Графики зависимостей,
заданных массивами
Как известно, зависимости между двумя величинами можно задавать в виде таб-
лиц, состоящих из двух столбцов, в одном из которых располагаются данные, со-
ответствующие аргументу зависимости, а в другом - ее значению. Аргументы
отображаются на графике вдоль горизонтальной оси, а значения - вдоль верти-
кальной оси координат. Собственно зависимость обычно представляется либо
точками на координатной плоскости, либо ломаной линией, проходящей через
эти точки, либо вертикальными прямыми (столбиками). Возможны, конечно,
и другие способы графического представления данных (например, в виде круго-
вой диаграммы). Здесь мы остановимся на задаче построения графиков в прямо-
угольной системе координат в виде ломаной линии.
Таблицы с данными можно представить с помощью одного двухмерного или двух
одномерных массивов. Будем считать, что имеем дело с двумя одномерными мас-
сивами, в одном из которых содержатся аргументы, а во втором - значения зави-
симости. Например, в одном массиве содержатся даты, а в другом - соответству-
ющие этим датам среднесуточные (или какие-нибудь другие) значения темпера-
туры. Кривую зависимости между температурой и датой можно представить как
ломаную линию, состоящую из отрезков прямых линий.
Легко догадаться, что для построения графика зависимости между элементами
двух массивов в виде ломаной линии можно просто организовать в цикле вызов
рассмотренной ранее функции lineQ. При этом следует заранее определить рас-
стояние в пикселах между соседними точками по горизонтальной оси. Возникает
задача масштабирования - перевода значений элементов массивов в пикселы эк-
ранных координат.
Прежде чем рассмотреть пример построения графика, немного модифицируем
функцию Ипе(). Эта функция в том виде, как она была определена в подразделе
«Прямая линия», не совсем подходит для наших целей. Сделаем так, чтобы она
просто возвращала строку тегов, описывающую линию, а не записывала ее в до-
кумент. Для этого необходимо в определении функции line() заменить строку
document.write(xstr) на return xstr.
В листинге 4.14 приводится код сценария, отображающего в окне браузера гра-
фик зависимости, заданной с помощью двух массивов (рис. 4.16).
222
Глава 4. Примеры сценариев
§C:\MoHAOK<{Me>fTbiUSUine2.HTM - Micioiofl ln(e»net ЕхЫма
Файл Оравка Ёиа 1^%#»»е Cgnsw:
J О- =>
с*»ин"
/а
I
^
Один Два Три Четыре Пять Ш*сть Щ
Рис. 4.16. График зависимости, заданной с помощью двух массивов
Листинг 4.14. Код сценария, отображающего в окне браузера график зависимости, заданной
с помощью двух массивов
<SCRIPT>
/* График зависимости, заданной массивами */
/* Массив элементов горизонтальной оси */
var aX = new Array("Один", "Два", "Три", "Четыре", "Пять", "Шесть")
/' Массив элементов вертикальной оси */
var aY = newArrayd, 15, 13, 4, 8, 6)
var ky = 10, kx = 60
var x0 = 100, yO = 20Й
var xstr = '"
for(i = 0; i < aX. length -1; 1++){
xl = х0 + kx*i
yl = у0 - ky»aY[i]
x2 = x0 + kx*(i + 1)
y2 = y0 - ky*aY[i + 1]
xstr+ = line("p_b.jpg", xl, yl, x2, y2, 4)
// коэффициенты масштабирования
// отступы
// строка тегов, описывающая линию
// линия графика
)
4.3. Рисование линий
.223
for (i = 0; i < I I++M
/* Метки на вертикальной оси */
xstr+ = "<b style='position:absolute;top:"+(y0-i*30-
10)+";left:75'>"+i*3+"</b>"
if (i > 0){
// горизонтальные линии:
xstr + = line("point.bmp", x0, y0 - i*30, x0 + 5*kx, y0 - i*30, 1, 2)
// вертикальные линии:
xstr+ = line("point.bmp ", x0 + kx*i , y0, x0 + kx*i, 50, I, 2)
/* М }ет ки на горизонтальной оси */
xstr+= "<b style = 'position:absolute;top: " + (y0 + 5) + ";left:"+ (x0 +
kx*i) +'">" +
aX[i] + "</b>"
}
xstr + = l ine( "point.bmp " ,x0,y0 ,x0 , 50, 2) // вертикальная ось
xstr+ = l ine( "point.bmp ",x0,y0,x0 + 5*kx,y0,2) // горизонтальная ось
document.write(xstr) // запись в документ
</SCRIPT>
В этом сценарии масштабирование не универсально, а выбрано вручную на осно-
ве анализа конкретных исходных данных. Однако можно написать более универ-
сальный код, автоматически формирующий масштабирующие коэффициенты на
основе программного анализа исходных данных и (или) параметров, указанных
пользователем. Попробуйте написать такой сценарий в качестве упражнения.
4.3.5. Динамические линии
Допустим, требуется время от времени перерисовывать линии. Например, если
стрелка на изображении циферблата часов создается с помощью сценария на ос-
нове функции Ипе(), то для создания эффекта движения необходимо удалить ра-
нее нарисованную стрелку и создать новую, положение которой соответствует
текущему времени. В другом случае может потребоваться перерисовать график
некой зависимости (например, курса валют от даты) при динамическом обновле-
нии данных. Иначе говоря, в общем случае перерисовывание линии состоит из
удаления ранее нарисованного ее изображения и создания новой линии.
Рассмотренные выше коды функций lineQ и curve() не вполне приспособлены к ре-
шению этой задачи из-за того, что они выполняют запись в документ сгенериро-
ванной строки HTML-тегов. Вообще говоря, это делать совсем не обязательно.
Вполне достаточно, чтобы функции line() и curveQ просто возвращали строку те-
гов, а записать ее в HTML-документ можно и во внешней программе. В той же
программе мы можем удалить и всю совокупность тегов, формирующих линию
(когда это понадобится).
Итак, прежде всего изменим определения функций lineQ и curve() следующим
образом: заменим в них выражение document.write(xstr) на return xstr. В результате
функции не будут ничего рисовать, а будут лишь создавать и возвращать данные
для последующего рисования. Теперь, чтобы нарисовать произвольную линию,
следует в сценарии написать такую строку кода:
document.write(curve(параметры)).
Очевидно, вместо одной этой строки можно записать следующие две:
224.
Глава 4. Примеры сценариев
var xstr = сигуе(параметры)
document.write(xstr)
Поскольку мы должны быть готовы удалить линию из документа, строку тегов,
возвращаемую функциями curveQ и line(), сначала заключим в какой-нибудь кон-
тейнер, например <D I V ID = . . > с атрибутом ID, а затем запишем в документ:
var ■ cmycurve="<DIV ID = 'mycurve' ' i- сигуе(параметры) + "</DIV>"
document.write(cmycurve) // запись в документ
Чтобы удалить линию из документа, достаточно заменить содержимое контей-
нерного тега <DIV> на пустую строку:
document.all.mycurve.innerHTML = ""
Здесь мы воспользовались свойством innerHTML, которое содержит весь HTML-
код, заключенный в указанный контейнер. Присвоение этому свойству нового
значения сразу же изменяет соответствующий элемент в документе. В данном
случае вся последовательность тегов <IMG .. .>, формирующая линию, заменяется
пустой строкой, в результате чего изображение линии исчезает. При этом сам кон-
тейнер <DIV> с пустым содержимым остается. В случае необходимости его можно
наполнить новыми данными. Это типичный прием динамического изменения эле-
ментов HTML-документов.
Чтобы вместо предыдущей линии нарисовать новую, достаточно записать в сце-
нарии следующий код:
document.all.mycurve.innerHTML = сигуе(другие_параметры)
В результате контейнер <DIV> заполнится последовательностью тегов <IMG. . .>,
формирующих новую линию, а браузер ее отображает.
В качестве примера, позволяющего убедиться, что все это работает, я предлагаю
следующий сценарий (листинг 4.15).
Листинг 4.15. Код динамических линий
<BUTTON onclic k = " redrawn ">Перерисовать</В11ТТОМ>
<SCRIPT>
/* Строка, возвращаемая сurve() заключается в контейнер с заданным
идентификатором ID */
var cmycurve="<DIV ID = 'mycurve'> " + curve(". "80'Math.sin (6/25'x i"
"80*Math.cos(6/50*x)",100,200,600,6,0) + "</DIV>"
// запись в документ и отображение линии
/* Определения функций */
redrawO{ /* обработчик щелчка на кнопке
(перерисовка линии) */
document.all.mycurve.innerHTML = curve("", "60*Math.sin(6/25*x)",
"60*Math.cos(6/25 *x)" ,100,150,300,2,0)
}
function iurve(pict_file, yexpr, xexpr, x0, y0, t, n, s) { // линия
if (lyexpr) return null
if (Ixexpr) xexpr = "x"
if (!pict_file) pict_file = "point.bmp"
if (!s) s = 0
if (!t) t = 0
var clinewidth = ""
4.4. Напишем число словами _ 225
if (!n)
clinewidth = WDTH=' + n + 'HEIGHT=' + n
var x
xstrG = ^HKSHC-' + pict fHe + '" ' + clinewidth + ' STY LE =
"position:absolute;top: ' _
xstr = ""
var i = 0, draw = true
for(x =0; x < t; x++) {
if (draw)
xstr += xstrO + (y0 + eval(yexpr)) + '; left:1 + (x0 + eval (xexpr))
+ ' " > '
if (i >s && s > 0) {
draw = Idraw
i = Э
}
i++
}
return xstr // строка тегов, формирующих линию
}
</SCRIPT>
</HTML>
При загрузке данного HTML-документа в окне браузера появляется кнопка и не-
которая фигура Лиссажу. Щелчок на кнопке заменяет эту фигуру окружностью.
Повторный щелчок уже не приводит к видимым изменениям, поскольку текущее
изображение заменяется таким же.
4.4. Напишем число словами
При создании различного рода финансовых документов (например, платежных
поручений) обычно возникает неоходимость представить числа прописью. Суть
этой задачи заключается в том, чтобы преобразовать заданное число в строку, раз-
бить ее на группы разрядов числа (единицы, десятки, сотни, тысячи и т. д.), про-
анализировать содержимое каждой группы и перевести его в некоторое слово.
Специфика задачи заключается в выборе нужных окончаний этих слов, то есть
в учете падежа, рода и числа имен существительных и числительных русского язы-
ка. Поясним это на следующем примере:
31 - тридцать один
31000 - тридцать одна тысяча
31000000 - тридцать один миллион
Многим программистам когда-то приходилось решать эту задачу. Однако в боль-
шинстве случаев, по моим наблюдениям, они ограничивались лишь именитель-
ным падежом и единственным числом, предоставляя пользователю самостоятель-
но скорректировать отображаемое число прописью с помощью клавиатуры. Так
в свое время поступал и я, полагая, что учет окончаний имен числительных слиш-
ком сложное (или рутинное) дело. В конце концов я взял карандаш и бумагу и ра-
зобрал все возможные случаи. Оказалось, что их не так уж и много. В результате
я написал код, который приводится в листинге 4.16.Я и сам удивился, что он ока-
зался небольшим. Возможно, кое-что можно было бы сделать изящнее. Однако
сама идея программы представляется мне вполне красивой.
226.
.Глава 4. Примеры сценариев
Функция Nsay(N), решающая рассматриваемую задачу, принимает в качестве па-
раметра N целое число и возвращает строку, которая представляет это число в ви-
де последовательности слов. Эта функция использует ряд вспомогательных функ-
ций: speakQ, LeftQ и Right(). Если speakQ является специфической функцией,
предназначенной для решения поставленной задачи, то функции LeftQ и RightQ
довольно универсальны и могут быть использованы в других приложениях. Так,
функция LeftQ возвращает левую часть указанной строки, a RightQ - правую ее
часть. В принципе, можно обойтись и без этих функций, но с ними как-то удоб-
нее. В представленном ниже варианте функция NsayQ позволяет представить про-
писью любое целое число, не превышающее 999 999 999 999 (один триллион ми-
нус единица).
Листинг 4.16. Код для представления числа словами
function Nsay(N) { // Перевод чисел в имена числительные
/* Параметр: целое число
Возвращает строку символов
• if7 (N == null)
return ""
if (!N)
return "ноль"
if (Math.abs(N) > 999999999999)
return "****" // превышение допустимого предела
var NN1 = "", NN2 = "". NN3 = "", NN4 = "", nNNl, nNN2, nNN3, nNN4, znak.
xyz
/* Единицы */
ed = new Array(" один", " два", " три", " четыре", " пять", " шесть",
" семь", ■ восемь", " девять")
/* Десятки */
de = new Array(" десять", двадцать", ' тридцать", сорок", ■
пятьдесят", " шестьдесят", " семьдесят", " восемьдесят", " девяносто")
/* Второй десяток */
dd = new Array(" одиннадцать", " двенадцать", " тринадцать",
" четырнадцать' " пятнадцать", " шестнадцать", " семнадцать",
" восемнадцать", "девятнадцать")
/* Сотни 7
so = new Array(" сто", " двести", " триста", четыреста", " пятьсот",
- шестьсот", " семьсот", восемьсот", " девятьсот")
znak = " // знак числа
if (N < 0) гпак="минус "
/* преобразуем число N в строку
с ведущими нулями: */
NN = Right("000000000000" + Itrim(N. t o StringO ). 1 2)
/* Выделяем группы разрядов, преобразуя их в числа.
Второй параметр функции p arselnt O , равный 10, здесь важен, поскольку
группы разрядов могут содержать ведущие нули, что может быть расценено
как 8-е число
nNNl = parse!nt(Left(NN,3) , 10)
nNN2 = parse!nt(NN.substr(3,3) , 10)
nNN3 = parse!nt(NN.substr(6,3) , 10)
nNN4 = parse!nt(NN.substr(9,3) , 10)
4.4 Напишем число словами _ 227
if (nNNl.>0 ) {
NN1 =speak(nNNl)
xyz = Right(NNl , 1)
NN1 = NN1 + " миллиард"
if (xyz == "a" || xyz == "и" || xyz == "e")
NN1 = NN1 + "a"
else <
if (xyz != "Н")
NN1 = NN1 + "OB"
}
)
if (nNN2 > 0){
NN2 = speak(nNN2)
xyz = Right(NN2,l)
NN2 = NN2 + " миллион"
if (xyz == "a" | | xyz == "и" | | xyz == "e")
NN2 = NN2 + "a"
else {
if (xyz != "Н")
NN2 = NN2 + "OB"
}
}
if (nNN3 > 0){
ed[0] = " одна"
ed[l] = " две"
NN3 = speak(nNN3)
xyz = Right(NN3,l)
NN3 = NN3 + " тысяч"
if (xyz == "и" || xyz == "e")
NN3 = NN3 + "и"
else {
if (xyz =="a")
NN3 = NN3 + "a"
I
ed[G] = " один"
ed[l] = " два"
}
if (nNN4 > 0)
NN4 = speak(nNN4)
NN4 = znak + NN1 + NN2 + NN3 + NN4
return !NN4 ? "ноль" : NN4
}
/* Вспомогательные функции : */
function speak (k) {
var yNl, yN2
if (k == 0)
return ""
if (k == 10)
return " десять"
if (k = 1 && k < 10)
return ed(k-l]
if (k >= 11 && k < 20)
return dd[k - 11] продолжение J-
228
Глава 4. Примеры сценариев
Листинг 4.16 (продолжение)
if (k >= 20 && k <= 99) {
ск = ltrim(k. toStringO)
yNl = parselnt(l eft(ck, 1))
yN2 = parselnt(ck.substr(l, 1))
return yN2==0 ? de[yNl-l] : de[yNl - 1] + ed[yN2-l]
}
if (k >= 100 && k <= 999) {
к = ltrim(k. toStringO)
return so[parseInt(Left(k,l))
}
}
function Itrim(xstr){
if ( .xstr.indexOfr ") == 0))
return xstr
var astr = xstr.spli t ( " ")
var i = 0
while (i<astr.length){
if (astr[i] ! = (""))
break //
f++
I,
astr = astr . slice(i)
return astr.join(" ")
}
function Left(xstr, n) {
return xstr.substr(0 , n)
function Right(xstr, n) {
return xstr.substr(xstr.length
}
-1] + speak(parselnt(k. substr (1, 2)))
// удаляет передние пробелы
// создаем массив из слов строки
выходим из цикла, если элемент не пуст
// создаем массив
// склеиваем элементы массива в строку
// выделяет левую часть строки
-
//
n)
выделяет правую часть строки
Ниже приведен HTML-код со сценарием, использующим функцию NsayQ. В окне
браузера представляется поле ввода данных (рис. 4.17). Если ввести в это поле
некоторое число и щелкнуть кнопкой мыши где-нибудь вне его, то это число ото-
бразится в виде соответствующей последовательности слов.
i Щавка. '.'§?& избрав» Сарвн
Введите число:
(123456799012
Число прописью:
сто двадцать три миллиарда четырест ап я т ьде сят шесть
миллионов семьсот восемьдесят девять тысяч двенадцать
ii Готе*
Рис. 4.17. Представление введенного числа прописью
4.5. Обработка данных форм
229
<BODY bgcolo = "е0еОе0">
Введите число:<BR>
<INPUT N A M E = "myinput" TYPE = "number" VALUE = " ' onchange =
"numberchangeO">
<BR> Число прописью:<BR>
<В ID = "Ntext"></B>
,/BODY>
<SCRIPT>
function numberchangeO{
document.all.Ntext.innerText=Nsay(document.all.my input.value)
</SCRIPT>
</HTML>
4.5. Обработка данных форм
Такие элементы HTML-документа, как поля ввода данных, текстовые области,
переключатели и флажки, раскрывающиеся списки и кнопки, можно объединить
в так называемую форму (рис. 4.18). В HTML форма создается с помощью кон-
тейнерного тега <F O R M>, внутри которого располагаются теги элементов этой фор-
мы. В объектной модели документа каждой форме соответствует свой объект, вхо-
дящий в коллекцию forms. Заметим, что любой из перечисленных выше элементов
можно использовать вне всякой формы. Однако форма - не просто контейнер,
а контейнер и объект, предназначенные главным образом для организации отправ-
ки на сервер всех данных, имеющихся в элементах этой формы (например, вве-
денных пользователем). Давным-давно, когда браузеры воспринимали только про-
стой HTML и не работали со сценариями, форма была единственным средством
поддержки интерактивности.
| ЦСЛМомдок9ментыШ\Ч>орма.Мт -Microsoft Intel...Н1ШЕ311
i ка
Правка Вид
Избранное Сервис Справка"
шш
ЙЖй
1 3 JU '.' J " Ссылки и
; Аадес, |
"-"—
J
. : :
_____
h
•; Отправить f
jy-Ллйчквлпывг«|> ■ ■
ш
■ :
1Рис. 4.18. Внешний вид формы в окне браузера
Как раньше, так и теперь для отправки данных на сервер сценарий не обязателен.
Чтобы отправить данные, достаточно в теге <FORM> указать атрибут ACTION, а в са-
мой форме установить кнопку типа Submit. Щелчок на этой кнопке инициализи-
рует отправку данных. Если атрибут ACTION не указан или его значение пусто,
данные формы не будут отправлены, даже если вы щелкнете на кнопке типа Submit.
230_
.Глава 4. Примеры сценариев
Итак, для отправки данных формы атрибут ACTION должен иметь некоторое зна-
чение. В общем случае это URL-адрес файла или CCGI-программы, которая по-
лучает и обрабатывает отправленные данные. Например, A C T I O N =" http://www. myserver/
cgi/myprogram.pl".
Если вы хотите отправлять данные формы по электронной почте, то значением
ACTION является строка вида:
maiI to:адрес_е-тат1
Можно также указать тему (subject) сообщения:
mailto:aflpec_e-mail.?subject=TeMa_coo6i«eHHfl
Кроме атрибута ACTION в теге <FORM> следует указать еще два атрибута: M E T H O D
и ENCTYPE Атрибут M E T H O D имеет значение POST или GET. Выбор значения отража-
ется лишь на форме, в которой передаются данные. Если у вас нет особых причин
задуматься об этом, выбирайте значение POST. Атрибуту ENCTYPE присвойте значе-
ние "text/plain". В этом случае отправляемое сообщение будет представлять собой
последовательность пар вида имя_элемента=значение. Здесь имя_элемента - значе-
ние атрибута NAME в теге элемента, содержащегося в форме, а значение - значе-
ние атрибута VALUE в этом же теге. Если не указать атрибут ENCTYPE, то сообщение
будет представлено в неудобочитаемом (закодированном) виде.
Вот пример HTML-документа с формой, содержащей поле ввода данных и кноп-
ку типа Submit:
<HTML>
<FORM METHOD = POST ACTION = "mailto:mufliu@geras1in.ru"
ENCTYPE="text/plain">
<INPUT NAME = "Сообщение" TYPE = "text" VALUE = "">
<INPUT NAME = "Отправить" TYPE="submit" VALUE = "Отправить">
</FORM>
</HTML>
Отправка данных рассмотренной выше формы произойдет при щелчке на кнопке
типа Submit, на которой в нашем примере выводится надпись «Отправить». Адрес
получателя указан как значение атрибута ACTION в теге <FORM>.
Если перед отправкой данных формы требуется предварительно их проверить или
еще что-нибудь сделать, то для этого необходим сценарий. В следующем примере
проверяется, имеется ли символ « @ » в поле ввода адреса электронной почты по-
лучателя и не пусто ли поле ввода собственно сообщения. Если символа «@» в ад-
ресе нет или поле сообщения пусто, то отправка не производится. Сценарий обра-
батывает событие onsubmit, возникающее при щелчке на кнопке типа Submit.
<HTML>
<FORM ID = "myform" METHOD=POST ACTI.ON="" ENCTYPE="text/plain"
styIe="background:'еЭеОеО">
Кому:
<INPUT NAME = "email_to" TYPE = "text" VALUE = "">
<P>
От кого:
<INPUT NAME="email_from" TYPE = "text" VALUE = "">
<P>
Сообщение:<BR>
<TEXTAREA NAME = "Сообщение" TYPE = "text" VALUE = " "></TEXTAREA>
<P>
<! Кнопка типа Submit >
4.5. Обработка данных форм
231
<INPUT NAME = "Отправить" TYPE = "submit" VALUE = "Отправить">
</FORM>
<SCRIPT>
function myform.onsubmit (){
var noemail = myform.email_to.value.indexOf('@') == - 1
/* присваиваем
значение
равенства */
var notext = Imyform.Сообщение.value
var xtext = "ХпПисьмо не отправлено"
if (noemail | | notext){
event.returnValue = false // отменить
отправку
if (noemail)
alert("Неправильный адрес получателя" + xtext)
else
alert("HeT текста сообщения"
} else
myforra.action = "mailto
)
</SCRIPT>
</HTML>
+ xtext)
" + myform.email_to.value // значение ACTION
30\K.mrciJ,iv.i;,CMPIVpiobd\4>DpMahlm'..- ffllB
Орьека E>4t Избранное Cgpa *
•■' ж J j] :~ - $ ■ -U"
Кому: .
ОтK,rQ.jqqq@wwww.ru
: Сообщение:
Привет !
; Отправить' 4|
QJ Мой компьютер
J
Рис. 4.19. Форма отправки сообщения по электронной почте
Если отправить данные формы, показанной на рис. 4.19, то адресат получит сооб-
щение в следующем виде:
email_to=xxx@yyyy.ru
email_from=qqq@wwww.ru
Сообщение=Привет
Отправить=0тправить
В приведенном выше примере мы делаем поверхностную проверку данных, вве-
денных пользователем в форму. Если данные не удовлетворяют нашему крите-
рию правильности, то мы должны предотвратить их отправку. Это можно сделать
двумя способами. Первый способ заключается в присвоении свойству returnValue
232
Глава 4. Примеры сценариев
значения false (как в нашем примере). Тогда отменяется стандартная реакция на
событие, в данном случае - реакция на событие onsubmit (отправка сообщения).
Второй способ заключается в присвоении свойству action пустого значения.
В нашем примере значение action пусто по умолчанию, поэтому выражение
event.returnValue = false является излишним, но зато делает код сценария более
понятным. В контексте нашего HTML-кода сценарий мог бы выглядеть и следу-
ющим образом:
<SCRIPT>
function myform.onsubmit() {
var noemail = myform.email to.value.indexOf(')e') == - 1
var notext = Imyform .Сообщение .value
var xtext = "ХпПисьмо не отправлено"
if (noemai1 | | notext) {
if (noemail)
alert("Неправильный адрес получателя" + xtext)
else
alertC'HeT текста сообщения" + xtext)
} else
myform. action = "mailto:" + myf orm. emai l_to. value // значение ACTION
} /SCRIPT>
На веб-страницах нередко размещают ссылку или кнопку, открывающую форму
отправки сообщения по электронной почте автору страницы (рис. 4.20). В этом
случае не нужно вводить почтовый адрес получателя. Очевидно, что этот адрес
уже присвоен в качестве значения атрибуту ACTION в теге <FORM>. Если вы хотите
затруднить его выявление отправителем сообщения или, что важнее, различны-
ми программами-роботами, сканирующими веб-страницы с целью выявления ад-
ресов электронной почты, то следует предпринять некоторые меры. Самый про-
стой рецепт - хранить отдельные компоненты адреса в различных переменных
и собирать их с помощью выражения конкатенации (склейки), которое присваи-
вается свойству action. В результате программа-робот не найдет в HTML-доку-
3 ОЛКнига JoYd5cti(!<\proboV*>«pMA Ы» - , И
Файл Правка ^Д' ' ^бранное С£р
От авка почты автору
•'% ... j------------------------1—
От кого:}
Сообщение:-
\ Отправить
~з
Ж Мой ч^мйьютер;1!
4
Рис. 4.20. Форма отправки сообщения по электронной почте автору веб-страницы
4.5. Обработка данных форм______________________________________________233
менте строки символов, имеющей структуру адреса электронной почты. Ниже при-
водится пример HTML-кода, воплощающий эту нехитрую идею.
<HTML>
<FORM ID = "myform" METHOD=POST ACTION=" " ENCTYPE="text/plain"
style="background:'e0e0eO'">
<Н2>Отправка почты автору</Н2>
От кого:
<INPUT NAME="email from" TYPE = "text" VALUE = "">
<P>
Сообщение:<BR>
<TEXTAREA NAME = "Сообщение" TYPE = "text" VALUE = "...></TEXTAREA>
<P>
<! Кнопка типа Submit >
<INPUT NAME = "Отправить" TYPE = "submit" VALUE = "Отправить">
</FORM>
<SCRIPT>
var first = "mmu" , second = "gerasim"
function myform.onsubmit(){
if (Imyform.Сообщение.value){
event.returnValue = false // отменить отправку
alert("HeT текста сообщения ХпПисьмо не отправлено")
) else
myform.action = "mailto:" + first + ' "'" + second + ".ru"
// значение ACTON
I
</SCRIPT>
</HTML>
Приведем еще один вариант привязки сценария обработки данных формы. Функ-
ционально он аналогичен рассмотренному выше.
<HTML>
<FORM ID = "myform" METHOD = POST ACTION="" ENCTYPE = "teXt/plain"
onsubmit = "return validatorO" style ="background:'eOeOeO'">
<Н2>Отправка почты автору</Н2>
От кого:
<INPUT NAME="email_from" TYPE = "text" VALUE = "">.
<P>
Сообщение:<BR>
<TEXTAREA NAME = "Сообщение" TYPE = "text" VALUE = ."."></TEXTAREA>
<P>
<! Кнопка типа Submit >
<INPUT NAME = "Отправить" TYPE = "submit" VALUE = "Отправить">
</FORM>
<SCRIPT>
var first = "mumu", second = "gerasim"
function validatort(){
if (Imyform.Сообщение.value){
alert("HeT текста сообщения ЛпПисыио не отправлено")
return false // отменить отправку
} rayseorm. action = "mailto: " +fi r s t+ " @■" + second + ".ru"
// значение ACTION
return = true // разрешить отправку
}
</SCRIPT>
</HTML>
234
Глава 4. Примеры сценариев
В этом примерефунцияvalidatorQ является обработчиком события onsubmit и воз-
вращает либо true, либо false в зависимости от того, можно отправлять данные
или нет. В теге <FORM> к событию onsubmit привязывается выражение return
validator(), что эквивалентно присвоению значения свойству event.returnValue в теле
функции-обработчика события.
4.6. Меню
4.6.1. Раскрывающийся список
Простейшее меню можно создать с помощью тегов <SELECT> и <OPTION>. Обычно
такие конструкции называют раскрывающимися списками. Ниже приводится
простейший пример использования раскрывающегося списка (рис. 4.21). В этом
примере раскрывающийся список задается HTML-кодом, а обработка выбора из
этого списка - сценарием. Задача сценария заключается просто в обработке но-
мера выбранного элемента из списка. В примере это вывод окна с соответствую-
щим сообщением. Выбор пользователя из раскрывающегося списка производится
щелчком левой кнопкой мыши на элементе списка. При этом свойство selectedlndex
объекта элемента документа, соответствующего тегу <SELECT>, приобретает в ка-
честве своего значения номер выбранного элемента списка (нумерация начинает-
ся с 0). Для инициации обработки выбора пользователя здесь служит событие
onchange (произошло изменение в выделении элемента списка). Обработка этого
события осуществляется функцией myselectionQ. Начальное выделение и ото-
бражение элемента в раскрывающемся списке задается атрибутом SELECTED тега
<OPTION>. В рассматриваемом примере в списке виден элемент «Физика».
%ОЛКнига JavaSciipt\prоЬа\раскр_ список.Ыт - Microsoft Internet Exploiei
1<щ Избранное Сйрви£ ; Справка
31 й:Л iJf-J &~3'Wr
ЯДИВ1
Aapae^jbajjM
Выберите экзамен, который хотите сдать: [Физика
Математика
Физика
ЁнедкйМ
Химия'.....
■■
.и
Рис. 4.21. Раскрывающийся список
<HTML>
Выберите экзамен, который хотите сдать:
<5ELECT NAME="TEST" onchange = "r«yselection () ";
<ОРТЮМ>Математика
<OPTION SELECTED>4>M3MKa
<ОРТЮМ>Биология
4.6. Меню
235
<ОРТЮМ>Химия
</SELECT>
<SCRIPT>
function myselection() {
var testname, testnumber;
testnumber = document.all .TEST.selectedlndex
if (testnumber == 0)
testname="MaT . анализ"
else{
if (testnumber == 1)
testname="KBaHTOBaa физика^
else{
if (testnumber == 2)
testname="Биология"
else
testname = "Органическая химия"
I
}
alertC'Bbi будете сдавать: " testname)
»
</SCRIPT>
По умолчанию в раскрывающемся списке виден только один элемент. Чтобы
раскрывающийся список сразу был приоткрытым (показывал несколько элементов),
следует в теге <S E L E C T> указать атрибут SIZE = количество_видимых_элементов (рис. 4.22).
Правка : @вд избранное Стране" ^правка
I ;'^fc, :
Выберите экзамен, который хотите сдать:
1 Физика
■ j
Химия 'l
т
@&£ЯГ Т. —.помпыт'ч,
Рис. 4.22. Раскрывающийся список, в котором видны сразу три элемента
Пользуясь регулярностью HTML-кода, задающего раскрывающийся список, не-
трудно сгенерировать его с помощью сценария (листинг 4.17).
Листинг 4.17. Код сценария раскрывающегося списка
<HTML>
Выберите экзамен, который хотите сдать:
<SCRIPT>
var N_sel =1 // номер элемента, выбранного по умолчанию
var- aoptions= new ArrayO // массив элементов списка
aoptions[0] = "Математика"
aoptions[l] = "Физика" продолжение •&
236
Глава 4. Примеры сценариев
Листинг 4.17 (продолжение)
aoptions[2] = "Биология"
aoptions[3] = "Химия"
/* Строка, содержащая теги, формирующие раскрывающийся список
xstr=' <SELECT ID ="TEST" onchange = "myselection() "> '
for (i = 0; i <aoptions . length; i++){
xprefix = (i ==■ N_sel)? 'SELECTED= ' +N_sel: "
xstr+ = '<OPTION ' + xprefix + '>' + aoptions[i]
)
xstr+ = '</SELECT>'
function myselectionQ { / запись в документ
var testname, testnumber;
testnumber = document . all.TEST.selectedlndex
if (testnumber = = 0)
testname="MaT. анализ"
else{
if (testnumber == 1)
testname = "Квантовая физика"
else{
i f (testnumber == 2)
testname = "Биология"
else
testname = "Органическая химия"
}
}
alert("Bbi будете сдавать:
</SCRIPT>
</HTML>
testname)
4.6.2. Настоящее меню
Меню, создание которого мы сейчас рассмотрим, состоит из главного горизон-
тального меню и нескольких вертикальных подменю (рис. 4.23). Мне ли вам объяс-
нять, что такое меню? Подменю раскрываются при наведении указателя мыши на
опции главного мелю. Не обязательно, чтобы каждой опции главного меню соот-
[ !ШГ- ЧМои flon4MeHTbi\JS\menu.hhn - Miciosnlt Internet Exploiei
МЯВ!
. ЗРйч ИР"™* ..Si* Иэ(&>№«<»' JCjjpeuc £гдаг№,й; '..
::|>вШй1|
[>.-»• ~? •^0-[|3 ££ !• |;<£| Ш ^Ф -Й^ • -J: •• Ш^14
м
Меню 1 (Мен
• .'.■■-«да.
ю 2
По;Ц Й С Ш О 1.2
ЩдШ№0-;Щ;: :
-'■i(*f. .. .TJ мл''• L"Mtws«j',::':;.::
:i;.'. ;.;ii:ii'.>
Рис. 4.23. Внешний вид меню
4.6. Меню______________________________________________________________________237
ветствовало подменю: некоторые опции главного меню могут быть терминальны-
ми. При выборе опции щелчком левой кнопкой мыши происходит некоторое дей-
ствие, определяемое сценарием. Это может быть URL-адрес веб-страницы или
строка, содержащая код JavaScript.
Код сценария, реализующего такое меню, мы сделаем возможно более универсаль-
ным и оформим в виде двух файлов с расширением js. Первый файл, menu_prm.js,
будет содержать параметры меню (листинг 4.18). При создании приложений его
содержимое можно изменять в зависимости от конкретных задач. Например, в этом
файле определяются конкретные названия опций и действия для них, цвет и дру-
гие параметры. Таким образом, это - переменная (настраиваемая) часть опи-
сания меню. Второй файл, menu_bld.js, будет содержать описание механизма
построения и функционирования меню (листинг 4.19). В нем используются
параметры, определенные в первом файле. Это постоянная часть описания
меню. Разумеется, вы можете скорректировать содержимое этого файла по сво-
ему усмотрению.
Чтобы создать меню, в HTML-документе следует просто записать следующие строки:
<SCRIPT SRC = "menu prm.js"x/SCRIPT>
<SCRIPT SRC = "menu bld. s"x/SCRIPT >
<SCRIPT >buildMenu()</SCRIPT >
Здесь buildMenu() - функция, определение которой дано в файле menu_bld.js.
Она выводит на экран меню в соответствии с параметрами, заданными в файле
menu_prm.js.
Рассмотрим пример, в котором главное (горизонтальное) меню содержит три оп-
ции, первым двум из которых соответствуют вертикальные подменю. Последняя
опция является терминальной. Названия опций выбраны так, чтобы было легко
понять, что к чему относится.
В первом файле мы задаем параметры цвета, шрифта, а также состав названий
опций и действий и координаты. Названия опций меню, их позиционирование,
действия и содержание статусной строки задаются с помощью массивов. В конце
концов, структура меню задается двухмерным массивом. Обратите внимание, что
если действие представляет собой не URL-адрес, а некоторый код на языке Java-
Script, то он должен начинаться с префикса "javascript:", за которым следуют вы-
ражения, разделенные точкой с запятой.
Во втором файле определен ряд функций, с помощью которых меню развертыва-
ется и функционирует. Отображение меню происходит на основе использования
HTML-тегов, определяющих таблицы. Фрагменты HTML-кода, из которых скла-
дываются генерируемые строки HTML-документа, определены в виде элементов
массива. Позиционирование меню производится с помощью параметров top и left
таблицы стилей, которая также генерируется сценарием. Среди множества функ-
ций, определенных в этом файле, имеется главная - buildMenu(). Вызов ее в сце-
нарии, расположенном в HTML-документе, выводит меню в окно браузера вме-
сте с другими элементами этого документа.
Листинг 4.18. Код файла menu_prm.js
/* Параметры меню */
// Цвета:
var clBorder = 'blue' // цвет рамки л.
продолжение &
238
Глава 4. Примеры сценариев
Листинг 4.18 (продолжение)
var clBglnact = "#83d6f5"
var clBgAct = '#d6f4fe'
va r il C n lnact = 'blue'
var clFnAct = 'black'
// Ш р ифт (параметры стиля);
var cFontSize =
var cFontFamily = 'times'
// Другие параметры:
var closeTimeout = 500
var selfPos = false
// цвет фона
// цвет подсветки фона опции
// цвет надписи обычной
// цвет надписи при подсветке опции
// размер шрифта
/* семейство шрифтов ('arial',
'courire', 'times' и т. п.)
*/
// Собственно меню:
var menu = new ArrayO
menu[0] = new ArrayO
/* Параметры главного меню:
название опции;
URL-адрес или строка с кодом JavaScript,
" j avascript: '
статусная строка;
left (х-координата главного меню) :
top (у-координата главного меню) ;
width (ширина главного меню
left (х-координата подменю)
top (у-координата подменю)
width (ширина подменю).
*/
menu[0][0] = new АггауС'Меню 1","", .'
10, 80, 50,1 20, 120)
menu[0][l] = new Array("Подменю 1.1'
"Назад")
nu[0] [2] = new Аray ("Подмею 1.2
| = new Array("Подменю 1.3"
// время задержки свертывания подменю, мс
/* автоматическое позиционирование опций
меню и подменю (если true,
то задаются координаты только
первого меню) */
начинающаяся
Выберите что-нибудь из подменю",
, "javascript:history.go(-1)",
50,
, "http://www.yandex.ru", "Яндекс")
, "javascript:
с приветствием")
130, 10, 80, 130, 120, 0)
alert('Привет!')","Окно
menu[l] = new ArrayO
menu[l][0] = new АггауС'Меню 2
menu[l][l] = new Array ("Подменю 2.1
menu[l][2] = new Array("Подменю 2.2
menu[2] = new ArrayO
menu[2][0] = new АггауС'Меню 3" http://www.chat.ru",
10, 80, 0, 0, 0)
"CHAT.RU", 210,
Листинг 4.19. Код файла menu_bld.js
var ie = document. all ? true : false
var overBox = ■
var timerlD
.'■■■ есть ли что-нибудь в документе?
// Заготовки элементов HTML-кода
var barHtml = new ArrayO
barHtml[0] = ' <DIV ID="divbarpos '
barHtml[1] = ' " STYLE="position:absolute;left:'
barHtml[2] = 'px; top: '
barHtml[3] = 'px;" onmouseover="openbox('
4.6. Меню
239
barHtml[4] = ' ) " onmouseout="closebox ('
barHtml[5] = ' ) " onclick="clickbox('
barHtml[6] = ' )"><TABLE CELLPADDING=0 CELLSPACING=0><TR><TD BGCOLOR=" '
barHtml[7] = '"><TABLE CELLPADDING="0" CELLSPACING="1" BORDER = "0">
<TR><TD CLASS = "mnubarpos" ID = "mnubarpos'
barHtml[8] = " ' WIDTH=" '
barHtml[9] = ' " BGCOLOR=" '
barHtml[10] = "' STYLE="color: '
barHtml[11] = ' ;font-size:'+cFontSize+';font-family:'+cFontFamily+';">'
barHtml[12] = '</TD></TR></TABLE></TD></TR></TABLE></DIV>'
van boxHtml = new ArrayO
boxHtml[0] = '<DIV ID="divbox'
boxHtml[l] = '" STYLE="position:absolute;visibility:hidden;left: '
boxHtml[2] = 'px;top:'
boxHtml[3] = 'px ; font-family:'+cFontFami ly+' " onmouseout="closebox ('
boxHtml[4] = ') "><TABLE CELLPADDING=0 CELLSPACING=0><TR><TD BGCOLOR = "
boxHtml[5] = '"xTABLECLASS="mnubox" ID="mnubox'
boxHtml[6] = ' " CELLPADDING="0" CELLSPACING="1" BORDER="0" >'
boxHtml[7] = '<SPAN ID="divboxpos'
boxHtml[8] = '" onmouseover="openboxpos('
boxHtml[9] = ' ) " onmouseout="closeboxpos('
boxHtml[10] = ') " onclick="clickboxpos('
boxHtml[ll] = ') "><TR><TD CLASS = "mnuboxpos" ID="mnuboxpos'
boxHtml[12] = '" WIDTH="'
boxHtml[13] = ' " BGCOLOR="'
boxHtml[14] = '" STYLE="color:'
boxHtml[15] = ';font-size:'+cFontSize+'"> '
boxHtml[16] = 1</TD></TRx/SPAN>1
boxHtml[17] = '</TABLE></TD></TR></TABLE></DIV>'
function buildMenuO { // построение меню (главная функция)
if (ie) {
buildMenuBarO;
buildSubMenuO ;
if (selfPos) PosMenuO;
ResizeSubMenuO ;
)
function buildMenuBarO { // построение горизонтального меню
for (i =0; i < menu. length; i++) {
var s = barHtml[0] + i + barHtml[l] + menu[i][0][3] + barHtml[2] +
menu[i] [0] [4] +• bar Html [3] + i + bar Html [4] + i + barHtml [5] + i +
barHtml[6] + clBorder +barHtml[7] + i + barHtml[8] + menu[i ] [0][5] +
barHtml[9] + clBglnact + barHtml[10] + clFnlnact + barHtml[ll] +
menufi][0] [0] + barHtml[12] ;
document.writeln(s);
}
4
function buildSubMenuO { // построение подменю
for (i =0; i < menu.length; i++) {
if (menu[1].length > 1) {
var s = boxHtml[0] + i + boxHtmltl] + menu[i][0][6] + boxHtml[2] +
menu[i][0][7] + boxHtml[3] + i + boxHtml[4] + clBorder + boxHtml[5] +
i + boxHtml[6]
for (j =1; ]< menu [i ]. length; j++) {
var si = i + '
var s2 = i + ' j + J
продолжение
240
Глава 4. Примеры сценариев
Листинг 4.19 (продолжение)
s += boxHtml[7] + s2 + boxHtml[8] + si + boxHtml[9] + si +
boxHtml [10] + si + boxHtml [ll] + s2 + boxHtml [12] •menu[i] [Э] [8] +
boxHtml[13] + clBglnact + boxHtml[14] + clFnlnact • • boxHtml [15] +
menu[i][j][0] + boxHtml[16]
s += boxHtml[17]
document.wri teln(s)
}
}
1
function PosMenuO {
for ( 0; i < menu.length; i++ ) {
barCurr = document.all['divbarpos' + 1]
if (i > 0) {
barPrev = document.all['divbarpos' + (i - 1)]
barCurr.style.left = barPrev .offsetLeft +
barPrev.offsetWidth - 1
\
'if (menu [i ] . length > 1) {
boxCurr = document.all['divbox' + i]
boxCurr. style.pixelTop = banCurr.offsetTop +
barCurr .offsetHeight - 1
boxCurr. style.pixelLeft = barCurr ffsetLeft
}
}
function ResizeSubMenu() {
for (i =0; i < menu.length; i++) {
if (menu[i] .length > 1 && menu [i ] [0] [8] <= 0) {
el = document.all['mnubox' + i]
w = document.all['divbarpos' + i].offsetWidth
if (el.offsetWidth < w) el.style.width = w
}
]
\
function openbox(x) {
paintLayer('mnubarpos' + x, active = true)
showLayerC divbox ' + x)
for (i =0; i < menu.length; i++) if (i != x) closebox(i, 0)
overBox = 'divbox' + x
window.status = menu[x][0][2]
)
function closebox(x, timeout) {
paintLayer ('mnubarpos ' + x, active = false)
clearTimeout (timerID)
if (timeout == 0) hideLayer( 'divbox' + x)
else timerlD = setTimeout ('hideLayer ("divbox' + x + '") ' ,
closeTimeout)
overBox = ' '
window. status = defaultStatus
)
function clickbox(x) {
clickMenu(menu[x][8][1])
')
4.7. Поиск в текстовой области
241
function openboxpos(x , у) {
paintLayer ('mnuboxpos' + x + '_' + у, active = true)
overBox = 'divbox' + x
window.status = menu[x][y][2]
}
function closeboxpos(x, y) {
window.status = defaultStatus
paintLayer( 'mnuboxpos' + x + '_' + y, active = false)
)
function clickboxpos(x, y) {
clickMenu(menu[x][y][1])
}
function clickMenu(s) {
if (s . i ndexOf (' j avascr i pt: ') == 0) eval(s) ;
else if (s != '') window.location.href = s;
>
function paintLayer(layerID , active) {
if (layer = document.all[layerlD]) {
if (active) { clBg = clBgAct; clFn = clFnAct }
else { clBg = clBglnact; clFn = clFnlnact }
layer.style.backgroundColor = clBg
layer . style.color = clFn
i
)
function showLayer (layerlD) {
if (layer = document.all[layerlD]) l ayer. sty l e . vi s i b i l i ty = 'visible'
}
function hideLayer(layerlD) {
if (layer = document. all [layerlD] && (overBox != layerlD))
document.all[layerlD].style.visibility = 'hidden'
}
Обратите внимание, что позиционирование элементов меню и подменю может
происходить независимо друг от друга. Это позволяет визуально представить меню
на экране в виде пространственно разнесенных частей (рис. 4.24). Таким образом,
чтобы сделать несколько меню, не обязательно для каждого из них создавать и за-
гружать специальные файлы с описаниями.
4.7. Поиск в текстовой области
Тексты большого объема, расположенные на веб-странице, обычно снабжают по-
исковой системой. Внешне она обычно выглядит как поле ввода поискового обра-
за (набора символов, который требуется найти в тексте) и кнопки, щелчок на
которой запускает процедуру поиска. В простейшем варианте эта процедура про-
кручивает текст в окне так, чтобы найденный поисковый образ оказался види-
мым и выделенным. Если поиск оказался неудачным, то положение текста в окне
остается неизменным и, возможно, появляется соответствующее сообщение.
242
Глава 4. Примеры сценариев
]J 1." \Mo«A«ii»MUHibi\J5\nii[iHiMin • MicroiolL Interne! Eitploier
SHU И*бранмЬе Сйшё Слраежа
■
■ rum !-U -u : *Л -iJ <У »J -_J -«^ 1™J
шш
МЯЙО- I:
±J
■снго 2
11одыенн> 2.1
I!.• • ".к 1 .!< 2 2
: ■■ .
1STS"
Рис. 4.24. Меню можно представить в виде пространственно разнесенных частей
Для решения задачи поиска в тексте используется объект TextRange. Этот объект
просто обеспечивает доступ к текстовой информации, находящейся в объектах,
которые соответствуют тегам <BODY>, <TEXTAREA>, <BUTTON> и <INPUTTYPE = "text">.
В рассматриваемом ниже примере организуется поиск в тексте, находящемся в теле
HTML-документа, то есть в контейнерном теге <BODY>. В этот же контейнер мы
помещаем поле ввода поискового образа и кнопку для инициации поиска. Сцена-
рий содержит описание функции myfindQ, вызываемой при щелчке на кнопке.
Функция myfind() с помощью метода createTextRangeQ создает текстовую область.
Это не копия текста, содержащегося в теле документа, а просто ссылка на него.
Далее с помощью метода findTextQ производится поиск в текстовой области стро-
ки символов, которую ввел пользователь в поле с именем WORD. Наконец, с по-
мощью метода scrollIntoViewQ содержимое окна прокручивается так, чтобы най-
денная строка символов оказалась видимой. С помощью метода selectQ найденная
строка в тексте выделяется цветом (подсвечивается).
<HTML>
<BODY>
<INPUT TYPE = "text" NAME = "WORD" VALUE = "" SIZE = 20 >
<BUTTON onclick = "myfind()">noncK</'BUTTON>
<?>
<! Здесь расположен текст, в котором производится поиск >
</BODY>
<SCRIPT>
function myfind() {
ob] = document.body.createTextRange() // создаем текстовую область
obj.findText(WORD.value) // производим поиск
obj.scrollIntoViewO i прокручиваем текстовую
область в окне */.
obj. select() выделяем найденное
4.7. Поиск в текстовой области.
243
</SCRIPT>
</HTML>
Если поиск неудачен (поисковый образ, введенный в поле ввода, не найден), то
ничего не произойдет. А что будет, если пользователь нажал кнопку Поиск, когда
ничего не было введено? Появится сообщение об ошибке. Чтобы исключить по-
добную неприятность, потребуется несколько изменить код программы. А имен-
но следует проверить, не является ли введенный поисковый образ пустым. Ниже
приведен вариант кода функции:
function myfind(){
if (IWORD.value) return // если поисковый образ пуст, выходим
obj = document. body .createTextRangeO
obj .findText (WORD. value)
obj.scroll I ntoViewO
obj .select()
}
Теперь рассмотрим вариант, при котором на странице помимо текста присутству-
ет только кнопка Поиск. Щелчок на этой кнопке должен привести к появлению
формы, в которую пользователь должен ввести поисковый образ. Если этот поис-
ковый образ окажется непустым, то запускается процедура поиска, в противном
случае ничего не произойдет. В теле функции поиска использован стандартный
метод promptQ, который принимает в качестве параметров пояснительный текст
и начальное значение поискового образа (в данном случае - пустую строку)
и предоставляет поле для ввода значения. В окне есть две кнопки - ОК и Отмена.
Метод promptQ возвращает введенное пользователем значение либо false, если
пользователь щелкнул на кнопке Отмена. Ниже приводится описание функции:
function myfind(){
W O R D = prompt("Введите, что найти: ","")
if (IWORD) return // если поисковый образ пуст, выходим
obj =document. body. • eateTextRangeO
obj .findText(WORD)
obj . .scrollIntoViewO
obj .select ()
1
В качестве упражнения измените рассмотренные выше функции поиска таким
образом, чтобы в случае неудачного поиска в тексте на экране появилось сообще-
ние «Не удалось найти». Для вывода сообщения воспользуйтесь стандартным
методом alert().
Ниже приводится пример организации поиска не в теле документа, а в текстовой
области, заданной тегом <TEXTAREA>. Напомним, что внешне элемент <TEXTAREA>
выглядит как прокручиваемое поле ввода. Если информация о теле документа
(о содержимом контейнерного тега <BODY>) хранится в объекте body, то в случае
элементов <T E X T A R E A>, <BUTTON> и <INNPUT> необходимо обращаться к ним по зна-
чению атрибута ID или NAME
<HTML>
<INPUT TYPE = "text" NAME = "WORD" VALUE = "" SIZE = 20 >
<BUTTON onclick = "myfind()">Поиск</ВиТТОМ>
<P>
<TEXTAREA ID = "mytext">
<! Здесь расположен текст, в котором производится поиск >
244______________________________________________Глава 4. Примеры сценариев
</TEXTAREA>
<SCRIPT>
function myfi nd() {
if (IWORD.value) return /* если по исковый образ
пуст, выходим */
obj = document. all .mytext.createTextRangeO /* создаем текстовую
область */
ob] findTexUWORD.value) // производим поиск
obj . scrollIntoViewO /* прокручиваем текстовую
область в окне */
obi. selее t () // выделяем найденное i
</SCRIPT>
</HTML>
4.8. Таблицы и простые базы данных
Таблицы являются, пожалуй, наиболее часто используемыми элементами в веб-
дизайне. Это обусловлено простотой и удобством компоновки документа с по-
мощью тегов таблицы, таких как <TABLE>, <TR>, <TD> и др. Вы разбиваете все про-
странство окна на прямоугольные ячейки с видимыми или невидимыми границами
и размещаете в них элементы документа (изображения, тексты, ссылки, кнопки,
другие таблицы и т. п.). Таким образом, таблицы выполняют роль каркаса доку-
мента. До появления CSS они оставались единственным средством точного пози-
ционирования элементов, но и сейчас широко используются как мощный инстру-
мент для понятной организации и эффектного представления информации.
4.8.1. Доступ к элементам таблицы
Таблица как объект документа имеет две коллекции, посредством которых осу-
ществляется доступ к ее содержимому. Первая из них - коллекция строк rows,
а вторая - коллекция ячеек cells. Коллекция rows содержит все строки таблицы,
включая разделы, соответствующие тегам <THEAD> и <TFOOT>. Коллекция cells со-
держит все элементы таблицы, созданные с помощью тегов < Т Н> и <TD>. Доступ
к элементам коллекций осуществляется либо по индексу, либо по значению атри-
бута ID в соответствующем теге. Так, для доступа к строке таблицы можно ис-
пользовать значение ID в теге <TR>, а для доступа к ячейке - значение ID в теге
-ТН> или <TD>. При использовании индекса (номера) следует иметь в виду, что
нумерация начинается с 0. При этом ячейки таблицы нумеруются слева направо
и сверху вниз.
Рассмотрим пример простой таблицы, содержащей три столбца и четыре строки
(рис. 4.25):
<HTML>
<TABLE ID = "mytab">
<ТНЕАО>Моя таблица</ТНЕАО>
<ТН>Фамилия</ТН><ТН>Имя</ТН><ТН>Должность</ТН>
<TR ID="rl">
<TD>HBaHOB</TD><TD>MBaH</TD><TD>£HpeKTop</TD>
</TR>
<TR I D =" r 2">
4.8. Таблицы и простые базы данных
245
<ТО>Петров</ТО><ТО>Петр</ТО><ТО>Заместитель директора</TD>
</TR>
<TR ID="r3">
<TD>CMflopoBa</TD><TD>3nno4Ka</TD><TD>CeKpeTapma</TD>
</TR>
<TR ID="r4">
<ТО>Федоров</ТО><ТО>Федор</ТО><ТО>Водитель</ТО>
</TR>
</TABLE>
</HTML>
lb ф
СЛМои noK4MenTb.VJS\TABLE HTM Microsoft jntemet, В ■
Избранное CgPW*:
S/'P
»
Ссыпки Й>УГ.!
■ .
Моя таблица
Фамилия Имя Должность
Иванов Иван Директор
Петров Петр Заместитель директора
Сидорова Эллочка Секретарша
Федоров Федор Водитель
-li
Рис. 4.25. Пример таблицы
Ниже приведено несколько примеров ссылок на элементы таблицы из сценария:
document.all.mytab.rows[0] // ссылка на строку заголовков столбцов
document.all.mytab.rows[1] // ссылка на первую строку данных
document.all.mytab.rows["rl" ] /* другой способ ссылки на первую
строку данных */
document.all.mytab.cells[0]
/*
содержащую
document.all.mytab.cells[3]
document.all.mytab.cells[4]
document.all.mytab.cells[б]
ячейку,
*/
ячейку, содержащую "Иванов"
ячейку, содержащую "Иван"
ячейку, содержащую "Петров"
ссылка на
"Фамилия"
// ссылка на
// ссылка на
// ссылка на
Чтобы обратиться к строке или ячейке таблицз, следует учесть иерархию объек-
тов: сначала мы обращаемся к коллекции all всех элементов документа, затем
к таблице и только после этого - к элементу таблицы. Обратите внимание, что
эти ссылочные выражения возвращают не содержимое элементов таблицы (строк
или ячеек), а лишь ссылки на элементы как на объекты.
Каждая строка таблицы (элемент коллекции rows), являясь объектом, имеет свою
собственную коллекцию ячеек, которая называется cells, так же как и коллекция
всех ячеек таблицы. Однако нумерация ячеек в этой коллекции происходит в пре-
делах одной строки начиная с 0. Например, в случае трехстолбцовой таблицы ячей-
ки из коллекции cells для одной строки имеют индексы 0,1и 2.
246.
Глава 4. Примеры сценариев
Примеры
document, all .mytab. rows [01. celbl 01
/*
document. all .mytab. rows [1] . cells[0]
/*
document . all .mytab rows[1]. cells [l]./
document. all .mytab . rows [2] . cells[0]
/*
document. all ,m y ta b ro ws[ " r rows ["r.2"] .cells fl]
/*
ссылка на ячейку,
содержащую "Фамилия" */
ссылка на ячейку,
содержащую "Иванов" */
ссылка на ячейку.
содержащую "Иван"*/
ссылка на ячейку,
содержащую "Петров" */
ссылка на ячейку,
содержащую "Петр" */
Выше мы рассмотрели создание ссылок на элементы таблицы. Эти ссылки при-
меняются для чтения и изменения содержимого таблицы. В IE4+ для этой цели
можно использовать свойства innerText и innerHTML С помощью свойства innerText
читается и изменяется обычное текстовое содержимое ячеек. В случае когда
в ячейке находится HTML-код, для его изменения необходимо аналогичным об-
разом воспользоваться свойством innerHTML. Впрочем, если содержимое ячейки
является обычным текстом, то вполне можно использовать и innerHTML Таким
образом, свойство innerHTML универсальнее, чем innerText. Если таблица выводит-
ся в окно браузера (то есть видима), изменение содержимого ее ячеек отобразит-
ся автоматически.
docuieint. all .mytab. rows[1] . innerText // ИвановИванДиректор
document.all.mytab.ceilS[3]. inner-Text // Иванов
s |2]. innerText // Директор
/* Изменяем текстовое содержимое ячейки: */
document.all.mytab.rows[I].cells[2].innerText = "Сторож"
/* Заменяем текстовое содержимое ячейки на изображение: */
document.all.mytab.rows[1].cells[2].innerHTML = "<IMG SRC='pict.jpg'>"
Следует иметь в виду, что изменять содержимое таблицы необходимо по ячей-
кам, а не по строкам. Иначе говоря, попытка использовать выражение вида:
.InirerText = новое_значение
приведет к удалению строки и, возможно, к ошибкам выполнения сценария.
Коллекции строк и ячеек, как и любой массив, обладает свойством length, значе-
нием которого является количество элементов в коллекции.
Примеры
doc ument.all. mytab. rows, length // количество всех строк
document. aU. mytab. cells, length // количество всех ячеек
lent.all.mytab.rows[2].cells.length /* количество ячеек в
строке с индексом 2 */
4.8.2. Добавление и удаление строк таблицы
Добавление новой строки в таблицу производится с помощью метода insertRowQ.
Этот метод возвращает ссылку на вновь созданную строку, которая затем исполь-
зуется для вставки ячеек. Ячейки вставляются в строку с помощью метода
ГП5вЛСе11(индекс_ячейки). Данный метод возвращает ссылку на созданную ячейку,
которая затем используется для задания содержимого ячейки. Ячейки вставляются
в строку по порядку без пропусков начиная с нулевой. Так, нельзя создать ячейку
4.8. Таблицы и простые базы данных
247
с индексом 3, если ячейки с индексами 0, 1 и 2 еще не созданы. С другой стороны, вы
можете последовательно создать любое количество ячеек в строке.
Таким образом, новая строка создается в три этапа: сначала к таблице добавляет-
ся новая строка, затем в нее вставляются ячейки, после чего они заполняются зна-
чениями. Ниже приведен пример добавления строки к существующей таблице
и заполнения ее ячеек значениями:
newrow = document. all .mytab. insertRowO // добавляем новую строку
new«U =newro*. i nsertCell(в) // вставляем ячейку с индексом 0
пенсеП.1ппегТехт.=" Привет" // заполняем ячейку значением
newceU=newrow. insertCeH (1)
newcell.innerHTML="<IMG S R C = 'p i ct. j p g'>"
newcell=newrow.insertCell(2)
newcell. 1ппег НТМ1="<в>Охранник</В>' >"
Для удаления строки таблицы служит метод deleteRow(MH f l eKC_CTpoKM). Параметр
указывает номер удаляемой строки. Например:
document.all.mytab.deleteRow(2)
4.8.3. Генерация таблиц с помощью сценария
Один из неприятных моментов в создании таблиц посредством тегов HTML состоит
в большом количестве этих тегов и необходимости тщательно следить за правильной
их расстановкой. При этом коррекция содержимого ячеек больших таблиц оказыва-
ется весьма хлопотным делом. Облегчить работу в ряде случаев помогает хранение
содержимого ячеек в массивах и генерация таблицы с помощью сценария.
В следующем примере предполагается, что содержимое строк таблицы хранится
в отдельных массивах. С помощью операторов цикла формируется строка, содер-
жащая теги таблицы, а затем эта строка записывается в HTML-документ.
<HTML>
<SCRIPT>
/* Массив заголовков столбцов */
ah = ne w Array ("Фамилия" ,"Имя" "Должность")
/* Массив данных */ Д
ad = new ArrayO
ad[0] = new Array( "Иванов", Иван" Иван", "Директор")
ad[l] = new Array( "Петров", Петр", "Заместитель директора")
ad[2] = new Array (С и д о р о в а "Э л л о чка" , "Эллочка", "Секретарша")
ad[3] = new Array ( "Ф е д о р о в "Ф е д ор" "Федор", "Водитель")
strtab = "<TABLE>"
/* Формируем заголовки столбцов I аблицы*/
f o r (i = 0; i<ah.length; i++){
strtab+ = "<TH>" + ahti] + </TH>
}
/* Формируем строки таблицы */
for(i=0; i<ad. length; i++) {
strtab+ = "<TR>"
for(j=0; ]'<ad[il. length; j++){ // содержимое ячеек строки
strtab+ = ]"
strtab+="</TR>"
I
strtab+ = "</TABLE>"
document.write(strtab) // запись в документ
</SCRIPT>
</HTML>
248
Глава 4. Примеры сценариев
4.8.4. Простые базы данных
Достаточно эффективный способ формирования таблиц - использование специ-
ального элемента управления ActiveX, называемого Simple Tabular Data (STD -
простые табличные данные). Этот элемент вставляется в HTML-документ с по-
мощью тега < O B J ECT > и позволяет легко управлять данными, хранящимися в обыч-
ном текстовом файле. Вы можете изменять, добавлять, удалять, сортировать, ис-
кать и фильтровать (выбирать) данные. Но главное достоинство применения STD
заключается в простоте создания больших таблиц, например каталога ссылок.
Собственно данные хранятся на диске в текстовом файле. При этом их табличная
структура поддерживается с помощью символов-разделителей. В качестве разде-
лителя строк обычно используется невидимый символ перевода строки (клавиша
Enter). Однако можно задать любой символ в качестве разделителя строк. Данные
различных ячеек отделяются друг от друга произвольным символом, не исполь-
зуемым в каких-нибудь других служебных целях (например, запятая или верти-
кальная черта). Если запятая встречается в значениях данных, то ее не следует
выбирать в качестве разделителя. Создавать такие файлы можно вручную с по-
мощью текстового редактора (например, Блокнота Windows). Кроме к го, в боль-
шинстве систем работы с базами данных возможно преобразование специфиче-
ских файлов в текстовые.
В первой строке текстового файла записываются через символьный разделитель
имена столбцов. Они не обязательно должны совпадать с теми заголовками стол-
бцов, которые вы хотите видеть на экране. Главное их назначение в том, чтобы
обеспечить доступ к данным. Это так называемые имена полей базы данных, или,
другими словами, идентификаторы полей. Правила их образования такие же, как
и для имен переменных. На рис. 4.26 первая строка содержит имена полей, а ос-
тальные - собственно данные. Разделителем полей здесь является вертикальная
черта.
ЖтуribЫ - Блокнот
ftowiis. £
Фамилия|Имя|Должность
Иванов Иван Директор
Петров Петр Заместительдиректора
Сидорова|Эллочка|Секретарша
Федоров | Федор | [Водитель
т
шв
~2
Рис. 4.26. Пример текстового файла с табличными данными
Элемент ActiveX STD, управляющий данными, встроен в браузер IE4+, а чтобы
вставить его в HTML-документ, необходимо использовать следующие теги:
<OBJECT ID = "mydbcontrol"
CLASSID = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME = "FieldDelim" VALUE="I">
4.8. Таблицы и простые базы данных________________________________________249
<PARAH NAME = "DataURL" VALUE = "mydb.txt">
<PARAM NAME = "UseHeader" VALUE = true>
</OBJECT>
Контейнерный тег <ОВЗЕСТ> содержит множество тегов <PARAM>, с помощью кото-
рых задаются параметры. В примере мы указали лишь некоторые из них:
• FieldDelim - разделитель полей (ячеек); в примере значением этого параметра
является вертикальная черта "|";
• DataURL- место расположения (URL-адрес) текстового файла сданными;
в примере мы указали просто имя файла mydb.txt;
• UseHeader - определяет, содержит ли первая строка в текстовом файле имена
полей.
Значение атрибута ID тега <OBJECT> выбирается произвольно, но оно обязательно
должно быть указано. Если требуется установить символ, являющийся раздели-
телем строк данных в текстовом файле, то следует добавить еще один параметр:
<PARAM NAME = "RowDelim" VALUE="&# ASCII-код;">
По умолчанию значением атрибута VALUE является "
",то есть ASCII-код сим-
вола перевода строки.
Для просмотра всех параметров элемента управления STD, установленных по умол-
чанию, достаточно загрузить в браузер следующий HTML-документ (рис. 4.27):
Microsoft Internet Exploiei
:- Л <PAHДM^:AME=,^t)wOйb1"■^LUг»,'ьtПO'>:fFйRft.M^ ■ '-t, й
\\ М;ШЕ«".ТвйОиаИ|и"УАЬи£"к P-FMH.-^f."£icepeCFu«"VAL u | I ЛРАВдМ NAME»!Uiw*ie«ta" I !«
•: **-**:■■■■ VAiLtE<WxPAftAM NAME» фрЬ«# В. iPAfiWmM| ^GFiCalomrf'VA^^HPAF| .г
:; ~:-MAME-TiSB^fllue'^VAyUE-^VFARAM MAME=Tji4jCrte4orf-UAfc(JE tf»S
■ ■■■ VAtUE*?VPAHAM:IW№»Cha6et VALUE*'"' «НАМЕ-г<Пди*Эй'^АШЕ-'"^<Н4ЙМ.!
» НШеЮжйи^'УШЗЬ," ■. "aPARAM NAM "'EoSVUe■ ''R AM KAME=-Fito-'
■ VALU РАЯАМ МАМ Ёя! Af" РdOele'.!VALUE-"0"> <PARAM MAME^'-DitiURL'* VALU E-""> <PAR4M
NAM£*"»eadjiSiafe'*\«LUEi"4'' )
mrjji
Рис. 4.27. Диалоговое окно, в котором показаны параметры элемента управления STD,
установленные по умолчанию
<HTML>
<OBJECT ID = "mydbcontrol"
CLASSIC = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
</OBJECT>
<SCRIPT>
alert(mydbcontrol.tnnerHTML)
</SCRIPT>
</HTML>
Чтобы отобразить в окне браузера таблицу с данными из текстового файла mydb.txt,
достаточно в том же документе записать следующий HTML-код (рис. 4.28):
<TABLE DATASRC = «mydbcon t rol BORDER = 5>
<THEAD>
<ТН>Фамилия сотрудника</ТН><ТН>Имя</ТН><ТН>Должность</ТН>
</THEAD>
<TR>
250
Глава 4. Примеры сценариев
<TD><SPAN DATAFLD
<TD><SPAN DATAFLD
<TD><SPAN DATAFLD
</TR>
</TABLE>
"Фамилия"></SPAN></TD>
"HMfl"></SPAN></TD>
"Должность"></SPAN></TD>
J 4j3 ;iljtj cff J => Jt И ' JS " лч* -
IФамилия сотрудника j Имя
Должность
(Иванов
(Иван
1 Директор
[Петров
Петр
Заместитель директора!
:|Сидорова
|Эллочка|Секретарша
.(Федоров
Федор
(Водитель
: •
Рис. 4.28. Пример таблицы, созданной с помощью элемента управления STD
Здесь в теге <ТАВ1_Е> атрибут D A T A S R C в качестве значения имеет ссылку на элемент
STD (значение ID в теге <OBJECT>). Внутри тегов данных <T D>, в контейнерах <SPAN>,
значениями атрибутов D A T A F L D являются имена полей. Написание этих имен долж-
но в точности соответствовать указанным в первой строке текстового файла дан-
ных. Однако порядок следования и количество выводимых на экран полей может
быть произвольным. Например, можно вывести не все поля или, наоборот, про-
дублировать некоторые из них. Кроме того, можно изменить порядок отображе-
ния полей. Этот порядок, а также состав отображаемых полей (столбцов) опреде-
ляется в теге <TABLE>.
ВНИМАНИЕ -
При использовании элементауправленияSTDописаниетаблицы спомощьютега<TABLE>
имеет небольшой объем. В теге <TA B LE>, по существу, описывается лишьструктура таблицы,
но не описывается ее содержимое. Описание данных содержится в текстовом файле.
Таким образом, при использовании STD мы организуем взаимодействие трех ком-
понентов: элемент управления STD устанавливает связь с источником данных
(текстовым файлом), элемент <TABLE> связывается с STD и источником данных,
текстовый файл содержит собственно данные.
В текстовом файле с данными может содержаться не только текстовая информация,
но и HTML-коды. Чтобы эти коды отображались в таблице не просто как текст, а
интерпретировались, необходимо в теги <T D> добавить атрибут D A T A F O R M A T A S - "html".
:
4.8. Таблицы и простые базы данных
251
Ё*йл [как* Вий ИsSpawte Судане :£лс-лка.
^г^-^...^гв^».-7'\ет.
Рис. 4.29. Пример таблицы, источник данных которой содержит теги изображения <IMG>
При этом если ячейка таблицы не содержит тегов, то будет отображаться простой
текст, а в противном случае - результат выполнения HTML-кода. Это позволяет,
например, вставлятьвячейкитаблицыизображения, гиперссылки, кнопкиидру-
гие элементы (рис. 4.29). Ниже приведен пример:
<HTML>
<OBJECT ID = "mydbcontrol"
CLASSID = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
"FieldDelim" VALUE="|">
"DataURL" VALUE = "mydb.txt">
"UseHeader" VALUE = true>
<PARAM N A M E =
<PARAM NAME =
<PARAM N A M E =
</OBJECT>
<TABLE DATASRC = tfmydbcontrol BORDER = 5>
<THEAD>
<ТН>Фамилия сотрудника</ТН><ТН>Имя</ТН><ТН>Фото</ТН>
</THEAD>
<TR>
252.
.Глава 4. Примеры сценариев
<TD><SPAN DATAFLD = "Фамилия"></5РАМ>< /ТО>
<TD><SPAN DATAFLD = " Имя " >< / S PAN></TD>
<TD><SPAN DATAFLD = "Портрет" DATAFORMATAS = " html" > </ SPAN></TD>
</TR>
</TABLE>
</HTML>
Файл с данными mydb.txt:
Фамилия|Имя|Портрет
Иванов|Иванj<IMG S R C = 'pictl. j p g'>
Петров | Петр | <IMG SRC=' pi c t2 .jpg'>
Сидорова|Эллочка|<IMG S R C ='p ict3 . j p g'>
Федоров|Федор|<IMG S R C ='p ict4. j p g'>
Как уже отмечалось выше, элемент управления STD имеет и другие параметры.
В частности, есть параметры, с помощью которых можно установить фильтр (вы-
борку) и сортировку данных.
Для установки фильтра предусмотрены следующие три параметра:
<PARAM NA ME = "FiUerColumn" VALUE = "имя_поля"
<PARAM NAME = "Fi1ter-Criterion" VALUE = "оператор_сравнения"
<PARAM NAME = "Fi lterValue" VALUE = образец
С помощью этих параметров задается логическое условие (критерий) фильтра
следующего вида:
имя_поля оператор_сравнения образец
Например, если требуется отфильтровать из таблицы все строки, в которых поле
Фамилия имеет значение "Иванов", то необходимо использовать следующие теги
параметров:
<PARAM N AME = "Filter-Column" VALUE = "Фамилия"
<PARAM NAME = " FiIterCriterion" VALUE = " = = "
<PARAM N A M E = "FilterValue" VALUE = "Иванов"
В качестве оператора сравнения можно использовать = (неточное равенство), ==
(точное равенство), != (неравенство), > (больше), < (меньше), >= (не больше), <=
(не меньше).
Чтобы выключить (сбросить) фильтр и сделать доступными все строки таблицы,
достаточно использовать условие, которому заведомо удовлетворяют все строки
таблицы. Например, следующие параметры сбрасывают текущий фильтр, посколь-
ку пустая строка содержится в любой строке:
<PARAM NAME = "FiIterCriterion" VALUE =
<PARAM NAME = "FilterValue" VALUE = '*
По умолчанию фильтрация данных чувствительна к регистру, в котором набран
образец. Управлять зависимостью от регистра можно с помощью параметра Case-
Sensitive:
<PARAM NAME = "CaseSensi tive" VALUE = значение>
Атрибут VALUE может принимать значения О/fatse (не зависит) или I/true (зависит).
Для сортировки (упорядочения) данных используется следующий параметр:
<PARAM NAME = "SortColumn" VALUE = "HMfl_nona">
Сортировка строк производится по значениям ASCII-кода значений заданного
поля базы данных. Например, если мы хотим, чтобы фамилии располагались по
алфавиту, необходимо записать:
4.8. Таблицы и простые базы данных
253
<PARAM NAME = "SortColumn" VALUE = "Фамилия">
По умолчанию сортировка производится по увеличению значения ASCII-кода
символов. Однако порядок можно изменить на противоположный, если исполь-
зовать следующий параметр:
<PARAM NAME="SortAscending" VALUE=0>
Атрибут VALUE=1 устанавливает режим сортировки, принятый по умолчанию.
Элемент управления STD предоставляет объект recordset, который поддерживает
методы перемещения по строкам таблицы (по записям базы данных). Синтаксис
следующий:
1с1_объекта. recordset ,метод
Например, mydb.recordset.moveNextQ перемещает указатель текущей записи на
следующую запись.
Методы перемещения по записям базы данных:
• movePreviosQ - к предыдущей записи;
• moveNextQ - к следующей записи;
• moveFirstQ- к первой записи;
• moveLastQ - к последней записи.
Перед использованием методов moveNextQ и movePreviosQ следует проверять зна-
чения свойств eof (конец файла данных) и bof (начало файла данных). Так, если
текущей является последняя строка таблицы, то нельзя использовать метод
moveNextQ. Аналогично, если текущей является первая строка, то нельзя исполь-
зовать movePreviosQ. Разумеется, методы перемещения используются в сценари-
ях обработки событий, таких как, например, щелчок на кнопке. Это необходимо,
если на экран выводятся не все записи (строки) таблицы, а только одна запись
Дид Избранное
Фамилия [Иванов
Имя
Фото
и
Рис. 4.30. Пример формы с полями ввода и просмотра данных и кнопками
для перемещения по записям
254 _ Глава 4. Примеры сценариев
(например, с помощью полей ввода). Перемещение по строкам таблицы исполь-
зуется при поиске данных в соответствии с некоторым критерием и при их обра-
ботке.
Если использовать поля ввода (например, при создании формы для просмотра
и коррекции данных), то привязку данных к ним можно осуществить с помощью
следующего фрагмента HTML-кода:
<TR><TD>
<INPUT TyPE = "text" DATASRC = #mydbcontrol DATAFLD = "Фамилия">
</TD></TR>
Обратите внимание, что атрибуты привязки данных D A T A S R C и D A T A F L D совместно
используются в одном и том же теге. В листинге 4.20 приводится пример HTML-
кода, который выводит на страницу одну запись базы данных с кнопками навига-
ции (рис. 4.30). Здесь использовался тот же источник данных, что и в предыду-
щем примере.
Листинг 4.20. Код, выводящий одну запись базы данных с кнопками навигации
<HTML>
<HEADER><TITLE>npHMep формы STD</TITLE></HEADER>
<OBJECT ID = "mydbcontrol"
CLASSID = "CISID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME = "FieldDelim" VALUE = "|">
<PARAM NAME = "DataURL" VALUE = "mydb.txt">
<PARAM NAME = "UseHeader" VALUE = true>
</OBJECT>
<! Поля с данными>
<TABLE WIDTH = 75%>
<TR><TH><t>aMHnHfl</TH>
<TD>
<INPUT TYPE = "text" DATASRC = #mydbcontrol DATAFLD = "Фамилия" >
</TD></TR>
<ТИ><ТН>Имя</ТН>
<TD><INPUT TYPE = "text" DATASRC = #mydbcontrol DATAFLD="HMfl">
</TD></TR>
<ТК><ТН>Фото</ТН>
<TD><SPAN DATASRC = #mydbcontrol DATAFLD = "Портрет" DATAFORMATAS =
"html"></SPAN>
</TD></TR>
</TABLE>
<P>
<! Кнопки перемещения по записям
<INPUT NAME = "cmdFirst" TYPE = "BUTTON" VALUE = "«"
onclick = "FirstO">
<INPUT NAME = "cmdPrevious" TYPE="BUTTON" VALUE="<"
onclick = "PreviousO">
<INPUT NAME="cmdNext" TYPE="BUTTON" VALUE=">"
onclick = "Next()">
<INPUT NAME="cmdLast" TYPE="BUTTON" VALUE=">>"
onclick = "LastO">
•
<SCRIPT>
function FirstO { // к первой записи
mydbcontrol.recordset .moveFirst()
4.8. Таблицы и простые базы данных
255
function PreviousO { // к предыдущей записи
if (! mydbcontrol.recordset.bof)
mydbcontrol.recordset.movePreviousO
}
function Next() { // к следующей записи
if (! mydbcontrol.recordset.eof)
my dbcontrol. recordset. moveNextO
}
function Last() { // к последней записи
mydbcontrol.recordset.moveLast()
}
</SCRIPT>
</HTML>
Обратите внимание, что третье поле с именем Портрет содержит изображения, и по-
этому мы показываем его не с помощью элемента <INPUT>, а с помощью контейне-
ра <SPAN> с атрибутом D A T A F ORMA T AS = "html".
ВНИМАНИЕ -
Изменения данныхвтаблицесохраняютсятольковоперативной памяти компьютера и никак
не влияют на содержимое текстового файла-источника данных. Чтобы обновить содержи-
мое таблицы, необходимо отредактировать текстовый файл и перекачать его на сервер,
как это обычно делается при модификации страниц сайта.
Тем не менее рассмотренный здесь элемент управления STD оказывается очень
полезным для организации обновления содержания веб-сайта. Вместо того что-
бы корректировать HTML-код всей страницы, выискивать в ней нужное место,
вы можете редактировать только текстовые файлы с информацией, не занимаясь
при этом вопросами композиции. Например, таким образом можно организовать
разделы новостей сайта и текущей информации. В подразделе 4.8.7 будет рассмот-
рена система поиска по сайту, основанная на использовании STD.
4.8.5. Сортировка данных таблицы
Рассмотрим сортировку строк таблицы по значениям того или иного столбца.
В нашем примере для сортировки необходимо просто щелкнуть на заголовке нуж-
ного столбца таблицы. Для этого кроме элемента управления STD и таблицы
нам понадобится сценарий, содержащий функцию, обрабатывающую щелчок пу-
тем модификации тега <OBJECT> (листинг 4.21). Здесь использован следующий
хитрый прием. Сначала база данных показывается без всякой сортировки. Мы
сохраняем блок тегов от <O B J E C T> до </ОВЗЕСТ>, за исключением последнего, в пе-
ременной obj. При щелчке на заголовке таблицы вызывается функция сортиров-
ки sort(field), которой передается имя поля. Эта функция дописывает к значению
переменной obj строку, содержащую теги параметров, отвечающие за сортировку.
Далее функция sort() заменяет в HTML-коде теги <ОВЖТ> на те, которые содержат-
ся в переменной obj. Это делается с помощью свойства outerHTML При этом элемент
управления STD заново инициализируется с новыми параметрами. В результате таб-
лица перерисовывается в соответствии с новым порядком следования строк.
256
Глава 4. Примеры сценариев
Листинг 4.21. Код сценария сортировки данных таблицы
<HTML>
<OBJECT ID = "mydbcontrol"
CLASSID = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<P A R A M NAME ' FieldDelim" VALUE="|">
<PARAM NAME ' DataURL" VALUE = "mydb.txt">
<PARAM NAME 'UseHeader" VALUE = true>
<PARAM NAME "SortColumn" VALUE"Фамилия">
<PARAM NAME - ' SortAscending" VALUE = 1>
</OBJECT>
<TABLE DATASRC = tfmydbcontrol BORDER " 5>
<THEAD>
<TH onclick = "sort('Фамилия')">Фамилия сотрудника</ТН>
<TH onclick = "sort('Имя1) ">Имж/ТН>
<ТН>Фото</ТН>
</THEAD>
<TR>
<TD><SPAN DATAFLD = "Фамил ия " ></ SPAN></TD>
<TD><SPAN DATAFLD = " Имя " >< / SPAN></TD>
<TD><SPAN DATAFLD = "Портрет" DATAFORMATAS = "html" > </SPAN></TD>
</TR>
</TABLE>
<SCRIPT>
// Сохраняем теги объекта STD в переменной
var x = document.all.mydbcontrol.innerHTML // теги, вложенные в
<object>
var obj = '<OBJECT ID = "mydbcontrol" CLASSID =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">' + x
function sort (field) { // сортировка по значениям столбца field
var у = document.all.mydbcontrol
y.outerHTML = obj + '<PARAMNAME = "SortColumn" VALUE="' + field +
"'></OBJECT>'
}
</SCRIPT>
</HTML>
В этом примере сортировать данные можно только по первым двум текстовым
полям. Вы можете в качестве упражнения усовершенствовать этот код. Напри-
мер, сделайте так, чтобы при двойном щелчке на заголовке столбца таблицы сор-
тировка происходила в противоположном порядке. Для этого необходимо не уста-
навливать параметр <PARAM NAME="SortAscending" VALUE=0>.
4.8.6. Фильтрация данных таблицы
Для организации фильтрации данных из таблицы по заданному критерию исполь-
зуется подход, аналогичный рассмотренному в предыдущем подразделе. В при-
веденном ниже примере (листинг 4.22) в окно браузера выводится таблица с данны-
ми и элементы, с помощью которых можно задать поле (столбец) и значение (образец)
для формирования простого условия фильтра вида: имя_поля = значение.
Имя поля выбирается из раскрывающегося списка, а значение вводится с клавиа-
туры. Для установки фильтра следует щелкнуть на кнопке Применить (рис. 4.31).
4.8. Таблицы и простые базы данных
257
1 Файл
Фильтр:
Поле |Ф
Значение |петРов
v v •: v • -
!Фамилняр1мя j Портрет
: Ж Ш <
Рис. 4.31. Пример таблицы с элементами для установки фильтра
Если поле ввода значения пусто, то при щелчке на этой кнопке фильтр выклю-
чится, а в таблице будут отображены все имеющиеся записи. Заметим, что ре-
зультат фильтрации в данном примере не зависит от регистра, в котором пользо-
ватель ввел значение.
Также, как и при сортировке, мы сохраняем в переменной часть информации о па-
раметрах элемента а затем модифицируем ее, чтобы учесть условие филь-
тра. Для установки фильтра используется свойство outerHTML
Листинг 4.22. Код для фильтрации данных таблицы
<HTML>
<НЗ>Фильтр:</НЗ>
Поле
<! Раскрывающийся список имен полей >
<SELECT N A M E = "FL
<OPTION value = "Фамилия">Фамилия
<OPTION value = "Имя">Имя
</SELECT>
<BR>
Значение
<! Поле ввода значения для фильтра и кнопка>
<INPUT N A M E = "IMP" VALUE = " TYPE = "text">
<P>
<BUTTON onclick = "f i П е г О ">Применить</В1ЛТ0М>
<HR>
<! Элемент управления STD>
продолжение
258.
.Глава 4. Примеры сценариев
Листинг 4.22 (продолжение)
BJECT ID = "mydbcontrol"
CLASSID = "CLSID:333C7BC4-460F- 11D0-BC04-0080C7Q55A83">
<PARAM NAME = " F i e l d D e l i m " VALUE="|">
<PARAM NAME = "DataURL" VALUE = "mydb.txt">
<PARAM N AME = "UseHeader" VALUE = true>
</OBJECT>
<! Таблица для вывода данных>
<ТаЫе DATASRC = tfmydbcontrol border = 5>
<THEAD>
<ТН>Фамилия</ТН>
<ТН>Имж/ТН>
<ТН>Портрет</ТН>
</THEAD>
<TR>
<TD><SPAN DATAFLD = "Фамилия"></5РАМ></ТО>
<TD><SPAN DATAFLD = "Имя" ></5PAN></TD>
<TD><SPAN DATAFLD = "Портрет" DATAFORMATAS="html
</TR>
</TABLE>
<SCRIPT>
/* сохраняем основные параметры элемента STD в переменной obj */
var obj = "<OBJECT ID = 'mydbcontrol '
obj+ = "CLASS ID='CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>"
"<PARAM NAME='FieldDelim' Value = ')'>"
obj+= "<PARAM NAME='DataURL' Value = 'mydb. txt'>"
obj+ = "<PARAM NAME=' UseHeader' value = true>"
function filter() { // установка фильтра
var cpar = ' // переменная для хранения параметров
фильтра
if (INP.value){ // если введено значение
1 value = '
cpar+ = "<p a ra m n a m e = 'F iIte rV a lu e ' value = '"+INP.value +" ' >
cpar+= "<param name='FiIterCriterion' value = '='
"<PARAM NAME='CaseSensitive' VALUE = false>"
}
L = obj + cpar + "</OBJECT>"
}
</SCRIPT>
</HTML>
Для тренировки усовершенствуйте рассмотренный выше код таким образом, что-
бы можно было выбирать оператор сравнения из раскрывающегося списка, а так-
же устанавливать режим зависимости или независимости от регистра.
4.8.7. Поиск по сайту
Если ваш сайт содержит много страниц, то имеет смысл организовать поисковую
систему. Здесь мы рассмотрим один простой вариант такой системы, использо-
ванный на моем сайте.
В основе поисковой системы положена база данных, содержащая соответствие
между поисковыми образами (ключевыми словами) и ссылками на веб-страни-
цы. Эта поисковая база данных создана в обычном текстовом файле, который в на-
шем примере называется search.txt. В ней всего два поля (столбца) с именами р!
4.8. Таблицы и простые базы данных_______________________________________259
и р2. Первый столбец содержит ключевые слова, а второй - ссылки на HTML-
документы, в которых находятся соответствующие ключевые слова В качестве
разделителя полей в текстовом файле использовалась вертикальная черта Таким
образом, структура поисковой базы данных имеет следующий вид:
Р1|р2
ключевые_слова|ссылки
Ниже приводится фрагмент поисковой базы данных для моего сайта:
БД |р2
Ц текстовая база данных 5TD Simple Tabular Data|<a href='db0.htm'>База данных (5TD)</a>
Динамическая загрузка элементов|<а href 'change.htm'>Динамическая загрузка элемен
E-mail Email Электронная почта|<а href='mail .htm' >Электронная почта</а>
Эллиптичекая траектория орбита движение эллипс |<а href=' t ipse.htm'>Движение по эллипсу</а>
Звездные войны Космос|<а href='ellipse.htm' >3вездные войны</а>
Подсветка мигание бордюр|<а href='bordur.htm'>Подсветка и мигание</а>
Поиск по сайту карта сайта map search|<a href='search. htm1>Поиск по сайту</а>
Поиск в тексте поиск в текстовой области|<а href='findtext.htm'>Поиск в текстовой обпасти</
АФП AFP|«a href'afp.htm'>АФП</а>
выполнение выражения eval()|<a href=eval .htm'выполнение выражения в текстовой строке</а>
книги книга Сам себе web-дизайнер web-мастер|<а href='mybook.htm'>Книги</а>
Здесь ключевые слова выбраны из заголовков и содержательной части текстов,
расположенных на различных страницах сайта, посвященного веб-дизайну. На-
пример, такие слова, как «БД», «текстовая», «база» и «данных», содержатся в файле
db0.htm. Хотя эти же слова можно встретить и на других страницах моего сайта,
я сделал так, чтобы поиск этих слов приводил именно к документу db0.htm.
Прежде всего, необходимо тщательно продумать систему ключевых слов, чтобы
поиск был эффективным. Затем следует разработать алгоритм работы поисковой
системы. В частности, требуется решить, будет ли поиск зависеть от регистра, в ко-
тором пользователь ввел поисковый образ, выводить ли в качестве результата пер-
вый найденный документ или выводить только список ссылок на все найденные
документы и т. п.
В рассматриваемом примере поиск не зависит от регистра введенного поискового
образа Система просматривает значения первого поля базы данных строка за стро-
кой, проверяя каждый раз, содержится ли введенный пользователем поисковый
образ в значении первого поля. Если да, то поиск завершается; в противном слу-
чае он продолжается. Результат поиска выводится в виде ссылки на документ.
Щелчок на данной ссылке выводит этот документ в окно браузера. Если поиск
неудачен, то появляется соответствующее сообщение.
Интерфейс поисковой системы прост: поле ввода поискового образа и кнопка для
запуска процедуры поиска. Результаты поиска отображаются ниже, под полем
ввода (рис. 4.32).
Для работы с базой данных использованы два идентичных элемента управле-
ния STD, связанные с одним и тем же текстовым файлом search.txt. К каждому
из этих элементов STD привязана своя таблица. Одна из них, всегда невиди-
мая, необходима для служебных целей, а именно для операции поиска по всей
базе данных. Она содержит только поле ключевых слов р 1 Вторая таблица
предназначена для отображения результатов поиска и содержит только поле
ссылок р2. При загрузке документа эта таблица не видна и отображается только
при успешном поиске. Такой прием обусловлен тем, что стандартные для элемен-
та STD средства фильтрации (операторы сравнения) слишком примитивны для
наших целей (см. подраздел 4.8.4). Нам было необходимо организовать проверку
260
Глава 4. Примеры сценариев
Гчцц Избрание*
.vl-рУ НИ „сьцжв " Адрес,
аза данных
М ой
Рис. 4.32. Так выглядит интерфейс поисковой системы на главной странице сайта автора
вхождения поискового образа в последовательность ключевых слов. Очевидно,
что это недостижимо с помощью обычных операторов сравнения. Кроме того, мне
не хотелось сбрасывать фильтр перед выполнением каждой операции поиска.
В листинге 4.23 приводится пример кода поисковой системы.
Листинг 4.23. Пример кода поисковой системы
<HTML>
<! Элемент управления для таблицы ссылок >
<OBJECT ID = fndl
CLASSID = 'CL5ID:333C7BC4-460F-11D0-BCG4-0080C7055A83'>
<PARAM NAME = 'FieldDelim' VALUE= ' r ' >
<PARAM NAlME = 'DataURL' VALUE='search.txt '>
<PARAM NAlME = 'UseHeader' VALUE=true>
<PARAM NAME = 'CaseSensitive' VALUE=false>
</OBJECT>
<! Элемент управления для таблицы ключевых слов >
OBJECT ID = 'fnd2'
CLASSID = 'CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>
<PARAM NAME = 'FieldDelim1 VALUE= '|' >
<PARAM NAME = 'DataURL1 VALUE='search.txt'>
<PARAM NAME = 'UseHeader1 VALUE=true>
<PARAM NME = 'CaseSensitive' VALUE=false>
<PARAM NAME = 'CharSet' VALUE='windows-1251'>
4.8. Таблицы и простые базы данных
261
</OBJECT>
<! Интерфейс поисковой системы >
<! Поле ввода поискового образа >
TYPE = ' " NAME = " W O R D " VALUE = "" SIZE = 20>
<! Кнопка запуска процедуры поиска >
<BUTTON onclick = "f indkeyword() ">noHCK</BUTTON><BR>
<! Здесь будет выводиться результат поиска>
<В ID = 'rezult'></B>
<! Таблица ключевых слов >
<TABLE STYLE = visibility: hidden>
<TR>
<TD> <INPUT NAME = 'fl' DATASRC = #fnd2 DATAFLD = 'pl'x/TD>
</TR>
</TABLE>
<! Таблица ссылок >
<TABLE ID = 'mytab' DATASRC = #fndl WIDTH = 350 ALIGN = LEFT
STYLE = vi sibili ty:hidden >
<TR>
<TD><SPAN DATAFLD = ' p2 ' DATAFORMATAS = ' html ' ></SPAN></TD>
</TR>
</TABLE>
<SCRIPT>
var obj = "<OBJECT ID = fndl "
obj+="CLASSID='CLSID:333C7BC4-460F-llD0-BC04-0080C7055A83'>"
obj+="<PARAM NAME='FieldDelim' VALUE='r>"
obj+="<PARAM NAME='DataURL' VALUE='search.txt'>"
obj+="<PARAM NAME='UseHeader' VALUE=true>"
obj+="<PARAM NAME='CaseSensitive' VALUE=false>"
function findkeywordO { // поиск по введенному образцу
if (IWORD.value) return // если поисковый образ не введен
var xfIt r = "", у, cpar
/* переход к 1-й записи таблицы
с ключевыми словами */
while i // пока не достигли конца таблицы
у = fl. value.toLowerCaseO
if (у.indexOf(WORD.value.toLowerCase ()) >=0) { // проверка на вхождение
xfltr = fl.value /* значение для
формирования
условия фильтра */
break
I
/* переход к следующей записи
таблицы с ключевыми словами */
}
if (Ixfltr)
erText = "Ничего не найдено"
else
document.all.rezult.innerText = "
/* Формируем условие фильтра: */
cpar = obj + "<param name = ' FiIterColumn' value = 'pl' >
cpar+= "<paramname = ' FiIterCriterion' value = ' = '>"
cpar+= "<param name = 'FiIterValue' value = '" + xfltr +
продолжение тУ
262.
.Глава 4. Примеры сценариев
Листинг 4.23 (продолжение)
HTML = cpar /* устанавливаем фильтр
в таблице ссылок */
ity = "visible" // делаем таблицу ссылок видимой
</SCRIPT>
</HTML>
Функция поиска findkeywordQсканирует записи базыданных, проверяя для каждой
из них, содержит ли поле ключевых слов р! введенный пользователем поисковый
образ. Если результат проверки положителен, то переменной xfl.tr присваивается
значение поля ссылок р2. Это значение затем используется для формирования
условия фильтра, а сканирование базы данных прекращается. Установка филь-
тра производится с помощью присвоения нового значения свойству outerHTML эле-
мента управления STD для таблицы ссылок. После установки фильтра мы дела-
ем таблицу ссылок видимой. Эта таблица будет содержать лишь одну ссылку.
Итак, мы рассмотрели простой вариант поисковой системы. Его можно усовер-
шенствовать по нескольким направлениям. Мы рассмотрим далее лишь одно из
них. А именно, давайте сделаем так, чтобы система поиска сканировала все запи-
си базы данных и выводила в качестве результата все ссылки, соответствующие
поисковому образу, а не только одну первую найденную. Для осуществления это-
го замысла нам потребуется один элемент управления STD и одна невидимая таб-
лица с двумя полями, и р2. Фильтрация данных нам не понадобится. Вместо
нее мы просто будем формировать строку, содержащую найденные ссылки, кото-
рую затем присвоим свойству ir :rH TML объекта result. При этом код даже упро-
щается по сравнению с исходным (листинг 4.24).
Листинг 4.24. Код усовершенствованной поисковой системы
<! Элемент управления >
<OBJECT ID = fndl1
CLASSID = 'CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>
<PARAM МАЙЕ = 'FieldDelim1 VALUE='|'>
<PARAM NAME = 'DataURL1 VALU E = 'search . txt' >
<PARAM NAME = 'UseHeader' VALUE=t
<PARAM NAME = CaseSensitive' VALUE=false>
</OBJECT>
<! Интерфейс поисковой системы >
<! Поле ввода поискового образа >
TYPE = "text" NAME = "WORD" VALUE = SIZE = 20>
<! Кнопка запуска процедуры поиска >
<BUTTON onclick = findkeyword()'
<! Здесь будет выводиться результат поиска>
<В ID = 'rezult'></B>
<! Таблица поисковой базы данных >
<TABLE STYLE = visibi 1ity:hidden>
<TR>
T NAME = ' ' DATASRC = #fndl DATAFLD = 'pi' ></TD>
<TD><INPUT NAME = DATASRC = #fndl DATAFLD = p2 '
DATAFORMATAS = "html"></TD>
</TR>
</TABLE>
4.8. Таблицы и простые базы данных
263
<SCRIPT>
function findkeyword() { // поиск по введенному образцу,
if (IWORD.value) return // если поисковый образ не введен
var xrezult = "", у
// переход 1-й записи таблицы
while (!fndl .recordset.eof){ // пока не достигли конца таблицы
у = fl .value.toLowerCaseO
if (у.indexOf(WORD.value.toLowerCase ( )>=0){ // проверка на вхождение
xrezult + = f2.value +"<BR>" // формируем строку ссылок
x
i
II переход к следующей записи таблицы
} if (Ixrezult
erHTML = "Ничего не найдено"
else
document.all. rezult. innerHTML = xrezult
</SCRIPT>
</HTML>
4.8.8. Вставка HTML-документа в таблицу
Документ из внешнего HTML-файла можно вставить в таблицу, находящуюся
в текущем документе и управляемую элементом STD. Эта возможность основана
на том, что HTML-файл является обычным текстовым файлом. Поскольку в пер-
вой строке этого файла указывается тег <НТМ1_>, мы можем использовать его в ка-
честве имени поля базы данных. Признаюсь, эта простая мысль не сразу пришла
мне в голову. Видимо, сказался стереотип образования имен переменных.
Таким образом, мы рассматриваем вставляемый HTML-файл как базу данных
с единственным полем (столбцом). Основное требование к содержимому HTML-
файла: любой контейнерный тег должен полностью размещаться в одной строке
этого файла.
Рассмотрим сначала пример вставки в таблицу одного HTML-документа:
< HTML ">
<! Элемент управления >
<OBJECT ID = 'mydbcontrol'
CLASSID = 'CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83I>
<PARAM NAME = FieldDelim' VALUE='|'>
<PARAM NAME = 'DataURL' VALUE='mydocum.htm'>
<PARAM NAME = 'UseHeader' VALUE=true>
</OBJECT>
<TABLE DATASRC = #mydbcontrol WIDTH = 350>
<TR>
<TD><SPAN DATAFLD = '<HTML>' DATAFORMATAS = ' html ' ></ SPAN></TD>
</TR>
<TABLE>
</HTML>
Здесь предполагается, что в документе тег <HTML> записан прописными буквами.
Если же он записан строчными буквами, то это должно быть отражено и в значе-
нии атрибута D A T A F L D = "<html>". Очевидно, вы можете задать атрибуты оформле-
ния таблицы (рамок, выравнивания, цвета и т. п.), а также стилевые параметры
позиционирования.
264____________________________________________________Глава 4. Примеры сценариев
Теперь рассмотрим случай вставки нескольких HTML-документов. В листин-
ге 4.25 приведен сценарий, который это выполняет.
Листинг4.25. Код сценария вставки нескольких HTML-документов
•<SCRIPT>
/* Вставка HTML-документов */
/* Массив имен (URL) вставляемых HTML-файлов */
var aurl = new ArrayO
aurl[0] = "htmll.htm"
aurl[l] = "html2.htm"
var tabwidth=800; /* ширина таблицы, в которой будут показаны
HTML-документы */
/* Массив частей троки, определяющей элемент управления STD */
var xobject = new ArrayO
xobject[0] = OBJE Cj'TIDidob= //id
xobject[l] = '" CLASSID="CLSID:3
xob]'ect[l] + = '<PARAMNAME = "FieldDelim" VALUE = "|" >r
xobjectfl] += '<PARAMNAME = "UseHeader" VALUE = tme>'
xobject[l] += '<PARAMNAME = "CharSet" VALUE = "windows-1251">'
xobject [1] += '<PARAMNAME = "DataURL" VALUE
xobject[2] = "'></OBJECT>'
/* Строка тегов таблицы */
var xtab = new ArrayO
xtab[0] = '<TABLE WIDTH=' + tabwidth + ' DATASRC = #'
xtab[l] = 'XTRXTDXSPANDATAFLD="<ritml>" DATAFORMATAS= " html" > '
xtab[l] += '</SPAN></TD></TRx/TABLE>'
var sobj = "";
for (i =0; i < aurl.length; i++) {
sobj += xobject[0] + i + xobjectll] + aurl[i] + xobject[2] + xtab[0] +
1idobj ' + i + xtabfl]
}
document.write(sobj)
</SCRIPT>
Для пробы возьмем следующие два простых HTML-документа:
Файлhtmll.htm:
<HTML>
<НЗ>Документ 1</НЗ>
<image src="folder.gif">3To - просто картинка
<a hn Описание баз данных в текстовых файлах</а>
<button onclick="alert('Привет!! о - кнопка
</HTML>
Файл html2.htm:
<HTML>
<НЗ>Документ 2</НЗ>
<1>Это - содержание документа из второго файла.<1>
В нем только этот текст
</HTML>
Тог да HTML-документ, содержащий лишь приведенный выше сценарий, будет
выглядеть в окне браузера, как показано на рис. 4.33. Диалоговое окно с привет-
ствием появляется при щелчке на кнопке Щелкни.
Вы можете разместить в основном документе элементы управления (ссылки, кноп-
ки), с помощью которых в одну и ту же таблицу будут загружаться различные
4.8. Таблицы и простые базы данных
265
-if *J> Ш - • "': Ссылки »; :А йРбс;
Документ 1
О это - просто картинка
Опксанпе„ баз данных в текстовы йi
-in......,
Документ 2
Это - содержание документа из второго файла.
В нем только этот текст
Рис. 4.33. Результат вставки HTML-документов втаблицы
HTML-документы. Для этого необходимо соответствующим образом изменять
значение параметра DataURL
Рассмотренный выше способ является еще одним средством (помимо плавающих
фреймов <IFRAME>) вставки HTML-документов, осуществляемой на стороне кли-
ента, то есть браузером пользователя, а не сервером.
ВНИМАНИЕ
В отличие от плавающихфреймов, этот способ не столь универсален. При его использова-
нии следуетучитывать, в каком регистре записан тег <HTML> во вставляемом документе,
атакже следить затем, чтобы контейнерные теги (а их подавляющее большинство в HTML)
записывались целиком в одной строке (без переносов).
4.8.9. Обработка табличных данных
Нередко в базах данных хранят некоторые первичные данные, а отображают на
экране (или используют как-то иначе) результаты их обработки. Обычно обра-
ботке подвергаются числовые данные. Например, требуется вычислить сумму всех
значений столбца таблицы или найти максимальное или минимальное значение.
Бывают и более сложные задачи. В любом случае для их решения удобно, прежде
всего, считать обрабатываемые данные из таблицы в массивы, для которых
в JavaScript предусмотрены многочисленные методы обработки. Дополнительно
266.
.Глава 4. Примеры сценариев
к этим методам можно создать свои специальные функции обработки. Некото-
рые из них были рассмотрены в подразделе 1.7.2.
Рассмотрим задачу считывания значений столбца таблицы в массив. Если табли-
ца с данными полностью создана с помощью тегов HTML (без использования
элемента управления STD), то задача считывания проста. В этом случае требует-
ся с помощью оператора цикла присвоить элементам массива значения ячеек таб-
лицы из заданного столбца. Пусть, например, элемент <ТАВ1_Е> имеет ID = "mytab",
и требуется считать в массив все значения столбца с индексом п. Далее предполо-
жим, что содержимым ячеек этого столбца являются числа, и мы собираемся про-
изводить числовые операции над элементами массива. Поскольку содержимое
ячеек таблицы имеет строковый тип, постольку при считывании сразу же вос-
пользуемся функцией parseFloatQ или parselntQ. Ниже приведен сценарий, реша-
ющий поставленную задачу:
myarray = newArrayO
for(i = 0; i< document. all .mytab . rows . length; i + + ){
myarray[i] = parseFloat
}
Здесь мы использовали для преобразования в числовой тип функцию parseFloatQ,
чтобы сохранить дробную часть числа. Когда массив чисел создан, можно приме-
нить к нему статистическую обработку с помощью, например, функции statisticQ,
описанной в подразделе 1.7.2.
Теперь рассмотрим задачу считывания в массив значений столбца таблицы, уп-
равляемой элементом STD. Как известно, источником данных для такой таблицы
является текстовый файл. В листинге 4.26 приводится пример HTML-документа
с элементом управления STD, таблицей и сценарием, производящим чтение дан-
ных из столбца с одновременным переводом их в числовой тип, а также вычисля-
ющим сумму всех значений.
Листинг4.26. Пример HTML-документа с элементом управления STD
<HTML>
<! Элемент управления >
<OBJECT ID = 'mydatacontrol '
CLASSID = 'CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>
<PARAM NAME = ' Fie ld De l i m ' VALUE='|'>
<PARAM NAME = 'DataURL' VALU E = 'mydata .txt' >
<PARAM NAME = 'UseHeader' VALUE=true>
</OBJECT>
<! Таблица >
<TABLE ID="mytab">
<TR>
<INPUT NA ME = 'zp' DATASRC = #mydatacontrol
DATAFLD = 'Зарплата' onchange = "zpchangeO">
</TD>
<! Здесь может быть определение других столбцов таблицы>
</TR>
</TABLE>
<Р>
Сумма выплат <В ID = "sum"></B>
<SCRIPT>
4.8. Таблицы и простые базы данных
267
var azp = new Array()
// вызов функции
function zpchange Q {
v a r 5 = 0, 1 =
// переход к 1-й записи
while(! mydatacontrol.recordset.eof){
azp[i] = parseFloat(document.all.mytab.zp.value)
S+= azp[i]
// переход к следующей записи
i+ +
}
ument. all. sum. i nnerText = S // вывод значения S
}
</SCRIPT>
</HTML>
Здесь предполагается, что источник данных находится в файле mydata.txt. В этом
файле указано поле Зарплата, а поля разделены вертикальной чертой. Чтение дан-
ных поля Зарплата и вычисление суммы всех его значений происходит при загруз-
ке документа в браузер, а также при каждом изменении в этом поле. Результат
вычисления суммы S вставляется как текст в заранее подготовленный для этой
цели элемент <В ID = "sum">.
4.8.10. Защита веб-страницс помощью пароля
Если мы хотим защитить сайт или его отдельную страницу с помощью пароля, то
главное - обеспечить сохранность пароля, а также адреса защищаемой страницы.
Очевидно, они не должны фигурировать в HTML-документе и сценарии в явном
виде. Достаточно простой и надежный способ решения этой задачи - совпадение
пароля с именем (без расширения) какого-нибудь файла, расположенного на сер-
вере. В этом случае к слову, введенному пользователем, следует добавить расши-
рение имени файла и проверить, существует ли он на сервере. Если файл суще-
ствует, то введенный пользователем пароль верен, и можно открыть доступ
к документу. В противном случае будет отказано в доступе. Обратите внимание,
что имя файла в явном виде не упоминается. Проверку существования файла
можно выполнить с помощью метода FileExistsQ объекта файловой системы (File
SystemObject), который рассмотрен в главе 5. Однако использование этого объ-
екта в сценарии для браузера сопряжено с появлением неприятного сообщения
о том, что страница содержит элемент ActiveX, который может представлять опас-
ность. При этом пользователю предлагается принять решение о выполнении про-
граммы. Если он откажется от ее выполнения, то не получит доступа к защищае-
мой странице.
Другой вариант решения задачи защиты с помощью пароля тоже основан на
совпадении пароля с именем файла. Однако в этом варианте используется не объ-
ект файловой системы, а безопасный элемент ActiveX управления текстовыми
базами данных. Файл с именем, совпадающим с паролем, является текстовым
файлом, содержащим базу данных с двумя столбцами (полями) и двумя строка-
ми (записями). В первой строке записаны идентификаторы полей базы данных,
между которыми указан символ-разделитель. Во второй строке через такой же
разделитель тоже записаны всего лишь два слова - имя этого текстового файла
268.
.Глава 4. Примеры сценариев
без расширения и имя HTML-файла или URL-адрес страницы перехода. Пусть
поля базы данных имеют идентификаторы password и myspecurl Тогда содержи-
мое текстового файла с именем, например, myspecfile.txt должно иметь следую-
щий вид:
password]myspecurl
myspecfile|http://www.myweb.ru/mypage.htm
Здесь во второй строке во втором ее поле указан гипотетический URL-адрес стра-
ницы, на которую должен перейти браузер, если пользователь введет правиль-
ный пароль.
В следующем примере в HTML-документе размещается текстовое поле ввода
и кнопка, щелчок на которой обрабатывается сценарием (листинг 4.27). Сцена-
рий создает элемент управления и невидимую таблицу, загружая в нее базу дан-
ных. В этой таблице всего две ячейки: одна с паролем, а другая с адресом перехо-
да. Далее слово, введенное пользователем, сравнивается со словом в таблице. Если
они совпадают, то происходит переход на страницу с указанным адресом. В про-
тивном случае выдается сообщение о том, что введенный пароль неверен.
Листинг 4.27. Сценарий защиты HTML-документа с помощью пароля
<НЗ>Только для членов клуба</НЗ>
Введите пароль:
<INPUT ID = "pwl" TYPE="text" VALUE="">
<BUTTON ID = "pwenter">BBOfl</BUTTON>
<B ID = "dbelem"></B>
<SCRIPT>
function pwenter.onclick() {
if // если поле ввода пароля пусто
return
dbstr = '<OBJECT ID = "mydbcontrol" ' +
'CLASSID= "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">' +
'<PARAMNAME= "DataURL" VALUE = '" + document. all.pwl .value+ '.txt"> ' +
'<PARAMNAME="FieldDelim" VALUE="|">' +
'<PARAMNAME = "UseHeader" VALUE = +
'<TABLE STYLE = "visibility: hidden"><TR><TD> ' +
1<INPUT ID = "pw2" TYPE = "text" DATASRC = "#mydbcontrol" ' +
'DATAFLD= "password"></TD><TD>' +
ID = ' jrl" TYPE = "text" DATASRC = "tfmydbcontrol" ' +
'DATAFLD = "myspecurl"x/TD></TRx/TABLE>'
/* вставляем элементы БД
в документ */
setTimeout ("validationO" , 1000) // задержка
}
validationO { // проверка правильности и переход,
if (document.all.pwl.value == document.all.pw2.value){ /* если пароль
верен */
document.all.pwl.value = ""
// переход,
}else // если пароль не верен
alert("Пароль не верен!")
</SCRIPT>
</HTML>
4.8. Таблицы и простые базы данных
269
Здесь использована временная задержка в 1 с, необходимая для того, чтобы брау-
зер успел сделать вставку элементов с помощью свойства innerHTML до проверки
пароля. Обратите внимание, что нигде в документе значение пароля, а также ад-
рес страницы перехода не упоминаются в явном виде.
При желании рассмотренный выше сценарий можно усовершенствовать. Так, если
введенный пользователем пароль оказался верным, то его можно сохранить
в cookie-файле, с тем чтобы при следующем посещении страницы пользователю
не пришлось снова его вводить. Об этом уже говорилось в разделе 2.9. Например,
в загруженном в браузер документе имеется ссылка на защищенную паролем стра-
ницу. При щелчке на этой ссылке сценарий считывает из cookie-файла значение
специальной записи, содержащей пароль. Далее в документ загружается соответ-
ствующий текстовый файл базы данных с паролем и производится проверка пра-
вильности пароля из cookie-записи. Если эта проверка оказалась успешной, то
происходит переход по ссылке, указанной в базе данных (ссылка в документе
не должна содержать адрес перехода в явном виде). В противном случае в те-
кущем документе появляется поле и кнопка для ввода пароля с клавиатуры.
Введенное пользователем слово сравнивается с паролем из базы данных. Если
они совпали, тю нужная страница загружается в браузер, а пароль сохраняется
в cookie-записи. В противном случае выдается сообщение, что введенный па-
роль неверен.
В листинге 4.28 приведен пример HTML-документа со сценарием, который пыта-
ется взять пароль из cookie-записи с именем myspecrecord.
Листинг 4.28. Пример i HTML-документа со сценарием, который пытается взять пароль
<НТМ1>
<НЗ>Только для членов клуба</НЗ>
<а href="#" ID ="myref"onclick="pwvalid() ">Щелкни</а>
<B ID = "dbelem"></B>
<SCRIPT>
var pw /* глобальная переменная для полученного
из cookie или введенного пользователем пароля*/
function pwvalid(){ // проверка пароля
pw = readCookie("myspecrecord") // читаем cookie-запись
if (!pw)^ /* нет нужной записи
в cookie-файле */
pw = pwinputO /* делаем поле ввода и кнопку,
выывающую pwenterQ */
/* загружаем БД сравниваем и
что-то делаем */
else
}
function pwinput(){ // поле ввода и кнопка
var inpstr = 'Введите пароль: <INPUT ID = "pwl" TYPE = "text" VALUE = '
'<BUTTON onclick = "pw = d ument.all.pwl.value; pwenter() ">Ввод
</BUTTON>'
erHTHL = inpstr // вставляем поле ввода и кнопку
}
function pwenter(){
продолжение &
270
Глава 4. Примеры сценариев
Листинг 4.28 (продолжение)
if (!pw) // если нет пароля
return
dbstr = <OBJECT ID = "mydbcontrol" CLAS5ID =
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">' + ,
<PARAMNAME = "DataURL" VALUE = "' + pw + '.txt"> ' +
'<PARAMNAME="FieldOelim" VALUE="|">' +
<PARAM NAME = "UseHeader" VALUE = true></OBJECT><TABLE STYLE =
"visibility:hidden"><TR><TD>' +
'<INPUT ID = "pw2" TYPE = "text" DATASRC = "tfmydbcontrol" DATAFLD =
"password"></TD><TD>' +
NPUT ID = "xu rl" TYPE = "text" DATASRC = "tfmydbcontrol" DATAFLD =
"myspecurl"></TD></TR></TABLE>'
// вставляем элементы в документ
// задержка
}
function validationO { // проверка правильности
// и переход
if (pw == docume // если пароль верен,
// переход
var d= new Date()
var d2=d.getTime()+(365*24*60*60*1000)
// срок хранения cookie-записи
, pw, d) // запись пароля в cookie-файл,
}else // если пароль не верен
alert("Пароль не верен!")
!!
function г ) { // чтение cookie-данных записи
var xname = name +
var xlen = xname.length
var clen = document.cookie.length
var i = 0
while(i < clen){
var = i xlen
if (document. cookie . substring(i , j) == xname)
return getCookieVal(j)
i = document.cookie.indexOf(" ",!) + 1
if (i == 0) break
return null
function getCookieVal(n){ /* вспомогательная функция,
вызываемая из readCookieO */
var endstr = document.cookie.iг , n)
if (endstr == -1)
endstr = document.cookie.length
return unescape(document.cookie.substring(n, endstr))
}
function writeCookie(nam , value, expires, path, domain, secure) {
/* запись cookie */
document.cookie =
name + "=" +escape(value) +
) = " + expi ing() : ' +
((path) ? "; path=" + path : "") +
4.9. Взаимодействие с Flash-мультфильмами.
271
) ? " ain=" + domain : "") +
((secure) ? "; secure" : "
</SCRIPT>
</HTML>
Функция validation() в этом примере по сравнению с предыдущим несколько мо-
дифицирована: помимо проверки правильности пароля и перехода по заданному
адресу она производит запись (перезапись) cookie. Срок хранения здесь устанав-
ливается равным 1 году с момента текущей системной даты. Функции чтения
readCookieQ и записи writeC () данных в cookie-файл рассматривались в разде-
ле 2.9. Далее в сценарии используется глобальная переменная pw для хранения
пароля, либо полученного из cookie-записи, либо введенного пользователем. Эта
переменная используется в функциях pwputQ pwenter() и v a lid a t io nQ. Я допус-
каю, что приведенный выше код не очень изящный (многовато функций), но он
работает, поэтому я и решил не заниматься дальнейшими усовершенствова-
ниями. Однако я рекомендую вам попытаться улучшить сценарий.
Тот факт, что имя файла (без расширения) базы данных и значение ее поля password
совпадают со значением пароля, существенно усиливает защиту. Действительно, для
доступа к защищенному документу необходимо не только существование на сервере
файла с именем, совпадающим с паролем, но и чтобы этот файл со держал-данные в
определенной структуре. А именно он должен содержать свое имя-пароль. Очевид-
но, далеко не всякий текстовый файл обладает таким свойством.
С точки зрения идеологии парольной защиты веб-страниц сама собой напраши-
вается следующая модернизация рассмотренных выше сценариев. Пусть пароль
совпадает с именем файла текстовой базы данных, но сама база содержит несколько
записей. В первом столбце базы данных записан не пароль, а условные имена
пользователей (Login). На загруженной в браузер веб-странице пользователь вво-
дит свое имя (login) и пароль. Далее в текущий документ загружается невидимая
база данных из текстового файла с именем, совпадающим с введенным паролем.
В этой базе производится поиск записи, соответствующей имени пользователя.
В случае успеха поиска в браузер загружается документ с адресом, указанным во
втором поле. Таким образом на сайте можно хранить, например, индивидуальные
сообщения для пользователей вашего клуба.
Заметим, что текстовый файл с базой данных паролей создается и поддерживает-
ся автором (владельцем) сайта. Он размещается на сервере вместе с другими фай-
лами сайта. Пароль передается посетителям по электронной почте или телефону.
4.9. Взаимодействие с Flash-мультфильмами
Приложения, созданные в системе Macromedia Flash версий 5.0 и 6.0 (MX), могут
взаимодействовать со сценариями на JavaScript. А именно они могут получать
данные из сценария, написанного на языке JavaScript, и использовать их некото-
рым образом с помощью своего сценария, написанного на языке ActionScript.
С другой стороны, сценарии на ActionScript могут использовать сценарии (функ-
ции) на JavaScript. Чтобы организовать такое взаимодействие, необходимо преж-
272
Глава 4. Примеры сценариев
де всего вставить приложение Flash (мультфильм, ролик, клип) в HTML-доку-
мент. Это делается с помощью контейнерного тега <OBJECT>, инициирующего
Flash-проигрыватель и загружающего в него мультфильм. В IE5+ этот проигры-
ватель уже встроен.
4.9.1. Передача данных из JavaScript в ActionScript
В качестве примера передачи данных из JavaScript в ActionScipt рассмотрим за-
дачу отображения текста в окне Flash-мультфильма. Используя большие изобра-
зительные возможности Flash, можно создать окно произвольной формы, а не толь-
ко прямоугольное, как в HTML. В нашем примере HTML-документ содержит
Flash-проигрыватель с загруженным в него мультфильмом, поле ввода данных
и сценарий, который передает во Flash-мультфильм содержимое поле ввода. При
этом содержимое поля ввода данных (элемента <INPUT>) отображается в окне
Flash-мультфильма (рис. 4.34). В листинге 4.29 приведен соответствующий
HTML-код.
щшш
0!: j s
Привет Flash-
мультфильму от
JavaScript
Введите текств поле и он bi ся в Flash-мультфильме •
етFlash-мультфильму от JavaScript
т
Рис. 4.34. Текст в поле ввода (<INPUT>) оттображается в окне Flash-мультфильма
Листинг 4.29. Пример передачи данных из JavaScript в ActionScipt
<HTML>
<HEAD>
<meta http-equiv = Content-Type content = "text/html; charset =
windows-1251">
4.9. Взаимодействие с Flash-мультфильмами__________________________________273
<ТтЕ>Передача из JavaScript в Flash</TITLE>
</HEAD>
<BODY BGCOLOR = "#e0e0e0">
<! Flash-проигрыватель >
<OBJECT CLASSID = "clsid: D27CDB6E-AE6D-llcf-96B8-444553540000"
CODEBASE =
"http://download.fflacromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version = 6,0,0,0"
WIDTH = "287" HEIGHT = "261" id = "myflash" ALIGN="">
<PARAM NAME = movie VALUE = "myflash.swf ">
<PARAM NAME = quality VALUE=high>
<PARAM NAME = wmode VALUE = transparent
<PARAM NAME = bgcolor VALUE=#FFFFFF>
<EMBED src = "myflash.swf" quality=high wmode=transparent bgcolor =
#FFFFFF WIDTH = "287" HEIGHT = "261" NAME = "myflash" ALIGN = ""
TYPE = "application/x-shockwave-flash"
PLUGINSPAGE = "http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
<P>
Введите текст в поле, и он отобразится во Р 1а5п-муль фильме<ВК>
<INPUT TYPE = "text" NAME = "inputtext" SIZE = 40 onchange = getit()>
</BODY>
<SCRIPT>
function getit(){
document.myflash.SeW ariable("inFlash", inputtext.value)
}
</SCRIPT>
</HTML>
Здесь с помощью тега <OBJECT> в браузер загружается элемент управления ActiveX,
соответствующий Flash-проигрывателю версии 6.0 (MX), хотя для воспроизведе-
ния нашего мультфильма достаточно и версии 5.0. В этот проигрыватель, в свою
очередь, загружается мультфильм из файла myflash.swf. Атрибут CODEBASE тега
<OBJECT> содержит в качестве значения URL-адрес проигрывателя, если он не
встроен в браузер пользователя. Заметим, что в IE5+ Flash-проигрыватель уже
встроен. Вложенный контейнерный тег <EMBED> используется только ради брау-
зера Netscape Navigator. Далее в HTML-документе с помощью тега <INPUT> зада-
ется поле ввода данных. При изменении значения этого поля (событие onchange)
вызывается функция getit(), определенная в сценарии JavaScript. В этой функции
с помощью метода SetVariable() переменной inFlash присваивается значение поля
ввода данных inputtext.value. Этого вполне достаточно, чтобы передать значение
поля ввода данных в мультфильм. Метод SetVariable() является методом объекта
Flash-проигрывателя, который в данном примере имеет ID = "myflash". Имя пере-
менной inFlash (произвольное) задается как один из параметров Flash-мультфиль-
ма. Среди прочих параметров мультфильма отметим еще <PARAM NAME = wmode
VALUE = transparent:»., который задает прозрачность фона занимаемой им прямо-
угольной области. Это простой и весьма эффективный способ согласования со-
держимого Flash-мультфильма с общим дизайном веб-страницы.
Теперь рассмотрим, как сделать Flash-мультфильм, воспринимающий и отобра-
жающий данные из HTML-документас помощью сценария, написанного наязыке
274
Глава 4. Примеры сценариев
JavaScript. В пакете Macromedia Flash MX создадим простой мультфильм, содер-
жащий два слоя. В первом, фоновом слое нарисуем окно. Это может быть любая
фигура. В нашем примере я использовал инструмент Овал, чтобы нарисовать эл-
липс. Затем с помощью инструмента Subselecti on (белая стрелка) я преобразовал
эллипс в некую причудливую форму, напоминающую облако. Болеетого,язалил
ее радиальным градиентом. Далее необходимо создать второй слой, расположен-
ный над первым. В этом слое в пределах «облака», с помощью инструмента Text
создается текстовое поле, параметры которого определяются в палитре Properties
(Свойства). Эта палитра во Flash MX еще называется Инспектором свойств. Сна-
чала зададим тип текстового поля - Input Text (Ввод текста). Затем в поле Var (Пе-
ременная)введемимяпеременной,принимающейтекст,которыйдолженотобра-
жаться в текстовом поле. В рассматриваемом примерея выбрал имя переменной
nFlash. Это важный момент, поскольку именно эта переменная указывается в сце-
нарии JavaScript как первый параметр метода SetVariableQ. Наконец, с помощью
других органов управления палитры Properties задаем дополнительные парамет-
ры текстового поля (рис. 4.35). В частности, выбираем из раскрывающегося спис-
ка имя шрифта, режим отображения текста Multiline (Многострочный) и др.
щи
II'I* и i ii 'i 1*1* i 11 I" I * * Yi ii i 1*1* ^A*, IM'I'I -• " • | Lil•••• ' I ' I II 1 1
JjinpulTw "".....Wii [ T imesNtwRomanCjr J ij i [sT~ -
„ W Ш
Л j£A <A ■
Рис. 4.35. Создание Flash-мультфильма, отображающего текст из HTML-документа с помощью
сценария на JavaScript. Внизу - палитра Properties
^ V
4.9. Взаимодействие с Flash-мультфильмами.
275
Исходный файл созданного мультфильма сохраним под именем myflash.fla. Это
необходимо, если нам потребуется в дальнейшем модифицировать его. Для вставки
мультфильма в HTML-документ необходимо создать файл в формате SWF, то есть
файл с расширением .swf. Этой цели служит так называемая операция публика-
ции мультфильма Publish, которая выбирается из меню File (Файл) в главном окне
пакета Flash. Параметры публикации можно задать по команде File У Publish Settings
(Файл Настройка публикации). В соответствующем диалоговом окне можно задать
имя swf-файла, версию Flash-проигрывателя и другие параметры. Вы можете так-
же потребовать создание HTML-файла, который содержит фрагмент HTML-кода
(элемент <OBJECT>), загружающий Flash-проигрыватель и мультфильм со всеми
параметрами, указанными в диалоговом окне настроек. Этот фрагмент можно
просто скопировать в создаваемый HTML-документ вашего проекта.
4.9.2. Вызов сценария JavaScript из сценария
ActionScript
Язык ActionS cript для создания сценариев Flash-мультфильмов достаточно
мощное средство программирования, поэтому он может обойтись и без JavaScript.
Тем не менее существует возможность вызывать фрагменты JavaScript-кода из
сценария, написанного на ActionScript. Это удобно в тех случаях, когда у вас уже
созданы программы наJavaScript. Например, зачем писать код функции представ-
ления чисел словами на ActionScript, если он уже написан (см. раздел 4.4) на
JavaScript?
Вызов функции JavaScript из сценария ActionScript осуществляется следующим
образом:
getURL("javascript: имя_функции(параметры)")
В нашем примере Flash-мультфильм содержит три кнопки, щелчки на которых
обрабатываются функциями, написанными наJavaScript. Если уж быть точным,
то щелчок на кнопке в мультфильме обрабатывается сценарием на ActionScript,
который вызывает функцию на JavaScript.
HTML-документ содержит тег<OBJECT>, загружающий Flash-проигрыватель вме-
сте с мультфильмом, и сценарий, в котором определены три функции: открытия
нового окна, вывода диалогового окна с сообщением и закрытия окна. В листин-
ге 4.30 приведен соответствующий код.
Листинг4.30. Вызов сценария JavaScript из сценария ActionScript
<HTML>
<HEAD>
<meta http-equiv = Content-Type content = "text/html;
charset = windows-1251">
<Т1Т1Е>Вызов JavaScript из Act ionScr ipt</TITLE>
</HEAD>
<BODY BGCOLOR = "#e0e0eO">
<! Flash-проигрыватель >
<OBJECT CLASSID = "clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"
CODEBASE = "http //download. macromedia. c om/pub/shoekwave/cabs/flash/
swflash.cab#version = 6,6,0,0" WIDTH = "400" HEIGHT = "100" id =
"myflash" ALIGN= ""> продолжение
276.
.Глава 4. Примеры сценариев
Листинг 4.30 (продолжение)
<PARAM МАЙЕ = movie VALUE = "myflash.swf">
<PARAM NAME = quality VALUE=high>
<PARAM NAME = wmode VALUE = transparent^
<PARAM NAME = bgcolor VALUE=#FFFFFF>
<EMBED src = "myflash.swf" quality=high wmode=transparent bgcolor =
#FFFFFF WIDTH = "287" HEIGHT = "261" NAME = "myflash" ALIGN = '
TYPE = "application/x-shockwave-flash" PLUGINSPAGE =
"http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
</BODY>
<SCRIPT>
var mywindow
function newwindow(myURL, mywidth, myheight){ /* открытие нового окна */
mywindow = wi ndow.open(myURL,'saple' , "toolbar=no, bar=no, l
, resizable=no, width=" + mywidth +
, height=" + myheight + ", top=0, left=0")
I
function message(message){ // вывод сообщения
alert(message)
I
function closewindowO{ // закрытие окна
mywindow
mywindow.close()
}
</SCRIPT>
</HTML>
Bo Flash-редакторе создадим простой мультфильм, содержащий три кнопки. Для
этого можно воспользоваться встроенной библиотекой, содержащей множество
уже готовых элементов управления. Каждой кнопке назначим следующие дей-
ствия (сценарии):
Кнопка 1 (открытие окнаизагрузкавнегофайлаtemp.htm):
on(release){
getURL("javascript: newwindow('temp.htm' , 550, 250)")
}
Кнопка 2 (вывод сообщения):
on(release){
getURL("javascript: message('Привет из Flash')")
}
Кнопка З (закрытие окна):
on(release){
getURL("javascript: closewindowO")
I
Исходный файл созданного мультфильма сохраним под именем myflash,fla. Это
необходимо, если нам потребуется в дальнейшем модифицировать его. Для вставки
мультфильма в HTML-документ необходимо создать файл в формате SWF, то есть
файл myf lash.swf. Этой цели служит операция публикации мультфильма Publish,
которая выбирается из меню File (Файл) в главном окне пакета Flash. Параметры
публикации можно задать по команде File > Publish Settings (Файл > Настройка пуб-
ликации). В соответствующем диалоговом окне можно задать имя swf-файла, вер-
сию Flash-проигрывателя и другие параметры.
Глава 5. Работа с файловой
системой и реестром Windows
Операции с дисками, папками и файлами с помощью программ являются очень
важными для программистов, поскольку серьезные проекты невозможны без вза-
имодействия с файловой системой (создание, перемещение, удаление папок и фай-
лов). В JavaScript эти операции имеют некоторые особенности по сравнению
с другими языками.
Доступ к файловой системе с помощью языков на основе сценариев, таких как
JavaScript и VBScript, в Windows обеспечивается через объект FileSystemObject
(FSO - объект файловой системы). Программы на JavaScript и VBScript, исполь-
зующие этот объект, могут интерпретироваться браузером IE5+, а также систе-
мой Windows Scripting Host (WSH), встроенной в Windows 98 SE и более позд-
ние версии (ее также называют Windows Based Script Host).
Операциям с файловой системой, выполняемым браузером пользователя с по-
мощью сценариев, даже при установленном самом низком уровне безопасности
будут предшествовать предупреждающие сообщения о возможных неприятностях.
Предупреждения будут появляться и при работе на локальном .компьютере без
использования сети. Это сделано для того, чтобы недобросовестные посетители
Интернета не могли нанести вред компьютеру пользователя. Именно поэтому
рекомендуется использовать FSO не на клиентском компьютере, а на сервере (тех-
нология Active Server Pages, ASP). WSH, в отличие от браузера, позволяет сво-
бодно использовать FSO на локальном компьютере: вы просто создаете програм-
му на JavaScript в текстовом файле с расширением js и выполняете ее с помощью
так называемого сервера сценариев Windows (файл wscript.exe, расположенный
в папке Windows). Эта программа устанавливается по умолчанию как приложе-
ние для открытия (выполнения) файлов с расширениемjs. Аналогичная программа
для запуска сценариев через командную строку MS DOS представлена файлом
cscript.exe.
Следует иметь в виду, что некоторые антивирусные пакеты (например, Norton
AntiVirus) позволяют и рекомендуют устанавливать блокировку сценариев. Если
блокировка установлена, то, в зависимости от настройки, сценарий не будет вы-
полняться либо будет выводиться окно с предупреждением и предложением вы-
бора возможных вариантов действий (например, запретить выполнение, разре-
шить выполнение один раз или всегда и др.).
Программы JavaScript, написанные для выполнения браузером и WSH, во мно-
гом похожи. Однако имеются и различия. Так, сценарии для браузера размеща-
5.2. Работа с дисками
281
case 1: t = - съемный"; break
case 2: t = - break
case 3: t = - сетевой"; break
case 4: t = - CD-ROM"; break
case 5: t = - виртуальный"; break
s+= "Диск " + d. DriveLetter + "
if (d.IsReady){
s+= d .VolumeName + t
s+= "\n SN: " + d.SerialNumber
s+= "\n Объем: " + d.TotalSize
s+= "\n Свободно: + d.FreeSpace
}else
s+= t+ " не готов"
s+= "\n\n"
буква диска
если диск готов
имя диска
серийный номер диска
полный объем в байтах
свободно в байтах
WScript.Echo(s)
вывод строки
с характеристиками */
Чтобы использовать функцию driveTotallnfo(dpath) в сценарии, выполняем'ом
браузером, необходимо лишь заменить в ней выражение WScriptEcho(s) наalert(s).
, -~ съемный
1
14 =
: 545230
ш
;:!« несъемный
3932176384
; 1754148864
5N:241702614
Объем: 1C'
Сетбодно: S26195963
ДискЕ: -несъемнвый
SN: 99359:
гм:;25О377О112
Сесйодда: 1290444300
Диск: FiVADIM-1 - CD-ROM
56344!
Свъ?м: 10594064
СЕСЙОДЬЮ; О
ДНсй
• CD-ftOM не готсе
Рис. 5.1. Пример результата работы функции driveTotal!nfo()
282.
.Глава 5. Работа с файловой системой и реестром Windows
5.3. Работа с папками
В этом разделе мы научимся создавать папки и работать с ними.
5.3.1. Создание папки
Для создания папки можно использовать следующий код:
var fso = new Acti veXObject ("
fso.CreateFolder(folderpath)
Здесь folderpath - строка, содержащая полный путь к создаваемой папке, напри-
мер "С:\\Мои документы\\моя папка". Обратите внимание, что при указании пути
требуется использовать двойные слэши. Напомним, что для выполнения с по-
мощью WSH вместо первого выражения можно использовать и такое:
var fso = wsc
Второе выражение, fso.CreateFolder(fotderpath), создает указанную папку и возвра-
щает ссылку на нее, если операция прошла успешно. В противном случае выво-
дится диалоговое окно с сообщением об ошибке.
Если требуется создать папку, то необходимо, чтобы существовали все папки бо-
лее высокого уровня, лежащие на пути к создаваемой папке и указанные в пара-
метре folderpath. Кроме того, диск, на котором создается папка, должен быть запи-
сываемым и готовым к работе. Например, это не может быть устройство для чтения
компакт-дисков, а если это гибкий диск, то он должен быть вставлен в дисковод.
Наконец, если папка, указанная в folderpath, уже существует, то ее нельзя созда-
вать. Таким образом, чтобы создать папку, предварительно следует выполнить
целый ряд проверок. В противном случае, при невыполнении оговоренных выше
условий, появится диалоговое окно с сообщением об ошибке.
В листинге 5.2 приведен код функции createFolder(folderpath), которая выполняет
все необходимые проверки. Более того, если какие-нибудь папки на пути к конеч-
ной (целевой) папке не существуют, то функция создаст их. Таким образом, вам
не придется заботиться о существовании папок вышестоящего уровня.
Листинг 5.2. Код функц ии createFolder(folderpath)
function // создание папки
/* Возвращает: -1. если папка создана или существует, и в - в поотивном
случае */
var fso = new ActiveXObject("Scri
var disk = softDiveNertham // имя (буква) диска
/* Проверка характеристик диска: */
if I return 0 // если диск не существует
if li sk) . IsReady) return 0 // если диск не готов
// Если не подходит тип диска:
if (f so.GetDrive( И sk) .DriveType == 0 || f so.GetDri ve(di sk) . Dri veType ==
4)
return 0
if (fso.GetDrive(disk).FreeSpace< 1024) return 0 // если мало места
if (fso.FolderExists(folderpath)) return -1 /* если папка уже
то не создаем ее */
5.3. Работа с папками.
283
var apath = folderpath.split("\S") // преобразуем в массив имен папок
for(i = 1; i < apath. length;
disk+= "\\" + apath[i]
if < // если папка не существует,
// то создаем ее
>
return fso. FolderExists(folderpath) /* возвращаем результат проверки
существования созданной папки */
}
Здесь дополнительно проверяется наличие свободного пространства на диске. Мы
требуем, чтобы диск имел минимум 1 Кбайт свободного места, чтобы разрешить
создание папки. Вы можете задать и другую пороговую величину или отменить
эту проверку совсем.
5.3.2. Копирование, перемещение и удаление папки
Для копирования, перемещения и удаления папки используются следующие ме-
тоды объекта файловой системы.
• CopyFolder(foLderpathl, folderpal ! [, переписать]) - копирует папку, указанную
в строке folderpathl, в папку, указанную в строке folderpath2; если третий не-
обязательный параметр имеет значение true, то уже существующая папка
folderpathZ с тем же именем переписывается.
• MoveFolder(folderpathl, folderpathZ) - перемещает папку, указанную в строке
folderpathl, в папку, указанную в строке folderpathZ.
• DeleteFolder(folderpath [,force]) - удаляет папку, указанную в строкеfolderpath;
если второй необязательный параметр имеет значение true, то удаляется и пап-
ка, предназначенная только для чтения.
Примеры
var folderpathl = "С:\\Мои доукменты\\Те511"
var folderpath2 = "C:\\Test2"
var fso=new A ctiveXO b ject("S cripting .Flei S ystem O b ject") // объект FSO
/* Создаем папку C:\Test2\ Мои доукменты\Тез11 */
, folderpath2)
/* Удаляем папку C:\Test2 */
fso.DeleteFolder(folderpath2)
/* Создаем папку C:\Program Files\ Мои доукментыХТез!! */
"C:\\Program Files")
Так же, как и в случае создания папки, при практическом копировании, переме-
щении или удалении папки необходимо сначала убедиться в том, что это действи-
тельно можно сделать. Следующая функция выполняет ряд проверок и в случае
положительного результата удаляет папку:
function deleteFolder(folderpath){ // удаление папки
/* Возвращает
0, если папка удалена или не существует, и
-1 - в противном случае */
var fso = new ActiveXObject("Scripting.FileSystemObject")
if (!fso.FolderExists(folderpath)) return 0 // если папка не
// существует
var disk = fso.G etD ivreN am e(folderpath) // имя (буква) диска
// Если не подходит тип диска:
5.4. Работа с файлами.
.285
товности диска, отсутствия указанного дисковода, а также в случае, если это
устройство для чтения компакт-дисков. В листинге 5.3 приведен код функции
createFue(filepath), которая выполняет все необходимые проверки. Кроме того, со-
здаются папки, указанные в filepath, но не существующие.
ч
Листинг 5.3. Код функции createFile( filepath)
function createFile(filepath){ // Создание текстового файла
/* Возвращает ссылку на созданный файл или 0, если файл не создан */
var fso = new ActiveXObject("Scripting.FileSystemObject")
var i = filepath.lastlndexOf("\\")
if (i >= 0) file = filepath.substr(i + 1) /* выделяем имя файла из
filepath */
var folder = filepath . sliсе /* выделяем путь к файлу
без имени файла */
if (!createFolder(folder)) return 0 /* проверки и создание
недостающих папок */
if (fso.FileExi sts(file)) // если файл существует, то
return fso.OpenTextFile(filepath , 2) // открываем его для записи
return fso.CreateTextFile(folder + "\\" + file) /* создаем файл и
возвращаем ссылку
на него */
Здесь используется функция createFolderQ создания папки, которая описана в под-
разделе 5.3.1. Она производит все проверки и при необходимости создает недо-
стающие папки. Обратите внимание, что если указанный в параметре filepath файл
уже существует на диске, то он открывается для записи.
В рассмотренной выше функции createFHe(filepath) для выделения имени файла
из его полного имени filepath мы использовали встроенные функции JavaScript:
lastlndexOfQ, substrQ и slice(). Однако вместо этого можно было использовать
и специальные методы объекта файловой системы:
• GetBaseName(filepath) - возвращает последний элемент в filepath без расшире-
ния;
• GetExtensionName(filepath) - возвращает расширение последнего элемента
в filepath.
Примеры
var fso = new ActiveXObject("Scripting.FileSystemObject")
fso.GetBaseName("C:\\Иои документы\\testfile.txt") //.testfile
fso. GetExtensionName("С: \\Иои flOKyivieHTbi\\testf i le. txt") // txt
He менее полезным является и метод BuildPath(path, name), который к пути path
дописывает элемент name:
var fso = new ActiveXObject("Scripting.FileSystemObject" )
fso. Bui ld Path ("C:\\ Мои документы",
Выше уже отмечалось, что если файл был создан, то он остается открытым. Что-
бы закрыть файл, используется метод CloseQ.
Примеры
// Создание и закрытие файла:
var fso = new ActiveXObject("Scripting.FileSystemObject")
var myfile = fso.CreateTextFile("С:\\Мои дoкyмeнты\\testfile.txt")
286____________________Глава 5. Работа с файловой системой и реестром Windows
var myfile.Close()
// Открытие и закрытие файла:
var fso = new ActiveXObject("Scripting.FileSystemObject")
var f = - 2)
var myf i le .CloseO
// Создание/открытие и закрытие файла:
var myfile = createFile("C : \\Мои документы\\1ез1Т i le . txt ")
var myfile .Close()
5.4.2. Копирование, перемещение и удаление файла
Для операций копирования, перемещения (переименования) и удаления файлов
имеются методы объекта файловой системы (FSO) и методы объекта файла.
var fso = new Acti veXObj ect (' ;ct") // объект FSO
var file = f so.GetFi le(f i lepathl) // объект файла
/* Методы копирования filepathl в filepath2 */
file.Copy(fiIepath2)
fso.CopyFile(filepathl.fiIepath2)
/* Методы перемещения filepathl в filepath2 */
file.Move(filepath2)
fso.MoveFile(filepathl.fiIepath2)
/* Методы удаления filepathl */
file.Delete(filepathl)
fso.DeleteFile(filepathl)
Также как и в случае с папками, методы копирования и удаления имеют еще один
необязательный параметр. Так, значение true этого параметра в методах копиро-
вания обеспечивает перезапись уже существующего файла с тем же именем, а в
методах удаления - удаление файлов, предназначенных только для чтения. Пе-
речисленные выше операции могут применяться к любым файлам, а не только к
текстовым.
В следующем примере создается текстовый файл testfile.txt в папке С\Мои доку-
менты, затемэтотфайлперемещаетсявпапкуC:\Windows\Tempикопируетсявкор-
невую папку на диске С. В заключение он удаляется из обеих папок.
var fso = new ActiveXObject("
var 1 = f s o .CreateTextFile("C:\\Моидoкyмeнты\\testf
// закрываем файл
fl = f : \\MON flOKyM6HTbi\\testf i le. txt") /* Получаем ссылку
на файл */
/* Перемещаем файл в папку
var ".: W W i ndows\\Temp\\testf i l e . txГ ind/ows поучаем ссылку
// удаляем файл
C:\Windows\Temp\testfile.txt
f3.Delete() /* удаляем файл
C:\testfile.txt */
5.4. Работа с файлами.
.287
Копировать, перемещать или удалять можно только закрытые файлы. Поскольку
после операции создания файла он остается открытым, нам пришлось использо-
вать метод CloseQ.
ВНИМАНИЕ -
Прежде чем копировать и перемещать файлы, необходимо проверить, возможны ли дан-
ные операции. Так, следует проверить, существует и готов ли диск, достаточно ли свобод-
ного места на нем, существуют ли все папки, указанные в пути к файлу. Требуется также
решить, что делать, если копируемый или перемещаемый файл уже создан в месте назна-
чения.
Некоторые из этих проверок следует выполнять и перед удалением файла. По-
пробуйте в качестве упражнения написать код функции, выполняющий все эти
операции. Отчасти эта задача аналогична созданию и удалению папки (см. раз-
дел 5.3). Для ее решения вам дополнительно потребуется информация о такой
характеристике файла, как его объем.
Значение объема (размера) файла в байтах содержится в свойстве Size объекта
файла. В следующем примере мы узнаем объем файла C:\autoexec.bat:
var fso = new ActiveXObject("Scripting.FileSystemObject
var fl = fso. // ссылка на объект файла
var size = fl.Size // объем файла
С : \autoexec.bat
/* вывод окна с сообщением
об объеме файла */
Значение свойства S :е объекта файла нужно сравнить со значением свойства
FreeSpace объекта диска, чтобы выяснить, достаточно ли места для записи файла.
5.4.3. Чтение данных из файла
и запись данных в файл
Текстовые файлы создаются, чтобы хранить в них данные, и существуют, чтобы
содержащиеся в них данные можно было прочесть. Чтение и запись данных про-
изводится с помощью следующих трех этапов:
• открытие файла;
• чтение или запись данных;
• закрытие файла.
Открытие текстового файла производится с помощью метода OpenTextFile объекта
FileSystemObject либо с помощью метода OpenAsTextStream объекта файла. При этом
файл может быть открыт в трех режимах: только для чтения (for reading only), для
записи (for writing) и для добавления (for appending) данных. Режимы для записи и
добавления данных не допускают чтения. В режиме добавления записываемые дан-
ные добавляются к уже существующим. В режиме записи старые данные теряются,
а новые записываются, поэтому режим записи лучше называть режимом перезаписи.
Открытие файла можно осуществить следующими способами:
var fso = new ActiveXObjec
var myfile = fso.OpenTe> . mode)
288.
.Глава 5. Работа с файловой системой и реестром Windows
либо
var fso = new ActiveXObject("Scripting.FileSystemObject")
var fileobj = fso.GetFile(filepath )
var myfile = fileobj.OpenAsTextStream(mode)
Здесь filepath - имя файла, возможно, с указанием пути к нему (например, "С:\\Мои
документы\\testfile.txt"); mode - режим открытия файла:
1 - только для чтения (forread only);
2 - для записи (for writing);
8 - для добавления (for appending).
Заметим, что в результате создания нового текстового файла он остается откры-
тым. Чтобы он был сразу же доступен для записи, необходимо передать методу
CreateTextFileQ второй параметр со значением true:
var fso = new ActiveXObject("Scripting.FileSystemObject"j
fso.CreateTextFile(filepath", true)
Для чтения данных из открытого текстового файла используются следующие ме-
тоды объекта файла:
• Реад(количество_ байтов) - применяется для чтения заданного количества бай-
тов (символов), которое указывается в качестве параметра;
• ReadLineQ - применяется для чтения строки, при этом исключается символ
перехода на новую строку;
• ReadAUQ - применяется для чтения всего содержимого текстового файла.
Если вы используете методы Реас1(количество_байтов) или ReadlineQ и хотите про-
пустить заданное количество байтов или строку, то можете использовать методы
) и ScipLineQ соответственно. Эти методы перемещения по
файлу изменяют положение так называемого указателя, которое характеризуется
значениями свойств Column (позиция в строке) и Line (номер строки) объекта фай-
ла. При первоначальном открытии файла эти свойства, доступные только для чте-
ния, имеют значения 1. Каждое применение методов ReadLineQ и SkipLineQ увели-
чивает значение свойства Line на 1.
Пример
var filepath = "С : \\autoexec . bat"
var fso = new ActiveXObject("Scripting.FileSystemObject")
var myfile = f so . OpenTextFi l e( f il epath , 1) // объект файла
(myfile.Line + ", " + myfile.Column ) // 1, 1
// пропустить строку
(myfile.Line + ", " + myfile.Column) // 2, 1
// пропустить 14 байтов
(myfile.Line + ", " + myfile.Column ) // 2, 15
Заметим, что применение метода ReadAU() после методов перемещения даст в ре-
зультате содержимое файла, начиная с текущего положения указателя и до конца
файла.
Для записи данных в открытый текстовый файл используются следующие мето-
ды объекта файла:
5.4. Работа с файлами.
289
• Write (строка) - применяется для записи строки символов без символа перехо-
да на новую строку;
• WriteLine(cTpOKa) - применяется для записи строки символов с добавлением
символа перехода на новую строку;
• WriteBlankLines(K(WM4ecTBo) - применяется для добавления пустых строк, ко-
личество которых указывается в качестве параметра; по существу, этот метод
просто записывает заданное количество символов перехода на новую строку.
Код в листинге 5.4 демонстрирует применение методов записи и чтения данных.
Листинг 5.4. Код методов записи и чтения данных
var file path = "С: \\Мои документы\\1е51Т ile. htm"
var fso = new ActiveXObject("Scripting.FileSystemObject
var myfile = fso.CreateTextFile(f ilepath, true) // создание в режиме
записи myf 11e.Wri teLine("<html>")
myfile.WriteLine("<hl>npHBeT всем!</Ы>")
Это - пробная запись в файл")
myfile.Write("<script>alert('Какое-нибудь сообщение')</script>")
myf ile.WriteBlankLines(2) // две пустые строки
// закрываем файл
var fso = new ActiveXObject("Scripting. FileSystemObject")
var myfile = fso.OpenTextFile(filepath,8) /* открываем в режиме
добавления */
myfile.Write("</html>") // дописываем
// закрываем файл
var fso = new ActiveXObject
var myfile = fso.OpenTextF ile ((flepa th,1) // открываем в режиме чтения
// читаем б байтов: "<html>"
// пропускаем строку
var x = myf i le. ReadLineO /* читаем третью строку:
"<Ы>Привет BceM!</hl> */
// закрываем файл
Для проведения экспериментов с файловыми операциями полезно выражения
с методами чтения данных передать в качестве параметра методу отображения
сообщений WScriptEchoQ. Например, WScript.Echo(myfile.Readl_ine()).
Мы можем прочитать файл построчно в массив, чтобы потом обработать его с по-
мощью методов массива и строкового объекта. В листинге 5.5 приведен код функ-
ции, которая читает текстовый файл и возвращает массив.
Листинг 5.5. Код функции, которая читает текстовый файл и возвращает массив
function FileToArray(filepath){ // чтение файла в массив
var fso = new ActiveXObject("Scripting. FileSystemObject")
var file = fso.GetFile(filepath)
var size = file.Size // объем файла
file = fso,OpenTextFile(filepath)
// перемещаем указатель в конец файла
var lines = file. // количество строк
file.Closet)
var fso = new ActiveXObject("Scripting. FileSystemObject")
var file = fso.OpenTextFile(filepath)
var x = new ArrayO
продолжение &
290.
.Глава 5. Работа с файловой системой и реестром Wndows
Листинг 5.5 (продолжение)
var i = 0
while(i < li nesH{
x[i] = f i le. ReadMn e () // чтение строк файла
file.CloseO
return x // возвращаем массив строк файла
}
Чтобы протестировать эту функцию, выполните следующее выражение:
WScript .Echo (FileToArray ("С: \\autoexec.bat"))
Обратите внимание, что в функции FileToArrayQ нам пришлось дважды создавать
объект F О и открывать файл. Первый раз это понадобилось, чтобы узнать коли-
чество строк в файле путем перемещения указателя на величину, равную объему
файла. При этом указатель оказывается за пределами файла, и, следовательно,
количество строк оказывается на 1 меньше, чем значение свойства Line. К сожале-
нию, мы не можем переместить указатель в начало файла. Поэтому мы закрываем
файл и вновь его открываем, чтобы начать построчное чтение и запись в элемен-
ты массива с помощью оператора цикла.
5.4.4. Создание ярлыков
Ярлык (значок) представляет собой файл с расширением Ink, содержащий ссыл-
ку на некоторое приложение или документ, а также параметры его открытия в окне.
При щелчке на ярлыке указанное в нем приложение открывается. Аналогичный
ссылочный файл с расширением url содержит URL-адрес документа (веб-страни-
цы). Создать ярлык на рабочем столе компьютера, в меню Пуск, в папке Автоза-
грузка, Избранное или в любой другой папке можно с помощью объекта Wscript. Shell,
входящего в состав WSH. Этот объект (точнее, его экземпляр) создается двумя
способами, так же, как и FSO.
Первый способ:
var Myshell = new ActiveXObject("WScript. Shell")
Второй способ:
var Myshell = WScri pt .CreateObject ("WScri pt. Shell")
С помощью метода SpecialFoldersQ можно узнать местоположение специальных
папок, таких как Рабочий стол, Автозагрузка, Избранное, Мои документы, Программы
и др. За этими папками закреплены специальные идентификаторы (переменные).
Например, папке Рабочий стол соответствует идентификатор Desktop, папке Мои
документы - MyDocuments, папке Избранное - Favorites. Вот список всех идентифи-
каторов специальных папок: AUUsersDesktop, AUUsersStartMenu, AUUsersPrograms,
artup, Desktop, Favorites, Fonts, MyDocuments, NetHood, PrintHood, Programs,
Recent, SendTo, StartMenu, Startup, Templates.
Чтобы получить местоположение папки, например Главное меню, открываемой при
щелчке на кнопке Пуск, следует выполнить следующие выражения:
var Myshell = new Acti veXObject("WScript. Shell")
var mypath = Myshell.SpecialFolders("StartMenu")
/* Значение: C:\Windows\rnaBHoe меню */
5.4. Работа с файлами
291
В листинге 5.6 приводится пример программы создания ярлыка для Блокнота Win-
dows (notepad.exe) и расположения его на рабочем столе компьютера (в папке Ра-
бочий стол).
Листинг 5.6. Код программы создания ярлыка для Блокнота
var Myshell = new ActiveXObject("WScript.Shell")
var mypath =
// путь к папке Рабочий стол
/* Создание ярлыка и подписи к нему: */
var myshortcut = Myshell.CreateShortcut(mypath + "\\Мой Блокнот.Ink")
/* Папка расположения Windows: */
var mywindir = Myshell.ExpandEnvironmentStrings("%windir%")
/* Параметры ярлыка: */
// расположение файла:
myshortcut.TargetPath = Myshell.ExpandEnvironmentStrings(mywindir +
"\\notepad.exe") myshortcut .Worki ngDi rectory =
Myshell.ExpandEnvironmentStrings(mypath) // рабочая папка
myshortcut.WindowStyle =4 // тип окна (стандартное)
/* файл, содержащий графическое изображение ярлыка: */
myshortcut.IconLocation = Myshell.ExpandEnvironmentStrings(mywindir +
"\\notepad. exe")
myshortcut.Save() // сохранить на диске
Здесь Myshell.ExpandEnvironmentStrings("%windir%") возвращает строку, содержа-
щую значение переменной среды, в данном случае %windir%. По умолчанию файл
notepad.exe находится в папке расположения операционной системы Windows, но
эта папка не обязательно называется C:\Windows. Свойство WindowStyle может при-
нимать три значения: 3 - развернуть окно на весь экран, 4 - стандартное окно,
7 - свернуть в значок на панели задач.
8 следующем примере создается ярлык в главном меню кнопки Пуск для некото-
рой программы afpwin.exe:
var Myshell = new Acti veXObject ("WScri pt. Shell")
var mypath=Myshell.SpeciaIFolders("StartMenu")
var myshortcut = Myshell. CreateShortcut (mypath + "\\АФП . Ink")
myshortcut.TargetPath =
Myshell. ExpandEnvi ronmentStri ngs ("C: \\AFP\\afpwin.exe")
myshortcut.WorkingDirectory =
Myshell.ExpandEnvi ronmentStri ngs("C: \\AFP")
// тип окна (развернуть на весь экран)
myshortcut.IconLocation =
Myshell. ExpandEnvi ronmentStri ngs ("C : \\AFP\\afp.iсо")
myshortcut. Save()
Приведенный ниже код создает в папке Избранное ссылку (url-файл) на главную
страницу веб-сайта автора этой книги:
var Myshell = new Acti veXObject ("WScript. Shell")
var mypath = Myshell.SpecialFolders("Favorites")
var myshortcut = Myshell .CreateShortcut (mypath +
"\\Сам себе Web-дизайнер.url")
myshortcut.TargetPath = Myshell.ExpandEnvironmentStringsC 'http://
www.admiral.ru/~dunaev")
myshortcut .SaveO
Основное отличие этого примера от предыдущих состоит в том, что свойству
TargetPath (путь к цели) присваивается URL-адрес документа.
5.5. Работа с реестром
293
Имя раздела реестра Сокращенное имя Описание
верхнего уровня раздела реестра
HKEY USERS HKU Содержит параметры настройки оболочки
Windows для всех пользователей.
Информация из этого раздела копируется
в раздел HKEY_CURRENT_USER. С другой
стороны, все изменения в разделе
HKEY_CURRENT_USER автоматически
переносятся в раздел HKEY_USER
HKEY" CURRENT CONFIG HKCC Содержит информацию о настройках
устройств Plug&Play, а также сведения
о настройках компьютера с переменным
составом аппаратных средств
HHEY DYN_DATA HKDD Содержит изменяющиеся данные
о состоянии устройств, установленных
на компьютере пользователя. Эти
сведения отображаются в окне Панель
управления > Система Устройства >
Свойства. Данные этого раздела
обновляются операционной системой
Windows, и поэтому не рекомендуется
редактировать его самостоятельно_______
Перечисленные коренные разделы имеют подразделы, а те - свои подразделы и т. д.
В конечном разделе ветви дерева реестра определяются параметры. Каждый па-
раметр имеет имя и значение. Работа с реестром заключается в просмотре, созда-
нии и удалении его записей. Так, вы можете создать или удалить раздел реестра,
создать или удалить параметр в каком-либо разделе. Однако делать это без четко-
го понимания целей и правил не рекомендуется.
ВНИМАНИЕ
Не следует открывать и редактировать файлы реестра system.dat и user.dat в текстовом
редакторе.
Здесь мы не будем подробно обсуждать, что нужно изменить в реестре, чтобы по-
лучить тот или иной эффект. Рассмотрим, как можно изменять записи в реестре,
если такая необходимость возникла.
Для работы с реестром используются три основных способа.
• С помощью редактора реестра - программыregedit.exe. Чтобы запустить ре-
дактор реестра, достаточно выполнить команду Пуск > Выполнить, ввести с кла-
виатуры слово regedit и щелкнуть на кнопке ОК. Данный способ наиболее без-
опасный.
С помощью reg-файлов. Это текстовые файлы с расширением гед, записи в ко-
торых имеют довольно простую структуру. Запуск reg-файла, например, двойным
щелчком на его имени в Проводнике Windows приводит к открытию диалогового
окна с предложением добавить информацию из этого файла в реестр. При вашем
согласии данные из reg-файла будут импортированы в файлы реестра.
294
.Глава 5. Работа с файловой системой и реестром Windows
• С помощью программы JavaScript, использующей специальные методы Win-
dows Scripting Host. В этом случае можно организовать не видимую пользова-
телем работу с реестром (если, конечно, он не заблокировал выполнение сце-
нариев).
Рассмотрим сначала структуру записей в re g -ф а й л е , который можно создать с по-
мощью обычного текстового редактора, например Блокнота Windows. В первой
строке этого файла должно быть написано прописными буквами R E G E D I T 4. Затем
должна быть пустая строка. В следующей, третьей строке в квадратных скобках
пишется имя раздела реестра. В четвертой строке располагается запись согласно
приведенному ниже формату:
"имя_параметра"=значение
Если в данном разделе реестра следует разместить еще один параметр, то запись
о нем располагается в следующей строке. Таким образом, сведения о каждом па-
раметре записываются в отдельной строке reg-файла. Аналогичным образом можно
создать записи, относящиеся к другому разделу реестра. Однако между такими
секциями, каждая из которых соответствует отдельному разделу реестра, обяза-
тельно должна быть одна пустая строка. Таким образом, структура reg-файла имеет
следующий вид:
REGEDIT4
[имя_раздела1]
"имя_параметра Назначение 11
"имя_параметра12"=значение!2
. . .
"имя_параметра1М"=значение1М
[имя_раздела2]
"имя_параметра21"=значение21
"имя_параметра22"=значение2 2
"имя_параметра2М" =значение2М
[имя раздела1_]
"имя лараметра1Л"=значение1 1
"имя _ параметра1_2"=значение1 _ 2
"имя_параметра1_М"=значение1М
Значения параметров могут принадлежать одному из трех типов:
• строковый - значения этого типа являются просто строкой символов, заклю-
ченной в кавычки;
'•' D W O R D - для записи значения этого типа используется форматd word :X X X X X X X X .
Вместо X записываются ше стнадцатеричные цифры. Обычно параметры типа
DW O R D имеют значение либо 0, либо 1. В этих случаях для задания значения
требуется записать либо dword00000000, либо dword:00000001;
• двоичный - для записи значения этого типа используется формат h e x : X X , X X , X X,
Вместо XX записываются шестнадцатеричные цифры; пары таких цифр разде-
ляются запятой. Например, для задания значения af 00 01 00 следует записать
hex:af,00,01,00.
5.5. Работа с реестром.
295
Кроме того, в реестре могут быть установлены параметры по умолчанию (default).
Чтобы присвоить какое-то значение параметру по умолчанию, необходимо про-
сто записать в reg-файле следующее выражение:
(Э=значение
Рассмотренные выше записи reg-файла добавляют, а не перезаписывают записи
в реестре. Чтобы удалить раздел в реестре, необходимо в reg-файле перед его име-
нем в квадратных скобках поставить символ «минус», как в следующем примере:
[-HKEY_LOCAL_MACHINE\Software]
Чтобы удалить параметр, следует присвоить ему символ «минус»:
"имя_параметра"= -
Ниже в качестве примера приведено содержимое reg-файла, с помощью которого
устанавливается начальная веб-страница, загружаемая в браузер Internet Explorer:
REGEDIT4
[HKEY_CURENT_USER\SOFTWARE\MiсrosoftXInternet Explorer\Main]
"Start Page" = "http://www.myweb.ru"
Читать, создавать и удалять записи в реестре можно с помощью специальных ме-
тодов объекта Wscript.Shell, входящего в состав WSH:
• RegReadQ - возвращает запись реестра или значение параметра;
• RegWriteQ - создает новую запись в реестре или изменяет значение параметра
уже существующей записи;
• RegDeleteQ - удаляет запись реестра или параметр.
Применение этих методов имеет следующий синтаксис:
var Myshell = new ActiveXObject("WScript.Shell")
Myshell.метод(параметры)
Метод RegWrite () принимает в качестве параметра строку, содержащую имя разде-
ла реестра, за которым указывается имя параметра. Все элементы имени раздела
разделяются двойными обратными слэшами. Например, в строке "HKEY_CURENT_
USER\\Myreg\\myparam" последний элемент myparam является именем параметра,
а не раздела реестра.
Метод RegWriteQ принимает три параметра, из которых последний не является
обязательным. Первый параметр - строка, содержащая имя раздела или имя па-
раметра. Если эта строка заканчивается двойным слэшем, то подразумевается, что
последний элемент строки - имя раздела, в противном случае - имя параметра
в разделе. Второй параметр метода RegWriteQ представляет значение параметра
раздела. Если имя параметра раздела не указано, то подразумевается параметр по
умолчанию. Третий, необязательный параметр метода RegWriteQ задает тип пара-
метра в разделе реестра и представляет собой R E G _ D W O R D " или "REG_BINARY", со-
ответственно для типов D W O R D и двоичного. Если тип не указан, то подразумева-
ется строковый тип.
Примеры
var Myshell = n ew ActiveXObject("WScript.Shell")
/* Создание подраздела Myreg в разделе HKEY_CURENT_USER и присвоение
параметру по умолчанию значения "значение": */
Myshell.RegWrite("HKEY_CURENT_USER\\Myreg\\", "значение")
296______________________Глава 5. Работа с файловой системой и реестром Windows
/* Создание в разделе HKEY_CURENT_USER\ Myreg строкового параметра
myparaml и присвоение ему значения "некоторая строка": */
Myshell.RegWrite("HKEY_CURENT_USER\\Myreg\\myparaml", "некоторая
строка")
/* Создание в разделе HKEY_CURENT_USER\ Myreg двоичного параметра
myparam2 и присвоение ему значения 5: */
Myshell.RegWrite("HKEY_CURENT_USER\\Myreg\\myparam2", 5, "REG_BINARY")
/* Создание в разделе HKE Y _CUR E N T _ USER\ Myreg параметра турагатЗ типа
D W O RD и присвоение ему значения 3: */
Myshell.RegWrite("HKEY_CURENT_l)SER\\Myreg\\myparam3", 3, "REG_DWORD")
Метод RegDeleteQ принимает в качестве параметра строку, содержащую имя раз-
дела или параметра. Если эта строка заканчивается двойным слэшем, то подразу-
мевается, что последний элемент строки - имя раздела, в противном случае -
имя параметра в разделе.
Примеры
var Myshell = new ActiveXObject ("WScript. She ll")
/* Удаление в разделе HKEY_CURENT_USER\ Myreg параметра myparaml: */
Myshell.RegWrite("HKEY_CURENT_USER\\Myreg\\myparami")
/* Удаление подраздела Myreg в разделе HKEY_CURENT_USER: */
Myshell.RegDelete("HKEY_CURENTJJSER\\Myreg\\")
СОВЕТ
Вместо полных имен корневых разделов реестра можно использовать их сокращенные
обозначения. Например, вместо HKEYCURENTUSER можно писать HKCU.
В листинге 5.7 приведен пример программы, делающей запись в реестре, которая
устанавливает стартовую веб-страницу.
Листинг 5.7. Запись установки стартовой страницы
var Myshell = new ActiveXObject("WScript.Shell")
var mystartpage = http://www.myweb.ru // нужная страница
/* Проверяем, какая веб-страница является начальной: */
startpage = Myshell. RegWri te("HKCUX\SOFTWARE\\Mi c rosoft\\Internet
ExplorerUMainUStart Page")
if (startpage != mystartpage) // если другая
Myshell. RegWri te( "H KCU \\SOFTWARE\\ Mi crosof t\\Internet
Explorer\\Main\\Start Pagi . mystartpage)
Аналогичным образом можно создать записи в реестре, запускающие прило-
жения.
Приложение 1. Руководство
по динамическому HTML
Основные понятия
HTML (HyperText Markup Language - язык разметки гипертекста) является ос-
новным языком программирования веб-страниц. Описания веб-страниц содер-
жатся в HTML-программах (HTML-кодах), которые хранятся в обычных тексто-
вых файлахс расширением htm или html. Иногда эти программы называют HTML-
документами, но обычно HTML-документом считается то, что можно видеть в окне
браузера. Программы на языке HTML содержат инструкции (коды), называемые
тегами. Теги представляют собой последовательности символов, заключенные
в угловые скобки (например, <Р>).
Большинство современных браузеров допускают запись тегов в любом регистре,
то есть как прописными, так и строчными буквами. Все ключевые слова тегов,
являющиеся обычно аббревиатурами слов английского языка, записываются бук-
вами латинского алфавита. Например, IMG -сокращение слова image (изображе-
ние).
HTML-программа должна начинаться тегом <HTML> и заканчиваться тегом
</НТМ1_>. Между ними находятся другие теги программы или текст, который вы
хотите вывести в окне браузера. Некоторые теги используются только парами (на-
пример, <Н ТМ1> и </H T M L>). При этом первый из них называется открывающим,
а второй - закрывающим. Иногда парные теги называют контейнерными, пото-
му что между ними можно разместить другие теги. Таким образом, в контейнер-
ные теги можно вкладывать другие теги, в том числе и контейнерные, то есть теги
могут быть вложенными. Сейчас запомните этот факт, а в дальнейшем разберем-
ся, как ими пользоваться. Существуют одиночные теги, для них нет соответствую-
щих закрывающих тегов. Примером одиночного тега является тег <BR> (конец
строки).
Теги могут содержать параметры, называемые атрибутами, которые, в свою оче-
редь, могут иметь значения - аргументы. Можете считать (если так удобнее), что
тег - это команда, атрибут - имя ее параметра, а аргумент - значение парамет-
ра. Например, для вывода на экран изображения, хранящегося в файле картинка.]рд,
используется тег
<IMG SRC="KapTHHKa.j pg">
298.
Приложение 1. Руководство по динамическому HTML
Здесь IMG - название тега, SRC - атрибут, а "картинкаорд" - аргумент атрибута
SRC.
Итак, если мы решили написать HTML-программу, то должны включить в нее
два тега:
<HTML>
(здесь будут другие теги программы)
</HTML >
HTML-программы состоят из двух основных частей: заголовка и тела. Каждая из
этих частей ограничивается соответствующей парой тегов. Так, заголовок огра-
ничивается парой тегов <HEAD>И </HEAD >, а тело - тегами <B O D Y> и </BODY>. В ре-
зультате HTML-программа выглядит следующим образом:
<HEAD>
. (здесь будет заголовок)
</HEAD>
<BODY>
(здесь будут теги тепа программы)
</BODY>
</HTML>
Заметим, что писать каждый тег с новой строки или делать отступы совсем не
обязательно, однако благодаря этому программа читается лучше.
Между тегами <HEAD> и </HEAD >, обрамляющими заголовок программы (HTML-
файла), напишем еще два тега: <T I T L E> и </T ITLE>. С помощью этих тегов обрамля-
ется текст, который помещается в заголовок браузера, то есть в самую верхнюю
полоску его окна. Пусть текст заголовка будет, например, таким: «Основные эле-
менты HTML». Тогда программа примет следующий вид:
<HTML>
<HEAD> <TITLE> Основные элементы HTML </TITLE> </HEAD>
<BODY>
. . . (здесь будут расположены теги тела программы)
</BODY>
</HTML>
Заметьте, что тег <TITLE> вложен в тег <HEAD>, а тот вложен в тег <HTML>.
В теле нашей программы, то есть между тегами <BODY> и </BODY>, напишем какой-
нибудь текст, чтобы программа выглядела следующим образом:
<HTML>
<HEAD> <TITLE> Основные элементы HTML </TITLE> </HEAD>
<BODY>
HTML-документы состоят из заголовка и тела. В теле документа могут
находиться тексты, рисунки и ссылки на другие файлы.
</BODY>
</HTML>
Раскроем окно текстового редактора Блокнот (Notepad) и напишем в нем текст на-
шей первой HTML-программы (рис. П1.1).
Сохраним нашу программу в файле с расширением htm или html. Например, на-
значим имя файла npo6a.htm. Чтобы удалось назначить нужное расширение фай-
ла, выберите в диалоговом окне тип файла Все файлы (*.*) и введите в поле Имя
файла придуманное вами имя файла с нужным расширением. Теперь необходимо
Основные понятия
299
<HIML>
<HEAD> <TITLE> Основные элементы HTML </TITLE> </НЕЫ»
<BODY>
Документы HTML состоят из заголовка и тела.
В теле документа могут находиться тексты,
I рисунки и ссылки на другие файлы.
</BODY>
</HTML>
///
ЯI
Рис. П1.1. HTML-код в окне текстового редактора Блокнот (Notepad)
раскрыть этот файл в браузере. Для этого в Пров о днике Windows (Explorer) найди-
те файл npo6a.htm и выполните.двойной щелчок левой кнопкой мыши на его име-
ни или на его значке (рис. П1.2). В Windows все файлы с расширением htm и html
открываются в окне браузера Internet Explorer, если, конечно, вы не установили
другой браузер.
Ш WJ СЛМои документы^ роба, htm
Документы HTML состоят из заголовка и тела. В теле
документа могут находиться тексты, рисунки и ссылки
на другие файлы.
Рис. П1.2. HTML-документ в окне браузера Internet Explorer
Если потребуется что-то изменить в HTML-коде, то, не выходя из окна браузера,
в меню Вид выберите команду (опцию) Просмотр HTML-кода В результате раскро-
ется окно текстового редактора Блокнот с файлом вашей программы. Внесите не-
обходимые изменения и сохраните файл под тем же именем. После этого в окне
браузера выполните команду Вид > Обновить. В результате загрузится измененный
HTML-файл.
Итак, мы создали простую страницу. В ней размещен только текст, причем не-
форматированный. Однако настоящие страницы устроены сложнее и выглядят
более привлекательно. Более того, в настоящее время в Интернете существуют
удивительные по красоте страницы. И это очень важно, поскольку необходимо не
просто опубликовать свою страницу, содержащую информацию, но еще и при-
влечь к ней внимание читателей.
Основные понятия
301
В случае использования такого средства автоматизации разработки веб-страниц,
как FrontPage, всю описанную выше работу можно выполнить следующим обра-
зом. Запустите FrontPage. Выберите вкладку Normal. В рабочую область, располо-
женную в центре окна, введите с клавиатуры текст. У вас должно получиться при-
мерно то, что показано на рис. П1.3.
Перейдите на вкладку HTML чтобы увидеть, какой код программы соответствует
этой простой странице, содержащей только текст (рис. П1.4). Этот HTML-код
можно при желании отредактировать. Чтобы посмотреть результат редактирова-
ния, достаточно просто перейти на вкладку Normal
Maw: [гиегГ format Tods Tjbie frames Vjndow Help
Ж Л Н
<head>
<siet& http-ectui v*"Content-Type" coriten"~" text/html; char5et=vindows-1251">
• C meta name-"GEHERATOR" content="Hicrosoft FrontPage 4.0">
<neta name="ProgId" cor,tetit="FrontPage.Editor.Document":»
<title>Heu Page K/ticle>
</head>
<body>|
<p><::span styie-"font-size: 12. Opt;font-family: "Times New Roman&cfuot; ;
mso-f areast- font- family: uquot;Times Hew Romans,quot; ;mso-ansi-language :RU;mso-far
RU;mso-bidi-language:АЕ-ЗА">Докуненты HT I IiL состоят из
I заголовка и тела. В теле документа ногут
I находиться тексты, рисунки и ссылки на
другие файлы.</зраГ:></р>
</body>
:| о:;:;-:-..::;
Рис. П1.4. Код на вкладке HTML в программе FrontPage
Если вы хотите посмотреть, как будут выглядеть результаты вашего творчества
в окне браузера, перейдите на вкладку Preview.
Как FrontPage, так и MS Word при создании HTML-программ вставляют в заго-
ловок (то есть между <HEAD> и </HEAD>) теги <МЕТА> с различными атрибутами.
Пример
<НТМ1_>
<HEAD>
<МЕТА http-equiv="Content-Language" content="ru">
<META http-equiv="Content-Type" content="text/html" ; charset="windows-
1251">
<META name="GENERATOR" content="Microsoft FrontPage 4.0">
<META name="ProgID" con t en t = " Front Page . Editor . Document">
Форматирование текстов ;______________303
ран в окне браузера. Некоторые теги выполняют специальные функции, не
связанные с выводом на экран.
• Все, что заключено между символами <! и >, является комментарием и не
отображается в окне браузера.
• Информация, описанная в тегах <МЕТА>, не отображается браузером, но имеет
важное значение. Эти теги можно вставить в HTML-программу на завершаю-
щем этапе разработки веб-страницы, непосредственно перед ее опубликова-
нием.
• В HTML-программу можно вставлять фрагменты, написанные на языках Java-
Script и Visual Basic Script. Эти фрагменты обрамляются тегами <SCRIPT>
и </SCRIPT>.
Форматирование текстов
Страница обычно содержит тексты - простой и наиболее распространенный спо-
соб представления информации, хотя далеко не единственный. Вы можете создать
текст, не уделяя особого внимания тому, как он будет выглядеть в окне браузера.
Браузер отобразит неформатированный текст, используя настройки, выбранные
пользователем. Однако даже самому непритязательному пользователю хочется,
чтобы заголовки отличались от основного текста размером и шрифтом, чтобы
можно было выделить абзацы, пропустить строку и т. п. Все это называется фор-
матированием текста. Сразу предупредим, что если вы переусердствуете в этом,
то пользователь просто не сможет прочитать ваш текст, не говоря уже об эстети-
ческом восприятии. Запомните, что тексты - это главное на вашей странице. Они
должны правильно отображаться почти во всех браузерах.
Если вы работаете в специальной программе, предназначенной для создания веб-
страниц (например, FrontPage), то у вас имеется множество вариантов, подобных
форматированию в обычных текстовых процессорах. Поэкспериментируйте, на-
блюдая при этом, какие теги создает программа FrontPage (см. вкладку HTML).
При оформлении текстов используются специальные теги. Рассмотрим некото-
рые из них.
• Тег <BR> предписывает переход на новую строку.
• Тег <Р> является тегом абзаца. После него текст будет выводиться с новой стро-
ки и, кроме того, одна строка будет пропущена. Если не использовать эти теги,
то разбиение текста на строки будет определяться шириной окна браузера, так
что вид текста может оказаться совсем не таким, каким мы его себе представ-
ляли.
• Если вы хотите, чтобы текст выравнивался по центру окна браузера, исполь-
зуйте тег<CENTER>, который упоминался выше.
ВНИМАНИЕ
Теги <BR> и <Р> действуют по отношению не только к текстам, но и к другим элементам
страницы. Например, если вы хотите, чтобы рисунок размещался ниже текста, то поставь-
те между текстом и тегом рисунка <BR> или <Р>.
Форматирование текстов.
305
<НЗ>Заголовок го уровня </НЗ>
<Н4>Заголовок 4-г о \фОВНЯ </Н4>
• <Н5>Заголовок 5-го уровня </Н5
<Н6>Заголовок б-го уровня </Н6
<Н7>Заголовок 7 -го> Ьровня </Н7>
</BODY>
</HTML>
Управление шрифтом
Кроме использования стандартных размеров и начертаний (гарнитуры) шриф-
тов можно определять шрифты для каждого фрагмента текста с помощью специ-
альных тегов.
Самый простой способ - использование так называемых физических стилей
(табл. П 1.1).
Таблица П1.1. Теги физических стилей________________________________________________
Стиль Тег
Полужирный (Bold) <B>
Курсив (Italic) <I>
Подчеркнутый (Underscore) <U>
Вычеркнутый (Strike Out) <S>
Пишущая машинка (Typewriter) <TT>
Мерцающий (только для браузера Netscape Navigator)___________<BLINK>__________________
Для каждого тега физического стиля существует соответствующий закрывающий
тег, который отменяет стиль, установленный ранее. Например, для тега <В> за-
крывающим тегом является </В>.
Ниже приведен пример программы и внешний вид различных физических сти-
лей (рис. П1.6):
<НТМ1_>
<НЕАО><Т1Т1Е>Физические стили</Т1Т1Е></НЕАО>
<BODY>
<В>Полужирный<Р></В>
<1>Курсив<Р></1>
<и>Подчеркнутый<Р></и>
<5>Вычеркнутый<Р></5>
<ТТ>Пишущая машинка<Р></ТТ>
<В><1>Полужирный курсив<Р>
<11>Попужирный курсив подчеркнутый
</BODY>
</HTML>
Внутри тега заголовка можно вставить тег физического стиля, чтобы модифици-
ровать весь заголовок или только некоторую его часть (рис. П1.7). Например, чтобы
выделить курсивом часть текста, определенного в качестве заголовка, можно ис-
пользовать следующую конструкцию:
<HTML>
<НЕАО><Т1Т1_Е>Физические и логические стили</Т1Т1_Е></НЕАО>
Форматирование текстов 313
<HTML>
<BODY BGCOLOR="#E0E0E0">
<Н1 Разделительные полосы<Н1>
<НЗ>Для отделения частей текста можно использовать разделительные
полосы.Такие полосы вставляются тегом HR.<BR>
Это - обычная полоса, заданная без указания атрибутов
<HR>
Можно задавать различные толщину и ширину полос. Эт о - полоса толщиной 5
<HR SIZE=5>
<Р>Это - полоса толщиной 10 и шириной 200
<HR S : = 10 WIDTH = 200>
<Р>Это - полоса толщиной 5, заданная с атрибутом N 0 5 H A D E
<HR SIZE=5 NOSHADE>
<НЗ>
</BODY>
</HTML>
Задав равные небольшие значения для высоты и ширины, получим квадратик,
который можно использовать в качестве маркера для разделения частей страни-
цы или элементов списка. Однако в этом случае требуются специальные средства
позиционирования элементов.
Бегущая строка
Internet Explorer поддерживает тег <MARQUEE> который позволяет создать так
называемую бегущую строку, то есть эффект прокручивания текста в заданном
поле. Характеристики бегущей строки задаются следующими атрибутами:
• WIDTH - ширина поля бегущей строки в пикселах или процентах от ширины
окна;
• HEIGHT - высота поля бегущей строки (в пикселах);
• HSPACE, VSPACE - интервалы по горизонтали и вертикали между текстом стро-
ки и краями ее поля (в пикселах);
• ALIGN - определяет положение текста бегущей строки в ее поле; возможные
аргументы:
• ТОР (вверху);
a BOTTOM (внизу);
О MIDDLE (посередине);
• DIRECTION - определяет направление движения; возможные аргументы:
• LEFT (справа налево);
LJ RIGHT (слева направо);
• BEHAVIOR - характер движения строки; возможные аргументы:
• SCROLL - текст появляется от одного края и скрывается за другим;
О SLIDE - строка вытягивается из одного края поля и останавливается у дру-
гого края;
• ALTERNATE - задает переменное направление движения, от одного края к дру-
гому, а затем обратно;
314
Приложение 1. Руководство по динамическому HTML
• LOOP - количество повторений текста в бегущей строке, задаваемое числом;
если необходимо «бесконечное» количество повторений, то следует задать ар-
гумент в виде ключевого слова INFINITY. Атрибут L O O P не влияет на поведение
бегущей строки, если для атрибута BEHAVIOR заданы аргументы A L T E R N A T E или
SLIDE;
• SCROLAMOUNT - устанавливает длину в пикселах «прыжка» текста за один такт;
при большом значении этого параметра текст движется рывками, а при ма-
лом - замедленно;
• 5 - определяет величину паузы между тактами перемещения тек-
ста в миллисекундах;
BGCO L OR - устанавливает цвет поля бегущей строки, задаваемый шестнадцате-
ричным числом или именем.
Соотношения между длиной текста, размером шрифта и скоростью перемещения,
при которых бегущая строка выглядит приемлемо, подбираются опытным путем.
В следующем примере бегущая строка «бесконечно» прокручивается на желтом
поле шириной 75% от ширины окна браузера (рис. П1.12).
же расположена "бегущая строк
будет I
Рис. П1.12. Бегущая строка
<HTML>
<НЕАО><Т1Т1Е>Бегущая строка</Т1Т1Е ></НЕАО>
<BODY>
Ниже расположена "бегущая строка"
, HEIGHT = 50 WDT H=75% HSPACE=5 VSPACE = 5 ALIGN=TOP BG C O LjOR=YELLOW
DIRECTION = LEFT L OOP=INFINITE BEHAVIOR=SCROLL 5CROLLAMOUNT=5
SCROLLDELAY=100>
<H1> Это сообщение будет прокручиваться на экране справа налево</Н1>
</MARQUEE>
</BODY>
</HTML>
Специальные и зарезервированные символы
При формировании Н жумента может п о т р е б о в а ться ввести символы, ко-
торые воспринимаются браузером как служебные. Например, нельзя использо-
Форматирование текстов.
315
вать символы < и > для обозначения знаков «меньше» и «больше», так как они
интерпретируются как символы тегов. Кавычки ( ") и амперсанд (&) также исполь-
зуются в языке HTML для служебных целей. Кроме того, все символы, которые
можно набрать при нажатых клавишах управления, отличных от Shift, могут не
воспроизводиться при просмотре HTML-документа, поскольку они зарезервиро-
ваны.
ВНИМАНИЕ -
Вместо зарезервированных символов в текст следует вставить их буквенные эквиваленты
или коды ASCII. В качестве буквенного эквивалента используются соответствующие со-
кращения.
Буквенный эквивалент имеет формат:
&буквенный_эквивалент;
Например, < обозначает символ < (less then, меньше чем).
Цифровой эквивалент имеет формат:
&#кодА5СП;
Например, символ < можно вставить в документ как <.
Таким образом, эквиваленты заключаются между символами & и точкой с запя-
той. При этом в случае цифрового эквивалента перед ASCII-кодом символа сле-
дует поставить символ #. На рис. П1.13 представлена таблица эквивалентов для
некоторых часто употребляемых зарезервированных символов. Данная таблица
сформирована как HTML-документ. В листинге П1.2 приведено его содержание
как пример использования специальных и зарезервированных символов.
Листинг П1.2. Код таблицы эквивалентов некоторых зарезервированных символов
<HTML>
<HEAD><TITLEСпециальные символьк/TITLE></HEAD>
<Н2>
<SAMP>
Симв.Код Эквивалент<В(?>
<HR>
" 34quote<BR>
& 38 amp<BR>
< 60 U<BR>
> 62 gt<BR>
160 nbsp<BR>
¢ 162 cent<BR>
£ 163 pound<BR>
§ 167 sect<BR>
© 169 copy<BR>
® 174 reg<BR>
177; 177 piusmn<BR>
µ 181 micro<BR>
¶ 182 para<BR>
¼ 188 frac!4<BR>
½ 189 frac!2<BR>
¾ 190 frac34<BR>
Æ 198 AElig<BR>
Ø 216 Oslash<BR>
æ 230 aelig<BR>
Графика на веб-страницах.
317
Существует два способа размещения изображений на странице:
вставка отдельных изображений;
• заполнение фона рисунком.
В любом случае графический объект берется из файла.
Вставка изображений
Вставка на страницу изображения из файла графического формата производится
с помощью тега <IMG> (от аш : image - изображение) с указанием адреса файла
в качестве аргумента атрибута SRC:
<IMG 5КС="адрес_графического_файла">
Адрес графического файла - это либо URL-адрес, либо имя файла, возможно,
с указанием пути.
Например, для показа графического файла logotip.jpg следует написать тег
<IMG SRC = "logotip . jpg">
Для увеличения скорости передачи изображения в теге <MG> можно использо-
вать атрибут (дополнительный параметр) L OWSRC , который принимает в качестве
аргумента адрес графического файла. Вы можете создать д§а графических файла:
один (например, пусть это файл logotip.jpg) содержит изображение, полученное
с высоким разрешением, адругой (например, Logotip.gif) - рисунок, полученный
с низким разрешением. Тогда тег
<IMG SRC="logotip.jpg" LOWSRC="logotip. gif">
предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере загрузки
страницы заменить его файлом logotip.jpg.
Другой способ ускорения загрузки графики заключается в задании размеров изоб-
ражения с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых
в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под гра-
фику, подготовит макет документа, отобразит текст и только потом загрузит гра-
фику. Заметим, что браузер сжимает или растягивает изображение, встраивая его
в рамки указанного размера. Пример указания размеров изображения:
<IMG SRC = "logotip.gif" WIDTH=40 HEIGHT=20>
Здесь атрибут WIDTH задает ширину прямоугольной области, в которой будет раз-
мещено графическое изображение, a HEIGHT - высоту.
Графика обычно используется вместе с текстом, поэтому возникает задача вырав-
нивания текста и изображения. Эта задача решается с помощью атрибута ALIGN
тега<IMG> с применениемразличныхаргументов. Например, мы можем пожелать,
чтобы текст обтекал рисунок справа или слева. Обычно изображение встраивает-
ся вплотную с текстом, что может быть некрасиво. Чтобы этого избежать, можно
задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов
V S P A C E для верхнего и нижнего полей и H S P A C E для боковых полей в теге <MG>.
Аргументы этих атрибутов указываются в виде чисел, определяющих размеры
полей в пикселах. Для отмены обтекания графики текстом служит тег <BR
CLEAR=...>.
Графика на веб-страницах.
319
<MG SRC="logotip.gif" ALIGN=LEFT>
<Н1>Текст обтекает графику справа</Н1>
Это - пример совместного использования текста и графики.<BR>
Текст программы HTML можно писать в любом текстовом редакторе.
При этом используются теги разметки текста.
<Р>
Этот текст выводится с нового абзаца. Чтобы сделать это, мы использовали
специальный тег.
<Р>
Попробуйте изменить размеры окна Вашего браузера. Обратите внимание, как
изменяется расположение текста.
</BODY>
</HTML>
Широкие возможности точного позиционирования изображений (как и других
элементов) на странице предоставляют таблицы и стили. Эти элементы HTML
будут рассмотрены позже. Например, вы можете определить таблицу без види-
мых рамок, а в ячейках этой таблицы разместить рисунки, тексты и другие эле-
менты.
Фоновая графика
Чтобы украсить страницу, можно заполнить фон изображением из графического
файла. Фоновое изображение - это файл, содержащий рисунок (желательно не-
большого размера), который многократно выводится на экран, заполняя все окно.
Рисунок может представлять собой небольшой прямоугольник или же длинную
узкую полоску (например, залитую градиентом).
Фоновая графика задается в теге <BODY> в начале HTML-документа, подобно тому
как задается цвет фона. При этом используется атрибут B A C K G R O U N D), значением
которого является имя графического файла. Например, если мы хотим для фона
взять файл fon.gif, то соответствующий тег будет выглядеть так:
<BODY BACKGROUND="fon.gif">
Для браузера Internet Explorer можно использовать дополнительный атрибут
BGPROPERTIES=FIXED, запрещающий прокрутку фона в окне экрана. Например:
<BODY BACKGROUND="fon.gif" BGPROPERTIES = FIXED >
ВНИМАНИЕ -
Следует иметь в виду, что существуют неграфические браузеры, а в графических браузе-
рах пользователи могут отключать загрузку графики, поэтому можно задать и текстовое
описание графики, встроенной в документ, то есть описать изображение или указать раз-
мер и формат графического файла.
При наличии текстового описания пользователь графического браузера сможет
сам решить, стоит ли загружать тот или иной графический файл или лучше не
тратить на это время. Подмена графики текстом осуществляется с помощью ат-
рибута ALT в теге <IMG>.
Пример
<IMG SRC = "logotip.gif" ALT=" [Логотип, gif 18K]">
Ссылки.
321
Графическая карта задается с помощью нескольких тегов. Первым является тег
<МАР> (карта) с атрибутом N A M E для указания имени карты. Имя карты выбирает-
ся как имя переменной. Далее между тегами <МАР> и </МАР> следуют теги <AREA>
(область) для задания горячих областей. Тег <AREA> имеет ряд атрибутов, описы-
вающих собственно ссылку, а также форму и положение горячей области:
• HREF - строка, определяющая адрес ссылки;
• SHAPE - определяет форму области; принимает аргументы:
• "RECT" (прямоугольник);
Q "POLYGONE" (многоугольник);
• "CIRCLE" (круг);
• COORDS - координаты области, которые задаются в виде перечня чисел, разде-
ленных запятыми; весь перечень заключается в кавычки (для прямоугольника
задаются четыре числа - координаты верхнего левого и правого нижнего уг-
лов; для многоугольника задаются координаты каждого угла; для круга зада-
ются три числа - координаты центра и радиус).
После закрывающего тега </МАР> следует указать тег, вставляющий изображение
и реализующий привязку карты к нему, - это уже известный тег <IMG>, в котором
помимо прочих возможных атрибутов используется атрибут связи с картой:
и$ЕМАР="#имя_карты"
В качестве имени карты указывается аргумент атрибута N A M E тега <МАР>.
В нашем примере в основе графической карты ссылок находится топографиче-
ская карта некоторой местности. На ней мы определили прямоугольную и круг-
лую горячие области, соответствующие двум населенным пунктам. При щелчке
на горячей области будет выведен документ северный.htm или южный.htm, содер-
жащий, например, описание соответствующего населенного пункта.
<HTML>
<НЕАО><Т1Т1_Е>Графическая карта</TITLE></HEAD>
Ссылки.
323
Ссылки в пределах одного документа
Иногда оказывается полезным организовать ссылки на разделы одного и того же
документа. Например, на своей странице вы размещаете статью объемом в несколь-
Таблицы
_
325
Листинг П1.3. Код программы, демонстрирующей применение ссылок в пределах одного
документа
<HTML>
<НЕАО><Т1Т1_Е>Ссылки в пределах одного документа</Т1Т1_Е></НЕАО>
<ВООУ>Здесь используются текстовые ссылки на разделы в пределах одного и
того же документа. При щелчке на ссылке окно браузера будет
прокручиваться до тех пор, пока не появится соответствующий ссылке
якорь.
<Р>
<Н2>Содержание</Н2>
<р><р><А НЖЕР = "#Глава1">Глава1. Основы HTML</A>
<BR><A НКЕР="#Глава2">Глава2. Примеры программ</А>
<р><р>
<Н2><А М А М Е = "Глава1">Глава1 , </А>Основы языка HTML</H2>.
В этой главе мы собираемся рассмотреть основные элементы языка HTML На
языке HTML создаются документы, которые могут быть опубликованы в
Интернете. После изучения основных конструкций языка мы подробно
рассмотрим примеры программ (<А НКЕР="#Глава2">см. главу 2</А>) .
<Р>
<Н2><А МАМЕ="Глава2">Глава 2.</А>Примеры программ</Н2>
Здесь мы рассмотрим примеры программ с использованием элементов языка,
которым посвящена
<А HREF="#[7iaBal">rnaBal.</A>
Прежде всего рассмотрим применение текстовых ссылок.
</BODY>
</HTML>
Таблицы
Довольно часто на веб-страницах встречаются таблицы. Простейший пример таб-
личной организации данных- прайс-лист. Однако таблицы можно использовать
просто как способ форматирования текста, поскольку таблица в HTML-докумен-
те может не содержать всех или некоторых разграничительных линий (сетки).
Заметим, что в большинстве случаев элементы текста позиционируются как таб-
личные.
Идея использования таблиц в качестве средства позиционирования проста. Вы
мысленно разбиваете окно на ячейки (клетки) и решаете, какой элемент страни-
цы в какую ячейку поместить, - это хороший способ избавиться от «естественно-
го» расположения элементов друг за другом, которое осуществляет браузер по
умолчанию. Далее будет рассмотрен более «свободный» способ позиционирова-
ния элементов, позволяющий помещать элементы в любое место окна браузера.
Он основан на каскадных таблицах стилей. Однако, как правило, на практике для
позиционирования элементов вполне достаточно использовать простую схему
таблицы.
Таблица представляет собой особую часть HTML-документа. Данные в ней орга-
низованы в виде прямоугольной сетки, которая состоит из вертикальных столб-
цов (колонок) и горизонтальных рядов (строк). Каждая клетка таблицы называ-
ется ячейкой. Ячейки могут содержать текст, грасрику и даже другую таблицу.
Таблицы состоят из трех основных частей: названия таблицы, заголовков столб-
цов и ячеек. Таблица заполняется слева направо, ячейка за ячейкой, начиная с ле-
326.
Приложение 1. Руководство по динамическому HTML
вого верхнего угла и заканчивая правым нижним углом. Каждая ячейка должна
быть заполнена (для создания пустых ячеек используются пробелы).
Описание таблицы в HTML-документе начинается с тега <TABLE> и заканчивает-
ся тегом </ ТАВ1Е>. Если вы хотите, чтобы таблица имела видимую рамку (грани-
цы), используйте атрибут BORDER, например:
<TABLE BORDER>
Атрибут BORDER может принимать аргумент (число), определяющий ширину рам-
ки, например:
<TABLE BORDER=10>
Для задания названия таблицы используется тег <САРТЮМ> с атрибутом выравни-
вания ALIGN, который может принимать значение ТОР или B O T T O M (расположение
названия вверху или внизу таблицы соответственно), например:
<CAPTION ALIGN=TOP> Моя таблица </CAPTION>
Каждый ряд ячеек начинается с тега <TR> и заканчивается тегом </TR>.
Если ряд должен содержать заголовки столбцов таблицы, то используются теги
<ТН> и </ТН>. Если в ячейках должны размещаться данные, то используются теги
<T D> и </TD>.
Теги заголовков и данныхдолжны располагаться между тегами рядов <TR> и </TR>.
Проще говоря, вы сначала определяете таблицу (тег <TABLE>), а затем внутри это-
го определения задаете строки (тег <TR>) и содержимое ячеек (тег <T D> - для дан-
ных, тег<ТН> - для названий заголовков столбцов).
Приведем пример описания простой таблицы, встроенной в некоторый текст.
Обратите внимание на порядок заполнения ячеек таблицы. Сначала определяет -
Я строка заголовков столбцов таблицы. Затем аналогичным образом создаются
строки данных, при этом указывается, какие данные должны располагаться в ячей-
ках таблицы. Строка заголовков столбцов задается так же, как и строка данных.
Отличие лишь в том, что при создании строки заголовков внутри тега <TR> ис-
пользуется тег <ТН>, а при создании строки данных - тег <TD>.
<HTML>
<НЕАО><Т1Т1_Е>Таблицы</Т1Т1_Е></НЕАО>
<BODY>
<Н2>Основные элементы таблиц</Н2>
<Р>
Ниже приведен пример простой таблицы (рис. П1.16).
<Р>
<TABLE BORDER>
<CAPTION ALIGN=TOP>CnHCOK сотрудников</САРТЮМ>
<TR>
<ТН>Имя</ТН><ТН>Должность</ТН><ТН>Оклад</ТН>
</TR>
<TR>
<TD>MBaH</TD><TD>4npeKTop</TD><TD>1000</TD>
</TR>
<TR>
<TD>neTp</TD><TD>ByxranTep</TD><TD>800</TD>
</TR>
<TR>
<TD><t>eflop</TD><TD>Pa6o4MPi</TD><TD>50</TD>
Таблицы
327
</TR>
</TABLE>
</BODY>
</HTML>
Правка g»w ; избранной Сервис
Обновить
Основные элементы таблиц
Ниже приведен пример простой таблицы
Список сотрудников
Имя [Должность |Оклад
...................;..................................с..................
Иван [Директор 1000
[Петр |Бухгалтер [SGO
Федор рабочий |50
I Гогово
Рис. П1.16. Пример простой таблицы
Несколько ячеек можно объединить в одну как по горизонтали, так и по вертика-
ли. Объединение по столбцу применяют в том случае, когда необходимо, чтобы
соседние столбцы имели общий заголовок. Объединение по рядам делается тог-
да, когда содержимое нескольких ячеек подряд одинаково. Для объединения яче-
ек используются теги CO LSPAN и R O W S P A N (по столбцам и по рядам соответствен-
но). Аргументами этих атрибутов будет количество объединяемых столбцов или
рядов. Вот пример объединения ячеек:
<HTML>
<HEAD><TITLE>Ta6nnubi</TITLE></HEAD>
<BODY>
<Н2>Основные элементы таблиц</Н2>
<Р>
Ниже приведен пример простой таблицы с объединенными ячейками (рис. П I 1.17).
<Р>
<TABLE BORDEFO
<CAPTION А1ЛСМ=ТОР>Список сотрудников</САРТЮМ>
<TR><TH С015РАМ=2>ИМЯ И должность</ТН><ТН>Оклад</ТН>
</TR>
<TR><TD>MBaH</TD><TD>4HpeKTOp</TD><TD>1000</TD>
</TR>
<TR><TD>rieTp</TD><TD>ByxranTep</TD><TD>800</TD>
</TR>
<ТЯ><ТО>Федор</ТО><ТО ROWSPAN=2>Pa6o4iifi</TD><TD>50</TD>
</TR>
328
Приложение 1. Руководство по динамическому HT ML
<TR><TD>BacnnMU</TD><TD>70</TD>
</TR>
</TABLE>
</BODY>
</HTML>
: • йн(. {ранка Вид Избранное Сервис Спреи
V т
ШФ- Остановить Обновит
••• • -______i
Основные элементы таблиц
Ниже приведен пример простой таблицы с
объединенными ячейками
Список сотрудников
|Имя н должность Юклад
рЭван [Директор J1000
{Бухгалтер 1800
Рис. П1.17. Пример простой таблицы с объединенными ячейками
Можно управлять шириной как всей таблицы, так и каждой отдельной ячейки.
Ширину всей таблицы можно задать как в пикселах, так и в процентах от ширины
окна. Ширину ячеек можно задать также двумя способами: в пикселах и в про-
центах от ширины таблицы. Следует иметь в виду, что ячейки в одном столбце
имеют одинаковую ширину, а ячейки одного ряда - разную ширину. Ширина таб-
лицы задается атрибутом WIDTH в теге <ТАВ1_Е>, ширина ячейки указывается тем
же атрибутом в теге <ТН> или <TD>.
<HTML>
<HEAD><TITLE>Ta6nnubi</TITLE></HEAD>
<BODY>
<Н2>Основные элементы таблиц</Н2>
<Р>
Ниже приведен пример таблицы с объединенными ячейками и заданными разме-
рами (рис. П1.18).
<TABLE BORDER WIDTH=400>
<CAPTION А1ЛСЫ=ТОР>Список сотрудников</САРТЮМ>
<TR>
<TH COLSPAN=2 ИЮТН=75%>Имя и должность</ТН> <ТН>Оклад</ТН>
</TR>
Таблицы
329
<TR>
<TD>MBaH</TD><TD>AMpeKTop</TD><TD>1000</TD>
</TR>
<TR>
<TD>fleTp</TD><TD>ByxranTep</TD><TD>800</TD>
< /TR>
<ТО>Федор</ТО><ТО ROWSPAN=2>Pa6o4Mii</TD><TD>50</TD>
</TR>
<TR>
<TD>BackmMii</TD><TD>70</TD>
</TR>
</TABLE>
</BODY>
</HTML>
3><uiii Прлакя Вт Игранное Сервис £пр«ика
Остановить Обнбтпк Домой
Основные элементы таблиц
Ниже приведен пример таблицы с объединенными ячейками
и заданными размерами
Список сотрудников
Имя и должность
| Оклад
Иван
Директор
ПООО
ретр
[Бухгалтер
1800
[Федор
щ
Василий
Рис. П1.18. Пример таблицы с объединенными ячейками и заданными размерами
Текст и графику внутри ячеек таблиц можно выравнивать. Горизонтальное и вер-
тикальное выравнивание содержимого рядов задается с помощью атрибута ALIGN
в теге <TR>. Выравнивание в отдельных ячейках выполняет атрибут AL IGN в тегах
<ТН> и <TD>. Атрибут AL IGN может принимать аргументы LEFT (по левому краю),
R IIGHT (по правому краю) и CENTER (по центру).
Примеры использования атрибута ALIGN:
<TR ALIGN=LEFT>
<тн wiDTH=25% ALIGN=CENTER>HMH и должность</тн>
Для определения дизайна рамок таблицы в браузере Internet Explorer можно ис-
пользовать атрибут FRAME тега <TABLE>. Далее перечислены возможные аргумен-
ты атрибута FRAME, указывающие способы изображения рамки:
330
Приложение 1. Руководство по динамическому HTML
• BOX—все четыре стороны рамки;
• ABOVE - только верхняя часть рамки;
• BELOW - только нижняя часть рамки;
• HSIDES - горизонтальные части рамки сверху и снизу;
• VSIDES - только левая и правая вертикальные части рамки;
• LHS - только левая часть рамки;
• RHS-только правая часть рамки;
• VOID - не изображать внешнюю рамку.
Разделительные линии между столбцами и рядами таблицы описываются атри-
бутом RULES в теге <TABLE>. Атрибут RULES может принимать следующие значе-
ния, задающие способ изображения разделительных линий:
• ALL - все вертикальные и горизонтальныелинии;
• ROWS - только горизонтальныелинии между рядами;
Сервис
Основные элементы таблиц
Различный дизайн таблиц
Список сотрудников
Имя и долж
Директор
Петр Бухгалтер
Ш
Список сотрудников
Имя и должность Оклад
|Иван Директор 1000
;Петр Бухгалтер 800
|Фед ор Рабочий 50
Василий |70
•J ! щ* ,|■■■■
Рис. П1.19. Пример различного дизайна таблиц
Таблицы • 33 1
' • CO LS - только вертикальные линии между столбцами;
• NONE - не изображать разделительные линии.
В листинге П1.4 приведен пример управления дизайном таблиц (рис. П1.19).
Листинг П1.4. Пример управления дизайном таблиц
<HTML>
<НЕАО><Т1Т1_Е>Таблицы</TITLE></HEAD>
<BODY>
<Н2>Основные элементы табпиц</Н2>
<Р>Различный дизайн таблиц
<Р>
<TABLE BORDER=15 FRAME=BOX RULES=ROWS WIDTH=300>
<CAPTION ALIGN=TOP>CnncoK сотрудников</САРТЮМ>
<TR>
<TH COLSPAN=2>ИМЯ И должность</ТН><ТН>Оклад</ТН>
</TR>
<TR>
<TD>MBaH</TD><TD>AMpeKTop</TD><TD>1000</TD>
</TR>
<TR>
<TD>neTp</TD><TD>ByxranTep</TD><TD>800</TD>
</TR>
<TR>
<ТО>Федор</ТО><ТО ROWSPAN=2>Pa6o4M</TD><TD>50</TD>
</TR>
<TR>
<TD>BacMnMii</TD><TD>70</TD>
</TR>
</TABLE>
<TABLE BORDER=10 FRAME=BOX RULES=COLS WIDTH=300>
<CAPTION ALIGN=TOP>CniicoK сотрудников</САРТЮМ>
<TR>
<TH С01_5РАМ=2>Имя и должность</ТН><ТН>Оклад</ТН>
</TR>
<TR>
<ТО>Иван</ТО><ТО>Директор</TD><TD>1000</TD>
</TR>
<TR>
<TD>rieTp</TD><TD>ByxranTep</TD><TD>800</TD>
</TR>
<TR>
<ТО>Федор</ТО><ТО ROWSPAN = 2>Pa6o4MU</TD><TD>50</TD>
</TR>
<TR>
<TD>BacnnnPi</TD><TD>70</TD>
</TR>
</TABLE>
</BODY>
</HTML>
В следующем примере используем таблицу без рамок для размещения различных
элементов на странице. В ячейки помещены текстовые ссылки, изображения и чи-
сло 1000, а некоторые ячейки остались пустыми (рис. П 1.20). Для задания нужного
расстояния между элементами следует использовать атрибуты выравнивания.
Пока еще нет другого способа разместить несколько элементов в одном ряду, кроме
Стили.
333
Если в таблице имеются рамки, то можно указать и их цвет с помощью атрибутов:
• B O R D E R C O L O R - цвет всей рамки;
• B O R D E R C O L O R L I G H T - цвет светлой части рамки;
• B O R D E R C O L O R D A R K - цвет темной части рамки.
Эти атрибуты вставляются в тег <TABLE>. Чтобы они действительно работали, не-
обходимо наличие еще и атрибута BORDER, задающего ширину рамки. Ниже при-
водится пример использования атрибута цвета в различных тегах таблицы:
<TABLE BGCOLOR="#F0F0F0" BORDER=10 BORDERCOLOR="#808080"
BORDERCOLORLIGHT="#707070" BORDERCOLORDARK="#202020">
<TR BGCOLOR="BLUE">
<ТН>Имя</ТН><ТН>Адрес</ТН>
</TR>
<TR>
<TD BGCOLOR="YELLOW">MBaH</TD><TD>r.Санкт-Петербург</Т0>
</TR>
</TABLE>
Задать шрифт для текстов внутри ячеек таблицы можно с помощью тегов заго-
ловков и физических стилей внутри тегов <TD>:
<TD BGCOLOR="YELLOW"><H2>MBaH</H2></TD>
Теперь вы имеете общее представление о том, зачем нужны таблицы и как их со-
здавать. Заметим, что таблицы удобно готовить в таких редакторах, как FrontPage
и Dreamweaver. С их помощью визуальными средствами можно начертить табли-
цу и вставить в ее ячейки необходимые данные. Для этих операций редактор
Dreamweaver даже удобнее, чем FrontPage.
Стили
Существует еще один прием позиционирования элементов для достижения визу-
альных эффектов, которые могут украсить страницу и привлечь к ней внимание.
Этот прием основан на определении пользовательских стилей и задании таблицы
стилей. Таблица стилей - это просто некоторая структура описания свойств эле-
мента. Не ищите здесь прямоугольной сетки. Если таблица стилей задана, то раз-
личные документы могут просто ссылаться на эту таблицу и не содержать большое
количество атрибутов в тегах форматирования типа <Hl>, <FACE> и т. п. Таблицы
стилей (так называемые Cascading Style Sheets - CSS) содержат описание фор-
мата части или всего текста, координаты расположения элементов и другие пара-
метры. Задание стиля обеспечивается с помощью и тега <STYLE>, и атрибута STYLE
334
Приложение 1. Руководство по динамическому HTML
Используя стили, можно позиционировать элементы страницы (например, тек-
сты и графику), указав координаты их положения. И это, пожалуй, самое важное,
что дают стили. Кроме того, таблицы стилей часто применяются при создании
динамических страниц.
С этого момента способ изложения материала несколько изменится. Теперь мы
больше будем рассказывать об идеях, иллюстрируя их примерами, и меньше уде-
лять внимание полноте определений. При этом все примеры программ будут, как
и прежде, работоспособными. Даже если вы не до конца поймете теоретический
материал, вы все равно можете использовать приведенные ниже примеры в своих
разработках. Для этого следует просто скопировать тексты или отдельные их фраг-
менты в ваш собственный HTML-документ и адаптировать к своей конкретной
задаче путем коррекции отдельных параметров.
Теги <STYLE> и </S TYLE> используются внутри тегов заголовка файла <HEAD>
и </HEAD>, а атрибут STYLE - в теге заголовка раздела (<Н1>, <Н2>,...,<Н6>), а так-
же в теге <BODY>, в теге выделения фрагмента <DIV> и многих других.
Применение тега <STYLE>:
<HEAD>
<STYLE>
Тег {свойство!: значение! ; свойство2 : значение2,..., свойством:
значением }
</STYI_E>
</HEAD>
Здесь в фигурных скобках через точку с запятой перечисляются свойства и их
значения, причем между свойством и его значением ставится двоеточие. При этом
тег, указываемый перед описанием в фигурных скобках, пишется без угловых
скобок.
В следующем примере определяются стили заголовков первого и второго уров-
ней путем использования тега STYLE
<HTML>
<HEAD>
<STYLE>
HI {Font-size:48pt;Color:RED}
H2 {Font-size:20pt;Color:BLUE}
</5TYLE>
</HEAD>
<BODY>
<Н1>Это стиль HI. Цвет - красный</Н1>
<P>
<Н2>Это стиль Н2. Цвет - синий</Н2>
<Р>
Это - обычный стиль по умолчанию
</BODY>
</HTML>
Мы изменили стили HI и Н2, принятые по умолчанию: назначили размеры
(48 и 30 точек) и цвета (красный и синий) для всех текстов, которые окажутся
внутри этих тегов. Существуют и другие свойства. Например, свойство FONT-
FAMILY HELVETICA задает гарнитуру шрифта HELVETICA
Обратите внимание на то, что внутри тега <ST YLE> указываются определения сти-
лей тегов, которые записываются без угловых скобок.
Стили
335
Можно определить стиль для тега B O D Y . Тогда весь текст, находящийся между те-
гами <BODY> и </BODY>, будет автоматически отформатирован в соответствии
с перечисленными свойствами.
Если мы хотим задать один и тот же стиль сразу для нескольких тегов, то перед
определением стиля (всего, что заключено в фигурные скобки) можно указать
перечень тегов (без угловых скобок), разделенных запятыми. В следующем при-
мере задается одинаковый стиль для заголовков первого и второго уровней:
<HTML>
<HEAD>
<STYLE>
HI, H2 {font-size:48pt;co\or:RED}
</STYLE>
</HEAD>
<BODY>
<Н1>Это стиль HI . Цвет - красный</Н1>
<P>
<Н2>Это стиль Н2, такой же, что и HI. Цвет - красный</Н2>
Это - обычный стиль по умолчанию
</BODY>
</HTML>
эйл Qpawa фдд ^збрандое СеИшс С иранка
Осганояшь Обновить Домой Поиск
Пример каскадного стиля
всякой гики
используя только стили текста
Рис. П1.21. Пример каскадного стиля
336.
Приложение 1. Руководство по динамическому HTML
Мы можем создать таблицы стилей, закрепив за ними имя. Это имя задается как
обычное имя, но с точкой в качестве первого символа. Тогда в тегах мы можем
обращаться к этой таблице по ее имени, используя атрибут С1_А5$=имя_.стиля, где
имя стиля употребляется уже без точки.
Например, мы можем задать стиль так:
<STYLE>
mystyle {color:black; font-family: Arial}
</5TYLE>
А стиль заголовка второго уровня можно задать где-нибудь в тексте программы
таким образом:
<Н2 CLASS=mystyle>
Рассмотрим пример (листинг П 1.5), создающий эффект, которого без задания сти-
ля можно было бы достичь только с помощью графики (рис. П1.21). Мы наклады-
ваем тексты друг на друга. Эта возможность далее будет использована для создания
эффекта выпуклого текста (так называемого SD-эффекта). Кроме того, возмож-
ность наложения (частичного перекрытия) фрагментов страницы часто исполь-
зуется в дизайне реальных страниц. В данном примере применяется тег <DIV> для
выделения фрагмента HTML-документа. Обратите внимание, как внутри опре-
деления стиля тега BO DY определяются другие стили: с именами тень, основа, слой!
и слой2. Это и есть каскадные таблицы стилей.
■
Листинг П1.5. Создание каскадного стиля
<HTML>
<HEAD>
<Т1Т1Е>Пример CSS</TITLE>
<STILE>
BODY {color: black; font-size:16px ; font-family : Arial}
.тень {color: #DBDBDB; text-align:right; weight: medium; margin-top:
30px; font-size:270px;line-height: 270px;
font-family: Times}
.основа {color: red; weight: 900; margin-top: -230px; font-size
line-height: 250px; font-family: Times}
.слой! {color: black; margin-top: -130px; weight: medium; ont-size:65px;
line-height: 65px; font-family: Arial}
.слой2 {color: green; margin-top: 30px; weight: medium;
line-height: 45px; font-family: Arial}
</STYLE>
</HEAD>
<BODY>
Пример каскадного стиля
<CENTER>
<TABLE WIDTH=500 CELLPADING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD ALIGN=CENTER VALIGN=TOP>
<DIV CLASS=TeHb>Mbi</DIV>
<DIV CLASS=ocHOBa>Mbi</DIV>
<DIV С1А55=слой1>сделали это без всякой графики</01У>
<DIV С1_А55=слой2>используя только стили текста</01У>
</TD></TR>
</TABLE>
</CENTER>
Стили.
337
Позиционирование элементов
Выше мы говорили о том, что позиционировать элементы страницы можно и пу-
тем использования таблиц. Но это же можно делать и с помощью стилей. Среди
параметров стиля имеются специальные свойства для позиционирования:
338 _ Приложение 1. Руководство по динамическому HTML
• left - для задания расстояния в пикселах от левого края окна(х-координата);
• top - для задания расстояния в пикселах от верхнего края окна (у-коорди-
ната);
• z-index - для указания порядка, в котором элементы будут перекрывать друг
друга; это новое измерение, элементы с большим z-индексом будут появлять-
ся над элементами с меньшим z-индексом.
Конечно, при использовании этих трех свойств не создается эффекта трехмерно-
го пространства, но это уже нечто большее, чем двухмерная плоскость. В этом
случае говорят о 2,5-мерном пространстве.
Кроме свойств-координат нам понадобится свойство position, которое в сочета-
нии со свойствами left и top позволяет устанавливать элементы в определенные
позиции окна. Свойство position может принимать три значения.
• absolute - заданные свойства L e ft и top устанавливают элемент в место с коор-
динатами х и у относительно верхнего левого угла контейнера (объекта, содер-
жащего данный элемент). Если они определены для элемента вне контейнера,
то началом отсчета координат будет верхний левый угол страницы. Заметим,
что положение элемента не зависит от положения его тега внутри HTML-до-
кумента.
• relative - элемент будет установлен в соответствии с тем, в каком месте исход-
ного текста он находится; это значение установлено по умолчанию. Например,
если элемент находится в трех строках от начала его выделения в тексте доку-
мента, то по умолчанию считается, что свойство позиционирования имеет зна-
чение relative, а свойства координат left и top - нулевые значения. Ненулевые
значения свойств left и top сдвигают элемент относительно исходного поло-
жения.
• static - элемент устанавливается в фиксированное положение относительно
фона и не будет перемещаться при прокручивании страницы.
Следующий пример показывает использование свойства z-index. Хотя в тексте
программы изображение описано выше остальных элементов, за счет присвоения ей
индекса с большим номером она перемещается поверх первого текста (рис. П1.22).
Таким образом, использование свойства z-index освобождает от естественного
порядка упоминания элементов в тексте HTML-программы.
^ П TnL •*
<НЕАО><Т1Т1Е>Позиционирование</TITL></НЕAD>
<BODY BGCOLOR="AQUA" >
<DIV STYLE="posit
index :2">
<IMG SRC="logotip.gif">
<DIV STYLE = "position:absolute; top:10;lett:15;width;400;height:100">
color : гей">Первый позиционированный текст, который
накладывается на рисунок и на второй текст</Н1>
<DIV STYLE=" posit ion: absolute; top : 60; left: 300; width: 50; heigh t: 100 ">
<H1 5TYLE="color : Ыие">Второй позиционированный текст</Н1>
</BODY>
</HTML>
Стили 339
Рис. П1.22. Пример позиционирования элементов
При позиционировании элементов может оказаться, что размеры элемента пре-
вышают размеры фрагмента (отводимой области, заданной в нашем примере тегом
<DIV>). Например, текст или изображение не помещаются полностью в выделен-
ный для них прямоугольник. На этот случай имеется свойство overflow (перепол-
нение).
Свойство overflow может иметь три значения:
• попе (ничего) - если элемент и выйдет за пределы фрагмента (отведенного
для него места), он все равно будет показан;
• clip - выступающие за границы фрагмента части элемента будут обрезаны;
• scroll - будет использована прокрутка.
В следующем примере используется свойство overflow для создания механизма
прокрутки первого текста (рис. П1.23):
<HTML>
<НЕАО><Т1Т1Е>Позиционирование</Т1Т1_Е></НЕАО>
<BODY BGCOLOR="AQUA">
<DIV STYLE="position:absolute; top:0;lett:70;width: 50;height:100">
<IMG SRC="logotip.gif">
<DIV STYLE="position:absolute;
top: 10; left: 15 ;width:220;height:120;overflow:scroll">
<H1 ST Y LE = "color: гес!">Первый позиционированный текст, который
накладывается на рисунок и на второй текст</Н1>
<DIV STYLE="position:absolute; top: 6 0 ; l ef t: 3 0 0 ; wi d t h : 5 0 ; h e i g h t: 1 0 0 " >
<H1 STYLE="color:Ыие">Второй позиционированный текст</Н1>
</BODY>
</HTML>
340
Приложение 1. Руководство по динамическому HTML
Правка- Вид бранное- СР в и s
jJ Ш. ": Aapec, j :^Яёрех0д-..:
позиционированный
текст
Рис. П1.23. Использование свойства overflow для создания механизма прокрутки
Понятно, что все рассмотренные выше страницы-уродцы создавались лишь с од-
ной целью - продемонстрировать возможности языка, предоставляемые для по-
зиционирования элементов, а не показать, что можно делать красивые вещи. Вы сами
должны решить, какие средства и с какой целью использовать на своей веб-странице.
Статические фильтры
Фильтры - это эффекты изменения внешнего вида графики и текста на страни-
це. С помощью фильтров вы можете отражать тексты и графику, создавать эф-
фект движения, как это делается в графических редакторах. Другими словами,
фильтр - это трансформация исходного изображения по определенным прави-
лам (алгоритмам). Существуют статические и динамические фильтры. Статиче-
ские фильтры изменяют внешний вид элемента, оставляя его неподвижным.
Динамические фильтры позволяют трансформировать графический элемент со
скоростью, задаваемой пользователем.
Сначала рассмотрим статические фильтры. Статический фильтр можно задать
как свойство в таблице стилей, используя запись вида:
filter: название_фильтра
или, при наличии параметров, такую запись:
filter: название_фильтра(параметр!,параметр2
В языке HTML (версии 4) имеется 14 статических фильтров. Перечислим те из
них, которые используются без параметров и чаще других:
• blur - создает эффект движения объекта;
• fliph - отражает объект симметрично относительно центральной горизонталь-
ной оси;
Стили
341
• flipv - отражает объект симметричноотносительно центральной вертикальной оси;
• wave - выполняет синусоидальное преобразование объекта вдоль вертикаль-
ной оси;
• Хгау - изменяет глубину цвета объекта и отрисовывает черно-белым, делая его
похожим на рентгеновский снимок («рентгеновское изображение»).
Ниже приводится код программы, которая выводит графический файл и текст
сначала без фильтра, а затем с фильтрами flipv, fliph и blur. Результат работы этой
программы показан на рис. П1.24. Фильтр flipv позволяет получить вертикальное
отражение изображения и текста, фильтр fliph - горизонтальное отражение,
а фильтр blur - размытие. Обратите внимание, что фильтр blur, примененный
к тексту, создает эффект трехмерности, то есть текст как бы отбрасывает тень.
п Ораика Лад £$р№с {^правка
а
Домой
и
Поиск
y|
Фильтр
фыирхЬ
rfqift дтагшФ
Рис. П1.24. Применение фильтров flipv, fliph и blur
<HTHL>
<НЕАО><Т1Т1_Е>Фильтры< /TITLE X/ НЕ АО>
<STYLE>
P {position : absolute;top:0;left:190;font-size:80}
</5TYLE>
<BODY>
342 Приложение 1. Руководство по динамическому HTML
<IMG STYLE="position:absolute;width:150;height:100" SRC="world.gif">
<IMG
STYLE="posit ion:absolute;top:120;left:10;width:150;height:100;filter:flipv"
SRC="world.gif ">
<IMG
STYLE="posit ion absolute;top:230;left:10;width:150;height:100;filter:fliph"
SRC="world.gif ">
<IMG
STYLE="position absolute;top:340;left:10;width:150;height:100;filter:blur"
5RC="world.gif ">
<Р>Фильтр</Р>
<P STYLE="top:130;fiIter:fliру">Фильтр flipv</P>
<P STYLE="top:240;filter:fliph">0MnbTp fliph</P>
<P STYLE="top:360;fiIter:Ыиг">Фильтр blur</P>
</BODY>
</HTML>
Покажем работу еще двух фильтров: Хгау и Wave (рис. П1.25).
Файл Правка Вид
т
• Осtunfjfcdniь Опн-ошить Ломом ' •••: Поиск ••
Ш1о11 докуменшЖнигаУте1 ?.|1ип
Фильтр
Фильтр Хгау
Фильтр Wave
Рис. П1.25. Фильтры Хгау и wave не воздействуют на тексты
<HTML>
<НЕАО><Т1Т1Е>Фильтры</TITLE></HEAD>
<STYLE>
р {position:absolute;top:0;left:190; font-size:48}
</STYLE>
<BODY>
on;absolute;width:150;height: 100" SRC="world.gif"
Стили
343
<IMG
n: absolute; top: 120 ; left: 10 ; w-idth: 150 ; height: 100; filter :Xray"
SRC="world.gif">
<IMG
STYLE="posit ion:absolute;top:230;left:10;width:150;height:100;filter:Wave"
SRC="world.gif ">
<Р>Фильтр</Р>
<P STYLE="top:130;filter:Хгау">Фипьтр Xray</P>
<P STYLE="top:240;fHter:Wave">OnnbTpWave</P>
</BODY>
</HTML>
Динамические фильтры
Эффекты постепенного появления (исчезновения) графического изображения
и преобразования одного изображения в другое можно получить с помощью сов-
местного применения динамического фильтра и сценария. Разумное использова-
ние таких эффектов украшает веб-страницу. Существует несколько способов пре-
образований. Эти способы заранее определены, поэтому от вас требуется лишь
указать номер выбранного способа.
В табл. П1.4 приведены названия и номера превращений.
Т Т иаб п ли п ц ра П1.4.е Типы воздействия фильтров и их нН о о м м е р е ра
Ном'ер фильтра
Стягивающийся прямоугольник
О
Расширяющийся прямоугольник
1
Стягивающийся круг
2
Расширяющийся круг
3
Стирание вверх
4
Стирание вниз
5
Стирание вправо
б
Стирание влево
Вертикальные жалюзи
8
Горизонтальные жалюзи
9
Сужающиеся клетки
10
Закрывающаяся шахматная доска
11
Случайный наплыв
12
Вертикальное деление внутрь
13
Вертикальное деление наружу
14
Горизонтальное деление внутрь
15
Горизонтальное деление наружу
16
Стирание влево-вниз
17
Стирание влево-вверх
18
Стирание вправо-вниз
19
344 1. Руководство по динамическому HTML
Таблица П1.4 (продолжение)
Тип превращения Номер фильтра
Стирание вправо-вверх 20
Случайные горизонтальные полосы 21
Случайные вертикальные полосы 22
Случайный выбор номера (из 0-22) 23
В следующем примере рисунок с изображением карты мира постепенно стано-
вится видимым через открывающиеся вертикальные жалюзи (рис. П1.26). Изо-
бражение из файла word.gif сначала невидимо (свойство visibility:hidden таблицы
стилей). В теге <DIV> применен динамический фильтр revealtrans, управляющий
появлением изображений. Сценарий содержит одну функцию dyn_filter(), кото-
рая применяет фильтр (метод applyQ), делает объект видимым (свойству visibility
присваивается значение "visible"), устанавливает тип преобразования (Transition=8)
и задает длительность преобразования 2 с (метод playQ, которому передан число-
вой параметр 2). Далее определено, что эффект постепенного появления картин-
ки начнется сразу же после загрузки страницы. Это достигается привязкой функ-
ции dyn_filter() к событию ONLOAD в теге <BODY>.
Файл Правка Вцд Иэвраннов Сервис Cn
ш
Динамическое преобразование картинки
с помощью фильтра
Рис. П1.26. Динамическое преобразование картинки с помощью фильтра
«вертикальные жалюзи»
<НТМ1_>
<HEAD> <TITLE> Динамический фильтр </TITLE>
<SCRIPT >
function dyn_filter()
Стили
345
Imagel.filters(O) .apply()
II.style.visibility="visible"
Imagel.filters(O).Transition8
Imagel.filters(Q).play(2)
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="dyn_filter()">
<DIV ID=Imagel STYLE="position:absolute;
height:200;width:300;left:10;top:10;filter:revealtrans">
<IMG ID=I1 STYLE="posi tion : absolute;
height:200;width:300 ; visibil ity: hidden" SRC=world.gif >
<H3 STYLE="position:absolute;top:210">
Динамическое преобразование картинки с помощью фильтра
</НЗ>
</BODY>
. </HTML>
Заметим, что Imagel - это имя (идентификатор) элемента-контейнера, заданно-
го тегом <DIV>. Контейнер содержит единственный элемент (изображение), но мы
использовали его только затем, чтобы применить к нему метод applay(), который
не поддерживается элементом, созданным тегом <MG>. Filters - коллекция всех
фильтров. Фильтр (единственный) указан номером в коллекции: Imagel.filters(O).
Если в приведенной выше программе изменить тип преобразования, например,
на 3 (расширяющийся круг) путем замены в теле функции соответствующей за-
писи Imagel.filters(0).Transition=3,то получится эффект, показанный на рис. П1.27
(изображение постепенно появляется в расширяющемся круге).
Правка
....Л/К
Остановить Обновить
Динамическое преобразование кар тинки
с помощью фильтра
Г Готово оI Мой компьютер
Рис. П1.27. Динамическое преобразование изображения с помощью фильтра
«Расширяющийся круг»
Тег <МЕТА>
361
• D O C U M E N T - S T A T E - статус документа. Данный параметр управляет частотой ин-
дексации вашей страницы поисковыми серверами и может принимать два зна-
чения:
• STATIC (документ статичен, то есть не меняется, и, следовательно, индекси-
ровать его нужно только один раз).
Пример
<МЕТА NAME="DOCUMENT-STATE" CONTENT="STATIC">
• D Y N A M IC (для часто изменяющихся документов, которые нужно реиндекси-
ровать).
Пример
<МЕ ТА NAME=DOCUMENT-STATE" CONTENT="DYNAMIC">
• ROBOTS - управление процессом индексации.
Возможные варианты:
О INDEX - возможность индексирования данного документа (иначе - NOINDEX);
• F O L L OW - возможность индексирования всех документов, на которые есть
ссылки в данном HTML-файле (иначе NOFOLLOW);
• ALL - одновременное выполнение условий INDE X и F O L L O W ;
О NONE - одновременное выполнение условий NOINDEX и NO FOLLOW
Пример
<МЕТА NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
• RESOURCE-TYPE - тип ресурса. Для обычных HTML-документов значение это-
го параметра устанавливается равным "DOCUMENT.
Пример
<МЕТА NAME="RESOURCE-TYPE" CONTENT="DOCUMENT">
• UPDATED - дата обновления страницы.
Пример
<МЕТА NAME="UPDATED" CONTENT="25.11.01">
• URL -расположение главной страницы. Базовый URL определяет, какой доку-
мент следует индексировать (чтобы не обрабатывать «зеркала»).
<МЕТА NAME="KEYWORDS" LANG="ru" CONTENT="meta,tag">
• AUTHOR - информация об авторе данного документа,
i • C O P Y R I G H T - информация об авторских правах.
• GENERATOR - программа, создавшая HTML-код.
Допустимо, но не обязательно добавлять в метатеги атрибут LANG, указывающий
язык данных.
Пример
<МЕТА NAME="KEYWORDS" LANG="ru" CONTENT="meta,tag">
Приложение 2. Справочник
по HTML
Теги HTML
Здесь приведены наиболее часто употребляемые теги HTML, упорядоченные по
категориям.
Структура документа
Тег Описание
Определяет комментарий, который игнорируется анализатором HTML
<!DOCTYPE> Объявляет тип и формат содержимого документа
Устанавливает URL-адрес исходного документа
Определяет начало основной части страницы
<СОММЕМТ> Описывает комментарий, который не отображается
<DIV> Осуществляет логическое разделение документа, создавая фрагмент внутри него
<НЕАО> Заключает в себе теги, содержащие невидимую информацию о документе
Идентифицирует документ как содержащий элементы HTML
Служит для обозначения связей между документами
Предоставляет различные типы невидимой информации и инструкций для
браузера
<NEXTID> Определяет параметр в теге <HEAD> для использования текстовыми
редакторами
<SPAN> Используется с таблицей стилей для определения нестандартных атрибутов
текста на странице
<STYLE>______Заключает в себе таблицу стилей_________________________________________
Заголовки и названия
Тег Описание
<Н1> Заголовок 1-го уровня
<Н2> Заголовок 2-го уровня_____________________________________
Теги HTML
363
Тег Описание
<НЗ> Заголовок 3-го уровня
<Н4> Заголовок 4-го уровня
<Н5> Заголовок 5-го уровня
<Н6> Заголовок 6-го уровня
Название документа, показываемое в заголовке окна браузера
Абзацы и строки
Тег Описание
<BR> Вставляет конец строки
<CENTER> Выравнивает заключенные в него компоненты по центру
<HR> Помещает на страницу горизонтальную перекладину
<NOBR> Запрещает обтекание текстом
<Р> Обозначает абзац
<WBR>________Вставляет мягкий перенос строки в блок текста в теге <NOBR>
Стили
Тег
<ADDRESS>
<В>
<BASEFONT>
<BIG>
<CODE>
<FONT>
<KBD>
<LISTING>
<PLAINTEXT>
<PRE>
<S>
<SAMP>
Описание
Определяет информацию об адресе, контрольной сумме и авторстве
Делает начертание текста полужирным, где это возможно
Устанавливает шрифт, используемый по умолчанию
Задает размер шрифта на 1 пункт больше текущего
Обозначает отступ в тексте
Выделяет текст курсивом; часто используется как знак авторского права
Вставляет код в виде текста с моноширинным шрифтом
Используется для пометки терминов, используемых в первый раз
Выделяет текст, обычно курсивом
Определяет вид, размер и цвет шрифта для текста
Делает начертание текста курсивным, где это возможно
Используется для отображения на экране текста, который должен ввести
пользователь
Возвращает текст с моноширинным шрифтом
Представляет текст моноширинным шрифтом без обработки тегов
Представляет текст моноширинным шрифтом
Выводит текст зачеркнутым
Показывает текст как пример программы
_Пр0О0ЛЖ€Н11€
л
Теги HTML
365
Теги Описание
<THEAD> Определяет набор строк, используемых как заголовок таблицы
<TR> Определяет строку таблицы
Ссылки
Тег Описание
<А> Определяет гиперссылку; обязательно задавать атрибут HREF или NAME
<А HREF="url"> Определяет гиперссылку на элемент другого документа
<А> МАМЕ="имя"> Определяет гиперссылку на элемент этого же документа______________
Графика, объекты, мультимедиа и сценарий
Описание
<АРР1_ЕТ> Помещает апплет Java или другой выполняемый элемент на страницу
<AREA> Определяет форму активного участка изображения-карты клиента
<BGSOUND> Определяет фоновое звуковое сопровождение страницы
Внедряет документы любого типа на страницу для просмотра соответствующим
приложением
Используется для вставки графического элемента или видеоклипа на страницу
<МАР> Задает коллекцию активных участков изображения-карты клиента
<MARQUEE> Создает на странице бегущую строку текста
<NOSCRIPT> Определяет, что будет показывать браузер, не поддерживающий сценарии
Встраивает на страницу объект или другой элемент управления, не встроенный
в HTML
Используется в теге <OBJECT> для установки свойств объекта
<SCRIPT> Определяет раздел страницы, который должен обрабатываться интерпретатором
_____________кода сценария__________________________________________________________
Формы
Тег Описание
<BUTTON> Создает на странице кнопку HTML
<FIELDSET> Рисует прямоугольник вокруг содержащихся в нем элементов для обозначения
связанных объектов
Описывает форму на странице, которая может содержать другие компоненты
и элементы управления
<INPUT> Задает параметры элемента управления формы
<LABEL> Определяет текст метки или заголовка для блока элементов управления
"""""""""" жение
366
Приложение 2. Справочник по HTML
Тег Описание
<LEGEND> Определяет текст, помещаемый в прямоугольник, созданный тегом <FIELDSET>
<OPTION> Обозначает одну из альтернатив в элементе SELECT
<SELECT> Определяет поле списка или раскрывающийся список
<TEXTAREA> Обозначает поле ввода, состоящее из нескольких строк
Фреймы
Тег Описание
<FRAME> Определяет конкретный фрейм внутри набора фреймов
Определяет набор фреймов, который содержит фреймы или подчиненные
наборы
Используется для создания встроенных «плавающих» фреймов на странице
Определяет, что именно будет показывать браузер, не поддерживающий
________________фреймы___________________________________________________________
Таблицы стилей
Единицы измерения
Есть две основные категории единиц: относительные и абсолютные (плюс про-
центные). Лучше использовать относительные единицы, поскольку определение
абсолютных требует знания конкретной системы отображения: на какой прин-
тер, монитор или другое устройство будет выводиться информация.
Относительные единицы
Значения em, en и ex соответствуют типографским терминам и определяют соот-
ношение с размерами других символов; рх обозначает пикселы - элементы экра-
на, размер которых зависит от установок монитора и видеокарты пользователя.
В Internet Explorer начиная с версии 4 em и ех заменены на pt, en - на рх.
Абсолютные единицы
Это in, cm, mm, pt, pc: in дает значение в дюймах, cm - в сантиметрах, mm - в мил-
лиметрах, pt - в пунктах (72 пункта на дюйм) и рс - в пиках (1 пикаравна 12 пт).
Эти единицы стоит использовать только в том случае, если вы знаете, каким бу-
дет размер рабочей области устройства вывода, так как браузеры будут пытаться
показать все в натуральную величину.
Проценты
Эти цифровые значения задаются как числа (с десятичной точкой или без нее),
показывающие отношение к единице длины (обычно размер шрифта текущего
элемента).
Таблицы стилей.
_367
Свойства динамического
Свойства шрифта
Свойство font
Свойство
Значения
Значение по умолчанию
Поддерживается
Работает ли механизм наследования
Возможна ли процентная запись
HTML
font
<font-size>, [/<line-height>], <font-family>
Не определено
Всеми элементами
Да
Только для <font-size>, <line-height>
Это свойство позволяет устанавливать сразу несколько свойств шрифта в одном
месте с начальными значениями, определенными для используемых свойств (то
есть значение, определенное по умолчанию для <font-size>, отличается от значе-
ния по умолчанию <font-family>). Данное свойство может быть использовано с со-
ответствующими значениями, разделенными пробелами или запятыми, если уста-
навливается несколько шрифтов.
Свойство font-family
Свойство
Значение Название семейства шрифта (например, Arial)
Значение по умолчанию
Поддерживается
Работает ли механизм наследования
Возможна ли процентная запись
Название семейства шрифта (например,
Устанавливается браузером
Всеми элементами
Да
Нет
Вы можете установить несколько возможных значений в порядке предпочтения
(на тот случай, когда в браузере нет нужного шрифта). Для этого просто раздели-
те их запятыми. Следует закончить родовым названием шрифта (допустимые зна-
чения serif, sans-serif, cursive, fantasy или monospace). Если имя шрифта состоит из
нескольких слов, необходимо заключить эти слова в кавычки.
Свойство font-size
Свойство
Значения
Значение по умолчанию
Поддерживается
Работает ли механизм наследования
Возможна ли процентная запись
<absoLute>, <relative>, <length>, <percentage>
medium
Всеми элементами
Да
Да (относительно родительского размера
шрифта)
Значения для этого свойства можно задать различными способами:
• абсолютный размер: допустимые значенияxx-small, x-small, small, medium, large,
x-large, xx-large;
относительный размер: допустимые значения larger, smaller;
• длина в любых единицах измерения (см. выше);
368.
Приложение 2. Справочник по HTML
• процентное отношение: значения представлены в процентах от родительского
размера шрифта.
Свойство font-style
Свойство
font-style
Значения
normal, italic, oblique
Значение по умолчанию
normal
Поддерживается
Всеми элементами
Работает ли механизм наследования
Да
Возможна ли процентная запись
Нет
Это свойство используется для определения стиля вашего шрифта. Если существует уже готовый вариант шрифта (например, New York Oblique), то он будет применен, в противном случае изменение шрифта будет произведено программно.
Свойство font-va ria nt
Свойство
fontVariant
Значения
normal, small-caps
Значение по умолчанию
normal
Поддерживается
Всеми элементами
Работает ли механизм наследования
Да
Возможна ли процентная запись
Нет
Normal - это стандартный вид, установленный по умолчанию; small-caps использует прописные буквы того же размера, что и обычные строчные.
Свойство font-weight
Свойство
fontWeight
Значения
normal, bold, bolder, lighter или числовые
значения от 100 до 900
Значение по умолчанию
normal
Поддерживается
Всеми элементами
Работает ли механизм наследования
Да
Возможна ли процентная запись
Нет
Определяет жирность шрифта текста, которая зависит от толщины линии. Если
используется числовое выражение, то число обязательно должно быть кратным
100: 400 - то же, что и normal, 700 - то же, что и bold.
Свойства цвета и фона
Свойство color
Свойство color
Значение Название цвета или его номер
Значение по умолчанию Зависит от браузера
Поддерживается Всеми элементами
Таблицы стилей.
369
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Устанавливает цвет текста элемента страницы. Цвет может быть задан названием
(например, green) или номером в соответствии со шкалой RGB. Это значение мо-
жет быть задано несколькими способами: в шестнадцатеричной системе, напри-
мер •ЖББББГ; процентами - "80%,20%,0%"; в десятеричной системе - "245,0,20".
Свойство background
Свойство background
Значения transparent, <цвет>, <11(?1_-адрес>, <repeat>,
<прокрутка>, <положение>
Значение по умолчанию transparent
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да (относительно размера самого элемента)
Определяет параметры фона документа, transparent означает отсутствие фона. Вы
можете использовать для фона либо цвет, либо изображение с заданным URL-
адресом. Адрес может быть абсолютным или относительным, но его следует обя-
зательно заключить в скобки и расположить непосредственно за словом url:
B O D Y { background: url (http://raumu.com/image/picture.gif) }
Можно использовать и цвет фона, и изображение. В таком случае рисунок будет
расположен поверх цветного фона. Цвет может быть либо чистым, либо смешан-
ным из двух. Изображение имеет несколько настроек:
• <repeat> может иметьзначения repeat, repeat-x, repeat-y и no-repeat; если эти значе-
ния не указаны, значением по умолчанию является repeat;
• <прокрутка> определяет, будет ли изображение оставаться на месте при про-
кручивании страницы или прокручиваться вместе с ней; возможные значения
fixed, scroll;
• <положение> определяет расположение изображения на странице; значения
могут быть процентными (горизонтальное, вертикальное), абсолютным рас-
стоянием (горизонтальное, вертикальное) или определенными с помощью клю-
чевых слов (допустимые значения: top, middle, bottom, left, center, right).
В следующих разделах описаны свойства, позволяющие задать свойства фона по
отдельности.
Свойство background-attachment
Свойство
backgroundAttachment
Значения
fixed, scroll
Значение по умолчанию
scroll
Поддерживается
Всеми элементами
Работает ли механизм наследования
Нет
Возможна ли процентная запись
Нет
Определяет, будет ли прокручиваться фоновое изображение
ницы или нет.
при прокрутке стра-
370.
Приложение 2. Справочник по HTML
Свойство background-color
Свойство
Значения
transparent, <цвет>
Значение по умолчанию
transparent
Поддерживается
Всеми элементами
Работает ли механизм наследования
Нет
Возможна ли процентная запись Нет
Определяет цвет фона. Может быть один цвет или два смешанных цвета. Цвет
задается названием (например, green) или номером по шкале RGB. Это значение
может быть задано несколькими способами: в шестнадцатеричной системе (на-
пример, ttFFFFFF") процентами - "80%,20%,0%"; в десятеричной системе - "255ДО".
Синтаксис для использования двух смешанных цветов такой:
BODY { background-color: red/blue }
Свойство background-image
Свойство
Значения
Значение по умолчанию
Поддерживается
Работаетли механизм наследования
Возможна ли процентная запись
<URL-aflpec>, none
none
Всеми элементами
Нет
Нет
С помощью этого свойства можно определить URL-адрес фонового изображения.
Адрес может быть абсолютным или относительным, но его следует обязательно
заключить в скобки и расположить непосредственно за словом url.
Свойства background-position
Свойства
backgroundPositionY
Значения
<положение>, <длина>, top, center, bottom,
left, right
Значение по умолчанию
top, left
Поддерживается
Всеми элементами
Работаетли механизм наследования
Нет
Возможна ли процентная запись
Нет
Указывают начальное положение фонового изображения с помощью двух значе-
ний, определяющих занимаемую часть страницы (по горизонтали, по вертикали),
и абсолютное расстояние (в соответствующих единицах измерения, сначала по
горизонтали, потом по вертикали), или используя два ключевых слова из воз-
можных.
Свойство background-repeat
Свойство
Значения
Значение по умолчанию
Поддерживается
repeat, repeat-x, repeat-y, no-repeat
Repeat
Всеми элементами
Таблицы стилей3
371
Работает ли механизм наследования
Возможна ли процентная запись
Нет
Нет
Определяет, повторяется ли фоновое изображение для заполнения страницы или
элемента. Если используются значения repeat-x, repeat-y, то изображение повто-
ряется лишь вдоль одного направления. По умолчанию устанавливается повто-
рение по обоим направлениям.
Свойства списков
Свойство list-style
Свойство
Значения <ключевое слово, <положение>,
Значение по умолчанию
Поддерживается
Работает ли механизм наследования
Возможна ли процентная запись
о H s tS tyle
<ключевое слово,
<URL-aflpec>
В зависимости от браузера
Всеми элементами
Да
Нет
Определяет, как должны изображаться элементы списка. Может быть использо-
вано для установки всех свойств. Их можно также установить по частям, пользу-
ясь следующими свойствами.
Свойство list-style-image
Свойство
listStylelmage
Значения
none, <URL-aflpec>
Значение по умолчанию
попе
Поддерживается
Всеми элементами
Работает ли механизм наследования
Да
Возможна ли процентная запись
Нет
Определяет адрес изображения, используемого в качестве маркера или значка для
каждого элемента списка.
Свойство list-style-position
Свойство
о И stStyle Position
Значения
inside, outside
Значение по умолчанию
outside
Поддерживается
Всеми элементами
Работает ли механизм наследования
Да
Возможна ли процентная запись
Нет
Указывает, внутри или вне тела списка должен находиться маркер.
Свойство list-style-type
Свойство
listS tyleType
Значения
none, circle, disk, square, decimal, lower-alpha,
upper-alpha, lower-roman, upper-roman
Значение по умолчанию
disk
372.
.Приложение 2. Справочник по HTML
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Определяет вид маркера списка, используемого перед каждым элементом.
Свойства текста
Описания свойств, определяющих различные параметры отображения текста.
Интервал между буквами: свойство letter-spacing
Свойство
Значения
Значение по умолчанию
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Определяет расстояние между буквами. Длина обозначает добавочное расстоя-
ние между буквами. Оно должно быть выражено с указанием единиц измерения.
Высота строки: свойство line-height
Свойство
Значения <число>, <длина>, <проценты>, normal
Значение по умолчанию В зависимости от браузера
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Да, по отношению к размеру шрифта
текущего элемента
Определяет высоту текущей строки. Числовые значения интерпретируются как
размер шрифта текущего элемента, умноженный на соответствующий коэффи-
циент (например, 1,2). Если используется длина, должны указываться единицы
измерения. Процентное соотношение используется в сравнении с текущим раз-
мером шрифта и должно быть больше 100%.
Выравнивание текста: свойство text-align
Свойство textAlign
Значения left, right, center, justify
Значение по умолчанию В зависимости от браузера
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
Определяет, как текст будет выровнен относительно содержащего его элемента.
По существу, делает то же, что и тег <DIVALIGN= .. >.
Украшение текста: свойства text-decoration
Свойства textDecoration, textDecorationLineThrough,
textDecorationUnderline, textDecorationOverline
Таблицы стилей.
373
Значения none, overLine, underline, line-through
Значение по умолчанию попе
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Позволяет добиться специального вида текста. Открыто для расширений, нео-
познанные расширения интерпретируются как подчеркивание. Это свойство не
наследуется, но обычно распространяется на дочерние элементы, лежащие внут-
ри родительских.
Красная строка: свойство text-indent
Свойство
Значения <длина>, <проценты>
Значение по умолчанию zero
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Да, относительно ширины родительского
элемента
Устанавливает величину отступа в единицах измерения или в процентах от ши-
рины родительского элемента.
Преобразование текста: свойство text-transform
Свойство textTransform
Значения capitalize, uppercase, lowercase, none
Значение по умолчанию none
Поддерживается Всеми элементами
Работает ли механизм наследования Да
Возможна ли процентная запись Нет
• capitalize делает заглавной первую букву каждого слова в текстовом элементе;
|* uppercase преобразует все буквы в словах текстового элемента в заглавные;
• lowercase преобразует все буквы в словах текстового элемента в строчные;
• попе снимает все установки, приобретенные в результате наследования.
Расположение по вертикали: свойство vertical-align
Свойство verticalAlign
Значения baseline, sub, super, top, text-top, middle,
bottom, text-bottom, <проценты>
Значение по умолчанию baseline
Поддерживается Встроенными элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да, по отношению к высоте строки
Определяет расположение текущего текстового элемента по вертикали:
baseline устанавливает выравнивание по образцу родительского элемента;
374____________________________________________Приложение 2. Справочник по HTML
• middle устанавливает вертикальную среднюю линию текстового элемента на
основе родительского элемента плюс половина строки последнего;
• super переводит текстовый элемент в верхний регистр;
• sub переводит текстовый элемент в нижний регистр;
• text-top выравнивает текстовый элемент по верху текста, набранного шриф-
том родительского элемента;
• text-bottom выравнивает текстовый элемент по низу текста, набранного шриф-
том родительского элемента;
• top выравнивает верх текстового элемента по верху самого высокого элемента
текущей строки;
• bottom выравнивает низ текстового элемента по низу самого низкого элемента
текущей строки.
Блочные свойства
Значения этих свойств используются для установки характеристик области во-
круг элемента. Это может быть применено к символам, изображениям и т. д.
Свойства border-top-color, border-right-color, border-left-color,
border-bottom-color, border-color
Свойства borderTopColor, borderRightCoLor,
borderLeftCobr, borderBottomColor,
borderCoLor
Значение <цвет>
Значение по умолчанию <нет цвета>
Поддерживается Блоками элементов и замещаемыми
элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяют цвет четырех сторон рамок. Если вместо цвета подставить URL-ад-
рес изображения, он будет повторяться, образуя рамку.
Свойства border-top-style, border-right-style, border-left-style,
border-bottom-style, border-style
Свойства borderTopStyle, borderRightStyle,
borderLeftStyle, borderBottomStyle,
borderStyle
Значения none, solid, double, groove, ridge, inset,
outset
Значение по умолчанию none
Поддерживается Блоками элементов и замещаемыми
элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Определяют стиль четырех сторон рамок.
Таблицы стилей.
375
Свойства border-top, border-rignt, border-left, border-bottom, border
Свойства
borderTop, borderRignt, borderLeft,
borderBottom, border
Значения
Значение по умолчанию
Поддерживается
Работает ли механизм наследования
Возможна ли процентная запись
medium, none, <нет цвета>
Блоками элементов и замещаемыми
элементами
Нет
Нет
Определяют свойства четырех сторон рамок. Работают так же, как свойства от-
ступов (см. ниже), за исключением того, что рамка видна:
• <ширина_рамки> может быть значением medium, thin или thick или задана в еди-
ницах измерения;
• <стиль_рамки> может иметь значение попе или solid.
Аргумент color используется для определения цвета заполнения фона элемента,
пока он загружается, а также позади прозрачных частей элемента. Если передать вме-
сто него адрес изображения, то рисунок будет повторяться, заполняя контур рамки.
Свойства border-top-width, border-right-width, border-left-width,
border-bottom-width, border-width
Свойства
Значения
Значение по умолчанию
Поддерживается
borderTopWidth, borderRightWidth,
borderLeftWidth, borderBottomWidth,
borderWidth
thin, medium, thick, <длина>
medium
Блоками элементов и замещаемыми
элементами
Нет
Работает ли механизм наследования
Возможна ли процентная запись
Определяют ширину рамки вокруг элемента. Каждая сторона может быть задана
соответствующим свойством. Можно также заменить установку четырех индиви-
дуальных свойств установкой одного свойства border-width так же, как и для свойств
отступа margin.
Свойство clear
Свойство
clear
Значения
none, both, left, right
Значение по умолчанию
попе
Поддерживается
Всеми элементами
Работает ли механизм наследования
Нет
Возможнали процентная запись
Нет
Указывает, что следующие элементы должны быть показаны ниже элемента, вы-
ровненного по левому или правому краю. По умолчанию текст обтекает такие эле-
менты.
Таблицы стилей.
377
Значение по умолчанию
auto
Поддерживается
Всеми элементами
Работает ли механизм наследования
Нет
Возможна ли процентная запись
Да, относительно ширины
элемента
родительского
Задают горизонтальную координату элемента, позволяя корректно устанавливать
и передвигать элементы. Значение возвращается как строка, включающая едини-
цы измерения (рх, % и т. д.). Для получения значения в виде числа используется
свойство posLeft.
Свойства margin-top, margin-right, margin-left, margin-bottom, margin
Свойства
marginBottom, margin
Значения auto, <длина>, <проценты>
Значение по умолчанию zero •
Поддерживается Блоками элементов и замещаемыми
элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Да, относительно ширины родительского
элемента
Определяют размеры отступов вокруг данного элемента. Свойство margin служит для
задания четырех отступов. Если используется несколько значений, но меньше четы-
рех, оставшиеся противоположные стороны будут равными. Эти значения устанав-
ливают минимальное расстояние между текущим элементом и остальными.
Свойство overflow
Свойство overflow
Значения auto, visible, hidden, scroll
Значение по умолчанию auto
Это свойство управляет тем, что произойдет, если содержимое элемента выйдет
за его границы:
• visible - если содержимое и выйдет за пределы отведенного ему места, он все
равно будет показан полностью; это значение принято по умолчанию;
• hidden - выступающие за границы элемента-контейнера части содержимого
будут обрезаны;
• auto - добавляет полосы прокрутки, если содержимое выходит за границы эле-
мента-контейнера;
scroll - добавляет полосы прокрутки в любом случае.
Свойства paddingTop, paddingRight, paddingLeft,
paddingBottom, padding
Значения auto, <длина>, <проценты>
Таблицы стилей.
381
Фильтр Функция
Отражает объект симметрично центральной горизонтальной оси
flipv Отражает объект симметрично центральной вертикальной оси
Создает для объекта эффект сияния
grey Отображает объект в градациях серого
invert Обращает цвета объекта
Light Моделирует освещение объекта различными источниками цвета
mask Отображает прозрачные (transparent) символы определенным цветом,
а непрозрачные делает прозрачными
redirect Конвертирует объект в DAImage-объект, то есть в изображение, которым
может манипулировать Microsoft DirectAnimation
shadow Отрисовывает «боковые» грани объекта, создавая впечатление объемности
wave Выполняет синусоидальное преобразование объекта вдоль вертикальной оси
Изменяет глубину цвета объекта и отрисовывает черно-белым, делая его
______________похожим на рентгеновский снимок_____________________________________
revealTrans
Свойство объект,style. revealtrans(duration =
<длительность>, transition=<типперехода>)
Значения revealtrans (duration = <длительность>,
transition =<тип перехода>)
Значение по умолчанию Нет примененного фильтра
Поддерживается Всеми элементами
Работает ли механизм наследования Нет
Возможна ли процентная запись Нет
Позволяет открывать или закрывать одни элементы другими, используя 23 встро-
енных шаблона (см. табл. ниже).
• <длительность> - время, за которое превращение с помощью фильтра произой-
дет полностью (в миллисекундах).
• <тип перехода> - целое число, соответствующее номеру применяемого фильтра.
Тип превращения Номер фильтра
Box In (стягивающийся прямоугольник) 0
Box Out (расширяющийся прямоугольник) 1
Circle In (стягивающийся круг) 2
Circle Out (расширяющийся круг) 3
Wipe Up (стирание вверх) 4
Wipe Down (стирание вниз) 5
Wipe Right (стирание вправо) б
Wipe Left (стирание влево) 7
Vertical Blinds (вертикальные ж а л ю з и ) 88 8про()олжепие
Алфавитный указатель
393
факториал, 43
физические стили, 305
фильтр, 189, 252
alpha, 189
basic!mage, 194
blur, 340
fliph,340,341
revealtrans, 191
wave, 341
динамический, 191, 340, 343
каскадных таблиц стилей, 188
логическое условие, 252
сброс, 252
свойства, 380
статический, 191, 340
установка, 252
фильтрация данных, 256
флаг, 180, 181
флажки, 353
фон, 309, 319
форма, 229
обработка данных, 229
отправка данных, 230
проверка данных, 231
теги, 365
формат
GIF, 188
JPEG, 188
PNG, 188
SWF, 188
форматирование
строк, 58, 63
текста, 325
фрейм, 140, 144, 355
запрет использования, 149
плавающий, 150
выравнивание, 151.
неремещение,'208
проверка загрузки, 149
теги, 366
удаление, 146
функция, 48
alert(), 28
aSumQ, 70
buildMenuQ, 237
функция (продолжение)
changc(), 147
creatcFileQ, 285
createFoldcrQ, 282, 285
curvcQ, 217
driveinfoQ, 279
driveTotallnfoO, 280, 281
escapeQ, 164
eval(), 49, 82, 83, 84, 160, 200
factorialQ, 54
FileToArrayQ, 290
getCookieValQ, 165
getitQ, 273
getproperties (), 158
isNaNQ, 27
loadQ, 148
ItrimQ, 66
parscFIoatQ, 27, 76, 266
parselntQ, 27, 76
pop(), 153
promptQ, 351
readCookie(), 165
rtrimQ, 66
statisticQ, 74
tol6(), 75, 76
to2(), 76
transformQ, 191
trimQ, 66
typcOt'Q, 50
unescapeQ, 49, 165
writeCookieQ, 166
wrtext(), 195
вставка строки, 64
встроенная, 48
вызов, 51,55,92,94
вычисления факториала, 54
escapc(), 49
замена подстрок, 64
имя, 50
определение, 50, 55
параметры,50
поиска, 243
пользовательская, 48, 50
рекурсивное определение, 54
решения математических задач, I
394
Алфавитный указатель
функция (продолжение)
тело, 50
удаления пробелов, 65
функция-конструктор, 97
шрифт (продолжение)
моноширинный, 309, 363
свойства, 367
управление, 305
цвет
рамки таблицы, 183
свойства, 368
фона, 309
шестнадцатеричное представление,
цикл
начальное выражение, 42
условие, 42
числа
представление словами, 225
с плавающей точкой, 27, 74
целые, 74
ш
шрифт
гарнитура, размер, цвет, 306
электронная почта, 230
маскировка адреса, 233
элементы управления, 264
эффект печати на пишущей машинке, 195
309 эффекты визуальные, 180, 188, 216, 333
язык
C++ , 111
HTML, ИЗ
Java, 113
Object Pascal, 111
С, ИЗ
структурного программирования, 111
якорь, 324
ярлык, 290
создание, 290, 291
Нет времени
ходить по магазинам?
www.piter.com
Здесь вы найдете:
Все книги издательства сразу
Новые книги - в момент выхода из типографии
Информацию о книге - отзывы, рецензии, отрывки
Старые книги - в библиотеке и на CD
И наконец, вы нигде не купите
наши книги дешевле!
КНИГА-ПОЧТОЙ
ЗАКАЗАТЬ КНИГИ ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР»
МОЖНО ЛЮБЫМ УДОБНЫМ ДЛЯ ВАС СПОСОБОМ:
• по телефону: (812) 103-73-74;
• по электронному адресу: postbook@piter.com;
• на нашем сервере: www.piter.com;
• по почте: 197198, Санкт-Петербург, а/я 619,
ЗАО«ПитерПост».
ВЫ МОЖЕТЕ ВЫБРАТЬ ОДИН ИЗ ДВУХ СПОСОБОВ ДОСТАВКИ
И ОПЛАТЫ ИЗДАНИЙ:
Наложенным платежом с оплатой заказа при получении посылки на
ближайшем почтовом отделении. Цены на издания приведены ориентиро-
вочно и включают в себя стоимость пересылки по почте (но без учета
авиатарифа). Книги будут высланы нашей службой «Книга-почтой»
в течение двух недель после получения заказа или выхода книги из печати.
Оплата наличными при курьерской доставке (для жителей Москвы
и Санкт-Петербурга). Курьер доставит заказ по указанному адресу
в удобное для вас время в течение трех дней.
ПРИ ОФОРМЛЕНИИ ЗАКАЗА УКАЖИТЕ:
• фамилию, имя, отчество, телефон, факс, e-mail;
• почтовый индекс, регион, район, населенный пункт,
улицу, дом, корпус, квартиру;
• название книги, автора, код, количество заказываемых
экземпляров.
Вы можете заказать бесплатный ^ ткпьскпя аом
журнал «Клуб Профессионал» Е ППТЕР*
*j^ WWW PTTPfl COM
• Файл взят с сайта
• http://www.natahaus.ru/
•
• где есть ещё множество интересных и
редких книг.
•
• Данный файл представлен исключительно
в
• ознакомительных целях.
•
• Уважаемый читатель!
• Если вы скопируете данный файл,
• Вы должны незамедлительно удалить его
• сразу после ознакомления с содержанием.
• Копируя и сохраняя его Вы принимаете на
себя всю
• ответственность, согласно действующему
• международному законодательству .
• Все авторские права на данный файл
• сохраняются за правообладателем.
• Любое коммерческое и иное
использование
• кроме предварительного ознакомления
запрещено.
•
• Публикация данного документа не
преследует за
• собой никакой коммерческой выгоды. Но
такие документы
• способствуют быстрейшему
профессиональному и
• духовному росту читателей и являются
рекламой
• бумажных изданий таких документов.
•
• Все авторские права сохраняются за
правообладателем.
• Если Вы являетесь автором данного
документа и хотите
• дополнить его или изменить, уточнить
реквизиты автора
• или опубликовать другие документы,
пожалуйста,
• свяжитесь с нами по e-mail - мы будем
рады услышать ваши
•
пожелания.