![](/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
- •Демонстрационный пример
- •Управление фокусом
- •Управляем фокусом в окнах
- •Управление фокусом во фреймах
- •Фокус в полях формы
- •Скрытая передача данных из форм
- •Невидимый код
- •Невидимый фрейм
- •Код во внешнем файле
- •Обмен данными посредством встроенной графики
- •Модель безопасности
Кнопка reset
Кнопка сброса ( reset ) позволяет вернуть все поля формы в первоначальное состояние, которое они имели при загрузке страницы. Нажатие кнопки сброса приводит к следующей последовательности действий браузера:
вызов обработчика события onClick у данной кнопки;
вызов обработчика события onReset у формы;
восстановление значений по умолчанию во всех полях формы.
Вызов метода click() у кнопки сброса равносилен нажатию этой кнопки, т.е. приводит к тем же трем действиям:
<FORM NAME=f
onReset="return confirm('Вы хотите очистить форму?')">
<INPUT TYPE=text VALUE="Измените этот текст">
<INPUT TYPE=reset VALUE="Кнопка сброса" NAME=s
onClick="alert('Вызван обработчик onClick у кнопки сброса')">
</FORM>
<A HREF="javascript: document.f.s.click();void(0);"
>Вызвать метод <B>click()</B> кнопки сброса</A>
Пример 5.11. Вызов метода click() у кнопки сброса (html, txt)
Есть способы сбросить форму в исходное состояние в обход кнопки сброса (которой, кстати, у формы может и не быть). Во-первых, это вызов метода reset()у формы. Во-вторых, если фокус находится на любом поле или кнопке формы, то можно нажать клавишу Esc. Пример:
Измените текст, а затем нажмите Esc (либо ссылку).<BR>
<FORM NAME=f
onReset="return confirm('Вы хотите очистить форму?')">
<INPUT TYPE=text VALUE="Измените этот текст">
</FORM>
<A HREF="javascript: document.f.reset();void(0);"
>Вызвать метод <B>reset()</B> формы</A>
Пример 5.12. Сброс формы нажатием клавиши Esc (html, txt)
Как можно видеть, оба способа не просто сбрасывают форму, но и вызывают обработчик события onReset формы. Таким образом, метод reset() ведет себя более логично и предсказуемо, нежели submit().
Графическая кнопка
Графическая кнопка - это разновидность кнопки отправки. Ее отличие в том, что вместо кнопки с надписью пользователь увидит картинку, по которой можно кликнуть:
<FORM ACTION="receive.htm">
<INPUT TYPE=image SRC="pic.gif">
</FORM>
Кроме того, когда пользователь кликает по графической кнопке, то на сервер отправятся не только данные, введенные в поля формы, но также и координаты указателя мыши относительно левого верхнего угла изображения. К сожалению, перехватить эти координаты в JavaScript-программе не удается. Если Вам необходимо работать с этими координатами, то вместо графической кнопки рекомендуется создать активную карту с помощью контейнера <MAP>.
Графические кнопки имеют ряд странностей. Например, являясь одновременно и кнопкой, и изображением, они почему-то отсутствуют как в коллекцииdocument.f.elements[], так и в коллекции document.images[] (IE 7, Mozilla Firefox). Как следствие, они не учитываются ни в общем количестве элементов формы ( document.f.length ), ни в общем количестве изображений документа (document.images.length ).
Как же обратиться к такой кнопке? Это можно сделать, например, задав атрибутID:
<INPUT TYPE=image SRC="pic.gif" ID="d1">
и затем в программе написав: var knopka = document.getElementById('d1'). После этого мы можем обращаться к свойствам этой кнопки, напримерknopka.src, а также к методу knopka.click(). Следующий пример показывает, что вызов метода click() графической кнопки "почти" равносилен нажатию этой кнопки, т.е. последовательно вызывает обработчики onClick кнопки, onSubmitформы и передает данные на сервер (но что при этом передается в качестве координат курсора мыши?):
<FORM ACTION="receive.htm"
onSubmit="return confirm('Вы хотите отправить данные?')">
<INPUT onClick="alert('Вызван обработчик onClick у графической кнопки')"
TYPE="image" SRC="pic.gif" id="d1">
</FORM>
<A HREF="javascript:
var knopka = document.getElementById('d1');
knopka.click(); void(0);"
>Вызвать метод <B>click()</B> графической кнопки</A>
Пример 5.13. Вызов метода click() у графической кнопки (html, txt)
Поскольку графические кнопки используются довольно редко, на этом мы остановимся в их обсуждении.