JavaScript pre začiatočníkov

prvá časť -- druhá časť -- tretia časť -- štvrtá časť

Ak nadizajnujeme webovú stránku v nejakom grafickom editore, prípadne priamo napíšeme kód HTML, výsledkom bude nehybná stránka, dokument. Ak chceme túto stránku "oživiť", pridať jej nejakú funkcionalitu, musíme k nej napísať krátky program, skript. Existujú dva základné spôsoby písania skriptov, každý má svoje možnosti a ohraničenia.

Skript na strane servera je program uložený na webovom serveri. Tento program sa spustí vo chvíli, keď si chce návštevník zobraziť stránku. Program vytvorí stránku a pošle ju návštevníkovi. Vďaka tomu môže stránka obsahovať aktuálne informácie. Ak stránka obsahuje formulár, môžu sa dáta po vyplnení odoslať takémuto programu. Skripty na strane servera často spolupracujú s databázami, v ktorých si ukladajú dáta. Údaje získané od jedného návštevníka sa môžu uložiť do databázy, a neskôr zobraziť ďalšiemu návštevníkovi.

Výhody: Stránka môže vždy zobrazovať aktuálne údaje, bez toho, že by ju jej autor musel stále prerábať. Návštevník stránky môže spôsobiť zmeny, ktoré sa zapamätajú, a zobrazia sa aj iným návštevníkom. Na toto všetko stačí návštevníkovi hocijaký webový prezerač, keďže prenášané dáta sú vo formáte HTML.

Nevýhody: Výsledky návštevníkovej aktivity sa prejavia až po ďaľšom načítaní stránky, čiže po kliknutí na linku, alebo po odoslaní formulára. Na serveri musí byť inštalovaný interpreter príslušného programovacieho jazyka. Stránky nemožno používať bez webového servera.

Skript na strane klienta je program vložený vo webovej stránke. Návštevníkovi stránky sa odošle ako text v tele stránky, a spustí sa v jeho webovom prezerači. Program môže okamžite reagovať na návštevníkove aktivity, napríklad klikanie myši, a môže ľubovoľne meniť obsah zobrazenej webovej stránky, prípadne prejsť na inú stránku alebo otvoriť nové okno.

Výhody: Stránka môže pohotovo reagovať na návštevníkove aktivity. Pomocou takéhoto skriptu možno vytvoriť animáciu, alebo interaktívnu počítačovú hru. Stránku možno používať aj bez webového servera, napríklad napáliť na CD.

Nevýhody: Všetky zmeny sa odohrávajú iba v návštevníkovom webovom prezerači, a po zavretí stránky sa stratia. Návštevníkov webový prezerač musí ovládať daný programovací jazyk; keďže existujú rôzne prezerače a z každého z nich rôzne verzie, stránka nemusí u každého návštevníka fungovať rovnako. Niektorí používatelia vo svojich prezeračoch vypínajú skripty, pretože nemajú radi rôzne efekty používané pri agresívnej reklame: otváranie nových okien, rušivé animácie. Ak je to možné, stránky treba písať tak, aby fungovali aj bez skriptovania na strane klienta.

Kombináciou oboch druhov skriptov možno spojiť niektoré ich výhody: stránky môžu okamžite reagovať na návštevníkove akcie, výsledky akcií možno zapamätať v databáze a zobraziť aj ďalším návštevníkom. Nevýhodou zostáva, že tieto stránky nebudú u každého návštevníka fungovať rovnako, a vyžadujú interpreter jazyka na webovom serveri. Navyše, treba vedieť dobre programovať aspoň v dvoch rôznych programovacích jazykoch.

Najčastejšie používaným skriptovacím jazykom na strane klienta je JavaScript. (Niektorí si ho mýlia s programovacím jazykom Java, sú to však dva veľmi odlišné jazyky. Názov "JavaScript" bol zvolený z reklamných dôvodov.) Kúsky programu do tela stránky vkladáme pomocou značky "script". Príkaz "alert" zobrazí dialógové okno s nápisom.

<script type="text/javascript"><!--
 alert('Ahoj!');
//--></script>

Program možno vložiť do hlavičky alebo tela stránky HTML. Skript vložený do tela vyzerá takto. Všimnite si značku "noscript"; jej obsah sa zobrazí vtedy, keď webový prezerač nepozná alebo má vypnutý JavaScript.

<html>
 <head>
  <title>Pokusná stránka s JavaScriptom</title>
 </head>
 <body>
  <p>Nejaký text.</p>
  <script type="text/javascript"><!--

   alert('Ahoj!');

  //--></script>
  <noscript>
   <p>Mimochodom, máte vypnutý JavaScript.</p>
  </noscript>
  <p>Nejaký text.</p>
 </body>
</html>

Všimnite si, že po otvorení webovej stránky sa najprv zobrazí iba prvý riadok textu, a potom sa otvorí okno so správou. Až po zavretí okna sa vypíše aj druhý riadok textu. Ak by sa stránka prenášala po internete príliš pomaly, príkaz jazyka JavaScript by sa vykonal ihneď po jeho načítaní, teda ešte predtým, ako by sa cez internet preniesol druhý riadok textu. Z toho vyplýva, že príkazy vložené do tela stránky by sa nemali pokúšať pristupovať k nasledujúcim častiam stránky.

<html>
 <head>
  <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  <title>Pokusná stránka s JavaScriptom</title>
 </head>
 <body onload="alert('Stránka je pripravená.');">
  <p>Nejaký text.</p>
  <p><input type="button" value="Stlač ma!"
      onclick="alert('Stlačili ste tlačidlo.');"/></p>
 </body>
</html>

V tomto príklade nie sú príkazy jazyka JavaScript vložené priamo do tela stránky, ale do udalostí prvkov HTML. Udalosť "onload" prvku "body" nastane vtedy, keď sa načíta celá stránka. Udalosť "onclick" prvku "input" nastane po kliknutí myšou na dané tlačidlo. (Udalosť môže teda nastať aj viackrát.) Jazyk HTML definuje niekoľko druhov udalostí. Príkaz "meta" v hlavičke stránky určuje, že príkazy udalostí sú napísané v jazyku JavaScript. (Existujú aj iné skriptovacie jazyky.)

Niekedy chceme, aby program vykonal aj zložitejšiu vec ako vypísanie jedného nápisu, a písanie dlhšieho programu do udalosti prvku HTML by bolo nepohodlné a neprehľadné. Korektnejšie je vytvoriť si pomocné funkcie, ktoré môžu obsahovať aj zložitejší program, a volať ich z udalosti pomocou názvu. (Oddeľovanie kódu programu od obsahu stránky je pre programátora nevyhnutné, aby mu dlhšie programy neprerástli cez hlavu.)

<html>
 <head>
  <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  <title>Pokusná stránka s JavaScriptom</title>
  <script type="text/javascript"><!--

   function uvodna_sprava() {
    alert('Stránka je pripravená.');
    alert('Stlačte tlačidlo.');
   }

   function dalsia_sprava() {
    alert('Stlačili ste tlačidlo.');
   }

  //--></script>
 </head>
 <body onload="uvodna_sprava();">
  <p>Nejaký text.</p>
  <p><input type="button" value="Stlač ma!"
      onclick="dalsia_sprava();"/></p>
 </body>
</html>

V tomto príklade je program v jazyku JavaScript vložený do hlavičky stránky, ale zatiaľ nerobí nič, len si pripraví dve funkcie na neskoršie použitie. Kľúčové slovo "function" znamená deklaráciu funkcie. Názvy funkcií "uvodna_sprava" a "dalsia_sprava" sme si zvolili ľubovoľne (mohli sa volať aj inak, za dodržania určitých obmedzení); keď tieto názvy uvedieme do udalostí v tele stránky, spustí sa funkcia s príslušným názvom.

Takto oddelené príkazy môžeme uložiť aj do osobitného súboru, nazvime ho napríklad "prikazy.js".

function uvodna_sprava() {
 alert('Stránka je pripravená.');
 alert('Stlačte tlačidlo.');
}

function dalsia_sprava() {
 alert('Stlačili ste tlačidlo.');
}

K stránke potom príkazy v jazyku JavaScript pripojíme pomocou značky "script" s parametrom "src" ukazujúcim na súbor s príkazmi. Takto možno jeden súbor s príkazmi vložiť aj do viacerých stránok.

<html>
 <head>
  <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  <title>Pokusná stránka s JavaScriptom</title>
  <script type="text/javascript" src="prikazy.js"></script>
 </head>
 <body onload="uvodna_sprava();">
  <p>Nejaký text.</p>
  <p><input type="button" value="Stlač ma!" onclick="dalsia_sprava()"/></p>
 </body>
</html>

Zhrnutie: Príkazy na strane klienta sú drobné programy vložené do webovej stránky, ktoré sa spúšťajú vo webovom prezerači. Jedným z používaných programovacích jazykov je JavaScript. Príkazy sa vkladajú pomocou značky "script" do hlavičky alebo tela programu, prípadne do udalostí prvkov HTML. Príkazy možno uložiť v osobitnom súbore.

Komentáre: 6