hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu en hu hu 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 en hu hu cs hu hu hu hu hu hu hu en hu en hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu hu hu hu hu en cs hu hu hu hu hu hu hu hu hu hu en hu hu hu en cs 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 használata (Hova rakjuk a JS kódot, hogyan kössük össze a HTML dokumentummal) - head, body, külső fájl - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
Ebben a cikkben bemutatjuk, hogy mihez kezdjetek a JavaScript kódotokkal, hova kell helyezni, hogy működőképes legyen. HTML kódba? Külön fájlba? Olvassatok tovább és kiderül!
Hova kell rakni a JavaScript kódot?
Addig rendben, hogy van egy JavaScript kódunk, de ki kell találnunk, hogy ezt a kódot hova helyezzük el úgy, hogy működjön. Mert ha simán beleírjuk a HTML dokumentumba, akkor az nem fog működni.
De nézzük a módszereket, hogy milyen lehetőségeink vannak:
Láthatjuk, hogy több módszer is van, melyek közül mindegyik tökéletesen alkalmas, hogy futtassuk a JavaScript kódunkat. Lentebb minden egyes módszert átveszünk egyesével. Láthatjátok, hogy melyik módszert hogyan kell megvalósítani, illetve azt is, hogy melyiknek milyen előnyei és hátrányai vannak.
JavaScript (JS) elhelyezése a HTML dokumentumba
Ahogy fentebb már szó volt róla a JavaScript kódunkat elhelyezhetjük a HTML dokumentumunkba is, ahol két lehetőség közül választhatunk. Az egyik a   részbe, a másik a   részbe való elhelyezés.
Ez a két módszer egyenértékű, bármelyiket választod ugyanazt a hatást éred el, sőt egyszerre akár mind a két megoldást is választhatod. A JavaScript kódjaid egy részét elhelyezheted a  -be, egy részét pedig a  -ba.
Annyi előnye van a BODY használatának, hogy ha a legvégére rakod a JS szkriptjeidet, akkor az gyorsítja a weboldal “betöltődését”. (Pontosabban, hamarabb fog megjelenni valamilyen látható tartalom a képernyőn, hiszen nem a betöltődés legelején kezdi el befele tölteni a szkripteket is.)
Fontos, hogy ha a HTML dokumentumba helyezzük el a JS kódunkat, akkor kötelező a   tag-eket használnunk!
JavaScript kód;   Code language: HTML, XML (xml)
Jól láthatjuk, hogy van egy kezdő   és egy egy záró   tag. A kezdő- és a zárótag közé kell kerülnie a JS kódunknak.
A kezdő és a záró tag-eket minden esetben használunk kell, ha a HTML dokumentumba szeretnénk elhelyezni a JavaScript kódunkat, függetlenül attól, hogy a   vagy a   részről van szó.
Kezdjük rögtön a HTML dokumentum fejrészébe ( ) való elhelyezéssel.
Ahogy fentebb említettem kötelező ilyenkor is a   tag-et használni, ebből kifolyólag így fog kinézni a kódunk:
JavaScript kód;     Code language: HTML, XML (xml)
A HEAD részen belül bárhol elhelyezkedhet a szkript, mehet a HEAD elejére, a végére vagy akár a közepére.
function gomb() { document.getElementById("szoveg").innerHTML = "Mizu?"; }        Szia, nyomd meg a gombot.   Küldés      Code language: HTML, XML (xml)
Szia, nyomd meg a gombot.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ebben a példában van egy p elemünk, amelynek van egy “szoveg” névre hallgató id azonosítója, a gombnak az onclick-el jelöljük, hogy a kattintáskor futtassa a gomb() függvényt, amiben meghatároztuk, hogy a “szoveg” névre hallgató id-jú elem szövegét cserélje le a ,,Mizu?” szövegre.
Természetesen a HEAD részben egy   tag-be helyeztünk a JavaScript kódunkat.
Csak, ahogy a HEAD esetében, úgy itt is   tag-et használni, ebből kifolyólag így fog kinézni a kódunk:
JavaScript kód;     Code language: HTML, XML (xml)
A BODY részen belül bárhol elhelyezhetjük a szkriptünket.
Nézzünk erre az esetre is egy példafeladatot.
Szia, nyomd meg a gombot.   Küldés    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. <<
Az egyszerűség kedvéért a kódon nem változtattam semmit, teljesen ugyanazt csinálja, mint az előző példában, csak most a script a BODY-ba került.
Ebben az esetben a JavaScript kódunkat egy külső fájlba helyezzük. Ennek a fájlnak a kiterjesztése .js lesz.
A külső JS fájl használatának az az előnye, hogy ha elég egy kódot csak egyszer megírni és azt több lapon, oldalon is feltudjuk használni. Azaz, ha például van egy dátum kiíró JS kódunk, akkor azt nem kell minden egyes aloldalon külön megírni. Elegendő azt csak egy külső .js fájlból meghívni.
Itt is két megoldás van, az egyik amikor a JS kódokat egy külső fájlba helyezzük, a másik, amikor egy külső weboldalról hívjuk meg őket.
A fent említett indok, miszerint elég egyszer megírni egy kódot csak és azt többször fel lehet használni szól emellett a megoldás mellett.
Ha külső JS fájlt használunk, akkor a külső fájlban nem szabad használnunk a   tag-eket. Szimplán létre kell hozni egy .js kiterjesztésű fájlt, és abba el kell kezdeni gépelni a JavaScript kódot, csakúgy mint amikor a HEAD/BODY-ba tesszük, csak itt el kell hagynunk a   tag-eket.
Ha egy külső fájlba helyezzük ki a JavaScript kódunkat, akkor a HTML dokumentumunknak meg kell mutatni, hogy hol van ez a kód. Ezt így tehetjük meg:
Code language: HTML, XML (xml)
Az “ELÉRÉSI.ÚTVONAL” helyére kell megadnunk a .js fájlunk nevét kiterjesztéssel, ha azonos mappában van a HTML dokumentum és a JavaScript fájl, vagy az elérési útvonalát, ha különböző mappában vannak.
A külső JS fájl meghívását megtehetjük a HEAD-ben és a BODY-ban is!
A program ugyanazt csinálja, mint eddig, csak egy újabb megvalósítással.
function gomb() { document.getElementById("szoveg").innerHTML = "Mizu?"; } Code language: JavaScript (javascript)
JavaScript kód               Szia, nyomd meg a gombot.   Küldés      Code language: HTML, XML (xml)
Szia, nyomd meg a gombot.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A legutolsó módszer, amikor nem egy a szerverünkön lévő fájlra hivatkozunk, hanem egy másik szerveren lévő JS kódra, amelyet egy linken keresztül érünk el. Ezt a módszert akkor szokták használni, amikor nem egy saját általunk megírt JavaScript kódot szeretnénk felhasználni, hanem valaki más által írtat. Például a DataTables vagy a Bootstrap. Természetesen ilyenkor is letölthetjük a kódot és hosztolhatjuk a saját szerverünkről, de akkor nekünk kell foglalkozni a frissítésével, karbantartásával. Ha pedig a készítők által biztosított linket használjuk, akkor ezt a terhet leveszik a vállunkról.
Akkor érdemes ezt a módszert használni, ha már van valamilyen kód, amit mások elkészítettek és számunkra is elérhetővé tették, így nekünk nem kell azzal foglalkoznunk, hogy magunknak írjuk meg azt.
Ebben az esetben a szintaktika semmiben sem változik az előző megoldáshoz képest, csak annyiban, hogy nem egy fájlra fogunk hivatkozni, hanem egy linkre.
Code language: HTML, XML (xml)
A példa ebben az esetben sem változik semmit.
function gomb() { document.getElementById("szoveg").innerHTML = "Mizu?"; } Code language: JavaScript (javascript)
JavaScript kód               Szia, nyomd meg a gombot.   Küldés      Code language: HTML, XML (xml)
Szia, nyomd meg a gombot.
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
HTML alapok (A HTML webprogramozás alapjai)
HTML elemek: Minden, amit tudnod kell a HTML-elemekről
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)
JavaScript alapok (A JS programozás alapjai)
#JavaScript #JavaScript alapok kezdőknek #javascript ismeretek #JavaScript programozás #JavaScript tananyag #JavaScript webfejlesztés #JavaScript webprogramozá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)