JavaScript voor beginners: Herhalingslussen en logica
In de eerste aflevering hebben we het gehad over de geschiedenis van JavaScript. Daarna zijn we kort ingegaan op de verschillen tussen deze taal en Java. Tenslotte hebben we gezien hoe je met behulp van één regel JavaScript de woorden "Hello, world" op het scherm kunt zetten, en hoe je die scriptregel opneemt in je HTML-pagina. Om ons geheugen nog even op te frissen, de uiteindelijke pagina zag er als volgt uit:<HTML>
<SCRIPT>
<!-- Afschermen voor oude browsers
document.write("Hello, world")
// Einde afscherming -->
</SCRIPT>
</HTML>Om de voorbeelden niet nodeloos lang te maken, zullen we in het vervolg niet steeds de SCRIPT-tags en de HTML-commentaarregels herhalen. Om de JavaScript-opdrachten --de regel document.write("Hello, world") in het voorbeeld hierboven-- in onze echte pagina's op te nemen, moeten we ze echter wel steeds toevoegen!
In deze aflevering zullen we zien hoe je in JavaScript herhalingslussen programmeert, en hoe je gebruik kunt maken van logische tests. Allereerst zullen we het echter hebben over "constanten", "variabelen", "expressies", en hun "gegevenstype".
Constanten en gegevenstypes
Ons eerste script hierboven zet een vaste tekst op het scherm. We noemen "Hello, world" daarom een constante, en wel: een constante van het type string. Naast strings kent JavaScript nòg enkele gegevenstypes: getallen en Booleans (of logische waarden).Stringconstanten zijn stukjes tekst tussen enkele of dubbele aanhalingstekens; 'Hello, world' mag dus ook (maar "Hello, world' of 'Hello, world" niet). Over strings zullen we het nog uitgebreid hebben in aflevering vijf van deze cursus.
Voorbeelden van getalconstanten zijn 12345 en 3.14159 (merk op dat JavaScript een punt gebruikt waar wij een komma schrijven). In JavaScript bestaan geen aparte gegevenstypes voor gehele getallen (in andere talen integer genoemd) en reële getallen (of reals). Je kunt bij het weergeven van getallen overigens ook gebruik maken van zogenaamde octale, hexadecimale of wetenschappelijke notatie, maar daar zullen wij in deze cursus verder geen aandacht aan besteden.
Voor Boolean-constanten tenslotte zijn er maar twee mogelijkheden: true en false.
Variabelen
Er is zeker een nuttige rol weggelegd voor constanten, maar in veel gevallen zou het handig zijn als je "iets" had waaraan je een waarde kon toekennen die later eventueel zou kunnen veranderen. Dat "iets" noemen we een variabele. De naam van een variabele moet beginnen met een letter, met het dollarteken ("$") of met het underscore-teken ("_"); op vervolgposities mogen ook cijfers staan. Voorbeelden van geldige variabele-namen zijn derhalve: test, _test, test123 en test$123. Voorbeelden van ongeldige variabele-namen zijn: 123test, "test" en test#123. Een subtiele, maar belangrijke bron van fouten is, dat JavaScript een onderscheid maakt tussen hoofdletters en kleine letters; test is dus niet hetzelfde als Test of TEST! Daarnaast geldt, dat de naam van een variabele niet gelijk mag zijn aan een van de zogeheten gereserveerde woorden van JavaScript, bijvoorbeeld het keyword "if" dat we verderop in dit artikel tegen zullen komen. De namen van variabelen kunnen een willekeurige lengte hebben, dus niets houdt ons tegen om steeds een betekenisvolle naam te kiezen: als we na een paar maanden ons script herlezen, is minimumleeftijd = 18 heel wat duidelijker dan m = 18!JavaScript maakt gebruik van "loose typing" hetgeen betekent dat we het gegevenstype van een variabele niet expliciet op hoeven te geven; het gegevenstype kan zelfs veranderen in de loop van het programma. Met de opdracht jaartal = 1998 kennen we een getalconstante toe aan de variabele jaartal. Verderop in het programma zouden we echter mogen schrijven: jaartal = "Sterfjaar Frank Sinatra". Waar dat nodig is, zorgt JavaScript automatisch voor omzetting naar het juiste gegevenstype.
We hoeven variabelen ook niet expliciet te "declareren" of op te geven zoals dat in bijvoorbeeld Pascal wel moet; een variabele "bestaat" zodra we er een waarde aan hebben toegekend. Het is echter wel mogelijk om een variabele te declareren met behulp van het gereserveerde woord "var". We kunnen bijvoorbeeld schrijven:
var minimumleeftijd = 18 Ook mogelijk is: var minimumleeftijd, dus zonder dat we direct een waarde aan de variabele toekennen. De variabele bestaat in dat geval wel, maar is niet gedefinieerd, en mag bijvoorbeeld niet gebruikt worden in zogeheten expressies (die zodadelijk aan de orde komen), anders krijgen we een foutmelding.
We kunnen ons voorbeeldscript nu herschrijven met behulp van een variabele. Eerst kennen we een waarde toe aan de variabele groet, en vervolgens tonen we de waarde van die variabele op het scherm:
groet = "Hello, world" document.write(groet) Merk op dat er in de tweede regel geen aanhalingstekens om groet staan: het gaat hier immers om de naam van onze variabele, en niet om een stringconstante. Zouden we wèl aanhalingstekens gebruiken, dan zou in plaats van de waarde van variabele groet (de woorden Hello, world) het woord groet op het scherm worden gezet! De twee JavaScript-opdrachten uit het voorbeeld staan elk op een aparte regel, een gebruik dat de leesbaarheid van programma's meestal ten goede komt. We mogen de opdrachten ook achter elkaar schrijven, alleen moeten we ze dan expliciet afsluiten met een puntkomma, dus:
groet = "Hello, world"; document.write(groet);
Expressies
We kunnen constanten en variabelen gebruiken om er expressies (of "uitdrukkingen") mee te maken. Het gegevenstype van een expressie hangt af van de gegevenstypes van de constanten en variabelen die we gebruiken.Als we constanten en variabelen van het type getal gebruiken in een expressie, zal die expressie zelf ook van het type getal zijn. Als we een getalvariabele creëren door middel van: x = 1, dan zal de expressie x + 1 het resultaat 2 opleveren. We kunnen dat resultaat toekennen aan een variabele y door middel van y = x + 1, waarna y een getalvariabele is geworden die de waarde 2 bevat.
Iets vergelijkbaars geldt voor strings. Als we schrijven: x = "Hello, " en vervolgens y = x + "world", dan is y een stringvariabele geworden met als waarde Hello, world.
Gebruiken we echter getallen en strings door elkaar heen, dan zijn de resultaten wat minder voor de hand liggend: JavaScript zet in zo'n geval namelijk eerst de getallen om naar strings. Als we een stringvariabele creëren door middel van: x = "1", dan zal de expressie x + 1 als resultaat niet het getal 2 maar de string "11" opleveren!
Met behulp van een expressie kunnen we ons voorbeeldscript wat interessanter maken. We gebruiken daartoe een stringvariabele, gebruiker, waaraan we "ergens" in het programma de naam van de gebruiker hebben toegekend.
gebruiker = "Laura" document.write("Hello, " + gebruiker) Dit script begroet de gebruiker nu dus met de eigen naam.
(Je kunt je afvragen wat er gebeurt als je Boolean-waarden en strings of getallen door elkaar heen gebruikt in een expressie. Het antwoord is, dat true in een getal-expressie wordt omgezet naar het getal 1, en in een string-expressie naar de string "true". Voor false zijn dat respectievelijk het getal 0 en de string "false".)
Herhalingslussen
Nu we weten wat variabelen zijn en hoe we er mee om moeten gaan, kunnen we wat interessantere dingen met JavaScript gaan doen. Ons eerste script was immers weinig spectaculair: het zette een tekstje op het scherm, maar daar hebben we JavaScript eigenlijk helemaal niet voor nodig --met gewone HTML gaat dat nog altijd even iets makkelijker!Iets anders wordt het, als we een tekst verschillende malen moeten tonen. Stel je eens voor dat we ons niet hebben gehouden aan de JavaScript-etiquette en dat we als straf duizend keer de regel "Ik zal verwijzen naar de oorspronkelijke auteur als ik een script kopieer" op het scherm moeten tonen. We kunnen dat natuurlijk voor elkaar krijgen met knippen en plakken (of een middagje intikken...), maar met JavaScript kan het veel makkelijker. We maken daarbij gebruik van een herhalingslus (in het Engels: een "loop"). Dat ziet er als volgt uit:
for (tel = 1; tel <= 1000; tel++)
document.write("Ik zal verwijzen naar de oorspronkelijke auteur als ik een script kopieer") De for-opdracht bevat drie elementen tussen de haakjes, te weten: een initialisatie van de teller-variabele "tel" (tel = 1), een voorwaarde voor uitvoering van de lus (tel <= 1000), en een opdracht voor het bijwerken van de teller-variable (tel++). Dit geheel wordt gevolgd door de opdracht die herhaald moet worden uitgevoerd. Het is ook mogelijk om meer dan een opdracht herhaald uit te voeren. In dat geval moeten we die opdrachten samenvoegen tot een "blok" door er de haakjes "{" en "}" om heen te zetten, bijvoorbeeld zo:
for (tel = 1; tel <= 1000; tel++)
{
document.write("Ik zal verwijzen naar de oorspronkelijke auteur als ik een script kopieer")
document.write("Ook zal ik leesbare namen gebruiken voor variabelen")
} Het inspringen van de opdrachten is niet verplicht, maar komt de leesbaarheid wel ten goede; desgewenst mag alles op een regel, mits we de opdrachten van elkaar scheiden door middel van een puntkomma:
for (tel = 1; tel <= 1000; tel++){document.write("Ik zal verwijzen naar de oorspronkelijke auteur als ik een script kopieer"); document.write("Ook zal ik leesbare namen gebruiken voor variabelen")} Voordat de lus wordt uitgevoerd, wordt de teller geïnitialiseerd, in ons geval: tel krijgt de waarde 1. Vervolgens wordt gekeken of aan de voorwaarde wordt gedaan, in ons geval: is tel kleiner dan of gelijk aan 1000? Is dat het geval, dan wordt de opdracht (of het blok met opdrachten) van de lus een keer uitgevoerd. Tenslotte wordt de teller-variabele bijgewerkt; tel++ is een verkorte schrijfwijze voor teller = teller + 1 (dit mogen we ook voluit schrijven in onze for-opdracht!), dus na de eerste uitvoering of "iteratie" van de lus krijgt tel de waarde 2.
Vervolgens wordt opnieuw gekeken of nog aan de voorwaarde wordt gedaan, de opdracht van de lus wordt weer uitgevoerd, de teller wordt weer bijgewerkt, enzovoort; dit gaat zo door totdat niet meer aan de voorwaarde wordt voldaan (zodra tel de waarde 1001 heeft bereikt, dus na de duizendste iteratie van de lus).
We moeten er wel voor zorgen dat we niet in een eindeloze lus terecht komen. Als tel de beginwaarde 1 krijgt en de voorwaarde luidt: tel > 0, terwijl we na elke iteratie de teller ophogen, dan blijven we altijd aan de voorwaarde voldoen!
In dit voorbeeld ging het om een lus die een vooraf bekend aantal keren moest worden uitgevoerd. Het is echter ook mogelijk om lussen een variabel aantal keren te laten uitvoeren. Dat kan door in de voorwaarde een variabele te gebruiken, bijvoorbeeld: tel <= maxaantal (waarbij die variabele natuurlijk wel eerst een waarde moet hebben gekregen).
We kunnen ook gebruik maken van een while-lus, bijvoorbeeld:
tel = 1
while (tel <= 1000)
{ document.write("Ik zal...")
tel++
} De while-opdracht bevat dus maar één element tussen de haakjes (te weten: de voorwaarde); we zijn zelf "verantwoordelijk" voor de toekenning van een beginwaarde en het ophogen van de teller. (Dit wordt in de praktijk overigens regelmatig vergeten!)
We kunnen "voortijdig" een lus beëindigen met behulp van de break-opdracht. Dit gaat meestal in combinatie met een van de logische tests die we nu zullen bekijken.
Logische tests
In de lussen was impliciet al sprake van een soort logische test: er werd namelijk gekeken of aan een bepaalde voorwaarde werd voldaan. We kunnen ook expliciet in ons programma tests uitvoeren; daartoe gebruiken we de if-opdracht en de verwante if...else-opdracht.De eenvoudigste versie van een if-opdracht ziet er als volgt uit:
i=1
if (i < 2) document.write("Kleiner!") De voorwaarde staat weer tussen haakjes, net als bij de while-opdracht. (JavaScript kent overigens, in tegenstelling tot bijvoorbeeld BASIC of Pascal, geen keyword "then".) Willen we meerdere opdrachten voorwaardelijk uitvoeren, dan moeten we er weer een blok van maken met de inmiddels bekende haken.
We kunnen zoals gezegd een logische test combineren met de break-opdracht om halverwege uit een lus te ontsnappen:
tel = 1
while (tel <= 1000)
{
document.write("Ik zal...")
if (tel == 500)
{
document.write("Ik ben het zat!")
break
}
tel++
}
document.write("Ik ga naar huis") Op het moment dat tel de waarde 500 heeft bereikt, schijven we een uiting van boosheid naar het scherm, en vervolgens wordt de break-opdracht uitgevoerd. Dit heeft tot gevolg dat het programma verder gaat met de eerste opdracht nà de lus, in ons geval: document.write("Ik ga naar huis"). Merk op dat de test voor gelijkheid in JavaScript bestaat uit twee =-tekens; een enkel =-teken wordt gebruikt voor de toekenning van een waarde aan een variabele.
De werking van de if...else-opdracht ligt nu waarschijnlijk voor de hand:
if (leeftijd < 12)
{
toegangsprijs = 5
duiken = false
}
else
{
toegangsprijs = 10
duiken = true
} Van de twee blokken wordt er slechts één uitgevoerd, afhankelijk van de vraag of variabele leeftijd een waarde heeft die kleiner is dan 12 of niet.
In deze aflevering hebben we variabelen leren kennen als belangrijke bouwstenen van elk JavaScript-programma, we hebben gezien hoe je opdrachten kunt herhalen, en we geleerd hoe we opdrachten voorwaardelijk kunnen maken door middel van logische tests. In de volgende aflevering zullen we het hebben over functies: zowel de functies die in JavaScript zijn ingebouwd als de functies die we zelf schrijven.