Algoritmen met Java

Algoritmen met Java (java.zip)

auteurs: Nicole Legroe en Johan Blondeel

In de oplossing van een computerprobleem onderscheidt men de probleemdefinitie, de probleemanalyse, het programmeren, de testgegevens en de documentatie.

Een algoritme is een stap-voor-stap-oplossing van een probleem. Dit algoritme wordt door middel van een programmeertaal vertaald in een programma.
Als programmeertalen kunnen C++, Visual Basic, Delphi,.. gebruikt worden. Een mogelijk alternatief is JAVA, een C-achtige taal of een vereenvoudigde versie JAVASCRIPTS.

Javascripts hebben een webbrowser als interpreter nodig om de programmainstructies uit te voeren. Bovendien is de Javascripttaal een objectgeörienteerde taal met objecten, methoden en property's

1. De Javascript-taal, enkele afspraken

Een Javascript wordt tussen een <script language="Javascript"> en </script> tag in een HTMLdocument geplaatst.
De Javascripttaal maakt een onderscheid tussen hoofd- en kleine letters
Een commentaarlijn laat men voorafgaan door // of voor verschillende regels start men met /* en eindigt men met */

Het volgend voorbeeld toont de algemene vorm van een javascript binnen een htmldocument.

<script language="javascript">
//hier begint het eigenlijke script

hier komt de code

</script>

</body>
</html>

2. De basiselementen van de Javascripttaal

2.1 Variabelen

We onderscheiden Integers, Floating-Point Numbers, Strings en Booleans. Ze moeten niet vooraf gedeclareerd worden maar krijgen hun type bij het toekennen van een waarde.

voorbeeld: (Klik hier voor het resultaat)

<script language="javascript">
//4 variabelen krijgen een waarde

getal=5
waarde=3.5
zin="dit is een javascript"
keuze=true

// Indien we ook iets willen zien

document.write(getal,"<br>")
document.write(waarde,"<br>")
document.write(zin,"<br>")
document.write(keuze,"<br>")

</script>

</body>
</html>

Met de document.write(parameters)-instructie kan men een waarde afdrukken. De code <br> is het htmlcode voor line break en is nodig om een nieuwe regel te starten. Een nieuwe paragraaf bekomt men met de code <p>

2.1 Operatoren

Naast de normale bewerkingen +,-,* ,/ en % (modulo) kent Java een aantal speciale toekenningsoperatoren:

x+=y gelijk aan x=x+y
x-=y gelijk aan x=x-y
x*=y gelijk aan x=x*y
x/=y gelijk aan x=x/y

Ook increment ++ en decrement -- is mogelijk

als x=10 dan resulteert y=x++ in y=10 en x=11
als x=10 dan resulteert y=++x in y=11 en x=11

&& stelt de logische operator AND voor en || de logische OR.
Daarnaast bestaan de vergelijkingssymbolen als <,<=,>,>=,!= en = =

Zoals bij de meeste programmeertalen kan men ook hier stringvariabelen optellen.
b.v. "het is" + "maandag" resulteert in "het is maandag" terwijl "het is"+maandag de tekst 'het is' en de inhoud van de variabele maandag samenvoegt.

Een paar voorbeelden:

Het volgend voorbeeld berekent de oppervlakte van een rechthoek: (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

lengte=10
breedte=2.5
document.write("de oppervlakte is ", lengte*breedte)

</script>
</body>
</html>
De Body Mask Index van een persoon berekent men door zijn gewicht in kg te delen door het kwadraat van de lengte ( in m). Een normale waarde moet kleiner zijn dan 30! (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

gewicht=69 // in kg
lengte=1.74 // in m
document.write("mijn BMI is ", gewicht /(lengte*lengte))

</script>
</body>
</html>

2.2 De selectie

We onderscheiden :

De éénzijdige selectie
if (vw){opdrachten}
De tweezijdige selectie
if (vw){opdrachten indien ja} else {opdrachten indien neen}

Een paar voorbeelden

Het vorig voorbeeld over de BMI met een beoordeling (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

gewicht=69 // in kg
lengte=1.74 // in m
bmi=gewicht/(lengte*lengte)
if (bmi>=30)
{document.write("een BMI van " + bmi + " is te veel")}
else
{document.write("een BMI van " + bmi + " is uitstekend")}

</script>
</body>
</html>

Een behaald procent wordt beoordeeld als geslaagd of niet geslaagd.
- Een oplossing met een tweezijdige selectie. (Klik hier voor het resultaat)
  
  <html>
  <head>
  </head>
  <body>
  <script language="javascript">
  
  procent=80
  if (procent>=50)
  {document.write("geslaagd")}
  else
  {document.write("niet geslaagd")}
  
  </script>
  </body>
  </html>
- Door gebruik te maken van een extra variabele beoordeling kan het ook met een éénzijdige selectie. (Klik hier voor het resultaat)
  
  <html>
  <head>
  </head>
  <body>
  <script language="javascript">
  
  procent=80
  beoordeling="geslaagd"
  if (procent<50) {beoordeling="niet geslaagd"}
  document.write(beoordeling)
  
  </script>
  </body>
  </html>

2.3 De iteratie

We onderscheiden

for (startexpressie;conditie; update){opdrachten}
while (voorwaarde) {opdrachten}

Eeen paar voorbeelden

De getallen van 1 to 10 op het scherm. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

for (teller=1;teller<=10;teller++)
{document.write(teller,"<br>")}

</script>
</body>
</html>

of anders

<html>
<head>
</head>
<body>
<script language="javascript">

teller=1
while (teller<=10)
{document.write(teller,"<br>")
teller=teller+1}

</script>
</body>
</html>
De even getallen tussen 1 en 100. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

for (getal=2;getal<=100;getal=getal+2)
{document.write(getal,"<br>")}

</script>
</body>
</html>

of

<html>
<head>
</head>
<body>
<script language="javascript">

teller=1
while (teller<=100)
{
if (teller%2==0){document.write(teller,"<br>")}
teller=teller+1
}

</script>
</body>
</html>

3. Gevorderde Javascriptopdrachten

3.1 Het gebruik van functies

Programmaopdrachten die een bepaalde bewerking uitvoeren brengt men samen in een functie met als algemene vorm:

function naam (parameters)
{.....
opdrachten
.....
return waarde}

waarbij parameters en waarde optioneel zijn.

De functie kan in het bodygedeelte van een htmldocument met naam(parameters) opgeroepen worden.
De functies kan mijn schrijven in het head- of bodygedeelte maar in ieder geval voor de oproep.

Het volgend voorbeeld berekent de oppervlakte van verschillende kamers in een huis. (Klik hier voor het resultaat)

<html>
<head>
<script language="javascript">

function oppervlakte(lengte,breedte)
{return lengte*breedte}

</script>
</head>
<body>
<script language="javascript">

document.write("kamer 1:",oppervlakte(3,5),"<br>")
document.write("kamer 2:",oppervlakte(4.5,9),"<br>")

</script>
</body>
</html>

Een functie voor het berekenen van de machtsverheffing met willekeurig grondtal en exponent. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

function machtsverheffing(grondtal,exponent)
{
if (exponent!= 0)
{macht=grondtal
for (teller=1; teller<exponent;teller++) {macht=macht*grondtal}
return macht}
else
{return 1}
}

document.write(" 3 tot de 4de macht is ",machtsverheffing(3,4))

</script>
</body>
</html>

3.2 In- en uitvoeropdrachten

Door gebruik te maken van formulieren in een htmldocument kan men de in- en uitvoer variabel maken.
Volgende componenten kunnen gebruikt worden:

Een tekstvak

<input type="text" name="variabele" size="aantal karakters breed" value="default waarde">
Een opdrachtenknop
<input type="button" value="tekst op de knop" onClick="uit te voeren functie"

Deze componenten bevinden zich in het htmldocument steeds tussen de <form> en </form>-tag. Een naam aan een formulier kan men geven door <form name="..."> als begintag te gebruiken.
De waarde van een tekstvak bekomt men met document.formuliernaam.tekstvaknaam.value
Het actieve document kan men aanspreken met this.form

Een paar voorbeelden

Na invoer van lengte en breedte wordt de oppervlakte van een kamer afgedrukt. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

//de functie
function oppervlakte(a,b)
{
document.berekening.resultaat.value=a*b
}
</script>

<form name="berekening">
Voer de lengte in: <input type="text" name="lengte"><br>
Voer de breedte in: <input type="text" name="breedte"><br>
<input type="button" value="BEREKEN" onClick="oppervlakte(document.berekening.lengte.value,document.berekening.breedte.value)"><br>
De oppervlakte is: <input type="text" name="resultaat">
</form>
</body>
</html>
Naast de oppervlakte wordt ook de omtrek afgedrukt. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

function bereken(a,b)
{
document.berekening.oppervlakte.value=a*b
document.berekening.omtrek.value=(a+b)*2
}
</script>
<form name="berekening">
Voer de lengte in: <input type="text" name="lengte"><br>
Voer de breedte in: <input type="text" name="breedte"><br>
<input type="button" value="BEREKEN" onClick="bereken(eval(document.berekening.lengte.value),eval(document.berekening.breedte.value))"><br>
De oppervlakte is: <input type="text" name="oppervlakte"><br>
De omtrek is: <input type="text" name="omtrek">
</form>
</body>
</html>
En nu nog een knop om het formulier leeg te maken. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

function bereken(a,b)
{
document.berekening.oppervlakte.value=a*b
document.berekening.omtrek.value=(a+b)*2
}
</script>
<form name="berekening">
Voer de lengte in: <input type="text" name="lengte"><br>
Voer de breedte in: <input type="text" name="breedte"><br>
<input type="button" value="BEREKEN" onClick="bereken(eval(document.berekening.lengte.value),eval(document.berekening.breedte.value))"><br>
De oppervlakte is: <input type="text" name="oppervlakte"><br>
De omtrek is: <input type="text" name="omtrek"><br>
<input type="reset" value="leegmaken"><br>
</form>
</body>
</html>
Zelfde opgave als de eerste oefening maar nu met this.form, wat staat voor het actieve formulier
<html>
<head>
</head>
<body>
<script language="javascript">

//de functie
function oppervlakte(f)
{
f.resultaat.value=f.lengte.value*f.breedte.value
}
</script>

<form name="berekening">
Voer de lengte in: <input type="text" name="lengte"><br>
Voer de breedte in: <input type="text" name="breedte"><br>
<input type="button" value="BEREKEN" onClick="oppervlakte(this.form)"><br>
De oppervlakte is: <input type="text" name="resultaat">
</form>
</body>
</html>

3.3 De meervoudige selectie

Algemene vorm

switch (variabele)
{
case waarde1: opdracht1;opdracht2;....;break
case waarde2: opdracht1;opdracht2;....;break
....
}

Een paar voorbeelden

Afhankelijk van de gekozen bewerking wordt het resultaat afgedrukt (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
function bereken(code)
{
g1=eval(document.formulier1.getal1.value)
g2=eval(document.formulier1.getal2.value)

switch (code)
{
case 1: result=g1+g2;break
case 2: result=g1-g2;break
case 3: result=g1*g2;break
case 4: result=g1/g2;break
}

document.formulier1.resultaat.value=result
}
</script>

<form name="formulier1">
Voer het eerste getal in: <input type="text" name="getal1"><br>
Voer het tweede getal in: <input type="text" name="getal2"><br>
Kies de bewerking:
<input type="button" value="+" onClick="bereken(1)">
<input type="button" value="-" onClick="bereken(2)">
<input type="button" value="*" onClick="bereken(3)">
<input type="button" value="/" onClick="bereken(4)">
<br>Het resultaat is: <input type="text" name="resultaat">
</form>

</body>
</html>

Voor een browser die het switchcommando niet kent kan men de meervoudige selectie als volgt vermijden. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
function bereken(code)
{
g1=document.formulier1.getal1.value
g2=document.formulier1.getal2.value

document.formulier1.resultaat.value=eval(g1+code+g2)
}
</script>

<form name="formulier1">
Voer het eerste getal in: <input type="text" name="getal1"><br>
Voer het tweede getal in: <input type="text" name="getal2"><br>
Kies de bewerking:
<input type="button" value="+" onClick="bereken('+')">
<input type="button" value="-" onClick="bereken('-')">
<input type="button" value="*" onClick="bereken('*')">
<input type="button" value="/" onClick="bereken('/')">
<br>Het resultaat is: <input type="text" name="resultaat">
</form>

</body>
</html>

3.4 Break in een iteratie

De break-opdracht sluit vroegtijdig een iteratie af.
Het volgende voorbeeld gaat na of een getal al of niet een priemgetal is. (Klik hier voor het resultaat)

<html>

<head>
<title></title>
</head>

<body>
<script language="javascript">
function controleer(f)
{
g=eval(f.getal.value)
teller=0
for (x=1;x<=g;x++)
{
if (g % x==0) {teller++}
if (teller>2) {break}
}
if (teller>2) {f.resultaat.value= g + " is geen priemgetal"}
else {f.resultaat.value= g + " is een priemgetal"}
}
</script>

<form name="formulier1">
Voer het getal in: <input type="text" name="getal" size="20"><br>
<input type="button" value="priemgetal?" onClick="controleer(this.form)"><br>
<input type="text" name="resultaat" size="50">
</form>
</body>
</html>

4. Werken met gevorderde formulieren

Naast het tekstvak en de opdrachtenknop kan men nog volgende componenten in een formulier gebruiken.

Een tekstvak met meerdere regels
<textarea rows="aantal rijen" cols="aantal karakters breed" name="variabale">default waarde</textarea>
Een keuzerondje
<input type="radio" name="variabele" value="waarde" selected>
Een selectievak
<input type="checkbox" name="variabele" value="waarde" selected>
Een keuzelijst

<select name="variabele">
<option value="waarde1">keuze1</option>
....
</select>

Een paar voorbeelden

Na invoer van een tekst in een tekstvak wordt het aantal karakters afgedrukt.We maken daarbij gebruik van de length-eigenschap. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
function controleer(f)
{
f.aantal.value=f.tekst.value.length
}
</script>

<form>
Voer de tekst in: <textarea name="tekst" cols="40" rows="3"></textarea>
<input type="button" value="Uit hoeveel karakters bestaat de tekst?" onClick="controleer(this.form)">
<input type="text" name="aantal">
</form>

</body>
</html>
Met een keuzerondje kiest men het BTW-percentage. Bemerk de manier waarop het percentahe naar de functie wordt doorgegeven. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
function bereken(t)
{
basisbedrag=eval(document.formulier1.bedrag_zonder_btw.value)
btwtarief=eval(t)
document.formulier1.bedrag_met_btw.value=basisbedrag+basisbedrag*btwtarief/100
}
</script>

<form name="formulier1">
bedrag zonder BTW: <input type="text" name="bedrag_zonder_btw"><br>
6% <input type="radio" name="tarief" onClick="bereken(6)" ><br>
21% <input type="radio" name="tarief" onClick="bereken(21)" ><br>
25% <input type="radio" name="tarief" onClick="bereken(25)" ><br>
bedrag met BTW is: <input type="text" name="bedrag_met_btw">
</form>

</body>
</html>
Volgende meerkeuzevraag kan je beantwoorden met een keuzelijst. (Klik hier voor het resultaat)

<html>

<head>
<title></title>
</head>

<body>
<script language="javascript">
function controleer(f)
{

if (f.antwoord.selectedIndex=="1")
{f.beoordeling.value="3 x 5 is inderdaad 15, Proficiat"}
else
{f.beoordeling.value="neen, 3 x 5 = 15"}
}
</script>

<form>
Hoeveel is 3 x 5? <select name="antwoord" size="3">
<option selected>10</option>
<option>15</option>
<option>20</option>
</select> <br>
<input type="button" value="controleer"
onClick="controleer(this.form)"><br>
<input type="text" name="beoordeling" size="50">
</form>
</body>
</html>

Met de eigenschap selectedIndex van een keuzelijst kan men controleren welke optie gekozen werd. De eerste optie heet index 0.

5. Gebeurtenissen of events

Vaak moet het javascript pas uitgevoerd worden wanneer een gebeurtenis of event plaats heeft. Men spreekt dan van een event handler: een overzicht

event handler als..

onClick aanklikken van de muis

onChange wijzigen van een waarde

onFocus als het invoerobject inputfocus krijgt

onBlur bij het verlaten van een invoerobject

onLoad bij het laden van een pagina in de browser

onMouseOver wanneer men met de muis over een link beweegt

onSelect wanneer een invoerobject gekozen wordt

onSubmit wanneer men een formulier doorstuurt

onUnload wanneer de huidige pagina verlaten wordt

Het vorig voorbeeld met de meerkeuzeantwoordenkan men ook met het onChange-event oplossen. Bemerk de manier waarop de antwoorden geëvalueerd worden,zonder selectedIndex! (Klik hier voor het resultaat)

<html>
<head>

</head>

<body>
<script language="javascript">
function controleer(f)
{
if (f.antwoord.value=="1"){f.evaluatie.value="Fout probeer nog eens"}
if (f.antwoord.value=="2"){f.evaluatie.value="Zeer goed"}
if (f.antwoord.value=="3"){f.evaluatie.value="Verkeerd"}
}
</script>

<form name="formulier">
Hoeveel is 3x 5?
<select name="antwoord" onChange="controleer(this.form)">
<option value="1">10</option>
<option value="2">15</option>
<option value="3">20</option>
</select><br>
evaluatie: <textarea rows="3" cols="50" name="evaluatie">Je moet nog eerst een keuze maken</textarea>
</form>

</body>
</html>

Het volgend voorbeeld werkt enkel met internet explorer (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
function verander(waarde)
{
if (waarde==0)
{document.formulier1.knop1.value="1"
document.formulier1.knop2.value="0"}
if (waarde==1)
{document.formulier1.knop1.value="0"
document.formulier1.knop2.value="1"}
}
</script>

<form name="formulier1">

<input type="button" name="knop1" value="0" onMouseOver="verander(0)"><br>
<input type="button" name="knop2" value="1" onMouseOver="verander(1)">

</form>

</body>
</html>

Het volgend javascript stuurt je naar de homepage van Microsoft. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body onLoad="nieuw()">
<script language="javascript">
function nieuw()
{
location.href="http://www.microsoft.com"
}
</script>
</body>
</html>

6. Werken met arrays

Een array met naam rij en bestaande uit 10 elementen wordt in java als volgt gedeclareerd:
rij= new Array(10)
De verschillende elementen van de array worden aangesproken met rij[1], rij[2], ...

Het volgend voorbeeld maakt een array van de dagen van de week en drukt ze met een iteratie af. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
dagen= new Array(7)
dagen[1]="maandag"
dagen[2]="dinsdag"
dagen[3]="woensdag"
dagen[4]="donderdag"
dagen[5]="vrijdag"
dagen[6]="zaterdag"
dagen[7]="zondag"
for (index=1;index<=7;index++)
{document.write(dagen[index],"<br>")}
</script>

</body>
</html>

Op het scherm verschijnt een tip van de dag, afhankelijk van de dag van de week. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

tips=new Array(7)
tips[1]="Haast en spoed is zelden goed"
tips[2]="Beter laat dan nooit"
tips[3]="Wie laatst lacht, best lacht"
tips[4]="De morgenstond heeft goud in de mond"
tips[5]="Zoals het klokje thuis tikt, tikt het nergens"
tips[6]="Oost west, thuis best"
tips[7]="Eigen haard is goud waard"
weekdag= new Date()
dag=weekdag.getDay()
document.write(tips[dag])
</script>
</body>
</html>

7. Enkele nuttige methoden en eigenschappen

Net als veel ander programmeertalen werkt java met objecten. Deze objecten worden bestuurd met methoden met als schrijfwijze:

object.methode()

Elk object heeft een aantal eigenschappen die las volgt kunnen aangesporoken worden.

object.eigenschap

7.1 Het Date-object

Maakt het mogelijk de huidige datum en tijd te bekomen.
Een nieuw data-object creëert men met datum= new Date()
Op dit object kan men volgende methoden toepassen

getDate() voor de dag van de maand
getDay() voor de dag van de week
getMonth() voor de maand van het jaar
getYear() voor het jaar
getHours() voor het uur van de dag
getMinutes() voor het aantal minuten in de huidige tijd
getSeconds() voor het aantal seconden in de huidige tijd

Naast de getmethode bestaat ook de setmethode om een datum-tijdwaarde in te stellen. Zo zal datum.setYear(1999) het jaar van het datumobject op 1999 plaatsen.

Het volgende voorbeeld drukt de huidige datum in een formaat d/m/j en plaatst daarna het datumobject op 1 januari 2000. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

datum= new Date()
document.write (datum)
document.write("<br>")
document.write (datum.getDate(),"/",datum.getMonth(),"/",datum.getYear())

document.write("<br>")

datum.setYear(2000)
datum.setMonth(0)
datum.setDate(1)

document.write(datum)
</script>
</body>
</html>

Het volgend voorbeeld berekent het aantal uren tot 1 januari 2000.
De methode getTime() resulteert in het aantal milliseconden vanaf 1 januari 1970 tot nu. (Klik hier voor het resultaat)

<html>
<head>

</head>

<body>
<script language="javascript">

start= new Date()

einde= new Date()
einde.setDate(1)
einde.setMonth(0)
einde.setYear(2000)

start_seconden=start.getTime()/1000
einde_seconden=einde.getTime()/1000
verschil_seconden=einde_seconden-start_seconden
verschil_uren=verschil_seconden/3600
document.write("Nog ",verschil_uren, " uren tot 1 januari 2000")
</script>

</body>
</html>

7.2 Het Math-object

Maakt wiskundige berekeningen mogelijk

Math.PI de waarde 3,141592...
Math.pow(x,y) berekent x tot de macht y
Math.sqrt(x) berekent de wortel uit x
Math.sin(x) berekent de sinus van x
Math.round(x) rond de waarde van x af
Math.floor(x) verwijdert de cijfers na de komma
Math.random() genereert een willekeurig getal tussen 0 en 1

Met het volgend programma kan je een willekeurig getal tussen 1 en 10 raden. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body onLoad="genereer()">
<script language="javascript">

function genereer()
{
getal=Math.floor(Math.random()*10)+1
teller=1
}
function controleer(f)
{
if (eval(f.cijfer.value)==getal){window.alert("geraden in " + teller+ " beurten")}
else
{teller=teller+1}
}
</script>

<form>
Kies een getal tussen 1 en 10 <input type="text" name="cijfer"><br>
<input type="button" value="controleer" onClick="controleer(this.form)">
</form>
</body>
</html>

7.3 Het String-object

Het Stringobject wordt niet expliciet vermeld. Van zodra een variabele een tekstwaarde krijgt wordt het automatisch een stringobject.
Volgende methoden en eigenschappen zijn mogelijk.

blink() om een string te laten knipperen
bold() om een string in vetjes te plaatsen
italics() om een string in een schuin lettertype te plaatsen
toLowerCase() om een string in kleine letters te plaatsen
toUpperCase() om een string in hoofdletters te plaatsen
length toont het aantal karakers in de string
substring(x,y) neemt een deel uit de string vanaf positie x tot positie y

Het volgend voorbeeld controleert de correctheid van een ingevoerd rekeningnummer. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

function controleer(f)
{
nr=f.nummer.value
deel1=nr.substring(0,3)
deel2=nr.substring(4,11)
controle_getal=eval(nr.substring(12,14))
getal=eval(deel1+deel2)

if (getal%97==controle_getal){window.alert("het rekeningnummer is juist")}
else
{window.alert("het rekeningnummer is fout")}
}
</script>

<form>
Voer een rekeningnummer in (bijvoorbeeld 477-1234567-34) <input type="text" name="nummer"><br>
<input type="button" value="controleer" onClick="controleer(this.form)">
</form>
</body>
</html>

Om een rollende tekst in een formulier te maken kan men gebruik maken van de setTimeout()-methode.
waarde=setTimeout(functie,100) zal om de 100 milliseconden de functie uitvoeren. (Klik hier voor het resultaat).

<html>
<head>

</head>

<body onLoad="controleer()">
<script language="javascript">
tekst="Wij wensen u een prettige Paasvakantie "

function controleer()
{
document.formulier.banner.value=tekst
tekst=tekst.substring(1,tekst.length)+tekst.substring(0,1)
waarde=setTimeout("controleer()",180)
}
</script>

<form name="formulier">
<input type="text" name="banner" size="38"><br>
</body>
</html>

en nog dit

De omzetting van een numerieke naar een stringvariabele kan met de toString()-methode dus tekstvariabele=getalvariabele.toString() terwijl het omgekeerde met de evalfunctie kan uitgevoerd worden, dus getalvariable=eval(tekstvariabele)

8. Gevorderde objecten

Java kent nog andere objecten die volgens een bepaalde hiërarchie gerangschikt worden.

8.1 Window

Het object van het hoogste niveau.

Eigenschappen:

window.name: de naam van het venster
window.document: het huidig document in het venster
window.location: de URL van het huidig document
window.frames: een array met alle frames van het venster

Methoden

window.open(URL,naam): opent een venster en plaatst het document met de URL erin. Eventueel kan men een naam aan het venster geven.
window.close(): sluit het venster
window.alert(string): toont de string in een boodschappenvenster
window.confirm(string): toont de string in een bevestigingsvenster

Het volgend voorbeeld vraagt al of niet een nieuw venster te openen. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

waarde=window.confirm("Een nieuw venster openen?")
if (waarde)
{window.open()}

</script>

</body>
</html>

8.2 Document

Een subobject van window dat het huidig geladen document definieert.

Eigenschappen

document.bgColor: achtergrondkleur van het document
document.title: de titel van het document
document.forms: een array met de namen van al de formulieren in het document waarbij document.forms[0] het eerste formulier aanduidt, document.forms[2] het tweede formulier,...
document.URL: de URL van het geladen document

Methoden

document.clear(): wist het huidig document uit het venster
document.write(string) : drukt de tekst in het huidig document

Het volgend voorbeeld drukt de URL van het huidig geladen document. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

document.write(document.URL)

</script>

</body>
</html>

Om een methode of eigenschap van een documentobject aan te spreken moet men normaal de volledige hiërachische weg uitschrijven dus bijvoorbeeld window.document.URL maar aangezien window altijd het hoogste object is mag men het weglaten.

8.3 Location

Een subobject van window dat eigenschappen en methoden over de huidige URL bevat.

Eigenschappen

window.location.href: de huidige URL
window.location.hostname: de hostname in de URL
window.location.protocol: het gebruikte protocol als http, file, ftp,...

Methoden

window.location.reload(): herlaadt de huidige URL
window.location.replace("URL"): vervangt de huidige URL naar de nieuwe

Het volgend voorbeeld toont de eigenschappen van het locationobject. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

document.write("de huidige URL is ",window.location.href,"<br>")
document.write("de hostname is ",window.location.hostname,"<br>")
document.write("het protocol is: ",window.location.protocol,"<br>")

</script>

</body>
</html>

8.4 History

Een subobject van window dat de historylijst van de browser bevat.

Eigenschappen

window.history.length: het aantal pagina's in de historylijst

Methoden

window.history.back(): gaat naar de vorige pagina in de historylijst
window.history.forward(): gaat naar de volgende pagina in de historylijst
window.history.go(x): gaat naar de xde pagina in de historylijst

Het volgend voorbeeld gebruikt gewone opdrachtknoppen als navigatiebuttons. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">

function volgende()
{window.history.forward()}

function vorige()
{window.history.back()}

function begin()
{window.history.go(1)}

function einde()
{laatste=window.history.length
window.history.go(laatste)}

</script>

<form>
<input type="button" value="volgende" onClick="volgende()">
<input type="button" value="vorige" onClick="vorige()">
<input type="button" value="begin" onClick="begin()">
<input type="button" value="einde" onClick="einde()">

</body>
</html>

9.Zelf objecten maken

Naast de ingebouwde objecten kan men ook zelf objecten creëren.

het creëren gebeurt met een functie
een instance (geval) maakt men met new

bijvoorbeeld: we maken van de gegevens op een adresetiket een object met naam adres

function adres(a,b,c,d)
{this.naam=a;
this.adres=b;
this.postnummer=c;
this.gemeente=d;}

Een instance van het object adres wordt als volgt gedefinieerd:

label1=new adres("De man van Melle","Koekoekstraat 70","9380","Melle")

We noemen label1 een instance van het object adres met 4 properties. Het postnummer kan men met label1.postnummer aanspreken.

<html>

<head>

</head>

<body>
<script language="javascript">
function adres(a,b,c,d)
{this.naam=a;
this.adres=b;
this.postnummer=c;
this.gemeente=d;
}

label=new adres("De man van Melle","Koekoekstraat 70","9380","Melle")
document.write(label.postnummer)
</script>
</body>

</html>

oplossing

Ook methodes kan men voor een zelfgemaakt object maken bijvoorbeeld

function schrijf()
{regel=this.naam+" "+this.adres+" "+this.postnummer+" "+this.gemeente;
document.write(regel);}

De functie adres kan men aanvullen met :

this.afdruk=schrijf

Het oproepen van de methode kan met:

adres.afdruk() waardoor het volledig adres op één regel wordt afgedrukt

samengevat:

<html>

<head>

</head>

<body>
<script language="javascript">
function adres(a,b,c,d)
{this.naam=a;
this.adres=b;
this.postnummer=c;
this.gemeente=d;
this.afdruk=schrijf;
}
function schrijf()
{regel=this.naam+" "+this.adres+" "+this.postnummer+" "+this.gemeente;
document.write(regel)
}

adres1=new adres("De man van Melle","Koekoekstraat 70","9380","Melle")
adres1.afdruk()
</script>
</body>

</html>

oplossing

10. Oefeningen

1.	Stel het algoritme op voor de werking van een frisdrankautomaat. Men moet 25 BEF in de automaat stoppen (5 x 5 BEF of 20 BEF + 5 BEF of 20 BEF + 20 BEF waarbij men 3 x 5 BEF terugkrijgt). De automaat laat enkel toe muntstukken van 5 BEF en 20 BEF te gebruiken. De automaat biedt volgende dranken aan: cola, fanta, spuitwater en chocolademelk. Dit algoritme kan stapsgewijze aangebracht worden: stap1: 1 opdrachtknop (5). Bepaal welk bedrag de gebruiker aanklikt. oplossing stap2: 2 opdrachtknoppen (5 en 20). Bepaal welk bedrag de gebruiker aanklikt. oplossing stap3: uitbreidingen - wordt een te groot bedrag ingevoerd, dan krijg je een passend bedrag terug - via een keuzelijst kan je de frisdrank kiezen - druk je op een OK-knop dan krijg je het ingevoerde bedrag, het terug-bedrag en de gekozen frisdrank - een gebruiksaanwijzing leidt de gebruiker door de werkwijze.oplossing stap4: van zodra een frisdrank wordt gekozen, worden de resultaatgegevens gewist. oplossing
2.	Om te behangen kies ik behangpapier van 0,75 m op 1,85 m. De prijs per vierkante meter bedraagt 369 BEF. Er wordt mij een korting toegestaan van 5%. Hoeveel moet ik betalen na invoer van het aantal rollen behangpapier? stap1: voer het aantal rollen in en bereken de prijs. oplossing stap2: rond het te betalen bedrag af. oplossing stap3: ontbreekt het aantal rollen dan verschijnt een foutmelding. Wordt een aantal rollen ingevoerd, dan verdwijnt deze foutmelding en de eventueel ingevulde prijs. oplossing
3.	Een firma berekent het volgend commissieloon voor haar vertegenwoordigers: 1% voor een omzet tot 200 000 BEF 2% voor een omzet van 200 001 BEF tot 1 000 000 BEF 3% voor een omzet van meer dan 1 000 000 BEF. Bereken het commissieloon op basis van de ingevoerde omzet. zorg er bovendien voor dat, van zodra een volgende omzet wordt ingevoerd, het vorig commissieloon wordt gewist.oplossing
4.	Schrijf een algoritme dat volgende reeks afdrukt: 0 4 8 12 16 20 24 oplossing
5.	Bereken, op basis van een aantal producten, hun prijs en hun BTW-tarief, het totaal bedrag te betalen door de klant. oplossing
6	Schrijf een algoritme dat de controle op een BTW-nummer (xxx-xxx-xxx) uitvoert. - Vorm het getal dat bestaat uit de eerste zeven cijfers - Deel dit getal door 97 - Indien de rest van de deling gelijk is aan de laatste twee cijfers, dan is het BTWnummer correct.
7.	Maak een omzettingstabel van graden Celsius naar graden Fahrenheit. De graden Celsius variëren van -20 tot 20 met een verhoging van 1 graad. De bereken kan met volgende formule F=9/5*C+32
8	Na invoer van een willekeurig getal worden de tafels van vermenigvuldigen afgedrukt.
9	Bereken de faculteit van een willekeurig ingevoerd getal
10	Na invoer van een aantal personen wordt de toegangsprijs berekend. Voor groepen van 10 personen of meer betaalt men 350 BEF per persoon anders 500 BEF.
11	Schrijf een programma dat BEF omzet naar Euro en omgekeerd. oplossing1 of beter oplossing2
12	Maak een tabel met de tweede en derde macht van de getallen tussen 1 en 10. oplossing 1 of beter oplossing 2

event handler	als..
onClick	aanklikken van de muis
onChange	wijzigen van een waarde
onFocus	als het invoerobject inputfocus krijgt
onBlur	bij het verlaten van een invoerobject
onLoad	bij het laden van een pagina in de browser
onMouseOver	wanneer men met de muis over een link beweegt
onSelect	wanneer een invoerobject gekozen wordt
onSubmit	wanneer men een formulier doorstuurt
onUnload	wanneer de huidige pagina verlaten wordt