|
|
| :: WEB ДИЗАЙН | |||||||||||||||||||||||||||||||||||||
5. Введение в сценарииВ предыдущих разделах данного руководства мы изучили основы языка HTML. Полученных знаний вполне достаточно для представления разнообразной информации в Web, но не для создания коммерческих сайтов. В данной главе мы пойдем немножко дальше, но информация представленная здесь носит вводный характер. Для углубленного изучения данных тем вам понадобятся дополнительные знания в области программирования и операционных систем.5.1. Сценарии выполняемые серверомДля того чтобы понять, что такое серверные сценарии расмотрим ( достаточно упрощенно ) схему взаимодействия Web-клиент/Web-сервер. При вводе пользователем, в адресной строке броузера, URL необходимого ресурса или активизации гиперссылки, Web-броузер посылает http-запрос серверу:[Метод запроса] [URL ресурса] [Заголовок] Например для получения документа - doc1.htm запрос выглядит примерно так: pascal/GET /doc1.htm HTTP/1.0pascal/ Результатом обработки запроса Web-сервером является http-ответ: [Заголовок] [Код возврата] [MIME-заголовок] [Пустая строка-разделитель] [Тело ответа] Например если наш предыдущий запрос Web-серверу прошел успешно, ответ будет примерно таким: HTTP/1.0 200 ОК pascal/<HTML> В результате данного взаимодействия мы получим от Web-сервера и увидим в окне Web-броузера содержимое HTML-документа - doc1.htm. Такое взаимодействие позволяет получать и просматривать любые статические ресурсы сервера, но как быть когда мы хотим большего. Например мы хотим обрабатывать данные, введенные пользователем в формы на нашей Web-странице, или наоборот отправить пользователю результаты работы прикладной программы в формате HTML. Все эти задачи решаются при помощи сценариев выполняющихся на сервере. Итак сценарий выполняющийся на сервере это программа написанная на одном из языков программирования, которые поддерживются платформой Web-сервера. Какие они бывают, на чем и для чего пишутся ? По большому счету сценарии можно разделить на две больших группы: сценарии внедряемые в HTML-документы и CGI-сценарии. Внедряемые сценарииСценарии внедряемые в HTML-документы, это фрагменты кода интерпретируемого языка программирования, которые внедряются в документ при помощи специальных директив ( можно сказать тегов ). Данные сценарии используются для динамического создания HTML-документов в зависимости от некоторых условий ( например от даты запроса ). Как правило HTML-документы, содержащие сценарии выполняемые сервером, должны иметь специальное расширение. Web-сервер при запросе данного файла пользователем, первоначально проводит анализ содержимого файла и выполняет обнаруженные сценарии, а затем объединяет результаты работы сценария с содержимым документа и отправляет его Web-броузеру пользователя. Технология внедрения сценария в документ и язык разработки зависят от типа платформы Web-сервера и его настройки. Для платформы NT/IIS существует реализация данной
технологии под названием ASP ( Active Server Pages -
Активные страницы сервера ). Документы-активные страницы
должны иметь расширение ASP, сценарии пишутся на VBscript
или Jscript, а их внедрение осуществляется при помощи
директивы Для платформы UNIX/Apache выбор средств гораздо больше,
один из вариантов реализации данной технологии это внедрение
сценариев на языке PHP. Данные документы должны иметь
расширение PHP, а внедрение сценария в документ
осуществляется при помощи директивы HTML-документ содержащий, внедряемый сценарий сервера, выглядит примерно так (так он выглядит на Web-сервере, а в окне своего броузера вместо кода сценария вы увидите результаты его работы ) : <HTML> pascal/ $counter=0;
$filename = "count.dat";
$fp = @fopen($filename,"r");
if ($fp) {
$counter=fgets($fp,10);
fclose($fp);
}
$counter++;
print $counter;
$fp = fopen($filename,"w");
if ($fp) {
$counter=fputs($fp,$counter);
fclose($fp);
}pascal/?> посетителем моего сайта !!!<HR> ... данные страницы .... </BODY> </HTML> CGI-сценарииCGI-сценарии это приложения разработанные в соответствии со спецификацией CGI ( Common Gateway Interface ). Данная спецификация описывает формат и общие правила обмена данными между Web-сервером и внешним приложением. Для обработки потока данных от клиента к Web-серверу и формирования обратного потока из результатов работы приложения в спецификакции CGI определены следующие элементы:
Для разработки CGI-сценариев, подходит множество языков программирования. Единственное ограничение - это поддержка данного языка платформой Web-сервера. Поскольку CGI-сценарий является внешним приложением ( не внедряется в документ ) для его разработки можно использовать компилируемые языки программирования. Основные языки разработки CGI-сценариев следующие:
В общих чертах алгоритм разработки CGI-сценария выглядит следующим образом:
Реализации вышеуказанного алгоритма для различных платформ Web-серверов могут существенно отличаться, но приведенные этапы создания сценария достаточно общие. Вот пожалуй и все о сценариях сервера. Как я уже говорил, изложенный в этой главе материал, носит ознакомительный характер. Я не являюсь экспертом в области разработки приложений Web-сервера ( моя основная работа с этим не связана ). Информация данного раздела пригодится вам для понимания общих принципов разработки приложений Web-клиент/Web-сервер. Для углубленного изучения материала вам придется прикупить литературы по конфигурированию ПО Web-серверов, программированию и сетевым протоколам. Много полезного можно найти в Internet ( благо ключевых слов, вы теперь знаете много: CGI, ASP, PHP... ). Рекомендую вам посетить сайты, материалы которых я использовал для подготовки данной главы:
5.2. Сценарии выполняемые клиентомВ предыдущей главе мы рассмотрели принципы разработки и назначение сценариев выполняемых на Web-сервере, но есть еще один тип сценариев - это сценарии выполняемые клиентом т.е. Web-броузером.Итак, сценарии выполняемые клиентом это - фрагмент кода интерпретируемого языка программирования ( поддерживаемого броузером ), который внедряется в HTML-документ и выполняется Web-броузером в процессе работы пользователя с документом. Для чего они предназначены, как и на чем разрабатываются и используются в HTML-документах ? Назначение сценариев выполняемых клиентом
Средства разработки сценариевПри разработке сценариев интерактивного управления используются как правило два интерпретируемых языка программирования:
Вывод очевиден - для лучшей совместимости с броузерами используем JavaScript. Для разработки сценариев используются методы объектно-ориентированного программирования, управляемого событиями. Данный метод заключается в сопоставлении различным объектами HTML-документа и Web-броузера, сценариев ( функций ) - обработчиков различных событий. Внедрение сценария в документВнедрение сценария в документ это "штатная" возможность HTML. Рассмотрим способы и правила внедрения: Для начала необходимо задать язык разработки сценариев для нашего HTML-документа. Это делается при помощи мета-записи Content-Script-Type в заголовке нашего документа. Например вот так: pascal/<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">pascal/ или так: pascal/<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/vbscript">pascal/ Мы можем и не определять тип сценариев документа данным способом, но гораздо проще задать его один раз в заголовке, чем при каждом использовании сценариев. Как я уже обмолвился ранее, внедрение сценария в документ осуществляется "штатными" средствами HTML, рассмотрим как это сделать. Первый способ это - использование тега HTML <SCRIPT>. Возможно использование данного тега в формате контейнера для внедрения фрагмента кода в документ и в форме одиночного тега для связывания файла содержащего сценарии с документом. Для внедрения используется контейнерный формат записи тега, с атрибутом TYPE, задающим тип сценария: pascal/<SCRIPT TYPE="text/javascript"> Для связывания документа с внешним файлом сценария, используется одиночный формат записи тега, с атрибутом SRC, задающим URL файла сценария: pascal/<SCRIPT SRC="script.js" TYPE="text/javascript">pascal/ pascal/<SCRIPT SRC="script.vbs" TYPE="text/vbscript">pascal/ Вторым способом использования сценариев в документе является назначение сценариев-обработчиков событий различным элементам HTML-документа. Это осущетвляется при помощи специальных атрибутов-событий, которые могут быть использованы для большинства тегов HTML. Одному элементу документа можно назначить несколько обработчиков, по одному для каждого типа порождаемых им событий. Рассмотрим эти атрибуты подробнее:
При использовании данных атрибутов в тегах HTML, следует понимать, что не каждый элемент документа может породить определенное событие. Например в следующем примере демонстрируется правильное и неправильное назначение cценария обработчика: pascal/<INPUT TYPE="BUTTON" NAME="btnPress" VALUE="Нажми меня" onClick="btnClick();">pascal/ - в данном случае при нажатии кнопки, происходит выполнение функции btnClick; pascal/<A HREF="help.htm" onReset="lnkClick();">Помощь</A>pascal/ - в данном случае вы не дождетесь выполнения функции lnkClick, поскольку элемент документа - ссылка, никогда не породит событие onReset; Как внедрять сценарии в документы мы разобрали, но не менее важный вопрос ( по жизни ) КУДА, вернее в какое место документа ? От того где мы разместим сценарий зависит схема выполнение его броузером. Со сценариями обработчиками событий все должно быть ясно: элемент документа порождает событие и броузер выполняет сопоставленный событию сценарий-обработчик, но как быть со сценариями расположенными в других структурных разделах HTML-документа ? Правила таковы:
Приведу пример: pascal/<HTML> В вышеприведенном примере ( рекомендую скопировать, сохранить как файл-htm и проверить ), продемонстрированы все три варианта размещения сценариев в HTML-документе: в заголовке размещаются служебные функции, в теле документа размещается исполняемый при загрузке код, а элементу формы - кнопка, назначен обработчик события - onClick. Обратите внимание на комментарии в документе, в коде сценария используется синтаксис языка разработки сценария, а в документе синтаксис HTML. Старые броузеры и сценарииПопытка просмотра документа содержащего сценарии в броузере не поддерживающем данную возможность вызывает ошибку. Для исключения данной ситуации разработчики применяют один хитрый трюк, который заключается в использовании одной особенности Web-броузеров - пропускать неизвестные теги HTML.Для скрытия сценария данным способом применяется комбинация комментариев HTML и комментариев языка разработки сценария. Старый броузер обнаружит неизвестный тег <SCRIPT>, пропустит его и обнаружит тег HTML - начало комментария, а далее исключит из обработки фрагмент документа до тега HTML, закрывающего комментарий. Современные броузеры "обучены" данному трюку и не обратят на него внимания, но перед закрывающим тегом комментария HTML надо поставить комментарий языка разработки сценария, для исключения данного фрагмента из интерпретации броузером. Примеры: <SCRIPT TYPE="text/javascript"> pascal/<SCRIPT TYPE="text/vbscript"> pascal/ Пример 10. Определение Web-броузера клиента.В основу броузеров MSIE и NN положены разные объектные модели документа - DOM ( Document Object Model ) и принципы обработки событий ( MSIE-метод всплытия, NN-метод перехвата ). Без учета данных особенностей невозможна разработка универсальных сценариев для Web-страниц: pascal/<HTML> Пример 11. Элементы DHTML в документах. Документы DHTML содержат сценарии, позволяющие изменять свойства CSS ( видимость, оформление и даже содержание ) элементов документа, в зависимости от действий пользователя. При использовании в сценариях свойств CSS элементов документа , необходимо знать правила преобразования имени свойства CSS к имени свойства JavaScript: из имени свойства удаляются все тире, а каждый символ имени свойства после тире заменяется на прописной символ. Например: border-color преобразуется в borderColor, а font-size в fontSize; pascal/<HTML> Пример 12. Элементы анимации в документах. Анимация основана на изменении средствами сценария, таких свойств CSS элементов, как видимость, размер и положение элемента ( как правило слоев документа ). <HTML> pascal/var pos1 = 0;
var pos2 = 0;
var speed1 = Math.floor(Math.random() * 10)+25;
var speed2 = Math.floor(Math.random() * 10)+25;
function ctrlRun() {
pos1 = (pos1 > 600) ? 0 : pos1 + speed1;
pos2 = (pos2 > 600) ? 0 : pos2 + speed2;
switch(navigator.appName) {
case "Netscape": // броузер NN
document.layers[0].left = pos1;
document.layers[1].left = pos2;
window.setTimeout("ctrlRun()", 250);
break;
case "Microsoft Internet Explorer": // броузер MSIE
document.all.men.style.left = pos1;
document.all.wom.style.left = pos2;
window.setTimeout("ctrlRun()", 250);
break;
default:
window.alert("На чем вы работаете ?");
}
}
pascal/
pascal/</SCRIPT> Пример 13. Обработка данных из форм. Предварительная обработка данных из форм, позволяет сократить кол-во обменов данными с сервером, за счет выявления типовых ошибок пользователей, на этапе заполнения формы ( неверные даты, пустые поля и др. ). <HTML> pascal/function valid() {
if (document.form1.fio.value.length < 5) {
window.alert("Введите имя !");
return false;
}
if (document.form1.tel.value.length < 3) {
window.alert("Введите телефон !");
return false;
}
if (document.form1.edu.value.length < 10) {
window.alert("Заполните сведения об образовании !");
return false;
}
return true;
}
pascal/
pascal/</SCRIPT> Пример 14. Управление окнами броузера. Для управления окнами броузера средствами сценария используются методы JavaScript: window.open() и window.close(). pascal/<HTML> Знания медодов и средств разработки сценариев интерактивного управления документами, позволит вам перейти на качествеенно новый уровень профессионального мастерства. Для получения дополнительной информации по данной теме рекомендую вам посетить сайты по следующим ссылкам: - раздел на сайте центра информационных технологий, посвященный JavaScript, содержит описание языка, примеры и рекомендации по разработке сценариев;
|
|||||||||||||||||||||||||||||||||||||
| :: |
:: |
||||||||||||||||||||||||||||||||||||
(с)2005-2006 Web studio SEDUVAN