2017 praktisch programmeren F. Vonk versie 2 5-1-2017
inhoudsopgave 1 inleiding... - 2-2 DOM... - 3-3 website schermelementen... - 8-4 knoppen... - 9-5 invoervelden... - 13-6 drop-down lists... - 15-7 zeeslag... - 18-8 oude JavaScript opdrachten vernieuwd... - 23-9 slideshows... - 26 - Dit werk is gelicenseerd onder een Creative Commons Naamsvermelding NietCommercieel GelijkDelen 3.0 Unported licentie De afbeelding op het voorblad is verkregen via INFOwrs. Copyright 2010 INFOwrs Serviços em informatica. - 1 -
1 inleiding In de module over syntax, semantiek & lay-out hebben we al een tip van de sluier van het programmeren opgelicht. Je al een klein beetje JavaScript gezien en uitgevoerd. In de syntax, semantiek & lay-out module ging het voornamelijk over taalregels en codeerafspraken. Programmeren is echter meer dan dat, zoals je in de JavaScript module hebt gezien. Het vereist gestructureerd denken en creativiteit om tot oplossingen voor problemen te komen. Dus welkom bij de praktisch programmeren module. In deze module ga je leren hoe je, wat je geleerd hebt in de JavaScript module, toepast in een webpagina. Zoals we al eerder hebben aangegeven, is JavaScript een tekstuele programmeertaal die veel gebruikt wordt in websites. Let op, dat je alles wat je in de syntax, semantiek & lay-out en JavaScript modules geleerd hebt nodig gaat hebben in deze module. In deze module kom je opgaves tegen die je moet maken om de lesstof te verwerken. De antwoorden kunnen in de les besproken worden. opgave Opgaves in blauw moet je maken. Er zijn ook bonus opgaves die je niet hoeft te maken maar waarvan het misschien wel slim en/of leuk is om het wel te doen. Ze bieden je in ieder geval extra oefenmateriaal. bonus opgave Opgaves in groen zijn facultatief en dienen als verdieping of om meer te oefenen. Let op, links in dit document hebben een rode kleur. Veel plezier en succes. - 2 -
2 DOM Tijdens het programmeren ga je gebruik maken van HTML elementen zoals je ook al tijdens web oriëntatie hebt gedaan. Goed snappen hoe het Document Object Model (DOM) werkt wordt daarom belangrijk. We leggen het hier kort uit. Het DOM is een model waarmee de structuur van een webpagina in boomvorm beschreven kan worden en een bibliotheek van functies waarmee deze structuur bekeken, aangepast en uitgebreid kan worden. Stel we hebben de volgende webpagina. <html> <head> <title> titel van de pagina </title> </head> <body> <h1> Hoofdstuk 1 </h1> <p> Eerste alinea van Hoofdstuk 1. </p> <p> Tweede alinea van Hoofdstuk 2. </p> <h1> Hoofdstuk 2 </h1> <p> Eerste alinea van Hoofdstuk 2. </p> <p> Tweede alinea van Hoofdstuk 2. </p> </body> </html> Deze pagina bestaat uit DOM objecten. Deze vormen de boomstructuur. Een object (ook wel node genoemd) is een ding dat in de pagina staat, bijvoorbeeld het element BODY of H1. Er is bovendien een speciaal DOM object genaamd document. Dit object representeert de gehele pagina en biedt veel functies aan om informatie over objecten uit de pagina te halen en objecten te manipuleren (bewerken) De boomstructuur van de voorgaande HTML code ziet er als volgt uit. - 3 -
opgave 2.1 Teken de DOM boomstructuur voor de volgende HTML code. <html> <head> <title> titel van de pagina </title> </head> <body> <h1> Hoofdstuk 1 </h1> <p> Inleidende alinea van Hoofdstuk 1. </p> <h2> Paragraaf 1 </h1> <p> Eerste alinea van H1 P1. </p> <p> Tweede alinea van H1 P1. </p> <h2> Paragraaf 2 </h1> <p> Eerste alinea van H1 P2. </p> <p> Tweede alinea van H1 P2. </p> </body> </html> Om een HTML element te kunnen manipuleren, moet je een verwijzing naar dat element hebben. Hiervoor bestaan een aantal functies in het document object, te weten (deze zijn hoofdlettergevoelig): document.getelementbyid(elementid) document.getelementsbyclassname(classname) document.getelementsbyname(name) document.getelementsbytagname(tagname) - 4 -
In ons geval hebben we alleen nog maar tags in onze HTML code staan. Daarom kun je in dit geval alleen document.getelementsbytagname gebruiken. Je kunt dan bijvoorbeeld een PARAGRAPH tag op proberen te vragen. Dat kan als volgt. var elementsarray = document.getelementsbytagname("p"); Je krijgt dan een array terug waarin verwijzingen naar alle PARAGRAPH tags uit de HTML pagina staan. Vaak is het lastig om daarna weer de juiste PARAGRAPH tag te vinden in het array. Daarom is het fijner als we elementen op unieke wijze kunnen identificeren. Hiervoor moet je, zoals je hopelijk nog weet, het ID attribuut gebruiken bij de relevante tags. De HTML code zou er dan als volgt uit kunnen zien. <html> <head> <title> titel van de pagina </title> </head> <body> <h1 id="hfst1"> Hoofdstuk 1 </h1> <p id="par0101"> Eerste alinea van Hoofdstuk 1. </p> <p id="par0102"> Tweede alinea van Hoofdstuk 2. </p> <h1 id="hfst2"> Hoofdstuk 2 </h1> <p id="par0201"> Eerste alinea van Hoofdstuk 2. </p> <p id="par0202"> Tweede alinea van Hoofdstuk 2. </p> </body> </html> We hebben niet alle elementen een ID gegeven, omdat sommige typisch maar 1 keer voorkomen in een HTML pagina. Maar nu de PARAGRAPH elementen een ID hebben, kun je ze gericht en individueel opvragen met behulp van de eerste functie uit de voorgaande lijst. Dat kan als volgt. var par0201element = document.getelementbyid("par0201"); In de variabele par0201element heb je dan een verwijzing staan naar het DOM PARAGRAPH object met ID par0201. Via deze variabele kun je het DOM element dan gaan manipuleren of er eigenschappen van opvragen. Van een PARAGRAPH element kun je bijvoorbeeld het font, de grootte, de kleur enzovoorts opvragen en veranderen. Natuurlijk kun je ook een verwijzing naar het H1 element met ID hfst1 krijgen. Dat kun je als volgt doen. var hfst1element = document.getelementbyid("hfst1"); - 5 -
Stel we willen van beide variabelen de kleur op groen zetten, dan ziet dat er als volgt uit. <html> <head> <title> titel van de pagina </title> </head> <body> <h1 id="hfst1"> Hoofdstuk 1 </h1> <p id="par0101"> Eerste alinea van Hoofdstuk 1. </p> <p id="par0102"> Tweede alinea van Hoofdstuk 2. </p> <h1 id="hfst2"> Hoofdstuk 2 </h1> <p id="par0201"> Eerste alinea van Hoofdstuk 2. </p> <p id="par0202"> Tweede alinea van Hoofdstuk 2. </p> <script type="text/javascript"> var par0201element = document.getelementbyid("par0201"); par0201element.style.color = "green"; var hfst1element = document.getelementbyid("hfst1"); hfst1element.style.color = "green"; </script> </body> </html> De volgorde van de elementen in de BODY zijn van belang. Wanneer je het script bijvoorbeeld bovenin de BODY zet, dan krijg je een foutmelding, want dan zijn het ID par0201 en het ID hfst1 niet bekend! Je ziet verder dat je niet meteen bij de kleur kunt, maar dat die weer verstopt zit in een style, dit zou nog een belletje moeten doen rinkelen vanuit CSS. We gaan straks beter uitleggen wat we hiervoor gedaan hebben. opgave 2.2 Maak een leeg HTML test bestand aan en zet daarin de voorgaande code. Voer de code vervolgens uit in een browser en kijk wat er gebeurt. Zet nu de kleur van hfst1 op rood en die van par0201 op blauw. - 6 -
Er zijn enorm veel functies beschikbaar in het DOM. Op W3Schools vind je veel informatie over de functies van het DOM via de volgende links. www.w3schools.com/jsref/dom_obj_document.asp www.w3schools.com/jsref/dom_obj_all.asp www.w3schools.com/jsref/dom_obj_attributes.asp www.w3schools.com/jsref/dom_obj_event.asp www.w3schools.com/jsref/dom_obj_style.asp In de volgende hoofdstukken ga je oefenen met een aantal van deze functies. - 7 -
3 website schermelementen In een webpagina zie je vaak schermelementen zoals knoppen, labels, invoervelden enzovoorts. Uiteraard wordt er ook veel informatie gegeven in een webpagina, vaak op basis van de gebruikersinvoer. In de volgende hoofdstukken gaan we naar de volgende schermelementen kijken: knoppen invoervelden voor tekst drop-down list Deze heb je nodig om het spel Zeeslag dat bij deze module hoort af te maken. Daarna ga je nog aan de slag met het combineren van alles wat je tot dan toe geleerd hebt. Je hebt al geleerd over de codeerafspraken die horen bij het programmeren. Zorg dat je deze blijft oefenen bij de opgaven in deze module. Op de toets en het SE over praktisch programmeren moet je ze correct toepassen om puntaftrek te voorkomen! - 8 -
4 knoppen opgave 4.1 Maak een leeg HTML test bestand aan. Maak daarin de standaard pagina elementen aan: HTML, HEAD, TITLE en BODY. Zet iets zinvols in het TITLE element. Open het bestand in een webbrowser en zet het console venster aan (F12) aan om te kijken of er iets fout gaat. Je gaat nu met het eerste schermelement aan de slag, de knop. Het aanmaken van een knop doe je als volgt. <button> druk hierop </button> opgave 4.2 Voeg het BUTTON element toe in de body. Met alleen een knop kun je niet zo heel veel. De gebruiker kan er nu op drukken, maar er gebeurt niets. Aan knoppen kun je events (gebeurtenissen) meegeven. Als de gebruiker iets doet, bijvoorbeeld op een knop drukken, dan kan dat tot gevolg hebben dat er een event wordt aangeroepen. Er zijn veel events, een overzicht daarvan vind je op W3Schools. Zoals gezegd kun je op een knop in een webpagina drukken. Het bijbehorende event heet ONCLICK. Via de event waarde kun je een JavaScript functie koppelen aan het event. Wat een functie is zou je nog moeten weten uit de JavaScript module, anders moet je het even opzoeken. Het toevoegen van een ONCLICK event waaraan de functie VulAlinea wordt meegegeven ziet er als volgt uit. <button onclick="vulalinea()"> druk hierop </button> - 9 -
De functie VulAlinea bestaat natuurlijk nog niet, dus die moet je zelf definiëren. Eigen functies definieer je in het HEAD element onder het TITLE element. Deze moeten uiteraard in een SCRIPT element staan. Dit ziet er als volgt uit. <script> function VulAlinea() { } </script> opgave 4.3 Voeg het onclick attribuut met de VulAlinea functie aan de knop toe en voeg de VulAlinea functie definitie aan het HEAD element toe. Zet in de VulAlinea functie voorlopig even een alert functieaanroep met de tekst Hoi!. De knop doet nu nog niets zinvols, maar je kunt in ieder geval zien dat hij werkt. Het grondwerk voor de functionaliteit is nu gelegd. Wat je graag wilt is via de knop een alinea in je webpagina zetten met inhoud. Het is de bedoeling dat de functie VulAlinea dit gaat doen. Eerst moet je een PA- RAGRAPH element toevoegen, dat je een ID genaamd info geeft. In dit PA- RAGRAPH element staat in het begin nog niets. Even ter herhaling laten we zien hoe dat ook alweer moest. <p id="info"> </p> We hebben het PARAGRAPH element een ID gegeven, zodat we het element op kunnen vragen aan het HTML document (oftewel onze webpagina) waarin we aan het programmeren zijn. Het element kun je opslaan in een variabele, zoals je eerder hebt gezien. Dit is handig om er daarna dingen mee te kunnen doen. Dit doe je als volgt. var infoelement = document.getelementbyid("info"); Om het element op te vragen gebruik je dus de JavaScript functie getelement- ById. Deze functie is onderdeel van de functionaliteit van het document object, vandaar dat we document, gevolgd door een punt, voor de functie moeten zetten. Aan de functie geef je het ID van het gewenste element mee. In dit geval dus info. - 10 -
Het resultaat van de getelementbyid functie stop je in de variabele infoelement. Via deze variabele kun je vervolgens een veelvoud aan eigenschappen van het element manipuleren. De diverse eigenschappen van een document element kun je onder andere vinden op de site van W3Schools. Op dit moment wil je een stukje tekst toevoegen. Hiervoor heb je de innerhtml eigenschap nodig. Deze kun je als volgt een waarde geven. infoelement.innerhtml = "Hello World!"; opgave 4.4 Zet een PARAGRAPH element met ID info onder de knop in je webpagina. Verwijder de alert functieaanroep uit de VulAlinea functie en zet er de code in zoals hiervoor aangegeven. Kijk vervolgens wat er nu gebeurt als je op de knop drukt. Als het goed is komt nu de tekst Hello World! onder de knop te staan. Je hebt nu je eerste schermelement leren programmeren. Je gaat nu nog wat meer functionaliteit onder de knop zetten. opgave 4.5 Zorg dat de Hello World! tekst groen van kleur is. Hiervoor het je de style eigenschap van het element nodig (zie W3Schools). Maak de tekst vervolgens ook nog vet gedrukt. Maak de achtergrond van de tekst licht grijs (lightgrey). Centreer vervolgens de tekst horizontaal in de pagina. Nu ga je iets doen wat moeilijker is en je gaat zelf uitzoeken hoe dat moet. De eerste echte uitdaging dus. - 11 -
opgave 4.6 Zet ook nog een leeg IMAGE element in de webpagina. Zorg er nu voor dat, iedere keer dat je op de knop drukt, er een nieuwe afbeelding geladen wordt. Gebruik 3 verschillende afbeeldingen om te testen. Zorg dat de hoogte van de afbeeldingen via JavaScript op 200 pixels staat. Links naar afbeeldingen kun je bijvoorbeeld krijgen via het Public Domain Archive. Hint 1: Begin met het toevoegen van 1 afbeelding als je op de knop drukt. Ga daarna verder met de rest van de opgave. Hint 2: Bijhouden bij welke afbeelding je bent moet je doen via een variabele. Deze mag natuurlijk niet ín de functie staan. Hint 2: Maak slim gebruik van de if-else constructie en de modulo operator. Hint 3: Je zet de afbeelding van een IMAGE element via het SRC attribuut. - 12 -
5 invoervelden Je gaat nu met het volgende schermelement aan de slag, het invoerveld. Het aanmaken van een invoerveld doe je als volgt. <input type="text" value="" /> In dit geval krijg je een invoerveld waarin je tekst kunt typen en in het begin staat er nog niets in het invoerveld. Mocht je al standaard tekst in het invoerveld willen zetten, dan doe je dat als volgt. <input type="text" value="dit is standaard tekst." /> Je gaat nu de code aanpassen die je in het vorige hoofdstuk gemaakt hebt. opgave 5.1 Voeg een INPUT element van het type tekst toe voor het BUTTON element in de body. Geef dit element een standaard tekst. Zorg vervolgens dat je niet de tekst Hello World! in het PARAGRAPH element zet, maar de inhoud van het INPUT element. Daarvoor moet je eerst een verwijzing naar het INPUT element krijgen. De handigste manier is om dat element een ID te geven en via dat ID de verwijzing te krijgen. Vervolgens moet je zelf op W3Schools zoeken hoe je de tekst van het INPUT element krijgt. Test de code vervolgens goed. Het voorgaande zou intussen een relatief makkelijke oefening moeten zijn. Als dat niet zo is, ga dan terug naar hoofdstuk 3 en zorg dat je goed begrijpt hoe de DOM functies werken en welke eigenschappen van DOM objecten er allemaal zijn. Nu gaat het iets moeilijker worden. opgave 5.2 De gebruiker moet nu de naam van een geldige HTML kleur invoeren in het invoer veld. Als de gebruiker dan op de knop drukt, dan moet de tekst Hello World! in die kleur in het PARAGRAPH element gezet worden. - 13 -
En nog iets moeilijker! opgave 5.3 De gebruiker moet nu een getal groter dan 0 invoeren in het invoer veld. Je moet zelf afdwingen dat het een getal wordt door het type te converteren. Het getal geeft aan welke afbeelding je moet laten zien als de gebruiker op de knop drukt. De afbeeldingen moet je daarom een nummer geven. Dit kun je het handigst doen via een array. Als de gebruiker dan op de knop drukt, dan moet je in de pagina de juiste afbeelding laten zien. Je zult nu ook weer de modulo operator moeten gebruiken, omdat je mogelijk te weinig afbeeldingen in je array hebt staan. - 14 -
6 drop-down lists Als de gebruiker een cijfer in moet voeren, dan kan hij/zij daarbij veel fouten maken. Een andere manier om de gebruiker aan te laten geven welke afbeelding hij/zij wil zien is via een drop-down list. Het aanmaken van een drop-down list met een ID en 3 items doe je als volgt. <select id="autosddl"> <option value="1"> Volvo </option> <option value="2"> Audi </option> <option value="3"> Saab </option> </select> Een verwijzing naar een drop-down list heeft een aantal eigenschappen waaronder: options: Dit is een array waarin de opties van de drop-down list staan. selectedindex: Dit is de optie die de gebruiker geselecteerd heeft. Hier volgt een stukje voorbeeld code voor de drop-down list. <html> <head> <title> titel van de pagina </title> <script type="text/javascript"> function ToonAuto() { // haal de gebruikerskeuze op var ddlelement = document.getelementbyid("autosddl"); var auto = ddlelement.options[ddlelement.selectedindex]; // manipuleer de tekst var infoelement = document.getelementbyid("index"); infoelement.innerhtml = auto.value; var infoelement = document.getelementbyid("waarde"); infoelement.innerhtml = auto.text; } </script> </head> <body onload="toonauto()"> <p id="index"> </p> <p id="waarde"> </p> <select id="autosddl" onchange="toonauto()"> <option value="1" selected="selected"> Volvo </option> <option value="2"> Audi </option> <option value="3"> Saab </option> </select> </body> </html> - 15 -
De HTML code bevat een aantal nieuwe dingen. Allereerst het ONLOAD event van het BODY element. Dit event wordt aangeroepen op het moment dat de webpagina voor het eerst geladen of ververst wordt in de browser. Als dit gebeurt, dan zorgen we dat onmiddellijk de standaard geselecteerde optie van de drop-down list wordt getoond. Dan het ONCHANGE event van het SELECT element. Dit event wordt aangeroepen als de gebruiker een nieuwe optie in de drop-down list selecteert. Daarna komt het SELECTED attribuut van het OPTION element. Hiermee geef je aan welke optie standaard geselecteerd is zonder dat de gebruiker nog iets heeft gedaan. De JavaScript code gaan we regel voor regel bekijken. var ddlelement = document.getelementbyid("autosddl"); In de variabele dllelement slaan we de verwijzing op naar de drop-down list die we willen bekijken. var auto = ddlelement.options[ddlelement.selectedindex]; Via ddlelement kunnen we nu het array met opties opvragen. Vervolgens kunnen we daar een waarde uit selecteren via een index. We willen weten wat er in de geselecteerd index staat, dus moeten we de selectedindex eigenschap van ddlelement gebruiken als index in het array. We krijgen dan de geselecteerde optie en die slaan we op in de variabele auto. Vervolgens heeft een optie een aantal eigenschappen waaronder: value: Dit is de waarde die achter het VALUE attribuut van de optie staat. text: Dit is de tekst die in het OPTION element staat. Deze twee eigenschappen kunnen we dan in de PARAGRAPH elementen zetten. Zorg dat je de voorgaande code goed snapt, dan kun je zelf aan de slag. - 16 -
opgave 6.1 Je gaat nu een afbeeldingskiezer maken met een drop-down list. Zet daarvoor eerste een IMG element in je body, daarna een PA- RAGRAPH element voor de beschrijving, gevolgd door een dropdown list. Zorg dat deze onder elkaar staan en centreer ze. Maak vervolgens een JavaScript functie, zodat de gebruiker via de drop-down list foto's kan selecteren. Daarbij moet de foto en de begeleidende tekst worden getoond in de webpagina. Zorg dat alle foto's dezelfde hoogte hebben, zodat de opmaak van de pagina niet steeds verspringt. Hint 1: Maak weer gebruik van een array om de links naar de foto's op te slaan. - 17 -
7 zeeslag Zo, je hebt nu geoefend met 3 schermelementen. Er zijn er natuurlijk nog veel meer. Documentatie daarover kun je altijd vinden op de website van W3Schools. Voor nu is het echter genoeg om het zeeslag programma dat bij deze module hoort zelf beter te maken. opgave 7.1 Haal het zeeslag programma uit de ELO. Als het goed is heb je 2 bestanden: zeeslag.html en zeeslag.css. Open zeeslag.html in Notepad++ en kijk of alles werkt. Zet je logging (F12) aan en je ziet daar het zeeslagveld met schepen dat voor je gegenereerd wordt. Een W staat voor water en een S voor scheepsdeel. Met behulp van deze logging kun je zien waar je moet schieten om het spel snel uit te spelen. Dit is handig bij het testen. Je ziet dat je al best wat code krijgt. Probeer de code die je ziet zo goed mogelijk te begrijpen. Maak daarbij gebruik van het commentaar. Eerder in deze module hebben we het gehad over volgorde. Misschien is het je opgevallen dat sommige functies gebruikt worden vóór ze gedefinieerd worden. Dat is op zich raar. In veel programmeertalen is dit dan ook niet toegestaan, maar in JavaScript wel! Je gaat niet in alle JavaScript functies code toevoegen. Om het bestand overzichtelijker te maken, kun je functies dichtklappen. Dat doe je door op de plusjes voor de openingsaccolade van de functie te klikken. De volgende functies kun je dichtklappen: InitBord InitSchepenBord LogSchepenBord CheckVrijHor CheckVrijVert TekenBord MaakBorden Schiet - 18 -
Wanneer je het spel speelt, zie je dat er weinig anders gebeurt dan dat er scheepsdelen worden geplaatst in de tabel, dat het lege speelveld voorstelt. Dat is dan ook de enige feedback die je krijgt. Wat als de gebruikersinvoer fout is? Wat als je op een locatie schiet waar je al op geschoten hebt? Hoe weet je wanneer je gewonnen hebt? Kortom, we missen nog feedback en die gaan we als eerste toevoegen. opgave 7.2 Voeg onder de knop een PARAGRAPH element toe met ID feedback. Vervolgens ga je met JavaScript code zinnige feedback in de toegevoegde alinea zetten. Doe daarvoor het volgende: Sla een verwijzing naar het PARAGRAPH element met ID feedback op in een variabele. Je kunt dit het beste doen in de functie UpdateBord, omdat dit ook een vorm van feedback richting de gebruiker is. Pas vervolgens de code van UpdateBord zo aan dat je de volgende feedback krijgt: o De tekst raak als er een scheepsdeel geraakt wordt. Maak deze tekst groen. o De tekst mis als er water geraakt wordt. Maak deze tekst groen. o De tekst al op veld geschoten als de speler op een veld schiet waar hij/zij al eerder op geschoten heeft. Maak deze tekst donkerrood. o De tekst ongeldige positie als de speler op een veld schiet dat niet bestaat. Maak deze tekst donkerrood. Dat is al beter, nu krijgen tenminste feedback wanneer we iets fout doen. Het is echter ook wel nuttig als we bijhouden hoe vaak de speler al geschoten heeft. Hoe kun je anders later eventueel een highscore toevoegen. - 19 -
opgave 7.3 Voeg onder de feedback alinea een PARAGRAPH element toe met ID aantalschoten. Vervolgens ga je met JavaScript code bijhouden en laten zien hoe vaak de speler geschoten heeft. Doe daarvoor het volgende: Maak een variabele genaamd aantalschoten aan om het aantal schoten in bij te houden en geef deze een goede beginwaarde (initialiseren). Pas de waarde van de variabele aantalschoten op de juiste plek in de code aan. Bedenk zelf waar je dit het beste kunt doen. Hint: Je mag de waarde van de variabele natuurlijk niet aanpassen als de speler op een positie schiet waar al op geschoten is of die niet bestaat. Sla een verwijzing naar het PARAGRAPH element met ID aantalschoten op in een variabele na de instructie waarin je de waarde van de variabele aantalschoten aanpast. Pas daarna, via de verwijzing, de tekst van het PARAGRAPH element aan. Tot slot wil de speler natuurlijk weten wanneer hij gewonnen heeft. Hij wil dat niet moeten uitzoeken door zelf te kijken of hij alle schepen helemaal heeft geraakt. Dat moet het spel voor hem/haar doen. Dat ga je nu maken. Het bepalen of de speler gewonnen heeft kan op veel manier. Je mag zelf een strategie bedenken. In de volgende opgave wordt je een mogelijke oplossing aangeboden. Wanneer je dus zelf wilt puzzelen, kun beter niet naar de volgende opgave kijken. - 20 -
opgave 7.4 Voeg onder de alinea die bijhoudt hoe vaak de speler geschoten heeft een PARAGRAPH element toe met ID gewonnen. De strategie die je hier gaat gebruiken is als volgt. Je laat het programma bijhouden hoeveel scheepsdelen er initieel (aan het begin) door de code in het speelveld worden geplaatst. Daarnaast ga je tellen hoe vaak de speler raak schiet. Op het moment dat het aantal keer geraakt gelijk is aan het aantal geplaatste scheepsdelen, dan heeft de speler gewonnen. Doe daarvoor het volgende: Maak een variabele genaamd aantalschepen aan om het aantal scheepsdelen in bij te houden en geef deze een goede beginwaarde (initialiseren). Maak een variabele genaamd aantalraak aan om bij te houden hoe vaak de speler raak heeft geschoten en geef deze een goede beginwaarde (initialiseren). Pas de waarde van de variabele aantalschepen op de juiste plek in de code aan. Bedenk zelf waar je dit het beste kunt doen. Hint: In welke functie wordt een schip op het bord geplaatst? Pas de waarde van de variabele aantalraak op de juiste plek in de code aan. Bedenk zelf waar je dit het beste kunt doen. Na het aanpassen van de waarde van aantalraak kan het zijn dat de speler gewonnen heeft. Dat moet je dan ook controleren en dat ga je ook doen. Als de speler gewonnen heeft, dan sla je een verwijzing naar het PARAGRAPH element met ID gewonnen op in een variabele. Zet daarna, via de verwijzing, de tekst gewonnen in het PA- RAGRAPH element. Zoals we eerder hebben aangegeven, kan de gebruiker in invoervelden voor tekst makkelijk een fout maken. Tijdens het testen heb je waarschijnlijk ook gemerkt, dat het invoeren van de schoten op deze manier niet ideaal is. Het zou veel handiger zijn als je in het veld kunt klikken. Dat is echter best lastig te maken. Daarom gaan we een tussenoplossing gebruiken. - 21 -
opgave 7.5 Vervang de tekst invoer door twee drop-down lists. Je gaat helemaal zelf uitzoeken hoe dat moet! - 22 -
8 oude JavaScript opdrachten vernieuwd opgave 8.1 Maak een programma, dat de gebruiker vraagt een leeftijd als geheel getal in te voeren via een invoerveld. Onder het invoerveld moet een knop staan en wanneer de gebruiker op knop drukt, dan moet het programma onder de knop netjes afdrukken of iemand meer- of minderjarig is. opgave 8.2 Maak een programma, dat de gebruiker vraagt een positief geheel getal in te voeren via een invoerveld. Onder het invoerveld moet een knop staan en wanneer de gebruiker op de knop drukt, dan moet het programma onder de knop netjes afdrukken of het getal even of oneven is. opgave 8.3 Maak een programma, dat de gebruiker vraagt een maand te kiezen via een drop-down list. Wanneer de gebruiker een maand kiest, dan moet het programma naast de drop-down list netjes laten zien hoeveel dagen er in die maand zitten. Bij februari mag je van 28 dagen uitgaan. - 23 -
opgave 8.4 Maak een programma, dat de gebruiker vraagt een maand te kiezen via een drop-down list en een geldig jaartal via een invoerveld. Wanneer de gebruiker een maand kiest en/of een jaartal invoert, dan moet het programma boven de drop-down list en het invoerveld netjes laten zien hoeveel dagen er in die maand zitten. Bij februari mag je nu NIET van 28 dagen uitgaan. Hint: Zoek zelf uit hoe je bepaalt of een jaar een schrikkeljaar is. bonus opgave 8.1 Maak een programma, dat de gebruiker vraagt een datum in te voeren via 3 drop-down lists. In de eerste drop-down list staat de dag. In de tweede drop-down list staat de maand in cijfers. In de derde drop-down list staat het jaartal. De jaartallen beginnen bij 1980 en eindigen bij 2010. Wanneer de gebruiker iets verandert in 1 van de drop-down lists, moet het programma boven de drop-down lists netjes de datum afdrukken waarbij het maandcijfer vervangen is door de maandnaam. Dus als de gebruiker 12, 02 en 1982 selecteert, dan moet het programma 12 feb 1982 afdrukken. - 24 -
bonus opgave 8.2 Dit is een extra uitdaging! Zoek zelf uit hoe je dynamisch (dus via code) elementen toevoegt aan een drop-down list. Herschrijf vervolgens de code van de vorige opgave waarbij je gebruik maakt van het dynamisch toevoegen van elementen aan de drop-down lists. bonus opgave 8.3 Maak een programma, dat de gebruiker vraagt een getal tussen 1 en 10, inclusief grenzen, in te voeren via een drop-down list. Wanneer de gebruiker iets verandert in de drop-down list, dan moet het programma boven de drop-down list netjes de tafel van het ingevoerde getal afdrukken De tafel moet afgedrukt worden als HTML tabel. Hint: Gebruik een slim ID voor iedere tabel cel waar je iets naar toe moet schrijven en een loop. - 25 -
9 slideshows Een leuke uitdaging is het zelf maken van een slideshow. Je kunt natuurlijk meteen een kant en klare oplossing van het internet plukken, maar dat is geen uitdaging en daar leer je helemaal niets van. Je gaat dus zelf de volgende opdrachten maken, waarbij je alleen dingen opzoekt bij W3Schools. opgave 9.1 Maak zelf een slideshow waarbij de gebruiker door de plaatjes heen navigeert. opgave 9.2 Maak zelf een slideshow die zelf speelt en waarbij de gebruiker geen invloed kan uitoefenen. opgave 9.3 Maak zelf een slideshow die zelf speelt en waarbij de gebruiker door de plaatjes kan navigeren. - 26 -