Cvičení č. 14

Samostatná práce

1. Na disku D: si vytvořte vlastní složku.
2. Do své složky si uložte tento soubor tabelace.htm (kliknutím pravým tlačítkem myši na hypertextový odkaz a následnou volbou příkazu Save Target As...).
3. Soubor tabelace.htm uložený ve své složce si zobrazte v prohlížeči MS Internet Explorer a současně si jej otevřete v Poznámkovém bloku. Tento soubor obsahuje mj. následující příkazy HTML:

   <H1 align="center">Tabelace funkce sin(<I>x</I>) v intervalu<BR>
   od <I>a</I> do <I>b</I> s krokem <I>k</I></H1>
   <DIV align="center">
     <FORM name="f">
       <I>a</I> = <INPUT type="text" size="5" name="dolni_mez">
       <I>b</I> = <INPUT type="text" size="5" name="horni_mez"><BR>
       <I>k</I> = <INPUT type="text" size="5" name="krok">
       <INPUT type="button" value=" Zpracuj " onclick="Zobraz()"><BR>
       Zaokrouhlit: <INPUT type="radio" name="zaokr">ano
                    <INPUT type="radio" name="zaokr" checked>ne<BR>
       na <INPUT type="text" size="5" name="presnost"> desetinných míst
     </FORM>
   </DIV>
   <DIV id="vystup" align="center"><B>Zde se zobrazí výsledek.</B></DIV>
   

4. Nejdříve si přečtete celé zadání dnešního úkolu a teprve potom se pusťte do práce. Postupujte krok za krokem, od nejjednoduššího k nejsložitějšímu. Vaším úkolem je v dalších krocích postupně doplňovat tělo funkce Zobraz() tak, aby se po kliknutí na tlačítko Zpracuj zobrazily hodnoty funkce sin(x) v intervalu od a do b s krokem k, kde a, b, k jsou celočíslené hodnoty úhlu ve stupních. Vypočtená hodnota funkce sinus má být zobrazena, v závislosti na stavu prvků typu radio, buď nezaokrouhlená nebo zaokrouhlená s přesností na zadaný počet desetinných míst. Výstup řešte tabulkou užitím atributu innerHTML. Po splnění všech bodů zadání bychom měli obdržet výstup v jednom z následujících tvarů.
   
   Bez zaokrouhlení:
   
   
   Se zaokrouhlením:
   
   
   Poznámka: Vzhledem k tomu, že hodnotu funkce sin(x) vyčíslujeme v pohyblivé řádové čárce, dochází k určitým nepřesnostem zobrazení – např. sin(30°) není 0.5, ale 0.499999··· apod.
5. Nejprve se pokusíme pouze zobrazit tabulku hodnot funkce sin(x) bez ohledu na zaokrouhlení. Tělo funkce Zobraz() bude obsahovat příkazy, které do proměnných a, b, k postupně přiřadí hodnoty prvků dolni_mez, horni_mez, krok formuláře f. Nesmíme zapomenout na to, že těmito hodnotami mají být celá čísla, a proto použijeme konverzní funkci parseInt. Poté dynamicky vygenerujeme do elementu s id = vystup tabulku hodnot funkce sin(x) pro všechna přípustná x. Připomeňme, že metoda sin objektu Math vyžaduje úhel zadaný v radiánech, my jej však máme ve stupních. Proto musíme úhel ve stupních vhodným způsobem převést na úhel v radiánech. Znak ° (stupeň) zobrazíme znakovou entitou °. Řídicí proměnná i cyklu for bude postupně nabývat hodnot od a do b s krokem k. Příkazy HTML, které se mají zobrazit do elementu vystup budeme průběžně přidávat do textového řetězce str, který na konci těla funkce do elementu vystup vytiskneme.
   Zdrojový kód funkce Zobraz() potom může vypadat třeba následujícím způsobem:

   function Zobraz() {
     a = parseInt(document.f.dolni_mez.value);
     b = parseInt(document.f.horni_mez.value);
     k = parseInt(document.f.krok.value);
     str = "<TABLE border='1'>";
     str += "<TR><TH><I>x</I><TH>sin(<I>x</I>)";         // záhlaví tabulky
     for (i = a; i <= b; i = i + k) {
       hodnota = Math.sin(i * Math.PI / 180);            // převod na radiány a výpočet
       str += "<TR align='center'><TD>" + i + "&deg;<TD>" + hodnota
     }
     str += "</TABLE>"
     document.all.vystup.innerHTML = str;                // zobrazení
   }
   

6. Nyní se pokusíme ošetřit zadání neplatných hodnot. Zaměříme se na případy, kdy hodnoty a nebo b nebo k nebudou čísly, nebo když b < a, nebo když k bude menší nebo rovno nule. V takovýchto případech vypíšeme varovné hlášení a provádění fukce Zobraz() předčasně ukončíme příkazem return.

   function Zobraz() {
     a = parseInt(document.f.dolni_mez.value);
     b = parseInt(document.f.horni_mez.value);
     k = parseInt(document.f.krok.value);
     if (isNaN(a) || isNaN(b) || isNaN(k) || (b < a) || (k <= 0)) {
       alert("Chybně zadané hodnoty!");
       document.all.vystup.innerHTML = "<H1>CHYBA</H1>";
       return;
     }
     str = "<TABLE border='1'>";
     str += "<TR><TH><I>x</I><TH>sin(<I>x</I>)";
     for (i = a; i <= b; i = i + k) {
       hodnota = Math.sin(i * Math.PI / 180);
       str += "<TR align='center'><TD>" + i + "&deg;<TD>" + hodnota
     }
     str += "</TABLE>"
     document.all.vystup.innerHTML = str;
   }
   

7. Jako další krok provedeme zaokrouhlení. Prozatím se omezíme pouze na zaokrouhlení s přesností vždy na tři desetinná místa a hodnotu vstupního prvku presnost formuláře f budeme ignorovat. Zaokrouhlovat se má pouze v případě, je-li je zaškrtnutý první prvek sekce dvou rádiových tlačítek zaokr. Pozor – prvky se číslují od nuly! Protože jsou jen dvě možnosti (zaokrouhluje se nebo ne), použijeme logickou (booleovskou) proměnnou zaokrouhlit, která bude nabývat hodnot true (bude se zaokrouhlovat) nebo false (zaokrouhlovat se nebude). Na základě hodnoty proměnné zaokrouhlit pak užitím příkazu podmínky if získáme výsledek v požadovaném tvaru.

   function Zobraz() {
     a = parseInt(document.f.dolni_mez.value);
     b = parseInt(document.f.horni_mez.value);
     k = parseInt(document.f.krok.value);
     if (isNaN(a) || isNaN(b) || isNaN(k) || (b < a) || (k <= 0)) {
       alert("Chybně zadané hodnoty!");
       document.all.vystup.innerHTML = "<H1>CHYBA</H1>";
       return;
     }
     zaokrouhlit = document.f.zaokr[0].checked;
     str = "<TABLE border='1'>";
     str += "<TR><TH><I>x</I><TH>sin(<I>x</I>)";
     for (i = a; i <= b; i = i + k) {
       if (zaokrouhlit)
         hodnota = Math.round(Math.sin(i * Math.PI / 180) * 1000) / 1000;
       else
         hodnota = Math.sin(i * Math.PI / 180);
       str += "<TR align='center'><TD>" + i + "&deg;<TD>" + hodnota
     }
     str += "</TABLE>"
     document.all.vystup.innerHTML = str;
   }
   

   
   
8. Nyní již provedeme zaokrouhlení na zadaný počet desetinných míst. Je-li požadováno zaokrouhlení, stačí jen přečíst hodnotu prvku presnost formuláře f a vhodným způsobem použít metodu pow objektu Math.

   function Zobraz() {
     a = parseInt(document.f.dolni_mez.value);
     b = parseInt(document.f.horni_mez.value);
     k = parseInt(document.f.krok.value);
     if (isNaN(a) || isNaN(b) || isNaN(k) || (b < a) || (k <= 0)) {
       alert("Chybně zadané hodnoty!");
       document.all.vystup.innerHTML = "<H1>CHYBA</H1>";
       return;
     }
     zaokrouhlit = document.f.zaokr[0].checked;
     if (zaokrouhlit) {
       kolikMist = parseInt(document.f.presnost.value);
       mocnina = Math.pow(10, kolikMist);
     }
     str = "<TABLE border='1'>";
     str += "<TR><TH><I>x</I><TH>sin(<I>x</I>)";
     for (i = a; i <= b; i = i + k) {
       if (zaokrouhlit)
         hodnota = Math.round(Math.sin(i * Math.PI / 180) * mocnina) / mocnina;
       else
         hodnota = Math.sin(i * Math.PI / 180);
       str += "<TR align='center'><TD>" + i + "&deg;<TD>" + hodnota
     }
     str += "</TABLE>"
     document.all.vystup.innerHTML = str;
   }
   

9. A nyní již pracujte zcela samostatně. V další práci ošetřete zadání neplatné hodnoty počtu desetinných míst. Pokuste se stránku pozměnit tak, aby si uživatel mohl vybrat mezi tabelací funkce sin(x) nebo cos(x) a mohl určit, zda tabulka bude orámována a jaké bude mít pozadí. Způsob zadávání těchto parametrů řešte dle vlastního uvážení.
10. Obtížnost dnešního příkladu zhruba odpovídá obtížnosti příkladů, které se vyskytují na zkoušce. Více informací o zkoušce získáte prostřednictvím položky Zkouška v levé části obrazovky.