Пример базы данных на основе объектов

Ррассмотрим использование объектов JavaScript на примере создания базы данных автомобилей, находящихся на одной стоянке.

Список всех автомобилей можно представить в виде таблицы со столбцами: name (название), model (модель), regnum (номер), owner (владелец) и photo (фотография внешнего вида). Будем считать, что на фотографии номер автомобиля не показан, так что она отображает не конкретный автомобиль, а его тип (название, модель и цвет).

Конечно, мы могли бы создать базу данных в виде одной таблицы. Однако мы поступим иначе и создадим две таблицы. Одна из них будет вспомогательной и выполнять роль справочника типов автомобилей, а другая таблица будет содержать записи о конкретных автомобилях, находящихся на стоянке или, точнее, приписанных к ней. Справочник типов автомобилей будет содержать наиболее общие сведения об автомобилях: название, модель и фотографию (точнее, URL-адрес ее файла). На стоянке может находиться несколько автомобилей одного типа (например, "Жигули", ВАЗ2101 белого цвета), но в справочнике этот тип будет упомянут лишь один раз. В нашей базе данных справочник типов автомобилей буде представлять объект ref:

function ref(name, model, url) {	// конструктор справочника типов автомобилей
this.name = name			// название марки автомобиля
this.model = model			// модель
this.url = url				// URL-адрес файла с фотографией
}

Заполним справочник конкретными записями. Множество всех таких записей удобно определить как массив (назовем его aref). Тогда элементы этого массива определим как экземпляры объекта ref:

aref = new Array() // массив записей справочника типов автомобилей
aref[0] = new ref("Жигули", "Ваз2101", "pict0.gif")
aref[1] = new ref("Жигули", "Ваз2106", "pict1.gif")
aref[2] = new ref("Волга", "ГАЗ24",  "pict2.gif")
aref[3] = new ref("Ока", "Ваз1111", "pict3.gif")

В нашем справочнике описаны только четыре типа автомобилей.
Теперь создадим список всех автомобилей на стоянке. Этот список удобно оформить как массив, каждый элемент которого представляет запись о конкретном автомобиле. Формально элементы этого массива мы определим как экземпляры объекта car, который будет содержать ссылку на справочник -объект ref . Итак, сначала напишем код функции-конструктора объекта car:

function car(regnum, owner, ref) {
this.regnum = regnum 	// номер автомобиля
this.owner = owner	// владелец
this.ref =  ref		// ссылка на справочник
}

Далее, создадим записи о конкретных автомобилях на стоянке. Массив записей назовем acar.

acar = new Array()
acar[0] = new car("А123ВХ", "Иванов", aref[1])
acar[1] = new car("M345CT", "Петров", aref[1])
acar[2] = new car("E678CA", "Сидоров", aref[0])
acar[3] = new car("К056ОХ", "Михайлов", aref[2])
acar[4] = new car("К895MX", "Дунаев", aref[3])
acar[5] = new car("P340HY", "Павлов", aref[2])
acar[6] = new car("O321OК", "Николаев", aref[2])

В нашем списке всего 7 записей. Модель ВАЗ2106 в нем встречается два раза, ГАЗ24 - три раза, а остальные - по одному разу. Если бы мы создавали базу данных без справочника, то нам пришлось бы эти и другие данные многократно повторять при определении массива acar. Ниже приводятся примеры обращения к свойствам нашей базы данных:

acar[4].ref.model // "ВАЗ1111"
acar[3].ref.name  // "Волга"
acar[3].owner     // "Михайлов"

Поскольку база данных представляет собой массив, то с помощью методов объекта Array можно организовать фильтрацию (выборку) записей по тому или иному критерию. Попробуйте сделать это самостоятельно в качестве упражнения. Базу данных, создание которой мы рассмотрели выше, можно отобразить на экране монитора в окне браузера. Для этого необходимо прежде всего создать HTML-программу с таким элементом как таблица. Напомним, что таблица определяется тэгами < TABLE>, < TR>, < TH>, < TD> и другими. Вы можете создать в HTML-программе раздел, обрамленный тэгами < SCRIPT> и < /SCRIPT>, между которыми разместить рассмотренный выше код на языке JavaScript. А далее есть два пути.

Первый путь состоит в том, чтобы вручную написать тэги таблицы. Если количество строк в такой таблице не велико, то именно так и следует поступать.

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

Ниже мы приводим HTML-код, содержащий только сценарий и никаких других элементов. Для упрощения ситуации мы формируем таблицу только с тремя столбцами. На дизайн таблицы, определяемый специальными атрибутами тэгов, мы здесь не обращали внимания.

<HTML> <HEAD><TITLE>База данных автомобилей</TITLE></HEAD> <SCRIPT> /* Конструкторы */ function ref(name, model, url) {// конструктор справочника типов автомобилей this.name = name // название марки автомобиля this.model = model // модель this.url = url // URL-адрес файла с фотографией } function car(regnum, owner, ref) {// конструктор списка автомобилей на стоянке this.regnum = regnum // номер автомобиля this.owner = owner // владелец this.ref = ref // ссылка на справочник } /* Собственно база данных */ aref = new Array() // массив записей справочника типов автомобилей aref[0] = new ref("Жигули", "Ваз2101", "pict0.gif") aref[1] = new ref("Жигули", "Ваз2106", "pict1.gif") aref[2] = new ref("Волга", "ГАЗ24", "pict2.gif") aref[3] = new ref("Ока", "Ваз1111", "pict3.gif") acar = new Array() acar[0] = new car("А123ВХ", "Иванов", aref[1]) acar[1] = new car("M345CT", "Петров", aref[1]) acar[2] = new car("E678CA", "Сидоров", aref[0]) acar[3] = new car("К056ОХ", "Михайлов", aref[2]) acar[4] = new car("К895MX", "Дунаев", aref[3]) acar[5] = new car("P340HY", "Павлов", aref[2]) acar[6] = new car("O321OК", "Николаев", aref[2]) strTab = "<TABLE BORDER=1> <TR>" strTab +=" <TH>Название</TH><TH>Номер</TH><TH>Владелец</TH></TR>" /* Формирование строк таблицы */ for(i=0;i<=acar.length-1;i++){ strTab += "<TR><TD>" + acar[i].ref.name + "</TD><TD>" +acar[i].regnum strTab += "</TD><TD>" + acar[i].owner + "</TD></TR>" } strTab += "</TABLE>" document.write(strTab) // записываем строку strTab в HTML-документ // и выполняем его </SCRIPT> </html>

Здесь в теле оператора цикла for мы использовали разновидность оператора присвоения +=. Напомним, что выражение x += y эквивалентно выражению x = x + y. Мы дважды использовали выражение с этим оператором только лишь для того, чтобы выражение справа от него не было слишком длинным. Мы могли бы включить в отображаемую таблицу и другие столбцы. Например, для отображения фотографий автомобилей достаточно добавить в строку strTab такой фрагмент:
"< TD>< IMG SRC = '" + acar[i].ref.url + "'>< /TD>"

Так выглядит рассмотренная выше база данных автомобилей:

Начало Web-дизайн Графика Книги АФП Разное