Internetes pénzkeresés


 

A 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-as verzió óta ismeri a JavaScriptet, vagy a Microsoft Internet Explorer (3.0 vagy nagyobb verzió). Mivel ezek a böngészõk a legelterjedtebbek, í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 egy hagyományos HTML dokumentum.<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 egy hagyományos HTML dokumentum.
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õdnek 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:

<!-- 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? Az 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 egérrel az aktuális mezõn kívülre kattintunk
onBlur
change szövegmezõ, listaablak Megváltoztatunk egy ûrlap beli é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õ Kijelöljük az ûrlap egy elemét
onFocus
load dokumentum törzse (BODY) A böngészõ új lapot tölt be
onLoad
mouseout
linkek Az egérmutató elhagyja a linket
onMouseOut
mouseover linkek Az egérmutató valamely link felett tartózkodik
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 másik HTML oldalra lépünk
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("<H2>" + x + " + " + y + " = 
" + eredmeny + "</H2><BR>");
}

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

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

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

//-->
</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("<H2>" + x + " + " + y + " = " + eredmeny + "</H2><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 "<H2>" 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 "</H2>" 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:

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

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("<H2>13 + 5 = " + szamol_2(13,5) + "</H2>");

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:


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

A HTML dokumentum

A JavaScript felépítése

A JavaScript egy HTML oldal minden elemét, és a böngészô ablakát is objektumként kezeli. Minden ilyen objektum rendelkezik tulajdonságokkal (adatmezõkkel) és megfelelô függvényekkel, amelyeken keresztül az oldal szinte minden tulajdonságát megváltoztathatjuk, a böngészô egyes részeit programozhatjuk. A böngészô ablaka a JavaScript szemszögébôl egy ún. window objektum (window-object). Ez bizonyos elemeket tartalmaz, mint például a státuszsort. Az ablak belsejébe HTML oldalt tölthetünk, amit a JavaScript a document objektumon keresztül kezel. A document objektum az aktuálisan betöltött oldalt kezeli, és ezáltal egyike a leggyakrabban használt és legfontosabb objektumoknak. Segítségével módosíthatjuk az oldalunk megjelenését, például beállíthatjuk a színeket! Próbáljuk ki az alábbi példát!

Nézzük meg a kódot!

<HTML>
<HEAD>

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

function sarga(){
  document.bgColor="#FFFF00"; 
}

function kek(){
  document.bgColor="#00FFFF"; 
}

function eredeti(){
  document.bgColor="#FFFFFF";
}

// --> Elrejtés vége
</SCRIPT>
</HEAD>

<BODY>
<CENTER>
<P>
<FORM>
<INPUT TYPE="button" VALUE="Sárga háttér" onClick="sarga()">
<INPUT TYPE="button" VALUE="Kék háttér" onClick="kek()">
<INPUT TYPE="button" VALUE="Eredeti háttér" onClick="eredeti()">
</FORM>
</P>
</CENTER>

</BODY>
</HTML>

Létrehoztunk három függvényt sarga(), kek() és eredeti() néven. Mindegyik egyetlen értékadó utasítást tartalmaz, amellyel a document objektum bgColor nevû mezôjének adunk új értéket. Ebben az adatmezôben tárolódik ugyanis a háttérszín aktuális beállítása. Ha ezt felülírjuk valami más értékkel, akkor megváltozik a dokumentum háttérszíne is. Az új színt a HTML-bôl jól ismert RGB színkód formájában kell megadni. A gombokat egy ûrlappal állítottuk elô, és a Bevezetésben már bemutatott onClick esemény hatására hívódnak meg a megfelelô függvények.

Megváltoztathatók a HTML oldalunk egyéb színbeállításai is, ha a document objektum más adatmezôjének adunk az elôbbihez hasonló módon értéket. Egy táblázatban foglaljuk össze a színekkel kapcsolatos mezôket:
 

alinkColor Az aktív linkek színe
bgColor Háttérszín
fgColor Az elôtér színe
linkColor A linkek színe
vlinkColor Már meglátogatott linkek színe

Ezek ismeretében a linkek színét például a következô utasítással vátoztathatjuk meg:

document.linkColor = "#xxxxxx"

ahol xxxxxx helyére a kívánt RGB színkódot kell beírni.

Ennél sokkal fontosabb azonban, hogy a HTML objektumok is a document objektum mezôi. HTML objektumok például az oldalon megjelenô képek, linkek, ûrlapok. Mielôtt megnéznénk, hogy milyen módon kezelhetjük ezeket az objektumokat, hozzunk létre egy egyszerû HTML oldalt!

<HTML>
<HEAD><TITLE>Példa oldal</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>

<CENTER>
<IMG SRC="pelda1.jpg" NAME="pelda_pic1">

<P>
<FORM NAME="pelda_urlap">
Név:
<INPUT TYPE="text" NAME="nev" VALUE="JavaScript"><BR><BR>
Cím:
<INPUT TYPE="text" NAME="cim" VALUE="www.netscape.com"><BR><BR>
<INPUT TYPE="button" VALUE="Kattints rám" NAME="gomb" 
onClick="alert('Most megnyomtál! :-)')">
</FORM>

<P>
<P>
<IMG SRC="pelda2.jpg" NAME="pelda_pic2">

<P>
<P>
<A HREF="http://www.netscape.com">Nézd meg a Netscape JavaScript 
oldalait is!</A>
</CENTER>

</BODY>
</HTML>

Ez a rövid HTML kód a következô dokumentumot eredményezi.
 

Hogyan hivatkozhatunk az oldal egyes elemeire? Ebben a példa HTML dokumentumban két kép, egy link és egy ûrlap található két szövegmezôvel valamint egy gombbal. A hivatkozás az egyes objektumok típusa szerint megy. Az oldalon elôforduló elsô képhez az images[0] névvel férhetünk hozzá, a másodikhoz az images[1] névvel és így tovább. A linkek a links[0], links[1], links[2]... néven szerepelnek. Az ûrlapokat forms[0], forms[1], forms[2]..., míg az ûrlapok egyes mezôit (pl. szövegmezô, listaablak, gombok) forms[X].elements[0], forms[X].elements[1], forms[X].elements[2]... névvel érhetjük el, ahol X valamely ûrlap sorszáma.

A példánál maradva nézzük meg sorrendben, hogy az oldalon található HTML objektumokra hogyan hivatkozhatunk (mivel a HTML objektumok a document objektum mezôi, ezért mindegyik hivatkozás ezzel kezdôdik):

  • az elsô képre:
    document.images[0]
  • az ûrlap Név nevû szövegmezôjére:
    document.forms[0].elements[0]
  • az ûrlap Cím nevû szövegmezôjére:
    document.forms[0].elements[1]
  • az ûrlap gombjára:
    document.forms[0].elements[2]
  • a második képre:
    document.images[1]
  • a linkre:
    document.links[0]

Azt, hogy egy hivatkozás révén milyen mûveleteket végezhetünk el az egyes HTML objektumokkal, különbözô JavaScript referencia könyvek tartalmazzák. Mi néhány alapvetô mûveletet nézünk csak meg. Hivatkozzunk az ûrlapunk elsô szövegmezôjére, olvassuk ki a tartalmát a nev nevû változóba! Ezt megtehetjük az alábbi utasítással (figyeljünk arra, hogy kis- és nagybetû itt is számít):


nev = documents.forms[0].elements[0].value;

A szövegmezô tartalma bekerült a változónkba, amivel továbbiakban különféle mûveleteket végezhetünk: pl. kiírathatjuk egy üzenetablakba az alert("Szia " + name) függvénnyel. Nézzük meg ezt mûködés közben, majd utána a kódot, amelyben már minden ismert!

Név:   
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Elrejtés

function Udvozol(){
  var name = document.forms[0].elements[0].value;  
  alert("Szia "+name);
} 
// --> 
</SCRIPT> 
</HEAD>

<BODY> 
<FORM NAME="urlap"> Név:  <INPUT TYPE="text" NAME="nev"> 
<INPUT TYPE="button" VALUE="Írd be a neved, majd kattints rám!"
 onClick="Udvozol()"> 
</FORM>

</BODY>
</HTML>

Jogosan felmerülhet a kérdés, hogy nagyobb HTML dokumentumok esetén van-e egyszerûbb módszer a hivatkozásra, hiszen nem könnyû sok link, kép, ûrlapmezô esetén kiszámolni, hogy pontosan melyikkel szeretnénk dolgozni. Természetesen erre is van lehetôség, mégpedig úgy, hogy minden HTML objektumnak önálló, egyedi nevet adok. Ha az ûrlapunkat megnézzük, akkor látható, hogy ezt már meg is tettük az <INPUT> HTML elemen belül a NAME attribútum megadásával:


<FORM NAME="pelda_urlap"> Név: <INPUT TYPE="text" NAME="nev" VALUE=""><BR>

Az ûrlapunknak a pelda_urlap nevet, az elsô szövegmezônek a nev nevet adtuk. Ez alapján, erre az objektumra document.forms[0].elements[0] helyett használhatjuk a document.pelda_urlap.nev hivatkozást is.

Új értéket is rendelhetünk bizonyos HTML objektumokhoz, például egy szövegmezôhöz:

És íme a kód: onClick esemény hatására új értéket rendelünk a az uj nevû ûrlap szoveg nevû mezôjéhez.

<FORM NAME="uj">
<INPUT TYPE="text" NAME="szoveg" VALUE="www.microsoft.com">
<INPUT TYPE="button" VALUE="Új szöveg" 
  onClick="document.uj.szoveg.value='www.yahoo.com';">
</FORM>

A location objektum

Ez az objektum reprezentálja a betöltött HTML dokumentum címét. Ha például betöltöttük a Netscape oldalát, akkor a location objektum href mezôje (location.href) ennek az oldalnak a címét fogja tárolni (www.netscape.com). Ehhez a mezôhöz új értéket rendelve új oldalt tölthetünk be a böngészôbe:

<FORM>
<INPUT TYPE="button VALUE="Altavista" 
  onClick="location.href='http://altavista.com';">
</FORM>
Írj nekem emailt