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

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


WEB-программирование: "Java Script(JS): Взаимодействие с пользователем. Объект Form"

 

Издание книги "Искусственный интеллект для чайников"Добрый день! Я запустил новый проект: Издание книги "Искусственный интеллект для чайников". Цель этого проекта - популяризация темы искусственного интеллекта. Для чего ее популяризировать? Потому что искусственный интеллект – это большой прорыв в технологиях. За ним будущее. Если искусственный интеллект внедрить повсеместно, если умные компьютеры будут управлять государством вместо людей, то наступит светлое будущее, где каждый человек будет счастлив и будет заниматься только творческим трудом, а вся рутина останется роботам. Да, сейчас ведется много различных научных исследований в области создания искусственного интеллекта. При помощи систем ИИ уже созданы экспертные системы, программы распознавания изображений, интеллектуальные игры и многое другое. Однако для начинающих и не очень программистов такое направление все еще остается тайной за семью печатями. Данная книга позволит исправить это обстоятельство и на простых примерах помочь читателю начать свой путь в освоение удивительного мира искусственного интеллекта. Все примеры выполнены на языке C# с применением ООП подхода. Чем быстрее выйдет эта книга, тем быстрее множество людей заинтересуются темой искусственного интеллекта и тем быстрее будут сделаны открытия в этой области, позволяющие переложить рутинный труд на роботов, а принятие важных решений на всех уровнях, в том числе и на государственном, будет поручена умным алгоритмам. И, соответственно, тем быстрее наступит светлое будущее.

Вы тоже можете принять участие в проекте и помочь изданию книги. Помочь проекту можно двумя способами:

1. Перейти по этой ссылке на страницу проекта на boomstarter.ru и стать спонсором проекта (в зависимости от суммы помощи спонсоры получат вознаграждение в виде благодарности в книге, на сайте www.easyprog.ru или экземпляр(ы) книги, либо и то и другое в разных сочетаниях). 

2. Рассказать о проекте друзьям, знакомым, опубликовав ссылку на проект на своем сайте, странице в социальных сетях или где-то еще.

 

 

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

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

 

Для работы с формой в JavaScript предусмотрен объект Form. В HTML этот объект создается парой тэйгов <FORM></FORM>, между которыми находятся элементы управления формы и другие HTML-объекты. Элементы управления - это кнопочки, поля ввода и прочее.

Для изучения работы с формами создадим такой вот текстовый пример:

<html>

    <body>

        <form>

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

            <input type="submit" value="Submit" name="ButtonOk">

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

        </form>

    </body>

</html>

 

Запустив этот файл, вы увидите что то наподобие вот этого:

WEB-программирование: "Java Script(JS): Взаимодействие с пользователем. Объект Form"

 

Правда, пока при нажатии на кнопку ничего не происходит. Что бы что нибудь происходило, надо навесить на кнопки обработчики. Попробуем, например, навести обработчик на кнопку "ОК":

<html>

    <head>

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

    </head>

    <body>

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

            function my_on_click(a) {

                alert(a.value);

            }

        </SCRIPT>

        <form>

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

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

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

        </form>

    </body>

</html>

 

Теперь при нажатии на кнопку "Submit" программа выдаст сообщение со значением этой кнопки:

WEB-программирование: "Java Script(JS): Взаимодействие с пользователем. Объект Form"

 

Значение, как вы поняли, то, которое мы задали: "Submit".

Но как нам быть, если мы хотим получить в этом обработчике не значение нажатой кнопки, а текст, введенный в поле ввода текст? Для этого нам надо добраться до этого элемента. Как мы это сделаем? Можно через объект формы. Например, вот так:

<html>

    <head>

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

    </head>

    <body>

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

            function my_on_click() {

                alert("Вы ввели "+document.forms[0].elements[0].value);

            }

        </SCRIPT>

        <form>

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

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

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

        </form>

    </body>

</html>

 

Теперь при нажатии на кнопочку "Submit" у нас будет выдано сообщение о том, что же мы ввели в строку ввода:

WEB-программирование: "Java Script(JS): Взаимодействие с пользователем. Объект Form"

 

Таким образом, обратиться к конкретной форме мы можем через свойство документа forms, который представляет собой коллекцию форм. Но если форм слишком много, то обращаться к ним по индексу может быть неудобно. Поэтому есть возможность обратиться к форме по имени. Для этого только это имя надо задать. Давайте рассмотрим следующий пример:

<html>

    <head>

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

    </head>

    <body>

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

            function my_on_click() {

                alert("Вы ввели "+document.forms["myform"].elements[0].value);

            }

        </SCRIPT>

        <form name="myform">

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

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

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

        </form>

    </body>

</html>

 

Результат будет тот же самый.

Есть еще другие варианты обращения. Например: document.forms.myform или document.myform.

 

 

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


В избранное