Лабораторная работа №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(). Диалоговое окно этого метода содержи две кнопки ОК и Отмена.
С помощью этих кнопок формируются две логических величины: true – при нажатии ОК и false – при нажатии Отмена. Введенные значения затем могут быть использованы по усмотрению дизайнера.
В данном 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(). Запуск скрипта происходит с помощью командной кнопки:
После щелчка по кнопке появится диалоговое окно, в которое нужно ввести первое слагаемое.
В следующее диалоговое окно нужно ввести второе слагаемое:
Результат операции появится в новом окне:
Преобразование строковых переменных в числовой формат с плавающей запятой осуществляется с помощью функции 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.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>
Скрипт запускается после нажатия на кнопку «Результат суммирования».
В теле скрипта считывание переменных «a» и «b» происходит путем прохода всей иерархии объектов: документ – форма – текстовое поле – введенное значение.
Преобразование текстовых переменных в числовые осуществляется их умножением на единицу.