4. Объекты навигатора.

     При загрузке HTML страницы навигатором (браузером) создается ряд объектов, соответствующих данной странице. Каждая страница всегда содержит обязательные объекты:

- window: объект высшего уровня, содержащий свойства, применимые к полному окну. Имеются также объекты типа window для подчиненных окон (child-window) в frame документах,
- location: содержит свойства текущего URL,
- history: содержит свойства, представляющие список уже использованных URL,
- document: содержит свойства текущего документа, такие как title, background color и forms.

     Свойства объекта типа document в полном смысле зависят от содержимого HTML страницы (content-dependent). Например, объект document может содержать свойства для каждой из конструк-ций form и anchor в документе.

     Пример. Предположим, что имеется страница с именем simple.html, содержащая следующие HTML элементы:

<TITLE>A Simple Document</TITLE>
<BODY>
<FORM NAME="myform" ACTION="FormProc()" METHOD="get" >
Enter a value:
  <INPUT TYPE=text NAME="text1" VALUE="blahblah" SIZE=20 >
Check if you want:
<INPUT TYPE="checkbox" NAME="Check1" CHECKED onClick="update(this.form)"> Option #1
<P>
<INPUT TYPE="button" NAME="Button1" VALUE="Press Me" onClick="update(this.form)">
</FORM>
</BODY>

     Как и положено для страницы, будут определены window, location, history и document объекты, как внешние ее атрибуты.
     Свойствами этих объектов будут:

     - location.href = "http://www.terrapin.com/samples/vsimple.html",
     - document.title = "A Simple Document",
     - document.fgColor = #000000,
     - document.bgColor = #ffffff,
     - history.length = 7.

     В примере представлены значения (value) этих свойств.

     На основе содержимого страницы браузер также сформирует следующие объекты:

     - document.myform,
     - document.myform.Check1,
     - document.myform.Button1.

     Этим объектам соответствуют свойства:

     - document.myform.action = http://terrapin/formproc(),
     - document.myform.method = get,
     - document.myform.length = 3,
     - document.myform.Button1.value = Press Me,
     - document.myform.Button1.name = Button1,
     - document.myform.text1.value = blahblah,
     - document.myform.text1.name = text1,
     - document.myform.Check1.defaultChecked = true,
     - document.myform.Check1.value = on,
     - document.myform.Check1.name = Check1.

     Заметим, что каждое из свойств начинается с префикса "document" с последующим именем формы "myform" и затем именем свойства (для свойств form) или именем элемента form. Последовательности в именах свойств имеют иерархический характер, который будет обсуждаться в следующем разделе.

4.1. Иерархия в объектах навигатора.

     Объекты в навигаторе образуют своего рода подчиненную последовательность, которая отражает собственно иерархическую структуру HTML страницы. В этой иерархии объект-"потомок" является свойством данного объекта. Например, конструкция form с именем form1 является объектом, но в свою очередь является свойством объекта document и допускает обращение как "document.form1".

     Иерархия объектов навигатора может быть проиллюстрирована схемой:

navigator

  window
   |
   +--parent, frames, self, top
   |
   +--location
   |
   +--history
   |
   +--document
       |
       +--forms
       |     |
       |   elements (text fields, textarea, checkbox, password
       |                      radio, select, button, submit, reset)
       +--links
       |
       +--anchors

     Обращение к выбранному свойству этих объектов должно включать имя объекта и всех его "предков". Исключение: не требуется включать название window объекта.

4.2. Соотношение JavaScript и HTML структур.

     При загрузке HTML страницы браузер последовательно сверху вниз просматривает ее содержимое в два этапа, сначала заголовок HEAD документа и затем контейнер BODY. При этом различного типа структуры языка HTML отображаются как объекты в JavaScript парадигме. Например, в стра-нице представлена form как одна из структур HTML с элементами полей ввода:

<FORM NAME="statform">
<input type = "text" name = "username" size = 20>
<input type = "text" name = "userage" size = 3>

     Эти form элементы соответствуют JavaScript объектам document.statform.username и document.statform.userage и под этими названиями их можно использовать в странице после объявления этой структуры. Таким образом, можно высвечивать скрипт-операторами значения свойств (value) этих объектов:

<SCRIPT>
document.write(document.statform.username.value)
document.write(document.statform.userage.value)
</SCRIPT>

     Однако, попытка сделать это в тексте страницы до декларации form структуры приведет к ошибке, так как к этому моменту в навигаторе еще не существуют соответствующие объекты.

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

<TITLE>My JavaScript Page</TITLE>

     Это соответствует заданию в JavaScript значения для свойства document.title. Как только браузер выдаст на экран (если установлен режим title bar) его уже нельзя будет изменить, например, опрератором JavaScript:

     document.title = "The New Improved JavaScript Page"

     При этом даже не будет выдаваться диагностика об ошибке.

4.3. Ключевые объекты навигатора.

     Ниже будут приведены наиболее употребляемые объекты навигатора - document, form и window.

     Объекты типа document

     Одним из наиболее полезных объектов навигатора является объект типа document, поскольку с его функциями-методами write and writeln выполняются операции записи в документ страницы и выдачи на экран JavaScript выражений. writeln отличается от write тем, что в конце выдачи прифор-мировывается символ перевода строки carriage return.

     К объекту document относятся также обработчики событий onLoad и onUnload для выполнения функций при первичной загрузке страницы и при выходе из нее.

     Для текущей страницы создается только один объект типа document и он является "предком" всех form, link и anchor объектов для этой страницы.

Свойства объекта document:
bgColor, fgColor, forms, lastModified, linkColor, links, location, referrer, title.

Свойства-объекты document:
form, history, link.

Методы document:
clear, close, open, write, writeln.

Примеры:

1. document.write("Last update:" + document.lastModified)
2. document.fgColor=256*rnd(255)+16*rnd(255)+rnd(255)
3. document.bgColor = hexNumber2
4. document.writeln("<center><FONT SIZE=4>Good Morning</FONT></center>")

     Объекты типа form.

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

<FORM NAME="myform">
<INPUT TYPE="text" NAME="quantity" onChange="...">
...
</FORM>

     Этим будет создан JavaScript объект с именем myform и свойствами, соответствующими объекту типа text, к которому можно обращаться как:

         document.myform.quantity

     Можно также обратиться к свойству value объекта как:

         document.myform.quantity.value

     Структуры типа form записываются браузером в массивы под названием forms. Таким образом, первая (верхняя в странице) из form структур будет forms[0], вторая - forms[1] и так далее.

     Допустимы будут и такие обращения:

     document.forms[0].quantity
     document.forms[0].quantity.value

     Подобно этому, элементы form, такие как поля text, radio-кнопки и др. также находятся в эле-ментах массива elements.

Свойства объекта form:
action, length, method, target.

     Свойства-объекты form:
button, checkbox, hidden, password, radio, reset, select, submit, text, textarea.

Методы form: submit.

     Объект типа window

     Объект типа window является "родительским" для всех типов объектов в странице.Как правило, имя этого объекта опускается при обращении к его свойствам и методам.
     Объект window имеет ряд очень полезных методов, используемых для создания и закрытия окон, а также создания диалоговых боксов.

     open и close: открытие и закрытие окон браузера,
     alert: создание диалогового бокса типа alert (сообщение),
     confirm: создание диалогового бокса типа confirm (сообщение с подтверждением).

     Window объект обладает свойствами для frame и frameset структур. Структуры типа frame размещаются в frames массивах. Эти массивы содержат входы для каждого подчиненного frame. Например, если окно содержит три подчиненых "под-окна", в JavaScript это будет соответствовать:

     window.frames[0], window.frames[1] и window.frames[2].

     Свойство status объекта window дает возможность выдавать сообщения в статусную строку на экране окна навигатора.

Свойства объекта window:
defaultStatus, length, status.

Свойства-объекты window:
document, frame, location.

Методы window:
alert, close, confirm, open, prompt, setTimeout, clearTimeout.

Обработчики событий: onLoad, onUnload.

Примеры:

1. function hello() {
         alert("Hello! Did I make you Jump") }
2. if(confirm("Are you sure you want to go to the previous page?")) {
         history.back()}
3. tid = setTimeout("time()",100)
4. clearTimeout(tid)
5. function setstatus() {
         window.defaultStatus="JavaScript Page"; }
6. function unestatus(){
         window.defaultStatus=""; }
7. window.status="Cool, isn't it?"

 
BACK.gifВернуться к оглавлению