Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
DHTML и JavaScript на web-страницах
Цель работы: ознакомиться с основными возможностями языка JavaScript, синтаксисом, встроенными объектами, событиями DHTML, получить практические навыки программирования на языке JavaScript.
Основные понятия
JavaScript — это язык программирования, основанный на объектах: и языковые средства, и возможности среды представляются объектами, а сценарий (программа) на JavaScript — это набор взаимодействующих объектов.
Программа (сценарий) на языке JavaScript — это текст, состоящий из операторов, блоков, т. е. взаимосвязанных наборов операторов, и комментариев. Операторы могут содержать переменные, константы и выражения. Следующий пример начинается с определения функции, которое состоит из блока, содержащего два оператора. За определением следуют два оператора, не образующих блока.
function convert(inches) {
cm = inches * 2.54; // Эти два оператора заключены в блок.
meters = inches / 39.37;
}
convert(inches); // Эти два оператора не образуют блока.
km = meters / 1000;
Как мы видим из этого примера, каждый оператор JavaScript начинается с новой строки (что не обязательно, но рекомендуется) и заканчивается точкой с запятой (что также не обязательно, если оператор является последним в строке). Блок — это набор операторов, заключенный в фигурные скобки {}.
Комментарии в JavaScript могут быть однострочными и многострочными. Однострочные комментарии начинаются с символов // и продолжаются до конца текущей строки, как показано в приведенном выше примере. Многострочные комментарии заключаются в маркеры /* и */, например:
/* Это пример комментария,
содержащего несколько строк. */
Переменные используются в качестве символических имен, принимающих различные значения. Имена переменных задаются идентификаторами. Переменная создается в момент ее декларации. JavaScript позволяет декларировать переменную двумя способами:
Существуют три области видимости переменных:
Операции сравнения сравнивают два операнда и возвращают логическое значение, означающее результат этого сравнения. Строки сравниваются в лексикографическом порядке в кодировке Unicode. Если типы операндов различны, то делается попытка преобразовать их к одному типу.
|
Операция |
Название |
Описание |
|
a < b |
Меньше |
Возвращает true, если левый операнд меньше, чем правый операнд. |
|
a > b |
Больше |
Возвращает true, если левый операнд больше, чем правый операнд. |
|
a <= b |
Не больше |
Возвращает true, если левый операнд меньше или равен правому операнду. |
|
a => b |
Не меньше |
Возвращает true, если левый операнд больше или равен правому операнду. |
|
a == b |
Равно |
Возвращает true, если левый операнд равен правому операнду. |
|
a != b |
Не равно |
Возвращает true, если левый операнд не равен правому операнду. |
|
a === b |
Тождественно |
Возвращает true, если левый операнд тождественно равен правому операнду. |
|
a !== b |
Не тождественно |
Возвращает true, если левый операнд тождественно не равен правому операнду. |
Примеры:
var x = "3";
a = x == 3; // a равно true
b = x === 3; // b равно false (разные типы)
Арифметические операции применяются к числовым операндам и возвращают числовое значение, означающее результат операции. Если типы операндов различны, то делается попытка преобразовать их к числовому типу. При этом:
|
Операция |
Название |
Описание |
|
a + b |
Сложение |
Возвращает сумму двух операндов. |
|
a - b |
Вычитание |
Возвращает разность от вычитания правого операнда из левого. |
|
a * b |
Умножение |
Возвращает произведение двух операндов. |
|
a / b |
Деление |
Возвращает частное от деления левого операнда на правый. |
|
a % b |
Остаток по модулю |
Возвращает целый остаток от деления левого операнда на правый. Плавающие числа перед операцией округляются до целых. |
|
++ |
Инкремент |
Унарная операция. Увеличивает значение переменной на 1. Если используется как префикс (++a), возвращает значение операнда после увеличения его на 1. Если используется как постфикс (a++), возвращает значение операнда перед увеличением его на 1. |
|
-- |
Декремент |
Унарная операция. Уменьшает значение переменной на 1. Если используется как префикс (--a), возвращает значение операнда после уменьшения его на 1. Если используется как постфикс (a--), возвращает значение операнда перед уменьшением его на 1. |
|
-a |
Смена знака |
Унарная операция. Возвращает арифметическое отрицание операнда. |
Примеры:
var i, j, k;
i = 19 % 6.8; // i равно 5
k = 2;
j = k++; // j равно 2, k равно 3
j = ++k; // j и k равны 4
Битовые операции применяются к числовым операндам, представленным как двоичные числа (т. е. как цепочки из 32 битов), и возвращают числовое значение, означающее результат операции. Перед выполнением операции операнды преобразуются в целые числа, а результат операции преобразуется в Number.
|
Операция |
Название |
Описание |
|
a & b |
Побитовое AND |
Возвращает в каждой битовой позиции 1, если соответствующие позиции обоих операндов равны 1. |
|
a | b |
Побитовое OR |
Возвращает в каждой битовой позиции 1, если соответствующая позиция хотя бы одного операнда равна 1. |
|
a ^ b |
Побитовое XOR |
Возвращает в каждой битовой позиции 1, если соответствующая позиция ровно одного операнда равна 1. |
|
~a |
Побитовое NOT |
Унарная операция. Инвертирует каждую битовую позицию операнда. |
|
a << b |
Сдвиг влево |
Сдвигает двоичное представление левого операнда влево на количество бит, заданное вторым операндом. Освобождающиеся справа биты заполняются нулями. |
|
a >> b |
Арифметический сдвиг вправо |
Сдвигает двоичное представление левого операнда вправо на количество бит, заданное вторым операндом. Освобождающиеся слева биты заполняются старшим (знаковым) битом. |
|
a >>> b |
Логический сдвиг вправо |
Сдвигает двоичное представление левого операнда вправо на количество бит, заданное вторым операндом. Освобождающиеся слева биты заполняются нулями. |
Примеры:
var i, j, k;
i = 15; j = 9;
k = i & j; // k равно 9 (1111 & 1001 = 1001)
k = i | j; // k равно 15 (1111 | 1001 = 1111)
k = i ^ j; // k равно 6 (1111 ^ 1001 = 0110)
i = -14; // двоичное значение 11111111 11111111 11111111 11110010
j = i >> 2; // j равно -4 (11111111 11111111 11111111 11111100)
k = i >>> 2; // k равно 1073741820 (00111111 11111111 11111111 11111100)
Логические операции применяются к логическим операндам и возвращают логическое значение, означающее результат операции. Если типы операндов различны, то делается попытка преобразовать их к логическому типу.
|
Операция |
Название |
Описание |
|
a && b |
Логическое AND |
Возвращает true, если оба операнда истинны. Если первый операнд ложен, то возвращает false, не вычисляя значение второго операнда. |
|
a || b |
Логическое OR |
Возвращает true, если хотя бы один операнд истинен. Если первый операнд истинен, то возвращает true, не вычисляя значение второго операнда. |
|
!a |
Логическое NOT |
Унарная операция. Возвращает true, если операнд ложен. |
Примеры:
var i, j, k;
i = 3; j = 5;
k = (i < 4) && (j > 4); // k равно true
k = (i < 4) || (j > 5); // k равно true
k = !k; // k равно false
На сегодняшний день JavaScript поддерживает единственную строковую операцию, а именно конкатенацию строк, которая обозначается символом "+". Если хотя бы один операнд является строкой, то результатом операции является слияние строк-операндов. Примеры:
k = "Моя " + "строка"; // k равно "Моя строка"
text = "Результат: " + 123; // text равно "Результат: 123"
Условная операция
Условная операция — это единственная тернарная операция в JavaScript. Она имеет вид:
test ? value1 : value2
где test — любое логическое выражение, а value1 и value2 — любые выражения. Если test истинно, то операция возвращает значение value1, в противном случае она возвращает значение value2. Пример:
var status = (age >= 18) ? "взрослый" : "подросток";
Основные функциональные блоки
Функция в JavaScript — это набор операторов, выполняющих определенную задачу.
Для того, чтобы пользоваться функцией, мы должны сначала ее определить. Декларация функции имеет вид:
function имя(аргументы?) {
операторы
}
Здесь имя — идентификатор, задающий имя функции, аргументы — необязательный список идентификаторов, разделенных запятыми, который содержит имена формальных аргументов функции, а операторы — любой набор операторов, который называется телом функции и исполняется при ее вызове.
Пример:
function cube(number) {
return number * number * number;
}
Объекты
Объект JavaScript — это неупорядоченный набор свойств. Свойство, являющееся функцией, называется методом.
Все объекты, доступные сценарию на языке JavaScript, подразделяются на три группы:
Примеры создания объектов:
var myBrowser = {name: "Microsoft Internet Explorer", version: "5.5"};
var myBrowser = {name: "Microsoft Internet Explorer", version: "5.5",
options: {enableJava: true, enableCookies: false}};
function Browser(name, version) {
this.name = name;
this.version = version;
}
JavaScript содержит глобальный объект, который является средой его исполняющей системы, а также следующие встроенные объекты:
|
Объект |
Описание |
Объект |
Описание |
|
Array |
Массивы |
Math |
Математические функции и константы |
|
Boolean |
Логические объекты |
Number |
Числовые объекты |
|
Date |
Дата и время |
Object |
Прототип остальных объектов |
|
Error |
Исключения |
RegExp |
Регулярные выражения |
|
Function |
Функции |
String |
Строковые объекты |
Глобальный объект (Global) создается исполняющей системой JavaScript перед началом исполнения сценария. Это единственный объект, который не имеет имени, и потому доступ к его свойствам и методам осуществляется без имени объекта. По этой причине их иногда называют свойствами и методами верхнего уровня.
Свойства глобального объекта
|
Свойство |
Описание |
|
Infinity |
Специальное значение "бесконечность". |
|
NaN |
Специальное значение "не число". |
|
undefined |
Неопределенное значение. |
Методы глобального объекта
|
Метод |
Описание |
|
Boolean |
Преобразует объект в логическое значение. |
|
decodeURI |
Декодирует URI. |
|
decodeURIComponent |
Декодирует компонент URI. |
|
encodeURI |
Кодирует URI. |
|
encodeURIComponent |
Кодирует компонент URI. |
|
escape |
Преобразует строку в шестнадцатеричную кодировку Unicode. |
|
eval |
Исполняет строку кода JavaScript. |
|
isFinite |
Возвращает true, если аргумент является конечным числом. |
|
isNaN |
Возвращает true, если аргумент равен NaN. |
|
Number |
Преобразует объект в число. |
|
Object |
Преобразует значение в объект. |
|
parseFloat |
Преобразует строку в плавающее число. |
|
parseInt |
Преобразует строку в целое число. |
|
String |
Преобразует объект в строку. |
|
unescape |
Преобразует шестнадцатеричную кодировку Unicode в строку. |
Строки
Свойства объекта String
|
Свойство |
Описание |
Член прототипа |
|
constructor |
Конструктор, который создал объект. |
Да |
|
length |
Количество символов в строке. |
Нет |
|
prototype |
Ссылка на прототип класса объектов. |
Нет |
Стандартные методы объекта String
|
Метод |
Описание |
Член прототипа |
|
charAt |
Возвращает символ, находящийся в данной позиции строки. |
Да |
|
charCodeAt |
Возвращает код символа, находящегося в данной позиции строки. |
Да |
|
concat |
Возвращает конкатенацию строк. |
Да |
|
fromCharCode |
Создает строку из символов, заданных кодами Unicode. |
Да |
|
indexOf |
Возвращает позицию первого вхождения заданной подстроки. |
Да |
|
lastIndexOf |
Возвращает позицию последнего вхождения заданной подстроки. |
Да |
|
localeCompare |
Сравнивает две строки с учетом языка операционной системы. |
Да |
|
match |
Сопоставляет строку с регулярным выражением. |
Да |
|
replace |
Сопоставляет строку с регулярным выражением и заменяет найденную подстроку новой подстрокой. |
Да |
|
search |
Ищет сопоставление строки с регулярным выражением. |
Да |
|
slice |
Извлекает часть строки и возвращает новую строку. |
Да |
|
split |
Разбивает строку на массив подстрок. |
Да |
|
substr |
Возвращает подстроку, заданную позицией и длиной. |
Да |
|
substring |
Возвращает подстроку, заданную начальной и конечной позициями. |
Да |
|
toLocaleLowerCase |
Преобразует все буквы строки в строчные с учетом языка операционной системы. |
Да |
|
toLocaleUpperCase |
Преобразует все буквы строки в прописные с учетом языка операционной системы. |
Да |
|
toLowerCase |
Преобразует все буквы строки в строчные. |
Да |
|
toString |
Преобразует объект в строку. |
Да |
|
toUpperCase |
Преобразует все буквы строки в прописные. |
Да |
|
valueOf |
Возвращает примитивное значение объекта. |
Да |
Нестандартные методы объекта String
|
Метод |
Описание |
Член прототипа |
|
anchor |
Создает закладку HTML (<A NAME="имя">…</A>). |
Да |
|
big |
Заключает строку в теги <BIG>…</BIG>. |
Да |
|
blink |
Заключает строку в теги <BLINK>…</BLINK>. |
Да |
|
bold |
Заключает строку в теги <B>…</B>. |
Да |
|
fixed |
Заключает строку в теги <TT>…</TT>. |
Да |
|
fontcolor |
Заключает строку в теги <FONT COLOR="цвет">…</FONT>. |
Да |
|
fontsize |
Заключает строку в теги <FONT SIZE="размер">…</FONT>. |
Да |
|
italics |
Заключает строку в теги <I>…</I>. |
Да |
|
link |
Создает гиперссылку HTML (<A HREF="uri">…</A>). |
Да |
|
small |
Заключает строку в теги <SMALL>…</SMALL>. |
Да |
|
strike |
Заключает строку в теги <STRIKE>…</STRIKE>. |
Да |
|
sub |
Заключает строку в теги <SUB>…</SUB>. |
Да |
|
sup |
Заключает строку в теги <SUP>…</SUP>. |
Да |
Объект Array используется для создания массивов, т. е. упорядоченных наборов элементов любого типа. Доступ к элементу массива производится по его номеру в массиве, называемому индексом элемента; обозначается i-й элемент массива a как a[i]. Элементы массива нумеруются с нуля, т. е. массив a, состоящий из N элементов, содержит элементы a[0], a[1], …, a[N-1].
Для создания массивов используются следующие конструкторы массивов:
new Array()
new Array(размер)
new Array(элемент0, элемент1, …, элементN)
Здесь размер — любое числовое выражение, задающее количество элементов в массиве; элемент0, элемент1, …, элементN — любые выражения.
Примеры:
var a = new Array(5); // массив из 5 элементов
var b = new Array("строка"); // массив из 1 элемента "строка"
var c = new Array(1, 2, 3); // массив из 3 элементов: 1, 2 и 3
var d = ["1", "2", "3"]; // то же самое
Мы можем неявно увеличить размер массива, присвоив значение элементу с несуществующим индексом, например:
var colors = new Array(); // пустой массив
colors[99] = "пурпурный"; // размер массива стал равен 100
Методы объекта Array
|
Метод |
Описание |
Член прототипа |
|
concat |
Объединяет два массива в один новый и возвращает его. |
Да |
|
join |
Объединяет все элементы массива в текстовую строку. |
Да |
|
pop |
Удаляет последний элемент массива. |
Да |
|
push |
Добавляет элементы в конец массива. |
Да |
|
reverse |
Изменяет порядок элементов массива на противоположный. |
Да |
|
shift |
Удаляет первый элемент массива и возвращает его. |
Да |
|
slice |
Извлекает часть массива и возвращает новый массив. |
Да |
|
sort |
Сортирует элементы массива. |
Да |
|
splice |
Заменяет часть массива. |
Да |
|
toLocaleString |
Преобразует массив в строку с учетом формата операционной системы. |
Да |
|
toString |
Преобразует массив в строку. |
Да |
|
unshift |
Добавляет элементы в начало массива. |
Да |
|
valueOf |
Возвращает примитивное значение массива. |
Да |
Объект Date предназначен для манипуляций с датами и временами. Его примитивным значением является число, равное количеству миллисекунд относительно базового времени, равного полуночи 1 января 1970 г. по Гринвичскому меридиану (UTC, Universal Coordinated Time). Если это значение равно NaN, то оно считается неопределенным.
Для создания объектов Date используются следующие конструкторы:
new Date()
new Date(число)
new Date(строка)
new Date(год, месяц, день [,часы [,минуты [,секунды [,мс]?]?]?]?)
Здесь:
Примеры:
var a = new Date(); // текущие дата и время
var b = new Date("May 21, 1958 10:15 AM"); // заданные дата и время
var c = new Date(1958, 4, 21, 10, 15); // то же самое в другом формате
Методы объекта Date
|
Метод |
Описание |
Член прототипа |
|
getDate |
Возвращает день месяца по местному времени. |
Да |
|
getDay |
Возвращает день недели по местному времени. |
Да |
|
getFullYear |
Возвращает полный номер года по местному времени. |
Да |
|
getHours |
Возвращает часы по местному времени. |
Да |
|
getMilliseconds |
Возвращает миллисекунды по местному времени. |
Да |
|
getMinutes |
Возвращает минуты по местному времени. |
Да |
|
getMonth |
Возвращает месяц по местному времени. |
Да |
|
getSeconds |
Возвращает секунды по местному времени. |
Да |
|
getTime |
Возвращает примитивное значение объекта. |
Да |
|
getTimezoneOffset |
Возвращает разницу в минутах между местным временем и UTC. |
Да |
|
getUTCDate |
Возвращает день месяца по времени UTC. |
Да |
|
getUTCDay |
Возвращает день недели по времени UTC. |
Да |
|
getUTCFullYear |
Возвращает полный номер года по времени UTC. |
Да |
|
getUTCHours |
Возвращает часы по времени UTC. |
Да |
|
getUTCMilliseconds |
Возвращает миллисекунды по времени UTC. |
Да |
|
getUTCMinutes |
Возвращает минуты по времени UTC. |
Да |
|
getUTCMonth |
Возвращает месяц по времени UTC. |
Да |
|
getUTCSeconds |
Возвращает секунды по времени UTC. |
Да |
|
getVarDate |
Возвращает примитивное значение объекта в формате VT_DATE. |
Нет |
|
getYear |
Возвращает номер года по местному времени. |
Да |
|
parse |
Преобразует дату, заданную строкой, в количество миллисекунд относительно базового времени. |
Нет |
|
setDate |
Устанавливает день месяца по местному времени. |
Да |
|
setFullYear |
Устанавливает полный номер года по местному времени. |
Да |
|
setHours |
Устанавливает часы по местному времени. |
Да |
|
setMilliseconds |
Устанавливает миллисекунды по местному времени. |
Да |
|
setMinutes |
Устанавливает минуты по местному времени. |
Да |
|
setMonth |
Устанавливает месяц по местному времени. |
Да |
|
setSeconds |
Устанавливает секунды по местному времени. |
Да |
|
setTime |
Устанавливает примитивное значение объекта. |
Да |
|
setUTCDate |
Устанавливает день месяца по времени UTC. |
Да |
|
setUTCFullYear |
Устанавливает полный номер года по времени UTC. |
Да |
|
setUTCHours |
Устанавливает часы по времени UTC. |
Да |
|
setUTCMilliseconds |
Устанавливает миллисекунды по времени UTC. |
Да |
|
setUTCMinutes |
Устанавливает минуты по времени UTC. |
Да |
|
setUTCMonth |
Устанавливает месяц по времени UTC. |
Да |
|
setUTCSeconds |
Устанавливает секунды по времени UTC. |
Да |
|
setYear |
Устанавливает номер года по местному времени. |
Да |
|
toDateString |
Преобразует примитивное значение объекта в строку даты. |
Да |
|
toGMTString |
Преобразует примитивное значение объекта в строку даты и времени по Гринвичскому меридиану. |
Да |
|
toLocaleDateString |
Преобразует примитивное значение объекта в строку даты в формате операционной системы. |
Да |
|
toLocaleString |
Преобразует примитивное значение объекта в строку даты и времени в формате операционной системы. |
Да |
|
toLocaleTimeString |
Преобразует примитивное значение объекта в строку времени в формате операционной системы. |
Да |
|
toString |
Преобразует примитивное значение объекта в строку. |
Да |
|
toTimeString |
Преобразует примитивное значение объекта в строку времени. |
Да |
|
toUTCString |
Преобразует примитивное значение объекта в строку даты и времени по UTC. |
Да |
|
UTC |
Возвращает примитивное значение объекта по времени UTC. |
Нет |
|
valueOf |
Возвращает примитивное значение объекта. |
Да |
Объект Math обеспечивает доступ к различным математическим константам и функциям. Он существует в единственном экземпляре и потому не имеет конструктора. Соответственно все его свойства и методы являются статическими и должны вызываться обращением к объекту Math, а не его реализациям. Прототипа объект Math не имеет.
Свойства объекта Math
|
Свойство |
Описание |
|
E |
Основание натуральных логарифмов e. |
|
LN10 |
Число ln 10. |
|
LN2 |
Число ln 2. |
|
LOG10E |
Число lg e. |
|
LOG2E |
Число log2e. |
|
PI |
Число π. |
|
SQRT1_2 |
Квадратный корень из 1/2. |
|
SQRT2 |
Квадратный корень из 2. |
Методы объекта Math
|
Метод |
Описание |
|
abs |
Возвращает абсолютную величину аргумента. |
|
acos |
Возвращает арккосинус аргумента. |
|
asin |
Возвращает арксинус аргумента. |
|
atan |
Возвращает арктангенс аргумента. |
|
atan2 |
Возвращает арктангенс частного от деления аргументов. |
|
ceil |
Возвращает наименьшее целое число, большее или равное аргументу. |
|
cos |
Возвращает косинус аргумента. |
|
exp |
Возвращает экспоненту аргумента. |
|
floor |
Возвращает наибольшее целое число, меньшее или равное аргументу. |
|
log |
Возвращает натуральный логарифм аргумента. |
|
max |
Возвращает наибольший из аргументов. |
|
min |
Возвращает наименьший из аргументов. |
|
pow |
Возводит первый аргумент в степень, заданную вторым. |
|
random |
Генерирует случайное число в диапазоне от 0 до 1. |
|
round |
Округляет аргумент до ближайшего целого числа. |
|
sin |
Возвращает синус аргумента. |
|
sqrt |
Возвращает квадратный корень из аргумента. |
|
tan |
Возвращает тангенс аргумента. |
DHTML
Dynamic HTML — это набор технологий, работающих на стороне клиента и призванных преодолеть статичность традиционных Веб-страниц. Точнее говоря, это технологии, которые обеспечивают:
Для достижения перечисленных целей используются следующие методы:
Объектная модель документа
DOM (от англ. Document Object Model — «объектная модель документа») — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому документов, а также изменять содержимое, структуру и оформление документов.
Модель DOM не накладывает ограничений на структуру документа. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями родительский-дочерний.
Изначально различные браузеры имели собственные модели документов (DOM), не совместимые с остальными. Для того, чтобы обеспечить взаимную и обратную совместимость, специалисты международного консорциума W3C классифицировали эту модель по уровням, для каждого из которых была создана своя спецификация. Все эти спецификации объединены в общую группу, носящую название W3C DOM.
Каждый элемент дерева соответствует элементу HTML и, следовательно, имеет тег(и), содержимое и набор атрибутов. Для перехода к объектной модели документа остается сделать единственный шаг: назвать все элементы дерева объектами, а их атрибуты сделать доступными для чтения и для изменения из сценариев и аплетов. В результате дерево элементов HTML-документа становится динамически управляемым; более того, теперь мы можем легко добавлять к каждому элементу новые свойства, помимо стандартных атрибутов HTML.
Именно такой подход был положен в основу динамической модели HTML обозревателей Microsoft, а затем принят за основу стандартов W3C, получивших название объектная модель документа (Document Object Model или DOM). При этом W3C расширил понятие DOM на любые XML-документы, рассматривая HTML DOM как специализированный частный случай с дополнительными возможностями. Таким образом, DOM — это модель HTML- и XML-документов, независимая от платформы и языка программирования, которая определяет:
Каждый элемент представляет собой узел.
Свойства узлов
|
Свойство |
Изменяемое |
Описание |
|
attributes |
Нет |
Атрибуты узла. |
|
childNodes |
Нет |
Список детей. |
|
firstChild |
Нет |
Первый ребенок. |
|
lastChild |
Нет |
Последний ребенок. |
|
localName |
Нет |
Локальное имя в пространстве имен. |
|
namespaceURI |
Нет |
URI пространства имен. |
|
nextSibling |
Нет |
Следующий узел дерева. |
|
nodeName |
Нет |
Имя узла. |
|
nodeType |
Нет |
Тип узла. |
|
nodeValue |
Да |
Значение узла. |
|
ownerDocument |
Нет |
Документ — владелец узла. |
|
parentNode |
Нет |
Отец данного узла. |
|
prefix |
Да |
Префикс пространства имен. |
|
previousSibling |
Нет |
Предыдущий узел дерева. |
Методы узлов для работы с узлами
|
Свойство |
Описание |
|
appendChild |
Добавляет сына в конец списка детей. |
|
cloneNode |
Создает копию данного узла. |
|
hasAttrbutes |
Проверяет наличие у узла атрибутов. |
|
hasChildNodes |
Проверяет наличие у узла детей. |
|
insertBefore |
Вставляет новый узел перед заданным сыном. |
|
isSupported |
Проверяет свойство реализации DOM. |
|
normalize |
Нормализует текстовое содержимое узла. |
|
removeChild |
Удаляет заданного сына. |
|
replaceChild |
Заменяет заданного сына новым узлом. |
Методы узлов для работы с атрибутами
|
Метод |
Описание |
|
getAttribute |
Возвращает значение заданного атрибута. |
|
getAttributeNS |
Возвращает значение заданного атрибута с учетом пространства имен. |
|
getAttributeNode |
Возвращает заданный узел Attr. |
|
getAttributeNodeNS |
Возвращает заданный узел Attr с учетом пространства имен. |
|
getElementsByTagName |
Возвращает список потомков, имеющих заданный тег. |
|
getElementsByTagNameNS |
Возвращает список потомков, имеющих заданный тег, с учетом пространства имен. |
|
hasAttribute |
Проверяет наличие заданного атрибута. |
|
hasAttributeNS |
Проверяет наличие заданного атрибута с учетом пространства имен. |
|
removeAttribute |
Удаляет заданный атрибут. |
|
removeAttributeNS |
Удаляет заданный атрибут с учетом пространства имен. |
|
removeAttributeNode |
Удаляет заданный узел Attr. |
|
setAttribute |
Добавляет новый атрибут. |
|
setAttributeNS |
Добавляет новый атрибут с учетом пространства имен. |
|
setAttributeNode |
Добавляет новый узел Attr. |
|
setAttributeNodeNS |
Добавляет новый узел Attr с учетом пространства имен. |
События DHTML
onActivate
Наступает, когда элемент страницы получает фокус ввода.
Поддерживается IE начиная с 5.5
onAbort
Наступает, когда пользователь прерывает загрузку графического изображения.
Действие по умолчанию: прерывание загрузки соответствующего файла.
Поддерживается IE начиная с 4.0 и NN начиная с 3.0
onAfterPrint
Наступает сразу после вывода на принтер или предварительный просмотр текущей Web-страницы.
Событие может пригодиться, например, если требуется изменить текст или стиль печатаемого документа после распечатки.
Допустим, у нас текст написан шрифтом размером 9pt. Нам надо перед распечаткой страницы сделать текст 12pt, а после распечатки опять вернуть к 9pt.
Для этого можно написать следующий скрипт:
function bodyBeforePrint() {
document.body.currentStyle.fontSize = "12pt";
}
function bodyAfterPrint () {
document.body.currentStyle.fontSize = "9pt";
}
А в теге <body> надо записать следующее:
<body onBeforePrint="bodyBeforePrint()" onAfterPrint="bodyAfterPrint()">
Поддерживается IE начиная с 5.0
onAfterUpdate
Событие наступает после того, как данные будут перенесены из элемента управления в соответствующее поле базы данных.
Доступно только для элементов управления, привязанных к данным.
Действие по умолчанию: сохранение данных. Не прерывается присвоением значения false свойству returnValue.
Поддерживается IE начиная с 4.0
onBeforeCopy
Наступает перед копированием данных из текущего элемента страницы в буфер обмена Windows.
Событие onBeforeCopy() можно использовать, чтобы разрешить или запретить пункт контекстного меню Скопировать.
Для этого достаточно присвоить свойству returnValue объекта event значение false. Значение false разрешает, т.к. в этом случае мы отменяем поведение меню по умолчанию.
Присвоив значение true мы, тем самым, запрещаем пункт контекстного меню.
По умолчанию пункт Скопировать разрешен всегда, тогда как пункты Вырезать и Вставить всегда запрещены, т.к. пользователь не имеет права изменять содержимое Web-страницы.
Например, мы хотим сделать так, чтобы пользователь не мог скопировать определенный текст на странице:
<p onBeforeCopy="window.event.returnValue = false">
Этот текст нельзя скопировать!
</p>
Данное событие браузера можно использовать для защиты фрагмента страницы от несанкционированного копирования.
Если вы хотите, чтобы пользователь не смог скопировать всю страницу, надо обработчик события применить для тела документа:
<body onBeforeCopy="window.event.returnValue = false">
Поддерживается IE начиная с 5.0
onBeforeCut
Наступает перед переносом данных из текущего элемента страницы в буфер обмена Windows.
Событие onBeforeCut() можно использовать, чтобы разрешить или запретить пункт контекстного меню Вырезать.
Для этого достаточно присвоить свойству returnValue объекта event значение false. Значение false разрешает, т.к. в этом случае мы отменяем поведение меню по умолчанию.
Присвоив значение true мы, тем самым, разрешает пункт контекстного меню.
По умолчанию пункт Вырезать запрещен всегда, т.к. пользователь не имеет права изменять содержимое Web-страницы.
Например надо разрешить пользователю вырезать часть страницы:
<p onBeforeCut="window.event.returnValue = false">
Этот текст можно вырезать!
</p>
В примере мы отменили поведение Web-обозревателя по умолчанию и разрешили пункт меню Вырезать.
Надо отметить, что если вы разрешаете пользователю вырезать текст на своей странице, то не придется писать для этого дополнительный код. Web-обозреватель выполняет заданные необходимые операции самостоятельно.
Поддерживается IE начиная с 5.0
onBeforedeActivate
Наступает перед потерей фокуса текущим элементом страницы.
Поддерживается IE начиная с 5.5
onBeforeEditFocus
Наступает перед переходом элемента страницы в режим редактирования.
Доступно только если свойство designMode установлено в on.
Действие по умолчанию: перевод элемента страницы в режим редактирования.
Поддерживается IE начиная с 5.0
onBeforePaste
Наступает непосредственно перед вставкой данных из буфера обмена в текущий элемент страницы.
Событие onBeforePaste() можно использовать, чтобы разрешить или запретить пункт контекстного меню Вставить.
Для этого достаточно присвоить свойству returnValue объекта event значение false. Значение false разрешает, т.к. в этом случае мы отменяем поведение меню по умолчанию.
Присвоив значение true мы, тем самым, разрешаем пункт контекстного меню.
По умолчанию пункт Вставить запрещен всегда, т.к. пользователь не имеет права изменять содержимое Web-страницы.
Например надо разрешить пользователю вставить текст в элемент страницы:
<p onBeforePaste="window.event.returnValue = false">
Вставте сюда скопированный текст!
</p>
В примере мы отменили поведение Web-обозревателя по умолчанию и разрешили пункт меню Вставить.
Надо отметить, что если вы разрешаете пользователю вставлять текст на своей странице, то не придется писать для этого дополнительный код. Web-обозреватель выполняет заданные необходимые операции самостоятельно.
Только есть небольшая особенность: для того, чтобы вставить текст в элемент, не предназначенный для редактирования текста (все, кроме полей ввода), пользователю придется выделить фрагмент текста, куда будет вставлен текст.
Поддерживается IE начиная с 5.0
onBeforePrint
Наступает перед выводом на принтер или предварительным просмотром текущей Web-страницы.
Событие может пригодиться, например, если требуется изменить текст или стиль печатаемого документа перед распечаткой.
Допустим, у нас текст написан шрифтом размером 9pt. Нам надо перед распечаткой страницы сделать текст 12pt, а после распечатки опять вернуть к 9pt.
Для этого можно написать следующий скрипт:
function bodyBeforePrint() {
document.body.currentStyle.fontSize = "12pt";
}
function bodyAfterPrint () {
document.body.currentStyle.fontSize = "9pt";
}
А в теге <body> надо записать следующее:
<body onBeforePrint="bodyBeforePrint()" onAfterPrint="bodyAfterPrint()">
Действие по умолчанию: вывод на принтер или предварительный просмотр текущей Web-страницы.
Поддерживается IE начиная с 5.0
onBeforeUnload
Возникает перед выгрузкой страницы при переходе на другую страницу или закрытия окна.
Действие по умолчанию: сигнализация, что Web-страница сейчас будет закрыта.
Поддерживается IE начиная с 4.0
onBeforeUpdate
Наступает перед переносом данных из элемента управления в соответствующее поле базы данных.
Доступно только для элементов управления, привязанных к данным.
Действие по умолчанию: сигнализация, что данные были изменены.
Поддерживается IE начиная с 4.0
onBlur
Событие приосходит при переходе фокуса с этого элемента с помощью курсора мышки или последовательности перехода.
Поддерживается IE начиная с 3.02 для <select> и <textarea>, начиная с 4.0 для остальных элементов управления, фреймов, гиперссылок, внедренных объектов, таблиц и т.д.
Поддерживатеся NN начиная с 2.0
onBounce
Срабатывает, когда бегущаяя строка достигла границы и меняет направление.
Допускается, когда значение behavior установлено на "alternate".
Действие по умолчанию: изменение направления движения текста.
Поддерживается IE начиная с 4.0
onCellChange
Событие наступает, когда изменяются данные, находящиеся в базе данных.
Действие по умолчанию: сигнализация об изменении данных в базе данных.
Поддерживается IE начиная с 5.0
onChange
Событи происходит при потере управляющим элементом фокуса ввода, если его значение было изменено с момента получения фокуса.
Элемент <input>, <select>, <textarea>.
Действие по умолчанию: изменение содержимого элемента управления.
Поддерживается IE начиная с 5.0
onClick
Событие происходит при однократном щелчке левой кнопки мышки на элементе, при нажатии клавиши <Enter> на форме, использовании клавиши-ускорителя или выборе пункта в списке.
Это событие полезно, если Вам надо обработать нажатие пользователя на тот или иной элемент страницы.
Пример, приведенный далее, показывает как можно обработать событие onClick():
<html>
<head>
<title>Событие onClick()</title>
<script>
function clickAlert(str) {
alert("Вы нажали на "+str);
}
</script>
<body>
<table border=1>
<tr>
<td onclick="clickAlert('левую ячейку!')">Левая ячейка</td>
<td onclick="clickAlert('правую ячейку!')">Правая ячейка</td>
</tr>
<tr>
<td colspan=2>
<input type=button onclick="alert('Вы нажали на кнопку!')"
value="Нажми для проверки работы события onClick()">
</td>
</tr>
</table>
</body>
</html>
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 2.0
onContextMenu
Наступает при щелчке правой кнопкой мыши по элементу страницы, перед выводом контекстного меню.
Действие по умолчанию: вывод контекстного меню.
Поддерживается IE начиная с 5.0
onControlSelect
Это событие наступает при попытки пользователя выбрать элемент страницы, имеющий собственный пользовательский интерфейс.
Действие по умолчанию: активизация ползунков изменения размера.
Поддерживается IE начиная с 5.5
onCopy
Наступает при копировании данных из текущего элемента страницы в буфер обмена Windows.
Действие по умолчанию: копирование выделенного фрагмента в буфер обмена.
Это событие можно использовать для операций копирования, если данные, помещаемые в Буфер обмена, нужно предварительно обработать.
<p onCopy="funCopy();" id="id1"
onBeforeCopy="window.event.returnValue = false;">
Скопируйте этот текст!
</p>
<script>
function funCopy() {
window.event.returnValue = false;
window.clipboardData.setData("Text", id1.innerText);
}
</script>
В вышеприведенном примере реализована специальная операция копирования текста.
Содержимое элемента id1 копируется в Буфер обмена целиком.
Поддерживается IE начиная с 5.0
onCut
Событие наступает при переносе данных из текущего элемента страницы в буфер обмена Windows.
Действие по умолчанию: перенос выделенного фрагмента в буфер обмена.
Это событие можно использовать для операций вырезания, если данные, помещаемые в Буфер обмена, нужно предварительно обработать.
Поддерживается IE начиная с 5.0
onDataAvailable
Наступает каждый раз, когда очередная партия данных переносится из базы данных на Web-страницу.
Действие по умолчанию: сигнализация, что данные готовы для отображения.
Поддерживается IE начиная с 4.0
onDataSetChanged
Событие наступает, когда данные в базе данных изменяются, а также когда начальная порция данных готова для переноса на Web-страницу.
Действие по умолчанию: сигнализация, что данные изменились.
Поддерживается IE начиная с 4.0
onDataSetComplete
Событие наступает, когда все данные перенесены из базы данных на Web-страницу.
Действие по умолчанию: сигнализация, что все данные готовы для отображения.
Поддерживается IE начиная с 4.0
onDblClick
Событие происходит при двойном щелчке левой кнопкой мышки на элементе.
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 4.0
onDeactivate
Наступает при потере фокуса текущим элементом страницы.
Поддерживается IE начиная с 5.5
onDrag
Наступает во время операции drag-n-drop в элементе-источнике.
Действие по умолчанию: вызов функции-обработчика, если такая есть.
Поддерживается IE начиная с 5.0
onDragDrop
Событие наступает, когда пользователь "бросает" в окно Web-обозревателя ссылки на интернет-адреса.
Параметры:
type - тип события;
target - ссылка на элемент страницы, где оно наступило;
data - массив строк, каждая из которых содержит "брошенный" в окно адрес;
modifiers - модификаторы, указывающие, какая клавиша на клавиатуре была при этом нажата;
screenX и screenY - экранные координаты курсора мыши.
Поддерживается NN начиная с 4.0
onDragEnd
Событие наступает, когда пользователь отпускает кнопку мыши, завершая операцию drag-n-drop, в элементе-источнике.
Действие по умолчанию: вызов функции-обработчика, если такая есть.
Поддерживается IE начиная с 5.0
onDragEnter
Событие наступает, когда пользователь перетаскивает данные в допустимое место, в элементе-цели.
Действие по умолчанию: вызов функции-обработчика.
Поддерживается IE начиная с 5.0
onDragLeave
Событие наступает, когда пользователь перетаскивает данные из допустимого места, в элементе-цели.
Действие по умолчанию: вызов функции-обработчика.
Поддерживается IE начиная с 5.0
onDragOver
Событие наступает во время операции drag-n-drop в элементе-цели, когда пользователь перетаскивает данные над допустимым местом.
Действие по умолчанию: вызов функции-обработчика.
Поддерживается IE начиная с 5.0
onDragStart
Событие наступает, когда пользователь начинает перетаскивать данные, в элементе-источнике.
Действие по умолчанию: вызов функции-обработчика.
Поддерживается IE начиная с 4.0
onDrop
Событие наступает, когда пользователь отпускает кнопку мыши, завершая операцию drag-n-drop, в элементе-цели.
Действие по умолчанию: вызов функции-обработчика.
Поддерживается IE начиная с 5.0
onError
Событие происходит при ошибке загрузки документа или графического изображения.
В обработчике этого события можно предусмотреть вывод каких-либо предупреждений о произошедшей ошибке.
Например, если адрес графического элемента задан в полном формате URL, а мы просматриваем локальную копию, не имея доступа к Internet.
onError=скрипт
Пример:
<html>
<head><title>Пример onError</title>
<script language="JavaScript">
function doError() {
alert ("Ошибка загрузки графики. Проверьте соединение.")
}
</script>
</head>
<body>
<img src="../files/76/http://spravkaweb.ru/img/menu_all_out.gif" onError="doError()">
</body>
</html>
Поддерживается IE начиная с 3.02 для window и начиная с 4.0 для остальных элементов.
Поддерживается NN начиная с 3.0
onErrorUpdate
Событие наступает, если при переносе измененных данных в базу данных происходит ошибка.
Действие по умолчанию: вызов функции-обработчика.
Поддерживается IE начиная с 4.0
onFilterChange
Событие наступает, когда визуальный фильтр изменяет свое состояние или когда визуальное преобразование заканчивает свою работу.
Действие по умолчанию: сигнализация о завершении работы фильтра или преобразования.
Поддерживается IE начиная с 4.0
onFinish
Событие наступает, когда очередной цикл движения текста в теге <MARQUEE> завершается.
Действие по умолчанию: прекращение цикла.
Поддерживается IE начиная с 4.0
onFocus
Событие происходит при получении элементом фокуса с помощью мышки или последовательного перехода.
Действие по умолчанию: установка фокуса ввода на текущий элемент страницы.
Поддерживается IE начиная с 3.02 для элементов управления и <TEXTAREA>, начиная с 4.0 для фреймов, гиперссылок, внедренных объектов, таблиц и т.д. и начиная с 5.0 для всех элементов.
Поддерживается NN начиная с 2.0
onHelp
Возникает при нажатии клавиши F1.
Действие по умолчанию: открытие окна справки.
Поддерживается IE начиная с 4.0
onKeyDown
Событие происходит при нажатии клавиши на клавиатуре.
Действие по умолчанию: возвращение кода нажатой клавиши.
Поддерживается IE начиная 4.0
Поддерживается NN начиная с 4.0
onKeyPress
Событие происходит при нажатии и отпускании клавиши на клавиатуре.
Действие по умолчанию: возвращение кода нажатой клавиши в формате Unicode.
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 4.0
onKeyUp
Событие происходит при отпускании клавиши на клавиатуре.
Действие по умолчанию: возвращение кода нажатой клавиши.
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 4.0
onLayoutComplete
Событие наступает, когда Web-страница уже готова для печати на принтере или предварительного просмотра.
Действие по умолчанию: вызов функции-обработчика, если такая есть.
Поддерживается IE начиная с 5.5
onLoad
Событие происходит, когда "браузер" заканчивает загружать окно или все фреймы элемента <frameset>.
Действие по умолчанию: отображение элемента или ее элемента.
Поддерживается IE начиная с 3.02
Поддерживается NN начиная с 2.0
onLoseCapture
Событие наступает, когда когда элемент страницы перестает перехватывать все события мыши.
Действие по умолчанию: вызов функции-обработчика, если такой есть.
Поддерживается IE начиная с 5.0
onMouseDown
Событие происходит при нажатии кнопки мышки на элементе.
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 4.0
onMouseEnter
Событие наступает, когда пользователь помещает курсор мыши на элемент страницы.
Поддерживается IE начиная с 5.5
onMouseLeave
Событие наступает, когда пользователь убирает курсор мыши с элемента страницы.
Поддерживается IE начиная с 5.5
onMouseMove
Событие наступает, когда пользователь перемещает курсор мыши над элементом страницы.
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 4.0
onMouseOut
Событие происходит при перемещении курсора мышки за пределы элемента.
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 3.0
onMouseOver
Событие происходит при наведении курсора мыши на элемент.
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 2.0
onMouseUp
Событие происходит при отпускании кнопки мышки на элементе.
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 4.0
onMove
Событие наступает, когда пользователь перемещает окно Web-обозревателя или изменяет размера фрейма.
Параметры:
type - тип события;
target - ссылка на элемент страницы, где оно наступило;
X и Y - координаты левого верхнего угла окна или фрейма.
Поддерживается NN начиная с 4.0
onPaste
Событие наступает при вставке данных из буфера обмена Windows в текущий элемент страницы.
Действие по умолчанию: вставка содержимого буфера обмена.
Это событие можно использовать для операций вставки, если данные, извлекаемые из Буфер обмена, нужно предварительно обработать.
Но перед этим необходимо отменить выполнение этих операций по умолчанию, присвоив false свойству returnValue объекта event.
Поддерживается IE начиная с 5.0
onPropertyChange
Событие наступает при изменении одного из свойств текущего элемента страницы.
Действие по умолчанию: сигнализация об изменениее значения свойства.
Поддерживается IE начиная с 5.0
onReadyStateChange
Событие наступает при изменении состояния элемента страницы.
Действие по умолчанию: сигнализация об изменении значения свойства readyState.
Поддерживается IE начиная с 3.02 для <Hn> и namespace, начиная с 4.0 для <link>, <object>, <script> и document, начиная с 5.0 для остальных элементов и начиная с 5.5 для <iframe>.
onReset
Событие происходит при сбросе формы.
Поддерживается IE начиная с 4.0
Поддерживается NN начиная с 3.0
onResize
Возникает при изменении размеров окна, фрейма или другого элемента страницы.
Поддерживается IE с 4.0 для всех элементов, кроме <frame>, и начиная с 5.0 - для <frame>.
Поддерживается NN начиная с 4.0
onResizeEnd
Событие наступает по окончания изменения пользователем размеров элемента страницы, имеющего собственный пользовательский интерфейс.
Действие по умолчанию: изменение размеров элемента страницы.
Поддерживается IE начиная с 5.5
onResizeStart
Событие наступает, когда пользователь начинает изменять размеры элемента страницы, имеющего собственный пользовательский интерфейс.
Поддерживается IE начиная с 5.5
onRowEnter
Событие происходит при переходе на другую запись базы данных.
Действие по умолчанию: сигнализация о готовности данных, содержащихся в новой записи.
Поддерживается IE начиная с 4.0
onRowExit
Событие наступает перед переходом с текущей записи базы данных на другую.
Действие по умолчанию: сигнализация об изменении записи.
Поддерживается IE начиная с 4.0
onRowsDelete
Событие наступает непосредственно перед удалением текущей записи из базы данных.
Действие по умолчанию: сигнализация об удалении записи.
Поддерживается IE начиная с 5.0
onRowsInserted
Событие наступает сразу после новой записи в базу данных.
Действие по умолчанию: сигнализация о вставке новой записи.
Поддерживается IE начиная с 5.0
onScroll
Возникает при скроллировании содержимого окна.
Действие по умолчанию: прокрутка содержимого элемента страницы.
Поддерживается IE начиная с 4.0
onSelect
Событие происходит при выделении некоторого текста в текстовом поле.
Параметры:
type - тип события;
target - ссылка на элемент страницы, где оно наступило.
Поддерживается NN начиная с 2.0
onSelection
Событие наступает, когда пользователь выделяет фрагмент содержимого страницы или поля ввода.
Действие по умолчанию: выделение фрагмента содержимого страницы или поля ввода.
Поддерживается IE начиная с 3.02 для полей ввода и начиная с 4.0 для <BODY>.
onSelectionChange
Событие наступает, когда меняется тип выделения.
Поддерживается IE начиная с 5.5
onSelectStart
Событие наступает, когда пользователь начинает выделять фрагмент содержимого элемента страницы.
Действие по умолчанию: выделение фрагмента содержимого элемнта страницы.
Поддерживается IE начиная с 4.0
onStart
Событие наступает, когда текст в элементе <marquee> начинает двигаться.
Доступно, только если свойство loop установлено в 1.
Действие по умолчанию: начало движения. Не "всплывает" и не прерывается присвоением значения false свойству returnValue.
Поддерживается IE начиная с 4.0
onStop
Событие наступает, когда пользователь прерывает загрузку текущей Web-страницы нажав кнопку Стоп или отжав ее.
Поддерживается IE начиная с 5.0
onSubmit
Событие происходит при отправке формы.
Действие по умолчанию: отправка введенных в форму данных.
Поддерживается IE начиная с 3.02
Поддерживается NN начиная с 2.0
onUnLoad
Событие происходит, когда "браузер" удаляет документ из окна или фрейма.
Действие по умолчанию: выгрузка страницы.
Поддерживается IE начиная с 3.02 для window и начиная с 4.0 для <body> и <frameset>.
Поддерживается NN начиная с 2.0
Задание к лабораторной работе:
Каждый отчет должен содержать: