CC BY
85
Дмитриева Марина Валерьевна
JAVASCRIPT. ЗАНЯТИЕ 2. ПЕРЕКЛЮЧАТЕЛИ, ФЛАЖКИ, СПИСКИ
От редакции:
Этой статьей журнал продолжает публикацию занятий нового курса Заочной школы современного программирования — курса по языку JavaScript. Хотя курс проходит под лозунгом «Создаем наш сайт», язык JavaScript рассматривается не только как инструмент для оформления web-страниц, но и как средство обучения программированию.
Публикация материалов Заочной школы1 ведется с опережением. Продолжается запись желающих пройти этот курс. (Все курсы1 ЗШСП начинают работу с 1-ого октября). Записавшиеся получат, наряду с текстами занятий, индивидуальные задания, результаты1 которыа станут составной частью создаваемого учебного сайта.
В журнальном варианте занятий приводится достаточное количество задач для самостоятельного изучения язы ка или для работы с этим материалом на уроках информатики.
Отметим, что главной темой очередного конкурса «Петербургская Интернет-школа» в 2003 году будет тема «Создаем виртуальныш музей занимательной науки». Этот конкурс пройдет при поддержке Санкт-Петербургского Университета педагогического мастерства. Журнал приглашает к участию в нем коллективы1 и отдельные школьников из Санкт-Петербурга и других регионов России. Информацию о прошедших конкурсах можно посмотреть на сайте журнала, условия конкурса будут напечатаны в следующем номере журнала и в сентябре размещены на сайте журнала.
ПЕРЕКЛЮЧАТЕЛИ
Данные удобно представлять с помощью элемента управления - переключателя (или радиокнопки) в том случае, когда из нескольких вариантов может быть выбран лишь один. Например, для указания возраста можно задать интервалы: • «моложе 30»,
• «от 31 до 40»,
• «от 41 до 60»,
• «старше 61».
Пользователь может выбрать тот интервал, который определяет его возраст. Оценки, полученные на экзамене, также удобно представить переключателем, так как каждый студент может получить лишь одну из оценок (2, 3, 4, 5). Для представления информации о полученном зачете достаточно двух радиокнопок. С помощью переключателя можно представлять информацию о семейном положении, об образовании и многое другое.
Предположим, что некоторая фирма принимает заказы на изготовление витражей. Заказчик должен выбрать форму витража, количество, указать размеры, материал и др. Требуется определить сто-
имость заказа. Мы рассмотрим лишь фрагмент, в котором выбирается форма витража. Документ приведен на рисунке 1.
Переключатель - Microsoft... _ □ х
J Файл Правка Вид Избра! у> m
Выберите форму витража
круг Р квадрат
Выберите размер (радиус
крутя ИЛИ fTOpOHV
квадрата)
[го
; Площадь [400
Отменить |
Рисунок 1.
ПРИМЕР 1. ПЛОЩАДЬ ВЫБРАННОЙ ФИГУРЫ
Выбор формы осуществляется с помощью переключателя (или радиокнопки). Элемент переключатель отображается в виде круглой кнопки, существует только в составе группы подобных элементов. Может быть осуществлен выбор лишь од-
Листинг 1. Площадь выбранной фигуры
<html> <head>
<title>nnorn;aflb фигуры, выбранной с помощью переключателя</^^е> <script>
function test (obj) { var a= obj.num.value var s if (a=="")
{alert ("Вы не указали размер")} else {a=Number (a)
if (obj.elements[0].checked)
{s=a*a*3.14; obj.res.value=s } else
if (obj.elements[1].checked)
{s=a*a; obj.res.value=s } else
alert ("Вы не выбрали форму")
}
}
</script>
</head>
<body>
<h4> Выберите форму витража<^4> <form name="form1">
<input type ="radio" name="fv" value=1>круг<br> <input type ="radio" name="fv" value=2>квaдрaт<br> <h4> Выберите размер (радиус круга или сторону квадрата)<^4> <input type ="text" name="num" size=10><br>
<input type ="button" value="Площадь" onClick="test(form1)"><br> <input type ="text" name="res" size=10Xbr> <input type ="reset" value=Oтменить> </formX/bodyX/html>
ного элемента группы. Все элементы группы должны иметь одинаковое значение параметра name. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы.
Так как объект forms имеет свойство-массив elements, в котором содержатся ссылки на элементы формы в порядке их перечисления в теге <form>, получить доступ к первому элементу формы можно с помощью конструкции: document.form1.elements[0]. Этот элемент-переключатель определен в составе группы элементов. В рассматриваемом примере группа элементов состоит из двух переключателей. Свойство checked выдает значение true, если переключатель выбран, и false - в противном случае. Второй элемент рассматриваемой формы можно получить, если воспользоваться конструкцией: document.form1.elements[1]. К другим элементам формы в сценарии обращение производится по именам, хотя и в этом случае можно было бы воспользоваться свойством elements.
ФЛАЖКИ
Элемент управления флажок используется в случае, когда из предложенных вариантов можно выбрать как один вариант, так и несколько. Каждый вариант выбора задается флажком, который можно либо установить, либо сбросить. Фла-
жок определяется в теге <input> значением checkbox параметра type. Обязательным параметром является параметр value, значение которого будет передано на обработку в случае выбора кнопки.
ПРИМЕР 2. ХАРАКТЕРИСТИКИ ИЗДАНИЯ
Читателю предлагается заполнить анкету, в которой требуется указать название любимого издания и выбрать из предложенного списка характеристики, которые присущи рассматриваемому изданию.
Для задания характеристик издания можно воспользоваться флажком. Пользователь устанавливает флажки для тех свойств, которыми, по его мнению, обладает издание. Обработка анкеты будет состоять в том, что выбранные свойства будут отражены в поле для ввода многострочного текста (рисунок 2).
Рисунок 2. Анкета читателя
При щелчке мышью по флажку возникает событие Click, обработка которого состоит в вызове функции set с одним параметром, значением параметра value флажка. Для формирования строки результата используется глобальная переменная s, к имеющемуся значению добавляется значение параметра функции и помещается в текстовое поле. Если на-
жать на кнопку Отмена, то очистятся все поля формы. Однако надо позаботиться о том, чтобы значение переменной s изменилось на начальное. Значением параметра реакции на событие Click при щелчке по кнопке Отмена является оператор присваивания, обеспечивающий начальные условия. Документ может быть описан так (см. листинг 2).
Листинг 2. Анкета читателя
<HTML> <HEAD>
<Т1^Е>Анкета читателя </TITLE>
<script>
<!--
var s="Вaс привлекает в издании: \r\n" function set(vch) {s+= vch +"\r\n" document.form2.area.value=s} //->
</script>
</HEAD> <body bgcolor="F8F8FF"> <center>
<h3 align="center">Aнкетa читaтеля</h3> <form name="form1">
<h4>Введите название любимого журнала или газеты<^4>
<input type="text" name="nj" size=45><br>
</form>
<h4>4^ Вас привлекает в издaнии?</h4> <table border=3 align=center>
<trXtdXimg src="purpsm.gif" align="center" X/td> <tdXform name="form2">
<input type="checkbox" name="m1" value="Cтиль подачи материала"
onClick="set(form2.elements[0].value)">Cтиль подачи мaтериaлa<br> <input type="checkbox" name="m2" value="Дoстoвернoсть информации" onClick="set(form2.elements[1] .value)">Дoстoвернoсть инфoрмaции<br> <input type="checkbox" name="m3" value="Дизaйн и оформление"
onClick="set(form2.elements[2].value)">Дизaйн и оформлением^ <input type="checkbox" name="m4" value="Kaчествo информации"
onClick="set(form2.elements[3].value)">Kaчествo инфoрмaции<br> <input type="checkbox" name="m5" value="Pепутaция издания"
onClick="set(form2.elements[4].value)">Pепутaция изданиями <input type="checkbox" name="m6" value="Pегулярнoсть издания" onClick="set(form2.elements[5].value)">Pегулярнoсть издaния<br> </tdX/trX/table>
<textarea name="area" cols=35 rows=7X/textareaXbr>
<input type="reset" value="Oтменa" onclick="s='Вaс привлекает: \r\n'">
</form>
</BODY>
</HTML>
СПИСКИ
Если элементов много, то представление их с помощью флажков или кнопок-переключателей увеличивает размер формы. Варианты выбора могут быть представлены в окне браузера более компактно с помощью тега <select>. Напомним, что тег имеет несколько параметров. Параметр name является обязательным. Для того чтобы установить число одновременно видимых элементов, следует задать параметр size=n. Если n равно 1, то отображается ниспадающее меню или список выбора, если n >1, то отображается список прокрутки с n одновременно видимыми значениями. Если параметр size не задан, то по умолчанию принимается значение, равное 1. Задание параметра multiple означает, что из меню или из списка можно выбрать несколько элементов. Элементы меню задаются внутри тега <select> с помощью тега <option>. Общий вид тега <option selected value=стрoкa>. Параметр selected означает, что данный элемент списка считается выбранным по умолчанию. Параметр value содержит значение, которое передается, если данный элемент выбран из списка или из меню.
ПРИМЕР 3. ТЕСТ НА ОБРАБОТКУ СПИСКОВ
Рисунок 3. Данные, представленные списками
ле щелчка по кнопке Определить в текстовом поле появляется текстовое название выбранной оценки (рисунок 3).
ИТМЬ-код представленного на рисунке документа приведен в листинге 3.
Задание
Напишем сценарий, который обрабатывает данные, представленные списком. Пользователь выбирает оценку, пос-
В следующих задачах требуется написать простой сценарий и обработать данные, представленные либо переключателем, либо флажком, либо списком.
1. В документе отрезок задается на плоскости координатами концов. Требуется определить длину той части отрезка, которая расположена в заданной четверти прямоугольной системы координат.
Листинг 3. Обработка данных, представленных списком
<HTML> <HEAD>
<TITLE>06pa6oTKa данных, представленных cnMCKOM</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--//
function testsel() {var d= document var s
if(((d.forms["form1"].elements[0])[0])selected) s=((d.forms [ "form1"].elements[0]) [0]).value if(((d.forms["form1"].elements[0]) [1]) .selected) s=((d.forms [ "form1"] .elements[0]) [1]).value if(((d.forms [ "form1"] .elements[0]) [2]) . selected) s=((d.forms["form1"] .elements[0]) [2]).value if(((d.forms["form1"].elements[0]) [3]) .selected) s=((d.forms ["form1"] .elements[0]) [3]).value
return s }
//-- >
</SCRIPT>
</HEAD>
<BODY>
<FORM name= " form1" form1" >
<h4>Pезyльтaты сдачи 3K3aMeHa</h4>
Выберите оценку, полученную Ha 3K3aMeHe<brXbr>
мaтeмaтикa: <select name="forma" size=1>
<option value="неудовлетворительно">2
<option value="yдoвлeтвopитeльнo">3
<option value="xopomo">4
<option value="oтличнo">5
</select><br><br>
<INPUT type="button" value=0npeдeлить onClick="form1.res.value=testsel()"> <br><br>
Bama oцeнкa: <INPUT type="text" name="res" size=20XbrXbr> <INPUT type="reset" value="0тмeнить"> < / FORMX / BODYX / HTML>
Номер четверти выбирается с помощью переключателя.
2. Треугольник на плоскости задается координатами вершин. Все вершины треугольника лежат на координатных осях. Напишите сценарий определения площади той части треугольника, которая лежит в заданной четверти. Номер четверти выбирается с помощью флажка.
3. Треугольник на плоскости задается координатами вершин. Все вершины треугольника лежат на координатных осях. Напишите сценарий определения периметра той части треугольника, кото-
рая лежит в заданной четверти. Номер четверти выбирается с помощью списка.
4. Квадрат на плоскости задается координатами верхнего левого угла и длиной стороны. Стороны квадрата параллельны координатным осям. Напишите сценарий определения площади той части квадрата, которая лежит в заданной четверти. Номер четверти выбирается с помощью переключателя.
5. Квадрат на плоскости задается координатами верхнего левого угла и длиной стороны. Стороны квадрата параллельны координатным осям. Напишите
сценарий определения периметра той части квадрата, которая лежит в заданной четверти. Номер четверти выбирается с помощью списка.
6. Прямоугольник на плоскости задается координатой левого верхнего угла и правого нижнего. Стороны прямоугольника параллельны координатным осям. Напишите сценарий определения площади той части прямоугольника, которая лежит в заданной четверти. Номер четверти выбирается с помощью флажка.
7. Прямоугольник на плоскости задается координатой левого верхнего угла и правого нижнего. Стороны прямоугольника параллельны координатным осям. Напишите сценарий определения периметра той части прямоугольника, которая лежит в заданной четверти. Номер четверти выбирается с помощью списка.
8. Четырехугольник на плоскости задается своими координатами. Все четы-
ре вершины четырехугольника расположены на координатных осях, в документе перечисляются по часовой стрелке. Напишите сценарий определения площади той части четырехугольника, которая лежит в заданной четверти. Номер четверти выбирается с помощью флажка.
9. Четырехугольник на плоскости задается своими координатами. Все четыре вершины четырехугольника расположены на координатных осях, в документе перечисляются по часовой стрелке. Напишите сценарий определения периметра той части четырехугольника, которая лежит в заданной четверти. Номер четверти выбирается с помощью переключателя.
10. Круг на плоскости задается координатами центра и радиусом. Требуется написать сценарий определения, имеет ли круг общие точки с заданной четвертью прямоугольной системы координат. Номер четверти выбирается с помощью флажка.
© Наши авторы: 2002. Оиг аиНюге, 2002,
Дмитриева Марина Валерьевна, доцент кафедры информатики математико-механического факультета Санкт-Петербургского государственного университета.
