Úloha 1 – 2D pole v JavaScriptu: přístup, cykly, úpravy

Úvod do úlohy

Doposud jsme pracovali hlavně s poli, která obsahovala jednoduché hodnoty – čísla, texty nebo booleany. V praxi ale často potřebujeme reprezentovat složitější data, kde nám už obyčejný jednorozměrný seznam nestačí. JavaScriptové pole naštěstí není omezeno jen na „primitivní“ hodnoty, ale může uchovávat i jiná pole nebo dokonce objekty. Díky tomu můžeme jednoduše vytvářet víceúrovňové struktury, jako jsou tabulky, matice, databázové záznamy nebo třeba herní mapy.

Teorie a principy

• Pole polí (dvourozměrná pole): Každý prvek pole může být zase polem. To nám umožní vytvořit strukturu připomínající tabulku s řádky a sloupci.

• Pole objektů: Velmi častý způsob, jak organizovat data. Každý prvek pole je objekt s více vlastnostmi.

• Kombinace: Pole může obsahovat různé typy – i objekty, i pole. To dává velkou flexibilitu, ale je potřeba myslet na čitelnost a konzistenci dat.

• Indexování: U dvourozměrných polí se používají dva indexy – první určuje „řádek“, druhý „sloupec“.

Praktické příklady kódu

1. Pole polí – matice

2. Pole objektů – seznam studentů

3. Kombinace – herní mapa

Typické chyby / záludnosti

• Záměna úrovní indexů: studenti často zapomenou, že u matice musíme psát matice[řádek][sloupec].

• Mix datových typů: do pole je možné uložit „cokoliv“, ale přílišná směsice (čísla, objekty, texty dohromady) může kód znepřehlednit.

• Přístup k neexistující hodnotě: když použijeme nesprávný index, dostaneme undefined. U složitějších struktur se to může stát snadno.

• Údržba dat: pokud pole obsahuje objekty, změna uvnitř objektu se projeví všude, kde na něj máme referenci.

Shrnutí

• Pole nemusí obsahovat jen jednoduché hodnoty, ale i jiná pole nebo objekty.

• Pole polí nám umožní reprezentovat matice nebo tabulky.

• Pole objektů se hodí pro složitější záznamy (např. seznam studentů, produkty e-shopu).

• Při práci je nutné dbát na správné indexování a konzistenci dat.

• Tento přístup umožňuje modelovat i složitější scénáře, jako jsou herní mapy nebo databázové tabulky.

Úloha

Zadání (kontext úlohy):

Pracuješ s jednoduchou „mapou“ jako s maticí (pole polí). Tvým úkolem je vypsat vybrané prvky, upravit část mapy a spočítat, kolikrát se v mapě vyskytuje určitý symbol.

Cíl úlohy:

Procvičit práci s dvourozměrným polem: přístup přes dva indexy, průchod vnořenými cykly, nahrazování hodnot a počítání výskytů.

Vstupní podmínky:

Student pracuje pouze s nově vytvořeným souborem script.js.

Požadovaný výstup:

1. Vytvoř matici mapa velikosti 3×3 (pole tří řádků, každý řádek je pole tří symbolů). Použij libovolné symboly, např. ".", "~", "#" nebo emoji jako 🟩, 🌳, 💧, 🏠.

2. Vypiš do konzole prvek z druhého řádku a třetího sloupce.

3. Změň celý poslední řádek tak, aby všechny jeho prvky byly stejné (např. všechny 🌳). Poté vypiš celou matici po řádcích.

4. Spočítej, kolikrát se v celé matici vyskytuje vybraný symbol (např. 🌳). Výsledek vypiš do konzole ve tvaru:

   • Počet výskytů: X

5. Nahraď všechny výskyty jiného zvoleného symbolu (např. 💧) za jiný (např. 🟩) ve středním řádku. Poté opět vypiš celou matici po řádcích.

Doplňující pokyny:

• Přístup do matice: mapa[radek][sloupec] (indexy začínají od 0).

• Pro výpis řádku můžeš použít join(" ").

• Pro úpravy a počítání použij vnořené cykly for.

• U podmínek piš výslovně: if (symbol == "🌳") { ... } (ekvivalent zkrácené podmínky nepoužívej)

Řešení úlohy

Co je zde splněno

• Vytvořena matice 3×3 s různými symboly.

• Vypsán konkrétní prvek [1][2] (druhý řádek, třetí sloupec).

• Celý poslední řádek změněn na 🌳 a vypsán stav matice.

• Spočítán celkový počet 🌳 v celé matici pomocí vnořených cyklů.

• Ve středním řádku nahrazeny všechny 💧 za 🟩 a matice opět vypsána.

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

• Použití metod map() a forEach() místo klasických for cyklů – kód je stručnější a modernější.

• Použití šablonových řetězců pro přehledný výpis.

• Podmínky psány zkráceně (=== a ternární operátor).