- •Лекции по JavaScript Что такое javascript?
- •Среда разработки программ JavaScript
- •Что умеет javascript?
- •Переменные
- •Типы переменных
- •Массивы Создание
- •Аргументы
- •Описание, примеры
- •Методы объекта Array
- •Многомерные массивы
- •Объект Boolean
- •Объект Number
- •Объект Math
- •Объект String
- •Основы работы со строками
- •Использование кавычек
- •Встроенные функции
- •Строки и числа
- •Преобразование «Число → строка»
- •Преобразование «Строка → число»
- •Объект Date
- •Объект Global
- •Операторы и операции Операторы Javascript
- •Оператор break
- •Оператор comment
- •Оператор continue
- •Перебор свойств, кроме унаследованных
- •Оператор function
- •Оператор if...Else
- •Оператор return
- •Оператор var
- •Оператор while
- •Оператор with
- •Логические операторы
- •Операции сравнения
- •Арифметические операции
- •Битовые операции
- •Логические операции
- •Строковые операции
- •Операции присваивания
- •Прочие операции Условная операция
- •Операция запятая
- •Операция delete
- •Операция in
- •0 In langs // возвращает true
- •4 In langs // возвращает false Операция instanceof
- •Операция new
- •Операция this
- •Операция typeof
- •Операция void
- •Порядок выполнения операций
- •Функции
- •Функции - объекты
- •Области видимости
- •Параметры функции
- •Работа с неопределенным числом параметров
- •Пример передачи функции по ссылке
- •Пример использования:
- •Сворачивание параметров в объект
- •Объекты, свойства и методы Основные понятия
- •Объект JavaScript
- •Создание объектов с помощью инициализатора
- •Создание объектов с помощью конструктора
- •Создание методов
- •Изменение прототипа объекта
- •Удаление объектов
- •Вывод информации в строку состояния
- •Объект location
- •Проигрывание wav-файлов
- •Плавное изменение цвета фона документа html
- •Объект window.
- •Динамическое изменение страницы
- •Прокручивание документа
- •Параметры
- •Закрывающий тег
- •Аргументы
- •Значение по умолчанию
- •Параметр alt Описание
- •Значение по умолчанию
- •Параметр value Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •События
- •Когда использовать
- •Через свойство объекта
- •Основные события javascript
- •If (условие)
- •Способы открытия нового окна с помощью js
- •Модальное окно
- •X: 1, // добавляем свойство
- •Установка веб-сервера Apache и средств программирования под Windows
- •Что такое хостинг и где взять место под страницу.
- •Объектная Модель. Детали.
- •Языки на базе классов и языки на базе прототипов
- •Определение класса
- •Подклассы и наследование
- •Добавление и удаление свойств
- •Отличия. Резюме.
- •Пример Employee
- •Создание иерархии
- •Свойства объекта
- •Наследование свойств
- •Добавление свойств
- •Более гибкие конструкторы
- •И снова о наследовании свойств
- •Локальные и наследуемые значения
- •Определение взаимоотношений экземпляров
- •Глобальная информация в конструкторах
- •Нет множественного наследования
События
Событие - это какое-либо действие, осуществляемое пользователем либо браузером. Например, когда мы щелкаем (кликаем) на ссылке - осуществляется событие, его перехватывает специальный обработчик и перенаправляет нас на нужную страницу; при наведении курсора (указателя мыши) на ссылку в строке состояния (обычно находится в нижней части окна браузера) отображается адрес, так как обработчик "наведения курсора на объект (в данном случае на ссылку)" помещает туда этот адрес и так далее…
Следует различать события генерируемые, как пользователем (щелчок или движение мыши, изменение данных формы), так и браузером (окончание загрузки документа, закрытие страницы, ошибка и т. п.).
Каждое событие имеет свое имя, к примеру: щелчок - click, перемещение курсора за определенный объект - mouseout, получение фокуса (щелчок мыши на объекте, или переход к нему при помощи клавиши табуляции (Tab)) - focus, отправка формы - submit, сброс формы - reset, загрузка страницы - load, возникновение ошибки - error и т. д. Обработчик события имеет имя следующего образца: on + имя_события. Например: onClick, onMouseOut, onFocus, onSubmit, onReset, onLoad...
На многие события можно реагировать с помощью JavaScript. Здесь мы разберем основные события и примеры их применения
Таблица. События элемента <INPUT>
Событие |
Описание |
onblur |
Генерируется при потере элементом управления фокуса |
onclick |
Генерируется при щелчке на элементе управления |
onchange |
Генерируется при изменении содержимого объекта, например, текста в поле ввода |
ondblclick |
Генерируется при двойном щелчке на элементе управления |
onf ocus |
Генерируется при получении фокуса элементом управления |
onhelp |
Генерируется, когда пользователь нажмет клавишу <F1> и/( выберет команду Справка в меню браузера |
onkeydown |
Генерируется, когда клавиша нажата |
onkeypress |
Генерируется при нажатии клавиши |
onkeyup |
Генерируется, когда клавиша отпущена |
onmousedown |
Генерируется при щелчке мышью по элементу управления |
onmousemove |
Генерируется при перемещении указателя мыши над элеме|| том управления |
onmouseout |
Генерируется при покидании указателя мыши элемента ления |
onmouseover |
Генерируется, когда указатель мыши находится над элементе управления |
onmouseup |
Генерируется при отпускании кнопки мыши |
onresize |
Генерируется при изменении размеров элемента управления |
onselect |
Генерируется при изменении текущего выбора, например, выборе нового элемента в списке |
Для того, чтобы скрипт реагировал на событие - нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют "on+имя события", например:onclick.
Нужно сразу отметить, что JavaScript - однопоточный язык, поэтому обработчики всегда выпоняются последовательно и в общем потоке. Это значит, что при установке обработчиков двух событий, которые возникают на элементе одновременно, например mouseover (мышь появилась над элементом) и mousemove (мышь двигается над элементом), их обработчики будут выполнены последовательно.
Существует несколько способов назначать обработчик на конкретное событие элемента. Все они представлены ниже.
Обработчик события можно указать в виде inline-записи, прямо в атрибуте onсобытие.
Например, для обработки события click на кнопке input, можно назначить обработчик onclick вот так:
<input id="b1" value="Нажми Меня" onclick="alert('Спасибо!'); " type="button"/>
Этот код в действии:
Можно назначить и функцию.
Например, пусть при клике на кнопку input запускается функция count_rabbits(). Для этого запишем вызов функции в атрибут onclick:
<html>
<head>
<script type="text/javascript">
function count_rabbits() {
for(var i=1; i<=3; i++) {
// оператор + соединяет строки
alert("Из шляпы достали "+i+" кролика!")
}
}
</script>
</head>
<body>
<input type="button" onclick="count_rabbits()" value="Считать кролей!"/>
</body>
</html>
Напомним, что имена атрибутов HTML-тегов нечувствительны к регистру, поэтому атрибут oNcLiCk сработает также, как onClick или onclick.
Но если вы хотите придерживаться хорошего стиля (или спецификации XHTML), то имена тегов и их атрибуты должны быть указаны в нижнем регистре.