[На предыдущую страницу ],[На главную страницу]

Объекты, соответствующие тегам HTML

Объекты, соответствующие тегам HTML. (продолжение ч.2)

    В прошлой части были рассмотрены объекты anchor и массив anchors, button, checkbox, elements, form и массив forms. В этой части продолжим рассмотрение объектов, соответствующих тегам HTML.

Массив frames

    К отдельным фреймам можно обращаться при помощи массива frames и свойства parent. Например, если имеется два фрейма, определенных в HTML-тегах:

<frameset rows="50%,50%">
<frame name="top" src="file1.htm">
<frame name="bot" src="file2.htm">
</frameset>

 то для обращения к первому фрейму вы можете использовать выражение parent.frames[0], и соответственно ко второму - parent.frames[1]. Таким образом, для обращения к отдельным фреймам и к свойству length массива frames используются выражения вида:
    Для определения количества фреймов во фреймосодержащем документе применяется свойство length. Все данные массива frames предназначены только для чтения.

Свойства

    Объект frame имеет следующие свойства:
    Кроме того, можно использовать такие синонимы:
    Массив frames имеет всего одно свойство length, значением которого является количество дочерних фреймов в родительском фрейме.

Методы и обработчики событий

    Во фреймосодержащих документах могут быть использованы методы clearTimeout() и setTimeout().
    В теге <frameset> определяют обработчики событий, связанные с загрузкой и выгрузкой документов onLoad и onUnLoad.
    Об этих методах и событиях будем говорить позже. Пока мы ими пользоваться не будем. Забегать вперед тоже не очень хорошо.

Скрытый объект

    Что это такое, и с чем его едят. Во первых, ничего такого особого в нем нет. Это поле, которое может передаваться из формы например на сервер, находиться в тегах <form> . . . </form>, при этом не отображаться на экране. Для чего оно нужно? Ну например, что-то формируется JS программой и это нужно передать, при этом выводить эту информацию нет смысла. Это текстовые поля позволяют сохранять определенные значения в структурах, отличных от переменных языка JS, хотя данные значения существуют до тех пор, пока загружен текущий документ. Скрытое поле, как уже говорилось является свойством объекта form и должно помещаться в тегах <form> . . . </form>.
    HTML-тег имеет синтаксис:

<input type="hidden"
    [name="hiddenName"]
    [value="textValue"]>


Атрибут name задает имя поля и является необязательным. Значение текстового поля указывают при помощи атрибута value, который позволяет задавать и значение поля по умолчанию. К свойствам скрытых объектов можно обращаться посредством одного из следующих выражений:
где fieldName - имя скрытого поля, заданное в атрибуте name тега <input>, а formName - имя формы, в которой определено скрытое поле.

Свойства

    Скрытый объект имеет свойства:
    Скрытые объекты не имеют методов и обработчиков событий.

Пример

    В следующей форме определено скрытое поле hfield шириной 20 символов, по умолчанию имеет значение "page 1":

<form name="hiddenField">
<input name="hfield" type="hidden" size=20 value="page 1">
</form>

Значение этого поля можно изменить с помощью оператора следующего вида:

document.hiddenField.hfield.value = "page 2";

Объеткт image и массив images

     Браузер Microsoft Internet Explorer версии ниже 4, не поддерживает массив images.
    В браузере рисунки рассматриваются как объекты image, а все рисунки, содержащиеся в текущем документе, помещаются в массив images, который можно использовать для обращения к любому рисунку, определяемому тегом <img>. В частности, можно динамически обновлять изображения, изменяя их свойство src. Примеров тому в интернете очень много. В частности и на этом сайте. Для начала приведем тег <img>, распишем полностью:

<img src="fileOrUrl"
     [alt="altText"]
     [lowsrc="fileOrUrl"]
     [width=w]
     [heigth=h]
     [border=b]
     [vspace=v]
     [hspace=h]>

В атрибуте src содержится имя или адрес URL файла, который нужно вывести в документе. Рисунок должен храниться в формате GIF, JPEG, или PNG. С помощью атрибута alt задается альтернативный текст, появляющийся на экране: в момент загрузки текста, если пользователь заблокировал вывод изображений и поясняющая надпись под курсором мыши. Атрибут lowsrc, NN его поддерживает, IE - честно сказать не знаю, не пробовал, да и без надобности. Он позволяет предварительно выводить на экран изображение с низким разрешением. При этом рисунок загружается в два этапа. Атрибуты width (ширина) и height (высота) позволяют задать размеры рисунка в пикселах, атрибут border - ширину рамки в пикселах, а атрибуты vspace и hspace - размеры вертикального и горизонтального зазоров между границами изображения и другими элементами документа.
    Для обращения к свойствам объекта image используется следующий синтаксис:

document.images[i].propertyName

где i - индекс элемента массива, который соответствует нужному рисунку. Первым рисунком в документе будет document.images[0]. Массив images является свойством объекта document, поэтому при обращении к рисунку необходим префикс document к имени массива. Тег <img> не имеет атрибута name, поэтому выражение вида "document.imgName" приведет к ошибке.

Свойства

    Все свойства объектов image соответствуют атрибутам тега <img>, за исключением свойства complete. Эти свойства, кроме свойств src и lowsrc, значения которых могут быть изменены динамически, имеют значения только для чтения:
    Перед загрузкой рисунка появляется его рамка, внутри которой отображается строка, заданная в атрибуте alt (в версии 5 и выше IE, пользователь при желании может отключить рамки с alt-текстом отображаемые в момент загрузки рисунка). Рисунок можно изменять динамически, присваивая атрибуту src или lowsrc в качестве значения новый адрес URL (Честно говоря такое не применял, локально проверить это не удается, так как lowsrc загрузится мгновенно. А так, как такой способ считаю устаревшим - не пытался применить. Ошибок по крайней мере при применении этого атрибута не выдает.)

Методы и обработчики событий

    Объект image не имеет методов.

    Обработчики событий:

Примеры

    Данный пример позволяет обновить рисунок, нажав на кнопку формы. Не работает IE ниже 4-й версии и NN ниже 3-й версии.


Вот текст этой программы:

<IMG SRC="_picture.gif" BORDER=0 ALT="">
<hr noshade>
<form>
<input type="button" value = "Обновить рисунок" onClick="document.images[0].src='ind_1.gif'">
</form>
    Как вы уже и успели заметить, происходит замена одного рисунка на другой. Куда это можно применить? Да и на моем сайте применено подобное для навигации, только события использованы OnMouseOver и OnMouseOut. Представляете, если использовать слои, плюс визуальные фильтры и это свойство с применением хитрой задумки можно такое сотворить! - Такое сотворить. . . Flash не нужно! ;) Можно применить например, для показа рисунков - типа галереи, - зачем грузить полностью документ, когда можно только рисунок, если конечно вы не разместили баннер и вам не выгодно, когда не перегружается страница.     Еще пример? Достаточно. Кучу подобных примеров можно найти и в других разделах.

Объект link и массив links

    Объект link (гиперсвязь) отображается как участок текста или графического объекта, щелчок миши на котором позволяет перейти к другому Web-ресурсу. Тег языка HTML, а мы помним, что рассматриваем объекты соответстующие тегам HTML, имеет следующий вид:

<a href=locationOrURL
[name="anchorName"]
[target="windowOrFrameName"]
[onClick="handlerText"]
[onMouseOver="handlerText"]>
linkText
</a>

Атрибут href определяет имя файла, или адрес URL для объекта, который загружается при активизации гиперсвязи. Атрибут name задает имя гиперсвязи, превращая ее в объект anchor (метку). С помощью атрибута target в определенный фрейм текущего фреймосодержащего документа можно загрузить документ, URL которого указан в значении атрибута href. Атрибут linkText представляет собой текст, отображаемый в HTML-документе как гиперсвязь, которая активизируется щелчком мыши. Для обращения к свойству объекта link используются выражения типа:

document.links[i].propertyName

где i - индекс данной связи в массиве гиперсвязей links текущего документа.

Масив links

    В программе на языке JavaScript к гиперсвязям можно обращаться как к элементам массива links. Например, если в документе определены два тега < a href>, то в JS-программе к этим гиперсвязям можно обращаться с помощью выражений document.links[0] и document.links[1]. Синтаксис выражений для обращений к массиву links следующий:
где переменная i - индекс гиперсвязи. Значением свойства length является количество гиперсвязей в текущем документе. Объекты link представляют собой объекты только для чтения, поэтому динамически изменять гиперсвязи в документе нельзя.

Свойства

    Для объекта link определены следующие свойства:
    Массив links имеет всего одно свойство, length, значением которого является количество гиперсвязей в текущем документе.

Методы и обработчики событий

    Для объекта link методы не определены.     В тегах <a href> могут использоваться обработчики событий щелчка миши и ее перемещения - onClick и onMouseOver. Конкретно обо всех событиях будем говорить позже.

Пример

    При подведении указателя мыши на гиперсязь, в строке состояния браузера появится текст "Текст в строке состояния при подведении миши на гиперсязь".
Подведите сюда курсор мыши
Вот текст:

<a href="#" onMouseOver="window.status='Текст в строке состояния при подведении мыши на гиперсязь';
     return true">
Подведите сюда курсор мыши
</a>
В данном случае гиперсвязь указывает на пустой документ - "#". Это выбрано для примера в случае щелчка на гиперсвязи ничего не грузилось.

    На этом закончим. В следующей части закончим рассмотрение объектов соответствующих тегам HTML.
[ к началу ],[На предыдущую страницу ],[На главную страницу]