Лабораторная работа №3. Текстовая область textarea и интерактивные формы.

Текстовая область textarea позволяет ввести (и вывести) большой объем многострочного текста. Размер текстовой области определяется с помощью атрибутов (свойств) cols и rows (столбцов и строк). При этом атрибут cols определяет, сколько символов можно разместить в одной строке. Атрибут rows задает число строк, видимых в текстовой области.

Упражнение 3.1. В этом упражнении скрипт демонстрирует возможность языка JavaScript считывать информацию из текстовой области, превращать содержимое окна в текстовую переменную и выводить ее с помощью метода alert(). Создайте HTML-код и сохраните его как textarea.htm.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<div align="center">

<b>ТЕКСТОВАЯ ОБЛАСТЬ</b>

<form name="formTa">

<textarea name="tar1" cols="40" rows="5">

Текстовая область textarea позволяет ввести (и вывести) большой объем многострочного текста. Размер текстовой области определяется с помощью атрибутов (свойств) cols и rows. При этом атрибут cols определяет, сколько символов можно разместить в одной строке. Атрибут rows задает число строк, видимых в текстовой области.

</textarea>

</form>

<form name="formBut">

<input type=Button value="Запуск"

onclick="javascript:Func1()">

</form>

<script language="JavaScript">

function Func1() {

var a=document.formTa.tar1.value;

// Переменной a присвоено содержимое текстовой области

alert(a);

}

</script>

</div>

</head>

<body>

</body>

</html>

Лабораторная работа №3. Текстовая область textarea и интерактивные формы. - student2.ru

Содержимое текстовой области можно изменить, например, набрать фразу «Другой текст». После щелчка по кнопке «Запуск» появится следующее сообщение:

Лабораторная работа №3. Текстовая область textarea и интерактивные формы. - student2.ru

Далее рассматривается интерактивное взаимодействие пользователя с компьютером. Наиболее просто это реализуется с помощью кнопок.

Упражнение 3.2. Тест для ученика начальных классов. Создайте HTML-код и сохраните его как interactive_form.htm.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>Интерактивные формы</title>

<script language="JavaScript">

function Verno1() {

alert("Вы - математик...");}

function Neverno() {

alert("Шутите?");}

</script>

</head>

<body>

<P align="center"><b>ВОПРОС: СКОЛЬКО БУДЕТ 2+3?</b>

<form name="form1">

<table align="center" cellspacing="2" cellpadding="2" border="3">

<tr>

<td>Возможные ответы</td>

<td><input type=Button value="4"

onclick="javascript:Neverno();"></td>

<td></td>

<td><input type=Button value="5"

onclick="javascript:Verno1();"></td>

<td></td>

<td><input type=Button value="6"

onclick="javascript:Neverno();"></td>

</tr>

</table>

</form>

</body>

</html>

Лабораторная работа №3. Текстовая область textarea и интерактивные формы. - student2.ru

Если щелкнуть по кнопке с изображением цифры 5, то появится сообщение:

Лабораторная работа №3. Текстовая область textarea и интерактивные формы. - student2.ru

Выбор цифр 4 или 6 приведет к появлению сообщения:

Лабораторная работа №3. Текстовая область textarea и интерактивные формы. - student2.ru

В данной программе неправильный выбор ответа обрабатывается с помощью функции Neverno(). Выбор правильного ответа запускает функцию Verno1(). Скрипт запускается однократным щелчком левой кнопки мыши (onclick) по кнопке с возможным ответом (Button).

Эта же задача тестирования может быть решена несколько иначе: с помощью переключателей

Упражнение 3.2.Создайте HTML-код и сохраните его как interactive_form_1.htm.

<html>

<head>

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>Интерактивные формы</title>

</head>

<body>

<P align="center"><b>ВОПРОС: СКОЛЬКО БУДЕТ 2+3?</b>

<form name="Test2">

<table align="center" cellspacing="2" cellpadding="2" border="3">

<tr>

<td>Переключатель</td>

<td>Подсказки</td>

</tr>

<tr align="center">

<td><input type=radio value ="1" name="Otv"></td>

<td>4</td>

</tr>

<tr align="center">

<td><input type=radio value ="2" name="Otv"></td>

<td>5</td>

</tr>

<tr align="center">

<td><input type=radio value ="3" name="Otv"></td>

<td>6</td>

</tr>

<tr align="center">

<td colspan="2"><input type=button value="Проверка решения"

Name="Go" onclick="javascript:Rbut();"></td>

</tr>

</table>

</form>

<script language="JavaScript">

Function Rbut()

{

otv=document.Test2.Otv[1].checked;

if(otv){alert("Потрясающе!");}

else {alert("Увы…");}

}

</script>

</body>

</html>

Лабораторная работа №3. Текстовая область textarea и интерактивные формы. - student2.ru

Для запуска тестирующего скрипта нужно активировать одно из полей переключателя и нажать на кнопку «Проверка решения». В результате этого на экране появится одно из двух сообщений:

Лабораторная работа №3. Текстовая область textarea и интерактивные формы. - student2.ru Лабораторная работа №3. Текстовая область textarea и интерактивные формы. - student2.ru

Наши рекомендации