Объект select
advertisement
JavaScript.6
2012
Объекты документа
Объект History
Свойства:
current
next
previous
length
Объект History
Методы
back()
forward()
go (относительное число| “url или заголовок”)
Объект document
Свойства
Documents.forms[ ]
Documents.form.length
Documents.formName
Методы
Document.write()
Объект ссылки
documents.links[ ].propertyName
Объект FORM
Свойства формы
o
o
o
o
formName.propertyName
formName.methodName (parameters)
forms[i].propertyName
forms[i].methodName (parameters)
<form name="formName"
target="windowname"
action="serverURL"
method="get" | "post"
enctype="encodingType"
[onSubmit="handlerText"]>
</form>
Элементы формы
form.elements[ ]
var form=window.document.forms[0]
for (var i=0; i<form.elements.length; i+1) {
if (form.elements[i].type = =“text”) {
form.elements[i].value=“ ”
}
}
Свойства форм
o
o
o
o
o
o
Объект form имеет шесть свойств, большинство из них
соответствуют атрибутам тега <form>:
action - соответствует атрибуту action;
elements - массив, содержащий все элементы
формы;
encoding - соответствует атрибуту enctype;
length - количество элементов в форме;
method - соответствует атрибуту method;
target - соответствует атрибуту target
Массив forms имеет только одно свойство length количество форм в документе.
методы форм
Метод submit() применяется для передачи
формы из JavaScript-программы.
Его можно использовать вместо тега <input
type=submit>, имеющегося в большинстве
форм, информация которых должна
передаваться на сервер.
Обработчики событий
Обработчик события onSubmit() позволяет
перехватывать события, связанные с
передачей данных формы.
Такие события возникают либо после
нажатия кнопки передачи данных,
определенной тегом <input type=submit> в
контейнере <form>, либо при передаче
данных формы с помощью метода submit(),
вызванного из JS-прграммы.
Пример отправки почты с
помощью формы
<form method="post"
action="mailto:my@mail.ru"
enctype="text/plain">
<input type="submit" value="Отправить почту">
<input type="reset" value="Очистить форму">
<textarea name="email" rows=5 cols=60>
</textarea>
</form>
Объект button
Кнопка - это область окна, которая
реагирует на щелчки мыши и может
активизировать оператор или функцию
языка JavaScript при помощи атрибута
события onClick.
Синтаксис:
<input type="button"
name="buttonName"
value="buttonText"
[onClick="handlerText"]>
Объект button (2)
Атрибут name задает имя кнопки и в языке JS ему соответствует
свойство name нового объекта button.
Атрибут value определяет надпись на кнопке, котороой соответствует
свойство value.
К свойствам и методам объекта button можно обратиться одним из
способов:
-- buttonName.propertyName
-- buttonName.methodName (parameters)
-- formName.elements[i].propertyName
-- formName.elements[i].methodName (parameters)
Здесь buttonName - значение атрибута name, а formName - либо
значение атрибута name объекта form, либо элемент массива forms.
Переменная i является индексом, используемым для обращения к
отдельному элементу массива, в данном случае к элементу button.
Свойства button
Свойства name и value объекта button
соответствует атрибутам name и value
HTML-тега <input>. Обратившись к
значениям этих свойств, можно вывести
полный список кнопок, имеющихся в
текущем документе. Свойство type объекта
button всегда имеет значение "button".
Методы и обработчики
событий
Объект button имеет метод click()
Обработчик событий onClick позволяет выполнить
оператор или вызвать функцию языка JavaScript при
щелчке мыши на кнопке, которой соответствует в
программе определенный объект button.
Пример
<form>
<input type="button"
value="Date and Time"
onClick='alert(Date())'>
</form>
Объект checkbox
<input name="checkboxName"
type="checkbox"
value="checkboxValue"
[checked]
[onClick="handlerText"]>textToDisplay
где атрибут name является именем объекта checkbox. Ему
соответствует свойство name объекта языка JavaScript. Атрибут value
определяет значение, которое передается серверу при пересылки
значений элементов формы, если контрольный переключатель
включен. Необязательный атрибут checked указывает, что
контрольный переключатель должен быть включен по умолчанию.
Если этот атрибут задан, свойство defaultChecked имеет значение
true. При помощи свойства checked можно определить, включен ли
контрольный переключатель. Текст, отображаемый рядом с
контрольным переключателем, задается строкой textToDisplay.
Объект checkbox
К объекту checkbox можно обращаться одним из способов:
o
o
o
o
checkboxName.propertyName
checkboxName.methodName (parameters)
formName.elements[i].propertyName
formName.elements[i].methodName (parameters)
где checkboxName - значение атрибута name объекта checkbox, а
formName - имя объекта form или формы, которой принадлежит
данный контрольный переключатель. Другими словами, к форме
можно обращаться как к элементу массива forms, например forms[0] для обращения к первой форме документа, либо по имени объекта
form, если оно определено в атрибуте name HTML-тега <form>.
К любому элементу формы можно обратиться так же, как к элементу
массива elements, который является свойством объекта form. В этом
случае
для
обращения
к
определенному
контрольному
переключателю следует использовать его порядковый номер (i) в
массиве всех элементов формы.
Свойства
Если контрольный переключатель включен, свойство
checked имеет значение true.
Когда в теге <input> используется атрибут checked,
например <input checked type=checkbox>, свойству
defaultChecked также присваивается значение true.
Свойство name соответствует атрибуту name тега <input
name= . . . type=checkbox>, а свойство value - атрибуту
value тега <input>.
Свойство type объекта checkbox всегда содержит
значение "checkbox".
Методы и обработчики
событий
Метод Click() может использоваться с
объектом checkbox, но в некоторых
браузерах он должным образом не
работает.
Для объекта checkbox предусмотрен
только один обработчик - onClick().
Скрытый объект
Это поле, которое может передаваться из формы , при этом не
отображаться на экране. Это текстовые поля позволяют сохранять
определенные значения в структурах, отличных от переменных языка
JS, хотя данные значения существуют до тех пор, пока загружен текущий
документ.
<input type="hidden"
[name="hiddenName"]
[value="textValue"]>
Атрибут name задает имя поля и является необязательным. Значение
текстового поля указывают при помощи атрибута value, который
позволяет задавать и значение поля по умолчанию. К свойствам скрытых
объектов можно обращаться посредством одного из следующих
выражений:
o
o
fieldName.propertyName
formName.elements[i].propertyName
где fieldName - имя скрытого поля, заданное в атрибуте name тега
<input>, а formName - имя формы, в которой определено скрытое поле.
Свойства
o
name - соответствует атрибуту name
тега <input>;
o
value - соответствует атрибуту value
тега <input>;
o
type - соответствует атрибуту type и
содержит значение "hidden".
Скрытые объекты не имеют методов и
обработчиков событий.
Пример обращения к скрытому
полю
<form name="hiddenField">
<input
name="hfield"
type="hidden"
value="page 1">
</form>
size=20
Значение этого поля можно изменить с
помощью оператора следующего вида:
document.hiddenField.hfield.value = "page 2";
Объект password
Для обращения к свойствам и методам поля пароля
применяются выражения вида:
o
passName.propertyName
o
passName.methodName(parameters)
o
formName.elements[i].propertyName
o
formName.elements[i].methodName(parameters)
Здесь passName - значение атрибута name объекта
заданного в теге <input>, а formName - либо значение
свойства name объекта form, либо определенный элемент
в массиве forms, например forms[0]. Переменная i
применяется для указания полоожения требуемого
элемента в массиве.
Свойства
Объект
password
свойства:
имеет
следующие
o
defaultValue - значение по умолчанию,
задаваемое с помощью атрибута value;
o
name - соответствует атрибуту name тега
<name>
o
value - соответствует текущему значению
объекта password;
o
type - значением этого свойства для всех
объектов password является строка "password".
Методы и обработчики
событий
Метод focus() объекта password
применяется для установки фокуса в поле
ввода пароля, а метод blur() - для его
удаления.
При помощи метода select() можно
выделить данные в поле ввода. Этот метод
обычно используется вместе с методом
focus().
Для объекта password обработчики событий
не определены.
Объект radio
Для обращения к методам
используют выражения:
o
o
o
o
и
свойствам
селекторной
кнопки
radioName[i].propertyName
radioName[i].methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)
где radioName - значение атрибута name, заданное в
соответствующем теге <input>, а formName - либо значение атрибута
name объекта form, либо обращение к элементу массива forms.
Поскольку селекторные кнопки являются элементами формы, для
обращения к ним можно использоовать массив элементов формы
elements.
document.forms[0].radioName[0]
Следует иметь в виду, что для группы селекторных кнопок
элементы массива для каждого элемента этой группы
располагаются в обратном порядке.
Свойства
Объект radio имеет следующие свойства:
o
o
o
o
o
o
checked - содержит булево значение true или false, в зависимсти от того,
выбрана или нет данная селекторная кноопка;
defaultChecked - сответствует атрибуту checked тега <input type="radio">,
а также содержит булево значение;
length - представляет кооличество селекторных кнопок в бъекте radio;
name - соответствует атрибуту name тега <input>
value - сооответствует атрибуту value тега <input>
type - для объектов radio значением этого атрибута является строка
"radio"
Методы и обработчики
событий
Для выбора селекторной кнопки используется метод
click().
Объект radio имеет обработчик событий onClick, который
используется для обработки событий, связанных с
активизацией селекторной кнопки. При этом можно задать
выполнение как отдельных операторов, так и функции.
Объект reset
<input type="reset"
name="resetName"
value="buttonText"
[onClick="handlerText"]>
Атрибут name задает имя объекта reset, а атрибут value - текст,
отоображаемый на кнопке. Для обращения к методам и свойствам
объекта reset используется синтаксис:
o
o
o
o
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, но и для других тоже обычно не
используют, не всегда корректно работает.
Для объекта reset можно определить
обработчик события onClick..
Объект select и массив options
<select name="selectName"
[size="integer"] [multiple]
[OnBlur="handlerText"]
[OnChange="handlerText"]
[OnFocus="handlerText"]>
<option value="optionValue"
textToDisplay
</select>
[selected]>
Объект select
Для обращения к свойствам и методам
объекта select используются выражения
типа:
o
o
o
o
selectName.propertyName
selectName.methodName(parameters)
formName.elements[i].propertyName
formName.elements[i].methodName(parameter
s)
Объект select (3)
К отдельным элементам списка, определенного в
объекте select, можно обратиться при помощи
массива options или массива elements, используя
выражения вида:
o
o
selectName.options[i].propertyName
formName.elements[i].options[index].propertyNam
e
где selectName - имя, заданное в атрибуте name тега
<select>, а formName - имя формы, в которой
определен данный объект select.
Массив options
Элементам списка, определенным в тегах <option>, в
JavaScript соответствуют элементы массива options,
массив является свойством объекта select.
Если тег <select> с именем beer содержит два тега
<option>, в JS им соответствуют элементы
beer.options[0] и beer.options[1].
Массив options, в свою очередь, имеет свойство
length. Значение этого свойства - количество тегов
<option> в заданном объекте select. Например,
выражение beer.options.length будет возвращать
значение 2.
Свойства
Объект select имеет свойства:
o
O
o
o
o
length - количество тегов <option>, заданных в теге
<select>
name - соответствует атрибуту name тега <select>
options - массив значений тегов <option>
selectIndex - содержит индекс выбранного элемента, а
если выбрано несколько элементов, то индекс
первого;
type - для списков с возможностью выбора одного
элемента содержит значение "select-one", а для
списков
с
возможностью
выбора
нескольких
элементов - значение "select-multiple"
свойства для массива options
o
o
o
o
o
o
o
defaultSelected - соответствует первому тегу <option>,
определенному с атрибутом selected;
index - номер даннго элемента в массиве;
length - количество элементов в списке объекта select;
selected - не равное нулю, если данный элемент списка
выбран
selectedIndex - содержит индекс выбранного элемента
text - соответствует тексту, который указан в теге <option>
value - соответствует атрибуту value тега <option>
Методы и обработчики
событий
Объект select имеет методы focus() и
blur(). Для объекта select можно
определить обработчики событий,
соответствующие атрибутам onBlur и
onChange, задавая реакцию объекта на
события, связанные с потерей и
получением фокуса ввода.
Пример
<script language = "JavaScript">
<!-- function showSelected(a) {
var selNum = a.beer.selectedIndex;
var selText = a.beer.options[selNum].text;
alert("Выбрана ОПЦИЯ: "+ selNum + "\n" +
"Текст выбранной опции: "+ selText);
} //-->
</script>
<form name ="Мой выбор">
Какое пиво лучше?
<select name = "beer">
<option>Жигулевское
<option selected>Очаковское
<option>Бочкарев
<option>Балтика
</select>
<P>
<input type = "button" value="Смотрим что выбрали" onClick="showSelected(this.form)">
</form>
Объект submit
<input type="submit"
name="submitName"
value="buttonText"
[onClick="handlerText"]>
С помощью атрибута name задается имя объекта submit, которое
является значением одноименного свойства объекта в языке JS. В
качестве значения атрибута value используется строка текста,
отображаемая на кнопке. Атрибуту value в языке JS соответствует
свйство value объекта submit. Для обращения к методам и свойствам
объекта submit применяются выражения:
o
submitName.propertyName
o
submitName.methodName(parameters)
o
formName.elements[i].propertyName
o
tformName.elements[i].methodName(parameters)
Методы и Обработчики
событий
Объект submit имеет метод click().
Для объекта submit можно определить
только один обработчик события onClick.
Объект text
<input [type="text"]
name="textName"
value="textValue"
size=integer
[onBlur="handlerText"]
[onChange="handlerText"]
[onFocus="handlerText"]
[onSelect="handlerText"]>
Объект text (2)
Для обращения к методам и свойствам объекта text
используют выражения вида:
o
o
o
o
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.
Пример
Рассмотрим пример приведенный выше:
<form>
<B>Пример:</B>
<input type="text"
name="exeName"
value="Это поле ввода"
size=20
onFocus="this.select()">
</form>
В данном примере обработчик события, связанного с получением
фокуса ввода, onFocus применяется для выделения текста в поле
ввода. Для самого выделения используется метод select(), а
обращение к полю ввода осуществляется при помощи оператора this.
Объект textarea
< textarea name="textareaName"
rows="integer"
cols="integer"
[onBlur="handlerText"]
[onChange="handlerText"]
[onFocus="handlerText"]
[onSelect="handlerText"]>
[textToDisplay]
[wrap="hand | soft"]
</textarea>
Объект textarea (2)
Для обращения к методам и свойствам объекта textarea применяются
типичные для элементов формы выражения:
o
textareaName.propertyName
o
textareaName.methodName(parameters)
o
formName.elements[i].propertyName
o
formName.elements[i].methodName(parameters)
где textareaName - это значение атрибута name тега <textarea>, а
formName - имя формы, в котрой определен объект textarea.
Содержимое объектов textarea в JS-программах может динамически
изменяться путем присваивания нового значения их свойству value.
Например:
document.forms[0].myArea.value = "Новый текст"
Свойства
O defaultValue - значение содержит текст, помещенный в контейнер
<textarea> . . . </textarea>
O name - соответствует атрибуту name тега <textarea>
O value - соответствует текущему значению объекта textarea т.е. текущему
содержимому области текста;
O 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>
