3. Исполнение сценария
Теперь рассмотрим, как организовать выполнение написанных и внедренных в документ
сценариев . Итак , сценарий может исполняться в двух случаях: при загрузке документа и при воз -
никновении события ( а также при вызове его интерпретатором, например по таймеру, но это
рассмотрим особо).
7
3.1 Исполнение при загрузке документа
Интерпретатор браузера выполняет операторы языка JavaScript, записанные вне тела какой-
либо функция , по мере загрузки документа . Причем положение HTML-элемента SCRIPT с текстом
сценария определяет момент времени, в который сценарий будет выполняться.
Напишем первую программу с использованием JavaScript. Создайте html-страницу и
поместите в нее следующий код:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript">
document.write("Доброго времени суток. Попробовал. Получилось!");
</script>
</head>
<body>
</body>
</html>
Откройте эту страницу в браузере, она выглядит так:
Рисунок 2
Браузер читает html-страницу, видит оператор для выполнения
document.write("Доброго времени суток. Попробовал. Получилось!"); и выполняет его.
Оператор (инструкция) состоит из следующих частей:
Объект Метод
document.write("Доброго времени суток. Попробовал. Получилось!");
При интерпретации html-страницы браузер создает объекты JavaScript. Они хранятся в виде
иерархической структуры, отражая структуру документа, например:
Рисунок 3
На самом верхнем уровне находится объект window, представляющий окно браузера и
являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои
8
подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект
form (форма) и т.д.
Все объекты имеют методы, которые отделяются от объекта точкой. Например:
document.write позволяет писать текст в текущую страницу, window.close закрывает окно.
Также объекты имеют свойства, например: document.bgcolor - содержит значение
фонового цвета текущей страницы, document.title содержит заголовок страницы.
Примечание: Все инструкции программного кода заканчиваются точкой с запятой. Об
этом надо помнить.
3.2 Исполнение сценария как реакция на событие
Сценарий, написанный выше, выполнился немедленно при загрузке страницы. Однако в
большинстве случаев необходимо, чтобы сценарий выполнялся после каких-либо действий
пользователя (нажатия на кнопку или ввода текста), т.е. в ответ на пользовательское событие. В
данном случае сценарий является «обработчиком события».
Для этого в тегах элементов страницы введены параметры обработки событий, задающие
действия, выполняемые при возникновении события, связанного с элементом. Например:
<div onClick="addText();"></div>
Здесь Click - событие (щелчок по div), onClick - обработчик события,
addText() - имя функции, которая вызывается при возникновении этого события (щелчка по div).
Правила создания и вызова функций будут рассмотрены в следующих лабораторных работах.
В таблице 1 представлены события, обрабатываемые в JavaScript.
Значениями приведенных в таблице обработчиков событий могут быть не только
написанные разработчиком функции, но и фрагменты кода сценариев, например:
<P onClick = "alert ('Вы нажали на первый абзац текста!!!')"> текст абзаца
</P>
<P onClick = "
{
// Аккуратно оформленный блок кода: строки HTML-разметки
// можно безнаказанно разрывать, поэтому код необходимо заключать в
//фигурные скобки
alert ('А сейчас на второй абзац текста ');
}" > Текст абзаца
</P>
Обратите внимание, что поскольку текст обработчика помещается в двойные кавычки, то
использовать сами кавычки в тексте сценария не следует.
В данном примере используется стандартная функция JavaScript alert – это функция,
которая выводит окно предупреждений с заданным текстом.
Однако, наиболее популярной практикой является создание функций-обработчиков
события (обычной функции JavaScript) вместо записи действий по обработке события прямо в теге
элемента . В таком случае в о бработчик оnСобытие записывается код вызова функции-обработчика
(смотри описанный выше пример про обработку щелчка по div с использованием функции
addText()).
9
Обработчик событий |
Описание события |
onLoad |
Возникает при окончании загрузки документа или набора фреймов (для элементов BODY и FRAMESET) |
onUnload |
Возникает при удалении содержимого документа из окна браузера или при удалении содержимого фрейма из окна фрейма (для элементов BODY и FRAMESET) |
onCIick |
Возникает при щелчке кнопкой мыши на элементе страницы (поддерживается большинством элементов) |
onDblClick |
Возникает при двойном щелчке кнопкой мыши на элементе страницы (поддерживается большинством элементов) |
onMouseDown |
Возникает при нажатии кнопки мыши, когда указатель находится над элементом страницы (поддерживается большинством элементов) |
onMouseUp |
Возникает при отпускании кнопки мыши, когда указатель находится над элементом страницы (поддерживается большинством элементов) |
onMouseOver |
Возникает при наведении указателя мыши на элемент страницы (поддерживается большинством элементов) |
onMouseMove |
Возникает при перемещении указателя мыши над элементом страницы (поддерживается большинством элементов) |
onMouseOut |
Возникает, когда указатель мыши покидает область, занятую элементом страницы (поддерживается большинством элементов) |
onFocus |
Возникает, когда элемент получает фокус ввода (для гиперссылок и элементов форм, а также для элементов с установленным атрибутом tabindex) |
onBlur |
Возникает, когда элемент теряет фокус ввода (для гиперссылок и элементов форм, а также для элементов с установленным атрибутом tabindex) |
onKeyPress |
Возникает при нажатии и отпускании клавиши на клавиатуре (только когда элемент имеет фокус ввода) |
onKeyDown |
Возникает при нажатии клавиши на клавиатуре до события KeyPress (только когда элемент имеет фокус ввода) |
onKeyUp |
Возникает при отпускании клавиши на клавиатуре после события KeyPress (только когда элемент имеет фокус ввода) |
onSubmit |
Возникает при щелчке на кнопке (или изображении) отправки формы (только для элемента FORM) |
onReset |
Возникает при нажатии кнопки сброса полей формы (только для элемента FORM) |
onSelect |
Возникает, когда пользователь выделит текст в текстовом поле (для элементов TEXTAREA и INPUT) |
onChange |
Возникает, когда элемент теряет фокус ввода и при этом его значение изменено пользователем (для элементов INPUT, TEXTAREA, SELECT) |
Таблица 1 - Обработчики событий
4. Объектная модель документаЧтобы успешно применять знания по программированию на JavaScript, нужно рассмотреть
еще один специфический момент - то, как сценарии могут воздействовать на HTML- документ.
Для этого нужно изучить технологию представления HTML- документа в виде совокупности
объектов - объектную модель документа (DOM, Document Object Model). DOM включает не
только объекты, из которых состоит документ , но и объекты, позволяющие получать различную
информацию о браузере , системе ( в частности, о видеосистеме компьютера ), работать с окнами и
многое другое.
10
Свойство |
Описание |
alinkColor |
Цвет активных гиперссылок (аналогично атрибуту alink элемента BODY) |
all |
Возвращает коллекцию всех элементов HTML-документа |
anchors |
Возвращает коллекцию всех якорей HTML-документа |
bgColor |
Цвет фона (аналогично атрибуту bgcolor элемента BODY) |
fgColor |
Цвет текста (аналогично атрибуту text элемента BODY) |
forms |
Возвращает коллекцию всех форм HTML-документа |
frames |
Возвращает коллекцию всех фреймов HTML-документа |
images |
Возвращает коллекцию всех изображении HTML-документа |
lastModified |
Дата последнего изменения документа |
linkColor |
Цвет непосещенных гиперссылок (аналогично атрибуту link элемента BODY) |
links |
Возвращает коллекцию всех гиперссылок HTML-документа |
referrer |
Адрес документа, с которого был осуществлен переход в текущий документ |
title |
Содержимое HTML-элемента TITLE |
URL |
Адрес документа |
vlinkColor |
Цвет посещенных гиперссылок (аналогично атрибуту vlink элемента BODY) |