Съдържание на урока:
- Събития и обекти в Java Script.
- Обектно - програмиране в Java Script.
- Обекти на браузъра.
- Достъп до обектите на браузъра с Java Script.
- Съвместимост между отделните браузъри.
В тази част от нашата поредица ще бъде описана поддръжката на обекти
и обектно - базираното програмиране с Java Script. Тя представя обектния
модел на Java Script и показва някои от предварително дефинираните обекти
на езика. Показано е и създаването на собствени обекти. Тъй като темата е
много обширна, за незапознатите с обектното програмиране препоръчвам да
разгледат дадените термини. Преди да започнем трябва да имате впредвид,
че Java Script не е изцяло обектно - ориентиран език, той по -скоро е обектно - базиран
и на него са присъщи някои от важните свойства на обектно - ориентираното
програмиране. Java Script обаче не поддържа наследяване, класифициране,
капсулиране и скриване на информацията. В най - общи линии всеки обект се
състои от две неща :
- Набор от свойства. Те съдържат данните.
- Методи, които извършват определени действия
Вие вече сте виждали няколко обекта. Това например е
обекта 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>PC-Tools Guides - 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
таговете. На тях се присвоява JavaScript код, който да се изпълни при
постъпване на събитието. Но какво е едно събитие? Събитията са действията,
които потребителят извършва, докато разглежда страницата. Това са
например щраквания върху бутони и връзки, посочването на изображения и
др. Всеки един от тези манипулатори започва с представката "on" и завършва
с името на събитието. Следва таблица с възможните събития :
| Събитие |
Действие |
| Събития на курсора |
| onMouseOver |
Курсорът е преместен върху обекта |
| onMouseOut |
Курсорът е преместен извън обекта |
| Събития за обекти(картинки,бутони и др) |
| onClick |
Щракване с мишката върху обекта |
| onBlur |
Потребителя напуска обекта |
| onChange |
Потребителя сменя обекта |
| onFocus |
Потребителя активира обекта |
| onSelect |
Потребителя селектира обекта( например текст). |
| Събития на страницата и формулярите |
| onLoad |
Завършено е зареждането на документа |
| onUnload |
Потребителя напуска страницата или затваря прозореца на браузъра |
| onAbort |
Потребителя прекъсва зареждането на страницата |
| onSubmit |
Потребителя изпраща формуляр |
| onError |
Възикнала е грешка в скрипта |
Ето и пример в който се използват събития:
<HTML>
<HEAD>
<TITLE>PC-Tools Guides - 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>PC-Tools Guides - 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>
