Работа с объектами и элементами формы в JavaScript

Показывать лекцию целиком

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Пример 1. работа с объектами</title>
</head>
<script type="text/javascript">
    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 и введите следующий код (10_2.htm).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Пример 2. Работа с элементами формы (Поле ввода)</title>
</head>
<script type="text/javascript">
    function alpha(form) {
        var myName, str;
        myName = frm1.txtName.value;
        str = "Привет, " + myName + "! Как дела?";
        alert(str);
    }
</script>
<body>
<form id="frm1" action="" method="get">
<input type="text" name="txtName" value=""/><br/>
<input type="button" name="button" value="Нажми меня!" onclick="alpha(this.form)"/>
</form>
</body>
</html>

Результат:

(рис 10.2)

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Пример 3. Работа с элементами формы (поля ввода). Решение квадратного уравнения</title>
</head>
<script type="text/javascript">
    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 id="frm1" action="" method="get">
<input type="text" name="txtA" value=""/><br/>
<input type="text" name="txtB" value=""/><br/>
<input type="text" name="txtC" value=""/><br/>
<input type="button" name="button" value="Решить уравнение!" onclick="alpha(this.form)"/>
</form>
</body>
</html>

Результат:

(рис 10.3)

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Пример 4. Работа с элементами формы (RadioButton)</title>
</head>
<script type="text/javascript">
    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 action="" name="frm1">
<input type="button" name="button" value="Нажми меня!" onclick="alpha(this.form)"/><br/>
<input type="radio" name="rad" value="rad_button1" onclick="0"/><br/>
<input type="radio" name="rad" value="rad_button2" onclick="0"/><br/>
<input type="radio" name="rad" value="rad_button3" onclick="0"/><br/>
</form>
</body>
</html>

Результат:

(рис 10.4)

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Пример 5. Работа с элементами формы (CheckBox)</title>
</head>
<script type="text/javascript">
    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>
<form action="" name="frm1">
<input type="button" name="button" value="Нажмите меня!" onclick="alpha(this.form)"/><br/>
<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 и введите следующий код (10_6.htm).

<!DOCtype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Пример 6. Работа с элементами формы (ListBox)</title>
</head>
<script type="text/javascript">
    function alpha(form) {
        var river, str;
        river = frm1.lstriver.value;
        str = "Ваша любимая река " + river;
        alert(str);
    }
</script>
<body>
<form name="frm1" action="" method="get">
<input type="button" name="button" value="Нажмите на меня!" onclick="alpha(this.form)"/>
<br/>
<select name="lstriver" size="3">
<option>Волга</option>
<option>Парана</option>
<option>Нил</option>
<option>Ориноко</option>
<option>Ганг</option>
</select>
</form>
</body>
</html>

Результат:

(рис 10.6)

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

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

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

<!DOCtype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Пример 7. Проверка корректности введенных данных</title>
</head>
<script type="text/javascript">
    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>
<form name="frm1" action="" method="get">
<input type="text" name="txtEMail"/>
Введите адрес электроной почты<br/>
<input type="text" name="txtPassword"/>
Введите пароль от 6 до 8 сиволов<br/>
<br/>
<input type="button" name="Submit" value="Ввод" onclick="bttnSubmit(this.form, this)"/><p/>
</form>
</body>
</html>

Результат:

(рис 10.7)

Краткие итоги

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

Набор для практики

Вопросы:

Что такое объект в JavaScript?

Что вы знаете об объектной модели документа?

Что такое маска ввода?

Чем RadioButton отличается от CheckBox?

Упражнения:

Разработайте объект Products со следующими полями: ProductName, UnitPrice и ExpireDate. Создайте массив объектов Products, инициализируйте его и выведите на экран.

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

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Работа с объектами и элементами формы в JavaScript

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

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

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

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

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

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

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

Краткие итоги

Набор для практики

Вопросы:

Упражнения:

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!