javascript Базовый. Занятие 05

Темы лекции: Регулярные выражения. События.

Практическое задание: Регулярные выражения. События.

Тренер: Игорь Шкулипа, к.т.н.

JavaScript. Базовый курс

Занятие 5

http://www.slideshare.net/IgorShkulipa 2

События (events)

http://www.slideshare.net/IgorShkulipa


DHTML

DHTML (динамический HTML) – это набор средств, которые позволяютсоздавать более интерактивные Web-страницы без увеличениязагрузки сервера. Другими словами, определенные действияпосетителя ведут к изменениям внешнего вида и содержания страницыбез обращения к серверу.

DHTML построен на объектной модели документа (Document Object Model,DOM), которая расширяет традиционный статический HTML-документ.DOM обеспечивает динамический доступ к содержимому документа,его структуре и стилям. В DOM каждый элемент Web-страницыявляется объектом, который можно изменять. DOM не определяетновых тэгов и атрибутов, а просто обеспечивает возможностьпрограммного управления всеми тэгами, атрибутами и каскаднымилистами стилей (CSS).



События DHTML

На WEB-страницах можно обеспечить реакцию на определенные действияпосетителя или изменения состояния документа или окна, которыевызывают определенные события.

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

Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии поумолчанию.

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



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

Обработчики событий - это функции, которые могут быть привязаны кэлементам HTML страниц.

Код событий выполнится только после того, как произойдет ихактивирующее действие. Разные типы событий имеют разныеактивирующие действия.

Примеры активирующих действий JavaScript:

• Щелчок мыши (событие onclick);• Нажатие клавиши (onkeypress);• Отправление формы (onsubmit);• Наведение курсора мыши на элемент (onmouseover) или

выведение курсора мыши за пределы границ элемента(onmouseout);

• Полная загрузка страницы или картинки (onload);• Изменение содержимого элемента, например содержимого

текстового поля формы (onchange).



Связывание событий

Установление связи между определенным событием и сценариемназывается связыванием событий. События можно связать с помощьюспециальных атрибутов любого элемента или с помощью тэгаSCRIPT.

Связывание событий с атрибутами удобно, но требует расширения языкаHTML каждый раз при изобретении нового события. А так как HTMLразвивается медленно, данный подход используется только длянебольшого набора встроенных событий. Как атрибуты любогоэлемента в DHTML представлены события мыши и клавиатуры.



События мыши

• OnMouseOver. Перемещение указателя мыши на элемент.• OnMouseOut. Перемещение указателя мыши за пределы элемента.• OnMouseDown. Нажатие любой кнопки мыши. Внутри обработчика event.button

указывает, какая кнопка нажата: 1 = левая, 2 = правая, 4 = средняя.• OnMouseUp. Отпускание любой кнопки мыши.• OnMouseMove. Перемещение указателя мыши. Внутри обработчика event.x и

event.y - текущие координаты курсора на экране.• OnClick. Щелчок левой кнопкой мыши на элементе или нажатие <Enter> при

каком-то элементе в фокусе.• OnDblClick. Двойной щелчок левой кнопкой мыши на элементе.• OnDragStart. Запуск операции перетаскивания. Цель – запретить операцию

перетаскивания путем возвращения значения false.• OnSelectStart. Запуск операции выделения элемента. Цель – запретить

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

• OnSelectStart всплывающее, поэтому можно перехватить его и вернутьзначение false. Это лишит посетителя возможности выделять текст на странице.

• OnSelect. Выделение элемента. Следует за OnSelectStart и возникает многораз по мере того, как посетитель расширяет или сужает выделение. СобытиеOnSelect не всплывает. Оно возникает лишь в том разделе документа, гдепроисходит выделение.



События клавиатуры

• OnKeyPress. Нажатие и отпускание клавиши. Событие возникаетмного раз, если клавиша удерживается.

• OnKeyDown. Нажатие клавиши. Событие возникает один раз, дажеесли клавиша продолжает удерживаться.

• OnKeyUp. Отпускание клавиши.

Событие прокручивания

• OnScroll. Использование полосы прокрутки или прокручиваниеэлемента неявно посредством другого действия Не может отменитьпрокручивания, так как возникает после завершения прокручивания.Не всплывает.

События фокуса

• OnFocus. Возникает, когда элемент активизируется после щелчка понему мышью или с помощью клавиатуры. Фокус могут получить толькоэлементы пользовательского ввода и тело документа, а не элементысодержания документа.

• OnBlur. Возникает, когда элемент теряет фокус. Используется дляконтроля корректности ввода.



События формы

• OnChange. Возникает при любых изменениях в форме. Для текстового поля этоввод или удаление. Для списка – выбор нового элемента. Так же, как и OnBlurиспользуется для контроля корректности ввода.

• OnSubmit. Возникает перед отправкой содержимого формы на сервер. Основноеназначение – проверка корректности введенных данных. Отмена передачиданных происходит при возвращении значения false.

• OnReset. Возникает после щелчка на кнопке Reset. Назначение – выводпредупреждения о сбросе.

События документа

• OnLoad. Возникает после считывания, но до отображения страницы.Используется для отображения заставки, проверки права доступа и другиходнократных действий при инициализации страницы.

• OnUnload. Возникает при выгрузке страницы. Используется для освобождениякаких-либо ресурсов и вывода дополнительных сообщений.

• OnAbort. Возникает при срыве загрузки графического объекта.• OnError. Возникает лишь при неудачной загрузке графического элемента или

всей WEB-страницы.

Событие помощи

• OnHelp. Запрос файла справки с использованием клавиши <F1>. Не возникаетпри выборе пункта Help из меню Help.



Объект event

Объект event служит для получения информации о событии. Свойства объектаevent:

• srcElement. Элемент, который первым сгенерировал событие. Имя тэгаэтого элемента можно определить с помощью свойства tagName.

• cancelBubble. Используется для прекращения всплывания события вверхпо иерархии контейнеров. По умолчанию равно false и событие всплывает.Установка значения true останавливает всплывание текущего события.

• returnValue. Используется для отмены действия по умолчанию. Для этогонужно установить значение false. Ключевое слово return в JavaScriptобновляет значение event.returnValue при возвращении управлениябраузеру.

• type. Определение события. Имя события возвращается в нижнем регистребез префикса on.

• button. Состояния кнопок мыши во время события.• clientX, clientY. Координаты указателя мыши относительно клиентской

области окна.• offsetX, offsetY. Координаты указателя мыши относительно контекста

воспроизведения.• screenX, screenY. Координаты указателя мыши относительно экрана.• altKey. Состояние клавиши «Alt»(true/false).• ctrlKey. Состояние клавиши «Ctrl»(true/false).• shiftKey. Состояние клавиши «Shift» (true/false).• keyCode. ASCII-код нажатой клавиши.



Состояния кнопок мыши во время события

Свойство event.button принимает следующие значения:

0 Кнопки не нажаты

1 Нажатие левой кнопки

2 Нажатие правой кнопки

3 Нажатие левой и правой кнопок

4 Нажатие средней кнопки



Способы связывания событий с обработчиками

• Через атрибут HTML-тега

• Через свойство объекта

• Решение от Microsoft attachEvent/detachEvent

• Установка по стандарту W3C



Через атрибут HTML-тега

<input id="button1" type="button" value=“Push Me”

onclick="alert('Event Handled!');" />

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

У этого способа установки обработчика есть и минусы. Кактолько обработчик начинает занимать больше одной строки -читабельность резко падает.



Через свойство объекта

<input id="button1" type="button" value="Push Me" />

<script type="text/javascript">

document.getElementById('button1').onclick = function () {

alert('Event Handled!')

}

</script>

Такая установка обработчика через свойство - оченьпопулярный и простой способ.

У него есть один недостаток: на элемент можно повеситьтолько один обработчик нужного события.



Решение от Microsoft attachEvent/detachEvent

Методы, предложенные Microsoft, работают только в браузерах InternetExplorer и Opera (она поддерживает метод Microsoft для лучшейсовместимости).

На данный момент, метод attachEvent устарел и не поддерживается.Microsoft рекомендует использовать addEventListener.



var button = document.getElementById("button1");

var handler = function () {


}

button.attachEvent("onclick", handler);

...

button.detachEvent("onclick", handler);

</script>



Установка по стандарту W3CРешение W3C работает во всех современных браузерах, кроме старых версий

Internet Explorer.






}

button.addEventListener("click", handler, false);

</script>

Третий параметр метода – фаза. Если он установлен в true, то при срабатываниисобытия во вложенном элементе, обработчик будет вызван на фазе "перехвата",а если значение будет false, то - на фазе "всплывания".

При обычной установке обработчика третий параметр всегда должен быть false.



Установка нескольких обработчиков






}

var handler2 = function () {

alert('Event Handled Again!')

}


button.addEventListener("click", handler2, false);

</script>



Удаление обработчиков





}

var handler2 = function () {

alert('Event Handled Again!')

}


button.addEventListener("click", handler2, false);

button.removeEventListener("click", handler, false);

</script>



Действия браузера по умолчанию

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

Если логика работы обработчика требует отменить действие браузера —это возможно.



Отмена действия браузера

Первый способ — это воспользоваться объектом события. Для отменыдействия браузера существует стандартный методevent.preventDefault(), а для IE<9 нужно назначить свойствоevent.returnValue = false.

element.onclick = function(event) {

event = event || window.event

if (event.preventDefault) {

event.preventDefault();

} else { // IE<9

event.returnValue = false;

}

}




Второй способ - если обработчик назначен через on..., то return false изобработчика отменяет действие браузера:

element.onclick = function(event) {

...

return false;

}

Такой способ проще, но не будет работать, если обработчик назначен через addEventListener/attachEvent.




Третий способ – переопределение некоторых обработчиков событийбраузера.



Динамическое содержание

Содержание HTML-документа можно менять после загрузки страницы.

Свойства динамического содержания:

• innerText. Содержащийся внутри элемента текст без тэгов. Приустановке нового значения все HTML-тэги выводятся как текст.

• innerHTML. Содержащийся внутри элемента текст вместе свнутренними тэгами. При установке нового значения все HTML-тэги интерпретируются браузером.

• outerText. Содержащийся внутри элемента текст без тэгов. Приустановке нового значения меняется весь элемент, включаявнешние тэги.

• outerHTML. Весь элемент, включая внешние тэги. При установкенового значения все HTML-тэги интерпретируются браузером.

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



Пример динамического содержания

<html>

<head>

<meta http-equiv=Content-Type content="text/html; charset=windows-1251">

</head>

<body>

<p onmousedown="this.innerText='<br/>innerText';">innerText</p>

<p onmousedown="this.innerHTML='<br/>innerHTML';">innerHTML</p>

<p onmousedown="this.outerText='<br/>outerText';">outerText</p>

<p onmousedown="this.outerHTML='<br/>outerHTML';">outerHTML</p>

</body>

</html>



Методы Adjacent

Есть еще два метода для вставки содержания:

• insertAdjacentText. Вставка текста.• insertAdjacentHTML. Вставка HTML.

Оба метода Adjacent имеют по два аргумента:

• место вставки и• содержание.

Место вставки определяется ключами:

beforeBeginДо открывающего внешнего тэга элемента

afterBegin После открывающего тэга до содержимого элемента

beforeEndДо закрывающего тэга после содержимого элемента

afterEndПосле закрывающего тэга элемента

<p

onmousedown="insertAdjacentHTML('

beforeBegin','<br/>beforeBegin');

">beforeBegin</p>

<p


afterBegin','<br/>afterBegin');">

afterBegin</p>

<p


beforeEnd','<br/>beforeEnd');">be

foreEnd</p>

<p


afterEnd','<br/>afterEnd');">afte

rEnd</p>



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

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

Пример:

var emailExpression =

“([.\\-_a-z0-9]+)@([a-z0-9][\\-a-z0-9]+\\.)+[a-z]{2,6}";

Ссылка на справочник по языку регулярных выражений Microsofthttp://msdn.microsoft.com/ru-ru/library/az24scfc.aspx


http://msdn.microsoft.com/ru-ru/library/az24scfc.aspx


Объект RegExp

Объект типа RegExp, задает регулярное выражение в JavaScript. Крометого, регулярное выражение можно создать двумя путями:

/pattern/флаги

new RegExp("pattern"[, флаги])

• pattern - регулярное выражение для поиска,• флаги - строка из любой комбинации следующих символов:

• g - глобальный поиск• i - регистр неважен• m - многострочный поиск

Первый способ используется часто, второй - иногда. Например, два такихвызова эквивалентны:

var reg = /ab+c/i

var reg = new RegExp("ab+c", "i")



Проверка результатов

Метод test возвращает true/false, в зависимости от того подходит листрока под регулярное выражение

if ( /\w/.test("строка") ) {

...В строке есть любые словесные (латинские)

символы, включая буквы, цифры и знак

подчеркивания.!...

}



Поиск совпадений

Метод exec возвращает массив и ставит свойства регулярноговыражения. Если совпадений нет, то возвращается null.

var regex= /w/ig;

var result = regex.exec("asd 123");



Поиск совпадений

• Метод search(regexp) - возвращает индекс регулярного выражения встроке, или -1.

• Метод match(regexp) - если в regexp нет флага g, то возвращает тотже результат, что regexp.exec(string). Если в regexp есть флаг g, товозвращает массив со всеми совпадениями.



Замена

Метод replace может заменять вхождения регулярного выражения нетолько на строку, но и на результат выполнения функции.

var newString = str.replace(regexp/substr, newSubStr/function)

• regexp - объект RegExp. Его вхождения будут заменены на значение,которое вернет параметр номер 2

• substr - строка, которая будет заменена на newSubStr.

• newSubStr - строка, которая заменяет подстроку из аргумента номер1.

• function - функция, которая может быть вызвана для генерации новойподстроки (чтобы подставить ее вместо подстроки, полученной изаргумента 1).

Метод replace не меняет строку, на которой вызван, а возвращает новую, измененную строку.



Пример. HTML<!DOCTYPE html> <html> <head>

<title>JavaScript Events and RegExp Example</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="css/site.css" type="text/css" />

<script type="text/javascript" src="js/scripts.js"> </script>

</head>

<body>

<div id="page">

<div id="head">

<div id="logo">

<img src="img/logo.png" height="94" width="100" alt=“logo">

</div>

<div id="title">JavaScript Events and RegExp Example</div>

</div>

<div class="main">

<div class="innermain">

<div id="menu" class="menu">

</div>

<div id="content" class="content">

</div>

</div>

</div>

<div id="foot">

<p onmouseover="this.className = 'pmouseover'"

onmouseout="this.className = 'pmouseout'">Move Closer to Change the Style</p>

</div>

</div>

</body>

</html>



Пример. CSS

.pmouseover {

color:magenta;

font-size:120%;

font-weight:bold;

}

.pmouseout {

color:#cccccc;

font-size:100%;

font-weight:normal;

}



Пример. Меню

<div id="menu" class="menu">

<a href="#" id="mi1" class="menuitem”

onclick="document.getElementById('content').insertAdjacentHTML

('afterBegin','<h1>Hello, DHTML Event!</h1>')">

DHTML Event

</a>

<a href="#" id="mi2" class="menuitem">ON Event</a>

<a href="#" id="mi3" class="menuitem">Attach Event</a>

<a href="#" id="mi4" class="menuitem">Add Event Listener</a>

<a href="#" id="mi5" class="menuitem">Add Text for RegExp</a>

<a href="#" id="mi6" class="menuitem">Find RegExp</a>

<a href="#" id="mi7" class="menuitem">Replace RegExp</a>

</div>



Пример. scripts.js. Текст и шаблон

var emailExpression =

"([.\\-_a-z0-9]+)@([a-z0-9][\\-a-z0-9]+\\.)+[a-z]{2,6}";

var text = "<p>Lorem ipsum dolor sit amet,

<strong>[email protected]</strong> consectetur adipiscing elit. In

posuere, elit ut tristique condimentum, lectus est sodales nibh, sed

adipiscing velit <strong>[email protected]</strong> lectus vel felis.

Praesent id urna ut quam dapibus sollicitudin sit amet et mi. Quisque in

magna nisi, in scelerisque mi <strong>[email protected]</strong>!

Vestibulum suscipit lacinia tempor. Donec euismod massa sit amet tellus

consectetur dapibus. Donec nisl justo, egestas at mattis ut, sagittis eu

ipsum. Aliquam porttitor massa <strong>[email protected]</strong>

in.</p>";



Пример. Обработчики

var onEvent = function () {

document.getElementById("content").insertAdjacentHTML('beforeEnd',

'<h2>Hello, ON Event!</h2>');

}

var attachDetachEvent = function () {


'<h3>Hello, Attach Event!</h3>');

}

var addListenerEvent = function () {


'<h4>Hello, Listener Event!</h4>');

}

var addTextEvent = function () {

document.getElementById("content").innerHTML = text;

}



Пример. Поиск совпадений

var findRegExpEvent = function () {

var txt = document.getElementById("content").innerHTML;

var re = new RegExp(emailExpression, "gim");

var matches;

var newText = txt + "<p><ul>";

var myArray;

while ((matches = re.exec(txt)) != null) {

newText += "<li>" + matches[0] + "</li>";

}

newText += "</ul></p>";

document.getElementById("content").innerHTML = newText;

}



Пример. Замена

var findAndReplaceRegExpEvent = function () {

var txt = document.getElementById("content").innerHTML;

var re = new RegExp(emailExpression, "gim");

var newText = txt.replace(re, "$1");

document.getElementById("content").innerHTML = newText;

}



Пример. Отмена действий по-умолчанию

var unloadEvent = function ()

{

if (window.confirm("Are you sure?") == true) {

window.alert("That hurts me!");

} else {

window.alert("Yeah!");

return false;

}

}



Пример. Скрипт связывания


document.getElementById("mi2").onclick = onEvent;

var mi3 = document.getElementById("mi3");





mi4.addEventListener("click", addListenerEvent, false);

mi5.addEventListener("click", addTextEvent, false);

mi6.addEventListener("click", findRegExpEvent, false);

mi7.addEventListener("click", findAndReplaceRegExpEvent, false);

mi3.attachEvent("onclick", attachDetachEvent);

window.addEventListener("beforeunload", unloadEvent, false);

</script>



Пример. Результат



Пример. Результат. События



Пример. Результат. Добавление текса



Пример. Результат. Поиск совпадений



Пример. Результат. Замена



Пример. Результат. Переопределение событий



Лабораторная работа №2.

Дополнить веб-страницу с персональной информацией динамическимизменением информации на ней:

• Изменение стиля ФИО по наведению мышкой;• Показать/скрыть e-mail;• Изменить вид телефона с +380 12 345 67 89 на (012) 345-67-89 и

обратно с помощью регулярных выражений;• Другая активность страницы по желанию.


javascript Базовый. Занятие 05

Education