Роботландский Университет © А.А.Дуванов

Посвящается Александру Домнину,
моему верному другу со школьных
лет (Шурику от Апачи).

## введение

### напутствие читателю

Вам надоели статичные гипертекстовые документы? Хочется, чтобы ваша страница следила за мышью, клавиатурой, меняла экран в ответ на действия пользователя? Может быть, вы даже мечтаете создать в гипертексте игру или другую полезную программу?

Книга вам поможет, если только вы:

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

Что означают эти требования?

1. Если вы построили сайт в визуальном режиме, используя Word, FrontPage или другой визуальный редактор, книга вам не поможет. Для изучения динамического HTML нужно владеть “анатомией” гипертекстового конструирования: понимать структуру HTML-документа, правила записи тегов и их атрибутов. Можете считать себя вполне подготовленным в этом вопросе, если уже поработали с книгой “HTML-конструирование”.
2. Динамика гипертекстовых страниц и способность их к активной работе с пользователем появляются благодаря программным кодам, которые дополняют обычную разметку HTML. Книга не опирается на опыт программирования читателя, но предполагает склонность к это роду деятельности. Если вы по принуждению написали несколько программных строк для отчета, мало что в них поняли, а главное — не почувствовали никакого душевного трепета от этих магических заклинаний, “оживляющих” железный ящик с экраном на вашем столе, — книга не для вас. Вы только потеряете деньги и время. Посоветуйте книгу своим увлеченным друзьям.

### “живые” гипертексты

Суть построения “живых” гипертекстовых приложений достаточно проста. Браузер, как интерпретатор HTML-кода, реализует две функции: визуальную и моделирующую. Визуальное действие очень заметно: браузер отображает документ на экране. Но на этом работа не заканчивается. Браузер строит в памяти компьютера программную модель документа, в которой каждому тегу из HTML-файла соответствует отдельный объект.

Посмотрите на эту схему:

Построение объектной модели документа (она носит иерархический характер) браузер начинает с объекта `window`. В этом объекте описаны свойства окна, в котором показан документ. В состав объекта `window` входит объект `document`, который соответствует контейнеру `<HTML>…</HTML>`.

Объект `document` включает в себя (среди прочих) объект-массив `images`, который содержит информацию обо всех тегах `IMG` исходного HTML-файла. В частности, первая картинка описывается в этом массиве объектом `images[0]`, вторая — объектом `images[1]` и так далее.

Документ на экране станет “живым”, если в HTML-коде предусмотреть не только описание тегов, но и воздействия на объектную модель при возникновении того или иного события. Можно, например, при наступлении события “мышиный курсор над картинкой” изменить в объекте `images[0]` свойство `src` с `pic1.gif` на `pic2.gif` (то есть заменить одну картинку другой). И мы увидим, как волк сердится на компьютерную мышь:

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

### инструментарий занятий

#### браузер

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

Книга и описываемые в ней построения нормально работают в браузерах Microsoft Internet Explorer (версия 4 и выше) и Netscape Navigator (версия 3 и выше).

#### текстовый редактор

Для написания программ необходим какой-нибудь текстовый редактор. Вообще говоря, годится стандартный Блокнот Windows. Сам автор предпочитает МикроМир, а многие его коллеги с удовольствием работают в текстовом редакторе, встроенном в популярную оболочку FAR.

### содержание книги

Книга состоит из трех тематических частей и достаточно подробного справочника.

1. Знакомство с языком.
   В этом разделе излагаются основные синтаксические конструкции языка JavaScript, в том числе, понятие объекта.
2. Объектная модель браузера
   Рассмотрены принципы программного управления содержимым гипертекстовой страницы. Практическая часть ориентирована в основном на HTML-формы.
3. На кухне у Сидорова
   Иван Сидоров излагает принципы ООП (объектно ориентированного программирования). Теория подкреплена многочисленными примерами, которые имеют практическую ценность и могут быть использованы при создании динамических гипертекстовых приложений. Разговор на “кухне” завершается построением “Плюсика” — роботландского исполнителя. Это достаточно сложное приложение. Подобные примеры авторы пособий обычно “анатомируют”, показывая устройство готового продукта. Сидоров нарушает эту традицию. Он выступает не в роли лектора, а в роли партнера читателя. Проект создается с чистого листа, на который сначала записывается техническое задание. Показаны все этапы работы проектировщика, в том числе построение специальных отладочных стендов и интерфейсные улучшения продукта на завершающей стадии работы.

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

1. Синтаксис языка JavaScript
   Краткое описание языка JavaScript.
2. Встроенные в язык объекты
   Конструкторы, свойства и методы объектов JavaScript.
3. Объекты браузера
   Описание объектной модели браузера.
4. События браузера
   Перечень популярных событий.