Javascript - formuláře

Nejčastější aplikací javascriptu je asistence při vyplňování políček ve formulářích.

Javascript ve formulářích může například pomoci vypočítat daňová příznání (bez odesílání dat na server, tedy bez ztráty soukromí), zkontrolovat smysluplnost vyplnění políček před odesláním, dopočítat některá políčka z těch již vyplněných a podobně. Pozor na odeslání formuláře poštou v Javascriptu, to je vázáno na správnou konfiguraci internetového prohlížeče (po svých zkušenostech rozhodně doporučuji odeslání dat e-mailem řešit raději v php).

V následující ukázce je jedna z nejjednodušších aplikací, přepočet jednotek.

 

Bývaly doby (a není tomu tak dávno), co každý program někde začínal, někde končil a jeho činnost šlo popsat algoritmem. Změna nastala s jiným systémem ovládání - stylem Windows (poprvé bylo k ovládání počítače grafické prostředí použito na Apple Macintosh v roce 1984; systém ovládání je starší, existoval na grafických pracovních stanicích, ale v té době jen v jednotlivých programech, nikoli v samotném operačním systému). Zde v programu proběhne jen jakási inicializace, a následně program čeká, co se bude dít. Pokud dojde k očekávané události, provede předpřipravenou obsluhu (odtud - řízené událostmi). Programátor místo psaní dlouhého programu připravuje obsluhu jednotlivých událostí. K prosazení tohoto přístupu k programování by stejně ale muselo dojít, protože takto pracují systémy řízení v reálném čase - tam se dokonce každá událost musí začít obsluhovat, i když obsluha těch předchozích ještě neskončila.

Typické obsluhované události

Musíme si představit, co se webové stránce může stát. Typické je, že někdo klikne na nějaký objekt (tlačítko, nápis, obrázek), někdo stiskne klávesu, tlačítko se může stát aktivním, někdo může vyplnit editační okénko, nebo dokonce zavřít okno prohlížeče. Senam událostí typického objektu je na adrese kosek.cz. V následujícím textu, který jsem náhodně potkal na Internetu, si můžete prohlédnout použítí Javascriptu. Nejprve je v hlavičce stránky definována funkce changeImage:

<html>
<head>
<title> Moje Stránka </title>
 <script type="text/javascript">
  var zadani;
  var vysledek;
  function inch2cm()
    {
      zadani=document.Form1.Vstup.value;
      window.alert(zadani);
      vysledek=zadani/2.54;
      document.Form1.Vystup.value=vysledek;
    }
 </script>
</head>

<body>
   <form name="Form1">
     <input type="text" name="Vstup" value="0">
     <input type="button" value="inch->cm" onclick="inch2cm()">
     <input type="text" name="Vystup">
   </form>
</body>
</html>

eval způsobí, že se funkce provede - možná je to zbytečné a stačilo by ji rovnou napsat, nevím.

Všimněte si hierarchické struktury dokumentu. Vytvořený název místa, které se má přepsat, je document.jméno-obrázku.src, což je jméno vlastnosti, která u obrázku zadává, z jakého souboru se má naplnit. Tuto funkci pak zavoláme dle potřeby, například definice jednoho z mnoha obrázků na zmíněné straně vypadala následovně:

<a href="forum.php">
<img src="buttons/6a.gif" border="0" name="obr6"
  onMouseover="changeImg('obr6','buttons/6b.gif')"
  onMouseOut="changeImg('obr6','buttons/6a.gif')"
  onClick="changeImg('obr6','buttons/6b.gif')">
</a>

Povšimněte si:

Prosím, podívejte se opět na stránky, jejichž autorem je ing. Jiří Kosek, jmenovitě na ukázky DHTML. Je zde několik příkladů, které byste již nyní měli být schopni pochopit.