разработка веб-сайтов под ключ
обучающие программы для веб-разработчиков

Базы данных, предназначенные для хранения и быстрого доступа к данным, обычно создаются средствами СУБД(системами управления базами данных). Эти средства применяются, когда база данных должна содержать тысячи и более записей. Мы же рассмотрим пример, когда база данных содержит до нескольких сотен записей. Она будет сформирована средствами JavaScript, путем создания объекта, содержащего несколько строк, каждая из которых имеет несколько полей. Эта база данных не хранится на жестком диске компьютера, а создается динамически в результате выполнения сценария. Она существует и доступна, пока документ, содержащий генерирующий ее скрипт, загружен в браузер.

База данных JavaScript

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

Справочник типов автомобилей будет содержать наиболее общие сведения об автомобилях: название, модель и фотографию(URL-адрес ее файла). Справочник типа автомобилей в базе данных будет представлять объект des, который создадим с помощью функции-конструктора.

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

Заполним справочник конкретными записями. Множество записей, добавляемых в объект(таблицу), удобно определить как массив(назовем его ades). Элементы массива определим как экземпляры объекта des.

ades=new Array()
ades[0]=new des("Nissan", "Primera", '<img src="images/foto3.jpg">')
ades[1]= new des("Nissan", "Almera",'<img src="images/foto5.jpg">')
ades[3]=new des("Nissan", "Micra", '<img src="images/foto6.jpg">')
ades[4]=new des("Nissan", "Murano", '<img src="images/foto7.jpg">')
ades[5]=new des("Opel", "Astra", '<img src="images/foto8.jpg">')
ades[6]=new des("Audi", "A4", '<img src="images/foto9.jpg">')

В нашем справочнике несколько типов автомобилей. Можно и дальше добавлять и пополнять справочник до определенного предела, обусловленным мощностью вашего компьютера.

Теперь создадим второй список, в который будут внесены все автомобили приписанные к стоянке. Этот список оформим как массив, каждый элемент которого представляет запись о конкретном автомобиле. Элементы этого массива мы определим как экземпляры объекта car, который будет содержать ссылку на справочник объекта des.

Напишем код функции-конструктора объекта car.

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

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

acar=new Array()
acar[0]=new car(" A 144 BX ", " Иванов", ades[1])
acar[1]=new car(" A 098 HM ", " Петров", ades[0])
acar[2]=new car(" B 054 CX ", " Сидоров", ades[5])
acar[3]=new car(" X 765 ET ", " Михайлов",ades[2])
acar[4]=new car(" X 345 XC ", " Александров", ades[6])
acar[5]=new car(" A 765 BC ", " Харламов", ades[0])
acar[6]=new car(" B 872 EO "," Якушев", ades[4])
acar[7]=new car(" H 654 TA "," Майоров", ades[3])
acar[8]=new car(" A 232 CA ", " Старшинов", ades[1])
acar[9]=new car(" K 134 KP ", " Бобров", ades[5])
acar[10]=new car(" B 364 BC "," Локтев",ades[2])
acar[11]=new car(" A 189 AH ", " Альметов", ades[3])
acar[12]=new car(" C 765 XC "," Коноваленко", ades[6])

В нашем списке 12 записей. Модель Nissan Primera в нем встречается два раза Nissan Almera тоже два раза, Opel Astra два раза и т.д. Если бы мы создавали базу данных без справочника, то нам пришлось бы многократно повторять одни и те же данные при определении массива.

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

document.write(acar[1].des.model+acar[1].des.name+acar[1].des.url
+acar[1].owner+acar[1].regnum+"<br>")

document.write(acar[4].des.model+acar[4].des.name+acar[4].des.url
+acar[4].owner+acar[4].regnum+"<br>")

document.write(acar[2].des.model+acar[2].des.name+acar[2].des.url
+acar[2].owner+acar[2].regnum+"<br>")

document.write(acar[12].des.model+acar[12].des.name+acar[12].des.url
+acar[12].owner+acar[12].regnum+"<br>")

В окне веб-браузера это будет выглядеть ТАК.

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

Примечение. Здесь в теле оператора цикла for мы использовали разновидность оператора присвоения +=. Выражение х += у эквивалентно выражению х = х + у. Мы использовали выражение с этим оператором только лишь для того, чтобы выражение справа от него не было слишком длинным.

В окне веб-браузера это будет выглядеть ТАК.