ЯЗЫК JAVASCRIPT (ПРОДОЛЖЕНИЕ)

1. Кафедра «Автоматизированные станочные системы» Dept. of Automated Manufacturing Systems ЯЗЫК JAVASCRIPT (ПРОДОЛЖЕНИЕ) Лекция11 Троицкий Д.И. Интернет-технологии

2. Объекты в JavaScript ВJavaScript имеется ряд предопределенных объектов с соответствующими свойствами и методами, а также инструментарий для создания своих собственных объектов Для доступа к свойству его имя отделяется от имени объекта точкой. И имя объекта, и имя свойства чувствительны к регистру. Особенностью JavaScript является возможность обращения к свойству объекта не только по имени, но и по его порядковому номеру (индексу). В Java у объектов могут динамически появляться новые свойства. Для добавления свойства всем экземплярам объекта используется ключевое слово prototype. Например: сar.prototype.color=null; car1.color="black"; Троицкий Д.И. Интернет-технологии

3. Для создания объекта используется инициализатор. Синтаксис объекта, использующего инициализатор, таков: Имя_объекта = {свойство1:значение1, свойство2:значение2,..., свойствоN:значениеN} где Имя_объекта - имя нового объекта, каждое свойство является идентификатором (именем, числом или строковым литералом), а каждое значение является выражением, значение которого присваивается свойству. Имя объекта можно и не указывать, создавая "временные" объекты. Альтернативно объект создается в два этапа: 1. Определяется тип (класс) объекта. Чтобы определить класс объекта, нужно создать функцию-конструктор, которая специфицирует его имя, свойства и методы. 2. Создается экземпляр объекта с помощью оператора new. Троицкий Д.И. Интернет-технологии

4. Например, предположим, мы хотим создать класс для хранения данных об автомобилях и назвать его car. Свойствами класса будут make, model, year и color. Функция-конструктор будет иметь вид: function car(make, model, year) { this.make = make; this.model = model; this.year = year; } На вход функции подаются значения свойств, а внутри они присваиваются текущему экземпляру объекта, на который ссылается ключевое слово this. Создание экземпляра объекта тогда будет иметь вид: var Vehicle = new car("Lada", 2108, 2007); Далее с экземпляром объекта Vehicle класса car можно работать, например: alert(Vehicle.make); Троицкий Д.И. Интернет-технологии

5. Все методы объектов в 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}}; Троицкий Д.И. Интернет-технологии

6. Управляющие структуры JavaScript Оператор if..else. Синтаксис этого оператора следующий: if (условие) {если условие выполнено , то выполняется этот код} [ else {если условие выполнено , то выполняется этот код}] Например: if(a < 5) { alert("меньше пяти"); d = c + a; } else alert("не меньше пяти"); Если после if или else следует несколько строк операторов, то следует их группировать с помощью фигурных скобок. Троицкий Д.И. Интернет-технологии

7. Оператор switch. Синтаксис этого оператора выглядит следующим образом: switch (x) { case вариант1: код [break] case вариант2: код [break] ....................... [default: код] }. Если оператор break указан, то проверка остальных условий не производится. Оператор default даёт команду на выполнение следующего за ним кода, если значение выражения не удовлетворяет ни одному из условий. Троицкий Д.И. Интернет-технологии

8. Оператор for. Оператор for организует цикл с переменной-счетчиком. Синтаксис этого оператора следующий: for ( [начальное выражение] ; [условие] ; [выражение обновления] ) { код } В теле этого цикла может быть использован оператор continue. Этот оператор отменяет выполнение последующего кода, выполняет выражение обновления и начинает следующую итерацию цикла. Оператор while.Синтаксис этого оператора выглядит следующим образом: while ( условие ) { код } Троицкий Д.И. Интернет-технологии

9. Оператор do-while. В отличие от оператора while в операторе do-while код выполняется хотя бы один раз , независимо от условия. Синтаксис этого оператора следующий: do { код } while ( условие ) Пример оператора for, в котором выводятся пять пар чисел – первое от нуля до четырех с шагом 1, а второе от нуля до восьми с шагом 2: var b = 0; for(i = 0; i < 5; i++) { b = i * 2; document.write("i = " + i + "; " + "b = " + b + "<br>"); } Троицкий Д.И. Интернет-технологии

10. Того же самого эффекта можно добиться и с помощью оператора 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) Троицкий Д.И. Интернет-технологии

11. Графика в JavaScript Изначально язык JavaScript не предназначался для выполнения графических построений, так как любая работа с графикой довольно сильно загружает процессор, а одна из целей применения Java – снижение этой загрузки и повышение быстродействия браузеров. Однако существуют "обходные маневры" для выполнения полноценных графических построений, а именно – создание собственного класса с набором графических методов. Построения производятся в окне браузера "поверх" уже имеющейся там информации. Для работы с графикой прежде всего надо указать холст (англ. canvas), на котором и будут выполняться все построения. Холстом может быть как все поле окна браузера (задается в теге <BODY>), так и поле отдельного блока (задается в теге <DIV>). Троицкий Д.И. Интернет-технологии

12. Методы рисования собраны в классе 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; } Троицкий Д.И. Интернет-технологии

13. Отрисовка заключается в создании элементов типа <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 Троицкий Д.И. Интернет-технологии

14. 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; } Троицкий Д.И. Интернет-технологии

15. Отрисованные блоки удаляются при помощи метода releasePlotElement(). Он просто устанавливает свойство style.visibilityэлемента <DIV> в значение “hidden” и помещает элемент в кэш для возможного дальнейшего использования. Для отрисовки более сложных форм применяются объекты класса Shapeи методы draw() и undraw(). Дляработысформамивкласс Graphics вводятсяследующиедваметода: 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; } } Graphics.prototype.addShape = function(shape) { shape.oGraphics = this; shape.graphicsID = this.nObject; this.shapes[this.nObject] = shape; this.nObject++; shape.draw(); return shape; } Троицкий Д.И. Интернет-технологии

16. Метод removeShape() проверяет, существует ли указанная графическая форма на холсте и затем вызвает метод undraw() для удаления формы из списка. Метод addShape() устанавливает два свойства у подаваемого на вход объекта класса Shape. Свойству oGraphics присваивается ссылка на текущий экземпляр класса Graphics, а свойству graphicsID – уникальный номер. СвойствоgraphicsID используется в дальнейшем для доступа к графической форме. Методdraw()вызываетсобственноотрисовку. Методclear()выполняетциклповсемимеющимсяформамиудаляетих: Graphics.prototype.clear = function() { for ( var i in this.shapes ) this.removeShape(this.shapes[i]); } Троицкий Д.И. Интернет-технологии

17. Методы класса 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)) } Троицкий Д.И. Интернет-технологии

18. Пример использования графики: <html> <head> <script type=”text/javascript”> </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();"> <div id="theCanvas" style="position:relative; width:200px; height:200px; overflow:hidden;"></div> </body> </html> Здесь идёт отрисовка синей окружности и двух линий: красной и зелёной. Троицкий Д.И. Интернет-технологии