Transcript JavaScript Leksion 8 JavaScript  JavaScript gjuha e skriptimit me popullore ne internet dhe punon ne te gjithe browser-at kryesore si Internet Explorer,

JavaScript
Leksion 8
JavaScript
 JavaScript gjuha e skriptimit me popullore ne internet dhe punon ne te
gjithe browser-at kryesore si Internet Explorer, Firefox, Chrome, Opera,
and Safari.
 Skriptet e shkruara me JavaScript mund te futen brenda faqeve HTML.
 Faqet web qe bashkeveprojne me perdoruesit dhe qe u ofrojne atyre
cilesi te larte te faqeve dhe informacione te personalizuara, njihen edhe
si faqe web inteligjente.
 Faqet inteligjente mundesojne kryerjen e veprimeve ne menyre
automatike, qe si te tilla ia shtojne vleren webit.
Psh: keto faqe mund te gjenerojne pergjigje individuale per secilin vizitor
ne veçanti dhe me kete ata krijojne pershtypjen e perkujdesjes ndaj tyre,
meqe keto faqe jane te afta te analizojne sjelljen dhe kerkesat e
vizitoreve ne baze te te cilave formojne edhe pergjigjen e pershtatshme.
E gjithe kjo realizohet duke perdorur Javascript.
Cili eshte 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 (siç duket dhe nga emri).
 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.
 Pra JavaScript eshte me shume nje zgjerim i HTML-se sesa
nje 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
Variablat dhe emrat e funksioneve

Si programues 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.
Shembuj emrash te vlefshem per variablat dhe
funksionet:
x
 add_two_num
 x13
 _whatever
 $money_string
Variablat dhe emrat e funksioneve
 Rekomandohet te perdoren emra pershkrues per
variablat dhe funksionet dhe te perdoret nje menyre
standarte e emertimit te tyre.
Shembuj
 add_two_num
 addTwoNumbers
Javascript perdor te dyten.
Fjalet e rezervuara te JavaScript
 Ka nje numer fjalesh qe perbejne komponentet e gjuhes
Javascript, te cilat paraqiten ne tabele.
 Keto fjale nuk mund te perdoren per emra variablash dhe
funksionesh sepse kompilatori nuk mund te dalloje nje
komande default te Javascript nga emri i funksionit apo
variablit tone.
break
continue
case
Else
finally
In
switc
typeof
debugger Enum
For
New
This
Var
catch
default
export
Function
Null
throw
void
class
delete
extends
If
return
True
while
const
Do
False
import
Super
Try
with
JavaScript
 Javascript vendoset brenda tag-eve <SCRIPT>.
 Javascript eshte case-sensitive.
 Cdo instruksion Javascript mbaron me pikepresje (;).
 Javascript injoron hapesirat.
JavaScript
 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)
Deklarimi i variablave
 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;
 Nqs nuk specifikojme nje vlere inicializuese te variablave kur i
deklarojme ato, vlera e tyre fillestare eshte nje vlere e papercaktuar
Javascript.
 Javascript eshte case-sensitive, dmth: x dhe X dy emra variablash te
ndryshem.
Tipet e variablave
 Nje ndryshim i madh ndermjet Javascript dhe gjuheve
te tjera si JAVA, C eshte qe Javascript eshte pa tip
(untyped).
 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.
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;
}
Operatoret e Javascript
Llogarites
(-)
mohimi unar
(++) inkrementimi
(--)
dekrementimi
(*)
shumezimi
(/)
pjesetimi
(%) mbetja aritmetike
(+)
mbledhja
(-)
zbritja
Operatoret e Javascript
Logjik
(!)
Not logjik
(>)
(<)
(<=)
(>=)
(==)
(!=) E ndryshme
(&&) And logjik
(||)
Or logjik
Bitwise
Operatoret e Javascript
Vleredhenia
(=) – vleredhenia
Operatore te perbere te vleredhenies
(+=) – mbledhja
(-=) – zbritja
(*=) – shumezimi
(/=) – pjesetimi
(%=) – mbetja aritmetike
Strukturat e kontrollit (Ciklet & Degezimet)
Degezimet
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;
}
Strukturat e kontrollit (Ciklet & Degezimet)
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;
}
Ciklet
Nje cikel eshte ajo strukture programi qe i detyron
instruksionet brenda ciklit 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++;
}
Strukturat e kontrollit (Ciklet & Degezimet)
for
Perdoret kur di saktesisht sa here duhet te ciklosh.
var x;
for (x=1; x<=10; x++) {
//instruksione
}
Objektet, Eventet, DOM
1.
2.
3.
4.
5.
i.
ii.
iii.
iv.
v.
vi.
vii.
viii.
ix.
Objektet
Operatori new
DOM (Document Object Model)
Array
Eventet
onClick
onSubmit
onMouseOver
onMouseOut
onFocus
onChange
onBlur
onLoad
onUnload
Objektet
 Nje objekt eshte nje koleksion variablash
(parametrash) dhe funksionesh (metodash).
 Sintaksa e perdorimit te nje objekti eshte:
objekt.parameter ose objekt.method().
 Nje string eshte nje objekt ne Javascript dhe ka disa
metoda dhe parametra.
 var StringVar=new String(“Ky eshte nje string me
karaktere”);
 var x=StringVar.length;//gjatesia e stringut
 var x=StringVar.toUpperCase();//kthen ne shkronja te
medha.
Objektet
 Javascript ka keto objekte te gatshme:
String, Math, Date, Array.
 Objekti String ka nje bashkesi metodash per
manipulimin e stringjeve.
 Objekti Math eshte nje koleksion metodash dhe
vecorish per te kryer veprime aritmetike si min(),
max(), sin(), cos() etj.
 Objekti Date eshte nje koleksion metodash per te
punuar me datat dhe oren.
 Objekti Array i lejon programuesit te krijojne
koleksione me te dhena.
Objektet
 Operatori new
 Objektet dhe array-t duhet te krijohen perpara se te
perdoren ne programe Javascript-i.
 Ne perdorim operatorin new per te krijuar nje instance
te re te nje objekti ose te nje array.
 Ndryshe themi qe operatori new krijon nje kopje te nje
objekti ekzistues ose te nje strukture array dhe i
vendosim pastaj emrin qe deshirojme.
 Sintaksa eshte o = new Object();
 Meqe objektet jane te ndertuar me metoda (funksione)
dhe parametra (variabla), objekti i ri i krijuar “o” ne
kete rast ka te gjitha metodat dhe parametrat e objektit
origjinal. Parametrat vendosen ne vlerat e tyre default.
DOM (Document Object Model)
 Browser-i na siguron nje seri objektesh.
 Dritarja e browser-it ku shfaqet faqja njihet si objekti
dritare (window object).
 Faqja HTML e paraqitur nga browser-i njihet si objekti
dokument (document object).
 Objekti dokument eshte me i perdoruri ne client-side
Javascript.
 Elementet HTML qe ne i shtojme nje faqeje gjithashtu
zgjerojne hierarkine e objekteve.
 Si shembull mund te marrim nje forme dhe elementet
qe ndodhen ne forme. Kjo do te thote qe mund t’i
referohemi objekteve si me poshte:
DOM
window.document.forms[0] – i referohet
formes se pare ne dokument.
Format jane te implementuara si array ne
DOM. Nqs kemi me shume se nje forme ne
faqe numrat fillojne nga 0.
window.document.Form1 – i referohet formes
me emer Form1.
window.document.Form1.FirstName.value – i
referohet vleres se shtypur ne textbox-in te
quajtur FirstName te formes se quajtur Form1.
shembull















<HTML>
<HEAD>
<TITLE> Forme e thjeshte </TITLE>
</HEAD>
<BODY>
<FORM NAME=“Form1”>
Name:<INPUT TYPE=“TEXT” NAME=“FirstName”><BR>
<INPUT TYPE=“Button” VALUE=“Submit Info”>
</FORM>
<FORM NAME=“Form2”>
Name: <INPUT TYPE=“TEXT” NAME=“LastName”><BR>
<INPUT TYPE=“Button” VALUE=“Submit Info”>
</FORM>
</BODY>
</HTML>
DOM
 forms[0] – i referohet formes se pare brenda ketij
dokumenti.
 Form1 – i referohet formes me emer Form1 ne kete
dokument.
 Form1.FullName.value – i referohet vleres se
shtypur ne browser nga klienti ne textbox-in e
quajtur FullName, ne formen e quajtur Form1 ne
kete dokument.
Array (Vektoret)
 Javascript, e ngjashme me gjuhet e tjera te
programimit, ka mundesine e perdorimit te
strukturave te te dhenave te quajtura array.
 Nje array eshte nje koleksion me te dhena ku cdo
pjese e te dhenave eshte e mbajtur ne nje pozicion
te numeruar brenda nje array.
 Cdo pozicioni ne nje array i jepet nje indeks duke
filluar nga zero, zero pozicioni i pare, nje i dyti etj.
 Nje array eshte implementuar si nje objekt ne
Javascript dhe mund te krijohet duke perdorur
new.
Array
 var a=new Array();//krijon nje array e quajtur “a”
 a[0]=1.2;// i vendos vlere elementit te pare
 a[1]=“Javascript”;// i vendos vlere elementit te dyte
 Array jane te rendesishem per t’u kuptuar sepse
nje numer komponentesh te Document Object
Model (DOM) si format, imazhet etj. jane
implementuar si array.
Eventet (Ngjarjet)
Ngjarjet jane trigera qe therrasin nje nga
funksionet tone.
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.
Eventet
 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=“window.alert(‘You Clicked Me’);”>
 Kur klikojme butonin “Click Me” ekzekutohet
instruksioni Javascript
window.alert(‘You Clicked Me’);
Eventet
 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=“return
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”.
Eventet
 onMouseOver()
 Nje event onMouseOver ndodh kur perdoruesi
pozicionon mouse-in mbi nje hiperlink, ose nje zone
te linkuar te nje imazhi te client-side.
 <a href=http://synergy.simplenet.com/simpsons/
onMouseOver=“window.status=‘The best Simpsons
Webpage on the NET!’; return true; ”>Click for
information on the Simpsons.</a>
 Ne kete shembull kur vendoset mouse-i mbi link ne
rreshtin e statusit te dritares se browserit afishohet
mesazhi.
Eventet
 onMouseOut()
 Ky event ndodh kur perdoruesi heq mouse-in nga
linku apo zona e linkuar.
 <a href=http://synergy.simplenet.com/simpsons/
onMouseOut=“window.status=‘The best Simpsons
Webpage on the NET!’; return true; “>Click for
information on the Simpsons</a>
Eventet
 onFocus()
 Ky event ndodh kur nje perdorues i jep fokus ose
klikon mbi nje kontroll te formes.
 <INPUT TYPE=“TEXT” NAME=“Month”
onFocus=“window.status=(‘Please enter the month
as two digits 01 deri 12’); return true;”>
 Kur klikohet textbox-i, pra merr fokus nje mesazh
paraqitet ne rreshtit e statusit te browser-it qe
tregon se cfare duhet te shtypet.
Eventet
 onChange()
 Ky event ndodh kur nje vlere ndryshon ne textbox,
textarea etj.
 <INPUT TYPE=“TEXT” NAME=“Month”
onChange=“window.status=(‘The value of the Month
Changed!!!’); return true;”>
Eventet
 onBlur()
 Ky event ndodh kur perdoruesi largohet nga nje
fushe password, tekst, tekstarea te nje forme
HTML.
 <INPUT TYPE=“TEXT” NAME=“Month”
onBlur=“window.status=(‘The value of the Month
Changed!!!’); return true;”>
 <INPUT TYPE=“TEXT” NAME=“Year”>
 onChange() dhe onBlur() nuk perdoren ne te
njejten kohe.
Eventet
 onLoad()
 Ky event ndodh kur browser-i perfundon se
ngarkuari nje dokument.
 <BODY onLoad=“alert(‘Welcome to our website’);”>
 onUnload()
 Ky event ndodh kur levizim ne nje dokument tjeter.
Psh kur perdorim butonin back ose klikojme ne nje
link ne nje faqe tjeter etj.
 <BODY onUnload=“alert(‘Thanks for checking out
our website’);”>
Eventet
Eshte e mundur te specifikojme shume evente
ne nje tag te vetem HTML.
 <BODY onLoad=“alert(‘Welcome to our website’);
onUnload=“alert(‘Thanks for checking out our
website’);”>
Pyetje?