Programim i Avancuar n Web Seminar 2

Internet Information Service (IIS)

&
JavaScript Events
14/11/2016

Prmbajtja

IIS Virtual Directory

JavaScript Events

Clipboard Events

Mouse Events

Input Events

Onload Events

14/11/2016

IIS 7.5 n Windows 7

Aktivizimi i IIS : Control Panel/ Programs and Features/ Turn Windows

Features on or of

Manaxhimi i IIS: Control Panel/ System and Security/ Administrative

Tools/ IIS Manager
C:\inetpub\wwwroot\

Konfigurimi i portave te IIS: Ndrysho Bindings settings n IIS

Manager

14/11/2016

Virtual Directory in IIS

14/11/2016

Virtual Directory in IIS

14/11/2016

Prmbajtja

IIS Virtual Directory

JavaScript Events

Clipboard Events

Mouse Events

Input Events

Onload Events

14/11/2016

JavaScript Events

Kur nj prdorues kryen nj veprim shkaktohet nj Event

Eventi ndodh kur nj prdorues krkon t manipuloj elementt e nj faqeje

Web:
- load-on nj faqe
- klikon nj buton
- mbush nj form
- kryen veprime te caktuara me mouse/ tastiere

DOM (Document Object Model) jep akses ne te gjiithe elementet e faqes Web
(objekte).
Nepermjet JS keto elemente mund te manipulohen.
14/11/2016

Clipboard Events

oncut- Ekzekutohet nje javascript kur bejme cut nje pjese teksti
ne nje <input> element
Shembull 1*

oncopy- Ekzekutohet nje javascript kur bejme copy nje pjese

teksti ne nje <input> element
Shembull 2

onpaste- Ekzekutohet nje javascript kur bejme paste nje pjese

teksti ne nje <input> element
Shembull 3

*Klikoni mbi link per te pare kodin dhe ekzekutimin e tij online

14/11/2016

Mouse Events

onmousemove- ekzekuton nje javascript ne momentin qe

levizim mouse-in mbi nje element
Shembull 4

onmouseover/out-mund te perdoren per te thirrur nje funksion

kur perdoruesi vendos mouse-in mbi nje element HTML ose e
largon mouse-in nga elementi.
Shembull 5
onimagemap- gjate levizjes se mouse-it pergjate hartes marrim
inf mbi elemente te ndryshem te figures
Shembull 6
14/11/2016

10

Diferenca midis onmousemove,

onmouseleave dhe onmouseout
onmousemove event - ndodh cdo here qe mouse-i leviz tek divelement.
mouseleave event - ndodh vetem kur mouse-i leviz jashte
elementit
onmouseout event - ndodh ne momentin qe mouse leviz jashte
elementit kryesor si edhe te atij child
Shembull 11
14/11/2016

11

Diferenca midis onmousemove,

onmouseenter dhe onmouseover
onmousemove event - ndodh cdo here qe mouse-i leviz tek
div-element.
mouseenter event - ndodh vetem ne momentin qe ne "hyjme"
tek nje element
onmouseover event - ndodh ne momentin qe mouse-i "hyn" tek
nje element si dhe tek child element sic duket nga figura
Shembull 12

14/11/2016

12

Mouse Events
onclick- kur perdoruesi klikon duke perdorur mouse-in
Shembull 7
doubleclick - ondblclick kur kemi klikim te dyfishte
Shembull 8
onscroll-ekzekutohet nje javascript kur bejme scroll
Shembull 9
Onmousedown/up- onmousedown ekzekuton nje javascript
kur klikojme me mouse pergjate nje paragrafi dhe onmouseup
ekzekuton nje javascript ne momentin qe ne leshojme butonin
e mouse-s
Shembull 10
14/11/2016

13

Input Events
Jane evente qe i shohim tek ndertimi i formave. Keto evente kane te bejme me
modifikimin e inputit qe vendosim te fushat e shkrimit, nxjerrjen e njoftimeve kur
preket teksti mbi keto fusha, etj.

Eventi onblur- Ne kete shembull ky event kthen tekstin e shkruar brenda fushes se
shkrimit nga tekst me germa te vogla ne tekt me germa te medha. Kjo gje ndodh ne
momentin kur fusha e shkrimit nuk eshte e fokusuar, pra kur kemi klikuar ne nje
fushe tjeter, apo jashte saj. (Shembull 13)

Eventi onchange- Ekzekutohet nje kod JS ne pergjigje te zgjedhjes se perdoruesit,

psh. zgjedhjes se nje elementi ne nje menu te krijuar. ( Shembull 14)

Eventi onfocus- Ekzekutohet nje kod JS kur fokusohemi mbi nje element te caktuar.
Ne kete shembull, ndryshohet ngjyra e fushes ne momentin kur klikohet mbi te dhe
ajo plotesohet me te dhena. Kjo mund te ndihmoje perdoruesin te fokusohet mbi
fushen qe po ploteson ne momentin qe ploteson nje form. (Shembull 15)

14/11/2016

14

Input Events

Eventi onkeydown- Ekzekutohet nje kod JS sa here qe shtypim nje key ne

tastiere nderkohe qe jemi te fokusuar brenda nje fushe te caktuar shkrimi. (
Shembull 16)

Eventi onkeypress- Ky event ben te njejten gje si me lart. Ndryshimi i vetem

eshte se kodi JS ekzekutohet vetem kur shtypim nje key karakter.
(
Shembull 17) Provoni ne te dy rastet: Shift+A

Eventi onkeyup- Ky eventi kryen te njejtin funksion si ai me lart me

transformimin e tekstit nga karaktere te vogla ne tekst me karaktere te medha.
Ndryshimi me funksionin me lart eshte se ndryshimi ketu ndodh menjehere sapo
shtypet karakteri, pra ne momentin kur fusha eshte e fokusuar. (Shembull 18)

Eventi onkeyup2- Ky event mer dhe kopjon inputet e nje fushe dhe i vendos
ne nje fushe tjeter. Ky veprim ndodh vetem sapo karakteri shkruhet ne fushe. (
Shembull 19)
14/11/2016

15

Input Events

Eventi onreset- Ky event pastron fushat me ane te nje butoni reset.

(Shembull 20)

Eventi onselect- Ekzekutohet nje kod JS ne momentin kur selektohet nje pjese e
tekstit te shkruar ne nje fushe te formes. (Shembull 21)

Eventi onsubmit- Konkretisht ky event merr emrin e perdoruesit ne nje fushe tekst
dhe ne momentin qe shtypet butoni submit afishon nje mesazh alerti per njoftim qe
perdoruesi do te drejtohet ne nje faqe tjeter, ne kete rast tek faqja www.feut.al. (
Shembull 23)

Eventi i dyfishte(onkeydown/onkeyup)- Ne kete rast sa here shkruajme nje

karakter ne fushen e shkrimit fusha merr ngjyre te verdhe dhe me pas rimerr ngjyren
qe kishte. (Shembull 24)

Eventi onsearch (Shembull 25)

14/11/2016

16

Onload Events

Eventi onload ndodh kur nje objekt ngarkohet (load-ohet)

Onload perdoret se shumti me elementin <body> per te ekzekutuar nje

script, pasi faqja web ka load-uar plotesisht te gjithe permbajtjen.(duke
perfshire ketu imazhe, skripte, file CSS etj).

Eventi onload mund te perdoret per te kontrolluar tipin e browser-it te

perdoruesit dhe versionin e browserit, dhe te load-oje versionin e duhur
te faqes web bazuar ne kete informacion.

14/11/2016

17

Onload Events

onload- page loading - pasi te gjithe elementet e faqes jane ekzekutuar me sukses,
shfaqet nje alert qe e njofton kete gje per perdoruesin. (Shembull 26)

onload Image loading pas loadimit te imazhit nepermjet eventit onload, shfaqet
nje alert. (Shembull 27)

onerror gabim ne loadimin (ngarkimin) e imazhit Behet thirrja e nje funksioni

kur ndodh nje gabim ne ngarkimin e nje imazhi. Funksioni jep nje 'alert' qe tregon
gabimin e ndodhur. Ne kete shembull i referohemi nje imazhi qe nuk ekziston. (
Shembull 28)

onresize- Ekzekuton nje kod JS ne pergjigje te eventit resize. Ne kete shembull

madhesia e dritares te browserit ndryshohet nga perdoruesi Nepermjet onresize shfaqet
sa eshte madhesia e dritares kur ajo ndryshohet prej perdoruesit. (Shembull 29)

Event onbeforeunload Njofton perdoruesin se nese do te mbylle faqen apo te beje

refresh te saj do te humbase te dhenat e shkruara deri ne ate moment ne forme.(
Shembull 30)
14/11/2016