Práce s datumem a časem v JavaScriptu

JavaScriptový objekt Date slouží primárně ke zjišťování aktuálního času a data. My si v tomto článku ukážeme některé techniky, ve kterých využijeme objektu Date, abychom získali více informací o chování návštěvníků našich stránek.

Nejprve si prohlédněte následující příklad:

Na prvním řádku předešlého formuláře vidíte běžící hodiny, vyrobené pomocí JavaScriptu. Jejich výroba není nijak složitá, co je na nich zvláštního, je snad jen formátování data, kdy nevyužíváme standardní metody toLocaleString objektu Date, ale datum formátujeme sami a nakonec ošetření data na přelomu tisíciletí.

Druhý řádek ukazuje počet vteřin od spuštění hodin na stránce. Na něm si ukážeme techniku, kterou lze přičítat a odečítat konstanty – např. vteřiny – k objektu Date (klasické plus a mínus zde nepracuje).

A konečně třetí řádek je „countdown“, tedy odpočet, počítadlo, které po uplynutí zadaného počtu vteřin provede nějakou událost – v našem případě zobrazení dialogového okénka s textem. V uvedeném „školním“ případě jde pochopitelně jen o hříčku, která v tomto provedení návštěvníka stránky spíše obtěžuje, dále si ale v textu nastíníme užitečnější možnosti jejího využití.

Nejprve ale k samotnému kódu. V uvedeném případě jsme všechny časovače vypisovali do jednoduchého formuláře, jehož HTML kód vypadá následovně:

Formulář je pojmenovaný hours a jeho jednotlivá textová pole jsou pojmenována time, elapsed a timetojump (tyto názvy využijeme později v JavaScriptu k adresaci).

Kód v JavaScriptu, zajišťující funkčnost hodin, je následující (uvádíme jej v těle stránky, za definicí formuláře). Nejprve zadefinujeme pomocné proměnné:

Arrived je proměnná, určující čas od vstupu návštěvníka na stránku, nastavujeme ji proto na počátku na nulu. toJump je proměnná, určující, za jak dlouho od vstupu návštěvníka má dojít k požadované události, jejím výchozím nastavením tedy nastavujeme tento čas. Proměnná zeroDate je pomocná konstanta, určující nulový čas. Slouží nám pouze k porovnání, zda hodnota obsažená v proměnné toJump už dosáhla 00:00:00. Všechny tři proměnné jsme vytvořili pomocí konstruktoru objektu Date, kterému jako parametry předáváme rok, měsíc, den, hodinu, minutu, vteřinu (v tomto pořadí). Konečně proměnná fJumped je pomocný příznak, určující, zda událost již proběhla.

Další částí kódu je funkce SetDate, která zajišťuje správné naformátování vstupujícího času a data, ošetření drobného problému přelomu tisíciletí a zobrazení správně naformátované hodnoty do určeného formulářového pole:

Vstupní parametr objDate je proměnná obsahující datum, které má být zobrazeno, field je formulářové pole, do nějž máme vypisovat a fShowDate je příznak, který, je-li nastaven, způsobí zobrazení nejen času, ale i data. Funkce je vlastně jen nesložité použití standardních metod objektu Date a několika formátovacích příkazů, pozornost zasluhuje konstrukce if (years < 1000)… , která ošetřuje datum na přelomu tisíciletí. Ve specifikaci JavaScriptu totiž má do konce roku 1999 vracet metoda getYear dvojciferné číslo (např 99), a od roku 2000 dál již číslo čtyřciferné (2000, 2001 apod.) Bohužel samotný Netscape v některých čtvrtých verzích obsahuje chybu, kdy i pro rok 2000 vrací číslo dvojciferné. Proto uvedená podmínka, a proto i její „předimenzování“ až do roku 2999 (jeden nikdy neví).

Proč jsme k formátování data nepoužili standardní metodu toLocaleString objektu Date? Tato funkce zajišťuje zformátování data podle aktuálně nastaveného prostředí na počítači návštěvníka – pokud vytváříme mezinárodní, zejména angloamerické stránky, je lepší ji použít. V našich podmínkách však tato funkce vytváří na mnoha verzích prohlížečů takové formáty data a času, které jsou snad čitelné pro Američany, našim zvyklostem však obvykle neodpovídají.

Předposlední část skriptu je funkce Clock, která zajišťuje za pomoci časovače jednak periodickou změnu proměnných a překreslování formulářových polí, a dále rovněž „hlídá“ okamžik, kdy má spustit událost odečítanou v proměnné toJump:

Zajímavá je inkrementace a dekrementace proměnných typu Date. Protože na tento typ proměnné nemůžeme použít přímo konstrukci proměnná = proměnná + 1, popřípadě konstrukci proměnná++, musíme si vypomoci metodou getTime, která vrací čas z příslušné proměnné, převedený na hodnotu v milisekundách, uplynuvší od kteréhosi obskurního data před třiceti lety (zřejmě narozeniny autora JavaScript standartu). K hodnotě vrácené touto funkcí přičteme (resp. odečteme) 1000 milisekund, tedy jednu sekundu, a výsledek uložíme zpět do proměnné inverzní metodou setTime.

Dále ve funkci Clock voláme funkce SetDate, popsané výše, které přepíšou upravená data do formulářových proměnných. Poté zkontrolujeme, zda hodnota proměnné toJump nedosáhla nuly, a pokud ano, spustíme příslušnou událost. Nakonec pomocí obvyklého setTimeout nastavíme časovač, zajišťující opětovné volání funkce Clock v intervalu jedné vteřiny.

V uvedeném příkladě zbývá už jen jediné – zavolat poprvé funkci Clock, aby se časovače rozběhly:

Využití uvedených technik

To, že v některém formulářovém políčku na WWW stránce běží hodiny, je funkcionalita, která na stránce být může a nemusí. Jsou jistě stránky, které tuto funkci využijí lépe než ostatní – burzovní zpravodajství, předpovědi počasí a jiná časově závislá data je často účelné doplnit časovým údajem. Dalším příkladem jsou časově závislé on-line hry (šachy a šachové hodiny apod.) Nevýhodou je, že skript se vykonává na straně klienta, a tedy pokud má návštěvník v počítači špatně nastavené hodiny, ukazuje se i toto datum chybně.

Zjišťování doby, kterou návštěvník strávil na stránce, je však velmi užitečná věc, využitelná zejména na komerčně zaměřených webech. Jeden příklad za všechny: jste-li majiteli internetového obchodu, určitě vás bude zajímat, které zboží si návštěvník prohlížel dlouho a z kterého „prchal“ – v případě nepoměru mezi takto zjištěnou atraktivitou určitého zboží a počtem objednávek může ukazovat na nadsazenou cenu nebo jiné problémy spojené s objednávkou atd.

Takto zjišťovaný čas není nutné návštěvníkovi ukazovat – pokud upravíme skript, lze však tyto údaje periodicky ukládat například do cookie, popřípadě čas od času zavolat (v novém okně) ASP nebo PHP skript, který provede přenesení zjištěných dat na stranu serveru a tedy do našich databází. Budete-li mít zájem, vrátíme se v některém z dalších článků k této technice podrobněji.

Coutdown počítadlo využijeme často při přesměrování uživatele na jinou adresu. I když k tomuto účelu lze (jednodušeji) využít funkce setTimeout nebo provést přesměrování okamžitě, někdy bývá užitečné ukázat návštěvníkovi, kolik vteřin zbývá do přeměrování a ponechat mu tak čas ke zrušení operace, nebo k jinému rozhodnutí.

A to je pro dnešek vše.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.