□ написание части сценария, в которой будет реализована необходимая функциональность (например, обмен информацией между формой и внешним файлом с данными, корректное отображение данных в форме и т.д.);

□ добавление в сценарий функций-обработчиков событий, связанных с поведением браузера Internet Explorer;

□ добавление в сценарий функций-обработчиков событий, которые генерируются элементами управления в форме.

Ниже мы рассмотрим каждый из этих этапов на примере создания сценария IEPhoneBook.js для работы с записной книжкой, которая хранится, как и прежде, в XML-файле book.xml.

Разработка HTML-формы для диалогового окна

В качестве интерфейса записной книжки мы создадим диалоговое окно (пользовательскую форму), которое показано на рис. 7.3.

Рис. 7.3. Диалоговое окно для работы с записной книжкой

Эта форма реализуется с помощью HTML-файл Phone.htm, который полностью приведен в листинге 7.6.

В самом начале файла Phone.htm ставится тег , указывающий на то, что содержимым файла является текст в формате HTML, а также теги и , внутри которых задаются используемая кодировка (charset=windows-1251) и заголовок формы (теги

Форма для записной книжки

Для того чтобы задать цвет формы, в теге используется атрибут bgcolor со значением "silver":

Атрибут scroll="no" указывает на то, что в диалоговом окне не должно быть полос прокрутки.

Наша форма состоит из семи текстовых полей ввода (табл. 7.2) и восьми кнопок (табл. 7.3).

Таблица 7.2. Поля ввода диалогового окна для работы с записной книжкой

Таблица 7.3. Кнопки диалогового окна для работы с записной книжкой

Команды, создающие форму, находятся внутри тегов

□ type — определяет тип элемента управления (для поля ввода type="text", для кнопки type="button");

□ name — задает имя элемента управления;

□ size — определяет длину строки поля ввода в символах;

□ value — задает надпись на кнопке.

Для того чтобы поля ввода располагались точно друг под другом, мы поместим их в таблицу с невидимыми границами, состоящую из двух столбцов: в первом находится описание (метка) для поля, во втором — сам элемент управления. Таблица в HTML-файле создается с помощью парных тегов

Здесь аргумент border задает ширину границ таблицы (в нашем случае границы невидимы), а в аргументе style указываются название и размер шрифта, которым будет выводиться содержимое таблицы.

В свою очередь, внутри тегов и находятся теги и , определяющие одну ячейку таблицы, например:

 Фамилия

Для тегов указывается аргумент width, задающий ширину строки в процентах от общей ширины строки.

Кнопки в форме выводятся друг за другом, нужное расстояние между ними достигается с помощью неразрывных пробелов (escape-последовательность  ), например:

Листинг 7.6. Описание формы в HTML-файле (Phone.htm)

Форма для записной книжки

  Фамилия

  Имя

  Телефон

  Улица

  Дом

  Кв.

  Примечание