A JavaScript Kovács Botond Matematika-Informatika 641 Kolozsvár 2004-1 -
1. fejezet: Bevezetés: Mi a JavaScript? A JavaScriptet a Netscape fejlesztette ki. Ez egy olyan parancsnyelv, amely segítségével létrehozhatunk interaktív Web-oldalakat. Ezeket könnyedén beépíthetjük a saját oldalaiba, vagy továbbfejleszthetjük õ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. Példát: <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> - 2 -
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) 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: <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> 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. A következõ példában 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 - 3 -
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> <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 Az egérrel az aktuális mezõn ûrlapmezõ kívülre kattintunk onblur change Megváltoztatunk egy ûrlap szövegmezõ, listaablak beli értéket onchange click Az ûrlap valamely elemére, gombok, rádió gomb, vagy egy csatolásra (link) csatolások (linkek) 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 Ha másik HTML oldalra (BODY) lépünk onload - 4 -
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). <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> 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. 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. Például: var eredmeny = x + y; 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 - 5 -
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>"); 2. fejezet: 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! <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> - 6 -
<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> 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. 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 <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> - 7 -
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 - 8 -
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] 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> 3. fejezet: Keretek Keretek létrehozása HTML dokumentumban Egyre gyakrabban találkozni olyan oldalakkal, amelyek kereteket tartalmaznak. A Netscape a 2.0-ás, az Internet Explorer a 3.0-ás változatától tudja kezelni a kereteket. A keretek felosztják a böngészõ ablakát, és mindegyik rendelkezik az alábbi alapvetõ tulajdonsággokkal: meg tud jeleníteni egy önálló HTML dokumentumot rendelkezhet névvel, amely segítségével hivatkohatunk rá automatikusan méretezi önmagát az ablak méretének változása során, valamint engedélyezhetjük vagy megtilthatjuk, hogy a felhasználó saját maga változtathassa a keretek méretét A JavaScript is hatékonyan együt tud mûködni a keretekkel. De mielõtt ebbe belemélyednénk, építsünk fel egy kereteket tartalmazó HTML oldalt! - 9 -
<FRAMESET ROWS="50%,*"> <FRAME SRC="oldal1.htm" NAME="keret1"> <FRAME SRC="oldal2.htm" NAME="keret2"> </FRAMESET> Ez a kód két keretet eredményez az oldalon. Kereteket a <FRAMESET> HTML elemmel készíthetünk, amelyen belül jelen esetben a ROWS attribútumot használtuk. Ez azt jelenti, hogy a kereteink sorokban fognak elhelyezkedni, a ROWS attribútumot követõ százalékos arányoknak megfelelõen. Itt most " 50%,* " szerepel, azaz az elsõ keret a böngészõ ablakának felét fogja elfoglalni, míg a másik keret a fennmaradó részt (ezt jelenti ugyanis a *). Ha nem százalékosan, hanem pixelekben szeretnénk megadni a keretek méretét, akkor ezt is megtehetjük a százalékjel elhagyásával. Sorok helyett oszlopokba is rendezhetjük a kereteket, ekkor a ROWS attribútum helyett COLS attribútumot használjunk. A kettõt természetesen kombinálhatjuk is: <FRAMESET ROWS="50%,*"> <FRAMESET COLS="33%,33%,*"> <FRAME SRC="pelda.htm"> <FRAME SRC="pelda.htm"> <FRAME SRC="pelda.htm"> </FRAMESET> <FRAMESET COLS="50%,*"> <FRAME SRC="pelda.htm"> <FRAME SRC="pelda.htm"> </FRAMESET> </FRAMESET> Keretek kezelése JavaScript-ben Mint mindent, a JavaScript a kereteket is egy logikus hierarchiába rendezi. A hierarchia legtetején maga a böngészõ ablaka van. Ezt az ablakot bontottuk fel két keretre. Az ablak a két keret szülõje, míg a keretek a gyermekek. Így az ablakra parent néven, míg a keretekre azon a néven hivatkozhatunk, amit a <FRAME> HTML elem NAME attribútumában megadtunk (a példánkban ez keret1 és keret2). A JavaScript lehetõvé teszi, hogy: a szülõ ablak hozzáférjen a gyerekeihez, azaz a keretekhez a keretek hozzáférjenek a szülõjükhöz a keretek hozzáférjenek egymáshoz Az elsõ eset azt jelenti, hogy a szülõ ablakhoz tartozó HTML kódban (gyakorlatilag ez hozza létre a kereteket) van egy JavaScript kódunk, amely a keretekben szeretne bizonyos mûveleteket elvégezni, például megjeleníteni valamit. Ekkor egyszerûen a keret nevének felhasználásával férhetünk hozzá a kerethez. Pl.: keret2.document.write("ezt a sort a szülô ablak írta ki!"); - 10 -
A második esetre akkor lehet szükség, ha el akarjuk távolítani a kereteket az ablakból. Ez úgy történik, hogy a kereteket létrehozó dokumentum helyére (amely éppen a szülô ablakhoz tartozó dokumentum) újat töltünk be. A szülô ablakhoz parent névvel férhetünk hozzá egy gyerek ablakból (keretbôl). Új dokumentum betöltéséhez nem kell mást tennünk, mint hogy a szülô ablak location.href (amelyrôl a második fejezet végén volt szó) mezôjéhez új értéket rendelünk. Ezt a következô utasítással tehetjük meg: parent.location.href = "http://..."; A harmadik eset a leggyakoribb, hiszen legtöbbször azt akarjuk, hogy a keretek együttmûködjenek. Tegyük fel, hogy a feladatunk az, hogy írassunk ki JavaScript segítségével egy szöveget az elsô kerethez tartozó dokumentumból a második keretbe. Az egyes keretek között nincs kapcsolat, amely azt jelenti, hogy az egyik keretbôl nem hívhatjuk közvetlenül a másikat, hanem mivel a többi keretet csak a szülô látja, így azon keresztül hivatkozhatunk rájuk: parent.keret2.document.write("ezt az elsô keretbôl írattuk ki"); A menu.htm kódja: <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Elrejtés function betolt(url, keret){ if (keret == "dokumentum1") parent.dokumentum1.location.href=url; else parent.dokumentum2.location.href=url; function betolt2(elso_url, masodik_url){ betolt(elso_url, 'dokumentum1'); betolt(masodik_url, 'dokumentum2'); function szincsere(ujszin, keret){ if (keret == "dokumentum1") parent.dokumentum1.document.bgcolor=ujszin; else parent.dokumentum2.document.bgcolor=ujszin; // --> </SCRIPT> </HEAD> <BODY> <CENTER> <H1>Menü</H1> <A HREF="javascript:betolt('uj.htm','dokumentum1')">Betölt egy új dokumentumot az elsô keretbe</a><br> <A HREF="javascript:betolt('uj.htm','dokumentum2')">Betölt egy új dokumentumot a második keretbe</a><br> <A HREF="javascript:szincsere('#00FFFF','dokumentum1')">Háttérszín cseréje az elsô keretben</a><br> <A HREF="javascript:szincsere('#FFFF00','dokumentum2')">Háttérszín cseréje a második keretben</a><br> <A HREF="javascript:betolt2('kettot.htm','kettot.htm')">Dokumentum betöltése egyszerre két keretbe</a><br> </CENTER> </BODY> - 11 -
A menu.htm tartalmaz három függvényt. Mindet a HREF attribútumból hívtuk meg, azaz ekkor a linkre kattintva a függvény hívódik meg, és nem új dokumentum töltõdik be. A betolt függvény két paramétert vár, egy új HTML dokumentum címét, és annak a keretnek nevét (dokumentum1 vagy dokumentum2), ahová be kell tölteni az új dokumentumot. Ezt úgy érjük el, hogy a választott keret location objektumának href mezõjét felülírjuk az új címmel. Feltételes elágazást (if - else) használunk a keret kiválasztására, azaz ha a keret paraméter a dokumentum1 értéket kapja, akkor a parent.dokumentum1.location.href a hivatkozás, ellenkezõ esetben parent.dokumentum2.location.href. A szincsere függvény felépítése nagyon hasonló, csak itt az új szín értékét ill. a keret nevét adjuk át, és természetesen a document objektum bgcolor értékének adunk új értéket. 4. fejezet: Ablakok Ablakok létrehozása A JavaScript segítségével megnyithatunk új böngészõ ablakokat, amelyekbe betölthetünk új HTML oldalakat, de akár mi magunk is létrehozhatunk dokumentumokat az új ablakban JavaScript segítségével, menet közben. <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript kód elrejtése function ujablak(){ ablak = open("pelda.htm"); // --> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Új ablak nyitása" onclick="ujablak()"> </FORM> </BODY> Látható, hogy az ujablak nevû függvényben az open() függvénnyel nyitottuk meg az új böngészõ ablakot, amely megjelenését is szabályozhatjuk JavaScript-en keresztül: A következõ táblázat összefoglalja azokat a tulajdonságokat, amelyeket egy ablaknál állíthatunk. - 12 -
Tulajdonság Beállítható érték Mit állít? directories yes no katalógust eltûnteti ill. megjeleníti height a képpontok száma az ablak magassága location yes no a címsort eltûnteti ill. megjeleníti menubar yes no eltûnteti ill. megjeleníti a menüsort resizable yes no átméretezhetõ legyen-e az ablak scrollbars yes no a gördítõsávokat eltûnteti ill. megjeleníti status yes no a státuszsort eltûnteti ill. megjeleníti toolbar yes no eltûnteti ill. megjeleníti az eszközsort width a képpontok száma az ablak szélessége Néhány további tulajdonságot tartalmaz a JavaScript 1.2-es változata, amelyet viszont csak a Netscape 4.0-ás változata, ill. az Internet Explorer 4.0-ás változata képes kezelni. Ezek a következõk: Tulajdonság Beállítható érték Mit állít? alwayslowered yes no Az új ablak mindig a többi alatt helyezkedik el, ha értéke "yes" alwaysraised yes no Az új ablak mindig a többi felett látszik, ha értéke "yes" dependent yes no Az új ablak a jelenlegi gyermekeként jön létre hotkeys yes no Ki- bekapcsolja a gyorsító billentyûk használatának lehetõségét innerwidth a képpontok száma A régi width tulajdonságot váltja fel innerheight a képpontok száma A régi height tulajdonságot váltja fel outerwidth a képpontok száma Az ablak külsõ határának szélességét határozza meg outerheight a képpontok száma Az ablak külsõ határának magasságát határozza meg screenx elhelyezkedés Az ablak bal felsô sarkának X képpontokban koordinátája mérve screeny elhelyezkedés képpontokban mérve Az ablak bal felsô sarkának Y koordinátája titlebar yes no Megjeleníti a címsort z-lock yes no Ha értéke "yes", akkor egy olyan ablakot kapunk, amely nem emelkedik a többi fölé, ha õ lesz az aktiv ablak - 13 -
Ablakok bezárása JavaScript segítségével be is zárhatjuk az ablakunkat. Ehhez a close() függvényt kell használnunk. <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript kód elrejtése function bezar(){ close(); // --> </SCRIPT> </HEAD> <BODY> <FORM> <CENTER> <INPUT TYPE="button" VALUE="Zárj be!" onclick="bezar()"> </CENTER> </FORM> </BODY> Dokumentumok készítése JavaScriptbôl Ez egy nagyszerû lehetõség JavaScript-ben. Nem egy elõre elkészült HTML oldalt töltünk be egy ablakba vagy keretbe, hanem menet közben készítjük azt el, így megoldható, hogy naprólnapra változó, környezettõl függõ oldalakat hozzunk létre. <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése function ujablak3(){ ujablak = open("","uj_ablak3", "width=400,height=300,status=yes,toolbar=yes,menubar=yes"); ujablak.document.open(); ujablak.document.write("<head><title>dokumentum készítése JavaScripttel"); ujablak.document.write("</title></head>"); ujablak.document.write("<body><center><h1>"); ujablak.document.write("ezt az oldalt teljesen a JavaScript "); ujablak.document.write("hozta létre!"); ujablak.document.write("</h1></center></body>"); ujablak.document.write(""); ujablak.document.close(); - 14 -
// --> </SCRIPT> </HEAD> <BODY> <CENTER> <FORM> <INPUT TYPE="button" VALUE="Dokumentum készítése JavaScript-tel" onclick="ujablak3()"> </FORM> </CENTER> </BODY> 5. fejezet: Az állapotsor A JavaScript programok képesek írni az állapotsorra, amely a böngésző alján található. Nem kell mást tenni, mint hozzárendelni egy sztringet a window.status-hoz (azaz a window objektum status mezőjéhez). <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript kód elrejtése function statusz(szoveg){ window.status=szoveg; // --> </SCRIPT> </HEAD> <BODY> <FORM NAME="urlap1"> <INPUT TYPE="text" NAME="szoveg" VALUE="Írj be egy szöveget, ami majd megjelenik az állapotsorban!" SIZE=40> <INPUT TYPE="button" VALUE="Írd ki!" onclick="statusz(document.urlap1.szoveg.value)"> <INPUT TYPE="button" VALUE="Töröld!" onclick="statusz('')"> </FORM> </BODY> Létrehoztunk egy rövid statusz() nevű függvényt, amely a paraméterként megkapott sztringet írja ki az állapotsorba. Létrehoztunk egy űrlapot is, egy szövegmezővel és két gombbal. Ha az első gombra kattintunk, akkor a szövegmező tartalmával (document.urlap1.szoveg.value) hívjuk meg a statusz() függvényt, ha a második - törlés - gombra kattintunk, akkor üres sztringet - 15 -
adunk át a függvénynek, ugyanis ha ezt rendeli a window.status-hoz, akkor törli annak korábbi tartalmát (és mi éppen ezt akartuk elérni). Egyszerű scroll JavaScriptben Egyszerűsége miatt gyakran alkalmazott JavaScript program a scroll, ami egy szöveget gördít az állapotsorban. Lássuk, hogyan is valósítható ez meg? Ha kiírjuk a szöveget, majd rövid idő múlva kiírjuk ugyanazt a szöveget, csak egyetlen karakterrel balra tolva, és ezt az eljárást ismételgetjük, akkor olyan hatást érünk el, mintha mozogna a szövegünk jobbról-balra. A következő gombra kattintva megnyitunk egy ablakot, amely státuszsorában egy szöveget görgetünk. <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése var str = ""; function scroll(){ if (str == ""){ for (var i=0; i<150; i++) str = str + " "; str = str + "Bevezetés a JavaScript programozásába"; else str = str.substring(2, str.length); window.status = str; window.settimeout('scroll()',70); // --> </SCRIPT> </HEAD> <BODY BGCOLOR="FFFFFF" onload="scroll()"> JavaScript scroll... </BODY> A program működése rendkívül egyszerű. Az oldal betöltése után az onload esemény meghívja a scoll() függvényt. Ez felhasznál egy str nevű sztringet. Ha ez a sztring üres, akkor belerakunk 150 darab szóközt illetve magát a kiírandó szöveget. Ha nem, akkor a substring metódussal levágjuk az első karaktereit. str = str.substring(1, str.length); - 16 -
A substring a String objektum metódusa (a következő fejezetben részletesen szó lesz róla). Egy részsztringet ad vissza, a fenti esetben az egész sztringet az első karakter kivételével. Ha megjelenítjük az így megrövidített szöveget és ezt settimeout segítségével ismételgetjük, akkor éppen a kívánt hatást érjük el. 6. fejezet: A JavaScript objektumai A JavaScript több, előre definiált objektumot tartalmaz. Ezek a következők: Array (tömb) Boolean Date (dátum) Function (függvény) Math (matematikai) Number (szám) String (karakterlánc) Array (tömb) objektum A tömbök rendkívül fontosak a progamozásban. Gyakran van szükségünk nagy mennyiségű adat kényelmes tárolására úgy, hogy bármelyikhez könnyen hozzáférjünk. A tömbök sok változóból felépülő összetett adattípusok. Az egyes adatokhoz egy név (a tömb neve) és egy szám segítségével férhetünk hozzá. Tegyük fel, hogy neveket tárolunk egy tömbben. A tömbünket nevezzük el ezért Nevek-nek. Az első névre a Nevek[0] néven hivatkozhatunk. A másodikra Nevek[1]-el és így tovább. Tömböket az Array objektummal hozhatunk létre. Ez csak a JavaScript 1.1-es verziójától létezik, ezért ha tömböket használunk az oldalainkon, akkor legalább egy Netscape 3.0-as böngésző kell. Tömböket igen egyszerűen hozhatunk létre: tomb = new Array(), azaz létrehozzuk az Array objektum egy új példányát. A tomb nevű új tömbünkhöz rögtön értékeket is rendelhetünk. tomb[0] = "JavaScript"; tomb[1] = "1998"; tomb[2] = "Aurum"; A JavaScript tömbjei hihetetlenül rugalmasak, könnyen kezelhetőek. A méretük is dinamikusan változik, azaz ha új értékeket rakunk bele, akkor folyamatosan növekszik. Mivel a méret csak növekedhet (csökkenteni nem lehet, hiába próbálunk meg elemeket törölni belőle), így igyekezzünk a tömböket kicsire tervezni. Más módon is létrehozhatunk tömböket: 1. tombnev = new Array([a_tomb_hossza]) 2. tombnev = new Array([1.elem, 2.elem, 3.elem,...,n.elem]) - 17 -
Az első esetben csak annyi a különbség, hogy adtunk a tömbnek egy kezdeti hossz értéket. Ez a hossz a későbbiek során lekérdezhető az Array objektum length adatmezőjéből. AutoTipusok = new Array("Honda","Mercedes","BMW"); Az Array objektum legfontosabb metódusai a következők: a join metódus összefűzi a tömb elemeit egyetlen sztringgé a reverse megfordítja (transzponálja) a tömb elemeit, az utolsóból lesz az első, az elsőből az utolsó a sort rendezi a tömb elemeit Vizsgáljuk meg ezeket a metódusokat: AutoTipusok.join() a "Honda,Mercedes,BMW" sztringet adja vissza AutoTipusok.reverse() megfordítja a sorrendet (AutoTipusok[0] a BMW lesz, AutoTipusok[1] a Mercedes. míg AutoTipusok[2] a Honda) Autotipusok.sort() rendezi a tömböt, igy a tömbünk a következő módon változik meg: AutoTipusok[0] a BMW lesz, AutoTipusok[1] a Honda, a Mercedes pedig az AutoTipusok[2] <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése function tombkiir(){ var kiir = ''; AutoTipusok = new Array('Mercedes','BMW'); AutoTipusok[2] = 'Honda'; kiir = "A tömb elemei rendezés előtt:\n" for (var i=0; i<3; i++){ kiir += i + ". " + AutoTipusok[i] + "\n"; alert(kiir); AutoTipusok.sort(); kiir = "A tömb elemei rendezés után:\n" for (var i=0; i<3; i++){ kiir += i + ". " + AutoTipusok[i] + "\n"; alert(kiir); //--> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="A tömb elemeinek kiíratása" onclick="tombkiir()"> </FORM> </BODY> - 18 -
A Date (dátum) objektum Olyan alkalmazásokat írhatunk, amelyek idő- vagy dátumértékeket kezelnek. Bizonyára mindenki találkozott már olyan oldallal, amely mutatta a pontos időt, illetve a dátumot. dátum_objektum_neve = new Date( [paraméterek] ); A paraméter a következő variációk bármelyike lehet: Nem adunk meg paraméterként semmit. Ekkor az aktuális dátum és idő értékeket használjuk fel. Például: ma = new Date(); A paraméter egy sztring, ami egy dátumot reprezentál a következő formában: "Hónap Nap, Év óra:perc:másodperc". Páldául: 97karacsony = new Date("December 25, 1997 12:30:30"); Ha elhagyjuk az óra:perc:másodperc részt, akkor ez automatikusan a 0 értéket veszi fel. Számokkal adjuk meg a dátumot. Például: 97karacsony = new Date(1997, 11, 25, 12, 30, 30); Egy fontos észrevételt rögtön tehetünk. A hónapok számozása nem 1-től indul, hanem 0-tól, azaz januárnak a 0, februárnak az 1, márciusnak a 2 érték felel meg. A példából látszik, hogy decembert a 11-gyel adtuk meg. Milyen metódusok állnak a rendelkezésünkre? a set metódus segítségével beállíthatjuk a dátum és idő értékét (setyear, setmonth, setdate, setminutes, setseconds) a get metódussal kiolvashatjuk ezeket az értékeket (getyear, getmonth, getdate, getminutes, getseconds) A Math (matematikai) objektum Ez az objektum matematikai függvényeket és konstansokat tartalmaz. Ha például a PI értékére lenne szükségünk, akkor azt könnyen megkaphatjuk a Math objektum PI adatmezőjéból. Pl. kor_kerulete = 2*sugar*Math.PI; A legtöbb trigonometrikus, exponenciális és logaritmikus függvényt is tartalmazza ez az objektum. Igy például egy X szög szinuszát így kaphatjuk meg: Math.sin(X); Függvény Abs sin, cos, tan Acos, asin, atan exp, log Ceil Leírás abszolút érték trigonometrikus függvények; az argumentum radiánban az előbbi függvények inverze; argumentum radiánban exponenciális függvény, természetes alapú logaritmus felső egészrész - 19 -
Floor min, max Pow Round Sqrt alső egészrész az argumentumként megadott két érték közül a kisebbet, ill. a nagyobbat adják vissza exponenciális függvény; első argumentuma az alap, a második a kitevő kerekítés a legközelebbi egészre négyzetgyök függvény Előfordulhat, hogy véletlenszámra van szükségünk a programunk során. Erre is ad megoldást a Math objektum, mégpedig a random() metódussal. A Math.Random() egy véletlenszámot ad vissza, amely 0 és 1 közé esik. String objektum JavaScript-ben nem létezik sztring adattípus. Helyette viszont létezik a String objektum, melynek számos hasznos metódusa is van. Ezekkel könnyedén manipulálhatjuk a sztringünket. Szintaxis: String_objektum_neve = new String(sztring); A zárójelben tetszőleges sztring állhat, ez lesz tulajdonképpen az új String objektum. A String objektumnak van egy length nevű adatmezője, amelyből kiolvashatjuk a tárolt sztring hosszát. A String objektum metódusai két típusba sorolhatók. Az egyik típus a sztring egy módosított változatát adja vissza. Ide tartozik például a substring és a tolowercase metódusok. Az előbbi a sztring egy részét adja vissza, míg az utóbbi kisbetűsre alakítja azt. A másik típushoz olyan metódusok tartoznak, amelyek HTML formátumúra hozzák a sztringet. Ilyen például a bold, ill. a link függvény. Metódus Leírás Anchor HTML hivatkozást készít a sztringből big, blink, bold, fixed, italics, small, strike, sub, HTML-ként formázott sztringet hoz létre sup chartat a paraméterként átadott pozícióban lévő karakterrel tér vissza A paraméterben meghatározott részsztring első vagy utolsó indexof, lastindexof pozíciójával tér vissza. Ha ilyen nem szerepel benne, akkor -1 a visszaadott érték Link HTML linket készít a sztringből Split felosztja a sztringet részsztringekre egy elválasztó karakter mentén, majd ezeket egy tömbbe teszi Substring a sztring egy meghatározott részével tér vissza tolowercase, touppercase csupa kisbetűssé ill. nagybetűssé alakítja a sztringet - 20 -
7. fejezet: Az űrlapok Segítségükkel a felhasználók elküldhetik véleményüket egy oldalról, feliratkozhatnak egy játék résztvevői közé, megrendelhetnek különféle tárgyakat, programokat, szolgáltatásokat a világhálón keresztül, kereséseket hajthatnak végre speciális keresőszervereken. Az űrlapokat kitöltésük után legtöbbször elküldjük a hálózaton keresztül egy szerveren lévő CGI programnak, amely feldolgozza a benne lévő adatokat. Problémát jelenthet viszont az, ha az űrlapunk hibás adatot tartalmaz. A JavaScript itt is segíthet nekünk. Még a kitöltés fázisában, az űrlap tényleges elküldése előtt ellenőrizhetjük, hogy helyes-e a kitöltés. Ha nem, akkor nem is engedjük meg az űrlap elküldését. Ezzel nem okozunk forgalomnövekedést a hálózaton, valamint a hibaüzenetek is rögtön megjelennek a képernyőkön, hiszen azt nem a szerveren futó program küldi vissza, hanem a gépünkön futó JavaScript program. Általában két helyen szokás az ellenőrzést elvégezni. Minden egyes űrlapelemnél, amint a felhasználó kitölti azt, az onchange, illetve elküldéskor az onsubmit eseménykezelő segítségével. E-mail cím ellenőrzése Természetesen csak a cím formai helyességét tudjuk vizsgálni. Minden e-mail címben szerepel "@" karakter, illetve ezen karakter előtt és után további karakterek. <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése function emailcheck(mezo){ szoveg = mezo.value; if (!(szoveg.indexof('@')>0 && szoveg.indexof('@')<szoveg.length-1)){ alert("rossz e-mail cím!"); return false; else{ alert("formailag helyes e-mail cím!"); return true; // --> </SCRIPT> </HEAD> <BODY> <P> <FORM NAME="form_email"> - 21 -
<INPUT TYPE="text" NAME="email" SIZE="20"> <INPUT TYPE="button" VALUE="Ellenőrizd" onclick="emailcheck(form_email.email)"> </FORM> </BODY> Az emailcheck() nevű függvény végzi az ellenőrzést.paraméternek ez a függvény is a vizsgált űrlapmezőt várja, mely értékét beteszi a szoveg nevű változóba. Az szoveg.indexof('@') függvénnyel lekérdezzük a '@' helyét. Ha ez nagyobb, mint 0 (azaz nem az első karakter) és kisebb, mint szoveg.length-1 (azaz nem az utolsó karakter), akkor egy formailag helyes e-mail címet írtunk be. Ezt még negáljuk, hiszen elsősorban arra vagyunk kíváncsiak, hogy mikor nem jó a cím. Fókusz állítása űrlapmezőkre Az űrlapmezőknek (sőt a kereteknek is) létezik egy olyan focus() nevű metódusa, ami ráállítja a fókuszt az adott elemre. Segítségével meghatározható, hogy az oldal betöltése után mely mező legyen aktív (a <BODY> HTML elemben az onload eseménykezelő segítségével), de hasznos lehet akkor is, ha hiba esetén a rosszul kitöltött mezőt tesszük aktívvá, és így a felhasználó könnyebben javíthatja azt. Ezen kívül a szövegmezőknek létezik egy select() metódusa is, amely kijelöli annak tartalmát. <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- A JavaScript kód elrejtése var aktualis = 0; function fokusz_allitas(){ if (aktualis == 0){ document.select_form.text1.focus(); document.select_form.text1.select(); else{ document.select_form.text2.focus(); document.select_form.text2.select(); aktualis = 1 - aktualis; // --> </SCRIPT> </HEAD> <BODY> <FORM NAME="select_form"> <INPUT TYPE="text" NAME="text1" VALUE="Az első mező" SIZE="15"><BR> - 22 -
<INPUT TYPE="text" NAME="text2" VALUE="A második mező" SIZE="15"><BR><BR> <INPUT TYPE="button" VALUE="A fókusz állítása" onclick="fokusz_allitas()"> </FORM> </BODY> A fokusz_allitas() függvény végzi a fókuszálást illetve a mező tartalmának kijelölését. Ezt az aktulis nevű változó alapján teszi. Ha ez 0, akkor az első mezőt, ha 1, akkor a második mezőt teszi aktuálissá. 8. fejezet: A képek kezelése A képeket a JavaScript Image (kép) objektumán keresztül kezelhetjük. Az Image objektum segítségével megváltoztathatjuk az oldalunkon lévő képek paramétereit, illetve magát a képet is. Minden kép egy tömbön keresztül érhető el. A tömböt images-nek hívják. Az oldalon lévő képek kapnak egy sorszámot. A legelső kép a 0-ás sorszámmal rendelkezik, a második az 1-essel, és így tovább. Ha a legelső képre akarunk hívatkozni például egy JavaScript programból, akkor az a document.images[0] hivatkozáson keresztül lehetséges. Minden képet az Image objektum egy példányának tekintünk. Az Image objektum rendelkezik bizonyos tulajdonságokkal, amikhez JavaScript programból hozzáférhetünk. Például: name - a kép neve src - a kép helye, az a cím, ahonnan betöltjük width - szélessége (képpontokban) height - magassága (képpontokban) border - keret mérete képpontokban A kép szélességét például a document.images[0].width adja meg képpontokban mérve. Természetesen ha neveket adunk a különböző képeknek, akkor azokkal is hivatkozhatunk rájuk. Ez megkönnyíti a programozást, ha sok képet töltünk be egy oldalra. Tegyük fel, hogy egy képet töltünk be az oldalunkra az alábbi sorral: <IMG SRC="kep.jpg" NAME="fenykep" width=150 height=200> Ekkor a document.fenykep illetve a document.images["fenykep"] is ugyanerre a képre történő hivatkozás. Új képek betöltése A leglátványosabb lehetőség azonban az, ha új képeket tölthetünk be az oldalunkra, illetve az oldalainkon lévő képeket kicserélhetjük újakra. Ehhez a már korábban említett src attribútum szükséges. Ha ugyanis ezt megváltoztatjuk, akkor automatikusan betöltődik az a kép, amelyet az új src attribútum meghatároz. <IMG SRC="kep1.jpg" NAME="elso" width=100 height=100> - 23 -
Képek előre történő betöltése Hozzuk létre az Image objektum egy példányát a következő kóddal: rejtett_kep = new Image(); rejtett_kep.src = "kep2.gif"; Az első sor létrehozza a rejtett_kep nevű Image objektumot. A második sor beállítja az objektum src attribútumát, gyakorlatilag meghatározza a képet és annak címét. Ez most az aktuális könyvtárban lévő kep2.jpg nevű kép. A kép gyakorlatilag ekkor már betöltődik a memóriába, de még nem jelenik meg. Ezt viszont megtehetjük azzal, hogy egy -az oldalon lévő kép- src attribútumához hozzárendeljük a rejtett_kep.src által meghatározott címet. ducoment.egy_kep.src = rejtett_kep.src; A kép a memóriában van, így azonnal megjelenik, nincs betöltési idő. 9. fejezet: Layerek használata A Netscape Navigator 4.0 egy rendkívül fontos, jól hasznosítható új tulajdonsága volt a layerek használatának bevezetése. A layereket (rétegek) legegyszerûbben fóliáknak képzelhetjük el. Minden egyes ilyen fóliarétegnek más és más lehet a tartalma, egymástól függetlenül kezelhetjük õket. Tehetünk rá képet, szöveget, ûrlapelemeket stb., majd a layereket elhelyezhetjük az oldalunkon. Az egyes rétegek egymásra is kerülhetnek, természetesen a felsõ rétegek takarják az alattuk levõ rétegeket, de ahol az egyes rétegek átlátszóak, ott átengedik az alattuk levõ rétegek tartalmát. Ezzel például könnyedén megvalósíthatunk pusztán HTML elemek használatával olyan képet, amelyre egy szöveget írunk, vagy az oldalon lévõ szöveg is kerülhet takarásba valamely más objektum, például egy kép által. Layerek létrehozása Layereket a <LAYER> illetve a <ILAYER> HTML elemekkel készíthetünk. Az alábbi táblázat bemutatja a beállítható tulajdonságokat: Tulajdonság Leírás name = "layer_neve" A réteg neve left = x A bal felsõ sarok x koordinátája top = y A bal felsõ sarok y koordinátája z-index = layer_index A layer sorszáma width = szélesség_pixelekben A layer szélessége képpontokban clip = "x1,y1,x2,y2" A réteg látható területét definiálja (négyzet) above = "layer_neve" A megadott nevû réteg felett jelenik meg a layerünk below = "layer_neve" A megadott nevû réteg alatt jelenik meg a layerünk - 24 -
visibility = show hide inherit Bgcolor = "rgb_szín" background = "kép_url" A réteg láthatósága A réteg háttérszíne Háttérkép A <LAYER> HTML elemmel az oldal tetszõleges pozíciójába elhelyezhetünk layereket. A pozíciót a left és a top attribútumok adják meg. Ezek a layer bal felsõ pontjának helyét határozzák meg. Amennyiben nem adunk meg ilyen értékeket, akkor az alapértelmezett pozíció az ablak bal felsõ sarka. Az <ILAYER> elem a layer pozícióját nem határozza meg explicit módon, hanem a dokumentum aktuális pozíciójába helyezi el. <LAYER NAME="negyzet" Z-INDEX=0 LEFT=60 TOP=25> <IMG SRC="negyzet.gif"> </LAYER> <LAYER NAME="haromsz" Z-INDEX=1 LEFT=30 TOP=50> <IMG SRC="haromsz.gif"> </LAYER> <LAYER NAME="szoveg" Z-INDEX=2 LEFT=50 TOP=70> <FONT SIZE=+3>Layer példa</font> </LAYER> Amint látható, három különbözõ layert definiáltunk. Minden, ami a <LAYER> </LAYER> illetve a <ILAYER> </ILAYER> HTML elemek között van az az adott layerhez tartozik. A példában a név (name) és a pozícionáló (left, top) attribútumok mellett megadtuk a z-index tulajdonságot is, ami a layerek megjelenítésének sorrendjét határozza meg. A legkisebb z-indexû layer jelenik meg legelõször, ez kerül legalulra. A legnagyobb indexû jelenik meg legfelül. Példánkban ez a szöveget tartalmazó layer. A z-index tetszõleges pozitív egész lehet, így ugyanezt az eredményt értük volna el, ha az elsõ layernek 5, a másodiknak 17, a harmadiknak 33 z-index értéket adunk. A JavaScript és a layerek kapcsolata A layereket JavaScript-en keresztül is kezelhetjük. Ezt két módon tehetjük meg legegyszerûbben. Adjunk nevet a layernek: <LAYER NAME="layer_neve">... </LAYER> Ekkor a layert elérhetjük a document.layers["layer_neve"] ill. a document.layer_neve hivatkozásokkal. Elérhetjük a layereket a korábbiakban már megismert indexes módszerrel is, bár ennek használata nem túl kényelmes. A legalsó layert a document.layers[0] hivatkozással érhetjük el. A következõt a document.layers[1] néven és így tovább. Vegyük észre, hogy ezen indexelés nem egyezik meg a z-indexeléssel! - 25 -
10. fejezet: A "sütik" Elérkeztünk utolsó témánkhoz a "sütikhez", angol nevén cookies. Tudjuk, hogy a HyperText Transfer Protocoll-t (HTTP) nem alkalmas arra, hogy kapcsolatot teremtsen két felhasználói (kliens) kérés között. Tegyük fel például, hogy egy olyan oldalt szeretnénk készíteni, amely felismeri azt, hogy ha valaki már nem az elsõ alkalommal látogatja meg, és ismerve azt, hogy elõzõleg milyen témákat tartalmazó oldalakat járt be az illetõ, most máshová küldi. A sütik segítségével adatokat tárolhatunk a felhasználó gépén. Persze nem kell megijedni, ezek lényegében veszélytelen információk, mégpedig a cookies.txt állományban megjelenõ szöveges bejegyzések. Formátumuk a következõ: név=érték;expires=dátum; Elõször megadjuk az adat nevét, majd az egyenlõség másik oldalán az adat értéke áll. Ha a név ill. az érték tartalmaz vesszõ, pontosvesszõ vagy szóköz karaktereket, akkor az escape() függvényt kell felhasználni, hogy megfelelõ formában kódoljuk, és az unescape() függvényt, hogy visszakódolhassuk. Az expires mezõ tartalmazza az érvényesség dátumát. A dátumot GMT formátumban kell megadni, amely a következõ: Nap, NN-HHH-ÉÉ ÓÓ:PP:MP GMT Például: Wed, 12-Mar-98 12:23:45 GMT Ez 1998. március 12-ét, egy szerdai napot (Wed) ad meg, egészen pontosan 12 óra 23 perc 45 másodpercet. Egyszerûbben úgy adhatunk meg ilyen formátumú idõt. hogy a Date által visszaadott dátumot a togmtstring() függvénnyel ilyen formátumúra hozzuk. Megszorítások A "sütikre" az alábbi korlátozások érvényesek: legfeljebb 300 ilyen bejegyzés lehet a cookies.txt file-ban egy bejegyzés mérete legfeljebb 4Kb Szerverenként vagy domain-enként legfeljebb 20 "süti" lehet A "sütik" és a JavaScript A dokument objektum cookies mezõje egy sztring, amely tartalmazza a Netscape Navigator összes bejegyzését, ami a cookies.txt állományban található. A "sütikkel" a következõket tehetjük: beállíthatjuk az értékét illetve az érvényességi idejét megkaphatjuk az értékét a megadott nevû "sütinek" A Netscape dokumentációja a következõ függvényeket javasolja ezen mûveletek elvégézséhez: 1. az érték és az opcionális érvényességi idõ beállítása: - 26 -
function setcookie(name, value, expire) { document.cookie = name + "=" + escape(value) + ((expire == null)? "" : ("; expires=" + expire.togmtstring())) Paraméterként adjuk át a cookie nevét, értékét, érvényességi dátumát. A függvény a name (név) paraméternek olyan sztringet vár, amelyben nincs az elõzõekben említett speciális karakter. A value sztringet kódoljuk az escape() függvénnyel, hogy a sztringben lévõ pontosvesszõk, vesszõk, szóközök helyesen kerüljenek tárolásra, majd hozzáfûzzük a name sztringhez. Ha nem adtunk meg dátumot (azaz a paraméter értéke null), akkor egy üres sztringet, ellenkezõ esetben a togmtstring() függvénnyel GMT formátumra hozott sztringet fûzzük az elõzõekhez. 2. adott nevû cookie értékének visszaadása function getcookie(name){ var search = Name + "="; if (document.cookie.length > 0){ // megvizsgáljuk, hogy vannak-e cookie-k offset = document.cookie.indexof(search); // ha igen, megkeressük az adott nevû elejét if (offset!= -1){ // ha van ilyen akkor: offset += search.length; end = document.cookie.indexof(";", offset); // az end egyenlõ a vizsgált cookie végét lezáró ; helyével if (end == -1) end = document.cookie.length; // ha nincs pontosvesszõ akkor end egyenlõ a cookie sztring hosszával return unescape(document.cookie.substring(offset, end)); A függvény a search sztringbe helyezi a keresendõ nevû cookie elejét (azaz a nevet és az azt követõ "=" jelet). Ha a document.cookie sztring hossza nagyobb 0-nál, akkor tartalmaz bejegyzéseket. Ebben az esetben megnézzük a már ismert indexof() függvény segítségével, hogy létezik-e a keresett bejegyzés. Ha nem, akkor az offset tartalma -1 lesz, ellenkezõ esetben az offset tartalma a search sztring elsõ pozíciója. Ekkor megkeressük a cookie végét jelzõ pontosvesszõ pozícióját. Ez kerül az end változóba. Ha ilyen nincs, akkor a cookie vége a document.cookie sztring vége lesz. Legvégül pedig visszaadjuk az unescape() függvénnyel helyesen dekódolt cookie-t, ami a document.cookie sztring offset és end pozíciók közötti része lesz. Példa a "süti" használatára <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript kód rejtése function setcookie(name, value, expire) { document.cookie = name + "=" + escape(value) + ((expire == null)? "" : ("; expires=" + expire.togmtstring())); function getcookie(name){ var search = Name + "="; - 27 -
if (document.cookie.length > 0){ offset = document.cookie.indexof(search); if (offset!= -1){ offset += search.length; end = document.cookie.indexof(";", offset); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(offset, end)); // --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var user = getcookie("greeting"); if (user == null){ user = prompt("köszöntelek ezen az oldalon! Kérlek írd be a neved!",""); if (user == null){ alert("nem írtad be a neved ezért a továbbiakban \"Fantomnak\" nevezlek!"); user = "Fantom"; expdate = new Date(); expdate.settime(expdate.gettime() + (365*24*60*60*1000)); setcookie('greeting',user,expdate); document.write("ha legközelebb visszatérsz, már megismerlek!"); else{ document.write("üdvözöllek ismét ezen az oldalon "+user+"! Látom visszatértél."); //--> </SCRIPT> </BODY> Rögtön az elején lekérdezzük a getcookie() függvénnyel, hogy létezik-e a "greeting" bejegyzés. Ha nem, akkor megjelenítünk egy input ablakot a prompt() függvénnyel. Ha a felhasználó nem írt be semmit, akkor a user sztring továbbra is null, ezért egy alapértelmezett értéket adunk neki (Fantom). Majd létrehozzuk az expdate objektumot (érvényességi dátum), ami az aktuális dátumot tartalmazza. Ezt az értéket megnöveljük 1 évvel (ezredmásodpercekben számolva; 365*2*60*60*1000), majd a setcookie() függvénnyel beírjuk a user értéket illetve az érvényességi dátum értékét. Ennek hatására, ha az elkövetkezendõ 1 évben visszatérünk a példát tartalmazó oldalra, akkor az adott oldal felismer bennünket. Ha a "greeting" bejegyzés már korábban létezett, akkor nincs más dolgunk, mint megjeleníteni azt az értéket, ami a korábban már ott járt felhasználó nevét tartalmazza. - 28 -
Tartalomjegyzék 1. fejezet: Bevezetés:... 1 Mi a JavaScript?... 2 A JavaScript nem Java!... 2 JavaScript futtatása... 2 JavaScript beágyazása HTML dokumentumba... 2 Események... 3 Függvények... 5 2. fejezet: A HTML dokumentum... 6 A JavaScript felépítése...6 A location objektum...9 3. fejezet: Keretek... 9 Keretek létrehozása HTML dokumentumban... 9 Keretek kezelése JavaScript-ben... 10 4. fejezet: Ablakok... 12 Ablakok létrehozása... 12 Ablakok bezárása... 14 Dokumentumok készítése JavaScriptbôl... 14 5. fejezet: Az állapotsor... 15 Egyszerű scroll JavaScriptben... 16 6. fejezet: A JavaScript objektumai... 17 Array (tömb) objektum... 17 A Date (dátum) objektum... 19 A Math (matematikai) objektum... 19 String objektum... 20 7. fejezet: Az űrlapok... 21 E-mail cím ellenőrzése... 21 Fókusz állítása űrlapmezőkre... 22 8. fejezet: A képek kezelése... 23 Új képek betöltése... 23 Képek előre történő betöltése... 24 9. fejezet: Layerek használata 24 Layerek létrehozása... 24 A JavaScript és a layerek kapcsolata... 25 10. fejezet: A "sütik"... 26 Megszorítások... 26 A "sütik" és a JavaScript... 26-29 -
Könyvészet 1) Juray Tamás: JavaScript, 1997 Budapest 2) Dr. Kovács László: Web technológiák, 1998 Budapest 3) Kiss Endre: Javascript referencia 4) Internet: A JavaScript alapjai 5) Internet: Java.sch.bme.hu/dokument/javaart - 30 -