|
VII. Dátum a čas Pri tvorbe webovských stránok niekedy narážame na potrebu zobraziť na stránke aktuálny čas a dátum. Spôsobov ako sa to dá zrealizovať je niekoľko. V minulosti sa na to používali rôzne cgi skripty, ktoré sa spúštali na www serveri a pri zasielaní stránky návštevníkovi, do nej doplnili aktuálny dátum. V dnešnej dobe máme naviac k dispozícii skriptové jazyky JavaScript a VBScript pomocou ktorých je možné rýchlo a ľahko narábať s dátumom a časom. Zobrazenie dátumu a času PRÍKLAD 7.1 - Zobrazenie dátumu a času <html> <head> <title>Zobrazenie datumu a casu</title> </head> <body> <script> <!-- dnes=new Date(); document.write(dnes); // --> </script> </body> </html> Ako ste si mohli všimnúť, na prácu s dátumom a časom slúži v JavaScripte objekt Date. Aby sme ho mohli použiť, je potrebné tento objekt na začiatku skriptu "aktivovať". Docielime to jeho priradením do premennej dnes (dnes=new Date()). Na záver vypíšeme obsah novovzniknutého objektu dnes pomocou známej funkcie document.write(dnes). Na obrazovke sa nám objaví dátum a čas v neupravenej forme. napr. Aký je dnes deň? V našom 2. príklade využijeme dátový objekt na identifikáciu dňa v týždni. Tento skript zistí o aký deň v týždni ide a v závislosti od toho zobrazí obrázok prislúchajúci tomuto dňu. PRÍKLAD 7.2 - Aký je dnes deň? <html>
<head>
<title>Aky je dnes den?</title>
<body>
<script>
<!--
dnes=new Date();
den=dnes.getDay();
document.write("<img src=",den,".gif>");
// -->
</script>
</body>
</html>
Medzi novinku v skripte patrí využívanie metódy getDay objektu Date() (zoznam ostatným metód je v prílohe). Pomocou nej vieme z celého objektu vybrať iba tú časť, ktorá nás zaujíma. V našom prípade táto metóda, z objektu dnes vyberie hodnotu zodpovedajúci dňu v týždni a táto hodnota sa následne zapíše do premennej den. Funkciou document.write() zobrazíme prislúchajúci obrázok (nedela=0.gif...sobota=6.gif). Hodinky V 1. príklade sme zobrazili na obrazovke aktuálne časové údaje v okamihu načítania stránky. Po načítaní stránky sa už tento čas nemenil tzn. že bol statický. Nás teraz bude zaujímať spôsob ako docieliť to, aby sa tento čas menil (bol naďalej aktualizovaný). PRÍKLAD 7.3 - Hodinky <html>
<head>
<title>Hodinky</title>
<script>
<!--
function hodiny()
{
dnes=new Date();
hodin=dnes.getHours(); minut=dnes.getMinutes(); sekund=dnes.getSeconds(); cas=((hodin<10) ? "0" : "")+hodin; cas+=((minut<10) ? ":0" : ":")+minut; cas+=((sekund<10) ? ":0" : ":")+sekund; document.hodinky.cifernik.value=cas;
setTimeout("hodiny()",1000);
}
// -->
</script>
</head>
<body onLoad="hodiny();">
<form name="hodinky">
<b>Hodinky: </b>
<input type="text" name="cifernik" size="7">
</form>
</body>
</html>
V tomto príklade sa po načítaní stránky
na obrazovke zobrazí formulárový vstupný riadok. V jeho vnútri sa bude
zobrazovať aktuálny čas, ktorý sa bude periodicky každú sekundu meniť.
Vznikne takto efekt hodiniek, ktoré ukazujú presný čas. Ako to celé
funguje? Syntax funkcie: setTimeout("nejaka_funkcia()",cas); Premenná cas je textový reťazec, ktorý obsahuje čas v tvare (hodina:minúta:sekunda). Tento reťazec sa nakoniec zapisuje do vstupného riadka formulára. Odpočítavanie do roku 2000... Keďže sa nám už ten rok 2000 blíži, naprogramujeme si skript, ktorý nás bude informovať o tom, koľko času nám ešte zostáva. V skripte sa nenachádzajú žiadne nové prvky, a preto by nemal byť problém s jeho pochopením. PRÍKLAD 7.4 - Odpočítavanie do roku 2000 <html>
<head>
<title>Odpocitavanie do roku 2000</title>
<script>
<!--
function odpocitavanie()
{
dnes=new Date();
hodin=dnes.getHours(); minut=dnes.getMinutes(); sekund=dnes.getSeconds(); mesiacov=dnes.getMonth(); dni=dnes.getDate(); rokov=dnes.getYear(); zostava_hodin=23-hodin; zostava_minut=59-minut; zostava_sekund=59-sekund; zostava_dni=31-dni; zostava_mesiacov=11-mesiacov; zostava_rokov=99-rokov; celkom=zostava_rokov +" rokov, "+zostava_mesiacov +" mesiacov, "+ zostava_dni+" dni, "+zostava_hodin +" hodin, "+zostava_minut+" minut, "+zostava_sekund +" sekund"; document.odpocitavadlo.cifernik.value=celkom;
setTimeout("odpocitavanie()",1000);
}
// -->
</script>
</head>
<body onLoad="odpocitavanie();">
<form name="odpocitavadlo">
<b>Kolko casu nam zostava do roku 2000 ?</b><br>
<input type="text" name="cifernik" size="57">
</form>
</body>
</html>
Záverom... Pri práci s dátumom a časom v JavaScripte je potrebné si uvedomiť, že pracujeme s lokálnymi časovými údajmi. Tzn. že využívame časové údaje z počítača na ktorom sa skript spustí. Oproti dátumovým cgi skriptom to v sebe skrýva výhodu, pretože sa nemusíme starať v akom časovom pásme žije návštevník našej stránky, keďže pracujeme s časom, ktorý má nastavený vo svojom operačnom systéme. Veľa úspechov s JavaScriptom vám želá, Rastislav Škultéty PRÍLOHA: Zoznam základných metód objektu Date()
NAHORU
|