Методические указания к лабораторным работам для студентов iii курса автф
 Скачать 1.96 Mb.
|
ЛАБОРАТОРНАЯ РАБОТА № 7JavaScript. Объектная модель документа и работа с ней. Применение библиотек семейства JQuery. Цель работы Изучить особенности клиентского языка программирования JavaScript, объектную модель документа HTML и работу с ней в JavaScript, освоить применение библиотек семейства JQuery. Краткие теоретические сведения Для обработки данных форм перед их передачей в CGI-программу часто применяют язык сценариев JavaScript. Он располагает объектной моделью документа, позволяющей получать значение любого атрибута любого тега и набором функций, позволяющих получить значение атрибута тега и проверить его тип. Событийная модель позволяет организовать реакцию на действия пользователя, а методы, присущие объектам в объектной модели документа, позволяют манипулировать свойствами объектов. Можно перехватить отправку формы и проверить заполнение ее полей в указанной функции с отображением результатов в отдельном окне: myWin1=window.open("", "TestWindow", "width=500, height=400, status=no, toolbar=no, resizable=yes, scrollbars=no, menubar=no"); name=parent.ss.name.value; Здесь parent - ссылка на родительский документ, ss - имя формы в документе, name - имя поля формы, value - значение поля. Значение можно проверить на пустоту или соответствие типа и формата ввода, после чего отправить данные: if (name) { myWin1.document.write(" "); } или выдать сообщение об ошибке и вернуться к родительскому документу: else { if (name=="") alert("Не указано имя!"); myWin1.focus(); myWin1.document.write(" } Однако при большом количестве и разнообразии полей форм организация подобной обработки требует много усилий. Для решения таких типовых задач существуют готовые свободно распространяемые библиотеки сценариев на JavaScript под обобщенным названием JQuery. Одна из них, JQuery.Validate, позволяет организовать подобную обработку полей форм путем подключения библиотек: отправки данных при корректности заполнения полей формы: $(document).ready(function(){ // готовим опции для метода ajaxSubmit плагина jquery.form.js var options = { target: "#output", url: "1c2.php", type: "post", success: function() { alert("Спасибо за комментарий!"); }, timeout: 3000 }; проверки корректности заполнения полей форм по соответствующим правилам: $("#myForm").validate({ focusInvalid: false, focusCleanup: true, rules: { Name: { required: true, minlength: 2, maxlength: 12 }, Email: { required: true, email: true }, Password: { required: true, rangelength: [6, 24] }, ConfirmPassword: { required: true, rangelength: [6, 24], equalTo: "#Password" }, Url: { url: true, required: true } } и формирования сообщений об ошибках, выводящихся непосредственно рядом с некорректно заполненными полями: messages: { Name: { required: "Укажите свое имя, пожалуйста!", minlength: "Не менее 2 символов", maxlength: "Не более 12 символов" }, Email: { required: "Нужно указать email адрес", email: "Email адрес должен быть корректным" }, Password: { required: "Укажите пароль!", rangelength: "Пароль - от 6 до 24 символов" }, ConfirmPassword: { required: "Подтвердите пароль!", rangelength: "Пароль - от 6 до 24 символов", equalTo: "Подтверждение пароля не принято!" }, Url: { required: "Нужно указать URL", url: "Введите корректный URL" } } }, errorPlacement: function(error, element) { var er = element.attr("name"); error.appendTo( element.parent().find("label[@for='" + er + "']").find("em") ); } }); }); Настройка правил проверки и сообщений при их нарушении достаточно ясны из примера. Пример проверки заполнения полей форм средствами JavaScript и библиотеки JQuery.Validate см. здесь: http://gun.cs.nstu.ru/web/labs/lab7. Методические указания Для разработки сценариев применяйте любые доступные текстовые редакторы, например, Jview или Notepad++. Сценарии располагаются на сервере с адресом 217.71.139.72, подключение к которому производится по протоколу FTP с именем учетной записи userNM, где N – порядковый номер группы, M - номер студента по журналу, пароль сообщается преподавателем. Лабораторная работа выполняется в отдельной папке на сервере, куда копируются сценарии лабораторной работы №2 для модификации. При настройке клиента FTP необходимо установить пассивный режим. При разработке страниц периодически сохраняйте их и проверяйте их отображение в любом из доступных браузеров. При написании сценариев обращайте внимание на кодировку русского текста, правильность написания HTML-тегов, имен переменных и функций PHP, парность открывающих и закрывающих кавычек в операторе echo. При отладке сценариев обновляйте содержимое окна браузера при нажатой клавише Shift. Для запрета кэширования web-страниц на локальном диске формируйте в сценариях заголовок header(expires='-1d'). По окончании лабораторной работы запишите документы сайта на сменный носитель для сохранения и распечатки. Порядок выполнения работы Модифицировать файл отображения формы лабораторной работы №2 для проверки корректности заполнения полей средствами JavaScript с выдачей окна с замечаниями. Модифицировать файл отображения формы лабораторной работы №2 для проверки корректности заполнения полей средствами библиотеки JQuery.Validate. Отладить сценарии, убедиться в их корректной работе, отображении замечаний, продемонстрировать их работоспособность преподавателю. Сохранить на локальной машине и распечатать файлы отлаженных сценариев. Варианты заданий Задания различаются списком полей формы, реализованной в соответствии с заданиями к лабораторной работе №2, методами проверки их содержимого в соответствии с содержимым, и являются модификацией лабораторной работы №2. Содержание отчета Цель работы. Вариант задания. Листинги сценариев. Выводы по работе. Контрольные вопросы Каковы особенности выполнения сценариев на языке JavaScript? Каковы основные объекты объектной модели документа HTML? Каков порядок получения значения тега HTML в объектной модели? Обязательно ли присваивать тегам имена? Что можно использовать вместо них? Какие методы работы с окном, формой, тегом Вы знаете? Как и из какого источника можно подключить библиотеки JQuery? По какому событию и с какими параметрами происходит вызов метода ajaxSubmit плагина JQuery.form.js? Какие Вы знаете правила проверки полей форм в библиотеке JQuery.validate.js? Как сформировать сообщение об ошибках при нарушении правил проверки полей форм в библиотеке JQuery.validate.js? Как указать место вывода ошибок в библиотеке JQuery.validate.js? |