JavaScript nuo nulio

Kodėl JavaScript, o ne kas nors kitas?

Jei esi pradedantysis ir galvoji, kurią programavimo kalbą mokytis pirma – atsakymas beveik visada bus JavaScript. Ne todėl, kad ji tobula (ji tikrai nėra), bet todėl, kad ji yra visur. Kiekvienas naršyklėje atidarytas puslapis greičiausiai naudoja JavaScript. Kiekvienas mygtukas, kuris kažką daro be puslapio perkrovimo, kiekvienas animuotas elementas, kiekviena forma, kuri patikrina, ar įvedei teisingą el. paštą – visa tai JavaScript darbas.

Be to, JavaScript yra viena iš nedaugelio kalbų, kurią gali paleisti tiesiogiai naršyklėje – nereikia jokių papildomų įrankių, kompiliatorių ar sudėtingų konfigūracijų. Atidarai naršyklę, spaudžiai F12, eini į Console skirtuką ir jau gali rašyti kodą. Tai labai žema įėjimo riba, kuri leidžia greičiau pamatyti rezultatus ir nesustoti ties techniniais barjerais.

Dar vienas argumentas – JavaScript bendruomenė yra milžiniška. Tai reiškia, kad bet kokią problemą, su kuria susidursi, kažkas jau yra sprendęs ir atsakymą rasite Stack Overflow, GitHub ar kokiame nors YouTube kanale. Mokymosi resursų gausa kartais net pribloškia, bet tai geriau nei jų trūkumas.

Pirmieji žingsniai: kintamieji, tipai ir operatoriai

Kiekviena programa iš esmės dirba su duomenimis – juos saugo, keičia ir perduoda. JavaScript kintamiesiems deklaruoti naudojami trys raktažodžiai: var, let ir const. Trumpai pasakysiu – var pamiršk. Tai senas būdas, kuris turi keistų elgesio ypatybių dėl vadinamojo hoisting mechanizmo. Naudok let kintamiesiems, kurie keisis, ir const tiems, kurie neturėtų keistis.

let vardas = "Tomas";
const gimimo_metai = 1995;
let amzius = 2024 - gimimo_metai;

console.log(vardas); // Tomas
console.log(amzius); // 29

JavaScript yra dinamiškai tipizuota kalba – tai reiškia, kad kintamojo tipą nustato pats interpretatorius pagal priskirtos reikšmės pobūdį. Pagrindiniai tipai:

• String – tekstas, rašomas kabutėse: "labas" arba 'labas'
• Number – skaičiai, tiek sveiki, tiek slankiojo kablelio: 42, 3.14
• Boolean – loginė reikšmė: true arba false
• Null – tyčia priskirta tuščia reikšmė
• Undefined – kintamasis deklaruotas, bet reikšmė nepriskirta
• Object – sudėtinis tipas, apie kurį kalbėsime vėliau

Vienas iš dažniausių pradedančiųjų klaidų šaltinių – tipo konversijos. JavaScript kartais automatiškai konvertuoja tipus, ir tai gali sukelti netikėtus rezultatus. Pavyzdžiui, "5" + 3 duos "53" (eilutė), o ne 8 (skaičius). Todėl visada naudok griežtą lygybės operatorių ===, o ne ==, kuris prieš palyginimą atlieka tipo konversiją.

Sąlygos ir ciklai – kaip programa „mąsto”

Programa, kuri visada daro tą patį, yra labai ribota. Tikrasis programavimo grožis prasideda tada, kai kodas gali priimti sprendimus pagal duomenis. Tam naudojamos sąlyginės konstrukcijos.

const temperatūra = 15;

if (temperatūra > 25) {
  console.log("Karšta, dėk trumpas kelnes");
} else if (temperatūra > 10) {
  console.log("Normalu, bet imk striukę");
} else {
  console.log("Šalta, renk šiltai");
}

Kitas svarbus įrankis – ciklai. Jie leidžia kartoti veiksmus tiek kartų, kiek reikia, be to, kad rašytum tą patį kodą dešimt kartų. Dažniausiai naudojamas for ciklas:

for (let i = 0; i < 5; i++) {
  console.log("Iteracija numeris: " + i);
}

Taip pat labai naudingas forEach metodas, kai dirbi su masyvais:

const vaisiai = ["obuolys", "kriaušė", "bananas"];

vaisiai.forEach(function(vaisius) {
  console.log("Turiu: " + vaisius);
});

Praktinis patarimas: kai rašai ciklą, visada pagalvok apie išėjimo sąlygą. Begalinis ciklas – viena iš labiausiai erzinančių klaidų, kuri tiesiog užšaldo programą. Jei naudoji while ciklą, įsitikink, kad sąlyga kada nors taps false.

Funkcijos – kodo blokai, kurie dirba už tave

Funkcija yra vienas svarbiausių programavimo konceptų. Iš esmės tai yra pavadintas kodo blokas, kurį gali iškviesti bet kada ir bet kiek kartų. Funkcijos padeda išvengti kodo kartojimo (DRY principas – Don't Repeat Yourself) ir daro kodą lengviau skaitomą bei prižiūrimą.

function apskaičiuotiPlotas(plotis, aukštis) {
  return plotis * aukštis;
}

const kambarysA = apskaičiuotiPlotas(5, 4); // 20
const kambarysB = apskaičiuotiPlotas(3, 6); // 18

console.log("Kambario A plotas: " + kambarysA + " m²");

JavaScript turi ir modernesnį funkcijų rašymo būdą – rodyklių funkcijas (arrow functions), įvestas ES6 standarte:

const apskaičiuotiPlotas = (plotis, aukštis) => plotis * aukštis;

// Arba su keliais veiksmais:
const sveikintis = (vardas) => {
  const žinutė = "Labas, " + vardas + "!";
  return žinutė;
};

Rodyklių funkcijos yra trumpesnės ir dažnai naudojamos kaip argumentai kitoms funkcijoms (callback'ai). Tačiau jos turi vieną svarbų skirtumą nuo įprastų funkcijų – kitaip elgiasi su this raktažodžiu. Kol nesupranti šio skirtumo, geriau naudok įprastas funkcijas ten, kur this svarbus.

Rekomenduoju praktikuotis rašant mažas, vieną dalyką darančias funkcijas. Funkcija, kuri daro dešimt skirtingų dalykų, yra sunkiai testuojama ir prižiūrima. Tai vadinama Single Responsibility Principle – kiekviena funkcija turėtų turėti vieną aiškią atsakomybę.

Masyvai ir objektai – duomenų organizavimas

Realiame gyvenime retai dirbama su vienu kintamuoju. Dažniausiai reikia saugoti ir apdoroti duomenų kolekcijas. Tam JavaScript turi du pagrindinius įrankius – masyvus ir objektus.

Masyvas yra surikiuota reikšmių kolekcija, pasiekiama per indeksą (numerį, pradedant nuo 0):

const studentai = ["Agnė", "Mantas", "Rūta", "Erikas"];

console.log(studentai[0]); // Agnė
console.log(studentai.length); // 4

studentai.push("Viktorija"); // prideda į pabaigą
studentai.pop(); // pašalina paskutinį

Labai naudingi masyvų metodai, kuriuos verta išmokti kuo greičiau: map(), filter() ir reduce(). Jie leidžia transformuoti, filtruoti ir agreguoti duomenis be sudėtingų ciklų:

const skaičiai = [1, 2, 3, 4, 5, 6, 7, 8];

const lyginiai = skaičiai.filter(n => n % 2 === 0);
// [2, 4, 6, 8]

const padvigubinti = skaičiai.map(n => n * 2);
// [2, 4, 6, 8, 10, 12, 14, 16]

const suma = skaičiai.reduce((acc, n) => acc + n, 0);
// 36

Objektas – tai raktų ir reikšmių poros (key-value pairs). Jis puikiai tinka aprašyti kažką, kas turi kelis požymius:

const automobilis = {
  markė: "Toyota",
  modelis: "Corolla",
  metai: 2020,
  spalva: "pilka",
  važiuoti: function() {
    console.log("Važiuojam!");
  }
};

console.log(automobilis.markė); // Toyota
automobilis.važiuoti(); // Važiuojam!

Objektai gali turėti ne tik duomenis, bet ir funkcijas (vadinamas metodais). Tai yra objektinio programavimo pagrindas, kurį JavaScript įgyvendina savaip – per prototipus ir klases.

DOM manipuliacija – kai JavaScript susitinka su HTML

Vienas iš pagrindinių JavaScript panaudojimo atvejų naršyklėje – HTML puslapio keitimas realiu laiku. Tai daroma per DOM (Document Object Model) – tai yra HTML dokumento struktūros reprezentacija kaip objektų medis, kurį JavaScript gali skaityti ir keisti.

// Rasti elementą pagal ID
const mygtukas = document.getElementById("manoMygtukas");

// Rasti elementus pagal klasę
const antraštės = document.querySelectorAll(".antraštė");

// Pakeisti tekstą
mygtukas.textContent = "Naujas tekstas";

// Pakeisti stilių
mygtukas.style.backgroundColor = "blue";

// Pridėti įvykių klausytoją
mygtukas.addEventListener("click", function() {
  alert("Mygtukas paspaustas!");
});

Praktinis patarimas: querySelector ir querySelectorAll yra modernesnės alternatyvos senesnėms funkcijoms kaip getElementById ar getElementsByClassName. Jie priima CSS selektorius, todėl yra lankstesni. Tačiau getElementById vis dar yra greičiausias būdas rasti vieną elementą pagal ID.

Vienas dažniausių klaidų – bandymas pasiekti DOM elementus prieš tai, kai HTML yra pilnai užkrautas. Jei tavo JavaScript kodas yra dokumento <head> dalyje, elementų gali dar nebūti. Sprendimas – arba dėk skriptą prieš uždaromąjį </body> žymą, arba naudok DOMContentLoaded įvykį:

document.addEventListener("DOMContentLoaded", function() {
  // Čia saugu dirbti su DOM
  const elementas = document.getElementById("kažkas");
});

Asinchroninis JavaScript – fetch, Promise ir async/await

Vienas iš konceptų, kuris labiausiai glumina pradedančiuosius, yra asinchroninis programavimas. JavaScript iš esmės yra vienos gijos kalba – tai reiškia, kad vienu metu gali vykdyti tik vieną operaciją. Bet kaip tada veikia tinklo užklausos, kurios užtrunka? Atsakymas – asinchroninis vykdymas.

Šiuolaikinis būdas dirbti su asinchroninėmis operacijomis – async/await sintaksė, kuri daro kodą daug skaitomesnį:

async function gauti_duomenis() {
  try {
    const atsakas = await fetch("https://api.example.com/duomenys");
    const duomenys = await atsakas.json();
    console.log(duomenys);
  } catch (klaida) {
    console.error("Kažkas nutiko:", klaida);
  }
}

gauti_duomenis();

Svarbu suprasti, kad await gali būti naudojamas tik async funkcijoje. Ir visada – absoliučiai visada – apgaubk asinchroninį kodą try/catch bloku. Tinklo užklausos gali nepavykti dėl tūkstančio priežasčių: nėra interneto, serveris neatsako, duomenys grįžta netinkamu formatu. Klaidos apdorojimas nėra pasirinktinis – tai būtina dalis.

Prieš async/await buvo naudojami Promise objektai su .then() ir .catch() metodais. Juos vis dar sutiksi senesniame kode ir bibliotekose, todėl verta suprasti ir šį stilių:

fetch("https://api.example.com/duomenys")
  .then(atsakas => atsakas.json())
  .then(duomenys => console.log(duomenys))
  .catch(klaida => console.error(klaida));

Nuo pirmų eilučių iki tikrų projektų – kaip toliau?

JavaScript mokymasis yra maratonas, ne sprintas. Galima išmokti sintaksę per savaitę, bet tikrai suprasti kalbą – jos asinchroninį modelį, prototipų grandinę, uždarumus (closures), kontekstą (this) – užtrunka mėnesius aktyvios praktikos. Ir tai normalu.

Geriausia, ką gali padaryti – kaip galima greičiau pradėti kurti realius, nors ir mažus projektus. Teorija be praktikos greitai išgaruoja. Štai keletas idėjų, kurios puikiai tinka pradedantiesiems:

• Skaičiuotuvas su HTML/CSS/JS
• Užduočių sąrašas (todo list) su galimybe pridėti ir ištrinti įrašus
• Orų programėlė, naudojanti nemokamą API (pvz., OpenWeatherMap)
• Atsitiktinių citatų generatorius
• Paprasta viktorina su klausimais ir atsakymais

Kalbant apie mokymosi resursus – MDN Web Docs (developer.mozilla.org) yra absoliutus standartas. Tai oficiali dokumentacija, kuri yra tikslesnė ir išsamesnė nei bet kuri kita. javascript.info yra puikus interaktyvus vadovėlis lietuviškai mąstančiam žmogui – struktūruotas, su užduotimis ir paaiškinimais. YouTube kanalai kaip Traversy Media ar The Net Ninja puikiai tinka vizualiai besimokantiems.

Vienas dalykas, kurį dažnai ignoruoja pradedantieji – naršyklės developer tools. Išmok naudoti debugger'į, stebėk Network skirtuką, kai darai fetch užklausas, naudok Console ne tik klaidoms matyti, bet ir eksperimentams. Šie įrankiai yra tavo geriausi draugai, ir kuo anksčiau su jais susipažinsi, tuo greičiau rasite ir taisysi klaidas.

JavaScript ekosistema yra milžiniška ir kartais gąsdinanti – React, Vue, Angular, Node.js, TypeScript, Webpack, Vite... Neišsigąsk. Visa tai ateina vėliau. Pirmiausia – tvirtas pagrindas grynajame JavaScript (vadinamajame vanilla JS). Kai suprasi, kaip veikia kalba be jokių bibliotekų, bet kuri iš šių technologijų atrodys daug natūraliau. Skubėjimas prie React neišmokus JavaScript yra kaip bandymas vairuoti neišmokus važiuoti dviračiu – techniškai gali pavykti, bet kiekviena kliūtis taps siena.