Сергей Бердышев - Искусство оформления сайта. Практическое пособие

Понятно, что этот скрипт управляет работой счетчика расстояний. В body документа нужно скопировать кое-что другое: сам счетчик, то есть его интерфейс и некоторые вспомогательные механизмы, работающие по приведенному выше скрипту. Код интерфейса и скрытых «под ним» механизмов записывается целиком внутри тегов ‹form›. Окончательный результат можно увидеть и опробовать в действии на страничке http://obrazcats.narod.ru/pages/scripts/airdistance.html.

Интернет-магазин. В двух абзацах рассказать о том, как создается центр электронной коммерции, просто нереально. Это некая профанация. Создание электронного магазина представляет собой очень сложный с технической точки зрения процесс, однако подготовку к реализации этого процесса начинать никогда не рано, поскольку подлинное совершенство все равно придет с годами упорного труда. А пока что познакомимся с двумя простенькими способами формирования и отправки заказа на адрес электронной почты менеджера по продажам, работающего на компанию «Аленький цветочек».

Прежде всего для отправки заказа в режиме он-лайн можно использовать контактную форму. Формы удобны, понятны, приятны. Ими легко и с удовольствием пользуются все посетители. Откроем html-код странички для формирования заказов (ссылки на которую ведут СО ВСЕХ ПРОЧИХ СТРАНИЦ ресурса) и в тело документа внесем описание простейшей формы:

‹Н2› Доброго времени суток, уважаемый посетитель нашего магазина! ‹Н2›

‹p› Огромное спасибо вам за живой интерес к нашим товарам. Здесь вы сможете легко и быстро оформить заказ, после чего с вами непременно свяжется наш менеджер, и ваша покупка благополучно будет вам доставлена. ‹/p›

‹form name=“mailer” method=“post”

enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›

Введите ваше имя: ‹br›

‹input type=“text” name=“Name” size=“ 24”

onChange=“msg(this.form)”›‹br›

Укажите тему сообщения (Заказ/Дозаказ): ‹br›

‹input type=“text” name=“Subject” size=“ 24”

onChange=“msg(this.form)”›‹br›

Сюда впишите наименование товара и ваши контактные данные: ‹br›

‹textarea name=“Message” cols=“ 40” rows=“ 6”

onChange=“msg(this.form)”›‹textarea›‹br›

‹input type=“submit” value=“ Отправить ”

onClick=“return checkIt()”›

‹input type=“reset” value=“ Очистить ”›‹/form›

‹p› Благодарим за покупку! Пусть наши цветы всегда радуют ваш взгляд. ‹/p›

Заметим, что приведенный здесь пример неудачен. Вместо слова «Очистить», которое поставлено намеренно, нужно написать «Сброс» или «Очистить форму». Дело в том, что два одинаковых по длине слова на букву «О» (отправить и очистить), расположенные на двух соседствующих кнопочках послужат причиной множества досадных ошибок, отчего ваш сайт невзлюбят посетители. Примите сказанное к сведению и запишите код в вашем редакторе, после чего проверьте через опцию просмотра. Форма готова, но она пока непригодна для отправки сообщений. Для этой цели нам нужно написать команду-скрипт, которая целиком помещается в заголовке документа. Напомню, что скрипты разумнее всего писать не промеж мета-имен, а непосредственно перед закрывающим тэгом ‹/head›:

‹script language=“JavaScript”›

function checkIt() {

//____________________

if (document.forms.mailer.Name.value!= “”) {

} else {

alert (“\nОбласть \ “Имя\” в форме. \n\nБудьте добры ввести свое имя.”);

document.forms.mailer.Name.focus();

return false;

}

//____________________

if (document.forms.mailer.Subject.value!= “”) {

} else {

alert (“\nОбласть \ “Тема\” в форме. \n\nБудьте добры указать тему.”);

document.forms.mailer.Subject.focus();

return false;

}

//____________________

if (document.forms.mailer.Message.value!= “”) {

} else {

alert (“\nОбласть \ “Сообщение\” в форме. \n\nБудьте добры назвать товар и контактные сведения.”);

document.forms.mailer.Message.focus();

return false;

}

//____________________

}

function msg() {

document.mailer.action = “mailto: здесь ваш почтовый адрес ”

mailtoandSubject = ((`?Subject=` +

document.mailer.Subject.value) + ` amp;Body=` +

document.mailer.Message.value);

}

‹/script›

Совершенно очевидно, что три «присказки», которыми открывается скрипт и которые начинаются со слов «если документ…», – это функции проверки. Стоит покупателю забыть заполнить какую-нибудь ячейку формы, как компьютер немедленно оповестит его об этом. Но поскольку у нас диалоговых окошек только три, то, наверное, использовать данные функции будет чистой воды издевательством над собой. Выбрасываем их из скрипта, оставляя только функцию отправки, помещенную последней. Однако вы еще вернетесь к этой страничке, когда вам потребуется сверстать более сложную форму. Обратим внимание и на значок //____________________. Это обозначение разделителя функций, совершенно ненужное для компьютера, так что можете и от него отказаться. Но в больших формах все же стоит пользоваться подобным разделителем, чтобы не запутаться в собственных письменах.