Javascript oefenblad 1 Leer de basis van Javascript.
© Niels van Velzen
Javascript oefenblad 1
Pagina 2
Inleiding Javascript is niet altijd even makkelijk. Vooral aan het begin is het even wennen hoe de syntax (structuur) van javascript in elkaar zit. Javascript kan je in je .html bestand plaatsen maar dat is niet net. Een Javascript code behoort in een eigen bestand, een .js bestand. Deze kan je met de <script> tag in je website plaatsen.
Het type vermelden is sinds HTML5 niet nodig maar heb ik voor de duidelijkheid ingevoegd. In het Javascript bestand kan je commentaar plaatsen op 2 manieren.
In de voorbeelden zal er commentaar te zien zijn over de functionaliteit. Om de bestanden te bewerken is in de voorbeelden Sublime Text 2 gebruikt voor snelle bewerking. Wil je een groot project bewerken dan raad ik aan PHPStorm te gebruiken.
© Niels van Velzen
Pagina 2
Javascript oefenblad 1
Pagina 3
Variables Het belangrijkste om te weten zijn variables. Deze slaan data voor je op en vervolgens kan je deze ook weer uitlezen.
In dit voorbeeld heb je 3 variables (naam, leeftijd, vierkantRooster). Zoals je ook kan zien heeft elk variable een type. Achter de variable staat een korte opmerking wat het type is en hoe het werkt.
Als je variable een string is kan je handelingen uitvoeren zoals het ophalen van de lengte. Als de variable een number is kan je wiskunde mee uitvoeren. Het is ook mogelijk om een variable te combineren met een andere variable.
Zoals je ziet kan je erg makkelijk een variable gebruiken in je wiskunde formules of in een string.
© Niels van Velzen
Pagina 3
Javascript oefenblad 1
Pagina 4
Arrays Een ander type wat nog niet besproken is zijn de arrays. Een array kan je vergelijken met een boodschappen lijst om meerdere dingen in te zetten. Als een mens gaat tellen beginnen we bij 1. Bij het programmeren beginnen we niet met een 1 maar met een 0. Ook bij de array is dit zo. Je kan een array op 2 manieren aanmaken. Je kan meteen data in een array zetten of je kan een lege array maken en de data daarna erin stoppen.
De meest gebruikte manier, en overigens ook makkelijkste, is type 2. De oude manier is type 1. Je kan een array op verschillende manieren manipuleren, zoals bijvoorbeeld de lengte ophalen.
Je kan ook een array in een array plaatsen of booleans / numbers.
© Niels van Velzen
Pagina 4
Javascript oefenblad 1
Pagina 5
Logische condities Tijdens het programmeren wil je vaak weten of een waarde gelijk is aan een andere waarde. Dit zijn condities. Je kan voor condities een if-elseif-else statement gebruiken. Hierin kan je bij bepaalde condities bepaalde code uitvoeren.
Je kan in een conditie kijken of iets gelijk is aan iets anders. Je kan ook kijken of iets hoger of lager is dan iets anders.
Als je wilt kijken of iets gelijk is aan meerdere andere dingen kan je het switch statement gebruiken.
In dit voorbeeld zie je ook een nieuw type: null, dit betekent dat er nog geen waarde is. Met break ga je een stapje terug en stop je de switch.
© Niels van Velzen
Pagina 5
Javascript oefenblad 1
Pagina 6
Loops Browser laten vast hangen? Gebruik een while loop met conditie ‘true’. Loops kunnen een stuk code afspelen net zo lang tot hun conditie voltooid is. Je hebt in Javascript twee soorten loops.
For Met een for loop kan je door een lijst heen gaan. In het volgende voorbeeld zullen we van 0 tot 9 tellen.
Als je items uit een array wilt halen zou je de 10 kunnen vervangen met array.length. Maar er is een simpelere manier die speciaal voor arrays is ontworpen.
While Met de while loop kan je iets uitvoeren zolang een conditie, zoals in een if -else statement, juist is.
© Niels van Velzen
Pagina 6
Javascript oefenblad 1
Pagina 7
Functies In Javascript werkt je veel met functies. Functies kunnen bepaalde argumenten opgegeven krijgen, hier iets mee doen en vervolgens iets terug sturen.
Functie maken
Als je een functie maakt in Javascript zeg je eerst function, vervolgens de naam van de functie en daarna welke argumenten de functie heeft. De argumenten kan je scheiden door een komma. Je kan ook een functie zonder argumenten maken maar zorg wel dat je altijd haakjes gebruikt. In een functie kan je return gebruiken om een waarde terug te sturen.
Indien je geen return gebruikt heb je een void functie. Je argumenten werken net als variables.
Functie gebruiken Een functie gebruiken is heel simpel. Je zet de naam van de functie neer en gebruikt vervolgens haakjes, je kan optioneel ook nog argumenten tussen de haakjes zetten. Als de functie geen void functie is kan je de waarde van de return in een variable zetten.
© Niels van Velzen
Pagina 7
