1. JavaScript
Leksion 8

2. 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.

3. 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.

4. 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

5. 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:
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.
Emrat nuk duhet te permbajne hapesira.
Emrat nuk duhet te jene ndonje nga fjalet e rezervuara te gjuhes.

6. Shembuj emrash te vlefshem per variablat dhe funksionet:x
add_two_num
x13
_whatever
$money_string

7. 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.

8. 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
Else
finally In
switc
typeof
case
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

9. JavaScript Javascript vendoset brenda tag-eve <SCRIPT>.
Javascript eshte case-sensitive.
Cdo instruksion Javascript mbaron me pikepresje (;).
Javascript injoron hapesirat.

10. 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)

11. 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.

12. 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.

13. 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.
if (sum==0) { }

14. Operatoret e Javascript
Llogarites
(-) mohimi unar
(++) inkrementimi
(--) dekrementimi
(*) shumezimi
(/) pjesetimi
(%) mbetja aritmetike
(+) mbledhja
(-) zbritja

15. Operatoret e Javascript
Logjik
(!) Not logjik
(>)
(<)
(<=)
(>=)
(==)
(!=) E ndryshme
(&&) And logjik
(||) Or logjik
Bitwise

16. Operatoret e Javascript
Vleredhenia
(=) – vleredhenia
Operatore te perbere te vleredhenies
(+=) – mbledhja
(-=) – zbritja
(*=) – shumezimi
(/=) – pjesetimi
(%=) – mbetja aritmetike

17. Strukturat e kontrollit (Ciklet & 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;

18. 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
default://instruksione nqs te tjerat nuk plotesohen }

19. 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++; }

20. Strukturat e kontrollit (Ciklet & Degezimet)
for
Perdoret kur di saktesisht sa here duhet te ciklosh.
var x;
for (x=1; x<=10; x++) {
//instruksione }

21. Objektet, Eventet, DOM Objektet Operatori new
DOM (Document Object Model)
Array
Eventet
onClick
onSubmit
onMouseOver
onMouseOut
onFocus
onChange
onBlur
onLoad
onUnload

22. 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.

23. 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.

24. 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.

25. 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:

26. 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.

27. 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>
</BODY>
</HTML>

28. 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.

29. 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.

30. 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.

31. 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.

32. 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’);

33. 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”.

34. 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= 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.

35. Eventet
onMouseOut()
Ky event ndodh kur perdoruesi heq mouse-in nga linku apo zona e linkuar.
<a href= onMouseOut=“window.status=‘The best Simpsons Webpage on the NET!’; return true; “>Click for information on the Simpsons</a>

36. 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.

37. 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;”>

38. 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.

39. 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’);”>

40. 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’);”>

41. Pyetje?