![](/user_photo/2706_HbeT2.jpg)
- •Лекция: Назначение и применение JavaScript, общие сведения
- •Способ 1: url-схема "JavaScript:"
- •Способ 2: обработчики событий
- •Способ 3: подстановки
- •Размещение кода внутри html-документа
- •Условная генерация html-разметки на стороне браузера
- •Комментарии в html и JavaScript
- •Указание языка сценария
- •Регистр символов
- •Лекция: Типы данных и операторы
- •Массивы
- •Метод join()
- •Метод reverse()
- •Метод sort()
- •Операторы языка
- •Лекция: Функции и объекты
- •Функции
- •Функция как тип данных
- •Функция как объект
- •Коллекции
- •Cвойства
- •События
- •Пользовательские объекты
- •Понятие пользовательского объекта
- •Прототип
- •Методы объекта Object
- •Лекция: Программируем свойства окна браузера Объект window
- •Свойства объекта window Поле статуса и свойство window.Status
- •Программируем status
- •Программируем defaultStatus
- •Поле адреса и свойство window.Location
- •Свойства объекта location
- •Методы объекта location
- •История посещений (history)
- •Тип браузера (navigator)
- •Методы объекта window
- •Методы focus() и blur()
- •Метод setTimeout()
- •Метод clearTimeout()
- •Методы setInterval() и clearInterval()
- •Фреймы (Frames)
- •Иерархия и именование фреймов
- •Коллекция фреймов
- •Передача данных во фрейм
- •Лекция: Программируем формы Контейнер form
- •Свойства объекта Form Свойство action
- •Свойство method
- •Свойство target
- •Свойство encoding
- •Коллекция elements[]
- •Методы объекта Form Метод submit()
- •Метод reset()
- •События объекта Form Событие Submit
- •Событие Reset
- •Поля формы и их объекты
- •Текстовое поле ввода (объект Text)
- •Списки вариантов (объекты Select и Option)
- •Создание объектов Option
- •Коллекция options[]
- •Свойства text и value объекта Option
- •Свойства selected и selectedIndex
- •Обработчик события onChange объекта Select
- •Кнопка button
- •Кнопка submit
- •Метод submit() формы
- •Кнопка reset
- •Графическая кнопка
- •6. Лекция: Программируем гипертекстовые переходы
- •Замена атрибута href
- •Изменение части url
- •События MouseOver и MouseOut
- •Обработка события Click
- •Лекция: Программируем графику Объект Image
- •Свойства src и lowSrc
- •Изменение картинки
- •Мультипликация
- •Обработчик события onLoad
- •Запуск и остановка мультипликации
- •Оптимизация отображения
- •Оптимизация при загрузке изображений
- •Предварительная загрузка изображений
- •Нарезка изображений
- •Графика и таблицы
- •Горизонтальное меню
- •Вертикальное меню
- •Выделение выбранного пункта меню
- •Вложенные меню
- •Лекция: Программируем "за кадром" Механизм cookie
- •Что такое cookie
- •Чтение cookie
- •Создание или изменение cookie
- •Удаление cookie
- •Демонстрационный пример
- •Управление фокусом
- •Управляем фокусом в окнах
- •Управление фокусом во фреймах
- •Фокус в полях формы
- •Скрытая передача данных из форм
- •Невидимый код
- •Невидимый фрейм
- •Код во внешнем файле
- •Обмен данными посредством встроенной графики
- •Модель безопасности
Поля формы и их объекты
Как было сказано ранее, контейнеру <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 есть у объектов всех элементов формы, то мы не будем их указывать особо.