Ebben a cikkben igyekszünk összefoglalni minden fontosabb információt a JavaScript-ről. Szigorúan az alapokról. Így kérlek úgy tekints erre a cikkre, mint egy beugróra a JavaScript világába. Ha most ismerkedsz a JS-el és szeretnél belelátni, hogy mire is való és hogy miket és hogy hogyan lehet megvalósítani benne, akkor tarts velünk a folytatásban is.
A bevezető után az alábbi témákat fogjuk érinteni: kezdésnek bemutatják a JavaScript-et, megtudhatod, hogy mi is az a JS, hogy hová kerül a JavaScript kód a HTML dokumentumban és egy külső dokumentumban. Megmutatjuk, hogy hogyan hozhatsz létre egy JavaScript dokumentumot, azt, hogy hogyan írhatsz kommenteket, megjegyzéseket a JS nyelven belül. Beszélgetünk egy kicsit a változókról, megismerkedünk a tömbökkel, a ciklusokkal, vagyis az iterációkkal, illetve az elágazásokkal.
Elsőnek kicsit soknak és ijesztőnek hathat ez a sok dolog, de ígérem, hogy mindent a lehető legegyszerűbben és érthetőbben próbálunk elmagyarázni.
Tartalomjegyzék
Mi az a JavaScript?
A WikiPédia így fogalmazza meg a JavaScript fogalmát: ,,A JavaScript programozási nyelv egy objektumorientált, prototípus-alapú szkriptnyelv, amelyet weboldalakon elterjedten használnak.”
Nézzünk meg egy példán keresztül, hogy könnyebben érthető legyen mi is az a JavaScript. A JavaScript segítségével csak olyan dolgokhoz férünk hozzá, ami a felhasználó számítógépén is megtalálható. (Azaz a szerveren tárolt dolgokhoz nem férünk hozzá, például az email címhez, a jelszóhoz.) Tegyük fel, hogy van egy div, ennek a tartalmát dinamikusan módosíthatjuk a JavaScript (JS) segítségével. Tegyük fel, hogy bekérjük a felhasználó nevét egy űrlappal, majd a nevével együtt köszöntjük így: ,,Üdvözöllek, XY.” Vagy egy gombnyomásra megváltoztathatjuk a weboldalunk háttérszínét.
Fontos, hogy ha a HTML dokumentumba szeretnénk a JS kódot helyezni, akkor kötelező a <script>, </script> tag-ek használata.
Ha egy külső fájlba helyeznénk a JS kódot, akkor a fájlban a <script> tag-ek elhagyásával kell megírnunk a szkriptünket, majd a HTML dokumentumban az alábbi kóddal kell hivatkoznunk rá:
JavaScript fájl létrehozására csak abban az esetben van szükségünk, ha külső fájlba szeretnénk kiszervezni a JS kódunkat. A JavaScript fájl létrehozásában nincs semmilyen ördöngösség, egyedül annyi dolgunk van, hogy létrehozzunk egy fájlt valamilyen szöveg-, kódszerkesztővel, majd elmentsük azt .js kiterjesztéssel.
JavaScript kommentek, megjegyzések
Természetesen, ahogyan minden programnyelvben, úgy a JavaScript-ben is van lehetőség kommentek, megjegyzések beszúrására, hogy dokumentálni tudjuk a munkánkat, amely által a későbbiekben könnyebben megérthető lesz egy-egy kódrészlet.
Szintaxis
// Ez itt egy komment./*Ezpedigegyhosszabbmegjegyzés.*/Code language:JSON / JSON with Comments(json)
Egy egysoros megjegyzést a „//” jelek után kell írni, míg a többsorost „/*” kezdő és „*/” jelek közé.
A kommentek a felhasználó számára nem láthatók, a böngésző figyelmen kívül hagyja őket. A kommentek csak akkor olvashatóak, ha a programkódot nézzük.
Itt pedig egy példát láthatsz, amely szemlélteti a kommentek működését.
JavaScript kód
<body><pid="szoveg">Szia, nyomd meg a gombot.</p><buttononclick="gomb()">Küldés</button><script>// Ez itt egy függvényfunctiongomb() {document.getElementById("szoveg").innerHTML = "Mizu?"; }</script></body>Code language:HTML, XML(xml)
Most pedig beszéljünk egy kicsit a változókról. A változók azt a célt szolgálják, hogy adatokat tároljunk bennük. Magyarul, ha van egy hosszú mondatunk, akkor azt nem kell minden alkalommal leírnunk, amikor használni szeretnénk, elég csak arra a változóra hivatkoznunk, amelyben eltároltuk a mondatunkat.
Természetesen nem csak hosszú mondatokat tárolhatunk a változókban, hanem szinte mindent, legyen szó akár szövegekről, szavakról, karakterekről, számokról, logikai értékekről.
Nézzünk egy példát: legyen egy X nevű változónk, amelyben tároljuk ezt a szöveget: „Jó reggelt, hogy aludtál?„. Ha a későbbiekben (akár többször) kiakarjuk íratni ezt a szöveget, akkor nem kell annyiszor begépelnünk, ahányszor kiszeretnénk íratni, elég lesz minden esetben csak annyit írnunk helyette, hogy X.
Egy változót így hozhatunk létre a JS-ben:
var X = "Jó reggelt, hogy aludtál?";
Code language:JavaScript(javascript)
Most pedig nézzünk a változók használatára is egy példát.
JavaScript kód
<body><pid="szoveg"></p><h5id="szoveg2"></h5><script>var X = "Jó reggelt, hogy aludtál?";document.getElementById("szoveg").innerHTML = X;document.getElementById("szoveg2").innerHTML = X;</script></body>Code language:HTML, XML(xml)
Hogy mik azok a tömbök? Ha foglalkoztál már valamilyen programnyelvvel, nem feltétlenül webprogramozással, akkor már biztosan találkoztál velük.
A tömb (angolul array) olyan adatszerkezet, amely különböző értékeket tárol egyetlen egy speciális változóban. Ezekre az elemekre sorszámukkal (indexükkel) hivatkozhatunk.
Olyan esetekben használjuk, amikor több elem szerepel egy listán, általában ezek az elemek összefüggnek. Például van egy listánk, amely különböző webes programnyelveket tartalmaz. Itt a kapcsolódási pont az, hogy minden elemünk egy webes programnyelv.
A fent említett példát tárolhatnánk így is:
var nyelv1 = "HTML";
var nyelv2 = "CSS";
var nyelv2 = "JS";
Code language:JavaScript(javascript)
A fenti példával sincs semmilyen gond, működik, rendesen lefut, de be kell látnunk, hogy egy kicsit sok időbe telik mire egyesével létrehozunk annyi változót, ahány elemünk van. És akkor még nem is beszéltünk arról, hogy mi van akkor, ha az összes elemet megszeretnénk vizsgálni. Egy ilyen esetben nagyon nehézkes és időigényes lenne az összes elemen végigmenni.
Egyszerűbben tömbbel megadva így nézne ki a fenti példa:
var nyelv = ["HTML", "CSS", "JS"];
Code language:JavaScript(javascript)
Ezen a példán tökéletesen látszik, hogy mennyivel rövidebb kóddal tudtunk megadni ugyanannyi elemet, mint fentebb.
Haladjunk tovább a fenti példát figyelembe véve, ha szeretnénk a tömbünkből kivenni az első elemet, akkor hivatkoznunk kell az indexére. Ez jelen esetben a 0. index, ezért ezt kell írnunk:
nyelv[0];
Code language:CSS(css)
Ilyenkor a HTML-t kapjuk vissza. Azért a 0. indexre kell hivatkoznunk, mert az informatikában a számozás nullától indul. Ha az elsőt akarjuk megkapni, akkor 0-át kell írnunk, ha az ötödiket akarjuk visszakapni, akkor a 4-et kell írnunk. Vagyis mindig eggyel kisebb számot kell írnunk, mint amit szeretnénk megkapni.
Nem fontos a tömb összes elemét előre megadnunk, megadhatjuk őket akár utólag is, vagy akár egyesével is. A fenti példánál maradva tegyük fel, hogy utólag eszünkbe jutott, hogy létezik egy olyan nyelv is, hogy PHP. Ha ezt szeretnénk betenni a már létező tömbünkbe, akkor azt is megtehetjük, csak el kell döntenünk, hogy melyik indexre tegyük azt. Eddig három elemünk van, az utolsó indexe 2, így ha egy újabb elemet szeretnénk a tömbünkhöz hozzáadni, akkor a 3. indexre kell hivatkoznunk, az alábbi módon:
Fent volt arról szó, hogy a tömbök azért is nagyon fontosak, mert könnyű bejárni őket. A bejárásukat legegyszerűbben egy ciklussal végezhetjük el. A programozásban ciklusnak (vagy iterációnak) nevezzük azt az eszközt, amely az ismétlődő tevékenységek megvalósítására szolgál.
A három leggyakrabban használt ciklus:
for ciklus
do while ciklus
while ciklus
Beszélhetnénk most nagyon részletesen az összes ciklusról, de mivel ez egy JavaScript alapok cikk, így nem szeretnénk senki sem elijeszteni. Szóval nagyon egyszerűen, lebutítva írunk mindegyikről egy-egy mondatot. A külön a ciklusoknak dedikált cikkünkben bővebben fogunk beszélni az összes ciklusról.
for ciklus: Megadunk egy kezdő és egy végértéket, azaz azt adjuk meg, hogy mettől meddig menjen. Amíg el nem éri a végértéket, annyiszor fut le a ciklusmag. (A ciklusmagban vannak azok az utasítások, amelyeket szeretnénk elvégeztetni a ciklussal.)
do while ciklus: Először megcsinálja a ciklusmagban található utasításokat, majd ellenőrzi, hogy teljesült-e már a feltétel. Ha teljesült, akkor kilép a ciklusból.
while ciklus: Először vizsgálja a feltételt, ami ha teljesül, akkor futtatja a ciklusmagban található utasításokat.
Példa
JavaScript kód
<body><pid="szoveg"></p><script>var nyelv = ["HTML", "CSS", "JS"];var nyelvek = "";for (var i = 0; i < 3; i++) { nyelvek += nyelv[i] + "<br>";}document.getElementById("szoveg").innerHTML = nyelvek;</script></body>Code language:HTML, XML(xml)
Ami a fenti példában fontos számunkra az a for ciklus: var i = 0;-ával megadjuk neki, hogy 0-tól menjen i<3;-ig, majd i++-al minden lefutásnál növeljük eggyel az i értékét. Ami még ennél is érdekesebb az a ciklusmagban lévő rész. A ciklusmag kezdetét a „{” rész jelöli, míg a végét a „}„. Fentebb leírt módon megadtuk, hogy 0-tól kisebb, mint 3-ig menjen a ciklusunk, ami azt jelenti, hogy háromszor (először 0, másodszor 1, harmadszor 2 az i értéke) fog lefutni a ciklusmagban látható utasítás. Azaz egy szöveghez fűzzük hozzá mindig a nyelv aktuális i-edik elemét.
A következő fontosabb JavaScript állomás az elágazások. Az elágazásokat arra használjuk, hogy valamilyen feltételhez tudjuk kötni a továbbhaladás irányát.
Egy nagyon egyszerű példán keresztül szemléltetve: egy elágazásban megnézzük, hogy az adott illető férfi-e vagy nő. Ha férfi, akkor így üdvözöljük: „Tisztelt Uram!”, ha nő, akkor pedig: „Tisztelt Hölgyem!”.
Szintaktika
if (FELTÉTEL)
{
IGAZ ÁG;
}
else{
HAMIS ÁG;
}
Code language:JavaScript(javascript)
Az „if” kulcsszó után egy zárójelbe írjuk a feltételünket, például, hogy férfi-e. A feltétel után következik az igaz ág e két karakter közé: „{” „}„. Az „else” kulcsszó után ugyanúgy a fenti módszerrel adjuk meg a hamis ágra vonatkozó utasításokat.
A fenti példa nem nagyon szorul magyarázatra, hiszen a fentebb már említett esetet valósítottuk meg.
Ezt a módszert még kiegészíthetjük egyéb elágazásokkal is, csak az „if” és az „else” közé kell beszorítanunk tetszőleges számú „else if (FELTÉTEL) { … }” elágazásokat. Ennek így néz ki a szintaktikája:
if (FELTÉTEL1)
{
HA FELTÉTEL1 IGAZ;
}
elseif (FELTÉTEL2)
{
HA FELTÉTEL1 HAMIS, DE FELTÉTEL2 IGAZ;
}
else{
HA FELTÉTEL1 ÉS FELTÉTEL2 IS HAMIS;
}
Code language:JavaScript(javascript)
Ezeken kívül van még egy lehetőség, amit switch-nek hívunk. Ezzel előre definiált lehetőséget adhatunk meg, amelyek, ha teljesülnek, akkor annak az ágnak az utasításai fognak lefutni. Nézzük a szintaktikát:
Van egy kifejezésünk, amit a switch szó után zárójelek között adunk meg, ez a kifejezés általában egy változó, melynek az értékét vizsgáljuk egyes esetekben (case). Ha valamelyik eset megegyezik a kifejezésünkkel, akkor futtatjuk a hozzátartozó utasításokat. A legvégső „default” pedig akkor fut le, ha egyetlen egy eset sem felelt meg a kifejezésünknek.
Egyszerűbb lesz, ha nézünk erre is egy példát.
switch (nyelv) {
case"HTML":
szoveg = "A HTML az alapja mindennek.";
break;
case"CSS":
szoveg = "A CSS-el szépen lehet weboldalakat formázni.";
break;
case"JS":
szoveg = "A JS-ről éppen most tanulok.";
break;
default:
szoveg = "Ezt a nyelvet nem ismerem.";
}
Code language:JavaScript(javascript)
A fenti példánkban a nyelv kifejezést vizsgáljuk. Azt most ne részletezzük, hogy hogyan került bele az adat, de történhetett például úgy is, hogy kiolvastuk egy szövegmezőből. Szóval van egy nyelvünk, ami most legyen a CSS. Belépünk a switch-be, ahol megnézi az első esetet, ami a HTML. Megvizsgálja, hogy a HTML egyenlő-e a CSS-el. Egyenlő? Nem! Ezért nem foglalkozik a HTML utasításaival, továbblép. Megvizsgálja a következő esetet, ami már egyenlő a CSS-el, így az ahhoz tartozó utasításokat végrehajtja. Elmentei a szoveg változóba a „A CSS-el szépen lehet weboldalakat formázni.” szöveget, majd a „break„-el megszakítja az egész switch futását.
Mi lett volna, ha a PHP-t adom meg válasznak? Végigmegy az összes eseten, de mivel egyik sem lett volna megfelelő neki, így végül a „default„-nál kötött volna ki, így az „Ezt a nyelvet nem ismerem.” szöveget mentette volna el.
Ezennel a JavaScript alapok cikkünk végére érkeztünk. Igyekeztünk összeszedni minden olyan JS ismeretet, amely elengedhetetlen az alapok ismeretéhez, de be kell látnunk, hogy még az alapok is eléggé sokkolóak tudnak lenni elsőre, így mindenképp azt javasoljuk mindenkinek, hogy többször olvassák el a cikket, ha nem világos valami. Kiemeltképpen nézzék meg a szintaktikákat és próbálják meg maguk megvalósítani a példákat. Ha valamelyik a cikkben említett témáról bővebben olvasnál, akkor kattints a téma alján található linkre, ahol sokkal részletesebben olvashatsz az adott fejezetről. Természetesen a JavaScript tanulmányok itt még nem értek véget, számos olyan téma található a weboldalunkon, amely még jobban segít elmélyülni a JavaScript világában, így aki szeretne még jobban elmélyedni a témában, az kattintson felül a „JavaScript” vagy „JavaScript ismeretek” menüpontra, vagy ide.
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
