русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Поля формы и их объекты


Дата добавления: 2013-12-23; просмотров: 646; Нарушение авторских прав


Как было сказано ранее, контейнеру <FORM>соответствует объект (назовем его f ) классаForm ; он является свойством объектаdocument. В свою очередь, элементы формы, вложенные в контейнер <FORM>, например,<INPUT> различных типов, тоже соответствуют объектам различных классов, причем эти объекты являются свойствами объекта f.

У всех объектов, отвечающих полям формы, есть несколько стандартных свойств, доступных только для чтения: name (имя элемента, заданное в атрибуте NAME ), type(тип элемента, например, для контейнеров<INPUT TYPE="..."> он совпадает со значением атрибута TYPE ), form (указывает на форму f, в которой данный элемент содержится).

При программировании форм часто требуется писать обработчики событий для форм или их элементов, при этом нужно ссылаться на свойства данного элемента, других элементов и формы в целом. Стандартная схема именования по именам либо по индексам обсуждалась выше:

document.форма.элемент.свойство // точечная нотацияdocument.форма.элемент["свойство"] // скобочная нотацияdocument.forms["имя_формы"].elements["имя_элемента"].свойствоdocument.forms[индекс_формы].elements[индекс_элемента].свойство

Однако получающиеся выражения - довольно громоздкие. Поэтому было введено следующее соглашение: в обработчике события формы или элемента формы имятекущего элемента можно опускать (вместе со всей предшествующей "приставкой"). Кроме того, ссылаться на сам текущий элемент можно с помощью ключевого слова this. Последнее может потребоваться, например, когда нужно передать в функцию не какое-то свойство объекта, а сам объект.

Например, предположим, что у нас есть форма:

<FORM NAME=f><INPUT TYPE=text NAME=e value="Текст" onFocus=""><INPUT TYPE=button NAME=b value="Кнопка" onClick=""></FORM>

Тогда вместо полной записи:



<INPUT TYPE=text NAME=e value="Текст" onFocus="alert(document.f.e.value)">

мы можем использовать краткую, опустив приставку " document.f.e ", указывающую на текущий элемент:

<INPUT TYPE=text NAME=e value="Текст" onFocus="alert(value)">

Более того, в этом контексте эквивалентны следующие записи:

value // короче не бывает! this.value // здесь this ссылается на элемент "e" form.e.value // form есть свойство объекта "e" (равное "f") this.form.e.value // комбинируем оба способа document.f.e.value // почти полная записьwindow.document.f.e.value // это самая полная записьdocument.f.e.form.e.value // можно итерировать "form.e."

Например, здесь в 3-й строчке form есть свойство (текущего!) элементаdocument.f.e - напомним, что это свойство ссылается на объект document.f. Аналогично, в обработчик onClick элемента b мы можем поместить скриптform.e.value=50 (краткое обращение к свойству другого элемента формы:document.f.e.value ) или alert(form.method) (краткое обращение к свойству самой формы document.f.method ) или даже TestForBugs(this) (в пользовательскую функцию TestForBugs() будет передан (по ссылке) объектdocument.f.b ).

Как видим, это соглашение не только дает некоторую экономию кода, но также позволяет ссылаться на текущий элемент или на форму, не зная его имени или номера. Это предоставляет дополнительную гибкость при программировании форм; например, можно переименовать форму, ничего не меняя во всех скриптах. Далее мы рассмотрим объекты JavaScript, соответствующие полям различных типов в HTML-формах. При этом мы будем пользоваться данным соглашением. Поскольку свойстваname, type и form есть у объектов всех элементов формы, то мы не будем их указывать особо.

Текстовое поле ввода (объект Text)

Поля ввода (контейнер INPUT типа TYPE=text ) являются одним из наиболее популярных объектов программирования на JavaScript. Это объясняется тем, что, помимо использования по прямому назначению, их применяют и в целях отладки программ, выводя в эти поля промежуточные значения переменных и свойств объектов.

<A HREF="http://site.com/">ссылка 1</A><FORM>Число гипертекстовых ссылок к данному моменту:<SCRIPT>document.write('<INPUT NAME=t VALUE='+document.links.length+'>');</SCRIPT><BR><INPUT TYPE=buttonVALUE="Число ссылок по окончании загрузки страницы" onClick="form.t.value=document.links.length;"><BR><INPUT TYPE=reset></FORM><A HREF="http://rite.com/">ссылка 2</A>

Пример 5.2. (html, txt)

В данном примере первое поле формы - это поле ввода. Мы присваиваем ему значение по умолчанию, равное числу гипертекстовых ссылок, имеющихся выше этого места в HTML-документе. Затем при помощи кнопки изменяем это значение на общее количество гипертекстовых ссылок во всем HTML-документе.

С каждым текстовым полем ввода <INPUT TYPE=text> связан свой объект классаText, который является свойством той формы, в которой он был описан. Этот объект, в свою очередь, характеризуется следующими свойствами, методами и событиями:

Свойства, методы и события объекта Text
Свойства Методы Обработчики событий
defaultValue valuesizemaxLength disabledreadOnly focus()blur()select() onChangeonSelect onFocusonBlur onClickonDblClick onMouseOver onMouseOutonMouseDownonMouseUp onKeyPressonKeyDownonKeyUp

Все перечисленные свойства можно менять. Смысл их таков: value (текущее значение поля ввода), defaultValue (значение поля ввода по умолчанию), size(число умещающихся в поле символов, т.е. видимых) maxLength (максимальное число символов, которое можно присвоить значению данного поля) readOnly (может ли пользователь менять значение поля) disabled (может ли пользователь установить фокус на этом поле).

Опишем вкратце методы: focus() - устанавливает фокус на данном поле, blur() - убирает фокус с данного поля, select() - выделяет весь введенный текст (чтобы, например, его можно было скопировать в буфер, либо удалить, нажав клавишу Delete).

Смысл обработчиков событий вполне понятен из их названий: обработчик onChangeвызывается, когда пользователь (но не скрипт) изменил значение в поле ввода (и кликнул вне поля ввода); onSelect - когда пользователь начинает выделять текст, расположенный в поле; onFocus и onBlur - когда поле получает и теряет фокус, соответственно; onClick и onDblClick - когда пользователь совершил одинарный или двойной щелчок мышью на поле, соответственно. Вторая колонка событий - стандартна для большинства элементов HTML-страницы. Нужно лишь иметь в виду, что обработчики событий onMouseDown, onMouseUp, onKeyPress, onKeyDown, onKeyUpсрабатывают у того элемента формы, который в данный момент находится в фокусе.

Списки вариантов (объекты Select и Option)

Одним из важных элементов интерфейса пользователя являются списки вариантов. В HTML-формах для их реализации используется контейнер <SELECT>, который вмещает в себя контейнеры<OPTION>. При этом список может "выпадать" либо прокручиваться внутри окна. В зависимости от наличия атрибутаMULTIPLE у контейнера <SELECT> список может быть либо с возможностью выбора только одного варианта, либо нескольких вариантов.

С каждым контейнером <SELECT>ассоциирован объект класса Select, а с каждым дочерним контейнером <OPTION> - объект класса Option, являющийся свойством данного объекта классаSelect. Кроме того, свойством объекта класса Select является также коллекцияoptions[], объединяющая все его дочерние объекты Option. Перечислим основные свойства, методы и события, характеризующие эти объекты.

Объект Select
Свойства Методы Обработчики событий
options[]sizelengthmultipleselectedIndex focus()blur() add()remove() onBlur onChange onFocus
Объект Option
Свойства Методы События
defaultSelected selectedindextextvalue нет нет
           

Мы не будем описывать все свойства, методы и события этих двух объектов. Остановимся только на типичных способах применения их комбинаций.



<== предыдущая лекция | следующая лекция ==>
Событие Reset | Создание объектов Option


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.004 сек.