Введение в Web-технологии

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

Показывать лекцию целиком

Обработка событий в 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>

    Таким образом, для того чтобы обработать какое-либо стандартное событие в браузере, необходимо добавить в подходящий 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 Да

    Регулярные выражения

    Регулярные выражения — система поиска текстовых фрагментов в электронных документах, основанная на специальной системе записи образцов для поиска.

    Образец, задающий правило поиска, называется "шаблоном". Применение регулярных выражений принципиально преобразило технологии электронной обработки текстов.

    С помощью регулярных выражений можно задавать структуру искомого шаблона и его позицию внутри строки (например, в начале или в конце строки, на границе или не на границе слова).

    При описании структуры шаблона используются:

  • гибкая система квантификаторов (операторов повторения);
  • операторы описания наборов символов и их типа (числовые, нечисловые, специальные).
    •

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

    Представление Позиция
    ^ Начало строки
    $ Конец строки
    \b Граница слова
    \B Не граница слова
    (?=шаблон) Искомая строка следует после указанной строкой (с просмотром вперед)
    (?!=шаблон) Искомая строка не следует после указанной строки (с просмотром вперед)
    (?<=шаблон) Искомая строка следует после указанной строкой (с просмотром назад)
    (?<!=шаблон) Искомая строка не следует после указанной строки (с просмотром назад)

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

    Представление Число повторений
    { n } Ровно n
    { m, n } От m до n включительно
    { m,} Не менее m
    {, n } Не более n

    Имеются и более простые квантификаторы:

    Представление Число повторений Эквивалент
    * Ноль или более { 0,}
    + Одно или более { 1,}
    ? Ноль или одно { 0, 1 }

    Для задания внутри шаблона группы символов можно использовать следующие операторы:

    Оператор Описание
    [xyz] Любой символ из указанного множества
    [^xyz] Любой символ не входящий в указанное множество
    [x-z] Любой символ из указанного диапазона
    [^x-z] Любой символ не входящий в указанный диапазон
    . ( точка ) Любой символ кроме символов разрыва или переноса строки
    \w Любой буквенно-цифровой символ, включая символ подчеркивания
    \W Любой не буквенный символ
    \d Любая цифра
    \D Любой нецифровой символ
    \s Любой неотображаемый символ
    \S Любой символ (кроме неотображаемых символов)

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

    Оператор Описание
    ( ) Поиск группы символов внутри скобок и сохранение найденного соответствия
    (?: ) Поиск группы символов внутри скобок без сохранения найденного соответствия
    | Комбинирование частей в одно выражения с последующим поиском любой из частей в отдельности. Аналогично оператору "ИЛИ".

    Если шаблон поиска включает специальные (как правило неотображаемые) символы, для их описания можно использовать следующие обозначения:

    Обозначение Описание
    \0 Символ с нулевым кодом
    \n Символ новой строки
    \r Символ начала строки
    \t Символ табуляции
    \v Символ вертикальной табуляции
    \xxx Символ, имеющий заданный восьмеричный ASCII код xxx
    \xdd Символ, имеющий заданный шестнадцатиричный ASCII код dd
    \uxxxx Символ, имеющий ASCII код выраженный ЮНИКОДОМ xxxx

    Квантификаторам в регулярных выражениях соответствует максимально длинная строка из возможных (т.е. квантификаторы являются "жадными"). Это может приводить к некоторым проблемам. Например, шаблон ( <.*> ) описывающий на первый взгляд теги HTML на самом деле будет выделять более крупные фрагменты в документе.

    Например, строка вида

    <p>
  <font color='blue'>
  <i>Регулярные выражения<i>
  </font> 
  - удобный инструмент для поиска в строках 
</p>

    формально соответствует указанному выше шаблону

    Для решения данной проблемы можно использовать два подхода.

  • В регулярном выражении учитываются символы, не соответствующие желаемому образцу (например, <[^>]*> для вышеописанного случая).
  • Определение квантификатора как нежадного (ленивого) - большинство реализаций позволяют это сделать, добавив после него знак вопроса.
    •

    Например, по шаблону ( <.*?> ) будут найдены все теги из рассмотренной строки.

    Таким образом, получаются следующие "нежадные" модификации квантфикаторов:

    Модификатор Описание
    *? "не жадный" эквивалент *
    +? "не жадный" эквивалент +
    {n,}? "не жадный" эквивалент {n,}

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

    Использование регулярных выражений в JavaScript

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

    Следующий ниже код описывает RegExp объект с именем pttn, содержащий регулярное выражение, описывающее целое десятичное число:

    var pattn = new RegExp("/[0-9]+/");

    Объект RegExp имеет 3 встроенных метода: test(), exec() и compile().

  • Метод test() выполняет поиск по шаблону:
    var pattn = new RegExp("[0-9]+");
document.write(pattn.test("38 попугаев"));

    Результат:

    true
  • Метод exec() выполняет поиск подстроки по шаблону и возвращает найденные соответствия; если соответствий нет, возвращается значение null:
    var pattn=new RegExp("[0-9]+");
document.write(pattn.exec("38 попугаев"));

    Результат:

    38

    Если необходимо найти все соответствия, то при вызове конструктора RegExp следует указать дополнительный параметр "g", указывающий на необходимость глобального поиска:

    var pattn = new RegExp("[0-9]+", "g");
do
{
result  = pattn.exec("1 попугай, 2 попугая,…, 38 попугаев");
document.write(" " + result);
}
while (result != null)

    Результат:

    1 2 38 null
  • Метод compile() применяется для изменения ранее созданного шаблона:
    var pattn = new RegExp("[0-5]+");
document.write(pattn.exec("38 попугаев"));
pattn.compile("[6-9]+");
document.write(";" + pattn.exec("38 попугаев"));

    Результат:

    3;8
    •

    Порядок выполнения работы

    Проверка значений, введенных пользователем в поля формы для регистрации.

  • Для выполнения лабораторной работы необходимо создать веб-страницу, содержащую форму с полями, следующего вида:
  • В тэге <form> добавьте обработчик события отправки данных вида:
    onSubmit = "CheckData(); return false;"
    В данном случае указана функция обработчик CheckData(). Оператор return false; предотвращает автоматическую отправку данных после выполнения функции-обработчика. Отправка данных будет выполняться из обработчика.
  • Добавьте на странице секцию JavaScript кода, описывающего функцию-обработчик:
    function CheckData()
{
  var ans;
  ans = confirm("Вы уверены, что хотите отправить введенные данные ?");
  if (ans) submit();
}
    Как это видно из кода, функция CheckData() в случае подтверждения со стороны пользователя самостоятельно вызывает метод submit() для передачи данных из формы.
  • Теперь необходимо добавить проверку значений, введенных в поля формы пользователем.

    Прежде всего, необходимо убедиться в том, что заполнены все поля, обязательные для ввода. Для этого можно использовать проверку на равенство нулю длины строки (свойство length ), являющейся значением узла дерева документа, соответствующего полю ввода, например:

    document.getElementById("uname").value.length.

    Следующая проверка должна контролировать структуру и содержимое полей. Для этого можно использовать объект RegExp, например:

    var validEMail, pattn;

pattn = new RegExp("^[\.\-_A-Za-z0-9]+?@[\.\-A-Za-z0-9]+?\.[A-Za-z0-9]{2,6}$");
  
validEMail = pattn.test(document.getElementById("email").value));

    В данном фрагменте описана проверка структуры электронного адреса из поля формы с идентификатором "email". Для проверки был использован шаблон на основе регулярного выражения.

    •

    Контрольное задание

    Самостоятельно постройте регулярное выражение, описывающее шаблон для проверки номера телефона, и внесите все необходимые изменения и дополнения в функцию CheckData().

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^