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

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

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

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

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

Занятие 5

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

События (events)

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

DHTML

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

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

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

События DHTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

События мыши

• 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 не всплывает. Оно возникает лишь в том разделе документа, гдепроисходит выделение.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Объект 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-код нажатой клавиши.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script type="text/javascript">

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

alert('Event Handled!')

}

</script>

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

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

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

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

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

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

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

<script type="text/javascript">

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

var handler = function () {

alert('Event Handled!')

}

button.attachEvent("onclick", handler);

...

button.detachEvent("onclick", handler);

</script>

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

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

Internet Explorer.

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

<script type="text/javascript">

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

var handler = function () {

alert('Event Handled!')

}

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

</script>

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

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

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

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

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

<script type="text/javascript">

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

var handler = function () {

alert('Event Handled!')

}

var handler2 = function () {

alert('Event Handled Again!')

}

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

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

</script>

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

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

<script type="text/javascript">

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

var handler = function () {

alert('Event Handled!')

}

var handler2 = function () {

alert('Event Handled Again!')

}

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

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

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

</script>

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

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

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

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

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

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

Первый способ — это воспользоваться объектом события. Для отменыдействия браузера существует стандартный метод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;

}

}

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

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

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

element.onclick = function(event) {

...

return false;

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

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

Методы Adjacent

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

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

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

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

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

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

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

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

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

<p

onmousedown="insertAdjacentHTML('

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

">beforeBegin</p>

<p

onmousedown="insertAdjacentHTML('

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

afterBegin</p>

<p

onmousedown="insertAdjacentHTML('

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

foreEnd</p>

<p

onmousedown="insertAdjacentHTML('

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

rEnd</p>

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

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

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

Пример:

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://www.slideshare.net/IgorShkulipa 27

Объект RegExp

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

/pattern/флаги

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

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

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

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

var reg = /ab+c/i

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

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

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

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

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

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

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

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

}

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

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

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

var regex= /w/ig;

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

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

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

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

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

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

Замена

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

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

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

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

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

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

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

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

Пример. 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>

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

Пример. CSS

.pmouseover {

color:magenta;

font-size:120%;

font-weight:bold;

}

.pmouseout {

color:#cccccc;

font-size:100%;

font-weight:normal;

}

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

Пример. Меню

<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>

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

Пример. 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>ivan.ivanov@gmail.com</strong> consectetur adipiscing elit. In

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

adipiscing velit <strong>address@mail.com</strong> lectus vel felis.

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

magna nisi, in scelerisque mi <strong>admin@mysite.com.ua</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>support@somedomain.info</strong>

in.</p>";

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

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

var onEvent = function () {

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

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

}

var attachDetachEvent = function () {

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

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

}

var addListenerEvent = function () {

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

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

}

var addTextEvent = function () {

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

}

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

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

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;

}

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

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

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;

}

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

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

var unloadEvent = function ()

{

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

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

} else {

window.alert("Yeah!");

return false;

}

}

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

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

<script type="text/javascript">

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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