Обработчики событий

Основы JavaScript

Основные области использования JavaScript:

· Создание динамических страниц, т.е. страниц, содержимое которых может меняться после загрузки.

· Проверка правильности заполнения пользовательских форм.

· Решение "локальных" задач с помощью сценариев.

JavaScript позволяет создавать приложения, выполняемые на стороне клиента, т.е. эти приложения выполняются браузером на компьютере пользователя.

Программы (сценарии) на этом языке обрабатываются встроенным в браузер интерпретатором. К сожалению, не все сценарии выполняются корректно во всех браузерах, поэтому необходимо тестировать javascript-программы в различных браузерах.

Язык JavaScript регистрозависимый, т.е. заглавные и прописные буквы алфавита считаются разными символами.

Переменные

JavaScript позволяет объявить переменную двумя способами:

С помощью ключевого слова var, например, var x; или var x = 21;.

Просто присваиванием переменной значения, например x = 21;

В javascript определены следующие операции:

+,-,*,/

% остаток от деления целых чисел

++ увеличение значения операнда на единицу

-- уменьшение значения операнда на единицу

Для того, чтобы можно было сравнивать два значения в javascript определены операции сравнения, результатом которых может быть только логическое значение: true или false:

< меньше

<= меньше или равно

== равно

!= не равно

>= больше или равно

> больше

В javascript определены логические операции:

&& - логическое И,

|| - логическое ИЛИ,

! - логическое НЕ.

Размещение javascript-кода:

Javascript-код может быть размещен как на самой странице, так и во внешнем файле.

1. Javascript-код на странице

Сценарии, написанные на языке javascript, могут располагаться на самой html-странице между тегами <script></script>, которые в свою очередь обычно находятся в тегах <head></head>. У тега <script> должен быть указан параметр language, который и указывает язык написания скрипта:

<html>

<head>

<title>Заголовок документа</title>

</head> <body> </body> </html>

2. Javascript-код во внешнем файле

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

</body>

</html>

Обработчики событий

Пример первой программы:

<html>

<head>

<title>Заголовок документа</title>

document.write("Моя первая страница.");

</script>

</head>

<body>

</body>

</html>

Как работает скрипт? Браузер читает нашу html-страницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция):

При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:

На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д.

Все объекты имеют методы (отделяются от объекта точкой), например:

document.write позволяет писать текст в текущую страницу,

window.open открывает новое окно браузера.

Также объекты имеют свойства, например:

document.bgcolor содержит значение фонового цвета текущей страницы,

document.title содержит заголовок страницы.

Все инструкции программного кода заканчиваются точкой с запятой. Об этом надо помнить.

Сценарий, который мы написали, выполнился немедленно после загрузки страницы. Однако в большинстве случаев нам нужно, чтобы сценарий выполнялся после каких-либо действий пользователя: нажатия на кнопку или ввода текста. Т.е. в ответ на пользовательское событие.

Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:

Здесь Click - событие (щелчок по td), onClick - обработчик события, addText() - имя функции, которая сработает при возникновении этого события (щелчка по td).

Перечислим события, которые поддерживаются javascript.

Blur потеря объектом фокуса onBlur

Change пользователь изменяет значение элемента onChange

Click пользователь щелкает мыщью по объекту onClick

DblClick пользователь делает двойной щелчок мышью по объекту onDblClick

DragDrop пользователь перетаскивает мышью объект onDragDrop

Error возникновение javascript-ошибки onError

Focus окно или элемент формы получает фокус onFocus

KeyDown пользователь нажимает клавишу клавиатуры onKeyDown

KeyPress пользователь удерживает нажатой клавишу клавиатуры onKeyPress

KeyUp пользователь отпускает клавишу клавиатуры onKeyUp

Load документ загружается в браузер onLoad