Cookies a nenavštívené stránky

    0

    Že se odkazy na stránky, které uživatel dosud na našem webu nenavštívil, dají zvýraznit pomocí klasického HTML, případně v kombinaci s kaskádními styly, je všeobecně známo. V tomto článku si ukážeme, jak lze pomocí cookies a JavaScriptu vytvořit něco podobného, s tím vylepšením, že kromě návštěvy stránek můžeme sledovat i jiné „dosud neprovedené“ akce uživatele na našem webu – například odeslání formuláře.

    Jak popsaný příklad vypadá, vidíme níže. Trojice nepříjemně blikajících odkazů ukazuje, co jsme na této stránce dosud neudělali – konkrétně se po nás chce navštívit jednu stránku a odeslat dva formuláře. Jakmile požadovanou akci dokončíme, příslušný blikající odkaz je nahrazen statickým obrázkem.

    Přihláška k odběru bulletinu:
    Váš e-mail:

    Hlasování v anketě:
    Váš názor:

    Většina funkcí potřebných k zajištění tohoto chování je zapouzdřena do objektu Nonvisited. Jeho kód si rozebereme po částech:

    function Nonvisited(cn ){
        this.cn = cn
        this.iLength = 0
        this.arrImgLo = new Array()
        this.arrImgHi = new Array()
        this.arrURLs = new Array()

    Při konstrukci objektu ukládáme do členské proměnné cn předaný parametr téhož jména, který určuje jméno použité cookie (do cookie ukládáme data o tom, které akce uživatel už vykonal). Trojice polí obsahuje odkazy na blikající, potažmo statické obrázky a URL adresy odkazů, vedoucích z těchto obrázků. Proměnná iLength obsahuje počet položek objektu (akcí).

        this.Add = function( imgLo, imgHi, URL ) {
            this.arrImgLo[this.iLength] = imgLo
            this.arrImgHi[this.iLength] = imgHi
            this.arrURLs[this.iLength] = URL
            this.iLength++;
        }

    Metoda Add slouži k přidávání jednotlivých akcí do objektu. Trojice parametrů imgLo, imgHi a URL určuje (v tomtéž pořadí): obrázek pro vykonanou akci, obrázek pro nevykonanou akci (v našem případě animovaný blikající gif) a URL odkazu.

        this.WriteTable = function() {
            if((fx=MyCookie.Read(this.cn))==null) fx="";
            document.write(‚<table>‘)
            for(var i=0; i<this.iLength; i++ ) {
                document.write(‚<tr><td><a href="’+this.arrURLs[i]+’">‘)
                document.write(‚<img border="0" src="’+((fx.indexOf(""+i+";")==-1)?this.arrImgHi[i]:this.arrImgLo[i])+’">‘)
                document.write(‚</a><td></tr>‘)
            }
            document.write(‚</table>‘)
        }   

    Metoda WriteTable vykreslí do dokumentu tabulku se seznamem všech odkazů z objektu Nonvisited. Protože se jedná víceméně o grafickou práci, je zde prostor pro vlastní úpravu vzhledu vypisované tabulky. Z „technického“ hlediska je nejdůležitější řádek s výpisem tagu IMG, v němž rozlišujeme, zda vypsat „Hi“ (tj. ve významu „akce dosud neprovedena“) nebo „Lo“ („akce provedena“) obrázek. Informace o tom, zda byla či nebyla příslušná akce provedena, jsou uloženy právě v cookie se jménem this.cn, ve tvaru řetězce s čísly jednotlivých akcí oddělenými středníkem, např „0;10;25;3;“ atp.

    Poznámka k číslům akcí: Jednotlivé akce jsou číslovány vzestupně, počínaje nulou, tak jak jsou přidávány do objektu Nonvisited prostřednictvím metody Add. První přidaná akce má tedy číslo 0, druhá 1 atd. Uvedené číslování nevyužívá jen interně metoda WriteTable, používá se také při volání poslední metody objektu s názvem OK (za definicí metody je jedna pravá závorka navíc jako ukončení definice celého objektu):

        this.OK = function(index) {
            var idstr = index+";"    
            if((fx=MyCookie.Read(this.cn))==null) fx="";
            if ((fi=fx.indexOf(idstr))==-1) {
                fx += idstr;
            }
            MyCookie.Write(this.cn,fx,7);
        }
    }

    Metodu OK voláme tehdy, chceme-li označit akci s číslem index za splněnou.

    Než začneme objekt Nonvisited používat, musíme ještě vytvořit jeho instanci (zde nazvanou stručně nv) a naplnit ji pomocí metody Add seznamem akcí. Na příslušném místě stránky rovněž voláním metody WriteTable vykreslíme tabulku akcí:

    // vytvoreni a naplneni
    var nv = new Nonvisited( "nonvisited")
    nv.Add( "visit_l.gif", "visit_h.gif", "somedirectory/visit.htm" );
    nv.Add( "submit_l.gif", "submit_h.gif", "#submitform" );
    nv.Add( "vote_l.gif", "vote_h.gif", "#voteform" );
    // vykresleni seznamu akci
    nv.WriteTable();

    V uvedeném příkladu byla metoda OK volána následujícími způsoby: V případě odkazu na stránku byla volána na událost onLoad tagu BODY cílové stránky….

    <body bgcolor="#FFFFFF" onLoad="nv.OK(0)">

    …kdy nesmíme zapomenout (vzhledem k tomu, že jde o jinou stránku) sdílet v cílové stránce definici objektu Nonvisited i jeho instance nv – to nám zajistí nejlépe sdílený .js soubor. V případě odesílání formuláře bylo volání metody OK zabezpečeno v handleru události onSubmit příslušného formuláře (navíc je do handleru přidáno obnovení stránky, to pro správné zobrazení tabulky odkazů, a vrácení false, to pro potřeby ukázky, aby nedocházelo ke zbytečnému odesílání formuláře serverovému skriptu). V následujícím rámečku jsou uvedena volání pro oba formuláře:

    <form method="POST" onSubmit="nv.OK(1); location.reload(); return false">
    <form method="POST" onSubmit="nv.OK(2); location.reload(); return false">

    Nesmíme zapomenout na druhý použitý objekt, zapouzdřující obsluhu cookies. Je to náš známý objekt MyCookie, tentokrát (v metodě Write) poupravený o definici parametru path – vzhledem k tomu, že do jedné cookie můžeme voláním metody OK obkjektu Nonvisited teoreticky ukládat v různých adresářích, je potřeba explicitně zajistit její sdílení různými skripty v různých adresářích – k čemuž slouží právě syntaxe path=/, která zajistí platnost cookie v rootu webu i v podadresářích:

    var MyCookie = {
        Write:function(name,value,days) {
            var D = new Date();
            D.setTime(D.getTime()+86400000*days)
            document.cookie = escape(name)+"="+escape(value)+
                ((days == null)?"":(";expires="+D.toGMTString())) + ";path=/"
            return (this.Read(name) == value);
        },
        Read:function(name) {
            var EN=escape(name)
            var F=‘ ‚+document.cookie+‘;‘, S=F.indexOf(‚ ‚+EN);
            return S==-1 ? null : unescape(     F.substring(EN=S+EN.length+2,F.indexOf(‚;‘,EN))    );
        }
    }

    Poznámky na závěr

    • K metodě OK: V uvedené metodě objektu Nonvisited při zápisu Cookie nastavujeme dobu platnosti Cookie na 7 dní. Modifikací tohoto parametru lze jednoduše nastavit, po jak dlouhé době budou návštěvníkem provedené akce opět vypadat jako „nenavštívené“.
    • K použitým odkazům: v příkladu uvedené odkazy na odeslání formuláře jsou vytvořeny jako odkazy na záložky (bookmark) v rámci jedné stránky. Je třeba si uvědomit, že URL odkazu nemá víceméně nic společného s akcí samotnou – ta je považována za splněnou až voláním metody OK – tedy také můžeme více akcí označit za splněné „hromadně“ – třeba návštěvou jediné stránky.
    • K dalším vylepšením: Jistě by se jich našlo hodně, užitečné může například být doplnění objektu Nonvisited a následně generované tabulky odkazů o specifikaci cílení odkazu – vlastnosti target.

    Přeji vám příjemný den.

    Žádný příspěvek v diskuzi

    Odpovědět