10 H t m l – лекция 3
JavaScript. Лекция 1. План
-
Необходимость применения динамических технологий
-
Наиболее распространенные технологии (Macromedia Flash, Java Applet, JavaScript, VBScript)
-
Сценарий JavaScript внедряется в тело HTML документа. Пример простого скрипта
<html>
<head><title>JS</title></head>
<body>
Обычный HTML документ.
<script language="JavaScript">
<!-- //
alert('Пример JS');
// -->
</script>
</body></html>
-
Текст программы описывается между тегами <script></script>, параметр language - тип языка
-
Для браузеров без поддержки JavaScript используется тег <noscript></noscript>
-
Если программа оформлена в виде списка операторов, то выполнение начинается с первого оператора. Если в виде списка функций – автоматический запуск не произойдет. Для запуска необходимо, чтобы произошло событие (например нажатие кнопки мыши)
-
Возможно несколько скриптовых блоков. Скрипты работают в едином адресном пространстве. Пример.
<html>
<head><title>JS</title></head>
<body>
<script language="JavaScript">
var a='Пример JS';
</script>
Обычный HTML документ.
<script language="JavaScript">
alert(a);
</script>
</body>
</html>
-
В языке реализованы типы данных: логический, числовой, строковый, массив, объект.
-
Преобразования типов данных (из числовых в строковые и обратно) осуществляется автоматически при присвоении значений переменным
-
Синтаксические конструкции: if...else, for, while, function. Синтаксис похож на C
-
С точки зрения архитектуры, браузер представляет собой набор объектов, образующих иерархию (объектная модель браузера).
-
Один из объектов, входящих в состав браузера, описывает загруженный в настоящий момент документ. Описание документа - совокупность объектов, (объектная модель документа).
-
JavaScript позволяет манипулировать свойствами и методами объектной модели документа и объектной модели браузера.
-
Технология объединения HTML-кода с JavaScript-кодом, для управления страницей – DHTML.
-
В объектной модели документа реализована система обработки событий, инициируемых действиями пользователя.
Пример
<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 |
Все элементы страницы, включая теги |