ОГЛАВЛЕНИЕ
1 Доступ к отмеченным объектам в JavaScript
2 Организация движения объектов в JavaScript
Пример 1
1 Доступ к отмеченным объектам в JavaScript
В "Объекты в html" был рассмотрен способ доступа к объектам на Web-странице с помощью их идентификаторов. Этот метод прост, но требует для каждого объекта, свойства которого необходимо изменить, задания его идентификатора. При большом числе объектов на Web-странице это может вызвать затруднения.
Другим, более универсальным, способом доступа к объектам, является доступ к отмеченным объектам. Для того, чтобы отметить тэг, свойства которого необходимо определить или изменить, достаточно подвести к нему указатель мыши и выполнить одно из событий, совершаемых с помощью мыши, - Mouseover, Mousemove, Mouseout, Click, Dblclick или Contextmenu (описание событий смотрите в Объекты в html). При таком подходе не требуется, чтобы объекты имели идентификаторы.
Доступ к отмеченным элементам и его свойствам осуществляется с помощью такой конструкции:
window.event.srcElement.свойство,
где window.event.srcElement - отмеченный объект; свойство - одно из его свойств.
Одним из важных свойств объекта является свойство parentElement, которое указывает на родительский объект. Например, для тэга <BODY> родительским тэгом будет <HTML>. Тогда к свойствам родительского тэга можно обратиться следующим образом: window.event.srcElement.parentElement.свойство. Используя данную конструкцию можно обратиться к свойствам родителя данного родителя, т.е. деда и т.д.
Изменение свойств отмеченного объекта производится так же, как показано в Объекты в html, только вместо указания идентификатора объекта используется приведенная выше конструкция. Например, для изменения цвета отмеченного объекта можно воспользоваться следующим оператором JavaScript: window.event.srcElement.style.color="red".
Если отмеченный объект необходимо использовать не сразу, то можно при его отметке с помощью свойства sourceIndex запомнить его номер (согласно объектной модели документа каждый объект имеет свой номер, например, номер объекта <HTML> равен 0). Тогда номер объекта, отмеченного, например, щелчком мыши можно определить так: onClick="num=window.event.srcElement.sourceIndex".
В дальнейшем доступ к отмеченному объекту с номером num можно осуществить следующим образом:
document.all(num).свойство.
2 Организация движения объектов в JavaScript
Режим позиционирования объекта, т.е. помещения его на экран задается с помощью свойства CSS position, которое имеет следующие значения:
- static - положение объекта на экране задается браузером в соответствии с порядком, в котором объект указан в HTML-документе (режим задан по умолчанию и не использует координат объекта);
- relative - положение объекта на экране задается с помощью координат относительно того места на экране, куда браузер поместил бы объект в режиме static;
- absolute - положение объекта на экране задается с помощью его координат относительно левого верхнего угла экрана.
Движение объекта на Web-странице осуществляется путем изменения свойств, задающих его координаты. В CSS координаты объекта задаются с помощью свойств left и top.
Свойство left задает горизонтальную координату объекта, которая в случае позиционирования в абсолютных координатах (position:absolute) задает расстояние в пикселях от левой границы экрана.
Свойство top задает вертикальную координату объекта, которая в случае позиционирования в абсолютных координатах задает расстояние в пикселях от верхней границы экрана.
При движении объекта важно знать размеры экрана браузера. Свойство объекта <BODY> document.body.clientWidth указывает на ширину экрана в пикселях, а свойство document.body.clientHeight - на высоту экрана в пикселях.
В примере № 1 показано применение средств CSS и JavaScript для организации движения буквы Z (тэг <P>) из точки с координатами: left=0; top=200 слева направо по синусоиде: f(x)=50sin(x). Для того, чтобы буква в конце движения осталась внутри экрана в качестве линий окончания движения приняты линии в 25 пикселей от правой и верхней границ экрана.
Отметка объекта осуществляется по щелчку мыши (буква становится красной). Движение начинается по нажатию любой клавиши клавиатуры.
Пример 1
<HTML>
<HEAD>
<TITLE> Движение в JavaScript </TITLE>
<SCRIPT>
T=0; X=0; Y=200;
function f(x)
{
return 50*Math.sin(x*Math.PI/180); // x указан в градусах
}
function moveZ() //Движение буквы Z
{
with (document.all(n))
if ((style.pixelLeft<document.body.clientWidth-25)
&& (style.pixelTop>25))
{
style.pixelLeft=X+T;
style.pixelTop=Y-f(T);
T+=10; //Скорость движения
setTimeout("moveTxt()",250)
}
}
</SCRIPT>
</HEAD>
<BODY onKeydown="moveZ()">
<P style="color:blue;font-size=8mm;
position:absolute;left:0;top:200"
onMouseover="window.event.srcElement.style.color='red'; n=window.event.srcElement.sourceIndex"> Z
</BODY>
</HTML>
