Электронная коммерция. Учебное пособие по выполнению практических работ
.pdf
3.3. Использование функций в сценариях
<!--//
function F1(S,K,D,N) {var a=(S*K-D)/N return a
}
//--> </script> </Head> <BODY> <script> <!--//
var S1=500 ;K1=30; n1=5;D1=1000; var a=F1(S1,K1,D1,n1);
document.write("Заработок членов бригады", a ,"рублей") document.write("Заработок бригадира", b=a+D1,"рублей") //-->
</script>
</Body>
</HTML>
При описании функции использованы формальные параметры S, k, D, n. Вызов функции осуществляется при помощи обращения F1(S1, k1, D1, n1). В обращении формальные параметры S, k, D, n заменены фактическими параметрами S1, k1, D1, n1. Вычисленное значение à возвращается в программу и при помощи метода write объекта document выводится на экран монитора.
Задание 3.9. Расчет зарплаты членов бригады при получении суммы в у.е.
и использовании в программе функции
Цель задания: научиться создавать Web-документ со сценарием на языке JavaScript с использованием функции.
Задание: вычислить зарплату в рублях членов бригады, если суммарный заработок бригады получен в у.е. Условия задания приведены в примере 3.2. При вычислениях использовать функцию.
Выполнение:
1.Открыть Блокнот, выполняя команды Пуск Программы Стандартные Блокнот.
2.Набрать программу в соответствии с примером 3.3, листинг 3.5.
71
Часть 3. Примеры использованя сценариев на языке JavaScript
3.Числовые данные принять в соответствии с вариантом, заданным преподавателем. Данные приведены в таблице 3.2.
4.Сохранить программу в своей папке с расширением .txt, присвоив файлу имя JS3.
5.Сохранить программу в своей папке с расширением .htm, присвоив файлу имя JS3.
6.Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS3.htm.
3.4.Использование форм для создания интерактивных документов
В интерактивных документах представляется возможность удобного формализованного ввода исходных данных и формализованного вывода результатов вычислений. Для этого используются формы. Для примера 3.3 в поля форм вводятся значения суммарного заработка S в у.е., курса валюты K в рублях за 1 у.е. k, доплаты бригадиру D в рублях, число членов бригады n, включая бригадира. Результаты вычислений помещаются в соответствующие поля форм после нажатия левой клавишей мыши по кнопке
Вычислить.
Действия пользователя (например, нажатие на клавишу мыши или другие действия с элементами форм HTML) вызывают событие. В коде программы перехват и обработка события задается в параметрах элементов форм. Имя параметра обработки события начинается с приставки on. После этого следует имя события. Так, событие Click, обусловленное нажатием клавиши мыши, записывается как onClick. Параметрами обработки события могут быть операторы языка JavaScript. Так, можно задать вызов функции, которая должна выполняться при возникновении события. Например, onClick = «F1(фактические параметры функции)». Для работы с формой в языке принята следующая конструкция:
<FORM name="form1"> Описание формы </FORM>
Здесь form1 это заданное пользователем имя формы.
Так, для работы с формой, при помощи которой вводятся фактические параметры функции и помещаются в параметры обра-
72
3.4. Использование форм для создания интерактивных документов
ботки, события можно записать в виде кода программы, представленной на листинге 3.6/
Листинг 3.6. Код программы с формой
<FORM name="form1">
Получили, $:<input type="text" size=5 name="S1"><hr> Курс (рублей. за у.е.):<input type="text" size=5 name="K1"><hr> Доплата(руб):<input type="text" size=5 name="D1"><hr> Числочленов:<input type="text" size=5 name="N1"><hr> <input type="button" value=Вычислить onClick="document.form1.res.value=F1()"><br>
Зарплата члена бригады,руб:<input type="text" name=res size=4><br>
Зарплата бригадира,руб:<input type="text" name=res+D1 size=4><br>
<input type="reset" value=Обновить> </FORM>
Пример 3.4
Ниже на листинге 3.7 приведен код программы на языке HTML с включением сценария на языке JavaScript, в котором используется форма для ввода значений и производится обработка значений из формы. Условия задачи соответствуют примеру 3.3.
Листинг 3.7. Код программы с включением формы
<HTML>
<HEAD>
<TITLE>Использование форм для ввода и обработки событий из формы</TITLE>
<script> <!--// function F1()
{
var S=Number(document.form1.S1.value) var K=Number(document.form1.K1.value) var D=Number(document.form1.D1.value) var N=Number(document.form1.N1.value) var a=(S*K-D)/N;
return a
}
//-->
73
Часть 3. Примеры использованя сценариев на языке JavaScript
</script>
</Head>
<BODY>
<FORM name="form1">
Получили, $:<input type="text" size=5 name="S1"><hr> Курс(рублей. за у.е.):<input type="text" size=5 name="K1"><hr> Доплата(руб):<input type="text" size=5 name="D1"><hr> Числочленов:<input type="text" size=5 name="N1"><hr> <input type="button" value=Вычислить onClick="document.form1.res.value=F1()"><br>
Зарплата члена бригады,руб:<input type="text"name=res size=4><br>
Зарплата бригадира,руб:<input type="text" name=res+D1 size=4><br>
<input type="reset" value=Обновить> </FORM>
</Body>
</HTML>
Задание 3.10. Расчет зарплаты членов бригады при получении суммы в у.е.
и использовании в программе форм
Цель задания: научиться создавать Web-документ со сценарием на языке JavaScript с использованием форм.
Задание: создать форму для вычисления зарплаты в рублях членов бригады, если суммарный заработок бригады получен в у.е. Условия задания приведены в примере 3.2. Ввод исходных данных осуществить при помощи форм. При вы- числениях использовать функцию. Предусмотреть размещение результатов вычислений в поля формы.
Выполнение:
1.Открыть Блокнот, выполняя команды Пуск Программы Стандартные Блокнот.
2.Набрать программу в соответствии с примером 3.4, листинг 3.7.
3.Сохранить программу в своей папке с расширением .txt, присвоив файлу имя JS4.
5.Сохранить программу в своей папке с расширением .htm, присвоив файлу имя JS4.
74
3.4. Использование форм для создания интерактивных документов
6.Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS4.htm.
7.Ввести в поля формы исходные данные. Числовые данные принять в соответствии с вариантом, заданным преподавателем. Данные приведены в таблице 3.2.
8.Нажать кнопку Вычислить и получить результаты вычислений в полях формы.
9.Нажать кнопку Обновить и ввести новые данные, соответствующие следующему варианту данных.
10.Нажать кнопку Вычислить и получить результаты вычислений для новых исходных данных в полях формы.
11.Сохранить программу и результаты вычислений в своей
папке.
Вид формы до заполнения показан на рисунке 3.5 В поля формы заносится суммарный заработок бригады, курс
валюты, доплата бригадиру, число членов бригады. После нажатия на кнопку Вычислить результаты расчета появляются в соответствующих полях.
Вид формы после заполнения полей формы данными и нажатия кнопки Вычислить показан на рисунке 3.6.
|
Рис. 3.6. Вид формы после |
|
заполнения данных |
Рис. 3.5. Вид формы до |
и нажатия на кнопку |
заполнения |
Вычислить |
75
Часть 3. Примеры использованя сценариев на языке JavaScript
Задание 3.11. Самостоятельная работа
Рассчитать зарплату каждого члена бригады и бригадира при получении зарплаты за работу в у.е. Зарплату вычислить с учетом отчислений на подоходный налог в размере 12% от полученной зарплаты для членов бригады и 15% для бригадира. Вычислить также суммарные отчисления в бюджет. Исходные данные принять в соответствии со своим вариантом из таблицы 3.2.
Для вычислений требуется составить программу:
а) с использованием функции; б) с использованием форм.
При вычислении зарплаты членов бригады использовать формулу
a ((S * K D) / N )*.88,
при вычислении зарплаты бригадира использовать формулу
name (res D1)*.85.
Отчисления в бюджет будут складываться из отчислений членов бригады
a1 ((S * K D) / N )*.12 * (N 1)
и отчислений от зарплаты бригадира (.15 от заработка бригадира).
76
Часть 4. Создание динамических графиков
В этом разделе рассмотрена программа для создания приближающегося рисунка. Рисунок после наведения на него указателя курсора начинает приближаться. Для этого используется функция gpict( ). Код программы для функции gpict( ) приведен ниже на листинге 3.7.
Листинг 3.7. Код программы для функции gpict ( )
var d=document var w=100 function gpict()
{
if (w<300) {w=w+10 d.mypict.width = w
setTimeout("gpict()",500)
}
}
Функция gpict() это функция, создаваемая пользователем. Она использует стандартную функцию setTimeout("gpict()",500). При помощи функции setTimeout("gpict()",500) производится повторный вызов функции gpict() через каждые 500 миллисекунд (число 500 можно заменить на другое значение). При каждом повторном вызове функции ширина рисунка w увеличивается на 10. В данной программе начальная ширина w=100. Увеличение происходит до заданного значения. В данном примере это 300. Этим достигается эффект приближения рисунка. При достижении конечного значе- ния процесс приближения прекращается. В сценарии также используется стандартная функция onMouseOver="gpict()". При наведении указателя курсора на рисунок осуществляется вызов функции gpict(). Полностью код программы приведен на листинге 3.8.
Листинг 3.8. Код программы для создания приближающегося изображения
<HTML>
<HEAD>
<TITLE> Увеличивающееся изображение </TITLE>
77
Часть 4. Создание динамических графиков
<script> <!--//
var d=document var w=100 function gpict()
{
if (w<300) {w=w+10 d.mypict.width = w
setTimeout("gpict()",500)
}
}
//--> </script> </Head> <BODY>
<h4> При наведении курсора на изображение оно приближается
</h4>
<img src="p1.jpg" name=mypict width=100 onMouseOver="gpict()">
</Body>
</HTML>
В листинге используется имя рисунка p1.jpg. В программе рисунку присваивается имя mypict.
Задание 3.12. Создание динамических графиков в веб-документе
Цель задания: научиться создавать динамический рисунок в веб-документе.
Задание: составить код программы для включения в веб-документ динамического рисунка.
Выполнение:
1.Открыть Блокнот, выполняя команды Пуск Программы Стандартные Блокнот.
2.Набрать код программы в соответствии с листингом 3.8.
3.Выбрать и поместить в свою папку рисунок с расширением
.jpg или .gif. Для этого выполняются команды Пуск Поиск.
Âокне Результаты поиска выбираем Файлы и папки и в диалоговое окно вводим *.jpg или *.gif. Нажимаем кнопку Найти. В пра-
78
3.4. Использование форм для создания интерактивных документов
вом разделе диалогового окна появляется перечень рисунков с заданным расширением. Выбираем один из рисунков и помещаем его в свою папку.
4.В программе заменить p1.jpg на имя и расширение выбранного рисунка.
5.Сохранить программу в своей папке с расширением .txt, присвоив файлу имя JS5. В окошке Тип файла выбрать Текстовый файл (*.txt).
6.Сохранить программу в своей папке с расширением .htm, присвоив файлу имя JS5. В окошке Тип файла выбрать Все файлы.
7.Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS5.htm. Проверить наличие эффекта приближающегося изображения. На рисунке 3.7 показан рисунок до наведения на него указателя курсора. На рисунке 3.8 показан рисунок в конце процесса приближения. Процесс приближения возникает при наведении указателя курсора на рисунок.
Рис. 3.7. Рисунок до наведения указателя курсора
Рис. 3.8. Рисунок в конце процесса приближения
79
Часть 5. «Использование языка XML»
XML (eXtensible Markup Language) — расширяемый язык разметки документов.
При помощи XML выполняется наполнение создаваемого документа содержанием с указанием разметки, определяется структура документа, типы данных этого документа. Язык широко применяется при передаче данных в сетях Интернет и интранет.
Êосновным характеристикам языка XML относятся:
при помощи языка создаются текстовые файлы структурированных данных, язык обеспечивает подготовку и настройку XML-документов со сложной структурой;
cинтаксис языка похож на синтаксис HTML, однако XML
обладает более высокими возможностями. К ним относится возможность создавать собственные теги (флаги, дескрипторы), возможность помещать описание структуры документа и типов данных отдельно от документа, гибкость. В HTML-документе формат сайта и его содержимое находятся вместе в одном документе. В XML-документе имеется возможность информацию о компоновке размещать отдельно, что упрощает работу с Веб-документами, например, при изменении его вида;
язык понятен для понимания как человеку, так и компьютеру;
на базе языка образуется целое семейство языков разметки, учитывающих специфику предметной области, например, MathML и др.
Âэлектронной коммерции используется язык ebXML (electronic business XML) — это технология взаимодействия бизнес-про- цессов, предназначенная для упрощения ведения электронной коммерции и удешевления электронного обмена документами (EDI). При использовании ebXML производится кодирование коммерческих данных в форме XML-документов, реализуются стандартные сценарии, шаблоны и формы, например, формы заключения транзакции.
обеспечивает возможность контроля правильности документа.
80