11. Объектная модель документа. Ранняя упрощенная модель
Примеры
praxis/11/examples/01/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Из песен Владимира Высоцкого</TITLE>
</HEAD>
<BODY>
<H1>Из песен Владимира Высоцкого</H1>
<FORM>
<TEXTAREA rows=8 cols=54 readonly>
Из песен Владимира Высоцкого
- - - - - - - - - - - - - - -
</TEXTAREA>
<DIV>
<INPUT type=reset value="Сброс">
<INPUT type=button value="Тау-Кита">
<INPUT type=button value="Джон Ланкастер">
<INPUT type=button value="Боксер">
</DIV>
</FORM>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки
// документа и построения его объектной модели
window.onload = function ()
{
// Назначить обработчик события onclick кнопкам формы
document.forms[0].elements[2].onclick =
function ()
{
document.forms[0].elements[0].value = songs[0];
};
document.forms[0].elements[3].onclick =
function ()
{
document.forms[0].elements[0].value = songs[1];
};
document.forms[0].elements[4].onclick =
function ()
{
document.forms[0].elements[0].value = songs[2];
};
};
// Фрагменты песен
// ---------------
var songs = [
"В далеком созвездии Тау-Кита\r\n"+
"Всё стало для нас непонятно.\r\n"+
'Сигнал посылаем: "Вы что это там?"\r\n'+
"А нас посылают обратно.\r\n",
"Джон Ланкастер в одиночку,\r\n"+
"Преимущественно ночью,\r\n"+
"Чем-то щёлкал,\r\n"+
"В чём был спрятан инфракрасный объектив,\r\n"+
"А потом в нормальном свете\r\n"+
"Представало в чёрном цвете\r\n"+
"То, что ценим мы и любим,\r\n"+
"Чем гордится коллектив.\r\n",
"Удар, удар, еще удар,\r\n"+
"Опять удар и вот\r\n"+
"Борис Буткеев (Краснодар)\r\n"+
"Проводит апперкот.\r\n"
];
praxis/11/examples/02/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Из песен Владимира Высоцкого</TITLE>
</HEAD>
<BODY>
<H1>Из песен Владимира Высоцкого</H1>
<FORM name=forma>
<TEXTAREA name=edit rows=8 cols=54 readonly>
Из песен Владимира Высоцкого
- - - - - - - - - - - - - - -
</TEXTAREA>
<DIV>
<INPUT type=reset value="Сброс">
<INPUT name=key1 type=button value="Тау-Кита">
<INPUT name=key2 type=button value="Джон Ланкастер">
<INPUT name=key3 type=button value="Боксер">
</DIV>
</FORM>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Назначить обработчик события onclick кнопкам формы
document.forma.key1.onclick =
function ()
{
document.forma.edit.value = songs[0];
};
document.forma.key2.onclick =
function ()
{
document.forma.edit.value = songs[1];
};
document.forma.key3.onclick =
function ()
{
document.forma.edit.value = songs[2];
};
};
// Фрагменты песен
// ---------------
var songs = [
"В далеком созвездии Тау-Кита\r\n"+
"Всё стало для нас непонятно.\r\n"+
'Сигнал посылаем: "Вы что это там?"\r\n'+
"А нас посылают обратно.\r\n",
"Джон Ланкастер в одиночку,\r\n"+
"Преимущественно ночью,\r\n"+
"Чем-то щёлкал,\r\n"+
"В чём был спрятан инфракрасный объектив,\r\n"+
"А потом в нормальном свете\r\n"+
"Представало в чёрном цвете\r\n"+
"То, что ценим мы и любим,\r\n"+
"Чем гордится коллектив.\r\n",
"Удар, удар, еще удар,\r\n"+
"Опять удар и вот\r\n"+
"Борис Буткеев (Краснодар)\r\n"+
"Проводит апперкот.\r\n"
];
praxis/11/examples/03/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Чувствительная картинка</TITLE>
</HEAD>
<BODY>
<H1>Чувствительная картинка</H1>
<P>
<IMG name="pic"
src="prav30.gif" width=140 height=150 border=1
alt="Профессор" title="Профессор">
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
addRollover("pic", "prav31.gif");
// Функция добавляет эффект смены изображения
// к элементу IMG с именем name, вставляя обработчики событий,
// которые будут изменять URL картинки при наведении указателя мыши.
// Аргумент rolloverURL задает адрес картинки, которая заменяет
// начальную под указателем мыши.
// ------------------------------------
function addRollover(name, rolloverURL)
{
// Получим ссылку на объект Image, который соответствует
// картинке с именем nаme
var img = document.images[name];
// Запомним начальный URL изображения
var baseURL = img.src;
// Загрузим сменное изображение в кеш браузера
(new Image()).src = rolloverURL;
// Создадим обработчики событий
img.onmouseover = function () {img.src = rolloverURL;};
img.onmouseout = function () {img.src = baseURL;};
}
};
Замечание 1
Обращение к объекту, построенному для картинки, нельзя было записать следующими способами:
var img = document.images.name;
var img = document.name;
Ведь name — это строка, которая содержит имя свойства, а не идентификатор, поэтому приходится записывать обращение в синтаксисе ассоциативного массива, так:
var img = document.images[name];
или так (это тоже будет работать):
var img = document[name];
Подобные ошибки уже допускались при решении заданий к заметкам. Поэтому, повторим еще раз.
Пусть картинка задана элементом
<IMG name="pic" ...>
Тогда из JavaScript можно обратиться к объекту Image, созданному для этой картинки так:
document.pic
Пусть теперь:
var n = "pic";
Запись document.n будет ошибочной, а запись document[n] — правильной.
Замечание 2
Дополнительный комментарий для кода:
(new Image()).src = rolloverURL;
В этой строке создаётся экземпляр класса Image, после чего свойству src созданного объекта присваивается URL адрес картинки, которая должна заменить базовую при наведении на нее указателя мыши. Это приведет к загрузке картинки rolloverURL в кеш браузера.
Если так не сделать, картинка rolloverURL будет загружаться только при первом возникновении события onmouseover (пользователь навел указатель на базовую картинку), а это может привести к задержке смены изображения, если картинка грузится по сети.
Заметим, что создается литерал объекта Image, и он не сохраняется в переменной, то есть попадает под метлу сборщика мусора сразу после выполнения инструкции присваивания.
praxis/11/examples/04/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Приветливый заголовок</TITLE>
</HEAD>
<BODY>
<H1 id="h1">Приветливый заголовок</H1>
<P>
Щелкните на заголовке.
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
var h1 = document.getElementById("h1");
h1.onclick = function () { alert("Заголовок приветствует!"); };
h1.onmouseover = function () { this.style.color = "red"; };
h1.onmouseout = function () { this.style.color = "black"; };
};
praxis/11/examples/05/index.htm
Содержимое файла index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>
<TITLE>Приветливый заголовок</TITLE>
</HEAD>
<BODY>
<H1 id="h1">Приветливый заголовок 1</H1>
<P id="mess">Наведите указатель мыши на заголовок.</P>
<H2 id="h2">Приветливый заголовок 2</H2>
</BODY>
</HTML>
Содержимое файла main.js
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа
// и построения его объектной модели
window.onload = function ()
{
// Получим доступ к объектам, построенным для заголовков и абзаца
var h1 = document.getElementById("h1");
var h2 = document.getElementById("h2");
var mess = document.getElementById("mess");
// Назначим заголовку H1 три обработчика событий
h1.onclick = function () { alert("Заголовок H1 приветствует!") };
h1.onmouseover = overWork;
h1.onmouseout = outWork;
// Назначим заголовку H2 три обработчика событий
h2.onclick = function () { alert("Заголовок H2 приветствует!") };
h2.onmouseover = overWork;
h2.onmouseout = outWork;
function overWork()
{
this.style.color = "white";
this.style.backgroundColor = "red";
mess.innerHTML = "Щелкните на <EM>заголовке</EM>.";
}
function outWork()
{
this.style.color = "black";
this.style.backgroundColor = "white";
mess.innerHTML = "Наведите указатель мыши на заголовок.";
}
};