370 likes | 687 Views
Javascript. Programim ne Web Leksion 12. JavaScript. JavaScript është një gjuhë skriptimi për faqet e Web-it. Skriptet e shkruara me JavaScript mund të futen në faqet HTML Me JavaScript ju keni shumë mundësira për pasurimin e faqeve tuaja me elementë të rinj dhe interesantë .
E N D
Javascript Programim ne Web Leksion 12 Iralda Mitro
JavaScript • JavaScript ështënjëgjuhëskriptimipërfaqet e Web-it. • Skriptet e shkruara me JavaScript mundtëfutennëfaqetHTML • Me JavaScript jukenishumëmundësirapërpasurimin e faqevetuaja me elementëtërinjdheinteresantë. • Përshembulljujeninëgjendjetipërgjigjeningjarjeveqëshkaktohenngapërdoruesi fare thjesht. • Disaefekteqëtanimundtëbëhen me JavaScript mëpërparamundtëbëheshinvetëm me CGI. • Me ndihmëne JavaScript jumundtëkrijonifaqeWebimjafttësofistikuara. Iralda Mitro
Variablat dhe emrat e funksioneve • Si programuesduhettezgjedhimemrat per variablatdhefunksionet. • Emrat e variablavedhefunksioneveduhettendjekinrregullat e meposhtme: • Karakterii pare duhettejetenjeshkronjealfabeti (e madheose e vogel), nje (_), oseshenjedollari($). • Nukmundteperdorninjenumersishkronjetepare. • Emratnukduhettepermbajnehapesira. • Emratnukduhettejenendonjengafjalet e rezervuarategjuhes. Iralda Mitro
Variablat dhe emrat e funksioneve Shembujemrashtevlefshem: • x • Numri_tjeter • x20 • _totali • $shuma_string Iralda Mitro
Variablat dhe emrat e funksioneve • Rekomandohetteperdorenemrapershkrues per variablatdhefunksionetdheteperdoretnjemenyrestandarte e emertimittetyre. • Shembuj • add_two_num • addTwoNumbers Javascriptperdortedyten. Iralda Mitro
Fjalet e rezervuara • Ka njenumerfjaleshqeperbejnekomponentete gjuhesJavascript. • Ketofjalenukmundteperdoren per emravariablashdhefunksioneshsepsekompilatorinukmundtedallojenjekomande default teJavascriptngaemriifunksionitapovariablit tone. Iralda Mitro
JavaScript • Javascriptvendosetbrenda tag-eve <SCRIPT>. • Javascripteshte case-sensitive. • CdoinstruksionJavascriptmbaron me pikepresje (;). • Javascriptinjoronhapesirat. Iralda Mitro
Deklarimiivariablave • Variablieshtenjeemerqeicaktohetnjevendi ne memorie per teruajturtedhena. • Para se teperdorninjevariabel ne nje program Javascript, duhettadeklaroni. • Variablatdeklarohen me fjalenvarsi: • var x; • var y; • var sum; • Mundtedeklarojmeshumevariabla me tenjejtenfjalevar: • var x, y, sum; Iralda Mitro
Deklarimiivariablave • Mundtekombinojmedeklarimtevariablave me inicializimtetyre: • var x=1, y=3, sum=0; • Nqsnukspecifikojmenjevlereinicializuesetevariablavekurideklarojmeato, vlera e tyrefillestareeshtenjevlere e papercaktuarJavascript. • Javascript case-sensitive => x dhe X dyemravariablashtendryshem. Iralda Mitro
Tipet e variablave • Njediference e madhendermjetJavascriptdhegjuhevetetjerasi JAVA, C eshteqeJavascripteshte pa tip (untyped). • Kjo do tethoteqenjevariabelJavascriptmundtembajenjevleretecdo tipi tedhenash, dhe tipi itedhenavenukduhettevendosetkurdeklarohetvariabli. • Kjolejontendryshohet tipi itedhenavetevariablitgjateekzekutimitteprogramit, psh: var x=10; x=“ten”; • Ne keteshembullvariabli x ne fillim ka marrevleren e njenumriteplote 10, pastajtenjestringu. Iralda Mitro
Perdorimiioperatoreve • Operatoretjaneatoqeveprojnembivariablat. var x=1, y=3, sum=0; sum=x+y • Operatoretetjereperdoren per krahasim varx=1, y=3, sum=0; if (sum==0) { sum=x+y; } Iralda Mitro
Operatoret e Javascript • Llogarites • (-) – negativizimiunar • (++) – inkrementimi • (--) – dekrementimi • (*) – shumezimi • (/) – pjesetimi • (%) – mbetjaaritmetike • (+) – mbledhja • (-) – zbritja Iralda Mitro
Operatoret e Javascript • Logjik • (!) – Not logjik • (>) • (<) • (<=) • (>=) • (==) • (!=) – e ndryshme • (&&) – And logjik • (||) – Or logjik Iralda Mitro
Operatoret e Javascript • Vleredhenia • (=) – vleredhenia • Operatoreteperberetevleredhenies • (+=) – mbledhja • (-=) – zbritja • (*=) – shumezimi • (/=) – pjesetimi • (%=) – mbetjaaritmetike Iralda Mitro
Strukturat e kontrollit(Ciklet& Degezimet) • If if ((x==1) && (y==3)) { sum = y-x; } if (sum==0) { sum = x+y; } else { subtotal = sum; } Iralda Mitro
Strukturat e kontrollit(Ciklet & Degezimet) • Switch switch (n) { case 1://instruksione break; case 2://instruksione break; default://instr. nqstetjeratnukplotesohen break; } Iralda Mitro
Strukturat e kontrollit(Ciklet & Degezimet) • while • Perdoretkurnukdisa here duhetteciklosh, pordiqeduhetndaluarkurndeshetkondita. var x=1; while (x<=10) { //derisa x me imadh se 10 //instruksione x++; } Iralda Mitro
Strukturat e kontrollit(Ciklet & Degezimet) • for • Perdoretkurdisaktesishtsa here duhetteciklosh. var x; for (x=1; x<=10; x++) { //instruksione } Iralda Mitro
Objektet, Eventet, DOM • Objektet • Operatori new • DOM (Document Object Model) • Array • Eventet • onClick • onSubmit • onMouseOver • onMouseOut • onFocus • onChange • onBlur • onLoad • onUnload Iralda Mitro
Objektet • Njeobjekteshtenjekoleksionvariablash (parametrash) dhefunksionesh (metodash). • Sintaksa e perdorimittenjeobjektieshte: objekt.parameteroseobjekt.method(). • Nje string eshtenjeobjekt ne Javascriptdhe ka disametodadheparametra. varStringVar=new String(“Leksion”); varx=StringVar.length;//gjatesia varx=StringVar.toUpperCase(); //kthen ne shkronjatemedha. Iralda Mitro
Objektet • Javascript ka objektet e meposhtmetendertuara: String, Math, Date, Array. • Objektistring ka njenumermetodash per manipulimin e stringjeve. • Objektimatheshtenjekoleksionmetodashdhevecorish per tekryerveprimearitmetikesi min(), max(), sin(), cos() etj. • Objektidateeshtenjekoleksionmetodash per tepunuar me datatdhekohen. • Objektiarrayilejonprogramatorettekrijojnekoleksione me tedhena. Iralda Mitro
Objektet - Operatorinew • Objektetdhe array nukmundvetemteshtypen ne programeJavascript. Ata duhettekrijohen. • Ne perdorimoperatorinnew per tekrijuarnje instance te re tenjeobjektiosetenje array. • Ndryshethemiqeoperatorinewkrijonnje kopje tenjeobjektiekzistuesosetenjestrukture array dheivendosimpastajemrinqedeshirojme. • Sintaksaeshte: o=new Object(); • Meqeobjektetjanetendertuar me metoda (funksione) dheparametra (variabla), objektiiriikrijuar “o” ne keterast ka tegjithametodatdheparametrat e objektitorigjinal. Parametratvendosen ne vlerat e tyre default. Iralda Mitro
DOM (Document Object Model) • Browser-inasiguronnjeseriobjektesh. • Dritarja e browser-it kushfaqetfaqjanjihetsiobjektidritare (window object). • Faqja HTML e paraqiturnga browser-injihetsiobjektidokument (document object). • Objektidokumenteshte me iperdoruri ne client-side Javascript. • Elementet HTML qe ne ishtojmenjefaqejegjithashtuzgjerojnehierarkine e objekteve. Iralda Mitro
DOM • Njeshembulleshtenjeformedheelementetqendodhen ne forme. Kjo do tethoteqemundt’ireferohemiobjektevesi me poshte: • window.document.forms[0] • ireferohetformes se pare ne dokument. • Format janeteimplementuarasi array ne DOM. • Nqskemi me shume se 1 formene faqe, numratfillojnenga 0. • window.document.Form1 • ireferohetformes me emer Form1. • window.document.Form1.FirstName.value • ireferohetvleres se shtypur ne textbox-in tequajturFirstNameteformes se quajtur Form1. Iralda Mitro
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> Iralda Mitro
DOM • forms[0] • ireferohetformes se pare brendaketijdokumenti. • Form1 • ireferohetformesme emer Form1 ne ketedokument. • Form1.FullName.value • ireferohetvleres se shtypur ne browser ngaklienti ne textbox-in e quajturFullName, ne formen e quajtur Form1 ne ketedokument. Iralda Mitro
Array • Javascript, e ngjashme me gjuhet e tjerateprogramimit ka mundesine e perdorimittestrukturavetetedhenavetequajtura array. • Nje array eshtenjekoleksion me tedhenakucdopjese e tedhenaveeshte e mbajtur ne njepoziciontenumeruarbrendanje array. • Cdopozicioni ne nje array ijepetnje index duke filluarngazero; zero pozicionii pare, njeidytietj. • Nje array eshteimplementuarsinjeobjekt ne Javascriptdhemundtekrijohet duke perdorurnew. Iralda Mitro
Array var a=new Array();//krijonnje array e quajtur “a” a[0]=1.2;// ivendosvlereelementitte1re a[1]=“Javascript”;// ivendosvlereelementitte 2te Array janeterendesishem per tukuptuarsepsenjenumerkomponenteshte Document Object Model (DOM) janeimplementuarsi array si format, imazhetetj. Iralda Mitro
Eventet • Eventetjanetrigeraqetherrasinnjengafunksionet tone. • ProgrametJavascript client-side nuk do teekzekutohenderisateiniciohennganje event. • Nje event mundtejetenjeveprimsiklikimi ne njebutonosevendosja e mouse-it mbinjeimazhetj. Iralda Mitro
Eventet - onClick() • Njeevent click ndodhkurklikohetnjebuton, checkbox, radio buton, reset buton, submit buton. • Ky event perdoretrregullisht per butona per tefilluarekzekutimin e scriptit. • <INPUT TYPE=“Button” VALUE=“Click Me” onClick=“window.alert(‘You Clicked Me’);”> • Kurklikojmebutonin “Click Me” ekzekutohetinstruksioniJavascriptwindow.alert(‘You Clicked Me’); Iralda Mitro
Eventet - onSubmit() • Njeevent submit ndodhkurperdoruesipranon (submit) njeforme. Ky event perdoretshpesh me njeformedhenjebuton submit per tefilluarekzekutimin e scriptit. <FORM action=http://form.asponSubmit=“return checkform();”> • Kurperdoruesiklikon ne butonin submit, ekzekutonfunksionincheckform(). Nqs forma kalontegjithatestet e validimit, kthehetnjevlere true dhetedhenatkalohente“form.asp”. Iralda Mitro
Eventet - onMouseOver() • Njeevent onMouseOverndodhkurperdoruesipozicionon mouse-in mbinjehiperlink, osenje zone telinkuartenjeimazhite client-side. • <a href=“http://www.google.com” onMouseOver=“window.status=‘Main Search Engine on the Web!’; return true; ”>Click to search</a> • Ne keteshembullkurvendoset mouse-imbi link ne rreshtin e statusittedritares se browseritafishohetmesazhi. Iralda Mitro
Eventet - onMouseOut() • Kyevent ndodhkurperdoruesiheq mouse-in ngalinkuapozona e linkuar. • <a href=“http://www.google.com” onMouseOut=“window.status=‘The number one search engine’; return true; “> Click to search </a> Iralda Mitro
Eventet - onFocus() • Kyevent ndodhkurnjeperdoruesijepfokusoseklikonmbinjekontrollteformes. • <INPUT TYPE=“TEXT” NAME=“Month” onFocus=“window.status=(‘Please enter the month as two digits 01 deri 12’); return true;”> • Kurklikohet textbox-i, pramerrfokusnjemesazhparaqitet ne rreshtit e statusitte browser-it qetregon se cfareduhetteshtypet. Iralda Mitro
Eventet - onChange() • Kyevent ndodhkurnjevlerendryshon ne textbox, textareaetj. <INPUT TYPE=“TEXT” NAME=“Month” onChange=“window.status=(‘The value of the Month Changed!!!’); return true;”> <INPUT TYPE=“TEXT” NAME=“Year”> Iralda Mitro
Eventet - onBlur() • Kyevent ndodhkurperdoruesi le njefushe password, tekst, tekstareatenjeforme HTML. <INPUT TYPE=“TEXT” NAME=“Month” onBlur=“window.status=(‘The value of the Month Changed!!!’); return true;”> <INPUT TYPE=“TEXT” NAME=“Year”> • onChange() dheonBlur() nukperdoren ne tenjejtenkohe. Iralda Mitro
Eventet - onLoad() • Kyevent ndodhkur browser-iperfundon se ngarkuarinjedokument. • <BODY onLoad=“alert(‘Welcome!’);”> • onUnload() • Ky event ndodhkurlevizim ne njedokumenttjeter. Pshkurperdorimbutonin back oseklikojme ne nje link ne njefaqetjeteretj. <BODY onUnload=“alert(‘Bye!’);”> Iralda Mitro