Hand-out Introduction to Programming, werkcollege 4 Alex Reuneker (
[email protected]), 2012 1. Geneste if-statements (herhaling werkcollege 3) 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 1
JavaScript-code
als (ingevoerde gebruikersnaam juist is)
1
if (userName == “Willemijn”) { if (password == “cavia683!b”) {
2
als (ingevoerd wachtwoord juist is)
2
3
dan melding weergeven dat
3
het inloggen is geslaagd.
4
}
5
else {
4 5
6 7
anders dan melding weergeven dat
6
wachtwoord onjuist is.
7
anders
alert (“You‟re logged in.”);
alert (“Your password doesn‟t match.”); }
8
}
dan melding weergeven dat
9
else {
gebruikersnaam niet bekend is.
10 11
alert (“Your username is unknown.”); }
Let op dat anders op regel 4 in de pseudocode behoort bij als op regel 2, en niet bij als op regel 1. Dat geldt ook voor de JavaScript-code. Het else-statement op regel 5 hoort bij het if-statement op regel 2. Het else-statement op regel 8 hoort vervolgens bij het if-statement op regel 1. Hieruit blijkt temeer het belang van inspringen door middel van tabs. 2. Commentaar Commentaar:
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.
Single line comments:
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 / 2.2347;
// return-waarde is het aantal guldens maal eurokoers.
}
1
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 ) { var dateRate = new Date();
// Aanmaak van datumvariabele „dateRate‟.
dateRate.setFullYear(2012,12,9);
// Variabele dateRate vullen met huidige datum.
var euroToDollar = 1.29;
// Aanmaak variabele euroToDollar met // daarin de huidige wisselkoers.
return euros * euroToDollar;
// De return-waarde is het aantal euro‟s maal // variabele euroToDollar.
}
3. 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. 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.
Voorbeeld:
Het voorbeeld op de volgende pagina maakt het bovenstaande duidelijk.
2
JavaScript-code zonder globale variabelen 1
function calculateEuros () {
2
var dateRate = new Date();
3
dateRate.setFullYear(2012,12,9);
4
var dollarToEuro = 1.29;
5
var amount = parseInt(document.getElementById("amount").value);
6
alert(amount + " dollars is " + (amount / dollarToEuro) + " euro's.\n\nWisselkoers " + dateRate);
7
}
8
function calculateDollars () {
9
var dateRate = new Date();
10
dateRate.setFullYear(2012,12,9);
11
var euroToDollar = 1.29;
12
var amount = parseInt(document.getElementById("amount").value);
13
alert(amount + " euro's is " + (amount * euroToDollar) + " dollars.\n\nWisselkoers " + dateRate);
14
}
In de bovenstaande JavaScript-code kennen de variabelen het onderstaande bereik. Script function calculateEuros dateRate dollarToEuro amount (lokaal)
function calculateDollars dateRate euroToDollar amount (lokaal)
(globaal)
3
JavaScript-code met globale variabelen 1
var dateRate = new Date();
2
dateRate.setFullYear(2012,12,9);
3
var rate = 1.29;
4
var amount;
5
function getAmount() {
6
amount = parseInt(document.getElementById("amount").value);
7
}
8
function calculateEuros () {
9
alert(amount + " dollars is " + (amount / rate) + " euro's.\n\nWisselkoers " + dateRate);
10
}
11
function calculateDollars () {
12 13
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
vult globale variabele amount
amount function getAmount
(lokaal) function calculateDollars (lokaal)
function calculateEuros (lokaal)
(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 4 – buiten de functies (!) – als globale variabele gedeclareerd.
4
4. 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. JavaScript-code if-structuur 1
var subscription = “E”;
2 3
if (subscription == “A”) { chargeCosts(“A”);
4 5
}
6
else if (subscription == “B”) { chargeCosts(“B”);
7 8
}
9
else if (subscription == “C”) { chargeCosts(“C”);
10 11
}
12
else if (subscription == “D”) { chargeCosts(“D”);
13 14
}
15
else if (subscription == “E”) { chargeCosts(“E”);
16 17
}
18
else { alert(“No valid subscription entered.”);
19 20
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. JavaScript-code switch-structuur 1
var subscription = “E”;
2 3
switch (subscription) {
4
case “A”:
5
chargeCosts(“A”);
6
break;
7
case “B”:
8 9 10 11
chargeCosts(“B”); break; case “C”: chargeCosts(“C”);
5
12
break;
13
case “D”:
14
chargeCosts(“D”);
15
break;
16
case “E”: chargeCosts(“E”);
17 18 19
break; default:
20
alert(“No valid subscription entered.”);
21
break;
22
}
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. Syntaxis:
De switch-syntaxis is hieronder weergegeven. switch ( testgegeven ) { case match1 : statement1 ; break ; case match2 : statement2 ; 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 < 100). Daarvoor is een if-structuur nodig.
Bronnen Morrison, Michael (2008) Head First JavaScript. Sebastopol: O’Reilly.
6
