ЛАБОРАТОРНАЯ РАБОТА № 13 (4 JavaScript)
Тема: Позиционирование и движение элементов на
Web-странице
Цель:
Изучение средств и возможностей языка JavaScript для позиционирования и
организации движения элементов на Web-странице
ОГЛАВЛЕНИЕ
1 Позиционирование элементов на Web-странице
2 Организация движения объектов на Web-странице
2.1 Изменение координат элемента с помощью
циклического процесса
2.2 Изменение координат элемента по событиям мышки
2.3 Перетаскивание элементов
3 Свойства и методы объекта Math
Пример 1
Пример 2
Пример 3
Индивидуальные задания
1 Позиционирование элементов на Web-странице
Режим позиционирования элемента Web-страницы, т.е. размещения его на экране, задается с
помощью свойства CSS position, которое имеет
следующие значения:
- static - положение элемента на экране задается браузером в соответствии с
тем местом, которое элемент занимает в HTML-документе (значение задано по
умолчанию, не использует координаты элемента и поэтому не может быть выбрано
для организации движения элемента);
- relative - положение элемента на экране задается с помощью координат
относительно того места на экране, куда браузер поместил бы элемент в режиме
static;
- absolute - положение элемента на экране задается с помощью его координат
относительно родителя.
При использовании режима позиционирования absolute,
положение элемента на экране может быть задано с помощью таких свойств CSS:
- left - задает или возвращает горизонтальную позицию левой границы элемента
относительно родителя (если родителем является тэг <BODY>, то относительно
левой границы окна браузера);
- top - задает или возвращает вертикальную позицию верхней границы элемента
относительно родителя (если родителем является тэг <BODY>, то относительно
верхней границы окна браузера);
- right - задает или возвращает горизонтальную позицию правой границы элемента
относительно родителя (если родителем является тэг <BODY>, то относительно
правой границы окна браузера);
- bottom - задает или возвращает вертикальную позицию нижней границы элемента
относительно родителя (если родителем является тэг <BODY>, то относительно
нижней границы окна браузера).
Если для одного элемента заданы оба свойства:
left и right, то свойство
right игнорируется. При совместном задании свойств
top и bottom предпочтение
отдается свойству top.
Значения свойств left,
top, right и
bottom могут быть заданы:
- в абсолютных единицах:
- pt - в пунктах (1/72 дюйма);
- px - в пикселях;
- mm - в мм;
- cm - в см;
- in - в дюймах.
- в процентах от ширины родителя;
- предопределенным значением auto, которое задается по умолчанию и указывает
на то, что элемент позиционируется браузером.
Если единицы измерения не указаны, то подразумевается, что они заданы в
пикселях.
Ниже приведен пример рисунка, расположенного в 200
пикседях от левой границы экрана и в 100 пикселях от верхней границы экрана:
<IMG NAME="imgs" SRC="fish.gif" STYLE="position:absolute;
left:200;top:100">
Если попытаться сдвинуть этот рисунок на экране на 50 пикселей вправо с
помощью выражения
imgs.style.left+=50,
то это приведет к возникновению ошибки "Недопустимый аргумент" из-за того,
что свойство left возвращает значение не в виде числа
200, а в виде строки "200px".
Поэтому надо или воспользоваться функцией
parseInt(), которая возвращает только число:
imgs.style.left=parseInt(imgs.style.left)+50,
или вместо свойств left,
top, right и
bottom применять свойства:
- pixelLeft - задает или возвращает численное значение горизонтальной позиции левой
границы элемента в пикселях;
- pixelTop - задает или возвращает численное значение вертикальной позиции верхней
границы элемента в пикселях;
- pixelRight - задает или возвращает численное значение горизонтальной позиции
правой границы элемента в пикселях;
- pixelBottom - задает или возвращает численное значение вертикальной позиции
нижней границы элемента в пикселях.
В нашем примере вместо свойства left необходимо
использовать свойство pixelLeft:
imgs.style.pixelLeft+=50;
Если же координаты элемента заданы в других единицах измерения, необходимо
использовать свойства:
- posLeft - задает или возвращает численное значение горизонтальной позиции левой
границы элемента в единицах измерения, заданных свойством left;
- posTop - задает или возвращает численное значение вертикальной позиции верхней
границы элемента в единицах измерения, заданных свойством top;
- posRight - задает или возвращает численное значение горизонтальной позиции
правой границы элемента в единицах измерения, заданных свойством right;
- posBottom - задает или возвращает численное значение вертикальной позиции
нижней границы элемента в единицах измерения, заданных свойством bottom.
2 Организация движения объектов на Web-странице
Движение элемента на Web-странице осуществляется путем изменения значений
свойств, задающих его координаты.
Изменение координат элемента может быть
реализовано:
- путем программно организованного циклического процесса (см. пример № 1
);
по событиям мышки (см. пример № 2);
путем"привязки" элемента к курсору мышки, т.е. путем задания координат
элемента, равнымы координатам курсора мышки (см. пример № 3);
по событиям клавиатуры (см. описание лаб. работы № 5 "Работа с клавиатурой").
2.1 Изменение координат элемента с помощью циклического
процесса
Для организации циклического процесса могут быть использованы следующие методы
объекта window:
- setTimeout("функция или
выражение", интервал [,список аргументов функции, разделенных запятыми]):
вычисляет значение выражения или вызывает функцию по истечению заданного
интервала (в миллисекундах), если до этого не был вызван метод clearTimeout(), может
передавать в функцию заданные в списке аргументы, возвращает указатель на
объект таймера, который может быть использован в методе clearTimeout() для остановки и уничтожения
таймера;
- clearTimeout(таймер):
останавливает таймер, установленный методом setTimeout();
- setInterval("функция или
выражение", интервал [,список аргументов функции, разделенных запятыми]): вычисляет значение выражения или вызывает функцию каждый
раз по истечению данного интервала (в миллисекундах), если до этого не был
вызван метод clearTimeout(),
может передавать в функцию заданные в списке аргументы, возвращает указатель на
объект таймера, который может быть использован в методе clearTimeout() для остановки и уничтожения
таймера;
- clearInterval(таймер):
останавливает таймер, установленный методом setInterval().
Использование метода setTimeout() для организации
движения элемента показано в примере № 1, где
реализовано движение элемента Web-страницы - буквы Z, заданной с помощью тэга
<P>, по траектории в виде синусоиды ():
Пример 1
<HTML>
<HEAD>
<TITLE>Изменение координат элемента с помощью циклического процесса</TITLE>
<SCRIPT>
x=0; y=100; dx=0; dy=0;
function f(x) { return 60*Math.sin(x*Math.PI/180);}
function moveTxt()
{
if ((z.style.pixelLeft<document.body.clientWidth-30)
&& (z.style.pixelTop>30))
{
z.style.left=x+dx;
z.style.top=y+dy-f(x+dx);
dx+=20;
dy+=7;
setTimeout("moveTxt()",125);
}
}
</SCRIPT>
</HEAD>
<BODY>
<P ID="z" STYLE="color:blue;font:8mm;
position:absolute;left:0;top:100"
onClick="moveTxt()">Z</P>
</BODY>
</HTML>
В примере 1 с помощью функции f(x) реализовано
движение объекта справа налево и сверху вниз по синусоиде
y=60sin(x). Поскольку траектория указана в виде
тригометрической функции, для ее задания был использован объект
Math, свойства и методы которого описаны в разделе 3.
При этом было выполнено преобразование аргумента функции
sin(x) из градусов в радианы. Направление и скорость
движения объекта зависит от величины и знака приращений его координат
dx и dy. На скорость
движения также влияет промежуток времени, через который эти приращения
происходят (2-й параметр метода setTimeout()).
Выбор амплитуды и скорости движения в примере 1
осуществлен из соображений наглядности.
По щелчку мышки по букве Z вызывается функция
moveTxt(), которая осуществляет движение этого элемента
из точки окна браузера с координатами: left=0;
top=100 путем задания приращений его координатам
left и top:
z.style.left=x+dx;
z.style.top=y+dy-f(x+dx);
до тех пор, пока он не приблизится к границам окна браузера
(граница не достигается, чтобы буква Z оставалась в области полной видимости).
Значения левой и нижней границы окна браузера
определяются с помощью свойств тэга <BODY> clientWidth и
clientHeight. Эти свойства могут быть использованы
для определения размеров любых элементов Web-страницы, которые имеют ширину и
высоту.
При использовании альтернативных методов
setInterval() и
clearInterval() описание функции
moveTxt() необходимо несколько изменить:
function moveTxt()
{
if ((z.style.pixelLeft<document.body.clientWidth-30)
&& (z.style.pixelTop>30))
{
z.style.left=x+dx;
z.style.top=y+dy-f(x+dx);
dx+=20;
dy+=7;
}
else clearInterval(timer);
}
Кроме того, вызов функции moveTxt() в этом случае
следует выполнять так:
onClick="timer=setInterval('moveTxt()',125);"
2.2 Изменение координат элемента по событиям мышки
Движение элемента Web-страницы по экрану кроме рассмотренного выше способа
изменения его координат с помощью программно организованного циклического
процесса, может осуществить сам пользователь Web-сайта с помощью мышки.
В примере № 2
описана функция runRef(), которая каждый раз при
достижении указателем мышки ссылки Ссылка или
при движении указателя мышки по ссылке выполняет приращения координат этого
элемента, реализуя эффект "убегающей" от пользователя ссылки. Все его попытки
щелкнуть по ссылке, чтобы загрузить новую страницу
(js_1.htm), оказываются безрезультатными.
С помощью переменных dx
и dy, которые меняют свой знак на противоложный при
достижении соответственно вертикальных или горизонтальных границ окна браузера,
реализовано отражение ссылки при движении по экрану от его границ.
Вызов функции runRef()
как по событию Mousemove, так и по событию
Mouseover обеспечивает более надежную защиту ссылки
от щелчка мышки.
Пример 2
<HTML>
<HEAD>
<TITLE>Организация движения элементов Web-страницы с помощью
мышки </TITLE>
<SCRIPT>
dx=10; dy=10;
function runRef()
{
if ((parseInt(m.style.left)<25) ||
(parseInt(m.style.left)>document.body.clientWidth-25)) dx=-dx;
if ((m.style.posTop<25) ||
(m.style.posTop>document.body.clientHeight-25)) dy=-dy;
m.style.pixelLeft+=dx;
m.style.pixelTop+=dy;
}
</SCRIPT>
</HEAD>
<BODY">
<A NAME="m" HREF="js_1.htm"
STYLE="position:absolute;left:100;top:100;color:red"
onMousemove="runRef()"
onMouseover="runRef()">
Ссылка
</A>
</BODY>
</HTML>
2.3 Перетаскивание элементов
Перетаскивание элементов Web-страницы с помощью мышки реализуется путем
присваивания текущим координатам перемещаемого элемента текущих координат мышки.
Доступ к координатам мышки можно осуществить, используя такие свойства объекта
event:
- clientX -
возвращает горизонтальную координату курсора мышки относительно клиенткой
части окна (без учета рамок, заголовка, строки меню, панели инстументов и
строки состояния);
- clientY -
возвращает вертикальную координату курсора мышки относительно клиенткой части
окна (без учета рамок, заголовка, строки меню, панели инстументов и строки
состояния);
- offsetX -
возвращает горизонтальную координату курсора мышки относительно элемента
страницы, вызвавшего это событие;
- offsetY -
возвращает вертикальную координату курсора мышки относительно элемента
страницы, вызвавшего это событие;
- screenX -
возвращает горизонтальную координату курсора мышки относительно экрана;
- screenY -
возвращает вертикальную координату курсора мышки относительно экрана;
- x - возвращает
горизонтальную координату курсора мышки относительно родительского элемента;
- y - возвращает
вертикальную координату курсора мышки относительно родительского элемента.
В примере № 3 создается Web-страница,
содержащая три элемента - рисунок и два слова "ТЕКСТ" одинакового размера, но
разных цветов.
Пример 3
<HTML>
<HEAD>
<TITLE>Перетаскивание элементов Web-страницы</TITLE>
<SCRIPT>
var n=0; l=0;
function drag()
{
with (document.all(n).style)
{
position="absolute";
/* window.status= "n="+n+" z-index="+l+" left="+pixelLeft+"
top="+pixelTop+
" x="+event.x+" y="+event.y; */
left=event.x;
top=event.y;
zIndex=l;
}
}
</SCRIPT>
</HEAD>
<BODY onClick="n=event.srcElement.sourceIndex;"
onContextmenu="if(l==2) l=0; else l++;return false"
onMousemove="drag()">
<IMG SRC="fish.gif" >
<P STYLE="color:#0FF;font:8mm">TEXT1
<P STYLE="color:#F0F;font:8mm">TEXT2
</BODY>
</HTML>
При щелчке мышки по любому из этих объектов (по событию
Click) для отмеченного объекта устанавливается режим
перетаскивания: в переменную n заносится порядковый
номер этого элемента Web-страницы, например, для рисунка: n=5, для первого
текста: n=6, для второго: n=7 (при щелчке по свободному пространству окна
браузера n принимает значение 4 - номер тэга BODY).
Режим перетаскивания отмеченного объекта
реализуется путем вызова при движении мышки (по событию
Mousemove) функции
drag(), которая выполняет следующие действия:
- устанавливает для объекта с номером n абсолютное позиционирование;
- присваивает горизонтальной и вертикальной координатам этого объекта
соответственно горизонтальную и вертикальную координату указателя мышкки,
что позволяет ему перемещаться за движущейся мышкой;
- устанавливает для объекта текущее значение свойства
z-index, заданное в переменной l.
При щелчке правой кнопкой мышки (по событию
Contextmenu) циклически меняется значение переменной
l (0,1,2,0,...), задающей текущее значение свойства
z-index, что позволяет любому объекту при задании
соответствующего значения или перекрывать другие объкты Web-страницы, или
располагаться под ними.
Для отмены режима перетаскивания отмеченного объекта
необходимо повторно щелчкнуть мышкой. При этом в переменную
n заносится номер уже нового объекта - того, который
в момент щелчка находился под перетаскиваемым объектом. Это связано с тем, что
при движении координаты указателя мышки на пиксел опережают координаты самого
объекта. В этом случае для нового объекта устанавливается режим перетаскивания
(если только этим объектом не является тэг BODY).
Добавим, что закомментированные строки функции
drag() были использованы при отладке программы для вывода
в поле статуса окна браузера значений таких контрольных данных: номер,
z-index и координаты перетаскиваемого объекта, а
также координаты мышки.
3 Свойства и методы объекта Math
Объект Math позволяет программистам использовать
математические константы и функции при написании программ на JavaScript.
Имеет следующие свойства:
- E - возвращает константу Эйлера (e);
- LN10 - возвращает значение ln 10;
- LN2 - возвращает значение ln2;
- LOG10E - возвращает значение lg e;
- LOG2E - возвращает значение log2e;
- PI - возвращает значение 3,14159...
и методы:
- abs(число) - возвращает абсолютное значение аргумента;
- acos(число) - возвращает арккосинус аргумента в радианах;
- asin(число) - возвращает арксинус аргумента в радианах;
- atan(число) - возвращает арктангенс аргумента в радианах;
- atan2(x, y) - возвращает угол в радианах между горизонтальной осью и
прямой проведенной через начало координат и точку с координатми x, y;
- ceil(число) - возвращает ближайшее целое число, большее или равное аргументу;
- cos(число) - возвращает косинус аргумента в радианах;
- exp(число) - возвращает значение eчисло;
- floor(число) - возвращает ближайшее целое число, меньше аргумента или равное ему;
- log(число) - возвращает натуральный логарифм аргумента;
- max(список аргументов, разделенный запятыми) - возвращает максимальный из
аргументов; если не задан ни один аргумент возвращает значение NEGATIVE
INFINITY ("минус бесконечность"); если один из аргументов равен NaN (Not
a Number - "не число"), возвращается NaN;
- min(список аргументов, разделенный запятыми) - возвращает минимальный из
аргументов; если не задан ни один аргумент возвращает значение POSITIVE
INFINITY ("плюс бесконечность"); если один из аргументов равен NaN,
возвращается NaN;
- pow(основание, порядок) - возвращает значение основаниепорядок;
- random() - возвращает псевдослучайное число от 0 включительно до 1
исключительно;
- round(число) - возвращает значение оргумента, округленное до ближайшего
целого;
- sin(число) - возвращает синус аргумента в радианах;
- sqrt(число) - возвращает квадратный корень от аргумента;
- tan(число) - возвращает тангенс аргумента в радианах.
Индивидуальные задания
На языке JavaScript разработать программные средства, выполняющие следующие действия:
- по событию 1 отметить указанный в таблице объект, изменив одно или несколько
его свойств;
- по событию 2 осуществить движение этого объекта из заданной точки (x,y)
экрана по траектории, заданной функцией f(x) и направлением ("куда") в соответствии с
указанным режимом:
- 1 - до достижения границ окна браузера;
- 2 - до достижения границ окна браузера после однократного отражения;
- 2 - непрерывное движение с многократными отражениями от границ окна
браузера.
надо выполнять с отражением от границ окна браузера.
- амплитуду и скорость движения выбирать из соображения наглядности.
| № | Объект | Параметры движения
| События
|
|---|
| (x,y) | f(x) | Куда | Режим | 1 | 2
|
|---|
| 1 | Слово | X=0;Y=450 | 2x+5 | Вправо/вверх | 3 | Click | Click
|
| 2 | Рисунок | X=300;Y=400 | 25cos(x) | Вверх | 2 | Click | Contextmenu
|
| 3 | Ссылка | X=450;Y=220 | 40sin(3x) | Влево | 2 | Click | Mouseover
|
| 4 | Таблица | X=600;Y=400 | x*x/500 | Влево/вверх | 3 | Click> | Mousemove
|
| 5 | Буква | X=200;Y=0 | exp(x/100) | Вниз | 2 | Dblclick | Dblclick
|
| 6 | Рисунок | X=10;Y=300 | 30log(x+10) | Вправо | 2 | Dblclick | Contextmenu
|
| 7 | Ссылка | X=600;Y=200 | 10tan(x) | Влево | 2 | Dblclick | Mouseover
|
| 8 | Слово | X=50;Y=50 | 0.001x*x+x | Вправо/вниз | 3 | Dblclick | Mousemove
|
| 9 | Кнопка | X=500;Y=5 | 60sin(x*x) | Влево/вниз | 1 | Contextmenu | Contextmenu
|
| 10 | Буква | X=250;Y=450 | 25cos(2x+1) | Вверх | 2 | Contextmenu | Click
|
| 11 | Кнопка | X=350;Y=0 | 0.5exp(x/250) | Вниз | 2 | Contextmenu | Dblclick
|
| 12 | Ссылка | X=75;Y=175 | 50log(x+5)-50 | Вправо | 3 | Contextmenu | Mouseover
|
| 13 | Форма | X=20;Y=420 | 0.2x+45 | Вправо/вверх | 3 | Contextmenu | Mousemove
|
| 14 | Список OL | X=550;Y=20 | -2.5x+15 | Влево/вниз | 1 | Mouseover | Click
|
| 15 | Число | X=650;Y=510 | 1000/(x+25) | Влево/вверх | 1 | Mouseover | Dblclick
|
| 16 | IFRAME | X=20;Y=80 | x*x*x/(x*x+125)) | Вправо/вниз | 3 | Mouseover | Contextmenu
|
| 17 | Список UL | X=20;Y=330 | x0.75-15 | Вправо | 2 | Mouseover | Mouseout
|
| 18 | radio | X=620;Y=280 | x1.05-x | Влево | 2 | Mousemove | Click
|
| 19 | checkbox | X=20;Y=440 | x0.5-50 | Вправо/вверх | 3 | Mousemove | Dblclick
|
| 20 | SELECT | X=580;Y=590 | (x*x+x+10)0.5 | Влево/вверх | 2 | Mousemove | Contextmenu
|