1 / 52

JavaScript

JavaScript. Leksion 4. Apletet ne Java dhe JavaScript. Apletet ne Java Programe te shkurtra qe i bejne faqet Web me inteligjente dhe interaktive Dergohen si nje skedar i vecante bashke me dokumentin HTML Apletet nuk punojne gjithmone mire ne te gjithe browserat

saima
Télécharger la présentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. JavaScript Leksion 4

  2. Apletet ne Java dhe JavaScript • Apletet ne Java • Programe te shkurtra qe i bejne faqet Web me inteligjente dhe interaktive • Dergohen si nje skedar i vecante bashke me dokumentin HTML • Apletet nuk punojne gjithmone mire ne te gjithe browserat • Apletet duhet te jene te aktivizuar ne browser

  3. Apletet ne Java dhe JavaScript • JavaScript • Shtohet direkt ne kodin HTML • Perdorimet me te shpeshta • Verifikimi i informacionit te formave • Krijimi i butonave rollover • Banera reklamash • Dritare Pop-up

  4. ApletetdheInterpretuesit Java Kjo figure tregonnje web browser qe ka njeinterpretues Java e ekzekutonprograminlokalisht ne kompjuterin e perdoruesit, duke liruar web serverin per qellimetetjera. • Kompilimieshteprocesi me anetetecilitnje program konvertohetnganjeskedartekst i kodit, ne njeskedarteekzekutueshemtequajturnje applet • Per tathjeshtuarketeproceskompleks, zhvilluesitnga Netscape dhe Sun Microsystems krijuannjenenbashkesiteJavestequajturJavaScript.

  5. Çfareeshte JavaScript? • JavaScript u dizenjua per t’i shtuar interaktivitet faqeve HTML • JavaScript eshte nje gjuhe skriptimi • Nje gjuhe skriptimi eshte nje gjuhe programimi e lehte (e thjeshtuar) • JavaScript eshte nje gjuhe e interpretuar (dmth qe skriptet ekzekutohen pa patur nevoje qe te kompilohen paraprakisht) • Kushdo mund ta perdore JavaScriptin pa patur nevoje per liçense • JavaScript eshte gjuha e skriptimit me popullore ne internet dhe punon ne te gjithe browser-at kryesore si Internet Explorer, Firefox, Chrome, Opera, Safari.

  6. Ndryshimi midis Java-esdhe 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 • 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. • JavaScript mund te mos jete nje gjuhe llogaritese aq e fuqishme sa Java, por eshte me e thjeshte ne perdorim • Pra JavaScript eshte me shume nje zgjerim i HTML-se sesa nje gjuhe programimi e mirefillte.

  7. KarakteristikatkryesoreteJavascriptit • 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

  8. Shembullinje Web Site duke perdorur JavaScript

  9. Shkrimiinjeprogrami JavaScript • Programet JavaScript mund te vendosen • Direkt ne skedarin HTML ose • Mund te ruhen si skedare te jashtem. • Ju mund ta vendosni JavaScript-in kudo brenda skedarit HTML : • Brenda tageve <head> ose • Brenda tageve <body>

  10. Perdorimiitagut <script> <script src=“url” type=“text/javascript”></script> • Vecoria SRC kerkohetvetemneseju e vendosniprogamin ne njeskedartendare <script type=“text/javascript”> komandatdhekomentet e skriptit </script> JavaScript eshtetashmegjuha default e tegjithebrowsera-vemodernedhe e HTML5, prandajnukeshte e domosdoshmeqetevendoset type="text/javascript" ne tagun <script>.

  11. Shembull-1 <html> <head></head> <body> Skripti im i parë me Javascript <br/> Ky është një dokument normal Html <br/> <script> document.write("Kjo është Javascript!")// kod Javascript </script> <br/> Përsëri në HTML </body> </html>

  12. KomentShembull-1 • N.q.s ju po përdorni një browser që suporton JavaScript në moment ju do shihni qe skripti do të punojë. • Duhet theksuar se ky skript nuk është i dobishëm, sepse ju mund ta shkruani atë në HTML më shpejt dhe më shkurtër, por qëllimi ishte qe të tregohej se si përdoret taget e HTML-së <script>. Ju mund ta përdorni këtë tag kudo në dokumentin tuaj. • Browserat e vjetër mund t’i trajtojne skriptet si permbajtje te dokumentit, prandaj eshte mire qe skriptet të vendosen midis komenteve për t’u siguruar që keto browsera te mos i shfaqin skriptet.

  13. Emrat e variablavedhefunksioneve (1) • Neve, si programues, na 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.

  14. Emrat e variablavedhefunksioneve(2) Shembuj emrash te vlefshem per variablat dhe funksionet: • x • add_two_num • x13 • _whatever • $money_string

  15. JavaScript • Ne vazhdim te leksionit 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)

  16. Deklarimi i variablave (1) • 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;

  17. Deklarimi i variablave (2) • Nqs nuk specifikojme nje vlere inicializuese te variablave kur i deklarojme ato, vlera e tyre fillestare eshte nje vlere e papercaktuar (undefined) Javascript. • Javascript eshte case-sensitive, dmth: x dhe X dy emra variablash te ndryshem. • Kur i jepni nje variabli nje vlere tekst, duhet ta vendosni ate brenda thonjezave • Nese ju e rideklaroni nje variabel ne Javascript, ai nuk do ta humbase vleren ekzistuese.

  18. Fusha e veprimit – VariablatLokale • Nje variabel i deklaruar brenda nje funksioni ne JavaScript behet LOCAL dhe mund te aksesohet vetem brenda atij funksioni. Pra ky variabel ka fushe veprimi Lokale • Ju mund te keni varibla lokale me te njejtin emer ne funksione te ndryshme, sepse variablat lokale njihen vetem nga funksioni ne te cilin jane deklaruar. • Variablat lokale shkaterrohen kur ju dilni nga funksioni.

  19. Fusha e veprimit – VariablatGlobale • Variablat e deklaruarjashtenjefunksionibehen GLOBAL, dhetegjithaskriptetdhefunksionet ne faqen web mund ta aksesojne ate. • Variablat global shkaterrohenkurjumbyllnifaqen. • Nqsnukvendosimfjalenkyce “var” ne deklarimin e variablave, ateherevariablibehetgjithmone GLOBAL. • Psh, shprehja: • emerMakine="Volvo"; Do tedeklarojenjevariabelemerMakine, si ne variabel global, edheneseajoekzekutohetbrendanjefunksioni.

  20. Tipet e variablave • Nje ndryshim i madh ndermjet Javascript dhe gjuheve te tjera si JAVA, C eshte qe Javascript eshte pa tip (untyped) (ose ndryshe weekly typed) • 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.

  21. 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; }

  22. OperatoretAritmetike

  23. Operatoret e Vleredhenies (1)

  24. Operatoret e Vleredhenies (2)

  25. Operatoret e Krahasimit

  26. OperatoretLogjike

  27. Strukturat e kontrollit – Degezimet (1) 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; }

  28. Strukturat e kontrollit – Degezimet (2) Switch Perdoretkurnjevariabelmundtemarrenjenumervlerashdhe ne duamtetestojme per ketovlera. Eshte me i shkurterdhe me i lehte per t’ulexuar se njenumerinstruksionesh if. switch (n) { case 1://instruksione break; case 2://instruksione break; default://instruksione nqstetjeratnukplotesohen break; }

  29. Strukturat e kontrollit – Ciklet(1) Nje cikel eshte ajo strukture programi qe i detyron instruksionet brenda tij, qe 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++; }

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

  31. JavaScript Break dhe Continue • Jane dy shprehje ne JS qe mund te perdoren brenda cikleve: break dhe continue. • Shprehja Break • Perdoret kur duam te nderpresim cilkin dhe te vazhdojme ekzekutimin e kodit qe vjen pas ciklit, nese ka. • Shprehja Continue • Perdoret per te nderprere ekzekutimin e ciklit per vleren aktuale dhe te vazhdojme ekzekutimin e ciklit me vleren tjeter (vleren pasardhese).

  32. Shembull - 2 (Break) <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3){break;} document.write("The number is " + i); document.write("<br />"); } </script> Rezultati The number is 0 The number is 1 The number is 2

  33. Shembull -3 (Continue) <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3){continue;} document.write("The number is " + i); document.write("<br />"); } </script> Rezultati The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10

  34. Shprehja For...In ne JavaScript • Shprehja for...in perdoret per tebredhurneperelementet e njevektori me aneteveçorivetenjeobjekti. Kodi ne trupin e ciklit for ... in ekzekutohetnganje here per çdo element/veçori. • Sintaksa • for (variable in object) • { • code to be executed • }

  35. Shembull - 4 for...in <script type="text/javascript"> var x; var mycars = new Array(); mycars[0] = "Saab“; mycars[1] = "Volvo“; mycars[2] = "BMW“; for (x in mycars) { document.write(mycars[x] + "<br />"); } </script>

  36. Funksionet ne Javascript • Per te penguar browserin qe te ekzekutoje nje skript sapo ngarkohet faqja, mund ta ndertoni skriptin si nje funksion. • Nje funksion permban kod qe do te ekzekutohet vetem nga nje ngjarje ose nga nje thirrje e atij funksioni. • Mund te therrisni nje funksion kudo brenda faqes (ose madje edhe nga faqe te tjera nese funksioni eshte i vendosur ne nje skedar te jashtem .js) • Funksionet percaktohen ne fillim te faqes, ne seksionin e kokes, ndërmjet tageve <head> të faqes HTML.

  37. Si deklarohet nje funksion? • Sintaksa per te krijuar nje funksion eshte: function emerfunksioni(var1,var2,...,varX) { kod } • var1, var2, etj jane variabla ose vlera qe i kalohen funksionit. Kllapat { dhe } percaktojne fillimin dhe fundin e funksionit. • Shenim: Nje funksion pa parametra duhet te perfshije kllapat () pas emrit te funksionit: function functionname() { some code } • Shenim: Mos harroni rendesine e shkronjave te medha dhe te vogla ne JavaScript! Fjala “function” duhet te jete me shkronja te vogla, se perndryshe do te ndodhe nje gabim!

  38. Shprehja “return” • Shprehja return perdoret per te specifikuar vleren qe do te kthehet nga funksioni. • Keshtu qe funksionet qe do te kthejne vlere duhet te perdorin shprehjen return. • Shembull: • Funksioni i meposhtem kthen prodhimin e dy numrave (a dhe b): function prod(a,b) { x=a*b; return x; } • Kur e therrisni kete funksion, duhet t’i kaloni dy parametra: product=prod(2,3) • Vlera e kthyer nga funksioni prod() eshte 6, dhe ajo do te ruhet ne nje variabel te quajtur product.

  39. Shembulli-5 <html> <head> <script> function shtyp() { alert("MIRESEVINI!"); } </script> </head> <body> <form> <input type="button" name="Button1" value="Më shtyp" onclick="shtyp()“/> </form> </body> </html> • Nese rreshti: alert(“MIRESEVINI!"),nuk do te shkruhej brenda nje funksioni, ai do te ishte ekzekutuar sapo te ishte ngarkuar ky rresht. Ndersa tani, skripti nuk ekzekutohet perpara se perpara perdoruesi te shtype butonin.

  40. Komente Shembulli-5 • Ky skript do të krijojë një buton dhe kur ju ta shtypni atë, do të hapet një dritare që thotë: " MIRESEVINI!". • Në fillim funksioni ngarkohet dhe ruhet në memorje. Pastaj krijohet një buton me tagun <form> (HTML). Në tagun <input> është eventi 'onclick', i cili i tregon browserit se cilin funksion duhet të thërrasë kur ky buton të shtypet (sigurisht n.q.s browseri suporton JavaScript). • Funksioni ' shtyp()' është deklaruar në fillim të HTML-së tek tagu <head>. Ky funksion ekzekutohet, kur shtypet butoni. • Metoda 'alert()‘ është deklaruar në JavaScript, kështu ju duhet vetëm ta thërrisni atë. Ka shumë metoda të ndryshme që ju mund t’i thërrisni, te cilat do t’i shohim me vone

  41. Shembull-6 Të shohim se si mund të lexoni diçka, që një përdorues ka futur në një forme. <html> <head> <script> <!-- Fsheh skriptin nga brousera të vjetër function emrin(str) { alert("MIRESEVINI "+str+“ !"); } // përfundon fshehjen--> </script> </head> <body> Ju lutemi jepni emrin: <form> <input type="text" name="Emri" onBlur="emrin(this.value)" value=""> </form> </body> </html>

  42. Komente Shembull-6 • Kemi disa elementë të rinj të shtuar në këtë skript. • Sigurisht që i vutë re komentet në skript. Në këtë mënyrë ju mund të fshihni skriptin nga browserat që nuk e suportojne JavaScript-in. Ju duhet t’i vendosni ato në mënyrën e treguar më sipër. Fillimi i komentit duhet të jetë menjëherë pas tagut <script> dhe mbarimi para tagut </script>. • Në këtë dokument HTML ju keni një element forme ku mund të shkruani emrin tuaj. • 'onBlur' tek tagu <input> i tregon browserit se cilin funksion duhet të thërrasë kur diçka është futur në forme. • Funksioni ' emrin(str)' do të thërritet kur ju të ‘largoheni' nga ky element forme ose keni shtypur “enter” pasi keni futur diçka. Funksioni do të marrë stringun e futur nëpërmjet komandës 'emrin(this.value)'. 'This.value' nënkupton vlerën e futur në këtë element forme.

  43. Shembull-7 <html> <head> <script> <!-- E fsheh skriptin nga brousera të vjetër function Hello() { alert("MIRESEVINI !"); } // përfundon fshehjen--> </script> </head> <body> <a href ="" onMouseOver=“Hello()">link</a> </body> </html> • Kjo përdor metodën onMouseOver dhe funksioni Hello() thërritet kur ndodh ngjarja.

  44. Perdorimi i JavaScript-it tejashtem • Nganjehere mund t’ju duhet qe te njejtat skripte, t’i perdorni ne disa faqe. Per te mos i shkruar skriptet ne çdo faqe, mund t’i shkruani ato ne nje skedar te jashtem, te cilin e ruani me prapashtesen .js • Shenim: Skripti i jashtem nuk duhet te permbaje tagun <script>! • Per ta perdorur kete skript te jashtem, vendoseni skedarin .js tek atributi "src" i tagut <script>: <html> <head> <script src="xxx.js"></script> </head> <body> </body> </html> • Shenim: Skriptin mund ta vendosni saktesisht aty ku do ta vendosnit normalisht skriptin (si tek seksioni i kokes, ashtu edhe tek trupi i dokumentit)!

  45. Kutite e dialogut (Popup boxes) • Ne JavaScript mund te krijojme 3 lloje kutishe dialogu : 1. Alert box, 2. Confirm box, 3. Prompt box.

  46. Alert Box • Nje alert box (dritare mesazhi) shpesh perdoret nese deshironi qe informacioni t’i shfaqet perdoruesit. Kur shfaqet nje dritare mesazhi, perdoruesi duhet te klikoje “OK”, ne menyre qe te vazhdoje me tej. • Sintaksa: • alert("sometext")

  47. Shembull 8 - Alert Box <html><head><script type="text/javascript">function show_alert(){alert("I am an alert box!");}</script></head><body><input type="button" onclick="show_alert()" value="Show alert box" /></body></html>

  48. Confirm Box • Nje confirm box (dritare kofirmimi) shpqsh perdoret nese deshironi qe perdoruesi te verifikoje ose te pranoje diçka. Kur shfaqet nje dritare kofirmimi, perdoruesi duhet te shtype ose "OK“, ose "Cancel”, ne menyre qe te vazhdoje me tej. • Nese perdoruesi shtyp "OK", dritarja kthen true. Nese perdoruesi klikon "Cancel", dritarja kthen false. • Sintaksa: • confirm("sometext")

  49. Shembull 9 - Confirm Box <html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button");if (r==true)  {  alert("You pressed OK!");  }else  {  alert("You pressed Cancel!");  }}</script></head><body><input type="button" onclick="show_confirm()" value="Show confirm box" /></body></html>

  50. Prompt Box • Nje prompt box (dritare prompti) shpesh perdoret nese deshironi qe perdoruesi te jape nje vlere perpara se te hyje ne nje faqe. • Kur shfaqet nje prompt box, perdoruesi duhet te klikoje "OK" ose "Cancel" ne menyre qe te vazhdoje me tej, pasi ka futur nje vlere inputi. • Nese perdoruesi klikon "OK" dritarja kthen vleren e inputit. Nese perdoruesi klikon "Cancel" dritarja kthen null. • Sintaksa: • prompt("sometext","defaultvalue")

More Related