2015-05-13
416
<HTML>
<HEAD>
<TITLE>Данные об языках, представленные с помощью списка</TITLE>
<script language="JavaScript">
<!-— //
function testsel()
{ var d=document
var s=0
if (((d.forms["forml"].elements[0])[0]).selected) s+=100
if ({(d.forms["forml"].elements[0])[1]).selected) s+=200
if (((d.forms["forml"].elements[0])[2]).selected) s+=300
if (((d.forms["forml"].elements[0])[3]).selected) s+=400
if (((d.forms["forml"].elements[0])[4]).selected) s+=500
if (((d.forms["forml"].elements[0])[5]).selected) s+=600
return s
}
//-->
</script>
</HEAD>
<BODY>
<FORM name="form1">
<Н4>Анкета переводчика</Н4>
Выберите язык, которым Вы владеете в совершенстве<br>
<select name="forma" size=4 MULTIPLE>
<option value="русский">русский
<option value="английский">английский
<option value="французский">французский
<option value="немецкий">немецкий
<option value="китайский">китайский
<option value="японский">японский
</select><P>
Вознаграждение: <input type="text" name="res" size=10><P>
<input type="button",уа1ие="0пределить"
onClick="forml.res.value=testsel()">
<input type="reset" value="Отменить">
</FORM>
</BODY>
|
|
|
</HTML>
Обработка анкеты переводчика
Напишем сценарий обработки анкеты переводчика. Сведения о тех языках, которыми владеет переводчик, требуется задать с помощью списка, Выбранные языки следует помещать в поле ввода многострочного текста, как на рис. 6.2.
Напомним, что событие change происходит в тот момент, когда значение элемента формы text, select или textarea изменилось, и элемент потерял фокус. Будем обрабатывать анкету переводчика следующим образом. Параметр обработки события поместим в тег <seiect>. Как только выбран конкретный язык, т. е. произошло событие change, выполняется функция gr:
function gr(obj,m)
{ var r=100*(Number(((obj.elements[0])[m]).value)+1)
s+=((obj.elements[0]) [m]).text+"\r\n"
obj.restext.value=s
sum+=r
obj.res.value=r
}
Первый параметр — имя формы, второй — значение параметра value выбранного элемента. Второй оператор обеспечивает формирование строки всех выбранных пользователем языков. Третий оператор помещает вычисленное значение в текстовое поле. В результате выполнения четвертого оператора присваивания в переменной sum формируется значение, которое, затем при нажатии кнопки Сумма будет выведено в текстовое поле. Последний оператор помещает значение для выбранного языка в соответствующее поле формы. Полностью документ со сценарием и формами может быть описан так, ка указано в листинге 6.3.
Листинг 6.3. Реакция на событие change в теге <select>
<HTML>
<HEAD>
<TITLE>Реакция на событие Change в теге select</TITLE>
<script language="JavaScript">
<!-— //
var s=""
var sum=0 function gr(obj,m)
{ var r=100*(Number(((obj.elements[0])[m]).value)+1)
s+=((obj.elements[D])[m]).text+"\r\n"
obj.restext.value=s
sum+=r
obj.res.value=r
}
//-—>
</script>
</HEAD>
<BODY>
|
|
|
<FORM name="form1">
<Н3>Анкета переводчика</Н3>
<TABLE border=3 bgcolor=silver>
<ТR><ТН>Выбранный язык</ТН><ТН>Результат</ТН></ТR>
<TR>
<TD valign=top>
<select name="data" size=6
onChange="gr(forml,forml.data.value)">
<option value=0>русский
<option value=l>aнглийcкий
<option value=2>французский
<option value=3>немецкий
<option value=4>китайский
<option value=5>японский
</select><P>
<input type="text" name="res" size=15>
</TD>
<TD><TEXTAREA name="restext" cols=15 rows=6>
</TEXTAREA><P>
<input type="button" value=Сумма
onClick="forml.resgr.value=sum">
<input type="text" name="resgr" size=10>
</TD></TR></TABLE><p>
<input type="reset" value="Отменить" onClick="sum=0; s=''">
</FORM>
</BODY>
</HTML>
Рассмотрим случай, когда значение параметра обработки события — функция с одним параметром, который является именем тега <seiect>.
<select name="data" size=6 onChange="gr(form1.data)">
<option value=0>русский
<option value=l>aнглийcкий
<option value=2>фpaнцyзcкий
<option value=3>немецкий
<option value=4>китайский
<option value=5>японский
</select>
Для того чтобы получить доступ к значению в сценарии, выполняется конструкция obj.value, а свойство списка form позволяет получить доступ к объектам формы. Форма имеет несколько элементов, к которым доступ получен различными способами в следующем сценарии:
function gr(obj)
{ var r=(Number(((obj.form.elements[0])[obj.value]).value)+1)*100
s+=((obj.form.elements[0])[obj.value]).text+"\r\n"
obj.form.restext.value=s
sum+=r
obj.form.res.value=r
}
Анкета читателя
Пусть при заполнении анкеты читатель выбирает в порядке важности для него некоторые заданные в анкете характеристики книг. В результате выбора должен быть сформирован список так, как показано на рис. 6.3.
При выборе очередной характеристики в теге <seiect> возникает событие change, обработка которого состоит в помещении выбранной характеристики в качестве элемента списка, формируемого в многострочном текстовом поле. При обновлении полей формы глобальным переменным, используемым в сценарии, присваиваются начальные значения. HTML-код представлен в листинге 6.4.
