Weblabor - JavaScript

Mi a JavaScript?

A JavaScriptet a Netscape fejlesztette ki. Ez egy olyan parancsnyelv, amely segítségével létrehozhatunk interaktív Web-oldalakat. A cikk során számos klasszikus példával megismerkedhet az olvasó, ezeket könnyedén beépítheti a saját oldalaiba, vagy továbbfejlesztheti õket saját igényeinek megfelelõen. Az Internetrõl is letölthetõ sok egyszerû és kevésbé egyszerû példa. Tanácsos ezek forrását is áttanulmányozni, hiszen jó ötletek leshetõk el belõlük.

A JavaScript nem Java!

Mielõtt mélyebben belekezdenénk a JavaScript tanulmányozásába, érdemes egy fontos különbségre felhívni a figyelmet. A JavaScript nem tévesztendõ össze a Java-val! A hasonló név ellenére a Java önálló programozási nyelv, szükség van fordító programra, amivel a forráslistából bájtkódot készíthetünk. A JavaScript pedig parancsnyelv, futtatásához nem kell más, mint egy böngészõ, amely kezelni képes a JavaScriptet.

Hasonlóság azonban nem csak a névben van, ugyanis a két nyelv szintaxisa a C nyelvhez hasonlatos, a manapság divatos objektumorientáltságot pedig egyikük sem kerülhette el.

JavaScript futtatása

Mint korábban említettem, csak egy JavaScriptet "értõ" böngészõre van szükségünk. Ez lehet akár a Netscape Navigator, amely a 2.0-ás verzió óta ismeri a JavaScriptet, vagy a Microsoft Internet Explorer (3.0 vagy nagyobb verzió), így a legtöbb ember képes JavaScriptet futtatni.

Ha az olvasó nem ismerné a HTML alapjait, érdemes most utána olvasni az Interneten található leírásokban, vagy az errõl szóló szaklapokban, mielõtt tovább olvasná a leírást.

JavaScript beágyazása HTML dokumentumba

A JavaScript utasítások közvetlenül a HTML oldalba kerülnek be. Lássunk erre egy egyszerû példát:

<HTML>
<BODY>
Ez itt hagyományos HTML.<BR>
  <SCRIPT LANGUAGE="JavaScript">  
    document.write("Ez már JavaScriptben íródott!!!<BR>");
  </SCRIPT>
Ez a sor újra HTML!<BR>
</BODY>
</HTML>

Ha a böngészõnk értelmezni tudja a JavaScriptet, akkor ez a pár sor a következõt eredményezi:

Ez itt hagyományos HTML.

Ez a sor újra HTML.

A három sor közül az elsõ és utolsó HTML-ben íródott, míg a középsõt a JavaScript document.write() parancsával írattuk ki. Látható, hogy a HTML <SCRIPT> elemét használtuk arra, hogy JavaScript utasításokat ágyazzunk a HTML dokumentumunkba. Minden, amit a <SCRIPT> és a </SCRIPT> elemek közé teszünk JavaScript utasításokként értékelõdik ki. A LANGUAGE attribútum segítségével a JavaScript verziószámát határozhatjuk meg. A lehetséges verziók:

<SCRIPT LANGUAGE="JavaScript"> 1.0-ás JavaScript-et támogató böngészõkhöz (pl. Netscape 2.0)
<SCRIPT LANGUAGE="JavaScript1.1"> 1.1-es JavaScript-et támogató böngészõkhöz (pl. Netscape 3.0)
<SCRIPT LANGUAGE="JavaScript1.2"> 1.2-es JavaScript-et támogató böngészõkhöz (pl. Netscape 4.0)

Ez azt jelenti, hogy például a Netscape 2.0 a JavaScript1.1, a Netscape 3.0 a JavaScript1.2 verziójú kódot figyelmen kívül hagyja.

Mi történik akkor, ha a böngészõnk régebbi, JavaScriptet nem ismerõ típus? Mivel a böngészõ nem ismeri a <SCRIPT> elemet, ezért azt nem veszi figyelembe, és a közötte lévõ utasításokat szövegként jeleníti meg a HTML dokumentumon belül. Természetesen van megoldás ennek elkerülésére. Amint az ismert, a HTML dokumentumokba megjegyzéseket az alábbi módon tehetünk:

Javítsuk ki az elõbbi egyszerû példát az alábbi módon:

<HTML>
<BODY>
Ez itt egy hagyományos HTML dokumentum.<BR>
  <SCRIPT LANGUAGE="JavaScript">
  <!-- A JavaScript kód elrejtése, amennyiben szükséges
    document.write("Ez már JavaScriptben íródott!!!<BR>")
  // A kód elrejtésének vége -->
  </SCRIPT>
Ez a sor újra HTML!<BR>
</BODY>
</HTML>

A JavaScript utasításokat HTML megjegyzések közé tesszük, így a nyelvet nem ismerõ böngészõk nem jelenítik meg az utasításokat, ugyanis azt megjegyzésként értelmezik. A JavaScriptet nem ismerõ böngészõ ezt a kódot az alábbi módon jelenítené meg:

Ez itt egy hagyományos HTML dokumentum.
Ez a sor újra HTML.

Ellenkezõ esetben igen zavaros sorokat kaphatunk:

Ez itt egy hagyományos HTML dokumentum.
document.write("Ez már JavaScriptben íródott!!!<BR>")
Ez a sor újra HTML.

Fontos viszont megemlíteni, hogy a JavaScript nem védhetõ meg a "kíváncsiskodó szemek" elõl, hiszen a HTML dokumentumok forrása megtekinthetõ a legtöbb böngészõ segítségével, a JavaScript utasítások pedig ennek közvetlen részét képezik.

Események

A programoknak gyakran kell reagálnia olyan eseményekre, mint billentyû lenyomása, vagy az egér mozgatása. Az események és eseménykezelõk a JavaScript programozásban is nagyon fontosak. Az ilyen események kezeléséhez különféle függvények, eseménykezelõk léteznek.

Tekintsük a következõ példát. Azt akarjuk, hogy a JavaScript programunk reagáljon valamilyen eseményre, pontosabban létrehozunk egy gombot, amire kattintva egy ablak jelenik meg a képernyõn. Ez gyakorlatilag azt jelenti, hogy az ablaknak egy kattintás-esemény (click-event) hatására kellene megjelenni. Az itt használt eseménykezelõ neve: onClick.

<form>
<input type="button" value="Kattints rám!" onClick="alert('Hello!')">
</form>

Ebben a példában létrehoztunk egy ûrlapot, amely egyetlen gombból áll. Ennek így még semmi köze nincs a JavaScripthez, hiszen ezt HTML-ben írtuk meg. Az újdonság az onClick="alert('Hello!')" rész, ami az <INPUT> HTML elem belsejében található, és ez már valóban JavaScript (vegyük azt is észre, hogy itt nem használtuk a <SCRIPT> HTML elemet!). Ez mondja meg, hogy mi történjen akkor, ha a felhasználó megnyomja a gombot. Ha ez bekövetkezik, akkor valójában egy onClick esemény generálódik, és ez végrehajtja az alert('Hello!') JavaScript kódot. Ez egy függvény, amely létrehoz egy üzenetablakot, melyben a zárójelen belül idézõjelek közé írt szöveget jeleníti meg.

Figyeljük meg azt is, hogy lehet idézõjelen belül idézõjelet használni! JavaScriptben mindkét idézõjelet lehet használni, csak arra kell ügyelni, hogy ez a számítógép számára is egyértelmû legyen. Az alábbi idézõjelhasználat is helyes lett volna:

onClick='alert("Hello!")'

Általánosan így írható le az eseménykezelés szintaxisa:

<HTML_elem eseménykezelõ_neve="JavaScript_utasítás">

Még sok más eseménykezelõ létezik. Ezek közül néhánnyal még találkozunk a cikk során, de addig is a következõ táblázat összefoglalja a fontosabb eseményeket:

Események	Mire alkalmazható?	Mikor következik be?	Eseménykezelõ neve
abort	képek	A felhasználó megszakítja a kép betöltését	onAbort
blur	ablak, keret, és minden ûrlapmezõ	Az inputfókusz elkerül az elemrõl (pl. az egérrel az aktuális mezõn kívülre kattintunk)	onBlur
change	szövegmezõ, listaablak	Megváltoztatunk egy ûrlapbeli értéket	onChange
click	gombok, rádió gomb, csatolások (linkek)	Az ûrlap valamely elemére, vagy egy csatolásra (link) kattintunk	onClick
error	ablak, képek	Ha kép vagy dokumentum betöltésekor hiba lép fel	onError
focus	ablak, keret, minden ûrlapmezõ	Az inputfókusz az adott elemhez kerül (pl. kijelöljük az ûrlap egy elemét)	onFocus
load	dokumentum törzse (BODY)	Ha az oldal betöltése befejezõdött	onLoad
mouseout	linkek, képek	Ha az egérmutató elhagyja a linket vagy a kép területét	onMouseOut
mouseover	linkek, képek	Ha az egérmutató a link felett tartózkodik vagy a kép területén	onMouseOver
reset	ûrlapokra	Ûrlap törlésekor	onReset
select	szövegmezõ	Új mezõt jelölünk ki	onSelect
submit	submit típusú nyomógomb	Ûrlap elküldésekor	onSubmit
unload	dokumentum törzse (BODY)	Ha elhagyjuk az oldalt	onLoad

Függvények

Minden programozási nyelvben, így a JavaScript-ben is rendkívül fontos szerepet kapnak a függvények. A nyelv számos függvényt tartalmaz, például a korábban megismert alert() függvény is ezek közül való. A függvényeknek adhatunk át paramétereket, amelyekkel dolgozni fognak (az alert() függvény paramétere az idézõjelek között átadott szöveg volt, amit a függvény egy üzenetablakban jelenített meg). Mi magunk is írhatunk függvényeket, hogy a nagyobb, összetettebb feladatokat kisebb, jobban kezelhetõbb részekre bontsuk. Ezek a függvények szintén átvehetnek paramétereket, sõt értéket is adhatnak vissza, csakúgy, mint más progamozási nyelvekben. A függvények mûködését egy rövid példán keresztül mutatom be:

<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése, amennyiben szükséges

function szamol_1(x,y){
  var eredmeny = x + y;
  document.write("<H3>"+x+" + "+y+" = "+eredmeny+"</H3><BR>");
}

function szamol_2(x,y){
  return x+y;
}

szamol_1(23,11);
szamol_1(17,27);
szamol_1(3,45);

document.write("<H3>13 + 5 = " + szamol_2(13,5) + "<H3>");

//-->
</SCRIPT>
</HTML>

A program eredménye a következõ lesz:

Ebben a rövid programban két függvényt hoztunk létre szamol_1 és szamol_2 néven. Figyeljünk arra, hogy a JavaScript a kis- és nagybetûk között különbséget tesz, így például a JAVASCRIPT, javascript, JavaScript három különbözõ függvénynévnek bizonyulna.
A JavaScript-ben írt függvények elé kötelezõen be kell írni a function kulcsszót, viszont ellentétben pl. a C++ vagy a Java függvényeivel nem kell a visszatérési értéknek, valamint a paramétereknek a típusát megadni.
Nézzük most meg részletesen a szamol_1 nevû függvényt, hogyan épül fel, és hogy mûködik!

function szamol_1(x,y){
  var eredmeny = x + y;
  document.write("<H3>"+x+" + "+y+" = "+eredmeny+"</H3><BR>");
}

A function kulcsszót közvetlenül a függvény neve követi, majd zárójelekben a paramétereket adjuk meg. Ez a függvény két paraméterrel rendelkezik, x-szel és y-nal (amelyek típusát nem adtuk meg). A függvény törzse kapcsos zárójelek között van, és ide helyezzük el a függvényhez tartozó utasításokat.
A függvényben három változót is használunk (x, y és eredmeny). A JavaScript programok változókban tárolják az információkat, adatokat. A példánál maradva x illetve y tárolja el az összeadandó számok értékeit, és az eredmeny nevû változó tárolja el az összeget.
Eltérõen más programozási nyelvektõl, a JavaScript-ben nem kell definiálnunk a változók típusát (mint pl. int, float, char stb.), hanem azt a programot végrehajtó böngészõ állapítja meg a változók használata alapján.
JavaScript-ben a változók neve betûvel, vagy aláhúzással (_) kezdõdhet, és a függvénynevekhez hasonlóan szintén különbség van kis- és nagybetûk között.
Változót a var kulcsszóval, majd a változó nevének megadásával deklarálhatunk. Deklaráláskor az értékadó operátor (=) segítségével kezdõértéket is rendelhetünk a változókhoz. Ezt tettük a példánkban is:

var eredmeny = x + y;

Azaz létrehoztuk az eredmeny nevû változót, és kezdõértéknek a paraméterként átadott x és y változók összegét adtuk. A függvény törzsének második sora elvégzi a számolás eredményének kiírását. A document.write utasítást használtuk itt fel, amivel már találkoztunk. Az egyetlen érdekesség az argumentumban található, a zárójeleken belül, ugyanis a kiírandó szöveget részekbõl fûztük össze. A "<H3>" rész HTML-bõl ismerõs, a kiírás típusát határozza meg. Ehhez fûzzük hozzá az x változót. Mivel x nem idézõjelek között van, ezért nem egy x karakter, hanem az x változó értéke kerül kiírásra. És így tovább, elõször egy "+" karaktert, majd y változó értékét, egy "=" karaktert, ill. az eredmeny változó értékét fûzzük az eddigi karakterláncunkhoz, legvégül a "</H3>" HTML elemmel zárjuk le a karakterláncunkat a HTML szabályainak megfelelõen. Ha x értéke 23, y értéke 11, akkor az eredmeny változó értéke x és y összege, azaz 34 lesz, és a kiírandó karakterlánc a következõnek felel meg:

"<H3> 23 + 11 = 34 </H3>"

A függvényeket a nevükkel hívjuk meg, és híváskor adjuk át a paraméterek aktuális értékét. Példánkban az elsõ függvényt háromszor hívtuk meg:

szamol_1(23,11);
szamol_1(17,27);
szamol_1(3,45);

Látható, hogy a függvény nevét követi az ún. aktuális paraméter lista, ami az elsõ esetben 23 és 11, azaz a függvényben szereplõ x változó értéke 23, míg az y értéke 11 lesz. Az aktuális paraméterlistát ugyanúgy zárójelek közé tesszük, mint a függvények definíciójában szereplõ formális paraméterlistát. A második esetben ez alapján x 17, y 27, a harmadik esetben x 3, y 45 értéket vesz fel.

A szamol_2 függvény egy lényeges dologban különbözik az elõbbitõl. Rendelkezik visszatérési értékkel.

function szamol_2(x,y){
  return x+y;
}

Amint említettem, JavaScript-ben eltérõen más programozási nyelvektõl nem kell a visszatérési érték típusát megadni. A függvény x+y értéket adja vissza a return utasítás felhasználásával. Figyeljük meg a függvény hívását!

document.write("<H3>13 + 5 = " + szamol_2(13,5) + "</H3>");

A szamol_2 függvényt a 13 és 5 paraméterekkel hívtuk meg, amely kiszámolja azok összegét és visszatér ezzel az értékkel. Ez az érték behelyettesítõdik a hívás helyére, így a document.write függvény argumentuma gyakorlatilag a következõ lesz:

"<H3>13 + 5 = 18 </H3>"

<< Vissza a tartalomhoz

Tovább a második fejezethez >>