6.4.3. Подготовьте отчет о выполнении лабораторной работы.
6.5. Оформление отчета о выполнении лабораторной работы
По результатам работы каждая бригада студентов оформляет индивидуальный отчет, который включает:
- титульный лист (с указанием номера и темы работы, фамилию и инициалы исполнителей, цифр группы и т.д.);
- конкретизированную цель лабораторной работы;
- ход выполнения работы и полученные результаты по каждому из пунктов задания:
а) исходный код XHTML-документа;
б) исходный код импортируемого js-файла, содержащего комментарии к каждой включенной в него функции;
в) скришот(ы) XHTML-документа, в котором выведены результаты работы всех JavaScript-функций.
- выводы.
6.6. Контрольные вопросы и задания
1. Перечислите и охарактеризуйте все способы объявления переменных в JavaScript.
2. Охарактеризуйте отличия локальных и глобальных переменных JavaScript.
3. Опишите существующие операторы ветвления JavaScript.
4. Опишите существующие виды циклов JavaScript.
5. Как работают и где применяются операторы break и continue?
7 Валидация html-форм интерфейса пользователя web-базированных ис средствами javascript
Цель работы
Изучение принципов валидации заполнения HTML-форм интерфейса пользователя средствами JavaScript на стороне клиента. Изучение принципов работы с cookie.
7.2 Методические указания по организации самостоятельной работы
При подготовке к лабораторной работе необходимо изучить рекомендованную литературу, лекционный материал по дисциплине и ознакомиться с функциональными возможностями среды разработки Eclipse и браузеров IE и Firefox.
7.3 Описание лабораторной установки
Лабораторная работа выполняется на ЭВМ с использованием среды разработки Eclipse и браузеров Firefox, Internet Explorer, Opera, Chrome, Safari и т.д.
7.3.1 Требования к эвм:
Процессор Pentium 3 или выше;
не менее 128 Мбайт оперативной памяти;
SVGA-дисплей;
Linux, Windows XP, Vista, Windows 7.
7.4 Порядок выполнения и методические указания по выполнению работы
7.4.1. Создайте XHTML-документ, соответствующий предметной области сайта-визитки предприятия, рассматриваемой в предыдущих лабораторных работах. Данная страница должна содержать html-форму (form), используемую, например, для заполнения анкеты пользователя или внесения в базу данных ИС информации о новом товаре или услуге.
Валидация внесенных пользователем данных должна осуществляться на стороне клиента с использованием JavaScript. В случае неверного ввода, поле формы, содержащее неправильно введенные данные должно выделяться красным цветом. Кроме того, над или под html-формой должно выводиться сообщение, описывающее причину возникновения ошибки (рис. 7.1).
Правила заполнения полей формы определите самостоятельно в соответствии со спецификой выбранной предметной области.
Рис. 7.1 – Пример выделения пустых или неправильно заполненных полей
7.4.1.1. В секции head HTML-документа разместите импорт внешнего JavaScript-файла, содержащего функцию, выполняющую валидацию. Функция должна возвращать true в результате успешной валидации всех полей формы и false в обратном случае.
7.4.1.2. В качестве серверной страницы, обрабатывающей данные формы укажите адрес http://10.12.53.159:8111/stud.
7.4.1.3. В случае возникновения ошибок во время валидации полей формы, форма не должна отправляться на обработку на сервер, а пользователь должен видеть сообщения об ошибках валидации, выведенные в качестве содержимого HTML-страницы (рис. 7.1).
7.4.1.4. В случае успешного прохождения валидации форма должна быть отправлена на сервер.
7.4.2. Создайте JavaScript-функции (также размещенные во внешнем js-файле), выполняющую создание и обработку cookie.
Cookie должны содержать:
а) значение любого из полей формы, которое было введено при последней попытке её заполнения.
б) дату и время последней попытки заполнения HTML-формы (неважно, прошла она валидацию, или нет).
Установите срок хранение cookie равный 1-му месяцу.
7.4.3. Наличие cookie должно проверяться при открытии страницы с формой. Если значения cookie установлены, они должны быть выведены в виде отдельной строки в нижней части html-документа.