JavaScript

1. JavaScript Leksion 8

2. JavaScript • JavaScript gjuha e skriptimit me popullore ne internet dhe punon ne te gjithe browser-at kryesore si Internet Explorer, Firefox, Chrome, Opera, and Safari. • Skriptet e shkruara me JavaScript mund te futen brenda faqeve HTML. • Faqet web qe bashkeveprojne me perdoruesit dhe qe u ofrojne atyre cilesi te larte te faqeve dhe informacione te personalizuara, njihen edhe si faqe web inteligjente. • Faqet inteligjente mundesojne kryerjen e veprimeve ne menyre automatike, qe si te tilla ia shtojne vleren webit. Psh: keto faqe mund te gjenerojne pergjigje individuale per secilin vizitor ne veçanti dhe me kete ata krijojne pershtypjen e perkujdesjes ndaj tyre, meqe keto faqe jane te afta te analizojne sjelljen dhe kerkesat e vizitoreve ne baze te te cilave formojne edhe pergjigjen e pershtatshme. E gjithe kjo realizohet duke perdorur Javascript.

3. Cili eshte ndryshimi midis Java-es dhe JavaScript-it? • Megjithese nga emri duken njesoj, Java nuk eshte njesoj si JavaScript! • Keto te dyja jane dy teknika te ndryshme per programime ne Internet. Java eshte nje gjuhe programimi, ndersa JavaScript eshte nje gjuhe skriptimi (siç duket dhe nga emri). • Javascripti ne dallim nga Java, nuk ka nevoje te perkthehet nga kompjuteri (compiled). Pra ai paraqitet si nje tekst i integruar ne HTML, qe perdoret per te gjeneruar faqet web. Kjo nenkupton qe per te shkruar Javascriptin, mjafton edhe nje editor teksti i thjeshte. • Pra JavaScript eshte me shume nje zgjerim i HTML-se sesa nje gjuhe programimi e mirefillte.

4. Karakteristikat kryesore te Javascriptit: • Skripti mund te perbehet vetem nga nje sekuence komandash • Nuk ka nevoje per paraqitjen statike te variablave, sepse ato mund te deklarohen kudo ne program • Objektet e paracaktuara ne Javascript, ne fakt, perbejne objektet e te gjithe web browserave dhe web serverave (si document, form, elementet ne forme, framet, dritaret-window, etj.) • Eshte kompatibel me te gjithe platformat

5. Variablat dhe emrat e funksioneve • Si programues duhet te zgjedhim emrat per variablat dhe funksionet. • Emrat e variablave dhe funksioneve duhet te ndjekin rregullat e meposhtme: • Karakteri i pare duhet te jete nje shkronje alfabeti (e madhe ose e vogel), nje (_), ose shenje dollari ($). • Nuk mund te perdorni nje numer si shkronje te pare. • Emrat nuk duhet te permbajne hapesira. • Emrat nuk duhet te jene ndonje nga fjalet e rezervuara te gjuhes.

6. Shembuj emrash te vlefshem per variablat dhe funksionet: • x • add_two_num • x13 • _whatever • $money_string

7. Variablat dhe emrat e funksioneve • Rekomandohet te perdoren emra pershkrues per variablat dhe funksionet dhe te perdoret nje menyre standarte e emertimit te tyre. Shembuj • add_two_num • addTwoNumbers Javascript perdor te dyten.

8. Fjalet e rezervuara te JavaScript • Ka nje numer fjalesh qe perbejne komponentet e gjuhes Javascript, te cilat paraqiten ne tabele. • Keto fjale nuk mund te perdoren per emra variablash dhe funksionesh sepse kompilatori nuk mund te dalloje nje komande default te Javascript nga emri i funksionit apo variablit tone.

9. JavaScript • Javascript vendoset brenda tag-eve <SCRIPT>. • Javascript eshte case-sensitive. • Cdo instruksion Javascript mbaron me pikepresje (;). • Javascript injoron hapesirat.

10. JavaScript • Do te shohim struktura baze te programimit. Keto struktura jane te ngjashme ne shume gjuhe programimi. • Deklarimi i variablave • Perdorimi i operatoreve • Krijimi i strukturave te kontrollit (degezimet & ciklet) • Funksionet (built-in dhe te krijuar nga programuesi)

11. Deklarimi i variablave • Variabli eshte nje emer qe i caktohet nje vendi ne memorie per te ruajtur te dhena. Perpara se te perdorni nje variabel ne nje program ne Javascript, duhet ta deklaroni ate. • Variablat deklarohen me fjalen var si: var x; var y; var sum; • Mund te deklarojme shume variabla me te njejten fjale var: var x, y, sum; • Mund te kombinojme deklarim te variablave me inicializim te tyre: var x=1, y=3, sum=0; • Nqs nuk specifikojme nje vlere inicializuese te variablave kur i deklarojme ato, vlera e tyre fillestare eshte nje vlere e papercaktuar Javascript. • Javascript eshte case-sensitive, dmth: x dhe X dy emra variablash te ndryshem.

12. Tipet e variablave • Nje ndryshim i madh ndermjet Javascript dhe gjuheve te tjera si JAVA, C eshte qe Javascript eshte pa tip (untyped). • Kjo do te thote qe nje variabel Javascript mund te mbaje nje vlere te cdo tipi te dhenash, dhe tipi i te dhenave nuk duhet te vendoset kur deklarohet variabli. • Kjo lejon te ndryshohet tipi i te dhenave te variablit gjate ekzekutimit te programit, psh: var x=10; x=“ten”; • Ne kete shembull variabli x ne fillim ka marre vleren e nje numri te plote 10, pastaj te nje stringu.

13. Perdorimi i operatoreve Operatoret jane ato qe veprojne mbi variablat. Operatori (=) eshte operatori i vleredhenies Operatori (+) eshte operatori i shtimit. var x=1, y=3, sum=0; sum=x+y; Operatore te tjere perdoren per krahasim “==” per barazim, “>” etj. var x=1, y=3, sum=0; if (sum==0) { sum=x+y; }

14. Operatoret e Javascript Llogarites (-) mohimi unar (++) inkrementimi (--) dekrementimi (*) shumezimi (/) pjesetimi (%) mbetja aritmetike (+) mbledhja (-) zbritja

15. Operatoret e Javascript Logjik (!) Not logjik (>) (<) (<=) (>=) (==) (!=) E ndryshme (&&) And logjik (||) Or logjik Bitwise

16. Operatoret e Javascript Vleredhenia (=) – vleredhenia Operatore te perbere te vleredhenies (+=) – mbledhja (-=) – zbritja (*=) – shumezimi (/=) – pjesetimi (%=) – mbetja aritmetike

17. Strukturat e kontrollit (Ciklet & Degezimet) Degezimet If Instruksioni if eshte nje strukture kontrolli shume e rendesishme, lejon programin te kryeje nje test dhe te veproje bazuar ne rezultatin e testit. Per shembull if ((x==1) && (y==3)) { sum = y-x; } If perdoret edhe me else per shembull if (sum==0) { sum = x+y; } else { subtotal = sum; }

18. Strukturat e kontrollit (Ciklet & Degezimet) Switch Perdoret kur nje variabel mund te marre nje numer vlerash dhe ne duam te testojme per keto vlera. Eshte me i shkurter dhe me i lehte per t’u lexuar se nje numer instruksionesh if. switch (n) { case 1://instruksione break; case 2://instruksione break; default://instruksione nqs te tjerat nuk plotesohen break; }

19. Ciklet Nje cikel eshte ajo strukture programi qe i detyron instruksionet brenda ciklit te ekzekutohen derisa te permbushet nje kondite dhe cikli perfundon. while Perdoret kur nuk di sa here duhet te ciklosh, por di qe duhet ndaluar kur ndeshet kondita. var x=1; while (x<=10) { //derisa x me i madh se 10 //instruksione x++; }

20. Strukturat e kontrollit (Ciklet & Degezimet) for Perdoret kur di saktesisht sa here duhet te ciklosh. var x; for (x=1; x<=10; x++) { //instruksione }

21. Objektet, Eventet, DOM • Objektet • Operatori new • DOM (Document Object Model) • Array • Eventet • onClick • onSubmit • onMouseOver • onMouseOut • onFocus • onChange • onBlur • onLoad • onUnload

22. Objektet • Nje objekt eshte nje koleksion variablash (parametrash) dhe funksionesh (metodash). • Sintaksa e perdorimit te nje objekti eshte: objekt.parameter ose objekt.method(). • Nje string eshte nje objekt ne Javascript dhe ka disa metoda dhe parametra. • var StringVar=new String(“Ky eshte nje string me karaktere”); • var x=StringVar.length;//gjatesia e stringut • var x=StringVar.toUpperCase();//kthen ne shkronja te medha.

23. Objektet • Javascript ka keto objekte te gatshme: String, Math, Date, Array. • Objekti String ka nje bashkesi metodash per manipulimin e stringjeve. • Objekti Math eshte nje koleksion metodash dhe vecorish per te kryer veprime aritmetike si min(), max(), sin(), cos() etj. • Objekti Date eshte nje koleksion metodash per te punuar me datat dhe oren. • Objekti Array i lejon programuesit te krijojne koleksione me te dhena.

24. Objektet • Operatori new • Objektet dhe array-t duhet te krijohen perpara se te perdoren ne programe Javascript-i. • Ne perdorim operatorin new per te krijuar nje instance te re te nje objekti ose te nje array. • Ndryshe themi qe operatori new krijon nje kopje te nje objekti ekzistues ose te nje strukture array dhe i vendosim pastaj emrin qe deshirojme. • Sintaksa eshte o = new Object(); • Meqe objektet jane te ndertuar me metoda (funksione) dhe parametra (variabla), objekti i ri i krijuar “o” ne kete rast ka te gjitha metodat dhe parametrat e objektit origjinal. Parametrat vendosen ne vlerat e tyre default.

25. DOM (Document Object Model) • Browser-i na siguron nje seri objektesh. • Dritarja e browser-it ku shfaqet faqja njihet si objekti dritare (window object). • Faqja HTML e paraqitur nga browser-i njihet si objekti dokument (document object). • Objekti dokument eshte me i perdoruri ne client-side Javascript. • Elementet HTML qe ne i shtojme nje faqeje gjithashtu zgjerojne hierarkine e objekteve. • Si shembull mund te marrim nje forme dhe elementet qe ndodhen ne forme. Kjo do te thote qe mund t’i referohemi objekteve si me poshte:

26. DOM • window.document.forms[0] – i referohet formes se pare ne dokument. Format jane te implementuara si array ne DOM. Nqs kemi me shume se nje forme ne faqe numrat fillojne nga 0. • window.document.Form1 – i referohet formes me emer Form1. • window.document.Form1.FirstName.value – i referohet vleres se shtypur ne textbox-in te quajtur FirstName te formes se quajtur Form1.

27. shembull • <HTML> • <HEAD> • <TITLE> Forme e thjeshte </TITLE> • </HEAD> • <BODY> • <FORM NAME=“Form1”> • Name:<INPUT TYPE=“TEXT” NAME=“FirstName”><BR> • <INPUT TYPE=“Button” VALUE=“Submit Info”> • </FORM> • <FORM NAME=“Form2”> • Name: <INPUT TYPE=“TEXT” NAME=“LastName”><BR> • <INPUT TYPE=“Button” VALUE=“Submit Info”> • </FORM> • </BODY> • </HTML>

28. DOM • forms[0] – i referohet formes se pare brenda ketij dokumenti. • Form1 – i referohet formes me emer Form1 ne kete dokument. • Form1.FullName.value – i referohet vleres se shtypur ne browser nga klienti ne textbox-in e quajtur FullName, ne formen e quajtur Form1 ne kete dokument.

29. Array (Vektoret) • Javascript, e ngjashme me gjuhet e tjera te programimit, ka mundesine e perdorimit te strukturave te te dhenave te quajtura array. • Nje array eshte nje koleksion me te dhena ku cdo pjese e te dhenave eshte e mbajtur ne nje pozicion te numeruar brenda nje array. • Cdo pozicioni ne nje array i jepet nje indeks duke filluar nga zero, zero pozicioni i pare, nje i dyti etj. • Nje array eshte implementuar si nje objekt ne Javascript dhe mund te krijohet duke perdorur new.

30. Array • var a=new Array();//krijon nje array e quajtur “a” • a[0]=1.2;// i vendos vlere elementit te pare • a[1]=“Javascript”;// i vendos vlere elementit te dyte • Array jane te rendesishem per t’u kuptuar sepse nje numer komponentesh te Document Object Model (DOM) si format, imazhet etj. jane implementuar si array.

31. Eventet (Ngjarjet) • Ngjarjet jane trigera qe therrasin nje nga funksionet tone. • Programet Javascript client-side nuk do te ekzekutohen derisa te ndodhe nje ngjarje. • Nje ngjarje mund te jete nje veprim si klikimi ne nje buton, vendosja e mouse-it mbi nje imazh, etj.

32. Eventet • onClick() • Nje event click ndodh kur nje buton, checkbox, radio buton, reset buton, submit buton klikohet. • Ky event perdoret rregullisht per butona per te filluar ekzekutimin e scriptit. • <INPUT TYPE=“Button” VALUE=“Click Me” onClick=“window.alert(‘You Clicked Me’);”> • Kur klikojme butonin “Click Me” ekzekutohet instruksioni Javascript window.alert(‘You Clicked Me’);

33. Eventet • onSubmit() • Nje event submit ndodh kur perdoruesi pranon (submit-nenshtron) nje forme. Ky event perdoret shpesh me nje forme dhe nje buton submit per te filluar ekzekutimin e scriptit. • <FORM action=“form.asp” onSubmit=“return checkform();”> • Kur perdoruesi klikon ne butonin submit, ekzekuton funksionin checkform(). Nqs forma kalon te gjitha testet e validimit, kthehet nje vlere true dhe te dhenat kalohen te programi “form.asp”.

34. Eventet • onMouseOver() • Nje event onMouseOver ndodh kur perdoruesi pozicionon mouse-in mbi nje hiperlink, ose nje zone te linkuar te nje imazhi te client-side. • <a href=http://synergy.simplenet.com/simpsons/ onMouseOver=“window.status=‘The best Simpsons Webpage on the NET!’; return true; ”>Click for information on the Simpsons.</a> • Ne kete shembull kur vendoset mouse-i mbi link ne rreshtin e statusit te dritares se browserit afishohet mesazhi.

35. Eventet • onMouseOut() • Ky event ndodh kur perdoruesi heq mouse-in nga linku apo zona e linkuar. • <a href=http://synergy.simplenet.com/simpsons/ onMouseOut=“window.status=‘The best Simpsons Webpage on the NET!’; return true; “>Click for information on the Simpsons</a>

36. Eventet • onFocus() • Ky event ndodh kur nje perdorues i jep fokus ose klikon mbi nje kontroll te formes. • <INPUT TYPE=“TEXT” NAME=“Month” onFocus=“window.status=(‘Please enter the month as two digits 01 deri 12’); return true;”> • Kur klikohet textbox-i, pra merr fokus nje mesazh paraqitet ne rreshtit e statusit te browser-it qe tregon se cfare duhet te shtypet.

37. Eventet • onChange() • Ky event ndodh kur nje vlere ndryshon ne textbox, textarea etj. • <INPUT TYPE=“TEXT” NAME=“Month” onChange=“window.status=(‘The value of the Month Changed!!!’); return true;”>

38. Eventet • onBlur() • Ky event ndodh kur perdoruesi largohet nga nje fushe password, tekst, tekstarea te nje forme HTML. • <INPUT TYPE=“TEXT” NAME=“Month” onBlur=“window.status=(‘The value of the Month Changed!!!’); return true;”> • <INPUT TYPE=“TEXT” NAME=“Year”> • onChange() dhe onBlur() nuk perdoren ne te njejten kohe.

39. Eventet • onLoad() • Ky event ndodh kur browser-i perfundon se ngarkuari nje dokument. • <BODY onLoad=“alert(‘Welcome to our website’);”> • onUnload() • Ky event ndodh kur levizim ne nje dokument tjeter. Psh kur perdorim butonin back ose klikojme ne nje link ne nje faqe tjeter etj. • <BODY onUnload=“alert(‘Thanks for checking out our website’);”>

40. Eventet • Eshte e mundur te specifikojme shume evente ne nje tag te vetem HTML. • <BODY onLoad=“alert(‘Welcome to our website’); onUnload=“alert(‘Thanks for checking out our website’);”>

41. Pyetje?