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

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


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


document.bgColor = "white";


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


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


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


var array1 = new Array(10);


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


обект 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 може да се пропусне) :


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


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


<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" и завършва с името на събитието. Следва таблица с възможните събития :


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


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


<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. Следващият код показва как различните браузъри интерпретират различните обекти.


<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>


-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
›››Източник: web-teacher.org
-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_

/ Трябва да сте регистриран за да напишете коментар /