Динамический HTML (DHTML) представляет собой комбинацию таких web-технологий, как CSS (форматирует объекты на web-странице), JavaScript (изменяет объекты на web-странице), DOM (находит объекты на web-странице), предназначенных для увеличения интерактивности web-страниц. Каскадные таблицы стилей (CSS) определяют свойства элементов на странице. Объектная модель документа (Document Object Model, DOM) определяет иерархию всех объектов в окне браузера. С помощью JavaScript создаются простые программные коды, которые выполняются браузером на стороне клиента без обращения к web-серверу (клиентские скрипты) и управляют функционированием объектов на странице.
Программный код на языке JavaScript оформляется в виде функций. Синтаксис определения функции показан ниже:
</head>
<script language="JavaScript">
function [имя функции]([список параметров]){
[строки тела функции];
return [значение];
}
</script>
<body>
В сценариях JavaScript можно использовать переменные, ссылаясь на них по имени. Переменные бывают глобальные (определенные вне какой-либо функции), так и локальные (определенные внутри функции). Для объявление переменной используется следующий синтаксис:
var [имя переменной];
Тип переменной при ее объявлении не указывается. Тип переменной определяется из того значения, которое переменной присваивается. Присвоить значение переменной можно при помощи оператора присваивания (=). В JavaScript различают следующие типы:
- число, например 12 или 34.79;
- строка, например "функция";
- логический, могут принимать только два значения - true или false;
Операторы языка JavaScript повторяют общеизвестные операторы языка С. Унарные операторы: "-" - изменение знака на противоположный; "++" - увеличения значения переменной на 1; "--" - уменьшение значения переменой на 1. Бинарные операторы: "+" - сложение; "-" - вычитание; "*" - умножение; "/" - деление; "%" - вычисление остатка от деления. Операторы отношения: ">" - больше; ">=" - больше или равно; "<" - меньше; "<=" - меньше или равно; "==" - равно; "!=" - не равно. Логические операторы: "||" - логическое ИЛИ; "&&" - логическое И; "!" - логическое отрицание. Кроме обычного оператора присваивания "=", в языке JavaScript, так же как и в С, можно использовать операторы присваивания со сложением "+=", с вычитанием "-=", с умножением "*=", с делением "/=", с вычислением остатка от деления "%=".
Условный оператор языка JavaScript повторяет условный оператор языка С. Общий вид условного оператора следующий:
if ([условие]){
[операторы]
}
else{
[операторы]
}
Операторы цикла языка JavaScript также повторяют аналогичные операторы языка С. Общий вид цикла со счетчиком следующий:
for ([инициализация счетчика]; [условие]; [обновление счетчика]){
[операторы]
}
Общий вид цикла с условием следующий:
while ([условие]){
[операторы]
}
Модель DOM позволяет находить адрес для различных элементов на странице. Затем, зная адрес элемента, с помощью JavaScript можно изменить те или иные свойства объекта или определить его реакцию на то или иное событие. Для идентификации объекта на странице (определения его идентификатора) используется атрибут тега ID, значение которого должно быть уникально в пределах страницы. Также в модели DOM определены два важных объекта - document и window.
Объект document представляет собой страницу в окне браузера и используется для доступа к объектам на странице, их изменению, добавлению и удалению. Объект window представляет собой окно браузера и предоставляет возможность доступа к странице, загруженной в браузер, информации о браузере и событиях в окне браузера.
Событиями называются какие-либо действия в окне браузера, инициатором которых обычно является пользователь. Перечень событий, которые используются чаще всего:
- onload - происходит после загрузки объекта;
- onunload - происходит при выгрузки объекта;
- onfocus - происходит при получении элементом фокуса ввода;
- onblur - происходит при потере элементом фокуса ввода;
- onmouseover - происходит при попадании указателя мыши в область, занимаемой элементом;
- onmouseout - происходит при выходе указателя мыши из области, занимаемой элементом;
- onclick - происходит при щелчке мышью на области, занимаемой элементом;
- onmousedown - происходит при нажатии кнопки мыши на области, занимаемой элементом;
- onmouseup - происходит при отпускании кнопки мыши на области, занимаемой элементом;
- onmousemove - происходит при перемещении мыши над областью, занимаемой элементом;
- onkeydown - происходит при нажатии клавиши на клавиатуре;
- onkeyup - происходит при отпускании клавиши на клавиатуре;
- onkeypress - происходит при нажатии и отпускании клавиши на клавиатуре.
Обработчик события (event handler) позволяет определить действия, связанные с каким-либо событием. Для создания обработчика события необходимо указать в качестве атрибута тега имя события и либо функцию JavaScript, вызываемую при наступлении события, либо код на языке JavaScript. Синтаксис обработчика события следующий:
<тег событие="функция JavaScript()">
или
<тег событие="код на JavaScript">
Для получения доступа к объекту на странице необходимо либо сослаться на его идентификатор, либо воспользоваться методом getElementByID объекта document, в качестве параметра которого указывается идентификатор объекта, заключенный в кавычки. Для изменения атрибута объекта необходимо присвоить ему требуемое значение.
ID.атрибут=значение;
или
var obj=document.getElementByID("ID");
obj.атрибут=значение;
Для изменения параметра стиля объекта необходимо использовать атрибут style, после которого указывается имя параметра стиля.
ID.style.параметр=значение;
или
var obj=document.getElementByID("ID");
obj.style.параметр=значение;
Для передачи информации о событии функции JavaScript, вызываемой при обработке событий, необходимо указать параметр функции с именем event. Используя объект event можно определить объект, для которого произошло событие, состоянии клавиш клавиатуры в момент события, положении курсора мыши и состоянии клавиш мыши.
<тег событие="функция JavaScript(event)">
Для вывода сообщений на экран можно воспользоваться функцией языка JavaScript alert:
alert("текст сообщения");
В браузере Internet Explorer можно также вывести сообщение в статусную строку окна, используя свойство status объекта window:
window.status="текст сообщения";
Для определения размеров объекта на странице, его положения, видимости, перекрывания с другими объектами, необходимо воспользоваться моделью DOM. Для изменения ширины и высоты объекта используются свойства style.width и style.height. Для изменения положения верхнего левого угла объекта используются свойства style.top и style.left. Для изменения трехмерного положения объекта используется свойство style.zIndex. Для управления видимостью объекта используются свойство style.visibility со значениями visible или hidden или свойство style.display со значениями none, inline или block.
Модель DOM позволяет динамически изменить стилевой класс объектов на странице. Для этой цели используется свойство className объекта.
Для определения и изменения содержимого объекта на странице необходимо использовать свойства innerHTML и innerText объекта. Разница между этими свойствами заключается в том, что свойство innerText предоставляет доступ только к текстовому содержимому объекта, в то время как свойство innerHTML позволяет изменять содержимое объекта на языке HTML.
