1 / 31

Programim ne Javascript

Programim ne Javascript. Programim ne Web Leksion 13. Shembull-1. <html> <head> Shembull me Javascript </head> <body> < br > Ky është një dokument Html < br > <script language=" Javascript "> document.write (" Ketu është Javascript !") // kod Javascript </script> < br >

dimaia
Download Presentation

Programim ne 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. Programim ne Javascript Programim ne Web Leksion 13 Iralda Mitro

  2. Shembull-1 <html> <head> Shembullme Javascript </head> <body> <br> KyështënjëdokumentHtml <br> <script language="Javascript"> document.write("KetuështëJavascript!") // kodJavascript </script> <br> Vazhdimii HTML </body> </html> Iralda Mitro

  3. Shembull-1 • Kyështërezultati: KyështënjëdokumentHtmlKetuështëJavascript!Vazhdimii HTML Iralda Mitro

  4. Funksionet • Funksionetzakonishtdeklarohenndërmjetetiketave <HEAD> tëfaqes HTML dhemë pas thirrenngangjarjetëndryshme. • Atongarkohenmëpërpara se njëpërdoruestëbëjëdiçkaqëmundtëthërrasënjëfunksion. Iralda Mitro

  5. Shembulli-2 <html> <head> <script language="Javascript"> function shtyp() { alert("MIRESEVINI!"); } </script> </head> <body> <form> <input type="button" name="Button1" value=“Klikoketu" onclick="shtyp()"> </form> </body> </html> Iralda Mitro

  6. Shembulli-2 • Kyskript do tëkrijojënjëbutondhekurjutashtypniatënjëdritare do tëhapet duke thënë: "MIRESEVINI!". • Nëfillimfunksioniload-ohetdhembahetnëmemorje. • Pastajnjëbutonkrijohet me etiketën<input> (HTML). • Nëetiketën <input> kemi 'onclick‘ qeithotëbrowseritcilinfunksionduhettëthërrasëkurkybutontështypet • Funksioni'shtyp()' ështëdeklaruarnëfillimtë HTML-sëteketiketa <head>. • Kurbutonishtypetkyfunksionekzekutohet. • Metoda 'alert()‘ ështëdeklaruarnë JavaScript, kështujuduhetvëtëmtathërrisniatë. Iralda Mitro

  7. Shembull-3: Leximinganjeforme <html> <head> <script language="Javascript"> function emrin(str) { alert("MIRESEVINI zoti"+str+"!"); } </script> </head> <body> Julutemijepniemrin: <form> <input type="text" name="Emri" onBlur="emrin(this.value)" value=""> </form> </body> </html> Iralda Mitro

  8. Shembull-3 • Nëkëtëdokument HTML jukeninjë element formekumundtëshkruaniemrintuaj. • 'onBlur' teketiketa <input> itregonklientit se cilinfunksionduhettëthërrasëkurdiçkaështëfuturnë form. • Funksioni 'emrin(str)' do tëthërritetkurjutë 'lini' këtëformëosekenishtypur enter pasikenifuturdiçka. Funksioni do tëmarrëstringun e futurnëpërmjetkomandës 'emrin(this.value)'. 'This.value' nënkuptonvlerën e futurnëkëtë element forme. Iralda Mitro

  9. Shembull-4: Funksioni Date • Ne keteshembullklientitiprintohetndryshimiifunditidokumentit. Junukduhettëshkruanidatënnëdokument , juvetëmshkruaninjë program tëvogël, njëskript. • Kurjutëbënindryshimenëtëardhmen, data ndryshonautomatikisht. <html> <head> </head> <body> Kjoështënjëfaqe e zakonshme HTML. <br> Ndryshimiifundit: <script language="Javascript"> document.write(document.lastModified) </script> </body> </html> Iralda Mitro

  10. Shembull-5 <html> <head> <script language="Javascript"> function Hello(str) { alert("MIRESEVINI !"); } </script> </head> <body> <a href ="" onMouseOver="hello()">link</a> </body> </html> // KetuperdoretmetodaonMouseOverdhefunksionihello() // thërritetkurngjarjandodh. Iralda Mitro

  11. Shembull-5 • NjerasttjeteriperdorimitteonMouseOver: <a href="faqe.htm" onMouseOver= "window.status='Një link qënuktëçonaskund'; return true"> • 'Window.status' julejontëshkruaninëstatusbartë web-brouserit. • Siç e shihnijuduhettëalternonithonjëzatteke me çiftetnëmënyrëqë JavaScript tëdallojë se kushështëstringuqëduhettëshfaqetnëstatusbar. • Pas stringutjuduhettëshkruani; return true. Ka dhenjë property tjerërqëlidhët me mouse-in si: onMouseout. Iralda Mitro

  12. Funksione date te tjerë • Tanido tëprintojmëkohënlokalenëdokumentintonë. • Kjometodëpërdorkohëndhedatën e sistemittëmakinëstuaj, kështun.q.sjuvendosindatën e makinës 5/17/1983 ju do tëmerrnidatëtëgabuarngakjometodë. • Kohataniështe: 10:51Data është: 30/12/2011 <script language="Javascript"> sot=new Date() document.write("Kohataniështë:",sot.getHours(),":", sot.getMinutes()) document.write("Data është:", sot.getMonth()+1,"/",sot.getDate(),"/",sot.getYear()); </script> Iralda Mitro

  13. Funksione date te tjerë • Nëfillim ne krijojmënjëvariabëlpërtëmbajturdatën. Kjobëhet me anëtë'sot=new Date()'. • N.q.s ne nukspecifikojmënjëdatëdheorëtëcaktuarbrowseripërdororënlokaledhe e vendosatënëvariablinsot. • Ne krijuamnjëobjektkoheicilipërmbanorënlokaledhedatën. Tanimundtishfaqimatonëdokument. • Juduhettëshkruani 'sot' paracdo 'get-metode' sepsepërndryshebrowserinuk do takuptojë se cilitobjekttireferohet. • MetodagetMonth()kthennjënumër midis 0 dhe 11 (0 nënkuptonJanarindhe 11 përDhjetorin), kështuqë ne duhettishtojmë 1 numrittëkthyerngametodanëmënyrëqëtëmarrimmuajin e saktë. Iralda Mitro

  14. Funksione date te tjerë • Jumundtëkrijoninjëdatë, përshembulldatënkurjukrijuatdokumentin. Pastajjumundtëllogarisnisaditëmëvonëdikushpolexondokumentintuaj, dhen.q.sështëmëivjetër se 10 ditëjumundtithoni: Kjoështëshumë e vjetërmos e lexo! • Përkëtëjuduhet data e krijimittëdokumentitdhe data e sotme. • Jumundtëinicializoninjëdatëkurkrijoninjëobjekt date. Kjo do dukejkështu: fillDoc= new Date(98,6,9). Juduhettëspecifikonivitintëparin, pastajmuajindhepastajditën . • Jugjithashtumundtëspecifikonidheorëngjithashtu : fillDoc=new Date(98,6,9,10,50,0). Numrat e parëjanëpërsëri data dhepastajvijnëora, minutatdhesekondat. • Javascriptnuk ka një tip tëvërtetë date, porsiç e shihnijumundtëpunoni me të. Kjopunonsepsedatatparaqitennganumriimilisekondaveqënë 1/1/1970 0:0h. Iralda Mitro

  15. Numrat Random • Një problem izakonshëmështësitëpërdorninumrat random nëprogramimdhenëgjuhët e skriptimit. • Jumundtëmerrnikohëndhedatëntëmakinëstuajdhetamanipuloni. • Jumundtëmerrnikohëndhetëkryeniveprime me të. • Përshembulljumundtëllogarisnisinusin e njënumridhetëmerrnivlerën absolute tëtij, që do jujapënjënumër midis 0 dhe 1. • Meqëkohandryshonçdomilisekondajunuk do rrezikonitëmerrnitënjëjtinnumërdyherë. • Nëqoftë se judonitëllogarisnishumënumra random nënjëkohësamëtëshkurtërjunukduhettëpërdornivetëmsinusinsin(), sepse do merrninumraqëndjekinnjëkurbësinusidhekjonukështë random. • Pornëqoftë se donitëllogarisninjënumër random dhe le tëtheminë 20 seconda, kyfunksionështëaiiduhuripërtabërëkëtë. Iralda Mitro

  16. Shembull-6 <html> <head> <script language="Javascript"> function random() { sot=new Date();num=sot.getTime();num=Math.round(Math.abs(Math.sin(num)*10000))return num;} </script> </head> <body> <a href ="" onMouseOver="alert('Kyështënjënumërrandom:'+random()">link</a> </body> </html> Iralda Mitro

  17. NdërtimiiDritareve • Ndërtimiidritareveështënjëngapjesëtmëtëbukuratë JavaScript. • Jumundtëndërtonidritaretërejadhetëload-oninë to dokumente HTML-je. Iralda Mitro

  18. Shembull-7 Hapja e njëdritarejedheshkrimiidiçkajenëtë. <html> <head> <script language="Javascript"> function WinOpen() { new_win=window.open("prova.htm","NewWin","width=300,height=400"); new_win.document.clear(); new_win.document.write("Hello World!"); } </script> </head> <body> <form> <input type="button" name="but" value=“Click me" onClick="WinOpen();"> </form> </body> </html> Iralda Mitro

  19. Ndërtimi i Dritareve • FunksioniWinOpen() krijonnjëdritaretë re duke thërriturmetodën open(). • Parametrii pare përmban URL-nëe faqes. Këtujumundtëfusniadresën e dokumentit HTML qëdonitëloadoni. Nëqoftë se e lini bosh asnjëfaqenukngarkohetdhejumundtëshkruaninëtë me JavaScript. • Parametriidytespecifikonemrine dritares. Këtujumundtëshkruaniçdogjë, kjonuk ka efektnëshembullintonë. • Parametrat e tjerespecifikojnëveçoritë e dritares. • Jumundtëtregoni , n.q.sdoni, një toolbar, skrollbar...Nëqoftë se jushkruani toolbar=yes atëherëju do merrninjë toolbar nëdritare. Iralda Mitro

  20. Ndërtimi i Dritareve • Këtujanëdisaveçoritëcilatjumundtindryshoni. • toolbarlocationdirectoriesstatusmenubarscrollbarsresizablecopyhistorywidth=pixelsheight=pixels • Pasitakenihapurdritarendhetakeniquajturnew_win (qëndronpërparametodës open()), jutanimundtëshkruaninëdritare. • Jukëtumundtëshkruanikod normal HTML. • Jumundtëndërtoninjëdokument HTML duke përdorurinputin e dhënënganjëpërdoruesnëpërmjetformës. • Jumundtëbëninjëfaqekunjëpërdoruesduhettëshkruajemrin e tijnënjëformëdhepastajtëkrijoninjëdokumentteri HTML qëpërmbanemrin e tij. Iralda Mitro

  21. Shembull-8: Puna me Statusbarin <html> <head><script language="javascript">function stabar(txt) {window.status=txt; }</script></head><body><form><input type="button" name="but1" value="Shkruaj" onClick="stabar('Hejç'kemi?');"><input type="button" name="but2" value="Fshi" onClick="window.status=''; "></form></body></html> Iralda Mitro

  22. Shembull-8: Puna me Statusbarin • Krijojmëdybutonatëcilëtthërrasinqëtëdyfunksioninstatbar(txt). • Kurjushihnietiketën<form> kubutonat u krijuan, juvëreni se funksionistatbar(txt)thërritet, por ne nukshkruajmë txt tekstatusbar?! • Jumundtakuptonikëtëkështu: funksionistabar(txt) thërritetdhepërcaktonvariablin txt, icilimerrpërvlerë, vlerënqëjuikaluatnëpërmjetthirrjessëfunksionit. KështukurtështypnibutoninShkruaj, funksionistabar(txt) thërritetdhe txt merrvlerën 'Hejç'kemi?'. • Jumundtapërdornivariablin txt sitëzakonshëm. Kjometodë e kalimittëvariablave e bënfunksioninshumëfleksibël. Dhebutoniidytëkryenpotënjëjtëngjëpor txt merrvlerën: txt= ''. Iralda Mitro

  23. Shembull-8: Puna me Statusbarin • Taniçfarëbënfunksionistatbar(txt)? Ai ijepvlerën e txt variablitwindow.status. Kjokryhetnëpërmjetwindow.status=txt;. Shkrimiinjëstringu bosh ('') e fshinpërmbajtjen e statusbar-it. • Vëreniqëkemipërdorurthonjëzatekesepse ne përdorimthonjëzatçiftepërpërcaktimin e onClick. • Jue dinitashmë property-nëonMouseOver :<a href=“faqe.htm” onMouseOver=“window.status=‘kyeshtenje link’; return true;”> • Statusbarinuk e fshintekstinkurjuhiqni mouse-in ngalinku. Ne shkruajmënjëfunksionicilifshinstatusbarin. Iralda Mitro

  24. Shembull-9 <html><head><script language="javascript">function levizsipër (txt) {window.status=txt;setTimeout("fshih()",1000);}</script></head><body><a href="moskliko.htm" onMouseOver="levizsipër('Hejtungjatjeta'); return true;">link</a></body> </html> Iralda Mitro

  25. Shembull-9 • Nëfaqen HTML ne kemikrijuarnjë link me property-në e njohuronMouseOver. • Funksionilëvizsipër() thërritet duke ikaluarstringun "Hejtungjatjeta" iciliikalohetsi argument nëpërmjetvariablit txt. Variabliwindow.statusmerrpërvlerëvlerën e txt. Kjoështë e njëjtagjësinëfunksioninstabar(txt). • FunksionisetTimeout(...) vendosnjëkohë. FunksionisetTimeout(...) përcaktonsakohëmatësiikohës do ekzekutohetdheçfarë do tëndodhmbasikoha do tëmbarojë. • Nëshembullintonëfunksionifshih() thërritet pas 1000 milisekonda. Funksionilëvizsipër(txt) mbaronpasimatësiikohësfillonngapuna. Browserithërretfunksioninfshih() pas çdo 1 sekonde. • Pasikoha ka mbaruarmatësinukrinispërsëri, porjumundtathërrisnipërsërinëfunksioninfshih(). Iralda Mitro

  26. Shembull-10 • Tani do tëshohimnjë script icilijulejontënavigonipërmesdokumentash. Ajopërtëcilën do flasimjanëfunksionet back() dhe forward(). Jumundtasimulonikëtëbuton duke përdorur JavaScript. Scriptipërkëtëpunëjepetmëposhtë: <html> <head> <form name="butonbar"> <input type="button" value="Back“ onClick="history.back()"> <input type="button" value="Home" onClick="location='script.htm'"> <input type="button" value="Next" onClick="history.forward()"> </form> </body> </html> • Jugjithashtumundtëshkruani 'history.go(-1)' dhe 'history.go(1)'. Iralda Mitro

  27. Futja e të Dhënave Nëpërmjet Formave • Futja e tëdhënavenëpërmjet<form> ështëshumë e rëndësishmepërdisafaqewebi. Tëdhënattëmarranëpërmjet <form> dërgohennë server. • Javascriptka aftësinëtëvlerësojëtëdhënatqëfutennga <form> para se tidërgojënë server. • Sëpari do jutregojmë se simundtëvlerësohenformat. Pastaj do shohimmundësitëpërdërgimin e informacionitmbrapa me Javascriptose HTML. • Krijojmënjëscript tëthjeshtë. Faqja HTML duhettëpërmbajëdyelementeteksti. Përdoruesiduhettëfutëemrin e tijdheadresën e e-mail-it. Jumundtëfutniçfarëtëdoninëelementët e formësdhepastajtështypnibutonin. Gjithashtumosfutnigjëdheshtypnibutonin. Iralda Mitro

  28. Futja e të Dhënave Nëpërmjet Formave • Përsaipërketelementittëparën.q.snukfutnigjë do tëmerrninjëmesazhgabimi. Çdogjëqëju do shkruanikonsiderohetsi e vlefshme. Sigurishtjumundtëfutnidhenumra, kështun.q.sfutni 17 ju do tëmerni ' Hej 17!'. • Forma e dytëështëpakmë e sofistikuar. Përpiqunitëfutninjë string tëthjeshtëoseemrintuaj. Ju do shihniqënuk do eciderisatëfutninjë '@'. Kriteripërpranimin e stringutsitëvlefshëmështë @. Kjosepseçdoadresë e-mail ka një '@' kështuqëmjaftontëkontrolloshpër '@'. Iralda Mitro

  29. Shembull-10 <html> <head> <script language="Javascript"> function test1(form){ if (form.text1.value=="") alert(“Futninjë string!") else alert("Hej"+form.text1.value+"! OK!"); } function test2(form){ if(form.text2.value==“” ||form.text2.value.indexOf('@',0)==-1) alert("Adresanukështë e vlefshme!"); else alert ("OK!"); } </script></head> <body> <form name="first"> <p>FUTNI EMRIN:<br> <input type="text" size="20" name="text1"> <input type="button" name="button1" value="test input" onclick="test1(this.form)"> </p> <p>FUTNI ADRESEN E E-MAIL:<br> <input type="text" size="20" name="text2"> <input type="button" name="button2" value="test input" onclick="test2(this.form)"> </p> </form> </body> </html> Iralda Mitro

  30. Shembull-10 • Sëpariihedhimnjësykodit HTML nëseksionin e <body>. Ne krijojmëdyelementëtekstidhedybutona. Butonatthërrasinfunksionet test1(...) ose test2(...) nëvarësi se cilibutonshtypet. Ne u kalojmëfunksioneve 'this.form' me qëllimqëtëjeminëgjendjetuadresohemielementëvetëduhurnëfunksionemëvonë. • Funksioni test1(form) testonnësestringuifuturështë bosh, kjobëhetnëpërmjet ' if (form.text1.value=="")..... . 'form' ështëvariabliicilimervlerën 'this.form' me thirrjen e funksionit. Ne mundtëmarrimtëdhënat duke përdorur 'value' nëkombinacion me 'form.text1'. Përtëparënësestringuështë bosh ne e krahasojmë me "" dhen.q.sështëibarabartëpërdoruesi do marrinjëmesazhgabimi, nëtëkundërt do marrimnjë 'OK!'. • Tani le tëshohimfunksionin e dytë test2(form). Kyfunksionpërsërikrahasonstringun e futur me stringun "" përtusiguruarqëdiçkaështëfutur. Gjithashtuiështështuardhenjëkrahasimtjetërbashkë me operatorin || OR. Instruksioni 'if ' kontrollonnësejanëtëvërtetëkrahasimiiparëoseidytë. N.q.snjëngakrahasimetështëivërtetëatëherëshprehjabrenda if-it bëhet e vërtetëdheekzekutohetinstruksionipasardhës. Kjonënkuptonqëju do tëmerrninjëmesazhgabimin.q.sstringuështë bosh osenuk ka një '@'. Krahasimiiidytënëinstruksionin 'if ' shikonnësestringuifuturpërmban '@'. Iralda Mitro

  31. Shembull-11 • Jumundtëpërcaktoni se cilin element do tëjetënëfokusqënëfillimosejumundtithonibrowseritqëtëfokusohetnë form kuinformacioniifuturnukështënërregull. • Kjonënkuptonqëbrowseri do tavendosëkursorinnëelementin e specifikuartëformës, kështupërdoruesinukduhettëklikojënë form para se tëfutëndonjëgjë. Jumundtabënikëtë me scriptin e mëposhtëm: function setfocus() { document.first.text1.focus(); return; } • Ky script do tëvendosënë focus elementin e parë text të form sëskriptittëtreguarmësipër. Juduhettëspecifikoniemrin e form dheemrin e elementittekstqënëkëtërastjanë first dhetext1. N.q.sdonitëvendosnifokusinnëkëtë element kurfaqjatëloadohetjumundtështoni ' onLoad ' teketiketa <body>. <body onLoad="setfocus()"> Iralda Mitro

More Related