Л.С. Смидович, А.А. Рева

Язык сценариев Java Script

2001

Министерство образования и науки Украины

Национальный аэрокосмический университет

им. Н.Е. Жуковского

"Харьковский авиационный институт"

Л.С. Смидович, А.А. Рева

Язык сценариев Java Script

Учебное пособие

Харьков "ХАИ" 2001

Министерство образования и науки Украины

Национальный аэрокосмический университет

им. Н.Е. Жуковского

"Харьковский авиационный институт"

Л.С. Смидович, А.А. Рева

Язык сценариев Java Script

Учебное пособие

Харьков "ХАИ" 2001

УДК 681.51.012/013

Язык сценариев Java Script / Л.С.Смидович, А.А.Рева. - Учеб. пособие. - Харьков: Нац. аэрокосмический ун-т «ХАИ», 2001.

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

Для студентов специальности «Информационные управляющие системы и технологии», изучающих курсы «Методы и средства информационных технологий» и «Информационные технологии», а также при выполнении курсовых и ди­пломных работ.

Ил. 5. Библиогр.: 5 назв.

Рецензенты: д-р техн. наук, проф. Ю.В. Стасев,

д-р техн. наук, проф. В.В.Поповский

© Национальный аэрокосмический университет им. Н.Е. Жуковского "Харьковский авиационный институт", 2001 г.

В настоящее время самым распространенным сервисом Интернет является WWW - world wide web. Он позволяет интегрировать разнородную информацию и объединять документы с помощью гиперссылок. WWW работает по технологии клиент-сервер: документы хранятся на сервере и предоставляются клиенту по запросу. Клиент - это специальная программа для просмотра документов (браузер), установленная на любом компьютере, подключенном к Интернету.

Общепринятым средством для создания WWW - документов в сети Интернет является язык разметки гипертекста HTML. Первоначально HTML предназначался для создания статичных документов, не имеющих средств организации диалога с пользователем. В настоящее время единственным средством стандартного HTML, обеспечивающим интерактивность, являются формы. Кроме того, имеются расширения языка, одним из основных является язык сценариев Java Script, который позволяет обрабатывать события (например, нажатия мыши), модифицировать содержимое WWW-документа, управлять работой браузера.

Целью данного пособия не является изложение языка HTML, его синтаксиса и возможностей, с которым можно ознакомиться, например, в [2, 3, 5]. Рассматриваются только теги для описания форм и примеры их применения, а также использование тега <META>.

В настоящее время базовой версией языка является HTML 3.2, которая поддерживается большинством браузеров (в том числе и устаревшими). Осуществляется переход к версии 4.0. При изложении материала возможности, доступные только в версии HTML 4.0, указываются особо или выделяются обозначением [4.0]. Для различных браузеров приняты следующие обозначения: Netscape Naviganor - NN, Internet Explorer - IE, и далее - номер версии. Например, Netscape Naviganor 3.0 обозначается NN3.0.

Формы html

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

Для описания формы используется парный тег <FORM>....</FORM>. Все элементы формы должны помещаться между этими тегами. Документ может содержать произвольное количество форм, на сервер отправляются только значения, введенные в активной форме. Тег имеет следующие атрибуты:

ACTION ="serverURL"- URL обработчика формы на сервере. Обязательный параметр. Например, значением может быть адрес приложения CGI или LiveWire на сервере или mailto: URL для отправки формы по электронной почте.

METHOD=GET | POST - метод HTTP, используемый для отправки формы. Допустимые значения - GET или POST, значение по умолчанию - GET. GET добавляет введенную информацию к URL, которая в большинстве принимающих систем становится значением переменной окружения QUERY_STRING. POST отправляет вводимую информацию в теле данных, которое является доступным на stdin (стандартное устройство ввода) с длинной данных, указанной в переменной окружения CONTENT_LENGTH.

ENCTYPE - тип кодировки. Перед отправкой на сервер данные формы кодируются. Значение по умолчанию - "application/x-www-form-urlencoded", возможно так же "multipart/form-data". Последнее значение должно использоваться, если форма содержит элемент INPUT, TYPE="file" (см. ниже, с. 7). Если вы отправляете данные формы по email (используя в качестве значения Action "mailto:URL"), можно использовать кодировку "text/plain" (обычный текст).

TARGET = windowName - окно, в которое выводится ответ сервера (например, новый HTML-документ). Когда вы используете форму с атрибутом TARGET, сервер показывает ответы в указанном окне вместо окна, содержащего форму. windowName может быть существующим окном, именем фрейма, определенного в теге <FRAMESET> или одним из имен фрейма _top, _parent, _self или _blank; оно не может быть выражением JavaScript.

Обработка данных формы

Данные, введенные в форму, отправляются на веб-сервер и там обрабатываются. Чтобы разобраться в механизме взаимодействия браузера, сервера и программ на сервере, нужно рассмотреть базовый протокол WWW-сервиса HTTP и CGI - шлюз между сервером и серверным программным обеспечением.

Взаимодействие веб-сервера и клиента (браузера) осуществляется по протоколу HTTP (Hypertext Transfer Protocol - протокол передачи гипертекста). Любой запрос клиента и ответ сервера состоит из трех частей - строки запроса (ответа), заголовка и тела запроса.

Установив соединение с сервером, браузер посылает запрос, указав HTTP-команду (метод - GET, HEAD или POST), адрес документа и номер версии HTTP. Например, GET /index.html HTTP/1.0. Заголовок содержит информацию (необязательную) о типе браузера, о формате принимаемых документов и т.д. Если используется метод POST, тело запроса может содержать дополнительные данные. Обычно это данные для CGI-программы или отредактированный документ. В противном случае тело запроса пустое.

Ответ сервера - это строка состояния, содержащая номер версии HTTP, код состояния и его описание. Например,

HTTP/1.0 200 OK.

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

CGI (Common Gateway Interface) - это шлюз, с помощью которого web-сервер может взаимодействовать с другими программами, работающими на этом сервере. В частности, данные, введенные в форме, передаются на сервер и там обрабатываются CGI-программой. Данные в CGI-программу сервер может передавать двумя способами - либо через переменные среды операционной системы, либо через стандартный поток ввода (STDIN). Переменные среды, инициализируемые веб-сервером, содержат информацию о самом сервере, используемом протоколе, информацию о хосте, направившем запрос. Для написания CGI-программ обычно используется язык Perl, однако такие программы можно писать на любом языке - Си, Паскале и т.д. Большинство этих языков имеют стандартные средства для обработки переменных окружения, стандартный поток ввода обычно обрабатывается как обычный файл. Результаты работы программы (обычно это html-документ) веб-сервер передает обратно браузеру.

В CGI-программу данные, введенные в форму, могут передаваться двумя методами. По методу GET данные передаются серверу в самом URL, например:

GET /cgi_bin/prg.pl?name=John&date=24 HTTP/1.0,

сервер же передает данные CGI-программе в переменной среды QUERY_STRING.

При использовании метода POST данные передаются серверу в теле http-запроса, например так:

POST /cgi_bin/prg.pl HTTP/1.0.

......

name=John&date=24

......

В CGI-программу данные в этом случае передаются через стандартный поток ввода, длина данных указывается в переменной окружения CONTENT_LENGTH.

Тег <INPUT>

Тег <INPUT> служит для определения одного из стандартных элементов формы. Тег непарный (не требует закрывающего тега), и имеет следующие атрибуты:

 TYPE - тип управляющего элемента. Значение по умолчанию - "text". Возможные значения - text, password, file, hidden, checkbox, radio, submit, reset, button, image;

 NAME - определяет имя управляющего элемента. Регистр учитывается;

 VALUE - определяет начальное значение управляющего элемента. Этот атрибут не обязателен, если только для атрибута TYPE не установлено одно из значений "radio", "checkbox", "password" или "file". Для элементов "radio", "checkbox" определяет значение, которое посылается серверу при выборе элемента и отправке формы;

 SIZE - определяет ширину управляющего элемента на экране. Ширина дается в пикселах, если для атрибута type не установлено значение "text", "file" или "password". В этом случае ширина задается в числе символов (число должно быть целым);

 MAXLENGTH - если для атрибута type установлены значения "text" или "password", этот атрибут определяет максимальное число символов, вводимых пользователем. Это число может превышать указанный в атрибуте SIZE размер поля; в этом случае браузер должен обеспечивать механизм прокрутки. По умолчанию число символов не ограничено;

 CHECKED - если для атрибута type установлено значение "radio" или "checkbox", этот логический атрибут указывает на то, что флажок установлен по умолчанию. Для других типов управляющих элементов игнорируется.

В версии HTML 4.0 добавлены следующие атрибуты:

 SRC - Если атрибут type имеет значение "image", этот атрибут определяет URL изображения, используемого для представления графической кнопки;

 ALT - альтернативный текст;

 ALIGN - выравнивание;

 READONLY - управляющие элементы ввода только для чтения;

 DISABLED - отключенные управляющие элементы ввода;

 TABINDEX - определяет порядок перехода по нажатию клавиши tab;

 ACCESSKEY - определяет клавиши быстрого доступа (hot-key).

Тип управляющего элемента, определяемый элементом <INPUT>, зависит от значения атрибута TYPE.