Скачиваний:
23
Добавлен:
04.04.2013
Размер:
140.8 Кб
Скачать

Приложение. Теория и примеры

Язык 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

Все элементы страницы, включая теги

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.

Соседние файлы в папке 2_HTML