Képek kezelése
A HTML oldalak manapság tele vannak képekkel (is), amiket természetesen manipulálni lehet a JavaScript segítségével. Egy oldal képeit a document.images vektoron keresztül érhetjük el, amely image típusú objektumokat tárol. Az image osztály a következő attribútumokkal rendelkezik: name (a kép neve), src (a kép forrása, azaz a file neve), width (a kép szélessége), height (a kép magassága) és border (a kép keretének mérete).
HTML-ben a következőképpen jelentethetünk meg egy képet (az img tagnek több paramétere is lehet, ez csak egy példa):
<img src="kep.jpg" name="logo" />
Ekkor ez a kép elérhető a document.images[0] -n keresztül, feltéve, hogy ez az első kép az oldalon. Ez persze kényelmetlen, hiszen ha beszúrunk elé egy másik képet, akkor már a document.images[1] -en keresztül érhető el, stb. Szerencsére a képnek adtunk nevet és a JavaScript lehetőséget ad a vektorok asszociatív tömbként való kezelésére, azaz a tömb egy elemére név szerint is hivatkozhatunk a document.images["logo"] alakban. (Megj.: Ez minden tömb esetén így van, nem csak a document.images esetében. Sőt, az objektumok attribútumaira is lehet hivatkozni objektum.attributum, objektum["attributum"], vagy akár objektum[attributum_sorszama] alakban is.) A egyszerűség kedvéért még document.logo alakban is hivatkozhatunk az előbbi képre.
A képek JavaScripten keresztüli manipulációjának leggyakoribb példája, amikor egy (általában linkként használt) kép fölé mozgatva az egeret a kép megváltozik, például világosabb színű lesz. Ezt úgy lehet elérni, hogy két képet tárolunk, egy sötétebb és egy világosabb színűt. Kezdetben a sötét képet töltjük be és amikor a felhasználó a kép fölé mozgatja az egérkurzort (kiváltódik az onMouseOver esemény), akkor a kép src attribútumát a világos képet tartalmazó file nevére cseréljük. Amikor az egér elhagyja a képet (onMouseOut) akkor visszaállítjuk a sötétebb képet.
Ez a módszer muködőképes, van azonban egy szépséghibája: az oldal megnyitásánál csak a sötétebb képet tölti le a böngésző, így amikor a kép fölé mozgatjuk az egeret, akkor kezdi letölteni a világosat, ami időbe telhet és ezért késleltetetten jelenik meg. Ennek a hibának az elkerülésére definiálni kell a világosabb képnek egy image objektumot, így már az oldal letöltésével együtt letöltésre kerül és amikor szükség van rá, azonnal megjelenik. Ez a gyakorlatban így néz ki:
<script type="text/javascript">
<!--
sotet = new image(); sotet.src = "images/sotet.gif";
vilagos = new image(); vilagos.src = "images/vilagos.gif";
-->
</script>
<a href="kepek.html" onMouseOver="document.gomb.src=vilagos.src"
onMouseOut="document.gomb.src=sotet.src">
<img name="gomb" src="images/sotet.gif" border=0> </a>
Cookie-k kezelése
A cookie-k olyan rövid feljegyzések, melyeket a felhasználó gépén tudunk tárolni (ha erre engedélyt ad a böngészőprogram beállításaival) és ezeket a honlap minden látogatásakor elküldi a szervernek. Cookie-kban tárolhatjuk például, hogy az adott felhasználó hányszor járt már az oldalon, de egy internetes bolt is megvalósítható segítségükkel: ha a vásárló kiválaszt egy árut, azt egy cookie-ban tároljuk, majd amikor a megrendelőlapot kell összeállítani, a cookie-kból visszakérjük a megrendelt áruk neveit és e-mailben elküldjük a bolt címére. Cookie-kat alkalmazó hírportálok tárolhatják például, hogy a felhasználó milyen témájú hírekre kíváncsi és ez alapján lehet személyre szabottan összeállítani számára a honlapot.
Ahhoz képest, hogy milyen hasznosak, kezelésük viszonylag egyszerű. A cookie-k gyakorlatilag név-érték-lejárat hármasokból állnak, ahol a lejárat határozza meg, hogy az adott információt mennyi ideig tárolja a kliens gépe. Lejáratot megadni nem kötelező, ekkor az aktuális böngészés idejére lesz tárolva.
Cookie-t tárolni a kliens gépén a document objektum cookie attribútumán keresztül lehet a következőképpen:
document.cookie = "név=érték; expires=" + datum;
Ahol a datum GMTString formában tárolja a lejárat dátumát. Ha a név vagy az érték tartalmaz speciális karaktereket is (pl. szóköz, vessző, pontosvessző), akkor át kell alakítani, hogy ezeket a karaktereket escape-szekvencia formájában tárolja, amit az escape() függvény megtesz nekünk. A legegyszerűbb, ha írunk egy setCookie() függvényt és mindig ennek segítségével tároljuk a cookie-kat:
function setCookie(nev, ertek, lejarat) {
document.cookie = escape(nev) + "=" + escape(ertek) + "; expires=" + lejarat.toGMTString();
}
Ez a függvény automatikusan a megfelelő formátumra alakítja a nevet, az értéket és a dátumot is. Ezek után egy cookie tárolása történhet a következőképpen:
var expire = new Date(); // aktuális dátum
expire.setTime(expire.getTime() + 1000*60*60*24); // 1 napig érvényes
setCookie("a felhasználó neve", "Gipsz Jakab", expire);
A lejárati időt az 1 napra (aktuális dátum + 1 nap ezredmásodpercekben mérve) állítottuk be.
Az információ visszaszerzése a cookie-ból egy hajszállal bonyolultabb, úgyhogy mindjárt írjunk is rá egy getCookie() függvényt:
function getCookie(nev) {
var minta = escape(nev) + "="; // ezt a mintát keressük
var offset = document.cookie.indexOf(minta); // megkeressük a mintát
if (-1 == offset) return null; // ha nem találtuk meg
offset += minta.length; // a minta után jön az érték
var end = document.cookie.indexOf(";", offset); // az értéket pontosvessző zárja...
if (-1 == end) end = document.cookie.length; // ... vagy a cookie végéig tart
return unescape(document.cookie.substring(offset, end));
}
Az unescape() függvény az escape() inverze, tehát az escape-szekvenciákat alakítja vissza karakterekké. A getCookie() visszatérési értéke null, ha nincs értéke az adott cookie-nak, különben pedig a megfelelő értéket kapjuk meg. A setCookie() és a getCookie() függvények segítségével pedig innentől kezdve egyszerűen kezelhetjük a kliens gépével való kommunikációt.
A lejárat dátumán kívül egyéb opcionális paramétereket is meg lehet adni a cookie-knak, például, hogy melyik honlapoknak küldje el őket a böngésző, illetve ki lehet kötni, hogy csak biztonságos internetkapcsolaton keresztül kerüljenek elküldésre. Ezekről lásd bővebben a felhasznált oldalaknál felsorolt forrásmunkákat.