- •ВВЕДЕНИЕ
- •ОСНОВЫ СОЗДАНИЯ СЦЕНАРИЕВ
- •Способы создания динамических HTML-документов
- •Объектная модель документа
- •Структура HTML-документа
- •Структура объекта document
- •События
- •Основы JavaScript
- •Строки
- •ЛАБОРАТОРНЫЕ РАБОТЫ
- •Доступ к свойствам и методам объектов
- •Размещение сценариев в HTML-документе
- •Реакция на событие в отдельном элементе
- •Фиксация события в родительском элементе
- •Проверка данных перед отправкой на сервер
- •Получение данных из всплывающего списка
- •Проверка данных сразу после ввода
- •Предварительная загрузка изображений
- •Рисование
- •Движение
- •Перетаскивание
- •Свойства браузеров и объект navigator
- •Способы преодоления несовместимости браузеров
- •Создание нового окна
- •Управление таблицей
- •Библиографический список
тия, созданный в ответ на действие пользователя. В Internet Explorer объект события обозначается window.event или просто event. В Mozilla Firefox объект события обозначается как evt. Для со-
вместимости обоих случаев служит условный оператор
sobytie = (evt) ? evt : window.event;
или, в более привычной форме,
if(evt) sobytie=evt
else sobytie=window.event
Задача 5.2. Измените последний пример так, чтобы красный
квадрат можно было перемещать внутри серого квадрата размером 500х500 пикселей.
Л а б о р а т о р н а я р а б о т а №6
Совместимость браузеров
Цель работы − освоить приёмы создания таких страниц, ко- торые можно было бы просматривать браузерами разных типов.
Для разработчиков веб-сайтов было бы идеальным строгое со- блюдение стандарта W3C DOM во всех типах браузеров. К сожа- лению, даже в самых последних версиях этот стандарт объектной модели поддерживается не полностью. В объектные модели вво- дятся объекты, события, свойства и методы, отсутствующие в стандарте. Поэтому создание страниц, правильно отображаемых браузерами разных типов, представляет собой очень сложную за- дачу.
В самом простом случае сайт тщательно отлаживается только на браузере одного типа и одной версии, а пользователи всех дру-
гих браузеров при открытии сайта получают предупреждение об отсутствии гарантий правильного его отображения. Такой подход вполне приемлем для информационной системы, используемой одной организацией, например банком, имеющим свою сеть Ин- тернет.
Свойства браузеров и объект navigator
48
Данные о браузере хранит объект navigator. Чтобы вывести в окно браузера свойство appName (имя браузера), можно написать
оператор
document.getElementById("P1").innerHTML= "appName = " + window.navigator.appName //P1 – ID контейнера
Если страница предназначена для выполнения только одним браузером, то можно при её загрузке проверять его имя (appName). Если браузер не подходит, нужно предупредить пользователя о том, какой браузер необходим для просмотра этой страницы.
Задача 6.1. Напишите сценарий, выводящий в окно браузера следующие свойства объекта navigator:
∙appName,
∙appCodeName,
∙appVersion ,
∙userAgent,
∙browserLanguage,
∙cookieEnabled.
Выполните этот сценарий во всех браузерах, установленных на Вашем компьютере. Внимательно изучите полученные значе- ния свойств объекта navigator.
Задача 6.2. Напишите сценарий, который определяет имя браузера. Если загрузка произошла в любом браузере, кроме Internet Explorer, то пользователь должен быть предупреждён о том, что страница правильно отображается только в браузере Internet Explorer.
Поместите написанный сценарий в отдельный файл с расши- рением js. Скопируйте в свой каталог пример 2.3, который пра- вильно отображается только в браузере Internet Explorer. Вставьте в скопированный пример тег <SCRIPT ... > для загрузки файла со скриптом. Проверьте пример в браузерах Internet Explorer и Mozilla.
Способы преодоления несовместимости браузеров
49
Универсального способа создания сценариев, правильно вы- полняющихся во всех существующих браузерах, не существует. Рассмотрим некоторые различия объектных моделей, используе- мых в браузерах Internet Explorer и Mozilla, и типовые приёмы учё- та этих различий.
Браузер Mozilla не поддерживает свойство innerText, поэтому
для совместимости следует использовать более универсальное свойство innerHTML.
В браузерах Internet Explorer и Mozilla используются разные модели события. В Internet Explorer объект event доступен как свойство объекта window (window.event). Объект window указывать не обязательно. Схема доступа к элементу, на котором произошло событие, выглядит так :
<BODY onclick=cl_b()>
.......
.......
<script>
.......
.......
function cl_b()
{
event.srcElement.style.background='AAAAFF'
.......
.......
Вприведённом примере меняется цвет фона того элемента, по которому щёлкнули мышкой. Эта схема доступа использована в примере 2.3.
Вбраузере Mozilla объект event передаётся в качестве пара- метра в функцию, обрабатывающую событие (пример 6.1). Вместо свойства srcElement для хранения объекта, с которым произошло событие, используется свойство target. Модель HTML-документа в стандарте W3C DOM строится в виде дерева, состоящего из узлов (node). Преимущественно используются узлы двух типов: узлы элементов и текстовые узлы. Узел элемента соответствует элемен- ту документа, а текстовый узел – тексту, введённому между тегами элемента. Узел, содержащий другие узлы, называется родитель-
50
ским (parentNode). В родительском узле содержатся дочерние уз- лы. Текстовый узел всегда дочерний.
Пример 6.1.
<HTML><HEAD>
<SCRIPT>
function colorch(col,evt){ evt.target.style.color=col; }
function cl_b(evt) { var elem =
(evt.target.nodeType== 3)? evt.target.parentNode : evt.target;
if(elem.style.background.substring(0,6)==
'yellow') {elem.style.background='#AAAAFF'; } else {elem.style.background='yellow';}
}
</script>
</HEAD>
<BODY onclick=cl_b(event)>
<P onmouseover="colorch('red',event)" onmouseout="colorch('green',event)" ALIGN='CENTER' style='color:green'>
ТЕКСТ, МЕНЯЮЩИЙ СВОЙ ЦВЕТ
</P>
<P>При наведении и снятии курсора заголовок меняет свой цвет.<BR>
Щелчок по любому объекту меняет его цвет</p> <DIV style="position :absolute; top:200;left:300;width:200;height:100; background-color:green;color:red"> <b>Контейнер</b> DIV</div>
</BODY></HTML>
В примере 6.1 в функцию cl_b() передаётся только объект event, а в функцию colorch() – два параметра. Параметр event должен быть в списке параметров последним. Текстовый узел
51
имеет свойство nodeType=3. В примере меняется цвет фона роди- тельского узла, содержащего текстовый узел.
Пример 6.1 легко переделать так, что он будет правильно вы- полняться в браузерах обоих типов (пример 6.2). Изменения нужно внести только в сценарий. Для настройки на браузер служит функ-
ция brows(evt).
Пример 6.2.
<HTML><HEAD><TITLE>Internet Explorer и Mozilla</TITLE>
<SCRIPT>
function colorch(col,evt)
{e=brows(evt)
e.style.color=col; } function cl_b(evt)
{elem=brows(evt) var x="";
x=elem.style.background
if(x.substring(0,6)=='yellow')
{elem.style.background='#AAAAFF'; } else
{elem.style.background='yellow';}
}
function brows(evt)//Настройка на браузер
{evt = (evt) ? evt : window.event; if(evt.target)
{elem=(evt.target.nodeType == 3) ? evt.target.parentNode : evt.target;
}
else elem=evt.srcElement; return elem;
}
</script>
</HEAD>
<BODY onclick=cl_b(event)>
<P onmouseover="colorch('red',event)" onmouseout="colorch('green',event)" ALIGN='CENTER' style='color:green'>
52