Digitální hodiny pomocí JavaScriptu

12. prosince 2000

•

V dnešním článku si napíšeme JavaScript, pomocí kterého si můžete obohatit stránky o digitální hodiny. Také si vysvětlíme práci s ternárními operátory, objektem Image a časovačem.

Nejdříve si vysvětlíme pojem ternární operátor. To je operátor mající 3 operandy. Syntaxe je – výraz1 ? výraz2 : výraz3 . Pokud je výraz1 pravdivý, provede se výraz2, pokud ne provede se výraz3. Tato konstrukce vám může nahradit například konstrukci if – else, kde provádíte přiřazení do jedné proměnné.

Dále k objektu Image

Od Internet Exploreru 4.0 a Netcape 3.0 je možno pracovat s JavaScriptu s obrázky ve stránce. K tomu nám slouží pole images, které obsahuje všechny obrázky ve stránce. Toto pole je tvořeno objekty typu Image, který popisuje obrázek. To jest, říká nám URL obrázku, zda je obrázek již stažen, výšku, šířku… Na jednotlivé prvky pole images se můžeme odkazovat buď číselným indexem, kde první obrázek ve stránce má index 0 nebo jmenným indexem, kde jako index slouží hodnota atributu name. Čili, pokud máme ve stránce vložen jako první obrázek např. takto – <img src="muj_obrazek.gif" name="fotka">, pak se z JavaScriptu na něj odkážeme buď document.images[0] nebo document.images["fotka"]. V našem scriptu použijeme taká vlastnost src, která říká URL obrázku.

Jako poslední jsem slíbil vysvětlit funkci časovače. Ten nám umožňuje vykonat nějakou akci po uplynutí nastaveného časového intervalu. K jeho nastartování slouží funkce setTimeout, která má 2 parametry. První parametr je akce, která se má provést. Tento parametr je vkládán jako řetězec nebo jako reference na nějaký objekt. Druhý parametr je časový interval v milisekundách, po jehož uplynutí dojde k zavolání akce. Syntaxi a použití funkce setTimeout si více popíšeme níže.

A nyní k vlastnímu scriptu.

Pokud chceme vytvořit na stránce hodiny z obrázků, musíme nejdříve vytvořit v HTML objekty obrázků, aby bylo se na co odkazovat. To provedeme standardním zápisem. Ten pro náš příklad bude vypadat takto:

Hodnota atributu name udává, zda-li se jedná o hodiny, minuty či sekundy a pozici čísla. Takže m2 znamená, že se jedná o druhou číslici pro minuty. Na počátku budou naše hodiny ukazovat 00:00:00. Tímto jsme skončili s HTML a vzhůru k programování v JavaScriptu.

Nejdříve si nastavíme proměnnou pro časovač. Tu pojmenujeme TimerID a nastavíme ji na null, jelikož ještě žádný časovač nemáme. Null je hodnota-nehodnota. Říká, že proměnná na nic neukazuje, ani že nemá žádnou hodnotu. Nezaměňovat, ale s nulou nebo prázdným řetězcem, to jsou již hodnoty.

Pak si inicializujeme proměnnou imagesPath, která obsahuje cestu k obrázkům. Stránka s se totiž může nacházet jinde než jsou obrázky a abychom nemuseli pokaždé upravovat celý script, uložíme si do ní cestu od kořene serveru k obrázkům. Například imagesPath="/images/hodiny/"

Dále si vytvoříme pomocné proměnné, do kterých si budeme ukládat čas. Proměnné začínající o označují staré hodnoty (z anglického old – starý) a proměnné začínající c označují stávající (z anglického current – tento). Pak si provedeme před-načtení obrázků, jelikož nechceme, aby se s prvním zobrazením čísla stalo to, že prohlížeč jej bude muset dotahovat za chodu scriptu. Před vlastním před-načtením ověříme, zda prohlížeč umí pracovat z polem images. Obrázky jsou pojmenovány 0-9.gif.

var TimerID=null;
var imagesPath="cest_k_obrázkům";
var oHours=null;
var oMinutes=null;
var cHours=null;
var cMinutes=null;
var cSeconds=null;
//preload
ClockImages=Array(10);

if (document.images){
for (i=0;i<10;i++){
ClockImages[i]=new Image();
ClockImages[i].src=i+".gif";
}
}

Nyní si vytvoříme vlastní řídící funkci ShowClock. V té si pomocí objektu Date() sejmeme stávající čas a uložíme do proměnných v dvoumístném formátu, tj. zarovnané na nulu zleva. Tady přijde ke slovu ternární operátor. Pokud bude hodnota hodin, minut nebo sekund menší než 10, přidá se zleva nula.

function ShowClock(){
if (document.images){
    cDate=new Date();
    temp=cDate.getHours();
    cHours=(temp>9)? ""+temp:"0"+temp;
    temp=cDate.getMinutes();
    cMinutes=(temp>9)? ""+temp:"0"+temp;
    temp=cDate.getSeconds();
   cSeconds=(temp>9)? ""+temp:"0"+temp;

Nyní si provedeme kontrolu změn času. Nemá totiž cenu přepisovat všechny obrázky, ale jenom ty které se změnily. URL obrázku spočteme z imagesPath+první nebo druhá číslice v proměnné pro čas + přípona typu souboru (".gif",".jpg"):

if (cHours!=oHours){
document.images["h1"].src=imagesPath+cHours.substring(0,1)+".gif";
document.images["h2"].src=imagesPath+cHours.substring(1,2)+".gif";
}
if (cMinutes!=oMinutes){
document.images["m1"].src=imagesPath+cMinutes.substring(0,1)+".gif";
document.images["m2"].src=imagesPath+cMinutes.substring(1,2)+".gif";
}
document.images["s1"].src=imagesPath+cSeconds.substring(0,1)+".gif";
document.images["s2"].src=imagesPath+cSeconds.substring(1,2)+".gif";

Teď si jenom uložíme hodnoty času pro porovnání v příštím cyklu. Je zbytečné ukládat sekundy, jelikož tady dojde ke změně vždy. A spustíme časovač, který po 1000ms (1 sekundě) zavolá opět tuto funkci:

    oHours=cHours;
    oMinutes=cMinutes;
    TimerID=setTimeout("ShowClock()",1000);
}
}

A zbývá pouze inicializace funkce. Tu provedeme po načtení stránky pomocí události onLoad. Tady máme 2 cesty. Buď pomocí <body onLoad="ShowClock()"> a nebo přiřazením do handleru událostí pomocí window.onload=ShowClock;. Pozor, při přímém přístupu do handleru se neuvádějí závorky!

A to je pro dnešek vše, přátelé. Testovací stránka i s obrázky je ke stažení zde. Popisovaný script by měl fungovat v Internet Exploreru 5.0, Netscape 4.75 a v Netscape 6.0