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

Ключове слово this є схованим провісником цілої концепції, яку потрібно вивчити, перш ніж продовжити розмову про обробку форм. Ця концепція скорочено називається DOM (Document Object Model) і є своєрідним розширенням і продовженням об’єктно-орієнтованого підходу. Вона стосується документів, що створюються на XHTML і з якими приходиться працювати при написанні програм на JavaScript.

По визначенню DOM є стандартом консорціуму W3C, що визначають прийоми керування об'єктами і зображеннями на одній веб-сторінці.

Ви тільки що розглянули приклад роботи цієї моделі. У самому останньому прикладі оброблювача подій елемента <input> указувалося наступне:

onchange="checkPhone (document.myForm.phoneNumber.value)"

Усе посилання, що починається зі слова document, — це посилання на об'єктну модель документа. Вона починається із самого загального, що є в цій моделі, — слова document, потім «закопується» у глиб елементів, що містяться в складі веб-сторінки. Самим загальним елементом з потрібних нам є форма — об'єкт myForm, а вже всередині нього знаходяться всі інші об'єкти. phoneNumber містить набір властивостей конкретного <input>; властивість value є одною з них і зберігає введене користувачем значення. Якраз воно нам і потрібно. У такий спосіб ми пройшли від самого загального до частки і побудували покажчик на необхідне значення.

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

Листинг.Безпосередня робота з об'єктами веб-документа

<html>

<head>

<title> Передача значень по посиланню </title>

<!-- ховаємо код скрипта від старих браузерів

function compute()

{

var myNum = document.myForm.userEntry.value;

myNum = eval(myNum);

var myResult = myNum + 100;

document.myForm.result.value = myResult;

return;

}

// Закінчили ховатися --і>

</script>

</head>

<body>

<h1>Обpобка введених даних</h1>

Уведіть число: <input type="text" name="userEntry" size="4" /> <br />

Результат обробки: <input type="text" name="result" size="5" /> <br />

</form>

</body>

</html>

Можете просто записати цей код у HTML-файл і переконатися в тому, що все дійсно працює. Яким же чином це відбувається?

1. Користувач уводить число в поле введення userEntry.

2. При натисканні кнопки «Розрахунок» запускається функція compute().

3. Функція знаходить по посиланню значення, уведене користувачем, і привласнює його змінній myNum. Потім за допомогою вбудованої функції eval() перетворює myNum у число (оскільки поле текстове і змінна являє собою просто набір символів, навіть якщо це цифри).

4. Проводяться якісь арифметичні операції, відповідь зберігається в змінній myResult.

5. Значення myResult привласнюється властивості value текстового поля result, розташованого на другому рядку форми. Відповідь з'являється в полі автоматично.

Існує один момент, за яким потрібно стежити при роботі над такого роду скриптами. Він стосується того, коли варто використовувати властивість value, а коли ні. Звичайно якщо ви хочете привласнити якесь значення елементу форми, то вам воно просто необхідно. Тому що з пойменованим елементом (наприклад, userinput) зв'язано більше чим просте значення. У нього є, наприклад, type, встановлений в елементі <input>. Тому не можна просто так взяти і написати document.form.userinput = x, оскільки userinput — це об'єкт, а не властивість.