Toepassing: gemeenten
Vraag aan de gebruiker een aantal gemeenten, de gebruiker stopt met de ingave van de waarde "stop".
Breng de gemeenten alfabetisch op het scherm in een keuzelijst
Bekijk het voorbeeld: 
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Javascript: oefening arrays</title>
<link rel="stylesheet" type="text/css" href="vb.css">
<script type="text/javascript">
<!--
var gemeenten = new Array();
var doorgaan = true;
while(doorgaan){
var gemeente = prompt("Gemeente:","stop");
if (gemeente != "stop") gemeenten.push(gemeente);
else {
gemeenten.sort();
doorgaan = false;
}
}
-->
</script>
</head>
<body>
<h1>Oefening arrays</h1>
<h2>Gemeenten</h2>
<select>
<script type="text/javascript">
<!--
for(var item = 0; item < gemeenten.length ; item++){
document.write("<option value=\"" +gemeenten[item] +"\">" +gemeenten[item] +"</option>");
}
-->
</script>
</select>
</body>
</html>
Toepassing: getallen
Vraag getallen aan de gebruiker, deze stopt met -1
Breng de getallen op het scherm, gescheiden door een komma.
Breng de som van de getallen op het scherm
Breng het gemiddelde, afgrond tot 1 decimaal, van de getallen op het scherm.
Wanneer geen positief getal wordt ingegeven (of -1 om te stoppen) krijgt de gebruiker een melding en kan deze opnieuw proberen.
Bij ingave van een kommagetal wordt dit door de toepassing afgebroken tot een geheel getal.
Zorg voor een gepaste melding als de gebruiker geen enkel getal heeft ingegeven
Bekijk het voorbeeld:
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Javascript: oefening arrays</title>
<link rel="stylesheet" type="text/css" href="vb.css">
<script type="text/javascript">
<!--
var getallen = new Array();
var doorgaan = true;
while(doorgaan){
//getal inlezen, kommagetallen afbreken
var getal = parseInt(prompt("Geef een positief geheel getal in:",-1));
//test: is ingave numeriek en groter dan -2 (-1 = stoppen)
if(!isNaN(getal) && getal > -2){
if (getal != -1) {
getallen.push(getal);
} else {
doorgaan = false;
}
} else {
alert("Geen positief getal ! Probeer opnieuw.");
}
}
function maakSom(reeks){
var som = 0;
for(var i = 0; i < reeks.length ; i++){
som += reeks[i];
}
return som;
}
function maakGemiddelde(reeks){
var som = maakSom(reeks);
var gemiddelde = afronden((som / reeks.length),1);
return gemiddelde;
}
function afronden(getal,dec){
getal = getal * Math.pow(10,dec);
getal = Math.round(getal);
getal = getal / Math.pow(10,dec);
return getal;
}
-->
</script>
</head>
<body>
<h1>Oefening arrays</h1>
<h2>Getallen</h2>
<script type="text/javascript">
<!--
if(getallen.length > 0){
document.write("De getallen: <b>" +getallen.join() +"</b>");
document.write("<br>Som: <b>" +maakSom(getallen) +"</b>");
document.write("<br>Gemiddelde: <b>" +maakGemiddelde(getallen) +"</b>");
} else {
document.write("Geen getallen opgegeven");
}
-->
</script>
</body>
</html>
Toepassing: sorteeralgoritme BubbleSort
Vul een Array met namen van personen
Sorteer deze Array met behulp van het BubbleSort-algoritme
Natuurlijk kan je de methode sort van een Array gebruiken om elementen te sorteren, maar het is leerrijk eens zelf een sorteeralgoritme uit te werken.
Bekijk het voorbeeld:
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Cursus DHTML - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<style type="text/css">
</style>
<script language= "JavaScript">
<!--
var Namen = new Array("Pieters","Janssens","Vandevelde","Bouwens");
/* ******************************************************
* functie: bubblesort
* doel: sorteren van elementen
* Methode:
* In de buitenste lus (teller j) overlopen we alle elementen
* Per doorgang in de buitenste lus doorlopen we een lus met teller i
* vb. Array met de 4 namen hierboven
* j telt van 0 t.e.m. 2 :<3 (4-1)
* j = 0 (eerste doorgang buitenste lus)
* i telt van 1 t.e.m. 3 :<4 (4-0)
* i = 1
* elem0 > elem1 ?
* "Pieters" > "Janssens" --> wisselen !
* dus elem0 = "Janssens"
* elem1 = "Pieters"
* i = 2
* elem1 > elem2 ?
* "Pieters" > "Vandevelde" ? --> niet wisselen
* i = 3
* elem2 > elem4 ?
* "Vandevelde" > "Bouwens" ? --> wisselen !
* dus elem3 = "Bouwens"
* elem4 = "Vandevelde"
* voorlopig resultaat: Janssens, Pieters, Bouwens, Vandevelde
* Het laatste element is na deze eerste doorgang zeker het grootste,
* in de volgende lusdoorgang moeten we dit niet meer controleren!
* j = 1 (tweede doorgang buitenste lus)
* i telt van 1 t.e.m. 2 :<3 (4-1)
* i = 1
* elem0 > elem1 ?
* "Janssens" > "Pieters" --> niet wisselen !
* i = 2
* elem1 > elem2 ?
* "Pieters" > "Bouwens" ? --> wisselen
* dus elem1 = "Bouwens"
* elem2 = "Pieters"
* voorlopig resultaat: Janssens, Bouwens, Pieters, Vandevelde
* j = 2 (derde doorgang buitenste lus)
* i telt van 1 t.e.m. 1 :<2 (4-2)
* i = 1
* elem0 > elem1 ?
* "Janssens" > "Bouwens" --> wisselen !
* dus elem0 = "Bouwens"
* elem1 = "Janssens"
* eindresultaat: Bouwens, Janssens, Pieters, Vandevelde
*
* Stel dat de elementen reeds gesorteerd geraken in een eerdere doorgang
* van de buitenste lus, dan verlaten we de lus eerder!
* hiervoor gebruiken we de hulpvariabele ok
* in de buitenste lus zetten we ok op true
* als een element verplaatst wordt in de binnenste lus wordt ok false
* als geen element werd verplaatst in de binnenste lus,
* dan is de lijst gesorteerd en verlaten we de functie
* ******************************************************/
function bubblesort(invoer){
if(invoer.length<2) return;
var lengte = invoer.length;
var i,j,tijdelijk,ok;
for(j=0;j<lengte-1;j++){
ok = true;
for(i=1;i<lengte-j;i++){
if(invoer[i-1]>invoer[i]){
tijdelijk=invoer[i];
invoer[i]=invoer[i-1];
invoer[i-1]=tijdelijk;
ok = false;
}
}
if(ok)return
}
}
//-->
</script>
</head>
<body>
<h1>BubbleSort</h1>
<script type="text/javascript">
<!--
document.write("Arrayelementen: <b>" +Namen.join() +"</b>");
bubblesort(Namen);
document.write("<p>Gesorteerd met Bubblesort: <b>" +Namen.join() +"</b>");
-->
</script>
</body>
</html>
Toepassing (Extra): sorteeralgoritme BubbleSort voor een associatieve Array
Vul een Associatieve Array met namen, voornamen en leeftijden van personen
Sorteer deze Array met behulp van het BubbleSort-algoritme, je kan kiezen op welk veld van de associatieve Array je sorteert
Opgepast, deze manier van sorteren is veel moeilijker te gebruiken dan de methode in de volgende toepassing.
Bekijk het voorbeeld:
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Cursus DHTML - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<style type="text/css">
</style>
<script language= "JavaScript">
<!--
var studenten = new Array();
nieuweStudent("Janssens","Geert" ,18);
nieuweStudent("Pieters", "Els" ,17);
nieuweStudent("Vandevelde", "Jonas", 20);
nieuweStudent("Bouwens", "Sofie", 19);
nieuweStudent("Elbers","Ellen", 25);
function nieuweStudent(naam, voornaam, leeftijd){
var index = studenten.length;
studenten[index] = new Array();
studenten[index].naam = naam;
studenten[index].voornaam = voornaam;
studenten[index].leeftijd = leeftijd;
}
/* *************************************************
* function sorteerAA - gebaseerd op BubbleSort
* doel sorteren van een Associatieve Array op basis van een eigenschapnaam
* We ontvangen de eigenschapnaam in de variabele veld
* *************************************************/
function sorteerAA(invoer,veld){
if(invoer.length<2) return;
var lengte = invoer.length;
var i,j,tijdelijk,ok;
for(j=0;j<lengte-1;j++){
ok = true;
for(i=1;i<lengte-j;i++){
if(eval('invoer[i-1].' +veld) >eval('invoer[i].' +veld)){
tijdelijk=invoer[i];
invoer[i]=invoer[i-1];
invoer[i-1]=tijdelijk;
ok = false;
}
}
if(ok)return
}
}
//-->
</script>
</head>
<body>
<h1>Sorteren Assoc Array</h1>
<script type="text/javascript">
<!--
document.write("<h3>Studenten</h3>");
for(i=0;i<studenten.length;i++){
student = studenten[i];
for(waarde in student){
document.write(student[waarde] +" ");
}
document.write("<br>");
}
document.write("<hr><h3>Studenten op naam</h3>");
sorteerAA(studenten,"naam");
for(i=0;i<studenten.length;i++){
student = studenten[i];
for(waarde in student){
document.write(student[waarde] +" ");
}
document.write("<br>");
}
document.write("<hr><h3>Studenten op voornaam</h3>");
sorteerAA(studenten,"voornaam");
for(i=0;i<studenten.length;i++){
student = studenten[i];
for(waarde in student){
document.write(student[waarde] +" ");
}
document.write("<br>");
}
document.write("<hr><h3>Studenten op leeftijd</h3>");
sorteerAA(studenten,"leeftijd");
for(i=0;i<studenten.length;i++){
student = studenten[i];
for(waarde in student){
document.write(student[waarde] +" ");
}
document.write("<br>");
}
-->
</script>
</body>
</html>
Toepassing: sorteren van een associatieve Array met eigen sorteer-implementatie
Vul een Associatieve Array met namen, voornamen en leeftijden van personen
Sorteer deze Array door een eigen implementatie op te geven voor de methode sort.
Deze toepassing leert je een nieuwe manier kennen om een associatieve Array of een object met eigenschappen te sorteren volgens een veldwaarde.
De methode sort van een Array sorteert de elementen volgens de natuurlijke sorteervolgorde: getallen van klein naar groot, woorden alfabetisch.
Als je een meerdimensionale Array of een associatieve Array gebruikt wens je zelf op te geven op welk criterium er gesorteerd moet worden.
Hiertoe maken we een functie mijnSortering aan die twee elementen ontvangt. Je kan nu binnen deze functie een eigenschap van de twee elementen vergelijken.
- waarde1 > waarde2 retourneer 1(oplopend) of -1(aflopend)
- waarde1 < waarde2 retourneer -1(oplopend) of 1(aflopend)
- gelijk: retourneer 0
Het aanroepen van de functie mijnSortering zal intern gebeuren bij het aanroepen van de methode sort van de Array. Met de methode sort van de Array geven we nu de functienaam mijnSortering voor onze eigen sortering mee.
In deze voorbeeldtoepassing vullen we een variabele sorteerOp met de naam van het veld waarop we willen sorteren. Door in de functie mijnSortering geen vaste veldwaarde te gebruiken, maar de variabele sorteerOp kunnen we de sortering veranderen door de variabele sorteerOp op een gewenste veldnaam in te stellen en de sortering door te voeren: studenten.sort(mijnSortering).
Bekijk het voorbeeld:
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Cursus DHTML - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<style type="text/css">
</style>
<script language= "JavaScript">
<!--
var studenten = new Array();
nieuweStudent("Janssens","Geert" ,18);
nieuweStudent("Pieters", "Els" ,17);
nieuweStudent("Vandevelde", "Jonas", 20);
nieuweStudent("Bouwens", "Sofie", 19);
nieuweStudent("Elbers","Ellen", 25);
function nieuweStudent(naam, voornaam, leeftijd){
var index = studenten.length;
studenten[index] = new Array();
studenten[index].naam = naam;
studenten[index].voornaam = voornaam;
studenten[index].leeftijd = leeftijd;
}
function mijnSortering(a,b){
if(a[SorteerOp] > b[SorteerOp]){return 1}
if(a[SorteerOp] < b[SorteerOp]){return -1}
return 0
}
function toonStudenten(){
document.write("<h3>Studenten op " +SorteerOp +"</h3>");
for(i=0;i<studenten.length;i++){
student = studenten[i];
for(waarde in student){
document.write(student[waarde] +" ");
}
document.write("<br>");
}
document.write("<hr>");
}
//-->
</script>
</head>
<body>
<h1>Sorteren Assoc Array</h1>
<script type="text/javascript">
<!--
var SorteerOp = "naam"
studenten.sort(mijnSortering)
toonStudenten()
var SorteerOp = "voornaam"
studenten.sort(mijnSortering)
toonStudenten()
var SorteerOp = "leeftijd"
studenten.sort(mijnSortering)
toonStudenten()
-->
</script>
</body>
</html>
