JavaScript. F. Vonk versie

2017 JavaScript F. Vonk versie 2 2-1-2017

inhoudsopgave 1 inleiding... - 3-2 programmeerconcepten... - 4-3 instructies en sequenties... - 4-4 strings... - 5-5 variabelen en toekenning... - 10-6 variabelen, types en vergelijking... - 14-7 selectie... - 21-8 herhaling... - 25-9 functies... - 34-10 scope... - 38-11 arrays... - 40-12 wat heb je geleerd... - 42 - Dit werk is gelicenseerd onder een Creative Commons Naamsvermelding NietCommercieel GelijkDelen 3.0 Unported licentie De afbeelding op het voorblad is verkregen via INFOwrs. Copyright 2010 INFOwrs Serviços em informatica. - 2 -

1 inleiding In de module over syntax, semantiek & lay-out hebben we al een tip van de sluier van het programmeren opgelicht. Je al een klein beetje JavaScript gezien en uitgevoerd. In de syntax, semantiek & lay-out module ging het echter voornamelijk over taalregels en codeerafspraken. Programmeren is echter meer dan dat, het vereist gestructureerd denken en creativiteit om tot oplossingen voor problemen te komen. Dus welkom bij de JavaScript module. In deze module ga je leren hoe je met JavaScript zelf code maakt om problemen op te lossen. Zoals we al eerder hebben aangegeven, is JavaScript een tekstuele programmeertaal die veel gebruikt wordt in websites. Let op, dat je alles wat je in de vorige module over syntax, semantiek & lay-out nodig gaat hebben in deze module. In deze module kom je opgaves tegen die je moet maken om de lesstof te verwerken. De antwoorden kunnen in de les besproken worden. opgave Opgaves in blauw moet je maken. Let op, links in dit document hebben een rode kleur. Veel plezier en succes. - 3 -

2 programmeerconcepten In de syntax, semantiek & lay-out module heb je de meeste programmeerconcepten al gezien. In deze module gaan we daar dieper op in en voegen we er nog een paar toe. In de volgende hoofdstukken gaan we naar de volgende concepten kijken: instructies (statements) sequenties strings variabelen toekenning types vergelijking selectie herhaling (loop) functies (methods) scope arrays Je hebt ook geleerd over de codeerafspraken die horen bij de programmeerconcepten. Zorg dat je deze blijft oefenen bij de opgaven in deze module. Op de toets en het SE over programmeren & algoritmiek moet je ze correct toepassen om puntaftrek te voorkomen! 3 instructies en sequenties Het concept instructie (statement) heb je al gezien. We hebben eenvoudige en complexe instructies en kunnen ze achter elkaar zetten om sequenties te maken. Instructies zijn feitelijk de bouwstenen van ieder computerprogramma. We hebben afgesproken, dat we bij het vak informatica eenvoudige instructies altijd afsluiten met een puntkomma! Nederlandse zinnen sluiten we immers ook af met een punt. - 4 -

4 strings Een string is een willekeurig stukje tekst. Let op, dat een string ook leeg kan zijn. Dat betekent dat er geen tekst in de string staat. We noemen dat een lege string. Je hebt al geleerd dat JavaScript bepaalde keywords kent. Voorbeelden van keywords zijn: var, if, else en while. Daarnaast kun je JavaScript woorden leren zoals de namen van functies en variabelen. Alle andere tekst wordt niet herkend door JavaScript. Hopelijk herinner je je nog dat we quotes gebruiken om JavaScript te vertellen dat het een stuk tekst, een string dus, niet moet proberen te begrijpen. Toen we de wereld wilden groeten deden we dat dus als volgt: document.write("hello World! "); We gebruikten de dubbele quotes om aan te geven dat Javascript niet hoeft te snappen wat de string Hello World! betekent. De lege string geven we aan door twee dubbele quotes direct achter elkaar te zetten, dus "". opgave 4.1 Maak een HTML bestand aan waar je eerst een lege regel in afdrukt, dan een willekeurig stuk tekst en dan weer een lege regel. Voer vervolgens de code uit in een webbrowser. karakters escapen Maar wat nu als onze string al dubbele quotes bevat, bijvoorbeeld in het volgende geval. Inge zei: "We gaan naar zee!" De voor de hand liggende oplossing zou zijn. document.write("inge zei: "We gaan naar zee!" "); - 5 -

Dit werkt echter helaas niet. opgave 4.2 Zet de voorgaande code weer in een HTML bestand en voer deze uit in een webbrowser. Zet het console venster aan (F12) aan om te kijken wat er fout gaat. Je ziet dat JavaScript het niet snapt. Het ziet namelijk de string Inge zei: met een spatie erachter en vervolgens verwacht het een ) om de document.write functie af te sluiten. JavaScript heeft namelijk geen flauw idee wat We gaan naar zee! voorstelt. Er zijn twee manier om dit probleem op te lossen. De eerste is niet de mooiste maar werkt wel. We hebben verteld dat je zowel met enkele als dubbele quotes mag werken. Voor JavaScript zijn deze echter niet hetzelfde en daar kunnen we hier misbruik van maken. Zorg wel dat je het goede type enkele quote gebruikt! document.write('inge zei: "We gaan naar zee!" '); Probeer het maar eens uit. Zoals gezegd is dit niet echt netjes. Een betere manier is om de karakters die JavaScript niet moet lezen, dus de dubbele quotes in onze zin, te "escapen". We hebben hier geen goed Nederlands woord voor dus hebben we de Engelse term escaping vernederlandst. Een karakter escapen doe je door er een backslash (\) voor te zetten. Op die manier "ontsnapt" het teken aan het oog van JavaScript. Dat ziet er als volgt uit. document.write("inge zei: \"We gaan naar zee!\" "); Probeer ook dit maar eens uit. Het escapen bestaat in vrijwel iedere taal en kun je met ieder karakter doen dat door de taal herkend wordt. JavaScript heeft niet veel van zulke karakters, maar PHP (een taal die je later in de web leerlijn leert) bijvoorbeeld wel. - 6 -

Je gaat nu even opwarmen door te oefenen met instructies, sequenties en strings. opgave 4.3 Zorg ervoor dat je de volgende limerick 1 in je webbrowser te zien krijgt. Er was eens een kaasboer uit Gouda, die liep rond de tafel zijn vrouw na. De vrouw zei heel vief: "alles is relatief; als ik iets harder loop, zit ik jou na!" string concatenatie Als we programmeren, dan hebben we niet altijd kant en klare strings tot onze beschikking. Soms moeten we namelijk invoer van de gebruiker vragen en die dan vervolgens laten zien met wat tekst ervoor. Gelukkig heeft JavaScript een bewerking om strings achter elkaar te plakken. Dat doen we met de +. Dat ziet er misschien wat vreemd uit, omdat we de + normaal gesproken gebruiken om getallen op te tellen. In veel talen kun je echter ook strings "optellen" en dat wil zeggen dat je ze aan elkaar plakt. Strings aan elkaar plakken noemen we concatenatie. Hier een voorbeeld. var username = prompt("hoe heet je?"); document.write("hallo " + username + "! "); Ook dit stukje code kun je uitproberen als je wilt. In de eerste instructie zien we een aantal programmeerconcepten waar we straks nog uitgebreid op ingaan. We willen dat de gebruiker iets in kan voeren en daar gebruiken we de functie prompt voor. JavaScript kent deze functie standaard, daar hebben de makers van JavaScript voor gezorgd. De prompt functie geeft terug wat de gebruiker invoert, zodat we dat in een variabele op kunnen slaan. Wat "teruggeven" precies betekent, leer je straks bij het onderdeel functies. 1 www.leukespreuk.nl/limericks.htm - 7 -

opgave 4.4 Maak een stukje code dat de gebruiker vraagt zijn/haar naam in te voeren en vervolgens om zijn/haar favoriete kleur in te vullen. De code moet daarna de volgende twee zinnen, ieder op een aparte regel, laten zien. Waar naam of kleur staat moet je afdrukken wat de gebruiker ingevoerd heeft. Hallo naam, leuk je te ontmoeten. Mijn favoriete kleur is ook kleur! Je hebt nu 1 string bewerking gezien, de concatenatie, maar er zijn er natuurlijk nog veel meer. Die hoef je niet allemaal te kennen. Als je ze nodig hebt, dan kun en mag je ze gewoon opzoeken. Kijk bijvoorbeeld maar eens bij de "string methods" op w3schools. string lengte Tot slot nog een belangrijke eigenschap (property) van strings. Ze hebben namelijk een lengte en soms is het handig om die te weten. Je hoeft dan niet zelf de karakters te gaan tellen, dat doet JavaScript automatisch voor je. Iedere string heeft namelijk een eigenschap die length heet en daarin staat de lengte van de string. Een eigenschap hoort altijd bij een entiteit. In het geval van length is de entiteit een string. Zo'n entiteit is of een object of een klasse in JavaScript, omdat het een object georiënteerde taal is. Wat een object en klasse precies zijn is op dit moment niet belangrijk, dus we blijven de term "entiteit" gebruiken. De naam van de entiteit staat voor de punt en de eigenschap achter de punt. Een voorbeeld om het duidelijker te maken. var username = prompt("hoe heet je?"); document.write("hallo " + username + "! "); document.write("je naam bestaat uit "); document.write(username.length); document.write(" karakters. "); - 8 -

opgave 4.5 Verander de code die voor deze opgave staat, zodat je de laatste 3 schrijfinstructies samenvat in 1 schrijfinstructie. - 9 -

5 variabelen en toekenning In de syntax, semantiek & lay-out module hebben we het al over variabelen gehad. We zeiden toen dat je ze kunt zien als doosjes waar je iets in kunt bewaren. Misschien kun je je van bug fixen en software testen nog herinneren, dat een variabele feitelijk een plekje in het werkgeheugen (RAM) van de computer is. Variabelen zijn essentieel bij het programmeren, omdat we er dus dingen in kunnen onthouden. Als de gebruiker iets in moet voeren en we hebben dat op 10 plaatsen in de code nodig, dan willen we niet de gebruiker 10 keer om dezelfde invoer vragen. In plaats daarvan vragen we 1 keer om de invoer en bewaren die in een variabele. Maar ook als we 20 keer dezelfde berekening met dezelfde waardes moeten doen, die veel tijd kost, dan doen we dat niet 20 keer. We doen het 1 keer en slaan het resultaat op in een variabele. Dat bespaart ons veel tijd als we het programma uitvoeren. Een variabele heeft een naam en een inhoud. De naam wijst naar het plekje in het RAM waar de inhoud van de variabele staat. toekenning Aangezien een variabele een inhoud heeft, is het handig als we die inhoud kunnen lezen en schrijven. Bij schrijven van de inhoud van een variabele zeggen we, dat we een waarde toekennen aan de variabele. Vandaar dat we vaak spreken van toekenning. We zouden eigenlijk moeten zeggen: "..., dat we een waarde toekennen aan de inhoud van de variabele." Het is echter vervelend om steeds weer "de inhoud van" op te schrijven of te zeggen. Daarom laten we het meestal weg. Het is echter wel belangrijk, dat je beseft dat het bij lezen en schrijven altijd gaat om de inhoud van de variabele! Om een waarde toe te kennen aan een variabele gebruiken we de = operator, we noemen dit de toekenningsoperator. Bijvoorbeeld: var voornaam = "Jan"; var achternaam = "Jansen"; - 10 -

opgave 5.1 In het voorgaande stuk code staan twee variabelen, voornaam en achternaam. Zet de code in een HTML bestand en voeg daarna twee instructies toe om de waarde van de variabelen onder elkaar af te drukken. Voer vervolgens de code uit in een webbrowser. Vanuit de wiskunde ben je gewend om de = te gebruiken om te vergelijken en voor beginnende programmeurs kan dat in het begin lastig zijn. Wat kan helpen is om niet te zeggen: "De inhoud van de variabele voornaam is Jan." Maar in plaats daarvan te zeggen: "De inhoud van de variabele voornaam wordt Jan." Het schrijven is feitelijk het veranderen van de inhoud van de variabele. Op het moment dat je schrijft, dan gaat de bestaande inhoud van de variabele dus permanent verloren! Daar gaat de analogie met de doos dan ook fout, want als je iets nieuws in een doos stopt, dan zit de oude inhoud er ook nog steeds in. Als je een variabele dus als doos ziet, dan moet je het zien als een doos waar maar 1 ding in kan! Je hoeft niet altijd een vaste waarde toe te kennen aan een variabele, je kunt ook het resultaat van een berekening of functie gebruiken. Van dat laatste heb je al een voorbeeld gezien bij het opvragen van de naam van de gebruiker. var username = prompt("hoe heet je?"); Zoals je hebt gezien schrijven we iets naar een variabele door de naam van de variabele vóór de = te zetten. Logischerwijs kunnen we dus iets lezen uit een variabele door de naam van de variabele áchter de = te zetten. Bijvoorbeeld: var voornaam = "Jan"; var achternaam = "Jansen"; var volledigenaam = voornaam + " " + achternaam; Bij het lezen van de inhoud van de variabele (en ook hier zeggen we voortaan "het lezen van de variabele") gaat de inhoud niet verloren. - 11 -

opgave 5.2 Zet de voorgaande code in een HTML bestand en voer deze uit in een webbrowser. Zorg dat je goed begrijpt hoe de code werkt. declareren en initialiseren Variabelen kunnen niet zo uit het niets opduiken, we moeten ze bekend maken aan het systeem. Dat noemen we het declareren van een variabele. document.write(username + " "); Het voorgaande stuk code gaat dus niet werken. Bij het schrijven van de waarde van een variabele moet deze waarde namelijk gelezen worden en dat kan alleen als er van te voren iets in geschreven is. opgave 5.3 Zet de voorgaande code in een HTML bestand en voer deze uit in een webbrowser. Zet het console venster aan (F12) aan om te kijken wat er fout gaat. Een goede gewoonte is om een variabele bij de declaratie ook meteen een beginwaarde te geven. Dat noemen we initialiseren en dit zorgt ervoor, dat we zeker weten dat de variabele een zinvolle waarde bevat. Als we bij het declareren niet initialiseren, dan weten we feitelijk niet wat de inhoud van de variabele is op dat moment. In JavaScript heeft een variabele de waarde undefined totdat die variabele een waarde gegeven wordt. var username; document.write(username + " "); - 12 -

opgave 5.4 Zet de voorgaande code in een HTML bestand en voer deze uit in een webbrowser. Zorg dat je goed snapt wat er aan de hand is. In JavaScript kun je variabelen niet expliciet te declareren. Wanneer je een variabele voor de eerste keer een waarde geeft (initialiseren), dan wordt deze door JavaScript impliciet gedeclareerd. In JavaScript declareer je een variabele door er de eerste keer het keyword var voor te zetten. Je hebt hiervan al een aantal voorbeelden gezien. Je kunt variabelen in JavaScript ook declareren zonder het keyword var, maar dat doe je hoogst zelden. In Hoofdstuk 10 gaan we hier verder op in. var username = prompt("hoe heet je?"); In de code hierboven, declareren we dus een variabele met de naam username en de beginwaarde wordt bepaald door wat de gebruiker invoert. Je ziet hier dus ook meteen de initialisatie van de variabele, zoals het hoort. opgave 5.5 Maak een programma dat het volgende doet: 1. Vraag de voornaam van de gebruiker. 2. Vraag de achternaam van de gebruiker. 3. Maak een nieuwe variabele totalelengte aan die je op 0 zet. 4. Verander de waarde van totalelengte in de som van de lengtes van de voor- en achternaam van de gebruiker. 5. Druk de waarde van totalelengte af met een relevant stuk tekst ervoor. - 13 -

6 variabelen, types en vergelijking In het vorige hoofdstuk heb je gezien dat we dingen kunnen onthouden in variabelen, omdat ze een inhoud hebben. Misschien is het je daarbij opgevallen, dat de inhoud niet altijd van dezelfde soort is. Soms zit er een getal in een variabele zoals de lengte van een string, maar soms zit er ook gewoon een stuk tekst in. Tekst en getallen zijn toch heel andere dingen. Dus waarom maakt het JavaScript niet uit wat je erin stopt? Dat komt, omdat dat maar zo lijkt. Het maakt JavaScript wel degelijk uit wat je erin stopt, alleen is JavaScript heel vergevingsgezind richting de programmeur. De meeste scripttalen, waarvan JavaScript er 1 is, zijn zo vergevingsgezind. Programmeertalen zoals C, C++, C#, Java enzovoorts zijn dat echter niet. Daarom is leren programmeren in een scripttaal vaak het fijnst. Een ander woord voor soort is type. In programmeerjargon gebruiken we de term type. Aangezien we verschillende soorten waardes hebben, heeft iedere variabele een type. Getallen behoren uiteraard tot een ander type dan strings. Wanneer je een waarde in een variabele stopt, dan bepaalt JavaScript onder water automatisch het type van de variabele aan de hand van wat erin gestopt wordt. Stop je vervolgens iets van een ander type in diezelfde variabele, dan past JavaScript automatisch het type aan. Dat is nog eens handig! Bij eenvoudige programma's klopt dat, maar naarmate je complexere dingen gaat doen kan het ook een bron van fouten zijn. Daarom worden grote en complexe applicaties, bijvoorbeeld Microsoft Office of Photoshop, niet geschreven in scripttalen maar in programmeertalen. Juist omdat programmeertalen de programmeur dwingen goed na te denken over het type van variabelen. types In Javascript kennen we een aantal verschillende types, de belangrijkste zijn: Number String Boolean Array Object Met de eerste 4 krijg je zeker te maken, met Object mogelijk als je de web leerlijn kiest. Het type Number heb je al gebruikt zien worden. Tot nu toe hebben we alleen gehele getallen gebruikt, maar ook decimale getallen behoren tot dit type. Let op: Het decimale scheidingsteken is altijd een punt bij het programmeren in JavaScript! - 14 -

Ook het type String heb je al gezien. Het type Boolean klinkt misschien onbekend, maar je hebt er eigenlijk al heel veel mee gedaan. Een variabele van het type Boolean kan maar twee waardes bevatten, namelijk true en false. Het is dus een binair type en dat zou je moeten kennen van talstelsels en logische schakelingen. Op het type Array komen we later terug. Variabelen van dit type kom je voorlopig nog niet tegen. opgave 6.1 Maak een programma waarin je 3 variabelen aanmaakt en een begin waarde geeft (initialiseren). Iedere variabele is van een ander type, maak er 1 aan van het type Number, 1 van het type String en 1 van het type Boolean. Druk vervolgens de waardes van de variabelen af. Voer je programma vervolgens uit in een webbrowser. vergelijking Zoals je hebt gezien kennen we waardes toe aan variabelen met de = (toekenningsoperator). Hopelijk herinner je je uit de syntax, semantiek & lay-out module nog dat we vergelijken met de == en === (vergelijkingsoperatoren). Bij de == kijkt JavaScript of wat er links en rechts van de == staat gelijk aan elkaar is. Hierbij negeert JavaScript het type van wat links en rechts staat. Het resultaat daarvan is bijvoorbeeld, dat JavaScript het getal 0 en de string 0 gelijk vindt aan elkaar. Bij de === doet JavaScript hetzelfde als bij de ==, maar houdt wel rekening met de types. Als je dus iets van het type Number vergelijkt met iets van het type String, dan zullen ze nooit gelijk gevonden worden. In dit geval zal JavaScript het getal 0 dus niet gelijk vinden aan de string 0. - 15 -

opgave 6.2 Zet het volgende programma in een test HTML bestand en kijk wat het doet. var string0 = "0"; var getal0 = 0; if (string0 == getal0) document.write("gelijk "); else document.write("ongelijk "); Je ziet hier een voorbeeld van hoe JavaScript de inhoud van de variabelen gelijk vindt en ziet de vergevingsgezindheid van de == in JavaScript. JavaScript kiest altijd het gunstigste type voor een variabele in geval van twijfel. Je hebt dit al eerder gezien. Kijk maar eens naar de volgende code. var username = prompt("hoe heet je?"); document.write("hallo " + username + "! "); document.write("je naam bestaat uit "); document.write(username.length); document.write(" karakters. "); Hopelijk snap je, dat de inhoud van username.length van het type Number is en niet van het type String. Aan de document.write functie hoor je iets van type String mee te geven en toch wordt het getal gewoon goed afgedrukt. JavaScript transformeert het getal automatisch naar het type String voor je, want dat is waarschijnlijk de bedoeling. - 16 -

In de oplossing van opgave 4.5 heb je dit nog een keer gezien. Als het goed is heb je daar de volgende oplossing gekozen. document.write("je naam bestaat uit " + username.length + " karakters. "); Hier wordt de + als string concatenatie gebruikt, maar het type van username.length is dus geen String. Ook hier transformeert JavaScript het type, omdat dat de meest zinvolle actie is. Het is echter wel belangrijk, dat je snapt dat dit gebeurt! opgave 6.3 Hopelijk heb je de code van de vorige opgave nog open. Verander de == in een === en kijk wat er gebeurt als je de code uitvoert. Je ziet nu dat JavaScript de inhoud van de variabelen ineens niet meer gelijk vindt. meer vergelijkingsoperatoren Je kunt in JavaScript uiteraard meer doen, dan alleen kijken of twee dingen gelijk aan elkaar zijn. Hier volgt een lijst van de meest gebruikte vergelijkingsoperatoren: > Test of links groter is dan rechts. Houdt geen rekening met het type. >= Test of links groter dan of gelijk is aan rechts. Houdt geen rekening met het type. < Test of links kleiner is dan rechts. Houdt geen rekening met het type. <= Test of links kleiner dan of gelijk is aan rechts. Houdt geen rekening met het type.!= Test of links en rechts ongelijk zijn. Houdt geen rekening met het type.!== Test of links en rechts ongelijk zijn. Houdt wel rekening met het type. opgave 6.4 Maak een programma waarin je de gebruiker 2 getallen in laat voeren. Vervolgens kijkt het programma welk van de getallen het kleinst is en drukt dat getal af. Voer je programma vervolgens uit in een webbrowser. - 17 -

zelf het type veranderen Je ziet dat de >, >=, < en <= geen rekening houden met het type van de dingen die ze vergelijken. Dat kan heel vervelend zijn. Zo zal de string 0 bijvoorbeeld kleiner zijn dan het getal 1. Maar ook de string 12 zal kleiner zijn dan de string 2. Je ziet, dat het belangrijk is om goed te weten wat je vergelijkt. Soms weet je niet zeker welk type een variabele op een gegeven moment heeft. Daarom is het fijn, dat JavaScript de programmeur toestaat het type van een variabele op te vragen of zelfs te veranderen. Dat laatste heet type conversion. De functie om een type op te vragen heet typeof. Bijvoorbeeld: typeof "Jan"; // Resultaat is string. typeof 10; // Resultaat is number. typeof 3.14; // Resultaat is number. typeof false; // Resultaat is boolean. Om het type van een variabele te veranderen bestaan een aantal functies. Degene die je het meest nodig zult hebben zijn: String (of soms tostring) Number (of soms parseint of parsefloat) Het converteren van types wordt het best duidelijk door wat voorbeelden. var x = 113; // x-coordinaat String(x); // resultaat is de string 113 x.tostring(); // resultaat is de string 113 String(123); // resultaat is de string 123 (123).toString(); // resultaat is de string 123 String(123 + 33); // resultaat is de string 156 (123 + 33).toString(); // resultaat is de string 156 String(false); (false).tostring(); // resultaat is de string false // resultaat is de string false var x = "113"; // x-coordinaat Number(x); // resultaat is number 113 parseint(x); // resultaat is number 113 parsefloat(x); // resultaat is number 113-18 -

Number("3.14"); // resultaat is number 3.14 parseint("3.14"); // resultaat is number 3 parsefloat("3.14"); // resultaat is number 3.14 Number(""); // resultaat is number 0 parseint(""); // resultaat is number NaN parsefloat(""); // resultaat is number NaN Number(" "); // resultaat is number 0 parseint(" "); // resultaat is number NaN parsefloat(" "); // resultaat is number NaN Number("88 99"); // resultaat is number NaN parseint("88 99"); // resultaat is number 88 parsefloat("88 99"); // resultaat is number 88 Number(false); // resultaat is number 0 Number(true); // resultaat is number 1 In de meeste gevallen ga je genoeg hebben aan de String en Number functies, maar wanneer je de tostring functie gebruikt, dan moet je altijd haakjes om het getal of de getallen zetten. Je ziet dat bijvoorbeeld in (123 + 33).toString();. Bij String(123 + 33); wordt eerst de optelling gedaan en dan pas de conversie naar het type String. Wanneer je bij een Booleaanse waarde de tostring functie gebruikt, dan hoef je geen haakjes te gebruiken, maar zonder haakjes gaat de syntax highlighting in Notepad++ verkeerd. Je ziet dat de functie Number zich anders gedraagt dan parseint en parsefloat. Doorgaans gebruiken we het liefst de String en Number functies. De waarde NaN is de indicatie dat er een niet geldig getal in de variabele staat. Het type van de variabele is dan Number. - 19 -

opgave 6.5 Pak een paar voorbeelden uit code voor het converteren van types en druk het resultaat van die voorbeelden af in je webbrowser. Bijvoorbeeld: document.write(parseint("") + " "); opgave 6.6 Zet het volgende programma in een HTML bestand. Pas vervolgens de code aan, zodat de uitvoer van alle document.write functies true geeft. Let op: Je mag alleen type conversie functies toevoegen, dus bijvoorbeeld geen quotes handmatig weghalen. document.write(("true" === true) + " "); document.write(("10" === 10) + " "); document.write(("3.14" === 3) + " "); document.write(("" === 0) + " "); document.write((12 + 28 === "40") + " "); - 20 -

7 selectie In de syntax, semantiek & lay-out module en in het vorige hoofdstuk heb je al de theorie en een aantal voorbeelden van de selectie gezien. Zoals je intussen dus weet, is de selectie een complexe instructie en zijn er codeerafspraken over de layout. Zorg dat je deze tijdens het oefenen goed blijft gebruiken. Het is dus belangrijk om goed te beseffen, dat bij een selectie er altijd maximaal 1 pad wordt doorlopen. Als we naar een grafische representatie van een selectie kijken, dan zien we dat ook. Kijk maar naar de volgende 3 voorbeelden. Hier zie je een selectie met 1 pad; alleen het "ja" pad (true) bevat code en het "nee" pad (false) is leeg. Er kan nu uiteraard niet meer dan 1 pad doorlopen worden. In JavaScript ziet dit er als volgt uit. var koffergewicht = Number(prompt("Voer kg van koffer in.")); if (koffergewicht <= 20) document.write("alles is prima. "); Als het goed is, dan valt je op dat we de Number functie toepassen op het resultaat dat de gebruiker invoert. Dat komt, omdat de prompt functie altijd iets van het type String teruggeeft. We weten echter, dat de gebruiker een getal in moet voeren en daarom converteren we het zelf naar het type Number. - 21 -

Hier zie je een selectie met 2 paden. Je ziet dat deze naast elkaar staan om aan te geven dat er dus maar 1 van de 2 wordt uitgevoerd. In JavaScript ziet dit er als volgt uit. var koffergewicht = Number(prompt("voer kg van koffer in")); if (koffergewicht <= 20) document.write("u hoeft niet bij te betalen. "); else document.write("u moet bijbetalen. "); Dit is een nettere versie van het eerste programma, omdat alle mogelijkheden voor het gewicht van de koffer nu worden bekeken en dus ook kunnen worden afgehandeld. In het eerste programma gebeurt er niets als de koffer zwaarder is dan 20 kilogram. Dat kan erg zijn als er wel degelijk iets had moeten gebeuren. Daarom is het veilig om altijd een else te hebben in een selectie. Let op: Na de else mag NOOIT iets staan, ook geen conditie! Hier zie je een selectie met 3 paden. Je ziet dat deze allemaal weer naast elkaar staan om aan te geven dat er dus maar 1 van de 3 wordt uitgevoerd. In JavaScript ziet dit er als volgt uit. - 22 -

var koffergewicht = Number(prompt("voer kg van koffer in")); if (koffergewicht <= 20) document.write("u hoeft niet bij te betalen. "); else if (koffergewicht <= 40) document.write("u moet bijbetalen. "); else document.write("uw koffer is te zwaar! "); En zoals je weet, mag je dat ook compacter schrijven, zoals je nu gaat doen. opgave 7.1 Schrijf de voorgaande code compacter op zoals je geleerd hebt in de syntax, semantiek & lay-out module. De selectie zou intussen duidelijk moeten zijn, dus tijd om ermee te gaan oefenen. opgave 7.2 Maak een programma, dat de gebruiker vraagt een leeftijd als geheel getal in te voeren en afdrukt of iemand meer- of minderjarig is. opgave 7.3 Maak een programma, dat de gebruiker vraagt een 24 uurs tijdstip in hele uren in te voeren en afdrukt of het voor of na de middag (12 uur) is. - 23 -

Voor we naar de volgende opgave gaan, nog even een stukje herhaling over modulo rekenen. Je hebt dit al geleerd bij het bug fixen en software testen, maar het is misschien alweer ietwat weggezakt. Toch is modulo rekenen een heel belangrijk iets bij het programmeren. Zorg daarom, dat je het goed onder de knie hebt! Bij modulo rekenen bepalen we de rest van een integer deling (een deling van twee gehele getallen). De rest is het gehele getal dat we overhouden als we de noemer van de deling blijven aftrekken van de teller van de deling, totdat de teller kleiner is dan de noemer. Nog even een klein voorbeeld: 10 module 3 is gelijk aan 1. Immers: 10-3 is 7 en dat is groter dan 3 dus gaan we door. 7-3 is 4 en dat is groter dan 3 dus gaan we door. 4-3 is 1 en dat is kleiner dan 3 dus zijn we klaar en hebben we de rest gevonden. Nu even een nieuw weetje. Voor even getallen geldt, dat we bij integer delen door 2 een rest van 0 overhouden. Een oneven getal integer gedeeld door 2 heeft 1 als rest. In JavaScript wordt de modulo bewerking weergegeven door het procentteken (%). Met al deze wetenschap zou je de volgende opgave moeten kunnen maken. opgave 7.4 Maak een programma, dat de gebruiker vraagt een positief geheel getal in te voeren en afdrukt of het getal even of oneven is. - 24 -

8 herhaling Ook herhaling is al besproken in de syntax, semantiek & lay-out module. In dit hoofdstuk gaan we er niet veel dieper op in, maar ga je juist oefenen om de loops met teller onder de knie te krijgen. Je moet dit eerst goed beheersen voor je toe bent aan complexere loops. Het is mogelijk verstandig om het hoofdstuk over herhaling in de syntax, semantiek & lay-out module nog een keer door te nemen voor je verder gaat. Denk ook nu weer goed aan de codeerafspraken! In JavaScript bestaan veel soorten loops. De bekendste zijn de while-, for-, dowhile-, en repeat-loop. We gaan ons echter beperken tot de eerste 2, omdat die het meeste gebruikt worden. Met de while-loop heb je al geoefend, met de for-loop nog niet. Hopelijk heb je wel begrepen dat je de ene altijd om kunt schrijven in de andere. Overigens hoef je nooit een for-loop te gebruiken als je dat niet wilt. Je kunt feitelijk alles oplossen met een while-loop. Zoals gezegd, is de for-loop alleen een compactere manier van de loop opschrijven. Voor we verder gaan, ga je eerst zelf oefenen met het oplossen van een eenvoudig en bekend probleem waarvoor je een lus met een teller nodig hebt. opgave 8.1 Maak een programma, dat de getallen 1 tot en met 500 ieder op een nieuwe regel afdrukt. Nu ga je naar een iets moeilijker voorbeeld kijken. Stel we willen alle positieve drievouden (veelvouden van 3) onder de 100 afdrukken. Hoe pak je dat aan? Je weet, dat je drievouden kunt genereren door steeds drie op te tellen bij het vorige drievoud dat je gevonden hebt. Hier zie je het woord steeds staan. Dit soort signaalwoorden geven je hints over welk programmeerconcept je moet gebruiken. Het woord steeds duidt op een loop. Dus als je het kleinste drievoud hebt gevonden, dan kun je een loop maken die elke keer 3 optelt bij het vorige drievoud. Ook hier zie je weer een signaalwoord, namelijk vorige. Als je vorige ziet, dan weet je zeker dat je een variabele nodig hebt, je moet immers de vorige waarde onthouden. Dit programma lijkt dus heel erg op het programma dat je hebt gemaakt in de vorige opgave. - 25 -

Let goed op het commentaar in de code, dat geeft aan hoe de code geconstrueerd is. var drievoud = 3; // Zet beginwaarde op het eerste drievoud. // We moeten onder de 100 kijken, dus gebruiken < 100. // 100 zelf mag niet meer meedoen dus <= is fout! while (drievoud < 100) // Schrijf eerst het drievoud voordat je het volgende // drievoud bepaalt. // Anders vergeet je namelijk het eerste drievoud af te // drukken! // We maken hier ook weer gebruik van de automatische // type conversie van JavaScript. document.write(drievoud + " "); // Het volgende drievoud wordt bereikt door 3 bij het // vorige drievoud op te tellen. drievoud = drievoud + 3; // Schrijf dat we klaar zijn. Dat is handig om te zien, dat // we geen oneindige lus hebben gemaakt. In dat geval zien // we de tekst "klaar!" namelijk niet verschijnen. document.write("klaar! "); Feitelijk is de variabele drievoud de teller van de loop. We hadden de variabele ook teller kunnen noemen, maar drievoud is duidelijker in dit geval. for-loop We gaan je nu uitleggen hoe dit er in de for-loop vorm uitziet. In de while-loop met een teller zien we dat we voor de lus de teller de juiste beginwaarde moeten geven (initialisatie). Vervolgens krijgen we het keyword while met de conditie erachter. De laatste instructie van de loop is het verhogen van de teller. - 26 -

De truc bij de for-loop is dat de 3 delen, die in de alinea hiervoor genoemd zijn (initialisatie, conditie en teller verhogen), in 1 programmaregel worden samengevat. Dit is feitelijk een schending van onze codeerafspraak die zegt dat iedere instructie op een nieuwe regel begint. Bij de for-loop is het echter de bedoeling om deze codeerafspraak te schenden, anders heeft de constructie geen nut! We krijgen dan de volgende regel code die ter vervanging dient van de regel met de while. for (var drievoud = 3; drievoud < 100; drievoud = drievoud + 3) De 3 delen tussen de haakjes achter het keyword zijn dus achtereenvolgens. initialisatie van de teller conditie op de teller verhogen van de teller (of eventueel verlagen!) Bij de derde bullet zie je, dat je ook "omgekeerde" loops kunt maken waarin je de teller niet verhoogt, maar verlaagt. Daar gaan we dadelijk een voorbeeld van laten zien. Dus om er een for-loop van te maken, vervang je de regel met de while door de regel met de for zoals je hiervoor hebt gezien. Uiteraard haal je de instructies die nu tussen haakjes achter het for keyword staan weg uit het while-loop programma. Wat je overhoudt uit het while-loop programma neem je 1 op 1 over in het for-loop programma en dan ben je klaar. We laten eerst even het while-loop programma zonder commentaar en "klaar" melding zien. var drievoud = 3; while (drievoud < 100) document.write(drievoud + " "); drievoud = drievoud + 3; En dan nu wat je krijgt als for-loop programma. Zorg dat je goed snapt wat er is gebeurd. for (var drievoud = 3; drievoud < 100; drievoud = drievoud + 3) document.write(drievoud + " "); - 27 -

Nog even een tweetal opmerkingen. Het keyword var verhuist dus gewoon mee. Let bovendien op, dat de laatste instructie tussen de haakjes achter het for keyword niet gevolgd wordt door een puntkomma en spatie! opgave 8.2 Schrijf het programma uit de vorige opgave om, zodat je gebruik maakt van een for-loop. verkorte schrijfwijzen Omdat we bij een for-loop nu ineens 3 instructies achter elkaar schrijven, wordt de regel langer. Om die regel compacter te maken, kunnen we gebruik maken van een verkorte schrijfwijze voor de toekenningen van een waarde aan een variabele. Deze verkorte schrijfwijze is overigens niet alleen handig bij for-loops maar in het algemeen. Eén van de meest gebruikte toekenningen bij een variabele is de verhoging met 1. teller = teller + 1; Deze instructie kunnen we als volgt afkorten. teller++; Dit ziet er misschien vreemd uit, maar het went heel snel als je er een tijdje mee geoefend hebt en het bespaart ruimte en typewerk. Misschien kun je dan al raden hoe de verlaging met 1 van een variabele eruit ziet. teller = teller - 1; En dit kunnen we afkorten tot. teller--; - 28 -

Tot slot is er nog een manier waarop we rekenkundige bewerkingen (operatoren) zoals +, - en * kunnen afkorten. Dit is bijvoorbeeld handig als we moeten verhogen (of verlagen) met een getal groter dan 1. Hier wat voorbeelden. teller = teller + 3; teller = teller - 4; teller = teller * 6; Deze kunnen we afkorten tot. teller += 3; teller -= 4; teller *= 6; Deze verkorte schrijfwijze kun je gebruiken bij veel meer operatoren. Bij de hiervoor genoemde operatoren is het veilig, maar bij andere operatoren moet je goed uitkijken. Het wordt aangeraden om deze verkorte schrijfwijze alleen te gebruiken bij de hiervoor genoemde operatoren. Dat betekent dat we onze for-loop voor het berekenen van de positieve drievouden onder de 100 nog iets compacter kunnen maken. Kijk maar. for (var drievoud = 3; drievoud < 100; drievoud += 3) document.write(drievoud + " "); document.write("klaar! "); aflopende loops Soms wil je kunnen aftellen, bijvoorbeeld bij de lancering van een raket. In dat geval moet je feitelijk een "omgekeerde" of aflopende loop maken. In dat geval gaan we niet de teller verhogen, maar juist verlagen. Uiteraard heeft dat ook invloed op de initialisatie en de conditie van de loop. Stel we willen aftellen vanaf 10 tot en met 1 en dan de tekst Ignition! afdrukken. In de tekst zie je feitelijk al staan wat er met de initialisatie moet gebeuren. Er staat vanaf 10, dus we moeten op 10 initialiseren. We moeten tot en met 1 gaan, dus zolang de teller >= 1 is moet je de lus uitvoeren. - 29 -

Feitelijk hebben we dan alle ingrediënten voor het programma, kijk maar. We gebruiken vanaf nu overigens de verkorte schrijfwijzen die we hiervoor gezien hebben! var teller = 10; while (teller >= 1) document.write(teller + " "); teller--; document.write("ignition! "); Zo, genoeg gelezen, het is tijd om zelf aan de slag te gaan. Succes! opgave 8.3 Maak een programma, dat de getallen 1, 2, 4, 8, 16, 32, 64, 128 en 256 telkens op een nieuwe regel afdrukt. Je moet een while-loop gebruiken. opgave 8.4 Maak een programma, dat de tafel van 7 afdrukt. Elke regel van de tafel moet op een nieuwe regel in je webbrowser worden afgedrukt. Je moet een while-loop gebruiken. opgave 8.5 Maak een programma, dat alle positieve drievouden onder de 100 van hoog naar laag afdrukt. Elk drievoud moet op een nieuwe regel in je webbrowser worden afgedrukt. Je moet een while-loop gebruiken. - 30 -

opgave 8.6 Maak een programma, dat de getallen 1, 2, 4, 8, 16, 32, 64, 128 en 256 in omgekeerde volgorde telkens op een nieuwe regel afdrukt. Je moet een while-loop gebruiken. Uiteraard kunnen complexe instructies in complexe instructies staan. Je hebt al gezien, dat een selectie in een andere selectie kan voorkomen. Daar hebben we zelfs een verkorte schrijfwijze voor. Je ziet verder vaak, dat er een selectie in een loop voorkomt, maar ook loops in loops is heel normaal of een selectie met daarin een loop. opgave 8.7 Maak een programma, dat de gebruiker een bovengrens in laat voeren als positief geheel getal en alle even getallen onder die bovengrens afdrukt. Hierbij moet elk getal op een nieuwe regel staan. Je moet modulo rekenen en een while-loop gebruiken. En uiteraard ga je ook met de for-loop oefenen. opgave 8.8 Maak de vorige 5 opgaven nog een keer, maar gebruik nu een forloop in plaats van een while-loop. complexe lussen Tot nu toe heb je loops gezien en gemaakt die allemaal gebaseerd zijn op een teller. Er zijn echter nog veel meer manieren om een loop op te zetten. Een ander voorbeeld is op basis van een Booleaanse waarde. Laten we daar eens een voorbeeld van geven. Voor we dat doen even een intermezzo over gebruikersinvoer en -uitvoer. Tot nu toe heb je de prompt en document.write functies gebruikt. Dat ging goed, omdat we 1 keer invoer vroegen en daarna de uitvoer regelden. - 31 -

Als je echter invoer en uitvoer wilt afwisselen, dan werken prompt en document.write niet goed samen. Je kunt dan beter de alert functie gebruiken. Dat gaan we in het volgende voorbeeld dan ook doen. Het gebruik van de alert functie is niet moeilijk, want die lijkt op die van de document.write functie. We gaan een spelletje spelen. Het is het spelletje hoger-lager dat je ook al hebt gezien bij de syntax, semantiek & lay-out module. alert("we gaan het spel hoger-lager spelen."); alert("ik kies een getal tussen de 1 en 100.\nJa, de grenzen doen ook mee!"); alert("jij moet raden welk getal ik gekozen heb."); alert("als je het fout hebt, dan zeg ik of mijn getal hoger of lager is dan wat je geraden hebt."); var getalgeraden = false; var gekozengetal = Math.floor(Math.random() * 100) + 1; // Zolang het getal niet geraden is, moet de gebruiker // doorgaan met raden. while (getalgeraden === false) var usergetal = Number(prompt("Welk getal heb ik gekozen?")); if (usergetal === gekozengetal) getalgeraden = true; else if (usergetal < gekozengetal) // Te laag getal geraden. alert("mijn getal is hoger dan " + usergetal + "."); else // Te hoog getal geraden. alert("mijn getal is lager dan " + usergetal + "."); alert("juist, het getal is inderdaad " + gekozengetal + "."); In de document.write functie genereerden we HTML uitvoer en moesten we een regelovergang met doen. In de alert functie gebruiken we daarvoor de \n tekenreeks. Deze tekenreeks wordt in veel talen gebruikt om een regelovergang te forceren. In de variabele getalgeraden onthouden we of het getal geraden is. Voor de lus heeft de gebruiker nog niet geraden, dus het getal is nog niet geraden. Daarom is de initiële waarde van deze variabele false. - 32 -

In de variabele gekozengetal laten we de computer een geheel getal tussen 1 en 100 genereren. Dit moet inclusief de grenzen zijn, dus in het bereik [1.. 100]. Dat doen we als volgt: 1. De Math.random functie aangeroepen. Deze genereert een decimaal getal in het bereik [0.. 1) 2. Deze functie kan dus niet het getal 1 genereren! 2. Vermenigvuldig het gegenereerde getal met 100 en dan krijgen we een decimaal getal in het bereik [0.. 100). 3. We willen een geheel getal, dus we ronden naar beneden af met de functie Math.floor. Dan houden we een geheel getal over in het bereik [0.. 99]. 4. We tellen 1 op bij het resultaat, zodat we een geheel getal krijgen in het bereik [1.. 100]. En dat is wat we wilden bereiken. Zolang de gebruiker het getal niet raadt, verandert het programma niets aan de waarde van variabele getalgeraden en zal de loop steeds opnieuw uitgevoerd worden. Zo gauw de gebruiker echter het getal raadt, dan wordt variabele getal- Geraden op true gezet. Als daarna de conditie van de loop gecontroleerd wordt, dan is deze ineens false geworden (immers de waarde true is ongelijk aan de waarde false) en zal de loop eindigen. Dit werkt dus subtiel anders dan bij een teller, maar het algemene principe is hetzelfde. We hebben nog steeds een initialisatie van een variabele die nodig is voor de loop, al is dit geen teller meer. Om dit soort variabelen een naam te geven noemen we ze de loop-variabelen. Ook hebben we nog steeds een geldige conditie tussen haakjes achter het while keyword. We kunnen echter niet meer spreken van het verhogen of verlagen van een teller. In plaats daarvan spreken we nu over het manipuleren van de loop-variabele. Dit zijn algemenere termen, die we kunnen gebruiken als we over een willekeurig opzet van een loop spreken, dus ook over een loop op basis van een teller. Je moet deze termen kennen. opgave 8.9 Maak een programma, dat het eerste positieve drievoud afdrukt en vervolgens steeds vraagt of het volgende drievoud afgedrukt moet worden. Het volgende drievoud moet gegenereerd worden als de gebruiker het woord ja intypt. 2 De ) aan het einde geeft aan dat het getal 1 niet in het bereik ligt. - 33 -

9 functies Bij app oriëntatie heb je geleerd wat procedures zijn. Een functie is feitelijk hetzelfde als een procedure. Ook heb je al functies gezien bij bug fixen en software testen. JavaScript functies worden methodes (methods) genoemd, omdat JavaScript tegenwoordig een object georiënteerde taal is. Om even kort te herhalen wat je al zou moeten weten het volgende: Een functie is dan een stuk code waar we een naam aan geven. Door de naam van de functie in je code te gebruiken, roep je de code ervan aan en wordt die uitgevoerd. De naam van een functie is als het ware een afkorting voor het stuk code. Functies zijn handig omdat ze voorkomen dat je hetzelfde stuk code steeds opnieuw moet schrijven als je die code op meerdere plaatsen nodig hebt. Een functie aanroepen is minder werk en beperkt tevens de lengte van je code. Wanneer je bovendien duidelijke namen gebruikt wordt je code ook makkelijker te lezen. Dit alles draagt bij aan de overzichtelijkheid en maakt daarmee het onderhoud van de code makkelijker. Daarom is het belangrijk om functies op de juiste manier te gebruiken. Nu gaan we een stapje dieper. Zoals je al gezien hebt bestaan er in JavaScript al een heleboel functies die je gewoon aan kunt roepen. De makers van JavaScript hebben de bijbehorende code voor je geschreven. JavaScript functies horen altijd bij een entiteit. De naam van de entiteit staat voor de punt en de echte functienaam achter de punt. Dus in document.write is document de entiteit en write de echte functienaam. Je hebt ook functies gezien waar geen entiteit voor de functienaam staat. Dat komt, omdat we in die gevallen de entiteit niet hoeven te noemen. Voorbeelden zijn de prompt en alert functies. Feitelijk hoor je die als window.prompt en window.alert te schrijven, maar de window entiteit mag je weglaten. opgave 9.1 Maak een programma, dat 50 gehele getallen in het bereik [100.. 500] ieder op een nieuwe regel afdrukt. Gebruik een loop! Hint: Je kunt bij de code van hoger-lager spieken hoe je een random geheel getal genereert. - 34 -

Het mooie aan functies, buiten dat ze werk besparen en voor overzicht zorgen, is dat je er dingen aan mee kunt geven en dingen van terug kunt krijgen. Je hebt dit al gezien, maar we gaan uitleggen hoe dat werkt. Als je dat snapt, kun je ook zelf functies gaan definiëren. argumenten Wanneer je de prompt functie aanroep, dan ziet dat er bijvoorbeeld als volgt uit. prompt("hier de een of andere tekst."); Wat er tussen haakjes achter de functienaam staat noemen we de argumenten. Argumenten zijn dus de dingen die we aan de functie meegeven als we de functie aanroepen. Een functie kan 0 of meer argumenten hebben. Alle argumenten samen noemen we de argumentlijst. Wanneer een functie 0 argument mee moet krijgen is de argumentlijst dus leeg. Wanneer een functie 0 argumenten heeft, dan moet je nog steeds haakjes achter de functienaam zetten, anders snapt JavaScript het niet. Dit heb je gezien toen we een willekeurig getal wilden genereren. Math.random() Wanneer je aan een functie meer dan 1 argument mee kunt geven, dan worden de argument gescheiden door komma's. Daar heb je nog geen voorbeeld van gezien, maar een voorbeeld geven is niet zo moeilijk, omdat je aan document.write meerdere strings mee kunt geven die afgedrukt moeten worden. Tot nu toe hebben we de strings die we meegaven altijd netjes zelf aan elkaar geplakt met de +, maar dat hoeft niet. De volgende twee regels code doen namelijk precies hetzelfde. document.write("hallo " + username + "! "); en document.write("hallo ", username, "! "); Bij het aanroepen van een functie maken we de codeerafspraak dat na een komma in de argumentlijst altijd een spatie staat. - 35 -

resultaat Als we de prompt functie aanroepen, dan willen we graag weten wat de gebruiker invoert en dat liefst ook opslaan. Dat voorkomt namelijk dat we de gebruiker er nog een keer om moeten vragen. Dat ziet er, zoals je intussen zou moeten weten, zo uit. var watdefunctieteruggeeft = prompt("hier wat tekst."); Een functie kan dus of niets of wel iets teruggeven. Wat de functie teruggeeft noemen we het resultaat (in programmeerjargon return value). Dat levert 4 situaties op: 1. De functie geeft niets terug en dat vang je op in een variabele. In dat geval is de waarde van de variabele undefined. Feitelijk is dit niet zinvol, maar ook niet fout. De functie wordt nog steeds gewoon uitgevoerd. 2. De functie geeft niets terug en je vangt in je code ook niets op. Dit is zoals het hoort. De functie wordt nu gewoon uitgevoerd. 3. De functie geeft iets terug en dat vang je op in een variabele. Dit is zoals het hoort. De functie wordt uitgevoerd en het resultaat bewaar je, zodat je het verderop in je code kunt gebruiken. 4. De functie geeft iets terug, maar dat vang je niet op. Ook dit is doorgaans niet zinvol, maar ook niet fout. De functie wordt nog steeds uitgevoerd, maar het resultaat gaat verloren en kun je daarom ook niet gebruiken. Een voorbeeld waarin deze situatie wel zinvol kan zijn is de volgende: De aangeroepen functie doet iets zinvols en geeft vervolgens alleen terug of dat goed gegaan is of niet. Soms ben je niet geïnteresseerd in of het goed gegaan is of niet en dan kun je beslissen om het resultaat van de functie niet op te vangen. Meestal is het gebruik van functies vrij logisch en kun je aan de naam van de functie zien of deze iets teruggeeft of niet. Dus doe wat je denkt dat goed is. Er kan weinig fout gaan, zoals je hiervoor hebt gezien. opgave 9.2 Probeer zelf eens wat te spelen met JavaScript functies. Je kunt functies vinden op w3schools. Kijk daar bijvoorbeeld eens bij JS String en JS String Methods of JS Math. - 36 -

parameters Degene die de functie definieert bepaalt hoeveel argumenten er bij de aanroep aan meegegeven kunnen worden. Bij het definiëren van een functie moet de maker: De functie een naam geven. Definiëren hoeveel argumenten er aan meegegeven kunnen worden 3. Dit heet het definiëren van de parameters van de functie. Definiëren wat de functie terug gaat geven, het resultaat dus 4. De code van de functie maken. Bij de definitie van de functie spreken we dus over parameters, terwijl we bij het aanroepen van de functie spreken over argumenten. zelf functies definiëren Je hebt net gelezen wat je moet doen om een functie te definiëren. Wanneer je voor de web leerlijn kiest, ga je leren dat ook zelf doen. Voorlopig is het genoeg als je de functies die in JavaScript al bestaan kunt gebruiken. Als je nu toch al benieuwd bent naar hoe dit moet, dan kun je kijken op w3schools. 3 Bij JavaScript hoef je je niet te bekommeren om het type van de parameters. Bij programmeertalen zoals C, C++, C# en Java moet je dat wel. 4 Bij JavaScript hoef je je niet te bekommeren om het type van het resultaat. Bij programmeertalen zoals C, C++, C# en Java moet je dat wel. - 37 -

10 scope Als je aan het programmeren bent, dan wil je vaak dat het ene stuk code niet zomaar bij bijvoorbeeld de variabelen van een ander stuk code kan. Dat kan namelijk voor vervelende neveneffecten zorgen of voor onverklaarbaar gedrag. Daarom bestaat er in iedere taal het concept scope. Scope speelt een belangrijke rol bij variabelen, maar soms ook bij functies. Helaas wordt scope in iedere taal net iets anders gedefinieerd. Dus wat je hier leert over scope in relatie met JavaScript werkt helaas niet automatisch hetzelfde in andere talen! We gaan hier alleen in op de scope van variabelen. Dat kan, omdat functies in JavaScript ook gezien worden als variabelen. Ook dit is weer iets specifieks voor JavaScript en werkt anders in de meeste andere talen. De scope van een variabele bepaalt in welke delen van de code de variabele bekend is en dus gebruikt kan worden. De scope is of globaal of lokaal. Variabelen met een globale scope (vaak globale variabelen genoemd) zijn overal in de code binnen hetzelfde bestand bekend. Dat lijkt heel erg handig, maar in de praktijk kunnen globale variabelen leiden tot problemen en fouten. Je moet het gebruik ervan dus zoveel mogelijk beperken, al kun je ze soms niet vermijden. Variabelen met een lokale scope (vaak lokale variabelen genoemd) zijn in JavaScript alleen bekend in de functie waarin ze gedeclareerd worden. Een lokale variabele is dan ook een variabele die ín een functie gedeclareerd wordt. Een globale variabele is een variabele die niet ín een functie gedeclareerd wordt. Laten we eens naar een voorbeeld kijken. In de volgende code zie je een functie, genaamd televengetallenonder, die steeds het aantal even getallen bepaalt en afdrukt onder de waarde die eraan wordt meegegeven. Daarna wordt voor de getallen in het bereik [1.. 20] gekeken hoeveel even getallen er onder het dubbele van ieder getal in het bereik liggen. Dit is een zogenaamd speelvoorbeeld waarmee we het concept scope kunnen laten zien. Een speelvoorbeeld is een voorbeeld dat in de praktijk niet of weinig voorkomt, maar geconstrueerd is om iets specifieks te demonstreren over een concept. - 38 -