- •Лекция: Назначение и применение 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
- •Демонстрационный пример
- •Управление фокусом
- •Управляем фокусом в окнах
- •Управление фокусом во фреймах
- •Фокус в полях формы
- •Скрытая передача данных из форм
- •Невидимый код
- •Невидимый фрейм
- •Код во внешнем файле
- •Обмен данными посредством встроенной графики
- •Модель безопасности
Свойства selected и selectedIndex
Свойство selectedIndex объекта Select возвращает номер выбранного варианта (нумерация начинается с нуля).
<FORM> Вариант:
<SELECT onChange="form.e.value=selectedIndex;">
<OPTION>Один</OPTION>
<OPTION>Два</OPTION>
</SELECT>
Выбрали индекс: <INPUT NAME=e>
</FORM>
Обратите внимание, что в обработчике события onChange мы ссылаемся на второй элемент формы. На данный момент он не определен, но событие произойдет только тогда, когда мы будем выбирать вариант - к этому моменту поле уже будет определено.
Если список вариантов задан как <SELECT MULTIPLE>, т.е. с возможностью выбора нескольких опций одновременно, то свойство selectedIndex возвратит индекс первой выбранной опции. На этот случай имеется альтернатива: свойство selected у каждого объекта Option. Оно равно true, если данная опция выбрана, и false в противном случае. Пример будет приведен ниже.
Обработчик события onChange объекта Select
Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Если поле является полем выбора единственного варианта, то все просто - см. предыдущий пример. Посмотрим, что происходит, когда мы имеем дело с полем выбора множественных вариантов:
<FORM>
Фрукты: <SELECT MULTIPLE
onChange="form.e.value='';
for(i=0; i<length; i++)
if(options[i].selected)
form.e.value += options[i].text+', ';">
<OPTION>яблоко</OPTION>
<OPTION>банан</OPTION>
<OPTION>киви</OPTION>
<OPTION>персик</OPTION>
</SELECT><BR>
Выбраны позиции: <INPUT READONLY SIZE=70 NAME=e>
</FORM>
Пример 5.5. Обработчик onChange при выборе множественных вариантов (html, txt)
Обратите внимание на то, что событие Change происходит тогда, когда пользователь выбирает или отменяет какой-либо вариант. Исключение составляет тот случай, когда варианты при выборе последовательно отмечаются (нажатие кнопки мыши на одном элементе, ведение мыши до конечного элемента, отпускание кнопки мыши). В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.
Кнопки
В HTML-формах используется четыре вида кнопок:
<FORM>
<INPUT TYPE=button VALUE="Кнопка типа button">
<INPUT TYPE=submit VALUE="Кнопка отправки">
<INPUT TYPE=reset VALUE="Кнопка сброса">
<INPUT TYPE=image SRC=a.gif> <!-- графическая кнопка -->
</FORM>
В атрибуте кнопки можно задать обработчик события onClick, а в атрибуте формы - обработчики событий onSubmit и onReset. Кроме того, кнопкам и форме соответствуют объекты DOM. Объект, отвечающий кнопке, имеет методclick(). Объект, отвечающий форме, имеет методы submit() и reset(). С точки зрения программирования важен вопрос о взаимодействии этих методов друг с другом и с соответствующими обработчиками событий.
В каком случае при вызове метода (из любого места JavaScript-программы) будет автоматически вызван и соответствующий обработчик события, заданный пользователем в атрибуте кнопки или формы? Ответ здесь следующий:
при вызове метода click() кнопки вызывается и обработчик события onClick этой кнопки;
при вызове метода submit() формы не вызывается обработчик события onSubmitформы;
при вызове метода reset() формы вызывается и обработчик события onResetформы.
Ниже мы на примерах рассмотрим, что это означает на практике. Таким образом, при программном вызове метода submit() нужно позаботиться о дополнительном вызове обработчика события onSubmit, чтобы, например, данные не были отправлены на сервер без предварительной проверки. Как это сделать - мы расскажем ниже. Особое внимание мы уделим также возможности перехвата и генерирования события отправки данных на сервер.