ОБЪЕКТНАЯ МОДЕЛЬ БРАУЗЕРА

урок 7 | зачет | задания | дополнения | урок 9

урок 8: формы (кнопки, строки ввода)

В уроке рассмотрены следующие темы:

• атрибуты тега <FORM>
• посылка формы по email
• атрибут name тега <INPUT>
• кнопки
• обычная и секретная строка ввода

принцип программного управления

Для каждого тега внутри гипертекстовой страницы браузер создает объект. Доступ к этому объекту программист получает при помощи имени, которое задается атрибутом name. Таким образом, появляется возможность программного управления тегами.

Пусть, например, в HTML-коде задан тег для вывода на экран картинки:

<IMG src=./pic/ris1.gif border=0 alt="" name=pic>

Браузер строит для этого тега экземпляр стандартного объекта Image с именем pic. Получить к нему доступ можно при помощи эквивалентных конструкций:

window.document.images["pic"]
window.document.images.pic

или, внутри текущего окна:

document.images["pic"]
document.images.pic

Известно, например, что у объекта Image есть свойство src, содержащее указание на файл с картинкой. Можно в программе прочитать это свойство, записав обращение:

document.images.pic.src

Можно, не только прочитать, но и изменить значение этого свойства:

document.images.pic.src = "./pic/ris2.gif";

команда FORM

Работая с гипертекстовыми документами, мы не раз имели возможность вводить текст в поле ввода, выбирать пункт меню, отмечать флажком правильный ответ, “нажимать” кнопку. При этом мы всегда ожидали от документа осмысленной реакции.

Все эти интерфейсные элементы выводятся на экран браузера при помощи команды-контейнера <FORM>...</FORM>, а кнопки, поля ввода, флажки и меню задаются внутри этого блока отдельными тегами.

Блок <FORM>...</FORM> называется формой. В открывающем теге можно записывать следующие атрибуты:

<FORM action="mailto:myaddres@mail.ru">

<FORM action="mailto:myaddres@mail.ru"
      enctype="text/plain">

<FORM action="mailto:myaddres@mail.ru"
      enctype="text/plain"
      method="post">

<FORM name="anketa">

var str = document.anketa.work.value;

document.anketa.work.value = "вебмастер";

Приведенный ниже пример можно использовать как образец кодирования посылки формы по электронной почте.

Если поместить этот код в свою HTML-программу, то на гипертекстовой страничке возникнет картинка, подобная той, что изображена справа. Пользователь нажимает кнопку “сброс” и поля принимают значения, установленные по умолчанию. Затем форма заполняется и по нажатию на кнопку “послать заказ” отправляется по адресу myaddres@mail.ru

Обычно браузер не сам отсылает форму, а поручает работу почтовой программе, установленной по умолчанию в операционной системе компьютера (например, Outlook).

Письмо посылается в виде:

Таким образом, письмо составляется из пар имя=значение, которые выбираются по-порядку из полей формы.

В качестве обратного адреса в письме указывается адрес пользователя компьютера с которого отправляется форма.

Вы можете провести серию опытов, посылая формы самим себе.

Замечание 1. Форма отправляется браузером по электронной почте лишь в том случае, если в его настройках указан соответствующий уровень безопасности.

Замечание 2. Приведенный код наглядно показывает, что внутри блока <FORM>...</FORM> могут располагаться обычные теги HTML.

команда <INPUT>

С помощью тега <INPUT> в форме можно задать разные элементы ввода и управления.

атрибут name

Каждый тег <INPUT> может содержать атрибут name. Значение этого атрибута можно использовать как имя объекта, который браузер создает для этого тега. Пусть, например, задана такая форма:

<FORM name=anketa>
  <INPUT type=text value=крошкосшиватель name=obj>
</FORM>

В программе на JavaScript можно использовать конструкцию document.anketa.obj.value для доступа к свойству value объекта, построенного для тега <INPUT>. Эта запись “расшифровывается” так:

Можно прочитать значение атрибута value:

var str = document.anketa.obj.value;

А можно и изменить значение этого атрибута:

document.anketa.obj.value = "пылеистребитель";

Значение атрибута namе приравнивается к имени переменной, поэтому при выборе названия нужно использовать все правила построения идентификаторов, рассмотренные в уроке 2. В частности, нельзя использовать в имени русские буквы и цифру в качестве первого символа.

Имена, заданные атрибутом namе, должны быть разными внутри одной формы, но могут совпадать с именами полей других форм — браузер не запутается, ведь формы разные и они отображаются в разные объекты.

атрибут type (экранные кнопки)

Конкретный вид интерфейсного элемента <INPUT> задается атрибутом type. Рассмотрим значения этого атрибута, задающие экранные кнопки.

<INPUT type=reset value=сброс>

<INPUT type=submit value=послать>

<INPUT type=button value="нажми меня">

программное управление

Объект, построенный браузером для тега <INPUT type=button> (или тегов <INPUT type=submit>, <INPUT type=reset>) имеет свойство value, которое соответствует одноименному атрибуту тега.

Ниже приводится пример, демонстрирующий работу с этим свойством.

Поработайте с экранными кнопками и разберитесь в алгоритме работы программы.

Можно упростить обращение к полям формы, если использовать указание this — ссылку на текущий экземпляр объекта и указание this.form — ссылку на объект, построенный для текущей формы:

Как видите, в этом коде не потребовалось имя для формы. Синонимом имени внутри формы оказалась конструкция this.form.

А внутри второго тега <INPUT> не потребовалось имя этого тега, вместо него использован синоним this.

Замечание. Объект, построенный для любого элемента управления или ввода, содержит свойство form, являющееся указателем на объект-форму, содержащий этот элемент.

Значения text и password для атрибута type тега <INPUT type=... > задает строку ввода.

<INPUT type=text value=Варвара size=10 maxlength=15>

<INPUT type=password value="" size=5 maxlength=5>

программное управление

Объект, построенный браузером для тега <INPUT type=text> (или <INPUT type=password>) имеет следующие свойства:

Следующий скрипт иллюстрирует смысл свойств value и defaultValue.

• Нажмите последовательно кнопки value и defaultValue. Вы увидите значения одноименных свойств объекта str. Эти значения сейчас совпадают и равны "Почтальон Печкин".
• Введите в строку новый текст “Крокодил Гена”. Теперь значения свойств value и defaultValue не совпадают. Почему?

пример

Поработайте на этом стенде и по приведенному ниже коду разберитесь, как он устроен.

Дополнительный материал

Зачетный класс здесь.

1. Напишите приложение — зачетный класс, по какой либо теме, например, по географии или информатике. Приложение может иметь вид, представленный на рисунке.

   Постарайтесь сделать вашу программу максимально универсальной, чтобы ее можно было достаточно легко приспособить к другой теме, другому числу вопросов, другому алгоритму вычисления оценки.

   Нажмите “сброс” и приступайте к решению. Сколько будет 2x2? Сколько будет 10:2? ... Чтобы увидеть результаты работы, нажмите кнопку “оценка”.

   
   
2. Развитие предыдущей темы. Напишите приложение — зачетный класс с подсказками, которые отображаются в новом окне браузера.

   Нажмите “сброс” и приступайте к решению. Вы можете пользоваться подсказкой, но это снижают оценку! Как называется устройство, при помощи которого компьютер передает и принимает информацию по телефонной сети? Как называется узел иерархии сетевых адресов? ... Чтобы увидеть результаты работы, нажмите кнопку “оценка”.

3. Создайте экзамен по какой-либо теме. Возможный интерфейс этой программы представлен ниже.

   Экзамен Вопрос Бонус Ответ

4. Создайте вариант Угадайки на формах. Возможный интерфейс представлен здесь.
   
   
5. Посмотрите на упрощенный вариант контролирующей роботландской программы Правилка. Это, конечно, очень упрощенный вариант. Разместите Правилку на своей странице, измените число заданий и их содержание, придумайте другие “звания” для подбадривания пользователя.
   
   
6. Правилка считает пробелы в начале и конце строки ввода ошибкой. Исправьте эту погрешность.
   
   
7. Увеличьте в Правилке число “званий” и соответствующее им число картинок, которые эти звания иллюстрируют.