Лабораторна робота № 12 Використання форм в Web- сторінках

1. Мета роботи

Метою роботи є знайомство з елементами вставки форм в Web- сторінках.

2. Склад робочого місця

2.1. Устаткування: IBM- сумісний персональний комп'ютер(ПК).

2.2. Програмне забезпечення: операційна система Windows, Web- браузер Internet Explorer версії 6.0 і вище.

3. Підготовка до лабораторної роботи

Для підготовки до виконання лабораторної роботи необхідно повторити наступні розділи (дивись електронний конспект лекцій по розділу 4 «Технології програмування»).

4. Порядок виконання роботи

Створіть інтерактивну Web- сторінку з використанням форм і обробки подій по одному з приведених нижче варіантів.

Варіант 12-01

Создайте Web-страницу, в которой определяется средний балл студента. В первом текстовом поле должны быть введены фамилия и инициалы учащегося, в раскрывающемся меню задаются наименования дисциплин обучения, а во втором раскрывающемся меню – полученная оценка по дисциплине. При нажатии кнопки "Добавить" дисциплины обучения и полученные оценки выводятся в текстовой области (каждая дисциплина обучения и оценка – в отдельной строке). При нажатии кнопки "Средний балл" в третьем текстовом поле выводится средний балл студента.

Варіант 12-02

Создайте Web-страницу, в которой выполняются арифметические действия над двумя числовыми операндами. Операнды вводятся в двух текстовых полях. При нажатии одной из кнопок: "+", "-", "*" или "/" над операндами выполняется соответствующая арифметическая операция, и результат выводится в третьем текстовом поле. Если хотя бы один из введенных операндов не является числом, в третьем текстовом поле выводится сообщение "Ошибка".

Варіант 12-03

Создайте Web-страницу, в которой определяется количество прожитых лет, месяцев, часов, минут и секунд. Дата рождения вводится следующим образом: номер дня в месяце и наименование месяца – в раскрывающихся меню, а год – в текстовом поле. При нажатии кнопки "Статистика" в пяти текстовых полях выводится соответственно количество прожитых лет, месяцев, часов, минут и секунд. Если введен ошибочный год, то в текстовом поле для года выводится сообщение "Ошибка".

Варіант 12-04

Создайте Web-страницу, в которой выводится горизонтальная линия с заданными атрибутами (первоначально горизонтальная линия выводится со значениями, которые равны значениям по умолчанию). С помощью радиокнопки можно задать значение атрибута align: left, center или right, с помощью раскрывающегося меню с несколькими цветами можно задать значение атрибута color и с помощью двух текстовых полей можно задать значение атрибутов width и size. При нажатии кнопки "Выполнить" линия (с помощью сценария JavaScript и средств DOM) выводится с заданными значениями атрибутов.

Варіант 12-05

Создайте Web-страницу, в которой выполняет преобразование представления числа в заданную систему счисления. В первом текстовом поле вводится целое десятичное число. При нажатии одной из кнопок: "Hex", "Oct" или "Bin" число переводится соответственно в шестнадцатеричное, восьмеричное или двоичное представление и результат выводится во втором текстовом поле. Если введенный операнд не является целым десятичным числом, во втором текстовом поле выводится сообщение "Ошибка".

Варіант 12-06

Создайте Web-страницу, в которой выполняется выбор изображения из заданного списка. В раскрывающемся меню выводится список наименований изображений (в раскрывающемся меню). При выборе пункта меню текущее изображение заменяется на выбранное изображение (сначала выводится первое изображение в списке изображений).

Варіант 12-07

Создайте Web-страницу, в которой выполняются арифметические действия над двумя операндами. В первом текстовом поле вводятся два числовых операнда, между которыми должен находиться один из знаков арифметических действий: "+", "-", "*" или "/". При нажатии кнопки "Вычислить" выполняется соответствующая арифметическая операция, и результат выводится во втором текстовом поле. Если введенный операнд не является правильным арифметическим выражением, во втором текстовом поле выводится сообщение "Ошибка".

Варіант 12-08

Создайте Web-страницу, в которой подсчитывается стоимость купленных товаров. В трех текстовых полях задается наименование товара, количество единиц товара и цена единицы товара. Наименование товара и цена товара заносится в текстовое поле после выбора товара из раскрывающегося меню наименований товаров, количество товара должно быть введено в текстовое поле (по умолчанию значением этого поля является 1). При нажатии кнопки "Добавить" товар добавляется в список купленных товаров, а при нажатии кнопки "Подсчитать" в четвертом текстовом поле выводится суммарная стоимость купленных товаров. Если количество единиц товара не является целым положительным числом, во втором текстовом поле выводится сообщение "Ошибка".

Варіант 12-09

Создайте Web-страницу, в которой выполняется вывод изображения и «обтекающего» его текста при различных значениях атрибута align, vspace и hspace в дескрипторе <img> для изображения. Значение align (left или right) задается с помощью радиокнопок, а значения vspace и hspace – в текстовых полях. Изменение параметров «обтекания» изображения выполняется при нажатии кнопки "Просмотр". Если значения vspace и hspace не являются целыми положительными числами, в соответствующем текстовом поле выводится сообщение "Ошибка".

Варіант 12-10

Создайте Web-страницу, в которой производится сравнение значений двух введенных операндов. В двух текстовых полях вводятся два числовых операнда. При нажатии одной из кнопок: "<", ">", ">=", "<=", "!=", или "==" над операндами выполняется соответствующая операция сравнение, и результат выводится в третьем текстовом поле в виде сообщений "true" или "false". Если хотя бы один из введенных операндов не является числом, в третьем текстовом поле выводится сообщение "Ошибка".

Варіант 12-11

Создайте Web-страницу, в которой подсчитывается количество рабочих дней в месяце для заданного месяца и года (суббота и воскресенье считаются выходными днями). Значение года задается в текстовом поле (по умолчанию в этом поле выводится текущий год), а значение месяца – из раскрывающегося меню. При нажатии кнопки "Определить" результат выводится во втором текстовом поле. Если значение года задано неверно, во втором текстовом поле выводится сообщение "Ошибка".

Варіант 12-12

Создайте Web-страницу для перевода значений единиц длины: пунктов, дюймов, футов и миль в значения в метрических единицах (миллиметрах, сантиметрах, метрах и километрах). Исходное значение задается в первом текстовом поле, а единицы длины для исходного значения – в раскрывающемся меню. Единицы длины для результата выбираются из другого раскрывающегося меню. При нажатии кнопки "Перевести" результат выводится во втором текстовом поле. Если исходное значение не является положительным числом, во втором текстовом поле выводится сообщение "Ошибка". Данные для перевода значений длины: 1 пункт = 0.351 мм, 1 дюйм = 2.54 см, 1 фут = 30.48 см, 1 миля = 1.609 км.

Варіант 12-13

Создайте Web-страницу, в которой определяется день недели для заданной даты. Номер дня в месяце и наименование месяца вводятся в раскрывающихся меню, а год – в текстовом поле. При нажатии кнопки "Определить день недели" в текстовом поле выводится день недели, на который приходится соответствующая дата. Если введен ошибочный год, то в текстовом поле для года выводится сообщение "Ошибка".

Варіант 12-14

Создайте Web-страницу, в которой подсчитывается стоимость подписки на газеты и журналы. Наименование журнала или газеты и количество месяцев подписки (от 1 до 12) задаются с помощью раскрывающихся меню. При нажатии кнопки "Добавить" журнал или газета товар добавляется в список подписки, а при нажатии кнопки "Подсчитать" в текстовом поле выводится суммарная стоимость подписки.

Варіант 12-15

Создайте Web-страницу, в которой выполняется преобразование введенного числа в десятичную систему счисления. В первом текстовом поле вводится целое шестнадцатеричное, восьмеричное или двоичное число. Система счисления задается с помощью радиокнопок "Hex", "Oct" и "Bin". При нажатии кнопки "Перевести" число переводится в десятичное представление, и результат выводится во втором текстовом поле. Если введенный операнд не является числом в соответствующей системе счисления, во втором текстовом поле выводится сообщение "Ошибка".

5. Питання для самоконтролю

Як у формі задається програма, оброблювальна форму, і параметри цієї програми?

Для яких цілей використовується елемент <label>?

Які елементи форм визначені в JavaScript? Дайте коротку характеристику кожного елементу.

За допомогою якого елементу форми можна передати файл на Web- сервер?

Для яких цілей використовуються приховані поля форми?

Чим відрізняється текстове поле від текстової області?

Чим відрізняється опис кнопки за допомогою елементу <button> від опису за допомогою елементу форми?

Для яких цілей використовуються елементи <fieldset> і <legend>?

Для яких цілей використовується елемент <optgroup>?