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

два слоя обсуждения новых тегов

В этом и в следующих двух уроках новые теги вводятся с двух точек зрения. С одной стороны, показано, как тег записывается в HTML-коде, с другой — рассказано, какой объект в объектной модели браузера соответствует тегу, какие свойства и методы имеет этот объект.

Первая точка зрения позволяет использовать тег для построения статичного HTML-документа, вторая — динамически менять документ, воздействуя на объектную модель при помощи набора скриптов.

пример

<INPUT type=button value=пуск
       onclick="alert('Нажали кнопку')">

Здесь неявно использован объект, соответствующий тегу <INPUT.

Это неявное обращение происходит благодаря включению в состав тега специального атрибута — onclick. Значение этого атрибута — скрипт, который начинает работу при щелчке мыши по образу тега на экране.

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

В приведенном ниже примере при каждом щелчке надпись на кнопке меняется и принимает попеременно значения “пуск”, “выполнить”.

Функция Make() явно обращается к объекту, который соответствует тегу <INPUT>:

Как видите, свойство value объекта, построенного браузером для тега <INPUT>, полностью соответствует одноименному атрибуту. Если изменить это свойство в объекте, надпись на кнопке тоже изменится, ведь браузер отслеживает соответствие объектной модели экра нному образу документа.

Обратите внимание на то, что описание переменной ind расположено вне функции Make().

Перенесем это описание внутрь:

function Make()
{
  var ind = 1;
  var title = new Array("пуск", "выполнить");
  document.forma.knopka.value = title[ind];
  ind = 1 - ind;
}

Теперь надпись на кнопке изменится один раз, и больше меняться не будет. Ведь переменная, описанная внутри функции, локальна в ней, то есть, создается заново при каждом обращении к функции.

Это означает, что при каждом входе в Make() переменная ind будет иметь значение 1, а команда смены значения ind = 1 - ind становится бессмысленной.

оборонительная Угадайка на формах

Этот пример, описанный в уроке как задание 4, весьма поучителен. Он должен демонстрировать гипертекст, работающий как обычная компьютерная программа. Кроме того, пример хорошо иллюстрирует принцип ООП — управление логикой программы при помощи событий. Код Угадайки может иметь вид:

...
// Нажата кнопка "помощь".
function help()
{
 ...
}
// Нажата кнопка "старт игры".
function newgame()
{
 ...
}
// Нажата кнопка "пуск"
function go()
{
 ...
}
// Проверка num на целое число из [a,b].
function IsNumAB(num, a, b)
{
 ...
  return a <= parseInt(num,10) && parseInt(num,10) <= b;
}
...

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

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

<INPUT type=button value=помощь onclick="help()">

<INPUT type=reset value="старт игры" onclick="newgame()">

<INPUT type=button value=пуск onclick="go()">

Когда Иван Сидоров показал код Угадайки Мячикову, Петр удивился:

— Какое же это ООП? — сказал он. — Ведь в программе не создано ни одного объекта!

— Самое настоящее! — ответил Иван. — В Угадайке нет ни одного “самодельного” объекта, но в ней есть объекты, построенные браузером для тегов документа. Угадайка эти объекты нещадно использует!

Иван прав! Можно сказать больше: Угадайка не просто эксплуатирует объекты браузера, но пристраивает к ним свои собственные “ручки”, перехватывая события и обрабатывая их собственными функциями.

Ниже показан возможный вариант функции go():

// Нажата кнопка "пуск"
function go()
{
  // Проверка правильности ввода.
  if(IsNumAB(document.qw.num.value, a, b))
  {
    answer = parseInt(document.qw.num.value, 10);
    document.qw.num.value="";
    step++;
    // Анализ введенного пользователем числа.
    if(answer<number)
    {
      document.qw.result.value = "мало!"
      a = answer;
    }
    else if(answer>number)
    {
      document.qw.result.value = "много!"
      b = answer;
    }
    else
    {
      document.qw.result.value = "угадано!"
      a = b = answer;
    }
    document.qw.numstep.value  = step;
    document.qw.interval.value = "["+a+","+b+"]";
  }
  else document.qw.result.value = "ошибка ввода";
}

Здесь:

Заметьте, что qw — это имя формы, в которую “погружена” Угадайка, num — имя тега, задающего поле ввода числа, result — имя тега, задающего информационное сообщение, numstep — имя тега, задающего поле номера хода, interval — имя тега, задающего поле показа текущего интервала.