- •ВВЕДЕНИЕ
- •ОСНОВЫ СОЗДАНИЯ СЦЕНАРИЕВ
- •Способы создания динамических HTML-документов
- •Объектная модель документа
- •Структура HTML-документа
- •Структура объекта document
- •События
- •Основы JavaScript
- •Строки
- •ЛАБОРАТОРНЫЕ РАБОТЫ
- •Доступ к свойствам и методам объектов
- •Размещение сценариев в HTML-документе
- •Реакция на событие в отдельном элементе
- •Фиксация события в родительском элементе
- •Проверка данных перед отправкой на сервер
- •Получение данных из всплывающего списка
- •Проверка данных сразу после ввода
- •Предварительная загрузка изображений
- •Рисование
- •Движение
- •Перетаскивание
- •Свойства браузеров и объект navigator
- •Способы преодоления несовместимости браузеров
- •Создание нового окна
- •Управление таблицей
- •Библиографический список
var y=parseInt(document.all.lv.style.top) //абсцисса левого края фотографии
var x=parseInt(document.all.lv.style.left) document.all.lv.style.top=y+dy
//Перемещение по OY document.all.lv.style.left=x+dx
//Перемещение по OX
}
</script>
</HTML>
В исходном состоянии фотография находится в верхнем левом углу экрана. Для запуска и остановки движения служит кнопка. Надпись на кнопке меняется. Если фотография неподвижна, то на кнопке написано Запустить, при движении – Стоп. В браузере Internet Explorer надпись на кнопке можно изменить с помощью свойства innerText:
document.all.B1.innerText="Запустить" document.all.B1.innerText="Стоп"
Браузер Mozilla Firefox не поддерживает свойство innerText, поэтому в примере использовано свойство innerHTML, поддержи- ваемое обоими браузерами.
При нажатии кнопки выполняется функция Start_stop, служа- щая для запуска или остановки процесса proc. Если proc запущен, то через каждые 100 миллисекунд вызывается функция move, пе- ремещающая фотографию на 8 пикселей вправо и на 3 вниз.
Задача 5.1. Напишите сценарий перемещения цветного квад- рата по кругу. Траекторию удобно описывать параметрическими уравнениями:
x= R* |
cos(t); |
y= |
R*sin(t) , |
где R – |
радиус круга, 0 |
<= t <= 2π |
|
Квадратом может служить контейнер <DIV> …</div> с цвет- ным фоном.
Перетаскивание
43
В сценариях для перетаскивания какого-либо предмета по ок- ну браузера используется событие onmousemove. Рассмотрим два варианта такого сценария. В обоих сценариях пользователь может мышкой передвигать фотографию по всему окну браузера. Первый вариант сценария (пример 5.2) применим только в браузере Internet Explorer, второй (пример 5.3) правильно выполняется в браузе-
рах Internet Explorer 6.0 и MozillaFirefox 2.0, но он сложнее для по-
нимания.
Пример 5.2.
<HTML><HEAD>
<TITLE>ПЕРЕМЕЩЕНИЕ ИЗОБРАЖЕНИЯ МЫШКОЙ</TITLE> </HEAD>
<BODY id="body1" STYLE="font-size:12pt"> <H2 align="center" style="color:#ff00ff">
Перетаскивание фотографии мышкой</h2>
<P align="center">Фотография начинает двигаться при попадании на неё курсора мыш-
ки<BR>
При захвате и перемещении фотографии не нажимайте кнопки мышки.<BR>
Для прекращения движения щёлкните левой кнопкой мышки</p>
<P align=right>
Примечание. Страница правильно отображается только в браузере<i>Internet Explorer 6.0 </i></p>
<img id="IM1" src="LV.jpg" " STYLE="position:absolute;top:200; left:10">
</BODY>
<SCRIPT>
flag=false
//Функция запускается при пересечении
//курсором мышки границы изображения function IM1.onmouseover()
{flag=true} // Перетаскивание разрешено
function IM1.onmousemove() { if (flag)
{//пересчёт координат изображения
44
document.all.IM1.style.top= event.clientY-170 document.all.IM1.style.left= event.clientX-120
}
}
//запрет на перемещения. Запускается при //отпускании кнопки мышки
function IM1.onclick() {flag=false } </SCRIPT>
<SCRIPT language="JavaScript" src="ProvBrows.js"></script> </HTML>
В примере 5.2 попадание курсора мышки на фотографию слу- жит сигналом к началу перемещения. При дальнейшем перемеще- нии курсора фотография передвигается вместе с ним. Пользова- тель при этом не должен нажимать на кнопки мышки, так как на-
жатием на левую кнопку прекращается движение и курсор можно убрать с фотографии. Нажатие правой кнопки вызывает, кроме прекращения движения, всплытие меню. В сценарии используются три функции:
∙IM1.onmouseover() для запуска процесса перетаскивания;
∙IM1.onmousemove для перетаскивания;
∙IM1.onclick() для прекращения перетаскивания.
Все три функции имеют специальные имена. IM1.onmouseover() означает, что эта функция выполняется, когда на объекте с ID=IM1 происходит событие onmouseоver(). Для функций со специальным именами не нужны операторы вызова.
Функция IM1.onmousemove() выполняется циклически в тече- ние всего времени нахождения курсора мышки в площади фотогра- фии. Так как частота выполнения функции небесконечна, то при
резком движении мышкой можно сорвать курсор с фотографии и прекратить перетаскивание, но такое завершение процесса не пре- дусмотрено правилами. Для управления процессом перетаскивания предназначена логическая переменная flag. Если щёлкнуть кнопкой мышки по фотографии, то выполнится функция IM1.onclick(), пере- менная flag примет значение false и функция IM1.onmousemove()
45
прекратит менять координаты фотографии. Можно будет убрать курсор с фотографии. Если снова хотя бы коснуться ее курсором, то выполнится функция IM1.onmouseover(), переменная flag примет значение true и перетаскивание возобновится.
Во втором варианте сценария (пример 5.3) не используются функции со специальными именами.
Пример 5.3.
<html> <head><title>Перетаскивание</title></head> <body onload="init()">
<h2 align="center" style="color:#ff00ff">
Перетаскивание квадрата мышкой</h2>
<h3 align="center">Установите курсор внутри красного квадрата, нажмите левую
кнопку мышки и тащите квадрат.<BR> Для освобождения квадрата от захвата
отпустите кнопку мышки</h3>
<P align=right>
Примечание. Страница правильно отображается в браузерах <i>Mozilla Firefox 2.0</i> и <i>Internet Explorer 6.0 </i>
</p>
<DIV id='kv' style="position:absolute;left:10;top:10; width:50;height:50;background-color:red"> <div>
</body>
<SCRIPT>
flag=false;
//Связывание событий с функциями function init()
{//Если мышка двигается, то выполняется
//ф-ция dragIt document.all.kv.onmousemove=dragIt
//Если кнопка мышки отпускается, // то - ф-ция osvobodi document.all.kv.onmouseup=osvobodi
document.all.kv.onmousedown=zachvat
46
}
function dragIt(evt)
{//Параметр evt создаётся самим браузером sobytie = (evt) ? evt : (window.event) ? window.event : "";
if(flag)
{document.all.kv.style.top =sobytie.clientY-25; document.all.kv.style.left =sobytie.clientX-25;
}
}
function osvobodi()
{//устанавливается запрет на перетаскивание flag=false;
}
function zachvat() {flag=true;//Перетаскивание разрешается
}
</SCRIPT>
</html>
В отличие от первого варианта во втором явно вызывается од- на функция. Строка
<body onload="init()">
предписывает при загрузке HTML-документа вызвать функцию init(). В результате ее выполнения события, происходящие с объ- ектом, имеющим идентификатор kv, будут вызывать выполнение функций dragIt, osvobodi и zachvat. Объект kv – это контейнер <DIV>, содержащий красный квадрат, перетаскиваемый мышкой.
Функция zachvat(), разрешающая начать перетаскивание, вы- полняется при нажатии кнопки мышки, когда её курсор находится на квадрате, т.е. когда происходит событие onmousedown. Функция osvobodi() выполняется при отпускании кнопки (событие onmouseup) и запрещает перетаскивание.
Функция dragIt(evt) связана с событием onmousemove и поэто-
му циклически выполняется в течение всего времени нахождения курсора мышки на фотографии. Параметр evt – это объект собы-
47