8.5. Застосування списків
Списки у HTML – документі створюються за допомогою тегу <SELECT>, всередині якого кожний елемент описується тегом <OPTION>. Робота сценарію зі списком відбувається як з масивом, ім’я якого відповідає імені списку – значенню атрибуту NAME тегу SELECT. Індексація елементів масиву починається з 0.
Так, наприклад, якщо створено наступний список
<SELECT NAME="COUNTRY" SIZE=3>
<OPTION> Україна
<OPTION> Росія
<OPTION> Франція
</SELECT>,
то перший його елемент COUNTRY[0], другий - COUNTRY[1], третій - COUNTRY[2].
Параметр selected визначає обрано певний елемент зі списку або ні. Якщо елемент обрано, то звернення до елемента і параметру selected повертає значення true (істина), у зворотному випадку – false.
Розглянемо приклад використання списку для роботи з формою, за допомогою якої можна ввести закупівельну ціну товару, кількість товару, обрати певну товарну групу. В залежності від обраної товарної групи визначається націнка на товар. Для книг вона складає 20%, побутової техніки 30%, косметики 25%, для інших товарів націнка 40%. Сценарій повинен розраховувати ціну продажу, суму реалізації. Вікно документа наведено на рис. 8.3.
Рисунок 8.3 - Результат виконання сценарію із використанням списку
Код HTML – документа:
<HTML>
<HEAD>
<STYLE>
.st{font-family:Times New Roman;font-size:14pt}
</STYLE>
<script type="text/javascript">
function functR(ob){
var n=0;
if (ob.GR[0].selected) n=20
else
if (ob.GR[1].selected) n=30
else
if (ob.GR[2].selected) n=25
else
n=40;
var z="Націнка на дану товарну групу складає "+n+"%. ";
var cp=Number(ob.C.value)*(100+n)/100;
z=z+"Ціна продажу: "+cp+" грн. ";
var sp=Number(ob.K.value)*cp;
z=z+"Сума продажу: "+sp+" грн.";
return z;
}
</script>
</HEAD>
<BODY>
<FORM name="formR">
<TABLE BORDER=1 ALIGN=center CLASS="st">
<TR><TD COLSPAN=2>Розрахунок ціни і суми продажу товару
</TD></TR>
<TR> <TD>Введіть закупівельну ціну товару:</TD>
<TD> <INPUT NAME="C" TYPE=text></TD></TR>
<TR> <TD>Введіть кількість товару:</TD>
<TD> <INPUT NAME="K" TYPE=text></TD></TR>
<TR> <TD>Оберіть товарну групу</TD>
<TD><SELECT NAME="GR" SIZE=4>
<OPTION> Книги
<OPTION> Побутова техніка
<OPTION> Косметика
<OPTION> Інші товари
</SELECT>
</TD></TR>
<TR><TD COLSPAN=2>
<INPUT NAME="solve" TYPE="button" VALUE="Розрахунок" onclick="document.formR.INF.value=functR(document.formR)">
</TD></TR>
<TR><TD COLSPAN=2>
<TEXTAREA NAME="INF" ROWS=3 COLS=60 CLASS="st">
</TEXTAREA>
</TD></TR>
<TR><TD COLSPAN=2>
<INPUT NAME="exit" TYPE="reset" VALUE="Відміна">
</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
8.6. Робота з прапорцями
Прапорці у сценаріях, створених за допомогою мови JavaScript, мають стандартне призначення – виконують роль незалежних один від одного індикаторів, що можуть приймати одне з двох значень увімкнено або вимкнено. Створюються прапорці за допомогою тегу <INPUT>, атрибут якого TYPE повинен мати значення checkbox, це власне і означає, що елемент є прапорцем. Оскільки прапорці не взаємозалежні, то кожному з них привласнюється окреме ім’я і, відповідно, звернення до прапорця відбувається за цим іменем. Параметр checked визначає стан прапорці, він може приймати значення true (істина) – прапорець увімкнено, false – прапорець виключено.
Роботу з прапорцями можна розглянути на такому прикладі. У сценарії надається можливість замовити книги, виводиться перелік з п’яти книг, за допомогою прапорців кожну з них можна замовити або ні. Після натиснення на кнопці «Вартість замовлення» сценарій видає результатне значення, виходячи з того, що вартість книг у переліку 60 грн., 50 грн., 50 грн., 200 грн. і відповідно 50 грн. Вікно ІЕ із виконаним сценарієм представлено на рис. 8.4
Рисунок 8.4 - Результат виконання сценарію із використанням прапорців
Код HTML – документа:
<HTML>
<HEAD>
<script type="text/javascript">
function functZ(ob){
var z=0;
if (ob.sel1.checked) z=z+60;
if (ob.sel2.checked) z=z+50;
if (ob.sel3.checked) z=z+50;
if (ob.sel4.checked) z=z+200;
if (ob.sel5.checked) z=z+50;
return z="Вартість Вашого замовлення складає "+z+" грн.";
}
</script>
</HEAD>
<BODY>
<FORM name="formZ">
<TABLE BORDER=1 ALIGN=center>
<TR> <TD COLSPAN=2>Ви можете замовити такі книги:</TD></TR>
</TR>
<TR> <TD>Дейтел Х.М. Как программировать на XML.<BR>
М: ЗАО «Из-дательство «БИНОМ», 2005</TD>
<TD><INPUT NAME="sel1" TYPE=checkbox></TD></TR>
<TR> <TD>Коломова Н.В. HTML: Учебный курс.
<BR>СПб: Питер, 2006</TD>
<TD><INPUT NAME="sel2" TYPE=checkbox></TD></TR>
<TR> <TD>Кох Д., Дэвидсон К. XML. Огромные возможности и <BR>легкость изучения. - М.: НТ Пресс, 2007</TD>
<TD><INPUT NAME="sel3" TYPE=checkbox></TD></TR>
<TR> <TD>Хантер Д. и др. XML. Базовый курс.<BR>М.: ООО "И.Д.Вильямс", 2009</TD>
<TD><INPUT NAME="sel4" TYPE=checkbox></TD></TR>
<TR> <TD>Дмитриева М.Д. JavaScript. Экспресс-курс.<BR>СПб.: БХВ-Петербург, 2005</TD>
<TD><INPUT NAME="sel5" TYPE=checkbox></TD></TR>
<TR><TD COLSPAN=2>
<INPUT NAME="solve" TYPE="button" VALUE="Вартість замовлення" onclick="document.formZ.ZAMOVL.value=functZ(document.formZ)">
</TD></TR>
<TR><TD COLSPAN=2>
<TEXTAREA NAME="ZAMOVL" ROWS=2 COLS=50>
</TEXTAREA> </TD></TR>
<TR><TD COLSPAN=2><INPUT NAME="clear" TYPE="reset" VALUE="Відміна"> </TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Контрольні питання
Як виглядає ієрархія об’єктів браузера?
Що таке подія? Які події Вам відомі?
Як здійснюється обробка події?
Як при натисненні на командну кнопку змінити уміст текстового поля?
Як задіяти перемикачі у сценарії?
Як у сценарії визначити, який з елементів списку обрано?
Як визначається стан прапорця?
Практичні завдання
Варіант №1
Створити форму, у якій можна ввести суму замовлення, обрати за допомогою списку один з трьох термінів виконання замовлення: 1 день (націнка за терміновість складає 12%), 7 днів (ціна не змінюється), 14 днів (надається знижка 4%), натиснути на командних кнопках Розрахунок і Відміна. Розробити сценарій, у результаті виконання якого розраховується вартість замовлення з урахуванням націнки / знижки.
Варіант №2
Створити форму, у якій можна ввести купівельну ціну товару, обрати за допомогою перемикачів товарну групу: одяг (націнка 15%), взуття (націнка 20%), парфумерія (націнка 25%), інші товари (націнка 18%), натиснути на командних кнопках Розрахунок і Відміна. Розробити сценарій, у результаті виконання якого розраховується ціна продажу з урахуванням торговельної націнки.
Варіант №3
Створити форму, у якій можна ввести суму нарахованої заробітної плати, визначити за допомогою перемикачів виконав співробітник план чи ні, чи є у нього діти, натиснути на командних кнопках Розрахунок і Відміна. Розробити сценарій, у результаті виконання якого розраховується сума премії, яка складає 20% від заробітної плати, якщо план виконано. Усім співробітникам, які мають дітей до суми премії додається 200 грн.