DHTML DOM dhe Javascript Modeli i objekteve dhe
DHTML, DOM dhe Javascript Modeli i objekteve dhe ngjarjeve Leksion 5 1
Cfare eshte DHTML? • DHTML eshte nje kombinim teknologjishe, qe perdoren per te krijuar Web site dinamike dhe interaktive. Ø DHTML NUK eshte nje gjuhe skriptimi (si Java. Script), por nje tipar i browser-it, ose nje zgjerim i tij, qe e ben browserin dinamik Ø DHTML perbehet nga – HTML – Cascading Style Sheets (CSS) – Gjuhe Skriptimi Ø Te tria keto komponente lidhen nepermjet Document Object Model (DOM) Ø DOM eshte nderfaqja qe u lejon gjuheve te programimit, te aksesojne permbajtjen, stilin dhe strukturen e dokumenteve ne web dhe t’i ndryshojne ato ne menyre dinamike. 2
Mjetet e DHTML-se Ø HTML dhe XML – Ndan dhe Organizon permbajtjen Ø CSS – Percakton paraqitjen e permbajtjes Ø Skriptimi– Java. Script, VBScript – I shton interaktivitet faqes Ø DOM- Document Object Model – Percakton cfare dhe si elementet u ekspozojne skripteve per akses 3
DOM • Kur ngarkohet nje faqe web, browseri krijon nje Model te Objektit Dokument (DOM- Document Object Model) te faqes • DOM siguron nje menyre per te aksesuar dhe per te ndryshuar permbajtjen e dokumenteve HTML • DOM eshte nje standart i percaktuar nga World Wide Web Consortium (W 3 C). • Shumica e browserave e implementojne DOM-in ne forma te ndryshme dhe me shkalle te ndryshme suksesi. 4
Shembull 1 - DOM-i i paraqet dokumentet HTML ne nje strukture peme, ose me mire nje peme me rrenjen siper, sepse rrenja e pemes eshte ne maje te pemes. Le te shohim nje dokument te thjeshte HTML: <html> <head> <title>Hello World</title> </head> <body> <p>Here's some text. </p> <p>Here's more text. </p> <p>Link to the <a href="http: //www. w 3. org">W 3</a></p> </body> </html> 5
Shembull 1 – DOM (vazhdim) • Figura tregon kodin HTML te shembullit 1 kur shihet si nje strukture peme nga DOM-i 6
DOM • Modeli i Objekteve i programueshem fuqizon Java. Script-in per te krijuar HTML-ne dinamike: • Java. Script mund te ndryshoje te gjithe elementet HTML te faqes. • Java. Script mund te ndryshoje te gjithe atributet HTML te faqes. • Java. Script mund te ndryshoje te gjithe stilet CSS te faqes • Java. Script mund te reagoje ndaj te gjithe eventeve ne faqen web. 7
Gjetja e elementeve HTML • Shpesh, me ane te Java. Script-it, mund te na duhet qe te ndryshojme elementet HTML te faqes web. • Per kete fillimisht na duhet qe, me pare, t’i gjejme elementet, gje qe realizohet ne menyrat e meposhtme: 1. Gjetja e elementeve HTML me ane te id-se 2. Gjetja e elementeve HTML me ane te emrit te tagut. 3. Gjetja e elementeve HTML me ane te emrit te klases. 8
Gjetja e elementeve HTML 1. Gjetja e elementeve HTML me ane te id-se • var x=document. get. Element. By. Id("intro"); • Nese elementi gjendet, metoda kthen elementin si nje objekt (ne x), perndryshe x do te permbaje nje vlere null. 2. Gjetja e elementeve HTML me ane te emrit te tagut. • var x=document. get. Element. By. Id("main"); var y=x. get. Elements. By. Tag. Name("p"); Ky shembull gjen elementin me id="main", dhe me pas gjen te gjithe elementet <p> brenda "main“ 3. Gjetja e elementeve HTML me ane te emrit te klases. Nuk punon ne Internet Explorer 5, 6, 7, and 8. 9
Shembull 2 • <!DOCTYPE html> • <body> • <p>Hello World!</p> • <div id="main"> • <p>The DOM is very useful. </p> • <p>This example demonstrates the <b>get. Elements. By. Tag. Name</b> method</p> • </div> • • • <script> var x=document. get. Element. By. Id("main"); var y=x. get. Elements. By. Tag. Name("p"); document. write('First paragraph inside "main" is ' + y[0]. inner. HTML); </script> • </body> • </html> 10
Ndryshimi i Permbajtjes HTML • Menyra me e lehte per te ndryshuar permbajtjen e nje elementi HTML eshte duke perdorur vecorine inner. HTML. • document. get. Element. By. Id(id). inner. HTML=new HTML • Shembull: Ndryshimi i permbajtjes se nje elementi <p>: <html> <body> <p id="p 1">Hello World!</p> <script> document. get. Element. By. Id("p 1"). inner. HTML="New text!"; </script> </body> </html> 11
Ndryshimi i stilit ne HTML • Per te ndryshuar stilin e nje elementi HTML, perdoret kjo sintakse: • document. get. Element. By. Id(id). style. property=new style • Shembull: Ndryshimi i stilit te nje elementi <p> : • <html> <body> <p id="p 2">Hello World!</p> <script> document. get. Element. By. Id("p 2"). style. color="blue"; </script> <p>The paragraph above was changed by a script. </p> </body> </html> 12
Javascript si nje gjuhe OOP (1) Nje gjuhe programimi e orientuar nga objektet (OOP), ju lejon te percaktoni objektet tuaja dhe te ndertoni tipet tuaja te variablave. Java. Script eshte nje gjuhe OOP, por nuk perdor klasa. • Ne Java. Script ne nuk deklarojme klasa, dhe me pas te krijojme objekte prej tyre. • Java. Script bazohet ne prototip (prototype based), jo ne klasa. Nje objekt eshte nje koleksion i emertuar variablash dhe funksionesh. Keta variabla dhe funksione, per te treguar qe jane pjese e objektit, quhen perkatesisht veçori dhe metoda. Le te shohim fillimisht objeket e gatshme (built-in) te Java. Scriptit, dhe se si perdoren ato. Me pas do te shohim se si mund t’i krijojme vete objektet ne Javascript. 13
Javascript si nje gjuhe OOP(2) Vecorite dhe metodat e nje objekti mund te aksesohen duke perdorur “sintaksen me pike”: object. Name. a. Property. Of. The. Object; object. Name. a. Method. Of. The. Object(); Ose mund te perdorni “sintaksen array”, kur ju nevojitet te zgjidhni vecorine qe doni te lexoni, bazuar ne ndonje kusht te kodit dhe nuk deshironi qe ta shkruani ne kod (hard-code) ne skriptin tuaj emrin e vecorise: var the. Property = changeable. Value object. Name[the. Property] 14
Javascript si nje gjuhe OOP (3) Java. Script ka nje hierarki objektesh te paracaktuara, secili me metodat dhe vecorite te gatshme per t’u perdorur. Ne maje te kesaj hierarkie eshte objekti Dritare (Window Object), dhe pasardhesi direkt i tij eshte objekti Document, i cili permban DOM te dokumentit tuaj. Ne Javascript ka edhe disa objekte te tjera te gatshme qe ju ndihmojne me detyra specifike, si: Math - koleksion metodash dhe vecorish per te kryer veprime aritmetike si min(), max(), sin(), cos() etj. Date – koleksion metodash per te punuar me datat dhe oren. String - bashkesi metodash per manipulimin e stringjeve Array - lejon programuesit te krijojne koleksione me te dhena 15
Objekti Window ju jep akses ne nje grup vecorishe dhe metodash qe lidhen me browserin. Objekti Window perfaqeson nje dritare te hapur ne browser. Per shembull, objekti Window ruan historikun e faqeve te vizituara dhe mund te perdoret per te levizur per tek faqet qe jane vizituar me pare. Kjo eshte njesoj sikur te perdoret butoni Back i browserit, nepermjet kodit. window. back(); Ky kod therret metoden back te objektit Window, dhe browser-i kthehet nje faqe prapa. Objekti Window ka metoda qe mund te hapin, te ngarkojne permbajtjen dhe te mbyllin dritare te tjera. Metoda te tjera te objektit Window, paraqesin disa dritare dialogu baze (alert, prompt, dhe confirm), vendosin dhe heqin fokusin ne elemente dhe aktivizojne vonesa ne kohe per te kontrolluar ngjarje te bazuara ne kohe si animacionet. 16
Shembull 3 – Objekti window <html> <head> <script language="Javascript"> function Win. Open() { new_win=window. open("", "New. Win", "width=300, height=400"); new_win. document. write("Hello World!"); new_win. document. focus(); } </script> </head> <body> <form> <input type="button" name="but" value= "Kliko ketu" on. Click="Win. Open(); "> </form> </body> </html> 17
Shembull 3 - komente Funksioni Win. Open() krijon nje dritare te re duke thirrur metoden open(). Thonjezat e para permbajne URL-ne e faqes. Ketu ju mund te vendosni adresen e dokumentit HTML qe doni te ngarkoni. Ne qofte se e lini bosh asnje faqe nuk ngarkohet dhe ju mund te shkruani ne te me Java. Script. Thonjezat e tjera (parametri i dyte) specifikojne emrin e dritares. Ketu ju mund te shkruani çdo gje, kjo nuk ka efekt ne shembullin tone. Thonjezat e tjera (parametri i trete) specifikojne veçorite e dritares. Ju mund te tregoni , n. q. s doni, nje toolbar, skrollbar, etj. Ne qofte se ju shkruani toolbar=yes atehere ne dritare do te shfaqet toolbari. Meposhte jepen disa veçori te cilat ju mund t’i ndryshoni. Ju mund te specifikoni çdo veçori te mundeshme. Ju duhet t’i shkruani ato ne menyren e treguar meposhte dhe pa hapesira boshe: toolbar, status, menubar , scrollbars, resizable , width=pixels, height=pixels 18
Objekti document Nga vete emri , objekti Document ju jep akses ne DOM. Java. Script ju mundeson qe te punoni me DOM ne menyra te sofistikuara, duke perfshire shtimin, ndryshimin dhe fshirjen e elementeve HTML nga dokumenti ne momentin e ekzekutimit te kodit, nje aftesi e cila eshte thelbesore ne perdorimine Ajax-it ne punen tuaj. Metoda get. Element. By. Id e objektit Document eshte nje nga menyrat se si ju mund te “merrni” nje element HTML si nje objekt. Keshtu duke perdorur sintaksen “me pike”, ju mund te nxirrni nje vecori prej tij. Per shembull, ju mund te nxirrni tekstin qe ndodhet brenda elementit h 1: <h 1 id=”headline”>Big news!</h 1> ne kete menyre: var the. Element=document. get. Element. By. Id(“headline”); alert(the. Element. inner. HTML); // afishon Big news! 19
Metodat e Objektit String 20
Shembull 4: Metoda te objektit String <html> <head> <title>the string object</title> </head> <body> <script language="Java. Script"> s = new String("Testing String Methods"); document. write('s = '+s+"<br/>"); document. write('s. char. At(2) = '+s. char. At(2)+"<br/>") ; document. write('s. index. Of("String") = '+s. index. Of("String")+"<br/>"); document. write('s. last. Index. Of("ing") = '+s. last. Index. Of("ing")+"<br/>"); document. write('s. substring(8, 15) = '+s. substring(8, 15)+"<br/>") ; document. write('s. to. Lower. Case() = '+s. to. Lower. Case()+"<br/>") ; document. write('s. to. Upper. Case() = '+s. to. Upper. Case()+"<br/>") ; </script> </body> </html> 21
Shembull 4: Ekzekutimi 22
Krijimi i Objektit Date Objekti Date perdoret per te punuar me Daten dhe me Oren. Objektet Date krijohen duke perdorur konstruktorin Date(). Ka 4 menyra per te krijuar nje instance te objektit Date: new Date() // data dhe ora aktuale new Date(milliseconds) //millisekondat qe nga data 1970/01/01 new Date(date. String) new Date(year, month, day, hours, minutes, seconds, milliseconds) Shumica e parametrave me siper jane opsionale. Nese nuk specifikohen, marrin vleren zero si vlere default. Shembuj: today = new Date() d 1 = new Date("October 13, 1975 11: 13: 00") d 2 = new Date(79, 5, 24) d 3 = new Date(79, 5, 24, 11, 33, 0) Te gjitha datat llogariten ne milisekonda qe nga 01 January, 1970 00: 00 Universal Time (UTC) 23
Metoda te Objektit Date • Mund te manipulojme datat duke perdorur metodat e objektit Date. • Ne shembullin e meposhtem krijojme nje objekt Date me nje date specifike (14 th January 2010): • var my. Date=new Date() • my. Date. set. Full. Year(2010, 0, 14) • Ne shembullin e meposhtem ne krijojme nje objekt Date me 5 dite ne te ardhem: • var my. Date=new Date() • my. Date. set. Date(my. Date. get. Date()+5) • Shenim: Nese kur shtohen 5 dite dates, data kalon ne muaj tjeter, ndryshimi ndodh automatikisht nga vete objekti Date. 24
Metoda te Objektit Date • Krahasimi i Datave • Objekti Date perdoret edhe per te krahasuar dy data. • Ne shembullin e meposhtem krahasohet data e sotme me daten 14 th January 2010: var my. Date=new Date() my. Date. set. Full. Year(2010, 0, 14) var today = new Date() if (my. Date>today) alert("Today is before 14 th January 2010") else alert("Today is after 14 th January 2010") 25
Shembull 4: Data e ndryshimit te fundit Më poshtë do të implementojmë një funksion date në skriptin tonë. Kështu në qoftë se krijoni një faqe HTML dhe doni që klientit t’i printohet ndryshimi i fundit i dokumentit, ju nuk keni nevoje të shkruani datën në dokument, por ju mjafton vetëm te shkruani një program të vogël, një skript. Kur ju të bëni ndryshime në të ardhmen, data do te ndryshoje automatikisht. <html> <head> </head> <body> Kjo është një faqe e zakonshme HTML. <br/> Ndryshimi i fundit: <script> document. write(document. last. Modified); </script> </body> </html> 26
Funksione të tjerë për datën Tani do te shohim një shembull tjetër që përdor metodat e orës dhe datës. Ne shembullin e mëparshëm pamë perdorimin e last. Modified. Tani do të printojmë oren lokale në dokumentin tonë. Kjo metodë përdor orën dhe datën e sistemit të makinës suaj, kështu n. q. s ju vendosni datën e makinës 5/18/1983 ju do të merrni nje datë të gabuar nga kjo metodë. Pra kjo nuk është orë dhe datë që mbahet nga Interneti (ose diçka e tillë). Koha tani ështe: 10: 51 Data është: 10/12/2007 Kodi per te afishuar tekstin e mesiperm: <script> sot=new Date(); document. write("Koha tani është: ", sot. get. Hours(), ": ", sot. get. Minutes()); document. write("Data është: ", sot. get. Date(), "/", sot. get. Month()+1, "/", sot. get. Full. Year()); </script> 27
Funksione të tjerë për datën • Në fillim krijojmë një variabël për të mbajtur datën. Kjo bëhet me anë të 'sot=new Date()'. • N. q. s ne nuk specifikojmë një datë dhe orë të caktuar browseri përdor orën lokale dhe e vendos atë në variablin sot. Vëreni se ne nuk kemi deklaruar variablin sot në ndonjë vend. Kjo është një ndryshim me Java-n dhe gjuhë të tjera programimi ku ju duhet të specifikoni tipin e variablit para se ta përdorni atë. • Ne krijuam një objekt kohe i cili përmban orën lokale dhe datën. Tani mund t’i shfaqim ato në dokument. Ju duhet të shkruani 'sot' para cdo 'metode get' sepse përndryshe browseri nuk do ta kuptojë se cilit objekt duhet t’i referohet. • Metoda get. Month() kthen një numër midis 0 dhe 11 (0 nënkupton Janarin dhe 11 për Dhjetorin), kështu që ne duhet t’i shtojmë 1 numrit të kthyer nga metoda në mënyrë që të marrim muajin e saktë. 28
Metoda te Objektit Date • Nje reference te plote te metodave te objektit date e gjeni tek http: //www. w 3 schools. com/jsref_obj_date. asp 29
Objekti Math • Objekti Math ju lejon qe te kryeni detyra matematike. Ky objekt perfshin disa vlera dhe funksione matematike. Nuk keni nevoje qe te percaktoni objektin Math perpara se ta perdorni ate. • Vlerat Matematike • Java. Script ka 8 vlera matematike (konstante) qe mund te aksesohen nga objekti Math. • Ato jane : E, PI, rrenja katrore e 2, rrenja katrore e 1/2, logaritmi natyror i 2, logaritmi natyror i 10 -es, logaritmi me baze 2 i E, logaritmi me baze 10 i E. • Mund t’i referoheni ketyre vlerave nga Javascripti si me poshte: • Math. E • Math. PI • Math. SQRT 2 • Math. SQRT 1_2 • Math. LN 10 • Math. LOG 2 E • Math. LOG 10 E 30
Objekti Math • Metodat Matematike • Perveç konstanteve qe mund te aksesohen nga objekti Math, gjithashtu ka disa funksione (metoda): • Shembuj funksionesh: • Ne kete shembull perdoret metoda round() e objektit Math per rrumbullakosur nje numer ne numrin e plote me te afert. • document. write(Math. round(4. 7)) • Ky kod afishon 5. 31
Metodat e objektit Math 32 http: //w 3 schools. com/jsref_obj_math. asp
Shembull 5 – perdorimi i objektit Math • • • • • <html> <head> <title>the math object</title> </head> <body> <h 1>using the math object</h 1> <script language="Java. Script"> document. write("The value of pi: "+Math. PI+"</br>"); document. write("The value of Euler’s constant: "+Math. E +"</br>"); document. write("Math. floor(2. 456): "+Math. floor(2. 456) +"</br>"); document. write("Math. round(4. 68): "+Math. round(4. 68) +"</br>"); document. write("The square root of 46: "+Math. sqrt(46) +"</br>"); document. write("48. 2 to the power 4: "+Math. pow(48. 2, 4) +"</br>"); document. write("The log of 13. 9: "+Math. log(13. 9) +"</br>"); </script> </body> </html> 33
Shembulli 5 – perdorimi i objektit Math 34
Objekti Math • Shembulli i meposhtem perdor metoden random() te objektit Math per te kthyer nje numer te rastit ndermjet 0 dhe 1: • document. write(Math. random()) • Outputi i ketij kodi mund te jete: 0. 4476968082641273 • Shembulli i meposhtem perdor metodat floor() and random() te objektit Math per te kthyer nje numer te rastit ndermjet 0 dhe 10: • document. write(Math. floor(Math. random()*11)) • Outputi i ketij kodi mund te jete: 2 35
Objektet qe mund te krijoni vete ne Javascript • Pame deri tani objekte te vete javascriptit. Gjithashtu mund te krijoni objektet tuaja, si psh: Objekti Person: Nje person eshte nje objekt Veçorite jane vlerat qe lidhen me objektin. Veçorite e personit perfshijne emrin, lartesine, peshen, moshen, ngjyren e lekures, ngjyren e syve, etj. Te gjithe personat kane veçorite e tyre, por vlerat e ketyre veçorive ndryshojne nga njeri person tek tjetri. • Objektet gjithashtu kane metoda. Metodat jane veprimet qe mund te kryhen mbi objektet. Metodat e objektit Person mund te jene: ha(), fle(), punon(), luan(), etj. • • 36
Objektet qe mund te krijoni vete ne Javascript • Veçorite • Sintaksa per te aksesuar nje veçori te nje objekti eshte: • emer. Objekti. emer. Vecorie • Mund t’i shtoni veçori nje objekti vetem duke i dhene asaj nje vlere. Supozojme se ekziston tashme nje objekt person dhe atij mund t’i japim veçorite firstname, lastname, age, dhe eyecolor si me poshte: person. Obj. firstname="John" person. Obj. lastname="Doe" person. Obj. age=30 person. Obj. eyecolor="blue" document. write(person. Obj. firstname) • Kodi i mesiperm do te gjeneroje outputin: John 37
Objektet qe mund te krijoni vete ne Javascript • Metodat • Nje objekt mund te permbaje edhe metoda. Ju mund te therrisni nje metode me kete sintakse: obj. Name. method. Name() • Shenim: Parametrat qe kerkohen per metodat mund te kalohen ndermjet kllapave. Per te thirrur nje metode qe quhet sleep() per objektin Person: • person. Obj. sleep() 38
Krijimi i Objekteve Tuaja • Ka menyra te ndryshme per te krijuar nje objekt te ri: • 1. Krijoni nje instance direkte te nje objekti: • Kodi meposhte krijon nje instance te nje objekti dhe i shton atij 4 veçori: person. Obj=new Object() person. Obj. firstname="John" person. Obj. lastname="Doe" person. Obj. age=50 person. Obj. eyecolor="blue“ • Gjithashtu shtimi i nje metode per objektin Person eshte i thjeshte: Kodi i meposhtem shton nje metode eat() per objektin Person: • person. Obj. eat=eat 39
Krijimi i Objekteve Tuaja • 2. Krijoni nje template te nje objekti • Template-i percakton strukturen e nje objekti: function person(firstname, lastname, age, eyecolor) { this. firstname=firstname this. lastname=lastname this. age=age this. eyecolor=eyecolor } • Vereni qe template-i eshte thjesht nje funksion. Brenda funksionit duhet te caktohen vlera per this. emer. Vecorie. Arsyeja pse ka kaq shume “this” eshte se do te merreni çdo here me me shume se nje “person” dhe duhet te jete e qarte se me cilin person po merreni. Prandaj perdoret “this”, per te treguar instancen e objektit qe keni ne dore, pra me te cilin po merreni aktualisht. 40
Krijimi i Objekteve Tuaja • Pasi te keni gati template-in, mund te krijoni instanca te reja te objektit si me poshte: • my. Father=new person("John", "Doe", 50, "blue") • my. Mother=new person("Sally", "Rally", 48, "green") • Gjithashtu mund te shtoni disa metoda per objektin “Person”. Edhe kjo behet brenda template-it: function person(firstname, lastname, age, eyecolor) { this. firstname=firstname this. lastname=lastname this. age=age this. eyecolor=eyecolor this. newlastname=newlastname } 41
Krijimi i Objekteve Tuaja • Vereni qe metodat jane thjesht funksione qe i bashkengjiten objekteve. Pastaj do te na duhet qe te shkruajme funksionin newlastname(): function newlastname(new_lastname) { this. lastname=new_lastname } • Funksioni newlastname() percakton mbiemrin e ri te personit dhe ia vendos ate personit. • Java. Script e di se per cilin person behet fjale, duke perdorur "this. ". Keshtuqe tashme mund te shkruani: my. Mother. newlastname("Doe"). 42
Shembull 6 • • • <html> <head> <title>CREATING AN EMPLOYEE PROFILE</title> <script language="Java. Script"> //Define Methods function display(){ document. write("<h 1>Employee Profile”+this. name+"</h 1><hr/><pre>"); document. writeln("Employee Number: "+this. number); document. writeln("Social Security Number: "+this. socsec); document. writeln("Annual salary: "+this. salary); document. write("</pre>"); } • //Elementi <pre></pre> perdoret per te percaktuar nje tekst te paraformatuar • //Teksti ne nje element <pre> shfaqet me nje shkrim me gjeresi fikse (zakonisht Courier) • //dhe i ruan hapesirat dhe kalimin ne rresht te ri 43
• • • • • //Define Object function employee(){ this. name=prompt("Enter Employee’s Name", "Name"); this. number=prompt("Enter Employee Number for "+this. name, "000− 000"); this. socsec=prompt("Enter Social Security Number for "+ this. name, "000− 0000"); this. salary=prompt("Enter Annual Salary for "+this. name, "$00, 000"); this. display=display; } </script> </head> <body> <script language="Java. Script"> new. Employee=new employee(); new. Employee. display(); </script> </body> </html> 44
45
Ngjarjet (eventet) ne javascript • Ngjarjet jane veprime qe mund te detektohen nga Java. Script, dhe objekti event jep informacion rreth ngjarjes qe ka ndodhur. • 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. 46
Atributet e eventeve ne HTML • Per te ekzekutuar nje kod kur perdoruesi klikon mbi nje element , shtojme kodin Javascript ne atributin e eventit ne HTML: • onclick=Java. Script • PSh: Shtojme eventin onclick ne nje button: • <button onclick="display. Date()">Try it</button> • Kur te klikohet butoni, do te thirret funksioni display. Date. 47
Shtimi i eventeve me HTML DOM • DOM i HTML-se na lejon qe t’i caktojme evente elementeve HTML duke perdorur Java. Script: • Shembull • Assign an onclick event to a button element: • <script> document. get. Element. By. Id("my. Btn"). onclick=function() {display. Date()}; </script> 48
on. Click() • 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” on. Click=“alert(‘You Clicked Me’); ”/> • Kur klikojme butonin “Click Me” ekzekutohet instruksioni Javascript alert(‘You Clicked Me’); 49
on. Submit() • 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” on. Submit=“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”. 50
on. Mouse. Over(), on. Mouse. Out() • Eventet on. Mouse. Over dhe on. Mouse. Out mund te perdoren per te thirrur nje funksion kur perdoruesi vendos mouse-in mbi nje element HTML ose e largon mousie-in nga elementi. 51
Shembull 7 • • • • <!DOCTYPE html> <body> <div onmouseover="m. Over(this)" onmouseout="m. Out(this)" style="backgroundcolor: #D 94 A 38; width: 120 px; height: 20 px; padding: 40 px; ">Mouse Over Me</div> <script> function m. Over(obj) { obj. inner. HTML="Thank You" } function m. Out(obj) { obj. inner. HTML="Mouse Over Me" } </script> </body> </html> 52
on. Focus() • Ky event ndodh kur nje perdorues i jep fokus ose klikon mbi nje kontroll te formes. <!DOCTYPE html> <head> <script> function my. Function(x) { x. style. background="yellow"; } </script> </head> <body> Enter your name: <input type="text" onfocus="my. Function(this)"> <p>When the input field gets focus, a function is triggered which changes the background-color. </p> </body> </html> 53
on. Change() Eventi on. Change ndodh kur nje vlere ndryshon ne textbox, textarea etj. <!DOCTYPE html> <head> <script> function my. Function() { var x=document. get. Element. By. Id("fname"); x. value=x. value. to. Upper. Case(); } </script> </head> <body> Enter your name: <input type="text" id="fname" onchange="my. Function()"> <p>When you leave the input field, a function is triggered which transforms the input text to upper case. </p> </body> </html> 54
on. Blur() • on. Blur ndodh kur perdoruesi largohet nga nje fushe password, tekst, textarea te nje forme HTML. • <input type=“text” name=“month” on. Blur=“alert(‘The value of the Month Changed!!!’) ”/> • on. Change() dhe on. Blur() nuk perdoren ne te njejten kohe. 55
on. Load(), on. Unload() • Eventet onload dhe onunload aktivizohen kur perdoruesi hyn ne nje faqe ose largohet prej saj. • Eventi onload mund te perdoret per te kontrolluar tipin dhe versionin e browserit te vizitorit, dhe te ngarkoje versionin e pershtatshem te faqes web, bazuar ne kete informacion. • Eventet onload dheonunload mund te perdoren per t’u marre me cookies. 56
Shembuj • <body on. Load=“alert(‘Welcome to our website’); ”> • <body on. Unload=“alert(‘Thanks for checking out our website’); ”> • Eshte e mundur te specifikojme disa evente ne nje tag te vetem HTML: • <body on. Load=“alert(‘Welcome to our website’); on. Unload=“alert(‘Thanks for checking out our website’); ”> 57
Pyetje ? ? ? 58
- Slides: 58
