JavaScript і об'єктна модель

Mike Melnikov, (Web-studio “Cherry-Design”)

Скриптові мови в деякому роді перевернули світ, і саме завдяки їм з'явився DHTML, який дозволяє робити із сторіночкою практично що завгодно. Як відомо, всього дві мови претендують на лаври переможця в броузері. Це VBScript – підмножина Visual Basic-а і JavaScript. Ось останнім ми і займемося, як найбільш універсальним.

Самі по собі вивчати скриптові мови не має сенсу, тому що вони тісно пов'язані з об'єктною моделлю оглядача і, по суті справи, велика частина скриптів просто встановлює відповідні властивості об'єктів або викликає їх методи.

Що таке об'єктна модель?

Давним-давно, коли броузери ще мали номер версії рівний одиниці, нічого подібного не було і в помині. Інформація просто виводилася на дисплей у міру надходження, не піддаючись ніяким змінам. Всі було просто, і навіть глюків сумісності ще не було:)

Зараз же шлях сторінки до дисплея набагато довше. Давайте поетапно простежимо її шлях:

  1. Сторінка викачується з сайту і розміщується в пам'яті комп'ютера
  2. Проводиться аналіз сторінки, в результаті якого вона препарується на складові.
  3. Блоки, з яких складається сторінка (<body> </ body>, <head> </ head>, <p> </ p> і т.д.) розміщуються в тимчасовій базі даних відповідно структурі об'єктної моделі.
  4. База даних стає доступною іншим програмам і, зокрема, рендер, який виводить сторінку на екран. Для доступу та управління вмістом цієї бази даних броузер надає нам механізм об'єктів і скриптову мова, за допомогою якого і виконується доступ.

Зрозуміло, вміст бази може бути змінено до виведення на екран, що і дозволяє працювати DHTML. Але об'єктна модель залишається працювати навіть після того, як сторінка показана на екрані дисплея. Це дає нам можливість у невеликих межах (а в останніх версіях HTML 4.0 практично повністю) змінювати вміст сторінки після завантаження.

Структура об'єктної моделі

Щоб було зрозуміло, про що ми говоримо, розглянемо загальну структуру об'єктної моделі. Нижче наведена об'єктна модель Internet Explorer-а версії 4 і вище.

Об'єктна модель Netscape Navigator-а трохи відрізняється від вищенаведеної, але її зміст точно такий же. А використання JavaScript дозволяє нам обійти розходження в реалізації об'єктних моделей.

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

Як бачите, структура об'єктної моделі досить складна, але строго визначена, і існує однозначна спосіб доступу до будь-якого властивості або методу. Синтаксис повністю відповідає тому, що використовується в об'єктних мовах. Тобто нижележащие об'єкти відокремлюються від верхніх точкою, і для доступу до конкретного властивості потрібно просто коректно побудувати рядок доступу.

І, як Ви розумієте, от тут-то на сцену і виходить скриптова мова, яка і дозволяє нам маніпулювати об'єктами.

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

Як і де розміщувати код скрипта?

Але спочатку ми трохи відвернемося від ефектів і поговоримо про те, як і де розміщувати JavaScript. Так як мова скриптова і розрахований на роботу на web-сторінках, то його код розміщується безпосередньо в HTML-коді сторінки. Причому, код на JavaScript зазвичай складається з двох частин:

  1. Функції, які викликаються з коду сторінки у відповідь на якусь подію

  2. Код подій, які викликають функції:))

Опис функцій має розташовуватися в тезі <head> </ head> – це гарантує нам, що на момент виклику функції вона вже буде перебувати в пам'яті комп'ютера. Для вставки коду використовується спеціальний тег <script>, в параметрах якого ми й визначаємо певною мовою. Ось приклад типового опису JavaScript-вставки:


<script language=”JavaScript”>
<!–
function somefunction()
{
/ / Тут розташовується код функції
}
//–>
</script>

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

Зауважте також, що закриває тег коментаря трохи незвичний і передує двома косими рисами. Дві косі риси – це коментар мови JavaScript, тобто скрипт ігнорує все, що йде після нього. А зроблена така складна конструкція заради сумісності з Netscape, який закриває HTML-коментар сприймає як незрозумілу йому команду і, відповідно, викликає помилку.

Ну ось, з основами застосування скриптів розібралися, а приклади популярних і корисних ефектів, реалізованих за допомогою JavaScript, ми розглянемо в наступній статті.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*