Úloha 3 – Zalomení řádků v JavaScriptu a HTML

Ú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).

Úloha

Zadání (kontext úlohy):

Chceš vypsat text, který se má zobrazit na více řádků. V konzoli a v modálním okně (alert) použiješ \n, ale na HTML stránce musíš použít <br>. Tvým úkolem je vytvořit krátkou ukázku, která ukáže rozdíl mezi těmito způsoby.

Cíl úlohy:

Procvičit si použití \n pro zalomení v JavaScriptu a značky <br> pro zalomení v HTML.

Vstupní podmínky:

• Student vytvoří nový soubor index.html s vloženým skriptem v <script>.

• Není potřeba připojovat externí CSS ani knihovny.

Požadovaný výstup:

1. V konzoli se zobrazí text na dvou řádcích (použij \n).

2. V modálním okně (alert) se zobrazí text na třech řádcích (opět \n).

3. Na stránce se zobrazí text na dvou řádcích, tentokrát pomocí <br>.

Doplňující pokyny:

• Pamatuj, že \n v HTML nefunguje – musíš použít <br>.

• V konzoli nebo alertu se naopak <br> vypíše doslova jako text.

• Vyzkoušej si rozdíl mezi oběma způsoby.

Řešení úlohy

Co je zde splněno:

• v konzoli se text zalomí pomocí \n,

• v alertu se text rozdělí na tři řádky také díky \n,

• v HTML se zalomení udělá značkou <br>, protože \n by se jen vypsalo jako obyčejný znak,

• výsledek ukazuje rozdíl mezi chováním \n v JS a <br> v HTML.