Lab Webdesign: Javascript 11 februari 2008

Transcriptie

1 H3: HERHALINGSLUSSEN EN LOGICA Om de voorbeelden niet nodeloos lang te maken, zullen we in het vervolg niet altijd 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 dit hoofdstuk 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 hoofdstuk vijf van deze cursus. Voorbeelden van getalconstanten zijn en (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. 1

2 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! 2

3 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".) 3

4 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 tellervariabele "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 4

5 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. 5

6 WHILE Een while statement voert een opdracht of een groep opdrachten telkens opnieuw uit tot de voorwaarde voor de while-lus onwaar wordt. var teller=1; while(teller<11) { document.write('<br>teller heeft de waarde '+teller); teller++; Dit stukje code plaatst 10 keer het zinnetje 'teller heeft de waarde ' op de webpagina. Het zinnetje wordt voorafgegaan door een <br>-tag en gevolgd door de waarde die in de variabele teller is opgenomen. De variabele teller heeft oorspronkelijk de waarde 1, telkens de while lus wordt doorlopen wordt teller met 1 opgehoogd. Wanneer teller 11 wordt, worden de statements in de while-lus niet meer uitgevoerd. teller++; is equivalent met teller = teller + 1; Wanneer teller oorspronkelijk 11 of meer zou zijn, worden de statements binnen de while-lus niet uitgevoerd! 6

7 DO...WHILE Bij een Do...While-lus wordt de voorwaarde om verder te lussen aangegeven na de lusopdrachten. Doordat deze voorwaarde pas na de statements wordt gecontroleerd worden de statements minstens 1 keer uitgevoerd! De opdrachten zullen dus ook uitgevoerd worden wanneer de initiële waarde van de variabele teller 11 of meer is. var teller=1; do{ document.write('<br>teller heeft de waarde '+teller); teller++; while(teller<11); FOR Een for-lus is lus-structuur waarbij je de initialisatie, lusvoorwaarde en eindstatements in een compact geheel plaatst. Doordat de eindstatements als derde argument in de lus opgenomen zijn, is het niet nodig de variabele teller binnen de lus op te hogen. for(var teller = 1; teller < 11 ; teller++){ document.write('<br>teller heeft de waarde '+teller); 7

8 FOR...IN Met een for...in lus kan je objecten doorzoeken. We zullen deze lusstructuur gebruiken wanneer we zelf javascript-objecten aanmaken. We kunnen de ingebouwde browser-objecten waarmee we reeds kennis hebben gemaakt nu reeds onderzoeken. document.write("<h2>onderzoek van het object navigator</h2>"); for(var veld in navigator){ document.write("<b>" +veld +"</b>: " +navigator[veld] +"<br>"); document.write("<hr>"); document.write("<h2>onderzoek van het object window</h2>"); for(var veld in window){ document.write("<b>" +veld +"</b>: " +window[veld] +"<br>"); document.write("<hr>"); document.write("<h2>onderzoek van het object document</h2>"); for(var veld in document){ document.write("<b>" +veld +"</b>: " +document[veld] +"<br>"); document.write("<hr>"); 8

9 BREAK Een lus kan je stoppen met het sleutelwoord break. Dit is handig wanneer je een lus gebruikt om een item te zoeken. Je kan wanneer de lusdoorgang succesvol was de lus beïndigen. for(var teller = 1; teller < 11 ; teller++){ document.write('<br>teller heeft de waarde '+teller); if(teller == 6) break; CONTINUE Met het sleutelwoord continue kan je ervoor zorgen dat de eropvolgende opdrachten binnen de huidige lusdoorgang niet meer worden uitgevoerd. Wanneer de voorwaarde voor het verder lussen nog is voldaan wordt de lus -anders dan bij het statement break- hernomen. for(var teller = 1; teller < 11 ; teller++){ if(teller == 6) continue; document.write('<br>teller heeft de waarde '+teller); 9

10 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. 1 0

11 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 dit hoofdstuk hebben we variabelen leren kennen als belangrijke bouwstenen van elk JavaScriptprogramma, we hebben gezien hoe je opdrachten kunt herhalen, en we geleerd hoe we opdrachten voorwaardelijk kunnen maken door middel van logische tests. In het volgende hoofdstuk zullen we het hebben over functies: zowel de functies die in JavaScript zijn ingebouwd als de functies die we zelf schrijven. 1 1

12 IF Om instructies uit te voeren wanneer een voorwaarde is voldaan gebruik je het if-statement. Je kan aan dit statement ook een else-tak koppelen: deze instructies worden uitgevoerd als de gestelde voorwaarde niet waar is. In deze toepassing wordt een berichtvenster getoond met de alert-methode van het window-object. Je hoeft het window-object niet expliciet te vermelden bij het tonen van een alert. \n zorgt in de alert voor een newline-karakter: het nemen van een nieuwe lijn. naamcursus = "Javascript"; prijs = 45.5; aantalleerlingen = 12; leerkrachtgevonden = false; document.write('<h3>cursus ' +naamcursus +'</h3>'); // if gevolgd door 1 statement if(prijs < 50) document.write('<p>de cursus is niet duur</p>'); // if gevolgd door meerdere statements if(aantalleerlingen <= 15){ document.write('<p>een kleine klas</p>'); alert('er zijn nog te weinig leerlingen\nmaak wat meer reclame!'); // if met een else-tak if(leerkrachtgevonden){ document.write('<p>er is reeds een leekracht voor deze cursus.</p>'); else { document.write('<p>er is nog <b>geen</b> leekracht voor deze cursus.</p>'); Opmerkingen: na het else-sleutelwoord kan je onmiddellijk een nieuw if-statement plaatsen. Je kan if-statements nesten: een if-statement binnen een ander if-statement. 1 2

13 SWITCH Om meerdere mogelijkheden te scheiden kan je gebruik maken van een switch-statement in plaats van meerder if-statements. Bij het switch statement moet je tussen haakjes een expressie invoeren. Het programma springt dan binnen het opgegeven programmagedeelte naar een bepaald label (een naam gevolgd door een : ) Alle statements eindigen met break;. Wanneer u geen break plaatst worden ook de statements uitgevoerd van de labels eronder! In Javascript mag u zoals uit het voorbeeld blijkt strings opgeven voor het switch statement, getalwaarden zijn natuurlijk ook toegestaan. Wanneer een label met de naam default in het switch statement wordt opgenomen worden de statements onder dit label uitgevoerd wanneer geen enkele case beantwoord aan de switchvoorwaarde. In dit voorbeeld wordt de methode prompt van het object window gebruikt om een invulvenster te tonen. naam = prompt("wat is je naam?","naam ingeven"); switch(naam) { case 'William' : document.write ('De naam is William'); break; case 'Pol' : document.write ('De naam is Pol'); break; case 'Sofie' : document.write ('De naam is Sofie'); break; default: document.write ('De naam is niet William, Pol of Sofie'); break; 1 3