Тази част ще бъде описана поддръжката на обекти и обектно - базираното програмиране с Java Script. Тя представя обектния модел на Java Script и показва някои от предварително дефинираните обекти на езика. Показано е и създаването на собствени обекти. Тъй като темата е много обширна, за незапознатите с обектното програмиране препоръчвам да разгледат дадените термини. Преди да започнем трябва да имате впредвид, че Java Script не е изцяло обектно - ориентиран език, той по -скоро е обектно - базиран и на него са присъщи някои от важните свойства на обектно - ориентираното програмиране. Java Script обаче не поддържа наследяване, класифициране, капсулиране и скриване на информацията. В най - общи линии всеки обект се състои от две неща :

    * Набор от свойства. Те съдържат данните.
    * Методи, които извършват определени действия

   Вие вече сте виждали няколко обекта. Това например е обекта document с неговия метод write. Друг разгледан обекта масив (Array) и част от неговите методи (concаt(), sort() и т.нар.). Както бе споменато всеки обект притежава някакви свойства. Например обекта лампа притежава свойството включена/изключена. Достъпа до свойставата на обектите ства чрез комбиниране на името на обекта с името на свойството разделени с точка:

CODE

1	document.bgColor = "white";

Горният ред променя цвета на страницата (обекта document) чрез свойството bgColor, като присвоява низа "white" на това свойство. Методите на обектите се използват подобно на свойствата с тази разлика, че задължително поставянето на скоби след името на метода. Пример за това е използването на методите на обекта масив:

CODE

1 2 3

array1.sort(); array1.reverse(); array1.join(",");

Последният ред е пример за използването на параметри на методите. Ако параметрите са повече от един те се разделят със запетаи. Създаването на инстанция на обект става със запазената дума new .

CODE

1	var array1 = new Array(10);

  Часта new обектенТип(параметри) от горния пример се нарича конструктор. Някои обекти имат повече от един конструктор, които те различават по броя параметри, които получават.
   Java Script притежва множество вградени обекти. Такива например са обекта Array ( за работа с масиви), Math (за работа с математически функции), Date (за работа с дати), Function (който позволява третирането на функциите като обекти) и др. Най - важните обаче са обектите на браузъра. Те се създават при зареждането на страница от браузъра и включват обекти като прозорци, форми, фреймове и др. Чрез тези обекти Java Script има възможност за достъп до елементите на страницата, както и взаимодействие с потребителя. Следващата таблица показва обектите на страницата достъпни от Java Script :

CODE

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

обект window      Предоставя методи за достъп до прозореца на браузъра. При достъп до методите се допуска префиксът window да се пропуска. обект document     Предоставя методи за достъп до елементите на страницата. обект location     Достъп до URL адрес. обект history     Достъп до историята на браузъра. обект frame масив frames     Достъп до фреймове. Чрез масива е възможен достъп до всики фреймове. обект link масив links     Достъп до хипертекстова връзка. Чрез помоща на масива може да осъществи достъп до всички връзки в документа. обект anchor масив anchors     Достъп до котви. Чрез помоща на масива може да осъществи достъп до всички котви в документа. обект image масив images     Достъп до изображения. обект area     Достъп до карта - изображение от клиентската страна. обект Applet масив applets     Достъп до Java аплет. обект event обект Event     За достъп до информация за случило се събитие. Обекта event предоставя информация за конкретното събитие. Обекта Event осигурява константи за идентифициране на събитието. обект form масив forms     Достъп до формуляри. обект elements     За достъп до всичките елементи на даден формуляр. обект text     Достъп до текстово поле във формуляр. обект textarea     Достъп до текстова област във формуляр. обект radio     Достъп до радио бутони във формуляр. обект checkbox     Достъп до oтметки във формуляр. обект button     Достъп до бутони във формуляр. обект submit     Достъп до Submit бутон във формуляр. обект reset     Достъп до Reset бутон във формуляр. обект select обект option     За достъп до списък със селекции. Обекта option осигурява достъп до елементите на списъка. обект password     Достъп до поле за парола във формуляр. обект hidden     Достъп до скрито поле във формуляр. обект FileUpload     Достъп до поле за качване на файл във формуляр. обект navigator     Предоставя информация за типа на браузъра с който се разглежда страницата. обект screen     Достъп до информация за размера и дълбочината на цветовете на екрана на потребителя. обект embed масив embeds     Позволява достъп до вградени обекти. Масива embeds осигурява достъп до всички вградени обекти в страницата. обект mimeType масив mimeTypes     Достъп до поддържаните от браузъра MIME типове. Масива mimeTypes съдържа всички MIME типове поддържани от браузъра. обект plugin масив plugins     Достъп до информация за даден plugin. Масива plugins съдържа всички плъгини, поддържани от браузъра.

Обектите на браузъра се организират в йерархия, която съответства на структурата на заредените страници. Тази ейрархия се нарича ейрархия от инстанции. Най - високо в тази ейрархия са обектите window и document. Пример за тази ейрархия е един документ с два формуляра. Първото ниво в този документ е обекта window. Следващото ниво се явява свойството на обекта window - document. То представлява асоциирания с прозореца document обект. Следващото ниво е масива forms и накрая са елементите на формулярите elements. Ето пример за достъп до името на третия елемент на първия формуляр ( не забравяйте, че window може да се пропусне) :

CODE

1	document.forms[0].elements[2].name

   Следващият пример ще ви демонстрира работа с някои обекти :



CODE

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<HTML> <HEAD> <TITLE>Програмиране в Интернет - Java Script</TITLE> <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251"> <SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"> <!-- скриване от стари браузъри function changeColor(color) { document.bgColor = color; } // край на скриването--> </SCRIPT> </HEAD> <BODY> <H2>Свойства на браузъра</H2> <SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"> <!-- скриване от стари браузъри document.write(navigator.appCodeName+" "+navigator.appName+" "); document.write(navigator.appVersion+"<BR>"); document.write("<H2>Цвят на фона на страницата : "+document.bgColor+"</H2>"); // край на скриването--> </SCRIPT> <H2>Промяна на фона на страницата</H2> <FORM ACTION="ex13.html"> <INPUT TYPE="button" value="Червен" onClick="changeColor('#FF0000')"> <INPUT TYPE="button" value="Зелен" onClick="changeColor('#00FF00')"> <INPUT TYPE="button" value="Син" onClick="changeColor('#0000FF')"> <INPUT TYPE="button" value="Бял" onClick="changeColor('#FFFFFF')"> </FORM> </BODY> </HTML>

Тук чрез обекта navigator и неговите методи се визуализура типа на браузъра и неговата версия. Чрез метода bgColor на обекта document се променя цвета фона страницата. Този метод е пример за т.нар. get-set методи. Това са методи, чрез които може както да се задава стойност, така и да се чете тази стойност в зависимост от това как са използване. В горния пример се използва и една конструкция непозната досега - onClick. Това е т.нар. финкция за обработка на събития или манилулатори на събития (events handlers). Тези функции са вградени в HTML документа като атрибути на HTML таговете. На тях се присвоява Java Script код, който да се изпълни при постъпване на събитието. Но какво е едно събитие? Събитията са действията, които потребителят извършва, докато разглежда страницата. Това са например щраквания върху бутони и връзки, посочването на изображения и др. Всеки един от тези манипулатори започва с представката "on" и завършва с името на събитието. Следва таблица с възможните събития :

CODE

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Събитие      Действие Събития на курсора onMouseOver     Курсорът е преместен върху обекта onMouseOut     Курсорът е преместен извън обекта Събития за обекти(картинки,бутони и др) onClick     Щракване с мишката върху обекта onBlur     Потребителя напуска обекта onChange     Потребителя сменя обекта onFocus     Потребителя активира обекта onSelect     Потребителя селектира обекта( например текст). Събития на страницата и формулярите onLoad     Завършено е зареждането на документа onUnload     Потребителя напуска страницата или затваря прозореца на браузъра onAbort     Потребителя прекъсва зареждането на страницата onSubmit     Потребителя изпраща формуляр onError     Възикнала е грешка в скрипта

   Ето и пример в който се използват събития:

CODE

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<HTML> <HEAD> <TITLE>Програмиране в Интернет - Java Script</TITLE> <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251"> <SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"> <!-- скриване от стари браузъри function pageEvents(action) { if (action == "ok") alert("Страницата беше заредена успешно") else alert("Вие напускате страницата"); } function changeStatus() { window.status = "HELLO WORLD!"; } function textArea(action) { if (action == "1") alert("Вие активирахте обекта TEXTAREA") else alert("Вие напуснахте обекта TEXTAREA") } // край на скриването--> </SCRIPT> </HEAD> <BODY onLoad="pageEvents('ok')" onUnload="pageEvents('out')"> <A HREF="#" onMouseOver="changeStatus()">Променете статус бара на браузъра.</A> <FORM ACTION="ex13.html"> <TEXTAREA onBlur="textArea(2)" onFocus="textArea(1)"> Проверете работата на onBlur и onFocus. </TEXTAREA> </FORM> </BODY> </HTML>

 Като за финал трябва да се спомене съвместимоста на Java Script кода изпълнен на различни браузъри. Например масивите plugins и mimeTypes ще работят чудесно на Netscape Navigator или Mozilla, но не и върху Internet Explorer - в този случай резултата от тях ще е 0. Това е един от малкото примери за такива несъвместимости. Някои от обектите работят само на Internet Explorer, други само на Netscape Navigator. Следващият код показва как различните браузъри интерпретират различните обекти.

CODE

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<HTML> <HEAD> <TITLE>Програмиране в Интернет - Java Script</TITLE> <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251"> <SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"> <!-- скриване от стари браузъри function pageEvents() { document.write("<H1>Свойства на "+navigator.appName+"</H1>"); var property; for (property in window) { document.write("Свойството "+property+" има стойност: "+window[property]+"<BR>"); }} // край на скриването--> </SCRIPT> </HEAD> <BODY onLoad="pageEvents()"> </BODY> </HTML>