JavaScript használati útmutató: Programozás érthetően
A JavaScript kódok egy weboldal fontos alkotóelemei, azonban működésüket megérteni nem mindig egyszerű. Ebben az útmutatóban röviden összegezzük a fontosabb pontjait a JS szkripteknek, így remélhetőleg jobban átlátod majd a weboldal készítés mögött meghúzódó programozást, és talán Te magad is kedvet kapsz az informatikai ismereteid bővítéséhez. 🙂
1. Mi az a JavaScript?
Az iFrame keretekről szóló cikkben találkozhattunk a HTML és CSS kódolással, amelyek a weboldalak tartalmainak megjelenítéséért felelnek. A harmadik nagy programozási nyelv a JavaScript, vagy rövidítve JS.
Kicsit eltér az előbb említett két társától, mivel ez egy kliensoldali szkriptnyelv, amely objektumorientált és kifejezetten internetes weblapok létrehozására alkották meg.
Története egészen 1995-re nyúlik vissza, ugyanis ekkor kezdték el fejleszteni a Netscape Communications berkein belül.
A JavaScript kódnyelv által megjelenített objektumok mindig a weboldalra látogató kliensek/felhasználók böngészőjében fognak megjelenni.
Ezt úgy kell értelmezni, hogy a JavaScripttel csak olyan dolgokat tudunk megváltoztatni vagy befolyásolni a weboldalunkkal kapcsolatban, amelyek a hozzánk látogató felhasználók képernyőjén is láthatók.
Tehát mit nem tudunk megtenni a JavaScript használatával? Nem tudjuk pl. megnyitni a felhasználók jelszavait tartalmazó adatbázist, mert ehhez el kellene érnünk a webszerverünket, a JS pedig csak kliensoldali tartalmakkal működik, vagyis más szkript szükséges hozzá.
Akkor mire képes a JavaScript? Bár az adatbázisokhoz nem fér hozzá, de készíthetünk vele például egy napszakokhoz kötődő üdvözlő űrlapot, amely megjelenik majd a felhasználók képernyőjén a pontos időnek megfelelően.
2. Mire használhatjuk a JavaScript kódokat?
A JS segítségével a felhasználók által érzékelt tartalmi elemeket tudunk elhelyezni weblapunkon. Ez többek között az alábbiakat jelentheti, de szinte végtelen lehetőségünk van a megjeleníteni kívánt dolgokat illetően.
- Galériát hozhatunk létre, ahol lehetséges lapozni a képek között;
- A weboldalunkon szereplő fotókat kinagyíthatóvá tehetjük;
- Eltérő funkcióval rendelkező gombokat adhatunk hozzá honlapunkhoz;
- Akár a pontos időt is megjeleníthetjük az oldalunkon;
- A felhasználó nevét tartalmazó üdvözlőlapot jeleníthetünk meg;
- A napszaknak megfelelő köszönési formával fogadhatjuk a látogatókat;
- Visszaszámlálót indíthatunk pl. új áruk vagy kedvezmények népszerűsítésére.
3. A JavaScript kódok felépítése
Tekintsünk meg egy viszonylag egyszerű példát a JS kódok felépítésére:
document.getElementById("id").innerHTML = "Kiszervezett Marketing Kft.";
Ez a kód a következőképpen épül fel:
- document = az a dokumentum, ahol a megadott kifejezést keresni fogja;
- getElementById(„id”).innerHTML = parancssor, amely a végrehajtandó műveletet tartalmazza;
- „Kiszervezett Marketing Kft.” = a keresendő szöveg, amelyet megjelenít majd a képernyőn.
Egy másik példa, ahol csak simán a „write” parancsot alkalmazzuk:
document.write("<blink>Kiszervezett Marketing Kft.</blink>")
Ha ezt a kódot lefuttatjuk, akkor a Kiszervezett Marketing Kft. kiírást fogjuk látni a weboldalunkon.
4. Hová és hogyan helyezd el a JavaScript kódokat?
A JS szkriptet nem írhatjuk be mindenféle szerkesztés nélkül csak úgy a HTML dokumentum valamelyik részébe. Bemutatjuk azokat a módszereket, amelyekkel megjelenítheted a JavaScript kódokat a weboldaladon.
4.1. JavaScript beillesztése HTML fájlba
A JavaScript kódok elhelyezhetők HTML dokumentumba, ezen belül is a <head> és a <body> részekbe egyaránt, vagy mindkettőbe egyszerre, ha elosztjuk a JS szkriptjeinket két részre.
Talán a legelőnyösebb megoldás az, ha a <body> rész legvégére helyezed el a JavaScript kódokat, mivel így nem lassítják az oldalad betöltését.
HTML dokumentumba illeszthető formában így fest a „write” parancs alkalmazása:
<script>
document.write("<blink>Kiszervezett Marketing Kft.</blink>")
</script>
Mint látható, a JS szkriptek előtt szükséges használni a <script> címkét, a JS kód vége után pedig a </script> tag zárja le a parancssort. Ezek közé kerül a tényleges JavaScript kódunk.
4.1.1. JavaScript kód elhelyezése a <head> részben
Ebben az esetben a HTML fájl fejrészébe helyezzük el a JS szkriptünket. A kódrészlet a következőképpen fog kinézni:
<head>
<script>
document.write("<blink>Kiszervezett Marketing Kft.</blink>")
</script>
</head>
Ez elhelyezhető a fejrész bármely részére, akár az elejére, akár a végére.
4.1.2. JavaScript kód elhelyezése a <body> részben
A helyzet ugyanaz, mint a <head> esetében, a <script> címkével illeszthetjük be a JS szkriptet bárhová.
<body>
<script>
document.write("<blink>Kiszervezett Marketing Kft.</blink>")
</script>
</body>
Nézzük meg ezt egy másik, összetettebb példával is:
<html>
<head>
</head>
<body>
<p id="szoveg">Kérlek kattints a gombra!</p>
<button onclick="gomb()">Rendben</button>
<script>
function gomb() {document.getElementById("szoveg").innerHTML = "Köszönöm!";}
</script>
</body>
</html>
Ennek a kódnak az eredménye egy gomb lesz, amelyre ha rákattint valaki, akkor a Köszönöm! szöveg fog kijönni a képernyőjén.
4.2. JavaScript elhelyezése külső fájlban
A külső fájlba helyezett JS szkript előnye, hogy elég csak egyszer megírni a kódot, és utána beilleszthetjük több oldalra is. A fájl kiterjesztése .js lesz.
Például, ha meg szeretnénk jeleníteni egy gombot minden oldalon, amire rákattintva regisztrálhatnak a felhasználók, akkor azt nem kell 100 alkalommal megírnunk, hanem csak egy külső .js fájlból beillesztjük.
4.2.1. Kódok meghívása külső JavaScript fájlból
Külső .js fájl esetén nincs szükségünk a <script> címke használatára. A JavaScript kódokat szimplán elhelyezzük egy .js kiterjesztésű dokumentumba.
Miután elkészültünk a külső fájllal, amely a JS szkriptünket tartalmazza, ezt elő kell hívnunk külső forrásként a HTML dokumentumunkban is.
Ez az alábbi módon lehetséges:
<script src="JavaScriptfajlneve.js"></script>
Forrásnak tehát vagy a JS fájlunk nevét adjuk meg kiterjesztéssel együtt (ha a HTML dokumentummal egyazon mappában szerepelnek), vagy az elérési útvonalat (ha a HTML és a külső fájl különböző mappákban találhatók meg).
<html>
<head>
<script src="javascriptfajlneve.js"></script>
</head>
<body>
<p id="szoveg">Kérlek kattints a gombra!</p>
<button onclick="gomb()">Rendben</button>
<script>
function gomb() {document.getElementById("szoveg").innerHTML = "Köszönöm!";}
</body>
</html>
4.2.2. Kódok meghívása külső JavaScript hivatkozásból
Külső hivatkozásra akkor van szükség, ha nem a saját szerverünkön található fájlból töltjük be a JS szkriptet, hanem egy külső szerverről. Vagyis ezt a JavaScript kódot nem mi írtuk, hanem egy másik személy, és mi szeretnénk felhasználni.
Letölthetjük saját szerverünkre a kódot, de akkor nekünk kell folyamatosan naprakészen tartanunk, viszont ha a fejlesztők által megadott linkre hivatkozunk, akkor az eredeti tulaj foglalkozik a karbantartásával.
Másik előnye, hogy nem nekünk kell megírnunk a JavaScript kódot, mert azt már más valaki elkészítette helyettünk. 🙂
A hivatkozási mód hasonlóan működik, de itt már nem egy .js kiterjesztésű fájlra hivatkozunk, hanem egy linkre.
<script src="link"></script>
Ezt a HTML dokumentumba a következő módon kell beilleszteni:
<html>
<head>
<script src="kiszervezettmarketing.hu/javascriptfajlneve.js"></script>
</head>
<body>
<p id="szoveg">Kérlek kattints a gombra!</p>
<button onclick="gomb()">Rendben</button>
<script>
function gomb() {document.getElementById("szoveg").innerHTML = "Köszönöm!";}
</body>
</html>
5. Mik azok a JavaScript változók?
A változókban adatokat tudunk tárolni. Például: szavakat, szövegeket, számokat, és így tovább. Ha egy változóban tároljuk őket, akkor nem kell minden alkalommal külön begépelni a tartalmat, elég csak a változóra hivatkozni.
Tegyük fel, hogy van egy KM nevű JavaScript változónk, és ezt a mondatot tároljuk benne: „Üdvözöllek a weboldalamon, érezd jól magad!„
Ebben az esetben változók alkalmazásával nem kell minden egyes oldal HTML dokumentumába beleírnunk az egész mondatot, elég csak KM-ként hivatkoznunk rá.
Az alábbi módon néz ki a dolog:
<head>
<p id="szoveg"></p>
<script>
var KM = "Üdvözöllek a weboldalamon, érezd jól magad!";
document.getElementById("szoveg").innerHTML = KM;
</script>
</head>
Láthatjuk, hogy itt egy alkalommal hivatkoztunk a KM változóra, miután az meg lett nevezve a <script> címke után, azonban akár több tucat alkalommal is felhasználhatjuk, és egyszer sem kell majd a teljes mondatot kiírnunk.
6. A JavaScript tömbök fogalma
Az informatikában a tömbök arra szolgálnak, hogy egy adatszerkezetben több összekapcsolódó változót tudjunk tárolni. Ezek sorszámmal rendelkeznek, és egy listában szerepelnek.
Tegyük fel például, hogy van egy felsorolásunk online fizetési rendszerekről. Két módszerrel is tárolhatjuk ezt a listát.
Az első módszer alkalmazásával megadjuk mindegyik változót külön-külön kódsorral.
var fizetes1 = "Barion"; var fizetes2 = "PayPal"; var fizetes3 = "Paylike"; var fizetes4 = "SimplePay"; var fizetes5 = "PayU";
Lássuk be, hogy ez egy kicsit hosszadalmas és rengeteg kódot kell lefuttatni hozzá, hogy minden egyes változót egyenként megadjunk.
A második módszer a JavaScript tömbök használata, amely sokkal rövidebb és tömörebb kódot eredményez.
var fizetes = ["Barion", "PayPal", "Paylike", "SimplePay", "PayU"];
A tömbök tehát leegyszerűsítik a JS szkripteket, megkönnyítve a programozás menetét. A tömbösített értékek sorszáma 0-val kezdődik.
Ha az első értékre akarsz hivatkozni, akkor az fizetes[0] lesz, ha pedig a negyedikre, akkor az fizetes[3]. Ez azért van, mert a programozásban nullával kezdjük a számozást, ezért mindig 1-el kisebb számmal hivatkozunk a tételekre.
7. Mit jelent a JavaScript ciklus?
A ciklus (másnéven iteráció) arra szolgál, hogy ismétlődő tevékenységeket végezzünk vele. Minden ciklus tartalmaz egy ciklusmagot, amely a végrehajtandó utasításokat tárolja.
A JavaScript iterációknak három fő típusa van.
7.1. A for ciklus
Egy kezdő és egy végérték megadását követően futtathatjuk le a ciklust, amely az első megadott értéktől az utolsóig végzi el a szükséges parancsokat, amiket a ciklusmag tartalmaz.
Felépítése a következő:
for (kezdőérték; feltétel; végső kifejezés) {ciklusmag}
A kezdőérték a nulladik elem lesz. A feltétel résznél szabjuk meg, hogy mely feltételek teljesülése esetén ismétlődjön a ciklus. A végső kifejezés pedig minden ciklus lefutásával végrehajtódik, ezért itt a legcélszerűbb megadni a kezdőérték növelését. A ciklusmag az összes ciklus esetén teljesítendő utasításokat tartalmazza.
<body>
<p id="szoveg"></p>
<script>
var fizetes = ["Barion", "PayPal", "Paylike", "SimplePay", "PayU"];
var fizetesek = "";
for (var i = 0; i < 5; i++) {fizetesek += fizetes[i] + "<br>";}
document.getElementById("szoveg").innerHTML = fizetes;
</script>
</body>
Ez a JavaScript ciklus megjeleníti majd mind az 5 fizetési változót (sorszám szerint 0-tól 4-ig), amit a tömbünkben korábban feltüntettünk.
7.2. A do while ciklus
Elsőként a ciklusmag utasításait végzi el, majd a feltételek teljesülését vizsgálja meg. Ha ez sikeres, akkor megismétli a ciklust. Ha nem, akkor kilép.
Formája a következő:
do {ciklusmag} while (feltétel);
7.3. A while ciklus
Az előbbi fordítottja, mivel a ciklusmag lefutása előtt vizsgálja meg a feltételt, és ennek teljesülése esetén futtatja le a ciklusmag utasításait. Vagyis addig ismétli a ciklusmag utasításait, amíg a feltétel nem teljesül.
Az alábbi módon épül fel:
while (feltétel) {ciklusmag}
8. A JavaScript elágazások bemutatása
Az elágazásokkal tudjuk a ciklusok továbbhaladásának irányát feltételekhez kötni. Például: ha 04:00-12:00 az idő, akkor „Jó reggelt!” üdvözlési formát alkalmazhatunk, ha 12-17 óra között van a pontos idő, akkor a honlapunk „Jó napot!” szöveggel köszönti a látogatót, ha pedig 17:00-04:00 az idő, akkor „Jó estét!” lesz az üdvözlés.
Felépítésük így néz ki:
if (feltétel) { igaz ág; } else { hamis ág; }
Nézzünk is egy gyakorlati példát:
if (hrs >= 04 && hrs < 12) greet = 'Jó reggelt!'; else if (hrs >= 12 && hrs <= 17) greet = 'Jó napot!'; else if (hrs >= 17 && hrs <= 04) greet = 'Jó estét!';
Tehát az if után következik a feltételünk és az igaz értékek, az else után pedig minden egyéb eshetőség, és azoknak a beállításai.
9. Összefoglaló
A JavaScript egy kliensoldal programozási nyelv, amellyel a weboldalunkra látogató felhasználók számára tudunk megjeleníteni tartalmakat.
Ezek a tartalmak lehetnek gombok, feliratok, üdvözlések, pontos idő, galériák, vagy bármilyen más funkció, amit el tudunk képzelni.
A JS szkripteket beilleszthetjük a honlap HTML dokumentumába, vagy külső fájlból/hivatkozásból is. Alkalmazhatunk változókat, tömböket, ciklusokat, vagy éppen elágazásokat.
Hasznosnak találtad cikkünket? Kérlek oszd meg Facebookon! 🙂
Hibát találtál? Írj nekünk az alábbi e-mail címre: szerk@kiszervezettmarketing.hu
10. Gyakran ismételt kérdések és válaszok
A JavaScript egy kliensoldali programozási nyelv, aminek hála tartalmakat jeleníthetünk meg a látogatók számára.
HTML kódok és CSS kódok.
CTA gombokat, feliratokat, galériát, pontos időt, üdvözléseket, stb.
