Introductie Small Basic

74
Microsoft Small Basic Een introductie in het Programmeren

Transcript of Introductie Small Basic

Page 1: Introductie Small Basic

Microsoft Small Basic

Een introductie in het Programmeren

Page 2: Introductie Small Basic

Hoofdstuk 1

Een Introductie

Small Basic en Programmeren Het programmeren van een Computer wordt vaak omschreven als het proces van het schrijven van

computer software door gebruik te maken van een programmeer taal of talen. Net zoals we de taal

Nederlands Engels, Spaans of Frans verstaan en spreken, begrijpen computers programma’s geschreven

in bepaalde talen. Deze worden programmeer talen genoemd. In het begin had men maar een paar

programmeer talen die gemakkelijk te leren en te begrijpen waren. Met de evolutie van

computersystemen en software evolueerden echter ook de programmeertalen, en namen steeds toe in

complexere concepten gedurende deze ontwikkelingen. Met als resultaat dat een moderne

programmeer taal en de achterliggende concepten een behoorlijke uitdaging bieden vormen voor een

beginnend programmeur.

Dit feit was aanleiding dat steeds meer mensen ontmoedigde om een computer te programmeren.

Small Basic is een speciaal ontworpen programmeer taal om programmeren extreem eenvoudig ,

toegankelijk en plezierig voor beginners te maken. De intentie van Small Basic is om de

moeilijkheidsgraad te verlagen en graag als opstap wil dienen voor de wondere wereld van het

programmeren van computersystemen.

De Small Basic Omgeving Laten we beginnen met een snelle introductie van de Small Basic omgeving. Wanneer je Small Basic.exe

voor de eerste keer opstart, zie je een scherm wat op het onderstaande figuur lijkt

Page 3: Introductie Small Basic

Figuur 1 - De Small Basic omgeving

Dit is de Small Basic omgeving, waar we onze Small Basic programma’s zullen schrijven en uitvoeren.

Deze omgeving heeft verschillende specifieke elementen die aangegeven zijn met een nummer.

De Editor, aangegeven met een [1] is waar we onze Small Basic programma’s zullen schrijven . Wanneer

je een voorbeeld programma opent of een opgeslagen programma , zal het hier worden getoond in de

editor. Je kunt het aanpassen en of opslaan voor later gebruik.

Je kunt ook tegelijkertijd meerdere programma’s openen en bewerken . Elke programma waar je in

werkt zal in een separate editor worden getoond. De editor die het programma bevat waar je nu direct

aan werkt noemen we de actieve editor.

De Gereedschapsbalk, aangegeven met een [2] wordt gebruikt om commando’s te geven aan de actieve

editor of de omgeving. We zullen meer leren over de verschillende commando’s in de gereedschapsbalk

als we ermee aan de slag gaan.

Het Oppervlak, aangegeven met een [3] is die plek waar alle editor schermen zich zullen bevinden.

Ons eerste programma Nu we wat bekend zijn met de Small Basic omgeving, kunnen we van start gaan en beginnen met

programmeren Small Basic. Zoals we hierboven hebben gelezen, is de editor de aangewezen plaats

waar we de onze programma’s gaan schrijven. Dus laten we starten en hier de onderstaande regel in

typen.

1

2

3

Page 4: Introductie Small Basic

TextWindow.WriteLine("Hallo Wereld")

Zoals je ziet is de brontaal geschreven in het Engels, dat komt omdat een taal ook nog eerst vertaald dient te worden naar een taal die de

computer beter begrijpt, dat doet een compiler voor ons. Deze compiler begrijpt alleen de Engelse taal vandaar dat we Small Basic

programmeren in het Engels.

Dit is ons eerste Small Basic programma. En als je het juist hebt overgetypt, zie je de uitkomst als

hieronder afgebeeld in figuur 2.

Figuur 2 - Eerste Programma

Nu we ons nieuwe programma hebben ingetypt, laten we het eens uitvoeren en kijken wat er gebeurt.

We kunnen ons programma uitvoeren door op de Uitvoeren knop (F5) in de gereedschapsbalk te klikken

of om een kortere weg te kiezen namelijk de sneltoets combinatie F5 op het toetsenbord te kiezen. Als

alles in orde zal ons programma worden uitgevoerd en is zien we het resultaat als in figuur 3.

Figuur 3 - Eerste programma uitvoer

Page 5: Introductie Small Basic

Gefeliciteerd! Je hebt zojuist jouw eerste Small

Basic Programma geschreven en uitgevoerd.

Een klein en eenvoudig programma, maar

desalniettemin een behoorlijke stap voorwaarts

om een echter computer programmeur te worden!

Welnu, er is nog een belangrijk detail te

behandelen voordat we verder gaan en grotere

programma’s gaan schrijven. We moeten

begrijpen wat er zojuist is gebeurd – wat vertelden

we nu precies tegen de computer en hoe vertelden

we de computer wat hij moest doen? In het

volgende hoofdstuk, analyseren we het

programma wat we zojuist hebben geschreven, en zo leren we begrijpen hoe dat in zijn werk gaat.

Figuur 4 - Intellisense

Bewaren van ons programma Wanneer je Small Basic wilt afsluiten en later wilt terugkeren om in Small Basic verder te werken aan het

programma dat je aan het maken bent of zojuist hebt ingetypt, kun je het programma ook bewaren

door het op te slaan. Het is een goede gewoonte om programma’s te bewaren en regelmatig op te

slaan, zo verlies je geen informatie in het geval van het per ongeluk afsluiten van de PC of in het geval

van een stroomstoring. Je kunt het huidige programma opslaan en bewaren door op het “opslaan”

icoon op de gereedschapsbalk te klikken of door de toetscombinatie “Ctrl+S” (druk op de “S” toets

terwijl je de “Ctrl-toets” ingedrukt houdt).

Terwijl je jouw eerste programma hebt

getypt,is het je misschien opgevallen dat er een

popup scherm verscheen met een lijst van

onderdelen (Fout! Verwijzingsbron niet

gevonden.). Dit wordt “intellisense” genoemd

en helpt je bij het sneller typen van

programma’s. Je kunt door deze lijst heen

lopen met behulp van de Up/Down pijltjes

toetsen, en as je iets vindt wat je nodig hebt,

gebruik je de Enter toets om het geselecteerde

onderdeel in te voegen in jouw programma.

Page 6: Introductie Small Basic

Hoofdstuk 2

Begrijpen van ons eerste programma

Wat is nu eigenlijk een computer programma? Een programma is een set instructies (opdrachten) aan de computer. Deze instructies vertellen de

computer precies wat er moet gebeuren, en de computer volgt deze instructies altijd nauwkeurig op.

Net als mensen, kunnen computers alleen instructies opvolgen als deze is aangegeven in een taal die

men begrijpt. Dit worden programmeer talen genoemd. Er zijn vele talen die de computer kan

begrijpen en Small Basic is er een van.

Stel je een gesprek voor tussen jou een je vriendje. Jij en jouw vriendjes gebruiken woorden, die

samengesteld en georganiseerd als zinnen ervoor zorgen dat je informatie heen en weer kunt sturen.

Programmeer talen bevatten verzamelingen van woorden die kunnen worden georganiseerd in zinnen

die informatie naar de computer sturen. En programma’s is in de basis een set zinnen (soms enkel een

paar woorden , en soms enkele duizenden) die

samen begrijpelijk zijn voor zowel de computer

als voor de programmeur.

Small Basic Programma’s Een typisch Small Basic programma bevat een

heleboel uitdrukkingen (statements).

Elke lijn van het programma vertegenwoordigd een uitdrukking en elk statement (instructie) is een

instructie voor de computer. Wanneer we de computer vragen het Small Basic programma uit te

voeren, gebruikt het dit programma en leest het eerste instructie (statement ). Het begrijpt wat we

willen zeggen en voert dan onze instructies uit. Terwijl hij klaar is met het uitvoeren van de eerste

instructie (statement), keert het terug naar programma en leest de tweede regel en voert deze uit.

Er zijn vele talen die een computer kan

begrijpen. Java, C++, Python, VB, etc. zijn

allemaal krachtige en moderne computer talen

die worden gebruikt om simpele als complexe

software programma’s te ontwikkelen.

Page 7: Introductie Small Basic

Dit blijft het programma doen net zolang totdat het einde van het programma is bereikt. Dat is wanneer

het programma stopt.

Terug naar ons eerste programma Hier is eerste programma wat we geschreven hebben:

TextWindow.WriteLine("Hallo Wereld")

Dit is een erg simpel programma dat bestaat uit een statement (uitdrukking). Dit statement verteld de

computer om een regel tekst te schrijven die de woorden Hallo Wereld bevat, in het Text Window

Letterlijk wordt het in de computer vertaald als: “Write” is het Engelse woord voor schrijven.

Schrijf de tekst Hallo Wereld

Misschien is het je opgevallen dat het statement op zijn manier in drie kleinere onderdelen net zoals

zinnen in woorden kan worden gedeeld. In het eerste statement zien we 3 distinctieve segmenten:

a) TextWindow

b) WriteLine

c) “Hallo Wereld”

De punt tussen TextWindow en Writeline, en tussen haakjes geplaatste tekst of tekens als

aanhalingstekens zijn allemaal leestekens die op exacte posities geplaatst moeten worden in het

statement (instructie), zodat de computer onze bedoelingen begrijpt.

Je kunt je misschien het zwarte venster herinneren wat tevoorschijn kwam toen we ons eerste

programma uitvoerden. Dit zwarte venster word

het TextWindow (tekst scherm) genoemd of ook

wel de Console (spreek uit als Consool). Hier

komt de uitkomst van ons programma.

TextWindow, in ons programma, wordt een

object genoemd. Er zijn een aantal van dit soort

objecten beschikbaar voor ons om te gebruiken in

onze programma’s. We kunnen verschillende

bewerkingen (operations) van deze objecten vragen. We hebben al gebruik gemaakt van de WriteLine

bewerking in ons programma. Wellicht is het je opgevallen dat de WriteLine bewerking gevolgd wordt

door de tekst Hallo Wereld binnen aanhalingstekens. Deze tekst wordt doorgegeven als invoer aan de

WriteLine bewerking, waardoor het als uitvoer word geprint op het scherm aan de gebruiker. Dit wordt

ook wel een input genoemd voor de bewerking. Sommige bewerkingen vinden plaats op meer dan een

plek in het programma op meerdere invoer terwijl andere juist geen invoer toestaan.

Leestekens zoals aanhalingstekens, spaties en

haakjes zijn zeer belangrijke voor een computer

programma. Gebaseerd op hun positie en

aantal, kunnen zij de betekenis van wat wordt

bedoeld met de uitvoer bepalen.

Page 8: Introductie Small Basic

Ons tweede programma Nu we ons eerste programma hebben begrepen, laten we verder gaan en het wat mooier maken door

wat kleuren toe te voegen. “Yellow” is het Engelse woord voor de kleur geel.

TextWindow.ForegroundColor = "Yellow"

TextWindow.WriteLine("Hallo Wereld")

Figuur 5 - Kleur toevoegen

Wanneer je het bovenstaande programma uitvoert, zal het opvallen dat dezelfde tekst “Hallo Wereld”

als print in het TextWindow, deze keer in de kleur geel afgedrukt is in plaats van het grijs van zojuist.

Figuur 6 - Kleur toevoegen uitvoer

Page 9: Introductie Small Basic

Noteer de nieuwe instructie (statement ) die we hebben toegevoegd aan het originele programma.

Het gebruikt een nieuw woord, ForegroundColor waar we de waarde “Yellow” aan hebben toegekend.

Dit betekend dat we de waarde “Yellow” hebben toegekend aan ForegroundColor. Welnu, het verschil

tussen ForegroundColor en de bewerking WriteLine is dat ForegroundColor geen enkele invoer nodig

had of aanhalingstekens. In plaats daarvan werd het gevolgd door een gelijk aan teken en een woord.

We beschrijven ForegroundColor als een eigenschap (Property) van TextWindow. Hier is een lijst van

waarden die toegestaan zijn voor de ForegroundColor eigenschap (property). Probeer eens “Yellow” te

vervangen door een van de andere en bekijk het resultaat eens – vergeet de aanhalingstekens niet, dit

zijn namelijk verplichtte lees tekens.

Black

Blue

Cyan

Gray

Green

Magenta

Red

White

Yellow

DarkBlue

DarkCyan

DarkGray

DarkGreen

DarkMagenta

DarkRed

DarkYellow

Page 10: Introductie Small Basic

Hoofdstuk 3

Introductie van variabelen

Gebruik maken van variabelen in ons programma Zou het niet mooi zijn als ons programma “Hallo” met een gebruikersnaam zegt in plaats van “Hallo

Wereld” . Om dat voor elkaar te krijgen moeten we de gebruiker vragen zijn of haar naam in te voeren,

deze dan ergens op te slaan en daarna op het scherm “Hallo” met daarachter de gebruikersnaam te

printen. Laten we eens kijken hoe dat in zijn werk gaat:

TextWindow.Write("Voer hier jouw naam in: ")

naam = TextWindow.Read()

TextWindow.WriteLine("Hallo " + naam)

Wanneer je het programma uitvoert, dan zie je soortgelijke uitvoer als hieronder:

Figuur 7 - Vraag de gebruiker om zijn naam

Page 11: Introductie Small Basic

En wanneer je jouw naam opgeeft en op de knop Enter drukt, dan zie je de volgende uitvoer:

Figuur 8 - Een warm welkom

Welnu, als we het programma weer opnieuw uitvoeren, zal de vraag opnieuw dezelfde vraag gesteld

worden. Kun je een andere naam opgeven en de computer zal dan “Hallo” met de andere opgegeven

naam laten zien.

Analyse van het programma In het zojuist uitgevoerde programma, zal de zin waar jouw aandacht op gevallen zijn deze:

naam = TextWindow.Read()

Read() lijkt veel op WriteLine(), maar dan zonder invoer. Het is een bewerking en verteld de computer

om te wachten totdat de gebruiker iets intypt en de ENTER toets indrukt. Terwijl de gebruiker de ENTER

toets indrukt, neemt de computer over wat de

gebruiker heeft ingetypt en geeft het terug aan

het programma. Het interessante punt is dat wat

de gebruiker ook getypt heeft nu is opgeslagen in

iets wat we variabele de naam hebben genoemd.

Een variabele word vastgesteld als een plaats

waar we tijdelijk iets in kunnen opslaan om dit

later te kunnen gebruiken. In de lijn hierboven

wordt naam gebruikt om de naam van de

gebruiker in op te slaan.

De volgende lijn is ook interessant:

TextWindow.WriteLine("Hallo " + naam)

dit is de plaats die we gebruiken om de waarde in op te slaan in onze variabele, naam. We nemen de

waarde in naam en voegen het toe aan “Hallo” en schrijven het op TextWindow.

Write, net als WriteLine is een andere operatie

op het Console Scherm. Write maakt het

mogelijk om iets te schrijven (write) naar het

Console Scherm, maar staat opvolgende tekst

toe om op dezelfde lijn als de huidige tekst te

worden geplaatst.

Page 12: Introductie Small Basic

Wanneer een variabele eenmaal is gezet, kun je het zo vaak je wilt hergebruiken. Bijvoorbeeld, kun je

het volgende doen:

TextWindow.Write("Voer hier jouw naam in: ")

name = TextWindow.Read()

TextWindow.Write("Hello " + naam + ". ")

TextWindow.WriteLine("hoe gaat het met je " + naam + "?")

En de volgende uitvoer zal worden getoond:

Figuur 9 - Hergebruik van een variabele

Regels voor namen van variabelen Variabelen hebben namen die hiermee geassocieerd zijn en zo identificeer je ze. Er zijn enkele

eenvoudige regels en bruikbare handleidingen voor het geven van namen van deze variabelen.

Dit zijn:

1. De naam moet beginnen met een letter en niet lijken op de woorden als if, for, then, etc.

2. Een variabele naam kan elke combinatie letters, cijfers en underscores ( _ teken) bevatten.

3. Het is gebruikelijk om zinvolle namen te gebruiken- omdat variabelen zo lang kunnen zijn als je

wenst, gebruik je het beste namen die de bedoeling ervan weergeven.

Spelen met getallen We hebben zojuist gezien dat we variabelen gebruiken om de naam van de gebruiker in op te slaan. In

de volgende programma’s zullen we zien hoe we getallen kunnen opslaan en bewerken in variabelen.

Laten we beginnen met een echt eenvoudig programma:

nummer1 = 10

nummer2 = 20

nummer3 = nummer1 + nummer2

TextWindow.WriteLine(nummer3)

Wanneer je het programma uitvoert dan krijg je de volgende uitvoer:

Page 13: Introductie Small Basic

Figuur 10 - Twee getallen optellen

In de eerste regel van programma, ken je de waarde toe aan variabele nummer1 met een waarde van

10. En in de tweede regel, ken je de waarde toe aan variabele nummer2 met de waarde van 20. In de

derde regel, tel de waarde van nummer1 en nummer2 op en dan ken je de uitkomst van de optelsom

toe aan variabele nummer3. Dus in dit geval, krijgt nummer3 een waarde van 30. En dat is wat we

printen naar het TextWindow.

Welnu , laten we een zien als we het programma iets aanpassen en het resultaat gaan bekijken:

nummer1 = 10

nummer2 = 20

nummer3 = nummer1 * nummer2

TextWindow.WriteLine(nummer3)

Het bovenstaande programma vermenigvuldigd nummer1 met nummer2 en slaat het resultaat op in

nummer3. En je kunt de uitkomst van dat programma hier bekijken:

Figuur 11 - Vermenigvuldigen van twee getallen

Op gelijke wijze, kun je getallen van elkaar aftrekken of delen. Hier is een aftreksom:

nummer3 = nummer1 - nummer2

En het symbool voor aftrekken is ‘/’. Het programma zal er dan zo uitzien:

nummer3 = nummer1 / nummer2

en het resultaat van de deelsom is dan: Noteer date er om de getallen geen

aanhalingstekens staan. Voor getallen zijn

geen aanhalingstekens nodig. Je hebt alleen

aanhalingstekens nodig voor tekst.

Page 14: Introductie Small Basic

Figuur 12 - Twee getallen delen

Een simpele Celcius naar Fahrenheit temperatuur omreken methode

Voor het volgende programma , gebruiken we de volgende formule ℉ = ℃ ∗5

9+ 32 om Celcius

temperaturen naar Fahrenheit temperaturen om te rekenen.

Als eerste, krijgen we de temperatuur in Celcius van de gebruiker en slaan dit op in een variabele. Er is

een speciale operatie die in staat stelt om nummers van de gebruiker te lezen en dat is

TextWindow.ReadNumber.

TextWindow.Write("Geef de temperatuur in Celcius: ")

celcius = TextWindow.ReadNumber()

als we eenmaal de temperatuur van Celcius hebben opgeslagen in een variabele, kunnen we deze

converteren naar Fahrenheit als volgt:

fahr = (celcius * 9/5) + 32

De haakje vertellen de computer om eerst celcius * 9/5 uit te rekenen en dan de rest uit te rekenen. Nu

is alles wat we nog moeten doen het resultaat als print aan de gebruikte te tonen. Dit allemaal

samenvattend, krijgen we dit programma:

TextWindow.Write("Geef de temperatuur in Celcius: ")

celcius = TextWindow.ReadNumber()

fahr = (celcius * 9/5) + 32

TextWindow.WriteLine("Temperature in Fahrenheit is " + fahr)

En het resultaat van het programma is:

Figuur 13 - Temperartuur conversie

Page 15: Introductie Small Basic

Hoofdstuk 4

Condities en vertakkingen (Branching)

Terugkomend op ons eerste programma, zou het niet geweldig zijn dat in plaats van “Hallo Wereld”, we

goedemorgen of goedenavond kunnen zeggen, afhankelijk van de tijd van de dag? Voor ons volgende

programma, laten we de computer Goedemorgen Wereld printen als de tijd ligt voor 12:00 uur ’s

middags. En Goedemiddag wereld als het later is dan 12: 00 ‘s middags en Goedenavond Wereld als het

later is dan 18:00 uur ’s avonds.

If (Clock.Hour < 12) Then

TextWindow.WriteLine("Goedemorgen Wereld")

EndIf

If (Clock.Hour > 12) Then

TextWindow.WriteLine("Goedemiddag Wereld")

EndIf

If (Clock.Hour > 18 ) Then

Textwindow.Clear()

TextWindow.WriteLine("Goedeavond Wereld")

EndIf

Afhankelijk van wanneer je het programma uitvoert krijg je een van de volgende uitvoer:

Figuur 14 - Goedemorgen Wereld

Page 16: Introductie Small Basic

Figuur 15 - Goedemiddag Wereld

Figuur 16 - Goedenavond Wereld

Laat ons de eerste drie regels van het programma

analyseren. Je hebt waarschijnlijk al door dat deze

regel de computer vertelt dat als de Clock.Hour

minder is als 12, hij “Goedemorgen Wereld ” print.

De woorden If, Then en EndIf zijn speciale

woorden die worden begrepen door de computer

wanneer het programma wordt uitgevoerd. Het

woord If wordt altijd gevolgd door een uitkomst

(conditie) waarna voldaan moet worden, welke in dit geval (Clock.Hour < 12). Onthoud dat de

aanhalingstekens niet nodig zijn voor getallen om jouw bedoelingen te begrijpen. De conditie wordt

gevolgd door then en de actuele operatie die wordt uitgevoerd. En na dat de operatie EndIf bereikt.

Verteld het de computer dat de conditionele uitvoer is beëindigd. Een slimmerik heeft wel door dat er

een trucje is gebruikt om maar een lijn tekst te krijgen als het later is dan 12 uur ‘s middags en ook later

is dan 6 uur. Heb jij door welk trucje dat is?

Tussen then en de EndIf, kunnen er meer dan een operatie worden uitgevoerd en de computer zal ze

allemaal uitvoeren als aan de conditie kan worden voldaan. Bijvoorbeeld, kun je iets schrijven als dit:

If (Clock.Hour < 12) Then

TextWindow.Write("Goedemorgen. ")

TextWindow.WriteLine("Hoe was het ontbijt?")

EndIf

In Small Basic, kun je het Clock object

gebruiken voor de huidige datum en tijd. Het

voorziet ook ineen boel eigenschappen

waarmee je de huidige Dag, Maand, Jaar, uur,

Minuten, Seconden onafhankelijk van elkaar

kunt krijgen.

Page 17: Introductie Small Basic

Else In het programma aan het begin van dit hoofdstuk, zie het je misschien opgevallen dat de tweede

conditie een beetje overtollig (redundant) is. De Clock.Hour waarde kan zowel meer als minder zijn dan

12. Dus eigenlijk hoeven we dit niet voor de tweede keer te controleren. Als we dit tegenkomen ,

korten we de twee if..then..endif uitdrukkingen (statements ) door een nieuw woord , else te gebruiken.

Als we het programma opnieuw zouden schrijven met gebruik van het woord else,dan komt het er zo uit

te zien:

If (Clock.Hour < 12) Then

TextWindow.WriteLine("Goedemorgen Wereld ")

Else

TextWindow.WriteLine("Goedemiddag Wereld")

EndIf

En dit programma zal exact hetzelfde uitvoeren als het andere, wat ons een belangrijke les leert in het

programmeren:

In programmeren, zijn er vaak meerder wegen die tot hetzelfde resultaat leiden. Soms is een

manier meer voor de hand liggend om te gebruiken dan de andere. De keuze is aan jou , de

programmeur. Als je meer programma’s schrijft en meer ervaring opdoet, zullen je de

verschillen deze technieken gaan opvallen en hun voor en nadelen.

Inspringen In alle voorbeelden kun je zien hoe de statements tussen If, Else en EndIf ingesprogen zijn. Dit

inspringen is niet echt nodig. De computer zal het programma ook uitstekend begrijpen zonder dit

inspringen. Echter, helpen deze ons om het verschil en de structuur van het programma gemakkelijker

te herkennen. Vandaar, dat het een goed gebruik is om inspringen te gebruiken tussen zulke blokken.

Even of Oneven Nu we de If..Then..Else..EndIf statements in ons trukendoosje hebben zitten, laten we eens proberen

een programma te schrijven dat, gegeven een getal, ons verteld of het even of oneven getal is.

Page 18: Introductie Small Basic

TextWindow.Write("Vul een nummer in: ")

getal = TextWindow.ReadNumber()

rest = Math.Remainder(getal, 2)

If (rest = 0) Then

TextWindow.WriteLine("Het getal is even")

Else

TextWindow.WriteLine("Het getal is oneven")

EndIf

En als je het programma uitvoert zie je een uitvoer als hieronder:

Figuur 1 - Even of Oneven

In dit programma , hebben we een andere bruikbare bewerking geïntroduceerd, Math.Remainder. en

zoals je wellicht al hebt uitgevonden, deelt Math.Remainder het eerste getal door het tweede getal en

geeft het rest getal weer.

Vertakking (Branching) Onthoud, in het tweede hoofdstuk leerde je dat de computer een programma statement per keer

uitvoert, in de volgorde van boven naar beneden. Echter, er is een speciaal statement waarmee je een

sprong kan maken naar een ander statement buiten de volgorde. Laten we eens kijken naar het

volgende programma.

i = 1

start:

TextWindow.WriteLine(i)

i = i + 1

If (i < 25) Then

Goto start

EndIf

Page 19: Introductie Small Basic

Figuur 2 – Gebruik maken van Goto

In het hierboven afgebeelde programma, hebben we de waarde 1 toegekend aan de variabele i. En toen

hebben we een nieuw statement toegevoegd wat eindigt op een dubbele punt (:)

start:

Dit wordt een label genoemd . Labels zijn als bladwijzers die de computer begrijpt. Je kunt de

bladwijzer elke naam geven en je kunt zo veel bladwijzers gebruiken in jouw programma als je wenst, zo

lang ze maar een unieke naam hebben.

Een ander interessant statement hier is:

i = i + 1

Dit verteld de computer om de waarde 1 op te tellen bij de variabele i en deze waarde weer terug te

geven aan i. dus als de waarde van i voorheen 1 was voor het statement werd uitgevoerd, wordt het nu

2 nadat het statement wordt uitgevoerd.

En uiteindelijk,

If (i < 25) Then

Goto start

EndIf

Page 20: Introductie Small Basic

Dit is het deel dat de computer verteld dat wanneer de waarde van i kleiner is dan 25, begin met het

uitvoeren (start) van statements vanaf de bladwijzer start.

Eindeloze uitvoer Door gebruik te maken van het Goto statement kun je de computer willekeurig iets vaker laten

herhalen. Bijvoorbeeld, kun je het Even of Oneven programma gebruiken en het zo als hieronder

aanpassen, en het programma zal eindeloos doorlopen. Je kunt het programma stoppen door op het

kruisje (X) te klikken rechtsboven in het uitvoerscherm.

begin:

TextWindow.Write("Voer een getal in: ")

getal = TextWindow.ReadNumber()

remainder = Math.Remainder(getal, 2)

If (remainder = 0) Then

TextWindow.WriteLine("Het getal is even")

Else

TextWindow.WriteLine("Het getal is oneven")

EndIf

Goto begin

Figuur 3 - Even of Oneven eindeloze uitvoer

Page 21: Introductie Small Basic

Hoofdstuk 5

Loops

For Loop Laten we een programma pakken wat we in het vorige hoofdstuk hebben geschreven.

i = 1

start:

TextWindow.WriteLine(i)

i = i + 1

If (i < 25) Then

Goto start

EndIf

Dit programma print de getallen van 1 tot 24 opvolgend af op het scherm. Dit proces van het laten

toenemen van een variabele is heel gebruikelijk in het programmeren waardoor programmeer talen

meestal een eenvoudige wijze hebben om dit voor elkaar te krijgen. Het programma hierboven is

gelijkwaardig aan het programma hieronder:

For i = 1 To 24

TextWindow.WriteLine(i)

EndFor

Page 22: Introductie Small Basic

En de output is:

Figuur 4 – Gebruik maken van de For Loop

Valt het je op dat we het programma in plaats van 8 lijnen naar 4 lijnen hebben vereenvoudigd, en het

nog steeds hetzelfde doet? Dit is een goed voorbeeld.

For..EndFor wordt, in programmeer termen, een loop genoemd. Het stelt je in staat om een variabele te

nemen, het een initiële (begin) waarde en een eindwaarde te geven, en laat de computer de toename in

waarde voor je uitvoeren. Elke keer dat de computer de waarde van de variabele laat toenemen, voert

het de statements uit tussen For en EndFor.

Maar wat als je zou willen dat de variabele toeneemt met de waarde 2 in plaats van 1 – als je bij wijze

van spreken alle oneven getallen tussen 1 en 24 op het scherm wilt printen, kun je de loop functie

gebruiken om dat uit te voeren.

For i = 1 To 24 Step 2

TextWindow.WriteLine(i)

EndFor

Page 23: Introductie Small Basic

Figuur 5 – alleen de oneven nummers

Het Step 2 (stap) deel van het For statement vertelt de computer om de waarde van i met 2 te laten

toenemen in plaats van met de gebruikelijke waarde 1. Door gebruik te maken van Step kun je elke

toename desgewenst opgeven. Je kunt zelfs een negatieve waarde voor de step opgeven en de

computer achterwaarts laten rekenen als je wilt, zoals in het voorbeeld hier beneden:

For i = 10 To 1 Step -1

TextWindow.WriteLine(i)

EndFor

Figuur 6 – achterwaarts rekenen

While Loop De While loop is nog een andere manier van looping, die special bruikbaar is wanneer de step waarde

niet van te voren bekend is. Daar waar de For loop een vooraf gedefinieerde keer wordt uitgevoerd,

wordt de While loop uitgevoerd zolang de waarde geldig is. In het voorbeeld hier beneden, halveren we

een nummer totdat het resultaat groter dan 1 is.

getal = 100

While (getal > 1)

TextWindow.WriteLine(getal)

getal = getal / 2

EndWhile

Page 24: Introductie Small Basic

Figuur 7 – Halveer loop

In het programma hierboven, kennen we de waarde 100 toe en voeren de loop uit net zolang de waarde

groter dan 1 is. Binnen de loop, printen we het getal en delen het door twee, halveren het feitelijk. And

zoals verwacht zijn de uitvoer van het programma die getallen die progressief gehalveerd worden achter

elkaar.

Het zal zeer lastig zijn om dit programma te schrijven door gebruik temaken van For loop, omdat we niet

weten hoeveel keer de loop zal worden uitgevoerd. Met een while loop is het gemakkelijk om te

conditie (uitkomst) te controleren en de computer te vragen om door te gaan of te stoppen met de

loop.

Het is interessant om te weten dat elke while loop

onderverdeeld kan worden een If Then

statement. Bijvoorbeeld , kan het programma

hierboven als volgt geschreven worden , zonder

het resultaat te beïnvloeden.

getal = 100

startLabel:

TextWindow.WriteLine(getal)

getal= getal / 2

If (getal > 1) Then

Goto startLabel

EndIf

In feite, schrijft de computer intern elke While

loop opnieuw in statements die gebruik maken

van If..Then met een of meer Goto

statements.

Page 25: Introductie Small Basic

Hoofdstuk 6

Beginnen met afbeeldingen

Tot dusver in onze voorbeelden, hebben we gebruik gemaakt van TextWindow om de basisbegrippen

van de Small Basic programmeer taal uit te leggen. Echter, wordt Small Basic geleverd met een krachtige

set afbeelding capaciteiten die we nu in dit hoofdstuk zullen onderzoeken.

Introductie van GraphicsWindow Net zoals we TextWindow hebben waar we met letters en getallen kunnen werken, voorziet Small Basic

in een GraphicsWindow waarmee we tekeningen kunnen maken. Laat ons beginnen door het

GraphicsWindow te laten zien.

GraphicsWindow.Show()

Wanneer je dit programma uitvoert, zal het je opvallen dat in plaats van het gebruikelijkezwarte tekst

venster, je nu een wit Windows venster krijgt zoals hierobnder afgebeeld. Er is nog niet veel mee te

beginnen op dit dit scherm. Maar dit zal het basis venster zijn waarmee we zullen werken in dit

hoofdstuk. Je kunt het Windows venster sluiten door op de ‘X’ knop te klikken aan de rechterbovenkant

van het venster.

Page 26: Introductie Small Basic

Figuur 8 – Een leeg afbeeldingen Windows venster

De opzet van het afbeeldingen venster Het afbeeldingen venster maakt het mogelijk om dit naar eigen smaak aan te passen. Je kunt de Titel ,

achtergrond en de grootte veranderen. Laten we verder gaan en het een beetje aanpassen, om met het

afbeeldingen venster vertrouwd te raken.

GraphicsWindow.BackgroundColor = "SteelBlue"

GraphicsWindow.Title = "Mijn afbeeldingen Windows venster"

GraphicsWindow.Width = 320

GraphicsWindow.Height = 200

GraphicsWindow.Show()

Page 27: Introductie Small Basic

Zo ziet het aangepaste afbeeldingen Windows venster eruit. Je kunt de achtergrond aanpassen door

een van de waarden in de lijst van Appendix B. Speel maar met deze eigenschappen om te zien hoe je

kunt aanpassen hoe het venster er volgens jou uit moet zien.

Figuur 9 – Een aangepast afbeedlingen Windows venster

Het tekenen van lijnen Nu we het GraphicsWindow uitgevoerd hebben, zijn we in staat om vormen, tekst en zelfs plaatjes op

dit venster te tekenen. Laat ons starten met het tekenen van enkele eenvoudige vormen. Hier is een

programma waarmee een paar lijnen op het Graphics Window worden getekend.

GraphicsWindow.Width = 200

GraphicsWindow.Height = 200

GraphicsWindow.DrawLine(10, 10, 100, 100)

GraphicsWindow.DrawLine(10, 100, 100, 10)

Figuur 10 – Kris kras

In plaats van het gebruik van de namen van de

kleur kun je ook de web kleur notatie gebruiken

(#RRGGBB). Bijvoorbeeld, #FF0000

vertegenwoordigt rood (Red) , #FFFF00

Geel(Yellow), en zo voorts. We zullen meer

leren over kleuren in Colors Appendix.

Page 28: Introductie Small Basic

De eerste twee zinnen van te programma stellen het afbeeldingen venster in en de volgende twee

zinnen tekenen de kris kras lijnen. De eerste twee getallen achter DrawLine geven het startpunt van het

x en y coördinaat in en de en de andere twee geven de eindpunten aan van het x en y coördinaat.

Het interessante met afbeeldingen is dat de coördinaten (0,0) beginnen in de linker bovenhoek van het

venster. Als gevolg , wordt de coördinaten ruimte in het venster het 2de kwadrant genoemd.

Figuur 11 - De coördinaten map

Als we terugkeren naar ons programma, is het interessant om te weten dat Small basic het mogelijk

maakt waarmee je de waarde van de lijn zoals kleur en dikte aan kunt aanpassen. Laten we eerst de

kleur aanpassen van de lijnen zoal in het programma hier beneden.

GraphicsWindow.Width = 200

GraphicsWindow.Height = 200

GraphicsWindow.PenColor = "Green"

GraphicsWindow.DrawLine(10, 10, 100, 100)

GraphicsWindow.PenColor = "Gold"

GraphicsWindow.DrawLine(10, 100, 100, 10)

Figuur 12 – Veranderen van de lijnkleur

Laat ons nu, de afmeting ook veranderen. In het programma hier beneden , veranderen we de lijn

dikte in 10, in plaats van de standaard waarde die altijd 1 is.

Page 29: Introductie Small Basic

GraphicsWindow.Width = 200

GraphicsWindow.Height = 200

GraphicsWindow.PenWidth = 10

GraphicsWindow.PenColor = "Green"

GraphicsWindow.DrawLine(10, 10, 100, 100)

GraphicsWindow.PenColor = "Gold"

GraphicsWindow.DrawLine(10, 100, 100, 10)

Figuur 13 – Dikke kleurvolle lijnen

PenWidth en PenColor passen de pen aan waarmee deze lijnen worden getekend. Niet alleen zijn ze van

invloed op de lijnen maar op elke vorm die getekend worden als de eigenschappen zijn gewijzigd.

Door gebruik te maken van looping statements hebben we geleerd in de voorgaande hoofdstukken, dat

we eenvoudig een programma kunnen schrijven waarmee meerder lijnen met een toenemende

pendikte kan tekenen.

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.Width = 200

GraphicsWindow.Height = 160

GraphicsWindow.PenColor = "Blue"

For i = 1 To 10

GraphicsWindow.PenWidth = i

GraphicsWindow.DrawLine(20, i * 15, 180, i * 15)

endfor

Page 30: Introductie Small Basic

Figuur 14 – Meerdere Pen diktes

Het interessante onderdeel van dit programma is de lus, waar wij, telkens wanneer de lus wordt

uitgevoerd we de waarde van de pendikte met een verhogen en een nieuw lijn tekenen onder de vorige.

Tekenen en het vullen van vormen Als het aankomt op het tekenen en vullen van vormen, zijn er Draw operations en Fill operations.

draw operations tekenen de kantlijn van de vorm door gebruik van de pen, en Fill operations schilderen

de vorm door een kwast. Bijvoorbeeld in het programma hieronder , zijn er twee rechthoeken , een

getekend met een rode pen en een geschilderd met een groene kwast.

GraphicsWindow.Width = 400

GraphicsWindow.Height = 300

GraphicsWindow.PenColor = "Red"

GraphicsWindow.DrawRectangle(20, 20, 300, 60)

GraphicsWindow.BrushColor = "Green"

GraphicsWindow.FillRectangle(60, 100, 300, 60)

Figuur 15 Tekenen en schilderen

Page 31: Introductie Small Basic

Om een rechthoek te tekenen of te schilderen, heb je vier getallen nodig. De eerste twee getallen

vertegenwoordigen de X en Y coördinaten voor de linkerbovenhoek van de rechthoek. Het derde getal

geeft de breedte van de rechthoek aan en het vierde getal geeft de hoogte aan. In feite, gaat het zelfde

op voor het tekenen en schilderen van ellips vormen , zoals hier benden afgebeeld.

GraphicsWindow.Width = 400

GraphicsWindow.Height = 300

GraphicsWindow.PenColor = "Red"

GraphicsWindow.DrawEllipse(20, 20, 300, 60)

GraphicsWindow.BrushColor = "Green"

GraphicsWindow.FillEllipse(60, 100, 300, 60)

Figuur 16 – Tekenen en schilderen van ellipsvormen

Ellipsvormen zijn eigenlijk een algemeen geval van cirkels. Wanneer je cirkels wilt tekenen, moet je de

zelfde breedte en hoogte opgeven.

GraphicsWindow.Width = 400

GraphicsWindow.Height = 300

GraphicsWindow.PenColor = "Red"

GraphicsWindow.DrawEllipse(20, 20, 100, 100)

GraphicsWindow.BrushColor = "Green"

GraphicsWindow.FillEllipse(100, 100, 100, 100)

Page 32: Introductie Small Basic

Figuur 17 – Cirkels

Page 33: Introductie Small Basic

Hoofdstuk 7

Plezier met vormen

We zullen wat plezier gaan maken in dit hoofdstuk met alles wat we tot dusver hebben geleerd. Dit

hoofdstuk bevat voorbeelden die op interessante wijze aangeven hoe je al die kennis gecombineerd

kunt toepassen om er “Cool” uitziende programma’s mee te schrijven.

Rechthoeken feest Hier tekenen we meerdere rechthoeken in een loop, met een toename in afmeting.

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.PenColor = "LightBlue"

GraphicsWindow.Width = 200

GraphicsWindow.Height = 200

For i = 1 To 100 Step 5

GraphicsWindow.DrawRectangle(100 - i, 100 - i, i * 2, i * 2)

EndFor

Page 34: Introductie Small Basic

Figuur 18 – Rechthoeken feest

Circel avontuur Een variant van het voorgaande programma, tekent cirkels in plaats van rechthoeken.

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.PenColor = "LightGreen"

GraphicsWindow.Width = 200

GraphicsWindow.Height = 200

For i = 1 To 100 Step 5

GraphicsWindow.DrawEllipse(100 - i, 100 - i, i * 2, i * 2)

EndFor

Figuur 19 – Cirkel avontuur

Willekeurig (Randomize) Dit programma gebruikt de operation GraphicsWindow.GetRandomColor om willekeurige kleuren in te

stellen voor de kwast en gebruikt daarna Math.GetRandomNumber om de x en y-coördinaten voor de

cirkels in te stellen. Deze twee operations kunnen op interessante wijze worden gecombineerd om

interessante programma’s te schrijven die elke keer als ze worden uitgevoerd verschillende uitvoer laten

zien.

Page 35: Introductie Small Basic

GraphicsWindow.BackgroundColor = "Black"

For i = 1 To 1000

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()

x = Math.GetRandomNumber(640)

y = Math.GetRandomNumber(480)

GraphicsWindow.FillEllipse(x, y, 10, 10)

EndFor

Figuur 20 – Willekeurig (Randomize)

Fractaal1 Het volgende programma tekent een eenvoudige driehoekige fractaal door gebruikte maken van

willekeurige getallen. Een Fractaal is een geometrische vorm die kan worden onderverdeeld in

verschillende delen, die elk exact gelijk zijn aan de moedervorm. In dit geval , tekent het programma

honderden driehoekige vormen die allemaal exact gelijk zijn aan de driehoekige moedervorm. En

vanwege het feit dat het programma in enkele seconden wordt uitgevoerd, zie je de meerkleurige

vormen langzaam ontstaan. De logica erachter is niet eenvoudig te beschrijven en vraagt om wat

oefening voor jou om dat te ontdekken.

1 Een fractal, soms ook fractaal genoemd, is een meetkundige figuur die zelfgelijkend is, d.w.z.

opgebouwd is uit delen die min of meer gelijkvormig zijn met de figuur zelf.

Page 36: Introductie Small Basic

GraphicsWindow.BackgroundColor = "Black"

x = 100

y = 100

For i = 1 To 100000

r = Math.GetRandomNumber(3)

ux = 150

uy = 30

If (r = 1) then

ux = 30

uy = 1000

EndIf

If (r = 2) Then

ux = 1000

uy = 1000

EndIf

x = (x + ux) / 2

y = (y + uy) / 2

GraphicsWindow.SetPixel(x, y, "LightGreen")

EndFor

Figuur 21 – Driehoekige Fractaal

Page 37: Introductie Small Basic

Als je wilt kunnen waarnemen hoe de kleurige punten worden gevormd , kun je een vertraging in de

loop introduceren door het Proram. Delay operation te gebruiken. Deze operatie neemt een getal aan

uitgedrukt in milliseconden, hoe lang de vertraging moet gaan duren. Hieronder het aangepaste

programma met de aangepaste zin in het Vet gedrukt.

GraphicsWindow.BackgroundColor = "Black"

x = 100

y = 100

For i = 1 To 100000

r = Math.GetRandomNumber(3)

ux = 150

uy = 30

If (r = 1) then

ux = 30

uy = 1000

EndIf

If (r = 2) Then

ux = 1000

uy = 1000

EndIf

x = (x + ux) / 2

y = (y + uy) / 2

GraphicsWindow.SetPixel(x, y, "LightGreen")

Program.Delay(2)

EndFor

Maak je de waarde van de vertraging groter dan zal de vertraging langer duren. Experimenteer maar

met de getallen om te zien wat het beste in de smaak valt.

Een andere modificatie die je aan het programma kunt maken is door de volgende zin te vervangen:

GraphicsWindow.SetPixel(x, y, "LightGreen")

Met deze zin

color = GraphicsWindow.GetRandomColor()

GraphicsWindow.SetPixel(x, y, color)

Page 38: Introductie Small Basic

Deze wijziging zorgt ervoor dat het programma de pixels van de driehoekige vormen in willekeurige

kleuren afdrukt.

Page 39: Introductie Small Basic

Hoofdstuk 8

Turtle afbeeldingen

Logo Rond 1970s, was er een eenvoudige en toch krachtige programmeertaal , Logo genaamd die door enkele

onderzoekers werd gebruikt. Dit werd gebruikt totdat iemand iets aan de programmeertaal Logo heeft

toevoegd wat we nu “Turtle afbeeldingen” noemen. Een Turtle (Engelse woord voor schildpad)

verschijnt op het scherm en voert de respectievelijke commando’s Move Forward, Turn Right, Turn Left,

etc. uit. Door gebruik te maken van de Turtle , waren mensen in staat om interessante afbeeldingen op

het scherm te tekenen. Dit zorgde ervoor dat het programma direct in de belangstelling van mensen van

alle leeftijden kwam te staan , en was mede bepalende voor zijn bekendheid rond 1980.

Small Basic bevat ook een Turtle object met veel commando’s die kunnen worden aangeroepen binnen

Small Basic programma’s. In dit hoofdstuk gaan we de Turtle gebruiken om afbeeldingen op het scherm

te tekenen.

De Turtle (schildpad) Om te beginnen, moeten we de Turtle zichtbaar maken op het scherm. Dit kan worden bereikt een

eenvoudige zin aan het programma toe te voegen.

Turtle.Show()

Wanneer je dit programma uitvoert zul je een wit scherm net zoals in het vorige hoofdstuk zien, met als

uitzondering dat in dit scherm we een Turtle in het midden van het scherm aanwezig is. Deze Turtle zal

onze instructies gaan volgen en datgene tekenen wat het opdragen.

Page 40: Introductie Small Basic

Figuur 22 - Turtle is zichtbaar

Verplaatsen en tekenen Een van de instructies die de Turtke begrijpt is Move (engels voor verplaatsen). Deze operatie gebruikt

een getal als input. Dit getal vertelt de Turtle hoe ver hij zich moet verplaatsen. Laten we zeggen, in het

voorbeeld hieronder, vragen we de Turtle om zichzelf 100 pixels te verplaatsen.

Turtle.Move(100)

Wanneer je dit programma uitvoert , zul je de

Turtle zichzelf langzaam 100 pixels omhoog zien

verplaatsen. Terijwl het zich verplaats zal het je

opvallen dat hij een lijn tekent achter zich aan

tekent. Wanneer de Turtle klaar is met zich

verplaatsen , zal het resultaat er uitzien als de

figuur hieronder afgebeeld.

Als we de operations gebruiken op de Turtle, is

het niet echt noodzakelijk om Show() aan te

roepen. De Turtle zal automatisch worden

neergezet en zichtbaar worden gemaakt als ere

en Turtle operation word uitgevoerd.

Page 41: Introductie Small Basic

Figuur 23 – Verplaats honderd pixels

Een rechthoek tekenen Een rechthoek heeft vier zijden, twee verticale en twee horizontale. Om een rechthoek te tekenen

moeten in de gelegenheid zijn om de Turtle een lijn te laten tekenen, rechtsaf te laten slaan en een

andere lijn te tekenen en voort te gaan tot alle vier zijden van de rechthoek getekend zijn.

Als we dit in een programma schrijven, ziet het er zo uit.

Turtle.Move(100)

Turtle.TurnRight()

Turtle.Move(100)

Turtle.TurnRight()

Turtle.Move(100)

Turtle.TurnRight()

Turtle.Move(100)

Turtle.TurnRight()

Wanneer je dit programma uitvoert, zie je de Turtle een rechthoek tekenen, een lijn per keer, en het

resultaat lijkt op het figuur hier beneden.

Page 42: Introductie Small Basic

Figuur 24 - Turtle tekent een rechthoek

Het zal interessant zijn om te weten dat we elke keer weer de zelfde twee instructies gebruiken – vier

keer om precies te zijn. En we hebben geleerd dat repeterende commando’s uitgevoerd kunnen worden

in een loop. Dus als we het programma van hierboven nemen en het aanpassen om gebruik te maken

van de For..EndFor loop, krijgen we uiteindelijk een eenvoudiger programma

For i = 1 To 4

Turtle.Move(100)

Turtle.TurnRight()

EndFor

Veranderen van kleur De Turtle tekent op exact hetzelfde GraphicsWindow wat we gezien hebben in het voorgaan de

hoofdstuk. Dit betekend dat alle operations die we in het voorgaande hoofdstuk hebben geleerd nog

steeds geldig zijn. Bijvoorbeeld, het volgende programma tekent een rechthoek met elke zijde in een

verschillende kleur.

For i = 1 To 4

GraphicsWindow.PenColor = GraphicsWindow.GetRandomColor()

Turtle.Move(100)

Turtle.TurnRight()

EndFor

Page 43: Introductie Small Basic

Figuur 25 – Veranderende kleuren

Complexe vormen tekenen De Turtle, heeft buiten de TurnRight en TurnLeft operations, nog een Turn operation. Deze operation

gebruikt een input die aangeeft hoe groot de hoek moet zijn waarop de Turtle op zijn as draait. Door

gebruik te maken van deze operation, is het mogelijk elke veelhoek te tekenen. Het volgende

programma tekent een zeshoek (hexagon )een zesvoudige veelhoek.

For i = 1 To 6

Turtle.Move(100)

Turtle.Turn(60)

EndFor

Probeer dit programma om te zien of er daadwerkelijk een veelhoek wordt getekend. Observeer dat

omdat tussen de zijden de draaihoek 60 graden is, we Turn(60) gebruiken. Om zo een zeshoek te

tekenen, waarvan alle zijden gelijk zijn, kan de hoek tussen de zijden eenvoudig worden gevonden door

360 te delen door het aantal zijden. Gewapend met deze informatie en door gebruik te maken van

variabelen, kunnen we een prima generiek programma schrijven waarmee elke veelhoek kan worden

getekend.

Page 44: Introductie Small Basic

sides = 12

length = 400 / sides

angle = 360 / sides

For i = 1 To sides

Turtle.Move(length)

Turtle.Turn(angle)

EndFor

Door gebruik te maken van dit programma, kunt u elke veelhoek tekenen door eenvoudig de sides

(zijde) variabele te wijzigen . Door hier 4 in te vullen krijgen we een vierkant waar we mee zijn gestart.

Vullen we hier een aanzienlijk groter getal in, laten we zeggen 50 is het resultaat bijna niet meer te

onderscheiden van een cirkel.

Figuur 26 – Tekenen van een 12-zijdige veelhoek

Door gebruik te maken van deze techniek die we zojuist hebben geleerd, kunnen we de Turtle meerdere

cirkels laten tekenen met een kleine verschuiving

die resulteert in een interessante uitkomst.

In programma hierboven , lieten we de Turtle

sneller gaan door de snelheid op 9 in te stellen.

Je kunt deze waarde op elke waarde tussen 1

en 10 instellen om de Turtle zo snel te laten

gaan als je zelf wilt..

Page 45: Introductie Small Basic

sides = 50

length = 400 / sides

angle = 360 / sides

Turtle.Speed = 9

For j = 1 To 20

For i = 1 To sides

Turtle.Move(length)

Turtle.Turn(angle)

EndFor

Turtle.Turn(18)

EndFor

Het programma hierboven heeft twee For..EndFor loops, een binnen de ander. De binnenste loop (i = 1

to sides) lijkt op het veelhoek programma en is verantwoordelijk voor het tekenen van de cirkel. De

buitenste loop (j = 1 to 20) is verantwoordelijk voor een kleine draai van de Turtle voor elke cirkel die

wordt getekend. De buitenste loop vertelt de Turtle om 20 cirkels tekenen, en als deze zijn

samengesteld, laat het programma een interessant patroon zien zoals hier beneden afgebeeld.

Figuur 27 – In rondjes lopen

Page 46: Introductie Small Basic

Bewegen Je kunt de Turtle vertellen om niet te tekenen door PenUp operatie te gebruiken. Dit laat je de Turtle

naar elke plek op het scherm verplaatsen zonder het tekenen van een lijn. Het gebruiken van PenDown

laat de Turtle weer tekenen. Dit kan worden gebruikt om interessante effecten te krijgen , laten we

zeggen een stippellijn. Hier is een programma die dit gebruikt om een gestippelde veelhoek te tekenen.

zijden = 6

length = 400 / zijden

angle = 360 / zijden

For i = 1 To zijden

For j = 1 To 6

Turtle.Move(length / 12)

Turtle.PenUp()

Turtle.Move(length / 12)

Turtle.PenDown()

EndFor

Turtle.Turn(angle)

EndFor

Ook nu weer heeft het programma twee loops. De binnenste (inner ) loop tekent een enkele

gestippelde lijn, terwijl de buitenste (outer) loop aangeeft hoe veel keer de lijnen moeten woerden

getekend. In ons voorbeeld, hebben we 6 gebruikt voor de zijden variabele en we kregen een

gestippelde zeshoek .

Figuur 28 – Gebruik maken van PenUp en PenDown

Page 47: Introductie Small Basic

Hoofdstuk 9

Subroutines

Vaak komen we in programma’s de noodzaak tegen om keer op keer dezelfde stappenvolgorde uit te

voeren. In deze gevallen , is het vast niet raadzaam om dezelfde statements elke keer opnieuw in te

typen. Hier komen Subroutines erg van pas.

Een subroutine is een deel van de code binnen een groter programma wat normaliter iets heel

specifieks uitvoert. Subroutines worden aangeduid met een naam die achter het Sub sleutelwoord volgt

en wordt afgesloten met het EndSub sleutelwoord. Bijvoorbeeld, het volgende zinsnede

vertegenwoordigt een subroutine waarvan de naam PrintTijd is , en waarmee de huidige tijd wordt

afgedrukt op het TextWindow.

Sub PrintTijD

TextWindow.WriteLine(Clock.Time)

EndSub

Hieronder is een programma dat een subroutine bevat die vanuit verschillende plekken in het

programma worden aangeroepen.

PrintTijd()

TextWindow.Write("Geef hier jouw naam op: ")

naam = TextWindow.Read()

TextWindow.Write(name + ", de tijd is nu: ")

PrintTijd()

Sub PrintTijd

Page 48: Introductie Small Basic

TextWindow.WriteLine(Clock.Time)

EndSub

Figuur 29 – Het aanroepen van een eenvoudige Subroutine

Je voert een subroutine uit door het aanroepen van de SubroutineNaam(). Gebruikelijk, is de

punctuatie “()” nodig om de computer te vertellen dat je een subroutine wenst uit te voeren.

Voordelen van het gebruik van Subroutines Zoals we zojuist hierboven hebben kunnen zien , helpen subroutines de hoeveelheid code te

verminderen die je moet intypen. Wanneer je eenmaal de PrintTijd subroutine hebt geschreven , kun je

het aanroepen van elke plek in jouw programma en de huidige tijd laten afdrukken op het scherm.

Als toevoeging, kunnen subroutines helpen moeilijke problemen onder te verdelen in kleinere minder

moeilijke delen. Laten we zeggen dat je een moeilijke vergelijking moet oplossen, nu kun je

verschillende subroutines schrijven waarmee kleine deelproblemen van de moeilijke vergelijking worden

berekend. Daarna kun je de resultaten samenvoegen om de oplossing van de moeilijke vergelijking weer

te geven.

Subroutines kunnen ook behulpzaam zijn in het bevorderen van de leesbaarheid van een programma.

Met andere woorden, als je goed benoemde subroutines voor algemeen uitgevoerde berekeningen

delen van jouw programma gebruikt, wordt jouw programma beter leesbaar en te begrijpen. Dit is heel

belangrijk als je een programma wilt lezen en begrijpen van een ander of wanneer jouw programma

moet worden begrepen door anderen die het lezen. Soms is het zelfs behulpzaam als je jouw eigen

programma terugleest, laten we zeggen een week nadat je het hebt geschreven.

Het gebruik van variabelen Je kunt elke variabele waarde gebruiken in een programma vanuit een subroutine. Als voorbeeld,

accepteert het volgende programma twee getallen en print het hoogste getal van de twee. Noteer dat

de variabele max binnen en buiten de subroutine wordt gebruikt

Page 49: Introductie Small Basic

TextWindow.Write("Voer het eerste getal in: ")

Getal1 = TextWindow.ReadNumber()

TextWindow.Write("voer het tweede getal in: ")

Getal2 = TextWindow.ReadNumber()

FindMax()

TextWindow.WriteLine("Het maximale getal is: " + max)

Sub FindMax

If (getal1 > getal2) Then

max = getal1

Else

max = getal2

EndIf

EndSub

En de uitvoer van het programma ziet er als volgt uit.

Figuur 30 – Maximale getal uit twee getallen via een Subroutine

Laat ons eens kijken naar een ander voorbeeld waarmee we het gebruik van subroutines willen

aangeven. Deze keer gebruiken we een grafisch programma dat verschillende punten uitrekent die het

stopt in de variabelen x en y. Daarna roept het een subroutine aan DrawCircleUsingCenter wat

verantwoordelijk is voor het tekenen van een cirkel die gebruik maakt van x en y als middelpunt.

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.PenColor = "LightBlue"

GraphicsWindow.Width = 480

For i = 0 To 6.4 Step 0.17

x = Math.Sin(i) * 100 + 200

y = Math.Cos(i) * 100 + 200

DrawCircleUsingCenter()

EndFor

Sub DrawCircleUsingCenter

startX = x - 40

Page 50: Introductie Small Basic

startY = y - 40

GraphicsWindow.DrawEllipse(startX, startY, 120, 120)

EndSub

Figuur 31 – Grafisch voorbeeld in het gebruik van Subroutines

Aanroepen van subroutines binnen Loops Soms worden subroutines aangeroepen vanuit het binnenste van een Loop. Waarin zij dezelfde set

statements uitvoeren echter nu met de verschillende waarden in een of meer van de gebruikte

variabelen. Bijvoorbeeld , laten we zeggen dat een subroutine gebruikt die je PriemGetalTest hebt

genoemd en deze subroutine stelt vast of een getal een priemgetal is Ja of nee. Je kunt nu een

programma schrijven waarmee de gebruiker een getal mag intypen en jij kunt zeggen of het een

priemgetal is Ja of Nee, door gebruik te maken van de subroutine. Het programma hier benden

illustreert dat.

Page 51: Introductie Small Basic

TextWindow.Write("Voer een getal in: ")

i = TextWindow.ReadNumber()

isPriemgetal = "True"

PriemGetalTest()

If (isPriemgetal = "True") Then

TextWindow.WriteLine(i + " is een priemgetal")

Else

TextWindow.WriteLine(i + " is geen priemgetal")

EndIf

Sub PriemGetalTest

For j = 2 To Math.SquareRoot(i)

If (Math.Remainder(i, j) = 0) Then

isPriemgetal = "False"

Goto EndLoop

EndIf

Endfor

EndLoop:

EndSub

De PriemGetalTest subroutine neemt de waarde van i en probeert het te delen door kleinere getallen.

Wanneer een getal i deelt en er geen rest over blijft, dan is i geen priemgetal. Op dit moment wordt de

waarde isPriemgetal op “False” gezet en sluit af. Als het getal niet meer deelbaar was door kleinere

getallen dan blijft de waarde van isPriemgetal als “True” over.

Figuur 32 – Priemgetal testen

Nu je een subroutine hebt gemaakt waarmee je de priemgetal test voor ons kunt uitvoeren, wil je

misschien een lijst maken van alle priemgetallen zeg onder de 100. Het is zeer eenvoudig om het

programma hiervoor aan te passen en de aanroep van PriemGetalTest binnen een loop te maken. Dit

zorgt ervoor dat de subroutine elke keer een andere waarde krijgt om te berekenen zodra de loop wordt

uitgevoerd. Laten we eens zien hoe dit gebeurt aan de hand van het voorbeeld hier beneden.

Page 52: Introductie Small Basic

For i = 3 To 100

isPriemgetal = "True"

PriemGetalTest()

If (isPriemgetal = "True") Then

TextWindow.WriteLine(i)

EndIf

EndFor

Sub PriemGetalTest

For j = 2 To Math.SquareRoot(i)

If (Math.Remainder(i, j) = 0) Then

isPriemgetal = "False"

Goto EndLoop

EndIf

Endfor

EndLoop:

EndSub

In het programma hierboven , wordt de waarde van i elke keer opgewaardeerd telkens wanneer de

loop word uitgevoerd. Binnen de loop, word een aanroep naar de subroutine PriemGetalTest gedaan.

De subroutine PriemGetalTest neemt daarna de waarde van i en berekent of i een priemgetal is. Dit

resultaat wordt opgeslagen in de variabele isPriemgetal waarna het wordt gebruikt door de loop buiten

de subroutine. De waarde van i wordt dan afgedrukt op het scherm omdat het een priemgetal betreft.

En omdat de loop vanaf het getal 3 begint en doorloopt tot 100, krijgen we een lijst met alle

priemgetallen tussen 3 en 100. Hieronder is het resultaat van het programma.

Figuur 33 – Priemgetallen

Page 53: Introductie Small Basic

Hoofdstuk 10

Matrix (Arrays)

Nu zul je goed uitgerust zijn met kennis rond het gebruik van variabelen – je bent hier aangekomen en je

hebt er nog steeds plezier in, is het niet?

Laten we op dit moment het eerste progamma nogmaals bekijken wat we met variabelen hebben

geschreven:

TextWindow.Write("Geef jouw naam: ")

naam = TextWindow.Read()

TextWindow.WriteLine("Hallo " + naam)

In dit programma, ontvangen en slaan we de naam op van de gebruiker in een variabele gebruiker

genaamd. Laat ons aannemen dat er meer dan een gebruiker is – zeg dat er 5 gebruikers zijn.

Maar hoe sla je nu al hun namen op? Een van de manieren is als volgt:

TextWindow.Write("Gebruiker1, voer jouw naam in: ")

name1 = TextWindow.Read()

TextWindow.Write("Gebruiker2, voer jouw naam in: ")

naam2 = TextWindow.Read()

TextWindow.Write("Gebruiker3, voer jouw naam in: ")

naam3 = TextWindow.Read()

TextWindow.Write("Gebruiker4, voer jouw naam in: ")

naam4 = TextWindow.Read()

TextWindow.Write("Gebruiker5, voer jouw naam in: ")

naam5 = TextWindow.Read()

Page 54: Introductie Small Basic

TextWindow.Write("Hallo ")

TextWindow.Write(naam1 + ", ")

TextWindow.Write(naam2 + ", ")

TextWindow.Write(naam3 + ", ")

TextWindow.Write(naam4 + ", ")

TextWindow.WriteLine(naam5)

Wanneer je dit programma uitvoert krijg je het volgende resultaat:

Figuur 34 – Geen gebruik maken van een matrix

Het zou voor de hand liggen dat er een betere manier moet zijn om een dergelijk eenvoudig programma

te schrijven, is het niet? Zeker als we weten dat de computer erg krachtig is wanneer er wederkerende

taken moeten worden uitgevoerd. Waarom zouden we de moeite nemen om dezelfde code voor elke

nieuwe gebruiker opnieuw te schrijven? De truc is om meer dan een gebruikers naam op te slaan en op

te vragen gebruikmakend van dezelfde variabele. Als dat kan dan kunnen we gebruik maken van een For

loop waarover we geleerd hebben in voorgaande hoofdstukken. Hier is het gebruik van een matrix

behulpzaam.

Wat is een matrix? Een matrix is een speciale vorm van een variabele waarin meer dan een waarde per keer in kan worden

opgeslagen. Dit houd in dat we in plaats van het aanleggen van de variabelen naam1, naam2, naam3,

naam4 en naam5 om vijf gebruikersnamen in op te slaan, gebruiken we alleen naam om er alle vijf

gebruikersnamen in op te nemen. De manier waarop we meerdere variabelen kunnen opslaan is door

gebruik te maken van een zogenaamde “index”. Bijvoorbeeld , naam[1], naam[2], naam[3], naam[4] en

naam[5] kunnen elk een eigen waarde bevatten. De waarden 1,2,3,4,5 worden indices genoemd van de

matrix.

Zelfs als naam[1], naam[2], naam[3], naam[4] en naam[5] eruit zien als verschillende variabelen, zijn zij

eigenlijk één variabele. Wat is hier het voordeel van , vraag je jezelf af? Het mooie van opslaan van

variabelen in een matrix is dat je de index kunt aangeven door middel van een andere variabele –

waarmee we gemakkelijk toegang krijgen tot waarden in een matrix in een Loop.

Page 55: Introductie Small Basic

Welnu, laat we eens kijken hoe we deze nieuwe kennis kunnen gebruiken door het voorgaand

programma te herschrijven met een matrix.

For i = 1 To 5

TextWindow.Write("Gebruiker" + i + ", geef uw naam op: ")

naam[i] = TextWindow.Read()

EndFor

TextWindow.Write("Hallo ")

For i = 1 To 5

TextWindow.Write(naam[i] + ", ")

EndFor

TextWindow.WriteLine("")

Veel gemakkelijker om te lezen, niet? Let op de twee vetgedrukte zinnen. De eerste slaat de waarde in

de matrix op en de tweede haalt de waarde op uit de matrix. De waarde in naam[1] wordt niet

beïnvloed door de waarde door wat je opslaat als waarde in naam[2]. Vandaar dat je voor algemeen

gebruik je naam[1] en naam[2] als twee verschillende variabelen kunt beschouwen met dezelfde

identiteit.

Figuur 35 – Een matrix gebruiken

Het hierboven afgebeelde programma geeft bijna dezelfde uitkomst als hetgeen zonder matrix, met als

uitzondering de komma op het eind van Mantis. We kunnen dit oplossen door de printloop als volgt te

herschrijven:

TextWindow.Write("Hallo ")

For i = 1 To 5

TextWindow.Write(naam[i])

If i < 5 Then

TextWindow.Write(", ")

EndIf

EndFor

Page 56: Introductie Small Basic

TextWindow.WriteLine("")

Indexering van een matrix In ons vorige programma zag u dat we getallen gebruikten als indices om de waarden in op te slaan en

op te vragen uit de matrix. Blijkbaar zijn indices niet beperkt tot getallen en in de praktijk is het erg

handig om ook tekstuele indices te gebruiken. Bijvoorbeeld, in het volgende programma , vragen we om

verschillende gegevens van een gebruiker en printen dan de informatie waar hij/zij om vraagt.

TextWindow.Write("Geef uw naam op: ")

Gebruiker["naam"] = TextWindow.Read()

TextWindow.Write("Enter age: ")

Gebruiker["leeftijd"] = TextWindow.Read()

TextWindow.Write("Geef uw woonplaats op: ")

Gebruiker["stad"] = TextWindow.Read()

TextWindow.Write("Enter zip: ")

Gebruiker["postcode"] = TextWindow.Read()

TextWindow.Write("Welke informatie heeft u nodig? ")

index = TextWindow.Read()

TextWindow.WriteLine(index + " = " + Gebruiker[index])

Figuur 36 – Gebruik maken van niet-numerieke indices

Page 57: Introductie Small Basic

Meer dan een dimensie Laten we zeggen dat je de naam en het telefoonnummer van al jouw vrienden wilt opslaan en daarna

wilt kunnen opzoeken wanneer je dat wenst – net als een telefoonboek. Hoe zouden we zo’n

programma schrijven? In dit geval, zijn er twee sets indices (ookwel bekend als de matrix dimensie) bij

betrokken. Nemen we aan dat we onze vrienden identificeren aan een de hand van een koosnaam. Dit

wordt de eerste index in onze matrix. Wanneer we de eerste index gebruiken om de vriend variabele te

achterhalen, de tweede set van indices , naam en telefoon helpen ons om de actuele naam en

telefoonnummer van deze vriend of vriendin te achterhalen.

De manier waarop we deze gegevens opslaan is als volgt:

vrienden["Rob"]["Naam"] = "Robert"

vrienden["Rob"]["Telefoon"] = "012-3456789"

vrienden["VJ"]["Naam"] = "Vijaye"

vrienden["VJ"]["Telefoon"] = "012-9456783"

vrienden["Ash"]["Naam"] = "Ashley"

vrienden["Ash"]["Telefoon"] = "014-3256789"

Omdat we een twee indices hebben op dezelfde matrix , vrienden, wordt deze matrix een

tweedimensionale matrix genoemd.

Nadat we dit programma hebben geladen , kunnen we de koosnaam als invoer voor een vriend nemen

en die informatie op het scherm printen die we van hen hebben opgeslagen. Hieronder het programma

wat dat uitvoert:

vrienden["Rob"]["Naam"] = "Robert"

vrienden["Rob"]["Telefoon"] = "012-3456789"

vrienden["VJ"]["Naam"] = "Vijaye"

vrienden["VJ"]["Telefoon"] = "012-9456783"

vrienden["Ash"]["Naam"] = "Ashley"

vrienden["Ash"]["Telefoon"] = "014-3256789"

Page 58: Introductie Small Basic

TextWindow.Write("Geef de koosnaam op: ")

koosnaam = TextWindow.Read()

TextWindow.WriteLine("Naam: " + vrienden[koosnaam]["Naam"])

TextWindow.WriteLine("Telefoon: " + vrienden[koosnaam]["Telefoon"])

Figuur 37 – een eenvoudig telefoonboek

Gebruik maken van matrices om roosters voor te stellen Een veelvoudig gebruik van Multi dimensionale matrices dient als voorstelling van roosters/tabellen.

Roosters hebben rijen en kolommen, die mooi passen in een twee dimensionale matrix. Een eenvoudig

programma dat vierkantjes in een rooster plaatst vindt je hier beneden:

rows = 8

columns = 8

size = 40

For r = 1 To rows

For c = 1 To columns

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()

boxes[r][c] = Shapes.AddRectangle(size, size)

Shapes.Move(boxes[r][c], c * size, r * size)

EndFor

EndFor

Dit programma voegt rechthoeken toe en positioneert hen in een 8x8 rooster. Bovendien slaat het

boven op de plaatsing van de rechthoeken deze ook op in een matrix. Hierdoor wordt het vinden van de

rechthoeken en hergebruik gemakkelijker.

Page 59: Introductie Small Basic

Figuur 38 – Lay-out van rechthoeken in een rooster

Bijvoorbeeld, door het toevoegen van de volgende code aan het eind van het programma , verplaatsen

alle rechthoeken in het rooster zich naar de linkerbovenhoek.

For r = 1 To rows

For c = 1 To columns

Shapes.Animate(boxes[r][c], 0, 0, 1000)

Program.Delay(300)

EndFor

EndFor

Page 60: Introductie Small Basic

Figuur 39 – Bijhouden van rechthoeken in een rooster

Page 61: Introductie Small Basic

Hoofdstuk 11

Gebeurtenissen en Interactiviteit

In de eerste twee hoofdstukken, hebben we objecten geïntroduceerd die beschikken over

eigenschappen en bewerkingen. Als toevoeging op eigenschappen en bewerkingen hebben sommige

objecten ook wat we Gebeurtenis (Event) noemen. Gebeurtenissen( Events) lijken op signalen die

opgeworpen worden, bijvoorbeeld, als antwoord op acties van gebruikers, zoals het verplaatsen van de

muis of een muisklik. Je zou kunnen zeggen dat een gebeurtenis tegenovergesteld is aan een

bewerking. Jij als programmeur benoemt de bewerking om de computer iets uit te voeren, terwijl in het

geval van een gebeurtenis de computer jou laat weten dat er iets interessants heeft plaatsgevonden.

Hoe gebruiken we gebeurtenis? Gebeurtenissen (Events) zijn belangrijk bij het introduceren van interactiviteit in een programma. Als je

de gebruiker wilt toestaan om interactief om te gaan starten met jouw programma, zul je een

gebeurtenis gebruiken. Laten we zeggen , je maakt een boter, kaas en eierenspel. Dan wil je dat de

gebruiker zijn/haar spel kan beginnen, toch? Hier is waar gebeurtenissen zich aandienen- je ontvangt

gebruikersinvoer vanuit jouw programma door gebruik te maken van gebeurtenissen.(Events)

Het lijkt misschien moeilijk te bevatten, maar maak je geen zorgen, we nemen een kijkje in een

eenvoudig voorbeeld waarmee je geholpen wordt om te begrijpen wat gebeurtenissen zijn en hoe zij

gebruikt kunnen worden.

Hieronder staat een eenvoudig programma wat uit een statement en een subroutine bestaat. De

subroutine gebruikt de ShowMessage bewerking op het GraphicsWindow object om een boodschap

blokje aan de gebruiker te laten zien.

Page 62: Introductie Small Basic

GraphicsWindow.MouseDown = OnMouseDown

Sub OnMouseDown

GraphicsWindow.ShowMessage("Je hebt op de muis geklikt.", "Hallo")

EndSub

Het interessante deel in het programma om te begrijpen is de zin waar we de subroutine naam

toekennen aan de MouseDown gebeurtenis van het GraphicsWindow object. Het zal je opvallen dat

MouseDown veel lijkt op een eigenschap – met als uitzondering dat in plaats van een waarde

toekennen, kennen we de subroutine OnMouseDown eraan toe. Dat maakt gebeurtenissen zo speciaal

– wanneer er gebeurtenissen plaatsvinden, wordt de subroutine automatisch aangeroepen. In dit geval ,

wordt de subroutine OnMouseDown elke keer aangeroepen wanneer de gebruiker op de muisknop

klikt, binnen het GraphicsWindow. Ga je gang, en voer het programma uit en probeer het eens. Elke

keer je op de muisknop klikt in het GraphicsWindow venster , zie je een boodschappen blokje

verschijnen net als op het plaatje hier beneden.

Figuur 40 – Respons op een gebeurtenis

Deze vorm van gebeurtenis afhandeling is zeer krachtig en geeft de mogelijkheden voor zer creatieve en

interessante programma’s. Programma’s die op deze manier geschreven zijn noemen we gebeurtenis

gedreven programmatuur (Event-Driven)

Je kunt de subroutine OnMouseDown andere dingen laten doen als het laten zien van een

boodschappen tekstblok. Bijvoorbeeld, net als in het programma hieronder, kun je blauwe punten

tekenen waar de gebruiker de muis aanklikt.

GraphicsWindow.BrushColor = "Blue"

GraphicsWindow.MouseDown = OnMouseDown

Sub OnMouseDown

x = GraphicsWindow.MouseX - 10

y = GraphicsWindow.MouseY - 10

Page 63: Introductie Small Basic

GraphicsWindow.FillEllipse(x, y, 20, 20)

EndSub

Figuur 41 – Afhandeling Mouse Down Gebeurtenissen

Noteer dat in het programma hierboven , we MouseX en MouseY gebruiken om de muis coördinaten te

krijgen. Daarna gebruiken we deze om een cirkel te tekenen met de muis coördinaten als middelpunt.

Afhandeling van meerdere gebeurtenissen Er zijn geen beperkingen aan hoeveel gebeurtenissen je wenst af te handelen. Je kunt zelfs een

subroutine hebben waarin je meerdere gebeurtenissen afhandelt. Echter, je kunt gebeurtenis maar één

keer afhandelen, als je probeert twee subroutines aan dezelfde gebeurtenis toe te kennen , dan wint de

tweede.

Om dit duidelijk te maken , nemen we het vorige voorbeeld en voegen een subroutine toe , waarmee

we toetsindrukken afhandelen. Laten we ook deze nieuwe subroutine de kleur van de kwast wijzigen ,

waardoor je een verschillende gekleurde punt krijgt.

Page 64: Introductie Small Basic

GraphicsWindow.BrushColor = "Blue"

GraphicsWindow.MouseDown = OnMouseDown

GraphicsWindow.KeyDown = OnKeyDown

Sub OnKeyDown

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()

EndSub

Sub OnMouseDown

x = GraphicsWindow.MouseX - 10

y = GraphicsWindow.MouseY - 10

GraphicsWindow.FillEllipse(x, y, 20, 20)

EndSub

Figuur 42 – afhandelen van meerdere gebeurtenissen

Als je het programma hebt uitgevoerd en op het scherm hebt geklikt, krijg je een blauwe punt. Wanneer

je nu op een toets drukt en nogmaals klikt, krijg je een andere kleur. Wat er gebeurt is dat wanneer je

een toets indrukt de subroutine OnKeydown wordt uitgevoerd waardoor de kleur willekeurig wordt

gewijzigd. Hierna wordt er wanneer je de muisknop klit een cirkel getekend, gebruik makend van de ze

nieuwe kleur. Zo worden er willekeurige kleuren gevormd.

Page 65: Introductie Small Basic

Een teken programma Uitgerust met gebeurtenissen en subroutines, kunnen we nu een programma schrijven waarmee

gebruikers op het scherm kunnen tekenen. Het is verassend eenvoudig om zo een programma te

schrijven, vooropgesteld dat er het probleem onderverdelen in kleinere delen. Als eerste stap , schrijven

wen een programma waarmee de gebruiker instaat is om de muis overal op het GraphicsWindows

scherm te plaatsen, een spoor achterlatend wanneer ze de muis bewegen.

GraphicsWindow.MouseMove = OnMouseMove

Sub OnMouseMove

x = GraphicsWindow.MouseX

y = GraphicsWindow.MouseY

GraphicsWindow.DrawLine(prevX, prevY, x, y)

prevX = x

prevY = y

EndSub

Echter als je dit programma uitvoert, start de eerste lijn altijd van de linker bovenhoek van het venster

(0,0). Dit kunnen we oplossen door het afhandelen van de MouseDown gebeurtenis en het opvangen

deze waarden in prevX en prevY wanneer de gebeurtenis plaatsvindt.

Ook hebben we alleen het spoor nodig als de gebruiker de muisknop ingedrukt heeft. Anders zouden we

de lijn niet tekenen. Om dit gedrag te krijgen, gebruiken we de IsLeftButtonDown eigenschap van het

Mouse muisobject. Deze eigenschap verteld wanneer de linkermuisknop is ingedrukt of niet. Wanneer

deze waarde waar is , tekenen we de lijn, anders slaan we deze lijn over.

GraphicsWindow.MouseMove = OnMouseMove

GraphicsWindow.MouseDown = OnMouseDown

Sub OnMouseDown

prevX = GraphicsWindow.MouseX

prevY = GraphicsWindow.MouseY

EndSub

Sub OnMouseMove

x = GraphicsWindow.MouseX

y = GraphicsWindow.MouseY

If (Mouse.IsLeftButtonDown) Then

GraphicsWindow.DrawLine(prevX, prevY, x, y)

EndIf

prevX = x

prevY = y

Page 66: Introductie Small Basic

EndSub

Page 67: Introductie Small Basic

Appendix A

Fun voorbeelden

Turtle Fractal

Figuur 43 - Turtle tekent een boom fractal

angle = 30

delta = 10

distance = 60

Turtle.Speed = 9

Page 68: Introductie Small Basic

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.PenColor = "LightGreen"

TekenBoom()

Sub TekenBoom

If (distance > 0) Then

Turtle.Move(distance)

Turtle.Turn(angle)

Stack.PushValue("distance", distance)

distance = distance - delta

TekenBoom()

Turtle.Turn(-angle * 2)

TekenBoom()

Turtle.Turn(angle)

distance = Stack.PopValue("distance")

Turtle.Move(-distance)

EndIf

EndSub

Foto’s van Flickr

Figuur 44 – Ophalen van afbeeldingen van Flickr

Page 69: Introductie Small Basic

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.MouseDown = OnMouseDown

Sub OnMouseDown

pic = Flickr.GetRandomPicture("mountains, river")

GraphicsWindow.DrawResizedImage(pic, 0, 0, 640, 480)

EndSub

Dynamische bureaublad achtergrond

For i = 1 To 10

pic = Flickr.GetRandomPicture("mountains")

Desktop.SetWallPaper(pic)

Program.Delay(10000)

EndFor

Paddle Spel

Figuur 45 - Paddle Spel

Page 70: Introductie Small Basic

GraphicsWindow.BackgroundColor = "DarkBlue"

paddle = Shapes.AddRectangle(120, 12)

ball = Shapes.AddEllipse(16, 16)

GraphicsWindow.MouseMove = OnMouseMove

x = 0

y = 0

deltaX = 1

deltaY = 1

RunLoop:

x = x + deltaX

y = y + deltaY

gw = GraphicsWindow.Width

gh = GraphicsWindow.Height

If (x >= gw - 16 or x <= 0) Then

deltaX = -deltaX

EndIf

If (y <= 0) Then

deltaY = -deltaY

EndIf

padX = Shapes.GetLeft (paddle)

If (y = gh - 28 and x >= padX and x <= padX + 120) Then

deltaY = -deltaY

EndIf

Shapes.Move(ball, x, y)

Program.Delay(5)

If (y < gh) Then

Goto RunLoop

EndIf

GraphicsWindow.ShowMessage("Je hebt Verloren", "Paddle")

Sub OnMouseMove

paddleX = GraphicsWindow.MouseX

Shapes.Move(paddle, paddleX - 60, GraphicsWindow.Height - 12)

EndSub

Page 71: Introductie Small Basic
Page 72: Introductie Small Basic

Appendix B

Kleuren

Hier is een lijst met benoemde kleuren die in Small Basic worden ondersteund, gecategoriseerd door

middel van hun basis tint.

Rode kleuren

IndianRed #CD5C5C

LightCoral #F08080

Salmon #FA8072

DarkSalmon #E9967A

LightSalmon #FFA07A

Crimson #DC143C

Red #FF0000

FireBrick #B22222

DarkRed #8B0000

Roze Kleuren

Pink #FFC0CB

LightPink #FFB6C1

HotPink #FF69B4

DeepPink #FF1493

MediumVioletRed #C71585

PaleVioletRed #DB7093

Oranje Kleuren

LightSalmon #FFA07A

Coral #FF7F50

Tomato #FF6347

OrangeRed #FF4500

DarkOrange #FF8C00

Orange #FFA500

Gele kleuren

Gold #FFD700

Yellow #FFFF00

LightYellow #FFFFE0

LemonChiffon #FFFACD

LightGoldenrodYellow #FAFAD2

PapayaWhip #FFEFD5

Moccasin #FFE4B5

Page 73: Introductie Small Basic

PeachPuff #FFDAB9

PaleGoldenrod #EEE8AA

Khaki #F0E68C

DarkKhaki #BDB76B

Purper kleuren

Lavender #E6E6FA

Thistle #D8BFD8

Plum #DDA0DD

Violet #EE82EE

Orchid #DA70D6

Fuchsia #FF00FF

Magenta #FF00FF

MediumOrchid #BA55D3

MediumPurple #9370DB

BlueViolet #8A2BE2

DarkViolet #9400D3

DarkOrchid #9932CC

DarkMagenta #8B008B

Purple #800080

Indigo #4B0082

SlateBlue #6A5ACD

DarkSlateBlue #483D8B

MediumSlateBlue #7B68EE

Groene kleuren

GreenYellow #ADFF2F

Chartreuse #7FFF00

LawnGreen #7CFC00

Lime #00FF00

LimeGreen #32CD32

PaleGreen #98FB98

LightGreen #90EE90

MediumSpringGreen #00FA9A

SpringGreen #00FF7F

MediumSeaGreen #3CB371

SeaGreen #2E8B57

ForestGreen #228B22

Green #008000

DarkGreen #006400

YellowGreen #9ACD32

OliveDrab #6B8E23

Olive #808000

DarkOliveGreen #556B2F

MediumAquamarine #66CDAA

DarkSeaGreen #8FBC8F

LightSeaGreen #20B2AA

DarkCyan #008B8B

Teal #008080

Blauwe kleuren

Aqua #00FFFF

Cyan #00FFFF

LightCyan #E0FFFF

PaleTurquoise #AFEEEE

Aquamarine #7FFFD4

Turquoise #40E0D0

MediumTurquoise #48D1CC

DarkTurquoise #00CED1

CadetBlue #5F9EA0

SteelBlue #4682B4

LightSteelBlue #B0C4DE

PowderBlue #B0E0E6

LightBlue #ADD8E6

Page 74: Introductie Small Basic

SkyBlue #87CEEB

LightSkyBlue #87CEFA

DeepSkyBlue #00BFFF

DodgerBlue #1E90FF

CornflowerBlue #6495ED

MediumSlateBlue #7B68EE

RoyalBlue #4169E1

Blue #0000FF

MediumBlue #0000CD

DarkBlue #00008B

Navy #000080

MidnightBlue #191970

Bruine kleuren

Cornsilk #FFF8DC

BlanchedAlmond #FFEBCD

Bisque #FFE4C4

NavajoWhite #FFDEAD

Wheat #F5DEB3

BurlyWood #DEB887

Tan #D2B48C

RosyBrown #BC8F8F

SandyBrown #F4A460

Goldenrod #DAA520

DarkGoldenrod #B8860B

Peru #CD853F

Chocolate #D2691E

SaddleBrown #8B4513

Sienna #A0522D

Brown #A52A2A

Maroon #800000

Witte kleuren

White #FFFFFF

Snow #FFFAFA

Honeydew #F0FFF0

MintCream #F5FFFA

Azure #F0FFFF

AliceBlue #F0F8FF

GhostWhite #F8F8FF

WhiteSmoke #F5F5F5

Seashell #FFF5EE

Beige #F5F5DC

OldLace #FDF5E6

FloralWhite #FFFAF0

Ivory #FFFFF0

AntiqueWhite #FAEBD7

Linen #FAF0E6

LavenderBlush #FFF0F5

MistyRose #FFE4E1

Grijze kleuren

Gainsboro #DCDCDC

LightGray #D3D3D3

Silver #C0C0C0

DarkGray #A9A9A9

Gray #808080

DimGray #696969

LightSlateGray #778899

SlateGray #708090

DarkSlateGray #2F4F4F

Black #000000