Лабораторная работа №2. Методы ввода информации.

В этой работе рассматриваются способы ввода информации. Для ввода данных используются интерактивные формы, текстовое поле, текстовая область, методы confirm() и promt().

Упражнение 2.1.Наберите следующий HTML-код в Блокноте и сохраните документ в своей папке с именем method_confirm().htm.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script language="JavaScript">

Function conf()

{

var x=confirm("Нажмите кнопку ОК или Отмена");

alert("Результат:"+ x);

}

</script>

</head>

<body>

<input type="Button" name="but1" value="Запуск метода confirm()"

onclick="conf()">

</body>

</html>

В случае, когда в программу достаточно ввести всего два значения, например, «да» или «нет», то удобно использовать метод confirm(). Диалоговое окно этого метода содержи две кнопки ОК и Отмена.

Лабораторная работа №2. Методы ввода информации. - student2.ru

С помощью этих кнопок формируются две логических величины: true – при нажатии ОК и false – при нажатии Отмена. Введенные значения затем могут быть использованы по усмотрению дизайнера.

Лабораторная работа №2. Методы ввода информации. - student2.ru Лабораторная работа №2. Методы ввода информации. - student2.ru

В данном HTML-коде функции дано имя conf. Переменной x присваивается значение, введенное с помощью метода confirm(). Результат выбора одной из двух кнопок (ОК или Отмена) выводится с помощью метода alert(). Запуск программы осуществляется с помощью события onclick, возникающего при щелчке по кнопке «Запуск метода confirm()».

Упражнение 2.2.Наберите следующий HTML-код в Блокноте и сохраните документ в своей папке с именем method_prompt().htm.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script language="JavaScript">

Function summ()

{

var x=prompt("Введите число x","");

var z=prompt("Введите число z","");

x=parseFloat(x);

z=parseFloat(z);

var y=x+z;

alert("Результат сложения y="+ y);

}

</script>

</head>

<body>

<input type="Button" value="Щелкните"

onclick="summ()">

</body>

</html>

Метод prompt() позволяет вводить значение переменной с клавиатуры. В данной программе двум переменным x и z поочередно присваиваются некоторые числа. Затем находится сумма этих переменных y=x+z. Результат выводится на экран с помощью метода alert(). Запуск скрипта происходит с помощью командной кнопки:

Лабораторная работа №2. Методы ввода информации. - student2.ru

После щелчка по кнопке появится диалоговое окно, в которое нужно ввести первое слагаемое.

Лабораторная работа №2. Методы ввода информации. - student2.ru

В следующее диалоговое окно нужно ввести второе слагаемое:

Лабораторная работа №2. Методы ввода информации. - student2.ru

Результат операции появится в новом окне:

Лабораторная работа №2. Методы ввода информации. - student2.ru

Преобразование строковых переменных в числовой формат с плавающей запятой осуществляется с помощью функции parseFloat(). Если строковую переменную нужно перевести в целочисленную, то используют функцию parseInt(). Без указанных функций преобразования будет выполнена операция конкатенации (соединения) двух строковых значений x и z. Т.е. при вводе двух чисел 3 и 5 вместо ожидаемого ответа 8 появится строковое значение 35.

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

Упражнение 2.3. Убедитесь в этом самостоятельно, изменив HTML-код, приведенный в Упражнении°2.2 соответствующим образом. Сохраните файл как method_prompt()_1.htm.

Упражнение 2.4. В данном упражнении ввод информации производится с помощью текстового поля. Создайте и сохраните файл как.

<html>

<head>

<title>Ввод информации с помощью текстового поля</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<form name="form1">

<input type="text" name="text1" size="30" value="В это поле введите Ваше имя" onblur="check()">

</form>

<script language="JavaScript">

function check() {

var d=document.form1.text1.value;

alert("Приятно с Вами познакомиться, "+d);

}

</script>

</head>

<body>

<input type="Button" value="Нажмите после ввода имени" onclick="cheсk()">

</body>

</html>

Лабораторная работа №2. Методы ввода информации. - student2.ru

Если в текстовое поле ввести имя Вася, то после нажатия кнопки «Нажмите после ввода имени» выполнится скрипт и на экране появится сообщение:

Лабораторная работа №2. Методы ввода информации. - student2.ru

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

Упражнение 2.5. Создайте и сохраните файл как textfield_summ.htm.

<html>

<head>

<div align="center">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Введите слагаемые:

<form name="form2">

Первое слагаемое

<input type="text" name="text11" size="5" value="0"><br>

Второе слагаемое

<input type="text" name="text21" size="5" value="0"><br><br>

<input type="Button" value="Результат суммирования"

onclick="summ()">

</form>

<script language="JavaScript">

Function summ()

{

var a=document.form2.text11.value;

var b=document.form2.text21.value;

var c=1*a+1*b;

alert(a+"+"+b+"="+c);

}

</script>

</div>

</head>

<body>

</body>

</html>

Лабораторная работа №2. Методы ввода информации. - student2.ru

Скрипт запускается после нажатия на кнопку «Результат суммирования».

В теле скрипта считывание переменных «a» и «b» происходит путем прохода всей иерархии объектов: документ – форма – текстовое поле – введенное значение.

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

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