Министерство образования Украины

Лабораторна робота № 5

РОБОТА З ФОРМАМИ

Сценарії JavaScript часто застосовуються для попередньої обробки даних, уведених користувачами у формах. Перевірені дані потім можуть передаватися розширенням CGI чи ISAPI сервера Web. Крім того, за допомогою форм і сценаріїв JavaScript можна створювати активні сторінки, здатні одержувати від користувача й обробляти довільну інформацію.

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

5.1. Ієрархія об'єктів у формах

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

Раніше була визначена форма, через завдання для неї імені Sel за допомогою параметра NAME оператора <FORM>:

</SELECT>

</FORM>

У результаті в об'єкта document з'явилася властивість Sel. До цієї властивості можна адресуватися в такий спосіб:

Document.Sel

Будь-яка форма містить визначення полів і органів керування, таких, як списки, перемикачі і кнопки. При визначенні полів і органів керування їм можна задати ім'я, указавши його в параметрі NAME відповідного оператора мови HTML. У прикладі, приведеному вище, у формі визначений список з ім'ям ListOfLinks.

Для адресації зі сценарію JavaScript окремих органів керування можна скористатися тим фактом, що вони доступні як властивості утримуючих їхніх форм. Наприклад, якщо у формі Sel визначений список ListOfLinks, то для доступу до списку як до об'єкта можна використовувати наступне вираження:

Document.Sel.ListOfLinks

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

Document.Sel.ListOfLinks.selectedIndex

У якості одного з властивостей об'єкта document визначена властивість forms. Це масив усіх форм, розташованих у документі HTML. Розмір масиву дорівнює document.forms.length.

Можливо адресуватися до форм як до елементів масиву forms, причому, перший елемент масиву (з індексом 0) відповідає найпершій формі, визначеної в документі, другий - наступної і т.д. Однак зручніше звертатися до форм по їхніх іменах, заданим у параметрі NAME оператора <FORMS>.

5.2. Форма і її властивості

5.2.1. Оператор <FORM>

У найбільш загальному виді оператор <FORM>, призначений для створення форм у документах HTML, виглядає в такий спосіб:

<FORM

NAME ="Ім'я_форми" TARGET="Ім'я_окнa"

ACTION="Aдpec URL розширення сервера"

METHOD=GET чи POST

ЕNСТУРЕ="Кодування_даних"

onSubmit="ПРО6pa6oтчик_co6ытия_Submit">

...

визначення полів і органів керування

...

</FORM>

Параметр NAME задає ім'я форми. Можна його не вказувати, якщо форма не призначена для спільної роботи зі сценарієм JavaScript. Тут (у главі) це ім'я потрібно для адресації форми як властивості об'єкта document, тому завжди будемо його задавати.

Призначення параметра TARGET аналогічно призначенню цього ж параметра в операторі <А>. Коли форма використовується для передачі запиту розширенню CGI чи ISAPI сервера Web, відповідь, отримана від сервера, відображається у вікні. Ім'я цього вікна задано параметром TARGET. Якщо відповідь повинна відображатися в тім же вікні, у якому відображається і форма, то параметр TARGET задавати не потрібно.

За допомогою параметра ACTION вказується адреса URL завантажувального файлу програми CGI чи бібліотеки динамічного компонування DLL розширення ISAPI, а також передані розширенню параметри. У тому випадку, коли форма призначена для передачі даних розширенню сервера Web, параметр ACTION є обов'язковим. Але якщо дані, введені у формі, обробляються сценарієм JavaScript локально і не передаються серверу Web, цей параметр можна опустити.

Параметр METHOD задає метод передачі даних з форми розширенню сервера Web і може приймати значення GET чи POST. Якщо дані з полів форми обробляються сценарієм JavaScript локально, параметр METHOD задавати не потрібно.

Параметр ENCTYPE задає тип MIME переданих даних і використовується дуже рідко. Якщо форма призначена для передачі текстових даних (як це звичайно буває), цей параметр за замовчуванням має значення application/x-www-form-urlencoded. У цьому випадку для переданих даних використовується так називане кодування URL. Тип даних multi-part/form-data дозволяє передавати як текстові, так і двійкові дані. При локальній обробці даних сценарієм JavaScript параметр ENCTYPE не задається.

Крім параметрів для форми можна визначити оброблювач події, зв'язаний із кнопкою типу SUBMIT. Така кнопка призначена для посилки даних із заповненої форми розширенню сервера Web. Призначивши оброблювач події, сценарій JavaScript може керувати цим процесом.

5.2.2. Властивості об'єкта form

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

Перший набір властивостей приведений нижче:

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

Action Містить значення параметра ACTION

Elements Масив всіх елементів (полів і органів керування), визначених у формі

encoding Містить значення параметра ENCTYPE

length Розмір масиву elements

method Містить значення параметра METHOD

target Містить значення параметра TARGET

Більшість властивостей першого набору просто відбиває значення відповідних параметрів оператора <FORM>. Можна їх використовувати в сценаріях JavaScript для перевірки параметрів.

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

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

Button Кнопка з заданим написом

checkbox Перемикач типу Check Box. Може використовуватися в складі набору незалежних друг від друга чи перемикачів окремо

hidden Сховане поле, що не відображається. Уміст цього поля може бути лічено і проаналізовано розширенням сервера Web або сценарієм JavaScript

password Текстове поле для введення паролів. Набраний у цьому полі текст не відображається на екрані

radio Перемикач для групи залежних друг від друга перемикачів. Використовується звичайно для вибору одного значення з декількох можливих

reset Кнопка, за допомогою якої користувач може скинути вміст полів введення і стан перемикачів у їхній вихідний стан

select Список довільних текстових рядків

submit Кнопка для посилки даних із заповненої форми розширенню сервера Web. Для цієї кнопки можна задати довільний напис

text Однорядкове текстове поле

textarea Многострочное текстове поле

5.3. Об'єкти, що входять до складу форм

5.3.1. Кнопка button

У загальному виді кнопка класу button визначається у формі за допомогою оператора <INPUT> у такий спосіб:

<INPUT TYPE="button"

NАМЕ="Ім'я кнопки"

VАLUЕ="Напис_на_кнопці"

oпClick="Oбpaбoтчик_coбытия">

Параметр TYPE оператора <INPUT> повинний мати значення button, як це показано в прикладі.

За допомогою параметра NAME задається ім'я об'єкта, що відповідає кнопці (а не напис на кнопці). Напис на кнопці вказується за допомогою параметра VALUE.

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

Властивості об'єкта button

Об'єкт button має дві властивості, що відбивають значення відповідних параметрів оператора <INPUT>:

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

name Значення параметра NAME

value Значення параметра VALUE

Методи об'єкта button

Для об'єкта button визначений всього один метод, що не має параметрів, - click:

click()

Виклик цього методу приводить до такого ж ефекту, що і щиглик лівою клавішею миші по кнопці.

Приклад сценарію

Як перший приклад приведемо сценарій, що виконує обробку щиглика по кнопці з написом Click me, розташованої у формі.

Якщо натиснути на цю кнопку, сценарій відобразить у вікні браузера властивості кнопки как об'єкта класу button.

Вихідний текст документа HTML з убудованим у нього сценарієм JavaScript приведений у листинге 5.1.

Листинг 5.1. Файл chapter3/button/button.html

<HTML>

<HEAD>

<TITLE>Button demo</TITLE>

function btnClick()

{

var szTxt="";

var szTxt1="";

szTxt=document.TestForm.bt.value;

szTxt1=document.Test Form.bt.name;

document.write("<HR>");

document.write("You press button: " + szTxt.bold() + ", name=" + szTxtl.bold());

document.write("<HR>");

}

//-->

</SCRIPT>

</HEAD>

<Hl>Click Button</Hl>

<P><INPUT TYPE="button" NAME="bt" VALUE="Click me!"

onClick="btnClick();">

</FORM>

</BODY>

</HTML>

У тілі документа HTML визначена форма з ім'ям TestForm, для чого в операторі <FORM> зазначений параметр NAME. Інші параметри цього оператора тут не потрібні.

Форма містить одну-єдину кнопку з ім'ям bt і написом Click me. Для цієї кнопки як оброблювача події призначена функція btnClick, визначена в заголовку документа HTML.

Коли користувач натискає кнопку, функція btnClick одержує керування і зберігає в текстових змінних szTxt і szTxtl, соответственно напис і ім'я кнопки:

szTxt=document.TestForm.bt.value;

szTxt1=document.TestForm.bt.name;

Потім функція виводить у вікно браузера рядок, обмежений зверху і знизу розділовою лінією, що відображає значення властивостей value і name:

document.write("<HR>");

document.write ("You press button: " + szTxt.bold()

+ ", name=" + szTxtl.bold());

document.write("<HR>");

5.3.2. Перемикач checkbox

Перемикачі checkbox звичайно застосовуються для вибору яких-небудь незалежних друг від друга чи параметрів можливостей.

У формі перемикач checkbox створиться за допомогою оператора <INPUT> з параметром TYPE, рівним рядку "checkbox":

<INPUT TYPE="checkbox"

NAME =" Ім'я перемикача_chесkbох"

VALUE="Значення" CHECKED

onClick="06pa6oтчик_coбытия"> Текст, відображуваний поруч з перемикачем

Параметр NAME задає ім'я перемикача. Це ім'я можна використовувати для визначення стану цього перемикача в сценарії JavaScript.

За допомогою параметра VALUE можна визначити рядок, що передається розширенню сервера при посилці заповненої форми, якщо перемикач знаходиться у включеному стані. Якщо цей параметр не зазначений, то за замовчуванням посилається рядок "on". Сценарій JavaScript також може одержати значення параметра VALUE.

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

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

Властивості об'єкта checkbox

Об'єкт checkbox має декілька властивостей, що відбивають значення відповідних параметрів оператора <INPUT>:

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

name Значення параметра NAME

checked Властивість типу Boolean, що відбиває стан перемикача. Якщо перемикач включений, властивість має значення true, у противному випадку - false. За допомогою цієї властивості сценарій може змінювати стан перемикача

value Значення параметра VALUE

defaultChecked Властивість типу Boolean, що відбиває значення параметра CHECKED. Якщо параметр CHECKED є присутнім у визначенні перемикача, властивість має значення true, у противному випадку - false. Сценарій може чи визначати встановлювати значення цієї властивості

Методи об'єкта checkbox

Для об'єкта checkbox визначений один метод click, що не має параметрів:

click()

При виклику цього методу перемикач встановлюється у включний cтан.

5.3.3. Перемикач radio

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

Визначення перемикача radio виглядає в такий спосіб:

<INPUT TYPE="radio"

NAME=" Ім'я перемикача radio"

VАLUЕ="Значення"

CHECKED

onClick="06pa6oтчик_події">

Текст, відображуваний поруч з перемикачем

Призначення параметрів NAME, VALUE і CHECKED перемикача radio таке ж, як і призначення аналогічних параметрів перемикача checkbox. Відмінність полягає в тім, що всі перемикачі radio, що належать до однієї групи, повинні мати однакові імена, визначені параметром NAME. Що ж стосується перемикачів checkbox, те, якщо їх трохи, усі вони повинні називатися по-різному.

Для того щоб розширення сервера Web чи сценарій JavaScripl. обробні форму, могли довідатися, який же з перемикачів radio-групи знаходиться у включеному стані, усі такі перемикачі повинні мати різні значення VALUE.

Крім того, тілько один з перемикачів radio може бути визначений з параметром CHECKED.

Властивості об'єкта radio

Об'єкт radio має наступні властивості:

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

name Значення параметра NAME

length Кількість перемикачів типу radio, визначених у групі з ім'ям, заданим параметром NAME

value Значення параметра VALUE

Методи об'єкта radio

Для об'єкта radio визначений метод click, що не має параметрів:

click()

При виклику цього методу перемикач вибирається для роботи.

5.3.4. Приклад форми з перемикачами

У розділі приведений вихідний текст документа HTML зі сценарієм, призначеним для динамічного створення нової сторінки за допомогою сценарію JavaScript. Параметри сторінки визначаються станом перемикачів типу checkbox і radio, розташованих у цьому документі.

Документ містить одну форму, у якій є три перемикачі з незалежною фіксацією типу checkbox (розташовані в групі Page elements), три перемикачі з залежною фіксацією (утворюючі групу Text color) і дві кнопки - Create Page і Reset.

Якщо включений перемикач Show title, створюваний сценарієм JavaScript, документ HTML буде постачений заголовком. При включенні перемикача Show horizontal lines інформація про стан перемикачів, відображуваний у документі, буде виділена зверху і знизу горизонтальними розділовими лініями.

Перемикач Table view впливає на спосіб відображення інформації. Якщо він включений, інформація буде показана в табличному виді, а якщо виключений - у виді списку.

Перемикачі з залежною фіксацією групи Text color, розташовані у вихідному документі HTML, задають колір рядків при відображенні інформації у виді чи списку колір назв перемикачів при табличному відображенні.

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

Текст документа HTML зі сценарієм, що виконує всі описані вище дії, представлений у листинге 5.2.

Листинг 5.2. Файл chapter3/checkradio/checkradio.html

<HTML>

<HEAD>

<!--

function resetRCHBox()

{

bTitle=false;

bHorzLine=false;

bTable=false;

szColor="Red";

}

function chkRadio(form,value)

{

szColor=value;

}

function btnClick(form)

{

var szTxt="";

document.write("<HEAD></HEAD><B0DY>");

if(bTltle)

document.write("<H1 >Switches Checkbox and Radio></Hl>");

if(bHorzLine)

document.write("<HR>");

if(bTable)

{

document.write("<TABLE>");

szTxt="" + bTitle;

document.write("<TR><TD><FONT COLOR=" + szColor

+ ">Title:</TD><TD>" + szTxt.bold() + "</TD></TR>");

szTxt=" " + bHorzLine;

document.write("<TR><TD><FONT COLOR=" + szColor + ">HorzLine:</TD><TD>" + szTxt.bold() + "</TD></TR>");

szTxt=" " + bTable;

document.write("<TR><TD><FONT COLOR"" + szColor + ">Table:</TD><TD>" + szTxt.bold() + "</TD></TR>");

document.write("<TR><TD><FONT COLOR=" + szColor + ">Color:</TD><TD>" + szColor.bold() + "</TD></TR>");

document.write("</TABLE>");

}

else

{

document.write("<FONT COLOR=" + szColor + ">");

szTxt="" + bTitle;

document.write("<BR>Title: " + szTxt.bold());

szTxt=" " + bHorzLine;

document.write("<BR>HorzLine: " + szTxt.bold());

szTxt=" " + bTable;

document.write("<BR>Table : " + szTxt.bold());

document.write("<BR>Color: " + szColor.bold());

document.write("</FONT>");

}

if(bHorzLine)

document.write("<HR>");

document.write("</BODY>");

}

//-->

</SCRIPT>

<ТIТLЕ>Перемикачі checkbox і radio</TITLE>

</HEAD>

<BODY>

<!--

var bTitle=false;

var bHorzLine=false;

var bTable=false;

var szColor="Red" ;

//-->

</SCRIPT>

<FORM NAME="myform"> <B>Page elements:</B>

<P><INPUT TYPE="checkbox" NAME="chkTitle"

onClick="if(this.checked) {bTitle=true;}"> Show title

<BR><INPUT TYPE="checkbox" NAME="HorzLine"

onClick="if (this.checked) {bHorzLine=true;} "> Show horizontal lines

<BR><INPUT TYPE="checkbox" NAME="Table"

onClick="if(this.checked) {bTable=true;}"> Table view

<P><B>Text color :</B>

<P><INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red"

onClick="if(this.checked)

{chkRadio (this.form, this.value);}"> Red

<BR><INPUT TYPE="radio" NAME="Color" VALUE="Green"

onClick="if(this.checked)

{chkRadio(this.form, this.value);}"> Green

<BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue"

onClick="if(this.checked)

{chkRadio(this.form, this.value);)"> Blue

<TABLE>

<TR><TD><INPUT TYPE="button" NAME="btn" VALUE="Create Page "

onClick="btnClick (this.form);"></TD>

<TD><INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset"

onClick=" reset RCHBox();"></TD></TR>

</TABLE>

</FORM>

</BODY>

</HTML>

В області заголовка документа HTML визначені три функції з іменами resetRCHBox, chkRadio і btnClick.

Перша з цих функцій призначена для ініціалізації змінних, у яких зберігається поточне стан перемикачів:

function resetRCHBox()

{

bTitle=false;

bHorzLine=false;

bTable=false;

szColor="Red";

}

Функція resetRCHBox викликається в той момент, коли користувач натискає у вихідному документі кнопку Reset. Вона встановлює значення чотирьох змінних.

Змінні bTitle, bHorzLine і bTable відбивають стан - перемикачів з незалежною фіксацією відповідно Show title, Show horizontal lines і Table view. Якщо перемикач включений, у відповідної змінній зберігається значення true, якщо виключений - false.

У змінної szColor знаходиться колір тексту, обраний за допомогою групи перемикачів із залежною фіксацією Text color.

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

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

<INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset"

onClick="resetRCHBox();">

Обробка події полягає в простому виклику функції. Тепер необхідно зайнятися перемикачами з залежною фіксацією. Ці перемикачі визначені у формі в такий спосіб:

<INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red"

onClick="if(this.checked)

{chkRadio(this.form,this.value);}"> Red

<BR><INPUT TYPE="radio" NAME="Color" VALUE="Green"

onCli ck="if(this.checked)

{chkRadio(this.form, this.value);}"> Green

</BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue"

onClick="if (this.checked)

{chkRadio(this.form,this.value);}"> Blue

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

if(this.checked)

chkRadio(this.form, this.value);

}

Насамперед, оброблювач перевіряє стан перемикача, викликаючи для цей метод checked. Посилання на об'єкт, для якого викликається цей метод, тобто на перемикач, виконується за допомогою ключового слова this.

У тому випадку, коли перемикач включений, оброблювач викликає функцію chkRadio, визначену в заголовку документа в такий спосіб:

function chkRadio(form, value)

{

SzColor = value;

}

Хоча передаються функції два параметри (посилання на форму, що містить перемикач, і значення параметра VALUE поточного перемикача), використовується тільки другий параметр. Значення цього параметра, що визначає колір тексту, зберігається в змінної szColor.

Робота з перемикачами типу checkbox виконується небагато простіше:

<INPUT TYPE="checkbox" NAME="chkTitle"

onClick="if(this.checked) {bTitle=true;}"> Show title

<BR><INPUT TYPE="checkbox" NAME="HorzLine"

onClick="if(this.checked) {bHorzLine=true;}"> Show horizontal lines

<br><input TYPE="checkbox" NAME="Table"

onClick="if(this.checked) {bTable=true;}"> Table view

Коли користувач включає перемикач, оброблювач події on-Click встановлює в стан true відповідну змінну. Наприклад, при зміні стану перемикача Show title виконуються наступні дії:

if(this.checked)

{

btitie=true;

}

Останній орган керування - це кнопка Create Page. Ця кнопка запускає процес створення нового документа HTML. Для неї також визначений оброблювач події onClick:

<INPUT TYPE="button" NAME="btn" VALUE="Create Page"

onClick="btnClick(this.form);">

Цей оброблювач викликає функцію btnClick, передаючи їй як параметр посилання на форму.

Функція btnClick визначена в області заголовка документа HTML, вихідний текст якого представлений у листинге 5.2.

Усередині цієї функції визначена робоча текстова змінна szTxt із присвоєнням їй значення порожнього рядка:

var szTxt="";

Коли функція btnClick одержує керування, прежде вона формує порожню область заголовка документа HTML:

document.write ("<HEAD></HEAD><BODY>");

Далі функція аналізує вміст змінної bTitle:

if(bTitle)

document.write("<Hl>Switches Checkbox and Radio</Hl>");

Якщо перед тим як натиснути кнопку Create Page користувач уключив перемикач Show title, у змінної bTitle буде знаходитися значення true. У цьому випадку сценарій постачить формований документ заголовком "Switches Checkbox and Radio", оформивши його стилем <Н1>.

Аналогічним образом аналізується вміст змінної bHorzLine:

if(bHorzLine)

document.write ("<HR>");

Ця змінна відбиває стан перемикача Show horizontal lines. Далі функція btnClick аналізує вміст змінної bTable, що відповідає за спосіб відображення інформації про стан перемикачів у створюваному документі HTML:

if(bTable)

{

...

}

else

{

...

}

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

При формуванні першого стовпця таблиці колір тексту усередині осередку установлюється відповідно до вмісту змінної szColor:

szTxt="" + bTitle;

document.write ("<tr><td><font COLOR=" + szColor + ">Title:</TD><TD>" + szTxt.bold() + "</TD></TR>");

Ця змінна зберігає значення кольору тексту, установлене групою перемикачів із залежною фіксацією Text color.

Якщо стан перемикачів відображається у виді списку рядків, колір тексту встановлюється в такий спосіб:

document.write("<FONT COLOR=" + szColor + ">");

5.3.5. Список select

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

<SELECT МАМІ="Ім'я_списку_sе1есt" SIZE="Paзмep_cпискa" MULTIPLE

оnв1uг="Оброблювач_події"

оnсhаngе="Оброблювач_події"

onFосus="Оброблювач_події">

<OPTION VАLUЕ="Значення" SELECTED> Текст

…

<OPTION> Текст

</SELЕСТ>

Усі параметри оператора <SELECT> необов'язкові, однак для того щоб сценарій JavaScript міг працювати зі списком, необхідно вказати, принаймні, параметр NAME, що визначає ім'я списку.

Параметр SIZE задає розмір видимої частини списку в рядках.

Якщо зазначений необов'язковий параметр MULTIPLE, об'єкт select є списком перегляду, а не списком вибору.

Список може бути створений порожнім і згодом заповнений сценарієм JavaScript чи вже утримуючим один чи кілька елементів. Для визначення елементів списку призначений оператор <OPTION>.

Оператор <OPTION> може мати два параметри - VALUE і SELECTED.

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

Після оператора <OPTION> випливає текст, відображуваний у рядках списку.

Властивості об'єкта select

Нижче перераховані властивості об'єкта select, доступні сценарію JavaScript:

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

length Кількість елементів (рядків) у списку

name Значення параметра NAME

options Масив об'єктів options, що відповідають елементам масиву, заданим за допомогою оператора <OPTION>

selectedIndex Номер обраного чи елемента першого елемента серед декількох обраних (якщо зазначений параметр MULTIPLE і користувач вибрав у списку декілька елементів)

Одним із властивостей списку select є масив options. У цьому масиві зберігаються елементи списку, визначені оператором <OPTION>. Кожен елемент такого масиву є не що інше, як об'єкт із наступним набором властивостей:

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

defaultSelected Відбиває стан параметра SELECTED

index Порядковий номер (індекс) елемента списку

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

name Значення параметра NAME

selected ЗА допомогою властивості selected сценарій JavaScript може вибрати даний елемент

selectedlndex Номер обраного елемента

text Текст, зазначений після оператора <OPTION>

value Значення параметра VALUE

Методи об'єкта select

Для об'єкта select визначено два методи, що не мають параметрів, - focus і blur. Перший з цих методів дозволяє передати списку фокус введення а другий - відібрати цей фокус у списку.

Оброблювачі подій, зв'язані з об'єктом select

Как видно з формату оператора <SELECT>, розглянутого вище, для списку можна визначити три оброблювачів події: onFocus, onBlur і onChange.

Події onFocus і onBlur виникають, коли список відповідно одержує і утрачає фокус уведення. Що ж стосується події onChange, то воно створиться, коли користувач змінює стан списку, тобто вибирає в ньому інший елемент.

5.3.6. Приклади сценаріїв, що працюють зі списками

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

Робота з готовим списком

При роботі зі списками зі сценарію JavaScript частіше потрібно визначити, які елементи були обрані користувачем.

Перший з цих списків призначений для вибору кольору, а другий - розміру деякого предмета (у даному випадку не має значення якого саме).

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

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

Крім списків, у формі є дві кнопки з написами Complete і Reset. Кнопка Reset повертає списки у вихідний стан, у якому вони знаходилися відразу після відображення документа HTML. Якщо ж зробити щиглик по кнопці Complete, керування одержить сценарій JavaScript, що відобразить обраний колір і розмір на екрані у виді діалогової панелі з повідомленням.

Вихідний текст документа HTML, що містить форму і сценарій для обробки, представлений у листинге 5.3.

Листинг 5.3. Файл chaptcr3/select/select.html

<HTML>

<HEAD>

<TITLE>Pa6oтa зі списками</Т1ТLЕ>

<!--

function Complete()

{

var szElement="";

szElement="Колір: " +

Sel.ColorList.options[Sel.ColorList.selectedIndex].value +

" (" + Sel.ColorList.selectedIndex + ")" + "\nразмер: " +

Sel.SizeList.options[Sel.SizeList.selectedIndex].value +

" (" + Sel.SizeList.selectedIndex + ")";

alert(szElement);

}

//-->

</SCRIPT>

</HEAD>

<H1>Робота зі списками</Н1>

<Р>Виберіть колір:<P>

<OPTION VАLUЕ=Чорний SELECTED> Чорний

<OPTION VАLUЕ=Білий> Білий

<OPTION VАLUЕ=Червоний> Червоний

<OPTION VАLUЕ=Жовтогарячий> Жовтогарячий

<OPTION VАLUЕ=Жовтий> Жовтий

<OPTION VАLUЕ=Зелений> Зелений

<ОРТION VАLUЕ=Голубой> Голубой

<OPTION VАLUЕ=Синій> Синій

<OPTION VАLUЕ=Фіолетовий> Фіолетовий </SELECT>

<Р>Виберіть розмір:<Р>

<OPTION VALUE=Стандартний SELECTED> Стандартний

<OPTION VALUE=Великий> Великий

<OPTION VАLUЕ=Середній> Середній

<OPTION VАLUЕ=Маленький> Маленький

<OPTION VALUE=Дуже маленький> Дуже маленький

</SELECT>

<Р>

<TABLE>

<TR><TD><INPUT TYPE="button" VALUE="Complete"

onClick="Complete();"></TD>

</TABLE>

</FORM>

</BODY>

</HTML>

Як видно з цього листинга, у документі визначена форма з ім'ям Sel, що містить списки ColorList і Size List. В другому списку заданий розмір видимої частини вказівкою в операторі <SELECT> параметра SIZE зі значенням, рівним трьом. У результаті, у видимій частині списку відображається три елементи.

Для кнопки з написом Complete визначений оброблювач події onClick. Коли користувач робить щиглика мишею по цій кнопці, викликається функція Complete, що визначає обрані елементи для обох списків і відображає їхнього значення в діалоговій панелі за допомогою функції alert:

szElement="Колір: " +

Sel.ColorList.options[Sel.ColorList.selectedIndex].value +

" (" + Sel.ColorList.selectedIndex + ")" +

"\nразмер: " + Sel.SizeList.options[Sel.SizeList.selectedIndex].value +

" (" + Sel.SizeList.selectedIndex + ")";

alert(szElement);

При цьому, насамперед визначаються номери елементів, обраних зі списків. Ці номери рівні відповідно Sel.ColorList.selectedIndex (для списку квітів) і Sel.SizeList.selectedIndex (для списку розмірів).

Далі ці номери використовуються як індекси в масивах options відповідних списків, що містять властивості елементів списків. Інтерес представляє властивість value, за допомогою якого можна визначити значення для обраних елементів списків. Кожен елемент наших списків має таке значення, задане за допомогою параметра VALUE оператора <OPTION>.

Динамічне заповнення списку

Сценарій JavaScript може змінювати список, додаючи в нього нові елементи. Приклад такого сценарію уже приводився в розділі попередньої глави. Раніше створювався в документі HTML порожній список з ім'ям ListOfLinks розташуванням его у формі Sel:

</SELECT>

<INPUT TYPE="button" VALUE="Jump!"

onClick="urlJump();">

</FORM>

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

elem = new Array();

Заповнення цього масиву виконувалося в циклі, причому для створення елемента масиву викликався конструктор Option із завданням для нього чотири параметри:

elem[i] = new Option("Elem" + i, i, false, false);

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

Змінна i - це параметр циклу, що змінює своє значення від нуля до кількості елементів, що додаються в список.

Після того как елемент списку створений як об'єкт класу option, его потрібно записати у відповідний елемент масиву options:

Sel.ListOfLinks.options[i] = elem[i];

Sel.ListOfLinks.options[i].text = document.links[i];

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

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

function urIJump()

{

var szNewURL="";

szNewURL=document.links[Sel.ListOfLinks.selectedIndex];

window.location.href=szNewURL;

}

Спочатку визначається номер обраного елемента як значення Sel.ListOfLinks.selectedIndex. Потім це значення використовується як індекс у масиві document.links, з якого в циклі відбувалося заповнення нашого списку.

5.3.7. Однорядкове поле text

Часто у формах, розміщених на сторінках серверів Web, зустрічаються однорядкові поля, призначені для введення і редагування тексту. Для того щоб умонтувати таке поле у форму, необхідно використовувати оператор <INPUT> з параметром TYPE, рівним значенню "text":

<INPUT TYPE="text"

NAME="Ім'я_полючи_ text"

VALUE="Значення"

SIZE=Paзмep_полючи

оnвlur="Оброблювач_події"

оnChаnge="Оброблювач_події"

оnFocus="Оброблювач події"

onSelect="Оброблювач_події">

Додатково можна вказати параметри NAME, VALUE і SIZE, а також чотири оброблювачі подій, створюваних текстовим полем.

Параметр NAME дозволяє задати ім'я полючи, необхідне для звертання до властивостей об'єкта text, що відповідає цьому полю.

За допомогою параметра VALUE можна записати в поле довільний текстовий рядок. Цей рядок буде відображатися відразу після завантаження документа HTML у вікно браузера.

Параметр SIZE визначає розмір (ширину) текстового поля в символах. Це розмір видимої частини поля. Він не обмежує довжину рядка, яку можна ввести в даному полі.

Властивості об'єкта text

Сценаріям JavaScript доступні три властивості поля редагування как об'єкта класу text:

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

defaultValue Відбиває стан параметра VALUE

name Значення параметра NAME

value Поточне вміст поля редагування

Відразу після відображення нуля редагування властивості defaultValue і value зберігають однакові рядки. Коли користувач редагує текст, усі зміни відбиваються у властивості value.

Змінюючи уміст властивості value, сценарій JavnSnipt може змінити вміст поля редагування.

Методи об'єкта text

Для об'єкта text визначені методи focus, blur і select, що не мають параметрів. За допомогою методу focus сценарій JavaScript може передати фокус полю редагування, а за допомогою методу blur - відібрати фокус у цього поля. Виклик методу select приводить до виділення вмісту поля редагування.

Оброблювачі подій об'єкта text

Оброблювачі подій викликаються в наступних випадках:№

Оброблювач Коли викликається

onFocus Поле редагування одержує фокус уведення

onBlur Поле редагування утрачає фокус уведення

onChange Змінюється вміст поля редагування

onSelect Виділяється вміст поля редагування

5.3.8. Перевірка анкети

Методика роботи з текстовими полями в сценаріях JavaScript буде розглянута на прикладі документа HTML з формою для введення анкети.

Приведений сценарій виконує нескладну обробку інформації, що вводиться в текстових полях цієї форми. Зокрема, сценарій перетворює символи прізвища в прописні. Якщо указати вік, менший 18 років, сценарій зробить його рівним нулю.

Якщо після заповнення анкети натиснути кнопку Complete, на екрані з'явиться діалогова панель, що відображає вміст окремих полів форми.

Кнопка Reset установлює поля у вихідний стан. Вихідний текст документа HTML з описаною вище формою і сценарієм JavaScript ви знайдете в листинге 5.4.

Листинг 5.4. Файл chapter3/text/text.html

<HTML>

<HEAD>

<Т1ТLЕ>Робота з текстовими полями</Т1ТLЕ>

<!--

function Complete()

{

var szElement="";

szе1еmеnt="Прізвище: " + Sel.family.value + "\nимя: " + Sel.Name.value + "\nтелефон: " + Sel.PhoneNumber.value + "\nвозраст: " + Sel.Age.value;

alert(szElement);

}

function CheckAge(age)

{

if(age < 18)

else

return age;

//-і>

</SCRIPT>

</НЕА>

<H1>3аполните анкету</Н1>

<TABLE>

<ТR><ТD><У>Прізвище:</У></ТD><ТD><INРUТ TYPE="text"

NAME="family"

onChange="this.value=this.value.toUpperCase()"

SIZE="20"></TD></TR>

<ТR><ТD><У>Ім'я:</У></ТD><ТD><INРUТ TYPE="text"

NAME="Name" SIZE="20"></TD></TR>

<ТR><ТD><У>Телефон:</У></ТD><ТD><INРUТ TYPE="text"

NAME="PhoneNumber" SIZE="10"></TD></TR>

<TR><TD><B>Boзpacт:</B></TD><TD><INPUT TYPE="text"

NAME="Age" VALUE="18" SIZE="4"

onChange="this.value=CheckAge(this.value)"

onFocus="this.select()"></TD></TR>

<P>

<TABLE>

<TR><TD><INPUT TYPE="button" VALUE="Complete"

onClick="Complete();"></TD>

</TABLE>

</FORM>

</BODY>

</HTML>

Для перетворення символів прізвища в прописні для поля family визначений оброблювач події onChange:

onChange="this.value=this.value.toUpperCase()"

Після внесення змін у вміст полючи цей оброблювач викликає метод toUpperCase, визначений у класі рядків. Перетворене значення записується знову у властивість this.value.

Поле Age має два оброблювачів для подій: onChange і onFocus:

onChange="this.value=CheckAge(this.value)"

onFocus="this.select()"

Перший з цих оброблювачів викликає функцію перевірки віку CheckAge, передаючи їй значення з полючи Age. Повернуте цією функцією значення знову записується в те ж саме поле.

Функція CheckAge виглядає дуже просто:

function CheckAge(age)

{

if(age < 18)

return "0";

else

return age;

}

Якщо їй передається рядок, що містить число, менший 18, вона повертає нульове значення. У тому випадку, коли число більше 18 чи коли в цьому полі знаходиться нечислове значення, функція CheckAge повертає передану їй рядок без змін.

Оброблювач події onFocus викликає метод select, що виділяє вміст полючи редагування. Дія цього оброблювача можна побачити, натискаючи клавішу табуляції доти, поки фокус уведення не буде переданий полю Age.

Кнопку Complete користувач натискає після заповнення анкети. Для неї визначений оброблювач події onClick:

<INPUT TYPE="button" VALUE="Complete"

onClick="Complete();">

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

function Complete()

{

var szElement="";

szElement="Фaмилия: " + Sel.family.value + "\nимя: " + Sel.Name.value + "\nтелефон: " + Sel.PhoneNumber.value + "\nвозраст: " + Sel.Age.value;

alert(szElement);

}

Варто звернути увагу на те, як адресуються властивості полів форми вказівкою імені форми, імен полів і імені властивості value.

5.3.9.Багатострокове поле textarea

У тих випадках, текст, що редагується, повинний займати декілька рядків, у формі між операторами <TEXTAREA> і </TEXTAREA> розташовують багатострокове текстове поле:

<TЕХТАRЕА

NAМЕ="Ім'я_полючи_tехtагеа"

ROWS="Кількість_рядків"

СОLS="Кількість_стовпців"

WRAP="Режим_згортки_тексту"

onBlur="Оброблювач_події"

onсhаngе="Оброблювач_події"

onFocus="Оброблювач_події"

onSelect="Оброблювач_події">

...

Відображуваний текст

…

</TEXTAREA>

Тут за допомогою параметра NAME треба вказати ім'я полючи. Воно потрібно для того, щоб сценарій JavaScript міг звертатися до властивостей і методів цього полючи.

Параметри ROWS і COLS визначають видимий розмір багатострокового поля редагування, задаючи соответственно кількість рядків і стовпців (кількість символів, що можуть поміститися в одному рядку).

Параметр WRAP задає спосіб згортки тексту і може мати одне з трьох наступних значень:

Значення Спосіб згортки тексту

off Згортка виключена, рядки відображаються так, як уводяться

virtual Рядки звертаються тільки при відображенні у вікні редагування, але передаються розширенню сервера Web і сценарію JavaScript точно в такому виді, у якому вводяться

physical При згортку в переданий текст записуються символи нового рядка

Методи об'єкта textarea

Для об'єкта textarea визначені такі ж методи, що і для об'єкта text. Це методи focus, blur і select, що не мають параметрів.

За допомогою методу focus сценарій JavaScript може передати фокус полю редагування, а за допомогою методу blur - відібрати фокус у цього поля.

Виклик методу select приводить до виділення вмісту багатострокового поля редагування.

Оброблювачі подій об'єкта textarea

Оброблювачі подій викликаються в наступних випадках:

Оброблювач Коли викликається

onFocus Поле редагування одержує фокус уведення

onBlur Поле редагування утрачає фокус уведення

onChange Змінюється вміст поля редагування

onSelect Виділяється вміст поля редагування

5.3.10. Приклад сценарію, що заповнює поле textarea

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

Якщо включити перемикач "Подяка", сценарій автоматично запише в поле редагування дату і час підготовки відкликання, а також текст позитивного відкликання. До цього тексту вам залишиться додати тільки підпис.

Для відправлення відкликання натисніть кнопку Complete. У результаті на екрані з'явиться діалогова панель з текстом позитивного відкликання.

Для того щоб повідомити виготовлювачу програми про помилки, варто включити перемикач "Проблеми". Відразу після цей сценарій запише в многострочное поле текст відповідного повідомлення. Цей текст треба буде відредагувати і доповнити, описавши, наприклад, зовнішні прояви виявленої помилки.

Натискання кнопки Complete дозволить побачити текст повідомлення.

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

Листинг 5.5. Файл chapter3/textarea/textarea.html

<HTML>

<HEAD>

<TITLE>Pa6oтa із багатостроковим текстовим полем</ТIТLЕ>

var szOK = "Спасибі!\nваша програма працює без помилок.";

var szTrouble = "НА жаль, з вашою програмою в наc виникли проблеми.";

var szProbList = "\nсерийный номер програми:

ХХХХХХ\nдата покупки: ХХ-ХХ-ХХ";

function getDate()

{

var szDate = "";

szDate = new Date();

return szDate.toLocaleString() + "\n";

}

function chkRadio(form,value)

{

if(value == "Thanks")

Sel.Comment.value = getDatet) + szOK;

else

Sel.Comment.value = getDate() + szTrouble + szProbList;

}

function init()

{

Sel.Comment.value = getDate() + szOK;

}

function Complete()

{

szMsg = Sel.Comment.value;

alert(szMsg);

}

//-->

</SCRIPT>

</HEAD>

<Н1>Надішліть ваше відкликання</Н1>

<P><INPUT TYPE="radio" NAME="TextSelect" CHECKED

VALUE="Thanks"

onClick="if(this.checked)

{chkRadio(this.form,this.value);}"> Подяка

<BR><INPUT TYPE="radio" NAME="TextSelect"

VALUE="Trouble"

onClick="if(this.checked)

{chkRadio(this.form,this.value);}"> Проблеми

<P><TEXTAREA NAME="Comment"

ROWS="5" COLS="25" WRAP="physical">

</TEXTAREA>

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

onClick="Complete();">

</FORM>

<!--

init();

//-->

</SCRIPT>

</BODY>

</HTML>

Варто звернути увагу на те, що у формі багатострокове поле редагування тексту textarea створено порожнім:

<TEXTAREA NAME="Comment"

ROWS="5" COLS="25" WRAP="physical">

</TEXTAREA>

Це поле називається "Comment", має п'ять рядків, у яких розміщається до 25 символів, і режим згортки тексту physical, що припускає додавання символів нового рядка, що розділяють окремі рядки введеного тексту.

ЯкКак відбувається заповнення цього поля?

У самому кінці області тіла документа HTML, обмеженого операторами <BODY> і </BODY>, уставлений виклик функції init:

<!--

init();

//-->

</SCRIPT>

Ця функція викликається після завершення завантаження тіла документа і виконує початкове заповнення многострочного поля редагування textarea:

Sel.Comment.value = getDate() + szOK;

Рядок, що записується в це поле, утвориться шляхом додавання рядка поточної дати, отриманої від функції getDate (ця функція визначена в сценарії), з рядком szOK, що містить текст позитивного відкликання.

Функція getDate визначена в такий спосіб:

function getDate()

{

var szDate = "";

szDate = new Date();

return szDate.toLocaleString () + "\n";

}

У цій функції спочатку створюється об'єкт класу Data, а потім викликається для цього об'єкта метод toLocaleString, що повертає текстовий рядок дати.

У верхній частині форми знаходяться два перемикачі з залежною фіксацією. За допомогою цих перемикачів користувач може вибрати вид відкликання ( чиподяка повідомлення про помилку):

<INPUT TYPE="radio" NAME="TextSelect" CHECKED VALUE="Thanks" onClick="if(this.checked)

{chkRadio(this.form,this.value);}"> Подяка

<BR><INPUT TYPE="radio" NAME="TextSelect" VALUE="Trouble"

onClick="if(this.checked)

{chkRadio(this.form,this.value);}"> Проблеми

Обидва перемикачі відносяться до однієї групи і тому мають однакове значення параметра NAME. Для першого з них додатково зазначений параметр CHECKED, тому за замовчуванням він знаходиться у включеному стані (тут передбачається, що кількість позитивних відкликань буде перевищувати кількість повідомлень про помилки).

Кожний з перемикачів має оброблювач події onClick, визначений у такий спосіб:

if(this.checked)

{

chkRadio(this.form,this.value);

}

При зміні стану перемикача викликається функція chkRadio. Ця функція перевіряє ім'я включеного перемикача і заповнює поле багатострокового редактора textarea відповідним повідомленням:

function chkRadio(form,value) {

if(value == "Thanks")

Sel.Comment.value = getDate () + szOK;

else

Sel.Comment.value = getDate() + szTroubie + szProbList;

}

Функція chkRadio комбінує тексти повідомлень з поточної дати і заздалегідь проініціалізованих рядків szOK, szTroubie і szProbList.

Тепер про те, як сценарій одержує текст із поля редагування і відображає його в діалоговій панелі.

Для кнопки Complete ми визначили оброблювач події onClick:

<INPUT TYPE="button" VALUE-="Complete"

onClick="Complete();">

Цей оброблювач викликає функцію Complete, що відображає підготовлене відкликання на екрані:

function Complete()

{

szMsg = Sel.Comment.value;

alert(szMsg);

}

Тут текст витягається з поля textarea яккак значення властивості value для відповідного об'єкта, а потім відображається на екрані за допомогою убудованої функції alert.

5.3.11. Однорядкове поле password

Для введення такої інформації, як паролі, у формах розміщають однорядкові поля редагування типу password:

<INPUT TYPE="password"

NАМЕ="Ім'я_полючи_tехt"

VALUE="Значення"

SIZE= Розмір_поля>

Для полючи password можна вказати параметри NAME, VALUE і SIZE. Це поле не може мати оброблювачів подій.

Параметр NAME дозволяє задати ім'я полючи, яких необхідно для звертання до властивостей об'єкта password, що відповідає цьому полю.

За допомогою параметра VALUE можна записати в поле довільний текстовий рядок.

Параметр SIZE визначає розмір (ширину) текстового полючи в символах. Це розмір видимої частини полючи. Він не обмежує довжину рядка, яку можна ввести в даному полі.

Поле password схоже на поле text, розглянуте раніше. Головна відмінність полягає в тім, що символи введеного в цьому полі тексту заміняються на зірочки.

Властивості об'єкта password

Сценаріям JavaScript доступні три властивості поля редагування password:

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

defaultValue Відбиває стан параметра VALUE

name Значення параметра NAME

value Поточне вміст поля редагування

Так само, як і для поля text, відразу після відображення поля редагування властивості defaultValue і value зберігають однакові рядки. Коли користувач редагує текст, усі зміни відбиваються у властивості value.

Змінюючи уміст властивості value, сценарій може змінити вміст поля редагування типу password.

Методи об'єкта password

Для об'єкта password визначені методи focus, blur і select, що не мають параметрів.

За допомогою методу focus сценарій JavaScript може передати фокус полю редагування, а за допомогою методу blur - відібрати фокус у цього поля. Виклик методу select приводить до виділення вмісту поля редагування.

5.3.12. Введення ідентифікатора і пароля

Як практичний приклад застосування сценарію JavaScript для обробки інформації з полів text і password приведений документ HTML, призначений для реєстрації користувачів.

У формі реєстрації новий користувач повинний увести свій ідентифікатор, а також задати пароль (5.15).

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

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

Якщо введені паролі ідентичні, то після натискання на кнопку Соmplete користувач побачить на екрані діалогову панель із введеним ідентифікатором н паролем.

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

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

Листинг 5.6. Файл chapter3/password/password.html

<HTML>

<HEAD>

<ТIТLЕ>Введення і перевірка пароля</ТIТLЕ>

<!--

function Complete()

{

if(Sel.pwd.value != Sel.pwdl.value)

alert("Помилка при введенні пароля\спробуйте ще раз");

else

{

var szId="";

var szPwd="";

szId = Sel.id.value;

szPwd = Sel.pwd.valued;

alert("Реєстрація виконана : \n" + "ID=" + szId + "\nPassword=" + szPwd) ;

}

//-->

</SCRIPT>

</HEAD>

<Н1>Реєстрація</Н1>

<TABLE>

<ТR><ТD><У>Ідентифікатор:</У></ТD><ТD>< INPUT

TYPE="text" NAME="id"

onChange="this.value=this.value.toUpperCase()"

SIZE="20" ></TD></TR>

<ТR><ТD><У>Пароль : </BX/TD><TD><INPUT TYPE="password"

NAME="pwd" SIZE="20"></TD></TR>

<ТR><ТD><У>Перевірка пароля: </BX/TD><TD><INPUT TYPE="password"

NAME="pwdl" SIZE="20"></TD></TR>

</TABLE>

<TR><TD><INPUT TYPE="button" VALUE="Complete"

onClick="Complete();"></TD>

</TABLE>

</FORM>

</BODY>

</HTML>

Перетворення символів ідентифікатора користувача виконує оброблювач події onChange, визначений для поля id типу text:

<INPUT TYPE="text" NAME="id"

onChange="this.value=this.value.toUpperCase()" SIZE="20">

Це перетворення виконує функція toUpperCase, що вже користалися раніш.

Що ж стосується перевірки пароля, то цим займається функція Complete, визначена як оброблювача події onClick для однойменної кнопки, призначеної для посилки заповненої форми.

От вихідний текст цієї функції:

function Complete()

{

if(Sel.pwd.value != Sel.pwdl.value)

alert("Помилка при введенні пароля\nпопробуйте ще раз");

else

{

var szld="";

var szPwd="";

szId = Sel.id.value;

szPwd = Sel.pwd.valued;

alert("Реєстрація виконана:\n" + "ID=" + szld + "\nPassword=" + szPwd);

}

Якщо користувач увів різні паролі, значення властивостей Sel.pwd.value і Sel.pwdl.value не збігаються. У цьому випадку функція Complete відображає діалогову панель з повідомленням про помилку.

При збігу паролів функція Complete витягає значення ідентифікатора користувача Sel.id.value і его пароля Sel.pwd.value, а потім відображає їх на екрані.

5.4. Перевірка заповнення форми

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

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

<INPUT TYPE="submit"

NАМЕ="Ім'я_кнопки_submit"

VALUE="Teкст_на_поверхні_кнопки"

onClick="Оброблювач_події">

Параметри NAME і VALUE тут мають таке ж призначення, що вони мають і для вивченої раніше кнопки тину button.

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

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

Найпростіший вихід з цієї ситуації - заміна кнопки типу submit на звичайну кнопку button. З цією кнопкою повинний бути зв'язаний сценарій JavaScript, що перевіряє дані, уведені користувачем у полючи форми, і посилає їх серверу Web явно.

У цьому розділі приведені вихідні тексти документа HTML, призначеного для введення ідентифікатора користувача і пароля (листинг 5.7). Цей документ аналогічний приведеному в попередньому розділі. У прикладі за допомогою сценарію JavaScript не тільки перевіряється пароль, але і відправляються дані розширенню сервера Web, якщо пароль уведений правильно.

Листинг 5.7. Файл chapter3/validation/validation.html

<HTML>

<HEAD>

<ТIТLЕ>Введення і перевірка пароля</ТIТLЕ>

<!--

function Complete()

{

if(Sel.pwd.value != Sel.pwdl.value)

alert("Помилка при введенні пароля\nПопробуйте ще раз");

else

var szld="";

var szPwd="";

szld = Sel.id.value;

szPwd = Sel.pwd.value;

alert("Реєстрація виконана: \n" + "ID=" + szld + "\nPassword=" + szPwd);

document.forms[0].submit();

}

//-->

</SCRIPT>

</HEAD>

<Н1>Реєстрація</Н1>

<FORM METHOD=POST NAME="Sel"

ACTION="http://frolov/scripts/controls .exe">

<TABLE>

<ТR><ТD><У>Ідентифікатор : </B></TD><TD>

<INPUT TYPE="text" NAME="id"

onChange="this.value=this.value.toUpperCase()"

SIZE="20" ></TD></TR>

<ТR><ТD><У>Пароль:</b></td><td><input TYPE="password" NAME="pwd" SIZE="20"></TD></TR>

<ТR><ТD><У>Перевірка пароля: </B></TD><TD><INPUT TYPE="password"

NAME="pwdl" SIZE="20"></TD></TR>

</TABLE>

<P>

<TABLE>

<TR><TD><INPUT TYPE="button" VALUE="Complete"

onClick="Complete();"></TD>

</TABLE>

</FORM>

</BODY>

</HTML>

При визначенні форми для оператора <FROM> ми вказали параметр ACTION:

<FORM METHOD=POST NAME="Sel"

ACTION="http://frolov/scripts/controls.exe">

Цей параметр задає шлях до завантажувального файлу програми CGI, розташованому в каталозі сценаріїв сервера Web. Такий каталог створюється адміністратором сервера Web. За допомогою спеціальної програми адміністратор вказує права доступу до цього каталогу, що дозволяють виконання розташованих там завантажувальних файлів CGI і бібліотек динамічного компонування DLL додатків ISAPI. Докладно з цим матеріалом можна познайомитися в останній главі.

Функція Complete, що викликається при натисканні на однойменну кнопку, перевіряє паролі, введені в полях pwd і pwdl. Якщо ці паролі збігаються, сценарій посилає дані серверу за допомогою методу submit. визначеного у формі:

document.forms [0].submit();

Тут робиться звертання до першого (і єдиної) формі, визначеної в документі HTML.

Програма CGI з ім'ям control.ехе відображає отримані дані в динамічно створюваному документі HTML.

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

Вихідний текст програми CGI, з яким працює наш документ Html, показаний у листинге 5.8.

Листинr 5.8. Файл chapter3/validation/controls/controls.c

// ==============================================

// Програма CGI controls.с

//Одержання даних від форми і їхнє відображення в документі HTML,

//створюваному динамічно

// (С) Фролов А.В., 1997, 1998

// E-mail: frolov@glas.apc.org

// WWW: http://www.glasnet.ru/~frolov

// чи

// http://www.dials-ccas.ru/frolov

#include <stdio.h>

#include <stdlib.h>

#include <string.h>

//Прототипи функцій перекодування

void DecodeStr(char *szString);

char DecodeHex(char *str);

//----------------------------------------------------

// Функція main

// Крапка входу програми CGI

// ---------------------------------------------------

void main(int argc, char *argv[])

{

int lSize;

FILE * fileReceived;

char * szMethod;

char szBuf[8196];

char szSrcBuf[8196] ;

char * szPtr;

char * szParam;

// Висновок заголовка HTTP і розділового рядка

printf("Content-type: text/html\n\n");

// Висновок початкового фрагмента документа HTML,

// формованого динамічно

printf("<!DOCTYPE HTML PUBLIC"

" \"-//W3C//DTD HTML 3.2//EN\">");

printf("<HTML><HEAD><TITLE>User Registration"

"</TITLE></HEAD><BODY BGCOLOR=#FFFFFF>");

// Визначаємо метод передачі даних

szMethod = getenv("REQUEST_METHOD");

// Обробка методу POST

if(!strcmp(szMethod, "POST"))

// Визначаємо розмір даних, отриманих від браузера

// при передачі даних з полів форми

lSize = atoi(getenv("CONTENT_LENGTH"));

// Читаємо ці дані в буфер szBuf з

// стандартного потоку введення STDIN

fread(szBuf, lSize, l, stdin);

// Створюємо файл, у который будуть записані

// прийняті дані

fileReceived = fopen("received.dat", "w");

// Виконуємо запис прийнятих даних

fwrite(szBuf, lSize, l, fileReceived);

// Закриваємо файл прийнятих даних

fclose(fileReceived);

// Відображаємо значення деяких змінні середовища

printf("<Н2>Змінні середовища</Н2>");

// Метод доступу

printf("REQUEST_METHOD = %s", getenv("REQUEST_METHOD"));

// Розмір отриманих даних у байтах

printf("<BR>CONTENT_LENGTH = %ld", ISize);

// Тип отриманих даних

printf("<BR>CONTENT_TYPE = %s", getenv("CONTENT_TYPE"));

// Закриваємо буфер даних двоичным нулем,

// перетворюючи його в такий спосіб у рядок

szBuf[lSize] = '\0';

// Робимо копію прийнятих даних у буфер

szSrcBuf strcpy(szSrcBuf, szBuf);

// Відображаємо прийняті дані без обробки

printf("<Н2>Прийняті дані</Н2>");

printf("<P>%s", szSrcBuf);

// Виконуємо перекодування прийнятих даних

DecodeStr(szSrcBuf);

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

printf("<Н2>Дані після перекодування</Н2>");

printf("<P>%s", szSrcBuf);

// Виводимо список значень полів форми

printf("<Н2>Список значень полів</Н2>");

// Дописуємо в кінець буфера прийнятих даних

// символ &, що використовується в якості

// роздільника значень полів

szBuf[lSize] = '&';

szBuf[lSize + 1] = '\0';

// Цикл по полях форми

for(szParam = szBuf;;)

{

// Шукаємо черговий роздільник

szPtr = strchr(szParam, '&');

// Якщо він знайдений, раскодируем рядок параметрів

if(szPtr != NULL)

{

*szPtr = '\0' ;

DecodeStr(szParam);

// Виводимо в документ значення параметра

printf("%s<BR>", szParam);

// Переходимо до наступного параметру

szParam = szPtr + 1;

// Якщо досягнуть кінець буфера, завершуємо цикл

if(szParam >= (szBuf + lSize))

break;

}

else

break;

}

// Виводимо завершальний фрагмент документа HTML

printf("</BODY></HTML>");

return;

}

// -і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і

// Функція DecodeStr

// Раскодирование рядка з кодування URL

void DecodeStr(char *szString)

{

int src;

int dst;

char ch;

// Цикл по рядку

for(src=0, dst=0; szString[src]; src++, dst++)

{

// Одержуємо черговий символ перекодируемой рядка

ch = szString[src];

// Заміняємо символ "+" на пробіл

ch = (ch =='+') ? ' ' : ch;

// Зберігаємо результат

szString[dst] = ch;

// Обробка шестнадцатеричных кодів виду "%хх"

if(ch == '%')

{

// Виконуємо перетворення рядка "%хх"

// у код символу

szString[dst] = DecodeHex(&szString[src + 1]);

src += 2;

}

// Закриваємо рядок двоичным нулем

szString[dst] = '\0';

// -і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і-і

// Функція DecodeHex

// Раскодирование рядка "%хх"

char DecodeHex(char *str)

{

char ch;

// Обробляємо старший розряд

if(str[O] >= 'A')

ch = ((str[0] & Oxdf) - 'A') + 10;

else

ch = str[O] - '0';

// Зрушуємо його вліво на 4 біти

ch <<= 4;

// Обробляємо молодший розряд і складаємо

// його зі старшим

if(str[1] >= 'A')

ch += ((str[1] & Oxdf) - 'А') + 10;

else

ch += str[l] - '0';

// Повертаємо результат перекодування

return ch;

}

Це спрощений варіант програми CGI, що описана в попередніх главах..

5.5. Шістнадцятирічний калькулятор

Мовою сценаріїв JavaScript можна складати досить великі програми. Як приклад приведений вихідний текст сценарію, що виконує функції шістнадцятирічного калькулятора.

Калькулятор створений у документі HTML як форма з двома текстовими полями і кнопками, розташованими в осередках таблиці.

За допомогою кнопок 0 - F можна вводити шестнадцатеричные числа, що будуть відображатися в текстовому полі Hex. У поле Dec знаходиться десяткове значення введеного шістнадцятирічного чи числа результату обчислень.

Кнопки +, -, * і / призначені відповідно для виконання операцій додавання, вирахування, множення і розподіли. За допомогою кнопки Enter можна одержати результат обчислень. Кнопка СЕ дозволяє стерти поточне введене число, а кнопка З - скинути проміжний результат обчислень і поточне введене число.

Вихідний текст документа HTML з калькулятором представлений у листинге З.9.

Листинг 5.9. Файл chapter3/hexcalc/hexcalc.html

<HTML>

<head>

<TITLE>Hexadecimal calculator</TITLE>

<!--

var total = 0;

var lastOperation = "+";

var newnurnber = true;

function dec2hex(nDec)

{

var szHexTable = "0123456789ABCDEF";

var szResult = "";

var szBuf = "";

var nRem = 0;

var bNegative = false;

if(nDec < 0)

{

bNegative = true;

nDec = -nDec;

}

nTmp = nDec;

while(true)

{

nRem = nTmp % 16;

nTmp = nTmp / 16;

if(Math.floor(nTmp) < 16)

break;

szBuf = szHexTable.charAt(nRem);

szResult = szBuf.concat(szResult);

}

szBuf = szHexTable.charAt(nRem);

szResult = szBuf.concat(szResult);

if(Math.floor(nTmp) != 0)

{

szBuf=szHexTable.charAt(Math.floor(nTmp));

szResult = szBuf.concat(szResult);

}

if(bNegative == true)

return ("-" + szResult);

else

return szResult;

}

function putNumber(btn, form)

{

var szOld = "";

var szNew = "";

if(newnumber)

{

form.displayHex.value = "";

form.displayDec.value = "";

newnumber = false;

}

szOld = form.displayHex.value;

szNew = szOld.concat(btn.name) ;

nCurrent = eval("0x" + szNew) ;

form.displayHex.value = szNew;

form.displayDec.value = nCurrent;

}

function clearNumber(form)

{

form.displayHex.value = "0";

form.displayDec.value = "0";

newnumber = true;

}

function clearAll(form)

{

total = 0;

lastOperation = "+";

clearNumber(form);

}

function plusOp(form)

{

var result; result = total + " " + lastOperation + " " + form.displayDec.value; total = eval(result);

lastOperation = "+";

form.displayHex.value = dec2hex(total);

form.displayDec.value = total;

newnumber = true;

function minusOp(form)

{

var result;

result = total + " " + lastOperation + " " + form.displayDec.value;

total = eval(result);

lastOperation = "-";

form.displayHex.value = dec2hex (total);

form.displayDec.value = total;

newnumber = true;

}

function mulOp(form)

{

var result;

result = total + " " + lastOperation + " " + form.dispiayDec.value;

total = eval(result);

lastOperation = "*";

form.displayHex.value = dec2hex(total);

form.dispiayDec.value = total;

newnumber = true;

}

function divOp(form)

{

var result;

result = total + " " + lastOperation + " " + form.displayDec.value;

total = eval(result);

lastOperation = "/";

form.displayHex.value = dec2hex(total);

form.dispiayDec.value = total;

newnumber = true;

}

function getResult(form)

{

var result; result = total + lastOperation + eval("Ox" + form.displayHex.value);

total = eval(result);

form.displayHex.value = dec2hex (total);

form.displayDec.value = total;

newnumber = true;

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<TR>

</TR>

<TR>

<TD COLSPAN=3><INPUT TYPE=text NAME="displayDec" VАLUЕ="0"

onFocus="this.blur();"></TD>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Найбільш цікаві моменти в листинге наступні:

Коли калькулятор відображається в перший раз, у текстових полях displayHex і displayDec, призначених відповідно для відображення чисел у шестнадцатеричном і десятковому виді, знаходяться нульові значення:

<INPUT TYPE=text NAME="displayHex" VALUE="0"

onFocus="this.blur();">

<INPUT TYPE=text NAME="displayDec" VALUE="0"

onFocus="this.blur();">

Ці значення встановлюються параметром VALUE.

Для текстових полів displayHex і displayDec передбачений оброблювач події onFocus. Цей оброблювач одержує керування, коли користувач передасть полю фокус уведення. Задача оброблювача полягає в тім, щоб знову відібрати фокус уведення, запобігши безпосереднє редагування числа користувачем.

З кожної з кнопок, зв'язаної з уведенням шестнадцатеричного числа, зв'язаний оброблювач події onClick, що викликає функцію putNumber, наприклад:

<INPUT TYPE="button" NAME="F" VALUE=" F "

onClick="putNumber (this, this.form);">

Цієї функції передаються два параметри - натиснута кнопка (яккак об'єкт класу button) і форма, у якій ця кнопка знаходиться.

Задача функції putNumber - уведення числа і его відображення в двох текстових полях, розташованих у верхній частині калькулятора:

function putNumber(btn,form)

{

var szOld = "";

var szNew = "";

if(newnumber)

{

form.displayHex.value = "";

form.displayDec.value = "";

newnumber = false;

}

szOld = form.displayHex.value;

SzNew = szOld.concat(btn.name);

nCurrent = eval("0x" + szNew);

form.displayHex.value = szKew;

form.displayDec.value = nCurrent;

На самому початку функція putNumber перевіряє двійкову змінну newnumber. Якщо значення цієї змінний дорівнює true, користувач уводить першу цифру нового числа. У цьому випадку функція putNumber скидає вміст текстових полів displayHex і displayDec, а також установлює значення newnumber, рівне false.

Далі функція додає введену користувачем цифру попереду змінної szOld, рівної поточному значенню з полючи displayHex. При цьому вона викликає метод concat із класу String, призначений для злиття (конкатенації) рядків.

На наступному етапі до введеного шістнадцятирічному числу додається префікс "Ох", після чого відбувається обчислення поточного значення функцією eval. Ця функція намагається інтерпретувати текстовий рядок, переданий їй як параметр, як арифметичне вираження, повертаючи результат інтерпретації у виді чисельного значення. Цей результат зберігається і змінної nCurrent і відображається в текстовому полі displayDec (вихідне шестнадцатеричное число відображається в поле displayHex).

Якщо після введення числа користувач натискає одну з чотирьох кнопок призначених для виконання операцій додавання, вирахування, множення і розподіли, викликаються функції, призначені для цих кнопок в оброблювачі події onClick. Це функції plusOp (додавання), minusOp (вирахування), mulOp (множення) і divOp (розподіл).

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

function plusOp(form)

{

var result;

result = total + " " + lastOperation + " " + form.displayDec.value;

total = eval(result);

lastOperation = "+";

form.displayHex.value = dec2hex(total);

form.displayDec.value = total;

newnumber = true;

}

Тут глобальна змінна total, що має початкове значення, рівне нулю, використовується для збереження проміжних результатів обчислень. Вона складається з пробілом і текстовим рядком lastOperation. потім ще з одним пробілом і, нарешті, з рядком десяткового представлення введеного числа, витягнутого з полючи displayDec.

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

За допомогою функції eval функція plusOp обчислює результат операції і записує його в змінну total. Потім у змінну lastOperation записується код операції додавання - рядок "+".

На наступному етапі функція plusOp перетворює значення total за допомогою функції dec2hex і відображає результат у шістнадцятирічному виді в поле displayHex, а також у двійковому полі displayDec.

Перед тим як повернути керування, функція plusOp записує в змінну newnumber значення true. Це приводить до того, що при подальшому введенні цифр вони будуть розглядатися як цифри другого доданка, що участвуют в операції додавання.

Функція getResult викликається, коли користувач натискає на клавішу калькулятора з написом Enter:

function getResult(form)

{

vаr result;

result = total + lastOperation + eval("Ox" + form.displayHex.value);

total = eval(result);

form.displayHex.value = dec2hex(total);

form. displayDec.value = total;

newnumber = true;

}

Від тільки що описаної функції plusOp ця функція відрізняється лише тим, що вона не змінює значення змінної lastOperation (тому що дана кнопка служить для одержання підсумкового результату, а не для виконання арифметичної операції).

Цікаво розглянути функцію dec2hex, що виконує перетворення десяткового числа в шестнадцатеричное. Результат перетворення ця функція повертає у виді текстового рядка.

На початку роботи функція dec2hex перевіряє знак вихідного числа. Негативні числа перетворюються в позитивні, при цьому в змінну bNegativе записується значення true.

Алгоритм перетворення десяткового числа в шістнадцятирічне заснований на розподілі вихідного числа на 16 у циклі. Якщо ціла частина результату розподілу, що обчислюється за допомогою методу Math.floor, виявляється менше 16, цикл завершується. У противному випадку залишок від розподілу розглядається як значення поточного шістнадцятирічного розряду.

Для того щоб одержати символічне представлення шістнадцятирічного числа по його значенню, треба витягти потрібний символ з рядка szHexTable викликом для цього методу charAt:

szBuf=szHexTable.charAt(nRem);

szResult = szBuf concat(szResult);

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

5.6. Електронні часы

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

Вихідний текст документа HTML з електронними часами представлений у листинге 5.10.

Листинг 5.10. Файл chapter3/clock/clock.html

<HTML>

<HEAD>

<TITLЕ>Електронні годинник</TITLE>

<!--

nTimer = 0;

var szCurrentTime = "";

var szCurrentDate = "",

var szTimeZone = "",

var szGMT = "";

var szLocal = "";

function updateClock()

{

var dtDate = new Date();

var nHours = dtDate.getHours();

var nMinutes = dtDate.getMinutes();

var nSeconds = dtDate getSeconds();

szCurrentTime = nHours + ":" + nMinutes + ":" + nSeconds;

szCurrentDate = dtDate.getDate () + "." + dtDate.getMonth() + "." + dtDate.getYear();

szTimeZone = dtDate.getTimezoneOffset()/60;

szGMT = dtDate.toGMTString();

szLocal = dtDate.toLocaleString();

Clock.time.value = szCurrentTime;

Clock.dat.value = szCurrentDate;

Clock.timeZone.value = szTimeZone;

Clock.gmt.value = szGMT;

Clock.loc.value = szLocal;

nTimer = setTimeout("updateClock()", 1000);

}

//-->

</SCRIPT>

</HEAD>

<Н1>Електронні годинник</Н1>

<TABLE>

<ТR><ТD><У>Дата </B></TD><TD><INPUT TYPE="text"

NAME="dat" SIZE="20"></TD>

</TR>

<ТR><TD><У>Час </B></TD><TD><INPUT TYPE="text"

NAME="time" SIZE="20"></TD>

</TR>

<ТR><ТD><У>Зсув годинного пояса : </B></TD><TR><INPUT TYPE="text"

NAME="timeZone" SIZE="20"></TD>

</TR>

<ТR><ТD><B>Дата GMT : </B></TD><TD><INPUT TYPE="text"

NAME="gmt" SIZE="30"></TD>

</TR>

<ТR><ТD><У>Локальна дата : </b></td><td><input TYPE="text"

NAME="loc" SIZE="30" ></TD>

</TR>

</TABLE>

</FORM>

<!--

updateClock();

//-->

</SCRIPT>

</BODY>

</HTML>

Годинник запускаються відразу після завантаження документа HTML у вікно браузера. При цьому керування одержує функція updateClock. Ця функція визначена в заголовку, а її виклик знаходиться наприкінці області тіла документа HTML.

Одержавши керування, функція updateClock створює об'єкт Data для поточної дати, встановленої в комп'ютері:

var dtDate = new Date();

Потім функція визначає три компоненты часу (години, хвилини і секунди), викликаючи для этого методи getHours, getMinutcs і getSeconds. визначені в класі Date:

var nHours = dtDate.getHours();

var nMinutes = dtDate.getMinutes();

var nSeconds = dtGate.getSeconds();

Отримані в такий спосіб значення комбінуються в текстовому рядку szCurrеntTime:

Надалі час буде записано функцією updalеClock у поле time форми Clock, як це показано нижче:

Рядок поточної дати виходить у результаті виклику методів getDate, getMonth і getYear:

szCurrentDate = dtDate.getDate() + "." +

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

Цей рядок записується в поле dat форми Clock:

Clock.dat.value = szCurrentDate;

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

getTimeZone = dtDate.getTimezoneOffset() / 60;

Для того щоб обчислити зсув у годинах, необхідно розділити результат, отриманий від методу getTimezoneOffset, на 60. Обчислений зсув годинного пояса записується в поле timeZone форми Clock:

Clock.timeZone.value = szTimeZone;

Для одержання часу за Гринвічем скористаємося методом toGMTString:

szGMT = dtDate.toGMTString();

Отримане значення буде записано в поле gmt форми Clock:

Clock.gmt.value = szGMT;

І нарешті, локальну дату і час ми визначаємо за допомогою методу toLocaleString:

szLocal = dtDate.toLocaleString();

Результат записується в поле 1ос форми Clock:

Clock.loc.value = szLocal;

Періодичне виконання функції updateClock досягається за допомогою методу setTimeout:

nTimer = setTimeout("updateClock()", 1000);

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

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

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

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

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

Таблиця 2

Завдання	Варіант 1	Варіант 2	Варіант 3	Варіант 4	Варіант 5	Варіант 6	Варіант 7
Базовий вихідний листинг	Листинг 5.1	Листинг 5.2	Листинг 5.3	Листинг 5.4	Листинг 5.5	Листинг 5.6	Листинг 5.2
Для об'єкта form використовувати властивість першого набору	action	elements	Length	method	target	Length	target
Для об'єкта form використовувати властивості другого рівня	checkbox, buttom, textarea	hidden, reset, text	password, buttom, select	radio, reset, textarea	select, buttom, hidden	text, reset, checkbox	textarea, buttom, password
Для об'єкта form використовувати методи	click, focus, blur	click, focus, select	focus, blur, select	click, focus, blur	click, focus, select	focus, blur, select	click, focus, select
Для об'єкта form виконати локальну перевірку заповнення	checkbox	text	password	radio	select	text	textarea