Second_magistr / ВЕБ-програм / методичка
.pdf
|
HTML и VBScript |
|
33 |
|||
На рис. 6.5 показан вид |
|
|
||||
элемента в браузере. В |
|
|
||||
случае |
если |
текст не |
|
|
||
помещается |
в |
области |
|
|
||
ввода целиком, он авто- |
|
|
||||
матически переносится |
|
|
||||
на следующую строку. |
Рис. 6.5. Область прокрутки |
|||||
Текст |
также |
можно |
||||
форматировать |
вруч- |
|
|
|||
ную, поставив в нужных местах символы перевода строки. Теперь рассмотрим законченный пример. Пусть требуется
создать форму заказа на покупку некоторой книги. Эта форма должна запрашивать анкетные данные пользователя (ФИО), его адрес для отправки заказанной книги, название книги, количество экземпляров и способ оплаты заказа. Введенные пользователем данные должны отправляться по email-адресу books@volsu.ru.
Прежде всего, поместим разрабатываемую форму в поле таблицы TABLE. Это позволит, во-первых, отрегулировать ее размеры, во-вторых, отделить форму от остальной информации на Webстранице. Исходный HTML-код может выглядеть, например, так:
<HTML>
<HEAD>
<TITLE>Order Form</title> </head>
<BODY>
<TABLE align="center" width=450 border=5 cellpadding=10> <TD bgcolor="cyan">
<FORM METHOD=POST ACTION="mailto:books@volsu.ru" ENCTYPE="text/plain">
<H3 align="center">Заполните форму заказа</h3>
Фамилия <INPUT type="text" name="Name1" size=12> Имя <INPUT type="text" name="Name2" size=12> Отчество <INPUT type="text" name="Name3" size=15> <BR><BR>
Полный адрес <INPUT type="text" name="Address" size=60>
<TABLE cellpadding=15> <TR>
34
<TD valign="top"> <H3>Заказываемая книга</h3> <SELECT name="Book">
<OPTION value="Andr"> Г.Андерсен. Сказки
<OPTION value="Ker1"> Л.Кэррол. Алиса в Зазеркалье <OPTION value="Ker2"> Л.Кэррол. Алиса в Стране чудес <OPTION value="Dick"> Ч.Диккенс. Приключения Оливера Твиста
</select>
<TD valign="top"> <H3>Cпособ оплаты</h3>
<INPUT type="radio" name="Payment" value="nal" checked>
наличный расчет<BR>
<INPUT type="radio" name="Payment" value="beznal">
безналичный расчет<BR> </table>
Количество экземпляров
<INPUT type="text" name="Num" value="1" size=5> <BR><BR>
<INPUT type="checkbox" name="Info" checked>
Информировать о новых поступлениях<BR>
<HR>
<TABLE width=400> <TR>
<TD align="center">
<INPUT type="submit" value="Отослать заказ"> <TD align="center">
<INPUT type="reset" value="Очистить форму"> </table>
</form>
</table>
</body>
</html>
HTML и VBScript |
35 |
Рис. 6.6. Форма на Web-странице
На рис. 6.6 показан вид заполненной формы. Если в таком ее состоянии пользователь нажмет на кнопку Отослать заказ, то по электронному адресу books@volsu.ru будет выслано письмо следующего содержания:
Name1=Пушкин
Name2=Александр
Name3=Сергеевич Address=Царское Село, 1 Book=Ker2
Payment=nal
Num=1
Info=on
ЗАДАНИЕ :
Разработайте Web-страницу с формой для регистрации участника научной конференции. Форма должна запрашивать его ФИО, ученую степень, ВУЗ, адрес и телефон, название доклада и его форму (устный или постерный), а также краткую аннотацию доклада.
36
ЛАБОРАТОРНАЯ РАБОТА № 7
События и сценарии VBScript
С настоящего момента мы приступаем к изучению HTML на новом уровне, и попытаемся заставить Web-страницы "ожить". Это
– первый шаг на пути к освоению Dynamic HTML (DHTML). Назначение Dynamic HTML состоит в том, чтобы обеспечить возможности написания сценариев для элементов Web-страницы. Что это означает? Стандартный HTML, изученный нами в предыдущих работах, позволяет передавать информацию с помощью мыши и клавиатуры лишь посредством элементов управления на Webстранице, таких как текстовые поля, кнопки и т.д. В DHTML активной становится большая́ часть Web-страницы: иногда достаточно щелчка мыши на каком-нибудь месте страницы для того, чтобы она на это среагировала. В Internet Explorer можно сделать активным практически любой тег — от <TABLE> до <Н1>. При этом все они будут работать точно так же, как работали элементы управления — отслеживая действия пользователя и реагируя на них.
Широкие возможности Dynamic HTML основаны на использовании языков сценариев. Сам по себе DHTML является лишь средством, позволяющим реагировать на действия пользователя; непосредственно сценарий должен разработать программист. Существует два широко распространных языка сценариев —
JavaScript и VBScript. Internet Explorer поддерживает оба, но мы будем ориентироваться на VBScript, так как на нем, по мнению многих, легче работать, и в настоящее время он применяется большинством Web-программистов.
В отличие от стандартного HTML, в DHTML каждый элемент обладает не только свойствами (атрибутами), но и методами, а также событиями. Свойства элемента — это его характеристики, такие как имя элемента, размер и тип шрифта отображаемого текста, его цвет и т.д. Методы — это действия, которые может выполнять элемент. События — это предопределенные изменения в системе, на которые элемент может реагировать. Таким образом, Dynamic HTML добавляет Web-странице новую функциональность, связанную с реакцией на события от пользователя.
HTML и VBScript |
37 |
Продемонстрируем вышесказанное на простом примере. Предположим на странице размещено текстовое поле, например, с помощью следующего кода:
<HTML>
<HEAD>
</head>
<CENTER>
<INPUT TYPE = TEXT SIZE = 20> </center>
</body>
</html>
При открытии оно будет пустым. Зададимся целью написать несложный код для загрузки данных в это поле на этапе открытия страницы, задействовав возможности VBScript и Dynamic HTML в целом. Таким образом, сразу после открытия текстовое поле будет содержать предопределенные данные. Озаглавим наш пример.
<TITLE>Инициализация на VBScript</title>
Далее с помощью браузеру, что на сценарий.
атрибута LANGUAGE тега <BODY> укажем Web-странице будет использоваться VBScript-
<BODY language = VBScript>
На следующем этапе добавим VBScript-код, который будет выполняться браузером при начальной загрузке Web-страницы. Для этого потребуется использовать события Dynamic HTML. Для наших целей замечательно подходит событие onLoad, генерируемое Internet Explorer в момент загрузки страницы.
Чтобы инициализировать текстовое поле надписью "Текст введен при загрузке" создадим подпрограмму на VBScript, которая будет обрабатывать событие onLoad. Подпрограмма представляет собой специальный тип блока команд на VBScript, который может вызываться по имени. Предположим, что нам необходимо выполнить некоторый VBScript-код, оформленный в виде подпрограммы с именем Page_Initialize(). Скобки, стоящие после названия подпрограммы, указывают на то, что ей могут передаваться параметры. Для связи подпрограммы Page_Initialize() и события onLoad следует добавить следующий код:
38
<BODY language = VBScript onLoad =Page_Initialize()>
Теперь при первой загрузке Web-страницы IE будет запускать подпрограмму с именем Page_Initialize(). Следующим нашим шагом будет создание кода этой подпрограммы.
Исходный код сценария на языке VBScript должен размещаться в специальном блоке Web-страницы, который ограничен тегом <SCRIPT>. В тексте страницы тег <SCRIPT> должен заканчиваться парным закрывающим тегом </script>.
Тег <SCRIPT> имеет следующие атрибуты:
<SCRIPT class=строка defer event=строка for=строка ID=идентификатор
language=JAVASCRIPT/VBSCRIPT src=строка
title=строка type=строка
>
Обычно браузеры, не поддерживающие сценариев, просто игнорируют все, что расположено в этом теге. Некоторые более старые браузеры могут потребовать, чтобы все, находящееся в нем, было оформлено в виде HTML-комментариев. В противном случае весь код сценария будет выведен на экран как обычный текст. Существуют различные языки написания сценариев. В данном случае с помощью атрибута language тега <SCRIPT> сообщим IE о том, что в сценарии используется язык VBScript (VBS). Внутри тега создадим подпрограмму
<SCRIPT language = VBScript> SUB Page_Initialize()
...
END SUB </script>
VBScript-код, помещенный в данной подпрограмме, будет выполняться при первой загрузке Web-страницы. При этом в текстовом поле требуется отобразить сообщение "Текст введен при загрузке". Возникает вопрос, как получить доступ к текстовому полю из подпрограммы? Это можно легко сделать, присвоив текстовому полю имя. Если у текстового поля есть определенное имя,
HTML и VBScript |
39 |
то в подпрограмме можно ссылаться на это поле по имени. Поэтому при создании текстового поля присваиваем ему имя "Textbox" с помощью атрибута name тега <INPUT>.
<INPUT type = TEXT name = Textbox size = 20>
Теперь нужно поместить в поле определенный текст. Это делается с помощью атрибута value текстового поля. Окончательно получим страничку следующего вида:
<HTML>
<HEAD>
<TITLE>Инициализация на VBScript</TITLE> </head>
<BODY language = VBScript onLoad =Page_Initialize()> <CENTER>
<INPUT type = TEXT name = Textbox size = 60> </center>
<SCRIPT language = VBScript> SUB Page_Initialize()
Textbox.Value="Текст введен при загрузке" END SUB
</script>
</body>
</html>
При открытии этой странички в IE мы увидим картинку:
С помощью VBS так же легко можно динамически изменять оформление различных частей Web-документа. Например, созда-
40
дим VBS–скрипт для изменения цвета и размера текста при щелчке над ним мышью. Для этого используем свойства и события тега <FONT>. Сначала создадим текст, подлежащий изменению.
<CENTER>
<FONT ID=f1 size=5 color=#00FF00 onСlick=ChColor()>
Динамическое изменение параметров текста! </font>
</center>
Здесь изначально установлен ярко зеленый цвет текста. Отметим, что в теле тега установлено свойство ID, которому присвоен идентификатор "f1", теперь возможно обращение из подпрограммы к свойствам и методам тега по этому идентификатору. Кроме того, предполагается, что по событию onСlick будет вызван обработчик события ChColor(). Соответственно наша страничка примет следующий вид.
Код скрипта может выглядеть так:
<SCRIPT ID=s2 language = VBScript> SUB ChColor()
f1.size=24
f1.color="FF0000" END SUB
</script>
HTML и VBScript |
41 |
После щелчка мышью на тексте его размер и цвет изменятся, как это показано на рисунке
Заметим, что приведенный выше способ связи элемента и события не единственен. Другой способ связи заключается в том, что создается процедура обработки события, имя которой составлено специальным образом:
ИмяТега(или идентификатор)_onИмяСобытия(параметры).
Тогда для предыдущего примера код страницы выглядел бы следующим образом.
<HTML>
<HEAD> <TITLE> Инициализация на VBScript </title> </head>
<BODY language = VBScript onLoad = Page_Initialize()>
<CENTER>
<FONT ID=f1 size=5 color=#00FF00 >
Динамическое изменение параметров текста! </font>
</center>
<SCRIPT ID=s2 language = VBScript> SUB f1_onclick()
f1.size=24
f1.color="FF0000" END SUB
</script>
</body>
</html>
42
В подпрограммах на VBScript также доступны встроенные функции для работы с датой и временем — Now(), Data() и Time(). Для выделения часов, минут и секунд можно использовать функции Hour(), Minute() и Second(), соответственно. Применение этих функций в коде Web-документа элементарно. Создадим следующий несложный код, который будет выводить на экран информационное сообщение о времени и дате на компьютере клиента. Сделаем так, чтобы это сообщение появлялось только в определенное время суток.
<CENTER>
<FONT ID=f2 size=5 color=#AA1100 onclick=TimeAlert()> Text!
</font>
</center>
<SCRIPT language = VBScript> SUB TimeAlert()
timeNow = Now() HNow=Hour(timeNow)
If HNow > 6 OR HNow < 24 then Alert timeNow
End if END SUB </script>
При нажатии кнопкой мыши на текст будет выведено сообщение о текущей дате и времени, при условии, что событие onClick произошло между 6 и 24 часами на машине клиента.
Здесь для вывода сообщения использована функция Alert, которая удобна для вывода коротких сообщений, а также на этапе отладки VBS-кода. Обратите внимание на использование конструкции ветвления If. Полный синтаксис условного оператора выглядит следующим образом