Программирование - это просто
Advertisement
Главная arrow C#, Delphi, VB, F#, Web и пр. arrow Web-программирование arrow Уроки Java Script arrow WEB-Программирование: "Java Script(JS): Динамические изменения элементов формы".
20.03.2019 г.
Главное меню
Главная
Системный подход
Интернет магазин
Биржевые роботы
Программные продукты
Математика и информатика
1С:Предприятие
C#, Delphi, VB, F#, Web и пр.
Искусственный интеллект
Услуги
Ча. Во. (FAQ)
Платный раздел
Наука для чайников
Разное
Размышления
Карта сайта
Друзья сайта
Excel-это не сложно
Все о финансах
WEB-Программирование: "Java Script(JS): Динамические изменения элементов формы". Печать E-mail
Автор megabax   
12.01.2019 г.
Урок 13. Управление шрифтами в CSS New Page 1

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): Динамические изменения элементов формы".

 

 

Последнее обновление ( 12.01.2019 г. )
 
« След.   Пред. »
 
© 2019 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги
Мы принимаем
Банковские карты
Оплатите покупку в интернет-магазине банковскими картами VISA и Mastercard любого банка.
узнать больше
Электронный кошелек
Моментальная оплата покупок с помощью вашего электронного кошелька RBK Money.
узнать больше
Банковский платеж
Оплатите покупку в любом российском банке. Срок зачисления средств на счет - 3-5 рабочих дней.
узнать больше
Денежные переводы
Оплата покупок через крупнейшие системы денежных переводов CONTACT и Unistream.
узнать больше
Почтовые переводы
Оплатите покупку в любом отделении Почты России. Срок зачисления платежа - 3-4 рабочих дня.
узнать больше
Платежные терминалы
Оплата покупок в терминалах крупнейших платежных систем в любом городе России - быстро и без комиссии.
узнать больше