1/2B - Javascript alapok

Javascript bevezető

A Javascript nyelvet eredetileg azért hozták létre, hogy dinamikus tartalmakat adjanak hozzá az oldalakhoz, HTML elemeket manipuláljanak, gombnyomásra reagáljanak, eltárolják átmeneti számítások eredményeit kliens oldalon. A legtöbb böngésző támogatja, és könnyű megtanulni ezért olyan elterjedt.

Ez azt is jelenti, hogy ahhoz, hogy javascript-ben programozz, nincs másra szükséged mint egy böngészőre, illetve egy szövegszerkesztőre, mi azonban utóbbi helyett továbbra is vs code-ot fogunk használni. Hozzunk létre egy könyvtárban egy index.html oldalt és egy main.js fájlt, ahogy azt az 1/2 fejezetben látható. Spóroljunk a billentyűleütésekkel, és használjuk a html:5-re feljövő súgót, majd adjuk hozzá a <script>... sort. 

A main.js fájlba írd be, hogy

console.log('javascript works');

Ezután nyisd meg az index.html-t Chrome-ban, majd nyomd meg az F12-t és egy ablakot fogsz látni, ami kiírja javascript works.

A console.log egy böngésző által támogatott utasítás, aminek bemenő paraméterül lehet adni egy karakterláncot (továbbiakban string-et). A stringet javascript-ben két db ' vagy " között lehet megadni. Például

console.log('I love console')

console.log("I love console too")

-ra cseréld ki az utasítást visual studio code-ban, és utána F5-tel töltsd újra az oldalt. Az eredmény 2 db új sor. 

Változók

A változók olyan átmeneti tárolók, amikben értékeket tárolunk. A létrehozását deklarációnak hívják, amikor pedig értéket adunk neki, azt definiálásnak.

//Példa

var p; //deklaráció, a p értéket undefined lesz

var p2 = "hello" //deklarációval egybekötött definiálás

Az egyik legyakoribb Javascriptes hiba szerintem valami hasonló.

A változóknak különbőző típusúak lehetnek. Ezek

• undefined
• boolean
• number
• string
• object

Javascriptben nem szigorúan típusos programozási nyelv. Ez azt jelenti, hogy a változók típusa futás időben változhat. Egy változó típusát a typeof kulcsszóval lehet lekérdezni. Valójában javascript kódot a Chrome Console ablakába is be lehet írni, és kiértékeli ezeket a kódokat. Ez talán a legjobb módja, hogy kipróbálj valamit, ha bizonytalan vagy benne, hogyan is működik a javascript. Írd be sorban ezt a 4 utasítást.

Az utolsó sorban azt láthatod, hogyan lehet megadni egy object értékét javascriptben. Ez itt egy üres object. Az object Javascriptben kulcs-érték párokat tartalmaz. Hasonló egy JSON objektumhoz, csak itt a kulcs megadásánál opcionális a " karakter. A kulcsot JS-ben gyakrabban property-nek szokták hívni.

Egy érvényes javascript object például:

var myDog = {

    name:"Fanta",

    isFemale: true,

    age:8,

    favoriteHobby: "elvinni a papucsom, és megrágcsálni",

}

ha ezt beírod a Chrome console-ba és enter-t nyomsz, akkor undefined-ot ír ki. Ez azonban csak azt jelenti, hogy annak az utasításnak, amivel ezt az objektumot létrehozod nincs visszatérési értéke, lásd később a függvények fejezetben. Ha ismét beírod, hogy myDog és enter-t nyomsz, akkor a következőt látod.

A myDog objectnek 4 property-je van, ebből 2 string, 1 boolean, és egy number típusú. 

Függvények

A függvények olyan utasítássorozatok, amelyek egy adott céllal futnak le. Ezek az utasítás sorozatok akkor futnak le, ha valami meghívja őket. Például az alábbi kódsorban. A függvény deklarációjának helye a 7.sor. A meghívásának helye a 3. sor. Látható, hogy nem muszáj hogy a függvény deklarációja helyileg lehet később a kódban. Ez azért fontos, mert megengedi, hogy előbb szerepeljen egy fájlban a magasabb szintű (absztraktabb logika). 

Ez a függvény 2 bemenő paramétert használ. Ezek a és b. A függvény hívásának helyén adjuk meg ezek értékét (1,4) és ezek kerülnek behelyettesítésrea függvény törzsében. A függvény visszatérési értéke a return kulcsszóval adható meg. Ez az érték kerül a result változóba, amelyet később kiírunk. Logikailag a return kulszó mögötti érték kerül belyettesítésre a függvény meghívásának helyére.