Een aantal voorbeelden / oefeningen met formulieren, functies, velden, getallen, berekeningen en strings

Dit is een web-page met een aantal eenvoudige voorbeelden van scripts en buttons.

a. Oefening met standaard functie ('alert') en ascii-output

Gevraagd: Schrijf enkele statements bij onClick in een script in een formulier. Doe het voorlopig alleen nog met tekst-strings, d.w.z. letters, cijfers, en andere (ascii-)tekens. (Het werken met 'echte' getallen komt hierna.)

Een oplossing is:

<INPUT TYPE="button" VALUE="xxx" 
ONCLICK="alert('Hallo regel 1 met ....*&^$!@$%..');
         alert('Hallo tweede regel met abcdefghijklm ...')">

U ziet dat een script schrijven in een formulier in principe heel handig is. Maar het wordt al snel onoverzichtelijk. Daarom schrijven we liever scripts boven in de source. Allemaal bij elkaar. Dan zijn ze ook her te gebruiken.

Let op het gebruik van "-tekens. Als er al "-tekens worden gebruikt (of nodig zijn), dan verdient het aanbeveling daarbinnen '-tekens te gebruiken.

Er verschijnt dan een button die de ascii string kan presenteren:

Als je hier op klikt zie je de ascii-string zoals je die tussen de quootjes hebt 'geprogrammeerd' in een alert-box.

b. Oefening met standaard functie ('alert') en getallen-output

Gevraagd: Schrijf een script (op deze plek bij onClick) waarmee gerekend kan worden.

Een oplossing is:

<INPUT TYPE="button" VALUE="berekening" 
ONCLICK="alert(10+30)">

Je ziet dat er geen '-tekens nodig zijn.

Er verschijnt dan een button die een berekening maakt en de output presenteert:

Als je hier op klikt zie je een alertbox met het berekende getal op het beeldscherm verschijnen.

c. Oefening met zelfgemaakte functie (1)

Gevraagd: Schrijf nu dezelfde scripten, niet bij onClick in het betreffende formulier, maar bovenin de source. Dat gaat met een functie. Ook wel procedure genoemd. Het voordeel daarvan is dat we iets maar eenmaal hoeven te schrijven en steeds ergens elders weer kunnen gebruiken.

Let op dat elk formulier nog naamloos is. Je kunt t.a.t. het betreffende formulier een naam gaan geven, als je dat wilt, bijvoorbeel 'form4', 'form5' of 'form12'. Dan kun je later makkelijker parameters van het ene formulier elders op een ander formulier gebruiken.

Een oplossing is:

<SCRIPT>
function hallo()
{alert ("Op deze web-page zult u een ...")}
<SCRIPT>

<FORM>
<INPUT TYPE="button" VALUE="echt script & functie" ONCLICK="hallo()">
</FORM>

Let op dat de WEB-structuur (met <HTML> <BODY> etc.) steeds goed in elkaar moet blijven steken (gevolgt door </HTML> </BODY> etc.).

Omdat er bij functies in principe altijd parameters worden meegegeven, zul je er al vast aan moeten wennen (en functies zijn daar ook aan te herkennen) dat er achter de fuctienaam haakjes horen te staan. Hier is dat niet zo. Hier is het dus gewoon hallo(). Dat er geen parameters worden doorgegeven komt regelmatig tot vaak voor. Dat je dat weet.

Je mag er vanuitgaan dat we met de taal JavaScript te maken hebben. Daarom is het ook goed om dat bovenin aan te geven <SCRIPT LANGUAGE="JavaScript">. Doe dat ook.

Als je hier op klikt zie je de in de functie geprogrammeerde ascii-tring verschijnen in een alert-box.

d. Oefening met zelfgemaakte functie (2)

Gevraagd: Schrijf een script dat een berekening kan doen.

Een oplossing is:

<SCRIPT>
function y(x)
{
   var y,a=6,b=6;
   y=a*x+b;
   alert (y)
   return y
}
<SCRIPT>

<FORM NAME="form6">
<INPUT TYPE="button" VALUE="xxx" ONCLICK="y(5)">
</FORM>

De naam van de form, namelijk 'form6' is in dit voorbeeld eigenlijk overbodig. In de vervolg voorbeelden niet. Daar spelen de namen van forms een bepaalde rol. Let daar op.

Resultaat: Er verschijnt dan een button die de uitkomst van een berekening presenteerd:

Als je hier op klikt zie je de uitkomst van de geprogrameerde berekening.

e. Oefening met zelfgemaakte functie en veld-output

Gevraagd: Schrijf nu een script dat output in verschillende 'echte' velden schrijft van een en hetzelfde formulier.

Een mogelijke oplossing is:

function  toekenning(form)
{ 
document.form7.out1.value = 678.4;
document.form7.out2.value = 9;
document.form7.out3.value = "multimedia programmeren";
}

<FORM NAME="form7">
<INPUT TYPE="button" VALUE="display getal" ONCLICK="toekenning(this.form)">
<INPUT TYPE="text" NAME="out1" VALUE="aaa" SIZE="12">
<INPUT TYPE="text" NAME="out2" VALUE="bbb" SIZE="12">
<INPUT TYPE="text" NAME="out3" VALUE="ccc" SIZE="12">
</FORM>

Resultaat: output in een veld (hier: 678.0, 9 en multimedia):

Als je hier op klikt zie je ofwel een real (een gebroken getal) ofwel een integer (een geheel getal) ofwel een string (een ascii- of tekst-string genoemd). Je ziet dat dat voor het veld in het formulier niets uitmaakt wat iets is. Het wordt of komt in een zogenaamd type="text"-veld. De default-waarden (dwz. de startwaarde of waarde die dingen c.q. variabelen hebben als er nog niks is gebeurd of gedaan) zijn aaa, bbb resp. ccc. Die zie je in de velden staan als je nog niet geklikt hebt. Het object 'document' heeft een object 'form7' en daar bevinden zich de velden 'out1', 'out2' en 'out3' in. De veld kan alleen maar de waarde overnemen als het achtervoegsel '.value' wordt toegevoegd, dus zoals in het statement document.form7.out2.value = 678.4 binnen de functie is gedaan. Verder zie je dat SIZE het aantal letters presenteert en niet meer. Dus als de string groter is dan de opgegeven waarde moet je daar zelf (dan) een mouw aan passen.

f. Oefening met zelfgemaakte functie, veld-input, veld-output en een eenvoudige berekening

Gevraagd: Schrijf nu een script dat de input uit een 'echt' veld haalt en de output in een (ander) veld schrijft; allemaal in hetzelfde formulier.

Een oplossing is:

function  functie8(form)
{ var intern
document.form8.x.value = document.form8.p1.value;
document.form8.y.value = 2.0 * document.form8.p1.value * 5.0;
intern = document.form8.p1.value;
document.form8.z.value = "uitkomst: " + intern * 100;
}

<FORM NAME="form8">
Typ hier je input-getal (p1):
<INPUT TYPE="text" NAME="p1" VALUE="a" SIZE="10">
Resultaat: drie berekeningen met p1:
<INPUT TYPE="button" VALUE="reken" ONCLICK="functie8(this.form)">
<INPUT TYPE="text" NAME="x" VALUE="a" SIZE="10">
<INPUT TYPE="text" NAME="y" VALUE="aa" SIZE="10">
<INPUT TYPE="text" NAME="z" VALUE="aaa" SIZE="20">
</FORM>

Typ hier je input-getal (p1):

Als je hier op klikt zie je drie getallen in drie velden verschijnen.

g. Oefening met zelfgemaakte functie, veld-input, veld-output en een complexe berekening

Gevraagd: Schrijf nu een script dat de input uit een 'echt' veld haalt, een recusie functie hanteert, en de uitkomst in een ander veld schrijft. (Neem hiervoor - bijvoorbeeld - een faculteit-berekening of iets anders)

Een oplossing is:

function  fac(n)
{ var y
if ((n==0) || (n==1)) return 1
else { y=( n*fac(n-1) ); return y }
}

function  facAltn(n)
{ var y,j; 
  y=n;
  for (j=n-1; j>1; j--) y=y*j;
  return y
}

function  faculteit(form)
{ var z
i=document.form8.p1.value;
document.form11.p.value = fac(i);
}

function  facultAltn(form)
{ var z
i = document.form8.p1.value;
document.form11.q.value = facAltn(i);
}

function  functie11(form)
{
document.form11.r.value = fac(document.form8.p1.value);
}

<FORM NAME="form11">
<INPUT TYPE="button" VALUE="faculteit" ONCLICK="faculteit(this.form)">
<INPUT TYPE="TEXT" NAME="p" VALUE="pppp" SIZE="30">
<INPUT TYPE="button" VALUE="facult Altn" ONCLICK="facultAltn(this.form)">
<INPUT TYPE="TEXT" NAME="q" VALUE="qqqq" SIZE="30">
<INPUT TYPE="button" VALUE="faculteit Altn 2" ONCLICK="functie11(this.form)">
<INPUT TYPE="TEXT" NAME="r" VALUE="rrrr" SIZE="30">

Als je hier op klikt zie je hoe geneste functies werken. Functies die elkaar nodig hebben en/of elkaar aanroepen.

Enschede, 5 nov. 1999