Úvod do úlohy

Při výpisu textu se velmi brzy narazí na problém, jak správně „odskočit na nový řádek“. V HTML stránce se text obvykle zalamuje jinak než v konzoli nebo v modálním okně (např. alert). Studenti proto potřebují pochopit, že existuje rozdíl mezi vizuálním zalomením v prohlížeči a syntaktickým vložením nové řádky v řetězci. Správná volba prostředku je důležitá – jinak se může stát, že text na stránce nevypadá podle očekávání, nebo že se výstup v konzoli „slije“ do jednoho řádku.

Teorie a principy

  1. Zalomení v HTML (<br>)

    • V HTML dokumentu se mezery a nové řádky ignorují (převedou se na jednu mezeru).

    • Pokud chceme v textu opravdu nový řádek, musíme použít HTML značku <br>.

    • <br> je čistě vizuální pokyn pro prohlížeč – neexistuje v samotném řetězci.

  2. Zalomení v JavaScriptu (\n)

    • Úniková sekvence \n vloží nový řádek přímo do textového řetězce.

    • Funguje v prostředích, která čtou text znak po znaku – například v konzoli nebo v modálním okně (alert).

    • V HTML se \n ignoruje (zobrazí se jako mezera nebo vůbec), takže tam nestačí.

  3. Rozdíl mezi vizuálním a syntaktickým zalomením

    • <br> → ovlivňuje, jak se text zobrazí na stránce.

    • \n → je součástí řetězce, má význam při výpisu do konzole, souboru nebo alertu.

Praktické příklady kódu

Typické chyby / záludnosti

  • Použití \n v HTML

    • Studenti čekají, že \n zalomí text i na stránce. Nezobrazí se – je potřeba <br>.

  • Zapomenutí na bezpečnost innerHTML

    • Pokud do stránky vkládáme uživatelský text, neměli bychom ho bez úpravy spojovat s HTML. (Zde se to ukazuje jen jako demonstrace rozdílu mezi \n a <br>.)

  • Nesprávné očekávání v konzoli

    • V konzoli nebo alertu <br> nic neudělá, vypíše se jako obyčejný text.

Shrnutí

  • V HTML se zalomení řádků provádí pomocí značky <br>.

  • V řetězcích v JavaScriptu použijeme pro nový řádek únikovou sekvenci \n.

  • \n funguje v konzoli nebo alertu, ale ne v HTML.

  • <br> funguje v HTML, ale ne v konzoli ani alertu.

  • Je důležité rozlišovat vizuální formátování (HTML) a syntaktický znak v textu (\n).