ЗАГОЛОВОК
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 задає координату x об'єкта, що у разі позиціонування в абсолютних координатах (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>
