JavaScript – sada příkladů 3

Příklad 3.1

<FORM>
  <TABLE border="1" rules="cols" bordercolor="black" cellspacing="0"
         cellpadding="5">
    <TR>
      <TD colspan="3" bgcolor="black" align="center">
        <FONT size="5" color="white"><B>JEDNODUCHÝ TEST</B></FONT>
    <TR>
      <TD>Chemická značka sodíku je
      <TD>Chemická značka železa je
      <TD>Chemická značka chloru je
    <TR>
      <TD><INPUT type="radio" name="otazka1"
                 onclick="alert('Vaše odpověď je správná.')"> Na
      <TD><INPUT type="radio" name="otazka2"
                 onclick="alert('Vaše odpověď je špatná.')"> Ze
      <TD><INPUT type="radio" name="otazka3"
                 onclick="alert('Vaše odpověď je špatná.')"> Cu
    <TR>
      <TD><INPUT type="radio" name="otazka1"
                 onclick="alert('Vaše odpověď je špatná.')"> Sd
      <TD><INPUT type="radio" name="otazka2"
                 onclick="alert('Vaše odpověď je špatná.')"> Oc
      <TD><INPUT type="radio" name="otazka3"
                 onclick="alert('Vaše odpověď je správná.')"> Cl
    <TR>
      <TD><INPUT type="radio" name="otazka1"
                 onclick="alert('Vaše odpověď je špatná.')"> Zr
      <TD><INPUT type="radio" name="otazka2"
                 onclick="alert('Vaše odpověď je správná.')"> Fe
      <TD><INPUT type="radio" name="otazka3"
                 onclick="alert('Vaše odpověď je špatná.')"> Cr
  </TABLE>
</FORM>
JEDNODUCHÝ TEST
Chemická značka sodíku je Chemická značka železa je Chemická značka chloru je
Na Ze Cu
Sd Oc Cl
Zr Fe Cr

Příklad 3.2

<SCRIPT>
  function Spravne() {
    alert("Vaše odpověď je správná.");
  }

  function Spatne() {
    alert("Vaše odpověď je špatná.");
  }
</SCRIPT>

<FORM>
  <TABLE border="1" rules="cols" bordercolor="black" cellspacing="0"
         cellpadding="5">
    <TR>
      <TD colspan="3" bgcolor="black" align="center">
        <FONT size="5" color="white"><B>JEDNODUCHÝ TEST</B></FONT>
    <TR>
      <TD>Chemická značka sodíku je
      <TD>Chemická značka železa je
      <TD>Chemická značka chloru je
    <TR>
      <TD><INPUT type="radio" name="otazka1" onclick="Spravne()"> Na
      <TD><INPUT type="radio" name="otazka2" onclick="Spatne()"> Ze
      <TD><INPUT type="radio" name="otazka3" onclick="Spatne()"> Cu
    <TR>
      <TD><INPUT type="radio" name="otazka1" onclick="Spatne()"> Sd
      <TD><INPUT type="radio" name="otazka2" onclick="Spatne()"> Oc
      <TD><INPUT type="radio" name="otazka3" onclick="Spravne()"> Cl
    <TR>
      <TD><INPUT type="radio" name="otazka1" onclick="Spatne()"> Zr
      <TD><INPUT type="radio" name="otazka2" onclick="Spravne()"> Fe
      <TD><INPUT type="radio" name="otazka3" onclick="Spatne()"> Cr
  </TABLE>
</FORM>
JEDNODUCHÝ TEST
Chemická značka sodíku je Chemická značka železa je Chemická značka chloru je
Na Ze Cu
Sd Oc Cl
Zr Fe Cr

Příklad 3.3

Vyberte si barvu pozadí:
<FORM>
  <INPUT type="radio" name="barva" onclick="document.bgColor='red'">
  červená<BR>
  <INPUT type="radio" name="barva" onclick="document.bgColor='green'">
  zelená<BR>
  <INPUT type="radio" name="barva" onclick="document.bgColor='blue'">
  modrá<BR>
</FORM>
Vyzkoušejte si v novém okně.

Příklad 3.4

<SCRIPT>
  function Pozadi(barva) {
    document.bgColor=barva;
  }
</SCRIPT>

Vyberte si barvu pozadí:
<FORM>
  <INPUT type="radio" name="barva" onclick="Pozadi('red')"> červená<BR>
  <INPUT type="radio" name="barva" onclick="Pozadi('green')"> zelená<BR>
  <INPUT type="radio" name="barva" onclick="Pozadi('blue')"> modrá<BR>
</FORM>
Vyzkoušejte si v novém okně.

Příklad 3.5

<SCRIPT>
  function Pozdrav() {
    var datum=new Date();
    var h=datum.getHours();
    if (h<12)
      document.all.nadpis.innerText="Dobré ráno!";
    else
      if (h<17)
        document.all.nadpis.innerText="Dobré odpoledne!";
      else
        document.all.nadpis.innerText="Dobrý večer!";
  }
</SCRIPT>

<H1 id="nadpis" onclick="Pozdrav()">Klikni sem a uvidíš!</H1>

Klikni sem a uvidíš!

Příklad 3.6

<SCRIPT>
  function Soucet1() {
    var a=parseInt(document.formular1.cislo1.value);
    var b=parseInt(document.formular1.cislo2.value);
    document.formular1.vysledek.value=a+b;
  }
</SCRIPT>

<B>Součet dvou čísel</B>
<FORM name="formular1">
  <INPUT type="text" name="cislo1" size="10"> první číslo<BR>
  <INPUT type="text" name="cislo2" size="10"> druhé číslo<BR>
  <INPUT type="button" value="Sečti" onclick="Soucet1()"><BR>
  <INPUT type="text" name="vysledek" size="10"> součet<BR>
</FORM>
Součet dvou čísel
první číslo
druhé číslo

součet

Příklad 3.7

<SCRIPT>
  function Soucet2(f) {
    var a=parseInt(f.cislo1.value);
    var b=parseInt(f.cislo2.value);
    f.vysledek.value=a+b;
  }
</SCRIPT>

<B>Součet dvou čísel</B>
<FORM name="formular2">
  <INPUT type="text" name="cislo1" size="10"> první číslo<BR>
  <INPUT type="text" name="cislo2" size="10"> druhé číslo<BR>
  <INPUT type="button" value="Sečti" onclick="Soucet2(this.form)"><BR>
  <INPUT type="text" name="vysledek" size="10"> součet<BR>
</FORM>
Součet dvou čísel
první číslo
druhé číslo

součet

Příklad 3.8

<B>Součet dvou čísel</B>
<FORM name="formular3">
  <INPUT type="text" name="c1" size="10"> první číslo<BR>
  <INPUT type="text" name="c2" size="10"> druhé číslo<BR>
  <INPUT type="button" value="Sečti"
         onclick="this.form.vysledek.value=parseInt(this.form.c1.value)+
                                           parseInt(this.form.c2.value)"><BR>
  <INPUT type="text" name="vysledek" size="10"> součet<BR>
</FORM>
Součet dvou čísel
první číslo
druhé číslo

součet

Příklad 3.9

<SCRIPT>
  function KontrolaJmena() {
    if (document.osUdaje.jmeno.value=="")
      alert("Prosím, zadej své jméno!");
    else
      alert("Vítej uživateli se jménem "+document.osUdaje.jmeno.value+".");
  }

  function KontrolaAdresy() {
    if (document.osUdaje.adresa.value=="") {
      alert("Prosím, zadej svůj e-mail!");
      alert("Chci ti totiž napsat.");
    }
    else
      alert("Už znám tvůj e-mail!\nBrzo ti napíšu.");
  }
</SCRIPT>

<FORM name="osUdaje">
  <INPUT type="text" name="jmeno" size="40"> jméno<BR>
  <INPUT type="text" name="adresa" size="40"> e-mail<BR>
  <INPUT type="button" value="Zkontroluj jméno"
         onclick="KontrolaJmena()">
  <INPUT type="button" value="Zkontroluj e-mail"
         onclick="KontrolaAdresy()">
  <INPUT type="reset" value="Smaž"><BR>
</FORM>
jméno
e-mail

Příklad 3.10

<SCRIPT>
  function Vyhodnot() {
    document.f_vyraz.hodnota.value=eval(document.f_vyraz.vyraz.value);
  }
</SCRIPT>

<B>Vyhodnocení aritmetického výrazu</B>
<FORM name="f_vyraz">
  <INPUT type="text" name="vyraz" size="35"> výraz<BR>
  <INPUT type="text" name="hodnota" size="25" readonly> hodnota výrazu<BR>
  <INPUT type="button" value="Vyhodnoť" onclick="Vyhodnot()">
  <INPUT type="reset" value="   Smaž   "><BR>
</FORM>
Vyhodnocení aritmetického výrazu
výraz
hodnota výrazu

Příklad 3.11

<SCRIPT>
  function DobaJizdy() {
    var s=parseFloat(document.cesta.vzdalenost.value);
    var v=parseFloat(document.cesta.rychlost.value);
    document.cesta.doba.value=s/v;
  }
</SCRIPT>

Zadejte vzdálenost, kterou chcete ujet, průměrnou rychlost Vašeho
automobilu a klikněte na tlačítko <B>Vypočti</B>. Spočítá se
předpokládaná doba jízdy.<BR>
<FORM name="cesta">
  <INPUT type="text" name="vzdalenost" size="25">
  vzdálenost [km]<BR>
  <INPUT type="text" name="rychlost" size="25">
  průměrná rychlost [km/h]<BR>
  <INPUT type="text" name="doba" size="25" readonly>
  předpokládaná doba jízdy [h]<BR>
  <INPUT type="button" value="Vypočti" onclick="DobaJizdy()">
  <INPUT type="reset" value="Smaž"><BR>
</FORM>
Zadejte vzdálenost, kterou chcete ujet, průměrnou rychlost Vašeho automobilu a klikněte na tlačítko Vypočti. Spočítá se předpokládaná doba jízdy.
vzdálenost [km]
průměrná rychlost [km/h]
předpokládaná doba jízdy [h]

Příklad 3.12

Pro zadané tíhové zrychlení a výšku spočtěte dobu volného pádu. Připomeňme, že doba volného pádu t se spočítá podle vzorce t = (2 · h / g)1/2. 

<SCRIPT>
  function DobaVP() {
    var g=parseFloat(document.volnyPad.g.value);
    var h=parseFloat(document.volnyPad.h.value);
    document.volnyPad.t.value=Math.sqrt(2*h/g);
  }
</SCRIPT>

<FORM name="volnyPad">
  <INPUT type="text" name="g" size="10" value="9.80665">
  tíhové zrychlení [m/s<SUP>2</SUP>]<BR>
  <INPUT type="text" name="h" size="10">
  výška [m]<BR>
  <INPUT type="text" name="t" size="10" readonly>
  doba volného pádu [s]<BR>
  <INPUT type="button" value="Vypočti" onclick="DobaVP()"><BR>
</FORM>
tíhové zrychlení [m/s2]
výška [m]
doba volného pádu [s]

Příklad 3.13

Pro zadaný rok určete, zda je přestupný. Přestupné roky jsou dělitelné 4 kromě těch, které jsou dělitelné 100 a nejsou přitom dělitelné 400.

<SCRIPT>
  function JePrestupny(rok) {
    return ((rok%4==0) && (rok%100!=0)) || (rok%400==0);
  }

  function Zpracuj(f) {
    var r=parseInt(f.rok.value);
    if (isNaN(r)) {
      alert("Chybně zadaný rok!");
      return;
    }
    else
      if (JePrestupny(r))
        f.vysl.value="ANO";
      else
        f.vysl.value="NE";
  }
</SCRIPT>

<B>Zjištění přestupnosti zadaného roku</B>
<FORM>
  Rok
  <INPUT type="text" name="rok" size="6" maxlength="4">
  <INPUT type="button" value="Je přestupný?" onclick="Zpracuj(this.form)">
  <INPUT type="text" name="vysl" size="6" readonly>
</FORM>
Zjištění přestupnosti zadaného roku
Rok

Příklad 3.14

Napište skript, který bude provádět konverzi teploty uvedené ve stupních Celsia na stupně Fahrenheita a naopak. Převodní vztah: Celsius = (Fahrenheit – 32) · (5 / 9). Výsledek zaokrouhlete na jedno desetinné místo. 

<SCRIPT>
  function Cels2Fahr() {
    var teplCels=parseFloat(document.teplota.celsius.value);
    var teplFahr=(9/5)*teplCels+32;
    document.teplota.fahrenheit.value=Math.round(teplFahr*10)/10;
  }

  function Fahr2Cels() {
    var teplFahr=parseFloat(document.teplota.fahrenheit.value);
    var teplCels=(teplFahr-32)*(5/9);
    document.teplota.celsius.value=Math.round(teplCels*10)/10;
  }
</SCRIPT>

<FORM name="teplota">
  <TABLE border="0">
    <TR align="center">
      <TD colspan="3"><B>Teplota ve stupních</B>
    <TR align="center">
      <TD>Celsia<BR><INPUT type="text" name="celsius" size="10">
      <TD><INPUT type="button" value=">>> &deg;C na &deg;F >>>"
                 onclick="Cels2Fahr()"><BR>
          <INPUT type="button" value="<<< &deg;F na &deg;C <<<"
                 onclick="Fahr2Cels()">
      <TD>Fahrenheita<BR><INPUT type="text" name="fahrenheit" size="10">
  </TABLE>
</FORM>
Teplota ve stupních
Celsia

Fahrenheita

Příklad 3.15

Napište skript, který spočítá determinant čtvercové matice řádu 2.
Matice A s dimenzí 2 x 2 má determinant definovaný vztahem det (A) = a11a22 – a12a21.

<SCRIPT>
  function determinant() {
    a11=parseFloat(document.mat.a11.value);
    a12=parseFloat(document.mat.a12.value);
    a21=parseFloat(document.mat.a21.value);
    a22=parseFloat(document.mat.a22.value);
    document.mat.det.value=a11*a22-a12*a21;
  }
</SCRIPT>

<FORM name="mat">
  <TABLE>
    <TR>
      <TD><INPUT type="text" name="a11" size="4">
      <TD><INPUT type="text" name="a12" size="4">
    <TR>
      <TD><INPUT type="text" name="a21" size="4">
      <TD><INPUT type="text" name="a22" size="4">
  </TABLE>
  <INPUT type="button" value="Spočti" onclick="determinant()"><BR>
  Determinant = <INPUT type="text" name="det" size="4" readonly>
</FORM>

Determinant =

Příklad 3.16

Určete hmotnost kovové trubky o délce l metrů, která má vnější průměr d1 a vnitřní průměr d2. Trubka může být vyrobena z oceli (ρ = 7800 kg/m3), mosazi (ρ = 8600 kg/m3) nebo bronzu (ρ = 8800 kg/m3). Hmotnost trubky m určíme podle vztahu m = V · ρ, kde V je objem trubky a ρ hustota použitého kovu.
V = π / 4 · (d12 – d22) · l,
m = V · ρ = π / 4 · (d12 – d22) · l · ρ,
kde π je Ludolfovo číslo. Výsledek zaokrouhlete na tři desetinná místa.

<SCRIPT>
  function VypocetM() {
    var hustota=parseFloat(document.trubka.material.value);
    var delka=parseFloat(document.trubka.l.value);
    var prumer1=parseFloat(document.trubka.d1.value)/1000;  // převod na metry
    var prumer2=parseFloat(document.trubka.d2.value)/1000;  // převod na metry
    var objem=Math.PI/4*((prumer1*prumer1)-(prumer2*prumer2))*delka;
    document.trubka.m.value=Math.round(objem*hustota*1000)/1000;
  }                                                  // výpočet a zaokrouhlení
</SCRIPT>

<B>Hmotnost kovové trubky</B>
<FORM name="trubka">
  <SELECT name="material">
    <OPTION value="7800"> ocel
    <OPTION value="8600"> mosaz
    <OPTION value="8800"> bronz
  </SELECT> materiál<BR>
  <INPUT type="text" name="l" size="8">
    délka <I>l</I> [m]<BR>
  <INPUT type="text" name="d1" size="8"> 
    vnější průměr <I>d</I><SUB>1</SUB> [mm]<BR>
  <INPUT type="text" name="d2" size="8">
    vnitřní průměr <I>d</I><SUB>2</SUB> [mm]<BR>
  <INPUT type="button" value="Vypočti" onclick="VypocetM()">
  <INPUT type="reset" value="Smaž"><BR>
  <INPUT type="text" name="m"  size="8" readonly> hmotnost <I>m</I> [kg]
</FORM>
Hmotnost kovové trubky
materiál
délka l [m]
vnější průměr d1 [mm]
vnitřní průměr d2 [mm]

hmotnost m [kg]

Příklad 3.17

Následující program spočítá celkovou cenu jednoho zváženého druhu ovoce. Ovoce je možno vážit v košíku o dané hmotnosti. Při výpočtu celkové ceny se potom hmotnost košíku samozřejmě od celkové hmotnosti odečte. Povšimněte si, že desetinná čísla je třeba zadávat s desetinnou tečkou (nikoliv čárkou). 

<SCRIPT>
  function SpocitejCenu() {
    var cenaKg=parseFloat(document.prodejna.ovoce.value);
    var hmotnostCelkem=parseFloat(document.prodejna.hmotnost.value);
    if (isNaN(hmotnostCelkem) || (hmotnostCelkem<=0)) {
      alert("Špatně zadaná celková hmotnost!\nCenu nelze spočítat.");
      return;
    }
    if (document.prodejna.kosik.checked) {          // váženo včetně košíku?
      var hmotnostKosik=parseFloat(document.prodejna.hmKosik.value);
      if (isNaN(hmotnostKosik) || (hmotnostKosik<=0) ||
          (hmotnostKosik>=hmotnostCelkem)) {
        alert("Špatně zadaná hmotnost košíku!\nCenu nelze spočítat.");
        return;
      }
      hmotnostCelkem-=hmotnostKosik;            // odečtení hmotnosti košíku
    }
    var celkemKc=cenaKg*hmotnostCelkem;
    celkemKc=Math.round(celkemKc*100)/100;      // zaokrouhlení
    document.all.cena.innerText=celkemKc;
  }
</SCRIPT>

<TABLE border="1" bordercolor="black" cellspacing="0" cellpadding="5">
<COLGROUP align="center">
<COLGROUP align="right" bgcolor="lightyellow">
  <TR><TD bgcolor="yellow">
        <FONT color="blue" size="6">CENÍK OVOCE</FONT>
      <TD align="center" bgcolor="lightblue">Cena<BR>za 1 kg
  <TR><TD>banány <TD>19,90 Kč
  <TR><TD>pomeranče <TD>21,00 Kč
  <TR><TD>mandarinky <TD>22,90 Kč
  <TR><TD>jablka <TD>20,00 Kč
  <TR><TD>grepy <TD>24,90 Kč
</TABLE>

<FORM name="prodejna">
  <SELECT name="ovoce">
    <OPTION value="19.90">banány
    <OPTION value="21">pomeranče
    <OPTION value="22.90">mandarinky
    <OPTION value="20">jablka
    <OPTION value="24.90">grepy
  </SELECT>
  celková hmotnost <INPUT type="text" name="hmotnost" size="6"> kg<BR>
  <INPUT type="checkbox" name="kosik"> váženo včetně košíku o hmotnosti
  <INPUT type="text" name="hmKosik" size="6" value="0.230"> kg<BR>
  <INPUT type="button" value="Spočítej" onclick="SpocitejCenu()">
</FORM>
<H1>K zaplacení: <FONT color="red"><SPAN id="cena">0</SPAN></FONT> Kč.</H1>
CENÍK OVOCE Cena
za 1 kg
banány 19,90 Kč
pomeranče 21,00 Kč
mandarinky 22,90 Kč
jablka 20,00 Kč
grepy 24,90 Kč
celková hmotnost kg
váženo včetně košíku o hmotnosti kg

K zaplacení: 0 Kč.

Příklad 3.18

Vypočtěte a zaokrouhlete na celé číslo zdvihový objem dvouválcového vznětového motoru traktoru, je-li průměr válce d a zdvih h. Dále vypočtěte a zaokrouhlete na pět desetinných míst spotřebu nafty na jeden pracovní zdvih, jestliže při hluboké orbě motor spotřeboval při konstantních otáčkách n (otáček za sekundu) za t minut x litrů nafty.
Objem válce V = π · (d / 2)2 · h.

<SCRIPT>
  function ObjemSpotreba() {
    var prumer=parseFloat(document.dvouvalec.d.value);
    var zdvih=parseFloat(document.dvouvalec.h.value);
    var zdvObjem=2*Math.PI/4*prumer*prumer*zdvih/1000;     // obou válců v cm3
    document.dvouvalec.v.value=Math.round(zdvObjem);
    var spotreba=parseFloat(document.dvouvalec.x.value);        // v litrech
    var dobaProvozu=parseFloat(document.dvouvalec.t.value)*60;  // v sekundách
    var zdvihuCelkem=dobaProvozu*parseFloat(document.dvouvalec.n.value);
    var spotrZdvih=spotreba/zdvihuCelkem*1000;                  // v cm3
    document.dvouvalec.s.value=Math.round(spotrZdvih*100000)/100000;
  }
</SCRIPT>

<FORM name="dvouvalec">
  <INPUT type="text" name="d" size="8"> průměr válce [mm]<BR>
  <INPUT type="text" name="h" size="8"> zdvih [mm]<BR>
  <INPUT type="text" name="t" size="8"> doba provozu [min]<BR>
  <INPUT type="text" name="x" size="8"> spotřeba nafty [l]<BR>
  <INPUT type="text" name="n" size="8"> otáčky [s<SUP>-1</SUP>]<BR>
  <INPUT type="button" value="Vypočti" onclick="ObjemSpotreba()">
  <INPUT type="reset" value="Smaž"><BR>
  <INPUT type="text" name="v" size="8" readonly>
  zdvihový objem [cm<SUP>3</SUP>]<BR>
  <INPUT type="text" name="s" size="8" readonly>
  spotřeba nafty na jeden pracovní zdvih [cm<SUP>3</SUP>]<BR>
</FORM>
průměr válce [mm]
zdvih [mm]
doba provozu [min]
spotřeba nafty [l]
otáčky [s-1]

zdvihový objem [cm3]
spotřeba nafty na jeden pracovní zdvih [cm3]


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ě