Лекция 10: Работа с объектами и элементами формы в JavaScript

Презентацию к данной лекции Вы можете скачать здесь.

В JavaScript можно создавать объекты. С помощью объектов можно работать с данными со сложной структурой. У объектов могут быть поля. Сами объекты можно объединять в более сложные структуры, например, в массивы.

Условие задачи: Банк выдает кредиты сроком на один, два и три года под 5, 10 и 15 процентов годовых соответственно. За каждый период по три клиента взяли ссуды на разные суммы. Требуется подсчитать статистику займов за каждый период.

Для решения задачи мы создаем объект bank. С помощью конструктора объекта задаются три поля: фамилия клиента ( LastName ), сумма(Amount ) и период( Period ). Далее, объект bank объединяется в статический массив, состоящий из девяти элементов. После чего происходит инициализация элементов массива. Статистика вычисляется с помощью условных операторов в цикле For.

Пример 1. Знакомство с объектами

Создайте новый документ HTML и введите следующий код ().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Пример 1. работа с объектами</title>

</head>

var i, n, str_1, str_2, str_3, sum_1, sum_2, sum_3, interest_1, interest_2, interest_3, str;

n = 9; //Количество клиентов

sum_1=0; //Сумма кредитов за первый год

sum_2 = 0; //Сумма кредитов за второй год

sum_3 = 0; //Сумма кредитов за третий год

interest_1 = 0; //Сумма процентов за первый год

interest_2 = 0; //Сумма процентов за второй год

interest_3 = 0; //Сумма процентов за третий год

str_1 = "Один год: " + "<br/>";

str_2 = "Два года: " + "<br/>";

str_3 = "Три года: " + "<br/>";

//Конструктор объекта

function bank(LastName, Period, Amount) {

this.LastName = LastName;

this.Period = Period;

this.Amount = Amount;

}

credit = Array(n);

credit[0] = new bank("Иванов", 1, 100000);

credit[1] = new bank("Петров", 1, 200000);

credit[2] = new bank("Сидоров", 1, 300000);

credit[3] = new bank("Васильев", 2, 400000);

credit[4] = new bank("Шаяхметов", 2, 500000);

credit[5] = new bank("Кац", 2, 600000);

credit[6] = new bank("Зинин", 3, 700000);

credit[7] = new bank("Петренко", 3, 800000);

credit[8] = new bank("Григорьев", 3, 900000);

str = "<br/>";

for (i = 0; i < n; i++) {

if (credit[i].Period == 1) {

str_1 += credit[i].LastName + " - " + credit[i].Amount + " рублей - " + credit[i].Amount*0.05

+ " рублей" + "<br/>";

sum_1 += credit[i].Amount;

interest_1 += credit[i].Amount * 0.05;}

if (credit[i].Period == 2) {

str_2 += credit[i].LastName + " - " + credit[i].Amount + " рублей - " + credit[i].Amount * 0.2

+ " рублей" + "<br/>";

sum_2 += credit[i].Amount;

interest_2 += credit[i].Amount * 0.2;}

if (credit[i].Period == 3) {

str_3 += credit[i].LastName + " - " + credit[i].Amount + " рублей - " + credit[i].Amount * 0.45 + " рублей"

+ "<br/>";

sum_3 += credit[i].Amount;

interest_3 += credit[i].Amount * 0.45;

}

str_1 += "Итого кредитов взято на сумму: " + sum_1 + " рублей. Сумма процентов составила " + interest_1 + " рублей";

str_2 += "Итого кредитов взято на сумму: " + sum_2 + " рублей. Сумма процентов составила " + interest_2 + " рублей";

str_3 += "Итого кредитов взято на сумму: " + sum_3 + " рублей. Сумма процентов составила " + interest_3 + " рублей";

str = str_1 + "<br/><br/>" + str_2 + "<br/><br/>" + str_3

document.write(str);

</script>

<body>

</body>

</html>

Результат:

увеличить изображение
Рис. 10.1.

Обычно раздел <form> на web-страницах используется для того, чтобы собрать информацию от пользователя и передать ее на web-сервер. Пользователь может вводить данные в поле ввода, выбирать пункты в элементах управления RadioButton, CheckBox или из раскрывающихся списков. Однако можно разгрузить web-сервер и часть вычислений производить на клиентской машине. Чаще всего этот прием используют при проверке корректности вводимых данных.

Для извлечения значения из элементов управления нужно присвоить им имя и обращаться к их свойствам, учитывая объектную модель документа. Корневым объектом является document, хотя при обращении к свойствам элементов управления его можно опускать. В приводимом ниже примере поле ввода имеет имя txtName, но оно вложено в форму с именем frm1, поэтому, чтобы обратиться к свойствуvalue поля ввода txtName нужно записать полный путь: frm1.txtName.value. Так же обстоят дела и с другими элементами управления, входящими в форму.

В предлагаемом ниже примере в переменную myName присваивается значение свойства value поля ввода txtName, а результат потом выводится в окно сообщения.

Пример 2. Знакомство с объектами

Создайте новый документ HTML и введите следующий код ().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Пример 2. Работа с элементами формы (Поле ввода)</title>

</head>

function alpha(form) {

var myName, str;

myName = frm1.txtName.value;

str = "Привет, " + myName + "! Как дела?";

alert(str);

}

</script>

<body>

</form>

</body>

</html>

Результат:

Рис. 10.2.

В следующем примере используется уже три поля ввода ( txtA, txtB и txtC ), значения свойства value, которых являются входными параметрами квадратного уравнения ( a, b и c ).

Пример 3. Работа с элементами формы (поля ввода). Решение квадратного уравнения

Создайте новый документ HTML и введите следующий код ().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Пример 3. Работа с элементами формы (поля ввода). Решение квадратного уравнения</title>

</head>

function alpha(form) {

var a, b, c, d, x1, x2, str;

a = frm1.txtA.value;

b = frm1.txtB.value;

c = frm1.txtC.value;

str = "<br/>";

d = Math.pow(b, 2) - 4 * a * c;

if (d < 0) { str = "Действительных корней нет!"; }

else {

x1 = (-b - Math.sqrt(d)) / (2 * a);

x2 = (-b + Math.sqrt(d)) / (2 * a);

str = "x1 = " + x1 + ", x2 = " + x2;

}

alert(str);

}

</script>

<body>

</form>

</body>

</html>

Результат:

Рис. 10.3.

В элементе управления RadioButton имеется свойство checked, которое может принимать значение true или false. Одновременно может быть выбран только один из пунктов RadioButton, как в селекторе телевизионных каналов или переключателей диапазонов радиоприемника. В приводимом ниже примере на экран выводится та или иная поговорка в зависимости от выбранного пункта RadioButton.

Пример 4. Работа с элементами формы (RadioButton)

Создайте новый документ HTML и введите следующий код ().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Пример 4. Работа с элементами формы (RadioButton)</title>

</head>

function alpha(form) {

var str;

if (frm1.rad[0].checked == true) { str = "Ранней пташке Бог подает!" }

if (frm1.rad[1].checked == true) { str = "Терпение и труд - все перетрут!" }

if (frm1.rad[2].checked == true) { str = "Без труда не выловишь и рыбку из пруда!" }

alert(str);

}

</script>

<body>

</form>

</body>

</html>

Результат:

Рис. 10.4.

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

Пример 5. Работа с элементами формы (CheckBox)

Создайте новый документ HTML и введите следующий код ().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Пример 5. Работа с элементами формы (CheckBox)</title>

</head>

function alpha(form) {

var i, n, sum, avg, a_max, str, str_1, str_2, str_3;

str = null;

str_1 = "";

n = 10;

sum = 0;

a_max = 100;

a = new Array(n);

for (i = 0; i < n; i++) {

a[i] = Math.round(Math.random() * a_max);

str_1 += a[i] + " ";

sum += a[i];

}

avg = sum / n;

str_2 = "Сумма = " + sum + " ";

str_3 = "Среднее арифметическое = " + avg + " ";

if (frm1.check1.checked == true && frm1.check2.checked == false && frm1.check3.checked == false) { str = str_1; }

if (frm1.check1.checked == false && frm1.check2.checked == true && frm1.check3.checked == false) { str = str_2; }

if (frm1.check1.checked == false && frm1.check2.checked == false && frm1.check3.checked == true) { str = str_3; }

if (frm1.check1.checked == true && frm1.check2.checked == true && frm1.check3.checked == false) { str = str_1 + str_2; }

if (frm1.check1.checked == false && frm1.check2.checked == true && frm1.check3.checked == true) { str = str_2 + str_3; }

if (frm1.check1.checked == true && frm1.check2.checked == false && frm1.check3.checked == true) { str = str_1 + str_3; }

if (frm1.check1.checked == true && frm1.check2.checked == true && frm1.check3.checked == true)

{ str = str_1 + str_2 + str_3;}

alert(str);

}

</script>

<body>

<input type="checkbox" name="check1" value="Check1"/>Отобразить массив<br/>

<input type="checkbox" name="check2" value="Check2"/>Сумма<br/>

<input type="checkbox" name="check3" value="Check3"/>Среднее арифметическое<br/>

</form>

</body>

</html>

Результат:

Рис. 10.5.

В раскрывающемся списке ListBox пользователь может выбрать элемент (при этом произойдет обращение к свойству value ), который затем будет присвоен переменной и выведен на экран.

Пример 6. Работа с элементами формы (ListBox)

Создайте новый документ HTML и введите следующий код ().

<!DOCtype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Пример 6. Работа с элементами формы (ListBox)</title>

</head>

function alpha(form) {

var river, str;

river = frm1.lstriver.value;

str = "Ваша любимая река " + river;

alert(str);

}

</script>

<body>

<br/>

<option>Волга</option>

<option>Парана</option>

<option>Ориноко</option>

</select>

</form>

</body>

</html>

Результат:

Рис. 10.6.

Очень распространенной задачей при заполнении форм является проверка корректности вводимых пользователем данных. В предлагаемом примере используются два поля ввода: txtEMail и txtPassword. В программе используются две функции проверки корректности данных: validateEMail()и validatePassword(). В первой функции используется маска ввода корректности электронного адреса, во второй маска ввода длины последовательности символов (от 6 до 8).

Пример 7. Проверка корректности введенных данных

Создайте новый документ HTML и введите следующий код ().

<!DOCtype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Пример 7. Проверка корректности введенных данных</title>

</head>

function validateEMail(form) {

InputString = frm1.txtEMail;

if (InputString.value == "" || InputString.value.indexOf('@', 0) == -1) {

validatePrompt(InputString, "Введите корректный электронный адрес")

return (false);

} else

return (true);

}

function validatePassword(form) {

InputString = frm1.txtPassword;

if (InputString.value.length < 6 || InputString.value.length >8) {

validatePrompt(InputString, "Пароль должен содержать от 6 до 8 символов!")

return (false);

} else

return (true);

}

function bttnSubmit(form, button) {

if (!validateEMail(form)) return;

if (!validatePassword(form)) return;

alert("Все данные введены корректно!");

return;

}

function validatePrompt(InputString, OutputString) {

alert(OutputString)

InputString.focus();

return;

}

</script>

<body>

Введите адрес электроной почты<br/>

Введите пароль от 6 до 8 сиволов<br/>

<br/>

</form>

</body>

</html>

Результат:

Рис. 10.7.