Лабораторна робота № 11. DHTML.

Мета: отримати уявлення про динамічний HTML-документі. Навчитися використовувати елементи інтерактівності при створювані web сторінок. Ознайомитись з властивостями тегу <OBJECT>, а також елементами ACTIVEX.

 

Динамічний - означає зміна властивостей в реальному часі, наприклад при здійсненні якої-небудь події.

Події - це ядро будь-яких сучасних мов програмування. Наступна строчка, вставлена в стандартне ядро HTML сторінки примушує об'єкт заголовка змінити свій колір, коли користувач наведе на нього мишу.

<h3 onmouseover="this.style.color='red';">Цей рядок змінить колір на червоний</h3>

Цей простий приклад ілюструє доступ до властивості color елементу h3. Вся дія, власне, відбувається у виразі onmouseover="this.style.color='red'"; Це вираз мови JScript означає, що при походженні події onmouseover об'єкт, з яким відбулася подія (this - це), його безліч style і властивість в цій множині - color повинне поміняти своє значення на 'red'. (Відмітьте, що red пишеться в одинарних лапках. Це означає, що red - символьний рядок, а не яка-небудь змінна)

Щоб при виході із зони об'єкту, він знову міняв свій колір, наприклад назад, використовуйте подію onmouseout.

Приклад.

<H4 onmouseover="this.style.color='red';" onmouseout = "this.style.color = 'black';">

Цей рядок динамічно змінює свій колір

</H4>

Можете спробувати використовувати подію onclick, яке відбувається при клацанні миші на об'єкті.

Тепер, ви можете реально використовувати цей момент, наприклад в посиланнях. Додайте приведений вище код до об'єкту <A>.

 

Зміна зображення

Часто використовуваним прийомом анімації при створенні Web-сторінок є зміна картинки. Наприклад, при наведенні вказівника миші одна картинка, яка первісно була присутня на сторінці, замінюється на іншу картинку. Після того, як вказівник миші прибирається з картинки, попереднє зображення відновлюється.

Зміна зображення виконується за допомогою двох оброблювачів подій onMouseOver та onMouseOut. Елемент IMG записується при цьому так:

 

<img src="picture1.gif" onMouseOver="this.src=' picture2.gif '" onMouseOut="this.src=' picture1.gif '" OnClick="location.href=document1.html">

 

Цей код має недолік: він не може бути реалізований у Netscape, тому що даний браузер не підтримує події onMouseOver та onMouseOut для елемента IMG. Однак Netscape розуміє вказані події для елемента ANCHOR. Тому, для забезпечення зміни малюнка в обох браузерах краще вставити елемент IMG в ANCHOR. Наприклад:

 

<A href=" " onMouseOver="document.myPic.src=' picture2.gif ';" onMouseOut="this.src=' picture1.gif ';">

<IMG name=" myPic " border=0 src=" picture1.gif ">

</A>

 

При відтворенні цього коду в Netscape виникає ще одна проблема. Цей браузер фіксує розмір малюнка, встановлюючи його за розміром першого завантаженого малюнка. Тому щоб запобігти зміни масштабу picture2, краще робити малюнки рівного розміру. В елементі IMG введено атрибут border=0, який видаляє границю навкруги малюнка (границя відображується за замовчуванням).

Для вбудовування в HTML- сторінку зовнішніх об'єктів призначений тег < OBJECT>, який є контейнером для тегів < PARAM>, що визначають значення властивостей об'єкту, що включається. Тег < OBJECT> має декілька параметрів, два з яких безпосередньо пов'язані з елементами управління ACTIVEX.

Параметр CLSID задає унікальний ідентифікаційний номер вбудовуваного на сторінку елементу управління ACTIVEX, а значення параметра CODEBASE визначає URL- адрес розташування початкових файлів цього елементу. Але перш, ніж починати опис тега < ОВОЄСТ> і його параметрів, зупинимося на питаннях установки елементів управління ACTIVEX на комп'ютері користувача, оскільки вони тісно переплітаються з використанням елементів ACTIVEX на HTML - сторінках і в Web-додатках, реалізованих за допомогою вбудовуваних сценаріїв.

Будь-який встановлюваний на комп'ютері елемент управління ACTIVEX реєструється в системному реєстрі, куди заноситься і там же зберігається відповідна інформація. Надалі ця інформація використовується браузером Internet Explorer для обробки HTML - сторінок, що містять вбудовані елементи управління ACTIVEX.

У розділі HKEY_CLASSES_ROOT/CLSID/ реєстру зберігаються унікальні ідентифікаційні номери всіх встановлених на комп'ютері елементів управління ACTIVEX.

Для даного елементу управління ACTIVEX створений розділ, назвою для якого і служить унікальний ідентифікаційний номер елементу управління {BD96C556-65A3-iiDO-983A-ooc04FC29E33}, що привласнюється йому при створенні. Для цілей застосування елементів управління ACTIVEX на HTML-сторінках достатньо знати, що саме СОМ відповідальна за привласнення унікального ідентифікаційного номера. Можно звернутися до документації по розробці елементів управління ACTIVEX для докладнішого ознайомлення з механізмом призначення ідентифікаційних номерів.

Кожен розділ — це параметр реєстру. Якщо виділити розділ, що цікавить, в лівій панелі вікна програми роботи з реєстром Regedit.exe, то на правій панелі відобразиться значення цього параметра.

Окрім запису в розділі HKEY_CLASSES_ROOT/CLSID/ для елементу управління створюється власний розділ в каталозі HKEY_CLASSES_ROOT, в якому параметр clsid також має значення, рівне ідентифікаційному номеру елементу управління. Значенням параметра clsid є унікальний ідентифікаційний номер елементу управління RDS.Data Control.

Як наголошувалося вище, елементи управління ACTIVEX вбудовуються в сторінку HTML тегом-контейнером < OBJECT>. Він має велике число параметрів, і його повний синтаксис представлений нижчим:

< OBJECT

АССЕ S SKE.=клавіша

ALIGN=ABSBOTTOM | ABSMI

DOLE | BASELINE | BOTTOM I LEFT |

MIDDLE | RIGHT | TEXTTOP | TOP

CLASS=ім’я_класа

CLASSID=ідентифікатор_об’єкта

Соdе=ім’я_файла

CODEBASE=url-адрес[#version=a,b,c,d]

CODETYPE=media-тип

DАТА=url-адрес

DАТАFLD=ім’я_стовбца

DATASRC=# ідентифікатор _джерела

Неigнт=ціле_число

ID= ідентифікатор

LANG=мова

LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS

NАМЕ=ім’я

STYLE=npaвила_CSS

Тавindex=ціле_число

TITLE=TЕKCT

Туре=мiме-тіп

число >

Елемент HTML < OBJECT> є блоковим, тому для його правильної інтерпретації необхідно передбачити на сторінці закриваючий тег < /OBJECT>. Завдання всіх параметрів, природно, не обов'язково, але деякі необхідні для правильної роботи вбудованого об'єкту і включення його самого на HTML-сторінку.

Для елементів управління ACTIVEX обов'язкове завдання параметра CLASSID.

Значенням його є унікальний ідентифікаційний номер вбудовуваного елементу управління ACTIVEX. При завантаженні сторінки браузер перевіряє, чи встановлений елемент управління на комп'ютері користувача, здійснюючи його пошук в системному реєстрі по заданому ідентифікаційному номеру. У разі відсутності запису в реєстрі браузер автоматично починає процедуру завантаження елементу управління ACTIVEX з сервера, URL-адреса якого вказана в параметрі CODEBASE тега <OBJECT>.

Значення параметра CLASSID представляє рядок, що визначає вбудовуваний об'єкт, і для зареєстрованих елементів управління ACTIVEX задається у формі:

" clsid:ХХХХХХХХ-ХХХХ-ХХХХ-ХХХХ-ХХХХХХХХХХХХ"

Перша частина clsid: повідомляє аналізатор браузера, що вставляється елемент управління ACTIVEX. Друга частина є унікальним ідентифікаційним номером цього елементу. Наприклад, кнопка управління з набору елементів управління, використовуваних при створенні форм в застосуваннях Office 97 фірм Microsoft, вбудовується на HTML-сторінку за допомогою наступного тега:

<OBJECT ID=cmdl CLASSID="CLSID:D7053240-CE69-11CD-A777-OODD01143C57">

</OBJECT>

У параметрі CODEBASE задається адреса компоненту, по якому браузер може завантажити його на комп'ютері користувача у разі відсутності:

<OBJECT ID="myActX" HEIGHT=32

CLASSID="CLSID:12D3959D-5048-11D3-A272-8C0305C10000"

CODEBASE="http://bhv.spb.ru/ActiveX/advert32.cab

#Version=l,0,0,0">

</OBJECT>

В даному прикладі визначена повна адреса елементу управління, причому звернемо увагу читача на розширення CAB завантаженого файлу. Дуже часто для прискорення завантаження різноманітних компонентів вони пересилаються по мережі в упакованому вигляді. В даному випадку елемент управління упакований програмою Cabarc.exe, використовуваною фірмою Microsoft для упаковки і розповсюдження своїх продуктів.

Після адреси елементу управління задається його версія у вигляді: #version=a,b,c,d, де а і b представляють, відповідно, старше і молодше слово максимально доступної на сервері версії елементу управління, а c і d — відповідно старше і молодше слово мінімальне доступній на сервері версії елементу управління. Ці значення використовуються браузером в процесі ухвалення рішення про завантаження елементу управління з сервера. Якщо на комп'ютері користувача встановлена новіша версія елементу управління, то завантаження не проводиться. У приведеному прикладі, якщо на комп'ютері користувача буде встановлена версія елементу управління вище, ніж 1.0, то завантаження не буде.

Значення, що визначають інтервал доступних версій компоненту можуть бути всі встановлено рівними "-i". В цьому випадку елемент управління завантажується, якщо дата випуску його версії на сервері пізніше за дату його установки на комп'ютері користувача.

Параметри WIDTH і HEIGHT задають в пікселах розміри візуального інтерфейсу елементу управління ACTIVEX, якщо він у нього існує. Наприклад, кнопка управління або мітка, реалізовані у вигляді елементів управління ACTIVEX, мають візуальні інтерфейси, а елементи управління RDS або TDC, що дозволяють працювати з даними, не мають.

Значення параметра ACCESSKEY визначає клавішу швидкого доступу до елементу управління. Це означає, що при одночасному натисненні комбінації клавіш <Alt> і заданою, елемент управління отримує фокус.

Кожен елемент управління ACTIVEX, будучи компонентом, розкриває свої властивості і методи програмі-контейнеру. При включенні елементу управління на HTML-сторінку можна задати значення його властивостей в тегах < PARAM>, що містяться в тілі тега < OBJЕСТ> Тег < PARAM> не є тегом контейнером і йому не потрібний закриваючий тег </PARAM>. Назва властивості і його значення визначаються параметрами NAME і VALUE тега < PARAM>:

<OBJECT ID="myActX" HEIGHT=32

CLASSID="CLSID:12D3959D-5048-11D3-A272-8C0305C10000"

CODEBASE="http://bhv.spb.ru/ActiveX/advert32.cab

#Version=l,0,0,0">

<PARAM NAME="Value" VALUE="TeKCT">

<PARAM NAME="TextColor" VALUE="red">

</OBJECT>

В даному прикладі задаються значення двох властивостей елементу управління. Якщо значення властивостей не задані при впровадженні елементу управління, то він ініціалізувався із значеннями властивостей за умовчанням.

Вставка тексту в сторінку

Текст може бути вставлений за допомогою тегу <OBJECT>. Для цього необхідно прописати шлях до текстового файлу і вказати параметри відображення, наприклад:

 

<OBJECT data="1.txt">

<PARAM name="font" valuetype="object" value="#tribune">

<P>You're missing а really cool poem viewer...

</OBJECT>

Вставка відео і анімації

<OBJECT data="TheEarth.mpeg" type="application/mpeg"> <!-- Інакше, малюнок GIF --><OBJECT data="TheEarth.gif" type="image/gif">

Вставка флєш зображення.

На веб-сервері сторінці flash прописується за допомогою тегів OBJECT і EMBED. Спершу – розглянемо атрибути тегів OBJECT і EMBED.

Необхідні атрибути

· WIDTH - Ширина кліпу в пікселях або у відсотках від ширини вікна броузера;

· HEIGHT - Висота кліпу в пікселях або у відсотках від висоти вікна броузера;

· SRC - URL завантажуваного кліпу. Тільки для тега EMBED;

· PLUGINSPAGE - Адреса (URL), звідки користувач може викачати плагин Flash Player, якщо він ще не встановлений. Тільки для тега EMBED. правильного значення цього атрибуту;

· MOVIE - URL завантажуваного кліпу. Тільки для тега OBJECT

· CLASSID - Ідентифікатор ActiveX-компонента. Тільки для тега OBJECT.

· CODEBASE - URL, з якого браузер може автоматично викачати і встановити ActiveX-компонент Flash Player, якщо він ще не встановлений. Тільки для тегу OBJECT.