- •Лекция: Назначение и применение 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
- •Демонстрационный пример
- •Управление фокусом
- •Управляем фокусом в окнах
- •Управление фокусом во фреймах
- •Фокус в полях формы
- •Скрытая передача данных из форм
- •Невидимый код
- •Невидимый фрейм
- •Код во внешнем файле
- •Обмен данными посредством встроенной графики
- •Модель безопасности
События
Кроме методов и свойств, объекты характеризуются событиями. Собственно, суть программирования на JavaScript заключается в написании обработчиков этих событий. Например, с объектом типа button (контейнер INPUT типа button - "кнопка") может происходить событие Click, т.е. пользователь может нажать на кнопку. Для этого атрибуты контейнера INPUT расширены атрибутом обработки этого события - onClick. В качестве значения этого атрибута указывается программа обработки события, которую должен написать на JavaScript автор HTML-документа:
<INPUT TYPE=button VALUE="Нажать"
onClick="alert('Пожалуйста, нажмите еще раз')">
Обработчики событий указываются в специально созданных для этого атрибутах у тех контейнеров, с которыми эти события связаны. Например, контейнер BODY определяет свойства всего документа, поэтому обработчик события "завершена загрузка всего документа" указывается в этом контейнере как значение атрибута onLoad.
Примеры событий: нажатие пользователем кнопки в форме, установка фокуса в поле формы или увод фокуса из нее, изменение введенного в поле значения, нажатие кнопки мыши, отпускание кнопки мыши, щелчок кнопкой мыши на объекте (ссылке, поле, кнопке, изображении и т.п.), двойной щелчок кнопкой мыши на объекте, перемещение указателя мыши, выделение текста в поле ввода или на странице и другие. Однако, некоторые изменения, происходящие на странице, не генерируют никаких событий; например: изменение значения в поле ввода не пользователем, а скриптом, изменение фона документа, изменение (скриптом) значения атрибута HREFссылки, а также изменение большинства других атрибутов HTML-контейнеров. Обо всех важных событиях и об их "перехвате" будет рассказываться далее в соответствующих лекциях.
Разные браузеры могут вести себя по-разному при возникновении событий. Рассмотрим следующий пример, позволяющий определить, в каком порядке вызываются обработчики событий при клике либо двойном клике мыши на ссылке или кнопке:
<SCRIPT>
function show_MouseDown() { rrr.innerHTML+='мышь нажали (MouseDown)<br>'; }
function show_Click() { rrr.innerHTML+='клик мыши (Click)<br>'; }
function show_MouseUp() { rrr.innerHTML+='мышь отжали (MouseUp)<br>'; }
function show_DblClick() { rrr.innerHTML+='двойной клик (DblClick)<br>'; }
</SCRIPT>
<A HREF="javascript:void(0);"
onMouseDown="show_MouseDown();" onClick="show_Click();"
onMouseUp="show_MouseUp();" onDblClick="show_DblClick();">Ссылка</A>
<INPUT TYPE=button VALUE="Кнопка"
onMouseDown="show_MouseDown();" onClick="show_Click();"
onMouseUp="show_MouseUp();" onDblClick="show_DblClick();">
<BR><SPAN ID="rrr"></SPAN>
Пример 3.2. Слежение за событиями Click и DblClick (html, txt)
Проверьте работу этой странички в Вашем браузере. При одиночном клике на ссылке или кнопке события возникают в порядке: MouseDown, MouseUp, Click, что логично. При двойном же клике последовательность происходящих событий в разных браузерах разная:
в браузере Mozilla Firefox 3.08:
MouseDown, MouseUp, Click, MouseDown, MouseUp, Click, DblClick
в браузере Internet Explorer 7.0:
MouseDown, MouseUp, Click, MouseUp, DblClick
Как видим, в Mozilla Firefox последовательность событий более логична - она состоит из двух последовательностей событий, отвечающих одиночному клику, и далее событие двойного клика. Вы можете написать чуть более изощренный скрипт, показывающий, что в IE7 действительно не происходит второго события Click при двойном клике мышью.