File

Transcript File

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
JavaScript.
4
Çfare eshte JavaScript?
• JavaScript u dizenjua per t’i 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
liçense
• 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
gjuhe programimi e mirefillte.
6
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
qe te vendoset type="text/javascript" ne tagun <script>.
10
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/>
Përsëri në HTML
</body>
</html>
11
Koment Shembull-1
• N.q.s ju po përdorni një browser që suporton JavaScript në
moment ju do shihni qe skripti do të punojë.
• Duhet theksuar se ky skript nuk është i dobishëm, sepse ju
mund ta shkruani atë në HTML më shpejt dhe më shkurtër,
por qëllimi ishte qe të tregohej se si përdoret taget e HTMLsë <script>. Ju mund ta përdorni këtë tag kudo në
dokumentin tuaj.
• Browserat e vjetër mund t’i trajtojne skriptet si permbajtje te
dokumentit, prandaj eshte mire qe skriptet të vendosen midis
komenteve për t’u 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 ($).
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.
2.
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:
var x=1, y=3, sum=0;
16
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.
var x=1, y=3, sum=0;
sum=x+y;
Operatore te tjere perdoren per krahasim
“==” per barazim, “>” etj.
var x=1, y=3, sum=0;
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)
Ndryshon shenjen e nje vlere (operator unar)
22
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
variablin qe ndodhet ne te majte (ekuivalent me
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
variablin qe ndodhet ne te majte (ekuivalent me
x=x/y)
/=
%=
pjeseton dy variablat dhe e vendos mbetjen e
pjesetimit ne variablin qe ndodhet ne te majte
(ekuivalent me x=x%y)
24
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
kthen true nese variabli ne te majte eshte me i vogel
ose i barabarte me variablin ne te djathte
<
>=
<=
25
Operatoret Logjike
Operator
Me poshte supozojme qe: x=20 dhe y=25
Pershkrimi
Shembull
&&
kthen true vetem kur te dyja
shprehjet jane true
(x==20) && (y==25) T
(x==20) && (y==20) F
||
kthen true kur te pakten njera
shprehje eshte true
(x==20) || (y==20) T
(x==25) || (y==20) F
|
kthen true nese shprehja eshte
false dhe kthen false nese
shprehja eshte true
| (x==20) F
| (x==25) T
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 t’u 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
The number is 2
32
Shembull -3 (Continue)
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3){continue;}
document.write("The number is " + i);
document.write("<br />");
}
</script>
Rezultati
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
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 veçorive te nje objekti.
Kodi ne trupin e ciklit for ... in ekzekutohet nga nje here per çdo
element/veçori.
• Sintaksa
• for (variable in object)
• {
• code to be executed
• }
34
Shembull - 4 for...in
<script type="text/javascript">
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,
ndërmjet 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
vogla ne JavaScript! Fjala “function” duhet te jete me shkronja
te vogla, se perndryshe do te ndodhe nje gabim!
37
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 t’i 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
te shtype butonin.
39
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ë thërrasë 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, kështu ju duhet
vetëm ta thërrisni atë. Ka shumë metoda të ndryshme që ju
mund t’i thërrisni, te cilat do t’i shohim me vone
40
Shembull-6
Të shohim se si mund të lexoni diçka, që një përdorues 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>
</body>
</html>
41
Komente Shembull-6
• Kemi disa elementë të rinj të shtuar në këtë skript.
• Sigurisht që i vutë re komentet në skript. Në këtë mënyrë ju
mund të fshihni skriptin nga browserat që nuk e suportojne
JavaScript-in. Ju duhet t’i vendosni ato në mënyrën e treguar
më sipër. Fillimi i komentit duhet të jetë menjëherë pas tagut
<script> dhe mbarimi para tagut </script>.
• Në këtë 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ë thërrasë kur diçka është futur në forme.
• Funksioni ' emrin(str)' do të thërritet kur ju të ‘largoheni' nga ky
element forme ose keni shtypur “enter” pasi keni futur diçka.
Funksioni do të marrë stringun e futur nëpërmjet komandës
'emrin(this.value)'.
'This.value' nënkupton vlerën e futur në këtë element forme.
42
Shembull-7
<html>
<head>
<script>

</script>
</head>
<body>
<a href ="" onMouseOver=“Hello()">link</a>
</body>
</html>
• Kjo përdor metodën onMouseOver dhe funksioni Hello() thërritet kur
ndodh ngjarja.
43
Perdorimi i JavaScript-it te jashtem
• Nganjehere mund t’ju duhet qe te njejtat skripte, t’i perdorni ne disa faqe.
Per te mos i shkruar skriptet ne çdo faqe, mund t’i 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>
• Shenim: Skriptin mund ta vendosni saktesisht aty ku do ta vendosnit
normalisht skriptin (si tek seksioni i kokes, ashtu edhe tek trupi i
dokumentit)!
44
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 t’i 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>
<script type="text/javascript">
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 diçka.
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>
<script type="text/javascript">
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
box" />
</body>
</html>
49
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>
<script type="text/javascript">
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>
</html>
51
Pyetje?
52

File

Transcript File

Directory