Kurs Profesional JavaScript në Shqip

Mëso gjuhën që i jep jetë faqeve web: logjikë, ndërveprim, të dhëna, evente dhe projekte praktike.

10 mësime

Variabla, tipe të dhënash, kushte, funksione, array, objekte, DOM, evente, storage dhe projekt final.

Praktikë reale

Shembujt mund t'i provosh menjëherë në HTML Preview me butonin “Provo në Preview”.

Testim me radhë

Mësimet, mini-testet dhe provimi hapen gradualisht që kursi të ndiqet seriozisht.

Projekt final

Në fund ndërton një mini-aplikacion interaktiv me JavaScript.

Admin Audit Log

Regjistron veprimet admin në këtë browser.

<button id="btn">Kliko</button>
<p id="result">Rezultati shfaqet këtu.</p>

<script>
  const btn = document.querySelector("#btn");
  const result = document.querySelector("#result");

  btn.addEventListener("click", function () {
    result.textContent = "JavaScript po punon!";
  });
</script>

Çfarë është JavaScript?

JavaScript është gjuha që shton sjellje dhe logjikë në faqe web. Me të mund të reagosh ndaj klikimeve, të ndryshosh tekstin, të kontrollosh forma dhe të komunikosh me API.

Bazat

Objektivat

Të kuptosh rolin e JavaScript krahas HTML dhe CSS.
Të dish ku vendoset kodi JavaScript.
Të dallosh komandat, vlerat dhe output-in në faqe.

HTML është struktura, CSS është pamja, JavaScript është sjellja.

<script>
  console.log("Përshëndetje nga JavaScript");
</script>

JavaScript ekzekutohet nga browser-i. Kur faqja ngarkohet, browser-i lexon HTML-in, aplikon JS-in dhe pastaj mund të ekzekutojë JavaScript-in. Kjo e bën faqen të reagojë ndaj përdoruesit, pa pasur nevojë të rifreskohet çdo herë.

Në fillim është e rëndësishme të kuptosh se JavaScript punon me vlera: tekst, numra, boolean, lista, objekte dhe elementë të faqes. Kur di të lexosh dhe ndryshosh këto vlera, fillon të krijosh ndërveprim real.

1. Cili është roli kryesor i JavaScript në web?

Vetëm të vendosë ngjyra Të shtojë sjellje dhe logjikë Të zëvendësojë HTML-in

2. Cila komandë shfaq mesazh në console?

print.html() style.log() console.log()

Variabla dhe tipe të dhënash

Variablat ruajnë vlera që përdoren më vonë. Në JavaScript përdoren kryesisht const dhe let.

Të dhëna

<script>
  const emri = "Arta";
  let mosha = 22;
  const aktiv = true;

  console.log(emri, mosha, aktiv);
</script>

Çfarë duhet të mbash mend

const përdoret kur vlera nuk do të ri-caktohet.
let përdoret kur vlera mund të ndryshojë.
Tipet bazë janë string, number, boolean, array, object dhe null.

Laborator praktik: HTML Preview

Vendos shembullin në HTML Preview dhe hap console-in e browser-it. Ndrysho emrin, moshën dhe vlerën aktiv, pastaj vëzhgo çfarë printohet.

Operatorë dhe kushte

Kushtet lejojnë programin të marrë vendime. Me if, else dhe operatorët krahasues kontrollon rrjedhën e kodit.

Logjikë

Operatorë të zakonshëm

=== kontrollon barazi strikte.
!== kontrollon ndryshim strikt.
>, <, >=, <= krahasojnë numra.
&& kërkon që dy kushte të jenë të vërteta.

<script>
  const piket = 82;

  if (piket >= 70) {
    console.log("Kalove testin");
  } else {
    console.log("Provo përsëri");
  }
</script>

Kushtet janë thelbi i logjikës në aplikacione. Një formë kontakti kontrollon nëse emaili është plotësuar. Një kuiz kontrollon nëse përgjigjja është e saktë. Një panel admin kontrollon nëse përdoruesi ka akses.

Funksionet

Funksionet grupojnë kod që mund të ripërdoret. Ato marrin parametra, kryejnë veprime dhe shpesh kthejnë rezultat.

Ripërdorim

<script>
  function llogaritTotalin(cmimi, sasia) {
    return cmimi * sasia;
  }

  const totali = llogaritTotalin(15, 3);
  console.log(totali);
</script>

Pse duhen?

Shmangin përsëritjen e kodit.
E bëjnë logjikën më të lexueshme.
Ndihmojnë testimin e pjesëve të vogla të programit.

1. Çfarë bën return?

Ndryshon ngjyrën Kthen një rezultat nga funksioni Mbyll HTML-in

2. Parametrat përdoren për...

t'i dërguar vlera funksionit të hapur imazhe të shkruar JS direkt

Array dhe metoda

Array ruan disa vlera në një listë. Me metoda si map, filter dhe forEach mund të punosh me të dhëna në mënyrë elegante.

Lista

Metoda të zakonshme

forEach kalon në çdo element.
map krijon array të ri të transformuar.
filter krijon array të ri me elementë që plotësojnë kusht.

<script>
  const piket = [55, 80, 92, 40];
  const kaluesit = piket.filter(pike => pike >= 70);

  console.log(kaluesit);
</script>

Objekte dhe JSON

Objektet ruajnë të dhëna me çifte emër-vlerë. JSON është format shumë i përdorur për shkëmbim të dhënash me API.

Strukturë të dhënash

<script>
  const kursanti = {
    emri: "Elira",
    kursi: "JavaScript",
    aktiv: true
  };

  console.log(kursanti.emri);
</script>

Përdorimi

Objektet përfaqësojnë entitete reale.
Vlerat lexohen me pikë: objekti.prona.
JSON përdoret shpesh në përgjigjet e API-ve.

1. Funksionet ndihmojnë për...

ripërdorim dhe organizim kodi vetëm ngjyra fshirje të browser-it

2. map zakonisht...

fshin dokumentin krijon array të ri të transformuar ndryshon URL-në

3. Objektet ruajnë të dhëna si...

vetëm tag-e vetëm rreshta JS çifte emër-vlerë

DOM: lexim dhe ndryshim i faqes

DOM është përfaqësimi i faqes si objekt në JavaScript. Me DOM mund të zgjedhësh elementë dhe t'u ndryshosh tekstin, klasat ose atributet.

DOM

<h1 id="title">Titulli i vjetër</h1>

<script>
  const title = document.querySelector("#title");
  title.textContent = "Titulli i ri";
  title.classList.add("active");
</script>

Metoda të rëndësishme

querySelector zgjedh elementin e parë që përputhet.
textContent ndryshon tekstin.
classList shton ose heq klasa JS.

Evente dhe forma

Eventet ndodhin kur përdoruesi klikon, shkruan, dërgon formë ose ndërvepron me faqen. JavaScript i dëgjon këto veprime dhe reagon.

Interaktivitet

Evente të zakonshme

click për klikim.
input kur ndryshon fusha.
submit kur dërgohet forma.

<form id="form">
  <input id="name" placeholder="Emri">
  <button>Dërgo</button>
</form>

<script>
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    console.log(name.value);
  });
</script>

1. Cili event përdoret kur forma dërgohet?

paint grid submit

2. Pse përdoret event.preventDefault() në formë?

Për të ndryshuar fontin Për të ndalur dërgimin/rifreskimin e parazgjedhur Për të fshirë input-in gjithmonë

LocalStorage dhe API bazë

Me localStorage ruan të dhëna në browser. Me fetch merr ose dërgon të dhëna nga një server/API.

Të dhëna reale

<script>
  localStorage.setItem("tema", "dark");
  const tema = localStorage.getItem("tema");

  fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data));
</script>

Kujdes

LocalStorage ruan tekst në browser.
Fetch është asinkron.
API-të mund të dështojnë, prandaj duhen trajtuar gabimet.

Projekt final: mini-aplikacion detyrash

Në projektin final bashkon DOM, evente, array dhe localStorage për të krijuar një mini-aplikacion detyrash.

Projekt

<input id="taskInput" placeholder="Detyrë e re">
<button id="addTask">Shto</button>
<ul id="tasks"></ul>

<script>
  const tasks = [];

  addTask.addEventListener("click", function () {
    tasks.push(taskInput.value);
    tasks.innerHTML = tasks.map(task => "<li>" + task + "</li>").join("");
  });
</script>

Kriteret

Ka input dhe buton.
Shton elementë në listë.
Kontrollon vlerat bosh.
Ruan detyrat në localStorage.

1. Çfarë duhet të përdorë projekti final?

Vetëm tekst statik DOM, evente dhe të dhëna Vetëm JS

2. Pse kontrollohet input-i bosh?

Për të shmangur detyra pa tekst Për të fshirë browser-in Për të ndryshuar domain

Provimi përfundimtar

Për të marrë certifikatën duhet të kalosh provimin me të paktën 70%.

Të dhënat për certifikatë

Shkruaj emrin dhe mbiemrin ashtu si do të shfaqen në certifikatën e përfundimit.

Certifikata e përfundimit

Mund ta printosh ose ta ruash si PDF nga dritarja e printimit.

JS

Certifikatë përfundimi

JavaScript Profesional në Shqip

Kjo certifikatë i jepet

Emri Mbiemri

për përfundimin me sukses të kursit me mësime, ushtrime praktike, mini-teste dhe provim final.

Rezultati0%

Data--/--/----

NiveliBazë Profesional