КАТЕГОРИИ:
Архитектура-(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.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.
2.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;
}
3десь у класі визначена властивість з ім'ям 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 умонтований, не потрібно визначати його самостійно.
2.3. Об'єкт window
2.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 (який є масивом) неважко одержати доступ до вікон цих фреймов.
2.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);
2.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 BGCOLOR=white onLoad="Hello ()" onUnload="Bye()">
...
Тут в операторі <BODY> визначені оброблювачі подій onLoad і onUnload. При виникненні першої події буде визиватися функції Hello, а при виникненні другої події - функція Bye. Тому що документ HTML інтепретується в напрямку поверх униз, функції Hellо і Bye необхідно визначити до появи оператора <BODY>. Краще місце для визначення цих функцій - заголовок документа HTML. Якщо потрібно простежити завантаження усіх фреймов, можна зазначити оброблювач події onLoad в операторі <FRAMESET>.
2.4. Сценарії, що працюють з об'єктами window
2.4.1. Як закрити вікно браузера
Треба вирішити задачу, неможливу без застосування файла сценарію як-от закрити головне вікно браузера за допомогою кнопки, розташованої в документі HTML.
Якщо натиснути на кнопку з назвою Close Navigator Window, сценарій відобразить на екрані діалогову панель.
Дана діалогова панель відображається за допомогою методу confirm. Якщо натиснути на кнопку ОК, сценарій спробує закрити вікно браузера за допомогою методу close.
Браузер Microsoft Internet Explorer версії 4.0 запитує дозвіл на закриття вікна ще разом.
Вихідний текст документа HTML, що закриває головне вікно браузера, поданий у листинге 2.3.
|
|
|
|
|
Дата добавления: 2014-11-29; Просмотров: 399; Нарушение авторских прав?; Мы поможем в написании вашей работы!