Mielőtt beleugranál a kódolásba, egy kicsit beszéljünk arról, hány helyre lehet JavaScriptet írni, és hogy ezek között mi a különbség.

A .js fájl

Weboldalak készítésekor, amikor a saját számítógépeden fejlesztesz, a JavaScript-kódot egy *.js (gyakran scripts.js, main.js vagy app.js) fájlba írod, majd ezt belinkeled a HTML-kódba. Amikor a böngésző letölti a weboldal HTML- és CSS-fájljait, letölti mellé a JavaScriptet is, és lefuttatja azt. Ebben a modulban ilyen esettel még nem fogsz találkozni, ezért ugorjunk is a következő lehetőségre, a böngésző konzoljára.

A konzol

A JavaScript a böngészőben fut, ezért nevezzük kliens oldali programnyelvnek. Logikus, hogy minden böngészőben legyen egy felület, ahol közvetlenül érintkezhetsz a JavaScripttel.

Ezt az eszközt konzolnak nevezzük.

A konzol egy olyan felület, ahol:

• egyrészt bevihetünk és futtathatunk JavaScript-kódot,
• másrészt fontos üzeneteket (például hibaüzeneteket) jeleníthet meg az adott weboldalon futó JavaScript a fejlesztők számára.

A konzolt bármelyik weboldalon megnyithatod és írhatsz bele JavaScript-kódot, de ez a weboldalnak csak az éppen letöltött változatát fogja megváltoztatni – nem változtatja meg a szerveren lévő állományokat. Azaz ha a konzolban változtatsz meg valamit, majd frissíted a weboldalt, a változtatásaid eltűnnek.

A konzol tanulás során kiváló arra, hogy JavaScript-kódokkal gyakoroljunk benne, fejlesztés során pedig hibakeresésre lehet használni.

Tipp: A Google Chrome-ban a konzolt a fejlesztői eszközök között éred el, amelyeket a Ctrl + Shift + I vagy Macen a Cmd + Alt + I billentyűkombinációval nyithatsz meg. Vagy kattints a böngésző jobb felső sarkában a hárompontos menüikonra (A Google Chrome személyre szabása és beállításai), majd azon belül a További eszközökre, és végül a Fejlesztői eszközökre.

Nyiss most egy új lapot a Chrome-ban, és írd be a keresőmezőbe ezt: about:blank. Ez a parancs egy üres oldalt hoz létre számodra. Nyisd meg a fejlesztői eszközöket, azon belül pedig a konzolt.

Ha ezzel megvagy, a konzolban látni fogsz egy balra nyíló kacsacsőrt (>), amely után villog a kurzor. Ide írhatod a JavaScript-kódot, amit az Enter leütése után a böngésző lefuttat, és visszaadja a kód eredményét.

Próbáld ki! Másold be a konzolba a következőt: 20 + 19.

A böngésző gyorsan kiszámolta, hogy ez 39!