- •Лекция: Назначение и применение 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
- •Демонстрационный пример
- •Управление фокусом
- •Управляем фокусом в окнах
- •Управление фокусом во фреймах
- •Фокус в полях формы
- •Скрытая передача данных из форм
- •Невидимый код
- •Невидимый фрейм
- •Код во внешнем файле
- •Обмен данными посредством встроенной графики
- •Модель безопасности
Текстовое поле ввода (объект 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=button
VALUE="Число ссылок по окончании загрузки страницы"
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 value size maxLength
disabled readOnly |
focus() blur() select() |
onChange onSelect
onFocus onBlur
onClick onDblClick |
onMouseOver onMouseOut onMouseDown onMouseUp
onKeyPress onKeyDown onKeyUp |
Все перечисленные свойства можно менять. Смысл их таков: value (текущее значение поля ввода), defaultValue (значение поля ввода по умолчанию), size(число умещающихся в поле символов, т.е. видимых) maxLength (максимальное число символов, которое можно присвоить значению данного поля) readOnly (может ли пользователь менять значение поля) disabled (может ли пользователь установить фокус на этом поле).
Опишем вкратце методы: focus() - устанавливает фокус на данном поле, blur() - убирает фокус с данного поля, select() - выделяет весь введенный текст (чтобы, например, его можно было скопировать в буфер, либо удалить, нажав клавишу Delete).
Смысл обработчиков событий вполне понятен из их названий: обработчик onChangeвызывается, когда пользователь (но не скрипт) изменил значение в поле ввода (и кликнул вне поля ввода); onSelect - когда пользователь начинает выделять текст, расположенный в поле; onFocus и onBlur - когда поле получает и теряет фокус, соответственно; onClick и onDblClick - когда пользователь совершил одинарный или двойной щелчок мышью на поле, соответственно. Вторая колонка событий - стандартна для большинства элементов HTML-страницы. Нужно лишь иметь в виду, что обработчики событий onMouseDown, onMouseUp, onKeyPress, onKeyDown, onKeyUpсрабатывают у того элемента формы, который в данный момент находится в фокусе.