A HTML és a JavaScript
A honlapkészítés igen fontos részét jelentik a felhasználó reakcióit figyelő utasítások. Ezeket általában különféle, úgynevezett script nyelvek ismeretével és használatával
kezelhetjük. Erre szolgál a JavaScript programozási nyelv is.
Mint az előző mondatból már kiderült, a JavaScript egy script nyelv, amely leegyszerűsítve azt jelenti, hogy egy másik, önálló programozás egyszerűsített mása. Esetünkben
a "szülőnyelv" a Sun Microsystems és a Netscape Communication Corporation által kifejlesztett Java. Ez egy külső értelmezőt használ a futásához, ezzel szemben a
JavaScriptet a gépünkre telepített böngésző képes futtatni. Így a JavaScript parancsnyelvnek is nevezhető. Legelőször a Netscape 2.0 támogatta, majd a HotJava
és a 3.0-s verziójától kezdve a Microsoft Internet Explorer is. A különböző verziók ismerői:
| Böngésző neve |
Verzió |
Támogatott JavaScript verzió |
| 1.0 |
1.1 |
1.2 |
1.3 |
| Netscape Navigator |
1.x |
N |
N |
N |
N |
| 2.x |
I |
N |
N |
N |
| 3.x |
I |
I |
N |
N |
| 4.0 - 4.05 |
I |
I |
I |
N |
| 4.06 - 4.7x |
I |
I |
I |
I |
| 6.x |
I |
I |
I |
I |
| Microsoft Internet Explorer |
3.x |
I |
N |
N |
N |
| 4.x |
I |
I |
I/R |
N |
| 5 |
I |
I |
I |
N/R |
| 6 |
I |
I |
I |
I |
| Opera |
3.x |
I |
I/R |
N |
N |
| StarOffice |
4 |
I |
I |
N |
N |
| 5 |
I |
I |
I |
N |
| I = igen
N = nem
R = részben |
Ennek a nyelvnek az ismerete elsősorban arra tesz képessé bennünket, hogy oldalainkat interaktívvá tegyük, továbbá kezelni tudjuk a felhasználó különféle reakcióit. Ehhez a
nyelv eseménykezelő függvényeit használhatjuk fel. Ezek ismertetése külön figyelmet igényel, így itt a HTML szempontjából különösen fontos utasítások bemutatására kell
szorítkoznunk. Bővebben a
NetOktató - avagy az Internet programozása című ingyenes internetes oktatócsomagban olvashatunk a nyelv használatáról. A továbbiakban majd láthatjuk azt is, hogy
milyen hasznos is egy szövegformázó nyelv mellet egy objektumorientált nyelv alkalmazása.
JavaScript utasításblokkunkat jól el kell különítenünk oldalaink HTML részétől. Erre nemcsak külön HTML kód szolgál - javasolt az utasításokat formailag és helyileg is
elválasztani a hipertext elemektől.
A nyelv HTML parancsszava a <SCRIPT> és </SCRIPT> tag, ahol jelezni kell a használt scriptnyelv típusát is; esetünkben: <SCRIPT
LANGUAGE="JavaScript">. A JavaScript szó után, az idézőjelen belül megadható a nyelv verziója is, jelenleg az 1.0, az 1.1, az 1.2 és az 1.3
változatok alkalmazhatóak. Ha nem adjuk meg a verziószámot, akkor a böngészőnk által támogatott legújabb változatnak megfelelően történik az értelmezés.
Mivel még mindig elég sok nem JavaScript kompatíbilis böngésző van használatban az internetezők körében, így az ebből következő problémák kiküszöbölésére JavaScript
utasításainkat javasolt még külön a <SCRIPT> és </SCRIPT> pároson belül megjegyzés tagek(<!-- JavaScript utasítások -->) közé is
zárni. (Lásd a példát is!) Szintúgy hasznos a <NOSCRIPT> parancs, melynek lezárója a </NOSCRIPT>. Ezekkel felkészíthetjük oldalainkat a nem JavaScript
kompatíbilis böngészőkre (hasonló hatásmechanizmussal, mint azt a <NOFRAMES> utasításnál már láttuk). Legtöbbször JavaScript utasításblokkunkat a <HEAD>
tagen belül szoktuk elhelyezni, még a <BODY> parancs előtt, ettől azonban mint azt látni fogjuk, el lehet térni. Fontos lehet ugyanis, hogy az oldal törzsében
(BODY) hajtódjon végre egy utasításcsomag. Ilyen esetben a JavaScript kód közvetlenül a HTML részbe illeszthető. Ekkor is szükségesek a <SCRIPT>...</SCRIPT>
utasításpárok. Ezek között aztán megadhatjuk a szükséges parancsokat (pl. JavaScript generálta szöveg beírása a HTML dokumentumba).
A fentiek alapján tehát egy egyszerű szöveg kiíratása a következőképpen végeztethető el:
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript parancsok rejtese regebbi bongeszok elol
document.write("Helló Világ!");
var koszonto = "Helló Világ! 2";
document.writeln(koszonto);
// -->
</SCRIPT>
A fenti példában a document.write() és a document.writeln() függvényeket használtuk fel adatok kiíratásához. A forrás második sora (var koszonto ...) egy változó
deklarálását és alapérték megadását mutatja. Látható, hogy nem adtunk meg változó típust, azt ugyanis a JavaScript automatikusan megválasztja a változó értékének függvényében. Így egy
korábbi szöveges változó minden további nélkül lehet ugyanazon programban egész vagy logikai (vagy lebegőpontos szám, tömb, objektum stb.) típus.
A JavaScript szigorú objektumhierarchiára épül, a függvényeket, beépített változókat ezek ismeretében használhatjuk.
Státusz sor kezelése
A JavaScriptben több alternatíva is kínálkozik a böngészőablak állapotsorának (status - általában pl. a linkek URL-jét itt jelzi a böngésző) kezelésére.
Szerkeszthetjük tartalmát, időzíthetjük változásait, figyeltethetjük értékeit.
Magyarázószöveg megjelenítése
Általános szokás a hivatkozásoknál a linkelt fájlok elérési útjának elrejtése. Tudniillik a böngésző alapértelmezésben arra használja az állapotsorát, hogy ezen információkat
megjelenítse. A JavaScript segítségével ez könnyedén megváltoztatható, méghozzá a window.status = "Státusz sor szövege"; metódussal. Vegyük észre az utasítás végén a ;
jelet, mely minden C típusú nyelvnél (Java, JavaScript, Perl, PHP stb.) megszokott és kötelező sorlezáró.
A JavaScript utasításaink végrehajtását általában valamely böngészőesemény bekövetkezéséhez kötjük. Linkek esetében ez lehet a már tárgyalt onMouseOver, onMouseOut,
és az onClick utasítás által kezelt "egér az objektum felett", "egér elhagyta az objektumot", "kattintás az objektumon" esemény. Lássunk erre magyarázatképpen egy példát!
<A HREF="oldal.html" TARGET="keret1" onMouseOver="fuggveny1()" oMouseOut="fuggveny2()" onClick="fuggveny3()">Link</A>
A fenti sorban a "fuggvenyX()" helyére bármilyen JavaScript utasítás írható, akár a státusz sort is megváltoztathatjuk így: window.status="Üzenet";return true". Ebben
a parancsban a return true; részre mindenképpen szükség van, erről a NetOktató - avagy az Internet programozása
címen olvashatunk bővebben.
Térjünk vissza a függvényhívás szabályaihoz! A fuggveny() alakban történő hívás is jól mutatja, hogy szükség van egy ( és egy ) jelre az eljárás neve után.
Ha a függvényünk rendelkezik paraméterekkel, akkor itt kell azok aktuális értékeit megadnunk, ugyanakkor a függvény elkészítésekor ugyanitt kell azok nevét feltüntetni. Így igen
zavarosan hangzik, de bővebb magyarázatra ezen HTML ismertető keretein belül nem futja. Mégis magyarázatként álljon itt a következő példa:
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript parancsok rejtese regebbi bongeszok elol
fuggveny1(parameter1,parameter2);
{
window.status = parameter1;
return true;
if (parameter2 == 2)
{
var uzenet = "Üzenet a státusz sorba";
fuggveny2(uzenet);
}
}
fuggveny2(parameter3)
{
window.status = parameter3";
return true;
}
// -->
</SCRIPT>
[HTML rész]
<A HREF="oldal.html" onMouseOver="fuggveny1('Egér a link fölött!',0)" onMouseOut="fuggveny2('Helló világ!')" onClick="fuggveny1('Nem fog megjelenni',2)">
Link</A>
Mindenképpen próbáljuk ki a fent említett példát, mert úgy könnyebb megérteni. Figyeljük meg a JavaScript feltételkezelését a fuggveny1() utasításblokkjában! A feltétel itt egy
változó adott értékének vizsgálata; a == jel értékösszehasonlítást jelent: "ha a két oldal kölcsönösen egyenlő" (vö. var i = 13; értékadással!).
Láthatjuk a példában azt is, hogy függvényeink utasításait a { és a } jelek közé kell zárnunk.
A fuggveny2(uzenet); sor függvényhívást jelent (adott paraméterrel, mely itt uzenet értéke), hatására végrehajtódik a fuggveny2(parameter3){...} utasításblokk.
Benyomódó gomb, képváltás
Sok honlapon találkozhatunk az úgynevezett "benyomódó gomb" effektussal. Ezt a programozók a JavaScript képváltó képességének kihasználásával valósítják meg. Maga a kód igen egyszerű,
mindössze két dolgot kell megadnunk: a lecserélendő képet és azt, amire le szeretnénk cserélni. Egy példán keresztül mindjárt érthetőbb:
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript parancsok rejtese regebbi bongeszok elol
kepcsere1()
{
window.document.kep_neve.src = "masik_kep";
}
kepcsere2()
{
window.document.kep_neve.src = "egyik_kep";
}
kepcsere3(azonosito_szam,esemeny)
{
if (esemeny == 1)
{
window.document.images[azonosito_szam].src = "masik_kep";
}
else
{
window.document.images[azonosito_szam].src = "egyik_kep";
}
}
// -->
</SCRIPT>
<A HREF="valahova" onMouseOver="kepcsere1()" onMouseOut="kepcsere2()"><IMG SRC="egyik_kep" NAME="kep_neve"></A>
<A HREF="valahova" onMouseOver="kepcsere3(1,1)" onMouseOut="kepcsere3(1,0)"><IMG SRC="egyik_kep" NAME="kep_neve"></A>
<A HREF="valahova" onMouseOver="kepcsere3(2,1)" onMouseOut="kepcsere3(2,0)"><IMG SRC="egyik_kep" NAME="kep_neve"></A>
A fenti kód mindjárt két példával is szolgál. Az első hivatkozásnál onMouseOver eseményre a kép a masik_kep fájlra cserélődik,
onMouseOut eseménynél mindez fordítva játszódik le. Figyeljük meg, hogy a HTML forrásban a kép rendelkezik egy azonosító névvel
(kep_neve)!
Ennél egyszerűbb, gyorsabb a kepcsere3() függvény. Ez leginkább sok kép váltogatása (például menü) esetén lehet szembetűnő. Itt az első
paraméter a kép azonosítója, a második egy feltételkezeléssel végül a megfelelő egéresemény követésére használódik.
A két példában jól látható, hogy kétféleképpen is azonosíthatjuk egy oldal képeit: saját nevük, illetve számazonosítójuk alapján. Ez utóbbi
azonosítót a böngésző adja, mégpedig úgy, hogy nullától kezdődően megszámozza a képeket a forráskódban elfoglalt helyük alapján, fentről lefelé.
Vegyük észre, hogy a fenti példában a kep_neve névazonosítójú objektum a 0. számú, ezért kell a másodikra 1, a harmadikra 2 számokkal
hivatkoznunk.
Érdemes a képváltásra épülő menüknél alkalmazni a fentebb megismert magyarázószöveg használatot, mivel előfordulhat, hogy a menüt alkotó
fájlok valami miatt nem megjeleníthetőek - lehetetlenné téve ezzel az eligazodást. Ilyenkor nélkülözhetetlen a magyarázószöveg.
Példánkban egy link létrehozására volt szükségünk ahhoz, hogy a képhez kapcsolódó egéreseményeket kezelni tudjuk. A HTML régebbi verziói ugyanis
még nem támogatják az <IMG> parancs opciójaként az egéresemény-kezelő JavaScript utasításokat. Ezzel szemben a HTML 4.0 már
képes a következő sor megfelelő értelmezésére:
<IMG SRC="egyik_kep" onMouseOver="kepcsere3(3,1)" onMouseOut="kepcsere3(3,0)">
Űrlapok és mezőik kezelése
Nagyon fontos részéhez érkeztünk a JavaScript gyorstalpaló ismertetésének.
A következőkben megismerkedhetünk azzal, hogyan is lehet egy űrlap eleminek tartalmát, tulajdonságait, illetve az adatküldést manipulálni,
kezelni JavaScript segítségével.
Minden HTML formnak megadhatunk egy azonosító nevet (<FORM NAME="azonosito" ACTION="kuldes()">). Az előző kód például szolgál
arra is, hogyan adható meg a küldéskor végrehajtandó JavaScript parancssor. A küldés JavaScript parancsa egyébként a submit() beépített
függvény. Ezt a window.document.azonosito/forms[0].submit() sorral hívhatjuk. Itt is kétféle módon hivatkozhatunk a küldendő adatokat
tartalmazó űrlapra. A szögletes zárójelben lévő érték ez esetben is a forrásban fentről lefelé számolt, 0-ról indult sorszámot jelenti. A form
törlését (alapállapotra visszaállítását) a hasonlóképpen hívható reset() függvénnyel végezhetjük.
Tanulmányozzuk a következő HTML kódot!
<INPUT NAME="adat1" TYPE="TEXT" VALUE="Adat 1" SIZE="10">
<INPUT NAME="gomb1" TYPE="BUTTON" VALUE="Küldés" onClick="window.document.forms[0].submit()">
<INPUT NAME="jelolonegyzet1" TYPE="CHECKBOX">
<SELECT NAME="valasztomenu" onChange="JavaScript utasítások">
<OPTION VALUE="val1">Adat 1
<OPTION VALUE="val2">Adat 2
<OPTION VALUE="val3">Adat 3
</SELECT>
A fenti adatokatra a következőképpen hivatkozhatunk: window.document.forms[0].azonosító.value. Itt az azonosító lehet adat1,
gomb1, jelolonegyzet1, illetve valasztomenu. A kód a mezők aktuális értékét adja vissza (value = érték). A választómenü
esetében - attól függően, hogy melyik elemet jelöljük meg - val1, val2, val3 lehet a visszakapott érték.
A fenti ismertető csak a HTML-hez tényleg nélkülözhetetlen JavaScript utasításokat írja le, a nyelv ennél sokszorta többre képes. Dinamikusan
kezelhetjük vele oldalaink hátterét, link- és betűszínét, keretrendszereit. Lekérhetjük a pontos időt, a dátumot stb. Ezen és a további részek
ismertetésére e rövid oktatóanyag kereteiből nem futja. Utoljára azonban említsük meg még a JavaScript időzítő függvényét! Ezt a
window.setTimeout("fuggveny()",időkorlát) alakban hívhatjuk, és window.clearTimeout("fuggveny()") alakban szüntethetjük meg. Arra ad
lehetőséget ez a parancs, hogy a paraméterként megjelöült függvényt az ezredmásodpercekben számított időkorlátnak megfelelően újrahívjuk.
Remélem sikerült meggyőződni arról, hogy érdemes a JavaScripttel mélyebben is foglalkozni.