Лабораторная работа №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.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>
Если щелкнуть по кнопке с изображением цифры 5, то появится сообщение:
Выбор цифр 4 или 6 приведет к появлению сообщения:
В данной программе неправильный выбор ответа обрабатывается с помощью функции 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>
Для запуска тестирующего скрипта нужно активировать одно из полей переключателя и нажать на кнопку «Проверка решения». В результате этого на экране появится одно из двух сообщений:
