Серверная часть
Подобно клиентской части, серверная часть JavaScript содержит несколько объектов, на которых основаны все остальные объекты. Корневыми объектами серверной части для реализаций являются объекты, которые позволяют получить доступ к базам данных, а также курсорам, хранимым процедурам и сгенерированным результирующим наборам.
Доступ к объектам
Благодаря использованию возможностей описанной иерархии объектов, доступ к различным элементам и объектам на Web-странице реализуется за счет средств самой иерархии. Если необходимо получить доступ к определенному текстовому полю формы на странице, сделать это можно с помощью следующего фрагмента кода:
window.document.formName.textboxName.value
При загрузке HTML-документа в браузер создается объектная модель этого документа.
В объектной модели документа объекты сгруппированы в так называемые коллекции. Коллекцию можно рассматривать как промежуточный объект, который содержит объекты собственно документа. С другой точки зрения, коллекция является массивом объектов, отсортированных в порядке упоминания соответствующих им элементов в HTML-документе. Индексация объектов в коллекции начинается с нуля. Синтаксис обращения к элементам коллекции такой же, как к элементам массива.
Коллекция имеет свойство length — количество всех ее элементов. Так, например, коллекция всех объектов графических изображений в документе называется images, коллекция всех форм — forms, коллекция всех ссылок — links. Это примеры так называемых частных или тематических коллекций.
Кроме них имеется коллекция всех объектов документа, которая называется all.
Если при создании HTML-документа не использовался атрибут id для некоторых элементов, то для обращения к их объектам остается только взять индексы.
Приведенный ниже HTML-код формирует простую веб-страницу, содержащую заголовок первого уровня, изображение, ссылку и форму с двумя элементами - полем ввода данных и кнопкой.
<html>
<h1>Моя веб-страница</h1> <br>
<img src="pict.jpg">
<a href = "www.admiral.ru/~dunaev"> <br>Caйт В.Дунаева</A>
<form>
<input type="text" value="">
<p>
<button>Нажми здесь</button>
</form>
</html>
На рис. 2 приведено изображение этого HTML-документа в окне браузера.
Поскольку ни для одного из элементов документа не указан атрибут id (или name), обращение к объектам возможно только посредством индексов. Так, например, для обращения к графическому объекту (он здесь единственный) можно использовать следующее выражение
Document.images(0) // первый элемент коллекции images
Кнопка является вторым элементом формы. Чтобы обратиться к ней как к объекту, необходимо указать сначала форму (единственная форма в документе есть объект forms(0) ), а затем объект этой формы (elements(индекс_элемента)).
Рис. 2. Тегам HTML соответствуют элементы
HTML-документа в окне браузера
Другими словами, достаточно записать выражение:
document.forms(0).elements(1) // второй элемент формы
А обращение к ссылке записывается так:
document.links(0)
Добавим к HTML-документу сценарий, выводящий окно с информацией о тегах (см. рис. 3).
Пример. Код с информацией о тегах
<html>
<!-- <h1>добавление атрибутов id</h1> -->
<h1>Моя веб-страница</h1>
<img src="pict.jpg">
<a href = "www.admiral.ru/~dunaev">Caйт В.Дунаева</A>
<form>
<input type="text" value="">
<p>
<button onclick="mу()">Нажми здесь </button>
</form>
<script>
msg = ""
for(i = 0; i < document.all.length; i++){
msg += i+" "+document.all[i].tagName+"\n"
}
alert (msg)
</script>
</html>
Рис. 3. Окно с информацией о тегах
Хотя теги <head>, <title> и <body> в приведенном документе явно не упоминаются, соответствующие им объекты присутствуют в объектной модели этого документа и, следовательно, в коллекции all. Если при вызове метода объект не указан, то браузер предполагает, что метод относится к объекту window (alert (msg) в данном примере). Вместо объекта window можно указывать объект self, так как это синоним текущего окна.
Ссылки на объекты можно сохранять в переменных, которые потом можно использовать для обращения к свойствам и методам.
Добавим к основным тегам атрибуты id:
<img id = "myimage" src = "pict.jpg">
<a id = "myref" HREF= "www.admiral.ru/~dunaev"> Caйт В.Дунаева</A>
<form id = "myform">
<input id = "myinput" type = "text" value ="qewe">
<p>
<button id = "mybutton" onclick = "my()"> Нажми здесь
</button>
</form>
В приведенном выше примере элемент изображения, созданный с помощью тега
<img id = "myimage" src = "pict.jpg"> , имеет атрибуты id и src. Этим атрибутам соответствуют свойства id и src объекта этого изображения. Ниже приведены примеры различных вариантов обращения к данным свойствам:
document.images(0).id // "myimage"
document.images("myimage").id
document.all("myimage").id
document.all.myimage.id
var x = document.all.myimage // объект
x.id // "myimage"
document.images(0).src /* строка URL, например,
filе:///С:/Мои%20документы/рict.jpg */
document.images("myimage").src
document.all("myimage").src
document.all.myimage.src
var x = document.all.myimage // объект