3. Порядок выполнения практической части
Для выполнения лабораторной работы необходимо создать веб-страницу, содержащую форму с полями, следующего вида:
В тэге <form> добавьте обработчик события отправки данных вида:
onSubmit = "CheckData(); return false;"
В данном случае указана функция обработчик CheckData(). Оператор return false; предотвращает автоматическую отправку данных после выполнения функции-обработчика. Отправка данных будет выполняться из обработчика.
Добавьте на странице секцию JavaScript кода, описывающего функцию-обработчик:
function CheckData()
{
var ans;
ans = confirm("Вы уверены, что хотите отправить введенные данные ?");
if (ans) submit();
}
Как это видно из кода, функция CheckData() в случае подтверждения со стороны пользователя самостоятельно вызывает метод submit() для передачи данных из формы.
Теперь необходимо добавить проверку значений, введенных в поля формы пользователем.
Прежде всего, необходимо убедиться в том, что заполнены все поля, обязательные для ввода. Для этого можно использовать проверку на равенство нулю длины строки (свойство length), являющейся значением узла дерева документа, соответствующего полю ввода, например: document.getElementById("uname").value.length.
Следующая проверка должна контролировать структуру и содержимое полей. Для этого можно использовать объект RegExp, например:
var validEMail, pattn;
pattn = new RegExp("^[\.\-_A-Za-z0-9]+?@[\.\-A-Za-z0-9]+?\.[A-Za-z0-9]{2,6}$");
validEMail = pattn.test(document.getElementById("email").value));
В данном фрагменте описана проверка структуры электронного адреса из поля формы с идентификатором "email". Для проверки был использован шаблон на основе регулярного выражения.
3. Задания для практического выполнения
1. Самостоятельно постройте регулярное выражение, описывающее шаблон для проверки номера телефона, и внесите все необходимые изменения и дополнения в функцию CheckData().
4. Содержание отчёта
1.Название и цель работы
2. Выполненное практическое задание
3. Вывод о проделанной работе
5. Контрольные вопросы
1. Что такое «событие» на веб-странице?
2. Какие функции javascript перехватывают события?
3. Что такое клиентский сценарий?
4. Что такое регулярное выражение?
5. Приведите пример регулярного выражения.
6. Как работает обработчик событий на веб-странице?
Лабораторная работа №7 Использование языка JavaScript для работы с формами html
Цель работы: приобрести практический навык создания форм на языке сценариев javascript.
1. Теоретическая часть
Назначение форм.
Формы служат для обмена данными между клиентом и веб-сервером по протоколу CGI. Другими словами говоря, вы заполняете форму нажимаете кнопку, и ваши данные уходят на сервер в виде: [имя_переменной]=[значение_переменной].
CGI - программа на сервере обрабатывает эти данные и выполняет в зависимости от результата какие-либо действия. Это может быть обработка сообщения конференции, подписка на новости сайта, работа с базой данных посетителей сайта и т.д.
Возникает вопрос, а обязательно ли знать CGI-программирование для того, чтобы применять формы? Ответ - CGI знать желательно, но не обязательно. Если же ваша задача только отправить данные на сервер, не обрабатывая их, то знание CGI вам и вовсе не понадобиться.
Форма задается тэгами <form></form> и состоит из управляющих элементов (текстовое поле, кнопка, список и т.д.).
Список создается тэгом <select></select>.
Для записи строк в список используется тэг <OPTION>.
Строка, отмеченная параметром selected, будет выбрана в списке по умолчанию.
Пример кода:
<select name="months" size="3">
<option>Январь
<option>Февраль
<option selected>Март
</SELECT>
Создаётся список из трёх месяцев.
Пример раскрывающегося списка:
<select name="months">
<option>Январь
<option>Февраль
<option selected>Март
</SELECT>
Другие элементы управления создаются с помощью тэга <input></input>:
Атрибуты тэга <INPUT>:
type Тип элемента управления.
name Имя элемента управления.
value Начальное значение или состояние элемента управления.
checked Установка начального значения переключателей.
size Ширина текстового поля в символах. По умолчанию 20 символов.
maxlenght Максимальное количество символов в текстовом поле.
align Выравнивание текста, около формы.
src URL графического изображения, если оно используется в элементе управлени.
Параметры атрибута <TYPE>:
text однострочное поле для ввода текста.
password аналогичен элементу управления text, но символы, вводимые в этот элемент управления, не отображаются на экране.
checkbox Элемент управления переключатель.
radio Элемент управления радиокнопка.
file Элемент управления для выбора и передачи файлов.
button Орган управления кнопка.
submit Кнопка для пересылки данных из заполненной формы веб-серверу.
reset Кнопка для сброса содержимого формы в начальное значение.
image Замена кнопки submit графическим изображением.
hidden Скрытое текстовое поле.
Еще один способ заставить форму работать - применить к ней обработку событий JavaScript. При нажатии на кнопку в ней возникает событие "OnClick", которое можно обработать написав функцию-обработчик.
Например, создадим простейшую форму, складывающую два числа по нажатию кнопки.
Создадим форму для ввода чисел:
<FORM name="calc">
<input name="val1" type="text" value="0" size="4">+
<input name="val2" type="text" value="0" size="4">
<input type="button" value=" + " onclick="adding(val1, val2)">
<input name="is" type="text" value="0">
</FORM>
И напишем функцию, получающую аргументы из полей val1 и val2 и выводящую результат в поле is:
<script language="JavaScript"> function adding(val1, val2)
{
document.calc.is.value=eval(parseFloat(document.calc.val1.value)+parseFloat(document.calc.val2.value));
}
</script>
3. Задание для практического выполнения
1. Реализовать на веб-странице формы, реализующие четыре арифметических действия
4. Содержание отчёта
1.Название и цель работы
2. Выполненное практическое задание
3. Вывод о проделанной работе
5. Контрольные вопросы
1. Что такое веб-форма?
2. Какие тэги применяются для создания веб-форм?
3. Как подключить сценарий javascript к форме?