Создание динамических страниц

Создаваемые с помощью HTML страницы являются статическими, т.е. их содержание и вид остаются неизменными до изменения кода в файле. Однако в настоящее время в составе Web-технологий имеются средства обеспечивающие придание странице динамических свойств вплоть до создания полноценных интерактивных приложений (краткая характеристика этих средств дана в п.4.1). Самым простым с точки зрения использования средством являются сценарии, включаемые в текст HTML-документа.

Сценарии или скрипты (script – сценарий) представляют собой программы на языках JavaScript или Visual Basic Script (VBScript), являющихся подмножествами соответствующих объектно-ориентированных языков программирования. Эти программы включаются непосредственно в HTML-документ в виде исходных текстов. Выполняются они броузером и позволяют изменять внешний вид окна, а также создавать различные эффекты в окне. Поскольку язык JavaScript распространен более широко, то в дальнейшем речь будет идти только о нем.

Встраивание исходных текстов программ в HTML страницы превращает броузер в самодостаточную среду программирования, которую можно использовать не только при перемещениях по Интернет, но и в локальных системах. Используя JavaScript, можно организовать гибкий многооконный интерфейс с локальной контекстной справочной системой и встроенной графикой, при этом многие вопросы проверки вводимых пользователем данных можно возложить на функции JavaScript. Однако по своим функциональным возможностям JavaScript довольно сильно уступает Java как языку программирования. Кроме того, язык ориентирован только на встроенные объекты броузера (окна, формы, поля форм, элементы рабочих областей и т.п.) и не поддерживает механизм наследования и связи между объектами.

Для размещения сценариев в тексте страницы служит специальный парный тег SCRIPT. Он может содержать либо текст сценария, либо ссылку на файл с расширением js, содержащий сценарий. Сам тег размещается либо в заголовке, либо в теле страницы, а может и там, и там. Различие состоит в доступности имен и возможности их использования. Рекомендуется размещать его в заголовке. Кроме того, текст сценария может присутствовать в других тегах, например, в ссылках.

В общем случае тег выглядит следующим образом.

// текст сценария

</SCRIPT>

При размещении сценария в отдельном файле, в тег помещается путь и имя файла, например,

</SCRIPT>

Внутри файла my.js только текст сценария и никаких тегов.

Часто текст сценария помещают внутрь комментария, чтобы броузеры, не поддерживающие тег SCRIPT, не выводили его в окно. Выглядит это следующим образом.

<html>

<head>

<title>сценарий </title>

<!--

текст сценария

//-->

</script>

</head>

…

Броузер, поддерживающий сценарии, извлечет сценарий из комментария, а не поддерживающий – пропустит как комментарий.

Для воздействия на окно в сценарии используются свойства и методы объектов броузера. Свойства – это специальные переменные, значения которых определяют внешний вид и другие характеристики окна и расположенных в нем элементов. Методы – это функции для выполнения различных действий со свойствами.

Порядок и момент выполнения функций сценария задаются их привязкой к определенным событиям.

Объекты броузера

Объекты броузера образуют иерархическую структуру, вид которой приведен на рис. 6.10. С целью упрощения на рисунке показаны только те объекты, которые упоминаются в данном разделе или использованы в приводимых примерах.

Рис. 6.10. Иерархия объектов броузера

На самом верхнем уровне находится объект Window (окно). Он содержит общие для всего окна свойства, такие, например, как defaultStatus и status (определяют текст, размещаемый в строке статуса). Объект Location содержит адресную информацию об активной странице. Объект Document содержит свойства, определяющие вид страницы, например, bgColor (цвет фона). StyleSheets (Style) обеспечивает доступ к свойствам элементов через таблицы стилей. Объекты Links, Anchors, Forms и Images являются свойствами объекта Document и представляют собой массивы ссылок, якорей, форм и изображений. Иерархия объектов используется при задании имен элементов. Например, document.Images[0].width и document.Images[0].height определяют размеры (высоту и ширину) самого первого изображения на странице. При записи имен необходимо помнить, что в языке JavaScript прописные и строчные буквы - это разные символы, и соответственно, Heigth и height - разные имена.

В таблице 6.10 приведены свойства основных объектов, к которым обращаются чаще всего.

Таблица 6.10. Свойства объектов

Объект	Свойство	Значение
Window	name	Имя для ссылки на окно
defaultstatus	Содержимое строки статуса
Location	href	Адрес страницы
Document	bgcolor	Цвет фона
fgcolor	Цвет по умолчанию
title	Текст, отображаемый в строке заголовка
Link	href	Адрес ресурса (URL)
target	Имя окна для открытия страницы
Image	src	Адрес файла с рисунком (URL)
height	Высота поля для рисунка
width	Ширина поля для рисунка
Form	name	Имя для ссылки на форму
Body	offsetWidth	Ширина окна документа
offsetHeight	Высота окна документа
Style	pixelLeft	Расстояние от левого края окна до элемента
pixelTop	Расстояние от верхнего края окна до элемента
visibility	Видимость элемента (видим/невидим)

Присваивая значения свойствам в можно динамически изменять внешний вид и содержание документа.

Методы объектов

Кроме свойств объекты содержат методы (функции, выполняющие различные действия). Методы работают со свойствами, но обычно выполняют действия более сложные, чем просто изменение значений свойств. В таблице 6.11 приведены часто используемые методы основных объектов.

Таблица 6.11. Методы объектов броузера

Объект	Метод	Действие
Window	Open()	Открытие нового окна
Close()	Закрытие окна
Alert()	Создание окна с сообщением
Prompt()	Создание окна с сообщением и полем для ввода
Document	Write()	Вывод данных в поток при загрузке документа
Location	Reload()	Обновление документа

При записи обращения к функции в скобках записываются значения параметров. Например, метод window.open(URL,'name','specs') содержит три параметра: URL определяет загружаемую страницу, name - это имя, по которому можно идентифицировать окно в программе, specs определяет внешний вид окна (наличие полос прокрутки и т.п.). Например, в результате выполнения метода

window.open('S8.html','new','scrollbars,resizable,width=300,height=200') будет открыто новое окно шириной 300 пикселей и высотой 200 с полосами прокрутки (scrollbars) и возможностью изменения размера (resizable). В окно будет загружена страница из файла S8.html.

В теле сценария можно объявлять и свои собственные функции, они становятся методами объекта window и могут использоваться для управления документом. Объявление функции имеет следующую структуру:

Function <имя>(<параметры>)

{

<операторы>

}

Например,

function HM()

{

var d=new Date();

var h=d.getHours();

var m=d.getMinutes();

window.alert(“время-”+h+”:”+m);

}

Эта функция без параметров, она определяет время (часы и минуты) по системным часам и выводит его в созданном окне.

В ходе создания страницы на экране броузер интерпретирует HTML-документ последовательно тег за тегом. Выполнение операторов сценария производится в порядке записи в том месте, где размещен тег. Таким образом, момент появления сообщения, выводимого следующим сценарием:

</script>,

зависит от места его размещения. Функции выполняются в месте обращения к ним (в месте вызова). В приведенном выше примере
window.alert(“выполняется сценарий”) – это обращение к функции. Но чаще всего вызов функции связывают с некоторым событием. Такие функции называют обработчиками событий.