Hand-out Introduction to Programming, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012

Transcriptie

1 Hand-out Introduction to Programming, werkcollege Alex Reuneker 0. Geneste if-statements (herhaling werkcollege ) If in if in if : Er kunnen meerdere if-statements genest worden. Dat betekent dat een if-statement binnen een ander if-statement kan staan, zoals in onderstaand voorbeeld. Pseudocode JavaScript-code als (ingevoerde gebruikersnaam juist is) if (username == Willemijn ) { als (ingevoerd wachtwoord juist is) if (password == cavia!b ) { dan melding weergeven dat alert ( You re logged in. ); het inloggen is geslaagd. anders else { dan melding weergeven dat alert ( Your password doesn t match. ); wachtwoord onjuist is. anders dan melding weergeven dat else { gebruikersnaam niet bekend is. 0 alert ( Your username is unknown. ); Let op dat anders op regel in de pseudocode behoort bij als op regel, en niet bij als op regel. Dat geldt ook voor de JavaScript-code. Het else-statement op regel hoort bij het if-statement op regel. Het else-statement op regel hoort vervolgens bij het if-statement op regel. Hieruit blijkt temeer het belang van inspringen door middel van tabs.. Commentaar Commentaar: Single line comments: Commentaar is tekst die door de browser wordt genegeerd. Toch kan commentaar erg nuttig zijn, omdat commentaar de daadwerkelijke code kan verduidelijken. Zo kan als commentaar de werking van een stuk code (zoals een functie) worden opgenomen, maar ook informatie over de maker van de code. Het laatste geval is handig als met meerdere mensen aan een project wordt gewerkt. Kort commentaar kan worden opgenomen als single line comment met een dubbele forward slash, zoals hieronder. //De functie calculateeuros berekent een bedrag in euro s op basis van de parameter guldens. function calculateeuros ( guldens ) { return guldens /.; // return-waarde is het aantal guldens maal eurokoers.

2 Multiline comments: Langer commentaar kan worden opgenomen als multiline comment. Een multiline comment begint met de tekencombinatie /* en wordt afgesloten met de tekencombinatie */, zoals hieronder. /* De functie calculatedollars berekent een bedrag in dollars op basis van de parameter euros. De huidige koers van de dollar wordt opgeslagen in de variabele eurotodollar. In de variabele ratedate wordt de datum van de wisselkoers opgeslagen. Deze variabele wordt niet gebruikt in de berekening, maar zorgt ervoor dat duidelijk is hoe recent de gebruikte wisselkoers is. */ function calculatedollars ( euros ) { daterate.setfullyear(0,,); var eurotodollar =.; return euros * eurotodollar; // Aanmaak van datumvariabele daterate. // Variabele daterate vullen met huidige datum. // Aanmaak variabele eurotodollar met // daarin de huidige wisselkoers. // De return-waarde is het aantal euro s maal // variabele eurotodollar.. Locatie en scope van variabelen Lokale en globale variabelen: Alle variabelen kennen een scope of bereik. Het bereik (scope) is afhankelijk van de locatie van de (declaratie van de) variabele. Het bereik van variabelen is als volgt te kenmerken: In lokale variabelen worden tijdelijke gegevens opgeslagen, terwijl in globale variabelen gegevens worden opgeslagen voor de duur en het bereik van het gehele script. Voorbeeld: Zo is een variabele die binnen een functie wordt aangemaakt (gedeclareerd) alleen bruikbaar binnen die functie. Code die buiten de functie staat, kan er niet bij. Wanneer het wenselijk is dat code buiten een functie wel gebruik kan maken van een variabele die binnen die functie nodig is, dan dient die variabele als een globale variabele te worden gedeclareerd. Het voorbeeld op de volgende pagina maakt het bovenstaande duidelijk.

3 0 JavaScript-code zonder globale variabelen function calculateeuros () { daterate.setfullyear(0,,); var dollartoeuro =.; var amount = parseint(document.getelementbyid("amount").value); alert(amount + " dollars is " + (amount / dollartoeuro) + " euro's.\n\nwisselkoers " + daterate); function calculatedollars () { daterate.setfullyear(0,,); var eurotodollar =.; var amount = parseint(document.getelementbyid("amount").value); alert(amount + " euro's is " + (amount * eurotodollar) + " dollars.\n\nwisselkoers " + daterate); In de bovenstaande JavaScript-code kennen de variabelen het onderstaande bereik. Script function calculateeuros daterate dollartoeuro amount function calculatedollars daterate eurotodollar amount (globaal)

4 0 JavaScript-code met globale variabelen daterate.setfullyear(0,,); var rate =.; var amount; function getamount() { amount = parseint(document.getelementbyid("amount").value); function calculateeuros () { alert(amount + " dollars is " + (amount / rate) + " euro's.\n\nwisselkoers " + daterate); function calculatedollars () { alert(amount + " euro's is " + (amount * rate) + " dollars.\n\nwisselkoers " + daterate); In de bovenstaande JavaScript-code kennen de variabelen het onderstaande bereik. Script daterate rate amount vult globale variabele amount function getamount function calculatedollars function calculateeuros (globaal) Need to know: Variabelen dienen op een need to know-basis te worden gedefinieerd en gebruikt. Slechts code die binnen het bereik van de variabele ligt, mag er gebruik van maken. Gebruik dus lokale variabelen waar dat mogelijk is. In het bovenstaande voorbeeld hebben beide functies (calculateeuros en calculatedollars) de variabelen daterate, rate en amount nodig. De variabele amount wordt binnen de functie getamount gevuld, maar moet erbuiten ook bruikbaar zijn. Daarom wordt de variabele op regel buiten de functies (!) als globale variabele gedeclareerd.

5 . Controlestructuren met switch If-structuur: Een if-structuur kan erg handig zijn om te bepalen of een statement wel of niet moet worden uitgevoerd. Als er echter veel opties zijn die moeten worden gecontroleerd, dan kan een if-structuur inefficiënt en onoverzichtelijk worden. Zie het onderstaande voorbeeld. 0 0 JavaScript-code if-structuur var subscription = E ; if (subscription == A ) { chargecosts( A ); else if (subscription == B ) { chargecosts( B ); else if (subscription == C ) { chargecosts( C ); else if (subscription == D ) { chargecosts( D ); else if (subscription == E ) { chargecosts( E ); else { alert( No valid subscription entered. ); Switch-structuur: Een switch-structuur is, in de bovenstaande situatie, handiger en efficiënter, omdat de keuze ((else) if subscription ==) maar eenmaal hoeft te worden vermeld de switch. Alle mogelijke opties (A, B et cetera) worden cases genoemd en kunnen, zonder vermelding van de switch, als zodanig worden genoemd. Vergelijk het onderstaande script met het bovenstaande. 0 JavaScript-code switch-structuur var subscription = E ; switch (subscription) { case A : chargecosts( A ); case B : chargecosts( B ); case C : chargecosts( C );

6 0 case D : chargecosts( D ); case E : chargecosts( E ); default: alert( No valid subscription entered. ); Syntaxis: Elke mogelijke optie wordt genoemd als case. Het erop volgende statement vermeldt wat er moet gebeuren als de case geldig is. Het break-statement zorgt er vervolgens voor dat de erop volgende cases niet worden uitgevoerd. De default-case wordt uitgevoerd als geen van de voorgaande cases geldig is gebleken de default-case is te vergelijken met het else-statement. De switch-syntaxis is hieronder weergegeven. switch ( testgegeven ) { case match : statement ; break ; case match : statement ; break ; et cetera default : statementx ; break ; If versus switch: Een switch-structuur kan in minder complexe situaties gebruikt worden dan een ifstructuur. De switch-structuur is een betere keuze wanneer in het script moet worden gekozen tussen meer dan twee waarden zoals in het bovenstaande voorbeeld. Daarnaast kan in een switch/case-statement geen complexe expressie staan (zoals cost * BTW < 00). Daarvoor is een if-structuur nodig. Bronnen Morrison, Michael (00) Head First JavaScript. Sebastopol: O Reilly.