Formulieren en Events

Formulieren en events

Tot nu toe hebben we in de voorbeelden variabelen gedeclareerd en gezien hoe we met deze aangemaakte variabelen kunnen rekenen. De uitkomst is elke keer hetzelfde, tenzij je de waarde in de code verandert. Een bezoeker van het HTML document ziet dus iedere keer de zelfde berekening. Niet erg interactief dus. In het begin van het vorige hoofdstuk lieten we onderstaand voorbeeld al eens zien.

Voorbeeld: Geef getal

In dit voorbeeld is er wel interactie mogelijk. In dit hoofdstuk ga je leren hoe we op deze manier in Javascript met de gebruiker kunnen communiceren.

Aan het einde van deze les weet je :

  • hoe een formulier communiceert met javascript;
  • hoe je gegevens kunt uitlezen via een formulier in javascript en omgekeerd;
  • hoe je gegevens kunt uitlezen via een formulier en kunt weergeven in html;

Bekijk de video. Deze video biedt een basis voor de rest van dit hoofdstuk.


Het formulier

Je hebt vast wel eens in een website gegevens moeten invullen. Een pagina met invoervelden noemt men een formulier. HTML biedt de mogelijkheid formulieren aan te maken. Met een formulier kun je communiceren met een server of kun je op de bladzijde zelf opdrachten uitvoeren door het formulier te koppelen aan Javascript. In het onderstaande voorbeeld vult de gebruiker zelf een willekeurige waarde in. Door op de knop of op enter de drukken, doet het programma iets met de invoer. Wat het programma doet, is nu niet van belang. Het gaat erom hoe dit principe werkt. In het onderstaande voorbeeld vult de gebruiker zelf een willekeurige waarde in. Door op de knop of op enter de drukken, rekent het programma iets uit. Wat het programma uitrekent, is nu niet van belang. Het gaat erom hoe dit principe werkt.
voorbeeld
Voorbeeld: Geef getal
Dit is de bijbehorende code van het HTML document
  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  </head>
  <body>
  <table summary="">
    <tr>
      <td>
        Voorbeeld: Geef een tekenreeks
      </td>
      <td>
        <form onsubmit="return false;">
             <input id="invoer" value="" />
        </form>
      </td>
      <td>
         <button onclick="javascript:voeruit();">Voer uit</button>
      </td>
      <td id="uitvoer">
      </td>
    </tr>
  </table>
  </body>
</html>
  

De tag input definieert een invoer veld. Binnen de button tag staat de code "javascript:voeruit();". Bij de button tag staat die achter onclick. De engelse term on staat hier voor "als er ge... wordt". Dit klinkt als actie na een gebeurtenis (event in het engels). Dit is de manier waarmee HTML met javascript praat als er gebeurtenissen optreden. Zo zie je bij de form tag onsubmit, de gebeurtenis submit is het opsturen van het formulier naar de server. De onsubmit actie is "return false;". Dit heeft het resultaat dat het formulier niet opgestuurd wordt, maar dat de huidige pagina in het browser tabblad blijft. Iets dat we in deze javascript cursus willen.

Als je bovenstaande code in een HTML document hangt krijg je een foutmelding. De browser weet niet wat voeruit is. Deze naam hebben we zelf verzonnen en moeten we in javascript aanmaken. De ronde haakjes () achter voeruit verteld de browser dat voeruit een javascript functie is. De benodigde code gaan we toevoegen en wel in de head sectie van het HTML document.

script
  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  <script type="text/javascript">
      /**
         functie voeruit reageert op het invullen van het formulier in dit 
         HTML document. Met de invoer wordt .... gedaan.
      */
      function voeruit()  // Begin functie declaratie
      {                   // functie blok begint met accolade openen
                          // tussen de accolades is de code die wordt uitgevoerd
      }                   // functie blok eindigt met accolade sluiten
    </script>
  </head>
  <body>
  <form onsubmit="return false;">
  <table summary="">
    <tr>
      <td>
         Voorbeeld: Geef een tekenreeks
      </td>
      <td>
        <input id="invoer" value="" />
      </td>
      <td>
         <button onclick="javascript:voeruit();">Voer uit</button>
      </td>
      <td id="uitvoer">
      </td>
    </tr>
  </table>
  </form>
  </body>
</html>
  
De zwart gedrukte code is nodig om geen fouten op de pagina te hebben. Er gebeurt echter nog iets. We zullen de functie voeruit een alert box laten tonen met daarin de ingetypte waarde.
    <script type="text/javascript">
      /**
         functie voeruit reageert op het invullen van het formulier in dit
         HTML document. Met de invoer wordt .... gedaan.
      */
      function voeruit()
      {
         /* 
            Pak uit de het HTML document het element met id 'invoer'
            met behulp van de methode document.getElementById
            en stop die in de variabele invoerobject.
         */
         var invoerobject = document.getElementById('invoer');
         /*
            Een input element heeft de eigenschap value
            Deze representeerd de ingevoerde tekenreeks
         */
         alert(invoerobject.value);
      }
    </script>
  
Opdrachten
  1. Pas het voorbeeld zodanig aan dat er twee invoervelden worden ingelezen en aan elkaar geplakt getoond worden.
Nette uitvoer In het voorbeeld boven in deze bladzijde komt de uitvoer niet in een alert box maar wordt de uitvoer in het venster getoond. Een gebruiker wordt gek als die iedere keer weer op "OK" moet drukken om de popup te sluiten. Ieder HTML element waar binnen je weer nieuwe HTML elementen kwijt kan heeft een innerHTML eigenschap. Deze eigenschap kan je met javascript een nieuwe waarde toekennen. In het voorbeeld gebruiken we de kolom <td id="uitvoer"></td> om de uitvoer in te stoppen.
    <script type="text/javascript">
      /**
         functie voeruit reageert op het invullen van het formulier in dit 
         HTML document. De in het invoerveld getypte tekens worden in het 
         uitvoerveld weergegeven.
       */
      function voeruit()
      {
         // Pak het invoer object
         var invoerobject = document.getElementById('invoer');
         // Pak het uitvoer object
         var uitvoerobject = document.getElementById('uitvoer');
         // Schrijf een regel in het uitvoerveld.
         uitvoerobject.innerHTML=
             "<i>Je hebt de volgende <u>invoer</u> gegeven</i>:<b>" +
             invoerobject.value + ":<b>";
      }
    </script>
  
Opdrachten
  1. Bekijk de onderstaande code en voeg per regel in de functie commentaar toe toe waarin je uitlegt wat de regel doet.
      <!DOCTYPE html>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <script type="text/javascript">
          function voeruit()  
          {                   
             var invoer1 = document.getElementById('invoer1').value;
             var invoer2 = document.getElementById('invoer2').value;
             var uitvoerobject = document.getElementById('uitvoer');
             var uitkomst = invoer1*invoer2 + invoer1/invoer2 + invoer2/invoer1;
             uitvoerobject.innerHTML="De uitkomst van ... is: " + uitkomst ;
          }                   
        </script>
      </head>
      <body>
      <form onsubmit="return false;">
      <table summary="">
        <tr>
          <td valign="top">
                 Voorbeeld: Geef twee getallen
          </td>
          <td valign="top">
                 <input id="invoer1" value="" />
          </td>
          <td valign="top">
                 <input id="invoer2" value="" />
          </td>
          <td  valign="top">
             <button onclick="javascript:voeruit();">Voer uit</button>
          </td>
          <td id="uitvoer" valign="bottom">
          </td>
        </tr>
      </table>
      </form>
      </body>
      </html>
      
  2. Zorg voor een formulier met drie invoervelden waarin getallen moeten worden getypt. Zorg ook voor een uitvoerveld en laat daarin het gemiddelde van die drie getallen zien. Voorzie het document van een foto van een flowchart.
  3. Zorg voor een formulier met een invoerveld waarin een woord moeten worden getypt. Zorg ook voor een uitvoerveld en toon daarin het woord in hoofdletters en ook het aantal letters van dat woord. Klik hier voor een tip.
  4. Grafisch deel: Zorg voor een formulier met een invoerveld waarin een naam kan worden wordt ingevuld en laat die naam met behulp van processing in de tekening van grafisch deel opgave 3 schrijven.