HTML-элементы для создания интерактивных приложений (формы). Внешние скрипты

Министерство  образования и науки Российской Федерации

Федеральное государственное  бюджетное образовательное учреждение высшего профессионального образования

 

ТОМСКИЙ ГОСУДАРСТВЕННЫЙ  УНИВЕРСИТЕТ СИСТЕМ

УПРАВЛЕНИЯ И РАДИОЭЛЕКТРОНИКИ (ТУСУР)

 

 

Кафедра компьютерных систем в управлении и проектировании (КСУП)

 

 

 

ОТЧЕТ

Лабораторная работа №5

HTML-элементы для создания  интерактивных приложений (формы). Внешние  скрипты.

Методы обработки  форм и строковых переменных посредством  языка JavaScript.

Регулярные  выражения.

 

 

 

Преподаватель                                                                        Студент гр. 511

_____________ Н. Ю. Хабибулина                                        Башкиров Д.Д.

«__» _________ 2013 г.                                                           «__» _______ 2013 г.                                                                                                                                                                                                                        

 

 

 

 

 

2013

1. Цель работы - знакомство с элементами пользовательского интерфейса (форм); изучение языка JavaScript; изучение его возможностей создания динамических веб-страниц.

 

2.Примеры скриптов

function check(obj)  //функция проверки значений полей формы

{

var s=/^[а-яА-Я]+$/;  //регулярное выражение для проверки введенного имен, фамилии и отчества

if (!(s.test(obj.type_surname.value)) ){

alert("Ошибка: Неправильно введена  фамилия");

exit;

}

if (!(s.test(obj.type_name.value)) ){

alert("Ошибка: Неправильно введено имя");

exit;

}

if (!(s.test(obj.type_patronimyc.value)) ){

alert("Ошибка: Неправильно введено  отчество");

exit;

}

s=/^[0-9]+$/;  //регулярное выражение для проверки тел. номера

if (!(s.test(obj.type_fon_number.value)) ){

alert("Ошибка: Неправильно введен номер телефона");

exit;

}

s=/^\w+@\w+[.][a-zA-Z]+$/; //регулярное выражение для проверки адреса эл. почты

if (!(s.test(obj.type_mail.value)) ){

alert("Ошибка: Неправильно введен  адрес электронной почты");

exit;

}

s=/^.{8,}$/;  //регулярное выражение для проверки длины пароля

if (!(s.test(obj.type_password.value)) ){

alert("Ошибка: Пароль должен содержать  не менее 8 символов");

exit;

}

s=/^[0-9a-zA-Z]+$/; //регулярное выражение для проверки правильности пароля

if (!(s.test(obj.type_password.value)) ){

alert("Ошибка: Пароль содержит  не допустимые символы");

exit;

}

if (!(obj.type_password_retry.value==obj.type_password.value)){

alert("Ошибка: Введеные пароли  не совпадают");

exit;

}

}

 

function item1_click(){  //функция вывода сообщения при нажатии на первый пунт верхнего меню

alert("выбрали  первый пункт верхнего меню");

}

 

3. Ответы на контрольные вопросы.

 

1) Какой тег  используется для организации  формы?

Для вставки  формы в HTML-документ используется элемент FORM. Он задается парными

тегами <FORM> и </FORM>. Между этими тегами помещаются описания элементов управления

формы. Также  здесь может быть помещен и  другой текст с использованием разметки средствами

HTML. Этот текст  обычно используется для пояснения,  какие данные и в какой элемент

управления  нужно вводить.

 

2) Перечислите  стандартные элементы управления.

Стандартными являются все  элементы управления, которые можно  поместить на HTML-

форму (однострочное текстовое  поле, поле для ввода пароля, флажки, переключатели, кнопки как

пользовательские, так и выполняющие стандартные действия, поля имен файлов и т.д.).

Для обозначения  всех этих элементов управления используется один HTML-элемент -

INPUT. Этот элемент задается одиночным тегом <INPUT> и имеет следующие атрибуты:

type - принимает строку, задающую тип элемента управления (по умолчанию используется

строка text и  создается соответственно поле для  ввода текста), возможные значения и специфика

работы соответствующих  элементов управления рассмотрены  далее;

name - используется для задания имени элементу управления (строка, которая помимо

идентификации элемента управления добавляется в  данные, отсылаемые серверу);

value - начальное значение для полей ввода текста и полей для указания имен файлов, так-

же используется как надпись таких элементов  управления, как кнопки; необязательно для всех

элементов управления, кроме флажков и переключателей;

checked — булевый атрибут, если он установлен, то флажок или переключатель считается

(и отображается  браузером) установленным (см. рис. 1);

disabled — булевый атрибут, установка которого не позволяет пользователю работать с элементом управления;

readonlу — булевый атрибут, позволяет запретить изменение состояния элемента

управления (работает только для текстовых полей и  поля выбора файла, так что для  остальных

элементов управления лучше использовать атрибут disabled);

size — задает размер элемента управления (единицы измерения и действие специфичны для

разных элементов  управления);

maxlength — задает максимальную длину текста, который может быть введен в текстовые

поля (положительное численное значение);

src — для элемента управления image задает расположение используемого изображения;

title — описание элемента управления (может отображаться браузерами как всплывающая

подсказка);

align — задает горизонтальное выравнивание элемента управления, работает так же, как и

для любого другого HTML-элемента, поддерживающего этот атрибут;

tabindex - номер элемента управления при навигации при помощи табуляции;

acсesskey - «горячая» клавиша для элемента управления (для перехода к элементу управ-

ления нужно  нажать Аlt и заданную клавишу).

 

3) Как организовать  вертикальное и горизонтальное  меню?

Меню можно  организовать с помощью таблицы, где каждая ячейка и будет элементом  меню

При выборе каждого  из пунктов меню вызывается соответствующая функция-обработчик.

 

4) Как создать  внутренний и внешний скрипт?

Для создания внешнего скрипта его необходимо поместит во внешний файл с расширение js если использовать язык javascript  и подключит его в html:

<script type="text/javascript" src="name.js"></script>

Для создания внутреннего  скрипта его необходимо прописать  прямо в html документе:

<script type="text/javascript" >

…

</script>

 

5) Что такое  «Регулярное выражение»? Приведите  пример его использования.

Регулярные  выражения — это средство обработки данных. Задача, требующая замены или поиска текста, может быть достаточно просто и изящно решена с помощью регулярных выражений. И хотя максимальный эффект от регулярных выражений можно добиться при использовании серверных языков (например, PHP), всё же не стоит недооценивать возможности этого приложения и на стороне клиента.

var s=/^[а-яА-Я]+$/;

if (!(s.test(obj.type_surname.value)) ){

alert("Ошибка: Неправильно введена фамилия");

exit;

}