Szkriptek - Szkript beillesztése. A <script> tag

A lefuttatandó szkripteket a <script> tag alkalmazásával lehet beilleszteni egy weboldal kódjába. A <script> zárótag használata is kötelező. Tetszőleges számú script elem megadható egy dokumentum fejrészében és törzsében is.

Fontosabb attribútumai:

type: A beillesztett szkript típusa. A HTML 4.01 szabvány szerint ennek az attribútumnak nincs alapértéke, a weblap készítőjének ezt definiálnia kell. (Akkor is, ha ez megegyezik a dokumentumban alapértelmezett szkript nyelvvel.) A HTML 5 szabvány csak akkor írja elő kötelezően a megadását, ha a típus nem "text/javascript".
src: A külső állományban elhelyezett szkript elérési útja.

A lefuttatandó szkript kódja közvetlenül beleírható a HTML dokumentumba a script elemen belül vagy azt egy külső szövegfájl is tartalmazhatja. Ez utóbbi esetben az src attribútum adja meg a szkript elhelyezkedését. A két módszer nem keverhető egy script elemen belül: ha az src attribútum megad egy URL-t, akkor a szabvány szerint a böngészőknek figyelmen kívül kell hagyniuk annak a script elemnek a tartalmát.

JavaScript segítségével közvetlenül bele lehet írni egy oldal tartalmába. Ha a következő szkript egy dokumentum törzsében helyezkedik el, akkor azt a böngésző a HTML dokumentum megjelenítésekor lefuttatja. A script elem helyén egy HTML táblázat jelenik meg, amelyben a 15x15-ös szorzótábla látható.

<script type="text/javascript">
   var i, j;

   document.write('<table class="multiplicationtable">');
   for  (i=1; i<=15; i++) {
      document.write('<tr>');
      for (j=1; j<=15; j++) {
         document.write('<td class="mptd">', i*j, '</td>');
      }
      document.write('</tr>');
   }
   document.write('</table>');
</script>

Egyszerűbb írni egy ilyen függvényt, mint egy olyan HTML táblázat kódját begépelni a forráskódba, amely 225 adatcellát tartalmaz.

A szorzótábla kliens oldali előállításának másik lehetséges megoldása az, ha a JavaScript függvény a dokumentum fejrészében vagy egy külső fájlban található. Ebben az esetben a Javascript program nem HTML kódot generál, hanem objektumokat hoz létre, amiket a dokumentum betöltése után a böngésző beilleszt az oldal elemeit tartalmazó struktúrába. (Ezt a struktúrát Dokumentum Objektum Modellnek - rövidítve DOM - hívják.)

A fejrészben egy script elem van a lefuttatandó függvénnyel, vagy ahogy a következő példa is mutatja - egy hivatkozással:

<script type="text/javascript" src="szorzotabla.js"></script>

A hivatkozott állomány - a szorzotabla.js - egy szövegfájl, ami tartalmazza a lefuttatandó kódot:

function insertmultiplicationtable() {
   var m, n;
   var divtable, newtable, newtablerow;
   var newtablebody, newtablecell, newresulttext;

   divtable = document.getElementById('multiplicationdiv');

   newtable = document.createElement('table');
   newtable.className = 'multiplicationtable';
   divtable.appendChild(newtable);

   newtablebody = document.createElement('tbody');
   newtable.appendChild(newtablebody);

   for (m=1; m<=15; m++) {
      newtablerow = document.createElement('tr');
      newtablebody.appendChild(newtablerow);
      for (n=1; n<=15; n++) {
         newtablecell = document.createElement('td');
         newtablecell.className = 'mptd';
         newresulttext = document.createTextNode(m*n);
         newtablecell.appendChild(newresulttext);
         newtablerow.appendChild(newtablecell);
      }
   }
}

Ennek a függvénynek a végrehajtását egy esemény fogja elindítani, például a dokumentum betöltődése:

<body onload="insertmultiplicationtable();">

A HTML dokumentum törzsében pedig csak egy div elemet kell elhelyezni, amiben a szorzótábla meg fog jelenni:

<div id="multiplicationdiv">
   <noscript>A szorzótábla megjelenítéséhez engedélyezni
                   kell a JavaScrip-tet!</noscript>
</div>

Az elsőhöz képest ez utóbbi példa valamivel hosszabb programkóddal oldja meg ugyan azt a feladatot, mégis ez számít jobb módszernek:

Világosan elkülönül egymástól a HTML és a JavaScript kód.
Egy jól megírt JavaScript függvény többször, illetve más webhelyeken is felhasználható.

Egyébként mindkét megoldás az alábbi táblát hozza létre egy weboldalon:

A szkriptekről szóló bevezetőben azt írtam, hogy általában kerülendőnek tartom a JavaScript használatát. Egy publikus weblap készítése során például a szorzótábla létrehozására biztosan más utat javasolnék. A HTML kód manuális létrehozása vagy szerver oldali generálása is jobb megoldás, mert akkor nem kell külön foglalkozni a JavaScriptet kikapcsoló felhasználók kiszolgálásával. Egy vállalati intranetes oldal esetén viszont a JavaScript alkalmazása a hatékonyabb módszer:

A többnyire erősen leterhelt szerver helyett a programkódot a kliens gépnek kell végrehajtania.
Kisebb állományok utaznak a cég belső informatikai hálózatán.

Alternatív tartalom. A <noscript> tag »