diff options
Diffstat (limited to 'files/nl/learn/javascript')
5 files changed, 1179 insertions, 0 deletions
diff --git a/files/nl/learn/javascript/client-side_web_apis/index.html b/files/nl/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..1dcb05cc57 --- /dev/null +++ b/files/nl/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,55 @@ +--- +title: Client-side web APIs +slug: Learn/JavaScript/Client-side_web_APIs +tags: + - API + - Articles + - Beginner + - CodingScripting + - DOM + - Graphics + - JavaScript + - Landing + - Learn + - Media + - Module + - NeedsTranslation + - TopicStub + - WebAPI + - data +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>To get the most out of this module, you should have worked your way through the previous JavaScript modules in the series (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>). Those modules involve quite a lot of simple API usage anyway, as it is difficult to write client-side JavaScript examples that do anything useful without them! Here we go up a level, assuming knowledge of the core JavaScript language and exploring common Web APIs in a bit more detail.</p> + +<p>Basic knowledge of <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a> would also be useful.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></dt> + <dd>First up, we'll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></dt> + <dd>When writing web pages and apps, one of the most common things you'll want to do is manipulate web documents in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the {{domxref("Document")}} object. In this article we'll look at how to use the DOM in detail, along with some other interesting APIs that can alter your environment in interesting ways.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></dt> + <dd>Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page. This seemingly small detail has had a huge impact on the performance and behaviour of sites, so in this article we''ll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt> + <dd>The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs, and shows some typical uses of the latter.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt> + <dd>The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (<a href="/en-US/docs/Web/SVG">SVG</a>) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ths article provides an introduction to canvas, and further resources to allow you to learn more.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt> + <dd>HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</dd> + <dt>Device APIs</dt> + <dd>Modern web-browsing devices have many features that are useful for web apps to take advantage of, for example accessing the device's location data so you plot your position on a map, or telling the user that a useful update is available via system notifications or vibration hardware. This article looks at what is available, and goes through a few common use cases.</dd> + <dt>Client-side storage APIs</dt> + <dd>Most modern web browsers come with the ability to store structured data on the client-side, which is very useful if you want to create an app that will save its state between page loads, and perhaps even work when the device is offline. This article looks at the available options.</dd> +</dl> diff --git a/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html b/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html new file mode 100644 index 0000000000..61f3e48bcf --- /dev/null +++ b/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html @@ -0,0 +1,305 @@ +--- +title: Documenten manipuleren +slug: Learn/JavaScript/Client-side_web_APIs/Manipuleren_documenten +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<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> diff --git a/files/nl/learn/javascript/first_steps/a_first_splash/index.html b/files/nl/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..7151f9785b --- /dev/null +++ b/files/nl/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,700 @@ +--- +title: Een eerste duik in JavaScript +slug: Learn/JavaScript/First_steps/A_first_splash +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Nu heb je iets geleerd over de theorie van JavaScript en wat je ermee kunt doen, we geven je nu een spoedcursus in de basisfuncties van JavaScript via een volledig praktische zelfstudie. Hier bouw je stap voor stap een eenvoudig spel "Raad het nummer".</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voorwaarden:</th> + <td>Elementaire computerkennis, een basiskennis van HTML en CSS, een goed begrip van wat JavaScript is.</td> + </tr> + <tr> + <th scope="row">Doelstelling:</th> + <td>Om het eerste beetje ervaring te krijgen met het schrijven van JavaScript, en op zijn minst een basiskennis te verwerven van wat het schrijven van een JavaScript-programma inhoudt.</td> + </tr> + </tbody> +</table> + +<p>Er wordt van je niet verwacht dat je de code meteen volledig begrijpt. We willen je eerst kennis laten maken met de concepten op hoog niveau en je een idee geven van hoe JavaScript (en andere programmeertalen) werken. In volgende artikelen zal je al deze functies nog veel gedetailleerder gaan bekijken!</p> + +<div class="note"> +<p>Opmerking: Veel van de codefuncties die je in JavaScript ziet, zijn hetzelfde als in andere programmeertaal - functies, loops, enz. De codesyntax ziet er anders uit, maar de concepten zijn nog steeds grotendeels hetzelfde.</p> +</div> + +<h2 id="Denken_als_een_programmeur">Denken als een programmeur</h2> + +<p>Een van de moeilijkste dingen om te leren tijdens het programmeren, is niet de manier van opschrijven (syntax) die je moet leren, die je moet leren, maar hoe je deze kunt toepassen om problemen in de echte wereld op te lossen. Je moet gaan denken als een programmeur - meestal gaat het om beschrijvingen van wat je programma moet doen en uitzoeken welke codefuncties nodig zijn om die dingen te bereiken en hoe ze samen kunnen werken.</p> + +<p>Dit vereist een combinatie van hard werken, ervaring met de syntax van de programmeertaal, oefenen - en een beetje creativiteit. Hoe meer je codeert, hoe beter je erin zult worden. We kunnen niet beloven dat je "programmeurshersenen" in 5 minuten zult ontwikkelen, maar we zullen je voldoende gelegenheid geven om tijdens de cursus te denken als een programmeur.</p> + +<p>Laten we met dat in gedachten eens kijken naar het voorbeeld dat we in dit artikel gaan opbouwen, en het algemene proces bekijken om het te ontleden in tastbare taken.</p> + +<h2 id="Voorbeeld_-_Raad_het_nummerspel">Voorbeeld - Raad het nummerspel</h2> + +<p>In dit artikel laten we je zien hoe je het eenvoudige spel opbouwt dat je hieronder kunt zien:</p> + +<div class="hidden"> +<h6 id="Top_hidden_code">Top hidden code</h6> + +<p> </p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>Raad het nummerspel</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>Raad het nummerspel</h1> + <p>We hebben een willekeurig getal tussen 1 en 100 gekozen. Kijk of je het in 10 beurten of minder kunt raden. We zullen je vertellen of je gok te hoog of te laag was.</p> + <div class="form"> <label for="guessField">Voer je gok in: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Doe een gok" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +</body> +<script> + // Je JavaScript start hier + var randomNumber = Math.floor(Math.random() * 100) + 1; + var guesses = document.querySelector('.guesses'); + var lastResult = document.querySelector('.lastResult'); + var lowOrHi = document.querySelector('.lowOrHi'); + var guessSubmit = document.querySelector('.guessSubmit'); + var guessField = document.querySelector('.guessField'); + var guessCount = 1; + var resetButton; + + function checkGuess() { + var userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Vorige gok: '; + } + + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'Hartelijk gefeliciteerd! Je hebt het goed!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!GAME OVER!!!'; + lowOrHi.textContent = ''; + setGameOver(); + } else { + lastResult.textContent = 'Fout!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='Laatste gok was te laag!' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = 'Laatste gok was te hoog!'; + } + } + + guessCount++; + guessField.value = ''; + } + + guessSubmit.addEventListener('click', checkGuess); + + function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Start nieuw spel'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); + } + + function resetGame() { + guessCount = 1; + var resetParas = document.querySelectorAll('.resultParas p'); + for(var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent=''; + } + + resetButton.parentNode.removeChild(resetButton); + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value=''; + guessField.focus(); + lastResult.style.backgroundColor='white'; + randomNumber=Math.floor(Math.random() * 100) + 1; + } +</script> + +</html></pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}</p> + +<p>Probeer het te spelen - maak jezelf vertrouwd met het spel voordat je verder gaat.</p> + +<p>Stel je voor dat iemand je de volgende opdracht heeft gegeven voor het maken van dit spel:</p> + +<blockquote> +<p>Ik wil dat je een eenvoudig raad het nummer type spel maakt. Het moet een willekeurig getal tussen 1 en 100 kiezen en vervolgens de speler uitdagen om het getal in 10 beurten te raden. Na elke beurt moet aan de speler worden verteld of deze gelijk of ongelijk heeft, of de gok te laag of te hoog was. Het moet de speler ook vertellen welke nummers hij eerder geraden had. Het spel wordt beëindigd als de speler het cijfer correct raadt of als het aantal beurten op is. Wanneer het spel is afgelopen, moet de speler een optie krijgen om opnieuw te spelen.</p> +</blockquote> + +<p>Bij het bekijken van deze beschrijving is het eerste dat we kunnen doen is het beginnen met het opsplitsen in eenvoudige, bruikbare taken, in zo veel mogelijk programmeur-denkwijze als mogelijk:</p> + +<ol> + <li>Genereer een willekeurig getal tussen 1 en 100.</li> + <li>Noteer het gekozen waar de speler mee speelt. Start op 1.</li> + <li>Geef de speler een manier om te raden wat het nummer is.</li> + <li>Nadat een gok is ingediend, noteer je deze eerst ergens zodat de gebruiker zijn eerdere gerade gokbeurten kan zien.</li> + <li>Controleer vervolgens of dit het juiste nummer is.</li> + <li>Als het antwoord goed is: + <ol> + <li>Toon gefeliciteerd bericht.</li> + <li>Stop de mogelijkheid speler om meer getallen in te kunnen voeren (dit zou het spel in de war kunnen maken).</li> + <li>Schermbediening waarmee de speler het spel opnieuw kan starten.</li> + </ol> + </li> + <li>Als het antwoord verkeerd is en de speler heeft nog beurten over: + <ol> + <li>Vertel de speler dat deze ongelijk heeft.</li> + <li>Laat ze een nieuwe gok in te voeren.</li> + <li>Hoog het aantal gedane beurten op met 1.</li> + </ol> + </li> + <li>Als het antwoord verkeerd is en de speler geen beurten meer heeft: + <ol> + <li>Vertel de speler dat het spel klaar is.</li> + <li>Stop de speler om meer getallen in te kunnen voeren (dit zou het spel in de war maken).</li> + <li>Schermbediening waarmee de speler het spel opnieuw kan starten.</li> + </ol> + </li> + <li>Nadat het spel opnieuw is gestart, controleer je of de spellogica en UI volledig opnieuw zijn gestart en gaat het aantal beurten terug naar 1.</li> +</ol> + +<p>Laten we nu verder gaan en bekijken hoe we deze stappen kunnen omzetten in code, het spel opbouwen en de JavaScript-functies gaandeweg verkennen.</p> + +<h3 id="Eerste_opzet">Eerste opzet</h3> + +<p>Om deze beschrijving te beginnen, willen we graag dat je een lokale kopie maakt van het <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">nummer-guessing-game-start.html</a> bestand (zie het hier <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">live</a>). Open het in zowel je teksteditor als in je webbrowser. Op dit moment zie je een eenvoudige kop, alinea met instructies en een formulier voor het invoeren van een gok, maar het formulier zal op dit moment niets doen.</p> + +<p>De plaats waar we al onze code zullen toevoegen, bevindt zich in het element {{htmlelement ("script")}} onder aan de HTML:</p> + +<pre class="brush: html"><script> + + // Your JavaScript goes here + +</script> +</pre> + +<h3 id="Variabelen_toevoegen_om_onze_gegevens_op_te_slaan">Variabelen toevoegen om onze gegevens op te slaan</h3> + +<p>Laten we beginnen. Voeg eerst de volgende regels toe in het {{htmlelement("script")}} element:</p> + +<pre class="brush: js">var randomNumber = Math.floor(Math.random() * 100) + 1; + +var guesses = document.querySelector('.guesses'); +var lastResult = document.querySelector('.lastResult'); +var lowOrHi = document.querySelector('.lowOrHi'); + +var guessSubmit = document.querySelector('.guessSubmit'); +var guessField = document.querySelector('.guessField'); + +var guessCount = 1; +var resetButton;</pre> + +<p>Dit gedeelte van de code stelt de variabelen in die we nodig hebben om de gegevens op te slaan die ons programma zal gebruiken. Variabelen zijn in feite bakjes voor waarden (zoals getallen of tekenreeksen). Je maakt een variabele met het sleutelwoord var gevolgd door de naam van je variabele. Je kunt een waarde toewijzen aan je variabele met een gelijkteken (=) gevolgd door de waarde die je eraan wilt geven.</p> + +<p>In ons voorbeeld:</p> + +<ul> + <li>De eerste variable — <code>randomNumber</code> — krijgt een willekeurig getal tussen 1 en 100 toegewezen, berekend met een wiskundig algoritme.</li> + <li>De volgende drie variabelen worden elk gemaakt om een verwijzing naar de resultatenparagrafen (resultaatonderdelen) in onze HTML op te slaan en worden gebruikt om waarden in de alinea's later in de code in te voegen: + <pre class="brush: html"><p class="guesses"></p> +<p class="lastResult"></p> +<p class="lowOrHi"></p></pre> + </li> + <li>De volgende twee variabelen slaan verwijzingen op naar de formuliertekstinvoer en verzendknop en worden gebruikt om het invoeren van de gok later in te stellen. + <pre class="brush: html"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="Submit guess" class="guessSubmit"></pre> + </li> + <li>Onze laatste twee variabelen bevatten het aantal gokbeurten van 1 (gebruikt om bij te houden hoeveel gokbeurten de speler heeft gehad) en een verwijzing naar een resetknop (begin op nieuw knop) die nog niet bestaat (maar later zal verschijnen).</li> +</ul> + +<div class="note"> +<p><strong>Opmerking</strong>: Je leert later veel meer over variabelen in de cursus, te beginnen met het <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">volgende artikel</a>.</p> +</div> + +<h3 id="Functies">Functies</h3> + +<p>Voeg vervolgens het onderstaande toe onder je vorige JavaScript:</p> + +<pre class="brush: js">function checkGuess() { + alert('Ik ben een tijdelijke aanduiding'); +}</pre> + +<p>Functies zijn herbruikbare blokken met code die je één keer kunt schrijven en die keer op keer kunt hergebruiken, zodat je de code niet steeds opnieuw hoeft te schrijven. Dit is echt handig. Er zijn een aantal manieren om functies te definiëren, maar voor nu concentreren we ons op één eenvoudig type. Hier hebben we een functie gedefinieerd door het trefwoord <code> function</code> te gebruiken, gevolgd door een naam, met haakjes erachter geplaatst. Daarna plaatsen we twee accolades (<code> {} </code>). En binnen de accolades wordt alle code weergegeven die we willen uitvoeren wanneer we de functie aanroepen. </p> + +<p>De code wordt uitgevoerd door de naam van de functie in te typen gevolgd door de haakjes.</p> + +<p>Probeer je code op te slaan en vernieuw je browservenster</p> + +<p>Ga naar de <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">"developer tools JavaScript console"</a>, en voer de volgende regel in:</p> + +<pre class="brush: js"><code> +checkGuess();</code></pre> + +<p>Je zou een waarschuwing moeten zien verschijnen die zegt: "Ik ben een tijdelijke aanduiding"; we hebben een functie in onze code aangemaakt die een waarschuwing creëert wanneer we deze noemen.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: Je zult later in de cursus veel meer leren over functies.</p> +</div> + +<h3 id="Operators_(bewerkers)">Operators (bewerkers)</h3> + +<p>Met JavaScript-operators kunnen we testen uitvoeren, wiskunde doen, samen met andere strings en dergelijke dingen doen.</p> + +<p>Laten we onze code opslaan en de pagina vernieuwen die wordt weergegeven in onze browser. Open de <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"> JavaScript-console voor ontwikkelaarstools </a> als je deze nog niet hebt geopend, zodat je de onderstaande voorbeelden kunt typen - typ in elk van de "Voorbeeld" kolommen precies zoals getoond, druk op Return / Enter na elk, en zie welke resultaten ze teruggeven. Als je geen eenvoudige toegang hebt tot de browserontwikkelaarstools, dan kan je altijd onderstaande eenvoudig ingebouwde console gebruiken:</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html"><code> +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> + * { + box-sizing: border-box; + } + + html { + background-color: #0C323D; + color: #809089; + font-family: monospace; + } + + body { + max-width: 700px; + } + + p { + margin: 0; + width: 1%; + padding: 0 1%; + font-size: 16px; + line-height: 1.5; + float: left; + } + + .input p { + margin-right: 1%; + } + + .output p { + width: 100%; + } + + .input input { + width: 96%; + float: left; + border: none; + font-size: 16px; + line-height: 1.5; + font-family: monospace; + padding: 0; + background: #0C323D; + color: #809089; + } + + div { + clear: both; + } + + </style> + </head> + <body> + + + </body> + + <script> + var geval = eval; + + function createInput() { + var inputDiv = document.createElement('div'); + var inputPara = document.createElement('p'); + var inputForm = document.createElement('input'); + + inputDiv.setAttribute('class','input'); + inputPara.textContent = '>'; + inputDiv.appendChild(inputPara); + inputDiv.appendChild(inputForm); + document.body.appendChild(inputDiv); + inputDiv.focus(); + + if(document.querySelectorAll('div').length > 1) { + inputForm.focus(); + } + + inputForm.addEventListener('change', executeCode); + } + + function executeCode(e) { + try { + var result = geval(e.target.value); + } catch(e) { + var result = 'error — ' + e.message; + } + + var outputDiv = document.createElement('div'); + var outputPara = document.createElement('p'); + + outputDiv.setAttribute('class','output'); + outputPara.textContent = 'Resultaat: ' + result; + outputDiv.appendChild(outputPara); + document.body.appendChild(outputDiv); + + e.target.disabled = true; + e.target.parentNode.style.opacity = '0.5'; + + createInput() + } + + createInput(); + + </script> +</html></code></pre> +</div> + +<p><code>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</code></p> + +<p>Laten we eerst kijken naar rekenkundige operatoren, bijvoorbeeld:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator (bewerker)</th> + <th scope="col">Naam</th> + <th scope="col">Voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <td>+</td> + <td>Optelling</td> + <td>6 + 9</td> + </tr> + <tr> + <td>-</td> + <td>Aftrekken</td> + <td>20 - 15</td> + </tr> + <tr> + <td>*</td> + <td>Vermenigvuldigen</td> + <td>3 * 7</td> + </tr> + <tr> + <td>/</td> + <td>Delen</td> + <td>10 / 5</td> + </tr> + </tbody> +</table> + +<p>Je kunt ook de operator + gebruiken om tekstreeksen samen te voegen (concatenation in het programmeren). Probeer de volgende regels uit te voeren:</p> + +<pre class="brush: js"><code> +var naam = 'Bingo'; +naam; +var hallo = ' zegt hallo!'; +hallo; +var begroeting = naam + hallo; +begroeting;</code></pre> + +<p>Er zijn ook enkele shortcut-operators (kortere notatie) beschikbaar, augmented assignment-operatoren genaamd. Als je bijvoorbeeld eenvoudig een nieuwe tekstreeks aan een bestaande wilt toevoegen en het resultaat terug geeft, kan je dit doen:</p> + +<pre class="brush: js"><code> +naam += ' zegt hallo!';</code></pre> + +<p>This is equivalent to</p> + +<pre class="brush: js"><code> +naam = naam + ' zegt hallo!';</code></pre> + +<p>Wanneer we waar / niet waar testen uitvoeren (bijvoorbeeld binnen conditionals - zie {{anch ("Conditionals", "below")}}, gebruiken we vergelijkingsoperatoren, bijvoorbeeld:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator</th> + <th scope="col">Naam</th> + <th scope="col">Voorbeeld</th> + </tr> + <tr> + <td>===</td> + <td>Strikte gelijkheid (is het precies hetzelfde?)</td> + <td>5 === 2 + 4</td> + </tr> + <tr> + <td>!==</td> + <td>Niet-gelijkheid (is het niet hetzelfde?)</td> + <td>'Chris' !== 'Ch' + 'ris'</td> + </tr> + <tr> + <td><</td> + <td>Minder dan</td> + <td>10 < 6</td> + </tr> + <tr> + <td>></td> + <td>Groter dan</td> + <td>10 > 20</td> + </tr> + </thead> +</table> + +<h3 id="Conditionals_(condities)">Conditionals (condities)</h3> + +<p>Terug naar onze <code>checkGuess()</code> -functie, ik denk dat het veilig is om te zeggen dat we niet willen dat het alleen maar een plaatshouderbericht uitspuugt. We willen dat het controleert of de gok van een speler correct is of niet, en dat het op de juiste manier reageert.</p> + +<p>Vervang nu de huidige functie <code>checkGuess()</code> door deze versie:</p> + +<pre class="brush: js"><code> +function checkGuess() { + var userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Vorige gok: '; + } + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'Hartelijk gefeliciteerd! Je hebt het goed!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!GAME OVER!!!'; + setGameOver(); + } else { + lastResult.textContent = 'Fout!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent = 'Laatste gok was te laag!'; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = 'Laatste gok was te hoog!'; + } + } + + guessCount++; + guessField.value = ''; + guessField.focus(); +}</code></pre> + +<p>Dit is veel code - pfff! Laten we door elke sectie gaan en uitleggen wat het doet.</p> + +<ul> + <li>De eerste regel (regel 2 hierboven) declareert een variabele met de naam <code>userGuess</code> en stelt de waarde in als huidige waarde die is ingevoerd in het tekstveld. We voeren deze waarde ook uit via de ingebouwde JavaScript methode <code>Number()</code>, om er zeker van te zijn dat de waarde absoluut een getal is.</li> + <li>Vervolgens komen we ons eerste voorwaardelijke codeblok tegen (regels 3-5 hierboven). Met een voorwaardelijk codeblok kan je code selectief uitvoeren, afhankelijk van of een bepaalde voorwaarde waar is of niet. Het lijkt een beetje op een functie, maar dat is het niet. De eenvoudigste vorm van voorwaardelijk blok begint met het sleutelwoord <code>if</code> (als), dan wat haakjes <code>()</code>, dan wat accolades <code>{}</code>. Binnen de haakjes nemen we een test op. Als de test <code>true</code> (waar) retourneert, voeren we de code binnen de accolades uit. Zo niet, dan doen we dat niet en gaan we verder met het volgende stukje code. In dit geval test de test of de variabele <code>guessCount</code> gelijk is aan <code>1</code> (dus of dit de eerste beurt van de speler is of niet): + <pre class="brush: js"><code> +guessCount === 1</code></pre> + Als dat zo is, maken we de tekstinhoud van de paragraaf gelijk aan "<code>Vorige gok</code>:". Zo niet, dan doen we dat niet.</li> + <li>Regel 6 voegt de huidige waarde van <code>UserGuess</code> aan het einde van de guesses-paragraaf toe plus een lege ruimte, zodat er elke keer een spatie tussen elke weergegeven gok verschijnt.</li> + <li>Het volgende blok (regels 8-24 hierboven) voeren een paar controles uit: + <ul> + <li>De eerste <code>if(){}</code> controleert of de gok van de gebruiker gelijk is aan het <code>randomNumber</code> zie is gezet bovenaan onze JavaScript-code. Als dat zo is, heeft de speler correct geraden en is het spel gewonnen, dus laten we de speler een gefeliciteerd bericht zien met een mooie groene kleur, daarna wissen we de inhoud van het Lage /Hoge gok vakje en voeren een functie uit met de naam <code>setGameOver()</code>, die we later zullen bespreken.</li> + <li>Nu hebben we een nieuwe test aan aan het einde van de laatste conditie vast gemaakt met behulp van een <code>else if(){}</code>-structuur. Dit stukje code controleerd of de gok van de laatste beurt ook van de gebruiker is. Als dat zo is, doet het programma hetzelfde als in het vorige blok, maar in plaats van het gefeliciteerd bericht, wordt er een game-over-bericht geplaatst.</li> + <li>Het laatste blok dat aan het einde van deze code is gekoppeld (het <code>else {}</code>) bevat code die alleen wordt uitgevoerd als geen van de twee andere tests <code>true</code> terug geven (dat wil zeggen dat de speler het niet goed heeft geraden, maar er zijn nog meer gokbeurten over). In dit geval vertellen we de speler dat deze ongelijk heeft. Vervolgens voeren we een andere voorwaardelijke test uit om te controleren of de gok hoger of lager was dan het antwoord. Afhankelijk van dit resultaat vertellen we in een bericht of de gok hoger of lager was.</li> + </ul> + </li> + <li>De laatste drie regels in de functie (regel 26-28 hierboven) zorgen ervoor dat we klaar zijn voor de volgende gok. We voegen 1 toe aan de <code>guessCount</code>-variabele, zodat de speler zijn beurt opgebruikt (<code>++</code> is een incrementatiebewerking - dus een toename met 1) en de waarde wordt leeggemaakt in het formuliertekstveld en opnieuw gefocusseerd (de cursor wordt er opnieuw ingezet), zodat de volgende gok kan worden ingevoerd .</li> +</ul> + +<h3 id="Events">Events</h3> + +<p>Op dit moment hebben we een goed geïmplementeerde <code>checkGuess()</code>-functie, maar die doet niets omdat we hem nog niet hebben aangeroepen. In het ideale geval willen we het aanroepen als de knop "Doe een gok" wordt ingedrukt, en om dit te doen, moeten we een event (gebeurtenis) gebruiken. Events zijn acties die plaatsvinden in de browser, zoals een knop waarop geklikt wordt, of een pagina die wordt geladen, of een video die wordt afgespeeld, in reactie daarop kunnen we blokken met code uitvoeren. De constructies die luisteren naar de gebeurtenis die plaatsvindt, worden <strong>event listeners</strong> genoemd en de blokken code die worden uitgevoerd als reactie op het vuren van een event worden <strong>event handlers</strong> genoemd</p> + +<p>Voeg de volgende regel toe aan je <code>checkGuess()</code> functie:</p> + +<pre class="brush: js"><code> +guessSubmit.addEventListener('click', checkGuess);</code></pre> + +<p>Hier voegen we een event listener toe aan de <code>guessSubmit</code>-knop. Dit is een methode die twee invoerwaarden (argumenten genaamd) nodig heeft - het type event waarnaar we luisteren (in dit geval click (klik)) als een tekenreeks en de code die we willen uitvoeren wanneer de gebeurtenis plaatsvindt (in dit geval de checkGuess() functie - merk op dat we de haakjes niet hoeven te gebruiken bij het schrijven binnen {{domxref ("EventTarget.addEventListener", "addEventListener ()")}}).</p> + +<p>Probeer je code nu uit door op te slaan en te de browser te vernieuwen, je uitwerking zou nu moeten werken, tot op zekere hoogte. Het enige probleem is nu, als je het juiste antwoord raadt of gokken mist, het spel stuk zal gaan, omdat we nog niet de functie <code>setGameOver()</code> hebben aangemaakt en die zou moeten draaien zodra het spel voorbij is. Laten we nu onze ontbrekende code toevoegen en de voorbeeldfunctionaliteit voltooien.</p> + +<h3 id="De_spelfunctionaliteit_afmaken">De spelfunctionaliteit afmaken</h3> + +<p>Laten we de functie <code>setGameOver()</code> aan de onderkant van onze code toevoegen en er vervolgens doorheen lopen. Voeg dit nu toe, onder de rest van je JavaScript:</p> + +<pre class="brush: js"><code> +function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Start nieuw spel'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); +}</code></pre> + +<ul> + <li>De eerste twee regels schakelen de formuliertekstinvoer en -knop uit door hun uitgeschakeleigenschap in te stellen op <code>true</code>. Dit is nodig, want als we dat niet deden, zou de gebruiker meer gokken kunnen doen nadat het spel voorbij is, wat de boel zou verpesten.</li> + <li>De volgende drie regels maken een nieuw {{htmlelement("button")}} element, en zet de tekst op "Start nieuw spel", en zet de knop onderaan ons al bestaande HTML.</li> + <li>De laatste regel zet een event listener op onze nieuwe knop zodat, als erop de geklikt wordt, de functie genaamt <code>resetGame()</code> wordt uitgevoerd.</li> +</ul> + +<p>Nu moeten we de functie nog maken! Voeg de volgende code toe, nogmaals aan de onderkant van je JavaScript:</p> + +<pre class="brush: js"><code> +function resetGame() { + guessCount = 1; + + var resetParas = document.querySelectorAll('.resultParas p'); + for (var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; + } + + resetButton.parentNode.removeChild(resetButton); + + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value = ''; + guessField.focus(); + + lastResult.style.backgroundColor = 'white'; + + randomNumber = Math.floor(Math.random() * 100) + 1; +}</code></pre> + +<p>Dit opnieuw een vrij lang blok code en stelt alles volledig opnieuw in zoals het was aan het begin van het spel, dus de speler kan nog een keer proberen.</p> + +<p>Het:</p> + +<ul> + <li>Zet <code>guessCount</code> terug naar 1.</li> + <li>Leegt alle informatie paragraven.</li> + <li>Verwijderd de reset knop van de code.</li> + <li>Zet de formulier elementen aan, en leegt het tekstveld en zet de cursor erin, klaar zodat een nieuwe gok ingevoerd kan worden.</li> + <li>Verwijderd de achtergrondkleur van de <code>lastResult</code> paragraaf.</li> + <li>Maakt een nieuw willekeurig nummer, zodat je niet direct het nieuwe nummer kan raden!</li> +</ul> + +<p><strong>Op dit punt zou je een volledig werkend (eenvoudig) spelletje moeten hebben - gefeliciteerd!</strong></p> + +<p>Het enige dat we nog moeten doen in dit artikel is praten over een paar andere belangrijke codefuncties die je al hebt gezien, hoewel je je dit misschien niet hebt gerealiseerd.</p> + +<h3 id="Loops">Loops</h3> + +<p>Een deel van de bovenstaande code die we beter moeten bekijken, is de <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a>-lus. Loops zijn een heel belangrijk concept bij het programmeren, waardoor je steeds een stuk code kunt blijven herhalen totdat aan een bepaalde voorwaarde is voldaan.</p> + +<p>Om te beginnen, ga opnieuw terug naar je <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">JavaScript-console voor ontwikkelaarstools</a>, en voer het volgende in:</p> + +<pre class="brush: js"><code> +for (var i = 1 ; i < 21 ; i++) { console.log(i) }</code></pre> + +<p>Wat gebeurt er? De nummers 1 tot 20 zijn afgedrukt in je console. Dit komt door de loop. Een for loop heeft drie invoer waarden (argumenten):</p> + +<ol> + <li><strong>Een startwaarde:</strong> in dit geval beginnen we een telling op 1, maar dit kan elk nummer zijn dat je leuk vindt. Je kunt <code>i</code> vervangen door elke naam die je ook leuk vindt, maar <code>i</code> wordt gebruikt als een variabele, omdat deze kort en gemakkelijk te onthouden is.</li> + <li><strong>Een eindwaarde</strong>: Hier hebben we <code>i <21</code> gespecificeerd - de lus zal doorgaan totdat <code>i</code> niet langer minder dan 21 is. Wanneer <code>i</code> 21 bereik, zal de lus niet langer lopen.</li> + <li><strong>Een incrementor (vermeerderaar): </strong>We hebben <code>i++</code> opgegeven, wat "tel 1 op bij i" betekent. De lus wordt één keer uitgevoerd voor elke waarde van <code>i</code>, totdat <code>i</code> een waarde van 21 bereik (zoals hierboven besproken). In dit geval printen we eenvoudig de waarde van <code>i</code> naar de console op elke iteratie met behulp van {{domxref ("Console.log", "console.log ()")}}.</li> +</ol> + +<p>Laten we nu kijken naar de lus in ons nummer gokspel - het volgende kan gevonden worden in de functie <code>resetGame()</code>:</p> + +<pre class="brush: js"><code> +var resetParas = document.querySelectorAll('.resultParas p'); +for (var i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</code></pre> + +<p>Deze code maakt een variabele die een lijst bevat van alle paragraven in <code><div class="resultParas"></code> door gebruik te maken van de {{domxref("Document.querySelectorAll", "querySelectorAll()")}} methode, dan wordt het door elke keer herhaald, waarbij elke keer de tekstinhoud wordt verwijderd.</p> + +<h3 id="Een_kleine_discussie_over_objecten">Een kleine discussie over objecten</h3> + +<p>Laten we nog een laatste verbetering toevoegen voordat we aan deze discussie beginnen. Voeg de volgende regel toe net onder de <code>var resetButton;</code> regel in de buurt van de bovenkant van je JavaScript en sla je bestand weer op:</p> + +<pre class="brush: js"><code> +guessField.focus();</code></pre> + +<p>Deze regel gebruikt de {{domxref("HTMLElement.focus", "focus()")}} methode om automatisch de text cursur (het knipperende streepje) in het {{htmlelement("input")}} tekst veld te zetten zodra de pagina laad, met de bedoeling dat de gebruiker direct kan beginnen met het typen van de eerste gok, en niet eerst in het formulier veld hoeft te klikken. Het is een kleine toevoeging, maar het vergroot het gebruiksgemak — de gebruiker een goede visuele idee geven van wat ze moeten doen om het spel te spelen.</p> + +<p>Laten we wat hier gebeurt iets meer op detail analyseren. In JavaScript is alles een object. Een object is een verzameling van functionaliteit die bij elkaar hoort in een groep. Je kunt je eigen objecten maken, maar dat is iets te geavanceerd voor dit moment, maar zullen er later in de cursus op terug komen.Voor nu zullen we alleen in gaan op de standaard ingebouwde objecten van je browser, die ervoor zorgen dat je een heel aantal nuttige dingen kunt doen.</p> + +<p>In dit geval, maken we eerst een <code>guessField</code> variabele die een verwijzing bevat naar het tekstformulierveld in onze HTML — de volgende regel vindt je bij onze variabelen aan de bovenkant van onze code: </p> + +<pre class="brush: js"><code> +var guessField = document.querySelector('.guessField');</code></pre> + +<p>Om deze verwijzing te krijgen, maken we gebruik van het {{domxref("document.querySelector", "querySelector()")}} object. <code>querySelector()</code> neemt een stukje informatie — een <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> die selecteerd het element waarnaar je wilt verwijzen.</p> + +<p>Omdat <code>guessField</code> nu een verwijzing bevat naar een {{htmlelement("input")}} element op de pagina, heeft het toegang tot een heel aantal eigenschappen (in het programmeren noemen we dit properties en het zijn eigenlijk variabelen opgeslagen in de objecten, waarbij sommige de waarden niet aangepast kunnen worden, maar een statische inhoud bevatten) en methodes (eigenlijk functies opgeslagen in de objecten). Een van de beschikbare methoden bij input elementen is <code>focus()</code>, dus we kunnen nu deze gebruiken om de cursor te zetten in het tekst invoerveld:</p> + +<pre class="brush: js"><code> +guessField.focus();</code></pre> + +<p>Variabelen die geen verwijzing bevatten naar formulier elementen, die hebben geen <code>focus()</code> methode beschikbaar. Bijvoorbeeld de <code>guesses</code> variabele bevat een verwijzing naar een {{htmlelement("p")}} element, en <code>guessCount</code> bevat een nummer.</p> + +<h3 id="Spelen_met_browser_objecten">Spelen met browser objecten</h3> + +<p>Laten we een beetje gaan spelen met enkele browser objecten.</p> + +<ol> + <li>Open eerst je JavaScript programma in een browser.</li> + <li>Open vervolgens je <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browserontwikkelaarstools</a> en zorg ervoor dat het JavaScript-console-tabblad geopend is. </li> + <li>Typ <code>guessfield</code> in en het console zal je laten zien dat de variabele een element {{htmlelement ("input")}} bevat. Je zult ook opmerken dat de console objectnamen die zich in de uitvoeringsomgeving bevinden automatisch toevoegt, inclusief je variabelen!</li> + <li>Typ nu het volgende: + <pre class="brush: js"><code> +guessField.value = 'Hallo';</code></pre> + De eigenschap <code>value</code> vertegenwoordigt de huidige waarde die is ingevoerd in het tekstveld. Je zult zien dat er iets door het invoeren van deze opdracht is veranderd, weet je wat dat is?</li> + <li>Probeer nu <code>guesses</code> in te typen en op Enter te drukken. De console zal je laten zien dat de variabele een element {{htmlelement ("p")}} bevat.</li> + <li>Probeer nu de volgende regel in te voeren: + <pre class="brush: js"><code> +guesses.value</code></pre> + De browser geeft <strong>undefined</strong> terug, omdat deze waarde niet bestaat in paragrafen.</li> + <li>Als je de tekst in een paragraaf (alinea) wilt wijzigen, heb je in de eigenschap {{domxref ("Node.textContent", "textContent")}} nodig. Probeer dit: + <pre class="brush: js"><code> +guesses.textContent = 'Waar is mijn alinea?';</code></pre> + <code> </code></li> + <li>Nu voor wat leuke dingen. Probeer de onderstaande regels één voor één in te voeren: + <pre class="brush: js"><code> +guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</code></pre> + Elk element op een pagina heeft een stijleigenschap, die zelf een object bevat waarvan de eigenschappen alle inline CSS-stijlen bevatten die op dat element zijn toegepast. Dit stelt ons in staat om dynamisch nieuwe CSS-stijlen in te stellen op elementen met behulp van JavaScript.</li> +</ol> + +<h2 id="Klaar_voor_nu_...">Klaar voor nu ...</h2> + +<p>Zo dus dit was het voor wat betreft het opbouwen van het voorbeeld - je hebt het einde bereikt, goed gedaan! Probeer je definitieve code uit, of <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">speel met onze voltooide versie hier</a>. Als je het voorbeeld niet werkend krijgt, vergelijk dan jouw code met die van onze <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">broncode</a>.</p> + +<p><code>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</code></p> diff --git a/files/nl/learn/javascript/first_steps/index.html b/files/nl/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..fa76ddf15c --- /dev/null +++ b/files/nl/learn/javascript/first_steps/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript First Steps +slug: Learn/JavaScript/First_steps +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><br> +In onze eerste JavaScript module beantwoorden we eerst we aantal fundamentele vragen zoals "wat is JavaScript?", "Hoe ziet het er uit?", en "Wat kan het doen?", voordat er verder wordt gegaan met de eerste praktijkervaring met het schrijven van JavaScript. Daarna bespreken we een paar belangrijke JavaScript kenmerken zoals variabelen, strings, nummers en arrays.</p> + +<h2 id="Voorwaarden">Voorwaarden</h2> + +<p>Voordat u deze module start, hebt u geen voorafgaande JavaScript-kennis nodig, maar moet u enige bekendheid met HTML en CSS hebben. U wordt geadviseerd om de volgende modules door te nemen voordat u met JavaScript begint:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Aan de slag met het web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basis JavaScript introductie</a>).</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie in HTML</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introductie in CSS</a>.</li> +</ul> + +<div class="note"> +<p><strong>Opmerking</strong>: Als u op een computer / tablet / ander apparaat werkt waar u niet de mogelijkheid hebt om uw eigen bestanden te maken, kunt u (de meeste van) de codevoorbeelden uitproberen in een online codeerprogramma zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Gidsen">Gidsen</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></dt> + <dd>Welcome to the MDN beginner's JavaScript course! In this first article we will look at JavaScript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with JavaScript's purpose.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></dt> + <dd>Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></dt> + <dd>When you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in JavaScript programs.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></dt> + <dd>After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article we will get down to the real basics, looking at how to work with most basic building blocks of JavaScript — Variables.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></dt> + <dd>At this point in the course we discuss maths in JavaScript — how we can combine operators and other features to successfully manipulate numbers to do our bidding.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt> + <dd>Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt> + <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> + <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt> + <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd> +</dl> diff --git a/files/nl/learn/javascript/index.html b/files/nl/learn/javascript/index.html new file mode 100644 index 0000000000..7e0f1c0d64 --- /dev/null +++ b/files/nl/learn/javascript/index.html @@ -0,0 +1,66 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - NeedsTranslation + - Topic + - TopicStub + - 'l10n:priority' +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} is een programmeertaal waarmee je complexe zaken kunt implementeren in websites. Telkens wanneer een webpagina meer doet dan statische informatie weergeven — meldingen op een bepaald tijdstip weergeven, inhoud vernieuwen op regelmatige basis, interactieve kaarten, geanimeerde 2D/3D prenten, video jukeboxes, etc. — kan je zo goed als zeker zijn dat er JavaScript mee gemoeid is.</p> + +<h2 id="Leerproces">Leerproces</h2> + +<p>Javascript is moeilijker om te leren dan gerelateerde technologieën zoals <a href="/en-US/docs/Learn/HTML">HTML</a> en <a href="/en-US/docs/Learn/CSS">CSS</a>. Voordat je begint met het leren van Javascript, is het aan te raden om als eerste vertrouwd te raken met eerder genoemde technologieën. Start met de volgende modules:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> +</ul> + +<p>Het hebben van ervaring met andere programmeertalen kan ook helpen.</p> + +<p>Nadat je vertrouwd bent met de basis van JavaScript, ben je er klaar voor om meer te leren over geavanceerde onderwerpen, zoals:</p> + +<ul> + <li>JavaScript diepgaand, zoals onze <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li><a href="/en-US/docs/Web/API">Web APIs</a></li> +</ul> + +<h2 id="Modules">Modules</h2> + +<p>Hieronder volgen een aantal modules om door te werken, in aangeraaden volgorde.</p> + +<dl> + <dt><a href="/nl/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> + <dd>In onze eerste JavaScript module beantwoorden we een aantal fundamentele vragen zoals "wat is JavaScript?", "Hoe ziet het er uit?", en "Wat kan het doen?", voordat je verder gaat met het schrijven van JavaScript. Daarna bespreken we een paar belangrijke JavaScript kenmerken zoals variabelen, strings, getallen en <em>arrays</em>(reeksen).</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript bouwstenen</a></dt> + <dd>In deze module gaan we verder met het behandelen van de fundamentele kenmerken van JavaScript. Daarbij kijken we naar veel voorkomende blokken code zoals <em>conditional statements</em>( als dit, dan doe dat), <em>loops</em>, functies en <em>events</em>(gebeurtenissen). Je hebt dit al eerder in de reeks voorbij zien komen, maar hier wordt het uitgebreid besproken.<em> </em></dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introductie van JavaScript objecten</a></dt> + <dd>In JavaScript bestaan de meeste dingen uit objecten. Van kerneigenschappen als strings en arrays tot de browser API's die op JavaScript gebouwd zijn. Je kunt zelfs je eigen objecten creëren om functies en variabelen die bij elkaar horen in pakketjes te voegen. JavaScript is van nature objectgeoriënteerd en dit is belangrijk om te begrijpen als je verder wilt met het schrijven van efficiënte code. Deze module is gemaakt om je daarin verder te helpen. We leren hier object theorie en syntax in detail, creëren zelf objecten en er wordt uitleg gegeven wat JSON data is en hoe je er mee kunt werken.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> + <dd>Als je client-side JavaScript voor websites of applicaties schrijft, duurt het niet lang voordat je API's gaat gebruiken. API's zijn interfaces die gebruikt worden om verschillende aspecten van de browser en het besturingssysteem van de site te manipuleren. Soms worden ze zelfs gebruikt om data van andere websites of services te manipuleren. In deze module onderzoeken we wat API's zijn en hoe je de meest voorkomende API's kunt gebruiken die je vaak tegenkomt in je ontwikkelwerk.</dd> +</dl> + +<h2 id="Veelvoorkomende_JavaScript_problemen_oplossen">Veelvoorkomende JavaScript problemen oplossen</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Gebruik JavaScript om veelvoorkomende problemen op te lossen.</a> Hier zijn links te vinden naar verschillende onderwerpen waarin uitgelegd wordt hoe je JavaScript kunt gebruiken om veelvoorkomende problemen bij het maken van een webpagina op te lossen.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript op MDN</a></dt> + <dd>Het algemene toegangspunt van de kerndocumentatie over JavaScript op MDN — Hier vind je uitgebreide referentie documenten over alle aspecten van de JavaScript taal en een aantal geavanceerde tutorials voor JavaScripters met ervaring.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding wiskunde</a></dt> + <dd>Een excellente serie van video tutorials om de wiskunde te leren die je nodig hebt om een effectieve programmeur te worden, door <a href="https://twitter.com/bit101">Keith Peters.</a></dd> +</dl> |