Úloha 2 – Dva objekty: různé způsoby zápisu a přístup k vlastnostem

Úvod do úlohy

Když už umíme vytvořit jednoduchý objekt, je dalším krokem naučit se různé styly zápisu vlastností a procvičit si způsoby, jak k nim přistupovat. V praxi totiž nezáleží jen na tom, co objekt obsahuje, ale i na tom, jak přehledně a čitelně je zapsán. Objekty se totiž mohou rychle rozrůst – někdy mají jen 2–3 vlastnosti, jindy klidně několik desítek. Také se vyplatí rozlišovat, kdy použijeme tečkovou notaci a kdy hranatou, protože každá varianta má své místo.

Teorie a principy

• Styly zápisu vlastností:

  • Vše na jednom řádku – vhodné pro malé a krátké objekty.

  • Každá vlastnost na samostatném řádku – přehlednější u větších objektů.

• Přístup k hodnotám:

  • Tečková notace – nejpřehlednější a nejběžnější, pokud známe název vlastnosti předem.

  • Hranatá notace – vyžaduje řetězec, proto je flexibilní (umožní například použít proměnnou s názvem klíče).

Praktické příklady kódu

Typické chyby / záludnosti

• Zapomenuté uvozovky u klíče v hranaté notaci:

• Používání tečkové notace tam, kde klíč obsahuje mezeru nebo speciální znak:

• Záměna stylů zápisu – oba jsou správné, ale je dobré držet se jednotného stylu v rámci celého projektu.

Shrnutí

• Vlastnosti objektů lze psát buď všechny na jednom řádku, nebo každou na vlastní – záleží na délce a čitelnosti.

• K hodnotám přistupujeme tečkovou (objekt.klíč) nebo hranatou (objekt["klíč"]) notací.

• Tečková notace je rychlá a čitelná, hranatá je univerzálnější a nutná pro klíče s mezerami nebo dynamickými názvy.

• Pozor na správné použití uvozovek v hranaté notaci a na jednotnost stylu v kódu.

Úloha

Zadání (kontext úlohy):

Chceš uložit informace o dvou produktech v e-shopu. Každý produkt má mít několik vlastností. Vyzkoušíš si dva různé způsoby zápisu objektů a procvičíš si přístup k jejich vlastnostem pomocí obou zápisů – tečkové i hranaté notace.

Cíl úlohy:

Procvičit si zápis objektu na jednom řádku i po řádcích, práci s vlastnostmi a rozdíl mezi tečkovou a hranatou notací.

Vstupní podmínky:

• Student pracuje se soubory index.html a script.js.

• Do stránky bude vypisovat pomocí document.write().

Požadovaný výstup:

1. Vytvoř objekt produkt1 (např. název, cena, skladem) na jednom řádku.

2. Vytvoř objekt produkt2 se stejnými vlastnostmi, ale zapsaný každou vlastnost na nový řádek.

3. Vypiš název produkt1 pomocí tečkové notace.

4. Vypiš cenu produkt2 pomocí hranaté notace.

5. Vytvoř proměnnou s názvem klíče (např. "skladem") a použij ji k dynamickému přístupu k vlastnosti jednoho z objektů.

6. Přidej do produkt2 novou vlastnost s klíčem, který obsahuje mezeru (např. "cena s DPH") a vypiš ji pomocí hranaté notace.

Doplňující pokyny:

• Používej const pro deklaraci objektů.

• Nezapomeň na čárky mezi vlastnostmi.

• Klíče s mezerou musí být v uvozovkách a přístup je možný jen hranatou notací.

Řešení úlohy

Co je zde splněno

• produkt1 vytvořen na jednom řádku.

• produkt2 vytvořen po řádcích.

• Výpis pomocí tečkové notace (nazev).

• Výpis pomocí hranaté notace (cena).

• Dynamický přístup k vlastnosti pomocí proměnné.

• Přidána nová vlastnost s mezerou v názvu a vypsána pomocí hranaté notace.