hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu en hu hu en hu en hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu hu en hu hu hu hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu cs hu hu fr hu hu hu hu hu hu hu hu hu en hu hu en hu hu en hu hu hu hu hbs_lat hbs_lat hbs_lat hu hu hu hu hu cs hu hu en it en hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu es es es tr en hu hu hu hu hu hu hu hu hu fr hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu it hu en hu de hu ja hu hu hu hu hu es es es tr en hu
JavaScript alapok (A JS programozás alapjai) - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
Ebből a cikkből mindent megtudhatsz, ami elengedhetetlen a JavaScript alapjainak elsajátításához.
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.
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.
Hova kerülhet a JavaScript kód?
Most már tudjuk, hogy mi az a JavaScript, következőnek vizsgáljuk meg azt, hogy hova kell elhelyezni a JavaScript kódot, ahhoz hogy letudjon futni.
A JS kódot négy helyre helyezhetjük el:
Ha úgy döntünk, hogy a HTML dokumentum HEAD vagy BODY részébe helyeznénk a JavaScript kódot, akkor az alábbi szintaktika szerint tehetjük meg:
JavaScript kód;   Code language: HTML, XML (xml)
Fontos, hogy ha a HTML dokumentumba szeretnénk a JS kódot helyezni, akkor kötelező a  ,   tag-ek használata.
Ha egy külső fájlba helyeznénk a JS kódot, akkor a fájlban a   tag-ek elhagyásával kell megírnunk a szkriptünket, majd a HTML dokumentumban az alábbi kóddal kell hivatkoznunk rá:
Ha külső fájlt vagy hivatkozást használunk, akkor a fent megadott módszer szerint kell meghívnunk a JavaScript kódot.
Hogyan kell JavaScript fájlt létrehozni?
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.
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.
// Ez itt egy komment. /* Ez pedig egy hosszabb megjegyzé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.
Szia, nyomd meg a gombot.   Küldés    // Ez itt egy függvény function gomb() { document.getElementById("szoveg").innerHTML = "Mizu?"; }     Code language: HTML, XML (xml)
Szia, nyomd meg a gombot.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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.
var X = "Jó reggelt, hogy aludtál?"; document.getElementById("szoveg").innerHTML = X; document.getElementById("szoveg2").innerHTML = X;     Code language: HTML, XML (xml)
Jó reggelt, hogy aludtál?
Jó reggelt, hogy aludtál?
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fenti példában jól láthatjuk a változók nagy előnyét, elég volt egyszer leírnom a mondatot és több helyen is kitudtam íratni azt.
Természetesen ezeken kívül még rengeteg műveletet végezhetünk a változókkal, például matematikai műveleteket is.
>> A JavaScript változókról és konstansokról itt olvashatsz sokkal részletesebben. <<
var szam1 = 2; var szam2 = 5; document.getElementById("szoveg").innerHTML = szam1+szam2;     Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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:
nyelv[3] = "PHP"; Code language: JavaScript (javascript)
>> És ez még nem minden, ha ennél mélyebben érdekelnek a tömbök vagy valami homályos, akkor itt sokkal, de sokkal részletesebben olvashatsz a működésükről és használatukról. <<
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:
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.
var nyelv = ["HTML", "CSS", "JS"]; var nyelvek = ""; for (var i = 0; i  "; } document.getElementById("szoveg").innerHTML = nyelvek;     Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
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 ciklusokról, azaz iterációkról itt olvashatsz bővebben. <<
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!”.
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.
Nézzünk rá egy példát:
if (nem == "Férfi") { udvozles = "Tisztelt Uram!"; } else { udvozles = Tisztelt Hölgyem!; } Code language: JavaScript (javascript)
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; } else if (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:
switch (KIFEJEZÉS) { case 1: UTASÍTÁSOK; break; case 2: UTASÍTÁSOK; break; case 3: UTASÍTÁSOK; break; default: UTASÍTÁSOK; } Code language: JavaScript (javascript)
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.
>> Természetesen ez is csak egy rövid összefoglaló volt az elágazásokról, ennél részletesebben is írtunk a feltételes utasításokról. <<
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!
JavaScript használata (Hova rakjuk a JS kódot, hogyan kössük össze a HTML dokumentummal) - head, body, külső fájl
Műveletek string-ekkel a JavaScript-ben (JS string metódusok, függvények, tulajdonságok)
Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása)
CSS alapok (A CSS alapjainak összefoglalója)
#JavaScript #JavaScript alapok #JavaScript alapok kezdőknek #javascript ismeretek #JavaScript programozás #JavaScript tananyag #JavaScript webfejlesztés #JavaScript webprogramozás #JS alapok #JS programozás #webfejlesztés #webprogramozás alapjai #webprogramozás alapok
Mi az a JavaScript? A JavaScript (JS) bemutatása
JavaScript használata (Hova rakjuk a JS kódot, hogyan kössük össze a HTML dokumentummal) – head, body, külső fájl
Milyen JavaScript szerkesztő programot használjak? + Letöltés
JavaScript alapok (A JS programozás alapjai)
JavaScript változók és konstansok (var, let és const magyarul)
Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása)
Műveletek string-ekkel a JavaScript-ben (JS string metódusok, függvények, tulajdonságok)
JavaScript ciklusok, azaz JS iterációk (for, while, do while)
A for ciklus használata a JavaScript-ben (JS for iteráció elmélet, szintaktika, példa)
JavaScript while ciklus bemutatása (JS while és do while iteráció szintaktika, példa)
JavaScript operátorok ismertetése (JS aritmetikai, értékadó, összehasonlító, logikai, bitenkénti és típus operátor bemutatása)
JavaScript logikai változó (JS boolean magyarul)
JavaScript elágazások (if, switch)
if használata a JavaScript-ben (JS if, else és else if magyarul)
A switch használata a JavaScript-ben (JS switch…case)
JavaScript alert használati útmutató (JS felugró ablak)
JavaScript getElementBy és innerHTML használata (Szöveg írása HTML dokumentumba JS segítségével)
JavaScript függvények, eljárások, metódusok (JS függvény fogalma, létrehozása, meghívása)
JavaScript események (JS event magyarul)
JavaScript onclick esemény (JavaScript függvény meghívása kattintáskor, gomb megnyomásakor)
JavaScript objektumok fogalma, létrehozása, használata (Objektum tulajdonságok és metódusok szintaxisa + példa)
JavaScript JSON használata, készítése, feldolgozása, beolvasása
Random, véletlenszám generálása JavaScript-ben (JS Math.random() és Math.floor() magyarul)
Kliensoldali űrlapellenőrzés: űrlapmezők ellenőrzése HTML és JavaScript segítségével
A legjobb JavaScript keretrendszerek (17 JS framework)