Leksioni 4 Javascript

JavaScript
Leksion 4
1
Apletet ne Java dhe JavaScript
Apletet ne Java
Programe te shkurtra qe i bejne faqet Web me inteligjente
dhe interaktive
Dergohen si nje skedar i vecante bashke me dokumentin
HTML
Apletet nuk punojne gjithmone mire ne te gjithe browserat
Apletet duhet te jene te aktivizuar ne browser
2
Apletet ne Java dhe JavaScript
JavaScript
Shtohet direkt ne kodin HTML
Perdorimet me te shpeshta
Verifikimi i informacionit te formave
Krijimi i butonave rollover
Banera reklamash
Dritare Pop-up
3
Apletet dhe Interpretuesit Java
Kjo figure tregon nje web browser qe ka nje interpretues Java e ekzekuton programin
lokalisht ne kompjuterin e perdoruesit, duke liruar web serverin per qellime te tjera.
Kompilimi eshte procesi me

ane te te cilit nje program
konvertohet nga nje skedar
tekst i kodit, ne nje skedar te
ekzekutueshem te quajtur nje
applet
Per ta thjeshtuar kete proces

kompleks, zhvilluesit nga Netscape
dhe Sun Microsystems krijuan nje
nenbashkesi te Javes te quajtur 4
JavaScript.
fare eshte JavaScript?
JavaScript u dizenjua per ti shtuar interaktivitet faqeve HTML
JavaScript eshte nje gjuhe skriptimi
Nje gjuhe skriptimi eshte nje gjuhe programimi e lehte (e
thjeshtuar)
JavaScript eshte nje gjuhe e interpretuar (dmth qe skriptet
ekzekutohen pa patur nevoje qe te kompilohen paraprakisht)
Kushdo mund ta perdore JavaScriptin pa patur nevoje per
liense
JavaScript eshte gjuha e skriptimit me popullore ne internet

dhe punon ne te gjithe browser-at kryesore si Internet
Explorer, Firefox, Chrome, Opera, Safari.
5
Ndryshimi midis Java-es dhe JavaScript-it
Megjithese nga emri duken njesoj, Java nuk eshte njesoj si
JavaScript!
Keto te dyja jane dy teknika te ndryshme per programime ne
Internet. Java eshte nje gjuhe programimi, ndersa JavaScript
eshte nje gjuhe skriptimi
Javascripti ne dallim nga Java, nuk ka nevoje te perkthehet nga
kompjuteri (compiled). Pra ai paraqitet si nje tekst i integruar ne
HTML, qe perdoret per te gjeneruar faqet web. Kjo nenkupton
qe per te shkruar Javascriptin, mjafton edhe nje editor teksti i
thjeshte.
JavaScript mund te mos jete nje gjuhe llogaritese aq e fuqishme
sa Java, por eshte me e thjeshte ne perdorim
Pra JavaScript eshte me shume nje zgjerim i HTML-se sesa nje 6
gjuhe programimi e mirefillte.
Karakteristikat kryesore te Javascriptit
Skripti mund te perbehet vetem nga nje sekuence komandash
Nuk ka nevoje per paraqitjen statike te variablave, sepse ato

mund te deklarohen kudo ne program
Objektet e paracaktuara ne Javascript, ne fakt, perbejne

objektet e te gjithe web browserave dhe web serverave (si
document, form, elementet ne forme, framet, dritaret-window,
etj.)
Eshte kompatibel me te gjithe platformat

7
Shembull i nje Web Site duke
perdorur JavaScript
8
Shkrimi i nje programi JavaScript
Programet JavaScript mund te vendosen

Direkt ne skedarin HTML ose
Mund te ruhen si skedare te jashtem.
Ju mund ta vendosni JavaScript-in kudo brenda skedarit

HTML :
Brenda tageve <head> ose
Brenda tageve <body>
9
Perdorimi i tagut <script>
<script src=url type=text/javascript></script>
Vecoria SRC kerkohet vetem nese ju e vendosni progamin ne
nje skedar te ndare
<script type=text/javascript>
komandat dhe komentet e skriptit
</script>
JavaScript eshte tashme gjuha default e te gjithe browsera-ve

moderne dhe e HTML5, prandaj nuk eshte e domosdoshme
10
qe te vendoset type="text/javascript" ne tagun <script>.
Shembull-1
<html>
<head></head>
<body>
Skripti im i par me Javascript
<br/>
Ky sht nj dokument normal Html
<br/>
<script>
document.write("Kjo sht Javascript!") // kod Javascript
</script>
<br/>
Prsri n HTML
</body> 11
</html>
Koment Shembull-1
N.q.s ju po prdorni nj browser q suporton JavaScript n
moment ju do shihni qe skripti do t punoj.
Duhet theksuar se ky skript nuk sht i dobishm, sepse ju
mund ta shkruani at n HTML m shpejt dhe m shkurtr,
por qllimi ishte qe t tregohej se si prdoret taget e HTML-
s <script>. Ju mund ta prdorni kt tag kudo n
dokumentin tuaj.
Browserat e vjetr mund ti trajtojne skriptet si permbajtje te
dokumentit, prandaj eshte mire qe skriptet t vendosen midis
komenteve pr tu siguruar q keto browsera te mos i shfaqin
skriptet.
12
Emrat e variablave dhe funksioneve (1)
Neve, si programues, na duhet te zgjedhim emrat per
variablat dhe funksionet.
Emrat e variablave dhe funksioneve duhet te ndjekin rregullat
e meposhtme:
1. Karakteri i pare duhet te jete nje shkronje alfabeti (e
madhe ose e vogel), nje (_), ose shenje dollari ($).
2. Nuk mund te perdorni nje numer si shkronje te pare.
3. Emrat nuk duhet te permbajne hapesira.
4. Emrat nuk duhet te jene ndonje nga fjalet e rezervuara
te gjuhes.
13
Emrat e variablave dhe funksioneve(2)
Shembuj emrash te vlefshem per variablat dhe
funksionet:
x
add_two_num
x13
_whatever
$money_string
14
JavaScript
Ne vazhdim te leksionit do te shohim struktura baze
te programimit. Keto struktura jane te ngjashme ne
shume gjuhe programimi.
Deklarimi i variablave
Perdorimi i operatoreve
Krijimi i strukturave te kontrollit (degezimet & ciklet)
Funksionet (built-in dhe te krijuar nga programuesi)
15
Deklarimi i variablave (1)
Variabli eshte nje emer qe i caktohet nje vendi ne memorie per
te ruajtur te dhena.
Perpara se te perdorni nje variabel ne nje program ne
Javascript, duhet ta deklaroni ate.
Variablat deklarohen me fjalen var si:
var x;
var y;
var sum;
Mund te deklarojme shume variabla me te njejten fjale var:
var x, y, sum;
Mund te kombinojme deklarim te variablave me inicializim te
tyre: 16
var x=1, y=3, sum=0;
Deklarimi i variablave (2)
Nqs nuk specifikojme nje vlere inicializuese te variablave kur i
deklarojme ato, vlera e tyre fillestare eshte nje vlere e
papercaktuar (undefined) Javascript.
Javascript eshte case-sensitive, dmth: x dhe X dy emra

variablash te ndryshem.
Kur i jepni nje variabli nje vlere tekst, duhet ta vendosni ate
brenda thonjezave
Nese ju e rideklaroni nje variabel ne Javascript, ai nuk do ta

humbase vleren ekzistuese. 17
Fusha e veprimit Variablat Lokale
Nje variabel i deklaruar brenda nje funksioni ne JavaScript behet
LOCAL dhe mund te aksesohet vetem brenda atij funksioni. Pra ky
variabel ka fushe veprimi Lokale
Ju mund te keni varibla lokale me te njejtin emer ne funksione te

ndryshme, sepse variablat lokale njihen vetem nga funksioni ne te
cilin jane deklaruar.
Variablat lokale shkaterrohen kur ju dilni nga funksioni.
18
Fusha e veprimit Variablat Globale
Variablat e deklaruar jashte nje funksioni behen GLOBAL, dhe te gjitha
skriptet dhe funksionet ne faqen web mund ta aksesojne ate.
Variablat global shkaterrohen kur ju mbyllni faqen.
Nqs nuk vendosim fjalen kyce var ne deklarimin e variablave,

atehere variabli behet gjithmone GLOBAL.
Psh, shprehja:
emerMakine="Volvo";
Do te deklaroje nje variabel emerMakine, si ne variabel global, edhe nese ajo
ekzekutohet brenda nje funksioni.
19
Tipet e variablave
Nje ndryshim i madh ndermjet Javascript dhe gjuheve te tjera si JAVA,
C eshte qe Javascript eshte pa tip (untyped) (ose ndryshe weekly
typed)
Kjo do te thote qe nje variabel Javascript mund te mbaje nje vlere te
cdo tipi te dhenash, dhe tipi i te dhenave nuk duhet te vendoset kur
deklarohet variabli.
Kjo lejon te ndryshohet tipi i te dhenave te variablit gjate ekzekutimit
te programit, psh:
var x=10;
x=ten;
Ne kete shembull variabli x ne fillim ka marre vleren e nje numri te
plote 10, pastaj te nje stringu.
20
Perdorimi i operatoreve
Operatoret jane ato qe veprojne mbi variablat.
Operatori (=) eshte operatori i vleredhenies
Operatori (+) eshte operatori i shtimit.
sum=x+y;
Operatore te tjere perdoren per krahasim

== per barazim, > etj.
if (sum==0) {
sum=x+y; 21
}
Operatoret Aritmetike
Operator Pershkrimi
+ Mbledh dy vlera bashke
- Zbret nje vlere nga nje tjeter
* Shumezon dy vlera bashke
/ Pjeston nje vlere nga nje tjeter
% Tregon mbetjen pas pjestimit te nje vlere me nje
tjeter
++ Rrit nje vlere me 1 (operator unar)
-- Zbret nje vlere me 1 (operator unar) 22
Ndryshon shenjen e nje vlere (operator unar)
Operatoret e Vleredhenies (1)
Operator Pershkrimi
= variablit qe ndodhet ne te majte i jep vleren e

variablit ne te djathte
+= mbledh dy variablat dhe e vendos rezultatin ne
variablin qe ndodhet ne te majte (ekuivalent me
x=x+y)
-= zbret dy variablat dhe e vendos rezultatin ne
x=x-y)
23
Operatoret e Vleredhenies (2)
Operator Pershkrimi
*= shumezon dy variablat dhe e vendos rezultatin

ne variablin qe ndodhet ne te majte (ekuivalent
me x=x*y)
/= pjeseton dy variablat dhe e vendos rezultatin ne
x=x/y)
%= pjeseton dy variablat dhe e vendos mbetjen e
pjesetimit ne variablin qe ndodhet ne te majte
24
(ekuivalent me x=x%y)
Operatoret e Krahasimit
Operator Pershkrimi
== kthen true nese variablat jane te barabarte
!= kthen true nese variablat nuk jane te barabarte
> kthen true nese variabli ne te majte eshte me i

madh se variabli ne te djathte
< kthen true nese variabli ne te majte eshte me i vogel
se variabli ne te djathte
>= kthen true nese variabli ne te majte eshte me i
madh ose i barabarte me variablin ne te djathte
25
<= kthen true nese variabli ne te majte eshte me i vogel
ose i barabarte me variablin ne te djathte
Operatoret Logjike
Me poshte supozojme qe: x=20 dhe y=25
Operator Pershkrimi Shembull
&& kthen true vetem kur te dyja (x==20) && (y==25) T
shprehjet jane true (x==20) && (y==20) F
|| kthen true kur te pakten njera (x==20) || (y==20) T
shprehje eshte true (x==25) || (y==20) F
| kthen true nese shprehja eshte | (x==20) F
false dhe kthen false nese | (x==25) T
shprehja eshte true
26
Strukturat e kontrollit Degezimet (1)
If
Instruksioni if eshte nje strukture kontrolli shume e rendesishme, lejon
programin te kryeje nje test dhe te veproje bazuar ne rezultatin e testit.
Per shembull
if ((x==1) && (y==3)) {
sum = y-x;
}
If perdoret edhe me else per shembull

if (sum==0) {
sum = x+y;
}
else {
subtotal = sum;
}
27
Strukturat e kontrollit Degezimet (2)
Switch
Perdoret kur nje variabel mund te marre nje numer vlerash dhe ne
duam te testojme per keto vlera.
Eshte me i shkurter dhe me i lehte per tu lexuar se nje numer
instruksionesh if.
switch (n) {
case 1://instruksione
break;
case 2://instruksione
break;
default://instruksione nqs te tjerat nuk plotesohen
break;
28
}
Strukturat e kontrollit Ciklet(1)
Nje cikel eshte ajo strukture programi qe i detyron
instruksionet brenda tij, qe te ekzekutohen derisa te
permbushet nje kondite dhe cikli perfundon.
while
Perdoret kur nuk di sa here duhet te ciklosh, por di qe
duhet ndaluar kur ndeshet kondita.
var x=1;
while (x<=10) {
//derisa x me i madh se 10
//instruksione
x++; 29
}
Strukturat e kontrollit Ciklet(2)
for
Perdoret kur di saktesisht sa here duhet te ciklosh.
var x;
for (x=1; x<=10; x++) {
//instruksione
}
30
JavaScript Break dhe Continue
Jane dy shprehje ne JS qe mund te perdoren brenda
cikleve: break dhe continue.
Shprehja Break
Perdoret kur duam te nderpresim cilkin dhe te
vazhdojme ekzekutimin e kodit qe vjen pas ciklit, nese
ka.
Shprehja Continue
Perdoret per te nderprere ekzekutimin e ciklit per
vleren aktuale dhe te vazhdojme ekzekutimin e ciklit
me vleren tjeter (vleren pasardhese). 31
Shembull - 2 (Break)
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3){break;}
document.write("The number is " + i);
document.write("<br />");
}
</script>
Rezultati
The number is 0
The number is 1 32
The number is 2
Shembull -3 (Continue)
var i=0; Rezultati
for (i=0;i<=10;i++) The number is 0
{ The number is 1
The number is 2
if (i==3){continue;} The number is 4
document.write("The number is " + i); The number is 5
document.write("<br />"); The number is 6
The number is 7
} The number is 8
</script> The number is 9
The number is 10
33
Shprehja For...In ne JavaScript
Shprehja for...in perdoret per te bredhur neper elementet e
nje vektori me ane te veorive te nje objekti.
Kodi ne trupin e ciklit for ... in ekzekutohet nga nje here per do
element/veori.
Sintaksa
for (variable in object)
{
code to be executed
}
34
Shembull - 4 for...in
var x;
var mycars = new Array();
mycars[0] = "Saab;
mycars[1] = "Volvo;
mycars[2] = "BMW;
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
35
Funksionet ne Javascript
Per te penguar browserin qe te ekzekutoje nje skript sapo
ngarkohet faqja, mund ta ndertoni skriptin si nje funksion.
Nje funksion permban kod qe do te ekzekutohet vetem nga nje
ngjarje ose nga nje thirrje e atij funksioni.
Mund te therrisni nje funksion kudo brenda faqes (ose madje
edhe nga faqe te tjera nese funksioni eshte i vendosur ne nje
skedar te jashtem .js)
Funksionet percaktohen ne fillim te faqes, ne seksionin e kokes,
ndrmjet tageve <head> t faqes HTML.
36
Si deklarohet nje funksion?
Sintaksa per te krijuar nje funksion eshte:
function emerfunksioni(var1,var2,...,varX)
{
kod
}
var1, var2, etj jane variabla ose vlera qe i kalohen funksionit.
Kllapat { dhe } percaktojne fillimin dhe fundin e funksionit.
Shenim: Nje funksion pa parametra duhet te perfshije kllapat ()
pas emrit te funksionit:
function functionname()
{
some code
}
Shenim: Mos harroni rendesine e shkronjave te medha dhe te 37
vogla ne JavaScript! Fjala function duhet te jete me shkronja
te vogla, se perndryshe do te ndodhe nje gabim!
Shprehja return
Shprehja return perdoret per te specifikuar vleren qe do te kthehet nga
funksioni.
Keshtu qe funksionet qe do te kthejne vlere duhet te perdorin shprehjen
return.
Shembull:
Funksioni i meposhtem kthen prodhimin e dy numrave (a dhe b):
function prod(a,b)
{
x=a*b;
return x;
}
Kur e therrisni kete funksion, duhet ti kaloni dy parametra:

product=prod(2,3)
38
Vlera e kthyer nga funksioni prod() eshte 6, dhe ajo do te ruhet ne nje
variabel te quajtur product.
Shembulli-5
<html>
<head>
<script>
function shtyp() {
alert("MIRESEVINI!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="M shtyp" onclick="shtyp()/>
</form>
</body>
</html>
Nese rreshti: alert(MIRESEVINI!"),nuk do te shkruhej brenda nje

funksioni, ai do te ishte ekzekutuar sapo te ishte ngarkuar ky rresht.
Ndersa tani, skripti nuk ekzekutohet perpara se perpara perdoruesi 39
te shtype butonin.
Komente Shembulli-5
Ky skript do t krijoj nj buton dhe kur ju ta shtypni at, do t
hapet nj dritare q thot: " MIRESEVINI!".
N fillim funksioni ngarkohet dhe ruhet n memorje. Pastaj
krijohet nj buton me tagun <form> (HTML). N tagun <input>
sht eventi 'onclick', i cili i tregon browserit se cilin funksion
duhet t thrras kur ky buton t shtypet (sigurisht n.q.s
browseri suporton JavaScript).
Funksioni ' shtyp()' sht deklaruar n fillim t HTML-s tek
tagu <head>. Ky funksion ekzekutohet, kur shtypet butoni.
Metoda 'alert() sht deklaruar n JavaScript, kshtu ju duhet
vetm ta thrrisni at. Ka shum metoda t ndryshme q ju
mund ti thrrisni, te cilat do ti shohim me vone
40
Shembull-6
T shohim se si mund t lexoni dika, q nj prdorues ka futur n nj forme.
<html>
<head>
<script>

</script>
</head>
<body>
Ju lutemi jepni emrin:
<form>
<input type="text" name="Emri" onBlur="emrin(this.value)" value="">
</form>
41
</body>
</html>
Komente Shembull-6
Kemi disa element t rinj t shtuar n kt skript.
Sigurisht q i vut re komentet n skript. N kt mnyr ju
mund t fshihni skriptin nga browserat q nuk e suportojne
JavaScript-in. Ju duhet ti vendosni ato n mnyrn e treguar
m sipr. Fillimi i komentit duhet t jet menjher pas tagut
<script> dhe mbarimi para tagut </script>.
N kt dokument HTML ju keni nj element forme ku mund t
shkruani emrin tuaj.
'onBlur' tek tagu <input> i tregon browserit se cilin funksion
duhet t thrras kur dika sht futur n forme.
Funksioni ' emrin(str)' do t thrritet kur ju t largoheni' nga ky
element forme ose keni shtypur enter pasi keni futur dika.
Funksioni do t marr stringun e futur nprmjet komands
'emrin(this.value)'. 42
'This.value' nnkupton vlern e futur n kt element forme.

Shembull-7
<html>
<head>
<script>

</script>
</head>
<body>
<a href ="" onMouseOver=Hello()">link</a>
</body>
</html>
43
Kjo prdor metodn onMouseOver dhe funksioni Hello() thrritet kur
ndodh ngjarja.
Perdorimi i JavaScript-it te jashtem
Nganjehere mund tju duhet qe te njejtat skripte, ti perdorni ne disa faqe.
Per te mos i shkruar skriptet ne do faqe, mund ti shkruani ato ne nje
skedar te jashtem, te cilin e ruani me prapashtesen .js
Shenim: Skripti i jashtem nuk duhet te permbaje tagun <script>!
Per ta perdorur kete skript te jashtem, vendoseni skedarin .js tek atributi
"src" i tagut <script>:
<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>
44
Shenim: Skriptin mund ta vendosni saktesisht aty ku do ta vendosnit
normalisht skriptin (si tek seksioni i kokes, ashtu edhe tek trupi i
dokumentit)!
Kutite e dialogut (Popup boxes)
Ne JavaScript mund te krijojme 3 lloje kutishe dialogu :
1. Alert box,
2. Confirm box,
3. Prompt box.
45
Alert Box
Nje alert box (dritare mesazhi) shpesh perdoret nese deshironi
qe informacioni ti shfaqet perdoruesit. Kur shfaqet nje dritare
mesazhi, perdoruesi duhet te klikoje OK, ne menyre qe te
vazhdoje me tej.
Sintaksa:
alert("sometext")
46
Shembull 8 - Alert Box
<html>
<head>
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
</html>
47
Confirm Box
Nje confirm box (dritare kofirmimi) shpqsh perdoret nese
deshironi qe perdoruesi te verifikoje ose te pranoje dika.
Kur shfaqet nje dritare kofirmimi, perdoruesi duhet te shtype
ose "OK, ose "Cancel, ne menyre qe te vazhdoje me tej.
Nese perdoruesi shtyp "OK", dritarja kthen true. Nese
perdoruesi klikon "Cancel", dritarja kthen false.
Sintaksa:
confirm("sometext")
48
Shembull 9 - Confirm Box
<html>
<head>
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm 49
box" />
</body>
</html>
Prompt Box
Nje prompt box (dritare prompti) shpesh perdoret nese
deshironi qe perdoruesi te jape nje vlere perpara se te hyje ne
nje faqe.
Kur shfaqet nje prompt box, perdoruesi duhet te klikoje "OK"
ose "Cancel" ne menyre qe te vazhdoje me tej, pasi ka futur nje
vlere inputi.
Nese perdoruesi klikon "OK" dritarja kthen vleren e inputit.
Nese perdoruesi klikon "Cancel" dritarja kthen null.
Sintaksa:
prompt("sometext","defaultvalue")
50
Shembull 10 - Prompt Box
<html>
<head>
function show_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt box" />
</body> 51
</html>
Pyetje?
52

Leksioni 4 Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Leksioni 4 Javascript

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

Kompilimi eshte procesi me

Per ta thjeshtuar kete proces

JavaScript eshte gjuha e skriptimit me popullore ne internet

Nuk ka nevoje per paraqitjen statike te variablave, sepse ato

Objektet e paracaktuara ne Javascript, ne fakt, perbejne

Eshte kompatibel me te gjithe platformat

Programet JavaScript mund te vendosen

Ju mund ta vendosni JavaScript-in kudo brenda skedarit

JavaScript eshte tashme gjuha default e te gjithe browsera-ve

Javascript eshte case-sensitive, dmth: x dhe X dy emra

Nese ju e rideklaroni nje variabel ne Javascript, ai nuk do ta

Ju mund te keni varibla lokale me te njejtin emer ne funksione te

Variablat lokale shkaterrohen kur ju dilni nga funksioni.

Variablat global shkaterrohen kur ju mbyllni faqen.

Nqs nuk vendosim fjalen kyce var ne deklarimin e variablave,

Operatore te tjere perdoren per krahasim

= variablit qe ndodhet ne te majte i jep vleren e

*= shumezon dy variablat dhe e vendos rezultatin

!= kthen true nese variablat nuk jane te barabarte

> kthen true nese variabli ne te majte eshte me i

If perdoret edhe me else per shembull

Kur e therrisni kete funksion, duhet ti kaloni dy parametra:

Nese rreshti: alert(MIRESEVINI!"),nuk do te shkruhej brenda nje

'This.value' nnkupton vlern e futur n kt element forme.

Shenim: Skripti i jashtem nuk duhet te permbaje tagun <script>!

Vous aimerez peut-être aussi