Cursus Javascript: oefeningen op programma structuren

Toepassing: winst

Vul twee variabelen aankoop en verkoop met twee gehele numerieke waarden.
Breng op het scherm: het aankoop-, verkoop- en het winstcijfer, daaronder een gepaste melding: 'Er werd verlies gemaakt', 'Er werd winst gemaakt' , 'Noch winst noch verlies'.

Toon /verberg

<html>
<head>
	<title>Javascript: oefening if</title>
	<link rel="stylesheet" type="text/css" href="vb.css">
<script type="text/javascript">
<!--
var aankoop = 3000;
var verkoop = 5000;
var winst = verkoop - aankoop;
-->
</script>
</head>

<body>
<h1>Oefening if</h1>
<script type="text/javascript">
<!--
document.write("Aankoop: " +aankoop);
document.write("<br>Verkoop: " +verkoop);
document.write("<br>Winst: " +winst);
if(winst > 0){
	document.write("<p>Er werd winst gemaakt");
} else if (winst == 0) {
	document.write("<p>Er werd winst noch verlies gemaakt");
} else {
	document.write("<p>Er werd verlies gemaakt");
}
-->
</script>
</body>
</html>

Toepassing: aantal huisdieren

Vraag met een prompt-venster het aantal huisdieren dat de gebruiker heeft.
We gaan ervan uit dat de gebruiker een geheel getal ingeeft.

Op de pagina verschijnt een aangepaste melding:

nul dieren: 'Geen dierenvriend ?'
een dier: 'Is het beestje niet eenzaam ?'
twee dieren: 'Komen ze een beetje overeen ?'
drie dieren: 'Leuke bende !'
vier dieren: 'Gezellige beestenboel'
anders: 'Amaai, wie geeft dat allemaal te eten ?'

Opgepast, wanneer je een waarde uitleest uit een prompt-venster is deze waarde een tekenreeks (String-variabele). Hou hier rekening mee voor het bouwen van de logische structuur. Later leren we functies kennen die tekenreeksen in getalwaarden kunnen omzetten.

Toon /verberg

<html>
<head>
	<title>Javascript: oefening switch</title>
	<link rel="stylesheet" type="text/css" href="vb.css">
<script type="text/javascript">
<!--
var dieren = prompt("Hoeveel huisdieren heb je ?",2);
-->
</script>
</head>

<body>
<h1>Oefening switch</h1>
<script type="text/javascript">
<!--
switch(dieren){
	case '0':
		document.write('Geen dierenvriend ?');
		break;
	case '1':
		document.write('Is het beestje niet eenzaam ?');
		break;
	case '2':
		document.write('Komen ze een beetje overeen ?');
		break;
	case '3':
		document.write('Leuke bende !');
		break;
	case '4':
		document.write('Gezellige beestenboel');
		break;
	default:
		document.write('Amaai, wie geeft dat allemaal te eten ?');
}

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

Toepassing: Tafels deel 1: tafel van 7

Breng de tafel van vermenigvuldiging voor het getal 7 op het scherm.
1 x 7 = 7
...
10 x 7 = 70

Maak gebruik van een lus naar keuze.

Toon /verberg

<html>
<head>
	<title>Javascript: oefening lus</title>
	<link rel="stylesheet" type="text/css" href="vb.css">
</head>

<body>
<h1>Oefening lus</h1>
<h2>For-lus</h2>
<script type="text/javascript">
<!--
for(var i = 1; i < 11 ; i++){
	document.write(i +" x 7 "  +" = " +(i*7) +"<br>");
}
-->
</script>
<hr>
<h2>While-lus</h2>
<script type="text/javascript">
<!--
var t = 1;
while(t<11){
	document.write(t +" x 7 "  +" = " +(t*7) +"<br>");
	t++;
}
-->
</script>

</body>
</html>

Toepassing: Tafels deel 2: tafel van 1 t.e.m. 10

Breng de tafel van vermenigvuldiging voor 1 t.e.m. 10 op het scherm.

Toon /verberg

<html>
<head>
	<title>Javascript: oefening lus</title>
	<link rel="stylesheet" type="text/css" href="vb.css">
</head>

<body>
<h1>Oefening lus</h1>
<script type="text/javascript">
<!--
for(var i = 1; i < 11 ; i++){
	for( var j = 1; j < 11 ; j++){
		document.write(i +" x " +j +" = " +(i*j) +"<br>");
	}
	document.write("<hr>");
}
-->
</script>
</body>
</html>

Toepassing: Tafels deel 3: tafel van 1 t.e.m. 10 - TABEL

Breng de tafel van vermenigvuldiging voor 1 t.e.m. 10 op het scherm. Gebruik een tabel om telkens vijf tafels naast elkaar te zetten.

Pas de code zodanig aan dat door aanpassen van een variabele kan gekozen worden hoeveel tafels er worden getoond.

Een andere variabele bevat de maximale vermenigvuldigingsfactor (we toonden telkens voor elk getal de vermenigvuldigingen tot en met 10, dit getal moet nu ook instelbaar zijn).

Toon /verberg

<html>
<head>
	<title>Javascript: oefening lus</title>
	<link rel="stylesheet" type="text/css" href="vb.css">
<script type="text/javascript">
<!--
var tafels = 15; //aantal tafels
var factor = 12; //vermenigvuldigen tot dit getal
-->
</script>
</head>

<body>
<h1>Oefening lus</h1>
<table border="1">
<script type="text/javascript">
<!--
var teltafels = 0; // bijhouden of er reeds vijf tafels werdengetoond


for(var i = 1; i < (tafels + 1) ; i++){
	if (teltafels == 0) document.write("<tr>");
	teltafels++
	document.write("<td>");
	for( var j = 1; j < (factor + 1) ; j++){
		document.write(i +" x " +j +" = " +(i*j) +"<br>");
	}
	document.write("</td>");
	if (teltafels == 5){
		document.write("</tr>");
		teltafels = 0;
	} else {
		/* dit is niet echt noodzakelijk maar zorgt 
		   ervoor dat wanneer bijvoorbeeld geen 
		   veelvoud van 5 tafels gekozen wordt
		   de laatste tabelrij ook wordt afgsloten 
		   met /tr.
		   
		   een minpuntje blijft het feit dat de tabel 
		   een aantal td - /td duo's kan missen */
		   
		if(i == tafels){
			document.write("</tr>");
		}
	}
}
-->
</script>
</table>
</body>
</html>

Javascript : Oefeningen programmastructuren

Voorwaardelijke uitvoering van instructie

lussen