6.01. Hello world!

A javascript kód a böngészőben fut, tehát a szerverről el kell juttatni a böngészőhöz. Ennek lagalább két módja van:

A HTML oldalba beágyazzuk a Javasript kódot

A HTML oldalon bárhol a <script> .... </script> tagek közé írt szöveg javascript kódnak számít. A HTML oldal <body> .....</body> részében lefutó kód által kiírt szöveg a HTML oldal megjelenő rszévé válik. A <head>...</head> részben lefutó kód a HTML oldal részévé válik, de az eredmény látható formában nem feltétlenül jelenik meg.

<javascript>
<!DOCTYPE HTML>
<html>
<body>
  <p>...HTML kód...</p>
  <script>
    alert('Hello, World!');
  </script>
  <p>...lábléc, html kód...</p>
  </body>
</html>

<

A fenti kódrészlet a tipikus "Hello, World!" szöveget fogja kiírni egy ablakban egy ok gombbal ellátva!

Rögtön megjegyzem, hogy a fenti kód a lusta programozók kódja, mert illik tisztázni a félreértéseket. Valójában így kell javascriptet az oldalba szúrni:

<script type='text/javascript'>
  alert("Hello, World");
</script>

Ezzel a változtatással tisztázzuk a böngészők és a kód olvasói számára, hogy véletlenül sem JScriptet akarunk futtatni!

Rögtön megismertetlek benneteket az alert("szöveg") utasítással, ami egy kis ablakban kiírja a figyelmeztető szöveget és vár egy gomb megnyomására.

Valahogy így. A  különböző böngészők és operációs rendszerek esetén hasonlóan, de nem ugyanúgy jelenik meg a kis ablak.

A másik lehetőség az, hogy külön fájlba szerkesztjük a javascript kódot éas azt include-oljuk, hasonlóan, mint más programozási nylevekben. Ekkor valahogy így oldjuk meg:

<script src="http://fzolee.hu/fw/misc/jquery.js"></script>

Vagyis a beágyazandó kódot tartalmazó fájl elérési útját adjuk meg.

Melyik módszer jobb?

  • Ha csak pár soros beszúrásról vagy egy változó deklaálásáról van szó, akkor talán a HTMl oldalba szúrt kód az egyszerűbb és nem túl zavaró.
  • Ha nem csak pár soros kódot akarunk használni, akkor nem szabad a különböző nyelvek (HTML, CSS, Javascript, PHP ) kódjait összekeverni, mert az olvashatatlan forráskódot eredményez és nagy lesz a tévedés veszélye. Érdemes szétválasztani a különféle kódokat.
  • Külön fájlba kell tenni a forráskódot, ha a javascript kódunkat különböző oldalakon is le akarjuk futtatni. Csak így biztosítható, hogy minden oldalon biztosan ugyanaz a kód fusson le!
  • Sebességi megfontolás: Ma már minden nagyobb weboldalon javascript könyvtárakat használnak a programozók (pl. jQuery, Prototype, Dojo ), amelyeknek viszonylag nagy kódkönyvtárai vannak. Ha egy javascript kódot a HTMl-től külön fájba tesszük, akkor a böngészők mindaddig nem töltik újra a távoli szerverről a kódot, amíg az meg nem változik. Egy javascript kód a fejlesztés időszalkát leszámítva nem szokott változni. Ekkor a böngésző átmeneti tárából töltődik be a kód, tehát nem terheli a hálzati forgalmat. Gyors lesz a betöltődés!

Hogyan hajtódik végre a kód?

A böngészőkben általános szabály, hogy a HTMl kód betöltődése és feldolgozása fentről lefelé halad. Ez azt jelenti, hogy amikor a szerverről letöltjük a HTML oldalt az abban lévő TAG-eket feldolgozza a böngésző, és a megfelelő adatszerkezeteket létrehozza a memóriában (az úgynevezet DOM = Document Object Model alapján) és az így létrejövő adatok alapján fut le a megjelenítő motor.

Ez azt jelenti, hogyha olyan kódot akarunk végrehajtani, amely csak az oldalon később levő informácóval dolgozna, akkor a betöltődés során hibás adatstruktúra jön lére, a javascript kód hibára fut.

Alapszabály:

  • Először mindig annak a HTML tartalomnak kell betöltődni, amellyel azután a Javascript kód foglalkozik.
  • Van kivétel is: Ha az un. document.ready szerkezetet használjuk, akkor a javascript kód csak a teljes oldal betöltődése után fog lefutni! Ilyenkor mindegy, hogy hova tesszük a Javascript kódot és include-oljuk vagy sem.