JavaScript oktatóanyag: Hello world

Ez az oktatóanyag segít elindulni a JavaScript világában. Bemutatja, mire van szükséged az első JavaScript programod megírásához. Az alapokkal kezdjük: megtanulod, hol találhatod és töltheted le a szükséges eszközöket, hogyan telepítsd ezeket, és egészen a kód építéséig és futtatásáig vezetünk. Ha még soha nem írtál JavaScript programot, itt a helye, hogy elkezdd. Ezt a cikket azért hoztuk létre, hogy könnyedén belekezdhess a JavaScript-be, és továbbléphess az SMS példáinkhoz. Ha már ismerős vagy a JavaScript-tel, közvetlenül ugorhatsz az alábbi SMS projektek egyikére.

JavaScript SMS példák:

SMS küldése JavaScript-tel a HTTP REST API-val (kódpélda)
Több SMS küldése JavaScript-tel a HTTP REST API-val (kódpélda)
SMS ütemezése JavaScript-tel a HTTP REST API-val (kódpélda)
SMS fogadása JavaScript-tel a HTTP REST API-val (kódpélda)
SMS törlése JavaScript-tel a HTTP REST API-val (kódpélda)
A legújabb JavaScript SMS API könyvtár letöltése a Githubról

Mi az HTML

A Hypertext Markup Language (HTML) egy eszköz a weboldalak szerkezetének meghatározására. Az HTML a szabványos jelölőnyelv weboldalak létrehozásához. Kéz a kézben a CSS-sel teszik lehetővé, hogy a weboldalak úgy nézzenek ki, ahogy. Az HTML elemek sorozatából áll, amelyek megmondják a böngészőnek, hogyan jelenítse meg a tartalmat. Ebben az oktatóanyagban ezt használjuk a "hello world" üzenet megjelenítésére.

Mi a JavaScript

A JavaScript egy szkriptelő programozási nyelv. Hasonlít egy természetes nyelvhez, mint például az angol. A számítógéppel való kommunikációra használják. A fő különbség a természetes nyelv és a programozási nyelv között az, hogy a programozási nyelvek szigorúbb szerkezettel rendelkeznek, hogy a számítógép jobban megértse. Ebben az oktatóanyagban JavaScript kódot használunk a "hello world" üzenet kiírására.

Mi az a webszerver

A webszerver kifejezés jelenthet hardvert vagy szoftvert, vagy mindkettőt együtt. A hardver oldalon a webszerver egy olyan számítógép, amely a webkliensek kiszolgálására szolgál. A szoftver oldalon a webszerverek PHP kódot futtatnak, amely kezeli a webkliens HTTP kéréseit.

Mi az a webböngésző

A webböngésző egy alkalmazás a Világháló eléréséhez. Amikor egy felhasználó egy weboldalt kér egy adott webhelyről, a webböngésző lekéri a szükséges tartalmat a webszervertől, majd megjeleníti az oldalt a felhasználó eszközén. Úgy működik, hogy a felhasználó HTTP kéréseket küldhet a webszervereknek. Egy webböngészővel hozzáférhetünk a webszerverhez az IP-cím vagy domain nevének beírásával a URL mezőbe.

Mi a WAMP

A WampServer egy megoldáskészlet a Microsoft Windows operációs rendszerhez, amely az Apache webszervert, az OpenSSL-t SSL támogatáshoz, a MySQL adatbázist és a PHP programozási nyelvet tartalmazza. A WAMP olyan, mint egy virtuális szerver a számítógépeden. Lehetővé teszi az összes webes funkció tesztelését minden következmény nélkül, mivel a gépeden lokalizált, és nincs kapcsolatban az internettel. Ezt fogjuk használni a HTML weboldalunk helyi hosztolására.

Hogyan írd meg az első programodat JavaScript-ben

Az első JavaScript programod megírásához:

  1. Telepítsd a WAMP-ot a számítógépedre
  2. Állítsd be a WAMP szervert
  3. Hozz létre egy új index.html fájlt
  4. Állítsd össze az első HTML dokumentumodat
  5. Írd meg az első JavaScript kódodat a .html fájlba
  6. Futtasd az első JavaScript programodat
  7. Nyisd meg az Inspect módot hibajelzésekhez
  8. Javítsd ki a hibát

Előfeltételek

  • Windows 10 számítógép
  • WAMP környezet
  • Chrome böngésző
  • HTML Hello World példa
  • JavaScript Hello World példa

WAMP letöltése

Ebben a videóban a WAMP szervert fogjuk letölteni. Ez a szoftver, amellyel a JavaScript kódunkat fogjuk hosztolni. Először is fel kell látogatnod a https://wampserver.com oldalra. és le kell töltened a WampServer telepítőt (1. videó). A letöltés befejezése után a telepítő a böngésződ által megadott letöltési könyvtárban lesz. Ennek az exe-nek a megnyitása elindítja a WAMP szerver telepítési folyamatát.

1. videó - Hogyan töltsd le a WampServer-t (Videós oktatóanyag)

WampServer letöltése

Kezdd azzal, hogy a böngésződben megnyitod a https://wampserver.com oldalt. Kattints a Download gombra a tetején, hogy automatikusan legörgess a letöltések részhez. Kattints a WAMPSERVER 64 BITS (X64) gombra a WampServer telepítő letöltéséhez a számítógépedre (1. ábra).

1. ábra - WampServer letöltése

WAMP telepítése

A következő lépés a WampServer letöltése után a telepítése. Ez a videó bemutatja, hogyan tudod sikeresen elvégezni a telepítést. Nyisd meg a telepítőt, állítsd be a telepítési részleteket, és várj a folyamat befejezésére (2. videó). Amikor telepítetted a WAMP Server-t, az automatikusan elindul. Most, hogy a WAMP Server fut, elkezdheted a JavaScript kódolást.

2. videó - Hogyan telepítsd a WampServer-t (Videós oktatóanyag)

Írd meg és töltsd le az első HTML oldalad

Az első HTML dokumentumod megírásához hozz létre egy új index.html fájlt a WampServer \www\ mappájában.
Útvonal: C:\wamp64\www\ 

<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title>
	</head>
	<body>
		<h1 id="text">Hello world!</h1>
	</body>
</html>

1. kód - Az első HTML dokumentumod

Írd meg az első HTML dokumentumodat

Ez a videó bemutatja, hogyan hozhatsz létre egy HTML dokumentumot (3. videó). Ezt a dokumentumot később helyileg fogjuk hosztolni. Annak köszönhetően, hogy a számítógépünkön fut egy WampServer, a fájljainkat a http://localhost/ URL-en nézhetjük meg. Ehhez létre kell hoznod vagy be kell helyezned a HTML fájlodat a \www\ mappába.
Útvonal: C:\wamp64\www\

3. videó - Írd meg az első HTML dokumentumodat (Videós oktatóanyag)

Írd meg és futtasd az első JavaScript programodat

Ebben a példában a <h1> tag-ben lévő szöveget fogjuk lecserélni a "text" azonosítóval. Ehhez a beépített JavaScript query selectort fogjuk használni. Ez bonyolultnak tűnhet, de valójában egyszerű. Kiválasztjuk az elemet a "text" azonosítóval, és beállítjuk az innerText attribútumát (az elemünk számára ez olyan, mint egy személy jellemzője) a "Hello Ozeki!" szövegre. 

/*Ez a JavaScript kód lecseréli a szöveget abban a tag-ben,
amelynek "text" az azonosítója.*/
document.getElementById("text").innerText = "Hello Ozeki!";

2. kód - Az első JavaScript kódod

Írd meg és futtasd a JavaScript kódodat

Ez a videó bemutatja, hogyan írhatsz JavaScript kódot és futtathatod a böngésződben (4. videó). Maga a parancs, amely megjeleníti az üzenetet, script tag-ek közé kell kerüljön. Ezek a tag-ek jelzik, hogy itt JavaScript kódot kell végrehajtani. Maga a kód egy függvény, amelynek argumentuma a "Hello Ozeki". A kód megírása és mentése után futtathatod a böngésződben.

4. videó - Hogyan írd meg és futtasd az első JavaScript kódodat (Videós oktatóanyag)

Helyezz el egy hibát a JavaScript kódban

Ha hibát ejtünk a JavaScript kódunkban, a böngésző Inspect módjában láthatjuk a hibákat. Ehhez kattintsunk a jobb egérgombbal, és válasszuk ki az Inspect lehetőséget a menüből. Vagy egyszerűen nyomjunk (Ctrl + Shift + I). Itt válasszuk ki a Console fület, és minden hiba megjelenik.

Mi 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, hogy "Nem értem". Ha JavaScript nyelven beszélsz a számítógéphez, és a számítógép nem érti, amit mondasz, azt fogja válaszolni, hogy "Szintaktikai hiba".

Hogyan kezelj egy szintaktikai hibát JavaScript-ben?

Az alábbi kódban szándékosan hozunk létre egy szintaktikai hibát azzal, hogy nem teszünk pontosvesszőt a Hello World sor után. Látni fogod, hogyan reagál a számítógép, hogyan javítjuk ki a hibát, és hogyan futtatjuk a programot sikeresen.

Javítsd ki a hibát a JavaScript kódodban

Ez a videó bemutatja, hogyan ellenőrizheted, van-e hiba a kódodban a böngésző Inspect módjának használatával. Ez egy hihetetlenül hasznos funkció a hibák javításához (5. videó). A debug konzol az Inspect módban hibaüzeneteket jelenít meg, amelyek jelzik, mi ment félre. Rákattinthatsz ezekre a hibaüzenetekre, hogy kiemelje a hibát okozó kódsort.

5. videó - Hogyan javítsd ki a hibát a JavaScript kódodban (Videós oktatóanyag)

Összefoglaló

A fenti cikk arról szól, hogy mire van szükséged az első JavaScript programod megírásához, ami egy Hello World példakód. Ez a program egyszerűnek tűnhet, és nem csinál sokat, de így kezdődnek a nagy dolgok; ezen az útmutatón követve megtetted az első lépést a JavaScript fejlesztővé válás felé. A JavaScript kódolásának ismerete és a problémáidra megoldást nyújtó programok létrehozása sokat segít a munka simábbá tételében.

Amit itt tanultál, értékes, további hasznos útmutatók találhatók az Ozeki weboldalán, merj bele! Lépj tovább a következő cikkre ebben a témában, amely arról szól, hogyan küldj SMS-t JavaScript-ből.

Most töltsd le az Ozeki SMS Gateway-t és kezdj munkához!

More information