Электронная коммерция. Учебное пособие по выполнению практических работ
.pdf
2.1. Элементы языка JavaScript
целой части точкой. Например, число 123.456. Кроме того, может использоваться экспоненциальная форма записи. Например, записанное ранее число может быть представлено в виде 0.123456Е3. Строковый литерал представляет собой последовательность символов, заключенную в одинарные или двойные кавычки. Например, "программа" или 'программа'.
2.1.2. Переменные
Переменные используются для хранения данных. Переменные представляются идентификаторами. Идентификатор должен начи- наться с символа латинского алфавита, либо с символа подчеркивания. После первого символа могут идти символы латинского алфавита цифры, знак подчеркивания. Перед идентификатором записывается служебное слово var. Например:
var a,b,c var d=5 var e=true
var k= "программа"
В этом примере переменная d имеет тип number, e — логиче- ский тип, k — тип string (строка). Тип function имеют все стандартные функции и функции, определяемые пользователем. Тип Object присваивается объектам и переменным, которые могут хранить объекты. Переменные, описанные в частях программы Head и Body, имеют одну и ту же область действия. Это глобальные переменные. Переменные, описанные в теле функции, являются локальными. Они работают только в пределах использующей их функции. Все переменные, используемые в программе, должны быть описаны. Для неописанной переменной фиксируется ошибка. Для обозначения неопределенного значения используется литерал null.
2.1.3. Выражения
Выражения строятся из литералов, переменных, знаков операций и скобок. Результатом выполнения выражения может быть число (целое или вещественное), строка или логическое выражение. К основным операциям относятся: + (сложение), – (вычитание), * (умножение), / (деление), ++ (увеличение значения на единицу), -- (уменьшение значения на единицу).
61
Часть 2. Создание веб-страниц и графики языком JavaScript
2.1.4. Объекты клиента
Программа Обозреватель (браузер), обрабатывающая веб-доку- мент, создает объекты JavaScript. Они являются основными инструментальными средствами. Свойства объектов могут задаваться, либо определяться значениями параметров флагов (тегов) языка HTML. Структура документа отражается в иерархической структуре объектов, соответствующих HTML-флагам. Родителем всех объектов является объект Windows. Он располагается на самом верхнем уровне иерархии. Этот объект представляет окно браузера и создается при запуске браузера. Для открытия нового окна и отображения в нем нового документа используется метод open, для закрытия используется метод close.
Подчиненными по отношению к объекту Windows являются объекты document, history, location, frame. Объект document в зависимости от своего содержания может иметь объекты, являющиеся для него подчиненными или дочерними. К подчиненным относятся объекты form, image, link, area, anchor, layer, plugin, applet. Для каждой страницы создается один объект document. Некоторые свойства его соответствуют параметрам флага <Body>: bgColor, fgColor, linkColor, alinkColor, vlinkColor.
Методы write и writeln записывают в документ текст, задаваемый параметрами. Например, для отображения на экране монитора результатов действий, задаваемых в программе, записывается следующий текст:
document.write («текст», формула или переменная) или document.writeln («текст», формула или переменная).
Во втором случае вывод производится в новую строку. Если документ содержит графические изображения, то доступ к ним может быть осуществлен при помощи переменной, указанной в параметре name тега <IMG>. Например:
<IMG src=«имя рисунка.gif или .jpg» name=p1 width=100>.
Здесь «имя рисунка.gif или .jpg» — это задаваемое пользователем имя рисунка с расширением .gif или .jpg. Имя переменной в программе p1, параметр width=100 — это ширина рисунка в пикселях. Обязательный параметр src определяет URL-адрес файла с изображением. Другим способом доступ к графическим рисункам осуществляется при помощи свойства images объекта image. Если документ содержит несколько рисунков, то доступ к первому ри-
62
2.1. Элементы языка JavaScript
сунку осуществляется при помощи конструкции document.images(0), ко второму рисунку document.images(1) и т. д.
Если веб-страница содержит форму, то доступ к ней осуществляется либо при помощи флагов <Form>......</Form>, либо при помощи конструкции document.forms(0), document.forms(1)... и т. д. Например, можно записать:
<FORM name="form1">
.
.
Выражения, реализуемые в форме </FORM>
При записи document.forms(0) реализуется доступ к первой форме, при записи document.forms(1) реализуется доступ ко второй форме и т. д.
Свойства объекта history представляют адреса ранее загруженных веб-документов. Свойства объекта location связаны с URL-ад- ресами отображаемого документа. Свойства объекта frame связаны со специальным способом представления данных.
В языке JavaScript используется также сокращенная форма присвоения. Она представлена в следующей таблице.
Оператор присвоения |
Сокращенная форма оператора |
|
|
X=X+Y |
X+=Y |
|
|
X=X–Y |
X–=Y |
X=X*Y |
X*=Y |
X=X/Y |
X/=Y |
X=X%Y |
X%=Y |
|
|
|
|
В языке используются операции отношения, применимые к операндам любого типа. Это операции < (меньше), <= (меньше или равно), = = (равно), != (не равно), >= ( больше или равно), > (больше). К логическим операциям относятся ! (не), && (логиче- ское И), (логическое ИЛИ). Например, если переменная Х имеет значение true, то выражение !Х имеет значение false.
Для строковых переменных справедлива операция соединения строк. Например, в выражении a="строковая" + "переменная" переменная а получит значение "строковая переменная". Если a="строковая" и b="переменная", то в результате выполнения опе-
63
Часть 2. Создание веб-страниц и графики языком JavaScript
рации а+=в переменная а получит значение "строковая переменная". Дальше записаны операции в последовательности, соответствующей убыванию приоритетов операций: ++ (инкремент), – – (декремент), ! (отрицание), – (унарный минус), * (умножение), / или % (деление, остаток от деления), + (сложение), — (вычитание), операции сравнения (<, >, <=, >=), = = (равенство), != (неравенство), && (логическое И), (логическое ИЛИ), операции присваивания ( =, +=, –=, *=, /=, %=, !=). Для изменения приоритета выполнения операций используются скобки. Например, в выражении x=(a+b)/c сначала выполняется операция суммирования переменных а и в, а затем деление суммы на переменную с.
2.1.5. Функции
Часть программы (подпрограммы), которая может многократно использоваться в процессе работы программы, может выделяться в структурную единицу — функцию. Функции могут быть стандартными и написанными пользователем. К стандартным функциям относятся, например, такие математические функции как abs (абсолютное значение переменой), тригонометрические функции sin, cos, tan, экспонента exp и др. Они относятся к объекту Math и являются его методами. Например, для вычисления синуса переменной Х и присвоения этого значения переменной y следует записать y=Math.sin(x). Описание функций, создаваемых пользователем, имеет вид function F (v) {s}. Здесь F — это имя функции, v — формальные параметры. В списке формальных параметров переменные разделяются запятой. Тело функции s. Это выражения, по которым вычисляется значение функции. В нем задаются действия, которые необходимо выполнить для получения результата. Для задания конкретных значений параметрам функции они должны быть описаны в обращении к функции. Обращение к функции имеет вид: F(w) или F(w1, w2, ..., wn), где w1, w2, ..., wn — это фактические значения, с которыми производятся действия, записанные в теле функции. При отсутствии параметров описание функции имеет вид F( ){S}, а вызов функции F( ).
2.1.6.Включение программ (сценариев)
на языке JavaScript в HTML-документ
Сценарии (программы) на языке JavaScript помещаются в веб-документ, написанный на языке HTML при помощи флагов
64
2.1. Элементы языка JavaScript
(тегов) <script> и </script>. Параметром флага script является слово language. При использовании языка JavaScript в тексте HTML-до- кумента запись имеет вид <script language ="JavaScript">, при использовании языка VBSript запись имеет вид <script language ="VBScript">. Параметр language ="JavaScript" можно не записывать, так как браузер выбирает этот язык по умолчанию. При использовании в веб-документе флагов, которые не поддерживаются конкретным браузером, веб-страница может отображаться неверно. Для исключения этого рекомендуется помещать операторы языка JavaScript в флаги комментария <!,-->, а перед закрывающим флагом рекомендуется ставить символы //. Таким образом, сценарий на языке JavaScript в теле HTML-документа имеет вид:
<script> <!--//
Операторы языка JavaScript
//--> </script>
HTML-документ может содержать несколько сценариев на языке JavaScript. Они могут помещаться как в раздел <Head>, так и в раздел <Body>.
65
Часть 3. Примеры и задания по использованию сценариев на языке JavaScript
âHTML-документе
3.1.Создание Web-документа с включением сценария на JavaScript
Создание Web-документа с включением сценария на языке JavaScript рассмотрим на примере 3.1.
Пример 3.1. Расчет зарплаты членов бригады
Пусть требуется рассчитать заработок членов бригады из пяти человек (включая бригадира). Бригада заработала 10000 рублей. Доплата бригадиру 1000 рублей. При написании программы на языке JavaScript будем использовать следующие идентификаторы:
a — заработок члена бригады; b — заработок бригадира;
S — суммарный заработок бригады; D — доплата бригадиру.
Заработок члена бригады будем находить по формуле a=(S–1000)/5, заработок бригадира по формуле b=a+1000.
Код программы на языке HTML с включением сценария на языке JavaScript может иметь вид, показанный ниже на листинге 3.3.
Листинг 3.3. Код программы для расчета зарплаты
<HTML>
<HEAD>
<TITLE> Расчет зарплаты </TITLE> </HEAD>
<BODY>
<script> <!--//
var S=10000 ; D=1000
document.write ("Заработок члена бригады", a=(S-1000)/5," ","рублей")
document.write("Заработок бригадира", b=a+1000,"рублей")
66
3.1. Создание Web-документа с включением сценария на JavaScript
//--> </script> </Body> </HTML>
Результат работы программы отображен ниже:
Заработок членов бригады 1800 рублей Заработок бригадира 2800 рублей.
Задание 3.7. Расчет зарплаты членов бригады при получении суммы в рублях
Цель задания: научиться создавать простейший сценарий на языке Задание: создать веб-документ, включающий сценарий на языке
JavaScript, для расчета зарплаты членов бригады. Условия задания приведены в примере 3.1.
Выполнение:
1.Открыть Блокнот, выполняя команды Пуск Программы Стандартные Блокнот.
2.Набрать программу в соответствии с примером 3.1.
3.Числовые данные принять в соответствии с вариантом, заданным преподавателем. Данные приведены в таблице 3.1.
4.Сохранить программу в своей папке с расширением .txt, присвоив файлу имя JS1.
5.Сохранить программу в своей папке с расширением .htm, присвоив файлу имя JS1.
6.Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS1.htm.
|
|
Таблица 3.1 |
|
Варианты задания |
|
|
|
|
Вариант |
Сумма заработка S, руб. |
Доплата бригадиру D, руб. |
|
|
|
1 |
15000 |
1500 |
2 |
20000 |
2000 |
3 |
25000 |
2500 |
|
|
|
4 |
30000 |
3000 |
|
|
|
5 |
35000 |
3500 |
|
|
|
|
|
|
67
Часть 3. Примеры использованя сценариев на языке JavaScript
Вариант |
Сумма заработка S, руб. |
Доплата бригадиру D, руб. |
|
|
|
6 |
40000 |
4000 |
|
|
|
7 |
45000 |
4500 |
|
|
|
8 |
50000 |
5000 |
|
|
|
9 |
55000 |
5500 |
|
|
|
10 |
60000 |
6000 |
|
|
|
11 |
65000 |
6500 |
|
|
|
|
|
|
3.2.Создание веб-документа на языке HTML
ñвключением сценария на языке JavaScript
Создание веб-документа на языке HTML с включением сценария на языке JavaScript рассмотрим на примере 3.2.
Пример 3.2
Расчет зарплаты членов бригады при получении суммы в у.е.
Пусть требуется рассчитать заработок членов бригады из пяти человек. Бригада за выполненную работу получила 500 у.е. Курс валюты составляет 30 рублей за 1 у.е. Доплата бригадиру 1000 рублей. При написании программы на языке JavaScript будем использовать следующие идентификаторы:
a — заработок члена бригады; b — заработок бригадира;
S — суммарный заработок бригады в у.е.; D — доплата бригадиру в рублях;
k — курс валюты, рублей за 1 у.е.
Заработок члена бригады будем находить по формуле a= (S*k-1000)/5, заработок бригадира по формуле b=a+1000.
Код программы на языке HTML с включением сценария на языке JavaScript может иметь вид, показанный ниже на листинге 3.4.
68
3.2. Создание веб-документа на языке HTML
Листинг 3.4. Код программы расчета зарплаты, сумма которой выплачена в у.е.
.
<HTML>
<HEAD>
<TITLE> Расчет зарплаты </TITLE> </HEAD>
<BODY>
<script> <!--//
var S=500; D=1000; k=30;n=5
document.write ("Заработок членов бригады", a=(S*k-D)/n," ","рублей")
document.write ("Заработок бригадира", b=a+D,"рублей") //-->
</script>
</Body>
</HTML>
Задание 3.8. Расчет зарплаты членов бригады при получении суммы в у.е.
Цель задания: научиться создавать сценарий на языке JavaScript
Задание: создать веб-документ, включающий сценарий на языке JavaScript, для расчета зарплаты членов бригады, если суммарный заработок бригады получен в у.е. Условия задания приведены в примере 3.2.
Выполнение:
1.Открыть Блокнот, выполняя команды Пуск Программы Стандартные Блокнот.
2.Набрать программу в соответствии с примером 3.2, листинг 3.4.
3.Числовые данные принять в соответствии с вариантом, заданным преподавателем. Данные приведены в таблице 3.2.
4.Сохранить программу в своей папке с расширением .txt, присвоив файлу имя JS2.
5.Сохранить программу в своей папке с расширением .htm, присвоив файлу имя JS2.
6.Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS2.htm.
69
Часть 3. Примеры использованя сценариев на языке JavaScript
|
|
|
|
Таблица 3.2 |
|
|
|
Варианты задания |
|
||
|
|
|
|
|
|
|
Число |
Сумма заработка |
Доплата |
Êóðñ, |
|
Вариант |
членов |
бригадиру, |
|||
S, ó.å. |
ðóá. çà 1 ó.å. |
||||
|
бригады |
D, ðóá. |
|||
|
|
|
|||
|
|
|
|
|
|
1 |
5 |
500 |
1500 |
29,2 |
|
2 |
6 |
750 |
2000 |
29,4 |
|
3 |
7 |
1000 |
2500 |
29,5 |
|
4 |
8 |
1250 |
3000 |
29,6 |
|
5 |
9 |
1500 |
3500 |
29,65 |
|
6 |
10 |
2000 |
4000 |
29 |
|
7 |
11 |
2250 |
4500 |
28,5 |
|
8 |
12 |
2500 |
5000 |
28 |
|
9 |
13 |
2750 |
5500 |
27,5 |
|
10 |
14 |
3000 |
6000 |
27,2 |
|
11 |
15 |
3500 |
6500 |
27 |
|
|
|
|
|
|
|
3.3. Использование функций в сценариях
Использование функций в сценариях рассмотрим на примере 3.3.
Пример 3.3 Расчет зарплаты членов бригады, используя функцию в сценарии
Пусть требуется рассчитать заработок членов бригады. Условия принять из примера 3.2. Для выполнения вычислений в примере используется функция. Функции дадим имя F1.
Код программы с использованием сценария на языке JavaScript при использовании функции F1 может иметь вид, представленный ниже на листинге 3.5.
Листинг 3.5. Код программы с использованием функции
<HTML>
<HEAD>
<TITLE> Использование функции </TITLE>
<script>
70