<< | JavaScript-cvičení? | >>

Zadání

  • vytvořte html stránku s formuláře pro konfiguraci hlavních komponent PC a výpočet ceny sestavy podle předlohy
  • k formuláři připojte skript aktivovaný změnou volby rozbalovacích seznamů - událost onchange
  • pomocí rozbalovacích seznamů nastavte tyto možnosti
    • CPU - AMD 2000,- Intel 3000,-
    • RAM - 1GB 400,- 2GB 800,- 3GB 1200,- 4GB 1600,-
    • HDD - 500GB 1200,- 750GB 1600,- 1000GB 2200,-
    • LCD - 22" 3000,- 24" 5000,- 26" 8000,-
    • OS - Linux 200,- Windows 2000,-

Příklad formuláře

Zvětšit

Ukázka kódu formuláře

<body>
  <h1>Konfigurace PC</h1>
  <form>
    <fieldset>
      <legend>Konfigurace sestavy</legend>
      <label>Typ procesoru</label><br>
      <select>
        <option>AMD</option>
        <option>INTEL</option>
      </select>
      <input>
    </fieldset>
    <fieldset>
      <legend>Cena sestavy</legend>    
      <label>Celkem</label><br>
      <input>
    </fieldset>
  </form>
</body>

Ukázka JS funkce

function secti() {
  var cpu = document.konfig.cpu.value;
  document.konfig.cena_cpu.value = cpu;
  var ram = document.konfig.ram.value;
  document.konfig.cena_ram.value = ram;
  var celkem = parseInt(cpu) + parseInt(ram);
  document.konfig.vysledek.value = celkem;
<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <title>Konfigurace PC</title>
  <script type="text/javascript">
  //načtení skriptu jako anonymní funkce až po načtení stránky
   window.onload = function() {
    var ram = document.getElementById("ram");
    var cpu = document.getElementById("cpu");
    function secti(){
      var pc = parseInt(cpu.value) + parseInt(ram.value);
      document.getElementById("cena_cpu").value = cpu.value;
      document.getElementById("cena_ram").value = ram.value;
      document.getElementById("vysledek").value = pc;
    }
    secti(); //spuštění funkce secti() s výchozími hodnotami po načtení stránky
    cpu.onchange = secti; //aktivace funkce secti pro změnu hodnoty v seznamu 
    ram.onchange = secti; //přiřazení návratové hodnoty funkce - bez závorek
  }
</script>
</head>
<body>
  <h1>Konfigurace PC</h1>
  <form style="width: 250px">
    <fieldset>
      <legend>Konfigurace sestavy</legend>
      <label>Typ procesoru</label><br>
      <select id="cpu" style="width: 100px">
        <option value="2000">AMD</option>
        <option value="3000">INTEL</option>
      </select>
      <input type="text" id="cena_cpu" size="10" /><br><br>
      <label>Kapacita RAM</label><br>
      <select id="ram" style="width: 100px">
        <option value="800">4 GB</option>
        <option value="1500">8 GB</option>
      </select>
      <input type="text" id="cena_ram" size="10" />
    </fieldset>
    <fieldset>
      <legend>Cena sestavy</legend>    
      <label>Celkem</label><br>
      <input type="text" id="vysledek" />
    </fieldset>
  </form>
</body>
</html>

Školní stránky

RSS