Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Листинг 2.1. Файл chapter2/date/date. html




<HTML>

<HEAD>

<TITLE>Show date and time</TITLE>

</HEAD>

<BODY BGCOLOR=WHITE>

<Hl>Show date and time</Hl>

<SCRIPT LANGUAGE="JavaScript">

<!--

var dt;

var szDate="";

dt = new Date();

szDate = "Date: " + dt.getDate() + "."

+ dt.getMonth() + "." + dt.getYear();

document.write(szDate);

document.write("<BR>");

document.write("Time: " + dt.getHours()

+ ":" + dt.getMinutes() + ":" + dt.getSeconds());

//-->

</SCRIPT>

</BODY>

</HTML>

 

Тут сценарій JavaScript створює об'єкт Data, застосовуючи для цього ключове слово new і конструктор Date без параметрів:

 

var dt;

dt = new Date();

 

Утворюваний у такий спосіб об'єкт Data инициализируется поточною локальною датою, встановленої в користувача (а не на сервері Web, із якого був завантажений відповідний документ HTML).

У такому рядку формується текстовий рядок дати:

 

szDate = "Date: " + dt.getDate() + "."

+ dt. getMonth() + ". " + dt. getYear();

 

Значення календарного числа, номера місяця і роки тут утворюється відповідно за допомогою методів getDate, getMonth і getYear. Ці методи визиваються для об'єкта dt, що містить поточну дату.

Текстовий рядок дати виводиться в документ HTML за допомогою методу write, визначеного в об'єкті document:

 

document. write(szDate);

 

Об'єкт Date містить також інформацію про поточний час. Ця інформація витягається для відображення за допомогою методів getHours, getMinutes і getSeconds (відповідно часи, хвилини і секунди):

 

document. write("Time: " + dt. getHours()

+ ":" + dt. getMinutes() + ":" + dt. getSeconds());

 

2.1.2. Об'єкти браузера

З погляду сценарію JavaScript браузер рекомендується ієрархічно організованим набором об'єктів. Звертаючись до властивостей і методів цих об'єктів, можна виконувати різноманітні операції над вікном браузера, завантаженим у це вікно документом HTML, а також над окремими об'єктами, розміщеними в документі HTML.

У сценаріях JavaScript не можна створювати нові класи на базі класів, що відповідають цим об'єктам, проте властивості і методи об'єктів браузера доступні.

Ієрархія об'єктів браузера

Об'єкт window знаходиться в корені ієрархії. Коли у вікно браузера завантажується документ HTML, усередині цього об'єкта створюються інші об'єкти - document, parent, frame, location і top.

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

Об'єкт document містить у собі інші об'єкти, склад яких цілком визначається документом HTML, завантаженим у вікно браузера. Це можуть бути форма, посилання на інші документи HTML або локальні посилання усередині одного документа, об'єкти, що визначають адресу URL документа, і т.д.

Форми в документі також рекомендуються у виді ієрархічного набору об'єктів. Об'єкт-форма може містити в собі такі об'єкти, як кнопки, перемикачі, поля для запровадження текстової інформації.

Звертаючись до властивостей перерахованих вище об'єктів, сценарій JavaScript може визначити різноманітні характеристики документа HTML. Йому доступні всього посилання, розміщені в документі, а також уміст поляж форм, визначених у документі HTML.

Події, пов'язані з об'єктами

З кожним об'єктом браузера зв'язується визначений набір подій, опрацювання яких можлива в сценарії JavaScript.

Наприклад, з об'єктом window пов'язані події onLoad і onUnload. Перше з цих подій виникає, коли браузер завершує завантаження вікна і всіх розташованих у ньому фреймов (якщо ці фреймы визначені у вікні). Друга подія виникає, коли користувач завершує роботу з документом, закриваючи вікно браузера або переключаючись на інший документ.

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).

 




Поделиться с друзьями:


Дата добавления: 2014-11-29; Просмотров: 383; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.029 сек.