 |
|
 |
decoroom.info - створи сайт безкоштовно! |
|
||||
|
|
|||
|
|
|
|
Використання інших властивостей при роботі з текстом
Крім розглянутої тут властивості innerHTML, кожен елемент веб-сервера сторінки має ще три схожі властивості:
• innerText - те ж, що і innerHTML, проте не може містити HTML теги;
• outerHTML - те ж, що і innerHTML, але включає що відкриває і закриваючий теги даного елементу, а також вкладені елементи:
• і, нарешті, outerText - те ж, що і outerHTML, проте не може содер жати HTML-tens..
Іншими словами, властивості innerText і innerHTML кожного елементу содер тисне тільки внутрішній текст цього елементу, а властивості outerText і outerHTM L - важ текст елементу, включаючи вкладені елементи і теги самого елементу. При цьому innerText і outerText не містять HTML.-форматирования, innerHTML і outerHTML можуть його містити. Зі всіх цих властивостей у начина ющих зазвичай викликає питання тільки outerText. Проте воно використовується досить рідко. Змінивши його, можна практично прибрати із сторінки важ елемент.
Крім того, існують зручні методи для вставки тексту і HTML-sop", на сторінку. Вони називаються insertAdjacentText і insertAdjacentHTML. Давайте розглянемо такий приклад. Допустимо, ми хочемо, щоб на “домашній сторінці Сергія Сергєєва” через хвилину після натиснення на будь-яке з наших уявних “гіперпосилань” і, відповідно, відображення тексту одного з розповідей, перед ним з'являвся червоний напис “Ну що, подобається?”
Потім до неї можна ще додати різні кнопки типу ТАК, НЕМАЄ, НЕ ДУЖЕ
І пов'язати з ними ще які-небудь дії, наприклад, ніколи більше не відображати розповідь, яка не сподобалася. Проте зараз давайте додамо тільки напис.
Додавання додаткових написів
Для цього можна зробити наступне. Визначимо відповідний стиль.
Н3 { text-align: center; color: red; }
У нашому прикладі для запиту до користувача ми використовуємо тег <НЗ>. Після цього вставимо наш напис таким чином:
document.all.rasskaz.insertAdjacentHTML("AfterBegin" '<H3>Hy що, подобається?<НЗ>');
Тут використовується метод insertAdjacentHTML, що дозволяє вставляти не тільки текст, але і HTML-тітки. Аргумент AfterBegin означає, що вставля-емий код буде поміщений в початок блоку <DIV ID='rasskaz'> . Якби ми напі-салі BeforeEnd, то код був би вставлений в кінець блоку. До речі, методи lnsertAdjacentText і insertAdjacentHTML дозволяють вставити текст (і HTML-код) не тільки всередину якого-небудь елементу, але і безпосередньо перед і ним або після нього! Для цього використовуються аргументи BeforeBegin і, відповідно, AfterEnd. Як ви вже зрозуміли, як другий аргумент використовується рядок з текстом або HTML-кодом, який треба вставити.
Остальноє вже просто. Додамо в кожну функцію відображення тексту при введений вище рядок у поєднанні з установкою таймера - setTimeout:
setTimeout("document.all.rasskaz.insertAdjacentHTML ('AfterBegin','<H3>Hy що, подобається?<НЗ>') ", "60000");
Правда, це ще не все. Якщо залишити сторінку у такому вигляді, то таймер включить метод додавання тексту через хвилину після клацання на уявній гипересилке, навіть якщо користувач за цей час встигне клацнути на іншій, а це нами не замислювалося. Тому під час клацання на кожному уявному гіперпосиланні слід зупиняти попередній таймер. Для цього досить визначити глобальну змінну:
var timer; И присвоить ей значение запущенного таймера:
time=setTimeout("document.all.rasskaz.insertAdjacentHTML ('AfterBegin','<H3>Hy что, нравится?<НЗ>') ", "60000");
Тогда для его остановки достаточно будет написать следующее:
clearTimeout(timer); В тот момент таймер будет остановлен.
І так давайте ще раз подивимося на текст сторінки, що вийшла. У ній використана одна функція show() для відображення будь-якого з текстів. Звернете увагу на те, що при її написанні використаний той факт, що ім'я змінної, що містить текст кожної розповіді, якщо до нього пріба- вити закінчення Ink, співпадає з ім'ям відповідного уявного гипер- посилання. Подібний розумний вибір імен дозволяє передавати функції не два параметри (ivanink і ivan), а тільки один, що економить час і ресурси комп'ютера. В даному випадку це не так істотно, оскільки раз заходів сторінки невеликий, але в деяких випадках може зіграти велику роль.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLЕ>Домашняя страница Сергея Сергеева.</TITLE>
<STYLE>
<!--
BODY { background-color: #BABAAO;
color: rgb(29,29,24); } H1,H2 { text-align: center;
} H3 { text-align: center; color: red;
} .Ink { color: #634438;
text-decoration: underline;
cursor: hand;
} .Ink0 { color: rgb(29,29,24);
text-decoration: none;
cursor: default;
} 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">
<!--var oldlnk="ivanlnk";
var timer;
var hammer”'
<H2>MOЛTOK<BR><SPAN STYLE="font-style: italic; "> paccrap</SPAN></H2>
<DIV STYLE="text-align: right; ">
<DIV CLASS="epig">Mы кузнецы, и дух наш молод.
<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV> <BR>
<DIV CLASS="ab">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>' ;
var ivan='<Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR>
<SРАN STYLE="font-style: italic; ">CKА3KА</SPAN></H2><DIV STYLE="text-align: right;"><DIV CLASS="epig">Hy, погоди!..
<DIV CLASS="pdps"> (Из мультфильма) </DIV></DIV> </DIV><BR>
<DIV CLASS="ab">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе -как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV><DIV CLASS="ab">Дoлгo ли, коротко ли... </DIV>
<DIV CLASS="ab">И они жили долго и счастливо и умерли в один день.</DIV><НR>';
function show(arg)
{ clearTimeout(timer) ;
document.all.rasskaz.innerHTML=eval(arg);
document.all[oldink].className="lnk";
oldlnk=arg+'Ink'; document.all[oldink].className="lnk0";
timer=setTimeout("document.all.rasskaz.insertAdjacentHTML ("AfterBegin",'<H3>Hy что, нравится?<НЗ>') ", "60000");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<Н1>Домашняя страница Сергея Сергеева</Н1>
<BR>
<DIV STYLE="font-size: larger;">
<SPAN STYLE="font-weight: bold;" Сергей CepreeB</SPAN> — писатель-авангардист, автор 20 рассказов.<BR>
В жизни большой любитель собак и компьютерных игр.
<BR><BR> Некоторые его рассказы вы можете прочитать прямо здесь.</DIV> <HR>
<DIV STYLE="text-align: center;">
<SPAN CLASS="lnk" ID="ivanlnk" onClick="show('ivan')">Сказка «Иван-царевич и серый заяц&гадио;</SPAN>
<SPAN CLASS="lnk" ID="hammerlnk" onClick="show('hammer')">Рассказ «МОЛОTOK»</SPAN> </DIV>
<HR>
<DIV ID="rasskaz"> </DIV>
</BODY>
</HTML>
Як бачите, змінна oldink грає тут ще одну, допоміжну роль: їй привласнюється результат “обчислення” імені уявного гіперпосилання, і вона використовується при обох змінах її стилю. Крім того, в цьому тексті використовується функція eval(), яку ми з вами ще не розглядали:
document.all.rasskaz.innerHTML=eval(arg) ;
Для чого вона потрібна? Давайте розберемося. Наша функція show() отримує аргумент у вигляді текстового рядка:
onClick="show('ivan')"
Це зроблено, щоб легко було отримати ім'я уявного гіперпосилання, про сто зчепивши цей рядок з рядком Ink (ivan + Ink = ivanink). Проте якщо Tenepь написати просто:
document.all.rasskaz.innerHTML=arg;
той вміст блоку <DIV ID='rasskaz'> буде замінений ім'ям змінної. тобто рядком, що поступив як аргумент. Використання функції
eval() тут дозволяє отримати посилання не на ймення змінній, а на її значення
Те, що побачить користувач, що читає в перебіг хоч би хвилини одну і ту ж розповідь на цій сторінці, зображене на мал. 7.12. Для вправи спробуйте додати ще вставку кнопок з варіантами відповіді на поставлене питання, а також заборону відображення в даному сеансі роботи не вподобаних розповідей.
Мал. 7.12. Через хвилину після появи тексту розповіді виникає червоний напис “Ну що, подобається?
|
|
|
|
|
|||
|
|
|
|||
|
|
|||
|
|
|||
|
|
|
Copyright © DecoRoom.info, 2008 - 2021 |