HTML dělá kostru, CSS vzhled. Když ale chceš, aby stránka po kliknutí něco udělala (spočítala, ukázala, schovala), potřebuješ program. Ten se na webu píše v JavaScriptu.
Postavíme malou kalkulačku spropitného. Při tom poznáš všechno základní: proměnné, výpočty, podmínky, funkce a reakci na kliknutí.
<script src="app.js"></script>, obvykle na konec <body> nebo s atributem defer.const = hodnota se znovu nepřiřadí. let = hodnotu jde později změnit. Starší var se v novém kódu nepoužívá.const sazba = 0.1; let celkem = 0;console.log(x) do něj vypíše hodnotu; slouží k ladění.console.log(celkem);true/false), undefined (zatím bez hodnoty), null (záměrně nic), object (složená data, i pole).450 je number, "450" je string.const ucet = 450; const sazba = 0.1; const celkem = ucet + ucet * sazba; console.log(celkem); → 495. Násobení má přednost před sčítáním, jako v matematice.if (podmínka) { … } se provede, jen když je podmínka pravdivá. Jinak se provede větev else.if (celkem > 1000) { … } else { … }=== porovná hodnotu i typ. == před porovnáním typy převádí, a to vede k překvapením. Používej === a !==.5 === "5" je false, ale 5 == "5" je true.return vrátí výsledek.function spropitne(ucet, sazba) { return ucet * sazba; }function celkem(ucet, procenta) { return Math.round(ucet * (1 + procenta / 100)); }. Pro celkem(389, 15): 389 · 1,15 = 447,35 → zaokrouhleno 447.click), psaní (input), odeslání formuláře (submit). Posluchač je funkce, kterou na událost navážeš metodou addEventListener.tlacitko.addEventListener('click', spocitej);const btn = document.querySelector('#spocitej');spocitej, která přečte hodnoty, spočítá a zobrazí výsledek.btn.addEventListener('click', spocitej);spocitej() by ji spustilo hned.Roztřiď hodnoty podle datového typu. Pozor na uvozovky.
"450" plus 50 dá 500."450" + 50 dá text "45050". Nejdřív převeď na číslo: Number("450") + 50 = 500.Hodnota z formuláře je vždy string. Operátor + se stringem spojuje texty místo sčítání.
const, let), rozhoduješ podmínkou if s porovnáním ===, opakovaný kód balíš do funkcí s return a na akce uživatele reaguješ přes addEventListener.Programovací jazyk je jako stavebnice: má pár druhů dílků a z nich se skládá všechno. Tady jsou dílky JavaScriptu přehledně, každý s krátkou ukázkou.
<script src="app.js" defer></script> v <head>.2 + 3). Příkaz je pokyn, co udělat (let x = 2 + 3;). Příkazy se ukončují středníkem.console.log(2 + 3); vypíše 5.let – smí se přepsat, const – nesmí se znovu přiřadit.let body = 0; body = body + 10;| Typ | Příklad | Poznámka |
|---|---|---|
| number | 7, 3.5, -2 | celá i desetinná čísla, desetinná tečka |
| string | 'Ahoj', "Ahoj", ` Ahoj ${jmeno} ` | text; ve zpětných apostrofech jde vkládat hodnoty |
| boolean | true, false | pravda / nepravda |
| undefined | let x; | proměnná bez hodnoty |
| null | let vybrany = null; | záměrně prázdná hodnota |
| object, pole | { jmeno: 'Eva' }, [1, 2, 3] | složená data |
| Operátor | Význam |
|---|---|
+ - * / % | počty; % je zbytek po dělení |
===, !== | rovná se / nerovná se (i typem) |
< > <= >= | porovnání |
&&, ||, ! | a zároveň, nebo, negace |
if (podmínka) { … } else { … } – provede jednu z větví podle toho, zda je podmínka pravdivá.if (vek >= 18) { … }for se hodí, když víš kolikrát; while, dokud platí podmínka; for…of projde všechny prvky pole.for (let i = 1; i <= 3; i++) { console.log(i); } vypíše 1, 2, 3.return vrátí výsledek a funkci ukončí. Zapisuje se klasicky nebo jako šipková funkce.function dvakrat(x) { return x * 2; } nebo const dvakrat = (x) => x * 2;prvek.addEventListener('click', funkce) zařídí, že se funkce spustí při každém kliknutí.btn.addEventListener('click', () => console.log('klik'));let soucet = 0; for (const n of [4, 7, 9]) { if (n % 2 === 1) { soucet += n; } } console.log(soucet);n % 2 === 1 platí pro lichá čísla: 7 a 9. soucet = 0 + 7 + 9 = 16.console.log('5' + 3), console.log('5' - 3) a console.log(5 === '5')?+ se stringem spojuje texty. 2 – - text převede na číslo. false – === porovnává i typ a number není string.10 % 3 – 1 (zbytek po dělení)typeof 'abc' – 'string'true && false – false!true – falselet x; console.log(x); – undefinedNejdřív si výsledek tipni v hlavě, pak kartu otoč. V konzoli prohlížeče (F12) si to můžeš i vyzkoušet.
const pocet = 1; pocet = pocet + 1; – vždyť je to proměnná.let: let pocet = 1; pocet = pocet + 1;const zakazuje nové přiřazení. Druhý řádek skončí chybou TypeError: Assignment to constant variable.
let, const), typy (number, string, boolean, undefined, null, object), operátory s porovnáním ===, podmínky, cykly, funkce s return a události přes addEventListener.