Въведение Javascript е най-широко разпространеният език за програмиране в интернет, след HTML . Въпреки че го нарекох "език за програмиране", с негова помощ не се пишат програми, а скриптове които се вмъкват в HTML документа. Какво е скрипт? Скриптът е програмен код, който не се компилира, а се изпълнява от програма, наречена интерпретатор. Когато става въпрос за уеб-сайт, ролята на интерпретатор се поема от браузъра (програмата, с която се разглеждат уеб-страниците). Скриптовете в уеб-страниците се пишат на един от двата езика - 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 ще разберете колко нови хоризонти ви разкрива. В този смисъл JavaScript е език за писане на скриптове, докато JAVA е език за програмиране. Освен съвпадението в част от името, двата езика нямат кой знае какви прилики, дори са разработени от различни корпорации ( JAVA е дело на SUN, a JavaScript е разработка на Netscape Communications Corporation). JAVA е мощен език за програмиране не само на интернет приложения, но и на самостоятелни програми за различни платформи. Интернет приложенията на JAVA се наричат аплети. Те са файлове с разширение .class и се вмъкват в HTML документа между таговете <APPLET> и </APPLET>. Тук няма да се спираме подробно на JAVA аплетите. JavaScript e обектно базиран и не е нужно преди изпълнението да буде компилиран - т.н. компилация се извършва от клиента (браузъра). В JavaScript няма такъв строг типов контрол на променливите както при Java. Ето и някои основни различия:

JAVA • компилира се в код преди изпълнението. • високо обектно ориентиран. • аплетите се състоят от обектни класове, способни на пълно онаследяване. • типа на променливите трябва да бъде обявен. • статично свързване. JAVASCRIPT • интерпретира се от клиента • не се компилира • обектно базиран • използва вградени обекти но няма улеснения за класове или наследяване • интегриран код поставен в html или външни файлове (име_на_файла.js) • необявен тип на променливите • динамично свързване • обектните изисквания се изпълняват само по време на изпълнението • без достъп до локални дискове Това са някои от най - характерните различия между Java и JavaScript. Нека разгледаме възможностите наJavaScript, какво можете и какво не можете да правите с него:

• Ефекти с изображения. Rollover ефекти, слайд шоу, и много други. • Уравление на прозорци и рамки. Отваряне и затваряне на прозорци, задаване

на размера на прозорец, управление на един прозорец от друг и т.н.

• Разпознаване на типа на браузъра, операционната система, разделителната способност на екрана и дълбочината на цветовете.

• Много други работи :-) Какво не можете да правите с помощта на JavaScript :

• Не можете да записвате информация на сървъра (не можете да организирате форуми, да обработвате бази данни)

Javascript е скрипт-език за програмиране, предназначен за създаване на итерактивни Web страници. Базата за създаване и развитие на езика е една спецификация, носеща името ECMA-262. Предназначението на Javascript е да улесни динамичната обработка на HTML документи при клиента. Скрипт кодът се включва като част от HTML кода. Изпълнението на скрипта става след интерпретация от навигатора на клиента при изтегляне на страницата от сървъра. Динамично управление на графика, формуляри, хронологичния списък на страниците са сред най-често използваните приложения на скрипт код, написан на Javascript.

Javascript е първият скриптов език за програмиране в среда Web и вече не е единствен. С подобни функции и възможности е VBScript (Visual Basic Script), създаден от Microsoft. Сходството в наименованията между езиците Java и Javascript не ги прави еднакви, нещо повече те са различни в много отношения. Не бива да се смята, че Javascript е някакво подмножество на езика Java, те просто са два различни езика за програмиране. Подобно на всеки друг скриптов език чрез Javascript се създава скрипт-код, който подлежи на интерпретитане. За правилното интерпретиране на скриптове, написани на Javascript е необходим Web браузър Netscape Navigatorверсия 2.0 или по-нова, Microsoft Internet Explorer версия 3.0 или по-нова. Нека погледнем отново различията между Javascript и Java в най-общи линии:

Версии Различните версии на Javascript: Версия Съвместимост Javascript 1.0 От Internet Explorer 3.0 Netscape 2.0 Javascript 1.1 От Netscape 3.0 Javascript 1.2 От Internet Explorer 4.x Netscape Communicator 4.x Javascript 1.3 От Internet Explorer 4.x Netscape Communicator 4.x

Javascript и VBScript Различия между Javascript и VBScript: Javascript и HTML Съвместимост Произход Познания Приложение Javascript Internet Explorer C++ Предварителни Отлична

Netscape познания по С++ или Java

съвместимост с всички платформи и мрежови услуги

VBScript Internet Explorer Visual Basic Basic или произволен език за програмиране

Средна съвместимост

Приложението на Javascript изисква предварителни познания по HTML. Написаният код на Javascript се вмъква директно в кода на HTML страницата по следния начин: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Javascript</title> </head> <body> <p>Текстов параграф в HTML код.</p> <p> <script language="JavaScript"> <!-- hide from old browsers document.write("Текст, изведен на екран чрез JavaScript код!") // --> </script> </p> <p>Текстов параграф в HTML код.</p> </body> </html>

Интерпретацията на кода в среда Netscape Navigator 4.7 е показана на Екран 1. Примерът е достъпен за изпълнение при избор на хипервръзката с името на файла: js1.html.

В HTML документа Javascript кодът се вмъква чрез елемента <SCRIPT>. Този елемент е въведен в стандарта HTML 3.2 и HTML 4.01. При Web браузъри, които не интерпретират елемента <SCRIPT>, се появява страничен ефект при изобразяване на съдържанието на HTML документа от Екран 1. Кодът на скрипта се изобразява в полето на документа като текст. За избягване на този неблагоприятен ефект е прието съдържанието на скрипт кода да се огражда в коментар по правилата на HTML ( <!-- ... -->). Така по старите версии на браузърите ще помислят JavaScript кода за коментар и няма да съобщят за грешка. Код на Javascript може де се вмъква динамично в момента на интерпретиране на HTML страница чрез следната команда: <SCRIPT SRC="javascript_file.js" TYPE="text/JavaScript"> където, файлът javascript_file.js съдържа код на Javascript. Основните характеристики на езика Javascript се заключават в следното: • Няколко основни типа данни:

• Цифров тип, без ясно разграничаване между цели и реални; • Символен тип; • Логически тип; • Нулев тип;

• Слаба типизация в езика, една променлива може във всеки един момент да промени своя тип;

• Синтактична близост на езика с езика за програмиране С, почти същите оператори и инструкции;

• Езикът е основан на недоразвит, начален обектен модел, липсва понятието клас и не поддържа унаследяване;

• Няколко базови обекта за обработка на дати, таблици и математически пресмятания;

• Ограничени възможности за манипулиране на входа и изхода, и почти никакви за въздействие с мрежови операции

Елементи на езика Javascript • Лексика • Коментари • Типове данни • Променливи • Ключови думи

Лексика Лексическата структура на езика формира набор от правила за изписване на програмния код. На тази база се определя начина на записване на променливите, използваните специални символи за коментари, разделянето в кода на отделните оператори от езика и др. Езикът е чувствителен към малки и големи букви. Това означава, че ключовите думи в езика, имената на променливите или всякакъв друг идентификатор трябва да се изписват еднообразно. Използването на оператор "while" не би следвало да се изписва като "While" или "WHILE". Същото съображение важи и за имената на променливи. Въвеждането на променлива с наименование online, Online, OnLine, ONLINE се разпознават от езика като четири различни идентификатора. Всяка инструкция в езика завършва с символа ';' подобно на други езици за програмиране като C или Java. Това не се явява задължително условие, ако всяка инструкция от езика е поставена на отделен ред. Въпреки това се препоръчва използването на терминиращия инструкциите символ за по-голяма яснота на кода, безконфликтност и е един добър стил в програмирането по принцип. Създаването на определени навици, особено за начинаещите програмисти, в последствие се оказва важно тяхно предимство за оформяне на четлив и добре структуриран програмен код! Коментари Коментарните редове в една програма са нещо, което винаги се пренебрегва, и за което винаги се съжалява в последствие. Принципният смисъл в един коментарен ред е да поясни и за по-далечно бъдеще да обясни какво точно се има предвид с използването на един или друг команден ред в програмата, инструкция или предназначение на дефинирана променлива. Използването на коментари в края на линията е прост и същевременно добър начин програмиста да постави своите бележки. Коментарните редове присъстват в първичния код на програмата и в никакъв случай не утежняват изпълнимата част от програмата. Поставянето на коментар в края на командна линия става с помощта на "//" два slash-a. var Promenliva = 3; // променлива с инициализация на стойност Поставянето на коментарни редове на повече от една линия се налага често от необходимостта да се направи по-подробно описание на действието на цяла функция или част от програма. В този случай началото на коментара се отбелязва с комбинацията символи "/*", а края с "*/". /* ********************************** ********* Това е коментар! ********** ********************************** */

Типове данни Езикът поддържа стандартните типове данни. Целите числа и тези с плаваща запетая са представени с един обобщен числов тип (number) заедно с логическия тип, символни низове, неопределен тип (null) и масиви. Числов тип Всяко число без водеща нула се приема за десетично. Целите числа могат де се представят в десетична, осмична или шестнадесетична бройна система. • Десетично: без водеща нула (57, 5000) • Шестнадесетично: префикс с 0x (0x56, 0xFE) • Осмично: водеща 0 (045, 013) Представянето на числата с плаваща запетая става с определяне на цялата и дробна част: 2.01 или -3.1. Например: • 5.78 • 1E6 : един милион (1,000,000) • 25E-2 : една четвърт (.25) • 1E-6 : една милионна (.000001) Логически тип Логическият тип е прост тип с две възможни значения: true или false. Булевите изрази обикновено са част от операторите за условно изпълнение if...else... които ще разгледаме по-късно. Символни низове Символен низ е последователност от символи оградени с """ или "'" (единична или двойна кавичка). Използването им не може да се смесва в рамките на една дефиниция. Например: • "Това е символен низ." • 'A' • '25 лева' • "200" Препоръчва се използването на единична кавичка (') при дефиницията на низове с цел разграничаване от HTML елементите, чийто параметри се ограждат винаги с двойна кавичка ("). В един символен низ могат де се вмъкват и контролни символи: • \a : Alert (звуков сигнал) • \b : Backspace (връща курсора с един символ)

• \f : Form-feed (преминава на нова страница) • \n : New line (преминава на нов ред) • \r : Carriage return (премества курсора в началото на реда) • \t : Tab (символ за табулация) Масиви Масивът като тип за представяне на данни (структура данни) е много подходящ когато е необходимо еднотипна информация да се записва и обработва съвместно. Например, оценките на една студентска група по определена дисциплина могат да се представят като елементи на масив с едно общо име: izpit и 10 различни оценки. Така оценката на първия студент от протокола ще бъде записана в елемента izpit[1], на втория в izpit[2] и т.н. В езика масивът не е от стандартните типове, а е структурен тип обект. За създаване на масив с определен брой елементи може да се използва следната инструкция: izpit = new Array(10); Присвояване на стойност на елементите на масива: izpit[0] = 5.00; // Първи елемент в масива izpit[5] = 4.75; izpit[9] = 6.00; // Последен елемент в масива Първият елемент на масива е с пореден номер (индекс) 0, а последният с индекс 9! Тип null В езика този недефиниран тип играе важна роля. Ако на една променлива бъде присвоена стойност null, то това означава не само, че тя няма определена стойност, но също, че няма дефиниран тип. Присвояване от вида: var y = null; има смисъл за предотвратяване на грешки по време на изпълнение на програмата ако по някаква причина променливата y не е била дефинирана и няма стойност. Деклариране на променливи Декларирането на една променлива се извършва с помощта на ключовата дума var, последвана от идентификатор на променливата. Типът на променливата се определя автоматично след присвояване на стойност в програмата или инициализация в момента на декларирането. Една променлива се счита за декларирана без използване на ключовата дума var, ако в момента на нейното обявяване й се присвои стойност. Имената на идентификаторите на променливите се подчиняват на следните правила:

Името на променливата може да съдържа произволна буквено-цифрова комбинация от малки и големи букви и символ за подчертаване (_); Имената на променливите са зависими от малки и големи букви; Името на променливата не може да съдържа празни символи или символи за пунктуация; Първият символ от името на променливата трябва да бъде буква или символ за почертаване (_);Те не трябва да започват с цифра. Дължината на името на променливата не е ограничено по брой символи, но трябва да бъде изписано на един ред. Типът на една вече дефинирана променлива с присвоена стойност може във всеки един момент да бъде промемен с промяната на стойността й. Например: var total = 22; var currency = " лева"; На променливата total е присвоена целочислена стойност 22, с което тя добива числов тип. Променливата currency има присвоена стойност от символен низ, с което тя добива символен тип. Следваща операция: total += .25; ....... total += .75; прибавя към вече съществуващата стойност 22 дробната стойност 0.25, с което стойността на променливата total става 22.25, т.е. реална стойност. В този момент типът на променливата total се е сменил автоматично от целочислен в реален с плаваща запетая. Следващият програмен ред променя отново типа на променливата до целочислен, защото след последното присвояване получената стойност е точно 23. Накрая, ако "съберем" значенията на двете променливи total и currency: total = total + currency; се получава ново значение за променливата total ("23 лева"), този път от тип символен низ. Автоматичното преобразуване на типовете върви по пътя на по-сложния тип. Един друг важен въпрос, свързан с изпозването на променливите, е обсегът на тяхното действие. Тук са в сила следните правила: Променлива декларирана в рамките на една функция чрез ключовата дума var има локално действие в рамките на функцията; Променлива декларирана в рамките на скрипт секцията чрез ключовата дума var или с непосредствено присвояване на стойност в рамките на една функция има глобално действие за целия скрипт. Резервирани думи В Javascript подобно на други езици за програмиране има множество от ключови думи, които не е подходящо да бъдат използвани като имена на променливи или за

друг вид идентификатори. Използването им в този смисъл може да предизвика грешки по времем на интерпретация на кода. Резервираните ключови думи се делят на три категории: ключови думи на езика Javascript; Java ключови думи резервирани от Javascript; други ключови думи за които е препоръчително да се избягват. Таблица на резервираните ключови думи

Таблица на Java ключови думи резервирани от Javascript

Таблица на ключови думи, които трябва да се избягват

Оператори и изрази В езика са реализирани почти всички оператори, известни от други езици за програмиране. Те могат да се класифицират като оператори предназначени за: • Присвояване. • Аритметични. • Логически и за отношения. • Обработка на символни низове. • Операции на ниво битове. • Условен оператор • Оператор за достъп • Приоритет на операциите Оператори за присвояване.

Предназначението на оператора за присвояване (=) е да обнови съдържанието на променлива от лявата страна на оператора със стойност изчислена от дясната му страна. Разновидности:

Аритметични оператори Операторите извършват аритметични операции върху своите операнди.

Логически оператори и оператори за отношение Логическите оператори и операторите за отношение извършват срванение между операндите си, които могат да бъдат числови, низове или логически. Ако резултатът от сравнението е 0, той се третира като верен, т.е. "истина". В противен случай формираният резултат е различен от 0, което се приема за "лъжа".

Оператори за обработка на низове Операторите за сравнение могат да се използват и при символните низове. Специфична операция между символни низове е конкатенацията. В следствие на "събирането" (+) на два низа се получава трети низ. Пример: a = "едно " + "две" След изпълнение на операцията се получава низ ("едно две") като значение на а. Ако променливата а има за значение съдържанието на низ "едно ", след изпълнение на операцията: a += "две" се получава ново съдържание на а - "едно две". Оператори за инкрементиране и декрементиране. Операторите за инкрементиране и декрементиране се използват съответно за увеличаване или намаляване с единица (1) на стойността на променлива. В

зависимост от мястото на оператора се определя и момента на изпълнение на операцията. В един израз с повече от един операнд префиксно инкрементиране или декрементиране се изпълнява преди изчисляване на израза. В случая на постфиксно инкрементиране или декрементиране операцията се изпълнява след изчисляване на израза. Операции на ниво битове В езика Javascript са заложени накои побитови операции, предназначени за извършване на пресмятания на ниво битове.

Условен оператор Условният оператор връща стойност от един или друг израз в зависимост от поставено условие. Ако условието е изпълнено (true) се връща стоността на първия операнд, и ако не е изпълнено (false) се връща стойността на втория операнд: (условие)?израз1:израз2 Пример: (a==5)?true:(a+b)*4 ако а съдържа стойност 5, то върната стойност е булева - true, иначе се пресмята стойността на израза (a+b)*4. Оператор за достъп Операторът '.' се използва за директен достъп до поле от структура. Езикът Javascript е обектно-ориентиран. В този смисъл операторът се използва за достъп до методите и свойствата на обектите в езика. Приоритет на операциите

В езика има установена последователност при изпълнение на операциите в един израз. Промяна в установения приоритет се постига чрез използване на скоби. Приоритетът на операциите е показан в Таблица 1 от най-ниския към най-високия. Таблица 1 [ ] . ! ++ -- * / % + - << >> == != <<= >>= & ^ | && || ?: = += -= *= /= %= <<= >>= &= ^= |= , Преобразуване на типове В Javascript има три функции за преобразуване на низ в числов тип: • eval() - преобразува символен низ в числов резултат. • parseInt() - преобразува символен низ в число с определена база. • parseFloat() - преобразува символен низ в реално число. Функция eval(). res = eval(expr) • expr - е символен низ, съдържащ числа или формули, чийто резултат е числов. • res - числова стойност формирана от функцията. Пример: var a = 7 b = eval("a*2") // b приема стойност 14 c = eval("756.12") // c приема числова стойност 756.12 Функция parseInt(). res = parseInt(str[.base]) • str - низ за преобразуване.

• base - бройна система на низа. • res - числов резултат от преобразуването. Пример: parseInt("FF".16) // функцията връща числов резултат 255 parseInt("12".8) // функцията връща числов резултат 10 parseInt("10".10) // функцията връща числов резултат 10 parseInt("X1X.10) // нечислов низ и резултатът е 0 Функция parseFloat(). res = parseFloat(str) • str - низ за преобразуване. • res - реална стойност в резултат на преобразуването. parseFloat("427.35Е-1") // функцията връща числов резултат 42.735 parseFloat("Ь12") // функцията връща числов резултат 0 Структури за управление • Блок оператор • Алтернатива • Цикъл for • Цикъл for ... in • Цикъл while • Оператор continue • Оператор break • Оператор with • Оператор var • Оператор function • Оператор return • Таблица на Javascript оператори Javascript инструкциите се изпълняват (интерпретират) последователно, независимо дали се намират във Javascript функция или са в блок, заграден от HTML елементите <SCRIPT> ... </SCRIPT> в тялото на HTML документ. Линейното изпълнение на инструкции в една функция може да бъде нарушено от наличието на определено условие. При проверка на условието, то може да бъде удовлетворено или не. Поставеното условие разклонява изпълнението на функцията с определана последователност от инструкции в зависимост от резултата на теста на същото това условие. В друг случай, определена последователност от инструкции се изпълняват циклично с изменящи се параметри в зависимост от поставено условие.

Изпълнението и контролът на структурите за управление в езика са сходни с тези установени в езика С. Блок оператор Блок операторът е последователност от Javascript операции заградени от фигурни скоби { ... }. Ефектът е в последователното им изпълнение като единен оператор. Пример: { x = Math.PI; cx = Math.cos(x); alert("cos(" + x + ") = " + cx); } Резултат:

Алтернатива if ... else За алтернативното изпълнение на една или друга последователност от инструкции се прилага структурата за управление алтернатива: if (условие) { инструкция 1 . . . . инструкция n } else { инструкция 1 . . . . инструкция m } условие - е логическо условие, което се проверява (изчислява) при изпълнение на инструкцията if. При резултат от условието 0, се приема, че е изпълнено. При резултат от условието различен от 0, се приема, че не е изпълнено.

инструкция 1 ... инструкция n - е последователност от инструкции, изпълнявани при резултат от условието 0. инструкция 1 ... инструкция m - е последователност от инструкции, изпълнявани при резултат от условието различен от 0. Пример: if ( a > b ) { res = "a е по-голямо от b"; } else { res = "a е по-малко от b"; } В някои случаи операторът else може да бъде пропуснат. Тогава скрипта ще се изпълнисамо ако е вярно поставеното условие, иначе няма да се изпълни. Циклични структури В една функция често пъти се налага един блок от инструкции да се изпълнява многократно. В езика Javascript са реализирани две структури от този тип: for и while. Инструкция for . Инструкцията управлява циклично изпълнение на блок от инструкции в зависимост от граничното значение на собствен параметър. Параметърът се инкрементира или декрементира при всяка следваща итерация. При този вид циклична структура броят на итерациите е предварително известен. for (израз 1; израз 2; израз 3) { инструкция 1 . . . . . инструкция n } • израз 1 - инициализира променливата-брояч на цикъла. • израз 2 - определя граничната стойност на променливата-брояч, при която се

прекратява изпълнението на цикъла. • израз 3 - определя следващата стойност на променливата-брояч. • инструкция 1 ... инструкция n - е последовтелност от инструкции, изпълнявани

циклично. Пример: <HTML> <HEAD>

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=WINDOWS-1251"> <TITLE>Инструкция FOR</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var i document.write("<H1> <CENTER> Инструкция FOR </H1> <HR>"); document.write("<PRE>Символите от код 32 до 128 \n\n") if ((i % 16) == 0) document.write("<P>"); document.write("&#"+i+";"," "); } </SCRIPT> </BODY> </HTML> Началната стойност на променливата-брояч на цикъла е 32. При всяка итерация стойността му се увеличава с единица (i++). При достигане на стойност 128 (i<128) цикличното изпълнение се прекратява. С цел разполагане на 16 символа на ред при визуализация на резултата с инструкция if се проверява условието i да се дели без остатък на 16 ((i % 16) == 0) и се преминаване на нов ред (document.write("<P>")). Интерпретация Екран 2. Екран 2 - Циклично изобразяване на символите от код 32 до 128

В езика Javascript инструкцията for има една специфична разновидност for ... in за последователен достъп до свойствата на един обект. for (var in object) { инструкция 1 . . . . . инструкция n } • var - е променлива-брояч. • object - е обектът, за който се прелистват свойство. • инструкция 1 ... инструкция n - е последовтелност от инструкции, изпълнявани

циклично за всяко свойство на обекта. Пример: <HTML> <HEAD><TITLE> Пример за FOR .. IN </TITLE> <SCRIPT LANGUAGE="JavaScript"> function properties(obj,name) { var res="" var i for (i in obj) { res += name+"."+i+"="+obj[i]+"<BR>" } document.write(res) } </SCRIPT> </HEAD> <BODY> <H1><CENTER>Инструкция for ... in</H1><HR> <FORM> Натиснете <INPUT TYPE="button" NAME="Test" VALUE="TYK" ONCLICK="properties(Test,'Bouton')"> за визуализация <br>на свойствата на обекта бутон. </FORM> </BODY> </HTML> Друг Пример:

Разглежданата функция e подобна на предишния пример и има за аргументи обект и име на обект и връща имената на свойствата на обекта и техните стойности. function dump_props(obj, obj_name) { var result = "" for (var i in obj) { result += obj_name + "." + i + " = " + obj[i] + "<BR>" } result += "<HR>" return result } В HTML кода се описва форма с <INPUT> локатор от тип button. При избор на бутона (ONCLICK) управлението се предава на функцията properties, която се извиква с два параметъра : име на обекта (Test) и наименование (button). Функцията циклично (i) конкатенира в res информация за всяко свойство на обекта (obj[i]). Извеждането и на екран става с помощта на метода write на обекта document (document.write(res)). Интерпретация Екран 3.

Екран 3 - Форма за тест на инструкция for .. in

След избор на активния бутон от Екран 3 на Екран 4 се появава резултат от работата на функцията Properties. Екран 4 - Свойства на обекта бутон

На различните браузери резултата е различен. Опитайте на Opera7.51. Инструкция while . Инструкцията while предизвиква многократното изпълнение на блок от инструкции докато поставеното условие е изпълнено. Тестът за валидност на условието се извършва преди изпълнението на цикъла, т.е. цикъл с префиксно условие. while (израз) { инструкция 1 . . . . инструкция n } • израз - условие за управление на цикъла. • инструкция 1 ... инструкция n - е последовтелност от инструкции, изпълнявани

докато условиет в "израз" е изпълнено. Пример: var i=32 while (i<49) {

document.write("&#"+i+";"," "); i++; } Откъс от предишен пример е реализиран с while. Тук следващата стойност за цикъла се получава след постфиксно инкрементиране на i. Безкраен цикъл може да се реализира по два начина: for ( ; ; ) { инструкции } или while (1) { инструкции } Инструкция continue. За прескачане изпълнението на определена итерация в една циклична структура се прилага инструкцията continue. for (израз 1; израз 2; израз 3) { if (условие) continue; инструкция 1 . . . . . инструкция n } или while (израз) { if (условие) continue; инструкция 1 . . . . инструкция n }

Ако условието в if оператора е удовлетворено управлението се предава директно на заглавния оператор за цикъла (for или while). Инструкция break. За прекратяване изпълнението на една циклична структура се прилага инструкцията break. for (израз 1; израз 2; израз 3) { if (условие) break; инструкция 1 . . . . . инструкция n } или while (израз) { if (условие) break; инструкция 1 . . . . инструкция n } Ако условието в if оператора е удовлетворено изпълнението на цикъла се прекратява и управлението се предава под неговата блок-структура. Инструкция with. Общия вид на инструкцията е: with (object) statement където: • object - съдържа израз, сочещ към определен обект. Посоченият обект добива

свойството на поразбиращ се за следващата поседователност от оператори (statement);

• statement - оператор или блок-оператор за който параметърът object става подразбиращ се.

Пример: Операторът with може да опрости следния запис [41](стр.20): x = Math.sin(i * Math.PI / 20);

y = Math.cos(i * Math.PI / 30); При използване на оператор with заедно със съставен оператор се получава следното: with(Math) { x = sin(i * PI / 20); y = cos(i * PI / 30); } Инструкция var. Инструкцията var дава възможност за деклариране на променлива или списък от променливи заедно с инициализация на променливата при необходимост. Общия вид на инструкцията е следния: var name_1 [ = value_1 ] [ ,..., name_n [ = value_n ] ] ; Пример: var i; var j = 0; var x = 2.34, y = 4.12, r, t = 7; Ако при деклариране на променлива чрез инструкция var не се присвоява начална стойност, то Javascript присвоява на променливата специална недефинирана стойност (undefined value). Изпозването на инструкцията за дефиниране на локални променливи във функции е задължително и за избягване на противоречия с декларации в по-горни функции. В рамките на единична функция явното обявяване на променливи с техни начални стойностти не е задължително тъй като езикът Javascript, както вече стана дума, е слабо типизиран. Въпреки това се препоръчва явното и предварително дефиниране на имената на променливите с инициализиращи стойностти за определяне на техния тип. Това спомага за избягване на смислови противоречия при използване на променливите в текста на функцията и не на последно място е един добър стил на програмиране. Инструкция function. Операторът function е предназначен да дефинира нова потребителска функция в един Javascript код. Общият вид на оператора е: function fname ( [ arg1 [, arg2 [..., argn ] ] ] ) { statements } където: • fname - е името на функцията, зададено чрез буквено-цифрова комбинация без

специални символи като първият трябва да е буква;

• arg1, ... , argn - е списък от аргументи на функцията. Списъкът може да бъде и празен, т.е. без аргументи. Всеки аргумент е име на променлива, която може да се използва вътре във функцията.

Извикването на една функция става по нейното име в израз или самостоятелно като на списъкът от аргументи се съпоставя списък от стойностти и/или променливи със стойностти. Изпълнението на операторите, записани в тялото на функцията става след нейното извикване и предаване на параметри, а не в момента на нейното описание като функция чрез еператор function. Една функция, по своята дефиниция, може да връща стойност в точката на извикване. Това свойство се удовлетворява чрез изпълнение на оператор return от тялото на функцията. Една функция може да извиква сама себе си с различни параметри, т.е в Javascript се поддържа рекурсия. Пример: function factorial(n) { if (n <= 1) return 1; else return n * factorial(n - 1); } Функцията представя код на Javascript за рекурсивно пресмятане на n факториел, където n е параметър зададен в момента на извикване на функцията factoriel. Инструкция return. Всеки израз връща стойност, всяка функция, която преобразува и пресмята израз фромира стойност, която може да бъде върната по-нагоре чрез оператор return. Общият вид на оператора е следния: return [ expression ]; Изразът (expression) в оператора return и калкулираната стойност се връща в точката на извикване на функцията, например: function square(x) { return x*x; } Всяка функция в Javascript е в състояние да върне стойност. За тази цел се използва инструкцията return. Пример: function hexdec(str) { return parseInt(str,16); }

Функцията преобразува зададената като параметър шестнадесетична символна стойност в десетично цяло число. Операторът може и да не връща конкретна стойност, а само да предава управлението в програмата на по-високото ниво, например: function square(x) { if ( x <= 1 ) return; else return x*x; } Ключовата дума this Синтаксис: this[.propertyName] където propertiName е името на свойството <HTML> <BODY> <IMG SRC="buble.gif" onmouseover="this.src='buble2.gif'" onmouseout="this.src='buble.gif'"> </BODY> </HTML> В горния пример видяхте как се използват вградените манипулатори на събития. Но може би сте забелязали употребата на думата this вместо името на обекта, чието свойство променяме. Това често се използва при вградените манипулатори на събития. this обозначава текущия обект (или текущия таг) и премахва необходимостта не само от използването на името на обекта пред неговото свойство, но и въобще от дефинирането на име на обекта. Пример: Нека дефинираме функция, която проверява дали стойността на свойствотo на обект е в определен диапазон: function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) alert("Invalid Value!") }

Можем да извикваме тази функция за проверка на валидността на въведените данни от всеки елемент на формуляр, например: <INPUT TYPE = "text" NAME = "age" SIZE = 3 onChange="validate(this, 18, 99)"> Тези неща в момента може да са ви много неясни и мъгляви затова след като минете към 80 страници ви препоръчвам да се припомнете какво точно представлява думата this. Ако пак не ви е ясно по-добре си купете книга за Javascript. Синтаксис на Javascript оператори

Функции Подобно на други езици за програмиране в Javascript могат да бъдат декларирани и извиквани за изпълнение потребителски фунции, създадени от програмистта. Принципно тази възможност благоприятства създаването на универсален код и намалява обема на пренасяните по мрежата данни за една HTML страница. Декларирането на една функция с фиктивни параметри означава нейното еднократно

описание и многократно извикване в рамките на страницата за различни стойности на действителните параметрите. Функцията може да бъде записана в самостоятелен файл (име_на_функция.js) (за пример на стр.76) и зареждана заедно със страницата преди нейното извикване, което облекчава кода и позволява нейното изпозване в различни страници. В стандартния случай кодът на функцията трябва да се съдържа в текста на всяка HTML страница, която ще я извиква. function име(параметри){ тяло на функцията return [израз]; } • function - въвежда дефиниция за функция; • име - име на функцията, буквено-цифрова комбинация без специални знаци, като

първият символ в името трябва да бъде буква. Внимание: езикът Javascript различава малки и големи букви. Допуска се използването на символа '_' като разделител ;

• параметри - списък от имена на фиктивни параметри, разделени със запетая и затворен с кръгли скоби. Списъкът може да бъде и празен;

• тяло - тук се разполага последователността от инструкции за изпълнение след извикване на функцията със съответните стойности на параметрите;

• return - е инструкция за прекратяване изпълнението на функцията и възможност за връщане на резултат в точката на извикване.

Функцията се извиква по име като част от израз. Последователността от параметри трябва да бъде спазвана. Върната стойност се използва при последващите действия. Текстът на функцията за да бъде достъпен за изпълнение (интерпретация) трябва да бъде вмъкнат в кода на HTML страницата заедно с израза, който я потребява. Вмъкването може да бъде непосредствено или индиректно под формата на външен файл. Можете да създавате функции с повече от един параметър. В такъв случай параметрите се разделят със запетаи: <html> <head> <title> Javascript пример</title> <script language="JavaScript"> // Деклариране на променливи . . . . . . . // Начало на функциите function име_на_функцията (параметър1, параметър2, ..., параметърN) { инструкция_1; инструкция_2; . . . . . . . инструкция_N; } </script>

</head> <body> . . . . . . . . . </body> </html> Когато създавате такава функция, трябва винаги когато я извиквате да задавате същия брой аргументи, както когато сте я дефинирали. Правилата за създаване на имена на функциите са същите като при променливите. Хубаво е ако името на функцията съдържа повече от една дума, първата дума да се изписва с малки букви, а всички останали да започват с главна буква, например fontSize. Пример: Дефинираме функция без параметри, която изчислява и връща сумата на първите десет цели числа: function Suma10() { var b=0; var i=1; while(i<=10) { b+=i; i++; } return b; } Примерът може да бъде активиран дистанционно при избор на хипервръзката ТЕСТ. Интерпретация на кода Екран 5.

Екран 5 - Сума на първите десет числа Рекурсивност Подобно на езикът С Javascript позволява рекурсивност като метод за програмиране. Може да се каже, че има рекурсивно обръщение към една функция, ако за решаване на част от задачата, тя извиква сама себе си. Рекурсивност се наблюдава и в случай на индиректно извикване на основната функция. Основната функция извиква функция, която от своя страна извиква основната функция. При всички случаи, независимо от дълбочината на обръщенията няма припокриване на стойностти на променливи, понеже параметрите се предават по стойност, т.е. извиканата функция получава копие от стойността на параметъра. Пример: Примерът намира сумата на първите n цели числа в рекурсивен вариант. function Suma(i){ return i==1?1:i+Suma(i-1); } При стойност на i=1, сумата на първите i цели числа е 1, в противен случай тя е i прибавена към сумата на първите i-1 цели числа. Примерът може да бъде активиран дистанционно при избор на хипервръзката ТЕСТ. Интерпретация на кода Екран 6.

Екран 6 - Рекурсивно пресмятане на сумата на първите 10 цели числа Работа с променливи Променливите в JavaScript са от типа величини, които могат да променят стойността си. Другият тип ведличини в JavaScript са константите. Ще използваме променлива: <HTML> <HEAD> <TITLE>JavaScript EXAMPLE 1</TITE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- greeting="Здравей!" document.write(greeting) //--> </SCRIPT> </BODY> </HTML> Тук името на променливата е greeting, а стойността и е "Здравей!". Така когато отпечатваме променливата greeting ние всъщност отпечатваме нейната стойност. Вече на няколко пъти споменахме значението за малки и големи букви в имената на променливи.Ето няколко правилни имена на променливи: greeting_card; greet2; _my_greeting. Пример за неправилни имена на променливи са: 123; var.2; greeting 3.-първата започва с цифра, втората съдържа непозвоален символ, а третата съдържа интервал Пример за използване на променливи:

<HTML> <HEAD> <TITLE>JavaScript EXAMPLE 2 </TITE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- a=5 b=7 greeting="Здравей!" document.write(greeting+a) document.write("<br>") document.write(a+b) //--> </SCRIPT> </BODY> </HTML> Тук имаме три променливи: a, b, и greeting. На първата променлива присвояваме стойност 5 (а=5) на втората 7 (b=7), а на "Здравей!"(greeting="Здравей!"). В горния случай променливите a и b са от целочислен тип, защото стойностите, които те приемат са целочислени числа. Третата променлива greeting е от стрингов тип. Към този тип променливи се присвоява някакъв текст (стринг) заграден с кавички или апострофи. Вече знаем, че с променливите могат да бъдат извършвани математически операции като събиране, изваждане, умнеожение, деление и т.н. В началото на всяка променлива присвояваме някаква стойност а=5, b=7, greeting="Здравей!". В следващият ред от скрипта се извършва операцията събиране на две променливи и резултата се извежда на екрана чрез функцията (document.write()). Интерестното е че първите две променливи, които събираме са от различни типове, едната е целочислена, а другата е от тип стринг. Когато се извършват математически операции, в които участващите операнди са от различни типове и едната от тях е стринг, то резултата винаги е стринг. В случая greeting+a ще даде като резултат Здравей!5. Събирането на целочислени променливи, както и на такива с плаваща запетая (така наречените в математиката дроби :-) води до резултат друго число, което в случая означава, че a+b е числото 12. Както казахме document.write(greeting+a) ще даде резултат Здравей!5. Както се забелязва един вид двете променливи са се слепили. Ако искаме да включим интервал между тях, трябва да заменим document.write(greeting+a) с document.write(greeting+""+a), където "" е празния стринг. Обърнете също така внимание на преминаването на нов ред- document.write("<br>"). Когато вътре в скрипта включите HTML таг, той се изпълнява.

Масиви В Javascript масивът е структура данни, която обхваща последо-вателност от наименовани и индексирани елементи. В общия смисъл масивът в Javascript не се различава от общоприетата дефиниция с тази разлика, че всеки елемент от масива може да приема стойност от различен тип, понеже самият език е слабо типизиран, обстоятелство вече изяснено многократно дотук в текста.

Достъпът до елементи от масив се извършва с оператора [ ]. В ляво от оператора се поставя името на масива. В средни скоби се загражда положителен и целочислен израз или целочислена стойност за определяне на адреса на негов елемент. Индексът на първия елемент от масив има стойност 0. Например: value = a[0]; a[1] = 3.14; i = 2; a[i] = 3; a[i + 1] = "Здравей!"; a[a[i]] = a[0]; Размерността на масивите не е необходимо да бъде фиксирана предварително и може да бъде променяна динамично. Обстоятелството, че кодът на Javascript се интерпретира обяснява този факт. Памет се отделя само за елементи от масива, за които има присвоена стойност: a[0] = 1; a[10] = "десети елемент от масива"; така, за елементите от a[1] до a[9] по време на изпълнението памет не се отделя. //Част от информацията по-надолу за масивите може да се припокрива //с част от информацията по-горе до края на темата за масивите masiv=new Array() ..където masiv и името на масива, а new Array() е начина на създаването му. По този начин създадохме празен масив с неопределен брой елементи. Вместо празни скоби, можем да зададем броя на елементите в масива: masiv=new Array(10) В горния случай създадохме масив с име masiv и 10 елемента със стойност NULL, т.е. празни. Ако не зададем предварително броя на елементите в масива, то това можем да направим по-късно, като задаваме стойност на всеки елемент поотделно. Самото индексиране на елементите става с квадратни скоби [ ] , като броенето

започва от нула. Така първия елемент в масив с десет елемента е masiv[0] а последния masiv[9]. Нека да създадем масив със седем елемента и да им дадем стойности дните от седмицата: masiv=new Array(7) masiv[0]="понеделник" masiv[1]="вторник" masiv[2]="сряда" masiv[3]="четвъртък" masiv[4]="петък" masiv[5]="събота" masiv[6]="неделя" ...същото нещо можем да направим по по-лесен начин: masiv=new Array("понеделник","вторник","сряда","червъртък","петък","събота","неделя") така вече всеки елемент от масива си има някаква стойност. Тези стойности могат да бъдат променяни свободно по всяко време, както и типа на променливата. Например ако напишем masiv[5]=122 шестия елемент ще бъде от целочислен тип, докато останалите ще са от стрингов тип. Много лесен начин да си осигурите достъп до елементите на масива е, чрез използване на цикъл : masiv=new Array("понеделник","вторник","сряда","червъртък","петък","събота","неделя") for(i=0;i<7;i++) { document.write(masiv[i] + "<br>") } многомерни масиви Всеки елемент от масив може да бъде сам по себе си масив. За илюстрация ще дадем един пример: 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] Този код показва как се работи с многомерни масиви. Нека имаме декларацията:

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. Когато придобиете опит, може би ще разберете че масива е важна част от всеки език за програмиране, придаваща невероятна гъвкавост и удобство при работа с данни. За масиви и стекове Може би сте запознати с понятието стек. Той работи на принципа "Last In - First Out" (последен влязъл, пръв излязал) познато на някои като LIFO. т.е. това е като да натрупвате елементите един върху друг. Можете да сложите елемент само най-отгоре и да извадите само най-горния елемент. 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() обръща реда на елементите Избор между повече от един вариант Операторът 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; Символни низове

За съжаление тази глава е само идейно започната без никаква идея вътр в нея. Ще

ме извините но това е положението. Ако някой има някакво предложение да пише. Все пак има нещо за низовете ако имате представа поне малко от С и/или Java ще

разберете как се работи с вградените обекти от тип string които са в глава Вградени обекти. Йерархия на класовете

JS Event Handlers Няколко примера

Сега ще покажем как можете да направите няколко дребни номера с уеб страниците, като по този начин ше се запознаем и с двата най-често използвани вградени обекта на JS - document и window. Нека първо опитаме да изпишем нещо на уеб страницата чрез Java Script. За целта ще използваме метода write на обекта document : <script> document.write('Здравейте и добре дошли!') </script> Този текст ще изпише "Здравейте и добре дошли!" в страницата. Очевидно ползата от подобен вариант за писане не е голяма, но Java Script позволява да съставяте текста, който ще изобразите, в момента на зареждане. Така например можете да проверявате колко е часът според компютъра на посетителя и да го приветствате с "Добър ден" или "Добро утро". Можете да преброите колко пъти е посещавал страницата ви и да му благодарите за завръщането. Ето прост код, който ще изпише датата и часа на последната промяна на текущата уеб страница: <script> var modified=document.lastModified document.write(modified) </script> При изпълнението би се получило следното: 05/23/2003 19:42:37 Java Script позволява да променяте най-различни елементи от уеб страницата. Ето например как можете да смените фоновия й цвят : <script> document.bgColor="red" </script> При изпълнение на този код фоновият свят на текущата уеб страница ще стане червен. Ако поставите инструкцията във функция, която викате с различни стойности за цвят ще можете да променяте многократно цвета на страницата след като тя вече се е заредила. Нека сега включим в играта и статус лентата на браузъра. <script> window.status="Здравейте и добре дошли!" </script>

Сега когато заредят страницата потребителите ще видят текста, изписан в лентата за статуса. Той обаче ще е неподвижен и ще стои там докато не бъде заредена друга страница. (вижте статус лентата на тази страница) Събития С помоща на javascript можете да следите какво става на страницата ви. Например посочването с мишката върху някаква картинка е събитие. Кликването върху картинката е друго събитие и т.н. Javascript обработва събитията с така наречените манипулатори на събития. Така при кликване ще се извика манипулатора onClick, при посочване onMouseover и т.н. Структурата на манипулаторите на събития е следния : onСъбитие=(оператори) Където Събитие е името на събитието, а в скобите са операторите които ще се изпълнят при възникване на събитието. Самия манипулатор на събитието може да бъде извън таговете <SCRIPT></SCRIPT> .Можете да го сложите например в така <А> . Вижте един пример, при който създаваме хипервръзка и като посочите с мишката върху нея се показва alert прозорец с обяснение за връзката: <A href="http://www4u.search.bg" onMouseOver="alert('HTML и JavaScript уроци!');return true;">WWW4U</A> Ако смените манипулатора OnMouseover със OnClick, alert прозореца ще се показва при кликване вместо при преминаване с мишката върху хипервръзката. Много добър пример със събитието onMouseover има в урока за href="http://www4u.search.bg/tips/rollmap/rollmap.phtml">rollover върху Image Map. Друго събитие е onMouseout. То настъпва когато курсорът на мишката вече не посочва върху обекта. С помоща на събитията onMouseover и onMouseout се правят така наречените rollover ефекти с картинки при които след посочване с мишката една картинка се заменя с друга. Но затова по нататък.. Освен събития свързани с движението на мишката, javascript обработва и събития свързани с отваряне и затваряне на прозорци, както и такива свързани с формуляри. Едно от събитията свързани с прозорците на браузъра е onLoad. То се извиква когато се зареди страницата. Ето например ако направите следната страница : <HTML> <BODY onLoad="alert('Здравейте!')" </BODY> </HTML> веднага след зареждането на страницата ще се появи alert прозорец с надпис "Здравейте!". Ако замените събитието onLoad със onUnload, което се извиква при напускане на страницата, "Здравейте!" ще се показва при затваряне на страницата. Нека променим горния пример така, че при отваряне на страницата да се показва "Здравейте!" а при затваряне "Довиждане!":

<HTML> <BODY> onLoad="alert('Здравейте!')" onUnload="alert('Довиждане!')" </BODY> </HTML> След затворяне прозореца на браузъра и ще видите съобщение "Довиждане!". Сигурно сте забелязали някои доста нагли сайтове, които отварят нов прозорец със друг сайт веднага щом се опитате да излезете от предишния. Те използват именно събитието onUnload. Друго събитие е onAbort. То настъпва когато прекъснете зареждането за страницата с бутона Stop на браузъра. Ето и някои други събития и обяснението за действията им: • onError - възниква при грешка в скрипта • onSelect - възниква при избиране (селектиране) на текст • onSubmit - възникава когато изпратите фурмуляр за обработка • onBlur - възниква при напускане на обект • onFocus - възниква когато обекта е на фокус • onChange - възниква когато се промени съдържанието на обекта (например

формуляр) Нека поусложним примера, добавяйки съобщение, което ще се появява само когато потребителят премине с показалеца на мишката си върху линк. Така когато посочи линкът PC World България в примерната уеб страница, посетителят няма да види в статус лентата URL (http://www.pcworld.bg), а изречението "Digital Lifestyle Magazine N1". <a href="http://www.pcworld.bg" onMouseover="window.status='Digital Lifestyle Magazine N1!';return true" onMouseout="window.status=''"> PC World България</a> PC World България За да уловим момента на показване - в случая поставянето на курсора върху линка и отдръпването му, използваме така наречените event handlers. Те се добавят директно в HTML таговете (като <a> в примера) и позволяват да изпълните някакви инструкции само в случаи на възникване на определено събитие - тоест при определено действие от страна на посетителя. Можете да видите списък със събитията, както и начините за прихващането им в таблицата, но ето още няколко примера. Abort Това събитие се случва тогава, когато потребителят спре зареждането на изображение(или страницата както вече споменахме).

<IMG SRC="http://server.com/pic.jpg" onAbort="alert('Спряхте зареждането на изображението!')"> Тук използваме метода alert за да изведем на екрана съобщението, че потребителят съзнателно е прустановил зареждането на картинката. Blur Това събитие се получава, когато активният елемент губи фокуса и става неактивен. Например при преминаване от едно текстово поле в друго. Може да се използва и за прозореца на браузъра, както и за отделни рамки. В този случай събитието се получава, когато съответният прозорец загуби фокуса. В този случай инструкцията се поставя в таг на елемента BODY: <BODY BGCOLOR='#ffffff' onBlur="document.bgcolor='#000000'"> Ето примерен код, който проверява дали потребителят е въвел коректна стойност в поле на форма : <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function valid(form){ var input=0; input=document.myform.data.value; if (input<5){ alert("Моля, въведете число по-голямо от 5"); } } </SCRIPT> </HEAD> <BODY> Въведете число, по-голямо от 5:<BR> <form name="myform"> <input type="text" name="data" value="" size="10" onBlur='valid(this.form)'> </form> </BODY> </HTML> По-подробно разяснение на използваните в примера похвати ще дадем в следващите части на самоучителя. Сега е важно да разберeте, че когато потребителят въвежда число в текстовото поле "data", то е "на фокус". При загуба на фокуса се задейства onBlur и се изпълнява функцията valid, която проверява дали числото е по-голямо от 5. Change

Събитието възниква тогава, когато потребителят промени стойността на елемент във форма - например текстово поле. Действието, извикано от onChange ще се изпълни тогава, когато активният и променен елемент загуби фокуса. <HTML> <HEAD><TITLE> Прихващане на променено текстово поле </TITLE> <SCRIPT LANGUAGE="JavaScript"> function valid(form){ var stoinost=0; stoinost=document.myform.data.value; alert("Новата стойност на полето е" + stoinost ); } </SCRIPT> </HEAD> <BODY BGCOLOR="FFFFFF" TEXT="000000"> Моля сменете стойността на полето по-долу:<BR> <form name="myform"> <input type="text" name="data" value="10" size="10" onBlur='valid(this.form)'> <input type="text" name="otherdata"> </form> </BODY> </HTML> След като потребителят въведе нова стойност в текстовото поле "data" и пожелае да започне попълване на полето "otherdata" или по някаква друга причина премести фокуса вън от първото поле, на екрана ще се визуализира съобщението "Новата стойност на полето е ...(нова стойност)". Загубата на фоксуа след промяна на стойността ще задейства onBlur и ще повика функцията valid (). Click Това събитие възниква, когато потребителят кликне с левия бутон на мишката върху съответния елемент на уеб страницата. За разлика от натискането на бутон или простото кликане върху линк, извикването на onClick би могло да върне FALSE, като по този начин преустанови изпълнението на съответните действия. По принцип може да се използва return за да се постигне някакъв ефект : <INPUT TYPE="submit" NAME="potvyrzdenie" VALUE="Izprati" onClick="return confirm(`Наистина ли искате да изпратите тези данни?')"> Нека допълним примера по-горе, като добавим бутон, чието натискане ще извиква функцията valid :

<HTML> ... <body bgcolor="FFFFFF" TEXT="000000"> Моля сменете стойността на полето по-долу:<BR> <form name="myform"> <input type="text" name="data" value="10" size="10"> <input type="text" name="otherdata"> <input type="button" value="Кликнете тук" onClick="valid(this.form)"> </form> </BODY> </HTML> DblClick Както личи от името, събитието DblClick възниква, когато потребителят кликне два пъти върху елемент от уеб страницата. Използва се доста рядко и потребителите не са свикнали да го срещат в Интернет приложения. Затова ще е добра идея изрично да посочите на посетителите, че е необходимо да кликнат бързо два пъти върху съответния елемент. <form> <input Type="button" Value="Кликнете два пъти!" onDblClick="alert('Вие кликнахте два пъти върху бутона!')"> </form> DragDrop В някои браузъри можете да засечете и извлачване на обект върху елемент от страницата, като например файл върху поле или върху прозореца на браузъра. Ето примерен код за втория случай : <BODY BGCOLOR="#FFFFFF" onDragDrop="alert('Вие извлачихте обект върху прозореца!')"> Разбира се простото съобщаване на този факт не е от голяма полза, но винаги можте да измислите по-интересни приложения на onDragDrop. Но все пак не залагайте само на него, защото в повечето браузъри той няма да се задейства.

Кратък Преговор Javascript има 4 вида данни: • Неопределен – NULL, • Булев • Числов • (Низов)Стрингов Булев тип – логически тип който приема стойности истина (true) или лъжа (false) Пример: Var BooleanValue=true; Var ThisBoolean=false; Числов тип – приема за стойности числа. Ще разгледаме само цели числа. Пример: var NumbericalValue=354; var One=1; Низов тип(стрингов)- приема за стойност нула или други символи. Пример: var String=”This is a String”; var ThisDocument=”Javascript Document”; Typeof Как можем да гледаме резултата от изпълнението на Javascript? Пример: var BooleanValue=true; var NumbericalValue=354; var String=”This is a String”; alert(typeof BooleanValue)//ще изпише “boolean”; alert(typeof NumbericalValue)//ще изпише “number”; alert(typeof StringValue) // ще изпише “String”; Защо са ни нужни обектите? Не само за да разберем по-добре как работи езика, но и за да можем в големи скриптове да си конструираме обекти, чийто методи да използваме. Обекти Javascript не е изцяло обектно ориентиран език като Java, но може да се подчинява на принципите на обектноориентиран език. Обектите в javascript се описват заедно със свойствата и методите им.

Javascript има в себе си много вградени обекти като Масив(Array), Изображение(Image), или Обект за дата(Data pbjects). Когато имаме Image Примерно: var Image1 = new Image(); Image1.src = ìmyDog.gifî;

Ние всъщност създаваме нов обект Image, а на втория му ред метода му src. Когато трябва да се извикват методи на някой обект (както в примера с src) се използва точкова структура (.). След като видяхе вградените обекти нека направим свой обект. function myFunc(){ } var myObject = new myFunc(); alert(typeof myObject); //ще покаже “object”; Вече създадохме един обект. В действителност ние създадохме myFunc обекта. Сега е време да направим инстанция на този обект: function myFunc(){ return 5; } var myObject = myFunc(); alert(typeof myObject); //ще покаже “number” В този случай ние присвоихме 5 на myObject. Тук е въпроса: Каква е разликата между тези два скрипта? Отговор: ключовата дума new. Тя казва на Javascript да създаде копие на обекта. Методи на обекта Какво е метод? Това е функцията която обекта може да изпълни.

Методите на обектите се отнасят до начина на изпълнението на самия обект. Нека да вземем за пример обект от реалния свят, какъвто е прозореца. Методите на обекта прозорец ще бъдат отваряне и затваряне, а свойствата му например ширина и височина. В javascript нещата не са по-различни. Ето например ние досега използвахме един обект заедно със метода му в почти всички примери дотук. Това е обекта document заедно със метода му write. И докато в разговорния език можем да обясним обекта със свойствата и методите му като кажем "широкия прозорец се отваря", в javascript за тази цел се използва разделител точка "." (document.write , image.border и т.н.) Сега ще разгледаме по-подробно някои обекти в javascript за да разберем за какво става дума. Може би най-често срещания обект в javascript и прозореца на браузъра. Той носи името window. С помощта на javascript можете да го отваряте, затваряте, както и да правите други работи с него. Вижте например най-долната лента в прозореца на браузъра. Тя се нарича статус-бар (status bar). В нея се описва моментното състояние на браузъра, като скорост на връзката (при Netscape) URL на който се намирате в момента и т.н. Вие можете да променяте информацията в статус-бара с помощта на свойството status на обекта window. Вижте как става това :

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> window.status="statusbar" </SCRIPT> <BODY> </BODY> </HTML> Реда window.status променя стойноста на статусбара. Така например можете да направите надписа в статус бара да бъде заглавието на страницата ви. Вижте href="http://www4u.search.bg/javascript/example/ex9.html" За разлика от свойствата на обектите, методите описват действията които могат да се извършват с тях. Методи са open, write и т.н. Ако сравняваме javascript с разговорния език, обектите са съществителните, свойствата на обектите са прилагателни, а методите на обектите са глаголи (те в действителност са си глаголи, open, close, write, click, sort, concat и т.н.) Да разгледаме метода open на обекта window. Този метод отваря нов прозорец. Синтаксиса му е window.open() , като в скобите се слага URL на адреса който трябва да се отвори с новия прозорец. В следващия пример ще сложиме на екрана картинка и при посочване с мишката върху нея ще се отваря нов прозорец с адрес www4u.search.bg: <HTML> <BODY> <IMG src="clickme.jpg" onMouseover="window.open('http://www4u.search.bg')"> </BODY> </HTML> В този случай при настъпването на събитието onMouseover се отваря нов прозорец (виж урок href="http://www4u.search.bg/javascript/javascript_events.phtml">събития). Ето и някои от най-често срещаните обекти заедно с методите и свойствата им: Обект Свойства методи Document bgColor

image location title

write writeln open

Image border height width src

Window Ocation history

vAlign=top>close open

frames name

prompt scroll

Пример:(за Методи на обекта) Първо ще дефинираме Обект Circle. След това ще направим функции и чак след това ще ги направим методи на обекта. Нека да дефинираме Circle: function Circle(radius){ this.radius = radius; } var bigCircle = new Circle(100); var smallCircle = new Circle(2); //Сега, нека да дефинираме няколко функции, които ще използваме по //късно. function getArea(){ return (this.radius*this.radius*3.14); } function getCircumference(){ var diameter = this.radius*2; var circumference = diameter*3.14; return circumference; } //Сега, нека да променим конструкцията на обекта Circle. function Circle(radius){ this.radius = radius; this.getArea = getArea; this.getCircumference = getCircumference; } По този начин се присвояват функциите getArea и getCircumference към нашия обект, правейки ги по този начин методи-функции принадлежащи към обекта Circle. Може да ползваме методите както всяка нормална функция, но трябва първода имаме достъп до обекта на който принадлежи функцията. Звучи малко заплетено, но ето сега и примерите които ще направят всичко по-ясно: alert(bigCircle.getArea()); // ще покаже 31400 alert(bigCircle.getCircumference()); // ще покаже 618 alert(smallCircle.getArea()); // ще покаже 12.56 alert(smallCircle.getCircumference());ще покаже 12.56 Оператори, свързани с обектите Всеки таг в 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] Определяне типа на браузера Както е известно браузерите са извесрни с това че всеки “тълкува” като си иска HTML-a. Един и същ код може да се окаже “различен” във всеки от браузерите. За да се получи еднакъв резултат, трябва да се пише различен код за всеки различен браузер. И ето тук се оказва нужда от една функция, която да разпознава какъв браузер ползва клиентът, който влиза в сайта ви. Разбира се това става много просто, използвайки Javascript. Нужно е да се разбере свойството appName на обекта navigator. Точно затова, разбирайки стойността на navigator.appVersion, разбираме и версията му.

А ето и малко код, който е основен в такиви случаи: var browser_name = navigator.appName; var browser_version = parseFloat(navigator.appVersion); По принцип това може да се ползва, за да пишем код, който да се изпълнява в зависимост от типа на браузера. Но може да се направи нещо за подобрение на идеята на този код – да се определи една глобална променлива – например browser_ok и в зависимост от резултата на проверката, на получените по-горе променливи browser_name и browser_version се присвоява стойност true (ако резултатът на удовлетворява дадено условие) или false (в противен случай). Защо го правим толкова сложно? Отговор: За опростяване на сложни функции и избягване на повторни проверки. Ето и кодът, за който изговорихме толкова думи като му поставим условие браузера да бъде Internet Explorer или Nerscape Navigator с версия не по ниска от 4: var browser_ok = false; if (browser_name == “Netscape” && browser_version >= 4.0) browser_ok = ‘true’; else if (browser_name == “Microsoft Internet Explorer” && browser_version>= 4.0) browser_ok = ‘true’; Разбира се, че това може да бъде много по-сложно, но това не е целта на тази статия. Освен всички тези неща можете да проверите използваните цветове, какви плъгини използва браузера, ширината на екрана. И така след като получихте изхода от предния код можете да напишете функция която да ползва флага. function somefunction() { if (browser_ok == true) { //тука кода който трябва да се изпълни } } Датата на модификация на файла Някои web-дизайнери намират за полезно да слагат на сайта си датата на последната модификация на файла. Ето и как става това, с риск, че ако го ползвате и датата е стара ще предизвика неприятно впечатление у потребителите. Как да направим това? Използвайки свойството lastModified на обекта document. Затова трябва на необходимото място в страницата си да поставите следния код: <script language=JavaScript> <!-- document.write (“Дата на последна модификация” + document.lastModified); //--> </script> Как да направим стартова страница? В последно време стана доста модно да се ползва такъв скрипт и затова ше ви покажа как става. Целта е всеки път когато потребителя изпълнил този код да зарежда вашата страница. А той ще изглежда така:

<p><a href=”#” onClick=”this.style.behavior=’url(#default#homepage)’; this.setHomePage(ëhttp://www.yoursite.com/í);

return false;”>Направете стартова страница</a></p> Работа с 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. Едно от нещата, които пак ще направим, е да отворим един нов прозорец. Създаваме една функция, която при изпълнението си отваря нов прозорец и насочва браузера ви към ‘bla.html’ <html> <head> <script language=”JavaScript”> <!-- hide function openWin() { myWin= open(“bla.htm”); } // --> </script> След това правим една форма, в която има бутон, при натискането на който се извиква функцията, написана по-горе. Тя отваря нов прозорец:

</head> <body> <form> <input type=”button” value=”Отвори нов прозорец” onClick=”openWin()”> </form> </body> </html> Има много други полезни скриптове и функции и някои от тях са дадени като примери или примерни задачи. Проблемът на този език е, че зависи от версията на браузера и от много други фактори, но това не пречи да се научат основите на този език, който спестява много работа. Вградени обекти 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() връща тангенс от подадения му аргумент Използване на обекта String Винаги, когато присвояваме стойност от тип string на променлива, се създава обект String. Константите от тип string също са обекти от тип String. Например: mystring = "Hello, World!" създава обект тип String наречен mystring. Обектът String има методи, които променят свойства на String или изпълняват HTML форматиране на String като например bold или link: Пример: Свойства на обекта String Методи на обекта String string .toLowerCase()

string .toUpperCase() string .indexOf(searchString [, startIndex]) string .lastIndexOf(searchString [, startIndex]) string .charAt(index) string .substring(indexA , indexB) string .anchor("anchorName") string .big() string .blink()

string.length string .bold() string .fixed() string .fontcolor(colorValue) string .fontsize(integer1to7) string .italics() string .link(locationOrURL) string .small()

string .strike() string .sub() string .sup()

Използване на обекта Math. Обектът Math има за свойства и методи математически константи и функции. Например Math.PI връща 3.14……. Math.sin(1.56) връща sin(1.56), където аргументът е в радиани. Свойства на обекта Math: Методи на обекта Math: Math.abs(val)

Math.acos(val) Math.asin(val) Math.atan(val) Math.ceil(val)

Math.E Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Math.PI Math.SQRT1_2 Math.SQRT2

Math.cos(val) Math.exp(val) Math.floor(val) Math.log(val) Math.max(val1, val2) Math.min(val1, val2) Math.pow(val1, val2) Math.random()* Math.round(val) Math.sin(val) Math.sqrt(val) Math.tan(val)

Math.PI - Константа представляваща математическото число пи.

Math.max ( num1, num2 ) - намира по-голямото от числата Math.min ( num1, num2 ) - намира по-малкото от числата Math.pow ( num1, num2 ) - повдига числото num1 на степен num2 Math.random - връща случайно число Math.ceil (num) - връща най-малкото цяло число по-голямо или равно на num Math.floor (num) - връща най-голямото цяло число по-малко или равно на num

С обекта math може да se използва оператора за присъединяване with. Тогава не се налага записване на "Math" пред имената на използваните методи и свойства на обекта. Свойства (properties) на обекта document

document.bgColor - задава цвят на фона на текущия документ. Стойностите му се задават както на атрибута BGCOLOR; document.fdColor - задават цвят на текущия документ; document.vlinkColor - задава цвят на избрана вече хипервръзка; document.title - задава съдържанието на текста, който се изобразява като заглавие; document.referrer - задава низ, съдържащ URL на документа, извикал текущия документ. С помощта на този атрибут може да намерите адреса (URL) на документа, който е извикал вашият документ. С други думи този атрибут показва от къде са ви посетили; document.forms - задава масив, съдържащ всички форми в документа; document.links - задава масив, съдържащ всички картинки в документа. Индексите в тези масив се изменят от 0 до n-1. Например ако в документа е имало 3 картинки, към тях може да се обърнем съответно с document.images[0], document.images[1], document.images[2]. document.URL - връща текущия адрес на документа

Свойства на обекта Window Window.closed() - връща true, ако прозорецът е затворен и false ако е отворен; DefaultStatus (message) - променя съдържанието в линията на състоянието на прозореца, като го замества с низа message; Window.frames - задава масив, съдържащ всички фреймове в един прозорец. confirm("message") - Тази функция изкарва прозорец, съдържащ текста message

(обикновено въпрос) и бутони OK и Cancel. Зареждане на скриптове от файл Можете да отделите скрипта от .html документа и да го сложите в отделен файл.

Това е подходящо за големи скриптове, тъй като става по-лесна работата със самия HTML документ. Подходящо е и ако един и същи скрипт трябва да присъства в множество страници, тъй като спестява пренаписването му. За целта всичко между отварящия и затварящия таг <SCRIPT> се отделя във файл с разширение .js, а на самия таг <SCRIPT> се добавя атрибута SRC със стойност файлът, съдържащ скрипта. Например ако скрипра се намира във файл library.js, кода за вграждането му ще бъде следния: <SCRIPT LANGUAGE="JavaScript" SRC="library.js"> </SCRIPT> (Така ако се наложи да направите някаква промяна, ще трябва да редактирате само един, а не множество файлове. От друга страна кодът в уеб страниците става по-чист и ясен.) За да използвате JS код, съхранен в самостоятелен .js файл, поставяте същия таг <SCRIPT>, но този път с атрибут SRC, който посочва точното местоположение на скрипта :

<HEAD> <TITLE>Тест</TITLE> <SCRIPT SRC="code.js"></SCRIPT> </HEAD> Не забравяйте затварящия таг </SCRIPT>, защото това ще създаде проблеми.

Браузърът няма да обработи инструкциите, затворени в SCRIPT със SRC=, освен ако не успее да намери нужния .js файл. Затова е нужно да поставяте затварящия таг, за да укажете края на скриптовия код.

Малко отклонение - по принцип сте длъжни да затваряте празните елементи в HTML, макар че това не винаги се прави. Все пак правилното изписване на <br> е <br /> - тоест празният елемент се изобразява със самозатварящ се таг. Дори и да не спазите това, браузърът ще покаже HTML кода правилно, тъй като е направен да бъде толерантен към грешките на уебмастерите. Но в определени случаи като този, пропуснатото затваряне на празния елемент ще създаде проблеми. Забележете, че външният файл трябвa да има разширение .js и в никакъв случай не

трябва да съдържа изрази, които не са ясни за JS интерпретатора, тоест - никакъв HTML или каквото и да било друго. Можете да се подсигурите срещу грешки, включвайки алтернатвен код, който да се изпълни ако външния файл не бъде открит : <SCRIPT SRC="code.js"> <!--- Крием скрипта от старите браузъри document.write("Файлът с JS код не бе открит!") // и тук спираме да се крием --> </SCRIPT> Сега ако браузърът не открие code.js в същата директория, в която се намира HTML

файла, той ще изведе на екрана съобщението, което сме посочили. Можете да използвате не само относителен път, но и пълното URL на js файла : <SCRIPT SRC="http://www.mysite.com/dir/code.js"> NOSCRIPT Можете да използвате NOSCRIPT тага за да включите HTML код, който ще се

изпълни от браузърите, неподдържащи Java Script. Съдържанието там ще бъде игнорирано от по-новите браузъри. Освен ако потребителите съзнателно не са настроили браузъра си така, че да не поддържа JS. Ето примерно приложение на този таг:

<SCRIPT SRC="code.js"> <!--- Крием скрипта от старите браузъри document.write("Файлът с JS код не бе открит!") // и тук спираме да се крием --> </SCRIPT> <NOSCRIPT><font color="red"><b>Тази страница използва Java Script, но Вашият браузър не го поддържа!</b></font></NOSCRIPT>... 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>

Windiw & Frame функции

Функции на документа Свойства

.name alert(); close(); confirm(); setTimeout(,); prompt();

document.clear(); document.close(); document.write(); document.writleln();

onBlur= onClick= оnChange= onFocus= onLoad= onMouseout= onSelect= onSubmit= onUnload=

Стрингови функции Математически функции

и константи Функции за време

.length

.anchor();

.link();

.big();

.small();

.blink();

.bold();

.italics();

.strike();

.sub();

.sup();

.fontColor();

.fontSize();

.charAt();

.indexof (,);

.lastindexof(,);

.substring (,);

.toUpperCase();

.toLowerCase();

Math.E Math.LN10 Math.LN Math.SQRT1_2 Math.SQRT2 Math.PI Math.ceil(); Math.floor(); Math.round(); Math.min(,); Math.max(,); Math.pow(,); Math.sqrt(); Math.sin(); Math.asin(); Math.cos(); Math.acos(); Math.tan(); Math.atan();

.getDate();

.getYear();

.getMonth();

.getHours();

.getMinutes();

.getSeconds();

.getTime();

.setYear();

.setDate();

.setMonth();

.setHours();

.setMinutes();

.setSeconds();

Примерни задачи Пример1:(за математически операции)

Нека да направим един скрипт в който въвеждате годината в която сте родени, след това да изчислява на колко години ще бъдете през 2010 година и най-накрая да се отваря прозорец който да съобщава резултата <HTML> <HEAD> <TITLE>javascript</TITLE> <HEAD> <BODY> <SCRIPT LANGUAGE="javascript"> <!-- var year=prompt("Въведете година на раждане","1980") old=2010-year alert("През 2010 година Вие ще бъдете на "+old+" години") //--> </SCRIPT> </BODY> </HTML> var е друг начин да се обявяват променливите (var name="Ivan" , var number=14). Със prompt се отваря прозорец с поле, в което можете да въвеждате информация. Структурата на prompt е следната - prompt("message","value") където message е съобщението което ще се появи заедно с прозореца, а value е някаква начална стойност. Можете да пропуснете value, тогава полето ще бъде празно. В примера чрез prompt присвояваме на year стойноста която ще напишете в полето. В следващия ред създаваме променлива old на която присвояваме стойност 2010 минус стойноста на year. Ако оставите в полето по подразбиране числото 1980, то тогава year ще бъде равно на 1980, а old на 30 (2010-1980). И най-накрая извеждаме съобщение, че през 2010 г. вие ще бъдете на old години, като променливата old се заменя от стойноста и. Вижте как работи този скрипт href="http://www4u.search.bg/javascript/example/ex1.htm">ТУК! Самото съобщение се извежда с alert прозорец (alert("През 2010 година Вие ще бъдете на "+old+" години")). Този примерен скрипт не прави проверка за верноста на въведените от потребителя данни, така че ако въведете някакъв стринг вместо число скрипта ще даде грешка. Други аритметични операции с променливи са събиране с едно (x++) и изваждена с едно (x--). x++ е същото като x=x+1, а x-- като x=x-1. Ако например променливата x има стойност 5, след x++ x ще е равно на 6. Ако присвоявате стойноста на x на друга променлива, например y и в същото време увеличите x с едно, стойноста на двете променливи ще бъде една и съща. y=x++ ..така

x и y ще бъдат с еднаква стойност. Ако напишете обаче : y=++x .. y ще приеме стойноста на x и чак след това x ще се увеличи с 1. Значи да приемем че x=10. Тогава при y=x++ x ще стане 11 и y ще стане 11. Ако напишем y=++x тогава y ще стане 10, а x 11. Пример2: (за Булеви изрази) Проверява дали рожденната дата не е преди 1900 година и след 2003 година: <HTML> <HEAD> <TITLE>JavaScript EXAMPLE 1</TITLE> <HEAD> <BODY> <SCRIPT LANGUAGE="javascript"> <!-- var year=prompt("Въведете година на раждане","1980") if (year<1900) document.write("На вашата възраст не е здравословно да седите пред компютъра") else if (year>2003) document.write("Още не роден, а вече учи JavaScript:-)") else { old=2010-year document.write("През 2010 година ще бъдете на "+old+" години") } //--> </SCRIPT> </BODY> </HTML> От примера виждате, че условните оператори могат да се влагат един в друг. Първо проверяваме дали въведената година не е по-малка от 1900 и ако е така, изписваме съответното съобщение. Ако условието не отговаря правим втора проверка дали годината е по-голяма от 2003. Ако това условие отговаря на истината се извежда друго съобщение. Ако не отговаря на истината се счита че годината е между 1900 и 2003 и се показва трето съобшение.

Пример3: Скрипта работи и с най-новата версия на Navigator (6.1). Забранява се right mouse click-a, като не се появява alert message. Едва ли е особено полезно, но е ефектно. Ето го и скрипта: <script language=JavaScript> var message=""; function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function("return false") </script> Пример4: Александър Сандев 11. 02. 2003 Промяна на текста в статус бар-а при поставяне на курсора върху нещо. За линк-ове се добавя в <A>. <A HREF=URL ONMOUSEOUT="WINDOW.STATUS='';RETURN TRUE" ONMOUSEOVER="WINDOW.STATUS='текст';RETURN TRUE"> Пример5: Скрипт за забраняване селектирането на текст 31. 08. 2001..boddhi <script language="JavaScript1.2"> function disableselect(e){ return false } function reEnable(){ return true

} //IE4+ document.onselectstart=new Function ("return false") //NS6 if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script> Пример6: За смяна шрифта на линк, когато мишката застане върху него Николай Петков 27. 06. 2002 Следните редове се поставят в <HEAD>: <STYLE fprolloverstyle> A:hover {text-decoration: none; color: red; font-weight: bold} </STYLE> А тези където изкате в <BODY> заедно с линка (тук той е примерен): <HR size=2 > <P align="center"><FONT face="Times New Roman">Send mail to <FONT color="#003399"> <A href="mailto:nikolai_petkov@abv.bg?subject=From web site!"> NPetkov</A><B> </B> Пример7: Часовник <script language="JavaScript"> <!— // made by: Nicolas - http://www.javascript-page.com var clockID = 0; function UpdateClock() { if(clockID) { clearTimeout(clockID); clockID = 0; } var tDate = new Date(); document.theClock.theTime.value = ""

+ tDate.getHours() + ":" + tDate.getMinutes() + ":" + tDate.getSeconds(); clockID = setTimeout("UpdateClock()", 1000); } function StartClock() { clockID = setTimeout("UpdateClock()", 500); } function KillClock() { if(clockID) { clearTimeout(clockID); clockID = 0; } } //--> </script> <body onload="StartClock()" onunload="KillClock()"> <center><form name="theClock"> <input type=text name="theTime" size=8> <form></center> Пример8: Друг часовник <script LANGUAGE="JavaScript"> function funClock() { if (!document.layers && !document.all) return; var runTime = new Date(); var hours = runTime.getHours(); var minutes = runTime.getMinutes(); var seconds = runTime.getSeconds(); nadpis='Dobar ve4er'; if (hours == 24) {hours = 0;} if (minutes <= 9) {minutes = "0" + minutes;} if (minutes >= 18) {nadpis=' ';} if (seconds <= 9) {seconds = "0" + seconds;} movingtime = "<b>"+ hours + ":" + minutes + ":" + seconds + ""+ nadpis + "</b>"; if (document.layers) { document.layers.clock.document.write(movingtime); document.layers.clock.document.close(); } else if (document.all) { clock.innerHTML = movingtime;

} setTimeout("funClock()", 1000) } window.onload = funClock; </script> <span id=clock style="position:relative;"></span> Пример9: Маркирва всичко в зоната на textarea <html> <head> <script language="Javascript"> <!-- /*Безплатни Java script кодове от http://hitscripts.hit.bg*/ //specify whether contents should be auto copied to clipboard (memory) //Applies only to IE 4+ //0=no, 1=yes var copytoclip=1 function HighlightAll(theField) { var tempval=eval("document."+theField) tempval.focus() tempval.select() if (document.all&&copytoclip==1){ therange=tempval.createTextRange() therange.execCommand("Copy") window.status="Contents highlighted and copied to clipboard!" setTimeout("window.status=''",1800) } } //--> </script></head> <body> <form name="test"> <a href="javascript:HighlightAll('test.select1')">Маркирай всичко</a><br>

<textarea name="select1" rows=10 cols=35 > Можете да накарате посетителите ви да маркират всичко в тази кутия и да я копират разбира се.... опитайте…</textarea></form> </body> </html> Пример10: Тази страница ви казава да си смените резолюцията иначе няма да виждате добре страницата. Може да опитате да промените кода примерно ако резолюцията е еди каква си да се отвори еди каква си страница за тази резолюция. <html> <body> <script language="JavaScript1.2"> <!— /* безплатни Java script кодове от http://hitscripts.hit.bg */ var correctwidth=800 var correctheight=600 if (screen.width!=correctwidth||screen.height!=correctheight) document.write("Тази страница е най удобно да се разглежда с "+correctwidth+"*"+correctheight+". Вашата резолюзия в момента е "+screen.width+"*"+screen.height+". Ако е възможно сменете резолюцията на екрана си!") //--> </script> </body> </html> Пример11: С този пример може да се максимизира страницата на браузера. <html> <head> <script language="JavaScript1.2"> <!--

/* безплатни Java script кодове от http://hitscripts.hit.bg */ window.moveTo(0,0); if (document.all) { top.window.resizeTo(screen.availWidth,screen.availHeight); } else if (document.layers||document.getElementById) { if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){ top.window.outerHeight = screen.availHeight; top.window.outerWidth = screen.availWidth; } } //--> </script> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor="#FFFFFF" text="#000000"> Максимизира страницата при влизането и </body> </html> Пример12:( Извличане на стойностите или работа с браузерите ) <script> document.write("<li><b>AppCodeName:</b> "+navigator.appCodeName+"<br>") document.write("<li><b>AppName:</b> "+navigator.appName+"<br>") document.write("<li><b>AppVersion:</b> "+navigator.appVersion+"<br>") document.write("<li><b>UserAgent:</b> "+navigator.userAgent+"<br>") document.write("<li><b>Platform:</b> "+navigator.platform+"<br>") </script> За да изпишем на екрана текст чрез JS използваме метода "write" на обекта "document". Обърнете внимание на знака "+" чрез който съединяваме няколко низа в един. В случая събираме три отделни парчета - начален и краен HTML маркъп, а в средата е неизвестната ни стойност.

Достъпът до свойствата на един обект в JS се осъществява по същия начин, както и до методите му. Записът е "метод.свойство". Така "navigator.userAgent" ни дава стойността на свойството "userAgent" на обекта "navigator". Малко отклонение Забележете, че всичко това се случва при клиента, така че вие нямате пряк достъп до тези данни. Ако искате да разберете какви браузъри ползват вашите посетители, не можете да го направите чрез Java Script. Освен ако не поставите тези стойности във форма и след това накарате посетителя да я изпрати. В тази особеност се крие и най-големия проблем с използването на Java Script. Ако искате да предложите на посетителите различен код, в зависимост от използвания от тях браузър, то така или иначе трябва да изпратите всичките си варианти. Така ако сте приготвили три вариации на кода си - за IE, Netscape и Opera, посетителят ще трябва да изтегли и трите, защото Java Script не може да каже на сървъра кой точно вариант да изпрати. Както вече стана дума, доброто възпитание изисква да пестите трафика на юзърите, както и своя, затова е по-добре да намерите по-културно решение. Тук ситуацията е подобна на тази с JS кода за валидиране на форми. Грозно е да очаквате, че всичките ви посетители са идиоти и да ги карате да изтеглят Java Script кода за проверка на всяко поле плюс съответните ви съобщения за грешки. Слава богу все повече уеб билдери осъзнават, че това са неща, които трябва да се правят от страната на сървъра. Все пак JS дава възможност да обработите културно информацията за браузъра на посетителя, така че да реагирате адекватно дори да не може да използвата server-side технология. Как може да стане това ще покажем по-късно, когато стане дума за свойството "location" на обекта "window". Проверки Най-често използвания начин за уточняване на потребителския браузър са свойствата "appName" и "appVersion". Например : //проверка за Netscape 4.7+ if (navigator.appName=="Netscape"&&parseFloat(navigator.appVersion)>=4.7) alert("Вие ползвате Netscape 4.7+") Тук използвахме метода parseFloat(string), който се използва за извличане на числа с плаваща запетая от изрази. Ако по някаква причина входящият низ не може да се конвертира в такова число, връща NaN (Not-A-Number) или 0. Ако срещне символ, който е различен от число, "+", "-", десетична запетая или експокнента, връща стойността до този символ, игнорирайки всички последващи. Сега ще използваме пример от документацията на Netscape и ще кажем, че всички следващи изрази ще върнат 3,14 : parseFloat("3.14")

parseFloat("314e-2") parseFloat("0.0314E+2") var x = "3.14" parseFloat(x) Ето този обаче ще върне NaN: parseFloat("FF2") Засичането на Internet Explorer е малко по-трудна задача, най-вече поради факта, че IE разполага по друг начин информацията си в AppVersion. Например тя може да изглежда така : 4.0 (compatible; MSIE 5.5; Windows 98) Ако се опитаме да подадем този израз на parseFloat, ще получим "4.0" вместо необходимото ни "5.5". Няма универсално решение на този проблем, като всичко се решава от различните низови методи. Например низ.indexOf() може да ни е от полза, ако търсим определена версия на браузъра : //проверка за IE 5.5 if (navigator.appVersion.indexOf()!=-1) alert("Вие ползвате IE 5.5!") Без да влизаме в подробни обяснения ще уточним, че indexOf() търси местоположението на определен низ (в случая "MSIE 5.5") в рамките на този, който го е повикал (в случая "navigator.appVersion"). Ако не успее да го намери, връща "-1". Това е и смисълът на проверката, която направихме току що. Пример13:Създаване на менюта с JavaScript Добре направеното меню е едно от основните неща в дизайна на един сайт. JavaScript често се използва за създаване на интерактивни менюта - потъващи бутони, разширяващи се менюта или просто анимирани менюта. Тук ще разгледаме основните типове менюта: - Меню с различни състояния на бутоние (Натиснат/Ненатиснат) Първо трябва да се създадат бутоните. За всеки бутон са необходими две изображения - едно с ефект на изпъкналост и едно с ефект на потънал бутон. Когато бутона е правоъгълен, този ефект се постига изключително лесно. Всичко което трябва да направим е да оставим двелинии (о 1 пиксел широки) по края на бутона. За едното състояние оцветяваме линиите долу и в дясно в черно, а горе и в ляво в сиво. За другото разменяме цветовете: //webdesign.gif - webdesign2.gif

Необходим ни е скрипт, който при натискането на бутон да го прави потънал, а всички останали - вдлъбнати. И за да не се зареждат всеки път всички изображения, скриптът трябва потъналия бутон да направи изпъкнал, а този който сме натиснали - потънал. Съотвтено ни е необходима функция, която приема за параметър номера на бутона който я е извикал. Ако оизползваме ID на таговете *IMG* съответно image1, image2, image3 и image4, а файловете с изображенията съответно img1.gif, img1a.gif, img2.gif, img2a.gif, img3.gif, img3a.gif, img4.gif и img4a.gif, то нашия скрипт ще бъде: <SCRIPT LANGUAGE="JavaScript"> function changeState(num){ if (image1.src=="img1a.gif"){image1.src=="img1.gif"} if (image2.src=="img2a.gif"){image1.src=="img2.gif"} if (image3.src=="img3a.gif"){image1.src=="img3.gif"} if (image4.src=="img4a.gif"){image1.src=="img4.gif"} if (num==1){image1.src="img1a.gif} if (num==2){image2.src="img2a.gif} if (num==3){image3.src="img3a.gif} if (num==4){image4.src="img4a.gif} } < /SCRIPT> Всичко необходимо за създаване на менюто е всеки бутон при събитие onclick да извиква функцията changeState със съответния параметър. - Създаване на меню с променящ се цвят на фона на активния елемент Менюто с потъващите бутони изглежда много добре, но тъй като ползва изображения може да е тромаво при по-бавна връзка. Освен това не е удобно, ако има множество елементи. Едно стилно, леко и лесно създаващо се меню е това, при което цвета на фона на елемента, над който е курсора, е различен. Това меню се създава изключително просто. Всичко което трябва да направите е да подредите елементите в таблица и да използвате следната обработка на събитията onmouseover и onmouseout на полетата: onmouseover="this.bgcolor='newcolour'" onmouseout="this.bgcolor='oldcolour'" където oldcolour и newcolour са двата цвята които искате да използвате -Създаване на разширяващи се менюта Разширяващите се менюта са изключително полезни, когато имате множество елементи, които искате да подредите в категории. За създаването им се използва

комбинация от CSS и JavaScript, като се създават два класа - един при който елемента е видим и друг, при който е невидим. Работата на скрипта е само да следи кои елементи са видими и да променя класовете при необходимост. Съотвтено се създава по една функция за всяка група, която извежда елементите, ако не са изведени, или ги скрива, ако са изведени. Проблемът е, че така могат да бъдат отворени всички групи едновременно и потребителя отново ще трябва да търси къде точно е необходимия му елемент. Затова преди да отвори елементите в някое раздел, скриптът трябва да затворти елементите във всички останали. Тъй като самите функции за извеждане на елментите ги скриват, ако те веча са изведени, то нашия скриопт трябва да извиква функциите на тези раздели, в които има изведен елемент от групата. Проблемът е как да не се попадне в рекурсия. Съответно, ако анализираме кода на необходимя скрипт, то той ще се състои от: n брой функции, извиквани при събитието onclick на съответната група 1 функция, приемаща параметър номер на функцията, която я е извикала, и извикваща измежду всички останали функции (изключая тази, която я е извикала), тези, чиито групи имат отворени елементи. Проблемът е с извикването на тази функция. Ако просто от всяка друга първо извикваме тази, а после променяме елементите, то тази функция ще се извиква сама себе си, докато не затвори всички менюта. Тъй като в един момент всички менюта са затворени, тя ще спре да извиква сама себе си, но тук въпроса е на оптимизация на кода. Скриптовете трябва да се пишат максимално малки и бързо изпълними. Затова ще използваме променлива, указваща дали функцията в момента се изпълнява. Нека приемем че имаме 4 раздела, първия и последния с по 4 елемента, останалите с по 3. Разделите кръщаваме sectiona, sectionb, sectionc и sectiond, а елементите от тях - с името на раздела и съответен номер. Съответно имаме нужда от два класа: <STYLE> .on {display: on} .off {display: none} < /STYLE> Всеки от разделите е клас "on", всеки от елементите в тях - "off". При шракване разделите извикват съответно функциите doSectionA(), doSectionB(), doSectionC() или doSectionD(). Ето го и необходимия скрипт: <SCRIPT LANGUAGE="JavaScript"> var running = 0 function doSectionClose(num){ running = 1; if (sectiona1.className=="on" && num!=1){doSectionA()} if (sectionb1.className=="on" && num!=2){doSectionB()} if (sectionc1.className=="on" && num!=3){doSectionC()} if (sectiond1.className=="on" && num!=4){doSectionD()} running = 0

} doSectionA(){ if (running==0){doSectionClose(1)} if (sectiona1.className=="off"){ sectiona1.className="on" sectiona2.className="on" sectiona3.className="on" sectiona4.className="on" } else { sectiona1.className="off" sectiona2.className="off" sectiona3.className="off" sectiona4.className="off" } } doSectionB(){ if (running==0){doSectionClose(2)} if (sectiona1.className=="off"){ sectionb1.className="on" sectionb2.className="on" sectionb3.className="on" } else { sectionb1.className="off" sectionb2.className="off" sectionb3.className="off" } } doSectionC(){ if (running==0){doSectionClose(3)} if (sectionc1.className=="off"){ sectionc1.className="on" sectionc2.className="on" sectionc3.className="on" } else { sectionc1.className="off"

sectionc2.className="off" sectionc3.className="off" } } doSectionD(){ if (running==0){doSectionClose(4)} if (sectiond1.className=="off"){ sectiond1.className="on" sectiond2.className="on" sectiond3.className="on" sectiond4.className="on" } else { sectiond1.className="off" sectiond2.className="off" sectiond3.className="off" sectiond4.className="off" } } < /SCRIPT> В заключение ще кажем, че JavaScript e незаменим при създаването на меню за вашите сайтове. Ако се поразровите из интернет, ще откриете безброй много готови скриптове, които можете да промените по ваше желание според нуждите ви - има стотици сайтове с безплатни такива.

МУЛТИМЕДИЯ С развиването на компютърните системи, мултимедията се превърна в една от основните теми, както за разработчиците, така и за потребителите. Някои WEB дизайнери може би биха желали да сложат презентация на своята фирма, която е във видео клип. А може би просто искат да добавят видео към своя сайт. Или звукови ефекти? Всичко това е възможно със средствата на DynamicHTML. Добавяне на мултимедия Мултимедийни файлове се добавят чрез таговете <OBJECT> и <EMBED>. Трябва да имате предвид, че Internet Explorer поддържа само тага <OBJECT>, а Netscape Navigator - само <EMBED>. В много отношения тези два тага си приличат, но имат известна разлика. По надолу са разгледани подробно и двата. Принципно повечето от програмите за разработка на мултимедия и WEB презентации, създават сами HTML кода за вграждане на файла, но ако решите да го пишете на ръка, трябва да включите и двата тага, за да можете да предоставите съдържанието на вашата страница на всички потребители. Тагът <EMBED> се включва в <OBJECT>, преди затварящия таг. EMBED Този таг поддържа различни атрибути, взависимост от типа на файла. Тук ще разгледаме само общите: SRC - указва пътя към мултимедийния файл. WIDTH - указва ширината, която да заема филма HEIGHT - указва височината на филма PLUGINSPAGE - указва адреса, от който браузъра да си изтегли необходимия plug-in, ако няма инсталиран на компютъра. TYPE указва типа MIME на файла OBJECT За разлика от предишния таг, този поддържа не само множество атрибути, но и няколко <PARAM> тага. Първо ще разгледаме атрибутите, а след това ще <PARAM> таговете ще бъдат разгледани по-подробно. CLASSID - указва уникалния идентификационен код на ActiveX контролата. CODEBASE - определя местоположението (URL) на инсталатора на ActiveX контролата, необходима за изпълнението на файла, ако тя не е инсталирана на компютъра. WIDTH - указва ширината, която да заема филма HEIGHT - указва височината на филма

Следват няколко поредни тага <PARAM>. Този таг не се нуждае от затварящ таг и има два атрибута - NAME и VALUE. И двата са задължителни. NAME указва типа на тага, или по-скоро на това което определя, а VALUE съответната стойност. Тъй като можете да използвате само една двойка NAME-VALUE във всеки таг, трябва да дефинирате толкова <PARAM> тага, колкото свойства ще определите. Всеки файл си има собствен набор <PARAM>. Тук ще разгледаме само общите за повечето типове мултимедийни файлове: NAME VALUE Описание MOVIE Пътя до мултимедийния файл Определя файла, който ще се изпълнява PLAY true/false Определя дали файлът да бъде стартиран автоматично или когато бъде натиснат предназначения за това бутон LOOP true/false Определя дали файлът да започне отначало, когато стигне края си или да спре Тага <BGSOUND> е един много лесен начин за включване на звук във вашата WEB страница. За съжаление, той се поддържа само от Internet Explorer(и от Opera 7.51 със сигурност). Този таг поддържа най–често ползваните типове медия: WAV, MIDI и MP3. <BGSOUND> предоставя следните атрибути: Атрибут Възможни стойности Действие SCR пътя до медийния файл Пуска съответния файл LOOP Положително цяло число или infinite Указва колко пъти да бъде повторен звуковия клип (стойност infinite задава безкрайно повторение или просто –1 което е пак същото) Пример: <BGSOUND SCR=”www.dfs.com\ede.mid” LOOP =-1> BALANCE от –10000 до 10000 Отрицателните стойности насочват звука към левия говорител, 0 определя равно подаване и на двата, положителните – десния VOLUME от –10000 до 0 Определя силата на звука Тага <BGSOUND> трябва да се намира в частта HEAD на документа. Той няма да работи на системи, на които опцията Play sounds не е включена (тя се намира в Internet Options/Advances/Multimedia на менюто Tools на Internet Explorer 5 и в менюто View на Internet Explorer4. Тук е време да дам няколко лесни задачки. Задача Направете Javascript код, който като разпознава браузера да пуска фонова музика безкрайно дълго време. Задача

Като използвате Math.random() направете Javascript код, който да пуска произволна фонова музика при двойно кликване(на прозореца например използвайте onDblclick=”window.Nqkva_funkciq()” сложете го в <body>). Задача Направете Javascript код, който като разпознава браузера да пуска видео на съответния браузер. Задача* Направете мешена манджа. Направете Javascript код, който е съвкупност от много Javascript кодове, които да прилагат най-малко два ефекта на даден обект примерно картинка, която да се сменя когато мишката застане върху нея и да се чуе някакъв звук. Тази задача си мисля, че е реализируемо, но не за всички. Като заключение ще кажа че тази книга предоставя основите и донякъде загатва за немалко възможности на Javascript и защо(и закакво) се използва. Ако има неясни,непълни или каквито и да е било моменти си купете някоя книга за Javascript или ако ви интересува нещо по-конкретно потърсете в Интернет и успех в програмирането.