Lekce 0.8 · JavaScript obecně

Moduly a vestavěné nástroje

import/export, JSON, Math, Date, Intl, localStorage a třídy v kostce.

Než začneme: dílna se šuplíky

Velký projekt je jako dílna. Kdyby všechno nářadí leželo na jedné hromadě, nic bys nenašel. Proto má každý druh svůj šuplík s popiskem – a když potřebuješ šroubovák, otevřeš šuplík „šroubováky“. V JavaScriptu jsou šuplíky moduly: každý soubor má své věci pro sebe a ven „půjčí“ jen to, co výslovně exportuje.

Druhá polovina lekce je prohlídka nářadí, které JavaScript dostal do vínku: JSON, Math, Date, Intl, localStorage a třídy. Nemusíš je umět nazpaměť – stačí vědět, že existují, a umět je najít.

1. Moduly: export a import

Každý soubor je samostatný modul. Proměnné a funkce v něm jsou soukromé, dokud je neexportuješ. Existují dva druhy exportu:

// math.js
export const PI = 3.14159                 // pojmenovaný export (může jich být hodně)
export function add(a, b) { return a + b }
function secret() { … }                   // bez export – zvenku nedostupné

export default function multiply(a, b) {  // výchozí export (jen jeden na soubor)
  return a * b
}

// app.js
import multiply, { PI, add } from './math.js'   // výchozí bez závorek, pojmenované ve { }
import times from './math.js'                    // výchozí si můžeš pojmenovat jakkoli
import { add as plus } from './math.js'          // pojmenovaný přejmenuješ přes as
import * as math from './math.js'                // všechno pod jedním jménem: math.add, math.PI

	Pojmenovaný export	Výchozí export
Kolik v souboru	libovolně	nejvýš jeden
Import	`import { add } from './math'`	`import multiply from './math'`
Jméno při importu	musí sedět (nebo as)	zvolíš si
V Reactu typicky	pomocné funkce, hooky, typy	komponenta souboru (třeba Lesson.tsx)

Odkud se importuje

import { useState } from 'react'               // bez tečky = balíček z node_modules
import { products } from '../course/fakeApi'   // ./ a ../ = vlastní soubor, cesta relativně k tomuhle
import './styles.css'                          // import kvůli vedlejšímu efektu (načte styly)

// Přípona .js/.ts/.tsx se v projektech s Vite obvykle vynechává

Přeposílání a dynamický import

// components/index.js – jeden vstupní bod pro celou složku
export { Button } from './Button'
export { Card } from './Card'
// jinde pak: import { Button, Card } from './components'

// Dynamický import – načte modul až když je potřeba (vrací Promise)
const { heavyChart } = await import('./charts.js')

2. JSON: data jako text

JSON je textový zápis dat, který vypadá skoro jako JavaScriptový objekt. Používá se všude, kde data cestují: mezi serverem a prohlížečem, do souborů, do localStorage.

const user = { name: 'Jana', age: 31, tags: ['admin'] }

const text = JSON.stringify(user)
// '{"name":"Jana","age":31,"tags":["admin"]}' – jeden dlouhý TEXT

JSON.stringify(user, null, 2)    // hezky odsazený – na ladění
JSON.parse(text)                 // zpátky na objekt (nový objekt!)

3. Math: zaokrouhlování a náhoda

Math.round(4.5)     // 5
Math.floor(4.9)     // 4 – dolů
Math.ceil(4.1)      // 5 – nahoru
Math.trunc(-4.9)    // -4 – useknout desetinnou část
Math.abs(-7)        // 7
Math.max(3, 8, 1)   // 8
Math.min(...[3, 8, 1])   // 1 – s polem přes spread
Math.sqrt(16)       // 4
2 ** 8              // 256 – mocnina (dříve Math.pow)

// Náhodné celé číslo od min do max (včetně)
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
randomInt(1, 6)     // kostka

// Náhodná položka pole
const pick = (arr) => arr[Math.floor(Math.random() * arr.length)]

// Omezení do rozsahu
const clamp = (n, min, max) => Math.min(Math.max(n, min), max)
clamp(150, 0, 100)  // 100

4. Date: datum a čas

const now = new Date()                    // teď
const d = new Date(2026, 9, 4)            // 4. ŘÍJNA 2026 – měsíce se počítají od 0! 😱
const iso = new Date('2026-10-04')        // z textu ve formátu ISO (rok-měsíc-den)
const fromMs = new Date(1_700_000_000_000) // z počtu milisekund od 1. 1. 1970

d.getFullYear()    // 2026
d.getMonth()       // 9  – říjen (leden = 0)
d.getDate()        // 4  – den v měsíci
d.getDay()         // 0–6 – den v týdnu (neděle = 0)
d.getHours()       // 0

Date.now()         // aktuální čas v ms – rychlé měření a jedinečná čísla
d.getTime()        // tohle datum v ms
d.toISOString()    // '2026-10-03T22:00:00.000Z' – standardní text pro servery (v UTC)

Počítání s daty

// Rozdíl dvou dat = rozdíl milisekund
const DAY = 24 * 60 * 60 * 1000
const days = Math.round((new Date('2026-12-24') - new Date('2026-10-04')) / DAY)   // 81

// Porovnání
dateA < dateB                              // funguje (porovná ms)
dateA.getTime() === dateB.getTime()        // shoda – === u dvou Date objektů je vždy false!

// Přičíst dny – setDate MĚNÍ objekt, proto nejdřív kopie
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)   // přetečení přes konec měsíce Date vyřeší sám

5. Intl: čísla, měny a data po česku

Formátovat čísla a data ručně (mezery mezi tisíci, desetinná čárka, „Kč“ za číslem, názvy měsíců) je zbytečné. Prohlížeč to umí v každém jazyce:

const n = 1234567.891

n.toLocaleString('cs-CZ')    // '1 234 567,891'
n.toLocaleString('en-US')    // '1,234,567.891'

new Intl.NumberFormat('cs-CZ', { style: 'currency', currency: 'CZK' }).format(n)
// '1 234 567,89 Kč'

new Intl.NumberFormat('cs-CZ', { maximumFractionDigits: 1 }).format(3.14159)   // '3,1'
new Intl.NumberFormat('cs-CZ', { style: 'percent' }).format(0.256)             // '26 %'

const date = new Date(2026, 9, 4)
date.toLocaleDateString('cs-CZ')                                    // '4. 10. 2026'
date.toLocaleDateString('cs-CZ', { day: 'numeric', month: 'long' }) // '4. října'
date.toLocaleTimeString('cs-CZ', { hour: '2-digit', minute: '2-digit' })   // '00:00'

new Intl.RelativeTimeFormat('cs', { numeric: 'auto' }).format(-1, 'day')   // 'včera'
new Intl.ListFormat('cs').format(['Jana', 'Petr', 'Eva'])                  // 'Jana, Petr a Eva'

Ukázka

Laboratoř formátování

Co vidíš: Pole pro číslo a datum. Pod nimi, jak je naformátují vestavěné metody a Intl.

Vyzkoušej:

Porovnej toFixed a toLocaleString('cs-CZ'): první dá desetinnou tečku a žádné mezery, druhé české formátování.
Zkus číslo s mnoha desetinnými místy – měna se zaokrouhlí na haléře sama.
Změň datum na včerejšek nebo zítřek a sleduj poslední řádek: RelativeTimeFormat napíše „včera“ / „zítra“.

Co z toho plyne: Čísla a data pro lidi formátuj přes Intl a toLocale… s 'cs-CZ'. Ruční skládání textu je zbytečné a chybové.

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

6. localStorage: paměť prohlížeče

localStorage je malé úložiště v prohlížeči. Data v něm přežijí obnovení stránky i zavření prohlížeče. Kurz si v něm pamatuje, které výzvy máš hotové.

localStorage.setItem('theme', 'dark')     // ulož (klíč, hodnota)
localStorage.getItem('theme')             // 'dark'
localStorage.getItem('neexistuje')        // null
localStorage.removeItem('theme')          // smaž

// Umí jen TEXT – objekty přes JSON
const settings = { theme: 'dark', fontSize: 16 }
localStorage.setItem('settings', JSON.stringify(settings))
const loaded = JSON.parse(localStorage.getItem('settings') ?? 'null')

// ❌ Bez JSON
localStorage.setItem('settings', settings)   // uloží '[object Object]'

7. Třídy v kostce

Třída je forma na bábovky: popisuje, jak vypadá a co umí každý objekt, který podle ní vyrobíš (new). V moderním Reactu je skoro nepotkáš – komponenty se píšou jako funkce. Občas se ale objeví (error boundary v lekci 10, knihovny, starší kód), tak ať je poznáš.

class Counter {
  count = 0                       // vlastnost s výchozí hodnotou

  constructor(start) {            // zavolá se při new Counter(…)
    this.count = start ?? 0       // this = objekt, který se právě vyrábí
  }

  increment() {                   // metoda
    this.count++
    return this.count
  }
}

const a = new Counter(10)
a.increment()   // 11
a.count         // 11

class LimitedCounter extends Counter {    // dědičnost: všechno z Counter + něco navíc
  increment() {
    if (this.count >= 3) return this.count
    return super.increment()              // zavolej verzi z rodičovské třídy
  }
}

Ověř si to

Kvíz Soubor má export default function Card(). Jak ho importuješ?

import { Card } from './Card'import Card from './Card'import * from './Card'

Kvíz Co vrátí new Date(2026, 0, 15).getMonth()?

10152026

Kvíz localStorage.setItem('user', { name: 'Jana' }). Co se uloží?

'{"name":"Jana"}''[object Object]'ObjektNic, vyhodí chybu

Kvíz Jak nejlépe zobrazíš 1234.5 jako „1 234,50 Kč“?

1234.5.toFixed(2) + ' Kč'new Intl.NumberFormat('cs-CZ', { style: 'currency', currency: 'CZK' }).format(1234.5)String(1234.5).replace('.', ',') + ' Kč'

Rozcvička

Výzva

Zaokrouhli a ulož jako text

Rozcvička

Dvě vestavěné funkce: jedna z objektu Math, druhá z JSON.

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

VÝZVA: Zaokrouhli a ulož jako text

1. roundUp(4.2) má vrátit 5 – zaokrouhlení nahoru (Math.ceil).
2. toJson({ a: 1 }) má vrátit text '{"a":1}' (JSON.stringify).

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

Mám hotovo

Výzva

Šuplík s nářadím

Lehká

Sedm pomocných funkcí, jaké najdeš skoro v každém projektu: formátování ceny a data, omezení do rozsahu, náhodné číslo, posun data a ukládání do localStorage.

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

VÝZVA: Šuplík s nářadím (Intl, Math, Date, JSON, localStorage)

Napiš těla sedmi pomocných funkcí, jaké má skoro každá aplikace.
Testy pod nimi se spustí samy a ukážou ✅/❌.

1. formatPrice(1234.5) → '1 234,50 Kč'
   new Intl.NumberFormat('cs-CZ', { style: 'currency', currency: 'CZK' }).format(…)
2. formatDate(new Date(2026, 9, 4)) → '4. 10. 2026'   (pozor: měsíce se v Date počítají od 0!)
   date.toLocaleDateString('cs-CZ')
3. clamp(n, min, max) – vrať n, ale ne menší než min a ne větší než max.
   clamp(15, 0, 10) → 10,  clamp(-3, 0, 10) → 0.   Math.min a Math.max.
4. randomInt(min, max) – náhodné CELÉ číslo od min do max VČETNĚ obou.
   Math.floor(Math.random() * (max - min + 1)) + min
5. addDays(date, days) – vrať NOVÉ datum posunuté o days dní. Původní datum neměň!
   const copy = new Date(date); copy.setDate(copy.getDate() + days)
6. saveJSON(key, value) – ulož libovolnou hodnotu do localStorage (JSON.stringify).
7. loadJSON(key, fallback) – načti hodnotu z localStorage (JSON.parse). Když tam nic není
   (getItem vrátí null) nebo je uložený text neplatný JSON, vrať fallback (try/catch).

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

Mám hotovo

Shrnutí

Moduly: pojmenované exporty importuj ve { }, výchozí bez nich. Cesta s ./ je vlastní soubor, bez ní balíček.
JSON převádí data na text a zpátky. Neumí funkce, undefined ani Date. Parse obal do try/catch.
Math: round/floor/ceil, náhodné celé číslo Math.floor(Math.random() * (max - min + 1)) + min.
Date: měsíce od nuly, počítá se v milisekundách, setDate mění objekt.
Intl a toLocale…('cs-CZ') naformátují čísla, měny a data po česku.
localStorage ukládá jen text – objekty přes JSON, čtení s výchozí hodnotou.
Třídy jsou forma na objekty (new, this, extends). V moderním Reactu je potkáš málokdy.

Načítám lekci…

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