Формы и их использование в JavaScript



Элементы форм знакомы всем пользователям современной глобальной сети. Это поля ввода текста и пароля, стандартные кнопки, радиокнопки-переключатели, «флажки», выпадающие списки и т.д. Наиболее очевидные варианты применения: ввод ключевых слов в поисковых системах, работа с электронной почтой через веб-интерфейс, регистрация на сайте, веб-анкеты, online-тесты. Сразу заметим, что использование форм предполагает интерактивность и, следовательно, обеспечение функциональности неизбежно связано с программированием (клиентским или серверным). Пожалуй, в большинстве случаев формы используются для передачи данных на сервер, однако и на стороне клиента есть задачи, в которых удобно применение форм (например, календарь или калькулятор).

Роль HTML состоит в описании необходимых элементов и компоновке их на странице. Все атрибуты форм и их элементов, описанных с помощью HTML, транслируются в соответствующие свойства объектов DOM и используются при создании сценариев JavaScript.

Для обращения к самой форме и ее элементам используют именование:

<FORM NAME=f name METHOD=post ACTION="javascript:...;">

<INPUT NAME=i name SIZE=30 MAXLENGTH=30>

</FORM>

 После именования, ко всей форме или ее элементам можно будет обратиться по имени, что сильно облегчает процесс написания скриптов:

 window.document.f name.i name.value="Изменяем значение текстового поля";

 

Формы широко используются на Интернет. Информация, введенная в форму, часто посылается обратно на сервер или отправляется по электронной почте на некоторый адрес. Проблема состоит в том, чтобы убедиться, что введеная пользователем в форму информация корректна. Легко проверить ее перед пересылкой в Интернет можно с помощью языка JavaScript.

Если Вы хотите, чтобы за вносимыми в форму данными следил сервер, то Вы должны использовать интерфейс CGI (Common Gateway Interface).

С помощью JavaScript Вы не сможете создать книгу читательских отзывов, поскольку JavaScript лишен возможности записывать данные в какой-либо файл на сервере. Делать это Вы можете только через интерфейс CGI.

 

Использование свойства method в JS.

 

Всем нам уже давно знакомо свойство HTML форм – method. Как известно это свойство определяет способ передачи данных от формы обработчику.

JavaScript может самостоятельно определять и изменять значение этого свойства, как и множества других.

Таким образом JS позволяет в режиме реального времени изменять метод передачи данных от формы, что может оказаться очень полезным при создании универсальных форм, способных встраиваться в различные html страницы.

Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI – скрипту. Применение значения этого свойства внутри JavaScript–программ не оправдано, так как всегда можно получить идентификатор окна или задействовать встроенный массив frames[0] и свойства окна opener, top, parent и т.п. Для загрузки внешнего файла в некоторое окно всегда можно применить метод window.open(). Но тем не менее использовать это свойство оказывается иногда очень полезно.

 

В наиболее общем виде оператор <FORM>, предназначенный для создания форм в документах HTML, выглядит следующим образом:

<FORM

NAME="Имя формы"

TARGET="Имя окна"

ACTION="Адрес URL расширения сервера"

METHOD=GET или POST

ENCTYPE="Кодировка данных"

onSubmit="Обработчик события Submit">

 

. . .

определение полей и органов управления

. . .

</FORM>

Параметр NAME задает имя формы. Это имя нужно для адресации формы как свойства объекта Document.

Назначение параметра TARGET аналогично назначению этого же параметра в операторе <A>. Когда форма используется для передачи запроса расширению CGI сервера Web, ответ, полученный от сервера, отображается в окне. Имя этого окна задано параметром TARGET. Если ответ должен отображаться в том же окне, что и форма, то параметр TARGET задавать не нужно.

С помощью параметра ACTION указывается адрес URL загрузочного файла программы CGI, а также передаваемые расширению параметры. В том случае, когда форма предназначена для передачи данных расширению сервера Web, параметр ACTION является обязательным. Но если данные, введенные в форме, обрабатываются сценарием JavaScript локально и не передаются серверу Web, этот параметр можно опустить.

Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием JavaScript локально, параметр METHOD задавать не нужно.

Параметр ENCTYPE задает тип MIME передаваемых данных и используется очень редко. Если форма предназначена для передачи текстовых данных (как это обычно бывает), этот параметр по умолчанию имеет значение application/x-www-form-urlencoded. В этом случае для передаваемых данных используется так называемая кодировка URL. Тип данных multipart/form-data позволяет передавать как текстовые, так и двоичные данные. При локальной обработке данных сценарием JavaScript параметр ENCTYPE не задается.

Задание: Разработать класс, характеризующий фильм (название, режиссер, год выпуска и т.д). Класс должен иметь конструктор по умолчанию и конструктор с параметрами


#include<string> #include<iostream> #include<stdio.h> #include <stdlib.h> using namespace std; //объявлениекласса class RadioDet { private: std::string tip; int nominal; public: RadioDet(); RadioDet(std::string t,int nom); ~RadioDet(); std::string GetTip(); void SetTip(std::string t); int GetNom(); void SetNom(int nom); }; //программаиспользующаякласс int main() { int n=3; RadioDet R1; RadioDet R2("Diod",200); R1.SetTip("Usilitel"); R1.SetNom(100); cout«R1.GetTip()«" "«R1.GetNom()«endl; cout«R2.GetTip()«" "«R2.GetNom()«endl; RadioDet R3[n]; std::string nt; int nnom; for(int i=0;i<n;i++) { cout«"Vvedite tip "; cin»nt; R3[i].SetTip(nt); cout«"Vvedite nominal "; cin»nnom; R3[i].SetNom(nnom); } for(int i=0;i<n;i++) cout«R3[i].GetTip()«" "«R3[i].GetNom()«endl; return 0; }RadioDet::RadioDet() {//конструкторпоумолчанию } RadioDet::RadioDet(std::string t,int nom) //конструкторспараметрами { tip=t; nominal=nom; } RadioDet::~RadioDet() { } std::stringRadioDet::GetTip() { returntip; } intRadioDet::GetNom() { returnnominal; } voidRadioDet::SetTip(std::stringt) { tip=t; } voidRadioDet::SetNom(intnom) { nominal=nom; }  

Билет № 38


Дата добавления: 2018-04-04; просмотров: 265; Мы поможем в написании вашей работы!

Поделиться с друзьями:






Мы поможем в написании ваших работ!