Úvod do jazyka JavaScript
Pri pohľade na názov tejto prednášky ste sa asi zľakli a sklamali, pretože to zase vyzerá ako úvodná kapitola k nejakému novému jazyku (už piatemu po HTML, CSS, PHP a SQL). Na jednej strane máte pravdu, ideme sa učiť nový jazyk, ktorého názov je JavaScript. Na druhej strane vás ale hneď na začiatok musím ubezpečiť, že si ho nejdeme preberať ako predošlé jazyky krok za krokom a vysvetlovať jeho syntax a všetky základné príkazy (je to nateraz zbytočné...). Iba si povieme, čo je to za jazyk, načo sa využíva, ako súvisí s tvorbou webu a prečo je dobré ho aspoň kus ovládať. V ďalších (a posledných) dvoch prednáškach tohto semestra si ukážeme len zopár jeho vymožeností, ktoré si rovno aplikujeme do našej webstránky, aby ste videli jeho praktické využitie a potom sa k nemu sem tam dostaneme v ďalších semestroch. Zároveň je to pravdepodobne (aspoň nateraz) posledný jazyk, s ktorým sa stretnete na tomto portáli, teda aspoň v bakalárskom a inžinierskom stupni určite.
Čo je to teda za jazyk? Jeho názov je zložený z dvoch slov, kde prvým je slovo Java (vyslovuj džava), čo je samostatný programovací jazyk (niečo podobné ako PHP, len samozrejme s inou vlastnou syntaxou, pravidlami a logikou). Jazyk JavaScript vychádza z tohto jazyka, má podobnú syntax, preto ten názov. Druhým slovom je Script (skript), ktoré evokuje, že to bude skriptovací jazyk (na tvorenie skriptov). So slovom skript, resp. skriptovací jazyk sme sa stretli v kapitole o externých zdrojoch kódu, kde sme si do stránky pridali mapku z služby Google Maps.
Ako sme si už povedali, pomocou tohto skriptovacieho jazyka je možné tvoriť skripty, čo je akýsi menší program, ktorý je ľahko spustiteľný na strane klienta. Vo väčšine slúži na zautomatizovanie viacerých príkazov (alebo nejakej funkcionality), ktoré by mohol postupne po jednom spúšťať aj klient. Ak si spomeniete, vraveli sme si, že PHP je jazyk na strane servera, pretože jeho kód sa spracúva na serveri príslušným prostredím (technológiou). Na to, aby sme si mohli skúšať kód v jazyku PHP na vlastnom počítači, bolo nutné inštalovať lokálny server s PHP podporou. To, že je jazyk JavaScript na strane klienta znamená, že sa jeho kód spracúva na strane klienta, kde klientom sme my – náš vlastný počítač.
Na spustenie kódu v jazyku JavaScript teda nie je nutný žiadny server ani inštalácia nejakého prostredia alebo programu. Stačí nám vytvoriť kód a otvoriť ho napríklad v prehliadači (podobne ako pri jazyku HTML a CSS). Áno, webový prehliadač je schopný rozoznať a prečítať kód v jazyku JS, pretože práve na tvorbu a obohatenie webových stránok bol tento jazyk vymyslený. Pomocou neho je možné do stránky pridať viaceré interaktívne a najmä vizáulne atraktívne prvky. Nejdeme si tu menovať, čo všetko sa dá, postupne to budeme zisťovať. Dalo by sa to zhrnúť nateraz asi tak, že takmer všetko, čo vidíte na stránke také iné, nie štandardné, pekné alebo lietajúce, je spravené pomocou jazyka JavaScript. Môžu to byť vyskakovacie okná, okná s upozorneniami, okná na potvrdenie, niečo čo sa hýbe, niečo čo zmizne, niečo čo sa vykoná/zmení bez toho, aby sa stránka refrešla, niečo čo sa automaticky objaví,zmení a hýbe a tak ďalej. Keďže tento jazyk slúži len na obohatenie webstránok, nie je ho nutné samozrejme ovládať pre vytvorenie webstránky, preto sa k nemu dostávame až teraz. V mnohých prípadoch je ale však veľmi nápomocný a niekedy vie naozaj markantne zmeniť vzhľad webstránky.
Ako sme už povedali, jeho syntax vychádza z jazyka Java, ktorý ale nevieme. Nezúfajte, ani nám to nebude vadiť, základná logika a princíp programovacích jazykov sú rovnaké. Mení sa len spôsob zápisu ako používanie úvodzoviek, zátvoriek, bodkočiarok a podobne, takže písanie kódu v tomto jazyku bude dosť podobné ako v jazyku PHP. Tento kód budeme písať normálne v našich súboroch .html alebo .php, jednoducho tam, kde píšeme aj kód HTML. Podobne, ako keď sme vkladali mapku na stránku, len pre vloženie kódu JavaScript zadáme párový tag na script, ktorý určuje, že sa v ňom bude nachádzať kód v skriptovacom jazyku (vo väčšine JS). Tento tag môžeme na stránke vkladať kdekoľvek (v head a v body) a aj niekoľkokrát, jednoducho sa k nemu prehliadač dostane pri čítaní kódu od hora dole. Je ale dobrým zvykom vkladať skripty, pokiaľ je to možné, na jedno mieste, aby bol samozrejme kód stránky čitateľnejší a prehľadnejší a aby bol v kóde poriadok. Mohlo by to vyzerať nejako takto:
<body>
<h1>Kod v HTML</h1>
<script>
//kod v jazyku JavaScript
</script>
</body>
Princíp a fungovanie tohto jazyka je niečo ako HTML. Zadáme dotaz na našu stránku, ktorý ide na server. Tam sa spracuje kód v jazyku PHP a pošle nám výsledok – kód v HTML a v JavaScripte do prehliadača. Následne prehliadač prechádza tento kód od začiatku do konca a vyhodnocuje, resp. zobrazuje. Čo sa týka jazyka HTML, ten sa zobrazuje (spolu s CSS) a JavaScript sa vykonáva, podobne ako PHP (vykonávajú sa príkazy, priradenia do premenných, spúšťajú sa funkcie a podobne). Tento kód (v JS) vo väčšine zapríčiní nejakú interakciu s prehliadačom alebo konkrétne so stránkou (s prvkami HTML a podobne). Keďže je to programovací jazyk, môžeme v ňom rovnako ako v PHP programovať logiku, čiže vytvárať premenné a vykonávať s nimi operácie.
Najčastejšie sa však jazyk JS využíva na nejakú interakciu s používateľom cez prehliadať (vyskakovacia okná) alebo na zmenu a manipuláciu s elementami na stránke. Pomocou tohto jazyka vieme šikovne na základe nejakej akcie (napríklad kliknutím na niečo) pristúpiť k akémukoľvek prvku na stránke a nejako ho zmeniť (zmeniť mu dizajn, pridať triedu, zmeniť jeho obsah, pridať za neho niečo a podobne...). Práve toto je také gro tohto jazyka. Ide o to, že si v tomto jazyku môžeme napísať funkcie, ktoré niečo spravia a ich vyvolanie priradiť ku kliku na nejaký prvok na stránke. Samozrejme, táto akcia sa vykoná bez toho, aby sa stránka refrešla, pretože refreš znamená dotaz-odpoveď zo strany klienta k serveru a späť. Toto je klientsky jazyk, takže žiadny refreš a dotaz na stránky, všetko sa deje s aktuálnym kódom, ktorý sme načítali zo servera. Dosť ale bolo teórie, poďme hneď na to :)