diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:47 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:47 +0100 |
commit | 004b3c5fc8d71b68fcb019c9e0346bf80024dbbd (patch) | |
tree | da24dacd9c5017e318f84563381671b5bdfb3e47 /files/nl/web | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-004b3c5fc8d71b68fcb019c9e0346bf80024dbbd.tar.gz translated-content-004b3c5fc8d71b68fcb019c9e0346bf80024dbbd.tar.bz2 translated-content-004b3c5fc8d71b68fcb019c9e0346bf80024dbbd.zip |
unslug nl: move
Diffstat (limited to 'files/nl/web')
-rw-r--r-- | files/nl/web/api/crypto/getrandomvalues/index.html (renamed from files/nl/web/api/window.crypto.getrandomvalues/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/api/element/mousedown_event/index.html (renamed from files/nl/web/events/mousedown/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/api/element/mouseout_event/index.html (renamed from files/nl/web/events/mouseout/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/api/web_storage_api/index.html | 298 | ||||
-rw-r--r-- | files/nl/web/api/web_workers_api/using_web_workers/index.html | 28 | ||||
-rw-r--r-- | files/nl/web/css/css_color/index.html (renamed from files/nl/web/css/css_colors/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html (renamed from files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/css/voor_beginners/index.html | 63 | ||||
-rw-r--r-- | files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html | 269 | ||||
-rw-r--r-- | files/nl/web/javascript/aan_de_slag/index.html | 339 | ||||
-rw-r--r-- | files/nl/web/javascript/guide/regular_expressions/index.html (renamed from files/nl/web/javascript/guide/reguliere_expressies/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/javascript/guide/working_with_objects/index.html (renamed from files/nl/web/javascript/guide/werken_met_objecten/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/javascript/reference/classes/index.html (renamed from files/nl/web/javascript/reference/klasses/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/javascript/reference/global_objects/object/prototype/index.html | 241 | ||||
-rw-r--r-- | files/nl/web/javascript/reference/global_objects/symbol/index.html (renamed from files/nl/web/javascript/reference/global_objects/symbool/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/javascript/reference/operators/index.html (renamed from files/nl/web/javascript/reference/operatoren/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/javascript/reference/operators/typeof/index.html (renamed from files/nl/web/javascript/reference/operatoren/typeof/index.html) | 0 | ||||
-rw-r--r-- | files/nl/web/svg/tutorial/basic_transformations/index.html (renamed from files/nl/web/svg/tutorial/basis_transformaties/index.html) | 0 |
18 files changed, 326 insertions, 912 deletions
diff --git a/files/nl/web/api/window.crypto.getrandomvalues/index.html b/files/nl/web/api/crypto/getrandomvalues/index.html index c91a691be9..c91a691be9 100644 --- a/files/nl/web/api/window.crypto.getrandomvalues/index.html +++ b/files/nl/web/api/crypto/getrandomvalues/index.html diff --git a/files/nl/web/events/mousedown/index.html b/files/nl/web/api/element/mousedown_event/index.html index a042336cd2..a042336cd2 100644 --- a/files/nl/web/events/mousedown/index.html +++ b/files/nl/web/api/element/mousedown_event/index.html diff --git a/files/nl/web/events/mouseout/index.html b/files/nl/web/api/element/mouseout_event/index.html index f454a2d50b..f454a2d50b 100644 --- a/files/nl/web/events/mouseout/index.html +++ b/files/nl/web/api/element/mouseout_event/index.html diff --git a/files/nl/web/api/web_storage_api/index.html b/files/nl/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..310129e321 --- /dev/null +++ b/files/nl/web/api/web_storage_api/index.html @@ -0,0 +1,298 @@ +--- +title: DOM Storage +slug: DOM/Storage +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +<h2 id="Samenvatting">Samenvatting</h2> +<p>DOM Storage is de naam van een set <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage" style="line-height: inherit;">opslag-gerelateerde features</a> <span style="line-height: inherit;">voor het eerst geïntroduceerd in de </span><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a><span style="line-height: inherit;">-specificatie en nu afgesplitst in zijn eigen </span><a class="external" href="http://dev.w3.org/html5/webstorage/" style="line-height: inherit;" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>-specificatie. DOM Storage is ontworpen met als doel een grotere, beter beveiligde en makkelijker te gebruiken alternatief voor opslaan van informatie dan cookies te zijn. Het is geintroduceerd met <a href="/en-US/docs/Firefox_2_for_developers" style="line-height: inherit;" title="Firefox_2_for_developers">Firefox 2</a> en <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" style="line-height: inherit;" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> +<div class="note"> + <strong>Note:</strong> DOM Storage is niet hetzelfde als <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces voor SQLite) of <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (een <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> opslag utility te gebruiken door extensies).</div> +<h2 id="Omschrijving">Omschrijving</h2> +<p>Het DOM Storage-mechanisme is een manier om key/value-paren op een veilige manier op te slaan en later ophalen voor gebruik. Het doel van deze toevoeging is om een uitgebreide manier te leveren waardoor het mogelijk wordt om interactieve applicaties te maken (inclusief geavanceerde capaciteiten, zoals het 'offline' kunnen werken voor langere tijd).</p> +<p>Op Mozilla-gebaseerde browsers, Internet <span style="line-height: inherit;">Explorer 8+, Safari 4+, Chrome en Opera leveren allemaal een werkende implementatie van de DOM Storage-specificatie. (In het geval dat je ook oudere versies van IE ondersteunt, kan het handig zijn om te weten dat er een legacy feature genaamd "</span><a class="external" href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx" style="line-height: inherit;">userData behavior</a><span style="line-height: inherit;">" in pre-8 versies van IE zit)</span></p> +<p>DOM Storage is handig omdat er geen goede browser-only methode bestaat voor het aanhoudend opslaan van redelijke hoeveelheden data voor een willekeurige tijdsperiode. <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie" style="line-height: inherit;">Browsercookies</a> hebben gelimiteerde capaciteit en geven geen mogelijkheid voor het organiseren van aanhoudende data. Andere methodes (zoals <a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html" style="line-height: inherit;">Flash Local Storage</a>) vereisen een externe plugin.</p> +<p>Een van de eerste publieke applicaties die gebruik maakt van de nieuwe DOM Storage-functionalitiet (naast Internet Explorer's userData Behavior) was <a class="external" href="http://aaronboodman.com/halfnote/" style="line-height: inherit;">halfnote</a> (een notitieapplicatie) geschreven door <a class="external" href="http://aaronboodman.com/" style="line-height: inherit;">Aaron Boodman</a>. In zijn applicatie, sloeg Aaron notities zowel op door middel van een server (als een internetverbinding beschikbaar was) en een lokale dataopslag. Dit maakte het voor de gebruiker mogelijk om veilig opgeslagen notities te maken met een sporadische internetverbinding.</p> +<p>Ondanks dat het concept, en implementatie, in halfnote redelijk simpel was, laat de creatie zien wat de mogelijkheden zijn voor een nieuw soort webapplicaties die zowel online als offline bruikbaar zijn.</p> +<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.628em; line-height: inherit;">Referentie</span></p> +<p>Het hierop volgende zijn globale objecten die bestaan als een property van elk <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code> object</a>. Dit betekent dat ze aangesproken kunnen worden als <code>sessionStorage</code> of <code>window.sessionStorage</code>. (Dit is belangrijk omdat je hierdoor ze kan gebruiken in IFrames om extra data op te slaan, aan te spreken, buiten wat er direct beschikbaar is in je eigen pagina.)</p> +<h3 id="Storage"><code>Storage</code></h3> +<p>Dit is een constructor (<code>Storage</code>) voor alle Storage instanties (<code>sessionStorage</code> en <code>globalStorage[location.hostname]).</code> Het zetten van <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> zou zowel <code>localStorage.removeKey en sessionStorage.removeKey </code><span style="line-height: inherit;">als zodanig veranderen.</span></p> +<p><code>globalStorage</code> items zijn geen instanties van <code>Storage</code>, maar zijn instanties van <code>StorageObsolete</code>.</p> +<p><code>Storage</code> is gedefineerd door de WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> als het volgende:</p> +<pre class="eval">interface <dfn>Storage</dfn> { + readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; + [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); + [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); + [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); + [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); + void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); +}; +</pre> +<div class="note"> + <strong>Note: </strong>Ookal kan je de waardes lezen en schrijven door de standaard JavaScript property access methode, het gebruik van de getItem en setItem methodes wordt aangeraden.</div> +<div class="note"> + <strong>Note:</strong> Onthoud dat alles dat je opslaat via een store beschreven op deze pagina wordt omgezet naar een string via zijn <code>.toString</code> methode voordat het wordt opgeslagen. Een gewoon object opslaan resulteert dus in een string <code>"[object Object]"</code> dat wordt opgeslagen, in plaats van het object of zijn JSON-representatie. Het gebruik van native JSON parsing en serializatie methodes geleverd door de browser is een goede en veelvuldig gebruikte manier om objecten in string formaat op te slaan.</div> +<h3 id="sessionStorage"><code>sessionStorage</code></h3> +<p>Dit is een globaal object (<code>sessionStorage</code>) dat een opslagruimte biedt gedurende de duur van paginasessie. Een paginasessie duurt zolang de browser open is en overleeft het herladen van de pagina en paginarestoraties. Het openen van een pagina in een nieuwe tab of window zorgt ervoor dat een nieuwe sessie wordt gestart.</p> +<pre class="brush:js">// Sla data op in de huidige sessie store +sessionStorage.setItem("username", "John"); + +// Spreek de opgeslagen data aan +alert( "username = " + sessionStorage.getItem("username")); +</pre> +<p>Het <code>sessionStorage</code> object is het handigst voor het bijhouden van tijdelijke data die behouden moet blijven als de pagina per ongeluk wordt herladen.</p> +<p>{{ fx_minversion_note("3.5", "Voor Firefox 3.5, werd sessionStorage data niet automatisch hersteld van een browsercrash. Startend vanaf Firefox 3.5, werkt dit zoals per de specificatie.") }}</p> +<p><strong>Voorbeelden:</strong></p> +<p>Automatisch opslaan van de inhoud van een tekstveld en als de browser per ongeluk herladen wordt, het herstellen van de inhoud van het tekstveld, zodat geen tekst verloren gaat.</p> +<pre class="brush:js"> // Haal het tekstveld op dat we gaan volgen + var field = document.getElementById("field"); + + // Kijk of er een autosave waarde is + // (Dit gebeurt alleen als de pagina per ongeluk wordt herladen) + if ( sessionStorage.getItem("autosave")) { + // Herstel de inhoud van het tekstveld + field.value = sessionStorage.getItem("autosave"); + } + + // Bekijk de inhoud van het tekstveld iedere seconde + setInterval(function(){ + // En sla het resultaat op in het sessie storage object + sessionStorage.setItem("autosave", field.value); + }, 1000); +</pre> +<p><strong>Meer informatie:</strong></p> +<ul> + <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specificatie</a></li> +</ul> +<h3 id="localStorage" name="localStorage"><code>localStorage</code></h3> +<p><code>localStorage</code> is hetzelfde als <code>{{ Anch("sessionStorage") }} </code>met dezelfde same-origin regels toegepast, maar is vasthoudend. <code>localStorage</code> werd geintroduceerd in Firefox 3.5.</p> +<div class="note"> + <strong>Note:</strong> Als de browser in prive browsing modus gaat, wordt er een nieuwe, tijdelijke database aangemaakt om lokale dat in op te slaan. Deze database wordt geleegd en weggegooid als prive browsing modus wordt uitgezet.</div> +<h4 id="Compatibility">Compatibility</h4> +<p><code>Storage</code> objecten zijn een recente toevoeging aan de standaard. Hierdoor is het mogelijk dat ze niet aanwezig zijn in alle browsers. Je kan hier omheen werken door het toevoegen van en van de volgende twee stukken code aan het begin van je scripts. Dit maakt het gebruik van het <code>localStorage</code> object mogelijk in implementaties die het niet native ondersteunen.</p> +<p>Dit algoritme is een exacte imitatie van het <code>localStorage</code> object, maar maakt gebruik van cookies.</p> +<pre class="brush:js">if (!window.localStorage) { + Object.defineProperty(window, "localStorage", new (function () { + var aKeys = [], oStorage = {}; + Object.defineProperty(oStorage, "getItem", { + value: function (sKey) { return sKey ? this[sKey] : null; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "key", { + value: function (nKeyId) { return aKeys[nKeyId]; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "setItem", { + value: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "length", { + get: function () { return aKeys.length; }, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "removeItem", { + value: function (sKey) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + this.get = function () { + var iThisIndx; + for (var sKey in oStorage) { + iThisIndx = aKeys.indexOf(sKey); + if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } + else { aKeys.splice(iThisIndx, 1); } + delete oStorage[sKey]; + } + for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } + for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { + aCouple = aCouples[nIdx].split(/\s*=\s*/); + if (aCouple.length > 1) { + oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); + aKeys.push(iKey); + } + } + return oStorage; + }; + this.configurable = false; + this.enumerable = true; + })()); +} +</pre> +<div class="note"> + <strong>Note:</strong> De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies. Met dit algoritme gebruik de functies <code>localStorage.setItem()</code> en <code>localStorage.removeItem()</code> om een key toe te voegen, te veranderen of te verwijderen. Het gebruik van de methodes <code>localStorage.yourKey = yourValue;</code> en <code>delete localStorage.yourKey;</code> om een key te zetten en te verwijderen <strong>is niet een veilige manier met deze code</strong>. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> naar: <code style="background: #ccc;">"; path=/"</code> (en het aanpassen van de naam) wordt dit een <code>sessionStorage</code> polyfill in plaat van een <code>localStorage</code> polyfill.</div> +<p>Hier is nog een, minder precieze, imitatie van het <code>localStorage</code> object. Het is simpeler dan de vorige, maar is compatible met oudere browsers, zoals pre-8 versie van IE (<strong>werkend getest tot Internet Explorer 6</strong>). Het maakt ook gebruik van cookies.</p> +<pre class="brush:js">if (!window.localStorage) { + window.localStorage = { + getItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return null; } + return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); + }, + key: function (nKeyId) { + return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); + }, + setItem: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + this.length = document.cookie.match(/\=/g).length; + }, + length: 0, + removeItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + this.length--; + }, + hasOwnProperty: function (sKey) { + return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); + } + }; + window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; +} +</pre> +<div class="note"> + <strong>Note: </strong> De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies. Maak bij dit algoritme gebruik van de functies <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> om een key te krijgen, veranderen of verwijderen. Het gebruik van de methode <code>localStorage.yourKey</code> om een key te krijgen veranderen of verwijderen <strong>is niet toegestaan bij deze code</strong>. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> into: <code style="background: #ccc;">"; path=/" </code> (en het aanpassen van de naam) wordt dit een <code style="font-size: 14px;">sessionStorage</code> polyfill in plaat van een <code style="font-size: 14px;">localStorage</code> polyfill.</div> +<h4 id="Compatibility_en_de_relatie_met_globalStorage">Compatibility en de relatie met globalStorage</h4> +<p class="note"><code>localStorage</code> is hetzelfde als <code>globalStorage[location.hostname]</code>, met de uitzondering dat deze gescoped is naar een HTML5 origin (scheme + hostname + non-standard port) en dat <code>localStorage</code> een instantie is van <code>Storage</code> in tegenstelling tot <code>globalStorage[location.hostname]</code> wat een instantie is van <code>StorageObsolete</code> welke hieronder wordt behandeld. Bijvoorbeeld, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is niet bereikbaar voor het <code>localStorage</code> object als <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> maar ze kunnen hetzelfde <code>globalStorage</code> item aanspreken. <code>localStorage</code> is een standaard interface terwijl <code>globalStorage</code> een non-standaard is, dus dien je niet er van uit te gaan dat deze beschikbaar is.</p> +<p>Merk op dat het zetten van een property op <code>globalStorage[location.hostname]</code> deze <strong>niet</strong> zet op <code>localStorage</code> en dat het uitbreiden van <code>Storage.prototype</code> geen effect heeft op <code>globalStorage</code> items, alleen het uitbreiden van <code>StorageObsolete.prototype</code> werkt.</p> +<h3 id="globalStorage"><code>globalStorage</code></h3> +<div> + {{ Non-standard_header }}{{ obsolete_header("13.0") }}</div> +<p><code>globalStorage </code>is verouderd sinds Gecko 1.9.1 (Firefox 3.5) en niet meer ondersteund sinds Gecko 13 (Firefox 13). Gebruik <code>{{ Anch("localStorage") }} </code>ter vervanging. Deze voorgestelde specificatie is verwijderd van de HTML5 specificatie ten gunste van <code>{{ Anch("localStorage") }}</code>, wat geimplementeerd is in Firefox 3.5. Dit is een globaal object (<code>globalStorage</code>) dat meerdere prive opslag ruimtes bijhoud die gebruikt kunnen worden om data over een langere periode op te slaan (bijv. gedurende meerdere pagina en browser sessies).</p> +<div class="warning"> + Note: <code>globalStorage</code> is niet een <code>Storage</code> instantie, maar een <code>StorageList</code> instantie dat <code>StorageObsolete</code> instanties bevat.</div> +<pre class="eval deki-transform">// Sla data op dat alleen scripts op het mozilla.org domein kunnen aanspreken +globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?"); +</pre> +<p>Specifiek, levert het <code>globalStorage</code> object toegang tot een aantal verschillende opslag objecten waar data in kan worden opgeslagen. Bijvoorbeeld, als we een web pagina maakten dat <code>globalStorage</code> gebruikte op dit domein (developer.mozilla.org) dan hadden we de volgende opslag object tot onze beschikking:</p> +<ul> + <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - Alle web paginas in een developer.mozilla.org sub-domein kan zowel lezen als schrijven in dit opslag object.</li> +</ul> +<p><strong>Voorbeelden:</strong></p> +<p>Elk van deze voorbeelden vereist dat je een script stopt (met de volgende code) in elke pagina waar je het resultaat wilt zien.</p> +<p>Onthoud een gebruikers gebruikersnaam voor het specifieke sub-domein dat wordt bezocht:</p> +<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John"); +</pre> +<p>Houd bij hoe vaak een gebruiker een pagina bezoekt op je domein:</p> +<pre class="eval deki-transform"> // parseInt moet gebruikt worden omdat alle dat als string wordt opgeslagen + globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1); +</pre> +<h2 id="Opslag_locatie_en_weggooien_van_de_data">Opslag locatie en weggooien van de data</h2> +<p>In Firefox de DOM storage data wordt opgeslagen in het <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite bestand</a> in de profiel folder (er is ook een chromeappsstore.sqlite bestand dat gebruikt wordt om de browsers eigen data op te slaan, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">met name voor de start pagina - about:home</a>, maar mogelijk ook voor andere interne pagina met "about:" URLs).</p> +<ul> + <li>DOM Storage kan verwijderd worden via "Tools -> Clear Recent History -> Cookies" als de tijd bereik "Everyting" is (via nsICookieManager::removeAll) + <ul> + <li>Maar niet wanneer een andere tijd bereik is gespecificeerd: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li> + <li>Verschijnt niet in Tools -> Options -> Privacy -> Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li> + </ul> + </li> + <li>DOM Storage wordt <strong>niet</strong> verwijderd via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.</li> + <li>Verschijnt niet in de "Tools -> Options -> Advanced -> Network -> Offline data" lijst, tenzij de site ook de offline cache gebruikt. Als de site wel verschijnt in de lijst, dan wordt de DOM storage data verwijderd samen met de <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline resources in Firefox">offline cache</a> als er op de Verwijder knop wordt gedrukt.</li> +</ul> +<p>Zie ook <a href="/en-US/docs/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p> +<h2 id="Meer_informatie">Meer informatie</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> + <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> +</ul> +<h2 id="Voorbeelden">Voorbeelden</h2> +<ul> + <li><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - hands-on tutorial die beschrijft hoe de Web Storage API te gebruiken door een simpele adresboek applicatie te maken</li> + <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - laat een offline app demo zien en legt uit hoe het werkt.</li> + <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Notitie applicatie dat alle data lokaal opslaat.</li> + <li><a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - Een gedeelde localStorage object interface dat door elke website kan worden aangesproken en werkt in Firefox 3+, Webkit 3.1.2+ nightlies, en IE8. Zie het als een pseudo-globalStorage[""] maar met schrijf toegang beschermd door gebruikers bevestiging.</li> + <li><a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML5 localStorage example</a>. Simpel en eenvoudig te begrijpen voorbeeld van localStorage. Slaat- en haalt teksten op en toont een lijst van opgeslagen items. Getest in Firefox 3 en hoger.</li> + <li><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a>. Een zeer simpel voorbeeld van sessionStorage. Bevat ook een voorbeeld van localStorage. Getest in Firefox 3.6 of hoger.</li> + <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li> + <li><a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li> +</ul> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>globalStorage</td> + <td>{{ CompatNo }}</td> + <td>2-13</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>iOS 3.2</td> + </tr> + </tbody> + </table> +</div> +<p>All browsers have varying capacity levels for both local- and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> +<div class="note"> + <p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p> +</div> +<h2 id="Related">Related</h2> +<ul> + <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en-US/docs/DOM/document.cookie" title="DOM/document.cookie">document.cookie</a></code>)</li> + <li><a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">Flash Local Storage</a></li> + <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li> + <li><a href="/en-US/docs/DOM/event/StorageEvent" title="DOM/Event/StorageEvent">StorageEvent</a></li> + <li><a href="/en-US/docs/DOM/Storage/Implementation" title="/en-US/docs/DOM/Storage/Implementation">Implementation Details</a></li> +</ul> +<div> + {{ HTML5ArticleTOC }}</div> diff --git a/files/nl/web/api/web_workers_api/using_web_workers/index.html b/files/nl/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..cd5c32adaa --- /dev/null +++ b/files/nl/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,28 @@ +--- +title: Gebruik DOM workers +slug: Gebruik_maken_van_DOM_workers +tags: + - HeeftTaalgebruikHerzieningNodig +translation_of: Web/API/Web_Workers_API/Using_web_workers +--- +<p>{{ fx_minversion_header(3.1) }}</p> +<p>{{ draft() }}</p> +<div class="warning"> + <strong>Let op:</strong> De specificaties voor de DOM workers zijn nog niet volledig.</div> +<p>DOM workers maken het mogelijk voor web content om scripts in achtergrond threads uit te voeren. Zodra een worker aangemaakt is kan deze thread berichten sturen door middel van een event handler, die gespecificeerd is door de maker.</p> +<p>Een worker thread kan opdrachten uitvoeren zonder de gebruikers interface te storen.</p> +<div class="note"> + <strong>Notitie:</strong> Zoals altijd, background threads — inclusief workers — kunnen geen invloed uit oefenen op de DOM. Als er acties uitgevoerd moeten worden vanuit de background thread, moeten dezen eerst terug gestuurd worden naar de oorsprongkelijke maker (main thread).</div> +<h2 id="Het_maken_van_een_worker">Het maken van een worker</h2> +<p>Het maken van een nieuwe worker is simpel. Alles wat je hoeft te doen is de <code>Worker()</code> constructor op te roepen, opgeven van het script dat uitgevoerd moet worden in de background thread. Als je wenst notificaties te ontvangen van de worker, kun je de worker's <code>onmessage</code> property wijzigen naar een event handler functie.</p> +<pre class="brush: js">var myWorker = new Worker('my_worker.js'); +myWorker.onmessage = function(event) { + print("Called back by the worker!\n"); +};</pre> +<p>Regel 1 in dit voorbeeld maakt en start het uitvoeren van een worker thread. Regel 2 zet de <code>onmessage</code> handler voor de worker naar een functie, dat opgeroepen kan worden als de worker zijn eigen <code>postMessage()</code> functie oproept.</p> +<h2 id="Zie_ook">Zie ook</h2> +<ul> + <li><code><a class="internal" href="/Nl/DOM/Worker" title="Nl/DOM/Worker">Worker</a></code></li> + <li><code><a class="internal" href="/Nl/DOM/SharedWorker" title="Nl/DOM/SharedWorker">SharedWorker</a></code></li> + <li><code><a class="internal" href="/En/Using_DOM_workers" title="En/Using DOM workers">Using_DOM_workers (Engelstalig)</a></code></li> +</ul> diff --git a/files/nl/web/css/css_colors/index.html b/files/nl/web/css/css_color/index.html index 93bc7ca016..93bc7ca016 100644 --- a/files/nl/web/css/css_colors/index.html +++ b/files/nl/web/css/css_color/index.html diff --git a/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html b/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index 2256b38632..2256b38632 100644 --- a/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html +++ b/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html diff --git a/files/nl/web/css/voor_beginners/index.html b/files/nl/web/css/voor_beginners/index.html deleted file mode 100644 index e2b167686e..0000000000 --- a/files/nl/web/css/voor_beginners/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Voor Beginners -slug: Web/CSS/Voor_Beginners -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -<p> -</p> -<h3 id="Introductie" name="Introductie"> Introductie </h3> -<p>Deze cursus is een introductie op <b>Cascading Style Sheets</b> (<b>CSS</b>). Het begeleid je door de basis eigenschappen van CSS met praktische voorbeelden die je zelf kan proberen op je eigen computer. Het is opgedeeld in twee delen. -</p> -<ul><li> Deel I illustreert de standaardeigenschappen van CSS, die werken in Mozilla browsers en ook in de meeste andere moderne browsers. -</li></ul> -<ul><li> Deel II bevat een aantal voorbeelden van speciale functies die werken in Mozilla, maar die niet noodzakelijk werken in andere omstandigheden. -</li></ul> -<p>Deze cursus is gebaseerd op de <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specificatie</a>. -</p> -<h4 id="Wie_zou_deze_cursus_moeten_gebruiken.3F" name="Wie_zou_deze_cursus_moeten_gebruiken.3F"> Wie zou deze cursus moeten gebruiken? </h4> -<p>Deze cursus is grotendeels voor beginners, maar je kan het ook gebruiken als je al wat ervaring hebt met CSS. -</p><p>Als je een beginner bent met CSS, gebruik dan Deel I van deze cursus om te begrijpen wat CSS is en hoe je het moet gebruiken. Gebruik vervolgens Deel II om te leren hoe je CSS gebruikt in Mozilla. -</p><p>Als je al wat CSS kent, kan je de delen van de cursus overslaan die je al kent, en alleen de delen lezen die je interesseren. -</p><p>Als je ervaren bent met CSS maar niet in Mozilla, kun je direct naar Deel II gaan. -</p> -<h4 id="Wat_heb_je_nodig_voordat_je_begint.3F" name="Wat_heb_je_nodig_voordat_je_begint.3F"> Wat heb je nodig voordat je begint? </h4> -<p>Om het beste uit deze cursus te halen, heb je een editor nodig voor tekstbestanden en een Mozilla browser (Firefox of Mozilla Suite). Je moet ook weten hoe je deze moet gebruiken voor basishandelingen. -</p><p>Als je geen bestanden wilt veranderen, dan kun je alleen de cursus lezen en naar de plaatjes kijken, maar dat is een minder effectieve manier om te leren. -</p><p>Voor een aantal delen van deze cursus kan andere Mozilla software nodig zijn. Als je geen andere Mozilla software wil downloaden hoef je deze delen niet te volgen. -</p><p><strong>Let op:</strong> CSS zorgt voor een manier om met kleur te werken, dus delen van deze cursus hebben kleuren nodig. Je kunt deze delen van de cursus alleen makkelijk gebruiken als je een kleurenscherm en normaal kleurenzicht hebt. -</p> -<h4 id="Hoe_je_deze_cursus_moet_gebruiken" name="Hoe_je_deze_cursus_moet_gebruiken"> Hoe je deze cursus moet gebruiken </h4> -<p>Om deze cursus goed te gebruiken moet je de pagina's aandachtig en in volgorde lezen. Als je een pagina overslaat kan het moeilijk zijn latere pagina's te begrijpen. -</p><p>Gebruik de <i>Informatie</i> sectie op elke pagina om te begrijpen hoe CSS werkt. Gebruik de <i>Actie</i> sectie om CSS te proberen op je eigen computer. -</p><p>Om je begrip te testen, gebruik de uitdaging aan het einde van elke pagina. Uitkomsten voor sommige van deze uitdagingen worden op latere pagina's in de cursus bekend gemaakt. -</p><p>Om dieper in te gaan op CSS, lees de informatie die je kunt vinden in de kaders benoemd "<i>Meer details</i>". Gebruik de links daar om referentiemateriaal te vinden over CSS. -</p> -<h3 id="Cursus_Deel_I" name="Cursus_Deel_I"> Cursus Deel I </h3> -<p>Een basis stap-voor-stap gids. -</p> -<ol><li><b><a href="nl/CSS/Voor_Beginners/Wat_is_CSS">Wat is CSS?</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Waarom_CSS_Gebruiken">Waarom CSS Gebruiken?</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Hoe_CSS_Werkt">Hoe CSS Werkt</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/'Cascading'_en_nalatenschap">'Cascading' en nalatenschap</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Selectors">Selectors</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Leesbaar_CSS">Leesbaar CSS</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Text_Stijlen">Text Stijlen</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Kleur">Kleur</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Inhoud">Inhoud</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Lijsten">Lijsten</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Kaders">Kaders</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Layout">Layout</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Tabellen">Tabellen</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Media">Media</a></b> -</li></ol> -<h3 id="Cursus_Deel_II" name="Cursus_Deel_II"> Cursus Deel II </h3> -<p>Voorbeelden die CSS in Mozilla laten zien. -</p> -<ol><li><b><a href="nl/CSS/Voor_Beginners/JavaScript">JavaScript</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/XBL_Bindingen">XBL Bindingen</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/CSS_en_XUL">CSS en XUL</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/CSS_en_SVG">CSS en SVG</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/XML_data">XML data</a></b> -</li></ol> -{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar" } ) }} diff --git a/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html b/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html deleted file mode 100644 index 86c1b3aa4b..0000000000 --- a/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: HTML5 audio en video gebruiken -slug: Web/Guide/HTML/HTML5_audio_en_video_gebruiken -tags: - - Audio - - HTML5 - - Instructie - - Media - - Ogg - - Video - - mp3 - - voorbeeld -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -<p>HTML5 introduceert ingebouwde media ondersteuning via de {{ HTMLElement("audio") }} en {{ HTMLElement("video") }} elementen, waarmee het mogelijk wordt om op een eenvoudige manier media in te sluiten in HTML documenten.</p> - -<h2 id="Media_insluiten">Media insluiten</h2> - -<p>Het insluiten van media in uw HTML document stelt niet zoveel voor:</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - Uw browser ondersteunt het element <code>video</code> niet. -</video></pre> - -<p>Dit voorbeeld speelt een sample video van de Theora website inclusief controls voor het afspelen.</p> - -<p>En hier is een voorbeeld van het inbedden van een <em>audio</em> element in uw HTML document.</p> - -<pre class="brush: html"><audio src="/test/audio.ogg"> -<p>Het audio element wordt niet door uw browser ondersteund.</p> -</audio></pre> -</div> - -<p>The src attribuut bevat een URL van een geluidsbestand of een pad naar een lokaal geluidsbestand.</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> -<p>Het audio element wordt niet door uw browser ondersteund.</p> -</audio></pre> -</div> - -<p>Dit voorbeeld van de code gebruikt attributen van het {{ HTMLElement("audio") }} element:</p> - -<ul> - <li><code>controls</code> : Toont de standaard HTML5 controls ten behoeve van audio op de webpagina.</li> - <li><code>autoplay</code> : Zorgt ervoor dat het bestand automatisch afspeelt.</li> - <li><code>loop</code> : Zorgt ervoor dat het bestand herhaalt wordt.</li> -</ul> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> -</div> - -<p>Het <em>preload</em> attribuut wordt gebruikt in een audio element om grote bestanden te bufferen. U kunt hierbij 3 waarden gebruiken:</p> - -<ul> - <li><code>"none"</code> maakt dat er geen buffering wordt gebruikt</li> - <li><code>"auto"</code> buffers het mediabestand</li> - <li><code>"metadata"</code> buffers alleen de metagegevens van het bestand</li> -</ul> - -<p>Meerdere bronbestanden kunnen vastgelegd worden met behulp van het {{ HTMLElement("source") }} element om verschillende formaten in verschillende browsers te ondersteunen voor geluid of beeld. Bijvoorbeeld:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mp4" type="video/mp4"> - Het <code>video</code> element wordt niet ondersteund door uw browser. -</video> -</pre> - -<p>In dit voorbeeld wordt het Ogg-bestand afgespeeld in browsers die Ogg ondersteunen. Als de browser dat niet doet, wordt automatisch het MPEG-4-bestand gebruikt. Kijk ook naar de lijst met <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">media formaten die ondersteund worden door de audio en video elementen</a> in de diverse browsers.</p> - -<p><span id="result_box" lang="nl"><span class="hps">U kunt</span> <span class="hps">ook opgeven welke codes</span> <span class="hps">het mediabestand</span> <span class="hps">vereist</span><span>;</span> d<span class="hps">it</span> <span class="hps">maakt het mogelijk</span> voor <span class="hps">de</span> <span class="hps">browser</span> <span class="hps">om nog </span><span class="hps">intelligente</span>re <span class="hps">beslissingen te nemen</span></span>s:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> - Het <code>video</code> element wordt niet ondersteund door uw browser. -</video></pre> - -<p>We hebben hier vastgelegd dat deze via de Dirac en Speex codes gebruikt. Als de browser wel Ogg ondersteund, maar niet deze codes dan zal de video niet laden.</p> - -<p>Wanneer het <code>type</code> attribuut niet gespecificeerd is dan wordt het mediatype van de server gehaald en er wordt gecontroleerd of de browser er mee om kan gaan; als het niet weergegeven kan worden, zal de volgende <code>source</code> gecontroleerd worden. Wanneer niet een van de <code>source</code> elementen gebruik kan worden, wordt een <code>error</code> gebeurtenis naar het <code>video</code> element verzonden. Wanneer het <code>type</code> attribuut vastgelegd is, wordt deze vergeleken met de types die de browser kan afspelen en wanneer het niet herkend wordt, zal direct volgende <code>source</code> gecontroleerd worden. Er wordt dan dus niets via de server opgehaald of gecontroleerd.</p> - -<p>Bekijk ook <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">Media gebeurtenissen</a> voor een complete lijst van gebeurtenissen die die aan het afspelen van media gekoppeld kunnen worden. Voor details van media formaten die ondersteund worden door de diverse browsers bekijk <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formaten die ondersteund worden door de audio en video elementen</a>.</p> - -<h2 id="Het_afspelen_van_media">Het afspelen van media</h2> - -<p>Als je eenmaal de media hebt ingebed in het HTML document met de nieuwe elementen kun je ze programma-technisch gaan besturen met JavaScript code. Een voorbeeld: om het afspelen te starten of the herstarten, kun je het volgende doen:</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>De eerste regel haalt het eerste video-element van het document op en de tweede regel roept de <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> methode, zoals deze gedefinieerd is in de {{ interface("nsIDOMHTMLMediaElement") }} interface die gebruikt wordt om media-element te implementeren.</p> - -<p>Het besturen van een HTML5 audio element om af te spelen, te pauzeren, het volume te verhogen of te verlagen met gebruik van Javascript is eenvoudig.</p> - -<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> -<div> - <button onclick="document.getElementById('demo').play()">Audio afspelen</button> - <button onclick="document.getElementById('demo').pause()">Audio pauzeren</button> - <button onclick="document.getElementById('demo').volume+=0.1">Volume verhogen</button> - <button onclick="document.getElementById('demo').volume-=0.1">Volume verlagen</button> -</div> -</pre> - -<h2 id="Het_downloaden_van_media_stoppen">Het downloaden van media stoppen</h2> - -<p>Het afspelen stoppen van media is zo eenvoudig als het aanroepen van de de pause() methode, maar de browser zal blijven downloaden totdat het media-element wordt afgevoerd door de garbage collector.</p> - -<p>Bij deze de truck om het downloaden direct te stoppen:</p> - -<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); -mediaElement.pause(); -mediaElement.src=''; -//or -mediaElement.<code>removeAttribute("src");</code> -</pre> - -<p>Door het <code>src</code> attribuut van het media-element te verwijderen (of deze met een lege string te vullen, dat kan van de browser afhangen) wordt de interne decoder van het element gesloopt en dat zal het downloaden doen stoppen. The specificaties zijn echter nog tamelijk onduidelijk wat betreft het removeAttribute() scenario en het leegmaken (lege string) van het <video> 'src' attribuut kan een ongewenst verzoek veroorzaken (Mozilla Firefox 22).</p> - -<h2 id="Het_doorzoeken_van_media">Het doorzoeken van media</h2> - -<p>Media elementen voorzien in ondersteuning van het wijzigen van de afspeelpositie naar specifieke punten in de inhoud van de media. Dit wordt gedaan via het invullen van de eigenschap <code>currentTime</code> op het element; zie hiervoor {{ domxref("HTMLMediaElement") }} voor meer details over de eigenschappen van een media-element. Zet eenvoudig de waarde op de tijd, in seconden, van de positie waarop het afspelen moet doorgaan.</p> - -<p>U gebruikt de eigenschap <code>seekable</code> om het gebied dat beschikbaar is te doorzoeken. De eigenschap retourneert een {{ domxref("TimeRanges") }} object waarbinnen een lijst bestaat met de tijden waarop gezocht kan worden.</p> - -<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); -mediaElement.seekable.start(); // Retourneert de starttijd (in seconden) -mediaElement.seekable.end(); // Retourneert de einddtijd (in seconden) -mediaElement.currentTime = 122; // Ga naar 122 seconden -mediaElement.played.end(); // Retourneert het aantal seconden dat de browser heeft afgespeeld -</pre> - -<h2 id="Leg_het_afspeelgebied_vast">Leg het afspeelgebied vast</h2> - -<p><span id="result_box" lang="nl"><span class="hps">Bij het opgeven van</span> <span class="hps">de URI</span> <span class="hps">van de</span> <span class="hps">media voor</span> <span class="hps">een</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>audio"</span><span>)}</span><span>} of</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>video"</span><span>)</span><span>}</span><span>}</span> <span class="hps">element</span> <span class="hps">kunt</span> <span class="hps">u</span> <span class="hps">desgewenst</span> <span class="hps">aanvullende informatie</span> <span class="hps">geven</span> voor <span class="hps">het deel van de</span> <span class="hps">media</span> <span class="hps">dat afgespeeld moet worden</span><span>.</span> <span class="hps">Om dit te doen</span><span>, voeg</span> <span class="hps">een</span> <span class="hps">hekje</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>#</span><span>"</span><span>), gevolgd</span> <span class="hps">door de media</span> <span class="hps">fragment</span> <span class="hps">beschrijving</span><span>.</span><br> - <br> - <span class="hps">Een tijd</span>sgebied wordt <span class="hps">opgegeven</span> <span class="hps">met de syntaxis</span></span>:</p> - -<pre>#t=[starttime][,endtime]</pre> - -<p><span id="result_box" lang="nl"><span class="hps">De</span> <span class="hps">tijd kan worden</span> <span class="hps">opgegeven als een</span> <span class="hps">aantal seconden</span> <span class="hps atn">(</span><span>als een</span> <span class="hps">floating-point</span> <span class="hps">waarde) of</span> <span class="hps">als een</span> <span class="hps">uren</span> <span class="hps">/</span> <span class="hps">minuten</span> <span class="hps">/</span> <span class="hps">seconden</span> <span class="hps">tijd</span> <span class="hps">gescheiden</span> <span class="hps">met</span> <span class="hps">dubbele punten</span> <span class="hps atn">(</span><span>zoals</span> <span class="hps">02:05:01</span> <span class="hps">2 uur</span><span>,</span> <span class="hps">5</span> <span class="hps">minuten en</span> <span class="hps">1</span> <span class="hps">seconde)</span><span>.</span></span></p> - -<p>Een paar voorbeelden:</p> - -<dl> - <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt> - <dd>Laat de video afspelen te beginnen bij 10 seconden en ga door tot en met de 20 seconden.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt> - <dd>Speel de video af vanaf het begin tot en met 10,5 seconden.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt> - <dd>Speel de video af vanaf het begin en voor de duur van 2 uur.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=60</span></dt> - <dd>Speel de video af vanaf de 60ste seconden en speel tot het einde.</dd> -</dl> - -<div class="note"> -<p>The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.</p> -</div> - -<h2 id="Uitwijkmogelijkheden">Uitwijkmogelijkheden</h2> - -<p><span id="result_box" lang="nl"><span class="hps">HTML</span> <span class="hps">opgenomen</span> <span class="hps">tussen</span> <span class="hps">bijvoorbeeld</span> <span class="hps">de openings- en de sluit</span><span class="hps">tags van</span> <span class="hps">media-elementen</span> <span class="hps">wordt verwerkt</span> <span class="hps">door browsers</span> <span class="hps">die geen ondersteuning hebben voor</span> <span class="hps">HTML5</span> <span class="hps">media</span><span>.</span> <span class="hps">U kunt profiteren</span> <span class="hps">van dit feit</span> <span class="hps">om alternatieve</span> <span class="hps">fallback</span> <span class="hps">media</span> <span class="hps">te bieden</span> <span class="hps">voor die</span> <span class="hps">browsers</span><span>.</span><br> - <br> - <span class="hps">Dit gedeelte bevat</span> <span class="hps">twee mogelijke</span> <span class="hps">fallback</span> <span class="hps">opties</span> <span class="hps">voor video</span>. Voor<span class="hps"> elk</span> <span class="hps">geval</span><span>,</span> als <span class="hps">de</span> <span class="hps">browser HTML5</span> <span class="hps">video</span></span><span lang="nl"> <span class="hps">ondersteunt</span><span>,</span> dan wordt die <span class="hps">gebruikt</span><span>;</span> <span class="hps">in alle andere gevallen wordt </span><span class="hps">de optie</span> <span class="hps">fallback</span> <span class="hps">gebruikt</span><span>.</span></span></p> - -<h3 id="Het_gebruik_van_Flash">Het gebruik van Flash</h3> - -<p><span id="result_box" lang="nl"><span class="hps">U kunt</span> <span class="hps">Flash</span> <span class="hps">gebruiken om een</span> <span class="hps">Flash-formaat</span> <span class="hps">film af te spelen</span> <span class="hps">als de</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>video"</span><span>)</span><span>}</span><span>}</span> <span class="hps">element</span> <span class="hps">niet wordt ondersteund</span><span>:</span></span></p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video></pre> - -<p><span id="result_box" lang="nl"><span class="hps">NB: gebruik geen</span> </span><code>classid</code><span lang="nl"> <span class="hps">in het object</span><span>-tag</span> <span class="hps">om</span> <span class="hps">compatibel te zijn/blijven met andere</span> <span class="hps">browsers dan Internet Explorer</span></span>.</p> - -<h3 id="Ogg_videos_afspelen_met_gebruik_van_een_Java_applet">Ogg videos afspelen met gebruik van een Java applet</h3> - -<p>Er is een Java applet<a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> die je kunt gebruiken las uitwijkmogelijkheid voor het afspelen van Ogg videos in browsers die Java ondersteunen, maar dat niet doen voor HTML5 video:</p> - -<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> - <object type="application/x-java-applet" width="320" height="240"> - <param name="archive" value="cortado.jar"> - <param name="code" value="com.fluendo.player.Cortado.class"> - <param name="url" value="my_ogg_video.ogg"> - <p>You need to install Java to play this file.</p> - </object> -</video></pre> - -<p><span id="result_box" lang="nl"><span class="hps">Als u geen</span><span class="hps"> alternatief</span> <span class="hps">kind</span>-<span class="hps">element</span> creëert <span class="hps">van</span> het <span class="hps">cortado</span> <span class="hps">object</span> <span class="hps">element, zoals</span> het <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps">"p"</span><span>)</span><span>}</span><span>}</span> <span class="hps">element</span> <span class="hps">hierboven</span><span>, dan zullen</span> <span class="hps">FireFox</span> <span class="hps">3.5</span> <span class="hps">installaties die</span> <span class="hps">de video</span> <span class="hps">native</span> <span class="hps">behandelen, maar</span> <span class="hps">geen</span> <span class="hps">Java</span> <span class="hps">geïnstalleerd</span> hebben ten <span class="hps">onrechte</span> <span class="hps">de</span> <span class="hps">gebruiker informeren</span> <span class="hps">dat ze een </span><span class="hps">plugin</span> <span class="hps">moeten installeren om</span> <span class="hps">de inhoud</span> <span class="hps">op</span> <span class="hps">de</span> <span class="hps">pagina te bekijken</span><span>.</span></span></p> - -<p>{{ h1_gecko_minversion("Foutafhandeling", "2.0") }}</p> - -<p>Met ingang van Gecko 2.0 is de foutafhandeling is herzien om te voldoen aan de meest recente versie van de HTML5 specificaties. De <code>error</code> gebeurtenis wordt nu naar afgeleverd bij het kind-element dat behoort bij de bron die de fout laat ontstaan in plaats van bij het media-element zelf.</p> - -<p>Dit zorgt er voor dat u kunt bepalen welke bron niet geladen werd, dit kan nuttig zijn. Bekijk deze HTML maar eens:</p> - -<pre class="brush: html"><video> -<source id="mp4_src" - src="video.mp4" - type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> -</source> -<source id="3gp_src" - src="video.3gp" - type='video/3gpp; codecs="mp4v.20.8, samr"'> -</source> -<source id="ogg_src" - src="video.ogv" - type='video/ogg; codecs="theora, vorbis"'> -</source> -</video></pre> - -<p>Omdat Firefox MP4 en 3GP niet ondersteunt vanwege principe van patentbezwaren zullen {{ HTMLElement("source") }} elementen met de ID's "mp4_src" en "3gp_src" in een <code>error</code> gebeurtenis lopen voordat de Ogg bron geladen wordt. De bronnen worden uitgevoerd in de volgorde waarin ze staan en wanneer er eenmaal een succesvol geladen is dan worden de overige bronnen helemaal niet meer geraadpleegd.</p> - -<h3 id="Detecteren_of_er_geen_bronnen_zijn_geladen">Detecteren of er geen bronnen zijn geladen</h3> - -<p>Om vast te stellen dat niet een {{ HTMLElement("source") }} kindelement is geladen kunt u de waarde van het attribuut <code>networkState</code> van het media-element controleren, Wanneer de waarde <code>HTMLMediaElement.NETWORK_NO_SOURCE</code> is dan weet u dat geen van de bronnen geladen is.</p> - -<p>Op dat punt gekomen kunt u een andere bron invoegen met behulp van een nieuw {{ HTMLElement("source") }} element als child van het media element en Gecko zal een poging doen om die bron te laden.</p> - -<h3 id="Inhoud_tonen_wanneer_geen_bron_gedecodeerd_kon_worden">Inhoud tonen wanneer geen bron gedecodeerd kon worden</h3> - -<p><span id="result_box" lang="nl"><span class="hps">Een andere manier om</span> <span class="hps">de</span> <span class="hps">fallback</span> <span class="hps">inhoud</span> van <span class="hps">een video te tonen</span> <span class="hps">als geen van</span> <span class="hps">de</span> <span class="hps">bronnen</span> <span class="hps">kan</span> <span class="hps">worden</span> <span class="hps">gedecodeerd</span> <span class="hps">in</span> <span class="hps">de</span> <span class="hps">huidige</span> <span class="hps">browser</span><span>'s is het</span> <span class="hps">toevoegen</span>van foutafhandeling in <span class="hps">het</span> <span class="hps">laatste</span> <span class="hps">bronelement</span><span>.</span> <span class="hps">Dan kunt u de</span> <span class="hps">video</span> <span class="hps">vervangen</span> <span class="hps">met zijn</span> <span class="hps">fallback</span> <span class="hps">inhoud</span></span>:</p> - -<pre class="brush: html"><video controls> - <source src="dynamicsearch.mp4" type="video/mp4"></source> - <a href="dynamicsearch.mp4"> - <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> - </a> - <p><span id="result_box" lang="nl"><span class="hps">Klik op de afbeelding</span> <span class="hps">om een video</span> <span class="hps">demo van</span> een <span class="hps">dynamische</span> <span class="hps">app</span> <span class="hps">zoekopdracht</span> af te <span class="hps">spelen</span></span></p> -</video> - -</pre> - -<pre class="brush: js">var v = document.querySelector('video'), - sources = v.querySelectorAll('source'), - lastsource = sources[sources.length-1]; -lastsource.addEventListener('error', function(ev) { - var d = document.createElement('div'); - d.innerHTML = v.innerHTML; - v.parentNode.replaceChild(d, v); -}, false); -</pre> - -<h2 id="Bekijk_ook">Bekijk ook</h2> - -<ul> - <li>De HTML elementen voor media: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> - <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Het manipuleren van video met beulp van canvas</a></li> - <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="Introducing the Audio API Extension">Introductie van de Audio API Extension</a></li> - <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> - <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats die ondersteuend worden door de audio en video elementen</a></li> - <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> - <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li> - <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, een JavaScript bibliotheek (mwEmbed) die een naadloze uitwijkmogelijkheid ondersteund voor HTML5, VLC Player, Java Cortado en OMTK Flash Vorbis player (wordt gebruikt door Wikimedia).</li> - <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, een Flash bibliotheek die een Vorbis decoder implementeert</li> - <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, een JavaScript wrapper voor audio- and video-tags met flash fallback, open source, GPL</li> - <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, een audio/video playback oplossing in Java die wordt onderhouden door Xiph.org</li> - <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, een open source HTML5 video player en framework.</li> - <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework met een aangepaste Flash shim API die HTML5 media nabootst tbv oudere browsers.</li> - <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li> - <li><a href="/en-US/docs/DASH_Adaptive_Streaming" title="/en-US/docs/DASH_Adaptive_Streaming">DASH - Dynamic Adaptive Streaming over HTTP</a> - tbv HTML5 video</li> - <li><a href="http://jPlayer.org">jPlayer</a> een open source audio en video libray voor jQuery enZepto</li> -</ul> diff --git a/files/nl/web/javascript/aan_de_slag/index.html b/files/nl/web/javascript/aan_de_slag/index.html deleted file mode 100644 index 35b2bd97f9..0000000000 --- a/files/nl/web/javascript/aan_de_slag/index.html +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: Aan de slag (Handleiding Javascript) -slug: Web/JavaScript/Aan_de_slag -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Waarom JavaScript?</h2> -<p>JavaScript is een krachtige, ingewikkelde, en vaak misbegrepen programmeertaal. Het maakt het mogelijk om snel programma's te ontwikkelen waarin gebruikers direct informatie kunnen invullen en het resultaat kunnen zien.</p> -<p>Het voornamelijke voordeel van JavaScript, ook wel bekend als ECMAScript, is dat het rond de Web browser draait en daardoor de mogelijkheid heeft om dezelfde resultaten te produceren op alle platformen die door de browser ondersteund worden. De voorbeelden op deze pagina, net als Google Maps, draait op Linux, Windows, en Mac OS. Met de recente groei van vele JavaScript bibliotheken is het nu nog makkelijker om door een document te navigeren, DOM elementen te selecteren, animaties te maken, gebeurtenissen af te handelen en Ajax applicaties te ontwikkelen. In tegenstelling tot de hype rondom andere technologieën die private interesses hebben is Javascript eigenlijk de enige client-side taal die op meerde platformen draait en tegelijkertijd gratis is en universeel geaccepteerd.</p> -<h2 id="What_you_should_already_know" name="What_you_should_already_know">Wat je al zou moeten weten</h2> -<p>JavaScript is een taal waar je makkelijk mee kunt beginnen. Alles wat je nodig hebt is een tekstverwerker en een Web browser.</p> -<p>Er zijn vele andere technologieën die geïntegreerd kunnen worden met JavaScript, dit valt echter buiten het bestek van dit document. Verwacht niet dat je direct een enorme applicatie als Google Maps kunt maken op jouw eerste dag!</p> -<h2 id="Getting_Started" name="Getting_Started">Aan de slag</h2> -<p>Beginnen met JavaScript is erg makkelijk. Je hoeft geen ingewikkelde ontwikkelprogramma's geïnstalleerd te hebben. Je hoeft niet te weten hoe je een shell moet gebruiken, hoe je Make programmeert of hoe je een compiler moet gebruiken. JavaScript wordt geïnterpreteerd door jour Web browser. Alles wat je moet doen is een programma als tekstbestand opslaan en het openen in jouw Web browser. Dat is alles!</p> -<p>JavaScript is een uitstekende programmeertaal voor beginners. Het maakt het mogelijk om direct resultaten te tonen aan de nieuwe leerling en leert hen over hulpmiddelen die zij waarschijnlijk nuttig vinden in het dagelijks leven. Dit staat in contrast met talen als C, C++ en Java die eigenlijk alleen nuttig zijn voor toegewijde software ontwikkelaars.</p> -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Browser compatibiliteitsproblemen</h2> -<p>Er zijn variaties in de beschikbare functionaliteit in verschillende browsers. Mozilla Firefox, Microsoft Internet Explorer (MSIE of kortweg IE), Apple Safari en Opera verschillen in gedrag. We zijn van plan om <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">deze afwijkingen te documenteren</a>. Deze problemen kun je verminderen door het gebruik van de verschijnende cross-platform JavaScript APIs. Deze APIs bieden veelgebruikte functionaliteit en verbergen de afwijkingen voor jou.</p> -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">Het proberen van voorbeelden</h2> -<p>De onderstaande voorbeelden bevatten wat codes. Er zijn vele manieren om deze uit te proberen. Als je al een eigen website hebt, dan kun je deze als nieuwe webpagina's opslaan op jouw website.</p> -<p>Als je nog geen eigen website hebt, dan kun je deze voorbeelden opslaan als bestanden op de computer, en deze openen in jouw huidige Web browser. Hierdoor is JavaScript ook zo'n gemakkelijke taal voor beginnende programmeurs. Je hebt geen compiler of ontwikkelomgeving nodig; alles wat je nodig hebt is een browser en jijzelf!</p> -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Voorbeeld: een muisklik opvangen</h2> -<p>De details over het afhandelen van <em>events</em> (NL: gebeurtenissen; details zoals event typen, het registreren van verwerkers, doorgifte, enz.) zijn te uitgebreid om in dit simpele voorbeeld te behandelen. Echter, dit voorbeeld kan niet het vangen van een muisklik demonstreren zonder een beetje in te gaan op het gebeurtenissens systeem van JavaScript. Houd echter in het achterhoofd dat dit voorbeeld de volledige details over JavaScript gebeurtenissen weglaat. Als je meer te weten wilt komen naast de beginselen die hier worden beschreven, lees meer over het gebeurtenissen systeem van JavaScript.</p> -<p>'Muis' gebeurtenissen zijn een deelverzameling van alle gebeurtenissen die een browser genereert als reactie op acties van de gebruiker. De volgende gebeurtenissen kunnen afgegeven worden als reactie op een muis actie:</p> -<ul> - <li>Click - wanneer de gebruiker met de muis klikt.</li> - <li>DblClick - wanneer de gebruiker dubbel klikt met de muis.</li> - <li>MouseDown - wanneer de gebruiker een muisknop indrukt (de eerste helft van een klik).</li> - <li>MouseUp - wanneer de gebruiker een muisknop loslaat (de tweede helf van een klik).</li> - <li>MouseOut - wanneer de muiscursor de grafische grenzen van een object verlaat.</li> - <li>MouseOver - wanneer de muiscursor de grafische grenzen van een object betreedt.</li> - <li>MouseMove - wanneer de muiscursor beweegt terwijl deze zich binnen de grafische grenzen van een object bevindt.</li> - <li>ContextMenu - wanneer de gebruiker klikt met de rechtermuisknop.</li> -</ul> -<p>Merk op dat <em>inline event handlers</em> (ingesloten gebeurtenissenverwerkers, oftewel datgene dat toegevoegd is als attribuut voor een HTML element) normaliter met kleine letters geschreven zijn en dat deze in een script <em>altijd</em> met kleine letters geschreven moeten zijn.</p> -<p>De meest simpele methode om deze gebeurtenissen af te vangen (in HTML), het registreren van <em>event handlers</em> is door individuele gebeurtenissen als attributen op te geven voor het element. Voorbeeld:</p> -<pre class="brush:js"> <span onclick="alert('Hallo Wereld!');">Klik Hier</span></pre> -<p>De JavaScript code die je wilt uitvoeren kan ingesloten worden als attribuut waarde, of je kunt deze aanroepen als een functie. Deze functie zou dan eerder geregistreerd moeten zijn in een <script> blok op de HTML pagina:</p> -<pre class="brush:js"><script> - function clickHandler() { - alert("Hallo, Wereld!"); - } -</script> -<span onclick="clickHandler();">Klik Hier</span></pre> -<p>Daarnaast is een gebeurtenisobject beschikbaar waarmee de ontwikkelaar toegang kan verkrijgen tot details van de gebeurtenis, zoals het element dat de gebeurtenis heeft ontvangen, het type van de gebeurtenis en welke muisknop werd ingedrukt. Uitbreidend op het eerdere voorbeeld:</p> -<pre class="brush:js"><script> - function clickHandler(event) { - var eType = event.type; - /* het volgende stuk is voor compatibiliteit met oude IE versies */ - /* Standaardbrowsers stellen de 'target' eigenschap in van het 'event' object */ - /* IE 8 en ouder gebruikt de 'srcElement' eigenschap */ - var eTarget = event.target || event.srcElement; - - alert( "Opgevangen Gebeurtenis (type=" + eType + ", doel=" + eTarget ); - } -</script> -<span onclick="clickHandler(event);">Klik Hier</span></pre> -<p>Naast het registreren voor het ontvangen van gebeurtenissen in jouw HTML code kun je dezelfde attributen voor elke HTMLElement object instellen in de JavaScript code. Het onderstaande voorbeeld creërt een zogenaamde 'span' object, voegt deze toe aan de pagina en registreert tenslotte functies voor het 'span' object waarmee enkele muisgebeurtenissen kunnen worden ontvangen.</p> -<pre class="brush:js"><body></body> -<script> - function mouseeventHandler(event) { - /* het volgende stuk is voor compatibiliteit met oude IE versies */ - /* IE geeft standaard NIET het event object door. */ - /* Verkrijg eeb referentie tot de event als het niet gegeven was */ - if (!event) event = window.event; - - /* verkrijg de gebeurtenis type en doel zoals eerder beschreven */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType + ' gebeurtenis op element met ID: ' + eTarget.id); - } - - function onloadHandler() { - /* verkrijg een referentie naar de 'body' element op de pagina */ - var body = document.body; - /* maak een 'span' element aan die aangeklikt moet worden */ - var span = document.createElement('span'); - span.id = 'VoorbeeldSpan'; - span.appendChild(document.createTextNode('Klik Hier!')); - - /* registreer enkele functies op het span object om gebeurtenissen - af te handelen. Merk op dat de namen van de events (on...) per se - kleingeschreven moeten zijn terwijl de handlers elke naam kunnen - aannemen. - */ - span.onmousedown = mouseeventHandler; - span.onmouseup = mouseeventHandler; - span.onmouseover = mouseeventHandler; - span.onmouseout = mouseeventHandler; - - /* weergeef de span element op de pagina */ - body.appendChild(span); -} - -// doordat we de handler vervangen, en niet aanroepen, hebben we GEEN '()' nodig -// na de functie naam. -window.onload = onloadHandler; -</script></pre> -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Voorbeeld: een toetsenbord gebeurtenis opvangen</h2> -<p>Het vangen van een toetsenbordgebeurtenis is vergelijkbaar met het bovenstaande "opvangen van een muisklik" voorbeeld, en maakt gebruik van het gebeurtenissen systeem in JavaScript. Toetsenbord gebeurtenissen worden afgevuurd wanneer een toets van het toetsenbord wordt gebruikt.</p> -<p>Het aantal gebeurtenissen die optreden als reactie voor een toetsenbord actie is veel kleiner vergeleken met die voor een muis:</p> -<ul> - <li>KeyPress - wanneer een toets wordt ingedrukt en losgelaten.</li> - <li>KeyDown - wanneer een toets wordt ingedrukt, maar nog niet losgelaten is.</li> - <li>KeyUp - wanneer een toets losgelaten is na het indrukken.</li> -</ul> -<p>Bij een <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> gebeurtenis is de Unicode waarde van de ingedrukte toets opgeslagen in óf de keyCode, óf de <code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> eigenschap. Als de toets een karakter genereert (bijv. 'a'), dan bevat <code>charCode</code> de code van dat teken, hierbij wordt rekening gehouden met hoofdletters (d.w.z. dat er rekening wordt gehouden of de Shift toets ingedrukt is). In andere gevallen is de code van de ingedrukte toets beschikbaar in <code>keyCode</code>.</p> -<p>De meest simpele methode om toetsenbord gebeurtenissen op te vangen is weer doot het registreren van event handlers in HTML. Hierbij wordt weer een individuele gebeurtenis opgegeven als attribuut voor het HTML element:</p> -<pre class="brush:js"> <input type="text" onkeypress="alert('Hallo Wereld!');"> -</pre> -<p>Zoals bij muis gebeurtenissen kun je zowel inline JavaScript code gebruiken in het attribuut, of een functie aanroepen die eerder in een <script> block gedefinieërd was:</p> -<pre class="brush:js"><script> - function keypressHandler() { - alert("Hallo, Wereld!"); - } -</script> - -<input onkeypress="keypressHandler();"> -</pre> -<p>Het opvangen van de gebeurtenis en het aflezen van de ingedrukte toets kan worden gedaan op een soortgelijke manier als bij muis gebeurtenissen:</p> -<pre class="brush:js"><script> - function keypressHandler(evt) { - var eType = evt.type; // Zal "keypress" bevatten als event type - /* hier zullen we weer een cross-browser methode gebruiken - Iedereen gebruikt 'which', behalve IE 8 en ouder, die gebruikt 'keyCode' - De <a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">voorwaardelijke, ternary operator</a> kan hier goed gebruikt worden */ - var keyCode = evt.which ? evt.which : evt.keyCode; - var eCode = 'keyCode is ' + keyCode; - var eChar = 'charCode is ' + <span class="typ" style="background-color: transparent; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(43, 145, 175);">String</span><span class="pun" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">.</span><span class="pln" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">fromCharCode(</span>keyCode); // of evt.charCode - alert("Opgevangen Gebeurtenis (type=" + eType + ", Unicode waarde van toets=" + eCode + ", ASCII waarde=" + eChar + ")"); - } -</script> -<input onkeypress="keypressHandler(event);"></pre> -<p>Het opvangen van alle toetsen op een pagina kan worden gedaan door het registreren van event handlers op het niveau van het document:</p> -<pre class="brush:js"><script> - document.onkeypress = keypressHandler; - document.onkeydown = keypressHandler; - document.onkeyup = keypressHandler; -</script></pre> -<p>Hier is een compleet voorbeeld dat het gebruik van toetsenborden gebeurtenissen weergeeft:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var voorbeeldToets = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; // alternatief voor ternary - als er geen keyCode is, gebruik which - var keychar = String.fromCharCode(key); - if (key == voorbeeldToets) { - metaChar = true; - } - if (key != voorbeeldToets) { - if (metaChar) { - alert("Combinatie met Meta + " + keychar) - metaChar = false; - } else { - alert("Ingedrukte toets: " + key); - } - } - } - function metaKeyUp(event) { - var key = event.keyCode || event.which; - if (key == exampleKey) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> - Druk een willekeurige toets! -</body> -</html></pre> -<h3 id="Browser_bugs_and_eigenaardigheden">Browser bugs and eigenaardigheden</h3> -<p>De twee beschreven eigenschappen van toetsen gebeurtenissen zijn <code>keyCode</code> en <code>charCode</code>. In simpele termen, <code>keyCode</code> verwijst naar de werkelijke toets dat door de gebruiker ingedrukt werd terwijl <code>charCode</code> de ASCII waarde van de toets weergeeft. Deze twee waarden hoeven niet gelijk te zijn; een kleine letter 'a' en een hoofdletter 'A' hebben dezelfde keyCode omdat de gebruiker dezelfde toets indrukt, maar een andere charCode omdat de resulterende teken verschilt.</p> -<p>De manier waarmee verschillende browser met charCode omgaan is niet overal consistent. Als voorbeeld, Internet Explorer en Opera ondersteunen <code>charCode niet</code>. Aan de andere kant geven ze de karakter informatie in keyCode, maar alleen bij de onkeypress event. De keyCode eigenschap levert voor onkeydown and onkeyup events informatie op over de toets. Firefox gebruikt een ander woord, namelijk "which" welke het verschil in de teken kan onderscheiden.</p> -<p>Lees in de Mozilla Documentatie over <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events (en)</a> voor een uitgebreidere behandeling van toetsenbord gebeurtenissen.</p> -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Voorbeeld: rondslepen van afbeeldingen</h2> -<p>In het volgende voorbeeld is het mogelijk om een afbeelding in een pagina rond te slepen:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> -<style> -img { position: absolute; } -</style> - -<script> -// declareer globale variablen die hieronder wordt gebruikt. -var mouseover, posLinks, posBoven, xCoord, yCoord; - -window.onload = function() { - - movMeId = document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - - document.onmousedown = coordinates; - document.onmouseup = mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - - // e.srcElement bevat het doel element in IE8 en ouder, - // e.target wordt gebruikt in standaardbrowsers (inclusief Firefox) - // Beide eigenschappen geven het HTML element waarin het event optrad - - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id == "ImgMov") { - mouseover = true; - posLinks = parseInt(movMeId.style.left); - posBoven = parseInt(movMeId.style.top); - xCoord = e.clientX; - yCoord = e.clientY; - document.onmousemove = moveImage; - return false; - } else { - return false; - } - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = posLinks + e.clientX - xCoord + "px"; - movMeId.style.top = posBoven + e.clientY - yCoord + "px"; - return false; - } - - function mouseup(e) { - // voorkom dat de moveImage functie wordt aangeroepen door de - // gebeurtenis registratie te verwijderen. - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64"> - <p>Sleep en zet het plaatje op deze pagina neer</p> -</body> - -</html></pre> -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Voorbeeld: vergroot of verklein objecten</h2> -<div> - <p>Voorbeeld waarbij de grootte van een afbeelding wordt gewijzigd (de originele afbeelding wordt niet gewijzigd, enkel hoe deze op de pagina weergeven wordt).</p> - <pre class="brush:js"> <!DOCTYPE html> - <html> - <head> - <style> - #resizeImage { - margin-left: 100px; - } - </style> - <script> - window.onload = function() { - - var resizeId = document.getElementById("resizeImage"); - var resizeStartCoordsX, - resizeStartCoordsY, - resizeEndCoordsX, - resizeEndCoordsY; - - var resizeEndCoords; - var resizing = false; - - document.onmousedown = coordinatesMousedown; - document.onmouseup = coordinatesMouseup; - - function coordinatesMousedown(e) { - if (e == null) { - e = window.event; - } - - var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; - - if (element.id == "resizeImage") { - resizing = true; - resizeStartCoordsX = e.clientX; - resizeStartCoordsY = e.clientY; - } - return false; - } - - function coordinatesMouseup(e) { - if (e == null) { - e = window.event; - } - - if (resizing === true) { - var currentImageWidth = parseInt(resizeId.width); - var currentImageHeight = parseInt(resizeId.height); - - resizeEndCoordsX = e.clientX; - resizeEndCoordsY = e.clientY; - - resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; - resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; - - resizing = false; - } - return false; - } - } - </script> - </head> - - <body> - <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" -width="64" height="64"> - <p>Klik op het plaatje en sleep om de grootte te wijzigen.</p> - </body> - - </html></pre> -</div> -<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Voorbeeld: lijnen tekenen</h2> -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> -<script> -function linedraw(ax,ay,bx,by) -{ - if(ay>by) - { - bx=ax+bx; - ax=bx-ax; - bx=bx-ax; - by=ay+by; - ay=by-ay; - by=by-ay; - } - var calc=Math.atan((ay-by)/(bx-ax)); - calc=calc*180/Math.PI; - var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)); - document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>" -} -</script> -</head> -<body onload=linedraw(200,400,500,900);> <!-- Replace with your co-ordinate --> -</body> -</html></pre> -<p> </p> diff --git a/files/nl/web/javascript/guide/reguliere_expressies/index.html b/files/nl/web/javascript/guide/regular_expressions/index.html index 7b37d5ed31..7b37d5ed31 100644 --- a/files/nl/web/javascript/guide/reguliere_expressies/index.html +++ b/files/nl/web/javascript/guide/regular_expressions/index.html diff --git a/files/nl/web/javascript/guide/werken_met_objecten/index.html b/files/nl/web/javascript/guide/working_with_objects/index.html index a2dffff1b8..a2dffff1b8 100644 --- a/files/nl/web/javascript/guide/werken_met_objecten/index.html +++ b/files/nl/web/javascript/guide/working_with_objects/index.html diff --git a/files/nl/web/javascript/reference/klasses/index.html b/files/nl/web/javascript/reference/classes/index.html index ca5210371c..ca5210371c 100644 --- a/files/nl/web/javascript/reference/klasses/index.html +++ b/files/nl/web/javascript/reference/classes/index.html diff --git a/files/nl/web/javascript/reference/global_objects/object/prototype/index.html b/files/nl/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index 8fcfcbfa59..0000000000 --- a/files/nl/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -tags: - - JavaScript - - Object - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -<div>{{JSRef}}</div> - -<p>De Object.prototype eigenschap vertegenwoordigt het {{jsxref("Object")}} prototype object.</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Beschrijving">Beschrijving</h2> - -<p>Alle objecten in JavaScript zijn afstammelingen van het {{jsxref("Object")}}; alle objecten erven methode's en eigenschappen van Object.prototype, althans kunnen ze overschreden worden (behalve een Object met een null prototype, i.e Object.create(null)). Bijvoorbeeld, een andere constructors' prototypes overschrijden de constructor eigenschap en voorzien hun eigen {{jsxref("Object.prototype.toString()", "toString()")}} methode's.</p> - -<p>Veranderingen in het Object prototype object zijn zichtbaar voor alle objecten door prototype chaining, tenzij de eigenschappen en methode's onderworpen door deze veranderingen worden overschreden verderop de prototype chain. Dit voorziet een vrij krachtig althans potentieel gevaarlijk mechanisme om het gedrag van een object te overschrijden of aan te vullen.</p> - -<h2 id="Eigenschappen">Eigenschappen</h2> - -<dl> - <dt>{{jsxref("Object.prototype.constructor")}}</dt> - <dd>Beschrijft de functie dat het object's prototype aanmaakt.</dd> - <dd><strong style="font-weight: 700;">{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</strong></dd> - <dd>Wijst aan het object welke was bebruikt als prototype wanneer het object was geinstantieerd.</dd> - <dd>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dd> - <dd>Laat het toe om een functie te definieeren dat zal worden uitgevoerd wanneer een ongedefinieerd lid van een object word geroepen als een methode. </dd> - <dd><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dd> - <dd><s class="obsoleteElement">Used to return the number of enumerable properties directly on a user-defined object, but has been removed.</s></dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Used to point to an object's context, but has been removed.</s></dd> -</dl> - -<h2 id="Methode's">Methode's</h2> - -<dl> - <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Associeert een functie met een eigenschap dat, wanneer toegankelijk, een functie uitvoerd en zijn keert zijn return waarde terug.</dd> - <dd>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dd> - <dd>Associeert een functie met een eigenschap dat, wanneer gezet, een functie uitvoerd dat de eigenchap veranderd.</dd> - <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Keert de functie geassocieert met de gespecificieerde eigenschap door de {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} methode.</dd> - <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Keert de functie geassocieert met de gespecificieerde eigenschap door de {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} method.</dd> - <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> - <dd>Keert een boolean terug die aanwijst of een object dat de eigenschap bevat als een directe eigenschap van dat object en niet wordt geerfd door de prototype chain.</dd> - <dd><strong style="font-weight: 700;">{{jsxref("Object.prototype.isPrototypeOf()")}}</strong></dd> - <dd>Keert een boolean waarde terug die aanwijst of het object in de prototype chain zit van het object van waaruit deze methode is geroepen.</dd> - <dd><strong style="font-weight: 700;">{{jsxref("Object.prototype.propertyIsEnumerable()")}}</strong></dd> - <dd>Keert een boolean waarde terug die aanwijst of de <a href="/en-US/docs/Web/JavaScript/Data_structures#Properties">ECMAScript [[Enumerable]] attribute</a> is gezet.</dd> - <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Keert een string terug die de bron van een object zijn literal, die het object waarop deze methode word op geroepen represedenteerd; je kan deze waarde gebruiken om een niew object te maken.</dd> - <dd>{{jsxref("Object.prototype.toLocaleString()")}}</dd> - <dd>Roept {{jsxref("Object.toString", "toString()")}}.</dd> - <dt>{{jsxref("Object.prototype.toString()")}}</dt> - <dd>Keert een string representatie terug van het object.</dd> - <dd><strong style="font-weight: 700;">{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</strong></dd> - <dd>Verwijderd een watchpoint van een eigenschap van het object.</dd> - <dd><strong style="font-weight: 700;">{{jsxref("Object.prototype.valueOf()")}}</strong></dd> - <dd>Keert een primitive waarde terug van het gespecifieerde object.</dd> - <dd><strong style="font-weight: 700;">{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</strong></dd> - <dd>Voegt een watchpoint toe aan de eigenschap van het object.</dd> - <dd><s class="obsoleteElement" style="font-weight: 700;">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dd> - <dd><s class="obsoleteElement">Used to evaluate a string of JavaScript code in the context of the specified object, but has been removed.</s></dd> -</dl> - -<h2 id="Voorbeelden">Voorbeelden</h2> - -<p>Als het gedrag van bestaande Object.prototype's methode's worden veranderd, overweeg code te injecteren door je uitbreiding in te wikkelen voor of achter de bestaande logica. Bijvoorbeeld, deze (ongeteste) code zal onvoorwaardelijk aangepaste logica uitvoeren vooralleer de ingebouwde logica of anderman's uitbreiding word uitgevoerd.</p> - -<p>Wanneer een functie is geroepen zullen de argumenten worden gehouden in de array-achtige "variable" van de argumenten. Bijvoorbeeld, in de call "myFn(a, b, c)", zullen de argumenten binnenin myFn's lichaam 3 array elementen bevatten die coressponderen tot (a, b, c). Wanneer prototype's met haken worden bijgewerkt, voer simpelweg deze & de argementen (de call toestand) toe aan het huidig gedrag door apply() te roepen op de functie. Dit patroon can worden gebruikt voor elk prototype, zoals Node.prototype, Function.prototype, etc.</p> - -<p>var current = Object.prototype.valueOf; // Since my property "-prop-value" is cross-cutting and isn't always // on the same prototype chain, I want to modify Object.prototype: Object.prototype.valueOf = function() { if (this.hasOwnProperty("-prop-value") { return this["-prop-value"]; } else { // It doesn't look like one of my objects, so let's fall back on // the default behavior by reproducing the current behavior as best we can. // The apply behaves like "super" in some other languages. // Even though valueOf() doesn't take arguments, some other hook may. return current.apply(this, arguments); } }</p> - -<p>Doordat JavaScript geen sub-classe object bevat, prototype is een handige workaround om een "base class" object aan te maken van bepaalde functie's die zich gedragen als objecten. Bijvoorbeeld:</p> - -<pre class="brush: js">var Person = function() { - this.canTalk = true; -}; - -Person.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name); - } -}; - -var Employee = function(name, title) { - Person.call(this); - this.name = name; - this.title = title; -}; - -Employee.prototype = Object.create(Person.prototype); -Employee.prototype.constructor = Employee; - -Employee.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name + ', the ' + this.title); - } -}; - -var Customer = function(name) { - Person.call(this); - this.name = name; -}; - -Customer.prototype = Object.create(Person.prototype); -Customer.prototype.constructor = Customer; - -var Mime = function(name) { - Person.call(this); - this.name = name; - this.canTalk = false; -}; - -Mime.prototype = Object.create(Person.prototype); -Mime.prototype.constructor = Mime; - -var bob = new Employee('Bob', 'Builder'); -var joe = new Customer('Joe'); -var rg = new Employee('Red Green', 'Handyman'); -var mike = new Customer('Mike'); -var mime = new Mime('Mime'); - -bob.greet(); -// Hi, I am Bob, the Builder - -joe.greet(); -// Hi, I am Joe - -rg.greet(); -// Hi, I am Red Green, the Handyman - -mike.greet(); -// Hi, I am Mike - -mime.greet(); -</pre> - -<h2 id="Specificaties">Specificaties</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specificatie</th> - <th scope="col">Status</th> - <th scope="col">Commentaar</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initiale definitie. Geimplemented in JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_ondersteuning">Browser ondersteuning</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Soort</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basis Ondersteuning</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Soort</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td> - <table class="compat-table"> - <tbody> - <tr> - <td>Basis Ondersteuning</td> - <td> </td> - </tr> - </tbody> - </table> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introductie tot</a><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript"> Object-Oriented JavaScript</a></li> -</ul> diff --git a/files/nl/web/javascript/reference/global_objects/symbool/index.html b/files/nl/web/javascript/reference/global_objects/symbol/index.html index f0777451c8..f0777451c8 100644 --- a/files/nl/web/javascript/reference/global_objects/symbool/index.html +++ b/files/nl/web/javascript/reference/global_objects/symbol/index.html diff --git a/files/nl/web/javascript/reference/operatoren/index.html b/files/nl/web/javascript/reference/operators/index.html index fc499002b4..fc499002b4 100644 --- a/files/nl/web/javascript/reference/operatoren/index.html +++ b/files/nl/web/javascript/reference/operators/index.html diff --git a/files/nl/web/javascript/reference/operatoren/typeof/index.html b/files/nl/web/javascript/reference/operators/typeof/index.html index e86cf0b324..e86cf0b324 100644 --- a/files/nl/web/javascript/reference/operatoren/typeof/index.html +++ b/files/nl/web/javascript/reference/operators/typeof/index.html diff --git a/files/nl/web/svg/tutorial/basis_transformaties/index.html b/files/nl/web/svg/tutorial/basic_transformations/index.html index 1d19dd9ffa..1d19dd9ffa 100644 --- a/files/nl/web/svg/tutorial/basis_transformaties/index.html +++ b/files/nl/web/svg/tutorial/basic_transformations/index.html |