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

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

В предыдущем разделе были изложены базовые понятие языка JavaScript, а также его синтаксис.

Хотя конструкции языка и рассматривались в контексте HTML-кода (блок <SCRIPT>...</SCRIPT>, ничего полезного для гипертекста, кроме функций alert, prompt, confirm, показано не было.

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

урок 7: объекты и события браузера

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

Ведь браузер не только отображает теги на экране, он строит для них объекты, помещая их в иерархическую модель документа. Во время работы браузер постоянно “следит” за моделью. Если свойство объекта изменилось, меняется экранный образ. Менять свойства объектов можно при помощи JavaScript. Вот и динамика на экране!

Объектная модель любого документа имеет всегда одну и ту же структуру, независимо от вида конкретной страницы:

Строго говоря, все представленные на схеме “объекты” на самом деле являются экземплярами одноименных объектов. Эти экземпляры создаются браузером для каждого конкретного документа в индивидуальном порядке. В дальнейшем будем называть эти экземпляры просто “объекты”.

объект window

Объект window располагается в вершине иерархии. Это означает, что все остальные объекты находятся внутри него, являются его свойствами.

Объект window содержит также свойства и методы окна, в котором браузер показывает документ.

Три метода нам уже хорошо известны: alert, prompt и confirm.

Если написать:

window.alert("Функция alert -- это метод объекта window");

— то браузер покажет вспомогательное окно, в которое выведет заданное сообщение.

Правда, раньше мы писали более просто:

alert("Функци\я alert -- это метод объекта window");

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

window.alert("Не все дома, но все пьют чай");
alert("Не все дома, но все пьют чай");

открытие новых окон

Часто бывает удобно показать что-то пользователю в новом окне, оставляя открытым текущее. Открыть новое окно можно при помощи метода open объекта window. Вызвать метод можно одним из следующих способов:

var переменная = open();
var переменная = open(файл);
var переменная = open(файл, имя_окна);
var переменная = open(файл, имя_окна, параметры_окна);

Здесь:

Описание объекта window, его свойств и методов содержится в справочнике в конце книги. Рассмотрим здесь некоторые параметры окна. Они задаются в строке параметры_окна в виде:

"параметр1=значение1,параметр2=значение2,...,параметрN=значениеN"

Замечание. Не рекомендуется оставлять пробел после разделительной запятой, так как браузеру Netscape это почему-то не нравится.

Описание параметров:

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

• HTML-файл, например, 0106.htm
• картинку, например, ./pic/explorer.gif
• текстовый файл, например, 0207.txt

var win = open("", "",
     "width      = height     =" +
     "scrollbars = resizable  =" +
     "menubar    = location   =" +
     "status     = toolbar    =");

Замечание. В испытателе строка параметры_окна представлена в виде “суммы” (конкатенации) строк для удобства размещения испытателя на экране. Так можно делать и в своих программах, чтобы в HTML-файле не было слишком длинных строчек. Там, где требуется разместить строку, всегда можно написать несколько строчек, соединяя их знаком “+”.

Метод close закрывает открытое окно. При этом обращение close() или window.close() закрывает текущее окно. Обращение win.close() или window.win.close() — закрывает окно win, которое было создано из текущего окна при помощи метода open.

объект document

Объект document содержит объекты (они являются свойствами объекта document), моделирующие теги, расположенные в блоке <HTML>...</HTML>.

Один из самых употребительных методов объекта document — метод write. Этот метод позволяет осуществить запись в окно документа. Перед использованием метода write, нужно открыть запись (метод open), а по окончании вывода — закрыть ее (метод close).

Формат метода open:

переменная.document.open();

Здесь переменная — это указатель окна, которое открывается на запись.

Формат метода write:

document.write(строка);

или

переменная.document.write(строка);

Здесь:

Формат метода close:

document.close();

или

переменная.document.close();

Здесь переменная — это указатель окна, которое закрывается для записи.

Замечание. Метод document.open использовать необязательно, так как метод document.write при записи данных в закрытый документ автоматически очищает старый документ и открывает его для новой записи.

пример: создание страницы “на лету”

var win=open("","","width=300,height=200");
win.document.open();
win.document.write("Пример. Эта страница построена ");
win.document.write("программным способом.");
win.document.close();

При выводе текста в окно он размещается браузером как единый абзац независимо от того, сколько раз была использована функция write.

При помощи метода write в окно можно выводить не только обычный текст, но и текст, размеченный тегами.

var win=open("","","");
win.document.open();
win.document.write(""+
                   ""+
                   ""+
                   ""+
                   ""
                  );
win.document.close();

события браузера

Браузер умеет отслеживать действия пользователя и реагировать на них. Это хорошо известно. Если щелчок мыши в окне приходится по ссылке, браузер загружает новый документ. Клавиатурный аккорд Alt+ВЛЕВО возвращает прежнее содержимое окна.

Еще примеры. Пользователь подвел мышиный курсор к картинке. Браузер тут же отображает в небольшом окошке alt-текст из соответствующего тега IMG. Пользователь давит на стрелки клавиатуры, и браузер послушно прокручивает окно.

Эти простые наблюдения показывают: мышь и клавиатура “информируют” браузер о том, что с ними делает пользователь. Кроме того, браузер “в курсе” хода загрузки документа. Если не загрузилась картинка (нет на диске, оборвалась связь с сервером), браузер замещает ее прямоугольником.

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

Вот обычная кнопка, которую браузер рисует при помощи HTML-кода:

<FORM>
  <INPUT type=button value="Обычная кнопка">
</FORM>

Кнопка задана тегом <INPUT> внутри тега-формы <FORM>...</FORM>. Атрибут value задает надпись на кнопке, а атрибут type описывает тип поля ввода. Подробный разговор о формах пойдет на следующем уроке.

Реагирует ли браузер на нажатие этой кнопки? Да, конечно, он ее перерисовывает, создавая впечатление, что кнопка вдавливается мышью в экран. Но больше ничего не происходит.

А теперь попробуйте нажать на эту кнопку:

<FORM>
  <INPUT type=button value="Кнопка с секретом"
         onclick="alert('Привет!')">
</FORM>

Что изменилось в HTML-коде? В теге <INPUT> появился новый атрибут onclick. В качестве значения атрибута в кавычках записана небольшая программа на JavaScript: "alert('Привет!')".

Атрибут onclick сообщает браузеру, что надо делать, когда кнопка нажата! Длинную программу записывать как значение атрибута не очень удобно, поэтому часто программируют так:

<SCRIPT language=JavaScript>
<!--
function Fun()
{
var now = new Date();
alert("Сегодн\я: "+now.getDate()+"/"+
  (now.getMonth()+1)+"/"+ now.getYear()+
  "\nСейчас: "+now.getHours()+":"+now.getMinutes());

}
//-->
</SCRIPT>

<FORM>
  <INPUT type=button value=""
         onclick="Fun();">
</FORM>

В этом примере в атрибуте onclick задано короткое обращение к функции Fun(), а сама функция описана обычным образом в тегах <SCRIPT>...</SCRIPT>.

Функция Fun(), которая работает при возникновении события onclick (щелчок) на кнопке, называется обработчиком этого события.

Проделайте несколько опытов.

• Измените надпись на кнопке. Для этого вместо слова “Календарь” задайте другой текст. Новая надпись появится на кнопке, когда поле ввода потеряет фокус. Это произойдет, если щелкнуть мышью за пределами вводимой строки.
• Замените код функции Fun на другой. Например, на такой (можете скопировать код через буфер обмена Windows):

  var sum = 0; for (var i = 100; i; i--) sum += i; alert("Сумма 1+2+...+100 = " + sum);

• Напишите свою собственную функцию.

Итак, JavaScript позволяет записывать в HTML-кодах свои собственные обработчики событий, и, следовательно, делать страничку интерактивной, реагирующей на действия пользователя и другие “происшествия” (например, окончание загрузки документа).

Ключевое слово onclick в теге — это имя атрибута из серии других “событийных” атрибутов с приставкой “on” (смотрите справочник в конце книги). Значением таких атрибутов является скриптовый код. Скрипт запускается, если происходит событие, кодируемое самим именем атрибута.

пример интерактивного документа

На странице расположены одно поле ввода и четыре кнопки:

примечания

1. Функция CurTime() обрабатывает нажатие кнопки “время”.
2. Функция Hallo() обрабатывает нажатие кнопки “привет”.
3. Функция alert обрабатывает нажатие кнопки “ответ”: alert(eval(document.forma.calc.value))
   Аргументом функции alert является значение функции eval: eval(document.forma.calc.value)
   Аргументом функции eval является строка из строки ввода, заданная как document.forma.calc.value
   Эта запись дает доступ к свойству value (значение строки ввода) объекта calc, который является подобъектом объекта forma, который, в свою очередь, является подъобъектом объекта document (который является подобъектом объекта window, но последнее указание опущено).
   Объект forma — это форма (имя формы задано атрибутом name).
   Объект calc — это поле ввода (имя поля задано атрибутом name).
4. Функция window.close() обрабытывает нажатие кнопки “закрыть”.
   Метод close() относится к текущему окну, то есть будет закрыто то окно, в котором нажата эта кнопка.
5. Блок <SCRIPT>...</SCRIPT> с описанием функций CurTime и Hallo помещен в раздел заголовка HTML-кода. Так делают для того, чтобы браузер смог прочитать описание функций прежде, чем к ним обратиться: ведь заголовок документа загружается самым первым.

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

Ответьте на следующие вопросы.

1. Что содержит объектная модель документа?
2. Отличаются ли по структуре модели двух разных документов?
3. Отличаются ли по содержанию модели двух разных документов?
4. На какие события реагирует браузер?
5. Какие атрибуты тегов задают обработку событий?
6. Что такое обработчик события?
7. Объясните принцип динамического управления гипертекстовой страницей.
8. Какой объект является корнем иерархической модели документа?
9. Какой объект содержит в себе модели всех тегов блока <HTML>...</HTML>?
10. Как из гипертекстового документа создать новое окно?
11. Как открыть запись в окно?
12. Как вывести в окно информацию?
13. Как закрыть запись в окно?
14. Как закрыть созданное окно?

1. Напишите приложение для вычисления площади круга:
   
   
   
   
2. Напишите приложение для показа решения нескольких задач, сформулированных ниже. Создайте страницу с меню, из которого нужная программа вызывалась бы для работы в новом окне браузера. Предусмотрите кнопки для закрытия вызываемых окон в них самих.

   Список задач:

   1. Найти площадь треугольника по его сторонам a, b, c.
   2. Найти расстояние точки (x,y) до начала координат.
   3. Найти НОД двух чисел.
   4. Вычислить число символов в строке, не считая пробелов.
   5. Найти общие символы двух строк.
   6. Найти разные символы двух строк.
   7. Сколько раз в числе встречается каждая его цифра.
   8. Найти наиболее популярные цифры числа (цифры, которые встречаются в числе наибольшее число раз).
   9. Найти число слов в тексте.
   10. Проверить, является ли строка допустимой записью числа.
   11. Вывести слово в обратном порядке.
   12. Найти число дней между двумя датами.
   13. Найти простые числа, не превосходящие заданного числа.
   14. Проверить, можно ли представить натуральное число m в виде суммы квадратов двух натуральных чисел.
   15. Все нулевые элементы массива переписать в его конец.
   16. Сократить дробь m/n.
   17. Найти такие натуральные m1 и n1, не имеющие общих делителей, что m1/n1 = m/n.
   18. Получите, если это возможно, m разных случайных целых чисел из диапазона [a,b].
   19. Узнать, попадет ли снаряд в цель, если известно расстояние до цели, начальная скорость снаряда и угол вылета.
   
   
3. Приветствие пользователя. Напишите приложение, которое вводит имя пользователя и создает новое окно с приветствием:
   
   

   Корзинка с цветами находится по адресу: ./pic/flower.jpg.
   
   

4. В следующих задачах страницы создаются “на лету”, подобно тому, как это делается в задаче о приветствии.
   1. Анкета. Ввод данных пользователя и демонстрация результатов обработки анкеты на отдельной странице.
   2. Генератор сказок. Ввод данных и генерация сказки на отдельной странице. Поля ввода могут быть такими: “имя героя”, “друг героя”, “враг героя”, “любимое занятие”, “место отдыха”, “любимый цвет”…