8.4 Використання перемикачів у сценаріях
Перемикачі в формах створюються, як відомо, для вибору одного об’єкту або значення з тих, що пропонуються, за допомогою тегу <INPUT> з визначенням атрибуту TYPE як radio. Усі взаємозалежні перемикачі повинні мати однакове значення атрибуту NAME – ім’я. У порядку розташування перемикачів у формі звернутися до конкретного перемикача можна за індексом, причому індексація починається з 0. Наприклад, якщо створено групу перемикачів з ім’ям SelectX, то до першого можна звернутися як до об’єкту SelectX[0], до другого - SelectX[1] і т.д.
Властивість checked перемикача повертає значення true якщо перемикач обрано і false у протилежному випадку. Таким чином, запис document.form.SelectX[0].checked може мати значення Істина, якщо перемикач обрано. Його можна аналізувати у сценарій за допомогою оператору if.
Розглянемо використання перемикачів на такому прикладі. У формі можна обрати один з трьох видів банерів та розмір банеру. Після натиснення на кнопці «Визначення вартості розробки» виводиться значення ціни розробки банера обраного виду і розміру (ціни наведені в табл. 8.2). Кнопка «Відміна» встановлює для елементів форми значення за замовчуванню. Вікно HTML – документа із даним сценарієм подано на рис. 8.2.
Таблиця 8.2 – Ціни розробки банерів, грн.
Розмір банеру
Вид банеру |
468х60 |
240х350 |
730х90 |
flash-банер |
120 |
360 |
280 |
інтерактивний банер |
180 |
550 |
420 |
Screen Glade-банер |
240 |
720 |
560 |
Рисунок 8.2 - Результат виконання сценарію із використанням перемикачів
Можна створити такий код HTML – документа:
<HTML>
<HEAD>
<script type="text/javascript">
function functR(ob){
var z=0;
if ((ob.VBN[0].checked) && (ob.RBN[0].checked)) z=120
else
if ((ob.VBN[0].checked) && (ob.RBN[1].checked)) z=360
else
if ((ob.VBN[0].checked) && (ob.RBN[2].checked)) z=280
else
if ((ob.VBN[1].checked) && (ob.RBN[0].checked)) z=180
else
if ((ob.VBN[1].checked) && (ob.RBN[1].checked)) z=550
else
if ((ob.VBN[1].checked) && (ob.RBN[2].checked)) z=420
else
if ((ob.VBN[2].checked) && (ob.RBN[0].checked)) z=240
else
if ((ob.VBN[2].checked) && (ob.RBN[1].checked)) z=720
else
z=560;
return z;
}
</script>
</HEAD>
<BODY>
Інформація про вартість розробки банеру
<FORM name="formR">
<TABLE BORDER=1 ALIGN=center>
<TR> <TD>Оберіть вид банеру</TD>
<TD>
<INPUT NAME="VBN" TYPE=radio CHECKED> flash-банер<BR>
<INPUT NAME="VBN" TYPE=radio>інтерактивний банер<BR>
<INPUT NAME="VBN" TYPE=radio>Screen Glade-банер
</TD></TR>
<TR> <TD>Оберіть розмір банеру <BR>(ширина/висота у пікс.)</TD>
<TD>
<INPUT NAME="RBN" TYPE=radio CHECKED> 468х60<BR>
<INPUT NAME="RBN" TYPE=radio>240х350<BR>
<INPUT NAME="RBN" TYPE=radio>730х90<BR>
</TD></TR>
<TR><TD COLSPAN=2>
<INPUT NAME="solve" TYPE="button" VALUE="Визначення вартості розробки" onclick="document.formR.fieldV.value=functR(document.formR)">
</TD></TR>
<TR><TD COLSPAN=2>
Вартість розробки складатиме<INPUT NAME="fieldV" TYPE=text SIZE=15> грн.
</TD></TR>
<TR><TD COLSPAN=2><INPUT NAME="clear" TYPE="reset" VALUE="Відміна">
</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
У основній частині документа описано форму, у якій створюються перемикачі, командні кнопки, поле. Для структуризації елементів форми створено таблицю. Три взаємозалежних перемикача з іменем VBN надають можливість обрати вид банеру, перемикачі з ім’ям RBN призначені для вибору розміру банера. При натисненні на командній кнопці solve «Визначення вартості розробки» виводиться нове значення у текстовому полі document.formR.fieldV, яке повертає функція functR(). Аргумент функції document.formR використано для скорочення звернення до кожного конкретного елемента форми – до окремих перемикачів.
Функція functR() описана у заголовній частині документа. Функція приймає параметр ob – замінює частину імені об’єкта document.formR. У функції аналізуються усі можливі пари перемикачів. Якщо обрано один з видів один з розмірів банерів, то умова ((ob.VBN[і].checked) && (ob.RBN[і].checked)) має значення «Істина» і змінній z привласнюється відповідне значення ціни. Функція повертає значення z – ціна для двох обраних перемикачів.