Методическое пособие 227
.pdfКак видно из рис. 4, форма состоит из 6 полей и одной кнопки:
В первое поле пользователь вводит свое имя.
Во втором и третьем поле пользователь вводит количество пиццы, которое он хочет заказать (в примере мы использовали 2 сорта пиццы, Верона и Калипсо).
В 4-ом поле выводится цена за всю пиццу без НДС.
В 5-ом поле выводится сумма налога НДС.
В 6-ом поле выводится общая сумма за пиццу вместе
с налогом.
При нажатии кнопки "Отправить заказ" данные, введенные пользователем в форму, отправляются администратору сайта.
"Цена без НДС", "НДС" и "Всего к оплате" должны отображаться сразу же после ввода информации пользователем.
Кнопка "Отправить заказ" отправляет сведения о заказе. Работа данной кнопки не имеет отношения к JavaScript (здесь работает другой язык программирования – PHP), поэтому мы не будем ее здесь рассматривать.
Можно заметить, что первые 3 поля формы заполняет пользователь, другие 3 поля обрабатывает JavaScript.
Форму будем создавать постепенно, элемент за элементом [10,11]. Для начала создадим первые 2 поля. В первом поле пользователь будет вводить количество пиццы, которое он хотел бы заказать, в другом поле будет выводиться стоимость этого количества пиццы.
Ниже представлен код HTML, который позволит создать эти 2 поля.
<html>
<head>
<title>Форма заказа</title>
<meta charset=”utf-8”>
</head>
<body>
19
<form>
< input type="text" id="verona" name="verona" value="" onchange="orderForm();" />
<input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
</form>
</body>
</html>
Можно написать собственный код.
Внутри тега <form> создается форма. Теги <input> отвечают за создание полей формы. Атрибут type со значением text говорит о том, что поле предназначено для ввода текстовой информации. Атрибут value содержит данные, которые будут отправлены на сервер. Поле ввода будет содержать значение, которое присутствует в атрибуте value. В нашем случае данный атрибут ничего не содержит, поэтому при выводе на экран поля формы будут пустыми. Когда пользователь вводит в поле информацию, она сохраняется в качестве значения атрибута value.
Скрипт, который будет обрабатывать данные формы, по аналогии будем помещать в основном HTML-документе между тегами <head>. Сам скрипт также необходимо заключить в теги <script>, чтобы браузер понимал, как обрабатывать данный участок кода. Ниже представлен код данного скрипта.
<script>
function orderForm() { const PIZZAPRISE = 150;
var numVerona = document.getElementById("verona").value;
var subTotal = numVerona * PIZZAPRISE; document.getElementById("subtotal").value =
subTotal.toFixed(2);
}
</script>
20
Поместите этот скрипт между тегами <head> HTMLдокумента.
После запуска на экране вы увидите 2 поля формы.
У вас должен получиться примерно следующий текст формы:
<html>
<head>
<title>Форма заказа.</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" /> <script>
function orderForm() { const PIZZAPRISE = 150;
var numVerona = document.getElementById("verona").value;
var subTotal = numVerona * PIZZAPRISE; document.getElementById("subtotal").value =
subTotal.toFixed(2);
}
</script>
</head>
<body>
<form>
<input type="text" id="verona" name="verona" value="" onchange="orderForm();" />
<input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
</form>
</body>
</html>
Строка function orderForm() {. Скрипт, созданный нами, оформлен в виде функции orderForm. Запускать эту функцию будет событие onchange (см. строку <input type="text" id="verona" name="verona" value="" onchange="orderForm();"
21
/>). У этого события в значении стоит название запускаемой функции.
Событие Оnchange срабатывает каждый раз, когда изменяется значение элемента формы и этот элемент потерял фокус. В нашем примере элементом формы, где есть атрибут Onchange, выступает поле ввода, создаваемое тегом <input>. Каждый раз, когда пользователь вводит в поле данные и переводит фокус в другое место, срабатывает событие Onchange. Для того чтобы поле потеряло фокус, достаточно после ввода данных кликнуть мышкой в любое место на экране.
По условию, наш скрипт должен рассчитать сумму за то количество пиццы, которое укажет пользователь. Сумму можно рассчитать по следующей формуле:
Сумма = Кол-во пиццы * цена одной пиццы.
Как видно, для формулы необходимо знать цену одной пиццы. Цену мы сделаем равной 150 рублей. Так как цена не будет меняться (вся пицца продается по 150 рублей), создадим для нее константу PIZZAPRISE и инициализируем ее (см.
строку const PIZZAPRISE = 150;).
Те данные, которые будет вводить пользователь (кол-во пиццы) должны где-то сохраняться. Так как это количество может быть разным (кто-то закажет одну пиццу, кто-то - 10), то для хранения этих данных создадим переменную numVerona и инициализируем ее с помощью метода getElementById:
var numVerona = document.getElementById("verona").value;
Метод getElementById является методом объекта document. Метод getElementById позволяет обратиться к элементу web-страницы по его идентификатору ID и изменить его свойства. Идентификатор ID указывается в скобках после записи getElementById. Также этот идентификатор нужно заключить в кавычки. После идентификатора, через точку, указывается свойство, к которому идет обращение. После круглых скобок через точку указывается свойство, к которому
22
будет обращаться метод getElementById. Причем эти данные будут сохранены в атрибуте value.
Идентификатор ID, который находится в скобках, называется Verona. Ищем элемент web-страницы, который содержит данный идентификатор. Он находится в строке
<input type="text" id="verona" name="verona" value="" onchange="orderForm();" />
Эта строка выводит на экран поле, в которое пользователь будет вводить данные (количество пиццы, которое хочет заказать).
В строке
var subTotal = numVerona * PIZZAPRISE;
создаем переменную sub_total, в которой будем хранить общую сумму заказа. В эту переменную будет записано произведение переменной numVerona и константы PIZZAPRISE. В переменной numVerona у нас хранится значение, введенное пользователем (количество пиццы). В константе PIZZAPRISE хранится цена одной пиццы. В итоге, получится общая сумма.
В строке document.getElementById("subtotal").value =
subTotal.toFixed(2);
метод getElementById с идентификатором subtotal.
Данный идентификатор присутствует в строке
<input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
Однако в данном случае метод getElementById будет записывать данные в атрибут value (а не копировать, как в прошлый раз).
Как видно из строки document.getElementById("subtotal").value =
subTotal.toFixed(2);
метод getElementById передаст атрибуту value значение переменной sub_total. Это значение будет выведено на экран во 2-ом поле.
23
Также следует сказать, что тег <input> в строке
<input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
имеет атрибут readonly. Это значит, что в данное поле нельзя вводить информацию, или как-то его модифицировать. Зато его можно менять с помощью скриптов.
2.Запустите полученную форму и посмотрите результат. Если во втором поле появляется сумма заказа, то переходите к следующему заданию. Если что-либо отображается неверно – проверьте форму.
3.Усложните форму. Для этого добавьте новые поля и теги, чтобы получить форму, показанную на рис. 5.
Рис. 5. Новая форма
Материал для справок: Надо добавить:
1)переменную, в которой будет храниться количество пиццы, которое заказывает пользователь. Причем эта переменная (numKalipso) используется для хранения количества пиццы Калипсо. А переменная numVerona будет использоваться для хранения количества пиццы Верона. Здесь мы также используем метод getElementById, который будет обращаться к свойству value далее.
2)общая цена всей пиццы будет высчитываться по
формуле:
Общая цена = (кол-во пиццы Верона + кол-во пиццы Калипсо) * цена одной пиццы.
3)чтобы поля формы выводились не в одной строке, а в разных, заключите теги <input> в контейнер <DIV>.
24
Пример: <body>
<form>
<div>
Верона (введите кол-во): <input type="text" id="verona" name="verona"
value="" onchange="orderForm();" /> </div>
<div>
Калипсо (введите кол-во): <input type="text" id="kalipso" name="kalipso" value=""
onchange="orderForm();" /> </div>
<div>
Цена без НДС: <input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
</div>
</form>
</body>
</html>
4. Запустите файл. Заполните поля формы. Проверьте правильность вычислений.
Цена вычисляется неправильно. Это происходит потому, что данные, вводимые в форму, всегда сохраняются в текстовом формате. Поэтому в переменные numVerona и numKalipso будут записаны не числа, а строки.
Например, если numVerona = 3 и numKalipso = 5, то произойдет операция соединения строк
Общая Цена = ("3" + "5")*150.
Далее, строка "35" умножается на число 150. Так как для строк не характерна операция умножения, то строка "35" будет автоматически переведена в число 35 и операция умножения пройдет нормально.
Как сделать, чтобы ("3" + "5") давало не "35", а число 8?
25
Для этого очень хорошо подойдет метод parseInt. Этот метод переводит строку в число. Скорректируйте строки следующим образом:
var numVerona = parseInt(document.getElementById("verona").value); var numKalipso = parseInt(document.getElementById("kalipso").value);
5. Запустите файл. Проверьте правильность работы. Можете заметить еще один недостаток: форма
отображает общую сумму только в том случае, если пользователь заполнил оба поля (т.е. заказал 2 вида пиццы). Если же пользователь захочет заказать только один вид пиццы, то в поле "Цена без НДС" он увидит сообщение NaN (рис. 6).
Рис. 6. Вид формы при заполнении одного поля
Сообщение NaN появляется в результате вычислительных операций, когда один из операндов не является числом, либо не инициализирован. В поле "Цена без НДС" выводится значение переменной subtotal, которая вычисляется по формуле (numVerona + numKalipso) *
PIZZAPRISE. Если пользователь заказывает только один вид пиццы, то только одна из переменных (numVerona + numKalipso) окажется заполненной. Вторая переменная будет не инициализирована:
(? + 5) * 150
В результате, мы видим сообщение NaN.
Метод isNaN позволяет проверить переменную на наличие в ней числа. Мы будем использовать данный метод для проверки значения переменных. В том случае, если в переменной не окажется числа, то в нее автоматически будет записан 0:
26
If (isNaN (numVerona)) numVerona=0; If (isNaN (numKalipso)) numKalipso=0;
Эти строки нужно вставить в скрипт после строк
var numVerona = parseInt(document.getElementById("verona").value);
var numKalipso = parseInt(document.getElementById("kalipso").value);
6.Запустите файл. Теперь скрипт работает правильно.
7.Используя HTML и CSS, оформите дизайн.
Контрольные вопросы
1.Что такое скрипт?
2.Какие методы скриптов вы знаете?
3.Для чего применяют скрипты?
4.В каком формате сохраняются данные, вводимые в
форму?
5.Как сохранить данные в числовом формате?
27
Тема 6. WEB-ПРОГРАММИРОВАНИЕ. СКРИПТ ДЛЯ ПОКАЗА БАННЕРОВ
Цель: научиться создавать баннер.
Теоретические сведения
В эпоху бурного развития информационных технологий все больше и больше людей не представляют свою повседневную жизнь без интернета. Социальные сети заменили многим живое общение, торрент-трекеры – кинотеатры и покупку лицензионных дисков, всевозможные игры во многом вытеснили другие различные виды развлечений. И не секрет, что ежедневно в мире появляется просто бесчисленное количество новых сайтов, проектов, сервисов.
Большинство создателей и разработчиков новых интернет-ресурсов рассчитывает на источники доходов в будущем, ведь грамотно сделанный и раскрученный сайт [12] может действительно приносить хорошие деньги, а уж как именно – тут вариантов море: размещение баннеров, контекстная реклама, участие в ссылочных биржах, спонсорские материалы, всевозможные партнерские программы и т.д.
Но многие также делают сайты без какой-либо материальной выгоды для себя. Вот только донести такой сайт в массы становится проблематично, из-за чего приходится вкладывать в него уже свои деньги – на создание баннеров, размещение их на других сайтах, обмен ссылками и т.д.
Баннер представляет собой прямоугольное графическое, анимационное или фотографическое изображение. Оно предназначено для рекламы вашего сайта в сети интернет. Он работает как гиперссылка на сайт. Пользователь, кликнувший по баннеру, моментально переносится на ваш сайт, чего собственно и добивается владелец сайта.
Баннер необходим во многих случаях:
для размещения баннеров в баннернообменных сетях;
28