Ingyenes JavaScript leckék, magyarul - JavaScript bejegyzések borítóképe

JavaScript használata (Hova rakjuk a JS kódot, hogyan kössük össze a HTML dokumentummal) – head, body, külső fájl

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!

Tartalomjegyzék

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:

helyezhetjük a HTML dokumentumba
- a HTML dokumentum <HEAD> részébe
- a HTML dokumentum <BODY> részébe
helyezhetjük külső fájlba
helyezhetjük külső hivatkozásba

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 <HEAD> részbe, a másik a <BODY> 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 <HEAD>-be, egy részét pedig a <BODY>-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 <script> tag-eket használnunk!

Szintaktika

<script>
         JavaScript kód;
</script>
Code language: HTML, XML (xml)

Jól láthatjuk, hogy van egy kezdő <script> és egy egy záró </script> 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 <head> vagy a <body> részről van szó.

JavaScript a <head>-ben

Kezdjük rögtön a HTML dokumentum fejrészébe (<head>) való elhelyezéssel.

Ahogy fentebb említettem kötelező ilyenkor is a <script> tag-et használni, ebből kifolyólag így fog kinézni a kódunk:

<HEAD>
    <script>
         JavaScript kód;
    </script>
</HEAD>
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.

Példa

JavaScript kód

<!DOCTYPE html>
  <html>
    <head>
       <script>
            function gomb() {
                document.getElementById("szoveg").innerHTML = "Mizu?";
         }
       </script>

    </head>
    <body>

      <p id="szoveg">Szia, nyomd meg a gombot.</p>

      <button onclick="gomb()">Küldés</button>

    </body>
</html> 

Code language: HTML, XML (xml)

Eredmény

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 <script> tag-be helyeztünk a JavaScript kódunkat.

JavaScript a <body>-ban

Csak, ahogy a HEAD esetében, úgy itt is <script> tag-et használni, ebből kifolyólag így fog kinézni a kódunk:

<BODY>
    <script>
         JavaScript kód;
    </script>
</BODY>
Code language: HTML, XML (xml)

A BODY részen belül bárhol elhelyezhetjük a szkriptünket.

Példa

Nézzünk erre az esetre is egy példafeladatot.

JavaScript kód

<!DOCTYPE html>
  <html>
    <head>

    </head>
    <body>

      <p id="szoveg">Szia, nyomd meg a gombot.</p>

      <button onclick="gomb()">Küldés</button>

       <script>
            function gomb() {
                document.getElementById("szoveg").innerHTML = "Mizu?";
         }
       </script>

    </body>
</html> 

Code language: HTML, XML (xml)

Eredmény

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.

Külső JavaScript

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.

Külső JavaScript fájl

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 <script> 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 <script> 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:

<script src="ELÉRÉSI.ÚTVONAL"></script>
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!

Példa

A program ugyanazt csinálja, mint eddig, csak egy újabb megvalósítással.

Külső fájl (kulso.js)

function gomb() {
  document.getElementById("szoveg").innerHTML = "Mizu?";
}

Code language: JavaScript (javascript)

JavaScript kód

JavaScript kód
<!DOCTYPE html>
  <html>
    <head>
       <script src="kulso.js"></script>
    </head>
    <body>

      <p id="szoveg">Szia, nyomd meg a gombot.</p>

      <button onclick="gomb()">Küldés</button>

    </body>
</html> 

Code language: HTML, XML (xml)

Eredmény

Szia, nyomd meg a gombot.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Külső JavaScript hivatkozása

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.

Szintaktika

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.

<script src="LINK"></script>
Code language: HTML, XML (xml)

Példa

A példa ebben az esetben sem változik semmit.

Külső link (webiskola.hu/kulso.js)

function gomb() {
  document.getElementById("szoveg").innerHTML = "Mizu?";
}
Code language: JavaScript (javascript)

JavaScript kód

JavaScript kód
<!DOCTYPE html>
  <html>
    <head>
       <script src="webiskola.hu/kulso.js"></script>
    </head>
    <body>

      <p id="szoveg">Szia, nyomd meg a gombot.</p>

      <button onclick="gomb()">Küldés</button>

    </body>
</html> 

Code language: HTML, XML (xml)