JavaScript – Урок 3. Обработчики событий

Давайте напишем нашу первую программу. Для этого сделаем исключение и поместим наш javascript-код на html-странице. Итак, откройте (или создайте) html-страницу и поместите в нее следующий код:

< html> < head> < title> Заголовок документа< /title> < link rel=" stylesheet" type=" text/css" href=" style.css" > < script language=" javascript" > document.write(" Моя первая страница." ); < /script> < /head> < body> < /body> < /html>

Откройте эту страницу в браузере, она выглядит так:

 

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

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

 

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

Все объекты имеют методы (отделяются от объекта точкой), например:
document.write позволяет писать текст в текущую страницу,
window.open открывает новое окно браузера.

Также объекты имеют свойства, например:
document.bgcolor содержит значение фонового цвета текущей страницы,
document.title содержит заголовок страницы.

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

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

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

< div onClick=" addText(); " > < /div>

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

Функции мы будем рассматривать в следующем уроке, а сейчас перечислим события, которые поддерживаются javascript. Запоминать их не следует, в дальнейшем можете просто обращаться к этой таблице.

 

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: