JavaScript: Глава 6 - Объекты, соответствующие тегам HTML - 3
Объект password
Объект password
представляет собой поле ввода, содержимое которого не подлежит
просмотру. Вместо каждого символа, введенного в таком поле,
отображается символ звездочки (*). В то же время содержимое данного поля сохраняется как обычный текст. Объекты password, в своою очередь являются свойствами объекта form и должны помещаться в контейнере <form> . . . </form>.
синтаксис этого тега такой же как и у тега задающего поле ввода, однако атрибут type имеет значение "password". Значением данного атрибута для поля ввода всегда является строка "text".
Атрибут name задает имя поля пароля и соответствует свойству name этого элемента в языке JavaScript, атрибут size определяет размер поля в символах, а атрибут value используется
для записи в поле значения по умолчанию. Если и используется этот
атрибут, ему обычно присваивают значение взятое из Cookies - об
использовании "ключиков" будем говорить позже. Для обращения к
свойствам и методам поля пароля применяются выражения вида:
passName.propertyName
passName.methodName(parameters)
formName.elements[i].propertyName
formName.elements[i].methodName(parameters)
Здесь passName - значение атрибута name объекта заданного в теге <input>, а formName
- либо значение свойства name объекта form, либо определенный элемент в
массиве forms, например forms[0]. Переменная i применяется для указания
полоожения требуемого элемента в массиве.
Свойства
Объект password имеет следующие свойства:
defaultValue - значение по умолчанию, задаваемое с помощью атрибута value;
name - соответствует атрибуту name тега <name>
value - соответствует текущему значению объекта password;
type - значением этого свойства для всех объектов password является строка "password".
Методы и обработчики событий
Метод focus() объекта password применяется для установки фокуса в поле ввода пароля, а метод blur() - для его удаления. При помощи метода select() можно выделить данные в поле ввода. Этот метод обычно используется вместе с методом focus().
Для объекта password обработчики событий не определены.
Объект radio
Объект radio
представляет собой селекторную кнопку (radio button), определяемую в
HTML-форме. В отличие от контрольных переключателей (checkbox),
селекторные кнопки позволяют выбрать только один из предлагаемых
вариантов. Объект radio является свойством объекта form, и поэтому
должен содержаться в контейнере <form> . . . </form>. В следующем примере показаны три объекта radio.
В атрибуте name задается имя селекторной кнопки. Учтите,
что для селекторных кнопок, принадлежащих к одной группе, необходимо
указывать одинаковые имена, т.е. одинаковые значения атрибута name. Значение атрибута value возвращается серверу при передаче формы (по умолчанию значение "on"). С помощью атрибута checked можно выбрать селекторную кнопку, которая будет активизирована по умолчанию. Свойство defaultChecked объекта radio имеет значение true, если задан атрибут checked. В качестве значения атрибута onClick
указывают обработчик события, связанного с выбором селекторной кнопки.
В качестве обработчика события можно задать оператор или функцию языка
JavaScript. Селекторная кнопка, как правило, имеет текст, описывающий
данный вариант выбора. Этот текст задается в строке textToDisplay. Для обращения к методам и своойствам селекторной кнопки используют выражения:
radioName[i].propertyName
radioName[i].methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)
где radioName - значение атрибута name, заданное в соответствующем теге <input>, а formName - либо значение атрибута name объекта form, либо обращение к элементу массива forms. Поскольку селекторные кнопки являются элементами формы, для обращения к ним можно использоовать массив элементов формы elements.
Например, к первой селекторной кнопке с именем radio1, принадлежащей
первой форме текущего документа, можно обратиться при помощи выражения:
document.forms[0].radioName[0]
Следует иметь в виду, что для группы селекторных кнопок элементы
массива для каждого элемента этой группы располагаются в обратном
порядке.
Свойства
Объект radio имеет следующие свойства:
checked - содержит булево значение true или false, в зависимсти от того, выбрана или нет данная селекторная кноопка;
defaultChecked - сответствует атрибуту checked тега <input type="radio">, а также содержит булево значение;
length - представляет кооличество селекторных кнопок в бъекте radio;
name - соответствует атрибуту name тега <input>
value - сооответствует атрибуту value тега <input>
type - для объектов radio значением этого атрибута является строка "radio"
Методы и обработчики событий
Для выбора селекторной кнопки используется метод click(). Честно говоря я не совсем понимаю зачем он нужен, ведь значение свойства checked,
а именно на него может воздействовать этот метод, может задаваться по
умолчанию. Не могу представить другое назначение этого метода.
Объект radio имеет обработчик событий onClick,
который используется для обработки событий, связанных с активизацией
селекторной кнопки. При этом можно задать выполнение как отдельных
оператрв, так и функции. Ну здесь понятно для чего, да? Если изначально
можно при помощи свойств проверить значение checked, а если
фиксировано начальное значение, то и этого не нужно, то в момент
переключения, а переключение производится щелчком мыши, можно
использовать это событие для вывода например дополнительных пояснений к
выбираемому пункту. Можно получить очень неплохой эффект если
поясняющий текст (графику, и то и другое вместе) поместить в контейнеры
<div> . . . </div> а контейнеры разместить в разные слои, а
потом активизировать (делать видимым) соответствующий слой по событию
onClick - каково? На мой взгляд должно получиться круто, не пробовал
делать, - сейчас только дошло, - обязательно попробую и приведу пример
позже.
Объект reset
Объект reset отображается
в HTML-форме как кнопка перезагрузки, которая возвращает каждый элемент
формы к его исходнму состоянию, а значения по умолчанию устанавливаются
при помощи атрибута value. Тег имеет синтаксис:
Атрибут name задает имя объекта reset, а атрибут value - текст, отоображаемый на кнопке. Для обращения к методам и свойствам объекта reset используется синтаксис:
resetName.propertyName
resetName.methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)
где resetName - имя объекта reset, заданное в атрибуте объекта name, а formName - имя формы, в которой определен объект reset, указанное в атрибуте name тега <form>, или элемент массива forms.
Свойства
Свойство name сответствует атрибуту name тега <input>, свойство value - атрибуту value, а свойство type - атрибуту type и для объектов reset всегда имеет значение "reset".
Методы и Обработчики событий
Объект reset имеет метод click().
Вообще все методы Click() и не только для объекта reset, но и для
других тоже обычно не используют, - не всегда корректно работает. Ведь
можно же задать свой метод (имеется в виду пользовательская функция) по
событию onClick и все проблемы будут решены.
Для объекта reset можно определить обработчик события onClick.
Примеры, думается приводить не стоит, пример приводился при
рассмотрении объекта form. Его использование не должно вызвать
затруднений.
Объект select и массив options
Объект select
отображается как простой или ниспадающий список и является элементом
формы, определенной в HTML-документе. Элементам списка, заданного в
объекте select, соответствует массив options. Объекты select представляют собой свйства объекта form, в то время как массив options является свойством объекта select.
С помощью атрибута name задается имя объекта text, которое можно использовать в JS-прграммах. Этому атрибуту в языке JS соответствует свойство name объекта text. Значение атрибута value определяет содержимое поля по умолчанию. Атрибуту value тега <input> соответствует свойство value объекта text, а также свойство defaultValue, значение которого сохраняет содержимое текстового поля, заданное по умолчанию. Присвоив нужное значение атрибуту size, можно установить размер поля в символах. По умолчанию значением атрибута type для объектов text является строка "text", т.е. если атрибут type в определении тега <input> опустить, то создаваемый элемент формы будет полем ввода. Для обращения к методам и свойствам объекта text используют выражения вида:
textName.propertyName
textName.methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)
типичные для всех элементоов формы. Строка textName - имя объекта text, заданное с помощью атрибута name в теге <input>, а стрка formName - соответственно имя формы, в которой и определен данный объект.
Свойства
Свойство defaultValue соответствует атрибуту value. Значением свойства value является текущее значение объекта text. Свойство name соответствует атрибуту name объекта text, а свойство type - атрибуту type и содержит в данноом случае значение "text".
Методы и обработчики событий
Объект text имеет три метода: focus(), blur() и select().
Для объектов text можно определить четыре обработчика событий: onBlur, onChange, onFocus и onSelect.
Более подробно мы будем рассматривать обработчики событий позже
отдельно, а сейчас пока будем пользоваться в примерах без лишних
комментариев. Назначение некоторых ясно из их названия.
В данном примере обработчик события, связанного с получением фокуса ввода, onFocus применяется для выделения текста в поле ввода. Для самого выделения используется метод select(), а обращение к полю ввода осуществляется при помощи оператора this.
Объект textarea
Объект textarea соответствует области текста, определенной в форме. Объекты textarea являются свойствами объекта form и должны быть помещены в контейнер <form> . . . </form>.
Элементы этого типа используются для ввода нескольких строк текста в
свободном формате. Также его часто используют для вывода примеров
текста например JS-программы, сформированнго текста предлагаемого для
размещения например баннера и др.
Измените этот текст и перейдите в другое поле формы:
Атрибут name определяет имя области текста, и ему соответствует свойство name объекта textarea. Атрибуты rows и cols задают размеры пля области в симвоолах. Строка textToDisplay представляет
собой необязательный текст, помещенный в область текста при первом
отображении на экране. Эта строка является значением свойства defaultValue объекта textarea
в языке JavaScript. Форматирование в этй строке и происходит обычным
способом, тоесть без тегов <br> и других, а также теги
отображаются здесь как они написаны, тоесть теги в этой строке не работают. Значение атрибута wrap определяет, каким образом введенный в поле текст разбивается на строки. Так, значение soft
задает отображение строк в области текста полностью. В противном случае
текст между двумя символами конца строки (Enter) размещается в одной
строке.
Для обращения к методам и свойствам объекта textarea применяются типичные для элементов формы выражения:
textareaName.propertyName
textareaName.methodName(parameters)
formName.elements[i].propertyName
formName.elements[i].methodName(parameters)
где textareaName - это значение атрибута name тега <textarea>, а formName - имя формы, в котрой определен объект textarea.
Содержимое объектов textarea в JS-программах может динамически изменяться путем присваивания нового значения их свойству value. Например:
document.forms[0].myArea.value = "Новый текст"
Свойства
Объекты textarea имеют свойства:
defaultValue - значение содержит текст, помещенный в контейнер <textarea> . . . </textarea>
name - соответствует атрибуту name тега <textarea>
value - соответствует текущему значению объекта textarea т.е. текущему содержимому области текста;
type - для объекта textarea всегда содержит значение "textarea".
Методы
Метод focus() используется для помещения фокуса ввода в область текста, а метод blur() - для его удаления из области текста. Метод select() применяется для выделения информации в области текста. Очень удобный метод, когда нужно выделить большой по объему текст.
Обработчики событий
В теге <textarea> можно определить четыре атрибута, задающие обработку событий, связанных с объектом textarea. С помощью атрибута onBlur определяется реакция объекта на удаление фокуса ввода из области текста, а с помощью атрибута onChange - реакция объекта на изменение содержимого области текста. Атрибуты onFocus и onSelect активизируют обработку событий, связанных соответственно с получением фокуса ввода и с выделением данных в области текста.
Пример
Разберем пример. Выше приведена его действующая модель:
<script language = "JavaScript">
<!--
function sCange() {
alert ("Содержимое текстовой области изменено");
}
//-->
</script>
<form>
Измените этот текст и перейдите в другое поле формы:<BR>
<textarea name="tarea" rews=5 cols=40 onChange="sCange()">
Это объект textarea
Пример текста по умолчанию
</textarea>
<P>
<input type="text" size=35 name="stxt">
</form>
Здесь содержится два поля. Первое поле является областью текста
(textarea). При изменении содержимого текстовой области активизируется
функция sCange(), которая выводит окно сообщения, информирующее о том,
что текст изменялся. Второе поле является обычным полем ввода, я его
разместил для того, чтобы было куда переместить фокус.
На этом закончим рассмотрение объектов соответствующих тегам HTML.