 |
|
 |
r8-project.xyz - створи сайт безкоштовно! |
|
||||
|
|
|||
|
|
|
|
6.3. Динамічна зміна зовнішнього вигляду сторінки
Щоб динамічно змінювати вигляд наший веб-сторінки, необхідно вирішити одне питання: яким чином наш сценарій зможе звертатися до окремих її елементів? Існує два способи такого доступу: класичний і по імені елементу. Щоб бути послідовними, давайте спочатку розглянемо перший з них.
Доступ до елементів HTML по номеру
Візьмемо такий приклад. Припустимо, що ми помістили на веб-сторінку графічний елемент (картинку), але хочемо, щоб вона не відразу виникла в своєму реальному розмірі, а поступово виросло “з нічого”. Для прикладу можна узяти зображення комп'ютера ATARI-800, яке вже ісполь- зовалось нами в розділі 3. Карту графічних посилань ми в даному прикладі на нього ставити не будемо, хоча це легко зробити, просто перенісши код з останнього прикладу розділу 3.1'. Спочатку просто поставимо картинку на сграніцу:
<IMG SRC="Images/computer.gif" WIDTH="151" HEIGHT="10" BORDER="0" АLТ="Компьютер">
Фізичний розмір цієї картинки - 451х310, але ми, як бачите, спеціально зменшили її ширину і висоту на 300 пікселов. Тепер давайте спробуємо звернутися до неї з сценарію JavaScript.
Виявляється, доступ до всіх картинок на сторінці можна отримати, просто написавши метод document.images і вказавши в квадратних дужках номер картинки на сторінці. Взагалі кажучи, такий синтаксис в JavaScript уживається по відношенню до масивів елементів. Тобто, якщо у нас є масив з п'яти елементів під назвою MoyMassiv, то до його елементів слід звертатися так: MoyMassiv[0], MoyMassiv[1]..., MoyMassiv[4]-. Мас сивий document.images називається колекцією.
Нумерація картинок починається з нуля. Наша картинка, як перша на сторінці, матиме номер 0. Отже, для звернення до неї з сценарію слід використовувати метод document.images[0]. Якби ми помістили на сторінку ще одну картинку, після першої, то до цієї другий кар тінке ми могли б звернутися так: document.images[1].
Тепер ми можемо написати функцію, яка перевірятиме, чи не досягла ще наша картинка потрібного розміру, і якщо немає, то збільшувати її ширину і висоту. Перевірити розміри можна таким чином:
if (document.images[0].width<451)
Тобто, якщо після номера картинки ми поставимо крапку і напишемо будь-який наявний її HTML-атрибут, то зможемо з сценарію дізнатися його значе ніє і, при необхідності, змінити його:
document.images[0].width+=2;
В даному випадку ми збільшили ширину картинки на 2 піксела. Так само можна поступити і з її висотою:
document.images[0].height+=2 ;
Тепер, щоб “зациклити” нашу функцію, можна просто в кінці виз вать її ж після деякої затримки. Наприклад, якщо наша функція називатиметься sizer(), то останнім її рядком може бути:
setTimeout("sizer()", 20);
Такий виклик функції з самої себе називається рекурсивним викликом і досить часто уживається в JavaScript. (Врахуйте, що так можна поступати далеко не у всіх мовах програмування - в деяких мовах із-за рекурсивних викликів може трапитися, наприклад, помилка переповнювання стека, або ще яка-небудь гидота... Але поки ми пишемо код на JavaScript, про це можна не турбуватися.) Тепер достатньо один раз викликати цю функцію, і далі вона весь час викликатиме себе сама. Звичайно, можна було зробити і абияк по-іншому, наприклад оста вити в “тілі” функції тільки само збільшення розміру, а перевірку і повторний виклик винести в “тіло” документа, написавши там що-небудь ніби:
while (document.images[0].width<451) setTimeout("sizer()", 20);
Проте для ілюстрації можливостей давайте все ж таки застосуємо рекурсивний виклик. Отже, подивимося, що у нас виходить.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Картинка с изменяющимся размером</ТIТLЕ>
<SCRIPT LANGUAGE""JavaScript">
function sizer () { if (document.images[0].width<451)
{ document.images[0].width+=2; document.images[0].height+=2; setTimeout("sizer()", 20); } } //--> </SCRIPT>
</HEAD>
<BODY>
<IMG SRC="Images/computer.gif" WIDTH="151" HEIGHT”"10" BORDER="0" АLТ="Компьютер">
<SCRIPT LANGUAGE="JavaScript">
sizer(); //-->
</SCRIPT>
</BODY>
</HTML>
В результаті ми отримаємо картинку, що поступово збільшується в розмірах. До речі, деякі комп'ютери можуть “не встигати” так часто перемальовувати зображення, особливо якщо на сторінці є ще яка-небудь інформація, тому можна з розрахунку на них збільшити час затримки перед наступним викликом функції. При цьому краще в стільки ж раз збільшити і приріст розмірів картинки, інакше вона буде рости занадто поволі, і набридне користувачеві ще до того, як придбає свої дійсні розміри. Наприклад, це можна зробити так:
document.images[0] width+=10;
document.images[0].height+=10;
setTimeout("sizer()", 100);
При цьому, зрозуміло, збільшення відбуватиметься не так плавно, зате ми можемо бути упевнені, що на більшості комп'ютерів така “анімація” буде відтворена коректно.
До речі, нашу функцію sizer() легко переробити так, щоб картинка, досягнувши нормальних розмірів, знову почала зменшуватися, потім знову збільшилася і так далі. Для цього треба додавати до розмірів не просто число, а змінну:
document.images[0].width+=a; document.images[0],height+=a;
Тоді ми зможемо привласнювати цій змінній то позитивне, то негативне значення, наприклад +2 і -2. Хай спочатку значення буде позитивним:
var а=2 ;
причому це визначення змінної не повинне відбуватися усередині “тіла” функції. Тепер, якщо картинка досягла нормальних розмірів, змінимо значення а на -2:
if (document.images[0].width>=451) a=-2;
Картинка почне зменшуватися. Залишилося при дуже маленькому її раз-мере знову змінити значення а:
if (document.images[0].width<=151) a=2;
Подивимося, як тепер виглядатиме функція цілком (все остальноє на цій сторінці залишається таким же, як в попередньому прикладі, тому ми не повторюватимемо текст всієї сторінки):
<SCRIPT LANGUAGE="JavaScript">
<!-- var a=2; function sizer()
( if (document.images[0].width>=451) a=-2;
if (document.images[0],width<=151) a=2;
document.images[0].width+=a;
document.images[0].height+=a;
setTimeout("sizer0", 20); }
//-->
</SCRIPT>
Отже, ми розглянули, яким чином можна дістати доступ з сценарію до будь-якої картинки на веб-сторінці. Таким же способом можна управляти ще деякими елементами: посиланнями і елементами тега <AREA> через метод document.links, формами через метод document.forms і document.forms[номep_формы].elements, якорями через метод document.anchors і т.д.
Доступ до елементів HTML по імені
Проте, по-перше, не дуже зручно обчислювати номер елементу на стра- ніце, а по-друге, описаним вище способом ми можемо отримати дос- тупий не до всіх елементів. Розглянемо такий приклад. Припустимо, ми створюємо веб-сторінку для сайту фірми, що проводить мигалки, і тому нам обов'язково хочеться, щоб в заголовку відповідне слово мигало. Ми навіть вже написали заготівку:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLЕ>Мигающий зaгoлoвок</TITLE>
<STYLE> BODY { background-color: #F9FFF9;
color: #OD160E; } H2 {
text-align: center; } P { text-indent: 3em;
} </STYLE>
</HEAD>
<BODY>
<Н2>Производство <ВR>МИГАЛОК<ВR> и цветомузыкальных установок </Н2>
<Р>Наша фирма является уникальным явлением на всем земном шаре. Вы спросите, почему? Подождите немного, скоро вы это сами поймете, если вам удастся дочитать этот текст до конца. Если же вам не удастся это сделать, то когда-нибудь вы очень сильно пожалеете об этом, говоря себе: а вот было оно совсем рядом, а я упустил его... Это мы про что, как вы думаете?</Р>
<Р>Итак, решено: вы, во что бы то ни стало, дочитываете этот текст до конца. (ДАЛЕЕ ИДЕТ КАКОЙ-НИБУДЬ ДЛИННЫЙ И СКУЧНЫЙ ТЕКСТ...)</Р>
</BODY>
</HTML>
Результат роботи цієї заготівки показаний на мал. 6.6. Отже, проблема в тому, щоб примусити мигати слово “МИГАЛОК”. Ну, зрозуміло, можна застосувати стильову властивість text-decoration: blink; або просто тег <BLINK>, але ні те, ні інше не підтримується броузером Internet Explorer. Як же бути?
Перш за все, треба виділити слово МИГАЛОК в окремий елемент. Оскільки воно знаходиться на окремому рядку, можна використовувати тег
<DIV>:<Н2>Производство <DIV>МИГАЛOK</DIV> и цветомузыкальных установок.</Н2>
Щоб мати можливість управляти цим елементом, потрібно дати йому унікальне ім'я, встановивши атрибут ID=:
<Н2>Производство <DIV ID="mig">МИГАЛOK</DIV> и цветомузыкальных установок.</Н2>
Теперь, если у пользователя броузер Netscape, можно сразу установит! мигающий стиль:
<Н2>Производство <DIV ID="mig" STYLE="text-decoration: blink;>МИГАЛOK</DIV> и цветомузыкальных установок.</Н2>
Мал. 6.6. Попередня заготівка для веб-сторінки з миготливим заголовком
Зміна властивостей елементів
Оскільки Internet Explorer при цьому не відобразить мигання, ми можемо напі сать функцію, яка робитиме цей елемент то видимим, то невіді мим. Для цього нам стане в нагоді стильова властивість visibility. Спочатку встановимо його так, щоб елемент був видний:
<Н2>Производство <DIV ID="mig" STYLE="text-decoration: blink; visibility: visible;">МИГАЛОК</DIV> и цветомузыкальных установок.</Н2>
Після цього залишається перевірити тип броузера, і якщо це не Netscape, викликати функцію штучного мигання (яку ми ще не написали):
if (navigator.appName!""Netscape") blink it();
Звернете увагу на те, що символ != означає нерівно. Отже, ця функція повинна то ховати наш елемент, то навпаки, показувати. Щоб сдедать елемент невидимим, потрібно привласнити його властивості visibility значення hidden. Оскільки ми дали елементу унікальне ім'я (за допомогою атрибуту ID=), тепер у нас є можливість дістати доступ до нього через колекцію document.all:
document.all.mig.style.visibility="hidden";
Як бачите, написавши метод document.all, можна після крапки просто вказати ім'я елементу і далі будь-який атрибут, в даному випадку STYLE=. Після style можна знову поставити крапку і вказати будь-яку стильову властивість.
Щоб зробити наше слово знову видимим, потрібно привласнити властивості visibility значення visible:
document.all.mig.style.visibility="visible";
Теперь осталось только написать условие. Можно было бы просто написать:
if (document.all.mig.style.visibility="hidden") document.all.mig.style.visibility="visible";
else document.all.mig.style.visibility="hidden";
Проте давайте для більшої гнучкості і наочності використовуємо змінну прапор. Хай вона буде рівна 1, якщо елемент видимий, і 0, якщо немає. Тоді ми можемо в умові перевіряти саме цей прапор. Вся функція придбає такий вигляд:
<SCRIPT LANGUAGE="JavaScript">
<!-- var vis=0; function blink it() { if (vis=l)
{ document.all.mig.style.visibility="hidden";
vis=0; } else { document.all.mig.style.visibility="visible"; vis=1;
} setTimeout ("blink_it()", 400); }
//--> </SCRIPT>
Як бачите, спочатку ми привласнили змінній-прапору vis значення 0, щоб в перший же момент напис МИГАЛОК не зникав (при першому запуску функції тепер елемент буде видимий). В кінці функції ми використовуємо затримку в 400 мілісекунд і рекурсивний виклик тієї ж функції.
Давайте подивимося, як виглядатиме вся сторінка.
<BODY>
<Н2>Производство <DIV ID="mig" STYLE="text-decoration: blink;
visibility: visible;
">МИГАЛОК</DIV> и цветомузыкальных установок.</Н2>
<Р>Наша фирма является уникальным явлением на всем земном шаре. Вы спросите, почему? Подождите немного,скоро вы это сами поймете, если вам удастся дочитать этот текст
до конца. Если же вам не удастся это сделать, то когда-нибудь вы очень сильно пожалеете об этом, говоря себе: а вот было оно совсем рядом, а я упустил его... Это мы про что, как вы думаете?</Р>
<Р>Итак, решено: вы, во что бы то ни стало, дочитываете этот текст до конца. (ДАЛЕЕ ИДЕТ КАКОЙ-НИБУДЬ ДЛИННЫЙ И СКУЧНЫЙ ТЕКСТ...)</Р>
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName! ""Netscape") blink it(); //--> </SCRIPT> </BODY> </HTML>
Вибір змінних властивостей
До речі, використання змінної-прапора дає нам можливість легко переробити це мигання в що-небудь інше. Наприклад, замість тимчасового зникнення напису можна на цей час включати виворотку, тобто взаємно поміняти колір тексту і колір фону. Як ми вже говорили, діставши доступ до елементу (наприклад, через метод document.all), ми можемо легко змінити будь-яку його властивість. Ось, наприклад, як можна організувати мигання з вивороткой:
function blink it() { if (vis"1) { document.all.mig.style.backgroundColor="#OD160E document.all.mig.style.color="#F9FFF9"; vis=0;
} else { document.all.mig.style.backgroundColor="#F9FFF9" ;
document.all.mig.style.color="#OD160E"; vis=l; } setTimeout ("blink_it()", 400); }
Результат (в момент включения выворотки) показан на рис. 6.7. Обратите внимание на то, что стилевые свойства, которые пишутся через дефис в нашем примере это background-color), при доступе из сценария необходимо писать без дефиса, но заменив букву, идущую после дефиса, на прописную. Так, background-color превращается в backgroundColor, font-size в fontSize, border-style в borderStyle и т. д. Кстати говоря, чтобы получить тот результат, который показан на рис. 6.10, нам пришлось добавить еще одно свойство нашему мигающему элементу:
<Н2>Производство <DIV ID="mig" STYLE="text-decoration: blink; width: 7em; visibility: visible;">МИГАЛОК</DIV> и цветомузыкальных установок.</Н2>
а саме: ми встановили ширину елементу. Якщо цього не зробити, колір фону мінятиметься на цьому рядку по всій ширині екрану.
Мал. 6.7. Мигання заголовка може здійснюватися різними способами, у тому числі і вивороткой
Доступ до елементів сторінки через метод document.all - річ дуже зручна. На жаль, така можливість на 100% підтримується тільки в броузере Internet Explorer. Що стосується броузеров Netscape, то доступ до будь-якого елементу там з'явився тільки в шостій версії, але синтаксис його відрізняється від розглянутого вище. Замість documental).имя_элемента для Netscape 6 потрібно писати document.getElementByld("имя_элементa"). А в раніших версіях Netscape доступ забезпечується тільки до деяких елементів сторінки: малюнкам (document.images), посиланням (document.links), якорям (document.anchors), елементам управління і упровадженим об'єктам (document.applets), формам (document.forms), об'єктам, упровадженим за допомогою тега <EMBED> (document.embeds), а також шарам, які в Netscape організовувалися за допомогою тега <LAYER> (через document, layers). При цьому, правда, все одно можна привласнювати цим елементам унікальні імена і потім використовувати їх для звернень, наприклад, так:
<A NAME="colored">Какой-то текст<А> <SCRIPT> document.anchors.colored.style.color="red"; </SCRIPT>
При цьому деякі версії Netscape дозволяють опустити слово style, а при доступі до шарів - і слово layers.
Ці відмінності декілька утрудняють створення сторінок, які б добре виглядали і в Internet Explorer, і в Netscape. Проте завжди можна перевірити з сценарію тип і версію броузера, після чого написати різні блоки коду для різних броузеров. У деяких особливо складних випадках можна навіть написати окремі сторінки для різних типів броузеров, і організувати перенаправлення на них (приклад такого перенаправлення був приведений в розділі 6.1). У будь-якому випадку не забувайте перевіряти, як веб-сторінка виглядає в броузерах інших типів. Складно, звичайно, підтримувати сумісність зі всіма броузерамі, але навіть якщо орієнтуватися на якій-небудь один з них, все одно іноді варто трохи підкоригувати код так, щоб користувачі інших броузеров побачили хоч щось більш менш схоже. До речі, в цій книзі більшість прикладів орієнтовані на броузер Internet Explorer версії 4 і вище.
|
|
|
|
|
|||
|
|
|
|||
|
|
|||
|
|
|||
|
|
|
Copyright © r8-project.xyz, 2008 - 2021 |