JavaScript tanfolyam

10. rész

Az "emlékező oldal" - Cookie

Keverde

 


 

Piros Zöld Kék

A keverde nevű kézi készülék segítségével kikeverhetjük dokumentumunk háttérszínét. Ez nem olyan nagy feladat azoknak, akik az eddigi leckéket sikeresen tanulmányozták, az attrakció lényege most az, hogy ha frissítjük az oldalt vagy kikapcsoljuk böngészőnket és később visszajövünk (ugyanazzal a böngészővel), akkor a korábban beállított héttérszínek fogadnak bennünket.

A megvalósítás az úgynevezett cookie-k segítségével történik.

A rejtélyesen hangzó cookie (süti) a kliens oldali gépen tárolt kicsike információ. A cookie feldolgozása történhet cgi-k segítségével, JavaScript által illetve Live  Wire kliens objektummal. Mi természetesen arra nézünk pédát, amikor az információ feldolgozása JavaScript segítségével történik.

Jelen esetben a háttérszín lesz az az információ, amit a cookie feljegyez.

A következő függvényeket definiáljuk a fejlécben (head).

Cookie- manipuláló függvények:
 

function CookieVegLeolvaso(offset) { 
var endstr = document.cookie.indexOf (";", offset); 
if (endstr == -1) 
endstr = document.cookie.length; 
return unescape(document.cookie.substring(offset, endstr)); } 

function CookieBeolvasas (nev) { 
var arg = nev + "="; 
var alen = arg.length; 
var clen = document.cookie.length; 
var i = 0; 
while (i < clen) { 
var j = i + alen; 
if (document.cookie.substring(i, j) == arg) 
return CookieVegLeolvaso(j); 
i = document.cookie.indexOf(" ", i) + 1; 
if (i == 0) break; } 
return null; } 

function CookieBeallitas (nev, value) { 
var argv = CookieBeallitas.arguments; 
var argc = CookieBeallitas.arguments.length; 
var expires = (argc > 2) ? argv[2] : null; 
var path = (argc > 3) ? argv[3] : null; 
var domain = (argc > 4) ? argv[4] : null; 
var secure = (argc > 5) ? argv[5] : false; 
document.cookie = nev + "=" + escape (value) + 
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
((path == null) ? "" : ("; path=" + path)) + 
((domain == null) ? "" : ("; domain=" + domain)) + 
((secure == true) ? "; secure" : ""); } 

Az első két függvény a cookie információkat alakítja vissza változókká.
A harmadik függvény pedig a cookie-kat álítja be. A háttérszenen kívül beállítja az oldalt, a domaint, azt, hogy nem biztonsági cookie-ról van szó, és azt hogy mikor járjon le a cookie-beállítás (expires).

Az "expires" értékét a value tárolja, amit később írunk le, hogyan.

A fejlécben vannak még azok a függvények, amelyek a nyomógombok lenyomásával lépnek életbe:
 

function hexaba(szam)
{ if (szam==0) return("0");
 if (szam==1) return("1");
 if (szam==2) return("2");
 if (szam==3) return("3");
 if (szam==4) return("4");
 if (szam==5) return("5");
 if (szam==6) return("6");
 if (szam==7) return("7");
 if (szam==8) return("8");
 if (szam==9) return("9");
 if (szam==10) return("A");
 if (szam==11) return("B");
 if (szam==12) return("C");
 if (szam==13) return("D");
 if (szam==14) return("E");
 if (szam==15) return("F");
}

function PirosMinusz()

{if(piros>0) piros=piros-1;
document.bgColor=hexaba(piros)+"0"+hexaba(zold)+"0"+hexaba(kek)+"0";
var lejar = new Date (); 
lejar.setTime(lejar.getTime() + (24 * 60 * 60 * 1000 * 31 * 9)); 
CookieBeallitas('hatter',piros*256 + zold*16+kek, lejar); 
return false;}

function PirosPlusz()

{if(piros<15) piros=piros+1;
document.bgColor=hexaba(piros)+"0"+hexaba(zold)+"0"+hexaba(kek)+"0";

var lejar = new Date (); 
lejar.setTime(lejar.getTime() + (24 * 60 * 60 * 1000 * 31 * 9)); 
CookieBeallitas('hatter',piros*256 + zold*16+kek, lejar); 
return false;}

function ZoldMinusz()

{if(zold>0) zold=zold-1;
document.bgColor=hexaba(piros)+"0"+hexaba(zold)+"0"+hexaba(kek)+"0";
var lejar = new Date (); 
lejar.setTime(lejar.getTime() + (24 * 60 * 60 * 1000 * 31 * 9)); 
CookieBeallitas('hatter',piros*256 + zold*16+kek, lejar); 
return false;}

function ZoldPlusz()

{if(zold<15) zold=zold+1;
document.bgColor=hexaba(piros)+"0"+hexaba(zold)+"0"+hexaba(kek)+"0";
var lejar = new Date (); 
lejar.setTime(lejar.getTime() + (24 * 60 * 60 * 1000 * 31 * 9)); 
CookieBeallitas('hatter',piros*256 + zold*16+kek, lejar); 
return false;}

function KekMinusz()

{if(kek>0) kek=kek-1;
document.bgColor=hexaba(piros)+"0"+hexaba(zold)+"0"+hexaba(kek)+"0";
var lejar = new Date (); 
lejar.setTime(lejar.getTime() + (24 * 60 * 60 * 1000 * 31 * 9)); 
CookieBeallitas('hatter',piros*256 + zold*16+kek, lejar); 
return false;}

function KekPlusz()

{if(kek<15) kek=kek+1;
document.bgColor=hexaba(piros)+"0"+hexaba(zold)+"0"+hexaba(kek)+"0";
var lejar = new Date (); 
lejar.setTime(lejar.getTime() + (24 * 60 * 60 * 1000 * 31 * 9)); 
CookieBeallitas('hatter',piros*256 + zold*16+kek, lejar); 
return false;}
 

 

A hexaba() elnevezésű függvény a 10-es számrendszerbeli számokat alakítja hexadecimálisakká. Lehetne elegánsabb is, de ekkor nem működne minden böngészővel.

A színmanipulákó gombokhoz tartozó függvények a színek állításán kívül állítják a lejárás dátumát és természetesen a cookie-bejegyzést. Minden gomb minden lenyomásakor mentődik az információ, így biztos, hogy nem dolgozik hiába az, aki a gombok nyomogatásába kezd.

A dokumentum törzsébe már csak a nyomógombokat tartalmazó táblázat és űrlapok kerülnek illetve mindenekelőtt egy rövid script, ami a kezdetkor megnézi, hogy van-e cookie bejegyzés. Ha nincs, akkor beállítja a változókat, ha van, akkor beolvassa azokat.

<!-- 
hatter = CookieBeolvasas('hatter') 

if (hatter  >0) {
var p =  Math.floor(hatter/256);
var z =  Math.floor((hatter-p*256)/16);
var k =  Math.floor((hatter-p*256-z*16));
piros=p;zold=z;kek=k;
document.bgColor=hexaba(p)+"0"+hexaba(z)+"0"+hexaba(k)+"0";

else { document.bgColor = "f8f4e0";piros=15;zold=15;kek=14;

 } 
// --> 
</SCRIPT>

<TABLE BORDER=0 BGCOLOR="#FFFFE6" >
<TR>
<TD ALIGN=CENTER COLSPAN="3">
<H3>
Keverde</H3>
&nbsp;
<CENTER><TABLE BORDER=0 CELLPADDING=5 >
<TR>
<TD BGCOLOR="#C0C0C0"><FORM>
<CENTER></CENTER>

<CENTER><INPUT type="button"
                    value=" - " onclick="PirosMinusz()"></CENTER>
</FORM></TD>

<TD BGCOLOR="#C0C0C0"><FORM>
<CENTER></CENTER>

<CENTER><INPUT type="button"
                    value=" + " onclick="PirosPlusz()"></CENTER>
</FORM></TD>

<TD BGCOLOR="#C0C0C0"><FORM>
<CENTER></CENTER>

<CENTER><INPUT type="button"
                    value=" - " onclick="ZoldMinusz()"></CENTER>
</FORM></TD>

<TD BGCOLOR="#C0C0C0"><FORM>
<CENTER></CENTER>

<CENTER><INPUT type="button"
                    value=" + " onclick="ZoldPlusz()"></CENTER>
</FORM></TD>

<TD BGCOLOR="#C0C0C0"><FORM>
<CENTER></CENTER>

<CENTER><INPUT type="button"
                    value=" - " onclick="KekMinusz()"></CENTER>
</FORM></TD>

<TD BGCOLOR="#C0C0C0"><FORM>

<P><INPUT type="button" value=" + "
                    onclick="KekPlusz()">
<BR></FORM></TD>
</TR>
</TABLE></CENTER>
&nbsp;</TD>
</TR>

<TR>
<TD ALIGN=CENTER><B>Piros</B></TD>

<TD ALIGN=CENTER><B>Zöld</B></TD>

<TD ALIGN=CENTER><B>Kék</B></TD>
</TR>
</TABLE>

V É G E