Опубликован: 05.08.2010 | Доступ: свободный | Студентов: 2826 / 363 | Оценка: 4.12 / 4.02 | Длительность: 10:07:00
Лекция 9:

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

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

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

<!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 и введите следующий код ().

<!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 и введите следующий код ().

<!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 и введите следующий код ().

<!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.

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

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

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

Вопросы:

  1. Что такое объект в JavaScript?
  2. Что вы знаете об объектной модели документа?
  3. Что такое маска ввода?
  4. Чем RadioButton отличается от CheckBox?

Упражнения:

  1. Разработайте объект Products со следующими полями: ProductName, UnitPrice и ExpireDate. Создайте массив объектов Products, инициализируйте его и выведите на экран.
  2. Создайте гостевую форму автосалона. Пользователи должны указывать свое имя, указывать род занятий (один), выбирать любимых автопроизводителей (допускается множественный выбор), указывать электронный адрес и пароль. После ввода программа должна осуществить проверку корректности учетной записи пользователя и все собранные данные вывести на экран.