Пользуясь свойствами innerText, outerText, innerHTML, outerHTML можно динамически, то есть, уже после построения страницы браузером, менять отдельные элементы на экране. Этими четырьмя свойствами обладают большинство видимых элементов.
Свойство имеет своим значением весь текст, содержащийся в элементе, включая содержимое всех наследников, без тегов HTML. Присвоение свойству нового текстового значения приводит к замене содержимого элемента на этот текст. При этом вся старая теговая структура внутри элемента пропадает, а новые теги, если они есть, воспринимаются как обычный текст.
Пусть элемент — это следующий абзац:
|
Это важное слово. |
Его код имеет вид:
|
|
Тогда
Получается, что свойство innerText “не видит” теговую разметку внутри элемента.
После присваивания:
|
|
абзац станет таким:
|
Это <I>важное</I> слово. |
Таким образом, теговая разметка в новом содержимом рассматривается как обычный текст.
Это свойство при чтении дает тот же результат, что и innerText. При записи нового значения оно также работает аналогично, но заменяет не только внутренность элемента, но и теги, задающие элемент.
Пусть элементом является полужирный текст внутри абзаца:
|
Это важное слово. |
Код этого фрагмента:
|
|
Команда
После присваивания:
|
|
абзац станет таким:
|
Это не важное слово. |
Выделение пропало. Как видите, свойство outerText позволяет заменять содержимое элемента вместе с задающими его тегами.
Если команда была бы такой
|
|
выделение сохранилось бы:
|
Это не важное слово. |
Это свойство имеет значением весь код, содержащийся внутри элемента.
Пусть элемент — это следующий абзац:
|
Это важное слово. |
Его код имеет вид:
|
|
Тогда
После присваивания:
|
|
абзац станет таким:
|
Это важное слово. |
Как видите, теги, записанные в новом значении, корректно работают.
Отличие от innerHTML только в том, что в расчет дополнительно берутся начальный и конечный теги, задающие элемент.
Пусть элементом является полужирный текст внутри абзаца:
|
Это важное слово. |
Код этого фрагмента:
|
|
Команда
После присваивания:
|
|
абзац станет таким:
|
Это не важное слово. |
Посмотрим, как можно применить описанные свойства при проектировании игры “Крестики-нолики”.
Игровое поле построим при помощи таблицы. Для пустых клеток зададим стиль:
.empty /* Стиль пустой клетки */
{
background-color:#EEE5DB;
color:#EEE5DB;
width:50; height:60;
text-align:center;
}
|
Для клеток, в которых будут записаны ходы, опишем стиль:
.busy /* Стиль занятой клетки */
{
background-color:#D1B284;
width:50; height:60;
text-align:center;
}
|
Первоначально таблица будет иметь вид:
Вот ее код:
Построить таблицу можно и программным путем при помощи такой функции:
var nameId = "game"; // Основа идентификатора клетки таблицы
// Построение игровой таблицы
function ShowRU()
{
var str="<TABLE border=1 cellspacing=0 cellpadding=10>";
for(var i=0; i<3; i++)
{
str += "<TR>";
for(var j=0; j<3; j++)
str += "<TD class=empty id="+nameId+i+j+"> </TD>";
str += "</TR>";
}
str += "</TABLE>";
document.write(str);
}
|
Мышиный щелчок будем обрабатывать такой функцией:
var step = "0"; // Переключатель хода
// Обработка мышиного щелчка
function ClickRU()
{
var obj = event.srcElement; // Тег, на котором щелкнули
if (obj.className == "empty")// Щелчок по пустой клетке
{
obj.className="busy"; // Изменим стиль клетки
step = step == "X" ? "0":"X";
obj.innerText = step; // Запишем ход игрока
}
}
|
Посмотрите, что из этого получилось.
Обязательно посмотрите код этого простого документа, разберитесь в деталях. Чтобы не загромождать учебный код, программа не проверяет окончание игры, но такую проверку легко добавить, и в ней пригодятся неиспользуемые пока идентификаторы клеток таблицы.
Игра будет выглядеть более симпатично, если внутри таблицы расставлять не текстовые, а графические пометки.
Мышиный щелчок теперь будет обрабатываться такой функцией:
// Код для вывода картинок в табличные клетки
var PicX="<IMG src=./pic/gx.gif width=29 height=31"+
"border=0 alt=''>";
var Pic0="<IMG src=./pic/g0.gif width=29 height=31"+
"border=0 alt=''>";
var step="0"; // Переключатель хода
// Обработка мышиного щелчка
function ClickRU()
{
var obj = event.srcElement; // Тег, на котором щелкнули
if (obj.className == "empty")// Щелчок по пустой клетке
{
obj.className = "busy"; // Изменить стиль клетки
if(step == "X")
{ // Шаг игрока "0"
step="0";
obj.innerHTML = Pic0;
}
else
{ // Шаг игрока "X"
step="X";
obj.innerHTML = PicX;
}
}
}
|
Рассмотрим еще один пример динамического изменения содержимого гипертекстовой страницы.
Это приложение имеет следующую структуру:
В первой ячейке таблицы располагается гипертекстовое меню, а во второй — модель (пустого) фрейма.
Загрузка гипертекстового содержимого в область-фрейм выполняется при помощи функции setRU:
// Базовое имя фрейма и областей загрузки
var nameFrame = "frame";
// Загрузка содержимого области n во фрейм
function setRU(n)
{
eval("document.all['"+nameFrame+
"'].innerHTML=document.all['"+
nameFrame+n+"'].innerHTML");
}
|
При n=0 команда внутри функции равнозначна такой:
document.all['frame'].innerHTML =
document.all['frame0'].innerHTML;
То есть, во фрейм (тег SPAN внутри таблицы) загружается
содержимое области с идентификатором frame0. Именно такая
команда срабатывает после загрузки документа
Гипертекстовые ссылки:
устроены так, что вместо обычного перехода записан фиктивный
Для того, чтобы области frame0, frame1 и
frame2 не были видны на экране, к блокам, которые их содержат,
применен стиль
Как, проверить, например, не стоит ли (в текстовом варианте игры)
символ “X” в первой ячейке таблицы? Доступ к ячейке запишется так:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 |
Предусмотреть автоматическую генерацию начального состояния игры, контроль числа ходов, проверку на окончание игры. Фишка должна перемещаться в соседнюю пустую клетку мышиным щелчком.
Приложение будет более привлекательным, если фишки выполнить в графике.
