diff options
Diffstat (limited to 'files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html')
| -rw-r--r-- | files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html | 306 |
1 files changed, 306 insertions, 0 deletions
diff --git a/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..db710ceb48 --- /dev/null +++ b/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,306 @@ +--- +title: Documenten manipuleren +slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +original_slug: Learn/JavaScript/Client-side_web_APIs/Manipuleren_documenten +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">Als je een webpagina of app ontwerpt, zal je regelmatig de documentstructuur van je site willen manipuleren. Het zal een van je meest voorkomende taken zijn. Meestal doen we dit met het Document Object Model (DOM). Het DOM is een reeks APIs waarmee we de HTML van onze pagina kunnen controleren en de informatie erin opmaken met allerlei stijlelementen. Het DOM maakt vooral gebruik van het {{domxref("Document")}} object. In dit artikel leren we hoe we hoe we het DOM kunnen gebruiken en we bekijken een aantal interessante APIs waarmee we onze webomgeving op een interessante manier kunnen veranderen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vereiste kennis:</th> + <td>Basiskennis van een computer, basisbegrippen van HTML, CSS en Javascript, inclusief Javascript objecten.</td> + </tr> + <tr> + <th scope="row">Doelstelling:</th> + <td> + <p>Vertrouwd worden met de kern APIs van het DOM en met de andere APIs die meestal met het DOM en documentmanipulatie worden geassociëerd.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="De_belangrijke_onderdelen_van_een_webbrowser">De belangrijke onderdelen van een webbrowser </h2> + +<p>Web browsers bestaan uit zeer complexe software met vele bewegende onderdelen erin. Veel van die delen kunnen niet worden gecontrolleerd of gemanipuleerd door een webontwikkelaar die Javascript gebruikt. Je zou kunnen veronderstellen dat dat slecht is, maar er zijn goede redenen voor het vergrendelen van browsers. De meeste ervan draaien rond veiligheid. Beeld je je een website in die zomaar toegang zou kunnen hebben tot je opgeslagen paswoorden of andere gevoelige informatie en zou kunnen inloggen op websites alsof hij jou was? </p> + +<p>Ondanks de beperkingen geven Web APIs ons toegang tot heel wat functionaliteit die ons in staat stelt vele dingen te doen met webpagina's. Er zijn een aantal evidente onderdelen waar je regelmatig naar zult verwijzen in je code. In het volgende diagram vind je de belangrijkste onderdelen van een webbrowser die betrokken zijn bij de weergave van een webpagina :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>Het venster (of window) is de tabpagina van je webbrowser waarin je webpagina is geladen; deze wordt in Javascript voorgesteld door het {{domxref("Window")}} object. Dit object geeft je toegang tot allerlei methodes die bijvoorbeeld de afmetingen van het venster kunnen weergeven (zie {{domxref("Window.innerWidth")}} en {{domxref("Window.innerHeight")}}). Je kan het document dat in het venster is geladen, manipuleren. Je kan ook data opslaan die de ingeladen website genereert. Daarvoor kan je een lokale database aan de cliënt-zijde gebruiken maar er bestaan ook andere bergingsmechanismen. Je kan een <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events">event handler</a> aan het venster vastmaken en nog veel meer.</li> + <li>De navigator vertegenwoordigt de staat en de identiteit van de browser (i.e. de user-agent) zoals die in het web bestaat. In Javascript wordt de navigator voorgesteld door het {{domxref("Navigator")}} object. Je kan dit object gebruiken om allerlei informatie op te halen. Dit kunnen geolocatiegegevens zijn, de voorkeurstaal van de gebruiker, een media stream vanuit de webcam van de gebruiker enz.</li> + <li>Het document (in browsers weergegeven door het DOM) is de eigenlijke pagina die in het venster wordt geladen. We kennen het in Javascript als het {{domxref("Document")}} object. Je kan dit object gebruiken om informatie te verkrijgen over de HTML en CSS waaruit de pagina is opgebouwd en om die informatie te manipuleren. Het beschikt over methodes waarmee je naar een element in het DOM kan verwijzen en de inhoud van dat element veranderen. Je kan er ook een nieuwe stijl op toepassen, nieuwe elementen creëren en die aan het element toevoegen als zijn kinderen. Je kan het element zelfs helemaal verwijderen.</li> +</ul> + +<p>In dit artikel zullen we vooral aandacht besteden aan de manipulatie van het document, maar we zullen ook nog een paar andere nuttige zaken tonen.</p> + +<h2 id="Het_document_object_model">Het document object model</h2> + +<p>Het document dat in een van de browsertabs van je webbrowser is geladen, wordt weergegeven door het document object model. Dit model heeft een boomstructuur en wordt door de browser zelf gecrëerd. Deze voorstellingswijze maakt de HTML zeer toegankelijk voor programmeertalen. De browser zelf gebruikt het DOM om allerlei regels rond vormgeving en andere informatie op de HTML toe te passen terwijl het de pagina weergeeft. Ontwikkelaars zoals jij kunnen Javascriptcode schrijven die het DOM manipuleert nadat de pagina al is opgeladen in de browser.</p> + +<p>We hebben een eenvoudig voorbeeld gemaakt op <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">bekijk het ook live</a>). Probeer dit voorbeeld in je browser te openen. Het is een zeer simpele pagina die een{{htmlelement("section")}} element bevat waarin je een afbeelding en paragraaf kan vinden. In de paragraaf zit ook nog een link. De html-broncode ziet er zo uit :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Simple DOM example</title> + </head> + <body> + <section> + <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p> + </section> + </body> +</html></pre> + +<p>Het DOM daarentegen ziet er zo uit:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Opmerking</strong>: Dit DOM boomdiagram werd gegenereerd met Ian Hickson's <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a>.</p> +</div> + +<p>Zoals je kan zien krijgen elk element en elk stukje tekst in het document een plek in de boomstructuur. Zo’n plek noemen we een knooppunt (in het Engels een node). Je zal ook verschillende termen tegenkomen die worden gebruikt om te beschrijven met welk type knooppunt we te maken hebben en termen die hun posititie in de boom en hun relatie met elkaar beschrijven.</p> + +<p>Je zal merken dat ik zowel Engelse als Nederlandse termen gebruik. Een vertaling kan zeer verhelderend zijn maar een woord als "afstammelingsknooppunt" vind ik veel te lang om nog werkbaar te zijn en als je het googelt, heb je nul resulaten. Ik eet dus een beetje van twee walletjes.</p> + +<ul> + <li><strong>Element node</strong> (elementknooppunt): Een element zoals het in het DOM bestaat.</li> + <li><strong>Root node</strong> (bronknooppunt): Het knooppunt dat bovenaan in de boom zit. Als het over HTML gaat, is dit altijd het <code>HTML</code>-knooppunt. (Andere opmaaktalen zoals SVG en custom XML zullen andere root nodes hebben.)</li> + <li><strong>Child node</strong> (kindknooppunt): Een knooppunt dat in een andere knooppunt is genest en er <em>direct</em> onder zit. <code>IMG</code> is bijvoorbeeld een kind van <code>SECTION</code> in het voorbeeld hierboven.</li> + <li><strong>Descendant node</strong> (afstammelingsknooppunt): Een knooppunt dat <em>ergens</em> in een andere node zit. <code>IMG</code> is bijvoorbeeld geen kind van <code>BODY</code> omdat het twee niveaus lager in de boom zit, maar het is wel een nakomeling van <code>BODY</code>.</li> + <li><strong>Parent node</strong> (ouderknooppunt): een knooppunt dat een ander knooppunt bevat. <code>BODY</code> is bijvoorbeeld het ouderknoopunt van <code>SECTION</code> in het voorbeeld hierboven.</li> + <li><strong>Sibling nodes</strong> (broerknooppunten): Knooppunten die zich op hetzelfde niveau in de DOM-boom bevinden. <code>IMG</code> en <code>P</code> zijn bijvoorbeeld elkaars broers in het voorbeeld hierboven.</li> + <li><strong>Text node</strong> (tekstknooppunt): Een knooppunt dat een tekst bevat (i.e. een string).</li> +</ul> + +<p>Het is nuttig om je deze terminologie eigen te maken vooraleer je met het DOM begint te werken omdat een aantal andere termen die je zult tegenkomen op vergelijkbare wijze zijn opgebouwd. Je bent ze misschien zelf al tegengekomen als je CSS hebt geleerd (bijv. descendant selector, child selector).</p> + +<h2 id="Actief_Leren_Eenvoudige_DOM-Manipulatie">Actief Leren: Eenvoudige DOM-Manipulatie</h2> + +<p>Onze eerste les over DOM-manipulatie beginnen we met een praktisch voorbeeld.</p> + +<ol> + <li>Maak een lokale kopie van de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html pagina</a> en het <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">beeld</a> dat erbij hoort.</li> + <li>Voeg net onder <code></body></code> een <code><script></script></code> element toe. (Let op, dus onder de tweede tag die het body-element afsluit!).</li> + <li>Om een element in het DOM te manipuleren, moet je het eerst selecteren en een verwijzing ernaar opslaan in een variabele. Om dat te doen, voeg je de volgende regel aan je script toe: + <pre class="brush: js">var link = document.querySelector('a');</pre> + </li> + <li>Nu we een verwijzing naar het element hebben opgeslagen in een variabele, kunnen we beginnen met een aantal eigenschappen en methodes die beschikbaar zijn gemaakt voor de manipulatie van het DOM. (Deze worden gedefiniëerd in interfaces zoals het {{domxref("HTMLAnchorElement")}} voor een {{htmlelement("a")}} element, zijn algemenere ouder-interface, het {{domxref("HTMLElement")}}, en {{domxref("Node")}} die alle knooppunten in het DOM vertegenwoordigt. Laat ons eerst en vooral de tekst in de hyperlink veranderen door de waarde van de {{domxref("Node.textContent")}}aan te passen. Voeg de volgende regel toe aan de vorige: + <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre> + </li> + <li>We moeten ook de URL veranderen waar de hyperlink naar verwijst zodat die ons niet naar de verkeerde pagina brengt als we erop klikken. Voeg daarvoor de volgende regel toe: : + <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre> + </li> +</ol> + +<div> +<p>Opmerking : Zoals met zoveel in Javascript, zijn er vele manieren om een element te selecteren en om een verwijzing ernaar op te slaan in een variable. {{domxref("Document.querySelector()")}} is de aanbevolen moderne manier. Dat komt goed uit want deze methode laat je elementen selecteren met CSS-selectoren. De regel hierboven komt overeen met het eerste {{htmlelement("a")}} element dat in het document opduikt. Als je meer dan één element wil manipuleren, kan je {{domxref("Document.querySelectorAll()")}} gebruiken. Deze methode selecteert elk element in het document dat overeenkomt met de selector en slaat die op in een array.</p> + +<p>Er zijn ook oudere methodes beschikbaar om verwijzingen naar een element te grijpen, zoals:</p> + +<ul> + <li>{{domxref("Document.getElementById()")}}: selecteert een element via de waarde van het id-attribuut, bijvoorbeeld : <code><p id="myId">My paragraph</p></code>. Het ID wordt als parameter aan de functie doorgeven, <code>i.e.var elementRef = document.getElementById('myId')</code>.</li> + <li>{{domxref("Document.getElementsByTagName()")}}: brengt een array op die alle elementen van het gevraagde type bevat die zich in de pagina bevinden, bijvoorbeeld <code><p></code>s, <code><a></code>s, enz. Het type wordt ook als een parameter aan de functie doorgegeven, i.e. <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li> +</ul> + +<p>Deze twee methoden werken in oudere browsers die moderne methoden zoals <code>querySelector()</code> niet zullen begrijpen maar ze zijn niet zo praktisch. Kijk maar eens rond en zie welke anderen je nog kan vinden.</p> +</div> + +<h3 id="Nieuwe_Knooppunten_(Nodes)_Creëren_en_Plaatsen">Nieuwe Knooppunten (Nodes) Creëren en Plaatsen</h3> + +<p>Hierboven heb je eens kunnen proeven van wat je kan doen, maar laat ons nu verder gaan en kijken hoe we nieuwe elementen kunnen creëren.</p> + +<ol> + <li>We gebruiken opnieuw ons laatste voorbeeld en maken een referentie naar ons {{htmlelement("section")}} element. Daarvoor voegen we de volgende code toe onderaan het script waar we mee bezig waren (doe ook hetzelfde met de volgende regels): + <pre class="brush: js">var sect = document.querySelector('section');</pre> + </li> + <li>Nu gaan we een nieuwe paragraaf creëren met {{domxref("Document.createElement()")}} en we gaan er wat tekst in steken op dezelfde manier die we ervoor hebben gebruikt: + <pre class="brush: js">var para = document.createElement('p'); +para.textContent = 'We hope you enjoyed the ride.';</pre> + </li> + <li>Nu kan je de nieuwe paragraaf aan het einde van de sectie vastmaken met {{domxref("Node.appendChild()")}}: + <pre class="brush: js">sect.appendChild(para);</pre> + </li> + <li>Als laatste stap van dit gedeelte, voegen we een tekstknooppunt aan de paragraaf toe waar de hyperlink in zit. Daarvoor creëren we eerst de textnode met {{domxref("Document.createTextNode()")}}: + <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> + </li> + <li>Nu grijpen we een referentie naar de paragraaf waar de hyperlink in zit en maken het tekstknooppunt eraan vast : + <pre class="brush: js">var linkPara = document.querySelector('p'); +linkPara.appendChild(text);</pre> + </li> +</ol> + +<p>Dat is het meeste van wat je nodig hebt om knooppunten aan het DOM toe te voegen. Je zal deze methoden vaak gebruiken als je dynamische interfaces maakt (we zullen later een paar voorbeelden bekijken.</p> + +<h3 id="Elementen_Verplaatsen_en_Verwijderen">Elementen Verplaatsen en Verwijderen</h3> + +<p>Het zal regelmatig nodig zijn om knooppunten te verplaatsen of zelfs helemaal uit het DOM te verwijderen. En dat is natuurlijk mogelijk.</p> + +<p>Stel dat we de paragraaf met de hyperlink naar het einde van de sectie willen verplaatsen, dan doen we gewoon dit:</p> + +<pre class="brush: js">sect.appendChild(linkPara);</pre> + +<p>Dit verplaatst de paragraaf naar het einde van het <section> element. Je zou denken dat het een tweede kopie van de paragraaf zou maken, maar dat is niet het geval. linkPara is een referentie naar de enige kopie van die paragraaf. Als je een kopie zou willen maken en die ook nog toevoegen, zou je in de plaats daarvan {{domxref("Node.cloneNode()")}} moeten gebruiken.</p> + +<p>Een knooppunt is ook heel makkelijk te verwijderen, ten minste als je een verwijzing naar het knooppunt en zijn ouder hebt. In ons voorbeeld kunnen we gewoon {{domxref("Node.removeChild()")}} gebruiken:</p> + +<pre>sect.removeChild(linkPara);</pre> + +<p>Het wordt iets complexer als je een knooppunt wil verwijderen dat is gebaseerd op een verwijzing naar zichzelf, wat vrij vaak voorkomt. Er bestaat geen methode die een knooppunt vertelt zichzelf te verwijderen en dus moet je het volgende doen:</p> + +<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre> + +<p>Probeer nu deze regels uit in je de code van het voorbeeld en bekijk het resultaat.</p> + +<h3 id="Stijl_Manipuleren">Stijl Manipuleren</h3> + +<p>Het is mogelijk om de CSS van je webpagina op verschillende manieren te manipuleren met Javascript.</p> + +<p>Om te beginnen kan je met {{domxref("Document.stylesheets")}} een lijst opvragen van alle stijlbladen die aan je document vasthangen. Deze methode brengt ons een array van {{domxref("CSSStyleSheet")}} objecten op. Je kan dan naar wens stijlelementen toevoegen en verwijderen. We gaan echter niet dieper in op deze methodes omdat ze een beetje archaïsch zijn en nogal lastig in het gebruik. Er bestaan veel gemakkelijker methoden.</p> + +<p>De eerste manier is om inline-stijlen onmiddellijk aan de elementen toe te voegen die je dynamisch wil vormgeven. Dit wordt met {{domxref("HTMLElement.style")}} gedaan, die inline stijlinformatie over elk element in het document bevat. Je kan de eigenschappen van dit object bepalen en zo direct de stijl van je elementen bijwerken.</p> + +<ol> + <li>Voeg de volgende regels toe aan het voorbeeld waar we mee bezig zijn: + <pre class="brush: js">para.style.color = 'white'; +para.style.backgroundColor = 'black'; +para.style.padding = '10px'; +para.style.width = '250px'; +para.style.textAlign = 'center';</pre> + </li> + <li>Vernieuw de pagina en je zal zien dat de verschillende stijlen zijn toegepast op de paragraaf. Als je de paragraaf in je browser's <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector/DOM inspector</a> bekijkt, zal je zien dat deze stijlregels inderdaad inline in je document worden toegevoegd: + <pre class="brush: html"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> + </li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: Let op hoe de Javascript versie van CSS-eigenschapen in lower camel case (*) wordt geschreven terwijl de CSS-versies een koppelteken krijgen (bijv. <code>backgroundColor</code> versus <code>background-color</code>). Let erop deze niet met elkaar te verwarren, anders zullen ze niet werken.<br> + (*) De woorden worden aan elkaar geschreven en vanaf het tweede woord begint elk woord met een hoofdletter.</p> +</div> + +<p>Er is nog een algemeen aanvaarde manier om je stijlen dynamisch in je document te manipuleren en die gaan we nu bekijken:</p> + +<ol> + <li>Verwijder de vorige vijf regels die je aan je JavaScript hebt toegevoegd.</li> + <li>Voeg de volgende regels toe aan je HTML {{htmlelement("head")}}: + <pre><style> +.highlight { + color: white; + background-color: black; + padding: 10px; + width: 250px; + text-align: center; +} +</style></pre> + </li> + <li>Nu gaan we een zeer nuttig methode gebruiken voor algemene HTML-manipulatie : {{domxref("Element.setAttribute()")}}. Deze methode krijgt twee argumenten: het attribuut dat je aan het element wil vasthangen en de waarde die je het attribuut wenst te geven. In dit geval geven we onze paragraaf een klasse die de waarde ‘highlight’ krijgt. + <pre class="brush: js">para.setAttribute('class', 'highlight');</pre> + </li> + <li>Vernieuw je pagina en je zult geen verandering zien; de CSS wordt nog steeds op de paragraaf toegepast. Deze keer gebeurt dat echter omdat we de paragraaf een klasse geven die wordt geselecteerd door onze CSS-regel, niet door het gebruik van een inline CSS-stijl.</li> +</ol> + +<p>Welke methode je kiest hangt van jou af; beide hebben hun voordelen en nadelen. De eerste methode vereist minder gedoe en is goed voor eenvoudig gebruik. De tweede is meer voor de puristen onder ons. (CSS en Javascript worden niet met elkaar vermengd want er zijn geen inline-regels. Inline-stijl wordt als een slechte gewoonte beschouwd). Als je grotere en complexere apps begint te bouwen, zal je waarschijnlijk de tweede methode gaan gebruiken, maar het is echt helemaal jouw beslissing.</p> + +<p>Tot nu toe hebben we nog niet echt iets nuttigs gedaan! Het is zinloos om Javascript te gebruiken voor de creatie van statische inhoud – je kan die toch net zo goed in je HTML schrijven zonder Javascript te gebruiken. Het is ingewikkelder dan HTML en als je de inhoud met Javascript maakt, zijn er ook nog andere problemen mee verbonden (de Javascript-code is bijvoorbeeld onleesbaar voor zoekmachines).</p> + +<p>In de volgende secties zullen we paar praktische manieren zien waarop we DOM APIs kunnen gebruiken.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je kan onze <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">afgewerkte versie van het dom-example.html</a> op GitHub vinden. (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">bekijk het ook live</a>).</p> +</div> + +<h2 id="Actief_Leren_Nuttige_informatie_uit_het_window_object_halen.">Actief Leren: Nuttige informatie uit het window object halen.</h2> + +<p>Tot nu toe hebben enkel de kenmerken van {{domxref("Node")}} en {{domxref("Document")}} bekeken om documenten te manipuleren, maar er is geen reden waarom je geen data uit andere bronnen zou kunnen halen en die in je UI gebruiken. Denk eens even terug aan onze eenvoudige <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> demo uit het vorige artikel. We hadden locatiedata gevonden en die gebruikt om een map van jouw streek te maken. Je moet er gewoon voor zorgen dat je data het juiste formaat heeft. Javascript maakt het gemakkelijker dan vele andere talen om dat te doen want het gebruikt zwakke types; nummers zullen bijvoorbeeld gemakkelijk in strings kunnen worden omgezet als je ze in je scherm wil afdrukken.</p> + +<p>In dit voorbeeld zullen we een probleem oplossen dat vaak voorkomt : ervoor zorgen dat je applicatie even groot is als het window waarin het wordt bekeken, wat dan ook de grootte van dat venster mag zijn. Dit is vaak nuttig in situaties zoals spelletjes, waarin je zoveel mogelijk gebruik van de schermgrootte wil kunnen maken om het spel erin te spelen.</p> + +<p>Om te beginnen maken we een lokale kopie van twee demo-bestanden: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> en <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Open ze en bekijk ze eens. Je zal zien een {{htmlelement("div")}} element zien dat een klein deel van het scherm beslaat. Op de achtergrond van het scherm wordt een tegel toegepast. Dit gaan we gebruiken om het UI-gebied van onze app weer te geven.</p> + +<ol> + <li>Grijp eerst en vooral een referentie naar de div en dan naar de breedte en hoogte van het viewport (het venster waar we je document in zien zitten). Die sla je op in variabelen. Deze twee waarden worden handig opgeslagen in twee eigenschappen: {{domxref("Window.innerWidth")}} en {{domxref("Window.innerHeight")}}. Voeg de volgende regels toe aan je {{htmlelement("script")}}: + <pre class="brush: js">var div = document.querySelector('div'); +var WIDTH = window.innerWidth; +var HEIGHT = window.innerHeight;</pre> + </li> + <li>Daarna gaan we de breedte en de hoogte van de div dynamisch aanpassen zodat ze gelijk worden aan die van de viewport. Voeg de volgende lijnen toe aan de vorige: : + <pre class="brush: js">div.style.width = WIDTH + 'px'; +div.style.height = HEIGHT + 'px';</pre> + </li> + <li>Sla alles op en vernieuw je browser. Nu zou de div even groot als je viewport moeten zijn wat ook de afmetingen van je scherm zijn. Als je nu de afmetingen opnieuw probeert te veranderen om je venster groter te maken, zal je zien dat de div dezelfde grootte behoudt. We bepalen de afmetingen slechts eenmaal.</li> + <li>We kunnen ook een gebeurtenis of event gebruiken zodat de afmetingen van de div samen met die van het venster veranderen. Het {{domxref("Window")}} object beschikt over een event dat ‘resize’ heet en dat telkens wordt getriggered als de grootte van het venster wordt gewijzigd. De {{domxref("Window.onresize")}} event handler staat ons toe dit event aan onze code vast te koppelen. Zo wordt die uitgevoerd telkens als de afmetingen van het window veranderen. Voeg de volgende lijnen toe onderaan je code: + <pre class="brush: js">window.onresize = function() { + WIDTH = window.innerWidth; + HEIGHT = window.innerHeight; + div.style.width = WIDTH + 'px'; + div.style.height = HEIGHT + 'px'; +}</pre> + </li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: Als je vastraakt, kan je altijd nog ons <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">voltooide window resize voorbeeld</a> bekijken. (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">bekijk het ook live</a>).</p> +</div> + +<h2 id="Actief_Leren_een_dynamische_boodschappenlijst">Actief Leren : een dynamische boodschappenlijst</h2> + +<p>Om het artikel af te ronden, willen we je een kleine uitdaging aanbieden: we willen een eenvoudige boodschappenlijst maken waar je dynamisch artikelen aan kan toevoegen door een invoerveld en een knop te gebruiken. Als je een artikel in het veld invult en op de knop drukt:</p> + +<ul> + <li>Moet het artikel in de lijst verschijnen.</li> + <li>Moet elk artikel een knop krijgen waarop je kan drukken om het artikel van de lijst te verwijderen.</li> + <li>Moet het invoerveld leeg zijn en de focus moet erop liggen, klaar om er een ander artikel in in te vullen.</li> +</ul> + +<p>De voltooide demo zal er ongeveer zo uitzien:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p> + +<p>Om de oefening te maken, volg je de stappen hieronder en zorg je ervoor dat de lijst zich gedraagt zoals hierboven is beschreven.</p> + +<ol> + <li>Om te beginen download je dit bestand: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a>. Je zal zien dat er minimum aan CSS in zit, een lijst met een label, een invoerveld, een knop, een lege lijst en een {{htmlelement("script")}}-element. Je zal al je code aan het script toevoegen.</li> + <li>Creëer drie variabelen die een referentie naar de {{htmlelement("ul")}}, {{htmlelement("input")}}, en {{htmlelement("button")}} elementen bevatten.</li> + <li>Creëer een <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">functie</a> die zal worden uitgevoerd als er op de knop wordt geklikt.</li> + <li>In de functie sla je eerst de <a href="/en-US/docs/Web/API/HTMLInputElement#Properties">waarde</a> die het invoerveld nu heeft, op in een variabele.</li> + <li>Daarna maak je het invoerveld leeg door zijn waarde gelijk te maken aan een lege string: <code>''</code>.</li> + <li>Creëer drie nieuwe elementen {{htmlelement('li')}}, {{htmlelement('span')}}, en {{htmlelement('button')}}. Sla ze op in variabelen.</li> + <li>Bevestig het span-element en de knop aan het lijstonderdeel (li dus) en maak ze de kinderen van li.</li> + <li>Zet de tekstinhoud van het span-element gelijk aan de waarde van het invoerveld dat je eerder al hebt opgeslagen en de tekst van de knop gelijk aan 'Verwijderen'.</li> + <li>Bevestig het lijstonderdeel aan de lijst en maak het een kind van de lijst.</li> + <li>Bevestig een event handler aan de verwijderknop, die het volledige lijstonderdeel zal verwijderen als erop wordt geklikt. (Herinner je je nog hoe we al een node/knooppunt hebben verwijderd? Deze keer wil je echter niet het kind van zijn ouder verwijderen, je wil het kind van de grootouder verwijderen!)</li> + <li>Ten slotte gebruik je de <code><a href="/en-US/docs/Web/API/HTMLElement/focus">focus()</a></code>-methode om de focus op het invoerveld te leggen zodat je het volgende artikel kan invullen.</li> +</ol> + +<div class="note"> +<p><strong>Opmerking</strong>: Als je echt vast raakt, kijk dan eens naar onze <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">voltooide boodschappenlijst</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">bekijk hem ook live</a>.)</p> +</div> + +<h2 id="Samenvating">Samenvating</h2> + +<p>We hebben het einde van ons artikel over DOM-manipulatie bereikt. Je kent nu de belangrijke onderdelen van een webbrowser waarmee documenten worden gecontrolleerd en andere aspecten die relevant zijn voor onze beleving van een webpagina. Maar vooral begrijp je nu wat het Document Object Model is en hoe je het kan manipuleren om nuttige functionaliteit te creëren</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<p>Er zijn nog veel meer eigenschappen die je kan gebruiken om je documenten te manipuleren. Bekijk de volgende onderwerpen en zie wat je nog kan ontdekken.</p> + +<ul> + <li>{{domxref("Document")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li> +</ul> + +<p>(Werp ook eens een blik op onze <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API index</a> voor de volledige lijst van Web APIs die worden gedocumenteerd op MDN!)</p> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> |