Ž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