Co je JavaScript

00:00:00

HTML dá stránce strukturu, CSS ji ozdobí – ale stránka je stále statická. Nemůže reagovat na akce uživatele, přepínat obsah, zobrazovat hodiny ani odesílat data bez obnovení stránky. To vše přidá JavaScript. Je to třetí pilíř webu a naučíš se ho v dalších lekcích.

Co je JavaScript?

JavaScript (zkráceně JS) je programovací jazyk, který běží přímo v prohlížeči. Na rozdíl od HTML a CSS jde o skutečný programovací jazyk – má podmínky, cykly, funkce, proměnné a logiku. Umí reagovat na události (klik, stisk klávesy, odeslání formuláře), měnit obsah stránky a komunikovat se serverem.

JavaScript byl vytvořen v roce 1995 a dnes je nejrozšířenějším programovacím jazykem na světě. Používá se nejen v prohlížeči, ale i na serverech (Node.js) nebo v mobilních aplikacích.

K čemu JavaScript slouží?

Příklady toho, co JavaScript na webu umí:

  • Zobrazit aktuální čas nebo datum bez obnovení stránky.
  • Přepnout tmavý a světlý režim po kliknutí na tlačítko.
  • Zobrazit nebo skrýt část stránky (rozbalovací menu, záložky).
  • Ověřit formulář před odesláním (zkontrolovat, jestli je e-mail vyplněn správně).
  • Načíst nový obsah ze serveru bez obnovení celé stránky (AJAX).
  • Vytvořit interaktivní mapy, animace nebo hry.

Jak připojit JavaScript

JavaScript se připojuje tagem <script>. Jsou dva způsoby:

Externím souborem (doporučeno)

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

Přímo v HTML

<script>
  console.log('Ahoj, světe!');
</script>

Důležité: tag <script> patří těsně před uzavírací tag </body>, nikoli do <head>. Pokud je skript v <head>, prohlížeč počká s vykreslením stránky, dokud se skript nenačte a nespustí – stránka se zobrazí pomaleji.

<!-- Správně -->
  <script src="date.js"></script>
</body>

Konzole prohlížeče

Při psaní JavaScriptu budeš hodně pracovat s konzolí prohlížeče. Otevřeš ji v DevTools (klávesa F12) v záložce Console. Příkaz console.log() vypíše hodnotu do konzole – to je základní způsob, jak zjistit, co se v kódu děje:

console.log('Skript se spustil');
console.log(document.title);

Chyby JavaScriptu se zobrazí červeně v konzoli. Konzole je tvůj nejlepší přítel při hledání chyb.

JavaScript a přístupnost

JavaScript je mocný nástroj, ale při špatném použití může přístupnost naopak zhoršit. Několik zásad:

  • Stránka by měla být použitelná i bez JavaScriptu – JavaScript je vylepšení, ne nutná podmínka.
  • Dynamicky přidávaný obsah musí být dostupný pro odečítače – používej aria-live pro oznámení změn.
  • Po každé změně stavu (například otevření menu) aktualizuj aria-expanded a podobné atributy.
  • Klávesnicová navigace musí fungovat i po JavaScriptových změnách – focus nesmí zmizet nebo skočit na nečekané místo.

Tip od Zdeňka

Zdeněk radii: Na tomto webu používám JavaScript velmi střídmě – hodiny, přepínač tmavého režimu, automatické zobrazení roku v zápatí. Nic víc. Méně JavaScriptu znamená rychlejší načítání, méně možností pro chyby a obvykle lepší přístupnost. Neboj se JS nepoužít, pokud to CSS nebo HTML zvládne samo.