JavaScript – Njohuri themelore

JavaScript është gjuhë programimi ose gjuhë skriptimi për Ueb, që mund të përditësoj dhe ndryshojë si HTML-në ashtu edhe CSS-në, e gjithashtu mund të kryej llogaritje, manipulojë dhe validoj të dhëna.

Skriptimi nga ana e klientit u referohet skripteve që ekzekutohen brenda shfletuesit tuaj të internetit. JavaScript është krijuar për të shtuar ndërveprim dhe efekte dinamike në ueb-faqe duke manipuluar përmbajtjen që vije nga një ueb-server.

JavaScript u zhvillua fillimisht si LiveScript nga Netscape në mes të viteve 1990-ta. Më vonë u riemërua në JavaScript në vitin 1995 dhe u bë një standard ECMA në vitin 1997. Tani JavaScript është gjuha standarde e skriptimit nga ana e klientit për aplikacione të bazuara në ueb, dhe përkrahet nga pothuajse të gjithë ueb- shfletuesit  të disponueshëm sot, të tilla si Google Chrome, Mozilla Firefox, Apple Safari, etj.

JavaScript është një gjuhë e orientuar në objekte, dhe gjithashtu ka disa ngjashmëri në sintaksë me gjuhën programuese Java. Megjithatë, JavaScript nuk ka lidhshmëri me Java në asnjë mënyrë.

JavaScript mirëmbahet zyrtarisht nga ECMA (European Computer Manufacturers Association – Shoqata Evropiane e Prodhuesve të Kompjuterëve) si ECMAScript. ECMAScript 6 (ose ES6) është versioni i fundit i standardit ECMAScript.

Çfarë mund të bëni me JavaScript?

Shumë gjëra mund të bëni me JavaScript.

• Mund të modifikoni përmbajtjen e një ueb-faqeje duke shtuar ose hequr elemente.
• Mund të ndryshoni stilin dhe pozicionin e elementeve në një ueb-faqe.
• Mund të monitoroni ngjarje (events) si klikimi i miut, hover efekti, etj. dhe të reagosh ndaj tij.
• Mund të kryeni dhe kontrolloni tranzicionet dhe animacionet.
• Mund të krijoni dritare pop-up për të shfaqur informacione ose mesazhe paralajmëruese tek përdoruesi.
• Mund të kryeni operacione të bazuar nga futja e të dhënave nga përdoruesit dhe t’i shfaqni rezultatet.
• Mund të validoni shënimet e përdorueseve përpara se t’i paraqisni ato në server.

Lista nuk përfundon këtu, ka shumë gjëra të tjera interesante që mund të bëni me JavaScript. Ju do të mësoni për të gjitha në detaje në kapitujt e ardhshëm.

Ueb shërbimet

Ueb serveri

Ueb serveri është një kompjuter ku ruhet përmbajtja e uebit. Në thelb ueb serveri përdoret për të ruajtur (hostuar) ueb-sajtet, gjithashtu ekzistojnë ueb serverë të tjerë për të hostuar lojëra, hapësira ruajtëse, FTP, email, etj. 

Puna e ueb serverit

Ueb serveri i përgjigjet kërkesës së klientit në njërën nga dy mënyrat e mëposhtme:

• Dërgimi i fajllit tek klienti të shoqëruar nga URL-ja e kërkuar.
• Gjenerimi i përgjigjes duke thirrur një skriptë dhe duke komunikuar me bazën e të dhënave.

Pikat kryesore

• Kur klienti dërgon kërkesë për një ueb faqe, ueb serveri kërkon për faqen e kërkuar, nëse gjendet faqja e kërkuar, atëherë ai do t'ia dërgojë atë klientit me një përgjigje HTT
• Nëse ueb faqja e kërkuar nuk gjendet, ueb serveri do të dërgojë një HTTP response: Error 404 Not found.
• Nëse klienti ka kërkuar për disa burime tjera, ueb serveri do të kontaktojë me ueb serverin e aplikacionit dhe bazën e të dhënave për të krijuar përgjigjen HTTP.

Ueb serverët kryesorë që janë sot në dispozicion:

• Apache HTTP Server
• Internet Information Services (IIS)
• Sun Java System Web Server, etj.

Ueb shfletuesi

Ueb Shfletuesi (Web Browser) është një softuer aplikativ që na lejon të shohim dhe të eksplorojmë informacione në ueb. Shfrytëzuesi mund të kërkojë çdo ueb faqe duke futur vetëm një URL në shiritin e adresave.

Ueb Shfletuesi mund të paraqes tekst, audio, video, animacion, etj. Është përgjegjësi e ueb shfletuesit të interpretojë tekstin dhe komandat që përmbahen në ueb faqe.

Më parë ueb shfletuesit ishin të bazuar në tekst ndërsa tani në ditët e sotme ueb shfletuesit bazohen gjithashtu në grafikë ose në zë. Më poshtë janë ueb shfletuesit më të zakonshëm të disponueshëm sot:

Arkitektura

Ka shumë ueb shfletues të disponueshëm në treg. Të gjithë ata interpretojnë dhe shfaqin informacione në ekran, megjithatë aftësitë dhe struktura e tyre ndryshojnë në varësi të implementimit. Por komponenta më themelore që të gjithë ueb shfletuesit duhet të shfaqin janë radhitur më poshtë:

• Kontrolleri/ Dispeçeri
• Interpretuesi
• Programet e Klientit

Kontrolleri punon si njësi kontrolli në CPU. Ai merr inputet (hyrjet) nga tastiera ose miu, i interpreton ato dhe bën që shërbime të tjera të funksionojnë në bazë të inputit që merr.

Interpretuesi pranon informacionin nga kontrolleri dhe ekzekuton udhëzimet rresht për rresht. Disa interpretues janë të detyrueshëm ndërsa disa janë opsional. Për shembull, interpretuesi i programit HTML është i detyrueshëm dhe interpretuesi java është opsional.

Programi i Klientit përshkruan protokollin specifik që do të përdoret për tu qasë në një shërbim të veçantë. Në vijim janë programet e klientit që përdoren zakonisht:

• HTTP
• SMTP
• FTP, etj.

Ueb faqja

Ueb faqja është një dokument i disponueshëm në rrjetin botëror (world wide web – www). Ueb faqet ruhen në ueb server dhe mund të shikohen duke përdorur një ueb shfletues.

Një ueb faqe mund të përmbajë shumë informacione duke përfshirë tekst, grafikë, audio, video dhe hiperlidhje. Këto hiperlidhje janë lidhje me ueb faqet tjera.

Koleksioni i ueb faqeve të lidhura në një ueb server njihet si uebsajt. Ekziston një Lokator Unik i Burimeve Uniformë (Uniform Resourse Locator – URL) që shoqërohet me secilën ueb faqe.   

Ueb faqet statike

Ueb Faqet Statike njihen gjithashtu si faqe të sheshta ose stacionare. Ato lexohen në shfletuesin e klientit ashtu siç janë të ruajtura saktësisht në ueb serverin. Ueb faqe të tilla përmbajnë vetëm informacione statike. Shfrytëzuesi mundet vetëm të lexojë informacionin por nuk mund të bëjë ndonjë modifikim ose të ndërveprojë me informacionin.

Ueb faqet statike krijohen duke përdorur vetëm HTML. Ueb Faqet statike përdoren vetëm atëherë kur informacioni nuk kërkohet më për t'u ndryshuar.

Ueb faqe dinamike

Ueb faqja dinamike tregon informacione të ndryshme në momente të ndryshme kohore. Është e mundur të ndryshoni një pjesë të një ueb faqe pa e ngarkuar përsëri tërë ueb faqen. Kjo bëhet e mundur duke përdorur teknologjinë Ajax.

Ueb faqe dinamike nga ana e serverit

Krijohet duke përdorur skriptingun nga ana e serverit. Ekzistojnë parametra të skriptimit nga ana e serverit që përcaktojnë se si të ndërtoni një ueb faqe të re, e cila gjithashtu përfshin vendosjen e më shumë procesimeve nga ana e klientit.

Ueb faqe dinamike nga ana e klientit

Këto faqe krijohen duke përdorur skriptimin nga ana e klientit siç është JavaScript, dhe pastaj përcillen në Modelin e Objektit të Dokumentit (Document Object Model – DOM).

Gjuhët Skriptuese

Një gjuhë skriptimi është gjuhë programimi që interpretohet, që do të thotë se përkthehet në kodin e makinës kur ekzekutohet kodi. Gjuhët e skriptimit përdoren shpesh për skripte të shkurtra në vend të programeve të plota kompjuterike. PHP, Perl dhe Python janë shembuj të zakonshëm të gjuhëve skriptuese.

Gjuhë skriptimi (e njohur gjithashtu si skripting, ose skriptë) përcaktohet qartë si një seri urdhrash që janë në gjendje të ekzekutohen pa pasur nevojë për kompajlim . Derisa të gjitha gjuhët e skriptimit janë gjuhë programimi, jo të gjitha gjuhët e programimit janë gjuhë skriptimi.  

Gjuhët e skriptimit përdorin një program të njohur si interpretues – përkthyes për të përkthyer urdhrat dhe që interpretohen drejtpërdrejt nga kodi burimor, duke mos kërkuar një hap kompjalimi . Nga ana tjetër, gjuhët e tjera të programimit, mund të kërkojnë që një kompajler të përkthejë urdhrat në kodin e makinës para se të ekzekutojë ato urdhra.       

Një gjuhë e interpretuar e programimit është një gjuhë e krijuar për të ekzekutuar kodin burimor direkt dhe pa nevojën e kompajlimit të një programi në instruksionet e gjuhën së makinës. Një interpretues do të ekzekutojë programin duke përkthyer deklaratat (statements) në një seri prej një ose më shumë nënrutinave përpara se t'i përkthejë ato përfundimisht në një gjuhë tjetër, siç është kodi i makinës.

Në gjuhët programuese të kompajluara, një program kompajlues përkthen kodin e shkruar prej një gjuhe programimi të nivelit të lartë në një gjuhë të nivelit më të ulët në mënyrë që programi të ekzekutohet. Programet C ose Java zakonisht duhet të kompajlohen së pari në mënyrë që të ekzekutohen. Dy kompajler të njohur janë Eclipse për Java dhe gcc për C dhe C++.

Skriptimi nga ana e serverit krahas skriptimit nga ana e klientit

Ekzistojnë dy lloje të gjuhëve të skriptimit: nga ana e serverit dhe nga ana e klientit. I vetmi ndryshim i rëndësishëm midis të dyve është se i pari kërkon një server për ta proceduar. 

Gjuhët e skriptimit nga ana e serverit ekzekutohen në një ueb server. Kur një klient dërgon një kërkesë, serveri përgjigjet duke i dërguar përmbajtjen përmes HTTP. Në të kundërt, gjuhët e skriptimit nga ana e klientit ekzekutohen në anën e klientit - në shfletuesin e tyre të internetit.

Përfitimi i skripteve nga ana e klientit është se ato mund të reduktojnë kërkesat në server, duke lejuar që ueb faqet të lexohen më shpejt. Ndërsa, një përfitim i rëndësishëm i skripteve nga ana e serverit është se ato nuk janë të dukshme nga publiku siç janë skriptet nga ana e klientit.

Kur vendosni se në cilën mënyrë t’ju qaseni një projekti, mbani në mend se skriptimi nga ana e klientit është më i fokusuar në ndërfaqen e përdoruesit (user interface) dhe funksionalitet. Në të kundërt, skriptimi nga ana e serverit fokusohet në procedim më të shpejtë, qasje në të dhëna dhe zgjidhjen e gabimeve.

Shembuj të gjuhëve të skriptimit nga ana e serverit

Më poshtë janë dhënë shembuj të gjuhëve të skriptimit nga ana e serverit. 

Shembuj të gjuhëve të skriptimit nga ana e klientit

Më poshtë janë shembuj të gjuhëve skriptuese nga ana e klientit.

Hyrje në JavaScript

Në këtë material mësimor do të mësoni se si të krijoni një ueb-faqe me JavaScript.

Këtu, ju do të mësoni se sa e lehtë është të shtoni ndërveprimin (ineraktivitet) në një ueb-faqe duke përdorur JavaScript. Por, para kësaj, duhet që të keni disa njohuri pune në HTML dhe CSS.

Shtimi i JavaScript në faqet tuaja të uebit

Zakonisht ekzistojnë tri mënyra për të shtuar JavaScript-in në një ueb-faqe:

• Vendosja e kodit JavaScript brenda në HTML në mes etiketave <script> dhe </script>.
• Krijimi i një fajlli të jashtëm JavaScript me ekstensionin .js dhe më pas të krijohet një lidhje përmes atributit src nga etiketa <script>.
• Vendosja e kodit JavaScript direkt brenda një etikete HTML duke përdorur atributet speciale të etiketave të tilla si onclick, onmouseover, onkeypress, onload, etj.

Vendosja e kodit JavaScript brenda në HTML

Ju mund ta vendosni kodin JavaScript direkt në ueb-faqet tuaja duke e vendosur atë në mes etiketave <script> dhe </script>. Etiketa <script> i tregon shfletuesit se udhëzimet që përmbahen duhet të të interpretohen si kod i ekzekutueshëm dhe jo HTML.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Vendosja e JavaScript-it</title>
</head>
<body>
   <script>
   var persh = "Përshëndetje Botë!";
   document.write(persh); // Shënohet: Përshëndetje Botë!
   </script>
</body>
</html>

Kodi JavaScript në shembullin e mësipërm thjesht shtyp një mesazh me tekst në ueb-faqe.

Thirrja e një fajlli të jashtëm JavaScript

Ju gjithashtu mund ta vendosni kodin tuaj JavaScript në një fajll të veçantë me ekstensionin .js, dhe pastaj thirrni atë fajll në dokumentin tuaj përmes atributit src të etiketës <script>, kësisoj:

<script src="js/main.js"></script>

Kjo është e dobishme nëse doni të njëjtin kod JavaScript të disponueshëm ta shfrytëzoni për shumë dokumente. Kjo ju kursen nga përsëritja e së njëjtës detyrë në secilën ueb-faqe, dhe e bën ueb-sajtin tuaj shumë të lehtë për tu mirëmbajtur.

// Një funksion që e shfaqë mesazhin
function thuajTung() {
    alert("Përshëndetje Botë!");
}
    
// Thirr funksionin duke klikuar në buton
document.getElementById("btn").onclick = thuajTung;

Tani, mund ta thërrisni këtë fajll të jashtëm JavaScript në ueb-faqe duke përdorur etiketën <script>, kësisoj:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Përfshirja e fajllit të jashtëm JavaScript</title>
</head>
<body>
    <button type="button" id="btn">Kliko</button>
    <script src="js/main.js"></script>
</body>
</html>

Vendosja e kodit JavaScript në linjë (inline)

Ju gjithashtu mund të vendosni kodin JavaScript brenda duke e futur atë direkt brenda një etikete HTML duke përdorur atributet speciale të etiketave të tilla si onclick, onmouseover, onkeypress, onload, etj.

Sidoqoftë, duhet të evitoni vendosjen e sasisë së madhe të kodit JavaScript inline, pasi rrëmon HTML-në tuaj me JavaScript dhe e bën të vështirë mirëmbajtjen e kodit tuaj JavaScript.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript inline</title>
</head>
<body>
    <button onclick="alert('Përshëndetje Botë!')">Kliko</button>
</body>
</html>

Shembulli i mësipërm do t'ju tregojë mesazhin “Përshëndetje Botë!” në një dritare pop-up alarmuese nëse klikojmë në buton.

Pozicionimi i kodit JavaScript brenda dokumentit HTML

Elementi <script> mund të vendoset në seksionin <head>, ose <body> të një dokumenti HTML. Por në mënyrë ideale, skriptet duhet të vendosen në fund të seksionit të body-it, pak para etiketës mbyllëse </body>, kjo do të bëjë që ueb-faqet tuaja të lexohen më shpejt, pasi parandalohen pengesat e inicimit fillestar të faqes.

Secila etiketë <script> bllokon procesin e paraqitjes së faqes derisa të ketë shkarkuar dhe ekzekutuar plotësisht kodin JavaScript, kështu që vendosja e tyre në seksionin e kokës (d.m.th. brenda elementit <head>) pa ndonjë arsye të vlefshme, do të ndikojë ndjeshëm në performancën e ueb-sajtit tuaj.

Diferenca në mes skriptimit nga ana e klientit dhe nga ana e serverit

Gjuhët e skriptimit nga ana e klientit (client-side) si JavaScript, VBScript, etj., interpretohen dhe ekzekutohen nga shfletuesi i internetit, ndërsa gjuhët e skriptimit në anën e serverit (server-side) si PHP, ASP, Java, Python, Ruby, etj., ekzekutohen në ueb-server dhe rezultatin e dërgojnë tek shfletuesi - klienti në formatin HTML.

Skriptimi nga ana e klientit ka shumë përparësi krahasuar me qasjen tradicionale të skriptimit nga ana e serverit. Për shembull, mund të përdorni JavaScript për të kontrolluar nëse përdoruesi ka futur të dhëna të pavlefshme në fushat e formës dhe të tregoni njoftime për gabime gjatë futjes së të dhënave në përputhje me rrethanat në kohë reale para se t’i dorëzoni formularin me shënime në ueb-serverin për vlerësimin përfundimtar të të dhënave dhe përpunimin e mëtejshëm, në mënyrë që të parandaloni përdorimet e panevojshme të brezit lëshues të rrjetit dhe shfrytëzimin e panevojshëm të resurseve të serverit.

Gjithashtu, përgjigja nga një skriptë nga ana e serverit është më e ngadaltë në krahasim me një skriptë nga ana e klientit, sepse skriptet nga ana e serverit procesohen në kompjuterin në largësi dhe jo në kompjuterin lokal të shfrytëzuesit.

Sintaksa e JavaScript-it

Sintaksa e JavaScript-it është tërësia e rregullave që përcaktojnë një program JavaScript të strukturuar siç duhet.

Një JavaScript konsiston prej udhëzimeve (statements) të JavaScript-it që vendosen brenda etiketave HTML <script> </script> në një ueb-faqe, ose brenda fajllit të jashtëm me ekstension .js.

Shembulli i mëposhtëm tregon se si duken udhëzimet në JavaScript:

var x = 5;
var y = 10;
var shuma = x + y;
document.write(shuma); // Shënohet vlera e variablës

Ndjeshmëria e shkronjave në JavaScript (Case Sensitivity)

JavaScript është i ndjeshëm në varësi a përdoren shkronjat e mëdha apo të vogla. Kjo do të thotë që variablat, fjalët kyçe të gjuhës, emërtimet e funksioneve dhe identifikuesit e tjerë duhet të shënohen gjithmonë me shkronja të mëdha apo të vogla dhe në mënyrë të njëjtë edhe të identifikohen më pas.

Për shembull, variabla myVar duhet të shënohet myVar jo MyVar ose myvar. Në mënyrë të ngjashme, emri i metodës getElementById() duhet të shënohet saktësisht, jo kësisoj getElementByID().

var myVar = "Përshëndetje Botë!";
console.log(myVar);
console.log(MyVar);
console.log(myvar);

Nëse hapni konsolën e shfletuesit duke shtypur tastin f12 në tastierë, do të shihni një rresht  kësisoj: "Uncaught ReferenceError: MyVar is not defined".

Komentet në JavaScript

Një koment është thjesht një linjë teksti që injorohet plotësisht nga interpretuesi JavaScript. Komentet zakonisht shtohen me qëllim të sigurimit të informacionit shtesë që ka të bëjë me kodin burimor. Kjo jo vetëm që do t'ju ndihmojë të kuptoni kodin tuaj kur kujdeseni pas një periudhë kohore por edhe të tjerët që punojnë me ju në të njëjtin projekt.

JavaScript mbështet komente me një rresht si dhe me shumë rreshta. Komentet në një rresht fillojnë me dy viza të pjerrëta përpara (//), e ndjekur nga teksti i komentit.

// Ky është programi im i parë në JavaScript
document.write("Përshëndetje Botë!");

Ndërsa, një koment në disa rreshta fillon me një vizë të pjerrtë dhe një yll (/*) dhe përfundon me një yll dhe një vizë të pjerrtë (*/).

/* Ky është programi im i parë
në JavaScript */
document.write("Përshëndetje Botë!");

Variablat

Variablat janë thelbësore për të gjitha gjuhët programuese. Variablat përdoren për të ruajtur të dhënat, si tekste, numra, etj. Të dhënat ose vlera e ruajtur në variabla mund të vendosen, përditësohet dhe të lexohet sa herë që të jetë e nevojshme. Në përgjithësi, variablat janë emra simbolikë për vlerat.

Mund të krijojmë një variabël me fjalën kyçe var, ndërsa operatori i barazimit (=) përdoret për t'i caktuar vlerë një variable, si kjo: var varEmri = vlera;

var emri = "Filan Fisteku";
var mosha = 17;
var eshteMartuar = false;

Në shembullin e mësipërm kemi krijuar tri variabla, të parës ju është caktuar një vlerë string (tekst), të dytës ju është caktuar një numër, ndërsa të fundit ju është caktuar një vlerë boolean. Pra, konsiderojmë se variablat mund të përmbajnë tipe të ndryshme të të dhënave.

Në JavaScript, variablat mund të deklarohen gjithashtu pa ju caktuar ndonjë vlerë fillestare. Kjo është e dobishme për variablat që supozohet të marrin vlera nga futja e të dhënave të shfrytëzuesve (inputs).

// Deklarimi i variblës
var emriPerdoruesit;
    
// Caktimi i vlerës
emriPerdoruesit = "Filan Fisteku";

Deklarimi i variablave të shumëfishta përnjëherë

Përveç deklarimit të variablave një nga një, ju gjithashtu mund të deklaroni shumë variabla dhe të vendosni vlerat e tyre fillestare në një urdhëresë të vetme. Çdo variabël ndahet me presje, siç demonstrohet në shembullin vijues:

// Deklarimi i variablave të shumëfishta
var emri = "Filan Fisteku", mosha = 17, eshteMartuar = false;
    
/* Deklarimi i gjatë mund të ndahet në disa
rreshta për të përmirësuar lexueshmërinë */
var emri = "Filan Fisteku",
mosha = 17,
eshteMartuar = false;

Fjalët kyçe let dhe const ES6

ES6 ofron dy fjalë kyçe të reja let dhe const për deklarimin e variablave.

Fjala kyçe const shërben saktësisht njësoj si let, përveç që variablave të deklaruara duke përdorur fjalën kyçe const nuk mund të ju ricaktohet vlera më vonë në kod.

// Deklarimi i variablave
let emri = "Filan Fisteku";
let mosha = 17;
let eshteNxenes = true;
    
// Deklarimi i konstantës
const PI = 3.14;
console.log(PI); // 3.14
    
// Tentim për t’ju ricaktu vlera
PI = 10; // gabim

Ndryshe nga var, që deklaron variablat e përcaktuar brenda funksionit (function-scoped variables), të dy fjalët kyçe let dhe const deklarojnë variabla, të përcaktuara brenda bllokut ({ }). Fushëveprimi i bllokut do të thotë që krijohet një fushë e re midis një palë kllapave të mëdha { }.

Konventat për emërtimet e variablave në JavaScript

Këto janë rregullat për emërtimin e një variable në JavaScript:

• Emri i variablës duhet të fillojë me një shkronjë, nënvizim (_), ose me shenjë dollari ($).
• Emri i variablës nuk mund të fillojë me një numër.
• Emri i variablës mund të përmbajë vetëm karaktere alfa-numerike (A-z, 0-9) dhe nënvizime.
• Emri i variablës nuk mund të përmbajë hapësira.
• Emri i variablës nuk mund të jetë një fjalë kyçe që i përkasin JavaScript-it ose një fjalë e rezervuar JavaScript.

Gjenerimi i rezultateve

Në cilin do rast kur shënoni kodin JavaScript, juve ju nevojitet të gjeneroni rezultate nga kodi juaj. Për shembull, ju mund të dëshironi të shihni vlerën e variablës, ose të shkruani një mesazh në konzolën e shfletuesit për t'ju ndihmuar të korrigjoni një problem në kodin tuaj JavaScript, etj.

Në JavaScript ka disa mënyra të ndryshme për të gjeneruar rezultatet, përfshirë rezultatet dalëse në dritaren e shfletuesit ose konsolën e shfletuesit, paraqitjen e rezultateve në dialog-dritare (pop-up), si dhe në ndonjë element HTML.

Rezultatet në konzolën e shfletuesit

Shumë lehtë mund të nxirrni një mesazh ose të shkruani të dhëna në konzolën e shfletuesit duke përdorur metodën console.log(). Kjo është një metodë e thjeshtë, por shumë e fuqishme për gjenerimin e rezultateve të detajuara.

// Shënimi i një tekst mesazhi të thjeshtë
console.log("Përshëndetje Botë!"); // Shënohet: Përshëndetje Botë!
    
// Vlerat e variablave 
var x = 10;
var y = 20;
var shuma = x + y;
console.log(shuma); // Shënohet: 30

Paraqitja e rezultateve në dritare Pop-Up

Gjithashtu mund të përdorni dialog-dritaren alert apo si njihet ndryshe dritare pop-up për të paraqitur mesazhe apo të dhëna tjera për shfrytëzuesit. Një dritare e tillë krijohet duke përdor metodën alert().

// Shfaqja e një tekst mesazhi të thjeshtë
alert("Përshëndetje Botë!"); // Rezultati: Përshëndetje Botë!
    
// Shfaqja e vlerës së variablës 
var x = 10;
var y = 20;
var shuma = x + y;
alert(shuma); // Rezultati: 30

Paraqitja e rezultateve në dritaren e shfletuesit

Metoda document.write() përdoret për tu paraqitur përmbajtja në dokumentin aktual vetëm derisa ai dokument të analizohet.

// Shtypja e një tekst mesazhi të thjeshtë
document.write("Përshëndetje Botë!"); // Shtypet: Përshëndetje Botë!
    
// Shtypja e vlerave të variablave 
var x = 10;
var y = 20;
var shuma = x + y;
document.write(shuma); // Shtypet: 30

Nëse përdorni metodën document.write() pasi faqja të jetë ngarkuar, ajo do të mbishkruaj të gjithë përmbajtjen ekzistuese në atë dokument.

<h1>Ky është një titull</h1>
<p>Ky është një paragraph me tekst.</p>
    
<button type="button" onclick="document.write('Përshëndetje Botë!')">Kliko</button>

Vendosja e rezultatit brenda një elementi HTML

Gjithashtu mund të shkruani ose futni rezultate brenda një elementi HTML duke përdor vetinë (property) innerHTML. Sidoqoftë, para se të shkruajmë daljen, së pari duhet të zgjedhim elementin duke përdorur një metodë të tillë si getElementById().

<p id="persh"></p>
<p id="rezul"></p>
    
<script>
    // Shënimi i tekstit brenda një elementi
    document.getElementById("persh").innerHTML = "Përshëndetje Botë!";
    
    // Shënimi i vlerave të variablave brenda një elementi
    var x = 10;
    var y = 20;
    var shuma = x + y;
    document.getElementById("rezul").innerHTML = shuma;
</script>

Tipet e të dhënave

Tipet e të dhënave në thelb specifikojnë se çfarë lloj i të dhënave mund të ruhen dhe të manipulohet brenda një programi.

Ekzistojnë gjashtë tipe themelore të të dhënave në JavaScript, të cilat mund të ndahen në tri kategori kryesore: primitive (ose primare - primary), të përbëra (ose referencë - reference) dhe tipe speciale të të dhënave. String, Number dhe Boolean janë lloje primitive të të dhënave. Object, Array dhe Function (të gjitha janë tipe të objekteve) janë tipe të të dhënave të përbëra. Ndërsa Undefined dhe Null janë tipe speciale të të dhënave.

Tipet primitive të të dhënave mund të përmbajnë vetëm një vlerë në të njëjtën kohë, ndërsa tipet e të dhënave të përbëra mund të përmbajnë koleksione vlerash dhe njësi më komplekse.

Tipi i të dhënave String

Tipi i të dhënave string përdoret për të përfaqësuar të dhënat tekstuale (d.m.th. sekuencat e karaktereve). Stringjet krijohen duke përdorur thonjëzat e vetme ose të dyfishta që rrethojnë një ose më shumë karaktere, siç tregohet më poshtë:

var a = 'Përshëndetje!'; // përdorimi i thonjëzave të njëfishta
var b = "Përshëndetje!"; // përdorimi i thonjëzave të dyfishta

Stringu mund të përmbajë thonjëza brenda vetes për sa kohë që ato nuk përputhen me thonjëzat që e krijojnë atë string.

var a = "Do t'i mësoj këto mësime."; // thonjëza të njëfishta brenda thonjëzave të dyfishta
var b = 'Ai tha "Tung!" dhe iku.'; // thonjëza të dyfishta brenda thonjëzave të njëfishta 
var c = 'Do t\'i mësoj këto mësime.'; // duke i ikur thonjëzave të njëfishta me vijë të pjerrtë

Tipi i të dhënave Number

Tipi i të dhënave number përdoret për të prezantuar numra pozitivë apo negativë me ose pa presje dhjetore, ose numra të shënuar duke përdorur shënimin eksponencial p.sh. 1.5e-4 (ekuivalent me 1.5x10^-4).

var a = 25;         // intexher – numër i plotë
var b = 80.5;       // numër me pike të lëvizshme
var c = 4.25e+6;    // shënimi eksponencial, njëjtë 4.25e6 ose 4250000
var d = 4.25e-6;    // shënimi eksponencial, njëjtë 0.00000425

Tipi i të dhënave Number përfshin gjithashtu disa vlera të veçanta të cilat janë: Infinity, -Infinity dhe NaN. Infinity paraqet pafundësi matematikore ∞, e cila është më e madhe se çdo numër. Pafundësia është rezultat i ndarjes së një numri jo zero me 0, siç demonstrohet më poshtë:

alert(16 / 0);  // Dalja: Infinity
alert(-16 / 0); // Dalja: -Infinity
alert(16 / -0); // Dalja: -Infinity

Ndërsa NaN përfaqëson një vlerë të veçantë Not-a-Number (jo numër). Kjo është rezultat i një veprimi matematikor të pavlefshëm ose të papërcaktuar, si llogaritja e rrënjës katrore të -1 ose pjesëtimi i 0 me 0, etj.

alert("Ndonjë tekst" / 2);      // Dalja: NaN
alert("Ndonjë tekst" / 2 + 10); // Dalja: NaN
alert(Math.sqrt(-1));           // Dalja: NaN

Tipi i të dhënave Boolean

Tipi i të dhënave Boolean përmban vetëm dy vlera: true ose false (e sakt ose e pasakt). Zakonisht përdoret për të ruajtur vlera si po (true) ose jo (false), e ndezur (true) ose e fikur (false), etj., siç demonstrohet më poshtë:

var poLexon = true;   // po, unë po lexoj
var poFlen = false;   // jo, unë nuk po flej

Vlerat Boolean gjithashtu vijnë si rezultat i krahasimeve në një program. Shembulli i mëposhtëm krahason dy variabla dhe tregon rezultatin në dialog-dritaren pop-up:

var a = 2, b = 5, c = 10;
alert(b > a) // Dalja: true
alert(b > c) // Dalja: false

Tipi i të dhënave Undefined

Tipi i të dhënave undefined mund të ketë vetëm një vlerë - vlerën speciale undefined (e padefinuar). Nëse një variabël është deklaruar, por nuk i është caktuar një vlerë, vlera e saj do të jetë undefined.

var a;
var b = "Përshëndetje Botë!"
     
alert(a) // Dalja: undefined
alert(b) // Dalja: Përshëndetje Botë!

Tipi i të dhënave Null

Ky është një tjetër tip i veçantë i të dhënave që mund të ketë vetëm një vlerë - vlerën null. Një vlerë null do të thotë se nuk ka vlerë. Nuk është ekuivalent me një string të zbraztë ("") ose 0, thjesht nuk është asgjë.

Një variabël mund të jetë e zbrazët në mënyrë të qartë nga përmbajtja e saj aktuale duke i caktuar asaj vlerën null.

var a = null;
alert(a); // Dalja: null
     
var b = "Përshëndetje Botë!"
alert(b); // Dalja: Përshëndetje Botë!
     
b = null;
alert(b) // Dalja: null

Tipi i të dhënave Object

Object (objekti) është një tip kompleks i të dhënave që ju lejon të ruani koleksione të të dhënave.

Një objekt përmban veti (properties), të definuara si një çift me vlerë kyçe. Një çelës i vetisë (emri) është gjithmonë një sring, por vlera mund të jetë çfarëdo tip i të dhënave, si string, number, boolean, ose tipe komplekse të të dhënave si array, function dhe objekte të tjera.

Shembulli i mëposhtëm do t'ju tregojë mënyrën më të thjeshtë për të krijuar një objekt në JavaScript.

var objektZbrazet = {};
var personi = {"emri": "Filan", "mbiemri": "Fisteku", "mosha": "17"};
     
// Për lexim më të mirë
var vetura = {
    "model": "BMW X3",
    "ngjyra": "bardhë",
    "dyer": 5
}

Mund t’i hiqni thonjëzat te emri i vetisë (property name) nëse emri i tillë është një emër i vlefshëm JavaScript. Kjo do të thotë që thonjëzat nevojiten përreth "emri-babait" por janë opsionale përreth emriBabait. Pra, objekti vetura në shembullin e mësipërm mund të shkruhet gjithashtu si:

var vetura = {
    model: "BMW X3",
    ngjyra: "white",
    dyer: 5
}

Tipi i të dhënave Array

Një varg (array) është një tip i objektit që përdoret për ruajtjen e vlerave të shumta në një variabël të vetme. Çdo vlerë (e quajtur gjithashtu një element) në një varg ka një pozicion numerik, i njohur si indeksi i tij, dhe mund të përmbajë të dhëna të çdo tipi – vlera numerike, stringje, vlera boolean, funksione, objekte, e gjithashtu edhe varg tjetër. Indeksi i vargut fillon nga 0, kështu që elementi i parë i vargut është arr[0] e jo arr[1].

Mënyra më e thjeshtë për të krijuar një varg është duke specifikuar elementet e vargut si një listë e ndarë me presje dhe e mbyllur nga kllapa të mesme.

var ngjyra = ["Kuqe", "Verdhë", "Kaltër", "Gjelbër"];
var qytete = ["Bujanoc", "Prishtinë", "Tiranë", "Shkup"];
     
alert(ngjyra[0]);   // Rezultati: Kuqe
alert(qytete[2]);   // Rezultati: Tiranë

Tipi i të dhënave Function

Funksioni është një objekt që mund të thirret e që ekzekuton një bllok kodi. Meqenëse funksionet janë objekte, kështu që është e mundur t'i caktoni atyre një variabël, siç tregohet në shembullin më poshtë:

var persh = function(){ 
    return "Përshëndetje Botë!"; 
}
 
// Kontrolloni tipin e variablës persh
alert(typeof persh)    // Dalja: function
alert(persh());        // Dalja: Përshëndetje Botë!

Në fakt, funksionet mund të përdoren në çdo vend, për çfarëdo vlere tjetër që mund të përdoret. Funksionet mund të ruhen në variabla, objekte dhe vargje. Funksionet mund të kalojnë si argumente në funksione tjera, si dhe funksionet mund të rikthehen nga funksionet. Merrni parasysh funksionin e mëposhtëm:

function krijoPersh(emri){
    return "Përshëndetje, " + emri;
}
function paraqitPersh(funkPersh, emriPerdoruesit){
    return funkPersh(emriPerdoruesit);
}
 
var rezultati = paraqitPersh(krijoPersh, "Agron");
alert(rezultati); // Dalja: Përshëndetje, Agron

Operatori typeof

Operatori typeof mund të përdoret për të identifikuar se çfarë tipi të të dhënave përmban një variabël ose operand. Mund të përdoret me ose pa kllapa ( typeof(x) ose typeof x).

Operatori typeof është veçanërisht i dobishëm në situatat kur duhet ndryshe t’i përpunoni vlerat e tipeve të ndryshme, por duhet të jeni shumë të kujdesshëm, sepse mund të prodhojë rezultat të papritur në disa raste, siç demonstrohet në shembullin vijues:

// Numra
typeof 15;  // Tipi: "number"
typeof 42.7;  // Tipi: "number"
typeof 2.5e-4;  // Tipi: "number"
typeof Infinity;  // Tipi: "number"
typeof NaN;  // Tipi: "number". Pavarësisht se është "jo-numër"
     
// Stringje
typeof '';  // Tipi: "string"
typeof 'hello';  // Tipi: "string"
typeof '12';  // Tipi: "string". Numri me thonjëza është string
     
// Boolean
typeof true;  // Tipi: "boolean"
typeof false;  // Tipi: "boolean"
     
// Undefined
typeof undefined;  // Tipi: "undefined"
typeof variabelPadeklaruar; // Tipi: "undefined"
     
// Null
typeof null;  // Tipi: "object"
     
// Objekte
typeof {emri: "Agon", mosha: 17};  // Tipi: "object"
     
// Vargje
typeof [1, 2, 4];  // Tipi: "object"
     
// Funksione
typeof function(){};  // Tipi: "function"

Siç mund ta shihni qartë në shembullin e mësipërm, kur testojmë vlerën null duke përdorur operatorin typeof, ai ktheu tipin e të dhënave "objekt" në vend të "null".

Ky është një gabim i kahershëm në JavaScript, por meqenëse shumë kode në internet shkruhen rreth kësaj sjelljeje dhe duke e rregulluar kështu do të krijonte shumë më tepër problem, kështu që ideja e rregullimit të kësaj çështjeje u refuzua nga komisioni që harton dhe mirëmban JavaScript.

Operatorët në JavaScript

Operatorët janë simbole ose fjalë kyçe që i thonë JavaScript-it të kryejë disa veprime. Për shembull, simboli i mbledhjes (+) është një operator që i thotë JavaScript-it të shtojë dy variabla ose vlera, ndërsa simbolet e barazimeve (==), më e mëdha se (>) ose më vogël se (<) janë operatorë që i thonë JavaScript-it të krahasojë dy variabla ose vlera, etj.

Operatorët aritmetikë

Operatorët aritmetikë përdoren për të kryer veprime të zakonshme aritmetike, të tilla si mbledhja, zbritja, shumëzimi etj. Më poshtë është paraqitur një listë e plotë e operatorëve aritmetikë në JavaScript:

Shembulli i mëposhtëm do t'ju tregojë këta operatorë aritmetikë në veprim:

var x = 10;
var y = 4;
alert(x + y); // Dalja: 14
alert(x - y); // Dalja: 6
alert(x * y); // Dalja: 40
alert(x / y); // Dalja: 2.5
alert(x % y); // Dalja: 2

Operatorët e caktimit

Operatorët e caktimit (assignment operators) përdoren për t’ju caktuar vlera variablave:

 Shembulli i mëposhtëm do t'ju tregojë në veprim këta operatorë të caktimit:

var x;    // Deklarimi i variablës
 
x = 10;
alert(x); // Dalja: 10
     
x = 20;
x += 30;
alert(x); // Dalja: 50
     
x = 50;
x -= 20;
alert(x); // Dalja: 30
     
x = 5;
x *= 25;
alert(x); // Dalja: 125
     
x = 50;
x /= 10;
alert(x); // Dalja: 5
     
x = 100;
x %= 15;
alert(x); // Dalja: 10

Operatorët e stringjeve

Ekzistojnë dy operatorë të cilët mund të përdoren gjithashtu tek stringjet.

Shembulli mëposhtëm do t'ju tregojë këta operatorë të stringjeve në veprim:

var str1 = "Përshëndetje";
var str2 = " Botë!";
     
alert(str1 + str2); // Dalja: Përshëndetje Botë!
     
str1 += str2;
alert(str1); // Dalja: Përshëndetje Botë!

Operatorët për rritje dhe zbritje

Operatorët e rritjes / zbritjes përdoren për të rritur / zvogëluar vlerën e një variable.

Shembulli i mëposhtëm do t'ju tregojë se si funksionojnë në të vërtetë operatorët e rritjes dhe zbritjes:

var x; // Deklarimi i variablës
 
x = 10;
alert(++x); // Dalja: 11
alert(x);   // Dalja: 11
     
x = 10;
alert(x++); // Dalja: 10
alert(x);   // Dalja: 11
     
x = 10;
alert(--x); // Dalja: 9
alert(x);   // Dalja: 9
     
x = 10;
alert(x--); // Dalja: 10
alert(x);   // Dalja: 9

Operatorët logjik

Operatorët logjikë zakonisht përdoren për të kombinuar pohimet e kushtëzuara.

Shembulli i mëposhtëm do t'ju tregojë se si funksionojnë në të vërtetë këta operatorë logjikë:

var viti = 2020;
 
// Vitet e brishtë plotëpjestohen me 400 ose me 4 por jo me 100
if((viti % 400 == 0) || ((viti % 100 != 0) && (viti % 4 == 0))){
    alert(viti + " është vit i brishtë.");
} else {
    alert(viti + " nuk është vit i brishtë.");
}

Operatorët e krahasimit

Operatorët e krahasimit përdoren për të krahasuar dy vlera Boolean.

Shembulli i mëposhtëm do t'ju tregojë këta operatorë krahasimi në veprim:

var x = 25;
var y = 35;
var z = "25";
     
alert(x == z);  // Rezultati: true
alert(x === z); // Rezultati: false
alert(x != y);  // Rezultati: true
alert(x !== z); // Rezultati: true
alert(x < y);   // Rezultati: true
alert(x > y);   // Rezultati: false
alert(x <= y);  // Rezultati: true
alert(x >= y);  // Rezultati: false

Ngjarjet (Eventet)

Një event është diçka që ndodh kur përdoruesi ndërvepron me ueb faqen, të tilla si: kur ai klikon në një link ose buton, fut tekst në një input boks ose në tekstarea, selekton në një boks të zgjedhur, shtyp një tast në tastierë, lëviz treguesin e mausit , paraqet një formë, etj. Në disa raste, vetë Shfletuesi mund të shkaktojë një event, të tilla si eventi i ngarkimit dhe shkarkimit të faqes.

Kur ndodh një event, mund të përdorni një mbajtës të eventeve JavaScript – event handler (ose një dëgjues eventesh – event listener) për t'i zbuluar ato dhe për të kryer detyra specifike ose grupe detyrash. Sipas konvencionit, emrat për mbajtësit e eventeve gjithmonë fillojnë me fjalën "on", kështu që një mbajtës i eventeve për klikim quhet onclick, në mënyrë të ngjashme një mbajtës i eventeve për ngarkimin e ueb faqes quhet onload, dhe kështu me radhë.

Ka disa mënyra për të caktuar një mbajtës të eventeve. Mënyra më e thjeshtë është t'i shtoni ato direkt në etiketën fillestare të elementeve HTML duke përdorur atributet speciale të mbajtësit të eventit. Për shembull, për të caktuar një mbajtës klikimi për një buton, mund të përdorim atributin onclick, kësisoj:

<button type="button" onclick="alert('Përshëndetje!')">Kliko</button>

Sidoqoftë, për të mbajtur JavaScript-in të ndarë nga HTML-ja, mund ta cilësoni mbajtësin e eventit në një fajll JavaScript të jashtëm ose ta cilësoni brenda etiketave <script> dhe <script>, kësisoj:

<button type="button" id="btn">Kliko</button>
<script>
    function persh() {
        alert('Përshëndetje!');
    }
    document.getElementById("btn").onclick = persh;
</script>

Në përgjithësi, eventet mund të kategorizohen në katër grupe kryesore – eventet e mausit, eventet e tastierës, eventet e formës dhe eventet e dokumentit / dritares. Ekzistojnë shumë evente tjera, për të cilët do të shohim kapitujt e mëvonshëm.

Eventet e mausit

Eventi i mausit shkaktohet kur përdoruesi klikon në një element, lëviz treguesin e mausit mbi një element, etj. Këtu janë disa nga eventet më të rëndësishme të mausit dhe mbajtësi i eventeve të tyre.

Eventi i klikimit (onclick)

Eventi i klikimit ndodh kur përdoruesi klikon në një element në ueb faqe. Shpeshherë, këto janë elemente të formës dhe linqe. Mund të trajtoni një event klikimi me një mbajtës të eventeve onclick.

<button type="button" onclick="alert('Klikuat në buton!');">Kliko</button>
<a href="#" onclick="alert('Klikuat linkun!');">Linku</a>

Eventi i menysë së kontekstit (oncontextmenu)

Eventi i menysë së kontekstit ndodh kur një përdorues klikon butonin e djathtë të mausit mbi një element për të hapur një menu konteksti. Ju mund të trajtoni një event të menysë së kontekstit me një mbajtës të eventeve oncontextmenu.

<button type="button" oncontextmenu="alert('Klikuat me të djathtën e mausit në buton!');">Kliko me të djathtë</button>
<a href="#" oncontextmenu="alert('Klikuat me të djathtën e mausit në link!');">Kliko me të djathtë</a>

Eventi Maus-Over (onmouseover)

Eventi i maus-over ndodh kur një përdorues lëviz treguesin e mausit mbi një element.

Ju mund ta trajtoni eventin maus-over me mbajtësin e eventit onmouseover.

<button type="button" onmouseover="alert('Kaluat me maus mbi këtë buton!');">Kalo me maus</button>
<a href="#" onmouseover="alert('Kaluat me maus mbi këtë link!');">Kalo me maus</a>

Eventi Maus-Out (onmouseout)

Eventi maus-out ndodh kur përdoruesi lëviz treguesin e mausit jashtë një elementi.

Mund ta trajtoni këtë event me mbajtësin e eventit onmouseout. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi kur ndodh eventi i maus-out.

<button type="button" onmouseout="alert('Lëvizët me muas jashtë këtij butoni!');">Vendosni mausin brenda meje dhe lëvizni jashtë</button>
<a href="#" onmouseout="alert('Lëvizët me muas jashtë këtij linku!');">Vendosni mausin brenda meje dhe lëvizni jashtë</a>

Eventet e tastierës

Një event në tastierë aktivizohet kur përdoruesi shtyp ose lëshon një buton në tastierë. Këtu janë disa evente më të rëndësishme të tastierës si dhe mbajtësit i tyre.

Eventi Keydown (onkeydown)

Eventi keydown ndodh kur përdoruesi shtyp një buton në tastierë.

Mund ta trajtoni eventin e këtillë me mbajtësin e eventit onkeydown. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi kur ndodh eventi keydown.

<input type="text" onkeydown="alert('Shtypët një tast brenda tekst-inputit!')">
<textarea onkeydown="alert('Shtypët një tast brenda fushës tekstuale!')"></textarea>

Eventi Keyup (onkeyup)

Eventi keyup ndodh kur përdoruesi lëshon një tast nga tastiera.

Mund ta trajtoni këtë event me mbajtësin e eventit onkeyup. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi kur ndodh eventi keyup.

<input type="text" onkeyup="alert('Lëshuat tastin brenda tekst-inputit!')">
<textarea onkeyup="alert('Lëshuat një tast brenda fushës tekstuale!')"></textarea>

Eventi Keypress (onkeypress)

Eventi i shtypjes së tasteve - keypress ndodh kur një përdorues shtyp një tast në tastierë e që ka një vlerë të karakterit që shtypet. Për shembull, tastet si Ctrl, Shift, Alt, Esc, shigjetat, etj. nuk do të gjenerojnë një event kur shtypen, por do të gjenerojnë një event keydown dhe keyup.

Mund ta trajtoni eventin keypress me mbajtësin e eventit onkeypress. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi kur ndodh eventi keypress.

<input type="text" onkeypress="alert('Shtypët një tast brenda tekst-inputit!')">
<textarea onkeypress="alert('Shtypët një tast brenda fushës tekstuale!')"></textarea>

Eventet e formës

Një event i formës aktivizohet kur një kontroll i formës merr ose humb fokusin apo kur përdoruesi modifikon një vlerë të kontrollit të formës, të tillë si shënimi i tekstit në një input-tekstual, zgjedhja e ndonjë opsioni në një kutinë selektuese, etj. Këtu janë disa nga eventet më të rëndësishme të formës dhe mbajtësi i eventeve të tyre.

Eventi i fokusit (onfocus)

Eventi i fokusit ndodh kur përdoruesi i jep fokus një elementi në një ueb faqe.

Mund ta trajtoni eventin e fokusit me mbajtësin e eventit onfocus. Shembulli i mëposhtëm do të nxjerrë në pah sfondin e futjes së tekstit me ngjyrë të verdhë kur fokusohet.

<script>
    function theksoInputin(elm) {
        elm.style.background = "yellow";
    }
</script>
<input type="text" onfocus="theksoInputin(this)">
<button type="button">Butoni</button>

Eventi Blur (onblur)

Eventi blur ndodh kur përdoruesi heq fokusin nga një element i formës apo një dritare.

Mund ta trajtoni eventin e këtillët me mbajtësin e eventit onblur. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi kur elementi tekst-input humb fokusin.

<input type="text" onblur="alert('Tekst-inputi humb fokusin!')">
<button type="button">Paraqit</button>

Për ta larguar fokusin nga një element i formës, së pari klikoni brenda tij, pastaj shtypni tastin tab në tastierë, pra, jepni fokusin në diçka tjetër, ose klikoni me maus jashtë atij elementi.

Eventi i ndryshimit (onchange)

Eventi i ndryshimit ndodh kur një përdorues ndryshon vlerën e një elementi të formës.

Mund ta trajtoni eventin e ndryshimit me mbajtësin e eventit onchange. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi kur ndryshoni opsionin në kutinë selektuese.

<select onchange="alert('Ndryshuat zgjedhjen!');">
    <option>Zgjidh</option>
    <option>Mashkull</option>
    <option>Femër</option>
</select>

Eventi i dorëzimit (onsubmit)

Eventi i dorëzimit ndodh vetëm kur përdoruesi paraqet një formë në një ueb faqe.

Mund ta trajtoni eventin e dorëzimit me mbajtësin e eventit onsubmit. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi kur dorëzoni formularin në server.

<form action="action.php" method="post" onsubmit="alert('Të dhënat nga formulari do të dorëzohen në server!');">
    <label>Emri:</label>
    <input type="text" name="emri" required>
    <input type="submit" value="Paraqit">
</form>

Eventet e Document/Windows

Eventet iniciohen gjithashtu në situata kur faqja është ngarkuar ose kur përdoruesi ndryshon përmasat e dritares së shfletuesit, etj. Këtu janë disa nga eventet më të rëndësishme të document/ window dhe mbajtësi i eventeve të tyre.

Eventi i ngarkesës (onload)

Eventi i ngarkesës ndodh kur një ueb faqe ka përfunduar ngarkimin e përmbajtjes në shfletues.

Mund ta trajtoni eventin e ngarkesës me mbajtësin e eventit onload. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi sapo faqja të mbarojë së ngarkuari.

<body onload="window.alert('Faqja u ngarkua me sukses!');">
    <h1>Ky është një titull</h1>
    <p>Ky është një tekst në paragraf.</p>
</body>

Eventi i shkarkesës (onunload)

Eventi i shkarkesës ndodh kur një përdorues largohet nga ueb faqja aktuale.

Mund ta trajtoni eventin e shkarkesës me mbajtësin e eventit onunload. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi kur tentoni të largoheni nga faqja.

<body onunload="alert('A jeni i sigurt se dëshironi të dilni nga faqja?');">
    <h1>Ky është një titull </h1>
    <p>Ky është një tekst në paragraf.</p>
</body>

Eventi i ndryshimit të përmasave (onresize)

Eventi i ndryshimit të përmasës ndodh kur një përdorues ndryshon përmasat e dritares së shfletuesit. Eventi i ndryshimit të përmasave ndodh gjithashtu në situata kur dritarja e shfletuesit minimizohet ose maksimizohet.

Mund ta trajtoni eventin e ndryshimit të përmasave me mbajtësin e eventit onresize. Shembulli i mëposhtëm do t'ju tregojë një mesazh alarmi kur ndryshoni përmasat e dritares së shfletuesit në gjerësi dhe lartësi të re.

<p id="rezultati"></p>
<script>
    function displayWindowSize() {
        var w = window.outerWidth;
        var h = window.outerHeight;
        var tekst = "Përmasa e dritares: gjerësia = " + w + ", lartësia = " + h;
        document.getElementById("rezultati").innerHTML = tekst;
    }
    window.onresize = displayWindowSize;
</script>

Stringjet

Një string është një varg i shkronjave, numrave, karaktereve speciale dhe vlerave aritmetike ose kombinimi i të gjithave. Stringjet mund të krijohen duke mbyllur vargun fjalë për fjalë (d.m.th. karakteret e vargut) ose brenda thonjëzave të njëfishta (') ose thonjëzave të dyfishta ("), siç tregohet në shembullin më poshtë:

var str1 = 'Përshëndetje Botë!'; // Stringu me thonjëza të njëfishta
var str2 = "Përshëndetje Botë!"; // Stringu me thonjëza të dyfishta

Mund t’i përdorni thonjëzat brenda stringut deri sa nuk janë të njëjta me thonjëzat që e rrethojnë atë string:

var str1 = "Do t'i nis punimet.";
var str2 = 'Ai tha "Mirupafshim!"';
var str3 = "Ajo u përgjigj 'Qetësohu, të lutem!'";
var str4 = 'Tungjatjeta!"; // Gabim në sintaksë – thonjëzat duhet të përputhen

Megjithatë, përsëri mund të përdorni thonjëza të njëfishta brenda një stringu që ndërtohet nga thonjëzat e njëfishta ose thonjëza të dyfishta brenda stringut të ndërtuar nga thonjëzat e dyfishta duke vendosur përpara një karakter prapavijë (backslash - \) , kësisoj:

var str1 = 'Do t\'i nis punimet.';
var str2 = "Ai tha \"Mirupafshim!\"";
var str3 = 'Ajo u përgjigj \'Qetësohu, të lutem!\'';

Beksllesh – ang.Backslash (\) quhet karakter escape, ndërsa \' dhe \" që kemi përdorur në shembullin e mësipërm quhen sekuenca escape.

Sekuencat Escape

Sekuencat escape janë gjithashtu të dobishme për situatat kur dëshironi të përdorni karaktere që nuk mund të shtypen duke përdorur tastierën. Këtu janë disa sekuenca tjera më të përdorura:

• \n – zëvendësohet nga karakteri i linjës së re
• \t – zëvendësohet nga karakteri tab
• \r – zëvendësohet nga karakteri carriage-return
• \b – zëvendësohet nga karakteri backspace
• \\ – zëvendësohet nga një beksllesh i vetëm (\)

Ja një shembull për të sqaruar se si funksionojnë në të vërtetë sekuencat escape:

var str1 = "JavaScript është \n gjuhë programuese.";
document.write("<pre>" + str1 + "</pre>"); // Krijimi i linjës së re
     
var str2 = "C:\Users\Downloads";
document.write(str2); // Shtyp C:UsersDownloads
     
var str3 = "C:\\Users\\Downloads";
document.write(str3); // Shtyp C:\Users\Downloads

Kryerja e operacioneve tek stringjet

JavaScript ofron disa veti dhe metoda për të kryer veprime në vlerat e stringut. Teknikisht, vetëm objektet mund të kenë veti dhe metoda. Por në JavaScript, tipet e të dhënave primitive mund të veprojnë si objekte kur ju referoheni atyre përmes vetisë me qasje të notacionit – ang. property access notation (dmth. shënimi me pikë).

JavaScript e bënë të mundur duke krijuar një objekt të përkohshëm mbështjellës për tipet primitive të të dhënave. Ky proces bëhet automatikisht nga interpretuesi JavaScript në sfond.

Marrja e gjatësisë të një stringu

Vetia e gjatësisë (length) kthen gjatësinë e stringut, e që është numri i karaktereve që përmbahen në string. Kjo përfshin gjithashtu numrin e karaktereve special, të tillë si \t ose \n.

var str1 = "Ky është një paragraf i tekstit.";
document.write(str1.length); // Shtyp 32
     
var str2 = "Ky është një \n paragraf i tekstit.";
document.write(str2.length); // Shtyp 34, sepse \n është vetëm një karakter

Gjetja e një stringu brenda një stringu tjetër

Mund të përdorni metodën indexOf() për të gjetur një substring ose një string brenda një stringu tjetër. Kjo metodë kthen indeksin ose pozicionin e termit të parë të një stringu të specifikuar brenda një stringu.

var str = "Nëse faktet nuk i përshtaten teorisë, ndryshoni faktet.";
var pos = str.indexOf("faktet");
alert(pos); // Dalja: 5

Në mënyrë të ngjashme, mund të përdorni metodën lastIndexOf() për të marrë indeksin ose pozicionin e stringut së fundit të specifikuar brenda një stringu, kësisoj:

var str = "Nëse faktet nuk i përshtaten teorisë, ndryshoni faktet.";
var pos = str.lastIndexOf("faktet");
alert(pos); // Dalja: 48

Të dy metodat indexOf() dhe lastIndexOf() e kthejnë vlerën -1 nëse nuk gjendet substringu. Të dy metodat gjithashtu pranojnë një parametër opsional intexher, e që specifikon pozicionin brenda stringut në të cilin do të fillojë kërkimi. Ja një shembull:

var str = "Nëse faktet nuk i përshtaten teorisë, ndryshoni faktet.";
 
// Kërkimi përpara
var pos1 = str.indexOf("faktet", 20);
alert(pos1); // Dalja: 48
     
// Kërkimi prapa
var pos2 = str.lastIndexOf("faktet", 20);
alert(pos2); // Dalja: 5

Kërkimi i një modeli brenda një stringu

Mund të përdorni metodën search() për të kërkuar një pjesë të veçantë të tekstit ose modelit brenda një stringu.

Ashtu sikur metoda indexOf(), edhe metoda search() gjithashtu kthen indeksin e përputhjes së parë, dhe kthen -1 nëse nuk gjendet ndonjë element që përputhet, por ndryshe nga metoda indexOf() kjo metodë gjithashtu mund të marrë një shprehje të rregullt (regular expression) si argument të saj për të siguruar aftësitë e avancuara të kërkimit.

var str = "Ngjyra e kuqe është më e ngrohtë se ngjyra e kaltër.";
 
// Kërkim i ndjeshëm ndaj madhësisë së shkronjave
var pos1 = str.search("ngjyra");
alert(pos1); // Dalja: 36
     
// Kërkim jo i ndjeshëm ndaj shkronjave duke përdorur regexp
var pos2 = str.search(/ngjyra/i);
alert(pos2); // Dalja: 0

Nxjerrja e një nënstringu nga një string

Mund të përdorni metodën slice() për të nxjerrë një pjesë ose substring nga një string.

Kjo metodë përdor 2 parametra: indeksi i fillimit (indeksi nga i cili do të fillojë nxjerrja), dhe një indeks opsional përfundimtar (indeksi para të cilit do të përfundojë nxjerrja), si p.sh. str.slice(indFill, indPer).

Shembulli i mëposhtëm do të nxjerrë një pjesë të vargut nga pozicioni 13 deri në pozicionin 32:

var str = "Njeriu është produkt i mendimeve të tij.";
var subStr = str.slice(13, 32);
document.write(subStr); // Shtypja: produkt i mendimeve

Gjithashtu mund të përdorni metodën substring() për të nxjerrë një pjesë të stringut të dhënë të bazuar në indekset e fillimit dhe të fundit, si str.substring(indFill, indPer). Metoda substring() është shumë e ngjashme me metodën slice(), përveç disa dallimeve:

• Nëse cilido argument është më i vogël se 0 ose është NaN, ai konsiderohet si 0.
• Nëse cilido argument është më i madh se gjatësia e stringut (str.length), ai konsiderohet sikur të ishte i barabartë me gjatësinë e stringut.
• Nëse indFill është më i madh se indPer, atëherë substring() do t'i ndërrojë këto dy argumente; për shembull, substring(5, 0) == str.substring(0, 5).

Shembulli i mëposhtëm do t'ju tregojë se si funksionon kjo metodë:

var str = "Njeriu është produkt i mendimeve të tij.";
document.write(str.substring(13, 32)); // Shtypja: produkt i mendimeve
document.write(str.substring(5, 0)); // Shtypja: Njeriu
document.write(str.substring(-27, -20)); // Nuk shtyp asgjë
document.write(str.substring(23)); // Shtypja: mendimeve të tij.

Nxjerrja e një numri fiks të karaktereve nga një string

JavaScript gjithashtu ofron metodën substr() e cila është e ngjashme me slice() por me një ndryshim të lehtë, parametri i dytë specifikon numrin e karaktereve për të nxjerrë në vend të indeksit përfundimtar, si str.substr(indFill, gjatesia). Nëse gjatësia është 0 apo një numër negativ, do të kthehet një string i zbraztë. Shembulli i mëposhtëm demonstron se si funksionon kjo metodë:

var str = "Njeriu është produkt i mendimeve të tij.";
document.write(str.substr(13, 32)); // Shtypja: produkt i mendimeve
document.write(str.substr(-27, -20)); // Nuk shtyp asgjë
document.write(str.substr(-27, 7)); // Shtypja: produkt
document.write(str.substr(23)); // Shtypja: mendimeve të tij.

Zëvendësimi i përmbajtjes së një stringu

Mund të përdorni metodën replace() për të zëvendësuar një pjesë të një vargu me një varg tjetër. Kjo metodë merr dy parametra, një shprehje të rregullt (regular expression – regexp) për tu përputhur ose një substring për të zëvendësuar me një string zëvendësues, kësisoj str.replace(regexp | substr, substrRi).

Kjo metodë replace() kthen një string të ri, nuk ndikon në stringun origjinal që do të mbetet i pandryshuar. Shembulli i mëposhtëm do t'ju tregojë se si funksionon:

var str = "Ngjyra e kuqe është më e ngrohtë se ngjyra e kaltër.";
var rezultati = str.replace("ngjyra", "piktura");
alert(rezultati); // Dalja: Ngjyra e kuqe është më e ngrohtë se piktura e kaltër.

Si parazgjedhje, metoda replace() zëvendëson vetëm përputhjen e parë, dhe është e ndjeshme ndaj shkronjave. Për të zëvendësuar substringun brenda një stringu në një mënyrë të pandjeshme ndaj shkronjave, mund të përdorni një shprehje të rregullt – regular expression (regexp) me një modifikues i, siç tregohet në shembullin më poshtë:

var str = "Ngjyra e kuqe është më e ngrohtë se ngjyra e kaltër.";
var rezultati = str.replace(/ngjyra/i, "piktura");
alert(rezultati); // Dalja: piktura e kuqe është më e ngrohtë se ngjyra e kaltër.

Në mënyrë të ngjashme, për të zëvendësuar të gjitha shprehjet e një substringu brenda një stringu në mënyrë të pandjeshme ndaj shkronjave, mund të përdorni modifikuesin g së bashku me modifikuesin i, kësisoj:

var str = "Ngjyra e kuqe është më e ngrohtë se ngjyra e kaltër.";
var rezultati = str.replace(/ngjyra/ig, "piktura");
alert(rezultati); // Dalja: piktura e kuqe është më e ngrohtë se piktura e kaltër.

Shndërrimi i një stringu në shkronja të mëdha ose të vogla

Mund të përdorni metodën toUpperCase() për të shndërruar një string në shkronja të mëdha.

var str = "Përshëndetje Botë!";
var rezultati = str.toUpperCase();
document.write(rezultati); // Shtypja: PËRSHËNDETJE BOTË!

Ngjashëm, mund të përdorni toLowerCase() për të shndërruar një string në shkronja të vogla.

var str = "Përshëndetje Botë!";
var rezultati = str.toLowerCase();
document.write(rezultati); // Shtypja: përshëndetje botë!

Bashkimi i dy ose më shumë stringjeve

Mund të bashkoni ose kombinoni dy ose më shumë stringje duke përdorur operatorët e caktimit + dhe +=.

var persh = "Përshëndetje";
var bote = "Botë";
var str = persh + " " + bote;
document.write(str); // Shtypja: Përshëndetje Botë
     
var urim  = "Urime";
    urim += " Viti i Ri";
document.write(urim); // Shtypja: Urime Viti i Ri

JavaScript gjithashtu ofron metodën concat() për të kombinuar stringjet, por nuk rekomandohet.

Qasja në karakteret individuale nga një string

Mund të përdorni metodën charAt() për t’u qasë në karaktere individuale në një string, kësisoj str.charAt(indeksi). Indeksi i specifikuar duhet të jetë një numër i plotë ndërmjet 0 dhe str.length - 1. Nëse nuk sigurohet asnjë indeks, atëherë do të kthehet karakteri i parë nga stringu, pasi që parazgjedhja është 0.

var str = "Përshëndetje Botë!";
document.write(str.charAt());  // Shtypja: P
document.write(str.charAt(13)); // Shtypja: B
document.write(str.charAt(20)); // Shtypja: asgjë
document.write(str.charAt(str.length - 1)); // Shtypja: !

Ekziston edhe një mënyrë më e mirë për ta bërë këtë. Meqenëse ECMAScript 5, stringjet mund t’i trajtoj si vargje vetëm për lexim (read-only arrays), andaj mund t’ju qaseni karaktereve individuale nga një string duke përdorur kllapa të mesme ([]) në vend të metodës charAt(), siç demonstrohet në shembullin vijues:

var str = "Përshëndetje Botë!";
document.write(str[0]);  // Shtypja: P
document.write(str[13]); // Shtypja: B
document.write(str[str.length - 1]); // Shtypja: !
document.write(str[20]); // Shtypja: undefined

Ndarja e stringut në varg

Metoda split() mund të përdoret për të ndarë një string në një varg stringjesh, duke përdorur sintaksën str.split(ndaresi, limiti). Argumenti i ndarësit specifikon stringun në të cilin duhet të ndodhë secila ndarje, ndërsa argumenti limit përcakton gjatësinë maksimale të vargut.

Nëse argumenti i ndarësit hiqet ose nuk gjendet në stringun e dhënë, i gjithë stringu i caktohet elementit të parë të vargut. Shembulli i mëposhtëm tregon se si funksionon:

var strFruta = "Mollë, Banane, Mango, Dardhë, Pjeshkë";
var vargFruta = strFruta.split(", ");
document.write(vargFruta[0]); // Shtypja: Mollë
document.write(vargFruta[2]); // Shtypja: Mango
document.write(vargFruta[vargFruta.length - 1]); // Shtypja: Pjeshkë
     
// Unaza që krijohet për të gjithë elementet e vargut të frutave 
for(var i in vargFruta) {  
    document.write("<p>" + vargFruta[i] + "</p>");
}

Për të ndarë një string në një varg karakteresh, specifikoni një string bosh ("") si ndarës.

var str = "JAVASCRIPT";
var strArr = str.split("");
document.write(strArr[0]); // Shtypja: J
document.write(strArr[1]); // Shtypja: A
document.write(strArr[strArr.length - 1]); // Shtypja: T
     
// Unaza e krijuar për të gjithë elementet e vargut të karaktereve
for(var i in strArr) {  
    document.write("<br>" + strArr[i]);
}

Numrat

JavaScript mbështet numrat e plotë (integer) poashtu edhe ato me pikë lëvizëse (floating-points) që mund të paraqiten në shënime decimale, heksadecimale ose oktale. Ndryshe nga gjuhët e tjera programuese, JavaScript nuk i trajton ndryshe numrat e plotë dhe numrat me pikë lëvizëse. Të gjithë numrat në JavaScript përfaqësohen si numra me pikë lëvizëse.

var x = 2;  // numër i plotë
var y = 3.14;  // numër me pikë lëvizëse
var z = 0xff;  // numër heksadecimal

Numrat shumë të mëdhenj mund të paraqiten në shënimin eksponencial, p.sh. 6.02e+23 (njëjtë sikur 6.02x10²³).

var x = 1.57e4;   // njëjtë si 15700
var y = 4.25e+6;  // njëjtë si 4.25e6 ose 4250000
var z = 4.25e-6;  // njëjtë si 0.00000425

Numrat gjithashtu mund të paraqiten me simbolet heksadecimale (baza 16). Numrat heksadecimal janë me parashtresë 0x. Ata përdoren zakonisht për të paraqitur ngjyrat.

var x = 0xff;  // njëjtë si 255
var y = 0xb4;  // njëjtë si 180
var z = 0x00;  // njëjtë si 0

Operacionet në numra dhe stringje

Siç keni mësuar më parë, operatori + përdoret si për mbledhjen ashtu edhe për bashkim të stringjeve. Pra, kryerja e veprimeve matematikore në numra dhe stringje mund të gjeneroj rezultate interesante. Shembulli i mëposhtëm do t'ju tregojë se çfarë ndodh kur mblidhni numra dhe stringje:

var x = 10;
var y = 20;
var z = "30";
    
// Mbledhja e dy numrave, rezultati do të jetë shuma e numrave
console.log(x + y); // 30
    
// Mbledhja e dy stringjeve, rezultati do të jetë bashkimi i stringjeve
console.log(z + z); // '3030'
    
// Mbledhja e numrit me string, rezultati do të jetë bashkimi i tyre
console.log(x + z); // '1030'
    
// Mbledhja e stringut me numër, rezultati do të jetë bashkimi i tyre
console.log(z + x); // '3010'
    
// Mbledhja e stringjeve me numra, rezultati do të jetë bashkimi i sringjeve
console.log("Rezultati është: " + x + y); // 'Rezultati është: 1020'
    
// Mbledhja e numrave me strigje, kalkulimi kryhet nga e majta në të djathtë
console.log(x + y + z); // '3030'

Nëse vëzhgoni me kujdes shembullin e mësipërm, do të shihni se rezultati i operacionit të fundit nuk është thjesht një bashkim i stringut, pasi operatorët me të njëjtin prioritet vlerësohen nga e majta në të djathtë. Kjo është arsyeja pse variablat x dhe y që të dy janë numra, së pari mblidhen mes vete, atëherë rezultati bashkohet me variablën z që është një string, me këtë fitojmë rezultatin përfundimtar 30 + "30" = "3030".

Por, nëse kryeni operacione tjera matematikore si shumëzimi, pjesëtimi ose zbritja, rezultati do të jetë ndryshe. JavaScript automatikisht do t’i shndërrojë stringjet numerike (d.m.th. stringjet që përmbajnë vlera numerike) në numra për të gjitha operacionet numerike.

var x = 10;
var y = 20;
var z = "30";
    
// Zbritja e numrit nga numri
console.log(y - x); // 10
    
// Zbritja e numrit nga stringu numerik
console.log(z - x); // 20
    
// Shumëzimi i numrit me stringun numerik
console.log(x * z); // 300
    
// Pjesëtimi i numrit me stringun numerik
console.log(z / x); // 3

Për më tepër, nëse tentoni të shumëzoni ose të pjesëtoni numra me stringje që nuk janë numerike, rezultati do të jetë NaN (Not a Number – Jo numër). Gjithashtu, nëse përdorni NaN në një operacion matematikor, rezultati do të jetë gjithashtu NaN.

var x = 10;
var y = "str";
var z = NaN;
    
// Zbritja e numrit prej stringut jonumerik
console.log(y - x); // NaN
    
// Shumëzimi i numrit me stringun jonumerik
console.log(x * y); // NaN
    
// Pjesëtimi i numrit me stringun jonumerik
console.log(x / y); // NaN
    
// Mbledhja e Nan me numër 
console.log(x + z); // NaN
                            
// Mbledhja e NaN me string 
console.log(y + z); // strNaN

Paraqitja e pafundësinë (Infinity)

Pafundësia përfaqëson një numër shumë të madh për ta trajtuar JavaScript. JavaScript ka fjalët kyçe speciale Infinity dhe –Infinity për të paraqitur pafundësinë pozitive dhe negative, respektivisht. Për shembull, pjesëtimi me 0 jep rezultatin Infinity, siç demonstrohet më poshtë:

var x = 5 / 0;
console.log(x); // Infinity
    
var y = -5 / 0;
console.log(y); // -Infinity

Shmangia e problemeve me saktësinë

Ndonjëherë, operacionet në numrat me pikë lëvizëse prodhojnë rezultate të papritura, siç tregohet këtu:

var x = 0.1 + 0.2;
console.log(x) // 0.30000000000000004

Siç mund ta shihni, rezultati është 0.3000000000000000004 e jo 0.3 siç duhet të ishte. Ky dallim quhet gabim i paraqitjes (error representation) ose gabim i përafrimit ( roundoff error). Kjo ndodh sepse JavaScript dhe shumë gjuhë të tjera programuese përdorin formën binare (baza 2) për të paraqitur numrat decimal (baza 10) për brenda. Për fat të keq, shumica e fraksioneve decimale nuk mund të përfaqësohen saktësisht në formë binare, kështu që ndodhin këto dallime të vogla.

Për të shmangur këtë problem mund të përdorni këtë zgjidhje:

var x = (0.1 * 10 + 0.2 * 10) / 10;
console.log(x) // 0.3

JavaScript i rrumbullakon në 17 shifra numrat me pikë të lëvizshme, që është mjaft saktë për shumicën e rasteve. Gjithashtu, numrat e plotë (numrat pa fraksione ose shënime eksponenciale) janë të saktë deri në 15 shifra, siç demonstrohet në shembullin vijues:

var x = 999999999999999;
console.log(x); // 999999999999999
    
var y = 9999999999999999;
console.log(y); // 10000000000000000

Kryerja e operacioneve me numra

JavaScript ofron disa veti dhe metoda për të kryer veprime me numra. Siç e dini tashmë nga kaptinat e mëparshme, tipet primitive të të dhënave në JavaScript mund të veprojnë si objekte kur u referoheni atyre me të ashtuquajtur property access notation (d.m.th. shënimi me pikë - dot notation).

Në seksionet vijuese, do të shohim metodat e numrave që përdoren më shpesh.

Nxjerrja e numrave të plotë nga stringjet

Metoda parseInt() mund të përdoret për të nxjerr një numër të plotë nga një string. Kjo metodë është veçanërisht e dobishme në situata kur keni të bëni me vlera, siç janë njësitë në CSS p.sh. 50px, 12pt, etj. dhe dëshironi të nxirrni vlerën numerike prej saj.

Nëse metoda parseInt() has në një karakter që nuk është numerik në bazën e specifikuar, ajo ndalon nxjerrjen dhe kthen vlerën e plotë të analizuar deri në atë pikë. Nëse karakteri i parë nuk mund të shndërrohet në një numër, metoda do të kthejë NaN (jo numër).

console.log(parseInt("3.14"));  // 3
console.log(parseInt("50px"));  // 50
console.log(parseInt("12pt"));  // 12
console.log(parseInt("0xFF", 16));  // 255
console.log(parseInt("20 vite"));  // 20
console.log(parseInt("Viti 2048"));  // NaN
console.log(parseInt("10 12 2020"));  // 10

Në mënyrë të ngjashme, ju mund të përdorni metodën parseFloat() për të nxjerr numrin me pikës lëvizëse nga një string. Metoda parseFloat() funksionon në të njëjtën mënyrë si metoda parseInt(), me përjashtim të asaj se nxjerr edhe numrat e plotë edhe numrat me decimale.

console.log(parseFloat("3.14"));  // 3.14
console.log(parseFloat("50px"));  // 50
console.log(parseFloat("1.6em"));  // 1.6
console.log(parseFloat("124.5 lbs"));  // 124.5
console.log(parseFloat("pesha 124.5 lbs"));  // NaN
console.log(parseFloat("6.5 hektarë"));  // 6.5

Shndërrimi i numrave në stringje

Metoda toString() mund të përdoret për të kthyer një numër në ekuivalentin e tij të stringut. Kjo metodë në mënyrë opsionale pranon një parametër – numër të plotë në intervalin prej 2 deri në 36 duke specifikuar bazën që do të përdoret për të përfaqësuar vlerat numerike.

var x = 10;
var y = x.toString();
console.log(y);  // '10'
console.log(typeof y);  // string
console.log(typeof x);  // number
    
console.log((12).toString());  // '12'
console.log((15.6).toString());  // '15.6'
console.log((6).toString(2));  // '110'
console.log((255).toString(16));  // 'ff'

Formatimi i numrave në shënimin eksponencial

Mund të përdorni metodën toExponential() për të formatuar ose paraqitur një numër në shënimin eksponencial. Kjo metodë në mënyrë opsionale pranon një parametër të plotë që specifikon numrin e shifrave pas pikës dhjetore. Gjithashtu, vlera e kthyer është një string, jo një numër.

var x = 67.1234;

console.log(x.toExponential());  // 6.71234e+1
console.log(x.toExponential(6));  // 6.712340e+1
console.log(x.toExponential(4));  // 6.7123e+1
console.log(x.toExponential(2));  // 6.71e+1

Formatimi i numrave në decimale fikse

Mund të përdorni metodën toFixed() kur dëshironi të formatoni një numër me një numër fiks të shifrave në të djathtë të pikës dhjetore. Vlera e kthyer nga kjo metodë është një string dhe ka saktësisht numrin e specifikuar të shifrave pas pikës dhjetore. Nëse parametri i shifrave nuk specifikohet ose hiqet, ai trajtohet si 0.

var x = 72.635;

console.log(x.toFixed());  // '73' (rrumbullakimi i vlerës, pa fraksione)
console.log(x.toFixed(2));  // '72.64' (rrumbullakimi i vlerës)
console.log(x.toFixed(1));  // '72.6'
    
var y = 6.25e+5;
console.log(y.toFixed(2)); // '625000.00'
    
var z = 1.58e-4;
console.log(z.toFixed(2));  // '0.00' (pasi 1.58e-4 është baras me 0.000158)

Formatimi i numrave me saktësi

Nëse dëshironi formën më të përshtatshme të një numri, mund të përdorni metodën toPrecision(). Kjo metodë kthen një string që përfaqëson numrin në saktësinë e specifikuar.

Nëse saktësia është mjaft e madhe për të përfshirë të gjitha shifrat e pjesës së plotë të numrit, atëherë numri formatohet duke përdorur shënimin me pikë fikse. Përndryshe, numri formatohet duke përdorur shënimin eksponencial. Parametri i saktësisë është opsional.

var x = 6.235;

console.log(x.toPrecision());  // '6.235'
console.log(x.toPrecision(3));  // '6.24' (rrumbullakimi i vlerës)
console.log(x.toPrecision(2));  // '6.2'
console.log(x.toPrecision(1));  // '6'
    
var y = 47.63;
console.log(y.toPrecision(2)); // '48' (rrumbullakimi i vlerës, pa fraksione)
    
var z = 1234.5;
console.log(z.toPrecision(2));  // '1.2e+3'

Gjetja e numrave më të mëdhenj dhe më të vegjël të mundshëm

Objekti Number ka gjithashtu disa veti të lidhura me të. Vetitë Number.MAX_VALUE dhe Number.MIN_VALUE të objektit Number përfaqësojnë numrat më të mëdhenj dhe më të vegjël (më afër zeros, jo më negativ) të mundshëm pozitivë që mund të trajtojë JavaScript. Ato janë konstante dhe vlerat e tyre aktuale janë përkatësisht 1.7976931348623157e+308, dhe 5e-324.

Një numër që bie jashtë rrezes së numrave të mundshëm përfaqësohet nga një konstantë Number.POZITIVE_INFINITY ose Number.NEGATIVE_INFINITY.

var a = Number.MAX_VALUE;
console.log(a); // 1.7976931348623157e+308
    
var b = Number.MIN_VALUE;
console.log(b); // 5e-324
    
var x = Number.MAX_VALUE * 2;
console.log(x); // Infinity
    
var y = -1 * Number.MAX_VALUE * 2;
console.log(y); // -Infinity

Kushtet If...Else

Ashtu si shumë gjuhë të tjera programuese, JavaScript gjithashtu lejon që të shkruani kod që kryen veprime të ndryshme duke u bazuar në rezultatet e një testi logjik ose krahasues në kohën e ekzekutimit. Kjo do të thotë, që mund të krijoni kushte në formë të shprehjeve që vlerësohen si të vërteta (true) ose jo të vërteta (false) dhe duke u bazuar në këto rezultate mund të kryeni veprime të caktuara.

Ekzistojnë disa deklarata (statements) të kushteve në JavaScript të cilat mund t'i përdorni për të marrë vendime:

• Deklarata if
• Deklarata if...else
• Deklarata if...else if...else
• Deklarata switch...case

Deklarata if

Deklarata if përdoret për të ekzekutuar një bllok kodi vetëm nëse kushti i specifikuar vlerësohet si i vërtetë (true). Kjo është deklarata më e thjeshtë e kushteve në JavaScript dhe mund të shkruhet si më poshtë:

if(kushti) {
    // Kodi që ekzekutohet
}

Shembulli i mëposhtëm do të japë "Kalo një fundjavë të këndshme!" nëse dita aktuale është e premte:

var sot = new Date();
var diteJaves = sot.getDay(); // E diel – E shtunë : 0 - 6
    
if(diteJaves == 5) {
    alert("Kalo një fundjavë të këndshme!");
}

Deklarata if...else

Mund të përmirësoni aftësitë e vendimmarrjes së programit tuaj në JavaScript, duke siguruar një zgjedhje alternative pasi të shtoni një deklaratë else në deklaratën if.

Deklarata if...else ju lejon të ekzekutoni një bllok kodi nëse kushti i specifikuar vlerësohet i vërtetë dhe një bllok tjetër kodi nëse vlerësohet si jo i vërtetë.

if(kushti) {
    // Kodi që ekzekutohet nëse kushti është i vërtetë (true)
} else {
    // Kodi që ekzekutohet nëse kushti nuk është i vërtetë (false)
}

Kodi JavaScript në shembullin vijues do të paraqes tekstin "Kalo një fundjavë të këndshme!" nëse dita aktuale është e premte, përndryshe do të paraqes tekstin "Kalo një ditë të mbarë!".

var sot = new Date();
var diteJaves = sot.getDay(); // E diel – E shtunë : 0 - 6
    
if(diteJaves == 5) {
    alert("Kalo një fundjavë të këndshme!");
} else {
    alert("Kalo një ditë të mbarë!");
}

Deklarata if...else if...else

Deklarata if...else if...else është një deklaratë e veçantë që përdoret për të kombinuar deklaratat if...else.

if(kushti1) {
    // Kodi ekzekutohet nëse kushti1 është i vërtetë (true) 
} else if(kushti2) {
    // Kodi ekzekutohet nëse kushti1 nuk është i vërtetë (false) dhe kushti2 është i vërtetë (true) 
} else {
    // Kodi ekzekutohet nëse të dy kushtet nuk janë të vërteta (false) 
}

Shembulli i mëposhtëm do të paraqes tekstin "Kalo një fundjavë të këndshme!" nëse dita aktuale është e premte, dhe "Kalo një të diel të këndshme!" nëse dita aktuale është e diel, përndryshe do paraqes tekstin "Kaloi një ditë të mbarë!"

var sot = new Date();
var diteJaves = sot.getDay(); // E diel – E shtunë : 0 - 6
    
if(diteJaves == 5) {
    alert("Kalo një fundjavë të këndshme!");
} else if(diteJaves == 0) {
    alert("Kalo një të diele të këndshme!");
} else {
    alert("Kalo një ditë të mbarë!");
}

Për deklaratën e JavaScript-it switch...case do të mësoni në njësinë mësimore të posaçme.

Operatori Ternar

Operatori terna (i trefishtë) ofron një mënyrë të shkurtër për të shkruar deklaratat if...else. Operatori ternar përfaqësohet nga simboli i pikëpyetjes (?) dhe i nevojiten tre operandë: një kusht për të kontrolluar, rezultati për të vërtetën (true) dhe rezultati për jo të vërtetën (false). Sintaksa e saj themelore është kësisoj:

var rezultati = (kushti) ? vlera1 : vlera2

Nëse kushti vlerësohet si i vërtetë (true), vlera1 do të paraqitet, përndryshe do të paraqitet vlera2. Për të kuptuar se si funksionon ky operator, merrni parasysh shembujt e mëposhtëm:

var personi;
var mosha = 21;
if(mosha < 18) {
    personi = 'Fëmijë';
} else {
    personi = 'I rritur';
}
alert(personi); // Rezultati: I rritur

Nëse përdorim operatorin ternar, i njëjti kod mund të shkruhet në një mënyrë më kompakte:

var mosha = 21;
var personi = mosha < 18 ? 'Fëmijë' : 'I rritur';
alert(personi); // Rezultati: I rritur

Siç mund ta shihni në shembullin e mësipërm, meqenëse kushti i specifikuar vlerësohet si jo i vërtetë, vlera në anën e djathtë nga simboli (:) paraqitet, e që është stringu 'I rritur'.

Deklarata Switch...Case

Deklarata switch...case është një alternativë ndaj deklaratës if...else if...else, e cila bën pothuajse të njëjtën gjë. Deklarata switch...case teston një variabël ose shprehje kundrejt një serie vlerash derisa të gjejë një vlerë që përputhet dhe më pas ekzekuton bllokun e kodit që i përgjigjet përputhjes së vlerës. Sintaksa është kësisoj:

switch(x){
    case vlera1:
        // Kodi ekzekutohet nëse x === vlera1
        break;
    case vlera2:
        // Kodi ekzekutohet nëse x === vlera2
        break;
    ...
    default:
        // Kodi ekzekutohet nëse x është ndryshe nga të gjitha vlerat
}

Merrni parasysh shembullin e mëposhtëm, që paraqet ditën e javës.

var d = new Date();
	
switch(d.getDay()) {
    case 0:
        alert("Sot është e diel.");
        break;
    case 1:
        alert("Sot është e hënë.");
        break;
    case 2:
        alert("Sot është e martë.");
        break;
    case 3:
        alert("Sot është e mërkurë.");
        break;
    case 4:
        alert("Sot është e enjte.");
        break;
    case 5:
        alert("Sot është e premte.");
        break;
    case 6:
        alert("Sot është e shtunë.");
        break;   
    default:
        alert("Asnjë informacion i disponueshëm për atë ditë.");
        break;
}

Metoda getDay() e kthen ditën e javës si vlerë numerike nga 0 deri në 6, ku 0 përfaqëson ditën e diel, 1 përfaqëson ditën e hënë, e kështu me radhë.

Deklarata switch...case ndryshon nga deklarata if...else në një mënyrë të rëndësishme. Deklarata switch ekzekutohet rresht pas rreshti (d.m.th. deklaratë pas deklarate) dhe pasi JavaScript gjen një klauzolë case që vlerëson si e vërtetë, jo vetëm që ekzekuton kodin që korrespondon me atë klauzolë, por gjithashtu ekzekuton të gjitha klauzolat tjera vijuese deri në fund të bllokut automatikisht.

Për të parandaluar këtë duhet të përfshini një deklaratë break pas secilit rast – case (siç mund ta shihni në shembullin e mësipërm). Deklarata e ndërprerjes - break i thotë interpretuesit JavaScript të dalë nga blloku i deklaratës switch...case pasi të ekzekutojë kodin e lidhur me rastin e parë të vërtetë.

Deklarata break megjithatë nuk është e nevojshme për klauzolën case ose default, kur ajo shfaqet në fund në një deklaratë kalimi. Megjithëse, në një deklaratë switch është një praktikë e mirë programuese të përfundosh case-in e fundit, ose klauzolën default me një break. Kjo parandalon një gabim të mundshëm më vonë nëse një deklaratë tjetër case shtohet në deklaratën switch.

Klauzola default është opsionale, e që specifikon veprimet që duhen kryer nëse asnjë case nuk përputhet me shprehjen switch. Klauzola default mund të mos jetë klauzola e fundit që shfaqet në një deklaratë switch. Këtu kemi një shembull, ku default nuk është klauzola e fundit.

var d = new Date();

switch(d.getDay()) {
    default: 
        alert("Mezi po pres fundjavën.");
        break;
    case 6:
        alert("Sot është e shtunë.");
        break; 
    case 0:
        alert("Sot është e diel.");
}

Rastet e shumta që ndajnë të njëjtin veprim

Çdo vlerë e dhënë case duhet të jetë unike brenda një deklarate switch. Sidoqoftë, raste (case) të ndryshme nuk kanë nevojë të kenë një veprim unik. Disa raste (case) mund të ndajnë të njëjtin veprim, siç tregohet në shembullin vijues:

var d = new Date();

switch(d.getDay()) {
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        alert("Është ditë pune.");
        break; 
    case 0:
    case 6:
        alert("Është ditë pushimi.");
        break;
    default: 
        alert("Shijoni çdo ditë të jetës suaj.");
}

Vargjet (Arrays)

Vargjet janë variabla komplekse që lejojnë të ruajmë më shumë se një vlerë ose një grup vlerash nën një emër të vetëm të variablës. Vargjet në JavaScript mund të ruajnë çdo vlerë valide, duke përfshirë stringjet, numrat, objektet, funksionet, madje edhe vargjet tjera, duke bërë kështu të mundur krijimin e strukturave më komplekse të të dhënave si një varg objektesh ose një varg të vargjeve.

Le të supozojmë se dëshironi të ruani emrin e ngjyrave në kodin tuaj JavaScript. Ruajtja e emrave të ngjyrave një nga një në një variabël mund të duket diçka e tillë:

var ngjyra1 = "Kuqe";
var ngjyra2 = "Gjelbër";
var ngjyra3 = "Kaltër";

Por çfarë ndodh nëse ju duhet të ruani emrat e shteteve ose qyteteve të një vendi në variabla dhe këtë herë jo të ruani vetëm tre shtete apo qytet, por mund të ruani p.sh. njëqind. Është mjaft e vështirë dhe e mërzitshme të ruash secilin prej tyre në një variabël të veçantë. Gjithashtu, përdorimi i kaq shumë variablave njëkohësisht dhe mbajtja nën kontroll e të gjithave do të jetë një detyrë shumë e vështirë. Dhe në këto raste vije në shprehje vargu - array. Pra, vargjet e zgjidhin këtë problem duke siguruar një strukturë të rregulluar për ruajtjen e vlerave të shumëfishta ose një grup vlerash.

Krijimi i vargut

Mënyra më e thjeshtë për të krijuar një varg në JavaScript është mbyllja e një liste të vlerave të ndara me presje brenda kllapave të mesme ([]), siç tregohet në sintaksën e mëposhtme:

var varguIm = [elementi0, elementi1, ..., elementiN];

Vargu gjithashtu mund të krijohet duke përdorur konstruktorin Array() siç tregohet në sintaksën e mëposhtme. Sidoqoftë, për shkak të thjeshtësisë rekomandohet sintaksa e mëparshme.

var varguIm = new Array(elementi0, elementi1, ..., elementiN);

Këtu kemi dhënë disa shembuj të vargjeve të krijuara duke përdorur sintaksën e drejtpërdrejtë (literal syntax) të vargut:

var ngjyra = ["Kuqe", "Gjelbër", "Kaltër"]; 
var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
var qytete = ["Bujanoc", "Preshevë", "Gjilan"];
var person = ["Filan", "Fisteku", 38];

Qasja në elementet e vargut

Elementeve të vargut mund t’ju qasemi nga indeksi i tyre duke përdorur shënimin me kllapa të mesme. Indeksi është një numër që përfaqëson pozicionin e një elementi në varg.

Indekset e vargjeve fillojnë nga vlera zero (0). Kjo do të thotë që elementi i parë i një vargu ruhet në indeksin 0, e jo 1, elementi i dytë ruhet në indeksin 1, etj. Indekset e vargjeve fillojnë me 0 dhe shkojnë deri në numrin e elementeve minus 1. Pra, vargu me pesë elementeve do të kishte indekse nga 0 në 4.

Shembulli i mëposhtëm do t'ju tregojë se si të nxirrni elementin individual të vargut sipas indeksit të tij.

var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
 
document.write(fruta[0]); // Mollë
document.write(fruta[1]); // Dardhë
document.write(fruta[2]); // Pjeshkë
document.write(fruta[fruta.length - 1]); // Rrush

Marrja e gjatësisë së një vargu

Vetia (property) length kthen gjatësinë e një vargu, që paraqet numrin e përgjithshëm të elementeve që përmbahen në varg. Gjatësia e vargut është gjithmonë më e madhe se indeksi i cilitdo element.

var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
document.write(fruta.length); // Shtypet: 5

Unazat përmes elementeve të vargut

Mund të përdorni unazën (loop) for për t’u qasë në secilin element të një vargu në mënyrë sekuenciale, kësisoj:

var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
 
// Përsëritja e ekzekutimit të elementeve të vargut
for(var i = 0; i < fruta.length; i++) {    
    document.write(fruta[i] + "<br>"); // Shtypen elementet e vargut
}

ECMAScript 6 ka prezantuar një mënyrë më të thjeshtë për të përsëritur elementet e vargut, e kjo është unaza for-of. Në këtë unazë nuk keni nevojë të inicializoni dhe të ndjekeni variablën e numëruesit të unazës (i).

Më poshtë është dhënë i njëjti shembull, por tani duke përdorur unazën for-of:

var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
 	
// Përsëritja e ekzekutimit të elementeve të vargut
for(var fruti of fruta) {    
    document.write(fruti + "<br>"); // Shtypen elementet e vargut
}

Gjithashtu mund të përsërisni mbi elementet e vargut duke përdorur unazën for-in, kësisoj:

var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
 
// Unaza përmes të gjitha elementeve në varg 
for(var i in fruta) {  
    document.write(fruta[i] + "<br>"); // Shtypen elementet e vargut
}

Shtimi i elementeve të ri në varg

Për të shtuar një element të ri në fund të një vargu, thjesht përdorni metodën push(), kësisoj:

var ngjyrat = ["Kuq", "Gjelbër", "Kaltër"]; 
ngjyrat.push("Verdhë");
     
document.write(ngjyrat); // Shtypja: Kuq,Gjelbër,Kaltër,Verdhë
document.write(ngjyrat.length); // Shtypja: 4

Në mënyrë të ngjashme, për të shtuar një element të ri në fillim të një vargu përdorni metodën unshift(), kësisoj:

var ngjyrat = ["Kuq", "Gjelbër", "Kaltër"]; 
colors.unshift("Verdhë");
     
document.write(ngjyrat); // Shtypja: Verdhë,Kuq,Gjelbër,Kaltër
document.write(ngjyrat.length); // Shtypja: 4

Gjithashtu mund të shtoni më shumë elemente në të njëjtën kohë duke përdorur metodat push() dhe unshift(), kësisoj:

var ngjyrat = ["Kuq", "Gjelbër", "Kaltër"]; 
ngjyrat.push("Rozë", "Vjollcë");
ngjyrat.unshift("Verdhë", "Gri");
     
document.write(ngjyrat); // Shtypja: Verdhë,Gri,Kuq,Gjelbër,Kaltër,Rozë,Vjollcë
document.write(ngjyrat.length); // Shtypja: 7

Heqja e elementeve nga vargu

Për të hequr elementin e fundit nga vargu mund të përdorni metodën pop(). Kjo metodë kthen vlerën e hequr. Ja një shembull:

var ngjyrat = ["Kuq", "Gjelbër", "Kaltër"]; 
var iFundit = ngjyrat.pop();
     
document.write(iFundit); // Shtypja: Kaltër
document.write(ngjyrat.length); // Shtypja: 2

Në mënyrë të ngjashme, mund të hiqni elementin e parë nga një varg duke përdorur metodën shift(). Kjo metodë gjithashtu kthen vlerën e zhvendosur. Ja një shembull:

var ngjyrat = ["Kuq", "Gjelbër", "Kaltër"]; 
var iPari = ngjyrat.shift();
     
document.write(iPari); // Shtypja: Kuq
document.write(ngjyrat.length); // Shtypja: 2

Shtimi ose heqja e elementeve në çdo pozicion të vargut

Metoda splice() është një metodë e vargjeve shumë e gjithanshme që lejon të shtohen ose hiqen elemente nga çdo indeks i vargut, duke përdorur këtë sintaksë:

vargu.splice(indeksiFill, numriFshirjes, elem1, ..., elemN)

Kjo metodë përdor tre parametra: parametri i parë është indeksi nga i cili fillon shtimi i elementeve në varg, është i domosdoshëm; parametri i dytë është numri i elementeve për tu hequr (përdorni 0 nëse nuk doni të hiqni ndonjë element), është opsional; dhe parametrat e radhës janë një grup elementësh që do të shtohen, janë gjithashtu opsional. Shembulli i mëposhtëm tregon se si funksionon kjo metodë:

var ngjyrat = ["Kuq", "Gjelbër", "Kaltër"]; 
var heqja = ngjyrat.splice(0,1); // Heqja e elementit të parë
     
document.write(ngjyrat); // Shtypja: Gjelbër,Kaltër
document.write(heqja); // Shtypja: Kuq (një element i vargut)
document.write(heqja.length); // Shtypja: 1
     
heqja = ngjyrat.splice(1, 0, "Rozë", "Verdhë"); // Shtimi i dy elementeve nga pozicioni një
document.write(ngjyrat); // Shtypja: Gjelbër,Rozë,Verdhë,Kaltër
document.write(heqja); // Varg i zbrazët
document.write(heqja.length); // Shtypja: 0
     
heqja = ngjyrat.splice(1, 1, "Gri", "Vjollce"); // Shtimi i dy vlerave, heqja e një vlere
document.write(ngjyrat); // Shtypja: Gjelbër,Gri,Vjollce,Verdhë,Kaltër
document.write(heqja); // Shtypja: Rozë (një element i vargut)
document.write(heqja.length); // Shtypja: 1

Metoda splice() kthen një varg të elementeve të fshirë, ose një varg të zbrazët nëse nuk është fshirë asnjë element, siç mund ta shihni në shembullin e mësipërm. Nëse argumenti i dytë nuk përdoret, të gjithë elementët nga fillimi deri në fund të vargut hiqen. Ndryshe nga metodat slice() dhe concat() (do të mësojmë në vazhdim), metoda splice() modifikon vargun në të cilin thirret.

Krijimi i stringut nga një varg

Mund të ketë situata kur thjesht dëshironi të krijoni një string duke bashkuar elementet e një vargu. Për ta bërë këtë mund të përdorni metodën join(). Kjo metodë merr një parametër opsional i cili është një string ndarës që shtohet ndërmjet secilit element. Nëse e anashkalojmë ndarësin, atëherë JavaScript do të përdorë presjen (,) si parazgjedhje. Shembulli i mëposhtëm tregon se si funksionon kjo metodë:

var ngjyrat = ["Kuq", "Gjelbër", "Kaltër"];
 
document.write(ngjyrat.join()); // Shtypja: Kuq,Gjelbër,Kaltër
document.write(ngjyrat.join("")); // Shtypja: KuqGjelbërKaltër
document.write(ngjyrat.join("-")); // Shtypja: Kuq-Gjelbër-Kaltër
document.write(ngjyrat.join(", ")); // Shtypja: Kuq, Gjelbër, Kaltër

Gjithashtu mund të shndërroni një varg në një string të ndarë me presje duke përdorur metodën toString(). Kjo metodë nuk e pranon parametrin ndarës sikur join(). Ja një shembull:

var ngjyrat = ["Kuq", "Gjelbër", "Kaltër"];
document.write(ngjyrat.toString()); // Shtypja: Kuq,Gjelbër,Kaltër

Nxjerrja e një pjese nga vargu

Nëse dëshironi të nxirrni një pjesë nga vargu (d.m.th. nën-varg / subarray) por ta mbani vargun origjinal të paprekur, mund të përdorni metodën slice(). Kjo metodë merr 2 parametra: indeksi i fillimit (indeksi nga i cili do të fillojë nxjerrja), dhe një indeks opsional përfundimtar (indeksi para të cilit do të përfundojë nxjerrja), si vargu.slice(indFill, indPerf). Ja një shembull:

var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
var nenVargu = fruta.slice(1, 3);
document.write(nenVargu); // Shtypja: Dardhë,Pjeshkë

Nëse parametri indPerf hiqet, të gjithë elementët deri në fund të vargut do të nxirren. Gjithashtu mund të specifikoni indekse negative – në atë rast metoda slice() nxjerr elementet nga fundi i vargut, në vend se nga fillimi.

var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
 
document.write(fruta.slice(2)); // Shtypja: Pjeshkë,Qershi,Rrush
document.write(fruta.slice(-2)); // Shtypja: Qershi,Rrush
document.write(fruta.slice(2, -1)); // Shtypja: Pjeshkë,Qershi

Bashkimi i vargjeve

Metoda concat() mund të përdoret për të bashkuar ose kombinuar dy ose më shumë vargje. Kjo metodë nuk i ndryshon vargjet ekzistuese, përkundrazi krijon një varg të ri.

var kafsheShtepiake = ["Macë", "Qen", "Papagall"];
var kafsheEgra = ["Tigër", "Ujk", "Luan"];
     
// Krijimi i një vargu të ri duke kombinuar vargun e kafshëve shtëpiake dhe vargun e kafshëve të egra 
var kafshe = kafsheShtepiake.concat(kafsheEgra); 
document.write(kafshe); // Shtypja: Macë,Qen,Papagall,Tigër,Ujk,Luan

Metoda concat() mund të pranoj çfarëdo numri të argumenteve të vargjeve, kësisoj mund të krijoni një varg nga disa vargje tjera, siç tregohet në shembullin vijues:

var kafsheShtepiake = ["Macë", "Qen", "Papagall"];
var kafsheEgra = ["Tigër", "Ujk", "Luan"];
var insekte = ["Milingonë", "Bletë"];
     
// Krijimi i një vargu duke kombinuar kafshët shtëpiake, kafshët e egra dhe insektet
var kafshe = kafsheShtepiake.concat(kafsheEgra, insekte);
document.write(kafshe); // Shtypja: Macë,Qen,Papagall,Tigër,Ujk,Luan,Milingonë,Bletë

Kërkimi brenda vargut

Nëse dëshironi të kërkoni në një varg ndonjë vlerë specifike, thjesht mund të përdorni metodat indexOf() dhe lastIndexOf(). Nëse vlera është gjetur, të dy metodat si rezultat japin indeksin që përfaqëson elementin e vargut. Nëse vlera nuk gjendet, rezultati do të jetë -1. Metoda indexOf() jep indeksin e elementin të parë të gjetur, ndërsa lastIndexOf() jep indeksin e elementit të fundit.

var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
 
document.write(fruta.indexOf("Mollë")); // Shtypja: 0
document.write(fruta.indexOf("Pjeshkë")); // Shtypja: 2
document.write(fruta.indexOf("Kajsi")); // Shtypja: -1

Të dy metodat gjithashtu pranojnë një numër të plotë si parametër opsional nga indeksi që specifikon indeksin brenda vargut në të cilin do të fillojë kërkimi.

var vargu = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
// Kërkimi përpara, duke filluar nga indeksi
document.write(vargu.indexOf(1, 2)); // Shtypja: 3
     
// Kërkimi prapa, duke filluar nga indeksi
document.write(vargu.lastIndexOf(1, 2)); // Shtypja: 0

Gjithashtu mund të përdorni metodën include() për të gjetur nëse vargu përmban një element të caktuar apo jo. Kjo metodë merr të njëjtat parametra si metodat indexOf() dhe lastIndexOf(), por si rezultat kthen true ose false në vend të indeksit.

var vargu = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
document.write(vargu.includes(1)); // Shtypja: true
document.write(vargu.includes(6)); // Shtypja: false
document.write(vargu.includes(1, 2)); // Shtypja: true
document.write(vargu.includes(3, 4)); // Shtypja: false

Nëse dëshironi të kërkoni në varg duke u bazuar në një gjendje të sigurt, atëherë mund të përdorni metodën JavaScript find() e cila është prezantuar rishtas në ES6. Kjo metodë jep si rezultat vlerën e elementit të parë në varg që kënaq funksionin e dhënë të testimit, përndryshe jep rezultatin padefinuar –  undefined.

var vargu = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var rezultati = vargu.find(function(elementi) {
    return elementi > 4;
});
document.write(rezultati); // Shtypja: 5

Ekziston edhe një metodë e ngjashme, ajo është metoda findIndex(), e cila jep si rezultat indeksin e një elementi të gjetur në grup në vend të vlerës së tij.

var vargu = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var rezultati = vargu.findIndex(function(elementi) {
    return elementi > 6;
});
document.write(rezultati); // Shtypja: 8

Metoda find() kërkon vetëm elementin e parë që kënaq funksionin e dhënë të testimit. Sidoqoftë, nëse dëshironi t’i gjeni të gjithë elementët që përputhen, mund të përdorni metodën filter().

Metoda filter() krijon një varg të ri me të gjithë elementët që kalojnë me sukses testin e dhënë. Shembulli i mëposhtëm do t'ju tregojë se si funksionon kjo në të vërtetë:

var vargu = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var rezultati = vargu.filter(function(elementi) {
    return elementi > 4;
});
document.write(rezultati); // Shtypja: 5,7
document.write(rezultati.length); // Shtypja: 2

Renditja e vargjeve

Renditja është një detyrë e zakonshme kur punohet me vargje. Do të përdorej, për shembull, nëse doni t’i shfaqni emrat e qyteteve ose të shteteve në një radhitje alfabetike.

Objekti i vargut në JavaScript ka një metodë të integruar sort() për klasifikimin e elementeve të vargjeve në radhitje alfabetike.

var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
var renditja = fruta.sort();
    
alert(fruta); // Dalja: Dardhë,Mollë,Pjeshkë,Qershi,Rrush
alert(renditja); // Dalja: Dardhë,Mollë,Pjeshkë,Qershi,Rrush

Kthimi mbrapshtë i vargut

Mund të përdorni metodën reverse() për të kthyer në të kundërtën rendin e elementeve të një vargu.

Kjo metodë kthen mbrapshtë një varg ashtu që elementi i parë i vargut bëhet i fundit, dhe elementi i fundit bëhet i pari.

var numrat = ["një", "dy", "tre", "katër", "pesë"];
var mprapshte = numrat.reverse(); 
    
alert(numrat); // Dalja: pesë,katër,tre,dy,një
alert(mprapshte); // Dalja: pesë,katër,tre,dy,një

Renditja e vargjeve numerike

Metoda sort() mund të prodhojë një rezultat të papritur kur zbatohet në vargjet numerike (d.m.th. vargjet që përmbajnë vlera numerike).

var numra = [5, 20, 10, 75, 50, 100];
numra.sort(); // Renditja e vargut numerik
alert(numra); // Dalja: 10,100,20,5,50,75

Siç mund ta shihni, rezultati është ndryshe nga ai që kemi pritur. Kjo ndodh sepse metoda sort() rendit elementet e vargut numerik duke i shndërruar në stringje (p.sh. 20 bëhet "20", 100 bëhet "100", e kështu me radhë), kësisoj karakteri i parë i stringut "20" (dmth. "2") vjen pas karakterit të parë të sringut "100" (dmth. "1"), prandaj vlera 20 renditet pas vlerës 100.

Për ta rregulluar këtë problem të renditjes së një vargu numerik, mund të aplikoni një funksion krahasimi, kësisoj:

var numra = [5, 20, 10, 75, 50, 100];

// Renditja e vargut duke përdorur funksionin e krahasimit
numra.sort(function(a, b) {
    return a - b;
});
alert(numra); // Dalja: 5,10,20,50,75,100

Siç mund ta shihni, këtë herë kemi marrë rezultatin e duhur. Le ta shohim se si funksionon.

Kur specifikohet funksioni i krahasimit, elementet e vargut renditen sipas vlerës së kthimit të funksionit të krahasimit. Për shembull, kur krahason a dhe b:

• Nëse funksioni i krahasimit jep një vlerë më të vogël se 0, atëherë a vendoset e para.
• Nëse funksioni i krahasimit jep një vlerë më të madhe se 0, atëherë b vendoset e para.
• Nëse funksioni i krahasimit jep vlerën 0, a dhe b mbeten të pandryshuara në lidhje me njëra-tjetrën, por të renditura në lidhje me të gjithë elementët e tjerë.

Prandaj, meqenëse 5 - 20 = -15 është më e vogël se 0, numri 5 vendoset i pari, pastaj 20 - 10 = 10 që është më i madh se 0, prandaj numri 10 vendoset para numrit 20, po kështu 20 - 75 = -55 që është më i vogël se 0 , kështu që numri 20 vendoset para numrit 75, në mënyrë të ngjashme numri 50 vendoset para numrit 75, e kështu me radhë.

Gjetja e vlerës maksimale dhe minimale në varg

Mund të përdorni metodën apply() në kombinim me Math.max() dhe Math.min() për të gjetur vlerën maksimale dhe minimale brenda një vargu.

var numra = [3, -7, 10, 8, 15, 2];

// Definimi i funksionit për të gjetur vlerën maksimale
function gjejMax(vargu) {
    return Math.max.apply(null, vargu);
}
    
// Definimi i funksionit për të gjetur vlerën minimale
function gjejMin(vargu) {
    return Math.min.apply(null, vargu);
}
    
alert(gjejMax(numra)); // Dalja: 15
alert(gjejMin(numra)); // Dalja: -7

Metoda apply() siguron një mënyrë të përshtatshme për të kaluar vlerat e vargut si argumente në një funksion që pranon disa argumente në një mënyrë të ngjashme me vargun, por jo një grup (p.sh. metodat Math.max() dhe Math.min()). Pra, funksioni Math.max.apply(null,numrat) në shembullin e mësipërm është ekuivalent me Math.max(3,-7,10,8,15,2).

Renditja e një grupi objektesh

Metoda sort() mund të përdoret gjithashtu për klasifikimin e vargjeve të objekteve duke përdorur funksionin e krahasimit.

Shembulli i mëposhtëm do t'ju tregojë se si të renditni një varg objektesh sipas vlerave të vetive (property):

var persona = [
    { emri: "Drin", mosha: 14 },
    { emri: "Vlora", mosha: 30 },
    { emri: "Besa", mosha: 21 },
    { emri: "Amar", mosha: 42 },
    { emri: "Adi", mosha: 16 }
];

// Klasifikim sipas moshës
persona.sort(function (a, b) {
    return a.mosha - b.mosha;
});

console.log(persona);

// Klasifikim sipas emrit
persona.sort(function(a, b) {
    var x = a.emri.toLowerCase(); // injoro shkronjat e mëdha
    var y = b.emri.toLowerCase(); // injoro shkronjat e mëdha
    if(x < y) {
        return -1;
    }
    if(x > y) {
        return 1;
    }
    // emrat duhet të jenë të njëjtë
    return 0;
});

console.log(persona);

Unazat (Loops)

Unazat përdoren për të ekzekutuar të njëjtin bllok të kodit disa herë, për sa kohë që plotësohet një kusht i caktuar. Ideja themelore prapa një unaze është automatizimi në detyrat e përsëritura brenda një programi për të kursyer kohë dhe tentativa. JavaScript-i tani mbështet pesë lloje të ndryshme të unazave:

• unaza while – ekzekuton një bllok të kodit për sa kohë që gjendja e specifikuar vlerëson si e vërtetë.
• unaza do...while – ekzekuton një bllok të kodit një herë; më pas vlerësohet gjendja. Nëse kushti është i vërtetë, deklarata përsëritet për sa kohë që kushti i specifikuar është i vërtetë.
• unaza for – ekzekuton një bllok të kodit derisa numëruesi të arrijë një numër të caktuar.
• unaza for...in – ekzekutohet nëpër vetitë e një objekti.
• unaza for...of – kryhen operacione të përsëritshme në objekte si vargje, stringje, etj.

Unaza while

Kjo është deklarata më e thjeshtë e unazave që e ofrohet nga JavaScript.

Unaza while kalon disa herë nëpër një bllok të kodit për sa kohë që kushti i specifikuar vlerësohet si i vërtetë. Sapo kushti të mos jetë i vërtetë, kalimi nëpër kod do të ndërpritet. Sintaksa gjenerike e unazës while është:

while(kushti) {
    // Kodi që do të ekzekutohet
}

Shembulli i mëposhtëm definon një unazë që do të vazhdojë të ekzekutohet kodi brenda saj për sa kohë që variabla i është më e vogël ose e barabartë me 5. Variabla i do të rritet për vlerën 1 sa herë që kodi ekzekutohet brenda unazës:

var i = 1;
while(i <= 5) {    
    document.write("<p>Numri është " + i + "</p>");
    i++;
}

Unaza do...while

Unaza do-while është një variant i unazës while, e cili vlerëson gjendjen (kushtin) në fund të çdo përsëritje të unazës. Me një unazë do-while, blloku i kodit ekzekutohet një herë, e pastaj vlerësohet kushti, nëse kushti është i vërtetë (true), deklarata përsëritet për sa kohë që kushti i specifikuar vlerësohet si i vërtetë (true). Sintaksa gjenerike e unazës do-while është:

do {
    // Kodi që do të ekzekutohet
}
while(kushti);

Kodi JavaScript në shembullin vijues përcakton një unazë që fillon me i = 1. Më pas do të jap daljen dhe do të rrisë vlerën e variablës i për 1. Pas kësaj vlerësohet kushti, dhe unaza do të vazhdojë të ekzekutohet për sa kohë që variabla i është më e vogël, ose e barabartë me 5.

var i = 1;
do {
    document.write("<p>Numri është " + i + "</p>");
    i++;
}
while(i <= 5);

Diferenca në mes unazës while dhe do...while

Unaza while ndryshon nga unaza do-while në një mënyrë të rëndësishme – në unazën while, kushti që do të vlerësohet, testohet në fillim të çdo cikli të unazës, kësisoj nëse shprehja e kushtëzuar vlerësohet si jo e vërtetë (false), kodi në unazë nuk do të ekzekutohet asnjëherë .

Nga ana tjetër, në unazën do-while, cikli do të ekzekutohet gjithmonë një herë edhe nëse shprehja e kushtëzuar vlerësohet si jo e vërtetë (false), sepse ndryshe nga unaza while, kushti vlerësohet në fund të ciklit të unazës, e jo në fillim.

Unaza for

Unaza for përsërit një bllok të kodit për sa kohë që plotësohet një kusht i caktuar. Zakonisht përdoret për të ekzekutuar një bllok të kodit për disa herë. Sintaksa e saj është kjo:

for(inicializimi; kushti; inkrementi) {
    // Kodi që do të ekzekutohet
}

Parametrat e deklaratës së unazën for kanë këto kuptime:

• inicializimi – përdoret për inicimin e variablave të numëruesit dhe vlerësohet një herë pa ndonjë kusht para ekzekutimit të parë të kodit në unazë.
• kushti – vlerësohet në fillim të çdo përsëritje të ciklit të unazës. Nëse vlerësimi është si i vërtetë (true), deklaratat në unazë do të ekzekutohen. Nëse vlerësimi është jo i vërtetë (false), ekzekutimi në unazë do të përfundoj.
• inkrementi – përditëson numëruesin e unazës me një vlerë të re sa herë që ekzekutohet kodi në unazë.

Shembulli i mëposhtëm definon një unazë që fillon me një variabël i = 1. Cikli ekzekutues në unazë do të vazhdojë derisa vlera e variablës i të jetë më e vogël ose e barabartë me 5. Variabla i do të rritet për 1 sa herë që cikli përsëritet:

for(var i = 1; i <= 5; i++) {
    document.write("<p>Numri është " + i + "</p>");
}

Unaza for është veçanërisht e dobishme gjatë përsëritjes së elementeve të një vargu (array). Shembulli i mëposhtëm do t'ju tregojë se si të paraqitni secilin element të vargut në JavaScript.

// Një varg me disa elemente
var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
     
// Kalimi nëpër të gjithë elementet e vargut 
for(var i = 0; i < fruta.length; i++) {
    document.write("<p>" + fruta[i] + "</p>");
}

Unaza for...in

Unaza for-in është tip special i unazave që bënë cikël mbi vetitë e objektit, ose elementeve të vargut. Sintaksa gjenerike e unazës for-in është:

for(variabla in objekti) {
    // Kodi që do të ekzekutohet
}

Numëruesi i unazës d.m.th. variabla në unazën for-in është një string, jo një numër. Ai përmban emrin e vetisë aktuale ose indeksin e elementit aktual të vargut.

Shembulli i mëposhtëm do t'ju tregojë se si të kaloni nëpër të gjitha vetitë e një objekti në JavaScript.

// Një objekt me disa veti (properties) 
var personi = {"emri": "Filan", "mbiemri": "Fisteku", "mosha": "36"};
     
// Kalimi nëpër të gjitha vetitë e objektit
for(var vetia in personi) {  
    document.write("<p>" + vetia + " = " + personi[vetia] + "</p>"); 
}

Në mënyrë të ngjashme, mund të kaloni nëpër elementët e një vargu, kësisoj:

// Vargu me disa elemente
var fruta = ["Mollë", "Dardhë", "Pjeshkë", "Qershi", "Rrush"];
     
// Kalimi nëpër të gjithë elementet e vargut 
for(var i in fruta) {  
    document.write("<p>" + fruta[i] + "</p>");
}

Unaza for...of  ES6

ES6 (EcmaScript6) prezanton një unazë të re for-of që na lejon të përsërisim cikle shumë lehtë mbi vargje ose objekte të përsëritshme (p.sh. stringje). Gjithashtu, kodi brenda unazës ekzekutohet për secilin element të objektit të përsëritshëm.

Shembulli i mëposhtëm do t'ju tregojë se si të kaloni nëpër vargje dhe stringje duke përdorur këtë unazë.

// Përsëritje nëpër varg
let shkronjat = ["a", "b", "c", "d", "e", "f"];
    
for(let shkronja of shkronjat) {
    console.log(shkronja); // a,b,c,d,e,f
}
    
// Përsëritje nëpër string
let persh = "Përshëndetje Botë!";
    
for(let karakter of persh) {
    console.log(karakter); // P,ë,r,s,h,ë,n,d,e,t,j,e, ,B,o,t,ë,!
}

Funksionet

Një funksion është grup i deklaratave që kryejnë detyra specifike dhe mund të mbahen dhe mirëmbahen veçmas nga programi kryesor. Funksionet ofrojnë një mënyrë për të krijuar paketa të kodeve të ripërdorshme të cilat janë më dinamike dhe më të lehta për tu korrigjuar nga gabimet. Këtu kemi paraqitur disa përparësi të përdorimit të funksioneve:

Funksionet zvogëlojnë përsëritjen e kodit brenda programit – Funksioni lejon të nxjerrni bllok të kodit zakonisht të përdorur në një komponent të vetëm. Andaj mund të kryeni të njëjtën detyrë duke thirrur këtë funksion kudo që dëshironi brenda skriptës tuaj pa pasur nevojë të kopjoni dhe ngjisni të njëjtin bllok të kodit.

Funksionet mundësojnë mirëmbajtjen e kodit shumë më lehtë – Meqenëse një funksion i krijuar një herë mund të përdoret shumë herë, kështu që çdo ndryshim i bërë brenda një funksioni zbatohet automatikisht në të gjitha vendet pa prekur disa fajlla.

Funksionet e bëjnë më të lehtë eliminimin e gabimeve – Kur programi ndahet në funksione, nëse ndodh ndonjë gabim, ju e dini saktësisht se cili funksion e shkakton gabimin dhe ku mund ta gjeni. Prandaj, përmirësimi i gabimeve bëhet shumë më i lehtë.

Definimi dhe thirrja e një funksioni

Deklarimi i një funksioni fillon me fjalën kyçe function, e ndjekur nga emri i funksionit që dëshironi të krijoni, pastaj nga kllapat () dhe në fund shënoni kodin e funksionit tuaj në mes kllapave të mëdha {}. Më poshtë është dhënë sintaksa themelore për deklarimin e një funksioni:

function emriFunksionit() {
    // Kodi që do të ekzekutohet
}

Më poshtë është dhënë një shembull i thjeshtë i një funksioni, që do të paraqes një mesazh përshëndetje:

// Definimi i funksionit
function persh() {
    alert("Përshëndetje, mirësevini në këtë uebsajt!");
}
     
// Thirrja e funksionit
persh(); // Dalja: Përshëndetje, mirësevini në këtë uebsajt!

Pasi të definohet një funksion, ai mund të thirret (invoked) nga kudo në dokument, duke shënuar emrin e tij e më pas hapja dhe mbyllja e kllapave, kësisoj persh(), sikur në shembullin e mësipërm.

Shtimi i parametrave në funksione

Mund të specifikoni parametrat kur definoni funksionin tuaj për të pranuar vlerat hyrëse në kohën e ekzekutimit. Parametrat funksionojnë si variabla mbajtëse brenda një funksioni; ato zëvendësohen në kohën e ekzekutimit nga vlerat (të njohura si argumente) e ju jepen funksionit në kohën e thirrjes.

Parametrat vendosen në rreshtin e parë të funksionit brenda kllapave, kësisoj:

function emriFunksionit(parametri1, parametri2, parametri3) {
    // Kodi që do të ekzekutohet
}

Funksioni shuma() në shembullin vijues merr dy numra si argumente, thjesht shtojini së bashku dhe më pas shfaqni rezultatin në shfletues.

// Definimi i funksionit
function shuma(num1, num2) {
    var totali = num1 + num2;
    alert(totali);
}
     
// Thirrja e funksionit
shuma(6, 20); // Dalja: 26
shuma(-5, 17); // Dalja: 12

Mund të përcaktoni sa të doni parametra. Sidoqoftë, për secilin parametër që specifikoni, një argument përkatës duhet ta pasojë kut të thirret funksioni, përndryshe vlera e tij bëhet e papërcaktuar – undefined.

// Definimi i funksionit
function emriPlote(emri, mbiemri) {
    alert(emri + " " + mbiemri);
}
     
// Thirrja e funksionit
emriPlote("Agron", "Destani"); // Dallja: Agron Destani
emriPlote("Merita"); // Dalja: Merita undefined

Vlerat e paracaktuara për parametrat e funksionit ES6

Në ES6 (ECMAScript 6), tani mund të specifikoni vlerat e paracaktuara për parametrat e funksionit. Kjo do të thotë që nëse nuk ofrohen argumente kur thirret funksioni, do të përdoren këto vlera të parametrave të paracaktuar.

function persh(emri = 'Filan') {
    alert('Përshëndetje, ' + emri);
}

persh(); // Dalja: Përshëndetje, Filan
persh('Gëzim'); // Dalja: Përshëndetje, Gëzim

Përpara se të ekzistonte standardi ES6, për të arritur të njëjtin rezultat, është dashtë të shkruanim diçka kësisoj:

function persh(emri) {
    var emri = emri || 'Filan'; 
    alert('Përshëndetje, ' + emri);
}

persh(); // Dalja: Përshëndetje, Filan
persh(Gëzim); // Dalja: Përshëndetje, Gëzim

Kthimi i vlerave nga një funksion

Një funksion mund të kthejë një vlerë përsëri në skriptën që e thirri funksionin si rezultat duke përdorur deklaratën return. Vlera mund të jetë çfarëdo tipi, duke përfshirë vargjet dhe objektet.

Deklarata return zakonisht vendoset si linja e fundit e funksionit para kllapës së madhe mbyllëse dhe përfundon me një pikëpresje.

// Definimi i funksionit
function shuma(num1, num2) {
    var totali = num1 + num2;
    return totali;
}
     
// Paraqitja e vlerës së kthyer
alert(shuma(6, 20)); // Rezultati: 26
alert(shuma(-5, 17)); // Rezultati: 12

Një funksion nuk mund të kthejë vlera të shumëfishta. Sidoqoftë, mund të merrni rezultate të ngjashme duke kthyer një varg me vlera.

// Definimi i funksionit
function heresiNumrave(iPjestueshmi, pjestuesi){
    var heresi = iPjestueshmi / pjestuesi;
    var vargu = [iPjestueshmi, pjestuesi, heresi];
    return vargu;
}
     
// Ruajtja e vlerës së kthyer në një variabël
var vlerat = heresiNumrave(10, 2);
     
// Paraqitja e vlerave individuale
alert(vlerat[0]); // Dalja: 10
alert(vlerat[1]); // Dalja: 2
alert(vlerat[2]); // Dalja: 5

Puna me funksione shprehëse

Sintaksa që kemi përdorur deri më tani për të krijuar funksione quhet funksion deklarues (function declaration). Ekziston edhe një sintaksë tjetër për krijimin e një funksioni, e cila quhet funksion shprehës (function expression).

// Funksioni deklarues
function shuma(num1, num2) {
    var totali = num1 + num2;
    return totali;
}
     
// Funksioni shprehës
var shuma = function(num1, num2) {
    var totali = num1 + num2;
    return totali;
};

Pasi funksioni shprehës të jetë ruajtur në një variabël, variabla e tillë mund të përdoret si një funksion:

var shuma = function(num1, num2) {
    var totali = num1 + num2;
    return totali;
};
 
alert(shuma(5, 10)); // Dalja: 15
 
var rez = shuma(7, 25);
alert(rez); // Dalja: 32

Sintaksa e funksionit deklarues dhe funksionit shprehës duket shumë e ngjashme, por ato ndryshojnë në mënyrën e evaluimit:

deklarimi(); // Dalja: Funksioni deklarues!
function deklarimi() {
    alert("Funksioni deklarues!");
}
     
shprehja(); // Uncaught TypeError: undefined is not a function
var shprehja = function() {
    alert("Funksioni shprehës!");
};

Siç mund ta shihni në shembullin e mësipërm, funksioni shprehës bën një përjashtim kur thirret para se të definohet, por funksioni deklarues ekzekutohet me sukses.

JavaScript-i analizon funksionin deklarues para se të ekzekutohet programi. Prandaj, nuk ka rëndësi nëse programi e thirr funksionin para se të definohet sepse JavaScript-i e ka ngritur funksionin në krye të fushëveprimit aktual prapa skenave. Funksioni shprehës nuk vlerësohet derisa t'i caktohet një variabël; prandaj, është ende i pa definuar kur thirret.

ES6 ka prezantuar sintaksë edhe më të shkurtër për të shënuar funksionin shprehës e cila quhet funksion shigjetë (arrow function).

// Funksioni shigjetë
var shuma = (num1, num2) => {
    var totali = num1 + num2;
    return totali;
};

Kuptimi i fushëveprimit të variablës

Sidoqoftë, mund të deklaroni variablat kudo në JavaScript. Por, vendndodhja e deklaratës përcakton shkallën e disponueshmërisë së një variable brenda programit, dmth. ku mund të përdoret ose të kemi qasje tek ajo. Kjo qasje njihet si fushëveprim i variablës (variable cope).

Si parazgjedhje, variablat e deklaruara brenda një funksioni kanë fushëveprim lokal, që do të thotë se ato nuk mund të jenë të qasshme ose të manipulohen nga jashtë këtij funksioni, siç tregohet në shembullin e mëposhtëm:

// Definimi i funksionit
function funPersh() {
    var persh = "Përshëndetje Botë!";
    alert(persh);
}
     
funPersh(); // Dalja: Përshëndetje Botë!
    
alert(persh); // Uncaught ReferenceError: greet is not defined

Sidoqoftë, çdo variabël e deklaruar në një program jashtë një funksioni ka fushëveprim global, d.m.th. kjo variabël do të jetë në dispozicion për të gjitha skriptet, pavarësisht nëse skriptet gjinden brenda një funksioni apo jashtë tij:

var persh = "Përshëndetje Botë!";
 
// Definimi i funksionit
function funPersh() {
    alert(persh);
}
     
funPersh();  // Dalja: Përshëndetje Botë!
     
alert(persh); // Dalja: Përshëndetje Botë!

Objektet

JavaScript është gjuhë programimi e bazuar në objekte dhe në JavaScript pothuajse gjithçka është objekt ose vepron si një objekt. Pra, për të punuar me JavaScript në mënyrë efektive dhe efikase duhet të kuptojmë se si funksionojnë objektet, dhe si të krijoni objektet tuaja e t'i përdorni ata.

Objekti në JavaScript është vetëm një koleksion i vlerave të emëruara. Këto vlera të emërtuara zakonisht referohen si veti të objektit. Nëse ju kujtohet nga kaptina e vargjeve, vargu është një koleksion vlerash, ku secila vlerë ka një indeks (një çelës numerik) që fillon nga zero dhe rritet për një në secilën vlerë. Objekti është i ngjashëm me vargun, e dallimi është se ju i përcaktoni çelësat vetë, siç janë emri, mosha, gjinia, etj.

Krijimi i objekteve

Një objekt mund të krijohet me kllapa të mëdha (gjarpërore) {} me një listë opsionale të vetive. Një veti është një çift "çelës: vlerë" ("key: value"), ku çelësi (ose emri i vetisë) është gjithmonë një string dhe vlera (ose vlera e vetisë) mund të jetë çdo tip i të dhënave, si stringje, numra, booleans ose tip kompleks i të dhënave si vargje, funksione dhe objekte tjera. Për më tepër, vetitë që si vlera kanë funksione shpesh quhen metoda për t'i dalluar ato nga vetitë e tjera. Një objekt tipik në JavaScript mund të duket kësisoj:

var personi = {
    emri: "Filan",
    mbiemri: "Fisteku",
    mosha: 17,
    emriPlote: function() {
        alert(this.emri + " " + this.mbiemri);
    }
};

Shembulli i mësipërm krijon një objekt të quajtur person që ka tri veti, emri, mbiemri dhe mosha dhe një metodë emriPlote(). Metoda emriPlote() tregon bashkimin e vlerës së emrit this.emri dhe mbiemrit this.mbiemri. Kjo është mënyra më e lehtë dhe më e preferuar për të krijuar një objekt të ri në JavaScript, e që njihet si sintaksë objekti literal (objekt literals).

Emrat e vetive zakonisht nuk kanë nevojë të citohen (futen nën thonjëza) nëse nuk janë fjalë të rezervuara, nuk përmbajnë hapësira apo karaktere speciale (pra, gjithçka tjetër përveç shkronjave, numrave dhe karaktereve _ dhe $), ose nëse fillojnë me një numër, siç tregohet në shembullin vijues:

var personi = {
    "emri dhe mbiemri": "Filan Fisteku",
    "mosha aktuale": 17,
    gjinia: "Mashkull"
};

Qasja në vetitë e objektit

Për t’iu qasë ose për të marrë vlerën e një vetie, mund të përdorni shënimin me pikë (.), ose shënimin me kllapa të mesme ([]), siç demonstrohet në shembullin e mëposhtëm:

var libri = {
    "titulli": "Kronikë në gur",
    "autori": "Ismail Kadare",
    "viti": 1971
};

// Shënimi me pikë
document.write(libri.autori);  // Rezultati: Ismail Kadare

// Shënimi me kllapa të mesme
document.write(libri["viti"]); // Rezultati: 1971

Shënimi me pikë është më i lehtë për ta lexuar dhe shkruar, por nuk mund të përdoret gjithmonë. Nëse emri i vetisë nuk është valid (d.m.th. nëse përmban hapësira ose karaktere speciale), nuk mund të përdorni shënimin me pikë; do të duhet të përdorni shënimin me kllapa të mesme, siç tregohet në shembullin vijues:

var libri = {
    titulli: "Kronikë në gur",
    autori: "Ismail Kadare",
    "data e publikimit": "7 Korrik 1971"
};

// Shënimi me kllapa të mesme
document.write(libri["data e publikimit"]); // Prints: 7 Korrik 1971

Shënimi me kllapa të mesme ofron shumë më shumë fleksibilitet sesa shënimi me pikë. Kjo gjithashtu ju lejon të specifikoni emrat e vetive si variabla në vend të teksteve vetëm si stringje, siç tregohet në shembullin më poshtë:

var personi = {
    emri: "Agron",
    mosha: 17,
    gjinia: "Mashkull"
};

var hyrja = prompt("Shënoni një emër të vetisë për të marrë vlerën e saj");
alert(personi[hyrja]); // Rezultati: Agron (nëse shënojmë "emri")

Unaza nëpër vetitë e objektit

Mund t’i përsërisni ekzekutimin e vlerave të vetive të një objekti duke përdorur unazën for...in. Kjo unazë është optimizuar posaçërisht për të përsëritur vetitë e objektit. Ja një shembull:

var personi = {
    emri: "Agron",
    mosha: 17,
    gjinia: "Mashkull"
};

// Përsëritje mbi vetitë e objektit
for(var i in personi) {  
    document.write(personi[i] + "<br>"); // Shtypja: emri, mosha dhe gjinia
}

Vendosja e vetive të objektit

Në mënyrë të ngjashme, mund të vendosni veti të reja ose të përditësoni atë ekzistues duke përdorur shënimin me pikë (.) ose me kllapa të mesme ([]), siç paraqitet në shembullin vijues:

var personi = {
    emri: "Agron",
    mosha: 17,
    gjinia: "Mashkull"
};

// Vendosja e një vetie të re
personi.shteti = "Kosovë";
document.write(personi.shteti); // Rezultati: Kosovë

personi["email"] = "agron.gashi@mail.com";
document.write(personi.email); // Rezultati: agron.gashi@mail.com

// Përditësimi i vetisë ekzistuese
personi.mosha = 16;
document.write(personi.mosha); // Rezultati: 16

personi["emri"] = "Agron Gashi";
document.write(personi.emri); // Rezultati: Agron Gashi

Fshirja e vetive të objektit

Operatori i fshirjes delete mund të përdoret për të hequr plotësisht vetitë nga një objekt. Fshirja në të vërtetë është mënyra e vetme për të hequr një veti nga një objekt. Vendosja e vetisë në undefined ose null ndryshon vetëm vlerën e vetisë. Nuk heq vetinë nga objekti.

var personi = {
    emri: "Agron",
    mosha: 17,
    gjinia: "Mashkull",
    paraqitEmrin: function() {
        alert(this.emri);
    }
};

// Fshirja e vetisë
delete personi.mosha;
alert(personi.mosha); // Dalja: undefined

Thirrja e metodave të objektit

Mund t’ju qaseni metodës së një objekti në të njëjtën mënyrë si ju qaseni vetive – duke përdorur shënimin me pika ose duke përdorur shënimin me kllapa të mesme.

var personi = {
    emri: "Agron",
    mosha: 17,
    gjinia: "Mashkull",
    paraqitEmrin: function() {
        alert(this.emri);
    }
};

person.paraqitEmrin(); // Dalja: Agron
person["paraqitEmrin"](); // Dalja: Agron

Manipulimi nga vlera krahas referenca

Objektet JavaScript janë të tipit referencë që nënkupton se kur bëni kopje të tyre, në të vërtetë thjesht kopjoni referencat për atë objekt. Ndërsa vlerat primitive si stringjet dhe numrat caktohen ose kopjohen si një vlerë e tërë. Për ta kuptuar më mirë gjithë këtë, le të shikojmë shembullin vijues:

var mesazhi = "Përshëndetje Botë!";

var persh = mesazhi; // Caktimi i variablës së mesazhit në një variabël të re
persh = "Tungatjeta!";
    
document.write(mesazhi);  // Shtypja: Përshëndetje Botë!
document.write(persh);  // Shtypja: Tungatjeta!

Në shembullin e mësipërm, kemi bërë një kopje të variablës mesazhi dhe kemi ndryshuar vlerën e asaj kopje (d.m.th. variablën persh). Të dy variablat mbeten të dallueshme dhe të ndara. Por, nëse bëjmë të njëjtën gjë me një objekt, do të marrim një rezultat tjetër, siç do ta shohim në shembullin vijues:

var personi = {
    emri: "Agron",
    mosha: 17,
    gjinia: "Mashkull"
};

var perdoruesi = personi; // Caktimi i variablës personi në një variabël të re
perdoruesi.emri = "Dritan";

document.write(personi.emri);  // Shtypja: Dritan
document.write(perdoruesi.emri);  // Shtypja: Dritan

Mund ta shihni qartë, çdo ndryshim i bërë në variablën perdoruesi gjithashtu ndryshon variablën personi; kjo ndodh sepse të dy variablat i referohen të njëjtit objekt. Pra, thjesht kopjimi i objektit nuk e klonon atë, por kopjon referencën për atë objekt.