проф. д.н. ДАНИЕЛА БОРИСОВАiit.bas.bg/oup/9.pdf · javascript –...

проф. д.н. ДАНИЕЛА БОРИСОВА

1. Въведение в уеб-програмирането – езици за уеб програмиране, синтаксис на езика HTML

2. BOX модел. CSS – синтаксис и деклариране на стилове. Деклариране и използване на класове и селектори

3. Форматиране на текст и списъци4. Използване на цветове и изображения5. Таблици – тагове и атрибути6. Формуляри – елементи, методи за изпращане7. Използване на рамки и мултимедия, нови елементи в HTML5,

различия между HTML и XHTML8. Създаване на темплейти чрез CSS и HTML9. Въведение в JavaScript. Синтаксис, типове променливи и

оператори10. JavaScript – условия, функции, Regular Expressions, обекти за дата, час,

година Д. Борисова

9.1. JAVASCRIPT – ОБЩА ИНФОРМАЦИЯ

9.2. РАЗПОЛАГАНЕ НА JAVASCRIPT В HTML ДОКУМЕНТ

9.3. ТИПОВЕ ДАННИ И ПРОМЕНЛИВИ

9.4. ОБЕКТИ

9.5. ОПЕРАТОРИ

9.6. ФУНКЦИИ

Д. Борисова

JavaScript е олекотен, интерпретиран език за програмиране собектно-ориентирани възможности, които позволяват изгражданетона интерактивност в статичните HTML страници. JavaScript еразработен от Брендан Ейч от екипа на Netscape под името Mocha.

По-късно е преименуван на LiveScript и това е официалното име наезика когато за първи път е пуснат в бета-версиите на браузъраNetscape Navigator 2, а по-късно през 1995 г. (вер. 2 на NetscapeNavigator) е преименуван на JavaScript.

Microsoft също въвежда подобен на JavaScript език т. нар. JScript всвоя Internet Explorer 3.

JavaScript се поддържа от всички интернет браузъри и естандартизиран от Европейската асоциация на производителите накомпютри (ECMA).


Кодът на JavaScript се поставя в HTML документа посредствомтаговете <script> ... </script>.

Тагът <script> уведомява браузъра да започне тълкуването на текстамежду отварящия и затваращия таг като скрипт.

JavaScript кодът може да бъде вмъкнат навсякъде в рамките на уебстраницата, но се препоръчва поставянето му в секцията <head>.


<script language="javascript" type="text/javascript">JavaScript code

</script>

<script> JavaScript code

</script>

JavaScript игнорира интервалите, табулациите и новите редове впрограмния код. Следователно интервали, табулации и нови редовемогат да се използват за по-доброто структуриране на JavaScript кода.

Простите записи в JavaScript обикновено са последвани от знакаточка и запетая, както в езиците C, C ++ и Java. JavaScript обачепозволява пропускане на точката и запетаята, ако записите сапоставени на отделни редове.

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


JavaScript поддържа стила на езика C и C++ по отношение накоментарите:

Всеки текст между // до края на реда ще се интерпретира катокоментар и се игнорира от JavaScript.

Всеки текст между символите /* и */ се интерпретира като коментар.Този коментар може да се простира на няколко реда.

JavaScript разпознава също отварящият запис за HTML коментар не се интерпретира отJavaScript, така че трябва да бъде написано като //-->.

Има известна гъвкавост по отношение на разполагането на JavaScriptкода в HTML документ. Най-често използваните начини заразполагане на JavaScript в HTML документа са следните:

JavaScript в секцията <head>...</head>.

JavaScript в секцията <body>...</body>.

JavaScript в <body>...</body> и <head>...</head>.

JavaScript във външен файл и включен в секцията <head>...</head>.


Използване на JavaScript в <head>...</head> секцията


<html><head><script type="text/javascript"> </script></head><body><input type="button" onclick="sayHello()" value="Say Hello" /></body></html>

Използване на JavaScript в секцията <body>...</body>


<html><head> </head><body><script type="text/javascript"> </script><p>Това е съдържанието на страницата</p></body></html>

Използване на JavaScript в секциите <body> и <head>


<html><head> <script type="text/javascript">  </script></head><body> <script type="text/javascript"> </script><input type="button" onclick="sayHello()" value="Say Hello" /></body></html>

JavaScript от външен файл

Ето един пример, който показва как да бъде включен външенJavaScript файл (например, filename.js) в HTML кода, използвайкиатрибута src на тага <script>:


<html><head><script type="text/javascript" src="filename.js" ></script></head><body>.......</body></html>

JavaScript позволява да се работи с три примитивни типове данни: числа – като 123; 120.50; 6.02е11 низове – като "This text string" булеви (логически) – като true или false Всички числа в JavaScript се представят като числа с плаваща

запетая. JavaScript представя числата във 64-битов формат с плаващаточка, определен от стандарта IEEE 754.

Низът в JavaScript е последователност от произволви букви, цифри идруги символи.

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


JavaScript определя още два тривиални типа данни, null и undefined.

Ключовата дума null означава “без стойност”. Ако променлива имастойност null, то тя не съдържа валиднa стойност от какъвто и да етип.

Undefined е стойността, която се връща, ако се използванедекларирана или неинициализирана променлива, или ако сеизползва несъществуващо свойство на обект.

Променливи се декларират чрез ключовата дума var.

Ключовата дума var може да се използва само за деклариране илиинициализация само веднъж в живота на всяка променлива в дадендокумент.


var money; var name;

Съхраняването на стойност в променливата се наричаинициализация на променливата. Може да се направиинициализация на променливата по време на нейното създаване илина късен етап, когато е необходимо тя да бъде използвана.

Нека да създадем променлива с име money и след това да ѝ присвоимстойност 2000.50. Променливата name получава стойност по времена нейната декларация:


<script type="text/javascript"> </script>

Числовите променливи се представят като числа, които не сазаградени в кавички. Числата в Java Script се представят в 64-битовформат с плаваща запетая. Java Script не прави разлика между целичисла и числа с плаваща запетая.

Целите числа могат да бъдат представяни в осмична илишестнайсетична бройна система.

Литералът в осмичната бройна система започва с 0 (нула), а този вшестнайсетичната с 0х:


var x = 56; //десетично представянеvar y = 34e-5; // десетично представяне - научен форматvar z = 034; // осмично представянеvar s = 0x23F; // шестнайсетично представяне

Низовите променливи представляват букви, цифри или другисимволи, както и техните комбинации, поставени в кавички (всичко вкавичките се интерпретира като текст):

Възможно е използване на комбинация от единични и двойникавички:


var text = "Hello wolrd!"var text1 = "40";vat text2 = "Низова променлива + 40";

var text = 'Използване на "кавички" в низовата променлива';

Масивите са тип променливи, които съдържат множество елементи.Ето една структура на празен масив с неопределен брой елементи,където masiv е името на масива, а new Array() е начина надекларирането му:

Вместо празни скоби, можем да зададем броя на елементите вмасива:


masiv=new Array()

masiv=new Array(10)

Броят на елементите винаги трябва да бъде цяло неотрицателночисло. В горния случай създадохме масив с име masiv и 10 елементасъс стойност NULL, т.е. празни елементи.

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

Самото индексиране на елементите става с квадратни скоби [ ], катопървият индекс е нула. Например: масив със 7 елемента и зададенистойности – дните от седмицата:


masiv=new Array(7)masiv[0]="понеделник"masiv[1]="вторник"masiv[2]="сряда"masiv[3]="четвъртък"masiv[4]="петък"masiv[5]="събота"masiv[6]="неделя”

masiv = new Array ("понеделник","вторник", "сряда","четвъртък", "петък","събота","неделя")

За осигуряване на достъп до елементите на масива може да сеизползва цикъл:

Този скрипт ще покаже на екрана всеки един елемент от масива, катослед всеки елемент ще минава на нов ред.


masiv=new Array ("понеделник","вторник", "сряда", "четвъртък""петък","събота","неделя")

for(i=0;i<7;i++) {

document.write(masiv[i] + "<br>")}

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

За разлика от много други езици, в JavaScript не е нужно да се укажепри самото деклариране на променливата от какъв тип ще бъде.

Стойността на типа на променливата може да се променя по време наизпълнението на програмния код и JavaScript се грижи за товаавтоматично. Променливите в JavaScript имат два обхвата надействие.

глобални променливи – когато променливата има глобаленобхват, тя може да се дефинира навсякъде в JavaScript кода.

локални променливи – локалната променлива е видима само врамките на функцията, където тя е дефинирана.


Имена на променливите в JavaScript:

Не трябва да започват с цифра (0-9). Трябва да започват с букваили долна черта.

JavaScript прави разлика между главни и малки букви. Таканапример, Name и name са две различни променливи.

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


ключови думи в JavaScript


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

Някои от най-често срещаните обекти с методите и свойствата им:


обект свойства методи

document bgColor; image; location; title write; writeln; open

image border; height; width; src

window location; history; frames; name close; open; prompt; scroll

Изразите в JavaScript се формират като посредством оператори се комбинират стойности на литерали и променливи. В JavaScript се поддържат следните типове оператори:

аритметични оператори

оператори за присвояване

оператори за сравнение

логически (или релационни) оператори

побитови оператори


аритметични оператори


оператори за присвояване


оператори за сравнение


логически (или релационни) оператори


побитови оператори

Побитовите и логическите оператори си приличат много. Разликата в изписването на “И" и “ИЛИ" е, че при логическите оператори се пише двойни амперсанд или права черта, а при битовите единични. Побитовият и логическият оператор за изключващо или е един и същ “^". За логическо отрицание се използва “!", докато за побитово отрицание се използва "~".


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

Дефинирането на функция в JavaScript се реализира чрезизползването на ключовата дума function, следвана от уникално имена функцията, списък с параметри (може и да е празен) и операторивъв фигурни скоби, следвайки основния синтаксис:


<script type="text/javascript"><!—function functionname(parameter-list)

{ Statements

}//--> </script>

Пример за функция с два параметъра и връщане на получениярезултат от изпълнението:

Сега може да извикваме тази функция по следния начин


<script type="text/javascript">function concatenate(first, last){ var full; full = first + last; return full;}//--> </script>

var result; result = concatenate(9, 21); alert(result );

Изпълнението на JavaScript кода, след извикване на функциятаconcatenate (9, 21 ), ще доведе до следния резултат:


<h2>Length Converter</h2><p><b>1</b> select a length unit from the "From" dropdown list and one from the "To" dropdown list.<br /><b>2</b> Enter a numeric value, and click "To" button.<form name="length_con"><table border=0 summary="">

<tr><td>From</td><td><select name=from_unit onChange="convert_unit()";>

<option> centimeters </option> <option> meters </option> <option> kilometers </option> <option> miles </option> <option> inches </option> <option> feet </option> <option> yards </option> </select></td>

<td>To</td><td><select name=to_unit onChange="convert_unit()";>

<option> centimeters</option><option> meters </option> <option> kilometers </option> <option> miles </option> <option> inches </option> <option> feet </option> <option> yards </option></select></td></tr>

<tr><td></td><td colspan=3><div id="formula">centimeters = 1 centimeters</div></td></tr>

<tr><td colspan=4></td></tr>

<tr><td>Enter</td><td><input type="text" name="from_value" value="1" size="12" maxlength="12"></td><td><input type=button value="To" onClick="convert_unit()";></td><td><div id="to_value">1</div></td> </tr>

</table></form>


<h2>Length Converter</h2><p>Type a value in the Feet field to convert the value to Meters:</p>

<p><label>Feet</label><input id="inputFeet" type="number" placeholder="Feet"

oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)"></p><p>Meters: <span id="outputMeters"></span></p>

<script>function LengthConverter(valNum) {document.getElementById("outputMeters").innerHTML=valNum/3.2808;}</script>

проф. д.н. ДАНИЕЛА БОРИСОВАiit.bas.bg/oup/9.pdf · javascript –...

Documents