Programovací tahák

Základy jazyka

V programu jsou napsané příkazy.

Proměnná

var jedna_vec = 17, druha_vec = "abcd";

V každé proměnné je uložená nějaká hodnota, kterou můžeme číst a měnit. Slovem var říkáme počítači, že chceme vyrobit novou proměnnou – napoprvé ji označíme a pak už ji jen používáme bez tohohle slovíčka. Podtržítka v názvu proměnných jsou jenom pomůcka pro čitelnost, dvě proměnné z ukázky výše spolu tedy vůbec nesouvisejí.

Funkce

Funkce je kus programového kódu, který můžeme spustit, a vrátí nám nějaký výsledek. Funkce může mít nějaký počet parametrů, kterými jí říkáme, co má dělat.

function secti(cislo, druhe_cislo) {
	return cislo + druhe_cislo;
}

Parametry jsou v kulatých závorkách ( ), spustitelný kód je ve složených závorkách { }. Když zavoláme příkaz return, funkce skončí a do volajícího kódu předá nějaký výsledek.

Další způsob, jak zapsat funkci

Funkce jde sama o sobě uložit do nějaké proměnné. To je užitečné, když máme například oknu webového prohlížeče nastavit, jaký kód se má spustit po stisku klávesy:

window.onkeydown = function() {
	alert("stiskl jsi klávesu.")
}

Podmínka

if (podmínka) { kód... }
Pokud je podmínka true, kód se provede, jinak ne.

Cyklus while

while (podmínka) { kód... }
Pokud je podmínka true, kód se provede a pak se zkusí totéž znovu.

Cyklus for

for (začátek; podmínka; krok) { kód... }
Nejprve se provede začáteční příkaz a zkusí se podmínka. Pokud podmínka platí, provede se kód a nakonec se spustí krok. Potom se znovu zkusí podmínka a pokud ještě platí, provede se kód a krok znovu, a tak pořád dokola.

Pole

Pole je jeden z typů dat, který můžeme uložit do nějaké proměnné. Je to vlastně seznam položek. Jejich počet si určíme podle potřeby sami.

var arr = [1, 2.5, false];

K jednotlivým položkám můžeme přistupovat podle jejich pořadí v poli, první má index 0. Můžeme z pole jak číst:

if (arr[0] == 1) { // tenhle kód se provede }
...tak do něj zapisovat:
arr[0] = 5;
Položku na konec pole přidáme jeho funkcí push(položka), například:
arr.push("konec");
Poslední položku pole utrhneme jeho funkcí pop():
arr.pop();

Kreslení

Každý prvek stránky máme od výroby uložený v proměnné, která se jmenuje stejně jako id toho prvku. Zajímá nás prvek <canvas>, a v příkladech z hodiny mívá id=obraz. Nástroje na kreslení získáme jeho funkcí getContext, například:

var ctx = obraz.getContext("2d");

Obdélník

Obdélník nakreslíme funkcí fillRect(x, y, šířka, výška), například:

ctx.fillRect(100, 100, 10, 10);

Čára

Kreslení čáry je na tři kroky:

  1. řekneme počítači, že se chystáme kreslit funkcí beginPath(),
  2. postupně popíšeme celou čáru funkcemi moveTo(x, y) a lineTo(x, y),
  3. čáru necháme obtáhnout funkcí stroke().
Například:

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(70, 80);
ctx.lineTo(120, 0);
ctx.stroke();

Barva

Barvu čáry nastavíme vlastností strokeStyle, barvu výplně vlastností fillStyle. Například:

ctx.strokeStyle = "black";
ctx.fillStyle = "yellow";