Приложение. Теория и примеры
Язык HTML предоставляет средства для создания статических страниц (документов). Однако довольно часто возникает потребность в добавлении на страницу интерактивных элементов. Для решения этой задачи применяются динамические технологии, работающие на стороне клиента. Суть динамических технологий заключается во внедрении в тело документа объектов или программ, реализующих интерактивные элементы интерфейса. Наиболее распространенные технологии:
-
Macromedia Flash
-
Java Applet
-
JavaScript (версия 1.3 поддерживается 99% браузеров)
-
VbScript
JavaScript – язык программирования, предназначенный для создания интерактивных HTML страниц. Программа (сценарий), написанная на языке JavaScript, встраивается в текст HTML документа. При загрузке документа интерпретатор (входящий в состав браузера) выполняет встроенную программу. Интерпретатор языка JavaScript входит в состав большинства современных браузеров. Стоит различать JavaScript и Java – это разные языки программирования. Пример документа, содержащего JavaScript:
<html>
<head><title>JS</title></head>
<body>
Обычный HTML документ.
<script language="JavaScript">
<!-- //
alert('Пример JS');
// -->
</script>
</body>
</html>
Текст программы, написанной на JavaScript, помещается между тегами <script></script>, параметр language задает тип используемого языка программирования. Этот параметр не является обязательным, поскольку большинство современных браузеров в качестве внутреннего языка программирования используют JavaScript
Для того, чтобы браузеры без поддержки JavaScript не отображали на странице текст программы, необходимо воспользоваться тегами комментария. Сообщение о том, что браузер не поддерживает исполнение скриптов, может быть помещено между тегами <noscript></noscript>.
При загрузке страницы браузер анализирует программу, написанную на языке JavaScript. В случае, если программа не оформлена в виде набора функций, т.е. представляет собой список операторов, разделенных символом ; (точка с запятой), выполнение программы начинается с первого оператора первого блока <script>. Если программа реализована в виде одной или нескольких функций, автоматический запуск не произойдет. Для запуска программы должно произойти событие (например, нажатие кнопки мыши). Внутри документа может быть несколько блоков <script>. Скрипты, в разных блоках, функционируют в едином адресном пространстве.
<html>
<head><title>JS</title></head>
<body>
<script language="JavaScript">
var a='Пример JS';
</script>
Обычный HTML документ.
<script language="JavaScript">
alert(a);
</script>
</body>
</html>
В языке JavaScript реализованы следующие типы данных:
-
Логический (булевский) тип
-
Числовой тип (целые и дробные числа)
-
Строковый тип
-
Массивы
-
Объекты
Переменные должны быть объявлены пред использованием. Преобразования типов данных (из числовых в строковые и обратно) осуществляется автоматически при присвоении значений переменным. Синтаксические конструкции, реализованные в языке JavaScript:
-
Условный оператор if… else;
-
Циклы for, while
-
Пользовательские функции function
Синтаксис JavaScript во многом похож на синтаксис языка C.
С точки зрения архитектуры, браузер представляет собой набор объектов, образующих иерархию. Эта иерархия называется объектной моделью браузера. Один из объектов, входящих в состав браузера, описывает загруженный в настоящий момент документ. Описание документа (страницы) представляет собой совокупность объектов, и называется объектной моделью документа. Язык JavaScript позволяет манипулировать свойствами и методами объектной модели документа и объектной модели браузера.
Технология создания документа, при которой обычный HTML-код объединяется с JavaScript-кодом, причем последний управляет страницей с помощью объектной модели, называется динамическим HTML (DHTML).
В объектной модели документа реализована система обработки событий. События, как правило, инициируются действиями пользователя. Ниже приведен пример программы, иллюстрирующий взаимодействие JavaScript и объектной модели браузера в результате наступления события (нажатия кнопки мыши).
<html>
<head><title>JS</title></head>
<body>
<script>
function jump() {
var path='http://www.yandex.ru';
window.location.href=path;
}
</script>
<b onclick="jump()">Переход</b>
</body></html>
Объектная модель браузера и документа (за основу взят браузер Internet Explorer 4.0)
|
Уровень |
Объект |
Описание |
|
1 |
Window |
Объект самого высокого уровня. Представляет собой окно программы просмотра (браузера). Позволяет управлять свойствами окна (открытие, закрытие, скроллирование). Может быть как окном верхнего уровня, так и окном фрейма. |
|
1.1 |
Location |
Содержит информацию о текущем URL. Предоставляет методы, позволяющие перезагрузить страницу |
|
1.2 |
Frames |
Коллекция. Предоставляет доступ ко всем фреймам, открытым в окне верхнего уровня |
|
1.3 |
History |
Содержит информацию о всех адресах страниц, посещенных клиентом. Позволяет перемещаться по этому списку |
|
1.4 |
Navigator |
Содержит информацию о браузере (название, поддерживаемые функции) |
|
1.5 |
Event |
Позволяет обращаться к параметрам произошедшего события (код нажатой клавиши, точка нажатия на экране, объект породивший событие) |
|
1.6 |
Screen |
Предоставляет информацию о разрешающей способности и графических возможностях монитора клиента |
|
1.7 |
Document |
Представляет документ, загруженный в настоящее время браузером. Содержит информацию обо всех объектах, присутствующих в документе. |
|
1.7.1 |
Links |
Коллекция гиперссылок |
|
1.7.2 |
Anchors |
Коллекция меток |
|
1.7.3 |
Images |
Коллекция изображений |
|
1.7.4 |
Forms |
Коллекция форм |
|
1.7.5 |
Applets |
Коллекция java-апплетов |
|
1.7.6 |
Embeds |
Коллекция внедренных элементов (например Flash) |
|
1.7.7 |
Scripts |
Коллекция внедренных скриптов |
|
1.7.8 |
Selection |
Выделенный пользователем текст на странице |
|
1.7.9 |
StyleSheets |
Коллекция стилей, встроенных или привязанных к страннице |
|
1.7.10 |
All |
Все элементы страницы, включая теги |