Динамическое отображение текста веб-страницы
Произвольный выбор текста
Однако в таком виде эта страница представляется еще не совсем завершенной, поскольку, когда на экране отобразится текст рассказа “Молоток”, вернуть обратно текст сказки не удастся (если, конечно, пользователь сообразит нажать в браузере кнопку Reload (Обновить), но рассчитывать это некорректно). Поэтому надо сделать еще одну мнимую гиперссылку, которая загружала бы текст сказки. Поскольку стиль уже определен, сде-лать это совсем нетрудно:
<SPAN CLASS="lnk" onClick="show_ivan()">Сказка «Иван-царевич и серый заяц»</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()">