Элементы документа

План

1. Anchor

2. Link

3. Объект Location

4. Image

Anchor

Вы можете ссылаться на объекты anchor в вашей программе, используя массив anchors. Этот массив содержит запись для каждого тега <a>, содержащего атрибут NAME по порядку встречаемости в документе. Например, если документ содержит три поименованных якоря, то эти якоря представлены как document.anchor[0], document.anchor[1], document.anchor[2].

Использование массива anchors:

document.anchors[index]

document.anchors.length

index целое число, представляющее якорь в документе.

Для получения количества якорей в документе используется свойство length: document.anchors.length.

Хотя массив anchors представляет собой поименованные якоря, значение anchors[index] является всегда нулевым. Но если в документе якоря именуются по порядку натуральными числами, вы можете использовать массив anchors и его свойство length для употребления имени якоря перед использованием его в операторах, таких как установка location.hash.

Элементы массива anchors окрыты открыты только для чтения. Например, выражение document.anchors[0]="anchor1" не имеет эффекта.

Свойства:

Объект anchor имеет единственное свойство.

Name – Содержит имя якоря, которое можно использовать для переходов.

Массив anchors имеет следующие свойства:

Length – определяет число поименованных якорей в документе.

Методы:

нет

События:

нет

Link

Каждый объект link является объектом location и имеет те же свойства как и объект location. Если объект link также является объектом anchor, то объект записан в массивах anchors и links.

Когда пользователь выбирает объект link и переходит в документ, обозначенный ссылкой (определенный HREF=locationorURL), то этот документ содержит URL документа источника.

Массив links

Вы можете ссылаться на объекты link в вашей программе, используя массив links. Этот массив содержит запись для каждого объекта link (тега <A HREF="">) по порядку встречаемости в документе. Например, если документ содержит три объекта link, то эти ссылки представлены так document.links[0], document.links[1] и document.links[2].
Использование массива links:

document.links[index]

document.links.length

index целое число, представляющее ссылку в документе.
Для получения количества ссылок в документе используется свойство length: document.links.length.
Элементы в массиве links открыты только для чтения. Например, выражение document.links[0]="link1" не имеет эффекта.

Свойства: Объект link имеет следующие свойства:

hash определяет имя якоря в URL
host определяет hostname:port часть URL'а
hostname определяет хост и доменное имя или IP адрес сетевого хоста
href определяет запись URL
pathname определяет url-path часть URL'а
port определяет коммуникационный порт, который сервер использует для коммуникаций
protocol определяет начало URL, включая двоеточие
search определяет запрос
target отражает атрибут TARGET

Массив links имеет следующие свойства:

length отражает количество ссылок в документе

Методы: – нет

События:

onClick

onDblClick

onKeyDown

onKeyPress

onKeyUp

onMouseDown

onMouseOut

onMouseUp

onMouseOver

Объект Location

Объект location представляет собой полный URL. Каждое свойство объекта location представляет собой отдельную часть URL.
Следующий формат URL показывает связь между location свойствами:

protocol//hostname:port pathname search hash

protocol – представляет собой начало URL, включая первое двоеточие.

hostname – представляет хост и доменное имя или IP адрес сетевого хоста.

port – представляет коммуникационный порт, который сервер использует для коммуникаций.

pathname – представляет url-path часть URL'а.

search – представляет любой запрос в URL'е, начинающийся со знака вопроса.

hash – представляет имя якоря фрагмент в URL'е, начинающийся со знака #.

Смотрите описание свойств ниже, где более детально описаны различные части URL, или свойство href.

Объект location имеет еще два свойства, не показанных в формате:

href – представляет полный URL.

host – представляет набор hostname:port.

Объект location содержится в объекте window. Если вы ссылаетесь на объект location без определения окна, то объект location представляется как текущий location.
Если вы ссылаетесь на объект location и определяете имя окна, например, windowReference.location.propertyName, то объект location представляется как location определенного окна.

Не путайте объект location со свойством location объекта document. Вы не можете изменить значение свойства location (document.location), но вы можете изменить значение свойств объекта location (window.location.propertyName). document.location является строковым значением, которое обычно равно window.location.href, который устанавливается когда вы загружаете документ, но перенаправление может изменить его.

Синтаксис для общеизвестных типов URL:

Объект Image.

В документе есть массив images[i], каждый элемент которого, является объектом Image, т.е. картинкой, отображаемой в документе.

Объект Image можно создать используя конструктор

Var Img1=new Image(width, height);

width – ширина изображения.

height – высота изображения.

Для объекта Image определены следующие события

onAbort

onError

onKeyDown

onKeyPress

onKeyUp

onLoad

border	Reflects the BORDER attribute.
Complete	Boolean value indicating whether the web browser has completed its attempt to load the image.
Height	Reflects the HEIGHT attribute.
Hspace	Reflects the HSPACE attribute.
Lowsrc	Reflects the LOWSRC attribute.
Name	Reflects the NAME attribute.
Src	Reflects the SRC attribute.
Vspace	Reflects the VSPACE attribute.
Width	Reflects the WIDTH attribute.

Пример использования изображений:

<html>

<head>

var btnArray=new Array(6);

var PictLoaded=false;

for(i=0;i<6;i++) btnArray[i]=new Array(2);

function LoadPic()

{for(i=0;i<6;i++)

{btnArray[i][0] =Image(165,40);

btnArray[i][1] =Image(165,40);

btnArray[i][0].src="button1n.gif";

btnArray[i][1].src="button1s.gif";

}

PictLoaded=true;

}

function SetSelect(ButtonIndex)

{window.status="Select "+window.location.href;

if (PictLoaded)

document.images[ButtonIndex].src=
btnArray[ButtonIndex][1].src;

return true;

}

function SetUnSelect(ButtonIndex)

{window.status="UnSelect";

if (PictLoaded)

document.images[ButtonIndex].src=
btnArray[ButtonIndex][0].src;

return false;

}

function Goto(Address)

{

parent.frames[1].document.location.href=Address;

}

</SCRIPT>

</head>

<img NAME=btnAbout src="button1n.gif" width="165" height="40" alt="About"

onMouseOver="SetSelect(0)" onMouseOut="SetUnSelect(0)">

<img NAME=btnHome src="button1n.gif" width="165" height="40" alt="Home"

onMouseOver="SetSelect(1)" onMouseOut="SetUnSelect(1)">

<img NAME=btnSearch src="button1n.gif" width="165" height="40" alt="Search"

onMouseOver="SetSelect(2)" onMouseOut="SetUnSelect(2)">

<img NAME=btnRegister src="button1n.gif" width="165" height="40" alt="Register"

onMouseOver="SetSelect(3)" onMouseOut="SetUnSelect(3)">

<img NAME=btnFAQ src="button1n.gif" width="165" height="40" alt="F.A.Q."

onMouseOver="SetSelect(4)" onMouseOut="SetUnSelect(4)">

<img NAME=btnHelp src="button1n.gif" width="165" height="40" alt="Help"

onMouseOver="SetSelect(5)" onMouseOut="SetUnSelect(5)"

onClick="Goto('D:/Doc/HTML_JavaScript/WORK/Colors3.html')">

</p>

</body>

</html>

Лекция 6.

Формы

План

1. Доступ к формам

2. Объект форма

3. Доступ к элементам формы

4. Поля ввода (обычное и многострочное)

5. Button

6. CheckBox

7. RadioButton

Доступ к формам

Одна или несколько форм, принадлежат объекту document. Каждая форма в документе является отдельным объектом. Для ссылки на формы используется один из двух методов:

· Свойство документа forms, являющееся массивом форм

· По имени формы.

Примеры:

document.forms[0].name

document.MainForm.metod

Объект form имеет следующие свойства:

· action отражает атрибут ACTION

· elements массив, отражающий все элементы в форме

· encoding отражает атрибут ENCTYPE

· length отражает количество элементов в форме

· method отражает атрибут METHOD

· target отражает атрибут TARGET

Методы:

· submit вызывает передачу данных формы.

· Reset сбрасывает состояние формы в начальное

События:

onSubmit
onReset

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

1. document.formName.buttonName.propertyName

2. document.forms[index].buttonName.methodName(parameters)

3. document.formName.elements[index].propertyName

4. document.formName.elements[index].methodName(parameters)

ссылка на document в большинстве случаев может быть опущена.

Следующие объекты являются элементами объекта form:

· button

· checkbox

· hidden

· password

· radio

· reset

· select

· submit

· text

· textarea

Поля ввода (обычное и многострочное)

Поле ввода текста в HTML форме. Текстовое поле позволяет пользователю вводить слова, фразы или числовой ряд. Для определения объекта text используется стандартный HTML синтаксис с добавлением событий onBlur, onChange, onFocus, onSelect:

Свойства:

· name отражает имя элемента, заданное в исходном коде HTML.
Этот атрибут присутствует для всех элементов.

· type отражает тип элемента. Для текста всегда text.
Этот атрибут присутствует для всех элементов.

· defaultValue отражает атрибут VALUE

· value отражает текущее значение поля объекта text

Методы:

· blur Убирает фокус с указанного объекта.

· focus Устанавливает фокус на определенный объект.

· select Выделяет текст в поле ввода.

События:

onBlur
onChange
onFocus
onSelect

Для TextArrea дополнительно определены следующие события:

onKeyDown
onKeyPress
onKeyUp

Объект Button

Нажимаемая кнопка в HTML форме.

Объект button является обычной кнопкой, которую вы можете использовать для выполнения действия, определенного вами. Кнопка выполняет скрипт, определенный событием onClick.

Свойства:

· name отражает атрибут NAME

· value отражает атрибут VALUE (надпись на кнопке).

Методы:

· click Эмитирует нажатие кнопки.

События:

· onClick Вызывается при нажатии кнопки.

Объект CheckBox

Контрольный переключатель в HTML форме. checkbox является сенсорным переключателем, позволяющим пользователю устанавливать значение on или off.

Свойство checked используется для определения checkbox, помеченного галочкой в настоящий момент. Свойство defaultChecked используется для определения checkbox, помеченного галочкой при загрузке формы.

Свойства:

· checked позволяет вам в программе установить какой checkbox
будет помечен галочкой.

· defaultChecked отражает атрибут CHECKED.

· name отражает атрибут NAME.

· value отражает атрибут VALUE.

Методы:

· click Эмитирует нажатие кнопки.

События:

· onClick

Объект RadioButton

Установка статических кнопок (кнопок radio) в HTML форме. Установка кнопок radio позволяет пользователю выбрать один пункт из списка.

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

forms: document.forms[0].radioName[0] //это первая,

document.forms[0].radioName[1] //это вторая и так далее.

Свойства:

· checked позволяет вам программно выбирать кнопку radio

· defaultChecked отражает атрибут CHECKED

· length отражает количество кнопок radio в объекте radio

· name отражает атрибут NAME

· value отражает атрибут VALUE

Методы:

click

События:

onClick

Объекты reset и submit

Кнопка сброса (кнопка reset)в HTML форме. Кнопка reset сбрасывает все элементы в форме в их значения, установленные по умолчанию.

Кнопка передачи данных (кнопка submit) в HTML форме. Кнопка submit вызывает передачу формы.

Имеют все теже свойства, что и обычная кнопка.

Объект password

Текстовое поле в HTML форме, значение которого на экране отображается звездочками (*). Когда пользователь вводит текст в это поле, звездочки (*) скрывают введенное значение.

Объект hidden

Текстовый объект формы, который не отображается в HTML форме. Объект hidden используется для передачи пар имя/значение при загрузке формы.

Лекция 7.