ЛАБОРАТОРНА РОБОТА № 3

Робота з об'єктом Window

3.1 Три типи об'єктів «JavaScript

У мові JavaScript мається три типи об'єктів: убудовані об'єкти, об'єкти браузера й об'єктии, що програміст створює самостійно.

3.1.1. Убудовані об'єкти

Нижче перераховані убудовані об'єкти, властивості і методи яких доступні в сценаріях JavaScript без попереднього визначення цих об'єктів:

Об'єкт Опис

Array* Масив

Boolean* Логічні дані

Date Календарна дата

Function* Функція

Global* Глобальні методи

Math Математичні константи і функції

Number* Числа

Object* Об'єкт

String Рядка

Символом * відзначені убудовані об'єкти, визначені в мові Microsoft JScript версії 3.0, реалізованої в браузері Microsoft Internet Explorer версії 4.0.

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

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

<HTML>

<HEAD>

</HEAD>

<!--

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());

3.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. Перше з цих подій виникає, коли браузер завершує завантаження вікна і всіх розташованих у ньому фреймів (якщо ці фрейми визначені у вікні). Друга подія виникає, коли користувач завершує роботу з документом, закриваючи вікно чи браузера переключаючи на інший документ.

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

;

Повертаючи до документа приведемо його повний вихідний текст (листинг 3.2).

Листинг 3.2. Файл chapter2/NewObject/NewObject.html

<HTML>

<HEAD>

<Т1ТLЕ>Перегляд записів</Т1ТLЕ>

<!--

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>

<H1>Перегляд записів</Н1>

<!--

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.

3.2. Масиви в JavaScript

Мова сценаріїв JavaScript допускає роботу з масивами убудованих об'єктів, об'єктів браузера й об'єктів, створених програмістом. Нижче розповідається про два способи, перший з який необхідний для версій браузерів Netscape Navigator, більш ранніх ніж 3.0, а другий використовується новими браузерами фірм Netscape і Microsoft.

Перший спосіб припускає створення власного класу. Це можна зробити, наприклад, так:

function createArray(nLength)

{

this.length = nLength;

for(var i = 1; i <= nLength; i++)

{

this[i] = 0;

}

return this;

}

Тут у класі визначена властивість з ім'ям length, що зберігає розмір масиву, переданий конструктору класу через параметр nLength. Конструктор виконує ініціалізацію масиву, записуючи в його осередки нульові значення. Таким чином, створюється масив для збереження чисел. Після ініціалізації конструктор повертає посилання на створений об'єкт, тобто на масив.

Як користуватися класом createArray? Перед усім, треба оголосити змінну для збереження масиву, а потім створити об'єкт класу createArray за допомогою ключового слова new:

var myArray;

myArray = new createArray(256);

Після цього можна звертатися до осередків масиву:

mуАггау[0] = 255 mуАггау[1] ⁼ 254 myArray[255] = ПРО

Нумерація осередків починається з нуля.

Другий спосіб створення масивів простіше. При його використанні можна створити масив як об'єкт убудованого класу Array:

var myArray;

myArray = new Array(256);

...

myArray[0] = 255;

myArray [1] = 254;

myArray[255] = 0;

Тому що клас Array убудований, не потрібно визначати його самостійно.

3.3. Об'єкт window

3.3.1. Властивості об'єкта window

Об'єкт window має властивості, що описують розміри вікна, розташовані у вікні фрейми, ім'я вікна, уміст рядка стану вікна й ін.:

Властивість Опис

defaultStatus Повідомлення, відображене в рядку стану вікна браузера за замовчуванням

frames Масив усіх фреймів даного вікна

length Кількість фреймів у батьківському вікні

name Ім'я вікна, зазначене при його відкритті методом open, а також у параметрі TARGET оператора <А> чи в параметрі NAME оператора <FORM>

parent Синонім імені вікна. Відноситься до вікна, що містить набір фреймів

self Синонім імені вікна. Відноситься до поточного вікну

status Поточне повідомлення, відображуване в рядку стану вікна браузера

top Синонім імені вікна. Відноситься до вікна верхнього рівня

window Синонім імені вікна. Відноситься до поточного вікну

Властивість defaultStatus використовується тільки в браузері Netscape Navigator. Якщо записати в цю властивість довільне повідомлення, вона буде відображатися в рядку стану Netscape Navigator, коли вікно браузера висувається на передній план. Нажаль, браузер Microsoft Internet Explorer версій 3.02 і 4.0 ігнорує властивість defaultStatus.

Властивість status застосовується обома конкуруючими браузерами. Періодично записуючи повідомлення в цю властивість і щораз зрушуючи це повідомлення на одну позицію, можна домогтися ефекту рядка, що біжить.

У браузері Microsoft Internet Explorer версії 4.0 рядок стану розділений на декілька областей. Область, уміст якої відповідає властивості status, розташована ліворуч і має відносно невеликі розміри (особливо в режимах відеоадаптера з низьким дозволом).

Властивості windows і self - синоніми. Можна застосовувати кожне з них за своїм розсудом.

Інші властивості, зокрема властивості frames і length, застосовуються в тому випадку, коли у вікно завантажений документ HTML із фреймами. Аналізуючи властивість length, можна визначити кількість фреймів у вікні, а за допомогою властивості frames (яке є масивом) неважко одержати доступ до вікон цих фреймів.

3.3.2. Методи об'єкта window

Серед методів, визначених в об'єкті window, необхідно відзначити методи, призначені для відкриття нових вікон і закриття існуючих, для відображення на екрані найпростіших діалогових панелей з повідомленнями і методи для установки таймера:

Метод Опис

alert Відображення діалогової панелі Alert з повідомленням і кнопкою ОК

close Закриття вікна

confirm Відображення діалогової панелі Confirm із кнопками ОК і Cancel

open Відкриття вікна

prompt Відображення діалогової панелі Prompt з полем уведення

setTimeout Установка таймера

clearTimeout Скидання таймера

Метод alert

Метод alert уже використовувався в гл. 1 у розділі з назвою "Варіація п'ята: з діалоговою панеллю" для висновку на екран найпростішої діалогової панелі, що відображає привітальне повідомлення. Застосування деяких інших методів і властивостей об'єкта window буде проілюстровано нижче на прикладах складених нами сценаріїв JavaScript.

Формат виклику методу alert:

alert("Повідомлення");

Через єдиний параметр методу alert передається повідомлення, відображуване в діалоговій панелі.

Після виклику цього методу виконання сценарію (функції) затримується доти, поки користувач не натисне кнопку ОК, розташовану в діалоговій панелі з повідомленням.

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

Можна явно вказувати об'єкт window:

window.alert("Повідомлення");

Метод confirm

За допомогою методу confirm можна відобразити на екрані діалогову панель з повідомленням, однак у цій панелі буде дві кнопки - OK і Cancel. У залежності від того, яка кнопка буде натиснута, метод поверне відповідне значення true чи false.

Метод confirm звичайно використовується в такий спосіб:

if(confirm("Повідомлення"))

{

// Натиснута кнопка ОК

...

}

else

{

// Натиснута кнопка Cancel

...

}

Метод prompt

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

Метод prompt викликається в такий спосіб:

Var szInput="";

szInput=prompt("Повідомлення","Рядок уведення за замовчуванням");

Через перший параметр методу передається повідомлення, що відображається в діалоговій панелі над текстовим полем уведення. Другий параметр необов'язковий. Якщо він зазначений, поле введення ініціалізується текстовим рядком, заданої цим параметром.

За допомогою методу prompt сценарій може одержати від користувача тілько один текстовий рядок.

Метод open

За допомогою методу open сценарій може відкрити нове вікно браузера і завантажити в це вікно документ HTML для перегляду. Формат виклику методу open приведений нижче:

open("Адреса URL", "Ім'я Вікна", "Параметри вікна");

Метод повертає ім'я нового вікна, яке можна використовувати для посилання на властивості і методи вікна, а також на властивості і методи об'єктів, розташованих у цьому вікні.

Перший параметр методу open задає адреса URL документа HTML, призначений для завантаження в нове вікно.

Другий параметр визначає ім'я вікна для використання в параметрі TARGET оператора <А> чи в операторі <FORM>, можна вказати його як порожній рядок виду " ".

Третій, необов'язковий параметр задає різні параметри, що визначають зовнішній вигляд створюваного вікна браузера. Цей параметр указується як текстовий рядок, де через кому перераховані значення окремих параметрів, наприклад:

var wndNewWindow;

wndNewWindow=open("hello.html", "", "toolbar=no,menubar=no,scrollbars=no,width=300,height=100");

Нижче перераховані всі можливі параметри вікна:

Параметр Опис

Toolbar Якщо параметр має значення yes чи 1, вікно забезпечується стандартною інструментальною лінійкою. Якщо ж значення цього параметра дорівнює no, то інструментальна лінійка буде відсутній

location Параметр визначає, чи буде відображатися поле введення адреси документа

directories Аналогічно попередньому, але керує відображенням кнопок каталогів браузера Netscape Navigator, таких, як "What's New" і "What's Cool"

status Відображення рядка стану

mеnubаг Відображення лінійки меню

scrollbars Відображення смуг перегляду

resizable Якщо цей параметр зазначений як yes чи 1, користувач зможе змінювати розмір знову створеного вікна

width Ширина вікна в пикселях

height Висота вікна в пикселях

Метод close

За допомогою методу close можна закрити створене чи основне вікно браузера. Формат виклику цього методу такий:

wndNewWindow.close()

Поточне вікно браузера (то вікно, у яке завантажений документ HTML із працюючим сценарієм) може бути закрито одним із двох наступних способів:

window.close()

self.close()

Метод setTimeout

За допомогою методу setTimeout можна установити таймер, указавши при цьому вираження JavaScript і затримку в часі:

idTimer=setTimeout(cmd, timeout);

Метод setTimeout створює і запускає таймер, повертаючи його ідентифікатор. Коли пройде час, заданий другим параметром timeout (у мілісекундах), запускається вираження JavaScript, задане параметром cmd.

Розглянемо такий фрагмент сценарію:

var cmd="NoAccess()";

idTimer=window.setTimeout(cmd, 10000);

Тут створюється таймер з часом затримки 10 с. По проходженню цього часу буде викликана функція з ім'ям NoAccess, що повинна бути визначена в сценарії заздалегідь. Ця функція буде виконана тілько один раз.

Ще одне застосування методу setTimeout - створення анімаційних ефектів у сценарії JavaScript.

Метод clearTimeout

За допомогою методу clearTimeout можна зупинити таймер, запущений тільки що розглянутим методом setTimeout. Як параметр методу clearTimeout необхідно передати ідентифікатор таймера, отриманий від методу setTimeout:

clearTimeout(idTimer);

3.3.3. Події для об'єкта window

З об'єктом класу window зв'язані дві події - onLoad і onUnload. Перше з них виникає, коли браузер закінчує завантаження вікна чи усіх вікон фреймів, визначених оператором <FRAMESET>, а друге - коли користувач завершує роботу з документом HTML.

Як приклад можна розглянути фрагмент документа HTML утримуючий сценарій:

function Hello()

{

Window.alert("Welcome to my home page'")

}

function Bye()

{

window. alert("Bye ! Come back again!")

}

...

Тут в операторі <BODY> визначені оброблювачі подій onLoad і onUnload. При виникненні першої події буде викликатися функції Hello, а при виникненні другої події - функція Bye. Тому що документ HTML інтерпретується в напрямку зверху вниз, функції Hellо і Bye необхідно визначити до появи оператора <BODY>. Краще місце для визначення цих функцій - заголовок документа HTML. Якщо потрібно простежити завантаження усіх фреймів, можна вказати оброблювач події onLoad в операторі <FRAMESET>.

3.4. Сценарії, що працюють з об'єктами window

3.4.1. Як закрити вікно браузера

Треба вирішити задачу, неможливу без застосування файлу сценарію а саме закрити головне вікно браузера за допомогою кнопки, розташованої в документі HTML.

Якщо натиснути на кнопку з назвою Close Navigator Window, сценарій відобразить на екрані діалогову панель.

Дана діалогова панель відображається за допомогою методу confirm. Якщо натиснути на кнопку ОК, сценарій спробує закрити вікно браузера за допомогою методу close.

Браузер Microsoft Internet Explorer версії 4.0 запитує дозвіл на закриття вікна ще раз.

Вихідний текст документа HTML, що закриває головне вікно браузера, представлений у листинге 3.3.

Листинг 3.3. Файл chapter2/CloseAll/CloseAll.html

<HEAD>

<Т1ТLЕ>Закриваємо вікно 6payзepa</TITLE>

<!--

function CloseNavWnd()

{

if(confirm("Ви дійсно бажаєте закрити вікно браузера?"))

window.close();

}

//-->

</SCRIPT>

</HEAD>

<Н1>Закриваємо вікно браузера</Н1>

<Р>Для того щоб закрити вікно браузера, натисніть кнопку "Close Navigator Window", розташовану нижче:

<P><INPUT TYPE="button" VALUE="Close Navigator Window"

onClick="CloseNavWnd();">

</FORM>

</BODY>

</HTML>

В області заголовка документа визначена функція CloseNavWnd:

function CloseNavWnd()

{

if{confirm("Ви дійсно бажаєте закрити вікно браузера?"))

window.close();

}

Ця функція звертається до методу confirm, що виводить на екран діалогову панель із запитом на закриття вікна. Якщо користувач натисне кнопку ОК, метод поверне значення true, а якщо на кнопку Cancel - значення false.

У випадку позитивної відповіді функція CloseNavWnd викликає метод close для поточного об'єкта window. У даному випадку таким об'єктом є вікно браузера. Замість об'єкта window можна вказувати об'єкт self, тому що це синонім поточного вікна:

self.close();

Для того щоб функція CloseNavWnd викликалася після того, як користувач натискає кнопку, у рядку визначення цієї кнопки зазначений оброблювач події onClick:

<P><INPUT TYPE="button" VALUE="Close Navigator Window"

onClick="CloseNavWnd();">

3.4.2. Відкриваємо нове вікно

При відкритті наступного документа HTML на екрані з'являється діалогова панель з повідомленням.

Якщо натиснути на кнопку ОК у цій діалоговій панелі, то у вікні браузера з'явиться вміст документа.

У цьому вікні розташована кнопка Open Hello window. Якщо натиснути на цю кнопку, буде створене ще одне вікно браузера, у яке завантажиться уміст файлу Hello.html. Однак зовнішній вигляд цього вікна буде трохи незвичним. У вікні немає ні смуг перегляду, ні меню, ні інструментальної лінійки - при створенні цього вікна в сценарії було зазначено, що перераховані вище елементи користувальницького інтерфейсу відображати не потрібно. Крім того, були визначені точні розміри вікна.

Якщо тепер закрити вікно документа NewWnd.html, на екрані з'явиться діалогова панель із запрошенням.

Вихідний текст документа HTML NewWnd.html представлений у листинге 3.4.

Листинг 3.4. Файл chapter2/NewWnd/NewWnd.html

<HTML>

<HEAD>

<TITLE>Window object</TITLE>

<!--

function Hello()

{

window.alert("Welcome to my home page!")

}

function Bye()

{

window.alert("Bye! Come back again!")

}

function OpenHelloWnd()

{

var wndNewWindow;

wndNewWindow = window.open("hello.html","", "toolbar=no,menubar=no,scrollbars=no,width=300,height-100");

}

//-->

</SCRIPT>

</HEAD>

<Hl>Open second window</Hl>

<P><INPUT TYPE="button" VALUE="Open Hello window"

onClick="OpenHelloWnd();">

</FORM>

</BODY>

</HTML>

В операторі <BODY> задана обробка події onLoad і onUnload:

Коли користувач завантажує документ, після закінчення завантаження браузер викликає функцію Hello, призначену для обробки події onLoad. Перед видаленням вікна з документом викликається оброблювач події onUnload, реалізований у функції Bye.

Функції Hello і Bye визначені в заголовку документа HTML і не мають ніяких особливостей. Для висновку діалогової панелі з повідомленням ці функції викликають метод alert.

Коли користувач натискає кнопку "Open Hello window", визначену у формі, викликається функція OpenHelloWnd. Ця функція відкриває нове вікно браузера, завантажуючи в нього новий документ HTML.

Вікно відкривається в такий спосіб:

wndNewWindow - window.open("hello.html", "", "toolbar-no,menubar=no,scrollbars=no,width=300,height=100");

Як перший параметр методу open передається адреса URL документа HTML, що повинна бути завантажена у вікно. Другий параметр визначає ім'я вікна (його не задали), а третій - визначає параметри вікна.

3.4.3. Текст, що біжить, у рядку стану браузера

Розповсюджена задача - відображення тексту, що біжить, у рядку стану браузера.

Рядок стану звичайно використовується браузерами для відображення різної інформації, наприклад інформації про виконання поточної операції. Для того щоб записати що-небудь у рядок стану, необхідно змінити уміст властивості status об'єкта window вікна браузера. Цю задачу можна вирішити, наприклад, так:

window.status = "Новий рядок";

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

У сценарії (листинг 3.5) застосований спосіб виконання періодичних процедур, заснований на використанні методу setTimeout, визначеного для об'єкта window. Нагадаємо, що цей метод дозволяє організувати відкладене в часі виконання команди, заданої першим параметром. Час, через яке команда буде запущена, указується методу setTimeout другим параметром.

Листинг 3.5. Файл chapter2/StatusScrol/StatusScroll.html

<HTML>

<HEAD>

<Т1ТLЕ>Авторський компакт-диск</Т1ТLЕ>

<!--

var szMsg = "You are welcome to our Web site http://www.glasnet.ru/~frolov";

var nSpace = 100;

var nIteration = 0;

function sscroll()

{

var cmd = "sscroll()";

var szOut = "";

var szText = "";

for (i=0 ; i < nSpace ; i++)

{

szText += " ";

}

szText += szMsg;

szOut = szText.substring(nIteration, nSpace + nIteration);

window.status = szOut;

nlteration++;

if(nIteration > nSpace + szMsg.length)

{

nIteration = 0;

}

timer = window.setTimeout(cmd, 50);

}

//-->

</SCRIPT>

</HEAD>

<Н1>Новий випуск авторського CD</H1>

<!--

sscroll();

//-і>

</SCRIPT>

<P>Перший випуск нашого компакт-диску

уже з'явився в продажі. Інформацію про цьому, а також про наступний випуску ви знайдете на нашому сервері Web, адреса якого відображається у вікні стану браузера

</BODY>

</HTML>

В області заголовка документа визначені глобальні змінні szMsg, nSpace і nIteration, а також функцію sscroll.

Змінна szMsg ініціалізується текстовим повідомленням, що буде безупинно переміщатися в рядку стану браузера. Значення, записане в змінну nSpace, визначає кількість пробілів, що буде додано до рядка повідомлення ліворуч перед початком операції зрушення. І нарешті, змінна nIteration служить лічильником зрушень для функції sscroll.

Функція sscroll викликається перший раз у тілі документа:

<Н1>Новий випуск авторського CD</H1>

<!--

sscroll();

//-->

</SCRIPT>

</BODY>

Надалі функція sscroll організує за допомогою методу setTimeout свій власний виклик, відкладений у часі на 50 мс, і завершує роботу. Однак через зазначений час функція буде викликана знову, і це буде продовжуватися доти, поки документ HTML, що містить сценарій, залишається завантаженим у вікно браузера.

Спрощенно структура функції sscroll показана нижче:

function sscroll ()

{

var cmd = "sscroll()";

...

// Відображення повідомлення в рядку стану браузера

...

// Зрушення повідомлення вліво на одну позицію

...

timer = window.setTimeout(cmd, 50);

}

Після відображення повідомлення в рядку стану і зрушення цього повідомлення вліво на одну позицію функція sscroll викликає метод setTimeout, віддаючи йому через перший параметр змінну з командою, що підлягає виконанню, а через другий - час затримки, по прошествии який дану команду потрібно буде виконати.

Як виконувану команду методу setTimeout зазначений виклик функції sscroll.

У функції sscroll визначені три локальні змінні. Змінна cmd зберігає команду виклику функції sscroll. У змінної szOut підготовляється текст, відображуваний у рядку стану браузера при кожнім виклику функції sscroll.

Текстова змінна szText використовується як робоча. У ній формується повідомлення для висновку. Спочатку в змінну szText записується nSpace пробілів, а потім додається рядок szMsg:

for (i=0 ; i < nSpace ; i++)

{

szText += " ";

}

szText += szMsg;

Для того щоб при кожнім виклику функції sscroll повідомлення відображалося зі зрушенням на одну позицію, витягається з змінної szText підстрока. Витяг підстроки виконується за допомогою методу substring, визначеного в убудованому класі текстових рядків String. Отримана підстрока записується у властивість status об'єкта window і в такий спосіб відображається в рядку стану:

szOut = szText.substring(nIteration, nSpace + nIteration);

window.status = szOut;

Перший параметр методу substring визначає початкову позицію підстроки усередині рядка, а другий - кінцеву.

Після відображення повідомлення функція sscroll збільшує значення глобального лічильника nIteration на одиницю:

nIteration++;

Коли в результаті зрушення повідомлення цілком іде з рядка стану, лічильник nIteration знову встановлюється в нульове значення:

if(nIteration > nSpace + szMsg.length)

{

nIteration = 0;

}

Загальна довжина рядка, що зрушується, тут обчислюється як сума значення nSpace (кількість початкових пробілів) і довжини повідомлення szMsg. Остання знаходиться за допомогою методу length, визначеного в убудованому класі String.

3.4.4. Обмеження часу реакції користувача

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

Для виміру час, протягом якого користувач неактивний, допоможуть методи setTimeout і clearTimeout. Перший з цих методів уже використовувався в попередньому сценарії для організації періодичного виконання функції.

Коли користувач завантажує документ HTML, вихідний текст якого представлений у листинге 2.6, на екрані з'являється форма з полем, призначеним для введення текстового рядка пароля.

Відразу після завантаження документа у вікно браузера сценарій запускає таймер, викликаючи метод setTimeout з цього ж класу. Таймер встановлюється на 10 с Саме за цей час треба ввести пароль і натиснути кнопку Enter Password у формі, показаної на мал. 2.13, щоб одержати доступ до сторінки.

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

Тілько в тому випадку, якщо пароль уведений правильно і протягом 10 с, на екрані з'являється повідомлення про надання користувачу доступу і посилання, за допомогою якої можна перейти до перегляду головної сторінки нашого сервера Web.

Тепер розглянемо вихідний текст сценарію JavaScript, убудованого в документ HTML (листинг 3.6).

Листинг 3.6. Файл chapter2/Password/Password.html

<HTML>

<HEAD>

<ПОЗНАЧКА http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>bвод пароля</Т1ТLЕ>

<!--

var idTimer=0;

function StartMyTimer()

{

var cmd="NoAccess ()";

idTimer=window.setTimeout(cmd, 10000);

}

function NoAccess()

{

document.write("<Н1>Доступ заборонений</Н1>") ;

document.write("<Р>Спробуйте наступного разу!");

}

function CheckPassowd()

{

var szPwd="";

szPwd=document.pwdForm.pwd.value;

if(szPwd=="password")

{

clearTimeout(idTimer);

document.write("<Н1>Доступ дозволений</Н1>");

document.write("<Р>Наш сервер:");

document.write('<A HREF="http://www.glasnet.ru/~frolov/index.html" ');

document.write('>http://www.glasnet.ru/~frolov/index.html</A>');

}

else

{

document.write("<Н1>Доступ заборонений</Н1>");

document.write("<Р>Спробуйте наступного разу!");

}

//-->

</SCRIPT>

</HEAD>

<Н1>Доступ обмежений</Н1>

<P>Ми обмежили доступ до нашого сервера:)

<Р>Ви повинні ввести пароль (слово password) протягом 10 с.

<HR>

<P><INPUT TYPE="button" VALUE="Enter Password"

оn1ick="CheckPassowd();">

</FORM>

<HR>

</BODY>

</HTML>

У першій сторінці заголовка зазначений за допомогою оператора <ПОЗНАЧКА> номер кодової сторінки 1251, що відповідає кирилиці в Windows:

<ПОЗНАЧКА http-equiv="Content-Type"

content="text/html; charset=windows-1251">

Без цього рядка документ відображався неправильно браузером Microsoft Internet Explorer версії 4.0.

У перших рядках сценарію, розташованого в заголовку документа, оголошена змінна idTimer і визначена функція StartMyTimer:

var idTimer=0;

function StartMyTimer()

{

var cmd="NoAccess()";

idTimer=window.setTimeout(cmd, 10000);

}

Функція StartMyTimer запускає таймер, зберігаючи його ідентифікатор у глобальної змінної idTimer. Для запуску таймера застосований знайомий метод з ім'ям setTimeout.

Коли таймер спрацює (а це відбудеться через 10 секунд після завантаження документа HTML у вікно браузера), буде викликана функція NoAccess. Ця функція виводить у вікно браузера повідомлення про заборону доступу до сторінки.

Для того щоб функція StartMyTimer запускалася відразу після завантаження документа HTML у вікно браузера, зазначене її ім'я в параметрі onLoad оператора <BODY> і організована в такий спосіб обробка відповідного події:

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

Для введення пароля необхідно використовувати форму, що визначена в документі HTML у такий спосіб:

<P><INPUT TYPE="button" VALUE="Enter Password"

onClick="CheckPassowd();">

</FORM>

Ім'я форми pwdForm зазначено в параметрі NAME оператора <FORM>. Це ім'я буде потрібно для витягу рядка пароля з текстового поля, визначеного у формі за допомогою оператора <INPUT>. Ім'я цього текстового поля pwd також задається параметром NAME.

Крім текстового поля у формі мається кнопка з написом "Еnter Password". Для цієї кнопки визначений оброблювач події onClick, що викликається, коли користувач натискає мишею на кнопку. Оброблювачем у даному випадку є функція CheckPassowd, визначена в сценарії. Ця функція перевіряє пароль і, якщо пароль уведений правильно, зупиняє таймер, запущений при завантаженні документа HTML.

Витяг рядка пароля з поля форми робиться в такий спосіб:

var szPwd="";

szPwd=document.pwdForm.pwd.value;

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

Одержавши введену користувачем рядок, функція CheckPassowd перевіряє її:

if(szPwd=="password")

{

clearTimeout(idTimer);

...

}

Якщо рядок уведений правильно, таймер зупиняється методом clearTimeout. Як параметр цьому методу передається ідентифікатор таймера, отриманий від методу setTimeout. При помилці в документ HTML записується повідомлення про заборону доступу.

3.4.5. Завантаження документа HTML у вікно браузера

Часто виникає задача - відобразити новий документ HTML у поточному вікні браузера, не створюючи нового вікна.

Наступний сценарій (листинг 3.7) вирішує саме цю задачу.

Листинг 3.7. Файл chapter2/JumpTo/JumpTo.html

<HTML>

<HEAD>

<TITLE>Jump to other Web page</TITLE>

<!--

function urlJump()

{

var szNew'JRL="" ;

szNewURL=prompt("Enter new URL address:", "http://");

window.location.href=szNewURL;

}

<//-->

</SCRIPT>

</HEAD>

<Hl>Jump to other Web page</Hl>

<P><INPUT TYPE="button" VALUE="Jump"

onClick="urlJump();">

</FORM>

</BODY>

</HTML>

Коли користувач натискає кнопку Jump у формі selectForm, запускається функція urIJump.

Ця функція викликає метод prompt, визначений у класі window:

var szNewURL="";

szNewURL=prompt("Enter new URL address:", "http://");

Метод prompt відображає на вікні монітора діалогову панель, призначену для введення текстового рядка. У нашому випадку це повиннао бути рядок адреси URL документа HTML, що буде завантажений у вікно браузера.

Введена адреса записується в змінну szNewURL. Тепер можна переходити до завантаження нового документа у вікно браузера.

Коли розповідалося про об'єкти класу window, то говорилося, що такі об'єкти містять у собі інші об'єкти. Зокрема, об'єкт window містить у собі об'єкт location, що описує розташування документа HTML, завантаженого у вікно браузера.

Для того щоб завантажити у вікно новий документ, досить змінити уміст властивості об'єкта location з ім'ям href:

window.location.href=szNewURL;

Ця властивість зберігає адреса URL документа. Зміна умісту властивості href об'єкта location головного вікна браузера приводить до завантаження в це вікно нового документа.

3.5. Індивідуальні завдання на лабораторну роботу №3

3.5.1. Індивідуальне завдання для кожного студента. На основі листингов 2.1-2.7 підготувати і налагодити код JavaScript, у якому передбачити реалізацію індивідуального завдання. Вибір варіанта завдання здійснюється з таблиці 2 на підставі номера залікової книжки студента. У завданні кожного студента – дванадцять задач (по числу рядків). Номер варіанта кожної конкретної задачі виходить як залишок від розподілу числа з двох останніх цифр номера залікової книжки на число варіантів конкретної задачі, збільшений на «1». Наприклад, для номера зачіткі «ХХХ21», третьої задачі «Перетворення типів», що має п'ять варіантів, обираний варіант буде дорівнює:

Вар.=(21%5)+1=1+1=2.

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

Таблиця 2

Завдання	Варіант 1	Варіант 2	Варіант 3	Варіант 4	Варіант 5	Варіант 6	Варіант 7
Базовий вихідний листинг	Листинг3.3	Листинг 3.4	Листинг 3.5	Листинг 3.6	Листинг 3.7	Листинг3.3	Листинг 3.4
Для убудованого об'єкта Date одержати і вивести	Поточні рік і календарне число	Поточні місяць і календарне число	Поточні години та хвилини	Поточні хвилини і секунди	Поточні рік і календарне число	Поточні місяць і календарне число	Поточні години та хвилини
Для об'єкта браузера Window використовувати властивість	defaultStatus	frames	length	name	parent	Self	status
Для об'єкта браузера Window використовувати методи	open , alert , close	open , confirm, close	open , prompt, close	open , setTimeout, clearTimeout, close	open , confirm, close	open , prompt, close	open , setTimeout, clearTimeout, close
У методі open використовувати параметри вікна	Toolbar, width, height	Location, width, height	Directories, width, height	Status, width, height	Mеnubаг, width, height	Scrollbars, width, height	Resizable, width, height