praktisch programmeren
|
|
|
- Dirk van Loon
- 9 jaren geleden
- Aantal bezoeken:
Transcriptie
1 2017 praktisch programmeren F. Vonk versie
2 inhoudsopgave 1 inleiding DOM website schermelementen knoppen invoervelden drop-down lists zeeslag oude JavaScript opdrachten vernieuwd slideshows 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
3 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
4 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
5 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 -
6 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 -
7 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
8 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 In de volgende hoofdstukken ga je oefenen met een aantal van deze functies
9 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 -
10 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 -
11 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
12 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
13 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
14 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
15 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
16 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>
17 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
18 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
19 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
20 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
21 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
22 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
23 opgave 7.5 Vervang de tekst invoer door twee drop-down lists. Je gaat helemaal zelf uitzoeken hoe dat moet!
24 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
25 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 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
26 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
27 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
van PSD naar JavaScript
2015 van PSD naar JavaScript F. Vonk versie 2 19-9-2015 inhoudsopgave 1. inleiding... - 2-2. ontwikkelomgeving... - 3-3. programmeerconcepten... - 4 - statement... - 4 - sequentie... - 4 - variabele en
Android apps met App Inventor 2 antwoorden
2014 Android apps met App Inventor 2 antwoorden F. Vonk versie 1 11-11-2014 inhoudsopgave Mollen Meppen... - 2 - Schrandere Scholier... - 15 - Meteoor... - 21 - Dit werk is gelicenseerd onder een Creative
JavaScript. 0 - Wat is JavaScript? JavaScript toevoegen
0 - Wat is JavaScript? JavaScript is hele andere koek dan Scratch. Het wordt ook door professionele programmeurs gebruikt. Doordat er veel mensen gebruik maken van JavaScript is er veel informatie over
Formulieren maken met Dreamweaver CS 4/CS 5
Formulieren maken met Dreamweaver CS 4/CS 5 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit
GameMaker Language. F. Vonk versie
2014 GameMaker Language F. Vonk versie 2 5-3-2014 Inhoudsopgave 1. inleiding... - 3-2. GML en GameMaker... - 4-3. links... - 10 - Dit werk is gelicenseerd onder een Creative Commons Naamsvermelding NietCommercieel
algoritmiek - antwoorden
2016 algoritmiek - antwoorden F. Vonk versie 1 28-8-2016 inhoudsopgave eenvoudige algoritmes... - 3 - complexe algoritmes... - 7 - zoeken (vwo)... - 10 - sorteren (vwo)... - 12 - Dit werk is gelicenseerd
syntax, semantiek & lay-out
2016 syntax, semantiek & lay-out F. Vonk versie 1 23-8-2016 inhoudsopgave 1 inleiding... - 3-2 syntax... - 4-3 semantiek... - 8-3.1 instructie... - 8-3.2 sequentie... - 9-3.3 selectie... - 9-3.4 herhaling...
intro informatica F. Vonk versie
2017 intro informatica F. Vonk versie 2 7-8-2017 inhoudsopgave 1. inleiding... - 4-2. ELO... - 4-3. opzet... - 5-4. plagiaat en eigen inbreng... - 5-5. leerlijnen... - 6-6. soorten opdrachten en beoordeling...
Lab Webdesign: Javascript 7 april 2008
H8: FORMULIEREN In dit hoofdstuk komt het "form"-object aan de orde: we zullen zien hoe we JavaScript kunnen gebruiken voor het manipuleren en valideren van de gegevens die een eindgebruiker invult in
Les 9: formulier controle met javascript.
Les 9: formulier controle met javascript. Javascript is erg veel gebruikt bij internet toepassingen. In tegenstelling tot PHP, wat een server side scripting is, is java client side scripting. Dwz, niet
Foutcontrole met Javascript
Foutcontrole met Javascript Pol Van Dingenen Yannick Van Hauwe INLEIDING Het controleren van de gegevens die ingevuld zijn in formulieren is heel erg belangrijk. In de praktijk is enkel en alleen controle
Les 7. Instap. CSS en views: schilderijen. Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is.
Les 7 Instap Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is. CSS en views: schilderijen Ons eerste overzicht in de vorige les bestond uit het tonen van
MS Word opzet verslag
2014 MS Word opzet verslag F. Vonk versie 1 7-5-2014 inhoudsopgave terminologie... - 3 -... - 5 - stap 1: voorblad toevoegen... - 5 - stap 2: paginanummers op de bladzijdes zetten... - 6 - stap 3: lege
bug fixen F. Vonk versie
2017 bug fixen F. Vonk versie 1 24-7-2017 inhoudsopgave 1. inleiding... - 3-2. bug fixen... - 4-3. Sokoban... - 5-4. Breakout... - 7-5. Pac-Man... - 8-6. Asteroids... - 9-7. Snake... - 10-8. Super Mario...
De tekstverwerker. Afb. 1 de tekstverwerker
De tekstverwerker De tekstverwerker is een module die u bij het vullen van uw website veel zult gebruiken. Naast de module tekst maken onder andere de modules Aankondigingen en Events ook gebruik van de
Herhalingsoefeningen
Herhalingsoefeningen bij Websites maken met WEB! Pro ISBN 90 5905 193 9 2 Oefeningen hoofdstuk 2 2.1 Nieuwe website maken en opslaan Open een lege webpagina Open het venster Document Eigenschappen Typ
Handleiding Wordpress
Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde
Selenium IDE Webdriver. Introductie
Selenium IDE Webdriver Het Wielsem 10, 5231 BW s- Hertogenbosch, telefoon 073-6409311 e- mail [email protected] internet http://www.testwork.nl 1 Inhoudsopgave 1 Inhoudsopgave... 2 2 Selenium IDE... 3 3
Web building gevorderden: CSS & JavaScript. Karel Nijs 2008/11
Web building gevorderden: CSS & JavaScript Karel Nijs 2008/11 Webbuilding gevorderden les 3 JavaScript intro JavaScript invoegen JavaScript statements JavaScript popup berichten JavaScript functies JavaScript
JavaScript - antwoorden
2017 JavaScript - antwoorden F. Vonk versie 2 2-1-2017 inhoudsopgave strings...- 3 - variabelen en toekenning...- 4 - variabelen, types en vergelijking...- 5 - selectie...- 8 - herhaling... - 11 - functies...
Handleiding Website beheersysteem
Handleiding Website beheersysteem Inhoudsopgave 1. Inleiding...3 2. Inloggen...4 3. De startpagina...5 3.1. Startpagina menu...5 3.2. Bovenbalk...6 4. Menu en Pagina's...7 4.1. Een nieuwe pagina toevoegen...8
Stap 0: Voorbereiding
Welkom, Wat fijn dat je voor NT2+ van ThiemeMeulenhoff hebt gekozen! We helpen je graag op weg! Termen: Instituut Groepen Coördinator Docent Student Een onderwijsinstelling die uit een of meerdere groepen
Websitecursus deel 3 JavaScript
Websitecursus deel 3 JavaScript A Eskwadraat WebCie [email protected] 12 oktober 2015 Introductie Twee weken geleden HTML Vorige week CSS Deze week JavaScript Javascript JavaScript (ook wel JS) is een
Variabelen en statements in ActionScript
Ontwikkelen van Apps voor ios en Android Variabelen en statements in ActionScript 6.1 Inleiding Als we het in de informatica over variabelen hebben, bedoelen we een stukje in het geheugen van de computer
USB Webserver installatie en gebruik
2014 USB Webserver installatie en gebruik F. Vonk versie 2 14-8-2014 Inhoudsopgave 1. Inleiding... - 2-2. Installatie... - 3-3. USB Webserver... - 4-4. De MySQL omgeving... - 5-5. Een PHP script runnen...
Javascript oefenblad 1
Leer de basis van Javascript. Javascript oefenblad 1 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
Formulieren maken met Dreamweaver CS 4
Formulieren maken met Dreamweaver CS 4 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit zoveel
Access voor beginners - hoofdstuk 25
Access voor beginners - hoofdstuk 25 Handleiding van Auteur: OctaFish Oktober 2014 Werken met Klassemodules Tot nu toe heb ik in de cursus Access veel gewerkt met formulieren, en met procedures en functies.
Tutorial 1, Delphi: Geldspraak
Tutorial 1, Delphi: Geldspraak Versie Datum Auteurs Opmerkingen 1 25-09-2001 Kees Hemerik (code) Gebaseerd op Delphi 5 Enterprise. Roel Vliegen (tekst) 2 17-03-2005 Kees Hemerik Aanpassingen: Delphi 7,
v.1.11 Verenigingenweb Plus Handleiding Website in gebruik nemen
v.1.11 Verenigingenweb Plus Handleiding Website in gebruik nemen Inhoud Algemene informatie...3 Voor wie is deze handleiding?...3 Voordat u begint...3 Pagina beheer...4 Pagina aanmaken...4 Pagina wijzigen...4
Inhoud. MySite Handleiding 1
Inhoud Een module bewerken: Een module toevoegen...2 Een module kopiëren...4 Een module verplaatsen...5 Een module verbergen...6 Een module verwijderen...6 Openingsuren wijzigen...7 Een pagina bewerken:
oefening JavaScript - antwoorden
oefening JavaScript - antwoorden De antwoorden op deze opgaven zijn meestal wat aan de brede kant voor een Word document. Het is daarom handig om ze in Notepad++ te kopiëren en ze dan te bekijken. opgave
Een ASP.NET applicatie opzetten. Beginsituatie:
Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet.
Inhoud van de website invoeren met de ContentPublisher
Inhoud van de website invoeren met de ContentPublisher De inhoud van Muismedia websites wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS): de ContentPublisher.
Automatisering voor Financiële Dienstverleners. Werken met Queries en Merge Documenten. For more information visit our website at www.pyrrho.
Automatisering voor Financiële Dienstverleners Werken met Queries en Merge Documenten For more information visit our website at www.pyrrho.com Date: Document Nr: 30 maart, 2007 UBizzMerge, Versie 4.0 Status:
Web Presence Builder. Inhoud
Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf
1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.
Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te
Documentatie. InstantModules Q42. Versie 1.1
Documentatie InstantModules Q42 Versie 1.1 Inhoudsopgave Inhoudsopgave... 2 Voor gebruikers... 3 InstantComment... 3 InstantTagging... 5 Voor webmasters... 9 InstantComment... 9 InstantTagging... 11 Voor
HANDLEIDING DOIT BEHEER SYSTEEM
HANDLEIDING DOIT BEHEER SYSTEEM ALGEMENE INFORMATIE Het Doit beheer systeem is een modulair opgebouwd systeem waarin modules makkelijk kunnen worden toegevoegd of aangepast, niet iedere gebruiker zal dezelfde
opgericht 1 augustus 1932 Handleiding Artikel plaatsen
opgericht 1 augustus 1932 Handleiding Artikel plaatsen Gemaakt door : Marcel van Vuuren Bijgewerkt op : vrijdag 24 juli 2015 Versie : 24072015_v3.0 Inhoudsopgave Inleiding... 3 Plaatsen van een artikel...
talstelsels F. Vonk versie 1 30-7-2013
2013 talstelsels F. Vonk versie 1 30-7-2013 inhoudsopgave 1. inleiding... - 2-2. binair... - 4-3. hexadecimaal... - 10-4. octaal (vwo)... - 17-5. bonus opgaves... - 20-6. wat heb je geleerd... - 21 - Dit
AFO 113 Authoritybeheer
AFO 113 Authoritybeheer 113.1 Inleiding Authority records die gebruikt worden in de catalogusmodule kunnen via deze AFO beheerd worden. U kunt hier records opzoeken, wijzigen, verwijderen of toevoegen.
Een website omzetten naar WordPress
1 Een website omzetten naar WordPress Er zijn talloze programma s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt
extra oefening algoritmiek - antwoorden
extra oefening algoritmiek - antwoorden opgave "Formule 1" Maak een programma dat de gebruiker drie getal A, B en C in laat voeren. De gebruiker zorgt ervoor dat er positieve gehele getallen worden ingevoerd.
Handleiding: Whitelabel Customersite
ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.
PWS informatica. F. Vonk versie
2015 PWS informatica F. Vonk versie 2 3-9-2015 inhoudsopgave 1. inleiding... - 2-2. de ontwerpopdracht... - 3-3. de praktische leeropdracht... - 6-4. de theoretische leeropdracht... - 9 - Dit werk is gelicenseerd
Handleiding Wordpress CMS 4-5-2015
Handleiding Wordpress CMS 4-5-2015 Inhoud 1. Het dashboard.... 3 2. Een pagina of bericht aanpassen.... 5 3. Een nieuw bericht toevoegen... 6 4. Een pagina maken... 7 5. Website met sitebuilder... 8 6.
Uw TEKSTEDITOR - alle iconen op een rij
Uw TEKSTEDITOR - alle iconen op een rij Hieronder ziet u alle functionaliteiten van uw teksteditor onder elkaar ( op alfabetische volgorde). Afbeelding (zie foto) Bestanden (zie link) Broncode Citaat Documenten
Handleiding CMS VOORKANT
Handleiding CMS VOORKANT Inhoudsopgave Pagina 1. Toegang tot het CMS... 3 2. Artikel toevoegen... 4 3. Artikel bewerken... 5 4. Artikel kopiëren of verwijderen... 6 5. Afbeelding, link of tabel invoegen...
Handleiding MOBICROSS actie banners
Handleiding MOBICROSS actie banners Met de kant & klare MOBICROSS actie banners vergroot jij je kans om sneller je netwerk te bouwen. Je kunt je eigen campagne maken door de banners op je website te plaatsen,
Globale kennismaking
Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina
MWeb 4.0. Handleiding Basis Modules Versie 1.0
MWeb 4.0 Handleiding Basis Modules Versie 1.0 Index 1. Algemeen 3 1.1. Gebruikersnamen en Wachtwoorden 3 1.2. Inloggen 3 1.3. Uitloggen 3 1.4. Belangrijk 3 2. User Manager 4 2.1. Gebruikers lijst User
#Stap 1 Uw account activeren en inloggen
Inhoud #Stap 1 Uw account activeren en inloggen... 2 #Stap 2 Een test dossier aanmaken... 3 #Stap 3 Uw overzichtspagina... 3 #Stap 4 Het Dashboard... 4 #Optie 1 Bekijken... 4 #Optie 2 Wijzigen... 5 #Optie
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Aan de slag met Google Analytics. Deel 1.
Aan de slag met Google Analytics. Deel 1. 1. Google Analytics account aanmaken Stap 1 Via de link http://www.google.com/analytics kan er ingelogd worden bij Google Analytics. Klik op de knop account aanmaken
Algemene basis instructies
Inhoud: Algemene basis instructies... 2 Pictogrammen en knoppen... 2 Overzicht... 3 Navigeren (bladeren)... 3 Gegevens filteren... 4 Getoonde gegevens... 5 Archief... 5 Album... 5 Tabbladen en velden...
Handleiding wordpress
Handleiding wordpress Wordpress versie 3.0.4 Handleiding versie 1.1 Auteur Website Geert Hoekzema www.geerthoekzema.nl www.geerthoekzema.nl [email protected] 1 Inhoudsopgave Inleiding... 3 Beginnen
Quick start handleiding versie 1.0
Quick start handleiding versie.0 Inleiding Beste gebruiker, Via dit document lopen we door de basis onderdelen van je eigen Mijn Kroost control panel. Dit control panel vormt de basis voor het gebruik
Handleiding RS Form! 1.0.4
Handleiding RS Form! 1.0.4 Inhoud 1. Controlepaneel... 3 2. Forms Manager... 4 2.1 Nieuwe form aanmaken... 4 2.2 Nieuwe fields toevoegen... 7 2.3 Wijzigen/verwijderen bestaande Forms, Fields... 10 Versie
EDUscope Dossier Werken met Journalen
EDUscope Dossier Werken met Journalen EDUscope versie 3.7.0 Bergerweg 110 6135 KD Sittard 046-4571830 1 INHOUD 2 Inleiding... 3 3 Individueel leerlingjournaal... 3 3.1 Journaalregels toevoegen:... 3 3.2
Webredactie dashboard
Beheer Webredactie dashboard Het webredactie dashboard geeft u in één oogopslag een overzicht van de beheermogelijkheden van uw website. Daarnaast blijft u via het dashboard gemakkelijk op de hoogte van
In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip:
FORMULIEREN In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip: belangrijk Importeer formulierdata uit een CSV-bestand precies zoals verderop beschreven. 1. Gedrag
Handleiding Factureren 7x24
Handleiding Factureren 7x24 HOME Met Factureren 7x24 kunt u online u facturen samenstellen en inboeken. U kunt de facturen printen en per post versturen, maar u kunt ze ook automatisch e-mailen, of elektronisch
Inhoud. Handleiding Dododent. Beste tandarts of praktijkmanager,
Handleiding Dododent Beste tandarts of praktijkmanager, Hartelijk dank voor de aanschaf van een website bij Dodoworks. Hieronder volgt een uitgebreide handleiding van het Dododent systeem waarmee de website
logische schakelingen & logica antwoorden
2017 logische schakelingen & logica antwoorden F. Vonk versie 4 2-8-2017 inhoudsopgave waarheidstabellen... - 3 - logische schakelingen... - 4 - meer over logische schakelingen... - 8 - logica... - 10
Altijd op de hoogte van de laatste ontwikkelingen.
Beheer Webredactie dashboard Het webredactie dashboard geeft u in één oogopslag een overzicht van de beheersmogelijkheden van uw website. Daarnaast blijft u via het dashboard gemakkelijk op de hoogte van
HANDLEIDING Q1600 Fashion
HANDLEIDING Q1600 Fashion Pag.: 1 Inhoudsopgave Inleiding...3 Beheer...4 Kleurlijsten beheren...4 Kleurlijst groep aanmaken...6 Kleurlijst groep verwijderen...6 Kleuren (kleurnummers) aanmaken/wijzigen...7
Handleiding CMS. Auteur: J. Bijl Coldfusion Consultant
Handleiding CMS Auteur: J. Bijl Coldfusion Consultant Inhoudsopgave 1.0 Inleiding 3 2.0 Introductie CMS en websites 4 3.0 Inloggen in beheer 5 4.0 Dashboard 6 4.1 Bezoekers totalen 6 4.2 Bezoekers 7 4.3
Offective > CRM > Vragenlijst
Offective > CRM > Vragenlijst Onder het menu item CRM is een generieke vragenlijst module beschikbaar, hier kunt u zeer uitgebreide vragenlijst(en) maken, indien gewenst met afhankelijkheden. Om te beginnen
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Week 3 Cursus Photoshop
Week 3 Cursus Photoshop Blenden / Mengen Lagen met elkaar mengen. 1 Week 3 Cursus Photoshop Inleiding Wat is het effect van mengen Hoe is het toe te passen? Oefening met mengen en effecten Blenden = Mengen
Les 15 : updaten van gegevens in de database (deel2).
Les 15 : updaten van gegevens in de database (deel2). In de volgende reeks lessen zal alle vorige leerstof uitgebreid aan het bod komen. Zie ook de vorige lessen en documenten om informatie op te zoeken
Het toevoegen van videofragmenten in Hot Potatoes
Het toevoegen van videofragmenten in Hot Potatoes AARDAPPELBEURS 10 06 2009 werk van A.H.C. van Dinter is in licentie gegeven volgens een Creative Commons Naamsvermelding-Nietcommercieel-Gelijk Weblog:
HTML & CSS DEEL 1. webdesign. Programmeren met CodeAcademy
Programmeren met CodeAcademy HTML is de taal die gebruikt wordt om webpagina s te maken die jij elke dag bezoekt. Het is een logische manier om een website te structureren. Laten we kijken wat de term
Leerlingdossier & handelingsplannen. Welke mogelijkheden biedt de online tekstverwerker in ESIS? FAQ
FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online
Handleiding Content Management Systeem
Handleiding Content Management Systeem Inhoudsopgave Inhoudsopgave... 2 1. Inloggen... 3 2. Paginavolgorde... 3 3. Pagina en menutitel... 3 4. Pagina s bewerken... 4 5. De tekstverwerker... 4 6. Interne
PhPlist Gebruikers Handleiding
PhPlist Gebruikers Handleiding Auteur: Sander Duivenvoorden Bedrijf: Buildnet webservices E-mail: [email protected] Datum: 23-09-2008 Laatste wijziging: 17-10-2008 Versie: 1.1 1 Inleiding Het verzenden
Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010
Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management
PHP-OPDRACHT SITE BOUWEN
PHP-OPDRACHT SITE BOUWEN PERIODE 4 LEERJAAR 1 Opleiding: Duur: Applicatieontwikkelaar 1 onderwijsperiode (4-8 weken) Voorkennis: Basiscursus PHP 5.4 Victor Peters (978 90 125 8499 9) Basiscursus XHTML,
PvdA websites Quick Start voor het werken met het Hippo CMS
PvdA websites Quick Start voor het werken met het Hippo CMS Versie 2.0 Amsterdam, 16 maart 2009 2 Inhoudsopgave 1. Beginnen 5 1.1 Het CMS opstarten en afsluiten 5 1.2 De preview website bekijken 5 1.3
SPECIALE VERSIE VOOR LEERKRACHTEN. Inhoud van de website invoeren met de ContentPublisher. 1. Inloggen. 2. Overzicht
SPECIALE VERSIE VOOR LEERKRACHTEN Inhoud van de website invoeren met de ContentPublisher De inhoud van de schoolwebsite wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem
De tag aan het begin van het PHPscript is "<?php" aan het einde van het PHPscript gebruik je "?>".
PHP Les 3 Commando ECHO Interessante links: o http://www.donboscozwijnaarde.be/~moermant/ o http://php.net/manual/en/function.echo.php o http://www.w3schools.com/php/default.asp Wat is PHP? PHP is een
Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop).
FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online
HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.
Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for
Bewerk uw eigen Digibordbij boek
Bewerk uw eigen Digibordbij boek Naast de presentatie van schoolboeken in het Digibordbij systeem is het voor leraren ook mogelijk aanpassingen te maken in de digitale boeken. De leraar kan via een aparte
Stap 0: Voorbereiding
Welkom, Wat fijn dat je voor NT2+ van ThiemeMeulenhoff hebt gekozen! We helpen je graag op weg! Termen: Instituut Groepen Coördinator Docent Student Een onderwijsinstelling die uit een of meerdere groepen
Les 4 Snake. Een hele kleine Sprite. 1) Zie Afbeelding 1. Klik met je rechtermuisknop op sprite1. Kies vervolgens verwijderen.
Les 4 Snake Een hele kleine Sprite 1) Zie Afbeelding 1. Klik met je rechtermuisknop op sprite1. Kies vervolgens verwijderen. Afbeelding 1 2) Maak een nieuwe sprite met de knop 3) Teken vervolgens precies
Welkom bij onze gratis cursus Door hoemaakjeeenblog.nl
Welkom bij onze gratis cursus Door hoemaakjeeenblog.nl In 5 stappen uw eigen professionele blog maken Hoemaakjeeenblog.nl 1 Inhoudsopgave Welkom bij onze gratis cursus... 1 Stap 1, Een domeinnaam registreren
Formulier maken en opvangen met php
Welkom bij mijn PHP tutorial (Deel 2) Ik ga in deze delen PHP uitleggen, dit doe ik in het programma notepad++ (gratis) deze kunt u downloaden van www.richard3332.nl/downloads.php Als u beschikt over dreamweaver
HTML 5 en CSS 3. Truus de Bont. CC Naamsvermelding 3.0 Nederland licentie. https://maken.wikiwijs.nl/65505
HTML 5 en CSS 3 Auteur Laatst gewijzigd Licentie Webadres Truus de Bont 14 september 2015 CC Naamsvermelding 3.0 Nederland licentie https://maken.wikiwijs.nl/65505 Dit lesmateriaal is gemaakt met Wikiwijs
HTML. Formulieren. Hans Roeyen V 3.0
Formulieren Hans Roeyen V 3.0 26 februari 2015 Inhoud 1. Formulieren... 3 1.1. De form tag... 3 1.1.1. Het action attribute... 4 1.1.2. Het method attribute... 4 1.2. De input tag... 4 1.3. Soorten input
Scratch in drie uur. Hallo, mijn naam is Minti Mint! Ik ga je uitleggen hoe je je eigen computerspel kunt maken. We gaan een racespel maken!
Scratch in drie uur Hallo, mijn naam is Minti Mint! Ik ga je uitleggen hoe je je eigen computerspel kunt maken. We gaan een racespel maken! Bernd Gärtner Nederlandse vertaling en bewerking: Martine Segers
Blackboard en MyMedia
My Media De module My Media geeft via de My Media link toegang tot de bestanden waarover je via het media platform de beschikking hebt om in Blackboard te gebruiken. Bijvoorbeeld: Module toevoegen Als
Leerlingdossier & handelingsplannen
FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online
Release notes Swing 5.0.6 & 5.0.7
Release notes Swing 5.0.6 & 5.0.7 Copyright 2016 Swing Jive Swing is een product van ABF Research Jive Full screen weergave Swing 5 beschikt nu ook over een full screen weergave. Deze is te activeren via
Gebruikershandleiding voor: Beperkte Password protectie met JavaScript
Gebruikershandleiding voor: Beperkte Password protectie met JavaScript URL: http://home.hccnet.nl/s.f.boukes/html-2/html-202.htm INHOUD : 1. Structuur van een beveiligde site 2. Login-formulier 3. Login
Gebruikershandleiding BosorNet
Gebruikershandleiding BosorNet Inhoud Diensten en roosters... 1 Wensen invoeren... 4 Diensten en roosters Je start BosorNet op in een browser (bijvoorbeeld Microsoft Explorer, Opera) met de link die je