Download presentation
Presentation is loading. Please wait.
1
DHTML, DOM dhe Javascript Modeli i objekteve dhe ngjarjeve
Leksion 5
2
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 JavaScript), 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.
3
Mjetet e DHTML-se HTML dhe XML CSS Skriptimi– JavaScript, VBScript
Ndan dhe Organizon permbajtjen CSS Percakton paraqitjen e permbajtjes Skriptimi– JavaScript, VBScript I shton interaktivitet faqes DOM- Document Object Model Percakton cfare dhe si elementet u ekspozojne skripteve per akses
4
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 (W3C). Shumica e browserave e implementojne DOM-in ne forma te ndryshme dhe me shkalle te ndryshme suksesi .
5
Shembull 1 - DOM 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=" </body> </html>
6
Shembull 1 – DOM (vazhdim)
Figura tregon kodin HTML te shembullit 1 kur shihet si nje strukture peme nga DOM-i
7
DOM Modeli i Objekteve i programueshem fuqizon JavaScript-in per te krijuar HTML-ne dinamike: JavaScript mund te ndryshoje te gjithe elementet HTML te faqes. JavaScript mund te ndryshoje te gjithe atributet HTML te faqes. JavaScript mund te ndryshoje te gjithe stilet CSS te faqes JavaScript mund te reagoje ndaj te gjithe eventeve ne faqen web.
8
Gjetja e elementeve HTML
Shpesh, me ane te JavaScript-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: Gjetja e elementeve HTML me ane te id-se Gjetja e elementeve HTML me ane te emrit te tagut. Gjetja e elementeve HTML me ane te emrit te klases.
9
Gjetja e elementeve HTML
Gjetja e elementeve HTML me ane te id-se var x=document.getElementById("intro"); Nese elementi gjendet, metoda kthen elementin si nje objekt (ne x), perndryshe x do te permbaje nje vlere null. Gjetja e elementeve HTML me ane te emrit te tagut. var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); Ky shembull gjen elementin me id="main", dhe me pas gjen te gjithe elementet <p> brenda "main“ Gjetja e elementeve HTML me ane te emrit te klases. Nuk punon ne Internet Explorer 5,6,7, and 8.
10
Shembull 2 <!DOCTYPE html> <html> <body>
<p>Hello World!</p> <div id="main"> <p>The DOM is very useful.</p> <p>This example demonstrates the <b>getElementsByTagName</b> method</p> </div> <script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('First paragraph inside "main" is ' + y[0].innerHTML); </script> </body> </html>
11
Ndryshimi i Permbajtjes HTML
Menyra me e lehte per te ndryshuar permbajtjen e nje elementi HTML eshte duke perdorur vecorine innerHTML. document.getElementById(id).innerHTML=new HTML Shembull: Ndryshimi i permbajtjes se nje elementi <p>: <html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script> </body> </html>
12
Ndryshimi i stilit ne HTML
Per te ndryshuar stilin e nje elementi HTML, perdoret kjo sintakse: document.getElementById(id).style.property=new style Shembull: Ndryshimi i stilit te nje elementi <p> : <html> <body> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> <p>The paragraph above was changed by a script.</p> </body> </html>
13
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. JavaScript eshte nje gjuhe OOP, por nuk perdor klasa. Ne JavaScript ne nuk deklarojme klasa, dhe me pas te krijojme objekte prej tyre. JavaScript 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 JavaScriptit, dhe se si perdoren ato. Me pas do te shohim se si mund t’i krijojme vete objektet ne Javascript.
14
Javascript si nje gjuhe OOP(2)
Vecorite dhe metodat e nje objekti mund te aksesohen duke perdorur “sintaksen me pike”: objectName.aPropertyOfTheObject; objectName.aMethodOfTheObject(); 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 theProperty = changeableValue objectName[theProperty]
15
Javascript si nje gjuhe OOP (3)
JavaScript 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
16
Objekti Window window.back();
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.
17
Shembull 3 – Objekti window
<html> <head> <script language="Javascript"> function WinOpen() { new_win=window.open("","NewWin","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" onClick="WinOpen();"> </form> </body> </html>
18
Shembull 3 - komente Funksioni WinOpen() 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 JavaScript. 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
19
Objekti document Nga vete emri , objekti Document ju jep akses ne DOM.
JavaScript 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 getElementById 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 h1: <h1 id=”headline”>Big news!</h1> ne kete menyre: var theElement=document.getElementById(“headline”); alert(theElement.innerHTML); // afishon Big news!
20
Metodat e Objektit String
21
Shembull 4: Metoda te objektit String
<html> <head> <title>the string object</title> </head> <body> <script language="JavaScript"> s = new String("Testing String Methods"); document.write('s = '+s+"<br/>"); document.write('s.charAt(2) = '+s.charAt(2)+"<br/>") ; document.write('s.indexOf("String") = '+s.indexOf("String")+"<br/>"); document.write('s.lastIndexOf("ing") = '+s.lastIndexOf("ing")+"<br/>"); document.write('s.substring(8,15) = '+s.substring(8,15)+"<br/>") ; document.write('s.toLowerCase() = '+s.toLowerCase()+"<br/>") ; document.write('s.toUpperCase() = '+s.toUpperCase()+"<br/>") ; </script> </body> </html>
22
Shembull 4: Ekzekutimi
23
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(dateString) 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() d1 = new Date("October 13, :13:00") d2 = new Date(79,5,24) d3 = new Date(79,5,24,11,33,0) Te gjitha datat llogariten ne milisekonda qe nga 01 January, :00:00 Universal Time (UTC)
24
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 (14th January 2010): var myDate=new Date() myDate.setFullYear(2010,0,14) Ne shembullin e meposhtem ne krijojme nje objekt Date me 5 dite ne te ardhem: myDate.setDate(myDate.getDate()+5) Shenim: Nese kur shtohen 5 dite dates, data kalon ne muaj tjeter, ndryshimi ndodh automatikisht nga vete objekti Date.
25
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 14th January 2010: var myDate=new Date() myDate.setFullYear(2010,0,14) var today = new Date() if (myDate>today) alert("Today is before 14th January 2010") else alert("Today is after 14th January 2010")
26
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.lastModified); </script> </body> </html>
27
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 lastModified. 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.getHours(),":", sot.getMinutes()); document.write("Data është:", sot.getDate(),"/",sot.getMonth()+1,"/", sot.getFullYear()); </script>
28
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 getMonth() 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ë.
29
Metoda te Objektit Date
Nje reference te plote te metodave te objektit date e gjeni tek
30
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 JavaScript 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.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E
31
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.
32
Metodat e objektit Math
33
Shembull 5 – perdorimi i objektit Math
<html> <head> <title>the math object</title> </head> <body> <h1>using the math object</h1> <script language="JavaScript"> 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>
34
Shembulli 5 – perdorimi i objektit Math
35
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: 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
36
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.
37
Objektet qe mund te krijoni vete ne Javascript
Veçorite Sintaksa per te aksesuar nje veçori te nje objekti eshte: emerObjekti.emerVecorie 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: personObj.firstname="John" personObj.lastname="Doe" personObj.age=30 personObj.eyecolor="blue" document.write(personObj.firstname) Kodi i mesiperm do te gjeneroje outputin: John
38
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: objName.methodName() Shenim: Parametrat qe kerkohen per metodat mund te kalohen ndermjet kllapave. Per te thirrur nje metode qe quhet sleep() per objektin Person: personObj.sleep()
39
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: personObj=new Object() personObj.firstname="John" personObj.lastname="Doe" personObj.age=50 personObj.eyecolor="blue“ Gjithashtu shtimi i nje metode per objektin Person eshte i thjeshte: Kodi i meposhtem shton nje metode eat() per objektin Person: personObj.eat=eat
40
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.emerVecorie. 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.
41
Krijimi i Objekteve Tuaja
Pasi te keni gati template-in, mund te krijoni instanca te reja te objektit si me poshte: myFather=new person("John","Doe",50,"blue") myMother=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 }
42
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. JavaScript e di se per cilin person behet fjale, duke perdorur "this.". Keshtuqe tashme mund te shkruani: myMother.newlastname("Doe").
43
Shembull 6 <html> <head>
<title>CREATING AN EMPLOYEE PROFILE</title> <script language="JavaScript"> //Define Methods function display(){ document.write("<h1>Employee Profile”+this.name+"</h1><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
44
//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−00−0000"); this.salary=prompt("Enter Annual Salary for "+this.name,"$00,000"); this.display=display; } </script> </head> <body> <script language="JavaScript"> newEmployee=new employee(); newEmployee.display(); </body> </html>
46
Ngjarjet (eventet) ne javascript
Ngjarjet jane veprime qe mund te detektohen nga JavaScript, 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.
47
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=JavaScript PSh: Shtojme eventin onclick ne nje button: <button onclick="displayDate()">Try it</button> Kur te klikohet butoni, do te thirret funksioni displayDate.
48
Shtimi i eventeve me HTML DOM
DOM i HTML-se na lejon qe t’i caktojme evente elementeve HTML duke perdorur JavaScript: Shembull Assign an onclick event to a button element: <script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>
49
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=“alert(‘You Clicked Me’);”/> Kur klikojme butonin “Click Me” ekzekutohet instruksioni Javascript alert(‘You Clicked Me’);
50
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=“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”.
51
onMouseOver(), onMouseOut()
Eventet onMouseOver dhe onMouseOut mund te perdoren per te thirrur nje funksion kur perdoruesi vendos mouse-in mbi nje element HTML ose e largon mousie-in nga elementi.
52
Shembull 7 <!DOCTYPE html> <html> <body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> <script> function mOver(obj) { obj.innerHTML="Thank You" } function mOut(obj) obj.innerHTML="Mouse Over Me" </script> </body> </html>
53
onFocus() Ky event ndodh kur nje perdorues i jep fokus ose klikon mbi nje kontroll te formes. <!DOCTYPE html> <html> <head> <script> function myFunction(x) { x.style.background="yellow"; } </script> </head> <body> Enter your name: <input type="text" onfocus="myFunction(this)"> <p>When the input field gets focus, a function is triggered which changes the background-color.</p> </body> </html>
54
onChange() Eventi onChange ndodh kur nje vlere ndryshon ne textbox, textarea etj. <!DOCTYPE html> <html> <head> <script> function myFunction() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> Enter your name: <input type="text" id="fname" onchange="myFunction()"> <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p> </body> </html>
55
onBlur() onBlur ndodh kur perdoruesi largohet nga nje fushe password, tekst, textarea te nje forme HTML. <input type=“text” name=“month” onBlur=“alert(‘The value of the Month Changed!!!’) ”/> onChange() dhe onBlur() nuk perdoren ne te njejten kohe.
56
onLoad(), onUnload() 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.
57
Shembuj <body onLoad=“alert(‘Welcome to our website’);”>
<body onUnload=“alert(‘Thanks for checking out our website’);”> Eshte e mundur te specifikojme disa evente ne nje tag te vetem HTML: <body onLoad=“alert(‘Welcome to our website’); onUnload=“alert(‘Thanks for checking out our website’);”>
58
Pyetje ???
Similar presentations
