Deze video bestaat uit twee delen:
deel 1:
deel 2:
Vraag 15.1: ‘for’ in plaats van ‘while’
Bestudeer wat het boek ‘Eloquent Javascript’ zegt over de for-loop constructie (2e helft van hoofdstuk 2).
Welke van de twee while-loops in de screencast zou natuurlijker met een for-loop geschreven worden?
[ Mail je antwoord… ]Vraag 15.2: van while naar for
Herschrijf de volgende while-loop als een for-loop:
function launchRocket() {
alert("LIFT-OFF!!!");
}
function countDown() {
var counter = 10;
while( counter >= 0 ) {
document.body.innerHTML = document.body.innerHTML + counter + "<br>";
counter --;
}
launchRocket();
}
Intro bij oefening 15.3 tm 15.9
De volgende oefeningen vormen samen een serie.
Zorg ervoor dat je twee verschillende vierkante afbeeldingen van ongeveer 100×100 hebt. Ik gebruikte de volgende twee, dus in mijn voorbeelden heten de afbeeldingen ‘bugs.png’ en ‘elmer.png’:
Gebruik de volgende HTML:
<html>
<head>
<title>Oefening</title>
</head>
<body>
<script>
function addBugs() {
document.body.innerHTML += '<img src="bugs.png">';
}
function addElmer() {
document.body.innerHTML += '<img src="elmer.png">';
}
function addPicture() {
// Zorg ervoor dat er willekeurig een Elmer of een Bugs verschijnt.
// We willen 90% Bugs, en 10% Elmer
}
var antwoord = prompt("Hoeveel plaatjes wil je?");
// deze regels moeten vervangen worden:
alert( "Je antwoord was: " + antwoord );
addPicture(); addPicture(); addPicture(); addPicture(); addPicture();
addPicture(); addPicture(); addPicture(); addPicture(); addPicture();
addPicture(); addPicture(); addPicture(); addPicture(); addPicture();
// voeg precies genoeg (= antwoord dat de gebruiker gaf) plaatjes toe
// met een loop en met de functie addPicture()
</script>
</body>
</html>
Een paar opmerkingen over de code:
- De += die je in de twee eerste functies ziet staan, zijn een afkorting: Je mag a = a + b afkorten tot a += b. (dan hoef je de ‘a’ niet te herhalen, wat fijn kan zijn).
Deze afko werkt zowel voor tekst als voor getallen. - Je ziet dat de stukken tekst in de eerste functies omringt zin door enkele aanhalingstekens. Dat mag. In dat geval kun je de dubbele aanhalingstekens gebruiken als een gewoon karakter in de tekst. Omgekeerd: als de dubbele aanhalingstekens om de tekst hebt staan, kun je enkele aanhalingstekens gebruiken in de tekst zelf.
Hier was dit handig omdat in HTML de dubbele aanhalingstekens nodig zijn rondom attribuutwaarden. - Aan de drie regels met de 15 addPicture() aanroepen, kun je zien dat de puntkomma in JS ook handig kan zijn om statements te scheiden: je kunt er dan meerdere op dezelfde regel gebruiken. In dat geval zijn de puntkomma’s ook echt nodig.
Vraag 15.3: stap 1
Het commentaar in de gegeven code geeft alvast twee opdrachten. Begin nu eerst even met het invullen van de functie addPicture(). Gebruikt daarbij de truuk die in de screencast gebruikt werd om 50-50 beslissingen te nemen. Hoe pas je die aan om er een 90-10 beslissing van te maken?
Als je dat hebt, zou het resultaat er zo kunnen uitzien:
Vraag 15.4: stap twee
Verwijder nu de regels met de alert(), en de aanroepen van addPicture(), en doe de tweede opdracht die in de code, onderaan, staat.
- Gebruik de functie Number(…) om het antwoord om te rekenen naar een echt getal.
- Kies of je een for-loop of een while-loop gebruikt, en vermeld in je posting waarom.
- Maak je nog niet druk om verkeerde invoer van de gebruiker.
Vraag 15.5: stap drie
Zorg ervoor dat alle afbeeldingen op hun eigen regel komen te staan, door na iedere afbeelding een <BR> tag tussen te voegen.
Doe dat niet door addPicture of de andere twee functies aan te passen. De aanpassing komt in de loop te staan.
Je resultaat kan er nu zo uitzien:
Vraag 15.6: stap vier
Nu gaan we wel checken of de invoer deugt: Gebruik een loop (welke?) om er voor te zorgen dat, iedere keer als de gebruiker een verkeerde invoer geeft, de prompt() gewoon nog eens verschijnt (wellicht met een iets andere tekst).
Invoer is verkeerd als het na conversie met de functie Number() de waarde NaN oplevert (b.v. “flsda;fdkajkda” of “Alsjeblieft! Ik wil dit niet! Laat me met rust!!”, of de lege string “”). Gebruik hiervoor de functie isNaN().
Vraag 15.7: stap 5a
Zorg er, met een loop, voor dat er nu op iedere regel 5 afbeeldingen komen te staan. (De gebruiker voert nu het aantal regels in; de for-lus die bij 15_6 het totale aantal plaatjes verzorgde, verzorgt nu het aantal regels).
Let op: als de gebruiker bijvoorbeeld 7 invoert, willen we nu 7 rijen met 5 plaatjes elk (totaal = 7*5=35 plaatjes) (Dit gaat best vaak fout, vandaar de overdreven nadruk op deze zin…)
Gebruik ook een loop om de 5 plaatjes voor elke regel te maken. Dit is de interessantste stap: Je gaat nu een loop binnen een loop gebruiken. De loop om 5 afbeeldingen op een regel te tonen staat binnen de accolades ( { en } ) van de loop die het goede aantal regels veroorzaakt.
We hopen op zo’n soort resultaat (de gebruiker heeft waarde 3 ingevuld):
Vraag 15.8: stap 5b
Zorg ervoor dat nu ook het aantal plaatjes per regel (dus in de horizontale richting) ook met een prompt() aan de gebruiker gevraagd wordt. Ook deze tweede prompt moet gecontroleerd worden, en dus herhaald worden wanneer de invoer niet deugt.
Het is het handigst als je dus een functie maakt die deze herhalende prompt uitvoert totdat er een OK getal uitkomt. Die functie kun je dan twee keer gebruiken; één keer voor het aantal regels, en één keer voor het aantal kolommen (=plaatjes per regel).
Wat voor parameter ga je die functie meegeven?
Als de gebruiker 6 invoert voor het aantal regels, en daarna 3 voor het aantal kolommen, dan verwachtten we zo’n soort uitvoer:
Vraag 15.9: laatste stap (stap zes)
We makener een schaakbord van, in de zin dat we de plaatjes nu echt om-en-om willen. Zoiets:
Pas hiervoor alleen de functie addPicture() aan.
Hints:
- Gebruik een variabele om bij te houden of je een Bugs of een Elmer moet toevoegen.
- Gebruik een if-statement, die die variabele controleert.
- Verander die variabele iedere keer nadat je een afbeelding hebt toegevoegd.
- Moet die variabele lokaal of globaal zijn? Gebruik console.log() om te experimenteren met de effecten van de twee opties.
- Test deze aanpak ook met een even aantal kolommen. Dat vergt net iets meer intelligentie in je code. (Wellicht heb je een parameter nodig.)