 |
|
 |
r8-project.xyz - створи сайт безкоштовно! |
|
||||
|
|
|||
|
|
|
|
7.4. Динамічне відображення тексту веб-сторінки
У цьому розділі ми розглянемо, якими способами можна динамічно змінювати текстовий зміст сторінки. У попередніх розділах, як іи пам'ятаєте, ми змінювали, як правило, тільки зовнішній вигляд текстових ;элементов (колір тексту, зображення шрифту і т. д.). Проте іноді буває потрібно змінити “на ходу” безпосередньо текстовий зміст.
Взагалі-то кажучи, в розділі 7.2 ми вже один раз трохи змінювали текст, але це був текст на кнопці. Якщо пам'ятаєте, тоді ми міняли написи Сде лать фон білим і Зробити фон зеленим. Напис на кнопці змінювався за допомогою значення атрибуту VALUE= тега <INPUT> . Проте що робити, якщо текст, що підлягає зміні, не є кнопкою?
Давайте розглянемо такий приклад. Припустимо, нам треба декілька удосконалити “Домашню сторінку Сергія Сергєєва”, яку ми створювали в Розділах 1, 2 і 4. Наприклад, нам хочеться, щоб спочатку на сторінці відображався тільки вступний текст і текст першого рас оповіді. А при натисненні на посилання замість тексту першої розповіді з'являвся б текст другої розповіді і т.д.
(Виявляється, це здійснити дуже легко! Укладемо спершу текст першої розповіді в блок <DIV> і привласнимо йому унікальне ім'я:
< DIV ID="rasskaz"> <Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВР> OPAN STYLE="font-style: italic; ">cкaзкa</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="аЬ">И они жили долго и счастливо и умерли в один день.</DIV>
<HR> </DIV> Теперь вместо ссылки на второй рассказ напишем просто
<SPAN onClick="show_hammer()">Рассказ «МОЛОTOK»</SPAN>
Як бачите, тепер, якщо користувач клацне мишею на словах Розповідь “Молоток”, то буде виконана функція show_hammer(). По наший задумці, вона повинна замінити текст казки на текст розповіді “Молоток”.
Пригадаємо, що важ текст казки був поміщений в блок <DIV> . А у будь-якого блоку <DIV>, як і у більшості інших елементів, є властивість innerHTML, значення яке містить важ HTML-код даного елементу! Це означає, що якщо ми змінимо значення цієї властивості, зміниться і HTML-V.OJS,, а значить, і текст, що міститься на сторінці. Наша функція show_hammer() може виглядати, наприклад, от так:
function show_hammer() { document .all. rasskaz . innerHTML=' <H2>MOЛOTOK<BR>
<SPAN STYLE="font-style: italic ;">paccкaз</SPAN></H2>
<DIV STYLE="text-align: right;">
<DIV CLASS="epig">Mы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV><BR>
<DIV CLASS="аЬ">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии. . . (Здесь располагается текст рассказа) </DIV>;
}
Як бачите, ця функція виконує всього одну дію - привласнює властивості document.all. rasskaz. innerHTML значення, що містить длінную-предлінную рядок. У цьому рядку міститься важ HTML-код, розповіді “Молоток” .
Імітація гіперпосилань
Але як користувач дізнається, що на словосполученні Розповідь “Молоток” потрібно клацнути, як на гіперпосиланні, для появи тексту розповіді на крані? Для цього доведеться або дійсно оформити його як гипер-ссилку, тобто укласти в тег <А HREF='#'>, або просто підкреслити його, а також змінити вид покажчика миші над ним:
<SPAN STYLE="text-decoration: underline; cursor: hand;" onClick="show hammer()">Рассказ «MonoTOK»</SPAN>
Можна сюди ж додати і зміну кольору, і тоді з погляду користувача цей рядок взагалі не буде нічим відрізнятися від гіперпосилання. Пам'ятаєте, в попередній “версії” цієї сторінки ми з вами визначали для гіперпосилань коричневий колір за допомогою таблиць CSS:
A:link,A:visited { color: #634438; }
Тепер же наше уявне гіперпосилання насправді є елементом <SPAN>.Mы могли б просто замінити в приведеному вище визначенні стилю A:link, A:visited на SPAN. Але оскільки цей елемент може використовуватися ще для чого-небудь на тій же сторінці, краще визначимо для нього спеціальний клас, допустимий, під назвою Ink:
.Ink { color: #634438; }
До речі, підкреслення і зміну форми покажчика миші можна також внести безпосередньо до таблиці стилів:
.Ink { color: #634438; text-decoration: underline; cursor: hand; } Теперь осталось написать сам код нашей мнимой гиперссылки:
<SPAN CLASS="ink" onClick="show_hammer()">Рассказ «МОЛОTOK »</SPAN>
Отже, тепер ця сторінка придбала зовнішній вигляд, показаний на мал. 7.11. Після клацання на уявному гіперпосиланні Розповідь “Молоток” її вигляд зміниться (див. мал. 7.12).
Ось початковий текст цієї сторінки.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLE>Домашняя страница Сергея Сергеева.</TITLE>
<STYLE>
<!--
BODY { background-color: #BABAAO; color: rgb(29,29,24);
Мал. 7.12. Клацання на “гіперпосиланні” змінює текст в нижній частині сторінки
Мал. 7.13. Та ж сторінка після клацання на “гіперпосиланні”
} Н1,Н2 { text-align: center;
} .Ink ( color: #634438; text-decoration: underline; cursor: hand;
} HR ( margin-top: 24px; width: 75%;
) DIV.epig { text-align: justify; font-size: smaller; width: 130;
} DIV.pdps { font-style: italic; text-align: right;
} DIV.ab { text-align: justify; text-indent: 2em; } --> </STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function show_hammer()
{ document. all. rasskaz . innerHTML='
<H2>MOЛOTOK<BR>
<SPAN STYLE="font-style: italic;">paccкaз</SPAN></H2>
<DIV STYLE="text-align: right; "><DIV CLASS="epig">Mы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV>
</DIV>
</DIV><BR>
<DIV CLASS="аЬ">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>';
} //-->
</SCRIPT> </HEAD>
<BODY> <Н1>Домашняя страница Сергея Сергеева</Н1>
<DIV STYLE="text-align: center;">Сказка «Иван-царевич и серый заяц&гаquо;
<SPAN CLASS="lnk" onClick="show_hammer()">Рассказ « ;МОЛОTOK»</SPAN></DIV>
<BR>
<DIV STYLE="font-size: larger; ">
<SPAN STYLE="font-weight: bold;"> Сергей CepreeB</SPAN> — писатель-авангардист, автор 20 рассказов.<BR>
В жизни большой любитель собак и компьютерных игр.<ВR><ВR> Некоторые его рассказы вы можете прочитать прямо здесь.</DIV> <HR>
<DIV ID="rasskaz">
<Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR>
<SPAN STYLE="font-style: italic;">CАKЗKА</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">И они жили долго и счастливо и умерли в один день.</DIV>
<HR> </DIV> </BODY> </HTML>
Подібна зміна вмісту досить великого фрагмента сторінки завжди виглядає привабливо. Відмітьте, що зміна відбудеться практично миттєво, оскільки важ потрібний текст насправді загру жаєтся в пам'ять призначеного для користувача комп'ютера ще при завантаженні сторінки. У момент натиснення на уявне гіперпосилання він вже не повинен завантажуватися через інтернет, а просто відобразиться на екрані.
Довільний вибір тексту
Проте у такому вигляді ця сторінка представляється ще не зовсім завер шенной, оскільки, коли на екрані відобразиться текст розповіді “Молоток”, повернути назад текст казки не вдасться (якщо, звичайно, користувач
зміркує натиснути в броузере кнопку Reload (Відновити), але розраховувати це некоректно). Тому треба зробити ще одне уявне гіперпосилання, яке завантажувало б текст казки. Оскільки стиль вже визначений, сде-лать це зовсім неважко:
<SPAN CLA3S="lnk" onClick="show_ivan()">Сказка &1аquо;Иван- царевич и серый заяц&гадио;</SPAN>
Одночасно потрібно написати функцію show_ivan(), у всьому аналогічну функції show_hammer(). Вона повинна просто замінювати значення властивості document.all.rasskaz.innerHTML назад на текст казки:
function show_ivan'() { document.all.rasskaz.innerHTML='
<Н2>ИВАН- ЦАРЕВИЧ И СЕРЫЙ ЗAЯЦ<BR>
<SPAN STYLE="font-style: italic;"> сказка</SPAN></Н2>
<DIV STYLE="text-align: right; ">
<DIV CLASS="epig">Hy, погоди!..
<DIV CLASS="pdps">(Из мультфильма </DIV></DIV>
</DIV><BR><DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV><DIV СЬАЗЗ="аЬ">Долго ли, коротко ли. . ,</DIV><DIV CLASS="ab">H они жили долго и счастливо и умерли в один день .</DIV><HR>';
обращаем ваше внимание на то, что .HTML-код, находящийся внутри функции, должен представлять собой одну строку, то есть в нем не должно ододержаться ни одного служебного символа перевода строки, которые мы для удобства иногда вставляем в обычный HTML-текст. Если такие символы в нем останутся, то интерпретатор JavaScript “подумает”, что мы просто написали одну незавершенную строку, а потом еще и начали дру-гую строку с неопределенного объекта. Соответственно, при этом появятся вообщения об ошибках, и страница вообще не будет “работать”.
Честно говоря, определять такие длинные строки в “теле” функции можно, нo неудобно, и потому не принято. Лучше сразу определить переменные, содержащие эти строки, и из функций обращаться уже к этим перемен-
var hammer='<H2>MOnOTOK<BRXSPAN STYLE="font-style: italic;"> paccкaз</SPAN></H2>
<DIV STYLE="text-align: right; ">
<DIV CLASS="ерig">Мы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV><BR>
<DIV CLASS="аЬ">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа)
var ivan=' <Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ 3AЯЦ <BR>
<SPAN STYLE="font-style: italic; ">CKА3KА</SPAN></H2>
<DIV STYLE="text-align: right;">
<DIV CLASS="epig">Hy, погоди!..
<DIV CLASS="pdps">(H3 мультфильма)</DIV> </DIV></DIV><BR>
<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера. </DIV><DIV CLASS="аЬ">Долго ли, коротко ли. . .</DIV><DIV CLASS="ab">И они жили долго и счастливо i умерли в один день .</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()">
Мал. 7.14. На цій сторінці спочатку не видно жодне з розповідей
Тепер ще одна маленька деталь. Добре б зробити так, щоб уявна
гіперпосилання на той текст, який вже відображається на екрані, у виглядала б, як гіперпосилання. Цього легко досягти, оскільки вигляд визначений як клас в таблиці стилів. Отже, визначимо ще один клас для “відвідуваної в даний момент” частини сторінки:
. Ink() { color: rgb(29,29,24);
text-decoration: none; cursor: default;
} В даному випадку ми визначили зовнішній вигляд поточного тексту таким же, як вид звичайного тексту, проте можна було придумати і яке-небудь особливе зображення). Тепер модифікуємо наші функції show_ivan() і show_hammer() так, щоб вони змінювали клас (а значить, і зовнішній вигляд) наших уявних гіперпосилань: function show_hammer()
{ document, all .rasskaz . innerHTML=hanimer;
document.all.ivanink.className="lnk";
document.all.hammerlnk.className="lnk0";
} function show_ivan() { document.all.rasskaz.innerHTML=ivan;
document.all.ivanink.className="lnk0";
document.all.hammerlnk.className="lnk";
} Звернете увагу на те, що для доступу до атрибуту CLASS= потрібна ісполь- повать властивість className, а не class, оскільки слово class є заре- зервірованним ключовим словом JavaScript.
Зрозуміло, якщо на сторінці змінюють один одного не два, а три, чотири, десять або подібніших текстів, можна діяти так само. Проте тут є дві тонкість.
По-перше, за наявності, наприклад, 100 текстів, що змінялися, при щел чке на одному з уявних гіперпосилань потрібно визначити, якою з них потрібно повернути зовнішній вигляд гіперпосилання (клас Ink). Доведеться опреде лити глобальну змінну і кожного разу записувати в неї ім'я ісполь зованной посилання. Наприклад, якщо назвати цю змінну, допустимий, oldink, то наша функція show_hammer() придбає такий вигляд: function show_hammer()
{ document.all.rasskaz.innerHTML=hammer;
document.all[oldink].className="lnk";
document.all.hammerlnk.className="lnkO";
oldlnk='hammerlnk'; }
При цьому краще відразу при ініціалізації привласнити змінній oldlnk ім'я одне з ідентифікаторів, щоб не робити зайву перевірку, чи не є oldink порожнім рядком. Та і взагалі, якщо текстів, що змінялися, багато, краще не писати для відображення кожного окрему функ цию, а просто написати узагальнену функцію show(), яка може підлозі чать ідентифікатор посилання як аргумент або навіть просто брати його із значення властивості window.event.srcElement.
Друга тонкість полягає в наступному. Не забувайте, що всі тексти при даному підході завантажуються з Інтернету відразу (а клацання на уявляй мих гіперпосиланнях тільки управляють їх відображенням). Тому при великій їх кількості на сторінці при первинному завантаженні не буде відображено взагалі нічого, поки вони все не завантажаться. Для користувача це може означати тривале очікування перед порожнім екраном, тобто вельми сумнівне задоволення. Краще спробувати цього уникнути. Наприклад, можна розташувати ці тексти вже після тега <BODY> - тоді вони почнуть завантажуватися одночасно з відображенням сторінки, і користувач замість очікування перед порожнім екраном зможе за час завантаження почитати вступний текст, а то і текст першої розповіді. Іншим виходом може стати завантаження текстів в міру необхідності. Для цього можна застосувати, наприклад, фрейми.
|
|
|
|
|
|||
|
|
|
|||
|
|
|||
|
|
|||
|
|
|
Copyright © r8-project.xyz, 2008 - 2021 |