Voorbeeld / Oefening met formulieren (en objecten met properties)

Gevraagd: Maak een Web pagina waarbij de eigenschappen van objecten te lezen zijn via formulieren en waarbij via een formulier de eigenschappen ook weer gepresenteerd worden. Gebruik het object uit de vorige oefening (oefening 6).

Werkwijze: Er is hier gekozen voor twee formulieren. De ene is een formulier met een button ("formulier2"). De tweede is een formulier met de naam "formulier3". Er zijn o.a. tekst-formulieren en formulieren die een button bevatten en waarop geklikt kan worden.

Oplossing:

<HTML>
<HEAD>
<TITLE>......</TITLE>
</HEAD>

<SCRIPT>
function car (make,model,owner) 
{
  this.make=make
  this.model=model
  this.owner=owner
  this.displayCar=displayCar
}
function person (lastName,firstName,leeftijd,date,street,town) 
{
  this.lastName = lastName
  this.firstName = firstName
  this.leeftijd = leeftijd
  this.date = date
  this.street = street
  this.town = town
  this.displayPerson = displayPerson
}
function displayCar () 
{
  document.formulier3.eigenschap1.value = "Car/1:" + this.make;
  document.formulier3.eigenschap2.value = "Car/2:" + this.model;
  document.formulier3.eigenschap3.value = "Car/3:" + this.owner;
  document.formulier3.eigenschap4.value = "Car/4: .....";   
}

function displayPerson () 
{
  document.formulier3.eigenschap1.value = "Pers/1:" + this.lastName;
  document.formulier3.eigenschap2.value = "Pers/2:" + this.firstName;
  document.formulier3.eigenschap3.value = "Pers/3:" + this.date;
  document.formulier3.eigenschap4.value = "Pers/4:" + this.town;   
}

</SCRIPT>

<BODY>
xxx
xxx 
etc. 
xxx
xxx
<SCRIPT>
rik = new person ("Min,", "Rik", 51, 1946, "schopmanl. 22","Enschede")
annet = new person ("Janssen,", "A.", 51, 1946, "xx", "xxx")
helene = new person ("Gerritsen,", "H.", 51, 1946, "xxx", "xxx")
rita = new person ("Jonassen,", "K.", 51, 1946, "xxx", "xxx")
pietje = new person ("Puk,","Pietje",51, 1900,"xxxx-landen aa","Enschede")

rikscar = new car (1990, "Nissan", rik.lastName)
pietjescar = new car (1994, "Toyota", pietje.lastName)
</SCRIPT>
xxx
xxx
xxx
xxx
<FORM NAME="formulier2">
<INPUT 
   TYPE="button" 
   VALUE="properties van rik" 
   ONCLICK="rik.displayPerson ()">
<INPUT 
   TYPE="button" 
   VALUE="properties van rik's car" 
   ONCLICK="rikscar.displayCar ()">
</FORM>
xxx
<FORM NAME="formulier3">
<INPUT TYPE="text" NAME="eigenschap1" VALUE="xxx1" SIZE="15">
<INPUT TYPE="text" NAME="eigenschap2" VALUE="xxx2" SIZE="15">
<INPUT TYPE="text" NAME="eigenschap3" VALUE="xxx3" SIZE="15">
<INPUT TYPE="text" NAME="eigenschap4" VALUE="xxx4" SIZE="15">
</FORM>
xxx
xxx
xxx
xxx
</BODY>
</HTML>

Ieder formulier heeft hier een aparte naam. Die namen moet je dan wel steeds gebruiken. Hoewel je ook een (groot) formulier kan gebruiken, hebben afzonderlijke formulieren - met ieder een aparte naam - bepaalde voordelen.

Als je in de functie-beschrijving "displayCar()" gewoon "document.write(this.make)" en "document.write(" " + this.owner + "..BR..")" etc. zou gebruiken komt de browser met een nieuwe compleet witte pagina met daarop de string "1990 Nissan Min". Dat is meestal niet gewenst. De meeste browers raken daardoor altijd wel een beetje van slag. Derhalve dien je de tekst-strings in een tekst-veld in een formulier te presenteren. DisplayCar dien je dus t.o.v. de vorige oefening daarop aan te passen.

Resultaat:

U ziet hierboven dat er twee buttons zijn die - om de beurt - ieder de properties (eigenschappen of kenmerken) van een object (in vier velden) kunnen presenteren. Noem het eventueel de 'inhoud' van een object.

Als je op een van de buttons klikt zie je de inhoud van het betreffende object gepresenteerd (gedisplayed) worden. Dit is dus de methode om de inhoud uit een object te 'lezen' en in een bestaande web-pagina iets te presenteren. Let in dit voorbeeld op (de vreemde) komma's en (iets te weinig) spaties in de diverse strings. De lay-out van een programma is (immers) altijd pas in een later stadium van belang.

Enschede, 5 nov. 1999