Улучшение пользовательского интерфейса узла

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

Использование строки состояния

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

  • Отображает описание команд меню и кнопок панели инструментов.
  • Отображает URL ссылок при наведении на них указателя мыши.

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

Средства перемещения по документу

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

Окна с сообщениями и другие элементы

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

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

Новые версии браузеров поддерживают динамические документы HTML, созданные на JavaScript. Динамические вэб-страницы состоят из отдельных слоев (размещаемых объектов). Главное отличие слоев от фреймов заключается в их перекрываемости (подобно окнам ОС Windows) и перемещаемости в главном окне браузера. JavaScript позволяет управлять отдельными слоями и создавать потрясающие эффекты.

Рисунки и анимация

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

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

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

Анимация не входит в число преимуществ JavaScript. Java в этом отношении выглядит предпочтительнее. Быстро сменяющие друг друга изображения лучше создавать с помощью Java (но кто сказал, что это просто). Анимационные картинки и динамические рисунки можно создавать и в графических редакторах в формате GIF. Сложные динамически изображения и видеоклипы требуют использования специальных приложений, таких как ShockWave, QuickTime и т.д.

Изменение форм

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

Традиционно формы введения данных управляются CGI (общим шлюзовым интерфейсом). Сценарии запускаются на сервере. После введения пользователем на форме всей необходимой информации необходимо нажать кнопку SUBMIT (ОТПРАВИТЬ). При этом сценарий отправляется на выполнение на сервере. После выполнения сценария его результаты отправляются обратно в браузер и вэб-страница обновляется.

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

Как правило, сценарии CGI используются для проверки правильности введения данных на форме. Например, если человек вводит в поле "телефон" только четырехзначное число, форма считается незаполненной и отправляется на повторное заполнение.

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

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

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

В JavaScript интегрированы средства автоматизирования введения данных на форме. Что позволяет отображать формы с уже частично заполненными полями или заполнять некоторые поля по мере ввода данных пользователем.

Определение версии браузера

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

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

Главное отличие в браузерах Microsoft и Netscape (и других тоже) заключается в способе выполнения кода JavaScript. Поэтому в JavaScript предусмотрена возможность определения типа браузера и выполнения команд JavaScript, поддерживаемых только им. Детально об этом поговорим позже.

Внедряемые модули

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

  • RealAudio. Поддерживает потоки аудиоданных.
  • Macromedia Flash. Сложная анимация.
  • QuickTime. Внедряет видеоклипы.
  • Adobe Acrobat. Дополнительно форматирует документы.
  • ShockWave. Анимирует объеты и поддерживает интерактивные приложения.

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

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

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

Кроме определения необходимого внедряемого модуля, JavaScript позволяет управлять его содержимым. Средство управления внедряемым модулем в JavaScript называется LiveConnect.

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

Кроме всего прочего, LiveConnect позволяет программам JavaScript соединяться с апплетами Java и предоставлять в их распоряжение переменные и команды JavaScript.

Кроме того, одна из интересных возможностей JavaScript, о которой заговорили совсем недавно - это управление помощниками Microsoft Office, что позволяет оживить сайт, сделать его более привлекательным. Например, посмотрите, как это происходит на сайте http://www.nbusiness.ru/En101/, где помощник (Мерлин) приветсвует посетителя и предлагает подписаться на почтовую рассылку.

nextn.bmp (246 bytes)

home.gif (161 bytes)

next.gif (900 bytes)

Сайт управляется системой uCoz