Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
лабы / ИТСлаб8.doc
Скачиваний:
42
Добавлен:
16.04.2013
Размер:
390.66 Кб
Скачать

5.2. Использование языка JavaScript в html-документах

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

В этой ситуации целесообразно перенести проверку правильности заполнения формы на сторону клиента. Один из таких способов - использование в HTML-документах специального языка JavaScript. Программы, написанные на этом языке, вставляются в HTML-документы при помощи тега <script>и выполняются браузером на машине клиента.

Язык JavaScript (не путать с языком Java!) был специально разработан для использования разработчиками-непрограммистами при создании web-страниц.

Программу или отдельные функции, написанные на языке JavaScript, помещают в заголовок HTML-документа.

JavaScript - это объектно-ориентированный язык. Глобальным объектом в нем является объект с именем Window. Для обращения к свойствам и методам этого объекта его имя можно опускать. Например, чтобы вывести сообщение клиенту, можно указать метод alert объекта window двумя способами: Window.alert("сообщение") или alert("сообщение"). Внутри объекта Window определены другие объекты. Среди них наиболее часто используемый - объект document, он содержит web-страницу со всеми формами, полями и т.п. Рассмотрим возможности использования язака JavaScript на примере.

1. Создайте простую форму, содержащую три поля для ввода имени, адреса и адреса электронной почты, а также две кнопки - для отсылки формы и для очистки полей формы. Ниже приведен текст HTML-документа и его вид в Internet Explorer'е. В заголовке формы мы указали, что для передачи данных о покупателе будет использован метод POST, а для обработки этих данных будет вызвано приложение WebDBapp.cgi из каталога Scripts на сервере WebApp:

<HTML><HEAD>

<TITLE>Пример №2. Запрос каталога</TITLE>

</HEAD>

<BODY>

<H2>Чтобы получить больше информации о наших товарах, заполните эту форму</H2>

<FORM METHOD="POST"

ACTION="http://WebApp/WebDBapp.cgi">

<P>Имя:

<INPUT TYPE="text" NAME="name">

<P>Адрес:

<INPUT TYPE="text" NAME="address">

<P>E-mail:

<INPUT TYPE="text" NAME="email">

<P>

<INPUT TYPE="submit" VALUE="ПОСЛАТЬ" >

<INPUT TYPE="reset" VALUE="Сбросить все" >

</BODY></HTML>

2. Для того чтобы можно было ссылаться на нашу форму в операторах языка JavaScript, форме следует дать имя с помощью атрибута NAME тега <FORM>:

NAME="Info"

3. Туда же добавьте атрибут

ONSUBMIT="return validate()"

Этим мы указали, что при наступлении события ONSUBMIT (нажатии на кнопку SUBMIT) перед отправкой формы сначала будет выполнен наш обработчик этого события - функция с именем validate. При этом если функция возвратит значение true, то форма будет отослана обычным образом, если - false, то отсылки формы не произойдет.

Ниже в таблице приведен перечень событий, которые можно обрабатывать в JavaScript.

Событие

Когда вызывается обработчик

onBlur

Когда клиент покидает указанное поле

onChange

Когда клиент изменяет содержимое указанного поля

onClick

Когда клиент нажимает указанную кнопку

onFocus

Когда клиент входит в указанное поле

onLoad

Когда Web-страница загружена или перезагружена

onMouseOver

Когда клиент перемещает мышь над указанным полем

onSelect

Когда клиент выбирает содержимое указанного поля

onSubmit

Когда клиент отправляет указанную форму

onUnload

Когда текущая Web-страница изменена

4. Добавьте описание функции validate после тега </TITLE>:

Тег комментария для браузеров, не поддерживающих тег <script>

<script>

<!--

f

Имя объекта - Web-страницы

unction validate()

{

Имя свойства поля формы -текст, введенный в поле

if(document.info.name.value=="")

{

alert("Укажите имя")

Имя поля формы

return false

}

Имя формы

if(document.info.address.value=="")

{

alert("Укажите адрес")

return false

}

if(document.info.email.value=="")

{

alert("Укажите e-mail")

return false

}

}

//-->

</script>

Ниже приведен полный текст HTML-документа.

<HTML><HEAD>

<TITLE> Пример №2. Запрос каталога</TITLE>

<script>

<!--

function validate()

{

if(document.info.name.value=="")

{

alert("Укажите имя")

return false

}

if(document.info.address.value=="")

{

alert("Укажите адрес")

return false

}

if(document.info.email.value=="")

{

alert("Укажите e-mail")

return false

}

}

//-->

</script>

</HEAD>

<BODY>

<H2>Чтобы получить больше информации о наших товарах, заполните эту форму</H2>

<FORM NAME= "info" METHOD="POST" ONSUBMIT="return validate()" ACTION="http://webapp/webdbapp.cgi">

<P>Имя:

<INPUT TYPE="text" NAME="name">

<P>Адрес:

<INPUT TYPE="text" NAME="address">

<P>E-mail:

<INPUT TYPE="text" NAME="email">

<P>

<INPUT TYPE="submit" VALUE="ПОСЛАТЬ" >

<INPUT TYPE="reset" VALUE="Сбросить все" >

</BODY></HTML>

5. Сохраните HTML-документ на устройстве W в файле с именем JStest.html и проверьте работу скрипта.

Соседние файлы в папке лабы