Cursus Javascript: oefeningen op Events

Toepassing: online javascript shop: speelgoedwinkel

In deze toepassing leer je een online shop bouwen met behulp van Javascript.

Wanneer de gebruiker een categorie kiest worden de speelgoedartikels uit deze categorie getoond.

Beweegt de gebruiker met de muis over een kleine afbeelding van het artikel, dan worden de detailgegevens van het artikel getoond.

De gebruiker kan een gewenst aantal opgeven voor een artikel en de bestelling aan de winkelmand toevoegen.

Wanneer de winkelmand artikels bevat wordt de inhoud getoond en de totaalprijs berekend.

Er werd gebruik gemaakt van inline event-handlers.

De bestanden werden zodanig opgebouwd dat je voor het vullen van de categorieen van artikels en de artikelgegevens slechts 1 .js bestand hoeft te bewerken: speelgoedartikels.js
De gebruikte globale variabelen vind je in speelgoedglobaal.js
De gebruikte functies vind je in speelgoedfuncties.js
De opmaak werd voorzien met css: speelgoedwinkel.css.

Deze toepassing leert je enkel het client-side gebeuren van een online shop, wanneer deze gegevens effectief moeten worden gemanipuleerd (wegschrijven in een database, versturen van een email met de bestelling, ...) dan zal je een server-side techniek zoals ASP of ASP.net moeten beheersen.

Bekijk de toepassing:

Download het een zip-bestand met de volledige toepassing:

Toon /verberg

speelgoedwinkel.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Speelgoedwinkel</title>
<link href="speelgoedwinkel.css" rel="stylesheet" type="text/css">
<script src="speelgoedglobaal.js"></script>
<script src="speelgoedfuncties.js"></script>
<script src="speelgoedartikels.js"></script>
</head>

<body onload="initieer()">
<h1>Speelgoedwinkel</h1>
<div class="winkelinhoud">
	<div id="divCat" class="cat"></div>
	<div id="divCatInhoud" class="catinhoud"></div>
</div>
<div id="divDetails" class="details"></div>
<div id="divMand" class="mand"></div>
</body>
</html>

speelgoedglobaal.js
var categorie = new Array();
var artikel = new Array();

speelgoedfuncties.js
/* *************************
 * functie: initieer
 * doel:    als de pagina geladen is, de gebruikersinterface vullen
 * in:      -
 * out:     -
 * *************************/
function initieer(){
	toonCat();
	toonCatInhoud(0);
	toonMand();
}


/* *************************
 * functie: nieuweCategorie
 * doel:    een element toevoegen aan de Array categorie
 * in:      naam
 * out:     -
 * *************************/
function nieuweCategorie(naam){
   categorie.push(naam);
}


/* *************************
 * functie: nieuwArtikel
 * doel:    een element toevoegen aan de Array artikel
 *          dit element is zelf een associatieve Array
 * in:      id, catnr, naam, fig, prijs en tekst
 * out:     -
 * *************************/
function nieuwArtikel(id, catnr, naam, fig, prijs, tekst){
   var aantal = artikel.length;
   artikel[aantal] = new Array();
   
   artikel[aantal].id = id;
   artikel[aantal].catnr = catnr;
   artikel[aantal].naam = naam;
   artikel[aantal].fig = fig;
   artikel[aantal].prijs = prijs;
   artikel[aantal].tekst = tekst;
   artikel[aantal].aantal = 0;
}

/* *************************
 * functie: maakCat
 * doel:    maak een tabel met een overzicht van de categorieen
 * in:      -
 * out:     String: de categorieen
 * *************************/
function maakCat(){
	var strRes = "<table><tr><td><u>Maak uw keuze:</u></td></tr>";
	for(var i = 0; i < categorie.length; i++){
		strRes += '<tr>';
		strRes += '<td><a href="javascript:toonCatInhoud(' +i +')">' +categorie[i] +'</a></td>';
		strRes += '</tr>'
	}
	strRes += "</table>";
	return strRes;
}

/* *************************
 * functie: toonCat
 * doel:    toon de categorieen in de gepaste divisie
 * in:      -
 * out:     -
 * *************************/
function toonCat(){
	var inhoud = maakCat();
	var divCat = new getObj("divCat");
	divCat.obj.innerHTML = inhoud;
}

/* *************************
 * functie: maakCatInhoud
 * doel:    maak een tabel met de artikelgegevens van een bepaalde categorie
 * in:      int categorienummer
 * out:     String met alle artikelgegevens van de categorie
 * *************************/
function maakCatInhoud(catnr){
	var eerste = false;
	var strRes = "<form><table>";
	for(var i = 0; i < artikel.length; i++){
	
		if(artikel[i].catnr == catnr){
			strRes += '<tr>';
			strRes += '<td><img id="cat' +i +'" class="figklein" src="speelgoed/' +artikel[i].fig +'_k.jpg" onmouseover="toonDetails(' +i +')"></td>';
			strRes += '<td class="naam">' +artikel[i].naam +'</td>';
			strRes += '<td class="prijs">' +toonPrijs(artikel[i].prijs) +'</td>';
			strRes += '<td><input type="text" id="aantal_van_' +i +'" value="1" size="2" class="aantal"></td>';
			strRes += '<td><img style="cursor:pointer" src="speelgoed/mand.gif" onclick="bestel(' +i +')"></td>';
			strRes += '</tr>';
			if(!eerste){
				toonDetails(i);
				eerste = true;
			}
		}
	}
	strRes += "</table></form>";
	return strRes;
}

/* *************************
 * functie: toonCatInhoud
 * doel:    toon de artikels van een categorie in de gepaste divisie
 * in:      int catnr
 * out:     -
 * *************************/
function toonCatInhoud(catnr) {
	var inhoud = maakCatInhoud(catnr);
	var divCatInhoud = new getObj("divCatInhoud");
	divCatInhoud.obj.innerHTML = inhoud;
}
	

/* *************************
 * functie: toonPrijs
 * doel:    een getal weergeven als eurobedrag
 * in:      Number prijs
 * out:     String opgemaakte prijs
 * *************************/
function toonPrijs(prijs){
	//afronden tot 2 decimalen
	prijs = prijs * 100;
	prijs = Math.round(prijs);
	prijs = prijs / 100;
	
	//weergeven twee cijfers na de komma
	var strPrijs = "" +prijs; //omzetten tot String
	var pos = strPrijs.indexOf(".");
	if(pos == -1) strPrijs += ".00" //geen "." gevonden
	else if ((strPrijs.length - pos) < 3) strPrijs += "0";
	
	//punt vervangen door komma
	strPrijs = strPrijs.replace('.',',');
	
	//euro-symbool ervoor
	strPrijs = "€ " +strPrijs
	
	return strPrijs;
	
}

/* *************************
 * functie: toonDetails
 * doel:    toon de detailgegevens van een artikel in de gepast divisie
 * in:      int index van artikel
 * out:     -
 * *************************/
function toonDetails(nr){
	var inhoud = maakDetails(nr);
	var divDetails = new getObj("divDetails");
	divDetails.obj.innerHTML = inhoud;
}


/* *************************
 * functie: maakDetails
 * doel:    maak een String aan met de detailgegevens van een artikel
 * in:      int index van artikel
 * out:     String detailgegevens
 * *************************/
function maakDetails(nr){
	var strRes = '<img class="detailfig" src="speelgoed/' +artikel[nr].fig +'_g.jpg">'
	strRes += '<div class="info">' 
	strRes += '<span class="naam">' +artikel[nr].naam +'</span><br>'
	strRes += 'Prijs: <span class="prijs">' +toonPrijs(artikel[nr].prijs) +'</span><br>'
	strRes += '<span class="tekst">' +artikel[nr].tekst +'</span>'
	
	
	strRes += '</div>'
	return strRes;
}

/* *************************
 * functie: bestel
 * doel:    een bestelling uitvoeren
 * in:      int index van het artikel
 * out:     -
 * *************************/
function bestel(nr){
	var naam = "aantal_van_" +nr
	var INPaantal = new getObj(naam);
	var aantal = INPaantal.obj.value;
	if (controleAantal(aantal)){
		artikel[nr].aantal = parseInt(aantal);
		toonMand();
	} else {
		alert('Gelieve een positief, geheel getal in te geven.','Fout bij ingave');
		INPaantal.obj.select();
	}
}

/* *************************
 * functie: controleAantal
 * doel:    controle of een waarde numeriek en positief is
 * in:      getal
 * out:     boolean
 * *************************/
function controleAantal(getal){
	var ok = false;
	if(!isNaN(getal) && getal >= 0) ok = true;
	return ok;
}

/* *************************
 * functie: toonMand
 * doel:    toon de inhoud van het winkelmandje in de gepaste divisie
 * in:      -
 * out:     -
 * *************************/
function toonMand(){
	inhoud = maakMand();
	var divMand = new getObj("divMand");
	divMand.obj.innerHTML = inhoud;
}

/* *************************
 * functie: maakMand
 * doel:    Maak een String met de gegevens van het winkelmandje
 * in:      -
 * out:     String met de mandgegevens
 * *************************/
function maakMand(){
	var strRes = "<b><u>Inhoud van uw mandje:</u></b><p>";
	if(isMandGevuld()){
		var totaal = 0;
		strRes += '<table width="400px" frame="hsides"><tr><th style="text-align:left">Artikel</th><th>Prijs</th><th>Aantal</th><th>Totaal</th></tr>'
		for(var i = 0; i<artikel.length; i++){
			if(artikel[i].aantal != 0){
				var subtotaal = artikel[i].prijs * artikel[i].aantal;
				totaal += subtotaal;
				strRes += '<tr>';
				strRes += '<td class="naam">' +artikel[i].naam 
				strRes += ' <small>(' +artikel[i].id +')</small></td>';
				strRes += '<td class="prijs">' +toonPrijs(artikel[i].prijs) +'</td>';
				strRes += '<td class="aantal">' +artikel[i].aantal +'</td>';
				strRes += '<td class="prijs">' +toonPrijs(subtotaal) +'</td>';
				strRes += '</tr>';
			}
		}
		strRes += '<tr class="totaal"><td colspan="3">TOTAAL</td><td class="prijs">' +toonPrijs(totaal) +'</td></tr>'
	} else { 
		strRes += "<i>Nog geen items in het mandje...</i>"; 
	}
	strRes += "</table>"
	return strRes;
}

/* *************************
 * functie: isMandGevuld
 * doel:    nagaan of er reeds artikels in het mandje liggen
 * in:      -
 * out:     boolean
 * *************************/
function isMandGevuld(){
	gevuld = false;
	for(var i = 0; i<artikel.length; i++){
		if(artikel[i].aantal > 0) gevuld = true;
	}
	return gevuld;
}

/* *************************
 * functie: getObj
 * doel:    maak een object met een eigenschap obj als 
 *          cross-browser objectverwijzing naar een element op de pagina
 * in:      id van het element
 * out:     
 * gebruik: var mijnobj = new getObj('elementnaam');
 *          objecteigenschap: mijnobj.obj.objecteigenschap
 * *************************/
function getObj(name){
  		if (document.getElementById){
  			this.obj = document.getElementById(name);
  		}
  		else if (document.all){
			this.obj = document.all[name];
  		}
  		else if (document.layers){
   			this.obj = document.layers[name];
  		}
}




speelgoedartikels.js
nieuweCategorie("baby"); //0
nieuweCategorie("pluche"); //1
nieuweCategorie("gezelschapspellen"); //2

nieuwArtikel( "A001",0,"Buigzame rups","rups",11.95,"Rammelen en ratelen, heel veel speelplezier met de buigzame rups. De buigzame rups steunt de ontwikkling van de grove en fijne motoriek.");

nieuwArtikel( "A002",0,"Bloemrammelaar","bloem",5.95,"Deze vrolijke bloemrammelaar steunt de ontwikkeling van de fijne motoriek, bevordert de oog-hand coordinatie en stimuleert de zintuigen van uw baby.");

nieuwArtikel( "A003",0,"Bijtring","bijtring",4.9,"Met deze bijtring heeft de baby een knuffel en een bijtring in 1. De beer die tussen de bijtring is bevestigd is heel erg schattig en gemaakt van super zacht materiaal.");

nieuwArtikel( "A004",0,"Circus Gym","circus",25.00,"Het circus is in de stad en het is nu nog leuker dan anders! Uw baby kan heel leuk los met dit speelgoed spelen, maar het is ook leuk als het speelgoed aan de gym wordt opgehangen.");

nieuwArtikel( "A005",1,"Glowbear","glowbear",20.00,"Dit zijn hele speciale Troetelbeertjes! Deze Troetelbeertjes geven licht in het donker.");

nieuwArtikel( "A006",1,"Roze poedel","poedel",5.00,"Deze prachtige roze dame is op zoek naar een nieuw baasje. De roze poedel is gemaakt van zacht materiaal.");

nieuwArtikel( "A007",2,"Baantjer","baantjer",19.9,"Rechercheur De Cock en zijn team worden in dit moordspel geconfronteerd met een serie meedogenloze moorden, die in elk spel weer anders in elkaar blijken te zitten.");

nieuwArtikel( "A008",2,"Berenboom","berenboom",5.00,"Beren zijn gek op honing!! Ze halen dan ook de malste toeren uit om in bomen te klimmen en de honing van bijen af te pakken.");

nieuwArtikel( "A009",2,"Cluedo","cluedo",24.95,"Duistere moord op slot Swaenestyn! Brabant - De bekende antropoloog Rogier Swart werd zaterdagavond onder verdachte omstandigheden dood aangetroffen in zijn kasteel in Brabant.");

speelgoedwinkel.css
body {
		color:gray;
	}
	
	h1 {
		margin-left:50px;
	}
	
	img.figklein {
		border:solid 1px #996600;
	}
	.naam {
		font-weight:bold;
		color:brown;
	}
	.prijs {
		font-style:italic;
		color:green;
		text-align:right;
	}
	
	.aantal {
		text-align:right;
		color:#CC00CC;
	}
	
	div.cat {
		float:left;
		background-color:#FFCCCC;
		margin-right:30px;
		margin-top:10px;
		border:solid 1px #CC3366;
		width:150px;
	}
	
	div.winkelinhoud {
		margin-left:50px;
	}
	div.catinhoud {
		border:solid 1px #CC3366;
		background-color:#FFCC99;
		margin-top:10px;
		height:200px;
		width:520px;
		padding:10px;
		overflow:auto;
	}
	
	div.details {
		border:solid 1px #CC3366;
		background-color:#FFFFCC;
		margin-top:20px;
		margin-left:50px;
		width:700px;
		padding:10px;
		height:120px;
	}
	
	div.mand {
		border:solid 1px #CC3366;
		background-color:#FFFFCC;
		margin-top:20px;
		margin-left:50px;
		width:700px;
		padding:10px;
	}
	
	img.detailfig {
		border:solid 1px #996600;
		float:left;
		margin-right:20px;
	}
	
	a:link {
		color:blue;
		text-decoration:none;
	}
	
	a:visited {
		color:blue;
		text-decoration:none;
	}
	
	a:hover {
		color:#CC3366;
		background-color:#FFFF99;
		text-decoration:none;
	}
	
	a:active {
		color:#FF0000;
		text-decoration:none;
	}
	
	input.aantal {
		background-color:#FFFFCC;
		border:ridge;
		margin-left:40px;
	}
	
	th {
		text-align:right;
		color:black;
	}
	
	tr.totaal {
		text-align:right;
		color:black;
		font-weight:bold;
	}