JavaScript  уроци
JavaScript уроциЗАПОЗНАВАНЕ С JAVASCRIPTПРОМЕНЛИВИМАТЕМАТИЧЕСКИ ОПЕРАЦИИБУЛЕВИ ИЗРАЗИ. УСЛОВИЯ.ОПЕРАТОРИ ЗА ЦИКЪЛФУНКЦИИМА...
ЗАПОЗНАВАНЕ С JAVASCRIPT   Javascript е най-широко разпространеният скриптовезик за писане на приложения в интернет, след ...
РАЗЛИКИJavascript              JAVA скриптов език           език за програмиранеразработен от           разработен откорпо...
С JavaScript…М   • Ефекти с изображения. Rollover ефекти,О   слайд шоу, и много други.ЖЕ   • Уравление на прозорци и рамки...
НЕ МОЖЕТЕН Не можете да записвате информация наЕ сървъра (не можете да организирате форуми,  да обработвате бази данни)МОЖ...
• JavaScript кода се вмъква в HTML документа между  двойката елементи <SCRIPT> и </SCRIPT>.• Когато срещне тага <SCRIPT>, ...
Пример1 (решение):                Резултат:<HTML>                            Здравей!<HEAD><TITLE>javascript</TITLE></HEAD...
! Някои по-стари версии на Netscape Navigator и  Internet Explorer не разбират JavaScript.Затова трябва да скривате скрипт...
Пример2 (решение):               Резултат:<HTML>                           Здравей!<HEAD><TITLE>javascript</TITLE></HEAD><...
ПРОМЕНЛИВИпроменливите     Могат да променят "Здравей!“ в                 стойността си      пример1константите      Никог...
Пример3 (решение):              Резултат:         <HTML>                 Здравей!<HEAD><TITLE>javascript</TITLE></HEAD><BO...
Характеристики на променливатаиме                              Пример: greetingИмето      големи и малки        Пример:съд...
Пример4 (решение):               Резултат:<HTML>                           Здравей!5<HEAD>                           12<TI...
МАТЕМАТИЧЕСКИ ОПЕРАЦИИ                                                        п                                           ...
Пример5 (решение):                       Резултат:<HTML>                                   През 2010 година<HEAD>    <TITL...
КоментариДруг начин за работа с променливи:Деклариране: Var имеНаПроменлива=стойностАритметични операции с променливи : Из...
Разлика между          x++                         ++x         y= x++                      y=++x                   Ред на ...
• С prompt се отваря прозорец с поле, в което можете да  въвеждате информация.Структура на prompt:                   promp...
БУЛЕВИ ИЗРАЗИ. УСЛОВИЯ.• Булевите изрази са операции за сравнение  между две променливи.• Резултатът от такова сравнение и...
Изразът   връща стойност TRUE, ако x==y     x е равно на y x!=y     x не е равно на y x<y      x е по-малко от y x<=y     ...
УСЛОВЕН ОПЕРАТОРСинтаксис                Смисъл: (пълна форма):                Ако(if) е изпълненоif (условие)            ...
Пример 6 (Задача):Напишете скрипт, в който въвеждате своятагодината на раждане, така, че да се проверявадали рожденната да...
Пример 6 (решение, I вариант):...<SCRIPT LANGUAGE="javascript"><!--    var year=prompt("Въведете година на раждане","1980"...
Вход:II. година между 1900 и 2000                    т.е. 1900<year<2000    Резултат:    През 2010 година Вие ще бъдете на...
Пример 6 (решение, II вариант):…<SCRIPT LANGUAGE="javascript"><!--    var year=prompt("Въведете година нараждане","1980") ...
Вход:II. година между 1900 и 2000                    т.е. 1900<year<2000    Резултат:    През 2010 година Вие ще бъдете на...
Пример 6 (решение, III вариант):...<SCRIPT LANGUAGE="javascript"><!--    var year=prompt("Въведете година на раждане","198...
Вход:II. година между 1900 и 2000                   т.е. 1900<year<2000    Резултат:    През 2010 година Вие ще бъдете на ...
ОПЕРАТОРИ ЗА ЦИКЪЛ                   ЦИКЪЛ FOR          (цикъл с известен брой стъпки) • Използва се, когато се налага да ...
Пример 7 (Задача):Напишете скрипт, който да извежда наекрана числата от 0 до 9 .                             Резултат:Прим...
ОПЕРАТОРИ ЗА ЦИКЪЛ             ЦИКЪЛ WHILE           (цикъл с предусловие)• Използва се, когато се налага да се повтаря  е...
Пример 8 (Задача):Напишете скрипт, който да извежда наекрана числата от 0 до 9 с помощта на while .                       ...
ФУНКЦИИ• Функциите в javascript са блокове от код,които първо се дефинират, а след това сеизпълняват.• Структура:function ...
name        е името на функцията,(аргументи) аргументи не са задължителниаргументи    Ако ги има се отделят със запетаи.  ...
• Място на дефиниране на функцията:в главата (HEAD) на HTML документа.• Място на извикване на функцията:в тялото (BODY) на...
Пример 9 (решение):<HTML<HEAD><SCRIPT LANGUAGE="JavaScript">    function firstName() {        name=prompt("Как се казвате ...
Пример 9 (Задача):Напишете скрипт, който да извежда всички размерина шрифта, като изведеното число да е със същатаголемина...
<HTML  <HEAD>  <SCRIPT LANGUAGE="JavaScript">    function fontSize(num) {          document.write("<font size="+num+">")  ...
ВНИМАНИЕ!Когато пишете HTML тагове с document.writeте се изпълняват като истински HTML тагове.Резултатът от        documen...
МАСИВИ• Масивите са тип променливи, коитосъдържат множество елементи.• Структурата на масив:     masiv=new Array(брой елем...
В този случай можем да зададем броя наелементите в масива по-късно, когато задаваместойност на всеки елемент поотделно(нар...
Пример А1:masiv=new Array(10)Създадохме масив с име masiv и  10 елемента съсстойност NULL, т.е. празни.Пример А2:         ...
Пример А3 (по-лесно от пример А2):masiv=new Array( "понеделник","вторник","сряда","червъртък","петък","събота","неделя")Вс...
Достъп до елементите на масив:                чрез използване на цикълmasiv=new Array ( "понеделник", "вторник", "сряда","...
ОБЕКТИJavaScript е обектно-ориентиран език- всеки елемент в него е обект,- който има различни методи за изпълнение на  няк...
обект      свойства   методи           bgColor    write           image      writelndocument           location   open    ...
Обектът document         и неговите методи  Обекта document e един вид “контейнер” -чрез него може да се управляват всички...
Така, ако искаме да се обърнем към първатакартинка, просто следваме йерархията:             document.images[0].За достъп д...
Пример:<html><head><title>Objects</title><script language="JavaScript"><!--hidefunction first() {alert("The value of the t...
function second() { var myString= "The checkbox is"; if (document.myForm.myCheckbox.checked) myString+="checked" else mySt...
<body> <form name="myForm"> <input type="text" name="myText"value="Heloo"> <input type="button" name="button1"value="Click...
<!-- hide document.write("The background color is:"); document.write(document.bgColor+"<br>"); document.write("The text on...
Други често използвани методиdocument.bgColor      - Определя цвета на фона.document.fgColor      - Определя цвета на текс...
Обектът window          и неговите методиОбектът window управлява прозорците вбраузъра.Метод за отваряне на прозорецwindow...
Пример:<HTML><HEAD><TITLE>Отвори прозорец</TITLE><SCRIPT LANGUAGE=JavaScript>function openWin() { window.open(‘a11example3...
<BODY><FORM><input type="button" value="Отвори новпрозорец" onClick="openWin()"></FORM></BODY></HTML>В този пример се отва...
Метод за затваряне на прозорецwindow.close(име_на_прозореца).Пример:(с отварянето на нов прозорец се създава инов HTML док...
function openWin() { myWin= open("","newWindow", "width=500,height=400, status=yes, toolbar=yes, menubar=yes");myWin.docum...
myWin.document.write("</font></center>");myWin.document.write("</body></html>");myWin.document.close();}// --></script></h...
Вижда се, че във функцията openWin се отварянов прозорец, но първият аргумент е празенниз. Това е така понеже няма готов H...
Методи на обекта window.• alert(низ)• confirm(низ)• prompt(низ)• defaulStatus        - определя текста, който  ще се появя...
Пример:(с натискане на бутоните се пише и съответноизтрива status bar-a! Тук триенето пак еизписване, но на празен низ!)<h...
</script></head><body> <form> <input type="button" name="look"value="Изпиши!" onClick="statbar(Вижstаtusbar-a!);"> <input ...
СЪБИТИЯ В JavaScriptВ JavaScript това са действия, които се извършватвърху Web страницата. С тяхна помощ можете даследите ...
Javascript обработва събитията с таканаречените манипулатори на събития. Такапри кликване ще се извика манипулатораonClick...
Можете да го сложите например в тага <А> .Пример(създаване на хипервръзка, при чието посочване сепоказва alert прозорец с ...
Събитията допустими в JavaScript са:• ONLOAD=”SCRIPT”Възниква, когато браузъра завърши зареждането напрозорец или фреймове...
• ONMOUSEDOWN=”SCRIPT”  Възниква, когато бутона на мишката е натиснат върху  елемент.• ONMOUSEUP=”SCRIPT”  Възниква, когат...
• ONMOUSEOUT=”SCRIPT”  Възниква, когато мишката излезе извън елемент.• ONFOCUS=”SCRIPT”  Възниква, когато елемента придоби...
• ONKEYUP=”SCRIPT”  Възниква, когато е отпуснат клавиш върху елемента.• ONSUBMIT=”SCRIPT”  Възниква, когато се подават дан...
Пример: Да се напише скрипт, реализиращ три от най-използваните събития - щракване върху обект (onClick), - зареждане на с...
<BODY onLoad=alert("Здравейте")        onUnload=alert("Довиждане")><h1><center>Натискайки бутоните променяш цветана фона!<...
onClick="changeColor(#000080)"><br><input type=button value="Акуа"onClick="changeColor(#00FFFFF)"></form></BODY></HTML>
УпражненияЗадача 1:  Декларирайте променлива от тип number (string,  boolean), присвоете й стойност и я изведете в  текущи...
УпражненияЗадача 4:  Създайте функция, която да изписва n на брой пъти  (n=1,2,3...) даден текст, след който да преминава ...
<p><center><img src="WFall.jpg" name="picture1"width=”500” height=”250” border=”0”><p> <form name="Form1"> Харесва ли Висн...
<p>  <form name="Form2">Губи ли се от въздействието на природната картина при този размер?<br>  <input type="radio" name="...
Източникhttp://iea.fmi.uni-sofia.bg/rip/
Upcoming SlideShare
Loading in...5
×

Java Script

1,032

Published on

Java Script Lessons - Basic

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,032
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Java Script

  1. 1. JavaScript уроци
  2. 2. JavaScript уроциЗАПОЗНАВАНЕ С JAVASCRIPTПРОМЕНЛИВИМАТЕМАТИЧЕСКИ ОПЕРАЦИИБУЛЕВИ ИЗРАЗИ. УСЛОВИЯ.ОПЕРАТОРИ ЗА ЦИКЪЛФУНКЦИИМАСИВИОБЕКТИСЪБИТИЯ
  3. 3. ЗАПОЗНАВАНЕ С JAVASCRIPT Javascript е най-широко разпространеният скриптовезик за писане на приложения в интернет, след HTML. Той не е"език за програмиране", тъй като с неговапомощ не се пишат програми, а скриптове които се вмъкват в HTML документа. Има и други езици за  писане на скриптове, напримерVBScript.
  4. 4. РАЗЛИКИJavascript JAVA скриптов език език за програмиранеразработен от разработен откорпорацията Netscape корпорацията SUNезик за писане на мощен език заскриптовелима само програмиране не само наинтернет приложение интернет приложения и самостоятелни програми за различни платформи.
  5. 5. С JavaScript…М • Ефекти с изображения. Rollover ефекти,О слайд шоу, и много други.ЖЕ • Уравление на прозорци и рамки. ОтварянеТ и затваряне на прозорци, задаване на размера наЕ прозорец, управление на един прозорец от друг и т.н. • Разпознаване на типа на браузъра, операционната система, разделителната способност на екрана и дълбочината на цветовете.
  6. 6. НЕ МОЖЕТЕН Не можете да записвате информация наЕ сървъра (не можете да организирате форуми, да обработвате бази данни)МОЖЕТЕ
  7. 7. • JavaScript кода се вмъква в HTML документа между двойката елементи <SCRIPT> и </SCRIPT>.• Когато срещне тага <SCRIPT>, браузърът спира интерпретирането на HTML кода и започва да обработва скрипта, намиращ се между <SCRIPT> и </SCRIPT>.• Задължително трябва да укажете на браузъра на какъв език ще бъде скрипта. Тъй като работим с JavaScript, трябва да напишете <SCRIPT LANGUAGE="JavaScript">. Пример1 (Задача): Да се направи уеб страница, в която да се вмъкне JavaScript код, който да изписва на екрана "Здравей!"
  8. 8. Пример1 (решение): Резултат:<HTML> Здравей!<HEAD><TITLE>javascript</TITLE></HEAD><BODY><SCRIPT LANGUAGE="JavaScript">    document.write("Здравей!")</SCRIPT></BODY></HTML>
  9. 9. ! Някои по-стари версии на Netscape Navigator и Internet Explorer не разбират JavaScript.Затова трябва да скривате скрипта в HTML коментари <-- и //-->.Така по старите версии на браузърите ще тълкуват JavaScript кода, за коментар и няма да съобщят за грешка.Пример2 (Задача):Да се направи уеб страница, в която да севмъкне JavaScript код, който да изписва наекрана "Здравей!“ с удебелен шрифт.
  10. 10. Пример2 (решение): Резултат:<HTML> Здравей!<HEAD><TITLE>javascript</TITLE></HEAD><BODY><SCRIPT LANGUAGE="JavaScript">   document.write(“<B>Здравей!</B>")</SCRIPT></BODY></HTML>
  11. 11. ПРОМЕНЛИВИпроменливите Могат да променят "Здравей!“ в стойността си пример1константите Никога не променят стойността си!Пример3 (Задача):Да се направи уеб страница, в която да се вмъкнеJavaScript код, който да изписва на екрана"Здравей!“. Използвайте променлива.
  12. 12. Пример3 (решение): Резултат: <HTML> Здравей!<HEAD><TITLE>javascript</TITLE></HEAD><BODY><SCRIPTLANGUAGE="JavaScript">    <!--      greeting="Здравей!"     document.write(greeting)    //--></SCRIPT></BODY></HTML>
  13. 13. Характеристики на променливатаиме Пример: greetingИмето големи и малки Пример:съдържа латински букви, greeting_card, цифри, както и ”_”. greet2, _my_greetingИмето Символ различен от Пример (грешни):започва със цифра 123school var.2   greeting 3  
  14. 14. Пример4 (решение): Резултат:<HTML> Здравей!5<HEAD> 12<TITLE>javascript</TITLE></HEAD><BODY><SCRIPTLANGUAGE="JavaScript">    <!--    a=5    b=7    greeting="Здравей!"    document.write(greeting+a)    document.write("<br>")    document.write(a+b)    //--></SCRIPT>
  15. 15. МАТЕМАТИЧЕСКИ ОПЕРАЦИИ п р събиране + и изваждане - о умножение * р и деление / т целочислено деление % е тПример5 (Задача):Напишете скрипт, в който въвеждате своята годината нараждане, а след това скриптът да изчислява на колкогодини ще бъдете през 2010 година. Съобщаването нарезултата да става в нов прозорец:
  16. 16. Пример5 (решение): Резултат:<HTML> През 2010 година<HEAD>    <TITLE>javascript</TITLE> Вие ще бъдете на<HEAD> 30 години<BODY><SCRIPT LANGUAGE="javascript"><!--    var year = prompt("Въведете годинана раждане","1980")        old = 2010-year    alert("През 2010 година Вие щебъдете на "+old+" години")//--></SCRIPT></BODY></HTML>
  17. 17. КоментариДруг начин за работа с променливи:Деклариране: Var имеНаПроменлива=стойностАритметични операции с променливи : Израз Еквивалентен израз I II p=x++ p=x+1 + = q=x-- q=x-1 - = y=++x p=x+1 = + z=--x q=x-1 = -
  18. 18. Разлика между x++ ++x y= x++ y=++x Ред на действиятаI + I =II = II +..така x и y ще бъдат с .. y ще приеме стойностаеднаква стойност. на x и чак след това x ще се увеличи с 1. x=10x=11 y=11 y=10 x=11
  19. 19. • С prompt се отваря прозорец с поле, в което можете да въвеждате информация.Структура на prompt: prompt("message","value"),където message е съобщението, което ще се появи заедно с прозореца, а value е някаква начална стойност.• С alert прозорец се, извежда информация в прозорец.Структура на alert : alert(“съобщение"),където съобщение е съобщението, което ще се появи.
  20. 20. БУЛЕВИ ИЗРАЗИ. УСЛОВИЯ.• Булевите изрази са операции за сравнение между две променливи.• Резултатът от такова сравнение има само две стойност - true или false.• Пример: при сравнение дали а>b се връща резултат TRUE, ако е вярно, иначе FALSE.
  21. 21. Изразът връща стойност TRUE, ако x==y x е равно на y x!=y x не е равно на y x<y x е по-малко от y x<=y x е по-малко или равно на y x>y x е по-голямо от y x>=y x е по-голямо или равно на y !x x е FALSE x&&y x и y  са едновременно TRUE x||y x и y  са едновременно FALSE
  22. 22. УСЛОВЕН ОПЕРАТОРСинтаксис Смисъл: (пълна форма): Ако(if) е изпълненоif (условие) «условие»-то, се изпълнява    оператор1 оператор1, иначе (else) се        else изпълнява оператор 2.            оператор 2Синтаксис(кратка форма):if (условие)    оператор1
  23. 23. Пример 6 (Задача):Напишете скрипт, в който въвеждате своятагодината на раждане, така, че да се проверявадали рожденната дата не е преди 1900 година ислед 2000 година.А след това скриптът да изчислява на колкогодини ще бъдете през 2010 година.Съобщаването на резултата да става в новпрозорец.
  24. 24. Пример 6 (решение, I вариант):...<SCRIPT LANGUAGE="javascript"><!--    var year=prompt("Въведете година на раждане","1980")    if (year>1900)&&(year<2000)       {     old=2010-year     document.write("През 2010 година Вие ще бъдете на"+old+" години") }//--></SCRIPT>...
  25. 25. Вход:II. година между 1900 и 2000 т.е. 1900<year<2000 Резултат: През 2010 година Вие ще бъдете на 30 години• година преди 1900 или след 2000 -та т.е. year<1900 или year>2000 Резултат: Не се изпълнява нищо!
  26. 26. Пример 6 (решение, II вариант):…<SCRIPT LANGUAGE="javascript"><!--    var year=prompt("Въведете година нараждане","1980")        if (year<1900)||(year>2000)                    document.write(“Грешно въведенагодина!")        else   {        old=2010-year        document.write("През 2010 година Вие ще бъдетена "+old+" години")}//--></SCRIPT>…
  27. 27. Вход:II. година между 1900 и 2000 т.е. 1900<year<2000 Резултат: През 2010 година Вие ще бъдете на 30 годиниVII. година преди 1900 или след 2000 т.е. 1900>year или year>2000 Резултат: Грешно въведена година!
  28. 28. Пример 6 (решение, III вариант):...<SCRIPT LANGUAGE="javascript"><!--    var year=prompt("Въведете година на раждане","1980")        if (year<1900)            document.write("На Вашата възраст не бих седялпред компютъра")                else                    if (year>2000)                    document.write("Още нероден, а вечегений!!!")        else   {        old=2010-year        document.write("През 2010 година Вие ще бъдете на"+old+" години")}//--></SCRIPT>...
  29. 29. Вход:II. година между 1900 и 2000 т.е. 1900<year<2000 Резултат: През 2010 година Вие ще бъдете на 30 годиниVII. година преди 1900 т.е. 1900>year Резултат: На Вашата възраст не бих седял пред компютъраXII.година след 2000 т.е. year>2000 Резултат: Още нероден, а вече гений!!!
  30. 30. ОПЕРАТОРИ ЗА ЦИКЪЛ ЦИКЪЛ FOR (цикъл с известен брой стъпки) • Използва се, когато се налага да се повтаря една и съща операция известен брой пъти. • Синтаксис:for (брояч=нач.стойност., условие, промяна на брояча)  {  оператор1 оператор2 … }
  31. 31. Пример 7 (Задача):Напишете скрипт, който да извежда наекрана числата от 0 до 9 . Резултат:Пример 7 (решение): 0 1 2for (i=0;i<10; i++) { 3 4document.write(i) 5document.write("<BR>") 6} 7 8 9 10
  32. 32. ОПЕРАТОРИ ЗА ЦИКЪЛ ЦИКЪЛ WHILE (цикъл с предусловие)• Използва се, когато се налага да се повтаря една и съща операция няколко пъти. Условието се проверява предварително.• Синтаксис:while ( условие)  {  оператори }
  33. 33. Пример 8 (Задача):Напишете скрипт, който да извежда наекрана числата от 0 до 9 с помощта на while . Резултат:Пример 8 (решение): 0 1i=0 2while (i<10) { 3 4document.write(i) 5document.write("<BR>") 6} 7 8 9 10
  34. 34. ФУНКЦИИ• Функциите в javascript са блокове от код,които първо се дефинират, а след това сеизпълняват.• Структура:function name( аргументи ) {оператори}
  35. 35. name е името на функцията,(аргументи) аргументи не са задължителниаргументи Ако ги има се отделят със запетаи. Например: arg1, arg2, arg3 Или function name(arg1, arg2, arg3){ тялото на функцията заградено с...} фигурни скоби.
  36. 36. • Място на дефиниране на функцията:в главата (HEAD) на HTML документа.• Място на извикване на функцията:в тялото (BODY) на HTML документа• Как се извиква:чрез изписване на името ú и аргументите, ако иматакива.Пример 9 (Задача):Напишете скрипт, който да извежда съобщението“Как се казвате ?”,да приема името на потребителя и да поздравява“Здравейте име !”
  37. 37. Пример 9 (решение):<HTML<HEAD><SCRIPT LANGUAGE="JavaScript">    function firstName() {        name=prompt("Как се казвате ?")        alert("Здравейте"+name+” !”)}</SCRIPT><BODY><SCRIPT LANGUAGE="Javascript"> Резултат:    firstName() Как се казвате?</SCRIPT></BODY> Надя</HTML> Здравейте Надя !
  38. 38. Пример 9 (Задача):Напишете скрипт, който да извежда всички размерина шрифта, като изведеното число да е със същатаголемина. Ето така: 1 2 3 4 5 6 7
  39. 39. <HTML <HEAD> <SCRIPT LANGUAGE="JavaScript">    function fontSize(num) {         document.write("<font size="+num+">")         document.write(num)         document.write("</font>") } </SCRIPT> <BODY> <SCRIPT LANGUAGE="Javascript">    for(num=1;num<=7;num++) {         fontSize(num)     } </SCRIPT> </BODY> </HTML>
  40. 40. ВНИМАНИЕ!Когато пишете HTML тагове с document.writeте се изпълняват като истински HTML тагове.Резултатът от document.write("<font size="+num+">")        document.write(num)        document.write("</font>")е изпълнението на HTML таг <font size = num> num </font>,където num е някякво конкретно зададено числомежду 1 и 7
  41. 41. МАСИВИ• Масивите са тип променливи, коитосъдържат множество елементи.• Структурата на масив: masiv=new Array(брой елементи),където masiv е името на масива, аnew Array() е начина на създаването му.Ако липсва брой елементи, се създава празенмасив с неопределен брой елементи.
  42. 42. В този случай можем да зададем броя наелементите в масива по-късно, когато задаваместойност на всеки елемент поотделно(наречено индексиране на елемент).Индексиране на елементите става с квадратнискоби [ ], като броенето започва от нула. Такапървия елемент в масив с десет елемента еmasiv[0] а последния masiv[9].Пример:masiv[0]="понеделник"
  43. 43. Пример А1:masiv=new Array(10)Създадохме масив с име masiv и  10 елемента съсстойност NULL, т.е. празни.Пример А2: masiv=new Array(7) masiv[0]="понеделник" masiv[1]="вторник" masiv[2]="сряда" masiv[3]="четвъртък" masiv[4]="петък" masiv[5]="събота" masiv[6]="неделя"
  44. 44. Пример А3 (по-лесно от пример А2):masiv=new Array( "понеделник","вторник","сряда","червъртък","петък","събота","неделя")Всеки елемент от масива си има някаквастойност, която може да бъде променянасвободно по всяко време, както и типа напроменливата.Например, ако напишем masiv[5]=122шестия елемент ще бъде от целочислен тип,докато останалите ще са от стрингов тип.
  45. 45. Достъп до елементите на масив: чрез използване на цикълmasiv=new Array ( "понеделник", "вторник", "сряда","червъртък", "петък", "събота", "неделя")for (i=0; i<7; i++) {    document.write(masiv[i] + "<br>")}Резултат:Този скрипт ще покаже на екрана всеки единелемент от масива, като след всеки ще минава нанов ред.
  46. 46. ОБЕКТИJavaScript е обектно-ориентиран език- всеки елемент в него е обект,- който има различни методи за изпълнение на някакви действия. Пример за обект window documentпрозорецът на браузъра HTML страницата (HTML документа, който е зареден в момента. )
  47. 47. обект свойства методи bgColor write image writelndocument location open title border heightimage width src location close history openwindow frames prompt name scroll
  48. 48. Обектът document и неговите методи Обекта document e един вид “контейнер” -чрез него може да се управляват всичкиелементи, които са в текущия документ. Елементи на обект document •фона на страницата, •цвета на текста, •хипервръзките, •формите •други.
  49. 49. Така, ако искаме да се обърнем към първатакартинка, просто следваме йерархията: document.images[0].За достъп до бутона във формата: document.forms[0].elements[2].Ако има обаче много обекти в документа ще етрудно да ги цитираме правилно, затова можеда се обръщаме към тях с имената им.
  50. 50. Пример:<html><head><title>Objects</title><script language="JavaScript"><!--hidefunction first() {alert("The value of the textelement is:"+document.myForm.myText.value);}
  51. 51. function second() { var myString= "The checkbox is"; if (document.myForm.myCheckbox.checked) myString+="checked" else myString+="not checked"; alert(myString);}// --></script></head>
  52. 52. <body> <form name="myForm"> <input type="text" name="myText"value="Heloo"> <input type="button" name="button1"value="Click me" onClick="first()"><br> <input type="checkbox" name="myCheckbox"CHECKED> <input type="button" name="button2" value="Metoo" onClick="second()"> </form> <p><br><br> <script language="JavaScript">
  53. 53. <!-- hide document.write("The background color is:"); document.write(document.bgColor+"<br>"); document.write("The text on the second buttonis:");document.write(document.myForm.button2.value); // --> </script></body></html>
  54. 54. Други често използвани методиdocument.bgColor - Определя цвета на фона.document.fgColor - Определя цвета на текста.document.vlinkColor - Определя цвета на избрана вече хипервръзка.document.title - Изписва заглавието на страницата, което е предварително зададено.document.URL - Изписва Интернет адреса на страницата.document.referrer - Изписва Интернет адреса на страницата, от която е била извикана текущата страница.
  55. 55. Обектът window и неговите методиОбектът window управлява прозорците вбраузъра.Метод за отваряне на прозорецwindow.open(име_на_прозореца).
  56. 56. Пример:<HTML><HEAD><TITLE>Отвори прозорец</TITLE><SCRIPT LANGUAGE=JavaScript>function openWin() { window.open(‘a11example3.html’, "newWindow","width=’400’, heigh=’300’, status=’no’,toolbar=’no’,menubar=’no’");}</script></HEAD>
  57. 57. <BODY><FORM><input type="button" value="Отвори новпрозорец" onClick="openWin()"></FORM></BODY></HTML>В този пример се отваря нов, празен прозорецкато се посочват и редица параметри, касаещиизгледа му. Използвайки "newWindow" нановия прозорец се дава име, което после бимогло да се използва вътре в HTML документа.
  58. 58. Метод за затваряне на прозорецwindow.close(име_на_прозореца).Пример:(с отварянето на нов прозорец се създава инов HTML документ)<html><head><title>с отварянето на нов прозорец се създаваи нов HTML документ</title><script language="JavaScript"><!-- hide
  59. 59. function openWin() { myWin= open("","newWindow", "width=500,height=400, status=yes, toolbar=yes, menubar=yes");myWin.document.open();myWin.document.write("<html><head><title>On-the-fly");myWin.document.write("</title></head><body>");myWin.document.write("<center><font size=+3>");myWin.document.write("Този html документ енаписан");myWin.document.write("с помоща на JavaScript!");
  60. 60. myWin.document.write("</font></center>");myWin.document.write("</body></html>");myWin.document.close();}// --></script></head><body><form><input type=button value="On-the-fly"onClick="openWin()"></form></body></html>
  61. 61. Вижда се, че във функцията openWin се отварянов прозорец, но първият аргумент е празенниз. Това е така понеже няма готов HTMLдокумент и естествено няма и URL адрес.Променливата myWin осигурява достъп доновия прозорец.Чрез myWin.document.open() се извикваметода open() на обекта document. Тойподготвя документа за приемане на входниданни. След това с помощта на методаmyWin.document.write() се създава новиятHTML документ.
  62. 62. Методи на обекта window.• alert(низ)• confirm(низ)• prompt(низ)• defaulStatus - определя текста, който ще се появява в Status Bar-а на документa.• window.status - същото действие като defaulStatus
  63. 63. Пример:(с натискане на бутоните се пише и съответноизтрива status bar-a! Тук триенето пак еизписване, но на празен низ!)<html><head><title>Промяна в status bar!-а</title><script language="JavaScript"><!-- hidefunction statbar(txt) {window.status = txt;}// -->
  64. 64. </script></head><body> <form> <input type="button" name="look"value="Изпиши!" onClick="statbar(Вижstаtusbar-a!);"> <input type="button" name="erase"value="Изтрии!" onClick="statbar();"> </form></body></html>
  65. 65. СЪБИТИЯ В JavaScriptВ JavaScript това са действия, които се извършватвърху Web страницата. С тяхна помощ можете даследите какво става на страницата ви.Пример за събитие:• посочването с мишката върху някаквакартинка;• кликването върху картинката ...Съществуват методи дефинирани в JavaScript заприхващане на събития, които осигуряватразпознаването и изпълнението на желанотодействие.
  66. 66. Javascript обработва събитията с таканаречените манипулатори на събития. Такапри кликване ще се извика манипулатораonClick, при посочване onMouseover и т.н.Структура на манипулаторите на събития:onСъбитие=(оператори)Самия манипулатор на събитието може дабъде извън таговете<SCRIPT></SCRIPT>.
  67. 67. Можете да го сложите например в тага <А> .Пример(създаване на хипервръзка, при чието посочване сепоказва alert прозорец с обяснение):<A href="http://www4u.search.bg" onMouseOver="alert(HTML и JavaScript уроци!);return true;">WWW4U</A> Ако смените манипулатора OnMouseover с OnClick, alertпрозореца ще се показва при кликване вместо припреминаване с мишката върху хипервръзката.
  68. 68. Събитията допустими в JavaScript са:• ONLOAD=”SCRIPT”Възниква, когато браузъра завърши зареждането напрозорец или фреймове във <FRAMESET>.• ONUNLOAD=”SCRIPT”Възниква, когато браузъра затвори прозорец илифрейм.• ONCLICK=”SCRIPT”Възниква при натискане с мишката върху елемент.• ONBLCLICK=”SCRIPT”Възниква при натискане на два пъти с мишката върхуелемент.
  69. 69. • ONMOUSEDOWN=”SCRIPT” Възниква, когато бутона на мишката е натиснат върху елемент.• ONMOUSEUP=”SCRIPT” Възниква, когато бутона на мишката се отпусне върху елемент.• ONMOUSEOVER=”SCRIPT” Възниква, когато мишката премине върху елемент.• ONMOUSEMOVE=”SCRIPT” Възниква, когато мишката се движи докато е върху елемент.
  70. 70. • ONMOUSEOUT=”SCRIPT” Възниква, когато мишката излезе извън елемент.• ONFOCUS=”SCRIPT” Възниква, когато елемента придобие фокус.• ONBLUR=”SCRIPT” Възниква, когато елемента загуби фокус.• ONKEYPRESS=”SCRIPT” Възниква, когато е натиснат и отпуснат клавиш върху елемента.• ONKEYDOWN=”SCRIPT” Възниква, когато е натиснат клавиш върху елемента.
  71. 71. • ONKEYUP=”SCRIPT” Възниква, когато е отпуснат клавиш върху елемента.• ONSUBMIT=”SCRIPT” Възниква, когато се подават данни от форма. Прилага се само към <FORM> елемент.• ONRESET=”SCRIPT” Възниква, когато се изчиства форма. Прилага се само към <FORM> елемент.• ONSELECT=”SCRIPT” Възниква, когато потребителят избере текст или текстово поле.• ONCHANGE=”SCRIPT” Възниква, когато стойността на елемент се промени.
  72. 72. Пример: Да се напише скрипт, реализиращ три от най-използваните събития - щракване върху обект (onClick), - зареждане на страница (onLoad) - излизане от нея (onUnload)Решение:<HTML><HEAD><TITLE>Пример за прихващане на събитие</TITLE><SCRIPT language="JavaScript">functionchangeColor(color) { document.bgColor=color}</SCRIPT></HEAD>
  73. 73. <BODY onLoad=alert("Здравейте") onUnload=alert("Довиждане")><h1><center>Натискайки бутоните променяш цветана фона!</center></h1><form><input type=button value="Син"onClick="changeColor(blue)"><br><input type=button value="Червен"onClick="changeColor(red)"><br><input type=button value="Жълт“onClick="changeColor(yellow)"><br><input type=button value="Зелен"onClick="changeColor(green)"><br><input type=button value="Неви"
  74. 74. onClick="changeColor(#000080)"><br><input type=button value="Акуа"onClick="changeColor(#00FFFFF)"></form></BODY></HTML>
  75. 75. УпражненияЗадача 1: Декларирайте променлива от тип number (string, boolean), присвоете й стойност и я изведете в текущия документ.Задача 2: Създайте собствен обект (например Animal), който има 3 атрибута (например name, kind и age) и изведете всеки от тях на отделен ред в текущия документ.Задача 3: Създайте масив от 3 елемента и го запълнете съответно с името, презимето и фамилията си. После използвайки цикъла for го изведете в текущия документ..
  76. 76. УпражненияЗадача 4: Създайте функция, която да изписва n на брой пъти (n=1,2,3...) даден текст, след който да преминава на нов ред. Във функцията използвайте цикъл while.Задача 5: Да се напише JavaScript, с помощта на който когато мишката е върху хипервръзка в status bar-a се изписва не хипервързката, а някакъв потребителски текст.Задача 6: Как ще достигнете до: а) първата и втората снимка б) имената answer1, r1, r3 имайки следната част от програмен код:
  77. 77. <p><center><img src="WFall.jpg" name="picture1"width=”500” height=”250” border=”0”><p> <form name="Form1"> Харесва ли Виснимката? <input type="text" name="answer1"value=""><br> </form><br><center><img src="WFall.jpg" name="picture1"width=”250” height=”125” border=”0”>
  78. 78. <p> <form name="Form2">Губи ли се от въздействието на природната картина при този размер?<br> <input type="radio" name="r1" value="v1">да<br> <input type="radio" name="r2" value="v2">не<br> <input type="radio" name="r3" value="v3">незнам<br> </form> </center></center>
  79. 79. Източникhttp://iea.fmi.uni-sofia.bg/rip/

×