You are on page 1of 105

HTML, CSS, JavaScript, jQuery, PHP & MySQL

•  Analizë  
•  Skice  (Cacoo,  illustrator)  
•  Dizajn  (photoshop)  
•  HTML,  HTML5  (Notepad++,  SublimeText2)  
•  CSS,  CSS3  
•  Responsive  
•  Bazat  e  programimit  
•  KupLmi  i  Programimit  të  Orientuar  në  Objekte  
•  JavaScript,  DOM,  jQuery,  AJAX,  jSON,  jQueryMobile  
•  PHP  
•  MySQL,  XML  
•  Instalimi  i  serverit  Apache  
•  Lansimi  online  

kanuni i programimit në ueb
driton haxhiu

12
Programimi
Hyrje
Driton Haxhiu

Një program kompjuterik është një grup i udhëzimeve

Një program kompjuterik është një seri e udhëzimeve

Driton Haxhiu

Mirepo gjerat sikurse ne jeten reale. ndaj ai kerkon nje shpjegim te rruges qe do te beje. ka pesuar aksident. Ne menyre te njejte edhe ne programim duhet te japim informata te sakta. ashtu edhe ne programim nuk funksionojne ne jete menyre. Miku juaj nuk ka qen asnjehere ne qytetin tuaj. njejt sikurse miku juaj. ne qytetin e mikut tuaj.Shembull i programimit ne jeten reale B Shembull nga programimi: Ju jeni ne nje qytet (Ferizaj) dhe po pritni nje telefonate nga nje mik i juaji I cili gjendet ne nje qytet tjeter (Prishtine). Kjo eshte edhe arsyeja pse themi se nje program eshte crash-irat. perndryshe programi mund te ndeshet. Gjeja e pare qe ju vjen A ndermend eshte nje trajektore e drejte nga qyteti juaj. Driton Haxhiu . mikut I duhen instruksione te sakta per te arritur deri tek ju. ndaj per te pershkruar rrugen deri ne shtepin tuaj.

ate duhet analizuar. eshte analiza.Shembull i programimit ne jeten reale B Puna e pare qe bejme per ti ndihmuar mikut tuaj per te arritur tek ju. pastaj kthehet djathtas perseri. Qoft edhe pran shtepise. Pas 17 km tjera keni nje rreth. pastaj mas 13 km. vazhdon 2 km. ndaleni dhe ju jeni prane shtepise sime. A Driton Haxhiu . pastaj ju filloni ti jepni instruksionet. Ju mund ti thoni atij. nese semafori eshte ne ngjyre te kuqe. Nese ne nuk i kemi dhene instruksionet mire. perndryshe menjehere vazhdo drejte. atehere prit derisa te ndezet e gjelberta. atehere mikun shume leht mund ta shohim te perplasur ne ndonje pem. se fillimisht niset djathtas. per cdo kthese per cdo semafor qe gjendet ne rruge. Eshte rregull qe ne rreth te silleni 3 here. derisa te lirohet trafiku. pastaj vazhdo drejte. Duhet te jeni te sigurt nese ju jeni ne dijeni per rrugen e sakt. Pas 500 m ka nje semafor.

shko djathtas Ne programim shembull mund ti krijojme dy vlera. pastaj ato dy vlera ti llogaritmi Kontrollo nese perdoruesi e ka shtypur tastin ENTER Ndrysho ngjyren e nje pikseli te vetem ne ekran Driton Haxhiu .Disa shembuj cfare mund te bejme me ane te programimit Programimi nuk eshte vetem shko majtas.

Deklarimet (Statements) BASIC LET Balance = 500 AppleScript
 Set balanbe to 500
 
 
 Java
 balance = 500.
 
 
 COBOL MOVE 500 TO BALANCE Driton Haxhiu .

Definicioni •  Programimi ne esence eshte qe nje ide tuaj. ta ndani ne pjese dhe keto pjese te dini ti shkruani ne sintaksen e gjuhes programuese qe ju keni zgjedhur Driton Haxhiu .

Gjuha 13 Programuese Driton Haxhiu .

Gjuhet programuese Ekzistojne qindra gjuhe programuese. Ne anen C++ e djathte jane dhene disa gjuhe te cilat sote C# jane me te popullarizuarat. JavaScript Perl PHP Python
 Meqense me te gjitha mund te kryejme Objective-C pune te njejte. qysh C prej ka fillu te programohet. Shumica prej tyre jane te bazuara ne gjuhen Java
 programuese C. atehere pse nuk ekziston vetem nje gjuhe programuese? Ruby
 Visual Basic Driton Haxhiu . per disa arsye disa jane me te njohura e disa jo.

Kodi i makines CPU.
 Te vetmen gjuhe qe njeh Qipi eshte kodi I C# makines.Truri I cdo paisje nuk kupton asnjeren nga gjuhet qe shihen ne anen e djathte. mirepo jo. Ne mendojme qe Qipi (CPU) lexon kodin C ton qe kemi shkruar ne nje gjuhe C++ programuese. e cila lidhet Java
 direkt me hardware-in JavaScript Pse nuk shkruajme kod te makines?
 Perl Ngase eshte e pamundur dhe humbje kohe PHP 6A 00 89 48 E4 F0 45 Python
 C1 08 E2 90 72 1C 00 34  E9 53 00 20 00 FC Objective-C Edhe nese e shkruani. ose gjuha e makines. ngase nuk eshte per njerezim por Ruby
 per makina Visual Basic Driton Haxhiu . nuk mund ta lexoje askush.

JavaScript.  Paython.NET     ObjecLve-­‐C   C++       C     Gjuhet  e  ulta  programuese   Assembly  Language   Kodi  i  makines   CPU   Driton Haxhiu .  AcLonScript   Gjuhet  e  larta  programuese   Ruby.  VB.  C#.  PHP   Java.

po shkruaj kod. po kodoj. Si ta ekzekutojme kete program Java
 JavaScript Perl PHP Python
 Objective-C Ruby
 Visual Basic Driton Haxhiu . Qysh ai kod. C eshte e njejta gje. do te konvertohet ne kod te makines 3.  Si te shkruajme.Kodimi Kur te themi. mirepo duhet ti kuptojme tri gjera: C++ 1. po programoje. ku t’ja fillojme me shkru C# 2.

C++ C# Nuk ka asgje magjike ne programim. eshte thjesht nje text. Mund ta hapni C nje editor te thjeshte ne modin plain text dhe jo rich text. njejt sikur te shkruash nje poezi Java
 JavaScript Perl PHP Python
 Objective-C Ruby
 Visual Basic Driton Haxhiu .Te shkruaj kod source (programojme) Kodi I programimit shkruhet ne plain text. dhe te filloni me shkru nje odin tuaj.

World!”.ruby   ruby   puts ‘Hello.groovy   Groovy   say “Hello.pl   perl   say “Hello. Driton Haxhiu . World!”. World!’ shembull.Shembuj   shembull. shembull. World!”). shembull.js   JavaScript   alert(“Hello.

world!”) ALGOL68   Paython     Lua   Driton Haxhiu .Hello world. nje shembull klasik print (“Hello.

Ne  gjuhet  programuese  qe   C#   jane  te  bazuara  ne  C.   shmebull  C.       ALGOL60   Ne  gjuhen  programuese   ALGOL60.  C++.WriteLine(“Hello.  Java   Using System.  duhet  patjeter  te  tregojme  ku  eshte  fillimi  dhe  fundi. Kur  fillojme  me  deklaru  nje  kod. world!”). world!”).  C#.  eshte  perdorur   BEGIN BEGIN  dhe  END.   DISPLAY (“Hello. keto???   }   } Jo  bash   Driton Haxhiu . END. Perdoren  kllapat  gjarprore       {   Class Shembulli       { }   static void Main(string[] args) { A  duhet  me  I  mbajte  mend  gjitha   console.

nuk eshte I formatum. por na ndihmon per me I lexu dhe me I shkru pjese te ndryshme te kodit Kontrollimi I sintakses.Text Editor-et per Programera •  Plain Text Editor. disa komercial •  Na tregojne per numrin e rreshtave •  Kodin e ngjyrave (Color Code). me tipare extra •  Disa jane falas. sikurse kontrollimi I fjaleve Disa text editor I perkrahin vetem nje gjuhe programuese e disa edhe te tjera Driton Haxhiu .

IDE (Integradet Development Eniorements) •  Jane  programe  te  mdhaje.  dhe  kane  ediLm  te  mire   •  Kan  shume  Lpare  per  zhvillim  profesional       Shembull  I  IDE-­‐ve  jane:   •  Xcode  per  MAC   •  VisualStudio  per  PC   •  Ecplipse  Cross  pladorm   Driton Haxhiu .

  world”).   interpreteri   lo.     alert(“Hello.Gjuhet e kompajlluara dhe te interpretuara Gjuha  e  interpretuar   Script     Script     alert(“Hel Script     Script     alert(“Hel lo.   Hello.   world”).   alert(“Hel alert(“Hel lo.   world”).  world!”).  world!   Programeri   Klien-   Driton Haxhiu .   world”).   lo.

  01001101 01001101 world!”.   Hello.  world!”.   00100100   00100100   kompajlleri     cout<<“Hello.Gjuhet e kompajlluara dhe te interpretuara Gjuha  e  kompajlluar   Cout<<“H 10111001 10111001 ello.  world!   Programeri   Klien-   Driton Haxhiu .

 e  Kompajlluara   Gj.Perparesit dhe mangesit Gj.  e  interpretuara   Perparsite   Mangesite   Perparsite   Mangesite   Ga-  per  perdorim   Jo  Cros-­‐pla8orm   Cros-­‐pla8orm   Kerkohet  interpreter   Shpesh  me  e  shpejte   Jo  fleksibile   Thjesht  per  test   Shpesh  e  ngadalshme   Kodi  privat   Hapa  shtese   Thjesht  per  kontroll   Kodi  eshte  publik   Driton Haxhiu .

  01001101 world!”.Gjuhet e kompajlluara dhe te interpretuara Intermediate  Language  IL   IL   10111001 IL   Cout<<“H ello.   00100100     cout<<“Hello.  world!   Programeri   Klien-   Driton Haxhiu .  world!”.   Hello.

VB.Shembull te gjuheve programuese Te Kompajluara: C. JavaScript Hybrid: C#. Java. Objective C Te interpretuara: PHP.NET. C++. Python Driton Haxhiu .

Hyrje ne 14 JavaScript Driton Haxhiu .

JavaScript  
javascript  
Pse  JavaScript?  
  alert(“Hello, world!”);
JavaScript  nuk  eshte  nje  prej  
gjuheve  me  fleksibile,  mirepo  
eshte  gjuhe  programuese  
shume  e  pershtatshme  per  
fillestare  dhe  perdoret  per   ReultaL  
uebprogramim.  
Hello, world!
 
JavaScript  eshte  gjuhe  
programuese  e  interpretuar  
dhe  eshte  “case  sensiLve”,  
pra  e  ndjeshme  ndaj  
rregullave  te  shkronjave  

Driton Haxhiu

Ku dhe si ta vendosmi JavaScripten
JavaScripti mund te thirret nga nje
file tjeter I jashtem (external). Dhe javascript  
mund te shkruhet brenda fajllit
HTML. Per arsye qe te njejtin fajll te <!DOKTYPE HTML>
mund t’a therrasim edhe ne fajlla <html>
te tjere, atehere preferohet qe te <head>
shkruhet ne nje fajll te jashtem. <title>Miresevini</title>
Nese bejme ndonje ndryshim, </head>
atehere te gjitha faqet tjera e <body>
marrin ate ndryshim. <!– JavaScript Enternal -->
JavaScript mund te thirret ne <script>
Header por edhe brenda bodyt. alert(“Hello, world”);
Per arsye te performances </script>
zakonisht therrasim ne fund te
bodyt, veq ne raste te caktuara kur <! JavaScript External -->
na nevoitet ne fillim. <script src=“inc/js/script.js”></script>
</body>
Atributi type </html>
type = “text/javascript”
Kerkohet per HTML 4, XHTML ose me poshte Driton Haxhiu

Variablat
15
Driton Haxhiu

  var  vleraA  =  3.   Driton Haxhiu .   var  vleraB  =  9.Variablat ne JavaSript Driton   3   9   12   emri   vleraA   vleraB   rezultaL   var  emri  =  “Driton”.   var  rezultaL  =  vleraA  +  vleraB.   alert(“RezultaL:  ”  +  rezultaL).

Driton Haxhiu . EmerLmi  i  variavles   vlera  e  inicializuar   var emri = “Driton”.

16 Operatoret Driton Haxhiu .

  prompt  (“Jepeni  emrin:  ”).  “vlera  e  nenkuptuar”).   Driton Haxhiu .  ne  na   alert  (“Pershendetje”).   confirm  (“Stringu”  +  variabla).Operatoret Alert.   A  pajtoheni?   confirm  (“Jepeni  emrin:  ”).    alert("Po.  prompt  dhe  confirm.  nuk  pajtohem!").  pajtohem!").   }   else{    alert  ("Jo.   cancel   OK   if  (confirm("A  pajtoheni?"))  {   prompt  (“Jepeni  emrin:  ”.   interpretohen  si  PopUp.   }.

  a++.   Tani  a  =  4   -­‐-­‐   Zvoglohet  vlera  per  1   a  =  3.   a    -­‐-­‐  .   Tani  a  =  2   %   Modular   a=8  %  3.Operatoret aritmetik Operatori   Pershkrimi   Shembulli   ++   Rritet  vlera  per  1   a  =  3.   +   Mbledhje  dhe  shLm   -­‐   Zbritje   *   Shumezim   /   PjesLm   Driton Haxhiu .

a--.1. 5 alert(a++). 5 Rezultati shfaqet: 6 Rezultati shfaqet: 5 . a += 1. a var a = 5. a++. --a. a alert(++a). ++a. a = a . a -= 1. Prefiks dhe postfiks var a = 5.Rritjet / zvoglimet a = a + 1.

Operatori ternary (tresh) kushti ? true: false var lojtari1 = 230. } else{ fituesi = lojtari2. var fituesi = (lojtari1 > lojtari2) ? fituesi1 : fituesi2. var lojtari2 = 378. if (lojtari1 > lojtari2){ fituesi = lojtari1. } .

Operatoret krahasues Operatori   Pershkrimi   Shembulli   =   E  barabart   ==   Krahasuese   ===   Strikt  krahasuese   <=   Me  e  vogel  ose  baraz   >=   Me  e  madhe  ose  baraz   <   Me  e  vogel   >   Me  e  madhe   !=   Jo  e  barabarte   !==   Strikt  jo  e  barabart   Driton Haxhiu .

Operatoret logjik Operatori   Pershkrimi   Shembulli   &&   Dhe   ||   Ose   javascript   if ( a<10 && b === 20 ){ … if ( a<10 || b ===20 ){ … if ((a<10) && (b===20)){ … if( (a < 10) && (b === 20) ) Driton Haxhiu .

var b. alert("rezultati eshte: " + rezultati). ReultaL   Rezultati eshte: 8 Driton Haxhiu .Detyre  per  ushtrime  1   javascript   var a = 5. b=3. var rezultati. rezultati = a+b.

Kushtet 17 Driton Haxhiu .

//… } else if( …kushti tjeter… ){ //perndryshe ekzekutohet kodi qe shkruhet ketu } Else{ //perndryshe ekzekutohet kodi qe shkruhet ketu } Driton Haxhiu .Kushtet if ( …kushti… ){ //…deklarimi I kodimit tuaj ne baze te kushtit shkruhet ketu… .

  Nese a eshte e barabart me b.   
 }   Ne kushtin e me poshtem kemi else  if(a<=  b){   thene:  alert(”a  eshte  me  e  vogel”).   djathte jane dhene dy variabla te var  b  =  346.a eshte me e madhe -- Driton Haxhiu .   barabarta--.   inicializuara njera me vkere 4 dhe if  (a  ==  b){   tjetra me vlere 346. }  else  {   atehere ekzekutohe –Vlerat jane te  alert(”a  eshte  me  madhe”).
  alert(”Vlerat  jane  te  barabarta:  ”).Detyre  nga  kushL   javascript   Ne kodin qe shihni ne anen e var  a  =  4. Perndryshe shfaqe mesazhin -. ekzekutoje mesazhin –a eshte me e vogel--. } Perndryshe nese a eshte me e vogel ose baraz me b.

  if  (oper  ==  1){    rez  =  a  +  b.Detyre  per  ushtrime  2   javascript   javascript   var  a  =  4.    alert("Zbritja:  "  +  rez  ).    alert("Shuma:  "  +  rez  ).     var  rez.   alert("Emri  juaj  eshte:  "  +  emri  ).    alert("Shumezimi:  "  +  rez  ).   } Driton Haxhiu .   }   else  if(oper  ==  2){    rez  =  a  -­‐  b.   var  emri  =  prompt("si  quheni?  ").   var  b  =  346.   var  oper  =  prompt("Operatori?  ").   }  else  {    rez  =  a  *  b.

18 Unazat (loops) Driton Haxhiu .

ose tabelat e   veturave. while (beje. madje ne mund ti kufizojme Deklarimi  i  pare   disa numra te rezervuar. gjersa)   •  For (per) Driton Haxhiu . kemi tri menyra: Deklarimi  i  pare   •  While (gjersa) Deklarimi  i  dyte   •  Do.Unazat (Loops) Ka raste kur neve na nevoitet qe te Deklarimi   Deklarimi  ii    ppare   are   Deklarimi  i  pare   kryejme nje pune te njejte shume here Deklarimi   Deklarimi  ii    ddyte   yte   Deklarimi  i  dyte   (2. Deklarimi  i  dyte     Per te krijuar nje unaze. Per te mos I   perseritur manualisht keto te dhena Deklarimi  i  pare   atehere ne perdorim unazat (loop) per te Deklarimi  i  dyte   kryer nje pune te tille. 5 ose 500 deri ne infinit). 
   Shembull konkret: Permes unazave ne Deklarimi  i  pare   mund ti gjenerojme numrat personal te Deklarimi  i  dyte   qytetareve te vendit.

  While  (a  <  10){   }  //…  beje  dicka  …   }   Do…  While  (Beje…  Gjersa)   javascript   var  a  =  1.   }     while(  a<  10).While  (Gjersa)   Njejte  sikurse  tek  kushtet  qe  kemi   If(  a<  10){   javascript    //…  beje  dicka  …   var  a  =  1.    a++.     }   Mirepo  ne  kete  rast  ne  zevendesojme  if   while(  a<  10){   me  while.log(a).     do  {    console. Driton Haxhiu .    console.      a++.log(a).

   a++.For  (per)   Kontrollo  kushCn   Vendosja  e  indexit   Rrit  vleren  per  1   Vendosja  e  indexit   var  a  =  1.   } Rrit  vleren  per  1     Driton Haxhiu .  i++){        //  …bej  disa  gjera  …   while(  a<  10){   }  console.log(a).  i  <  10.   Kontrollo  kushCn   for  (i  =  1.

    plotesohet kushti    if  (i  ==  98){   kushti brenda    if  (i  ==  98){   brenda unazes      break.Shembull nga unaza javascript   for  (i  =  1.  i++){   for  (i  =  1. nese “Break”.log(i).log(i).  i++){   “Break”. } unazes.      i++.     plotesohet    i++.  i  <  10.  i++){      console.log(i).  i  <  10.      i++.      console.  i  <  10.     } Break Continue javascript   javascript   for  (i  =  1. } Driton Haxhiu .   atehere na qet    }   na qet jasht    }   jasht unazes. nese    console.   unazes atehere      conLnue.

19 Funksionet Driton Haxhiu .

atehere ne krijojme. world!”). mirepo ne JavaScript thjesht Funksione.Per te bere kodin me te lexueshem dhe per te bere me te lehte manipulimin me te. Ne gjuhet tjera programuese i gjejme si sub rutin ose si module.log(“Hello. javascript   function myFunction(){ console. } Driton Haxhiu . funksione.

Driton Haxhiu .log(shuma). console. return x. Emertimi Parametri function myFunction(x.98).y){ var shuma = x+y. } myFunction(12. myFunction(543.65).

interesi. 36. por as nuk do te thot qe funksionon. // Nuk do me thene qe funksionon. 12. “Driton Haxhiu”. emri){ //Pjese e kodit } llogariaBankare(1200. “Programer”). 36). muaji. 36. Duhet te keni kujdese Driton Haxhiu . // Vlerat tjera do te zevendesohen me undefinde.Parametrat mosperputhes function llogariabankare(shuma. “Driton Haxhiu”). llogariaBankare(1200. //Parametrat shtese do te injorohen llogariaBankare(1200. 12.

// UNDEFINED var foo. // 342 console. // 342 Driton Haxhiu . } shembull(). console.log(foo).log(foo).Variable Scope (fushat qe shihen) function shembull(){ var foo = 342.log(foo). // 342 console. console. } shembull(). // Variabel globale function shembull(){ foo = 342.log(foo).

i<=n. gjeneratori(z). i<=n.log(i). } gjeneratori(9).Shembull nga Funksionet function gjeneratori(n){ for (i=0. } z = prompt(”Jepeni vleren: "). i++) console. Driton Haxhiu . i++) console. function gjeneratori(n){ for (i=0.log(i).

Ne oren e ardhshme: • Vektoret • Numrat • Stringjet • Datat • Objektet Driton Haxhiu .

20 Tipet dhe objektet Vargjet (vektoret) Ang. Arrays Driton Haxhiu .

[1] 76   nje varg. Vlera e variables 87   mund te jete. dhe e kemi inicializuar me nje vlere. string dhe bulean Vargu eshte nje variabel e var vargu = []. vargu   vetme. e cila permban shume vlera numerike dhe vargu[0] = 45. JavaScriptes qe po krijojme Vargu[2] = “Driton”. numer. Kemi krijuar nje variabel njeVlere   njeVlere = 87. Driton Haxhiu . [0] 45   tekstuale per ti treguar Vargu[1] = 76. atehere shenojme “[ ]” [2] Driton   Fillon nga 0 (zero) alert ( vargu[2] ) .Krijojme vargje var njeVlere.

[1] 76   Vargu[2] = “Driton”. [0] 45   vargu[0] = 45. Fillon nga 0 (zero) [2] Driton   var vargu = [ 45. “Driton” ].76. [0] [1] [2] alert ( vargu[2] ) . Vargu[1] = 76.Krijojme vargje ne rruge te shkurter vargu   var vargu = []. Driton Haxhiu .

Vargjet jane objekte var vargu = Array(). Ne JavaScript vargjet gjithmon jane dinamike alert ( vargu[2] ) . var vargu = Array(5).Krijojme vargje ne rruge te gajte var vargu = []. Driton Haxhiu . Kjo eshte menyra ime qe preferoje var vargu = new Array().

log( vargu. 78. 76.length) . 34 ]. // gjatesia e vargut eshte: 4 //indeksi me I lart eshte [3] //Highest index Metodat paraqesin informatat qe i posedon Driton Haxhiu . atehere ato kan veti dhe metoda (Vetit. Console. metodat dhe te tjerat me gjeresisht do ti mesojme ne Programim te Orientuar ne Objekte) var vargu = [ 45.Tiparet e vargjeve (properties) Me qenese vargjet jane objekte.

disaMetoda (parametrat). disaFunksione (parametrat). 20.join) . ”40.Metodat e vargjeve (properties) Vargjet gjithashtu kan metoda.log(vleraRevers.reverse(). //thirja e nje funksioni Metodat jane funksione qe I perkasin nje objekti disaObjekte.join(). 30. console. 40]. var vleraRevers = vleraVargut.sort().20. .10” Driton Haxhiu . Krojon varg tjeter . //thirja e nje metode var vleraVargut = [ 10.30.

atehere thrrasim te gjitha linqet var varguILinqeve= document.getElementByTagName(“a”).Vargjet jane cdokund Nese duam te dijme sa linqe kemi ne faqen tone.html>…   Driton Haxhiu . varguILinqeve   [0] <a  href=“index.html>…   [2] <a  href=“kontakL.html>…   [1] <a  href=“rrethnesh.

21 Tipet dhe objektet Numrat Driton Haxhiu .

Driton Haxhiu .Numrat njeVlere   var x = 87.3. 87   Numrat ne JavaScript jane 64-bit float var x = 87.

// 11 var x = “5”.log(x+y). console. vlerat e x dhe y Stringjet console. Numrat Ketu mblidhen vlerat e x dhe y var y = 6. Ketu behen bashk var x = “6”.Mbledhja kunder shtimit (+) var x = 5.log(x+y). // 56 Driton Haxhiu .

var y = ”6”. tjetra string? var x = 5. // 56 – njera vlere eshte string var x = 5. // NaN Not a Number (Nuk eshte nje Numer) Driton Haxhiu .log(x*y). console.Mbledhja kunder shtimit (+) Cka ndodhe kur njera vlere eshte numer. console. var y = ”6”.log(x+y).

Si ta bejme kete? var x = ”36”. // Beje numer Nganjehere na nevoitet me dite. // mund te jete “abc” var numriIm = Number(x).Nuk eshte nje numer (NaN) Nganjehere na nevoitet nje vlere ta bejme numer. nese ai eshte string. Si ta bejme kete? Driton Haxhiu . per nje vlere eshte numer apo string.

b.PI Math. Nese duam qe kete vlere ta fiksojme duke marr parasysh presjen dhetore atehere shkruajme var x = 52.c). var y = Math.c).round(x). c = 2.sqrt() . Math. // 53 Nese duam te gjeme vleren maksimale dhe/ose minimale te dy ose me shume variablave atehere shkruajme: var a = 220. var vleraMaksimale = Math. b = 35544.random() .log() Driton Haxhiu . var vleraMinimale = Math.min(a.6.Objektet matematikore Krijojme nje variebel x me presje dhjetore.max(a.b.

22
Tipet dhe objektet

Stringjet

Driton Haxhiu

Stringjet
var stringu = ”Thojza te dyfishta”;
var stringu = ‘Thojza te njefishta’;
var stringu = ‘String tjeter”;

Ne JavaScript lejohen te perdoren edhe thojzat e njefishta edhe ato
te dyfishta, mirepo ajo cka nuk lejohet eshte kombinimi I tyre.
Shembull te hapet me thojze te njefisht, pastaj te mbyllet me thojze
te dyfisht apo anasjelltas.

Driton Haxhiu

Thojzat brenda thojzave
var stringu = ‘S’lejohen miksimet’;
var stringu = “S’eshte keq”;
var stringu = “Thenja:” Pune pune…””;
var stringu = “Thenja: \” Pune pune…\””;

Per arsye se nje strig mund te permbaje thojza te njefishta atehere
preferohet qe te perdoren thojzat e dyfishta gjithnje. Mirepo atehere
kur kemi nje thenje apo na nevoitet qe brenda nje stringu te perdorim
thojzat prap, atehere duhet te vendoset shenja “ \ ” para thojzave,
si ne rastin e fundit.

Driton Haxhiu

log(stringu. te cfardo teksti. var stringu = ‘Nje fraze testuese’. atehere ne perdorim. pastaj length.length).Tiparet e stringjeve .length Shpeshe here ne JavaScript na nevoitet te marrim gjatesine e nje stringu. console. // 18 – Driton Haxhiu . emrin e variables se stringut. Ne kete rast na shfaqet numri I karaktereve ne ate string. Per te marrur gjatesine e tekstit.

”) var stringu = ‘Nje fraze testuese.split(“.Metodat e stringjeve . duke e vendosur ate brenda kllapave si ne shembullin e meposhtem … .toLowerCase() console. // NJE FRAZE TESTUESE Driton Haxhiu . pikepresje apo ndonje karakteri tjeter. Stringun mund ta ndajme edhe pas cdo pike. var fjalet = stringu. Ne rastin e meposhtem I kemi thene. pastaj ne mund ta therrasim cilindo pjese te tij.split(“ ”). naj ndaj tekstin per cdo hapsire te bardh qe ka.’.toUpperCase).”) ose … .toUpperCase() dhe . 0 Nje 1 fraze 2 testuese.split Ne JavaScript ne mund ta ndajme nje string ne copa dhe me ane te tij krijojme nje varg. Nje string mund ta paraqesmi me te gjitha karakteret e mdha ose te vogla duke perdorur .split(“.log(stringu.

indexof Ne mund te indeksojme nje pjese te caktuar te teksit pastaj me ate pjese mund te bejme cfardo qe duam. Driton Haxhiu .’. mund ti japim veti tjera ne CSS… Indeksimi I tekstit ne JS behet sikur me poshte emriStringut.Metodat e stringjeve .indexOf(“FjalaQeIndeksohet”) var stringu = ‘Nje fraze testuese. Shembull mund ta paraqesmi ne ekran. var fjalet = stringu.indexOf(“fraze”).

Nese ne rastin tone i themi 0. mund ti presmi vetem disa rreshta te lajmit.slice Ne raste te caktuara neve na nevoitet qe te prejme nje cope te caktuar te tekstit. Shpesh mund ta gjeni edhe keshtu .substr() Driton Haxhiu . eshte fjala qe ruhet ne variablen segmenti Ne JavaScript prerja e tekstit mund te behet .substring() edhe me .Metodat e stringjeve . kaloj 4 karaktere. pastaj ta paraqesmi ate. ku fundi I tyre eshte 9.substring() dhe . // fraze . Nje shembull tipik do te ishte permbajtja e nje artikulli te nje uebfaqe. pastaj merri 5 karaktere te tjera. duke filluar nga 0.’. Me poshte eshte shembulli se si behet prerja e stringut. ku ate permbajtje e prejme dhe e vendosim si lajme te shkurter.9). Ne rastin tone I kemi thene.substr(). Atehere do te vij fjala “Nje fraze” var stringu = ‘Nje fraze testuese.slice(4.9. // 0123456789 var segmenti = stringu.

23 Tipet dhe objektet Datat Driton Haxhiu .

minutat.0).Date(1. perveq qe ka objektet e stringjeve dhe ato matematikore. // Data. ato na nevoiten pothuajse cdo kund var sot = New. // Data. sekondat aktual Driton Haxhiu . viti.2000).Date().0. ora.0.aktual var data = New. muaji.0.Date(1. // Data dhe koha aktuale var data = New.0. muaji viti .Datat dhe koha JavaScript.0. gjithashtu ka dhe objektet e datave. Datat perdoren shume ne programim.2000.

// 0-23 dite te javes(0 == e Diele) sot.getDate().getFullYear(). // 1-31 dite te muajit sot. // 0-6 dite te javes(0 == e Diele) sot.getMonth(). // milisekondat qe nga 1/1/1970 Driton Haxhiu .Metodat e datave .Date(). // 0-11 (0-janar -11 dhjetor) sot.getTime().get (merr) Nese duam te marrim nje metode te dates atehere kemi: var sot = New.getDay(). // YYYY (baza nuk eshte 0) sot.getHour(). // Data dhe koha aktuale sot.

getDay() ).Shembull Nese duam te marrim nje metode te dates atehere kemi: var diteLindja = new Date(16.1987).5.diteLindja.log("Driton Haxhiu ka lindur ne diten e: " . console. Driton Haxhiu .

setDay(). apo cfaredo kohe.setTime(). sot.setDate().set (shto) Nese duam te shtojme nje date.setFullYear(2012). sot.Date().setMonth(5). Driton Haxhiu .setHour(). sot. ore muaj. // Data dhe koha aktuale sot. sot. sot. kemi: var sot = New.Metodat e datave .

Krahasimi i datave Kemi deklaruar dy variabla dhe i krahasojme ato var data1 = New. Krejt cka na duhet neve eshte ti marrim data si dy vlera numerike. Krej kjo ngase data eshte nje objekt.1). var data1 = New.getTime()) { // vlera do te jete True Driton Haxhiu .getTime() == data2. if (data1 == data2){ // False Pamarr parasysh nese kemi perdor dy ose tri barazime rezultati eshte fals.1). (d.0. pra I marrim dhe i krahasojme me milisekonda.0.Date(2000.).m. if (data1.th. Nuk jane te barabarta.Date(2000.

24 OOP Hyrje ne OOP Programim I orientuar ne objekte Driton Haxhiu .

nen rutina (sub- routin)ose module. Keshtu nuk ishte gjithmon. para shume viteve eshte programuar ne menyre procedurale ne Assembly. Cobol. Fortrain. Keto gjuhe nuk jane OOP. keto jane gjuhe procedurale dhe programi eshte shkruar ne nje procedure te gjate edhe pse ka permbajt funksione. te kombinuara ne logjike dhe te dhena dhe krejt keto kan qen te perziera bashk Driton Haxhiu .Hyrje ne OOP Shumica e gjuheve programuese te cilat jane zhvillu ne 30 vitet e fundit jan quajtur Gjuhe te Orentuara ne Objekte.

me nje fjale mund ti quajme edhe mini-programe. krejt kodi I cili eshte skruar ne nje procedure te gjate.Pershkrim Ne OOP. Secili objekt reprezenton pjese te ndryshe te aplikacionit dhe secili objekt permban te dhenat e tij (data) dhe logjikat e tij (logics) dhe pastaj ato komunikojne mes veti Objekti 2 Objekti 1 data   data   Objekti … logic   logic   data   logic   Driton Haxhiu . eshte ndare ne pjese te cilat quhen Objekte.

Cka permban nje objekt Nje objekt nuk eshte dicka imagjinare. Para se me vazhdu tutje ne duhet ti dijme disa terme Objekti 2 Objekti 1 data   data   Objekti … logic   logic   data   logic   Driton Haxhiu . e cila eshte perkrahur ne shume gjuhe programuese. nje llogari bankare. nje veture apo nje shtepi. OOP eshte nje ide. nje objekt mund te jete nje lojtar. mund te jete cfaredo objekti edhe I botes reale.

nje definim. Cdo klase permban dhe definon dy gjera: •  Atributet •  Sjelljet Driton Haxhiu . nje pershkrim. por nuk eshte vete ajo gje. e cila pershkrun nje gje cfare eshte. Shembull mund te jete skica e shtepise.Class (Klasa) Klasa eshte nje skice.

 Klasat  paraqesin  një  Lp  tjetër  të  strukturave.  të  cilët  sipas     nevojës.  Derisa  qasja  e  nënkuptuar(ang.  Programimi  i  zakonshëm.  krahasuar  me  programimin  procedural.  ndryshe   quhet  edhe  programim  procedural.  private).  public).  te  klasat  kjo  qasje  e  nënkuptuar   është  private(ang.  gjë  që  ka  një  rëndësi  të   veçantë  kur  kemi  të  bëjmë  me  programe  komplekse.  object-­‐oriented  programming).  Gjatë  kësaj.  të  cilët  janë  marrë  gjatë  shpjegimit  të  strukturave.  gjithnjë  mendohet  në  klasat  si  dhe  në  objektet  që   deklarohen  me  shfrytëzimin  e  tyre.  më  lehtë  modelohet   bota  reale.  Përmes  klasave  jepet   një  mundësi  e  shkruarjes  së  programeve.  në  të  cilat   bashkërisht  vendosen  të  dhënat  dhe  funksionet  që  i  shfrytëzojnë  ato  të  dhëna.  Por.  lehtë  ndryshohen.  Përmes  programimit  me  objekte.  duke  i  ndryshuar  vetëm  klasat.  gjë  që  do  të  shpjegohet  në  pjesët  vijuese.  problemi  që  zgjidhet   copëtohet  në  klasa  dhe  në  deklarimin  e  objekteve  përkatëse.  në  të  cilin  shfrytëzohen  vetëm  funksionet.Class (Klasa) – sipas Agni dikes Kur  flitet  për  programimin  e  orientuar  në  objekte(ang.     Driton Haxhiu .  me  qëllim  të   krahasimit  të  strukturave  dhe  të  klasave.  meqë  brenda  objekteve  përfshihen   funksionet  dhe  të  dhënat  të  cilat  ato  i  shfrytëzojnë.  Në  fillim  të  pjesës  vijuese.  me  çka  zvogëlohet  mundësia  e   gabimeve.  ose   shkurt  -­‐  programimin  me  objekte.  në   gjuhën  C++.   default  access)  te  strukturat  është  publike(ang.  do  të  shfrytëzohen  shembujt  e  programeve   elementare.  strukturat  dhe  klasat  kanë  një  dallim  të  vogël.

Go home Agni Dika you‘re drunk Driton Haxhiu .

Methods Class Class ATRIBUTET SJELLJET VETIT METODAT emri ece emri ece gjatesia vrapon gjatesia vrapon pesha kercen pesha kercen gjinia flet gjinia flet mosha flen mosha flen … … … … Pershkrimi i nje personi Pershkrimi i nje personi Driton Haxhiu .Proporties dhe Sjelljet si Metoda. ang.Cka definon nje klase? Disa gjera qe permban nje klase Atributet dhe sjelljet ne shumicen e jane karakteristikat (atributet) gjuheve programuese i gjeni si dhe disa jane sjelljet Tipare (veti) ang.

Objekti (Object) Njejt sikur e bejme nje skice per shtepi dhe ne nuk e ndertojme ate. 1). 2) Nje shtepi e bazuar ne nje skice
 Shume shtepi te bazuara ne nje plan (skice)
 fig. ashtu edhe ne programim. 1 fig. prej nje klase mund te krijojme shume objekte.2 Driton Haxhiu . (fig. sikurse nga nje skice ne mund te ndertojme shume shtepi. ashtu edhe ne programim klasa pa objekt eshte e panevojshme. sikurse nje shtepi qe mund ta ndertojme duke u bazuar ne skice (fig. Pra nje objekt krijohet duke u bazuar ne klase. Jo vetem kaq.

” llogariaBankare Dritoni Trimi numriLlogarise 2173512077 5457585 bilanci 270$ 320$ dataHapjes 15/05/2013 04/11/2010 tipiLlogarise Rrjedhse Rrjedhse hape() hape() hape() mbylle() mbylle() mbylle() depozito() depozito() depozito() terheq() terheq() terheq() Klasa Objektet (instancat) Driton Haxhiu . •  Sjelljet Pra shprehja po krijoje nje objekte mund te thuhet po krijoje nje instance.Cka definon nje Objekt? Nje objekt nuk eshte asgje tjeter perveqse nje klase e inicializuar me vlera. Nje objekt dallon nga nje objekt tjeter permes tri gjerave: •  Identiteti ID •  Vetite “Objektet ndryshe I gjeme edhe si instanca.

ka apo nuk ka krah. Njejte sikur nje arkitet qe krijon skicen e tije dhe pastaj duke u bazuar ne te krijon objekte banimi ashtu edhe ne duke u bazuar ne skicen tone krijojme objekte udhetimi. mirepo gjerat sikurse ne jeten reale. Per te dalluar nje veture prej nje anije apo nje aeroplani atehere ne tregojme edhe sjelljet e tij. ka timon. ku majtas. Anije. Ne rastin ton mjetit te udhetimit I japim nje identitet. I themi se objekti ka nje ngjyre. nese noton. Ne kete rast ne kemi krijuar nje objekt (mjet udhetimi) dhe mund ta perdorim sa here qe na nevojitet. Shembull: Nese gjindemi ne qytetin e Ferizajt dhe ne nje moment na kerkon dikush qe te shkojme ne Prishtine. pastaj ku duhet te kthehemi djathtas. Po e zeme qe nuk ekzistone nje mjet i tille ndaj ne duhet ta krijojme se pari. Perveq ketyre ne duhet ti vendosim edhe per gjerat qe do te beje mjeti: Leviz apo nuk levize. Aeroplan etj. Gjeja e pare qe na vjene ne mendje eshte nje trajektore nga pika A ne piken B. Gjeja e pare qe bejme kur fillojme te zhvillojme nje ide. mirepo ato dallohen permes identitetit. si shembull me I mire do te ishte trafiku dhe mjetet motorike. Nese na duhet te krijojme nje veture atehere nga skica plotesojme: Atributet dhe sjelljet e tije qe bene nje veture. mandej e pershkruajme permes atributeve. Nese hasim ne semafor dhe semafori eshte ne te kuqen atehere duhet te presim disa caste. noton apo nuk noton. ka apo nuk ka dritare. Nese fluturon. atehere nuk eshte veture. mirepo sjelljet mund ti kete tjera ose e kunderta. Ne kuader te kesaje ne krijojme nje ose me shume objekte. Tren. Perveq qe duhet ti plotesojme te gjitha keto kushte neve na nevoitet edhe nje mjet udhetimi per te arritur deri tek vendi. Nje objekt mund ta pershkruajme me tri gjera: Identiteti. ne rastin ton mjete udhetimi si: Veture. Atributet dhe sjellja (gjerat qe bene objekti). ka apo nuk ka drita. per te arritur nga pika A ne piken B eshte nje rruge e cila pershkruhet me gjatesi dhe ka nje mori kushtesh per te arritur deri ne destinacionin e duhur.
 Ne duhet te percjellim rregulla. sa kilometra.Pershkrimi i OOP-s? Per te pershkruar programimin e orientuar ne objekte. ka apo nuk ka rrota. Pra shpesh here nje objekt mund te kete atribute te njejta me nje tjeter. atributet tjera mund ti kene te njejta apo te ndryshme. Per kete arsye programeret krijojne library me mori klasash dhe objektesh dhe ato I perdorin sa here qe ju duhen. momentin qe nisemi sa duhet te vazhdojme drejte. Vetura mund te kete shume.   Driton Haxhiu . nese eshte e gjelbert atehere ka duhet vazhdojme. atehere nuk eshte veture. eshte skica qe ne programim paraqitet si klase. fluturon apo nuk fluturon. Permes krejt ketyre ne kemi krijuar skicen qe ne prgramim quhet klase. ashtu edhe ne programim nuk shkojne ne kete menyre.

25 Tipet dhe objektet Objektet Driton Haxhiu .

1   niveli   Driton Haxhiu . dime si te krijojme funksione.rezultati = 234. eshte ti fusim ne nje kontinier (vend).Krijimi i nje objektit Eshte shume e thjeshte per te krijuar nje objekt ne JS. te gjitha se bashku. 234   rezultaL   var niveliLojtarit = 1. 234   rezultaL   Lojtari. Variabla   var emriLojtarit = “Driton”. Ne krejt cka duhet te bejme. Ne e dime se si te krijojme variabla. Driton   emri   Lojtari. 1   niveli   Ve-t  (propor-es)   lojtari   var lojtari= new Object().emri = “Driton”.niveli = 1. Driton   emri   var rezultatiLojtarit= 234. Lojtari.

alert("Lojtari  me  emrin:  "  +  lojtari1.lojtari1.emri).rezultaL  +  "  pike"). console. rezultati:349. rezultati:236.emri.rezultati. Driton Haxhiu .log(lojtari1.  ka  mbledhur  "  +  lojtari1. niveli:1} var lojtari2= { emri:“Lena”.Krijimi i nje objektit ne rruge te shkurte var lojtari1= { emri:“Driton”.niveli).log(lojtari1.emri  +  ". lojtari1. niveli:5} lojtari1   lojtari2   Driton   emri   Lena   emri   234   rezultaL   349   rezultaL   1   niveli   5   niveli   Kemi krijuar dy objekte te ndryshme me veti te ndryshme console.

rezultati:236.shfaqDetaje = detajeNgaLojtari.rezultaL  +  "  pike"). lojtari2.  ka  mbledhur  "  +  this.Objekt me i avansuar //Krijojme dy objekte var lojtari1= { emri:“Driton”. niveli:1} var lojtari2= { emri:“Lena”.shfaqDetaje = detajeNgaLojtari. rezultati:349. //Therrasmi shfaq detajet lojtari1.emri  +  ". } //krijimi i nje metode lojtari1. niveli:5} function detajeNgaLojtari(){ //paraqit info per secilin lojtar  alert("Lojtari  me  emrin:  "  +  this.shfaqDetaje (). Driton Haxhiu .

26 Tipet dhe objektet DOM Document Object Model Driton Haxhiu .

Nese duma te bejme nje nderyhrje ne nje tak. e cila na mundoeson qe ti qasemi struktures se HTML-it. apo ne nje element te caktuar.DOM DOM eshte nje ide. XML-it dhe CSS permes JavaScript- es. ne mund te shkojme sakt ne ate element dhe te bejme ndryshimet perkatese Driton Haxhiu . atehere permes DOM.

DOM <html> <head> <title>DOM</title> html   </head> <body> <h1>JavaScript dhe DOM</h1> <p>Lorem Ipsum dolor sit amet</p> head   body   <ul id=“menu”> <li>Shqiperia</li> <li>Cameria</li> Ltle   h1   p   ul   <li><a href=“#”>Kosova</a></li> </ul> </body> </html> li   li   li   a   Driton Haxhiu .

getElementById(“menu”) 0   O 1   O var elementet document.DOM html   Shembull.html   html   <html> <head> <title>DOM</title> head   body   </head> <body> <h1>JavaScript dhe DOM</h1> <p>Lorem Ipsum dolor sit amet</p> <ul id=“menu”> Ltle   h1   p   ul=“menu”   <li>Shqiperia</li> <li>Cameria</li> <li><a href=“#”>Kosova</a></li> </ul> </body> li   li   li   </html> Shembull.js   javaScript   a   var elementet document.getElementByTagname(“li”) 2   O Driton Haxhiu .

atehere ne kemi marr nje element ku ka nje imazh.js   javaScript   elementi. ne mund te selektojme nje element apo nje vlere te nja atributi te caktuar. Shembull. pastaj atij ja kemi shtu edhe atributin “alt” Ne shembullin e mesiperm.DOM . mirepo jo vetem kaq. po edhe mund te japim nje emer te imazhit ne alternative Driton Haxhiu .getAttribute(“img”) elementi. Permes DOM-it ne mund te selektojme edhe nje atribut te HTML-s apo edhe te shtojme nje atribut ne nje element te caktuar. ne mund te ndryshojme shtegun e imazhit.atributet Permes DOM-it.getAttribute(“alt”) Cfare realisht mund te bejme me te? Nese I referohemi shembullit te mesiperm.

getElementById(“menya”).JavaScript vs jQuery Ne kete rast do te gjendet elementi me id “menya” dhe do ti shtohet klasa “menya-kryesore”. Shembull.html   html   <ul id=“menya” class=“menya-kryesore”> <li>Shqiperia</li> <li><a href=“#”>Kosova</a></li> </ul> Driton Haxhiu . Shembull.addClass(“menya-kryesore”).html   html   <ul id=“menya”> <li>Shqiperia</li> <li><a href=“#”>Kosova</a></li> </ul> //Shembulli ne JavaScript document. //Shembulli ne jQuery $(“#menya”).className = “menya-kryesore”.

•  Atributet. •  Tekstet.TEXT_NODE == 3 tekst   li   li   li   tekst   tekst   tekst   a   Driton Haxhiu .ELEMENT_NODE == 1 tekst   tekst   tekst   Node.ATTRIBUTE_NODE == 2 Ltle   Node.Nyjet (nodes) Nyjet reprezentojne: html   •  Elementet. •  Komentet head   body   Tipet e nyjeve: h1   p   ul   Node.

Elementet. atributet dhe tekstet Shembull.html   html   ul <ul id=“menu”> Id=“menu” <li>Shqiperia</li> Element node <li>Cameria</li> Adttribute node <li> <a href=“#”>Kosova</a> </li> li li li </ul> Element node Element node Element node Shqi… Camer… Kosova text node text node text node Driton Haxhiu .

write(“<p>Teksti qe paraqitet</p>”) </script> <script> document.write(“<h1>Teksti qe paraqitet</h1>”) </script> Driton Haxhiu .Me shume nga DOM <script> document.

<!DOCTYPE  html>   <html>   <body>     <h1>Miresevini  ne  javascript</h1>     <p  id="paragrafi">   TeksL  qe  do  te  ndryshohet   </p>     <script>   funcLon  funksioniIm()   {   var  elemenL=  document.getElementById("paragrafi").    //  Gjeje  ElemenLn  perkates   elemenL.        //  Ndrysho  permbajtjen   }   </script>     <bu•on  type="bu•on"  onclick="funksioniIm()">Kliko  ketu!</bu•on>     </body>   </html>   .innerHTML="Hello  JavaScript!".