Javascript kezdő lépések
Ma kis bejegyzésem arról fog szólni ,hogy mit érdemes kezdő lépésenként megtanulni ,illetve ,hogyan érdemes haladni Javascripttel és néhány érdekesség is lesz node.js-sel kapcsolatban.
Tanulás
Szerencsére olyan világba élünk már ,ahol a web és webes technológiák nagyon gyorsan fejlődnek és ezért ezeknek a tanulása is egy fajta fejlődésen ment keresztül. Már nem könyvből kell tanulni ,hanem vannak olyan oldalak ahol interaktív módon lehet egy nyelvet megtanulni ,ami tökéletes a tanulás szempontjából. Előző cikkemben raktam be anyagokat ahhoz ,hogy mit érdemes elolvasni ,ha a tanuló inkább olvasós fajta és volt bent 2 interaktív. Én például codecademy segítségével tanultam meg Jquery-t használni. Javascripthez Eloquent és codeacademy-t használtam.
Mivel a Javascript elég megengedő ezért nagyon sok fajta stílusban kódolnak hozzá és ezek a stílusok néha teljesen eltérőék. Szóval aki tanult már Java ,c vagy c++-t annak is lehet újdonság ,mivel ezeknél a nyelveknél nagyon szépen megvan határozva a stílus és csak annyiban térnek el ,hogy hová rakjuk a zárójel párt ,viszont JS-ben már maga az alap stílus sem egyértelmű.
Én codeacademys stílust használom CA Stílus ,habár elég sokan mást is használnak.
Feladat
Ennél a résznél érdemes össze rakni egy saját kis komolyabb osztályt. Én például szerencsés voltam ,mert egyetemen azt a feladatot választottam ,hogy megcsináljak egy intervallumfát JS-ben ,de ezt csak azoknak ajánlom ,akik már tanultak ilyen adathalmazról vagy van kedve hozzá.
Habár ennek begyakorlására biztos jó lesz bármilyen egyszerű adatszerkezet. Például egy Mozi megvalósítása: néző hozzáadása és kivonása különböző pozíciókon ,egész mozi listázása.
De az igazán jó egy bináris fa megvalósítása lenne.
JS fájlok
Szóval eljutottunk addig ,hogy ismerjük a Javascriptet , annyira ,hogy össze tudunk hozni egy-két szép osztály ,de ahhoz hogy ezek kommunikálni tudjanak ugyanabban a fájlban kell lenniük kivéve ,ha html fájlba rakjuk be őket ,mert akkor ezzel nincs gond ,mivel ilyenkor a böngésző összefűzi a két vagy több js fájlunkat és így látják egymást ,habár ilyenkor nagyon fontos a sorrend ,ahogyan berakjuk őket.
Persze jöhetne az a kérdés ,hogy miért kell felbontani őket?
Egyszerűen azért ,hogy a kód szervezetessége nőjön ,mivel könnyebb 10x100 soros kódban eligazodni ,mint 1x1000 soros kódban ,hiszen már az is nagy feladat ,hogy megtaláljuk az adott részt 1000 soros kódban.
Szóval akkor ,mivel lehet JS fájlokat össze kapcsolni?
Erre az eszköz a require.js vagy pedig node.js-be beépített module ,amit lehet erre használni.
Html-nél és node-nál require.js lehet használni ,viszont ezzel még nincs tapasztalatom mivel csak a node megvalósítással dolgoztam ,ami kicsit eltérő és talán egyszerűbb is ,viszont weboldalon nem jó.
Dokumentációk: require.js , node require
Viszont én inkább a node megoldást ajánlom kezdetnek ,mivel egyszerűbb és úgy is ezt kell majd használni a következő feladatnál.
Feladat
Itt már bonyolultabb dolgokat is létre hozhatunk hiszen most ismerjük meg .hogy hogyan lehet más JS fájlokat használni egy másik JS fájlból. Itt már elérünk a szervettség olyan szintjére ,hogy elkezdhetünk akár egy egyszerű játék logikáját.
Én például Go nevű játéknak a logikáját kezdtem megvalósítani ,ami programozási szempontból nem a legkönnyebb választás volt szóval másnak nem ajánlom.
Itt játék logika alatt azt értem ,hogy egy játékot le tudunk játszani illetve le tudjuk tesztelni programozása közben ,miközben azt fejlesztjük.
Hol érdemes kezdeni egyáltalán mivel?
Én játékoknak ajánlom a sakk-ot ,arimaa-t vagy valamilyen egyszerű kártya játékot. Ilyen feladatokat szoktak kiadni egyetemen Java fejlesztés megtanulásához. Mivel nagyon jól megtanítja az OO programozás alapjait.
Elkezdeni érdemes táblás játékoknál magánál a tábla ,bábuk megvalósításával és ha kell a tábla állások kiíratásának megvalósításával. Kártya játékot még nem csináltam ,de azt is a kártyák megvalósításával lehet elkezdeni.
Ezután jöhet az egész lényege a lépések és ezekhez tartozó szabályok megvalósítása.
Szerintem minél könnyebb egy játék szabály rendszere annál nehezebb leprogramozni ,habár lehet ,hogy ezt csak a Go miatt írom. :D
Összegzés és tippek
Szóval ,amit ezzel a bejegyzéssel mondani akartam ,hogy haladjunk kis léptekben és tesztelgessünk.
Ne az legyen ,hogy elolvassuk a megoldást és úgy vagyunk vele ,hogy le is tudtuk ,mivel ez rossz gondolkodás mód ,mivel az ember mindig abból tanul ,amit csinál és kipróbál. Amit elmondtam már nagyon sokan mások írták le ,hogy a feladatokat mindig bontsuk fel kisebb és könnyebben megvalósítható részekre. Ez az egyik legfontosabb alapelve bármelyik mai nyelvnek.
Tanulási folyamat lassú lesz ,szóval erre mindenki számítson , főleg ha az ember egyedül tanulja.
Tanulás közben nagyon sok hibát fogunk véteni ,ami nem baj. Hibákra is úgy kell gondolni ,hogy ennek segítségével közelebb jutottam a célhoz. Szóval minél többet hibázol és tesztelsz .annál gyorsabban tanul az ember.
Nincs tökéletes kód és így tiéd sem lesz az. A lényeg ,hogy működjön és ha már működik ,akkor lehet a kódon szépíteni. Ezt saját káromon tanultam meg ,hogy sosem szabad túlságosan is rámenni arra ,hogy szép és tökéletes kódunk legyen ,mert ilyen nincs. Nem szabad emiatt több óráig azon rágódni ,hogy melyik a legszebb megoldás.
Főleg azért nincs tökéletes kód ,mert egyetlen problémát nagyon sok félképpen meg lehet oldani ,amit stackoverflow -on megfigyeltem. Ez az oldal is nagyon jó hely megoldások kereséséhez és kérdések feltevéséhez. Viszont a talált megoldást először meg kell értenünk és csak azután lehet alkalmazni.
Tesztelés Tipp
Általában node.js-ben kétfajta tesztelést alkalmazok arra ,hogy kigondoljam ,hogy hogyan oldjak meg egy problémát.
Első esett ,amikor valami nagyon kis kód részletet illetve viselkedést akarok vizsgálni például ,hogy tömböket ,hogy kell egyesíteni vagy ,hogy hogy teszteljek egy beépített metódust vagy függvényt.
Ehhez általában lusta vagyok ahhoz ,hogy egy új fájlt hozzak létre ,ezért ilyenkor node Repl -t használom ,amit egyszerűen konzolba a "node" parancsot beírva elindul.
A Read-Eval-Print-Loop (REPL) egy Javascript értelmező ,ami azonnal végrehajtja a begépelt kódunkat(habár előbb enter-t kell nyomni) . Ez ismerős lehet ,mert számos más nyelvnek van ilyen funkciója ,mint például Java,Python,Scala.
Ezekkel nagyon jól el lehet játszani és néha egy-egy ilyen Repl-nek van saját oldala ahol szintén lehet játszani egy adott nyelvvel.
Találtam egy oldalt ,ahol nagyon sok nyelv van közte JS is. repl.it
Második eset ,amikor már komolyabb dolgot akarok tesztelni ,mint például egy tömbből kivenni a duplikált elemeket azután ,hogy az elemeket sorba rendeztük.
Ennek két módja van:
Első a jól ismert "node jskódom.js"-sel való kód futtatás.
Második pedig ,amikor a fájl elejére biggyeszted ,hogy "#!/usr/bin/env node",amivel magát a fájlt teszed futtathatóvá. Akik már szórakoztak python,bash vagy awk-val azoknak ismerős lehet ez a módszer . Habár ezt a módszert akkor szokták alkalmazni ,amikor valami kis hétköznapi szokásukat akarják ezzel megkönnyíteni ,mint például ,hogy munka után készítsen a program(vagyis a script-ünk) egy biztonsági mentést a munkáról. Ahelyett ,hogy ctr+c és ctr+v -vel kellene mindig szórakozni.
Mind a két megoldást lehet használni ,de én az elsőt szoktam meg.
Ubuntu Tipp
Én legfőképp Ubuntu-t használok ,mivel elég népszerű ,egyszerű ,viszont még mindig alkalmas arra ,hogy az ember fejlesszen rajta. Tippem pedig hogy CTR+ALT+T segítségével lehet a terminált megnyitni. Érdemes ezt tudni ,mivel teszteléskor nagyon sokszor fog kelleni ,na meg minden fejlesztés kezdetén.
Persze itt a legnagyobb tipp az lenne ,hogy valamelyik linux disztribúciót használjuk :D
Hogyan tovább
A tanulás résszel ellentmondva viszont ,ha már megvannak az alapok ,akkortól már kevésbé lesznek olyan interaktív kurzusok ,amik tovább visznek minket egy magasabb szintre és innentől lesz az fontos ,hogy ránézzünk különböző könyvekre ,cikkekre ,tutorialokra és előadásokra ,amik elérhetőek a YouTube-on vagy különböző szociális hálókon ezeket megosztják. Szóval nem kell elutazni Amerikába azért ,hogy előadásokat hallgassunk JS-hez kapcsolódó rendezvényeken.
Tanulás
Szerencsére olyan világba élünk már ,ahol a web és webes technológiák nagyon gyorsan fejlődnek és ezért ezeknek a tanulása is egy fajta fejlődésen ment keresztül. Már nem könyvből kell tanulni ,hanem vannak olyan oldalak ahol interaktív módon lehet egy nyelvet megtanulni ,ami tökéletes a tanulás szempontjából. Előző cikkemben raktam be anyagokat ahhoz ,hogy mit érdemes elolvasni ,ha a tanuló inkább olvasós fajta és volt bent 2 interaktív. Én például codecademy segítségével tanultam meg Jquery-t használni. Javascripthez Eloquent és codeacademy-t használtam.
Mivel a Javascript elég megengedő ezért nagyon sok fajta stílusban kódolnak hozzá és ezek a stílusok néha teljesen eltérőék. Szóval aki tanult már Java ,c vagy c++-t annak is lehet újdonság ,mivel ezeknél a nyelveknél nagyon szépen megvan határozva a stílus és csak annyiban térnek el ,hogy hová rakjuk a zárójel párt ,viszont JS-ben már maga az alap stílus sem egyértelmű.
Én codeacademys stílust használom CA Stílus ,habár elég sokan mást is használnak.
Feladat
Ennél a résznél érdemes össze rakni egy saját kis komolyabb osztályt. Én például szerencsés voltam ,mert egyetemen azt a feladatot választottam ,hogy megcsináljak egy intervallumfát JS-ben ,de ezt csak azoknak ajánlom ,akik már tanultak ilyen adathalmazról vagy van kedve hozzá.
Habár ennek begyakorlására biztos jó lesz bármilyen egyszerű adatszerkezet. Például egy Mozi megvalósítása: néző hozzáadása és kivonása különböző pozíciókon ,egész mozi listázása.
De az igazán jó egy bináris fa megvalósítása lenne.
JS fájlok
Szóval eljutottunk addig ,hogy ismerjük a Javascriptet , annyira ,hogy össze tudunk hozni egy-két szép osztály ,de ahhoz hogy ezek kommunikálni tudjanak ugyanabban a fájlban kell lenniük kivéve ,ha html fájlba rakjuk be őket ,mert akkor ezzel nincs gond ,mivel ilyenkor a böngésző összefűzi a két vagy több js fájlunkat és így látják egymást ,habár ilyenkor nagyon fontos a sorrend ,ahogyan berakjuk őket.
Persze jöhetne az a kérdés ,hogy miért kell felbontani őket?
Egyszerűen azért ,hogy a kód szervezetessége nőjön ,mivel könnyebb 10x100 soros kódban eligazodni ,mint 1x1000 soros kódban ,hiszen már az is nagy feladat ,hogy megtaláljuk az adott részt 1000 soros kódban.
Szóval akkor ,mivel lehet JS fájlokat össze kapcsolni?
Erre az eszköz a require.js vagy pedig node.js-be beépített module ,amit lehet erre használni.
Html-nél és node-nál require.js lehet használni ,viszont ezzel még nincs tapasztalatom mivel csak a node megvalósítással dolgoztam ,ami kicsit eltérő és talán egyszerűbb is ,viszont weboldalon nem jó.
Dokumentációk: require.js , node require
Viszont én inkább a node megoldást ajánlom kezdetnek ,mivel egyszerűbb és úgy is ezt kell majd használni a következő feladatnál.
Feladat
Itt már bonyolultabb dolgokat is létre hozhatunk hiszen most ismerjük meg .hogy hogyan lehet más JS fájlokat használni egy másik JS fájlból. Itt már elérünk a szervettség olyan szintjére ,hogy elkezdhetünk akár egy egyszerű játék logikáját.
Én például Go nevű játéknak a logikáját kezdtem megvalósítani ,ami programozási szempontból nem a legkönnyebb választás volt szóval másnak nem ajánlom.
Itt játék logika alatt azt értem ,hogy egy játékot le tudunk játszani illetve le tudjuk tesztelni programozása közben ,miközben azt fejlesztjük.
Hol érdemes kezdeni egyáltalán mivel?
Én játékoknak ajánlom a sakk-ot ,arimaa-t vagy valamilyen egyszerű kártya játékot. Ilyen feladatokat szoktak kiadni egyetemen Java fejlesztés megtanulásához. Mivel nagyon jól megtanítja az OO programozás alapjait.
Elkezdeni érdemes táblás játékoknál magánál a tábla ,bábuk megvalósításával és ha kell a tábla állások kiíratásának megvalósításával. Kártya játékot még nem csináltam ,de azt is a kártyák megvalósításával lehet elkezdeni.
Ezután jöhet az egész lényege a lépések és ezekhez tartozó szabályok megvalósítása.
Szerintem minél könnyebb egy játék szabály rendszere annál nehezebb leprogramozni ,habár lehet ,hogy ezt csak a Go miatt írom. :D
Összegzés és tippek
Szóval ,amit ezzel a bejegyzéssel mondani akartam ,hogy haladjunk kis léptekben és tesztelgessünk.
Ne az legyen ,hogy elolvassuk a megoldást és úgy vagyunk vele ,hogy le is tudtuk ,mivel ez rossz gondolkodás mód ,mivel az ember mindig abból tanul ,amit csinál és kipróbál. Amit elmondtam már nagyon sokan mások írták le ,hogy a feladatokat mindig bontsuk fel kisebb és könnyebben megvalósítható részekre. Ez az egyik legfontosabb alapelve bármelyik mai nyelvnek.
Tanulási folyamat lassú lesz ,szóval erre mindenki számítson , főleg ha az ember egyedül tanulja.
Tanulás közben nagyon sok hibát fogunk véteni ,ami nem baj. Hibákra is úgy kell gondolni ,hogy ennek segítségével közelebb jutottam a célhoz. Szóval minél többet hibázol és tesztelsz .annál gyorsabban tanul az ember.
Nincs tökéletes kód és így tiéd sem lesz az. A lényeg ,hogy működjön és ha már működik ,akkor lehet a kódon szépíteni. Ezt saját káromon tanultam meg ,hogy sosem szabad túlságosan is rámenni arra ,hogy szép és tökéletes kódunk legyen ,mert ilyen nincs. Nem szabad emiatt több óráig azon rágódni ,hogy melyik a legszebb megoldás.
Főleg azért nincs tökéletes kód ,mert egyetlen problémát nagyon sok félképpen meg lehet oldani ,amit stackoverflow -on megfigyeltem. Ez az oldal is nagyon jó hely megoldások kereséséhez és kérdések feltevéséhez. Viszont a talált megoldást először meg kell értenünk és csak azután lehet alkalmazni.
Tesztelés Tipp
Általában node.js-ben kétfajta tesztelést alkalmazok arra ,hogy kigondoljam ,hogy hogyan oldjak meg egy problémát.
Első esett ,amikor valami nagyon kis kód részletet illetve viselkedést akarok vizsgálni például ,hogy tömböket ,hogy kell egyesíteni vagy ,hogy hogy teszteljek egy beépített metódust vagy függvényt.
Ehhez általában lusta vagyok ahhoz ,hogy egy új fájlt hozzak létre ,ezért ilyenkor node Repl -t használom ,amit egyszerűen konzolba a "node" parancsot beírva elindul.
A Read-Eval-Print-Loop (REPL) egy Javascript értelmező ,ami azonnal végrehajtja a begépelt kódunkat(habár előbb enter-t kell nyomni) . Ez ismerős lehet ,mert számos más nyelvnek van ilyen funkciója ,mint például Java,Python,Scala.
Ezekkel nagyon jól el lehet játszani és néha egy-egy ilyen Repl-nek van saját oldala ahol szintén lehet játszani egy adott nyelvvel.
Találtam egy oldalt ,ahol nagyon sok nyelv van közte JS is. repl.it
Második eset ,amikor már komolyabb dolgot akarok tesztelni ,mint például egy tömbből kivenni a duplikált elemeket azután ,hogy az elemeket sorba rendeztük.
Ennek két módja van:
Első a jól ismert "node jskódom.js"-sel való kód futtatás.
Második pedig ,amikor a fájl elejére biggyeszted ,hogy "#!/usr/bin/env node",amivel magát a fájlt teszed futtathatóvá. Akik már szórakoztak python,bash vagy awk-val azoknak ismerős lehet ez a módszer . Habár ezt a módszert akkor szokták alkalmazni ,amikor valami kis hétköznapi szokásukat akarják ezzel megkönnyíteni ,mint például ,hogy munka után készítsen a program(vagyis a script-ünk) egy biztonsági mentést a munkáról. Ahelyett ,hogy ctr+c és ctr+v -vel kellene mindig szórakozni.
Mind a két megoldást lehet használni ,de én az elsőt szoktam meg.
Ubuntu Tipp
Én legfőképp Ubuntu-t használok ,mivel elég népszerű ,egyszerű ,viszont még mindig alkalmas arra ,hogy az ember fejlesszen rajta. Tippem pedig hogy CTR+ALT+T segítségével lehet a terminált megnyitni. Érdemes ezt tudni ,mivel teszteléskor nagyon sokszor fog kelleni ,na meg minden fejlesztés kezdetén.
Persze itt a legnagyobb tipp az lenne ,hogy valamelyik linux disztribúciót használjuk :D
Hogyan tovább
A tanulás résszel ellentmondva viszont ,ha már megvannak az alapok ,akkortól már kevésbé lesznek olyan interaktív kurzusok ,amik tovább visznek minket egy magasabb szintre és innentől lesz az fontos ,hogy ránézzünk különböző könyvekre ,cikkekre ,tutorialokra és előadásokra ,amik elérhetőek a YouTube-on vagy különböző szociális hálókon ezeket megosztják. Szóval nem kell elutazni Amerikába azért ,hogy előadásokat hallgassunk JS-hez kapcsolódó rendezvényeken.