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

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

V predchádzajúcej časti sme sa naučili pracovať s číselnými a textovými premennými. Dnes si ukážeme, ako pracovať s prvkami na stránke.

Jedným z historicky prvých spôsobov využitia skriptov na webovej stránke je zmena obrázku, keď naň používateľ ukáže kurzorom. Využijeme pritom udalosť "onmouseover", ktorá sa zavolá, keď sa kurzor myši ocitne nad daným prvkom, a udalosť "onmouseout", ktorá sa zavolá, keď kurzor myši obrázok opustí. Pripravíme si dva obrázky rovnakej veľkosti a uložíme ich do adresára, v ktorom je stránka HTML. Súbor "obr0.jpeg" bude obsahovať obrázok v štandardnom tvare a súbor "obr1.jpeg" bude obsahovať zvýraznený obrázok, keď je nad ním kurzor. Spôsobom zvýraznenia závisí iba od fantázie autora stránky; môže to byť napríklad pôvodný obrázok so svetlom v pozadí a kontrastnejších farbách. Obrázku pridelíme identifikátor, napríklad "i1", a do udalostí doplníme volanie funkcií.

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

   function ukaz() {
    var i1 = document.getElementById('i1');
    i1.src = 'obr1.jpeg';
   }

   function skry() {
    var i1 = document.getElementById('i1');
    i1.src = 'obr0.jpeg';
   }

  //--></script>
 </head>
 <body>
  <p>
   <img id="i1" src="obr0.jpeg" onmouseover="ukaz();" onmouseout="skry();"/>
  </p>
 </body>
</html>

Keď sa kurzor myši ocitne nad obrázkom, zavolá sa funkcia "ukaz", ktorá do premennej "i1" uloží obrázok z webovej stránky označený ako "i1". V nasledujúcom kroku sa do vlastnosti "src" priradí názov nového súboru s obrázkom. Vo funkcii "skry" sa podobne priradí názov pôvodného súboru.

Ak tento príklad vyskúšame na internete s veľkými súbormi, ukáže sa jeden problém. Keď prejdeme myšou nad obrázok, začne sa načítavať súbor "obr1.jpeg", ale dokiaľ sa nenačíta, neprejaví sa na stránke žiadna zmena, takže to spočiatku vyzerá, ako keby program nefungoval. Až keď sa súbor raz načíta, bude sa pri pohybe myši ponad obrázok zobrazovať správne.

Aby sme túto chybu opravili, potrebuje niekde na stránke hneď na začiatku využiť aj súbor "obr1.jpeg", aby sa načítal spolu s načítaním stránky. Jednou z možností je vytvoriť si pomocný obrázok s týmto súborom, ktorý síce nebude zobrazený na stránke, ale spôsobí, že sa súbor načíta. Pomocný obrázok vytvoríme pomocou príkazu "new Image()". Kľúčové slovo "new" sa používa na vytvorenie nových objektov v pamäti.

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

   var pomocny;

   function main() {
    pomocny = new Image();
    pomocny.src = 'obr1.jpeg';
   }

   function ukaz() {
    var i1 = document.getElementById('i1');
    i1.src = 'obr1.jpeg';
   }

   function skry() {
    var i1 = document.getElementById('i1');
    i1.src = 'obr0.jpeg';
   }

  //--></script>
 </head>
 <body onload="main();">
  <p>
   <img id="i1" src="obr0.jpeg" onmouseover="ukaz();" onmouseout="skry();"/>
  </p>
 </body>
</html>

Pri spustení stránky sa zavolá funkcia "main", ktorá do premennej s názvom "pomocny" priradí nový pomocný obrázok, a nastaví mu súbor "obr1.jpeg". Premenná "pomocny" je vytvorená pomocou príkazu "var pomocny"; ten je umiestnený mimo funkcií, aby táto premenná existovala v pamäti počas celej doby existencie stránky (nielen počas vykonávania funkcie, v ktorej sa príkaz nachádza). Zvyšok programu je rovnaký; bude však fungovať rýchlejšie, pretože súbor "obr1.jpeg" už bude načítaný v pamäti.

Skripty môžeme využiť na zvýšenie prehľadnosti webových formulárov, ak jednotlivé časti navzájom logicky súvisia. Predstavme si napríklad formulár, v ktorom si používateľ môže pomocou zaškrtávacieho políčka označiť, či chce dostávať nejaké správy na e-mail, a potom do vedľajšieho textového poľa môže zadať e-mailovú adresu. Až keď bol dizajn schválený, si uvedomíte jednu nepríjemnú chybu -- čo ak používateľ zadá svoju e-mailovú adresu, ale zabudne zaškrtnúť príslušné políčko? Posielať e-maily alebo nie? Používateľ ich skoro určite chce, inak by tú adresu nevypĺňal, ale firemný právnik varuje, že takýto logický výklad by mohol mať pre firmu nepríjemné dôsledky. Dizajn sa už zmeniť nedá, lebo marketingové oddelenie včera na základe schváleného dizajnu vytvorilo reklamné materiály a objednalo drahú reklamu. (Áno, v skutočnom živote musia programátori riešiť aj problémy, ktoré svojou podstatou nie sú technické.) Čo teraz? Situáciu by mohol vyriešiť skript, ktorý v prípade nezaškrtnutého políčka jednoducho nedovolí napísať e-mail. (Napriek tomu treba údaje ešte raz overiť po odoslaní, pretože používateľ mohol mať vypnutý JavaScript.)

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

   function kontrola() {
    var c1 = document.getElementById('c1');
    var t1 = document.getElementById('t1');
    if (c1.checked) {
     t1.disabled = false;
    } else {
     t1.disabled = true;
     t1.value = '';
    }
   }

  //--></script>
 </head>
 <body onload="kontrola();">
  <p>
   <input type="checkbox" id="c1" name="c1" onclick="kontrola();"/>
   Posielať správy na e-mail:
   <input type="text" id="t1" name="t1"/>
  </p>
 </body>
</html>

Zaškrtávacie políčko si pomenujeme napríklad "c1" a textové pole "t1". Vždy, keď sa zmení stav zaškrtávacieho políčka, nastane udalosť "onclick" a zavolá sa naša funkcia s názvom "kontrola". (Názov "onclick" netreba chápať príliš doslovne; táto udalosť vzniká nielen po kliknutí myšou, ale aj pri zaškrtnutí pomocou medzerníka na klávesnici.) Funkciu "kontrola" zavoláme aj pri spustení stránky; veď ak je zaškrtávacie políčko v pôvodnom stave neoznačené, treba textové pole zablokovať hneď na začiatku. Pri práci so zaškrtávacím políčkom využijeme jeho vlastnosť "checked", či je označené; pri práci s textovým poľom využijeme vlastnosť "disabled" na jeho vypnutie, a pomocou "value" pre istotu pri vypnutí vymažeme textové pole, ak doňho náhodou používateľ už predtým niečo napísal.

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

   function kontrola() {
    var c1 = document.getElementById('c1');
    var s1 = document.getElementById('s1');
    var b1 = document.getElementById('b1');
    b1.disabled = !(c1.checked && (0 < s1.selectedIndex));
   }

  //--></script>
 </head>
 <body onload="kontrola();">
  <p>
   <input type="checkbox" id="c1" name="c1" onclick="kontrola();"/>
   Súhlasím s vašimi obchodnými podmienkami.
  </p>
  <p>
   Zaplatím:
   <select id="s1" name="s1" onclick="kontrola();">
    <option value="" selected="selected">(zadajte spôsob platby)</option>
    <option value="cash">v hotovosti</option>
    <option value="card">pomocou kreditnej karty</option>
   </select>
  </p>
  <p>
   <input type="button" id="b1" name="b1" value="OK"/>
  </p>
 </body>
</html>

V tomto príklade sa kontroluje viacero prvkov. Používateľ musí označiť, že súhlasí s našimi obchodnými podmienkami, a musí si vybrať druh platby. Až keď sú oba údaje v poriadku, sprístupní sa tlačidlo "OK". (Ale tlačidlo bude prístupné aj keď je vypnutý JavaScript, preto treba údaje po odoslaní ešte raz skontrolovať.)

Vlastnosť "selectedIndex" pri roletovom menu označuje poradové číslo vybranej položky, počítané od nuly. Hodnota bude teda 0, ak je označené prvá položka, 1 ak druhá, a 2 ak tretia. Znamienko "&&" znamená, že musia byť splnené obe podmienky; znamienko "!" znamená opak (tlačidlo bude vypnuté, ak nie je pravda, že sú splnené obe podmienky).

Zanechajme teraz nudné formuláre a pozrime si niečo pekné farebné:

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

   function nastav() {
    var s1 = document.getElementById('s1');
    var x = s1.options[s1.selectedIndex].value;
    document.body.style.backgroundColor = x;
   }

  //--></script>
 </head>
 <body>
  <p>
   <select id="s1" name="s1" onclick="nastav();">
    <option value="#ffffff">biela</option>
    <option value="#ffff00">žltá</option>
    <option value="#ff8000">oranžová</option>
    <option value="#ff0000">červená</option>
    <!-- komu sa chce, nech doplní ďalšie... -->
    <option value="#000000">čierna</option>
   </select>
  </p>
 </body>
</html>

V tomto príklade využijeme hodnoty zvolené v roletovom menu. Pomocou vlastnosti "selectedIndex" zistíme poradie vybranej položky. Vlastnosť "options" obsahuje všetky položky v menu; napríklad "options[0]" je prvá položka, "options[1]" druhá položka, atď. Pomocou zápisu "s1.options[s1.selectedIndex]" teda získame tú položku, ktorá je práve vybraná. Jej vlastnosť "value" je hodnota položky. V našom príklade sme ako hodnoty položiek v menu zadali kódy farieb.

V poslednom riadku funkcie "nastav" nastavíme štýl tela stránky. Telo stránky získame pomocou príkazu "document.body". (Keby sme chceli nastavovať vlastnosť iného prvku strany, využijeme funkciu "document.getElementbyId".) Prvky stránky majú vlastnosť "style", do ktorej ktorej môžeme priraďovať jednotlivé vlastnosti jazyka CSS. (Názvy vlastností sú trochu zmenené, aby vyhovovali syntaxi jazyka JavaScript, napríklad "background-color" sa píše ako "backgroundColor".) Pomocou rôznych vlastností CSS môžeme nastaviť napríklad aj polohu jednotlivých prvkov na obrazovke, alebo ich viditeľnosť.

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

   function nastav() {
    var s1 = document.getElementById('s1');
    var d0 = document.getElementById('d0');
    var d1 = document.getElementById('d1');
    if (0 == s1.selectedIndex) {
     d0.style.display = 'block';
     d1.style.display = 'none';
    }
    if (1 == s1.selectedIndex) {
     d0.style.display = 'none';
     d1.style.display = 'block';
    }
   }

  //--></script>
 </head>
 <body onload="nastav();">
  <p>
   <select id="s1" name="s1" onclick="nastav();">
    <option>prvá časť</option>
    <option>druhá časť</option>
   </select>
  </p>
  <div id="d0">
   <h1>Prvá časť</h1>
   <p>Toto je prvá časťdokumentu...</p>
  </div>
  <div id="d1">
   <h1>Druhá časť</h1>
   <p>Toto je druhá časťdokumentu...</p>
  </div>
 </body>
</html>

V dnešnom poslednom príklade pomocou značky "div" rozdelíme dokument na dve časti. Pomocou vlastnosti "display" jazyka CSS urobíme vždy jednu časť neviditeľnou na základe vybranej položky v roletovom menu.

Komentáre: 4