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

## урок 1: первый скрипт
дополнительный материал

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

За счет чего на гипертекстовой странице появляется динамика и интерактивность (взаимодействие с пользователем)?

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

Получается, что окно браузера можно изменить двумя способами:

1. написать HTML-теги и загрузить файл в браузер;
2. воздействовать на объектную модель документа.

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

Как же можно воздействовать на объектную модель документа? Вы, конечно, догадались, что для этого надо писать скрипты — программы на специальных языках программирования (их должен “понимать” браузер). Самый распространенный язык для этого — JavaScript.

Уроки 1–6 посвящены программированию на языке JavaScript. Объектная модель документа и способы управления этой моделью описываются в уроках 7–10. Остальные уроки посвящены практикуму на “кухне” Сидорова.

В этом уроке рассмотрен блок `<SCRIPT>…</SCRIPT>`. В него “замуровываются” скриптовые программы. Показана функция `alert`, которую часто используют в скриптах.

Эта функция не является встроенной функцией языка JavaScript. Она принадлежит объектной модели документа (объекту `window`), но до урока 7 можно об этом не задумываться.

Хорошенько разберитесь с функцией `alert`. Она используется очень часто. Кроме простой задачи выдать пользователю сообщение, функция незаменима как средство отладки. К сожалению, браузер выдает сообщения об ошибках очень бестолково. Приходится расставлять серию вызовов `alert` для вывода промежуточных данных с целью “перехватить” ошибку в месте ее фактического размещения. “Подслеповатый” браузер не всегда выдает даже бестолковые сообщения об ошибках, а если и делает это, то указывает место проявления ошибки, а не место ее расположения.

### JavaScript и Java

JavaScript — это язык программирования, который разработан специально для работы совместно с HTML.

Коды на JavaScript интерпретируются браузером.

Вспомним, что все языки программирования подразделяются на два класса: интерпретируемые и компилируемые.

Для выполнения кода на интерпретируемом языке нужна специальная программа интерпретатор. Типичный пример интерпретируемого языка — классический Бейсик. Мы пишем программу в текстовом редакторе, затем вызываем Бейсик (интерпретатор Бейсика), и он эту программу выполняет.

На некоторых компьютерах Бейсик “зашивается” прямо в постоянную память (например, так было на Ямахе и первых моделях IBM PC). Чаще же интерпретатор — это обычная компьютерная программа, расположенная на жестком или гибком диске.

Пример компилируемого языка — Си. Программа записывается в текстовом редакторе, затем вызывается компилятор, который преобразует текст программы в машинные коды. Заметьте: компилятор, в отличие от интерпретатора, не выполняет программу, а переводит ее текст в машинные коды. Результат компиляции — файл, готовый к самостоятельному исполнению на компьютере.

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

Компилированные программы работают гораздо быстрее, чем выполняемые под управлением интерпретатора.

Следует отметить, что подразделение языков программирования на два отмеченных выше класса довольно условно. Более правильно говорить о традиционно компилируемых и традиционно интерпретируемых языках. Так существуют компиляторы Бейсика (традиционно интерпретируемого языка) и интерпретаторы Паскаля (традиционно компилируемого языка).

С web-программированием обычно связывают еще один язык — Java.

JavaScript и Java — это совсем разные технологии и концепции. Объединяет их только Си-образный синтаксис языковых конструкций.

JavaScript — это интерпретируемый браузером язык, который был создан для использования в составе HTML-кода. Java — универсальный, частично компилируемый язык программирования.

#### JavaScript

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

Вот пример “чистого” HTML-кода:

    <IMG src=bonus.gif>

А вот код с использованием JavaScript:

    <IMG src=bonus.gif onclick="make()">

В первом случае браузер просто покажет картинку, а во втором — будет реагировать на мышиный щелчок пользователя по этой картинке — запускать на выполнение функцию `make`.

Как видите, запись `onclick="make()"` по форме совпадает с записью обычного атрибута HTML. `click` — это имя события, которое возникает при щелчке мыши. Приставка “on” стандартным образом образует имя “событийного” атрибута.

Значением такого атрибута является скрипт, который получает управление в момент свершения события. Как только пользователь щелкнет мышью по картинке, браузер запустит на выполнение функцию `make`. Эта функция может заменить одну картинку на другую, запустить видеоклип, показать текущее время или сделать еще что-нибудь, что в ней заложено программистом.

Получается, что JavaScript расширяет HTML. Этот язык позволяет для “событийных” атрибутов `onсобытие` описывать действия (обработчики событий), то есть JavaScript предлагает web-мастеру инструмент для создания “собственного” HTML, пристраивая к стандартному HTML новые “колесики”, чувствительные к событиям.

#### Java

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

Java-программа преобразуется сначала в промежуточный (между текстом и машинными командами) код, который затем интерпретируется (браузером или другим Java-интерпретатором). Этот код называют байтовым кодом.

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

Java-программы, предназначенные для интерпретации браузером, называют апплетами. Апплет существенно отличается от скрипта по своему проявлению в гипертекстовом документе.

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

С помощью Java легко поместить на страницу совершенно самостоятельную программу со своим интерфейсом и внешним графическим представлением (например, компьютерную игру или бухгалтерский офис). Эта экранная область будет “жить” своей собственной жизнью, отсылая, если это необходимо, данные на сервер.

Рассмотрим пример размещения Java-программы (апплета) на странице гипертекста.

Как видите, апплет задается почти также как картинка.

Задаются размеры прямоугольной области, в которой апплет будет работать и имя файла с байтовым кодом апплета. По принятым соглашениям файл с исходным текстом Java-программы имеет расширение `.java`, а байтовый код — расширение `.class`.

В теге `<APPLET>`; так же, как и в теге `<IMG>`, может быть использован атрибут `align`, выравнивающий область апплета по отношению к другим информационным элементам страницы, а также атрибут `alt`, задающий альтернативный текст.

Пример странички с апплетом Тараканчик-84.

Рассмотрим типичные задачи, которые решаются при помощи этих двух языков.

##### JavaScript

- Создание HTML-страницы “на лету”, программным путем.
- Обработка простых диалоговых форм.
- Изменение внешнего вида страницы после ее вывода на экран.

##### Java

- Сложные формы с вводом/выводом графической информации.
- Анимация (настоящая анимация, а не анимированные GIF-файлы).
- Трехмерные изображения и их обработка.
- Выполнение самостоятельной графической программы в среде гипертекстового документа.

Изучение языка Java выходит за рамки этой книги.