Принципы функционирования сетей Интернет

Курсовая
Контрольная
Типовики
Карта

Объекты в JavaScript

JavaScript разработан с использованием весьма простой объектно-ориентированной парадигмы. В нем имеется ряд предопределенных объектов с соответствующими свойствами и методами, а также инструментарий для создания своих собственных объектов. Как и в Delphi, для доступа к свойству его имя отделяется от имени объекта точкой. И имя объекта, и имя свойства чувствительны к регистру. Особенностью JavaScript является возможность обращения к свойству объекта не только по имени, но и по его порядковому номеру (индексу). Например, к ряду объектов HTML-документа доступ идет или по их порядковому номеру (зависящему от местонахождения объекта в документе) или по имени (если оно задано). Например, если второй тег <FORM> в документе имеет в атрибуте NAME значение "myForm", на эту форму можно сослаться как document.forms[1], или document.forms["myForm"] или document.myForm.

Таким образом, в Java у объектов могут динамически появляться новые свойства (в приведенном примере – свойство с именем myForm). Для добавления свойства всем экземплярам объекта используется ключевое слово prototype. Следующий код добавляет свойство color ко всем экземплярам объекта типа (класса) car, а затем присваивает значение свойству color конкретного экземпляра объекта car1:

сar.prototype.color=null;

car1.color="black";

Для создания объекта используется инициализатор – аналог конструктора в Delphi. Синтаксис объекта, использующего инициализатор, таков:

Имя_объекта = {свойство1:значение1, свойство2:значение2,..., свойствоN:значениеN}

где Имя_объекта - имя нового объекта, каждое свойство является идентификатором (именем, числом или строковым литералом), а каждое значение является выражением, значение которого присваивается свойству. Интересно, что имя объекта можно и не указывать, созадвая "временные" объекты.

Альтернативно объект создается в два этапа, что более привычно:

1. Определяется тип (класс) объекта.

2. Создается экземпляр объекта с помощью оператора new.

Чтобы определить класс объекта, нужно создать функцию-конструктор, которая специфицирует его имя, свойства и методы. Например, предположим, мы хотим создать класс для хранения данных об автомобилях и назвать его car. Свойствами класса будут make, model, year и color. Функция-конструктор будет иметь вид:

function car(make, model, year)
{

 this.make = make;

 this.model = model;

 this.year = year;

 }

На вход функции подаются значения свойств, а внутри они присваваются текущему экземплятру объекта, на который ссылается ключевое слово this (аналог self в Delphi).

Создание экземпляра объекта тогда будет иметь вид:

var Vehicle = new car("Lada", 2108, 2007);

Далее с экземпляром объекта Vehicle класса car можно работать, например:

alert(Vehicle.make);

Все методы объектов в Java - это функции. Метод определяется так же, как обычная функция. Затем используется следующий синтаксис для ассоциирования функции с уже существующим объектом:

object.methodname = function_name

где object - существующий объект, methodname - имя создаваемого метода, а function_name - имя функции.

Затем метод вызывается обычным образом:

object.methodname(params);

Вы можете также определить методы для типа объекта, включив определение метода в конструктор функции.

Для соблюдения принципа инкапсуляции предусмотрены специальные методы для доступа к значениям свойств. Вот пример их использования:

// создание нового "пустого" объекта
// встроенного класса Object

o = new Object;

// добавление свойства a с методами для записи и чтения

o = {a:7, get b() {return this.a+1; },
set c(x) {this.a = x/2}};

Начальное значение свойства a будет равно 7. При чтении значения свойства a будет выполняться код (фактически описание фунции, где слово function заменено на get)


get b()
{return this.a+1; }

и возвращаться значение свойства, увеличенное на единицу. При записи же в свойство значения оно будет разделено пополам при помощи кода


set c(x)

 {this.a = x/2}

Управляющие структуры JavaScript

Основными управляющими структурами в JavaScript являются операторы условного перехода if, if – else, циклы for, while и do – while, а так же оператор выбора switch. Синтаксис управляющих структур практически аналогичен C++.

Операторы условного перехода используются для того, чтобы направить выполнения сценария по тому или иному пути в зависимости от выполнения некоторого условия.

Оператор if..else. Синтаксис этого оператора следующий:

 if (условие)

 {если условие выполнено , то выполняется этот код}

 [ else

 {если условие выполнено , то выполняется этот код}]

Оператор switch. Для проверки большого количества условий более удобным и наглядным является оператор switch. Он особенно удобен, если требуется проверить несколько условий, которые не являются взаимоисключающими.

Синтаксис этого оператора выглядит следующим образом:

 switch (x) {

 case вариант1:

 код

 [break]

 case вариант2:

 код

 [break]

 .......................

 [default: код]

 }

Если оператор break указан, то проверка остальных условий не производиться. Оператор default даёт команду на выполнение следующего за ним кода, если значение выражения не удовлетворяет ни одному из условий.

Оператор for. Оператор for организует цикл с переменной-счетчиком. Синтаксис этого оператора следующий:

 for ( [начальное выражение] ; [условие] ;
[выражение обновления] )

 {

 код

 }

Выражение в круглых скобках, которое находится справа от оператора for, называется заголовком оператора цикла. Содержимое фигурных скобок называется телом цикла. В теле этого цикла может быть использован оператор continue. Этот оператор отменяет выполнение последующего кода, выполняет выражение обновления и начинает следующую итерацию цикла.

Оператор while. Синтаксис этого оператора выглядит следующим образом:

 while ( условие )

 {

 код

 }

Оператор do-while. В отличие от оператора while в операторе do-while код выполняется хотя бы один раз , независимо от условия. Синтаксис этого оператора следующий:

 do {

 код

 }

 while ( условие )

Пример оператора if – else:

if(a < 5)

{

alert("меньше пяти");

d = c + a;

}

else

alert("не меньше пяти");

Если после if или else следует несколько строк операторов, то следует их группировать с помощью фигурных скобок.

Приведем пример использования оператора switch, в котором пользователю предлагается угадать целое число от одного до пяти:

<html>

<head>

<title>Swithc</title>

</head>

<body>

<script language = "JavaScript">

var Number = prompt("Введите целое число от 1 до 5:", "");

Number = parseInt(Number);

switch(Number)

{

case 1:

document.write("Слишком мало");

break;

case 2:

document.write("Слишком мало");

break;

case 3:

document.write("Верно!");

break;

case 4:

document.write("Слишком много");

break;

case 5:

document.write("Слишком много");

break;

default:

document.write("Вы ввели не целое число от 1 до 5");

break;

}

</script>

</body>

<html>

Пример оператора for, в котором выводятся пять пар чисел – первое от нуля до четырех с шагом 1, а второе от нуля до восьми с шагом 2:

var b = 0;

for(i = 0; i < 5; i++)

{

b = i * 2;

document.write("i = " + i + "; " + "b = " + b + "<br>");

}

Того же самого эффекта можно добиться и с помощью оператора while:

i = 0;

b = 0;

while(i < 5)

{

b = i * 2;

document.write("i = " + i + "; " + "b = " + b + "<br>");

i++;

}

а так же с помощью do – while:

i = 0;

b = 0;

do

{

b = i * 2;

document.write("i = " + i + ";

" + "b = " + b + "<br>");

i++;

}

while(i < 5)

Графика в JavaScript

Изначально язык JavaScript не предназначался для выполнения графических построений, так как любая работа с графикой довольно сильно загружает процессор, а одна из целей применения Java – снижение этой загрузки и повышение быстродействия браузеров. Однако существуют "обходные маневры" для выполнения полноценных графических построений, а именно – создание собственного класса с набором графических методов. Построения производятся в окне браузера "поверх" уже имеющейся там информации.

Для работы с графикой прежде всего надо указать холст (англ. canvas), на котором и будут выполняться все построения. Холстом может быть как все поле окна браузера (задается в теге <BODY>), так и поле отдельного блока (задается в теге <DIV>, см. раздел 3.6.3).

Пример для блока:

<HTML>

 <BODY>

 <DIV id=”theCanvas” style=”position:absolute; left=100px; top=50px;”>

 </DIV>

 </BODY>

</HTML>

Методы рисования собраны в классе Graphics. При создании экземпляра объекта этого класса на вход конструктору подается или ID холста, или пустое значение – в последнем случае в качестве холста принимается все окно браузера. Ниже приведена функция инициализации графики:

function Graphics(canvas)

{

 // ссылка на холст, если пусто – то на все окно

 this.canvas = canvas;

 // кэш

 this.cache = new Array;

 // массив отображаемых объектов

 this.shapes = new Object;

 // переменная для генерации внутренних ID

 this.nObject = 0;

 // установки по умолчанию

 this.penColor = "black";

 this.zIndex = 0;

}

Собственно отрисовка заключается в создании элементов типа <DIV> размером в один или более пикселов, для чего вводится метод createPlotElement(). Данный метод проверяет наличие холста для рисования, а затем либо извлекает нужный элемент <DIV> из кэша, либо создает его заново. У каждого нового элемента следует установить свойство style.position в значение "absolute" для задания абсолютной системы координат (относительно левого верхнего угла холста).

Graphics.prototype.createPlotElement = function(x,y,w,h)

// x,y – координаты; w,h – ширина и высота

{

 // detect canvas

 if ( !this.oCanvas )

 {

 if ( (this.canvas == undefined)
|| (this.canvas == "") )

 this.oCanvas = document.body;

 else

 this.oCanvas = document.getElementById(this.canvas);

 }

 // получить эл-т DIV

 var oDiv;

 if ( this.cache.length )

 oDiv = this.cache.pop();

 else {

 oDiv = document.createElement('div');

 this.oCanvas.appendChild(oDiv);

 oDiv.style.position = "absolute";

 oDiv.style.margin = "0px";

 oDiv.style.padding = "0px";

 oDiv.style.overflow = "hidden";

 oDiv.style.border = "0px";

 }

 // установка свойств

 oDiv.style.zIndex = this.zIndex;

 oDiv.style.backgroundColor = this.penColor;

 oDiv.style.left = x;

 oDiv.style.top = y;

 oDiv.style.width = w + "px";

 oDiv.style.height = h + "px";

 oDiv.style.visibility = "visible";

 return oDiv;

}

Отрисованные блоки удаляются при помощи метода releasePlotElement(). Он просто устанавливает свойство style.visibility элемента <DIV> в значение “hidden” и помещает элемент в кэш для возможного дальнейшего использования.

Для отрисовки более сложных форм применяются объекты класса Shape и методы draw() и undraw(). Для работы с формами в класс Graphics вводятся следующие два метода:

Graphics.prototype.addShape = function(shape)

{

 shape.oGraphics = this;

 shape.graphicsID = this.nObject;

 this.shapes[this.nObject] = shape;

 this.nObject++;

 shape.draw();

 return shape;

}

Graphics.prototype.removeShape = function(shape)

{

 if ( (shape instanceof Object) &&

 (shape.oGraphics == this) &&

 (this.shapes[shape.graphicsID] == shape) )

 {

 shape.undraw();

 this.shapes[shape.graphicsID] = undefined;

 shape.oGraphics = undefined;

 }

}

Метод addShape() устанавливает два свойства у подаваемого на вход объекта класса Shape. Свойству oGraphics присваивается ссылка на текущий экземпляр класса Graphics, а свойству graphicsID – уникальный номер. Свойство graphicsID используется в дальнейшем для доступа к графической форме. Метод draw() вызывает собственно отрисовку.

Метод removeShape() проверяет, существует ли указанная графическая форма на холсте и затем вызвает метод undraw() для удаления формы из списка.

Метод clear() выполняет цикл по всем имеющимся формам и удаляет их:

Graphics.prototype.clear = function()

{

 for ( var i in this.shapes )

 this.removeShape(this.shapes[i]);

}

Методы класса Shape реализуются стандартными алгоритмами компьютерной графики. Функция отрисовки отрезка имеет вид:

Graphics.prototype.drawLine = function(x1,y1,x2,y2)

{

 return this.addShape(new Line(x1,y1,x2,y2))

}

Для отрисовки окружностей вводится метод drawCircle:

Graphics.prototype.drawCircle = function(x,y,r)

{

 return this.addShape(new Circle(x,y,r))

}

Полный текст графического пакета для JavaScript можно загрузить с сайта кафедры.

Рассмотрим пример использования графики. Следующий код изображает две перекрещивающиеся линии (красную и зеленую) и синюю окружность:

<html>

<head>

<script type=”text/javascript”>

 // insert the graphics code here.

</script>

<script type=”text/javascript”>

function drawShapes()

{

 gr.penColor = "red";

 gr.drawLine(10,10,190,190);

 gr.penColor = "green";

 gr.drawLine(190,10,10,190);

 gr.penColor = "blue";

 gr.drawCircle(100,100,45);

}

</script>

</head>

<body onload="drawShapes();">

 Check out the graphics:

 <div id="theCanvas" style="position:relative; width:200px;  height:200px; overflow:hidden;"></div>

</body>

</html>

На главную