Ієрархія об'єктів JavaScript
Усі елементи-об'єкти web-сторінки утворюють ієрархічну структуру. Кожний такий об'єкт має певні властивості й методи. Для керування об'єктами web-сторінки мовою JavaScript потрібно усвідомлювати цю ієрархію. Спробуємо все це зрозуміти на прикладі такого коду HTML:
<html><head><title>Приклад ієрархії об'єктів</title></head>
<body>
<center><img src="globe.gif" name="pic1"></center>
<p align = left>
<form name="myForm">
Ім'я: <input type="text" name="Ім'я" value="" ><br><br>
e-mail: <input type="text" name="e-mail" value=""><br><br>
<input type="button" value="Натисни на мене"
name="myButton"
onClick="alert('Все гаразд, '+document.forms[0].elements[0].value)">
</form></p>
<p align = right>
<img src="16.ico" name="pic2">
<a href="http://kievoi.narod.ru">http://kievoi.narod.ru</a>
</p>
</body></html>
Такий вигляд має ця сторінка на экрані:
Вікно проглядача є певним об'єктом window у мові JavaScript. Цей об'єкт містить певні елементи оформлення, наприклад, рядок стану. Всередині вікна розташовано документ HTML (або файл іншого типу — поки обмежимося файлами HTML) — об'єкт document. До властивостей цього об'єкту відносять, наприклад, колір тла web-сторінки. Але для нас важливіше те, що всі об'єкти HTML (посилання, форма тощо) є властивостями об'єкта document.
Ієрархію об'єктів, утворених поданим кодом HTML, подамо таким багаторівневим списком, у якому відступ ліворуч пропорційний глибині закнурення (кількості кроків від першого елементу):
document — HTML сторінка:
images[0] — перше зображення 
;
formes[0] — форма:
elements[0] — перший текстовий елемент, перед яким записано «Ім'я»:
elements[1] — другий текстовий елемент, перед яким записано «e-mail»:
elements[2] — кнопка («Натисни на мене»):
images[1] — друге зображення ;
links[0] — посилання («http://kievoi.narod.ru»).
Коли загальна кількість об'єктів невелика, таку ієрархію подають орієнтованим деревом, у якому вершини (точки площини) є об'єктами, а дуги чи орієнтовані ребра (спрямовані відрізки) вказують на об'єкти, що є властивостями тих об'єктів, від яких вони спрямовані. Але коли кількість об'єктів зростає, постають проблеми розташування елементів такого подання та його сприйняття в цілому. У той самий час доволі просто таку структуру подавати текстом, у якому:
кожний рядок подає певний об'єкт, всі властивості якого або властивості властивостей і т.д. розташовують під цим об'єктом з зсувом від початку рядку (див. вище).
Опишемо, як у мові JavaScript влаштований доступ до різних об'єктів. Кожний об'єкт ієрархічної структури має свою назву. Її побудову потрібно починати з кореня — першого об'єкту з назвою document. Далі потрібно через крапку записати назви всіх об'єктів, які зустрічаються на шляху цього об'єкту від document, і його власну назву.
Наприклад, перше зображення на сторінці має назву images[0]. Доступ до цього об'єкту можна отримати, записавши в JavaScript таке: document.images[0].
Звернення до тексту, який користувач ввів у перший елемент форми, отримаємо, записавши:
document.forms[0].elements[0]. Однак таке звернення ще не дає доступу до власне тексту. Для цього, як можна встановити з довідників, потрібно використати властивість value цього тексту. Остаточно маємо: document.forms[0].elements[0].value. Саме таким чином можна використати у подальшому текст, введений користувачем у відповідне поле форми. Наприклад, внесенні слова «Петро» при подальшому натисканні на кнопку «Натисни на мене» випаде вікно зі зверненням «Все гаразд, Петро».
Для того, щоб не плутатися в адресації при роботі з великою кількістю об'єктів, радять використовувати унікальні назви. Як це роблять, можна побачити на поданому вище прикладі — див. рядок <form name="myForm">. Цей рядок означає: об'єкт forms[0] отримує другу назву — myForm. Аналогічно, замість elements[0] можна писати name (вказано в атрибуте name тегу <input>). Інакше кажучи, замість document.forms[0].elements[0].value можемо писати document.myForm.name.value .
Зауважте: при написанні назв Ви маєте пильнувати за станом регістру. Наприклад, назви myform і myForm — це різні назви.
У JavaScript багато властивостей доступні не лише для читання. Ви можете надавати їм нових величин. Наприклад, замість порожнього рядка, що задає властивість value можна записати довільну послідовність символів.
Розглянемо приклад.
<html><head><title>Приклад звертання</title>
<script language="JavaScript"><!-- hide
function first() // створює випадне вікно з внесеним тестом
{ alert("Внесено текст: "+document.myForm.myText.value);
}
function second() // перевірка прапорця
{ var myString= "Прапорець ";
if (document.myForm.myCheckbox.checked) myString+= "виставлено"
else myString+= "не виставлено";
alert(myString); // виведення рядка відповіді
}
// --></script></head>
<body bgcolor=lightblue>
<form name="myForm">
<input type="text" name="myText" value="Ка зна що">
<input type="button" name="button1" value="Текст" onClick="first()"><br>
<input type="checkbox" name="myCheckbox" CHECKED>
<input type="button" name="button2" value="Перевірка" onClick="second()">
</form>
<script language="JavaScript">
<!-- hide
document.write("Колір тла: ");
document.write(document.bgColor + "<br>");
document.write("Текст на другій кнопці такий: ");
document.write(document.myForm.button2.value);
// --></script></body></html>
Проглядач покаже таке:
Після знайомства з простими прикладами викладемо можемо перейти до повнішого викладу відомостей щодо ієрархії об'єктів.
Ієрархія об'єктів JavaScript
Об'єкти JavaScript — це набори властивостей і методів. Властивості об'єктів — це дані, пов'язанні з об'єктом, а методи — функції для опрацювання даних об'єкта. Як вже було показано, адресація властивостей у сценаріях JavaScript можлива або за назвами, або за номерами. Останнє можливе, бо всі властивості об'єкта зберігають як елементи певного масиву, тому кожна властивість має свій.
У мові JavaScript є три типи об'єктів: вбудовані об'єкти, об'єкти проглядача й об'єкти на основі класів, створених у ході виконання програми. Кожний з цих типів має свої призначення й особливості.
Вбудовані об'єкти
Перелічимо вбудовані об'єкти, властивості й методи яких доступні у сценаріях JavaScript без попереднього означення цих об'єктів:
Array — масив;
Boolean — логічні дані;
Date — календарна дата;
Function — функція;
Global — глобальні методи;
Math — математичні сталі й функції;
Number — числа;
Object — об'єкт;
String — рядок.
Вбудовані об'єкти зручні для виконання рутинних операцій з рядками, датами, масивами, числами і т.і.
Об'єкти проглядача
У сценарії JavaScript проглядач подано ієрархічно організованим набором об'єктів. Звертаючись до властивостей і методів цих об'єктів, можна здійснювати різні операції з вікном, завантаженим у це вікно документом HTML, а також з окремими об'єктами, розташованими в документі HTML. Наприклад, можна створити нові вікна проглядача, завантажити у них документи, динамічно формувати текст документу HTML, звертатися до полів форм і т.і.
Об'єкти проглядача є тим інтерфейсом, з допомогою якого взаємодіють сценарій JavaScript, користувач, проглядач і документ HTML, завантажений у вікно проглядача.
На наступному рисунку показано ієрархію об'єктів проглядача (неповністю!).
Цю ієрархію об'єктів подамо також багаторівневим списком (див. лівий стовпчик наступної таблиці). Відступ ліворуч пропорційний глибині закнурення, тобто кількості кроків від кореневого елементу window.
| Назва | Призначення |
| window | предок усіх інших об'єктів, що подає вікно проглядача |
| parent | посилання на вікно безпосереднього предка, якщо поточний об'єкт є фреймом. Інакше — на саме вікно |
| frame | вікно, яке може показувати на одному екрані кілька незалежно прокручуваних фреймів, кожний з яких має свою власну URL |
| location | повна URL |
| top | посилання на вікно предка найвищого рівня, якщо поточний об'єкт є фреймом. Інакше — на саме вікно |
| document | інформація про поточний документ |
|
link (масив links) | частина тексту або зображення, означені як гіперпосилання |
|
anchor (масив anchors) | фрагмент тексту, які можна розташувати у гіперпосилання |
| location | повна URL поточного документу |
| history | інформація про URL, відвідані користувачем всередині вікна |
|
form (масив forms) | форми |
| масив elements | масив об'єктів, що містить елементи форми (об'єкти checkbox, radio і text) у порядку запису |
| button | натискувана кнопка |
| checkbox | контрольний перемикач |
| hidden | текстовий об'єкт форми, який не овідображено в HTML формі. Використовують для передавання пар назва/величина при завантаженні форми |
| pasword | текстове поле в HTML формі, величину якого на екрані відображено зірочками (*) |
| ratio | встановлення статичнх кнопок для вибору одного пункту зі списку |
| textarea | Багаторядкове поле введення текстової інформації |
| text | Однорядкове поле введення текстової інформації |
| submit | кнопна передавання даних |
| select | список для вибору |
| reset | кнопка скидання величин до тих, що передбачені згідно з замовчуваннями |
Об'єкт window знаходиться в корені ієрархії. При завантаженні документу HTML всередині цього об'єкту сворюються інші об'єкти: document, parent, frame, location i top.
Якщо у вікно проглядача завантажено документ HTML з фреймами, то для кожного фрейма створюється окреме вікно як об'єкт window.
Об'єкт document містить у собі інші об'єкти, склад яких визначено завантаженим документом HTML. Це можуть бути форми, посилання на інші документи HTML або локальні посилання всередині одного документа, об'єкти, що визначають адресу URL документа тощо.
Якщо документ містить форми, то вони також є ієрархічними наборами об'єктів. Об'єкт-форма може містити у собі такі об'єкти: кнопки, перемикачі, поля для вводення текстової інформації тощо (див. рисунок вище).
Звертаючись до властивостей перелічених об'єктів, сценарій JavaScript може визначити всі характеристики документа HTML.
Розглянемо для прикладу об'єкт location. У цьому об'єкті подано адресу завантаженого HTML-документу. Відповідну послідовність символів занесено в location.href. Але для нас важливішим є те, що надано можливість записувати в location.href нову адресу. У наступному прикладі кнопка завантажує у поточне вікно нову сторінку:
<form><input type=button value="Yahoo!" onClick="location.href='http://www.yahoo.com'; "></form>
Об'єкти на основі класів, створених у ході виконання програми
Клас JavaScript створюють як функцію, в якій визначено властивості, що грають роль даних. Методи так само означаються як функції, але окремо. Подамо простий приклад: створимо клас для збереження запису телефонної бази даних. У цьому класі потрібно передбачити властивості для збереження імені, прізвища, номера телефону, адреси і специальної ознаки для записів, закритих від несанкціонованого доступу. Додатково потрібно створити методи для подання вмісту об'єкту таблицею.
Спочатку створимо клас с назвою myRecord за допомогою такого коду:
function myRecord(name, family, phone, address)
{
this.name = name;
this.family = family;
this.phone = phone;
this.address = address;
this.secure = false;
}
Опис даного класу — це функція-конструктор. Властивості визначають простим посиланням на їхні назви після слова this. Тут це слово вказує:
посилання на властивості саме того об'єкту, для якого викликано конструктор.
Зверніть увагу: конструктор ініціалізує властивість secure, надаючи їй величину false. Відповідний параметр у конструкторі не
передбачено. Але це прийнятно.
На основі утвореного класу можна створити довільну кількість об'єктів. Подамо фрагмент сценарію JavaScript, що на основі класа myRecord створює два об'єкти rec1 i rec2:
var rec1;
var rec2;
rec1 = new myRecord("Гершко", "Кац", "1234567","Стальського вул., б. 4, кв. 11");
rec2 = new myRecord("Грицько","Терпилихо","7654321","Сагайдачного вул., б. 1, кв. 41");
rec2.secure = true;
Об'єкти створено вказівкою new. Конструктору передано параметри для ініціалізації властивостей створюваних об'єктів. Властивість secure об'єкту rec2 змінено на true вже після створення останнього. Властивість secure об'єкту rec1 не змінено, вона зберігає величину false.
Тепер долучимо до означеного класу нові методи:
printTableHead — для виведення в документ HTML початкової частини таблиці;
printTableEnd — для виведення в документ HTML кінцевої частини таблиці;
printRecord — для виведення рядка таблиці, у якому подано вміст запису.
Стисло нове означення для myRecord подано таким кодом:
function printTableHead(){...}
function printTableEnd() {...}
function printRecord() {...}
function myRecord(name, family, phone, address)
{
this.name = name;
this.family = family;
this.phone = phone;
this.address = address;
this.secure = false;
this.printRecord = printRecord;
this.printTableHead = printTableHead;
this.printTableEnd = printTableEnd;
}
Тут перед означенням об'єкту розташовано означення для функцій-методів цього об'єкту. Крім цього у конструктор долучено означення нових властивостей:
this.printRecord = printRecord;
this.printTableHead = printTableHead;
this.printTableEnd = printTableEnd;
Ці властивості зберігають посилання на методи, означені вище. Після такого
означення класу можна створювати об'єкти і звертатися до означених методів:
rec1.printTableHead();
rec1.printRecord();
rec1.printTableEnd();
rec2.printTableHead();
rec2.printRecord();
rec2.printTableEnd();
Подамо повний текст коду програми.
<HTML><HEAD><TITLE>Перегляд записів</TITLE>
<SCRIPT LANGUAGE="JavaScript"> <!--
function printTableHead()
{ var szSec = "";
if (this.secure) szSec = " (дані захищено)".fontcolor("red");
else szSec = " (дані не захищено)".fontcolor("green");
document.write("<B>"+this.name + " " + this.family + szSec+"</B>");
document.write("<TABLE BORDER>");
document.write("<TH ALIGN=CENTER>Поле запису</TH><TH ALIGN=CENTER>Вміст</TH>");
}
function printTableEnd()
{ document.write("</TABLE>");
document.write("<P> ");
}
function printRecord()
{ document.write("<TR><TD>Ім'я:</TD><TD>"
+ this.name.italics() + "</TD></TR>");
document.write("<TR><TD>Прізвище:</TD><TD>"
+ this.family.italics() + "</TD></TR>");
document.write("<TR><TD>Телефон:</TD><TD>"
+ this.phone.italics() + "</TD></TR>");
document.write("<TR><TD>Адреса:</TD><TD>"
+ this.address.italics() + "</TD></TR>");
}
function myRecord(name, family, phone, address)
{ this.name = name;
this.family = family;
this.phone = phone;
this.address = address;
this.secure = false;
this.printRecord = printRecord;
this.printTableHead = printTableHead;
this.printTableEnd = printTableEnd;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<<1>Перегляд записів</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
var rec1;
var rec2;
rec1 = new myRecord("Гершко", "Кац", "1234567","Шолома Алейхема вул., б. 4, кв. 11");
rec2 = new myRecord("Грицько","Терпилихо","7654321","Тараса Шевченка бул., б. 1, кв. 41");
rec2.secure = true;
rec1.printTableHead(); rec1.printRecord(); rec1.printTableEnd();
rec2.printTableHead(); rec2.printRecord(); rec2.printTableEnd();
// -->
</SCRIPT>
</BODY></HTML>
callee з атрибутами {DontEnum}. Початковою величиною цієї властивості є виконуватий у поточний момент об'єкт Function. Ця властивість забезпечує можливість рекурсивного виклику функцій;
length з атрибутами {DontEnum}. Початковою величиною цієї властивості є кількість фактичних аргументів, переданих функції при її виклику;
масив величин фактичних аргументів функції. Для доступа до величин масиву використовують такий синтаксис: функція.arguments[i], де функція — назва поточної функції, а i — номер аргумента, рахуючи з нуля.
Цим об'єктом можна скористатися, коли ми наперед не знаємо кількості аргументів, які буде передано даній функції. В натупному прикладі функція initArray створює новий масив і копіює у нього перелік своїх фактичних аргументів.
function initArray()
{ this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i] = initArray.arguments[i];
}
var myFriends = new initArray("Михайло", "Максим", "Івась", "Левко");