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

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


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

Интернет магазин. Учебные шпаргалки: Язык программирования С (PDF).

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

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

 

Web-программирование: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Кнопки"

 

Исходники к уроку можно скачать здесь.

Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS") и  Разработка сервиса сайта на PHP на примере партнерской программы).

 

Мы уже изучили обращение к формам. Теперь рассмотрим обращение к элементам управления кнопок. Обратиться к ним вы можете тремя способами:

  • Через массив elements по индексу

  • Через массив elements по имени в виде строки

  • Напрямую по имени

Вот пример, иллюстрирующий все три способа (два из них закоменчены, один активный, что бы посмотреть, переставьте знаки комментария):

<html>

      <head>

            <title>Урок 109. Java Script (JS): взаимодействие с пользователем</title>

      </head>

      <body>

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

                  function my_on_click() {

                        var flag=confirm("Вы действительно хотите запустить "+document.myform.action+"?");

                        if(flag) {

                             document.myform.submit();

                        }          

                  }

                  function demo_on_click() {

                        //document.myform.elements[0].value="my value";

                        document.myform.elements["TextBox"].value="my value 1";

                        //document.myform.TextBox.value="my value 2";

                  }

            </SCRIPT>

            <form name="myform" action="action.html">

                  Введите что нибудь: <input type="text" name="TextBox" size="20">

                  <input type="button" value="Submit" name="ButtonOk" onClick="my_on_click()">

                  <input type="button" value="Click here" name="ButtonDemo" onClick="demo_on_click()">

                  <input type="reset" value="Reset" name="ButtonCancel">

            </form>

      </body>

</html>

 

 

Элементы управления бывают разные. Кнопки, флажки, радиокнопки и так далее. Сейчас мы рассмотрим кнопки. Кнопки не содержат никаких специфических свойств, а только общие для всех элементов управления свойства:

  • form - ссылка на родительскую форму.

  • name - имя объекта DOM, по которому к данному элементу можно обратиться в программе. На уровне HTML это содержимое атрибута name.

  • type - тип элемента управления, на уровне HTML это атрибут type.

  • disabled - данное свойство позволяет сделать элемент не активным. На уровне HTML это атрибут disabled.

  • value - значение элемента. Для каждого типа элемента свой смысл значения. Для поля ввода - это введенный текст, для кнопки - надпись на кнопке и так далее.

Для иллюстрации использования этих свойств рассмотрим пример:

<html>

    <head>

        <title>Урок 109. Java Script (JS): взаимодействие с пользователем</title>

    </head>

    <body>

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

            function my_on_click() {

                var flag=confirm("Вы действительно хотите запустить "+document.myform.action+"?");

                if(flag) {

                    document.myform.submit();

                }      

            }

            function demo_on_click() {

                document.myform.ButtonOk.disabled=true

            }

        </SCRIPT>

        <form name="myform" action="action.html">

            Введите что нибудь: <input type="text" name="TextBox" size="20">

            <input type="button" value="Submit" name="ButtonOk" onClick="my_on_click()">

            <input type="button" value="Click here" name="ButtonDemo" onClick="demo_on_click()">

            <input type="reset" value="Reset" name="ButtonCancel">

        </form>

    </body>

</html>

 

В данном примере при нажатии на кнопку "Click here" будет заблокирована кнопочка "Submit"^

Web-программирование: "Java Script(JS): Взаимодействие с пользователем. Элементы управления формы. Кнопки"

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.


В избранное