Форм в интерактивных документах

Цель задания: научиться использовать формы в интерактивных документах

В интерактивных документах представляется возможность удобного формализованного ввода исходных данных и формализованного вывода результатов вычислений. Для этого используются формы. Для предыдущего примера в поля форм вводятся значения стоимости чашки a, разницы в стоимости чашки и заварного чайника D, числа чашек N. Результаты вычислений помещаются в соответствующие поля форм после нажатия левой клавишей мыши по кнопке Вычислить.

Действия пользователя (например, нажатие на клавишу мыши или другие действия с элементами форм HTML) вызывают событие. В коде программы перехват и обработка события задается в параметрах элементов форм. Имя параметра обработки события начинается с приставки on. После этого следует имя события. Так, событие Click, обусловленное нажатием клавиши мыши, записывается как onClick. Параметрами обработки события могут быть операторы языка JavaScript. Так, можно задать вызов функции, которая должна выполняться при возникновении события. Например, onClick = «F1 (фактические параметры функции)». Для работы с формой в языке принята следующая конструкция:

Описание формы

</FORM>

Здесь form1 это заданное пользователем имя формы.

Так, для работы с формой, при помощи которой вводятся фактические параметры функции и помещаются в параметры обработки, события можно записать в виде кода программы, представленной на листинге 3.

Листинг 3.Код программы с включением формы

<HTML>

<HEAD>

<ТITLE> Использование форм для ввода и обработки событий из

формы</ТIТLЕ>

< ! - - //

function F1()

{

var a=Number(document.form1.a1.value)

var D=Number(document.form1.D1.value)

var N=Number(document.form1.N1.value)

var S=a*N+a+D;

return S

}

// - - >

</script>

</Head>

<BODY>

Стоимость чашки, руб. : <input type="text" size=5 name="a1"><hr>

Разница в стоимости чашки и чайника, руб. :<input type="text" size=5 name="D1"><hr>

Число чашек : <input type="text" size=5 name="N1"><hr>

<input type="button" vаluе=Вычислить

onClick="document.form1.res.value=F1()"><br>

Стоимость сервиза, руб. :<input type="text" name=res size=4><br>

Стоимость чайника, pyб. :<input type="text" name=a1+D1 size=4><br>

</FORM>

</Body>

</HTML>

Выполнение:

1. Запустите текстовый редактор Блокнот, последовательно выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.

2. Введите текст, согласно Листингу 3.

3. Сохранить программу в своей папке с расширением .txt, присвоив файлу имя Zadanie9_3.txt

4. Сохранить программу в своей папке с расширением .htm, присвоив файлу имя Zadanie9_3.htm

5. Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем Zadanie9_3.htm

6. Ввести в поля формы исходные данные.

7. Нажать кнопку Вычислить и получить результаты вычислений в полях формы.

8. Нажать кнопку Обновить и ввести новые данные.

9. Нажать кнопку Вычислить и получить результаты вычислений для новых исходных данных в полях формы.

10.Сохранить программу и результаты вычислений в своей папке.

Вид формы до заполнения показан на рис. 1.

Вид формы после заполнения полей формы данными и нажатия кнопки Вычислить показан на рис. 2.

Стоимость чашки, руб.:

Разница в стоимости чашки и чайника, руб.:

Число чашек:

Вычислить

Стоимость сервиза, руб.:

Стоимость чайника, руб.:

Обновить

Рис. 1. Вид формы до заполнения