Васильев А.Н.

ПРОГРАММИРОВАНИЕ

Java
НА В ПРИМЕРАХ
И ЗАДАЧАХ

Script РОССИЙСКИЙ
КОМПЬЮТЕРНЫЙ
БЕСТСЕЛЛЕР

Москва
2017
УДК 004.43
ББК 32.973.26-018.2
В19

Васильев, Алексей Николаевич.

В19 JavaScript в примерах и задачах / Алексей Васильев. – Москва :
Издательство «Э», 2017. – 720 с. – (Российский компьютерный бес-
тселлер).
ISBN 978-5-699-95459-9
Простой и интересный самоучитель по JavaScript, наиболее популярному сегодня
языку программирования во всем мире. Полный спектр сведений о языке JavaScript с
примерами и разбором задач от автора учебников-бестселлеров по языкам програм-
мирования Алексея Васильева. С помощью этой книги освоить язык JavaScript сможет
каждый желающий – от новичка до специалиста.
УДК 004.43
ББК 32.973.26-018.2

© Васильев А.Н., 2017

ISBN 978-5-699-95459-9 © Оформление. ООО «Издательство «Э», 2017
 ОГЛАВЛЕНИЕ

Вступление. Книга о JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Сценарии и программы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Веб-документы и язык HTML . . . . . . . . . . . . . . . . . . . . . . . . 11
Добавление сценария в веб-документ . . . . . . . . . . . . . . . . . . . 18
Концепция книги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Тестирование сценариев и программное обеспечение . . . . . . . . 28
Обратная связь . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Благодарности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

ЧАСТЬ I. ОСНОВЫ JAVASCRIPT

Глава 1. Знакомство с JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 42
Отображение текста в рабочем документе . . . . . . . . . . . . . . . . 43
Способы реализации сценария . . . . . . . . . . . . . . . . . . . . . . . 46
Знакомство с переменными . . . . . . . . . . . . . . . . . . . . . . . . . 49
Сценарий с одной переменной . . . . . . . . . . . . . . . . . . . . . . 51
Сценарий с двумя переменными . . . . . . . . . . . . . . . . . . . . 53
Присваивание переменной значений разных типов . . . . . . . . 54
Вычисление выражений . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Основные операторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Арифметические операторы . . . . . . . . . . . . . . . . . . . . . . . 58
Операторы сравнения . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Логические операторы . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Побитовые операторы . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Сокращенные формы оператора присваивания . . . . . . . . . . 73
Тернарный оператор . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Преобразование типов . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Приоритет операторов . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Глава 2. Управляющие инструкции . . . . . . . . . . . . . . . . . . . . . . . 80
Условный оператор . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Общий синтаксис условного оператора . . . . . . . . . . . . . . . . 80
Пример с условным оператором . . . . . . . . . . . . . . . . . . . . . 82
Упрощенная форма условного оператора . . . . . . . . . . . . . . 87
Пример с упрощенной формой условного оператора . . . . . . . 88
Вложенные условные операторы . . . . . . . . . . . . . . . . . . . . 90
Оператор цикла while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Синтаксис оператора . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Пример использования оператора цикла . . . . . . . . . . . . . . . 99

3
Оглавление

Оператор цикла do-while . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Синтаксис оператора . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Пример с использованием оператора цикла . . . . . . . . . . . . 104
Оператор цикла for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Синтаксис оператора . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Пример использования оператора . . . . . . . . . . . . . . . . . . 108
Оператор выбора switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Синтаксис оператора выбора . . . . . . . . . . . . . . . . . . . . . . 113
Примеры использования оператора выбора . . . . . . . . . . . . 115
Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Глава 3. Функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Знакомство с функциями . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Описание функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Примеры объявления функций . . . . . . . . . . . . . . . . . . . . 127
Локальные и глобальные переменные . . . . . . . . . . . . . . . . . . 131
Область видимости и локальные переменные
в функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Обращение к глобальной переменной в функции . . . . . . . . 135
Создание глобальной переменной в функции . . . . . . . . . . 137
Глобальная переменная как свойство объекта окна . . . . . . . 139
Аргументы функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Аргумент как локальная переменная . . . . . . . . . . . . . . . . 146
Механизм передачи аргументов функции . . . . . . . . . . . . . 149
Проверка типа аргумента . . . . . . . . . . . . . . . . . . . . . . . . 152
Количество аргументов функции . . . . . . . . . . . . . . . . . . 156
Передача функции аргументом . . . . . . . . . . . . . . . . . . . . 160
Рекурсия . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Внутренние функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Присваивание функций . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Анонимные функции . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Функция как результат . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

ЧАСТЬ II. JAVASCRIPT И ООП

Глава 4. Знакомство с объектами и принципы ООП . . . . . . . . . . . 196
Концепция ООП . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Создание объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Литерал объекта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Объект с методом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Присваивание объектов . . . . . . . . . . . . . . . . . . . . . . . . . 206
Добавление свойств и методов в объект . . . . . . . . . . . . . . . 209
Конструктор объектов . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Утилиты для работы с объектами . . . . . . . . . . . . . . . . . . . . 215
Оператор with . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Оператор for-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

4
 Оглавление

Оператор in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Оператор delete и удаление свойств и методов . . . . . . . . . . . 223
Прототипы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Механизм доступа к свойствам
и создание объекта на основе прототипа . . . . . . . . . . . . . . 228
Получение доступа к прототипу . . . . . . . . . . . . . . . . . . . 238
Создание объектов без прототипа . . . . . . . . . . . . . . . . . . 247
Конструкторы и прототипы . . . . . . . . . . . . . . . . . . . . . . 250
Свойства и методы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Перечисляемые и неперечисляемые свойства . . . . . . . . . . 258
Свойства с режимом доступа . . . . . . . . . . . . . . . . . . . . . . 269
Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Глава 5. Знакомство с массивами . . . . . . . . . . . . . . . . . . . . . . . 283
Создание массива . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Явное указание элементов массива . . . . . . . . . . . . . . . . . 283
Добавление элементов в массив . . . . . . . . . . . . . . . . . . . . 286
Использование объекта-конструктора Array . . . . . . . . . . . . 288
Операции с массивами . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Методы для работы с массивами . . . . . . . . . . . . . . . . . . . 295
Присваивание и копирование массивов . . . . . . . . . . . . . . 311
Методы toString() и valueOf() . . . . . . . . . . . . . . . . . . . . . . . . 323
Двумерные массивы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Глава 6. Использование объектов . . . . . . . . . . . . . . . . . . . . . . . 334
Обработка исключительных ситуаций . . . . . . . . . . . . . . . . . 334
Инструкция try-catch . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Объект ошибки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Генерирование ошибок . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Вложенные try-catch блоки и блок finally . . . . . . . . . . . . . . . . 351
Создание ошибки пользовательского типа . . . . . . . . . . . . 357
Объекты и массивы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Объект как ассоциативный массив . . . . . . . . . . . . . . . . . . 362
Методы toString() и valueOf() для объектов . . . . . . . . . . . . . . . 367
Массивы и объекты как свойства объекта . . . . . . . . . . . . . 374
Функция как объект . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Количество аргументов функции . . . . . . . . . . . . . . . . . . 384
Функция с произвольным количеством аргументов . . . . . . 388
Передача контекста функции . . . . . . . . . . . . . . . . . . . . . 391
Встроенные объекты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Объект Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Объект Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Объект Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Объект String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Объект Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

5
Оглавление

ЧАСТЬ III. ИСПОЛЬЗОВАНИЕ JAVASCRIPT

Глава 7. Веб-документы и сценарии . . . . . . . . . . . . . . . . . . . . . . 430
Место и роль сценария в веб-документе . . . . . . . . . . . . . . . . 430
Размещение сценария в документе . . . . . . . . . . . . . . . . . . 430
Обработка событий . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Объект окна window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Объектные модели . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Диалоговые окна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442
Открытие и закрытие окна . . . . . . . . . . . . . . . . . . . . . . . 448
Загрузка документа . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
Свойства и методы объекта window . . . . . . . . . . . . . . . . . . . 461
Таймеры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
Объект документа document . . . . . . . . . . . . . . . . . . . . . . . . . 502
Свойства и методы объекта document . . . . . . . . . . . . . . . . . 502
Настройки цвета . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512
Методы write() и writeln() . . . . . . . . . . . . . . . . . . . . . . . . . . 515
Программное создание документа . . . . . . . . . . . . . . . . . . 518
Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529
Глава 8. Элементы управления и обработка событий . . . . . . . . . . 530
Элементы управления в веб-документе . . . . . . . . . . . . . . . . . 530
Кнопки и поля ввода . . . . . . . . . . . . . . . . . . . . . . . . . . . 531
Опции, переключатели и списки . . . . . . . . . . . . . . . . . . . 553
Работа с изображениями . . . . . . . . . . . . . . . . . . . . . . . . . . 574
Просмотр изображений . . . . . . . . . . . . . . . . . . . . . . . . . 575
Рисование изображения и текста . . . . . . . . . . . . . . . . . . . 585
Создание изображений в сценарии . . . . . . . . . . . . . . . . . . 595
События . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606
Объект события . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606
Диспетчеризация событий . . . . . . . . . . . . . . . . . . . . . . . 620
Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630
Глава 9. Различные примеры . . . . . . . . . . . . . . . . . . . . . . . . . . 632
Триадная кривая Коха . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632
Калькулятор . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646
Бегущий текст . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 667
Игра «Жизнь» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
Динамические рисунки . . . . . . . . . . . . . . . . . . . . . . . . . . . 696
Резюме . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714
Заключение. Немного о веб-программировании . . . . . . . . . . . . . 715
 Вступление
КНИГА О JAVASCRIPT

Видел чудеса техники, но такого…

из к/ф «Иван Васильевич меняет
профессию»

Вниманию читателя предлагается книга о JavaScript. На сегодня

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

Как правило, JavaScript упоминают как сценарный язык. Другими

словами, обычно на JavaScript создаются сценарии. Сценарий — это
та же программа. Различие между программой и сценарием в том,
под управлением какой среды они выполняются. Обычная програм-
ма чаще всего выполняется под управлением операционной системы.
Сценарий выполняется под управлением браузера. Браузер, в свою
очередь, представляет собой специальную программу, с помощью ко-
торой просматриваются веб-документы.


i НА ЗАМЕТКУ
Браузеров существует достаточно много. Наиболее популярны-
ми (на момент написания книги) являются Internet Explorer, Mozilla
Firefox, Opera и Google Chrome. Среди браузеров существует до-
статочно сильная конкуренция. Поэтому лидеры списка время от
времени меняются, появляются новые браузеры, а уже существую-
щие уходят со сцены. В общем, вопрос выбора браузера непростой
и достаточно динамичный в плане предпочтений пользователей.

Указанное различие между программой и сценарием во многом тех-

ническое. Тем не менее оно имеет последствия. Собственно, об этих
последствиях и поговорим далее.

7
Вступление


i НА ЗАМЕТКУ
То, что описывается далее, имеет некоторый привкус «технических
подробностей». Эти подробности важные, но не критичные. Поэто-
му, даже если что-то покажется малопонятным, отчаиваться не сто-
ит. Данный материал скорее для тех, кому интересно знать больше,
чем необходимо.

Сценарии и программы
Меня не проведешь. Приемы сыщиков
я вижу на пять футов вглубь.
из к/ф «Приключения Шерлока Холмса
и доктора Ватсона»

Что сценарий, что программа представляют собой набор инструкций,

которые следует выполнить. Вопрос только в том, кто или что дан-
ные инструкции будет выполнять. Мы уже знаем, что программа вы-
полняется под управлением операционной системы. Как это проис-
ходит? Достаточно просто и прозаично. Общая последовательность
действий при создании и выполнении программы выглядит пример-
но следующим образом.
• Сначала набирается программный код. Это как раз та последова-
тельность команд, которая должна быть выполнена. Программный
код набирается в соответствии с правилами языка программиро-
вания, на котором пишется программа. Языков программирова-
ния очень много — например, С++, C#, Java или Python (этот пере-
чень языков программирования далеко не полный). У каждого из
них свои правила составления кодов.
• После того как код набран и сохранен, его следует выполнить.
Проблема в том, что набранный нами код понятен для нас, но не-
понятен для компьютера. Необходима программа-посредник, ко-
торая переведет понятный для человека код в команды, понятные
для компьютера (или, точнее, операционной системы, установ-
ленной на компьютере). В качестве такого посредника выступает
или компилятор, или интерпретатор. Для каждого языка про-
граммирования предназначен свой персональный компилятор
или интерпретатор.
• Если используется программа-компилятор, то исходный про-
граммный код компилируется и в результате получается набор

8
 Книга о JavaScript

команд, готовых к выполнению операционной системой. Факти-

чески при компиляции на основе набора инструкций, написан-
ных на каком-то определенном языке программирования, созда-
ется набор команд машинного или квазимашинного уровня. Эти
команды и выполняются при запуске программы на выполнение.
• Принципиальное отличие интерпретатора от компилятора состо-
ит в том, что интерпретатор выполняет трансляцию исходного
кода в исполняемый код, так сказать, в процессе выполнения, инс-
трукция за инструкцией. Если компилятором конвертируется вся
программа, а затем начинается ее выполнение, то интерпретатор
конвертирует и исполняет сначала одну инструкцию, затем вто-
рую, третью и так далее. То есть конвертирование программного
кода происходит по мере необходимости.

Описанная последовательность действий достаточно условная, но

вместе с тем показательная. Она дает ответ на вопрос, что же нам на
самом деле нужно, чтобы написать программу на том или ином языке
программирования. Во всяком случае, становится понятно, что без
компилятора (или интерпретатора — все зависит от конкретного язы-
ка программирования) не обойтись.

В общем и целом получается так: имеется некоторый язык программи-

рования, на котором мы собираемся писать программные коды. Язык
программирования — это в широком смысле набор правил. Поэтому
формально программный код можно написать, имея под рукой лишь
обычный текстовый редактор. Но затем нам понадобится программа,
способная не просто «понять» этот код, но и преобразовать его в фор-
му, приемлемую для восприятия операционной системой. Здесь на
сцену выходит компилятор или интерпретатор. Компиляторы и ин-
терпретаторы предназначены для компилирования и интерпретации
программ. Для этого они создаются фирмами-разработчиками. Это их
основная задача. Что здесь важно? Важно то, что написание кода и его
компиляция/интерпретация разнесены во времени и в пространстве.
Другими словами, создавая программный код, мы можем особо не за-
ботиться, как затем его компилировать или интерпретировать.

Еще один важный момент связан непосредственно с компиляторами

и интерпретаторами. Это программы, которые устанавливаются на
компьютер. Проще говоря, если мы хотим писать (и запускать) про-
граммы на языке С++, то нам необходимо будет установить компиля-
тор для данного языка (и для данной операционной системы).

9
Вступление

 Д Е ТА Л И
Откровенно говоря, очень редко компилятор устанавливается отдель-
но. Обычно устанавливается интегрированная среда разработки
(обычно упоминается как IDE, что является сокращением от англий-
ского Integrated Development Environment), в состав которой входит не
только компилятор, но и редактор кодов, встроенный отладчик и мно-
гие другие полезные утилиты. Со средой разработки написание про-
граммы превращается в процесс комфортный и где-то даже прият-
ный. Но в данном случае это не важно. Даже если используется среда
разработки, компилятор все равно устанавливается и используется.

Все сказанное, напомним, относится к программам. Теперь вспомним

о сценариях. Что принципиально меняется при написании сценари-
ев? На самом деле, мало что. Как и в случае с программой, при напи-
сании сценария в соответствии с правилами языка (в данном случае
имеется в виду язык JavaScript) набирается программный код. Код
будет выполняться при выполнении сценария. Нас интересует созда-
ние сценариев на языке JavaScript. Сценарии на языке JavaScript ин-
терпретируются. Но интерпретация выполняется не в явном виде,
а, как отмечалось, средствами браузера. Беды в том нет, но есть опре-
деленное неудобство, связанное с необходимостью «инкапсуляции»
сценария в веб-документ. Дело в том, что при интерпретации про-
граммы, с одной стороны, имеется программный код, а с другой — ин-
терпретатор. Программный код интерпретируется интерпретатором.
А вот если речь идет о сценарии, то этот сценарий должен быть вклю-
чен в веб-документ. При открытии веб-документа браузером сцена-
рий выполняется встроенными средствами браузера.


i НА ЗАМЕТКУ
Здесь мы имеем в виду разработку с помощью JavaScript клиент-
ских веб-приложений. То есть речь идет о приложениях, которые
выполняются на компьютере клиента. С серверными приложения-
ми ситуация несколько иная.

Фактически интерпретатор для сценария «спрятан» в браузере. Вы-

полнить единственно сценарий при таком подходе проблематично.
Сценарий приходится выполнять в контексте работы с веб-докумен-
том. Само по себе это не хорошо и не плохо. Но с методологической
точки зрения при изучении языка JavaScript ситуация не самая луч-
10
 Книга о JavaScript

шая, поскольку в «компании» с JavaScript-кодом сценария оказывает-

ся еще и код веб-документа. Причина в том, что основное назначение
браузеров — работа с веб-документами. Выполнение сценариев брау-
зерами — в известном смысле дополнительная функция.


i НА ЗАМЕТКУ
Великий немецкий философ Иммануил Кант (1724–1804) утверж-
дал, что к человеку должно относиться только как к цели, но не как
к средству (категорический императив Канта). В рамках данной фи-
лософской парадигмы, пожалуй, можно утверждать, что, тогда как
программа для интерпретатора является целью, сценарий для бра-
узера скорее является средством.

 Д Е ТА Л И
Ситуация со сценариями (в плане выполнения кода под управлени-
ем не операционной системы, а другой программы — в данном слу-
чае браузера) не является уникальной. Например, существуют мак-
росы. Скажем, при работе с приложением Excel из пакета Microsoft
Office на языке VBA можно создавать программные коды, выполня-
емые под управлением приложения Excel. Это и есть макросы.

Здесь имеет смысл отметить, что при создании веб-документов ис-

пользуется специальный язык, который называется языком ги-
пертекстовой разметки, или HTML (сокращение от английского
HyperText Markup Language). Язык HTML не является предметом кни-
ги, но не упомянуть его совсем не удастся. Покоряясь неизбежному,
предадимся рассуждениям о языке HTML.

Веб-документы и язык HTML

Он начинает новую жизнь, дайте ему воз-
можность вспомнить все лучшее.
из к/ф «Покровские ворота»

Концепция языка гипертекстовой разметки HTML достаточно про-

ста. В стандартный (обычный) текст добавляются специальные коды,
которые принято называть тегами или дескрипторами. Данные коды
представляют собой инструкции для браузера. Инструкции касают-
ся способа отображения текста, помеченного дескрипторами. Поэто-

11
Вступление

му на браузер в некотором приближении можно смотреть как на про-

грамму для просмотра текстов с гипертекстовой разметкой.

 Д Е ТА Л И
Откровенно говоря, ситуация не такая простая, как может пока-
заться на первый взгляд. Один и тот же документ с гипертекстовой
разметкой в разных браузерах может отображаться по-разному.
Более того, есть дескрипторы, которые «понимаются» одними бра-
узерами и совершенно «не признаются» другими. Подход, базиру-
ющийся на создании HTML-документов, ориентированных на рабо-
ту с одним определенным типом браузера, не проходит, поскольку
концептуально веб-документы предназначены для использования
в Интернете, что автоматически сводит на нет попытку ограничить
пользователей документа браузером одного типа. То есть даже на
уровне стандартного (не использующего сценарии) HTML-докумен-
та возникают неожиданные моменты. С другой стороны, для каж-
дой проблемы обычно имеется более или менее удачное решение.

Создать HTML-документ достаточно просто. Из всех возможных

простых способов мы здесь рассмотрим самый простой и наименее
ресурсозатратный. Для этого понадобится простенький текстовый
редактор вроде Notepad (Блокнот) и, естественно, браузер.


i НА ЗАМЕТКУ
Браузер в принципе подойдет любой, но мы будем ориентироваться
на группу лидеров: Internet Explorer, Mozilla Firefox, Google Chrome
и Opera.

Сначала в текстовом редакторе необходимо набрать код документа.

Под словом «код» имеется в виду HTML-код. Чтобы не быть голо-
словными, поступим следующим образом: создадим пустой тексто-
вый документ. Этот документ необходимо открыть и в окне текстово-
го редактора ввести код, представленный в листинге В.1 (назначение
инструкций кода поясняется позже).

 Листинг В.1. Код гипертекстовой разметки документа

<!DOCTYPE HTML>
<html>
<head>
12
 Книга о JavaScript

<title>
Îìàð Õàéÿì. Ðóáàè
</title>
</head>
<body>
<h3>Ðóáàè</h3>
×òîá ìóäðî æèçíü ïðîæèòü, çíàòü íàäîáíî íåìàëî,<br>
Äâà âàæíûõ ïðàâèëà çàïîìíè äëÿ íà÷àëà:<br>
Òû ëó÷øå ãîëîäàé, ÷åì ÷òî ïîïàëî åñòü,<br>
È ëó÷øå áóäü îäèí, ÷åì âìåñòå ñ êåì ïîïàëî.
<hr>
<b>Îìàð Õàéÿì</b>
</body>
</html>

Далее необходимо сохранить изменения в документе, закрыть его

и изменить расширение txt на html (или htm). Собственно, все: мы со-
здали HTML-документ. Этот документ можно открыть с помощью
браузера. Также можно его открыть с помощью текстового редакто-
ра. В последнем случае увидим содержимое документа, то есть его
HTML-код. На рис. В.1 показан документ с HTML-кодом из листин-
га В.1, открытый в текстовом редакторе.

Рис. В.1. Документ с HTML-кодом открыт в текстовом редакторе

13
Вступление

Если мы откроем документ с помощью браузера, получим несколько

иной результат. На рис. В.2 показано, как будет выглядеть созданный
нами документ в окне браузера Mozilla Firefox.

Рис. В.2. Документ открыт в окне браузера Mozilla Firefox

Для сравнения на рис. В.3 этот же документ открыт браузером Internet

Explorer.

Рис. В.3. Документ открыт в окне браузера Internet Explorer

Также желающие могут взглянуть на рис. В.4 и рис. В.5, на которых

показан документ с HTML-кодом, открытый соответственно с по-
мощью браузеров Google Chrome и Opera (разработчик — компания
Opera Software).

14
 Книга о JavaScript

Рис. В.4. Документ открыт в окне браузера Google Chrome

Рис. В.5. Документ открыт в окне браузера Opera

В принципе способ отображения документа разными браузерами

идентичен. Так и должно быть. Теперь кратко обсудим назначение
инструкций, использованных в HTML-коде документа.


i НА ЗАМЕТКУ
В книге информация относительно HTML-кодировки обычно дается
непосредственно при объяснении примеров или приводится в спе-
циальных врезках.

Сначала сделаем несколько общих замечаний относительно HTML-

кодов. Во-первых, текст, не помеченный дескрипторами, отобража-
ется как обычно, то есть как текст. Во-вторых, дескрипторы бывают
парными (таких большинство) и непарными. Дескриптор — это оп-
ределенное ключевое слово, заключенное в угловые скобки. Если де-

15
Вступление

скриптор парный, то второй (закрывающий) дескриптор отличается

от первого (открывающего) дескриптора наличием обратной косой
черты / перед ключевым словом в угловых скобках.

 ЯЗЫК ГИПЕР ТЕКСТОВОЙ РАЗМЕ ТКИ HTML

Дескриптор имеет вид <äåñêðèïòîð>. Это открывающий дескриптор.
Закрывающий дескриптор (если такой имеется) будет выглядеть
как </äåñêðèïòîð>. Например, пара дескрипторов <b> и </b> определяют
фрагмент текста, который в браузере будет отображаться жирным
шрифтом. Здесь речь идет о парном дескрипторе. Примеры непар-
ных дескрипторов:
• дескриптор <br> является инструкцией разрыва строки (в месте
размещения данного дескриптора выполняется разрыв тексто-
вой строки и осуществляется переход к новой строке для отоб-
ражения текста);
• дескриптор <hr> является инструкцией отображения горизонталь-
ной линии (по умолчанию на ширину окна браузера).

В-третьих, у HTML-документа должна быть определенная структу-

ра, которая формируется, как несложно догадаться, с помощью де-
скрипторов.

 ЯЗЫК ГИПЕР ТЕКСТОВОЙ РАЗМЕ ТКИ HTML

Откровенно говоря, браузеры очень демократичны в отношении
правил оформления HTML-документа. Даже если взять самый
обычный текстовый файл, добавить туда некоторые дескрипторы
(например, выделить часть текста дескрипторами <b> и </b>), сохра-
нить файл с расширением html и затем открыть его в браузере, брау-
зер отобразит документ с учетом наличия в нем дескрипторов.
Вместе с тем существуют определенные правила создания доку-
ментов с гипертекстовой разметкой, и их стоит придерживаться.

Использованный нами код содержит как парные, так и непарные де-

скрипторы. Начинается он с дескриптора <!DOCTYPE HTML>, являющего-
ся стандартным началом HTML-документа, указывающим браузе-
ру, с какого типа данными предстоит иметь дело. Весь фактический
HTML-код размещается между дескрипторами <html> (открывает код
документа) и </html> (закрывает код документа). Между дескриптора-
ми <html> и </html> размещается несколько блоков кода (в данном слу-
чае блоков два). Первый блок выделен дескрипторами <head> и </head>.

16
 Книга о JavaScript

Это заглавный блок документа. В данном блоке размещается важная

информация о документе. В нашем примере в заглавном блоке между
дескрипторами <title> и </title> указан текст Îìàð Õàéÿì. Ðóáàè, который ста-
нет рабочим названием документа (не путать с названием файла!).

 ЯЗЫК ГИПЕР ТЕКСТОВОЙ РАЗМЕ ТКИ HTML

Рабочее название документа, указанное между дескрипторами
<title> и </title>, в рабочей области документа не отображается. Оно
отображается на вкладке браузера, когда в нем открыт документ.

Второй блок выделен дескрипторами <body> и </body>. Этот блок — ос-

новное тело документа. В данном блоке фактически размещается код
и текст, предназначенный для отображения в рабочей области доку-
мента. Что мы находим внутри блока? Внутри мы находим инструк-
цию <h3>Ðóáàè</h3>. В соответствии с ней текст Ðóáàè будет выделен как
заголовок третьего уровня. О том, что речь идет о заголовке именно
третьего уровня, свидетельствуют дескрипторы <h3> и </h3>.

 ЯЗЫК ГИПЕР ТЕКСТОВОЙ РАЗМЕ ТКИ HTML

Несложно догадаться, что если существует заголовок третьего
уровня, то есть заголовок второго уровня (выделяется дескрипто-
рами <h2> и </h2>) и заголовок первого уровня (выделяется дескрип-
торами <h1> и </h1>). Как выделять заголовок, определяется бра-
узером. Обычно речь идет о применении увеличенного размера
шрифта и выделении жирным стилем.

Далее следует текст, в котором встречаются непарный дескриптор

<br>. В месте размещения данного дескриптора выполняется пере-
нос строки. Непарный дескриптор <hr> используется для отображе-
ния в документе горизонтальной линии. При этом переход к новой
строке после данной линии выполняется автоматически. Наконец,
дескрипторы <b> и </b> используются для применения к тексту жир-
ного шрифта.

 ЯЗЫК ГИПЕР ТЕКСТОВОЙ РАЗМЕ ТКИ HTML

В написании дескрипторов можно использовать как большие, так
и маленькие буквы. Например, вместо кода <br> можем использовать
код <BR>. Данное замечание относится и к прочим дескрипторам.

17
Вступление

Добавление сценария в веб-документ

— Что за вздор. Как вам это в голову взбрело?
— Да не взбрело бы, но факты, как говорится,
упрямая вещь.
из к/ф «Чародеи»

Веб-документ может содержать не только дескрипторы, определяющие

внешний вид документа при отображении его в браузере, но и особый
программный код — сценарий. Сценарий в веб-документе помещается
в специальный блок. Блок выделяется дескрипторами <script> и </script>.
Блоков со сценариями в веб-документе может быть несколько, и нахо-
диться они могут в разных местах документа. Например, блок со сце-
нарием разрешается размещать в заглавном блоке документа (выделен
дескрипторами <head> и </head>). А можно блок со сценарием разместить
в блоке основного тела документа (выделяется дескрипторами <body>
и </body>). Именно так мы и будем поступать в дальнейшем — код сце-
нариев будет содержаться внутри <body>-блока.

 Д Е ТА Л И
В целом место размещения блока со сценарием имеет значение:
сценарий выполняется по мере загрузки документа. Если сценарий
находится в заглавном блоке веб-документа, то его выполнение на-
чнется практически сразу при загрузке документа в браузер. Если
сценарий находится в блоке основного тела документа, то выпол-
няется он по мере загрузки блока с кодом. Но нас пока что такие
детали интересовать не будут.

Прежде чем рассмотреть код веб-документа с инкапсулированным

в него сценарием (очень простым), отметим еще одно немаловаж-
ное обстоятельство. Дело в том, что при добавлении блока сценария
в веб-документ желательно указать, на каком языке программирова-
ния написан сценарий. В общем-то такая ситуация стандартна для
HTML-документа: во многих случаях дескрипторы блоков содержат
некоторые дополнительные настройки, влияющие на способ отобра-
жения того или иного элемента или фрагмента текста. Дополнитель-
ные настройки выполняются присваиванием значений параметрам
или атрибутам. Значения атрибутам присваиваются внутри откры-
вающего дескриптора (внутри угловых скобок после имени деструк-
тора). Вся конструкция имеет вид <äåñêðèïòîð àòðèáóò=çíà÷åíèå>. Здесь äå-

18
 Книга о JavaScript

ñêðèïòîð обозначает имя дескриптора, àòðèáóò обозначает имя атрибута,

а çíà÷åíèå (обычно заключается в двойные кавычки), соответственно,
является значением àòðèáóòà.

 ЯЗЫК ГИПЕР ТЕКСТОВОЙ РАЗМЕ ТКИ HTML

Например, для создания гипертекстовой ссылки в документе ис-
пользуется парный дескриптор <a> (закрывающий дескриптор </a>).
У дескриптора есть атрибут href. Значение данного атрибута опре-
деляет адрес страницы для выполнения перехода при щелчке на
гиперссылке. Более конкретно, инструкция <a href="[Link]
ua">Ñàéò àâòîðà êíèãè</a> добавляет в документ гиперссылку с текстом
Ñàéò àâòîðà êíèãè, щелчок на которой приводит к переходу по адресу www.
[Link].

Для <script>-дескриптора желательно указать значение "text/javascript"

для атрибута type. Фактически данное значение указывает, что сцена-
рий написан на языке JavaScript. Шаблон включения блока со сцена-
рием в веб-документ следующий:
<script type="text/javascript">
// êîä ñöåíàðèÿ
</script>

Вся эта конструкция будет размещаться внутри <body>-блока, а непо-

средственно код сценария находится там, где размещен комментарий
// êîä ñöåíàðèÿ.


i НА ЗАМЕТКУ
Две обратных косых черты // в программном коде сценария явля-
ются началом комментария. Все, что находится справа от двойной
косой черты, при выполнении сценария игнорируется.
Также стоит отметить, что, если не указать инструкцию type="text/
javascript" в дескрипторе <script>, сценарий все равно будет выполняться.
Дело в том, что по умолчанию, если явно не указан язык, на котором
написан сценарий, предполагается язык JavaScript. Но все же лучше
не полагаться на случай и указывать язык сценария в явном виде.

Как иллюстрацию к использованию сценариев рассмотрим неболь-

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

19
Вступление

Рассмотрим листинг В.2, в котором представлен соответствующий

HTML-код, в том числе внутри этого кода имеется небольшой сце-
нарий.

 Листинг В.2. Документ со сценарием

<!DOCTYPE HTML>
<html>
<head>
<title>
Ñöåíàðèé JavaScript
</title>
</head>
<body>
<h3>Äîêóìåíò ñî ñöåíàðèåì JavaScript</h3>
Ïðè çàãðóçêå ýòîãî äîêóìåíòà âûïîëíÿåòñÿ ñöåíàðèé…<br>
<b>Ðåçóëüòàò âûïîëíåíèÿ ñöåíàðèÿ:</b>
<hr>
<!-- Íà÷àëî áëîêà ñöåíàðèÿ -->
<script type="text/javascript">
// Êîìàíäà âûâîäà òåêñòà â îêíî äîêóìåíòà:
[Link]("Ñöåíàðèé íà ÿçûêå JavaScript")
</script>
<!-- Çàâåðøåíèå áëîêà ñöåíàðèÿ -->
<hr>
<b>Âûïîëíåíèå ñöåíàðèÿ çàâåðøåíî.</b>
</body>
</html>

На рис. В.6 показано окно текстового редактора, в котором открыт

соответствующий веб-документ, так что мы можем видеть, как в ре-
альности выглядит документ с HTML-кодом и вставленным в него
блоком сценария.

Прежде чем посмотреть, как будет выглядеть этот же самый документ

в окне браузера, кратко проанализируем код документа — нас интере-
сует прежде всего код сценария.
20
 Книга о JavaScript

Рис. В.6. Веб-документ со сценарием открыт в текстовом редакторе

 ЯЗЫК ГИПЕР ТЕКСТОВОЙ РАЗМЕ ТКИ HTML

На всякий случай напомним назначение основных дескрипторов
в HTML-коде. Итак, документ стандартно начинается инструкцией
<!DOCTYPE HTML>, идентифицирующей принадлежность документа к се-
мейству HTML. Весь код документа помещен между дескриптора-
ми <html> и </html>. Внутри <head>-блока между дескрипторами <title>
и </title> указывается рабочее название документа (отображается
во вкладке браузера при отображении документа). То, что отобра-
жается в области документа, содержится в <body>-блоке. В частнос-
ти, там имеется заголовок 3-го уровня (между дескрипторами <h3>
и </h3>), обычный текст и текст, выделенный жирным шрифтом. Текст
для выделения жирным шрифтом заключается между дескриптора-
ми <b> и </b>. Для перехода к новой строке использована инструкция
<br>. Инструкцией <hr> отображается горизонтальная линия (на ши-
рину всей рабочей области окна браузера).
Программный код сценария размещен между дескрипторами <script>
и </script>. Открывающий дескриптор содержит инструкцию type="text/
javascript", определяющую язык программирования, на котором напи-
сан сценарий.
Также в HTML-коде представлены комментарии, которые выделяют
блок со сценарием. В HTML комментарий начинается инструкцией
<!-- и заканчивается инструкцией -->. Все, что находится между инс-
трукциями <!-- и -->, при открытии веб-документа в окне браузера не
отображается.

21
Вступление

Внутри <script>-блока, если не считать комментарий (строка, которая

начинается с двойной косой черты //), всего одна команда document.
write("Ñöåíàðèé íà ÿçûêå JavaScript"). Как несложно догадаться, данной коман-
дой в окно браузера выводится текст, указанный в двойных кавыч-
ках. Читателю, не знакомому с принципами объектно-ориентирован-
ного программирования, команда может показаться странной. Хотя
на самом деле команда самая обычная: из объекта document вызывается
метод write().


i НА ЗАМЕТКУ
Далее приводится небольшое формальное объяснение назначе-
ния команды и смысла входящих в нее идентификаторов. Более
детально объекты и методы разбираются в основной части книги.
Здесь же даются лишь минимальные сведения, необходимые для
общего понимания принципов выполнения программного кода.

Объект document отождествляется с веб-документом, открытым в окне

браузера (документ, в котором размещен код сценария). С данным
объектом можно выполнять некоторые действия. В частности, сре-
ди таких действий есть операция «отобразить в документе текст».
Реализуется она методом write(). Чтобы отобразить в документе текст,
необходимо вызвать метод write(), передав ему аргументом текст, пред-
назначенный для отображения. Но метод существует не сам по себе,
а только в привязке к объекту, с которым или по отношению к которо-
му выполняются действия. Метод вызывается из объекта. Последнее
означает, что при вызове метода должен быть явно указан и объект,
из которого метод вызывается. Объект указывается первым, после
чего через точку следует имя метода (используется так называемый
точечный синтаксис). Во всем остальном метод похож на обычную
функцию или процедуру: именованный блок программного кода, ко-
торый вызывается через имя.

Здесь речь идет об объекте document и методе write(). Команда вызова

метода write() из объекта document выглядит как [Link](). Только
в круглых скобках нужно указать текст для отображения в документе.
В результате получается команда [Link]("Ñöåíàðèé íà ÿçûêå JavaScript").
Помимо нее, в программном коде сценария имеется еще коммента-
рий — он находится одной строкой выше команды вывода текста в до-
кумент и начинается с двойной косой черты. Назначение коммента-
рия — в пояснении смысла инструкций программного кода.

22
 Книга о JavaScript


i НА ЗАМЕТКУ
Обратите внимание, что комментарии в HTML-коде и в коде сцена-
рия выполняются по-разному. Комментарий для HTML-кода заклю-
чается между инструкциями <!-- и -->. Такие комментарии использу-
ются в HTML-коде, но не используются внутри программного кода
сценария.
В сценарии комментарий начинается с двойной косой черты //. Вне
сценария такие комментарии неприменимы.

Если загрузить веб-документ в окно браузера, получим результат,

как, например, на рис. В.7. Там показан документ, открытый в окне
браузера Internet Explorer.

Рис. В.7. Документ со сценарием открыт в браузере Internet Explorer

Аналогичным образом все выглядит и при использовании других бра-

узеров. Для сравнения на рис. В8 показано окно браузера Mozilla Firefox
с открытым в нем документом со сценарием. Окно браузера Google
Chrome с открытым документом показано на рис. В.9. Как будет вы-
глядеть документ в окне браузера Opera, показано на рис. В.10.

Во всех перечисленных случаях результат примерно одинаков, с по-

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

23
Вступление

Рис. В.8. Документ со сценарием открыт в браузере Mozilla Firefox

Рис. В.9. Документ со сценарием открыт в браузере Google Chrome

Рис. В.10. Документ со сценарием открыт в браузере Opera

24
 Книга о JavaScript

 Результат выполнения сценария (из листинга В.2)

Ñöåíàðèé íà ÿçûêå JavaScript

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

Концепция книги
Ален ноби, ностра алис! Что означает — еже-
ли один человек построил, другой завсегда
разобрать может.
из к/ф «Формула любви»

Как отмечалось выше, эта книга — о языке программирования

JavaScript. Но здесь имеется некоторая проблема методологическо-
го характера. Не будет преувеличением сказать, что язык JavaScript
достаточно специфичный — не в плане синтаксиса (хотя во многом
он оригинальный), но в плане прикладного применения языка. Как
отмечалось ранее, язык используется для написания сценариев, ко-
торые выполняются под управлением браузера.


i НА ЗАМЕТКУ
Современные тенденции таковы, что область применимости языка
JavaScript постоянно расширяется. На данный момент написание
браузерных сценариев — далеко не единственное поле примене-
ния языка JavaScript. По-видимому, такой тренд сохранится и в бу-
дущем. Мы же ограничимся изучением языка JavaScript как тако-
вого, а также познакомимся с практической стороной применения
JavaScript для написания сценариев.

Отделить собственно язык JavaScript от вопросов его прикладного

применения не очень просто. Другими словами, обсуждая JavaScript,
приходится постоянно делать рефрен в сторону прикладного аспекта
сценарного программирования. Реализация программного взаимо-
действия с браузером подразумевает владение основами объектной
модели документа. То есть речь фактически идет об объектно-ориен-
тированном программировании. Причем в JavaScript объектно-ори-
ентированный подход реализован специфически.

25
Вступление


i НА ЗАМЕТКУ
Будет много сюрпризов для тех, кто знаком с языками программи-
рования С++, C# или Java.

И хотя ситуацию с реализацией объектно-ориентированной парадиг-

мы в языке JavaScript нельзя назвать сложной, простой ее тоже не на-
зовешь. В результате получается, что для иллюстрации работы сцена-
риев JavaScript нужно использовать браузер, а использование браузера
подразумевает неплохое (на уровне объектной модели документа) вла-
дение основами языка. Чтобы разорвать этот замкнутый круг, мы по-
ступим просто и прагматично. Сначала сведем «взаимодействие» сце-
нария с браузером к минимуму и сконцентрируемся исключительно
на особенностях языка программирования JavaScript. После того как
вершины JavaScript будут «взяты», мы переключимся на вопросы при-
кладного использования языка JavaScript для написания сценариев.

Структура книги соответствует подходу, задекларированному выше.

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


i НА ЗАМЕТКУ
В третьей части книги рассматривается объектная модель доку-
мента — набор средств языка JavaScript, предназначенных для ра-
боты с веб-документом.

В первой и второй частях книги браузер будет использоваться как

средство вывода информации сценарием. Что касается задач и при-
меров, рассматриваемых в первых двух частях книги, то они имеют
достаточно общий характер (встречаются в том числе и математичес-
кие задачи).


i НА ЗАМЕТКУ
Сказанное не означает, что читателю необходимо иметь специаль-
ную математическую подготовку. Во-первых, примеры рассмат-
риваются простые. А во-вторых, в книге приводится полная ин-

26
 Книга о JavaScript

формация, необходимая для понимания сути задачи и методов ее

решения.

Такой подход представляется оправданным, поскольку позволяет по-

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

 Д Е ТА Л И
В прикладной плоскости проблема совместного использования
языка JavaScript и браузера связана с тем, что в веб-документе при-
сутствует как HTML-код, так и непосредственно код сценария (даже
если он включен в веб-документ не в явном виде, а через файл сце-
нария). Хотя в принципе HTML-код и JavaScript-код легко различить,
все равно остается некоторая эстетическая незавершенность, осо-
бенно если веб-документ большой и нетривиальный. Ведь как сце-
нарий, так и HTML-код влияют на вид и функциональность веб-доку-
мента. Отделить последствия выполнения сценария от результатов
настроек посредством HTML-кода бывает непросто.

Очевидно, что, даже сведя к минимуму взаимодействие с браузером,

совсем избежать наличия HTML-кода не удастся. Для первой и вто-
рой частей книги мы будем использовать определенный шаблонный
веб-документ с минимально необходимым HTML-кодом. Основная
же часть документа будет представлена сценарием, выполняемым при
загрузке документа в браузер. Таким образом, в первой и второй час-
тях книги нам практически не придется отвлекаться на обсуждение
HTML-кодов (разве что в минимальных объемах). Тем не менее, ког-
да это все же придется делать, по ходу изложения будет приводиться
справка относительно используемых HTML-инструкций.

 ЯЗЫК ГИПЕР ТЕКСТОВОЙ РАЗМЕ ТКИ HTML

Для лучшего восприятия информация относительно HTML-кодов
в основной части книги выносится в специальные блоки.

В первой и второй частях книги анализируются в основном сценарии

на языке JavaScript и, соответственно, интерес представляет резуль-

27
Вступление

тат выполнения сценариев. Результат выполнения сценариев отобра-

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

В третьей части книги используется несколько иной подход. Пос-

кольку там обсуждается применение сценариев на практике, то ин-
терес представляет не сам сценарий, а то, как он отражается на всем
веб-документе. Соответственно, для объяснения результатов нам по-
надобится все окно браузера. Другой подход здесь вряд ли уместен,
особенно если учесть, что речь может (и будет) идти не только о тек-
сте, но и о графических компонентах (таких, например, как кнопки
или поля ввода).

Для лучшего усвоения материала каждая глава содержит в конце

краткое Резюме, в котором выделяются основные наиболее важные
моменты, обсуждаемые в главе.

Тестирование сценариев и программное

обеспечение
— Вот по этому поводу первый тост.
— Сейчас запишу.
— Потом запишешь.
из к/ф «Кавказская пленница»

Книгу по программированию (любую) мало прочитать. С ней нуж-

но работать. Последнее предполагает изучение, анализ и проработ-
ку программных кодов из книги или иных кодов, близких по духу
и смыслу. Как бы там ни было, чтобы научиться программировать, ра-
зумно, вооружившись минимальными теоретическими познаниями,
приступить к написанию кодов. Для этого необходимы программные
средства разработки, или, проще говоря, программное обеспечение.

Обычно для написания программ на том или ином языке устанавли-

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

сделать самому вручную. Помимо этого, настройка среды разработки

может оказаться задачей не самой простой. Поэтому далее мы опи-
шем способ создания и тестирования сценариев, который не подра-
зумевает использование какого-либо специализированного програм-
много обеспечения. Нам понадобится только браузер и текстовый
редактор.


i НА ЗАМЕТКУ
В принципе подойдет любой браузер, поддерживающий язык
JavaScript. Все наиболее популярные браузеры язык JavaScript
поддерживают.

Для большей конкретики процесс работы со сценарием проиллюс-

трируем на примере браузера Mozilla Firefox и текстового редактора
Notepad. Браузер и редактор могут быть другими, но принципы рабо-
ты с ними те же.

 Д Е ТА Л И
Выполнение сценариев считается занятием потенциально опас-
ным. Поэтому в настройках браузеров имеются опции, позволя-
ющие заблокировать выполнение сценариев. Для работы со сце-
нариями JavaScript в браузере должен быть установлен режим,
разрешающий выполнение сценариев. Более детальную инфор-
мацию о настройках браузера обычно можно найти в его справоч-
ной системе.

Идея состоит в том, чтобы открыть один и тот же документ одно-

временно в браузере и текстовом редакторе. Далее схема действий
такая.
• Вносим изменения в код в окне текстового редактора.
• Сохраняем внесенные изменения в текстовом редакторе.
• Анализируем изменения в окне браузера. Для этого в браузере
щелкаем по кнопке Reload (Обновить текущую страницу), выпол-
няя тем самым перезагрузку открытого документа.

На рис. В.11 показано окно браузера Mozilla Firefox с открытым пус-

тым документом, а на фоне окна браузера этот же документ открыт
в текстовом редакторе Notepad.

29