JavaScript

Nje prezantim i JavaScript

JavaScript
 JavaScript është një gjuhë skriptimi për faqet e Web-
it.
 Skriptet e shkruara me JavaScript mund të futen në
faqet HTML tuaja.
 Me JavaScript ju keni shumë mundësira për
pasurimin e faqeve tuaja me elementë të rinj dhe
interesantë.
 Për shembull ju jeni në gjendje ti përgjigjeni
ngjarjeve që shkaktohen nga përdoruesi fare thjesht.
Disa efekte që tani mund të bëhen me JavaScript më
përpara mund të bëheshin vetëm me CGI. Kështu,
me ndihmën e JavaScript ju mund të krijoni faqe
Webi mjaft të sofistikuara.
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.
Variablat dhe emrat e
funksioneve
 Shembuj emrash te vlefshem:
 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.
JavaScript
 Fjalet e rezervuara
 Ka nje numer fjalesh qe perbejne
komponentet e gjuhes Javascript.
 Keta 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.
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.
Keta struktura jane te ngjashme ne shume
gjuhe programimi.
 Objektiva
 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 Javascript, duhet ta deklaroni.
 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 case-sensitive => x dhe X dy emra variablash te
ndryshem.
Tipet e variablave
 Nje diference e madhe 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
 (-) – negativizimi 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 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;
 }
Strukturat e kontrollit
(Ciklet & Degezimet)
 Ciklet
 Nje cikel eshte ajo strukture programi qe i detyron
instruksionet brenda ciklit te ekzekutohen derisa nje
kondite permbushet 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
 Objektivat
1. Objektet
2. Operatori new
3. DOM (Document Object Model)
4. Array
5. Eventet
i. onClick
ii. onSubmit
iii. onMouseOver
iv. onMouseOut
v. onFocus
vi. onChange
vii. onBlur
viii. onLoad
ix. onUnload
Objektet
 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 objektet e meposhtme te
ndertuara: String, Math, Date, Array.
 Objekti string ka nje numer 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 kohen.
 Objekti array i lejon programatoret te krijojne
koleksione me te dhena.
Objektet
 Operatori new
 Objektet dhe array nuk mund vetem te shtypen ne
programe Javascript. Ata duhet te krijohen.
 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
 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.
 Nje shembull eshte 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 forme 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
 Array
 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 index 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 tu kuptuar
sepse nje numer komponentesh te
Document Object Model (DOM) jane
implementuar si array si format, imazhet etj.
Eventet
 Eventet jane trigera qe therrasin nje
nga funksionet tone.
 Programet Javascript client-side nuk do
te ekzekutohen derisa te iniciohen nga
nje event.
 Nje event mund te jete nje veprim si
klikimi ne nje buton ose 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) nje forme. Ky event perdoret shpesh me nje
forme dhe nje buton submit per te filluar ekzekutimin
e scriptit.
 <FORM action=http://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 CGI “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;”>
 <INPUT TYPE=“TEXT” NAME=“Year”>
Eventet
 onBlur()
 Ky event ndodh kur perdoruesi le 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.
 <a href=
http://synergy.simplenet.com/simpsons/
onMouseOver=“mouse1.src=‘gifs/mous
e_over.gif’;”
onMouseOut=“mouse1.src=‘gifs/mouse
_out.gif’;” >
Faleminderit!