Ввод и вывод информации с помощью текстовой области textarea

Форма textarea (текстовая область) по назначению и принципу работы напоминает форму "Текстовое поле", которое задается конструкцией типа . Текстовая область превосходит текстовое поле по удобству работы с большим объемом обрабатываемой информации. Данная форма позволяет работать с многострочным текстом. Так же, как и текстовое поле, текстовую область можно использовать как для ввода, так и для вывода информации.

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

Следующий скрипт демонстрирует возможность языка JavaScript считывать информацию из текстовой области, превращать содержимое окна в текстовую переменную, выводить эту переменную с помощью метода alert(). Скрипт позволяет изменить содержимое текстового окна и измененный текст вывести в информационном окне. Для запуска скрипта нужно нажать на кнопку "Запуск".

ТЕКСТОВАЯ ОБЛАСТЬ

Текстовая область textarea позволяет А ввести (и вывести) большой объем многострочного текста. Размер текстовой области (окно для ввода и вывода информации) определяется с помощью ?!

Запуск

Содержимое текстовой области можно изменить. Например, можно написать слово «Проба».

После щелчка по кнопке «Запуск» появится следующее сообщение:

Приведем код данного скрипта.

script language-'JavaScript"

function Funcl() {

var a=document.formTa.tarl.value;

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

}

/script

Интерактивные формы

Интерактивное взаимодействие пользователя с ЭВМ нередко организуют с помощью различных форм: кнопок, переключателей (радиокнопок), включателей (флажков), списков. Такие элементы удобно использовать, например, при проверке знаний учащихся (школьников, студентов).

Наиболее просто интерактивное взаимодействие пользователя с ЭВМ реализуется с помощью кнопок. Ниже приведен пример несложного тестирования обучаемого (например, ученика начальных классов) путем выбора одного верного ответа из трех предложенных.

Вопрос: сколько будет 2+3?

Возможные ответы

4

_б]

6

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

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

Ниже приведен листинг этого скрипта.

onclick="javascript:Nevemo();">

Bo3MO)KHbie ответы

onclick="javascript:Nevemo();">

onclick="javascript:Vemo 1 ();"x/td>

script language="JavaScript" function Vemol() {

alertf'Bbi - математик...");} function Nevemo() { а1ет1("Шутите?");}

/script Button

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

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

Сколько будет 2+3?

Переключатель

Подсказки

C

4

C

5

c

6

Проверка решения

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

В результате этого на экране появится одно из двух сообщений.

Microsoft Internet Explorer JE3

Потрясающе!

Приведем код этого скрипта.

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

noflCKa3KH
4
5
6

name="Go" onclick="javascript:Rbut();">

script language="JavaScript"

function Rbut()

otv=document.T est2. Otv [ 1 ] .checked;

if (о1у){а1сП("Потрясающс!");}

else {а1ег1("Увы..");}

}

/script

Более серьезная задача проверки знания таблиц истинности с помощью командных кнопок может быть реализована следующим образом.

Выберите правильный ответ

Логический элемент ИЛИ (операция дизъюнкции, логическое сложение)

Логические

выражения

Возможные ответы

0 V0 =

1

0

OV1 =

1

0

1 V0 =

1

0

1 Vl =

1

Выбор правильного или ошибочного ответа приводит к появлению одного из двух сообщений.

Код скрипта размещен ниже.

<1б>Логические <Ьг>выражения<М>

ctdxinput type=Button value="0" onclick-javascript: Yes();"x/td>

ctdxinput type=Button value=" 1 ” onclick="j avascript: Y es(); "x/td> ctdxinput type=Button value="0" onclick="j avascript :No();"x/td>

Логический элемент ИЛИ<Ьг>

(операция дизъюнкции, <Ьг>логическое сложение)

Возможные <Ьг>ответы
0 V 0 =
0 V 1 =
l V 0 =
l V 1 =

script language="JavaScript"

function Yes() {

alert("BepHo");

}

function No() {

а1еП("Ошибка");

}

/script

пок).

Эту же задачу можно решить с помощью переключателей (радиокно

Выберите правильный ответ

Логический элемент ИЛИ

Логические

выражения

Возможные ответы

Для проверки принятого решения сделайте щелчок по кнопке

1

0

ovo =

О

с

Проверка

OV1 =

о

с

Проверка

1 vo =

г

с

Проверка

1 Vl =

с

с

Проверка

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

Возможная реакция скрипта на действия пользователя показана на рисунке.

Microsoft Internet Explorer

Верно!

ОК

Листинг данного скрипта приведен ниже.

ctdxinput type=radio value-'1" name="Otv3"x/td>

ctdxinput typc=radio valuc=" 1" name="Otv4"x/td>

ctdxinput typc=radio valuc="2" name="Otv4">c/td>

ctdxinput type=button value-'Проверка"

name="Go" onclick-'javascript:Analiz4();"x/td>

c/tr>

Логический элемент HJIH
JIorH4ecKHe <Ьг>выражения<Лё>

Возможные OTBeTbi Для проверки <Ьг>принятого решения<Ьг>сделайте щелчок<Ьг>по KHonKe
l O
0 V 0 =

name="Go" onclick-'javascript:Analizl();">

0 V 1 =

name="Go" onclick-'javascript:Analiz2();"x/td>

1 V 0 =

name="Go" onclick-'javascript: Analiz3();"x/td>

l V 1 =

script language="JavaScript"

function Analizl() {

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

if(otvl){alert("BepHo!”);}

else {а1ег!("Увы..");}

}

/script

script language="JavaScript"

function Analiz2() {

otv2=document.Test4.Otv2[0]. checked;

if(otv2){alert("BepHo!");}

else {alert("YBbi..");}

}

/script

script language="JavaScript"

function Analiz3() {

otv3=document.Test4.Otv3[0],checked;

if(otv3){alert("BepHo!");}

else {а1ег!("Увы..");}

}

/script

script language="JavaScript"

function Analiz4() {

otv4=document.Test4.Otv4[0]. checked;

if(otv4){alert(”BepHo!");}

else {а1ег!("Увы..");}

}

/script

Приведем пояснения к данной программе.

Первая строка истинности обрабатывается с помощью функции Analizl(), вторая строка - с помощью функции Analiz2() и т.д.

Следующий скрипт показывает, как с помощью флагов (включателей) решается задача проверки знания таблицы истинности логического элемента ИЛИ. В поля, где должны быть логические единицы, следует ставить флажки. Поля, где должны быть логические нули, должны остаться пустыми. Для проверки принятого решения нужно сделать щелчок по кнопке "Проверить решение".

Выберите правильный ответ

Логический элемент ИЛИ (операция дизъюнкции, логическое сложение)

Логические

выражения

Для ввода 1 установите флаг

0 V0 =

Г

OV1 =

Г

1 vo =

Г

1 Vl =

Г

Проверить решение

Возможные ответы компьютера на действия пользователя показаны на рисунке.

Код программы приведен ниже.

<14>Логические <Ьг>выражения<Л4>

<1с1>Для ввода 1<Ьг>установите флаг<Ж>

Логический элемент ИЛИ<Ьг>

(операция дизъюнкции, <Ьг>логическое сложение)

0 V 0 =

0 V 1 =
l V 0 =
l V 1 =

script language="JavaScript"

function Diz() {

Otvs=new My Array(0,0,0,0);

var Kol=4;

for (i=0; i

Otvs[i]=document.TestFlag.elements[i].checked;

}

Vemo=0tvs[l]&&0tvs[2]&&0tvs[3]&&!0tvs[0];

if (Vemo)

{alertf'OTBeT правильный"); }

if (JVerno)

{а1ег!("Ответ неправильный");} function MyArray(Otl,Ot2,Ot3,Ot4){

this.Otl=Otl;

this.Ot2=Ot2;

this.Ot3=Ot3;

this.Ot4=Ot4;

/script

Для интерактивного взаимодействия пользователя с ЭВМ может быть использован список, из которого следует выбирать подходящий ответ. Например, так, как это сделано в следующем скрипте.

Какой логический элемент описан с помощью этой таблицы истинности?

Выберите ответ из предлагаемого списка

Элемент И (конъюнкция)

Элемент ИЛИ (дизъюнкция)

Элемент ИСКЛЮЧАЮЩЕЕ ИЛИ (неравнозначность)

Реакция программы на действия пользователя будет такой (в зависимости от правильности ответа):

Приведем листинг программы.

x2 x 1 y
O O O
O l l
l O l
l l l

Bbi6cpHTe ответ из предлагаемого списка

c/form>

cscript language=JavaScript>

function Analiz6() {

otvet=document.Diz4.Otvet4.selected!ndex;

if(otvet==l) {alert('7Ja");}

else {alert(”Her");}

}

Списки позволяют выбирать несколько правильных ответов из множества предложенных (многовариантный ответ). Этим списки несколько напоминают включатели (флажки). Рассмотрим скрипт, позволяющий делать множественный выбор из предложенного списка ответов.

Задание.

Из восьми предложенных строк выберите четыре строки, которые описывают работу логического элемента ИЛИ. Для множественного выбора используйте клавишу Ctrl. Для проверки найденного решения нажмите кнопку "Проверить решение".

  • 0V0 = 0
  • 0V0 = 1

О V1 =0

  • 0 VI =1
  • 1 V0 = 1
  • 1 vo = o 1 V1 =0 1ИЕП

Проверить решение

Варианты возможных ответов компьютера показаны на рисунке.

Приведем код программы.

cinput type="Button" value-'Проверить решение" name="Go" on-click="javascript:Func5();">

c/form>

script language=JavaScript

function Func5() {

Otvs=new Mass(0,0,0,0);

var Strok=8;

for (i=0; i

Otvs[i]=document.Diz5.Otv.options[i]. selected;

Da=Otvs [0]&&Otvs [3 ]&&Otvs [4]&&Otvs [7];

Net=Otvs[l]|Otvs[2]|Otvs[5]|Otvs[6];

Result=Da&&!Net

if(Result) {а1ег1("Ответ правильный");}

else {а1е11("Ответ неправильный");}

}

function Mass(Otl,Ot2,Ot3,Ot4) {

this.Otl=Otl;

this.Ot2=Ot2;

this.Ot3=Ot3;

this.Ot4=Ot4;

}

/script

Следует обратить внимание на то, что имена форм в пределах одной страницы должны быть разными. Они как бы являются именами разных переменных. Поэтому их совпадение недопустимо.

 
Посмотреть оригинал
< Пред   СОДЕРЖАНИЕ ОРИГИНАЛ   След >