PHP скрипт. Тестирование регулярных выражений (клиентская часть)

Владимир | | Ajax, PHP.

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

Сначала рассмотрим клиентскую часть. Для нашего приложения нужна одна html страница с формой для ввода данных (назовем ее index.html) и файл с JavaScript функцией (scripts.js), которая будет отправлять запрос и обновлять страницу. Кроме того, что бы немного улучшить дизайн мы добавим таблицу стилей (styles.css). Такой подход позволяет убрать все правила оформления в отдельный файл и не загромождать ими html страницу.

Теперь посмотрим разметку в файле index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>Проверка регулярных выражений</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="prototype.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script>
</head>
<body>
<p class="title">Тестирование регулярных выражений</p>
<form id="expForm" action="#" method="post">
<p>
<label for="regexp">Регулярное выражение</label>
<input type="text" name="regexp" id="regexp" class="txt"
	value="/(d{1,3})-?([d-]+)/" />
</p>
<p>
<label for="searchText">Текст</label>
<textarea name="searchText" id="searchText" rows="10" class="txt">
525-11-65 346-1-346</textarea>
</p>
<p>
<label for="case">Учитывать регистр</label>
<input type="checkbox" name="case" id="case" checked="checked" />
</p>
<p>
<input type="button" name="search" id="search" value="Поиск"
	onClick="analyseText()" class="btn" />
</p>
<p class="comment">Примечание: необходимо ввести Perl-совместимое
регулярное выражение (например, "/[abc]+$/") и текст, в котором
нужно выполнить поиск по этому выражению. Подробнее почитать о
правилах составлении регулярных выражений можно
<a href="http://www.php.net/manual/ru/ref.pcre.php">здесь</a>.</p>
</form>
<div id="results">
Для анализа текста с помощью регулярного выражения нажмите кнопку "Поиск"
</div>
<div id="footer">
<p><a href="https://www.simplecoding.org">Почитать описание</a></p>
<p><a href="https://www.simplecoding.org">Автор: Стаценко Владимир</a></p>
</div>
</body>
</html>

Как видите, все довольно просто. В первую очередь мы указываем тип документа, его кодировку, заголовок страницы и т.п. В строке 7 мы подключаем таблицу стилей, а в строках 8 и 9 – библиотеку для работы с JavaScript и нашу функцию, которая выполняет Ajax запрос. В нашем приложении мы используем одну из самых лучших JS библиотек – prototype. Использование библиотеки немного увеличивает время первоначальной загрузки страницы (т.к. будет загружаться файл prototype.js), но позволяет значительно упростить работу с Ajax (и не только с ним). Описание этой библиотеки естественно выходит далеко за рамки этой статьи, поэтому я остановлюсь только на тех компонентах, которые мы будем использовать. Подробнее узнать о prototype можно на сайте www.prototypejs.org или из многочисленных статей.

Вернемся к нашей странице. Она условно разделена на 4 части: заголовок (между тегами <p class=»title»> и </p>), форма для ввода данных (<form id=»expForm»…> и </form>), результаты поиска (<div id=»results»>) и хвостовик со ссылками (<div id=»footer»>).

Обратите внимание, что все поля формы содержат значения по умолчанию, отсутствует поле «submit», а параметр action=»#». Т.е. сама форма данные никуда не отправляет. Отправку запроса выполняет функция analyseText() при нажатии на кнопку «Поиск» (событие onClick, строка 30).
Сама функция находится в файле scripts.js:

function analyseText() {
    //читаем значения введенные в поля
    var e = $('regexp').value;
    var t = $('searchText').value;
    var c = $('case').checked;
    //формируем строку с параметрами запроса
    var pars = $H({exp:e, text:t, textcase:c}).toQueryString();
    //отправляем ajax запрос
    new Ajax.Updater("results", "analyser.php", {method:"post", parameters:pars});
}

Теперь разберем работу функции. Использование prototype позволило сократить код до минимума. Сначала мы читаем данные, введенные в поля формы, формируем хеш-таблицу и преобразуем ее в строку с параметрами запроса (строки 3-7). Затем мы создаем объект Ajax.Updater который отправляет запрос серверу, читает результат и вставляет его между тегами <div id=»results»>…</div>

Первый параметр, который указывается при создании объекта это id блока в который будет вставлен результат запроса. В следующем параметре мы указываем тип запроса («post»), а в последнем – строку с параметрами.

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

body {
    background-color: #EDEDED;
    margin: 0;
    padding: 2em 2em 2em 2em;
}

p.title {
    color: #734600;
    text-align: center;
    font-family: Tahoma, sans-serif;
    font-size: 140%;
}

#expForm {
    color: #126000;
    font-family: Verdana, sans-serif;
    font-size: 90%;
    font-weight: bold;
    border: solid 1px #000;
    margin: 0;
    padding: 1em 1em 1em 1em;
    background-color: #FCFCDB;
}

#expForm .txt {
    width: 400px;
}

#expForm p {
    clear: both;
}

#expForm p.comment {
    font-size: 80%;
    font-weight: normal;
    padding: 0 1em 0 1em;
    color: grey;
    font-family: Verdana, sans-serif;
}

#expForm p label {
    float: left;
    width: 25%;
}

#expForm .btn {
    margin: 0 0 0 25%;
    border: solid 1px #126000;
    font-size: 120%;
    font-family: Tahoma, sans-serif;
    color: #126000;
}

#results {
    margin: 2em 0 0 0;
    padding: 1em 1em 1em 1em;
    border: solid 1px #000;
    background-color: #DFFFD8;
    font-size: 90%;
    font-family: Tahoma, sans-serif;
    color: #472A01;
}

.bold {
    font-weight: bold;
}

#footer { border: solid 1px #000; background-color: #F7E7EB; font-size: 100%; font-family: Verdana, sans-serif; margin: 2em 0 0 0; padding: 0.5em 0.5em 0.5em 0.5em; } #footer p { text-align: center; font-size: 90%; margin: 0; padding: 0; } #footer p a { text-decoration: none; } #footer p a:hover { color: #ff0000; }

Единственный момент, на который стоит обратить внимание – это расстановка элементов формы. Для того, чтобы расположить элементы формы в две колонки с фиксированной шириной мы для каждого элемента label устанавливаем директиву float: left (стр 42), которая «вырывает» элемент из потока документа и смещает его влево. При этом следующий элемент будет обтекать label справа. Директива clear: both, установленная для каждого тега <p> (стр 30), восстанавливает нормальный поток элементов в документе. Таким образом, каждый следующий параграф будет расположен под предыдущим.

Все. Клиентская часть нашего приложения закончена.
В следующий раз мы напишем серверную часть нашего приложения.

Посмотреть работающее приложение можно здесь.

Постовой

Продажа недвижимости в Москве