Funkce

Blok příkazů můžeme označit jako funkci. Pomáhá to, aby kód byl přehledný – funkce může mít nějaké smysluplné jméno a můžeme ji spouštět opakovaně, jak se to hodí.

function jméno funkce(parametry) {
	kód funkce;
}

Kód funkce je tím zabalený a sám od sebe se nespustí, dokud to nezadáme jako příkaz. Když chceme funkci spustit, slovíčko function už nepíšeme:

jméno funkce(parametry);

Každý parametr také smysluplně pojmenujeme (například x). Pokud je parametrů víc, píšeme mezi ně čárku a musíme je pokaždé psát ve stejném pořadí. Funkce žádné parametry mít nemusí, ale i v tom případě musíme napsat kulaté závorky ().

V téhle ukázce jsme použili tag <canvas>, do kterého jde kreslit a později v něm dokonce budeme programovat celé hry. Pracovali jsme s jeho vlastností getContext a dále s vlastnostmi fillStyle a fillRect. Protože ten kód je uvnitř funkce namalujCtverec, naštěstí mu vůbec nemusíte rozumět. Stačí chápat, že ta funkce kreslí barevný čtverec na zadané souřadnice x, y.

Zkuste namalovat rasta vlajku: červená, žlutá, zelená těsně vedle sebe.

Události

Funkci nemusíme spouštět přímo, je možné ji také nastavit pro okamžik, kdy nastane nějaká událost. Spuštění funkce má pak na starosti prvek HTML stránky, ve kterém událost nastala.

prvek.onudálost = jméno funkce;

Každý prvek umí hlídat události, které se ho nějak týkají. Například window.onload se spustí ve chvíli, kdy se celá webová stránka načte.

Funkce spouštěná při nějaké události má vždycky jeden parametr, a bývá zvykem ho pojmenovat event. V ukázce jsme použili vlastnost event.target. Její hodnota je přímo ten prvek, na který někdo kliknul – v tomhle případě vždycky tlačítko.

Používáme událost onclick, která nastane při každém kliknutí na tlačítko. Všimněte si, že funkci varovani nechceme sami spouštět, a proto ji píšeme bez závorek.

Časovače

Program nemůžeme nechat běžet pořád, protože by to vypadalo, že počítač zamrznul. Když chceme třeba předstírat, že se něco plynule hýbe, musíme to posouvat po malých krocích a mezi nimi vždycky nechat počítač odpočinout. Pomocí časovače jde spouštět funkci pravidelně třeba stokrát za vteřinu.

window.setInterval(funkce, milisekundy);

Funkce se bude pravidelně spouštět vždy po tolika milisekundách (tisícinách vteřiny), kolik zadáte. Pokud chcete, aby se něco spustilo třeba sedmkrát za vteřinu, musíte si spočítat milisekundy = 1000 / 7.

Oba časovače v tomhle případě mění barvu, takže se mezi sebou docela složitým způsobem perou. Vyzkoušejte si, co se stane, když nastavíte oba časovače na skoro stejný čas.