Bazat e JavaScript

Gjuha që i bën faqet të veprojnë

Deri tani faqet e tua kanë strukturë nga HTML dhe pamje nga CSS, por thjesht rrinë aty. Nuk dinë të numërojnë, të vendosin, apo të reagojnë ndaj një klikimi. Për këtë të duhet një gjuhë e vërtetë programimi, dhe në web ajo gjuhë është JavaScript. Ajo e lejon faqen të reagojë: të kontrollojë një formular, të përditësojë një total, të shfaqë e të fshehë një mesazh. Nëse HTML është skeleti dhe CSS është boja, JavaScript është instalimi elektrik që i bën dritat të ndizen.

Lajmi i mirë është se ti tashmë di të programosh. Ciklet, kushtet, variablat dhe funksionet që mësove në Python kanë kushërinj të afërt këtu. Fjalët dhe shenjat e pikësimit ndryshojnë, por të menduarit është i njëjti.

Vendosja e JavaScript në një faqe

JavaScript e bashkon me faqen shumë si CSS-në: me një etiketë që tregon te një skedar i veçantë. Mbaje kodin në një skedar si script.js dhe ngarkoje afër fundit të body-t.

<body>
  <h1>Faqja ime</h1>
  <script src="script.js"></script>
</body>

Etiketa <script> e tërheq skedarin tënd dhe e ekzekuton, që kodi të veprojë mbi faqen. Ta ngarkosh në fund të body-t është zakon i mirë: shfletuesi e ndërton faqen së pari, dhe vetëm pastaj e ekzekuton skriptin tënd, kështu kodi e gjen gjithçka tashmë në vend.

Variablat dhe vlerat

Një variabël është një emër për një vlerë që do ta mbash. Në JavaScript zakonisht krijon një me fjalën kyçe let, që do të thotë se vlera mund të ndryshojë më vonë, ose const, që do të thotë se nuk duhet të ndryshojë.

let pike = 0;
const provaMax = 3;
pike = pike + 1;

Këtu pike nis te 0 dhe është e lirë të ndryshojë, ndaj rreshti i fundit e ngre te 1. provaMax është ngulitur te 3 dhe do të nxirrte gabim po të provoje ta ricaktoje. Vlerat me tekst, të quajtura vargje (strings), shkruhen në thonjëza: let emri = "Ada";. Një mënyrë e dobishme për të parë çfarë po bën kodi yt është console.log, që shtyp një vlerë te konsola e zhvilluesit në shfletues.

let total = 5 + 3;
console.log(total);

Kjo shtyp 8. Përdor console.log sa herë që do të kontrollosh se çfarë është vërtet një vlerë, jo çfarë supozon se është.

Funksionet

Një funksion është një bllok hapash me emër që mund ta ekzekutosh sa herë të duhet, kështu e shkruan logjikën një herë dhe e ripërdor. E përcakton me fjalën kyçe function, rendit çdo hyrje brenda kllapave, dhe kthen një rezultat me return.

function siperfaqjaDhomes(gjeresi, lartesi) {
  return gjeresi * lartesi;
}

let madhesia = siperfaqjaDhomes(4, 5);
console.log(madhesia);

siperfaqjaDhomes merr dy hyrje, i shumëzon, dhe kthen përgjigjen. Thirrja siperfaqjaDhomes(4, 5) kthen 20, të cilën e ruajmë te madhesia dhe e shtypim. I njëjti funksion punon për çdo çift numrash, dhe pikërisht kjo është e gjithë poenta: emërto një copë logjike një herë, pastaj thirre sa herë të duash.

Këshillë

JavaScript i mbyll fjalitë me pikëpresje dhe i mbështjell blloqet me kllapa gjarpërore, njësoj si rregullat e CSS-së por për logjikën. Nëse një funksion sillet çuditshëm, kontrollo që kllapat të përputhen dhe që të kesh shkruar vërtet return; një funksion pa return nuk kthen asgjë.

Një shembull i punuar: ndarja e një fature

Le të themi se disa shokë ndajnë një vakt dhe duan ta ndajnë koston njësoj, duke e rrumbullakosur çdo pjesë lart te numri i plotë më i afërt që askush të mos paguajë më pak. Kjo është punë e qartë për një funksion.

function pjesaPerPerson(total, persona) {
  return Math.ceil(total / persona);
}

console.log(pjesaPerPerson(1000, 3));
console.log(pjesaPerPerson(1000, 4));

pjesaPerPerson e pjesëton totalin me numrin e personave, dhe Math.ceil e rrumbullakos atë rezultat lart te numri i plotë tjetër. Me një faturë 1000 të ndarë në tri prints 334; të ndarë në katër shtyp 250. Vër re si logjika rri në një vend të vetëm: ndrysho numrat që i jep, dhe i njëjti funksion i përgjigjet çdo versioni të pyetjes. Ai ripërdorim, një përcaktim dhe shumë thirrje, është zakoni që kalon drejtpërdrejt nga puna jote në Python te shfletuesi.

Provoje tani

Krijo një script.js, ngarkoje nga një faqe me <script src="script.js"></script> në fund të body-t, dhe shkruaj një funksion që merr dy numra dhe kthen diçka të dobishme, si siperfaqjaDhomes. Thirre me numra të vërtetë, bëj console.log rezultatin, pastaj hap konsolën e zhvilluesit në shfletues për të lexuar çfarë shtypi.

Provo veten

HTML dhe CSS u përshkruan si strukturë dhe pamje. Me fjalët e tua, çfarë shton JavaScript që asnjëra prej tyre s'e jep dot?
Cili është ndryshimi mes deklarimit të një variable me let dhe me const, dhe si do të zgjidhje mes tyre?
Një funksion duhet të të kthejë një numër, por vlera që shtyp del bosh. Duke ditur si i kthejnë funksionet rezultatet, çfarë ka më shumë gjasa të mungojë?

Nga vjen ky mësim

Ndërtuar mbi

Data Structures and Algorithms: web development session

Kurset e alphaPlan ndërtohen mbi programe të zhvilluara në klasë, e nuk shpiken për web-in. Kur një pohim mbështetet mbi një standard të jashtëm ose mbi një rast të raportuar, ai emërtohet më sipër që ta kontrollosh vetë e të mos na besosh në fjalë.

Ky kurs u zhvillua nga alphaPlan Center mbi bazën e programeve të realizuara në partneritet me rrjetin American Corners.

Gjete diçka të paqartë, të vjetruar ose që mund të përmirësohet? Sugjero një përmirësim