Пятый элемент (Javascript)

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

В веб-технологии выводом на экран информации и приёмом команд пользователя занимаются веб-клиенты или браузеры: Интернет Эксплорер, Opera, Firefox и другие. Самые простые и востребованные команды – это команды навигации: пользователь видит на экране ссылку (подчёркнутый синий текст вроде http://irkutsk.ir2.ru/), щёлкает по этой ссылке указателем мыши, и таким образом передаёт браузеру команду "открыть новую страницу".

При работе через Интернет с базами данных основная часть команд пользователя также состоит из открытия новых страниц – через ссылки, видимые на экране или формируемые с помощью HTML-форм. Например, в форме поиска человек пишет какое-то слово ("шурупы"), и браузер отправляет на веб-сервер запрос страницы по ссылке вроде find.php?slovo=шурупы (только слово шурупы будет закодировано браузером в виде %F8%F3%F0%F3%EF%FB). Так, в частности, работают поисковые системы: вы запрашиваете у них информацию через ссылки, сформированные браузером с помощью HTML-формы. Простых команд навигации, однако, недостаточно, для того чтобы использовать браузер в качестве полноценного инструмента общения с базой данных (БД).

Главный элемент управления БД

Этот элемент можно назвать "Поле со списком" (так он называется в MS Access), можно просто "Динамический список". Не надо полностью набирать искомое слово и нажимать "Enter", чтобы потом убедиться, что такого слова в таблице БД нет. Это неудобно, и хорошая система управления БД должна быть более совершенной. Поиск нужного слова в таблице должен вестись «на лету»: по мере набора букв в поле поиска пользователь должен видеть список строк таблицы, в которых встречается данное слово.

По мере набора букв происходит позиционирование, перемещение по фиксированному списку. Так происходит в MS Access (при использовании элемента управления "Поле со списком") и в 1С: если в открытом справочнике товаров (в форме списка) набирать какое-нибудь наименование, список будет "прокручиваться" до первого найденного значения.

Так происходит и в открытой HTML-странице, при использовании элемента SELECT. Вот пример (он даёт представление и о том, что происходит в MS Access и в 1С):

(1) арбуздерево

енот жук природа причина причуда хвойное дерево

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

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

Преимущества управления БД через браузер

В примере (1) на этой странице при наборе букв "дер" вы переместитесь в списке на слово "дерево". Но если список достаточно длинный, вы не увидите, что там, в самом низу, есть ещё и слово "хвойное дерево", и, следовательно, пропустите возможность этого выбора. Именно так и только так работает позиционирование в MS Access и в 1С. Вот пример того, как должна работать правильная выборка элементов из списка:

Введите в поле примера (2) буквы "де", и появится список элементов, содержащих в наименованиях эти буквы, независимо от их позиции в слове: "дерево", "хвойное дерево". И даже это не идеал. В идеале надо ещё, чтобы у пользователя был выбор: отфильтровывать элементы списка по любым буквам, или только по буквам от начала слова. Это может быть какая-то простая условная метка, например, пробел перед искомыми буквами (если есть пробел, искать только с начала слов, если нет пробела – везде). В нашем примере (2) этот пробел в начале поиска так и работает.

В одной из предыдущих статей (Автоматизация офиса 1) мы нарисовали схему, цепочку, по которой идёт информация из БД к пользователю на экран: MySQL => PHP => Apache => Firefox. Так вот, пятый элемент этой цепочки, Javascript, как раз и позволяет создавать динамические списки элементов на экране. Точнее, Javascript позволяет не через открытие новых ссылок, а ускоренно, без перезагрузки страницы, напрямую посылать многократные запросы к БД (каждая введённая в окно поиска буква – новый запрос) и получать ответы. Технология такого быстрого обмена данными кратко описана в нашей статье Зачем вам Аякс?.

Сразу надо сказать, что эта технология не подходит для удалённой работы с БД через Интернет по медленному (модемному) каналу. То есть она, конечно, будет работать (списки по искомым буквам будут формироваться), но не настолько быстро, как того требует рабочий режим (не будет обеспечивать нужного удобства, и быстрее будет простой однократный поиск нужного объекта). Но мы ведь и говорим здесь о применении интернет-технологий прямо в офисе, в локальной сети. В обычной локальной сети (10-100 Мбит) работа со списками БД через браузер будет идти практически так же быстро, как вы видите это сейчас в нашем примере (2) (там сейчас нет прямого обращения к БД).

Проверить скорость фонового соединения с БД в реальном режиме можно на главной странице этого сайта (http://dn.ir2.ru/). Там есть форма добавления новой статьи. Попробуйте ввести в поле "Имя файла (только латинские буквы)" слово ajax. Буквы должны окраситься в красный цвет (это предупреждение о том, что в БД есть статья с таким именем файла и это имя использовать нельзя). Попробуйте добавить к "ajax" ещё, например, цифру "1". Буквы должны стать чёрными (на самом деле там, кроме латинских букв, можно использовать и цифры). Если попытаетесь ввести русскую букву или знак препинания, программа их удалит. Если изменение цвета (или удаление неправильных символов) происходит практически мгновенно, технологию можно использовать в системе для работы с данным сайтом при данной скорости соединения. Такое же цветовое предупреждение используется и при авторизации на сайте http://irkutsk.ir2.ru/ (красные буквы говорят о том, что пользователь существует, и надо вводить правильный пароль, а нового пользователя с таким именем зарегистрировать нельзя).

Ещё немного о Javascript

Обеспечение фонового общения с БД – самая важная функция Javascript, без которой вряд ли было бы возможным создание полноценной веб-СУБД. Но эта функция, конечно не единственная. Javascript совместно с HTML и CSS создаёт вообще всё видимое и невидимое оформление информации, которую мы просматриваем через браузер. И во многих случаях обращение к БД ему не требуется. Пример достаточно сложной работы Javascript – HTML – CSS можно изучить на странице http://dn.ir2.ru/order/:

1) с помощью назначения доступности-недоступности элементам HTML-формы Javascript задаёт пользователю порядок заполнения бланка заказа: первым должен выбираться вид рекламы, после его выбора становится доступен размер модуля, после выбора размера можно указывать выпуски газеты;

2) Javascript рассчитывает (с учётом прогрессивной скидки в зависимости от объёма) и выводит на экран общую сумму заказа;

3) в фоновом режиме однократно обращается к БД для заполнения реквизитов клиента: если клиент уже есть в нашей БД, ему достаточно заполнить поле ИНН, чтобы вся остальная необходимая информация появилась на экране; ИНН можно вводить не полностью, а частично, тогда поля будут заполнены по первой найденной фирме (попробуйте ввести туда "38" или "00", потом щёлкнуть по следующему полю).

Цепочка Javascript – PHP – MySQL успешно используется в веб-технологии автоматической вёрстки газеты Деловая неделя: Javascript, управляя программно такими событиями, как "щелчок мыши", "перетаскивание" и др., создаёт визуальную среду, в которой пользователь двигает по экрану рекламные макеты (в браузере Firefox); при остановке движения макета Javascript передаёт его новые координаты на сервер, там PHP записывает эти координаты в таблицу MySQL. Но описание этой технологии – тема отдельной статьи. А может, и целой диссертации (сотрудница Деловой недели защитила по этой теме диплом матфака ИГУ – почему бы теперь и не диссертацию?).

© 2009, «Деловая неделя», Михаил Гутентог

Читать все комментарии (5)

Добавить комментарий: