A JavaScript utasítások a HTML body részébe 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>
Eredménye:
Ez itt hagyományos HTML.
Ez már JavaScriptben íródott!!!
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)
<!-- A megjegyzés eleje
....................................
A megjegyzés vége -->
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:
23 + 11 = 34
17 + 27 = 44
3 + 45 = 48
13 + 5 = 18
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;
}
A 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>"
Nincsenek megjegyzések:
Megjegyzés küldése