На этом шаге мы рассмотрим создание пользовательских объектов.

Опытные программисты могут, как уже говорилось ранее, сами создавать объекты. Попробуем и мы создать объект - Rectangle, то есть прямоугольник и написать программу, которая будет содержать основные элементы программы JavaScript и будет создавать прямоугольник.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
// --- Описание объекта Rectangle ---
// Конструктор
function Rectangle (a,b)
{
  // Свойства
  this.width = a;  // Ширина прямоугольника
  this.height = b; // Высота прямоугольника
  // Методы
  this.square = _square;   // Площадь 
                           //прямоугольника
  this.perimeter = _perimeter; // Периметр 
                            // прямоугольника
  this.radius = _radius;  // Радиус описанной 
                          //окружности
} 
// Реализация методов объекта
function _square()
{   return this.width*this.height;}

function _perimeter()
{   return 2*(this.width + this.height); }

function _radius()
{
  var temp = this.width*this.width + this.height*this.height;
  return Math.sqrt(temp)/2;
}
// ---- Конец описания объекта Rectangle
//Пример работы с построенным объектом
var r1 = new Rectangle (3,4);
alert ("Первый прямоугольник:\nШирина=" + r1.width + "\nВысота=" + r1.height);
var r2 = new Rectangle (10,20);
alert ("Второй прямоугольник:\nШирина=" + r2.width + "\nВысота=" + r2.height);
alert ("Площадь первого прямоугольника = " + r1.square());
alert ("Периметр второго прямоугольника = " + r2.perimeter());
alert ("Радиус для первого прямоугольника = " + r1.radius());
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Текст этого документа можно взять здесь.

Создайте HTML-документ, содержащий данный скрипт и выполните его в браузере.

Опишем кратко работу этого скрипта. Как говорилось ранее, класс содержит свойства и методы, которые, в нашем случае, определяются в конструкторе. Заголовок конструктора

    function Rectangle (a,b)

говорит о том, что при создании прямоугольника нужно задать два параметра, значения которых будут размещены в переменных a и b.

Следующий вопрос, который может у вас возникнуть: как браузер "понимает", что есть свойство, а что - метод? Ответ очень простой: если реализация конструкции отсутствует, то это свойство, в противном случае - метод. Методам square, perimeter и radius присвоены значения, которые являются именами функций. Эти функции вызываются тогда, когда в скрипте используются указанные методы.

Служебное слово this содержит ссылку на тот экземпляр объекта, который использует данное свойство или метод. Использование this позволяет объяснить браузеру, что в конструкции r1.height нужно использовать высоту прямоугольника r1, а в конструкции r2.height - высоту прямоугольника r2.

Надеемся, что остальные конструкции не вызвали у вас затруднений.

На следующем шаге мы рассмотрим объектную модель браузера Internet Explorer.

Предыдущий шаг Содержание Следующий шаг