Властивості об'єкта Document
Почнемо зі властивостей, загальних для всіх браузерів. Більшість їх доступні як для читання, так і для зміни. Всі значення властивостей - рядкові.
title - текст заголовка документа (вміст елемента title);
fgColor і bgColor - колір тексту і колір фону документа;
linkColor, vLinkColor, aLinkColor - кольори не відвідані, відвідані і активних гіперпосилань;
lastModified (тільки для читання) - дата зміни документа;
referrer (тільки для читання) - адреса джерела переходу;
URL, location - власну адресу документа.
Більш цікавими та корисними для розробника властивості - масиви об'єкта Document. Всі вони, природно, мають властивість length (кількість елементів в масиві). Більшість властивостей, специфічних для об'єктів, що зберігаються в цих масивах, асоціюються з атрибутами відповідних елементів HTML (список неповний):
об'єкт Anchor (якір) має єдине властивість name;
об'єкт Link (посилання) має властивості href, target;
об'єкт Image (зображення) має властивості src, width, height.
До об'єктів документа, що зберігаються в масивах images, controls та інших, а також до елементів форм можна звертатися по імені (властивість name) чи кодом (властивість id). Нехай, наприклад, в документі є опис <img src="images/cat.jpg" id="cat_id" name="cat_name"> і воно є n-им зображенням, яке зустрічається в документі. До цього елементу img можна звернутися по крайній мірі наступними способами:
Як до елементу масиву images за індексом (індексація починається з 0): window.document.images [n-1]
Як до елементу хеш-массива images по ключу (значення name як ключ масиву): window.document.images ["cat_name"]
Використовуючи значення атрибута name як властивість об'єкта: window.document.cat_name
Використовуючи значення атрибуту id і властивість getElementById: window.document.getElementById ("cat_id")
Методи об'єкта Document
open () - відкриває новий документ; при цьому весь його вміст видаляється.
close () - закриває раніше відкритий документ.
write () - записує в документ задану в якості аргументу рядок.
writeln () - аналогічний попередньому, але виведена в документ рядок закінчується символом переведення рядка.
Методи write () і writeln () досить корисні і часто використовуються для динамічного формування змісту документа. Наприклад, можна включити в документ дату останньої зміни:
<script> document.write (document.lastModified); </ script>
Події
Для всіх елементів документа є можливість відслідковувати різні події (завантаження, переміщення миші, і інш.) І викликати функції обробки таких подій. У таблиці 8.2 наведено короткий опис подій, доступних для використання в програмах на javascript:
Таблиця 8.2. Події wеб-документа
Події |
Опис |
OnLoad |
Браузер закінчує відкриття документа HTML |
OnUnload |
Браузер вивантажує документ HTML |
OnClick |
Користувач клацнув мишею по елементу |
OnDblClick |
Користувач двічі клацнув мишею по елементу |
OnMouseDown |
Користувач натискає кнопку миші |
OnMouseOver |
Користувач переміщує мишу поверх елемента |
OnMouseMove |
Користувач переміщує мишу по елементу |
OnMouseOut |
Користувач переміщує мишу, виходячи з елемента |
OnFocus |
Елемент отримує фокус введення |
OnBlur |
Елемент втрачає фокус введення |
OnKeyPress |
Користувач натискає і відпускає клавішу |
OnKeyDown |
Користувач натискає клавішу над елементом |
OnKeyUp |
Користувач відпускає клавішу над елементом |
OnSubmit |
Дані з форми передані Web-серверу |
OnReset |
Форма очищена |
OnSelect |
Користувач вибирає текст в текстовому полі |
OnChange |
Втрата фокусу введення елементом після зміни його значення |
Призначення обробника події виконується шляхом зазначення імені події у вигляді атрибуту тега, наприклад так:
<a name="test" onClick="alert('Hello, world!');"> say "Hello" </ a>
При використанні подій, слід розуміти, що не кожен елемент може створити певну подію. Наприклад в наступному прикладі виклик функції resetAll не відбудеться, оскільки елемент <a>, ніколи не створить подію onReset;
...
<script>
function resetAll () {
/ / Do something
}
</ Script>
...
<a href="clear.htm" onReset="resetAll();">Оновлення</ a>
...
Об'єкт RegExp
При роботі з web-сторінками часто виникає необхідність виконати складну обробку тексту. В javascript для цього є вбудований об'єкт RegExp, який дозволяє працювати з регулярними виразами.
Робота з об'єктному RegExp в javascript мало відрізняється від роботи з будь-якими іншими об'єктами, але сам синтаксис регулярних виразів вимагає розуміння і практики. В лістингах (8.1 – 8.6) наведені приклади простих скриптів, що ілюструють базові можливості javascript при роботі з об'єктами web -документа. При виконанні завдань використовуйте пропоновані приклади в якості зразків.
WARNING: Майте на увазі, що різні браузери можуть по різному виконувати код javascript (або навіть не виконувати його зовсім).
Лістинг 8.1. Обмеження кількості символів
Лістинг 8.2. - Перевірка введення
Лістинг 8.3 - Керування вікнами (використовується об'єкт Windows)
Лістинг 8.4. Зміна оформлення
Лістинг 8.5. - Поточний час (використаний вбудований об'єкт Date)
Лістинг 8.6. Визначення браузера (використаний об'єкт navigator)
