Úloha 2 – DOM manipulace: čtení a zápis hodnot z inputu

Úvod do úlohy

Po zvládnutí základů přístupu k elementům se v další fázi naučíme měnit jejich obsah a vlastnosti. Právě tato schopnost dává JavaScriptu jeho sílu – umožňuje nám živě upravovat obsah webové stránky, reagovat na vstup uživatele, načítat data z jiných zdrojů nebo měnit styl prvků podle situace.

Typickým příkladem je aktualizace textu po kliknutí, výměna obrázku, zobrazení výsledku výpočtu nebo zvýraznění aktivního tlačítka. Abychom to dokázali bezpečně a efektivně, musíme pochopit rozdíly mezi různými vlastnostmi prvků – zejména textContent, innerHTML, value a src.

Teorie a principy

Každý HTML prvek má určité vlastnosti a atributy, které určují jeho obsah, vzhled i chování. Pomocí DOM s nimi můžeme pracovat přímo v JavaScriptu.

 Změna textu a HTML obsahu

• textContent
  Vrací nebo nastavuje čistý text uvnitř elementu. Je bezpečný, protože neinterpretuje HTML značky.
  Používá se tam, kde nechceme, aby se uživatelský vstup změnil v kód.

• innerHTML
  Vrací nebo nastavuje HTML obsah uvnitř elementu. Umožňuje vkládat značky, např. <b>, <p>, <img> atd.
  Je však potenciálně nebezpečný, pokud vkládáme text od uživatele – mohl by obsahovat škodlivý kód (XSS útok).

Práce s formuláři a obrázky

• value – používá se u vstupních polí (<input>, <textarea>), kde představuje aktuální hodnotu.

• src – odkazuje na zdroj obrázku, videa nebo skriptu. Pomocí této vlastnosti můžeme měnit obrázky za běhu programu.

Práce s atributy

Každý HTML element má také atributy, které lze číst a měnit metodami:

• getAttribute("nazev") – vrátí hodnotu atributu

• setAttribute("nazev", "hodnota") – nastaví novou hodnotu

• removeAttribute("nazev") – smaže atribut z elementu

Práce s CSS třídami

Pomocí objektu classList můžeme jednoduše ovládat CSS třídy:

• element.classList.add("trida") – přidá třídu

• element.classList.remove("trida") – odstraní třídu

• element.classList.toggle("trida") – přepne třídu (pokud je, odebere ji, jinak přidá)

• element.classList.contains("trida") – vrací true / false podle přítomnosti třídy

Praktické příklady kódu

Příklad 1: Bezpečná změna textu pomocí textContent

Příklad 2: Vložení HTML pomocí innerHTML (pozor na bezpečnost!)

Příklad 3: Změna atributu obrázku

Příklad 4: Přepínání CSS třídy pomocí classList

Typické chyby / záludnosti

1. Použití innerHTML pro neověřený obsah
   Pokud do innerHTML vložíte text z uživatelského vstupu, hrozí bezpečnostní riziko (XSS útok). Používejte ho jen tam, kde HTML znáte a kontrolujete.

2. Záměna textContent a innerHTML
textContent pracuje pouze s textem, zatímco innerHTML zpracuje i značky. Výsledky mohou být jiné, než očekáváte.

3. Změna atributu místo vlastnosti
   Např. element.src = "obrazek.png" má stejný efekt jako setAttribute("src", "obrazek.png"), ale ne všechny atributy fungují tímto způsobem (např. className vs. class).

4. Zapomenuté přepínání tříd
   Místo složité kontroly if (classList.contains(...)) používejte elegantní toggle().

Shrnutí

• textContent – bezpečně mění textový obsah.

• innerHTML – umožňuje vložit HTML, ale může být nebezpečný.

• value – pracuje s hodnotami formulářů.

• src, alt, href – atributy, které lze číst a měnit.

• setAttribute() a getAttribute() – univerzální práce s atributy.

• classList – pohodlný nástroj pro manipulaci s CSS třídami.

Úloha

Zadání (kontext úlohy):

Na stránce je jednoduchý formulář s jedním textovým polem a tlačítkem „Odeslat“. Po kliknutí na tlačítko se má pod formulářem zobrazit zpráva s textem „Děkujeme, [jméno]!“, kde [jméno] je obsah textového pole. Pokud uživatel klikne znovu, zpráva se má aktualizovat podle nové hodnoty.

Cíl úlohy:

Procvičit si čtení a zápis hodnot z formulářových prvků (value, textContent) a manipulaci s DOM. Naučit se reagovat na kliknutí bez znovunačtení stránky.

Vstupní podmínky:

Student pracuje pouze s jedním HTML souborem.
JavaScript je vložen do <script> na konci stránky.

Požadovaný výstup:

• Na stránce bude:

  • nadpis <h2> „Zadej své jméno“,

  • textové pole pro jméno,

  • tlačítko „Odeslat“,

  • prázdný <p> element pro zobrazení zprávy.

• Po kliknutí na tlačítko se:

  • získá text z pole,

  • vypíše do odstavce text ve tvaru „Děkujeme, [jméno]!“,

  • pokud je pole prázdné, zobrazí se text „Prosím, zadej jméno.“

Doplňující pokyny:

• Použij document.querySelector() pro výběr prvků.

• Využij event.preventDefault() k zastavení odeslání formuláře.

• Ověř, zda je hodnota pole prázdná pomocí if (vstup.value == "").

• Text měň přes textContent, nikoli innerHTML.

Řešení úlohy

Co je zde splněno

• Použití document.querySelector() pro výběr všech prvků.

• Zastavení klasického odeslání pomocí event.preventDefault().

• Čtení hodnoty z textového pole pomocí .value.

• Zápis textu do odstavce pomocí .textContent.

• Ověření, zda je pole prázdné (if (jmeno == "")).

• Zpráva se aktualizuje při každém kliknutí.

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

• Použití šipkové funkce pro stručnější zápis.

• Použití formulářové události submit místo kliknutí na tlačítko (profesionálnější přístup).

• Využití metody .trim() k odstranění mezer.

• Moderní řetězcová interpolace ${jmeno} místo řetězení.

• Přidán jednoduchý CSS styl pro lepší vzhled.

Poznámky

• Pokud by bylo tlačítko typu submit bez preventDefault(), stránka by se po odeslání znovu načetla.

• U začátečníků je vhodné psát == místo přísného ===, aby se soustředili na logiku, ne na typy.