3.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 із сценарієм, що виконує всі описані вище дії, подана в листинге 3.2.

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

<HTML>

<HEAD>

<SCRIPT>

<!--

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>

<SCRIPT>

<!--

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, вихідний текст якого поданий у листинге 3.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 + ">");