Milí účastníci webové akademie, v tomto kurzu si možná úplně poprvé v životě vyzkoušíte co je to programování a osaháte si svůj první programovací jazyk. Programování ze začátku může působit jako velmi tajemný svět plný zlých nástrah a neproniknutelných složitostí. Nutnost zapojovat možná trochu zaprášená zákoutí vašeho mozku může ze začátku být velká výzva. Proto společně vykročíme zvolna a krůček po krůčku. Budeme věnovat péči každému jednotlivému tématu tak, abyste do něj dokázali skutečně proniknout a nepřipadali si jako na jiné planetě. Vězte, že po chvíli se možná trochu zrezivělá mozkové kolečka začnou točit lehčeji a programování vám bude přinášet velkou radost z tvoření.

Na začátku počítáme s tím, že jste programováním zcela nepolíbeni. Není tedy od věci trochu si přiblížit, jak programátorský svět vlastně funguje, abyste si dokázali představit do jakých vod se chystáte vrhnout. Ještě před tím, než spustíte svůj první JavaScriptový příkaz, si společně osaháme jak programátoři přemýšlejí a jaké problémy v praxi doopravdy řeší.

Co je to programování

Programátora si možná představujete jako týpka či týpčici, který/která sedí před počítačem ve ztemnělém sklepení nebo hipsterské kavárně a do klávesnice buší nesrozumitelné tajemné kódy.

Programátor

Je pravda, že psaní kódu je velkou částí programátorské práce. Podstata programování ovšem tkví v něčem jiném. Například takový spisovatel jistě tráví hodně času psaním textu, zvládat dobře česky psát však není jádro jeho umění. Dobrý spisovatel či spisovatelka především umějí vybudovat poutavý příběh, který čtenáře zaujme a vtáhne. Podobně programátorům také zdaleka nestačí umět kódit. Musí především umět přemýšlet a řešit problémy, což znamená mít dobré logické a analytické myšlení.

Problém spolubydlení

Logické a analytické myšlení rozhodně není spojeno jen s programo­váním, matematikou apod. Spousta problémů přímo ze života vyžaduje, abychom se dokázali nad řešením opravdu zamyslet. Na následujícím příkladu si názorně ukážeme, jak takové zamyšlení vypadá z programá­torského hlediska.

Mějme následujících šest studentů, kteří společně bydlí v jednom bytě.

Studenti

Jak často bývá zvykem, tito spolubydlící se dohodli, že některé spotřební věci budou nakupovat vždy pro všechny, aby si každý nemusal kupovat vlastní mouku, vlastní toaleťák a podobně. Po čase tedy vznikne tabulka nákupů podobné této.

JménoVěcČástka
PetrPrací prášek240 kč
OndraSavo80 kč
PavlaToaleťák65 kč
ZuzkaMýdlo50 kč
PavlaZávěs do koupelny350 kč
LiborPivka na kolaudačku124 kč
PetrPytle na odpadky75 kč
MíšaUtěrky na nádobí130 kč
OndraToaleťák120 kč
MíšaPečící papír30 kč
ZuzkaSavo80 kč
PetrTapeta na záchod315 kč
OndraToaleťák64 kč

Představme si, že naši studenti se chtějí rozestěhovat a potřebují se finančně vyrovnat. Někteří totiž přirozaně utratili za společné věci o něco víc než jiní. Váš úkol je zamyslet se nad tím, jakým postupem takového vyrovnání dosáhnout. Je zde však několik důležitých pravidel a omezení.

Samotné zpracování tabulky nebudete dělat vy, nýbrž člověk, o kterém bychom mohli říct, že je to pečlivý blbec. To znamená, že není vůbec schopen přemýšlet sám za sebe. Je pouze schopen do puntíku plnit vaše pokyny jsou-li dostatečně detailní a přímočaré. Tento náš úřednický blbec má navíc k dispozici pouze tužku, papír a kalkulačku. Kalkulačku k tomu, aby mohl spolehlivě provádět jednoduché výpočty a tužku a papír, aby si mohl poznamenávat mezivýsledky.

Tužka, papír, kalkulačka a blbec

Počítač ve svojí nejzákladnější podstatě funguje přesně jako náš blbec. Nic za vás nevymyslí, pouze slepě vykonává postup řešení, který musíte do detailu popsat vy. Papír pak pro nás představuje pamět počítače a kalkulačka procesor.

1

Problém spolubydlení

zapni hlavu

Sestavte přesný postup práce pro našeho hloupého úředníka tak, aby dokázal zpracovat tabulku výdajů libovolné velikosti s libovolným počtem účastníků. Výsledkem zpracování tabulky by měl být postup jak zajistit finanční vyrovnání všech účastníků. Mějte na paměti následující body.

  1. Abychom se přiblížili komunikaci s počítačem, váš popis řešení musí sestávat pouze z jednoduchých kroků s tužkou, papírem a kalkulačkou. Pokud například blbci řeknete, aby zjistil kolik různých jmen se v tabulce nachází, nebude vůbec vědět, co má dělat. Neřekli jste mu totiž, jak má použít tužku, papír a kalkulačku k tomu, aby splnil váš příkaz.
  2. Finančního vyrovnání se účastní všichni účastníci, tabulka však nemusí vždy obsahovat všechna jména. Může se stát, že některý účastník nekoupil nikdy nic, takže v tabulce vůbec není uveden.

První JavaScript příkazy

Po dlouhých povídáních konečně přichází ten čas, kdy si začneme ušpiníme ruce skutečným JavaScriptem. Nejdříve si ovšem pořádně ujasníme terminologii. JavaScript je programovací jazyk, tedy sada nějakých pravidel jak sestavovat textové příkazy pro počítač. Pokud chceme, aby náš stoj tyto příkazy vykonal, protřebujeme takzvaný JavaScript runtime. To je program, který čte naše JavaScriptové příkazy a jeden za druhým je provádí.

Každý webový prohlížeč má v sobě JavaScript runtime, můžeme tedy naše první JavaScriptové příkazy psát rovnou v prohlížeči. Stačí otevřít takzvané Developer Tools.

Hodnoty a operátory

Každý počítač je ve svojí nejniternější podstatě jen hrozně rychlá kalkulačka. Proto je přirozené, že si v JavaScriptu nejdříve vyzkoušíme počítání. Do žádné tvrdé matematiky se však pouštět nebudeme. Zcela vám postačí znalosti nabyté ve školce. Můžete to JS konzole rovnou zkusit napsat následující příkazy

> 12 + 5
17
> 12 - 5
7
> 12 * 5
60
> 12 / 5
2.4

Všimněte si, že vždy, když v konzoli napíšete příkaz a stisknete klávesu Enter, pošlete tím JavaScriptu příkaz a ten vám ihned odpoví výsledek. Zatím jsme sice nic závratného nespočítali, použili jsme ovšem dva zcela základní stavební bloky všech programů: hodnoty values a operátory operators . Hodnoty jsou v našem případě čísla, později však uvidíme ještě další druhy hodnot, které už na kalkulačce nepotkáte.

:::warn Pozor na to, že ve všech programovacích jazycích (s výjimkou MS Excel) se destinná čísla píší s tečkou, nikoliv s čárkou. :::

Operátory jsou v našem případě sčítání, odčítání, násobení a dělení. Je potřeba si zvyknout na to, jakými symboly se JavaScriptu zapisují. Možná budete muset malinko prohledat klávesnici, než najdete například dopředné lomítko nebo hvězdičku.

Kromě výše zmíněných nabízí JavaScript dva další zajímavé operátory: mocnění a zbytek po dělení, tzv. modulo.

> 2 ** 4
16
> 12 % 5
2

Mocnění si nejspíš pamatujete ještě ze základní školy. Modulo však může být překvapení obzvlášť proto, že se zapisuje symbolem procenta. Výsledek této operace je zbytek po celočíselném dělení. Tento operátor se hodí v různých situacích. Můžeme pomocí něj například zjistit, zda je číslo sudé, tedy zbytek po dělení dvěma je roven nule.

Z operátorů a hodnot můžete samozřejmě stavět mnohem složitější konstrukce třeba i s použitím závorek.

> 5 * (9 + 7) ** (1/2)
20

Konstrukcím vytvořeným z hodnot a operátorů se odborně říká výrazy expressions . Pokud necháme JavaScript spočítat výsledek výrazu, získáme tak jeho hodnotu. Každý výraz tedy má svoji hodnotu a JavaScript runtime nám ji rád sdělí, když mu výraz pošleme v konzoli. Je dobré zde zmínit, že ne všechny konstrukce v JavaScriptu jsou výrazy. To se však ukáže jako důležité až později.

Řetězce

Pokud chceme v JavaScriptu pracovat s textem, použijeme hodnotu, které se říká řetězec string . Můžeme pak psát například

> 'Pavel'
"Pavel"
> 'Prací prášek'
"Prací prášek"
> "I'am awesome"
"I'am awesome"
> 'Řekl: "ahoj"'
"Řekl: "ahoj""

Textové řetězce vždy uzavíráme do uvozovek. V JavaScriptu můžete používat jak apostrofy (jednoduché uvozovky), tak dvojité uvozovky, z hlediska funkčnosti programu je to jedno. Můžete si tak pomaličku začít budovat svůj programátorský styl a používat ty uvozovky, které se vám líbí. Občas se dvojité uvozovky hodí pokud chceme mít uvnitř řetězce například apostrof. Pro tento případ si však později ukážeme obecnější techniku.

Textové řetězce jdou sčítat podobně jako čísla, můžete tedy psát například

> 'Digitální akademie' + ' Web'
'Digitální akademie Web'
> 'Digitální akademie' + ' ' + 'Web'
'Digitální akademie Web'
> 'Digitální akademie' + ''
'Digitální akademie'

Všimněte si v druhém příkladu řetězce, který obsahuje pouze mezeru. V třetím případě dokonce vidíme řetězec, který neobsahuje vůbec nic. To je takzvaný prázdný řetězec empty string . Chová se podobně jako nula při sčítání čísel a bude se nám pozdějí hodit v různých situacích.

Proměnné

Při složitějších operacích a výpočtech často vyvstane potřeba si nějaký mezivýpočet uložit pro pozdější použití. K tomu nám slouží takzvané proměnné variables . Proměnná je jakási pojmenovaná krabička nebo šuplík, do kterého si můžeme uložit nějakou hodnotu, abychom ji neztratili a mohli ji používat v dalších výpočtech.

Abychom si procvičili zajímavé operátory, zkusíme vyřešit následující úlohu. Mějme čas v hodinách zadaný ve 24-hodinovém formátu. Tři hodiny odpoledne tedy píšeme jako 15h. Nyní chceme spočítat, kolik hodin bude po uplynutí doby zadané také v hodinách. Například jaký bude čas po uplynutí 15 hodin?

> const cas = 13
> const novyCas = (cas + 15)

Každá proměnné v JavaScriptu musí mít své jméno. To by mělo vystihovat, co je v ní uloženo. Pokud chceme používat nějakou promennou, musíme ji nejdříve vytvořit, což se dělá pomocí klíčového slova const. Takovou proměnnou pak můžeme použít v libovolném výrazu tak, že prostě uvedeme její jméno.

Většinu proměnných budeme používat tak, že jim při vytvoření přiřadíme nějakou hodnotu a tato hodnota už v proměnná zůstane až do konce jejího života. Občas se však stane, že potřebujeme hodnotu uloženou v nějako proměnné změnit. V takovém případě musíme proměnnou vytvořit pomocí slovíčka let.

> let sazba = 500
> let vyplata = 8 * 21 * sazba
> sazba = 600

Pokud měníme hodnotu v proměnné, už nepoužíváme const ani let. Zde je dobré si zapamatovat několik důležitých věcí.

Preferujte const

Proměnné vytvořené pomocí const měnit nelze. U dobrých programátorů je zvykem vytvářet proměnné téměř výhradně pomocí const a používat let pouze v případě, že k tomu máme dobrý důvod. Čím méně proměnných lze měnit, tím menší je totiž riziku vzniku nežádoucích chyb v programu.

JavaScript není Excel

Dejte pozor na to, že do proměnné se jako do šuplíku ukládá pouze hodnota a nikoliv celý výraz. Všimněte si, že v příkladu výše jsem změnili hodnotu proměnné sazba. Po této změně bude v proměnné vyplata pořád původní hodnota. Pokud chceme obsah této proměnné aktualizovat, musíme příkaz spustit znova.

> vyplata = 8 * 21 * 500

Pojmenování proměnných

Už od úplných začátků s programováním je dobré učit se dobrým návykům, které budou později prospěšné nejen vám, ale hlavně lidem ve vašem okolí. Jedním z takových návyků je správné pojmenovávání proměnných.

  1. Název proměnné by neměl začínat velkým písmenem, např. Pocet. Takové názvy jsou rezervované pro speciální typy proměnných, ke kterým se v tomto kurzu dostaneme až téměř na konci.
  2. Název proměnné by neměl obsahovat diakritiku, např. počet. Programovací jazyky vznikaly v anglickém prostředí, kde se diakritika nepoužívá, takže si s ní většina jazyků neporadí.
  3. Víceslovné proměnné nesmí obsahovat mezeru, např. pocet hodin. To by si JavaScript myslel, že to jsou dvě proměnné za sebou a nevěděl by co s tím. Pokud chcete proměnnou s více slovy, použijte takzvanou velbloudí notaci camel case pocetHodin nebo hadí notaci snake case pocet_hodin.
  4. Vždy proměnnou pojmenujte tak, aby její název jasně napovídal, co se uvnitř ní nachází. Například proměnná pocet_hodin jasně říká, že v ní bude uložen asi nějaký počet hodin. Můžeme podlehnout touze název proměnné zkrátit například na pcthdn, aby se nám lépe psala. Až ovšem někdo další bude takový program číst, bude mlátit hlavou do stolu, cože proboha znamená zkratka pcthdn.
  5. Naposledy je dobré si uvědomit, že programy i programátoři se téměř vždy pohybují v mezinárodním prostředí. Takže je vždycky lepší pojmenovávat proměnné anglicky. V tomto kurzu ještě tohle pravidlo trošku rozvolníme, ale i tak si můžete začít zvykat na proměnné s názvem number_of_hours.

Cvičení - hodnoty a proměnné

2

Výplata

pohodička
  1. Spočítejte svůj měsíční příjem víte-li, že pracujete 7 hodin denně se mzdou 250 Kč na hodinu. Řekněme, že měsíc má 21 pracovních dní.
  2. Uložte si počet pracovních hodin za den do proměnné hodin, hodinovou mzdu do proměnné mzda a počet pracovních dní do proměnné dni. Spočítejte svou výplatu s použitím těchto proměnných.
  3. Pokud pracujete na živnostenský list, můžete si odečíst 60% příjmů jako paušál a ze zbytku zaplatíte 15% daň. Uložte si tyto hodnoty do proměnných pausal a dan a spočítejte svůj příjem po zdanění.
3

Ultramaraton

to dáš

Představme si, že jste pořadatelé ultramaratonského závodu. Závod začiná ve tři hodiny odpoledne, což ve 24-hodinovém formátu zapíšeme jako 15. Nejlepší běžec zvládne vaši brutální trasu za 10 hodin. Doběhne tedy v jednu hodinu ráno, v našem formátu zapsáno jako 1.

Uložte si čas startu závodu do proměnné start. Do proměnné delka si uložte délku závodu pro nějakého běžce. Klidně může být pomalejší než náš šampion. Do proměnné konec spočítejte, v kolik hodin závod pro našeho běžce skončí. Vyzkoušejte různé délky a ověřte, že váš postup funguje.

4

Příjem divadla

to dáš
  1. Jeden lístek do divadla Pěst na oko stojí 12 euro. Spočítejte měsíční příjem divadla ze vstupného přichází-li průměrně 174 návštěvníků na jedno představení a divadlo hraje 15 představení měsíčně. Uložte výsledek do proměnné prijem.
  2. Divadlo se rozhodlo prodávat studentské vstupné ve výši 65% plného vstupného. Jak se změní měsíční příjem divadla pokud víme, že 40% návštěvníků jsou studenti?
Bonusová cvičení
Nepovinné úložky, které můžete řešit pokud máte chuť na větší výzvu nebo si chcete látku procvičit víc do hloubky.
5

Úroky

to dáš

Fíha banka a.s. nabízí na svých stránkách spořící účet s úrokem 2,4%. Když si na takový účet uložíte 1 000 000 kč, kolik peněz nastřádáte za 10 let?

6

Nový koberec

to dáš

Do pokoje o tvaru čtverce a rozloze 30m2 potřebujeme koupit nový koberec. Jakou délku má mít strana koberce? Vejde se nám srolovaný do dodávky s nákladovým prostorem dlouhým 5m?

Volání funkcí

Pouze s proměnnými, hodnotami a operátory bychom se v programování daleko nedostali. Často budeme potřeboval vykonat nějakou složitější operaci než jen matematický výpočet. Pokud takovou operaci programátoři potřebují často, šance je, že pro ni existuje funkce function .

Funkce je kousek programu řešící nějakou konkrétní úlohu, která se často opakuje. Příkladem může být například zaokrouhlování desetinných čísel na celá čísla. To je operace, která se hodí velmi často a bylo by zbyteční ji programovat pořád znova. V JavaScriptu proto máme k dispozici funkci jménem Math.round. Pokud chceme funkci použít, napíšeme její jméno a do kulatých závorek vložíme hodnotu.

> Math.round(3.14)
3

Hodnotě uvnitř kulatých závorek říkáme vstup input funkce. Spuštění funkce se říká volání call . Jakmile funkce dokončí operaci, vrátí return nám takzvaný výstup output . V programátorském žargonu tedy říkáme, že když zavoláme funkci s nějakým vstupem, ona nám vrátí výstup. Podobně jako operace s hodnotami a proměnnými, volání funkce je také výraz. Volání funkce také můžeme použít uvnitř libovolného jiného výrazu. Navíc vstup pro funkci taky můžeme vytvořit pomocí výrazu. Nabízí se tedy mnoho způsobů, jak vytvářet složitější výrazy, jak například tento.

> 17 % Math.round(30 ** 0.5)
2

Další užitečné funkce

JavaScript obsahuje spousty a spousty funkcí, díky kterým můžeme provádět mnoho užitěčných a zajímavých věcí. Budeme je postupně společně objevovat během celého kurzu. Takto z kraje si ukážeme jen ty nejzákladnější.

Pokud bychom místo klasického zaokrouhlování chtěli zaokrouhlovat vždy dolů nebo vždy nahoru, můžeme použít funkce Math.floor a Math.ceil.

> Math.floor(3.9)
3
> Math.ceil(3.1)
4

Funkce, se kterou si lze užít více zábavy je Math.random. Ta při každém zavolání vrátí náhodné desetinné číslo mezi 0 a 1.

> Math.random()
0.3533144240115158
> Math.random()
0.30269146855422213
> Math.random()
0.3730206392247666

Chytrým použitím zaokrouhlování a trochou matematiky můžeme pomocí této funkce generovat náhodná celá čísla například v rozmezí 0 až 9.

> Math.floor(Math.random() * 10)
8
> Math.floor(Math.random() * 10)
2
> Math.floor(Math.random() * 10)
5

Doporučené úložky na doma

7

Délka filmu

to dáš
  1. V programu kin se často uvádí délka filmu v minutách. Například rozšířená verze filmu Pán prstenů: Dvě věže trvá 223 minut. My bychom ovšem délku filmu raději věděli v hodinách a minutách. Za použití funkcí a operátorů z této lekce spočítejte, kolik hodin a minut trvá film Pán prstenů: Dvě věže.

  2. Uložte si vypočtené minuty a hodiny do rozumě pojmenovaných proměnných. Za pomocí těchto proměnných sestavte řetězec, který bude vypada takto

    'Pán prstenů: 2h 30min'
    

    Počet hodin a minut je zde pouze jako příklad.

8

Schopnější zaokrouhlování

to dáš

Představte si, že máme v proměnné se jménem x uloženo nějaké desetinné číslo. Pomocí funkce Math.round jej můžeme zaokrouhlit na celá čísla takto.

> Math.round(x)

Co kdybychom však chtěli zaokrouhlit na desetiny, setiny nebo třeba celé stovky?

  1. Sestavte s pomocí funkce Math.round výraz, který zaokrouhlí číslo x s přesností na desetiny.
  2. Sestavte výraz, který zaokrouhlí číslo x s přesností na setiny.
  3. Sestavte výraz, který zaokrouhlí číslo x s přesností na celé stovky.
9

Házení kostkou

zapni hlavu

Vymyslete jak použít funkce probírané v této lekci k simulování hodu klasickou šestistěnnou kostkou. Sestavte výraz, který vygeneruje náhodné celé číslo mezi 1 a 6. Zajistěte, že všechna čísla mají skutečně stejnou pravděpodobnost padnutí.

Povinné čtení na doma

JavaScript je programovací jazyk s dlouhou historií. Ta se píše už od roku 1995, kdy jistý pán jménem Brendan Eich vytvořil první verzi JavaScriptu tak, že spojil koncepty ze tří různých jazyků: Scheme, Self a Java. Od té doby si JavaScript s sebou nese některé zajímavé a užitečné koncepty, které v jiných mainstreamových jazycích moc nenajdete. Zároveň však obsahuje myšlenky, jež programování spíše komplikují. Na obojí, dobré i zlé, budeme v tomto kurzu často narážet.

ECMAScript

Podobně jako má čeština Pravidla českého pravopisu, má i JavaScript svoje standardizovaná pravidla, kterým se říká ECMAScript. Podobně jako pravidla češtiny i ECMAScript se v čase vyvíjí a proměňuje. Aby se vždy vědělo o jaké verzi ECMAScript pravidel se mluví, používají se čísla verzí jako ECMAScript 1, ECMAScript 2 apod. Ke dnešnímu dni je aktuálně nejpoužívanější JavaScript ve verzi ECMAScript 6, zkráceně ES6. Je to poměrně mladá verze z roku 2015, takže často ještě narazíte na kód, který je napsaný ve verzi ES5 z roku 2009 nebo ještě starší.

Ve verzi ES5 se například proměnné nevytvářejí pomocí let a const nýbrž pomocí var. Náš příklad s výplatou by tedy ve verzi ES5 vypadal takto.

> var celkem = 1 + 2 + 4 + 1 + 6
> var prumer = celkem / 5

Proměnné vytvořené pomocí var se dají měnit podobně jako proměnné vytvořené pomocí let. Platí pro ně ovšem trochu jiná pravidla a ta jsou právě často na překážku dobrému programátorskému stylu. To je důvod, proč toto klíčové slovo bylo v ES6 nahrazeno klíčovými slovy let a const. Klíčové slovo var už je tedy zastaralé a není žádný důvod jej používat. My v tomto kurzu budeme striktně používat let a const. Pokud v nějakém starším online kurzu nebo knize narazíte na var, použíjte místo něj vždy let nebo const.

Vytváření proměnných

V JavaScriptu se ukrývá mnoho různých pastí, ve kterých je možné snadno uvíznout. Jedna z opravdu záludných věci je, že k vytvoření proměnné ve skutečnosti nepotřebujete ani let, ani const, ani var. Pokud přiřadíte hodnotu do proměnné, která ještě neexistuje, JavaScript runtime ji pro vás vytvoří automaticky. To však otvírá velký prostor pro chyby vzniklé překlepem. Uvažte například tento kód.

> let mzda = 500
> nzda = 350

JavaScript runtime si zde neuvědomí, že jsme udělali překlep a vytvoří novou proměnnou nzda s hodnotou 350. Původní proměnná tedy zůstane nezměněná a už máme zaděláno na problém. Naštěstí se tento zdroj chyb dá odstranit tím, že JavaScript runtimu zakážeme vytvářet proměnné bez uvedení let, const nebo var. Jak se toto zařídí si ukážeme v následující lekci.

Volitelné úložky na doma

10

Schopnější zaokrouhlování 2

zapni hlavu

Představte si, že máme v proměnné se jménem x uloženo nějaké desetinné číslo a v proměnné k údaj na kolik cifer chceme zaokrouhlovat. Například k=3 znamená, že chceme zaokrouhlit na tisíciny. Naopak k=-2 znamená, že zaokrouhlujeme na celé stovky. Hodnota k=0 tedy znamená běžné zaokrouhlování na jednotky.

Sestavte s pomocí funkce Math.round výraz, který zaokrouhlí číslo x na zadaný počet cifer k.