| Назад | Содержание | Вперед |
Если элементов много, то представление их с помощью флажков или переключателей увеличивает размер формы. В этом случае варианты выбора могут быть представлены в окне браузера более компактно с помощью тега <seiect> . Напомним, что тег имеет несколько параметров. Параметр name является обязательным. Для того чтобы установить число одновременно видимых элементов, следует задать параметр size=n . Когда п равно 1, то отображается ниспадающее меню или список выбора; при п>1 выводится список с п одновременно видимыми значениями. Если параметр size не задан, то по умолчанию принимается значение равное 1. Указание параметра multiple означает, что из меню или списка можно выбрать несколько элементов. Элементы меню задаются внутри тега <seiect> с помощью тега <option> . Общий вид тега таков:
<option selected value=строка>
Параметр selected означает, что данный элемент списка считается выбранным по умолчанию. Параметр value содержит значение, которое передается, если данный элемент выбран из списка или меню.
Использование списка в задаче оформления заказа на витражи
Вернемся к задаче оформления заказа на витражи. В предыдущей версии форма витража задавалась с помощью переключателей. Теперь воспользуемся тегом <select> .
<BODY>
<FORM name="form1">
Выберите форму витража<br>
<select name="list" size=1>
<option value=0>прямоугольник
<option value=l>квадрат
<option value=2>Tтреугольник
<option value=3>Kpyr
</select>
<input type="button" value="Проверить" onClick="testse1()">
<input type="reset" value="Отменить">
</FORM>
</BODY>
Выбрать форму витража можно с помощью ниспадающего меню. В приведенном выше коде форма содержит три элемента управления. Первый определяется тегом <seiect> , следующие два элемента представляют собой кнопки Проверить и Отменить.
Для того чтобы осуществить доступ к первому элементу формы (списку), следует воспользоваться одной из следующих конструкций
document.form1.list
document.form1.elements[0]
document.forms ["form1"].elements[0]
document.forms[0].elements[0]
Список обладает свойствами length и name . В рассматриваемом примере значение document.form1.list.length равно четырем, а значение document.forml.list.name равно list .
Свойства selected и value связаны с текущим выбором элемента из списка. Свойство selected возвращает значение true , если элемент выбран, и false — в противном случае. В рассматриваемом варианте кода если выбран первый элемент (прямоугольник), то значение ((document.forms["form1"].elements[0])[0].selected станет равным true . Для анализа следующих трех элементов списка следует определить значения:
document.forms["form1"].elements[0])[1].selected
document.forms["form1"].elements[0])[2].selected
document.forms["form1"].elements[0])[3].selected
Свойство value возвращает значение параметра value , определенного в теге <option> . Значение ((d.forms["forml"].elements[0])[0]).value равно нулю. Свойство text возвращает текст, записанный после тега <option> в объекте select . Так значением ((d.forms["form1"].elements[0])[0]).text является строковый литерал "прямоугольник".
Функция testsel() играет роль тестиреумой программы и проверяет, правильно ли выбираются параметры. Полностью документ со сценарием будет выглядеть так, как представлено в листинге 6.1.
Листинг 6.1. Данные, представленные с помощью тега select
<HTML>
<HEAD>
<TITLE>Данные, представленные с помощью тега select</TITLE>
<script ="JavaScript">
<!-- //
function testsel ()
{ var d=document
var r="Выбранная форма: "
if (((d.formst"forml"].elements[0])[0]).selected)
r=r+((d.forms["forml"].elements 10]) [0]).text+" "
else
if (((d.forms["forml"].elements[0])[1]).selected)
r=r+((d.forms["forml"].elements[0])[1]).text+" "
else
if (((d.forms["forml"].elements[0])[2]).selected)
r=r+((d.forms["forml"].elements[0])[2]).text+" "
else
if (((d.forms["forml"].elements[0])[3]).selected)
r=r+((d.forms["forml"].elements[0])[3]).text+" "
d.write(r)
}
//-—>
</script>
</HEAD>
<BODY>
<FORM name="form1">
Выберите форму витража<br>
<select name="forma" size=1>
<option value=0>прямоугольник
<option value=l>квадрат
<option value=2>треугольник
<option value=3>Kpyr
</select>
<input type="button" value="Проверить" onClick="testsel()">
<input type="reset" value="Отменить">
</FORM>
</BODY>
</HTML>
Использование списка в анекте переводчика
Напишем сценарий обработки анкеты переводчика. Сведения о тех языках, которыми тот владеет, требуется задать с помощью списка.
Так как переводчик может владеть несколькими языками, то в теге <select> необходимо указать параметр multiple, означающий, что из списка могут быть выбраны несколько элементов. Определим значение параметра size равным четырем. Тогда будет отображен список прокрутки с четырьмя одновременно видимыми значениями и тремя выбранными, как на рис. 6.1.
|
|
| Рис 6.1. Анкета переводчика Приведем описание тела HTML-кода документа (листинг 6.2, а). |
Листинг 6.2, а. Анкета переводчика. Представление списком
<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" value="Определить"
onClick="forml.res.value=testsel()">
<input type="reset" value="Отменить">
</FORM>
</BODY>
В форме содержатся несколько элементов. Нас будет интересовать первый элемент, а в первом элементе те значения, которые выбраны. Как и в предыдущем примере, определить, какие элементы выбраны, можно, если проанализировать следующие значения:
((document.forms["forml"].elements[0])[0]).selected
((document.forms["forml"].elements[0])[1]).selected
((document.forms["forml"].elements[0])[2]).selected
((document.forms["forml"].elements[0])[3]).selected
((document.forms["forml"].elements[0])[4]).selected
((document.forms["forml"].elements[0])[5]).selected
За знание каждого языка назначается определенная сумма. После анализа всех выбранных значений определяется вознаграждение. Для определения суммы вознаграждения следует щелкнуть по кнопке Определить. Реакция на это событие — запись в поле формы вычисленного значения (листинг 6.2, б).
Листинг 6.2, б. Данные об языках, представленные с помощью списка
<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
}
|
| Рис 6.2. Выбор с помощью списка |
Первый параметр — имя формы, второй — значение параметра 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.
|
| Рис 6.3. Обработка анкеты читателя |
При выборе очередной характеристики в теге <seiect> возникает событие change, обработка которого состоит в помещении выбранной характеристики в качестве элемента списка, формируемого в многострочном текстовом поле. При обновлении полей формы глобальным переменным, используемым в сценарии, присваиваются начальные значения. HTML-код представлен в листинге 6.4.
Листинг 6.4. Характеристики книг в порядке предпочтения
<HTML>
<HEAD>
<TITLE>Характеристики книг в порядке предпочтения</TITLE>
<script>
var k=l
var s=""
function mov(n)
{ s=s+k+' '+form1.data[n].text+"\r\n"
k=k+l
form1.res.valuers
}
function ref()
{ k=1; s="" }
</script>
</HEAD>
<BODY>
<Н3>Перечислите в порядке важности следующие
характеристики книг</Н3>
<FORM name="form1">
<TABLE border="6" cellpadding="7" cellspacing="0" width="100">
<TR>
<TD>
<select name="data" size="8"
onChange="mov(forml.data.value)">
<option value=0>Оформление обложки
<option value=1>Объем
<option value=2>Цена
<option value=3>Качество бумаги
<option value=4>Наличие цветных иллюстраций
<option value=5>Haличиe CD или дискет
</select>
</TD>
<TD valign="bottom" width="95%">
<textarea name="res" rows="8" cols="30"></textarea>
</TD>
</TR>
</TABLE><p>
<input type="reset" value="Обновить" onClick=ref()>
</FORM>
</BODY>
</HTML>
Необходимо написать сценарий обработки анкеты читателя. Выбранные характеристики должны формироваться в виде списка.
После выбора очередной характеристики книги следует щелкнуть по кнопке Добавить, и характеристика с номером предпочтения появится в правом столбце. В результате выполнения функции test проверяется, какой элемент выбран, и указанная характеристика помещается в конец формируемого списка. Количество элементов в формируемом списке должно быть не более, чем в исходном. Если делается попытка поместить большее число элементов, то выводится сообщение об ошибке (листинг 6.5).
Листинг 6.5. Данные, представленные списком и помещаемые в список
<HTML>
<HEAD>
<TITLE>Данные, представленные списком</TITLE>
<script language="JavaScript">
<!-— //
var n=0
function test(obj)
{ if (n<=(obj.elements[2]).length-1)
{ if (((obj.elements[0])[0]).selected)
{((obj.elements[2])[n]).text=n+l+
" "+((obj.elements[0])[0]).text+" "; n=n+l}
if (((obj.elements[0])[1]).selected)
{((obj.elements[2])[n]).text=n+1+
" "+((obj.elements[0])[1]).text+" "; n=n+l}
if (((obj.elements[0])[2]).selected)
{((obj.elements[2])[n]).text=n+l+
" "+((obj.elements[0])[2]).text+" "; n=n+l}
if (((obj.elements[0])[3]).selected)
{((obj.elements[2])[n]).text=n+1+
" "+((obj.elements[0])[3]).text+" "; n=n+l}
if (((obj.elements[0])[4]).selected)
{((obj.elements[2])[n]).text=n+l+
" "+((obj.elements[0])[4]).text+" "; n=n+1}
if (((obj.elements[0])[5]).selected)
{((obj.elements[2]) En]).text=n+1+
" "+((obj.elements[0])[5]).text+" "; n=n+l)
}
else alert ("Ваш выбор содержит ошибку")
}
//-—>
</script>
</HEAD>
<BODY>
<FORM name="form1">
<Н3>Анкета читателя</Н3>
<Р>Перечислите в порядке важности следующие
шесть характеристик книг</Р>
<select name="forma" size=7 multiple>
<option value="обложка">0формление обложки
<option value="объем">Объем книги
<option value="цена">Цена книги
<option value="качество бумаги">Качество бумаги
<option value="иллюстраций">Наличие цветных иллюстраций
<option value="диcки">Haличиe CD или дискет
</select>
<input type="button" value=Добавить onClick="test(form1)">
<select name="formres" size=7 multiple>
<option value="n1">
<option value="n2">
<option value="n3">
<option value="n4">
<option value="n5">
<option value="n6">
</select>
</FORM>
</BODY>
</HTML>
Недостаток сценария заключается в том, что в результирующем списке могут оказаться одинаковые элементы.
Напишем сценарий, во время работы которого при выборе из заданного списка названия рисунка в документе появляется соответствующее изображение (рис. 6.4).
Названия рисунков задаются с помощью тега <seiect>. При выборе названия возникает событие change, обработка которого состоит в том, что в документе появляется соответствующий выбранному названию рисунок. Связь между названием рисунка и изображением устанавливается параметром value. При выполнении оператора switch в функции, обрабатывающей событие, анализируется выбранное значение и загружается соответствующий рисунок. Для того чтобы отобразить на странице другой рисунок, следует изменить параметр src объекта image. Документ, реализующий сценарий, представлен в листинге 6.6.
|
| Рис 6.4. Выбор изображения из списка |
Листинг 6.6. Выбор изображения из списка
<HTML>
<HEAD>
<TITLE>Выбор изображения из списка</TITLE>
<script>
<!-—
function ref(obj)
{ obj.pict.value='0'
ch_pict(0)
obj.res.value=''
obj .mypict.src="pictureO.gif"
}
function ch_pict(num)
{ var d=document
switch (num)
{ case "0" d.mypict.src="pictureO.gif" break;
case "1" d.mypict.src="picturel.gif" break;
case "2" d.mypict.src="picture2.gif" break;
case "3" d.mypict.src="picture3.gif" break;
case "4" d.mypict.src="picture4.gif" break;
case "5" d.mypict.src="picture5.gif" break;
case "6": d.mypict.src="picture6.gif"; break;
}
form1.res.value=nunr*100
)
//-->
</script>
</HEAD>
<BODY bgcolor="#eaf5ef">
<Н3>Выбор рисунка</Н3>
<FORM name="form1">
<TABLE border=1>
<TR>
<TD>
<select name="pict" size="7"
onChange="ch_pict(forml.pict.value)">
<option value="0">HeT
<option value="l">Дом
<option value="2">Книги
<option value="3">Письмо
<option value="4">Краски
<option value="5">Bonpoc
<option value="6">Дерево
</select>
</TD>
<TD><IMG src="picture0.gif" name="mypict" width=100></TD></TR>
</TABLE>
<br>
Стоимость: <input type="text" name="res" size=12><P>
<input type="button" value="Обновить" onClick="ref(form1)">
</FORM>
</BODY>
</HTML>
В приведенном примере считается, что файлы с изображением хранятся в той же папке, что и создаваемый HTML-документ. Если это не так, то в правой части операторов присваивания оператора switch следует указать полное имя файла с изображением. Тот факт, что выбранное название рисунка и имя графического файла с изображением связаны значением параметра value тега <option>, позволяет сократить текст программы и описать функцию ch_pict следующим образом:
function ch_pict(num)
{ var d=document
d.mypict.src="picture"+num+".gif"
form1.res.value=num*100
}
Имя файла изображения формируется в виде строки; значение num определяет по названию имя файла с изображением.
В документе лишь одно изображение, поэтому для доступа к объекту image на странице можно воспользоваться конструкцией document.images [0]. Функция chjpict в этом случае может быть описана следующим образом.
function ch_pict(num)
( var d=document
d.images[0].src="picture"+num+".gif"
form1.res.value=num*100
}
Изменение свойств горизонтальной линии
Напишем сценарий, при выполнении которого горизонтальная линия представлена в документе с заданными параметрами. Предусмотрите возможность изменения цвета линии. После задания параметров выравнивания, длины, толщины и цвета линии документ примет вид, как на рис. 6.5. Определим в виде списка название цветов для горизонтальной линии, которые может задать пользователь. При выборе цвета реакцией на событие change будет вызов функции gr (forml, forml.col.value) с двумя параметрами. Первый параметр необходим, чтобы получить доступ к элементам документа, а второй указывает значение выбранного элемента в списке цветов. По последнему параметру определяется название цвета. Функцию gr можно упростить, если в качестве значения параметра value тега <option> задать название цвета.
Доступ к свойствам, определяющим горизонтальную линию, осуществляется с помощью параметра id. HTML-код, содержащий требуемый сценарий, представлен в листинге 6.7.
|
| Рис 6.5. Изменение свойств горизонтальной линии |
Листинг 6.7. Изменение свойств горизонтальной линии
<HTML>
<HEAD>
<TITLE>Изменение свойств горизонтальной линии</TITLE>
<script>
<!-—
function gr(obj,m)
{ document.all("1").color=((obj.elements[5])[m]).text }
function set(obj)
{ var s=""
if(obj.elements[0].checked) s=obj.elements[0].value
else
if(obj.elements[1].checked) s=obj.elements[1].value
else
if(obj.elements[2].checked) s=obj.elements[2].value
document.all("1").align=s
if (obj.wid.value != "") document.all("1").width=obj.wid.value
if (obj.siz.value != "") document.all("1").size=obj.siz.value
}
function rset(obj)
{ document.all("1").width=200
document.all("1").size=20
document.all("1").color="red"
document.all("1").align="left"
obj.wid.value=200 obj.siz.value=20
}
//-—>
</script>
</HEAD>
<BODY bgcolor="F8F8FF">
<H3 align=center>Гopизoнтaльныe линии</Н3>
Выберите значения параметров, которые требуется изменить,
и нажмите кнопку <В>Выполнить</В>.
<HR id="l" name="lin" size=20 width=200 align= left Color=red>
<TABLE border=3>
<TR>
<TD>
<FORM name="form1">
<PRE>
Выравнивание
<input type="radio" name="m" value="LEFT" checked>LEFT
<input type="radio" name="m" value="CENTER">CENTER
<input type="radio" name="m" value="RIGHT">RIGHT
<input type="text" size=8 name= siz value=20> толщина линии (size)
<input type="text" size=8 name= wid value=200> длина линии (width)
</TD>
<TD valign="top">
Цвет линии (color) <select name= col size=l
onChange="gr(forml,forml.col.value)">
<option value=0 >red
<option value=l>green
<option value=2>black
<option value=3>maroon
<option value=4>green
<option value=5>olive
<option value=6>navy
<option value=7>purle
<option value=8>teal
<option value=9>gray
<option value=10>silver
<option value=ll>yellow
<option value=12>blue
<option value=13>fuchsia
<option value=14>white
</select>
</TD></TR></TABLE><P>
<input type="button" value="Bыпoлнить" onclick="set(form1)">
<input type="reset" value="Обновить" onclick="rset(form1)">
</PRE>
</FORM>
</BODY>
</HTML>
Анкета "Преподаватель и студент"
Напишем сценарий обработки анкеты "Преподаватель и студент". Фамилии преподавателей задаются с помощью списка. Студент выбирает фамилию преподавателя и ставит оценки по указанным критериям.
|
| Рис 6.6. Анкета "Преподаватель и студент" |
После нажатия кнопки Статистика фамилия преподавателя и вычисленная сумма баллов появляются в области результата. После работы с анкетой ее вид может быть таким, как на рис. 6.6.
HTML-код документа обработки анкеты имеет вид, представленный в листинге 6.8.
Листинг 6.8. Анкета "Преподаватель и студент"
<HTML>
<HEAD>
<TITLE> Анкета "Преподаватель и студент" (А.Рыжков)</TTTLE>
<script language="JavaScript">
<!-—
var p=""
var s=""
function gr(obj,m)
{ p=((obj.elements[3])[m]).text }
function statist{obj)
{ var res=0
if(obj[0].checked) {res=res+l}
if(obj[1].checked) {res=res+2}
if(obj[2].checked) {res=res+3}
if(obj[3].checked) {res=res+4}
if (obj[4].checked) {res=res+5}
return res
}
function stat(obj)
{ s=s+p+": "+Number(statist(obj.parl)+statist(obj.par2)+
statist(obj.рагЗ)+statist(obj.par4)+ statist(obj.par5))+"\r\n"
obj.result.value=s
}
//-->
</script>
</HEAD>
<BODY background="fon1.jpg">
<CENTER>
<H4 align="center"> Информация о студенте </Н4>
<FORM name="form1">
Факультет <select name="faculty" size=1 maxlength=20>
<option value="ram"> мат-мех
<option value="ph"> физфак
<option value="ch"> химфак
</select>
Курс <select name="k" size=l maxlength=l>
<option value=1> 1
<option value=2> 2
<option value=3> 3
<option value=4> 4
<option value=5> 5
</select>
Группа <input type="text" name="group" size=4>
<TABLE border=3>
<TR>
<TD valign="top">
<Н4>Список преподавателей:</Н4>
<select name="teacher" size=l col=50
onClick="gr(forml,forml.teacher.value)">
<option value=0> Иванова Марина Валерьевна
<option value=l> Сидоров Виктор Григорьевич
<option value=2> Кулаков Игорь Павлович
<option value=3> Голубев Владимир Андреевич
<option value=4> Петрова Марианна Владимировна
<option value=5> Прокофьева Мария Семеновна
<option value=6> Лебедев Сергей Николаевич
</select>
</TD>
<TD>
<TABLE border=2 align="center" background="fon3.gif">
<TR><TH align="center"> Показатель </ТН>
<TH colspan=5 align="center"> Оценка </TH></TR>
<ТR><ТD>Соответствие программе
<TD><input type="radio" name="par1" value=1>1
<TD><input type="radio" name="par1" value=2>2
<TD><input type="radio" name="par1" value=3>3
<TD><input type="radio" name="par1" value=4>4
<TD><input type="radio" name="par1" value=5>5
</TR>
<ТR><TD>Учет специфики аудитории
<TD><input type="radio" name="par2" value=l>l
<TD><input type="radio" name="par2" value=2>2
<TD><input type="radio" name="par2" value=3>3
<TD><input type="radio" name="par2" value=4>4
<TD><input type="radio" name="par2" value=5>5
</TD></TR>
<TR><TD>Доказательность изложения
<TD><input type="radio" value=l name="par3">l
<TD><input type="radio" value=2 name="par3">2
<TD><input type="radio" value=3 name="par3">3
<TD><input type="radio" value=4 name="par3">4
<TD><input type="radio" value=5 name="par3">5
</TD></TR>
<TR><TD>Эффeктивныe методы обучения
<TD><input type="radio" value=l name="par4">l
<TD><input type="radio" value=2 name="par4">2
<TD><input type="radio" value=3 name="par4">3
<TD><input type="radio" value=4 name="par4">4
<TD><input type="radio" value=5 name="par4">5
</TD></TR>
<TR><TD>Современный уровень
<TD><input type="radio" value=l name="par5">l
<TD><input type="radio" value=2 name="par5">2
<TD><input type="radio" value=3 name="par5">3
<TD><input type="radio" value=4 name="par5">4
<TD><input type="radio" value=5 name="par5">5
</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE><P>
<input type="button" value="Статистика" onClick="stat(forml)"><P>
<textarea Cols=40 rows=5 name="result"></textarea><P>
<input type="reset" value="Очистить" onClick="p=''; s=''">
</FORM>
</BODY>
</HTML>
Напишем сценарий обработки теста "Города и памятники". Названия городов и памятников задаются с помощью списков. Пользователь выбирает в левом перечне название города, а в правом — памятник, расположенный в этом городе. После нажатия кнопки
Результат
в текстовое поле выводится количество правильных ответов (рис. 6.7).
|
| Рис 6.7. Тест "Города и памятники" |
В сценарии используются три глобальные переменные. Переменная q хранит последнее выбранное значение в левом столбце; переменная а — выбранное значение правого столбца; значение переменной sum содержит число правильных ответов. В двух списках для правильной пары "вопрос/ответ" совпадают соответствующие значения параметра value. Эти значения проверяются после выбора элемента списка правого столбца. Результат тестирования можно посмотреть, если нажать кнопку Результат.
Сценарий, реализующий простую обработку теста, представлен в листинге 6.9.
Листинг 6.9. Простая тестирующая программа
<HTML>
<HEAD>
<TITLE>Города и памятники. (Зарубаева)</TITLE>
<script>
<!-—
var sum=0
var q
var a
function eq()
{ q=test.question.value
a=test.answer.value;
if (a==q) sum +=1
}
function result()
( document.test.res.value=sum}
//-->
</script>
<BODY background="fon3.gif">
<h3 align=center>Города и памятники</hЗ>
<FORM name="test">
<TABLE border=3 align=center cellpadding=5
cellspacing=6 bgcolor= silver>
<ТК><ТН>Памятник</ТН><ТН>Находится в городе</ТН>
<TR><TD>
<select size =7 name="question"
onChange="q=test.question.value">
<option value="mad">Myзeй Прадо<br>
<option value="ber" >Рейхстаг<br>
<option value="mil">Оперный театр Ла Скала<br>
<option value="ier">Cтeнa Плача<br>
<option value="mek">Священный камень Кааб<br>
<option value="spb">Медный Всадник<br>
<option value="mos">Третьяковская галерея<br>
<option value="par">Tpиyмфaльнaя Арка<br>
<option value="new">Статуя Свободы<br>
<option value="lon">Tayэp<br>
</select>
</TD>
<TD>
<select size=7 name="answer" onChange="eq()">
<option value="spb">Caнкт-петербург<br>
<option value="mos">Mocква<br>
<option value="mek">Meккa<br>
<option value="ier">Иepycaлим<br>
<option value="mil">Милан<br>
<option value="par">Пapиж<br>
<option value="mad">Мадрид<br>
<option value="lon">Лoндoн<br>
<option value="new">Нью-Йорк<br>
<option value="ber">Бepлин<br>
</select>
</TD></TR>
</TABLE>
<CENTER><P>
<input type="button" value= "Результат" onclick="result(}"><br>
Количество правильных ответов
<input type="text" name="res" size="5"><P>
<input type="reset" value= "Обновить" onclick="sum=0">
</FORM>
</BODY>
</HTML>
Цветовое оформление таблицы и ячеек
Напишем сценарий, который позволяет выбирать цвет фона для всей таблицы и ячеек и продемонстрировать, как будет выглядеть документ при разном цветовом оформлении.
Предположим, что для размещения картин в галерее требуется задать цвет фона стены и цвет рамок картин. В рассматриваемом примере с помощью выбора цвета фона таблицы и цвета фона ее ячеек задается та цветовая гамма, которая более удачно соответствует изображениям или вкусам пользователя. Выбор цвета фона таблицы и ячеек выполняется с помощью списка. Не предусматривается возможность задания для каждой из ячеек отдельного цвета. HTML-код документа, содержащего функции, выполняющие необходимые преобразования, имеет вид, представленный в листинге 6.10.
Листинг 6.10. Цветовое оформление таблицы и ячеек
<HTML>
<HEAD>
<TITLE>Таблицы, цвет фона всей таблицы и отдельной ячейки</TITLE>
<script>
<!-—
function rset(obj)
{ document.all("itab").bgColor="silver"
document.all("itabl").bgColor="gray"
document.all("itab2").bgColor="gray"
document.all("itab3").bgColor="gray"
document.all("itab4").bgColor= "gray"
document.all("itab").border=l
document.all("itab").cellSpacing=10
document.all("itab").cellPadding=20
obj.bor.value=l
obj.cells.value=10
obj.cellp.value=20
}
function gr(obj,m)
{ document.all("itab").bgColor=((obj.elements[5])[m]).text }
function grcol(obj,m)
{ document.all("itabl").bgColor=((obj.elements[5])[m]).text
document.all("itab2").bgColor=((obj.elements[5])[m]).text
document.all("itab3").bgColor=((obj.elements[5])[m]).text
document.all("itab4").bgColor=((obj.elements[5])[m]).text
}
function set(obj)
{ document.all("itab").border=Number(obj.bor.value)
if (obj.cells.value != "")
document.all("itab").cellSpacing=Number(obj.cells.value)
if (obj.cellp.value != "")
document.all("itab").cellPadding=Number(obj.cellp.value)
}
//—>
</script>
</HEAD>
<BODY id="doc">
<TABLE border=2 background="fon3.gif">
<TR><TD align=center><В>Изменяемые параметры</В></ТD>
<TD align=center><B>Цвет фона всей таблицы
и отдельной ячейки</В></ТD>
</TR>
<TR>
<TD valign=top>
&пЬзр;<Введите значения параметров
<FORM name="form1">
<input type="text" size=8 name=bor value=l>
Толщина рамки<br>
<input type="text" size=8 name=cells value=10>
Расстояние между ячейками<br>
<input type="text" size=8 name=cellp value=20>
Поля внутри ячейки<br><br>
<CENTER>
<input type="button" value="Просмотр" onclick="set(forml)">
<input type="reset" value="Обновить"
onclick="rset(forml)"><br><br>
</CENTER>
<TABLE border=l align=center background="fonl. jpg">
<TR><TD colspan=2 align=center>Цвет фона</TD></TR>
<TR><TD align=сеnter>таблицы</ТD>
<TD align=center>ячeйки</TD></TR>
<TR>
<TD align=center valign=top>
<select name= col size=l
onChange="gr(forml,forml.col.value)">
<option value=0 >red
<option value=l>green
<option value=2>black
<option value=3>maroon
<option value=4>green
<option value=5>olive
<option value=6>navy
<option value=7>purle
<option value=8>teal
<option value=9>gray
<option value=10 selected>silver
<option value=ll>yellow
<option value=12>blue
<option value=13>fuchsia
<option value=14>white
</select>
</TD>
<TD align=center valign=top>
<select name= colcol size=l
onChange="grcol(forml,forml.colcol.value)">
<option value=0>red
<option value=l>green
<option value=2>black
<option value=3>maroon
<option value=4 selected>green
<option value=5>olive
<option value=6>navy
<option value=7>purle
<option value=8>teal
<option value=9>gray
<option value=10>silver
<option value=ll>yellow
<option value=12>blue
<option value=13>fuchsia
<option value=14>white
</select>
</FORM>
</TD>
</TR>
</TABLE>
</TD>
<TD>
<TABLE id="itab" border=l cellspacing=10 cellpadding=20
bgcolor=silver align=center>
<TR>
<TD id="itab1" bgcolor=gray>
<A href="P1.jpg">
<IMG src="Pl.jpg" border="0" width="150"></A></TD>
<TD id="itab2" bgcolor=gray >
<A href="P2.jpg">
<IMG src="P2.jpg" border="0"width="150"></A></TD>
</TR>
<TR>
<TD id="itab3" bgcolor=gray>
<A href="P3. jpg"><IMG src="P3.jpg"
border="0" width="150"></A>
</TD>
<TD id="itab4" bgcolor=gray>
<A href="P4.jpg"><IMG src="P4.jpg"
border="0" width="150"></A>
</TD></TR></TABLE></TD></TR>
</TABLE>
</BODY>
</HTML>
Напишем сценарий, который позволяет указывать значения параметров горизонтального выравнивания для трех изображений, расположенных в документе. После выбора значения параметров следует нажать кнопку Про смотр, чтобы просмотреть документ при разных вариантах выравнивания. На рис. 6.9. представлен документ с выбранными параметрами горизонтального размещения
Рис. 6.9. Расположение нескольких изображений в тексте.
В верхней части документов в таблице расположены рисунки и списки для выбора значений параметров выравнивания. При нажатии кнопки Просмотр изменяется расположение трех изображений относительно друг друга и текстовой строки. Код HTML для данного документа представлен в листинге 6.11.
Листинг 6.11. Горизонтальное выравнивание трех изображений в строке
<HTML>
<HEAD>
<TITLE>Расположение изображения относительно строки</TITLE>
<script>
<!-—
var kl="TOP"
var k2="TOP"
var k3="TOP"
function setk(i)
{ var k
var obj=eval("form"+i)
if (((obj.elements[0])[0]).selected)
k=((obj.elements[0])[0]).value
if (((obj.elements[0])[1]).selected)
k=((obj.elements[0])[1]).value
if (((obj.elements[0])[2]).selected)
k=((obj.elements[0])[2]).value
if (((obj.elements[0])[3]).selected)
k=((obj.elements[0])[3]).value
if (((obj.elements[0])[4]).selected)
k=((obj.elements[0])[4]).value
if (((obj.elements[0])[5]).selected)
k=((obj.elements[0])[5]).value if (i==l)
k1=k
else
if (i==2)
k2=k
else
k3=k
}
function set()
{ document.pict1.align=kl
document.pict2.align=k2
document.pict3.align=k3
}
//-->
</script>
</HEAD>
<BODY bgcolor="F8F8FF">
<CENTER>
<H4 align=center>Pacпoлoжeниe изображения относительно строки</Н4>
Для трех используемых изображений выберите значение параметра
выравнивания align и нажмите кнопку <В>Просмотр</В>.<br>
Вы увидете как располагаются изображения в тексте.
<TABLE border=2 bgcolor=silver>
<TR>
<TD align=center><IMG src=p521.jpg width=50></TD>
<TD align=center><IMG src=p522.gif></TD>
<TD align=center><IMG src=p523.gif></TD>
</TR>
<TR>
<TD><FORM name="form1">
<select name=sell size=l onchange="setk(1)">
<option value="top" checked>TOP
<option value="texttop">TEXTTOP
<option value="middle">MIDDLE
<option value="absmiddle">ABSMIDDLE
<option value="bottom">BOTTOM
<option value="absbottom">ABSBOTTOM
</select>
</FORM></TD>
<TD><FORM name="form2">
<select name=sel2 size=l onchange="setk(2)">
<option value="top" checked>TOP
<option value="texttop">TEXTTOP
<option value="middle">MIDDLE
<option value="absmiddle">ABSMIDDLE
<option value="bottom">BOTTOM
<option value="absbottom">ABSBOTTOM
</select>
</FORM></TD>
<TD><FORM name="form3">
<select name=sel3 size=l onchange="setk(3)">
<option value="top" checked>TOP
<option value="texttop">TEXTTOP
<option value="middle">MIDDLE
<option value="absmiddle">ABSMIDOLE
<option value="bottom">BOTTOM
<option value="absbottom">ABSBOTTOM
</select>
</FORM></TD>
</TR></TABLE>
<FORM>
<input type="button" value= "Просмотр" onclick="set()">
<input type="reset" value="Обновить">
</FORM>
</CENTER>
<TABLE border=2 bgcolor="#FFDCDC">
<TR><TD>
Параметры выравнивания
<IMG src=p521.jpg align=TOP name=pictl> задают
<IMG src=p522.gif align=TOP name=pict2>
расположение изображения относительно строки текста.
<IMG src=p523.gif align=TOP name=pict3>
В этом случае изображение является обычным элементом строки.
</TD></TR></TABLE>
</BODY>
</HTML>
1. Напишите сценарий, который позволяет выбрать для таблицы и составляющих ее ячеек либо цвет фона, либо фоновое изображение, либо и то и другое. Предусмотрите возможность задания своего цвета фона для каждой ячейки.
2. Напишите сценарий, который позволяет посчитать стоимость предполагаемой покупки. Задается список продуктов, цена за единицу товара и количество экземпляров.
3. Напишите сценарий, обрабатывающий результаты ответа на вопросы по теме "Работа с архивами". Вопросы и возможные ответы представьте в виде списков.
Вопросы и варианты ответов таковы:
• Выделите те программы, которые являются архиваторами.
• Для чего используются архивы?
• Что может архиватор?
• Какие архиваторы позволяют создавать многотомные архивы?
• Основными характеристиками архиватора являются...
• На что указывает расширение в имени файла?
• Архивация — это...
| Назад | Содержание | Вперед |