TML, CSS, СКРИПТЫ: практика создании сайтов

Как видно из

приведенного выше фрагмента кода, имена свойств записываются через точку («.») после

названий объектов, к которым эти свойства относятся.

Прочесть значение того или иного свойства мы сможем, пользуясь как

нотацией объектов, так и нотацией массивов:

var author = mybook.author;

var publisher = mybook['publisher1];

Конструктор объектов — это, по сути дела, функция, имя которой совпадает

с названием класса объекта. Попробуем определить свой собственный класс

Book и соответствующий конструктор объектов, благо с функциями мы уже

сталкивались:

function Book(title, author, publisher, year)

{

this.title = title;

this.author = author;

this.publisher = publisher;

this.year = year;

}

Эта функция имеет четыре аргумента с именами title, author, publisher и

year. Ключевое слово this указывает на текущий объект. В данном случае мы

присваиваем значения аргументов одноименным свойствам объекта,

создаваемого при помощи определенного нами конструктора.

Вот так можно использовать конструктор для построения однотипных

объектов, принадлежащих воплощенному нами классу Book:

340 Часть II. Применение веб-технологий стороны клиента для создания сайтов

var html_css_scripts = new Book(‘HTML, CSS, скрипты: практика создания

сайтов *, ‘Артемий Ломов’, ‘БХВ-Петербург’, 2005);

var web_design = new Book(‘Веб-дизайн’, ‘Дмитрий Кирсанов’, ‘Символ-

Плюс’, 1999);

Объект htmicssscripts, принадлежащий классу Book, содержит данные о

книге «HTML, CSS, скрипты: практика создания сайтов» вашего покорного

слуги. Объект webdesign в том же самом формате хранит информацию о

культовой книге всех времен и народов — «Веб-дизайн» Дмитрия Кирсанова.

Мы легко можем получить информацию, скажем, о том, какое издательство

выпустило ту или иную книгу, обратившись к свойству publisher

соответствующего объекта:

var р = web_design.publisher; /* Переменная р примет значение

«Символ-Плюс» */

Функция, так или иначе воздействующая на свойства того или иного объекта,

называется методом данного объекта.

Попытаемся создать метод showinfo, позволяющий осуществить вывод

информации о той или иной книге.

! Листинг 7А Объектно-ориентированное программирование а действии

%> «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>

// Определяем конструктор объектов класса Book:

function Book(title, author, publisher, year)

{

this.title = title;

this.author = author;

this.publisher = publisher;

this.year = year;

this.showinfo = showinfo; // Добавляем метод showinfo

}

Глава 7. Создание интерактивных сайтов при помощи языка сценариев JavaScript 341

// Определяем метод showlnfo:

function showlnfo()

{

document.write('' + this.title + ,\n');

document.write('

AB

^>Top: ' + this.author + ,

\n');

document.write('

Издательство:зрап> ' + this.publisher + *

\n*);

document.write('

Год

^ издания: ' + this.year + '

\n*);

}

// Создаем три однотипных объекта, описывающих разные книги:

var html_css_scripts = new Book('HTML, CSS, скрипты: практика

^ создания сайтов', 'Артемий Ломов*, *БХВ-Петербург*, 2005);

var web_design = new Book('Веб-дизайн *, 'Дмитрий Кирсанов*,

*Ъ 'Символ-Плюс', 1999);

var web_pages = new Book('Создание веб-страниц: искусство

^ верстки*, 'Михаил Дубаков', 'Новое знание', 2004);

// Применяем метод showlnfo к созданным объектам:

html_css_scripts.showlnfo();

web_design.showlnfo();

web_pages.showlnfo();

//—>

Отображение веб-страницы, описанной в листинге 7.4, в окошке браузера

демонстрируется на рис. 7.3.

Пример, описанный в вышеприведенном листинге, возможно, не блещет

практичностью— но зато он помогает раз и навсегда разобраться с

объектами.

Перед нами веб-страница, HTML-разметка которой не содержит ровным

счетом никакой полезной информации — весь контент формируется при

помощи скрипта.

Скрипт содержит две функции: Book— уже знакомый нам конструктор

объектов — и showlnfo.