syntax, semantiek & lay-out

Transcriptie

1 2016 syntax, semantiek & lay-out F. Vonk versie

2 inhoudsopgave 1 inleiding syntax semantiek instructie sequentie selectie herhaling lay-out variabelen witruimte selectie herhaling wat heb je geleerd 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

3 1 inleiding Om software te kunnen maken moet je kunnen programmeren. Hiervoor is het belangrijk dat je snapt hoe je de structuur van een programma opzet en leest. De meeste computer- en programmeertalen zijn tekstueel (op tekst gebaseerd). Hiervan heb je al een voorbeeld gezien toen je met web oriëntatie bezig was. Je hebt ongetwijfeld gemerkt, dat een nette structuur opzetten bij een tekstuele taal moeilijker is dan bij een drag & drop taal, zoals bij GameMaker of App Inventor 2. Toch is de structuur heel belangrijk voor het succes van de code. De structuur bepaalt namelijk voor het overgrote deel de leesbaarheid en daarmee hoe makkelijk de code te veranderen en onderhouden is. Er zijn tools die je helpen je code een goede structuur te geven. Dat is prima, maar je moet het ook zelf kunnen. Het zelf leren opzetten van een nette structuur bevordert dat je een nauwgezette programmeur wordt. Welkom bij de module syntax, semantiek en lay-out. We gaan in deze module uitleggen wat de termen syntax en semantiek zijn en je de codeerafspraken leren voor de structuur van je code. Je zult stukken code tegenkomen die je mogelijk nog niet snapt, maar dat is niet erg. In deze module gaat het puur over de structuur van de code. In de volgende modules ga je leren hoe de code werkt en zelf code maken. 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. Er zijn ook onderwerpen die zeer belangrijk zijn. Deze zijn op de volgende manier aangegeven. belangrijk onderwerp Hier wordt uitleg gegeven over een belangrijk onderwerp. Dit soort onderwerpen zijn belangrijk bij het leren programmeren en ga je gedurende je jaren informatica nog nodig hebben. Let op, links in dit document hebben een rode kleur

4 Veel plezier en succes. 2 syntax Syntax is misschien een nieuwe woord, maar het is een begrip dat je allang kent vanuit de talen die je op school leert. Het is de spelling van de woorden van een programmeertaal. Als mensen iets lezen, dan denken ze wel eens: "Het is niet helemaal goed gespeld, maar ik snap wat er bedoeld wordt." Computers "denken" dit nooit! Als een computer iets niet kan lezen, dan zegt de computer dat het fout is en stopt. Het is bij het maken van code dan ook belangrijk om netjes te werken. De taal waarin je nu gaat leren werken heet JavaScript. Het is een hele populaire internet scripttaal en wordt in bijna alle websites gebruikt. Als je in JavaScript de wereld wilt groeten, dan kun je dat bijvoorbeeld als volgt doen. In het volgende stuk code is document.write een JavaScript functie die ervoor zorgt, dat we iets kunnen schrijven in onze webpagina. <!DOCTYPE html> <html> <head> <title> JavaScript test </title> </head> <body> <script type="text/javascript"> document.write("hello World! "); </body> </html> opgave 2.1 Maak een leeg HTML bestand aan, open Notepad++, kopieer de code in het bestand en run het in een webbrowser. We hebben het hiervoor over de juiste syntax (spelling) gehad. Je gaat nu kijken wat er gebeurt als je een spellingsfout maakt

5 opgave 2.2 Verander in de code in Notepad++ het woord "write" in "wirte" en kijk wat er gebeurt. Als het goed is, dan zie je nu ineens geen tekst meer. Opmerkelijk is, dat je niet eens een melding krijgt dat er iets fout is in je code. Dat is het lot van de programmeur. Veel ontwikkelomgevingen zijn niet bijzonder gebruiksvriendelijk. Daarom is het zo belangrijk dat je netjes leert werken! Toch kun je je webbrowser wel zover krijgen om je de fout te laten zien. Bij informatica gaan we ervan uit dat je Firefox of Chrome gebruikt, dus de uitleg hierna werkt mogelijk niet of anders in andere webbrowsers. opgave 2.3 Druk in je webbrowser op de F12 toets en kijk wat er gebeurt. Als het goed is zie je nu, dat het debug deelvenster geopend wordt in je webbrowser. Dit deelvenster staat meestal onder de webpagina, maar kan ook links of rechts staan. Dat hangt af van hoe je webbrowser is geconfigureerd. In Firefox zie je het volgende (kan per versie ietwat verschillen)

6 Als het goed is, dan is de Console tab actief. Als dat niet zo is, dan moet je hem even aanklikken. In deze tab krijg je foutmeldingen te zien. Bovendien kun je er ook zelf tekst naar toe schrijven, met de console.log functie, die je niet te zien krijgt in de webpagina. Dat is handig als je fouten moet zoeken in je code die geen syntax fouten zijn. In Chrome zie je het volgende (kan per versie ietwat verschillen). Ook hier moet je de Console tab even aanklikken als deze nog niet actief is. Je ziet dat je in Firefox nog een extra fout krijgt, die kun je nu negeren. Het komt er in ieder geval op neer, dat "wirte" geen functie is die JavaScript kent. Je hebt immers een typefout gemaakt. De straf is, dat je geen uitvoer meer ziet en zelf op zoek moet naar de fout. Gelukkig geeft de omgeving helemaal rechts wel aan op welke regel je de fout hebt gemaakt, namelijk regel 8. Firefox geeft ook nog aan op welk karakter in de regel de fout zit namelijk 13. Computers zijn niet vergevingsgezind, dus nogmaals, werk netjes! We zijn op het moment niet bezig om een nette webpagina te maken. Daarom gaan we onze HTML syntax uitkleden tot alleen de nodig elementen. Dat maakt alles wat overzichtelijk als je code gaat schrijven en ziet er als volgt uit. document.write("hello World! "); Dit is niet helemaal netjes, maar wel een stuk overzichtelijker. Voor nu mag dit, maar als je straks de web leerlijn kiest en echte opdrachten gaat maken mag het natuurlijk niet meer. Let er wel op dat je bestand nu de extensie html moet hebben, anders werkt het niet

7 syntax Syntax is dus hoe je de woorden schrijft die door de taal zijn gedefinieerd zijn. Dit is dus niet anders dan spelling bij Nederlands of een andere natuurlijke taal. Het grote verschil met natuurlijke taal is dat computers de taal lezen en geen fouten toestaan! JavaScript definieert dus een heleboel woorden, maar hoe zit het dan met woorden die je zelf wilt gebruiken. Je hebt net immers de woorden "Hello" en "World" gebruikt. Die woorden kent JavaScript niet, dus hoe geven we aan dat JavaScript ze moet negeren? Dat doen we, zoals je hiervoor al gezien hebt, door ze tussen enkele of dubbele quotes te zetten. Hiervoor hebben we dubbele quotes gebruikt. Quotes geven aan JavaScript aan dat het niet moet proberen te snappen wat er tussen de quotes staat. Dat betekent ook dat JavaScript niet gaat zeuren over spellingsfouten in wat tussen de quotes staat. Voor JavaScript maakt het niet uit of je "Hello World!" of "ehlol roldw!" intypt. Wat er tussen de quotes staat is, voor JavaScript, een willekeurig stuk tekst en in het Engels noemen we dat een string. Tot slot hebben we nog die rare tag, die we tussen de quotes hebben staan. Als het goed is, herinner je je van web oriëntatie nog, dat dit in HTML een regelovergang veroorzaakt. Wat we met document.write feitelijk doen is HTML naar de webbrowser schrijven, vandaar dat we de tag moeten gebruiken om een nieuwe regel te forceren. Wat we ook hadden kunnen doen is onze tekst in een paragraph element kunnen zetten. document.write(" Hello World! "); Je ziet dat aan het einde van de regel code een puntkomma staat. Deze puntkomma is niet strikt noodzakelijk in JavaScript, maar wel in een heleboel andere talen. Daarom maken we bij deze de afspraak dat we de puntkomma wel gaan gebruiken. We zetten in het Nederlands immers ook altijd een punt achter de zin! - 7 -

8 3 semantiek Het programma uit het vorige hoofdstuk bestaat uit 1 regel code. Zo'n regel code noemen we een statement of instructie. Met een programma van 1 regel kun je meestal niet bijzonder veel nuttige dingen doen. Gelukkig is het mogelijk om meerdere instructies achter elkaar te schrijven en zo een groter programma te maken. Zo'n reeks instructies noemen we een sequentie. Feitelijk is een computerprogramma niets anders dan een recept voor een computer. Je kunt het vergelijken met een kookrecept voor mensen. Ook daarin wordt stapsgewijs uitgelegd wat je moet doen om het overheerlijke gerecht uit het recept op tafel te krijgen. Elke stap uit het recept kun je zien als een instructie in het computerprogramma. Net als in een recept moeten de instructies in een computerprogramma in de goede volgorde staan en moeten constructies in een instructie correct zijn. Een computerprogramma moet een logisch en correct geheel zijn. Om hier voor te zorgen heeft iedere taal semantiek. Dit zijn de afspraken over hoe de code geconstrueerd moet worden in een taal. Als we dit met natuurlijk taal vergelijken zouden we kunnen spreken van grammatica. In het programma uit het vorige hoofdstuk zagen we bijvoorbeeld, dat we schreven document.write. Wat nu als we write.document hadden ingetypt? We hebben dan geen spellingsfouten gemaakt, maar toch zal de webbrowser een foutmelding geven. Het is namelijk zo dat de write functie onderdeel is van de document entiteit en niet andersom. Dit is een semantiekafspraak. Het is te vergelijken met in het Nederlands schrijven "De hond is speels." en niet "Speels de hond is." Naarmate je meer leert over programmeren, ga je meer en meer semantiekafspraken zien. Zorg dat je ze goed begrijpt, want ze zijn essentieel om goed te leren programmeren. De instructie en sequentie zijn zogenaamde programmeerconcepten en het zijn niet de enige. Andere belangrijke programmeerconcepten zijn bijvoorbeeld de functie (of procedure), selectie en de herhaling. Ieder programmeerconcept heeft zijn eigen syntax en semantiek. Laten we eens een aantal programmeerconcepten bekijken. 3.1 instructie De instructie die we in het vorige hoofdstuk hebben gezien bestaat uit 1 regel. We noemen het een eenvoudige instructie. Een computerprogramma bestaat voor het grootste deel uit eenvoudige instructies

9 Een eenvoudige instructie wordt, zoals we hiervoor afgesproken hebben, afgesloten met een puntkomma. Net als we af hebben gesproken een zin in het Nederlands af te sluiten met een punt. Er bestaan echter ook complexe instructies die we verderop gaan zien. Een complexe instructie bevat bijna altijd één of meerdere eenvoudige instructies. Eenvoudige instructies kunnen dus genest zitten in complexe instructies. Dit is te vergelijken met het nesten van HTML elementen zoals je dat gezien hebt bij web oriëntatie. In natuurlijke taal ken je dit ook in de vorm van één of meerdere bijzinnen, die bij een hoofdzin horen. Complexe instructies, zoals je verderop ziet, worden niet afgesloten met een puntkomma. 3.2 sequentie Een sequentie is dus een serie instructies die één voor één en in volgorde van boven naar beneden worden doorlopen. Computers lezen gelukkig net zoals wij, van links naar rechts en van boven naar beneden. De instructies in een sequentie kunnen zowel eenvoudige als complexe instructies zijn. Feitelijk vormen de eenvoudige instructies in een complexe instructie ook weer een (deel)sequentie. 3.3 selectie Een selectie is een keuze moment. De computer moet hier kiezen welk pad van de code het gaat doorlopen. Bij een selectie wordt dus 1 pad uitgevoerd en het andere overgeslagen. Het is 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 het volgende voorbeeld. 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

10 var koffergewicht = Number(prompt("Voer kg van koffer in.")); if (koffergewicht <= 20) document.write("alles is prima. "); Wat Number en prompt precies doen weet je nog niet, dat komt in de volgende module. Voor nu is het genoeg als je snapt hoe een eenvoudige selectie eruit ziet. In JavaScript ziet een selectie er als volgt uit. if (conditie) sequentie1 else sequentie2 Als conditie waar (true) is, dan wordt sequentie 1 uitgevoerd. Anders, dus wanneer conditie niet waar (false) is, wordt sequentie 2 uitgevoerd. Let op: Na de else mag NOOIT iets staan, ook geen conditie! Dan nu een grafisch voorbeeld met twee paden bij de selectie. 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

11 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. "); De selectie is een complexe instructie met zijn eigen syntax en semantiek. De woorden if en else zijn woorden die Javascript kent, vergelijkbaar met de woorden document en write. Toch zijn if en else subtiel andere woorden. Het zijn namelijk taalconstructies (keywords) en dat zijn document en write niet. De volgende afspraken zijn universeel verplicht bij een selectie in JavaScript: Na de if staat een conditie die true of false is. Hier komt wat je geleerd hebt bij logische schakelingen van pas. De conditie staat altijd tussen haakjes. Als je de haakjes vergeet, dan beschouwt JavaScript dit als een semantiekfout en laat geen uitvoer zien. De else is optioneel. Als er geen else is, dan wordt er niets gedaan als de conditie false is. Als je een else gebruikt, dan mag er direct achter de else geen conditie staan. De volgende afspraken maken we om de code leesbaar te houden. Als je op het internet zoekt, dan ga je code vinden die afwijkt van deze afspraken en die toch correct is. Wij gaan ons bij informatica echter aan de volgende afspraken houden: Tussen de if en de openingshaak van de conditie staat altijd een spatie. Na de sluithaak van de conditie bij de if komt altijd een code blok. Dat wil zeggen, dat de sequentie die bij de if tak hoort, altijd tussen accolades staat. Ook als die sequentie uit slechts 1 instructie bestaat! Als je een else gebruikt, dan komt na de else altijd een code blok. Dat wil zeggen, dat de sequentie die bij de else tak hoort, altijd tussen accolades staat. Ook als die sequentie uit slechts 1 instructie bestaat! Zoals je ziet een heleboel afspraken voor zo'n simpel programmeerconcept. Zorg dat je ze goed kent!

12 Laten we eens naar een concreet voorbeeld kijken. if (navigator.language == "nl") document.write("taal is Nederlands. "); else document.write("vreemde taal ingesteld. "); In het voorbeeld vragen we de taal van de webbrowser op via de language eigenschap van de navigator entiteit. Daarna kijken we of de taal Nederlands is. Via internet kunnen we opzoeken dat in dat geval de string "nl" ingesteld staat in de language eigenschap. Dus ondanks dat we maar 1 instructie hebben bij zowel de if als de else, gebruiken we toch netjes accolades om de code leesbaar te houden. In het volgende voorbeeld is het gebruik van accolades universeel verplicht. if (navigator.language == "nl") document.write("taal is Nederlands. "); document.write("nl is de taalcode. "); else document.write("vreemde taal ingesteld. "); document.write(navigator.language); document.write(" is de taalcode. "); Als je goed naar de code hebt gekeken, dan zie je nog iets vreemds. In de conditie gebruiken we niet =, maar == om dingen met elkaar te vergelijken. Dit is voor veel beginnende programmeurs vreemd en lastig, maar een eigenschap van heel veel talen

13 vergelijken in JavaScript In JavaScript heb je twee manieren om dingen met elkaar te vergelijken. De == (dubbele is) en de === (driedubbele is). Wanneer je een = (enkele is) gebruikt in een vergelijking, dan gaat het programma 9 van de 10 keer fout en dat is de ergste vorm waarop het fout kan gaan. Als het programma namelijk fout gaat, dan wil je dat het altijd en op dezelfde manier fout gaat (reproduceerbaarheid). Reproduceerbaarheid is erg belangrijk bij het vinden en oplossen van fouten. De === is een bijzondere manier van vergelijken waarbij JavaScript ook kijkt of de dingen, die vergeleken worden, gelijksoortig zijn. De selectie is 1 complexe instructie. In het laatste voorbeeld zitten hierin 5 eenvoudige instructies, verdeeld over twee paden. Het if pad bevat een sequentie van 2 eenvoudige instructies en het else pad 3 eenvoudige instructies. Wat nu als je uit meer dan 2 paden wilt kiezen? Gelukkig kun je in een complexe instructie ook andere complexe instructies zetten. We kunnen selecties dus nesten. Dat ziet er bijvoorbeeld als volgt uit. if (navigator.language == "nl") document.write("taal is Nederlands. "); else if (navigator.language == "en") document.write("taal is Brits. "); else document.write("vreemde taal ingesteld. ");

14 Voor 3 paden is de voorgaande oplossing nog te doen. Als we echter meer keuzes toevoegen, dan moeten we steeds verder inspringen en wordt de code onoverzichtelijk. We mogen daarom ook de volgende afgekorte schrijfwijze gebruiken. if (navigator.language == "nl") document.write("taal is Nederlands. "); else if (navigator.language == "en") document.write("taal is Brits. "); else document.write("vreemde taal ingesteld. "); Hier zondigen we feitelijk tegen de afspraak we na een else een code blok moeten gebruiken en dus accolades. Deze uitzondering is echter verdedigbaar met het oog op de leesbaarheid van de code. Dat was immers de reden dat we de afspraken in eerste instantie hebben gemaakt. Doorgaans gebruiken we dus de laatste oplossing, ook al hebben we maar 3 paden. 3.4 herhaling Het programmeerconcept herhaling zie je in veel vormen. Binnen 1 taal zijn er meestal ook meerdere vormen. Bovendien bieden verschillende talen vaak verschillende mechanismes aan. Daarnaast is het concept herhaling voor veel mensen lastig te visualiseren en daarom moeilijk te begrijpen. Het is echter wel een essentieel en krachtig programmeerconcept dat je moet beheersen om goed te leren programmeren. Dus zorg dat je het onder de knie krijgt. Gelukkig is er 1 vorm van herhaling die redelijk universeel is. Deze heet de whileloop. Herhaling wordt vaak loop (lus) genoemd door programmeurs. Daarom gaan we vanaf nu ook het woord loop gebruiken

15 Laten we maar meteen in het diepe duiken en kijken hoe een while-loop er in JavaScript uitziet. while (conditie) sequentie Zolang conditie waar (true) is, dan wordt sequentie uitgevoerd. Zo gauw conditie niet meer waar (false) is, dan stopt de loop en wordt de instructie na de loop uitgevoerd als die er is. We noemen sequentie ook wel de loopcode. Dat ziet er redelijk makkelijk uit en dat is meteen het verraderlijke. Er staat namelijk: "Zolang conditie waar (true) is". Dat impliceert een tijdsaspect; oftewel er komt een tijd waarop de uitkomst van de conditie false is. De uitkomst van de conditie moet gedurende de uitvoering van de code (gedurende de tijd) dus veranderen. Als dat namelijk niet gebeurt, dan duurt de loop eeuwig en dat is meestal niet wat je wilt. Een loop die niet eindigt, noemen we een oneindige lus. Dus hoe zorgen we ervoor dat de uitkomst van de conditie verandert? Daar zit de moeilijkheid. Dat kan namelijk op oneindig veel mogelijkheden. Door veel te programmeren (ervaring op te doen) leer je er steeds meer kennen en word je steeds beter in programmeren. Maar laten we eens met een veel gebruikte en relatief eenvoudige manier beginnen: het gebruiken van een teller (counter). Stel je wilt de getallen 1 tot en met 5 onder elkaar afdrukken in onze webbrowser. Je kunt dan de volgende eenvoudige oplossing gebruiken. document.write("1 "); document.write("2 "); document.write("3 "); document.write("4 "); document.write("5 "); Je hebt nu een sequentie met daarin 5 instructies. Dat lijkt geen probleem, maar wat nu als je niet de getallen 1 tot en met 5 maar 1 tot en met 500 af wilt drukken? In dat geval werkt de voorgaande oplossing niet meer zo goed, want dan krijg je ineens een sequentie met 500 instructies. We zeggen dan dat de oplossing niet opschaalt naarmate het probleem complexer wordt

16 Als je goed naar het probleem kijkt, dan zie je dat we beginnen bij 1 en daarna steeds hetzelfde doen. We tellen namelijk elke keer 1 op bij het vorige dat we afgedrukt hebben. Als we steeds hetzelfde doen, dan is een loop dé oplossing. We kunnen de voorgaande oplossing dus ook als volgt opschrijven. var teller = 1; while (teller <= 5) document.write(teller); document.write(" "); teller = teller + 1; Wat we hier doen is een variabele gebruiken om in te tellen. Logischerwijs heet deze variabele dan ook teller. Wat een variabele precies is, wordt in een volgende module uitgelegd. Je kunt het voorlopig zien als een doosje waar je iets, in dit geval een getal, in kunt bewaren en uit op kunt halen. In de nieuwe oplossing gebeurt het volgende: 1. Stop het getal 1 in de variabele. 2. Kijk of in de variabele een getal kleiner of gelijk 5 staat. 3. Zo ja, schrijf wat er in de variabele staat in de webbrowser. Zo nee, stop de loop (en in dit geval het programma, omdat er na de loop niks meer staat). 4. Schrijf een HTML regelovergang. 5. Verhoog wat er in de variabele staat met Ga naar stap 2. opgave 3.1 Kopieer de code van de oplossing met de while-loop in een HTML bestand en voer het uit in een webbrowser. Pas daarna de code zo aan, dat de getallen 1 tot en met 50 worden afgedrukt. Die aanpassing uit de vorige opgave is makkelijk. Je hoeft maar 1 getal aan te passen in de code en je bent klaar. Dat is makkelijker, sneller en minder foutgevoelig dan 45 nieuwe instructies toe te moeten voegen. Dat is de kracht van de loop

17 opgave 3.2 Probeer de code nu eens zo aan te passen, dat alleen de even getallen tot en met 50 worden afgedrukt. Je merkt dat ook deze aanpassing weinig werk is. Zo flexibel zijn loops. De while-loop is een complexe instructie met zijn eigen syntax en semantiek. De woord while is wederom een keyword voor JavaScript. De volgende afspraken zijn universeel verplicht bij een while-loop in JavaScript: Na de while staat een conditie die true of false kan zijn. Hier komt wat je geleerd hebt bij logische schakelingen van pas. De conditie staat altijd tussen haakjes. Als je de haakjes vergeet, dan beschouwt JavaScript dit als een semantiekfout en laat geen uitvoer zien. De volgende afspraken maken we om de code leesbaar te houden. Als je op het internet zoekt, dan ga je code vinden die afwijkt van deze afspraken en die toch correct is. Wij gaan ons bij informatica echter aan de volgende afspraken houden: Tussen de while en de openingshaak van de conditie staat altijd een spatie. Na de sluithaak van de conditie bij de while komt altijd een code blok. Dat wil zeggen, dat de loopcode altijd tussen accolades staat. Ook als die loopcode uit slechts 1 instructie bestaat! Zoals je ziet weer een aantal afspraken voor een programmeerconcept. Zorg dat je ze goed kent!

18 4 lay-out Lay-out is belangrijk en is daarom altijd onderdeel van de codeerafspraken die mensen maken als ze samen aan een project werken waarvoor code geschreven wordt. Bij informatica ga je ook nog vaak samenwerken met klasgenoten. Bovendien zal het wel eens voorkomen dat je hulp wilt vragen aan een klasgenoot of je leraar. Het is dan fijn als degene, aan wie je hulp vraagt, je code snel kan lezen. Daarom gaan wij voor het vak informatica ook codeerafspraken maken. In het vorige hoofdstuk heb je al een aantal afspraken gelezen die gaan over de selectie en de while-loop. Uiteraard behoren die tot onze codeerafspraken, maar we gaan nog meer afspraken maken. Deze worden hierna opgesomd. Veel ervan heb je al toegepast zien worden in de voorbeelden die voorbij zijn gekomen. 4.1 variabelen Variabelen hebben een zinvolle naam. Om te tellen gebruik je dus een variabele die bijvoorbeeld teller, count of counter heet en niet a, i, p, bla, prut, a1, a2, bras of zoiets. Begin de naam van een variabele met een kleine letter. Wanneer de naam van een variabele uit meerdere woorden bestaat, dan begin je met een kleine letter en gebruikt daarna camel case. Dat wil zeggen dat je ieder volgend woord met een hoofdletter begint. Een aantal voorbeelden zijn: rijnummer, kolomnummer, vertas, horas, isgeluidaan enzovoorts. Zoals je hierboven ziet, mag je afkortingen gebruiken zoals hor in plaats van horizontaal of vert in plaats van verticaal bij variabele namen. In dat geval moet je bij de introductie van de variabele in commentaar wel aangeven waar de afkorting voor staat. Dat ziet er bijvoorbeeld als volgt uit: var horas = 0; // horizontale as var vertas = 0; // verticale as 4.2 witruimte Iedere instructie begint op een nieuwe regel. Een openingsaccolade begint altijd op een nieuwe regel. while (teller <= 5)

19 Een sluitingsaccolade begint altijd op een nieuwe regel en wel even ver ingesprongen als de bijbehorende openingsaccolade (dus dezelfde horizontale beginpositie). while (teller <= 5) document.write(teller); document.write(" "); teller = teller + 1; Na een sluitingsaccolade volgt nooit een puntkomma en een extra lege regel als er een nieuwe instructie achter staat. while (teller <= 5) document.write(teller); document.write(" "); teller = teller + 1; document.write("het programma is klaar. "); Een instructie die volgt op een openingsaccolade wordt 4 spaties ingesprongen. document.write(teller); Iedere instructie die hetzelfde hiërarchische niveau heeft als de voorgaande instructie wordt even ver ingesprongen. var teller = 1; while (teller <= 5) en document.write(teller); document.write(" "); teller = teller + 1; Na een openingshaak en voor een sluithaak staat nooit een spatie. (teller <= 5) en (" ")

20 Bewerkingen, zoals de toekenning (=), optellen (+), vergelijking (<, <=, >, >=,!=, ==, === enzovoorts) enzovoorts, hebben altijd een spatie ervoor en erna. teller <= 5 en teller = teller + 1; De openingshaak na een functienaam staat altijd onmiddellijk achter de functienaam. document.write(teller); Commentaar staat zoveel mogelijk achter de instructie waar het bij hoort. Als dat onoverzichtelijk is, dan staat het commentaar vóór de instructie waar het commentaar betrekking op heeft. Gebruik witregels ook om een groep instructies die bij elkaar hoort te scheiden van een andere groep instructies die bij elkaar hoort. 4.3 selectie Zie de codeerafspraken in paragraaf herhaling Zoals gezegd, zijn er veel vormen van herhaling. Je hebt de while-loop al gezien. De codeerafspraken hiervoor heb je gezien in 3.4. Naast de while-loop, ga je nog een andere JavaScript loop leren, de for-loop. Hoe deze precies werkt, leer je later. Toch gaan we hier alvast de codeerafspraken leren. De for-loop is een andere vorm van een herhaling opschrijven. We zullen een voorbeeld geven aan de hand van het voorbeeld van de while-loop dat je in het vorige hoofdstuk hebt gezien. Dat voorbeeld zie je hierna nog een keer. var teller = 1; while (teller <= 5) document.write(teller); document.write(" "); teller = teller + 1;

21 Deze loop als for-loop ziet er als volgt uit. for (teller = 1; teller <= 5; teller = teller + 1) document.write(teller); document.write(" "); De volgende codeerafspraken zijn universeel verplicht bij het gebruik van een forloop in JavaScript: Na de for staat een sequentie. De sequentie staat altijd tussen haakjes. Als je de haakjes vergeet, dan beschouwt JavaScript dit als een semantiekfout en laat geen uitvoer zien. Alle instructies in de sequentie, behalve de laatste, worden gevolgd door een puntkomma en een spatie. De laatste instructie in de sequentie wordt niet gevolgd door een puntkomma. De sluithaak staat onmiddellijk achter de laatste instructie in de sequentie. De volgende codeerafspraken maken we om de code leesbaar te houden. Als je op het internet zoekt, dan ga je code vinden die afwijkt van deze afspraken en die toch correct is. Wij gaan ons bij informatica echter aan de volgende afspraken houden: Tussen de for en de openingshaak van de sequentie staat altijd een spatie. Na de sluithaak van de sequentie bij de for komt altijd een code blok. Dat wil zeggen, dat de loopcode altijd tussen accolades staat. Ook als de loopcode uit slechts 1 instructie bestaat! Zorg dat je deze regels goed kent. Om ermee te oefenen ga je nu een stuk code, dat een slechte lay-out heeft, omschrijven zodat het een goede lay-out krijgt. opgave 4.1 Haal het bestand slechte_lay-out.html op uit de ELO en verander de lay-out, zodat deze voldoet aan de codeerafspraken die je geleerd hebt

22 5 wat heb je geleerd Je hebt zojuist geleerd wat syntax en semantiek zijn. Daarnaast heb je kennis gemaakt met een aantal belangrijk programmeerconcepten. Ook heb je de codeerafspraken geleerd, die je bij het vak informatica nodig gaat hebben en moet toepassen wanneer je code schrijft