Иллюстрированный самоучитель по созданию сайтов

Динамическое отображение текста веб-страницы

Произвольный выбор текста

Однако в таком виде эта страница представляется еще не совсем завершенной, поскольку, когда на экране отобразится текст рассказа “Молоток”, вернуть обратно текст сказки не удастся (если, конечно, пользователь сообразит нажать в браузере кнопку Reload (Обновить), но рассчитывать это некорректно). Поэтому надо сделать еще одну мнимую гиперссылку, которая загружала бы текст сказки. Поскольку стиль уже определен, сде-лать это совсем нетрудно:

<SPAN CLASS="lnk" onClick="show_ivan()">Сказка &laquo;Иван-царевич и серый заяц&raquo;</SPAN>

Одновременно нужно написать функцию show_ivan(), во всем аналогичную функции show_hammer(). Она должна просто заменять значение свойства document.all.rasskaz.innerHTML обратно на текст сказки:

function show_ivan() {
    document.all.rasskaz.innerHTML = '
<H2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<BR>
<SPAN STYLE="font-style: italic;"> сказка</SPAN></H2>
<DIV STYLE="text-align: right;">
<DIV CLASS="epig">Ну, погоди!..
<DIV CLASS="pdps">(Из мультфильма </DIV></DIV>
</DIV><BR><DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро,
и невест полный дворец, и книжек много умных, и тренажерный зал огромный.
Однако тоскливо было у него на душе - как встанет утром с постели царской,
так и начнет горевать, и горюет до вечера.</DIV><DIV CLASS="аЬ">Долго ли, коротко ли..,
</DIV><DIV CLASS="ab">H они жили долго и счастливо и умерли в один день.</DIV><HR>';
}

Обращаем ваше внимание на то, что HTML-код, находящийся внутри функции, должен представлять собой одну строку, то есть в нем не должно содержаться ни одного служебного символа перевода строки, которые мы для удобства иногда вставляем в обычный HTML-текст. Если такие символы в нем останутся, то интерпретатор JavaScript “подумает”, что мы просто написали одну незавершенную строку, а потом еще и начали другую строку с неопределенного объекта. Соответственно, при этом появятся сообщения об ошибках, и страница вообще не будет “работать”.

Честно говоря, определять такие длинные строки в “теле” функции можно, но неудобно, и потому не принято. Лучше сразу определить переменные, содержащие эти строки, и из функций обращаться уже к этим переменным.

var hammer = '<H2>МОЛОТОК<BRXSPAN STYLE="font-style: italic;">рассказ</SPAN></H2>
<DIV STYLE="text-align: right;">
<DIV CLASS="epig">Мы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV><BR>
<DIV CLASS="ab">Это случилось очень давно, уж и не помню в каком году,
в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа)'
var ivan = ' <Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ <BR>
<SPAN STYLE="font-style: italic; ">СКАЗКА</SPAN></H2>
<DIV STYLE="text-align: right;">
<DIV CLASS="epig">Ну, погоди!..
<DIV CLASS="pdps">(H3 мультфильма)</DIV> </DIV></DIV><BR>
<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро,
и невест полный дворец, и книжек много умных, и тренажерный зал огромный.
Однако тоскливо было у него на душе - как встанет утром с постели царской,
так и начнет горевать, и горюет до вечера. </DIV><DIV CLASS="аЬ">Долго ли, коротко ли...
</DIV><DIV CLASS="ab">И они жили долго и счастливо и умерли в один день.</DIV><HR>';
  
function show_hammer() {
    document.all.rasskaz.innerHTML = hammer;
}
  
function show_ivan() {
    document.all.rasskaz.innerHTML = ivan;
}

Это, во-первых, намного нагляднее, а кроме того, если одна из этих "строк" вдруг потребуется еще в какой-либо функции, то можно будет легко к ней обратиться по имени переменной, не вводя всего этого “крокодила” заново. Кстати, теперь, когда у нас есть две мнимые гиперссылки на оба текста, можно первоначально не отображать на экране ни один из них:

<DIV ID="rasskaz"></DIV>

Такое начало будет смотреться эффектнее (рис. 7.14), а заодно мы избавимся от дублирования кода. Кстати, если вам все-таки хочется сразу отобразить текст какого-либо из рассказов, то все равно не следует вводить один и тот же HTML-код второй раз, особенно если он длинный. Лучше напишите что-нибудь вроде:

<BODY onLoad="show ivan()">
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.