Язык Java Script




 

3. Глава. Использование объектов Navigator'а

Излагаемый здесь материал относится в основном к JavaScript-клиенту.

 

3.1 Иерархия объектов.

Объекты Navigator'а имеют следующую иерархию:

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

document.form1.

Каждая страница имеет следующие объекты:

    1. navigator - имеет свойства для названия и версии используемого Navigator, для типов MIME, поддерживаемых клиентом и встроенную (plug-in) поддержку, инсталлированную у клиента;
    2. window - объект, имеющий свойства, которые применя- ются к полному окну. Имеется также объект window для каждого "дочернего окна" в документе .
    3. document - имеет свойства, основанные на оформлении документа, типа заглавия, цвета фона, ссылок и форм.
    4. location - определяется текущим URL.
    5. history - имеет свойства, представляющие URL, которые клиент предварительно использовал.

В зависимости от содержания, документ может иметь и другие объекты.: например, каждая форма (определяемая в теге FORM) в документе представляет объект Form. Следующая ссылка относится к свойству value текстового поля с именем text1 в форме, названной myform, текущего документа:

document.myform.text1.value

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

 document.imageForm.aircraft.src='f15e.gif'

В том случае, если рисунок вне формы, обращение будет следующим:

 document.aircraft.src='f15e.gif'

3.1.1 Примеры свойств документа.

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

<HEAD><TITLE>My Document</TITLE>
<SCRIPT>
function update(form) {
          alert("Form being updated")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="foo.cgi" METHOD="get" >
Enter a value:
<INPUT TYPE="text" NAME="text1" VALUE="everything" 
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>

Базовые объекты могут иметь следующие свойства:

Свойства значения
document.title "My Document"
document.fgcolor #000000
document.bgColor #ffffff
location.href "http://www.sampson.com/samples/simple.html"
history.length 7

Значение document.title определяется содержимым тега TITLE, значения document.fgColor и document.bgColor явным образом не определены, поэтому они выбираются по умолчанию из установок диалогового бокса Preferences (когда пользователь выбирает General Preferences из меню Options).

Полные имена объектов в выше приведенном документе будут следующими:

    • document.myform, для form
    • document.myform.Check1, для checkbox
    • document.myform.button1, для button.

Объект myform имеет свойства, основывающиеся на аттрибутах тега FORM:

- action есть http://www.sampson.com/samples/foo.cgi, URL, на который указывает форма.

- method есть "get" как указано в аттрибуте METHOD .

- length равна 3, поскольку в форме три элемента ввода.

Объект Form имеет дочерние объекты button1 и text1, эти объекты обладают своими собственными свойствами, например: button1.value имеет значение "Press Me" , button1.name - "Button1" text1.value - "everything" text1.name - "text1". На эти свойства следует ссылаться, используя полные имена, например: document.myform.button1.value.

3.2 Исполнение JavaScript-программ

Чтобы понимать исполнение JavaScript-программы, важно знать как они исполняются Navigator'ом - то есть как Navigator преобразует HTML теги в графическое отображение. В общем случае Navigator исполняет файл HTML сверху вниз. Например, предположим, что определена форма с двумя элементами ввода текста:

<FORM NAME="statform">
<INPUT TYPE = "text" name = "userName" size = 20>
<INPUT TYPE = "text" name = "Age" size = 3>

Эти элементы формы определены как JavaScript-объекты и их можно использовать после того, как форма определена следующим образом:

document.statform.userName и document.statform.Age.

Например, можно показать значение этих объектов в программе после заполнения формы:

<SCRIPT> 
document.write(document.statform.userName.value)
document.write(document.statform.Age.value)
</SCRIPT>

(Чтобы увидеть только что введенные значения необходимо перезагрузить документ.)

Однако, если попробовать сделать это перед определением формы (выше заполнения формы в HTML странице), получите ошибку, потому что объекты не существуют еще в Navigator'е. Аналогично, если расположение объекта на экране произошло, то установка нового значения не приведет к изменению изображения. Например, предположим заголовок документа определен следующим образом:

<TITLE>My JavaScript Page</TITLE>

Для JavaScript это значение переменной document.title. Navigator выводит этот заголовок в своей верхней строке. Если позже попытаться изменить значение этой переменной, то это не вызовет изменение изображения, не приведет к изменению переменной и может вызвать ошибку. Имеются некоторые важные исключения из этого правила: Можно модернизировать значения элементов формы динамически. Например, следующее описание определяет область текста, который первоначально показывает строку "Source value". Когда вы нажимаете кнопку, добавляется новый текст "...Updated".

<FORM NAME="demoForm">
<INPUT TYPE="text" NAME="mytext" SIZE="40" VALUE="Source value
 ">
<P><INPUT TYPE="button" VALUE="Click to Update Text Field"
 onClick="document.demoForm.mytext.value += '...Updated ' ">
</FORM>

Это простой пример обновления элемента формы после расположения. При использовании программ-обработчиков событий можно также изменить некоторые другие свойства после того, как расположение произошло, например, document.bgcolor.

 

3.3 Ключевые объекты Navigator'a.

Этот раздел описывает некоторые наиболее полезные объекты Navigator'а, включая окна, фреймы, документ, формы, местоположение, и историю.

 

3.3.1 window и Frame объекты.

Объект window - "родительский" объект для всех других объектов в Navigator'е. Можно создать несколько окон с помощью JavaScript-приложений. Объект Frame - определяется с помощью тега FRAME в разделе FRAMESET. Frame имеет те же свойства и методы, что и window и отличаются только способом вывода. Объект window имеет многочисленные полезные методы:

open и close: Открывает и закрывает окно, можно специфицировать размер окна, его контекст - имеет ли кнопки, ссылки и другие атрибуты.

alert: Выводит аварийный бокс с сообщением.

confirm: Выводит диалоговый бокс с кнопками OK и Cancel.

prompt: Выводит диалоговый бокс с текстовым полем для ввода значения.

blur и focus: Убирает или дает фокус окну.

scroll: Скроллирует окно к указанной координате.

setTimeout: Оценивает выражения после указанного времени

window имеет также два свойства, которые могут быть полезны:location и status. Можно направить клиента к другому URL. Например, следующее предложение направляет клиента к домашней странице Netscape, как будто он воспользовался гиперссылкой или загрузил URL:

location = "http://home.netscape.com"

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

 

3.3.2 Объект document.

Поскольку write и writeln методы генерируют HTML, объект document- один из наиболее полезных объектов Navigator'а. Страница имеет только один объект класса document. Он имеет ряд свойств, которые отражают цвет фона, текста, и ссылок на странице: bgColor, fgColor, linkColor, alinkColor, и vlinkColor. Другие полезные свойства документа включают lastModified - дату последнего изменения документа, referrer- предыдущий URL, посещенный клиентом, и URL - URL самого документа. Объект document - предок для Anchor, Applet,Area, Form, Image, Link, and Plugin объектов в странице.

3.3.3 Объект Form.

Каждая форма в документе создает объект класса form. Поскольку документы можут содержать более, чем одну форму, они храняться в виде массива. Первая форма (верхняя в странице ) - form[0], вторая form[1], и так далее. То есть в дополнение к обращению к форме по имени, можно обращаться и с использованием индекса, например к первой форме в документе можно обратиться следующим образом:

document.forms [0]

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

document.forms[0].elements[0].

Каждый элемент формы имеет возможность сослаться на родительскую форму. Это осбенно полезно в программах- обработчиках событий, где можно обратиться к другому элементу текущей формы. В следующем примере, форма myForm содержит объект text и button. Когда пользователь нажимает кнопку, значение объекта text меняется на название формы. onClick программа- обработчик событий использует this.form, чтобы обратиться к родительской форме, myForm.

<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" 
VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form 
Name" onClick="this.form.text1.value=this.form.name">
</FORM>

3.4 Использование окон и фреймов.

JavaScript позволяет создавать окна и фреймы и управлять ими, что необходимо для организации HTML-страниц. Объект window - самый верхний объект в иерархии клиентов JavaScript; frame- похожие на window объекты, но соответствуют "подокнам", созданным с тегом FRAME в разделе FRAMESET.

3.4.1 Открытие и закрытие окон.

Окно создается автоматически, когда запускается Navigator; можно открыть другое окно, выбирая New Web Browser от меню File. Можно также открыть и закрыть окно программно с помощью JavaScript. Открытие окна. Можно создать окно с помощью метода open. Следующий оператор создает окно, называемое msgWindow, которое выводит содержимое файла sesame.html:

msgWindow=window.open("sesame.html")

Еще один пример: создается окно, которое называется homeWindow, которое выводит домашнюю страницу Netscape:

homeWindow=window.open("http://home.netscape.com")

Окна могут иметь два имени. Следующий оператор создает окно сдвумя именами. Первое имя msgWindow, можно использо- вать для определения свойств окна, его методов, второе имя displayWindow, может использоваться для указания форм:

msgWindow=window.open("sesame.html","displayWindow")

Имя окна не требуется при его создании. Но, если необходимо обратиться к нему из другого окна, то имя обязательно. Когда окно открывается, можно определить его высоту и ширину, указать содержит ли окно toolbar - линейку с набором кнопок для управления, location - строку, в которой выводится URL текущей страницы, или scrollbars - средство для скроллинга. Следующий оператор создает окно без toolbar, но с scrollbars:

MsgWindow=window.open ( "sesame.html", "displayWindow",
"toolbar=no, scrollbars=yes " )

Закрытие окна. Можно закрыть окно с помощью метода close. Нельзя закрыть frame без закрытия родительского окна. Каждое из следующих утверждений закрывает текущее окно:

Window.close ( ) 
self.close ( )
// нельзя использовать следующий оператор в программе-обработчике событий
close()

Следующей оператор закрывает окно, названное msgWindow

msgWindow.close()

3.4.2 Использование фреймов.

Фрейм- специальный тип окна. Несколько фреймов могут быть показаны на экране одновременно с независимыми линейками прокрутки, каждый может ссылаться на свой URL. В следующем примере на экране изображаются три фрейма. Образ этого экрана показан на рисунке.

Could not load image

Фрейм слева вверху, имеет имя listFrame; фрейм справа вверху, имеет имя contentFrame; и фрейм внизу, имеет имя navigateFrame. Верхние фреймы занимают 90% высоты, левый фрейм занимает 30% ширины.

<FRAMESET ROWS="90%,10%">
   <FRAMESET COLS="30%,70%">
      <FRAME SRC=category.html NAME="listFrame">
      <FRAME SRC=titles.html NAME="contentFrame">
   </FRAMESET>
   <FRAME SRC=navigate.html NAME="navigateFrame">
</FRAMESET>

Следующая диаграмма показывает иерархию фреймов.

Все три фрейма имеют одного и того же родителя, несмотря на то, что два из них определены в отдельном frameset. Это потому, что родитель фрейма - родительское окно, a не frameset.


                    

Вершина | +---- listFrame (category.html) | +---- contentFrame (titles.html) | +---- navigateFrame (navigate.html)

К предыдущим фреймам можно обратиться следующим образом. ListFrame - top.frames [0] contentFrame - top.frames [1] navigateFrame -top.frames [2]

Пример 2. Можно создать образ экрана подобно предыдущему примеру, но два верхних фрейма будут иметь родителя отдельно от navigateFrame.

<FRAMESET ROWS="90%,10%">
   <FRAME SRC=muskel3.html NAME="upperFrame">
   <FRAME SRC=navigate.html NAME="navigateFrame">
</FRAMESET>

В этом FRAMESET определяются верхний и нижний фреймы, у которых родителем будет окно. Файл muskel3.html содержит следующую информацию:

<FRAMESET COLS="30%,70%">
   <FRAME SRC=category.html NAME="listFrame">
   <FRAME SRC=titles.html NAME="contentFrame">
</FRAMESET>

Следующая диаграмма показывает иерархию структур. UpperFrame и navigateFrame имеют родителем окно верхнего уровня, для ListFrame и contentFrame родителем является upperFrame.

 Вершина
    |
    |                              +--listFrame (Category.html)
    |                              |
    +--upperFrame (Muskel3.html) --+
    |                              |
    |                              +--contentFrame (Titles.html)
    +--navigateFrame (Navigate.html) 

Можно обратиться к предыдущим фреймам следующим образом:

 UpperFrame - top.frames [0]
 navigateFrame - top.frames [1]
 listFrame - upperFrame.frames [0] или Top.frames [0] .frames [0] 
 contentFrame - upperFrame.frames [1] или top.frames [0] .frames [1]

3.4.3 Обновление фреймов

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

<INPUT TYPE="button" VALUE="Titles Only"
   onClick="top.location='annotation.html'"> 

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

-файл category.html, загружается во фрейм listFrame, содержит список авторов учебников, рассортированных по категориям.

-файл titles.html, загружается во фрейм contentFrame, содержит алфавитный список авторов и названия учебников.

-файл navigate.html, загружается во фрейм navigateFrame, содержит гипертекстовые ссылки, пользователь может выбрать способ вывода авторов - по алфавиту или по категориям. Этот файл содержит также гипертекстовые ссылки, для того чтобы пользователь мог вызвать описание каждого учебника.

В дополнительном файле alphabet.html содержится список авторов учебников, отсортированных по алфавиту. Этот файл выводится в listFrame, когда пользователь выбирает ссылку для алфавитного списка. Файл category.html может выглядеть следующим образом:

<P><FONT SIZE=+4>Каталог:</FONT></P>
<P>Физика</P>

<LI><A HREF=titles.html#0005 
TARGET="contentFrame">Дж.Орир</A>
<LI><A HREF=titles.html#0001 
TARGET="contentFrame">В.Демкович</A>
<LI><A HREF=titles.html#0002 
TARGET="contentFrame">В.Зубов</A>
<LI><A HREF=titles.html#0010 
TARGET="contentFrame">В.Шальнов</A>
<P>Математика</P>

<LI><A HREF=titles.html#0011 
TARGET="contentFrame">М.Сканави</A>
<LI><A HREF=titles.html#0003 
TARGET="contentFrame">А.Кутасов</A>
<LI><A HREF=titles.html#0012 
TARGET="contentFrame">Т.Яковлева</A>

<P>Информатика</P>

<LI><A HREF=titles.html#0006 
TARGET="contentFrame">Ю.Семенов</A>
<LI><A HREF=titles.html#0004 
TARGET="contentFrame">П.Нотон</A>

Файл alphabet.html :

<LI><A HREF=titles.html#0001 
TARGET="contentFrame">В.Демкович</A>
<LI><A HREF=titles.html#0002 
TARGET="contentFrame">В.Зубов</A>
<LI><A HREF=titles.html#0003 
TARGET="contentFrame">А.Кутасов</A>
<LI><A HREF=titles.html#0004 
TARGET="contentFrame">П.Нотон</A>
<LI><A HREF=titles.html#0005 
TARGET="contentFrame">Дж.Орир</A>
<LI><A HREF=titles.html#0006 
TARGET="contentFrame">Ю.Семенов</A>
...

Файл navigate.html;

 
<A HREF=alphabet.html TARGET="listFrame"> 
<B>Алфавитный</B></A>
<A HREF=category.html TARGET="listFrame"> <B>По предме-
там</B></A>
<A HREF=annotation.html TARGET=_parent> 
<B>Аннотация</B></A>
<FORM NAME="form1">
<INPUT TYPE="button" VALUE="Titles Only" 
onClick="top.location='annotation.html'">
</FORM>

Файл titles.html;

 
<A NAME="0001"><H3>В.Демкович</H3></A>
<P>Сборник вопросов и задач по физике

<A NAME="0002"><H3>В.Зубов</H3></A>
<P>Задачи по физике

<A NAME="0003"><H3>А.Кутасов</H3></A>
<P>Пособие по математике

<A NAME="0004"><H3>П.Нотон</H3></A>
<P>Пособие по JAVA

<A NAME="0005"><H3>Дж.Орир</H3></A>
<P>Физика

...

Работающую иллюстрацию этого примера можно посмотреть по кнопке

<>

Замечание относительно использования имен окна и фрейма. Имя, которое используется для обращения к окну, зависит от того является ли обращение к свойствам окна, его методам и программам-обработчикам или к окну, как содержащему форму и гипертекстовые ссылки. Что касается свойств окна, его методов, и программ- обработчиков для текущего окна или любого другого (если оно имеет имя), то можно воспользоваться следующими методами:

- self или window: это синонимы для текущего окна, например можно закрыть текущее окно оператором window.close() или self.close().

- top или parent: top и parent также синонимы, top ссылается к самому верхнему окну Navigator'а, а parent можно использовать для навигации по frameset.Например, оператор parent.frame2.document.bgColor="teal" изменяет цвет фона для фрагмента frame2; где frame2 имя фрейма в текущем frameset.

- переменная окна: Эта переменная получает значение, когда окно открывается. Например оператор msgWindow.close() закрывает окно, имеющее имя msgWindow.

- опускание имени окна: когда, используются операции с окном, без указания его имени, подразумевается текущее окно. Например close() закрывает текущее окно. Однако. когда вы открываете или закрываете окно внутри обратотчика событий, использование имени окна обязательно, поскольку, например, ис- пользование close() эквивалентно document.close().

Пример 1: ссылка на текущее окно. Следующий оператор проверяет checkbox у формы myForm в текущем окне и выводит аварийный бокс, если checkbox выбран.

if (document.myForm.checkbox1.checked) {
      alert('The checkbox on the myForm is checked!')}

Пример 2: ссылка на другое окно. Следующие операторы обращаются к форме, названной youForm в окне, названном checkboxWin. Несмотря на то, что значения объекта изменяются в checkboxWin, текущее окно остается активным.

// Определяем выбран ли бокс
if (checkboxWin.document.youForm.checkbox2.checked) {
 alert(' checkbox формы youForm окна checkboxWin выбран!')}
// установка checkbox
checkboxWin.document.youForm.checkbox2.checked=true
// Проверить, установлены ли опции выбранного объекта
if (checkboxWin.document.youForm.youTypes.options[1].selected)
   {alert('Option 1 is selected!')}
// установить первую опцию выбранного объекта
checkboxWin.document.youForm.youTypes.selectedIndex=1

Пример 3: обращение к фрейму в другом окне. Следующий оператор обращается к фрейму frame2, который находится в окне window2. Оператор изменяет цвет фона в фрейме frame2.

window2.frame2.document.bgColor="violet"

3.4.4 Использование имени окна.

Имя окна (не переменная окна) используется, когда необходимо сослаться на окно, как на цель в форме (аттрибут TARGET для FORM) или по гипертекстовой ссылке ( тег А).

Пример 1. При нажатии на кнопку создается пустое второе окно, в которое по ссылке загружается файл doc2.html, и создается кнопка для закрытия второго окна.

<P>
<INPUT TYPE="button" VALUE="Open window2" 
onClick="msgWindow=window.open('','window2', 
'resizable=no,width=200,height=200')">
<P>
<A HREF="doc2.html" TARGET="window2">
 Load a file into window2</A>
<P>
<INPUT TYPE="button" VALUE="Close window2"
          onClick="msgWindow.close()">

Пример 2: Создается гипертекстовая ссылка на якорь во втором окне. Связь показывает якорь, названный numbers, в файле doc2.html. Если окно window2 не существует, оно создается.

<A HREF=doc2.html#numbers 
TARGET="window2">Numbers</A>

Пример 3: Создается гипертекстовая ссылка на якорь abs_method из файла sesame.html во фрейме contentFrame. Фрейм должен быть внутри текущего набора фреймов и его имя должно быть определено в аттрибуте NAME тега FRAME

<A HREF=sesame.html#abs_method TARGET="contentFrame"> 
abs</A>

3.5 Навигация среди окон и фреймов.

Навигация среди фреймов аналогична навигации среди окон. Может быть открыто одновременно несколько окон Navigator'а. Пользователь может путем нажатия кнопки мыши сделать окно активным или передать ему фокус. Когда окно получает фокус, оно выводится на первый план и, кроме того, меняется цвет заголовка окна. Можно передать фокус окну и программно, передавая фокус объекту окна или специфицируя окно в гипертекстовой ссылке.

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

checkboxWin=window.open("doc2.html")
...
checkboxWin.document.musicForm.city.focus()
...

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

<A HREF=>doc2.html> TARGET=>window2>> Load a file into window 2</A> 








 |  Анимация, картинки  |  Астрология, гороскопы  |  Аудиокниги  |  Вебкамеры России  |  Вебкамера на МКС  |  Выживание  |  Гороскопы  |  Заговоры  |  Иллюзии  |  Игры  |  Очищение  |  Календарь  |  Конвертер валют Мира  |  Лунный календарь  |  Мировая пресса  |  Мировая статистика  |  Население Земли  |  Народная медицина  |  Нетрадиционная медицина  |  Новости в России и Мире  |  Онлайн полеты самолётов  |  Омоложение  |  Очищение  |  Погода в России и Мире.  |  Поздравления  |  Прогнозы по дате рождения.  |  Сейсмический монитор  |  Сонник.  |  Страны Мира.  |  Телевидение  |  100 лучших фильмов  |  Улыбнись  |  Фильмотека  |  Ретро музыка  |  Ретро фильмы  |  Радио онлайн  |  Мини TV  |  Лунный день  |  Вечный календарь  |