Node.js oktatóanyag: Hello world

Hogyan írd meg első Node.js programodat

Ez az oktatóanyag segít elindulni a Node.js világában. Elmagyarázza, mire van szükséged az első Node.js program megírásához, hogy honnan töltheted le a szükséges eszközöket, hogyan telepítsd ezeket, és hogyan írd meg az első "Hello world" programodat. Ha még sosem írtál JavaScript programot, itt a tökéletes kezdőpont.

Mi az a Node.js

A Node.js egy nyílt forráskódú, platformfüggetlen futtatókörnyezet, amely JavaScript kódot képes végrehajtani webböngészőn kívül. A Node.js lehetővé teszi a fejlesztők számára, hogy JavaScriptet használjanak parancssori eszközök írásához és szerveroldali scripteléshez – olyan szkriptek futtatásához, amelyek dinamikus weboldal-tartalmat állítanak elő, mielőtt az oldal a felhasználó böngészőjébe kerülne.

Mi az a szintaktikai hiba?

A szintaktikai hiba azt jelenti, hogy nem értem. Ha angolul beszélsz valakivel, és ő nem érti, amit mondasz, azt fogja válaszolni: "Nem értem". Ha JavaScript nyelven beszélsz egy számítógéphez, és a számítógép nem érti, amit mondasz, azt fogja válaszolni: "Szintaktikai hiba".

Mi az a Visual Studio Code

A Visual Studio Code egy szövegszerkesztő, amely segít a JavaScript kód írása során. Olyan, mint egy hagyományos szövegszerkesztő, de kínál szintaxiskiemelést, ami segít azonosítani a függvényeket, változókat, osztályokat és minden mást, ami eltérhet a szövegtől.

Mi az a Node.js Hello world program

A "Hello world" program a legegyszerűbb program, amit írhatsz. Egyszerűen kiírja a következő mondatot: Hello world a számítógép képernyőjére. A Hello World program az első program, amit a fejlesztők írnak bármilyen programozási nyelven.

Előfeltételek

Itt van, amire szükséged lesz az induláshoz. Ahhoz, hogy megírd az első JavaScript programodat, szükséged lesz egy Windows számítógépre, Visual Studio Code-ra, Node.js-re és az alább bemutatott példakódra.

  • Windows 10 vagy 11 számítógép
  • Visual Studio Code
  • Node.js
  • Ozeki Hello World példaprojekt

1. lépés - A Visual Studio Code letöltése

Visual Studio Code

Ebben az első videóban megmutatjuk, hogyan töltheted le a Visual Studio Code-ot. Ez egy egyszerű folyamat; nem lesz nehéz követni. A videó a következő URL megnyitásával kezdődik: https://code.visualstudio.com/download/. A lépések követése végigvezet a telepítő letöltéséig. Innentől kezdve elindíthatod a telepítési folyamatot.

1. videó - A Visual Studio Code letöltése (Videó oktatóanyag)

Válaszd ki a Windows opciót

Ahhoz, hogy egy Windows-kompatibilis telepítőt kapj, válaszd ki a Windows 7, 8, 10 számára megfelelő opciót. Ez a Windows logó alatt található (1. ábra). Most a böngésződ elindítja a letöltési folyamatot, és hamarosan készen áll a telepítő a használatra.

download visual studio code
1. ábra - A Visual Studio Code letöltése

2. lépés - A Node.js letöltése

Node.js

Ennek a videónak az a célja, hogy megmutassa, hogyan töltheted le a Node.js-t a számítógépedre. A videó a Node.js letöltési oldalának megnyitásával kezdődik. Az oktatóanyag végigvezet a futtatókörnyezet telepítéséig. A videó alig több mint 1 perc hosszú, és tartalmazza az összes szükséges információt a folyamat teljesítéséhez. A Node.js-t a következő URL-ről töltheted le: https://nodejs.org/en/download/current/

2. videó - A Node.js letöltése (Videó oktatóanyag)

A Node.js letöltési oldala

A 2. ábrán láthatod a Node.js futtatókörnyezet letöltési oldalát. Több telepítési lehetőség is látható. Ebben az esetben válaszd ki az operációs rendszerednek megfelelő verziót. A legtöbb felhasználó számára a Windows Installer lesz a megfelelő választás.

2. ábra - A Node.js letöltése

3. lépés - A Visual Studio Code telepítése

Ahhoz, hogy megírd első Node.js programodat, szükséged lesz egy szövegszerkesztőre, mint például a Visual Studio Code. A következő videóban láthatod, hogyan telepítheted a Visual Studio Code-ot a számítógépedre. A videó a Visual Studio fejlesztői környezet letöltési oldalának megnyitásával kezdődik. A letöltött telepítő használatra készen állásával ér véget. A folyamat során megtudod, melyik letöltési opciót kell választanod. Érdemes megnézni ezt a videót, mert utána bármikor képes leszel letölteni a Visual Studio Code-ot. Csak 1 perc hosszú, de tartalmazza az összes szükséges információt.

3. videó - A Visual Studio Code telepítése (Videó oktatóanyag)

4. lépés - A Node.js telepítése

Ahhoz, hogy megírd első Node.js programodat, telepítened kell a Node.js futtatókörnyezetet. A következő videó megmutatja, hogyan történik ez a telepítés. A telepítővel kezdődik a számítógépeden. A videó végére a program sikeresen telepítve lesz. A folyamat könnyen követhető, és a videó nagyon részletes. Nem lesz gondod a lépések követésével.

4. videó - A Node.js telepítése (Videó oktatóanyag)

A Node.js telepítésének ellenőrzéséhez meg kell nyitnod a Parancssort.

  1. Nyisd meg a Start menüt
  2. Írd be a "cmd" kifejezést a keresőmezőbe
  3. Nyomd meg az Enter billentyűt
  4. Megjelenik egy fekete ablak
  5. Írd be a terminálba az 1. kódban látható parancsot

node -v
	

1. kód - A Node.js telepítésének ellenőrzése

A Node.js tesztelése

Ahhoz, hogy ellenőrizd, telepítve van-e a Node.js a számítógépeden, meg kell nyitnod egy parancssort és be kell írnod a fenti kódot. Ki fogja írni a futtatókörnyezet verziószámát, ha sikeresen telepítve van (3. ábra).

3. ábra - A Node.js telepítésének ellenőrzése

Ezek után folytathatjuk utunkat, hogy megírjuk első "Hello world!" programunkat JavaScript nyelven, és futtassuk a Node.js környezetben.

5. lépés - A környezet beállítása

Létre kell hoznunk egy mappát a kódjaink tárolásához. Ezt megtehetjük a Visual Studio Code elindítása előtt is, de megtehetjük akkor is, amikor egy mappát nyitunk meg.

A Visual Studio Code-ban lehetőség van egy terminál használatára, így beállítunk egy terminált a programon belül.

A következő videó megmutatja, hogyan hozhatsz létre egy új projektet a Visual Studio Code-ban. A folyamat során létrehozol egy új mappát a projekthez. A videó mindössze 52 másodperc hosszú és nagyon részletes. A videó megnézése után elsajátíthatod a folyamatot.

5. videó - A környezet beállítása (Videó oktatóanyag)

Új fájl létrehozása a Visual Studio Code-ban

A 4. ábrán láthatod, melyik gombra kell kattintanod, hogy új fájlt hozz létre a projekten belül. Megnyílik egy szövegmező a gomb alatt, ahol meg kell adnod a projekt nevét. A projekt elnevezése után láthatod, hogy a kódszerkesztő szekció megváltozott. Most már elkezdheted beírni a kódot, és az a projektben lesz elmentve.

4. ábra - Új fájl létrehozása a Visual Studio Code-ban

Új terminál létrehozása

Az első program futtatásához szükséged lesz egy terminálra. A terminál segítségével láthatod a program kimenetét. Egy létrehozásához kattints a Terminál gombra a Visual Studio Code menüsorában. Itt megtalálod az Új terminál gombot. Ez a gomb létrehoz egy terminált, ahol futtathatod a programodat. (5. ábra)

5. ábra - Új terminál létrehozása a Visual Studio Code-ban

6. lépés - Írd meg a "hello world" programodat JavaScript nyelven

Az első program, amit bármilyen programozási nyelven írsz, a "Hello world" program. Ennek a programnak az egyetlen célja, hogy kiírja a "Hello world" szöveget a számítógép képernyőjére. Ebben a példában a program csak egy sorból áll: console.log("Hello world!"); és ez a sor kiírja a "Hello world!" szöveget a képernyőre.

console.log("Hello world!");
	

2. kód - A kód, amely kiírja a "Hello world!" szöveget a konzolra

"Hello World" szkript írása (Videó oktatóanyag)

A következő videó célja, hogy segítsen megírni az első programodat. A legtöbb esetben az első program, amit írunk, a "Hello World" program. Egyszerűen kiírja a "Hello World" szöveget a konzolra. A videó az üres kódszerkesztővel kezdődik, és a befejezett programmal ér véget. A videó rövid, de nagyon részletes. Mindössze 14 másodperc hosszú. Nem lesz gondod a megértésével.

6. videó - A "Hello world!" szkript írása (Videó oktatóanyag)

7. lépés - A kód futtatása a terminálban

A kód futtatásához meg kell nyitnod egy terminált és be kell írnod a következő kódot:

//Ha más néven mentetted el a fájlodat, akkor a 'helloWorld' részt cseréld le arra
node helloWorld.js
	

3. kód - A helloWorld.js kód futtatása

Ez lefordítja a JavaScript kódodat, és a console.log(); zárójelében lévő szöveg megjelenik a terminálodon.

8. lépés - Mi történik, ha hibázok a JavaScript kódban

A Visual Studio Code beépített szintaktikai hibajelzővel rendelkezik, így ha hibát vétesz a JavaScript kódodban, az IDE észreveszi és megjeleníti a problémák között. Ha hiba van a kódodban, és futtatod, a hiba a terminálban is megjelenik. A következő videóban láthatod ezt a folyamatot. Megtanulod, hogyan néz ki, ha elírást követsz el a kódban. Azt is megtanulod, hogyan javítsd ki a hibát. A videó mindössze 48 másodperc hosszú, és tartalmazza az összes szükséges információt a folyamat teljesítéséhez. Nem lesz gondod a lépések követésével.

7. videó - Szintaktikai hiba elkövetése és javítása (Videó oktatóanyag)

Hibák a kódban

A 6. ábrán láthatod, hogyan néz ki, ha elírást követsz el a kódban. Láthatod a hiba értesítését a projektlistában, a terminálban és a kódszerkesztőben. Ez nagyon megkönnyíti a hibák javítását. Győződj meg róla, hogy kijavítod a hibákat, és újra futtatod a programodat.

6. ábra - Hiba egy JavaScript kódban a Visual Studio Code-ban

Összefoglalás

Most, hogy elvégezted az öt egyszerű lépést, megtetted az első lépést a Node.js szoftverfejlesztői karrieredben. Ez a program egyszerűnek tűnhet, és lehet, hogy nem sokat csinál, de így kezdődnek a nagy dolgok. A következő lépés a tanulási utadon egy HTTP kérés létrehozása lesz.

More information