- •1. Основні поняття
- •1.1. Сім варіацій на тему "Hello, world! "
- •1.1.1. Варіація перша: сама проста
- •1.1.2. Варіація друга: із секретним вихідним текстом
- •1.1.3. Варіація третя: із переменной і функціями
- •1.1.4. Варіація четверта: створення сторінки "на літу"
- •1.1.5. Варіація п'ята: із діалоговою панеллю
- •1.1.6. Варіація шоста: опрацювання події
- •1.1.7. Варіація сьома: із визначенням типу браузера
- •1.2. Перемінні в JavaScript
- •1.2.1. Оголошення перемінних
- •1.2.2. Присвоєння значення перемінним
- •1.2.3. Типи даних
- •1.2.4. Перетворення типів даних
- •1.3. Оператори мови JavaScript
- •1.3.1. Унарные оператори
- •1.3.2. Бинарные оператори
- •1.3.3. Оператори для роботи з окремими бітами
- •1.3.4. Оператори зсуву
- •1.3.5. Оператори відношення
- •1.3.6. Логічні оператори
- •1.3.7. Оператор присвоювання
- •1.3.8. Умовні оператори
- •1.3.9. Оператори циклу
- •1.3.10. Інші оператори
- •1.3.11. Старшинство операторів JavaScript
- •1.3.12. Функції в мові сценаріїв JavaScript
- •1.4. Приклади використання операторів циклу
- •2. Класи і об'єкти
- •2.1. Три типи об'єктів «JavaScript
- •2.1.1. Умонтовані об'єкти
- •2.1.2. Об'єкти браузера
- •2.1.3. Об'єкти на базі класів, утворюваних програмістом
- •2.2. Масиви в JavaScript
- •2.3.1. Властивості об'єкта window
- •2.3.2. Методи об'єкта window
- •2.4. Сценарії, що працюють з об'єктами window
- •2.4.1. Як закрити вікно браузера
- •2.4.2. Открываем нове окно
- •2.4.3. Текст , що біжить , у рядку стани браузера
- •2.4.4. Обмеження часу реакції користувача
- •2.4.5. Завантаження документа html у вікно браузера
- •2.5.1. Властивості об'єкта document
- •2.5.2. Методи об'єкта document
- •2.5.3. Колірне оформлення документа
- •2.5.4. Посилання і мітки в документі
- •2.6. Умонтований клас Math
- •2.6.1. Властивості
- •2.6.2. Методи
- •2.7. Умонтований клас Date
- •2.7.1. Конструктори класу Date
- •2.8. Умонтовані функції
- •2.9. Плавна зміна цвіту фона документа html
- •3. Робота з формами
- •3.1. Ієрархія об'єктів у формах
- •3.2. Форма і її властивості
- •3.2.2. Властивості об'єкта form
- •3.3. Об'єкти, що входять до складу форм
- •3.3.1. Кнопка button
- •3.3.2. Перемикач checkbox
- •3.3.3. Перемикач radio
- •3.3.4. Приклад форми з перемикачами
- •3.3.5. Список select
- •3.3.6. Приклади сценаріїв, що працюють із списками
- •3.3.7. Однострочное поле text
- •3.3.8. Перевірка анкети
- •3.3.9. Многострочное поле textarea
- •3.3.10. Приклад сценарію, що заповнює поле textarea
- •3.3.11. Однострочное поле password
- •3.3.12. Запровадження ідентифікатора і пароля
- •3.4. Перевірка заповнення форми
- •3.5. Шестнадцатеричный калькулятор
- •3.3.6. Електронні часи
- •4. Фреймы
- •4.1. Файл опису фреймов
- •4.2. Взаємодія між фреймами
- •4.2.1. Десятично-шестнадцатеричный перетворювач
- •4.2.2. Відображення декількох документів html
- •5. Растровые зображення
- •5.1. Растровое зображення як об'єкт
- •5.2. Динамічна заміна растровых зображень
- •5.2.1. Зміна зовнішнього вигляду графічних посилань
- •5.2.2. Створення анімаційних зображень
- •5.2.3. Чекання завантаження всіх зображень
- •6. Взаємодія з аплетами java
- •6.1. Вбудовування аплета Java у документ html
- •6.2. Виклик методів аплета Java із сценарію JavaScript
- •6.3. Доступ до полів аплета Java із сценарію JavaScript
- •6.4. Динамічне завантаження аплетов Java
- •7. Застосування cookie
- •7.1. Виконання основних операцій із cookie
- •7.1.1. Створення cookie
- •7.1.2. Одержання значення cookie
- •7.1.3. Зміна значення параметра cookie
- •7.1.4. Видалення cookie
- •7.1.5. Обмеження на використання cookie
- •7.2. Декілька прикладів використання cookie
- •7.2.1. Фіксація повторних провідин сторінки
- •7.2.2. Записна книжка Cookies Notepad
- •7.2.3. Настроювання параметрів документа html
- •7.2.5. Одержання cookie розширенням серверу Web
- •7.2.6. Лічильник провідин на базі cookie і програми cgi
- •7.3. Настроювання браузера для роботи з cookie
2.1.3. Об'єкти на базі класів, утворюваних програмістом
Клас 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 створюється два об'єкти: reс1 і гес2:
var reс1;
var гес2;
reс1 = new myRecord("Іван", "Іванов",
"000-322-223", "Мала Велика вул., д. 225, кв. 226");
гес2 = new myRecord("Петро", "Петров",
"001-223-3334", "Велика Мала вул., д. 552, кв. 662");
гес2. secure = true;
Об'єкти створюються за допомогою оператора new. Тут передаються конструктору параметри для ініціалізації властивостей утворюваних об'єктів.
У об'єкті гес2 властивості з ім'ям secure инициализируется вже після створення останнього. У нього записується значення true. Властивість secure об'єкта reс1 не змінювалося, тому в ньому зберігається значення false.
Така задача - додавання у визначений нами клас нових методів з іменами printTableHead, printTableEnd і printRecord. Перші два з цих методів виводять у документ HTML відповідно початковий і кінцевий фрагмент таблиці, а третій - рядки таблиці, що відбивають уміст записів.
У скороченому виді нове визначення класу 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();
гес2.printTableHead();
гес2.printRecord();
гес2. printTableEnd()
;
Повертаючись до документа призведемо його повний вихідний текст (листинг 2.2).
Листинг 2.2. Файл chapter2/NewObject/NewObject. html
<HTML>
<HEAD>
<Т1ТLЕ>Перегляд записів</Т1ТLЕ>
<SCRIPT LANGUAGE="JavaScript">
<!--
function printTableHead()
{
var szSec = "";
if(this.secure)
szSec = "(Secure)";
else
szSec = "(Unsecure)".fontcolor("red");
document.write("<TABLE BORDER>");
document.write("<CAPTION ALIGN=LEFT>" +
this.name + " " + this.family + szSec +
"</CAPTION>");
document .write ("<TH ALIGN=LEFT>Полe запису</ТН>"
+ "<TH АLIGN=LЕFT>Вміст</ТН>");
}
function printTableEnd()
{
document.write("</TABLE>");
document.write("<P>");
}
function printRecord()
{
document.write ("<TR><TD>Name :</TD><TD>" +
this. name. italics () + "</TD></TR>");
document.write ("<TR><TD>Family: </TD><TD>" +
this.family.italics() + "</TD></TR>" ) ;
document.write ("<TR><TD>Phone:</TD><TD>" +
this.phone.italics () + "</TD></TR>") ;
document.write ("<TR><TD>Address : </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 BGCOLOR=WHITE>
<H1>Перегляд записів</Н1>
<SCRIPT LANGUAGE="JavaScript">
<!--
var rec1;
var rec2;
rec1 = new myRecord("Іван", "Іванов",
"000-322-223", "Мала Велика вул., д. 225, кв. 226");
rec2 = new myRecord("Петро", "Петров",
"001-223-3334", "Велика Мала вул., д. 552, кв. 662");
rec2.secure = true;
rec1.printTableHead();
rec1.printRecord();
rec1. printTableEnd();
rec2. printTableHead();
rec2.printRecord();
rec2.printTableEnd();
//-->
</SCRIPT>
</BODY>
</HTML>
Визначення нового класу myRecord і його методів розташовані в області заголовка документа HTML, як це прийнято робити.
Метод printTableHead виводить у документ HTML заголовок таблиці. Зовнішній вигляд цього заголовка залежить від умісту властивостей об'єкта.
Насамперед метод printTableHead перевіряє властивість secure, одержуючи його значення за допомогою ключового слова this:
var szSec = "";
if(this.secure)
szSec = " (Secure)";
else
szSec = " (Unsecure)". fontcolor ("red");
Тут це ключове слово означає, що необхідно використовувати властивість того об'єкта, для якого був викликаний метод printTableHead.
Якщо уміст властивості secure дорівнює true, у текстову перемінну szSec записується рядок " (Secure)". Якщо ж воно дорівнює false, у цю перемінну заноситься рядок "(Unsecure)", причому для рядка встановлюється червоний цвіт.
Тому що в JavaScript усі текстові рядки (у тому числі і литералы) є об'єктами умонтованого класу String, те для них можна викликати визначені в цьому класі методи. Зокрема, метод fontcolor дозволяє установити цвіт рядка, чим і скористалися.
Далі метод printTableHead виводить у документ HTML оператор <TABLE> із параметром BORDER, із якого починається визначення таблиці, що має рамку. Напис над таблицею задається за допомогою динамічно формованого оператора <CAPTION>. У цей напис включається ім'я і прізвище, витягнуті з відповідних властивостей об'єкта, для "який був викликаний метод printTableHead. Потім цей метод виводить напису для стовпчиків таблиці.
Метод printTableEnd виводить у документ HTML оператор </TABLE>, що завершує визначення таблиці, а також порожній параграф для відділення таблиць, що випливають друг за другом:
function printTableEnd()
{
document.write("</TABLE>");
document. write("<P>");
}
Останній метод, визначений у класі, називається printRecord. Він друкує вміст перших чотирьох властивостей об'єкта як рядок таблиці, визначеної в документі HTML тільки що описаною функцією printTableHead.
Вміст властивостей об'єкта друкується похилим шрифтом, для чого визивається метод italics:
document. write("<TR><TD>Name:</TD><TD>" +
this. name. italics () + "</TD></TR>");
Визначення класу myRecord вже описано вище.
В другій частині сценарію, розташованої в тілі документа HTML, створюються два об'єкти rec1 і гес2 на базі класу myRecord, а потім установлюється властивість secure об'єкта гес2 у стан true.
Далі сценарій послідовно виводить у документ HTML дві таблиці, що відповідають створеним об'єктам, викликаючи для цього методи printTableHead, printRecord і printTableEnd.