Personal tools
You are here: Начало Учебници Web Design Обекти в JavaScript

Обекти в JavaScript

Обект – начин за моделиране на нещо реално, въпреки че самия обект е абстрактна величина.

Създаване на обекти – именуването на обектите става по същите правила като на променливите; можем да създадем обекти или чрез използването на функция конструктор или посредством обектен инициализатор.

 

1. Функции конструктори

function car(seats,engine,theradio) //дефинира се функцията конструктор

{this.seats=seats;

this.engine=engine;

this.theradio=theradio;

//стойностите на параметрите се присвояват на свойствата на обекта

}

var work_car=new car("cloth","V-6","Tape Deck");

/*създава се инстанция на обекта, като се подават параметри, които ще бъдат използвани като стойности на свойствата;*/

var engine_type=work_car.engine;

/*свойството на новата инстанция на обекта се присвоява на независима променлива*/

 

Пример:

Да се изведат свойствата, които бихме желали да притежава една специална кола, като използваме характеристики от различните типове коли.

<HTML>

<HEAD>

<TITLE>...</TITLE>

/*частта от скрипта с конструкторната функция, създаването на инстанциите и присвояванията на променливи се поставя в HEAD секцията, за да се изпълни първа*/

<SCRIPT language="JavaScript">

<!--

function car(seats,engine,theradio)

{this.seats=seats;

this.engine=engine;

this.theradio=theradio;

}

var work_car=new car("cloth","V-6","Tape Deck");

var fun_car=new car("leather","V-8","CD Player");

var engine_type=work_car.engine;

var seat_type=fun_car.seats;

var radio_type=fun_car.theradio;

//-->

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT language="JavaScript">

<!--

document.write("I want a car with "+seat_type+" seats.<BR>");

document.write("It also needs a "+engine_type+" engine.<BR>");

document.write("Oh,and I would like a "+radio_type+" also.");

/* document.write конструкциите се използват в <BODY> секцията и затова ще изведат съдържанието си в страницата*/

//-->

</SCRIPT>

</BODY>

</HTML>

 

Може да се създаде нова инстанция чрез използване на стойностите на свойства от други инстанции на обекта:

 

car(fun_car.seats,work_car.engine,fun_car.theradio);

 

Можем да променяме стойността на дадено свойство на един обект, присвоявайки му нова стойност.

 

Пример:

Да се проследи как промяната на стойностите влияе на скрипта.

 

<HTML>

<HEAD>

<TITLE>...</TITLE>

<SCRIPT language="JavaScript">

<!--

function car(seats,engine,theradio)

{this.seats=seats;

this.engine=engine;

this.theradio=theradio;

}

var work_car=new car("cloth","V-6","Tape Deck");

var fun_car=new car("leather","V-8","CD Player");

/*първоначалната стойност на свойството се присвоява на независима променлива*/

var first_engine=work_car.engine;

/*свойството се променя, при което се сменя и неговата стойност при последващо използване*/

work_car.engine="V-4";

var custom_car=new car(fun_car.seats,work_car.engine,fun_car.theradio);

//-->

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT language="JavaScript">

<!--

document.write("At first I wanted a "+first_engine+" engine.<BR>");

document.write("But after thinking about it for a bit:<BR>");

document.write("I want a car with "+custom_car.seats+" seats.<BR>");

document.write("It also needs a "+custom_car.engine+" engine.<BR>");

document.write("Oh, and I would like a "+custom_car.theradio +" also.");

//-->

</SCRIPT>

</BODY>

</HTML>

 

2. Обектни инициализатори (представлява малко по-кратка конструкторна функция)

 

име_на_обект={свойство:стойност}

 

Заместваме име_на_обект с името, което искаме да зададем на нашия обект, свойство – с името, което желаем да използваме за свойството на обекта, а стойност – със стойността на съответното свойство.

Обект, който е създаден чрез инициализатор, представлява готова инстанция на обекта.

Създаване на обекта work_car чрез инициализатор:

work_car={seats:"cloth",engine:"V-6",theradio:"Tape Deck"}

 

Пример:

Да изпишем всичко, каквото желаем да има в една кола, като използваме тези свойства: 

<HTML>

<HEAD>

<TITLE>...</TITLE>

<SCRIPT language="JavaScript">

<!--

//обектите се създават с помощта на инициализатори

work_car=(seats:"cloth",engine:"V-6",theradio:"Tape Deck");

fun_car=(seats:"leather",engine:"V-8",theradio:"CD Player");

//-->

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT language="JavaScript">

<!--

document.write("I want a car with "+fun_car.seats+" seats.<BR>");

document.write("It also needs a "+work_car.engine+" engine.<BR>");

document.write("Oh, and I would like a "+fun_car.theradio+" also.");

//свойствата на обектите се използват в document.write() конструкциите

//-->

</SCRIPT>

</BODY>

</HTML>

 

Добавяне на методи – методът представлява обръщение към функция, която се явява част от един обект; извиканата функция може да извършва най-разнообразни операции със свойствата на обекта.

 

Пример:

Да се напише скрипт, извеждащ листинг за всеки вид кола, нейните характеристики и размера на плащанията за колата.

<HTML>

<HEAD>

<TITLE>...</TITLE>

<SCRIPT language="JavaScript">

<!--

function get_payment() //функцията, която се използва като метод

{var the_payment=250;

if (this.seats=="leather") the_payment+=100; else the_payment+=50;

if (this.engine=="V-8") the_payment+=150; else the_payment+=75;

if (this.theradio=="CD Player") the_payment+=35; else the_payment+=10;

return the_payment;

}

/*конструкторната функция, която преобразува функцията get_payment() в метод*/

function car(seats,engine,theradio)

{this.seats=seats;

this.engine=engine;

this.theradio=theradio;

this.payment=get_payment;

}

var work_car=new car("cloth","V-6","Tape Deck");

var fun_car=new car("leather","V-8","CD Player");

var custom_car=new car(fun_car.seats,work_car.engine,fun_car.theradio);

/*създаваме инстанции на обекта, за които ще използваме новия метод:*/

/*върнатата стойност от метода payment() за трите инстанции на обекта се присвоява на три независими променливи*/

var work_car_payment=work_car_payment();

var fun_car_payment=fun_car_payment();

var custom_car_payment=custom_car_payment();

//-->

</SCRIPT>

</HEAD>

lt;BODY>

/*използват се document.write конструкции, за да се създаде списък с колите, техните характеристики и вноските*/

<SCRIPT language="JavaScript">

<!--

document.write("<H2>The information on the cars you requested:</H2>");

document.write("<B>WorkCar:</B>");

document.write(work_car.seats+","+work_car.engine+", "+work_car.theradio);

document.write("<BR>");

document.write("<B>Payments:</B>S" +work_car_payment);

document.write("<P>");

document.write("<B>FunCar:</B>");

document.write(fun_car.seats+","+fun_car.engine+", "+fun_car.theradio);

document.write("<BR>");

document.write("<B>Payments:</B>S" +fun_car_payment);

document.write("<P>");

document.write("<B>CustomCar:</B>");

document.write(custom_car.seats+","+custom_car.engine+", "+custom_car.theradio);

document.write("<BR>");

document.write("<B>Payments:</B>S" +custom_car_payment);

//-->

</SCRIPT>

</BODY>

</HTML>

 

Различните свойства на обекта се използват в document.write конструкции, за да се създаде списък с колите, техните характеристики и вноските.

 

Обект WINDOW

 

Обектът WINDOW се създава за всеки прозорец, който се показва на екрана.

 

Свойство                   Описание

closed            Съдържа стойността, която указва дали прозореца е затворен или не

defaultStatus     Дефинира  подразбиращото се съобщение, което се показва в лентата за състояние

frames            Масив, който представя всички фреймове на даден прозорец

length            Съдържа стойност, която е равна на броя фреймове в даден прозорец

location          Текущия URL адрес на прозореца

name              Позволява да се даде име на прозореца

opener            Отнася се за прозореца, който е отворил друг прозорец

parent            Отнася се за набора фреймове, към което принадлежи текущия фрейм

self              Друг начин за обръщение към текущия прозорец

status            Позволява да се постави съобщение в лентата за състояние; предефинира defaultStatus

top               Референция към най-горния прозорец, съдържащ фрейм, набор фреймове или вмъкнат набор от фреймове

 

Метод             Описание

alert()           Извежда прозорец с предупреждение. Потребителят трябва да щракне върху бутона OK, за да продължи нататък

confirm()         Показва прозорец за потвърждение. Потребителя трябва да щракне върху бутона OK или Cancel, за да продължи нататък

find()            Позволява на потребителя да включи помощното средство Find, за да търси даден текст в страницата

print()           Отпечатва съдържанието на даден прозорец

prompt()          Извежда промпт, с който иска от потребителя да въведе информация

open()            Отваря нов прозорец на браузъра

close()           Затваря прозорец на браузъра

blur()            Премахва фокуса от даден прозорец

focus()           Дава фокуса на даден прозорец

moveBy()          Премества прозореца с даден брой пиксели, които са подадени като параметри

moveTo()          Премества горния ляв ъгъл на прозореца до координатите, които са подадени като параметри

resizeBy()        Преозмерява прозореца, като премества долния ляв ъгъл с даден брой пиксели, които са подадени като параметри

resizeTo()        Преозмерява целия прозорец според ширината и височината, които са подадени като параметри

scrollBy()        Скролира видимата област на прозореца с определен брой пиксели, които са подадени като параметри

scrollTo()        Скролира видимата област на прозореца към определени координати, които са подадени като параметри

setInterval()     Извиква дадена функция на определен период от време

clearInterval()   Прекратява действието на setInterval()

setTimeout()      Извиква еднократно дадена функция след изтичането на определен период от време 

clearTimeout()    Прекратява действието на clearTimeout()

 

 Пример:

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

<!—

function go_there()

{var thename=document.myform.yourname.value;

if (thename=="John")

window.location=" http://www.pageresource.com";

else

window.location="http://www.yahoo.com";}

/*проверява стойността на променливата и според нея изпраща потребителя към една или друга страница*/

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM name="myform">

Your name:

<BR>

<INPUT type="text" name="yourname" SIZE="25">

<P>

<INPUT type="button" value="Click for your page!" onClick="gothere();">

/*функцията се извиква, когато потребителя щракне върху бутона*/

</FORM>

</BODY>

</HTML>

 

Пример:

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

<!—

function go_there()

{var is_sure=window.confirm(Are you sure you want to leave?);

if (is_sure==true)

{window.location="http://www.yahoo.com";}

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<INPUT type="button" value="Click to Search the Web" onClick="go_there();">

/*функцията стартира прозореца за потвърждение*/

</FORM>

</BODY>

</HTML>

 

Пример:

<FORM>

<INPUT type="button" value="Click to Find Text" onClick="window.find();">

/*търси определен текст в страницата*/

</FORM>

 

Пример:

<FORM>

<INPUT type="button" value="Click fo Print Page" onClick="window.print();">

/*отпечатва текущия прозорец*/

</FORM>

 

Обект DOCUMENT

 

Обектът DOCUMENT е обект, който се създава от браузъра за всяка нова разглеждана HTML страница (документ). Посредством този обект, JavaScript ни дава достъп до няколко свойства и методи, които могат да влияят на документа по различни начини.

Свойствата на обекта DOCUMENT връщат няколко различни типа стойности.

 

Свойство                   Описание

alinkColor        Връща шестнайсетичната стойност на цвета за активната връзка от документа

anchors           Масив от всички именувани котви в документа

applets           Масив от всички Java аплети в документа

bgColor           Връща шестнайсетичната стойност на цвета на фона на документа

cookie            Използва се за задаване на бисквитки в документа

domain            Връща името на домейна на сървъра за документа

embeds            Масив от всички EMBED тагове в документа

fgColor           Връща шестнайсетичната стойност на цвета на текста по подразбиране на документа

formName          Само по себе си не е свойство, но създава ново свойство за всяка именувана форма, поставена в документа

forms             Масив от всички FORM тагове в документа

images            Масив от всички IMG тагове в документа

lastModified      Връща датата на последната модификация на документа

layers            Масив от всички LAYER тагове в страницата(само за Netscape Nvigator)

all               Свойство, което има за цел да даде достъп до всички обекти от страницата (само за Internet Explorer)

linkColor         Връща шестнайсетичната стойност на подразбиращия се цвят на връзка от документа

links             Масив от всички тагове за връзки в документа

plugins           Масиви от всички Plug-in модули, използвани в документа

referrer          Връща Web адреса (URL адреса) на документа, който е отправил потребителя към текущия документ

title             Връща текста, използван в TITLE таговете на текущия документ

URL               Връща URL адреса на текущия документ

vlinkColor        Връща шестнайсетичната стойност на цвета за посетена връзка в документа

 

Метод                        Описание

open()            Отваря нов документ, което ви позволява да напишете неговото съдържание чрез write() или writeln() методи

close()           Затваря нов документ, който е бил отворен чрез метода open()

write()           Дава ви възможност да изпишете текстов низ в HTML документ

writeln()         Позволява да изведете текстов низ в HTML документ, но завършва реда с JavaScript знак за нов ред

 

Обект MATH

 

Обектът MATH ни предоставя методи и свойства, които можем да използваме в математически изчисления.

 

Свойство                   Описание

E                 Стойността на константата на Ойлер (е), която е равна на около 2,71828...

LN10              Стойността на натуралния логаритъм от 10, което е около 2.302585...

LN2               Стойността на натуралния логаритъм от 2, което е около 0,693147...

LOG10E            Стойността на логаритъм от Е при основа 10, което е около 0,43429...

LOG2E             Стойността на логаритъм от Е при основа 2, което е около 1,442695...

PI                Стойността на числото PI, която е около 3,14159...

SQRT2             Стойността на корен квадратен от 2, което е около 1,4142...

SQRT1_2           Стойността на корен квадратен от 1/2, което е около 0,7071...

 

Метод                  Описание

abs()          Връща абсолютната стойност на числото, което е подадено като параметър

acos()         Връща аркус косинус от подаденото като параметър число, в радиани

asin()         Връща аркус синус от подаденото като параметър число, в радиани

atan()         Връща тангенс косинус от подаденото като параметър число, в радиани

ceil()         Връща най-малкото цяло число, което е по-голямо или равно на подаденото като парамерър число

cos()          Връща косинус от подаденото като параметър число, в радиани

exp()          Връща стойността на числото Е на степен подаденото като параметър число

floor()        Връща най-голямото цяло число, което е по-малко или равно на подаденото като параметър число

log()          Връща натуралния логаритъм на подаденото като параметър число

max()          Връща по-голямото от двете числа, които са подадени като параметри

min()          Връща по-малкото от двете числа, които са подадени като параметри

pow()          Връща стойността на първия параметър на степен стойността, подадена като втори параметър

random()       Връща случайно число между 0 и 1; не изисква параметър

round()        Връща закръглената стойност на подаденото като параметър число

sin()          Връща синус от подаденото като параметър число, в радиани

sqrt()         Връща корен квадратен от подаденото като параметър число

tan()          Връща тангенс от подаденото като параметър число, в радиани

 

Обект DATE

 

Обектът DATE ни предоставя методи и свойства, които можем да използваме за работа с дати и време.

 

Свойство                        Описание

constructor          Съдържа стойността на конструкторната функция, която е създала обекта

prototype            Дава възможност, ако желаем, да добавим свойства към обекта

 

Метод                              Описание

getDate()            Връща деня от месеца според локалното време на потребителя

getDay()             Връща деня от седмицата (0-6) според локалното време на потребителя

getHours()           Връща броя часове (0-23) в деня според локалното време на потребителя

getMinutes()         Връща броя минути (0-59) в часа според локалното време на потребителя

getMonth()           Връща номера на месеца (0-11) в годината според локалното време на потребителя

getSeconds()         Връща броя секунди (0-59) в минутата според локалното време на потребителя

getTime()            Връща числова стойност на времето според локалното време на потребителя

getTimezoneOffset()  Връща отклонението на времевата зона в минути според локалното време на потребителя

getYear()            Връща годината (две цифри) според локалното време на потребителя

getFullYear()        Връща годината (четири цифри) според локалното време на потребителя

parse()              Връща броя милисекунди, които са изтекли от полунощ 1 януари 1970 до датата, която е подадена като параметър, според локалното време на потребителя

setDate()            Задава деня от месеца за дадена инстанция на обекта Date

setHours()           Задава броя часове за дадена инстанция на обекта Date

setMinutes()         Задава броя минути за дадена инстанция на обекта Date

setMonth()           Задава месеца за дадена инстанция на обекта Date

setSeconds()         Задава секундите за дадена инстанция на обекта Date

setTime()            Задава времето (в милисекунди от полунощ 1 януари 1970) за дадена инстанция на обекта Date

setYear()            Задава годината (две цифри) за дадена инстанция на обекта Date

setFullYear()        Задава годината (четири цифри) за дадена инстанция на обекта Date

toGMTString()        Връща низ, представящ датата в Greenwich Mean Time (GMT) формат

toLocaleString()     Връща низ, представящ датата според локалния формат

Document Actions