| Роботландский Университет © А.А.Дуванов |
урок 9 |
зачет |
задания |
урок 11
В уроке рассмотрены следующие темы:
Интерфейсные элементы — меню и многострочное поле —
задаются внутри формы при помощи блоков
меню (SELECT)
Блок
|
Меню чаще всего используют в режиме, когда из нескольких предлагаемых вариантов можно выбрать только один, и в этом случае меню напоминает переключатель с радиокнопками. |
Команда SELECT имеет следующий HTML-формат:
<SELECT атрибуты> <OPTION атрибуты>строка меню</OPTION> ... <OPTION атрибуты>строка меню</OPTION> </SELECT>
Внутри блока
Приведенному выше примеру меню, соответствует такой код:
<SELECT name=menu> <OPTION selected>А.Пушкин</OPTION> <OPTION>М.Лермонтов</OPTION> <OPTION>В.Высоцкий</OPTION> <OPTION>О.Какаулин</OPTION> <OPTION>Б.Окуджава</OPTION> </SELECT> |
<SELECT name=menu size=4> <OPTION selected>А.Пушкин</OPTION> <OPTION>М.Лермонтов</OPTION> <OPTION>В.Высоцкий</OPTION> <OPTION>О.Какаулин</OPTION> <OPTION>Б.Окуджава</OPTION> </SELECT> |
Если атрибут size не задан, он считается равным 1.
Объект, построенный браузером для блока
document.forma.menu.options[0] |
указывает на первый объект массива options. |
Запись:
document.forma.menu.options[1] |
указывает на второй объект массива options. |
Каждый элемент массива options, являясь объектом, имеет следующие свойства:
var item0 = document.forma.menu.options[0].text; |
Переменная item0 получит значение "А.Пушкин".
Ниже приводится испытатель, демонстрирующий правила доступа к свойствам text, selected и defaultSelected элемента массива options.
Вспомним, что внутри формы вместо document.forma (forma — это имя формы) можно использовать запись this.form, и тогда форму можно не именовать:
Чтобы читатель не запутался в перечисленных свойствах, ниже приводится краткая схема. Примеры обращения к свойствам относятся к случаю, когда тег SELECT имеет имя menu и расположен внутри формы с именем forma.
length document.forma.menu.length selectedIndex document.forma.menu.selectedIndex options document.forma.menu.options text document.forma.menu.options[0].text selected document.forma.menu.options[0].selected defaultSelected document.forma.menu.options[0].defaultSelected
|
Программа этого фрагмента зачетного урока приводится ниже. |
В форме HTML можно разместить многострочное поле ввода, которое представляет собой простой текстовый редактор.
Блок TEXTAREA имеет следующий HTML-формат:
<TEXTAREA атрибуты> текст </TEXTAREA>
Текст, размещаемый между начальным и конечным тегами, будет выводиться в многострочное поле вывода по умолчанию. На экране этот текст представляется точно в таком виде, в которым он записан в программе. Если текст содержит HTML-теги, то они выводятся на экран как обычные символы, лишаясь своего специального смысла.
Объект, построенный браузером для блока
Поработайте на этом испытателе:
Программа испытателя показана ниже:
<P>Замените “чужие” слова на правильные:
<P>
<FORM>
<TEXTAREA name=edit rows=7 cols=44>
Покрывало
Убежало,
Улетела размазня,
И кукушка,
Как лягушка,
Ускакала от меня.
</TEXTAREA>
<NOBR>
<INPUT type=reset value=Восстановить
> <INPUT type=button value=value
onclick="alert(this.form.edit.value)"
> <INPUT type=button value=defaultValue
onclick="alert(this.form.edit.defaultValue)">
</NOBR>
</FORM>
|
Содержимое поля можно не только читать, но и менять внутри программы-скрипта.
Программа этого стенда показана ниже:
<SCRIPT language=JavaScript>
<!--
var text1 = "В далеком созвездии Тау-Кита\r\n"+
"Все стало дл\я нас непон\ятно.\r\n"+
'Сигнал посылаем: "Вы что это там?"\r\n'+
"А нас посылают обратно.\r\n";
var text2 = "Джон Ланкастер в одиночку,\r\n"+
"Преимущественно ночью,\r\n"+
"Чем-то щелкал,\r\n"+
"В чем был спр\ятан инфракрасный объектив,\r\n"+
"А потом в нормальном свете\r\n"+
"Представало в черном цвете\r\n"+
"То, что ценим мы и любим,\r\n"+
"Чем гордитс\я коллектив.\r\n";
var text3 = "Удар, удар, еще удар,\r\n"+
"Оп\ять удар и вот\r\n"+
"Борис Буткеев (Краснодар)\r\n"+
"проводит апперкот.\r\n";
//-->
</SCRIPT>
<FORM>
<TEXTAREA name=edit rows=8 cols=54 readonly>
Из песен Владимира Высоцкого
- - - - - - - - - - - - - - -
</TEXTAREA>
<NOBR>
<INPUT type=reset value=Сброс
> <INPUT type=button value="Тау-Кита"
onclick="this.form.edit.value=text1;"
> <INPUT type=button value="Джон Ланкастер"
onclick="this.form.edit.value=text2;"
> <INPUT type=button value=Боксер
onclick="this.form.edit.value=text3;">
</NOBR>
</FORM>
|
Обратите внимание на то, что концы текстовых строк, предназначенных для вывода в окошко редактора TEXTAREA, необходимо явно помечать символами “\r\n”.
Программа универсального испытателя скриптов:
<P>
Напишите скрипт и для запустите его кнопкой <EM>Go</EM>. Для
показа результата, используйте команду <TT>alert</TT>.
<P>
<FORM>
<TEXTAREA name=edit rows=7 cols=54>
// Вычисление суммы элементов массива
var set = new Array(1,2,3,4,5,6,7,8,9,10);
var sum = 0;
for(var i=set.length; --i>=0;)
sum += set[i];
alert(sum);
</TEXTAREA>
<INPUT type=reset value=Восстановить
> <INPUT type=button value=Go
onclick="eval(this.form.edit.value);"
</FORM>
|
Нажмите кнопку Сброс, затем приступайте к решению.
Электронный контролер. Разработайте приложение, которое можно будет использовать для проведения диктантов и контрольных работ.
Диктант. Ученик записывает текст под диктовку в экранный редактор, затем нажимает кнопку Проверить. Приложение сравнивает написанный текст с заранее заготовленным образцом. Слова с ошибками демонстрируются при помощи функции alert. Когда все ошибки исправлены, приложение выставляет оценку.
Контрольная работа. Ученик заполняет в тексте на экране пропущенные места (они могут быть представлены, например, символами подчеркивания), затем нажимает кнопку Проверить. Приложение сравнивает написанный текст с заранее заготовленным образцом. Слова с ошибками показываются при помощи функции alert. Когда все ошибки исправлены, приложение выставляет оценку.
Электронный контролер может быть снабжен кнопкой Помощь,
нажатие на которую создает дополнительное окно и выводит в него
справочник по тем правилам, на которые ориентирован диктант или
контрольная работа.
|
