Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Январь 2019   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

WEB-Программирование: "Java Script(JS): Динамические изменения элементов формы".

На прошлом уроке мы, наконец-то, закончили с регулярными выражениями. Теперь представим себе, что в процессе взаимодействия пользователя и программа возникла необходимость изменить форму, которая будет показана пользователю. Например, скрыть или показать какие-нибудь кнопки, в зависимости от того, какие опции выбрал пользователь, изменить список доступных элементов в списке выбора, что-то подкрасить другим цветом и так далее. Как правило, подобные действия происходят в обработчиках событий, для кнопок OnClick, для текстовых полей и список OnChange (изменение содержимого) или события от клавиш (OnKeyPress, OnKeyUP, OnRtyDonw).

Рассмотрим пример, в котором в одном списке выбирается цвет, а в другой автоматически "подгружаются" его оттенки:

 

<html>

    <head>

        <meta charset="UTF-8">

        <title>Урок 130. Java Script (JS): Двухуровенвый выбор цвета</title>   

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

 

            var names=new Array();

            var codes=new Array();

            names[0]=new Array('Красный','Розовый','Оранжевый');

            codes[0]=new Array('#FF0000','#FF66CC','#FF9900');

            names[1]=new Array('Зеленый','Болотный','Салатовый');

            codes[1]=new Array('#009900','#999900','#33FF00');

            names[2]=new Array('Синий','Голубой','Фиолетовый');

            codes[2]=new Array('#0000FF','#00FFFF','#9933FF'); 

 

            function setGamma(gamma)

            {              

                var opt=document.myform.menu2.options;             

                opt.length=0;          

                for(var i=0; i<3; i++)

                {              

                    opt[i]=new Option(names[gamma][i],codes[gamma][i]);

                }

            }

        </SCRIPT>

    </head>

    <body>

        <form name="myform" method="GET">

            <select name="menu1" size="3" OnChange="setGamma(this.value)">

                <Option value="0">Красный</Option>

                <Option value="1">Зеленый</Option>

                <Option value="2">Синий</Option>

            </select>

            <select name="menu2" size="3" style="width:150px;" OnChange="document.body.style.backgroundColor=this.value">

 

            </select>          

        </form>

    </body>

</html>

 

 

Вот как будет выглядеть результат работы этой программы:

 

WEB-Программирование: "Java Script(JS): Динамические изменения элементов формы".

 

Как работает эта программа? Функция setGamma является обработчиком выбора первого списка. В цикле она пробегает соответствующий массив оттенков и создает элементы управления второго списка. По сути, второй список это массив  элементов Option. подкраска экрана производиться в обработчике события OnChange второго списка - задается CSS стиль фона.

 

Разберем еще один пример:

<html>

    <head>

        <meta charset="UTF-8">

        <title>Урок 130. Java Script (JS): Форма регистрации</title>   

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function showMore(obj)

            {              

                var field=document.getElementById('advFields');

                if(obj.checked)

                {

                    field.style.display='none';

                }

                else

                {

                    field.style.display='block';

                }

            }

        </SCRIPT>

    </head>

    <body>

        <form name="myform">

            Логин:&nbsp <Input type="text" name="login" size=15><br>

            Пароль:&nbsp <Input type="text" name="password" size=15><br>

            Анонинымый пользователь <input type="checkbox"  name="advenced" value=1 OnClick="showMore(this)">

            <fieldset id="advFields">

                <div align="right">

                    Имя:&nbsp <Input type="text" name="name" size=15><br>

                    Фамилия:&nbsp <Input type="text" name="last" size=15><br>

                    Возвраст:&nbsp <Input type="text" name="ege" size=15><br>

                    e-mail:&nbsp <Input type="text" name="email" size=15><br>

                </div>

            </fieldset>

            <br>

            <input type="submint" value="OK">

        </form>

    </body>

</html>

 

Здесь программа будет показывать или прятать дополнительные поля в зависимости от того, включена или нет "галочка":

 

WEB-Программирование: "Java Script(JS): Динамические изменения элементов формы".

 

WEB-Программирование: "Java Script(JS): Динамические изменения элементов формы".

 

 
В избранное