Inhoud

Opdrachten

H1 - Voorwoord

Er zijn (nog) geen opdrachten voor dit hoofdstuk!

H2 - Wat is JavaScript?

Opdracht 1 (H2.2)
Iemand schrijft het volgende stukje HTML in zijn head-tag:
```
<script type="text/javascript" src="main.js">
  alert("Hello world!");
</script>
```
Ook als je nog geen JavaScript kunt moet je kunnen begrijpen wat hier fout is, geef dus aan wat hier fout is en hoe dat verbeterd zou kunnen worden.
Bekijk antwoord

H3 - Statements (opdrachten)

Opdracht 1 (H3.2)
Maak een scriptje waarmee je jezelf voorstelt, de uitvoer moet er als volgt in de webpagina uitzien:

Hallo, ik ben Mark.
Ik ben 16 jaar oud!

Gebruik hiervoor exact 2 statements
Bekijk antwoord
Opdracht 2 (H3.4)
Doe hetzelfde als bij opdracht 1, alleen dan met pop-up boxjes. Gebruik weer 2 statements. Vergeet niet de opmaak weg te halen!
Bekijk antwoord

H4 - Variabelen

Opdracht 1 (H4.2)
Geef van de volgende variabele namen aan of ze goed of fout zijn. Als een naam fout is, geef dan aan wat er fout is.
1. blabla
2. blaBla
3. x_x
4. x2
5. 2x
6. x_kwadraat
7. xKwadraat
8. x-kwadraat
9. (x)
10. x^2
Bekijk antwoord
Opdracht 2 (H4.4)
Maak een script dat vraagt hoeveel boeken een boekwinkel verkocht heeft, vraag daarna hoe duur een boek is en vraag daarna hoeveel het de boekwinkel kost zo'n boek in te kopen. Daarna laat je de gebruiker weten hoeveel winst de boekwinkel gemaakt heeft.
Je mag er hierbij vanuit gaan dat wat ingevoerd wordt geldige getallen zijn.
Voorbeeld - Bekijk antwoord
Opdracht 3 (H4.4)
Voorspel de waarden van de variabelen na afloop van dit script.
```
var a = 3;
var b = 4;
var c = 5;
a += b+c;
b = c++;
c -= ++b;
a *= b;
```
Bekijk antwoord
Opdracht 4 (H4.5)
Maak een scriptje waarin je om iemands naam en leeftijd vraagt (2 prompt-boxjes dus). Laat dan vervolgens een alert-boxje zien met de volgende tekst:
```
Hoi naam,
ik ben leeftijdsverschil jaar ouder dan jij!
```
Hierin is naam de eerder verkregen naam en leeftijdsverschil het verschil in leeftijd tussen jou en die ander. Het is hierbij niet erg als er komt te staan ik ben -3 jaar ouder dan jij! als je 3 jaar jonger bent.

Je mag er weer vanuit gaan dat de ingevulde leeftijd een geldige leeftijd is.
Bekijk antwoord

H5 - Functies

Opdracht 1 (H5.2)
Schrijf een functie product. Deze functie moet twee getallen aan de gebruiker vragen (je mag er weer vanuit gaan dat er geldige getallen ingevoerd worden), deze twee getallen moeten met elkaar vermenigvuldigd worden en vervolgens moet het resultaat daarvan weergegeven worden met een alert-boxje.
Wanneer de functie om het tweede getal vraagt moet daarbij al het eerste getal ingevoerd staan. Dus stel je voert op de vraag naar het eerste getal 5 in, dan moet bij de vraag naar het tweede getal 5 al ingevuld staan.
Test je functie door hem 3x aan te roepen.
Bekijk antwoord
Opdracht 2 (H5.3)
Hetzelfde als opdracht 1. Alleen nu maak je niet een functie product maar een functie som, die dus, zoals de naam al zegt, de twee getallen bij elkaar optelt. Verder moet de functie niet zélf het resultaat weergeven, maar teruggeven. Schrijf wederom een stukje code om de functie 3x te testen en het resultaat met een alert-boxje weer te geven.
Bekijk antwoord
Opdracht 3 (H5.4)
Maak weer een functie som(), alleen dit keer krijgt hij 2 argumenten door, die hij bij elkaar moet tellen. Er moet dus niet in de funcie pas naar de getallen worden gevraagd. Test je functie vervolgens met de volgende code(buiten de functie dus):
```
alert(som(prompt("Getal 1?",''), prompt("Getal 2?", '')));
```
Ga er maar weer vanuit dat er geldige getallen ingevoerd worden.
Bekijk antwoord
Opdracht 4 (H5.4)
Maak een functie kwadraat() die het kwadraat van zijn parameter teruggeeft. Maak ook een functie pythagoras() die de schuine zijde van een driehoek, dus c, uitrekent (a² + b² = c²). Hierbij moet de functie pythagoras() gebruik maken van kwadraat(), en krijgt pythagoras() de twee rechthoekzijdes a en b als argumenten door.
Voor de vierkantswortel gebruik je de in JavaScript ingebouwde functie Math.sqrt().

Schrijf ook een stukje code, buten de functies, om je functies te testen. Daarin moeten de lengtes van de zijdes a en b worden gevraagd, en vervolgens met behulp van de functie pythagoras de lengte van de schuine zijde c worden weergegeven.
Bekijk antwoord
Opdracht 5 (H5.5)
Maak een functie die de volgende tekst op het scherm zet:
Ik ben x keer aangeroepen!
Waarbij x wordt vervangen door het aantal keer dat de functie is aangeroepen. De functie mag geen argument(en) meekrijgen! Roep de functie 10x aan, zodat de uitvoer als volgt is:
Ik ben 1 keer aangeroepen!
Ik ben 2 keer aangeroepen!
Ik ben 3 keer aangeroepen!
Ik ben 4 keer aangeroepen!
Ik ben 5 keer aangeroepen!
Ik ben 6 keer aangeroepen!
Ik ben 7 keer aangeroepen!
Ik ben 8 keer aangeroepen!
Ik ben 9 keer aangeroepen!
Ik ben 10 keer aangeroepen!

Extra: als je het kan, probeer dan door maar 1 statement te gebruiken in de functie.
Bekijk antwoord

H6 - Loops en voorwaardes

Opdracht 1 (H6.2)
Maak een simpele rekenmachine die eerst een getal vraagt, dan vraagt of de gebruiken plus, min, keer of delen wil doen. Dan vraag je het tweede getal, en laat je het resultaat van de berekening zien.
Je mag er vanuit gaan dat elke keer een geldige invoer wordt gegeven.
Bekijk antwoord
Opdracht 2 (H6.2)
Hetzelfde als opdracht 1, alleen mag je er nu niet vanuit gaan dat er telkens een geldige invoer wordt gedaan. Met de functie isNaN() kun je controleren of een string een getal is. Deze functie geeft namelijk true als de string geen getal is (isNaN staat voor is not a number), en false als de string wel een getal is (of als er gewoon een getal wordt opgegeven).
Als er een foute invoer wordt gedaan moet daarvan een melding gegeven worden en moeten er verder geen meldingen meer gedaan worden.
Bekijk antwoord
Opdracht 3 (H6.3)
Geef van de volgende vergelijkingen aan of ze true of false zijn:
1. 3 == 4
2. 5 != 8
3. 5 != "hoi"
4. 23 === "23"
5. 8 > 4 || 4 > 8
6. 4 != 3 && "H" == 'H'
7. !(true) == false
8. 5 < 3 && (4 >= 3 || 10 == "10")
9. 12 >= 12
10. 421 > 421
11. (! 18 < 12 && 13 > -21) && (8 != 8 || 11 == '11')
Bekijk antwoord
Opdracht 4 (H6.6)
Maak een script waarin je vraagt om een getal van 1 t/m 10 (ga er maar weer van uit dat de invoer geldig is). Vervolgens moet vanaf dat getal afgeteld worden tot en met 0. Dus stel er wordt 4 ingevuld, dan is de uitvoer van het script: 4 3 2 1 0 Maak gebruik van o.a. while
Bekijk antwoord

Opdracht 5 (H6.6)

Maak een script met een while-loop dat de volgende uitvoer heeft:

1 knikker opgegooid, nog 9 in mijn zak.
2 knikkers opgegooid, nog 8 in mijn zak.
3 knikkers opgegooid, nog 7 in mijn zak.
4 knikkers opgegooid, nog 6 in mijn zak.
5 knikkers opgegooid, nog 5 in mijn zak.
6 knikkers opgegooid, nog 4 in mijn zak.
7 knikkers opgegooid, nog 3 in mijn zak.
8 knikkers opgegooid, nog 2 in mijn zak.
9 knikkers opgegooid, nog 1 in mijn zak.
10 knikkers opgegooid, nog 0 in mijn zak.

Bekijk antwoord

Opdracht 6 (H6.7)

Zet de volgende while-loop om in een for-loop.

function f(x)
{
    return x*x - 2*x + 15;
}
�
var x = -5;
while(x < 6)
{
    alert("Op x = " + x + " is y: " + f(  x));
    x++;
}

Bekijk antwoord

Opdracht 7 (H6.7)

Zet de volgende for-loop om in een while-loop die exact hetzelfde doet.

for(var i = 0; i > -42;i--)
{
    alert("Het kwadraat van " + i + " is: " + i * i);
}

Bekijk antwoord

Opdracht 8 (H6.7)
Maak een for-loop die achtereenvolgens alle even getallen aflopend van 20 naar 0 laat zien (je mag zelf kiezen hoe).
Bekijk antwoord

Opdracht 9 (H6.8)

Geef de waarde van de variabele i na de uitvoer van het volgende script:

var i;
for(i = 0; i <= 100; ++i)
{
    if(i*i < 25)
    {
        alert("Berichtje #"+i);
    }
    else
    {
        break;
    }
}

Bekijk antwoord

H7 - Events

Opdracht 1 (H7.2)
Maak een knop, als op die knop geklikt wordt komt er een berichtje met de tekst Hello world!
Bekijk antwoord
Opdracht 2 (H7.4)
Maak een div-element met de tekst: Hello world!
Zodra je met je muis over deze div heen gaat moet de tekst schuin gedrukt worden. Zodra je met je muis weer van deze div af gaat moet de tekst weer normaal worden.
Als je op de div klikt moet de tekst in het Nederlands vertaald worden ("Hallo wereld!" dus). Als er dan weer opnieuw op geklikt wordt verandert de tekst weer in Engels. Dus bij elke klik verandert de taal.
Hoe vaak de tekst ook vertaald wordt, hij moet altijd schuin gedrukt worden als de muis er overheen gaat, en weer normaal als de muis van de div af gaat.
Tip: geef de div met CSS (gewoon via het style-attribuut) een achtergrond zodat je kan zien wanneer je met je muis er boven hangt en wanneer niet.
Alleen voor het toekennen van de events mag de functie document.getElementById() gebruikt worden, verder niet.
Bekijk antwoord
Opdracht 3 (H7.4)
Maak een webpagina met daarin in een divje met de tekst 'Klik hier' Zorg ervoor dat elke keer als je op dat divje klikt er een prompt verschijnt die een naam vraagt. Die naam moet vervolgens in dat divje verschijnen Als er nog een keer op het divje geklikt wordt (met nu dus een naam) moet er weer dezelfde prompt verschijnen en de nieuw ingevoerde naam moet achter de vorige naam verschijnen, gescheiden door een komma Let op: gebruik geen variabelenamen die gelijk zijn aan een id
Bekijk antwoord
Opdracht 4 (H7.5)
Maak 5 divs met dezelfde tekst waarvan je door te klikken de opmaak als volgt kan veranderen:
als je gewoon op een div klikt, wordt deze vetgedrukt.
Door op een vetgedrukte div te klikken, terwijl je shift ingedrukt houdt moet deze weer gewoon worden.
De tekst in de div maakt niet uit (tip: geef de divs een achtergrondkleur, zo kun je zien wanneer je er op klikt of niet).

Let op: alleen de opmaak van de div waarop geklikt wordt mag veranderen, ze veranderen dus los van elkaar. De functie document.getElementById() mag alleen bij het toekennen van de events gebruikt worden.
Bekijk antwoord
Opdracht 5 (H7.5)
Het is lastig om uit het hoofd te leren welke toetscode bij elke toets hoort. Toch heb je deze toetscode nog wel eens nodig bij event.keyCode. Maak een pagina waarbij als je op een toets drukt, de code van die toets op de pagina weergegeven wordt. Popup-boxjes (zoals alert()) en document.write() zijn verboden.
Bekijk antwoord
Opdracht 6 (H7.5)
Maak een pagina waarop constant de coördinaten van je muis worden weergegeven. Gebruik van document.write() is verboden.
Bekijk antwoord

H8 - Arrays

Opdracht 1 (H8.2)
Je zou een array als een kastje kunnen zien. Dat kastje heeft dan lades, met op elke lade een nummertje en in elke lade zit een waarde.
Wat stelt in deze vergelijking het nummertje op de lade voor, wat stelt de inhoud van elke lade voor en wat stelt het kastje in zijn geheel voor?
En welk nummertje heeft de eerste lade?
Bekijk antwoord
Opdracht 2 (H8.2)
Maak een array, en vraag 3 keer om een getal (ga ervan uit dat er een geldig getal ingevoerd wordt). Elke keer sla je deze waarde in de array op. Aan het eind geef je de som van deze 3 getallen (in een alert-box of met document.write()).
Andere variabelen, behalve de array, zijn niet toegestaan.
Bekijk antwoord
Opdracht 3 (H8.3)
Maak een functie waarmee de gebruiker getallen invoert totdat de gebruiker stop invoert. Je mag er wederom vanuit gaan dat er enkel geldige getallen ingevoerd worden. De functie moet een array met alle ingevoerde getallen returnen.
Maak vervolgens een functie die alle getallen in een array (die de functie als argument heeft gekregen) optelt en het resultaat returnt.
Vervolgens roep je beide functies 1x aan en laat je de som van de ingevoerde getallen in een alert-boxje zien.
Bekijk antwoord
Opdracht 4 (H8.4)
Maak een script dat elke keer om een Nederlands woord en daarna om de Engelse vertaling van dat woord. Deze gegevens slaat het script op in een associatieve array.
Als de gebruiker bij het invullen van het Nederlands woord niks invult stopt het invoeren. Vervolgens vraagt het script aan de gebruiker van welk ingevoerd woord hij de vertaling wilt weten. Deze vertaling geeft het script weer. Ga er hierbij vanuit dat een gebruiker enkel een woord zal invullen die hij tijdens het invoeren van de gegevens ook heeft opgegeven.
Bekijk antwoord
Opdracht 5 (H8.5)
Zelfde als opdracht 4. Alleen wordt er niet gevraagd welke vertaling de gebruiker wil weten, maar worden alle woorden met hun vertaling in één overzicht op de pagina weergegeven (dus geen alert-box).
Voorbeeld - Bekijk antwoord
Opdracht 6 (H8.5)
Zelfde als opdracht 4, maar nu ga je het script in een loop laten vragen naar de vertaling van elk Nederlands woord. Vervolgens hou je bij hoe vaak het goed geantwoord is, en dat laat je aan het eind zien.
Bekijk antwoord

H9 - Objecten

Er zijn (nog) geen opdrachten voor dit hoofdstuk!

H10 - Globale objecten

Opdracht 1 (H10.2)
Maak een soort timer. De gebruiker wordt gevraagd over hoeveel seconden de timer af moet gaan (ga er vanuit dat er een geldig getal ingevoerd wordt). Na zoveel seconden moet er dan een berichtje verschijnen met de tekst: "Timer afgelopen!".
Bekijk antwoord
Opdracht 2 (H10.2)
Als opdracht 1, maar maak er nu een knop bij waarmee de timer gestopt kan worden voordat deze afgelopen is.
Bekijk antwoord
Opdracht 3 (H10.2)
Maak een pagina met daarop jouw naam en ernaast een knopje (of linkje) "Geef details weer". Als daarop geklikt wordt verandert de tekst van dit linkje in "Verberg details" en moet onder jouw naam je geboortedatum en woonplaats verschijnen.
Als er op "Verberg details" geklikt wordt moeten je geboortedatum en woonplaats weer verdwijnen (je naam blijft altijd staan) en moet de tekst op de knop/link weer veranderen in "Geef details weer". Gebruik het style-attribuut om iets te verbergen: style="display:none;". De waarde van display moet op block worden ingesteld om een element weer zichtbaar te maken,
Bekijk antwoord
Opdracht 4 (H10.4)
Maak een tabel waarin elke keer dat de muiscursor over een cel heen beweegt de achtergrond daarvan zwart wordt en de waarde in de cel (in eerste instantie 0) opgehoogd wordt.
Bij het verlaten van de cel moet de achtergrond weer wit worden.
Maak gebruik van this.
Bekijk antwoord
Opdracht 5 (H10.4)
Maak een boter, kaas en eieren spelletje.
De spelers mogen om de beurt klikken, alleen als er op een leeg vakje geklikt wordt zal er een x of o verschijnen (afhankelijk van wie aan de beurt is).
Er hoeft geen bericht te verschijnen als er iemand gewonnen heeft.
Bekijk antwoord