Оразов И., Ысмаилова А.Б.

Южно-Казахстанский государственный университет им.М.Ауезова, Казахстан

Разработка интерактивного интерфейса динамического Web-документа в JavaScript

Введение. Web-документы обычно описываются на языке HTML (HyperText Markup Language), ставшим основным языком описания документов в Internet. Язык JavaScript предназначен для создания динамического Web-документа в Internet [1]. Цель данной статьи познакомить пользователя с той частью Web-программирования, которая связана с созданием интерактивного интерфейса. Предполагается, что пользователь знаком с основами WWW, HTML и JavaScript.

Интерактивый интерфейс. В общем случае, интерактивный интерфейс пользователя представляет собой систему, обеспечивающую взаимодействие пользователя и Web-документа. Для WWW, интерактивный интерфейс можно определить как последовательность Web-документов, реализующих интерфейс пользователя.

Можно условно классифицировать принципы построения интерфейса по типу формирования Web-документа [2]: статический и динамический. В первом случае источником интерфейса является Web-документ, созданный на языке HTML. Следовательно, данный документ остается неизменным в течение использования. Во втором случае источником интерфейса является Web-документ, использующий интерактивные скрипты на языках JavaScript и РНР. Следовательно, появляется некоторая гибкость в видоизменении интерфейса во время использования.

Задача построения выше названных интерфейсов делится на две части: клиентская и серверная. Для создания клиентской части необходимо создать Web-документ, в котором реализован интерфейс с пользователем. На языке HTML это возможно посредством форм. Серверная часть состоит из исполняемого модуля, решающего основные задачи обработки данных поступающих от клиентской части, формирования ответа в формате HTML, и т.д. Такой модуль называется cgi-модулем (рис.1).

Рис. 1 - Интерактивный интерфейс пользователя

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

Рассмотрим более подробно схему работы Web-сервера. В общем виде она выглядит так:

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

Рис. 2 – Запрос Web-серверу от пользователя

2. Web-сервер ищет запрашиваемый Web-документ и возвращает результаты браузеру: Браузер, получив Web-документ, отображает его пользователю и ожидает его реакции.

Рис. 3 – Ответ Web-сервера

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

<br> <center><p>«Гамлет» трагедиясын кім жазган? </p></center> <br>

<form name="Test2">

<table align="center" cellspacing="2" cellpadding="2" border="2">

<tr> <td>ауыстыргыш</td>

<td>жауаптар</td>

</tr> <tr align="center"> <td><input type=radio value="1" name="jayap"></td> <td>Монтень</td></tr>

<tr align="center"> <td><input type=radio value="2" name="jayap"></td> <td>Шекспир</td>

</tr> <tr align="center"> <td><input type=radio value="3" name="jayap"></td> <td>Гомер</td> </tr>

Рис. 4 – Вид скрипта

<tr align="center"> <td><input type=radio value="4" name="jayap"></td> <td>Рабле</td> </tr>

<tr align="center"> <td><input type=radio value="5" name="jayap"></td> <td>Софокл</td> </tr>

<tr align="center"> <td colspan="2"><input type=button value="Тексеру"

name="Go" onclick="javascript:Rbut();"></td> </tr> </table>

</form>

<script language="JavaScript">

function Rbut()

{ jayap=document.Test2.jayap[1].checked;

if (jayap)

{ alert("дурыс жауап"); }

Else { alert("Кате жауап"); } }

</script>

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

Литература:

1. http://javascript.ru/manual

2. Құрақбаев Ж.С., Ибрагимов О.М. «HTML+JavaScript» пәніне арналған әдістемелік оқу құралы. –Шымкент: ОҚМУ, 2011. – 68 бет.