Скрипт мови JavaScript

Області застосування JavaScript. Об'єктна модель документа. Ієрархічна структура моделі та їх взаємозв'язки з іншими об'єктами. Іменування об'єктів і точковий синтаксис. Розміщення сценаріїв у документах. Способи визначення моменту запуску сценарію.
Краткое сожержание материала:

Размещено на

Скрипт мови JavaScript

1. Області застосування JavaScript

За наявності складної задачі з управління елементами HTML в Web по допомогу до JavaScript має сенс звертатися в таких випадках:

- Перевірка коректності даних, введених у форму.

- Не використовуючі сервер CGI-програми. Тут вважається ситуація, коли потрібно або використовувати JavaScript для створення додатка, або застосовувати CGI-програми, що запускаються на сервері.

- Інтерактивна робота в динамічному HTML. Якщо елементи на сторінці мають жорстку прив'язку, то використовувати засоби DHTML і створювати сценарії для їх управління не варто.

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

- Розвантаження серверу. Якщо вами використовується дуже завантажений Web-вузол, то корисно відмовитися від частого звернення до CGI- програми на користь застосування сценаріїв JavaScript, що виконують ті ж дії.

- Надання динамізму «нерухомим» сторінкам.

- Створення «інтелектуальних» Web-сторінок.

2. Об'єктна модель документа

cкрипт сценарій javascript

Перш ніж приступити до створення серйозних сценаріїв, необхідно скласти правильне уявлення про ті об'єкти, безпосередньо для яких і писатимуться сценарії. Об'єктами подаються елементи управління форм (текстові вікна і кнопки), а також (у останніх версіях броузерів) зображення. Проте, в моделі подано й інші об'єкти, які не такі наочні з огляду зовнішнього вигляду сторінки і програмної його основи. Їх призначення, проте, стає цілком зрозумілим, якщо розглядати дескриптори, використовувані в HTML елементи, призначені для генерації вмісту сторінки, - прикладом може бути багатофреймова сторінка.

Для того, щоб дозволити сценарію управляти всіма цими об'єктами, а також допомогти розробникам сторінок якось упорядкувати величезну кількість об'єктів на сторінках, творці броузерів створили об'єктну модель документа (document object model або DOM). Ця модель є чимось на зразок прототипу або структури організації об'єктів на сторінці.

Включені в броузери об'єктні моделі значно вдосконалені в останніх версіях броузерів.

Властивості об'єктної моделі, які доступні в одній версії броузера або броузерах одного виробника, дуже добре використовувати в тому випадку, якщо відомо, що аудиторія, на яку розрахований даний програмний продукт, використовує виключно цей тип або версії броузерів (наприклад, в корпоративній мережі). Зусилля всіляких організацій з розробки стандартів призвели до створення специфікацій для синтаксису і набору властивостей об'єктних моделей, що забезпечило, в порівнянні з оригінальними розробками, велику гнучкість. Найбільшим удосконаленням є те, що елемент HTML став об'єктом, який сценарії можуть використовувати повністю на свій розсуд (ця можливість подана ще в об'єктній моделі IE 4). Концепція DOM, побудована на основі стандартної об'єктної моделі, реалізована, з різним ступенем підтримки в броузерах IE 5+ і NN 6+ (в останньому випадку W3C DOM витриманий набагато сильніше). Якби на ринку домінували виключно броузери, які підтримують стандарт W3C DOM, то це дозволило б набагато простіше, ніж зараз створювати міжброузерне рішення і високодинамічні документи.

3. Ієрархічна структура моделі

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

Розглянемо ключові об'єкти і їх взаємозв'язки з іншими об'єктами.

Об'єкт вікна. Вверху ієрархічної структури знаходиться вікно (window). Цей об'єкт являє ту частину вікна браузера, в якій відображується вміст HTML-документа. У багатофреймовому середовищі кожен фрейм (або кадр) також є вікном. Оскільки всі події, що відносяться до документа, відбуваються саме у вікні, то воно - це найзагальніший елемент в ієрархічній структурі об'єктів. У ньому, в буквальному розумінні, розміщений документ.

Об'єкт документа. Кожен HTML-документ, завантажуваний у вікно броузера, стає об'єктом document (документ). В ієрархічній структурі положення об'єкта документа є дуже важливим. В об'єкті document міститься більшість решти типів об'єктів моделі, тобто в документі знаходиться все, що використовується в сценарії.

Об'єкт форми. Користувач не бачить на сторінці ні початку, ні закінчення форми, тільки її елементи. Але форма є особливим способом організації вмісту HTML-документа. Все, що знаходиться між дескрипторами <form> … </form>, є частиною об'єкта форми. У документі, якщо це продиктовано розумними міркуваннями, може використовуватися більше однієї пари дескрипторів форми <form>. Якщо це так, то структура об'єктів даного конкретного документа міститиме два або більше об'єктів форми замість одного.

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

4. Іменування об'єктів, точковий синтаксис

Якнайкращий спосіб створення в сценаріях посилань на об'єкти полягає в тому, щоб привласнити кожному керованому в документі HTML-об'єкту, в сценарії власна назва. Підтримуючі сценарії броузери, такі, як останні версії Navigator і Internet Explorer, застосовують необов'язкові атрибути дескрипторів з назвою Name. Цей атрибут дозволяє привласнювати кожному об'єкту власне ім'я.

<form name="имя формы"> … </form>

При привласненні назв (або імен, а ще їх іноді називають ідентифікаторами), дотримуються таких правил:

- назви не можуть містити пропуски;

- в назвах не мають використовуватися символи пунктуації, за виключенням символів підкреслення;

- при їх привласненні як значення атрибуту Name вони повинні братися в лапки;

- назви не повинні починатися з цифри.

Специфікація HTML 4.0 має на увазі новий спосіб привласнення ідентифікаторів елементам HTML. Для цього використовується атрибут ID. Даний атрибут ID дуже корисний в деяких ситуаціях під час роботи з каскадними таблицями стилів (Cascading Style Sheets - CSS) і динамічним HTML. Але навіть при цьому атрибут Name є незамінним при використовуванні основних елементів, наприклад, елементи Frame, Form і Input. Останні версії броузерів можуть отримувати доступ до об'єктів по назві або ідентифікатору ID. Але розробники вважають за краще в основному для об'єктів елементів HTML використовувати атрибут ID.

У JavaScript крапка використовується для розділення елементів ієрархічного посилання. Ця угода була взята з мови Java, записи якого, у свою чергу, засновані на тих, що використовуються в С. Кожне посилання звичайно починається з найглобальнішого рівня - для програмних продуктів клієнта, розроблених в JavaScript, це вікно, - і далі з використанням крапки (.) як роздільник виконується все велика конкретизація посилання.

5. Властивості. Методи. Обробники подій

Кожен об'єкт неповторюваний деякою мірою, навіть якщо в броузері такі об'єкти дуже схожі. Є три основні чинники, які безпосередньо визначають об'єкт. Вони дають уявлення про те, чим є даний об'єкт, як він виглядає і як за допомогою сценаріїв ним можна управляти. Цими трьома визначниками є властивості, методи і обробники подій. Вони, з огляду роботи в JavaScript, володіють величезною важливістю.

Властивість об'єкта - це характеристика об'єкта. Завдяки властивостям ми можемо ідентифікувати об'єкт. Кожній властивості відповідає певне значення (навіть якщо це значення не визначено, то властивість рівна null). Під час написання коду HTML для використовування в підтримуючих сценарії в броузерах властивості об'єктів встановлюються навіть без явного використовування коду JavaScript - хоча це і не так важливо. Найзагальніший спосіб початкової установки властивостей об'єктів HTML полягає у використовуванні атрибутів дескрипторів. Підключення JavaScript дозволяє використовувати додаткові атрибути, початкові значення яких можна задати під час завантаження документа. Наприклад, наступний дескриптор HTML використовується для того, щоб визначити об'єкт кнопки button. Тут же привласнюються значення для двох властивостей:

<input type="button" name="clicker" value="Hit Me…"></input>

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

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