2. Практическая часть

Примеры кода на javascript с описанием выполняемых действий:

Как заменить выделенный текст в TEXTAREA на другой?

obj.focus();

if (document.selection)

{

var s = document.selection.createRange();

if (s.text)

{

eval("s.text="+cbFunc+"(s.text);");

s.select();

return true;

}

}

else if (typeof(obj.selectionStart)=="number")

{

if (obj.selectionStart!=obj.selectionEnd)

{

var start = obj.selectionStart;

var end = obj.selectionEnd;

eval("var rs = "+cbFunc+"(obj.value.substr(start,end-start));");

obj.value = obj.value.substr(0,start)+rs+obj.value.substr(end);

obj.setSelectionRange(end,end);

}

return true;

}

return false;

}

Как переместить (установить) текстовый курсор в начало или конец поля ввода textarea или input?

function moveCaretToStart(inputObject)

{

if (inputObject.selectionStart)

{

inputObject.setSelectionRange(0,0);

inputObject.focus();

}

}

function moveCaretToEnd(inputObject)

{

if (inputObject.selectionStart)

{

var end = inputObject.value.length;

inputObject.setSelectionRange(end,end);

inputObject.focus();

}

}

Запрет выделения текста

document.onmousedown=function(){return false}

или

<body style="-moz-user-select: none">

Генерация случайного числа (Javascript random, аналог PHP функции rand)

Math.floor( Math.random( ) * (n+1) )

3. Задания для практического выполнения

1. Написать скрипт «Tip of the Day» (совет дня). Скрипт должен выводить случайную строку («совет») из заданного массива строк. Скрипт разместить во внешнем файле, подключить его на все страницы вашего сайта.

4. Содержание отчёта

1.Название и цель работы

2. Выполненное практическое задание

3. Вывод о проделанной работе

5. Контрольные вопросы

1. Что такое язык javascript?

2. Назовите два способа подключения скриптов к HTML документу.

3. Назовите несколько операторов языка javascript.

4. Синтаксис javascript.

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

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

1. Теоретический материал

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

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

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

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

2. Определение квантификатора как нежадного (ленивого) - большинство реализаций позволяют это сделать, добавив после него знак вопроса.

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

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

Квантификатор	Описание
*?	«не жадный» эквивалент *
+?	«не жадный» эквивалент +
{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