| Hlavní nabídka: |
Základy
Reference
Příklady
|
|
|
Kalendář
V tomto příkladě si ukážeme, jak na svých stránkách zobrazit kalendář.
Zdrojový kód:
<HTML>
<HEAD>
<TITLE>Kalendář</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
dn=["pondělí","úterý","středa","čtvrtek",
"pátek","sobota","neděle"];
me=["Leden","Únor","Březen","Duben","Květen","Červen","Červenec",
"Srpen","Září","Říjen","Listopad","Prosinec"];
pd=[31,28,31,30,31,30,31,31,30,31,30,31];
function den(i) { return (i==0 ? 7:i) }
function kalendar()
{
dnes=new Date(); rok=dnes.getFullYear();
if ((rok%4==0 && rok%100!=0) || (rok%400==0)) pd[1]=29;
s='<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="1">';
s+='<TR><TH COLSPAN="7">';
s+=me[dnes.getMonth()]+' '+rok+'</TH></TR>';
s+="<TR><TH>Po</TH><TH>Út</TH><TH>St</TH><TH>Čt</TH>";
s+="<TH>Pá</TH><TH>So</TH><TH>Ne</TH></TR><TR>";
dnes.setDate(1); prvniDen=den(dnes.getDay()); sloupec=1;
for(i=1;i<prvniDen;i++) {
s+="<TD> </TD>";
sloupec++; }
dnes=new Date(); dnesek=dnes.getDate();
posledniDen=pd[dnes.getMonth()]
for(i=1;i<=posledniDen;i++)
{
s+="<TD>";
if (sloupec==6) s+='<FONT COLOR="blue">';
if (sloupec ==7) s+='<FONT COLOR="red">';
if (i==dnesek) s+='<FONT COLOR="green">';
s+="<CENTER>"+i+"</CENTER></FONT></TD>";
sloupec ++;
if (sloupec ==8)
{
if (i!=posledniDen) s+="</TR><TR>";
sloupec =1;
}
}
if (sloupec!=1) for (i=sloupec;i<=7;i++) s+="<TD> </TD>";
s+="</TR></TABLE>";
document.write(s);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="kalendar();">
</BODY>
</HTML>
Výsledek:
Pro výsledek klikněte ZDE.
Vysvětlení činnosti:
Tento příklad je trochu náročnější a proto věnujte tomuto textu více pozornosti. Nejdříve si vysvětlíme, co má být výsledkem scriptu. Jeho výsledkem má být zobrazení tabulky kalendáře pro aktuální měsíc. A teď už se pusťme do vysvětlování syntaxe. Nejdříve jsme si vytvořili 3 pole - dn, me a pd. Pole dn obsahuje jednotlivé dny v týdnu, pole me obsahuje jednotlivé měsíce v roce a pole pd obsahuje počty dní v daných měsících. Pro další krok - funkci den(i) si musíme říci, jaké nám hraje náhoda do karet. Jelikož číslování začíná v JS od 0 a za začátek týdne se bere neděle, stačí když pomocí podmínky ? : ve funkci den(i) zadáme scriptu, aby v případě hodnoty 0 přiřadil hodnotu 7. V ostatních případech zůstane hodnota stejná. Nyní se už dostáváme k hlavní funkci a tou je kalendar(). V ní si nejdříve inicializujeme dvě proměnné. Proměnnou dnes, které přiřadíme objekt Date() a proměnnou rok, které přiřadíme metodu pro získání plného formátu roku - čili např. 2002. Rovněž v této funkci ošetříme problematiku přestupného roku. Použijeme k tomu podmínku if. Ta bude platit, jestliže zbytek po dělení roku čtyřmi bude nula, ale zároveň nesmí zbytek 0 po dělení 100. Bude také platit když bude zbytek 0 po dělení 400. Tato pravidla vychýzí z našeho kalendáře. Poté už si inicializujeme proměnnou s, ve které budou obsaženy informace pro výpis na stránce. Nejdříve ji přidáme tagy pro vytvoření tabulky. Zde uvedeme aktuální měsíc a rok a dny v týdnu. Měsíc zjistíme pomocí metody pro zjištění měsíce, načež tuto hodnotu promítneme do pole a výsledkem bude slovy vyjádřený měsíc. Rok zjistíme jen tím, že vložíme proměnnou rok, kterou jsme už předtím inicializovali. Další část scriptu nastaví den v měsíci na 1 a zjistí den v týdnu. Poté se ještě inicializuje proměnná sloupec s hodnotou jedna (viz dále). Poté již přikročíme k samotnému vytváření buněk tabulky s hodnotami dnů. Nejdříve ale musíme doplnit buňky, ve kterých nebude žádná hodnota. K tomu použijeme podmínku for, která bude platit, dokud se i nevyrovná hodnotě proměnné prvniDen, ve které máme uložen aktuální den v týdnu. Ta zároveň zvýší hodnotu proměnné sloupec a tím se posune vytvoření buňky na další den. Dále si inicializujeme proměnnou dnesek, která bude mít hodnotu dne v měsíci. Další proměnnou bude posledniDen, která zjistí pomocí pole pd, kolik má aktuální měsíc dnů. To využijeme v příkazu for, který bude platit, dokud se i nevyrovná hodnotě právě proměnné posledniDen. V tomto příkazu ještě zapíšeme tři podmínky. Jelikož chceme nějak odlišit soboty, neděle a dnešek, tak využijeme podmínky if, které pak zapíší do proměnné s nejen danou hodnotu ale i tag pro změnu barvy písma. V podmínce využijeme opět proměnnou sloupec. Rovněž musíme nějak zajistit aby se buňky neskládali za sebou, ale pod aktuální dny. K tomu opět využijeme podmínku if. Ta se zaktivuje, když bude proměnná sloupec mít hodnotu 8. V takovém přídě ještě zjistí, jestli náhodou není i z příkazu for už rovna proměnné posledniDen a pokud tedy není zapíše do proměnné s tagy pro ukončení aktuálního řádku a vytvoření nového a proměnné sloupec opět přiřadí hodnotu 1. Další část scriptu ošetřuje prázdné políčka na konci měsíce. Syntaxe je podobná jako při ošetřování prvních buněk. Nakonec proměnné s přiřadíme ukončení řádku a tabulky a následně ji necháme vypsat. Poté jen přiřadíme tagu body ovládač událostí onLoad, který po načtení aktivuje funkci kalendar().
11.07.2002 | Příklady | David Havlíček
|
|
Dnes je 15. 11. 2024
Svátek má Leopold | |
| Bleskové aktuality: |
10.12.2002 Dlouho jsme tu neměli příklady, tak co kdybychom si dneska jeden dali?
07.12.2002 Poslední operáty, které si představíme, jsou speciální.
02.12.2002 Po delší pauze si představíme další operátory - řetězcové.
17.11.2002 Next operátory jsou přiřazovací.
10.11.2002 Jedněmi z posledních operátorů jsou porovnávací.
02.11.2002 Už jste slyšeli o logických operátorech? Pár jich taky je.
29.10.2002 Dalšími operátory jsou bitové.
26.10.2002 Dnes si představíme první z řady operátorů - aritmetické operátory.
24.10.2002 Další částí referencí jsou příkazy.
18.10.2002 Dnes se mrkneme na referenční přehled funkcí.
12.10.2002 Window je objekt, který má snad nejvíce metod a vlastností, tak se mu dnes podíváme na zoubek.
06.10.2002 Netradičně v neděli další objekt - string.
28.09.2002 Další sobota. Další objekt - screen.
21.09.2002 Hodně používáný je objekt navigator. Proto se na něj dneska zaměříme.
14.09.2002 Po týdenní pauze další referenční článek o objektu - tentokrát Math.
07.09.2002 Objekt location bude náš dnešní cíl.
04.09.2002 Na paškál si tentokrát vezmeme objekt history.
|
|
|
