- Какво е скрипт?

Скриптът е програмен код, който не се компилира, а се изпълнява от програма, наречена интерпретатор. Когато става въпрос за уеб-сайт, ролята на интерпретатор се поема от браузъра (програмата, с която се разглеждат уеб-страниците). Скриптовете в уеб-страниците се пишат на един от двата езика - JavaScript или VBScript, и са част от HTML документа (Реализацията на JavaScript в Microsoft Internet Explorer се нарича JScript. Макар и да има известни разлики в поддръжката на JavaScript в Netscape и Internet Explorer, тъй като JScript и JavaScript практически са един и същи език, ще ги наричаме с общото име JavaScript). Т.е. те се въвеждат по същия начин, по който обикновен HTML код, а всичко останало е работа на браузъра. VBScript произлиза от Visual Basic и се поддържа само от Internet Explorer. JavaScript произлиза от C++ и се поддържа от повечето съвременни браузъри

- Какво ни дават скриптовете?

След като на екрана бъде изведена една уеб-страница, съдържанието й остава непроменено. Наистина, може да има GIF-анимация, но това не променя положението - анимацията си върви, но текста остава непроменен. Единствения начин да се покаже нещо друго на екрана е препращането на потребителя към друга страница чрез хипервръзка. Така е било преди появата на скриптовете. Те осигуряват някаква степен на програмируемост в уеб-страницата, позволяваща динамичната промяна на съдържанието й. Можете да промените стойността на всеки атрибут в отговор на определено събитие. Това ви позволява да променяте картинка, когато курсора е над нея, да сменята цвета на фона или текста и още много други неща. С овладяването на JavaScript ще разберете колко нови хоризонти ви разкрива.

Някои от най-често срещаните приложения на скриптовете са:

- Забрана на използването на десен бутон (с цел да не се ползват функциите Save Picture As/Save Background As и View Source)
- Извеждане на съобщителен прозорец с бутон OK или извеждане на въпросителен прозорец и извличане на отговора на потребителя (YES или NO)
- Създаване на бутони с различни състояния
- Създаване на разширяващи се менюта
- Създаване на променящ се с времето текст (като например създаване на виртуален часовник)
- Извличане на информация за браузъра на потребителя
- Изписване на съобщения в status-бара

- Добавяне на скрипт към HTML кода

Както беше споменато по-рано, скриптовете се въвеждат по абсолютно същия начин, по който и останалата част от HTML кода. На практика скриптът е част от HTML кода. За да се укаже на браузъра, че започвате писането на скрипт, се използва тагът <SCRIPT>. Тъй като има различни скриптови езици, всеки със свои характерни особености, необходимо е да посочите използвания език. Това се осъществява чрез атрибута LANGUAGE на тага <SCRIPT>. За JavaScript декларацията е следната:

<SCRIPT LANGUAGE="JavaScript">

За VBScript стойността на атрибута LANGUAGE съответно е VBScript. Тъй като не всички браузъри поддържат скриптове (особено когато става въпрос за VBScript), може би ще искате да използвате тага <NOSCRIPT>. Кодът между таговете <NOSCRIPT> и </NOSCRIPT> се изпълнява само, ако браузърът не поддържа съответния скриптов език и ви дава възможност да изведете съобщение, че потребителя трябва да се снабди с друг браузър или да покажете опростена вариант на текущата страница.

- Принципи на обектно-ориентираното програмиране

JavaScript е обектно-ориентиран език и разбирането на основните концепции на обектно-ориентираното програмиране е ключът към овладяването на DynamicHTML. На първо място трябва да се определи понятието обект. JavaScript разглежда всеки таг като обект, а всеки негов атрибут - като негово свойство. В терминологията на обектно-ориентираното програмиране свойство се дефинира като променлива на даден обект. Това е и основата на динамичната промяна на съдържанието на страницата - промяна на стойностите на атрибутите на определени тагове.

Тук е мястото да кажем, че всеки обект има име, чрез което се осъществява достъпът до неговите свойства. Имeто на един таг се определя чрез атрибута ID. Този атрибут може да приеме произволна стойност, като единственото условие е да няма повече от един таг с една и съща стойност за атрибута ID. Препоръчва се да не се използват интервали в стойностите на ID.

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

<IMG ID="button" SRC="enter.gif" WIDTH="120" HEIGHT="40">

и искате да промените изображението на enter2.gif, кодът ще бъде:

button.src="enter2.gif"

За разлика от HTML, JavaScript прави разлика между главни и редовни букви. Няма значение как изписвате свойствата, но имената на обектите трябва да се изписват така, както са дефинирани в атрибута ID. Освен това всички функции на JavaScript трябва да се изписват така, както са дадени тук: в повечето случаи това означава всички букви да са редовни.

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

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

- onmouseover възниква, когато курсора на мишката е над обекта
- onmouseout възниква, когато курсора вече не е над обекта
- onclick възниква, когато потребителя щракне върху обекта
- ondblclick възниква при двукратно щракване върху обекта
- onrightclick възниква, когато потребителя щракне с десен бутон върху обекта
- onkeypress възниква, когато потребителя натисне клавиш от клавиатурата

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

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

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

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

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" FOR="image" EVENT="onmouseover">
image.src="buble2.gif"
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="image" EVENT="onmouseout">
image.src="buble.gif"
</SCRIPT>
</HEAD>
<BODY>
<IMG ID="image" SRC="buble.gif">
</BODY>
</HTML>

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

<HTML>
<BODY>
<IMG SRC="buble.gif" onmouseover="this.src='buble2.gif'" onmouseout="this.src='buble.gif'">
</BODY>
</HTML>

- Ключовата дума 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 ви предоставя два циклични оператора, разгледани по-нататък:

= Цикъл 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() {
<statement>
<statement>
...
}

За да върне стойност функцията се използва командата 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. За да видите пример за този тип прозорци, натиснете бутона по-долу:

С диалога alert вие можете само да уведомите потребителя за него. Ако ви трябва отговор с Да или не, следващата функция ви предоставя тази възможност:

confirm("message")

Тази функция изкарва прозорец, съдържащ текста message (обикновено въпрос) и бутони OK и Cancel. Ако потребителят натисне OK функцията връща true; в противен случай връща false. За да видите примерен прозорец confirm, натиснете бутона по-долу:

Диалога confirm е подходящ ако потребителя трябва да отговори с да или не. Но какво ще стане, ако ви е необходима друга информация, например възраст или име?помощтадва третия диалогов прозорец в JavaScript - prompt. Функцията изглежда така:

prompt ("prompt message", defaultvalue)

Това ще изкара прозорец със съобщение "prompt message" и текстово поле, в което ще се изпише defaultvalue. Потребителят разбира се, може да смени текста в полето. Функцията връща текстът, който съдържа полето. За да видите как изглежда този прозорец, натиснете бутона по-долу:

- Вградени обекти

JavaScript има огромно количество вградени обекти, които ви дават по-пълен контрол над документа.

= Window

Window е обект от най-горното ниво на всеки HTML документ; всички останали обекти се съдържат в Window.

- frames[ ] масив съдържащ всички дъщерни фреймове в документа. Фреймовете са подредени в реда, в който са дефинирани в документа
- frames.length броя на дефинираните фреймове
- self текущия прозорец
- opener името на прозореца, който е създал текущия, ако текущия прозорец е създаден чрез метода open()
- parent родителския прозорец (ако текущия е дъщерен прозорец, дефиниран чрез <FRAMESET>
- top най-първия прозорец, който съдържа всички видими фреймове
- status съдържа съобщението, което се показва в лентата за състоянието на браузъра
- defaultStatus е съобщението по подразбиране, което се показва в лентата за състоянието на браузъра, когато свойството status не му въздейства
- name вътрешното име, ако има такова, определено за прозореца когато е отварян чрез метода open()

Чрез свойствата status и defaultStatus можете да промените съобщенията, извеждани в status-бара. Но ако се опитате да промените съобщението, извеждано в status-бара когато курсора е над хиперлинк, въпреки използването на status адреса остава видим в status бара. За да предотвратите извеждането на адреса, към който е хипервръзката, след промяната на свойството status трябва да добавите return true. По този начин браузъра смята функцията за извеждане на адреса изпълнена и оставя в status-бара вашето съобщение

Методите на обекта Windows са:

-focus() прави прозореца активен
-blur() прави прозореца неактивен
-scroll() приема два аргумента, х- и у- координатите, и превърта прозореца така, че тези координати да са в горния му ляв ъгъл.
-open() отваря нов прозорец. Този метод приема три аргумента. Първия е адреса, който да бъде зареден в новия прозорец. Втория е име на прозореца, което се използва за обръщение към него. Третия аргумент е низ, определящ появяването на прозореца - позиция, размер, налични бутони и т.н., който има формата "променлива 1=стойност1, променлива2=стойност2,променлива3=стойност3". Възможните променливи и техните стойности са:
- toolbar (yes или no) определя дали да бъде включено инсрументалното меню на браузъра (включващо бутоните Back, Forward, Home и др.)
- location (yes или no) определя дали да се показва текстовото поле за въвеждане на адрес
- directories (yes или no) определя дали да се показват бутони като What's new
- status (yes или no) определя дали прозореца да има лента за състоянието (status bar)
- menubar (yes или no) определя дали прозораца да има меню
- scrollbars (yes или no) определя дали да се покаязват ленти за превъртане, ако докуемнта е по-голям от прозореца
- resizable (yes или no) определя дали потребителя може да промени размера на прозореца
- width (в пиксели) определя ширината на прозореца
- height (в пиксели) определя височината на прозореца

Метода има още две възможни променливи, определящи къде да се координатите на горния ляв ъгъл на прозореца спрямо горния ляв ъгъл на екрана. Но за Internet Explorer и за Netscape тези променливи са различни. В Internet Explorer това са left и top, докато в Netscape са screenX и screenY.

-close() затваря прозорец, създаден чрез метода open()
-setТtimeout(function, time) - понякога е полезно една и съща функция да се изпълнява периодично. Този метод задава интервал от време time, определен в милисекунди, след който да бъде извикана функцията function

= Frame

Frame е дъщерен прозорец на прозореца на браузъра. Поради това, обектът Frame съдържа същите свойства като обекта Window. Изключение правят само свойствата status, defaultStatus и name

= Location

Този обект съдържа информация за текущия адрес на страницата (URL)

- href пълния URL, представен като тексов низ
- protocol първата част на URL (включително двуеточието), например http:
- host съдържа часта hostname:port от URL, например //www.comexgroup.com/flash/
- hostname съдържа hostname частта от URL, например www.comexgroup.com
- port съдържа порта (ако има такъв) от URL. Порта е номер, който се намира след hostname-a и е разделен чрез двуеточие. Ако няма определен порт, това свойство съдържа празен текстов низ
- pathname текстов низ, съдържащ всичко след третата наклонена черта, например flash/index.php
- hash съдържа всичко в URL след символа # (CGI параметри)
- search съдържа всичко в URL след символа ? (CGI параметри)

= history

Този обект ви позволява да препратите потребител към която и да е страница от неговия history-лист - списъка на страниците, които е посещавал. Обектът има само две свойства:
-current съдържа адреса на текущия документ
-length съдържа броя на посетените адреси

По-полезни са неговите методи:
-back() приема един аргумент и връща потребителя толкова позиции назад в history, колкото е стойността на неговия аргумент. Ако се извика без аргумент, връща потребителя на предишния елемент в history
-forward() прави точно противополоното на back() - придвижва потребителя напред в списъка

= document

Съдържа информация за текущия документ

- title съдържа заглавието на документа (определено между таговете <TITLE> и </TITLE>). Ако не е определено заглавие, съдържа "untitled"
- location съдържа пълното URL на документа
- lastModified обектно-съвместим текстов низ, форматиран като дата, съдържащ датата през която документа последно е бил модифициран
- referrer съдържа URL на документа, извикал текущия (страницата, от която потребителя се е свързал с текущата
- bgColor цвета на фона, представен като шеснайсетичен код
- fgColor цвета на текста, представен като шеснайсетичен код
- linkColor цвета на хиперлинковете, представен като шеснайсетичен код
- vlinkColor цвета на посетените хиперлинкове, представен като шеснайсетичен код
- alinkColor цвета на активираните хиперлинкове (след като бутона на мишката е натиснат, но преди да е отпуснат), представен като шеснайсетичен код
- forms[ ] масив, съдържащ всички форми, в реда, в който са дефинирани
- forms.length броя на формите в документа
- links[ ] масив от всички хиперлинкове в документа, в реда, в който са дефинирани
- links.length броя на хиперлинковете в документа
- anchors[ ] масив, съдържащ всички именовани части на документа (тези между таговете <A NAME=""> и </A>, в реда, в който са дефинирани
- anchors.length броя именовани области в документа
- images[ ] масив от всички изображения в докумена
- applets[ ] масив от всички аплети в документа
- embeds[ ] масив от всички plug-in обекти в документа

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

-clear() почиства документа. Това няма да промени съдържанието на документа, нито ще унищожи променливите. Вместо това clear() почиства документа за бъдещите добавяния на HTML код към документа чрез другите методи на document
-write() и writeln() правят едно и също, с тази разлика че writeln() преминава на нов ред, след изписването на подадната му информация. Това се отразява на изходния HTML код, но не и на това, което се показва в браузъра. И двата метода приемат низ като аргумент. Този низ съдържа HTML кода, който трябва да се подаде и съответно да се интерпретира от браузъра

= Form

На всеки таг <FORM> отговаря един обект Form:

- name отговаря на стойността в свойството NAME на тага <FORM>
- method номер, отговарящ на атрибута METHOD на тага <FORM>: 0 = GET; 1 = POST
- action отговаря на стойността на атрибута ACTION на тага <FORM>
- 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() връща подадения му аргумент, закръглен до най-близкото цяло число
-sin() връща синус от подадения му аргумент
-sqrt() връща корен квадратен от подадения му аргумент. Ако аргумента е отрицателен, връща 0
-tan() връща тангенс от подадения му аргумент

- Зареждане на скриптове от файл

Можете да отделите скрипта от .html документа и да го сложите в отделен файл. Това е подходящо за големи скриптове, тъй като става по-лесна работата със самия HTML документ. Подходящо е и ако един и същи скрипт трябва да присъства в множество страници, тъй като спестява пренаписването му. За целта всичко между отварящия и затварящия таг <SCRIPT> се отделя във файл с разширение .js, а на самия таг <SCRIPT> се добавя атрибута SRC със стойност файлът, съдържащ скрипта. Например ако скрипра се намира във файл library.js, кода за вграждането му ще бъде следния:

<SCRIPT LANGUAGE="JavaScript" SRC="library.js">
</SCRIPT>

- Достъп до текста между таговете

Вече разбрахте как се променят атрибутите на таговете. С JavaScrip можете да промените и това, което се съдържа между отварящ и затварящ таг. Това се осъществява чрез свойството InnerHTML, което е универсално за всеки един таг.

Работа с Cookies

Обикновено Cookiе се превежда като "бисквитка" Макар че наистина това е превода на думата, аз смятам че термините не бива да се превеждат и ще използвам по-нататък думата cookie Причината да се използват cookies е, че няма как да запишете каквато и да е информация за бъдещо ползване. След като една заявка е изпълнена (обикновено заявка за отваряне на документ), то сървърът забравя за това. Не става въпрос само за използване на информация при следващи посещения на същия потребител; дори в рамките на едно единствено посещение, ако потребителя натисне бутона Refresh, то цялата страница се връща в първоначалното си състояние. Това е особено неприятно, когато имате бутони с различни състояния натиснат/ненатиснат. Затова са създадени cookies - начин да се запазва информация на хард-диска на потребителя за бъдещо ползване. Тази информация може да се използва при бъдещи посещения на същия потребител и позволява някакъв вид персонализация на страницата. JavaScript ви предлага възможността да работите с cookies.
Създаването на cookie се осъществява чрез метода cookie на обекта document:
document.cookie = “name = value; expires = date_to_expire”
expire определя дата, след която cookie-то става невалидно. Това е полезно, ако искате да съхранявате информация само за текущото посещение, без да я използвате в бъдеще. Само че датата трябва да е в много специфичен формат:

Wdy, DD-MMM-YYYY HH:MM:SS GMT

- Wdy е трибуквено съкращение, отговарящо на един от дните от седмицата: Mon, Tue, Wed, Thu, Fri, Sat, Sun
- МММ е трибуквено съкращение, отговарящо на един от месеците: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
- DD е двуцифрено число, отговарящо на деня от месеца
- YYYY е четирицифрено число, отговарящо на годината
- HH:MM:SS са три двойки двуцифрени числа, отговарящи съответно на час:минути:секунди
- GMT е единствената позволене времева зона (българското време е GMT+2)

Запиването на cookie е сравнително лесно. Но как после да го прочетем:
Нека отново разгледаме кода, с който записваме cookie:

document.cookie = “name = value; expires = date_to_expire”

Тука трябва да отбележим, че записваме променливи чрез двойки name=value;
Използвайки функции за манипулация на низове, лесно можем да извадим стойността на променлива по нейното име. На първо място, трябва да уточним, че след като веднъж сме записали cookie, то document.cookue вече съдържа низа, който сме записали. Нека разгледаме няколко функции за работа с низове, които можем да използваме над document.cookie (като записваме една точка след cookie и написваме името на функцията)

Чрез тези два метода, и чрез свойството length, лесно можете да извлечете стойностт на дадена промелива, записана в cookie:

function GetCookie(name)
{
var namestr = name + "="
var namelen = namestr.length
var cooklen = document.cookie.length
var i = 0
while (i < cooklen)
{ var j = i + namelen
if (document.cookie.substring(i, j) == namestr)
{ endstr = document.cookie.indexOf (";", j)
if (endstr == -1) {endstr = document.cookie.length}
return unescape(document.cookie.substring(j,endstr))
}

Тази функция приема като аргумент име на променлива, записана в cookie и връща нейната стойност. Причината да използваме unescape е, че е възможно при записването на cookie-то, някои знаци да са се записали чрез съответните кодове. Функцията unescape връща същия низ като подадения аргумент, но със заменени всички кодове (%xx - например интервала се представя чрез %20) заменени със съответните символи.

Работа с масиви в JavaScript

Масива е вид променлива, която може да съдържа множество стойности. Той е изключително полезен, когато искате да използвате множество променливи от един и същи тип. Вместо да създавате променливи dog1, dog2, dog3 и т.н., вие можете да създадете масива dog и да използвате променливите dog[1], dog[2] и dog[3]. Това не само спестява множеството различни имена на променливи, но ви дава и огромно гъвкавост. Но нека първо да видим как са реализирани масивите в JavaScript. В JavaScript масивите не са обикновени променливи, а обекти. Това означава че за да използвате масив, първо трябва да се създаде обект Array. Обектите се създават чрез ключовата дума new. Характерно е, че можете да използвате колкото си искате параметри при създаването на масива, и всички те стават елементи на масива. Това означава че можете да не подадете нито един елемент и да създадете масив с неопределен размер. JavaScript предоставя множество функции за манипулация на масиви. Нека започнем с пример за създаването на масив, а после ще разгледаме подробно възможните манипулации:

myArray = new Array()
for (i=0; i<10; i++){
myArray[i] = 10-i
}

Този код създава масива myArray, а след това запълва първите му 10 елемента с числата от 10 до 1. Този код показва две от ключовите свойства на масива - преминаване през всички елементи на масива чрез един цикъл и използване на променлива в качеството на индекс на масива.

Обекта Array, и съответно всеки обект, наследил Аrray (т.е. създаден чрез командата new Array()), притежава едно свойство, съдържащо броя на елементите в масива. Това свойство е length и е изключително полезно, когато искате да преминете през всички елементи на масива чрез цикъл, но не знаете колко са елементите. Другото, което ви предоставя JavaScript, са няколко метода, които в определени ситуации могат да са изключително полезни.

Може би сте запознати с понятието стек. Той работи на принципа "Last In - First Out" (последен влязъл, пръв излязал). Т.е. това е като да натрупвате елементите един върху друг. Можете да сложите елемент само най-отгоре и да извадите само най-горния елемент. JavaScript позволява да симулирате такова поведение чрез масив. За целта се предоставят две специални функции, които се явяват стандартни за стековете: фунцкията

- push() взима неограничен брой аргументи и ги добавя като елементи към масива
- pop() изважда последния елемент от масива и го връща като стойност. В JavaScript е възможно и подобно поведение, само че в началото на масива.
- shift() изважда първия елемент от масива и го връща като стойност
- unshift() взима произволен брой аргументи и ги добавя в началото на масива

Обърнете внимание че използването на методите shift() и unshift() променя номерацията на елементите. Ако използвате метода shift() втория елемент ще стане първи, третия - втори и т.н., т.е. всички индекси ще намалеят с единица

Фунцкиите, симулиращи работа със стек са единствените, които променят изходния масив. Другите работят с копие на масива и като резултат често връщат нов масив. Пример за това е функцията concat() която приема като аргумент масив и връща масив, съдържащ всички стойности от двата масива. Нека поясним това с пример:

myArray = new Array(1, 2, 3)
otherArray = new Array(4, 5, 6, 7, 8, 9)
myNewArray = myArray.concat(otherArray)

Сега масива myNewArray съдържа числата от 1 до 9

Метода slice приема два аргумента - стартова и краен индекс и връща нов масив, състоящ се от елементите межуду началния и стартовия индекс. Т.е. ако използваме кода

partOfArray = myNewArray.slice(2, 5)

масива partOfArray ще съдържа 4 елемента, съответно числата 3, 4, 5 и 6

JavaScript ни предоставя два метода за сортиране. Метода sort() сортира елементите по азбучен ред, а метода reverse() обръща реда на елементите

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

Може би сте чували понятието многомерен масив. Това е масив, в който даден елемнт от масива сам по себе си е масив. Нека имаме декларацията:

myArray = new Array()
myArray[0] = 3
myArray[1] = 2
myArray[2] = 1
myArray[3] = new Array(13, -13, 666)

Четвъртия елемент от масива ще съдържа масив с три елемента. Съответно достъпът до тях ще се осъществява чрез myArray[3][0], myArray[3][1] и myArray[3][2]. Когато смесвате масивите, т.е. на някои позиции в масива имате обикновени стойности, а на други - масиви, е по-трудно да се работи, макар понякога да е полезно. Затова докато не свикнете с масивите използвайте отделни масиви - едни, които имат само стойности и са едномерни, и други - на които всички елементи са масиви. Всъщност, вие можете да обиколите всички стойности на втория масив чрез цикъл. А ако имате многомерен масив, можете да обиколите всичките му стойности, чрез вложени цикли:

for (i=0; i<myArray.length; i++){
for(j=0;j<myArray[i].length; j++){
//code
}
}

Забележете, че използваме свойството length на масива за елемнта i на myArray. Нали не сте забравили че елемента i на масива сам по себе си съдържа масив?
Това показва и начина да използвате методите на обекта Array, за масив, който сам по себе си е елемент от масив. Ако в масива myArray се съдържа друг масив, можете да прилагате методи към втория, като се обръщате към myArray[i], където i е позицията, в която е деклариран втория масив. Може да използвате произволна дълбочина на масива, например:

j=myArray[0].length //връща броя на елементите на масив, който се съдържа в първия елемент на myArray
i=myArray[2][4][0][12][1].length //можете ли да рзберете i броя на елементите на кой масив ще съдържа?

Това е всичко по отношение на масивите в JavaScript. Когато придобиете опит, може би ще разберете че масива е важна част от всеки език за програмиране, придаваща невероятна гъвкавост и добство при работа с данни

JavaScript при създаване на форми

Вероятно знаете, че web-формите се обработват от CGI скриптове и за тяхната обработка се използват езици като Perl, PHP или ASP. Тогава може би се чудите за какво тука е JavaScript.

JavaScript има три основни предначначения при работа с форма. Често той се комбинира със CGI скрипт за получаване на по-добри резултати. Използването на JavaScript в обработката на форми се дължи на неговия обектен модел, по-специално на методите и събитията на елементите от формата, както и на факта, че той се изпълнява от страна на клиента. Представете си форма, в която трябва да въведете името си и e-mail адрес. Ако не попълните име, или e-mail адреса е невалиден (не съдържа символа @), то CGI скрипта вероятно ще изведе съобщение за грешка и ще върне потребителя на същата страница. Но това означава, че при въвеждане на невалидни данни, формата се изпраща на сървъра, сървъра я обработва, установява грешка и връща същата форма на потребителя. Ето тук идва и мястото на JavaScript - вместо да изпращете всеки път данните и да връщате същата форма, с JavaScript осъществявате проверка за коректност на данните и изпращате формата, само ако данните са валидни. Това е значително по-бърз метод.

Тъй като се осъществява на машината на клиента и няма нужда да изпраща информация на сървъра, JavaScript е по-бърз за множество задачи и често се използва в комбинация със CGI скрипт. Но по-някога просто имате нужда от нещо по-просто, което не налага използването на CGI. Например искате падащ списък, който да пренасочва потребителя към различни страници. В момента в който потребителя избере елемент от списъка, трябва да се премине на съответната страница. Това чрез CGI е невъзможно - данните трябва да бъдат изпратени на сървъра за обработка чрез натискане на бутона Submit. Друго предимство на JavaScript е метода submit(), който изпраща данните към сървъра, без да е необходимо натискането на бутона Sumbit. Тук ще разгледаме най-често срещаните приложения на JavaScript при създаването на web-форми.

Ако имате сайт, в който потребителя трябва да въведе нещо в текстово поле (например web-базиран e-mail), то ще се сблъскате със следния проблем: потребителя трябва да щракне в полето, след това да въвежда текст. Разбира се, след това може да преминава в следващи полета чрез натискане на Tab, но щеше да е много по-удобно, ако курсорът се появяваше веднага в първото поле. Решението е методът focus() на полетата тип text, password или textarea

Друго често срещано приложение на JavaScript без да се изполва CGI скрипт е, падащо меню с препратки към сайтове. Вие искате потребителя да избере елемент от списъка и да премине автоматично на съответната страница. Ключът е в събитието onChange() на падащия списък. Разгледайте следния код:

<SELECT NAME="page" onChange="window.location=page.options[page.selectedIndex].value">
<OPTION SELECTED VALUE="software.html"<Софтуер>OPTION>
<OPTION VALUE="hardware.html"<Хардуер>/OPTION>
<OPTION VALUE="security.html"<Сигурност>/OPTION>
</SELECT>

Тука трябва да отбележим някои от особеностите на обектите от тип SELECT. На първо място те имат масив options[] отговарящ на елементите OPTION. Това е масив от обекти, всеки от които има свойството value, отговарящо на атрибута VALUE. Самия обект SELECT има свойството SelectedIndex, съдържащо индекса на избрания елемент. Този индекс ние използвахме като индекс на масива options[] за да извлечем стойността на атрибута VALUE на избрания елемент

Едно по-трудно за създаване, но изключително полезно приложение на JavaScript е проверка за валидността на данните - дали всички необходими полета са попълнени, дали e-mail -a съдържа символа @ и дали полетата, които трябва да съдържат само числа, наистина съдържат само числа. Запомнете - JavaScript кода е видим за клиента. Затова с него проверявайте само структурата на данните, не тяхното съдържание. Би било глупаво да се използва JavaScript за проверка на валидността на парола.

Нека разгледаме следния пример: имаме две тектови полета, в които потребителя трябва да въведе име и фамилия, текстово поле, в което да въведе e-mail, падащ списък, от който трябва да избере елемент и още едно текстово поле, в което трябва да въведе десет-цифрен идентификационен номер. Можем да използваме атрибута MAXLENGTH за да се уверим че идентификационния номер не е по-дълъг от 10 символа, но не може да определим минимална дължина. Така че нашия скрипт трябва да прави следните неща:

- Да провери дали в полето за име и в полето за фамилия има поне един символ
- Да провети дали в полето за e-mail има поне един символ и ако има, да провери дали се съдържат символите "@" и "."
- Да провери дали е избран елемент от падащия списък
- Да провери дали е в полето за идентификационен номер има поне един символ; ако е така - да провери дали въведените символи са само числа; ако и това е изпълнено да провери дали въведените символи са 10

Ще разгледаме всяка една от тези задачи по-отделно и накрая ще сглобим целия скрипт.
За да проверим дали в едно поле има символи ще използваме, че стойността на свойството value на всяко тектово поле е символен низ, а след като е низ, то може да използва всички свойства и методи на обекта String. В нашия случай се нуждаем от свойството length, съдържащо количеството символи в низа. И така, нека първо създадем форма:

<FORM NAME="info" METHOD="post" ACTION="proccess.php" onSubmit="return checkData()">
<BR> Име: <INPUT NAME="firstname" TYPE="text">
<BR> Фамилия: <INPUT NAME="family" TYPE="text">
<BR> Контонент: <SELECT NAME="continent">
<OPTION SELECTED VALUE="0">Избери континент</OPTION>
<OPTION VALUE="1"> Австралия</OPTION>
<OPTION VALUE="2"> Азия</OPTION>
<OPTION VALUE="3"> Америка</OPTION>
<OPTION VALUE="4"> Африка</OPTION>
<OPTION VALUE="5"> Европа</OPTION>
</SELECT>
<BR> E-mail: <INPUT NAME="mail" TYPE="text">
<BR> ID: <INPUT NAME="ident" TYPE="text" MAXLENGTH="10">
<INPUT TYPE="submit" VALUE="Продължи">
<INPUT TYPE="reset" VALUE="Откажи">
</FORM>

И така, нашата хипотетична форма изпраща данните на CGI скрипт, наречен proccess.php (в случая е написан на PHP), като използва обработка на събитието onSubmit. В това събитие извиква функцията checkData() която трябва да провери коректността на данните, да изведе съобщение за грешка, ако те не са коректни, както и да прекрати изпращането на формата при установена грешка. За това в обработката на събитието onSubmit използваме ключовата дума return - то ще върне стойността, върната от нашата функция, на браузъра. Съответно ако стойността е false то браузърът ще приеме, че бутона Submit не е бил натиснат и няма да изпрати данните. Следователно нашата функция трябва да върне стойност true или false. Нека започнем с изграждането на функцията:

function checkData(){
var message=""
}

Първо инициализираме променлива message, съдържаща празен низ. В тази променлива ще се съдържа съобщението за грешка и при всяка проверка ще се добавя съответната стойност. Така накрая ще изведем в един прозорец съобщение, съдържащо всички некоректно попълнени полета.
Продължаме с проверка на полетата "Име" и "Фамилия":

if (info.firstname.value.length==0){message = message + "Моля въведете име\n"}
if (info.firstname.value.length==0){message = message + "Моля въведете фамилия\n"}

Също толкова лесна е и проверката на падащия списък. Там трябва само да проверим дали индекса на избрания елемент не е 0 (което е елементът по подразбиране "Избери континент"):

if(info.continent.selectedIndex==0){message = message + "Моля изберете континент\n"}

Забележете че използваме символа за нов ред "\n" в края на всяко съобщение. Това е така, тъй като може да има повече от едно некоректно въведени полета и ние искаме съобщението за грешка за всеки елемент да се извежда на отделен ред в прозореца (ще използваме фунцкията alert(message) за да изведем съобщението.

С E-mail-а положението е друго. Там ни трябват две независими проверки - дали има въведена информация и дали е въведен валиден e-mail. Съответно трябва да се изведат две различни съобщения. Това е по-лесната част. Ние трябва да проверим функцията символ по символ дали съдържа "@" и за да сме съвсем прецизни - дали има точка след този символ. Тази аст от функцията изглежда така:

if (info.mail.value.length==0){message = message + "Моля въведете e-mail\n"}
else{
i=info.mail.value.indexOf("@",1)
if (i!=-1 && i!=info.mail.value.length-1){j=info.mail.value.indexOf(".", i)}else {j=-1}
if (i==-1 || j==-1 || j==info.mail.value.length-1){message = message + "E-mail is invalid\n"}
}

Накрая, проверката на ID трябва да включва три елемента - проверка въведено ли е нещо в полето; ако е въведено - дали са въведени само числа; ако и това условие е изпълнено - дали са въведени 10 символа. За да проверим дали са въведени само числа ще използваме функцията isNaN(), която връща true, ако подадения аргумент не е число (NaN произлиза от "Not a Number" - "не е число". Кода за тази проверка е:

if (info.ident.value.length==0){message = message + "Моля въведете ID"}
else if (isNaN(info.ident.value)){message = message + "Вашия ID трябва да се състои само от цифри"}
else if (info.ident.value.length<10){message = message + "Вашия ID трябва да се състои от 10 символа"}

Накаря, ако е записана поне една грешка в променливата message, трябва да се изведе съобщението и да се прекрати изпращането на формата:

if (message.length>0){
alert(message)
return false}
else{return true}

Когато сглобим целия код, той ще изглежда така:

<HTML>
< HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkData(){
var message=""
if (info.firstname.value.length==0){message = message + "Моля въведете име\n"}
if (info.firstname.value.length==0){message = message + "Моля въведете фамилия\n"}
if(info.continent.selectedIndex==0){message = message + "Моля изберете континент\n"}
if (info.mail.value.length==0){message = message + "Моля въведете e-mail\n"}
else{
i=info.mail.value.indexOf("@",1)
if (i!=-1 && i!=info.mail.value.length-1){j=info.mail.value.indexOf(".", i)}else {j=-1}
if (i==-1 || j==-1 || j==info.mail.value.length-1){message = message + "E-mail is invalid\n"}
}

if (info.ident.value.length==0){message = message + "Моля въведете ID"}
else if (isNaN(info.ident.value)){message = message + "Вашия ID трябва да се състои само от цифри"}
else if (info.ident.value.length<10){message = message + "Вашия ID трябва да се състои от 10 символа"}
if (message.length>0){
alert(message)
return false}
else{return true}
}
</SCRIPT>
<BODY>
<FORM NAME="info" METHOD="post" ACTION="proccess.php" onSubmit="return checkData()">
<BR> Име: <INPUT NAME="firstname" TYPE="text">
<BR> Фамилия: <INPUT NAME="family" TYPE="text">
<BR> Контонент: <SELECT NAME="continent">
<OPTION SELECTED VALUE="0"*Избери континент*/OPTION>
<OPTION VALUE="1"<Австралия</OPTION>
<OPTION VALUE="2"<Азия</OPTION>
<OPTION VALUE="3"<Америка</OPTION>
<OPTION VALUE="4"<Африка</OPTION>
<OPTION VALUE="5"<Европа</OPTION>
</SELECT>
<BR> E-mail: <INPUT NAME="mail" TYPE="text">
<BR> ID: <INPUT NAME="ident" TYPE="text" MAXLENGTH="10">
<INPUT TYPE="submit" VALUE="Продължи">
<INPUT TYPE="reset" VALUE="Откажи">
</FORM>
</BODY>
</HTML>

следва продължение....