Прикладне програмування для Web починалося з обробки запитів користувача і динамічної генерації сторінок на стороні сервера. Ця ж тенденція отримала розвиток і в мовах програмування вставок в HTML-документи. Потім з'явилися мови програмування елементів HTML-документів на стороні клієнта. І ті, і інші прив'язані до моделі даних HTML. Сьогодні, коли Web мігрує до стека специфікацій XML, розробники засобів програмування повинні це врахувати і правильно відреагувати, дозволивши, наприклад, маніпулювати елементами XML-розмітки. Стандарт, покликаний визначити перспективи й вирішити цю задачу, отримав назву Document Object Model - DOM.
VBScript і JScript означало, що
Microsoft рухається в тому ж напрямку. Поступово технологія Java опустилася до рівня засобів розробки додатків Web, а сценарна напрям оформився в концепцію DHTML (Dynamic HTML).
І XML, і DHTML, і Java в кінцевому підсумку замкнулися на модель даних Web, безліч сторінок Web, які, з точки зору розробників пошукових мов XML, є суцільним потік різнотипних даних [5]. Один документ (сторінка) - це підмножина всіх документів (сторінок) Web. Модель даних Web визначають у вигляді графа - «ліс» з дерев.
Рис.1. Графічне представлення структури HTML-документа
Щоб уявити предмет нашого обговорення в більш простому вигляді, візьмемо HTML-документ і «препаруємо» його з точки зору такої графовой моделі даних (рис. 1). Весь документ - це один великий елемент розмітки HTML. При цьому документ є блоковим елементом, який не може перетинатися з іншими документами, однак може містити блоки, наприклад, HEAD і BODY. У свою чергу HEAD і BODY теж можуть включати інші блоки. При цьому елемент BODY в своїх атрибутах здатний визначити властивості всього відображуваного тіла документа, наприклад, колір тексту, колір фону або, скажімо, колір гіпертекстових посилань. Якщо рухатися ще далі всередину BODY, то з дуже великою ймовірністю в типовому HTML-документі можна зустріти елемент розмітки IMG, у якого є свої властивості.
Тепер назвемо вузли графа об'єктами, а програмам дозволимо змінювати властивості цих об'єктів. Скажімо, значення атрибута SRC у об'єкта, який відповідає елементу розмітки IMG. При цьому виконувати такі зміни можна, використовуючи метод з набору стандартних методів, загальних як для сценаріїв мов, так і для Java. Все це утворює концепцію DOM - Document Object Model. Власне DOM - це інтерфейс прикладного програмування в рамках моделі даних Web або, іншими словами, набір стандартних методів об'єктів Web. Якщо потрібно вивести текст в тіло документа, це можна зробити на будь-якій мові програмування, який підтримує DOM:
Тут задіяний стандартний метод write об'єкта document. Ім'я методу, значення, яке він повертає, аргументи методу і їх типи - все стандартизовано в DOM.
Таким чином, шлях розвитку Web-технології пролягає від статичної HTML-розмітки через скриптові мови, Java і DHTML до специфікаціям XML і DOM. Зупинимося на етапах цього шляху докладніше.
Розвиток технології складання документів
HTML передбачає, що документ складається зі стандартних елементів розмітки, які відображаються абсолютно певним чином. Набір елементів HTML - це типізація компонентів звичайного друкованого документа: заголовки, списки різних типів, параграфи, таблиці, цитування тощо При цьому всі елементи розділені на два типи: строкові і блокові. До перших можна віднести параграф, список, таблицю. До строкових елементів - виділення курсивом або насиченістю, текст гіпертекстових посилань. Все це визначено в Document Type Definition специфікації HTML, яка формально записана на SGML.
Жорсткі правила відображення елементів на ранніх стадіях становлення Web-технологій дозволяли забезпечити чіткі і ясні вимоги до браузерів, а також можливість швидкого наповнення Web інформацією. У міру збільшення кількості інформації і ускладнення структури набору документів Web-вузлів простота технології стала перетворюватися в недолік. Доводилося копіювати фрагменти коду, вводити нові елементи розмітки для варіювання форматів зображення в залежності від контексту, підтримувати все більш складні формати графічних файлів.
Слід також враховувати, що створення Web-вузлів перетворилося сьогодні в окремий вид професійної діяльності. При цьому вузол став самостійним товаром, вартість якого не повинна перевищувати розумних меж, які визначаються його функціональним призначенням (віртуальний магазин, інформаційна служба, ядро корпоративної системи і т.п.). Виходячи з цього, сформувалося певне розуміння складу функцій ПЗ Web-вузла, типізації сторінок Web-вузла за їх функціональним призначенням, складом компонентів і методам обробки інформації на сторінках.
Вставка в документ результатів виконання програм відкриває набагато більше можливостей. Такі вставки теж можуть бути двох типів:
Конструкція «exec cmd =" дає можливість вставити в документ результат виконання зовнішньої програми, наприклад, date (вставка поточної дати). Варіант «exec cgi =" дозволяє вставити в документ результат виконання cgi-сценарію. Це дуже потужний засіб проектування сторінок вузла, яке дозволяє через механізм CGI приймати запити від браузерів і генерувати сторінки з урахуванням результатів виконання цих запитів. Саме таким способом спочатку реалізовувалися системи пошуку в базах даних, а пізніше і системи пошуку інформації за ключовими словами.
Порядок обробки запиту від браузера на отримання документа зі вставками (Server Parsed Document) наступний:
ѕ підтвердити установку з'єднання і отримати запит від браузера;- переконатися в наявності дозволу на виконання підстановок в даному каталозі;
Таким чином, сервер є інтерпретатором мови SSI, тобто в складі модулів сервера повинен бути і модуль інтерпретації SSI.
Інтерпретація коду в елементі SCRIPT відбувається тільки в момент початкового завантаження сторінки. Управління переходить до інтерпретатора в момент, коли HTML-програма синтаксичного розбору «натикається» на елемент розмітки SCRIPT. Код виконується, і результат його роботи підставляється в документ (якщо це можна зробити). У наявності типова вставка, реалізована на стороні клієнта.
З появою CSS в HTML стало можливим використання двох узагальнених елементів розмітки: DIV (узагальнений блок) і SPAN (узагальнений рядковий елемент розмітки). Тепер можна складати логічну структуру документів, а потім визначати формат її відображення.
Цей підхід змінив всю технологію проектування сторінок Web-вузла. Тепер спочатку визначаються типи сторінок, потім логічна структура сторінки для кожного типу і в останню чергу для кожного логічного елемента визначається його склад і зовнішній вигляд.
До цих пір мова йшла про розвиток технологій, що спираються на HTML - елементи розмітки і способи їх розміщення на сторінках. Але є ще один аспект Web-технології - це мова програмування Java.
Спочатку в Java не передбачалося здійснювати маніпулювання об'єктами HTML-сторінки і, хоча Duke бігав по межі екрану браузера Sun, реально Java увійшов в документ тільки у вигляді елемента розмітки applet. Як універсальна мова програмування інтерфейсів, головним чином графічних, Java підтримував більш абстрактні типи даних і об'єкти, ніж це було потрібно для програмування HTML-сторінок.
Логічна структура документа
DTD HTML визначає правила побудови HTML-документа, синтаксис елементів розмітки і їх можливе взаємне розташування. Якщо поглянути на документ як на безліч об'єктів, які асоціюються з елементами розмітки, то DTD буде задавати ієрархію класів цих об'єктів.
Відносини окремих об'єктів між собою зводяться, головним чином, до відносин типу «частина-ціле», а структура документа являє собою дерево. У ролі кістяка виступає дерево блочних елементів розмітки документа. Потім на цей кістяк накладаються рядкові елементи і стилі. Крім того, у документа існує піддерево класів об'єктів документа, яке визначається в DTD. Зміна властивостей класу призводить до зміни властивостей всіх об'єктів даного класу (рис. 2).
Мал. 2. Логічна структура документа.
Об'єкт location асоціюється з полем location браузера, де відображається URL завантаженого у вікно документа. У location є властивості і методи. При зміні значення властивості location або при виклику методу відбувається перезавантаження документа. При перезавантаженні може поповнюватися захищений масив об'єкта history - безліч URL, які відвідував користувач. Основним способом використання history є методи window.history.back (), window.history.forward () і window.history.go (-1).
Об'єкт navigator дозволяє відображати документ відповідно до вимог браузера і його налаштуваннями. Підпорядкування цього об'єкта window виглядає дещо нелогічно: незважаючи на безліч обслуговуються вікон програма браузера одна. Найбільш корисні властивості об'єкта navigator, наприклад, фрагмент коду дозволяє завантажити сторінки на кшталт навігатора.
Якщо необхідно перевірити виконуваність Java-коду на стороні браузера, наприклад, для завантаження сторінки з апплетом або без нього, то це можна зробити, застосувавши відповідний метод об'єкта navigator.
Об'єкт document асоційований з тілом документа і включає в себе інші об'єкти, які можуть бути названі, як, наприклад, об'єкти IMG або FORM, а також можуть входити у вбудований масив, як, наприклад, гіпертекстові посилання (links []).
Найбільших візуальних ефектів досягають за рахунок зміни властивості src об'єкта IMG, який може бути пойменованим об'єктом документа. Він також входить у вбудований масив document.images [].
Сам об'єкт при цьому розглядається як трійка: властивості, методи, події. Властивості - це скалярні характеристики об'єкта, методи - це функції, які можуть змінювати властивості. Події це зовнішні впливи на об'єкт, для яких можна написати функцію-обробник події. Саме з програмуванням подій пов'язані різні ефекти типу розцвічування чорно-білих картинок або зміни картинки при проходженні курсора миші через гіпертекстове посилання.
Модель об'єктів IE. динамічний HTML
Стилі створюють окрему ієрархію об'єктів, причому дуже багато що залежить від типу селектора, який описується стилем. Якщо це селектор класу елементів розмітки, то це одна гілка дерева об'єктів документа, якщо це селектор довільного класу, то це інша гілка дерева об'єктів документа, якщо це селектор ідентифікатор об'єкта, то це третя гілка об'єктів документа.
Варто зазначити, що для використання ідентифікатора у елемента розмітки в JScript зовсім необов'язково створювати пов'язаний з ним селектор ідентифікатора в описах стилів - управляти через нього стилями все одно не можна.
Будь-яка подія може бути пов'язано з елементом розмітки - це досягається зазначенням у цього елемента атрибута обробника даної події. Іншими словами, у всіх елементів розмітки визначено весь перелік можливих подій і обробники цих подій для кожного класу елементів. Програміст через атрибут обробника може перевизначити дію, яке виконує за замовчуванням.
У JScript застосовується «бульбашковий» метод обробки подій. Це означає, що якщо для якогось об'єкта відбувається деяка подія, то спочатку викликається обробник події, пов'язаний з цим об'єктом, а потім подія передається обробнику даної події для старшого об'єкта в ієрархії об'єктів документа. Програміст має можливість заборонити передачу обробки події наверх.
І останній штрих до «портрета» JScript. Ця мова і його модель даних можна використовувати для програмування Active Server Pages (ASP). Головне тут не заплутатися між директивами JScript, призначеними для інтерпретації на стороні сервера і JScript-кодом, який слід виконувати на стороні браузера.
Інтерфейс прикладного програмування DOM
- інтерфейси і об'єкти для представлення документа і маніпулювання їм;
- семантику інтерфейсів і об'єктів, включаючи їх поведінку і атрибути;
- взаємини і об'єднання інтерфейсів і об'єктів.
Основна відмінність моделі даних DOM від абстрактної моделі даних SGML полягає в тому, що модель SGML будується навколо власне даних. В об'єктно-орієнтованих мовах програмування, для яких розроблена концепція DOM, дані вміщені в об'єкти, які їх приховують і захищають від змін. Змінювати дані можна тільки за допомогою методів, зазначених у специфікаціях об'єктів. DOM визначає дані і методи маніпуляції даними стосовно XML і HTML.
Специфікація DOM складається з двох частин: ядра DOM і застосування DOM до HTML. Ядро забезпечує функціональну повноту для обробки XML-документів, а також базис для DOM HTML.
Ядро DOM дозволяє визначити документ як безліч вузлів, пов'язаних між собою відношенням «батько-нащадок», а ключовим об'єктом є Document. Ставлення «батько-нащадок» визначено в DOM наступним чином:
З іншого боку в DOM визначено об'єкт Node (вузол), у якого визначено інтерфейс NodeList, що встановлює порядок вузлів нащадків об'єкта Node.
Якщо ви чекаєте, що зараз мова піде про дерево інтерфейсів DOM, то вам доведеться засмутити - такого дерева в DOM немає. Кожен інтерфейс описує атрибут і методи, які, в свою чергу, можуть мати тип іншого інтерфейсу. Можна, звичайно, спробувати побудувати таке дерево, але хочу відразу попередити, що в графі з'являться кільця.
Опис інтерфейсів дано в звичайному алфавітному порядку і розбите на опис ядра DOM і DOM HTML, а в ядрі виділені фундаментальні інтерфейси. Слід зазначити, що опис інтерфейсу - це фактично опис класу об'єктів. Тільки для методів класу відсутні реалізації методів, які перераховані в інтерфейсах. В описі інтерфейсів є змінні, але, на відміну від Java, де теж є механізм інтерфейсів, вони можуть визначати як незмінні, так і змінювані властивості об'єктів класу. Реалізація інтерфейсів в конкретних мовах програмування -завдання розробників цих мов в рамках опису відповідних класів.
В DOM розглядаються два рівня інтерфейсів: базовий, який оперує вузлами, орієнтований на застосування в рамках Java або інших мов розробки додатків; прикладний рівень, який оперує об'єктами типу Document або Element, а в рамках DOM HTML конкретними класами об'єктів HTML. Останній тип інтерфейсів орієнтований на скриптові мови і може застосовуватися більш широким колом програмістів.
Інтерфейси більш високого рівня, наприклад, інтерфейс HTMLFromElement розділу DOM HTML буде в даній нотації визначатися таким чином: