50821

DHTML и JavaScript на web-страницах

Лабораторная работа

Информатика, кибернетика и программирование

Цель работы: ознакомиться с основными возможностями языка JavaScript, синтаксисом, встроенными объектами, событиями DHTML, получить практические навыки программирования на языке JavaScript.

Русский

2014-01-31

560 KB

9 чел.

Лабораторная работа №3

DHTML и JavaScript на web-страницах

Цель работы: ознакомиться с основными возможностями языка JavaScript, синтаксисом, встроенными объектами, событиями DHTML, получить практические навыки программирования на языке JavaScript.

Основные понятия

JavaScript — это язык программирования, основанный на объектах: и языковые средства, и возможности среды представляются объектами, а сценарий (программа) на JavaScript — это набор взаимодействующих объектов.

Структура программ на языке JavaScript

Программа (сценарий) на языке JavaScript — это текст, состоящий из операторов, блоков, т. е. взаимосвязанных наборов операторов, и комментариев. Операторы могут содержать переменные, константы и выражения. Следующий пример начинается с определения функции, которое состоит из блока, содержащего два оператора. За определением следуют два оператора, не образующих блока.

function convert(inches) {

 cm = inches * 2.54; // Эти два оператора заключены в блок.

 meters = inches / 39.37;

}

convert(inches); // Эти два оператора не образуют блока.

km = meters / 1000;

Как мы видим из этого примера, каждый оператор JavaScript начинается с новой строки (что не обязательно, но рекомендуется) и заканчивается точкой с запятой (что также не обязательно, если оператор является последним в строке). Блок — это набор операторов, заключенный в фигурные скобки {}.

Комментарии

Комментарии в JavaScript могут быть однострочными и многострочными. Однострочные комментарии начинаются с символов // и продолжаются до конца текущей строки, как показано в приведенном выше примере. Многострочные комментарии заключаются в маркеры /* и */, например:

/* Это пример комментария,

  содержащего несколько строк. */

Переменные

Переменные используются в качестве символических имен, принимающих различные значения. Имена переменных задаются идентификаторами. Переменная создается в момент ее декларации. JavaScript позволяет декларировать переменную двумя способами:

  •  С помощью ключевого слова var, например, var x; или var x = 21;.
  •  Просто присваиванием переменной значения, например x = 21;.

Существуют три области видимости переменных:

  •  Глобальный контекст, т. е. исходный текст сценариев, не включая тела функций.
  •  Локальный контекст, т. е. исходный текст сценариев, являющийся телом функции, а также аргумент конструктора встроенного объекта Function. Точнее говоря, если последним параметром конструктора Function является строка текста, то она интерпретируется как тело функции.
  •  Eval-контекст, т. е. аргумент метода eval. Если параметром метода eval является строка текста, то она интерпретируется как программа на языке JavaScript, имеющая тот же контекст, в котором был вызван этот метод.

Типы данных

  1.  Тип Undefined (неопределенный)
  2.  Тип Null (нулевой)
  3.  Тип Boolean (логический)
  4.  Тип String (строковый)
  5.  Тип Number (числовой)
  6.  Тип Object (объектный)

Операции

Операции сравнения

Операции сравнения сравнивают два операнда и возвращают логическое значение, означающее результат этого сравнения. Строки сравниваются в лексикографическом порядке в кодировке 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) ? "взрослый" : "подросток";

Основные функциональные блоки

  •  условный оператор if…else;
  •  оператор выбора switch;
  •  операторы цикла for, while, do…while, break и continue;
  •  оператор итерации for…in;
  •  оператор указания объекта with;
  •  операторы обработки исключений try…catch и throw;
  •  операторы декларации функций function и возврата из функции return.

Функции

Функция в 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

Объект 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

Объект Date предназначен для манипуляций с датами и временами. Его примитивным значением является число, равное количеству миллисекунд относительно базового времени, равного полуночи 1 января 1970 г. по Гринвичскому меридиану (UTC, Universal Coordinated Time). Если это значение равно NaN, то оно считается неопределенным.

Для создания объектов Date используются следующие конструкторы:

new Date()

new Date(число)

new Date(строка)

new Date(год, месяц, день [,часы [,минуты [,секунды [,мс]?]?]?]?)

Здесь:

  •  число — числовое выражение, задающее примитивное значение объекта в миллисекундах;
  •  строка — строковое выражение, задающее дату и время в формате, описанном в методе parse;
  •  год — числовое выражение, задающее полный номер года (например, 1988, а не 88);
  •  месяц — числовое выражение, задающее номер месяца (0 = январь, 1 = февраль, …, 11 = декабрь);
  •  день — числовое выражение, задающее номер для в месяце от 1 до 31;
  •  часы — необязательное числовое выражение, задающее номер часа от 0 до 23;
  •  минуты — необязательное числовое выражение, задающее номер минуты от 0 до 59;
  •  секунды — необязательное числовое выражение, задающее номер секунды от 0 до 59;
  •  мс — необязательное числовое выражение, задающее номер миллисекунды от 0 до 999.

Примеры:

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 не имеет.

Свойства объекта 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 — это набор технологий, работающих на стороне клиента и призванных преодолеть статичность традиционных Веб-страниц. Точнее говоря, это технологии, которые обеспечивают:

  •  динамическое формирование Веб-страницы в процессе ее загрузки, и
  •  динамическое изменение Веб-страницы в ответ на действия пользователя.

Для достижения перечисленных целей используются следующие методы:

  •  динамическое изменение атрибутов и стилей элементов, составляющих 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="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


Задание к лабораторной работе:

  1.  Изменить web-сайт, разработанный в лабораторной работе №2 добавив динамики на страницах при помощи средств JavaScript и DHTML.
  2.  Украсить свой сайт различными эффектами (эффекты текста, замена изображения, динамическое изменение картинки, изменения прозрачности и других css-свойств, всплывающие подсказки и т.д.).
  3.  Произвести проверку данных, введенных в поля формы (на заполнение, на правильность email, на ввод только числового значения и т.д.).
  4.  Сделать выпадающее меню. Допускается использование готовых решений.
  5.  В задании обязательно использовать таймер (осуществлять загрузку страницы через некоторый промежуток времени, часы в тексте и т.д.), встроенные объекты Date, Math, String и др.
  6.  Создать пользовательские функции для реализации динамических эффектов.
  7.  В задании использовать минимум 10 различных событий, сделав на каждое из них отдельный обработчик.
  8.  Использовать как внутренние (инлайновые) скрипты, так и внешние.
  9.  Страницы должны быть работоспособны в любом браузере.

Каждый отчет должен содержать:

  1.  Заголовок лабораторной работы (название и цель работы).
  2.  Фамилия, инициалы и группа студента.
  3.  Задание к лабораторной работе.
  4.  Краткие теоретические сведения.
  5.  Описание алгоритмов, функций, примененных решений.
  6.  Экранные формы разработанных страниц.
  7.  Основные тексты страниц.
  8.  Выводы по сделанной работе.


 

А также другие работы, которые могут Вас заинтересовать

17780. ФІЗІОЛОГІЯ ТРАВЛЕННЯ 1.06 MB
  фізіологія травлення. 1. Загальна характеристика системи травлення. Травлення в ротовій порожнині. Жування ковтання. ...
17781. ФІЗІОЛОГІЯ КРОВІ 756 KB
  фізіологія крові. 1. Загальна характеристика системи крові. Склад і функції крові. Поняття про гомеостаз. Кров циркулююча – знаходиться в стані активно...
17782. ФІЗІОЛОГІЯ КРОВООБІГУ 2.43 MB
  фізіологія кровообігу. 1. Загальна характеристика системи кровообігу. Фактори які забезпечують рух крові по судинах його спрямованість та безперервність. В залежності від потреби
17783. Фізіологія дихання, енергетичного обміну, терморегуляції 1.28 MB
  фізіологія дихання енергетичного обміну терморегуляції. Загальна характеристика системи дихання. Основні етапи дихання. Біомеханіка вдиху і видиху. Дихання – процес обміну газів О2 та СО2 між атмосферним повітрям та тканинами організму. ...
17784. Фізіологія виділення 124 KB
  Нирки являються основним органом системи виділення, так як тільки він виділяючи з організму в великій кількості продукти азотистого обміну, підтримують їх концентрацію в крові на певному рівні. Участь в цьому процесі шкіри, травного каналу та їх залоз недостатньо.
17785. Применение Excel для обработки данных 48 KB
  Лабораторная работа № 1 Применение Excel для обработки данных Зависимость представлена квадратической параболой .1 Самостоятельно сформировать тестовый пример задав коэффициенты для уравнения 1 в виде произвольных констант. Заполнить след...
17786. Координатна вісь, або одновимірний простір 2.03 MB
  ЛЕКЦІЯ 1 Координатна вісь або одновимірний простір Візьмемо пряму лінію і задамо на ній додатний напрям звичайно його показують стрілкою. Тоді протилежний напрям буде від'ємним. Напрямлена пряма називається віссю. Якщо на осі вибрати довільну точку обліку О і масшт...
17787. Визначник і мінори матриці 78.8 KB
  Визначник і мінори матриці Розглянемо квадратну матрицю А = Квадратній матриц і можна поставити у відповідність певне число яке називається детермінантом або визначником матриці. Детермінант матриці позначається так: det A= Детермінант так само як і матриці має ...
17788. Символы и строки в ANSI C 531.4 KB
  Целью данной лабораторной работы является изучение на практике строк языка ANSI C, операции над строками, функций стандартной библиотеки по работе со строками.