Úloha 1 – JavaScript objekt: přístup, změna a přidávání vlastností

Úvod do úlohy

Objekty patří k nejdůležitějším stavebním kamenům jazyka JavaScript. Umožňují nám ukládat a organizovat související data do jedné struktury, místo abychom pracovali s mnoha jednotlivými proměnnými. V praxi se objekty používají k reprezentaci uživatelů, produktů, nastavení aplikace nebo třeba výsledků vyhledávání. Pokud se je naučíte používat správně už od začátku, otevřete si cestu k psaní přehlednějšího a udržovatelnějšího kódu.

Teorie a principy

• Objekt je kolekce dvojic klíč: hodnota. Klíč bývá textový řetězec (název vlastnosti), hodnota může být libovolný datový typ – číslo, text, boolean, pole i jiný objekt.

• Nejčastější způsob vytvoření objektu je objektový literál: zapisujeme jej mezi složené závorky {} a jednotlivé vlastnosti oddělujeme čárkou.

• Používáme klíčová slova const nebo let pro deklaraci. Konvence je používat const, protože tím zdůrazníme, že neměníme referenci na objekt, ale pouze jeho obsah.

Příklad:

K vlastnostem objektu přistupujeme pomocí:

• tečkové notace: uzivatel.jmeno

• hranaté notace: uzivatel["vek"] (užitečné, pokud je klíč dynamický nebo obsahuje mezery).

I když je objekt uložený v const, můžeme měnit jeho obsah:

Naopak nemůžeme přiřadit novou referenci:

Praktické příklady kódu

Typické chyby / záludnosti

• Zapomenuté čárky mezi vlastnostmi:

  → Tento zápis vyvolá chybu.

• Záměna rovnítka a dvojtečky:

• Pokus o přiřazení nové reference k const objektu: to není dovoleno, měnit lze jen obsah.

• Použití nevhodných názvů klíčů: pokud obsahují mezery, musí být v uvozovkách, např. "datum narození": "2000-01-01".

Shrnutí

• Objekt je kolekce vlastností ve formátu klíč: hodnota.

• Nejjednodušší zápis je objektový literál se složenými závorkami.

• Klíče oddělujeme čárkami, hodnoty přiřazujeme pomocí dvojtečky.

• Používejte const – nemění se reference, ale obsah ano.

• K přístupu k vlastnostem využíváme tečkovou nebo hranatou notaci.

• Pozor na typické chyby se zápisem (čárky, dvojtečky, uvozovky u klíčů s mezerou).

Úloha

Zadání (kontext úlohy):

Představ si, že připravuješ malý katalog filmů. Každý film bude reprezentován jedním objektem s několika vlastnostmi. Úkolem je nejen objekt vytvořit, ale také s ním aktivně pracovat: měnit hodnoty, přidávat nové a výsledky zobrazit přímo na stránce.

Cíl úlohy:

Procvičit si vytváření objektu, čtení a úpravu vlastností, přidání nové vlastnosti a výpis dat do HTML stránky.

Vstupní podmínky:

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

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

Požadovaný výstup:

1. Vytvoř objekt film se čtyřmi vlastnostmi (např. název, rok, délka v minutách, režisér).

2. Vypiš do stránky název filmu a jeho režiséra (tečková notace).

3. Vypiš do stránky rok a délku filmu (hranatá notace).

4. Změň hodnotu jedné vlastnosti (např. délku v minutách).

5. Přidej novou vlastnost (např. hodnocení) a vypiš ji do stránky.

6. Vytvoř jednoduchou větu, kde zkombinuješ více vlastností do jednoho textu (např. „Film Název z roku Rok režíroval Režisér“).

Doplňující pokyny:

• Používej const pro deklaraci objektu.

• Pamatuj, že měnit můžeš obsah objektu, nikoli celou referenci.

• Nezapomeň na čárky mezi vlastnostmi a dvojtečky mezi klíčem a hodnotou.

• Vypisuj text srozumitelně a s <br> pro nový řádek.

Řešení úlohy

Co je zde splněno

• Vytvořen objekt film se 4 vlastnostmi.

• Výpis hodnot pomocí tečkové i hranaté notace.

• Změna jedné vlastnosti (delka).

• Přidána nová vlastnost (hodnoceni).

• Zobrazení všech dat na stránce s <br> pro nový řádek.

• Vytvoření jednoduché věty kombinující více vlastností.