Blog

leren programmeren proberen

In mijn vorige blog heb ik proberen uit te leggen dat programmeren eigenlijk niet zo moeilijk is, zolang je maar alle mogelijke gebeurtenissen voorziet en daar rekening mee houdt. Ik ben er vervolgens op gewezen dat als je geen idee hebt hoe je moet programmeren, dat je kan anticiperen wat je wilt, maar daar schiet je dan weinig mee op. Dit is natuurlijk een goed punt, en ik ga in dit blog dan ook op verzoek jullie leren programmeren. Het belangrijkste aan programmeren is het proberen, dus wil je het echt leren, doe dan gezellig mee.

Vandaag gaan we programmeren in JavaScript, waarom JavaScript hoor ik sceptici vragen. Omdat je alles om te programmeren in JavaScript al op je computer hebt staan, dus eigenlijk om het voor de lezer makkelijk te houden. We gaan vandaag een spelletje programmeren (in een poging de stof niet te droog te houden), de keus voor het spelletje is gevallen op Space Invaders, maar omdat ik geen DCMA-takedowns wil afroepen noemen we het: Orcado Invaders. Je kunt het eindresultaat alvast hier spelen: OrcadoInvaders Als je achter een computer zit kun je de pijltjes en het toetsenbord gebruiken, op je mobiel zou tikken op je scherm moeten werken. Het is overigens op je mobiel een stuk lastiger, dus ik zou aanraden achter een computer te gaan zitten, hetgeen voor het hele mee doen met het programmeren idee ook een heel stuk gaat helpen.

Voor iedereen die nu denkt: “Is het niet veel te moeilijk om uit het niets een spelletje als Orcado Invaders te maken?”. Ja, dat is het helaas inderdaad, maar niet getreurd ik heb al een ander leuk spelletje op het oog, namelijk “Raad het getal!”. Dat klinkt alleen een heel stuk minder stoer, dus ik ben begonnen met een onrealistische teaser, dat heb ik geleerd van de filmindustrie, werkt altijd. Maar om het goed te maken, gaan we een kunstmatige intelligentie maken die zelf het getal gaat raden, dat maakt toch wel weer wat goed toch?
Ok, genoeg gewauwel als inleiding, tijd om aan de slag te gaan.

Voor deze intro zijn de volgende vaardigheden als voorkennis benodigd:
– Het kunnen downloaden van een zip bestand
– Het kunnen uitpakken van een zip bestand
– Knippen
– Plakken
– Opslaan
– Verversen van een pagina
– Doorzettingsvermogen

Dat viel mee toch? Mocht je nog aan het twijfelen zijn of je wel genoeg doorzettingsvermogen hebt, als je nu nog leest zit je wat mij betreft in de veilige zone.

Om te beginnen heb ik een zip-bestandje gemaakt dat je hier kunt downloaden: starter pack Download dit zip bestand en pak het ergens uit. Ga naar de locatie waar je het uitgepakt hebt, hier vind je twee bestandjes “de_pagina.html” en “de_code.js”.

Als je dubbelklikt op de_pagina.html opent je internetbrowser, op de pagina staat vervolgens uitgelegd hoe je in de console komt. Volg die instructie en type in de console het volgende in: hoiConsole(); Druk op enter en de console zegt hoi terug, dat ziet er als het goed is ongeveer zo uit:

Gelukt? Mooi! Gaan we nu kijken wat ik voor bergen aan code als voorwerk heb moeten schrijven om dit te laten werken. Ga terug naar de map met bestandjes klik met je rechtermuisknop op de_code.js en kies: “Openen met” en kies uit de lijst Notepad (of een andere teksteditor) (eventueel moet je ergens op klikken om meer programma’s te krijgen als Notepad er niet direct tussen staat, maar daar kom je vast wel uit!)

Nu zie je de code die ervoor zorgt dat de console je terug groet. Dat stelt nog niet veel voor, ik zal uitleggen wat het doet.
function (dit geeft aan dat we een functie gaan maken, een functie is dat je kunt aanroepen en dat dan vervolgens een stuk code uitvoert)
hoiConsole (dit is de naam van de functie, die gebruik je om de functie aan te roepen)
() (tussen deze twee haakjes staan eventuele argumenten, kom ik straks op terug
{ (geeft aan dat hier de code van de functie begint)
return (code om aan te geven dat er iets terug moet worden gegeven, dit wordt terug gegeven aan de geen die de functie aanroept, in dit voorbeeld ben jij dat in de console)
"Hoi" (alles tussen aanhalingstekens is geen code maar tekst, omdat deze tekst achter return staat wordt hij terug gegeven)
; (geeft aan dat we het einde van een regel gehaald hebben, elke regel code wordt met een puntkomma afgesloten)
} (geeft aan dat hier de code van de functie stopt)

Dat is heel veel uitleg voor een heel klein stukje code, maar hopelijk allemaal nog niet heel ingewikkeld. Wat we nu gaan doen is samen de functie uitbreiden. Dat gaan we doen met een argument, ja ik kom er maar snel op terug voor dat je ze al weer vergeten bent. Argumenten kan je gebruiken om een functie iets mee te geven wat hij nodig heeft voor zijn code. We gaan aan de functie meegeven, wat hij terug moet geven, om dat te doen zet tussen de haakjes een x, en vervang de tekst “hoi” ook met een x:

function hoiConsole(x){
  return x;
}

De x staat nu niet tussen aanhalingstekens, en is nu geen tekst meer maar code, hij zal nu de x teruggeven die hij in zijn aanroep mee heeft gekregen. Kom, we gaan het testen! Sla het tekstbestand op, en ververs de internetpagina (bijvoorbeeld met F5, of als het niet wil lukken sluit hem en open hem nog een keer). We moeten de functie nu iets anders aanroepen, de functie verwacht namelijk nu een argument. Probeer eens: hoiConsole(“Hoi”) dat geeft als het goed is dit:

Zo lijken we niet veel opgeschoten, dat konden we net ook al, maar we kunnen hem nu alles laten zeggen, kijk maar:

Ok slechte grapjes achterwege gelaten, we kunnen hem nu meegeven hoe we heten en dan groet hij ons persoonlijk terug:

Stel dat we een teruggroet robot aan het bouwen zijn, dan hoeft hij voor het teruggroeten natuurlijk alleen de naam te weten, hoi is altijd hetzelfde. Wat we dus gaan doen, we gaan hoi terug in de functie zetten, en dan plakken we de naam erachteraan:
function hoiConsole(x){
  return “Hoi ”+x;
}

(Let op de spatie achter hoi, anders staat er straks HoiDaan) kijken wat hij doet:

Dat was nog niet zo lastig toch? Technisch gezien kan je nu al programmeren. Echter begint het nu pas leuk te worden, dus we doen nog een paar extra dingetjes, en dan kan je ook echt iets bouwen wat iets ‘doet’.
We kunnen ook meerdere argumenten meegeven aan een functie. Laten we een nieuwe functie maken, de oude mag je laten staan en daaronder mag je het volgende toevoegen:

function hoger(x,y){
  if(x > y){
    return "ja dat is hoger";
  }else{
    return "nee dat is lager"
  }
}

We gaan eerst kijken wat dat betekent:
function hoger(x,y){ (dit ken je al, dit is een functie met de naam hoger en de argumenten x en y)
if(x > y){ (dit is een zogenaamd if-statement, als wat er tussen de haakjes staat waar is voert hij de code uit, anders niet)
return "ja dat is hoger"; (dit ken je al, geef tekst terug)
}else{ (het else-statement gebruik je indien wat tussen de haakjes van het vorige if-statement niet waar is, dan deze code uit te voeren, je ziet een else-statement dus nooit zonder if, andersom kan wel)
return "nee dat is lager"; (dit ken je al, geef tekst terug)
} (dit ken je al, einde van een blok code)
} (dit ken je al, einde van een blok code)
Als we nu de functie hoger(5,3) aanroepen, dan gaat het if-statement kijken of 5 groter is dan 3 (> is het groter dan teken) en zo ja geeft hij terug “ja dat is hoger”, zo niet, dan “nee dat is lager”. Zoals altijd gaan we dit proberen, dat is het idee van het geheel 😊

En gelukkig, het klopt.
Mocht het nou niet werken, en je krijgt rode blokken met tekst zoals dit:

Controleer dan of je
– het bestandje de_code.js hebt opgeslagen
– de pagina hebt ververst
– nergens een typefout hebt gemaakt (programmeertalen zijn heel streng op je spelling)
Voor de zekerheid testen we ook de andere opties:

Trouwe lezers hadden het natuurlijk al geanticipeerd, als iets niet hoger is, hoeft het niet per se lager te zijn. We kunnen dat natuurlijk oplossen door de tekst te veranderen naar “nee het is niet hoger”, maar mooier is een extra check om te kijken of het niet toevallig gelijk is:

function hoger(x,y){
  if(x > y){
    return "ja dat is hoger";
  }else{
    if(x == y){
      return "nee dat is gelijk"
    }else{
      return "nee dat is lager"
    }
  }
}

Wat je ook mag schrijven als:

function hoger(x,y){
  if(x > y){
    return "ja dat is hoger";
  }else if(x == y){
    return "nee dat is gelijk"
  }else{
    return "nee dat is lager"
  }
}

Dat scheelt weer een paar haakjes 😊 Nu geeft de functie wel de juiste melding (vergeet het niet te proberen). Let op het dubbele = teken, we kijken of ze het zelfde zijn, als we een enkel = teken dan krijgt x de waarde y.
En we gaan al weer verder, in mijn vorige blog had ik het over delen, nu gaan we eerst vermenigvuldigen. Dat is in JavaScript vrij triviaal, je kan bijvoorbeeld zeggen 5*3, en dan krijg je terug 15, kijk maar:

Maar vandaag is het enige rekenteken dat we mogen gebruiken de plus. Gelukkig kan je vermenigvuldigen makkelijk omschrijven naar optellen, immers 5*3 is vijf keer een drie dus hetzelfde als: 3+3+3+3+3. Als we in JavaScript iets een aantal keer moeten doen, hebben we daar een aantal opties voor; we gaan de for-loop gebruiken. De for-loop werkt als volgt:

for(var i = 1; i<=x;i++){
  //doe iets
}

Wat vertaalt naar:
for (geeft aan dat we een for-loop beginnen)
( (deze ken je al, begin van de argumenten)
var i = 1 (var staat voor een variable, de variable slaat voor ons een waarde op, de naam van deze variable is i, en de waarde is 1)
i<=x (we gaan door de code uitvoeren zolang de variable i kleiner of gelijk is aan de variable x (let op als je een argument meegeeft aan een functie is dat ook een variable))
i++ (Na elke keer dat je de code hebt uit gevoerd verhoog variable i met 1, dit kan je ook opschrijven als i = i +1 of i+=1)
) (deze ken je al, einde van de argumenten)
{ (deze ken je al, begin van de uit te voeren code)
//doe iets (de code die uitgevoegd gaat worden)
} (deze ken je al, begin van de uit te voeren code)

De for-loop heeft 3 argumenten, met het eerste kan je een variable aanmaken, met het tweede geef je een voorwaarde om het te doen (eigenlijk een soort if-statement) en het derde argument wordt na elke loop uitgevoerd. De blokken worden in een for-loop gescheiden door een puntkomma.

Ok, probeer zelf nu eens om de functie te schrijven. Ja je kan gewoon naar beneden scrollen, maar het hele idee van dit blog is dat je het zelf gaat proberen. Geef niet direct op, maar blijf ook niet te lang bezig, ook als je code niet werkt, als je er zelf over hebt nagedacht dan ben je al een heel stuk verder dan als je alleen doorleest. Bedenk wat voor stappen de code moet doen en schrijf dat stap voor stap op. Mocht je er niet uitkomen, lees eerst de hints!

Hint1:

Hint2:

lees verder

Back-To-Top