Главная | Обратная связь | Поможем написать вашу работу!

Сценарии и их использование

Под сценарием подразумевается программный код, который выполняется при обращении пользователя к информационному ресурсу. Существуют сценарии, которые выполняется на удаленном сервере сети Интернет, такие сценарии называются серверными. Сценарии, которые находятся внутри ресурса, полученного пользователем сети, называются клиентскими. Их выполняет программа пользователя сети.

В учебном пособии рассматриваются клиентские сценарии, написанные на языке JavaScript.

Запуск таких сценариев может производиться с помощью формы HTML страницы.

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

В общем виде формы бывают двух основных типов: серверные и клиентские. В первом случае обработка данных полученных из формы и возврат результатов выполняет серверная программа, расположенная на другом компьютере сети. Во втором случае программный код для работы с формой располагается с ней на одной странице. На рисунке 3.1 показаны элементы диалога формы HTML.

Рис.3.1. Элементы диалога HTML формы

На рисунке 3.1: 1- текстовое поле, 2- блок радиокнопок, 3 -ячейка, 4- командная кнопка, 5- список с однозначным выбором, 6 – список с многозначным выбором, 7 - текстовая область.

Для создания формы служит тег:

<!- - Элементы диалога - ->

</form>

Где:

frmName - идентификатор формы;

URI - адрес серверной программы;

Type - тип взаимодействия с серверной программой (POST или GET)

Клиентская форма задается тегом аналогичной структуры, но без задания параметров action и method.

Следует отметить, что элементы диалога формы создаются тегами, и в языке HTML нет средств позиционирования элементов диалога в контейнере формы. Задачу позиционирования можно решить, если использовать таблицу HTML. В этом случае в ячейки таблицы, задаваемые тегом TD, помещают теги элементов диалога, а таблицу не очерчивают.

3.1. Элементы диалога формы

Командная кнопка

Тег для размещения кнопки имеет вид:

Здесь:

ButtonType - тип кнопки:

· button - кнопка, требующая написания кода для ее обработчика;

· reset - кнопка для сброса значений в элементах диалога;

· submit - кнопка для соединения с сервером;

cmdName - идентификатор кнопки;

подпись - надпись на кнопке.

При написании скрипта локальной обработки формы, в тег создания кнопки добавляют обработчик события. Каждому событию на языке JavaScript поставлены в соответствие системные идентификаторы. При работе с формой пользователь делает щелчок мышью на кнопке. Такое событие называется onClick и его обработчик будет иметь вид: OnClick="functionName()" Здесь functionName – имя функции JavaScript в которой записан код обработки события. Такую функцию называют событийной функцией. При создании обработчиков идентификатор кнопкам можно не задавать и не использовать параметр name тега кнопки.

Событийная функция содержит код, написанный на языке JavaScript. Событийную функцию помещают внутри специального тега страницы SCRIPT в головной части страницы. Формат тега:

<! - - Код JavaScript - ->

</script>

Для задания функции используется следующее описание JavaScript:

function functionName(){

//Операторы

}

Среди операторов можно использовать оператор принудительного завершения работы функции return. Подробнее об операторах и особенностях языка JavaScript можно посмотреть приложение №2.

Если требуется, то функция может принимать исходные данные для своей работы. Тогда она должно обладать формальными параметрами.

Пример№1. Создание формы с командной кнопкой. При ее нажатии выводится сообщение Hello World в системное окно браузера.

<html>

<head>

function fHello(){

alert("Hello World!");

}

</script>

</head>

<body>

</form>

</body>

</html>

Пример №2. Изменим структуру функции, снабдив ее формальным параметром для вывода произвольного сообщения.

Код функции примет вид:

function fHello(mes){

alert(mes);

}

Тогда обращение к функции изменится:

Фактическое значение для формального параметра mes будет строка 'Hello World!'.

Пример №3. Текст сообщения вводится с помощью системного окна ввода, затем пользователь принимает решение о продолжении работы со страницей. Функция fHello примет вид:

function fHello(){

var mes="";

mes=prompt("message","Hello World","Dialog");

if (mes==null) mes="nothing";

alert(mes);

bDialog=confirm("Stop working?");

if (bDialog) window.close();

}

Если пользователь не ввел строку – получено значение null, то принимается значение строки nothing. Окно браузера закрывается методом close системного объекта window.

Текстовое поле

Элемент задается тегом:

Где:

txtName - идентификатор поля;

n^*- длина поля в символах;

m^* - максимальное число символов при вводе;

значение^* - значение по умолчанию;

* - необязательные параметры.

Если изменить тип поля на password, то ввод в поле становится закрытым символом *. Поле хранит введенную (выведенную) строку символов в свойстве value.

Пример. Страница с формой из трех полей ввода. В первое поле пользователь вводит сумму валюты, во втором поле он может изменить курс или оставить значение по умолчанию, а в третье поле выводится результат в рублях.

<html>

<head>

function fCalc(){

var forma=document.frmGo

var s,kurs,itogo;

s=forma.txtSumma.value;

kurs=forma.txtKurs.value;

s=parseFloat(s);

kurs=parseFloat(kurs);

itogo=kurs*s;

itogo=Math.round(itogo*100)/100;

forma.txtItog.value=itogo;

}

</script>

</head>

<body>

</form>

</body>

</html>

Чтобы работать с элементами формы с помощью кода, нужно получить объект указатель на форму с помощью оператора:

var forma=document.frmGo.

Идентификатор forma - экземпляр нашей формы.

Ссылка на форму выполняется с помощью объекта браузера document в виде document.frmGo. Здесь frmGo имя нашей формы. Для обращения к текстовым полям формы служит оператор разъименования, который представляет собой точку. Так оператор s=forma.txtSumma.value; означает запись в переменную s значения хранящегося в текстовом поле. Из текстового поля поступает строка символов, их преобразование в число выполняется с помощью функции parseFloat(s), s – строка с символами числа. Для округления полученного значения в рублях до второго знака после запятой служит метод round класса Math JavaScript (см. приложение №2).

При вводе пользователем чисел полезно проверять корректность ввода это можно сделать с помощью функции isNaN(s). Если строка s хранит символы пригодные для преобразования в число, то она возвращает логическое значение false, иначе true. Разделителем дробной части от целой части в языке JavaScript служит точка.

Перепишем нашу функцию, введя контроль над вводом данных.

function fCalc(){

var forma=document.frmGo

var s,kurs,itogo;

s=forma.txtSumma.value;

kurs=forma.txtKurs.value;

if (isNaN(s)||isNaN(kurs)){

alert("Bad numbers input!");

return;

}

s=parseFloat(s);

kurs=parseFloat(kurs);

itogo=kurs*s;

itogo=Math.round(itogo*100)/100;

forma.txtItog.value=itogo;

}

Теперь при неверном вводе курса или суммы будет выводиться сообщение об ошибке.

Текстовая область

Элемент диалога служит для вывода - ввода многострочного текста. Создается тегом:

</textarea>

Где:

areName - идентификатор элемента;

r - высота области в строках;

c - ширина области в символах.

Текст элемента хранится в свойстве value. При выводе текста, для формирования строк, в конец строки нужно включать ESC последовательность \n.

Флажки

Используются флажки для предоставления выбора пользователю данных из предопределенного набора значений. Флажок, используемый в блоках данных, с многозначным выбором называется ячейкой и создается тегом:

Здесь:

chkName - идентификатор флажка;

Для предварительной активизации флажка используется параметр checked (признак активности флажка - наличие символа Ö в его поле). Проверка состояния флажка и изменение его состояния в коде выполняется с помощью одноименного свойства checked. Значение false соответствует выключенному состоянию, а значение true активному.

В блоках с однозначным выбором используется флажок радиокнопка. Создается аналогичным тегом, в качестве типа следует указать значение radio.

Чтобы создать блок с однозначным выбором следует всем флажкам блока задать одинаковый идентификатор.

Пример. На рисунке 3.2 показана страница с тремя элементами диалога. Блок однозначного выбора с двумя радиокнопками, ячейка и командная кнопка для опроса состояния блока и ячейки. Результат опроса выводится в системное окно службы сообщений браузера.

Рис.3.2. Форма с флажками

Теги для создания формы примут вид:

<hr>

<input type="checkbox" name="chkBox" checked>Control<br>

</form>

Код функции fState для события кнопки onClick будет иметь вид:

function fState(){

var mes="";

mes+="Block action\n";

var forma=document.frmGo

if (forma.elements[0].checked){

mes+="One";

}

if (forma.elements[1].checked){

mes+="Two";

}

if (forma.chkBox.checked)

mes+="\nControl- OK";

else

mes+="\nControl- NO";

alert(mes);

}

Для опроса состояния блока кнопок используется коллекция elements формы. Она позволяет по индексу обратиться к любому элементу формы. Индексация ведется с нуля. Элементы диалога в коллекцию помещаются в порядке следования тегов из размещения в форму.

Списки

Элемент диалога позволяет пользователю выбрать значение из определенного набора данных. Пользователь может сделать однозначный выбор, либо отобрать несколько значений в произвольном порядке.

Список с однозначным выбором создается тегами:

<option value="значение1">строка1

<option value="значение2">строка2

…

</select>

Где:

lstName - идентификатор списка;

строка_i - текст элемента списка, выводимый на экран.

Список с многозначным выбором создается с помощью аналогичных тегов. В головной тег следует добавить ключевое слово multiple. Параметр value хранит символьное данное, связанное с конкретным элементом списка - строкой, на экране не отображается и является не обязательным.

При опросе списков однозначного выбора используется коллекция строк элементов списка options. Символы выбранной строки хранятся в свойстве text. Для доступа к строке выбранного элемента нужно указать ее индекс. Индексируются строки с нуля. Значение индекса выбранной строки хранится в свойстве selectedIndex коллекции. Доступ к значению строки осуществляется с помощью свойства value.

При многозначном выборе следует выполнить перебор всех строк коллекции и отобрать активные строки путем проверки свойства selected, коллекции options для каждой строки. Для определения количества строк нужно использовать свойство length коллекции.

Пример №1. Требуется выполнить опрос списка с однозначным выбором. Нужно вывести выбранную строку списка и значение, связанное с этой строкой. Теги для создания формы:

<option value="YES!">message 1

<option value="NO!" selected>message 2

<option value="OK!">message 3

</select>

</form>

В списке три строки, вторая строка выбрана по умолчанию.

При выборе строки списка порождается событие onChange и выполняется функция fState, в которой написан код опроса списка.

Код функции:

function fState(){

var mes="";

var idx;

var forma=document.frmGo;

idx=forma.lstMes.selectedIndex;

mes=forma.lstMes.options[idx].text

+"\n"+forma.lstMes.options[idx].value

alert(mes);

}

Результат накапливается в символьную переменную mes и ее значение выводится службой сообщений браузера.

Пример №2. Требуется опросить список из примера номер 1. Список многозначный. Результат опроса выводится в текстовую область формы (см. рисунок 3.3).

Теги для создания формы примут вид:

<option value="YES!">message 1

<option value="NO!">message 2

<option value="OK!">message 3

</select><br>

</textarea>

</form>

Опрос производится при нажатии командной кнопки.

Код функции опроса:

function fState(){

var mes="";

var forma=document.frmGo;

for (i=0;i<forma.lstMes.length;i++){

if (forma.lstMes.options[i].selected){

mes+=forma.lstMes.options[i].text+"-"

+forma.lstMes.options[i].value+"\n";

}

forma.display.value=mes;

}

Рис.3.3. Опрос списка многозначного выбора

Вывод происходит в текстовую область display. На рисунке показан результат работы функции. Выбор в списке производится щелчками мыши при нажатой клавише CTRL. Можно отметить первый элемент списка при нажатой клавише CTRL, а последний элемент выбрать при нажатой клавише SHIFT. В результате будет выделено сразу несколько строк списка.

Контрольные вопросы

1. Какие типы сценариев используются в сети Интернет?

2. Дайте классификацию элементов диалога клиентских HTML формах.

3. Как создать клиентскую форму HTML?

4. Что такое событие JavaScript и событийная процедура?

5. Как программируется реакция при нажатии кнопки формы?

6. Какую структуру имеет страница при размещении скрипта обработки формы?

7. Как получить доступ в коде JavaScript к форме и ее элементам диалога?

8. Какие типы текстовых полей используются при создании форм?

9. В чем разница между текстовым полем и текстовой областью формы?

10. Как программируется опрос блока однозначного выбора формы?

11. Как программируется опрос блока многозначного выбора формы?

12. Как опрашивается список однозначного выбора формы?

13. Как опрашивается список многозначного выбора формы?

Приложения

Приложение №1

Стилевые параметры

Стилевые параметры применяются к конкретному тегу XML. Тег документа образует узел с определенным содержанием.

Если используются параметры значением, которых является некоторый размер – число, то это число задается в виде Ne, где N число, e обозначение единицы измерения. Единицы измерения могут быть:

px - пикселы;

em - высота текущего шрифта, используемого в узле;

ex - высота строчной буквы x текущего шрифта.

Например: 24px – 24 пиксела.

Стилевые параметры разделяют на группы.

Первая группа параметров. Эти параметры служат для оформления узла, они даны в таблице 1.1.

Таблица 1.1

Оформление узла

Параметр	Значение
background-image	Загрузка изображения: url(path). Здесь path – путь к файлу изображения
background-color	Цвет фона узла. Это системная цветовая константа, как в HTML, либо шестнадцатеричное число #rrggbb – код цвета в формате RGB
background-repeat	Способ вывода изображения: repeat (повторять), repeat-x(повторять горизонтально), repeat-y(повторять вертикально), no-repeat (не повторять).
background-position	Выравнивания изображения: left, right, top, bottom, center (см.рисунок 1).
width	Ширина области вывода изображения
height	Высота области вывода изображения

Размещение изображения в узле выполняется с указанием его выравнивания. На рисунке 1 показаны способы выравнивания по полю узла.

Рис.1. Выравнивание по полю узла

Вторая группа, это параметры для работы с текстом. Они показаны в таблице 1.2.

Таблица 1.2

Оформление текста

Параметр	Значение
display	Отображение текста: block(отдельный фрагмент, строка), none(отмена действия)
font-family	Тип шрифта
font-size	Размер шрифта
font-style	Начертание текста: normal (обычный), italic (курсивный), oblique (рукописный)
font-weight	Яркость шрифта: normal(обычный), bold(жирный), bolder(усиление яркости), lighter(максимальная яркость). Либо диапазон 100-900. Выбранное значение должно быть кратно 100.
color	Цвет символов
text-transform	Регистр символов: uppercase(прописные буквы), lowercase(строчные буквы), capitalize(все первые буквы слов прописные).
text-align	Выравнивание текста в узле: left, right, center
text-decoration	Оформление текста: underline (подстрочный), overline(надстрочный), line-through(перечеркнутый)

Третья группа параметров позволяет оформлять текстовые области.

С помощью них определяют обрамление, отступы, характер обтекания текстом узла и выравнивание по границе окна программы просмотра. Эти параметры даны в таблице 1.3.

Таблица 1.3

Оформление областей

Параметр	Значения
border-style	Тип рамки:solid, double, none
border-width	Толщина рамки: thin, medium, thick. Или размер
border-color	Цвет рамки
padding-top	Просвет между рамкой и окружающим ее текстом c верху
padding-bottom	Просвет между рамкой и окружающим ее текстом с низу
padding-left	Просвет между рамкой и окружающим ее текстом с лева
padding-right	Просвет между рамкой и окружающим ее текстом с права
padding	Просвет между рамкой и окружающим ее текстом
float	Расположение элемента относительно другого: left, right, none.
clear	Отмена действия float: left, right.
margin-left	Левый отступ от окна программы
margin-right	Правый отступ от окна программы
margin-bottom	Отступ снизу от окна программы
margin-top	Отступ сверху от окна программы

Приложение №2

⇐ Предыдущая 1 2 3 4 5 6 7 8910 Следующая ⇒

Воспользуйтесь поиском по сайту: