Лабораторная работа 2-12

-1Информатика
Лабораторная работа 2-12
Лабораторная работа 2-12
Использование форм в Web-страницах
1. ЦЕЛЬ РАБОТЫ
Целью работы является знакомство с элементами вставки форм в Web-страницах.
2. СОСТАВ РАБОЧЕГО МЕСТА
2.1. Оборудование: IBM-совместимый персональный компьютер (ПК).
2.2. Программное обеспечение: операционная система Windows, Web-браузер
Internet Explorer версии 6.0 и выше.
3. КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
3.1. Модуль Basic Forms
Формы HTML первоначально были предназначены для пересылки данных от
удаленного пользователя к Web-серверу. С их помощью можно организовать простейший
диалог между пользователем и сервером, например, регистрацию пользователя на сервере
или выбор нужного документа из представленного списка. Однако с появлением языков
сценариев формы все чаще стали использовать и для локальной обработки информации (в
Web-браузере).
В состав модуля Basic Forms входят основные элементы HTML, связанные с
обработкой форм: <form>, <input>, <label>, <option>, <select> и <textarea>.
3.1.1. Элемент <form>
В документе HTML для задания формы используется контейнер
<form>...</form>. Документ может содержать несколько форм, но они не могут быть
вложены одна в другую. Помимо общих атрибутов class, dir, id, lang, style и
title, для элемента <form> можно задавать атрибуты, приведенные в табл. 12.1.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
-2Информатика
Лабораторная работа 2-12
Таблица 12.1. Атрибуты элемента <form>
Имя атрибута
accept
accept-charset
action
enctype
method
name
target
Что определяет
Список разделённых
запятыми типов
содержимого, которые
сервер-обработчик формы
будет обрабатывать
корректно.
Список кодировок для
вводимых данных,
принимаемых сервером,
обрабатывающим данную
форму.
Адрес ресурса, содержащего
обработчик формы.
Метод кодирования данных,
отправляемых формой в виде
MIME-типа.
Метод HTTP, используемый
для отправки данных формы.
Имя формы.
Имя фрейма, в который будут
выводиться результаты
обработки формы.
Значение по
умолчанию
нет
нет
нет
application/xwww-formurlencoded
get
нет
нет
Значением атрибута action является URL-адрес программы, которая будет
обрабатывать информацию, извлеченную из данной формы. В значении атрибута могут
быть также заданы параметры вызова программы, например:
action="http://localhost/hello.asp?login=ivanov&pass=stud1"
Атрибут method определяет метод пересылки данных, содержащихся в форме, от
Web-браузера к Web-серверу. Он может принимать два значения: get (по умолчанию) и
post.
Значением атрибута enctype является MIME-тип, определяющий формат
кодирования данных при передаче их от Web-браузера к серверу (Web-браузер кодирует
данные, чтобы исключить их искажение в процессе передачи).
Для пересылки форм используются два метода кодирования информации,
содержащейся в форме:
стандартный
метод
application/x-www-form-urlencoded,
используемый по умолчанию;
дополнительный multipart/form-data.
Если обработка данных формы производится в Web-браузере (с помощью
сценария), параметры action, method и enctype задавать не надо.
Второй метод нужен только в том случае, если к содержимому формы
присоединяется локальный файл, выбранный при помощи элемента формы <input
type="file">. В остальных случаях следует использовать метод кодирования по
умолчанию.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
-3Информатика
Лабораторная работа 2-12
Атрибуты accept и accept-charset задают списки соответственно MIMEтипов и кодировок данных, которые должен воспринимать Web-сервер, чтобы обработать
данные формы.
Допустимыми значениями атрибута
autocomplete являются on
(автоматическое заполнение форм включено) или off (автоматическое заполнение форм
выключено).
Атрибут name обычно используется в Web-страницах для доступа к форме и ее
элементам.
Атрибут target позволяет вывести результаты обработки формы в другой фрейм
(по умолчанию результаты обработки выводятся в тот же фрейм, в котором находится
форма).
Для создания полей формы средствами языка HTML существуют специальные
элементы: <label>, <input>, <select> и <textarea>. Эти элементы
употребляются только внутри элемента <form>.
3.1.2. Элемент <label>
Контейнер <label>…</label> задает сопроводительную надпись для элемента
формы. Для элемента <label> можно задавать общие атрибуты class, dir, id, lang,
style и title. Обязательным атрибутом элемента <label> является атрибут for,
значением которого является значение атрибута name или id того элемента формы, для
которого задается сопроводительная надпись.
Для элемента <label> можно задавать стили шрифта, текста, цвета и фона, а
также стили полей, границ и отступов блоковой модели документа.
3.1.3. Элемент <input>
Одиночный элемент <input> определяет тип элемента формы и его параметры.
Помимо общих атрибутов class, dir, id, lang, style и title, для элемента
<input> можно задавать атрибуты, приведенные в табл. 12.2.
Таблица 12.2. Атрибуты элемента <input>
Имя атрибута
accept
align
alt
checked
disabled
Значение по
умолчанию
Что определяет
Список разделённых запятыми типов
содержимого, которые серверобработчик формы будет
обрабатывать корректно.
Выравнивание элемента формы (если
элементом формы является
изображение).
Альтернативный текст (если
элементом формы является
изображение).
Задание включения переключателя
или радиокнопки (атрибут задается по
имени, без значения).
Отключает управление элемента
формы (атрибут задается по имени,
без значения).
нет
left
нет
переключатель или
радиокнопка
выключены
управление элемента
формы включено
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
-4Информатика
Лабораторная работа 2-12
Имя атрибута
ismap
maxlength
name
readonly
size
src
type
usemap
value
Значение по
умолчанию
Что определяет
Элемент формы является серверной
картой-изображением
Максимальное количество символов,
которые пользователь может ввести в
элемент формы.
Имя элемента формы.
Доступность элемента только для
чтения (атрибут задается по имени,
без значения).
Начальная ширина поля (в пикселях
или символах).
Адрес ресурса (если элементом
формы является изображение).
Тип элемента формы.
Определение внутренней ссылки на
имя карты ссылок (атрибут name в
элементе <map>) (если элементом
формы является изображение).
Начальное значение элемента формы.
нет
не ограничено
нет
элемент формы
можно модифицировать
зависит от Webбраузера
нет
text
нет
зависит от элемента
формы
Тип элемента формы задает атрибут type, который может иметь значения,
приведенные в табл. 12.3.
Таблица 12.3. Допустимые значения атрибута type элемента <input>
Значение атрибута
type
button
checkbox
file
hidden
image
radio
reset
password
submit
text
Что задает
Кнопку.
Переключатель.
Запрос для передачи файла на
Web-сервер.
Скрытое поле.
Элемент в виде графического
изображения, действующий
аналогично кнопке submit
Радиокнопку (кнопку с
альтернативным выбором)
Кнопку сброса введенных
значений и установления
значений по умолчанию.
Текстовое поле для ввода
пароля.
Кнопку передачи данных
формы на Web-сервер.
Однострочное текстовое поле
(значение по умолчанию).
Дополнительные атрибуты (кроме
общих атрибутов, атрибутов
disabled и readonly)
name, value
name, value, checked
name
name, value
name, src, align, usemap или
ismap
name, value, checked
name, value
name, maxlength, size
name, value
name, maxlength, size
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
-5Информатика
Лабораторная работа 2-12
3.1.4. Кнопки (type="button")
Элемент <input> со значением type="button"
задает кнопку с
идентификатором, задаваемым значением атрибута name или id. Надпись на кнопке
задается с помощью атрибута value.
Для кнопки можно задать стили шрифта, текста, цвета и фона, а также стили полей,
границ и отступов блоковой модели документа. Свойство text-align действует только
в Internet Explorer (в Firefox, Opera и Netscape надпись на кнопке всегда выровнена по
центру). Свойство background-image (использование в кнопке изображения в качестве
фона) не действует в Internet Explorer.
3.1.5. Переключатели (type="checkbox") и радиокнопки
(type="radio")
Элемент <input> со значением type="checkbox" или type="radio" задает
переключатель или радиокнопку с двумя состояниями (включен/выключен) и с
идентификатором, задаваемым значением атрибута name или id. Переключатели и
радиокнопки можно объединить в группу, присвоив им одинаковые значения в атрибуте
name. Различие между переключателями и радиокнопками заключается в том, что для
группы переключателей можно задать включенными несколько элементов, а для
радиокнопок – только один (поэтому радиокнопки называют также альтернативными
переключателями). По умолчанию переключатель и радиокнопка первоначально
находятся в выключенном состоянии. Для того, чтобы задать первоначальное состояние
элемента как включенное, используется атрибут checked (если для радиокнопок
несколько элементов имеют атрибут checked, то включенным окажется последний
элемент). Значение атрибута value для переключателей и радиокнопок должно задавать
уникальное значение для каждого переключателя или радиокнопки (именно по значению
этого атрибута выполняется анализ состояния данного переключателя или радиокнопки).
Стили цвета, фона и блоковой модели документа для переключателей или
радиокнопок задавать не рекомендуется. В Firefox, и Netscape они не действуют, в Opera
действуют, а в Internet Explorer они также действуют, но по-другому, чем в Opera.
3.1.6. Текстовые поля (type="text") и пароли (type="password")
Элемент <input> со значением type="text" (или без атрибута type) задает
текстовое поле для ввода строки текста (текстового поля) с идентификатором, задаваемым
значением атрибута name или id. Атрибут maxlength задает максимальное количество
символов, разрешенных в текстовом поле, а атрибут size – максимальное количество
отображаемых в поле символов. Атрибут value позволяет задать начальное значение
текстового поля, которое можно модифицировать, если не заданы атрибуты disabled
и/или readonly (по умолчанию в текстовом поле ничего не выводится).
Элемент <input> со значением type="password" также создает элемент ввода
строки текста, отличающийся от предыдущего поля только тем, что все вводимые
символы представляются в виде символа "*".
Для текстового поля или пароля можно задать стили шрифта, текста (в Opera не
действует свойство text-decoration), цвета и фона, а также стили полей, границ и
отступов блоковой модели документа.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
-6Информатика
Лабораторная работа 2-12
3.1.7. Передача файлов на Web-сервер (type="file")
Элемент <input> со значением type="file" создает текстовое поле для ввода
имени локального файла, сопровождаемое кнопкой Browse (Обзор). Выбранный файл
присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести
непосредственно или, воспользовавшись кнопкой Browse(Обзор), выбрать его из
диалогового окна, отображающего список локальных файлов. Для корректной передачи
присоединенного файла следует установить значения атрибутов формы в виде
enctype="multipart/form-data" и method="post". В противном случае будет
передана введенная строка, то есть маршрутное имя файла, а не его содержимое.
Единственным дополнительным атрибутом является атрибут name, задающий имя
элемента.
Стили шрифтов, текста, цвета, фона и блоковой модели документа для текстового
поля и кнопки выбора файлов задавать не рекомендуется. Во всех Web-браузерах (Internet
Explorer, Firefox, Opera и Netscape) можно задать только цвет текста и цвет фона в поле. В
Internet Explorer и Opera дополнительно можно задать стили шрифта в текстовом поле (в
opera этим шрифтом будет выводиться также надпись на кнопке. В этих Web-браузерах
можно также задавать стили блоковой модели документа. В Internet Explorer, Firefox и
Netscape можно задать дополнительно стили текста в текстовом поле. В Internet Explorer в
качестве фона в текстовом поле можно задать изображение.
3.1.8. Скрытое текстовое поле (type="hidden")
Элемент <input> со значением type="hidden" создает скрытый элемент, не
отображаемый пользователю с идентификатором, задаваемым значением атрибута name
или id. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер.
Скрытое поле можно использовать, например, в следующем случае. Пользователь
заполняет форму и отправляет ее серверу. Сервер посылает пользователю для заполнения
вторую форму, которая частично использует информацию, содержащуюся в первой
форме. Сервер не хранит историю диалога с пользователем, он обрабатывает каждый
запрос независимо, и при получении второй формы не будет знать, как она связана с
первой. Чтобы повторно не вводить уже введенную информацию, можно заставить
программу, обрабатывающую первую форму, переносить необходимые данные в скрытые
поля второй формы. Они не будут видимы пользователем и, в то же время, доступны
серверу. Значение скрытого поля определяется атрибутом value.
3.1.9. Кнопка сброса (type="reset")
Элемент <input> со значением type="reset" создает кнопку сброса, нажатие
которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот
момент, когда она была загружена. По умолчанию отображается в виде кнопки с
надписью Reset. Надпись можно изменить при помощи дополнительного атрибута
value. Поскольку имя кнопки не посылается на Web-сервер, атрибут name для нее
можно не задавать.
Для кнопки сброса можно задать те же стили, что и для обычной кнопки.
3.1.10. Кнопка пересылки данных (type="submit")
Элемент <input> со значением type="submit" создает кнопку передачи,
нажатие которой вызывает пересылку на сервер всего содержимого формы. По
умолчанию отображается в виде кнопки с надписью Submit (или Submit Query).
Дополнительный атрибут value позволяет изменить надпись на кнопке. Атрибут name
для данного элемента может быть опущен. В этом случае значение кнопки не включается
в список параметров формы и не передается на сервер. Если атрибуты name и value
присутствуют, например,
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
-7Информатика
Лабораторная работа 2-12
<input type="submit" name="submit_button" value="OK">,
то в список параметров формы, передаваемых на сервер, включается параметр
submit_button="OK". Внутри формы могут существовать несколько кнопок передачи.
Примеры использования кнопок пересылки данных будут рассмотрены при
рассмотрении объектной модели документа, а также в разделе обработки данных на
сервере.
Для кнопки передачи можно задать те же стили, что и для обычной кнопки.
3.1.11. Графическая кнопка пересылки данных (type="image")
Элемент <input> со значением type="image" создает элемент в виде
графического изображения, действующий аналогично кнопке submit. Обязательный
атрибут src задает адрес изображения, а дополнительные атрибуты alt и align задают
соответственно текст для изображения и выравнивание изображения относительно
окружающих элементов. Для атрибута align определены те же значения, что и для
аналогичного атрибута элемента <img>: left, right, top, texttop, middle,
absmiddle, baseline, bottom и absbottom.
Если на изображении элемента щелкнуть мышью, то координаты указателя мыши в
виде имя-элемента.x=n&имя-элемента.y=m (где имя-элемента – значение атрибута
name, а m и n – значения координат x и y) включаются Web-браузером в список атрибутов
формы, посылаемых на сервер. При обработке карты-изображения на стороне клиента
необходимо задать значение атрибута usemap.
Для всех Web-браузеров для кнопки-изображения можно задать стили блоковой
модели документа. Для Internet Explorer, Firefox и Netscape можно дополнительно задать
цвет фона.
3.1.12. Элементы <select> и <option>
Контейнер <select>…</select> предназначен для того, чтобы организовать
внутри формы выбор из нескольких вариантов без применения элементов типа checkbox
и radio. Это связано с тем, что если элементов выбора много, то представление их в виде
флажков или кнопок-переключателей увеличивает размеры формы, делая ее
труднообозримой. С помощью элемента <select> варианты выбора более компактно
представляются в окне Web-браузера в виде элементов ниспадающего меню или списка
прокрутки. Помимо общих атрибутов class, dir, id, lang, style и title, для
элемента <select> можно задавать атрибуты, приведенные в табл. 12.4.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
-8Информатика
Лабораторная работа 2-12
Таблица 12.4. Атрибуты элемента <select>
Имя атрибута
Значение по
умолчанию
Что определяет
disabled
Отключает управление элемента формы
(атрибут задается по имени, без значения).
multiple
Выбор из списка нескольких элементов
(атрибут задается по имени, без значения).
name
size
Имя меню (обязательный параметр).
Количество видимых строк меню (если
количество элементов в меню больше, то
выводятся полосы прокрутки).
управление
элемента
формы
включено
из списка
можно выбрать
один элемент
нет
1
В элементе <select> можно задать стили шрифтов и текста (в Internet Explorer
не действует стиль text-align). Для этого элемента можно задать также стили цвета и
фона во всех Web-браузерах, однако стиль background-image действует только в
Firefox и Netscape. Стили блоковой модели документа можно задать в Firefox и Netscape.
Элементы меню задаются внутри контейнера <select>…</select> при помощи
контейнера <option>…</option>. Помимо общих атрибутов class, dir, id, lang,
style и title, для элемента <option> можно задавать атрибуты, приведенные в табл.
12.5.
Таблица 12.5. Атрибуты элемента <option>
Имя атрибута
disabled
selected
value
Что определяет
Отключает управление
элемента меню (атрибут
задается по имени, без
значения).
Начальный выбор пункта
меню.
Текст пункта меню.
Значение по
умолчанию
управление элемента
меню включено
пункт меню не выбран
содержимое контейнера
<option>…</option>
Атрибут value содержит строку, которая пересылается серверу, если данный
элемент выбран из меню или списка. Если значение этого атрибута не задано, то по
умолчанию оно устанавливается равным значению содержимого контейнера
<option>…</option>. Например, элементы
<option value="Red">Red</option>.
<option>Red</option>
имеют одно значение "Red". В первом случае оно установлено явно при помощи атрибута
value, во втором – по умолчанию.
В элементе <option> можно задать те же стили, что и в элементе <select> и с
теми же ограничениями. Для этого элемента не действует стиль background-image.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
-9Информатика
Лабораторная работа 2-12
3.1.13. Элемент <textarea>
Контейнер <textarea>…</textarea> создает внутри формы поле для ввода
многострочного текста, отображаемое в окне Web-браузера в виде прямоугольной области
с горизонтальной и вертикальной полосами прокрутки. Помимо общих атрибутов class,
dir, id, lang, style и title, для элемента <textarea> можно задавать атрибуты,
приведенные в табл. 12.6.
Таблица 12.6. Атрибуты элемента <textarea>
Имя атрибута
cols
disabled
name
readonly
rows
Значение по
умолчанию
Что определяет
Количество символов в строке.
Отключает управление элемента
меню (атрибут задается по имени,
без значения).
Имя текстовой области.
Доступность элемента только для
чтения (атрибут задается по имени,
без значения).
Количество строк в текстовой
области.
зависит от Webбраузера
управление элемента
меню включено
нет
текстовую область
можно
модифицировать
зависит от Webбраузера
При вводе данных в текстовую область можно вводить несколько строк (с
помощью клавиши Enter). Для пересылки на сервер каждая введенная строка
дополняется символами "%0D%0A" (ASCII-символы «Возврат каретки» и «Перевод
строки» с предшествующим символом "%"). Полученные строки объединяются в одну
строку, которая и отправляется на сервер под именем, задаваемым атрибутом name.
В контейнере <textarea>…</textarea> можно поместить текст, который
будет первоначально отображаться в текстовой области.
Для текстовой области можно задать стили шрифта, текста (в Opera не действует
свойство text-decoration), цвета и фона, а также стили полей, границ и отступов
блоковой модели документа.
3.2. Модуль Forms
Модуль Forms является расширенным вариантом модуля Basic Forms и содержит,
помимо элементов, рассмотренных выше, элементы <button>, <fieldset>,
<legend> и <optgroup>.
3.2.1. Элемент <button>
Контейнер <button>…</button> позволяет добавить простую кнопку в Webстраницу. Текст, расположенный между открывающим и закрывающим элементом,
выводится в виде надписи на кнопке. Для элемента <button>, помимо общих атрибутов
class, dir, id, lang, style и title, определены атрибуты, приведенные в табл. 12.7.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 10 Информатика
Лабораторная работа 2-12
Таблица 12.7. Атрибуты элемента <button>
Имя атрибута
disabled
name
type
value
Что определяет
Отключает управление
кнопкой (атрибут задается
по имени, без значения).
Имя кнопки.
Тип кнопки.
Значение, посылаемое на
Web-сервер при нажатии
кнопки.
Значение по
умолчанию
управление кнопкой
включено
нет
button
Атрибут type в элементе <button> может принимать следующие значения:
button – простая кнопка (значение по умолчанию);
reset – кнопка сброса;
submit – кнопка отправки данных на Web-сервер.
В отличие, от кнопки, формируемой элементом <input> со значением
type="button", кнопка, создаваемая с помощью элемента <button> может быть
задана в любом месте документа HTML, а не только в форме.
Для элемента <button> можно задать стили шрифта, текста, цвета и фона, а
также стили полей, границ и отступов блоковой модели документа. Свойство textalign действует только в Internet Explorer (в Firefox, Opera и Netscape надпись на кнопке
всегда выровнена по центру). Свойство background-image (использование в кнопке
изображения в качестве фона) не действует в Internet Explorer.
3.2.2. Элементы <fieldset> и <legend>
Контейнер <fieldset>…</fieldset>
группирует элементы формы
аналогично тому, как это делает контейнер <div>…</div> по отношению к элементам
Web-страницы, причем контейнеры <fieldset>…</fieldset> могут также быть
вложенными. Для элемента определены общие атрибуты class, dir, id, lang, style
и title.
Контейнер
<legend>…</legend>
внутри
контейнера
<fieldset>…</fieldset>
задает надпись для группы полей. Для элемента
<legend> также определены общие атрибуты class, dir, id, lang, style и title.
Для элементов <fieldset> и <legend>
можно задать стили шрифта,
текста, цвета текста и фона, а также стили блоковой модели документа. Стили для фона, а
также стили блоковой модели документа элемента <fieldset> действуют для всей
группы элементов, а стили шрифта и текста – для всех надписей (элементов <legend>)
внутри группы. Стили, заданные для элемента <legend>, действуют только для надписи.
Стиль text-align (выравнивание надписи по горизонтали) не действует ни в одном
Web-браузере, однако в элементе <legend> можно задать атрибут align со
значениями "left" – выравнивание влево, "center" – выравнивание по центру или
"right" – выравнивание вправо (этот атрибут не действует в Opera).
3.2.3. Элемент <optgroup>
Контейнер <optgroup>…</optgroup> позволяет группировать элементы
внутри контейнера <select>…</select> для формирования иерархического меню.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 11 Информатика
Лабораторная работа 2-12
Помимо общих атрибутов class, dir, id, lang, style и title, для элемента
<optgroup>, определены атрибуты, приведенные в табл. 12.8.
Таблица 12.8. Атрибуты элемента <optgroup>
Имя атрибута
disabled
label
Значение по
умолчанию
Что определяет
Отключает управление
данной группы пунктов
меню (атрибут задается по
имени, без значения).
Имя для группы пунктов.
управление
группой включено
нет
Для элемента <optgroup> можно задать стили шрифта, текста, цвета текста и
фона, а также (в Firefox и Netscape) стили блоковой модели документа.
3.3. Объект navigator
Объект navigator служит для получения характеристик Web-браузера клиента.
Поддерживаемые объектом navigator свойства отличаются в разных Webбраузерах. В табл. 12.9 приведены те свойства, которые поддерживаются всеми Webбраузерами.
Таблица 12.9. Свойства объекта navigator
Свойство
appCodeName
appName
appVersion
cookieEnabled
platform
userAgent
Описание
Возвращает имя кода программы Web-браузера.
Возвращает имя программы Web-браузера.
Возвращает версию программы Web-браузера.
Возвращает
true,
если
Web-браузеру
разрешен
пользователем прием cookie, иначе возвращает false.
Возвращает название клиентской платформы, например,
"Win32".
Возвращает строку, идентифицирующую Web-браузер
клиента.
Является
комбинацией
значений
свойств
appCodeName и appVersion.
Объект navigator поддерживает, кроме того, метод javaEnabled(), возвращающий true, если Web-браузеру разрешено пользователем выполнение сценариев
JavaScript.
Наиболее часто используются свойства appName и appVersion, позволяющие
создавать сценарии, учитывающие используемый Web-браузер и его версию. Например,
следующая последовательность предложений
if (navigator.appName == "Microsoft Internet Explorer")
{
действия, которые необходимо выполнить для Internet Explorer
}
else if (navigator.appName == "Netscape")
{
действия, которые необходимо выполнить для Netscape и Firefox
}
else if (navigator.appName == "Opera")
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 12 Информатика
Лабораторная работа 2-12
{
действия, которые необходимо выполнить для Opera
}
выполнит некоторые операции, которые по-разному реализуются в разных Webбраузерах.
3.4. Обработка событий
До появления операционных систем с графическим интерфейсом (типа Windows)
было распространено так называемое «процедурное» программирование, суть которого
заключается в том, что программа жестко определяет, когда и в какой последовательности
вызываются те или иные процедуры, составляющие программу (языками такого типа
являются, например, C, Pascal или Basic). Программист должен был заранее разработать и
реализовать алгоритм выполнения своей программы. При ее запуске она жестко следовала
инструкциям вызова соответствующих процедур.
По-иному выглядит работа приложения с графическим интерфейсом. Оно должно
реагировать на действия пользователя, например на нажатие кнопки мыши, или клавиши
на клавиатуре. В этом случае выполняемая программа не должна следовать один раз и
навсегда заданному алгоритму выполнения. Она должна иметь возможность запускать на
выполнение процедуры, реализующие действие, которое желает выполнить в данный
момент пользователь приложения.
Такая технология реализуется с помощью концепции события, которое
представляет собой действие пользователя (например, нажатие кнопки) или сообщение,
генерируемое операционной системой (открылось закрытое окном другого приложения
или окно нашего приложения). В объектно-ориентированных технологиях любое событие
представляется объектом, обратившись к свойствам которого можно получить некоторые
параметры сгенерированного события.
События, возникающие в системе, в спецификации DOM2 Events разбиты на три
группы:
события графического интерфейса, связанные с взаимодействием с
пользователем (UI Events);
события графического интерфейса, не связанные с взаимодействием с
пользователем (UI Logical Events);
события, связанные с изменением структуры документа (Mutation Events).
К событиям, связанным с взаимодействием с пользователем, относятся события
обработки нажатия клавиш и клавиатуры или кнопок мыши. Эти события представлены в
табл. 12.10.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 13 Информатика
Лабораторная работа 2-12
Таблица 12.10. События обработки нажатия клавиш и клавиатуры или кнопок
мыши
Имя события
click
dblclick
keydown
keypress
Описание
Наступает при щелчке мышью на элементе страницы или на самой
странице.
Наступает при двойном щелчке мышью на элементе. Может
применяться для создания элементов, не реагирующих на
одинарный щелчок, но реагирующих на двойной щелчок.
Наступает, когда пользователь нажимает и удерживает клавишу на
клавиатуре.
Наступает, когда пользователь нажимает клавишу на клавиатуре. От
keydown отличается тем, что возвращает значение кода символа в
кодировке Unicode.
keyup
Наступает, когда пользователь отпускает нажатую ранее клавишу на
клавиатуре.
mousedown
Наступает, когда пользователь нажимает кнопку мыши на элементе
страницы или на самой странице.
mousemove
Наступает, когда пользователь перемещает мышь над элементом
страницы или над самой страницей. Это событие вызывается при
любом перемещении мыши.
mouseout
mouseover
Наступает, когда пользователь убирает мышь с элемента страницы.
Наступает, когда пользователь помещает мышь над элементом
страницы.
mouseup
Наступает, когда пользователь отпускает ранее нажатую кнопку
мыши.
Как видно из таблицы, многие события вызываются подряд друг за другом.
Например, при перемещении мыши над элементом страницы последовательность
наступления событий будет такой:
mouseover, mousemove, mouseout.
Следует отметить, что mousemove наступает при любом, даже самом малом
перемещении мыши.
При щелчке мышью на объекте последовательность событий будет следующей:
mousedown, mouseup, click.
т. е. код, привязанный к mousedown и mouseup, будет выполняться прежде кода,
привязанного к click.
Если пользователь щелкает дважды, то последовательность событий следующая:
mousedown, mouseup, click, dblclick.
Как видно, при двойном щелчке раньше события dblclick наступает click. Это
можно использовать в сценариях и, вместе с тем, придется это учитывать, чтобы не
прореагировать на обычный щелчок, если нужна реакция на двойной щелчок.
При нажатии клавиши на клавиатуре последовательность наступления событий
такова:
keydown, keypress, keyup.
При этом событие keypress наступает постоянно, пока пользователь не отпустит
клавишу. Это происходит вследствие так называемого автоповтора, когда, нажав и
удерживая клавишу, можно добиться многократного и очень частого ее срабатывания.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 14 Информатика
Лабораторная работа 2-12
События, не связанные с взаимодействием с пользователем, приведены в табл.
12.11.
Таблица 12.11. События, не связанные с взаимодействием с пользователем
Имя события
Описание
abort
Наступает при приостановке загрузки Webстраницы до окончательной загрузки
изображения.
blur
Наступает при потере фокуса элементом.
change
error
focus
load
reset
resize
scroll
select
submit
unload
Наступает при потере фокуса элементом после
изменения его содержимого.
Наступает при ошибке во время загрузки
изображения или выполнения сценария.
Наступает при приобретении фокуса
элементом.
Наступает при окончании загрузки документа.
Наступает при сбросе содержимого формы.
Наступает при изменении размеров документа.
Наступает при прокрутке документа.
Наступает при выделении текста
Наступает при отправке формы на Web-сервер.
Наступает при удалении элемента из окна или
фрейма.
Для каких элементов
используется
<img>
<button>, <input>,
<label>, <select>,
<textarea>
<input>, <select>,
<textarea>
<img>, <script>
<button>, <input>,
<label>, <select>,
<textarea>
<body>, <frameset>
<form>
<body>, <frameset>
<body>, <frameset>
<input>, <textarea>
<form>
<body>, <frameset>
События, связанные с изменением структуры документа пока по-разному
реализуются в разных Web-браузерах.
Для обработки событий в документе HTML можно использовать несколько
способов.
Первый, самый распространенный, способ – задание атрибута обработки события в
элементе элемента документа HTML.
Имена атрибутов обработки событий образуются из имени события с добавлением
префикса "on". Значением атрибута являются предложение или предложения языка
сценариев, реализующие обработку события, например:
<button id="b1" onclick="alert('Нажата кнопка 1')">
Кнопка 1</button>
Поскольку обычно обработка события реализуется несколькими предложениями, в
качестве значения атрибута указывается вызов функции, обрабатывающей данное
событие:
function buttonEvent()
{
alert('Нажата кнопка 1')
}
...
<button id="b1" onclick="buttonEvent()">
Кнопка 1</button>
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 15 Информатика
Лабораторная работа 2-12
Второй способ – прямое объявление функции, обрабатывающей событие заданного
типа в документе или элементе документа (эта функция называется обработчиком
события – event handler). Объявление функции-обработчика имеет следующий вид:
document.элемент-документа.onимя-события = имя-функции;
Если элемент-документа опущен, то обработка события будет выполняться в теле
документа.
Объект event, имеет два общих свойства: свойство type (только для чтения),
возвращающее строковое значение имени события, например, click и свойство,
содержащее объект, в котором произошло событие. Это свойство называется
srcElement в Internet Explorer и target в DOM2 Events.
Для событий мыши определены свойства, приведенные в табл. 12.12.
Таблица 12.12. Дополнительные свойства для событий мыши
Имя свойства
Описание
altKey
Возвращает true, если была нажата клавиша Alt.
button
Возвращает номер кнопки мыши, нажатой пользователем (В Internet
Explorer: 1 – левая кнопка, 4 – средняя кнопка и 2 – правая кнопка; в DOM:
0 – левая кнопка, 1 – средняя кнопка и 2 – правая кнопка).
clientX
Возвращает горизонтальную координату курсора мыши относительно
клиентской области окна (без учета рамок, заголовка, строки меню, панелей
инструментов и строки состояния).
clientY
Возвращает вертикальную координату курсора мыши относительно
клиентской области окна (без учета рамок, заголовка, строки меню, панелей
инструментов и строки состояния).
ctrlKey
Возвращает true, если была нажата клавиша Ctrl.
screenX
Возвращает горизонтальную координату курсора мыши относительно
экрана.
screenY
shiftKey
Возвращает вертикальную координату курсора мыши относительно экрана.
Возвращает true, если была нажата клавиша Shift.
Для событий клавиатуры, помимо свойств altKey, ctrlKey и shiftKey
определено также свойство, возвращающее десятичное значение кода нажатой клавиши в
кодировке Unicode. В Internet Explorer это свойство называется keyCode, а в остальных
Web-браузерах называется which.
Следует отметить, что если внутри функции-обработчика события необходимо
использовать свойства объекта event, доступ к этим свойствам по-разному выполняется
в Internet Explorer и в остальных Web-браузерах.
В Internet Explorer при возникновении любого события динамически создается
свойство event объекта window, входящего в объектную модель и представляющего
окно Web-браузера. Это свойство и является объектом, соответствующим
сгенерированному событию. Методов объект event в Internet Explorer не имеет. Поэтому
доступ, например, к свойству clientX в любом сценарии документа HTML выполняется
следующим образом:
window.clientX
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 16 Информатика
Лабораторная работа 2-12
В остальных Web-браузерах при вызове функции-обработчика события первым
параметром (или единственным) должен быть указан объект event, например:
<button id="b1" onclick="buttonEvent(event)"
value="Кнопка 1"></button>
и свойства в теле функции-обработчика задаются как свойства этого параметра.
Если элемент, который является источником (мишенью) события, имеет текстовое
содержимое, например,
<p id="p1">Абзац текста</p>
то Internet Explorer и остальные Web-браузеры по-разному определяют элемент,
вызвавший событие. Для Internet Explorer это будет элемент <p>, а для остальных Webбраузеров – дочерний текстовый элемент элемента <p>. Поэтому для того, чтобы
получить, например, значение идентификатора элемента, вызвавшего событие, и в Internet
Explorer и в Netscape Navigator, необходимо задать следующую последовательность
предложений:
if (browserName == "Microsoft Internet Explorer")
elementId = event.srcElement.id;
else if (browserName == "Netscape")
elementId = evt.target.parentNode.id;
4. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ
Создайте интерактивную Web-страницу с использованием форм и обработки
событий по одному из приведенных ниже вариантов.
Вариант 12-01
Создайте Web-страницу, в которой определяется средний балл студента. В первом
текстовом поле должны быть введены фамилия и инициалы учащегося, в
раскрывающемся меню задаются наименования дисциплин обучения, а во втором
раскрывающемся меню – полученная оценка по дисциплине. При нажатии кнопки
"Добавить" дисциплины обучения и полученные оценки выводятся в текстовой области
(каждая дисциплина обучения и оценка – в отдельной строке). При нажатии кнопки
"Средний балл" в третьем текстовом поле выводится средний балл студента.
Вариант 12-02
Создайте Web-страницу, в которой выполняются арифметические действия над
двумя числовыми операндами. Операнды вводятся в двух текстовых полях. При нажатии
одной из кнопок: "+", "-", "*" или "/" над операндами выполняется соответствующая
арифметическая операция, и результат выводится в третьем текстовом поле. Если хотя бы
один из введенных операндов не является числом, в третьем текстовом поле выводится
сообщение "Ошибка".
Вариант 12-03
Создайте Web-страницу, в которой определяется количество прожитых лет,
месяцев, часов, минут и секунд. Дата рождения вводится следующим образом: номер дня
в месяце и наименование месяца – в раскрывающихся меню, а год – в текстовом поле. При
нажатии кнопки "Статистика" в пяти текстовых полях выводится соответственно
количество прожитых лет, месяцев, часов, минут и секунд. Если введен ошибочный год,
то в текстовом поле для года выводится сообщение "Ошибка".
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 17 Информатика
Лабораторная работа 2-12
Вариант 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
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 18 Информатика
Лабораторная работа 2-12
в дескрипторе <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) задаются с помощью раскрывающихся меню. При нажатии кнопки "Добавить"
журнал или газета товар добавляется в список подписки, а при нажатии кнопки
"Подсчитать" в текстовом поле выводится суммарная стоимость подписки.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 19 Информатика
Лабораторная работа 2-12
Вариант 12-15
Создайте Web-страницу, в которой выполняется преобразование введенного числа
в десятичную систему счисления. В первом текстовом поле вводится
целое
шестнадцатеричное, восьмеричное или двоичное число. Система счисления задается с
помощью радиокнопок "Hex", "Oct" и "Bin". При нажатии кнопки "Перевести" число
переводится в десятичное представление, и результат выводится во втором текстовом
поле. Если введенный операнд не является числом в соответствующей системе счисления,
во втором текстовом поле выводится сообщение "Ошибка".
Вариант 12-16
Создайте Web-страницу, в которой выводится заголовок заданного уровня. В
начале страницы выводится заголовок первого уровня "Вывод заголовка". Текст
заголовка задается в текстовом поле, а уровень заголовка задается с помощью
раскрывающегося меню (h1-h6). Выравнивание заголовка (center, left, right или
justify) задается с помощью радиокнопок. При нажатии кнопки "Вывод" заголовок в
начале Web-страницы заменяется заданным заголовком (для этого удаляется старый
заголовок и на его место вставляется новый заголовок).
Вариант 12-17
Создайте Web-страницу, в которой подсчитывается количество заданных слов в
тексте (словом считается строка, перед которой и после которой стоит один из символов
разделителей: пробел, переход на новую строку, точка, запятая, точка с запятой,
восклицательный знак или вопросительный взгляд). Исходный текст вводится в
текстовую область, а слово вводится в текстовом поле. При нажатии кнопки
"Определить" во втором текстовом поле выводится количество повторений заданного
слова в исходном тексте.
Вариант 12-18
Создайте Web-страницу, в которой определяется количество дней между двумя
заданными датами. Для каждой даты номер дня в месяце и наименование месяца вводятся
с помощью раскрывающихся меню, а год – в текстовом поле. При нажатии кнопки
"Определить количество дней" результат выводится в текстовом поле.
Если
введен ошибочный год, то в текстовом поле для года выводится сообщение "Ошибка".
Вариант 12-19
Создайте Web-страницу, в которой выводится таблица с заданными параметрами
(содержание таблицы является произвольным). Для таблицы в трех текстовых полях
задается толщина рамки (атрибут border), расстояние между ячейками (атрибут
cellspacing) и поля внутри ячейки (атрибут cellpadding). Кроме того, с помощью
двух раскрывающихся меню задаются цвета рамки и цвета фона таблицы. При нажатии
кнопки "Просмотр" параметры таблицы изменяются на заданные (первоначально
таблица выводится со значениями атрибутов, равными значениям по умолчанию).
Вариант 12-20
Создайте Web-страницу, в которой угадывается заданное слово. Первоначально в
первом текстовом поле выводятся символы "*", количество которых равно длине
заданного слова. Во втором текстовом поле вводится символ и, при нажатии кнопки
"Проверить", выполняется проверка наличия введенного символа в поле. Если
введенный символ есть в заданном поле, то в первом текстовом поле соответствующие
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 20 Информатика
Лабораторная работа 2-12
символы "*" заменяются введенными символами. Когда угаданы все символы слова, в
третьем текстовом поле выводится количество попыток угадывания слова.
Вариант 12-21
Создайте Web-страницу, в которой вычисляется тригонометрическая функция для
заданного значения. Единицы для вводимого значения (градусы или радианы) задаются с
помощью радиокнопок. Вводимое число задается в первом текстовом поле. При нажатии
одной из кнопок: "sin", "cos" или "tg" результат выводится во второе текстовое поле.
Если введено не число, то во втором текстовом поле выводится сообщение "Ошибка".
Вариант 12-22
Создайте Web-страницу, в которой по заданной дате и времени начала события
продолжительности события определяется дата и время его окончания. Дата начала
события с помощью двух раскрывающихся меню (для дня в месяце и месяца) и текстового
поля (для года). Время начала события задается в двух текстовых полях (значение часов и
минут). Продолжительность события задается с помощью трех текстовых полей: для дней,
часов и минут (в качестве начальных значений этих полей задаются нули, поэтому можно
задавать только отдельные компоненты времени, например, задавать продолжительность
события в часах). При нажатии кнопки "Определить" результат выводится в пять
текстовых полей: день месяца, месяц, год, час, минута. Если в данных содержатся
ошибки, то в соответствующем текстовом поле выводится сообщение "Ошибка".
Вариант 12-23
Создайте Web-страницу, в которой выводится ячейка таблицы с заданной шириной
и высотой и с заданным форматированием по вертикали и горизонтали (содержание
ячейки таблицы является произвольным). Для ячейки таблицы в двух текстовых полях
задается ширина (атрибут width), высота (атрибут height), а также в двух
раскрывающихся меню значения соответственно горизонтального (center, left или
right) и вертикального (top, middle или bottom) выравнивания содержимого
ячейки. При нажатии кнопки "Просмотр" параметры ячейки таблицы изменяются на
заданные (первоначально ячейка таблица выводится с произвольным значением ширины и
высоты, а содержимое ячейки расположено сверху по центру).
Вариант 12-24
Создайте Web-страницу, в которой выполняется кодирование заданной строки. В
первом текстовом поле вводится заданная строка. При нажатии кнопки "Кодировать" во
втором текстовом поле (только для чтения) выводится текущий символ строки, а третьем
текстовом поле необходимо ввести код текущего символа (один или несколько символов).
Если в строке несколько одинаковых символов, то операция кодирования выполняется
только для первого вхождения символа. После кодировки всех символов в четвертом
текстовом поле выводится закодированная строка.
Вариант 12-25
Создайте Web-страницу, в которой выполняются арифметические вычисления с
использованием памяти. Операнд вводится в первом текстовом поле. При нажатии кнопки
"MS" операнд помещается в память. При нажатии одной из кнопок "M+", "M-", "M*" или
"M/" выполняется соответствующая арифметическая операция, в котором первым
операндом является текущее число в первом текстовом поле, а вторым – число в памяти.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 21 Информатика
Лабораторная работа 2-12
Результат операции выводится во втором текстовом поле. Если введено не число, то во
втором текстовом поле выводится сообщение "Ошибка".
Вариант 12-26
Создайте Web-страницу, в которой определяется результат константного
логического выражения. В первом текстовом поле формируется логическое константное
выражение с помощью кнопок "true", "false", "&" (И), "|" (ИЛИ), "!" (НЕ) и "^"
(исключающее ИЛИ) (например, true & !false | true). Выполнение операции
производится при нажатии кнопки "Вычислить". Результат выполнения операции (true
или false) выводится во второе текстовое поле.
Вариант 12-27
Создайте Web-страницу, в которой подсчитывается количество заданных символов
в тексте. Исходный текст вводится в текстовую область, а символ вводится в текстовом
поле. При нажатии кнопки "Определить" во втором текстовом поле выводится
количество повторений заданного символа в исходном тексте. Если в первом текстовом
поле введено больше одного символа, во втором текстовом поле выводится сообщение
"Ошибка".
Вариант 12-28
Создайте Web-страницу, в которой выводится заголовок первого уровня с
заданными параметрами (первоначально выводится заголовок черного цвета размера 4,
выровненный по центру). С помощью радиокнопки можно задать выравнивание заголовка
(center, left, right или justify),
с помощью раскрывающегося меню с
несколькими цветами можно задать цвет заголовка и с помощью текстового поля можно
задать размер заголовка. При нажатии кнопки "Выполнить" заголовок (с помощью
сценария JavaScript и средств DOM) выводится с заданными значениями атрибутов
align в дескрипторе <h1>, color и size в дескрипторе <font>.
Вариант 12-29
Создайте Web-страницу, в которой выводится изображение и два текстовых поля, в
которых задается ширина и высота изображения. При нажатии кнопки "Изменить"
изображение выводится с заданной шириной и высотой.
Вариант 12-30
Создайте Web-страницу, в которой вычисляется результат логической операции a
операция b. Значения a и b (true или false) задаются с помощью радиокнопок, а
логическая операция – с помощью кнопок "&" (И), "|" (ИЛИ) и "^" (исключающее ИЛИ).
Выполнение операции производится при нажатии кнопки "Вычислить". Результат
выполнения операции (true или false) выводится во втором текстовом поле.
5. СОДЕРЖАНИЕ ОТЧЕТА
В отчете должен быть представлен текст файла, содержащего созданную Webстраницу, а также скриншоты, содержащие созданную форму с введенными значениями
исходных данных и результатами.
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.
- 22 Информатика
Лабораторная работа 2-12
6. ВОПРОСЫ ДЛЯ САМОКОНТРОЛЯ
1. Как в форме задается программа, обрабатывающая форму, и параметры этой
программы?
2. Для каких целей используется элемент <label>?
3. Какие элементы форм определены в JavaScript? Дайте краткую характеристику
каждого элемента.
4. С помощью какого элемента формы можно передать файл на Web-сервер?
5. Для каких целей используются скрытые поля формы?
6. Чем отличается текстовое поле от текстовой области?
7. Чем отличается описание кнопки с помощью элемента <button> от описания с
помощью элемента формы?
8. Для каких целей используются элементы <fieldset> и <legend>?
9. Для каких целей используется элемент <optgroup>?
Файл: Lab2-12.doc Создан: 11.04.2007 Модифицирован: 16.03.2016
Автор: Шонин В.А.