Second_magistr / ВЕБ-програм / методичка

If условие1 Then

...

ElseIf условие2 Then

...

ElseIf условие3 Then

...

...

Else

...

End If

где условие3 — логические выражения, составленные из переменных, функций, арифметических знаков сравнения и логических операторов Or и And. Наличие оператора ElseIf предполагает проверку второго условия при невыполнении первого и т.д. Эта особенность делает возможности оператор условного ветвления сравнимыми с таковыми оператора Select Case, который встретится нам

вдальнейших примерах.

Взаключение в качестве справочного материала приведем полный список событий, которые генерируются браузером IE при просмотре Web-страницы. Обратите внимание на то, что все названия начинаются с префикса "on".

44

ЗАДАНИЕ:

Модифицируйте результаты предыдущей лабораторной работы таким образом, чтобы форма регистрации участника конференции зависела от того, в какое время была выполнена загрузка странички из Интернета (т.е. выглядела бы по-разному в разное время суток).

ЛАБОРАТОРНАЯ РАБОТА № 8

Динамические элементы управления

В настоящей лабораторной работе мы продолжим рассмотрение примеров работы со сценариями на языке VBS. Основное внимание здесь будет уделено организации динамической обработки событий, поступающих от таких элементов управления, как кнопки BUTTON, флажки CHECKBOX, переключатели RADIO и списки выбора SELECT.

BUTTON

В прошлой лабораторной работе нами был рассмотрен пример вывода информации в текстовое поле на этапе загрузки документа в браузер. Модифицируем этот пример таким образом, чтобы вводимый пользователем с клавиатуры текст отображался ниже текстового поля при нажатии кнопки. Для этого сразу после тега с описанием поля ввода добавим тег с элементом управления "кнопка".

<CENTER>q

<INPUT type=BUTTON value="Переброс текста" name=B0 size=90> </center>

Здесь мы задали имя кнопки как "B0". Обработчик события предполагается связать с элементом управления, так как описано в конце предыдущей лабораторной работы, поэтому в теле тега указывать событие и его обработчик в явном виде нет необходимости.

Добавим элемент, в который будет выводиться текст из поля ввода.

<CENTER>

<FONT ID=f3 size=5 color=#AA1100>

Для вывода! </font> </center>

Запишем код скрипта следующим образом

<SCRIPT language = VBScript> SUB B0_onDblClick()

f3.innerText=Textbox.value

f3.size=24

f3.color=RGB(RND()*255, RND()*255, RND()*255) END SUB

</script>

Сразу после загрузки страничка будет выглядеть так

Если теперь пользователь введет в соответствующее поле произвольный текст и двойным щелчком нажмет на кнопку "Переброс текста!", мы увидим следующий результат

46

Обратите внимание на то, что в приведенном коде использовано событие DblClick — "двойной щелчок". Для задания цвета шрифта использована функция RGB(), принимающая в качестве параметров интенсивности красного, зеленого и синего компонентов. Эти интенсивности могут принимать значения от 0 до 255. Встроенная функция RND() возвращает случайное число в промежутке от 0 до 1. Таким образом, приведенный код изменяет цвет текста при каждом двойном щелчке на кнопке.

В коде скрипта нами использован атрибут innerText тега <FONT>. Этот атрибут позволяет Web-программисту управлять всем текстом, расположенным между открывающим и закрывающим тегами соответствующего элемента. В приведенном примере VBSскрипт использует это свойство, и заменяет строку «Для вывода!» той строкой, которую пользователь набрал в поле Textbox.

Отметим также, что через атрибут innerText можно управлять не только текстом самого элемента, но также и текстом любых других элементов, вставленных в него. Этот атрибут, как и три последующих, присущ всем HTML-элементам. Свойство outerText дает возможность менять весь текст элемента, включая открывающий и закрывающий теги. Аналогично свойства innerHTML и outerHTML дают доступ к HTML-коду тега. Причем свойство outerHTML позволяет изменять весь код данного элемента, включая его открывающий и закрывающий теги.

Продолжая тему работы с элементом управления "кнопка", покажем, каким образом один обработчик события может быть связан с несколькими кнопками. Для этого добавим на нашу страницу три кнопки, и выделим тег <FONT> для вывода информации.

<CENTER>

<INPUT type=BUTTON value="Часы" name=B1 size=20 onclick=NowTimeAlert(B1)>

</center>

<CENTER>

<INPUT type=BUTTON value="Минуты" name=B2 size=20 onclick=NowTimeAlert(B2)>

</center>

<CENTER>

<INPUT type=BUTTON value="Секунды" name=B3 size=20 onclick=NowTimeAlert(B3)>

</center>

Данные кнопки при нажатии должны выдавать текущие значения часа, минуты и секунды, соответственно. В качестве обработчика события onClick каждой из кнопок указана одна и та же процедура NowTimeAlert(парам). В качестве параметра в эту функцию передается тот экземпляр объекта "кнопка" (BUTTON), из которого происходит вызов процедуры-обработчика.

<SCRIPT LANGUAGE = VBScript>

SUB NowTimeAlert(obj)

timeNow = Now()

HNow=Hour(timeNow)

MNoW=Minute(timeNow)

SNoW=Second(timeNow)

Select Case obj.Name Case "B1" f3.innerText=HNow Case "B2" f3.innerText=MNow Case "B3" f3.innerText=SNow End Select

END SUB </script>

<H1> Выберите флажок </h1>

<TABLE border bgcolor=Cyan width=200> <TR><TD><INPUT type=CHECKBOX name=Check1

onClick=ChecklClicked(Check1)></td></tr> <TR><TD><INPUT type=CHECKBOX name=Check2

onClick=ChecklClicked(Check2)></td></tr> <TR><TD><INPUT type=CHECKBOX name=Check3

onClick=ChecklClicked(Check3)></td></tr> <TR><TD><INPUT type=CHECKBOX name=Check4

onClick=ChecklClicked(Check4)></td></tr>

</table>

</center>

Процедура ChecklClicked(парам) параметризирована, и выполняет некоторые действия в момент установки или сброса какого-либо из флажков. Однако обычно назначение флажков на Web-страничке иное. Важно не обработать установку и сброс флажка непосредственно, а учесть, выбран тот или иной флажок или нет. Для такой проверки используется свойство Checked, которое принимает значение True, если флажок установлен, и False – иначе. Создадим процедуру CheckCHECKBOXs(), проверяющую последовательно установлены ли флажки из списка.

<CENTER>

<INPUT type=BUTTON value="Проверка" name=B3 size=20 onclick=CheckCHECKBOXs()>

</center>

<SCRIPT language=VBScript> SUB CheckCHECKBOXs()

If Check1.checked Then

Alert Check1.Name+" Выбран!" End If

If Check2.checked Then

Alert Check2.Name+" Выбран!" End If

If Check3.checked Then

Alert Check3.Name+" Выбран!" End If

If Check4.checked Then

Alert Check4.Name+" Выбран!" End If

END SUB </script>

<SCRIPT language=VBScript> SUB Radio_1_Clicked()

TextForRadio.value="Выбран 1" END SUB

SUB Radio_2_Clicked() TextForRadio.value="Выбран 2"

END SUB

SUB Radio_3_Clicked() TextForRadio.value="Выбран 3"

END SUB </script>

<CENTER>

<INPUT type=TEXT name=TextForRadio size=60> </CENTER>

Результат загрузки страницы в IE и работы подпрограмм проверки приведен ниже.

SELECT

В заключение рассмотрим методы работы со списком выбора SELECT. Создадим следующий список

<SELECT name=Sp1 onClick=SelectSp1()> <OPTION> RED

<OPTION> BLUE

<OPTION> GREEN </select>

52

В дополнение к нему создадим текстовый элемент, который оформим в виде таблицы следующим образом

<CENTER>

<TABLE ID=flag border=0 bgcolor=Cyan width=20> <TR><TD><FONT size=34> X </font></td></tr> </table>

</center>

Теперь создадим код обработчика события, который будет вызываться в момент выбора пользователем одного из пунктов в списке SELECT. Для доступа к выделенному элементу будем использовать свойство SelectedIndex, которое содержит номер выбранного элемента. Все элементы нумеруются с "0". Для доступа к тексту строки в списке будем использовать свойство Text коллекции Options(индекс). Данная коллекция содержит в себе все элементы выпадающего списка и предоставляет к ним доступ. Для доступа к конкретному элементу списка нужно задать его номер. Кроме того, в программировании может оказаться полезным свойство списка Length, которое содержит общее число элементов списка. Таким образом, в нашем примере Sp1.Length вернет значение "3".

<SCRIPT language=VBScript> SUB SelectSp1()

si=Sp1.SelectedIndex flag.bgcolor=Sp1.Options(si).Text

END SUB </script>