1

Úvod do JavaScriptu

Seznámíme se s jazykem JavaScript a ukážeme si jak se v JavaScriptu píší jednoduché programy.

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 moderních stránek a aplikací však potřebuje také nějaké chování a interaktivitu. Tu zajišťuje právě v JavaScriptu napsaný program.

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 náležitou 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ů nejen v prostředí webu ale i v IT obecně. 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 pravidel jak sestavovat textové příkazy pro počítač. Pokud chceme, aby náš počítač 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.

JavaScript runtime

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č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í. Můžeme pomocí něj například zjistit, zda je číslo sudé, tedy zbytek po dělení dvěma je roven nule. Později uvidíme užitečnější a také zajímavější použití této operace.

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""
> '<h1 class="title">Digitální akademie Web</h1>'
"<h1 class="title">Digitální akademie Web</h1>"

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"
> '<h1>' + 'Digitální akademie Web' + '</h1>'
"<h1>Digitální akademie Web</h1>"

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.

Funkce

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

Funkce je kousek programu řešící nějakou konkrétní úlohu. Většinou jde o úlohu, kterou řešime často a opakovaně. 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 nějakou funkci použít, 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žijeme 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.

Rychlé občerstvení

Funkce jsou rozsáhlé téma, které nás bude provázet až do konce kurzu. Již brzy se také naučíme psát funkce vlastní. Pro lepší představu o tom, jak funce fungují, se nám bude hodit následující analogie.

Můžeme si představovat, že funkce je něco jako stánek s rychlým občerstvením. Takový stánek má dvě okýnka. Jedno vstupní, do kterého zadáte svoji objednávku, a druhé výstupní, kde po chvíli obdržíte svůj hamburger nebo smažák v housce. Objednávání rychlé svačiny je pak podobné jako volání funkce. Do stánku vložíte nějaké vstupy a ven vám vypadne výstup. Pokud nejste vysloveně zvědaví nebo paranoidní, dění uvnitř stánku vás až tolik nezajímá, podobně jako vás až tolik nezajímá, jak vlastně JavaScript technicky provádní zaokrouhlování. Důležité je, že funkce funguje, a že párek v rohlíku nakonec chutná tak, jak jste zvyklí.

Zaokrouhlování

Výrazy s funkcemi

Volání funkce je také výraz podobně jako operace s hodnotami a proměnnými. Můžeme jej tedy použít uvnitř libovolného jiného výrazu. Navíc vstup pro funkci lze také vytvořit pomocí výrazu. Nabízí se tedy mnoho způsobů, jak skládat složitější výpočty, jako například tento.

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

Užitečné funkce

JavaScript obsahuje spousty a spousty funkcí, díky kterým lze provádět mnoho užitěčných a zajímavých věcí. Během celého kurzu je budeme společně objevovat. Takto zkraje 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

Jednou z funkcí, se kterými si užijeme 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

Všimněte si, že tato funkce nemá žádný vstup. I takové funkce jsou možné a nejsou žádnou velkou výjimkou.

Chytrým použitím zaokrouhlování a trochou matematiky můžeme pomocí Math.random 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

To se nám může hodit pokud programujeme nějakou hru nebo třeba chceme-li vygenerovat náhodná testovací data.

Cvičení: Výrazy a funkce

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 265 Kč na hodinu. Řekněme, že měsíc má 21 pracovních dní.
  2. Pokud pracujete na živnostenský list, můžete si odečíst 60% příjmů jako paušál a ze zbytku zaplatíte 15% daň. Spočítejte jak velkou daň zaplatíte ze své výplaty. Pomocí funkce Math.floor zaokrouhlete výsledek dolů na celé koruny.
2

Délka filmu

to dáš

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.

3

E-mail

pohodička
  1. Vytvořte řetězec obsahující vaši e-mailovou adresu.
  2. Sestavte emailovou adresu tak, že sečtete dohromady vaše křestní jméno, znak tečka, vaše příjmení a koncovku @mujmail.com.

Cvičení: Bonusy

4

Úroky

zapni hlavu

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

zapni hlavu

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?

První program

Do této chvíle jsme si s runtimem JavaScriptu povídali pouze skrze konzoli. Vždy jsme poslali jeden příkaz a rovnou na něj dostali odpověď. Nyní je čas začít psát programy, tedy nechat náš prohlížeč spustit více příkazů najednou.

Naše JavaScriptové programy budou vždy součástí nějaké webové stránky. Založíme si proto složku s jedním HTML souborem, který prozatím bude obsahovat jen nadpis.

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>První program</title>
  </head>
  <body>
    <h1>První program</h1>
  </body>
</html>

Pro náš JavaScriptový kód budeme vždy vytvářet oddělený soubor podobně jako jste zvyklí vytvářet oddělený soubor pro CSS styly. JavaScriptovému programu většinou budeme dávat název index.js. Jeho obsah bude vypadat takto.

'use strict';

console.log('ahoj');

Pokud chceme náš program propojit se stránkou, vložíme odkaz na konec značky body.

<body>
  <h1>První program</h1>
  <script src="index.js"></script>
</body>

Pokud nyní soubor index.html otevřete v prohlížeči, měli byste v konzoli vidět text, který jsme předali funkci console.log. Tato do konzole vypíše cokoliv, co jí předáme na vstupu.

console.log vs document.write

Funkce console.log vypisuje obsah do konzole. To se hodí nám programátorům, abychom si mohli vypsat informace o tom, co se v našem programu děje. Uživateli však chceme informace zobrazovat přímo na stránce. Než se naučíme lepší postupy, můžeme k tomu využít funkci document.write.

'use strict';

document.write('<p class="message">ahoj</p>');

Pomocí této funkce lze na konec stránky vložit libovolné HTML. Můžete pak v CSS nastylovat třídu message a váš program tak bude vytvářet hezký výstup. Tuto funkci budeme používat do chvíle, než se naučíme chytřejší funkce pro práci s obsahem stránky.

Funkcie console.log i document.wrtie jsou zajímavé tím, že jim můžete předat libovolný počet vstupů.

'use strict';

console.log('Zpráva:', 'ahoj', 15);
document.write('<h2>Zpráva</h2>', '<p>ahoj</p>');

Direktiva use strict

Všimněte si, že náš program začíná řetězcem use strict. Tímto způsobem dáváme najevo, že chceme náš program spouštět v přísnějším režimu. JavaScript runtim tak bude náš program přísněji kontrolovat na chyby, což se nám obzvlášť v začátcích velmi hodí.

Středníky

Téměř každý příkaz v JavaScriptu končí středníkem. Tím JavaScript runtime pozná, kde končí jeden příkaz a začíná jiný. Inu, ve skutečnosti by to JavaScript poznal i bez středníků a ve skutečnosti bychom je na většině míst ani psát nemuseli. Zakopaný pes je však ve slovíčku většině. Pokud středníky nepíšeme, v některých situacích se může stát, že runtime pochopí náš kód špatně. Abychom si nepřidělávali takto ze začátku starosti, budeme vkládat středníky všude, kde to je možné.

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 poslouží 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?

'use strict';

const cas = 13;
const novyCas = (cas + 15);
console.log(novyCas);

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.

'use strict';

let sazba = 500;
let vyplata = 8 * 21 * sazba;
console.log(vyplata);

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.

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

sazba = 600;
console.log(vyplata);

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.

let sazba = 500;
let vyplata = 8 * 21 * sazba;
console.log(vyplata);

sazba = 600;
vyplata = 8 * 21 * sazba
console.log(vyplata);

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í: Programy, proměnné

6

Náhodná čísla

pohodička
  1. Založte si JavaScriptový program a pomocí funkcí console.log a Math.random vypište do konzole pět náhodných čísel.
  2. Využijte toho, že do funkce console.log můžete poslat více vstupů a zařiďte, aby výstup programu vypadal následovně.
    1: 0.8543991725137559
    2: 0.3668845200214361
    3: 0.4259711930234611
    4: 0.9319442904382422
    5: 0.3040681205859323
    
7

Převod měny

to dáš
  1. Dejme tomu, že si jako programátoři vyděláváte 20 euro na hodinu. Uložte tuto hodnotu do proměnné wageInEur.
  2. Spočítejte, kolik je vaše hodinová mzda v českých korunách, jestliže kurz eura je 26.58 kč. Výsledek zaokrouhlete na celé koruny a uložte do proměnné wageInCzk.
  3. Vypište obsah proměnné wageInCzk do webové stránky tak, aby na stránce byl nadpis h1 s obsahem:
    Mzda v korunách: 532 kč
    
8

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.

Založte si JavaScriptový program a uložte čas startu závodu do proměnné start. Do proměnné delka 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čí a vypište její obsah do stránky. Vyzkoušejte různé délky a ověřte, že váš postup funguje.

Doporučené úložky na doma

9

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

Schopnější zaokrouhlování

zapni hlavu

Mějme v proměnné 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? Napište program, který pomocí funkce Math.round

  1. zaokrouhlí číslo x s přesností na desetiny,
  2. zaokrouhlí číslo x s přesností na setiny,
  3. zaokrouhlí číslo x s přesností na celé stovky.
11

Házení kostkou

zapni hlavu

Vymyslete jak použít funkci Math.random a různé zaokrouhlovací funkce probírané v této lekci k simulování hodu klasickou šestistěnnou kostkou. S použitím vhodných funkcí sestavte výraz, který vygeneruje náhodné celé číslo mezi 1 a 6.

Zamyslete se nad tím, zda vámi vytvořený výraz generuje všechna čísla skutečně se stejnou pravděpodobností. Vemte v úvahu, že funkce Math.random generuje náhodná čísla mezi 0 (včetně) a 1 (vyjma). Je tedy malinká pravěpodobnost, že občas padne přesně číslo 0. Naopak číslo 1 padnout nemůže.

Doporučené č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 budeme vždy pamatovat na directivu use strict na začátku každého programu. V takovém případě totiž JavaScript zahlásí chybu vždy, když se budeme snažít přiřadit hodnotu proměnné, která před tím nebyla vytvořena.

Volitelné úložky na doma

12

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 program, který zaokrouhlí číslo x na zadaný počet cifer k.

Shrnutí

Po této lekci byste měli vědět a znát

  • první důležité hodnoty - čísla a řetězce,
  • aritmetické operátory - sčítání, odčítání, násobení, dělení, mocnění, zbytek po dělení,
  • základní funkce:
    • Math.round, Math.floor, Math.ceil,
    • Math.random,
    • console.log, document.write,
  • jak vytvořit stránku s JavaScriptovým programem,
  • jak používat a správně pojmenovávat proměnné,
  • rozdíl mezi let a const.