JavaScript pre začiatočníkov (druhá časť)

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

V prvej časti kurzu sme si povedali, že program v jazyku JavaScript sa spúšťa v čitateľovom webovom prezerači, a môže sa vykonať počas načítavania stránky, alebo keď nastane nejaká udalosť (načítanie celej stránky, stlačenie tlačidla, atď). Existuje ešte ďalšia možnosť, ktorú sme nespomínali; spustený príkaz môže načasovať spustenie ďalšieho príkazu o stanovený čas, napríklad o 1/10 sekundy. (Takto sa robia animácie.) Dnes si povieme, čo môže takýto program robiť.

Program v JavaScripte môže zasahovať do údajov načítaných vo webovom prezerači. Môže meniť obsah zobrazenej webovej stránky, a využívať niektoré funkcie prezerača, ako napríklad odoslať formulár alebo prejsť na inú stránku. V niektorých prezeračoch je možné zoznam povolených funkcií podrobnejšie nastaviť (napríklad zakázať otvorenie nového okna, pretože túto funkciu veľmi otravným spôsobom zneužívajú niektoré reklamy). Program v JavaScripte nemôže vyjsť von z prezerača; nemôže manipulovať so súbormi na disku, ani zasahovať do činnosti iných programov.

Obsah zobrazenej webovej stránky možno meniť troma základnými spôsobmi.

1) Počas načítavania tela stránky môžeme vkladať vlastný kód HTML pomocou príkazu "document.write". Vezmime si napríklad nasledujúcu stránku:

<html>
 <head>
  <title>Pokusná stránka bez JavaScriptu</title>
 </head>
 <body>
  <p>Nejaký text</p>
 </body>
</html>

Ak by sme chceli daný odstavec textu vypísať pomocou programu JavaScript, vyzeralo by to takto:

<html>
 <head>
  <title>Pokusná stránka s JavaScriptom</title>
 </head>
 <body>
  <script language="JavaScript"><!--

   document.write('<p>Nejaký text</p>');

  //--></script>
 </body>
</html>

Takáto úprava stránky síce nedáva veľký zmysel, ale umožní nám sústrediť sa na formálnu stránku. Za príkazom "document.write" nasledujú okrúhle zátvorky s údajmi, ktoré sa majú vypísať do tela stránky; na konci príkazu je bodkočiarka. Ak chceme nejaký text vypísať doslova, vložíme ho do apostrofov. Keby sme chceli vypísať viacero textov, môžeme ich spojiť znamienkom plus (napríklad takto: 'Nejaký' + ' ' + 'text'), alebo použiť viac príkazov "document.write".

A teraz jeden praktický príklad -- zobrazenie presného času.

<html>
 <head>
  <title>Pokusná stránka s JavaScriptom</title>
 </head>
 <body>
  <script language="JavaScript"><!--

   var d = new Date();
   document.write('<p>Čas: ' + d.getHours() + ':' + d.getMinutes() + '</p>');

  //--></script>
 </body>
</html>

V prvom riadku sa vytvorí premenná "d", do ktorej sa priradí momentálny dátum a čas. (Je to čas na počítači návštevníka stránky, nie na serveri.) V druhom riadku sa z premennej "d" využije údaj o hodinách a minútach, a všetky zadané údaje sa spoja do jedného textu, napríklad: 'Čas: ' + 12 + ':' + 30 + '' = 'Čas: 12:30'. Výsledný text sa vypíše do tela stránky.

<html>
 <head>
  <title>Pokusná stránka s JavaScriptom</title>
 </head>
 <body>
  <script language="JavaScript"><!--

   for (var i = 1; i <= 1000; i++) {
    document.write('<p>' + i + '</p>');
   }

  //--></script>
 </body>
</html>

V tomto príklade sa do tela stránky vypíše 1000 riadkov s číslami od 1 do 1000. Takúto stránku by sme vedeli vyrobiť aj bez JavaScriptu, ale takto je to podstatne jednoduchšie. (Stránka však nebude fungovať, ak má čitateľ vypnutý JavaScript. Keby sme namiesto JavaScriptu použili nejaký jazyk na strane servera, napríklad PHP alebo Ruby, stránka by sa zobrazila správne každému čitateľovi, ale musela by byť umiestnená na webovom serveri.)

2) Kód HTML jednotlivých prvkov stránky môžeme upravovať pomocou vlastností "innerHTML" a "outerHTML". Prvku, ktorý chceme upravovať, priradíme identifikátor pomocou vlastnosti "id". Napríklad:

<p id="p1">Nejaký text.</p>

Ak v programe zadáme "document.getElementById('p1')", dostaneme tento odstavec. Vlastnosť "innerHTML" obsahuje to, čo je vo vnútri značky, teda 'Nejaký text.'. Vlastnosť "outerHTML" zahŕňa aj samotnú značku, teda 'Nejaký text.'.

<html>
 <head>
  <title>Pokusná stránka s JavaScriptom</title>
  <script language="JavaScript"><!--

   function button_click() {
    var t1 = document.getElementById('t1');
    var p1 = document.getElementById('p1');
    p1.innerHTML = 'Ahoj ' + t1.value;
   }

  //--></script>
 </head>
 <body>
  <p>Zadaj meno:
   <input type="text" id="t1" name="t1"/>
   <input type="button" value="Nastav" onclick="button_click();"/>
  </p>
  <p id="p1">Ahoj</p>
 </body>
</html>

V tomto príklade sa zo stránky využijú dva pomenované objekty: vstupné textové pole označené "t1" a odstavec označený "p1". Pomocou "t1.value" zistíme, čo je momentálne napísané v textovom poli "t1" (napríklad 'Vilo') a do odstavca "p1" vložíme spojenie textov (napríklad 'Ahoj ' + 'Vilo').

3) Mnoho programov v JavaScripte sa dá napísať aj bez toho, aby sme nejako zasahovali do kódu HTML. Stačí pracovať s vlastnosťami objektov na stránke. Napríklad keby nám v predchádzajúcom príklade stačilo vypísať výsledný text do iného textového poľa, mohol by program vyzerať takto:

<html>
 <head>
  <title>Pokusná stránka s JavaScriptom</title>
  <script language="JavaScript"><!--

   function button_click() {
    var t1 = document.getElementById('t1');
    var t2 = document.getElementById('t2');
    t2.value = 'Ahoj ' + t1.value;
   }

  //--></script>
 </head>
 <body>
  <p><input type="text" id="t1" name="t1"/></p>
  <p><input type="button" value="Nastav" onclick="button_click();"/></p>
  <p><input type="text" id="t2" name="t2" readonly="readonly"/></p>
 </body>
</html>

V dnešnom poslednom príklade pred odoslaním formulára skontrolujeme, či zadaná e-mailová adresa obsahuje zavináč. Využijeme na to udalosť "onsubmit" prvku "form". Z volanej funkcie príkazom "return" vrátime hodnotu "true", ak chceme povoliť odoslanie formulára, a "false", ak chceme odoslanie zrušiť. Príkaz "return" musíme použiť aj v kóde vlastnosti "onsubmit".

<html>
 <head>
  <title>Pokusná stránka s JavaScriptom</title>
  <script language="JavaScript"><!--

   function form_submit() {
    var t1 = document.getElementById('t1');
    if (t1.value.indexOf('@') < 0) {
     alert('E-mail musí obsahovať zavináč.');
     return false;
    }
    return true;
   }

  //--></script>
 </head>
 <body>
  <form method="GET" action="#" onsubmit="return form_submit();">
   <p>E-mail: <input type="text" id="t1" name="t1"/></p>
   <p><input type="submit" value="Pošli"/></p>
  </form>
 </body>
</html>

Zhrnutie: Program v jazyku JavaScript môže ovplyvňovať obsah webovej stránky, v ktorej sa nachádza. Počas načítavania stránky môže vkladať vlastný kód HTML pomocou príkazu "document.write", neskôr môže upravovať kód HTML jednotlivých prvkov pomocou vlastností "innerHTML" a "outerHTML". Vo väčšine prípadov sa však písaniu kódu HTML môžeme vyhnúť vhodným využitím vlastností a udalostí jednotlivých prvkov na stránke.

Komentáre: 3