Lekce 0.1 · JavaScript obecně

Proměnné, typy a operátory

const a let, čísla a texty, převody typů, === vs. == a užitečné metody řetězců.

Než začneme: proč JavaScript, když se učím React?

Když se člověk učí React, často zjistí, že ho nezaskočí React, ale JavaScript kolem něj. React je vlastně jen pár funkcí – všechno ostatní, co v komponentě napíšeš, je obyčejný JavaScript.

Je to jako s vařením podle receptů. Recepty (React) se dají naučit rychle – pokud umíš krájet, smažit a vážit (JavaScript). Když neumíš krájet, je každý recept boj. Prvních osm lekcí je proto takový kurz krájení: obecný JavaScript, bez Reactu. Poslední dvě lekce této části pak ukážou, jak se tyhle dovednosti v Reactu používají.

1. Proměnné: const a let

Proměnná je pojmenovaná přihrádka na hodnotu. V moderním JavaScriptu ji vytvoříš dvěma slovy:

const name = 'Jana'     // const = přihrádku už nepůjde přepsat
let count = 0           // let = přihrádku můžeš později naplnit jinou hodnotou

count = count + 1       // ✅ let jde přepsat
count += 1              // ✅ totéž kratší
count++                 // ✅ ještě kratší (+1)

name = 'Petr'           // ❌ TypeError: Assignment to constant variable.

	const	let	var
Jde přepsat?	ne	ano	ano
Platí v	bloku { … }	bloku { … }	celé funkci (matoucí)
Používat?	ano, výchozí volba	když hodnotu měníš	ne, je zastaralé

Blok a platnost proměnné

Proměnná platí jen uvnitř složených závorek { … }, ve kterých vznikla. Venku o ní nikdo neví:

const price = 100

if (price > 50) {
  const discount = 10           // platí jen uvnitř tohohle bloku
  console.log(price - discount) // 90 – vnější proměnné vidíš i uvnitř
}

console.log(discount)           // ❌ ReferenceError: discount is not defined

Jak proměnné pojmenovat

camelCase: userName, totalPrice, isLoggedIn.
Booleany začínají is, has, can, should: isOpen, hasError.
Pole v množném čísle (users), jedna položka v jednotném (user).
Funkce začínají slovesem: getUser, formatPrice, handleClick.

2. Datové typy

Každá hodnota v JavaScriptu má typ. Primitivní typy jsou jednoduché hodnoty, všechno ostatní je objekt:

Typ	Příklady	typeof vrátí
string (text)	'ahoj', "ahoj", `ahoj`	`'string'`
number (číslo)	`42, 3.14, -1, NaN, Infinity`	`'number'`
boolean	`true, false`	`'boolean'`
undefined	„hodnota zatím nebyla nastavena“	`'undefined'`
null	„záměrně prázdné“	`'object'` ⚠️ historická chyba
object	`{ name: 'Jana' }, [1, 2], new Date()`	`'object'`
function	`() => {}`	`'function'`

typeof 'ahoj'        // 'string'
typeof 42            // 'number'
typeof true          // 'boolean'
typeof undefined     // 'undefined'
typeof { a: 1 }      // 'object'
typeof [1, 2]        // 'object'  – pole je taky objekt!
typeof null          // 'object'  – chyba z roku 1995, která už zůstala

Array.isArray([1, 2])   // true  – takhle se správně pozná pole
value === null          // takhle se správně pozná null

3. Čísla

JavaScript má pro celá i desetinná čísla jediný typ number.

10 + 3      // 13
10 - 3      // 7
10 * 3      // 30
10 / 3      // 3.3333333333333335
10 % 3      // 1   – zbytek po dělení (modulo)
2 ** 10     // 1024 – mocnina

Math.round(2.5)    // 3   – zaokrouhlí
Math.floor(2.9)    // 2   – dolů
Math.ceil(2.1)     // 3   – nahoru
Math.trunc(-2.9)   // -2  – useknutí desetinné části
Math.abs(-5)       // 5
Math.min(4, 1, 9)  // 1
Math.max(4, 1, 9)  // 9
Math.random()      // náhodné číslo od 0 (včetně) do 1 (bez)

K čemu je modulo (%)

7 % 2 === 1               // liché číslo
8 % 2 === 0               // sudé číslo

const seconds = 187
Math.floor(seconds / 60)  // 3  – celé minuty
seconds % 60              // 7  – zbylé sekundy → „3:07“

index % 3                 // 0, 1, 2, 0, 1, 2… – cyklické střídání (třeba barev)

Záludnosti s desetinnými čísly

0.1 + 0.2              // 0.30000000000000004  😱
0.1 + 0.2 === 0.3      // false

(0.1 + 0.2).toFixed(2)          // '0.30'  – POZOR, vrací TEXT
Math.round((0.1 + 0.2) * 100) / 100   // 0.3   – číslo zaokrouhlené na 2 místa

Počítač ukládá čísla ve dvojkové soustavě a 0.1 v ní neumí zapsat přesně – podobně jako my neumíme přesně zapsat 1/3 desetinným číslem. U peněz se proto často počítá v haléřích (celá čísla) a na koruny se převádí až při zobrazení.

NaN: „tohle není číslo“

Number('ahoj')       // NaN
0 / 0                // NaN
NaN === NaN          // false – NaN se nerovná ani sám sobě!
Number.isNaN(NaN)    // true  – jediný spolehlivý test

10 / 0               // Infinity (ne chyba)

4. Řetězce (texty)

Text můžeš zapsat do jednoduchých '…', dvojitých "…" nebo zpětných `…` uvozovek. Zpětné mají superschopnost: dá se do nich vložit hodnota.

Šablonové řetězce

const name = 'Jana'
const count = 3

'Ahoj, ' + name + '! Máš ' + count + ' zprávy.'   // postaru – snadno zapomeneš mezeru
`Ahoj, ${name}! Máš ${count} zprávy.`            // šablona – ${…} vloží hodnotu

`Celkem: ${count * 12} Kč`                        // uvnitř ${…} může být libovolný výraz
`Stav: ${count > 0 ? 'něco máš' : 'prázdno'}`

const html = `
  <ul>
    <li>Šablona může mít víc řádků</li>
  </ul>
`

Nejužitečnější metody

Řetězce se nedají změnit – každá metoda vrací nový text a původní nechá být.

const text = '  Ahoj Světe  '

text.length                 // 14 – počet znaků (i s mezerami)
text.trim()                 // 'Ahoj Světe' – bez mezer na krajích
text.toUpperCase()          // '  AHOJ SVĚTE  '
text.toLowerCase()          // '  ahoj světe  '

const s = 'Ahoj Světe'
s[0]                        // 'A' – znak na pozici 0 (počítá se od nuly!)
s.at(-1)                    // 'e' – poslední znak
s.includes('Svět')          // true
s.startsWith('Ahoj')        // true
s.endsWith('!')             // false
s.indexOf('S')              // 5  – kde začíná; -1 když nenajde
s.slice(0, 4)               // 'Ahoj' – od pozice 0 do 4 (bez 4)
s.slice(-5)                 // 'Světe' – posledních 5 znaků
s.replace('Světe', 'Jano')  // 'Ahoj Jano' – nahradí PRVNÍ výskyt
'a-b-c'.replaceAll('-', '/') // 'a/b/c' – nahradí všechny

'Jana Nováková'.split(' ')  // ['Jana', 'Nováková'] – rozdělí na pole
['a', 'b', 'c'].join(', ')  // 'a, b, c' – opak: spojí pole do textu

'7'.padStart(2, '0')        // '07' – doplní zleva na délku 2
'ha'.repeat(3)              // 'hahaha'

Porovnávání textů a čeština

'a' < 'b'                         // true – porovnává podle kódů znaků
'Z' < 'a'                         // true 😕 velká písmena mají menší kód
'č' > 'd'                         // true 😕 háčky jsou až za anglickou abecedou

'č'.localeCompare('d', 'cs')      // -1 – „č patří před d“ podle češtiny ✅
'Jana'.toLowerCase() === 'jana'   // porovnání bez ohledu na velikost písmen

5. Převody typů

Všechno, co uživatel napíše do formuláře, přijde jako text. I když napíše „42“. Chceš-li s tím počítat, musíš to převést:

Number('42')        // 42
Number('3.14')      // 3.14
Number('3,14')      // NaN – čárka není desetinná tečka!
Number('')          // 0   – pozor, prázdný text je nula
Number('  7 ')      // 7   – mezery na krajích nevadí
Number('12px')      // NaN

parseInt('12px')    // 12  – čte číslice zleva, dokud to jde
parseFloat('3.5kg') // 3.5
parseInt('3.9')     // 3   – jen celá část

String(42)          // '42'
(42).toString()     // '42'
42 + ''             // '42' – funguje, ale String() je čitelnější

Boolean('ahoj')     // true
Boolean('')         // false
!!'ahoj'            // true – dvojitá negace je zkratka za Boolean()

Automatické převody (a proč jim nevěřit)

Když JavaScript dostane nečekaný typ, zkusí ho sám převést. Výsledky občas překvapí:

'5' + 3     // '53'  – plus s textem SPOJUJE texty
'5' - 3     // 2     – mínus umí jen čísla, tak text převede
'5' * '2'   // 10
true + 1    // 2
[] + []     // ''
'10' > '9'  // false 😱 porovnává texty znak po znaku: '1' < '9'
10 > 9      // true

Ukázka

Laboratoř převodů

Co vidíš: Textové pole a pod ním, co z jeho obsahu udělají různé převody. Tak přesně přicházejí hodnoty z formulářů – vždy jako text.

Vyzkoušej:

Klikni na '42'. text + 1 dá '421' (spojení textů), ale text * 1 dá číslo 42 – násobení text převede na číslo.
Klikni na '3,14'. Number vrátí NaN, parseFloat jen 3. Pomůže až nahrazení čárky tečkou.
Zkus '12px': Number to vzdá, parseInt přečte 12.
Zkus (prázdný): Number('') je 0, ale Boolean('') je false. A '' == 0 je dokonce true.

Co z toho plyne: Text z formuláře vždy převeď sám a zkontroluj Number.isNaN. Spoléhat na automatické převody je cesta k chybám.

Načítám interaktivní část…

6. Porovnávání: === vs. ==

Dvě rovnítka (==) před porovnáním převádějí typy podle složitých pravidel. Tři rovnítka (===) porovnají typ i hodnotu – bez překvapení.

Výraz	== (volné)	=== (přísné)
`5 vs '5'`	true	false
`0 vs ''`	true	false
`0 vs false`	true	false
`null vs undefined`	true	false
`NaN vs NaN`	false	false

5 === 5       // true
5 === '5'     // false – jiný typ
5 !== '5'     // true  – „nerovná se“ v přísné verzi

age >= 18     // větší nebo rovno
age < 65 && age >= 18   // a zároveň (víc v lekci o podmínkách)

Ověř si to

Kvíz Co vrátí '5' + 3?

8'53'NaNChybu

Kvíz Uživatel napíše do pole „3,5“. Co dá Number(value)?

3.53NaN'3,5'

Kvíz Jak zaokrouhlíš 2.456 na dvě desetinná místa tak, aby výsledek bylo číslo?

(2.456).toFixed(2)Math.round(2.456 * 100) / 100Math.floor(2.456, 2)parseInt(2.456)

Kvíz Co vypíše: let name = ' jana '; name.trim(); console.log(name)?

'jana'' jana ''JANA'undefined

Rozcvička

Výzva

Pozdrav

Rozcvička

Dvě úplně krátké funkce na zahřátí: pozdrav se jménem a dvojnásobek čísla.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Pozdrav

1. greet('Jana') má vrátit 'Ahoj, Jana!'. Použij šablonový řetězec: `Ahoj, ${name}!`
2. double(4) má vrátit 8.

Načítám interaktivní část…

Mám hotovo

Výzva

Textoví pomocníci

Lehká

Napiš šest malých funkcí na práci s čísly a texty – přesně takové, jaké potřebuješ při zpracování formulářů. Testy se spustí samy a ukážou, které už fungují.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Textoví pomocníci (čísla, řetězce, převody)

Napiš těla šesti malých funkcí. Testy pod nimi se spustí samy a ukážou ✅/❌.

1. initials('Jana Nováková') → 'JN'
   Rozděl jméno podle mezery (split), vezmi první písmeno obou částí ([0]) a zvětši (toUpperCase).
2. formatTime(187) → '03:07'  (sekundy → minuty:sekundy)
   Math.floor(s / 60) jsou minuty, s % 60 sekundy. Obojí doplň nulou zleva na 2 znaky (String(…).padStart(2, '0')).
3. parseAmount('12,5') → 12.5,  parseAmount('abc') → 0
   Čárku nahraď tečkou (replace), převeď přes Number(). Když vyjde NaN (Number.isNaN), vrať 0.
4. roundTo2(3.14159) → 3.14
   Vynásob stem, zaokrouhli (Math.round) a vyděl stem. Vrať číslo, ne text!
5. shout('  ahoj ') → 'AHOJ!'
   Ořízni mezery (trim), zvětši písmena a přidej vykřičník (šablonový řetězec).
6. isValidEmail('jana@example.cz') → true,  isValidEmail('jana.example.cz') → false
   Stačí jednoduchá kontrola: obsahuje '@' (includes) a nekončí ani nezačíná zavináčem (startsWith/endsWith).

Načítám interaktivní část…

Mám hotovo

Shrnutí

const všude, let jen když hodnotu přepisuješ, var nikdy. Proměnná platí v bloku { … }.
Typy: string, number, boolean, undefined, null, object (i pole) a function. Pole poznáš přes Array.isArray.
Desetinná čísla nejsou přesná (0.1 + 0.2). Zaokrouhluj Math.round(x * 100) / 100, toFixed vrací text.
Šablonové řetězce `…${x}…` místo spojování plusem. Metody řetězců vracejí nový text.
Z formuláře přichází text. Převeď ho sám přes Number() a hlídej NaN.
Vždy ===, nikdy ==.

Načítám lekci…

💬 Našel jsi chybu, něco ti není jasné, nebo máš nápad? Napiš mi.