Pavel Exner: Kurz JavaScript

Programovací jazyk JavaScript se dá použít pro psaní jednoduchých programů například pro dávkové soubory Windows (pomocí Windows Script Host) nebo pro oživení webových stránek. Zde si ukážeme právě použití pro webové stránky (stránky psané pomocí kódu HTML a prohlížené pomocí libovolného internetového prohlížeče, který ovšem podporuje jazyk JavaScript). Znát jazyk HTML však pro potřeby tohoto kurzu nemusíte.

Program je součástí HTML stránky. Základní podoba prázdné HTML stránky je takováto:

<HTML>
<HEAD>
  <TITLE>název stránky</TITLE>


  <SCRIPT Language="JavaScript">
<!--
     // Tady je umístěn program v JavaScriptu
-->
  </SCRIPT>

</HEAD>

<BODY>
</BODY>
</HTML>

V dalším textu je řada ukázek příkazů nebo celých krátkých prográmků. Jejich činnost samozřejmě nejlépe pochopíte, pokud je spustíte. Jak to udělat ? Celkem jednoduše. Otevřete poznámkový blok. Výše uvedenou prázdnou HTML stránku si zkopírujte (označte jako blok a pak stiskněte Ctrl C) a vložte (pomocí Ctrl V) do souboru v poznámkovém bloku. Poté dejte Uložit a jako název zadejte například JAVAKURZ.HTM a uložte do libovolného adresáře. Když budete chtít poté spustit libovolnou ukázku z tohoto kurzu, opět si tuto ukázku zkopírujte a uložte do souboru JAVAKURZ.HTM namísto textu nebo za text "// Tady je umístěn program v JavaScriptu", poté soubor opět uložte (vhodné pod jiným jménem, abyste si zachovali nedotčenou onu prázdnou HTML stránku). Pak již stačí na ikonu tohoto uloženého souboru dvakrát poklepat myší, nebo jej otevřete přímo z internetového prohlížeče.

Takže začínáme.

Program je tvořen jednotlivými příkazy, každý příkaz je ukončen středníkem.
Pro zaznamenávání údajů se používají takzvané proměnné. Proměnná je označena svým jménem. Názvy proměnných musí být kombinace písmen a čísel (ale nesmí se začínat číslem). Nepoužívají se písmena s háčkami a čárkami, nesmí se použít mezera a další speciální znaky (jako třeba otazník, tečka a podobně)

Na začátku programu je dobré si nadefinovat všechny proměnné, ketré budu později používat. Dělá se to tak, že na řádek napíšu slovo var, pak mezeru a pak název proměnné = počáteční hodnota.

Jsou dva základní typy proměnných:

znaky
čísla

(přesněji řečeno existují i logické proměnné a proměnné obsahující takzvané objekty, ale těm se budeme věnovat později)

Znakové proměnné se definují například takto:

      var jmeno = "";

nebo

      var jmeno = "Honza";

nebo

      var veta = "Dobrý den, jak se máte ?";

neboli hodnota znakové proměnné je vždy uzavřena v úvozovkách (nebo apostrofech).

Definice

       var Dobrý den, jak se máte ? = "Dobrý den, jak se máte ?"

vyvolá chybu, protože název proměnné nesmí obsahovat mezery, čárku ani otazník.

Číselné proměnné mohou obsahovat jen číslice, znaménko (+ a -) a desetinnou tečku (pozor, nepoužívat čárku), např.:

       var cislo = 1;

nebo

       var hodne = 1000000;

nebo

       var malo = 0.00000025;

nebo

       var zaporne = -1000000;

Pozor !! pokud napíšu

       var hodne = "1000000";

pak jsem nadefinoval znakovou proměnnou, nikoli číselnou.

Příkaz, kterým se píše na obrazovku (do dokumentu) je

      document.write();

Příklady:

    document.write("Ahoj, jak se máte ?");

vypíše danou větu do dokumentu (tedy do okna internetového prohlížeče).

    var veta = "Ahoj, jak se máte ?";
    document.write(veta);

tento program udělá přesně totéž.

Znakové proměnné je možné spojovat pomocí znaku +

    var veta = "Ahoj, jak se máte ?";
    var osloveni = " Vy vořeši.";
    document.write(veta+osloveni);

Program vypíše: Ahoj, jak se máte ? Vy vořeši.

Do toho, co má write() vypsat je možné psát i formátovací příkazy pro prohlížeče. Pokud neznáte jazyk HTML, pak asi nevíte, co to formátovací příkazy jsou. Jsou to příkazy uzavřené do znaků <>, které prohlížeči říkají, jak má zobrazený text vypadat. Níže použitý příkaz (také se říká tag) sděluje prohlížeči, že text má být velkým písmem, protože se jedná o nadpis. Text, kterého se to týká je ukončen stejným tagem, ale doplněným značkou /
Například:

    var veta = "Ahoj, jak se máte ?";
    document.write("<h1>"+veta+"</h1>);

vypíše větu jako největší nadpis.

    var veta = "Ahoj, jak se máte ?";
    document.write("<center><h1><font color=red>"+veta+"</font></h1></center>);

vypíše větu jako nadpis červeně ve středu okna. Pokud vás zajímají další tagy a co znamenají, na Internetu se dá najít řada příruček o jazyku HTML, kde se můžete dozvědět více. Kurz o psaní webových stránek napsal například Jiří Kosek

Vypisovat je možno i číselné proměnné, například:

     var cislo = 1;
     var druhe = 2;
     document.write(cislo," + ",druhe," = ",cislo+druhe);

vypíše 1 + 2 = 3

Totéž udělá tento program:

     var cislo = 1;
     var druhe = 2;
     var vysledek = cislo + druhe;
     document.write(cislo," + ",druhe," = ",vysledek);

Jestliže sečteme znakovou a číselnou proměnnou, program nejprve převede tu číselnou na znakovou a pak oba znaky spojí:

     var cislo = "1";
     var druhe = 2;
     var vysledek = cislo + druhe;
     document.write(cislo," + ",druhe," = ",vysledek);

program zobrazí 1 + 2 = 12
neboli vezme znak "1" a k němu přidá znak "2", vznikne "12"

Pokud chceme znakovou proměnnou převést na číslo, použijeme funkce eval():

     var cislo = "1";
     var druhe = 2;
     var vysledek = eval(cislo) + druhe;
     document.write(cislo," + ",druhe," = ",vysledek);

zde bude výsledek opět 3, protože znak "1" ve znakové proměnné cislo jsme převedli na číslo pomocí výrazu eval(cislo).

Pro zadání hodnoty proměnné uživatelem (to je ten, kdo si program pustí), se používá funkce prompt()

    var jmeno = "";
    jmeno = prompt("Zadej prosím své jméno","");

do znakové proměnné jmeno se zapíše to, co uživatel napíše do okénka. Pokud uživatel nenapíše nic a stiskne O.K., bude v proměnné jméno prázdný řetězec (který se dá zapsat jako "", tedy dvě uvozovky, mezi kterými nic není).
Pokud uživatel stiskne tlačítko Storno, uloží se do proměnné jmeno hodnota null (to znamená nic).

Prompt vrací hodnotu jako znakovou. Například program:

     var cislo = prompt("První číslo ","");
     var druhe = prompt("Druhé číslo ","");
     var vysledek = cislo + druhe;
     document.write(cislo," + ",druhe," = ",vysledek);

pokud na první dotaz zadáme 1 a na druhý dotaz 2, bude výsledek opět 12, tedy ne sečtená čísla ale spojené znaky.

Pokud chceme, aby program to, co zadáme sečetl jako čísla, musíme obě znakové proměnné převést na číselné:

     var cislo = prompt("První číslo ","");
     var druhe = prompt("Druhé číslo ","");
     var vysledek = eval(cislo) + eval(druhe);
     document.write(cislo," + ",druhe," = ",vysledek);

Jestliže ovšem nyní zadáme místo čísel znaky, program nahlásí chybu (Zda uživatel opravdu zadal číslo, se dá zjsitit pomocí funkce isNaN, což bude ukázáno později, v části o funkcích). Místo čísla však můžeme zadat číselný výraz.
Například zadáme-li do prvního okénka výraz 5 + 2 a do druhého okénka číslo 3 pak se jako výsledek zobrazí správně 5 + 2 + 3 = 10

Dotaz na podmínku.
V programu se můžeme zeptat zda hodnota některé proměnné splňuje nějakou podmínku. K tomu slouží příkaz if (jestliže), který má tvar

    if (podmínka) příkaz;

jestliže je splněna podmínka, pak se vykoná příkaz.

Například

      var cislo = 10;
      if (cislo == 10) document.write("Číslo je deset");

Všimněte si, že jsme v podmínce napsali dvě rovnítka místo jednoho. Není to chyba. Je to správně. Pokud chceme přiřadit nějaké proměnné číslo nebo text, použijeme k tomu jedno rovnítko, pokud však chceme v podmínce porovnávat dvě proměnné (nebo proměnnou s číselm či textem) musíme mezi nimi napsat dvě rovnítka bezprostředně za sebou (tedy nesmí mezi nimi být mezera).

Může být zadán i příkaz, který se vykoná, když podmínka splněna není. Tento příkaz napíšeme za slovo else (jinak):

      var cislo = 5;

      if (cislo == 10) document.write("Číslo je deset");
      else document.write("Číslo není deset");

Samozřejmě zjišťovat takhle hodnotu čísla, které máme zapsané v programu a které tedy známe je zbytečné, ale můžeme to použít, když nám hodnotu zadá až uživatel.

      var cislo = prompt("Zadej číslo","");

      if (eval(cislo) == 10) document.write("Číslo je deset");
      else document.write("Číslo není deset");

Hodnotu, kterou zadal uživatel jsme museli převést na číslo, ale šlo to udělat i bez toho:

      var cislo = prompt("Zadej číslo","");

      if (cislo == "10") document.write("Číslo je deset");
      else document.write("Číslo není deset");

V prvním případě, pokud uživatel místo čísla zadá třeba znaky aaaa, nahlásí program chybu, ve druhém případě jen řekne, že číslo není deset.

Pomocí if lze ošetřit případ, že uživatel nezadal nic a jen stiskl klávesu Storno:

         var jmeno = prompt("Zadej své jméno","");

         if (jmeno == null) document.write("Nic jsi nezadal");
         else document.write("Tvé jméno je "+jmeno);

Podmínky if lze i řetězit ve složitější podmínky, tím že za příkaz else se napíše jako příkaz další if :

         var jmeno = prompt("Zadej své jméno","");

         if (jmeno == null) document.write("Nic jsi nezadal");
         else
         if (jmeno == "Pavel") document.write("Tvé jméno je "+jmeno+" - SUPER !!!");
         else
         if (jmeno == "Honza") document.write("Tvé jméno je "+jmeno+" - to je pěkné jméno");
         else
         if (jmeno == "Mirek") document.write("Tvé jméno je "+jmeno+" - že se nestydíš");
         else
         document.write("Tvé jméno je "+jmeno);

Byla to jen ukázka, všem Mirkům se omlouvám. Z dané řady podmínek se vždy vyhodnotí jen jedna a provede se příkaz, který je napsán za to správnou podmínkou. Jestliže ani jedna podmínka nevyhovuje, provede se příkaz za posledním else.

Do podmínky je možno psát i více než jeden příkaz, více příkazů pak musí být uzavřeno do složených závorek. Pak je zvykem psát tyhle závorky pod sebe tak, jak k sobě patří (v následující ukázce se používá tag - formátovací příkaz <br>, který prohlížeči říká, že má psát text na novou řádku).

         var jmeno = prompt("Zadej své jméno","");

         if (jmeno == null)
            {
              document.write("Nic jsi nezadal");
              document.write("<br>Zkus to ještě jednou.");
            }
         else
            {
              document.write("Tvé jméno je "+jmeno);
              document.write("<br>Děkuji za informaci.");
            };

nebo složitější případ:

         var jmeno = prompt("Zadej své jméno","");

         if (jmeno == null)
            {
              document.write("Nic jsi nezadal");
              document.write("<br>Zkus to ještě jednou.");
              jmeno = prompt("Zadej jméno, ale opravdu","");
              if (jmeno == null) document.write("<br>S tebou to nemá cenu");
              else
                 { document.write("<br>Konečně jsi něco zadal");
                   document.write("<br>Tvé jméno je "+jmeno);
                 };
            }
         else
            {
              document.write("Tvé jméno je "+jmeno);
              document.write("<br>Děkuji za informaci.");
            }

Při zadávání podmínky jě někdy třeba použít nejen porovnání zda se hodnota rovná, ale i naopak, zda se nerovná, pak se místo dvou rovnítek použije vykřičník a rovnítko:

      var jmeno = prompt("Zadej jméno","");

      if (jmeno != "Mirek") document.write("Nejmenuješ se Mirek");
      else document.write("Jmenuješ se Mirek");

V podmínkách lze využít i další relační znaménka:
< menší než
> větší než
<= menší nebo rovno
>= větší nebo rovno

Příkaz pro podmínku Swith
Pokud porovnáváme jednu proměnnou s určitými hodnotami, pak je vhodné použít příkaz Swith. Jeho použití je takovéto:

   Swith (proměnná)
   {
      case Hodnota1:
         příkaz;
         příkaz;
         break;
      case Hodnota2:
         příkaz;
         příkaz;
         break;
      ...
      default: 
         příkaz;
         příkaz;
   )

Příkaz Swith pracuje tak, že hodnotu proměnné (nebo zde může být jakýkoli výraz) porovná s hodnotami uvedenými za slovy case a podle toho vykoná dané příkazy. Pokud se hodnota v možnostech case nenajde, vykonají se příkazy uvedené za slovem default:.

Následující příklad uvádí použití příkazu Swith:

    var hlavniMesto = "";
    var nejdelsiReka = "";
    var poznamka = "";
	
    var stat = prompt("Zadejte stát","");
	
    switch (stat)
    {
       case "Česko":
          hlavniMesto = "Praha";
          nejdelsiReka = "Vltava";
          poznamka = "Tam bydlím";
          break;
       case "Egypt":
          hlavniMesto = "Káhira";
          nejdelsiReka = "Nil";
          poznamka = "Tam jsem taky nebyl";
          break;
       default:
          poznamka = "Neznámý stát";
    }
	
    document.write("Stát: ",stat,"<br>");
    document.write("Město: ",hlavniMesto,"<br>");
    document.write("Řeka: ",nejdelsiReka,"<br>");
    document.write("Poznámka: ",poznamka,"<br>");

Slovo braek zajistí, že se provádení příkazů ukončí a program bude pokračovat až za složenou závorkou ukončující příkaz switch. Bez něj by se prováděly i všechny následující příkazy v dalších částech case. Zkuste v příkladu příkazy break odstranit a uvidíte, jak se to projeví.

Opakování příkazů v cyklu
Příkazy je také možno opakovat vícekrát v takzvaném cyklu.
Jeden příkaz pro opakování je příkaz for :

        for (cislo = 1; cislo < 11; cislo++) document.write("<br>",cislo);

tento program vypíše pod sebe čísla 1 až 10.

Příkaz for funguje tak, že nastaví hodnotu čítače (libovolná číselná proměnná, v našem případě cislo)na počáteční hodnotu (opět v našem případě na jedničku cislo=1), a pak provede příkaz uvedený za závorkou v příkazu for, pak zvýší čítač o jedničku a porovná, zda stále platí uvedená podmínka (v našem případě, že čítač je menší než 11 citac<11) a pokud podmínka je stále splněna, tak znovu provede příkaz a zase zvýší čítač o jedničku a tak stále, dokud není překročena uvedená podmínka.

Takže příkaz

        for (cislo = 6; cislo < 7; cislo++) document.write("<br>",cislo);

se provede pouze jednou a vypíše číslo 6.

příkaz

        for (cislo = 8; cislo < 7; cislo++) document.write("<br>",cislo);

se neprovede ani jednou.

příkaz

        for (cislo = 2; cislo > 1; cislo++) document.write("<br>",cislo);

se bude provádět do nekonečna, je to ukázka takzvaného nekonečného cyklu, což je to, na co si každý programátor musí dávat dobrý pozor. Pokud tenhle program spustíš, přestane stránka reagovat a nebude ji možné ani zavřít, protože bude zaneprázdněna tvým nekonečným cyklem.
U starších počítačů by to znamenalo jej vypnout, u Windows stačí stisknout Ctrl Alt Del a ukončit běh této stránky. Ale stejně to není bezpečné, raději to nezkoušej.

Pokud chceme v cyklu provádět více než jeden příkaz, tak je do příkazu for napíšeme do složených závorek. Např.:

          for (c = 1; c <= 10; c++)
              { document.write("<br> Cislo = ");
                document.write(c);
              };

Program vypíše Cislo = 1 až Cislo = 10. Vždy na novou řádku.

Příkaz cyklu while.
Další možnost jak provádět příkazy opakovaně v cyklu je příkaz while:

         var jmeno = "";

         while (jmeno != null)
               {
                 jmeno  = prompt("Zadej jméno","");
                 document.write("<br><br><br>",jmeno," to je spravné jméno");
               };

         document.write("<br><br>Tak jo, končíme");

Program se zeptá na jméno, dokud budete poté klepat na talčítko O.K., program vždy vypíše zadné jméno a text "to je správné jméno". Teprve poté, co klepnete do tačítka Strono, tak napíše "Tak jo, končíme" a program skončí. Ovšem ještě předtím napíše "null to je správné jméno", čemuž zabráníme ještě přidáním podmínky if do cyklu:

         var jmeno = "";

         while (jmeno != null)
               {
                 jmeno  = prompt("Zadej jméno","");
                 if (jmeno != null)
                     document.write("<br><br><br>",jmeno," to je spravné jméno");
               };

         document.write("<br><br>Tak jo, končíme");

Všimněte si, že v tomhle případě jsme hned použili možnost zadat do cyklu while více příkazů (jsou ohraničeny složenými závorakmi).

Existuje i příkaz umožňující cyklus předčasně ukončit. Například předchozí cyklus má probíhat tak dlouho, dokud se buďto nezmáčkne tlačítko Storno (to už nám funguje), nebo dokud nezadáme jméno = "Petr". V takovém případě použijeme příkaz break, který vyskočí ven z cyklu (program bude pokračovat na prvním dalším příkazem následujícím za cyklem:

         var jmeno = "";

         while (jmeno != null)
               {
                 jmeno  = prompt("Zadej jméno","");
                 if (jmeno == "Petr") break;
                 if (jmeno != null)
                     document.write("<br><br><br>",jmeno," to je spravné jméno");
               };

         document.write("<br><br>Tak jo, končíme");

Existuje i příkaz, ktrý přeruší právě probíhající příkazy cyklu, ale ne samotný cyklus, ten pokračuje (pokud je nadále splněna podmínka uvedená za příkazem while). Tak například, pokud v předchozím případě zaměníme příkaz break příkazem continue, pak se program bude chovat jinak:

         var jmeno = "";

         while (jmeno != null)
               {
                 jmeno  = prompt("Zadej jméno","");
                 if (jmeno == "Petr") continue;
                 if (jmeno != null)
                     document.write("<br><br><br>",jmeno," to je spravné jméno");
               };

         document.write("<br><br>Tak jo, končíme");

Zatímco v předchozím případě cyklus po zadání jména Petr skončil, nyní bude dál pokračovat, ovšem neprovede se následující příkaz za příkazem continue, tedy na obrazovku se nevypíše text "Petr to je správné jméno".

Příkazy break a continue lze používat i v cyklu for.

Cyklus while tedy pracuje tak, že příkaz cyklu (nebo příkazy, jsou-li jako v našem případě uzavřeny ve složených závorkách) se vykonávají tak dlouho dokud je splněna podmínka zapsaná v příkaze while.

Cyklus

        while ("A" == "B") document.write("<br> A se rovná B");

se nikdy nevykoná.

Naopak příkaz

        while ("A" == "A") document.write("<br> A se rovná A");

se bude vykonávat neustále a nikdy neskončí. Je to tedy opět příklad nekonečného cyklu. Na počítači raději nespouštějte.

Další možnosti komunikace s uživatelem.
Další dva způsoby jak program může komunikovat s uživatelem jsou příkazy alert a confirm.

Příkaz alert zobrazí hlášení, např:

        alert("Tohle je hláška mého programu.");

vypíše uvedenou větu nukoli do dkumentu, ale do speciálního okénka a k němu zobrazí tlačítko O.K. Program se zastaví a čeká dokud uživatel toto tlačítko nestiskne.

Příklad:

       document.write("Tohle se nejprve vypíše...");
       alert("Program čeká, stiskni ENTER...");
       document.write("<br>Tohle se napíše až potom...");

Text, který se vypíše v okénku alert může být i na více řádkách (oddělovač řádky se napíše "\n").

       var procesor = "";
       var kmitocet = "";
       var text = "";

       procesor = prompt("Zadejte název procesoru vašeho počítače","");
       kmitocet = prompt("Zadejte kmitočet procesoru v MHz","");

       if (procesor != null)
          if (kmitocet != null)
             {
               text = text + "Na vašem počítači je procesor"+"\n"+procesor
               text = text + "\n"+"S kmitočtem "+kmitocet+" MHz"
               alert(text);
             }

Další možností, jak klást uživateli otázky je příkaz confirm. V příkazu se uvede otázka na kterou může uživatel odpovědět tak, že stiskne tlačítko O.K. nebo Storno. Otázka tomu tedy musí odpovídat.

Příkaz confirm vrací hodnotu true (pravda - klepne-li uživatel na O.K.) nebo false (nepravda - klepne-li na Storno) - tím se dostáváme k dalšímu typu proměnných, která neobsahují ani čísla ani text. Slovo true je sice text, ale abychom nadefinovali proměnnou textovou s tímto slovem musíme napsat:

      var slovo = "true";

kdežto, když napíšeme:

      var slovo = true;

nadefinovali jsme takzvanou logickou proměnnou. Takové proměnné mohou nabývat pouze hodnot true - pravda popřípadě ano, false - nepravda popřípadě ne.
Příklad:

           var dotaz = false;

           document.write("<br><br>Vítej v mém programu na výpočet druhé mocniny čísla.");
           dotaz = confirm("Chceš pokračovat ?");

           if (dotaz == true)
              {
                document.write("<br>Dobře budeme pokračovat v programu");
                cislo = prompt("Zadej číslo ","");
                if (cislo != null)
                   {
                     hodnota = eval(cislo+"*"+cislo);
                     document.write("<br><br>"+cislo+" na druhou = ",hodnota);
                   };
               };

Pole proměnných

Někdy je výhodné použít takzvané pole proměnných. Jedná se vlastně o jakousi složitěji strukturovanou proměnnou. Pole je tedy stejně jako normální proměnná označeno jménem. Navíc je však uveden takzvaný index. Index je pořadové číslo údaje a je uveden v hranatých závorkách za názvem pole.

Nové pole se před použitím musí nadefinovat příkazem:

    var nazevPole = new Array;

Nejlepší to bude ukázat si použití pole na příkladu. Nadefinujeme v něm pole s názvem den a naplníme jej názvy dnů v týdnu. Index každého dne přitom bude představovat pořadí dne v týdnu.


     var den = new Array;

     den[1] = "Pondělí";
     den[2] = "Úterý";
     den[3] = "Středa";
     den[4] = "Čtvrtek";
     den[5] = "Pátek";
     den[6] = "Sobota";
     den[7] = "Neděle";
    

     var poradiDne = prompt("Zadej pořadí dne v týdnu","");
     var nazevDne = den[poradiDne];
     document.write(poradiDne,". den v týdnu je ", nazevDne);

Když jsme chtěli zjistit, jaký je obsah určitého údaje v poli, použili jsme opět název pole a do hranatých závorek jsme zadali pořadí údaje v poli (index pole). Program fungoval správně, protože jsme jako pořadí údaje použili právě pořadí daného dne v týdnu. Klidně bychom mohli pole den nadefinovat i takto:


     var den = new Array;

     den[4] = "Pondělí";
     den[1] = "Úterý";
     den[3] = "Středa";
     den[5] = "Čtvrtek";
     den[7] = "Pátek";
     den[6] = "Sobota";
     den[2] = "Neděle";
    

     var poradiDne = prompt("Zadej pořadí dne v týdnu","");
     var nazevDne = den[poradiDne];
     document.write(poradiDne,". den v týdnu je ", nazevDne);

Program je formálně správně, ale samozřejmě nebude dělat to, co chceme.

Nadefinovat obsah pole můžeme hned v příkaze, ve kterém pole definujeme. Předchozí příklad tedy můžeme napsat i takto:


     var den = new Array("Pondělí","Úterý","Středa","Čtvrtek","Pátek","Sobota","Neděle");

     var poradiDne = prompt("Zadej pořadí dne v týdnu","");
     var nazevDne = den[poradiDne - 1];
     document.write(poradiDne,". den v týdnu je ", nazevDne);

Všimněte si, že název dne jsme nyní získali příkazem

     var nazevDne = den[poradiDne - 1];

tedy, že od pořadí, které zadal uživatel, jsme odečetli jedničku. To proto, že v jazyce JavaScript se pole indexuje počínaje nulou. Když jsem tedy explicitně nezadali, že pondělí má mít index = 1, ale jen jsme v definici pole uvedli seznam prvků pole, byl prvnímu údaji ze seznamu přiřazen index 0, druhému 1 atd. až neděle získala index 6. Proto jsme museli od pořadí dne v týdnu, které zadal uživatel, odečíst onu jedničku.

Funkce

Ve všech vyšších programovacích jazycích lze program členit do kratších a jednodušších částí. K tomu se v JavaScriptu dá použít tzv. uživatelská funkce. Je to vlastně také program, který můžeme zavolat z jiného programu. Po skončení funkce se provádění programu vrátí do toho, ze kterého jsme funkci volali, a to na příkaz následující za voláním funkce.

Celý princip spočívá v tom, že funkce je vlastně část programu označená jménem a pokud toto jméno vložíme do jiného programu, funkce se na tomto místě vykoná.

Klíčovým slovem, pomocí kterého se pozná, že následuje popis funkce, je slovo function, pak následuje název funkce a poté vlastní program (říkáme též tělo funkce), který je celý uzavřen do složených závorek.
Příklad:

     document.write("Tohle vypíše hlavní program");
     vypisVetu();
 
     function vypisVetu()
     {
         document.write("<br>Tohle je vypsáno funkcí");
     }

Jak vidíte, za názvem funkce se ještě píší závorky. Tam se uvádějí takzvané parametry funkce, neboli údaje, které chceme z hlavního programu předat funkci ke zpracování. V našem případě jsme nic nepředávali, proto uvnitř závorek nebylo nic uvedeno. Přesto tam tyto závorky musíme psát.

Nyní si předvedeme příklad, kdy parametry použijeme, to je vhodné například tehdy, kdy chceme aby tatáž funkce pracovala vícekrát, vždy však s jinými údaji. V příkladu si nadefinujeme fukci, která předanou větu zobrazí na novém řádku tučně a uprostřed řádku.
Příklad:

    document.write("Tohle vypíše hlavní program");
    vypisVetu("Tohle bude první řádek z funkce");
    vypisVetu("To je další řádek z funkce");
    vypisVetu("A tohle už je poslední");
	 
    function vypisVetu(veta)
    {
       document.write("<center><b>"+veta+"</b></center>");
    }

Parametrů ve funkci může být i více, pak jsou odděleny čárkou.

Jako další příklad na použití funkce si ještě zopakujeme příklad s druhou mocninou a tu druhou mocninu si tentokrát necháme počítat funkcí. Funkce totiž může i nějakou hodnotu vracet zpět volajícímu programu.
Příklad:

           var dotaz = false;
           
           document.write("<br><br>Vítej v mém programu na výpočet druhé mocniny čísla.");
           dotaz = confirm("Chceš pokračovat ?");

           if (dotaz == true)
              {
                document.write("<br>Dobře budeme pokračovat v programu");
                cislo = prompt("Zadej číslo ","");
                if (cislo != null)
                   {
                     var hodnota = mocnina(cislo); 
                     document.write("<br><br>"+cislo+" na druhou = ",hodnota);
                   };
               };


           function mocnina(parametr)
           {
              return parametr * parametr;
           }

Hodnota, kterou má funkce vracet se napíše za příkaz return. Pokud funkce žádnou hodnotu nevrací, nemusí se slovo return uvádět. Na rozdíl od parametrů, kterých může být libovolný počet (oddělených čárkou) může být vracená hodnota jen jedna. Funkce mohou používat i vlastní proměnné. Předchozí funkci mocnina() lze napsat i takto:

           function mocnina(parametr)
           {  
               var vraceno = parametr * parametr;
               return vraceno;
           }

Ve funkci jsme nadefinovali novou proměnnou, ta ovšem bude existovat jen v těle funkce. Po návratu do hlavního programu už nebude známá a pokus o její použití vyvolá chybu (jedná se o takzvané lokální proměnné).
Příklad:

       document.write("Mocnina = "+mocnina(5));
       var nasobek = vraceno * 2;
       document.write("Násobek = "+nasobek);

       function mocnina(parametr)
       {  
          var vraceno = parametr * parametr;
          return vraceno;
       }

tento program vyvolá chybu, protože hlavní program nebude znát proměnnou vraceno. MS Internet Explorer na to například zareaguje hláškou Chyba: 'vraceno' is undefined.

Naopak proměnné nadefinované v hlavním programu znají všechny funkce (zde se jedná o takzvané globální proměnné).
Příklad

       var nasobitel = 3;
       document.write("Násobek 5 * "+nasobitel+" = ",nasobek(5));

       function nasobek(parametr)
       {  
          var vraceno = parametr * nasobitel;
          return vraceno;
       }

Tohle bude fungovat správně, protože funkce nasobek() bude proměnnou nasobitel znát.

Funkci lze vyvolat nejen z hlavního programu, ale i z další funkce, nebo i z HTML dokumentu, například poté, co uživatel (ten, kdo si prohlíží stránku ve webovém prohlížeži) klepne myší na tlačítko. Abychom si to mohli ukázat, musíme si nejprve na naší stránce nadefinovat tlačítko. Naše ukázková webová stránka pak bude vypadat takto:

<HTML>
<HEAD>
  <TITLE>název stránky</TITLE>


  <SCRIPT Language="JavaScript">
<!--
     Tady bude umístěna funkce v JavaScriptu
-->
  </SCRIPT>

</HEAD>

<BODY>
Stiskněte toto tlačítko:<br><br>
<INPUT TYPE="button" TITLE="Ukázka tlačítka" VALUE="Tlačítko">

</BODY>
</HTML>

Tlačítko jsme nadefinovali pomocí tagu <INPUT TYPE="button">, další parametry pak určují, jak bude tlačítko vypadat.
Takto nadefinované tlačítko ovšem nebude dělat nic. K tomu, aby vykonalo nějakou činnost je potřeba ještě sdělit jakou a kdy. Pokud budeme chtít, aby se činnost vykonala vždy, když tlačítko stiskneme, zadáme mezi parametry tlačítka ještě slovo ONCLICK= a pak uvede jméno funkce (a případně i její parametry), která se má vykonat v okamžiku stisku tlačítka. Takže definice tlačítka pak bude vypadat následovně:

   <INPUT TYPE="button" TITLE="Ukázka tlačítka" VALUE="Tlačítko"
             ONCLICK="maFunkce('Stisknuté tlačítko')">

a do sekce SCRIPT napíšeme tuto funkci:

     function maFunkce(napis)
     {
        alert(napis);
     }

Kdykoli nyní stisknete tlačítko, zobrazí se hlášení s textem uvedeným ve volání funkce maFunkce(). Všimněte si, že text v parametru jsme uzavřeli do apostrofů, nikoli do uvozovek. Uvozovky by totiž zmátly prohlížeč, protože by si myslel, že jde o ukončení předchozích úvozovek - to mají Američané z toho, že místo aby používali úvozovky dole na začátku a úvozovky nahoře na konci textu (tak jako se to dělá ve všech normálních jazycích), používají jen uvozovky nahoře.

Vestavěné funkce neboli objekty a jejich metody

Kromě výše uvedených uživatelských funkcí (to jest takových, které si sami naprogramujete), jsou v JavaScriptu k dispozici i fukce přímo do jazyka zabudované. Ono se vlastně přesně řečeno jedná o tzv. metody nebo vlastnosti zabudovaných objektů, ale protože jazyk JavaScript není plně objektově orientovaný (narozdíl od jazyka Java), není potřeba se objektovému programování kvůli tomu učit. Jen nás nesmí zaskočit poněkud jiná syntaxe pro používání metody nebo vlastnosti.

Jak již bylo řečeno podoba volání funkce vypadá takto:

    hodnota = funkce(parametr);

zatímco při volání metody je třeba použít tento tvar:

    hodnota = objekt.metoda(parametr)

nebo v případě volání vlastnosti (ta na rozdíl od metody nemá parametry):

    hodnota = objekt.vlastnost;

A co znamená co:

hodnota je zde název proměnné, kam si uložíme výsledek volané metody (nebo vlastnosti).
objekt je název objektu, jehož metodu chceme použít. Může to být název tzv. vestavěného objektu (např. Math) nebo většinou jde o název naší vlastní proměnné určitého typu - například všechny řetězcové proměnné jsou současně objektem typu (také se říká třídy) String.
metoda to je název funkce kterou chceme volat. Od názvu objektu je oddělena tečkou. Za názvem metody jsou v závorkách uvedeny parametry funkce.
vlastnost objektu si můžeme představit jako metodu, která nemá parametry, ale rovněž vrací určitou hodnotu. Od názvu objektu je rovněž oddělena tečkou.

(Mimochodem jeden takový objekt a metodu už vlastně známe a běžně používáme - příkaz document.write()).

Dále si jednotlivé metody a vlastnosti představíme podle objektů, v nichž jsou obsaženy.

Objekt String
Každá řetězcová (textová) proměnná je současně objektem třídy String. Takže můžeme používat všechny vlastnosti a metody tohoto objektu. Vlastnost má přesněji řečenu jen jednu : length, tedy délku textu ve znacích. Příklad použití je následující:

    var slovo = prompt("Zadej slovo ","");
    document.write("Délka slova je ", slovo.length);

Metod je již více. Zde si ukážeme některé na příkladech.

charAt(i) znak na pozici i - první znak má přitom pozici 0.

    var text = "Tohle je text";
    document.write("Znak na pozici 1 je ",text.charAt(1-1),"<br>"); 	
    document.write("Znak na pozici 7 je ",text.charAt(7-1));

indexOf(podřetězec) pozice, na které začíná řetězec podřetězec (pozice je opět číslována od nuly). Pokud podřetězec není nalezen, vrátí -1.

    
    var text = "Tohle je text";
    document.write("Podřetězec 'je' začíná na pozici ",text.indexOf("je")+1,"<br>");
    
    var pozice = text.indexOf("AA");
    if(pozice == -1) document.write("Podřetětec 'AA' v textu nenalezen);
    else document.write("Podřetězec 'AA' začíná na pozici ",pozice+1);

substr(od, délka) vrátí podřetězec začínající na pozici od a dlouhý délka znaků.

    var text = "Tohle je text";
    document.write("Podřetězec začínající na pozici 2 a dlouhý 4 znaky: ",text.substr(2-1,4));

toLowerCase() převede řetězec na malá písmena.

    var text = "TOHLE JE NAPSANÉ VELKÝMI PÍSMENY";
    document.write(text, "<br>", text.toLowerCase());

toUpperCase() převede řetězec na velká písmena.

    var text = "tohle je napsané malými písmeny";
    document.write(text, "<br>", text.toUpperCase());

Objekt Number
Číselné proměnné jsou objekty třídy Number. Ten má několik vlastností a metod. Pro nás zajímavá je vlastnost NaN, která říká, zda výraz je číslo, či nikoli. K testování této vlastnosti musíme použít funkci isNaN (což je vzhledem k objektovému přístupu poněkud zvláštní, nepoužíváme zde totiž metodu objektu, ale klasickou funkci, kterou testujeme vlastnost objektu). Použití ukazuje následující ukázka:

    var s = prompt("Zadejte číslo nebo řetězec","");
	
    if(isNaN(s)) document.write("Zadal jsi řetězec ",s);
    else document.write("Zadal jsi číslo ",s);

Objekt Math
Tento objekt nám poskytuje některé matematické operace. Má jak vlastnosti, tak metody. Některé vlastnosti ukazuje následující příklad:

    document.write("Hodota Ludolfova čísla pí = ",Math.PI,"<br>");
    document.write("Hodota základu přrozeného logaritmu e = ",Math.E,"<br>");
    document.write("Odmocnina ze dvou = ",Math.SQRT2);

Další příklad ukazuje některé metody:

    document.write("Absolutní hodnota čísla -123 je ",Math.abs(-123),"<br>");
    document.write("Sinus 90 stupňů je ",Math.sin(Math.PI/2),"<br>");
    document.write("Tangens 45 stupňů je ",Math.tan(Math.PI/4),"<br>");
    document.write("Nejmenší celé číslo větší než 1.23 je ",Math.ceil(1.23),"<br>");
    document.write("Největší celé číslo menší než 1.23 je ",Math.floor(1.23),"<br>");
    document.write("Číslo 1.23 zaokrouhleno je ",Math.round(1.23),"<br>");
    document.write("e na patnáctou je ",Math.exp(15),"<br>");
    document.write("Přirozený logaritmus čísla 10 je ",Math.log(10),"<br>");
    document.write("Náhodné číslo v intervalu <0,1) ",Math.random(100),"<br>");

Objekt Date
Objekt slouží pro práci s datem a časem. Základní použití ukazuje následující příklad:

    var datum = new Date();
    document.write("Dnes je ",datum);

Pokud chceme převést datum na nám přijatelnější tvar můžeme použít následující metody:

    var datum = new Date();
    var den = datum.getDate();
    var mesic = datum.getMonth();
    var rok = datum.getYear();
	
    document.write("Dnes je ",den,".",mesic,".",rok);

Metoda getDay vrátí pořadové číslo dne v týdnu:

    var den = new Array("Neděle","Pondělí","Úterý","Středa","Čtvrtek","Pátek","Sobota");

    var datum = new Date();
    var poradiDne = datum.getDay();

    var nazevDne = den[poradiDne];
    document.write("dnes je ", nazevDne);

Pro práci s časem použijeme obdobné metody:

    var datum = new Date();
    var minut = datum.getMinutes();
    var hodin = datum.getHours();
    var sekund = datum.getSeconds();
	
    document.write("Právě je ",hodin,":",minut,":",sekund);

Na konec si ještě řekneme něco o poznámkách v programu.
Jednoduchý, jen pár řádek dlouhý program nemusí obsahovat popis toho, co dělá. Stačí když dodržíme pravidlo, že název proměnných a fukcí volíme tak, aby nám řekly, co v které proměnné je a co která funkce dělá. Pokud je ovšem program delší a složitější, je dobré popisovat co jednotlivé příkazy, funkce nebo části programu vlastně dělají, jaké používají společné (globální) proměnné, případně jakých hodnot mohou proměnné nabývat a psát všechny další poznámky, které se budou hodit vám nebo někomu cizímu, kdo za čas přijde k vašemu propgramu a bude mu chtít porozumnět, nebo v něm dokonce něco změnit. K označení poznámky slouží znaky // pro jednořádkovou poznámku a /* a */ pro víceřádkovou poznámku, což předvedeme na příkladu:

     // Program na výpočet plochy kruhu
	 	 
     var polomerKruhu;      // poloměr kruhu v centimetrech
     var plochaKruhu        // plocha kruhu ve ctverecnich metrech
     var PI = 3.14;         // Ludolfovo číslo
	 
     /* Teď potřebujeme aby uživatel zadal hodnotu poloměru kruhu.
        K tomu použijeme příkaz prompt.
        Pokud nic nezadá, skončíme */

     polomerKruhu = prompt("Zadejte poloměr kruhu v cm.","");
     if (polomerKruhu != null)
        {
           // vypočtu a zobrazím výsledek
           document.write("Plocha kruhu = ", (PI * mocnina(polomerKruhu)) / 10000, " metru ctverecnich");
        }
     // konec hlavního programu
		

        

     function mocnina(parametr)
     // funkce na výpočet druhé mocniny
     {
        return parametr * parametr;
     }

Ještě jedna důležitá poznámka na závěr:
Jazyk Java je tzv. "case sensitive" neboli rozlišuje malá a velká písmena. Proto například pojmenujeme-li proměnnou Cislo, a pak použijeme proměnnou cislo, nebude se jednat o tu samou, případně nám bude nahlášena chyba, že proměnná cislo neexistuje. Totéž platí o klíčových slovech jazyka Java. Budete-li chtít nadefinovat funkci a místo klíčového slova function použijete slovo Function nahlásí vám prohlížeč chybu. To je při psaní HTML stránek poněkud matoucí, protože sám značkovací jazyk HTML velká a malá písmena nerozlišuje a je jedno, zda tag pro novou řádku napíšete <br> nebo <BR>.
Aby se omezil vznik takových chyb platí mezi programátory v jazyce Java i JavaScript konvence, že názvy proměnných i funkcí se píší malými písmeny. Pokud ovšem název proměnné nebo funkce obsahuje více slov, pak počáteční písmena dalších slov se píší velkým písmenem. Například:

   var velmiDlouhaVeta = "Toto je poměrně dlouhý textový řetězec";
   function vypocetDruheMocniny(vstupniParametr);

Pokud však v programu používáme takzvané konstanty, což jsou hodnoty, které by se neměly v průběhu programu měnit (například ve výše uvedeném příkladu Ludolfovo číslo), pak tyto konstanty píšeme velkými písmeny (například PI nebo HORNISAZBADPH apod.). To, že však hodnotu konstanty v průběhu programu nezměníme, si už musíme ohlídat sami. To jazyk JavaScript už neumí (na rozdíl od jazyka Java i většiny dalších programovacích jazyků).

A to je konec našeho krátkého kurzu.

Na mojí Home stránku neboli domácí Page

Kurz jazyka JavaScript