Kodėl JavaScript, o ne kas nors kitas?
Jei esi tik pradedantis kelionę į programavimą ir galvoji, kurią kalbą rinktis pirmiausia, atsakymas dažniausiai būna tas pats – JavaScript. Ne todėl, kad tai kažkokia magija ar universalus sprendimas viskam, bet todėl, kad tai vienintelė kalba, kuri veikia tiesiogiai naršyklėje. Atidarai tekstinį redaktorių, parašai kelias eilutes kodo, atsidarai failą naršyklėje – ir viskas veikia. Jokių papildomų įrankių, jokių kompiliatorių, jokio serverio konfigūravimo.
Python irgi populiarus pasirinkimas pradedantiesiems, bet jei nori matyti rezultatus ekrane, reikia papildomų žingsnių. Java? Geriau nepradėk nuo jos – tai kaip mokytis vairuoti sunkvežimiu, kai dar nesi sėdęs prie automobilio vairo. JavaScript leidžia iš karto matyti, ką darai, ir tai yra didžiulis psichologinis pranašumas, ypač pradžioje, kai motyvacija dar trapi.
Be to, JavaScript šiandien naudojamas ne tik naršyklėse. Su Node.js gali rašyti serverio kodą, su React Native – kurti mobiliąsias aplikacijas, su Electron – desktop programas. Tai reiškia, kad išmokęs vieną kalbą, gauni prieigą prie labai plačios ekosistemos. Tai nėra priežastis viską mokytis iš karto, bet žinoti, kad ateityje turėsi kur augti – tikrai motyvuoja.
Aplinkos paruošimas: kuo paprasčiau, tuo geriau
Prieš rašant pirmą kodo eilutę, reikia susitvarkyti darbo aplinką. Ir čia dažna klaida – pradedantieji pradeda skaityti apie dešimt skirtingų redaktorių, lygina juos, ieško „geriausio”, ir praėjus valandai dar nepradėjo mokytis JavaScript. Nedaryk to.
Parsisiųsk Visual Studio Code – ir tiek. Tai nemokamas, lengvas, ir šiuo metu populiariausias kodo redaktorius tarp web kūrėjų. Jis turi integruotą terminalą, spalvotą sintaksę, ir daugybę plėtinių, kurie palengvins gyvenimą. Vėliau, jei norėsi, galėsi išbandyti kitus redaktorius, bet dabar tai nėra svarbu.
Sukurk naują aplanką savo kompiuteryje, pavadink jį, pavyzdžiui, javascript-mokymasis. Tame aplanke sukurk du failus:
index.html– pagrindinis HTML failasscript.js– čia rašysi JavaScript kodą
HTML faile minimaliai reikia tokio turinio:
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="UTF-8">
<title>Mano JavaScript</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>Ir dar vienas praktinis patarimas – įsidiek Live Server plėtinį VS Code. Jis automatiškai atnaujins naršyklę kiekvieną kartą, kai išsaugosi failą. Tai maža detalė, bet ji labai pagreitina mokymosi procesą, nes nereikia kiekvieną kartą rankiniu būdu perkrauti puslapio.
Kintamieji, duomenų tipai ir pirmosios klaidos
JavaScript kintamuosius galima deklaruoti trimis būdais: var, let ir const. Trumpas atsakymas – pamirški var. Tai senas būdas, kuris turi keistų elgesio ypatybių ir gali sukelti sunkiai randamų klaidų. Šiuolaikiniame JavaScript naudojami let ir const.
const naudoji, kai reikšmė nesikeičia. let – kai reikšmė gali keistis. Praktiškai tai atrodo taip:
const vardas = "Tomas";
let amzius = 25;
amzius = 26; // Tai veikia
vardas = "Jonas"; // Tai sukels klaidąDuomenų tipai JavaScript yra keletas pagrindinių:
- String – tekstas, rašomas kabutėse:
"Labas"arba'Labas' - Number – skaičiai:
42,3.14 - Boolean – loginė reikšmė:
truearbafalse - Array – sąrašas:
[1, 2, 3] - Object – objektas su savybėmis:
{ vardas: "Tomas", amzius: 25 } - undefined ir null – „nieko” reikšmės, bet skirtingos
Vienas iš dalykų, kuris pradedantiesiems sukelia daugiausiai painiavos – tai kaip JavaScript tvarko tipų konversiją. Pavyzdžiui:
console.log("5" + 3); // "53" – sujungia kaip tekstą
console.log("5" - 3); // 2 – atima kaip skaičiusTai vadinama type coercion – automatine tipų konversija. JavaScript bando „atspėti”, ką norėjai padaryti, ir ne visada atspėja teisingai. Todėl, kai lygini reikšmes, visada naudok === (griežtą lygybę), o ne ==. Pirmasis tikrina ir reikšmę, ir tipą. Antrasis – tik reikšmę, ir tai gali sukelti netikėtų rezultatų.
Funkcijos ir logika: čia prasideda tikrasis programavimas
Funkcijos – tai JavaScript širdis. Iš esmės, funkcija yra kodo blokas, kurį gali pavadinti ir vėliau iškviesti tiek kartų, kiek reikia. Tai leidžia vengti kodo kartojimo ir daro programą lengviau suprantamą.
function pasveikinti(vardas) {
return "Labas, " + vardas + "!";
}
console.log(pasveikinti("Tomas")); // "Labas, Tomas!"
console.log(pasveikinti("Gintarė")); // "Labas, Gintarė!"Šiuolaikiniame JavaScript dažnai naudojamos arrow functions – trumpesnė sintaksė:
const pasveikinti = (vardas) => {
return "Labas, " + vardas + "!";
};
// Dar trumpiau, jei funkcija grąžina vieną reikšmę:
const pasveikinti = (vardas) => "Labas, " + vardas + "!";Sąlyginiai sakiniai (if/else) leidžia programai „priimti sprendimus”:
const temperatūra = 15;
if (temperatūra > 20) {
console.log("Šilta diena!");
} else if (temperatūra > 10) {
console.log("Vėsoka, bet pakenčiama.");
} else {
console.log("Šalta. Imk striukę.");
}Ciklai leidžia kartoti veiksmus. Dažniausiai naudojamas for ciklas ir forEach metodas masyvams:
const vaisiai = ["obuolys", "bananas", "kriaušė"];
vaisiai.forEach((vaisius) => {
console.log("Man patinka " + vaisius);
});Praktinis patarimas: kiekvieną naują sąvoką iš karto išbandyk savo script.js faile. Neskaityk pasyviai – rašyk kodą. Net jei kopijuoji pavyzdžius, rašyk juos rankiniu būdu, o ne kopijuok ir įklijuok. Rankinis rašymas padeda įsiminti sintaksę daug greičiau.
DOM manipuliacija: kai kodas pradeda keisti puslapį
Vienas iš labiausiai motyvuojančių momentų mokantis JavaScript – kai supranti, kad gali keisti tai, ką matai naršyklėje, tiesiogiai iš kodo. Tai vadinama DOM manipuliacija. DOM (Document Object Model) – tai naršyklės sukurtas medžio tipo atvaizdas viso HTML dokumento.
Pradėkime nuo paprasčiausio pavyzdžio. Pridėk HTML faile elementą:
<h1 id="pavadinimas">Senas tekstas</h1>
<button id="mygtukas">Spustelėk mane</button>Dabar script.js faile:
const mygtukas = document.getElementById("mygtukas");
const pavadinimas = document.getElementById("pavadinimas");
mygtukas.addEventListener("click", () => {
pavadinimas.textContent = "Tekstas pasikeitė!";
pavadinimas.style.color = "red";
});Atsidaryk naršyklėje, spustelėk mygtuką – ir pamatysi, kaip tekstas pasikeičia. Tai yra tas momentas, kai daugelis pradedančiųjų pirmą kartą jaučia tikrą pasitenkinimą – kodas daro kažką matomo ir realaus.
Keletas dažniausiai naudojamų DOM metodų, kuriuos verta žinoti:
document.getElementById("id")– randa elementą pagal IDdocument.querySelector(".klase")– randa pirmą elementą pagal CSS selektoriųdocument.querySelectorAll("p")– randa visus atitinkančius elementuselement.textContent– keičia elemento tekstąelement.innerHTML– keičia HTML turinį (atsargiai su saugumu!)element.classList.add("klase")– prideda CSS klasęelement.classList.remove("klase")– pašalina CSS klasę
Svarbu žinoti: innerHTML naudok atsargiai. Jei į jį įdedi naudotojo įvestus duomenis, gali atsirasti saugumo spragų (XSS atakos). Kol mokaisi – viskas gerai, bet tai svarbu prisiminti, kai pradėsi kurti realias aplikacijas.
Klaidos ir derinimas: kaip nesusipainioti, kai viskas „lūžta”
Klaidos programavime yra normalu. Tai nėra ženklas, kad esi blogas programuotojas – tai ženklas, kad programuoji. Net patyrusių kūrėjų kodas pilnas klaidų, tik jie žino, kaip jas greičiau rasti ir ištaisyti.
Pirmiausia susipažink su naršyklės kūrėjų įrankiais. Chrome naršyklėje spausk F12 arba dešiniu pelės klavišu spustelėk puslapį ir rinkis „Inspect”. Atsidaro skydelis su keliomis skiltimis – tau labiausiai reikalinga Console. Čia matysi visas klaidas ir console.log() išvestis.
Dažniausios klaidos, su kuriomis susidursi:
- ReferenceError – bandai naudoti kintamąjį, kuris nedeklaruotas. Dažniausiai tai rašybos klaida.
- TypeError – bandai atlikti veiksmą su netinkamo tipo reikšme, pavyzdžiui, kvieti funkciją ant
null. - SyntaxError – kode yra sintaksės klaida, pavyzdžiui, trūksta skliaustų ar kabliataškio.
console.log() yra tavo geriausias draugas derinimo metu. Naudok jį dažnai, kad patikrintum kintamųjų reikšmes skirtinguose kodo etapuose:
function skaiciuoti(a, b) {
console.log("a reikšmė:", a);
console.log("b reikšmė:", b);
const rezultatas = a + b;
console.log("rezultatas:", rezultatas);
return rezultatas;
}Taip pat labai naudinga naudoti breakpoints naršyklės kūrėjų įrankiuose. Eik į „Sources” skiltį, rask savo JavaScript failą, spustelėk eilutės numerį – ir naršyklė sustabdys kodo vykdymą toje vietoje, leisdama patikrinti visų kintamųjų reikšmes tuo momentu. Tai daug galingiau nei console.log(), bet pradžiai console.log() visiškai pakanka.
Pirmasis projektas: užduočių sąrašas nuo A iki Z
Teorija yra gerai, bet tikras mokymasis įvyksta per praktiką. Klasikinis pirmasis projektas pradedantiesiems – užduočių sąrašas (todo list). Jis atrodo paprastai, bet apima visas pagrindines sąvokas: DOM manipuliaciją, įvykių klausymąsi, masyvus, funkcijas.
Pradėkime nuo HTML struktūros:
<div class="konteineris">
<h1>Mano užduotys</h1>
<div class="ivestis-grupe">
<input type="text" id="uzduotis-ivestis" placeholder="Nauja užduotis...">
<button id="prideti-myg">Pridėti</button>
</div>
<ul id="uzduociu-sarasas"></ul>
</div>Dabar JavaScript logika:
const ivestis = document.getElementById("uzduotis-ivestis");
const mygtukas = document.getElementById("prideti-myg");
const sarasas = document.getElementById("uzduociu-sarasas");
let uzduotys = [];
const prideti = () => {
const tekstas = ivestis.value.trim();
if (tekstas === "") return; // Nepadome tuščių užduočių
uzduotys.push({ tekstas: tekstas, atlikta: false });
ivestis.value = "";
atvaizduoti();
};
const atvaizduoti = () => {
sarasas.innerHTML = "";
uzduotys.forEach((uzduotis, indeksas) => {
const li = document.createElement("li");
li.textContent = uzduotis.tekstas;
if (uzduotis.atlikta) {
li.style.textDecoration = "line-through";
li.style.opacity = "0.5";
}
li.addEventListener("click", () => {
uzduotys[indeksas].atlikta = !uzduotys[indeksas].atlikta;
atvaizduoti();
});
const istrinti = document.createElement("button");
istrinti.textContent = "×";
istrinti.addEventListener("click", (e) => {
e.stopPropagation(); // Neleidžia suaktyvinti li click
uzduotys.splice(indeksas, 1);
atvaizduoti();
});
li.appendChild(istrinti);
sarasas.appendChild(li);
});
};
mygtukas.addEventListener("click", prideti);
ivestis.addEventListener("keypress", (e) => {
if (e.key === "Enter") prideti();
});Šis projektas turi visas pagrindines funkcijas: galima pridėti užduotis, pažymėti jas kaip atliktas, ir ištrinti. Kai tai veikia, galėsi pridėti papildomų funkcijų:
- Išsaugoti užduotis
localStorage, kad jos nedingtų perkrovus puslapį - Pridėti filtravimą (rodyti tik atliktas, tik neatliktas)
- Leisti redaguoti esamas užduotis
- Pridėti animacijas su CSS
Kur eiti toliau ir kaip nepasimesti
Baigęs pirmąjį projektą, greičiausiai jautiesi dvejopai – viena vertus, džiaugiesi, kad kažkas veikia, kita vertus, supranti, kiek dar nežinai. Tai normalu ir netgi gerai – tai reiškia, kad jau matai, ko dar reikia mokytis.
Keli konkretūs žingsniai, kurie padės judėti toliau:
Mokymosi resursai: MDN Web Docs yra geriausias JavaScript dokumentacijos šaltinis – jis išsamus, tikslus, ir nemokamas. javascript.info puikiai paaiškina sudėtingesnes sąvokas su pavyzdžiais. „Eloquent JavaScript” knyga yra nemokama internete ir laikoma viena geriausių JavaScript knygų pradedantiesiems.
Ką mokytis po pagrindų: Kai jautiesi patogiai su pagrindinėmis sąvokomis, sekantis žingsnis – asinchroninis JavaScript. Promises, async/await, fetch API. Tai leis tau bendrauti su serveriais ir gauti duomenis iš interneto. Po to – vienas iš populiarių framework’ų: React, Vue arba Svelte. Rekomenduočiau React, nes jis turi didžiausią bendruomenę ir daugiausia darbo rinkoje.
Kaip nepasimesti: Didžiausia klaida – „tutorial hell”. Tai situacija, kai žiūri vieną tutorialą po kito, bet niekada nepradedi savo projektų. Po kiekvieno naujo dalyko, kurį išmoksti, sukurk kažką savo – net jei tai maža ir paprasta. Tik taip tikrai įsisavinsi žinias.
Bendruomenė: Prisijunk prie Discord serverių, susijusių su web kūrimu. Klausk klausimų Stack Overflow. Sekyk kūrėjus Twitter/X. Programavimas nėra vienatvės sportas – bendruomenė labai padeda, ypač pradžioje, kai susiduri su problemomis, kurios atrodo neįveikiamos.
Ir paskutinis, bet galbūt svarbiausias dalykas – nuoseklumas svarbiau nei intensyvumas. Geriau mokytis 30 minučių kiekvieną dieną nei 8 valandas kartą per savaitę. Smegenys įsisavina informaciją geriau, kai ji kartojama reguliariai. Sukurk įprotį, o ne maratoną. JavaScript nėra lengva kalba, bet ji tikrai išmokstama – ir kiekvieną dieną, kai rašai kodą, tu jau esi programuotojas.
