A CodeBerry Programozóiskola “Programozási nyelvek” című cikksorozatából megtudhatjátok, hogy milyen alapvető jellemzői vannak az egyes programozási nyelveknek, mire alkalmasak, kinek érdemes választani őket.

Szeretnél online megtanulni programozni? Gyere, és próbáld ki az első 25 leckénket ingyen a CodeBerry Programozóiskolában!

Bevezetés a programozásba

Mi is a JavaScript?

Az általános célú, objektumorientált JavaScript magas szintű programozási nyelvként kezdő kódolók számára is kiváló választás. 

A JavaScript a web programnyelve. Szinte nincs is olyan oldal, ami a böngésződben megnyitva ne használna így vagy úgy JavaScriptet a felhasználói élmény javításához. Ezért olyan fontos része a JavaScript a modern programozó eszközkészletének. Tényleg semmi sem helyettesítheti igazán ezt a rugalmas nyelvet, ha kiemelkedő böngészőalapú élménnyel szeretnéd az oldaladhoz láncolni a vásárlókat, ügyfeleket vagy potenciális munkaadóidat. 

JavaScript kódból sok minden felépülhet. Szeretnél honlapot csinálni a gyors ütemben növekvő kutyazoknigyártó vállalkozásodnak? Esetleg egy böngészőben futtatható virtuális valóság-élményben modelleznéd, hogy milyen érzés anyóséknál tölteni a karácsonyt? Ehhez, és még sok egyéb nemes cél elérése érdekében is, feltétlenül szükséged lesz a JavaScript programozás elsajátítására.

Szóval ha az imént felsoroltak közül bármelyik megmozgatta a fantáziádat (vagy csak a munkahelyi vécén unatkozol épp), olvass tovább, hogy megismerkedhess a JavaScript programozás alapjaival, és ezzel megtedd az első lépést a webprogramozó nindzsává válásod felé.

 

 

Változók

A legjobb talán a változóknál kezdeni. A programozók változókban szeretnek tárolni mindenféle információt, amire a programnak szüksége lehet futás közben. A változók olyanok, mint a kis dobozok, amikbe dolgokat lehet tenni. A programozó farag kódból egy változót, majd megtölti valamivel, hogy később is könnyedén elő tudja venni, ha szüksége van rá.

De hogy lehet létrehozni a programban egy változót?

Hát így:

var myCoolVariable;

És ez mégis mit jelent?

Örülök, hogy érdekel. A fenti sor két részből áll, és a kettő együtt hozza létre a változót. Nézzük, mit csinálnak külön-külön.

  • var
    • A JavaScriptben ez egy úgynevezett foglalt szó. Ilyenből van egy jó pár ebben a programnyelvben, és mindegyiknek különleges funkciója van. Ez itt például szól a programnak, hogy most egy változót készülünk létrehozni.
  • myCoolVariable
    • Ez az úgynevezett változóazonosító, azaz a változó neve. Ezt angolul szokás megadni, de akár lehetne „cica” is vagy „empiriokriticizmus” (könyörgöm, ne használj az utóbbihoz hasonló változóneveket!). A változóazonosító segítségével tudunk később az adott változóra hivatkozni, ha erre szükség van.
    • A jó gyakorlat az, ha olyan nevet adsz a változóidnak, amik valamilyen módon utalnak az adott változó funkciójára. Ha például van egy változód, amiben az életkorodat tárolod, akkor azt érdemes myAge-nek nevezni, ami angolul annyit tesz: életkorom. Ha következetesen tartod magad ehhez, a programozótársaid imádni fognak, és apró ajándékokat fognak a lábad elé hurcolni.

Ez mind oké, de aztán mi van?

Emlékszel, amikor azt magyaráztam, hogy a változók olyanok, mint a kis dobozok? Nos, a fenti kód létrehozza ugyan a dobozt, de még nem tettünk bele semmit. Ez a következő lépés. Előtte viszont ejtsünk egy gyors szót a különböző adattípusokról.

A midattípusokról?

Adattípusoknak nevezzük a különböző fajta változókat, amiket létre lehet hozni. Szinte minden programozási nyelv rendelkezik ilyenekkel. Néhányuk ráadásul nagyon szigorúan veszi ezeket: már a legelején kisajtolják belőled, hogy milyen fajta változót akarsz létrehozni, amihez aztán végig tartanod is kell magad.

A JavaScript programozás nem ilyen. Itt nyugodtan létrehozhatsz egy adott típusú változót, hogy aztán később kényedre-kedvedre megváltoztasd, hiszen JavaScriptben a változók értékét és típusát szabadon meg lehet változtatni. Juhú! Itt aztán kiélheted magad rendesen!

És most következzék néhány a JavaScriptben elérhető adattípusok közül:

  • Number
    • A number, azaz szám adattípussal egy valamilyen számértékkel rendelkező változót határozhatunk meg. Egy ilyen változó elvileg mínusz végtelentől plusz végtelenig bármilyen értéket fel tud venni.
    • Ezenkívül a NaN különleges értéket is tárolhatja, ami angolul annak a rövidítése, hogy „nem szám” („Not a Number”). Ez leginkább akkor jön elő, ha valamit elhibáztál, és ezzel sikerült teljesen összezavarnod a JavaScriptet. Szegény JavaScript.
  • String
    • A string-típusú változók szöveget tartalmaznak, például olyanokat, hogy „Sziasztok!”, „Pápá!” vagy „egy aprócska kalapocska, benne csacska macska mocska”.
  • Boolean
    • A boolean adattípusba tartozó változók értéke csak true, azaz igaz, vagy false, azaz hamis lehet. Az ilyen változókat sokszor arra használjuk a kódban, hogy bizonyos döntéseket hozzunk meg a segítségükkel. Menjek vagy maradjak? A boolean tudja a megoldást.

Ha szeretnél a többi adattípussal is megismerkedni, kattints ide

Változók értékének megadása

Most lássuk, hogyan tudunk dolgokat pakolni a változókba. A következő kód például pont ezt csinálja:

myCoolVariable = 10;
myCoolVariable = ‘hello’;
myCoolVariable = true;

 

A fenti ábrán látható kódok három különböző adattípust rendelnek hozzá a myCoolVariable („az én kis szuper változóm”) nevű változóhoz: az első egy számértéket (10), a második egy string-, azaz szövegtípusú értéket (‘Sziasztok!’), az utolsó pedig egy booleant (true).

Változók egyidejű létrehozása és meghatározása

Persze a fenti két lépést egyszerre is végrehajthatjuk, így egy csapásra létrehozhatjuk a dobozt, és meg is tölthetjük azt:

var myCoolVariable = 10;

 

Itt egy soron belül hozzuk létre a myCoolVariable változót, és rendeljük hozzá a 10-es számértéket. Nem semmi!

Hivatkozás korábban meghatározott változókra

Az már önmagában nagyszerű, hogy létre tudunk hozni és meg tudunk határozni változókat. Hát még az milyen fantasztikus, ha fel is tudjuk őket később használni!

De mégis hogyan? Egyszerűen. Csak az azonosítóra lesz hozzá szükségünk.

var myCoolVariable = 10;
var myCoolVariableDouble = myCoolVariable + myCoolVariable;

 

Ezzel létrehoztuk a myCoolVariable változót, és hozzárendeljük a 10-es értéket. Aztán létrehoztunk még egy változót myCoolVariableDouble névvel, aminek pedig úgy határoztuk meg az értékét, hogy az legyen a myCoolVariable kétszer.

Úgyhogy a myCoolVariableDouble értéke most 20, nekünk pedig már két változónk is van a programunkban. Kettő! Gyere, apa, hozd a fényképezőgépet!

Elég a változókból

Ez nagyjából le is fedi a változók alapjait: most már létre tudjuk őket hozni, értéket tudunk hozzájuk rendelni és hivatkozni is tudunk rájuk. Ennél azonban sokkal többről szól a JavaScript programozás! Most, hogy ezzel megvolnánk, továbbmehetünk a dicsőségesebb dolgok irányába. Amilyenek például a feltételes állítások.

 

 

If állítások

Jó, most már értjük, hogyan működnek a változók, de hogy segíthetik világuralmi törekvéseinket? Ennek az egyik kézenfekvő módja az if állítások bevetése.

Az if állítások segítségével a programozók döntésalapú logikát tudnak beépíteni a kódjukba. Ez azt jelenti, hogy ezzel meg lehet mondani a programnak, hogy egy bizonyos feltétel alapján csináljon valamit. (Az angol „if” kifejezés annyit tesz magyarul, hogy „ha”.) Lássunk erre egy példát:

If (10 > 20) {
  // fusson le ez a kód
} else {
  // fusson le ez a kód
}

 

A {}-ek egy adott kódblokkot határolnak körül. Bizonyos JavaScript-eszközöknél, amilyen például az if állítás is, ilyen zárójelet kell használnunk a kód különböző részeinek az elválasztásához. 

Részleteiben ez valahogy így néz ki:

  • if
    • Ez is egy foglalt szó. Ez értesíti a programot arról, hogy az utána következő kód egy if állítás lesz.
  • (10 > 20)
    • Ez maga a feltétel. Ezt a program ki fogja értékelni, és az eredmény alapján dönti majd el, hogy hogyan tovább. A feltételnek mindig valamilyen booleanérték lesz az eredménye, tehát true (igaz) vagy false (hamis).
    • Ha a feltétel eredménye true, az if állítás lefuttatja a feltételt záró zárójel után közvetlenül álló kódblokkot. Ha a kiértékelés végén false eredményt kapunk, akkor ehelyett az else blokkban lévő kód lép érvénybe. Ez utóbbi történik esetünkben is, hiszen 10 nem nagyobb 20-nál.
  • else
    • Ez is egy kulcsszó a JavaScriptben. Angolul annyit tesz, hogy „egyébként”, és azt határozza meg, hogy mi történjen, ha a megadott feltétel hamisnak bizonyul a kiértékelés során, azaz nem teljesül. Az else kódblokkot nem kötelező megadni. Ha azonban megadod, azzal tulajdonképpen egy if / else állítást hozol létre.

Reméljük, ezzel már az is világossá vált, hogy miért van szükség a {}-ekre. A kódblokkok határainak egyértelmű meghatározása nélkül a programunk nem tudná, hogy mikor melyik kódot kéne lefuttatnia, abban az esetben, ha a feltételünk éppen true vagy false értéket kap.

Az if állítások az összetett programok alapvető építőköveinek számítanak. Ezeknek a beható ismerete elengedhetetlen ahhoz, hogy valakiből profi programozó váljék.

 

Ciklusok

A ciklusok szintén fontos eszközeink a JavaScript programozásban. Ahogy azt már a nevükből is sejteni lehet, ezek olyan kódblokkok, amik addig futnak újból és újból, amíg nem teljesül egy bizonyos előre megadott feltétel. Többféle ciklus létezik, de most ezek közül csak kettővel ismerkedünk meg. Ha sikerült felkeltenem az érdeklődésedet, akkor a cikkben itt-ott csatolt linkeken még többet is megtudhatsz ezekről a témákról.

 

A for ciklus

Először vegyük a for ciklust. Itt egy példa rá:

var numberOfIterations = 10;
 
for (var i = 0; i < numberOfIterations; i++) {
  // csinálj valamit 10-szer
}

 

Ez egy kicsit furcsának tűnhet így elsőre, de hidd el, sec-perc alatt megérted, ha lebontjuk. Nézzük is meg rögtön, hogy mit csinálnak a különböző részei:

  • var numberOfIterations = 10
    • Ezt már ismerjük: itt egyszerre hozunk létre és határozunk meg egy változót.
  • for (var i = 0; i < numberOfIterations; i++)
    • for
      • Egy újabb foglalt szó. Ez közli a programmal, hogy egy for ciklus következik.
    • var i = 0
      • Ismét létrehozunk egy változót, és hozzárendelünk egy értéket is. Annyi különlegesség azért van benne, hogy most mindezt egy for cikluson belül tesszük – így aztán az i nevű változónk csak és kizárólag az adott for cikluson belül fog létezni. Ha a ciklus véget ér, örökre búcsút inthetünk az i-nek. Agyő, i.
    • i < numberOfIterations
      • Ez a sor azt mondja a for ciklusnak, hogy csak addig fusson, amíg az i változó még kisebb mint a numberOfIterations értéke (10).
    • i++
      • Végül pedig ezzel a sorral utasítjuk a for ciklust, hogy minden egyes végrehajtott iteráció után növelje az i értékét eggyel.

Remélem ezzel sikerült valamivel áttekinthetőbbé tennem a for ciklusok működését. Tehát a ciklus létrehoz egy ideiglenes változót (i-t), amivel a megtett ciklusok számát tudja lekövetni, majd meghatározza a végrehajtás feltételét (csak akkor, ha i < valamilyen értéknél), végül pedig meghatározza, hogyan növeljük az i értékét ciklusonként (esetünkben úgy, hogy mindig hozzáadunk egyet, de itt aztán tényleg bármi állhatna).

Természetesen a for ciklus akkor a leghasznosabb, ha tudod, hogy hányszor szeretnél lefuttatni valamit. De mi van akkor, ha nem tudod? Olyankor jön képbe a while ciklus.

 

A while ciklus

A while ciklus valamivel egyszerűbb a for ciklusnál. Ő egyszerűen fog egy feltételt, és addig fut, amíg a feltétel igaz marad. Például:

var shouldKeepRunning = true;
 
while (shouldKeepRunning) {
  // futtass le valami kódot
 
  shouldKeepRunning = false;
}

 

Lebontva:

  • while
    • Szólunk a programnak, hogy készüljön fel egy while ciklusra.
  • (shouldKeepRunning)
    • Ez a feltétel. A ciklus addig fog futni, amíg a shouldKeepRunning értéke igaz. Ezt úgy is leírhatnánk, hogy shouldKeepRunning == true, de az egyszerűség kedvéért most így is megteszi.

A JavaScript ==-t használ két érték összehasonlításánál, mert az = ebben a nyelvben arra szolgál, hogy meghatározzuk valaminek az értékét. Tehát azzal, hogy if (10 == 20), igazából azt mondjuk, hogy „ha 10 egyenlő 20-szal”.

Ez a konkrét ciklus csupán egyszer fog lefutni, mivel mi már a legelső iterációnál false értéket adunk a shouldKeepRunning változónak. Ez persze valószínűleg kicsit másképp fog festeni egy általad írt programban, de fontos, hogy a ciklus végül leálljon egy adott ponton. Végtére is nem akarunk globális katasztrófát okozni egy végtelenített ciklussal.

Most a ciklusoknak csak ezt a két fajtáját vesszük át, de ha szeretnél a többivel is megismerkedni, mint amit itt felsoroltunk, kattintsd ide

 

Függvények

Az eddig elsajátított eszközeink kiváló szolgálatot tesznek kisebb, szekvenciális programoknál, de mi van, ha komolyabb szoftvereket is szeretnénk írni, amikben többször fel kell használni ugyanazokat a kódrészleteket? Egy biztos, nem akarjuk külön-külön bemásolgatni a kódot újból és újból. Hát, ilyenkor nyúlunk a függvényekért.

A függvények újrahasználható kódrészletek. Például:

function doSomething(argumentOne, argumentTwo) {
  // itt csinálj valamit
}

 

Ezt lebontva a következőt kapjuk:

  • function
    • Csak egy újabb JavaScript-kulcsszó.
  • doSomething
    • Ez a függvényazonosító, azaz a függvény neve. A változóazonosítókhoz hasonlóan ennek segítségével hivatkozhatunk az adott függvényre később a kódban.
  • (argumentOne, argumentTwo)
    • A zárójelbe foglalt kódot argumentumlistának nevezzük. A két, argumentOne és argumentTwo nevű érték változóként viselkedik a függvényen belül, szóval így is kell rájuk tekinteni. Egy pillanat múlva azt is látni fogjuk, hogyan tudjuk megadni ezeket az értékeket.

Minden, a function blokkon belüli kódot annyiszor futtathatunk le, ahányszor csak akarjuk – ehhez csupán annyit kell tennünk, hogy meghívjuk a függvényt, például így:

doSomething(10, 20);

 

Itt először a doSomething függvényazonosítót használjuk, majd átadunk neki két argumentumot: a 10-et és a 20-at. Ezek az átadott argumentumok fogják aztán átvenni a függvény argumentumlistájában szereplő argumentumok, tehát az argumentOne és az argumentTwo helyét. Itt számít a sorrend is: az argumentOne kapja a 10-es értéket, argumentTwo értéke pedig 20 lesz.

Abból a szempontból a függvények ugyanúgy működnek, mint a változók, hogy a függvényekre is csak azon a kódblokkon, illetve annak gyermekblokkjain belül lehet hivatkozni, ahol létre lettek hozva. Ha például egy függvényt egy if állítás kódblokkjában hoztál létre, akkor nem fogod tudni azon kívül használni.

A függvények nagyon fontos eszközök, ha összetett, dinamikus programokat szeretnénk írni, ezért az is fontos, hogy jól begyakoroljuk a használatukat. Ha többet szeretnél tudni a függvények használatáról, kattints ide

 

 

 

Mennyit kereshetsz JavaScript programozással?

Hazánkban jelenleg az alábbiak szerint alakulnak a JavaScripttel foglalkozó szakemberek fizetései:

Junior JS fejlesztő Bruttó 431.000 Ft
Medior JS fejlesztő Bruttó 697.000 Ft
Senior JS fejlesztő Bruttó 963.000 Ft-tól

Az adatok forrása: Fizetések.hu

 

A fizetési rangsorban egyébként az 59 . helyet foglalja el a JS programozás, a hölgyek egyelőre 4%-os arányban vannak jelen ezen a piacon. 

Az átlagéletkor 22 év, úgyhogy a fiatalos lendület ennél a pozíciónál is garantált.

Ha pedig részletesebben is érdekel, mennyit kereshetsz napjainkban programozóként, Fizetési kalauzunkban összegyűjtöttük a jelenlegi nemzetközi és hazai IT-s fizetéseket.

 

Hogyan tanulhatom meg a JavaScript programozást?

A JavaScript a kezdők számára is könnyen megtanulható nyelvek közé tartozik, ezért aztán a HTML és a CSS elsajátítása után sok programozó rögtön ezzel folytatja a tanulást. Akár a kliens oldalon, akár a backend területén szeretnél elhelyezkedni, ezzel a trióval már jó alapokkal fogsz rendelkezni, bármelyiket is választod.

Ha szeretnéd megtanulni a JS-t, érdemes az alábbi lépéseket követned:

Természetesen mint más fontos célkitűzéseknél, itt is fontos, hogy ne csak egy tanórára alapozz, hanem otthon is hozzátedd a tanuláshoz a kellő energiabefektetést. Első lépésként iratkozz be egy jó online, illetve intenzív tanfolyamra, ahol megtanulhatod a JavaScript progrmozás alapjait. Mivel más programnyelvekhez képest a JS elég jól olvasható és könnyen érthető, gond nélkül el lehet sajátítani mindenféle formális oktatás nélkül is.

Második lépésként olyan nyomtatott vagy digitális anyagokra lesz szükséged, amiből szabadidődben magad is tudod folytatni a tanulást. Rengeteg olyan könyv és útmutató, online videó és tananyag érhető el, ami bevezet a JavaScript programozás rejtelmeibe, de Youtube-on is olyan klassz, több részes videosorozatokat találtok, mint például ez itt.

Harmadik lépésként pedig keress olyan online közösségeket, fórumokat és üzenőfalakat, ahol tapasztalt JavaScript programozóktól kérhetsz segítséget. Gyakorolj kitartóan, és ha elakadsz, vagy nem találsz egyedül megoldást egy problémára, fordulj tanácsért a közösséghez. 

 

Mennyi idő alatt lehet megtanulni a JavaScript programozást?

Az, hogy mennyi idő alatt tudsz megtanulni egy programozási nyelvet, attól függ, hogy milyen módszerrel tanulsz, mennyire hatékonyan tudsz maradandó tudásra szert tenni, és hogy hetente hány órát fordítasz a tanulásra. Természetesen az sem mindegy, hogy mit jelent számodra az, hogy „megtanultál programozni”. Mindettől függetlenül a JS annyira egyszerű, hogy a lényege meglepően rövid idő alatt elsajátítható.

Még ha nincs is korábbi tapasztalatod a programozásban, valószínűleg pár nap vagy pár hét alatt már használható tudásra tehetsz szert a JavaScript területén. Ahhoz, hogy a JS kiegészítő funkcióit is megtanuld, és elég magabiztos tudásra és gyakorlatra tegyél szert ahhoz, hogy hivatásos fejlesztőként dolgozhass, valószínűleg nagyjából 3 hónapra lesz szükséged.

 

Honnan tudhatom, hogy nekem való-e a JavaScript programozás?

Ahhoz, hogy eldöntsd neked való-e egy programnyelv, először azt kell megnézned, hogy mennyire van összhangban a hosszú távú céljaiddal. Az eligazodásban segítségedre lehet a “Melyik programozási nyelvet válasszam?” című bejegyzés, ahol részletesen összeszedtük, hogy melyik programnyelvvel milyen karrierlehetőségek várnak rád.

Kezdőként remek választás lehet a JavaScript programozás. Segítségével a lehető leggyorsabban vághatsz bele a frontend fejlesztésbe és keresheted vissza a befektetett pénzedet. 

Ahhoz pedig, hogy a lehető legkönnyebben tudj elhelyezkedni, érdemes HTML-lel és CSS-szel kiegészítened a tudásod. Ezzel a három nyelvvel igazán sokoldalú programozó válhat belőled. A Codeberry webfejlesztő illetve a programozás alapjairól szóló tanfolyamain mindhárom nyelvvel részletesen foglalkozunk – ráadásul most első 25 leckénket ingyen is kipróbálhatod.

 

 

Összegzés

Ebben a cikkben átvettük a JavaScript programozás pár alapvető elemét, de érdemes ennél sokkal jobban is elmerülni a témában. A programozás egy gyakorlati készség, és mint ilyen, leginkább csak szorgalmas gyakorlás által lehet kellően elsajátítani. Erre számos lehetőséget nyújtanak a CodeAcademyhez, CodeSchoolhoz és Pluralsighthoz hasonló szolgáltatások azoknak, akik beszélnek angolul – magyarul pedig kiváló programokat kínálnak a Codeberry, (..) képzései. 

Ha nem tudod, melyik képzési forma illene hozzád a leginkább, less be a “Hogyan válasszunk a számtalan programozótanfolyam közül?” című cikkünkbe, ahol összeszedtük neked a programozóképzés összes alternatíváját annak előnyeivel és hátrányaival.

Remélem az itt olvasottak érdekesek voltak számodra, és hogy később is vissza tudsz nyúlni értük, ha szükséged lenne rá. Sok sikert a programozói pályához!

 

A CodeBerry Programozóiskola “Programozási nyelvek” című cikksorozatából megtudhatjátok, hogy milyen alapvető jellemzői vannak az egyes programozási nyelveknek, mire alkalmasak, kinek érdemes választani őket.

Bevezetés a programozásba

Szeretnél online megtanulni programozni? Gyere, és próbáld ki az első 25 leckénket ingyen a CodeBerry Programozóiskolában!