r8-project.xyz - створи сайт безкоштовно!

:: Меню ::


Головна

Новости
1. Як створюють веб-сторінки
1.1 Як створюють веб-сторінки
1.2. Як розмістити веб-сервер-сторіночку на сервері
1.3. Як написати веб-сторінку
1.4. Огляд програм для проглядання веб-сторінок
1.5. Огляд програм для створення веб-сторінок
1.6.(Частина-I) Створення веб-сторінок за допомогою програми Allaire Homesite/Cold Fusion
1.6.(Частина-II)Автоматизація введення

2. Основні засоби мови htmL
2.1. Просте форматування тексту
2.2. Найголовніше на будь-якій веб-сторінці - гіперпосилання
2.3. Як створити списки на веб-сторінці
2.4. Створення таблиць
3. Графіка на веб-сторінці
3.1.(Частина-I) Основні способи застосування графіки
3.1.(Частина-II)Зображення-карта
3.2. Графічні формати Інтернету
3.3. Графічні елементи оформлення веб-сторінок
3.4. Графічні маркери
3.5. Підготовка малюнків в програмі Xara Webstyle
3.6.(Частина-I)Підготовка малюнків в програмі Adobe Photoshop
3.6.(Частина-II)Прикраса зображення дрібними деталями
4. Оформлення веб-сторінки з використанням стилів
4.1. Оформлення за допомогою атрибуту STYLE
4.2. Визначення стилів в спеціальній таблиці
4.3. Огляд інших можливостей стильових таблиць
5. Використання звуку на веб-сторінці
5.1. Додавання звукового оформлення
5.2. Програми для стиснення звукових фрагментів
5.3. Маленькі хитрощі
6. Динамічні веб-сторінки на основі JavaScript
6.1. Прості приклади
6.2. Як писати власні функції
6.3. Динамічна зміна зовнішнього вигляду сторінки
6.4. Інші можливості мови JavaScript
7. Веб-сторінки, що реагують на дії користувача
7.1. Введення даних користувачем у форми htmL
7.2.(Частина-I)Сторінка, керована за допомогою миші
7.2.(Частина-II)Динамічне управління позиціонуванням елементів
7.3. Сторінка, керована з клавіатури
7.4.(Частина-I)Динамічне відображення тексту веб-сторінки
7.4.(Частина-II)Використання інших властивостей при роботі з текстом
7.5. Динамічна зміна графічних елементів веб-сторінки
8. Розміщення елементів на веб-сторінці і навігація по сайту
8.1. Використання структури фреймів
8.2. Управління розташуванням елементів веб-сторінки за допомогою таблиць
9. Додаткові можливості формування веб-сторінок
9.1. Приклад використання елементу управління Tabular Data
9.2. Приклад простого серверного сценарію
Цікаві сайти!
Карта сайту xml

Карта сайту htm

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Контакти
Додати у вибране

:: Друзі:

Biz-nes.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> &mdash; писатель-авангардист, автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр.

<BR><BR> Некоторые его рассказы вы можете прочитать прямо здесь.</DIV> <HR>

<DIV STYLE="text-align: center;">

<SPAN CLASS="lnk" ID="ivanlnk" onClick="show('ivan')">Сказка &laquo;Иван-царевич и серый заяц&гадио;</SPAN>&nbsp;

<SPAN CLASS="lnk" ID="hammerlnk" onClick="show('hammer')">Рассказ &laquo;МОЛОTOK&raquo;</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 © r8-project.xyz, 2008 - 2021