□ написание части сценария, в которой будет реализована необходимая функциональность (например, обмен информацией между формой и внешним файлом с данными, корректное отображение данных в форме и т.д.);
□ добавление в сценарий функций-обработчиков событий, связанных с поведением браузера Internet Explorer;
□ добавление в сценарий функций-обработчиков событий, которые генерируются элементами управления в форме.
Ниже мы рассмотрим каждый из этих этапов на примере создания сценария IEPhoneBook.js для работы с записной книжкой, которая хранится, как и прежде, в XML-файле book.xml.
В качестве интерфейса записной книжки мы создадим диалоговое окно (пользовательскую форму), которое показано на рис. 7.3.
Рис. 7.3. Диалоговое окно для работы с записной книжкой
Эта форма реализуется с помощью HTML-файл Phone.htm, который полностью приведен в листинге 7.6.
В самом начале файла Phone.htm ставится тег , указывающий на то, что содержимым файла является текст в формате HTML, а также теги и , внутри которых задаются используемая кодировка (charset=windows-1251) и заголовок формы (теги ):
Для того чтобы задать цвет формы, в теге используется атрибут bgcolor со значением "silver":
Атрибут scroll="no" указывает на то, что в диалоговом окне не должно быть полос прокрутки.
Наша форма состоит из семи текстовых полей ввода (табл. 7.2) и восьми кнопок (табл. 7.3).
| Имя поля | Размер поля (символов) | Назначение |
|---|---|---|
txtLastName | 50 | Поле для ввода фамилии |
txtName | 50 | Поле для ввода имени |
txtPhone | 15 | Поле для ввода номера телефона |
txtStreet | 50 | Поле для ввода названия улицы |
txtHouse | 10 | Поле для ввода номера дома |
txtApp | 5 | Поле для ввода номера квартиры |
txtNote | 80 | Поле для ввода примечания |
| Текст кнопки | Имя кнопки | Назначение |
|---|---|---|
| << | btnFirst | Переход к первой записи |
| < | btnPrevious | Переход к предыдущей записи |
| Новая запись | btnNew | Добавление новой пустой записи |
| Записать | btnSave | Сохранение сделанных изменений в XML-файле |
| Отменить | btnCancel | Отмена сделанных в форме изменений |
| Удалить | btnDelete | Удаление текущей записи |
| > | btnNext | Переход к следующей записи |
| >> | btnFinal | Переход к последней записи |
Команды, создающие форму, находятся внутри тегов и . Сами текстовые поля ввода и кнопки создаются в HTML-файле с помощью одного и того же тега . Внутри этого тега нужно указать несколько атрибутов:
□ type — определяет тип элемента управления (для поля ввода type="text", для кнопки type="button");
□ name — задает имя элемента управления;
□ size — определяет длину строки поля ввода в символах;
□ value — задает надпись на кнопке.
Для того чтобы поля ввода располагались точно друг под другом, мы поместим их в таблицу с невидимыми границами, состоящую из двух столбцов: в первом находится описание (метка) для поля, во втором — сам элемент управления. Таблица в HTML-файле создается с помощью парных тегов , внутри которых приводятся теги , задающие начало и конец одной строки таблицы соответственно:
Здесь аргумент border задает ширину границ таблицы (в нашем случае границы невидимы), а в аргументе style указываются название и размер шрифта, которым будет выводиться содержимое таблицы.
В свою очередь, внутри тегов находятся теги , определяющие одну ячейку таблицы, например:
Фамилия
Для тегов width, задающий ширину строки в процентах от общей ширины строки.
Кнопки в форме выводятся друг за другом, нужное расстояние между ними достигается с помощью неразрывных пробелов (escape-последовательность ), например:
Фамилия
Имя
Телефон
Улица
Дом
Кв.
Примечание
