Покажчик this
По суті справи, покажчик this заміняє ім'я поточного об'єкта. У даному випадку того об'єкта, з яким зв'язаний оброблювач. Розглянемо приклад, що є продовженням попереднього:
<form name="myForm">
<input type="text" name="phoneNumber" onchange="checkPhone (this.value)" />
</form>
Тут буквально говориться за допомогою this: «Цей елемент уведення (input)», value є властивістю, що зберігає значення, асоційоване з даним input, тобто те, що ввів користувач. Можна одержати доступ до цього значення (з метою його передачі) і по-іншому:
<form name="myForm">
<input type="text" name="phoneNumber" onchange="checkPhone
(document.myForm.phoneNumber.value)" />
</form>
От щоб не заплутуватися в цьому довгому «шляху» (document.myForm. phoneNumber). і використовується покажчик this.
Об'єктна модель документа
Ключове слово 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>
<script>
<!-- ховаємо код скрипта від старих браузерів
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>
<form name="myForm">
Уведіть число: <input type="text" name="userEntry" size="4" /> <br />
Результат обробки: <input type="text" name="result" size="5" /> <br />
<input type="button" name="Calc" value="Розрахунок" onclick="compute()" />
</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 — це об'єкт, а не властивість.