: A HTML dokumentum

(1)

A JavaScript

Kovács Botond

Matematika-Informatika

641

Kolozsvár 2004

(2)

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:

<HTML>

<BODY>

Ez itt egy hagyományos HTML dokumentum.<BR>

document.write("Ez már JavaScriptben íródott!!!<BR>") </SCRIPT>

Ez a sor újra HTML!<BR>

</BODY>

</HTML>

(3)

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:

<HTML>

<BODY>

Ez itt egy hagyományos HTML dokumentum.<BR>

</SCRIPT>

Ez a sor újra HTML!<BR>

</BODY>

</HTML>

¾ 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

(4)

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>

</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 û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

(5)

¾ 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).

<HTML>

<!-- 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>

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

(6)

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!

<HTML>

<HEAD>

<!-- 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>

(7)

<BODY>

<P>

<FORM>

</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. 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

<HTML>

<HEAD><TITLE>Példa oldal</TITLE></HEAD>

<P>

Név:

Cím:

</FORM>

<P>

<P>

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

</CENTER></BODY></HTML>

(8)

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

(9)

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!

<HTML>

(10)

</FRAMESET>

</HTML>

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:

<HTML>

</FRAMESET>

</FRAMESET>

</HTML>

¾ 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!");

(11)

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:

<HTML>

<HEAD>

<!-- 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>

<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>

</HTML>

(12)

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.

<HTML>

<HEAD>

<!-- JavaScript kód elrejtése function ujablak(){

ablak = open("pelda.htm");

} // -->

</SCRIPT>

</HEAD>

<BODY>

<FORM>

</FORM>

</BODY>

</HTML>

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.

(13)

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 képpontokban mérve

Az ablak bal felsô sarkának X koordinátája

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

(14)

¾ Ablakok bezárása

JavaScript segítségével be is zárhatjuk az ablakunkat. Ehhez a close() függvényt kell használnunk.

<HTML>

<HEAD>

<!-- JavaScript kód elrejtése function bezar(){

close();

} // -->

</SCRIPT>

</HEAD>

<BODY>

<FORM>

</CENTER>

</FORM>

</BODY>

</HTML>

¾ 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ól- napra változó, környezettõl függõ oldalakat hozzunk létre.

<HTML>

<HEAD>

<!-- 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("<HTML><HEAD><TITLE>Dokumentum készítése JavaScript- tel");

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("</HTML>");

(15)

} // -->

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<INPUT TYPE="button" VALUE="Dokumentum készítése JavaScript-tel"

onClick="ujablak3()">

</FORM>

</CENTER>

</BODY>

</HTML>

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).

<HTML>

<HEAD>

<!-- JavaScript kód elrejtése function statusz(szoveg){

window.status=szoveg;

} // -->

</SCRIPT>

</HEAD>

<BODY>

<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)">

</FORM>

</BODY>

</HTML>

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

(16)

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.

<HTML>

<HEAD>

<!-- 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>

JavaScript scroll...

</BODY>

</HTML>

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);

(17)

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])

(18)

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]

<HTML>

<HEAD>

<!-- 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>

</FORM>

</BODY>

</HTML>

(19)

¾ 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 Leírás

Abs abszolút érték

sin, cos, tan trigonometrikus függvények; az argumentum radiánban Acos, asin,

atan az előbbi függvények inverze; argumentum radiánban exp, log exponenciális függvény, természetes alapú logaritmus Ceil felső egészrész

(20)

Floor alső egészrész

min, max az argumentumként megadott két érték közül a kisebbet, ill. a nagyobbat adják vissza

Pow exponenciális függvény; első argumentuma az alap, a második a kitevő Round kerekítés a legközelebbi egészre

Sqrt 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, sup

HTML-ként formázott sztringet hoz létre

chartAt a paraméterként átadott pozícióban lévő karakterrel tér vissza indexOf, lastIndexOf

A paraméterben meghatározott részsztring első vagy utolsó 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

(21)

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.

<HTML>

<HEAD>

<!-- 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>

(22)

<INPUT TYPE="button" VALUE="Ellenőrizd"

onClick="emailCheck(form_email.email)">

</FORM>

</BODY>

</HTML>

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.

<HTML>

<HEAD>

<!-- 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>

(23)

</FORM>

</BODY>

</HTML>

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:

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.

(24)

¾ 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

(25)

visibility = show | hide |

inherit A réteg láthatósága

Bgcolor = "rgb_szín" A réteg háttérszíne background = "kép_URL" 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.

<HTML>

</LAYER>

</LAYER>

<FONT SIZE=+3>Layer példa</FONT>

</LAYER>

</HTML>

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>

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!

(26)

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:

(27)

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

<HTML>

<HEAD>

<!-- 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 + "=";

(28)

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>

<!--

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>

</HTML>

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.

(29)