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

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). Miku
juaj nuk ka qen asnjehere ne qytetin tuaj, ndaj ai kerkon nje
shpjegim te rruges qe do te beje. Gjeja e pare qe ju vjen

A
ndermend eshte nje trajektore e drejte nga qyteti juaj, ne
qytetin e mikut tuaj. Mirepo gjerat sikurse ne jeten reale,
ashtu edhe ne programim nuk funksionojne ne jete menyre,
ndaj per te pershkruar rrugen deri ne shtepin tuaj, mikut I
duhen instruksione te sakta per te arritur deri tek ju. Ne
menyre te njejte edhe ne programim duhet te japim
informata te sakta, perndryshe programi mund te ndeshet,
njejt sikurse miku juaj. Kjo eshte edhe arsyeja pse themi se nje
program eshte crash-irat, ka pesuar aksident.
Shembull i programimit ne jeten reale
B
Puna e pare qe bejme per ti ndihmuar mikut tuaj per te arritur
tek ju, eshte analiza. Duhet te jeni te sigurt nese ju jeni ne
dijeni per rrugen e sakt, ate duhet analizuar, per cdo kthese
per cdo semafor qe gjendet ne rruge, pastaj ju filloni ti jepni
instruksionet. Ju mund ti thoni atij, se fillimisht niset djathtas,
vazhdon 2 km, pastaj kthehet djathtas perseri. Pas 500 m ka
nje semafor, nese semafori eshte ne ngjyre te kuqe, atehere
prit derisa te ndezet e gjelberta, pastaj vazhdo drejte,
perndryshe menjehere vazhdo drejte. Pas 17 km tjera keni nje
rreth. Eshte rregull qe ne rreth te silleni 3 here, derisa te lirohet
trafiku, pastaj mas 13 km, ndaleni dhe ju jeni prane shtepise
sime.
Nese ne nuk i kemi dhene instruksionet mire, atehere
mikun shume leht mund ta shohim te perplasur ne ndonje
pem. Qoft edhe pran shtepise. A
Disa shembuj cfare mund te bejme me ane te
programimit
Programimi nuk eshte vetem shko majtas, 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

 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

Gjuha
13
Programuese
Driton Haxhiu
Gjuhet programuese
Ekzistojne qindra gjuhe programuese, qysh C
prej ka fillu te programohet, per disa arsye
disa jane me te njohura e disa jo. Ne anen C++
e djathte jane dhene disa gjuhe te cilat sote C#
jane me te popullarizuarat. Shumica prej
tyre jane te bazuara ne gjuhen Java

programuese C. JavaScript
Perl
PHP
Python

Meqense me te gjitha mund te kryejme Objective-C
pune te njejte, atehere pse nuk ekziston
vetem nje gjuhe programuese? Ruby

Visual Basic
Kodi i makines
CPU- Truri I cdo paisje nuk kupton asnjeren
nga gjuhet qe shihen ne anen e djathte.
Ne mendojme qe Qipi (CPU) lexon kodin
C
ton qe kemi shkruar ne nje gjuhe C++
programuese, mirepo jo.

Te vetmen gjuhe qe njeh Qipi eshte kodi I C#
makines, ose gjuha e makines, 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, nuk mund ta lexoje
askush, ngase nuk eshte per njerezim por
Ruby

per makina Visual Basic
JavaScript,  AcLonScript  
Gjuhet  e  larta  programuese  
Ruby,  Paython,  PHP  
Java,  C#,  VB.NET  
 
ObjecLve-­‐C  
C++  
 
 
C  
  Gjuhet  e  ulta  programuese  
Assembly  Language  

Kodi  i  makines  
CPU  
Kodimi
Kur te themi, po programoje, po shkruaj kod, po kodoj, C
eshte e njejta gje, mirepo duhet ti kuptojme tri gjera:
C++
1.  Si te shkruajme, ku t’ja fillojme me shkru C#
2. Qysh ai kod, do te konvertohet ne kod te makines
3. Si ta ekzekutojme kete program Java

JavaScript

Perl
PHP
Python

Objective-C
Ruby

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

JavaScript
Perl
PHP
Python

Objective-C
Ruby

Visual Basic
Shembuj   shembull.js   JavaScript  
alert(“Hello, World!”);

shembull.pl   perl  
say “Hello, World!”;

shembull.ruby   ruby  
puts ‘Hello, World!’

shembull.groovy   Groovy  
say “Hello, World!”;
Driton Haxhiu
Hello world, nje shembull klasik

print (“Hello, world!”)

ALGOL68  
Paython    
Lua  
 Kur  fillojme  me  deklaru  nje  kod,  duhet  patjeter  te  tregojme  ku  eshte  fillomi  dhe  fundi.  
   
ALGOL60  
Ne  gjuhen  programuese  
ALGOL60,  eshte  perdorur   BEGIN
BEGIN  dhe  END.   DISPLAY (“Hello, world!”);
END.

Ne  gjuhet  programuese  qe   C#  

jane  te  bazuara  ne  C,  
shmebull  C,  C++,  C#,  Java   Using System;
Perdoren  kllapat  gjarprore      
{   Class Shembulli
      {
}   static void Main(string[] args)
{
A  duhet  me  I  mbajte  mend  gjitha   console.WriteLine(“Hello, world!”);
keto???   }
  }
Jo  bash  
Text Editor-et per Programera

•  Plain Text Editor, me tipare extra

•  Disa jane falas, disa komercial
•  Na tregojne per numrin e rreshtave
•  Kodin e ngjyrave (Color Code), nuk eshte I formatum, por na ndihmon per me I
lexu dhe me I shkru pjese te ndryshme te kodit

Kontrollimi I sintakses, sikurse kontrollimi I fjaleve

Disa text editor I perkrahin vetem nje gjuhe programuese e disa edhe te tjera

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  
Gjuhet e kompajlluara dhe te interpretuara
Gjuha  e  interpretuar  
Script    
Script    
alert(“Hel
Script     Script    
alert(“Hel
lo,   alert(“Hel alert(“Hel
lo,   interpreteri  
lo,  
world”);   lo,  
world”);  
world”);   world”);  

 
alert(“Hello,  world!”);   Hello,  world!  

Programeri   Klien-  
Gjuhet e kompajlluara dhe te interpretuara
Gjuha  e  kompajlluar  

Cout<<“H 10111001 10111001

ello,   01001101 01001101
world!”;   00100100   00100100  
kompajlleri  

 
cout<<“Hello,  world!”;   Hello,  world!  

Programeri   Klien-  
Perparesit dhe mangesit
Gj.  e  Kompajlluara   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  
Gjuhet e kompajlluara dhe te interpretuara
Intermediate  Language  IL  

IL  
10111001

IL  
Cout<<“H
ello,   01001101
world!”;   00100100  

 
cout<<“Hello,  world!”;   Hello,  world!  

Programeri   Klien-  
Shembull te gjuheve programuese

Te Kompajluara: C, C++, Objective C

Te interpretuara: PHP, JavaScript

Hybrid: C#, Java, VB.NET, Python

 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  
 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
Variablat
15
Driton Haxhiu
Variablat ne JavaSript
Driton   3   9   12  

emri   vleraA   vleraB   rezultaL  

var  emri  =  “Driton”;  

var  vleraA  =  3;  
var  vleraB  =  9;  
var  rezultaL  =  vleraA  +  vleraB;  
alert(“RezultaL:  ”  +  rezultaL);  
 EmerLmi  i  variavles   vlera  e  inicializuar  

var emri = “Driton”;

 16
Operatoret
Driton Haxhiu
Operatoret
Alert,  prompt  dhe  confirm,  ne  na  
alert  (“Pershendetje”);   interpretohen  si  PopUp.  

prompt  (“Jepeni  emrin:  ”);   A  pajtoheni?  

confirm  (“Jepeni  emrin:  ”);   cancel   OK  

if  (confirm("A  pajtoheni?"))  {   prompt  (“Jepeni  emrin:  ”,  “vlera  e  nenkuptuar”);  

 alert("Po,  pajtohem!");  
}  
else{  
 alert  ("Jo,  nuk  pajtohem!");  
};   confirm  (“Stringu”  +  variabla);  
Operatoret aritmetik
Operatori   Pershkrimi   Shembulli  
++   Rritet  vlera  per  1   a  =  3;  
a++;  
Tani  a  =  4  

-­‐-­‐   Zvoglohet  vlera  per  1   a  =  3;  

a    -­‐-­‐  ;  
Tani  a  =  2  

%   Modular   a=8  %  3;  

+   Mbledhje  dhe  shLm  
-­‐   Zbritje  
*   Shumezim  
/   PjesLm  
Rritjet / zvoglimet

a = a + 1; a = a - 1;
a += 1; a -= 1;
a++; a--;
++a; --a;
Prefiks dhe postfiks

var a = 5; a var a = 5; a
alert(++a); 5 alert(a++); 5
Rezultati shfaqet: 6 Rezultati shfaqet: 5
Operatori ternary (tresh)
kushti ? true: false
var lojtari1 = 230;
var lojtari2 = 378;
var fituesi = (lojtari1 > lojtari2) ? fituesi1 :
fituesi2;
if (lojtari1 > lojtari2){
fituesi = lojtari1;
}
else{
fituesi = lojtari2;
}

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  

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)
)
Detyre  per  ushtrime  1  
javascript  
var a = 5;
var b;
var rezultati;
b=3;
rezultati = a+b;

alert("rezultati eshte: " + rezultati);

ReultaL  
Rezultati eshte: 8
Kushtet
17
Driton Haxhiu
Kushtet
if ( …kushti… ){

//…deklarimi I kodimit tuaj ne baze te kushtit

shkruhet ketu… ;
//…
}
else if( …kushti tjeter… ){

//perndryshe ekzekutohet kodi qe shkruhet ketu

}
Else{

//perndryshe ekzekutohet kodi qe shkruhet ketu

}
Detyre  nga  kushL  
javascript  
Ne kodin qe shihni ne anen e var  a  =  4;  
djathte jane dhene dy variabla te var  b  =  346;  
inicializuara njera me vkere 4 dhe if  (a  ==  b){  
tjetra me vlere 346.
  alert(”Vlerat  jane  te  barabarta:  ”);  

 }  
Ne kushtin e me poshtem kemi else  if(a<=  b){  
thene:  alert(”a  eshte  me  e  vogel”);  
Nese a eshte e barabart me b, }  else  {  
atehere ekzekutohe –Vlerat jane te  alert(”a  eshte  me  madhe”);  
barabarta--. }
Perndryshe nese a eshte me e
vogel ose baraz me b, ekzekutoje
mesazhin –a eshte me e vogel--.
Perndryshe shfaqe mesazhin -- a
eshte me e madhe --
Detyre  per  ushtrime  2  
javascript  
javascript  
var  a  =  4;  
var  emri  =  prompt("si  quheni?  ");   var  b  =  346;  
  var  rez;  
alert("Emri  juaj  eshte:  "  +  emri  );   var  oper  =  prompt("Operatori?  ");  
if  (oper  ==  1){  
 rez  =  a  +  b;  
 alert("Shuma:  "  +  rez  );  
}  
else  if(oper  ==  2){  
 rez  =  a  -­‐  b;  
 alert("Zbritja:  "  +  rez  );  
}  else  {  
 rez  =  a  *  b;  
 alert("Shumezimi:  "  +  rez  );  
}
 18
Unazat (loops)
Driton Haxhiu
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, 5 ose 500 deri ne infinit). 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. 
  
Shembull konkret: Permes unazave ne Deklarimi  i  pare  
mund ti gjenerojme numrat personal te Deklarimi  i  dyte  
qytetareve te vendit, ose tabelat e  
veturave, madje ne mund ti kufizojme Deklarimi  i  pare  
disa numra te rezervuar. Deklarimi  i  dyte  
 
Per te krijuar nje unaze, kemi tri menyra: Deklarimi  i  pare  
•  While (gjersa) Deklarimi  i  dyte  
•  Do, while (beje, gjersa)  
•  For (per)
While  (Gjersa)  
Njejte  sikurse  tek  kushtet  qe  kemi  
If(  a<  10){   javascript  
 //…  beje  dicka  …  
var  a  =  1;    
}  
Mirepo  ne  kete  rast  ne  zevendesojme  if   while(  a<  10){  
me  while.    console.log(a);  
   a++;  
While  (a  <  10){   }
 //…  beje  dicka  …  
}  

Do…  While  (Beje…  Gjersa)  

javascript  
var  a  =  1;    
do  {  
 console.log(a);  
 a++;  
}    
while(  a<  10);
For  (per)  
Kontrollo  kushCn  

Vendosja  e  indexit   Rrit  vleren  per  1  

Vendosja  e  indexit  

var  a  =  1;   Kontrollo  kushCn   for  (i  =  1;  i  <  10;  i++){  
     //  …bej  disa  gjera  …  
while(  a<  10){   }
 console.log(a);  
 a++;  
} Rrit  vleren  per  1  
 
Shembull nga unaza
javascript  
for  (i  =  1;  i  <  10;  i++){  
   console.log(i);  
   i++;    
}

Break Continue
javascript   javascript  
for  (i  =  1;  i  <  10;  i++){   for  (i  =  1;  i  <  10;  i++){  
“Break”, nese “Break”, nese
   console.log(i);      console.log(i);  
   i++;     plotesohet    i++;     plotesohet kushti
   if  (i  ==  98){   kushti brenda    if  (i  ==  98){   brenda unazes
     break;   unazes atehere      conLnue;   atehere na qet
   }   na qet jasht    }   jasht unazes.
} unazes. }
 19
Funksionet
Driton Haxhiu
Per te bere kodin me te lexueshem dhe per te bere me te lehte
manipulimin me te, atehere ne krijojme, funksione. Ne gjuhet
tjera programuese i gjejme si sub rutin ose si module, mirepo
ne JavaScript thjesht Funksione.

javascript  
function myFunction(){
console.log(“Hello, world!”);
}
 Emertimi Parametri
function myFunction(x,y){
var shuma = x+y;
console.log(shuma);
return x;
}
myFunction(12,65);
myFunction(543,98);
Parametrat mosperputhes

function llogariabankare(shuma, muaji, interesi, emri){

//Pjese e kodit
}

llogariaBankare(1200, 36, 12, “Driton Haxhiu”);

llogariaBankare(1200, 36, 12, “Driton Haxhiu”, “Programer”);
//Parametrat shtese do te injorohen

llogariaBankare(1200, 36);
// Vlerat tjera do te zevendesohen me undefinde.
// Nuk do me thene qe funksionon, por as nuk do te thot qe
funksionon. Duhet te keni kujdese
Variable Scope (fushat qe shihen)
function shembull(){
var foo = 342;
console.log(foo);
}

shembull(); // 342
console.log(foo); // UNDEFINED

var foo; // Variabel globale

function shembull(){
foo = 342;
console.log(foo);
}

shembull(); // 342
console.log(foo); // 342
Shembull nga Funksionet
function gjeneratori(n){
for (i=0; i<=n; i++)
console.log(i);
}

gjeneratori(9);

function gjeneratori(n){
for (i=0; i<=n; i++)
console.log(i);
}
z = prompt(”Jepeni vleren: ");
gjeneratori(z);
Ne oren e ardhshme:
• Vektoret
• Numrat
• Stringjet
• Datat
• Objektet
 20
Tipet dhe objektet

Vargjet (vektoret)
Ang. Arrays

Driton Haxhiu
Krijojme vargje
var njeVlere; Kemi krijuar nje variabel njeVlere  
njeVlere = 87; dhe e kemi inicializuar me
nje vlere. Vlera e variables 87  
mund te jete, numer, string
dhe bulean

Vargu eshte nje variabel e var vargu = []; vargu  

vetme, e cila permban
shume vlera numerike dhe vargu[0] = 45; [0] 45  
tekstuale per ti treguar Vargu[1] = 76;
JavaScriptes qe po krijojme Vargu[2] = “Driton”; [1] 76  
nje varg, atehere
shenojme “[ ]” [2] Driton  
Fillon nga 0 (zero)
alert ( vargu[2] ) ;
Krijojme vargje ne rruge te shkurter
vargu  
var vargu = [];
[0] 45  
vargu[0] = 45;
Vargu[1] = 76; [1] 76  
Vargu[2] = “Driton”;

Fillon nga 0 (zero) [2] Driton  

var vargu = [ 45,76, “Driton” ];

[0] [1] [2]

alert ( vargu[2] ) ;
Krijojme vargje ne rruge te gajte
var vargu = []; Kjo eshte menyra ime qe preferoje

var vargu = new Array(); Vargjet jane objekte

var vargu = Array();

var vargu = Array(5);

Ne JavaScript vargjet gjithmon jane dinamike

alert ( vargu[2] ) ;
Tiparet e vargjeve (properties)
Me qenese vargjet jane objekte, atehere ato kan veti dhe metoda
(Vetit, metodat dhe te tjerat me gjeresisht do ti mesojme ne
Programim te Orientuar ne Objekte)

var vargu = [ 45, 78, 76, 34 ];

Console.log( vargu.length) ; // gjatesia e vargut eshte: 4

//indeksi me I lart eshte [3]

//Highest index

Metodat paraqesin informatat qe i posedon

Metodat e vargjeve (properties)
Vargjet gjithashtu kan metoda.

disaFunksione (parametrat); //thirja e nje funksioni

Metodat jane funksione qe I perkasin nje objekti
disaObjekte.disaMetoda (parametrat); //thirja e nje metode

var vleraVargut = [ 10, 20, 30, 40];

var vleraRevers = vleraVargut.reverse(); Krojon varg tjeter
.join();
.sort();

console.log(vleraRevers.join) ; ”40,30,20,10”
Vargjet jane cdokund
Nese duam te dijme sa linqe kemi ne faqen tone, atehere thrrasim
te gjitha linqet

var varguILinqeve= document.getElementByTagName(“a”);

varguILinqeve  

[0] <a  href=“index.html>…  

[1] <a  href=“rrethnesh.html>…  

[2] <a  href=“kontakL.html>…  

 21
Tipet dhe objektet

Numrat

Driton Haxhiu
Numrat
njeVlere  
var x = 87; 87  

Numrat ne JavaScript jane 64-bit float

var x = 87.3;
Mbledhja kunder shtimit (+)
var x = 5;
Numrat
Ketu mblidhen vlerat
e x dhe y
var y = 6;

console.log(x+y); // 11

var x = “5”; Ketu behen bashk

var x = “6”; vlerat e x dhe y Stringjet

console.log(x+y); // 56
Mbledhja kunder shtimit (+)
Cka ndodhe kur njera vlere eshte numer, tjetra string?

var x = 5;
var y = ”6”;
console.log(x+y); // 56 – njera vlere eshte string

var x = 5;
var y = ”6”;
console.log(x*y); // NaN

Not a Number (Nuk eshte nje Numer)

Nuk eshte nje numer (NaN)
Nganjehere na nevoitet nje vlere ta bejme numer, nese ai
eshte string. Si ta bejme kete?

var x = ”36”; // mund te jete “abc”

var numriIm = Number(x); // Beje numer

Nganjehere na nevoitet me dite, per nje vlere eshte
numer apo string. Si ta bejme kete?
Objektet matematikore
Krijojme nje variebel x me presje dhjetore. Nese duam qe
kete vlere ta fiksojme duke marr parasysh presjen
dhetore atehere shkruajme
var x = 52.6;
var y = Math.round(x); // 53
Nese duam te gjeme vleren maksimale dhe/ose minimale te dy ose me shume
variablave atehere shkruajme:

var a = 220; b = 35544; c = 2;

var vleraMaksimale = Math.max(a,b,c);
var vleraMinimale = Math.min(a,b,c);

Math.PI Math.random() .sqrt() .log()

 22
Tipet dhe objektet

Stringjet

Driton Haxhiu
Stringjet
var stringu = ”Thojza te dyfishta”;
var stringu = ‘Thojza te njefishta’;
var stringu = ‘String tjeter”;
Thojzat brenda thojzave
var stringu = ‘S’lejohen miksimet’;
var stringu = “S’eshte keq”;
var stringu = “Thenja:” Pune pune…””;
var stringu = “Thenja: \” Pune pune…\””;
Tiparet e stringjeve - length
Shpeshe here ne JavaScript na nevoitet te marrim gjatesine e nje
stringu, te cfardo teksti.
Per te marrur gjatesine e tekstit, atehere ne perdorim, emrin e
variables se stringut, pastaj length. Ne kete rast na shfaqet numri I
karaktereve ne ate string.

var stringu = ‘Nje fraze testuese’;

console.log(stringu.length); // 18 –
Metodat e stringjeve - split
Ne JavaScript ne mund ta ndajme nje string ne copa dhe me ane te tij
krijojme nje varg, pastaj ne mund ta therrasim cilindo pjese te tij.
Ne rastin e meposhtem I kemi thene, naj ndaj tekstin per cdo hapsire
te bardh qe ka. Stringun mund ta ndajme edhe pas cdo pike, pikepresje
apo ndonje karakteri tjeter, duke e vendosur ate brenda kllapave si
ne shembullin e meposhtem … .split(“,”) ose … .split(“.”)

var stringu = ‘Nje fraze testuese.’;

var fjalet = stringu.split(“ ”);
0 Nje
1 fraze
2 testuese.

Nje string mund ta paraqesmi me te gjitha karakteret e mdha ose te

vogla duke perdorur .toUpperCase() dhe .toLowerCase()
console.log(stringu.toUpperCase);
// NJE FRAZE TESTUESE
Metodat e stringjeve - indexof
Ne mund te indeksojme nje pjese te caktuar te teksit pastaj me ate
pjese mund te bejme cfardo qe duam. Shembull mund ta paraqesmi ne
ekran, mund ti japim veti tjera ne CSS…
Indeksimi I tekstit ne JS behet sikur me poshte
emriStringut.indexOf(“FjalaQeIndeksohet”)

var stringu = ‘Nje fraze testuese.’;

var fjalet = stringu.indexOf(“fraze”);

Metodat e stringjeve - slice
Ne raste te caktuara neve na nevoitet qe te prejme nje cope te caktuar te
tekstit, pastaj ta paraqesmi ate. Nje shembull tipik do te ishte
permbajtja e nje artikulli te nje uebfaqe, ku ate permbajtje e prejme dhe
e vendosim si lajme te shkurter, mund ti presmi vetem disa rreshta te
lajmit. Me poshte eshte shembulli se si behet prerja e stringut.
Ne rastin tone I kemi thene, kaloj 4 karaktere, duke filluar nga 0, pastaj
merri 5 karaktere te tjera, ku fundi I tyre eshte 9.

Nese ne rastin tone i themi 0,9. Atehere do te vij fjala “Nje fraze”

var stringu = ‘Nje fraze testuese.’;

// 0123456789
var segmenti = stringu.slice(4,9);
// fraze - eshte fjala qe ruhet ne variablen segmenti
Ne JavaScript prerja e tekstit mund te behet .substring()
edhe me .substring() dhe .substr(). Shpesh mund
ta gjeni edhe keshtu .substr()
 23
Tipet dhe objektet

Datat

Driton Haxhiu
Datat dhe koha
JavaScript, perveq qe ka objektet e stringjeve dhe ato matematikore,
gjithashtu ka dhe objektet e datave. Datat perdoren shume ne
programim, ato na nevoiten pothuajse cdo kund

var sot = New.Date(); // Data dhe koha aktuale

var data = New.Date(1,0,2000); // Data, muaji viti - aktual

var data = New.Date(1,0,2000,0,0,0,0); // Data, muaji, viti,

ora, minutat, sekondat aktual
Metodat e datave - get (merr)
Nese duam te marrim nje metode te dates atehere kemi:

var sot = New.Date(); // Data dhe koha aktuale

sot.getMonth(); // 0-11 (0-janar -11 dhjetor)

sot.getFullYear(); // YYYY (baza nuk eshte 0)
sot.getDate(); // 1-31 dite te muajit
sot.getDay(); // 0-6 dite te javes(0 == e Diele)
sot.getHour(); // 0-23 dite te javes(0 == e Diele)
sot.getTime(); // milisekondat qe nga 1/1/1970
Shembull
Nese duam te marrim nje metode te dates atehere kemi:

var diteLindja = new Date(16,5,1987);

console.log("Driton Haxhiu ka lindur ne
diten e: " ,diteLindja.getDay() );
Metodat e datave - set (shto)
Nese duam te shtojme nje date, ore muaj, apo cfaredo kohe, kemi:

var sot = New.Date(); // Data dhe koha aktuale

sot.setMonth(5);
sot.setFullYear(2012);
sot.setDate();
sot.setDay();
sot.setHour();
sot.setTime();
Krahasimi i datave
Kemi deklaruar dy variabla dhe i krahasojme ato

var data1 = New.Date(2000,0,1);

var data1 = New.Date(2000,0,1);

if (data1 == data2){ // False

Pamarr parasysh nese kemi perdor dy ose tri barazime rezultati eshte
fals, (d.m.th. Nuk jane te barabarta.). Krej kjo ngase data eshte nje
objekt.
Krejt cka na duhet neve eshte ti marrim data si dy vlera numerike,
pra I marrim dhe i krahasojme me milisekonda.

if (data1.getTime() == data2.getTime())
{ // vlera do te jete True
 24
OOP

Hyrje ne OOP
Programim I orientuar ne objekte

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.
Keshtu nuk ishte gjithmon, para shume viteve eshte programuar ne
menyre procedurale ne Assembly, Fortrain, Cobol. Keto gjuhe nuk jane
OOP, keto jane gjuhe procedurale dhe programi eshte shkruar ne nje
procedure te gjate edhe pse ka permbajt funksione, nen rutina (sub-
routin)ose module, te kombinuara ne logjike dhe te dhena dhe krejt
keto kan qen te perziera bashk
Pershkrim
Ne OOP, krejt kodi I cili eshte skruar ne nje procedure te gjate,
eshte ndare ne pjese te cilat quhen Objekte, me nje fjale mund ti
quajme edhe mini-programe. 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  
Cka permban nje objekt
Nje objekt nuk eshte dicka imagjinare, mund te jete cfaredo objekti
edhe I botes reale, nje objekt mund te jete nje lojtar, nje llogari
bankare, nje veture apo nje shtepi.
OOP eshte nje ide, e cila eshte perkrahur ne shume gjuhe programuese.
Para se me vazhdu tutje ne duhet ti dijme disa terme

Objekti 2
Objekti 1
data  
data  

Objekti … logic  
logic  
data  

logic  
Class (Klasa)
Klasa eshte nje skice, nje pershkrim, nje definim, e cila pershkrun
nje gje cfare eshte, por nuk eshte vete ajo gje. Shembull mund te
jete skica e shtepise.

Cdo klase permban dhe definon dy gjera:

•  Atributet

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

Cka definon nje klase?
Disa gjera qe permban nje klase
jane karakteristikat (atributet)
dhe disa jane sjelljet
Atributet dhe sjelljet ne shumicen e
gjuheve programuese i gjeni si
Tipare (veti) ang.Proporties dhe
Sjelljet si Metoda, ang. 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

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

Nje shtepi e bazuar ne nje skice
 Shume shtepi te bazuara ne nje plan (skice)

fig. 1 fig.2
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.
•  Sjelljet Pra shprehja po krijoje nje objekte mund te thuhet po
krijoje nje instance.”

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)

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

Objektet

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

Ve-t  (propor-es)  
lojtari  
var lojtari= new Object();
Lojtari.emri = “Driton”; Driton   emri  
Lojtari.rezultati = 234; 234   rezultaL  
Lojtari.niveli = 1; 1   niveli  
Krijimi i nje objektit ne rruge te shkurte
var lojtari1= { emri:“Driton”, rezultati:236, niveli:1}
var lojtari2= { emri:“Lena”, rezultati:349, 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.log(lojtari1.emri);
console.log(lojtari1.emri, lojtari1.rezultati,lojtari1.niveli);

alert("Lojtari  me  emrin:  "  +  lojtari1.emri  +  ",  ka  mbledhur  "  +  lojtari1.rezultaL  +  "  pike");
Objekt me i avansuar
//Krijojme dy objekte
var lojtari1= { emri:“Driton”, rezultati:236, niveli:1}
var lojtari2= { emri:“Lena”, rezultati:349, niveli:5}

function detajeNgaLojtari(){
//paraqit info per secilin lojtar
 alert("Lojtari  me  emrin:  "  +  this.emri  +  ",  ka  mbledhur  "  +  this.rezultaL  +  "  pike");
}

//krijimi i nje metode

lojtari1.shfaqDetaje = detajeNgaLojtari;
lojtari2.shfaqDetaje = detajeNgaLojtari;

//Therrasmi shfaq detajet

lojtari1.shfaqDetaje ();
 26
Tipet dhe objektet

DOM
Document Object Model

Driton Haxhiu
DOM
DOM eshte nje ide, e cila na mundoeson qe ti qasemi
struktures se HTML-it, XML-it dhe CSS permes JavaScript-
es.
Nese duma te bejme nje nderyhrje ne nje tak, apo ne nje
element te caktuar, atehere permes DOM, ne mund te
shkojme sakt ne ate element dhe te bejme ndryshimet
perkatese
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  
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.getElementById(“menu”) 0   O

1   O
var elementet document.getElementByTagname(“li”)
2   O
DOM - atributet
Permes DOM-it, ne mund te selektojme nje element apo nje
vlere te nja atributi te caktuar, mirepo jo vetem kaq.
Permes DOM-it ne mund te selektojme edhe nje atribut te
HTML-s apo edhe te shtojme nje atribut ne nje element te
caktuar.

Shembull.js   javaScript  
elementi.getAttribute(“img”)

elementi.getAttribute(“alt”)

Cfare realisht mund te bejme me te?

Nese I referohemi shembullit te mesiperm, atehere ne kemi marr nje element ku ka
nje imazh, pastaj atij ja kemi shtu edhe atributin “alt”
Ne shembullin e mesiperm, ne mund te ndryshojme shtegun e imazhit, po edhe mund
te japim nje emer te imazhit ne alternative
JavaScript vs jQuery
Ne kete rast do te gjendet elementi me id “menya” dhe do ti shtohet
klasa “menya-kryesore”.

document.getElementById(“menya”).className = “menya-kryesore”;

$(“#menya”).addClass(“menya-kryesore”);