Лабораторная работа №12 Объекты, методы и события в концепции языка JavaScript

Цель работы: изучить работы со встроенными объектами.

Ход работы:

1. Создаём документ с именем index.html и делаем разметку страницы.

2. В головной части задаём заголовок страницы, конструкцию использования каскадных таблиц, которые мы расположим в документе main.css и подключаем библиотеки jqwery (Рис.1).

Рис.1 «Заголовок и конструкции подключения»

3. Нужно было разработать форму, в которую можно вводить 5 чисел и получать их среднее значение. И при разработке скриптов предусмотреть контроль вводимых данных.

Для этого помещаем 5 текстовых полей и кнопку вычисления (Рис.2)

Рис.2 «Код размещения объектов»

В головной части документа помещаем код JavaScript:

Теперь после нажатия на кнопку «Вычислить» откроется диалоговое окно с результатом вычислений (Рис.3).

Рис.3 «Результат вычисления»

В случае если одно или несколько из чисел не было введено, появляется другое диалоговое окно (Рис.4)

Рис.4 «Диалоговое окно, сообщающее об ошибке»

4. Следующее задание заключалось в разработке формы-анкеты для приезжающих в гостиницу. И снова при разработке скриптов предусмотреть контроль вводимых данных.

Размещаем на странице форму (Рис.5).

Рис.5 «Код формы-анкеты»

Анкета появляется при нажатии на кнопку «Форма-анкета» (Рис.6)

Рис.6 «Форма-анкета»

Код кнопки «Заполнить» имеет следующий вид:

Контроль вводимых данных предусмотрен кодом:

При отсутствии вводимых данных в текстовых полях при проверке формы будет появляться диалоговое окно с указанием ошибки (Рис.7)

Рис.7 «Сообщение об ошибке»

5. Итоговый вид страницы:

Рис.8 «Итоговый вид страницы»

Лабораторная работа №13 Скрипты для проверки информации

Цель работы: изучить скрипты для проверки информации.

Практическая работа:

1. Разработать форму, в которую можно вводить 4 числа и выполнять арифметических действия, получать их среднее арифметическое значение. При разработке скриптов предусмотреть контроль вводимых данных.

2. Разработать форму-анкету для участников международных соревнований (регистрировать данные: фамилию, имя, отчество, пол, страна, из какого города прибыл, на сколько дней, вид спорта выбирать из списка). При разработке скриптов предусмотреть контроль вводимых данных и выделение первого поля для ввода данных.

3. Разработать форму-корзину для Интернет-магазина с проверкой правильности заполнения данных и выделения первого поля ввода данных. Передачу заказа оформить по электронной почте (см. пример 3).

Ход работы:

1. Создаём документ с именем index.html и делаем разметку страницы.

2. В головной части задаём заголовок страницы, конструкцию использования каскадных таблиц, которые мы расположим в документе main.css и подключаем библиотеки jqwery (Рис.1).

Рис.1 «Заголовок и конструкции подключения»

3. Нужно было разработать форму, в которую можно вводить 4 числа и получать результаты арифметических действий и среднее значение чисел. И при разработке скриптов предусмотреть контроль вводимых данных.

Для этого помещаем 4 текстовых поля и кнопку вычисления (Рис.2)

Рис.2 «Код размещения объектов»

В головной части документа помещаем код JavaScript:

Теперь после нажатия на кнопку «Вычислить» откроется диалоговое окно с результатом вычислений (Рис.3).

Рис.3 «Результат вычисления»

В случае если одно или несколько из чисел не было введено, появляется другое диалоговое окно (Рис.4)

Рис.4 «Диалоговое окно, сообщающее об ошибке»

4. Следующее задание заключалось в разработке формы-анкеты для участников международных соревнований. И снова при разработке скриптов предусмотреть контроль вводимых данных.

Размещаем на странице форму (Рис.5).

Рис.5 «Код формы-анкеты»

Анкета:

Рис.6 «Форма-анкета»

Контроль вводимых данных предусмотрен кодом:

$("#b3").click(function(){ if (fio.value==""){ alert ("Введите ФИО!");} else if (city.value==""){ alert ("Введите город!");} else if (days.value==""){ alert ("Введите количество дней!");} else if (mest.value==""){ alert ("Введите место проживания!");} else alert ("Форма заполнена успешно!"); }); $("#myForm").validate({ rules : { fam : {required : true}, im : {required : true}, ot : {required : true}, st : {required : true}, gor : {required : true}, }, messages : { fam : { required : "Введите Вашу фамилию"}, im : { required : "Введите Ваше имя"}, ot : { required : "Введите Ваше отчество"}, st : { required : "Введите Вашу страну"}, gor : { required : "Введите Ваш город"} } });

При отсутствии вводимых данных в текстовых полях при проверке формы будут появляться записи с указанием ошибки и просьбой их исправить (Рис.7)

Рис.7 «Сообщения об ошибке»

5. Итоговый вид страницы:

Рис.8 «Итоговый вид страницы»