JavaScript na webové stránce

Vaše programy zatím vypisovaly text do konzole. JavaScript ale vznikl pro webové stránky: používá ho skoro každá stránka, kterou navštívíte, aby reagovala na kliknutí, ukazovala nový obsah nebo kontrolovala, co jste napsali. V této lekci se naučíte měnit webovou stránku pomocí JavaScriptu a na jejím konci si postavíte malý seznam úkolů.

Webová stránka se píše v HTML. HTML není programovací jazyk: popisuje, co na stránce je, třeba nadpisy, odstavce a tlačítka. Každá taková část je HTML prvek (anglicky element) a zapisuje se pomocí tagů:

<h1>Počasí</h1>
<p>Dnes je slunečno.</p>

<h1> je otevírací tag a </h1> zavírací tag (s lomítkem); mezi nimi je obsah prvku. h1 je hlavní nadpis, p odstavec. Prvky mohou obsahovat další prvky. Celá stránka je v prvku html, který má dvě části: head s informacemi o stránce, třeba s jejím titulkem, a body se vším, co na stránce vidíte. Každá stránka navíc potřebuje řádky <!DOCTYPE html> a <meta charset="utf-8">, aby se zobrazila správně; ty teď nemusíte řešit.

V této lekci má editor dva soubory a přepínáte mezi nimi záložkami nad ním: script.js je váš program v JavaScriptu a index.html je stránka. Náhled zobrazuje stránku a pod ní je konzole, kde uvidíte, co vypisuje console.log(), a také chyby.

Stránka načte program pomocí prvku script:

<script src="script.js"></script>

src="script.js" je atribut: doplňující informace, která se píše do otevíracího tagu ve tvaru nazev="hodnota". Atribut src (z anglického source, tedy zdroj) říká, který soubor se má načíst. Mezi tagy nic není, zavírací tag </script> tam ale být musí.

Prvek script patří na konec prvku body, těsně před </body>. Proč právě tam? Prohlížeč čte stránku shora dolů a skript spustí, jakmile na něj narazí. Skript na začátku stránky by se spustil dřív, než prohlížeč přečte prvky pod ním, a nemohl by je najít.

Skript se spustí jednou, když se stránka načte. Když kliknete na Spustit, stránka se načte znovu a s ní se znovu spustí i skript.

V souboru script.js už je krátký program: vypíše do konzole pozdrav a změní hlavní nadpis. Jak funguje, se dozvíte v dalším cvičení. Zatím se nic neděje, protože stránka skript ještě nenačítá.