Спонсор: Microsoft
Воронежский государственный университет
Опубликован: 04.02.2009 | Доступ: свободный | Студентов: 8216 / 665 | Оценка: 4.14 / 3.78 | Длительность: 19:54:00
Самостоятельная работа 4:

Клиентские сценарии. Использование регулярных выражений

< Самостоятельная работа 3 || Самостоятельная работа 4: 123 || Лекция 4 >
Аннотация: Цель работы: получить представление об общих принципах обработки в JavaScript событий, связанных с окном веб-браузера, веб-страницей, содержащейся в браузере и элементами документа. Научиться использовать простейшие элементы регулярных выражений для поиска подстрок, структура и содержание которых описывается нетривиальным шаблоном.

Обработка событий в JavaScript

Популярность JavaScript во многом обусловлена именно тем, что написанный на нем сценарий может реагировать на действия пользователя и другие внешние события. Каждое из событий связано с тем или иным объектом: формой, гипертекстовой ссылкой или даже с окном, содержащим текущий документ.

В качестве примеров внешних событий, на которые могут реагировать объекты JavaScript, можно привести следующие.

  • окончание загрузки документа в окно (или окончание загрузки документов во все фреймы окна). Это событие связано с объектом window;
  • щелчок мышью на объекте. Это событие может быть связано с интерактивным элементом формы или с гипертекстовой ссылкой;
  • получение объектом фокуса ввода. Это событие может быть связано с объектами типа Text, Password и с другими интерактивными элементами;
  • передача на сервер данных, введенных пользователем с помощью интерактивных элементов. Связывается с формой.

Обработка события производится с помощью специально предназначенного для этого фрагмента кода, называемого обработчиком события. Для каждого события JavaScript предоставляет свой обработчик. Однако при построении сценария можно создавать собственный обработчик события и использовать его вместо обработчика, заданного по умолчанию.

Имя обработчика определяет, какое событие он должен обрабатывать. Так, для того чтобы сценарий нужным образом отреагировал на щелчок мышью, используется обработчик с именем onClick, для обработки события, заключающегося в получении фокуса ввода, - обработчик onFocus.

Для того чтобы указать интерпретатору JavaScript на то, что обработкой события должен заниматься обработчик, необходимо включить в HTML-дескриптор следующее выражение:

имя_обработчика="команды_обработчика"

Это выражение включается в тэг, описывающий объект, с которым связано событие.

Например, если необходимо обработать событие, заключающееся в получении фокуса полем ввода, дескриптор, описывающий этот интерактивный элемент, должен иметь примерно следующий вид:

<input type="text" name="Inform" onFocus="handleFocus();">

Имя обработчика является одним из атрибутов HTML-дескриптора, а команды, предназначенные для обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится в теле функции handleFocus(). В принципе, обработчиком может быть не только функция, но и любая последовательность команд JavaScript в виде составного оператора.

Следующий пример демонстрирует обработку события, связанного с наведением курсора мыши на гиперссылку:

<a href = "http://www.myhp.edu" 
   onmouseover="alert('An onMouseOver event'); return false">
   <img src="my.gif" width="50" height="50">
</a>

Ниже приводится полный текст HTML документа c JavaScript сценарием, в котором обрабатывается событие нажатия кнопки мыши, и определяется, какая именно из них была нажата:

<html>

  <head>
    <script language = "javascript">
      function whichButton(event)
       {
        if (event.button == 2)
         {
          alert("Вы щелкнули правой кнопкой мыши!");
         }
        else
         {
          alert("Вы щелкнули левой кнопкой мыши!");
         }
       }
    </script>
  </head>
  
  <body onmousedown="whichButton(event)">
    <p>Щелкните любой кнопкой мыши в любом месте документа</p>
  </body>

</html>
Пример 7.1.

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

IE: Internet Explorer, F: Firefox, O: Opera, W3C: стандарт
Атрибут Описание Номер версии браузера W3C
IE F O
onabort Прерванная загрузка изображения 4 1 9 Да
onblur утрата фокуса элементом 3 1 9 Да
onchange Изменение содержимого в поле ввода 3 1 9 Да
onclick Щелчок мыши на объекте 3 1 9 Да
ondblclick Двойной щелчок мыши на объекте 4 1 9 Да
onerror Ошибка при загрузке изображения или документа 4 1 9 Да
onfocus Получение фокуса элементом 3 1 9 Да
onkeydown Нажатие клавиши 3 1 Нет Да
onkeypress Клавиша нажата 3 1 9 Да
onkeyup Отжатие клавиши 3 1 9 Да
onload Завершение загрузки страницы или изображения 3 1 9 Да
onmousedown Нажатие кнопки мыши 4 1 9 Да
onmousemove Перемещение курсора мыши 3 1 9 Да
onmouseout Смещение курсора мыши с объекта 4 1 9 Да
onmouseover Наведение курсора мыши на объект 3 1 9 Да
onmouseup Отжатие кнопки мыши 4 1 9 Да
onreset Кнопка "Reset" нажата 4 1 9 Да
onresize Изменение размера окна 4 1 9 Да
onselect Выделение текста 3 1 9 Да
onsubmit Кнопка "Submit" нажата 3 1 9 Да
onunload Уход с веб-страницы 3 1 9 Да
< Самостоятельная работа 3 || Самостоятельная работа 4: 123 || Лекция 4 >
Михаил Олифиренко
Михаил Олифиренко
Александр Табачук
Александр Табачук

Это только у меня не работает кнопочка "Получить код DreamSpark"? Пишет "временно не доступно..." А когда заработает?