2

Jazyk JavaScript

V této lekci si představíme jazyk JavaScript. Protože tento kurz je určen lidem, kteří už nějaké minimální základy programování mají, nebudeme zde již probírat taková témata jako hodnota, funkce nebo podmínka. Budeme tiše přepokládat, že už tyto pojmy znáte z nějakého jiného jazyka. Pokud cítíte, že ještě plavete v základních pojmech, doporučuji projít si opakovací kapitolu z kurzu Python Coding Party, která je určená právě těm, kteří potřebují osvěžit úplné základy programování.

Chrome konzole a programy

Podobně jako v Pythonu i v JavaScriptu můžeme psát příkazy buď do konzole nebo psát ucelené programy. JavaScriptová konzole je ukryta uvnitř prohlížeče Chrome. Stačí otevřít takzvané Developer Tools. V první části tohoto textu budeme pracovat pouze s touto konzolí.

Hodnoty, operátory, proměnné

Vzhledem k tomu, že tento web se věnuje programování hlavně v Pythonu a JavaScriptu budu předpokládat, že základům programování rozumíte právě v jazyce Python. Pokud jste nabyli své znalosti v nějakém jiném jazyce, určitě pro vás nebude problém si tuto lekci vnitřně přeložit do svého jazyka.

Jazyk JavaScript je Pythonu ve skutečnosti velmi podobný, což nám na začátku ušetří mnoho vysvětlování. Z Pythonu si například pamatujeme tři základní typy hodnot: celá čísla (int), desetinná čísla (float) a řetězce (str). Javascript slučuje první dva, takže má pouze jeden typ, pod který se schovají celá i desetinná čísla, jménem Number. Řetězce jsou v JavaScriptu na chlup stejné jako v Pythonu, můžete je tedy psát v jednoduchých nebo dvojitých uvozovkách. JavaScript řetězcům říká String.

Proměnné jsou v JavaScriptu taky téměř stejné jako v Pythonu s tím rozdílem, že vytváření proměnných musíme vždy uvodit slovíčkem let.

Python

mesic = 'leden'
den = 30
mesic = 'únor'
den = 1

JavaScript

let mesic = 'leden'
let den = 16
mesic = 'únor'
den = 1

Klíčové slovo let používáme pouze když zakládáme novou proměnnou. Když chceme změnit hodnotu v již existující proměnné, let už nepíšeme.

Volání funkcí

Funkce se v JavaScriptu volají úplně stejně jako v Pythonu. Funkce, se kterými můžeme pracovat v JavaScriptu, se od těch v Pythonu občas liší pouze názvem, občas máme proti Pythonu nějaké šikovné funkce navíc, občas nám budou některé Pythonovské funkce chybět.

Z Pythonu například známe funkci round, která zaokrouhluje vstup na celé číslo. V JavaScriptu se funkce, která dělá přesně totéž jmenuje Math.round. Z Pythonu také znáte funkci, která generuje náhodná čísla jménem round. JavaScript má místo ní funkci Math.random(), která generuje náhodné desetinné číslo mezi 0 a 1.

Python

wage = int(input('Tvoje mzda: '))
salary = 8 * 21 * wage
print('Vyplata ' + str(salary))

JavaScript

wage = parseInt(prompt('Tvoje mzda: '))
salary = 8 * 21 * wage
console.log('Vyplata ' + salary)

Všimněte si jedné pozoruhodné věci. Na posledním řádku v JavaScriptu jsme nemuseli převádět hodnotu v proměnné salary na řetězec, abychom ji mohli spojit s řetězcem. Na rozdíl od Python, JavaScript tuto konverzi udělá automaticky. To nám na jednu stranu trochu zjednodušuje život, na druhou stranu musíme mít stále na paměti, že JavaScript něco potajmu dělá na pozadí za nás.

Programy, vstup a výstup

V této sekci se již přesuneme od psaní příkazů do konzole k psaní plnohodnotných programů. Program v JavaScriptu je v našem případě vždy součástí nějaké webové stránky. Vyrobit prázdnou stránku obsahující pouze JavaSricpt je naštěstí velmi jednoduché. Stačí ve Visaul Studiu Code vytvořit soubor s příponou .html a do něj vložit následující kód

<script>
  console.log('hello world');
</script>

JavaScriptový program bude vždy uzavřen do takzvaných značek script. Funkce console.log dělá podobnou věc jako funkce print v Pythonu - vypíše na konzoli zadanou hodnotu.

Pokud bychom od uživatele chtěli získat vstup, využijeme funkci prompt, která v prohlížeči zobrazí okno s políčkem pro vstup.

<script>
  const wage = prompt('Zadejte svou hodinovou mzdu: ');
</script>

Platí zde stejný princip jako v Pythonu při volání funkce input: vstup od uživatele obdržíme vždy jako řetězec. Chceme-li s řetězce vytáhnout číslo, musíme používat konverzní funkce. V Pythonu známe funkce int a float. JavaScriptové ekvivalenty se jmenují parseInt a parseFloat.

Chceme-li uživateli něco sdělit, můžeme použít funkci alert. Ta zobrazí dialogové okno s naší zprávou. S tímto arzenálem už můžeme napsat celý program na výpočt výplaty.

<script>
  const wage = parseInt(prompt('Zadejte svou hodinovou mzdu: '));
  const salary = wage * 7 * 21;
  alert('Vysledná výplata činí: ' + salary + ' kč');
</script>

Podmínky a bloky

S podmínkami to máme opět snadné. V JavaScriptu fungují téměř stejně jako v Pythonu. Co je ovšem v JavaScriptu výrazně jinak je práce s bloky.

Pokud jsme chtěli v Pythonu napsat podmínku, používali jsme odsazení k tomu, abychom řekli který příkaz patří do kterého blogu.

V JavaScriptu ke stejnému účelu používáme složené závorky.

Python

if user == 'admin':
  access = True
else:
  access = False

JavaScript

if (user === 'admin') {
  access = true
} 
else {
  access = false
}

Odsazení je tedy v JavaScriptu čistě vizuální pomůcka. Kdybychom byli masochisté, mohli bychom kód výše napsat celý na jeden řádek a JavaScript by mu bez problému porozuměl.

if (user === 'admin') { access=true } else { access = false }

Všimněte si také, že v JavaScriptu se píše výraz uvnitř podmínky do kulatách závorek a že se místo dvojitého rovnáse používá dokonce trojité. To má v JavaScriptu svůj důvod, ale zatím se můžeme spokojit s tvrzením, že čím víc rovnáse, tím víc Addidas.

Podmínky s více větvemi fungují stejně jako v Pythonu, jen se místo slova elif používá spojení else if.

const points = parseInt(prompt('Body z písemky'))
  if (points < 50) {
    alert('Známka 5');
  } else if (points < 60) {
    alert('Známka 4');
  } else if (points < 75) {
    alert('Známka 3');
  } else if (points < 85) {
    alert('Známka 2');
  } else {
    alert('Známka 1');
  }

Cvičení

1

Přepočet měny

Napište program, který si pomocí volání funkce prompt vyžádá od uživatele částku v eurech a převede ji na celé koruny. Aktuální kurz eura podle ČNB je 25.6 kč za jedno euro. Výslednou částku zobrazte voláním funkce alert

2

Trojúhelník

Ze školky si jistě pamatujete, že součet úhlů uvnitř všech trojúhelníků je vždy 180°. Napište program, který požádá uživatele o tři celá čísla a dá uživateli zprávu o tom, zda může existovat trojúhelník s těmito vnitřními úhly.

3

Množstevní slevy

Firma nabízející trička s potiskem poskytuje množstevní slevy podle počtu objednaný kusů. Při objednávce pod 50 kusů stojí jedno tričko 300 kč. Pokud si objednáme alespoň 50 kusů, je cena 250 kč za kus. Při objednávce nad 200 kusů je cena 200 kč za tričko. Nad 500 kusů zaplatíme 150 kč za tričko a nad 1000 kusů zaplatíme 120 korun za tričko.

Napište program, který od uživatele obdrží počet kusů, které si chce objednat, a program odpoví celkovou ceny objednávky.