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

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

V predchádzajúcich dvoch lekciách sme si ukázali, ako vložiť program v jazyku JavaScript do webovej stránky, a približne naznačili, čo taký program môže robiť. Dnes si ukážeme, ako sa v jazyku JavaScript programujú jednoduché veci. Ak ste doteraz nemali absolútne žiadnu skúsenosť s programovaním, môže byť pre vás tento článok príliš náročný; hoci sa pokúsim vysvetliť všetko čo najjednoduchšie, programovanie ako také je pomerne náročná vec a nedá sa podrobne vysvetliť v jedinom článku. Kto už niekedy v nejakom jazyku trochu programoval, mal by to zvládnuť. Učiť sa programovať je trochu ako učiť sa plávať -- nestačí, ak budete stáť na brehu a sledovať plavcov, musíte vliezť do vody; podobne si nestačí prečítať článok na webe, ale treba spustiť editor, písať a skúšať.

Pri programovaní pracujeme s údajmi; najčastejšie typy údajov sú čísla, texty, objekty, a polia. Ukážme si, ako sa pracuje s číslami:

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

   function main() {
    var x;
    x = 10;
    alert('Premenná x obsahuje hodnotu ' + x);
    x = x + 1;
    alert('Premenná x je teraz ' + x);
    alert('Dvojnásobok x je ' + (2 * x));
    alert('Logaritmus x je ' + Math.log(x));
   }

  //--></script>
 </head>
 <body onload="main();">
 </body>
</html>

Po načítaní stránky sa spustí hlavná funkcia programu, ktorú sme si nazvali "main". Mohli sme ju nazvať aj inak, ale toto je tradičný názov používaný v iných programovacích jazykoch. Príkazy vo funkcii sa vykonávajú postupne, od prvého po posledný.

Príkazom "var x" vytvoríme novú premennú s názvom "x", ktorá bude existovať len v rámci našej funkcie "main". Program by fungoval aj keby sme tento riadok vynechali, ale keby sme mali viacero funkcií, v ktorých by existovali premenné s názvom "x", tieto premenné by sa navzájom ovplyvňovali. Príkazom "var x" si vytvoríme premennú "x" iba pre túto funkciu, ktorá nemá nič spoločné s prípadnými premennými "x" v iných častiach programu; takýto postup je vhodný najmä pri dlhších programoch, kde sa názvy premenných často opakujú a prípadné chyby spôsobené ich ovplyvňovaním by sa ťažko odhaľovali. Na rozdiel od niektorých iných programovacích jazykoch nemusíme (a ani nemôžeme) upresniť, aký typ údajov budeme do premennej "x" ukladať; čo tam dáme, to tam bude.

Príkazom "x = 10" do premennej "x" uložíme číslo 10. Programátori vedia, že znamienko "=" v tomto prípade neznamená matematickú rovnosť, ale je to príkaz nech sa do premennej "x" uloží hodnota 10 (a nech sa zabudne, čo tam prípadne bolo uložené doteraz). Preto aj neskorší príkaz "x = x + 1" nevyjadruje neriešiteľnú matematickú rovnicu, ale požiadavku, aby sa hodnota "x + 1" (v tejto chvíli 10 + 1, čiže 11) uloží ako nová hodnota do premennej "x" (namiesto doterajšej hodnoty 10).

Príkaz "alert" zobrazí používateľovi zadaný text; v príklade používame nejaký úvodný text, ku ktorému sa na koniec pripojí číselná hodnota. Mohlo by to byť aj bez toho textového úvodu, napríklad "alert(x)" alebo "alert(2+2)", ale je lepšie, keď používateľ aspoň tuší, čo sa mu snažíme povedať.

Základné matematické operácie robíme pomocou znamienok "+" (sčítanie), "-" odčítanie, "*" (násobenie), "/" (delenie). Výsledkom delenia môže byť desatinné číslo, ktoré môžeme zaokrúhliť pomocou funkcie "Math.floor", napríklad "Math.floor(x/3)". Zvyšok po delení robíme pomocou znamienka "%", napríklad "x%3" je zvyšok po delení čísla "x" tromi; ak je "x" prirodzené číslo, môže to byť 0, 1, alebo 2. Zložitejšie výpočty robíme ako funkcie objektu "Math", napríklad "Math.abs" je absolútna hodnota, "Math.sin", "Math.cos", "Math.tan" sú sínus, kosínus, a tangens, "Math.sqrt" je druhá odmocnina, "Math.log" je prirodzený logaritmus, a "Math.exp" je exponenciálna funkcia.

(Programátori znalí jazyka Java si možno pri predchádzajúcom odstavci pomysleli, že "Math" nie je objekt ale trieda. Nie je to tak. Jazyk JavaScript funguje inak ako Java, a povrchné podobnosti môžu byť zavádzajúce. V neskorších lekciách uvidíme, že JavaScript namiesto tried používa prototypy, a čo presne to znamená.)

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

   function main() {
    var s;
    s = 'Bratislava';
    alert('Dĺžka textu je ' + s.length);
    alert('Piate pismeno je ' + s.charAt(4));
    alert('Jeho kód je ' + s.charCodeAt(4));
    alert('Písmeno T je na pozícii ' + s.indexOf('t'));
    alert('Koniec textu je ' + s.substr(5));
   }

  //--></script>
 </head>
 <body onload="main();">
 </body>
</html>

Texty sa píšu v apostrofoch. Písmeno na danej pozícii získame pomocou funkcie "s.charAt". Treba pamätať, že znaky v reťazci sa počítajú od 0, takže ak má náš text 10 písmen, pozície týchto písmen sú 0, 1, 2... až 9. Piate písmeno je teda v jazyku JavaScript na pozícii číslo 4. Ak chceme zistiť, na ktorej pozícii sa nachádza dané písmeno (alebo časť textu), použijeme metódu "indexOf".

Ak chceme vybrať časť textu, použijeme jednu z metód "substr" alebo "substring". V oboch metódach zadávame, od ktorej pozície (vrátane) chceme začať; pri "substr" ako druhý parameter zadávame, koľko znakov chceme vybrať; pri "substring" zadávame, na ktorej pozícii (pred ktorou pozíciou) chceme skončiť. Ak teda chceme napríklad šieste a siedme písmeno, môžeme napísať "s.substr(6, 2)" alebo "s.substring(6, 8)".

Každému znaku je podľa štandardu Unicode priradené nejaké číslo. Ak chceme zistiť číslo zodpovedajúce znaku na danej pozícii, použijeme metódu "charCodeAt". Napríklad ak chceme vedieť, aké číslo má v štandarde Unicode priradené malé písmeno 'a', napíšeme "'a'.charCodeAt(0)". Ak by sme chceli naopak zistiť, aký znak má číslo 97, napíšeme "String.fromCharCode(97)".

<html>
 <head>
  <title>Kalkulačka</title>
  <script language="JavaScript"><!--

   function delenie() {
    var t1 = document.getElementById("t1");
    var t2 = document.getElementById("t2");
    var t3 = document.getElementById("t3");
    var x = t1.value;
    var y = t2.value;
    var z = x / y;
    if (isFinite(z)) {
     t3.value = z;
    } else {
     t3.value = "chyba";
    }
   }

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

Praktický príklad -- kalkulačka. Do prvých dvoch textových polí zadáme dve čísla; po stlačení tlačidla "/" sa v treťom textovom poli vypíše výsledok delenia. Pomocou metódy "document.getElementById" priradíme do premenných "t1", "t2", a "t3" textové polia na webovej stránke. Pomocou vlastnosti "value" môžeme z týchto polí prečítať text, alebo do nich zapísať nový text.

Funkcia "isFinite" nám povie, či sa v premennej "z" (obsahujúcej výsledok delenia) nachádza konečné číslo. Odpoveď môže byť záporná z dvoch dôvodov: buď je v prvých dvoch textových poliach zadané niečo, čo nie je číslo, alebo urobili delenie nulou. Ak delíme nulou, alebo urobíme inú neplatnú matematickú operáciu, môžeme dostať ako výsledok rôzne hodnoty typu "nekonečno" alebo "toto nie je číslo". Funkcia "isFinite" nám umožní rozoznať reálne čísla od takýchto pomocných hodnôt.

Domáca úloha: Doplňte do uvedenej kalkulačky ďalšie tlačidlá na sčítanie, odčítanie, a násobenie čísel.

Komentáre: 1