Úloha 5 – Interaktivní kategorie produktů s přepínáním obsahu

Úvod do úlohy

Závěrečná část práce s DOM směřuje k tomu, aby studenti nejen rozuměli jednotlivým technikám manipulace s prvky, ale dokázali psát přehledný, efektivní a bezpečný kód. V praxi se často setkáme s projekty, kde je JavaScript neorganizovaný, obsahuje zbytečné opakování, přímé zásahy do stylů a nadbytečné operace nad DOMem. Takový kód bývá pomalý, obtížně udržovatelný a náchylný k chybám.

Cílem této kapitoly je naučit se optimalizovat práci s DOM, minimalizovat přepočty rozložení stránky (reflow) a zachovat jasnou strukturu kódu podle principů oddělení obsahu, stylu a logiky.

Teorie a principy

Minimalizace zásahů do DOM

Každý přístup nebo změna v DOM může způsobit tzv. reflow – přepočet pozic a rozměrů prvků. Pokud provádíme mnoho takových změn po sobě (například v cyklu), může dojít ke zpomalení celé stránky.

Základní zásady:

• Měňte více prvků najednou pomocí DocumentFragment.

• Vkládejte do DOM až hotové bloky místo jednotlivých uzlů.

• Snažte se nepřistupovat zbytečně ke stejnému elementu opakovaně – uložte si ho do proměnné.

• Místo přímého měnění stylů (element.style.color = "red") používejte CSS třídy a classList.

DRY princip (Don’t Repeat Yourself)

Duplicitní kód bývá hlavním zdrojem chyb.
Pokud se stejná akce provádí na více místech, zabalte ji do funkce a znovu použijte.

Příklad: místo tří identických posluchačů kliknutí můžeme vytvořit jedinou univerzální funkci, kterou voláme s parametrem.

Oddělení logiky, obsahu a stylu

Moderní webové aplikace dodržují zásadu:

• HTML = struktura a obsah

• CSS = vzhled

• JavaScript = chování

Znamená to, že JavaScript by neměl obsahovat přímé definice stylů, ale měl by spíše měnit třídy nebo atributy. To udržuje kód přehledný a usnadňuje spolupráci mezi vývojáři.

Bezpečnost a čitelnost

• Vyhýbejte se vkládání neověřeného obsahu pomocí innerHTML.

• Používejte jasné názvy proměnných (např. btnOdeslat místo b1).

• Přidávejte komentáře u méně zřejmých částí.

• Kontrolujte, zda prvky existují, než s nimi pracujete.

Praktické příklady kódu

Příklad 1: Neefektivní verze

Příklad 2: Optimalizovaná verze s DocumentFragment

Příklad 3: Oddělení stylu od logiky

Tento přístup je přehlednější a umožňuje později měnit vzhled pouze v CSS bez zásahu do JavaScriptu.

Příklad 4: Použití pomocné funkce (DRY princip)

Typické chyby / záludnosti

1. Zbytečné přístupy k DOM
   – Při každém volání document.getElementById() prohlížeč znovu prochází strukturu. Uložte si prvek do proměnné.

2. Nadměrné úpravy stylů v kódu
   – Udržujte stylování v CSS. V JavaScriptu měňte jen třídy.

3. Vkládání HTML bez kontroly
   – innerHTML je výkonný, ale může být nebezpečný. Používejte textContent, pokud nepotřebujete značky.

4. Nepřehledná logika bez funkcí
   – Kód rozdělte do menších funkčních celků. Každá funkce by měla mít jasný účel.

5. Ignorování výkonu při generování většího obsahu
   – Vždy zvažte využití DocumentFragment nebo dočasných proměnných.

Shrnutí

• Optimalizujte manipulaci s DOM – méně změn, ale promyšleně.

• Používejte DocumentFragment pro hromadné vkládání prvků.

• Dodržujte zásady oddělení obsahu, stylu a logiky.

• Dbejte na čitelnost, opakovanou použitelnost a bezpečnost kódu.

• Vyhněte se duplicitám a používejte funkce podle DRY principu.

• Každá změna v DOM by měla být záměrná, promyšlená a efektivní.

Úloha

Zadání (kontext úlohy):

Na stránce jsou tři tlačítka – „Ovoce“, „Zelenina“ a „Nápoje“. Po kliknutí na jedno z nich se v seznamu zobrazí odpovídající skupina produktů. Po opětovném kliknutí na stejné tlačítko se seznam vymaže. Vše musí fungovat efektivně – bez zbytečných přístupů k DOM a bez přímého měnění stylů.

Cíl úlohy:

Procvičit efektivní manipulaci s DOM pomocí DocumentFragment, oddělení stylu od logiky (pomocí CSS tříd) a práci s funkcemi podle DRY principu.

Vstupní podmínky:

Student pracuje pouze s jedním HTML souborem.
Data jsou uložena přímo v JavaScriptu v podobě tří polí (ovoce, zelenina, nápoje).
Každé kliknutí přepíše obsah seznamu novou sadou položek, nebo ho vyprázdní, pokud se klikne znovu na stejnou kategorii.

Požadovaný výstup:

• Na stránce bude:

  • nadpis „Seznam produktů“,

  • tři tlačítka: „Ovoce“, „Zelenina“, „Nápoje“,

  • prázdný <ul id="seznam">.

• Po kliknutí na tlačítko se seznam naplní položkami příslušné kategorie.

• Kliknutí na stejné tlačítko podruhé seznam vyprázdní.

• Vložené položky musí být vytvořeny pomocí DocumentFragment.

• Aktivní tlačítko se vizuálně zvýrazní pomocí CSS třídy .aktivni.

Doplňující pokyny:

• Použij classList.add() a remove() k přepínání zvýraznění tlačítek.

• Zabraň opakovanému vykreslování stejné kategorie.

• Vyhni se přímému nastavování stylů pomocí style, využij třídu .aktivni.

• Logiku rozděl do tří funkcí: vytvorSeznam(pole), vymazSeznam(), zmenKategorii().

Řešení úlohy

Co je zde splněno

• Oddělení logiky a stylu: zvýraznění přes .aktivni (žádné style v JS).

• Efektivní render: položky se vkládají jedním krokem přes DocumentFragment.

• Tři požadované funkce: vytvorSeznam(pole), vymazSeznam(), zmenKategorii().

• Přepínání aktivního tlačítka přes classList.add()/remove().

• Zabránění zbytečnému překreslení: klik na stejné aktivní tlačítko seznam vyprázdní.

• Vše v jednom HTML souboru, bez nadbytečných přístupů k DOM.

Vylepšení oproti začátečnické verzi

• Delegace událostí na obalujícím prvku tlačítek → méně listenerů, snadné rozšíření.

• Map + dataset pro čisté párování tlačítek a dat.

• Stručné šipkové funkce, for...of, closest() – čitelný, moderní kód.

• Vyprázdnění seznamu přes textContent = "" (rychlé), ale stále vytváření položek přes DocumentFragment.