Гипертекстовые документы по своей сути являются активными элементами в том смысле, что они откликаются на действия пользователя. Пользователь используя стандартные средства html может переходить от одного гипертекстового документа к другому, получая необходимую информацию. Чтобы документ стал интерактивным необходимо появление возможности не только получать но и передавать информацию от пользователя документу. Для обеспечения этой возможности используют формы. Формы представляют собой набор полей на web-странице, которые служат элементами управления. В процессе работы с web-страницей пользователь может вводить информацию в поля формы, после чего данная информация станет доступной для обработки специальными программами или может быть отправлена по заданному адресу. Для обработки данных, вводимых в поля форм, используют программы называемые сценариями ни языках JavaScript, VBScript, CGI и др.
Для создания формы используют парный тег <form>, при этом для идентификации формы задают ее имя с помощью параметра name. Способ обработки формы определяется с помощью следующих атрибутов:
Method – задает способ передачи данных от формы
= get – форма обрабатывается сценарием,
= post – данные передаются по электронной почте.
При этом параметр Action в 1-ом случае заберет URL-адрес программы, а во 2-ом – электронный адрес получателя данных.
Внутри формы располагаются поля для ввода информации. Каждое поле должно иметь параметр name – имя и value – значение. При передаче данных они передаются в виде пары значений имени и его значения.
Name = user Value = “Ivanov”
User = “Ivanov”
Рассмотрим элементы, используемые в формах. Для ввода данных применяют элемент ввода, задаваемый непарным тегом <input>. Он обязательно должен иметь параметр type, указывающий тип элемента.
Type = text – текстовое поле служит для ввода строки текста, может содержать дополнительные параметры:
size = 20 - размер поля в символах,
lenght - максимальная длина строки,
name = text1
value = "Иванов"
</form>
Значение value заданное в поле выводится в строке при открытии документа. Пользователь может ввести новую строку или отредактировать существующую. При этом изменяется и значение value.
Type = password - поле пароля, цифры заменяются * или ?????.
Type = radio - данный элемент задается группой и позволяет пометить пользователю 1 выбранный элемент. Если какой-либо из элементов типа радиокнопка имеет параметр checked, он будет помечен при загрузке документа.
<form name=form1> Скорость модема<br>
<input type=radio name=radio1 valye=9600 checked> 9600 бит/с
<input type=radio name=radio1 valye=14400> 14400 бит/с
<input type=radio name=radio1 valye=28800> 28800 бит/с
</form>
Type = checkbox - используется в группе, когда нужно отметить сразу несколько элементов.
<form name=form1> Типы компьютеров<br>
<input type=checkbox name=checkbox1 value=PC checked> ПК
<input type=checkbox name=checkbox2 value=WS > Рабочая станция
<input type=checkbox name=checkbox3 value=Lan checked> Сервер
</form>
Type = hidden - задает скрытый элемент, который не отображается в окне браузера. Скрытые элементы используются для передачи параметров обрабатывающей программе. При этом параметры не могут изменяться. Например для передачи версии web-страницы.
Type = reset - позволяет задать кнопку с помощью которой очищаются все элементы формы. Параметр value в данном случае будет содержать название кнопки. Например:
<form name=form1>
<input type=reset value="очистить форму">
</form>
Type = button - кнопка при нажатии на которую выполняются заданные действия. Эти действия обычно связывают с некоторым событием. Например щелчком мышкой по кнопке - onclick.
<form name=form1>
<input type=button value="Проверить" onclick=prov() name=button1>
</form>
Type = file - этот элемент определяет текстовое поле для ввода пути и имени файла и кнопку "обзор", позволяющую задать требуемый файл непосредственно.
Кроме элементов для ввода input форма может содержать текстовое поле, задаваемое парным тегом <TextArea>. Текстовое поле в отличии от элемента ввода text может содержать несколько строк текста. Кроме того в нем используются атрибуты Cols и Rows, задающие количество позиций в строке и количество строк. Пользователь может редактировать текст в области TextArea.
<form name=form1>
<TextArea name=address cols=35 rows=5>Россия, Кострома, ул 14 мая 14, КГУ им.Некрасова</TextArea>
</form>
Select - позволяет создать в html документе выпадающий список, в котором пользователь может выбрать нужную позицию. Данный элемент задается с помощью парного тега select, который должен иметь параметр name. Внутри элемента располагаются непарные теги option, определяющие элементы выпадающего списка. Элемент Select может иметь параметр single. В этом случае в окне браузера отобразиться лишь 1-ый элемент списка. Если есть параметр size отобразиться количество элементов, указанных в этом параметре. Если задается параметр multiple, то в окне браузера отобразятся все элементы списка. Каждый параметр option имеет атрибут value, значение которого передается обработчику, если пользователь выбрал соответствующий элемент списка.
<form name=form1> Выберите вариант :<br>
<select name=select1 size=2>
<option value=1> Вариант1
<option value=2> Вариант2
<option value=3> Вариант3
</select>
</form>
Выберите вариант:
|
Вариант 1 |
|
|
Вариант2 |
|
Используя формы для передачи данных необходимо учитывать, что информация, передаваемая в сети интернет не должна быть конфеденциальной. Эту же особенность необходимо учитывать при создании web-страниц, т.к. при передаче информации браузером она является открытой, не защищенной от несанкционированного пользования.
Сценарии JavaScript.
Данные введенные в формах должны быть обработаны определенным образом. Для этого используются программы - сценарии. Эти программы могут располагаться как на сервере, так и на компьютер пользователя. В этом случае они называются программами клиента. С помощью этих программ можно разработать интерактивные web-страницы, оформление и создание которых меняется в зависимости от действия пользователя. Кроме того документ может зависеть от версии браузера и параметров компьютера. Программы-клиенты часто применяются для предварительной обработки данных, введенных в форму, перед их отправкой на сервер.
Язык написания сценариев JavaScript - это объектно-ориентироканный язык программирования, предназначенный для разработки приложений работающих в сети интернет.Язык JavaScript является системно-независимым, т.е. не зависит от типа ОС. Сценарии на языке JavaScript включаются в html документ и могут располагаться как в головной части так и в теле документа. Для создания программ на языке JavaScript не требуется никаких дополнительных средств, т.к. все современные версии браузеров поддерживают этот язык. Для включения сценария в html документ используют парный тег <Script Language = JavaScript>
Сценарий ...
</Script>
Язык JavaScript оперирует с объектами, атрибутами и функциями. Атрибуты задают свойства объекта, а функции его методы. Для указания свойств после имени объекта через точку записывают названия свойства. Например: document.form1.text1.value
Функции указываются через точку после имени объекта с обязательным указанием скобок. В скобках задаются параметры фунуции, например document.writeln("Введите фамилию"). Пользователь может задавать собственную фамилию. Для этого используется зарезервированное слово function, после которого указывается имя функции со скобками, в которой могут задаваться ее параметры. Операторы функции задаются в фигурных скобках, которые называются операторными скобками [ ].
Если в функции нужно использовать переменные, их описывают с помощью зарезервированного слова var, тип переменной можно не указывать.
Для вычисления и задания значений используют оператор присваивания =.
function prov() [
var n, zum, res;
var k=0;
res=document.form1.text1.value ]
Для проверки условия применяют оператор if(условие) [действие]
else[действие]
В условии используются отношения между выражениями или логические операции.
Знаки отношений: = =, >=, <=, >, <, !=.
В логических выражениях используется логические определения: отрицание !, дизъюнкция ||, конъюнкция &&.
Пример функции, определяющей выедено ли в текстовом поле значение 5.
function prov() [
var res;
res=document.form1.text1.value;
if (res= =5)[document.form1.text1.value="да"]
else [document.form1.text1.value="Нет"];
]
Для вызова функций используются события, соответствующие какому-либо из действий пользователя. Для задания события используют приставку on, после которой указывают название события, например onclick, onMouseOver(мышь на объекте) и др.
Пример сценария на языке JavaScript, который проверяет введенный пользователем ответ на вопрос. Для ввода ответа используется текстовое поле формы. Для проверки ответа служит кнопка "проверить".
Сколько будет 2х2 ? <br>
<form name=form1>
<input type=text name=text1 value="Введите ответ"><br>
<input type=button name=button1 value="Проверить" onClick=prov()><br>
Результат<br>
<input type=text name=text2><br>
<Script Language = JavaScript>
function prov() [
var res;
res=document.form1.text1.value;
if (res= =4)[document.form1.text2.value="да"]
else [document.form1.text2.value="Нет"];
]
</Script>
При обработке групповых объектов используют функцию с заданием параметра. Параметр указывается в скобках после имени функции и обрабатывается в теле функции как обычная переменная. Например необходимо обработать группу радиокнопок. При этом используется вспомогательная функция, аргумент которой содержит значение отмеченной радиокнопки. При этом системная переменная this.value передает функции значение атрибута value отмеченной радиокнопки.
Сколько будет 2х2?
-
3
-
4
-
5
|
проверить |
Результат
|
|
Сколько будет 2х2 ? <br>
<form name=form1>
<input type=radio name=radio1 value=3 onClick=set(this.value)> 3 <br>
<input type=radio name=radio1 value=4 onClick=set(this.value)> 4 <br>
<input type=radio name=radio1 value=5 onClick=set(this.value)> 5 <br>
<input type=button name=button1 value="Проверить" onClick=prov()> <br>
Результат<br>
<input type=text name=text1><br>
<Script Language = JavaScript>
function prov() [
var res;
res=document.form1.text1.value;
if (res= =4)[document.form1.text1.value="да"]
else [document.form1.text1.value="Нет"];
] </Script>
Для обработки элементов checkbox каждый элемент имеет собственное имя и в зависимости от того выделен элемент или нет, его свойство checked принимает значение истина или ложь. Таким образом чтобы проверить какие элементы checkbox были выделены пользователем необходимо составить лог. выражение и проверить его истинность. Рассм. пример обработки элемента checkbox.
Выделить 1 и 3 элемент.
-
1
-
2
-
3
|
проверить |
Результат
|
|
Выделить 1 и 3 элемент.
<form name=form1>
<input type=checkbox name=Chbx1 value=1 > 1 <br>
<input type=checkbox name=Chbx2 value=2 > 2 <br>
<input type=checkbox name=Chbx3 value=3 > 3 <br>
<input type=button name=button1 value="Проверить" onClick=prov()> <br>
Результат<br>
<input type=text name=text1><br>
<Script Language = JavaScript>
function prov() [
if (document.form1.Chbx1.checked&&!document.form1.Chbx2.checked && document.form1.Chbx3.checked)
[ document.form1.text1.value="верно"]
else [ document.form1.text1.value="неверно"];
]
</Script>
Обработка выпадающих меню типа select проводиться аналогично обработке радиокнопок, т.к. в обоих случаях необходимо пользователю выбрать лишь 1 элемент из предложенных.
В языке JavaScript имеются встроенные функции, которые позволяют организовывать непосредственный диалог с пользователем. Например:
-
Функция Alert() – выводит окно сообщения с текстом. Текст, выводимый в окне должен быть указан в скобках.
-
Функция Confirm() – выводит на экран запрос с вариантами ответа «да» или «нет». Если пользователь нажмет «да» функция возвращает истину, иначе ложь.
-
Функция Prompt() – выводит сообщение в окне, содержащее текстовое поле, в кот. пользователь может ввести ответ в виде строки. Т.о. функция возвращает строку.
