Milí účastníci webové akademie, v této části kurzu se postupně začneme učit programovat v jazyce JavaScript. Jak už jste poznali z předchozích lekcí, jazyky HTML a CSS dávají webovým stránkám strukturu a vzhled. Většina stránek a aplikací však také nabízí nějaké chování a interaktivitu, kterou zajišťuje právě program napsaný v JavaScritpu.

Svět programování může ve srovnání s HTML a CSS ze začátku působit velmi tajemně, 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í.

JavaScript

Jazyk JavaScript je jedním z nejdůležitějších programovacích jazyků v prostředí webu. V tomto kurzu se tedy budeme zaměřovat pouze na něj. Do začátku počítáme s tím, že jste už nějaký programovací jazyk viděli alespoň z jedoucího vlaku. I tak však budeme při představování JavaScriptu postupovat od úplných základů.

Než se naplno pustíme do JavaScriptu, je dobré si pořádně ujasnit terminologii. JavaScript je programovací jazyk, tedy sada nějakých gramatických pravidel jak sestavovat textové příkazy pro počítač. Pokud chceme, aby náš stroj tyto příkazy vykonal, protřebujeme takzvaný JavaScript runtime. To je program, který čte JavaScriptové příkazy a jeden za druhým je provádí. Pokud bychom použili divadelní analogii, můžeme si představit, že JavaScriptový program je scénář nějakého představení, a JavaScript runtime je herec, který představení podle tohoto scénáře zahraje.

Velkou výhodu máme do zacátku v tom, že každý webový prohlížeč v sobě obsahuje JavaScript runtime. Naše první JavaScriptové příkazy tak můžeme psát rovnou v prohlížeči. Stačí otevřít takzvané Developer Tools.

Hodnoty a operátory

Hodnoty Values a operátory operators jsou základním stavebním kamenem veškerého programování. V této lekci se představíme ty nejzákladnější a v dalších lekcích budeme postupně přidávat další.

Čísla a aritmetika

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í. Počítání s čísly se odborně říká aritmetika. Nemusíte se vůbec bát, do žádné tvrdé matematiky se určitě pouštět nebudeme. Zcela nám postačí znalosti nabyté ve školce. Do JS konzole ve vašem prohlížeči můžete rovnou zkusit napsat následující příkazy a sledovat jejich výsledky.

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

Vždy, když v konzoli napíšete příkaz a stisknete klávesu Enter, pošlete tím JavaScriptovému runtimu uvnitř prohlížeřč příkaz. Runtime tento příkaz vykoná a ihned vám odpoví výsledek. Zatím jsme sice nic závratného nespočítali, použili jsme však základní JavaScriptové hodnoty a operátory. Hodnoty jsou v našem případě čísla. Později uvidíme další druhy hodnot, které 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í.

> 2 ** 4
16
> 12 % 5
2

Mocnění si nejspíš pamatujete ještě ze základní školy. Zbytek po dělení 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 runtime 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 toto.

> '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 na druhu použitých uvozovek nezáleží. 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 následující.

> '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.

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 proměnné a 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 uvidíme na hodinách po uplynutí zadané doby. Například jaký bude čas po uplynutí 15 hodin?

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

V tomto kusu kódu jsme vytvořili hned dvě proměnné: cas a novyCas. Každá proměnné v JavaScriptu musí mít své jméno. To by mělo dobře vystihovat, co je v proměnné uloženo. Pokud chceme v programu používat nějakou promennou, musíme ji vždy nejdříve vytvořit. To 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ějaké proměnné změnit. V takovém případě musíme proměnnou vytvořit pomocí slovíčka let.

Takto můžeme například zkusit spočítat svou budoucí výplatu, pokud budeme pracovat na plný úvazek 21 dní v měsíci za 500 kč na hodinu.

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

Pokud chceme spočítat výplatu pro jinou sazbu, můžeme hodnotu v proměnné změnit. V takovém případě už nepoužíváme const ani let.

> sazba = 600

Zde si však musíme všimnout jedné velmi důležité věci.

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

Při práci s proměnnými je také dobré dodržovat určitá pravidla.

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ž riziko vzniku nežádoucích chyb v programu.

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é

1

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í.
2

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.

3

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.
4

Ú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?

5

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?

Funkce a metody

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 nějakou takovou složitější 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, kterou potřebujeme řešit velmi často. Příkladem může být například zaokrouhlování desetinných čísel na celá čísla. To je operace, která se hodí skoro ve všech výpočtech a bylo by zbyteční ji programovat neustále znova. V JavaScriptu proto máme k dispozici funkci jménem Math.round.

Pokud chceme použít nějakou funkci, uděláme to tak, že napíšeme její jméno a do kulatých závorek vložíme hodnotu, se kterou má funkce pracovat. Takto například použíjeme naši funci Math.round.

> Math.round(3.14)
3

Hodnotě uvnitř kulatých závorek říkáme vstup input funkce. Spuštění funkce se mezi programátory ří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 tedy 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 skládat složitější výrazy, jako 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

Metody

Často se stane, že některé funkce se hodí na práci pouze s jedním typem hodnoty. Například bychom mohli mít funkci toUpperCase, která by převedla všechna písmena v řetězci na velká písmena. Kdyby taková funkce existovala, mohli bychom ji volat třeba takto

> toUpperCase('martin')
'MARTIN'

Je pochopitelné, že taková funkce funguje pouze pro řetězce. Pro ostatní hodnoty nedává smysl. Těžko si představit, co by taková funkce měla vrátit například v takovémto případě.

> toUpperCase(3.14)

Funkce, které pracují pouze na jednom typu hodnoty, se tvůrci JavaScriptu rozhodli svázat přímo s touto hodnotu. Můžeme tedy říct, že funkce toUpperCase patří pouze řetězcům. Máme-li funkci, která patří pouze typu řetězec, voláme ji pomocí takzvané tečkové notace dot notation .

> 'martin'.toUpperCase()
'MARTIN'

Funkcím jako výše, které patří jen konkrétním typům hodnot, říkáme metody methods . Všimněte si, že metoda toUpperCase v JavaScriptu skutečně existuje, takže výše uvedený kód bude opravdu fungovat. Podobně existuje například metoda toLowerCase. Vyzkoušejte si ji!

Užitečné metody na řetězcích

Na řetězcích máme v JavaScriptu spoustu metod, které nám umožňují provádět mnoho užitečných operací. Zde pro začátek vybereme pár z nich.

toUpperCase()
Převede všechna písmena na velká.
> 'popokatepetl'.toUpperCase()
'POPOKATEPETL'
toLowerCase()
Převede všechna písmena na malá.
> 'Popokatepetl'.toLowerCase()
'popokatepetl'
trim()
Odstraní bílé znaky ze začátku a konce.
> '  popokatepetl '.trim()
'popokatepetl'
slice(start, end)
Vyřízne z řetězce kus podle zadaných pozic začátku a konce. U této metody poprvé narážíme na jednu programátorskou výstřednost, kterou budeme potkávat pořád znovu a znovu: programátoři vždy počítají od nuly, nikoliv od jedničky jako běžní lidé. V řetězci 'martin' je tedy písmenko 'm' na pozici nula, písmenko 'a' na pozici 1 a tak dále. Metoda slice navíc bere dolní mez včetně, kdežto horní mez se bere vyjma.
> 'popokatepetl'.slice(4, 7)
'kat'
> 'popokatepetl'.slice(0, 3)
'pop'
indexOf(value)
Vyhledá řetězec zadaný v parametru value uvnitř řetězce, na kterém tuto metodu voláme. Vrací pozici prvního výskytu nebo -1 pokud se obsah value v 5et2zci nenachází.
> 'popokatepetl'.indexOf('kat')
4
> 'popokatepetl'.indexOf('po')
0
> 'popokatepetl'.indexOf('t')
6
> 'popokatepetl'.indexOf('katka')
-1
padStart(targetLength, padString)
Prodlouží řetězec na zadanou délku tak, že na začátek přidá opakování řetězce padString. Hodí se na zarovnávání nebo na formátování čísel.
> '12'.padStart(4, '0')
'0012'
> '12'.padStart(4, ' ')
'  12'
> '12'.padStart(3, ' ')
' 12'
> '12'.padStart(2, ' ')
'12'

Možná vám nyní vrtá hlavou, jestli funkce Math.round není také náhodou metoda, když používá tečkovou notaci. Je to skutečně tak. Nyní se ale budete chtít zeptat, co že teda je to Math za hodnotu a tady se dostáváme do úzkých, protože na zodpovězení této otázky ještě nemáme dost terminologie a znalostí. Takže Math pro nás na chvíli ještě zůstane tajemstvím.

Cvičení - funkce a metody

6

Převod měny

pohodička
  1. Dejme tomu, že si jako programátoři vyděláváte 20 euro na hodinu. Spočítejte, kolik je to v českých korunách, jestliže kurz eura je 26.58 kč. Výsledek zaokrouhlete na celé koruny.
  2. Upravte váš výpočet tak, že výsledek zaokrouhlíte na celé koruny směrem dolů.
7

Název knihy

pohodička
  1. Vezměte název vaší oblíbené knihy a uložte si jej jako řetězec do proměnné s názvem title.
  2. Převeďte tento název na všechna velká písmena voláním metody toUpperCase.
  3. Převeďte název na všechna malá písmena.
8

Emaily

to dáš

Představte si, že máme emailovou adresu ve formátu

<jmeno>.<prijmeni>@<domena>

Tedy například:

  • petr.novak@gmail.com
  • romana.nejedla@czechitas.cz
  • slavomir.ponuchalek@yahoo.com

Postupujte dle následujících kroků.

  1. Do proměnné email si uložte některý z výše uvedených emailů.
  2. Pomocí metody indexOf najděte v tomto emailu pozici znaku zavináč. Tuto pozici si uložte do proměnné atIndex.
  3. Pomocí metody slice vyřízněte z emailu první část představující jméno a příjmení uživatele.
  4. Vyřízněte z emailu název domény tedy například gmail.com.

Doporučené úložky na doma

9

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.
10

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.
11

Jméno z emailu

zapni hlavu

Mějme emaily v následujícím formátu.

<jmeno>.<prijmeni>@<domena>

Tedy například:

  • petr.novak@gmail.com
  • romana.nejedla@czechitas.cz
  • slavomir.ponuchalek@yahoo.com

Zpracujte každý email takovým způsobem, že na konci budete mit dvě proměnné first a last, které budou obsahovat jméno a příjmení získané z emailové adresy se správnou velikostí písmen. Tedy například

> first
'Petr'
> last
'Novak'
12

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

13

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.