Co je JavaScript a první skript

HTML dává stránce obsah, CSS vzhled a PHP běží na serveru. JavaScript je čtvrtý jazyk webu a dělá něco jiného: běží přímo v prohlížeči u návštěvníka a stránku „oživí" – umí reagovat na kliknutí, měnit obsah bez načítání, schovávat a ukazovat prvky nebo ověřovat formulář. Pojďme si ukázat, co to je a jak napsat první skript.

Čím se liší od PHP

Je to jednoduché, ale důležité: PHP běží na serveru – sestaví stránku dřív, než dorazí k návštěvníkovi. JavaScript běží až v prohlížeči, u návštěvníka. Proto může reagovat na to, co člověk zrovna dělá (kliká, píše), a měnit stránku bez toho, aby se znovu načítala. Často se obojí doplňuje: PHP připraví data, JavaScript se stará o interaktivitu.

Jak JavaScript přidat na stránku

Kód se vkládá do značky <script>. Buď přímo do stránky:

<script>
  console.log("Ahoj z JavaScriptu!");
</script>

…nebo z odděleného souboru (přehlednější, když je kódu víc):

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

Značku dávejte nejlépe na konec stránky, těsně před </body>. Tím je jisté, že HTML už existuje, než se skript spustí.

První skript: tři způsoby, jak něco „říct"

Když začínáte, hodí se vědět, jak si nechat něco vypsat:

• console.log("text") – vypíše do konzole prohlížeče (otevřete ji klávesou F12 → záložka Console). Vidíte to jen vy, hodí se na ladění.
• alert("text") – vyskočí okénko s hláškou. Rychlé, ale otravné, tak s mírou.
• změna stránky – to nejzajímavější: JavaScript umí přepsat text, barvu i cokoli dalšího.

A hned to vyzkoušíme naživo – tlačítko, které po kliknutí změní svůj text (zkuste na něj kliknout):

Za tím je drobný kousek JavaScriptu, který říká „po kliknutí změň text a barvu". Jak přesně vybrat prvek a zareagovat na kliknutí si ukážeme ve třetím díle.

Časté chyby

• Skript v <head> nahoře. Spustí se dřív, než existuje HTML, a nenajde prvky. Dávejte ho na konec <body>.
• Hledání výpisu na stránce. console.log není vidět na webu, jen v konzoli (F12).
• JavaScript ≠ Java. Když hledáte návod, hledejte „JavaScript".

Teď víte, co JavaScript je, jak ho na stránku dostat a že umí reagovat. V dalším díle si projdeme základní stavební kameny – proměnné, podmínky a funkce. 👉