Создать опрос пользователя по его предпочтениям телепередач, используя в обязательном порядке следующие элементы формы:
password,
сheckbox
option value
button
radio
textarea.
На другой странице должна отразиться вся введенная информация в виде ненумерованного списка.
Тема №4
Организация работы с объектами
Собственных классов
Пример диалог создания собственного класса
Пусть нам нужно создать класс, предназначенный для хранения записи воображаемой телефонной базы данных. В этом классе нам нужно предусмотреть свойства для хранения имени, фамилии, номера телефона, адреса, а также специального признака для записей, закрытых от несанкционированного доступа. Дополнительно требуется разработать методы, предназначенные для отображения содержимого объекта в табличном виде, как это показано на рис. 1
Рис. 1. Просмотр содержимого записей
Прежде всего займемся созданием собственного класса с названием myRecord. Пусть пока в нем не будет методов, мы добавим их позже.
Искомый класс создается следующим образом:
function myRecord(name, family, phone, address)
{
this.name = name;
this.family = family;
this.phone = phone;
this.address = address;
this.secure = false;
}
Нетрудно заметить, что описание нашего класса есть ни что иное, как функция конструктора. Параметры конструктора предназначены для установки свойств объекта при его создании на базе класса.
Свойства определяются простыми ссылками на их имена с указанием ключевого слова this. Это ключевое слово здесь указывает, что в операторе выполняется ссылка на свойства того объекта, для которого вызван конструктор, то есть для создаваемого объекта.
Обратите внимание, что наш конструктор инициализирует свойство с именем secure, записывая в него значение false. Соответствующий параметр в конструкторе не предусмотрен, что вполне допустимо.
Как пользоваться определенным классом?
На базе этого класса вы можете создать произвольное количество объектов. Ниже мы привели фрагмент сценария JavaScript, где на базе класса myRecord создается два объекта rec1 и rec2:
var rec1;
var rec2;
rec1 = new myRecord("Иван", "Иванов",
"000-322-223", "Малая Большая ул., д. 225, кв. 226");
rec2 = new myRecord("Петр", "Петров",
"001-223-3334", "Большая Малая ул., д. 552, кв. 662");
rec2.secure = true;
Объекты создаются при помощи оператора new, знакомого тем, кто составлял программы на языках С++ и Java. Здесь мы передаем конструктору параметры для инициализации свойств создаваемых объектов.
Что же касается свойства с именем secure, то в объекте rec2 оно инициализируется уже после создания последнего. В него записывается значение true. Мы не изменяли свойство secure объекта rec1, поэтому в нем хранится значение false.
Теперь наша задача - добавление в определенный нами класс новых методов с именами printTableHead, printTableEnd и printRecord. Первые два из этих методов выводят в документ HTML, соответственно, начальный и конечный фрагмент таблицы, а третий - строки таблицы, отражающие содержимое записей.
В сокращенном виде новое определение класса myRecord представлено ниже:
function printTableHead()
{
. . .
}
function printTableEnd()
{
. . .
}
function printRecord()
{
. . .
}
function myRecord(name, family, phone, address)
{
this.name = name;
this.family = family;
this.phone = phone;
this.address = address;
this.secure = false;
this.printRecord = printRecord;
this.printTableHead = printTableHead;
this.printTableEnd = printTableEnd;
}
Здесь перед определением конструктора мы расположили определения для функций-методов нашего класса. Кроме этого, в конструктор добавлено определение новых свойств:
this.printRecord = printRecord;
this.printTableHead = printTableHead;
this.printTableEnd = printTableEnd;
Эти свойства хранят ссылки на методы, определенные выше.
После такого определения класса вы можете создавать объекты и обращаться к определенным методам:
rec1.printTableHead();
rec1.printRecord();
rec1.printTableEnd();
rec2.printTableHead();
rec2.printRecord();
rec2.printTableEnd();
Возвращаясь к документу, показанному выше на рис. 2.3, приведем его полный исходный текст (листинг 2.2).
"000-322-223", "Малая Большая ул., д. 225, кв. 226");
rec2 = new myRecord("Петр", "Петров",
"001-223-3334", "Большая Малая ул., д. 552, кв. 662");
rec2.secure = true;
rec1.printTableHead();
rec1.printRecord();
rec1.printTableEnd();
rec2.printTableHead();
rec2.printRecord();
rec2.printTableEnd();
// -->
</SCRIPT>
</BODY>
</HTML>
Определение нового класса myRecord и его методов мы расположили в области заголовка документа HTML, как это принято делать.
Метод printTableHead выводит в документ HTML заголовок таблицы. Внешний вид этого заголовка зависит от содержимого свойств объекта.
Прежде всего метод printTableHead проверяет свойство secure, получая его значение при помощи ключевого слова this:
var szSec = "";
if(this.secure)
szSec = " (Secure)";
else
szSec = " (Unsecure)".fontcolor("red");
Здесь это ключевое слово означает, что необходимо использовать свойство того объекта, для которого был вызван метод printTableHead.
Если содержимое свойства secure равно true, в текстовую переменную szSec записывается строка " (Secure)". Если же оно равно false, в эту переменную заносится строка " (Unsecure)", причем для строки устанавливается красный цвет.
Так как в JavaScript все текстовые строки (в том числе и литералы) являются объектами встроенного класса String, то для них можно вызывать определенные в этом классе методы. В частности, метод fontcolor позволяет установить цвет строки, чем мы и воспользовались.
Далее метод printTableHead выводит в документ HTML оператор <TABLE> с параметром BORDER, с которого начинается определение таблицы, имеющей рамку. Надпись над таблицей задается с помощью динамически формируемого оператора <CAPTION>. В эту надпись включается имя и фамилия, извлеченные из соответствующих свойств объекта, для которого был вызван метод printTableHead. Затем этот метод выводит надписи для столбцов таблицы.
Метод printTableEnd выводит в документ HTML оператор </TABLE>, завершающий определение таблицы, а также пустой параграф для отделения таблиц, следующих друг за другом:
function printTableEnd()
{
document.write("</TABLE>");
document.write("<P> ");
}
Последний метод, определенный в нашем классе, называется printRecord. Он печатает содержимое первых четырех свойств объекта как строку таблицы, определенной в документе HTML только что описанной функцией printTableHead.
Обратите внимание, что содержимое свойств объекта печатается наклонным шрифтом, для чего мы вызываем метод italics:
document.write("<TR><TD>Name:</TD><TD>" +
this.name.italics() + "</TD></TR>");
Определение класса myRecord мы уже описали выше.
Перейдем теперь ко второй части нашего сценария, расположенной в теле документа HTML.
Здесь мы создаем два объекта rec1 и rec2 на базе класса myRecord, а затем устанавливаем свойство secure объекта rec2 в состояние true.
Далее сценарий последовательно выводит в документ HTML две таблицы, соответствующие созданным объектам, вызывая для этого методы printTableHead, printRecord и printTableEnd.
Как видите, применение собственного класса позволили сильно упростить задачу инициализации и отображения содержимого записей нашей воображаемой телефонной базы данных. Фактически мы свели эту задачу к вызовам нескольких методов, определенных заранее в нашем классе.
