|
Учебник JavaScriptСтраницы: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 Объект password
Объект password представляет собой поле ввода, содержимое которого не подлежит просмотру. Вместо каждого символа, введенного в таком поле, отображается символ звездочки (*). В то же время содержимое данного поля сохраняется как обычный текст. Объекты password, в своою очередь являются свойствами объекта form и должны помещаться в контейнере <form> . . . </form>. <input type="password" name="passwordName" size=integer [value="textValue"]> синтаксис этого тега такой же как и у тега задающего поле ввода, однако атрибут type имеет значение "password". Значением данного атрибута для поля ввода всегда является строка "text". Атрибут name задает имя поля пароля и соответствует свойству name этого элемента в языке JavaScript, атрибут size определяет размер поля в символах, а атрибут value используется для записи в поле значения по умолчанию. Если и используется этот атрибут, ему обычно присваивают значение взятое из Cookies - об использовании "ключиков" будем говорить позже. Для обращения к свойствам и методам поля пароля применяются выражения вида:
Свойства Объект password имеет следующие свойства:
Методы и обработчики событий
Метод focus() объекта password применяется для установки фокуса в поле ввода пароля, а метод blur() - для его удаления. При помощи метода select() можно выделить данные в поле ввода. Этот метод обычно используется вместе с методом focus().
Объект radio представляет собой селекторную кнопку (radio button), определяемую в HTML-форме. В отличие от контрольных переключателей (checkbox), селекторные кнопки позволяют выбрать только один из предлагаемых вариантов. Объект radio является свойством объекта form, и поэтому должен содержаться в контейнере <form> . . . </form>. В следующем примере показаны три объекта radio. <input type="radio" name="radioName" value="buttonValue" [checked] [on Click="handlerText"]> textToDisplay В атрибуте name задается имя селекторной кнопки. Учтите, что для селекторных кнопок, принадлежащих к одной группе, необходимо указывать одинаковые имена, т.е. одинаковые значения атрибута name. Значение атрибута value возвращается серверу при передаче формы (по умолчанию значение "on"). С помощью атрибута checked можно выбрать селекторную кнопку, которая будет активизирована по умолчанию. Свойство defaultChecked объекта radio имеет значение true, если задан атрибут checked. В качестве значения атрибута onClick указывают обработчик события, связанного с выбором селекторной кнопки. В качестве обработчика события можно задать оператор или функцию языка JavaScript. Селекторная кнопка, как правило, имеет текст, описывающий данный вариант выбора. Этот текст задается в строке textToDisplay. Для обращения к методам и своойствам селекторной кнопки используют выражения:
document.forms[0].radioName[0] Следует иметь в виду, что для группы селекторных кнопок элементы массива для каждого элемента этой группы располагаются в обратном порядке. Свойства Объект radio имеет следующие свойства:
Методы и обработчики событий
Для выбора селекторной кнопки используется метод click(). Честно говоря я не совсем понимаю зачем он нужен, ведь значение свойства checked, а именно на него может воздействовать этот метод, может задаваться по умолчанию. Не могу представить другое назначение этого метода.
Объект reset отображается в HTML-форме как кнопка перезагрузки, которая возвращает каждый элемент формы к его исходнму состоянию, а значения по умолчанию устанавливаются при помощи атрибута value. Тег имеет синтаксис:
Свойства
Свойство name сответствует атрибуту name тега <input>, свойство value - атрибуту value, а свойство type - атрибуту type и для объектов reset всегда имеет значение "reset".
Объект reset имеет метод click(). Вообще все методы Click() и не только для объекта reset, но и для других тоже обычно не используют, - не всегда корректно работает. Ведь можно же задать свой метод (имеется в виду пользовательская функция) по событию onClick и все проблемы будут решены. Объект select отображается как простой или ниспадающий список и является элементом формы, определенной в HTML-документе. Элементам списка, заданного в объекте select, соответствует массив options. Объекты select представляют собой свйства объекта form, в то время как массив options является свойством объекта select. Подобные меню можно часто увидеть для навигации по сайту например. Синтаксис тега <select> <select name="selectName" [size="integer"] [multiple] [OnBlur="handlerText"] [OnChange="handlerText"] [OnFocus="handlerText"]> <option value="optionValue" [selected]> textToDisplay </select> Атрибут name задает имя объекта select, который имеет одноименное свойство. Значением атрибута size является количествоо стрк, отображаемых в списке, хотя содержаться может больше. С помощью атрибута multiple можно выбрать несколько элементов списка. Для ниспадающих списков атрибуты size и multiple не определяются. Контейнер <select> . . . </select> не используется без тегов <option>, поскольку эти эти теги задают элементы списка. Количество элементв в списке не ограничивается. Атрибут value тега <option> представляет значение, которое пересылается серверу при передачи формы. Атрибуту value сооответствует свойство объекта select с таким же именем. Список может содержать элементы, выбранные по умолчанию, что задается при поомощи атрибута selected. В программе на JavaScript элементы, выбранные по умолчанию, определяются значением свойства defaultSelected объекта option. Текст для элементов списка необхдимо задать в строке textToDisplay. Кроме того, каждому элементу списка соответствует конкретноое значение, устанавливаемое в атрибуте value тега <option>. Для обращения к свойствам и методам объекта select используются выражения типа:
К отдельным элементам списка, определенного в объекте select, можно обратиться при помощи массива options или массива elements, используя выражения вида:
Массив options
Элементам списка, определенным в тегах <option>, в JavaScript соответствуют элементы массива options, массив является свойством объекта select. Если тег <select> с именем beer содержит два тега <option>, в JS им соответствуют элементы beer.options[0] и beer.options[1]. Объект select имеет свойства:
Методы и обработчики событий
Объект select имеет методы focus() и blur().
Для объекта select можно определить обработчики событий, соответствующие атрибутам onBlur и onChange, задавая реакцию объекта на события, связанные с потерей и получением фокуса ввода. Используются не часто, но всеже существуют такие задачи где эти события как раз-то и нужно применить, - будем говорить о событиях в соответствующей главе.
Если вы во всем разобрались до этого примера, то комментарии и не понадобятся, но всеже. Объект select, определенный в данном примере содержит четыре элемента. При щелчке мыши на кнопке "Смотрим что выбрали" активизируется функция showSelected(), которая выводит окно сообщения с информацией об выбранном элементе. Для этого используются свойства text и selectedIndex. Функция showSelected() принимает параметр - имя формы. Значение этого параметра возвращается выражением this.form и представляет собой ссылку на текущую форму. Можно было, конечно и не передавать параметр функции если эта функция существует специально для текущей формы, но если кнопка будет находиться в другой форме, то параметр будет необходим. В функции showSelected() переменной selNum присваивается значение свойства selectIndex объекта select, а затем это значение используется при вычислении значения переменной setText для индексации массива options.
Объект submit отображается как кнопка в фотме HTML. Ее нажатие вызывает передачу текущей формы на сервер, имя которго задано при помощи атрибута action тега <form>. Объект submit является свойством объекта form. Обычно он представляет собой последнее поле формы, хотя его можно указывать в любом месте контейнера <form> . . . </form>. При активации кнопки данные пересылаются на сервер. Мы уже пользовались этим объектом ранее, когда рассматривали объект form.
где submitName - значение атрибута name объекта submit, а formName - либо значение атрибута name объекта form, свойством которого является данный объект submit, либо элемент массива forms, например forms[0] для первой формы в текущем документе. Не правда ли все похоже на объект reset, рассматриваемый ранее, только назначение их разноое. Они и применяются зачастую вместе. Свойства, методы и обработчики событий тоже похожи.
Объект submit имеет метод click(). Вообще метод Click() обычно не используют, - не всегда корректно работает - если я это говорю уже не в пятнадцатый раз :).
Объект text - это поле ввода, определяемое в теге <input type="text"> и предоставляющее пользователю возможность вводить текстовые данные. Объект text является свойством объекта form и должен размещаться в контейнере <form> . . . </form>. Объекты text содержат данные, которые можно и читать, и динамически изменять в JS-прграммах. Синтаксис тега: <input [type="text"] name="textName" value="textValue" size=integer [onBlur="handlerText"] [onChange="handlerText"] [onFocus="handlerText"] [onSelect="handlerText"]> С помощью атрибута name задается имя объекта text, которое можно использовать в JS-прграммах. Этому атрибуту в языке JS соответствует свойство name объекта text. Значение атрибута value определяет содержимое поля по умолчанию. Атрибуту value тега <input> соответствует свойство value объекта text, а также свойство defaultValue, значение которого сохраняет содержимое текстового поля, заданное по умолчанию. Присвоив нужное значение атрибуту size, можно установить размер поля в символах. По умолчанию значением атрибута type для объектов text является строка "text", т.е. если атрибут type в определении тега <input> опустить, то создаваемый элемент формы будет полем ввода. Для обращения к методам и свойствам объекта text используют выражения вида:
Свойства
Свойство defaultValue соответствует атрибуту value. Значением свойства value является текущее значение объекта text. Свойство name соответствует атрибуту name объекта text, а свойство type - атрибуту type и содержит в данноом случае значение "text".
В данном примере обработчик события, связанного с получением фокуса ввода, onFocus применяется для выделения текста в поле ввода. Для самого выделения используется метод select(), а обращение к полю ввода осуществляется при помощи оператора this.
Объект textarea соответствует области текста, определенной в форме. Объекты textarea являются свойствами объекта form и должны быть помещены в контейнер <form> . . . </form>. Элементы этого типа используются для ввода нескольких строк текста в свободном формате. Также его часто используют для вывода примеров текста например JS-программы, сформированнго текста предлагаемого для размещения например баннера и др. < textarea name="textareaName" rows="integer" cols="integer" [onBlur="handlerText"] [onChange="handlerText"] [onFocus="handlerText"] [onSelect="handlerText"]> [textToDisplay] [wrap="hand | soft"] </textarea>
Атрибут name определяет имя области текста, и ему соответствует свойство name объекта textarea. Атрибуты rows и cols задают размеры пля области в симвоолах. Строка textToDisplay представляет собой необязательный текст, помещенный в область текста при первом отображении на экране. Эта строка является значением свойства defaultValue объекта textarea в языке JavaScript. Форматирование в этй строке и происходит обычным способом, тоесть без тегов <br> и других, а также теги отображаются здесь как они написаны, тоесть теги в этой строке не работают. Значение атрибута wrap определяет, каким образом введенный в поле текст разбивается на строки. Так, значение soft задает отображение строк в области текста полностью. В противном случае текст между двумя символами конца строки (Enter) размещается в одной строке.
где textareaName - это значение атрибута name тега <textarea>, а formName - имя формы, в котрой определен объект textarea.
Методы
Метод focus() используется для помещения фокуса ввода в область текста, а метод blur() - для его удаления из области текста. Метод select() применяется для выделения информации в области текста. Очень удобный метод, когда нужно выделить большой по объему текст.
Здесь содержится два поля. Первое поле является областью текста (textarea). При изменении содержимого текстовой области активизируется функция sCange(), которая выводит окно сообщения, информирующее о том, что текст изменялся. Второе поле является обычным полем ввода, я его разместил для того, чтобы было куда переместить фокус. |
© 2008 |
Сайт оптимизирован под разрешения 1024х768 и 1280х1024, нажмите F11, для более полного погружения в контент сайта |