|
||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Використання інших властивостей при роботі з текстом Крім розглянутої тут властивості 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. Через хвилину після появи тексту розповіді виникає червоний напис “Ну що, подобається?
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
|