JavaScript или изкусвтото да се създават динамични страници

Друго основно понятие е събитието. Понякога е полезно да имате скрипт, който се изпълнява еднократно при отварянето на страницата. Но много по-често ще ви е необходимо изпълняването на скрипт при определено действие на потребителя. Тези действия на потребителя се наричат събития.

Основните събития са:

• onmouseover възниква, когато курсора на мишката е над обекта

 

• onmouseout възниква, когато курсора вече не е над обекта

 

• onclick възниква, когато потребителя щракне върху обекта

 

• ondblclick възниква при двукратно щракване върху обекта

 

• onrightclick възниква, когато потребителя щракне с десен бутон върху обекта

 

• onkeypress възниква, когато потребителя натисне клавиш от клавиатурата

Може би е необходимо да изясним понятието над и върху обекта. Както вече знаете, обектът е таг. Когато обектът е <IMG> очевидно е, че над обекта означава над изображението. Но какво става с другите тагове? Над обекта означава над тази област от документа, над която е приложен съответния таг. Ако обектът е <B> това е удебеления текст, а ако е <P> - съответния параграф, <TD> - съответното поле в таблицата; <TABLE> - цялата таблица и т.н.

Oбработка на събития

Обработка на събитие се нарича написването на код, който се изпълнява при възникването на това събитие. За да обясним как става това, ще разгледаме следния пример: картинка, която се променя, когато курсора е над нея и се връща в основното си състояние, когату курсора не е над нея. Разполагаме с един обект и две събития. Когато един скрипт трябва да се изпълни в отговор на някое събитие, то напомощтани идват атрибутите FOR и EVENT на тага <SCRIPT>. FOR определя кой е обектът, приемащ събитието, а EVENT - кое е събитието.

Съответно кода за нашия пример е:

Код:

---

---

Можете да разполагате скриптовете както в хедъра, така и в тялото на документа. От този пример се вижда, че е необходим по един скрипт за всяко събитие. Какво ще стане, ако имаме меню с десет бутона и искаме картинката на всеки един от тях да се променя, когато мишката е над него. Трябват ни 20 скрипта?! Всъщност атрибутите FOR и EVENT на тага <SCRIPT> на практика не се използват. Тага <SCRIPT> се използва за създаване на много по-сложни скриптове, за които ще научите по-нататък. За такива задачи, като обработка на събития и промяна на изображението в отговр на събитие се използват вградените манипулатори на събития. Вместо да пишете скрипт, вписвате събитието в съответния таг, от който се приема то, поставяте знак за равенство и вписвате съответния код. Ако обработката включва повече от една команда, разделяте ги с точка и запетая (;). Все пак е препоръчително да не се използват повече от две команди - в такива случаи се извикват функции, за които ще научите по-нататък. Сега нека разгледаме същия пример:

Код:

---

---

- Ключовата дума this

В предишния пример видяхте как се използват вградените манипулатори на събития. Но може би сте забелязали употребата на думата this вместо името на обекта, чието свойство променяме. Това често се използва при вградените манипулатори на събития. this обозначава текущия обект (или текущия таг) и премахва необходимостта не само от използването на името на обекта пред неговото свойство, но и въобще от дефинирането на име на обекта. Работа с данни

В JavaScript няма определени типове данни. Те се разделят просто на числови и текстови, като можете свободно да променяъте типа на променливата, присвовайки на на една и съща променлива ту числа, ту текст. Декларацията на променливи не е необходима, но ако тя подхожда на стила ви (а попринцип е добре да се декларират променливите) това става с добавянето на думата var пред името й. Променливата може да бъде инициализиране едновременно с нейната декларация. Може да се инициализира и без да се декларира - тя се създава при първото й срещане в кода. Ако искате да и присвоите текстова стойност, стойността трябва да е в кавички. Изобщо всички текстове в JavaScript се затварят в кавички. Съществуват следните оператори за работа с променливи:

+ събиране
- изваждане
* умножение
/ деление
% остатък от деление
= присвояване
+= прибавяне към текущата стойност на променливата
-= изваждане от текущата стойност
*= умножение на текущата стойност
/= деление на текущата стойност
== равно на - използва се за сравнения
!= неравно на
>= по-голямо или равно на
<= по-малко или равно на
> по-голямо
< по-малко
++ увеличава стойността на променливата с единица
-- намалява стойността на променливата с единица

Работата с масиви в JavaScript е малко по сложна. Масива трябва първо да се създаде чрез изикване на функцията Array() и ключовата дума new. Т.е. за да създадем променлива-масив с име myArray, трябва да използваме кода:

Код:

---

myArray = new Array()

---

След това достъпът до елементите в масива става чрез исписване на името на масива и индекс (пореден номер на елемента) в квадратни скоби до него. Номерацията на елементите започва от 0. Т.е. за да впишем 5 стойности в масива myArray, ще използваме:

Код:

---

myArray[0]=13;
myArray[1]=7;
myArray[2]=100;
myArray[3]=85;
myArray[4]=0;

---

Можем да инициализираме масива с 5 елемента, като ги подадем като аргументи на функцията Array():

Код:

---

myArray = new Array(13, 7, 100, 85, 0)

---

И тъй като променливите нямат типове, нищо не пречи един масив да съдържа данни от различни типове 🙂

JavaScript притежава редица функции за улесняване на работата с масива. Тези функции се прилагат над самия масив, като извикването им става чрез исписването им след името на масива, разделени чрез точка

• • join() обединява всички стойности в масива в един низ. Като параметър се подава знак, чрез който да разделя стойностите; ако не бъде подаден параметър се използват запетаи. Създадения низ се връща като стойност от функцията - тя не променя масива, а връща стойност, която трябва да бъде присвоена на променлива

• • reverse() обръща реда на елементите в масива

• • sort() сортира елементите в масива в азбучен ред

многомерни масиви

Всеки елемет от масив може да бъде сам по себе си масив. За илюстрация ще дадем един пример:

Код:

---

myArray = new Array()
myArray[0] = ner Array(13, 7, l00, 85, 0)
var El0 = myArray[0][0]
var El1 = myArray[0][1]
var El2 = myArray[0][2]

---

Този код показва как се работи с многомерни масиви Условен оператор

Всеки език има някакъв условен оператор. В JavaScript съществува операторът IF, който има следния синтаксис:

Код:

---

if(expression) 
{blok1} 
else 
{blok2}

---

Ако условието expression е изпълнено, изпълнява се първия блок от кода, в противен случай се изпълнява втория. Важно е да се запомни, че условието е в обикновени отваряща ( и затваряща ) скоби, докато блоковете - в отваряща { и затваряща } фигурни скоби. Частта else не е задължителна. Освен това в условието могат да се използват логическите оператори && (и), || (или) и ! (не). Ако имате оператор

Код:

---

if(val1>10 && val2>10) 
{blok1}

---

кода в blok1 ще се изпълни само ако и двете променливи - val1 и val2 са по-големи от 10. Ако в този код замените && с ||, кода ще се изпълни ако която и да е от двете променливи е по-голяма от десет.
! променя стойността непосредствено след него, като обръща вярното в невярно и невярното във вярно

Избор между повече от един вариант

Операторът if е полезен, ако вашия скрипт трябва да изпълни един код, ако дадено условие е изпълнено и друг, ако не е. Но какво ще стане ако скриптът трябва да изпълни различен код за 1 от 10 или дори 1 от 100 възможни варианта. Използването на последователни оператори if е възможно, но тромаво и неудобно. JavaScript предоставя един много по-гъвкав оператор - switch. Синтаксисът му е:

Код:

---

swith(variable){
case val1:
//javascript code
break;
case val2:
//javascript code
break;
case val3:
//javascript code
break;
...
default:
//javascript code
break;
}

---

Операторът приема една променлива (всъщност може да приеме всеки израз, например x+y) variable и сравнява стойността и последователно със стойностите val1, val2, val3 и т.н. Ако открие съвпадение, започва изпълнението на съответния блок код. Ако нито една стойност не съвпада със стойността на променливата, то се изпълнява блокът default. Но за какво служат операторите break? Както ще научите по-нататък, този оператор прекъсва цикъла, в който се намира. В случая, той прекъсва изпълнението на съответния блок код. Ако не бъде използван оператор break в някой блок, при неговото изпълнение автоматично ще се изпълни и следващия блок. Това е полезно, ако искате един блок код да се изпълнява за интервали от стойности. Например разгледайте следния код:

Код:

---

switch(level){
case 1:
case 2:
case 3: difficult=easy
break;
case 4:
case 5: difficult=medium
break:
case 6:
case 7:
case 8:
case 9: difficult=hard
break;
default: break;
}

---

Ако стойността на променливата level е между 1 и 3, то на променливата difficult и се присвоява стойност easy; ако е 4 или 5 difficult става medium, ако е между 6 и 9 то стойността съответно е "hard". Накрая, ако стойността на level не е между 1 и 9, нищо не се случва. Тъй като след 1 няма break, ако стойността е 1 то кода преминава през блоковете 1,2 и 3, където стига до оператор break. По същия начин протича процеса и за други стойности, чиито блокове код не съдържат оператора break;

Циклични оператори

Когато трябва да изпълните многократно един и същи код, дори и с малки промени, напомощтави идват циклите. JavaScrit ви предоставя два циклични оператора, разгледани по-нататък:

[list]

• • Цикъл While

Синтаксис:

Код:

---

while(expression) 
{ 
//block 
}

---

Този цикъл се повтаря докато условието expression е изпълнено. Първо се извършва проверката - ако е изпълнено условието expression, изпълнява се код в следващия блок. Нещо в този код трябва да променя при определени условия expression за да се даде шанс на цикъла да завърши. При цикъл while може и никога да не изпълните блока, ако в началото условието не е изпълнено.

• • Цикъл for

Този цикъл ви дава по-усъвършенстван контрол над цикъла. Той ви предоставя инициализация на контролиращата променлива, условие и контрол над условието в едно:

Код:

---

for(start; expression; end;) 
{ 
//block 
}

---

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

Следващия момент е проверката на условието expression. Ако това условие е изпълнено, изпълнява се следващия блок код. В противен случай, цикъла се прекратява. След изпълнението на този блок се изпълнява оператора в end - обикновено той служи за промяна на контролиращата променлива. След като се изпълни end, отново се проверява условието и т.н. докато цикъла не бъде прекратен поради невярно условие или поради прекъсване на цикъла, разгледано по-нататък. Ето един типичен вид на оператора for:

Код:

---

for(i=0; i<10; i++) 
{ 
//block 
}

---

• • Прекъсване на цикъл или прескачане на част от него

Заедно с циклите, JavaScript ви предоставя два оператора за по-добър контол над тях. Първия от тях е break. Този оператор незабавно прекратява цикъла, независимо от това дали е изпълнено условието. За разлика от него continue връща в началото на цикъла, като кодът след него просто се прескача. Когато ползвате оператора continue вие просто прескачате в края на цикъла, ако сте в цикъл for се изпълнява частта end. Условието се проверява отново и ако е изпълнено, цикълът продължава.

Внимание! Никога не използвайте тези два оператора самостоятелно - използването на break ще обезмисли цикъла, защото той ще се изпълни само веднъж, докато операторът continue обесмисля следващия код, защото той никога няма да бъде изпълнен. Използвайте тези оператори в блока на условни оператори. Също така имайте предвид, че ако имате няколко вградени един в друг цикъла, тези оператори въздействат само на цикъла, в който са - те не водят до прекратяване на цикъла, в който се намира текущия.

Оператори, свързани с обектите
Както вече знаете, всеки таг в JavaScript се третира като обект. Можете да създавате и собствени обекти, а също така съществуват множество вградени обекти, такива като window и document. JavaScript предоставя няколко оператора специално за улесняване на работата с обекти. Първия от тях е with. Когато трябва да напишете множество код, работещ с един и същи обект, вместо да пишете на всеки ред името на обекта, можете да използвате оператора with. Например кода

Код:

---

object1.property1=value1
object1.property2=value2
object1.property3=value3
object1.property4=value4
object1.property5=value5
object1.property6=value6

---

Може да бъде пренаписан така:

Код:

---

with (object1){
property1=value1
property2=value2
property3=value3
property4=value4
property5=value5
property6=value6
}

---

Това не пречи вътре в блока with да се извършват обръщения към други обекти: просто ако пропуснете да напишете име на обект, то JavaScript приема че това е обектът, определен в оператора with

Както виждате, тук отново имаме множество оператори за присвояване. JavaScript предоставя още един оператор, позволяващ ви да преминете през всички свойства на обекта чрез един единствен цикъл. Това се използва не толкова за промяна на свойства, колкото за тяхното прочитане. Все пак ако имате един масив, съдържащ необходимите стойности, то вие бихте могли и да промените всички свойства на обекта в един цикъл. Операторът има следния вид:

Код:

---

for (variable in object){
//JavaScript code
}

---

Този цикъл преминава през всички свойства на обекта object, като достъпът до текущото свойство става чрез object[variable]Функции

Функцията е блок от код, който има име и чрез него може да се извиква от всяко едно място в програмата. Функцията може да бъде извикане и от вграден манипулатор на събитие, което я прави изключително полезна, освен това може да приема аргументи и/или да връща стойност, което я прави невероятно гъвкава. Функцията се декларира в рамките на таг <SCRIPT> и може да бъде извикана от всеки един скрипт на страницата или от манипулатор на събитие. Декларирането на функцията става по следния начин:

Код:

---

function Name() { 
 
 
... 
}

---

За да върне стойност функцията се използва командата return вътре в блока на функцията. Когато функцията съдържа една или повече команди return тя може да бъде присвоена на променлива. Непосредствено след тази команда, разделена чрез интервал се вписва стойността, която трябва да бъде върната. Тази стойност може да бъде и променлива. За да се направи функция, която приема аргументи, просто се вписват имената на променливите, които тя използва, в рамките на кръглите скоби след името и. Тези променливи отговарят само на броя аргументи - те се ползват само от функцията и им се присвояват стойностите, по ред на подаване при извикване на функцията. Например функцията Add(num1, num2) може да бъде извикана с Add(5, val) и по този начин num1 ще съдържа 5, а num2 - стойността на променливата val. num1 и num2 са достъпни само в рамките на функция. Следващата функция приема като аргумент две числа и връща техния сбор:

Код:

---

function Add(num1, num2) { 
return num1+num2 
}

---

Дефиниране на собствени обекти

Всеки таг е обект. В JavaScript има вградени обекти. Но JavaScript не се ограничава само с това - вие можете да дефинирате собствени обекти и да създавате техни екземпляри. И тука е времето да задълбаем малко повече в обектите. Ако имате два тага *IMG*, то те имат един и същи набор от свойства (атрибути), но различни имена. Напрактика, те са екземпляри на един и същи обект. Т.е. ако имате нужда от няколко различни обекта с един и същи набор от свойства, то вие можете да дефинирате един обект и да създадете няколко негови екземпляра. Екземплярите на един обект винаги се различават по тяхното име и обръщението към обект напрактика е обръщение към конкретен негов екземпляр. Дефинирането на обект става както и дефинирането на функция, но като параметри на функцията се подават стойностите на различните свойства на обекта. Ето един пример за дефиниране на обект:

Код:

---

function makeobject(material, color, size) { 
this.material = material; 
this.color = color; 
this.size = size; 
}

---

Но след написването на тази функция, ние все още нямаме екземпляр от обекта. Това е дефиницията на обект, но само по себе си не е обект. За да създадем екземпляр на обекта трябва да използваме ключовата дума new и функцията makeobject:
myObj = new makeobject("wood", "red", 5)
След тази декларация ние имаме обекта myObj, притежаващ три свойства, съответно със стойности "wood", "red" и 5.

Методите

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

Код:

---

function makeobject(material, color, size) {
this.material = material;
this.color = color;
this.size = size;
this.price = mprice;
}

---

Сега ако отново създадем обекта myObj, можем да използваме неговия метод:

Код:

---

myObj.price()

---

Диалогови прозорци

С помощта на JavaScript вие можете лесно да създадете три типа диалогови прозорци - такъв за съобщение, съдържащ само OK, такъв за въпрос, с бутони OK и Cacel, и прозорец, в който потребителя да въведе информация.

Първия тип се извиква със функцията alert("message"). Когато тази функция е извикана, появява се прозорец съдържащ съобщението message и бутон OK. За да видите пример за този тип прозорци, натиснете бутона по-долу:

• • method номер, отговарящ на атрибута METHOD на тага
    
    : 0 = GET; 1 = POST

• • action отговаря на стойността на атрибута ACTION на тага
    

• • elements[index] свойството elements е обект, съдържащ като свойства всеки от елементите във формата. Ако например, формата ви има три елемента (текстово поле, бутон submit и поле за отметка), form.elements ще има три свойства, всяко от които само по себе си е обект

• • length съдържа броя на елементите във формата

• Navigator

Този обект се използва за определяне на това, какъв браузър използва потребителя
appCodeName съдържа "кодово име" на браузъра. Например, кодовото име на Navigator е "mozilla"

• • appName съдържа истинското име на браузъра

• • appVersion съдържа номера на версията на браузъра

• • userAgent съдържа пълната информация за браузъра, включително кодовото име, версията и платформата (например Win95)

• • plugins[ ] е масив, съдържащ инсталираните plug-in -и

• • mimeType[ ] съдържа масив, въдържащ кои MIME типове са конфигурирани за браузъра

• String

Този обект съдържа множество методи за манипулация на съдържанието на текстови низове, и само едно свойство - length съдържащ броя на символите в него. Характерното за обекта String e, че всички низови променливи практически са обекти String и можете да използвате методите му върху всеки един низ, без да е необходимо да създавате обект String
Методите са:

• • charAt() - връща символа, който се намира на позицията, подадена му като аргумент. Номерацията започва от 0

• • concat() - обединява низа с друг низ, подаден му като аргумент

• • indexof() приема един два аргумена, първия от които е подниз, а втория е стартова позиция в низа. Връща позицията на първоро срещане на подниза в низа след стартовате позиция. Ако такъв подниз не е намерен, връща -1

• • lastIndexOf() прави същото, което и indexOf(), с тази разлика че търсенето се осъществява от дясно наляво

• • slice() приема два аргумента и връща низ, започващ от позицията, определена в първия аргумент, и завършващ на поциция, определена от втория аргумент. Ако втория аргумент не е посочен, то той се приема за края на низа, над който е приложен метода. Ако втория аргумент е отрицателно число, то той определя позиция, отчитана отдясно нялови в низа, като в този случай последния символ има индекс -1.

• • split() връща масив, съставен от елементите на низа, разделени по символ, определен от аргумента, с който е извикан метода.

• • substr приема два аргумента и връща част от низа, започваща от символа на позиция първия аргумент и с дължина втория

• • substring приема два аргумента и връща част от низа, започваща от символа на позиция първия аргумент и завършващ със символа на позицията втория аргумент. За първи аргумент се приема по-малкото число. Изключение правят отрицателните числа. Ако първия аргумент е отрицателен, той се приема за 0. Ако втория аргумент е отрицателен, той се приема за равен на първия

• • toLowerCase() връща същия низ, изписан само с малки букви

• • toUpperCase() връща същия низ, изписан само с главни букви

• Обекта Math

Този обект предоставя множество методи за улесняване на математическите операции. За разлика от обекта String, тези методи не се прилагат директно на числа, а явно се използва обекта Math. Например:
val1 = Math.abs(n)
По-нататък са разгледани методите на обекта Math:

• • abs() приема един аргумент и връща абсолютната му стойност (стойността без знака)

• • acos() приема един аргумент и връща арккосинус от него

• • asin() приема един аргумент и връща арксинус от него

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

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

• • cos() приема един аргумент и връща косинус от него

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

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

• • max() приема два аргумента и връща по-големия от тях

• • min() приема два авгумента и връща по-малкия от тях

• • pow() приема два аргумента и връща първия, повдигнат на степен втория

• • random() връща произволно число между 0 и 1

• round() връща подадени