Читайте также:
|
· tgdaily.com
Доступ к свойствам объектов на Web-странице с помощью языка JavaScript
В соответствии с объектной моделью документа DOM (Document Object Model), которая поддерживается языком JavaScript, все объекты (тэги) Web-страницы помещены в коллекцию (набор) document.all с возможностью программного доступа к любому из них для определения или изменения их свойств.
Наиболее простым способом доступа к объекту на Web-странице является доступ по его идентификатору. В этом случае применяется следующая форма:
document.all("идентификатор").свойство
или более простая форма, которую поддерживает браузер Microsoft Internet Explorer, и которой мы в дальнейшем будем придерживаться:
идентификатор.свойство,
где
идентификатор - это идентификатор тэга, заданный с помощью параметра ID, например <P ID="txt">. Для тех тэгов, для которых допускается использование параметра NAME, например, таких как <IMG>, <A>, а также элементов тэга <FORM>, в качестве идентификатора вместо параметра ID можно использовать параметр NAME: <IMG NAME="img1"... >.
Свойство - это или HTML-наименование параметра тэга, или наименование свойства CSS, заданного для этого тэга. В последнем случает используется следующее правило указания свойств CSS на языке JavaScript: если свойство CSS состоит из нескольких слов, записанных через дефис, то в обозначении свойства для JavaScript все знаки дефиса убираются, первое слово свойства пишется с прописной буквы, а второе слово и последующие слова свойства пишутся с заглавной буквы. Например, свойство CSS font-size на JavaScript будет выглядеть так: fontSize, а свойство CSS list-style-image:url(URL) так: listStyleImage="url(URL)". Использование свойств CSS в JavaScript приведено в примере № 1. Оглавление
Обработка событий на Web-странице
К событиям на Web-странице относятся как действия пользователя, связанные с работой с мышью и клавиатурой, так и действия браузера, связанные с загрузкой, выгрузкой Web-страниц и др.
JavaScript поддерживает следующие обработчики событий:
onMouseover - вызывается по событию Mouseover: наведение указателя мыши на объект;
onMouseout - вызывается по событию Mouseout: указатель мыши снимается с объекта:
onMousemove - вызывается по событию Mousemove: указатель мыши помещается на объект или двигается по объекту;
onClick - вызывается по событию Click: щелчок (нажатие левой клавиши мыши);
onDblclick - вызывается по событию Dblclick: двойной щелчок;
onContextmenu - вызывается по событию Contextmenu: нажатие правой клавиши мыши;
onKeydown - вызывается по событию Keydown: нажатие клавиши клавиатуры;
onKeypress - вызывается по событию Keypress: нажатие и удерживание клавиши клавиатуры;
onKeyup - вызывается по событию Keyup: отжатие клавиши клавиатуры;
onLoad - вызывается по событию Load: загрузка Web-страницы;
onUnload - вызывается по событию Unload: выгрузка Web-страницы;
onHelp - вызывается по событию Help: нажатие клавиши помощи F1;
onFocus - вызывается по событию Focus: установка фокуса поля (при щелчке мыши по полю);
onBlur - вызывается по событию Blur: снятие фокуса.
Для обработки события в языке JavaScript используется такая конструкция:
Обработчик события="действия по обработке события",
где Обработчик события - это один из перечисленных выше обработчиков событий; действия по обработке события - это или вызов функции, или встроенный фрагмент программы на JavaScript.
Эта конструкция помещается в тот тэг, параметры которого должны быть изменены при совершении события, связанного с работой мыши. Обработчики событий, связанных с нажатием клавиш клавиатуры или с работой браузера, помещаются в тэг <BODY>.
При обработке событий, касающихся клавиатуры, определить ASCII-код (точнее Unicode) нажатой или отжатой клавиши можно так:
event.keyCode.
Для определения самого символа используется следующий метод объекта String: String.fromCharCode(Unicode).
В примере № 1 показано применение двух функций - changeHeader() и restoreHeader().
Первая из нихх вызывается по наведению мыши на заголовок "ЗАГОЛОВОК ПАРАГРАФА" (тэг <H1 ID="hd"> со значением идентификатора, равным "hd") и изменяет некоторые его свойства: используя параметр HTML ALIGN выравнивает по центру экрана, используя свойство CSS - увеличивает в два раза размер, меняет цвет, жирность и наклон. Кроме того эта функция задает фон в виде рисунка, изменяя параметр BACKGROUND тэга <BODY>.
Вторая функция восстанавливает исходные свойства фона и заголовка при снятии с него указателя мыши.
Для того, чтобы сделать программу более компактной в функции restoreHeader() применяется оператор with.
Пример 1
<HTML>
<HEAD>
<TITLE>Изменение свойств объектов на Web-странице </TITLE>
<SCRIPT>
n=9;
function changeHeader() // Изменение свойств H1
{
bod.background="back1.gif";
hd.align="center";
document.all("hd").style.color="#00F";
hd.style.fontSize=2*n+"mm";
hd.style.fontWeight="normal";
hd.style.fontStyle="italic";
}
function restoreHeader() // Восстановление свойств H1
{
bod.background="";
hd.align="left";
with (hd.style)
{
color="black";
fontSize="9mm";
fontWeight="bold";
fontStyle="normal";
}
}
</SCRIPT>
</HEAD>
<BODY ID="bod">
<H1 ID="hd" onMouseover="changeHeader()"
onMouseout="restoreHeader()"> ЗАГОЛОВОК </H1>
</BODY>
</HTML>
Тема: Организация движения объектов на Web-странице
1 Доступ к отмеченным объектам на Web-странице
2 Организация движения объектов на Web-странице
Дата добавления: 2014-12-18; просмотров: 25 | Поможем написать вашу работу | Нарушение авторских прав |