Hello, World!

Navégre, hosszú séta után eljutottunk oda ahol mások kezdeni szokták.

Vegyük elő a kedvenc "szőnyegszerkesztőnket", hozzunk létre egy hello_world.js nevű file-t és írjuk bele a következő sort (ha nem tettél fel node-ot és/vagy szövegszerkesztőt, akkor az online sandbox segítségével ugyanúgz megteheted):

console.log("Hello, World!");

Majd próbáljuk is ki, terminálban:

node .\hello_world.js
Hello, World!

Nocsak, az történt amit vártunk, micsoda sikerélmény, fokozzuk egy kicsit! Egy üres oldalon (vagy tabon) nyomd le az F12 billentyűt a böngésződben: megjelent a DevTools (Chrome, Firefox és Edge esetében legalábbis, de lehet Opera és Safari esetében is ez történik). Ennek a tool-nak van egy Console "füle" (tab), váltsunk át oda. Írjuk be oda ezt az egy sort (ENTER a végén). Azta, itt is működik, csak valamiért van még egy "undefined" is kiírva. Van, és arról majd később írni is fogok, most elégedjünk meg azzal, hogy a böngészőben is működik a programunk.
A böngésző egy igen remek program, egy csomó dolgot tud már alapból, nézzünk meg most a "Hello, World!" kapcsán kettőt.

Írjuk be a DevTools console-jába a következő sort (ENTER-el lezárva):

alert("Hello, World!");

Kaptunk egy figyelmeztető ablakot a "Hello, World!" szöveggel.

Próbáljuk ki még a következőt:

document.write("Hello, World!");

Az eddigi üres oldalad hirtelen már nem üres, a programod hatására a "Hello, World!" szöveget tartalmazza. Ha megismétled a parancsot (felfele nyíllal elő tudod hozni, hogy ne kelljen úra begépelni), akkor mégegyszer ki fogja írni.

Érzed már a kezedben lévő erőt? A gép azt csinálja amit mondasz neki: van egy rabszolgád, amely feltétel nélkül engedelmeskedik. Na álljunk meg egy szóra, azért nem feltétel nélkül. Az egyik ilyen feltétel és talán a legfontosabb, hogy ne bakizz bele a mondandódba. Mit is jelent ez pontosan? Próbáld az előző programot lefuttatni úgy, hogy "véletlenül" lehagysz egy idézőjelet, valahogy így:

console.log("Hello, World!);

Már a "színezésen" (syntax highlighting-nak hívják) is látszik, hogy valami nem okés, de ha le is futtatod, akkor kapod is rá a hibaüzenetet: Uncaught SyntaxError: Invalid or unexpected token
Ez bizony egy szintaktikai hiba (a szintaktikáról lesz még szó később), melyet köszönhetően a syntax highlighting-nak elég könnyű detektálni és a választott szövegszerkesztőd ezt valamilyen formában jelzi is neked. Ha megfogadtad a tanácsom és vscode-t telepítettél, akkor mouse over-re ott valahogy így néz ki:

Az "alert"-es és a "document.write"-os megvalósítás csak böngészőben működik annak ellenére, hogy nem vétünk szintaktikai hibát backendes környezetben nem tudjuk őket lefuttatni. Persze megpróbálhatjuk, mert valid javascript kódunk van, ám ez fog történni:

node .\hello_world.js
hello_world.js:1
alert("Hello, World!");
^

ReferenceError: alert is not defined

node .\hello_world.js
hello_world.js:1
document.write("Hello, World!");
^

ReferenceError: document is not defined

Mind az alert-et mind a document-et a böngésző definiálja nekünk, backendes környezetben viszont nem a böngészőben futtatjuk a kódunkat, tehát ott nem léteznek. A console létezik mindkettőnél, backendes környezetben a console az a terminál amiben futtatod a programot, böngészőben pedig a DevTools-nál a console "fül". A konzolra írt üzenetek kifejezetten hasznosak hibakeresésnél és alapvetően ez is az elsődleges célja.

Ok. szóval létezik olyan kód amit frontenden tudunk futtatni backenden meg nem. Igaz ez visszafele is? Természetesen. Egy kiváló példa erre a fileművelet, amikor is a háttértárról olvasunk be adatot a memóriába. Ez egy teljesen általános művelet backenden és az ott futó program minden figyelmeztetés nélkül akár végigpásztázhatja az XXX könyvtáradat vagy "beleolvashat" a levelezésedbe, ám a böngészőben futó javascript felhatalmazás nélkül nem képes fileműveletekre (ha bővebben tanulnál erről, akkor a sandbox szót javaslom kiindulási alapnak).

Térjünk most vissza az egysoros, mindkét környezetben működő programunkhoz és elemezzük egy picit, szedjük darabjaira:

• console: interface (illetve annak implementációja, de perpill hívjuk interface-nek)
• log(): az interface egy method-ja
• "Hello, World!": a method paramétere, jelen esetben egy string
• simicolon (;): a sort lezáró karakter

Egy sor, aztán máris rádobtam 4 ismeretlen fogalmat: interface, method, parameter, string. Semmi gond, meg fogjuk őket ismerni az elkövetkező leckék során.

Mit tanultál ebben a leckében?

• végre megírtuk a "Hello, World!" programot javascript nyelven, és mind backend mind frontend környezetben sikeresen futtattuk
• bár lehet tökéletesen valid javascript programunk nem bizos, hogy mind backend mind frontend környezetben képesek leszünk futtatni