JavaScript – sada příkladů 5

Příklad 5.1

Vytiskněte tabulku faktoriálů čísel od 1 do 10. Použijte příkaz cyklu for.

<B>Tabulka faktoriálů od 1 do 10</B><BR>
<SCRIPT>
  var f=1;
  for (var i=1; i<=10; i++) {
    f*=i;                                 // f=f*i
    document.write(i+"! = "+f+"<BR>");
  }
</SCRIPT>
Tabulka faktoriálů od 1 do 10

Příklad 5.2

Vytiskněte tabulku faktoriálů čísel od 1 do 10. Použijte příkaz cyklu while.

<B>Tabulka faktoriálů od 1 do 10</B><BR>
<SCRIPT>
  var f=1;
  var i=1;
  while (i<=10) {
    f*=i;                                 // f=f*i
    document.write(i+"! = "+f+"<BR>");
    i++;                                  // i=i+1
  }
</SCRIPT>
Tabulka faktoriálů od 1 do 10

Příklad 5.3

Vytiskněte tabulku faktoriálů čísel od 1 do 10. Použijte příkaz cyklu for. Výsledky zformátujte do dynamicky generované tabulky.

<TABLE border="1">
<TR><TH>Číslo<TH>Faktoriál
<SCRIPT>
  var f=1;
  for (var i=1; i<=10; i++) {
    f*=i;                                 // f=f*i
    document.write("<TR align='right'><TD>"+i+"<TD>"+f);
  }
</SCRIPT>
</TABLE>
ČísloFaktoriál

Příklad 5.4

Vytiskněte tabulku faktoriálů čísel od 1 do n, kde n je číslo zadané uživatelem (použijte metodu prompt).

<SCRIPT>
  var pocet=parseInt(prompt("Zadejte počet čísel - max. 170",10));
  document.write("<B>Tabulka faktoriálů od 1 do "+pocet+"</B><BR>");
  var f=1;
  for (var i=1; i<=pocet; i++) {
    f*=i;                                 // f=f*i
    document.write(i+"! = "+f+"<BR>");
  }
</SCRIPT>
Vyzkoušejte si v novém okně.

Příklad 5.5

Vytiskněte tabulku faktoriálů čísel od m do n, kde m a n jsou čísla zadaná uživatelem (použijte metodu prompt).

<SCRIPT>
  var m=parseInt(prompt("Zadejte počáteční hodnotu",1));
  var n=parseInt(prompt("Zadejte koncovou hodnotu",10));
  document.write("<B>Tabulka faktoriálů od "+m+" do "+n+"</B><BR>");
  var f=1;
  for (var i=1; i<=n; i++) {
    f*=i;                                 // f=f*i
    if (i>=m)
      document.write(i+"! = "+f+"<BR>");
  }
</SCRIPT>
Vyzkoušejte si v novém okně.

Příklad 5.6

Nadefinujte funkci pro výpočet faktoriálu čísla n. Tuto funkci potom použijte při tisku tabulky faktoriálů všech sudých čísel od 2 do 20.

<SCRIPT>
  function Faktorial(n) {
    var soucin=n;
    for (var i=n-1; i>0; i--)
      soucin*=i;                              // soucin=soucin*i;
    return soucin;
  }

  document.write("<B>Tabulka faktoriálů všech sudých čísel od 2 do 20</B><BR>");
  for (var i=2; i<=20; i+=2) {
    document.write(i+"! = "+Faktorial(i)+"<BR>");
  }
</SCRIPT>

Příklad 5.7

Vytiskněte tabulku faktoriálů čísel od 1 do n, kde n je číslo zadané uživatelem (použijte metodu prompt). Výstup řešte užitím atributu innerHTML.

<SCRIPT>
  function Zobraz() {
    var pocet=parseInt(prompt("Zadejte počet čísel - max. 170",10));
    if (isNaN(pocet) || (pocet<1) || (pocet>170)) {
      alert("Chybné zadání!");
      return;
    }
    document.all.odst.innerHTML="<B>Faktoriály od 1 do "+pocet+"</B><BR>";
    var f=1;
    for (var i=1; i<=pocet; i++) {
      f*=i;                                 // f=f*i
      document.all.odst.innerHTML+=(i+"! = "+f+"<BR>");
    }
  }
</SCRIPT>

<FORM>
  <INPUT type="button" value="Zobraz tabulku faktoriálů" onclick="Zobraz()">
</FORM>

<DIV id="odst">
Zde se zobrazí tabulka faktoriálů.
</DIV>
Zde se zobrazí tabulka faktoriálů.

Příklad 5.8

Vytiskněte tabulku faktoriálů čísel od 1 do n, kde n je číslo zadané uživatelem (použijte metodu prompt). Výstup zobrazte do textové oblasti formuláře.

<SCRIPT>
  function Vypis1() {
    var pocet=parseInt(prompt("Zadejte počet čísel - max. 170",10));
    if (isNaN(pocet) || (pocet<1) || (pocet>170)) {
      alert("Chybné zadání!");
      return;
    }
    document.form1.textpole.value="Faktoriály od 1 do "+pocet+"\n";
    document.form1.textpole.value+="------------------------------------\n";
    var f=1;
    for (var i=1; i<=pocet; i++) {
      f*=i;                                 // f=f*i
      document.form1.textpole.value+=(i+"! = "+f+"\n");
    }
  }
</SCRIPT>

<FORM name="form1">
  <INPUT type="button" value="Zobraz tabulku faktoriálů" onclick="Vypis1()">
  <BR>
  <TEXTAREA name="textpole" rows="20" cols="40" readonly>
  </TEXTAREA>
</FORM>

Příklad 5.9

Vytiskněte tabulku faktoriálů čísel od 1 do n, kde n je číslo zadané uživatelem (použijte vstup z textového pole formuláře). Výstup zobrazte do textové oblasti formuláře.

<SCRIPT>
  function Vypis2() {
    var pocet=parseInt(document.form2.pocet.value);
    if (isNaN(pocet) || (pocet<1) || (pocet>170)) {
      alert("Chybné zadání!");
      return;
    }
    document.form2.textpole.value="Faktoriály od 1 do "+pocet+"\n";
    document.form2.textpole.value+="------------------------------------\n";
    var f=1;
    for (var i=1; i<=pocet; i++) {
      f*=i;                                 // f=f*i
      document.form2.textpole.value+=(i+"! = "+f+"\n");
    }
  }
</SCRIPT>

<FORM name="form2">
  max.<INPUT type="text" name="pocet" size="4" maxlength="3">
  <INPUT type="button" value="Zobraz tabulku faktoriálů" onclick="Vypis2()">
  <BR>
  <TEXTAREA name="textpole" rows="20" cols="40" readonly>
  </TEXTAREA>
</FORM>
max.

Příklad 5.10

Zobrazte hodnoty funkce sinus(x) v intervalu od a do b s krokem h. Všechna čísla v tabulce zaokrouhlete na tři desetinná místa. Výstup řešte dynamicky generovanou tabulkou. Uživatel musí mít možnost určit, zda tabulka bude orámována či nikoliv.

<H1 align="center">Tabulka hodnot funkce sin(<I>x</I>)</H1>
<SCRIPT>
  var a=parseFloat(prompt("Zadejte dolní mez",0));
  var b=parseFloat(prompt("Zadejte horní mez",10));
  var h=parseFloat(prompt("Zadejte krok",0.5));
  var ramecek=confirm("Přejete si tabulku orámovat?");
  if (ramecek)
    document.write("<TABLE border='1' align='center' width='400'>");
  else
    document.write("<TABLE border='0' align='center' width='400'>");
  document.write("<COLGROUP span='2' align='center'>");
  document.write("<TR><TH width='200'><I>x</I><TH width='200'>sin(<I>x</I>)");
  var x=a;
  var x1,y;
  while (x<=b) {
    x1=Math.round(x*1000)/1000;            // zaokrouhlená hodnota pro tisk
    y=Math.round(Math.sin(x)*1000)/1000;
    document.write("<TR><TD>"+x1+"<TD>"+y);
    x+=h;
  }
  document.write("</TABLE>");
</SCRIPT>
Vyzkoušejte si v novém okně.

Ukázka pro a = 0, b = 2, h = 0.2 a volbu orámované tabulky.

Tabulka hodnot funkce sin(x)

Příklad 5.11

Pro zadané n z intervalu 2 až 10 vytiskněte tabulku malé násobilky. Pro vstup čísla n použijte metodu prompt. Ošetřete zadání neplatných hodnot. 

<SCRIPT>
  var n=0;
  while (isNaN(n) || (n<2) || (n>10))
    n=parseInt(prompt("Zadejte číslo n",10));
  document.write("<TABLE border='1' bordercolor='black' align='center'>");
  document.write("<TR bgcolor='pink'><TD colspan='"+n+1+"' align='center'>");
  document.write("<FONT size='5'>MALÁ NÁSOBILKA</FONT>");
  document.write("<TR align='center'><TD bgcolor='silver'> ");
  var i,j;
  for (i=1; i<=n; i++)                             // záhlaví tabulky
    document.write("<TD bgcolor='lightblue'><B>"+i+"</B>");
  for (i=1; i<=n; i++) {                           // řádky tabulky
    document.write("<TR align='center'><TD bgcolor='lightblue'><B>"+i+"</B>");
    for (j=1; j<=n; j++)                           // buňky aktuálního řádku
      document.write("<TD>"+i*j);
  }
  document.write("</TABLE>");
</SCRIPT>
Vyzkoušejte si v novém okně.

Ukázka pro n = 10

Příklad 5.12

<SCRIPT>
  function ObjednejCD() {
    var zprava="Počet objednaných CD: ";
    var cenaCelkem=0;
    var pocetCD=0;
    for (var i=0; i<=3; i++)
      if (document.cedecka.cd[i].checked)
        pocetCD++;
    cenaCelkem=pocetCD*500;
    if (pocetCD>=2)
      cenaCelkem*=0.9;                     // sleva 10 %
    zprava+=pocetCD+"\nCelková cena: "+cenaCelkem+" Kč";
    document.cedecka.vystup.value=zprava;
  }
</SCRIPT>

Vyberte si kompaktní disky, které si chcete objednat. Cena jednoho CD
je 500,- Kč. Pokud si objednáte minimálně dva kompaktní disky, získáváte
automaticky slevu ve výši 10 % z celkové hodnoty objednávky.
<FORM name="cedecka">
  <INPUT type="checkbox" name="cd"> Hity 50. let<BR>
  <INPUT type="checkbox" name="cd"> Hity 60. let<BR>
  <INPUT type="checkbox" name="cd"> Hity 70. let<BR>
  <INPUT type="checkbox" name="cd"> Hity 80. let<BR>
  <INPUT type="button" value="Objednat" onclick="ObjednejCD()">
  <INPUT type="reset" value="Smazat"><BR>
  <B>Vaše objednávka:</B><BR>
  <TEXTAREA name="vystup" rows="5" cols="60" readonly>
  </TEXTAREA>
</FORM>
Vyberte si kompaktní disky, které si chcete objednat. Cena jednoho CD je 500,- Kč. Pokud si objednáte minimálně dva kompaktní disky, získáváte automaticky slevu ve výši 10 % z celkové hodnoty objednávky.
Hity 50. let
Hity 60. let
Hity 70. let
Hity 80. let

Vaše objednávka:

Příklad 5.13

<SCRIPT>
  function CelkovaCenaCD() {
    var suma=0;
    for (var i=0; i<=3; i++)
      if (document.formCD.cd[i].checked)
        suma+=parseInt(document.formCD.cd[i].value);
    document.formCD.celkem.value=suma+" Kč";
  }
</SCRIPT>

Vyberte si kompaktní disky, které si chcete objednat. Cena každého CD
je uvedena.
<FORM name="formCD">
  <INPUT type="checkbox" name="cd" value="420"> Hity 50. let (420,- Kč)<BR>
  <INPUT type="checkbox" name="cd" value="450"> Hity 60. let (450,- Kč)<BR>
  <INPUT type="checkbox" name="cd" value="480"> Hity 70. let (480,- Kč)<BR>
  <INPUT type="checkbox" name="cd" value="510"> Hity 80. let (510,- Kč)<BR>
  <INPUT type="text" name="celkem" size="10" readonly>
  <INPUT type="button" value="Celková cena" onclick="CelkovaCenaCD()">
  <INPUT type="reset" value="Smazat"><BR>
</FORM>
Vyberte si kompaktní disky, které si chcete objednat. Cena každého CD je uvedena.
Hity 50. let (420,- Kč)
Hity 60. let (450,- Kč)
Hity 70. let (480,- Kč)
Hity 80. let (510,- Kč)

Příklad 5.14

Následující skript spočítá průměrnou hmotnost a výšku pěti zadaných osob. Průměrné hodnoty se zaokrouhlí na jedno desetinné místo. Současně se vypíše jméno nejvyšší osoby. Pokud má maximální výšku několik osob současně, vypíše se jméno pouze první z nich. Předpokládejme, že ve složce images máme uložený obrázek se jménem fotbal.gif.

<SCRIPT>
  function Zpracuj() {
    var maxVyska=0;
    var maxVyskaKdo=0;
    var soucHmotnosti=0;
    var soucVysek=0;
    for (var i=0; i<=4; i++) {
      soucHmotnosti+=parseFloat(document.osoby.hmotnost[i].value);
      soucVysek+=parseFloat(document.osoby.vyska[i].value);
      if (parseFloat(document.osoby.vyska[i].value)>maxVyska) {
        maxVyska=parseFloat(document.osoby.vyska[i].value);
        maxVyskaKdo=i;
      }
    }
    document.osoby.prumHmotnost.value=Math.round(soucHmotnosti/5*10)/10;
    document.osoby.prumVyska.value=Math.round(soucVysek/5*10)/10;
    document.osoby.nejvyssi.value=document.osoby.jmeno[maxVyskaKdo].value;
  }
</SCRIPT>

<FORM name="osoby">
  <TABLE align="center" border="1" cellspacing="0" cellpadding="5">
    <COLGROUP align="center" bgcolor="white">
    <COLGROUP align="center" bgcolor="lightblue">
    <COLGROUP align="center" bgcolor="antiquewhite">
    <COLGROUP align="center" bgcolor="lightyellow">
    <TR>
      <TD rowspan="6"><IMG src="images/fotbal.gif" width="216" height="275">
      <TD>Jméno<TD>Hmotnost<TD>Výška
    <TR>
      <TD><INPUT type="text" name="jmeno" size="20">
      <TD><INPUT type="text" name="hmotnost" size="5"> kg
      <TD><INPUT type="text" name="vyska" size="5"> cm
    <TR>
      <TD><INPUT type="text" name="jmeno" size="20">
      <TD><INPUT type="text" name="hmotnost" size="5"> kg
      <TD><INPUT type="text" name="vyska" size="5"> cm
    <TR>
      <TD><INPUT type="text" name="jmeno" size="20">
      <TD><INPUT type="text" name="hmotnost" size="5"> kg
      <TD><INPUT type="text" name="vyska" size="5"> cm
    <TR>
      <TD><INPUT type="text" name="jmeno" size="20">
      <TD><INPUT type="text" name="hmotnost" size="5"> kg
      <TD><INPUT type="text" name="vyska" size="5"> cm
    <TR>
      <TD><INPUT type="text" name="jmeno" size="20">
      <TD><INPUT type="text" name="hmotnost" size="5"> kg
      <TD><INPUT type="text" name="vyska" size="5"> cm
    <TR bgcolor="silver">
      <TD rowspan="2"><INPUT type="button" value="Zpracuj" onclick="Zpracuj()">
      <TD>Průměrné hodnoty
      <TD><INPUT type="text" name="prumHmotnost" size="5" readonly> kg
      <TD><INPUT type="text" name="prumVyska" size="5" readonly> cm
    <TR bgcolor="silver">
      <TD>Nejvyšší osoba
      <TD colspan="2"><INPUT type="text" name="nejvyssi" size="20" readonly>
  </TABLE>
</FORM>
JménoHmotnostVýška
kg cm
kg cm
kg cm
kg cm
kg cm
Průměrné hodnoty kg cm
Nejvyšší osoba

Příklad 5.15

Pro zadaný počet čísel (metodou prompt) dynamicky vygenerujte formulář, který bude sloužit ke vstupu zadávaných čísel, tedy bude mít právě tolik vstupních prvků, kolik uživatel zadal celkový počet čísel. Z čísel vložených do formuláře pak vypočtěte jejich součet a průměrnou hodnotu a jejich hodnoty zobrazte graficky formou jednoduchého grafu. Při tvorbě grafu pro zjednodušení předpokládejte, že se budou obvykle zadávat reálná čísla z intervalu 1 až 100 (záporná čísla neuvažujte) a že počet zadávaných čísel nebude větší než 20. Výsledky zobrazujte s přesností na tři desetinná místa. Pro zobrazení položek grafu použijeme obrázek cerv_bod.gif, který je uložen ve složce images a má rozměr 1 x 1 bod. Víme, že velikost obrázku lze dynamicky měnit a toho právě můžeme výhodně využít při tvorbě grafu. Nesmíme však zapomenout, že výška obrázku musí být celé číslo, a proto musíme reálnou hodnotu čísla zaokrouhlit na celé číslo. Tedy např. pro reálné číslo 21.235 nastavíme výšku obrázku na 21 bodů.

<SCRIPT>
  function Statistika() {
    var suma=0;
    var cisla=new Array(pocet);

    for (i=0; i<pocet; i++) {
      cisla[i]=parseFloat(document.stat.elements[i].value);    // naplň pole
      suma+=cisla[i];                                       // a spočti sumu
    }
    document.stat.soucet.value=Math.round(suma*1000)/1000;

    var prumer=suma/pocet;                                 // vypočti průměr
    document.stat.prumer.value=Math.round(prumer*1000)/1000;

    for (i=0; i<pocet; i++)                                   // zobraz graf
      document.all.obr[i].height=Math.round(document.stat.elements[i].value);
  }                                     // výška obrázku musí být celé číslo
</SCRIPT>

<H1 align="center">Statistické výpočty</H1>
<FORM name="stat">
  <TABLE border="1" bordercolor="black" align="center"
         cellspacing="0" cellpadding="3">
    <COLGROUP align="right" bgcolor="antiquewhite" width="120">
    <COLGROUP align="center" bgcolor="lightblue" width="150">
    <TR>
      <TH>Poř. č.<TH>Zadaná čísla

    <SCRIPT>                               // dynamické generování formuláře
      var pocet=0;
      while (isNaN(pocet) || (pocet<2) || (pocet>20))
        pocet=parseInt(prompt("Zadejte počet čísel (max.20)"));
      for (var i=1; i<=pocet; i++)
        document.write("<TR><TD>"+i+"<TD><INPUT type='text' size='10'>");
    </SCRIPT>

    <TR bgcolor="silver">
      <TD><B>Součet</B>
      <TD><INPUT type="text" name="soucet" size="10" readonly>
    <TR bgcolor="silver">
      <TD><B>Průměr</B>
      <TD><INPUT type="text" name="prumer" size="10" readonly>
    <TR align="center" bgcolor="silver">
      <TD><INPUT type="reset" value="    Smaž    ">
      <TD><INPUT type="button" value="   Vypočti   " onclick="Statistika()">
  </TABLE>

  <BR><BR>

  <TABLE border="1" bordercolor="1" align="center"
         cellspacing="0" cellpadding="5">

    <SCRIPT>                        // dynamické generování tabulky pro graf
      document.write("<TR><TD align='center' colspan='"+pocet+"'>");
      document.write("<FONT size='5' color='blue'><B>GRAF</B></FONT>")
      document.write("<TR valign='bottom'>");
      for (i=1; i<=pocet; i++) {                          // vložení obrázků
        document.write("<TD width='20'><IMG src='images/cerv_bod.gif' ");
	document.write("name='obr' width='15' height='1'>");
      }
      document.write("<TR align='center' bgcolor='pink'>");
        for (i=1; i<=pocet; i++)                            // popisky osy x
      document.write("<TD>"+i);
    </SCRIPT>

  </TABLE>
</FORM>
Vyzkoušejte si v novém okně.

Ukázka pro pocet = 5

Statistické výpočty

Poř. č.Zadaná čísla
Součet
Průměr




Jak si vyzkoušet výše uvedené příklady?
  1. Označte myší zdrojový text libovolné ukázky.
  2. Vybraný text zkopírujte do clipboardu.
  3. Klikněte myší do textového pole uvedeného níže a text sem z clipboardu vložte.
  4. Zdrojový text můžete libovolně upravit.
  5. Poté klikněte na tlačítko Ukázat. V okně náhledu se vám zobrazí dokument, jehož zdrojový text byl zapsán v textovém poli.
  6. Pokud je třeba, aby se dokument otevřel v novém okně, stačí kliknout na tlačítko Ukázat v novém okně.
  7. Tlačítkem Vybrat vše se označí veškerý text zapsaný v textovém poli.
  8. Tlačítkem Smazat můžete obsah celého textového pole vymazat.

Náhled:


Datum poslední modifikace: 9. února 2001. Upozornění na případné chyby zasílejte na adresu vojkuvka.m@fce.vutbr.cz.
© 1999 – 2001, Michal Vojkůvka, AIU FAST VUT v Brně